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

package/dist/module.js

@@ -487,11 +487,6 @@ function $cb7d341e8868d81d$export$d9658cdf8c86807() {
         height: "16",
         viewBox: "0 0 16 16"
     }, /*#__PURE__*/ (0, $gyhAV$react).createElement("g", {
-        id: "Group_175838",
-        "data-name": "Group 175838"
-    }, /*#__PURE__*/ (0, $gyhAV$react).createElement("g", {
-        id: "Ellipse_10104",
-        "data-name": "Ellipse 10104",
         fill: "var(--spectrum-global-color-blue-600)",
         stroke: "var(--spectrum-global-color-blue-600)",
         strokeWidth: "2"
@@ -505,9 +500,7 @@ function $cb7d341e8868d81d$export$d9658cdf8c86807() {
         cy: "8",
         r: "7",
         fill: "none"
-    }))), /*#__PURE__*/ (0, $gyhAV$react).createElement("path", {
-        id: "Path_104166",
-        "data-name": "Path 104166",
+    })), /*#__PURE__*/ (0, $gyhAV$react).createElement("path", {
         d: "M-2106-7380.263v5l2.5-2.551Z",
         transform: "translate(2116 7385.763)",
         fill: "#fff",
@@ -515,8 +508,6 @@ function $cb7d341e8868d81d$export$d9658cdf8c86807() {
         strokeLinejoin: "round",
         strokeWidth: "2"
     }), /*#__PURE__*/ (0, $gyhAV$react).createElement("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",
@@ -841,7 +832,7 @@ function $d14697b14e638114$export$3f8f74b6bfd2c5df() {
 }
 function $d14697b14e638114$var$TableView(props, ref) {
     props = (0, $gyhAV$useProviderProps)(props);
-    let { isQuiet: isQuiet , onAction: onAction , onResizeEnd: propsOnResizeEnd  } = props;
+    let { isQuiet: isQuiet , onAction: onAction , onResizeStart: propsOnResizeStart , onResizeEnd: propsOnResizeEnd  } = props;
     let { styleProps: styleProps  } = (0, $gyhAV$useStyleProps)(props);
     let [showSelectionCheckboxes, setShowSelectionCheckboxes] = (0, $gyhAV$useState)(props.selectionStyle !== "highlight");
     let { direction: direction  } = (0, $gyhAV$useLocale)();
@@ -1027,10 +1018,12 @@ function $d14697b14e638114$var$TableView(props, ref) {
         if (e.pointerType === "keyboard") lastResizeInteractionModality.current = e.pointerType;
         else lastResizeInteractionModality.current = undefined;
     };
-    let onResizeStart = (0, $gyhAV$useCallback)(()=>{
+    let onResizeStart = (0, $gyhAV$useCallback)((widths)=>{
         setIsResizing(true);
+        propsOnResizeStart === null || propsOnResizeStart === void 0 ? void 0 : propsOnResizeStart(widths);
     }, [
-        setIsResizing
+        setIsResizing,
+        propsOnResizeStart
     ]);
     let onResizeEnd = (0, $gyhAV$useCallback)((widths)=>{
         setIsInResizeMode(false);
@@ -1082,7 +1075,7 @@ 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 , lastResizeInteractionModality: lastResizeInteractionModality , focusedKey: focusedKey , renderView: renderView , renderWrapper: renderWrapper , domRef: domRef , bodyRef: bodyRef , headerRef: headerRef , onVisibleRectChange: onVisibleRectChangeProp , isFocusVisible: isFocusVisible , ...otherProps }) {
-    var ref, ref1, ref2;
+    var _layout_getLayoutInfo;
     let { direction: direction  } = (0, $gyhAV$useLocale)();
     let loadingState = collection.body.props.loadingState;
     let isLoading = loadingState === "loading" || loadingState === "loadingMore";
@@ -1122,8 +1115,8 @@ function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: c
     // header scroll position
     (0, $gyhAV$useEffect)(()=>{
         if (lastResizeInteractionModality.current === "keyboard" && headerRef.current.contains(document.activeElement)) {
-            var ref, ref1;
-            (ref = document.activeElement) === null || ref === void 0 ? void 0 : (ref1 = ref.scrollIntoView) === null || ref1 === void 0 ? void 0 : ref1.call(ref, {
+            var _document_activeElement, _document_activeElement_scrollIntoView;
+            (_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : (_document_activeElement_scrollIntoView = _document_activeElement.scrollIntoView) === null || _document_activeElement_scrollIntoView === void 0 ? void 0 : _document_activeElement_scrollIntoView.call(_document_activeElement, {
                 block: "nearest",
                 inline: "nearest"
             });
@@ -1135,7 +1128,7 @@ function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: c
         bodyRef,
         lastResizeInteractionModality
     ]);
-    let headerHeight = ((ref = layout.getLayoutInfo("header")) === null || ref === void 0 ? void 0 : ref.rect.height) || 0;
+    let headerHeight = ((_layout_getLayoutInfo = layout.getLayoutInfo("header")) === null || _layout_getLayoutInfo === void 0 ? void 0 : _layout_getLayoutInfo.rect.height) || 0;
     let visibleRect = state.virtualizer.visibleRect;
     // Sync the scroll position from the table body to the header container.
     let onScroll = (0, $gyhAV$useCallback)(()=>{
@@ -1172,7 +1165,7 @@ function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: c
     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((ref1 = bodyRef.current) === null || ref1 === void 0 ? void 0 : ref1.scrollLeft) ? 0 : (ref2 = bodyRef.current) === null || ref2 === void 0 ? void 0 : ref2.scrollLeft);
+    let resizerInVisibleRegion = resizerPosition < state.virtualizer.visibleRect.maxX;
     let shouldHardCornerResizeCorner = resizerAtEdge && resizerInVisibleRegion;
     // minimize re-render caused on Resizers by memoing this
     let resizingColumnWidth = layout.getColumnWidth(layout.resizingColumn);
@@ -1238,9 +1231,9 @@ function $d14697b14e638114$var$TableHeader({ children: children , ...otherProps
     }, children);
 }
 function $d14697b14e638114$var$TableColumnHeader(props) {
-    var ref, ref1, ref2, ref3;
+    var _state_sortDescriptor, _state_sortDescriptor1, _state_sortDescriptor2, _state_sortDescriptor3;
     let { column: column  } = props;
-    let ref4 = (0, $gyhAV$useRef)(null);
+    let ref = (0, $gyhAV$useRef)(null);
     let { state: state , isEmpty: isEmpty  } = $d14697b14e638114$export$3cb274deb6c2d854();
     let { pressProps: pressProps , isPressed: isPressed  } = (0, $gyhAV$usePress)({
         isDisabled: isEmpty
@@ -1249,7 +1242,7 @@ function $d14697b14e638114$var$TableColumnHeader(props) {
     let { columnHeaderProps: columnHeaderProps  } = (0, $gyhAV$useTableColumnHeader)({
         node: column,
         isVirtualized: true
-    }, state, ref4);
+    }, state, ref);
     let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $gyhAV$useHover)({
         ...props,
         isDisabled: isEmpty
@@ -1263,13 +1256,13 @@ function $d14697b14e638114$var$TableColumnHeader(props) {
         focusRingClass: (0, $gyhAV$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports))), "focus-ring")
     }, /*#__PURE__*/ (0, $gyhAV$react).createElement("div", {
         ...(0, $gyhAV$mergeProps)(...allProps),
-        ref: ref4,
+        ref: ref,
         className: (0, $gyhAV$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports))), "spectrum-Table-headCell", {
             "is-active": isPressed,
             "is-resizable": columnProps.allowsResizing,
             "is-sortable": columnProps.allowsSorting,
-            "is-sorted-desc": ((ref = state.sortDescriptor) === null || ref === void 0 ? void 0 : ref.column) === column.key && ((ref1 = state.sortDescriptor) === null || ref1 === void 0 ? void 0 : ref1.direction) === "descending",
-            "is-sorted-asc": ((ref2 = state.sortDescriptor) === null || ref2 === void 0 ? void 0 : ref2.column) === column.key && ((ref3 = state.sortDescriptor) === null || ref3 === void 0 ? void 0 : ref3.direction) === "ascending",
+            "is-sorted-desc": ((_state_sortDescriptor = state.sortDescriptor) === null || _state_sortDescriptor === void 0 ? void 0 : _state_sortDescriptor.column) === column.key && ((_state_sortDescriptor1 = state.sortDescriptor) === null || _state_sortDescriptor1 === void 0 ? void 0 : _state_sortDescriptor1.direction) === "descending",
+            "is-sorted-asc": ((_state_sortDescriptor2 = state.sortDescriptor) === null || _state_sortDescriptor2 === void 0 ? void 0 : _state_sortDescriptor2.column) === column.key && ((_state_sortDescriptor3 = state.sortDescriptor) === null || _state_sortDescriptor3 === void 0 ? void 0 : _state_sortDescriptor3.direction) === "ascending",
             "is-hovered": isHovered,
             "spectrum-Table-cell--hideHeader": columnProps.hideHeader
         }, (0, $gyhAV$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($325bc3d43b25708b$exports))), "react-spectrum-Table-cell", {
@@ -1308,9 +1301,9 @@ let $d14697b14e638114$var$_TableColumnHeaderButton = (props, ref)=>{
 };
 let $d14697b14e638114$var$TableColumnHeaderButton = /*#__PURE__*/ (0, $gyhAV$react).forwardRef($d14697b14e638114$var$_TableColumnHeaderButton);
 function $d14697b14e638114$var$ResizableTableColumnHeader(props) {
-    var ref, ref1, ref2, ref3, ref4;
+    var _column_props, _state_sortDescriptor, _state_sortDescriptor1, _state_sortDescriptor2, _state_sortDescriptor3;
     let { column: column  } = props;
-    let ref5 = (0, $gyhAV$useRef)(null);
+    let ref = (0, $gyhAV$useRef)(null);
     let triggerRef = (0, $gyhAV$useRef)(null);
     let resizingRef = (0, $gyhAV$useRef)(null);
     let { state: state , layout: layout , onResizeStart: onResizeStart , onResize: onResize , onResizeEnd: onResizeEnd , headerRowHovered: headerRowHovered , setIsInResizeMode: setIsInResizeMode , isEmpty: isEmpty , onFocusedResizer: onFocusedResizer , onMoveResizer: onMoveResizer , isInResizeMode: isInResizeMode , headerMenuOpen: headerMenuOpen , setHeaderMenuOpen: setHeaderMenuOpen  } = $d14697b14e638114$export$3cb274deb6c2d854();
@@ -1321,7 +1314,7 @@ function $d14697b14e638114$var$ResizableTableColumnHeader(props) {
     let { columnHeaderProps: columnHeaderProps  } = (0, $gyhAV$useTableColumnHeader)({
         node: column,
         isVirtualized: true
-    }, state, ref5);
+    }, state, ref);
     let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $gyhAV$useHover)({
         ...props,
         isDisabled: isEmpty || headerMenuOpen
@@ -1347,7 +1340,7 @@ function $d14697b14e638114$var$ResizableTableColumnHeader(props) {
                 break;
         }
     };
-    let allowsSorting = (ref = column.props) === null || ref === void 0 ? void 0 : ref.allowsSorting;
+    let allowsSorting = (_column_props = column.props) === null || _column_props === void 0 ? void 0 : _column_props.allowsSorting;
     let items = (0, $gyhAV$useMemo)(()=>{
         let options = [
             allowsSorting ? {
@@ -1407,13 +1400,13 @@ function $d14697b14e638114$var$ResizableTableColumnHeader(props) {
         focusRingClass: (0, $gyhAV$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports))), "focus-ring")
     }, /*#__PURE__*/ (0, $gyhAV$react).createElement("div", {
         ...(0, $gyhAV$mergeProps)(...allProps),
-        ref: ref5,
+        ref: ref,
         className: (0, $gyhAV$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports))), "spectrum-Table-headCell", {
             "is-active": isPressed,
             "is-resizable": columnProps.allowsResizing,
             "is-sortable": columnProps.allowsSorting,
-            "is-sorted-desc": ((ref1 = state.sortDescriptor) === null || ref1 === void 0 ? void 0 : ref1.column) === column.key && ((ref2 = state.sortDescriptor) === null || ref2 === void 0 ? void 0 : ref2.direction) === "descending",
-            "is-sorted-asc": ((ref3 = state.sortDescriptor) === null || ref3 === void 0 ? void 0 : ref3.column) === column.key && ((ref4 = state.sortDescriptor) === null || ref4 === void 0 ? void 0 : ref4.direction) === "ascending",
+            "is-sorted-desc": ((_state_sortDescriptor = state.sortDescriptor) === null || _state_sortDescriptor === void 0 ? void 0 : _state_sortDescriptor.column) === column.key && ((_state_sortDescriptor1 = state.sortDescriptor) === null || _state_sortDescriptor1 === void 0 ? void 0 : _state_sortDescriptor1.direction) === "descending",
+            "is-sorted-asc": ((_state_sortDescriptor2 = state.sortDescriptor) === null || _state_sortDescriptor2 === void 0 ? void 0 : _state_sortDescriptor2.column) === column.key && ((_state_sortDescriptor3 = state.sortDescriptor) === null || _state_sortDescriptor3 === void 0 ? void 0 : _state_sortDescriptor3.direction) === "ascending",
             "is-hovered": isHovered,
             "focus-ring": isFocusVisible,
             "spectrum-Table-cell--hideHeader": columnProps.hideHeader
@@ -1497,8 +1490,8 @@ function $d14697b14e638114$var$TableRowGroup({ children: children , ...otherProp
     }, children);
 }
 function $d14697b14e638114$var$TableRow({ item: item , children: children , hasActions: hasActions , ...otherProps }) {
-    var ref, ref1, ref2;
-    let ref3 = (0, $gyhAV$useRef)();
+    var _state_collection_rows_find, _layout_getContentSize, _layout_virtualizer;
+    let ref = (0, $gyhAV$useRef)();
     let { state: state , layout: layout  } = $d14697b14e638114$export$3cb274deb6c2d854();
     let allowsInteraction = state.selectionManager.selectionMode !== "none" || hasActions;
     let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
@@ -1506,7 +1499,7 @@ function $d14697b14e638114$var$TableRow({ item: item , children: children , hasA
     let { rowProps: rowProps  } = (0, $gyhAV$useTableRow)({
         node: item,
         isVirtualized: true
-    }, state, ref3);
+    }, state, ref);
     let { pressProps: pressProps , isPressed: isPressed  } = (0, $gyhAV$usePress)({
         isDisabled: isDisabled
     });
@@ -1520,17 +1513,17 @@ function $d14697b14e638114$var$TableRow({ item: item , children: children , hasA
         isDisabled: isDisabled
     });
     let props = (0, $gyhAV$mergeProps)(rowProps, otherProps, focusWithinProps, focusProps, hoverProps, pressProps);
-    let isFirstRow = ((ref = state.collection.rows.find((row)=>row.level === 1)) === null || ref === void 0 ? void 0 : ref.key) === item.key;
+    let isFirstRow = ((_state_collection_rows_find = state.collection.rows.find((row)=>row.level === 1)) === null || _state_collection_rows_find === void 0 ? void 0 : _state_collection_rows_find.key) === item.key;
     let isLastRow = item.nextKey == null;
     // Figure out if the TableView content is equal or greater in height to the container. If so, we'll need to round the bottom
     // border corners of the last row when selected.
     let isFlushWithContainerBottom = false;
     if (isLastRow) {
-        if (((ref1 = layout.getContentSize()) === null || ref1 === void 0 ? void 0 : ref1.height) >= ((ref2 = layout.virtualizer) === null || ref2 === void 0 ? void 0 : ref2.getVisibleRect().height)) isFlushWithContainerBottom = true;
+        if (((_layout_getContentSize = layout.getContentSize()) === null || _layout_getContentSize === void 0 ? void 0 : _layout_getContentSize.height) >= ((_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.getVisibleRect().height)) isFlushWithContainerBottom = true;
     }
     return /*#__PURE__*/ (0, $gyhAV$react).createElement("div", {
         ...props,
-        ref: ref3,
+        ref: ref,
         className: (0, $gyhAV$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports))), "spectrum-Table-row", {
             "is-active": isPressed,
             "is-selected": isSelected,