@react-spectrum/table 3.3.2 → 3.3.3-nightly.3472

package/dist/module.js

@@ -1,10 +1,10 @@
 import "./main.css";
 import {Column as $gyhAV$Column, TableHeader as $e668f3d0f378a712$re_export$TableHeader, TableBody as $e668f3d0f378a712$re_export$TableBody, Section as $e668f3d0f378a712$re_export$Section, Row as $e668f3d0f378a712$re_export$Row, Cell as $e668f3d0f378a712$re_export$Cell, useTableState as $gyhAV$useTableState, useTableColumnResizeState as $gyhAV$useTableColumnResizeState} from "@react-stately/table";
 import $gyhAV$spectrumiconsuiArrowDownSmall from "@spectrum-icons/ui/ArrowDownSmall";
-import {useLayoutEffect as $gyhAV$useLayoutEffect, mergeProps as $gyhAV$mergeProps, chain as $gyhAV$chain} from "@react-aria/utils";
+import {mergeProps as $gyhAV$mergeProps, useLayoutEffect as $gyhAV$useLayoutEffect, chain as $gyhAV$chain} from "@react-aria/utils";
 import {Checkbox as $gyhAV$Checkbox} from "@react-spectrum/checkbox";
 import {useStyleProps as $gyhAV$useStyleProps, useDOMRef as $gyhAV$useDOMRef, classNames as $gyhAV$classNames, useFocusableRef as $gyhAV$useFocusableRef, useUnwrapDOMRef as $gyhAV$useUnwrapDOMRef} from "@react-spectrum/utils";
-import {FocusRing as $gyhAV$FocusRing, useFocusRing as $gyhAV$useFocusRing} from "@react-aria/focus";
+import {useFocusRing as $gyhAV$useFocusRing, FocusScope as $gyhAV$FocusScope, FocusRing as $gyhAV$FocusRing} from "@react-aria/focus";
 import {MenuTrigger as $gyhAV$MenuTrigger, Menu as $gyhAV$Menu, Item as $gyhAV$Item} from "@react-spectrum/menu";
 import {layoutInfoToStyle as $gyhAV$layoutInfoToStyle, VirtualizerItem as $gyhAV$VirtualizerItem, setScrollLeft as $gyhAV$setScrollLeft, useVirtualizer as $gyhAV$useVirtualizer, ScrollView as $gyhAV$ScrollView} from "@react-aria/virtualizer";
 import {ProgressCircle as $gyhAV$ProgressCircle} from "@react-spectrum/progress";
@@ -13,7 +13,7 @@ import {useVirtualizerState as $gyhAV$useVirtualizerState} from "@react-stately/
 import {TableLayout as $gyhAV$TableLayout} from "@react-stately/layout";
 import {TooltipTrigger as $gyhAV$TooltipTrigger, Tooltip as $gyhAV$Tooltip} from "@react-spectrum/tooltip";
 import {useButton as $gyhAV$useButton} from "@react-aria/button";
