@react-spectrum/table 3.9.1-nightly.3940 → 3.9.1-nightly.3943

package/dist/import.mjs

@@ -1,7 +1,7 @@
 import "./main.css";
 import {Column as $gyhAV$Column, TableHeader as $e668f3d0f378a712$re_export$TableHeader, TableBody as $e668f3d0f378a712$re_export$TableBody, Section as $e668f3d0f378a712$re_export$Section, Row as $e668f3d0f378a712$re_export$Row, Cell as $e668f3d0f378a712$re_export$Cell, useTableState as $gyhAV$useTableState, TableColumnLayout as $gyhAV$TableColumnLayout} from "@react-stately/table";
 import $gyhAV$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
-import {mergeProps as $gyhAV$mergeProps, scrollIntoViewport as $gyhAV$scrollIntoViewport, scrollIntoView as $gyhAV$scrollIntoView, useLayoutEffect as $gyhAV$useLayoutEffect, chain as $gyhAV$chain, isWebKit as $gyhAV$isWebKit} from "@react-aria/utils";
+import {mergeProps as $gyhAV$mergeProps, scrollIntoView as $gyhAV$scrollIntoView, scrollIntoViewport as $gyhAV$scrollIntoViewport, chain as $gyhAV$chain, isWebKit as $gyhAV$isWebKit} from "@react-aria/utils";
 import {Checkbox as $gyhAV$Checkbox} from "@react-spectrum/checkbox";
 import $gyhAV$spectrumiconsuiChevronDownMedium from "@spectrum-icons/ui/ChevronDownMedium";
 import {useStyleProps as $gyhAV$useStyleProps, useDOMRef as $gyhAV$useDOMRef, classNames as $gyhAV$classNames, useFocusableRef as $gyhAV$useFocusableRef, useIsMobileDevice as $gyhAV$useIsMobileDevice, useUnwrapDOMRef as $gyhAV$useUnwrapDOMRef} from "@react-spectrum/utils";
@@ -672,7 +672,6 @@ function $cb7d341e8868d81d$export$d9658cdf8c86807() {
 
 
 
-
 /* eslint-disable jsx-a11y/role-supports-aria-props */ 
 var $2fc56f9fdd93be52$exports = {};
 $2fc56f9fdd93be52$exports = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"-1 0 31 32\">\n  <filter id=\"shadow\">\n    <feDropShadow dx=\"0\" dy=\"0.5\" stdDeviation=\"1.2\" flood-opacity=\"0.7\"></feDropShadow>\n  </filter>\n  <g filter=\"url('#shadow')\" transform=\"translate(.5 0)\">\n    <path d=\"M9.5,2c.27614,0,.5,.22388,.5,.5v6.5h3v-1.74951c0-.14893,.12215-.25049,.2513-.25049,.05457,0,.1104,.01819,.15875,.05847l2.58995,2.44153-2.58995,2.44153c-.04837,.04028-.10419,.05847-.15875,.05847-.12914,0-.2513-.10156-.2513-.25049v-1.74951h-3v6.5c0,.27612-.22386,.5-.5,.5h-1c-.27614,0-.5-.22388-.5-.5V2.5c0-.27612,.22386-.5,.5-.5h1Zm0-1h-1c-.82843,0-1.5,.67157-1.5,1.5v14c0,.82843,.67157,1.5,1.5,1.5h1c.82843,0,1.5-.67157,1.5-1.5v-5.5h1v.67757c0,.40416,.1632,.80501,.48197,1.05347,.49639,.3869,1.14001,.33571,1.56838-.02144l.02344-.01953,.0222-.02087,2.97589-2.80537c.20937-.19737,.20937-.53028,0-.72765l-2.97589-2.80537-.0222-.02087-.02345-.01965c-.22456-.18713-.5083-.29028-.79895-.29028-.3208,0-.62624,.12134-.86003,.34167-.24872,.23438-.39136,.56567-.39136,.90881v.74951h-1V2.5c0-.82843-.67157-1.5-1.5-1.5Z\" fill=\"#fff\"></path>\n    <path d=\"M10,16.5v-6.5h3v1.74952c0,.21196,.24721,.32775,.41005,.19206l2.58995-2.44158-2.58995-2.44158c-.16283-.13569-.41005-.0199-.41005,.19206v1.74952h-3V2.5c0-.27614-.22386-.5-.5-.5h-1c-.27614,0-.5,.22386-.5,.5v14c0,.27614,.22386,.5,.5,.5h1c.27614,0,.5-.22386,.5-.5Z\"></path>\n  </g>\n</svg>\n";
@@ -955,6 +954,7 @@ function $fc695d2eafc2b351$var$CursorOverlay(props) {
 const $fc695d2eafc2b351$export$48a76196cafe3b93 = /*#__PURE__*/ (0, $gyhAV$react).forwardRef($fc695d2eafc2b351$var$Resizer);
 
 
+
 /*
  * Copyright 2023 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -1251,13 +1251,14 @@ function $d14697b14e638114$var$TableView(props, ref) {
         }
         return /*#__PURE__*/ (0, $gyhAV$react).createElement((0, $gyhAV$VirtualizerItem), {
             key: reusableView.key,
-            reusableView: reusableView,
-            parent: parent,
+            layoutInfo: reusableView.layoutInfo,
+            virtualizer: reusableView.virtualizer,
+            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo,
             className: (0, $gyhAV$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports))), "spectrum-Table-cellWrapper", (0, $gyhAV$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($325bc3d43b25708b$exports))), {
                 "react-spectrum-Table-cellWrapper": !reusableView.layoutInfo.estimatedSize,
                 "react-spectrum-Table-cellWrapper--dropTarget": isDropTarget || isRootDroptarget
             }))
