@pingux/astro 2.214.0 → 2.216.0-alpha.0

package/lib/cjs/components/OverlayPanel/OverlayPanel.js

@@ -14,6 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
+var _interactions = require("@react-aria/interactions");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
@@ -33,6 +34,11 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
     onClose = _useOverlayPanelState.onClose;
   var overlayPanelRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  (0, _react.useEffect)(function () {
+    if (isOpen) {
+      (0, _interactions.setInteractionModality)('keyboard');
+    }
+  }, [isOpen]);
 
   // this is code to avoid regressions -- implementations that do not use the
   // useMountTransition hook will not break, because this className gives the

package/lib/cjs/components/OverlayPanel/OverlayPanel.test.js

@@ -1,12 +1,29 @@
 "use strict";
 
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _interactions = require("@react-aria/interactions");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
 var _react2 = require("@emotion/react");
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+jest.mock('@react-aria/interactions', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('@react-aria/interactions')), {}, {
+    setInteractionModality: jest.fn()
+  });
+});
 var testId = 'test-overlayPanel';
 var defaultProps = {
   'data-testid': testId
@@ -154,4 +171,51 @@ test('triggerRef.current.focus() does not fire when key other than esc is presse
     charCode: 65
   });
   expect(focusFunction).not.toHaveBeenCalled();
+});
+test('sets interaction modality to keyboard when panel opens', function () {
+  getComponent({
+    isOpen: true,
+    children: (0, _react2.jsx)("div", null, "Test")
+  });
+  expect(_interactions.setInteractionModality).toHaveBeenCalledWith('keyboard');
+});
+test('does not set interaction modality to keyboard when panel is closed', function () {
+  _interactions.setInteractionModality.mockClear();
+  getComponent({
+    isOpen: false,
+    children: (0, _react2.jsx)("div", null, "Test")
+  });
+  expect(_interactions.setInteractionModality).not.toHaveBeenCalledWith('keyboard');
+});
+test('sets interaction modality to keyboard when panel transitions from closed to open', function () {
+  var _getComponent = getComponent({
+      isOpen: false,
+      children: (0, _react2.jsx)("div", null, "Test")
+    }),
+    rerender = _getComponent.rerender;
+  _interactions.setInteractionModality.mockClear();
+  rerender((0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({}, defaultProps, {
+    isOpen: true
+  }), (0, _react2.jsx)("div", null, "Test")));
+  expect(_interactions.setInteractionModality).toHaveBeenCalledWith('keyboard');
+});
+test('sets interaction modality to keyboard on re-open after close', function () {
+  var _getComponent2 = getComponent({
+      isOpen: true,
+      children: (0, _react2.jsx)("div", null, "Test")
+    }),
+    rerender = _getComponent2.rerender;
+  _interactions.setInteractionModality.mockClear();
+
+  // Close the panel
+  rerender((0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({}, defaultProps, {
+    isOpen: false
+  }), (0, _react2.jsx)("div", null, "Test")));
+  expect(_interactions.setInteractionModality).not.toHaveBeenCalledWith('keyboard');
+
+  // Re-open — modality must be forced to keyboard again
+  rerender((0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({}, defaultProps, {
+    isOpen: true
+  }), (0, _react2.jsx)("div", null, "Test")));
+  expect(_interactions.setInteractionModality).toHaveBeenCalledWith('keyboard');
 });

package/lib/cjs/components/Table/Table.mdx

@@ -5,10 +5,9 @@ import * as TableStories from './Table.stories';
 
 # Table
 
-Data tables display information in a grid-like format of rows and columns. 
-They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data. 
+The `Table` component (along with `TableCaption`, `TableHead`, `TableBody`, etc.) is a drop-in replacement for HTML table elements. This means it lacks internal state and logic. **NOTE:** For most cases, it’s recommended to use `TableBase` instead.
 
-Column header names describe the type of content displayed in each column. 
+Column header names describe the type of content displayed in each column.
 Each row contains data related to a single entity.
 
 Tables should:

package/lib/cjs/components/TableBase/Convenience/TableBaseEmptyState.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithAddButton = exports.Default = exports.Customization = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _default = exports["default"] = {
+  title: 'Components/TableBase/Convenience/TableBaseEmptyState',
+  component: _index.TableBaseEmptyState,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_storybookDocsLayout["default"], null);
+      }
+    }
+  },
+  argTypes: {
+    headerLabel: {
+      control: {
+        type: 'text'
+      }
+    },
+    descriptionLabel: {
+      control: {
+        type: 'text'
+      }
+    },
+    addButtonLabel: {
+      control: {
+        type: 'text'
+      }
+    },
+    defaultIcon: {
+      control: false
+    }
+  },
+  args: {
+    headerLabel: 'No items exist',
+    descriptionLabel: 'Take action by doing x, y, z'
+  }
+};
+var Default = exports.Default = function Default(args) {
+  return (0, _react2.jsx)(_index.TableBaseEmptyState, args);
+};
+var WithAddButton = exports.WithAddButton = function WithAddButton(args) {
+  return (0, _react2.jsx)(_index.TableBaseEmptyState, (0, _extends2["default"])({}, args, {
+    addButtonLabel: "Add Item"
+  }));
+};
+var Customization = exports.Customization = function Customization() {
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: false,
+    gap: "xl"
+  }, (0, _react2.jsx)(_index.TableBaseEmptyState, {
+    headerLabel: "No users found",
+    descriptionLabel: "Add your first user to get started.",
+    addButtonLabel: "New User"
+  }), (0, _react2.jsx)(_index.TableBaseEmptyState, {
+    headerLabel: "No results",
+    descriptionLabel: "Try adjusting your search or filters."
+  }), (0, _react2.jsx)(_index.TableBaseEmptyState, {
+    headerLabel: "Nothing here yet",
+    descriptionLabel: "Create a new entry to see it listed here.",
+    addButtonLabel: "Create Entry"
+  }));
+};

package/lib/cjs/components/TableBase/Customization/CustomEmptyState.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CustomEmptyState = void 0;
+var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
+var _index = require("../../../index");
+var _react = require("@emotion/react");
+var _default = exports["default"] = {
+  title: 'Components/TableBase/Customization',
+  component: _index.TableBase,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react.jsx)(_storybookDocsLayout["default"], null);
+      }
+    }
+  }
+};
+var headers = [{
+  key: 'name',
+  name: 'Name'
+}, {
+  key: 'email',
+  name: 'Email'
+}, {
+  key: 'status',
+  name: 'Status'
+}];
+var CustomEmptyState = exports.CustomEmptyState = function CustomEmptyState() {
+  return (0, _react.jsx)(_index.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react.jsx)(_index.TableBase, {
+    caption: "Custom empty state",
+    "aria-label": "table with custom empty state",
+    renderEmptyState: function renderEmptyState() {
+      return (0, _react.jsx)(_index.TableBaseEmptyState, {
+        headerLabel: "No resources found",
+        descriptionLabel: "Try adjusting your search or filters.",
+        addButtonLabel: "Add Resource"
+      });
+    }
+  }, (0, _react.jsx)(_index.THead, {
+    columns: headers
+  }, function (column) {
+    return (0, _react.jsx)(_index.Column, {
+      key: column.key,
+      minWidth: 200
+    }, column.name);
+  }), (0, _react.jsx)(_index.TBody, {
+    items: []
+  }, function () {
+    return (0, _react.jsx)(_index.Row, {
+      key: "unused"
+    }, function () {
+      return (0, _react.jsx)(_index.Cell, null, (0, _react.jsx)(_index.Text, null, "-"));
+    });
+  })));
+};

package/lib/cjs/components/TableBase/TableBase.js

@@ -15,11 +15,14 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _focus = require("@react-aria/focus");
@@ -30,13 +33,59 @@ var _visuallyHidden = require("@react-aria/visually-hidden");
 var _table2 = require("@react-stately/table");
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _TableBaseEmptyState = _interopRequireDefault(require("./TableBaseEmptyState"));
 var _react2 = require("@emotion/react");
