Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
createResizeObserverFromDocument: function() {
return _index.createResizeObserverFromDocument;
},
getRTLRootMargin: function() {
return _index.getRTLRootMargin;
},
useDynamicVirtualizerMeasure: function() {
return _index.useDynamicVirtualizerMeasure;
},
useIntersectionObserver: function() {
return _index.useIntersectionObserver;
},
useMeasureList: function() {
return _index.useMeasureList;
},
useResizeObserverRef_unstable: function() {
return _index.useResizeObserverRef_unstable;
},
useStaticVirtualizerMeasure: function() {
return _index.useStaticVirtualizerMeasure;
}
});
const _index = require("./hooks/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Hooks.ts"],"sourcesContent":["export type {\n IndexedResizeCallbackElement,\n ResizeCallbackWithRef,\n VirtualizerDynamicPaginationProps,\n VirtualizerMeasureDynamicProps,\n VirtualizerMeasureProps,\n VirtualizerStaticPaginationProps,\n} from './hooks/index';\nexport {\n createResizeObserverFromDocument,\n getRTLRootMargin,\n useDynamicVirtualizerMeasure,\n useIntersectionObserver,\n useMeasureList,\n useResizeObserverRef_unstable,\n useStaticVirtualizerMeasure,\n} from './hooks/index';\n"],"names":["createResizeObserverFromDocument","getRTLRootMargin","useDynamicVirtualizerMeasure","useIntersectionObserver","useMeasureList","useResizeObserverRef_unstable","useStaticVirtualizerMeasure"],"mappings":";;;;;;;;;;;;eASEA,uCAAgC;;;eAChCC,uBAAgB;;;eAChBC,mCAA4B;;;eAC5BC,8BAAuB;;;eACvBC,qBAAc;;;eACdC,oCAA6B;;;eAC7BC,kCAA2B;;;uBACtB,gBAAgB"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
VirtualizerContextProvider: function() {
return _index.VirtualizerContextProvider;
},
scrollToItemDynamic: function() {
return _index.scrollToItemDynamic;
},
scrollToItemStatic: function() {
return _index.scrollToItemStatic;
},
useVirtualizerContextState_unstable: function() {
return _index.useVirtualizerContextState_unstable;
},
useVirtualizerContext_unstable: function() {
return _index.useVirtualizerContext_unstable;
}
});
const _index = require("./utilities/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Utilities.ts"],"sourcesContent":["export type {\n DynamicVirtualizerContextProps,\n ScrollToInterface,\n ScrollToItemDynamicParams,\n ScrollToItemStaticParams,\n VirtualizerContextProps,\n} from './utilities/index';\nexport {\n VirtualizerContextProvider,\n scrollToItemDynamic,\n scrollToItemStatic,\n useVirtualizerContextState_unstable,\n useVirtualizerContext_unstable,\n} from './utilities/index';\n"],"names":["VirtualizerContextProvider","scrollToItemDynamic","scrollToItemStatic","useVirtualizerContextState_unstable","useVirtualizerContext_unstable"],"mappings":";;;;;;;;;;;;eAQEA,iCAA0B;;;eAC1BC,0BAAmB;;;eACnBC,yBAAkB;;;eAClBC,0CAAmC;;;eACnCC,qCAA8B;;;uBACzB,oBAAoB"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Virtualizer: function() {
return _index.Virtualizer;
},
renderVirtualizerChildPlaceholder: function() {
return _index.renderVirtualizerChildPlaceholder;
},
renderVirtualizer_unstable: function() {
return _index.renderVirtualizer_unstable;
},
useVirtualizerStyles_unstable: function() {
return _index.useVirtualizerStyles_unstable;
},
useVirtualizer_unstable: function() {
return _index.useVirtualizer_unstable;
},
virtualizerClassNames: function() {
return _index.virtualizerClassNames;
}
});
const _index = require("./components/Virtualizer/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Virtualizer.ts"],"sourcesContent":["export type {\n VirtualizerChildRenderFunction,\n VirtualizerConfigProps,\n VirtualizerConfigState,\n VirtualizerDataRef,\n VirtualizerProps,\n VirtualizerSlots,\n VirtualizerState,\n} from './components/Virtualizer/index';\nexport {\n Virtualizer,\n renderVirtualizerChildPlaceholder,\n renderVirtualizer_unstable,\n useVirtualizerStyles_unstable,\n useVirtualizer_unstable,\n virtualizerClassNames,\n} from './components/Virtualizer/index';\n"],"names":["Virtualizer","renderVirtualizerChildPlaceholder","renderVirtualizer_unstable","useVirtualizerStyles_unstable","useVirtualizer_unstable","virtualizerClassNames"],"mappings":";;;;;;;;;;;;eAUEA,kBAAW;;;eACXC,wCAAiC;;;eACjCC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;eACvBC,4BAAqB;;;uBAChB,iCAAiC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
VirtualizerScrollView: function() {
return _index.VirtualizerScrollView;
},
renderVirtualizerScrollView_unstable: function() {
return _index.renderVirtualizerScrollView_unstable;
},
useVirtualizerScrollViewStyles_unstable: function() {
return _index.useVirtualizerScrollViewStyles_unstable;
},
useVirtualizerScrollView_unstable: function() {
return _index.useVirtualizerScrollView_unstable;
},
virtualizerScrollViewClassNames: function() {
return _index.virtualizerScrollViewClassNames;
}
});
const _index = require("./components/VirtualizerScrollView/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/VirtualizerScrollView.ts"],"sourcesContent":["export type {\n VirtualizerScrollViewProps,\n VirtualizerScrollViewSlots,\n VirtualizerScrollViewState,\n} from './components/VirtualizerScrollView/index';\nexport {\n VirtualizerScrollView,\n renderVirtualizerScrollView_unstable,\n useVirtualizerScrollViewStyles_unstable,\n useVirtualizerScrollView_unstable,\n virtualizerScrollViewClassNames,\n} from './components/VirtualizerScrollView/index';\n"],"names":["VirtualizerScrollView","renderVirtualizerScrollView_unstable","useVirtualizerScrollViewStyles_unstable","useVirtualizerScrollView_unstable","virtualizerScrollViewClassNames"],"mappings":";;;;;;;;;;;;eAMEA,4BAAqB;;;eACrBC,2CAAoC;;;eACpCC,8CAAuC;;;eACvCC,wCAAiC;;;eACjCC,sCAA+B;;;uBAC1B,2CAA2C"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
VirtualizerScrollViewDynamic: function() {
return _index.VirtualizerScrollViewDynamic;
},
renderVirtualizerScrollViewDynamic_unstable: function() {
return _index.renderVirtualizerScrollViewDynamic_unstable;
},
useVirtualizerScrollViewDynamicStyles_unstable: function() {
return _index.useVirtualizerScrollViewDynamicStyles_unstable;
},
useVirtualizerScrollViewDynamic_unstable: function() {
return _index.useVirtualizerScrollViewDynamic_unstable;
},
virtualizerScrollViewDynamicClassNames: function() {
return _index.virtualizerScrollViewDynamicClassNames;
}
});
const _index = require("./components/VirtualizerScrollViewDynamic/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/VirtualizerScrollViewDynamic.ts"],"sourcesContent":["export type {\n VirtualizerScrollViewDynamicProps,\n VirtualizerScrollViewDynamicSlots,\n VirtualizerScrollViewDynamicState,\n} from './components/VirtualizerScrollViewDynamic/index';\nexport {\n VirtualizerScrollViewDynamic,\n renderVirtualizerScrollViewDynamic_unstable,\n useVirtualizerScrollViewDynamicStyles_unstable,\n useVirtualizerScrollViewDynamic_unstable,\n virtualizerScrollViewDynamicClassNames,\n} from './components/VirtualizerScrollViewDynamic/index';\n"],"names":["VirtualizerScrollViewDynamic","renderVirtualizerScrollViewDynamic_unstable","useVirtualizerScrollViewDynamicStyles_unstable","useVirtualizerScrollViewDynamic_unstable","virtualizerScrollViewDynamicClassNames"],"mappings":";;;;;;;;;;;;eAMEA,mCAA4B;;;eAC5BC,kDAA2C;;;eAC3CC,qDAA8C;;;eAC9CC,+CAAwC;;;eACxCC,6CAAsC;;;uBACjC,kDAAkD"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Virtualizer", {
enumerable: true,
get: function() {
return Virtualizer;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useVirtualizerStylesstyles = require("./useVirtualizerStyles.styles");
const _useVirtualizer = require("./useVirtualizer");
const _renderVirtualizer = require("./renderVirtualizer");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Virtualizer = (props)=>{
const state = (0, _useVirtualizer.useVirtualizer_unstable)(props);
(0, _useVirtualizerStylesstyles.useVirtualizerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useVirtualizerStyles_unstable')(state);
return (0, _renderVirtualizer.renderVirtualizer_unstable)(state);
};
Virtualizer.displayName = 'Virtualizer';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { VirtualizerProps } from './Virtualizer.types';\nimport { useVirtualizerStyles_unstable } from './useVirtualizerStyles.styles';\nimport { useVirtualizer_unstable } from './useVirtualizer';\nimport { renderVirtualizer_unstable } from './renderVirtualizer';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Virtualizer pseudo-component, this functional wrapper\n * provides a simple interface for reducing the total number\n * of elements rendered at one time in large lists.\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const Virtualizer: React.FC<VirtualizerProps> = (props: VirtualizerProps) => {\n const state = useVirtualizer_unstable(props);\n useVirtualizerStyles_unstable(state);\n useCustomStyleHook_unstable('useVirtualizerStyles_unstable')(state);\n\n return renderVirtualizer_unstable(state);\n};\n\nVirtualizer.displayName = 'Virtualizer';\n"],"names":["React","useVirtualizerStyles_unstable","useVirtualizer_unstable","renderVirtualizer_unstable","useCustomStyleHook_unstable","Virtualizer","props","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4CAEe,gCAAgC;gCACtC,mBAAmB;mCAChB,sBAAsB;qCACrB,kCAAkC;AAQvE,MAAMK,cAA0C,CAACC;IACtD,MAAMC,YAAQL,uCAAAA,EAAwBI;QACtCL,yDAAAA,EAA8BM;QAC9BH,gDAAAA,EAA4B,iCAAiCG;IAE7D,WAAOJ,6CAAAA,EAA2BI;AACpC,EAAE;AAEFF,YAAYG,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Virtualizer: function() {
return _Virtualizer.Virtualizer;
},
renderVirtualizerChildPlaceholder: function() {
return _renderVirtualizer.renderVirtualizerChildPlaceholder;
},
renderVirtualizer_unstable: function() {
return _renderVirtualizer.renderVirtualizer_unstable;
},
useVirtualizerStyles_unstable: function() {
return _useVirtualizerStylesstyles.useVirtualizerStyles_unstable;
},
useVirtualizer_unstable: function() {
return _useVirtualizer.useVirtualizer_unstable;
},
virtualizerClassNames: function() {
return _useVirtualizerStylesstyles.virtualizerClassNames;
}
});
const _Virtualizer = require("./Virtualizer");
const _useVirtualizer = require("./useVirtualizer");
const _renderVirtualizer = require("./renderVirtualizer");
const _useVirtualizerStylesstyles = require("./useVirtualizerStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Virtualizer/index.ts"],"sourcesContent":["export { Virtualizer } from './Virtualizer';\nexport type {\n VirtualizerChildRenderFunction,\n VirtualizerConfigProps,\n VirtualizerConfigState,\n VirtualizerDataRef,\n VirtualizerProps,\n VirtualizerSlots,\n VirtualizerState,\n} from './Virtualizer.types';\nexport { useVirtualizer_unstable } from './useVirtualizer';\nexport { renderVirtualizerChildPlaceholder, renderVirtualizer_unstable } from './renderVirtualizer';\nexport { useVirtualizerStyles_unstable, virtualizerClassNames } from './useVirtualizerStyles.styles';\n"],"names":["Virtualizer","useVirtualizer_unstable","renderVirtualizerChildPlaceholder","renderVirtualizer_unstable","useVirtualizerStyles_unstable","virtualizerClassNames"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAWXE,oDAAiC;;;eAAEC,6CAA0B;;;eAC7DC,yDAA6B;;;eAF7BH,uCAAuB;;;eAEQI,iDAAqB;;;6BAZjC,gBAAgB;gCAUJ,mBAAmB;mCACmB,sBAAsB;4CAC/B,gCAAgC"}

View File

@@ -0,0 +1,42 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
renderVirtualizerChildPlaceholder: function() {
return renderVirtualizerChildPlaceholder;
},
renderVirtualizer_unstable: function() {
return renderVirtualizer_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const renderVirtualizer_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.beforeContainer, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.before, {})
}),
state.virtualizedChildren,
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.afterContainer, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.after, {})
})
]
});
};
const renderVirtualizerChildPlaceholder = (child, index)=>{
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.Suspense, {
fallback: null,
children: child
}, `fui-virtualizer-placeholder-${index}`);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Virtualizer/renderVirtualizer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport type { VirtualizerSlots, VirtualizerState } from './Virtualizer.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const renderVirtualizer_unstable = (state: VirtualizerState): React.ReactElement => {\n assertSlots<VirtualizerSlots>(state);\n return (\n <React.Fragment>\n {/* The 'before' bookend to hold items in place and detect scroll previous */}\n <state.beforeContainer>\n <state.before />\n </state.beforeContainer>\n {/* The reduced list of non-virtualized children to be rendered */}\n {state.virtualizedChildren}\n {/* The 'after' bookend to hold items in place and detect scroll next */}\n <state.afterContainer>\n <state.after />\n </state.afterContainer>\n </React.Fragment>\n );\n};\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const renderVirtualizerChildPlaceholder = (child: React.ReactNode, index: number): React.ReactElement => {\n return (\n <React.Suspense key={`fui-virtualizer-placeholder-${index}`} fallback={null}>\n {child}\n </React.Suspense>\n );\n};\n"],"names":["React","assertSlots","renderVirtualizer_unstable","state","Fragment","beforeContainer","before","virtualizedChildren","afterContainer","after","renderVirtualizerChildPlaceholder","child","index","Suspense","fallback"],"mappings":";;;;;;;;;;;qCA+BaU;;;IApBAR,0BAAAA;;;;;4BAVb,iCAAiD;iEAE1B,QAAQ;gCAGH,4BAA4B;AAKjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAC9B,OAAA,WAAA,OACE,gBAAA,EAACH,OAAMI,QAAQ,EAAA;;8BAEb,eAAA,EAACD,MAAME,eAAe,EAAA;0BACpB,WAAA,OAAA,eAAA,EAACF,MAAMG,MAAM,EAAA,CAAA;;YAGdH,MAAMI,mBAAmB;8BAE1B,eAAA,EAACJ,MAAMK,cAAc,EAAA;0BACnB,WAAA,OAAA,eAAA,EAACL,MAAMM,KAAK,EAAA,CAAA;;;;AAIpB,EAAE;AAIK,MAAMC,oCAAoC,CAACC,OAAwBC;IACxE,OAAA,WAAA,OACE,eAAA,EAACZ,OAAMa,QAAQ,EAAA;QAA8CC,UAAU;kBACpEH;OADkB,CAAC,4BAA4B,EAAEC,OAAO;AAI/D,EAAE"}

View File

