@pingux/astro 2.214.0 → 2.215.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/TableBase/TableBase.js

@@ -15,7 +15,9 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+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"));
@@ -31,7 +33,7 @@ var _table2 = require("@react-stately/table");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
-var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky", "onResizeStart", "onResize", "onResizeEnd"],
+var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky", "onResizeStart", "onResize", "onResizeEnd", "onRowAction"],
   _excluded2 = ["caption"],
   _excluded3 = ["type", "children", "className", "isSticky"];
 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); }
@@ -69,21 +71,91 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onResizeStart = props.onResizeStart,
     onResize = props.onResize,
     onResizeEnd = props.onResizeEnd,
+    onRowAction = props.onRowAction,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   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 +192,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 +206,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,
@@ -169,14 +242,18 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     py: "md"
   }, (0, _react2.jsx)(_.Loader, {
     variant: "loader.withinDataTable"
-  })), (0, _map["default"])(_context3 = (0, _from["default"])(collection.body.childNodes)).call(_context3, function (row) {
+  })), (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,7 +263,8 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         key: cell.key,
         cell: cell,
         state: state,
-        layoutState: layoutState
+        layoutState: layoutState,
+        hasActions: !!onRowAction
       });
     }));
   }))));
@@ -354,8 +432,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 +478,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 +498,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 +525,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 +543,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

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

@@ -17,13 +17,14 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithStickyHeader = exports.WithResizableColumns = exports.WithPagination = exports.WithMinMaxColumnWidth = exports.WithLastColumnSticky = exports.MultiSelection = exports.DynamicWithSorting = exports.Default = void 0;
+exports["default"] = exports.WithStickyHeader = exports.WithResizableColumns = exports.WithPagination = exports.WithMinMaxColumnWidth = exports.WithLastColumnSticky = exports.RowActions = exports.MultiSelection = exports.DynamicWithSorting = exports.Default = void 0;
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _isNan = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/number/is-nan"));
 var _parseFloat2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-float"));
 var _sort = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -469,4 +470,76 @@ var WithLastColumnSticky = exports.WithLastColumnSticky = function WithLastColum
       return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
     });
   })));
+};
+var RowActions = exports.RowActions = function RowActions() {
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
+    panelState = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var panelTriggerRef = (0, _react.useRef)(null);
+  var triggerRefAsButton = panelTriggerRef;
+  var selectedObject = (0, _find["default"])(objects).call(objects, function (obj) {
+    return String(obj.id) === String(selectedKey);
+  });
+  var handleClose = function handleClose() {
+    onClose(panelState, triggerRefAsButton);
+  };
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
+    "aria-label": "Row actions table",
+    selectionMode: "none",
+    onRowAction: function onRowAction(key) {
+      setSelectedKey(key);
+      panelState.open();
+    },
+    ref: panelTriggerRef
+  }, (0, _react2.jsx)(_.THead, {
+    columns: headers
+  }, function (column) {
+    return (0, _react2.jsx)(_.Column, {
+      key: column.key,
+      minWidth: 200
+    }, column.name);
+  }), (0, _react2.jsx)(_.TBody, {
+    items: objects
+  }, function (item) {
+    return (0, _react2.jsx)(_.Row, {
+      key: item.id
+    }, function (columnKey) {
+      return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
+    });
+  }))), (panelState.isOpen || panelState.isTransitioning) && (0, _react2.jsx)(_.OverlayPanel, {
+    isOpen: panelState.isOpen,
+    isTransitioning: panelState.isTransitioning,
+    state: panelState,
+    triggerRef: triggerRefAsButton,
+    sx: {
+      p: 0
+    }
+  }, (0, _react2.jsx)(_.PanelHeader, {
+    data: {
+      text: selectedObject ? selectedObject.type : '',
+      subtext: selectedObject ? selectedObject.date : ''
+    }
+  }, (0, _react2.jsx)(_.PanelHeaderCloseButton, {
+    onPress: handleClose
+  })), selectedObject && (0, _react2.jsx)(_.Box, {
+    sx: {
+      p: 'lg'
+    }
+  }, (0, _react2.jsx)(_.Text, null, "Type: ".concat(selectedObject.type)), (0, _react2.jsx)(_.Text, null, "Date: ".concat(selectedObject.date)), (0, _react2.jsx)(_.Text, null, "Additional Grant: ".concat(selectedObject.additional_grant)), (0, _react2.jsx)(_.Text, null, "Total Grant: ".concat(selectedObject.total_grant)))));
+};
+RowActions.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
 };

package/lib/cjs/components/TableBase/TableBase.styles.d.ts

@@ -190,6 +190,9 @@ declare const _default: {
             zIndex: number;
         };
         '&.is-hovered': {};
+        '&.has-actions.is-hovered:not(.is-disabled)': {
+            cursor: string;
+        };
         '&.is-selected': {};
         '&.is-disabled': {
             bg: string;

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

@@ -166,6 +166,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
   },