@pingux/astro 2.238.0 → 2.240.0-alpha.0

package/lib/components/TableBase/TableBase.js

@@ -1,26 +1,4 @@
-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 _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 = ["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';
@@ -34,29 +12,26 @@ 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']);
+const omitTableBodyProps = ({
+  children,
+  items,
+  renderEmptyState,
+  loadingState,
+  ...rest
+}) => rest;
+const 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;
+const BoxCell = props => ___EmotionJSX(Box, _extends({
+  as: "td",
+  display: "table-cell"
+}, props));
+function LoadingOrEmptyState({
+  loadingState,
+  collectionSize,
+  colSpan,
+  renderEmptyState
+}) {
   if (collectionSize > 0) return null;
   if (loadingState && LOADING_STATES.has(loadingState)) {
     return ___EmotionJSX(Box, {
@@ -76,89 +51,81 @@ function LoadingOrEmptyState(_ref2) {
     sx: {
       textAlign: 'center'
     }
-  }, (_renderEmptyState = renderEmptyState === null || renderEmptyState === void 0 ? void 0 : renderEmptyState()) !== null && _renderEmptyState !== void 0 ? _renderEmptyState : ___EmotionJSX(TableBaseEmptyState, null)));
+  }, renderEmptyState?.() ?? ___EmotionJSX(TableBaseEmptyState, null)));
 }
