@fluentui/react-virtualizer 9.0.0-alpha.6 → 9.0.0-alpha.61

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 (175) hide show
  1. package/CHANGELOG.md +552 -2
  2. package/dist/index.d.ts +240 -30
  3. package/lib/Hooks.js +0 -1
  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 +0 -1
  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 +5 -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 +1 -2
  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 +434 -355
  22. package/lib/components/Virtualizer/useVirtualizer.js.map +1 -1
  23. package/lib/components/Virtualizer/{useVirtualizerStyles.js → useVirtualizerStyles.styles.js} +3 -3
  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 +5 -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 +76 -0
  34. package/lib/components/VirtualizerScrollView/useVirtualizerScrollView.js.map +1 -0
  35. package/lib/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js +45 -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 +5 -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 +137 -0
  46. package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map +1 -0
  47. package/lib/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js +45 -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 +4 -1
  52. package/lib/hooks/index.js.map +1 -1
  53. package/lib/hooks/useDynamicVirtualizerMeasure.js +99 -0
  54. package/lib/hooks/useDynamicVirtualizerMeasure.js.map +1 -0
  55. package/lib/hooks/useIntersectionObserver.js +108 -40
  56. package/lib/hooks/useIntersectionObserver.js.map +1 -1
  57. package/lib/hooks/useMeasureList.js +101 -0
  58. package/lib/hooks/useMeasureList.js.map +1 -0
  59. package/lib/hooks/useMutationObserver.js +28 -0
  60. package/lib/hooks/useMutationObserver.js.map +1 -0
  61. package/lib/hooks/useResizeObserverRef.js +47 -0
  62. package/lib/hooks/useResizeObserverRef.js.map +1 -0
  63. package/lib/hooks/useVirtualizerMeasure.js +44 -0
  64. package/lib/hooks/useVirtualizerMeasure.js.map +1 -0
  65. package/lib/index.js +4 -2
  66. package/lib/index.js.map +1 -1
  67. package/lib/utilities/ImperativeScrolling/imperativeScrolling.js +32 -0
  68. package/lib/utilities/ImperativeScrolling/imperativeScrolling.js.map +1 -0
  69. package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js +1 -0
  70. package/lib/utilities/ImperativeScrolling/imperativeScrolling.types.js.map +1 -0
  71. package/lib/utilities/ImperativeScrolling/imperativeScrollingDynamic.js +45 -0
  72. package/lib/utilities/ImperativeScrolling/imperativeScrollingDynamic.js.map +1 -0
  73. package/lib/utilities/ImperativeScrolling/index.js +3 -0
  74. package/lib/utilities/ImperativeScrolling/index.js.map +1 -0
  75. package/lib/utilities/VirtualizerContext/VirtualizerContext.js +33 -0
  76. package/lib/utilities/VirtualizerContext/VirtualizerContext.js.map +1 -0
  77. package/lib/utilities/VirtualizerContext/index.js +2 -0
  78. package/lib/utilities/VirtualizerContext/index.js.map +1 -0
  79. package/lib/utilities/VirtualizerContext/types.js +3 -0
  80. package/lib/utilities/VirtualizerContext/types.js.map +1 -0
  81. package/lib/utilities/createResizeObserverFromDocument.js +13 -0
  82. package/lib/utilities/createResizeObserverFromDocument.js.map +1 -0
  83. package/lib/utilities/debounce.js +19 -0
  84. package/lib/utilities/debounce.js.map +1 -0
  85. package/lib/utilities/index.js +2 -0
  86. package/lib/utilities/index.js.map +1 -0
  87. package/lib-commonjs/Hooks.js +3 -5
  88. package/lib-commonjs/Hooks.js.map +1 -1
  89. package/lib-commonjs/Utilities.js +6 -0
  90. package/lib-commonjs/Utilities.js.map +1 -0
  91. package/lib-commonjs/Virtualizer.js +3 -5
  92. package/lib-commonjs/Virtualizer.js.map +1 -1
  93. package/lib-commonjs/VirtualizerScrollView.js +6 -0
  94. package/lib-commonjs/VirtualizerScrollView.js.map +1 -0
  95. package/lib-commonjs/VirtualizerScrollViewDynamic.js +6 -0
  96. package/lib-commonjs/VirtualizerScrollViewDynamic.js.map +1 -0
  97. package/lib-commonjs/components/Virtualizer/Virtualizer.js +15 -18
  98. package/lib-commonjs/components/Virtualizer/Virtualizer.js.map +1 -1
  99. package/lib-commonjs/components/Virtualizer/Virtualizer.types.js +3 -3
  100. package/lib-commonjs/components/Virtualizer/Virtualizer.types.js.map +1 -1
  101. package/lib-commonjs/components/Virtualizer/index.js +7 -9
  102. package/lib-commonjs/components/Virtualizer/index.js.map +1 -1
  103. package/lib-commonjs/components/Virtualizer/renderVirtualizer.js +38 -21
  104. package/lib-commonjs/components/Virtualizer/renderVirtualizer.js.map +1 -1
  105. package/lib-commonjs/components/Virtualizer/useVirtualizer.js +443 -361
  106. package/lib-commonjs/components/Virtualizer/useVirtualizer.js.map +1 -1
  107. package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.styles.js +122 -0
  108. package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.styles.js.map +1 -0
  109. package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.js +21 -0
  110. package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.js.map +1 -0
  111. package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.types.js +4 -0
  112. package/lib-commonjs/components/VirtualizerScrollView/VirtualizerScrollView.types.js.map +1 -0
  113. package/lib-commonjs/components/VirtualizerScrollView/index.js +10 -0
  114. package/lib-commonjs/components/VirtualizerScrollView/index.js.map +1 -0
  115. package/lib-commonjs/components/VirtualizerScrollView/renderVirtualizerScrollView.js +19 -0
  116. package/lib-commonjs/components/VirtualizerScrollView/renderVirtualizerScrollView.js.map +1 -0
  117. package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js +86 -0
  118. package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollView.js.map +1 -0
  119. package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js +69 -0
  120. package/lib-commonjs/components/VirtualizerScrollView/useVirtualizerScrollViewStyles.styles.js.map +1 -0
  121. package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js +21 -0
  122. package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.js.map +1 -0
  123. package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js +4 -0
  124. package/lib-commonjs/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.js.map +1 -0
  125. package/lib-commonjs/components/VirtualizerScrollViewDynamic/index.js +10 -0
  126. package/lib-commonjs/components/VirtualizerScrollViewDynamic/index.js.map +1 -0
  127. package/lib-commonjs/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js +19 -0
  128. package/lib-commonjs/components/VirtualizerScrollViewDynamic/renderVirtualizerScrollViewDynamic.js.map +1 -0
  129. package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js +147 -0
  130. package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.js.map +1 -0
  131. package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js +69 -0
  132. package/lib-commonjs/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamicStyles.styles.js.map +1 -0
  133. package/lib-commonjs/hooks/hooks.types.js +4 -0
  134. package/lib-commonjs/hooks/hooks.types.js.map +1 -0
  135. package/lib-commonjs/hooks/index.js +7 -5
  136. package/lib-commonjs/hooks/index.js.map +1 -1
  137. package/lib-commonjs/hooks/useDynamicVirtualizerMeasure.js +107 -0
  138. package/lib-commonjs/hooks/useDynamicVirtualizerMeasure.js.map +1 -0
  139. package/lib-commonjs/hooks/useIntersectionObserver.js +120 -53
  140. package/lib-commonjs/hooks/useIntersectionObserver.js.map +1 -1
  141. package/lib-commonjs/hooks/useMeasureList.js +108 -0
  142. package/lib-commonjs/hooks/useMeasureList.js.map +1 -0
  143. package/lib-commonjs/hooks/useMutationObserver.js +38 -0
  144. package/lib-commonjs/hooks/useMutationObserver.js.map +1 -0
  145. package/lib-commonjs/hooks/useResizeObserverRef.js +56 -0
  146. package/lib-commonjs/hooks/useResizeObserverRef.js.map +1 -0
  147. package/lib-commonjs/hooks/useVirtualizerMeasure.js +53 -0
  148. package/lib-commonjs/hooks/useVirtualizerMeasure.js.map +1 -0
  149. package/lib-commonjs/index.js +82 -41
  150. package/lib-commonjs/index.js.map +1 -1
  151. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.js +42 -0
  152. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.js.map +1 -0
  153. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.types.js +4 -0
  154. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrolling.types.js.map +1 -0
  155. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrollingDynamic.js +55 -0
  156. package/lib-commonjs/utilities/ImperativeScrolling/imperativeScrollingDynamic.js.map +1 -0
  157. package/lib-commonjs/utilities/ImperativeScrolling/index.js +8 -0
  158. package/lib-commonjs/utilities/ImperativeScrolling/index.js.map +1 -0
  159. package/lib-commonjs/utilities/VirtualizerContext/VirtualizerContext.js +54 -0
  160. package/lib-commonjs/utilities/VirtualizerContext/VirtualizerContext.js.map +1 -0
  161. package/lib-commonjs/utilities/VirtualizerContext/index.js +7 -0
  162. package/lib-commonjs/utilities/VirtualizerContext/index.js.map +1 -0
  163. package/lib-commonjs/utilities/VirtualizerContext/types.js +6 -0
  164. package/lib-commonjs/utilities/VirtualizerContext/types.js.map +1 -0
  165. package/lib-commonjs/utilities/createResizeObserverFromDocument.js +23 -0
  166. package/lib-commonjs/utilities/createResizeObserverFromDocument.js.map +1 -0
  167. package/lib-commonjs/utilities/debounce.js +29 -0
  168. package/lib-commonjs/utilities/debounce.js.map +1 -0
  169. package/lib-commonjs/utilities/index.js +7 -0
  170. package/lib-commonjs/utilities/index.js.map +1 -0
  171. package/package.json +22 -12
  172. package/CHANGELOG.json +0 -95
  173. package/lib/components/Virtualizer/useVirtualizerStyles.js.map +0 -1
  174. package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.js +0 -115
  175. package/lib-commonjs/components/Virtualizer/useVirtualizerStyles.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["renderVirtualizerScrollViewDynamic.js"],"sourcesContent":[" import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { renderVirtualizer_unstable } from '../Virtualizer/renderVirtualizer';\nexport const renderVirtualizerScrollViewDynamic_unstable = (state)=>{\n assertSlots(state);\n return /*#__PURE__*/ _jsx(state.container, {\n children: renderVirtualizer_unstable(state)\n });\n};\n"],"names":["renderVirtualizerScrollViewDynamic_unstable","state","assertSlots","_jsx","container","children","renderVirtualizer_unstable"],"mappings":";;;;+BAGaA;;;eAAAA;;;4BAHiB;gCACF;mCACe;AACpC,MAAMA,8CAA8C,CAACC;IACxDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,eAAI,EAACF,MAAMG,SAAS,EAAE;QACvCC,UAAUC,IAAAA,6CAA0B,EAACL;IACzC;AACJ"}
