@react-aria/virtualizer 4.0.3 → 4.1.0

package/dist/useVirtualizerItem.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAiBM,SAAS,0CAAmB,OAA+B;IAChE,IAAI,cAAC,UAAU,eAAE,WAAW,OAAE,GAAG,EAAC,GAAG;IAErC,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE;QAC3B,IAAI,YAAY;YACd,IAAI,OAAO,8BAAQ,IAAI,OAAO;YAC9B,YAAY,cAAc,CAAC,WAAW,GAAG,EAAE;QAC7C;IACF,GAAG;QAAC;QAAa,uBAAA,iCAAA,WAAY,GAAG;QAAE;KAAI;IAEtC,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,uBAAA,iCAAA,WAAY,aAAa,EAC3B;IAEJ;IAEA,OAAO;oBAAC;IAAU;AACpB;AAEA,SAAS,8BAAQ,IAAiB;IAChC,6DAA6D;IAC7D,IAAI,SAAS,KAAK,KAAK,CAAC,MAAM;IAC9B,KAAK,KAAK,CAAC,MAAM,GAAG;IACpB,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY;IACvD,KAAK,KAAK,CAAC,MAAM,GAAG;IACpB,OAAO;AACT","sources":["packages/@react-aria/virtualizer/src/useVirtualizerItem.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Key, RefObject} from '@react-types/shared';\nimport {LayoutInfo, Size} from '@react-stately/virtualizer';\nimport {useCallback} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface IVirtualizer {\n  updateItemSize(key: Key, size: Size): void\n}\n\nexport interface VirtualizerItemOptions {\n  layoutInfo: LayoutInfo,\n  virtualizer: IVirtualizer,\n  ref: RefObject<HTMLElement | null>\n}\n\nexport function useVirtualizerItem(options: VirtualizerItemOptions) {\n  let {layoutInfo, virtualizer, ref} = options;\n\n  let updateSize = useCallback(() => {\n    if (layoutInfo) {\n      let size = getSize(ref.current);\n      virtualizer.updateItemSize(layoutInfo.key, size);\n    }\n  }, [virtualizer, layoutInfo?.key, ref]);\n\n  useLayoutEffect(() => {\n    if (layoutInfo?.estimatedSize) {\n      updateSize();\n    }\n  });\n\n  return {updateSize};\n}\n\nfunction getSize(node: HTMLElement) {\n  // Reset height before measuring so we get the intrinsic size\n  let height = node.style.height;\n  node.style.height = '';\n  let size = new Size(node.scrollWidth, node.scrollHeight);\n  node.style.height = height;\n  return size;\n}\n"],"names":[],"version":3,"file":"useVirtualizerItem.main.js.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAiBM,SAAS,0CAAmB,OAA+B;IAChE,IAAI,cAAC,UAAU,eAAE,WAAW,OAAE,GAAG,EAAC,GAAG;IACrC,IAAI,MAAM,uBAAA,iCAAA,WAAY,GAAG;IAEzB,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE;QAC3B,IAAI,OAAO,QAAQ,IAAI,OAAO,EAAE;YAC9B,IAAI,OAAO,8BAAQ,IAAI,OAAO;YAC9B,YAAY,cAAc,CAAC,KAAK;QAClC;IACF,GAAG;QAAC;QAAa;QAAK;KAAI;IAE1B,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,uBAAA,iCAAA,WAAY,aAAa,EAC3B;IAEJ;IAEA,OAAO;oBAAC;IAAU;AACpB;AAEA,SAAS,8BAAQ,IAAiB;IAChC,6DAA6D;IAC7D,IAAI,SAAS,KAAK,KAAK,CAAC,MAAM;IAC9B,KAAK,KAAK,CAAC,MAAM,GAAG;IACpB,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY;IACvD,KAAK,KAAK,CAAC,MAAM,GAAG;IACpB,OAAO;AACT","sources":["packages/@react-aria/virtualizer/src/useVirtualizerItem.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Key, RefObject} from '@react-types/shared';\nimport {LayoutInfo, Size} from '@react-stately/virtualizer';\nimport {useCallback} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface IVirtualizer {\n  updateItemSize(key: Key, size: Size): void\n}\n\nexport interface VirtualizerItemOptions {\n  layoutInfo: LayoutInfo | null,\n  virtualizer: IVirtualizer,\n  ref: RefObject<HTMLElement | null>\n}\n\nexport function useVirtualizerItem(options: VirtualizerItemOptions) {\n  let {layoutInfo, virtualizer, ref} = options;\n  let key = layoutInfo?.key;\n\n  let updateSize = useCallback(() => {\n    if (key != null && ref.current) {\n      let size = getSize(ref.current);\n      virtualizer.updateItemSize(key, size);\n    }\n  }, [virtualizer, key, ref]);\n\n  useLayoutEffect(() => {\n    if (layoutInfo?.estimatedSize) {\n      updateSize();\n    }\n  });\n\n  return {updateSize};\n}\n\nfunction getSize(node: HTMLElement) {\n  // Reset height before measuring so we get the intrinsic size\n  let height = node.style.height;\n  node.style.height = '';\n  let size = new Size(node.scrollWidth, node.scrollHeight);\n  node.style.height = height;\n  return size;\n}\n"],"names":[],"version":3,"file":"useVirtualizerItem.main.js.map"}

package/dist/useVirtualizerItem.mjs

@@ -17,14 +17,15 @@ import {useLayoutEffect as $uBoVA$useLayoutEffect} from "@react-aria/utils";
 
 function $47736c1e63ba1c6d$export$1da781778207e0a2(options) {
     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
     ]);
     (0, $uBoVA$useLayoutEffect)(()=>{

package/dist/useVirtualizerItem.module.js

@@ -17,14 +17,15 @@ import {useLayoutEffect as $uBoVA$useLayoutEffect} from "@react-aria/utils";
 
 function $47736c1e63ba1c6d$export$1da781778207e0a2(options) {
     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
     ]);
     (0, $uBoVA$useLayoutEffect)(()=>{

package/dist/useVirtualizerItem.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAiBM,SAAS,0CAAmB,OAA+B;IAChE,IAAI,cAAC,UAAU,eAAE,WAAW,OAAE,GAAG,EAAC,GAAG;IAErC,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE;QAC3B,IAAI,YAAY;YACd,IAAI,OAAO,8BAAQ,IAAI,OAAO;YAC9B,YAAY,cAAc,CAAC,WAAW,GAAG,EAAE;QAC7C;IACF,GAAG;QAAC;QAAa,uBAAA,iCAAA,WAAY,GAAG;QAAE;KAAI;IAEtC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,uBAAA,iCAAA,WAAY,aAAa,EAC3B;IAEJ;IAEA,OAAO;oBAAC;IAAU;AACpB;AAEA,SAAS,8BAAQ,IAAiB;IAChC,6DAA6D;IAC7D,IAAI,SAAS,KAAK,KAAK,CAAC,MAAM;IAC9B,KAAK,KAAK,CAAC,MAAM,GAAG;IACpB,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY;IACvD,KAAK,KAAK,CAAC,MAAM,GAAG;IACpB,OAAO;AACT","sources":["packages/@react-aria/virtualizer/src/useVirtualizerItem.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Key, RefObject} from '@react-types/shared';\nimport {LayoutInfo, Size} from '@react-stately/virtualizer';\nimport {useCallback} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface IVirtualizer {\n  updateItemSize(key: Key, size: Size): void\n}\n\nexport interface VirtualizerItemOptions {\n  layoutInfo: LayoutInfo,\n  virtualizer: IVirtualizer,\n  ref: RefObject<HTMLElement | null>\n}\n\nexport function useVirtualizerItem(options: VirtualizerItemOptions) {\n  let {layoutInfo, virtualizer, ref} = options;\n\n  let updateSize = useCallback(() => {\n    if (layoutInfo) {\n      let size = getSize(ref.current);\n      virtualizer.updateItemSize(layoutInfo.key, size);\n    }\n  }, [virtualizer, layoutInfo?.key, ref]);\n\n  useLayoutEffect(() => {\n    if (layoutInfo?.estimatedSize) {\n      updateSize();\n    }\n  });\n\n  return {updateSize};\n}\n\nfunction getSize(node: HTMLElement) {\n  // Reset height before measuring so we get the intrinsic size\n  let height = node.style.height;\n  node.style.height = '';\n  let size = new Size(node.scrollWidth, node.scrollHeight);\n  node.style.height = height;\n  return size;\n}\n"],"names":[],"version":3,"file":"useVirtualizerItem.module.js.map"}
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAiBM,SAAS,0CAAmB,OAA+B;IAChE,IAAI,cAAC,UAAU,eAAE,WAAW,OAAE,GAAG,EAAC,GAAG;IACrC,IAAI,MAAM,uBAAA,iCAAA,WAAY,GAAG;IAEzB,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE;QAC3B,IAAI,OAAO,QAAQ,IAAI,OAAO,EAAE;YAC9B,IAAI,OAAO,8BAAQ,IAAI,OAAO;YAC9B,YAAY,cAAc,CAAC,KAAK;QAClC;IACF,GAAG;QAAC;QAAa;QAAK;KAAI;IAE1B,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,uBAAA,iCAAA,WAAY,aAAa,EAC3B;IAEJ;IAEA,OAAO;oBAAC;IAAU;AACpB;AAEA,SAAS,8BAAQ,IAAiB;IAChC,6DAA6D;IAC7D,IAAI,SAAS,KAAK,KAAK,CAAC,MAAM;IAC9B,KAAK,KAAK,CAAC,MAAM,GAAG;IACpB,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY;IACvD,KAAK,KAAK,CAAC,MAAM,GAAG;IACpB,OAAO;AACT","sources":["packages/@react-aria/virtualizer/src/useVirtualizerItem.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Key, RefObject} from '@react-types/shared';\nimport {LayoutInfo, Size} from '@react-stately/virtualizer';\nimport {useCallback} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface IVirtualizer {\n  updateItemSize(key: Key, size: Size): void\n}\n\nexport interface VirtualizerItemOptions {\n  layoutInfo: LayoutInfo | null,\n  virtualizer: IVirtualizer,\n  ref: RefObject<HTMLElement | null>\n}\n\nexport function useVirtualizerItem(options: VirtualizerItemOptions) {\n  let {layoutInfo, virtualizer, ref} = options;\n  let key = layoutInfo?.key;\n\n  let updateSize = useCallback(() => {\n    if (key != null && ref.current) {\n      let size = getSize(ref.current);\n      virtualizer.updateItemSize(key, size);\n    }\n  }, [virtualizer, key, ref]);\n\n  useLayoutEffect(() => {\n    if (layoutInfo?.estimatedSize) {\n      updateSize();\n    }\n  });\n\n  return {updateSize};\n}\n\nfunction getSize(node: HTMLElement) {\n  // Reset height before measuring so we get the intrinsic size\n  let height = node.style.height;\n  node.style.height = '';\n  let size = new Size(node.scrollWidth, node.scrollHeight);\n  node.style.height = height;\n  return size;\n}\n"],"names":[],"version":3,"file":"useVirtualizerItem.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/virtualizer",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,18 +22,19 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/i18n": "^3.12.3",
-    "@react-aria/interactions": "^3.22.3",
-    "@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"
   },
   "publishConfig": {
     "access": "public"
-  }
-}
+  },
+  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+}

