@react-spectrum/table 3.5.1-nightly.3617 → 3.5.1-nightly.3621

package/src/Nubbin.tsx

@@ -17,14 +17,12 @@ import React from 'react';
 export function Nubbin() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-      <g id="Group_175838" data-name="Group 175838">
-        <g id="Ellipse_10104" data-name="Ellipse 10104" fill="var(--spectrum-global-color-blue-600)" stroke="var(--spectrum-global-color-blue-600)" strokeWidth="2">
-          <circle cx="8" cy="8" r="8" stroke="none" />
-          <circle cx="8" cy="8" r="7" fill="none" />
-        </g>
+      <g fill="var(--spectrum-global-color-blue-600)" stroke="var(--spectrum-global-color-blue-600)" strokeWidth="2">
+        <circle cx="8" cy="8" r="8" stroke="none" />
+        <circle cx="8" cy="8" r="7" fill="none" />
       </g>
-      <path id="Path_104166" data-name="Path 104166" d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(2116 7385.763)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
-      <path id="Path_104167" data-name="Path 104167" d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(-2100 -7369.763) rotate(180)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
+      <path d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(2116 7385.763)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
+      <path d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(-2100 -7369.763) rotate(180)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
     </svg>
   );
 }

package/src/Resizer.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/role-supports-aria-props */
 import {classNames} from '@react-spectrum/utils';
+import {ColumnSize} from '@react-types/table';
 import {FocusRing} from '@react-aria/focus';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
@@ -16,9 +17,9 @@ interface ResizerProps<T> {
   column: GridNode<T>,
   showResizer: boolean,
   triggerRef: RefObject<HTMLDivElement>,
-  onResizeStart: (key: Key) => void,
-  onResize: (widths: Map<Key, number | string>) => void,
-  onResizeEnd: (key: Key) => void,
+  onResizeStart: (widths: Map<Key, ColumnSize>) => void,
+  onResize: (widths: Map<Key, ColumnSize>) => void,
+  onResizeEnd: (widths: Map<Key, ColumnSize>) => void,
   onMoveResizer: (e: MoveMoveEvent) => void
 }
 

package/src/TableView.tsx

@@ -94,9 +94,9 @@ interface TableContextValue<T> {
   setIsInResizeMode: (val: boolean) => void,
   isEmpty: boolean,
   onFocusedResizer: () => void,
-  onResizeStart: (key: Key) => void,
+  onResizeStart: (widths: Map<Key, ColumnSize>) => void,
   onResize: (widths: Map<Key, ColumnSize>) => void,
-  onResizeEnd: (key: Key) => void,
+  onResizeEnd: (widths: Map<Key, ColumnSize>) => void,
   onMoveResizer: (e: MoveMoveEvent) => void,
   headerMenuOpen: boolean,
   setHeaderMenuOpen: (val: boolean) => void
@@ -114,7 +114,7 @@ export function useVirtualizerContext() {
 
 function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
-  let {isQuiet, onAction, onResizeEnd: propsOnResizeEnd} = props;
+  let {isQuiet, onAction, onResizeStart: propsOnResizeStart, onResizeEnd: propsOnResizeEnd} = props;
   let {styleProps} = useStyleProps(props);
 
   let [showSelectionCheckboxes, setShowSelectionCheckboxes] = useState(props.selectionStyle !== 'highlight');
@@ -369,9 +369,10 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
       lastResizeInteractionModality.current = undefined;
     }
   };
-  let onResizeStart = useCallback(() => {
+  let onResizeStart = useCallback((widths) => {
     setIsResizing(true);
-  }, [setIsResizing]);
+    propsOnResizeStart?.(widths);
+  }, [setIsResizing, propsOnResizeStart]);
   let onResizeEnd = useCallback((widths) => {
     setIsInResizeMode(false);
     setIsResizing(false);
@@ -504,7 +505,7 @@ function TableVirtualizer({layout, collection, lastResizeInteractionModality, fo
   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
   // scrolling can cause it to lag for a moment, but it's always updated
-  let resizerInVisibleRegion = resizerPosition < state.virtualizer.visibleRect.width + (isNaN(bodyRef.current?.scrollLeft) ? 0 : bodyRef.current?.scrollLeft);
+  let resizerInVisibleRegion = resizerPosition < state.virtualizer.visibleRect.maxX;
   let shouldHardCornerResizeCorner = resizerAtEdge && resizerInVisibleRegion;
 
   // minimize re-render caused on Resizers by memoing this