@react-spectrum/table 3.12.11-nightly.4691 → 3.12.11-nightly.4695

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/table",
-  "version": "3.12.11-nightly.4691+fabca84b9",
+  "version": "3.12.11-nightly.4695+2964e9aaf",
   "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.2979+fabca84b9",
-    "@react-aria/focus": "3.0.0-nightly.2979+fabca84b9",
-    "@react-aria/i18n": "3.0.0-nightly.2979+fabca84b9",
-    "@react-aria/interactions": "3.0.0-nightly.2979+fabca84b9",
-    "@react-aria/overlays": "3.0.0-nightly.2979+fabca84b9",
-    "@react-aria/selection": "3.0.0-nightly.2979+fabca84b9",
-    "@react-aria/table": "3.14.2-nightly.4691+fabca84b9",
-    "@react-aria/utils": "3.0.0-nightly.2979+fabca84b9",
-    "@react-aria/virtualizer": "3.10.2-nightly.4691+fabca84b9",
-    "@react-aria/visually-hidden": "3.0.0-nightly.2979+fabca84b9",
-    "@react-spectrum/checkbox": "3.0.0-nightly.2979+fabca84b9",
-    "@react-spectrum/dnd": "3.3.11-nightly.4691+fabca84b9",
-    "@react-spectrum/layout": "3.6.6-nightly.4691+fabca84b9",
-    "@react-spectrum/menu": "3.19.2-nightly.4691+fabca84b9",
-    "@react-spectrum/progress": "3.0.0-nightly.2979+fabca84b9",
-    "@react-spectrum/tooltip": "3.0.0-nightly.2979+fabca84b9",
-    "@react-spectrum/utils": "3.0.0-nightly.2979+fabca84b9",
-    "@react-stately/flags": "3.0.4-nightly.4691+fabca84b9",
-    "@react-stately/layout": "3.13.10-nightly.4691+fabca84b9",
-    "@react-stately/table": "3.11.9-nightly.4691+fabca84b9",
-    "@react-stately/virtualizer": "3.7.2-nightly.4691+fabca84b9",
-    "@react-types/grid": "3.2.7-nightly.4691+fabca84b9",
-    "@react-types/shared": "3.0.0-nightly.2979+fabca84b9",
-    "@react-types/table": "3.9.6-nightly.4691+fabca84b9",
-    "@spectrum-icons/ui": "3.0.0-nightly.2979+fabca84b9",
+    "@react-aria/button": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-aria/focus": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-aria/i18n": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-aria/interactions": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-aria/overlays": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-aria/selection": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-aria/table": "3.14.2-nightly.4695+2964e9aaf",
+    "@react-aria/utils": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-aria/virtualizer": "3.10.2-nightly.4695+2964e9aaf",
+    "@react-aria/visually-hidden": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-spectrum/checkbox": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-spectrum/dnd": "3.3.11-nightly.4695+2964e9aaf",
+    "@react-spectrum/layout": "3.6.6-nightly.4695+2964e9aaf",
+    "@react-spectrum/menu": "3.19.2-nightly.4695+2964e9aaf",
+    "@react-spectrum/progress": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-spectrum/tooltip": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-spectrum/utils": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-stately/flags": "3.0.4-nightly.4695+2964e9aaf",
+    "@react-stately/layout": "3.13.10-nightly.4695+2964e9aaf",
+    "@react-stately/table": "3.11.9-nightly.4695+2964e9aaf",
+    "@react-stately/virtualizer": "3.7.2-nightly.4695+2964e9aaf",
+    "@react-types/grid": "3.2.7-nightly.4695+2964e9aaf",
+    "@react-types/shared": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-types/table": "3.9.6-nightly.4695+2964e9aaf",
+    "@spectrum-icons/ui": "3.0.0-nightly.2983+2964e9aaf",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2979+fabca84b9",
-    "@react-aria/dnd": "3.6.2-nightly.4691+fabca84b9",
-    "@react-stately/dnd": "3.3.2-nightly.4691+fabca84b9"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2983+2964e9aaf",
+    "@react-aria/dnd": "3.6.2-nightly.4695+2964e9aaf",
+    "@react-stately/dnd": "3.3.2-nightly.4695+2964e9aaf"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fabca84b95c9c61f9062d5f1e66ebe2c920a2a5d"
+  "gitHead": "2964e9aafc281888cd65da5bd77512e7f999bd84"
 }

package/src/TableViewBase.tsx

@@ -550,11 +550,10 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
     getDefaultMinWidth
   }, tableState);
 
-  let state = useVirtualizerState<object, ReactNode, ReactNode>({
+  let state = useVirtualizerState<GridNode<unknown>, ReactNode>({
     layout,
     collection,
     renderView,
-    renderWrapper,
     onVisibleRectChange(rect) {
       bodyRef.current.scrollTop = rect.y;
       setScrollLeft(bodyRef.current, direction, rect.x);
@@ -623,6 +622,8 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
     scrollPadding = columnResizeState.getColumnWidth(firstColumn.key);
   }
 
+  let visibleViews = renderChildren(null, state.visibleViews, renderWrapper);
+
   return (
     <VirtualizerContext.Provider value={resizingColumn}>
       <FocusScope>
@@ -641,7 +642,7 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
             }}
             ref={headerRef}>
             <ResizeStateContext.Provider value={columnResizeState}>
-              {state.visibleViews[0]}
+              {visibleViews[0]}
             </ResizeStateContext.Provider>
           </div>
           <ScrollView
@@ -679,7 +680,7 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
             onScrollStart={state.startScrolling}
             onScrollEnd={state.endScrolling}
             onScroll={onScroll}>
-            {state.visibleViews[1]}
+            {visibleViews[1]}
             <div
               className={classNames(styles, 'spectrum-Table-bodyResizeIndicator')}
               style={{[direction === 'ltr' ? 'left' : 'right']: `${resizerPosition}px`, height: `${Math.max(state.virtualizer.contentSize.height, state.virtualizer.visibleRect.height)}px`, display: columnResizeState.resizingColumn ? 'block' : 'none'}} />
@@ -690,6 +691,17 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
   );
 }
 
+function renderChildren<T extends object>(parent: View | null, views: View[], renderWrapper: TableVirtualizerProps<T>['renderWrapper']) {
+  return views.map(view => {
+    return renderWrapper(
+      parent,
+      view,
+      view.children ? Array.from(view.children) : [],
+      childViews => renderChildren(view, childViews, renderWrapper)
+    );
+  });
+}
+
 function useStyle(layoutInfo: LayoutInfo, parent: LayoutInfo | null) {
   let {direction} = useLocale();
   let style = layoutInfoToStyle(layoutInfo, direction, parent);

package/src/TableViewLayout.ts

@@ -1,3 +1,15 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import {DropTarget} from '@react-types/shared';
 import {GridNode} from '@react-types/grid';
 import {LayoutInfo, Rect} from '@react-stately/virtualizer';
 import {LayoutNode, TableLayout} from '@react-stately/layout';
@@ -66,4 +78,10 @@ export class TableViewLayout<T> extends TableLayout<T> {
   protected isStickyColumn(node: GridNode<T>) {
     return node.props?.isDragButtonCell || node.props?.isSelectionCell;
   }
+
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
+    // Offset for height of header row
+    y -= this.virtualizer.layout.getVisibleLayoutInfos(new Rect(x, y, 1, 1)).find(info => info.type === 'headerrow')?.rect.height;
+    return super.getDropTargetFromPoint(x, y, isValidDropTarget);
+  }
 }