@fluentui/react-virtualizer 9.0.0-alpha.9 → 9.0.0-alpha.91

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.
Files changed (183) hide show
  1. package/CHANGELOG.md +854 -9
  2. package/dist/index.d.ts +326 -33
  3. package/lib/Hooks.js +1 -2
  4. package/lib/Hooks.js.map +1 -1
  5. package/lib/Utilities.js +1 -0
  6. package/lib/Utilities.js.map +1 -0
  7. package/lib/Virtualizer.js +1 -2
  8. package/lib/Virtualizer.js.map +1 -1
  9. package/lib/VirtualizerScrollView.js +1 -0
  10. package/lib/VirtualizerScrollView.js.map +1 -0
  11. package/lib/VirtualizerScrollViewDynamic.js +1 -0
  12. package/lib/VirtualizerScrollViewDynamic.js.map +1 -0
  13. package/lib/components/Virtualizer/Virtualizer.js +6 -7
  14. package/lib/components/Virtualizer/Virtualizer.js.map +1 -1
  15. package/lib/components/Virtualizer/Virtualizer.types.js +1 -2
  16. package/lib/components/Virtualizer/Virtualizer.types.js.map +1 -1
  17. package/lib/components/Virtualizer/index.js +4 -6
  18. package/lib/components/Virtualizer/index.js.map +1 -1
  19. package/lib/components/Virtualizer/renderVirtualizer.js +21 -16
  20. package/lib/components/Virtualizer/renderVirtualizer.js.map +1 -1
  21. package/lib/components/Virtualizer/useVirtualizer.js +522 -356
  22. package/lib/components/Virtualizer/useVirtualizer.js.map +1 -1
  23. package/lib/components/Virtualizer/{useVirtualizerStyles.js → useVirtualizerStyles.styles.js} +5 -4
  24. package/lib/components/Virtualizer/useVirtualizerStyles.styles.js.map +1 -0
  25. package/lib/components/VirtualizerScrollView/VirtualizerScrollView.js +12 -0
  26. package/lib/components/VirtualizerScrollView/VirtualizerScrollView.js.map +1 -0
  27. package/lib/components/VirtualizerScrollView/VirtualizerScrollView.types.js +1 -0
  28. package/lib/components/VirtualizerScrollView/VirtualizerScrollView.types.js.map +1 -0
  29. package/lib/components/VirtualizerScrollView/index.js +4 -0
  30. package/lib/components/VirtualizerScrollView/index.js.map +1 -0
  31. package/lib/components/VirtualizerScrollView/renderVirtualizerScrollView.js +9 -0
  32. package/lib/components/VirtualizerScrollView/renderVirtualizerScrollView.js.map +1 -0
  33. package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js +80 -0
  34. package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js.map +1 -0
  35. package/lib/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js +46 -0
  36. package/lib/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js.map +1 -0
  37. package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js +12 -0
  38. package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js.map +1 -0
  39. package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js +1 -0
  40. package/lib/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js.map +1 -0
  41. package/lib/components/VirtualizerScrollViewDynamic/index.js +4 -0
  42. package/lib/components/VirtualizerScrollViewDynamic/index.js.map +1 -0
  43. package/lib/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js +9 -0
  44. package/lib/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js.map +1 -0
  45. package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js +152 -0
  46. package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map +1 -0
  47. package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js +46 -0
  48. package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js.map +1 -0
  49. package/lib/hooks/hooks.types.js +1 -0
  50. package/lib/hooks/hooks.types.js.map +1 -0
  51. package/lib/hooks/index.js +5 -2
  52. package/lib/hooks/index.js.map +1 -1
  53. package/lib/hooks/useDynamicPagination.js +126 -0
  54. package/lib/hooks/useDynamicPagination.js.map +1 -0
  55. package/lib/hooks/useDynamicVirtualizerMeasure.js +126 -0
  56. package/lib/hooks/useDynamicVirtualizerMeasure.js.map +1 -0
  57. package/lib/hooks/useIntersectionObserver.js +117 -40
  58. package/lib/hooks/useIntersectionObserver.js.map +1 -1
  59. package/lib/hooks/useMeasureList.js +127 -0
  60. package/lib/hooks/useMeasureList.js.map +1 -0
  61. package/lib/hooks/useMutationObserver.js +38 -0
  62. package/lib/hooks/useMutationObserver.js.map +1 -0
  63. package/lib/hooks/useResizeObserverRef.js +60 -0
  64. package/lib/hooks/useResizeObserverRef.js.map +1 -0
  65. package/lib/hooks/useStaticPagination.js +102 -0
  66. package/lib/hooks/useStaticPagination.js.map +1 -0
  67. package/lib/hooks/useVirtualizerMeasure.js +62 -0
  68. package/lib/hooks/useVirtualizerMeasure.js.map +1 -0
  69. package/lib/index.js +4 -2
  70. package/lib/index.js.map +1 -1
  71. package/lib/utilities/ImperativeScrolling/imperativeScrolling.js +32 -0
  72. package/lib/utilities/ImperativeScrolling/imperativeScrolling.js.map +1 -0
  73. package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js +1 -0
  74. package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js.map +1 -0
  75. package/lib/utilities/ImperativeScrolling/imperativeScrollingDynamic.js +45 -0
  76. package/lib/utilities/ImperativeScrolling/imperativeScrollingDynamic.js.map +1 -0
  77. package/lib/utilities/ImperativeScrolling/index.js +2 -0
  78. package/lib/utilities/ImperativeScrolling/index.js.map +1 -0
  79. package/lib/utilities/VirtualizerContext/VirtualizerContext.js +26 -0
  80. package/lib/utilities/VirtualizerContext/VirtualizerContext.js.map +1 -0
  81. package/lib/utilities/VirtualizerContext/index.js +1 -0
  82. package/lib/utilities/VirtualizerContext/index.js.map +1 -0
  83. package/lib/utilities/VirtualizerContext/types.js +1 -0
  84. package/lib/utilities/VirtualizerContext/types.js.map +1 -0
  85. package/lib/utilities/createResizeObserverFromDocument.js +13 -0
  86. package/lib/utilities/createResizeObserverFromDocument.js.map +1 -0
  87. package/lib/utilities/debounce.js +19 -0
  88. package/lib/utilities/debounce.js.map +1 -0
  89. package/lib/utilities/index.js +2 -0
  90. package/lib/utilities/index.js.map +1 -0
  91. package/lib-commonjs/Hooks.js +31 -5
  92. package/lib-commonjs/Hooks.js.map +1 -1
  93. package/lib-commonjs/Utilities.js +28 -0
  94. package/lib-commonjs/Utilities.js.map +1 -0
  95. package/lib-commonjs/Virtualizer.js +28 -5
  96. package/lib-commonjs/Virtualizer.js.map +1 -1
  97. package/lib-commonjs/VirtualizerScrollView.js +28 -0
  98. package/lib-commonjs/VirtualizerScrollView.js.map +1 -0
  99. package/lib-commonjs/VirtualizerScrollViewDynamic.js +28 -0
  100. package/lib-commonjs/VirtualizerScrollViewDynamic.js.map +1 -0
  101. package/lib-commonjs/components/Virtualizer/Virtualizer.js +17 -18
  102. package/lib-commonjs/components/Virtualizer/Virtualizer.js.map +1 -1
  103. package/lib-commonjs/components/Virtualizer/Virtualizer.types.js +3 -3
  104. package/lib-commonjs/components/Virtualizer/Virtualizer.types.js.map +1 -1
  105. package/lib-commonjs/components/Virtualizer/index.js +31 -9
  106. package/lib-commonjs/components/Virtualizer/index.js.map +1 -1
  107. package/lib-commonjs/components/Virtualizer/renderVirtualizer.js +38 -21
  108. package/lib-commonjs/components/Virtualizer/renderVirtualizer.js.map +1 -1
  109. package/lib-commonjs/components/Virtualizer/useVirtualizer.js +531 -362
  110. package/lib-commonjs/components/Virtualizer/useVirtualizer.js.map +1 -1
  111. package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.styles.js +123 -0
  112. package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.styles.js.map +1 -0
  113. package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.js +21 -0
  114. package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.js.map +1 -0
  115. package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.types.js +6 -0
  116. package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.types.js.map +1 -0
  117. package/lib-commonjs/components/VirtualizerScrollView/index.js +31 -0
  118. package/lib-commonjs/components/VirtualizerScrollView/index.js.map +1 -0
  119. package/lib-commonjs/components/VirtualizerScrollView/renderVirtualizerScrollView.js +19 -0
  120. package/lib-commonjs/components/VirtualizerScrollView/renderVirtualizerScrollView.js.map +1 -0
  121. package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js +91 -0
  122. package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js.map +1 -0
  123. package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js +70 -0
  124. package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js.map +1 -0
  125. package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js +21 -0
  126. package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js.map +1 -0
  127. package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js +6 -0
  128. package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js.map +1 -0
  129. package/lib-commonjs/components/VirtualizerScrollViewDynamic/index.js +31 -0
  130. package/lib-commonjs/components/VirtualizerScrollViewDynamic/index.js.map +1 -0
  131. package/lib-commonjs/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js +19 -0
  132. package/lib-commonjs/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js.map +1 -0
  133. package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js +162 -0
  134. package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map +1 -0
  135. package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js +70 -0
  136. package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js.map +1 -0
  137. package/lib-commonjs/hooks/hooks.types.js +6 -0
  138. package/lib-commonjs/hooks/hooks.types.js.map +1 -0
  139. package/lib-commonjs/hooks/index.js +35 -5
  140. package/lib-commonjs/hooks/index.js.map +1 -1
  141. package/lib-commonjs/hooks/useDynamicPagination.js +131 -0
  142. package/lib-commonjs/hooks/useDynamicPagination.js.map +1 -0
  143. package/lib-commonjs/hooks/useDynamicVirtualizerMeasure.js +134 -0
  144. package/lib-commonjs/hooks/useDynamicVirtualizerMeasure.js.map +1 -0
  145. package/lib-commonjs/hooks/useIntersectionObserver.js +129 -53
  146. package/lib-commonjs/hooks/useIntersectionObserver.js.map +1 -1
  147. package/lib-commonjs/hooks/useMeasureList.js +134 -0
  148. package/lib-commonjs/hooks/useMeasureList.js.map +1 -0
  149. package/lib-commonjs/hooks/useMutationObserver.js +48 -0
  150. package/lib-commonjs/hooks/useMutationObserver.js.map +1 -0
  151. package/lib-commonjs/hooks/useResizeObserverRef.js +69 -0
  152. package/lib-commonjs/hooks/useResizeObserverRef.js.map +1 -0
  153. package/lib-commonjs/hooks/useStaticPagination.js +107 -0
  154. package/lib-commonjs/hooks/useStaticPagination.js.map +1 -0
  155. package/lib-commonjs/hooks/useVirtualizerMeasure.js +70 -0
  156. package/lib-commonjs/hooks/useVirtualizerMeasure.js.map +1 -0
  157. package/lib-commonjs/index.js +85 -41
  158. package/lib-commonjs/index.js.map +1 -1
  159. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.js +42 -0
  160. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.js.map +1 -0
  161. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.types.js +6 -0
  162. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.types.js.map +1 -0
  163. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrollingDynamic.js +55 -0
  164. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrollingDynamic.js.map +1 -0
  165. package/lib-commonjs/utilities/ImperativeScrolling/index.js +20 -0
  166. package/lib-commonjs/utilities/ImperativeScrolling/index.js.map +1 -0
  167. package/lib-commonjs/utilities/VirtualizerContext/VirtualizerContext.js +48 -0
  168. package/lib-commonjs/utilities/VirtualizerContext/VirtualizerContext.js.map +1 -0
  169. package/lib-commonjs/utilities/VirtualizerContext/index.js +22 -0
  170. package/lib-commonjs/utilities/VirtualizerContext/index.js.map +1 -0
  171. package/lib-commonjs/utilities/VirtualizerContext/types.js +6 -0
  172. package/lib-commonjs/utilities/VirtualizerContext/types.js.map +1 -0
  173. package/lib-commonjs/utilities/createResizeObserverFromDocument.js +23 -0
  174. package/lib-commonjs/utilities/createResizeObserverFromDocument.js.map +1 -0
  175. package/lib-commonjs/utilities/debounce.js +29 -0
  176. package/lib-commonjs/utilities/debounce.js.map +1 -0
  177. package/lib-commonjs/utilities/index.js +29 -0
  178. package/lib-commonjs/utilities/index.js.map +1 -0
  179. package/package.json +20 -24
  180. package/CHANGELOG.json +0 -140
  181. package/lib/components/Virtualizer/useVirtualizerStyles.js.map +0 -1
  182. package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.js +0 -115
  183. package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.js.map +0 -1
