@fluentui/react-virtualizer 9.0.0-alpha.111 → 9.0.0-alpha.113
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -2
- package/lib/components/Virtualizer/Virtualizer.js +0 -1
- package/lib/components/Virtualizer/Virtualizer.js.map +1 -1
- package/lib/components/Virtualizer/Virtualizer.types.js +3 -1
- package/lib/components/Virtualizer/Virtualizer.types.js.map +1 -1
- package/lib/components/Virtualizer/useVirtualizer.js +10 -2
- package/lib/components/Virtualizer/useVirtualizer.js.map +1 -1
- package/lib/components/Virtualizer/useVirtualizerStyles.styles.js +8 -0
- package/lib/components/Virtualizer/useVirtualizerStyles.styles.js.map +1 -1
- package/lib/components/Virtualizer/useVirtualizerStyles.styles.raw.js +8 -0
- package/lib/components/Virtualizer/useVirtualizerStyles.styles.raw.js.map +1 -1
- package/lib/components/VirtualizerScrollView/VirtualizerScrollView.js +0 -1
- package/lib/components/VirtualizerScrollView/VirtualizerScrollView.js.map +1 -1
- package/lib/components/VirtualizerScrollView/VirtualizerScrollView.types.js +3 -1
- package/lib/components/VirtualizerScrollView/VirtualizerScrollView.types.js.map +1 -1
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js +2 -0
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js.map +1 -1
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js +1 -0
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js.map +1 -1
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.raw.js +1 -0
- package/lib/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.raw.js.map +1 -1
- package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js +0 -1
- package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js.map +1 -1
- package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js +1 -1
- package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js.map +1 -1
- package/lib/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js.map +1 -1
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js +7 -1
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map +1 -1
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js +1 -0
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js.map +1 -1
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.raw.js +1 -0
- package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.raw.js.map +1 -1
- package/lib/hooks/hooks.types.js +5 -1
- package/lib/hooks/hooks.types.js.map +1 -1
- package/lib/hooks/useDynamicPagination.js +3 -1
- package/lib/hooks/useDynamicPagination.js.map +1 -1
- package/lib/hooks/useDynamicVirtualizerMeasure.js +2 -4
- package/lib/hooks/useDynamicVirtualizerMeasure.js.map +1 -1
- package/lib/hooks/useIntersectionObserver.js +2 -0
- package/lib/hooks/useIntersectionObserver.js.map +1 -1
- package/lib/hooks/useMeasureList.js +1 -0
- package/lib/hooks/useMeasureList.js.map +1 -1
- package/lib/hooks/useMutationObserver.js +1 -0
- package/lib/hooks/useMutationObserver.js.map +1 -1
- package/lib/hooks/useResizeObserverRef.js +2 -0
- package/lib/hooks/useResizeObserverRef.js.map +1 -1
- package/lib/hooks/useStaticPagination.js +3 -1
- package/lib/hooks/useStaticPagination.js.map +1 -1
- package/lib/hooks/useVirtualizerMeasure.js +1 -2
- package/lib/hooks/useVirtualizerMeasure.js.map +1 -1
- package/lib/utilities/ImperativeScrolling/imperativeScrolling.js.map +1 -1
- package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js +1 -1
- package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js.map +1 -1
- package/lib/utilities/ImperativeScrolling/imperativeScrollingDynamic.js.map +1 -1
- package/lib/utilities/VirtualizerContext/types.js +4 -1
- package/lib/utilities/VirtualizerContext/types.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/Virtualizer.js +0 -2
- package/lib-commonjs/components/Virtualizer/Virtualizer.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/Virtualizer.types.js +3 -3
- package/lib-commonjs/components/Virtualizer/Virtualizer.types.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/useVirtualizer.js +10 -2
- package/lib-commonjs/components/Virtualizer/useVirtualizer.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.styles.js +8 -0
- package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.styles.raw.js +8 -0
- package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.js +0 -2
- package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.types.js +3 -3
- package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.types.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js +2 -0
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js +1 -0
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js +0 -2
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js +0 -2
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js +5 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js +1 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js.map +1 -1
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/hooks/hooks.types.js +5 -3
- package/lib-commonjs/hooks/hooks.types.js.map +1 -1
- package/lib-commonjs/hooks/useDynamicPagination.js +3 -1
- package/lib-commonjs/hooks/useDynamicPagination.js.map +1 -1
- package/lib-commonjs/hooks/useDynamicVirtualizerMeasure.js.map +1 -1
- package/lib-commonjs/hooks/useIntersectionObserver.js +2 -0
- package/lib-commonjs/hooks/useIntersectionObserver.js.map +1 -1
- package/lib-commonjs/hooks/useMeasureList.js +1 -0
- package/lib-commonjs/hooks/useMeasureList.js.map +1 -1
- package/lib-commonjs/hooks/useMutationObserver.js +1 -0
- package/lib-commonjs/hooks/useMutationObserver.js.map +1 -1
- package/lib-commonjs/hooks/useResizeObserverRef.js +2 -0
- package/lib-commonjs/hooks/useResizeObserverRef.js.map +1 -1
- package/lib-commonjs/hooks/useStaticPagination.js +3 -1
- package/lib-commonjs/hooks/useStaticPagination.js.map +1 -1
- package/lib-commonjs/hooks/useVirtualizerMeasure.js.map +1 -1
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.js.map +1 -1
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.types.js +0 -2
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.types.js.map +1 -1
- package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrollingDynamic.js.map +1 -1
- package/lib-commonjs/utilities/VirtualizerContext/types.js +4 -3
- package/lib-commonjs/utilities/VirtualizerContext/types.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useMeasureList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport interface IndexedResizeCallbackElement {\n handleResize: () => void;\n}\n/**\n * Provides a way of automating size in the virtualizer\n * Returns\n * `width` - element width ref (0 by default),\n * `height` - element height ref (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport function useMeasureList<\n TElement extends HTMLElement & IndexedResizeCallbackElement = HTMLElement & IndexedResizeCallbackElement,\n>(\n currentIndex: number,\n refLength: number,\n totalLength: number,\n defaultItemSize: number,\n): {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n widthArray: React.MutableRefObject<number[]>;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n heightArray: React.MutableRefObject<number[]>;\n createIndexedRef: (index: number) => (el: TElement | null) => void;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n refArray: React.MutableRefObject<Array<TElement | undefined | null>>;\n sizeUpdateCount: number;\n} {\n const widthArray = React.useRef(new Array(totalLength).fill(defaultItemSize));\n const heightArray = React.useRef(new Array(totalLength).fill(defaultItemSize));\n\n const refArray = React.useRef<Array<TElement | undefined | null>>([]);\n const { targetDocument } = useFluent();\n\n // This lets us trigger updates when a size change occurs.\n const sizeUpdateCount = React.useRef(0);\n\n // the handler for resize observer\n const handleIndexUpdate = React.useCallback(\n (index: number) => {\n let isChanged = false;\n const boundClientRect = refArray.current[index]?.getBoundingClientRect();\n const containerWidth = boundClientRect?.width;\n if (containerWidth !== widthArray.current[currentIndex + index]) {\n isChanged = true;\n }\n widthArray.current[currentIndex + index] = containerWidth || defaultItemSize;\n\n const containerHeight = boundClientRect?.height;\n\n if (containerHeight !== heightArray.current[currentIndex + index]) {\n isChanged = true;\n }\n heightArray.current[currentIndex + index] = containerHeight || defaultItemSize;\n\n if (isChanged) {\n sizeUpdateCount.current = sizeUpdateCount.current + 1;\n }\n },\n [currentIndex, defaultItemSize, sizeUpdateCount],\n );\n\n const handleElementResizeCallback = (entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const target = entry.target as TElement;\n // Call the elements own resize handler (indexed)\n target.handleResize();\n }\n };\n\n React.useEffect(() => {\n const newHeightLength = totalLength - heightArray.current.length;\n const newWidthLength = totalLength - widthArray.current.length;\n /* Ensure we grow or truncate arrays with prior properties,\n keeping the existing values is important for whitespace assumptions.\n Even if items in the 'middle' are deleted, we will recalc the whitespace as it is explored.*/\n if (newWidthLength > 0) {\n widthArray.current = widthArray.current.concat(new Array(newWidthLength).fill(defaultItemSize));\n } else if (newWidthLength < 0) {\n widthArray.current = widthArray.current.slice(0, totalLength);\n }\n if (newHeightLength > 0) {\n heightArray.current = heightArray.current.concat(new Array(newHeightLength).fill(defaultItemSize));\n } else if (newHeightLength < 0) {\n heightArray.current = heightArray.current.slice(0, totalLength);\n }\n }, [defaultItemSize, totalLength]);\n\n // Keep the reference of ResizeObserver as a ref, as it should live through renders\n const resizeObserver = React.useRef(createResizeObserverFromDocument(targetDocument, handleElementResizeCallback));\n\n /* createIndexedRef provides a dynamic function to create an undefined number of refs at render time\n * these refs then provide an indexed callback via attaching 'handleResize' to the element itself\n * this function is then called on resize by handleElementResize and relies on indexing\n * to track continuous sizes throughout renders while releasing all virtualized element refs each render cycle.\n */\n const createIndexedRef = React.useCallback(\n (index: number) => {\n const measureElementRef = (el: TElement | null) => {\n if (!targetDocument || !resizeObserver.current) {\n return;\n }\n\n if (el) {\n el.handleResize = () => {\n handleIndexUpdate(index);\n };\n }\n\n // cleanup previous container\n if (refArray.current[index] !== undefined && refArray.current[index] !== null) {\n resizeObserver.current.unobserve(refArray.current[index]!);\n }\n\n refArray.current[index] = undefined;\n if (el) {\n refArray.current[index] = el;\n resizeObserver.current.observe(el);\n handleIndexUpdate(index);\n }\n };\n\n return measureElementRef;\n },\n [handleIndexUpdate, resizeObserver, targetDocument],\n );\n\n React.useEffect(() => {\n const _resizeObserver = resizeObserver;\n return () => _resizeObserver.current?.disconnect();\n }, [resizeObserver]);\n\n return { widthArray, heightArray, createIndexedRef, refArray, sizeUpdateCount: sizeUpdateCount.current };\n}\n\n/**\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":["React","useFluent_unstable","useFluent","useMeasureList","currentIndex","refLength","totalLength","defaultItemSize","widthArray","useRef","Array","fill","heightArray","refArray","targetDocument","sizeUpdateCount","handleIndexUpdate","useCallback","index","isChanged","boundClientRect","current","getBoundingClientRect","containerWidth","width","containerHeight","height","handleElementResizeCallback","entries","entry","target","handleResize","useEffect","newHeightLength","length","newWidthLength","concat","slice","resizeObserver","createResizeObserverFromDocument","createIndexedRef","measureElementRef","el","undefined","unobserve","observe","_resizeObserver","disconnect","callback","defaultView","ResizeObserver"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useMeasureList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport interface IndexedResizeCallbackElement {\n handleResize: () => void;\n}\n/**\n * Provides a way of automating size in the virtualizer\n * Returns\n * `width` - element width ref (0 by default),\n * `height` - element height ref (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport function useMeasureList<\n TElement extends HTMLElement & IndexedResizeCallbackElement = HTMLElement & IndexedResizeCallbackElement,\n>(\n currentIndex: number,\n refLength: number,\n totalLength: number,\n defaultItemSize: number,\n): {\n widthArray: React.MutableRefObject<number[]>;\n\n heightArray: React.MutableRefObject<number[]>;\n createIndexedRef: (index: number) => (el: TElement | null) => void;\n\n refArray: React.MutableRefObject<Array<TElement | undefined | null>>;\n sizeUpdateCount: number;\n} {\n const widthArray = React.useRef(new Array(totalLength).fill(defaultItemSize));\n const heightArray = React.useRef(new Array(totalLength).fill(defaultItemSize));\n\n const refArray = React.useRef<Array<TElement | undefined | null>>([]);\n const { targetDocument } = useFluent();\n\n // This lets us trigger updates when a size change occurs.\n const sizeUpdateCount = React.useRef(0);\n\n // the handler for resize observer\n const handleIndexUpdate = React.useCallback(\n (index: number) => {\n let isChanged = false;\n const boundClientRect = refArray.current[index]?.getBoundingClientRect();\n const containerWidth = boundClientRect?.width;\n if (containerWidth !== widthArray.current[currentIndex + index]) {\n isChanged = true;\n }\n widthArray.current[currentIndex + index] = containerWidth || defaultItemSize;\n\n const containerHeight = boundClientRect?.height;\n\n if (containerHeight !== heightArray.current[currentIndex + index]) {\n isChanged = true;\n }\n heightArray.current[currentIndex + index] = containerHeight || defaultItemSize;\n\n if (isChanged) {\n sizeUpdateCount.current = sizeUpdateCount.current + 1;\n }\n },\n [currentIndex, defaultItemSize, sizeUpdateCount],\n );\n\n const handleElementResizeCallback = (entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const target = entry.target as TElement;\n // Call the elements own resize handler (indexed)\n target.handleResize();\n }\n };\n\n React.useEffect(() => {\n const newHeightLength = totalLength - heightArray.current.length;\n const newWidthLength = totalLength - widthArray.current.length;\n /* Ensure we grow or truncate arrays with prior properties,\n keeping the existing values is important for whitespace assumptions.\n Even if items in the 'middle' are deleted, we will recalc the whitespace as it is explored.*/\n if (newWidthLength > 0) {\n widthArray.current = widthArray.current.concat(new Array(newWidthLength).fill(defaultItemSize));\n } else if (newWidthLength < 0) {\n widthArray.current = widthArray.current.slice(0, totalLength);\n }\n if (newHeightLength > 0) {\n heightArray.current = heightArray.current.concat(new Array(newHeightLength).fill(defaultItemSize));\n } else if (newHeightLength < 0) {\n heightArray.current = heightArray.current.slice(0, totalLength);\n }\n }, [defaultItemSize, totalLength]);\n\n // Keep the reference of ResizeObserver as a ref, as it should live through renders\n const resizeObserver = React.useRef(createResizeObserverFromDocument(targetDocument, handleElementResizeCallback));\n\n /* createIndexedRef provides a dynamic function to create an undefined number of refs at render time\n * these refs then provide an indexed callback via attaching 'handleResize' to the element itself\n * this function is then called on resize by handleElementResize and relies on indexing\n * to track continuous sizes throughout renders while releasing all virtualized element refs each render cycle.\n */\n const createIndexedRef = React.useCallback(\n (index: number) => {\n const measureElementRef = (el: TElement | null) => {\n if (!targetDocument || !resizeObserver.current) {\n return;\n }\n\n if (el) {\n el.handleResize = () => {\n handleIndexUpdate(index);\n };\n }\n\n // cleanup previous container\n if (refArray.current[index] !== undefined && refArray.current[index] !== null) {\n resizeObserver.current.unobserve(refArray.current[index]!);\n }\n\n refArray.current[index] = undefined;\n if (el) {\n refArray.current[index] = el;\n resizeObserver.current.observe(el);\n handleIndexUpdate(index);\n }\n };\n\n return measureElementRef;\n },\n [handleIndexUpdate, resizeObserver, targetDocument],\n );\n\n React.useEffect(() => {\n const _resizeObserver = resizeObserver;\n return () => _resizeObserver.current?.disconnect();\n }, [resizeObserver]);\n\n // eslint-disable-next-line react-hooks/refs -- deprecated package, not worth refactoring\n return { widthArray, heightArray, createIndexedRef, refArray, sizeUpdateCount: sizeUpdateCount.current };\n}\n\n/**\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":["React","useFluent_unstable","useFluent","useMeasureList","currentIndex","refLength","totalLength","defaultItemSize","widthArray","useRef","Array","fill","heightArray","refArray","targetDocument","sizeUpdateCount","handleIndexUpdate","useCallback","index","isChanged","boundClientRect","current","getBoundingClientRect","containerWidth","width","containerHeight","height","handleElementResizeCallback","entries","entry","target","handleResize","useEffect","newHeightLength","length","newWidthLength","concat","slice","resizeObserver","createResizeObserverFromDocument","createIndexedRef","measureElementRef","el","undefined","unobserve","observe","_resizeObserver","disconnect","callback","defaultView","ResizeObserver"],"mappings":"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"}
|
|
@@ -15,6 +15,7 @@ const { useRef, useEffect } = React;
|
|
|
15
15
|
return;
|
|
16
16
|
}
|
|
17
17
|
// Create an observer instance linked to the callback function
|
|
18
|
+
// eslint-disable-next-line react-hooks/immutability -- deprecated package, not worth refactoring
|
|
18
19
|
observer.current = new win.MutationObserver(callback);
|
|
19
20
|
}, [
|
|
20
21
|
callback,
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 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 // eslint-disable-next-line react-hooks/immutability -- deprecated package, not worth refactoring\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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGJ;AAE9B;;CAEC,GACD,OAAO,MAAMK,sBAAsB,CACjCC,QACAC,UACAC;IAIA;IAEA,8FAA8F;IAE9F,MAAMC,WAAWN,OAAqCO;IACtD,MAAM,EAAEC,cAAc,EAAE,GAAGT;IAC3B,MAAMU,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvCT,UAAU;QACR,IAAI,CAACQ,KAAK;YACR;QACF;QACA,8DAA8D;QAC9D,iGAAiG;QACjGH,SAASK,OAAO,GAAG,IAAIF,IAAIG,gBAAgB,CAACR;IAC9C,GAAG;QAACA;QAAUK;KAAI;IAElBR,UAAU;QACR,IAAIE,QAAQ;gBACV,2DAA2D;YAC3DG;aAAAA,oBAAAA,SAASK,OAAO,cAAhBL,wCAAAA,kBAAkBO,OAAO,CAACV,QAAQE;QACpC;QAEA,OAAO;gBACLC;aAAAA,oBAAAA,SAASK,OAAO,cAAhBL,wCAAAA,kBAAkBQ,UAAU;QAC9B;IACF,GAAG;QAACX;QAAQE;KAAQ;IAEpB,OAAO;QAAEC;IAAS;AACpB,EAAE"}
|
|
@@ -14,6 +14,7 @@ import { createResizeObserverFromDocument } from '../utilities/createResizeObser
|
|
|
14
14
|
const containerWidthRef = React.useRef(0);
|
|
15
15
|
// the handler for resize observer
|
|
16
16
|
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
|
|
17
|
+
// eslint-disable-next-line react-hooks/refs -- deprecated package, not worth refactoring
|
|
17
18
|
const handleResize = debounce((entries, observer)=>{
|
|
18
19
|
var _container_current, _container_current1;
|
|
19
20
|
const containerHeight = (_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.clientHeight;
|
|
@@ -31,6 +32,7 @@ import { createResizeObserverFromDocument } from '../utilities/createResizeObser
|
|
|
31
32
|
// Update our state when resizeCallback changes
|
|
32
33
|
container.current = null;
|
|
33
34
|
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
35
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- deprecated package, not worth refactoring
|
|
34
36
|
setResizeObserver(()=>createResizeObserverFromDocument(targetDocument, handleResize));
|
|
35
37
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
36
38
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useResizeObserverRef.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { debounce } from '../utilities/debounce';\nimport { createResizeObserverFromDocument } from '../utilities/createResizeObserverFromDocument';\nimport { ResizeCallbackWithRef } from './hooks.types';\n\n/**\n * useResizeObserverRef_unstable simplifies resize observer connection and ensures debounce/cleanup\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useResizeObserverRef_unstable = (\n resizeCallback: ResizeCallbackWithRef,\n): ((instance: HTMLElement | HTMLDivElement | null) => void) => {\n 'use no memo';\n\n const { targetDocument } = useFluent();\n const container = React.useRef<HTMLElement | null>(null);\n const containerHeightRef = React.useRef<number>(0);\n const containerWidthRef = React.useRef<number>(0);\n // the handler for resize observer\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n const handleResize = debounce((entries: ResizeObserverEntry[], observer: ResizeObserver) => {\n const containerHeight = container.current?.clientHeight;\n const containerWidth = container.current?.clientWidth;\n // Our resize observer will fire on scroll resize, let index change handle that instead.\n if (containerHeightRef.current !== containerHeight || containerWidth !== containerWidthRef.current) {\n containerWidthRef.current = containerWidth ?? 0;\n containerHeightRef.current = containerHeight ?? 0;\n resizeCallback(entries, observer, container);\n }\n });\n\n // Keep the reference of ResizeObserver in the state, as it should live through renders\n const [resizeObserver, setResizeObserver] = React.useState(() =>\n createResizeObserverFromDocument(targetDocument, handleResize),\n );\n\n React.useEffect(() => {\n // Update our state when resizeCallback changes\n container.current = null;\n resizeObserver?.disconnect();\n setResizeObserver(() => createResizeObserverFromDocument(targetDocument, handleResize));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [resizeCallback, targetDocument]);\n\n React.useEffect(() => {\n return () => {\n container.current = null;\n resizeObserver?.disconnect();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const scrollRef = React.useCallback(\n (instance: HTMLElement | HTMLDivElement | null) => {\n if (container.current !== instance) {\n if (container.current) {\n resizeObserver?.unobserve(container.current);\n }\n\n container.current = instance;\n if (container.current) {\n resizeObserver?.observe(container.current);\n }\n }\n },\n [resizeObserver],\n );\n\n return scrollRef;\n};\n"],"names":["React","useFluent_unstable","useFluent","debounce","createResizeObserverFromDocument","useResizeObserverRef_unstable","resizeCallback","targetDocument","container","useRef","containerHeightRef","containerWidthRef","handleResize","entries","observer","containerHeight","current","clientHeight","containerWidth","clientWidth","resizeObserver","setResizeObserver","useState","useEffect","disconnect","scrollRef","useCallback","instance","unobserve","observe"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,gCAAgC,QAAQ,gDAAgD;AAGjG;;;CAGC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC;IAEA;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGL;IAC3B,MAAMM,YAAYR,MAAMS,MAAM,CAAqB;IACnD,MAAMC,qBAAqBV,MAAMS,MAAM,CAAS;IAChD,MAAME,oBAAoBX,MAAMS,MAAM,CAAS;IAC/C,kCAAkC;IAClC,8FAA8F;IAE9F,MAAMG,eAAeT,SAAS,CAACU,SAAgCC;YACrCN,oBACDA;QADvB,MAAMO,mBAAkBP,qBAAAA,UAAUQ,OAAO,cAAjBR,yCAAAA,mBAAmBS,YAAY;QACvD,MAAMC,kBAAiBV,sBAAAA,UAAUQ,OAAO,cAAjBR,0CAAAA,oBAAmBW,WAAW;QACrD,wFAAwF;QACxF,IAAIT,mBAAmBM,OAAO,KAAKD,mBAAmBG,mBAAmBP,kBAAkBK,OAAO,EAAE;YAClGL,kBAAkBK,OAAO,GAAGE,2BAAAA,4BAAAA,iBAAkB;YAC9CR,mBAAmBM,OAAO,GAAGD,4BAAAA,6BAAAA,kBAAmB;YAChDT,eAAeO,SAASC,UAAUN;QACpC;IACF;IAEA,uFAAuF;IACvF,MAAM,CAACY,gBAAgBC,kBAAkB,GAAGrB,MAAMsB,QAAQ,CAAC,IACzDlB,iCAAiCG,gBAAgBK;IAGnDZ,MAAMuB,SAAS,CAAC;QACd,+CAA+C;QAC/Cf,UAAUQ,OAAO,GAAG;QACpBI,2BAAAA,qCAAAA,eAAgBI,UAAU;
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useResizeObserverRef.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { debounce } from '../utilities/debounce';\nimport { createResizeObserverFromDocument } from '../utilities/createResizeObserverFromDocument';\nimport type { ResizeCallbackWithRef } from './hooks.types';\n\n/**\n * useResizeObserverRef_unstable simplifies resize observer connection and ensures debounce/cleanup\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useResizeObserverRef_unstable = (\n resizeCallback: ResizeCallbackWithRef,\n): ((instance: HTMLElement | HTMLDivElement | null) => void) => {\n 'use no memo';\n\n const { targetDocument } = useFluent();\n const container = React.useRef<HTMLElement | null>(null);\n const containerHeightRef = React.useRef<number>(0);\n const containerWidthRef = React.useRef<number>(0);\n // the handler for resize observer\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n // eslint-disable-next-line react-hooks/refs -- deprecated package, not worth refactoring\n const handleResize = debounce((entries: ResizeObserverEntry[], observer: ResizeObserver) => {\n const containerHeight = container.current?.clientHeight;\n const containerWidth = container.current?.clientWidth;\n // Our resize observer will fire on scroll resize, let index change handle that instead.\n if (containerHeightRef.current !== containerHeight || containerWidth !== containerWidthRef.current) {\n containerWidthRef.current = containerWidth ?? 0;\n containerHeightRef.current = containerHeight ?? 0;\n resizeCallback(entries, observer, container);\n }\n });\n\n // Keep the reference of ResizeObserver in the state, as it should live through renders\n const [resizeObserver, setResizeObserver] = React.useState(() =>\n createResizeObserverFromDocument(targetDocument, handleResize),\n );\n\n React.useEffect(() => {\n // Update our state when resizeCallback changes\n container.current = null;\n resizeObserver?.disconnect();\n // eslint-disable-next-line react-hooks/set-state-in-effect -- deprecated package, not worth refactoring\n setResizeObserver(() => createResizeObserverFromDocument(targetDocument, handleResize));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [resizeCallback, targetDocument]);\n\n React.useEffect(() => {\n return () => {\n container.current = null;\n resizeObserver?.disconnect();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const scrollRef = React.useCallback(\n (instance: HTMLElement | HTMLDivElement | null) => {\n if (container.current !== instance) {\n if (container.current) {\n resizeObserver?.unobserve(container.current);\n }\n\n container.current = instance;\n if (container.current) {\n resizeObserver?.observe(container.current);\n }\n }\n },\n [resizeObserver],\n );\n\n return scrollRef;\n};\n"],"names":["React","useFluent_unstable","useFluent","debounce","createResizeObserverFromDocument","useResizeObserverRef_unstable","resizeCallback","targetDocument","container","useRef","containerHeightRef","containerWidthRef","handleResize","entries","observer","containerHeight","current","clientHeight","containerWidth","clientWidth","resizeObserver","setResizeObserver","useState","useEffect","disconnect","scrollRef","useCallback","instance","unobserve","observe"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,gCAAgC,QAAQ,gDAAgD;AAGjG;;;CAGC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC;IAEA;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGL;IAC3B,MAAMM,YAAYR,MAAMS,MAAM,CAAqB;IACnD,MAAMC,qBAAqBV,MAAMS,MAAM,CAAS;IAChD,MAAME,oBAAoBX,MAAMS,MAAM,CAAS;IAC/C,kCAAkC;IAClC,8FAA8F;IAE9F,yFAAyF;IACzF,MAAMG,eAAeT,SAAS,CAACU,SAAgCC;YACrCN,oBACDA;QADvB,MAAMO,mBAAkBP,qBAAAA,UAAUQ,OAAO,cAAjBR,yCAAAA,mBAAmBS,YAAY;QACvD,MAAMC,kBAAiBV,sBAAAA,UAAUQ,OAAO,cAAjBR,0CAAAA,oBAAmBW,WAAW;QACrD,wFAAwF;QACxF,IAAIT,mBAAmBM,OAAO,KAAKD,mBAAmBG,mBAAmBP,kBAAkBK,OAAO,EAAE;YAClGL,kBAAkBK,OAAO,GAAGE,2BAAAA,4BAAAA,iBAAkB;YAC9CR,mBAAmBM,OAAO,GAAGD,4BAAAA,6BAAAA,kBAAmB;YAChDT,eAAeO,SAASC,UAAUN;QACpC;IACF;IAEA,uFAAuF;IACvF,MAAM,CAACY,gBAAgBC,kBAAkB,GAAGrB,MAAMsB,QAAQ,CAAC,IACzDlB,iCAAiCG,gBAAgBK;IAGnDZ,MAAMuB,SAAS,CAAC;QACd,+CAA+C;QAC/Cf,UAAUQ,OAAO,GAAG;QACpBI,2BAAAA,qCAAAA,eAAgBI,UAAU;QAC1B,wGAAwG;QACxGH,kBAAkB,IAAMjB,iCAAiCG,gBAAgBK;IACzE,uDAAuD;IACzD,GAAG;QAACN;QAAgBC;KAAe;IAEnCP,MAAMuB,SAAS,CAAC;QACd,OAAO;YACLf,UAAUQ,OAAO,GAAG;YACpBI,2BAAAA,qCAAAA,eAAgBI,UAAU;QAC5B;IACA,uDAAuD;IACzD,GAAG,EAAE;IAEL,MAAMC,YAAYzB,MAAM0B,WAAW,CACjC,CAACC;QACC,IAAInB,UAAUQ,OAAO,KAAKW,UAAU;YAClC,IAAInB,UAAUQ,OAAO,EAAE;gBACrBI,2BAAAA,qCAAAA,eAAgBQ,SAAS,CAACpB,UAAUQ,OAAO;YAC7C;YAEAR,UAAUQ,OAAO,GAAGW;YACpB,IAAInB,UAAUQ,OAAO,EAAE;gBACrBI,2BAAAA,qCAAAA,eAAgBS,OAAO,CAACrB,UAAUQ,OAAO;YAC3C;QACF;IACF,GACA;QAACI;KAAe;IAGlB,OAAOK;AACT,EAAE"}
|
|
@@ -16,6 +16,7 @@ import { useTimeout } from '@fluentui/react-utilities';
|
|
|
16
16
|
const scrollContainer = React.useRef(null);
|
|
17
17
|
const clearListeners = ()=>{
|
|
18
18
|
if (scrollContainer.current) {
|
|
19
|
+
// eslint-disable-next-line react-hooks/immutability -- deprecated package, not worth refactoring
|
|
19
20
|
scrollContainer.current.removeEventListener('scroll', onScroll);
|
|
20
21
|
scrollContainer.current = null;
|
|
21
22
|
clearScrollTimer();
|
|
@@ -70,7 +71,8 @@ import { useTimeout } from '@fluentui/react-utilities';
|
|
|
70
71
|
]);
|
|
71
72
|
/**
|
|
72
73
|
* On scroll timer that will continuously delay callback until scrolling stops
|
|
73
|
-
*/
|
|
74
|
+
*/ // eslint-disable-next-line react-hooks/preserve-manual-memoization -- deprecated package, not worth refactoring
|
|
75
|
+
const onScroll = React.useCallback(()=>{
|
|
74
76
|
clearScrollTimer();
|
|
75
77
|
setScrollTimer(onScrollEnd, 100);
|
|
76
78
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useStaticPagination.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { VirtualizerStaticPaginationProps } from './hooks.types';\nimport { useTimeout } from '@fluentui/react-utilities';\n\n/**\n * Optional hook that will enable pagination on the virtualizer so that it 'autoscrolls' to an items exact position\n * Sizes are uniform/static, we round to the nearest item on long scrolls\n * On short scrolls, we will go at minimum to the next/previous item so that arrow pagination works\n * All VirtualizerStaticPaginationProps can be grabbed from Virtualizer hooks externally and passed in/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useStaticVirtualizerPagination = (\n virtualizerProps: VirtualizerStaticPaginationProps,\n paginationEnabled: Boolean = true,\n): ((instance: HTMLElement | HTMLDivElement | null) => void) => {\n 'use no memo';\n\n const { itemSize, axis = 'vertical' } = virtualizerProps;\n\n const [setScrollTimer, clearScrollTimer] = useTimeout();\n const lastScrollPos = React.useRef<number>(0);\n const lastIndexScrolled = React.useRef<number>(0);\n\n const scrollContainer = React.useRef<HTMLElement | null>(null);\n\n const clearListeners = () => {\n if (scrollContainer.current) {\n scrollContainer.current.removeEventListener('scroll', onScroll);\n\n scrollContainer.current = null;\n clearScrollTimer();\n }\n };\n\n React.useEffect(() => {\n return () => {\n clearListeners();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n /**\n * Handle scroll stop event and paginate to the closest item\n * If the closest item is the same as the previous scroll end\n * we paginate to the next/previous one based on direction\n */\n const onScrollEnd = React.useCallback(() => {\n if (!scrollContainer.current || !paginationEnabled) {\n // No container found\n return;\n }\n\n const currentScrollPos = Math.round(\n axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft,\n );\n const closestItem = Math.round(currentScrollPos / itemSize);\n\n let nextItem = 0;\n if (Math.round(closestItem - lastIndexScrolled.current) === 0) {\n // Special case for go to next/previous with minimum amount of scroll needed\n const nextTarget = lastScrollPos.current < currentScrollPos ? 1 : -1;\n const isSecondaryScroll = lastScrollPos.current === currentScrollPos;\n const posMod = isSecondaryScroll ? 0 : nextTarget;\n\n nextItem = closestItem + posMod;\n } else {\n // Pagination for anything else can just jump to the closest!\n nextItem = closestItem;\n }\n\n const nextItemPos = nextItem * itemSize;\n\n if (axis === 'vertical') {\n scrollContainer.current.scrollTo({ top: nextItemPos, behavior: 'smooth' });\n } else {\n scrollContainer.current.scrollTo({ left: nextItemPos, behavior: 'smooth' });\n }\n lastScrollPos.current = nextItemPos;\n lastIndexScrolled.current = nextItem;\n }, [paginationEnabled, axis, itemSize]);\n\n /**\n * On scroll timer that will continuously delay callback until scrolling stops\n */\n const onScroll = React.useCallback(() => {\n clearScrollTimer();\n setScrollTimer(onScrollEnd, 100);\n }, [onScrollEnd, clearScrollTimer, setScrollTimer]);\n\n /**\n * Pagination ref will ensure we attach listeners to containers on change\n * It is returned from hook and merged into the scroll container externally\n */\n const paginationRef = React.useCallback(\n (instance: HTMLElement | HTMLDivElement | null) => {\n if (!paginationEnabled) {\n clearListeners();\n scrollContainer.current = null;\n return;\n }\n if (scrollContainer.current !== instance) {\n clearListeners();\n\n scrollContainer.current = instance;\n if (scrollContainer.current) {\n scrollContainer.current.addEventListener('scroll', onScroll);\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [onScroll, onScrollEnd, paginationEnabled],\n );\n\n return paginationRef;\n};\n"],"names":["React","useTimeout","useStaticVirtualizerPagination","virtualizerProps","paginationEnabled","itemSize","axis","setScrollTimer","clearScrollTimer","lastScrollPos","useRef","lastIndexScrolled","scrollContainer","clearListeners","current","removeEventListener","onScroll","useEffect","onScrollEnd","useCallback","currentScrollPos","Math","round","scrollTop","scrollLeft","closestItem","nextItem","nextTarget","isSecondaryScroll","posMod","nextItemPos","scrollTo","top","behavior","left","paginationRef","instance","addEventListener"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,UAAU,QAAQ,4BAA4B;AAEvD;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,kBACAC,oBAA6B,IAAI;IAEjC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,UAAU,EAAE,GAAGH;IAExC,MAAM,CAACI,gBAAgBC,iBAAiB,GAAGP;IAC3C,MAAMQ,gBAAgBT,MAAMU,MAAM,CAAS;IAC3C,MAAMC,oBAAoBX,MAAMU,MAAM,CAAS;IAE/C,MAAME,kBAAkBZ,MAAMU,MAAM,CAAqB;IAEzD,MAAMG,iBAAiB;QACrB,IAAID,gBAAgBE,OAAO,EAAE;
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useStaticPagination.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { VirtualizerStaticPaginationProps } from './hooks.types';\nimport { useTimeout } from '@fluentui/react-utilities';\n\n/**\n * Optional hook that will enable pagination on the virtualizer so that it 'autoscrolls' to an items exact position\n * Sizes are uniform/static, we round to the nearest item on long scrolls\n * On short scrolls, we will go at minimum to the next/previous item so that arrow pagination works\n * All VirtualizerStaticPaginationProps can be grabbed from Virtualizer hooks externally and passed in/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useStaticVirtualizerPagination = (\n virtualizerProps: VirtualizerStaticPaginationProps,\n paginationEnabled: Boolean = true,\n): ((instance: HTMLElement | HTMLDivElement | null) => void) => {\n 'use no memo';\n\n const { itemSize, axis = 'vertical' } = virtualizerProps;\n\n const [setScrollTimer, clearScrollTimer] = useTimeout();\n const lastScrollPos = React.useRef<number>(0);\n const lastIndexScrolled = React.useRef<number>(0);\n\n const scrollContainer = React.useRef<HTMLElement | null>(null);\n\n const clearListeners = () => {\n if (scrollContainer.current) {\n // eslint-disable-next-line react-hooks/immutability -- deprecated package, not worth refactoring\n scrollContainer.current.removeEventListener('scroll', onScroll);\n\n scrollContainer.current = null;\n clearScrollTimer();\n }\n };\n\n React.useEffect(() => {\n return () => {\n clearListeners();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n /**\n * Handle scroll stop event and paginate to the closest item\n * If the closest item is the same as the previous scroll end\n * we paginate to the next/previous one based on direction\n */\n const onScrollEnd = React.useCallback(() => {\n if (!scrollContainer.current || !paginationEnabled) {\n // No container found\n return;\n }\n\n const currentScrollPos = Math.round(\n axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft,\n );\n const closestItem = Math.round(currentScrollPos / itemSize);\n\n let nextItem = 0;\n if (Math.round(closestItem - lastIndexScrolled.current) === 0) {\n // Special case for go to next/previous with minimum amount of scroll needed\n const nextTarget = lastScrollPos.current < currentScrollPos ? 1 : -1;\n const isSecondaryScroll = lastScrollPos.current === currentScrollPos;\n const posMod = isSecondaryScroll ? 0 : nextTarget;\n\n nextItem = closestItem + posMod;\n } else {\n // Pagination for anything else can just jump to the closest!\n nextItem = closestItem;\n }\n\n const nextItemPos = nextItem * itemSize;\n\n if (axis === 'vertical') {\n scrollContainer.current.scrollTo({ top: nextItemPos, behavior: 'smooth' });\n } else {\n scrollContainer.current.scrollTo({ left: nextItemPos, behavior: 'smooth' });\n }\n lastScrollPos.current = nextItemPos;\n lastIndexScrolled.current = nextItem;\n }, [paginationEnabled, axis, itemSize]);\n\n /**\n * On scroll timer that will continuously delay callback until scrolling stops\n */\n // eslint-disable-next-line react-hooks/preserve-manual-memoization -- deprecated package, not worth refactoring\n const onScroll = React.useCallback(() => {\n clearScrollTimer();\n setScrollTimer(onScrollEnd, 100);\n }, [onScrollEnd, clearScrollTimer, setScrollTimer]);\n\n /**\n * Pagination ref will ensure we attach listeners to containers on change\n * It is returned from hook and merged into the scroll container externally\n */\n const paginationRef = React.useCallback(\n (instance: HTMLElement | HTMLDivElement | null) => {\n if (!paginationEnabled) {\n clearListeners();\n scrollContainer.current = null;\n return;\n }\n if (scrollContainer.current !== instance) {\n clearListeners();\n\n scrollContainer.current = instance;\n if (scrollContainer.current) {\n scrollContainer.current.addEventListener('scroll', onScroll);\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [onScroll, onScrollEnd, paginationEnabled],\n );\n\n return paginationRef;\n};\n"],"names":["React","useTimeout","useStaticVirtualizerPagination","virtualizerProps","paginationEnabled","itemSize","axis","setScrollTimer","clearScrollTimer","lastScrollPos","useRef","lastIndexScrolled","scrollContainer","clearListeners","current","removeEventListener","onScroll","useEffect","onScrollEnd","useCallback","currentScrollPos","Math","round","scrollTop","scrollLeft","closestItem","nextItem","nextTarget","isSecondaryScroll","posMod","nextItemPos","scrollTo","top","behavior","left","paginationRef","instance","addEventListener"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,UAAU,QAAQ,4BAA4B;AAEvD;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,kBACAC,oBAA6B,IAAI;IAEjC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,UAAU,EAAE,GAAGH;IAExC,MAAM,CAACI,gBAAgBC,iBAAiB,GAAGP;IAC3C,MAAMQ,gBAAgBT,MAAMU,MAAM,CAAS;IAC3C,MAAMC,oBAAoBX,MAAMU,MAAM,CAAS;IAE/C,MAAME,kBAAkBZ,MAAMU,MAAM,CAAqB;IAEzD,MAAMG,iBAAiB;QACrB,IAAID,gBAAgBE,OAAO,EAAE;YAC3B,iGAAiG;YACjGF,gBAAgBE,OAAO,CAACC,mBAAmB,CAAC,UAAUC;YAEtDJ,gBAAgBE,OAAO,GAAG;YAC1BN;QACF;IACF;IAEAR,MAAMiB,SAAS,CAAC;QACd,OAAO;YACLJ;QACF;IACA,uDAAuD;IACzD,GAAG,EAAE;IAEL;;;;GAIC,GACD,MAAMK,cAAclB,MAAMmB,WAAW,CAAC;QACpC,IAAI,CAACP,gBAAgBE,OAAO,IAAI,CAACV,mBAAmB;YAClD,qBAAqB;YACrB;QACF;QAEA,MAAMgB,mBAAmBC,KAAKC,KAAK,CACjChB,SAAS,aAAaM,gBAAgBE,OAAO,CAACS,SAAS,GAAGX,gBAAgBE,OAAO,CAACU,UAAU;QAE9F,MAAMC,cAAcJ,KAAKC,KAAK,CAACF,mBAAmBf;QAElD,IAAIqB,WAAW;QACf,IAAIL,KAAKC,KAAK,CAACG,cAAcd,kBAAkBG,OAAO,MAAM,GAAG;YAC7D,4EAA4E;YAC5E,MAAMa,aAAalB,cAAcK,OAAO,GAAGM,mBAAmB,IAAI,CAAC;YACnE,MAAMQ,oBAAoBnB,cAAcK,OAAO,KAAKM;YACpD,MAAMS,SAASD,oBAAoB,IAAID;YAEvCD,WAAWD,cAAcI;QAC3B,OAAO;YACL,6DAA6D;YAC7DH,WAAWD;QACb;QAEA,MAAMK,cAAcJ,WAAWrB;QAE/B,IAAIC,SAAS,YAAY;YACvBM,gBAAgBE,OAAO,CAACiB,QAAQ,CAAC;gBAAEC,KAAKF;gBAAaG,UAAU;YAAS;QAC1E,OAAO;YACLrB,gBAAgBE,OAAO,CAACiB,QAAQ,CAAC;gBAAEG,MAAMJ;gBAAaG,UAAU;YAAS;QAC3E;QACAxB,cAAcK,OAAO,GAAGgB;QACxBnB,kBAAkBG,OAAO,GAAGY;IAC9B,GAAG;QAACtB;QAAmBE;QAAMD;KAAS;IAEtC;;GAEC,GACD,gHAAgH;IAChH,MAAMW,WAAWhB,MAAMmB,WAAW,CAAC;QACjCX;QACAD,eAAeW,aAAa;IAC9B,GAAG;QAACA;QAAaV;QAAkBD;KAAe;IAElD;;;GAGC,GACD,MAAM4B,gBAAgBnC,MAAMmB,WAAW,CACrC,CAACiB;QACC,IAAI,CAAChC,mBAAmB;YACtBS;YACAD,gBAAgBE,OAAO,GAAG;YAC1B;QACF;QACA,IAAIF,gBAAgBE,OAAO,KAAKsB,UAAU;YACxCvB;YAEAD,gBAAgBE,OAAO,GAAGsB;YAC1B,IAAIxB,gBAAgBE,OAAO,EAAE;gBAC3BF,gBAAgBE,OAAO,CAACuB,gBAAgB,CAAC,UAAUrB;YACrD;QACF;IACF,GACA,uDAAuD;IACvD;QAACA;QAAUE;QAAad;KAAkB;IAG5C,OAAO+B;AACT,EAAE"}
|
|
@@ -16,8 +16,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
16
16
|
const { targetDocument } = useFluent();
|
|
17
17
|
const { virtualizerLength, _bufferItems, _bufferSize } = state;
|
|
18
18
|
const resizeCallback = React.useCallback((_entries, // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
|
|
19
|
-
_observer,
|
|
20
|
-
scrollRef)=>{
|
|
19
|
+
_observer, scrollRef)=>{
|
|
21
20
|
if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
|
|
22
21
|
return;
|
|
23
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useVirtualizerMeasure.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { VirtualizerMeasureProps } from './hooks.types';\nimport { useResizeObserverRef_unstable } from './useResizeObserverRef';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * React hook that measures virtualized space based on a static size to ensure optimized virtualization length.\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useStaticVirtualizerMeasure = <TElement extends HTMLElement>(\n virtualizerProps: VirtualizerMeasureProps,\n): {\n virtualizerLength: number;\n bufferItems: number;\n bufferSize: number;\n scrollRef: (instance: TElement | null) => void;\n
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useVirtualizerMeasure.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { VirtualizerMeasureProps } from './hooks.types';\nimport { useResizeObserverRef_unstable } from './useResizeObserverRef';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * React hook that measures virtualized space based on a static size to ensure optimized virtualization length.\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport const useStaticVirtualizerMeasure = <TElement extends HTMLElement>(\n virtualizerProps: VirtualizerMeasureProps,\n): {\n virtualizerLength: number;\n bufferItems: number;\n bufferSize: number;\n scrollRef: (instance: TElement | null) => void;\n\n containerSizeRef: React.MutableRefObject<number>;\n} => {\n const { defaultItemSize, direction = 'vertical', bufferItems, bufferSize } = virtualizerProps;\n\n const [state, setState] = React.useState({\n virtualizerLength: 0,\n _bufferSize: 0,\n _bufferItems: 0,\n });\n\n const containerSizeRef = React.useRef<number>(0);\n const { targetDocument } = useFluent();\n\n const { virtualizerLength, _bufferItems, _bufferSize } = state;\n\n const resizeCallback = React.useCallback(\n (\n _entries: ResizeObserverEntry[],\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n _observer: ResizeObserver,\n\n scrollRef?: React.MutableRefObject<HTMLElement | null>,\n ) => {\n if (!scrollRef?.current) {\n return;\n }\n\n if (scrollRef.current !== targetDocument?.body) {\n // We have a local scroll container\n containerSizeRef.current =\n direction === 'vertical'\n ? scrollRef?.current.getBoundingClientRect().height\n : scrollRef?.current.getBoundingClientRect().width;\n } else if (targetDocument?.defaultView) {\n // If our scroll ref is the document body, we should check window height\n containerSizeRef.current =\n direction === 'vertical' ? targetDocument?.defaultView?.innerHeight : targetDocument?.defaultView?.innerWidth;\n }\n /*\n * Number of items required to cover viewport.\n */\n const length = Math.ceil(containerSizeRef.current / defaultItemSize + 1);\n\n /*\n * Number of items to append at each end, i.e. 'preload' each side before entering view.\n * Minimum: 1\n */\n const newBufferItems = bufferItems ?? Math.max(Math.ceil(length / 4), 1);\n\n /*\n * This is how far we deviate into the bufferItems to detect a redraw.\n */\n const newBufferSize = bufferSize ?? Math.max(defaultItemSize / 2.0, 1);\n\n const totalLength = length + newBufferItems * 2;\n\n setState({\n virtualizerLength: totalLength,\n _bufferItems: newBufferItems,\n _bufferSize: newBufferSize,\n });\n },\n [bufferItems, bufferSize, defaultItemSize, direction, targetDocument?.body, targetDocument?.defaultView],\n );\n\n const scrollRef = useResizeObserverRef_unstable(resizeCallback);\n\n return {\n virtualizerLength,\n bufferItems: _bufferItems,\n bufferSize: _bufferSize,\n scrollRef,\n containerSizeRef,\n };\n};\n"],"names":["React","useResizeObserverRef_unstable","useFluent_unstable","useFluent","useStaticVirtualizerMeasure","virtualizerProps","defaultItemSize","direction","bufferItems","bufferSize","state","setState","useState","virtualizerLength","_bufferSize","_bufferItems","containerSizeRef","useRef","targetDocument","resizeCallback","useCallback","_entries","_observer","scrollRef","current","body","getBoundingClientRect","height","width","defaultView","innerHeight","innerWidth","length","Math","ceil","newBufferItems","max","newBufferSize","totalLength"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;CAGC,GACD,OAAO,MAAMC,8BAA8B,CACzCC;IASA,MAAM,EAAEC,eAAe,EAAEC,YAAY,UAAU,EAAEC,WAAW,EAAEC,UAAU,EAAE,GAAGJ;IAE7E,MAAM,CAACK,OAAOC,SAAS,GAAGX,MAAMY,QAAQ,CAAC;QACvCC,mBAAmB;QACnBC,aAAa;QACbC,cAAc;IAChB;IAEA,MAAMC,mBAAmBhB,MAAMiB,MAAM,CAAS;IAC9C,MAAM,EAAEC,cAAc,EAAE,GAAGf;IAE3B,MAAM,EAAEU,iBAAiB,EAAEE,YAAY,EAAED,WAAW,EAAE,GAAGJ;IAEzD,MAAMS,iBAAiBnB,MAAMoB,WAAW,CACtC,CACEC,UACA,8FAA8F;IAE9FC,WAEAC;QAEA,IAAI,EAACA,sBAAAA,gCAAAA,UAAWC,OAAO,GAAE;YACvB;QACF;QAEA,IAAID,UAAUC,OAAO,MAAKN,2BAAAA,qCAAAA,eAAgBO,IAAI,GAAE;YAC9C,mCAAmC;YACnCT,iBAAiBQ,OAAO,GACtBjB,cAAc,aACVgB,sBAAAA,gCAAAA,UAAWC,OAAO,CAACE,qBAAqB,GAAGC,MAAM,GACjDJ,sBAAAA,gCAAAA,UAAWC,OAAO,CAACE,qBAAqB,GAAGE,KAAK;QACxD,OAAO,IAAIV,2BAAAA,qCAAAA,eAAgBW,WAAW,EAAE;gBAGTX,6BAA2CA;YAFxE,wEAAwE;YACxEF,iBAAiBQ,OAAO,GACtBjB,cAAc,aAAaW,2BAAAA,sCAAAA,8BAAAA,eAAgBW,WAAW,cAA3BX,kDAAAA,4BAA6BY,WAAW,GAAGZ,2BAAAA,sCAAAA,+BAAAA,eAAgBW,WAAW,cAA3BX,mDAAAA,6BAA6Ba,UAAU;QACjH;QACA;;OAEC,GACD,MAAMC,SAASC,KAAKC,IAAI,CAAClB,iBAAiBQ,OAAO,GAAGlB,kBAAkB;QAEtE;;;OAGC,GACD,MAAM6B,iBAAiB3B,wBAAAA,yBAAAA,cAAeyB,KAAKG,GAAG,CAACH,KAAKC,IAAI,CAACF,SAAS,IAAI;QAEtE;;OAEC,GACD,MAAMK,gBAAgB5B,uBAAAA,wBAAAA,aAAcwB,KAAKG,GAAG,CAAC9B,kBAAkB,KAAK;QAEpE,MAAMgC,cAAcN,SAASG,iBAAiB;QAE9CxB,SAAS;YACPE,mBAAmByB;YACnBvB,cAAcoB;YACdrB,aAAauB;QACf;IACF,GACA;QAAC7B;QAAaC;QAAYH;QAAiBC;QAAWW,2BAAAA,qCAAAA,eAAgBO,IAAI;QAAEP,2BAAAA,qCAAAA,eAAgBW,WAAW;KAAC;IAG1G,MAAMN,YAAYtB,8BAA8BkB;IAEhD,OAAO;QACLN;QACAL,aAAaO;QACbN,YAAYK;QACZS;QACAP;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
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":"AAEA,OAAO,MAAMA,qBAAqB,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,OAAO,cAArBJ,6CAAAA,uBAAuBK,QAAQ,CAAC;gBAC9BC,MAAMP,aAAaD,WAAWA,WAAWD;gBACzCM;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BC,MAAMR,WAAWD;gBACjBM;YACF;QACF;IACF,OAAO;QACL,IAAID,UAAU;gBACZF;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BE,KAAKR,aAAaD,WAAWA,WAAWD;gBACxCM;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BE,KAAKT,WAAWD;gBAChBM;YACF;QACF;IACF;AACF,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/utilities/ImperativeScrolling/imperativeScrolling.ts"],"sourcesContent":["import type { 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":"AAEA,OAAO,MAAMA,qBAAqB,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,OAAO,cAArBJ,6CAAAA,uBAAuBK,QAAQ,CAAC;gBAC9BC,MAAMP,aAAaD,WAAWA,WAAWD;gBACzCM;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BC,MAAMR,WAAWD;gBACjBM;YACF;QACF;IACF,OAAO;QACL,IAAID,UAAU;gBACZF;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BE,KAAKR,aAAaD,WAAWA,WAAWD;gBACxCM;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBK,QAAQ,CAAC;gBAC9BE,KAAKT,WAAWD;gBAChBM;YACF;QACF;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export { };
|
|
@@ -1 +1 @@
|
|
|
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":[
|
|
1
|
+
{"version":3,"sources":["../src/utilities/ImperativeScrolling/imperativeScrolling.types.ts"],"sourcesContent":["import type * 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":[],"mappings":"AAsBA,WAIE"}
|
|
@@ -1 +1 @@
|
|
|
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":"AAEA,OAAO,MAAMA,sBAAsB,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,OAAO,cAArBJ,6CAAAA,uBAAuBQ,QAAQ,CAAC;gBAC9BC,MAAMV,YAAYO;gBAClBH;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BC,MAAMH;gBACNH;YACF;QACF;IACF,OAAO;QACL,IAAID,UAAU;gBACZF;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BE,KAAKX,YAAYO;gBACjBH;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BE,KAAKJ;gBACLH;YACF;QACF;IACF;AACF,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/utilities/ImperativeScrolling/imperativeScrollingDynamic.ts"],"sourcesContent":["import type { 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":"AAEA,OAAO,MAAMA,sBAAsB,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,OAAO,cAArBJ,6CAAAA,uBAAuBQ,QAAQ,CAAC;gBAC9BC,MAAMV,YAAYO;gBAClBH;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BC,MAAMH;gBACNH;YACF;QACF;IACF,OAAO;QACL,IAAID,UAAU;gBACZF;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BE,KAAKX,YAAYO;gBACjBH;YACF;QACF,OAAO;gBACLH;aAAAA,0BAAAA,cAAcI,OAAO,cAArBJ,8CAAAA,wBAAuBQ,QAAQ,CAAC;gBAC9BE,KAAKJ;gBACLH;YACF;QACF;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
1
|
+
{"version":3,"sources":["../src/utilities/VirtualizerContext/types.ts"],"sourcesContent":["import type * 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\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":[],"mappings":"AAeA;;;CAGC,GACD,WAA+E"}
|
|
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "Virtualizer", {
|
|
|
9
9
|
return Virtualizer;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
12
|
const _useVirtualizerStylesstyles = require("./useVirtualizerStyles.styles");
|
|
15
13
|
const _useVirtualizer = require("./useVirtualizer");
|
|
16
14
|
const _renderVirtualizer = require("./renderVirtualizer");
|
|
@@ -1 +1 @@
|
|
|
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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.ts"],"sourcesContent":["'use client';\n\nimport type * 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":["useVirtualizerStyles_unstable","useVirtualizer_unstable","renderVirtualizer_unstable","useCustomStyleHook_unstable","Virtualizer","props","state","displayName"],"mappings":"AAAA;;;;;;;;;;;4CAI8C,gCAAgC;gCACtC,mBAAmB;mCAChB,sBAAsB;qCACrB,kCAAkC;AAQvE,MAAMI,cAA0C,CAACC;IACtD,MAAMC,YAAQL,uCAAAA,EAAwBI;QACtCL,yDAAAA,EAA8BM;QAC9BH,gDAAAA,EAA4B,iCAAiCG;IAE7D,WAAOJ,6CAAAA,EAA2BI;AACpC,EAAE;AAEFF,YAAYG,WAAW,GAAG"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
|
|
3
|
+
*/ "use strict";
|
|
2
4
|
Object.defineProperty(exports, "__esModule", {
|
|
3
5
|
value: true
|
|
4
6
|
});
|
|
5
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
6
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { VirtualizerContextProps } from '../../Utilities';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerSlots = {\n /**\n * The intersection observed 'before' element will detect when scrolling towards the beginning.\n */\n before: NonNullable<Slot<'div', 'td'>>;\n /**\n * A block place holding whitespace at the beginning of current DOM children.\n */\n beforeContainer: NonNullable<Slot<'div', 'tr'>>;\n /**\n * The intersection observed 'after' element will detect when scrolling towards the end.\n */\n after: NonNullable<Slot<'div', 'td'>>;\n /**\n * A block place holding whitespace after the end of current DOM children.\n */\n afterContainer: NonNullable<Slot<'div', 'tr'>>;\n};\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerConfigState = {\n /**\n * The current virtualized array of children to show in the DOM.\n */\n virtualizedChildren: React.ReactNode[];\n /**\n * The current start index for the virtualizer, all previous index's will be removed from DOM.\n */\n virtualizerStartIndex: number;\n /**\n * Current buffer height required at beginning of array.\n */\n afterBufferHeight: number;\n /**\n * Current buffer height required at end of array.\n */\n beforeBufferHeight: number;\n /**\n * The total current height of the scrollView/child content.\n */\n totalVirtualizerHeight: number;\n /**\n * The scroll direction\n * @default vertical\n */\n axis?: 'vertical' | 'horizontal';\n /**\n * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n */\n reversed?: boolean;\n /**\n * Enables the isScrolling property in the child render function\n * Default: false - to prevent nessecary render function calls\n */\n enableScrollLoad?: boolean;\n /**\n * Pixel size of intersection observers and how much they 'cross over' into the bufferItems index.\n * Minimum 1px.\n */\n bufferSize: number;\n /**\n * Ref for access to internal size knowledge, can be used to measure updates\n */\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Virtualizer/Virtualizer.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { VirtualizerContextProps } from '../../Utilities';\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerSlots = {\n /**\n * The intersection observed 'before' element will detect when scrolling towards the beginning.\n */\n before: NonNullable<Slot<'div', 'td'>>;\n /**\n * A block place holding whitespace at the beginning of current DOM children.\n */\n beforeContainer: NonNullable<Slot<'div', 'tr'>>;\n /**\n * The intersection observed 'after' element will detect when scrolling towards the end.\n */\n after: NonNullable<Slot<'div', 'td'>>;\n /**\n * A block place holding whitespace after the end of current DOM children.\n */\n afterContainer: NonNullable<Slot<'div', 'tr'>>;\n};\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerConfigState = {\n /**\n * The current virtualized array of children to show in the DOM.\n */\n virtualizedChildren: React.ReactNode[];\n /**\n * The current start index for the virtualizer, all previous index's will be removed from DOM.\n */\n virtualizerStartIndex: number;\n /**\n * Current buffer height required at beginning of array.\n */\n afterBufferHeight: number;\n /**\n * Current buffer height required at end of array.\n */\n beforeBufferHeight: number;\n /**\n * The total current height of the scrollView/child content.\n */\n totalVirtualizerHeight: number;\n /**\n * The scroll direction\n * @default vertical\n */\n axis?: 'vertical' | 'horizontal';\n /**\n * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n */\n reversed?: boolean;\n /**\n * Enables the isScrolling property in the child render function\n * Default: false - to prevent nessecary render function calls\n */\n enableScrollLoad?: boolean;\n /**\n * Pixel size of intersection observers and how much they 'cross over' into the bufferItems index.\n * Minimum 1px.\n */\n bufferSize: number;\n /**\n * Ref for access to internal size knowledge, can be used to measure updates\n */\n\n childSizes: React.MutableRefObject<number[]>;\n /**\n * Ref for access to internal progressive size knowledge, can be used to measure updates\n */\n\n childProgressiveSizes: React.MutableRefObject<number[]>;\n};\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerState = ComponentState<VirtualizerSlots> & VirtualizerConfigState;\n\n/**\n * The main child render method of Virtualization\n * isScrolling will only be enabled when enableScrollLoad is set to true.\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerChildRenderFunction = (index: number, isScrolling: boolean) => React.ReactNode;\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerDataRef = {\n progressiveSizes: React.RefObject<number[]>;\n nodeSizes: React.RefObject<number[]>;\n setFlaggedIndex: (index: number | null) => void;\n currentIndex: React.RefObject<number>;\n};\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerConfigProps = {\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 * Can be used dynamically.\n */\n children: VirtualizerChildRenderFunction;\n\n /**\n * Default cell size to use if no custom callback provided.\n * If implementing `getItemSize` this should be the initial and ideally minimum cell size.\n */\n itemSize: number;\n\n /**\n * The total number of items to be virtualized.\n */\n numItems: number;\n\n /**\n * Number of children to render in the DOM during virtualization.\n * Constraints:\n * - Large enough that the items rendered in DOM cover the viewport\n * and intersection observer buffers (buffersize) at both ends.\n */\n virtualizerLength: number;\n\n /**\n * Defaults to 1/4th (or 1/3rd for dynamic items) of virtualizerLength.\n * RECOMMEND: Override this with a consistent value if using a dynamic virtualizer.\n *\n * Controls the number of elements rendered before the current index entering the virtualized viewport.\n * Constraints:\n * - Large enough to cover bufferSize (prevents buffers intersecting into the viewport during rest state).\n * - Small enough that the virtualizer only renders a few items outside of view.\n */\n bufferItems?: number;\n\n /**\n * Defaults to half of bufferItems * itemSize size (in pixels).\n * RECOMMEND: Override this with a consistent minimum item size value if using a dynamic virtualizer.\n * The length (in pixels) before the end/start DOM index where the virtualizer recalculation will be triggered.\n * Increasing this reduces whitespace on ultra-fast scroll, as additional elements\n * are buffered to appear while virtualization recalculates.\n * Constraints:\n * - At least 1px - although this will only trigger the recalculation after bookends (whitespace) enter viewport.\n * - BufferSize must be smaller than bufferItems pixel size, as it prevents bookends entering viewport at rest.\n */\n bufferSize?: number;\n\n /**\n * Enables users to override the intersectionObserverRoot.\n * We recommend passing this in for accurate distance assessment in IO\n */\n\n scrollViewRef?: React.MutableRefObject<HTMLElement | null>;\n\n /**\n * The scroll direction\n * @default vertical\n */\n axis?: 'vertical' | 'horizontal';\n\n /**\n * Tells the virtualizer to measure in the reverse direction (for column-reverse order etc.)\n * This value should be flipped in RTL implementation (TBD whether automate RTL).\n */\n reversed?: boolean;\n\n /**\n * Enables the isScrolling property in the child render function\n * Default: false - to prevent nessecary render function calls\n */\n enableScrollLoad?: boolean;\n\n /**\n * Callback for acquiring size of individual items\n * @param index - the index of the requested size's child\n */\n getItemSize?: (index: number) => number;\n\n /**\n * Virtualizer context can be passed as a prop for extended class use\n */\n virtualizerContext?: VirtualizerContextProps;\n\n /**\n * Callback for notifying when a flagged index has been rendered\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onRenderedFlaggedIndex?: (index: number) => void;\n\n /*\n * Callback for notifying when a flagged index has been rendered\n */\n\n flaggedIndex?: React.MutableRefObject<number | null>;\n\n /**\n * Imperative ref contains our scrollTo index functionality for user control.\n */\n imperativeVirtualizerRef?: React.RefObject<VirtualizerDataRef | null>;\n\n /**\n * A ref that provides the size of container (vertical - height, horizontal - width), set by a resize observer.\n * Virtualizer Measure hooks provide a suitable reference.\n */\n containerSizeRef: React.RefObject<number>;\n\n /**\n * A callback that enables updating scroll position for calculating required dynamic lengths,\n * this should be passed in from useDynamicVirtualizerMeasure\n */\n updateScrollPosition?: (position: number) => void;\n\n /**\n * Spacing between rendered children for calculation, should match the container's gap CSS value.\n */\n gap?: number;\n};\n\n/**\n * @deprecated migrated to \\@fluentui\\-contrib/react\\-virtualizer for stable release.\n */\nexport type VirtualizerProps = ComponentProps<Partial<VirtualizerSlots>> & VirtualizerConfigProps;\n"],"names":[],"mappings":"AAoOA;;CAEC,GACD,WAAkG"}
|
|
@@ -24,7 +24,9 @@ function useVirtualizer_unstable(props) {
|
|
|
24
24
|
const flaggedIndex = _react.useRef(null);
|
|
25
25
|
const actualIndex = _virtualizerContext.contextIndex;
|
|
26
26
|
// Just in case our ref gets out of date vs the context during a re-render
|
|
27
|
+
// eslint-disable-next-line react-hooks/refs -- deprecated package, not worth refactoring
|
|
27
28
|
if (_virtualizerContext.contextIndex !== actualIndexRef.current) {
|
|
29
|
+
// eslint-disable-next-line react-hooks/refs -- deprecated package, not worth refactoring
|
|
28
30
|
actualIndexRef.current = _virtualizerContext.contextIndex;
|
|
29
31
|
}
|
|
30
32
|
const setActualIndex = _react.useCallback((index)=>{
|
|
@@ -42,6 +44,7 @@ function useVirtualizer_unstable(props) {
|
|
|
42
44
|
/* We keep track of the progressive sizing/placement down the list,
|
|
43
45
|
this helps us skip re-calculations unless children/size changes */ const childProgressiveSizes = _react.useRef(new Array(getItemSize ? numItems : 0));
|
|
44
46
|
if (virtualizerContext === null || virtualizerContext === void 0 ? void 0 : virtualizerContext.childProgressiveSizes) {
|
|
47
|
+
// eslint-disable-next-line react-hooks/immutability, react-hooks/refs -- deprecated package, not worth refactoring
|
|
45
48
|
virtualizerContext.childProgressiveSizes.current = childProgressiveSizes.current;
|
|
46
49
|
}
|
|
47
50
|
// The internal tracking REF for child array (updates often).
|
|
@@ -57,6 +60,7 @@ function useVirtualizer_unstable(props) {
|
|
|
57
60
|
if (numItems !== childProgressiveSizes.current.length) {
|
|
58
61
|
childProgressiveSizes.current = new Array(numItems);
|
|
59
62
|
if (virtualizerContext === null || virtualizerContext === void 0 ? void 0 : virtualizerContext.childProgressiveSizes) {
|
|
63
|
+
// eslint-disable-next-line react-hooks/immutability -- deprecated package, not worth refactoring
|
|
60
64
|
virtualizerContext.childProgressiveSizes.current = childProgressiveSizes.current;
|
|
61
65
|
}
|
|
62
66
|
}
|
|
@@ -102,6 +106,7 @@ function useVirtualizer_unstable(props) {
|
|
|
102
106
|
enableScrollLoad
|
|
103
107
|
]);
|
|
104
108
|
_react.useEffect(()=>{
|
|
109
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- deprecated package, not worth refactoring
|
|
105
110
|
initializeScrollingTimer();
|
|
106
111
|
}, [
|
|
107
112
|
actualIndex,
|
|
@@ -184,6 +189,7 @@ function useVirtualizer_unstable(props) {
|
|
|
184
189
|
better to reduce checks if it's right on the boundary. */ return midpoint;
|
|
185
190
|
}
|
|
186
191
|
if (indexValue > scrollPos) {
|
|
192
|
+
// eslint-disable-next-line react-hooks/immutability -- deprecated package, not worth refactoring
|
|
187
193
|
return findIndexRecursive(scrollPos, lowIndex, midpoint - 1);
|
|
188
194
|
} else {
|
|
189
195
|
return findIndexRecursive(scrollPos, midpoint + 1, highIndex);
|
|
@@ -384,6 +390,7 @@ function useVirtualizer_unstable(props) {
|
|
|
384
390
|
getIndexFromScrollPosition,
|
|
385
391
|
updateCurrentItemSizes
|
|
386
392
|
]), {
|
|
393
|
+
// eslint-disable-next-line react-hooks/refs -- deprecated package, not worth refactoring
|
|
387
394
|
root: scrollViewRef ? scrollViewRef === null || scrollViewRef === void 0 ? void 0 : scrollViewRef.current : null,
|
|
388
395
|
rootMargin: '0px',
|
|
389
396
|
threshold: 0
|
|
@@ -461,6 +468,7 @@ function useVirtualizer_unstable(props) {
|
|
|
461
468
|
renderChild,
|
|
462
469
|
isScrolling
|
|
463
470
|
]);
|
|
471
|
+
// eslint-disable-next-line react-hooks/immutability -- deprecated package, not worth refactoring
|
|
464
472
|
_react.useEffect(()=>{
|
|
465
473
|
// Ensure we repopulate if getItemSize callback changes
|
|
466
474
|
populateSizeArrays();
|
|
@@ -485,7 +493,7 @@ function useVirtualizer_unstable(props) {
|
|
|
485
493
|
virtualizerLength
|
|
486
494
|
]);
|
|
487
495
|
// Ensure we have run through and updated the whole size list array at least once.
|
|
488
|
-
initializeSizeArray();
|
|
496
|
+
/* eslint-disable react-hooks/refs -- deprecated package, not worth refactoring */ initializeSizeArray();
|
|
489
497
|
if (getItemSize && (numItems !== childSizes.current.length || numItems !== childProgressiveSizes.current.length)) {
|
|
490
498
|
// Child length mismatch, repopulate size arrays.
|
|
491
499
|
populateSizeArrays();
|
|
@@ -540,4 +548,4 @@ function useVirtualizer_unstable(props) {
|
|
|
540
548
|
childSizes,
|
|
541
549
|
childProgressiveSizes
|
|
542
550
|
};
|
|
543
|
-
}
|
|
551
|
+
/* eslint-enable react-hooks/refs */ }
|