@react-aria/virtualizer - npm Package Compare versions

Comparing version 4.0.4 to 4.1.0

dist/ScrollView.main.js

@@ -43,6 +43,3 @@ var $efdd61e59e023a1d$exports = require("./utils.main.js");
         ref: ref
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).createElement("div", {
-        role: "presentation",
-        ...contentProps
-    }, props.children));
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).createElement("div", contentProps, props.children));
 }
@@ -86,3 +83,3 @@ const $00ca8c0b29e3e07c$export$5665e3d6be6adea = /*#__PURE__*/ (0, ($parcel$interopDefault($kvIfm$react))).forwardRef($00ca8c0b29e3e07c$var$ScrollView);
                 state.scrollEndTime = now + 300;
-                clearTimeout(state.scrollTimeout);
+                if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout);
                 state.scrollTimeout = setTimeout(()=>{
@@ -108,6 +105,5 @@ state.isScrolling = false;
     (0, $kvIfm$reactariautils.useEvent)(ref, 'scroll', onScroll);
-    // eslint-disable-next-line arrow-body-style
     (0, $kvIfm$react.useEffect)(()=>{
         return ()=>{
-            clearTimeout(state.scrollTimeout);
+            if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout);
             if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer'));
@@ -120,3 +116,3 @@ };
         let dom = ref.current;
-        if (!dom && !isUpdatingSize.current) return;
+        if (!dom || isUpdatingSize.current) return;
         // Prevent reentrancy when resize observer fires, triggers re-layout that results in
@@ -123,0 +119,0 @@ // content size update, causing below layout effect to fire. This avoids infinite loops.

dist/ScrollView.module.js

@@ -32,6 +32,3 @@ import {getScrollLeft as $ce415dc67314b753$export$1389d168952b34b5} from "./utils.module.js";
         ref: ref
-    }, /*#__PURE__*/ (0, $f9kpT$react).createElement("div", {
-        role: "presentation",
-        ...contentProps
-    }, props.children));
+    }, /*#__PURE__*/ (0, $f9kpT$react).createElement("div", contentProps, props.children));
 }
@@ -75,3 +72,3 @@ const $44a6ee657928b002$export$5665e3d6be6adea = /*#__PURE__*/ (0, $f9kpT$react).forwardRef($44a6ee657928b002$var$ScrollView);
                 state.scrollEndTime = now + 300;
