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

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;AKmIA,oCAAoC,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC,EAAE,sBAAsB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IAC3H;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,IAAI,OAAO,CAAC;IACrC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACvD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACrD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;CACxD;AAgxCD;;GAEG;AACH,OAAA,MAAM;UAAsF,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;ACx6CrI,OAAA,MAAM,8CAAiE,WAAW,CAAC;AAGnF,OAAO,EACL,WAAW,EACX,SAAS,EACT,OAAO,EACP,GAAG,EACH,IAAI,EACL,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EAAC,mBAAmB,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/InsertionIndicator.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/Nubbin.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/Resizer.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/RootDropIndicator.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/DragPreview.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/TableView.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/index.ts","packages/@react-spectrum/table/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport {TableView} from './TableView';\nimport {Column} from '@react-stately/table';\nimport {SpectrumColumnProps} from '@react-types/table';\n\n// Override TS for Column to support spectrum specific props.\nconst SpectrumColumn = Column as <T>(props: SpectrumColumnProps<T>) => JSX.Element;\nexport {SpectrumColumn as Column};\n\nexport {\n  TableHeader,\n  TableBody,\n  Section,\n  Row,\n  Cell\n} from '@react-stately/table';\n\nexport type {SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps} from '@react-types/table';\nexport type {SpectrumTableProps} from './TableView';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;AKmIA,oCAAoC,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC,EAAE,sBAAsB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IAC3H;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,IAAI,OAAO,CAAC;IACrC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACvD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACrD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;CACxD;AA+vCD;;GAEG;AACH,OAAA,MAAM;UAAsF,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;ACv5CrI,OAAA,MAAM,8CAAiE,WAAW,CAAC;AAGnF,OAAO,EACL,WAAW,EACX,SAAS,EACT,OAAO,EACP,GAAG,EACH,IAAI,EACL,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EAAC,mBAAmB,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/InsertionIndicator.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/Nubbin.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/Resizer.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/RootDropIndicator.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/DragPreview.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/TableView.tsx","packages/@react-spectrum/table/src/packages/@react-spectrum/table/src/index.ts","packages/@react-spectrum/table/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport {TableView} from './TableView';\nimport {Column} from '@react-stately/table';\nimport {SpectrumColumnProps} from '@react-types/table';\n\n// Override TS for Column to support spectrum specific props.\nconst SpectrumColumn = Column as <T>(props: SpectrumColumnProps<T>) => JSX.Element;\nexport {SpectrumColumn as Column};\n\nexport {\n  TableHeader,\n  TableBody,\n  Section,\n  Row,\n  Cell\n} from '@react-stately/table';\n\nexport type {SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps} from '@react-types/table';\nexport type {SpectrumTableProps} from './TableView';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/table",
-  "version": "3.9.1-nightly.3940+b1545c0d2",
+  "version": "3.9.1-nightly.3960+16f72e9fb",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,38 +36,38 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/button": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-aria/focus": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-aria/grid": "3.7.2-nightly.3940+b1545c0d2",
-    "@react-aria/i18n": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-aria/interactions": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-aria/table": "3.9.2-nightly.3940+b1545c0d2",
-    "@react-aria/utils": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-aria/virtualizer": "3.8.2-nightly.3940+b1545c0d2",
-    "@react-aria/visually-hidden": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-spectrum/button": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-spectrum/checkbox": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-spectrum/dnd": "3.2.1-nightly.3940+b1545c0d2",
-    "@react-spectrum/layout": "3.5.3-nightly.3940+b1545c0d2",
-    "@react-spectrum/menu": "3.11.2-nightly.3940+b1545c0d2",
-    "@react-spectrum/progress": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-spectrum/tooltip": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-spectrum/utils": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-stately/collections": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-stately/grid": "3.6.2-nightly.3940+b1545c0d2",
-    "@react-stately/layout": "3.12.2-nightly.3940+b1545c0d2",
-    "@react-stately/table": "3.9.2-nightly.3940+b1545c0d2",
-    "@react-stately/virtualizer": "3.5.3-nightly.3940+b1545c0d2",
-    "@react-types/grid": "3.1.9-nightly.3940+b1545c0d2",
-    "@react-types/shared": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-types/table": "3.6.2-nightly.3940+b1545c0d2",
-    "@spectrum-icons/ui": "3.0.0-nightly.2238+b1545c0d2",
+    "@react-aria/button": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-aria/focus": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-aria/grid": "3.7.2-nightly.3960+16f72e9fb",
+    "@react-aria/i18n": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-aria/interactions": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-aria/table": "3.9.2-nightly.3960+16f72e9fb",
+    "@react-aria/utils": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-aria/virtualizer": "3.8.2-nightly.3960+16f72e9fb",
+    "@react-aria/visually-hidden": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-spectrum/button": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-spectrum/checkbox": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-spectrum/dnd": "3.2.1-nightly.3960+16f72e9fb",
+    "@react-spectrum/layout": "3.5.3-nightly.3960+16f72e9fb",
+    "@react-spectrum/menu": "3.11.2-nightly.3960+16f72e9fb",
+    "@react-spectrum/progress": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-spectrum/tooltip": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-spectrum/utils": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-stately/collections": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-stately/grid": "3.6.2-nightly.3960+16f72e9fb",
+    "@react-stately/layout": "3.12.2-nightly.3960+16f72e9fb",
+    "@react-stately/table": "3.9.2-nightly.3960+16f72e9fb",
+    "@react-stately/virtualizer": "3.5.3-nightly.3960+16f72e9fb",
+    "@react-types/grid": "3.1.9-nightly.3960+16f72e9fb",
+    "@react-types/shared": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-types/table": "3.6.2-nightly.3960+16f72e9fb",
+    "@spectrum-icons/ui": "3.0.0-nightly.2258+16f72e9fb",
     "@swc/helpers": "^0.4.14"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-aria/dnd": "3.2.2-nightly.3940+b1545c0d2",