-        });
+        }, reusableView.rendered);
     };
     let renderView = (type, item)=>{
         switch(type){
@@ -1422,8 +1423,9 @@ function $d14697b14e638114$var$TableView(props, ref) {
     }));
 }
 // This is a custom Virtualizer that also has a header that syncs its scroll position with the body.
-function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: collection , focusedKey: focusedKey , renderView: renderView , renderWrapper: renderWrapper , domRef: domRef , bodyRef: bodyRef , headerRef: headerRef , onVisibleRectChange: onVisibleRectChangeProp , isFocusVisible: isFocusVisible , isVirtualDragging: isVirtualDragging , isRootDropTarget: isRootDropTarget , ...otherProps }) {
+function $d14697b14e638114$var$TableVirtualizer(props) {
     var _layout_getLayoutInfo;
+    let { layout: layout , collection: collection , focusedKey: focusedKey , renderView: renderView , renderWrapper: renderWrapper , domRef: domRef , bodyRef: bodyRef , headerRef: headerRef , onVisibleRectChange: onVisibleRectChangeProp , isFocusVisible: isFocusVisible , isVirtualDragging: isVirtualDragging , isRootDropTarget: isRootDropTarget , ...otherProps } = props;
     let { direction: direction  } = (0, $gyhAV$useLocale)();
     let loadingState = collection.body.props.loadingState;
     let isLoading = loadingState === "loading" || loadingState === "loadingMore";
@@ -1447,7 +1449,6 @@ function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: c
         let item = collection.getItem(key);
         let column = collection.columns[0];
         let virtualizer = state.virtualizer;
-        let modality = (0, $gyhAV$getInteractionModality)();
         virtualizer.scrollToItem(key, {
             duration: 0,
             // Prevent scrolling to the top when clicking on column headers.
@@ -1459,22 +1460,27 @@ function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: c
         // Sync the scroll positions of the column headers and the body so scrollIntoViewport can
         // properly decide if the column is outside the viewport or not
         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
-        if (modality === "keyboard") (0, $gyhAV$scrollIntoViewport)(document.activeElement, {
-            containingElement: domRef.current
-        });
     }, [
         collection,
-        domRef,
         bodyRef,
         headerRef,
         layout,
         state.virtualizer
     ]);
-    let { virtualizerProps: virtualizerProps  } = (0, $gyhAV$useVirtualizer)({
-        tabIndex: otherProps.tabIndex,
-        focusedKey: focusedKey,
-        scrollToItem: scrollToItem
-    }, state, domRef);
+    let memoedVirtualizerProps = (0, $gyhAV$useMemo)(()=>({
+            tabIndex: otherProps.tabIndex,
+            focusedKey: focusedKey,
+            scrollToItem: scrollToItem,
+            isLoading: isLoading,
+            onLoadMore: onLoadMore
+        }), [
+        otherProps.tabIndex,
+        focusedKey,
+        scrollToItem,
+        isLoading,
+        onLoadMore
+    ]);
+    let { virtualizerProps: virtualizerProps , scrollViewProps: { onVisibleRectChange: onVisibleRectChange  }  } = (0, $gyhAV$useVirtualizer)(memoedVirtualizerProps, state, domRef);
     // this effect runs whenever the contentSize changes, it doesn't matter what the content size is
     // only that it changes in a resize, and when that happens, we want to sync the body to the
     // header scroll position
@@ -1501,30 +1507,6 @@ function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: c
         bodyRef,
         headerRef
     ]);