-                clearTimeout(state.scrollTimeout);
+                if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout);
                 state.scrollTimeout = setTimeout(()=>{
@@ -97,6 +94,5 @@ state.isScrolling = false;
     (0, $f9kpT$useEvent)(ref, 'scroll', onScroll);
-    // eslint-disable-next-line arrow-body-style
     (0, $f9kpT$useEffect)(()=>{
         return ()=>{
-            clearTimeout(state.scrollTimeout);
+            if (state.scrollTimeout != null) clearTimeout(state.scrollTimeout);
             if (state.isScrolling) window.dispatchEvent(new Event('tk.connect-observer'));
@@ -109,3 +105,3 @@ };
         let dom = ref.current;
-        if (!dom && !isUpdatingSize.current) return;
+        if (!dom || isUpdatingSize.current) return;
         // Prevent reentrancy when resize observer fires, triggers re-layout that results in
@@ -112,0 +108,0 @@ // content size update, causing below layout effect to fire. This avoids infinite loops.

dist/types.d.ts

@@ -12,3 +12,3 @@ import { Direction, Key, RefObject, Collection } from "@react-types/shared";
 export interface VirtualizerItemOptions {
-    layoutInfo: LayoutInfo;
+    layoutInfo: LayoutInfo | null;
     virtualizer: IVirtualizer;
@@ -29,3 +29,3 @@ ref: RefObject<HTMLElement | null>;
 }
-export const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement>>;
+export const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<HTMLDivElement | null>>;
 export function useScrollView(props: ScrollViewProps, ref: _RefObject1<HTMLElement | null>): {
@@ -142,170 +142,170 @@ scrollViewProps: {
         } | undefined;
-        onCopy?: React.ClipboardEventHandler<HTMLElement>;
-        onCopyCapture?: React.ClipboardEventHandler<HTMLElement>;
-        onCut?: React.ClipboardEventHandler<HTMLElement>;
-        onCutCapture?: React.ClipboardEventHandler<HTMLElement>;
-        onPaste?: React.ClipboardEventHandler<HTMLElement>;
-        onPasteCapture?: React.ClipboardEventHandler<HTMLElement>;
-        onCompositionEnd?: React.CompositionEventHandler<HTMLElement>;
-        onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement>;
-        onCompositionStart?: React.CompositionEventHandler<HTMLElement>;
-        onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement>;
-        onCompositionUpdate?: React.CompositionEventHandler<HTMLElement>;
-        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement>;
-        onFocus?: React.FocusEventHandler<HTMLElement>;
-        onFocusCapture?: React.FocusEventHandler<HTMLElement>;
-        onBlur?: React.FocusEventHandler<HTMLElement>;
-        onBlurCapture?: React.FocusEventHandler<HTMLElement>;
-        onChange?: React.FormEventHandler<HTMLElement>;
-        onChangeCapture?: React.FormEventHandler<HTMLElement>;
-        onBeforeInput?: React.FormEventHandler<HTMLElement>;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLElement>;
-        onInput?: React.FormEventHandler<HTMLElement>;
-        onInputCapture?: React.FormEventHandler<HTMLElement>;
-        onReset?: React.FormEventHandler<HTMLElement>;
-        onResetCapture?: React.FormEventHandler<HTMLElement>;
-        onSubmit?: React.FormEventHandler<HTMLElement>;
-        onSubmitCapture?: React.FormEventHandler<HTMLElement>;
-        onInvalid?: React.FormEventHandler<HTMLElement>;
-        onInvalidCapture?: React.FormEventHandler<HTMLElement>;
-        onLoad?: React.ReactEventHandler<HTMLElement>;
-        onLoadCapture?: React.ReactEventHandler<HTMLElement>;
-        onError?: React.ReactEventHandler<HTMLElement>;
-        onErrorCapture?: React.ReactEventHandler<HTMLElement>;
-        onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
-        onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement>;
-        onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
-        onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement>;
-        onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
-        onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement>;
-        onAbort?: React.ReactEventHandler<HTMLElement>;
-        onAbortCapture?: React.ReactEventHandler<HTMLElement>;
-        onCanPlay?: React.ReactEventHandler<HTMLElement>;
-        onCanPlayCapture?: React.ReactEventHandler<HTMLElement>;
-        onCanPlayThrough?: React.ReactEventHandler<HTMLElement>;
-        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement>;
-        onDurationChange?: React.ReactEventHandler<HTMLElement>;
-        onDurationChangeCapture?: React.ReactEventHandler<HTMLElement>;
-        onEmptied?: React.ReactEventHandler<HTMLElement>;
-        onEmptiedCapture?: React.ReactEventHandler<HTMLElement>;
-        onEncrypted?: React.ReactEventHandler<HTMLElement>;
-        onEncryptedCapture?: React.ReactEventHandler<HTMLElement>;
-        onEnded?: React.ReactEventHandler<HTMLElement>;
-        onEndedCapture?: React.ReactEventHandler<HTMLElement>;
-        onLoadedData?: React.ReactEventHandler<HTMLElement>;
-        onLoadedDataCapture?: React.ReactEventHandler<HTMLElement>;
-        onLoadedMetadata?: React.ReactEventHandler<HTMLElement>;
-        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement>;
-        onLoadStart?: React.ReactEventHandler<HTMLElement>;
-        onLoadStartCapture?: React.ReactEventHandler<HTMLElement>;
-        onPause?: React.ReactEventHandler<HTMLElement>;
-        onPauseCapture?: React.ReactEventHandler<HTMLElement>;
-        onPlay?: React.ReactEventHandler<HTMLElement>;
-        onPlayCapture?: React.ReactEventHandler<HTMLElement>;
-        onPlaying?: React.ReactEventHandler<HTMLElement>;
-        onPlayingCapture?: React.ReactEventHandler<HTMLElement>;
-        onProgress?: React.ReactEventHandler<HTMLElement>;
-        onProgressCapture?: React.ReactEventHandler<HTMLElement>;
-        onRateChange?: React.ReactEventHandler<HTMLElement>;
-        onRateChangeCapture?: React.ReactEventHandler<HTMLElement>;
-        onResize?: React.ReactEventHandler<HTMLElement>;
-        onResizeCapture?: React.ReactEventHandler<HTMLElement>;
-        onSeeked?: React.ReactEventHandler<HTMLElement>;
-        onSeekedCapture?: React.ReactEventHandler<HTMLElement>;
-        onSeeking?: React.ReactEventHandler<HTMLElement>;
-        onSeekingCapture?: React.ReactEventHandler<HTMLElement>;
-        onStalled?: React.ReactEventHandler<HTMLElement>;
-        onStalledCapture?: React.ReactEventHandler<HTMLElement>;
-        onSuspend?: React.ReactEventHandler<HTMLElement>;
-        onSuspendCapture?: React.ReactEventHandler<HTMLElement>;
-        onTimeUpdate?: React.ReactEventHandler<HTMLElement>;
-        onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement>;
-        onVolumeChange?: React.ReactEventHandler<HTMLElement>;
-        onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement>;
-        onWaiting?: React.ReactEventHandler<HTMLElement>;
-        onWaitingCapture?: React.ReactEventHandler<HTMLElement>;
-        onAuxClick?: React.MouseEventHandler<HTMLElement>;
-        onAuxClickCapture?: React.MouseEventHandler<HTMLElement>;
-        onClick?: React.MouseEventHandler<HTMLElement>;
-        onClickCapture?: React.MouseEventHandler<HTMLElement>;
-        onContextMenu?: React.MouseEventHandler<HTMLElement>;
-        onContextMenuCapture?: React.MouseEventHandler<HTMLElement>;
-        onDoubleClick?: React.MouseEventHandler<HTMLElement>;
-        onDoubleClickCapture?: React.MouseEventHandler<HTMLElement>;
-        onDrag?: React.DragEventHandler<HTMLElement>;
-        onDragCapture?: React.DragEventHandler<HTMLElement>;
-        onDragEnd?: React.DragEventHandler<HTMLElement>;
-        onDragEndCapture?: React.DragEventHandler<HTMLElement>;
-        onDragEnter?: React.DragEventHandler<HTMLElement>;
-        onDragEnterCapture?: React.DragEventHandler<HTMLElement>;
-        onDragExit?: React.DragEventHandler<HTMLElement>;
-        onDragExitCapture?: React.DragEventHandler<HTMLElement>;
-        onDragLeave?: React.DragEventHandler<HTMLElement>;
-        onDragLeaveCapture?: React.DragEventHandler<HTMLElement>;
-        onDragOver?: React.DragEventHandler<HTMLElement>;
-        onDragOverCapture?: React.DragEventHandler<HTMLElement>;
-        onDragStart?: React.DragEventHandler<HTMLElement>;
-        onDragStartCapture?: React.DragEventHandler<HTMLElement>;
-        onDrop?: React.DragEventHandler<HTMLElement>;
-        onDropCapture?: React.DragEventHandler<HTMLElement>;
-        onMouseDown?: React.MouseEventHandler<HTMLElement>;
-        onMouseDownCapture?: React.MouseEventHandler<HTMLElement>;
-        onMouseEnter?: React.MouseEventHandler<HTMLElement>;
-        onMouseLeave?: React.MouseEventHandler<HTMLElement>;
-        onMouseMove?: React.MouseEventHandler<HTMLElement>;
-        onMouseMoveCapture?: React.MouseEventHandler<HTMLElement>;
-        onMouseOut?: React.MouseEventHandler<HTMLElement>;
-        onMouseOutCapture?: React.MouseEventHandler<HTMLElement>;
-        onMouseOver?: React.MouseEventHandler<HTMLElement>;
-        onMouseOverCapture?: React.MouseEventHandler<HTMLElement>;
-        onMouseUp?: React.MouseEventHandler<HTMLElement>;
-        onMouseUpCapture?: React.MouseEventHandler<HTMLElement>;
-        onSelect?: React.ReactEventHandler<HTMLElement>;
-        onSelectCapture?: React.ReactEventHandler<HTMLElement>;
-        onTouchCancel?: React.TouchEventHandler<HTMLElement>;
-        onTouchCancelCapture?: React.TouchEventHandler<HTMLElement>;
-        onTouchEnd?: React.TouchEventHandler<HTMLElement>;
-        onTouchEndCapture?: React.TouchEventHandler<HTMLElement>;
-        onTouchMove?: React.TouchEventHandler<HTMLElement>;
-        onTouchMoveCapture?: React.TouchEventHandler<HTMLElement>;
-        onTouchStart?: React.TouchEventHandler<HTMLElement>;
-        onTouchStartCapture?: React.TouchEventHandler<HTMLElement>;
-        onPointerDown?: React.PointerEventHandler<HTMLElement>;
-        onPointerDownCapture?: React.PointerEventHandler<HTMLElement>;
-        onPointerMove?: React.PointerEventHandler<HTMLElement>;
-        onPointerMoveCapture?: React.PointerEventHandler<HTMLElement>;
-        onPointerUp?: React.PointerEventHandler<HTMLElement>;
-        onPointerUpCapture?: React.PointerEventHandler<HTMLElement>;
-        onPointerCancel?: React.PointerEventHandler<HTMLElement>;
-        onPointerCancelCapture?: React.PointerEventHandler<HTMLElement>;
-        onPointerEnter?: React.PointerEventHandler<HTMLElement>;
-        onPointerLeave?: React.PointerEventHandler<HTMLElement>;
-        onPointerOver?: React.PointerEventHandler<HTMLElement>;
-        onPointerOverCapture?: React.PointerEventHandler<HTMLElement>;
-        onPointerOut?: React.PointerEventHandler<HTMLElement>;
-        onPointerOutCapture?: React.PointerEventHandler<HTMLElement>;
-        onGotPointerCapture?: React.PointerEventHandler<HTMLElement>;
-        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
-        onLostPointerCapture?: React.PointerEventHandler<HTMLElement>;
-        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
-        onScroll?: React.UIEventHandler<HTMLElement>;
-        onScrollCapture?: React.UIEventHandler<HTMLElement>;
-        onWheel?: React.WheelEventHandler<HTMLElement>;
-        onWheelCapture?: React.WheelEventHandler<HTMLElement>;
-        onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
-        onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement>;
-        onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
-        onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement>;
-        onAnimationIteration?: React.AnimationEventHandler<HTMLElement>;
-        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement>;
-        onToggle?: React.ToggleEventHandler<HTMLElement>;
-        onBeforeToggle?: React.ToggleEventHandler<HTMLElement>;
-        onTransitionCancel?: React.TransitionEventHandler<HTMLElement>;
-        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement>;
-        onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
-        onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement>;
-        onTransitionRun?: React.TransitionEventHandler<HTMLElement>;
-        onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement>;
-        onTransitionStart?: React.TransitionEventHandler<HTMLElement>;
-        onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement>;
+        onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+        onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+        onChange?: React.FormEventHandler<HTMLElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onResize?: React.ReactEventHandler<HTMLElement> | undefined;
+        onResizeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+        onBeforeToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+        onTransitionCancel?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRun?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
     };
@@ -318,2 +318,3 @@ contentProps: {
 interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
+    layoutInfo: LayoutInfo;
     parent?: LayoutInfo | null;
@@ -326,3 +327,3 @@ style?: CSSProperties;
 export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent?: LayoutInfo | null): CSSProperties;
-type RenderWrapper<T extends object, V> = (parent: ReusableView<T, V> | null, reusableView: ReusableView<T, V>, children: ReusableView<T, V>[], renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]) => ReactElement;
+type RenderWrapper<T extends object, V> = (parent: ReusableView<T, V> | null, reusableView: ReusableView<T, V>, children: ReusableView<T, V>[], renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]) => ReactElement | null;
 interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
@@ -329,0 +330,0 @@ children: (type: string, content: T) => V;

dist/useVirtualizerItem.main.js

@@ -26,10 +26,11 @@ var $64doO$reactstatelyvirtualizer = require("@react-stately/virtualizer");
     let { layoutInfo: layoutInfo, virtualizer: virtualizer, ref: ref } = options;
+    let key = layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.key;
     let updateSize = (0, $64doO$react.useCallback)(()=>{
-        if (layoutInfo) {
+        if (key != null && ref.current) {
             let size = $7d70e069fceb2deb$var$getSize(ref.current);
-            virtualizer.updateItemSize(layoutInfo.key, size);
+            virtualizer.updateItemSize(key, size);
         }
     }, [
         virtualizer,
-        layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.key,
+        key,
         ref
@@ -36,0 +37,0 @@ ]);

dist/useVirtualizerItem.module.js

@@ -20,10 +20,11 @@ import {Size as $uBoVA$Size} from "@react-stately/virtualizer";
     let { layoutInfo: layoutInfo, virtualizer: virtualizer, ref: ref } = options;
+    let key = layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.key;
     let updateSize = (0, $uBoVA$useCallback)(()=>{
-        if (layoutInfo) {
+        if (key != null && ref.current) {
             let size = $47736c1e63ba1c6d$var$getSize(ref.current);
-            virtualizer.updateItemSize(layoutInfo.key, size);
+            virtualizer.updateItemSize(key, size);
         }
     }, [
         virtualizer,
-        layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.key,
+        key,
         ref
@@ -30,0 +31,0 @@ ]);

dist/Virtualizer.main.js

@@ -32,8 +32,5 @@ var $00ca8c0b29e3e07c$exports = require("./ScrollView.main.js");
 
-function $e1fb6f3669e1c329$var$Virtualizer(props, ref) {
-    let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, scrollDirection: scrollDirection, isLoading: // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isLoading, onLoadMore: // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onLoadMore, persistedKeys: persistedKeys, layoutOptions: layoutOptions, ...otherProps } = props;
-    let fallbackRef = (0, $knrtk$react.useRef)(undefined);
-    ref = ref || fallbackRef;
+function $e1fb6f3669e1c329$var$Virtualizer(props, forwardedRef) {
+    let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, scrollDirection: scrollDirection, isLoading: isLoading, onLoadMore: onLoadMore, persistedKeys: persistedKeys, layoutOptions: layoutOptions, ...otherProps } = props;
+    let ref = (0, $knrtk$reactariautils.useObjectRef)(forwardedRef);
     let state = (0, $knrtk$reactstatelyvirtualizer.useVirtualizerState)({
@@ -44,4 +41,6 @@ layout: layout,
         onVisibleRectChange (rect) {
-            ref.current.scrollLeft = rect.x;
-            ref.current.scrollTop = rect.y;
+            if (ref.current) {
+                ref.current.scrollLeft = rect.x;
+                ref.current.scrollTop = rect.y;
+            }
         },
@@ -48,0 +47,0 @@ persistedKeys: persistedKeys,

dist/Virtualizer.module.js

 import {ScrollView as $44a6ee657928b002$export$5665e3d6be6adea} from "./ScrollView.module.js";
 import {VirtualizerItem as $ccf8a0a04e4175ae$export$6796df8ba7398521} from "./VirtualizerItem.module.js";
 import {useVirtualizerState as $9WwqA$useVirtualizerState} from "@react-stately/virtualizer";
-import {useLoadMore as $9WwqA$useLoadMore, mergeProps as $9WwqA$mergeProps} from "@react-aria/utils";
-import $9WwqA$react, {useRef as $9WwqA$useRef, useCallback as $9WwqA$useCallback} from "react";
+import {useObjectRef as $9WwqA$useObjectRef, useLoadMore as $9WwqA$useLoadMore, mergeProps as $9WwqA$mergeProps} from "@react-aria/utils";
+import $9WwqA$react, {useCallback as $9WwqA$useCallback} from "react";
 
@@ -22,8 +22,5 @@ /*
 
-function $6d0a5c394373ae64$var$Virtualizer(props, ref) {
-    let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, scrollDirection: scrollDirection, isLoading: // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isLoading, onLoadMore: // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onLoadMore, persistedKeys: persistedKeys, layoutOptions: layoutOptions, ...otherProps } = props;
-    let fallbackRef = (0, $9WwqA$useRef)(undefined);
-    ref = ref || fallbackRef;
+function $6d0a5c394373ae64$var$Virtualizer(props, forwardedRef) {
+    let { children: renderView, renderWrapper: renderWrapper, layout: layout, collection: collection, scrollDirection: scrollDirection, isLoading: isLoading, onLoadMore: onLoadMore, persistedKeys: persistedKeys, layoutOptions: layoutOptions, ...otherProps } = props;
+    let ref = (0, $9WwqA$useObjectRef)(forwardedRef);
     let state = (0, $9WwqA$useVirtualizerState)({
@@ -34,4 +31,6 @@ layout: layout,
         onVisibleRectChange (rect) {
-            ref.current.scrollLeft = rect.x;
-            ref.current.scrollTop = rect.y;
+            if (ref.current) {
+                ref.current.scrollLeft = rect.x;
+                ref.current.scrollTop = rect.y;
+            }
         },
@@ -38,0 +37,0 @@ persistedKeys: persistedKeys,

dist/VirtualizerItem.main.js

@@ -32,3 +32,3 @@ var $7d70e069fceb2deb$exports = require("./useVirtualizerItem.main.js");
     let { direction: direction } = (0, $eXWCF$reactariai18n.useLocale)();
-    let ref = (0, $eXWCF$react.useRef)(undefined);
+    let ref = (0, $eXWCF$react.useRef)(null);
     (0, $7d70e069fceb2deb$exports.useVirtualizerItem)({
@@ -74,2 +74,3 @@ layoutInfo: layoutInfo,
     });
+    var _layoutInfo_transform;
     let style = {
@@ -82,3 +83,3 @@ position: layoutInfo.isSticky ? 'sticky' : 'absolute',
         zIndex: layoutInfo.zIndex,
-        transform: layoutInfo.transform,
+        transform: (_layoutInfo_transform = layoutInfo.transform) !== null && _layoutInfo_transform !== void 0 ? _layoutInfo_transform : undefined,
         contain: 'size layout style',
@@ -85,0 +86,0 @@ ...rectStyles

dist/VirtualizerItem.module.js

@@ -21,3 +21,3 @@ import {useVirtualizerItem as $47736c1e63ba1c6d$export$1da781778207e0a2} from "./useVirtualizerItem.module.js";
     let { direction: direction } = (0, $ivH3G$useLocale)();
-    let ref = (0, $ivH3G$useRef)(undefined);
+    let ref = (0, $ivH3G$useRef)(null);
     (0, $47736c1e63ba1c6d$export$1da781778207e0a2)({
@@ -63,2 +63,3 @@ layoutInfo: layoutInfo,
     });
+    var _layoutInfo_transform;
     let style = {
@@ -71,3 +72,3 @@ position: layoutInfo.isSticky ? 'sticky' : 'absolute',
         zIndex: layoutInfo.zIndex,
-        transform: layoutInfo.transform,
+        transform: (_layoutInfo_transform = layoutInfo.transform) !== null && _layoutInfo_transform !== void 0 ? _layoutInfo_transform : undefined,
         contain: 'size layout style',
@@ -74,0 +75,0 @@ ...rectStyles

package.json

 {
   "name": "@react-aria/virtualizer",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "Spectrum UI components in React",
@@ -25,12 +25,12 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/i18n": "^3.12.3",
-    "@react-aria/interactions": "^3.22.4",
-    "@react-aria/utils": "^3.25.3",
-    "@react-stately/virtualizer": "^4.1.0",
-    "@react-types/shared": "^3.25.0",
+    "@react-aria/i18n": "^3.12.4",
+    "@react-aria/interactions": "^3.22.5",
+    "@react-aria/utils": "^3.26.0",
+    "@react-stately/virtualizer": "^4.2.0",
+    "@react-types/shared": "^3.26.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
@@ -40,3 +40,3 @@ "publishConfig": {
   },
-  "gitHead": "8e0a28d188cdbdbd2b32296fa034b1b02ddde229"
+  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
 }

src/useVirtualizerItem.ts

@@ -23,3 +23,3 @@ /*
 export interface VirtualizerItemOptions {
-  layoutInfo: LayoutInfo,
+  layoutInfo: LayoutInfo | null,
   virtualizer: IVirtualizer,
@@ -31,9 +31,10 @@ ref: RefObject<HTMLElement | null>
   let {layoutInfo, virtualizer, ref} = options;
+  let key = layoutInfo?.key;
 
   let updateSize = useCallback(() => {
-    if (layoutInfo) {
+    if (key != null && ref.current) {
       let size = getSize(ref.current);
-      virtualizer.updateItemSize(layoutInfo.key, size);
+      virtualizer.updateItemSize(key, size);
     }
-  }, [virtualizer, layoutInfo?.key, ref]);
+  }, [virtualizer, key, ref]);
 
@@ -40,0 +41,0 @@ useLayoutEffect(() => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

206231

increased by1.33%

Worsened metrics

Lines of code

2352

decreased by-0.17%

Dependency changes

• Updated@react-aria/i18n@^3.12.4

• Updated@react-aria/interactions@^3.22.5

• Updated@react-aria/utils@^3.26.0

• Updated@react-stately/virtualizer@^4.2.0

• Updated@react-types/shared@^3.26.0