@@ -0,0 +1,152 @@
1
+ import * as React from 'react';
2
+ import { slot, useMergedRefs } from '@fluentui/react-utilities';
3
+ import { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';
4
+ import { useDynamicVirtualizerMeasure } from '../../Hooks';
5
+ import { useVirtualizerContextState_unstable, scrollToItemDynamic } from '../../Utilities';
6
+ import { useMeasureList } from '../../hooks/useMeasureList';
7
+ import { useDynamicVirtualizerPagination } from '../../hooks/useDynamicPagination';
8
+ export function useVirtualizerScrollViewDynamic_unstable(props) {
9
+ 'use no memo';
10
+ var _imperativeVirtualizerRef_current;
11
+ const contextState = useVirtualizerContextState_unstable(props.virtualizerContext);
12
+ const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef, enablePagination = false, bufferItems: _bufferItems, bufferSize: _bufferSize } = props;
13
+ let sizeTrackingArray = React.useRef(new Array(props.numItems).fill(props.itemSize));
14
+ // This lets us trigger updates when a size change occurs.
15
+ const [sizeUpdateCount, setSizeUpdateCount] = React.useState(0);
16
+ const getChildSizeAuto = React.useCallback((index)=>{
17
+ if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {
18
+ // Default size for initial state or untracked
19
+ return props.itemSize;
20
+ }
21
+ /* Required to be defined prior to our measure function
22
+ * we use a sizing array ref that we will update post-render
23
+ */ return sizeTrackingArray.current[index];
24
+ }, // eslint-disable-next-line react-hooks/exhaustive-deps
25
+ [
26
+ sizeTrackingArray,
27
+ props.itemSize,
28
+ sizeUpdateCount
29
+ ]);
30
+ var _props_axis, _props_getItemSize;
31
+ const { virtualizerLength, bufferItems, bufferSize, scrollRef, containerSizeRef, updateScrollPosition } = useDynamicVirtualizerMeasure({
32
+ defaultItemSize: props.itemSize,
33
+ direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical',
34
+ getItemSize: (_props_getItemSize = props.getItemSize) !== null && _props_getItemSize !== void 0 ? _props_getItemSize : getChildSizeAuto,
35
+ virtualizerContext: contextState,
36
+ numItems: props.numItems,
37
+ bufferItems: _bufferItems,
38
+ bufferSize: _bufferSize
39
+ });
40
+ const _imperativeVirtualizerRef = useMergedRefs(React.useRef(null), imperativeVirtualizerRef);
41
+ var _contextState_contextIndex;
42
+ const paginationRef = useDynamicVirtualizerPagination({
43
+ axis,
44
+ progressiveItemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.progressiveSizes,
45
+ virtualizerLength,
46
+ currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0
47
+ }, enablePagination);
48
+ // Store the virtualizer length as a ref for imperative ref access
49
+ const virtualizerLengthRef = React.useRef(virtualizerLength);
50
+ if (virtualizerLengthRef.current !== virtualizerLength) {
51
+ virtualizerLengthRef.current = virtualizerLength;
52
+ }
53
+ const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef, paginationRef);
54
+ const scrollCallbackRef = React.useRef(null);
55
+ React.useImperativeHandle(imperativeRef, ()=>{
56
+ var _imperativeVirtualizerRef_current;
57
+ return {
58
+ scrollTo (index, behavior = 'auto', callback) {
59
+ scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;
60
+ if (_imperativeVirtualizerRef.current) {
61
+ var _imperativeVirtualizerRef_current;
62
+ const progressiveSizes = _imperativeVirtualizerRef.current.progressiveSizes.current;
63
+ const totalSize = progressiveSizes && (progressiveSizes === null || progressiveSizes === void 0 ? void 0 : progressiveSizes.length) > 0 ? progressiveSizes[Math.max(progressiveSizes.length - 1, 0)] : 0;
64
+ _imperativeVirtualizerRef.current.setFlaggedIndex(index);
65
+ scrollToItemDynamic({
66
+ index,
67
+ itemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.nodeSizes,
68
+ totalSize,
69
+ scrollViewRef: scrollViewRef,
70
+ axis,
71
+ reversed,
72
+ behavior
73
+ });
74
+ }
75
+ },
76
+ currentIndex: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,
77
+ virtualizerLength: virtualizerLengthRef
78
+ };
79
+ }, [
80
+ axis,
81
+ scrollViewRef,
82
+ reversed,
83
+ _imperativeVirtualizerRef
84
+ ]);
85
+ const handleRenderedIndex = (index)=>{
86
+ if (scrollCallbackRef.current) {
87
+ scrollCallbackRef.current(index);
88
+ }
89
+ };
90
+ var _props_getItemSize1;
91
+ const virtualizerState = useVirtualizer_unstable({
92
+ ...props,
93
+ getItemSize: (_props_getItemSize1 = props.getItemSize) !== null && _props_getItemSize1 !== void 0 ? _props_getItemSize1 : getChildSizeAuto,
94
+ virtualizerLength,
95
+ bufferItems,
96
+ bufferSize,
97
+ virtualizerContext: contextState,
98
+ imperativeVirtualizerRef: _imperativeVirtualizerRef,
99
+ onRenderedFlaggedIndex: handleRenderedIndex,
100
+ containerSizeRef,
101
+ scrollViewRef,
102
+ updateScrollPosition
103
+ });
104
+ const measureObject = useMeasureList(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);
105
+ if (enablePagination && measureObject.sizeUpdateCount !== sizeUpdateCount) {
106
+ /* This enables us to let callback know that the sizes have been updated
107
+ triggers a re-render but is only required on pagination (else index change handles) */ setSizeUpdateCount(measureObject.sizeUpdateCount);
108
+ }
109
+ if (axis === 'horizontal') {
110
+ sizeTrackingArray = measureObject.widthArray;
111
+ } else {
112
+ sizeTrackingArray = measureObject.heightArray;
113
+ }
114
+ if (!props.getItemSize) {
115
+ // Auto-measuring is required
116
+ React.Children.map(virtualizerState.virtualizedChildren, (child, index)=>{
117
+ if (/*#__PURE__*/ React.isValidElement(child)) {
118
+ virtualizerState.virtualizedChildren[index] = /*#__PURE__*/ React.createElement(child.type, {
119
+ ...child.props,
120
+ key: child.key,
121
+ ref: (element)=>{
122
+ if (child.hasOwnProperty('ref')) {
123
+ // We must access this from the child directly, not props (forward ref).
124
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
125
+ const localRef = child === null || child === void 0 ? void 0 : child.ref;
126
+ if (typeof localRef === 'function') {
127
+ localRef(element);
128
+ } else if (localRef) {
129
+ localRef.current = element;
130
+ }
131
+ }
132
+ // Call the auto-measure ref attachment.
133
+ measureObject.createIndexedRef(index)(element);
134
+ }
135
+ });
136
+ }
137
+ });
138
+ }
139
+ return {
140
+ ...virtualizerState,
141
+ components: {
142
+ ...virtualizerState.components,
143
+ container: 'div'
144
+ },
145
+ container: slot.always(props.container, {
146
+ defaultProps: {
147
+ ref: scrollViewRef
148
+ },
149
+ elementType: 'div'
150
+ })
151
+ };
152
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';\nimport type {\n VirtualizerScrollViewDynamicProps,\n VirtualizerScrollViewDynamicState,\n} from './VirtualizerScrollViewDynamic.types';\nimport { useDynamicVirtualizerMeasure } from '../../Hooks';\nimport { useVirtualizerContextState_unstable, scrollToItemDynamic } from '../../Utilities';\nimport type { VirtualizerDataRef } from '../Virtualizer/Virtualizer.types';\nimport { useMeasureList } from '../../hooks/useMeasureList';\nimport type { IndexedResizeCallbackElement } from '../../hooks/useMeasureList';\nimport { useDynamicVirtualizerPagination } from '../../hooks/useDynamicPagination';\n\nexport function useVirtualizerScrollViewDynamic_unstable(\n props: VirtualizerScrollViewDynamicProps,\n): VirtualizerScrollViewDynamicState {\n 'use no memo';\n\n const contextState = useVirtualizerContextState_unstable(props.virtualizerContext);\n const {\n imperativeRef,\n axis = 'vertical',\n reversed,\n imperativeVirtualizerRef,\n enablePagination = false,\n bufferItems: _bufferItems,\n bufferSize: _bufferSize,\n } = props;\n\n let sizeTrackingArray = React.useRef<number[]>(new Array(props.numItems).fill(props.itemSize));\n\n // This lets us trigger updates when a size change occurs.\n const [sizeUpdateCount, setSizeUpdateCount] = React.useState(0);\n\n const getChildSizeAuto = React.useCallback(\n (index: number) => {\n if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {\n // Default size for initial state or untracked\n return props.itemSize;\n }\n /* Required to be defined prior to our measure function\n * we use a sizing array ref that we will update post-render\n */\n return sizeTrackingArray.current[index];\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [sizeTrackingArray, props.itemSize, sizeUpdateCount],\n );\n\n const { virtualizerLength, bufferItems, bufferSize, scrollRef, containerSizeRef, updateScrollPosition } =\n useDynamicVirtualizerMeasure({\n defaultItemSize: props.itemSize,\n direction: props.axis ?? 'vertical',\n getItemSize: props.getItemSize ?? getChildSizeAuto,\n virtualizerContext: contextState,\n numItems: props.numItems,\n bufferItems: _bufferItems,\n bufferSize: _bufferSize,\n });\n\n const _imperativeVirtualizerRef = useMergedRefs(React.useRef<VirtualizerDataRef>(null), imperativeVirtualizerRef);\n\n const paginationRef = useDynamicVirtualizerPagination(\n {\n axis,\n progressiveItemSizes: _imperativeVirtualizerRef.current?.progressiveSizes,\n virtualizerLength,\n currentIndex: contextState?.contextIndex ?? 0,\n },\n enablePagination,\n );\n\n // Store the virtualizer length as a ref for imperative ref access\n const virtualizerLengthRef = React.useRef<number>(virtualizerLength);\n if (virtualizerLengthRef.current !== virtualizerLength) {\n virtualizerLengthRef.current = virtualizerLength;\n }\n const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef, paginationRef);\n const scrollCallbackRef = React.useRef<null | ((index: number) => void)>(null);\n\n React.useImperativeHandle(\n imperativeRef,\n () => {\n return {\n scrollTo(index: number, behavior = 'auto', callback: undefined | ((index: number) => void)) {\n scrollCallbackRef.current = callback ?? null;\n if (_imperativeVirtualizerRef.current) {\n const progressiveSizes = _imperativeVirtualizerRef.current.progressiveSizes.current;\n const totalSize =\n progressiveSizes && progressiveSizes?.length > 0\n ? progressiveSizes[Math.max(progressiveSizes.length - 1, 0)]\n : 0;\n\n _imperativeVirtualizerRef.current.setFlaggedIndex(index);\n scrollToItemDynamic({\n index,\n itemSizes: _imperativeVirtualizerRef.current?.nodeSizes,\n totalSize,\n scrollViewRef: scrollViewRef as React.RefObject<HTMLDivElement>,\n axis,\n reversed,\n behavior,\n });\n }\n },\n currentIndex: _imperativeVirtualizerRef.current?.currentIndex,\n virtualizerLength: virtualizerLengthRef,\n };\n },\n [axis, scrollViewRef, reversed, _imperativeVirtualizerRef],\n );\n\n const handleRenderedIndex = (index: number) => {\n if (scrollCallbackRef.current) {\n scrollCallbackRef.current(index);\n }\n };\n\n const virtualizerState = useVirtualizer_unstable({\n ...props,\n getItemSize: props.getItemSize ?? getChildSizeAuto,\n virtualizerLength,\n bufferItems,\n bufferSize,\n virtualizerContext: contextState,\n imperativeVirtualizerRef: _imperativeVirtualizerRef,\n onRenderedFlaggedIndex: handleRenderedIndex,\n containerSizeRef,\n scrollViewRef,\n updateScrollPosition,\n });\n\n const measureObject = useMeasureList(\n virtualizerState.virtualizerStartIndex,\n virtualizerLength,\n props.numItems,\n props.itemSize,\n );\n\n if (enablePagination && measureObject.sizeUpdateCount !== sizeUpdateCount) {\n /* This enables us to let callback know that the sizes have been updated\n triggers a re-render but is only required on pagination (else index change handles) */\n setSizeUpdateCount(measureObject.sizeUpdateCount);\n }\n\n if (axis === 'horizontal') {\n sizeTrackingArray = measureObject.widthArray;\n } else {\n sizeTrackingArray = measureObject.heightArray;\n }\n\n if (!props.getItemSize) {\n // Auto-measuring is required\n React.Children.map(virtualizerState.virtualizedChildren, (child, index) => {\n if (React.isValidElement(child)) {\n virtualizerState.virtualizedChildren[index] = (\n <child.type\n {...child.props}\n key={child.key}\n ref={(element: HTMLElement & IndexedResizeCallbackElement) => {\n if (child.hasOwnProperty('ref')) {\n // We must access this from the child directly, not props (forward ref).\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const localRef = (child as any)?.ref;\n\n if (typeof localRef === 'function') {\n localRef(element);\n } else if (localRef) {\n localRef.current = element;\n }\n }\n\n // Call the auto-measure ref attachment.\n measureObject.createIndexedRef(index)(element);\n }}\n />\n );\n }\n });\n }\n\n return {\n ...virtualizerState,\n components: {\n ...virtualizerState.components,\n container: 'div',\n },\n container: slot.always(props.container, {\n defaultProps: {\n ref: scrollViewRef,\n },\n elementType: 'div',\n }),\n };\n}\n"],"names":["React","slot","useMergedRefs","useVirtualizer_unstable","useDynamicVirtualizerMeasure","useVirtualizerContextState_unstable","scrollToItemDynamic","useMeasureList","useDynamicVirtualizerPagination","useVirtualizerScrollViewDynamic_unstable","props","_imperativeVirtualizerRef","contextState","virtualizerContext","imperativeRef","axis","reversed","imperativeVirtualizerRef","enablePagination","bufferItems","_bufferItems","bufferSize","_bufferSize","sizeTrackingArray","useRef","Array","numItems","fill","itemSize","sizeUpdateCount","setSizeUpdateCount","useState","getChildSizeAuto","useCallback","index","current","length","virtualizerLength","scrollRef","containerSizeRef","updateScrollPosition","defaultItemSize","direction","getItemSize","paginationRef","progressiveItemSizes","progressiveSizes","currentIndex","contextIndex","virtualizerLengthRef","scrollViewRef","scrollCallbackRef","useImperativeHandle","scrollTo","behavior","callback","totalSize","Math","max","setFlaggedIndex","itemSizes","nodeSizes","handleRenderedIndex","virtualizerState","onRenderedFlaggedIndex","measureObject","virtualizerStartIndex","widthArray","heightArray","Children","map","virtualizedChildren","child","isValidElement","type","key","ref","element","hasOwnProperty","localRef","createIndexedRef","components","container","always","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -0,0 +1,46 @@
1
+ import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles';
2
+ import { __styles, mergeClasses } from '@griffel/react';
3
+ const virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';
4
+ export const virtualizerScrollViewDynamicClassNames = {
5
+ ...virtualizerClassNames,
6
+ container: `${virtualizerScrollViewDynamicClassName}__container`
7
+ };
8
+ const useStyles = /*#__PURE__*/__styles({
9
+ base: {
10
+ mc9l5x: "f22iagw",
11
+ a9b677: "fly5x3f",
12
+ Bqenvij: "f1l02sjl"
13
+ },
14
+ vertical: {
15
+ Beiy3e4: "f1vx9l62",
16
+ Bmxbyg5: "f5zp4f"
17
+ },
18
+ horizontal: {
19
+ Beiy3e4: "f1063pyq",
20
+ B68tc82: "f1oy3dpc"
21
+ },
22
+ verticalReversed: {
23
+ Beiy3e4: "f1gkdon0",
24
+ Bmxbyg5: "f5zp4f"
25
+ },
26
+ horizontalReversed: {
27
+ Beiy3e4: "f1oztnx0",
28
+ B68tc82: "f1oy3dpc"
29
+ }
30
+ }, {
31
+ 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;}"]
32
+ });
33
+ /**
34
+ * Apply styling to the Virtualizer states
35
+ */
36
+ export const useVirtualizerScrollViewDynamicStyles_unstable = state => {
37
+ 'use no memo';
38
+
39
+ const styles = useStyles();
40
+ // Default virtualizer styles base
41
+ useVirtualizerStyles_unstable(state);
42
+ const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;
43
+ // Add container styles
44
+ state.container.className = mergeClasses(virtualizerScrollViewDynamicClassNames.container, styles.base, containerStyle, state.container.className);
45
+ return state;
46
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"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"],"sources":["useVirtualizerScrollViewDynamicStyles.styles.js"],"sourcesContent":["import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nconst virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';\nexport 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 */ 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"],"mappings":"AAAA,SAASA,6BAA6B,EAAEC,qBAAqB,QAAQ,4CAA4C;AACjH,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,MAAMC,qCAAqC,GAAG,qCAAqC;AACnF,OAAO,MAAMC,sCAAsC,GAAG;EAClD,GAAGJ,qBAAqB;EACxBK,SAAS,EAAE,GAAGF,qCAAqC;AACvD,CAAC;AACD,MAAMG,SAAS,gBAAGL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,UAAA;IAAAF,OAAA;IAAAG,OAAA;EAAA;EAAAC,gBAAA;IAAAJ,OAAA;IAAAC,OAAA;EAAA;EAAAI,kBAAA;IAAAL,OAAA;IAAAG,OAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,CAsBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8CAA8C,GAAIC,KAAK,IAAG;EACvE,aAAa;;EACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1B;EACAP,6BAA6B,CAACqB,KAAK,CAAC;EACpC,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;EAChL;EACAS,KAAK,CAACf,SAAS,CAACoB,SAAS,GAAGvB,YAAY,CAACE,sCAAsC,CAACC,SAAS,EAAEgB,MAAM,CAACd,IAAI,EAAEe,cAAc,EAAEF,KAAK,CAACf,SAAS,CAACoB,SAAS,CAAC;EAClJ,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -0,0 +1 @@
1
+ import * as React from 'react';
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/hooks.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { DynamicVirtualizerContextProps } from '../Utilities';\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\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\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 */\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 */\nexport interface ResizeCallbackWithRef {\n (\n entries: ResizeObserverEntry[],\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n // eslint-disable-next-line no-restricted-globals\n observer: ResizeObserver,\n scrollRef?: React.MutableRefObject<HTMLElement | null>,\n ): void;\n}\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -1,2 +1,5 @@
1
- export * from './useIntersectionObserver';
2
- //# sourceMappingURL=index.js.map
1
+ export { getRTLRootMargin, useIntersectionObserver } from './useIntersectionObserver';
2
+ export { useStaticVirtualizerMeasure } from './useVirtualizerMeasure';
3
+ export { useDynamicVirtualizerMeasure } from './useDynamicVirtualizerMeasure';
4
+ export { useResizeObserverRef_unstable } from './useResizeObserverRef';
5
+ export { createResizeObserverFromDocument, useMeasureList } from './useMeasureList';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-virtualizer/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './useIntersectionObserver';\n"]}
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"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,uBAAuB,QAAQ,4BAA4B;AACtF,SAASC,2BAA2B,QAAQ,0BAA0B;AACtE,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,6BAA6B,QAAQ,yBAAyB;AASvE,SAASC,gCAAgC,EAAEC,cAAc,QAAQ,mBAAmB"}
@@ -0,0 +1,126 @@
1
+ import * as React from 'react';
2
+ import { useTimeout } from '@fluentui/react-utilities';
3
+ /**
4
+ * Optional hook that will enable pagination on the virtualizer so that it 'autoscrolls' to an items exact position
5
+ * Sizes are dynamic so we require a progressive sizing array (passed in from Dynamic virtualizer hooks)
6
+ * On short scrolls, we will go at minimum to the next/previous item so that arrow pagination works
7
+ * All VirtualizerDynamicPaginationProps can be grabbed from dynamic Virtualizer hooks externally and passed in
8
+ */ export const useDynamicVirtualizerPagination = (virtualizerProps, paginationEnabled = true)=>{
9
+ 'use no memo';
10
+ const { axis = 'vertical', currentIndex, progressiveItemSizes, virtualizerLength } = virtualizerProps;
11
+ const [setScrollTimer, clearScrollTimer] = useTimeout();
12
+ const lastScrollPos = React.useRef(-1);
13
+ const lastIndexScrolled = React.useRef(-1);
14
+ const scrollContainer = React.useRef(null);
15
+ const clearListeners = ()=>{
16
+ if (scrollContainer.current) {
17
+ scrollContainer.current.removeEventListener('scroll', onScroll);
18
+ scrollContainer.current = null;
19
+ clearScrollTimer();
20
+ }
21
+ };
22
+ React.useEffect(()=>{
23
+ return ()=>{
24
+ clearListeners();
25
+ };
26
+ // eslint-disable-next-line react-hooks/exhaustive-deps
27
+ }, []);
28
+ /**
29
+ * Handle scroll stop event and paginate to the closest item
30
+ * If the closest item is the same as the previous scroll end
31
+ * we paginate to the next/previous one based on direction
32
+ *
33
+ * Users/Virtualizer-Hooks must pass in a cumulative array of sizes
34
+ * This prevents the need to recalculate and ensures size arrays are synced externally
35
+ */ const onScrollEnd = React.useCallback(()=>{
36
+ if (!scrollContainer.current || !paginationEnabled || !(progressiveItemSizes === null || progressiveItemSizes === void 0 ? void 0 : progressiveItemSizes.current)) {
37
+ // No container found
38
+ return;
39
+ }
40
+ const currentScrollPos = Math.round(axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft);
41
+ let closestItemPos = 0;
42
+ let closestItem = 0;
43
+ const endItem = Math.min(currentIndex + virtualizerLength, progressiveItemSizes.current.length);
44
+ for(let i = currentIndex; i < endItem - 1; i++){
45
+ if (currentScrollPos <= progressiveItemSizes.current[i + 1] && currentScrollPos >= progressiveItemSizes.current[i]) {
46
+ // Found our in between position
47
+ const distanceToPrev = Math.abs(currentScrollPos - progressiveItemSizes.current[i]);
48
+ const distanceToNext = Math.abs(progressiveItemSizes.current[i + 1] - currentScrollPos);
49
+ if (distanceToPrev < distanceToNext) {
50
+ closestItem = i;
51
+ } else {
52
+ closestItem = i + 1;
53
+ }
54
+ break;
55
+ }
56
+ }
57
+ let nextItem;
58
+ if (Math.round(closestItem - lastIndexScrolled.current) === 0) {
59
+ // Special case for go to next/previous with minimum amount of scroll needed
60
+ const nextTarget = lastScrollPos.current < currentScrollPos ? 1 : -1;
61
+ // This will also handle a case where we scrolled to the exact correct position (noop)
62
+ const isSecondaryScroll = Math.round(lastScrollPos.current - currentScrollPos) === 0;
63
+ const posMod = isSecondaryScroll ? 0 : nextTarget;
64
+ nextItem = closestItem + posMod;
65
+ } else {
66
+ // Pagination for anything else can just jump to the closest!
67
+ nextItem = closestItem;
68
+ }
69
+ // Safeguard nextItem
70
+ nextItem = Math.min(Math.max(0, nextItem), progressiveItemSizes.current.length);
71
+ closestItemPos = progressiveItemSizes.current[nextItem];
72
+ if (axis === 'vertical') {
73
+ scrollContainer.current.scrollTo({
74
+ top: closestItemPos,
75
+ behavior: 'smooth'
76
+ });
77
+ } else {
78
+ scrollContainer.current.scrollTo({
79
+ left: closestItemPos,
80
+ behavior: 'smooth'
81
+ });
82
+ }
83
+ lastScrollPos.current = progressiveItemSizes.current[nextItem];
84
+ lastIndexScrolled.current = nextItem;
85
+ }, [
86
+ paginationEnabled,
87
+ currentIndex,
88
+ scrollContainer,
89
+ virtualizerLength,
90
+ axis,
91
+ progressiveItemSizes
92
+ ]);
93
+ /**
94
+ * On scroll timer that will continuously delay callback until scrolling stops
95
+ */ const onScroll = React.useCallback((event)=>{
96
+ clearScrollTimer();
97
+ setScrollTimer(onScrollEnd, 100);
98
+ }, [
99
+ onScrollEnd,
100
+ clearScrollTimer,
101
+ setScrollTimer
102
+ ]);
103
+ /**
104
+ * Pagination ref will ensure we attach listeners to containers on change
105
+ * It is returned from hook and merged into the scroll container externally
106
+ */ const paginationRef = React.useCallback((instance)=>{
107
+ if (!paginationEnabled) {
108
+ clearListeners();
109
+ scrollContainer.current = null;
110
+ return;
111
+ }
112
+ if (scrollContainer.current !== instance) {
113
+ clearListeners();
114
+ scrollContainer.current = instance;
115
+ if (scrollContainer.current) {
116
+ scrollContainer.current.addEventListener('scroll', onScroll);
117
+ }
118
+ }
119
+ }, // eslint-disable-next-line react-hooks/exhaustive-deps
120
+ [
121
+ onScroll,
122
+ onScrollEnd,
123
+ paginationEnabled
124
+ ]);
125
+ return paginationRef;
126
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useDynamicPagination.ts"],"sourcesContent":["import * as React from 'react';\nimport { VirtualizerDynamicPaginationProps } 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 dynamic so we require a progressive sizing array (passed in from Dynamic virtualizer hooks)\n * On short scrolls, we will go at minimum to the next/previous item so that arrow pagination works\n * All VirtualizerDynamicPaginationProps can be grabbed from dynamic Virtualizer hooks externally and passed in\n */\nexport const useDynamicVirtualizerPagination = (\n virtualizerProps: VirtualizerDynamicPaginationProps,\n paginationEnabled: Boolean = true,\n) => {\n 'use no memo';\n\n const { axis = 'vertical', currentIndex, progressiveItemSizes, virtualizerLength } = virtualizerProps;\n\n const [setScrollTimer, clearScrollTimer] = useTimeout();\n const lastScrollPos = React.useRef<number>(-1);\n const lastIndexScrolled = React.useRef<number>(-1);\n\n const scrollContainer = React.useRef<HTMLElement | null>(null);\n\n const clearListeners = () => {\n if (scrollContainer.current) {\n scrollContainer.current.removeEventListener('scroll', onScroll);\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 * Users/Virtualizer-Hooks must pass in a cumulative array of sizes\n * This prevents the need to recalculate and ensures size arrays are synced externally\n */\n const onScrollEnd = React.useCallback(() => {\n if (!scrollContainer.current || !paginationEnabled || !progressiveItemSizes?.current) {\n // No container found\n return;\n }\n\n const currentScrollPos = Math.round(\n axis === 'vertical' ? scrollContainer.current.scrollTop : scrollContainer.current.scrollLeft,\n );\n let closestItemPos = 0;\n let closestItem = 0;\n const endItem = Math.min(currentIndex + virtualizerLength, progressiveItemSizes.current.length);\n\n for (let i = currentIndex; i < endItem - 1; i++) {\n if (\n currentScrollPos <= progressiveItemSizes.current[i + 1] &&\n currentScrollPos >= progressiveItemSizes.current[i]\n ) {\n // Found our in between position\n const distanceToPrev = Math.abs(currentScrollPos - progressiveItemSizes.current[i]);\n const distanceToNext = Math.abs(progressiveItemSizes.current[i + 1] - currentScrollPos);\n if (distanceToPrev < distanceToNext) {\n closestItem = i;\n } else {\n closestItem = i + 1;\n }\n break;\n }\n }\n\n let nextItem;\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 // This will also handle a case where we scrolled to the exact correct position (noop)\n const isSecondaryScroll = Math.round(lastScrollPos.current - currentScrollPos) === 0;\n const posMod = isSecondaryScroll ? 0 : nextTarget;\n nextItem = closestItem + posMod;\n } else {\n // Pagination for anything else can just jump to the closest!\n nextItem = closestItem;\n }\n\n // Safeguard nextItem\n nextItem = Math.min(Math.max(0, nextItem), progressiveItemSizes.current.length);\n closestItemPos = progressiveItemSizes.current[nextItem];\n\n if (axis === 'vertical') {\n scrollContainer.current.scrollTo({ top: closestItemPos, behavior: 'smooth' });\n } else {\n scrollContainer.current.scrollTo({ left: closestItemPos, behavior: 'smooth' });\n }\n lastScrollPos.current = progressiveItemSizes.current[nextItem];\n lastIndexScrolled.current = nextItem;\n }, [paginationEnabled, currentIndex, scrollContainer, virtualizerLength, axis, progressiveItemSizes]);\n\n /**\n * On scroll timer that will continuously delay callback until scrolling stops\n */\n const onScroll = React.useCallback(\n event => {\n clearScrollTimer();\n setScrollTimer(onScrollEnd, 100);\n },\n [onScrollEnd, clearScrollTimer, setScrollTimer],\n );\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","useDynamicVirtualizerPagination","virtualizerProps","paginationEnabled","axis","currentIndex","progressiveItemSizes","virtualizerLength","setScrollTimer","clearScrollTimer","lastScrollPos","useRef","lastIndexScrolled","scrollContainer","clearListeners","current","removeEventListener","onScroll","useEffect","onScrollEnd","useCallback","currentScrollPos","Math","round","scrollTop","scrollLeft","closestItemPos","closestItem","endItem","min","length","i","distanceToPrev","abs","distanceToNext","nextItem","nextTarget","isSecondaryScroll","posMod","max","scrollTo","top","behavior","left","event","paginationRef","instance","addEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -0,0 +1,126 @@
1
+ import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
2
+ import * as React from 'react';
3
+ import { useResizeObserverRef_unstable } from './useResizeObserverRef';
4
+ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
5
+ /**
6
+ * React hook that measures virtualized space dynamically to ensure optimized virtualization length.
7
+ */ export const useDynamicVirtualizerMeasure = (virtualizerProps)=>{
8
+ const { defaultItemSize, direction = 'vertical', numItems, getItemSize, bufferItems, bufferSize, virtualizerContext } = virtualizerProps;
9
+ const [state, setState] = React.useState({
10
+ virtualizerLength: 0,
11
+ virtualizerBufferItems: 0,
12
+ virtualizerBufferSize: 0
13
+ });
14
+ const containerSizeRef = React.useRef(0);
15
+ const scrollPosition = React.useRef(0);
16
+ const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;
17
+ const { targetDocument } = useFluent();
18
+ const container = React.useRef(null);
19
+ const handleScrollResize = React.useCallback((scrollRef)=>{
20
+ if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
21
+ // Error? ignore?
22
+ return;
23
+ }
24
+ if (scrollRef.current !== (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
25
+ // We have a local scroll container
26
+ 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;
27
+ } else if (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) {
28
+ var _targetDocument_defaultView, _targetDocument_defaultView1;
29
+ // If our scroll ref is the document body, we should check window height
30
+ 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;
31
+ }
32
+ let indexSizer = 0;
33
+ let i = 0;
34
+ let length = 0;
35
+ const startIndex = virtualizerContext.contextIndex;
36
+ const sizeToBeat = containerSizeRef.current + virtualizerBufferSize * 2;
37
+ while(indexSizer <= sizeToBeat && i + startIndex < numItems){
38
+ const iItemSize = getItemSize(startIndex + i);
39
+ if (virtualizerContext.childProgressiveSizes.current.length < numItems) {
40
+ /* We are in unknown territory, either an initial render or an update
41
+ in virtualizer item length has occurred.
42
+ We need to let the new items render first then we can accurately assess.*/ return virtualizerLength - virtualizerBufferSize * 2;
43
+ }
44
+ const currentScrollPos = scrollPosition.current;
45
+ const currentItemPos = virtualizerContext.childProgressiveSizes.current[startIndex + i] - iItemSize;
46
+ if (currentScrollPos > currentItemPos + iItemSize) {
47
+ // The item isn't in view, ignore for now.
48
+ i++;
49
+ continue;
50
+ } else if (currentScrollPos > currentItemPos) {
51
+ // The item is partially out of view, ignore the out of bounds portion
52
+ const variance = currentItemPos + iItemSize - currentScrollPos;
53
+ indexSizer += variance;
54
+ } else {
55
+ // Item is in view
56
+ indexSizer += iItemSize;
57
+ }
58
+ // Increment
59
+ i++;
60
+ length++;
61
+ }
62
+ /*
63
+ * Number of items to append at each end, i.e. 'preload' each side before entering view.
64
+ * Minimum: 2 - we give slightly more buffer for dynamic version.
65
+ */ const newBufferItems = bufferItems !== null && bufferItems !== void 0 ? bufferItems : Math.max(Math.ceil(length / 3), 1);
66
+ /*
67
+ * This is how far we deviate into the bufferItems to detect a redraw.
68
+ */ const newBufferSize = bufferSize !== null && bufferSize !== void 0 ? bufferSize : Math.max(defaultItemSize / 2, 1);
69
+ const totalLength = length + newBufferItems * 2;
70
+ setState({
71
+ virtualizerLength: totalLength,
72
+ virtualizerBufferSize: newBufferSize,
73
+ virtualizerBufferItems: newBufferItems
74
+ });
75
+ }, [
76
+ bufferItems,
77
+ bufferSize,
78
+ defaultItemSize,
79
+ direction,
80
+ getItemSize,
81
+ numItems,
82
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body,
83
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView,
84
+ virtualizerBufferSize,
85
+ virtualizerContext.childProgressiveSizes,
86
+ virtualizerContext.contextIndex,
87
+ virtualizerLength
88
+ ]);
89
+ const resizeCallback = React.useCallback((_entries, // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
90
+ // eslint-disable-next-line no-restricted-globals
91
+ _observer, scrollRef)=>{
92
+ if (scrollRef) {
93
+ handleScrollResize(scrollRef);
94
+ }
95
+ }, [
96
+ handleScrollResize
97
+ ]);
98
+ const scrollRef = useMergedRefs(container, useResizeObserverRef_unstable(resizeCallback));
99
+ useIsomorphicLayoutEffect(()=>{
100
+ if (virtualizerContext.contextIndex + virtualizerLength < numItems) {
101
+ // Avoid re-rendering/re-calculating when the end index has already been reached
102
+ handleScrollResize(container);
103
+ }
104
+ }, [
105
+ handleScrollResize,
106
+ numItems,
107
+ virtualizerContext.contextIndex,
108
+ virtualizerLength
109
+ ]);
110
+ const updateScrollPosition = React.useCallback((_scrollPosition)=>{
111
+ scrollPosition.current = _scrollPosition;
112
+ // Check if our vLength's need recalculating
113
+ handleScrollResize(scrollRef);
114
+ }, [
115
+ handleScrollResize,
116
+ scrollRef
117
+ ]);
118
+ return {
119
+ virtualizerLength,
120
+ bufferItems: virtualizerBufferItems,
121
+ bufferSize: virtualizerBufferSize,
122
+ scrollRef,
123
+ containerSizeRef,
124
+ updateScrollPosition
125
+ };
126
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/hooks/useDynamicVirtualizerMeasure.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { VirtualizerMeasureDynamicProps } 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 dynamically to ensure optimized virtualization length.\n */\nexport const useDynamicVirtualizerMeasure = <TElement extends HTMLElement>(\n virtualizerProps: VirtualizerMeasureDynamicProps,\n): {\n virtualizerLength: number;\n bufferItems: number;\n bufferSize: number;\n scrollRef: (instance: TElement | null) => void;\n containerSizeRef: React.RefObject<number>;\n updateScrollPosition: (scrollPosition: number) => void;\n} => {\n const {\n defaultItemSize,\n direction = 'vertical',\n numItems,\n getItemSize,\n bufferItems,\n bufferSize,\n virtualizerContext,\n } = virtualizerProps;\n\n const [state, setState] = React.useState({\n virtualizerLength: 0,\n virtualizerBufferItems: 0,\n virtualizerBufferSize: 0,\n });\n\n const containerSizeRef = React.useRef<number>(0);\n const scrollPosition = React.useRef<number>(0);\n const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;\n\n const { targetDocument } = useFluent();\n const container = React.useRef<HTMLElement | null>(null);\n const handleScrollResize = React.useCallback(\n (scrollRef: React.MutableRefObject<HTMLElement | null>) => {\n if (!scrollRef?.current) {\n // Error? ignore?\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 let indexSizer = 0;\n let i = 0;\n let length = 0;\n\n const startIndex = virtualizerContext.contextIndex;\n const sizeToBeat = containerSizeRef.current + virtualizerBufferSize * 2;\n\n while (indexSizer <= sizeToBeat && i + startIndex < numItems) {\n const iItemSize = getItemSize(startIndex + i);\n if (virtualizerContext.childProgressiveSizes.current.length < numItems) {\n /* We are in unknown territory, either an initial render or an update\n in virtualizer item length has occurred.\n We need to let the new items render first then we can accurately assess.*/\n return virtualizerLength - virtualizerBufferSize * 2;\n }\n\n const currentScrollPos = scrollPosition.current;\n const currentItemPos = virtualizerContext.childProgressiveSizes.current[startIndex + i] - iItemSize;\n\n if (currentScrollPos > currentItemPos + iItemSize) {\n // The item isn't in view, ignore for now.\n i++;\n continue;\n } else if (currentScrollPos > currentItemPos) {\n // The item is partially out of view, ignore the out of bounds portion\n const variance = currentItemPos + iItemSize - currentScrollPos;\n indexSizer += variance;\n } else {\n // Item is in view\n indexSizer += iItemSize;\n }\n // Increment\n i++;\n length++;\n }\n\n /*\n * Number of items to append at each end, i.e. 'preload' each side before entering view.\n * Minimum: 2 - we give slightly more buffer for dynamic version.\n */\n const newBufferItems = bufferItems ?? Math.max(Math.ceil(length / 3), 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, 1);\n const totalLength = length + newBufferItems * 2;\n\n setState({\n virtualizerLength: totalLength,\n virtualizerBufferSize: newBufferSize,\n virtualizerBufferItems: newBufferItems,\n });\n },\n [\n bufferItems,\n bufferSize,\n defaultItemSize,\n direction,\n getItemSize,\n numItems,\n targetDocument?.body,\n targetDocument?.defaultView,\n virtualizerBufferSize,\n virtualizerContext.childProgressiveSizes,\n virtualizerContext.contextIndex,\n virtualizerLength,\n ],\n );\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 // eslint-disable-next-line no-restricted-globals\n _observer: ResizeObserver,\n scrollRef?: React.MutableRefObject<HTMLElement | null>,\n ) => {\n if (scrollRef) {\n handleScrollResize(scrollRef);\n }\n },\n [handleScrollResize],\n );\n\n const scrollRef = useMergedRefs(container, useResizeObserverRef_unstable(resizeCallback));\n\n useIsomorphicLayoutEffect(() => {\n if (virtualizerContext.contextIndex + virtualizerLength < numItems) {\n // Avoid re-rendering/re-calculating when the end index has already been reached\n handleScrollResize(container);\n }\n }, [handleScrollResize, numItems, virtualizerContext.contextIndex, virtualizerLength]);\n\n const updateScrollPosition = React.useCallback(\n (_scrollPosition: number) => {\n scrollPosition.current = _scrollPosition;\n // Check if our vLength's need recalculating\n handleScrollResize(scrollRef);\n },\n [handleScrollResize, scrollRef],\n );\n\n return {\n virtualizerLength,\n bufferItems: virtualizerBufferItems,\n bufferSize: virtualizerBufferSize,\n scrollRef,\n containerSizeRef,\n updateScrollPosition,\n };\n};\n"],"names":["useIsomorphicLayoutEffect","useMergedRefs","React","useResizeObserverRef_unstable","useFluent_unstable","useFluent","useDynamicVirtualizerMeasure","virtualizerProps","defaultItemSize","direction","numItems","getItemSize","bufferItems","bufferSize","virtualizerContext","state","setState","useState","virtualizerLength","virtualizerBufferItems","virtualizerBufferSize","containerSizeRef","useRef","scrollPosition","targetDocument","container","handleScrollResize","useCallback","scrollRef","current","body","getBoundingClientRect","height","width","defaultView","innerHeight","innerWidth","indexSizer","i","length","startIndex","contextIndex","sizeToBeat","iItemSize","childProgressiveSizes","currentScrollPos","currentItemPos","variance","newBufferItems","Math","max","ceil","newBufferSize","totalLength","resizeCallback","_entries","_observer","updateScrollPosition","_scrollPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}