@pingux/astro 2.131.0-alpha.1 → 2.131.0

package/lib/components/TableBase/TableBase.js

@@ -8,35 +8,40 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["caption", "selectionMode", "selectedKeys", "defaultSelectedKeys", "tableBodyProps"],
-  _excluded2 = ["type", "children", "hasCaption", "className"];
+var _excluded = ["caption", "selectionMode", "selectionBehavior", "tableBodyProps", "showSelectionCheckboxes", "isStickyHeader"],
+  _excluded2 = ["type", "children", "hasCaption", "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(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover, usePress } from '@react-aria/interactions';
-import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup } from '@react-aria/table';
-import { mergeProps } from '@react-aria/utils';
-import { useTableState } from '@react-stately/table';
-import { Box } from '../..';
+import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox } from '@react-aria/table';
+import { mergeProps, useResizeObserver } from '@react-aria/utils';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useTableColumnResizeState, useTableState } from '@react-stately/table';
+import { Box, Card, CheckboxField } from '../..';
 import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context, _context3;
   var caption = props.caption,
     selectionMode = props.selectionMode,
-    selectedKeys = props.selectedKeys,
-    _props$defaultSelecte = props.defaultSelectedKeys,
-    defaultSelectedKeys = _props$defaultSelecte === void 0 ? [] : _props$defaultSelecte,
+    selectionBehavior = props.selectionBehavior,
     tableBodyProps = props.tableBodyProps,
+    showSelectionCheckboxes = props.showSelectionCheckboxes,
+    _props$isStickyHeader = props.isStickyHeader,
+    isStickyHeader = _props$isStickyHeader === void 0 ? false : _props$isStickyHeader,
     others = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    tableWidth = _useState2[0],
+    setTableWidth = _useState2[1];
   var state = useTableState(_objectSpread(_objectSpread({}, props), {}, {
-    selectionMode: selectionMode,
-    selectedKeys: selectedKeys,
-    defaultSelectedKeys: selectedKeys ? undefined : defaultSelectedKeys
+    showSelectionCheckboxes: showSelectionCheckboxes || selectionMode === 'multiple' && selectionBehavior !== 'replace'
   }));
   var tableRef = useLocalOrForwardRef(ref);
   var bodyRef = useRef(null);
@@ -46,9 +51,38 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
       scrollRef: bodyRef
     }), state, tableRef),
     gridProps = _useTable.gridProps;
-  return ___EmotionJSX(Box, _extends({
+  var getDefaultWidth = useCallback(function (node) {
+    if (node.props.isSelectionCell) {
+      return 70;
+    }
+    return undefined;
+  }, []);
+  var getDefaultMinWidth = useCallback(function (node) {
+    if (node.props.isSelectionCell) {
+      return 50;
+    }
+    return 70;
+  }, []);
+  var layoutState = useTableColumnResizeState({
+    getDefaultWidth: getDefaultWidth,
+    getDefaultMinWidth: getDefaultMinWidth,
+    tableWidth: tableWidth
+  }, state);
+  useLayoutEffect(function () {
+    if (tableRef && tableRef.current) {
+      setTableWidth(tableRef.current.clientWidth);
+    }
+  }, [tableRef]);
+  useResizeObserver({
+    ref: tableRef,
+    onResize: function onResize() {
+      return setTableWidth(tableRef.current.clientWidth);
+    }
+  });
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(Box, _extends({
     as: "table",
-    display: "table",
     variant: "tableBase.container",
     ref: tableRef
   }, gridProps, others), caption && ___EmotionJSX(Box, {
@@ -59,7 +93,8 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
     id: props['aria-describedby'] || 'table-caption'
   }, caption), ___EmotionJSX(TableRowGroup, {
     type: "thead",
-    hasCaption: !!caption
+    hasCaption: !!caption,
+    isSticky: isStickyHeader
   }, _mapInstanceProperty(_context = collection.headerRows).call(_context, function (headerRow) {
     var _context2, _state$collection$get, _state$collection;
     return ___EmotionJSX(TableHeaderRow, {
@@ -67,10 +102,16 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
       item: headerRow,
       state: state
     }, _mapInstanceProperty(_context2 = _Array$from(((_state$collection$get = (_state$collection = state.collection).getChildren) === null || _state$collection$get === void 0 ? void 0 : _state$collection$get.call(_state$collection, headerRow.key)) || [])).call(_context2, function (column) {
-      return ___EmotionJSX(TableColumnHeader, {
+      return column.props.isSelectionCell ? ___EmotionJSX(TableSelectAllCell, {
+        key: column.key,
+        column: column,
+        state: state,
+        layoutState: layoutState
+      }) : ___EmotionJSX(TableColumnHeader, {
         key: column.key,
         column: column,
-        state: state
+        state: state,
+        layoutState: layoutState
       });
     }));
   })), ___EmotionJSX(TableRowGroup, _extends({
@@ -83,13 +124,19 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
       item: row,
       state: state
     }, _mapInstanceProperty(_context4 = _Array$from(state.collection.getChildren(row.key))).call(_context4, function (cell) {
-      return ___EmotionJSX(TableCell, {
+      return cell.props.isSelectionCell ? ___EmotionJSX(TableCheckboxCell, {
+        key: cell.key,
+        cell: cell,
+        state: state,
+        layoutState: layoutState
+      }) : ___EmotionJSX(TableCell, {
         key: cell.key,
         cell: cell,
-        state: state
+        state: state,
+        layoutState: layoutState
       });
     }));
-  })));
+  }))));
 });
 export default TableBase;
 export var TableRowGroup = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -97,23 +144,23 @@ export var TableRowGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     children = props.children,
     hasCaption = props.hasCaption,
     className = props.className,