@@ -0,0 +1,543 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useVirtualizer_unstable", {
enumerable: true,
get: function() {
return useVirtualizer_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useIntersectionObserver = require("../../hooks/useIntersectionObserver");
const _Utilities = require("../../Utilities");
const _reactutilities = require("@fluentui/react-utilities");
const _reactdom = require("react-dom");
function useVirtualizer_unstable(props) {
'use no memo';
const { itemSize, numItems, virtualizerLength, children: renderChild, getItemSize, bufferItems = Math.round(virtualizerLength / 4.0), bufferSize = Math.floor(bufferItems / 2.0) * itemSize, axis = 'vertical', reversed = false, virtualizerContext, onRenderedFlaggedIndex, imperativeVirtualizerRef, containerSizeRef, scrollViewRef, enableScrollLoad, updateScrollPosition, gap = 0 } = props;
/* The context is optional, it's useful for injecting additional index logic, or performing uniform state updates*/ const _virtualizerContext = (0, _Utilities.useVirtualizerContextState_unstable)(virtualizerContext);
// We use this ref as a constant source to access the virtualizer's state imperatively
const actualIndexRef = _react.useRef(_virtualizerContext.contextIndex);
const flaggedIndex = _react.useRef(null);
const actualIndex = _virtualizerContext.contextIndex;
// Just in case our ref gets out of date vs the context during a re-render
if (_virtualizerContext.contextIndex !== actualIndexRef.current) {
actualIndexRef.current = _virtualizerContext.contextIndex;
}
const setActualIndex = _react.useCallback((index)=>{
actualIndexRef.current = index;
_virtualizerContext.setContextIndex(index);
}, [
_virtualizerContext
]);
// Store ref to before padding element
const beforeElementRef = _react.useRef(null);
// Store ref to before padding element
const afterElementRef = _react.useRef(null);
// We need to store an array to track dynamic sizes, we can use this to incrementally update changes
const childSizes = _react.useRef(new Array(getItemSize ? numItems : 0));
/* We keep track of the progressive sizing/placement down the list,
this helps us skip re-calculations unless children/size changes */ const childProgressiveSizes = _react.useRef(new Array(getItemSize ? numItems : 0));
if (virtualizerContext === null || virtualizerContext === void 0 ? void 0 : virtualizerContext.childProgressiveSizes) {
virtualizerContext.childProgressiveSizes.current = childProgressiveSizes.current;
}
// The internal tracking REF for child array (updates often).
const childArray = _react.useRef(new Array(virtualizerLength));
const populateSizeArrays = ()=>{
if (!getItemSize) {
// Static sizes, never mind!
return;
}
if (numItems !== childSizes.current.length) {
childSizes.current = new Array(numItems);
}
if (numItems !== childProgressiveSizes.current.length) {
childProgressiveSizes.current = new Array(numItems);
if (virtualizerContext === null || virtualizerContext === void 0 ? void 0 : virtualizerContext.childProgressiveSizes) {
virtualizerContext.childProgressiveSizes.current = childProgressiveSizes.current;
}
}
for(let index = 0; index < numItems; index++){
const _gap = index < numItems - 1 ? gap : 0;
childSizes.current[index] = getItemSize(index) + _gap;
if (index === 0) {
childProgressiveSizes.current[index] = childSizes.current[index];
} else {
childProgressiveSizes.current[index] = childProgressiveSizes.current[index - 1] + childSizes.current[index];
}
}
};
const [isScrolling, setIsScrolling] = _react.useState(false);
const [setScrollTimer, clearScrollTimer] = (0, _reactutilities.useTimeout)();
const scrollCounter = _react.useRef(0);
const initializeScrollingTimer = _react.useCallback(()=>{
if (!enableScrollLoad) {
// Disabled by default for reduction of render callbacks
setIsScrolling(false);
clearScrollTimer();
return;
}
/*
* This can be considered the 'velocity' required to start 'isScrolling'
* INIT_SCROLL_FLAG_REQ: Number of renders required to activate isScrolling
* INIT_SCROLL_FLAG_DELAY: Amount of time (ms) before current number of renders is reset
* - Maybe we should let users customize these in the future.
*/ const INIT_SCROLL_FLAG_REQ = 10;
const INIT_SCROLL_FLAG_DELAY = 100;
scrollCounter.current++;
if (scrollCounter.current >= INIT_SCROLL_FLAG_REQ) {
setIsScrolling(true);
}
clearScrollTimer();
setScrollTimer(()=>{
setIsScrolling(false);
scrollCounter.current = 0;
}, INIT_SCROLL_FLAG_DELAY);
}, [
clearScrollTimer,
setScrollTimer,
enableScrollLoad
]);
_react.useEffect(()=>{
initializeScrollingTimer();
}, [
actualIndex,
initializeScrollingTimer
]);
const updateChildRows = _react.useCallback((newIndex)=>{
if (numItems === 0) {
/* Nothing to virtualize */ return;
}
/*
We reset the array every time to ensure children are re-rendered
This function should only be called when update is nessecary
*/ childArray.current = new Array(virtualizerLength);
const _actualIndex = Math.max(newIndex, 0);
const end = Math.min(_actualIndex + virtualizerLength, numItems);
for(let i = _actualIndex; i < end; i++){
childArray.current[i - _actualIndex] = renderChild(i, isScrolling);
}
}, [
isScrolling,
numItems,
renderChild,
virtualizerLength
]);
const updateCurrentItemSizes = _react.useCallback((newIndex)=>{
if (!getItemSize) {
// Static sizes, not required.
return;
}
// We should always call our size function on index change (only for the items that will be rendered)
// This ensures we request the latest data for incoming items in case sizing has changed.
const endIndex = Math.min(newIndex + virtualizerLength, numItems);
const startIndex = Math.max(newIndex, 0);
let didUpdate = false;
for(let i = startIndex; i < endIndex; i++){
const _gap = i < numItems - 1 ? gap : 0;
const newSize = getItemSize(i) + _gap;
if (newSize !== childSizes.current[i]) {
childSizes.current[i] = newSize;
didUpdate = true;
}
}
if (didUpdate) {
// Update our progressive size array
for(let i = startIndex; i < numItems; i++){
const prevSize = i > 0 ? childProgressiveSizes.current[i - 1] : 0;
childProgressiveSizes.current[i] = prevSize + childSizes.current[i];
}
}
}, [
getItemSize,
numItems,
virtualizerLength,
gap
]);
const batchUpdateNewIndex = _react.useCallback((index)=>{
// Local updates
updateChildRows(index);
updateCurrentItemSizes(index);
// State setters
setActualIndex(index);
}, [
setActualIndex,
updateChildRows,
updateCurrentItemSizes
]);
const findIndexRecursive = _react.useCallback((scrollPos, lowIndex, highIndex)=>{
if (lowIndex > highIndex) {
// We shouldn't get here - but no-op the index if we do.
return actualIndex;
}
const midpoint = Math.floor((lowIndex + highIndex) / 2);
const iBefore = Math.max(midpoint - 1, 0);
const iAfter = Math.min(midpoint + 1, childProgressiveSizes.current.length - 1);
const indexValue = childProgressiveSizes.current[midpoint];
const afterIndexValue = childProgressiveSizes.current[iAfter];
const beforeIndexValue = childProgressiveSizes.current[iBefore];
if (scrollPos <= afterIndexValue && scrollPos >= beforeIndexValue) {
/* We've found our index - if we are exactly matching before/after index that's ok,
better to reduce checks if it's right on the boundary. */ return midpoint;
}
if (indexValue > scrollPos) {
return findIndexRecursive(scrollPos, lowIndex, midpoint - 1);
} else {
return findIndexRecursive(scrollPos, midpoint + 1, highIndex);
}
}, [
actualIndex
]);
const getIndexFromSizeArray = _react.useCallback((scrollPos)=>{
/* Quick searches our progressive height array */ if (scrollPos === 0 || childProgressiveSizes.current.length === 0 || scrollPos <= childProgressiveSizes.current[0]) {
// Check start
return 0;
}
if (scrollPos >= childProgressiveSizes.current[childProgressiveSizes.current.length - 1]) {
// Check end
return childProgressiveSizes.current.length - 1;
}
return findIndexRecursive(scrollPos, 0, childProgressiveSizes.current.length - 1);
}, [
findIndexRecursive
]);
const getIndexFromScrollPosition = _react.useCallback((scrollPos)=>{
if (!getItemSize) {
return Math.round(scrollPos / (itemSize + gap));
}
return getIndexFromSizeArray(scrollPos);
}, [
getIndexFromSizeArray,
getItemSize,
itemSize,
gap
]);
const calculateTotalSize = _react.useCallback(()=>{
if (!getItemSize) {
return (itemSize + gap) * numItems;
}
// Time for custom size calcs
return childProgressiveSizes.current[numItems - 1];
}, [
getItemSize,
itemSize,
numItems,
gap
]);
const calculateBefore = _react.useCallback(()=>{
const currentIndex = Math.min(actualIndex, numItems - 1);
if (!getItemSize) {
// The missing items from before virtualization starts height
return currentIndex * (itemSize + gap);
}
if (currentIndex <= 0) {
return 0;
}
// Time for custom size calcs
return childProgressiveSizes.current[currentIndex - 1];
}, [
actualIndex,
getItemSize,
itemSize,
numItems,
gap
]);
const calculateAfter = _react.useCallback(()=>{
if (numItems === 0 || actualIndex + virtualizerLength >= numItems) {
return 0;
}
const lastItemIndex = Math.min(actualIndex + virtualizerLength, numItems);
if (!getItemSize) {
// The missing items from after virtualization ends height
const remainingItems = numItems - lastItemIndex;
return remainingItems * (itemSize + gap) - gap;
}
// Time for custom size calcs
return childProgressiveSizes.current[numItems - 1] - childProgressiveSizes.current[lastItemIndex - 1];
}, [
actualIndex,
getItemSize,
itemSize,
numItems,
virtualizerLength,
gap
]);
// We store the number of items since last render, we will allow an update if the number of items changes
const previousNumItems = _react.useRef(numItems);
// Observe intersections of virtualized components
const { setObserverList } = (0, _useIntersectionObserver.useIntersectionObserver)(_react.useCallback((entries, observer)=>{
/* Sanity check - do we even need virtualization? */ if (virtualizerLength > numItems) {
if (actualIndex !== 0) {
batchUpdateNewIndex(0);
}
// No-op
return;
}
if (entries.length === 0) {
// No entries found, return.
return;
}
// Find the latest entry that is intersecting
const sortedEntries = entries.sort((entry1, entry2)=>entry2.time - entry1.time);
const latestEntry = sortedEntries.find((entry)=>{
return entry.isIntersecting;
});
if (!latestEntry) {
return;
}
// We have to be sure our item sizes are up to date with current indexed ref before calculation
// Check if we still need
updateCurrentItemSizes(actualIndexRef.current);
const calculateOverBuffer = ()=>{
/**
* We avoid using the scroll ref scrollTop, it may be incorrect
* as virtualization may exist within a scroll view with other elements
* The benefit of using IO is that we can detect relative scrolls,
* so any items can be placed around the virtualizer in the scroll view
*/ let measurementPos = 0;
if (latestEntry.target === afterElementRef.current) {
// Get after buffers position
measurementPos = calculateTotalSize() - calculateAfter();
// Get exact intersection position based on overflow size (how far into IO did we scroll?)
const overflowAmount = axis === 'vertical' ? latestEntry.intersectionRect.height : latestEntry.intersectionRect.width;
// Add to original after position
measurementPos += overflowAmount;
// Ignore buffer size (IO offset)
measurementPos -= bufferSize;
var _containerSizeRef_current;
// we hit the after buffer and detected the end of view, we need to find the start index.
measurementPos -= (_containerSizeRef_current = containerSizeRef.current) !== null && _containerSizeRef_current !== void 0 ? _containerSizeRef_current : 0;
// Calculate how far past the window bounds we are (this will be zero if IO is within window)
const hOverflow = latestEntry.boundingClientRect.top - latestEntry.intersectionRect.top;
const hOverflowReversed = latestEntry.boundingClientRect.bottom - latestEntry.intersectionRect.bottom;
const wOverflow = latestEntry.boundingClientRect.left - latestEntry.intersectionRect.left;
const wOverflowReversed = latestEntry.boundingClientRect.right - latestEntry.intersectionRect.right;
const widthOverflow = reversed ? wOverflowReversed : wOverflow;
const heightOverflow = reversed ? hOverflowReversed : hOverflow;
const additionalOverflow = axis === 'vertical' ? heightOverflow : widthOverflow;
if (reversed) {
measurementPos += additionalOverflow;
} else {
measurementPos -= additionalOverflow;
}
} else if (latestEntry.target === beforeElementRef.current) {
// Get before buffers position
measurementPos = calculateBefore();
// Get exact intersection position based on overflow size (how far into window did we scroll IO?)
const overflowAmount = axis === 'vertical' ? latestEntry.intersectionRect.height : latestEntry.intersectionRect.width;
// Minus from original before position
measurementPos -= overflowAmount;
// Ignore buffer size (IO offset)
measurementPos += bufferSize;
// Calculate how far past the window bounds we are (this will be zero if IO is within window)
const hOverflow = latestEntry.boundingClientRect.bottom - latestEntry.intersectionRect.bottom;
const hOverflowReversed = latestEntry.boundingClientRect.top - latestEntry.intersectionRect.top;
const wOverflow = latestEntry.boundingClientRect.right - latestEntry.intersectionRect.right;
const wOverflowReversed = latestEntry.boundingClientRect.left - latestEntry.intersectionRect.left;
const widthOverflow = reversed ? wOverflowReversed : wOverflow;
const heightOverflow = reversed ? hOverflowReversed : hOverflow;
const additionalOverflow = axis === 'vertical' ? heightOverflow : widthOverflow;
if (reversed) {
measurementPos += additionalOverflow;
} else {
measurementPos -= additionalOverflow;
}
}
return measurementPos;
};
// Get exact relative 'scrollTop' via IO values
const measurementPos = calculateOverBuffer();
const maxIndex = Math.max(numItems - virtualizerLength, 0);
const startIndex = getIndexFromScrollPosition(measurementPos) - bufferItems;
// Safety limits
const newStartIndex = Math.min(Math.max(startIndex, 0), maxIndex);
(0, _reactdom.flushSync)(()=>{
// Callback to allow measure functions to check virtualizer length
if (previousNumItems.current === numItems && newStartIndex + virtualizerLength >= numItems && actualIndex + virtualizerLength >= numItems) {
// We've already hit the end, no need to update state.
return;
}
// We should ensure we update virtualizer calculations if the length changes
previousNumItems.current = virtualizerLength;
updateScrollPosition === null || updateScrollPosition === void 0 ? void 0 : updateScrollPosition(measurementPos);
if (actualIndex !== newStartIndex) {
batchUpdateNewIndex(newStartIndex);
}
});
}, [
actualIndex,
virtualizerLength,
axis,
reversed,
numItems,
bufferSize,
bufferItems,
containerSizeRef,
updateScrollPosition,
batchUpdateNewIndex,
calculateAfter,
calculateBefore,
calculateTotalSize,
getIndexFromScrollPosition,
updateCurrentItemSizes
]), {
root: scrollViewRef ? scrollViewRef === null || scrollViewRef === void 0 ? void 0 : scrollViewRef.current : null,
rootMargin: '0px',
threshold: 0
});
const setBeforeRef = _react.useCallback((element)=>{
if (!element || beforeElementRef.current === element) {
return;
}
beforeElementRef.current = element;
const newList = [];
newList.push(beforeElementRef.current);
if (afterElementRef.current) {
newList.push(afterElementRef.current);
}
// Ensure we update array if before element changed
setObserverList(newList);
}, [
setObserverList
]);
const setAfterRef = _react.useCallback((element)=>{
if (!element || afterElementRef.current === element) {
return;
}
afterElementRef.current = element;
const newList = [];
if (beforeElementRef.current) {
newList.push(beforeElementRef.current);
}
newList.push(afterElementRef.current);
// Ensure we update array if after element changed
setObserverList(newList);
}, [
setObserverList
]);
// Initialize the size array before first render.
const hasInitialized = _react.useRef(false);
const initializeSizeArray = ()=>{
if (hasInitialized.current === false) {
hasInitialized.current = true;
populateSizeArrays();
}
};
_react.useImperativeHandle(imperativeVirtualizerRef, ()=>{
return {
progressiveSizes: childProgressiveSizes,
nodeSizes: childSizes,
setFlaggedIndex: (index)=>flaggedIndex.current = index,
currentIndex: actualIndexRef
};
}, [
childProgressiveSizes,
childSizes
]);
// Initialization on mount - update array index to 0 (ready state).
// Only fire on mount (no deps).
_react.useEffect(()=>{
if (actualIndex < 0) {
batchUpdateNewIndex(0);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
/*
* forceUpdate:
* We only want to trigger this when child render or scroll loading changes,
* it will force re-render all children elements
*/ const forceUpdate = _react.useReducer(()=>({}), {})[1];
// If the user passes in an updated renderChild function - update current children
_react.useEffect(()=>{
if (actualIndex >= 0) {
updateChildRows(actualIndex);
forceUpdate();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
renderChild,
isScrolling
]);
_react.useEffect(()=>{
// Ensure we repopulate if getItemSize callback changes
populateSizeArrays();
// We only run this effect on getItemSize change (recalc dynamic sizes)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
getItemSize,
gap
]);
// Effect to check flag index on updates
_react.useEffect(()=>{
if (!onRenderedFlaggedIndex || flaggedIndex.current === null) {
return;
}
if (actualIndex <= flaggedIndex.current && actualIndex + virtualizerLength >= flaggedIndex.current) {
onRenderedFlaggedIndex(flaggedIndex.current);
flaggedIndex.current = null;
}
}, [
actualIndex,
onRenderedFlaggedIndex,
virtualizerLength
]);
// Ensure we have run through and updated the whole size list array at least once.
initializeSizeArray();
if (getItemSize && (numItems !== childSizes.current.length || numItems !== childProgressiveSizes.current.length)) {
// Child length mismatch, repopulate size arrays.
populateSizeArrays();
}
// Ensure we recalc if virtualizer length changes
const maxCompare = Math.min(virtualizerLength, numItems);
if (childArray.current.length !== maxCompare && actualIndex + childArray.current.length < numItems) {
updateChildRows(actualIndex);
}
const isFullyInitialized = hasInitialized.current && actualIndex >= 0;
return {
components: {
before: 'div',
after: 'div',
beforeContainer: 'div',
afterContainer: 'div'
},
virtualizedChildren: childArray.current,
before: _reactutilities.slot.always(props.before, {
defaultProps: {
ref: setBeforeRef,
role: 'none'
},
elementType: 'div'
}),
after: _reactutilities.slot.always(props.after, {
defaultProps: {
ref: setAfterRef,
role: 'none'
},
elementType: 'div'
}),
beforeContainer: _reactutilities.slot.always(props.beforeContainer, {
defaultProps: {
role: 'none'
},
elementType: 'div'
}),
afterContainer: _reactutilities.slot.always(props.afterContainer, {
defaultProps: {
role: 'none'
},
elementType: 'div'
}),
beforeBufferHeight: isFullyInitialized ? calculateBefore() : 0,
afterBufferHeight: isFullyInitialized ? calculateAfter() : 0,
totalVirtualizerHeight: isFullyInitialized ? calculateTotalSize() : virtualizerLength * itemSize,
virtualizerStartIndex: actualIndex,
axis,
bufferSize,
reversed,
childSizes,
childProgressiveSizes
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,124 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useVirtualizerStyles_unstable: function() {
return useVirtualizerStyles_unstable;
},
virtualizerClassNames: function() {
return virtualizerClassNames;
}
});
const _react = require("@griffel/react");
const virtualizerClassName = 'fui-Virtualizer';
const virtualizerClassNames = {
before: `${virtualizerClassName}__before`,
beforeContainer: `${virtualizerClassName}__beforeContainer`,
after: `${virtualizerClassName}__after`,
afterContainer: `${virtualizerClassName}__afterContainer`
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
mc9l5x: "ftgm304",
Bkecrkj: "f1aehjj5"
},
relative: {
qhf8xq: "f10pi13n"
},
horizontal: {
sshi5w: "fan4evk"
},
vertical: {
Bf4jedk: "f11qra4b"
}
}, {
d: [
".ftgm304{display:block;}",
".f1aehjj5{pointer-events:none;}",
".f10pi13n{position:relative;}",
".fan4evk{min-height:100%;}",
".f11qra4b{min-width:100%;}"
]
});
const useVirtualizerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { reversed, axis, beforeBufferHeight, afterBufferHeight, bufferSize } = state;
const horizontal = axis === 'horizontal';
state.before.className = (0, _react.mergeClasses)(virtualizerClassNames.before, styles.base, styles.relative, horizontal ? styles.horizontal : styles.vertical, state.before.className);
state.after.className = (0, _react.mergeClasses)(virtualizerClassNames.after, styles.base, styles.relative, horizontal ? styles.horizontal : styles.vertical, state.after.className);
state.beforeContainer.className = (0, _react.mergeClasses)(virtualizerClassNames.beforeContainer, styles.base, horizontal ? styles.horizontal : styles.vertical, state.beforeContainer.className);
state.afterContainer.className = (0, _react.mergeClasses)(virtualizerClassNames.afterContainer, styles.base, horizontal ? styles.horizontal : styles.vertical, state.afterContainer.className);
const beforeHeightPx = beforeBufferHeight + 'px';
const afterHeightPx = afterBufferHeight + 'px';
const beforeBufferHeightPx = beforeBufferHeight + bufferSize + 'px';
const afterBufferHeightPx = afterBufferHeight + bufferSize + 'px';
const bufferPx = bufferSize + 'px';
const beforeBuffer = {
// Column
...!reversed && !horizontal && {
marginBottom: `-${bufferPx}`
},
// Column-Reverse
...reversed && !horizontal && {
marginTop: `-${bufferPx}`
},
// Row
...!reversed && horizontal && {
marginRight: `-${bufferPx}`
},
// Row-Reverse
...reversed && horizontal && {
marginLeft: `-${bufferPx}`
}
};
const afterBuffer = {
// Column
...!reversed && !horizontal && {
marginTop: `-${bufferPx}`
},
// Column-Reverse
...reversed && !horizontal && {
marginBottom: `-${bufferPx}`
},
// Row
...!reversed && horizontal && {
marginLeft: `-${bufferPx}`
},
// Row-Reverse
...reversed && horizontal && {
marginRight: `-${bufferPx}`
}
};
state.before.style = {
height: horizontal ? '100%' : beforeBufferHeightPx,
width: horizontal ? beforeBufferHeightPx : '100%',
...beforeBuffer,
...state.before.style
};
state.beforeContainer.style = {
height: horizontal ? 'auto' : beforeHeightPx,
width: horizontal ? beforeHeightPx : 'auto',
...state.beforeContainer.style
};
state.after.style = {
height: horizontal ? '100%' : afterBufferHeightPx,
width: horizontal ? afterBufferHeightPx : '100%',
...afterBuffer,
...state.after.style
};
state.afterContainer.style = {
height: horizontal ? 'auto' : afterHeightPx,
width: horizontal ? afterHeightPx : 'auto',
...state.afterContainer.style
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,116 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useVirtualizerStyles_unstable: function() {
return useVirtualizerStyles_unstable;
},
virtualizerClassNames: function() {
return virtualizerClassNames;
}
});
const _react = require("@griffel/react");
const virtualizerClassName = 'fui-Virtualizer';
const virtualizerClassNames = {
before: `${virtualizerClassName}__before`,
beforeContainer: `${virtualizerClassName}__beforeContainer`,
after: `${virtualizerClassName}__after`,
afterContainer: `${virtualizerClassName}__afterContainer`
};
const useStyles = (0, _react.makeStyles)({
base: {
display: 'block',
pointerEvents: 'none'
},
relative: {
position: 'relative'
},
horizontal: {
minHeight: '100%'
},
vertical: {
minWidth: '100%'
}
});
const useVirtualizerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { reversed, axis, beforeBufferHeight, afterBufferHeight, bufferSize } = state;
const horizontal = axis === 'horizontal';
state.before.className = (0, _react.mergeClasses)(virtualizerClassNames.before, styles.base, styles.relative, horizontal ? styles.horizontal : styles.vertical, state.before.className);
state.after.className = (0, _react.mergeClasses)(virtualizerClassNames.after, styles.base, styles.relative, horizontal ? styles.horizontal : styles.vertical, state.after.className);
state.beforeContainer.className = (0, _react.mergeClasses)(virtualizerClassNames.beforeContainer, styles.base, horizontal ? styles.horizontal : styles.vertical, state.beforeContainer.className);
state.afterContainer.className = (0, _react.mergeClasses)(virtualizerClassNames.afterContainer, styles.base, horizontal ? styles.horizontal : styles.vertical, state.afterContainer.className);
const beforeHeightPx = beforeBufferHeight + 'px';
const afterHeightPx = afterBufferHeight + 'px';
const beforeBufferHeightPx = beforeBufferHeight + bufferSize + 'px';
const afterBufferHeightPx = afterBufferHeight + bufferSize + 'px';
const bufferPx = bufferSize + 'px';
const beforeBuffer = {
// Column
...!reversed && !horizontal && {
marginBottom: `-${bufferPx}`
},
// Column-Reverse
...reversed && !horizontal && {
marginTop: `-${bufferPx}`
},
// Row
...!reversed && horizontal && {
marginRight: `-${bufferPx}`
},
// Row-Reverse
...reversed && horizontal && {
marginLeft: `-${bufferPx}`
}
};
const afterBuffer = {
// Column
...!reversed && !horizontal && {
marginTop: `-${bufferPx}`
},
// Column-Reverse
...reversed && !horizontal && {
marginBottom: `-${bufferPx}`
},
// Row
...!reversed && horizontal && {
marginLeft: `-${bufferPx}`
},
// Row-Reverse
...reversed && horizontal && {
marginRight: `-${bufferPx}`
}
};
state.before.style = {
height: horizontal ? '100%' : beforeBufferHeightPx,
width: horizontal ? beforeBufferHeightPx : '100%',
...beforeBuffer,
...state.before.style
};
state.beforeContainer.style = {
height: horizontal ? 'auto' : beforeHeightPx,
width: horizontal ? beforeHeightPx : 'auto',
...state.beforeContainer.style
};
state.after.style = {
height: horizontal ? '100%' : afterBufferHeightPx,
width: horizontal ? afterBufferHeightPx : '100%',
...afterBuffer,
...state.after.style
};
state.afterContainer.style = {
height: horizontal ? 'auto' : afterHeightPx,
width: horizontal ? afterHeightPx : 'auto',
...state.afterContainer.style
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "VirtualizerScrollView", {
enumerable: true,
get: function() {
return VirtualizerScrollView;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _useVirtualizerScrollView = require("./useVirtualizerScrollView");
const _renderVirtualizerScrollView = require("./renderVirtualizerScrollView");
const _useVirtualizerScrollViewStylesstyles = require("./useVirtualizerScrollViewStyles.styles");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const VirtualizerScrollView = (props)=>{
const state = (0, _useVirtualizerScrollView.useVirtualizerScrollView_unstable)(props);
(0, _useVirtualizerScrollViewStylesstyles.useVirtualizerScrollViewStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useVirtualizerScrollViewStyles_unstable')(state);
return (0, _renderVirtualizerScrollView.renderVirtualizerScrollView_unstable)(state);
};
VirtualizerScrollView.displayName = 'VirtualizerScrollView';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/VirtualizerScrollView/VirtualizerScrollView.ts"],"sourcesContent":["'use client';\n\nimport type { VirtualizerScrollViewProps } from './VirtualizerScrollView.types';\nimport { useVirtualizerScrollView_unstable } from './useVirtualizerScrollView';\nimport { renderVirtualizerScrollView_unstable } from './renderVirtualizerScrollView';\nimport { useVirtualizerScrollViewStyles_unstable } from './useVirtualizerScrollViewStyles.styles';\nimport * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Virtualizer ScrollView\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const VirtualizerScrollView: React.FC<VirtualizerScrollViewProps> = (props: VirtualizerScrollViewProps) => {\n const state = useVirtualizerScrollView_unstable(props);\n\n useVirtualizerScrollViewStyles_unstable(state);\n useCustomStyleHook_unstable('useVirtualizerScrollViewStyles_unstable')(state);\n\n return renderVirtualizerScrollView_unstable(state);\n};\n\nVirtualizerScrollView.displayName = 'VirtualizerScrollView';\n"],"names":["useVirtualizerScrollView_unstable","renderVirtualizerScrollView_unstable","useVirtualizerScrollViewStyles_unstable","React","useCustomStyleHook_unstable","VirtualizerScrollView","props","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;0CAGkD,6BAA6B;6CAC1B,gCAAgC;sDAC7B,0CAA0C;iEAC3E,QAAQ;qCACa,kCAAkC;AAMvE,MAAMK,wBAA8D,CAACC;IAC1E,MAAMC,YAAQP,2DAAAA,EAAkCM;QAEhDJ,6EAAAA,EAAwCK;QACxCH,gDAAAA,EAA4B,2CAA2CG;IAEvE,WAAON,iEAAAA,EAAqCM;AAC9C,EAAE;AAEFF,sBAAsBG,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/VirtualizerScrollView/VirtualizerScrollView.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n VirtualizerSlots,\n VirtualizerConfigProps,\n VirtualizerConfigState,\n VirtualizerChildRenderFunction,\n} from '../Virtualizer/Virtualizer.types';\nimport type { ScrollToInterface } from '../../Utilities';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerScrollViewSlots = VirtualizerSlots & {\n /**\n * The root container that provides embedded scrolling.\n */\n container: NonNullable<Slot<'div'>>;\n};\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerScrollViewProps = ComponentProps<Partial<VirtualizerScrollViewSlots>> &\n Partial<\n Omit<\n VirtualizerConfigProps,\n 'itemSize' | 'numItems' | 'getItemSize' | 'children' | 'flagIndex' | 'imperativeVirtualizerRef'\n >\n > & {\n /**\n * Virtualizer item size in pixels - static.\n * Axis: 'vertical' = Height\n * Axis: 'horizontal' = Width\n */\n itemSize: number;\n /**\n * The total number of items to be virtualized.\n */\n numItems: number;\n /**\n * Child render function.\n * Iteratively called to return current virtualizer DOM children.\n * Will act as a row or column indexer depending on Virtualizer settings.\n */\n children: VirtualizerChildRenderFunction;\n /**\n * Imperative ref contains our scrollTo index functionality for user control.\n */\n imperativeRef?: React.RefObject<ScrollToInterface | null>;\n /**\n * Imperative ref contains our scrollTo index functionality for user control.\n */\n enablePagination?: boolean;\n };\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerScrollViewState = ComponentState<VirtualizerScrollViewSlots> & VirtualizerConfigState;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
VirtualizerScrollView: function() {
return _VirtualizerScrollView.VirtualizerScrollView;
},
renderVirtualizerScrollView_unstable: function() {
return _renderVirtualizerScrollView.renderVirtualizerScrollView_unstable;
},
useVirtualizerScrollViewStyles_unstable: function() {
return _useVirtualizerScrollViewStylesstyles.useVirtualizerScrollViewStyles_unstable;
},
useVirtualizerScrollView_unstable: function() {
return _useVirtualizerScrollView.useVirtualizerScrollView_unstable;
},
virtualizerScrollViewClassNames: function() {
return _useVirtualizerScrollViewStylesstyles.virtualizerScrollViewClassNames;
}
});
const _VirtualizerScrollView = require("./VirtualizerScrollView");
const _useVirtualizerScrollView = require("./useVirtualizerScrollView");
const _renderVirtualizerScrollView = require("./renderVirtualizerScrollView");
const _useVirtualizerScrollViewStylesstyles = require("./useVirtualizerScrollViewStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/VirtualizerScrollView/index.ts"],"sourcesContent":["export { VirtualizerScrollView } from './VirtualizerScrollView';\nexport type {\n VirtualizerScrollViewProps,\n VirtualizerScrollViewSlots,\n VirtualizerScrollViewState,\n} from './VirtualizerScrollView.types';\nexport { useVirtualizerScrollView_unstable } from './useVirtualizerScrollView';\nexport { renderVirtualizerScrollView_unstable } from './renderVirtualizerScrollView';\nexport {\n useVirtualizerScrollViewStyles_unstable,\n virtualizerScrollViewClassNames,\n} from './useVirtualizerScrollViewStyles.styles';\n"],"names":["VirtualizerScrollView","useVirtualizerScrollView_unstable","renderVirtualizerScrollView_unstable","useVirtualizerScrollViewStyles_unstable","virtualizerScrollViewClassNames"],"mappings":";;;;;;;;;;;;eAASA,4CAAqB;;;eAOrBE,iEAAoC;;;eAE3CC,6EAAuC;;;eAHhCF,2DAAiC;;;eAIxCG,qEAA+B;;;uCAVK,0BAA0B;0CAMd,6BAA6B;6CAC1B,gCAAgC;sDAI9E,0CAA0C"}

View File

@@ -0,0 +1,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderVirtualizerScrollView_unstable", {
enumerable: true,
get: function() {
return renderVirtualizerScrollView_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _renderVirtualizer = require("../Virtualizer/renderVirtualizer");
const renderVirtualizerScrollView_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.container, {
children: (0, _renderVirtualizer.renderVirtualizer_unstable)(state)
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/VirtualizerScrollView/renderVirtualizerScrollView.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport type * as React from 'react';\n\nimport type { VirtualizerScrollViewSlots, VirtualizerScrollViewState } from './VirtualizerScrollView.types';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { renderVirtualizer_unstable } from '../Virtualizer/renderVirtualizer';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const renderVirtualizerScrollView_unstable = (state: VirtualizerScrollViewState): React.ReactElement => {\n assertSlots<VirtualizerScrollViewSlots>(state);\n\n return <state.container>{renderVirtualizer_unstable(state)}</state.container>;\n};\n"],"names":["assertSlots","renderVirtualizer_unstable","renderVirtualizerScrollView_unstable","state","container"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAMrB,4BAA4B;mCACb,mCAAmC;AAKvE,MAAME,uCAAuC,CAACC;QACnDH,2BAAAA,EAAwCG;IAExC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,SAAS,EAAA;sBAAEH,6CAAAA,EAA2BE;;AACtD,EAAE"}

View File

@@ -0,0 +1,92 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useVirtualizerScrollView_unstable", {
enumerable: true,
get: function() {
return useVirtualizerScrollView_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _useVirtualizer = require("../Virtualizer/useVirtualizer");
const _Hooks = require("../../Hooks");
const _Utilities = require("../../Utilities");
const _useStaticPagination = require("../../hooks/useStaticPagination");
function useVirtualizerScrollView_unstable(props) {
const { imperativeRef, itemSize, numItems, axis = 'vertical', reversed, enablePagination = false } = props;
var _props_axis;
const { virtualizerLength, bufferItems, bufferSize, scrollRef, containerSizeRef } = (0, _Hooks.useStaticVirtualizerMeasure)({
defaultItemSize: props.itemSize,
direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical'
});
// Store the virtualizer length as a ref for imperative ref access
const virtualizerLengthRef = _react.useRef(virtualizerLength);
if (virtualizerLengthRef.current !== virtualizerLength) {
virtualizerLengthRef.current = virtualizerLength;
}
const paginationRef = (0, _useStaticPagination.useStaticVirtualizerPagination)({
axis,
itemSize
}, enablePagination);
const scrollViewRef = (0, _reactutilities.useMergedRefs)(props.scrollViewRef, scrollRef, paginationRef);
const imperativeVirtualizerRef = _react.useRef(null);
const scrollCallbackRef = _react.useRef(null);
_react.useImperativeHandle(imperativeRef, ()=>{
var _imperativeVirtualizerRef_current;
return {
scrollTo (index, behavior = 'auto', callback) {
var _imperativeVirtualizerRef_current;
scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;
(_imperativeVirtualizerRef_current = imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.setFlaggedIndex(index);
(0, _Utilities.scrollToItemStatic)({
index,
itemSize,
totalItems: numItems,
scrollViewRef,
axis,
reversed,
behavior
});
},
currentIndex: (_imperativeVirtualizerRef_current = imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,
virtualizerLength: virtualizerLengthRef
};
}, [
axis,
scrollViewRef,
itemSize,
numItems,
reversed
]);
const handleRenderedIndex = (index)=>{
if (scrollCallbackRef.current) {
scrollCallbackRef.current(index);
}
};
const virtualizerState = (0, _useVirtualizer.useVirtualizer_unstable)({
...props,
virtualizerLength,
bufferItems,
bufferSize,
onRenderedFlaggedIndex: handleRenderedIndex,
imperativeVirtualizerRef,
containerSizeRef
});
return {
...virtualizerState,
components: {
...virtualizerState.components,
container: 'div'
},
container: _reactutilities.slot.always(props.container, {
defaultProps: {
ref: scrollViewRef
},
elementType: 'div'
})
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,71 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useVirtualizerScrollViewStyles_unstable: function() {
return useVirtualizerScrollViewStyles_unstable;
},
virtualizerScrollViewClassNames: function() {
return virtualizerScrollViewClassNames;
}
});
const _useVirtualizerStylesstyles = require("../Virtualizer/useVirtualizerStyles.styles");
const _react = require("@griffel/react");
const virtualizerScrollViewClassName = 'fui-Virtualizer-Scroll-View';
const virtualizerScrollViewClassNames = {
..._useVirtualizerStylesstyles.virtualizerClassNames,
container: `${virtualizerScrollViewClassName}__container`
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
mc9l5x: "f22iagw",
a9b677: "fly5x3f",
Bqenvij: "f1l02sjl"
},
vertical: {
Beiy3e4: "f1vx9l62",
Bmxbyg5: "f5zp4f"
},
horizontal: {
Beiy3e4: "f1063pyq",
B68tc82: "f1oy3dpc"
},
verticalReversed: {
Beiy3e4: "f1gkdon0",
Bmxbyg5: "f5zp4f"
},
horizontalReversed: {
Beiy3e4: "f1oztnx0",
B68tc82: "f1oy3dpc"
}
}, {
d: [
".f22iagw{display:flex;}",
".fly5x3f{width:100%;}",
".f1l02sjl{height:100%;}",
".f1vx9l62{flex-direction:column;}",
".f5zp4f{overflow-y:auto;}",
".f1063pyq{flex-direction:row;}",
".f1oy3dpc{overflow-x:auto;}",
".f1gkdon0{flex-direction:column-reverse;}",
".f1oztnx0{flex-direction:row-reverse;}"
]
});
const useVirtualizerScrollViewStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
// Default virtualizer styles base
(0, _useVirtualizerStylesstyles.useVirtualizerStyles_unstable)(state);
const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;
// Add container styles
state.container.className = (0, _react.mergeClasses)(virtualizerScrollViewClassNames.container, styles.base, containerStyle, state.container.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useVirtualizerScrollViewStyles.styles.js"],"sourcesContent":["'use client';\nimport { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nconst virtualizerScrollViewClassName = 'fui-Virtualizer-Scroll-View';\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */ export const virtualizerScrollViewClassNames = {\n ...virtualizerClassNames,\n container: `${virtualizerScrollViewClassName}__container`\n};\nconst useStyles = makeStyles({\n base: {\n display: 'flex',\n width: '100%',\n height: '100%'\n },\n vertical: {\n flexDirection: 'column',\n overflowY: 'auto'\n },\n horizontal: {\n flexDirection: 'row',\n overflowX: 'auto'\n },\n verticalReversed: {\n flexDirection: 'column-reverse',\n overflowY: 'auto'\n },\n horizontalReversed: {\n flexDirection: 'row-reverse',\n overflowX: 'auto'\n }\n});\n/**\n * Apply styling to the Virtualizer states\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */ export const useVirtualizerScrollViewStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // Default virtualizer styles base\n useVirtualizerStyles_unstable(state);\n const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;\n // Add container styles\n state.container.className = mergeClasses(virtualizerScrollViewClassNames.container, styles.base, containerStyle, state.container.className);\n return state;\n};\n"],"names":["useVirtualizerStyles_unstable","virtualizerClassNames","__styles","mergeClasses","virtualizerScrollViewClassName","virtualizerScrollViewClassNames","container","useStyles","base","mc9l5x","a9b677","Bqenvij","vertical","Beiy3e4","Bmxbyg5","horizontal","B68tc82","verticalReversed","horizontalReversed","d","useVirtualizerScrollViewStyles_unstable","state","styles","containerStyle","axis","reversed","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAoCKoB,uCAAuC;;;IA9BvCf,+BAA+B;;;;4CALqB,4CAA4C;uBACxE,gBAAgB;AACzD,MAAMD,8BAA8B,GAAG,6BAA6B;AAGzD,wCAAwC;IAC/C,GAAGH,iDAAqB;IACxBK,SAAS,EAAE,GAAGF,8BAA8B,CAAA,WAAA,CAAA;AAChD,CAAC;AACD,MAAMG,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,UAAA,EAAA;QAAAF,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAJ,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAI,kBAAA,EAAA;QAAAL,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAG,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAsBjB,CAAC;AAIS,iDAAiDE,KAAK,IAAG;IAChE,aAAa;IACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;IAC1B,kCAAA;QACAP,yDAA6B,EAACqB,KAAK,CAAC;IACpC,MAAME,cAAc,GAAGF,KAAK,CAACG,IAAI,KAAK,YAAY,GAAGH,KAAK,CAACI,QAAQ,GAAGH,MAAM,CAACJ,kBAAkB,GAAGI,MAAM,CAACP,UAAU,GAAGM,KAAK,CAACI,QAAQ,GAAGH,MAAM,CAACL,gBAAgB,GAAGK,MAAM,CAACV,QAAQ;IAChL,uBAAA;IACAS,KAAK,CAACf,SAAS,CAACoB,SAAS,GAAGvB,uBAAY,EAACE,+BAA+B,CAACC,SAAS,EAAEgB,MAAM,CAACd,IAAI,EAAEe,cAAc,EAAEF,KAAK,CAACf,SAAS,CAACoB,SAAS,CAAC;IAC3I,OAAOL,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,59 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useVirtualizerScrollViewStyles_unstable: function() {
return useVirtualizerScrollViewStyles_unstable;
},
virtualizerScrollViewClassNames: function() {
return virtualizerScrollViewClassNames;
}
});
const _useVirtualizerStylesstyles = require("../Virtualizer/useVirtualizerStyles.styles");
const _react = require("@griffel/react");
const virtualizerScrollViewClassName = 'fui-Virtualizer-Scroll-View';
const virtualizerScrollViewClassNames = {
..._useVirtualizerStylesstyles.virtualizerClassNames,
container: `${virtualizerScrollViewClassName}__container`
};
const useStyles = (0, _react.makeStyles)({
base: {
display: 'flex',
width: '100%',
height: '100%'
},
vertical: {
flexDirection: 'column',
overflowY: 'auto'
},
horizontal: {
flexDirection: 'row',
overflowX: 'auto'
},
verticalReversed: {
flexDirection: 'column-reverse',
overflowY: 'auto'
},
horizontalReversed: {
flexDirection: 'row-reverse',
overflowX: 'auto'
}
});
const useVirtualizerScrollViewStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
// Default virtualizer styles base
(0, _useVirtualizerStylesstyles.useVirtualizerStyles_unstable)(state);
const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;
// Add container styles
state.container.className = (0, _react.mergeClasses)(virtualizerScrollViewClassNames.container, styles.base, containerStyle, state.container.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { VirtualizerScrollViewState } from './VirtualizerScrollView.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { VirtualizerScrollViewSlots } from './VirtualizerScrollView.types';\nimport { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nconst virtualizerScrollViewClassName = 'fui-Virtualizer-Scroll-View';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const virtualizerScrollViewClassNames: SlotClassNames<VirtualizerScrollViewSlots> = {\n ...virtualizerClassNames,\n container: `${virtualizerScrollViewClassName}__container`,\n};\n\nconst useStyles = makeStyles({\n base: {\n display: 'flex',\n width: '100%',\n height: '100%',\n },\n vertical: {\n flexDirection: 'column',\n overflowY: 'auto',\n },\n horizontal: {\n flexDirection: 'row',\n overflowX: 'auto',\n },\n verticalReversed: {\n flexDirection: 'column-reverse',\n overflowY: 'auto',\n },\n horizontalReversed: {\n flexDirection: 'row-reverse',\n overflowX: 'auto',\n },\n});\n\n/**\n * Apply styling to the Virtualizer states\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useVirtualizerScrollViewStyles_unstable = (\n state: VirtualizerScrollViewState,\n): VirtualizerScrollViewState => {\n 'use no memo';\n\n const styles = useStyles();\n\n // Default virtualizer styles base\n useVirtualizerStyles_unstable(state);\n\n const containerStyle =\n state.axis === 'horizontal'\n ? state.reversed\n ? styles.horizontalReversed\n : styles.horizontal\n : state.reversed\n ? styles.verticalReversed\n : styles.vertical;\n\n // Add container styles\n state.container.className = mergeClasses(\n virtualizerScrollViewClassNames.container,\n styles.base,\n containerStyle,\n state.container.className,\n );\n\n return state;\n};\n"],"names":["useVirtualizerStyles_unstable","virtualizerClassNames","makeStyles","mergeClasses","virtualizerScrollViewClassName","virtualizerScrollViewClassNames","container","useStyles","base","display","width","height","vertical","flexDirection","overflowY","horizontal","overflowX","verticalReversed","horizontalReversed","useVirtualizerScrollViewStyles_unstable","state","styles","containerStyle","axis","reversed","className"],"mappings":"AAAA;;;;;;;;;;;;2CA8CamB;eAAAA;;mCAjCAd;;;;4CARwD,6CAA6C;uBACzE,iBAAiB;AAE1D,MAAMD,iCAAiC;AAKhC,MAAMC,kCAA8E;IACzF,GAAGJ,iDAAqB;IACxBK,WAAW,GAAGF,+BAA+B,WAAW,CAAC;AAC3D,EAAE;AAEF,MAAMG,gBAAYL,iBAAAA,EAAW;IAC3BM,MAAM;QACJC,SAAS;QACTC,OAAO;QACPC,QAAQ;IACV;IACAC,UAAU;QACRC,eAAe;QACfC,WAAW;IACb;IACAC,YAAY;QACVF,eAAe;QACfG,WAAW;IACb;IACAC,kBAAkB;QAChBJ,eAAe;QACfC,WAAW;IACb;IACAI,oBAAoB;QAClBL,eAAe;QACfG,WAAW;IACb;AACF;AAMO,gDAAgD,CACrDI;IAEA;IAEA,MAAMC,SAASd;IAEf,kCAAkC;QAClCP,yDAAAA,EAA8BoB;IAE9B,MAAME,iBACJF,MAAMG,IAAI,KAAK,eACXH,MAAMI,QAAQ,GACZH,OAAOH,kBAAkB,GACzBG,OAAON,UAAU,GACnBK,MAAMI,QAAQ,GACdH,OAAOJ,gBAAgB,GACvBI,OAAOT,QAAQ;IAErB,uBAAuB;IACvBQ,MAAMd,SAAS,CAACmB,SAAS,OAAGtB,mBAAAA,EAC1BE,gCAAgCC,SAAS,EACzCe,OAAOb,IAAI,EACXc,gBACAF,MAAMd,SAAS,CAACmB,SAAS;IAG3B,OAAOL;AACT,EAAE"}

View File

@@ -0,0 +1,25 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "VirtualizerScrollViewDynamic", {
enumerable: true,
get: function() {
return VirtualizerScrollViewDynamic;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _useVirtualizerScrollViewDynamic = require("./useVirtualizerScrollViewDynamic");
const _renderVirtualizerScrollViewDynamic = require("./renderVirtualizerScrollViewDynamic");
const _useVirtualizerScrollViewDynamicStylesstyles = require("./useVirtualizerScrollViewDynamicStyles.styles");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const VirtualizerScrollViewDynamic = (props, _context)=>{
const state = (0, _useVirtualizerScrollViewDynamic.useVirtualizerScrollViewDynamic_unstable)(props);
(0, _useVirtualizerScrollViewDynamicStylesstyles.useVirtualizerScrollViewDynamicStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useVirtualizerScrollViewDynamicStyles_unstable')(state);
return (0, _renderVirtualizerScrollViewDynamic.renderVirtualizerScrollViewDynamic_unstable)(state);
// NOTE: we need to assert the type to satisfy tsc (React 19 FC doesn't have 2nd context parameter anymore)
};
VirtualizerScrollViewDynamic.displayName = 'VirtualizerScrollViewDynamic';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.ts"],"sourcesContent":["'use client';\n\nimport type { VirtualizerScrollViewDynamicProps } from './VirtualizerScrollViewDynamic.types';\nimport { useVirtualizerScrollViewDynamic_unstable } from './useVirtualizerScrollViewDynamic';\nimport { renderVirtualizerScrollViewDynamic_unstable } from './renderVirtualizerScrollViewDynamic';\nimport { useVirtualizerScrollViewDynamicStyles_unstable } from './useVirtualizerScrollViewDynamicStyles.styles';\nimport * as React from 'react';\nimport type { VirtualizerContextProps } from '../../Utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Virtualizer ScrollView\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const VirtualizerScrollViewDynamic = ((\n props: VirtualizerScrollViewDynamicProps,\n // NOTE: this second context parameter doesn't exists in React 19\n _context: React.Context<VirtualizerContextProps>,\n) => {\n const state = useVirtualizerScrollViewDynamic_unstable(props);\n\n useVirtualizerScrollViewDynamicStyles_unstable(state);\n useCustomStyleHook_unstable('useVirtualizerScrollViewDynamicStyles_unstable')(state);\n\n return renderVirtualizerScrollViewDynamic_unstable(state);\n // NOTE: we need to assert the type to satisfy tsc (React 19 FC doesn't have 2nd context parameter anymore)\n}) as React.FC<VirtualizerScrollViewDynamicProps>;\n\nVirtualizerScrollViewDynamic.displayName = 'VirtualizerScrollViewDynamic';\n"],"names":["useVirtualizerScrollViewDynamic_unstable","renderVirtualizerScrollViewDynamic_unstable","useVirtualizerScrollViewDynamicStyles_unstable","React","useCustomStyleHook_unstable","VirtualizerScrollViewDynamic","props","_context","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iDAGyD,oCAAoC;oDACjC,uCAAuC;6DACpC,iDAAiD;iEACzF,QAAQ;qCAEa,kCAAkC;AAMvE,MAAMK,+BAAgC,CAC3CC,OACA,AACAC,iEADiE;IAGjE,MAAMC,YAAQR,yEAAAA,EAAyCM;IAEvDJ,+FAAAA,EAA+CM;QAC/CJ,gDAAAA,EAA4B,kDAAkDI;IAE9E,WAAOP,+EAAAA,EAA4CO;AACnD,2GAA2G;AAC7G,EAAkD;AAElDH,6BAA6BI,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type {\n VirtualizerConfigProps,\n VirtualizerConfigState,\n VirtualizerChildRenderFunction,\n} from '../Virtualizer/Virtualizer.types';\n\nimport type { VirtualizerScrollViewSlots } from '../VirtualizerScrollView/VirtualizerScrollView.types';\nimport type { DynamicVirtualizerContextProps, ScrollToInterface } from '../../Utilities';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerScrollViewDynamicSlots = VirtualizerScrollViewSlots;\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerScrollViewDynamicProps = ComponentProps<Partial<VirtualizerScrollViewDynamicSlots>> &\n Partial<\n Omit<\n VirtualizerConfigProps,\n 'itemSize' | 'numItems' | 'getItemSize' | 'children' | 'flagIndex' | 'virtualizerContext'\n >\n > & {\n /**\n * Set as the minimum item size.\n * Axis: 'vertical' = Height\n * Axis: 'horizontal' = Width\n */\n itemSize: number;\n /**\n * Callback for acquiring size of individual items\n * @param index - the index of the requested size's child\n * If undefined, Virtualizer will auto-measure by default (performance tradeoff)\n */\n getItemSize?: (index: number) => number;\n /**\n * The total number of items to be virtualized.\n */\n numItems: number;\n /**\n * Child render function.\n * Iteratively called to return current virtualizer DOM children.\n * Will act as a row or column indexer depending on Virtualizer settings.\n */\n children: VirtualizerChildRenderFunction;\n /**\n * Imperative ref contains our scrollTo index functionality for user control.\n */\n imperativeRef?: React.RefObject<ScrollToInterface | null>;\n /**\n * Imperative ref contains our scrollTo index functionality for user control.\n */\n enablePagination?: boolean;\n /**\n * Enables override of dynamic virtualizer context if required.\n */\n virtualizerContext?: DynamicVirtualizerContextProps;\n };\n\nexport type VirtualizerScrollViewDynamicState = ComponentState<VirtualizerScrollViewDynamicSlots> &\n VirtualizerConfigState;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
VirtualizerScrollViewDynamic: function() {
return _VirtualizerScrollViewDynamic.VirtualizerScrollViewDynamic;
},
renderVirtualizerScrollViewDynamic_unstable: function() {
return _renderVirtualizerScrollViewDynamic.renderVirtualizerScrollViewDynamic_unstable;
},
useVirtualizerScrollViewDynamicStyles_unstable: function() {
return _useVirtualizerScrollViewDynamicStylesstyles.useVirtualizerScrollViewDynamicStyles_unstable;
},
useVirtualizerScrollViewDynamic_unstable: function() {
return _useVirtualizerScrollViewDynamic.useVirtualizerScrollViewDynamic_unstable;
},
virtualizerScrollViewDynamicClassNames: function() {
return _useVirtualizerScrollViewDynamicStylesstyles.virtualizerScrollViewDynamicClassNames;
}
});
const _VirtualizerScrollViewDynamic = require("./VirtualizerScrollViewDynamic");
const _useVirtualizerScrollViewDynamic = require("./useVirtualizerScrollViewDynamic");
const _renderVirtualizerScrollViewDynamic = require("./renderVirtualizerScrollViewDynamic");
const _useVirtualizerScrollViewDynamicStylesstyles = require("./useVirtualizerScrollViewDynamicStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/VirtualizerScrollViewDynamic/index.ts"],"sourcesContent":["export { VirtualizerScrollViewDynamic } from './VirtualizerScrollViewDynamic';\nexport type {\n VirtualizerScrollViewDynamicProps,\n VirtualizerScrollViewDynamicSlots,\n VirtualizerScrollViewDynamicState,\n} from './VirtualizerScrollViewDynamic.types';\nexport { useVirtualizerScrollViewDynamic_unstable } from './useVirtualizerScrollViewDynamic';\nexport { renderVirtualizerScrollViewDynamic_unstable } from './renderVirtualizerScrollViewDynamic';\nexport {\n useVirtualizerScrollViewDynamicStyles_unstable,\n virtualizerScrollViewDynamicClassNames,\n} from './useVirtualizerScrollViewDynamicStyles.styles';\n"],"names":["VirtualizerScrollViewDynamic","useVirtualizerScrollViewDynamic_unstable","renderVirtualizerScrollViewDynamic_unstable","useVirtualizerScrollViewDynamicStyles_unstable","virtualizerScrollViewDynamicClassNames"],"mappings":";;;;;;;;;;;;eAASA,0DAA4B;;;eAO5BE,+EAA2C;;;eAElDC,2FAA8C;;;eAHvCF,yEAAwC;;;eAI/CG,mFAAsC;;;8CAVK,iCAAiC;iDAMrB,oCAAoC;oDACjC,uCAAuC;6DAI5F,iDAAiD"}

View File

@@ -0,0 +1,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderVirtualizerScrollViewDynamic_unstable", {
enumerable: true,
get: function() {
return renderVirtualizerScrollViewDynamic_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _renderVirtualizer = require("../Virtualizer/renderVirtualizer");
const renderVirtualizerScrollViewDynamic_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.container, {
children: (0, _renderVirtualizer.renderVirtualizer_unstable)(state)
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type * as React from 'react';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport {\n VirtualizerScrollViewDynamicSlots,\n VirtualizerScrollViewDynamicState,\n} from './VirtualizerScrollViewDynamic.types';\nimport { renderVirtualizer_unstable } from '../Virtualizer/renderVirtualizer';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const renderVirtualizerScrollViewDynamic_unstable = (\n state: VirtualizerScrollViewDynamicState,\n): React.ReactElement => {\n assertSlots<VirtualizerScrollViewDynamicSlots>(state);\n return <state.container>{renderVirtualizer_unstable(state)}</state.container>;\n};\n"],"names":["assertSlots","renderVirtualizer_unstable","renderVirtualizerScrollViewDynamic_unstable","state","container"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;mCAKb,mCAAmC;AAKvE,MAAME,8CAA8C,CACzDC;QAEAH,2BAAAA,EAA+CG;IAC/C,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,SAAS,EAAA;sBAAEH,6CAAAA,EAA2BE;;AACtD,EAAE"}

View File

@@ -0,0 +1,163 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useVirtualizerScrollViewDynamic_unstable", {
enumerable: true,
get: function() {
return useVirtualizerScrollViewDynamic_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _useVirtualizer = require("../Virtualizer/useVirtualizer");
const _Hooks = require("../../Hooks");
const _Utilities = require("../../Utilities");
const _useMeasureList = require("../../hooks/useMeasureList");
const _useDynamicPagination = require("../../hooks/useDynamicPagination");
function useVirtualizerScrollViewDynamic_unstable(props) {
'use no memo';
var _imperativeVirtualizerRef_current;
const contextState = (0, _Utilities.useVirtualizerContextState_unstable)(props.virtualizerContext);
const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef, enablePagination = false, bufferItems: _bufferItems, bufferSize: _bufferSize } = props;
let sizeTrackingArray = _react.useRef(new Array(props.numItems).fill(props.itemSize));
// This lets us trigger updates when a size change occurs.
const [sizeUpdateCount, setSizeUpdateCount] = _react.useState(0);
const getChildSizeAuto = _react.useCallback((index)=>{
if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {
// Default size for initial state or untracked
return props.itemSize;
}
/* Required to be defined prior to our measure function
* we use a sizing array ref that we will update post-render
*/ return sizeTrackingArray.current[index];
}, [
sizeTrackingArray,
props.itemSize,
sizeUpdateCount
]);
var _props_axis, _props_getItemSize;
const { virtualizerLength, bufferItems, bufferSize, scrollRef, containerSizeRef, updateScrollPosition } = (0, _Hooks.useDynamicVirtualizerMeasure)({
defaultItemSize: props.itemSize,
direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical',
getItemSize: (_props_getItemSize = props.getItemSize) !== null && _props_getItemSize !== void 0 ? _props_getItemSize : getChildSizeAuto,
virtualizerContext: contextState,
numItems: props.numItems,
bufferItems: _bufferItems,
bufferSize: _bufferSize
});
const _imperativeVirtualizerRef = (0, _reactutilities.useMergedRefs)(_react.useRef(null), imperativeVirtualizerRef);
var _contextState_contextIndex;
const paginationRef = (0, _useDynamicPagination.useDynamicVirtualizerPagination)({
axis,
progressiveItemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.progressiveSizes,
virtualizerLength,
currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0
}, enablePagination);
// Store the virtualizer length as a ref for imperative ref access
const virtualizerLengthRef = _react.useRef(virtualizerLength);
if (virtualizerLengthRef.current !== virtualizerLength) {
virtualizerLengthRef.current = virtualizerLength;
}
const scrollViewRef = (0, _reactutilities.useMergedRefs)(props.scrollViewRef, scrollRef, paginationRef);
const scrollCallbackRef = _react.useRef(null);
_react.useImperativeHandle(imperativeRef, ()=>{
var _imperativeVirtualizerRef_current;
return {
scrollTo (index, behavior = 'auto', callback) {
scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;
if (_imperativeVirtualizerRef.current) {
var _imperativeVirtualizerRef_current;
const progressiveSizes = _imperativeVirtualizerRef.current.progressiveSizes.current;
const totalSize = progressiveSizes && (progressiveSizes === null || progressiveSizes === void 0 ? void 0 : progressiveSizes.length) > 0 ? progressiveSizes[Math.max(progressiveSizes.length - 1, 0)] : 0;
_imperativeVirtualizerRef.current.setFlaggedIndex(index);
(0, _Utilities.scrollToItemDynamic)({
index,
itemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.nodeSizes,
totalSize,
scrollViewRef: scrollViewRef,
axis,
reversed,
behavior
});
}
},
currentIndex: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,
virtualizerLength: virtualizerLengthRef
};
}, [
axis,
scrollViewRef,
reversed,
_imperativeVirtualizerRef
]);
const handleRenderedIndex = (index)=>{
if (scrollCallbackRef.current) {
scrollCallbackRef.current(index);
}
};
var _props_getItemSize1;
const virtualizerState = (0, _useVirtualizer.useVirtualizer_unstable)({
...props,
getItemSize: (_props_getItemSize1 = props.getItemSize) !== null && _props_getItemSize1 !== void 0 ? _props_getItemSize1 : getChildSizeAuto,
virtualizerLength,
bufferItems,
bufferSize,
virtualizerContext: contextState,
imperativeVirtualizerRef: _imperativeVirtualizerRef,
onRenderedFlaggedIndex: handleRenderedIndex,
containerSizeRef,
scrollViewRef,
updateScrollPosition
});
const measureObject = (0, _useMeasureList.useMeasureList)(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);
if (enablePagination && measureObject.sizeUpdateCount !== sizeUpdateCount) {
/* This enables us to let callback know that the sizes have been updated
triggers a re-render but is only required on pagination (else index change handles) */ setSizeUpdateCount(measureObject.sizeUpdateCount);
}
if (axis === 'horizontal') {
sizeTrackingArray = measureObject.widthArray;
} else {
sizeTrackingArray = measureObject.heightArray;
}
if (!props.getItemSize) {
// Auto-measuring is required
_react.Children.map(virtualizerState.virtualizedChildren, (child, index)=>{
if (/*#__PURE__*/ _react.isValidElement(child)) {
virtualizerState.virtualizedChildren[index] = /*#__PURE__*/ _react.createElement(child.type, {
...child.props,
key: child.key,
ref: (element)=>{
if (child.hasOwnProperty('ref')) {
// We must access this from the child directly, not props (forward ref).
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const localRef = child === null || child === void 0 ? void 0 : child.ref;
if (typeof localRef === 'function') {
localRef(element);
} else if (localRef) {
localRef.current = element;
}
}
// Call the auto-measure ref attachment.
measureObject.createIndexedRef(index)(element);
}
});
}
});
}
return {
...virtualizerState,
components: {
...virtualizerState.components,
container: 'div'
},
container: _reactutilities.slot.always(props.container, {
defaultProps: {
ref: scrollViewRef
},
elementType: 'div'
})
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,71 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useVirtualizerScrollViewDynamicStyles_unstable: function() {
return useVirtualizerScrollViewDynamicStyles_unstable;
},
virtualizerScrollViewDynamicClassNames: function() {
return virtualizerScrollViewDynamicClassNames;
}
});
const _useVirtualizerStylesstyles = require("../Virtualizer/useVirtualizerStyles.styles");
const _react = require("@griffel/react");
const virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';
const virtualizerScrollViewDynamicClassNames = {
..._useVirtualizerStylesstyles.virtualizerClassNames,
container: `${virtualizerScrollViewDynamicClassName}__container`
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
mc9l5x: "f22iagw",
a9b677: "fly5x3f",
Bqenvij: "f1l02sjl"
},
vertical: {
Beiy3e4: "f1vx9l62",
Bmxbyg5: "f5zp4f"
},
horizontal: {
Beiy3e4: "f1063pyq",
B68tc82: "f1oy3dpc"
},
verticalReversed: {
Beiy3e4: "f1gkdon0",
Bmxbyg5: "f5zp4f"
},
horizontalReversed: {
Beiy3e4: "f1oztnx0",
B68tc82: "f1oy3dpc"
}
}, {
d: [
".f22iagw{display:flex;}",
".fly5x3f{width:100%;}",
".f1l02sjl{height:100%;}",
".f1vx9l62{flex-direction:column;}",
".f5zp4f{overflow-y:auto;}",
".f1063pyq{flex-direction:row;}",
".f1oy3dpc{overflow-x:auto;}",
".f1gkdon0{flex-direction:column-reverse;}",
".f1oztnx0{flex-direction:row-reverse;}"
]
});
const useVirtualizerScrollViewDynamicStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
// Default virtualizer styles base
(0, _useVirtualizerStylesstyles.useVirtualizerStyles_unstable)(state);
const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;
// Add container styles
state.container.className = (0, _react.mergeClasses)(virtualizerScrollViewDynamicClassNames.container, styles.base, containerStyle, state.container.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useVirtualizerScrollViewDynamicStyles.styles.js"],"sourcesContent":["'use client';\nimport { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nconst virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */ export const virtualizerScrollViewDynamicClassNames = {\n ...virtualizerClassNames,\n container: `${virtualizerScrollViewDynamicClassName}__container`\n};\nconst useStyles = makeStyles({\n base: {\n display: 'flex',\n width: '100%',\n height: '100%'\n },\n vertical: {\n flexDirection: 'column',\n overflowY: 'auto'\n },\n horizontal: {\n flexDirection: 'row',\n overflowX: 'auto'\n },\n verticalReversed: {\n flexDirection: 'column-reverse',\n overflowY: 'auto'\n },\n horizontalReversed: {\n flexDirection: 'row-reverse',\n overflowX: 'auto'\n }\n});\n/**\n * Apply styling to the Virtualizer states\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */ export const useVirtualizerScrollViewDynamicStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // Default virtualizer styles base\n useVirtualizerStyles_unstable(state);\n const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;\n // Add container styles\n state.container.className = mergeClasses(virtualizerScrollViewDynamicClassNames.container, styles.base, containerStyle, state.container.className);\n return state;\n};\n"],"names":["useVirtualizerStyles_unstable","virtualizerClassNames","__styles","mergeClasses","virtualizerScrollViewDynamicClassName","virtualizerScrollViewDynamicClassNames","container","useStyles","base","mc9l5x","a9b677","Bqenvij","vertical","Beiy3e4","Bmxbyg5","horizontal","B68tc82","verticalReversed","horizontalReversed","d","useVirtualizerScrollViewDynamicStyles_unstable","state","styles","containerStyle","axis","reversed","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAoCKoB,8CAA8C;;;IA9B9Cf,sCAAsC;;;;4CALc,4CAA4C;uBACxE,gBAAgB;AACzD,MAAMD,qCAAqC,GAAG,qCAAqC;AAGxE,+CAA+C;IACtD,GAAGH,iDAAqB;IACxBK,SAAS,EAAE,GAAGF,qCAAqC,CAAA,WAAA,CAAA;AACvD,CAAC;AACD,MAAMG,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,UAAA,EAAA;QAAAF,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAJ,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAI,kBAAA,EAAA;QAAAL,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAG,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAsBjB,CAAC;AAIS,wDAAwDE,KAAK,IAAG;IACvE,aAAa;IACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;IAC1B,kCAAA;QACAP,yDAA6B,EAACqB,KAAK,CAAC;IACpC,MAAME,cAAc,GAAGF,KAAK,CAACG,IAAI,KAAK,YAAY,GAAGH,KAAK,CAACI,QAAQ,GAAGH,MAAM,CAACJ,kBAAkB,GAAGI,MAAM,CAACP,UAAU,GAAGM,KAAK,CAACI,QAAQ,GAAGH,MAAM,CAACL,gBAAgB,GAAGK,MAAM,CAACV,QAAQ;IAChL,uBAAA;IACAS,KAAK,CAACf,SAAS,CAACoB,SAAS,GAAGvB,uBAAY,EAACE,sCAAsC,CAACC,SAAS,EAAEgB,MAAM,CAACd,IAAI,EAAEe,cAAc,EAAEF,KAAK,CAACf,SAAS,CAACoB,SAAS,CAAC;IAClJ,OAAOL,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,59 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useVirtualizerScrollViewDynamicStyles_unstable: function() {
return useVirtualizerScrollViewDynamicStyles_unstable;
},
virtualizerScrollViewDynamicClassNames: function() {
return virtualizerScrollViewDynamicClassNames;
}
});
const _useVirtualizerStylesstyles = require("../Virtualizer/useVirtualizerStyles.styles");
const _react = require("@griffel/react");
const virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';
const virtualizerScrollViewDynamicClassNames = {
..._useVirtualizerStylesstyles.virtualizerClassNames,
container: `${virtualizerScrollViewDynamicClassName}__container`
};
const useStyles = (0, _react.makeStyles)({
base: {
display: 'flex',
width: '100%',
height: '100%'
},
vertical: {
flexDirection: 'column',
overflowY: 'auto'
},
horizontal: {
flexDirection: 'row',
overflowX: 'auto'
},
verticalReversed: {
flexDirection: 'column-reverse',
overflowY: 'auto'
},
horizontalReversed: {
flexDirection: 'row-reverse',
overflowX: 'auto'
}
});
const useVirtualizerScrollViewDynamicStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
// Default virtualizer styles base
(0, _useVirtualizerStylesstyles.useVirtualizerStyles_unstable)(state);
const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;
// Add container styles
state.container.className = (0, _react.mergeClasses)(virtualizerScrollViewDynamicClassNames.container, styles.base, containerStyle, state.container.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type {\n VirtualizerScrollViewDynamicSlots,\n VirtualizerScrollViewDynamicState,\n} from './VirtualizerScrollViewDynamic.types';\nimport { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nconst virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const virtualizerScrollViewDynamicClassNames: SlotClassNames<VirtualizerScrollViewDynamicSlots> = {\n ...virtualizerClassNames,\n container: `${virtualizerScrollViewDynamicClassName}__container`,\n};\n\nconst useStyles = makeStyles({\n base: {\n display: 'flex',\n width: '100%',\n height: '100%',\n },\n vertical: {\n flexDirection: 'column',\n overflowY: 'auto',\n },\n horizontal: {\n flexDirection: 'row',\n overflowX: 'auto',\n },\n verticalReversed: {\n flexDirection: 'column-reverse',\n overflowY: 'auto',\n },\n horizontalReversed: {\n flexDirection: 'row-reverse',\n overflowX: 'auto',\n },\n});\n\n/**\n * Apply styling to the Virtualizer states\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useVirtualizerScrollViewDynamicStyles_unstable = (\n state: VirtualizerScrollViewDynamicState,\n): VirtualizerScrollViewDynamicState => {\n 'use no memo';\n\n const styles = useStyles();\n\n // Default virtualizer styles base\n useVirtualizerStyles_unstable(state);\n\n const containerStyle =\n state.axis === 'horizontal'\n ? state.reversed\n ? styles.horizontalReversed\n : styles.horizontal\n : state.reversed\n ? styles.verticalReversed\n : styles.vertical;\n\n // Add container styles\n state.container.className = mergeClasses(\n virtualizerScrollViewDynamicClassNames.container,\n styles.base,\n containerStyle,\n state.container.className,\n );\n\n return state;\n};\n"],"names":["useVirtualizerStyles_unstable","virtualizerClassNames","makeStyles","mergeClasses","virtualizerScrollViewDynamicClassName","virtualizerScrollViewDynamicClassNames","container","useStyles","base","display","width","height","vertical","flexDirection","overflowY","horizontal","overflowX","verticalReversed","horizontalReversed","useVirtualizerScrollViewDynamicStyles_unstable","state","styles","containerStyle","axis","reversed","className"],"mappings":"AAAA;;;;;;;;;;;;kDAgDamB;eAAAA;;0CAjCAd;;;;4CARwD,6CAA6C;uBACzE,iBAAiB;AAE1D,MAAMD,wCAAwC;AAKvC,MAAMC,yCAA4F;IACvG,GAAGJ,iDAAqB;IACxBK,WAAW,GAAGF,sCAAsC,WAAW,CAAC;AAClE,EAAE;AAEF,MAAMG,gBAAYL,iBAAAA,EAAW;IAC3BM,MAAM;QACJC,SAAS;QACTC,OAAO;QACPC,QAAQ;IACV;IACAC,UAAU;QACRC,eAAe;QACfC,WAAW;IACb;IACAC,YAAY;QACVF,eAAe;QACfG,WAAW;IACb;IACAC,kBAAkB;QAChBJ,eAAe;QACfC,WAAW;IACb;IACAI,oBAAoB;QAClBL,eAAe;QACfG,WAAW;IACb;AACF;AAMO,uDAAuD,CAC5DI;IAEA;IAEA,MAAMC,SAASd;IAEf,kCAAkC;QAClCP,yDAAAA,EAA8BoB;IAE9B,MAAME,iBACJF,MAAMG,IAAI,KAAK,eACXH,MAAMI,QAAQ,GACZH,OAAOH,kBAAkB,GACzBG,OAAON,UAAU,GACnBK,MAAMI,QAAQ,GACdH,OAAOJ,gBAAgB,GACvBI,OAAOT,QAAQ;IAErB,uBAAuB;IACvBQ,MAAMd,SAAS,CAACmB,SAAS,OAAGtB,mBAAAA,EAC1BE,uCAAuCC,SAAS,EAChDe,OAAOb,IAAI,EACXc,gBACAF,MAAMd,SAAS,CAACmB,SAAS;IAG3B,OAAOL;AACT,EAAE"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/hooks.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { DynamicVirtualizerContextProps } from '../Utilities';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerMeasureProps = {\n defaultItemSize: number;\n direction?: 'vertical' | 'horizontal';\n\n /**\n * Override recommended number of buffer items\n */\n bufferItems?: number;\n\n /**\n * Override recommended buffer size (px)\n */\n bufferSize?: number;\n};\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerMeasureDynamicProps = {\n defaultItemSize: number;\n virtualizerContext: DynamicVirtualizerContextProps;\n numItems: number;\n getItemSize: (index: number) => number;\n direction?: 'vertical' | 'horizontal';\n\n /**\n * Override recommended number of buffer items\n */\n bufferItems?: number;\n\n /**\n * Override recommended buffer size (px)\n */\n bufferSize?: number;\n};\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerStaticPaginationProps = {\n itemSize: number;\n axis?: 'vertical' | 'horizontal';\n};\n\n/**\n * Props to be passed into dynamic virtualization hooks\n * All props can be acquired from useVirtualizer hooks themselves and passed in\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerDynamicPaginationProps = {\n /**\n * An array that tracks the sizing of each item in virtualizer cumulatively\n */\n progressiveItemSizes: React.RefObject<number[]> | undefined;\n /**\n * The current starting index of the virtualizer's DOM elements\n */\n currentIndex: number;\n /**\n * The axis we should paginate on (should match virtualizer's axis)\n */\n axis?: 'vertical' | 'horizontal';\n /**\n * The current length of Virtualizer's actual DOM elements\n */\n virtualizerLength: number;\n};\n\n/**\n * Additional direct Ref prevents reading old resize entry data\n * Backwards compatible with ResizeObserverCallback if preferred\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport interface ResizeCallbackWithRef {\n (\n entries: ResizeObserverEntry[],\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n observer: ResizeObserver,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n scrollRef?: React.MutableRefObject<HTMLElement | null>,\n ): void;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,38 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
createResizeObserverFromDocument: function() {
return _useMeasureList.createResizeObserverFromDocument;
},
getRTLRootMargin: function() {
return _useIntersectionObserver.getRTLRootMargin;
},
useDynamicVirtualizerMeasure: function() {
return _useDynamicVirtualizerMeasure.useDynamicVirtualizerMeasure;
},
useIntersectionObserver: function() {
return _useIntersectionObserver.useIntersectionObserver;
},
useMeasureList: function() {
return _useMeasureList.useMeasureList;
},
useResizeObserverRef_unstable: function() {
return _useResizeObserverRef.useResizeObserverRef_unstable;
},
useStaticVirtualizerMeasure: function() {
return _useVirtualizerMeasure.useStaticVirtualizerMeasure;
}
});
const _useIntersectionObserver = require("./useIntersectionObserver");
const _useVirtualizerMeasure = require("./useVirtualizerMeasure");
const _useDynamicVirtualizerMeasure = require("./useDynamicVirtualizerMeasure");
const _useResizeObserverRef = require("./useResizeObserverRef");
const _useMeasureList = require("./useMeasureList");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export { getRTLRootMargin, useIntersectionObserver } from './useIntersectionObserver';\nexport { useStaticVirtualizerMeasure } from './useVirtualizerMeasure';\nexport { useDynamicVirtualizerMeasure } from './useDynamicVirtualizerMeasure';\nexport { useResizeObserverRef_unstable } from './useResizeObserverRef';\nexport type {\n ResizeCallbackWithRef,\n VirtualizerDynamicPaginationProps,\n VirtualizerMeasureDynamicProps,\n VirtualizerMeasureProps,\n VirtualizerStaticPaginationProps,\n} from './hooks.types';\nexport type { IndexedResizeCallbackElement } from './useMeasureList';\nexport { createResizeObserverFromDocument, useMeasureList } from './useMeasureList';\n"],"names":["getRTLRootMargin","useIntersectionObserver","useStaticVirtualizerMeasure","useDynamicVirtualizerMeasure","useResizeObserverRef_unstable","createResizeObserverFromDocument","useMeasureList"],"mappings":";;;;;;;;;;;;eAYSK,gDAAgC;;;eAZhCL,yCAAgB;;;eAEhBG,0DAA4B;;;eAFVF,gDAAuB;;;eAYPK,8BAAc;;;eAThDF,mDAA6B;;;eAF7BF,kDAA2B;;;yCADsB,4BAA4B;uCAC1C,0BAA0B;8CACzB,iCAAiC;sCAChC,yBAAyB;gCASN,mBAAmB"}

View File

@@ -0,0 +1,132 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDynamicVirtualizerPagination", {
enumerable: true,
get: function() {
return useDynamicVirtualizerPagination;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useDynamicVirtualizerPagination = (virtualizerProps, paginationEnabled = true)=>{
'use no memo';
const { axis = 'vertical', currentIndex, progressiveItemSizes, virtualizerLength } = virtualizerProps;
const [setScrollTimer, clearScrollTimer] = (0, _reactutilities.useTimeout)();
const lastScrollPos = _react.useRef(-1);
const lastIndexScrolled = _react.useRef(-1);
const scrollContainer = _react.useRef(null);
const clearListeners = ()=>{
if (scrollContainer.current) {
scrollContainer.current.removeEventListener('scroll', onScroll);
scrollContainer.current = null;
clearScrollTimer();
}
};
_react.useEffect(()=>{
return ()=>{
clearListeners();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
/**
* Handle scroll stop event and paginate to the closest item
* If the closest item is the same as the previous scroll end
* we paginate to the next/previous one based on direction
*
* Users/Virtualizer-Hooks must pass in a cumulative array of sizes
* This prevents the need to recalculate and ensures size arrays are synced externally
*/ const onScrollEnd = _react.useCallback(()=>{
if (!scrollContainer.current || !paginationEnabled || !(progressiveItemSizes === null || progressiveItemSizes === void 0 ? void 0 : progressiveItemSizes.current)) {
// No container found
return;
}
const currentScrollPos = Math.round(axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft);
let closestItemPos = 0;
let closestItem = 0;
const endItem = Math.min(currentIndex + virtualizerLength, progressiveItemSizes.current.length);
for(let i = currentIndex; i < endItem - 1; i++){
if (currentScrollPos <= progressiveItemSizes.current[i + 1] && currentScrollPos >= progressiveItemSizes.current[i]) {
// Found our in between position
const distanceToPrev = Math.abs(currentScrollPos - progressiveItemSizes.current[i]);
const distanceToNext = Math.abs(progressiveItemSizes.current[i + 1] - currentScrollPos);
if (distanceToPrev < distanceToNext) {
closestItem = i;
} else {
closestItem = i + 1;
}
break;
}
}
let nextItem;
if (Math.round(closestItem - lastIndexScrolled.current) === 0) {
// Special case for go to next/previous with minimum amount of scroll needed
const nextTarget = lastScrollPos.current < currentScrollPos ? 1 : -1;
// This will also handle a case where we scrolled to the exact correct position (noop)
const isSecondaryScroll = Math.round(lastScrollPos.current - currentScrollPos) === 0;
const posMod = isSecondaryScroll ? 0 : nextTarget;
nextItem = closestItem + posMod;
} else {
// Pagination for anything else can just jump to the closest!
nextItem = closestItem;
}
// Safeguard nextItem
nextItem = Math.min(Math.max(0, nextItem), progressiveItemSizes.current.length);
closestItemPos = progressiveItemSizes.current[nextItem];
if (axis === 'vertical') {
scrollContainer.current.scrollTo({
top: closestItemPos,
behavior: 'smooth'
});
} else {
scrollContainer.current.scrollTo({
left: closestItemPos,
behavior: 'smooth'
});
}
lastScrollPos.current = progressiveItemSizes.current[nextItem];
lastIndexScrolled.current = nextItem;
}, [
paginationEnabled,
currentIndex,
scrollContainer,
virtualizerLength,
axis,
progressiveItemSizes
]);
/**
* On scroll timer that will continuously delay callback until scrolling stops
*/ const onScroll = _react.useCallback(()=>{
clearScrollTimer();
setScrollTimer(onScrollEnd, 100);
}, [
onScrollEnd,
clearScrollTimer,
setScrollTimer
]);
/**
* Pagination ref will ensure we attach listeners to containers on change
* It is returned from hook and merged into the scroll container externally
*/ const paginationRef = _react.useCallback((instance)=>{
if (!paginationEnabled) {
clearListeners();
scrollContainer.current = null;
return;
}
if (scrollContainer.current !== instance) {
clearListeners();
scrollContainer.current = instance;
if (scrollContainer.current) {
scrollContainer.current.addEventListener('scroll', onScroll);
}
}
}, [
onScroll,
onScrollEnd,
paginationEnabled
]);
return paginationRef;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,134 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDynamicVirtualizerMeasure", {
enumerable: true,
get: function() {
return useDynamicVirtualizerMeasure;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useResizeObserverRef = require("./useResizeObserverRef");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const useDynamicVirtualizerMeasure = (virtualizerProps)=>{
const { defaultItemSize, direction = 'vertical', numItems, getItemSize, bufferItems, bufferSize, virtualizerContext } = virtualizerProps;
const [state, setState] = _react.useState({
virtualizerLength: 0,
virtualizerBufferItems: 0,
virtualizerBufferSize: 0
});
const containerSizeRef = _react.useRef(0);
const scrollPosition = _react.useRef(0);
const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const container = _react.useRef(null);
const handleScrollResize = _react.useCallback((scrollRef)=>{
if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
// Error? ignore?
return;
}
if (scrollRef.current !== (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
// We have a local scroll container
containerSizeRef.current = direction === 'vertical' ? scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.getBoundingClientRect().height : scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.getBoundingClientRect().width;
} else if (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) {
var _targetDocument_defaultView, _targetDocument_defaultView1;
// If our scroll ref is the document body, we should check window height
containerSizeRef.current = direction === 'vertical' ? targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerHeight : targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.innerWidth;
}
let indexSizer = 0;
let i = 0;
let length = 0;
const startIndex = virtualizerContext.contextIndex;
const sizeToBeat = containerSizeRef.current + virtualizerBufferSize * 2;
while(indexSizer <= sizeToBeat && i + startIndex < numItems){
const iItemSize = getItemSize(startIndex + i);
if (virtualizerContext.childProgressiveSizes.current.length < numItems) {
/* We are in unknown territory, either an initial render or an update
in virtualizer item length has occurred.
We need to let the new items render first then we can accurately assess.*/ return virtualizerLength - virtualizerBufferSize * 2;
}
const currentScrollPos = scrollPosition.current;
const currentItemPos = virtualizerContext.childProgressiveSizes.current[startIndex + i] - iItemSize;
if (currentScrollPos > currentItemPos + iItemSize) {
// The item isn't in view, ignore for now.
i++;
continue;
} else if (currentScrollPos > currentItemPos) {
// The item is partially out of view, ignore the out of bounds portion
const variance = currentItemPos + iItemSize - currentScrollPos;
indexSizer += variance;
} else {
// Item is in view
indexSizer += iItemSize;
}
// Increment
i++;
length++;
}
/*
* Number of items to append at each end, i.e. 'preload' each side before entering view.
* Minimum: 2 - we give slightly more buffer for dynamic version.
*/ const newBufferItems = bufferItems !== null && bufferItems !== void 0 ? bufferItems : Math.max(Math.ceil(length / 3), 1);
/*
* This is how far we deviate into the bufferItems to detect a redraw.
*/ const newBufferSize = bufferSize !== null && bufferSize !== void 0 ? bufferSize : Math.max(defaultItemSize / 2, 1);
const totalLength = length + newBufferItems * 2;
setState({
virtualizerLength: totalLength,
virtualizerBufferSize: newBufferSize,
virtualizerBufferItems: newBufferItems
});
}, [
bufferItems,
bufferSize,
defaultItemSize,
direction,
getItemSize,
numItems,
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body,
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView,
virtualizerBufferSize,
virtualizerContext.childProgressiveSizes,
virtualizerContext.contextIndex,
virtualizerLength
]);
const resizeCallback = _react.useCallback((_entries, _observer, scrollRef)=>{
if (scrollRef) {
handleScrollResize(scrollRef);
}
}, [
handleScrollResize
]);
const scrollRef = (0, _reactutilities.useMergedRefs)(container, (0, _useResizeObserverRef.useResizeObserverRef_unstable)(resizeCallback));
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (virtualizerContext.contextIndex + virtualizerLength < numItems) {
// Avoid re-rendering/re-calculating when the end index has already been reached
handleScrollResize(container);
}
}, [
handleScrollResize,
numItems,
virtualizerContext.contextIndex,
virtualizerLength
]);
const updateScrollPosition = _react.useCallback((_scrollPosition)=>{
scrollPosition.current = _scrollPosition;
// Check if our vLength's need recalculating
handleScrollResize(scrollRef);
}, [
handleScrollResize,
scrollRef
]);
return {
virtualizerLength,
bufferItems: virtualizerBufferItems,
bufferSize: virtualizerBufferSize,
scrollRef,
containerSizeRef,
updateScrollPosition
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,135 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
getRTLRootMargin: function() {
return getRTLRootMargin;
},
useIntersectionObserver: function() {
return useIntersectionObserver;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useMutationObserver = require("./useMutationObserver");
const { useCallback, useState, useRef } = _react;
const getRTLRootMargin = (ltrRootMargin, target, win)=>{
if (target && win) {
// get the computed dir for the target element
const newDir = win.getComputedStyle(target).direction;
// If we're in rtl reading direction, we might need to flip the margins on the left/right sides
if (newDir === 'rtl') {
let newMargin = ltrRootMargin;
const splitMargins = ltrRootMargin.split(' ');
// We only need to do this if we get four values, otherwise the sides are equal and don't require flipping.
if (splitMargins.length === 4) {
newMargin = `${splitMargins[0]} ${splitMargins[3]} ${splitMargins[2]} ${splitMargins[1]}`;
}
return newMargin;
} else {
return ltrRootMargin;
}
}
return ltrRootMargin;
};
const useIntersectionObserver = (callback, options)=>{
'use no memo';
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
const observer = useRef(undefined);
const [observerList, setObserverList] = useState();
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
var _options_rootMargin;
// set the initial init with corrected margins based on the observed root's calculated reading direction.
const [observerInit, setObserverInit] = useState(options && {
...options,
rootMargin: getRTLRootMargin((_options_rootMargin = options.rootMargin) !== null && _options_rootMargin !== void 0 ? _options_rootMargin : '0px', options.root, win)
});
var _options_rootMargin1;
// We have to assume that any values passed in for rootMargin by the consuming app are ltr values. As such we will store the ltr value.
const ltrRootMargin = useRef((_options_rootMargin1 = options === null || options === void 0 ? void 0 : options.rootMargin) !== null && _options_rootMargin1 !== void 0 ? _options_rootMargin1 : '0px');
// Callback function to execute when mutations are observed
const mutationObserverCallback = useCallback((mutationList)=>{
for (const mutation of mutationList){
// Ensuring that the right attribute is being observed and that the root is within the tree of the element being mutated.
if (mutation.type === 'attributes' && mutation.attributeName === 'dir' && (options === null || options === void 0 ? void 0 : options.root) && mutation.target.contains(options === null || options === void 0 ? void 0 : options.root)) {
setObserverInit({
...observerInit,
rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root, win)
});
}
}
}, [
ltrRootMargin,
observerInit,
options === null || options === void 0 ? void 0 : options.root,
win
]);
// Mutation observer for dir attribute changes in the document
(0, _useMutationObserver.useMutationObserver)(targetDocument, mutationObserverCallback, {
attributes: true,
subtree: true,
attributeFilter: [
'dir'
]
});
// Observer elements in passed in list and clean up previous list
// This effect is only triggered when observerList is updated
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (!win) {
return;
}
observer.current = new win.IntersectionObserver(callback, {
...observerInit,
rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root, win)
});
// If we have an instance of IO and a list with elements, observer the elements
if (observer.current && observerList && observerList.length > 0) {
observerList.forEach((element)=>{
var _observer_current;
(_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(element);
});
}
// clean up previous elements being listened to
return ()=>{
if (observer.current) {
observer.current.disconnect();
}
};
}, [
observerList,
observerInit,
callback,
win
]);
// Do not use internally, we need to track external settings only here
const setObserverInitExternal = useCallback((newInit)=>{
var _newInit_rootMargin;
// Since we know this is coming from consumers, we can store this value as LTR somewhat safely.
ltrRootMargin.current = (_newInit_rootMargin = newInit === null || newInit === void 0 ? void 0 : newInit.rootMargin) !== null && _newInit_rootMargin !== void 0 ? _newInit_rootMargin : '0px';
// Call the internal setter to update the value and ensure if our calculated direction is rtl, we flip the margin
setObserverInit({
...newInit,
rootMargin: getRTLRootMargin(ltrRootMargin.current, newInit === null || newInit === void 0 ? void 0 : newInit.root, win)
});
}, [
ltrRootMargin,
setObserverInit,
win
]);
return {
setObserverList,
setObserverInit: setObserverInitExternal,
observer
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,135 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
createResizeObserverFromDocument: function() {
return createResizeObserverFromDocument;
},
useMeasureList: function() {
return useMeasureList;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
function useMeasureList(currentIndex, refLength, totalLength, defaultItemSize) {
const widthArray = _react.useRef(new Array(totalLength).fill(defaultItemSize));
const heightArray = _react.useRef(new Array(totalLength).fill(defaultItemSize));
const refArray = _react.useRef([]);
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
// This lets us trigger updates when a size change occurs.
const sizeUpdateCount = _react.useRef(0);
// the handler for resize observer
const handleIndexUpdate = _react.useCallback((index)=>{
var _refArray_current_index;
let isChanged = false;
const boundClientRect = (_refArray_current_index = refArray.current[index]) === null || _refArray_current_index === void 0 ? void 0 : _refArray_current_index.getBoundingClientRect();
const containerWidth = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.width;
if (containerWidth !== widthArray.current[currentIndex + index]) {
isChanged = true;
}
widthArray.current[currentIndex + index] = containerWidth || defaultItemSize;
const containerHeight = boundClientRect === null || boundClientRect === void 0 ? void 0 : boundClientRect.height;
if (containerHeight !== heightArray.current[currentIndex + index]) {
isChanged = true;
}
heightArray.current[currentIndex + index] = containerHeight || defaultItemSize;
if (isChanged) {
sizeUpdateCount.current = sizeUpdateCount.current + 1;
}
}, [
currentIndex,
defaultItemSize,
sizeUpdateCount
]);
const handleElementResizeCallback = (entries)=>{
for (const entry of entries){
const target = entry.target;
// Call the elements own resize handler (indexed)
target.handleResize();
}
};
_react.useEffect(()=>{
const newHeightLength = totalLength - heightArray.current.length;
const newWidthLength = totalLength - widthArray.current.length;
/* Ensure we grow or truncate arrays with prior properties,
keeping the existing values is important for whitespace assumptions.
Even if items in the 'middle' are deleted, we will recalc the whitespace as it is explored.*/ if (newWidthLength > 0) {
widthArray.current = widthArray.current.concat(new Array(newWidthLength).fill(defaultItemSize));
} else if (newWidthLength < 0) {
widthArray.current = widthArray.current.slice(0, totalLength);
}
if (newHeightLength > 0) {
heightArray.current = heightArray.current.concat(new Array(newHeightLength).fill(defaultItemSize));
} else if (newHeightLength < 0) {
heightArray.current = heightArray.current.slice(0, totalLength);
}
}, [
defaultItemSize,
totalLength
]);
// Keep the reference of ResizeObserver as a ref, as it should live through renders
const resizeObserver = _react.useRef(createResizeObserverFromDocument(targetDocument, handleElementResizeCallback));
/* createIndexedRef provides a dynamic function to create an undefined number of refs at render time
* these refs then provide an indexed callback via attaching 'handleResize' to the element itself
* this function is then called on resize by handleElementResize and relies on indexing
* to track continuous sizes throughout renders while releasing all virtualized element refs each render cycle.
*/ const createIndexedRef = _react.useCallback((index)=>{
const measureElementRef = (el)=>{
if (!targetDocument || !resizeObserver.current) {
return;
}
if (el) {
el.handleResize = ()=>{
handleIndexUpdate(index);
};
}
// cleanup previous container
if (refArray.current[index] !== undefined && refArray.current[index] !== null) {
resizeObserver.current.unobserve(refArray.current[index]);
}
refArray.current[index] = undefined;
if (el) {
refArray.current[index] = el;
resizeObserver.current.observe(el);
handleIndexUpdate(index);
}
};
return measureElementRef;
}, [
handleIndexUpdate,
resizeObserver,
targetDocument
]);
_react.useEffect(()=>{
const _resizeObserver = resizeObserver;
return ()=>{
var _resizeObserver_current;
return (_resizeObserver_current = _resizeObserver.current) === null || _resizeObserver_current === void 0 ? void 0 : _resizeObserver_current.disconnect();
};
}, [
resizeObserver
]);
return {
widthArray,
heightArray,
createIndexedRef,
refArray,
sizeUpdateCount: sizeUpdateCount.current
};
}
function createResizeObserverFromDocument(targetDocument, callback) {
var _targetDocument_defaultView;
if (!(targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.ResizeObserver)) {
return null;
}
return new targetDocument.defaultView.ResizeObserver(callback);
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,48 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMutationObserver", {
enumerable: true,
get: function() {
return useMutationObserver;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const { useRef, useEffect } = _react;
const useMutationObserver = (target, callback, options)=>{
'use no memo';
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
const observer = useRef(undefined);
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
useEffect(()=>{
if (!win) {
return;
}
// Create an observer instance linked to the callback function
observer.current = new win.MutationObserver(callback);
}, [
callback,
win
]);
useEffect(()=>{
if (target) {
var _observer_current;
(_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(target, options);
}
return ()=>{
var _observer_current;
(_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.disconnect();
};
}, [
target,
options
]);
return {
observer
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useMutationObserver.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst { useRef, useEffect } = React;\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useMutationObserver = (\n target: Element | Document | undefined,\n callback: MutationCallback,\n options?: MutationObserverInit,\n): {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n observer: React.MutableRefObject<MutationObserver | undefined>;\n} => {\n 'use no memo';\n\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n const observer = useRef<MutationObserver | undefined>(undefined);\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n useEffect(() => {\n if (!win) {\n return;\n }\n // Create an observer instance linked to the callback function\n observer.current = new win.MutationObserver(callback);\n }, [callback, win]);\n\n useEffect(() => {\n if (target) {\n // Start observing the target node for configured mutations\n observer.current?.observe(target, options);\n }\n\n return () => {\n observer.current?.disconnect();\n };\n }, [target, options]);\n\n return { observer };\n};\n"],"names":["React","useFluent_unstable","useFluent","useRef","useEffect","useMutationObserver","target","callback","options","observer","undefined","targetDocument","win","defaultView","current","MutationObserver","observe","disconnect"],"mappings":"AAAA;;;;;+BAUaK;;;;;;;iEARU,QAAQ;qCACiB,kCAAkC;AAElF,MAAM,EAAEF,MAAM,EAAEC,SAAS,EAAE,GAAGJ;AAKvB,4BAA4B,CACjCM,QACAC,UACAC;IAKA;IAEA,8FAA8F;IAE9F,MAAMC,WAAWN,OAAqCO;IACtD,MAAM,EAAEC,cAAc,EAAE,OAAGT,uCAAAA;IAC3B,MAAMU,MAAMD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBE,WAAW;IAEvCT,UAAU;QACR,IAAI,CAACQ,KAAK;YACR;QACF;QACA,8DAA8D;QAC9DH,SAASK,OAAO,GAAG,IAAIF,IAAIG,gBAAgB,CAACR;IAC9C,GAAG;QAACA;QAAUK;KAAI;IAElBR,UAAU;QACR,IAAIE,QAAQ;gBACV,AACAG,2DAD2D;aAC3DA,oBAAAA,SAASK,OAAAA,AAAO,MAAA,QAAhBL,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBO,OAAO,CAACV,QAAQE;QACpC;QAEA,OAAO;gBACLC;aAAAA,oBAAAA,SAASK,OAAAA,AAAO,MAAA,QAAhBL,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAkBQ,UAAU;QAC9B;IACF,GAAG;QAACX;QAAQE;KAAQ;IAEpB,OAAO;QAAEC;IAAS;AACpB,EAAE"}

View File

@@ -0,0 +1,69 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useResizeObserverRef_unstable", {
enumerable: true,
get: function() {
return useResizeObserverRef_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _debounce = require("../utilities/debounce");
const _createResizeObserverFromDocument = require("../utilities/createResizeObserverFromDocument");
const useResizeObserverRef_unstable = (resizeCallback)=>{
'use no memo';
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const container = _react.useRef(null);
const containerHeightRef = _react.useRef(0);
const containerWidthRef = _react.useRef(0);
// the handler for resize observer
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
const handleResize = (0, _debounce.debounce)((entries, observer)=>{
var _container_current, _container_current1;
const containerHeight = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.clientHeight;
const containerWidth = (_container_current1 = container.current) === null || _container_current1 === void 0 ? void 0 : _container_current1.clientWidth;
// Our resize observer will fire on scroll resize, let index change handle that instead.
if (containerHeightRef.current !== containerHeight || containerWidth !== containerWidthRef.current) {
containerWidthRef.current = containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0;
containerHeightRef.current = containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0;
resizeCallback(entries, observer, container);
}
});
// Keep the reference of ResizeObserver in the state, as it should live through renders
const [resizeObserver, setResizeObserver] = _react.useState(()=>(0, _createResizeObserverFromDocument.createResizeObserverFromDocument)(targetDocument, handleResize));
_react.useEffect(()=>{
// Update our state when resizeCallback changes
container.current = null;
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
setResizeObserver(()=>(0, _createResizeObserverFromDocument.createResizeObserverFromDocument)(targetDocument, handleResize));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
resizeCallback,
targetDocument
]);
_react.useEffect(()=>{
return ()=>{
container.current = null;
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const scrollRef = _react.useCallback((instance)=>{
if (container.current !== instance) {
if (container.current) {
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(container.current);
}
container.current = instance;
if (container.current) {
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(container.current);
}
}
}, [
resizeObserver
]);
return scrollRef;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,108 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useStaticVirtualizerPagination", {
enumerable: true,
get: function() {
return useStaticVirtualizerPagination;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useStaticVirtualizerPagination = (virtualizerProps, paginationEnabled = true)=>{
'use no memo';
const { itemSize, axis = 'vertical' } = virtualizerProps;
const [setScrollTimer, clearScrollTimer] = (0, _reactutilities.useTimeout)();
const lastScrollPos = _react.useRef(0);
const lastIndexScrolled = _react.useRef(0);
const scrollContainer = _react.useRef(null);
const clearListeners = ()=>{
if (scrollContainer.current) {
scrollContainer.current.removeEventListener('scroll', onScroll);
scrollContainer.current = null;
clearScrollTimer();
}
};
_react.useEffect(()=>{
return ()=>{
clearListeners();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
/**
* Handle scroll stop event and paginate to the closest item
* If the closest item is the same as the previous scroll end
* we paginate to the next/previous one based on direction
*/ const onScrollEnd = _react.useCallback(()=>{
if (!scrollContainer.current || !paginationEnabled) {
// No container found
return;
}
const currentScrollPos = Math.round(axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft);
const closestItem = Math.round(currentScrollPos / itemSize);
let nextItem = 0;
if (Math.round(closestItem - lastIndexScrolled.current) === 0) {
// Special case for go to next/previous with minimum amount of scroll needed
const nextTarget = lastScrollPos.current < currentScrollPos ? 1 : -1;
const isSecondaryScroll = lastScrollPos.current === currentScrollPos;
const posMod = isSecondaryScroll ? 0 : nextTarget;
nextItem = closestItem + posMod;
} else {
// Pagination for anything else can just jump to the closest!
nextItem = closestItem;
}
const nextItemPos = nextItem * itemSize;
if (axis === 'vertical') {
scrollContainer.current.scrollTo({
top: nextItemPos,
behavior: 'smooth'
});
} else {
scrollContainer.current.scrollTo({
left: nextItemPos,
behavior: 'smooth'
});
}
lastScrollPos.current = nextItemPos;
lastIndexScrolled.current = nextItem;
}, [
paginationEnabled,
axis,
itemSize
]);
/**
* On scroll timer that will continuously delay callback until scrolling stops
*/ const onScroll = _react.useCallback(()=>{
clearScrollTimer();
setScrollTimer(onScrollEnd, 100);
}, [
onScrollEnd,
clearScrollTimer,
setScrollTimer
]);
/**
* Pagination ref will ensure we attach listeners to containers on change
* It is returned from hook and merged into the scroll container externally
*/ const paginationRef = _react.useCallback((instance)=>{
if (!paginationEnabled) {
clearListeners();
scrollContainer.current = null;
return;
}
if (scrollContainer.current !== instance) {
clearListeners();
scrollContainer.current = instance;
if (scrollContainer.current) {
scrollContainer.current.addEventListener('scroll', onScroll);
}
}
}, [
onScroll,
onScrollEnd,
paginationEnabled
]);
return paginationRef;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,70 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useStaticVirtualizerMeasure", {
enumerable: true,
get: function() {
return useStaticVirtualizerMeasure;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useResizeObserverRef = require("./useResizeObserverRef");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const useStaticVirtualizerMeasure = (virtualizerProps)=>{
const { defaultItemSize, direction = 'vertical', bufferItems, bufferSize } = virtualizerProps;
const [state, setState] = _react.useState({
virtualizerLength: 0,
_bufferSize: 0,
_bufferItems: 0
});
const containerSizeRef = _react.useRef(0);
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const { virtualizerLength, _bufferItems, _bufferSize } = state;
const resizeCallback = _react.useCallback((_entries, _observer, scrollRef)=>{
if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
return;
}
if (scrollRef.current !== (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
// We have a local scroll container
containerSizeRef.current = direction === 'vertical' ? scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.getBoundingClientRect().height : scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current.getBoundingClientRect().width;
} else if (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) {
var _targetDocument_defaultView, _targetDocument_defaultView1;
// If our scroll ref is the document body, we should check window height
containerSizeRef.current = direction === 'vertical' ? targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerHeight : targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.innerWidth;
}
/*
* Number of items required to cover viewport.
*/ const length = Math.ceil(containerSizeRef.current / defaultItemSize + 1);
/*
* Number of items to append at each end, i.e. 'preload' each side before entering view.
* Minimum: 1
*/ const newBufferItems = bufferItems !== null && bufferItems !== void 0 ? bufferItems : Math.max(Math.ceil(length / 4), 1);
/*
* This is how far we deviate into the bufferItems to detect a redraw.
*/ const newBufferSize = bufferSize !== null && bufferSize !== void 0 ? bufferSize : Math.max(defaultItemSize / 2.0, 1);
const totalLength = length + newBufferItems * 2;
setState({
virtualizerLength: totalLength,
_bufferItems: newBufferItems,
_bufferSize: newBufferSize
});
}, [
bufferItems,
bufferSize,
defaultItemSize,
direction,
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body,
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
]);
const scrollRef = (0, _useResizeObserverRef.useResizeObserverRef_unstable)(resizeCallback);
return {
virtualizerLength,
bufferItems: _bufferItems,
bufferSize: _bufferSize,
scrollRef,
containerSizeRef
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,89 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Virtualizer: function() {
return _Virtualizer.Virtualizer;
},
VirtualizerContextProvider: function() {
return _Utilities.VirtualizerContextProvider;
},
VirtualizerScrollView: function() {
return _VirtualizerScrollView.VirtualizerScrollView;
},
VirtualizerScrollViewDynamic: function() {
return _VirtualizerScrollViewDynamic.VirtualizerScrollViewDynamic;
},
renderVirtualizerScrollViewDynamic_unstable: function() {
return _VirtualizerScrollViewDynamic.renderVirtualizerScrollViewDynamic_unstable;
},
renderVirtualizerScrollView_unstable: function() {
return _VirtualizerScrollView.renderVirtualizerScrollView_unstable;
},
renderVirtualizer_unstable: function() {
return _Virtualizer.renderVirtualizer_unstable;
},
scrollToItemDynamic: function() {
return _Utilities.scrollToItemDynamic;
},
scrollToItemStatic: function() {
return _Utilities.scrollToItemStatic;
},
useDynamicVirtualizerMeasure: function() {
return _Hooks.useDynamicVirtualizerMeasure;
},
useIntersectionObserver: function() {
return _Hooks.useIntersectionObserver;
},
useMeasureList: function() {
return _Hooks.useMeasureList;
},
useResizeObserverRef_unstable: function() {
return _Hooks.useResizeObserverRef_unstable;
},
useStaticVirtualizerMeasure: function() {
return _Hooks.useStaticVirtualizerMeasure;
},
useVirtualizerContext_unstable: function() {
return _Utilities.useVirtualizerContext_unstable;
},
useVirtualizerScrollViewDynamicStyles_unstable: function() {
return _VirtualizerScrollViewDynamic.useVirtualizerScrollViewDynamicStyles_unstable;
},
useVirtualizerScrollViewDynamic_unstable: function() {
return _VirtualizerScrollViewDynamic.useVirtualizerScrollViewDynamic_unstable;
},
useVirtualizerScrollViewStyles_unstable: function() {
return _VirtualizerScrollView.useVirtualizerScrollViewStyles_unstable;
},
useVirtualizerScrollView_unstable: function() {
return _VirtualizerScrollView.useVirtualizerScrollView_unstable;
},
useVirtualizerStyles_unstable: function() {
return _Virtualizer.useVirtualizerStyles_unstable;
},
useVirtualizer_unstable: function() {
return _Virtualizer.useVirtualizer_unstable;
},
virtualizerClassNames: function() {
return _Virtualizer.virtualizerClassNames;
},
virtualizerScrollViewClassNames: function() {
return _VirtualizerScrollView.virtualizerScrollViewClassNames;
},
virtualizerScrollViewDynamicClassNames: function() {
return _VirtualizerScrollViewDynamic.virtualizerScrollViewDynamicClassNames;
}
});
const _Virtualizer = require("./Virtualizer");
const _Hooks = require("./Hooks");
const _Utilities = require("./Utilities");
const _VirtualizerScrollView = require("./VirtualizerScrollView");
const _VirtualizerScrollViewDynamic = require("./VirtualizerScrollViewDynamic");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Virtualizer,\n virtualizerClassNames,\n useVirtualizer_unstable,\n renderVirtualizer_unstable,\n useVirtualizerStyles_unstable,\n} from './Virtualizer';\n\nexport type {\n VirtualizerProps,\n VirtualizerState,\n VirtualizerSlots,\n VirtualizerChildRenderFunction,\n VirtualizerDataRef,\n} from './Virtualizer';\n\nexport {\n useIntersectionObserver,\n useStaticVirtualizerMeasure,\n useDynamicVirtualizerMeasure,\n useResizeObserverRef_unstable,\n useMeasureList,\n} from './Hooks';\n\nexport type {\n ResizeCallbackWithRef,\n VirtualizerMeasureDynamicProps,\n VirtualizerMeasureProps,\n IndexedResizeCallbackElement,\n} from './Hooks';\n\nexport type { ScrollToItemDynamicParams, ScrollToItemStaticParams, ScrollToInterface } from './Utilities';\n\nexport {\n VirtualizerContextProvider,\n useVirtualizerContext_unstable,\n scrollToItemStatic,\n scrollToItemDynamic,\n} from './Utilities';\n\nexport type { VirtualizerContextProps, DynamicVirtualizerContextProps } from './Utilities';\n\nexport {\n VirtualizerScrollView,\n virtualizerScrollViewClassNames,\n useVirtualizerScrollView_unstable,\n renderVirtualizerScrollView_unstable,\n useVirtualizerScrollViewStyles_unstable,\n} from './VirtualizerScrollView';\n\nexport type {\n VirtualizerScrollViewProps,\n VirtualizerScrollViewState,\n VirtualizerScrollViewSlots,\n} from './VirtualizerScrollView';\n\nexport {\n VirtualizerScrollViewDynamic,\n virtualizerScrollViewDynamicClassNames,\n useVirtualizerScrollViewDynamic_unstable,\n renderVirtualizerScrollViewDynamic_unstable,\n useVirtualizerScrollViewDynamicStyles_unstable,\n} from './VirtualizerScrollViewDynamic';\n\nexport type {\n VirtualizerScrollViewDynamicProps,\n VirtualizerScrollViewDynamicState,\n VirtualizerScrollViewDynamicSlots,\n} from './VirtualizerScrollViewDynamic';\n"],"names":["Virtualizer","virtualizerClassNames","useVirtualizer_unstable","renderVirtualizer_unstable","useVirtualizerStyles_unstable","useIntersectionObserver","useStaticVirtualizerMeasure","useDynamicVirtualizerMeasure","useResizeObserverRef_unstable","useMeasureList","VirtualizerContextProvider","useVirtualizerContext_unstable","scrollToItemStatic","scrollToItemDynamic","VirtualizerScrollView","virtualizerScrollViewClassNames","useVirtualizerScrollView_unstable","renderVirtualizerScrollView_unstable","useVirtualizerScrollViewStyles_unstable","VirtualizerScrollViewDynamic","virtualizerScrollViewDynamicClassNames","useVirtualizerScrollViewDynamic_unstable","renderVirtualizerScrollViewDynamic_unstable","useVirtualizerScrollViewDynamicStyles_unstable"],"mappings":";;;;;;;;;;;IACEA,WAAW;;;;eAiCXU,qCAA0B;;;eAS1BI,4CAAqB;;;eAcrBK,0DAA4B;;IAG5BG;wFAA2C;;;eAd3CL,2DAAoC;;;eA1CpCd,uCAA0B;;;eAiC1BU,8BAAmB;;;eADnBD,6BAAkB;;gCAjBU;eAA5BL;;;eAFAF,8BAAuB;;;eAIvBI,qBAAc;;;eADdD,oCAA6B;;;eAF7BF,kCAA2B;;;eAiB3BK,yCAA8B;;;eA0B9BY,4EAA8C;;IAF9CF,wCAAwC;;;IAZxCH;6EAAuC;;IAFvCF;uEAAiC;;;eAxCjCZ,0CAA6B;;2BAFN;eAAvBF;;;eADAD,kCAAqB;;;eA0CrBc,sDAA+B;;;eAc/BK,oEAAsC;;;6BApDjC,gBAAgB;uBAgBhB,UAAU;2BAgBV,cAAc;uCAUd,0BAA0B;8CAc1B,iCAAiC"}

View File

@@ -0,0 +1,42 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "scrollToItemStatic", {
enumerable: true,
get: function() {
return scrollToItemStatic;
}
});
const scrollToItemStatic = (params)=>{
const { index, itemSize, totalItems, scrollViewRef, axis = 'vertical', reversed = false, behavior = 'auto' } = params;
if (axis === 'horizontal') {
if (reversed) {
var _scrollViewRef_current;
(_scrollViewRef_current = scrollViewRef.current) === null || _scrollViewRef_current === void 0 ? void 0 : _scrollViewRef_current.scrollTo({
left: totalItems * itemSize - itemSize * index,
behavior
});
} else {
var _scrollViewRef_current1;
(_scrollViewRef_current1 = scrollViewRef.current) === null || _scrollViewRef_current1 === void 0 ? void 0 : _scrollViewRef_current1.scrollTo({
left: itemSize * index,
behavior
});
}
} else {
if (reversed) {
var _scrollViewRef_current2;
(_scrollViewRef_current2 = scrollViewRef.current) === null || _scrollViewRef_current2 === void 0 ? void 0 : _scrollViewRef_current2.scrollTo({
top: totalItems * itemSize - itemSize * index,
behavior
});
} else {
var _scrollViewRef_current3;
(_scrollViewRef_current3 = scrollViewRef.current) === null || _scrollViewRef_current3 === void 0 ? void 0 : _scrollViewRef_current3.scrollTo({
top: itemSize * index,
behavior
});
}
}
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utilities/ImperativeScrolling/imperativeScrolling.ts"],"sourcesContent":["import { ScrollToItemStaticParams } from './imperativeScrolling.types';\n\nexport const scrollToItemStatic = (params: ScrollToItemStaticParams): void => {\n const { index, itemSize, totalItems, scrollViewRef, axis = 'vertical', reversed = false, behavior = 'auto' } = params;\n\n if (axis === 'horizontal') {\n if (reversed) {\n scrollViewRef.current?.scrollTo({\n left: totalItems * itemSize - itemSize * index,\n behavior,\n });\n } else {\n scrollViewRef.current?.scrollTo({\n left: itemSize * index,\n behavior,\n });\n }\n } else {\n if (reversed) {\n scrollViewRef.current?.scrollTo({\n top: totalItems * itemSize - itemSize * index,\n behavior,\n });\n } else {\n scrollViewRef.current?.scrollTo({\n top: itemSize * index,\n behavior,\n });\n }\n }\n};\n"],"names":["scrollToItemStatic","params","index","itemSize","totalItems","scrollViewRef","axis","reversed","behavior","current","scrollTo","left","top"],"mappings":";;;;+BAEaA;;;;;;AAAN,2BAA2B,CAACC;IACjC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,aAAa,EAAEC,OAAO,UAAU,EAAEC,WAAW,KAAK,EAAEC,WAAW,MAAM,EAAE,GAAGP;IAE/G,IAAIK,SAAS,cAAc;QACzB,IAAIC,UAAU;gBACZF;aAAAA,yBAAAA,cAAcI,OAAAA,AAAO,MAAA,QAArBJ,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAuBK,QAAQ,CAAC;gBAC9BC,MAAMP,aAAaD,WAAWA,WAAWD;gBACzCM;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAAA,AAAO,MAAA,QAArBJ,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BC,MAAMR,WAAWD;gBACjBM;YACF;QACF;IACF,OAAO;QACL,IAAID,UAAU;gBACZF;aAAAA,0BAAAA,cAAcI,OAAAA,AAAO,MAAA,QAArBJ,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BE,KAAKR,aAAaD,WAAWA,WAAWD;gBACxCM;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAAA,AAAO,MAAA,QAArBJ,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BE,KAAKT,WAAWD;gBAChBM;YACF;QACF;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utilities/ImperativeScrolling/imperativeScrolling.types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ScrollToItemStaticParams = {\n index: number;\n itemSize: number;\n totalItems: number;\n scrollViewRef: React.RefObject<HTMLDivElement>;\n axis?: 'horizontal' | 'vertical';\n reversed?: boolean;\n behavior?: ScrollBehavior;\n};\n\nexport type ScrollToItemDynamicParams = {\n index: number;\n itemSizes: React.RefObject<number[]>;\n totalSize: number;\n scrollViewRef: React.RefObject<HTMLDivElement>;\n axis?: 'horizontal' | 'vertical';\n reversed?: boolean;\n behavior?: ScrollBehavior;\n};\n\nexport type ScrollToInterface = {\n scrollTo: (index: number, behavior?: ScrollBehavior, callback?: (index: number) => void) => void;\n virtualizerLength: React.RefObject<number>;\n currentIndex: React.RefObject<number> | undefined;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,55 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "scrollToItemDynamic", {
enumerable: true,
get: function() {
return scrollToItemDynamic;
}
});
const scrollToItemDynamic = (params)=>{
const { index, itemSizes, totalSize, scrollViewRef, axis = 'vertical', reversed = false, behavior = 'auto' } = params;
if (!itemSizes.current) {
return;
}
if (itemSizes.current === null || itemSizes.current.length < index) {
// null check - abort
return;
}
let itemDepth = 0;
for(let i = 0; i < index; i++){
if (i < index) {
itemDepth += itemSizes.current[i];
}
}
if (axis === 'horizontal') {
if (reversed) {
var _scrollViewRef_current;
(_scrollViewRef_current = scrollViewRef.current) === null || _scrollViewRef_current === void 0 ? void 0 : _scrollViewRef_current.scrollTo({
left: totalSize - itemDepth,
behavior
});
} else {
var _scrollViewRef_current1;
(_scrollViewRef_current1 = scrollViewRef.current) === null || _scrollViewRef_current1 === void 0 ? void 0 : _scrollViewRef_current1.scrollTo({
left: itemDepth,
behavior
});
}
} else {
if (reversed) {
var _scrollViewRef_current2;
(_scrollViewRef_current2 = scrollViewRef.current) === null || _scrollViewRef_current2 === void 0 ? void 0 : _scrollViewRef_current2.scrollTo({
top: totalSize - itemDepth,
behavior
});
} else {
var _scrollViewRef_current3;
(_scrollViewRef_current3 = scrollViewRef.current) === null || _scrollViewRef_current3 === void 0 ? void 0 : _scrollViewRef_current3.scrollTo({
top: itemDepth,
behavior
});
}
}
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utilities/ImperativeScrolling/imperativeScrollingDynamic.ts"],"sourcesContent":["import { ScrollToItemDynamicParams } from './imperativeScrolling.types';\n\nexport const scrollToItemDynamic = (params: ScrollToItemDynamicParams): void => {\n const { index, itemSizes, totalSize, scrollViewRef, axis = 'vertical', reversed = false, behavior = 'auto' } = params;\n if (!itemSizes.current) {\n return;\n }\n\n if (itemSizes.current === null || itemSizes.current.length < index) {\n // null check - abort\n return;\n }\n\n let itemDepth = 0;\n for (let i = 0; i < index; i++) {\n if (i < index) {\n itemDepth += itemSizes.current[i];\n }\n }\n\n if (axis === 'horizontal') {\n if (reversed) {\n scrollViewRef.current?.scrollTo({\n left: totalSize - itemDepth,\n behavior,\n });\n } else {\n scrollViewRef.current?.scrollTo({\n left: itemDepth,\n behavior,\n });\n }\n } else {\n if (reversed) {\n scrollViewRef.current?.scrollTo({\n top: totalSize - itemDepth,\n behavior,\n });\n } else {\n scrollViewRef.current?.scrollTo({\n top: itemDepth,\n behavior,\n });\n }\n }\n};\n"],"names":["scrollToItemDynamic","params","index","itemSizes","totalSize","scrollViewRef","axis","reversed","behavior","current","length","itemDepth","i","scrollTo","left","top"],"mappings":";;;;+BAEaA;;;;;;AAAN,4BAA4B,CAACC;IAClC,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,aAAa,EAAEC,OAAO,UAAU,EAAEC,WAAW,KAAK,EAAEC,WAAW,MAAM,EAAE,GAAGP;IAC/G,IAAI,CAACE,UAAUM,OAAO,EAAE;QACtB;IACF;IAEA,IAAIN,UAAUM,OAAO,KAAK,QAAQN,UAAUM,OAAO,CAACC,MAAM,GAAGR,OAAO;QAClE,qBAAqB;QACrB;IACF;IAEA,IAAIS,YAAY;IAChB,IAAK,IAAIC,IAAI,GAAGA,IAAIV,OAAOU,IAAK;QAC9B,IAAIA,IAAIV,OAAO;YACbS,aAAaR,UAAUM,OAAO,CAACG,EAAE;QACnC;IACF;IAEA,IAAIN,SAAS,cAAc;QACzB,IAAIC,UAAU;gBACZF;aAAAA,yBAAAA,cAAcI,OAAAA,AAAO,MAAA,QAArBJ,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAuBQ,QAAQ,CAAC;gBAC9BC,MAAMV,YAAYO;gBAClBH;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAAA,AAAO,MAAA,QAArBJ,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BC,MAAMH;gBACNH;YACF;QACF;IACF,OAAO;QACL,IAAID,UAAU;gBACZF;aAAAA,0BAAAA,cAAcI,OAAAA,AAAO,MAAA,QAArBJ,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BE,KAAKX,YAAYO;gBACjBH;YACF;QACF,OAAO;gBACLH;YAAAA,2BAAAA,cAAcI,OAAAA,AAAO,MAAA,QAArBJ,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BE,KAAKJ;gBACLH;YACF;QACF;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
scrollToItemDynamic: function() {
return _imperativeScrollingDynamic.scrollToItemDynamic;
},
scrollToItemStatic: function() {
return _imperativeScrolling.scrollToItemStatic;
}
});
const _imperativeScrolling = require("./imperativeScrolling");
const _imperativeScrollingDynamic = require("./imperativeScrollingDynamic");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utilities/ImperativeScrolling/index.ts"],"sourcesContent":["export { scrollToItemStatic } from './imperativeScrolling';\nexport type {\n ScrollToInterface,\n ScrollToItemDynamicParams,\n ScrollToItemStaticParams,\n} from './imperativeScrolling.types';\nexport { scrollToItemDynamic } from './imperativeScrollingDynamic';\n"],"names":["scrollToItemStatic","scrollToItemDynamic"],"mappings":";;;;;;;;;;;;eAMSC,+CAAmB;;;eANnBD,uCAAkB;;;qCAAQ,wBAAwB;4CAMvB,+BAA+B"}

View File

@@ -0,0 +1,49 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
VirtualizerContextProvider: function() {
return VirtualizerContextProvider;
},
useVirtualizerContextState_unstable: function() {
return useVirtualizerContextState_unstable;
},
useVirtualizerContext_unstable: function() {
return useVirtualizerContext_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const VirtualizerContext = /*#__PURE__*/ _react.createContext(undefined);
const VirtualizerContextProvider = VirtualizerContext.Provider;
const useVirtualizerContext_unstable = ()=>{
return _react.useContext(VirtualizerContext);
};
const useVirtualizerContextState_unstable = (passedContext)=>{
const virtualizerContext = useVirtualizerContext_unstable();
const [_contextIndex, _setContextIndex] = _react.useState(-1);
const childProgressiveSizes = _react.useRef([]);
/* We respect any wrapped providers while also ensuring defaults or passed through
* Order of usage -> Passed Prop -> Provider Context -> Internal State default
*/ const context = _react.useMemo(()=>{
var _passedContext_contextIndex, _ref, _passedContext_setContextIndex, _ref1;
return {
contextIndex: (_ref = (_passedContext_contextIndex = passedContext === null || passedContext === void 0 ? void 0 : passedContext.contextIndex) !== null && _passedContext_contextIndex !== void 0 ? _passedContext_contextIndex : virtualizerContext === null || virtualizerContext === void 0 ? void 0 : virtualizerContext.contextIndex) !== null && _ref !== void 0 ? _ref : _contextIndex,
setContextIndex: (_ref1 = (_passedContext_setContextIndex = passedContext === null || passedContext === void 0 ? void 0 : passedContext.setContextIndex) !== null && _passedContext_setContextIndex !== void 0 ? _passedContext_setContextIndex : virtualizerContext === null || virtualizerContext === void 0 ? void 0 : virtualizerContext.setContextIndex) !== null && _ref1 !== void 0 ? _ref1 : _setContextIndex,
childProgressiveSizes
};
}, [
_contextIndex,
passedContext,
virtualizerContext
]);
return context;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utilities/VirtualizerContext/VirtualizerContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { DynamicVirtualizerContextProps, VirtualizerContextProps } from './types';\n\nconst VirtualizerContext = React.createContext<VirtualizerContextProps | undefined>(\n undefined,\n) as React.Context<VirtualizerContextProps>;\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const VirtualizerContextProvider = VirtualizerContext.Provider;\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useVirtualizerContext_unstable = (): VirtualizerContextProps => {\n return React.useContext(VirtualizerContext);\n};\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useVirtualizerContextState_unstable = (\n passedContext?: VirtualizerContextProps,\n): DynamicVirtualizerContextProps => {\n const virtualizerContext = useVirtualizerContext_unstable();\n const [_contextIndex, _setContextIndex] = React.useState<number>(-1);\n const childProgressiveSizes = React.useRef<number[]>([]);\n\n /* We respect any wrapped providers while also ensuring defaults or passed through\n * Order of usage -> Passed Prop -> Provider Context -> Internal State default\n */\n const context = React.useMemo(\n () => ({\n contextIndex: passedContext?.contextIndex ?? virtualizerContext?.contextIndex ?? _contextIndex,\n setContextIndex: passedContext?.setContextIndex ?? virtualizerContext?.setContextIndex ?? _setContextIndex,\n childProgressiveSizes,\n }),\n [_contextIndex, passedContext, virtualizerContext],\n );\n\n return context;\n};\n"],"names":["React","VirtualizerContext","createContext","undefined","VirtualizerContextProvider","Provider","useVirtualizerContext_unstable","useContext","useVirtualizerContextState_unstable","passedContext","virtualizerContext","_contextIndex","_setContextIndex","useState","childProgressiveSizes","useRef","context","useMemo","contextIndex","setContextIndex"],"mappings":"AAAA;;;;;;;;;;;;IAYaI,0BAAAA;;;IAYAI,mCAAAA;;;kCAPAF;;;;;iEAfU,QAAQ;AAG/B,MAAML,mCAAqBD,OAAME,aAAa,CAC5CC;AAMK,mCAAmCF,mBAAmBI,QAAQ,CAAC;AAK/D,MAAMC,iCAAiC;IAC5C,OAAON,OAAMO,UAAU,CAACN;AAC1B,EAAE;AAKK,4CAA4C,CACjDQ;IAEA,MAAMC,qBAAqBJ;IAC3B,MAAM,CAACK,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAS,CAAC;IAClE,MAAMC,wBAAwBd,OAAMe,MAAM,CAAW,EAAE;IAEvD;;GAEC,GACD,MAAMC,UAAUhB,OAAMiB,OAAO,CAC3B;YACgBR,6BAAAA,MACGA,gCAAAA;eAFZ;YACLS,cAAcT,CAAAA,OAAAA,CAAAA,8BAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeS,YAAAA,AAAY,MAAA,QAA3BT,gCAAAA,KAAAA,IAAAA,8BAA+BC,uBAAAA,QAAAA,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAoBQ,YAAAA,AAAY,MAAA,QAA/DT,SAAAA,KAAAA,IAAAA,OAAmEE;YACjFQ,iBAAiBV,CAAAA,QAAAA,CAAAA,iCAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeU,eAAAA,AAAe,MAAA,QAA9BV,mCAAAA,KAAAA,IAAAA,iCAAkCC,uBAAAA,QAAAA,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAoBS,eAAAA,AAAe,MAAA,QAArEV,UAAAA,KAAAA,IAAAA,QAAyEG;YAC1FE;QACF;OACA;QAACH;QAAeF;QAAeC;KAAmB;IAGpD,OAAOM;AACT,EAAE"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
VirtualizerContextProvider: function() {
return _VirtualizerContext.VirtualizerContextProvider;
},
useVirtualizerContextState_unstable: function() {
return _VirtualizerContext.useVirtualizerContextState_unstable;
},
useVirtualizerContext_unstable: function() {
return _VirtualizerContext.useVirtualizerContext_unstable;
}
});
const _VirtualizerContext = require("./VirtualizerContext");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utilities/VirtualizerContext/index.ts"],"sourcesContent":["export {\n VirtualizerContextProvider,\n useVirtualizerContextState_unstable,\n useVirtualizerContext_unstable,\n} from './VirtualizerContext';\nexport type { DynamicVirtualizerContextProps, VirtualizerContextProps } from './types';\n"],"names":["VirtualizerContextProvider","useVirtualizerContextState_unstable","useVirtualizerContext_unstable"],"mappings":";;;;;;;;;;;;eACEA,8CAA0B;;;eAC1BC,uDAAmC;;;eACnCC,kDAA8B;;;oCACzB,uBAAuB"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utilities/VirtualizerContext/types.ts"],"sourcesContent":["import * as React from 'react';\n/**\n * {@docCategory Virtualizer}\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerContextProps = {\n contextIndex: number;\n setContextIndex: (index: number) => void;\n /*\n * These optional props are used in dynamic virtualizer\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n childProgressiveSizes?: React.MutableRefObject<number[]>;\n};\n\n/**\n * Some props are optional on static virtualizer, but required for dynamic.\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type DynamicVirtualizerContextProps = Required<VirtualizerContextProps>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,24 @@
/**
* FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar
* A utility method that creates a ResizeObserver from a target document
* @param targetDocument - document to use to create the ResizeObserver
* @param callback - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback
* @returns a ResizeObserver instance or null if the global does not exist on the document
* @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createResizeObserverFromDocument", {
enumerable: true,
get: function() {
return createResizeObserverFromDocument;
}
});
function createResizeObserverFromDocument(targetDocument, callback) {
var _targetDocument_defaultView;
if (!(targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.ResizeObserver)) {
return null;
}
return new targetDocument.defaultView.ResizeObserver(callback);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utilities/createResizeObserverFromDocument.ts"],"sourcesContent":["/**\n * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar\n * A utility method that creates a ResizeObserver from a target document\n * @param targetDocument - document to use to create the ResizeObserver\n * @param callback - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback\n * @returns a ResizeObserver instance or null if the global does not exist on the document\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport function createResizeObserverFromDocument(\n targetDocument: Document | null | undefined,\n callback: ResizeObserverCallback,\n): ResizeObserver | null {\n if (!targetDocument?.defaultView?.ResizeObserver) {\n return null;\n }\n\n return new targetDocument.defaultView.ResizeObserver(callback);\n}\n"],"names":["createResizeObserverFromDocument","targetDocument","callback","defaultView","ResizeObserver"],"mappings":"AAAA;;;;;;;CAOC,GACD;;;;;;;;;;AAAO,SAASA,iCACdC,cAA2C,EAC3CC,QAAgC;QAE3BD;IAAL,IAAI,EAACA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,+BAAAA,eAAgBE,WAAAA,AAAW,MAAA,QAA3BF,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,4BAA6BG,cAAAA,AAAc,GAAE;QAChD,OAAO;IACT;IAEA,OAAO,IAAIH,eAAeE,WAAW,CAACC,cAAc,CAACF;AACvD"}

View File

@@ -0,0 +1,30 @@
/**
* Microtask debouncer
* https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide
* @param fn - Function to debounce
* @returns debounced function
* @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "debounce", {
enumerable: true,
get: function() {
return debounce;
}
});
function debounce(fn) {
let pending;
return ()=>{
if (!pending) {
pending = true;
queueMicrotask(()=>{
// Need to set pending to `false` before the debounced function is run.
// React can actually interrupt the function while it's running!
pending = false;
fn();
});
}
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utilities/debounce.ts"],"sourcesContent":["/**\n * Microtask debouncer\n * https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide\n * @param fn - Function to debounce\n * @returns debounced function\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport function debounce(fn: Function) {\n let pending: boolean;\n return (): void => {\n if (!pending) {\n pending = true;\n queueMicrotask(() => {\n // Need to set pending to `false` before the debounced function is run.\n // React can actually interrupt the function while it's running!\n pending = false;\n fn();\n });\n }\n };\n}\n"],"names":["debounce","fn","pending","queueMicrotask"],"mappings":"AAAA;;;;;;CAMC,GACD;;;;;;;;;;AAAO,SAASA,SAASC,EAAY;IACnC,IAAIC;IACJ,OAAO;QACL,IAAI,CAACA,SAAS;YACZA,UAAU;YACVC,eAAe;gBACb,uEAAuE;gBACvE,gEAAgE;gBAChED,UAAU;gBACVD;YACF;QACF;IACF;AACF"}

View File

@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
VirtualizerContextProvider: function() {
return _VirtualizerContext.VirtualizerContextProvider;
},
scrollToItemDynamic: function() {
return _ImperativeScrolling.scrollToItemDynamic;
},
scrollToItemStatic: function() {
return _ImperativeScrolling.scrollToItemStatic;
},
useVirtualizerContextState_unstable: function() {
return _VirtualizerContext.useVirtualizerContextState_unstable;
},
useVirtualizerContext_unstable: function() {
return _VirtualizerContext.useVirtualizerContext_unstable;
}
});
const _VirtualizerContext = require("./VirtualizerContext");
const _ImperativeScrolling = require("./ImperativeScrolling");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utilities/index.ts"],"sourcesContent":["export type { DynamicVirtualizerContextProps, VirtualizerContextProps } from './VirtualizerContext';\nexport {\n VirtualizerContextProvider,\n useVirtualizerContextState_unstable,\n useVirtualizerContext_unstable,\n} from './VirtualizerContext';\nexport type { ScrollToInterface, ScrollToItemDynamicParams, ScrollToItemStaticParams } from './ImperativeScrolling';\nexport { scrollToItemDynamic, scrollToItemStatic } from './ImperativeScrolling';\n"],"names":["VirtualizerContextProvider","useVirtualizerContextState_unstable","useVirtualizerContext_unstable","scrollToItemDynamic","scrollToItemStatic"],"mappings":";;;;;;;;;;;;eAEEA,8CAA0B;;;eAKnBG,wCAAmB;;;eAAEC,uCAAkB;;;eAJ9CH,uDAAmC;;;eACnCC,kDAA8B;;;oCACzB,uBAAuB;qCAE0B,wBAAwB"}