@react-aria/virtualizer - npm Package Compare versions

Comparing version 3.0.0-nightly-db51509aa-240910 to 3.0.0-nightly-db60babaf-241012

dist/ScrollView.main.js

@@ -114,5 +114,9 @@ var $efdd61e59e023a1d$exports = require("./utils.main.js");
     }, []);
+    let isUpdatingSize = (0, $kvIfm$react.useRef)(false);
     let updateSize = (0, $kvIfm$reactariautils.useEffectEvent)((flush)=>{
         let dom = ref.current;
-        if (!dom) return;
+        if (!dom && !isUpdatingSize.current) return;
+        // Prevent reentrancy when resize observer fires, triggers re-layout that results in
+        // content size update, causing below layout effect to fire. This avoids infinite loops.
+        isUpdatingSize.current = true;
         let isTestEnv = false;
@@ -144,26 +148,20 @@ let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');
         }
+        isUpdatingSize.current = false;
     });
-    let didUpdateSize = (0, $kvIfm$react.useRef)(false);
+    // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
+    let lastContentSize = (0, $kvIfm$react.useRef)(null);
     (0, $kvIfm$reactariautils.useLayoutEffect)(()=>{
-        // React doesn't allow flushSync inside effects, so queue a microtask.
-        // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
-        queueMicrotask(()=>{
-            if (!didUpdateSize.current) {
-                didUpdateSize.current = true;
-                updateSize((0, $kvIfm$reactdom.flushSync));
-            }
-        });
-    }, [
-        updateSize
-    ]);
-    (0, $kvIfm$react.useEffect)(()=>{
-        if (!didUpdateSize.current) {
-            // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).
-            // Update the size here so that you don't need to mock timers in tests.
-            didUpdateSize.current = true;
-            updateSize((fn)=>fn());
+        if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
+            // React doesn't allow flushSync inside effects, so queue a microtask.
+            // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
+            // If we are in an `act` environment, update immediately without a microtask so you don't need
+            // to mock timers in tests. In this case, the update is synchronous already.
+            // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.
+            // https://github.com/reactwg/react-18/discussions/102
+            // @ts-ignore
+            if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') updateSize((fn)=>fn());
+            else queueMicrotask(()=>updateSize((0, $kvIfm$reactdom.flushSync)));
         }
-    }, [
-        updateSize
-    ]);
+        lastContentSize.current = contentSize;
+    });
     let onResize = (0, $kvIfm$react.useCallback)(()=>{
@@ -170,0 +168,0 @@ updateSize((0, $kvIfm$reactdom.flushSync));

dist/ScrollView.module.js

@@ -103,5 +103,9 @@ import {getScrollLeft as $ce415dc67314b753$export$1389d168952b34b5} from "./utils.module.js";
     }, []);
+    let isUpdatingSize = (0, $f9kpT$useRef)(false);
     let updateSize = (0, $f9kpT$useEffectEvent)((flush)=>{
         let dom = ref.current;
-        if (!dom) return;
+        if (!dom && !isUpdatingSize.current) return;
+        // Prevent reentrancy when resize observer fires, triggers re-layout that results in
+        // content size update, causing below layout effect to fire. This avoids infinite loops.
+        isUpdatingSize.current = true;
         let isTestEnv = false;
@@ -133,26 +137,20 @@ let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');
         }
+        isUpdatingSize.current = false;
     });