+    isSticky = props.isSticky,
     others = _objectWithoutProperties(props, _excluded2);
   var _useTableRowGroup = useTableRowGroup(),
     rowGroupProps = _useTableRowGroup.rowGroupProps;
   var _useStatusClasses = useStatusClasses(className, {
-      hasCaption: hasCaption
+      hasCaption: hasCaption,
+      isSticky: isSticky && type === 'thead'
     }),
     classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
-    ref: ref
-  }, rowGroupProps, {
+    ref: ref,
     as: type,
     className: classNames,
-    display: "table-row-group",
     variant: "tableBase.".concat(type)
-  }, others), children);
+  }, rowGroupProps, others), children);
 });
-export var TableHeaderRow = function TableHeaderRow(props) {
+export function TableHeaderRow(props) {
   var item = props.item,
     state = props.state,
     children = props.children;
@@ -124,15 +171,16 @@ export var TableHeaderRow = function TableHeaderRow(props) {
     rowProps = _useTableHeaderRow.rowProps;
   return ___EmotionJSX(Box, _extends({
     as: "tr",
-    display: "table-row"
+    isRow: true
   }, rowProps, {
     ref: ref
   }), children);
-};
-export var TableColumnHeader = function TableColumnHeader(props) {
+}
+export function TableColumnHeader(props) {
   var column = props.column,
     state = props.state,
-    className = props.className;
+    className = props.className,
+    layoutState = props.layoutState;
   var ref = useRef(null);
   var _useTableColumnHeader = useTableColumnHeader({
       node: column
@@ -146,15 +194,16 @@ export var TableColumnHeader = function TableColumnHeader(props) {
     }),
     classNames = _useStatusClasses2.classNames;
   return ___EmotionJSX(Box, _extends({
+    ref: ref,
     as: "th",
-    display: "table-cell",
     variant: "tableBase.head",
-    className: classNames
-  }, mergeProps(columnHeaderProps, focusProps), {
-    ref: ref
-  }, column.props), column.rendered);
-};
-export var TableRow = function TableRow(props) {
+    className: classNames,
+    sx: _objectSpread({
+      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
+    }, column.props.sx)
+  }, mergeProps(columnHeaderProps, focusProps, column.props)), column.rendered);
+}
+export function TableRow(props) {
   var item = props.item,
     state = props.state,
     children = props.children,
@@ -184,19 +233,19 @@ export var TableRow = function TableRow(props) {
     }),
     classNames = _useStatusClasses3.classNames;
   return ___EmotionJSX(Box, _extends({
-    display: "table-row",
     as: "tr",
+    isRow: true,
     className: classNames,
     variant: "tableBase.row"
   }, mergeProps(rowProps, focusProps, hoverProps, pressProps), {
     ref: ref
   }), children);