@@ -0,0 +1,147 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useVirtualizerScrollViewDynamic_unstable", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useVirtualizerScrollViewDynamic_unstable;
9
+ }
10
+ });
11
+ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
+ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
+ const _reactutilities = require("@fluentui/react-utilities");
14
+ const _useVirtualizer = require("../Virtualizer/useVirtualizer");
15
+ const _Hooks = require("../../Hooks");
16
+ const _Utilities = require("../../Utilities");
17
+ const _useMeasureList = require("../../hooks/useMeasureList");
18
+ function useVirtualizerScrollViewDynamic_unstable(props) {
19
+ const contextState = (0, _Utilities.useVirtualizerContextState_unstable)(props.virtualizerContext);
20
+ const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef } = props;
21
+ let sizeTrackingArray = _react.useRef(new Array(props.numItems).fill(props.itemSize));
22
+ const getChildSizeAuto = _react.useCallback((index)=>{
23
+ if (sizeTrackingArray.current.length <= index || sizeTrackingArray.current[index] <= 0) {
24
+ // Default size for initial state or untracked
25
+ return props.itemSize;
26
+ }
27
+ /* Required to be defined prior to our measure function
28
+ * we use a sizing array ref that we will update post-render
29
+ */ return sizeTrackingArray.current[index];
30
+ }, [
31
+ sizeTrackingArray,
32
+ props.itemSize
33
+ ]);
34
+ var _props_axis, _props_getItemSize, _contextState_contextIndex;
35
+ const { virtualizerLength, bufferItems, bufferSize, scrollRef } = (0, _Hooks.useDynamicVirtualizerMeasure)({
36
+ defaultItemSize: props.itemSize,
37
+ direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical',
38
+ getItemSize: (_props_getItemSize = props.getItemSize) !== null && _props_getItemSize !== void 0 ? _props_getItemSize : getChildSizeAuto,
39
+ currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0,
40
+ numItems: props.numItems
41
+ });
42
+ // Store the virtualizer length as a ref for imperative ref access
43
+ const virtualizerLengthRef = _react.useRef(virtualizerLength);
44
+ if (virtualizerLengthRef.current !== virtualizerLength) {
45
+ virtualizerLengthRef.current = virtualizerLength;
46
+ }
47
+ const scrollViewRef = (0, _reactutilities.useMergedRefs)(props.scrollViewRef, scrollRef);
48
+ const scrollCallbackRef = _react.useRef(null);
49
+ const _imperativeVirtualizerRef = (0, _reactutilities.useMergedRefs)(_react.useRef(null), imperativeVirtualizerRef);
50
+ (0, _react.useImperativeHandle)(imperativeRef, ()=>{
51
+ var _imperativeVirtualizerRef_current;
52
+ return {
53
+ scrollTo (index, behavior = 'auto', callback) {
54
+ scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;
55
+ if (_imperativeVirtualizerRef.current) {
56
+ var _imperativeVirtualizerRef_current;
57
+ const progressiveSizes = _imperativeVirtualizerRef.current.progressiveSizes.current;
58
+ const totalSize = progressiveSizes && (progressiveSizes === null || progressiveSizes === void 0 ? void 0 : progressiveSizes.length) > 0 ? progressiveSizes[Math.max(progressiveSizes.length - 1, 0)] : 0;
59
+ _imperativeVirtualizerRef.current.setFlaggedIndex(index);
60
+ (0, _Utilities.scrollToItemDynamic)({
61
+ index,
62
+ itemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.nodeSizes,
63
+ totalSize,
64
+ scrollViewRef,
65
+ axis,
66
+ reversed,
67
+ behavior
68
+ });
69
+ }
70
+ },
71
+ currentIndex: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,
72
+ virtualizerLength: virtualizerLengthRef
73
+ };
74
+ }, [
75
+ axis,
76
+ scrollViewRef,
77
+ reversed,
78
+ _imperativeVirtualizerRef
79
+ ]);
80
+ const handleRenderedIndex = (index)=>{
81
+ if (scrollCallbackRef.current) {
82
+ scrollCallbackRef.current(index);
83
+ }
84
+ };
85
+ var _props_getItemSize1;
86
+ const virtualizerState = (0, _useVirtualizer.useVirtualizer_unstable)({
87
+ ...props,
88
+ getItemSize: (_props_getItemSize1 = props.getItemSize) !== null && _props_getItemSize1 !== void 0 ? _props_getItemSize1 : getChildSizeAuto,
89
+ virtualizerLength,
90
+ bufferItems,
91
+ bufferSize,
92
+ scrollViewRef,
93
+ virtualizerContext: contextState,
94
+ imperativeVirtualizerRef: _imperativeVirtualizerRef,
95
+ onRenderedFlaggedIndex: handleRenderedIndex
96
+ });
97
+ const measureObject = (0, _useMeasureList.useMeasureList)(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);
98
+ if (axis === 'horizontal') {
99
+ sizeTrackingArray = measureObject.widthArray;
100
+ } else {
101
+ sizeTrackingArray = measureObject.heightArray;
102
+ }
103
+ if (!props.getItemSize) {
104
+ // Auto-measuring is required
105
+ _react.Children.map(virtualizerState.virtualizedChildren, (child, index)=>{
106
+ if (/*#__PURE__*/ _react.isValidElement(child)) {
107
+ virtualizerState.virtualizedChildren[index] = /*#__PURE__*/ _react.createElement(child.type, {
108
+ ...child.props,
109
+ key: child.key,
110
+ ref: (element)=>{
111
+ // If a ref exists in props, call it
112
+ if (typeof child.props.ref === 'function') {
113
+ child.props.ref(element);
114
+ } else if (child.props.ref) {
115
+ child.props.ref.current = element;
116
+ }
117
+ if (child.hasOwnProperty('ref')) {
118
+ // We must access this from the child directly, not props (forward ref).
119
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
120
+ const localRef = child === null || child === void 0 ? void 0 : child.ref;
121
+ if (typeof localRef === 'function') {
122
+ localRef(element);
123
+ } else if (localRef) {
124
+ localRef.current = element;
125
+ }
126
+ }
127
+ // Call the auto-measure ref attachment.
128
+ measureObject.createIndexedRef(index)(element);
129
+ }
130
+ });
131
+ }
132
+ });
133
+ }
134
+ return {
135
+ ...virtualizerState,
136
+ components: {
137
+ ...virtualizerState.components,
138
+ container: 'div'
139
+ },
140
+ container: _reactutilities.slot.always(props.container, {
141
+ defaultProps: {
142
+ ref: scrollViewRef
143
+ },
144
+ elementType: 'div'
145
+ })
146
+ };
147
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useVirtualizerScrollViewDynamic.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useVirtualizer_unstable } from '../Virtualizer/useVirtualizer';\nimport { useDynamicVirtualizerMeasure } from '../../Hooks';\nimport { useVirtualizerContextState_unstable, scrollToItemDynamic } from '../../Utilities';\nimport { useImperativeHandle } from 'react';\nimport { useMeasureList } from '../../hooks/useMeasureList';\nexport function useVirtualizerScrollViewDynamic_unstable(props) {\n const contextState = useVirtualizerContextState_unstable(props.virtualizerContext);\n const { imperativeRef, axis = 'vertical', reversed, imperativeVirtualizerRef } = props;\n let sizeTrackingArray = React.useRef(new Array(props.numItems).fill(props.itemSize));\n const getChildSizeAuto = React.useCallback((index)=>{\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 */ return sizeTrackingArray.current[index];\n }, [\n sizeTrackingArray,\n props.itemSize\n ]);\n var _props_axis, _props_getItemSize, _contextState_contextIndex;\n const { virtualizerLength, bufferItems, bufferSize, scrollRef } = useDynamicVirtualizerMeasure({\n defaultItemSize: props.itemSize,\n direction: (_props_axis = props.axis) !== null && _props_axis !== void 0 ? _props_axis : 'vertical',\n getItemSize: (_props_getItemSize = props.getItemSize) !== null && _props_getItemSize !== void 0 ? _props_getItemSize : getChildSizeAuto,\n currentIndex: (_contextState_contextIndex = contextState === null || contextState === void 0 ? void 0 : contextState.contextIndex) !== null && _contextState_contextIndex !== void 0 ? _contextState_contextIndex : 0,\n numItems: props.numItems\n });\n // Store the virtualizer length as a ref for imperative ref access\n const virtualizerLengthRef = React.useRef(virtualizerLength);\n if (virtualizerLengthRef.current !== virtualizerLength) {\n virtualizerLengthRef.current = virtualizerLength;\n }\n const scrollViewRef = useMergedRefs(props.scrollViewRef, scrollRef);\n const scrollCallbackRef = React.useRef(null);\n const _imperativeVirtualizerRef = useMergedRefs(React.useRef(null), imperativeVirtualizerRef);\n useImperativeHandle(imperativeRef, ()=>{\n var _imperativeVirtualizerRef_current;\n return {\n scrollTo (index, behavior = 'auto', callback) {\n scrollCallbackRef.current = callback !== null && callback !== void 0 ? callback : null;\n if (_imperativeVirtualizerRef.current) {\n var _imperativeVirtualizerRef_current;\n const progressiveSizes = _imperativeVirtualizerRef.current.progressiveSizes.current;\n const totalSize = progressiveSizes && (progressiveSizes === null || progressiveSizes === void 0 ? void 0 : progressiveSizes.length) > 0 ? progressiveSizes[Math.max(progressiveSizes.length - 1, 0)] : 0;\n _imperativeVirtualizerRef.current.setFlaggedIndex(index);\n scrollToItemDynamic({\n index,\n itemSizes: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.nodeSizes,\n totalSize,\n scrollViewRef,\n axis,\n reversed,\n behavior\n });\n }\n },\n currentIndex: (_imperativeVirtualizerRef_current = _imperativeVirtualizerRef.current) === null || _imperativeVirtualizerRef_current === void 0 ? void 0 : _imperativeVirtualizerRef_current.currentIndex,\n virtualizerLength: virtualizerLengthRef\n };\n }, [\n axis,\n scrollViewRef,\n reversed,\n _imperativeVirtualizerRef\n ]);\n const handleRenderedIndex = (index)=>{\n if (scrollCallbackRef.current) {\n scrollCallbackRef.current(index);\n }\n };\n var _props_getItemSize1;\n const virtualizerState = useVirtualizer_unstable({\n ...props,\n getItemSize: (_props_getItemSize1 = props.getItemSize) !== null && _props_getItemSize1 !== void 0 ? _props_getItemSize1 : getChildSizeAuto,\n virtualizerLength,\n bufferItems,\n bufferSize,\n scrollViewRef,\n virtualizerContext: contextState,\n imperativeVirtualizerRef: _imperativeVirtualizerRef,\n onRenderedFlaggedIndex: handleRenderedIndex\n });\n const measureObject = useMeasureList(virtualizerState.virtualizerStartIndex, virtualizerLength, props.numItems, props.itemSize);\n if (axis === 'horizontal') {\n sizeTrackingArray = measureObject.widthArray;\n } else {\n sizeTrackingArray = measureObject.heightArray;\n }\n if (!props.getItemSize) {\n // Auto-measuring is required\n React.Children.map(virtualizerState.virtualizedChildren, (child, index)=>{\n if (/*#__PURE__*/ React.isValidElement(child)) {\n virtualizerState.virtualizedChildren[index] = /*#__PURE__*/ React.createElement(child.type, {\n ...child.props,\n key: child.key,\n ref: (element)=>{\n // If a ref exists in props, call it\n if (typeof child.props.ref === 'function') {\n child.props.ref(element);\n } else if (child.props.ref) {\n child.props.ref.current = element;\n }\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 === null || child === void 0 ? void 0 : child.ref;\n if (typeof localRef === 'function') {\n localRef(element);\n } else if (localRef) {\n localRef.current = element;\n }\n }\n // Call the auto-measure ref attachment.\n measureObject.createIndexedRef(index)(element);\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":["useVirtualizerScrollViewDynamic_unstable","props","contextState","useVirtualizerContextState_unstable","virtualizerContext","imperativeRef","axis","reversed","imperativeVirtualizerRef","sizeTrackingArray","React","useRef","Array","numItems","fill","itemSize","getChildSizeAuto","useCallback","index","current","length","_props_axis","_props_getItemSize","_contextState_contextIndex","virtualizerLength","bufferItems","bufferSize","scrollRef","useDynamicVirtualizerMeasure","defaultItemSize","direction","getItemSize","currentIndex","contextIndex","virtualizerLengthRef","scrollViewRef","useMergedRefs","scrollCallbackRef","_imperativeVirtualizerRef","useImperativeHandle","_imperativeVirtualizerRef_current","scrollTo","behavior","callback","progressiveSizes","totalSize","Math","max","setFlaggedIndex","scrollToItemDynamic","itemSizes","nodeSizes","handleRenderedIndex","_props_getItemSize1","virtualizerState","useVirtualizer_unstable","onRenderedFlaggedIndex","measureObject","useMeasureList","virtualizerStartIndex","widthArray","heightArray","Children","map","virtualizedChildren","child","isValidElement","createElement","type","key","ref","element","hasOwnProperty","localRef","createIndexedRef","components","container","slot","always","defaultProps","elementType"],"mappings":"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"}
@@ -0,0 +1,69 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ virtualizerScrollViewDynamicClassNames: function() {
13
+ return virtualizerScrollViewDynamicClassNames;
14
+ },
15
+ useVirtualizerScrollViewDynamicStyles_unstable: function() {
16
+ return useVirtualizerScrollViewDynamicStyles_unstable;
17
+ }
18
+ });
19
+ const _useVirtualizerStylesstyles = require("../Virtualizer/useVirtualizerStyles.styles");
20
+ const _react = require("@griffel/react");
21
+ const virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';
22
+ const virtualizerScrollViewDynamicClassNames = {
23
+ ..._useVirtualizerStylesstyles.virtualizerClassNames,
24
+ container: `${virtualizerScrollViewDynamicClassName}__container`
25
+ };
26
+ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
27
+ base: {
28
+ mc9l5x: "f22iagw",
29
+ a9b677: "fly5x3f",
30
+ Bqenvij: "f1l02sjl"
31
+ },
32
+ vertical: {
33
+ Beiy3e4: "f1vx9l62",
34
+ Bmxbyg5: "f5zp4f"
35
+ },
36
+ horizontal: {
37
+ Beiy3e4: "f1063pyq",
38
+ B68tc82: "f1oy3dpc"
39
+ },
40
+ verticalReversed: {
41
+ Beiy3e4: "f1gkdon0",
42
+ Bmxbyg5: "f5zp4f"
43
+ },
44
+ horizontalReversed: {
45
+ Beiy3e4: "f1oztnx0",
46
+ B68tc82: "f1oy3dpc"
47
+ }
48
+ }, {
49
+ d: [
50
+ ".f22iagw{display:flex;}",
51
+ ".fly5x3f{width:100%;}",
52
+ ".f1l02sjl{height:100%;}",
53
+ ".f1vx9l62{flex-direction:column;}",
54
+ ".f5zp4f{overflow-y:auto;}",
55
+ ".f1063pyq{flex-direction:row;}",
56
+ ".f1oy3dpc{overflow-x:auto;}",
57
+ ".f1gkdon0{flex-direction:column-reverse;}",
58
+ ".f1oztnx0{flex-direction:row-reverse;}"
59
+ ]
60
+ });
61
+ const useVirtualizerScrollViewDynamicStyles_unstable = (state)=>{
62
+ const styles = useStyles();
63
+ // Default virtualizer styles base
64
+ (0, _useVirtualizerStylesstyles.useVirtualizerStyles_unstable)(state);
65
+ const containerStyle = state.axis === 'horizontal' ? state.reversed ? styles.horizontalReversed : styles.horizontal : state.reversed ? styles.verticalReversed : styles.vertical;
66
+ // Add container styles
67
+ state.container.className = (0, _react.mergeClasses)(virtualizerScrollViewDynamicClassNames.container, styles.base, containerStyle, state.container.className);
68
+ return state;
69
+ }; //# sourceMappingURL=useVirtualizerScrollViewDynamicStyles.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useVirtualizerScrollViewDynamicStyles.styles.js"],"sourcesContent":["import { useVirtualizerStyles_unstable, virtualizerClassNames } from '../Virtualizer/useVirtualizerStyles.styles';\nimport { __styles, mergeClasses } from '@griffel/react';\nconst virtualizerScrollViewDynamicClassName = 'fui-Virtualizer-Scroll-View-Dynamic';\nexport const virtualizerScrollViewDynamicClassNames = {\n ...virtualizerClassNames,\n container: `${virtualizerScrollViewDynamicClassName}__container`\n};\nconst useStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n a9b677: \"fly5x3f\",\n Bqenvij: \"f1l02sjl\"\n },\n vertical: {\n Beiy3e4: \"f1vx9l62\",\n Bmxbyg5: \"f5zp4f\"\n },\n horizontal: {\n Beiy3e4: \"f1063pyq\",\n B68tc82: \"f1oy3dpc\"\n },\n verticalReversed: {\n Beiy3e4: \"f1gkdon0\",\n Bmxbyg5: \"f5zp4f\"\n },\n horizontalReversed: {\n Beiy3e4: \"f1oztnx0\",\n B68tc82: \"f1oy3dpc\"\n }\n}, {\n 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;}\"]\n});\n/**\n * Apply styling to the Virtualizer states\n */\nexport const useVirtualizerScrollViewDynamicStyles_unstable = state => {\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//# sourceMappingURL=useVirtualizerScrollViewDynamicStyles.styles.js.map"],"names":["virtualizerScrollViewDynamicClassNames","useVirtualizerScrollViewDynamicStyles_unstable","virtualizerScrollViewDynamicClassName","virtualizerClassNames","container","useStyles","__styles","base","mc9l5x","a9b677","Bqenvij","vertical","Beiy3e4","Bmxbyg5","horizontal","B68tc82","verticalReversed","horizontalReversed","d","state","styles","useVirtualizerStyles_unstable","containerStyle","axis","reversed","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,sCAAsC;eAAtCA;;IAgCAC,8CAA8C;eAA9CA;;;4CAnCwD;uBAC9B;AACvC,MAAMC,wCAAwC;AACvC,MAAMF,yCAAyC;IACpD,GAAGG,iDAAqB;IACxBC,WAAW,CAAC,EAAEF,sCAAsC,WAAW,CAAC;AAClE;AACA,MAAMG,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,MAAM;QACJC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAC,UAAU;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,YAAY;QACVF,SAAS;QACTG,SAAS;IACX;IACAC,kBAAkB;QAChBJ,SAAS;QACTC,SAAS;IACX;IACAI,oBAAoB;QAClBL,SAAS;QACTG,SAAS;IACX;AACF,GAAG;IACDG,GAAG;QAAC;QAA2B;QAAyB;QAA2B;QAAqC;QAA6B;QAAkC;QAA+B;QAA6C;KAAyC;AAC9S;AAIO,MAAMjB,iDAAiDkB,CAAAA;IAC5D,MAAMC,SAASf;IACf,kCAAkC;IAClCgB,IAAAA,yDAA6B,EAACF;IAC9B,MAAMG,iBAAiBH,MAAMI,IAAI,KAAK,eAAeJ,MAAMK,QAAQ,GAAGJ,OAAOH,kBAAkB,GAAGG,OAAON,UAAU,GAAGK,MAAMK,QAAQ,GAAGJ,OAAOJ,gBAAgB,GAAGI,OAAOT,QAAQ;IAChL,uBAAuB;IACvBQ,MAAMf,SAAS,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAAC1B,uCAAuCI,SAAS,EAAEgB,OAAOb,IAAI,EAAEe,gBAAgBH,MAAMf,SAAS,CAACqB,SAAS;IACjJ,OAAON;AACT,GACA,wEAAwE"}
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":""}
@@ -1,8 +1,10 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
6
- const tslib_1 = /*#__PURE__*/require("tslib");
7
- tslib_1.__exportStar(require("./useIntersectionObserver"), exports);
8
- //# sourceMappingURL=index.js.map
5
+ const _export_star = require("@swc/helpers/_/_export_star");
6
+ _export_star._(require("./useIntersectionObserver"), exports);
7
+ _export_star._(require("./useVirtualizerMeasure"), exports);
8
+ _export_star._(require("./useDynamicVirtualizerMeasure"), exports);
9
+ _export_star._(require("./useResizeObserverRef"), exports);
10
+ _export_star._(require("./hooks.types"), exports);
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-virtualizer/src/hooks/index.ts"],"sourcesContent":["export * from './useIntersectionObserver';\n"]}
1
+ {"version":3,"sources":["index.js"],"sourcesContent":["export * from './useIntersectionObserver';\nexport * from './useVirtualizerMeasure';\nexport * from './useDynamicVirtualizerMeasure';\nexport * from './useResizeObserverRef';\nexport * from './hooks.types';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
@@ -0,0 +1,107 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useDynamicVirtualizerMeasure", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useDynamicVirtualizerMeasure;
9
+ }
10
+ });
11
+ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
+ const _reactutilities = require("@fluentui/react-utilities");
13
+ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
+ const _useResizeObserverRef = require("./useResizeObserverRef");
15
+ const useDynamicVirtualizerMeasure = (virtualizerProps)=>{
16
+ const { defaultItemSize, direction = 'vertical', numItems, getItemSize, currentIndex } = virtualizerProps;
17
+ const indexRef = (0, _react.useRef)(currentIndex);
18
+ indexRef.current = currentIndex;
19
+ const [state, setState] = _react.useState({
20
+ virtualizerLength: 0,
21
+ virtualizerBufferItems: 0,
22
+ virtualizerBufferSize: 0
23
+ });
24
+ const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;
25
+ const container = _react.useRef(null);
26
+ const handleScrollResize = _react.useCallback((scrollRef)=>{
27
+ if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
28
+ // Error? ignore?
29
+ return;
30
+ }
31
+ if (scrollRef.current !== container.current) {
32
+ container.current = scrollRef.current;
33
+ }
34
+ const containerSize = direction === 'vertical' ? scrollRef.current.getBoundingClientRect().height : scrollRef.current.getBoundingClientRect().width;
35
+ let indexSizer = 0;
36
+ let length = 0;
37
+ while(indexSizer <= containerSize && length < numItems){
38
+ const iItemSize = getItemSize(indexRef.current + length);
39
+ // Increment
40
+ indexSizer += iItemSize;
41
+ length++;
42
+ }
43
+ /*
44
+ * Number of items to append at each end, i.e. 'preload' each side before entering view.
45
+ */ const bufferItems = Math.max(Math.floor(length / 4), 4);
46
+ /*
47
+ * This is how far we deviate into the bufferItems to detect a redraw.
48
+ */ const bufferSize = Math.max(Math.floor(length / 8 * defaultItemSize), 1);
49
+ const totalLength = length + bufferItems * 2 + 1;
50
+ setState({
51
+ virtualizerLength: totalLength,
52
+ virtualizerBufferSize: bufferSize,
53
+ virtualizerBufferItems: bufferItems
54
+ });
55
+ }, [
56
+ defaultItemSize,
57
+ direction,
58
+ getItemSize,
59
+ numItems
60
+ ]);
61
+ const resizeCallback = _react.useCallback((_entries, _observer, scrollRef)=>{
62
+ if (scrollRef) {
63
+ handleScrollResize(scrollRef);
64
+ }
65
+ }, [
66
+ handleScrollResize
67
+ ]);
68
+ const scrollRef = (0, _useResizeObserverRef.useResizeObserverRef_unstable)(resizeCallback);
69
+ (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
70
+ var _container_current, _container_current1;
71
+ if (!container.current) {
72
+ return;
73
+ }
74
+ const containerSize = direction === 'vertical' ? ((_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().height) * 1.5 : ((_container_current1 = container.current) === null || _container_current1 === void 0 ? void 0 : _container_current1.getBoundingClientRect().width) * 1.5;
75
+ let couldBeSmaller = false;
76
+ let recheckTotal = 0;
77
+ for(let i = currentIndex; i < currentIndex + virtualizerLength; i++){
78
+ const newItemSize = getItemSize(i);
79
+ recheckTotal += newItemSize;
80
+ const newLength = i - currentIndex;
81
+ const bufferItems = Math.max(Math.floor(newLength / 4), 2);
82
+ const totalNewLength = newLength + bufferItems * 2 + 4;
83
+ const compareLengths = totalNewLength < virtualizerLength;
84
+ if (recheckTotal > containerSize && compareLengths) {
85
+ couldBeSmaller = true;
86
+ break;
87
+ }
88
+ }
89
+ // Check if the render has caused us to need a re-calc of virtualizer length
90
+ if (recheckTotal < containerSize || couldBeSmaller) {
91
+ handleScrollResize(container);
92
+ }
93
+ }, [
94
+ getItemSize,
95
+ currentIndex,
96
+ direction,
97
+ virtualizerLength,
98
+ resizeCallback,
99
+ handleScrollResize
100
+ ]);
101
+ return {
102
+ virtualizerLength,
103
+ bufferItems: virtualizerBufferItems,
104
+ bufferSize: virtualizerBufferSize,
105
+ scrollRef
106
+ };
107
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useDynamicVirtualizerMeasure.js"],"sourcesContent":["import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useResizeObserverRef_unstable } from './useResizeObserverRef';\nimport { useRef } from 'react';\n/**\n * React hook that measures virtualized space dynamically to ensure optimized virtualization length.\n */ export const useDynamicVirtualizerMeasure = (virtualizerProps)=>{\n const { defaultItemSize, direction = 'vertical', numItems, getItemSize, currentIndex } = virtualizerProps;\n const indexRef = useRef(currentIndex);\n indexRef.current = currentIndex;\n const [state, setState] = React.useState({\n virtualizerLength: 0,\n virtualizerBufferItems: 0,\n virtualizerBufferSize: 0\n });\n const { virtualizerLength, virtualizerBufferItems, virtualizerBufferSize } = state;\n const container = React.useRef(null);\n const handleScrollResize = React.useCallback((scrollRef)=>{\n if (!(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {\n // Error? ignore?\n return;\n }\n if (scrollRef.current !== container.current) {\n container.current = scrollRef.current;\n }\n const containerSize = direction === 'vertical' ? scrollRef.current.getBoundingClientRect().height : scrollRef.current.getBoundingClientRect().width;\n let indexSizer = 0;\n let length = 0;\n while(indexSizer <= containerSize && length < numItems){\n const iItemSize = getItemSize(indexRef.current + length);\n // Increment\n indexSizer += iItemSize;\n length++;\n }\n /*\n * Number of items to append at each end, i.e. 'preload' each side before entering view.\n */ const bufferItems = Math.max(Math.floor(length / 4), 4);\n /*\n * This is how far we deviate into the bufferItems to detect a redraw.\n */ const bufferSize = Math.max(Math.floor(length / 8 * defaultItemSize), 1);\n const totalLength = length + bufferItems * 2 + 1;\n setState({\n virtualizerLength: totalLength,\n virtualizerBufferSize: bufferSize,\n virtualizerBufferItems: bufferItems\n });\n }, [\n defaultItemSize,\n direction,\n getItemSize,\n numItems\n ]);\n const resizeCallback = React.useCallback((_entries, _observer, scrollRef)=>{\n if (scrollRef) {\n handleScrollResize(scrollRef);\n }\n }, [\n handleScrollResize\n ]);\n const scrollRef = useResizeObserverRef_unstable(resizeCallback);\n useIsomorphicLayoutEffect(()=>{\n var _container_current, _container_current1;\n if (!container.current) {\n return;\n }\n const containerSize = direction === 'vertical' ? ((_container_current = container.current) === null || _container_current === void 0 ? void 0 : _container_current.getBoundingClientRect().height) * 1.5 : ((_container_current1 = container.current) === null || _container_current1 === void 0 ? void 0 : _container_current1.getBoundingClientRect().width) * 1.5;\n let couldBeSmaller = false;\n let recheckTotal = 0;\n for(let i = currentIndex; i < currentIndex + virtualizerLength; i++){\n const newItemSize = getItemSize(i);\n recheckTotal += newItemSize;\n const newLength = i - currentIndex;\n const bufferItems = Math.max(Math.floor(newLength / 4), 2);\n const totalNewLength = newLength + bufferItems * 2 + 4;\n const compareLengths = totalNewLength < virtualizerLength;\n if (recheckTotal > containerSize && compareLengths) {\n couldBeSmaller = true;\n break;\n }\n }\n // Check if the render has caused us to need a re-calc of virtualizer length\n if (recheckTotal < containerSize || couldBeSmaller) {\n handleScrollResize(container);\n }\n }, [\n getItemSize,\n currentIndex,\n direction,\n virtualizerLength,\n resizeCallback,\n handleScrollResize\n ]);\n return {\n virtualizerLength,\n bufferItems: virtualizerBufferItems,\n bufferSize: virtualizerBufferSize,\n scrollRef\n };\n};\n"],"names":["useDynamicVirtualizerMeasure","virtualizerProps","defaultItemSize","direction","numItems","getItemSize","currentIndex","indexRef","useRef","current","state","setState","React","useState","virtualizerLength","virtualizerBufferItems","virtualizerBufferSize","container","handleScrollResize","useCallback","scrollRef","containerSize","getBoundingClientRect","height","width","indexSizer","length","iItemSize","bufferItems","Math","max","floor","bufferSize","totalLength","resizeCallback","_entries","_observer","useResizeObserverRef_unstable","useIsomorphicLayoutEffect","_container_current","_container_current1","couldBeSmaller","recheckTotal","i","newItemSize","newLength","totalNewLength","compareLengths"],"mappings":"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"}
@@ -1,59 +1,126 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
6
- exports.useIntersectionObserver = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
- const {
10
- useState,
11
- useRef
12
- } = React;
13
- /**
14
- * React hook that allows easy usage of the browser API IntersectionObserver within React
15
- * @param callback - A function called when the percentage of the target element is visible crosses a threshold.
16
- * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the
17
- * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is
18
- * enough to trigger a callback).
19
- * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to
20
- * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.
21
- */
22
- const useIntersectionObserver = (callback, options) => {
23
- // export const useIntersectionObserver = (
24
- // callback: IntersectionObserverCallback,
25
- // options?: IntersectionObserverInit,
26
- // ): [
27
- // Dispatch<SetStateAction<Element[] | undefined>>,
28
- // Dispatch<SetStateAction<IntersectionObserverInit | undefined>>,
29
- // MutableRefObject<IntersectionObserver | undefined>,
30
- // ] => {
31
- const observer = useRef();
32
- const [observerList, setObserverList] = useState();
33
- const [observerInit, setObserverInit] = useState(options);
34
- // Observer elements in passed in list and clean up previous list
35
- // This effect is only triggered when observerList is updated
36
- react_utilities_1.useIsomorphicLayoutEffect(() => {
37
- observer.current = new IntersectionObserver(callback, observerInit);
38
- // If we have an instance of IO and a list with elements, observer the elements
39
- if (observer.current && observerList && observerList.length > 0) {
40
- observerList.forEach(element => {
41
- var _a;
42
- (_a = observer.current) === null || _a === void 0 ? void 0 : _a.observe(element);
43
- });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ getRTLRootMargin: function() {
13
+ return getRTLRootMargin;
14
+ },
15
+ useIntersectionObserver: function() {
16
+ return useIntersectionObserver;
44
17
  }
45
- // clean up previous elements being listened to
46
- return () => {
47
- if (observer.current) {
48
- observer.current.disconnect();
49
- }
18
+ });
19
+ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
20
+ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
21
+ const _reactutilities = require("@fluentui/react-utilities");
22
+ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
23
+ const _useMutationObserver = require("./useMutationObserver");
24
+ const { useCallback, useState, useRef } = _react;
25
+ const getRTLRootMargin = (ltrRootMargin, target)=>{
26
+ if (target) {
27
+ // get the computed dir for the target element
28
+ const newDir = getComputedStyle(target).direction;
29
+ // If we're in rtl reading direction, we might need to flip the margins on the left/right sides
30
+ if (newDir === 'rtl') {
31
+ let newMargin = ltrRootMargin;
32
+ const splitMargins = ltrRootMargin.split(' ');
33
+ // We only need to do this if we get four values, otherwise the sides are equal and don't require flipping.
34
+ if (splitMargins.length === 4) {
35
+ newMargin = `${splitMargins[0]} ${splitMargins[3]} ${splitMargins[2]} ${splitMargins[1]}`;
36
+ }
37
+ return newMargin;
38
+ } else {
39
+ return ltrRootMargin;
40
+ }
41
+ }
42
+ return ltrRootMargin;
43
+ };
44
+ const useIntersectionObserver = (callback, options)=>{
45
+ const observer = useRef();
46
+ const [observerList, setObserverList] = useState();
47
+ const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
48
+ var _options_rootMargin;
49
+ // set the initial init with corrected margins based on the observed root's calculated reading direction.
50
+ const [observerInit, setObserverInit] = useState(options && {
51
+ ...options,
52
+ rootMargin: getRTLRootMargin((_options_rootMargin = options.rootMargin) !== null && _options_rootMargin !== void 0 ? _options_rootMargin : '0px', options.root)
53
+ });
54
+ var _options_rootMargin1;
55
+ // We have to assume that any values passed in for rootMargin by the consuming app are ltr values. As such we will store the ltr value.
56
+ const ltrRootMargin = useRef((_options_rootMargin1 = options === null || options === void 0 ? void 0 : options.rootMargin) !== null && _options_rootMargin1 !== void 0 ? _options_rootMargin1 : '0px');
57
+ // Callback function to execute when mutations are observed
58
+ const mutationObserverCallback = useCallback((mutationList)=>{
59
+ for (const mutation of mutationList){
60
+ // Ensuring that the right attribute is being observed and that the root is within the tree of the element being mutated.
61
+ if (mutation.type === 'attributes' && mutation.attributeName === 'dir' && (options === null || options === void 0 ? void 0 : options.root) && mutation.target.contains(options === null || options === void 0 ? void 0 : options.root)) {
62
+ setObserverInit({
63
+ ...observerInit,
64
+ rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)
65
+ });
66
+ }
67
+ }
68
+ }, [
69
+ ltrRootMargin,
70
+ observerInit,
71
+ options === null || options === void 0 ? void 0 : options.root
72
+ ]);
73
+ // Mutation observer for dir attribute changes in the document
74
+ (0, _useMutationObserver.useMutationObserver)(targetDocument, mutationObserverCallback, {
75
+ attributes: true,
76
+ subtree: true,
77
+ attributeFilter: [
78
+ 'dir'
79
+ ]
80
+ });
81
+ // Observer elements in passed in list and clean up previous list
82
+ // This effect is only triggered when observerList is updated
83
+ (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
84
+ observer.current = new IntersectionObserver(callback, {
85
+ ...observerInit,
86
+ rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)
87
+ });
88
+ observer.current = new IntersectionObserver(callback, observerInit);
89
+ // If we have an instance of IO and a list with elements, observer the elements
90
+ if (observer.current && observerList && observerList.length > 0) {
91
+ observerList.forEach((element)=>{
92
+ var _observer_current;
93
+ (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(element);
94
+ });
95
+ }
96
+ // clean up previous elements being listened to
97
+ return ()=>{
98
+ if (observer.current) {
99
+ observer.current.disconnect();
100
+ }
101
+ };
102
+ }, [
103
+ observerList,
104
+ observerInit,
105
+ callback
106
+ ]);
107
+ // Do not use internally, we need to track external settings only here
108
+ const setObserverInitExternal = useCallback((newInit)=>{
109
+ var _newInit_rootMargin;
110
+ // Since we know this is coming from consumers, we can store this value as LTR somewhat safely.
111
+ ltrRootMargin.current = (_newInit_rootMargin = newInit === null || newInit === void 0 ? void 0 : newInit.rootMargin) !== null && _newInit_rootMargin !== void 0 ? _newInit_rootMargin : '0px';
112
+ // Call the internal setter to update the value and ensure if our calculated direction is rtl, we flip the margin
113
+ setObserverInit({
114
+ ...newInit,
115
+ rootMargin: getRTLRootMargin(ltrRootMargin.current, newInit === null || newInit === void 0 ? void 0 : newInit.root)
116
+ });
117
+ }, [
118
+ ltrRootMargin,
119
+ setObserverInit
120
+ ]);
121
+ return {
122
+ setObserverList,
123
+ setObserverInit: setObserverInitExternal,
124
+ observer
50
125
  };
51
- }, [observerList, observerInit, callback]);
52
- return {
53
- setObserverList,
54
- setObserverInit,
55
- observer
56
- };
57
126
  };
58
- exports.useIntersectionObserver = useIntersectionObserver;
59
- //# sourceMappingURL=useIntersectionObserver.js.map
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AACA;AACA;AAEA,MAAM;EAAEA,QAAQ;EAAEC;AAAM,CAAE,GAAGC,KAAK;AAElC;;;;;;;;;AAUO,MAAMC,uBAAuB,GAAG,CACrCC,QAAsC,EACtCC,OAAkC,KAKhC;EACF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMC,QAAQ,GAAGL,MAAM,EAAwB;EAC/C,MAAM,CAACM,YAAY,EAAEC,eAAe,CAAC,GAAGR,QAAQ,EAAa;EAC7D,MAAM,CAACS,YAAY,EAAEC,eAAe,CAAC,GAAGV,QAAQ,CAAuCK,OAAO,CAAC;EAE/F;EACA;EACAM,2CAAyB,CAAC,MAAK;IAC7BL,QAAQ,CAACM,OAAO,GAAG,IAAIC,oBAAoB,CAACT,QAAQ,EAAEK,YAAY,CAAC;IAEnE;IACA,IAAIH,QAAQ,CAACM,OAAO,IAAIL,YAAY,IAAIA,YAAY,CAACO,MAAM,GAAG,CAAC,EAAE;MAC/DP,YAAY,CAACQ,OAAO,CAACC,OAAO,IAAG;;QAC7B,cAAQ,CAACJ,OAAO,0CAAEK,OAAO,CAACD,OAAO,CAAC;MACpC,CAAC,CAAC;;IAGJ;IACA,OAAO,MAAK;MACV,IAAIV,QAAQ,CAACM,OAAO,EAAE;QACpBN,QAAQ,CAACM,OAAO,CAACM,UAAU,EAAE;;IAEjC,CAAC;EACH,CAAC,EAAE,CAACX,YAAY,EAAEE,YAAY,EAAEL,QAAQ,CAAC,CAAC;EAE1C,OAAO;IAAEI,eAAe;IAAEE,eAAe;IAAEJ;EAAQ,CAAE;AACvD,CAAC;AAzCYa,+BAAuB","names":["useState","useRef","React","useIntersectionObserver","callback","options","observer","observerList","setObserverList","observerInit","setObserverInit","react_utilities_1","current","IntersectionObserver","length","forEach","element","observe","disconnect","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-virtualizer/src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import type { Dispatch, MutableRefObject, SetStateAction } from 'react';\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\nconst { useState, useRef } = React;\n\n/**\n * React hook that allows easy usage of the browser API IntersectionObserver within React\n * @param callback - A function called when the percentage of the target element is visible crosses a threshold.\n * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the\n * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is\n * enough to trigger a callback).\n * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to\n * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.\n */\n\nexport const useIntersectionObserver = (\n callback: IntersectionObserverCallback,\n options?: IntersectionObserverInit,\n): {\n setObserverList: Dispatch<SetStateAction<Element[] | undefined>>;\n setObserverInit: Dispatch<SetStateAction<IntersectionObserverInit | undefined>>;\n observer: MutableRefObject<IntersectionObserver | undefined>;\n} => {\n // export const useIntersectionObserver = (\n // callback: IntersectionObserverCallback,\n // options?: IntersectionObserverInit,\n // ): [\n // Dispatch<SetStateAction<Element[] | undefined>>,\n // Dispatch<SetStateAction<IntersectionObserverInit | undefined>>,\n // MutableRefObject<IntersectionObserver | undefined>,\n // ] => {\n const observer = useRef<IntersectionObserver>();\n const [observerList, setObserverList] = useState<Element[]>();\n const [observerInit, setObserverInit] = useState<IntersectionObserverInit | undefined>(options);\n\n // Observer elements in passed in list and clean up previous list\n // This effect is only triggered when observerList is updated\n useIsomorphicLayoutEffect(() => {\n observer.current = new IntersectionObserver(callback, observerInit);\n\n // If we have an instance of IO and a list with elements, observer the elements\n if (observer.current && observerList && observerList.length > 0) {\n observerList.forEach(element => {\n observer.current?.observe(element);\n });\n }\n\n // clean up previous elements being listened to\n return () => {\n if (observer.current) {\n observer.current.disconnect();\n }\n };\n }, [observerList, observerInit, callback]);\n\n return { setObserverList, setObserverInit, observer };\n};\n"]}
1
+ {"version":3,"sources":["useIntersectionObserver.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nconst { useCallback, useState, useRef } = React;\nimport { useMutationObserver } from './useMutationObserver';\n/**\n * This function will take the rootMargin and flip the sides if we are in RTL based on the computed reading direction of the target element.\n * @param ltrRootMargin the margin to be processed and flipped if required\n * @param target target element that will have its current reading direction determined\n * @returns the corrected rootMargin (if it was necessary to correct)\n */ export const getRTLRootMargin = (ltrRootMargin, target)=>{\n if (target) {\n // get the computed dir for the target element\n const newDir = getComputedStyle(target).direction;\n // If we're in rtl reading direction, we might need to flip the margins on the left/right sides\n if (newDir === 'rtl') {\n let newMargin = ltrRootMargin;\n const splitMargins = ltrRootMargin.split(' ');\n // We only need to do this if we get four values, otherwise the sides are equal and don't require flipping.\n if (splitMargins.length === 4) {\n newMargin = `${splitMargins[0]} ${splitMargins[3]} ${splitMargins[2]} ${splitMargins[1]}`;\n }\n return newMargin;\n } else {\n return ltrRootMargin;\n }\n }\n return ltrRootMargin;\n};\n/**\n * React hook that allows easy usage of the browser API IntersectionObserver within React\n * @param callback - A function called when the percentage of the target element is visible crosses a threshold.\n * @param options - An optional object which customizes the observer. If options isn't specified, the observer uses the\n * document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is\n * enough to trigger a callback).\n * @returns An array containing a callback to update the list of Elements the observer should listen to, a callback to\n * update the init options of the IntersectionObserver and a ref to the IntersectionObserver instance itself.\n */ export const useIntersectionObserver = (callback, options)=>{\n const observer = useRef();\n const [observerList, setObserverList] = useState();\n const { targetDocument } = useFluent();\n var _options_rootMargin;\n // set the initial init with corrected margins based on the observed root's calculated reading direction.\n const [observerInit, setObserverInit] = useState(options && {\n ...options,\n rootMargin: getRTLRootMargin((_options_rootMargin = options.rootMargin) !== null && _options_rootMargin !== void 0 ? _options_rootMargin : '0px', options.root)\n });\n var _options_rootMargin1;\n // We have to assume that any values passed in for rootMargin by the consuming app are ltr values. As such we will store the ltr value.\n const ltrRootMargin = useRef((_options_rootMargin1 = options === null || options === void 0 ? void 0 : options.rootMargin) !== null && _options_rootMargin1 !== void 0 ? _options_rootMargin1 : '0px');\n // Callback function to execute when mutations are observed\n const mutationObserverCallback = useCallback((mutationList)=>{\n for (const mutation of mutationList){\n // Ensuring that the right attribute is being observed and that the root is within the tree of the element being mutated.\n if (mutation.type === 'attributes' && mutation.attributeName === 'dir' && (options === null || options === void 0 ? void 0 : options.root) && mutation.target.contains(options === null || options === void 0 ? void 0 : options.root)) {\n setObserverInit({\n ...observerInit,\n rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)\n });\n }\n }\n }, [\n ltrRootMargin,\n observerInit,\n options === null || options === void 0 ? void 0 : options.root\n ]);\n // Mutation observer for dir attribute changes in the document\n useMutationObserver(targetDocument, mutationObserverCallback, {\n attributes: true,\n subtree: true,\n attributeFilter: [\n 'dir'\n ]\n });\n // Observer elements in passed in list and clean up previous list\n // This effect is only triggered when observerList is updated\n useIsomorphicLayoutEffect(()=>{\n observer.current = new IntersectionObserver(callback, {\n ...observerInit,\n rootMargin: getRTLRootMargin(ltrRootMargin.current, observerInit === null || observerInit === void 0 ? void 0 : observerInit.root)\n });\n observer.current = new IntersectionObserver(callback, observerInit);\n // If we have an instance of IO and a list with elements, observer the elements\n if (observer.current && observerList && observerList.length > 0) {\n observerList.forEach((element)=>{\n var _observer_current;\n (_observer_current = observer.current) === null || _observer_current === void 0 ? void 0 : _observer_current.observe(element);\n });\n }\n // clean up previous elements being listened to\n return ()=>{\n if (observer.current) {\n observer.current.disconnect();\n }\n };\n }, [\n observerList,\n observerInit,\n callback\n ]);\n // Do not use internally, we need to track external settings only here\n const setObserverInitExternal = useCallback((newInit)=>{\n var _newInit_rootMargin;\n // Since we know this is coming from consumers, we can store this value as LTR somewhat safely.\n ltrRootMargin.current = (_newInit_rootMargin = newInit === null || newInit === void 0 ? void 0 : newInit.rootMargin) !== null && _newInit_rootMargin !== void 0 ? _newInit_rootMargin : '0px';\n // Call the internal setter to update the value and ensure if our calculated direction is rtl, we flip the margin\n setObserverInit({\n ...newInit,\n rootMargin: getRTLRootMargin(ltrRootMargin.current, newInit === null || newInit === void 0 ? void 0 : newInit.root)\n });\n }, [\n ltrRootMargin,\n setObserverInit\n ]);\n return {\n setObserverList,\n setObserverInit: setObserverInitExternal,\n observer\n };\n};\n"],"names":["getRTLRootMargin","useIntersectionObserver","useCallback","useState","useRef","React","ltrRootMargin","target","newDir","getComputedStyle","direction","newMargin","splitMargins","split","length","callback","options","observer","observerList","setObserverList","targetDocument","useFluent","_options_rootMargin","observerInit","setObserverInit","rootMargin","root","_options_rootMargin1","mutationObserverCallback","mutationList","mutation","type","attributeName","contains","current","useMutationObserver","attributes","subtree","attributeFilter","useIsomorphicLayoutEffect","IntersectionObserver","forEach","element","_observer_current","observe","disconnect","setObserverInitExternal","newInit","_newInit_rootMargin"],"mappings":";;;;;;;;;;;IAUiBA,gBAAgB;eAAhBA;;IA2BAC,uBAAuB;eAAvBA;;;;iEArCM;gCACmB;qCACM;qCAEZ;AADpC,MAAM,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGC;AAO/B,MAAML,mBAAmB,CAACM,eAAeC;IAChD,IAAIA,QAAQ;QACR,8CAA8C;QAC9C,MAAMC,SAASC,iBAAiBF,QAAQG,SAAS;QACjD,+FAA+F;QAC/F,IAAIF,WAAW,OAAO;YAClB,IAAIG,YAAYL;YAChB,MAAMM,eAAeN,cAAcO,KAAK,CAAC;YACzC,2GAA2G;YAC3G,IAAID,aAAaE,MAAM,KAAK,GAAG;gBAC3BH,YAAY,CAAC,EAAEC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAEA,YAAY,CAAC,EAAE,CAAC,CAAC,EAAEA,YAAY,CAAC,EAAE,CAAC,CAAC,EAAEA,YAAY,CAAC,EAAE,CAAC,CAAC;YAC7F;YACA,OAAOD;QACX,OAAO;YACH,OAAOL;QACX;IACJ;IACA,OAAOA;AACX;AASW,MAAML,0BAA0B,CAACc,UAAUC;IAClD,MAAMC,WAAWb;IACjB,MAAM,CAACc,cAAcC,gBAAgB,GAAGhB;IACxC,MAAM,EAAEiB,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,IAAIC;IACJ,yGAAyG;IACzG,MAAM,CAACC,cAAcC,gBAAgB,GAAGrB,SAASa,WAAW;QACxD,GAAGA,OAAO;QACVS,YAAYzB,iBAAiB,AAACsB,CAAAA,sBAAsBN,QAAQS,UAAU,AAAD,MAAO,QAAQH,wBAAwB,KAAK,IAAIA,sBAAsB,OAAON,QAAQU,IAAI;IAClK;IACA,IAAIC;IACJ,uIAAuI;IACvI,MAAMrB,gBAAgBF,OAAO,AAACuB,CAAAA,uBAAuBX,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQS,UAAU,AAAD,MAAO,QAAQE,yBAAyB,KAAK,IAAIA,uBAAuB;IAChM,2DAA2D;IAC3D,MAAMC,2BAA2B1B,YAAY,CAAC2B;QAC1C,KAAK,MAAMC,YAAYD,aAAa;YAChC,yHAAyH;YACzH,IAAIC,SAASC,IAAI,KAAK,gBAAgBD,SAASE,aAAa,KAAK,SAAUhB,CAAAA,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQU,IAAI,AAAD,KAAMI,SAASvB,MAAM,CAAC0B,QAAQ,CAACjB,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQU,IAAI,GAAG;gBACpOF,gBAAgB;oBACZ,GAAGD,YAAY;oBACfE,YAAYzB,iBAAiBM,cAAc4B,OAAO,EAAEX,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaG,IAAI;gBACrI;YACJ;QACJ;IACJ,GAAG;QACCpB;QACAiB;QACAP,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQU,IAAI;KACjE;IACD,8DAA8D;IAC9DS,IAAAA,wCAAmB,EAACf,gBAAgBQ,0BAA0B;QAC1DQ,YAAY;QACZC,SAAS;QACTC,iBAAiB;YACb;SACH;IACL;IACA,iEAAiE;IACjE,6DAA6D;IAC7DC,IAAAA,yCAAyB,EAAC;QACtBtB,SAASiB,OAAO,GAAG,IAAIM,qBAAqBzB,UAAU;YAClD,GAAGQ,YAAY;YACfE,YAAYzB,iBAAiBM,cAAc4B,OAAO,EAAEX,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaG,IAAI;QACrI;QACAT,SAASiB,OAAO,GAAG,IAAIM,qBAAqBzB,UAAUQ;QACtD,+EAA+E;QAC/E,IAAIN,SAASiB,OAAO,IAAIhB,gBAAgBA,aAAaJ,MAAM,GAAG,GAAG;YAC7DI,aAAauB,OAAO,CAAC,CAACC;gBAClB,IAAIC;gBACHA,CAAAA,oBAAoB1B,SAASiB,OAAO,AAAD,MAAO,QAAQS,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBC,OAAO,CAACF;YACzH;QACJ;QACA,+CAA+C;QAC/C,OAAO;YACH,IAAIzB,SAASiB,OAAO,EAAE;gBAClBjB,SAASiB,OAAO,CAACW,UAAU;YAC/B;QACJ;IACJ,GAAG;QACC3B;QACAK;QACAR;KACH;IACD,sEAAsE;IACtE,MAAM+B,0BAA0B5C,YAAY,CAAC6C;QACzC,IAAIC;QACJ,+FAA+F;QAC/F1C,cAAc4B,OAAO,GAAG,AAACc,CAAAA,sBAAsBD,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQtB,UAAU,AAAD,MAAO,QAAQuB,wBAAwB,KAAK,IAAIA,sBAAsB;QACxL,iHAAiH;QACjHxB,gBAAgB;YACZ,GAAGuB,OAAO;YACVtB,YAAYzB,iBAAiBM,cAAc4B,OAAO,EAAEa,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQrB,IAAI;QACtH;IACJ,GAAG;QACCpB;QACAkB;KACH;IACD,OAAO;QACHL;QACAK,iBAAiBsB;QACjB7B;IACJ;AACJ"}