-    let onVisibleRectChange = (0, $gyhAV$useCallback)((rect)=>{
-        state.setVisibleRect(rect);
-        if (!isLoading && onLoadMore) {
-            let scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
-            if (rect.y > scrollOffset) onLoadMore();
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        onLoadMore,
-        isLoading,
-        state.setVisibleRect,
-        state.virtualizer
-    ]);
-    (0, $gyhAV$useLayoutEffect)(()=>{
-        if (!isLoading && onLoadMore && !state.isAnimating) {
-            if (state.contentSize.height <= state.virtualizer.visibleRect.height) onLoadMore();
-        }
-    }, [
-        state.contentSize,
-        state.virtualizer,
-        state.isAnimating,
-        onLoadMore,
-        isLoading
-    ]);
     let resizerPosition = layout.getResizerPosition() - 2;
     let resizerAtEdge = resizerPosition > Math.max(state.virtualizer.contentSize.width, state.virtualizer.visibleRect.width) - 3;
     // this should be fine, every movement of the resizer causes a rerender

package/dist/main.js

@@ -680,7 +680,6 @@ function $18b3deb5c431fa13$export$d9658cdf8c86807() {
 
 
 
-
 /* eslint-disable jsx-a11y/role-supports-aria-props */ 
 var $1ed2399e74febaae$exports = {};
 $1ed2399e74febaae$exports = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"-1 0 31 32\">\n  <filter id=\"shadow\">\n    <feDropShadow dx=\"0\" dy=\"0.5\" stdDeviation=\"1.2\" flood-opacity=\"0.7\"></feDropShadow>\n  </filter>\n  <g filter=\"url('#shadow')\" transform=\"translate(.5 0)\">\n    <path d=\"M9.5,2c.27614,0,.5,.22388,.5,.5v6.5h3v-1.74951c0-.14893,.12215-.25049,.2513-.25049,.05457,0,.1104,.01819,.15875,.05847l2.58995,2.44153-2.58995,2.44153c-.04837,.04028-.10419,.05847-.15875,.05847-.12914,0-.2513-.10156-.2513-.25049v-1.74951h-3v6.5c0,.27612-.22386,.5-.5,.5h-1c-.27614,0-.5-.22388-.5-.5V2.5c0-.27612,.22386-.5,.5-.5h1Zm0-1h-1c-.82843,0-1.5,.67157-1.5,1.5v14c0,.82843,.67157,1.5,1.5,1.5h1c.82843,0,1.5-.67157,1.5-1.5v-5.5h1v.67757c0,.40416,.1632,.80501,.48197,1.05347,.49639,.3869,1.14001,.33571,1.56838-.02144l.02344-.01953,.0222-.02087,2.97589-2.80537c.20937-.19737,.20937-.53028,0-.72765l-2.97589-2.80537-.0222-.02087-.02345-.01965c-.22456-.18713-.5083-.29028-.79895-.29028-.3208,0-.62624,.12134-.86003,.34167-.24872,.23438-.39136,.56567-.39136,.90881v.74951h-1V2.5c0-.82843-.67157-1.5-1.5-1.5Z\" fill=\"#fff\"></path>\n    <path d=\"M10,16.5v-6.5h3v1.74952c0,.21196,.24721,.32775,.41005,.19206l2.58995-2.44158-2.58995-2.44158c-.16283-.13569-.41005-.0199-.41005,.19206v1.74952h-3V2.5c0-.27614-.22386-.5-.5-.5h-1c-.27614,0-.5,.22386-.5,.5v14c0,.27614,.22386,.5,.5,.5h1c.27614,0,.5-.22386,.5-.5Z\"></path>\n  </g>\n</svg>\n";
@@ -963,6 +962,7 @@ function $2877766f94c67a67$var$CursorOverlay(props) {
 const $2877766f94c67a67$export$48a76196cafe3b93 = /*#__PURE__*/ (0, ($parcel$interopDefault($3fpzo$react))).forwardRef($2877766f94c67a67$var$Resizer);
 
 
+
 /*
  * Copyright 2023 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -1259,13 +1259,14 @@ function $be8a9c035a82f788$var$TableView(props, ref) {
         }
         return /*#__PURE__*/ (0, ($parcel$interopDefault($3fpzo$react))).createElement((0, $3fpzo$reactariavirtualizer.VirtualizerItem), {
             key: reusableView.key,
-            reusableView: reusableView,
-            parent: parent,
+            layoutInfo: reusableView.layoutInfo,
+            virtualizer: reusableView.virtualizer,
+            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo,
             className: (0, $3fpzo$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($982885d0a34882ea$exports))), "spectrum-Table-cellWrapper", (0, $3fpzo$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($4afcd54cfd94dbb9$exports))), {
                 "react-spectrum-Table-cellWrapper": !reusableView.layoutInfo.estimatedSize,
                 "react-spectrum-Table-cellWrapper--dropTarget": isDropTarget || isRootDroptarget
             }))
-        });
+        }, reusableView.rendered);
     };
     let renderView = (type, item)=>{
         switch(type){
@@ -1430,8 +1431,9 @@ function $be8a9c035a82f788$var$TableView(props, ref) {
     }));
 }
 // This is a custom Virtualizer that also has a header that syncs its scroll position with the body.
