@pingux/astro 2.214.0 → 2.216.0-alpha.0

package/lib/components/TableBase/TableBase.js

@@ -6,17 +6,21 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky", "onResizeStart", "onResize", "onResizeEnd"],
-  _excluded2 = ["caption"],
-  _excluded3 = ["type", "children", "className", "isSticky"];
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+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"];
 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) { _defineProperty(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; }
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _Map from "@babel/runtime-corejs3/core-js-stable/map";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import React, { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover, usePress } from '@react-aria/interactions';
@@ -26,7 +30,54 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useTableColumnResizeState, useTableState } from '@react-stately/table';
 import { Box, CheckboxField, Icon, Loader, Text } from '../..';
 import { useGetTheme, useLocalOrForwardRef, useStatusClasses } from '../../hooks';
+import TableBaseEmptyState from './TableBaseEmptyState';
+
+// Strips react-stately collection props that must not reach the DOM tbody element.
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var omitTableBodyProps = function omitTableBodyProps(_ref) {
+  var children = _ref.children,
+    items = _ref.items,
+    renderEmptyState = _ref.renderEmptyState,
+    loadingState = _ref.loadingState,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return rest;
+};
+var LOADING_STATES = new _Set(['loading', 'sorting']);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var BoxCell = function BoxCell(props) {
+  return ___EmotionJSX(Box, _extends({
+    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 ___EmotionJSX(Box, {
+      as: "tr",
+      display: "table-row"
+    }, ___EmotionJSX(BoxCell, {
+      colSpan: colSpan
+    }, ___EmotionJSX(Loader, {
+      variant: "loader.withinDataTable"
+    })));
+  }
+  return ___EmotionJSX(Box, {
+    as: "tr",
+    display: "table-row"
+  }, ___EmotionJSX(BoxCell, {
+    colSpan: colSpan,
+    sx: {
+      textAlign: 'center'
+    }
+  }, (_renderEmptyState = renderEmptyState === null || renderEmptyState === void 0 ? void 0 : renderEmptyState()) !== null && _renderEmptyState !== void 0 ? _renderEmptyState : ___EmotionJSX(TableBaseEmptyState, null)));
+}
 var useHandleFocusRef = function useHandleFocusRef(ref) {
   React.useEffect(function () {
     var el = ref.current;
@@ -56,24 +107,96 @@ var TableBase = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
+    onRowAction = props.onRowAction,
+    others = _objectWithoutProperties(props, _excluded2);
   var tableRef = useLocalOrForwardRef(ref);
   var headerRef = useRef(null);
   var scrollRef = useRef(null);
   var bodyRef = useRef(null);
+  // Map of row key -> <tr> DOM element, used to focus the clicked row after onRowAction fires.
+  var rowRefMap = useRef(new _Map());
+  // 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 = useRef(false);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     tableWidth = _useState2[0],
     setTableWidth = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeRowKey = _useState4[0],
+    setActiveRowKey = _useState4[1];
+  var registerRowRef = useCallback(function (key, el) {
+    if (el) {
+      rowRefMap.current.set(key, el);
+    } else {
+      rowRefMap.current["delete"](key);
+    }
+  }, []);
+  var wrappedOnRowAction = 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.
+    _setTimeout(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 = 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 = 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 = useTableState(_objectSpread(_objectSpread({}, props), {}, {
     showSelectionCheckboxes: hasSelectionCheckboxes || selectionMode === 'multiple' && selectionBehavior !== 'replace'
   }));
   var collection = state.collection;
   var _useTable = useTable(_objectSpread(_objectSpread({}, props), {}, {
-      scrollRef: scrollRef
+      scrollRef: scrollRef,
+      onRowAction: onRowAction ? wrappedOnRowAction : undefined
     }), state, tableRef),
     gridProps = _useTable.gridProps;
   var getDefaultWidth = useCallback(function (node) {
@@ -110,7 +233,8 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, {
-    ref: scrollRef
+    ref: scrollRef,
+    onBlur: handleTableBlur
   }, ___EmotionJSX(Box, _extends({
     as: "table",
     display: "table",
@@ -148,24 +272,22 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
   })), ___EmotionJSX(TableRowGroup, _extends({
     ref: bodyRef,
     type: "tbody"
-  }, collection.body.props), collection.size === 0 && ___EmotionJSX(Box, {
-    as: "tr",
-    role: "row",
-    key: "loading",
-    "data-testid": "loading",
-    alignItems: "center",
-    justifyContent: "center",
-    px: "lg",
-    py: "md"
-  }, ___EmotionJSX(Loader, {
-    variant: "loader.withinDataTable"
-  })), _mapInstanceProperty(_context3 = _Array$from(collection.body.childNodes)).call(_context3, function (row) {
+  }, omitTableBodyProps(collection.body.props)), ___EmotionJSX(LoadingOrEmptyState, {
+    loadingState: loadingState,
+    collectionSize: collection.size,
+    colSpan: collection.columns.length,
+    renderEmptyState: renderEmptyState
+  }), _mapInstanceProperty(_context3 = _Array$from(collection.body.childNodes)).call(_context3, function (row) {
     var _context4, _collection$getChildr, _collection$getChildr2;
     return ___EmotionJSX(TableRow, {
       key: row.key,
       item: row,
       state: state,
-      hasSelectionCheckboxes: hasSelectionCheckboxes
+      hasSelectionCheckboxes: hasSelectionCheckboxes,
+      hasActions: !!onRowAction,
+      isActiveRow: row.key === activeRowKey,
+      registerRef: registerRowRef,
+      onRowFocus: handleRowFocus
     }, _mapInstanceProperty(_context4 = _Array$from((_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 ? ___EmotionJSX(TableCheckboxCell, {
         key: cell.key,
@@ -176,14 +298,15 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
         key: cell.key,
         cell: cell,
         state: state,
-        layoutState: layoutState
+        layoutState: layoutState,
+        hasActions: !!onRowAction
       });
     }));
   }))));
 });
 var TableCaption = /*#__PURE__*/forwardRef(function (props, ref) {
   var caption = props.caption,
-    others = _objectWithoutProperties(props, _excluded2);
+    others = _objectWithoutProperties(props, _excluded3);
   if (!caption) {
     return null;
   }
@@ -200,7 +323,7 @@ var TableRowGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     children = props.children,
     className = props.className,
     isSticky = props.isSticky,
-    others = _objectWithoutProperties(props, _excluded3);
+    others = _objectWithoutProperties(props, _excluded4);
   var _useTableRowGroup = useTableRowGroup(),
     rowGroupProps = _useTableRowGroup.rowGroupProps;
   var _useStatusClasses2 = useStatusClasses(className, {
@@ -344,8 +467,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 = useRef(null);
+
+  // Register this row's DOM element so wrappedOnRowAction can focus it programmatically.
+  var setRef = useCallback(function (el) {
+    ref.current = el;
+    registerRef === null || registerRef === void 0 || registerRef(item.key, el);
+  }, [item.key, registerRef]);
   var _useTableRow = useTableRow({
       node: item
     }, state, ref),
@@ -380,12 +513,18 @@ function TableRow(props) {
     e.preventDefault();
     state.selectionManager.toggleSelection(item.key);
   }, [isDisabled, item.key, state.selectionManager]);
+  var rowFocusProps = useCallback(function (e) {
+    if (e.currentTarget === e.target) {
+      onRowFocus === null || onRowFocus === void 0 || onRowFocus(item.key);
+    }
+  }, [item.key, onRowFocus]);
   var _useStatusClasses5 = useStatusClasses(className, {
       isSelected: isSelected,
       isHovered: isHovered,
       isPressed: isPressed,
-      isFocused: isFocusVisible,
-      isDisabled: isDisabled
+      isFocused: isFocusVisible || !!isActiveRow,
+      isDisabled: isDisabled,
+      'has-actions': hasActions
     }),
     classNames = _useStatusClasses5.classNames;
   return ___EmotionJSX(Box, _extends({
@@ -394,16 +533,18 @@ function TableRow(props) {
     className: classNames,
     variant: "tableBase.row"
   }, 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 = useRef(null);
   var _useTableCell = useTableCell({
       node: cell
@@ -419,9 +560,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 = useCallback(function (e) {
     e.stopPropagation();
   }, []);
+  var pointerBlockers = hasActions ? {} : {
+    onPointerDown: stopPointerPropagation,
+    onMouseDown: stopPointerPropagation
+  };
   return ___EmotionJSX(Box, _extends({
     as: "td",
     display: "table-cell",
@@ -431,10 +578,7 @@ function TableCell(props) {
     sx: _objectSpread({
       width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
     }, cell.props.sx)
-  }, mergeProps({
-    onPointerDown: stopPointerPropagation,
-    onMouseDown: stopPointerPropagation
-  }, gridCellProps, focusProps, cell.props)), cell.rendered);
+  }, mergeProps(pointerBlockers, gridCellProps, focusProps, cell.props)), cell.rendered);
 }
 
 // Native checkboxes only toggle on Space, not Enter. This handler makes Enter

package/lib/components/TableBase/TableBase.stories.js

@@ -1,3 +1,10 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
 import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
@@ -11,6 +18,7 @@ import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
 function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
 function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
@@ -26,27 +34,31 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import _Number$isNaN from "@babel/runtime-corejs3/core-js-stable/number/is-nan";
 import _parseFloat from "@babel/runtime-corejs3/core-js-stable/parse-float";
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
-import React, { useState } from 'react';
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+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) { _defineProperty(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; }
+import React, { useRef, useState } from 'react';
 import { useCollator } from '@react-aria/i18n';
 import { useAsyncList } from '@react-stately/data';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Badge, Box, Card, Cell, Column, Pagination, PaginationProvider, Row, TableBase, TBody, Text, THead } from '../..';
-import { usePaginationState } from '../../hooks';
+import { Badge, Box, Card, Cell, Column, OverlayPanel, OverlayProvider, Pagination, PaginationProvider, PanelHeader, PanelHeaderCloseButton, Row, TableBase, TableBaseEmptyState, TBody, Text, THead } from '../..';
+import { useOverlayPanelState, usePaginationState } from '../../hooks';
 import { items as listData } from '../../utils/devUtils/constants/items';
 import TableReadme from './TableBase.mdx';
-import { tableBaseArgTypes } from './tableBaseAttributes';
+import { tableBaseArgs, tableBaseArgTypes } from './tableBaseAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/TableBase',
   component: TableBase,
+  argTypes: tableBaseArgTypes,
+  args: _objectSpread({}, tableBaseArgs),
   parameters: {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TableReadme, null), ___EmotionJSX(DocsLayout, null));
       }
     }
-  },
-  argTypes: tableBaseArgTypes
+  }
 };
 var headers = [{
   key: 'type',
@@ -87,28 +99,28 @@ var statusVariant = {
   Active: 'tableBaseBadge.healthy',
   Inactive: 'tableBaseBadge.secondary'
 };
-export var Default = function Default() {
-  return ___EmotionJSX(Card, {
-    variant: "cards.tableWrapper"
-  }, ___EmotionJSX(TableBase, {
-    caption: "Lorem ipsum",
-    "aria-label": "table"
-  }, ___EmotionJSX(THead, {
-    columns: headers
-  }, function (column) {
-    return ___EmotionJSX(Column, {
-      key: column.key,
-      minWidth: 200
-    }, column.name);
-  }), ___EmotionJSX(TBody, {
-    items: objects
-  }, function (item) {
-    return ___EmotionJSX(Row, {
-      key: item.id
-    }, function (columnKey) {
-      return ___EmotionJSX(Cell, null, item[columnKey]);
-    });
-  })));
+export var Default = {
+  render: function render(args) {
+    var isEmpty = args.loadingState === 'loading' || args.loadingState === 'sorting';
+    return ___EmotionJSX(Card, {
+      variant: "cards.tableWrapper"
+    }, ___EmotionJSX(TableBase, args, ___EmotionJSX(THead, {
+      columns: headers
+    }, function (column) {
+      return ___EmotionJSX(Column, {
+        key: column.key,
+        minWidth: 200
+      }, column.name);
+    }), ___EmotionJSX(TBody, {
+      items: isEmpty ? [] : objects
+    }, function (item) {
+      return ___EmotionJSX(Row, {
+        key: item.id
+      }, function (columnKey) {
+        return ___EmotionJSX(Cell, null, item[columnKey]);
+      });
+    })));
+  }
 };
 export var MultiSelection = function MultiSelection() {
   var _React$useState = React.useState(new _Set(['1', '3'])),
@@ -459,4 +471,184 @@ export var WithLastColumnSticky = function WithLastColumnSticky() {
       return ___EmotionJSX(Cell, null, item[columnKey]);
     });
   })));
+};
+export var WithLoadingState = function WithLoadingState() {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table",
+    loadingState: "loading"
+  }, ___EmotionJSX(THead, {
+    columns: headers
+  }, function (column) {
+    return ___EmotionJSX(Column, {
+      key: column.key,
+      minWidth: 200
+    }, column.name);
+  }), ___EmotionJSX(TBody, {
+    items: []
+  }, function () {
+    return ___EmotionJSX(Row, {
+      key: "unused"
+    }, function () {
+      return ___EmotionJSX(Cell, null, "Hello 0");
+    });
+  })));
+};
+export var WithEmptyState = function WithEmptyState() {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
+    caption: "Custom empty state",
+    "aria-label": "table with custom empty state",
+    renderEmptyState: function renderEmptyState() {
+      return ___EmotionJSX("div", null, "No data available");
+    }
+  }, ___EmotionJSX(THead, {
+    columns: headers
+  }, function (column) {
+    return ___EmotionJSX(Column, {
+      key: column.key,
+      minWidth: 200
+    }, column.name);
+  }), ___EmotionJSX(TBody, {
+    items: []
+  }, function () {
+    return ___EmotionJSX(Row, {
+      key: "unused"
+    }, function () {
+      return ___EmotionJSX(Cell, null, "Hello 2");
+    });
+  })));
+};
+export var DefaultEmptyState = function DefaultEmptyState() {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
+    caption: "Default empty state",
+    "aria-label": "table with default empty state"
+  }, ___EmotionJSX(THead, {
+    columns: headers
+  }, function (column) {
+    return ___EmotionJSX(Column, {
+      key: column.key,
+      minWidth: 200
+    }, column.name);
+  }), ___EmotionJSX(TBody, {
+    items: []
+  }, function () {
+    return ___EmotionJSX(Row, {
+      key: "unused"
+    }, function () {
+      return ___EmotionJSX(Cell, null, "Hello 1");
+    });
+  })));
+};
+export var DefaultEmptyStateWithButton = function DefaultEmptyStateWithButton() {
+  var handleAddItem = function handleAddItem() {
+    // eslint-disable-next-line no-console
+    console.log('Add button clicked!');
+  };
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
+    caption: "Empty state with action button",
+    "aria-label": "table with empty state and action button",
+    renderEmptyState: function renderEmptyState() {
+      return ___EmotionJSX(TableBaseEmptyState, {
+        headerLabel: "No items available",
+        descriptionLabel: "Click the button below to add a new item",
+        addButtonLabel: "Add Item",
+        onAddButtonPress: handleAddItem
+      });
+    }
+  }, ___EmotionJSX(THead, {
+    columns: headers
+  }, function (column) {
+    return ___EmotionJSX(Column, {
+      key: column.key,
+      minWidth: 200
+    }, column.name);
+  }), ___EmotionJSX(TBody, {
+    items: []
+  }, function () {
+    return ___EmotionJSX(Row, {
+      key: "unused"
+    }, function () {
+      return ___EmotionJSX(Cell, null, "Hello 3");
+    });
+  })));
+};
+export var RowActions = function RowActions() {
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var _useOverlayPanelState = useOverlayPanelState(),
+    panelState = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var panelTriggerRef = useRef(null);
+  var triggerRefAsButton = panelTriggerRef;
+  var selectedObject = _findInstanceProperty(objects).call(objects, function (obj) {
+    return String(obj.id) === String(selectedKey);
+  });
+  var handleClose = function handleClose() {
+    onClose(panelState, triggerRefAsButton);
+  };
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
+    "aria-label": "Row actions table",
+    selectionMode: "none",
+    onRowAction: function onRowAction(key) {
+      setSelectedKey(key);
+      panelState.open();
+    },
+    ref: panelTriggerRef
+  }, ___EmotionJSX(THead, {
+    columns: headers
+  }, function (column) {
+    return ___EmotionJSX(Column, {
+      key: column.key,
+      minWidth: 200
+    }, column.name);
+  }), ___EmotionJSX(TBody, {
+    items: objects
+  }, function (item) {
+    return ___EmotionJSX(Row, {
+      key: item.id
+    }, function (columnKey) {
+      return ___EmotionJSX(Cell, null, item[columnKey]);
+    });
+  }))), (panelState.isOpen || panelState.isTransitioning) && ___EmotionJSX(OverlayPanel, {
+    isOpen: panelState.isOpen,
+    isTransitioning: panelState.isTransitioning,
+    state: panelState,
+    triggerRef: triggerRefAsButton,
+    sx: {
+      p: 0
+    }
+  }, ___EmotionJSX(PanelHeader, {
+    data: {
+      text: selectedObject ? selectedObject.type : '',
+      subtext: selectedObject ? selectedObject.date : ''
+    }
+  }, ___EmotionJSX(PanelHeaderCloseButton, {
+    onPress: handleClose
+  })), selectedObject && ___EmotionJSX(Box, {
+    sx: {
+      p: 'lg'
+    }
+  }, ___EmotionJSX(Text, null, "Type: ".concat(selectedObject.type)), ___EmotionJSX(Text, null, "Date: ".concat(selectedObject.date)), ___EmotionJSX(Text, null, "Additional Grant: ".concat(selectedObject.additional_grant)), ___EmotionJSX(Text, null, "Total Grant: ".concat(selectedObject.total_grant)))));
+};
+RowActions.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
 };

package/lib/components/TableBase/TableBase.styles.js

@@ -159,6 +159,9 @@ var row = {
   '&.is-hovered': {
     // This is the hover state for the row
   },
+  '&.has-actions.is-hovered:not(.is-disabled)': {
+    cursor: 'pointer'
+  },
   '&.is-selected': {
     // This is the selected state for the row
   },