@pingux/astro 2.214.0 → 2.215.0-alpha.0

package/lib/cjs/types/tableBase.d.ts

@@ -22,6 +22,7 @@ export interface TableBaseProps<T extends object> extends TableProps<T>, Omit<Ba
     onResizeStart?: ResizeHandler;
     onResize?: ResizeHandler;
     onResizeEnd?: ResizeHandler;
+    onRowAction?: (key: Key) => void;
 }
 export interface TableRowGroupProps extends BaseProp {
     type: 'thead' | 'tbody';
@@ -57,12 +58,17 @@ export interface TableRowProps<T> extends BaseProp {
     children: ReactNode;
     className?: string;
     hasSelectionCheckboxes?: boolean;
+    hasActions?: boolean;
+    isActiveRow?: boolean;
+    registerRef?: (key: Key, el: HTMLElement | null) => void;
+    onRowFocus?: (key: Key) => void;
 }
 export interface TableCellProps<T> extends BaseProp {
     cell: GridNode<T>;
     state: TableState<T>;
     className?: string;
     layoutState: TableColumnResizeState<T>;
+    hasActions?: boolean;
 }
 export interface TableCheckboxCellProps<T> extends BaseProp {
     cell: GridNode<T>;

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -2,8 +2,9 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "isOpen", "isTransitioning", "onClose", "className", "state", "size", "triggerRef"];
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect } from 'react';
 import { FocusScope } from 'react-aria';
+import { setInteractionModality } from '@react-aria/interactions';
 import { Box } from '../..';
 import { useLocalOrForwardRef, useOverlayPanelState, useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -21,6 +22,11 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useOverlayPanelState = useOverlayPanelState(),
     onClose = _useOverlayPanelState.onClose;
   var overlayPanelRef = useLocalOrForwardRef(ref);
+  useEffect(function () {
+    if (isOpen) {
+      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/components/OverlayPanel/OverlayPanel.test.js

@@ -1,9 +1,26 @@
+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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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; }
 import React from 'react';
+import { setInteractionModality } from '@react-aria/interactions';
 import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import OverlayPanel from './OverlayPanel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+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
@@ -151,4 +168,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: ___EmotionJSX("div", null, "Test")
+  });
+  expect(setInteractionModality).toHaveBeenCalledWith('keyboard');
+});
+test('does not set interaction modality to keyboard when panel is closed', function () {
+  setInteractionModality.mockClear();
+  getComponent({
+    isOpen: false,
+    children: ___EmotionJSX("div", null, "Test")
+  });
+  expect(setInteractionModality).not.toHaveBeenCalledWith('keyboard');
+});
+test('sets interaction modality to keyboard when panel transitions from closed to open', function () {
+  var _getComponent = getComponent({
+      isOpen: false,
+      children: ___EmotionJSX("div", null, "Test")
+    }),
+    rerender = _getComponent.rerender;
+  setInteractionModality.mockClear();
+  rerender(___EmotionJSX(OverlayPanel, _extends({}, defaultProps, {
+    isOpen: true
+  }), ___EmotionJSX("div", null, "Test")));
+  expect(setInteractionModality).toHaveBeenCalledWith('keyboard');
+});
+test('sets interaction modality to keyboard on re-open after close', function () {
+  var _getComponent2 = getComponent({
+      isOpen: true,
+      children: ___EmotionJSX("div", null, "Test")
+    }),
+    rerender = _getComponent2.rerender;
+  setInteractionModality.mockClear();
+
+  // Close the panel
+  rerender(___EmotionJSX(OverlayPanel, _extends({}, defaultProps, {
+    isOpen: false
+  }), ___EmotionJSX("div", null, "Test")));
+  expect(setInteractionModality).not.toHaveBeenCalledWith('keyboard');
+
+  // Re-open — modality must be forced to keyboard again
+  rerender(___EmotionJSX(OverlayPanel, _extends({}, defaultProps, {
+    isOpen: true
+  }), ___EmotionJSX("div", null, "Test")));
+  expect(setInteractionModality).toHaveBeenCalledWith('keyboard');
 });

package/lib/components/TableBase/TableBase.js

@@ -10,13 +10,15 @@ 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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-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"];
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 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 _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';
@@ -59,21 +61,91 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
     onResizeStart = props.onResizeStart,
     onResize = props.onResize,
     onResizeEnd = props.onResizeEnd,
+    onRowAction = props.onRowAction,
     others = _objectWithoutProperties(props, _excluded);
   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 +182,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",
@@ -165,7 +238,11 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
       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,7 +253,8 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
         key: cell.key,
         cell: cell,
         state: state,
-        layoutState: layoutState
+        layoutState: layoutState,
+        hasActions: !!onRowAction
       });
     }));
   }))));
@@ -344,8 +422,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 +468,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 +488,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 +515,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 +533,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

@@ -26,12 +26,13 @@ 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";
+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, 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';
@@ -459,4 +460,76 @@ export var WithLastColumnSticky = function WithLastColumnSticky() {
       return ___EmotionJSX(Cell, null, item[columnKey]);
     });
   })));
+};
+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
   },