@react-aria/virtualizer 3.10.2-nightly.4649 → 3.10.2-nightly.4656

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 (21) hide show
  1. package/dist/ScrollView.main.js +4 -2
  2. package/dist/ScrollView.main.js.map +1 -1
  3. package/dist/ScrollView.mjs +4 -2
  4. package/dist/ScrollView.module.js +4 -2
  5. package/dist/ScrollView.module.js.map +1 -1
  6. package/dist/Virtualizer.main.js +16 -98
  7. package/dist/Virtualizer.main.js.map +1 -1
  8. package/dist/Virtualizer.mjs +17 -99
  9. package/dist/Virtualizer.module.js +17 -99
  10. package/dist/Virtualizer.module.js.map +1 -1
  11. package/dist/VirtualizerItem.main.js +0 -4
  12. package/dist/VirtualizerItem.main.js.map +1 -1
  13. package/dist/VirtualizerItem.mjs +0 -4
  14. package/dist/VirtualizerItem.module.js +0 -4
  15. package/dist/VirtualizerItem.module.js.map +1 -1
  16. package/dist/types.d.ts +6 -16
  17. package/dist/types.d.ts.map +1 -1
  18. package/package.json +7 -7
  19. package/src/ScrollView.tsx +2 -2
  20. package/src/Virtualizer.tsx +18 -109
  21. package/src/VirtualizerItem.tsx +0 -4
package/src/Virtualizer.tsx CHANGED
@@ -11,14 +11,13 @@
11
11
  */
12
12
 
13
13
  import {Collection, Key} from '@react-types/shared';
14
- import {getInteractionModality} from '@react-aria/interactions';
15
14
  import {Layout, Rect, ReusableView, useVirtualizerState, VirtualizerState} from '@react-stately/virtualizer';
16
15
  import {mergeProps, useLayoutEffect} from '@react-aria/utils';
17
- import React, {createContext, FocusEvent, HTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef} from 'react';
16
+ import React, {createContext, HTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useMemo, useRef} from 'react';
18
17
  import {ScrollView} from './ScrollView';
19
18
  import {VirtualizerItem} from './VirtualizerItem';
20
19
 
21
- interface VirtualizerProps<T extends object, V> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
20
+ interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
22
21
  children: (type: string, content: T) => V,
23
22
  renderWrapper?: (
24
23
  parent: ReusableView<T, V> | null,
@@ -26,22 +25,19 @@ interface VirtualizerProps<T extends object, V> extends Omit<HTMLAttributes<HTML
26
25
  children: ReusableView<T, V>[],
27
26
  renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]
28
27
  ) => ReactElement,
29
- layout: Layout<T>,
28
+ layout: Layout<T, O>,
30
29
  collection: Collection<T>,
31
30
  focusedKey?: Key,
32
31
  sizeToFit?: 'width' | 'height',
33
32
  scrollDirection?: 'horizontal' | 'vertical' | 'both',
34
- transitionDuration?: number,
35
33
  isLoading?: boolean,
36
34
  onLoadMore?: () => void,
37
- shouldUseVirtualFocus?: boolean,
38
- scrollToItem?: (key: Key) => void,
39
- autoFocus?: boolean
35
+ layoutOptions?: O
40
36
  }
41
37
 
42
38
  export const VirtualizerContext = createContext<VirtualizerState<any, any, any> | null>(null);
43
39
 