package/src/ScrollView.tsx

@@ -44,7 +44,7 @@ function ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | n
 
   return (
     <div role="presentation" {...scrollViewProps} ref={ref}>
-      <div role="presentation" {...contentProps}>
+      <div {...contentProps}>
         {props.children}
       </div>
     </div>
@@ -69,7 +69,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
     scrollTop: 0,
     scrollLeft: 0,
     scrollEndTime: 0,
-    scrollTimeout: null,
+    scrollTimeout: null as ReturnType<typeof setTimeout> | null,
     width: 0,
     height: 0,
     isScrolling: false
@@ -114,7 +114,10 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
       if (state.scrollEndTime <= now + 50) {
         state.scrollEndTime = now + 300;
 
-        clearTimeout(state.scrollTimeout);
+        if (state.scrollTimeout != null) {
+          clearTimeout(state.scrollTimeout);
+        }
+
         state.scrollTimeout = setTimeout(() => {
           state.isScrolling = false;
           setScrolling(false);
@@ -132,10 +135,13 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
   // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.
   useEvent(ref, 'scroll', onScroll);
 
-  // eslint-disable-next-line arrow-body-style
+   
   useEffect(() => {
     return () => {
-      clearTimeout(state.scrollTimeout);
+      if (state.scrollTimeout != null) {
+        clearTimeout(state.scrollTimeout);
+      }
+
       if (state.isScrolling) {
         window.dispatchEvent(new Event('tk.connect-observer'));
       }
@@ -146,7 +152,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
   let isUpdatingSize = useRef(false);
   let updateSize = useEffectEvent((flush: typeof flushSync) => {
     let dom = ref.current;
-    if (!dom && !isUpdatingSize.current) {
+    if (!dom || isUpdatingSize.current) {
       return;
     }
 

package/src/Virtualizer.tsx

@@ -12,8 +12,8 @@
 
 import {Collection, Key, RefObject} from '@react-types/shared';
 import {Layout, Rect, ReusableView, useVirtualizerState} from '@react-stately/virtualizer';
-import {mergeProps, useLoadMore} from '@react-aria/utils';
-import React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useRef} from 'react';
+import {mergeProps, useLoadMore, useObjectRef} from '@react-aria/utils';
+import React, {ForwardedRef, HTMLAttributes, ReactElement, ReactNode, useCallback} from 'react';
 import {ScrollView} from './ScrollView';
 import {VirtualizerItem} from './VirtualizerItem';
 
@@ -22,7 +22,7 @@ type RenderWrapper<T extends object, V> = (
   reusableView: ReusableView<T, V>,
   children: ReusableView<T, V>[],
   renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]
-) => ReactElement;
+) => ReactElement | null;
 
 interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
   children: (type: string, content: T) => V,
@@ -36,32 +36,31 @@ interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<H
   layoutOptions?: O
 }
 
-function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, ref: RefObject<HTMLDivElement | null>) {
+function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, forwardedRef: ForwardedRef<HTMLDivElement | null>) {
   let {
     children: renderView,
     renderWrapper,
     layout,
     collection,
     scrollDirection,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     isLoading,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onLoadMore,
     persistedKeys,
     layoutOptions,
     ...otherProps
   } = props;
 
-  let fallbackRef = useRef<HTMLDivElement>(undefined);
-  ref = ref || fallbackRef;
+  let ref = useObjectRef(forwardedRef);
 
   let state = useVirtualizerState({
     layout,
     collection,
     renderView,
     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;
+      }
     },
     persistedKeys,
     layoutOptions
@@ -108,7 +107,7 @@ function defaultRenderWrapper<T extends object, V extends ReactNode>(
   return (
     <VirtualizerItem
       key={reusableView.key}
-      layoutInfo={reusableView.layoutInfo}
+      layoutInfo={reusableView.layoutInfo!}
       virtualizer={reusableView.virtualizer}
       parent={parent?.layoutInfo}>
       {reusableView.rendered}

package/src/VirtualizerItem.tsx

@@ -17,6 +17,7 @@ import {useLocale} from '@react-aria/i18n';
 import {useVirtualizerItem, VirtualizerItemOptions} from './useVirtualizerItem';
 
 interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
+  layoutInfo: LayoutInfo,
   parent?: LayoutInfo | null,
   style?: CSSProperties,
   className?: string,
@@ -26,7 +27,7 @@ interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
 export function VirtualizerItem(props: VirtualizerItemProps) {
   let {style, className, layoutInfo, virtualizer, parent, children} = props;
   let {direction} = useLocale();
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   useVirtualizerItem({
     layoutInfo,
     virtualizer,
@@ -57,7 +58,7 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     }
   }
 
-  let rectStyles = {
+  let rectStyles: Record<string, number | undefined> = {
     // TODO: For layoutInfos that are sticky that have parents with overflow visible, their "top" will be relative to the to the nearest scrolling container
     // which WON'T be the parent since the parent has overflow visible. This means we shouldn't offset the height by the parent's position
     // Not 100% about this change here since it is quite ambigious what the scrolling container maybe and how its top is positioned with respect to the
@@ -82,7 +83,7 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     overflow: layoutInfo.allowOverflow ? 'visible' : 'hidden',
     opacity: layoutInfo.opacity,
     zIndex: layoutInfo.zIndex,
-    transform: layoutInfo.transform,
+    transform: layoutInfo.transform ?? undefined,
     contain: 'size layout style',
     ...rectStyles
   };

package/src/useVirtualizerItem.ts

@@ -20,20 +20,21 @@ interface IVirtualizer {
 }
 
 export interface VirtualizerItemOptions {
-  layoutInfo: LayoutInfo,
+  layoutInfo: LayoutInfo | null,
   virtualizer: IVirtualizer,
   ref: RefObject<HTMLElement | null>
 }
 
 export function useVirtualizerItem(options: VirtualizerItemOptions) {
   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]);
 
   useLayoutEffect(() => {
     if (layoutInfo?.estimatedSize) {