-var useHandleFocusRef = function useHandleFocusRef(ref) {
-  React.useEffect(function () {
-    var el = ref.current;
+const useHandleFocusRef = ref => {
+  React.useEffect(() => {
+    const el = ref.current;
     if (!el) return;
-    var handleFocus = function handleFocus() {
-      var container = el.closest('.last-column-sticky');
+    const handleFocus = () => {
+      const container = el.closest('.last-column-sticky');
       if (!container) return;
-      var cellRect = el.getBoundingClientRect();
-      var contRect = container.getBoundingClientRect();
+      const cellRect = el.getBoundingClientRect();
+      const contRect = container.getBoundingClientRect();
       container.scrollLeft = cellRect.left + contRect.width;
     };
     el.addEventListener('focus', handleFocus);
 
     // eslint-disable-next-line consistent-return
-    return function () {
+    return () => {
       el.removeEventListener('focus', handleFocus);
     };
   }, []);
 };
-var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context, _context3;
-  var caption = props.caption,
-    selectionMode = props.selectionMode,
-    selectionBehavior = props.selectionBehavior,
-    hasSelectionCheckboxes = props.hasSelectionCheckboxes,
-    _props$isStickyHeader = props.isStickyHeader,
-    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,
-    onRowAction = props.onRowAction,
-    others = _objectWithoutProperties(props, _excluded2);
-  var tableRef = useLocalOrForwardRef(ref);
-  var headerRef = useRef(null);
-  var scrollRef = useRef(null);
-  var bodyRef = useRef(null);
+const TableBase = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    caption,
+    selectionMode,
+    selectionBehavior,
+    hasSelectionCheckboxes,
+    isStickyHeader = false,
+    className,
+    isLastColumnSticky,
+    loadingState,
+    renderEmptyState,
+    onResizeStart,
+    onResize,
+    onResizeEnd,
+    onRowAction,
+    ...others
+  } = props;
+  const tableRef = useLocalOrForwardRef(ref);
+  const headerRef = useRef(null);
+  const scrollRef = useRef(null);
+  const bodyRef = useRef(null);
   // Map of row key -> <tr> DOM element, used to focus the clicked row after onRowAction fires.
-  var rowRefMap = useRef(new _Map());
+  const 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) {
+  const actionJustFired = useRef(false);
+  const [tableWidth, setTableWidth] = useState(0);
+  const [activeRowKey, setActiveRowKey] = useState(null);
+  const registerRowRef = useCallback((key, el) => {
     if (el) {
       rowRefMap.current.set(key, el);
     } else {
-      rowRefMap.current["delete"](key);
+      rowRefMap.current.delete(key);
     }
   }, []);
-  var wrappedOnRowAction = useCallback(function (key) {
+  const wrappedOnRowAction = useCallback(key => {
     // Toggle off if clicking the already-active row
-    setActiveRowKey(function (prev) {
-      return prev === key ? null : key;
-    });
+    setActiveRowKey(prev => 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);
+    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);
+    const 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 () {
+    setTimeout(() => {
       actionJustFired.current = false;
     }, 0);
   }, [onRowAction]);
@@ -168,70 +135,72 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
   // 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) {
+  const handleRowFocus = useCallback(key => {
     if (actionJustFired.current) return;
-    setActiveRowKey(function (prev) {
-      return prev !== null && prev !== key ? null : prev;
-    });
+    setActiveRowKey(prev => 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) {
+  const handleTableBlur = useCallback(e => {
     if (actionJustFired.current) {
       actionJustFired.current = false;
       return;
     }
-    var relatedTarget = e.relatedTarget;
-    var scrollEl = scrollRef.current;
-    var focusMovedOutside = !relatedTarget || !scrollEl || !scrollEl.contains(relatedTarget);
+    const relatedTarget = e.relatedTarget;
+    const scrollEl = scrollRef.current;
+    const focusMovedOutside = !relatedTarget || !scrollEl || !scrollEl.contains(relatedTarget);
     if (focusMovedOutside) {
       setActiveRowKey(null);
     }
   }, []);
-  var state = useTableState(_objectSpread(_objectSpread({}, props), {}, {
+  const state = useTableState({
+    ...props,
     showSelectionCheckboxes: hasSelectionCheckboxes || selectionMode === 'multiple' && selectionBehavior !== 'replace'
-  }));
-  var collection = state.collection;
-  var _useTable = useTable(_objectSpread(_objectSpread({}, props), {}, {
-      scrollRef: scrollRef,
-      onRowAction: onRowAction ? wrappedOnRowAction : undefined
-    }), state, tableRef),
-    gridProps = _useTable.gridProps;
-  var getDefaultWidth = useCallback(function (node) {
+  });
+  const {
+    collection
+  } = state;
+  const {
+    gridProps
+  } = useTable({
+    ...props,
+    scrollRef,
+    onRowAction: onRowAction ? wrappedOnRowAction : undefined
+  }, state, tableRef);
+  const getDefaultWidth = useCallback(node => {
     if (node.props.isSelectionCell) {
       return 70;
     }
     return undefined;
   }, []);
-  var getDefaultMinWidth = useCallback(function (node) {
+  const getDefaultMinWidth = useCallback(node => {
     if (node.props.isSelectionCell) {
       return 70;
     }
     return 100;
   }, []);
-  var layoutState = useTableColumnResizeState({
-    getDefaultWidth: getDefaultWidth,
-    getDefaultMinWidth: getDefaultMinWidth,
-    tableWidth: tableWidth
+  const layoutState = useTableColumnResizeState({
+    getDefaultWidth,
+    getDefaultMinWidth,
+    tableWidth
   }, state);
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     if (tableRef && tableRef.current) {
       setTableWidth(tableRef.current.clientWidth);
     }
   }, [tableRef]);
   useResizeObserver({
     ref: tableRef,
-    onResize: function onResize() {
-      return setTableWidth(tableRef.current.clientWidth);
-    }
+    onResize: () => setTableWidth(tableRef.current.clientWidth)
+  });
+  const {
+    classNames
+  } = useStatusClasses(className, {
+    'has-caption': !!caption,
+    'is-last-column-sticky': isLastColumnSticky
   });
-  var _useStatusClasses = useStatusClasses(className, {
-      'has-caption': !!caption,
-      'is-last-column-sticky': isLastColumnSticky
-    }),
-    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, {
     ref: scrollRef,
     onBlur: handleTableBlur
@@ -247,29 +216,24 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: headerRef,
     type: "thead",
     isSticky: isStickyHeader
-  }, _mapInstanceProperty(_context = collection.headerRows).call(_context, function (headerRow) {
-    var _context2;
-    return ___EmotionJSX(TableHeaderRow, {
-      key: headerRow.key,
-      item: headerRow,
-      state: state
-    }, _mapInstanceProperty(_context2 = _Array$from(headerRow.childNodes)).call(_context2, function (column) {
-      return column.props.isSelectionCell ? ___EmotionJSX(TableSelectAllCell, {
-        key: column.key,
-        column: column,
-        state: state,
-        layoutState: layoutState
-      }) : ___EmotionJSX(TableColumnHeader, {
-        key: column.key,
-        column: column,
-        state: state,
-        layoutState: layoutState,
-        onResizeStart: onResizeStart,
-        onResize: onResize,
-        onResizeEnd: onResizeEnd
-      });
-    }));
-  })), ___EmotionJSX(TableRowGroup, _extends({
+  }, collection.headerRows.map(headerRow => ___EmotionJSX(TableHeaderRow, {
+    key: headerRow.key,
+    item: headerRow,
+    state: state
+  }, Array.from(headerRow.childNodes).map(column => column.props.isSelectionCell ? ___EmotionJSX(TableSelectAllCell, {
+    key: column.key,
+    column: column,
+    state: state,
+    layoutState: layoutState
+  }) : ___EmotionJSX(TableColumnHeader, {
+    key: column.key,
+    column: column,
+    state: state,
+    layoutState: layoutState,
+    onResizeStart: onResizeStart,
+    onResize: onResize,
+    onResizeEnd: onResizeEnd
+  }))))), ___EmotionJSX(TableRowGroup, _extends({
     ref: bodyRef,
     type: "tbody"
   }, omitTableBodyProps(collection.body.props)), ___EmotionJSX(LoadingOrEmptyState, {
@@ -277,36 +241,33 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
     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,
-      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,
-        cell: cell,
-        state: state,
-        layoutState: layoutState
-      }) : ___EmotionJSX(TableCell, {
-        key: cell.key,
-        cell: cell,
-        state: state,
-        layoutState: layoutState,
-        hasActions: !!onRowAction
-      });
-    }));
-  }))));
+  }), Array.from(collection.body.childNodes).map(row => ___EmotionJSX(TableRow, {
+    key: row.key,
+    item: row,
+    state: state,
+    hasSelectionCheckboxes: hasSelectionCheckboxes,
+    hasActions: !!onRowAction,
+    isActiveRow: row.key === activeRowKey,
+    registerRef: registerRowRef,
+    onRowFocus: handleRowFocus
+  }, Array.from(collection.getChildren?.(row.key) ?? []).map(cell => cell.props.isSelectionCell ? ___EmotionJSX(TableCheckboxCell, {
+    key: cell.key,
+    cell: cell,
+    state: state,
+    layoutState: layoutState
+  }) : ___EmotionJSX(TableCell, {
+    key: cell.key,
+    cell: cell,
+    state: state,
+    layoutState: layoutState,
+    hasActions: !!onRowAction
+  })))))));
 });