-    "@react-stately/dnd": "3.2.2-nightly.3940+b1545c0d2"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2258+16f72e9fb",
+    "@react-aria/dnd": "3.2.2-nightly.3960+16f72e9fb",
+    "@react-stately/dnd": "3.2.2-nightly.3960+16f72e9fb"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b1545c0d225b12672fb6a4e7b787268591d66b90"
+  "gitHead": "16f72e9fbfc28adf104c3cb7557f1d3cab617960"
 }

package/src/TableView.tsx

@@ -12,7 +12,7 @@
 
 import {AriaLabelingProps, DOMProps, DOMRef, DropTarget, FocusableElement, FocusableRef, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
 import ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';
-import {chain, mergeProps, scrollIntoView, scrollIntoViewport, useLayoutEffect} from '@react-aria/utils';
+import {chain, mergeProps, scrollIntoView, scrollIntoViewport} from '@react-aria/utils';
 import {Checkbox} from '@react-spectrum/checkbox';
 import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';
 import {
@@ -38,9 +38,9 @@ import {layoutInfoToStyle, ScrollView, setScrollLeft, useVirtualizer, Virtualize
 import ListGripper from '@spectrum-icons/ui/ListGripper';
 import {Nubbin} from './Nubbin';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {DOMAttributes, HTMLAttributes, Key, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {Rect, ReusableView, useVirtualizerState} from '@react-stately/virtualizer';
+import React, {DOMAttributes, HTMLAttributes, Key, ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {Resizer} from './Resizer';
+import {ReusableView, useVirtualizerState} from '@react-stately/virtualizer';
 import {RootDropIndicator} from './RootDropIndicator';
 import {DragPreview as SpectrumDragPreview} from './DragPreview';
 import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
@@ -322,7 +322,7 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
   let [headerRowHovered, setHeaderRowHovered] = useState(false);
 
   // This overrides collection view's renderWrapper to support DOM hierarchy.
-  type View = ReusableView<GridNode<T>, unknown>;
+  type View = ReusableView<GridNode<T>, ReactNode>;
   let renderWrapper = (parent: View, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {
     let style = layoutInfoToStyle(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
     if (style.overflow === 'hidden') {
@@ -387,8 +387,9 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
     return (
       <VirtualizerItem
         key={reusableView.key}
-        reusableView={reusableView}
-        parent={parent}
+        layoutInfo={reusableView.layoutInfo}
+        virtualizer={reusableView.virtualizer}
+        parent={parent?.layoutInfo}
         className={
           classNames(
             styles,
@@ -401,7 +402,9 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
               }
             )
           )
-        } />
+        }>
+        {reusableView.rendered}
+      </VirtualizerItem>
     );
   };
 
@@ -578,7 +581,8 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
 }
 
 // This is a custom Virtualizer that also has a header that syncs its scroll position with the body.
-function TableVirtualizer({layout, collection, focusedKey, renderView, renderWrapper, domRef, bodyRef, headerRef, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible, isVirtualDragging, isRootDropTarget, ...otherProps}) {
+function TableVirtualizer(props) {
+  let {layout, collection, focusedKey, renderView, renderWrapper, domRef, bodyRef, headerRef, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible, isVirtualDragging, isRootDropTarget, ...otherProps} = props;
   let {direction} = useLocale();
   let loadingState = collection.body.props.loadingState;
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
@@ -591,7 +595,7 @@ function TableVirtualizer({layout, collection, focusedKey, renderView, renderWra
     // while resizing, prop changes should not cause animations
     transitionDuration = 0;
   }
-  let state = useVirtualizerState({
+  let state = useVirtualizerState<object, ReactNode, ReactNode>({
     layout,
     collection,
     renderView,
@@ -608,8 +612,6 @@ function TableVirtualizer({layout, collection, focusedKey, renderView, renderWra
     let column = collection.columns[0];
     let virtualizer = state.virtualizer;
 
-    let modality = getInteractionModality();
-
     virtualizer.scrollToItem(key, {
       duration: 0,
       // Prevent scrolling to the top when clicking on column headers.
@@ -624,16 +626,17 @@ function TableVirtualizer({layout, collection, focusedKey, renderView, renderWra
     // 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') {
-      scrollIntoViewport(document.activeElement, {containingElement: domRef.current});
-    }
-  }, [collection, domRef, bodyRef, headerRef, layout, state.virtualizer]);
+  }, [collection, bodyRef, headerRef, layout, state.virtualizer]);
 
-  let {virtualizerProps} = useVirtualizer({
+  let memoedVirtualizerProps = useMemo(() => ({
     tabIndex: otherProps.tabIndex,
     focusedKey,
-    scrollToItem
-  }, state, domRef);
+    scrollToItem,
+    isLoading,
+    onLoadMore
+  }), [otherProps.tabIndex, focusedKey, scrollToItem, isLoading, onLoadMore]);
+
+  let {virtualizerProps, scrollViewProps: {onVisibleRectChange}} = 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
@@ -654,26 +657,6 @@ function TableVirtualizer({layout, collection, focusedKey, renderView, renderWra
     headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
   }, [bodyRef, headerRef]);
 
-  let onVisibleRectChange = useCallback((rect: 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]);
-
-  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;
@@ -1119,7 +1102,7 @@ function TableDragHeaderCell({column}) {
       <div
         {...columnHeaderProps}
         ref={ref}
-        className={ 
+        className={
           classNames(
             styles,
             'spectrum-Table-headCell',