-    let didUpdateSize = (0, $f9kpT$useRef)(false);
+    // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
+    let lastContentSize = (0, $f9kpT$useRef)(null);
     (0, $f9kpT$useLayoutEffect)(()=>{
-        // React doesn't allow flushSync inside effects, so queue a microtask.
-        // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
-        queueMicrotask(()=>{
-            if (!didUpdateSize.current) {
-                didUpdateSize.current = true;
-                updateSize((0, $f9kpT$flushSync));
-            }
-        });
-    }, [
-        updateSize
-    ]);
-    (0, $f9kpT$useEffect)(()=>{
-        if (!didUpdateSize.current) {
-            // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).
-            // Update the size here so that you don't need to mock timers in tests.
-            didUpdateSize.current = true;
-            updateSize((fn)=>fn());
+        if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
+            // React doesn't allow flushSync inside effects, so queue a microtask.
+            // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
+            // If we are in an `act` environment, update immediately without a microtask so you don't need
+            // to mock timers in tests. In this case, the update is synchronous already.
+            // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.
+            // https://github.com/reactwg/react-18/discussions/102
+            // @ts-ignore
+            if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') updateSize((fn)=>fn());
+            else queueMicrotask(()=>updateSize((0, $f9kpT$flushSync)));
         }
-    }, [
-        updateSize
-    ]);
+        lastContentSize.current = contentSize;
+    });
     let onResize = (0, $f9kpT$useCallback)(()=>{
@@ -159,0 +157,0 @@ updateSize((0, $f9kpT$flushSync));

dist/types.d.ts

@@ -316,2 +316,3 @@ import { Direction, Key, RefObject, Collection } from "@react-types/shared";
     parent?: LayoutInfo | null;
+    style?: CSSProperties;
     className?: string;
@@ -318,0 +319,0 @@ children: ReactNode;

dist/VirtualizerItem.main.js

@@ -30,3 +30,3 @@ var $7d70e069fceb2deb$exports = require("./useVirtualizerItem.main.js");
 function $d6a26279cc31826b$export$6796df8ba7398521(props) {
-    let { className: className, layoutInfo: layoutInfo, virtualizer: virtualizer, parent: parent, children: children } = props;
+    let { style: style, className: className, layoutInfo: layoutInfo, virtualizer: virtualizer, parent: parent, children: children } = props;
     let { direction: direction } = (0, $eXWCF$reactariai18n.useLocale)();
@@ -43,3 +43,6 @@ let ref = (0, $eXWCF$react.useRef)(undefined);
         className: className,
-        style: $d6a26279cc31826b$export$1481e64fbe01b8b3(layoutInfo, direction, parent)
+        style: {
+            ...$d6a26279cc31826b$export$1481e64fbe01b8b3(layoutInfo, direction, parent),
+            ...style
+        }
     }, children);
@@ -59,4 +62,8 @@ }
     let rectStyles = {
-        top: layoutInfo.rect.y - (parent ? parent.rect.y : 0),
-        [xProperty]: layoutInfo.rect.x - (parent ? parent.rect.x : 0),
+        // 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
+        // calculated layoutInfo.y here
+        top: layoutInfo.rect.y - (parent && !(parent.allowOverflow && layoutInfo.isSticky) ? parent.rect.y : 0),
+        [xProperty]: layoutInfo.rect.x - (parent && !(parent.allowOverflow && layoutInfo.isSticky) ? parent.rect.x : 0),
         width: layoutInfo.rect.width,
@@ -63,0 +70,0 @@ height: layoutInfo.rect.height

dist/VirtualizerItem.module.js

@@ -19,3 +19,3 @@ import {useVirtualizerItem as $47736c1e63ba1c6d$export$1da781778207e0a2} from "./useVirtualizerItem.module.js";
 function $ccf8a0a04e4175ae$export$6796df8ba7398521(props) {
-    let { className: className, layoutInfo: layoutInfo, virtualizer: virtualizer, parent: parent, children: children } = props;
+    let { style: style, className: className, layoutInfo: layoutInfo, virtualizer: virtualizer, parent: parent, children: children } = props;
     let { direction: direction } = (0, $ivH3G$useLocale)();
@@ -32,3 +32,6 @@ let ref = (0, $ivH3G$useRef)(undefined);
         className: className,
-        style: $ccf8a0a04e4175ae$export$1481e64fbe01b8b3(layoutInfo, direction, parent)
+        style: {
+            ...$ccf8a0a04e4175ae$export$1481e64fbe01b8b3(layoutInfo, direction, parent),
+            ...style
+        }
     }, children);
@@ -48,4 +51,8 @@ }
     let rectStyles = {
-        top: layoutInfo.rect.y - (parent ? parent.rect.y : 0),
-        [xProperty]: layoutInfo.rect.x - (parent ? parent.rect.x : 0),
+        // 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
+        // calculated layoutInfo.y here
+        top: layoutInfo.rect.y - (parent && !(parent.allowOverflow && layoutInfo.isSticky) ? parent.rect.y : 0),
+        [xProperty]: layoutInfo.rect.x - (parent && !(parent.allowOverflow && layoutInfo.isSticky) ? parent.rect.x : 0),
         width: layoutInfo.rect.width,
@@ -52,0 +59,0 @@ height: layoutInfo.rect.height

package.json

 {
   "name": "@react-aria/virtualizer",
-  "version": "3.0.0-nightly-db51509aa-240910",
+  "version": "3.0.0-nightly-db60babaf-241012",
   "description": "Spectrum UI components in React",
@@ -25,7 +25,7 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/i18n": "^3.0.0-nightly-db51509aa-240910",
-    "@react-aria/interactions": "^3.0.0-nightly-db51509aa-240910",
-    "@react-aria/utils": "^3.0.0-nightly-db51509aa-240910",
-    "@react-stately/virtualizer": "^3.0.0-nightly-db51509aa-240910",
-    "@react-types/shared": "^3.0.0-nightly-db51509aa-240910",
+    "@react-aria/i18n": "^3.0.0-nightly-db60babaf-241012",
+    "@react-aria/interactions": "^3.0.0-nightly-db60babaf-241012",
+    "@react-aria/utils": "^3.0.0-nightly-db60babaf-241012",
+    "@react-stately/virtualizer": "^3.0.0-nightly-db60babaf-241012",
+    "@react-types/shared": "^3.0.0-nightly-db60babaf-241012",
     "@swc/helpers": "^0.5.0"
@@ -40,3 +40,3 @@ },
   },
-  "stableVersion": "4.0.2"
+  "stableVersion": "4.0.3"
 }

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

192312

increased by4.8%

Lines of code

2356

increased by1.12%

Dependency changes

• Updated@react-aria/i18n@^3.0.0-nightly-db60babaf-241012

• Updated@react-aria/interactions@^3.0.0-nightly-db60babaf-241012

• Updated@react-aria/utils@^3.0.0-nightly-db60babaf-241012

• Updated@react-stately/virtualizer@^3.0.0-nightly-db60babaf-241012

• Updated@react-types/shared@^3.0.0-nightly-db60babaf-241012