@react-spectrum/table 3.12.11-nightly.4698 → 3.12.11-nightly.4700

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/table",
-  "version": "3.12.11-nightly.4698+b940126e4",
+  "version": "3.12.11-nightly.4700+81abb2185",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,37 +36,37 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/button": "3.0.0-nightly.2986+b940126e4",
-    "@react-aria/focus": "3.0.0-nightly.2986+b940126e4",
-    "@react-aria/i18n": "3.0.0-nightly.2986+b940126e4",
-    "@react-aria/interactions": "3.0.0-nightly.2986+b940126e4",
-    "@react-aria/overlays": "3.0.0-nightly.2986+b940126e4",
-    "@react-aria/selection": "3.0.0-nightly.2986+b940126e4",
-    "@react-aria/table": "3.14.2-nightly.4698+b940126e4",
-    "@react-aria/utils": "3.0.0-nightly.2986+b940126e4",
-    "@react-aria/virtualizer": "3.10.2-nightly.4698+b940126e4",
-    "@react-aria/visually-hidden": "3.0.0-nightly.2986+b940126e4",
-    "@react-spectrum/checkbox": "3.0.0-nightly.2986+b940126e4",
-    "@react-spectrum/dnd": "3.3.11-nightly.4698+b940126e4",
-    "@react-spectrum/layout": "3.6.6-nightly.4698+b940126e4",
-    "@react-spectrum/menu": "3.19.2-nightly.4698+b940126e4",
-    "@react-spectrum/progress": "3.0.0-nightly.2986+b940126e4",
-    "@react-spectrum/tooltip": "3.0.0-nightly.2986+b940126e4",
-    "@react-spectrum/utils": "3.0.0-nightly.2986+b940126e4",
-    "@react-stately/flags": "3.0.4-nightly.4698+b940126e4",
-    "@react-stately/layout": "3.13.10-nightly.4698+b940126e4",
-    "@react-stately/table": "3.11.9-nightly.4698+b940126e4",
-    "@react-stately/virtualizer": "3.7.2-nightly.4698+b940126e4",
-    "@react-types/grid": "3.2.7-nightly.4698+b940126e4",
-    "@react-types/shared": "3.0.0-nightly.2986+b940126e4",
-    "@react-types/table": "3.9.6-nightly.4698+b940126e4",
-    "@spectrum-icons/ui": "3.0.0-nightly.2986+b940126e4",
+    "@react-aria/button": "3.0.0-nightly.2988+81abb2185",
+    "@react-aria/focus": "3.0.0-nightly.2988+81abb2185",
+    "@react-aria/i18n": "3.0.0-nightly.2988+81abb2185",
+    "@react-aria/interactions": "3.0.0-nightly.2988+81abb2185",
+    "@react-aria/overlays": "3.0.0-nightly.2988+81abb2185",
+    "@react-aria/selection": "3.0.0-nightly.2988+81abb2185",
+    "@react-aria/table": "3.14.2-nightly.4700+81abb2185",
+    "@react-aria/utils": "3.0.0-nightly.2988+81abb2185",
+    "@react-aria/virtualizer": "3.10.2-nightly.4700+81abb2185",
+    "@react-aria/visually-hidden": "3.0.0-nightly.2988+81abb2185",
+    "@react-spectrum/checkbox": "3.0.0-nightly.2988+81abb2185",
+    "@react-spectrum/dnd": "3.3.11-nightly.4700+81abb2185",
+    "@react-spectrum/layout": "3.6.6-nightly.4700+81abb2185",
+    "@react-spectrum/menu": "3.19.2-nightly.4700+81abb2185",
+    "@react-spectrum/progress": "3.0.0-nightly.2988+81abb2185",
+    "@react-spectrum/tooltip": "3.0.0-nightly.2988+81abb2185",
+    "@react-spectrum/utils": "3.0.0-nightly.2988+81abb2185",
+    "@react-stately/flags": "3.0.4-nightly.4700+81abb2185",
+    "@react-stately/layout": "3.13.10-nightly.4700+81abb2185",
+    "@react-stately/table": "3.11.9-nightly.4700+81abb2185",
+    "@react-stately/virtualizer": "3.7.2-nightly.4700+81abb2185",
+    "@react-types/grid": "3.2.7-nightly.4700+81abb2185",
+    "@react-types/shared": "3.0.0-nightly.2988+81abb2185",
+    "@react-types/table": "3.9.6-nightly.4700+81abb2185",
+    "@spectrum-icons/ui": "3.0.0-nightly.2988+81abb2185",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2986+b940126e4",
-    "@react-aria/dnd": "3.6.2-nightly.4698+b940126e4",
-    "@react-stately/dnd": "3.3.2-nightly.4698+b940126e4"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2988+81abb2185",
+    "@react-aria/dnd": "3.6.2-nightly.4700+81abb2185",
+    "@react-stately/dnd": "3.3.2-nightly.4700+81abb2185"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b940126e4d67a11d28b7c0b098eab23205598b6c"
+  "gitHead": "81abb2185cb3a9c52a8feaf76a136c64852aea13"
 }