-};
+}
 export function TableCell(props) {
-  var _cell$props$noWrap;
   var cell = props.cell,
     state = props.state,
-    className = props.className;
+    className = props.className,
+    layoutState = props.layoutState;
   var ref = useRef(null);
   var _useTableCell = useTableCell({
       node: cell
@@ -206,16 +255,60 @@ export function TableCell(props) {
     isFocusVisible = _useFocusRing3.isFocusVisible,
     focusProps = _useFocusRing3.focusProps;
   var _useStatusClasses4 = useStatusClasses(className, {
-      isFocused: isFocusVisible,
-      noWrap: (_cell$props$noWrap = cell.props.noWrap) !== null && _cell$props$noWrap !== void 0 ? _cell$props$noWrap : false
+      isFocused: isFocusVisible
     }),
     classNames = _useStatusClasses4.classNames;
   return ___EmotionJSX(Box, _extends({
     as: "td",
-    display: "table-cell",
-    className: classNames
-  }, mergeProps(gridCellProps, focusProps), {
     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)
+  }, mergeProps(gridCellProps, focusProps, cell.props)), cell.rendered);
+}
+export 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: cell.parentKey
+    }, state),
+    checkboxProps = _useTableSelectionChe.checkboxProps;
+  return ___EmotionJSX(Box, _extends({
+    as: "td",
+    variant: "tableBase.data",
+    width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
+  }, gridCellProps, {
+    ref: ref
+  }), ___EmotionJSX(CheckboxField, checkboxProps));
+}
+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;
+  return ___EmotionJSX(Box, _extends({
+    as: "th",
+    variant: "tableBase.head",
+    width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
+  }, columnHeaderProps, {
     ref: ref
-  }, cell.props), cell.rendered);
+  }), state.selectionManager.selectionMode === 'single' ? ___EmotionJSX(VisuallyHidden, null, checkboxProps['aria-label']) : ___EmotionJSX(CheckboxField, _extends({
+    checkBoxProps: {
+      'data-testid': 'select-all-checkbox'
+    }
+  }, checkboxProps)));
 }

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

@@ -1,6 +1,11 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import React, { useState } from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Badge, Card, Cell, Column, Row, TableBase, TBody, THead } from '../..';
+import { Badge, Cell, Column, Pagination, PaginationProvider, Row, TableBase, TBody, Text, THead } from '../..';
+import { usePaginationState } from '../../hooks';
 import { items } from '../../utils/devUtils/constants/items';
 import TableReadme from './TableBase.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -47,10 +52,15 @@ var objects = [{
   additional_grant: '+25,000',
   total_grant: '75,000'
 }];
+var statusVariant = {
+  Pending: 'warningStatusBadge',
+  Failed: 'criticalStatusBadge',
+  Rejected: 'criticalStatusBadge',
+  Active: 'healthyStatusBadge',
+  Inactive: 'secondaryStatusBadge'
+};
 export var Default = function Default() {
-  return ___EmotionJSX(Card, {
-    variant: "cards.tableWrapper"
-  }, ___EmotionJSX(TableBase, {
+  return ___EmotionJSX(TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table"
   }, ___EmotionJSX(THead, {
@@ -67,34 +77,103 @@ export var Default = function Default() {
     }, function (columnKey) {
       return ___EmotionJSX(Cell, null, item[columnKey]);
     });
-  })));
+  }));
 };