44
- function Virtualizer<T extends object, V extends ReactNode>(props: VirtualizerProps<T, V>, ref: RefObject<HTMLDivElement>) {
40
+ function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, ref: RefObject<HTMLDivElement>) {
45
41
  let {
46
42
  children: renderView,
47
43
  renderWrapper,
@@ -49,19 +45,12 @@ function Virtualizer<T extends object, V extends ReactNode>(props: VirtualizerPr
49
45
  collection,
50
46
  sizeToFit,
51
47
  scrollDirection,
52
- transitionDuration,
53
48
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
54
49
  isLoading,
55
50
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
56
51
  onLoadMore,
57
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
58
52
  focusedKey,
59
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
60
- shouldUseVirtualFocus,
61
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
62
- scrollToItem,
63
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
64
- autoFocus,
53
+ layoutOptions,
65
54
  ...otherProps
66
55
  } = props;
67
56
 
@@ -69,7 +58,6 @@ function Virtualizer<T extends object, V extends ReactNode>(props: VirtualizerPr
69
58
  ref = ref || fallbackRef;
70
59
 
71
60
  let state = useVirtualizerState({
72
- transitionDuration,
73
61
  layout,
74
62
  collection,
75
63
  renderView,
@@ -77,7 +65,9 @@ function Virtualizer<T extends object, V extends ReactNode>(props: VirtualizerPr
77
65
  onVisibleRectChange(rect) {
78
66
  ref.current.scrollLeft = rect.x;
79
67
  ref.current.scrollTop = rect.y;
80
- }
68
+ },
69
+ persistedKeys: useMemo(() => focusedKey ? new Set([focusedKey]) : new Set(), [focusedKey]),
70
+ layoutOptions
81
71
  });
82
72
 
83
73
  let {virtualizerProps, scrollViewProps} = useVirtualizer(props, state, ref);
@@ -86,7 +76,6 @@ function Virtualizer<T extends object, V extends ReactNode>(props: VirtualizerPr
86
76
  <ScrollView
87
77
  {...mergeProps(otherProps, virtualizerProps, scrollViewProps)}
88
78
  ref={ref}
89
- innerStyle={state.isAnimating ? {transition: `none ${state.virtualizer.transitionDuration}ms`} : undefined}
90
79
  contentSize={state.contentSize}
91
80
  onScrollStart={state.startScrolling}
92
81
  onScrollEnd={state.endScrolling}
@@ -102,108 +91,32 @@ function Virtualizer<T extends object, V extends ReactNode>(props: VirtualizerPr
102
91
  interface VirtualizerOptions {
103
92
  tabIndex?: number,
104
93
  focusedKey?: Key,
105
- scrollToItem?: (key: Key) => void,
106
- shouldUseVirtualFocus?: boolean,
107
- autoFocus?: boolean,
108
94
  isLoading?: boolean,
109
95
  onLoadMore?: () => void
110
96
  }
111
97
 
98
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
112
99
  export function useVirtualizer<T extends object, V extends ReactNode, W>(props: VirtualizerOptions, state: VirtualizerState<T, V, W>, ref: RefObject<HTMLElement>) {
113
- let {focusedKey, scrollToItem, shouldUseVirtualFocus, isLoading, onLoadMore} = props;
114
- let {virtualizer} = state;
115
- // Scroll to the focusedKey when it changes. Actually focusing the focusedKey
116
- // is up to the implementation using Virtualizer since we don't have refs
117
- // to all of the item DOM nodes.
118
- let lastFocusedKey = useRef(null);
119
- let isFocusWithin = useRef(false);
120
- let autoFocus = useRef(props.autoFocus);
121
- useEffect(() => {
122
- if (virtualizer.visibleRect.height === 0) {
123
- return;
124
- }
125
-
126
- // Only scroll the focusedKey into view if the modality is not pointer to avoid jumps in position when clicking/pressing tall items.
127
- let modality = getInteractionModality();
128
- if (focusedKey !== lastFocusedKey.current && (modality !== 'pointer' || autoFocus.current)) {
129
- autoFocus.current = false;
130
- if (scrollToItem) {
131
- // If user provides scrolltoitem, then it is their responsibility to call scrollIntoViewport if desired
132
- // since we don't know if their scrollToItem may take some time to actually bring the active element into the virtualizer's visible rect.
133
- scrollToItem(focusedKey);
134
- } else {
135
- virtualizer.scrollToItem(focusedKey, {duration: 0});
136
-
137
- }
138
- }
139
-
140
- lastFocusedKey.current = focusedKey;
141
- }, [focusedKey, virtualizer.visibleRect.height, virtualizer, lastFocusedKey, scrollToItem, ref]);
142
-
143
- // Persist the focusedKey and prevent it from being removed from the DOM when scrolled out of view.
144
- virtualizer.persistedKeys = useMemo(() => focusedKey ? new Set([focusedKey]) : new Set(), [focusedKey]);
145
-
146
- let onFocus = useCallback((e: FocusEvent) => {
147
- // If the focused item is scrolled out of view and is not in the DOM, the collection
148
- // will have tabIndex={0}. When tabbing in from outside, scroll the focused item into view.
149
- // Ignore focus events that bubble through portals (e.g. focus that happens on a menu popover child of the virtualizer)
150
- // Don't scroll focused key into view if modality is pointer to prevent sudden jump in position (e.g. CardView).
151
- let modality = getInteractionModality();
152
- if (!isFocusWithin.current && ref.current.contains(e.target) && modality !== 'pointer') {
153
- if (scrollToItem) {
154
- scrollToItem(focusedKey);
155
- } else {
156
- virtualizer.scrollToItem(focusedKey, {duration: 0});
157
- }
158
- }
159
-
160
- isFocusWithin.current = e.target !== ref.current;
161
- }, [ref, virtualizer, focusedKey, scrollToItem]);
162
-
163
- let onBlur = useCallback((e: FocusEvent) => {
164
- isFocusWithin.current = ref.current.contains(e.relatedTarget as Element);
165
- }, [ref]);
166
-
167
- // Set tabIndex to -1 if there is a focused key, otherwise 0 so that the collection
168
- // itself is tabbable. When the collection receives focus, we scroll the focused item back into
169
- // view, which will allow it to be properly focused. If using virtual focus, don't set a
170
- // tabIndex at all so that VoiceOver on iOS 14 doesn't try to move real DOM focus to the element anyway.
171
- let tabIndex: number;
172
- if (!shouldUseVirtualFocus) {
173
- // When there is no focusedKey the default tabIndex is 0. We include logic for empty collections too.
174
- // For collections that are empty, but have a link in the empty children we want to skip focusing this
175
- // and let focus move to the link similar to link moving to children.
176
- tabIndex = focusedKey != null ? -1 : 0;
177
-
178
- // If the collection is empty, we want the tabIndex provided from props (if any)
179
- // so that we handle when tabbable items are added to the empty state.
180
- if (virtualizer.collection.size === 0 && props.tabIndex != null) {
181
- tabIndex = props.tabIndex;
182
- }
183
- }
100
+ let {isLoading, onLoadMore} = props;
101
+ let {setVisibleRect, virtualizer} = state;
184
102
 
185
103
  // Handle scrolling, and call onLoadMore when nearing the bottom.
186
104
  let isLoadingRef = useRef(isLoading);
187
105
  let prevProps = useRef(props);
188
106
  let onVisibleRectChange = useCallback((rect: Rect) => {
189
- state.setVisibleRect(rect);
107
+ setVisibleRect(rect);
190
108
 
191
109
  if (!isLoadingRef.current && onLoadMore) {
192
- let scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
110
+ let scrollOffset = virtualizer.contentSize.height - rect.height * 2;
193
111
  if (rect.y > scrollOffset) {
194
112
  isLoadingRef.current = true;
195
113
  onLoadMore();
196
114
  }
197
115
  }
198
- }, [onLoadMore, state]);
116
+ }, [onLoadMore, setVisibleRect, virtualizer]);
199
117
 
200
118
  let lastContentSize = useRef(0);
201
119
  useLayoutEffect(() => {
202
- // If animating, wait until we're done.
203
- if (state.isAnimating) {
204
- return;
205
- }
206
-
207
120
  // Only update isLoadingRef if props object actually changed,
208
121
  // not if a local state change occurred.
209
122
  let wasLoading = isLoadingRef.current;
@@ -225,14 +138,10 @@ export function useVirtualizer<T extends object, V extends ReactNode, W>(props:
225
138
  onLoadMore();
226
139
  }
227
140
  lastContentSize.current = state.contentSize.height;
228
- }, [state.contentSize, state.isAnimating, state.virtualizer, isLoading, onLoadMore, props]);
141
+ }, [state.contentSize, state.virtualizer, isLoading, onLoadMore, props]);
229
142
 
230
143
  return {
231
- virtualizerProps: {
232
- tabIndex,
233
- onFocus,
234
- onBlur
235
- },
144
+ virtualizerProps: {},
236
145
  scrollViewProps: {
237
146
  onVisibleRectChange
238
147
  }
@@ -241,7 +150,7 @@ export function useVirtualizer<T extends object, V extends ReactNode, W>(props:
241
150
 
242
151
  // forwardRef doesn't support generic parameters, so cast the result to the correct type
243
152
  // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
244
- const _Virtualizer = React.forwardRef(Virtualizer) as <T extends object, V>(props: VirtualizerProps<T, V> & {ref?: RefObject<HTMLDivElement>}) => ReactElement;
153
+ const _Virtualizer = React.forwardRef(Virtualizer) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement>}) => ReactElement;
245
154
  export {_Virtualizer as Virtualizer};
246
155
 
247
156
  function defaultRenderWrapper<T extends object, V extends ReactNode>(
package/src/VirtualizerItem.tsx CHANGED
@@ -75,10 +75,6 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
75
75
  // Sticky elements are positioned in normal document flow. Display inline-block so that they don't push other sticky columns onto the following rows.
76
76
  display: layoutInfo.isSticky ? 'inline-block' : undefined,
77
77
  overflow: layoutInfo.allowOverflow ? 'visible' : 'hidden',
78
- transition: 'all',
79
- WebkitTransition: 'all',
80
- WebkitTransitionDuration: 'inherit',
81
- transitionDuration: 'inherit',
82
78
  opacity: layoutInfo.opacity,
83
79
  zIndex: layoutInfo.zIndex,
84
80
  transform: layoutInfo.transform,