-import {useHover as $gyhAV$useHover, usePress as $gyhAV$usePress} from "@react-aria/interactions";
+import {usePress as $gyhAV$usePress, useHover as $gyhAV$useHover} from "@react-aria/interactions";
 import {useLocale as $gyhAV$useLocale, useLocalizedStringFormatter as $gyhAV$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {useProviderProps as $gyhAV$useProviderProps, useProvider as $gyhAV$useProvider} from "@react-spectrum/provider";
 import {useTable as $gyhAV$useTable, useTableRowGroup as $gyhAV$useTableRowGroup, useTableColumnHeader as $gyhAV$useTableColumnHeader, useTableSelectAllCheckbox as $gyhAV$useTableSelectAllCheckbox, useTableRow as $gyhAV$useTableRow, useTableHeaderRow as $gyhAV$useTableHeaderRow, useTableCell as $gyhAV$useTableCell, useTableSelectionCheckbox as $gyhAV$useTableSelectionCheckbox, useTableColumnResize as $gyhAV$useTableColumnResize} from "@react-aria/table";
@@ -583,12 +583,13 @@ $bd5d41f647a296c3$export$53aa811f86efbfad = "is-next-selected_d0fc74";
 
 function $fc695d2eafc2b351$var$Resizer(props, ref) {
     let { column: column , showResizer: showResizer  } = props;
-    let { state: state , columnState: columnState  } = $d14697b14e638114$export$3cb274deb6c2d854();
+    let { state: state , columnState: columnState , isEmpty: isEmpty  } = $d14697b14e638114$export$3cb274deb6c2d854();
     let stringFormatter = $gyhAV$useLocalizedStringFormatter((/*@__PURE__*/$parcel$interopDefault($467944769c14687b$exports)));
     let { direction: direction  } = $gyhAV$useLocale();
     let { inputProps: inputProps , resizerProps: resizerProps  } = $gyhAV$useTableColumnResize({
         ...props,
-        label: stringFormatter.format('columnResizer')
+        label: stringFormatter.format('columnResizer'),
+        isDisabled: isEmpty
     }, state, columnState, ref);
     let style = {
         cursor: undefined,
@@ -791,6 +792,7 @@ function $d14697b14e638114$var$TableView(props, ref) {
                 if (item.props.isSelectionCell) return(/*#__PURE__*/ $gyhAV$react.createElement($d14697b14e638114$var$TableSelectAllCell, {
                     column: item
                 }));
+                // TODO: consider this case, what if we have hidden headers and a empty table
                 if (item.props.hideHeader) return(/*#__PURE__*/ $gyhAV$react.createElement($gyhAV$TooltipTrigger, {
                     placement: "top",
                     trigger: "focus"
@@ -835,15 +837,18 @@ function $d14697b14e638114$var$TableView(props, ref) {
             setHorizontalScollbarVisible(bodyRef.current.clientHeight + 2 < bodyRef.current.offsetHeight);
         }
     }, []);
+    let { isFocusVisible: isFocusVisible , focusProps: focusProps  } = $gyhAV$useFocusRing();
+    let isEmpty = state.collection.size === 0;
     return(/*#__PURE__*/ $gyhAV$react.createElement($d14697b14e638114$var$TableContext.Provider, {
         value: {
             state: state,
             layout: layout,
             columnState: columnState,
-            headerRowHovered: headerRowHovered
+            headerRowHovered: headerRowHovered,
+            isEmpty: isEmpty
         }
     }, /*#__PURE__*/ $gyhAV$react.createElement($d14697b14e638114$var$TableVirtualizer, {
-        ...gridProps,
+        ...$gyhAV$mergeProps(gridProps, focusProps),
         ...styleProps,
         className: $gyhAV$classNames((/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports)), 'spectrum-Table', `spectrum-Table--${density}`, {
             'spectrum-Table--quiet': isQuiet,
@@ -861,11 +866,12 @@ function $d14697b14e638114$var$TableView(props, ref) {
         onVisibleRectChange: onVisibleRectChange,
         domRef: domRef,
         bodyRef: bodyRef,
+        isFocusVisible: isFocusVisible,
         getColumnWidth: columnState.getColumnWidth
     })));
 }
 // 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 , focusedKey: focusedKey , renderView: renderView , renderWrapper: renderWrapper , domRef: domRef , bodyRef: bodyRef , setTableWidth: setTableWidth , getColumnWidth: getColumnWidth , onVisibleRectChange: onVisibleRectChangeProp , ...otherProps }) {
+function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: collection , focusedKey: focusedKey , renderView: renderView , renderWrapper: renderWrapper , domRef: domRef , bodyRef: bodyRef , setTableWidth: setTableWidth , getColumnWidth: getColumnWidth , onVisibleRectChange: onVisibleRectChangeProp , isFocusVisible: isFocusVisible , ...otherProps }) {
     var ref;
     let { direction: direction  } = $gyhAV$useLocale();
     let headerRef = $gyhAV$useRef();
@@ -939,8 +945,10 @@ function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: c
         onLoadMore,
         isLoading
     ]);
-    return(/*#__PURE__*/ $gyhAV$react.createElement("div", {
-        ...$gyhAV$mergeProps(otherProps, virtualizerProps),
+    return(/*#__PURE__*/ $gyhAV$react.createElement($gyhAV$FocusScope, null, /*#__PURE__*/ $gyhAV$react.createElement("div", {
+        ...$gyhAV$mergeProps(otherProps, virtualizerProps, collection.size === 0 && {
+            tabIndex: 0
+        }),
         ref: domRef
     }, /*#__PURE__*/ $gyhAV$react.createElement("div", {
         role: "presentation",
@@ -956,7 +964,9 @@ function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: c
         ref: headerRef
     }, state.visibleViews[0]), /*#__PURE__*/ $gyhAV$react.createElement($gyhAV$ScrollView, {
         role: "presentation",
-        className: $gyhAV$classNames((/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports)), 'spectrum-Table-body'),
+        className: $gyhAV$classNames((/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports)), 'spectrum-Table-body', {
+            'focus-ring': isFocusVisible
+        }),
         style: {
             flex: 1
         },
@@ -970,7 +980,7 @@ function $d14697b14e638114$var$TableVirtualizer({ layout: layout , collection: c
         onScrollStart: state.startScrolling,
         onScrollEnd: state.endScrolling,
         onScroll: onScroll
-    }, state.visibleViews[1])));
+    }, state.visibleViews[1]))));
 }
 function $d14697b14e638114$var$TableHeader({ children: children , ...otherProps }) {
     let { rowGroupProps: rowGroupProps  } = $gyhAV$useTableRowGroup();
@@ -984,16 +994,23 @@ function $d14697b14e638114$var$TableColumnHeader(props) {
     var ref, ref1, ref2, ref3;
     let { column: column  } = props;
     let ref4 = $gyhAV$useRef(null);
-    let { state: state  } = $d14697b14e638114$export$3cb274deb6c2d854();
+    let { state: state , isEmpty: isEmpty  } = $d14697b14e638114$export$3cb274deb6c2d854();
+    let { pressProps: pressProps , isPressed: isPressed  } = $gyhAV$usePress({
+        isDisabled: isEmpty
+    });
     let { columnHeaderProps: columnHeaderProps  } = $gyhAV$useTableColumnHeader({
         node: column,
         isVirtualized: true
     }, state, ref4);
     let columnProps = column.props;
-    let { hoverProps: hoverProps , isHovered: isHovered  } = $gyhAV$useHover(props);
+    let { hoverProps: hoverProps , isHovered: isHovered  } = $gyhAV$useHover({
+        ...props,
+        isDisabled: isEmpty
+    });
     const allProps = [
         columnHeaderProps,
-        hoverProps
+        hoverProps,
+        pressProps
     ];
     return(/*#__PURE__*/ $gyhAV$react.createElement($gyhAV$FocusRing, {
         focusRingClass: $gyhAV$classNames((/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports)), 'focus-ring')
@@ -1001,6 +1018,7 @@ function $d14697b14e638114$var$TableColumnHeader(props) {
         ...$gyhAV$mergeProps(...allProps),
         ref: ref4,
         className: $gyhAV$classNames((/*@__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',
@@ -1018,10 +1036,12 @@ function $d14697b14e638114$var$TableColumnHeader(props) {
     }))));
 }
 let $d14697b14e638114$var$_TableColumnHeaderButton = (props, ref)=>{
+    let { isEmpty: isEmpty  } = $d14697b14e638114$export$3cb274deb6c2d854();
     let domRef = $gyhAV$useFocusableRef(ref);
     let { buttonProps: buttonProps  } = $gyhAV$useButton({
         ...props,
-        elementType: 'div'
+        elementType: 'div',
+        isDisabled: isEmpty
     }, domRef);
     return(/*#__PURE__*/ $gyhAV$react.createElement("div", {
         className: $gyhAV$classNames((/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports)), 'spectrum-Table-headCellContents')
@@ -1040,17 +1060,24 @@ function $d14697b14e638114$var$ResizableTableColumnHeader(props) {
     let ref9 = $gyhAV$useRef(null);
     let triggerRef = $gyhAV$useRef(null);
     let resizingRef = $gyhAV$useRef(null);
-    let { state: state , columnState: columnState , headerRowHovered: headerRowHovered  } = $d14697b14e638114$export$3cb274deb6c2d854();
+    let { state: state , columnState: columnState , headerRowHovered: headerRowHovered , isEmpty: isEmpty  } = $d14697b14e638114$export$3cb274deb6c2d854();
     let stringFormatter = $gyhAV$useLocalizedStringFormatter((/*@__PURE__*/$parcel$interopDefault($467944769c14687b$exports)));
+    let { pressProps: pressProps , isPressed: isPressed  } = $gyhAV$usePress({
+        isDisabled: isEmpty
+    });
     let { columnHeaderProps: columnHeaderProps  } = $gyhAV$useTableColumnHeader({
         node: column,
         isVirtualized: true,
         hasMenu: true
     }, state, ref9);
-    let { hoverProps: hoverProps , isHovered: isHovered  } = $gyhAV$useHover(props);
+    let { hoverProps: hoverProps , isHovered: isHovered  } = $gyhAV$useHover({
+        ...props,
+        isDisabled: isEmpty
+    });
     const allProps = [
         columnHeaderProps,
-        hoverProps
+        hoverProps,
+        pressProps
     ];
     let columnProps = column.props;
     if (columnProps.width && columnProps.allowsResizing) throw new Error('Controlled state is not yet supported with column resizing. Please use defaultWidth for uncontrolled column resizing or remove the allowsResizing prop.');
@@ -1097,13 +1124,14 @@ function $d14697b14e638114$var$ResizableTableColumnHeader(props) {
         columnState.currentlyResizingColumn,
         column.key
     ]);
-    let showResizer = headerRowHovered || columnState.currentlyResizingColumn != null;
+    let showResizer = !isEmpty && (headerRowHovered || columnState.currentlyResizingColumn != null);
     return(/*#__PURE__*/ $gyhAV$react.createElement($gyhAV$FocusRing, {
         focusRingClass: $gyhAV$classNames((/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports)), 'focus-ring')
     }, /*#__PURE__*/ $gyhAV$react.createElement("div", {
         ...$gyhAV$mergeProps(...allProps),
         ref: ref9,
         className: $gyhAV$classNames((/*@__PURE__*/$parcel$interopDefault($bd5d41f647a296c3$exports)), 'spectrum-Table-headCell', {
+            'is-active': isPressed,
             'is-resizable': columnProps.allowsResizing,
             'is-sortable': columnProps.allowsSorting,
             'is-sorted-desc': ((ref5 = state.sortDescriptor) === null || ref5 === void 0 ? void 0 : ref5.column) === column.key && ((ref6 = state.sortDescriptor) === null || ref6 === void 0 ? void 0 : ref6.direction) === 'descending',
@@ -1156,7 +1184,6 @@ function $d14697b14e638114$var$TableSelectAllCell({ column: column  }) {
             which for single selection will be "Select."
           */ isSingleSelectionMode && /*#__PURE__*/ $gyhAV$react.createElement($gyhAV$VisuallyHidden, null, checkboxProps['aria-label']), /*#__PURE__*/ $gyhAV$react.createElement($gyhAV$Checkbox, {
         ...checkboxProps,
-        isDisabled: isSingleSelectionMode,
         isEmphasized: true,
         UNSAFE_style: isSingleSelectionMode ? {
             visibility: 'hidden'