-export var Customization = function Customization() {
-  var statusVariant = {
-    'Pending': 'warningStatusBadge',
-    'Failed': 'criticalStatusBadge',
-    'Rejected': 'criticalStatusBadge',
-    'Active': 'healthyStatusBadge',
-    'Inactive': 'secondaryStatusBadge'
-  };
-  return ___EmotionJSX(Card, {
-    variant: "cards.tableWrapper"
-  }, ___EmotionJSX(TableBase, {
-    "aria-label": "table"
+export var MultiSelection = function MultiSelection() {
+  var _React$useState = React.useState(new _Set(['1', '3'])),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedKeys = _React$useState2[0],
+    setSelectedKeys = _React$useState2[1];
+  return ___EmotionJSX(TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table",
+    selectionMode: "multiple",
+    selectedKeys: selectedKeys,
+    onSelectionChange: setSelectedKeys
+  }, ___EmotionJSX(THead, {
+    columns: headers
+  }, function (column) {
+    return ___EmotionJSX(Column, {
+      key: column.key
+    }, column.name);
+  }), ___EmotionJSX(TBody, {
+    items: objects
+  }, function (item) {
+    return ___EmotionJSX(Row, {
+      key: item.id
+    }, function (columnKey) {
+      return ___EmotionJSX(Cell, null, item[columnKey]);
+    });
+  }));
+};
+export var WithStickyHeader = function WithStickyHeader() {
+  return ___EmotionJSX(TableBase, {
+    "aria-label": "table",
+    isStickyHeader: true,
+    tableBodyProps: {
+      style: {
+        height: '300px'
+      }
+    }
   }, ___EmotionJSX(THead, null, ___EmotionJSX(Column, {
-    width: 70
-  }, "#"), ___EmotionJSX(Column, null, "Name"), ___EmotionJSX(Column, null, "Email"), ___EmotionJSX(Column, null, "Status"), ___EmotionJSX(Column, null, "Bio")), ___EmotionJSX(TBody, {
+    width: 200
+  }, "Name"), ___EmotionJSX(Column, {
+    width: 300
+  }, "Email"), ___EmotionJSX(Column, {
+    width: 150
+  }, "Status"), ___EmotionJSX(Column, {
+    width: "1fr"
+  }, "Bio")), ___EmotionJSX(TBody, {
     items: items
   }, function (item) {
+    var _context;
+    return ___EmotionJSX(Row, {
+      key: item.email
+    }, ___EmotionJSX(Cell, null, _concatInstanceProperty(_context = "".concat(item.firstName, " ")).call(_context, item.lastName)), ___EmotionJSX(Cell, null, item.email), ___EmotionJSX(Cell, null, ___EmotionJSX(Badge, {
+      variant: statusVariant[item.status],
+      label: item.status
+    })), ___EmotionJSX(Cell, null, ___EmotionJSX(Text, {
+      variant: "textEllipsis"
+    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!")));
+  }));
+};
+var ExampleTable = function ExampleTable() {
+  var _usePaginationState = usePaginationState(),
+    paginationState = _usePaginationState.paginationState;
+  var renderItems = _sliceInstanceProperty(items).call(items, paginationState.firstRenderedIndex, paginationState.lastRenderedIndex + 1);
+  return ___EmotionJSX(TableBase, {
+    "aria-label": "table"
+  }, ___EmotionJSX(THead, null, ___EmotionJSX(Column, {
+    width: 200
+  }, "Name"), ___EmotionJSX(Column, {
+    width: 300
+  }, "Email"), ___EmotionJSX(Column, {
+    width: 150
+  }, "Status"), ___EmotionJSX(Column, {
+    width: "1fr"
+  }, "Bio")), ___EmotionJSX(TBody, {
+    items: renderItems
+  }, function (item) {
+    var _context2;
     return ___EmotionJSX(Row, {
       key: item.email
-    }, ___EmotionJSX(Cell, null, item.id), ___EmotionJSX(Cell, {
-      noWrap: true
-    }, item.firstName, ' ', item.lastName), ___EmotionJSX(Cell, {
-      noWrap: true
-    }, item.email), ___EmotionJSX(Cell, null, ___EmotionJSX(Badge, {
+    }, ___EmotionJSX(Cell, null, _concatInstanceProperty(_context2 = "".concat(item.firstName, " ")).call(_context2, item.lastName)), ___EmotionJSX(Cell, null, item.email), ___EmotionJSX(Cell, null, ___EmotionJSX(Badge, {
       variant: statusVariant[item.status],
       label: item.status
-    })), ___EmotionJSX(Cell, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!"));
-  })));
+    })), ___EmotionJSX(Cell, null, ___EmotionJSX(Text, {
+      variant: "textEllipsis"
+    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!")));
+  }));
+};
+export var WithPagination = function WithPagination() {
+  var _useState = useState(10),
+    _useState2 = _slicedToArray(_useState, 2),
+    offsetCount = _useState2[0],
+    setOffsetCount = _useState2[1];
+  return ___EmotionJSX(PaginationProvider, null, ___EmotionJSX(ExampleTable, null), ___EmotionJSX(Pagination, {
+    totalCount: items.length,
+    offsetCount: offsetCount,
+    onOffsetCountChange: setOffsetCount,
+    offsetOptions: [10, 20, 50, 100]
+  }));
 };

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

@@ -19,7 +19,8 @@ var defaultFocus = {
 var container = {
   width: '100%',
   borderSpacing: '0',
-  borderCollapse: 'collapse'
+  borderCollapse: 'collapse',
+  position: 'relative'
 };
 var caption = {
   fontFamily: 'standard',
@@ -28,7 +29,16 @@ var caption = {
   p: 'sm',
   textAlign: 'left'
 };
-var thead = {};
+var thead = {
+  borderBottom: '1px solid',
+  backgroundColor: 'white',
+  borderBottomColor: 'neutral.40',
+  '&.is-sticky': {
+    position: 'sticky',
+    top: 0,
+    zIndex: 1
+  }
+};
 var head = _objectSpread(_objectSpread({}, text.label), {}, {
   fontWeight: 500,
   textAlign: 'left',
@@ -37,10 +47,9 @@ var head = _objectSpread(_objectSpread({}, text.label), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var tbody = {
-  borderTop: '1px solid',
-  borderTopColor: 'neutral.40',
   borderBottom: '1px solid',
-  borderBottomColor: 'neutral.80'
+  borderBottomColor: 'neutral.80',
+  overflow: 'auto'
 };
 var row = {
   '&:nth-of-type(odd) ': {
@@ -56,9 +65,6 @@ var row = {
 };
 var data = _objectSpread(_objectSpread({}, text.tableData), {}, {
   p: 'sm',
-  '&.no-wrap': {
-    whiteSpace: 'nowrap'
-  },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 export default {