-function $be8a9c035a82f788$var$TableVirtualizer({ layout: layout , collection: collection , focusedKey: focusedKey , renderView: renderView , renderWrapper: renderWrapper , domRef: domRef , bodyRef: bodyRef , headerRef: headerRef , onVisibleRectChange: onVisibleRectChangeProp , isFocusVisible: isFocusVisible , isVirtualDragging: isVirtualDragging , isRootDropTarget: isRootDropTarget , ...otherProps }) {
+function $be8a9c035a82f788$var$TableVirtualizer(props) {
     var _layout_getLayoutInfo;
+    let { layout: layout , collection: collection , focusedKey: focusedKey , renderView: renderView , renderWrapper: renderWrapper , domRef: domRef , bodyRef: bodyRef , headerRef: headerRef , onVisibleRectChange: onVisibleRectChangeProp , isFocusVisible: isFocusVisible , isVirtualDragging: isVirtualDragging , isRootDropTarget: isRootDropTarget , ...otherProps } = props;
     let { direction: direction  } = (0, $3fpzo$reactariai18n.useLocale)();
     let loadingState = collection.body.props.loadingState;
     let isLoading = loadingState === "loading" || loadingState === "loadingMore";
@@ -1455,7 +1457,6 @@ function $be8a9c035a82f788$var$TableVirtualizer({ layout: layout , collection: c
         let item = collection.getItem(key);
         let column = collection.columns[0];
         let virtualizer = state.virtualizer;
-        let modality = (0, $3fpzo$reactariainteractions.getInteractionModality)();
         virtualizer.scrollToItem(key, {
             duration: 0,
             // Prevent scrolling to the top when clicking on column headers.
@@ -1467,22 +1468,27 @@ function $be8a9c035a82f788$var$TableVirtualizer({ layout: layout , collection: c
         // Sync the scroll positions of the column headers and the body so scrollIntoViewport can
         // properly decide if the column is outside the viewport or not
         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
-        if (modality === "keyboard") (0, $3fpzo$reactariautils.scrollIntoViewport)(document.activeElement, {
-            containingElement: domRef.current
-        });
     }, [
         collection,
-        domRef,
         bodyRef,
         headerRef,
         layout,
         state.virtualizer
     ]);
-    let { virtualizerProps: virtualizerProps  } = (0, $3fpzo$reactariavirtualizer.useVirtualizer)({
-        tabIndex: otherProps.tabIndex,
-        focusedKey: focusedKey,
-        scrollToItem: scrollToItem
-    }, state, domRef);
+    let memoedVirtualizerProps = (0, $3fpzo$react.useMemo)(()=>({
+            tabIndex: otherProps.tabIndex,
+            focusedKey: focusedKey,
+            scrollToItem: scrollToItem,
+            isLoading: isLoading,
+            onLoadMore: onLoadMore
+        }), [
+        otherProps.tabIndex,
+        focusedKey,
+        scrollToItem,
+        isLoading,
+        onLoadMore
+    ]);
+    let { virtualizerProps: virtualizerProps , scrollViewProps: { onVisibleRectChange: onVisibleRectChange  }  } = (0, $3fpzo$reactariavirtualizer.useVirtualizer)(memoedVirtualizerProps, state, domRef);
     // this effect runs whenever the contentSize changes, it doesn't matter what the content size is
     // only that it changes in a resize, and when that happens, we want to sync the body to the
     // header scroll position
@@ -1509,30 +1515,6 @@ function $be8a9c035a82f788$var$TableVirtualizer({ layout: layout , collection: c
         bodyRef,
         headerRef
     ]);
-    let onVisibleRectChange = (0, $3fpzo$react.useCallback)((rect)=>{
-        state.setVisibleRect(rect);
-        if (!isLoading && onLoadMore) {
-            let scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
-            if (rect.y > scrollOffset) onLoadMore();
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        onLoadMore,
-        isLoading,
-        state.setVisibleRect,
-        state.virtualizer
-    ]);
-    (0, $3fpzo$reactariautils.useLayoutEffect)(()=>{
-        if (!isLoading && onLoadMore && !state.isAnimating) {
-            if (state.contentSize.height <= state.virtualizer.visibleRect.height) onLoadMore();
-        }
-    }, [
-        state.contentSize,
-        state.virtualizer,
-        state.isAnimating,
-        onLoadMore,
-        isLoading
-    ]);
     let resizerPosition = layout.getResizerPosition() - 2;
     let resizerAtEdge = resizerPosition > Math.max(state.virtualizer.contentSize.width, state.virtualizer.visibleRect.width) - 3;
     // this should be fine, every movement of the resizer causes a rerender