package/src/TableViewBase.tsx

@@ -404,10 +404,20 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
   }, [propsOnResizeEnd, setIsInResizeMode, setIsResizing]);
 
   let focusedKey = state.selectionManager.focusedKey;
+  let dropTargetKey: Key | null = null;
   if (dropState?.target?.type === 'item') {
-    focusedKey = dropState.target.key;
+    dropTargetKey = dropState.target.key;
+    if (dropState.target.dropPosition === 'before' && dropTargetKey !== state.collection.getFirstKey()) {
+      // Normalize to the "after" drop position since we only render those in the DOM.
+      // The exception to this is for the first row in the table, where we also render the "before" position.
+      dropTargetKey = state.collection.getKeyBefore(dropTargetKey);
+    }
   }
 
+  let persistedKeys = useMemo(() => {
+    return new Set([focusedKey, dropTargetKey].filter(k => k !== null));
+  }, [focusedKey, dropTargetKey]);
+
   let mergedProps = mergeProps(
     isTableDroppable && droppableCollection?.collectionProps,
     gridProps,
@@ -462,7 +472,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
         tableState={state}
         layout={layout}
         collection={state.collection}
-        focusedKey={focusedKey}
+        persistedKeys={persistedKeys}
         renderView={renderView}
         renderWrapper={renderWrapper}
         onVisibleRectChange={onVisibleRectChange}
@@ -494,7 +504,7 @@ interface TableVirtualizerProps<T> extends HTMLAttributes<HTMLElement> {
   tableState: TableState<T>,
   layout: TableViewLayout<T>,
   collection: TableCollection<T>,
-  focusedKey: Key | null,
+  persistedKeys: Set<Key> | null,
   renderView: (type: string, content: GridNode<T>) => ReactElement,
   renderWrapper?: (
     parent: View | null,
@@ -513,7 +523,7 @@ interface TableVirtualizerProps<T> extends HTMLAttributes<HTMLElement> {
 
 // This is a custom Virtualizer that also has a header that syncs its scroll position with the body.
 function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
-  let {tableState, layout, collection, focusedKey, renderView, renderWrapper, domRef, bodyRef, headerRef, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible, isVirtualDragging, isRootDropTarget, ...otherProps} = props;
+  let {tableState, layout, collection, persistedKeys, 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';
@@ -558,7 +568,7 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
       bodyRef.current.scrollTop = rect.y;
       setScrollLeft(bodyRef.current, direction, rect.x);
     },
-    persistedKeys: useMemo(() => focusedKey ? new Set([focusedKey]) : new Set(), [focusedKey]),
+    persistedKeys,
     layoutOptions: useMemo(() => ({
       columnWidths: columnResizeState.columnWidths
     }), [columnResizeState.columnWidths])
@@ -566,10 +576,10 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
 
   let memoedVirtualizerProps = useMemo(() => ({
     tabIndex: otherProps.tabIndex,
-    focusedKey,
+    persistedKeys,
     isLoading,
     onLoadMore
-  }), [otherProps.tabIndex, focusedKey, isLoading, onLoadMore]);
+  }), [otherProps.tabIndex, persistedKeys, isLoading, onLoadMore]);
 
   let {virtualizerProps, scrollViewProps: {onVisibleRectChange}} = useVirtualizer(memoedVirtualizerProps, state, domRef);
   let onVisibleRectChangeMemo = useCallback(rect => {

package/src/TableViewLayout.ts

@@ -36,7 +36,7 @@ export class TableViewLayout<T> extends TableLayout<T> {
 
     if (this.isLoading) {
       // Add some margin around the loader to ensure that scrollbars don't flicker in and out.
-      let rect = new Rect(40, 40, (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
+      let rect = new Rect(40, Math.max(layoutInfo.rect.maxY, 40), (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
       let loader = new LayoutInfo('loader', 'loader', rect);
       loader.parentKey = layoutInfo.key;
       loader.isSticky = children.length === 0;