-var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky", "onResizeStart", "onResize", "onResizeEnd"],
-  _excluded2 = ["caption"],
-  _excluded3 = ["type", "children", "className", "isSticky"];
+var _excluded = ["children", "items", "renderEmptyState", "loadingState"],
+  _excluded2 = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky", "loadingState", "renderEmptyState", "onResizeStart", "onResize", "onResizeEnd", "onRowAction"],
+  _excluded3 = ["caption"],
+  _excluded4 = ["type", "children", "className", "isSticky"]; // Strips react-stately collection props that must not reach the DOM tbody element.
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var omitTableBodyProps = function omitTableBodyProps(_ref) {
+  var children = _ref.children,
+    items = _ref.items,
+    renderEmptyState = _ref.renderEmptyState,
+    loadingState = _ref.loadingState,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return rest;
+};
+var LOADING_STATES = new _set["default"](['loading', 'sorting']);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var BoxCell = function BoxCell(props) {
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "td",
+    display: "table-cell"
+  }, props));
+};
+function LoadingOrEmptyState(_ref2) {
+  var _renderEmptyState;
+  var loadingState = _ref2.loadingState,
+    collectionSize = _ref2.collectionSize,
+    colSpan = _ref2.colSpan,
+    renderEmptyState = _ref2.renderEmptyState;
+  if (collectionSize > 0) return null;
+  if (loadingState && LOADING_STATES.has(loadingState)) {
+    return (0, _react2.jsx)(_.Box, {
+      as: "tr",
+      display: "table-row"
+    }, (0, _react2.jsx)(BoxCell, {
+      colSpan: colSpan
+    }, (0, _react2.jsx)(_.Loader, {
+      variant: "loader.withinDataTable"
+    })));
+  }
+  return (0, _react2.jsx)(_.Box, {
+    as: "tr",
+    display: "table-row"
+  }, (0, _react2.jsx)(BoxCell, {
+    colSpan: colSpan,
+    sx: {
+      textAlign: 'center'
+    }
+  }, (_renderEmptyState = renderEmptyState === null || renderEmptyState === void 0 ? void 0 : renderEmptyState()) !== null && _renderEmptyState !== void 0 ? _renderEmptyState : (0, _react2.jsx)(_TableBaseEmptyState["default"], null)));
+}
 var useHandleFocusRef = function useHandleFocusRef(ref) {
   _react["default"].useEffect(function () {
     var el = ref.current;
@@ -66,24 +115,96 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isStickyHeader = _props$isStickyHeader === void 0 ? false : _props$isStickyHeader,
     className = props.className,
     isLastColumnSticky = props.isLastColumnSticky,
+    loadingState = props.loadingState,
+    renderEmptyState = props.renderEmptyState,
     onResizeStart = props.onResizeStart,
     onResize = props.onResize,
     onResizeEnd = props.onResizeEnd,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    onRowAction = props.onRowAction,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
   var tableRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var headerRef = (0, _react.useRef)(null);
   var scrollRef = (0, _react.useRef)(null);
   var bodyRef = (0, _react.useRef)(null);
+  // Map of row key -> <tr> DOM element, used to focus the clicked row after onRowAction fires.
+  var rowRefMap = (0, _react.useRef)(new _map["default"]());
+  // Guard flag: set to true just before onRowAction fires so the subsequent blur
+  // event (caused by an OverlayPanel FocusScope stealing focus) does not clear
+  // activeRowKey prematurely. Resets to false after the blur handler runs.
+  var actionJustFired = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     tableWidth = _useState2[0],
     setTableWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    activeRowKey = _useState4[0],
+    setActiveRowKey = _useState4[1];
+  var registerRowRef = (0, _react.useCallback)(function (key, el) {
+    if (el) {
+      rowRefMap.current.set(key, el);
+    } else {
+      rowRefMap.current["delete"](key);
+    }
+  }, []);
+  var wrappedOnRowAction = (0, _react.useCallback)(function (key) {
+    // Toggle off if clicking the already-active row
+    setActiveRowKey(function (prev) {
+      return prev === key ? null : key;
+    });
+    // Signal that a row action just fired so handleTableBlur skips the clear.
+    // This prevents OverlayPanel's FocusScope autoFocus from triggering a false
+    // positive blur that would remove the active-row highlight.
+    actionJustFired.current = true;
+    onRowAction === null || onRowAction === void 0 || onRowAction(key);
+    // Move DOM focus to the clicked row's <tr> so React Aria can handle arrow-key
+    // navigation from that row after a mouse click.
+    var rowEl = rowRefMap.current.get(key);
+    if (rowEl) {
+      rowEl.focus();
+    }
+    // Reset the guard after the current event loop tick so any FocusScope
+    // autoFocus steal (which fires synchronously) is absorbed, but subsequent
+    // genuine blur events (Tab away, click outside) are not.
+    (0, _setTimeout2["default"])(function () {
+      actionJustFired.current = false;
+    }, 0);
+  }, [onRowAction]);
+
+  // Called when any row receives focus. If the newly focused row is different
+  // from the active row (set by a click), clear activeRowKey so arrow-key
+  // navigation does not leave stale active-row highlights on multiple rows.
+  // Skip when actionJustFired is true — that focus event is the programmatic
+  // rowEl.focus() inside wrappedOnRowAction, not user navigation.
+  var handleRowFocus = (0, _react.useCallback)(function (key) {
+    if (actionJustFired.current) return;
+    setActiveRowKey(function (prev) {
+      return prev !== null && prev !== key ? null : prev;
+    });
+  }, []);
+
+  // Clear activeRowKey when focus leaves the table entirely.
+  // Skip the clear if a row action just fired (e.g. OverlayPanel FocusScope
+  // autoFocus stealing focus) — that is not a genuine focus-out.
+  var handleTableBlur = (0, _react.useCallback)(function (e) {
+    if (actionJustFired.current) {
+      actionJustFired.current = false;
+      return;
+    }
+    var relatedTarget = e.relatedTarget;
+    var scrollEl = scrollRef.current;
+    var focusMovedOutside = !relatedTarget || !scrollEl || !scrollEl.contains(relatedTarget);
+    if (focusMovedOutside) {
+      setActiveRowKey(null);
+    }
+  }, []);
   var state = (0, _table2.useTableState)(_objectSpread(_objectSpread({}, props), {}, {
     showSelectionCheckboxes: hasSelectionCheckboxes || selectionMode === 'multiple' && selectionBehavior !== 'replace'
   }));
   var collection = state.collection;
   var _useTable = (0, _table.useTable)(_objectSpread(_objectSpread({}, props), {}, {
-      scrollRef: scrollRef
+      scrollRef: scrollRef,
+      onRowAction: onRowAction ? wrappedOnRowAction : undefined
     }), state, tableRef),
     gridProps = _useTable.gridProps;
   var getDefaultWidth = (0, _react.useCallback)(function (node) {
@@ -120,7 +241,8 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_.Box, {
-    ref: scrollRef
+    ref: scrollRef,
+    onBlur: handleTableBlur
   }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "table",
     display: "table",
@@ -133,13 +255,13 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: headerRef,
     type: "thead",
     isSticky: isStickyHeader
-  }, (0, _map["default"])(_context = collection.headerRows).call(_context, function (headerRow) {
+  }, (0, _map2["default"])(_context = collection.headerRows).call(_context, function (headerRow) {
     var _context2;
     return (0, _react2.jsx)(TableHeaderRow, {
       key: headerRow.key,
       item: headerRow,
       state: state
-    }, (0, _map["default"])(_context2 = (0, _from["default"])(headerRow.childNodes)).call(_context2, function (column) {
+    }, (0, _map2["default"])(_context2 = (0, _from["default"])(headerRow.childNodes)).call(_context2, function (column) {
       return column.props.isSelectionCell ? (0, _react2.jsx)(TableSelectAllCell, {
         key: column.key,
         column: column,
@@ -158,25 +280,23 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   })), (0, _react2.jsx)(TableRowGroup, (0, _extends2["default"])({
     ref: bodyRef,
     type: "tbody"
-  }, collection.body.props), collection.size === 0 && (0, _react2.jsx)(_.Box, {
-    as: "tr",
-    role: "row",
-    key: "loading",
-    "data-testid": "loading",
-    alignItems: "center",
-    justifyContent: "center",
-    px: "lg",
-    py: "md"
-  }, (0, _react2.jsx)(_.Loader, {
-    variant: "loader.withinDataTable"
-  })), (0, _map["default"])(_context3 = (0, _from["default"])(collection.body.childNodes)).call(_context3, function (row) {
+  }, omitTableBodyProps(collection.body.props)), (0, _react2.jsx)(LoadingOrEmptyState, {
+    loadingState: loadingState,
+    collectionSize: collection.size,
+    colSpan: collection.columns.length,
+    renderEmptyState: renderEmptyState
+  }), (0, _map2["default"])(_context3 = (0, _from["default"])(collection.body.childNodes)).call(_context3, function (row) {
     var _context4, _collection$getChildr, _collection$getChildr2;
     return (0, _react2.jsx)(TableRow, {
       key: row.key,
       item: row,
       state: state,
-      hasSelectionCheckboxes: hasSelectionCheckboxes
-    }, (0, _map["default"])(_context4 = (0, _from["default"])((_collection$getChildr = (_collection$getChildr2 = collection.getChildren) === null || _collection$getChildr2 === void 0 ? void 0 : _collection$getChildr2.call(collection, row.key)) !== null && _collection$getChildr !== void 0 ? _collection$getChildr : [])).call(_context4, function (cell) {
+      hasSelectionCheckboxes: hasSelectionCheckboxes,
+      hasActions: !!onRowAction,
+      isActiveRow: row.key === activeRowKey,
+      registerRef: registerRowRef,
+      onRowFocus: handleRowFocus
+    }, (0, _map2["default"])(_context4 = (0, _from["default"])((_collection$getChildr = (_collection$getChildr2 = collection.getChildren) === null || _collection$getChildr2 === void 0 ? void 0 : _collection$getChildr2.call(collection, row.key)) !== null && _collection$getChildr !== void 0 ? _collection$getChildr : [])).call(_context4, function (cell) {
       return cell.props.isSelectionCell ? (0, _react2.jsx)(TableCheckboxCell, {
         key: cell.key,
         cell: cell,
@@ -186,14 +306,15 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         key: cell.key,
         cell: cell,
         state: state,
-        layoutState: layoutState
+        layoutState: layoutState,
+        hasActions: !!onRowAction
       });
     }));
   }))));
 });
 var TableCaption = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var caption = props.caption,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded3);
   if (!caption) {
     return null;
   }
@@ -210,7 +331,7 @@ var TableRowGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     children = props.children,
     className = props.className,
     isSticky = props.isSticky,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded4);
   var _useTableRowGroup = (0, _table.useTableRowGroup)(),
     rowGroupProps = _useTableRowGroup.rowGroupProps;
   var _useStatusClasses2 = (0, _hooks.useStatusClasses)(className, {
@@ -354,8 +475,18 @@ function TableRow(props) {
     state = props.state,
     children = props.children,
     className = props.className,
-    hasSelectionCheckboxes = props.hasSelectionCheckboxes;
+    hasSelectionCheckboxes = props.hasSelectionCheckboxes,
+    hasActions = props.hasActions,
+    isActiveRow = props.isActiveRow,
+    registerRef = props.registerRef,
+    onRowFocus = props.onRowFocus;
   var ref = (0, _react.useRef)(null);
+
+  // Register this row's DOM element so wrappedOnRowAction can focus it programmatically.
+  var setRef = (0, _react.useCallback)(function (el) {
+    ref.current = el;
+    registerRef === null || registerRef === void 0 || registerRef(item.key, el);
+  }, [item.key, registerRef]);
   var _useTableRow = (0, _table.useTableRow)({
       node: item
     }, state, ref),
@@ -390,12 +521,18 @@ function TableRow(props) {
     e.preventDefault();
     state.selectionManager.toggleSelection(item.key);
   }, [isDisabled, item.key, state.selectionManager]);
+  var rowFocusProps = (0, _react.useCallback)(function (e) {
+    if (e.currentTarget === e.target) {
+      onRowFocus === null || onRowFocus === void 0 || onRowFocus(item.key);
+    }
+  }, [item.key, onRowFocus]);
   var _useStatusClasses5 = (0, _hooks.useStatusClasses)(className, {
       isSelected: isSelected,
       isHovered: isHovered,
       isPressed: isPressed,
-      isFocused: isFocusVisible,
-      isDisabled: isDisabled
+      isFocused: isFocusVisible || !!isActiveRow,
+      isDisabled: isDisabled,
+      'has-actions': hasActions
     }),
     classNames = _useStatusClasses5.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
@@ -404,16 +541,18 @@ function TableRow(props) {
     className: classNames,
     variant: "tableBase.row"
   }, (0, _utils.mergeProps)(rowProps, focusProps, hoverProps, pressProps, {
-    onKeyDown: enterKeyProps
+    onKeyDown: enterKeyProps,
+    onFocus: rowFocusProps
   }), {
-    ref: ref
+    ref: setRef
   }), children);
 }
 function TableCell(props) {
   var cell = props.cell,
     state = props.state,
     className = props.className,
-    layoutState = props.layoutState;
+    layoutState = props.layoutState,
+    hasActions = props.hasActions;
   var ref = (0, _react.useRef)(null);
   var _useTableCell = (0, _table.useTableCell)({
       node: cell
@@ -429,9 +568,15 @@ function TableCell(props) {
   useHandleFocusRef(ref);
 
   // Prevents pointer events reaching the row's press handler, allowing native text-selection drags.
+  // Skipped when the table has row actions so that clicks on cells bubble up
+  // and trigger onRowAction.
   var stopPointerPropagation = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
   }, []);
+  var pointerBlockers = hasActions ? {} : {
+    onPointerDown: stopPointerPropagation,
+    onMouseDown: stopPointerPropagation
+  };
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "td",
     display: "table-cell",
@@ -441,10 +586,7 @@ function TableCell(props) {
     sx: _objectSpread({
       width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
     }, cell.props.sx)
-  }, (0, _utils.mergeProps)({
-    onPointerDown: stopPointerPropagation,
-    onMouseDown: stopPointerPropagation
-  }, gridCellProps, focusProps, cell.props)), cell.rendered);
+  }, (0, _utils.mergeProps)(pointerBlockers, gridCellProps, focusProps, cell.props)), cell.rendered);
 }
 
 // Native checkboxes only toggle on Space, not Enter. This handler makes Enter