-var TableCaption = /*#__PURE__*/forwardRef(function (props, ref) {
-  var caption = props.caption,
-    others = _objectWithoutProperties(props, _excluded3);
+const TableCaption = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    caption,
+    ...others
+  } = props;
   if (!caption) {
     return null;
   }
@@ -318,36 +279,43 @@ var TableCaption = /*#__PURE__*/forwardRef(function (props, ref) {
     textAlign: "left"
   }, others), caption);
 });
-var TableRowGroup = /*#__PURE__*/forwardRef(function (props, ref) {
-  var type = props.type,
-    children = props.children,
-    className = props.className,
-    isSticky = props.isSticky,
-    others = _objectWithoutProperties(props, _excluded4);
-  var _useTableRowGroup = useTableRowGroup(),
-    rowGroupProps = _useTableRowGroup.rowGroupProps;
-  var _useStatusClasses2 = useStatusClasses(className, {
-      isSticky: isSticky && type === 'thead'
-    }),
-    classNames = _useStatusClasses2.classNames;
+const TableRowGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    type,
+    children,
+    className,
+    isSticky,
+    ...others
+  } = props;
+  const {
+    rowGroupProps
+  } = useTableRowGroup();
+  const {
+    classNames
+  } = useStatusClasses(className, {
+    isSticky: isSticky && type === 'thead'
+  });
   return ___EmotionJSX(Box, _extends({
     as: type,
     display: type === 'thead' ? 'table-header-group' : 'table-row-group',
     ref: ref,
     className: classNames,
-    variant: "tableBase.".concat(type),
+    variant: `tableBase.${type}`,
     tabIndex: "0"
   }, rowGroupProps, others), children);
 });
 function TableHeaderRow(props) {
-  var item = props.item,
-    state = props.state,
-    children = props.children;
-  var ref = useRef(null);
-  var _useTableHeaderRow = useTableHeaderRow({
-      node: item
-    }, state, ref),
-    rowProps = _useTableHeaderRow.rowProps;
+  const {
+    item,
+    state,
+    children
+  } = props;
+  const ref = useRef(null);
+  const {
+    rowProps
+  } = useTableHeaderRow({
+    node: item
+  }, state, ref);
   return ___EmotionJSX(Box, _extends({
     as: "tr",
     display: "table-row"
@@ -356,37 +324,42 @@ function TableHeaderRow(props) {
   }), children);
 }
 function Resizer(props) {
-  var column = props.column,
-    layoutState = props.layoutState,
-    triggerRef = props.triggerRef,
-    onResizeStart = props.onResizeStart,
-    onResize = props.onResize,
-    onResizeEnd = props.onResizeEnd;
-  var ref = useRef(null);
-  var _useTableColumnResize = useTableColumnResize({
-      column: column,
-      'aria-label': "".concat(column.textValue, " column width"),
-      triggerRef: triggerRef,
-      onResizeStart: onResizeStart,
-      onResize: onResize,
-      onResizeEnd: onResizeEnd
-    }, layoutState, ref),
-    resizerProps = _useTableColumnResize.resizerProps,
-    inputProps = _useTableColumnResize.inputProps,
-    isResizing = _useTableColumnResize.isResizing;
-  var _useFocusRing = useFocusRing(),
-    isFocusVisible = _useFocusRing.isFocusVisible,
-    focusProps = _useFocusRing.focusProps;
+  const {
+    column,
+    layoutState,
+    triggerRef,
+    onResizeStart,
+    onResize,
+    onResizeEnd
+  } = props;
+  const ref = useRef(null);
+  const {
+    resizerProps,
+    inputProps,
+    isResizing
+  } = useTableColumnResize({
+    column,
+    'aria-label': `${column.textValue} column width`,
+    triggerRef,
+    onResizeStart,
+    onResize,
+    onResizeEnd
+  }, layoutState, ref);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing();
 
   // The input must be nested inside the Box that carries resizerProps so that
   // keyboard events fired on the input (Enter to start resize, Escape/Tab to
   // end it) bubble up to the element with the keyboard handlers.
 
-  var _useStatusClasses3 = useStatusClasses('resizer', {
-      isFocused: isFocusVisible,
-      isResizing: isResizing
-    }),
-    classNames = _useStatusClasses3.classNames;
+  const {
+    classNames
+  } = useStatusClasses('resizer', {
+    isFocused: isFocusVisible,
+    isResizing
+  });
   return ___EmotionJSX(Box, _extends({
     role: "presentation",
     variant: "tableBase.resizer",
@@ -396,37 +369,43 @@ function Resizer(props) {
   }, mergeProps(inputProps, focusProps))));
 }
 function TableColumnHeader(props) {
-  var _column$props, _column$props2;
-  var column = props.column,
-    state = props.state,
-    className = props.className,
-    layoutState = props.layoutState,
-    onResizeStart = props.onResizeStart,
-    onResize = props.onResize,
-    onResizeEnd = props.onResizeEnd;
-  var ref = useRef(null);
-  var _useTableColumnHeader = useTableColumnHeader({
-      node: column
-    }, state, ref),
-    columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
+  const {
+    column,
+    state,
+    className,
+    layoutState,
+    onResizeStart,
+    onResize,
+    onResizeEnd
+  } = props;
+  const ref = useRef(null);
+  const {
+    columnHeaderProps
+  } = useTableColumnHeader({
+    node: column
+  }, state, ref);
 
   // within: true catches keyboard focus on the resizer <input> child so the
   // <th> shows its focus ring even when the child is the active element.
-  var _useFocusRing2 = useFocusRing({
-      within: true
-    }),
-    isFocusVisible = _useFocusRing2.isFocusVisible,
-    focusProps = _useFocusRing2.focusProps;
-  var allowsSorting = (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.allowsSorting;
-  var allowsResizing = (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.allowsResizing;
-  var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
-  var Ascending = icons.Ascending,
-    Descending = icons.Descending;
-  var sortDescriptor = state.sortDescriptor;
-  var isSortedAscending = (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.column) === column.key && (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending';
-  var arrowIcon = isSortedAscending ? Ascending : Descending;
-  var sortIcon = ___EmotionJSX(Icon, {
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing({
+    within: true
+  });
+  const allowsSorting = column.props?.allowsSorting;
+  const allowsResizing = column.props?.allowsResizing;
+  const {
+    icons
+  } = useGetTheme();
+  const {
+    Ascending,
+    Descending
+  } = icons;
+  const sortDescriptor = state.sortDescriptor;
+  const isSortedAscending = sortDescriptor?.column === column.key && sortDescriptor?.direction === 'ascending';
+  const arrowIcon = isSortedAscending ? Ascending : Descending;
+  const sortIcon = ___EmotionJSX(Icon, {
     icon: arrowIcon,
     size: "xs",
     "aria-hidden": "true",
@@ -434,10 +413,11 @@ function TableColumnHeader(props) {
       name: isSortedAscending ? 'Sort ascending' : 'Sort descending'
     }
   });
-  var _useStatusClasses4 = useStatusClasses(className, {
-      isFocused: isFocusVisible
-    }),
-    classNames = _useStatusClasses4.classNames;
+  const {
+    classNames
+  } = useStatusClasses(className, {
+    isFocused: isFocusVisible
+  });
   useHandleFocusRef(ref);
   return ___EmotionJSX(Box, _extends({
     as: "th",
@@ -445,10 +425,11 @@ function TableColumnHeader(props) {
     ref: ref,
     variant: "tableBase.head",
     className: classNames,
-    sx: _objectSpread({
-      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key),
-      position: 'relative'
-    }, column.props.sx)
+    sx: {
+      width: layoutState?.getColumnWidth(column.key),
+      position: 'relative',
+      ...column.props.sx
+    }
   }, mergeProps(columnHeaderProps, column.props)), ___EmotionJSX(Box, _extends({
     as: "button",
     type: "button",
@@ -456,7 +437,7 @@ function TableColumnHeader(props) {
     gap: "sm",
     alignItems: "center",
     variant: "tableBase.sortButton",
-    "aria-label": "Sort by ".concat(column.textValue)
+    "aria-label": `Sort by ${column.textValue}`
   }, mergeProps(focusProps)), ___EmotionJSX(Text, {
     as: "h4",
     variant: "headText"
@@ -469,70 +450,77 @@ function TableColumnHeader(props) {
   }));
 }
 function TableRow(props) {
-  var item = props.item,
-    state = props.state,
-    children = props.children,
-    className = props.className,
-    hasSelectionCheckboxes = props.hasSelectionCheckboxes,
-    hasActions = props.hasActions,
-    isActiveRow = props.isActiveRow,
-    registerRef = props.registerRef,
-    onRowFocus = props.onRowFocus;
-  var ref = useRef(null);
+  const {
+    item,
+    state,
+    children,
+    className,
+    hasSelectionCheckboxes,
+    hasActions,
+    isActiveRow,
+    registerRef,
+    onRowFocus
+  } = props;
+  const ref = useRef(null);
 
   // Register this row's DOM element so wrappedOnRowAction can focus it programmatically.
-  var setRef = useCallback(function (el) {
+  const setRef = useCallback(el => {
     ref.current = el;
-    registerRef === null || registerRef === void 0 || registerRef(item.key, el);
+    registerRef?.(item.key, el);
   }, [item.key, registerRef]);
-  var _useTableRow = useTableRow({
-      node: item
-    }, state, ref),
-    rowProps = _useTableRow.rowProps;
-  var isSelected = state.selectionManager.isSelected(item.key);
-  var isDisabled = state.disabledKeys.has(item.key);
-  var _useFocusRing3 = useFocusRing(),
-    isFocusVisible = _useFocusRing3.isFocusVisible,
-    focusProps = _useFocusRing3.focusProps;
-  var _useHover = useHover({}),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
+  const {
+    rowProps
+  } = useTableRow({
+    node: item
+  }, state, ref);
+  const isSelected = state.selectionManager.isSelected(item.key);
+  const isDisabled = state.disabledKeys.has(item.key);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing();
+  const {
+    hoverProps,
+    isHovered
+  } = useHover({});
 
   // allowTextSelectionOnPress: true prevents the press handler from suppressing
   // native text-selection drags (user-select: none is not applied on pointer down).
   // When hasSelectionCheckboxes is true, isDisabled: true disables the visual
   // isPressed state — selection is handled solely by the checkbox cells.
-  var _usePress = usePress({
-      ref: ref,
-      allowTextSelectionOnPress: true,
-      isDisabled: !!hasSelectionCheckboxes
-    }),
-    pressProps = _usePress.pressProps,
-    isPressed = _usePress.isPressed;
+  const {
+    pressProps,
+    isPressed
+  } = usePress({
+    ref,
+    allowTextSelectionOnPress: true,
+    isDisabled: !!hasSelectionCheckboxes
+  });
 
   // React Aria's useSelectableItem only maps Space to selection (not Enter).
   // Enter is reserved for "action" which is unused here, so we manually toggle
   // selection on Enter to match expected keyboard behavior.
-  var enterKeyProps = useCallback(function (e) {
+  const enterKeyProps = useCallback(e => {
     if (e.key !== 'Enter') return;
     if (isDisabled || state.selectionManager.selectionMode === 'none') return;
     e.preventDefault();
     state.selectionManager.toggleSelection(item.key);
   }, [isDisabled, item.key, state.selectionManager]);
-  var rowFocusProps = useCallback(function (e) {
+  const rowFocusProps = useCallback(e => {
     if (e.currentTarget === e.target) {
-      onRowFocus === null || onRowFocus === void 0 || onRowFocus(item.key);
+      onRowFocus?.(item.key);
     }
   }, [item.key, onRowFocus]);
-  var _useStatusClasses5 = useStatusClasses(className, {
-      isSelected: isSelected,
-      isHovered: isHovered,
-      isPressed: isPressed,
-      isFocused: isFocusVisible || !!isActiveRow,
-      isDisabled: isDisabled,
-      'has-actions': hasActions
-    }),
-    classNames = _useStatusClasses5.classNames;
+  const {
+    classNames
+  } = useStatusClasses(className, {
+    isSelected,
+    isHovered,
+    isPressed,
+    isFocused: isFocusVisible || !!isActiveRow,
+    isDisabled,
+    'has-actions': hasActions
+  });
   return ___EmotionJSX(Box, _extends({
     as: "tr",
     display: "table-row",
@@ -546,32 +534,37 @@ function TableRow(props) {
   }), children);
 }
 function TableCell(props) {
-  var cell = props.cell,
-    state = props.state,
-    className = props.className,
-    layoutState = props.layoutState,
-    hasActions = props.hasActions;
-  var ref = useRef(null);
-  var _useTableCell = useTableCell({
-      node: cell
-    }, state, ref),
-    gridCellProps = _useTableCell.gridCellProps;
-  var _useFocusRing4 = useFocusRing(),
-    isFocusVisible = _useFocusRing4.isFocusVisible,
-    focusProps = _useFocusRing4.focusProps;
-  var _useStatusClasses6 = useStatusClasses(className, {
-      isFocused: isFocusVisible
-    }),
-    classNames = _useStatusClasses6.classNames;
+  const {
+    cell,
+    state,
+    className,
+    layoutState,
+    hasActions
+  } = props;
+  const ref = useRef(null);
+  const {
+    gridCellProps
+  } = useTableCell({
+    node: cell
+  }, state, ref);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing();
+  const {
+    classNames
+  } = useStatusClasses(className, {
+    isFocused: isFocusVisible
+  });
   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) {
+  const stopPointerPropagation = useCallback(e => {
     e.stopPropagation();
   }, []);
-  var pointerBlockers = hasActions ? {} : {
+  const pointerBlockers = hasActions ? {} : {
     onPointerDown: stopPointerPropagation,
     onMouseDown: stopPointerPropagation
   };
@@ -581,39 +574,42 @@ function TableCell(props) {
     variant: "tableBase.data",
     ref: ref,
     className: classNames,
-    sx: _objectSpread({
-      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
-    }, cell.props.sx)
+    sx: {
+      width: layoutState?.getColumnWidth(cell.column.key),
+      ...cell.props.sx
+    }
   }, mergeProps(pointerBlockers, gridCellProps, focusProps, cell.props)), cell.rendered);
 }
 
 // Native checkboxes only toggle on Space, not Enter. This handler makes Enter
 // behave the same as Space by calling the checkbox's onChange callback.
-var handleCheckboxEnterKey = function handleCheckboxEnterKey(onChange, isSelected) {
-  return function (e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      onChange === null || onChange === void 0 || onChange(!isSelected);
-    }
-  };
+const handleCheckboxEnterKey = (onChange, isSelected) => e => {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    onChange?.(!isSelected);
+  }
 };
 function TableSelectAllCell(props) {
-  var column = props.column,
-    state = props.state,
-    layoutState = props.layoutState;
-  var ref = useRef(null);
-  var _useTableColumnHeader2 = useTableColumnHeader({
-      node: column
-    }, state, ref),
-    columnHeaderProps = _useTableColumnHeader2.columnHeaderProps;
-  var _useTableSelectAllChe = useTableSelectAllCheckbox(state),
-    checkboxProps = _useTableSelectAllChe.checkboxProps;
+  const {
+    column,
+    state,
+    layoutState
+  } = props;
+  const ref = useRef(null);
+  const {
+    columnHeaderProps
+  } = useTableColumnHeader({
+    node: column
+  }, state, ref);
+  const {
+    checkboxProps
+  } = useTableSelectAllCheckbox(state);
   return ___EmotionJSX(Box, _extends({
     as: "th",
     display: "table-cell",
     variant: "tableBase.head",
     sx: {
-      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
+      width: layoutState?.getColumnWidth(column.key)
     }
   }, columnHeaderProps, {
     ref: ref
@@ -625,25 +621,30 @@ function TableSelectAllCell(props) {
   }, checkboxProps)));
 }
 function TableCheckboxCell(props) {
-  var cell = props.cell,
-    state = props.state,
-    layoutState = props.layoutState;
-  var ref = useRef(null);
-  var _useTableCell2 = useTableCell({
-      node: cell
-    }, state, ref),
-    gridCellProps = _useTableCell2.gridCellProps;
-  var _useTableSelectionChe = useTableSelectionCheckbox({
-      key: String(cell.parentKey)
-    }, state),
-    checkboxProps = _useTableSelectionChe.checkboxProps;
+  const {
+    cell,
+    state,
+    layoutState
+  } = props;
+  const ref = useRef(null);
+  const {
+    gridCellProps
+  } = useTableCell({
+    node: cell
+  }, state, ref);
+  const {
+    checkboxProps
+  } = useTableSelectionCheckbox({
+    key: String(cell.parentKey)
+  }, state);
   return ___EmotionJSX(Box, _extends({
     as: "td",
     display: "table-cell",
     variant: "tableBase.data",
-    sx: _objectSpread({
-      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
-    }, cell.props.sx)
+    sx: {
+      width: layoutState?.getColumnWidth(cell.column.key),
+      ...cell.props.sx
+    }
   }, gridCellProps, {
     ref: ref
   }), ___EmotionJSX(CheckboxField, _extends({