@react-aria/virtualizer 3.6.2-nightly.3698 → 3.6.2-nightly.3705
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/import.mjs +540 -0
- package/package.json +13 -8
package/dist/import.mjs
ADDED
|
@@ -0,0 +1,540 @@
|
|
|
1
|
+
import {useLayoutEffect as $kSaV5$useLayoutEffect, mergeProps as $kSaV5$mergeProps, scrollIntoViewport as $kSaV5$scrollIntoViewport, focusWithoutScrolling as $kSaV5$focusWithoutScrolling, useResizeObserver as $kSaV5$useResizeObserver} from "@react-aria/utils";
|
|
2
|
+
import {getInteractionModality as $kSaV5$getInteractionModality} from "@react-aria/interactions";
|
|
3
|
+
import {useVirtualizerState as $kSaV5$useVirtualizerState, Rect as $kSaV5$Rect, Size as $kSaV5$Size} from "@react-stately/virtualizer";
|
|
4
|
+
import $kSaV5$react, {useRef as $kSaV5$useRef, useCallback as $kSaV5$useCallback, useEffect as $kSaV5$useEffect, useMemo as $kSaV5$useMemo, useState as $kSaV5$useState} from "react";
|
|
5
|
+
import {flushSync as $kSaV5$flushSync} from "react-dom";
|
|
6
|
+
import {useLocale as $kSaV5$useLocale} from "@react-aria/i18n";
|
|
7
|
+
import {getFocusableTreeWalker as $kSaV5$getFocusableTreeWalker} from "@react-aria/focus";
|
|
8
|
+
|
|
9
|
+
/*
|
|
10
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
11
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
12
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
13
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
14
|
+
*
|
|
15
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
16
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
17
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
18
|
+
* governing permissions and limitations under the License.
|
|
19
|
+
*/ /*
|
|
20
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
21
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
22
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
23
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
24
|
+
*
|
|
25
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
26
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
27
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
28
|
+
* governing permissions and limitations under the License.
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
/*
|
|
34
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
35
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
36
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
37
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
38
|
+
*
|
|
39
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
40
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
41
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
42
|
+
* governing permissions and limitations under the License.
|
|
43
|
+
*/ // @ts-ignore
|
|
44
|
+
|
|
45
|
+
/*
|
|
46
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
47
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
48
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
49
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
50
|
+
*
|
|
51
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
52
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
53
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
54
|
+
* governing permissions and limitations under the License.
|
|
55
|
+
*/ let $ce415dc67314b753$var$cachedRTLResult = null;
|
|
56
|
+
function $ce415dc67314b753$export$faf7630257ad4304(recalculate = false) {
|
|
57
|
+
if ($ce415dc67314b753$var$cachedRTLResult === null || recalculate) {
|
|
58
|
+
const outerDiv = document.createElement("div");
|
|
59
|
+
const outerStyle = outerDiv.style;
|
|
60
|
+
outerStyle.width = "50px";
|
|
61
|
+
outerStyle.height = "50px";
|
|
62
|
+
outerStyle.overflow = "scroll";
|
|
63
|
+
outerStyle.direction = "rtl";
|
|
64
|
+
const innerDiv = document.createElement("div");
|
|
65
|
+
const innerStyle = innerDiv.style;
|
|
66
|
+
innerStyle.width = "100px";
|
|
67
|
+
innerStyle.height = "100px";
|
|
68
|
+
outerDiv.appendChild(innerDiv);
|
|
69
|
+
document.body.appendChild(outerDiv);
|
|
70
|
+
if (outerDiv.scrollLeft > 0) $ce415dc67314b753$var$cachedRTLResult = "positive-descending";
|
|
71
|
+
else {
|
|
72
|
+
outerDiv.scrollLeft = 1;
|
|
73
|
+
if (outerDiv.scrollLeft === 0) $ce415dc67314b753$var$cachedRTLResult = "negative";
|
|
74
|
+
else $ce415dc67314b753$var$cachedRTLResult = "positive-ascending";
|
|
75
|
+
}
|
|
76
|
+
document.body.removeChild(outerDiv);
|
|
77
|
+
return $ce415dc67314b753$var$cachedRTLResult;
|
|
78
|
+
}
|
|
79
|
+
return $ce415dc67314b753$var$cachedRTLResult;
|
|
80
|
+
}
|
|
81
|
+
function $ce415dc67314b753$export$1389d168952b34b5(node, direction) {
|
|
82
|
+
let { scrollLeft: scrollLeft } = node;
|
|
83
|
+
// scrollLeft in rtl locales differs across browsers, so normalize.
|
|
84
|
+
// See comment by getRTLOffsetType below for details.
|
|
85
|
+
if (direction === "rtl") {
|
|
86
|
+
let { scrollWidth: scrollWidth , clientWidth: clientWidth } = node;
|
|
87
|
+
switch($ce415dc67314b753$export$faf7630257ad4304()){
|
|
88
|
+
case "negative":
|
|
89
|
+
scrollLeft = -scrollLeft;
|
|
90
|
+
break;
|
|
91
|
+
case "positive-descending":
|
|
92
|
+
scrollLeft = scrollWidth - clientWidth - scrollLeft;
|
|
93
|
+
break;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
return scrollLeft;
|
|
97
|
+
}
|
|
98
|
+
function $ce415dc67314b753$export$ed5fd5ffe5ab0ac(node, direction, scrollLeft) {
|
|
99
|
+
if (direction === "rtl") switch($ce415dc67314b753$export$faf7630257ad4304()){
|
|
100
|
+
case "negative":
|
|
101
|
+
scrollLeft = -scrollLeft;
|
|
102
|
+
break;
|
|
103
|
+
case "positive-ascending":
|
|
104
|
+
break;
|
|
105
|
+
default:
|
|
106
|
+
{
|
|
107
|
+
const { clientWidth: clientWidth , scrollWidth: scrollWidth } = node;
|
|
108
|
+
scrollLeft = scrollWidth - clientWidth - scrollLeft;
|
|
109
|
+
break;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
node.scrollLeft = scrollLeft;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
function $44a6ee657928b002$var$ScrollView(props, ref) {
|
|
122
|
+
let { contentSize: contentSize , onVisibleRectChange: onVisibleRectChange , children: children , innerStyle: innerStyle , sizeToFit: sizeToFit , onScrollStart: onScrollStart , onScrollEnd: onScrollEnd , scrollDirection: scrollDirection = "both" , ...otherProps } = props;
|
|
123
|
+
let defaultRef = (0, $kSaV5$useRef)();
|
|
124
|
+
ref = ref || defaultRef;
|
|
125
|
+
let state = (0, $kSaV5$useRef)({
|
|
126
|
+
scrollTop: 0,
|
|
127
|
+
scrollLeft: 0,
|
|
128
|
+
scrollEndTime: 0,
|
|
129
|
+
scrollTimeout: null,
|
|
130
|
+
width: 0,
|
|
131
|
+
height: 0,
|
|
132
|
+
isScrolling: false
|
|
133
|
+
}).current;
|
|
134
|
+
let { direction: direction } = (0, $kSaV5$useLocale)();
|
|
135
|
+
let [isScrolling, setScrolling] = (0, $kSaV5$useState)(false);
|
|
136
|
+
let onScroll = (0, $kSaV5$useCallback)((e)=>{
|
|
137
|
+
if (e.target !== e.currentTarget) return;
|
|
138
|
+
if (props.onScroll) props.onScroll(e);
|
|
139
|
+
(0, $kSaV5$flushSync)(()=>{
|
|
140
|
+
let scrollTop = e.currentTarget.scrollTop;
|
|
141
|
+
let scrollLeft = (0, $ce415dc67314b753$export$1389d168952b34b5)(e.currentTarget, direction);
|
|
142
|
+
// Prevent rubber band scrolling from shaking when scrolling out of bounds
|
|
143
|
+
state.scrollTop = Math.max(0, Math.min(scrollTop, contentSize.height - state.height));
|
|
144
|
+
state.scrollLeft = Math.max(0, Math.min(scrollLeft, contentSize.width - state.width));
|
|
145
|
+
onVisibleRectChange(new (0, $kSaV5$Rect)(state.scrollLeft, state.scrollTop, state.width, state.height));
|
|
146
|
+
if (!state.isScrolling) {
|
|
147
|
+
state.isScrolling = true;
|
|
148
|
+
setScrolling(true);
|
|
149
|
+
if (onScrollStart) onScrollStart();
|
|
150
|
+
}
|
|
151
|
+
// So we don't constantly call clearTimeout and setTimeout,
|
|
152
|
+
// keep track of the current timeout time and only reschedule
|
|
153
|
+
// the timer when it is getting close.
|
|
154
|
+
let now = Date.now();
|
|
155
|
+
if (state.scrollEndTime <= now + 50) {
|
|
156
|
+
state.scrollEndTime = now + 300;
|
|
157
|
+
clearTimeout(state.scrollTimeout);
|
|
158
|
+
state.scrollTimeout = setTimeout(()=>{
|
|
159
|
+
state.isScrolling = false;
|
|
160
|
+
setScrolling(false);
|
|
161
|
+
state.scrollTimeout = null;
|
|
162
|
+
if (onScrollEnd) onScrollEnd();
|
|
163
|
+
}, 300);
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
}, [
|
|
167
|
+
props,
|
|
168
|
+
direction,
|
|
169
|
+
state,
|
|
170
|
+
contentSize,
|
|
171
|
+
onVisibleRectChange,
|
|
172
|
+
onScrollStart,
|
|
173
|
+
onScrollEnd
|
|
174
|
+
]);
|
|
175
|
+
// eslint-disable-next-line arrow-body-style
|
|
176
|
+
(0, $kSaV5$useEffect)(()=>{
|
|
177
|
+
return ()=>{
|
|
178
|
+
clearTimeout(state.scrollTimeout);
|
|
179
|
+
};
|
|
180
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
181
|
+
}, []);
|
|
182
|
+
let updateSize = (0, $kSaV5$useCallback)(()=>{
|
|
183
|
+
let dom = ref.current;
|
|
184
|
+
if (!dom) return;
|
|
185
|
+
let w = dom.clientWidth;
|
|
186
|
+
let h = dom.clientHeight;
|
|
187
|
+
if (sizeToFit && contentSize.width > 0 && contentSize.height > 0) {
|
|
188
|
+
if (sizeToFit === "width") w = Math.min(w, contentSize.width);
|
|
189
|
+
else if (sizeToFit === "height") h = Math.min(h, contentSize.height);
|
|
190
|
+
}
|
|
191
|
+
if (state.width !== w || state.height !== h) {
|
|
192
|
+
state.width = w;
|
|
193
|
+
state.height = h;
|
|
194
|
+
onVisibleRectChange(new (0, $kSaV5$Rect)(state.scrollLeft, state.scrollTop, w, h));
|
|
195
|
+
}
|
|
196
|
+
}, [
|
|
197
|
+
onVisibleRectChange,
|
|
198
|
+
ref,
|
|
199
|
+
state,
|
|
200
|
+
sizeToFit,
|
|
201
|
+
contentSize
|
|
202
|
+
]);
|
|
203
|
+
(0, $kSaV5$useLayoutEffect)(()=>{
|
|
204
|
+
updateSize();
|
|
205
|
+
}, [
|
|
206
|
+
updateSize
|
|
207
|
+
]);
|
|
208
|
+
(0, $kSaV5$useResizeObserver)({
|
|
209
|
+
ref: ref,
|
|
210
|
+
onResize: updateSize
|
|
211
|
+
});
|
|
212
|
+
let style = {
|
|
213
|
+
// Reset padding so that relative positioning works correctly. Padding will be done in JS layout.
|
|
214
|
+
padding: 0,
|
|
215
|
+
...otherProps.style
|
|
216
|
+
};
|
|
217
|
+
if (scrollDirection === "horizontal") {
|
|
218
|
+
style.overflowX = "auto";
|
|
219
|
+
style.overflowY = "hidden";
|
|
220
|
+
} else if (scrollDirection === "vertical") {
|
|
221
|
+
style.overflowY = "auto";
|
|
222
|
+
style.overflowX = "hidden";
|
|
223
|
+
} else style.overflow = "auto";
|
|
224
|
+
return /*#__PURE__*/ (0, $kSaV5$react).createElement("div", {
|
|
225
|
+
...otherProps,
|
|
226
|
+
style: style,
|
|
227
|
+
ref: ref,
|
|
228
|
+
onScroll: onScroll
|
|
229
|
+
}, /*#__PURE__*/ (0, $kSaV5$react).createElement("div", {
|
|
230
|
+
role: "presentation",
|
|
231
|
+
style: {
|
|
232
|
+
width: contentSize.width,
|
|
233
|
+
height: contentSize.height,
|
|
234
|
+
pointerEvents: isScrolling ? "none" : "auto",
|
|
235
|
+
position: "relative",
|
|
236
|
+
...innerStyle
|
|
237
|
+
}
|
|
238
|
+
}, children));
|
|
239
|
+
}
|
|
240
|
+
const $44a6ee657928b002$export$5665e3d6be6adea = /*#__PURE__*/ (0, $kSaV5$react).forwardRef($44a6ee657928b002$var$ScrollView);
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
/*
|
|
244
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
245
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
246
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
247
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
248
|
+
*
|
|
249
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
250
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
251
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
252
|
+
* governing permissions and limitations under the License.
|
|
253
|
+
*/
|
|
254
|
+
|
|
255
|
+
function $15be78fb069d96f5$export$eac1895992b9f3d6({ isEmpty: isEmpty , hasRenderedAnything: hasRenderedAnything }, ref) {
|
|
256
|
+
let [hasTabbableChild, setHasTabbableChild] = (0, $kSaV5$useState)(false);
|
|
257
|
+
(0, $kSaV5$useEffect)(()=>{
|
|
258
|
+
if ((ref === null || ref === void 0 ? void 0 : ref.current) && isEmpty && hasRenderedAnything) {
|
|
259
|
+
// Detect if there are any tabbable elements and update the tabIndex accordingly.
|
|
260
|
+
let walker = (0, $kSaV5$getFocusableTreeWalker)(ref.current, {
|
|
261
|
+
tabbable: true
|
|
262
|
+
});
|
|
263
|
+
setHasTabbableChild(!!walker.nextNode());
|
|
264
|
+
}
|
|
265
|
+
}, [
|
|
266
|
+
ref,
|
|
267
|
+
isEmpty,
|
|
268
|
+
hasRenderedAnything
|
|
269
|
+
]);
|
|
270
|
+
return hasTabbableChild;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
|
|
274
|
+
/*
|
|
275
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
276
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
277
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
278
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
279
|
+
*
|
|
280
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
281
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
282
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
283
|
+
* governing permissions and limitations under the License.
|
|
284
|
+
*/
|
|
285
|
+
|
|
286
|
+
/*
|
|
287
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
288
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
289
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
290
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
291
|
+
*
|
|
292
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
293
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
294
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
295
|
+
* governing permissions and limitations under the License.
|
|
296
|
+
*/
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
function $47736c1e63ba1c6d$export$1da781778207e0a2(options) {
|
|
300
|
+
let { reusableView: { layoutInfo: layoutInfo , virtualizer: virtualizer } , ref: ref } = options;
|
|
301
|
+
let updateSize = (0, $kSaV5$useCallback)(()=>{
|
|
302
|
+
let size = $47736c1e63ba1c6d$var$getSize(ref.current);
|
|
303
|
+
virtualizer.updateItemSize(layoutInfo.key, size);
|
|
304
|
+
}, [
|
|
305
|
+
virtualizer,
|
|
306
|
+
layoutInfo.key,
|
|
307
|
+
ref
|
|
308
|
+
]);
|
|
309
|
+
(0, $kSaV5$useLayoutEffect)(()=>{
|
|
310
|
+
if (layoutInfo.estimatedSize) updateSize();
|
|
311
|
+
});
|
|
312
|
+
return {
|
|
313
|
+
updateSize: updateSize
|
|
314
|
+
};
|
|
315
|
+
}
|
|
316
|
+
function $47736c1e63ba1c6d$var$getSize(node) {
|
|
317
|
+
// Reset height before measuring so we get the intrinsic size
|
|
318
|
+
let height = node.style.height;
|
|
319
|
+
node.style.height = "";
|
|
320
|
+
let size = new (0, $kSaV5$Size)(node.scrollWidth, node.scrollHeight);
|
|
321
|
+
node.style.height = height;
|
|
322
|
+
return size;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
function $ccf8a0a04e4175ae$export$6796df8ba7398521(props) {
|
|
327
|
+
let { className: className , reusableView: reusableView , parent: parent } = props;
|
|
328
|
+
let { direction: direction } = (0, $kSaV5$useLocale)();
|
|
329
|
+
let ref = (0, $kSaV5$useRef)();
|
|
330
|
+
(0, $47736c1e63ba1c6d$export$1da781778207e0a2)({
|
|
331
|
+
reusableView: reusableView,
|
|
332
|
+
ref: ref
|
|
333
|
+
});
|
|
334
|
+
return /*#__PURE__*/ (0, $kSaV5$react).createElement("div", {
|
|
335
|
+
role: "presentation",
|
|
336
|
+
ref: ref,
|
|
337
|
+
className: className,
|
|
338
|
+
style: $ccf8a0a04e4175ae$export$1481e64fbe01b8b3(reusableView.layoutInfo, direction, parent && parent.layoutInfo)
|
|
339
|
+
}, reusableView.rendered);
|
|
340
|
+
}
|
|
341
|
+
let $ccf8a0a04e4175ae$var$cache = new WeakMap();
|
|
342
|
+
function $ccf8a0a04e4175ae$export$1481e64fbe01b8b3(layoutInfo, dir, parent) {
|
|
343
|
+
let xProperty = dir === "rtl" ? "right" : "left";
|
|
344
|
+
let cached = $ccf8a0a04e4175ae$var$cache.get(layoutInfo);
|
|
345
|
+
if (cached && cached[xProperty] != null) {
|
|
346
|
+
if (!parent) return cached;
|
|
347
|
+
// Invalidate if the parent position changed.
|
|
348
|
+
let top = layoutInfo.rect.y - parent.rect.y;
|
|
349
|
+
let x = layoutInfo.rect.x - parent.rect.x;
|
|
350
|
+
if (cached.top === top && cached[xProperty] === x) return cached;
|
|
351
|
+
}
|
|
352
|
+
let style = {
|
|
353
|
+
position: layoutInfo.isSticky ? "sticky" : "absolute",
|
|
354
|
+
overflow: layoutInfo.allowOverflow ? "visible" : "hidden",
|
|
355
|
+
top: layoutInfo.rect.y - (parent ? parent.rect.y : 0),
|
|
356
|
+
[xProperty]: layoutInfo.rect.x - (parent ? parent.rect.x : 0),
|
|
357
|
+
transition: "all",
|
|
358
|
+
WebkitTransition: "all",
|
|
359
|
+
WebkitTransitionDuration: "inherit",
|
|
360
|
+
transitionDuration: "inherit",
|
|
361
|
+
width: layoutInfo.rect.width,
|
|
362
|
+
height: layoutInfo.rect.height,
|
|
363
|
+
opacity: layoutInfo.opacity,
|
|
364
|
+
zIndex: layoutInfo.zIndex,
|
|
365
|
+
transform: layoutInfo.transform,
|
|
366
|
+
contain: "size layout style"
|
|
367
|
+
};
|
|
368
|
+
$ccf8a0a04e4175ae$var$cache.set(layoutInfo, style);
|
|
369
|
+
return style;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
function $6d0a5c394373ae64$var$Virtualizer(props, ref) {
|
|
374
|
+
let { children: renderView , renderWrapper: renderWrapper , layout: layout , collection: collection , sizeToFit: sizeToFit , scrollDirection: scrollDirection , transitionDuration: transitionDuration , isLoading: isLoading , onLoadMore: onLoadMore , focusedKey: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
375
|
+
focusedKey , shouldUseVirtualFocus: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
376
|
+
shouldUseVirtualFocus , scrollToItem: // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
377
|
+
scrollToItem , ...otherProps } = props;
|
|
378
|
+
let fallbackRef = (0, $kSaV5$useRef)();
|
|
379
|
+
ref = ref || fallbackRef;
|
|
380
|
+
let state = (0, $kSaV5$useVirtualizerState)({
|
|
381
|
+
transitionDuration: transitionDuration,
|
|
382
|
+
layout: layout,
|
|
383
|
+
collection: collection,
|
|
384
|
+
renderView: renderView,
|
|
385
|
+
renderWrapper: renderWrapper || $6d0a5c394373ae64$var$defaultRenderWrapper,
|
|
386
|
+
onVisibleRectChange (rect) {
|
|
387
|
+
ref.current.scrollLeft = rect.x;
|
|
388
|
+
ref.current.scrollTop = rect.y;
|
|
389
|
+
}
|
|
390
|
+
});
|
|
391
|
+
let { virtualizerProps: virtualizerProps } = $6d0a5c394373ae64$export$dd6d526d88b5a137(props, state, ref);
|
|
392
|
+
// Handle scrolling, and call onLoadMore when nearing the bottom.
|
|
393
|
+
let onVisibleRectChange = (0, $kSaV5$useCallback)((rect)=>{
|
|
394
|
+
state.setVisibleRect(rect);
|
|
395
|
+
if (!isLoading && onLoadMore) {
|
|
396
|
+
let scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
|
|
397
|
+
if (rect.y > scrollOffset) onLoadMore();
|
|
398
|
+
}
|
|
399
|
+
}, [
|
|
400
|
+
isLoading,
|
|
401
|
+
onLoadMore,
|
|
402
|
+
state
|
|
403
|
+
]);
|
|
404
|
+
(0, $kSaV5$useLayoutEffect)(()=>{
|
|
405
|
+
if (!isLoading && onLoadMore && !state.isAnimating) {
|
|
406
|
+
if (state.contentSize.height > 0 && state.contentSize.height <= state.virtualizer.visibleRect.height) onLoadMore();
|
|
407
|
+
}
|
|
408
|
+
}, [
|
|
409
|
+
state.contentSize,
|
|
410
|
+
state.isAnimating,
|
|
411
|
+
state.virtualizer,
|
|
412
|
+
onLoadMore,
|
|
413
|
+
isLoading
|
|
414
|
+
]);
|
|
415
|
+
return /*#__PURE__*/ (0, $kSaV5$react).createElement((0, $44a6ee657928b002$export$5665e3d6be6adea), {
|
|
416
|
+
...(0, $kSaV5$mergeProps)(otherProps, virtualizerProps),
|
|
417
|
+
ref: ref,
|
|
418
|
+
innerStyle: state.isAnimating ? {
|
|
419
|
+
transition: `none ${state.virtualizer.transitionDuration}ms`
|
|
420
|
+
} : undefined,
|
|
421
|
+
contentSize: state.contentSize,
|
|
422
|
+
onVisibleRectChange: onVisibleRectChange,
|
|
423
|
+
onScrollStart: state.startScrolling,
|
|
424
|
+
onScrollEnd: state.endScrolling,
|
|
425
|
+
sizeToFit: sizeToFit,
|
|
426
|
+
scrollDirection: scrollDirection
|
|
427
|
+
}, state.visibleViews);
|
|
428
|
+
}
|
|
429
|
+
function $6d0a5c394373ae64$export$dd6d526d88b5a137(props, state, ref) {
|
|
430
|
+
let { focusedKey: focusedKey , scrollToItem: scrollToItem , shouldUseVirtualFocus: shouldUseVirtualFocus } = props;
|
|
431
|
+
let { virtualizer: virtualizer } = state;
|
|
432
|
+
// Scroll to the focusedKey when it changes. Actually focusing the focusedKey
|
|
433
|
+
// is up to the implementation using Virtualizer since we don't have refs
|
|
434
|
+
// to all of the item DOM nodes.
|
|
435
|
+
let lastFocusedKey = (0, $kSaV5$useRef)(null);
|
|
436
|
+
let isFocusWithin = (0, $kSaV5$useRef)(false);
|
|
437
|
+
(0, $kSaV5$useEffect)(()=>{
|
|
438
|
+
if (virtualizer.visibleRect.height === 0) return;
|
|
439
|
+
// Only scroll the focusedKey into view if the modality is not pointer to avoid jumps in position when clicking/pressing tall items.
|
|
440
|
+
// Exception made if focus isn't within the virtualizer (e.g. opening a picker via click should scroll the selected item into view)
|
|
441
|
+
let modality = (0, $kSaV5$getInteractionModality)();
|
|
442
|
+
if (focusedKey !== lastFocusedKey.current && (modality !== "pointer" || !isFocusWithin.current)) {
|
|
443
|
+
if (scrollToItem) // If user provides scrolltoitem, then it is their responsibility to call scrollIntoViewport if desired
|
|
444
|
+
// since we don't know if their scrollToItem may take some time to actually bring the active element into the virtualizer's visible rect.
|
|
445
|
+
scrollToItem(focusedKey);
|
|
446
|
+
else {
|
|
447
|
+
virtualizer.scrollToItem(focusedKey, {
|
|
448
|
+
duration: 0
|
|
449
|
+
});
|
|
450
|
+
if (modality === "keyboard" && ref.current.contains(document.activeElement)) (0, $kSaV5$scrollIntoViewport)(document.activeElement, {
|
|
451
|
+
containingElement: ref.current
|
|
452
|
+
});
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
lastFocusedKey.current = focusedKey;
|
|
456
|
+
}, [
|
|
457
|
+
focusedKey,
|
|
458
|
+
virtualizer.visibleRect.height,
|
|
459
|
+
virtualizer,
|
|
460
|
+
lastFocusedKey,
|
|
461
|
+
scrollToItem,
|
|
462
|
+
ref
|
|
463
|
+
]);
|
|
464
|
+
// Persist the focusedKey and prevent it from being removed from the DOM when scrolled out of view.
|
|
465
|
+
virtualizer.persistedKeys = (0, $kSaV5$useMemo)(()=>focusedKey ? new Set([
|
|
466
|
+
focusedKey
|
|
467
|
+
]) : new Set(), [
|
|
468
|
+
focusedKey
|
|
469
|
+
]);
|
|
470
|
+
let onFocus = (0, $kSaV5$useCallback)((e)=>{
|
|
471
|
+
// If the focused item is scrolled out of view and is not in the DOM, the collection
|
|
472
|
+
// will have tabIndex={0}. When tabbing in from outside, scroll the focused item into view.
|
|
473
|
+
// Ignore focus events that bubble through portals (e.g. focus that happens on a menu popover child of the virtualizer)
|
|
474
|
+
// Don't scroll focused key into view if modality is pointer to prevent sudden jump in position (e.g. CardView).
|
|
475
|
+
let modality = (0, $kSaV5$getInteractionModality)();
|
|
476
|
+
if (!isFocusWithin.current && ref.current.contains(e.target) && modality !== "pointer") {
|
|
477
|
+
if (scrollToItem) scrollToItem(focusedKey);
|
|
478
|
+
else virtualizer.scrollToItem(focusedKey, {
|
|
479
|
+
duration: 0
|
|
480
|
+
});
|
|
481
|
+
}
|
|
482
|
+
isFocusWithin.current = e.target !== ref.current;
|
|
483
|
+
}, [
|
|
484
|
+
ref,
|
|
485
|
+
virtualizer,
|
|
486
|
+
focusedKey,
|
|
487
|
+
scrollToItem
|
|
488
|
+
]);
|
|
489
|
+
let onBlur = (0, $kSaV5$useCallback)((e)=>{
|
|
490
|
+
isFocusWithin.current = ref.current.contains(e.relatedTarget);
|
|
491
|
+
}, [
|
|
492
|
+
ref
|
|
493
|
+
]);
|
|
494
|
+
// When the focused item is scrolled out of view and is removed from the DOM,
|
|
495
|
+
// move focus to the collection view as a whole if focus was within before.
|
|
496
|
+
let focusedView = virtualizer.getView(focusedKey);
|
|
497
|
+
(0, $kSaV5$useEffect)(()=>{
|
|
498
|
+
if (focusedKey && !focusedView && isFocusWithin.current && document.activeElement !== ref.current) (0, $kSaV5$focusWithoutScrolling)(ref.current);
|
|
499
|
+
});
|
|
500
|
+
let hasTabbableChild = (0, $15be78fb069d96f5$export$eac1895992b9f3d6)({
|
|
501
|
+
isEmpty: virtualizer.collection.size === 0,
|
|
502
|
+
hasRenderedAnything: virtualizer.contentSize.height > 0 || virtualizer.contentSize.width > 0
|
|
503
|
+
}, ref);
|
|
504
|
+
// Set tabIndex to -1 if the focused view is in the DOM, otherwise 0 so that the collection
|
|
505
|
+
// itself is tabbable. When the collection receives focus, we scroll the focused item back into
|
|
506
|
+
// view, which will allow it to be properly focused. If using virtual focus, don't set a
|
|
507
|
+
// tabIndex at all so that VoiceOver on iOS 14 doesn't try to move real DOM focus to the element anyway.
|
|
508
|
+
let tabIndex;
|
|
509
|
+
if (!shouldUseVirtualFocus) // When there is no focusedView the default tabIndex is 0. We include logic for empty collections too.
|
|
510
|
+
// For collections that are empty, but have a link in the empty children we want to skip focusing this
|
|
511
|
+
// and let focus move to the link similar to link moving to children.
|
|
512
|
+
tabIndex = focusedView || hasTabbableChild ? -1 : 0;
|
|
513
|
+
return {
|
|
514
|
+
virtualizerProps: {
|
|
515
|
+
tabIndex: tabIndex,
|
|
516
|
+
onFocus: onFocus,
|
|
517
|
+
onBlur: onBlur
|
|
518
|
+
}
|
|
519
|
+
};
|
|
520
|
+
}
|
|
521
|
+
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
522
|
+
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
523
|
+
const $6d0a5c394373ae64$export$89be5a243e59c4b2 = /*#__PURE__*/ (0, $kSaV5$react).forwardRef($6d0a5c394373ae64$var$Virtualizer);
|
|
524
|
+
function $6d0a5c394373ae64$var$defaultRenderWrapper(parent, reusableView) {
|
|
525
|
+
return /*#__PURE__*/ (0, $kSaV5$react).createElement((0, $ccf8a0a04e4175ae$export$6796df8ba7398521), {
|
|
526
|
+
key: reusableView.key,
|
|
527
|
+
reusableView: reusableView,
|
|
528
|
+
parent: parent
|
|
529
|
+
});
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
|
|
533
|
+
|
|
534
|
+
|
|
535
|
+
|
|
536
|
+
|
|
537
|
+
|
|
538
|
+
|
|
539
|
+
export {$6d0a5c394373ae64$export$dd6d526d88b5a137 as useVirtualizer, $6d0a5c394373ae64$export$89be5a243e59c4b2 as Virtualizer, $47736c1e63ba1c6d$export$1da781778207e0a2 as useVirtualizerItem, $ccf8a0a04e4175ae$export$6796df8ba7398521 as VirtualizerItem, $ccf8a0a04e4175ae$export$1481e64fbe01b8b3 as layoutInfoToStyle, $44a6ee657928b002$export$5665e3d6be6adea as ScrollView, $ce415dc67314b753$export$faf7630257ad4304 as getRTLOffsetType, $ce415dc67314b753$export$1389d168952b34b5 as getScrollLeft, $ce415dc67314b753$export$ed5fd5ffe5ab0ac as setScrollLeft};
|
|
540
|
+
//# sourceMappingURL=module.js.map
|
package/package.json
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/virtualizer",
|
|
3
|
-
"version": "3.6.2-nightly.
|
|
3
|
+
"version": "3.6.2-nightly.3705+93b3c951e",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
7
7
|
"module": "dist/module.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
"types": "./dist/types.d.ts",
|
|
10
|
+
"import": "./dist/import.mjs",
|
|
11
|
+
"require": "./dist/main.js"
|
|
12
|
+
},
|
|
8
13
|
"types": "dist/types.d.ts",
|
|
9
14
|
"source": "src/index.ts",
|
|
10
15
|
"files": [
|
|
@@ -17,12 +22,12 @@
|
|
|
17
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
18
23
|
},
|
|
19
24
|
"dependencies": {
|
|
20
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
21
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
22
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
23
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
24
|
-
"@react-stately/virtualizer": "3.4.2-nightly.
|
|
25
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
25
|
+
"@react-aria/focus": "3.0.0-nightly.2005+93b3c951e",
|
|
26
|
+
"@react-aria/i18n": "3.0.0-nightly.2005+93b3c951e",
|
|
27
|
+
"@react-aria/interactions": "3.0.0-nightly.2005+93b3c951e",
|
|
28
|
+
"@react-aria/utils": "3.0.0-nightly.2005+93b3c951e",
|
|
29
|
+
"@react-stately/virtualizer": "3.4.2-nightly.3705+93b3c951e",
|
|
30
|
+
"@react-types/shared": "3.0.0-nightly.2005+93b3c951e",
|
|
26
31
|
"@swc/helpers": "^0.4.14"
|
|
27
32
|
},
|
|
28
33
|
"peerDependencies": {
|
|
@@ -32,5 +37,5 @@
|
|
|
32
37
|
"publishConfig": {
|
|
33
38
|
"access": "public"
|
|
34
39
|
},
|
|
35
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "93b3c951eb784b14183f9988f2d188b34de8f42d"
|
|
36
41
|
}
|