@pingux/astro 2.142.1-alpha.1 → 2.143.0-alpha.0

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

@@ -132,6 +132,9 @@ declare const _default: {
     tableWrapper: {
         padding: number;
         boxShadow: string;
+        overflow: string;
+        scrollPaddingTop: string;
+        scrollPaddingBottom: string;
         display: string;
         borderRadius: string;
         color: string;

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

@@ -95,7 +95,10 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
 });
 var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
   padding: 0,
-  boxShadow: 'none'
+  boxShadow: 'none',
+  overflow: 'auto',
+  scrollPaddingTop: '50px',
+  scrollPaddingBottom: '20px'
 });
 var _default = {
   container: container,

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

@@ -1,10 +1,4 @@
 import React from 'react';
-import type { TableBaseProps, TableCellProps, TableCheckboxCellProps, TableColumnHeaderProps, TableHeaderRowProps, TableRowGroupProps, TableRowProps } from '../../types/tableBase';
+import type { TableBaseProps } from '../../types/tableBase';
 declare const TableBase: React.ForwardRefExoticComponent<TableBaseProps<object> & React.RefAttributes<HTMLTableElement>>;
 export default TableBase;
-export declare const TableRowGroup: React.ForwardRefExoticComponent<TableRowGroupProps & React.RefAttributes<HTMLTableSectionElement>>;
-export declare function TableHeaderRow<T>(props: TableHeaderRowProps<T>): React.JSX.Element;
-export declare function TableColumnHeader<T>(props: TableColumnHeaderProps<T>): React.JSX.Element;
-export declare function TableRow<T>(props: TableRowProps<T>): React.JSX.Element;
-export declare function TableCell<T>(props: TableCellProps<T>): React.JSX.Element;
-export declare function TableCheckboxCell<T>(props: TableCheckboxCellProps<T>): React.JSX.Element;

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

@@ -14,12 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableCell = TableCell;
-exports.TableCheckboxCell = TableCheckboxCell;
-exports.TableColumnHeader = TableColumnHeader;
-exports.TableHeaderRow = TableHeaderRow;
-exports.TableRow = TableRow;
-exports["default"] = exports.TableRowGroup = void 0;
+exports["default"] = void 0;
 var _map = _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"));
@@ -36,8 +31,9 @@ var _table2 = require("@react-stately/table");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
-var _excluded = ["caption", "selectionMode", "selectionBehavior", "tableBodyProps", "hasSelectionCheckboxes", "isStickyHeader"],
-  _excluded2 = ["type", "children", "hasCaption", "className", "isSticky"];
+var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className"],
+  _excluded2 = ["caption"],
+  _excluded3 = ["type", "children", "className", "isSticky"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -47,11 +43,15 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var caption = props.caption,
     selectionMode = props.selectionMode,
     selectionBehavior = props.selectionBehavior,
-    tableBodyProps = props.tableBodyProps,
     hasSelectionCheckboxes = props.hasSelectionCheckboxes,
     _props$isStickyHeader = props.isStickyHeader,
     isStickyHeader = _props$isStickyHeader === void 0 ? false : _props$isStickyHeader,
+    className = props.className,
     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);
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     tableWidth = _useState2[0],
@@ -59,11 +59,9 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _table2.useTableState)(_objectSpread(_objectSpread({}, props), {}, {
     showSelectionCheckboxes: hasSelectionCheckboxes || selectionMode === 'multiple' && selectionBehavior !== 'replace'
   }));
-  var tableRef = (0, _hooks.useLocalOrForwardRef)(ref);
-  var bodyRef = (0, _react.useRef)(null);
   var collection = state.collection;
   var _useTable = (0, _table.useTable)(_objectSpread(_objectSpread({}, props), {}, {
-      scrollRef: bodyRef
+      scrollRef: scrollRef
     }), state, tableRef),
     gridProps = _useTable.gridProps;
   var getDefaultWidth = (0, _react.useCallback)(function (node) {
@@ -74,9 +72,9 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, []);
   var getDefaultMinWidth = (0, _react.useCallback)(function (node) {
     if (node.props.isSelectionCell) {
-      return 50;
+      return 70;
     }
-    return 70;
+    return 100;
   }, []);
   var layoutState = (0, _table2.useTableColumnResizeState)({
     getDefaultWidth: getDefaultWidth,
@@ -94,28 +92,31 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return setTableWidth(tableRef.current.clientWidth);
     }
   });
-  return (0, _react2.jsx)(_.Card, {
-    variant: "cards.tableWrapper"
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      'has-caption': !!caption
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_.Box, {
+    ref: scrollRef
   }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "table",
+    display: "table",
     variant: "tableBase.container",
+    className: classNames,
     ref: tableRef
-  }, gridProps, others), caption && (0, _react2.jsx)(_.Box, {
-    as: "caption",
-    display: "table-caption",
-    variant: "tableBase.caption",
-    textAlign: "left"
-  }, caption), (0, _react2.jsx)(TableRowGroup, {
+  }, gridProps, others), caption && (0, _react2.jsx)(TableCaption, {
+    caption: caption
+  }), (0, _react2.jsx)(TableRowGroup, {
+    ref: headerRef,
     type: "thead",
-    hasCaption: !!caption,
     isSticky: isStickyHeader
   }, (0, _map["default"])(_context = collection.headerRows).call(_context, function (headerRow) {
-    var _context2, _state$collection$get, _state$collection;
+    var _context2;
     return (0, _react2.jsx)(TableHeaderRow, {
       key: headerRow.key,
       item: headerRow,
       state: state
-    }, (0, _map["default"])(_context2 = (0, _from["default"])(((_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) {
+    }, (0, _map["default"])(_context2 = (0, _from["default"])(headerRow.childNodes)).call(_context2, function (column) {
       return column.props.isSelectionCell ? (0, _react2.jsx)(TableSelectAllCell, {
         key: column.key,
         column: column,
@@ -131,24 +132,24 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   })), (0, _react2.jsx)(TableRowGroup, (0, _extends2["default"])({
     ref: bodyRef,
     type: "tbody"
-  }, tableBodyProps), collection.size === 0 && (0, _react2.jsx)(_.Box, {
+  }, collection.body.props), collection.size === 0 && (0, _react2.jsx)(_.Box, {
+    as: "tr",
     role: "row",
     key: "loading",
     "data-testid": "loading",
-    as: "tr",
     alignItems: "center",
     justifyContent: "center",
     px: "lg",
     py: "md"
   }, (0, _react2.jsx)(_.Loader, {
     color: "active"
-  })), (0, _map["default"])(_context3 = (0, _from["default"])(collection)).call(_context3, function (row) {
+  })), (0, _map["default"])(_context3 = (0, _from["default"])(collection.body.childNodes)).call(_context3, function (row) {
     var _context4;
     return (0, _react2.jsx)(TableRow, {
       key: row.key,
       item: row,
       state: state
-    }, (0, _map["default"])(_context4 = (0, _from["default"])(state.collection.getChildren(row.key))).call(_context4, function (cell) {
+    }, (0, _map["default"])(_context4 = (0, _from["default"])(collection.getChildren(row.key))).call(_context4, function (cell) {
       return cell.props.isSelectionCell ? (0, _react2.jsx)(TableCheckboxCell, {
         key: cell.key,
         cell: cell,
@@ -163,30 +164,40 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }));
   }))));
 });
-var _default = TableBase;
-exports["default"] = _default;
+var TableCaption = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var caption = props.caption,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  if (!caption) {
+    return null;
+  }
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "caption",
+    display: "table-caption",
+    ref: ref,
+    variant: "tableBase.caption",
+    textAlign: "left"
+  }, others), caption);
+});
 var TableRowGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var type = props.type,
     children = props.children,
-    hasCaption = props.hasCaption,
     className = props.className,
     isSticky = props.isSticky,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded3);
   var _useTableRowGroup = (0, _table.useTableRowGroup)(),
     rowGroupProps = _useTableRowGroup.rowGroupProps;
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      hasCaption: hasCaption,
+  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(className, {
       isSticky: isSticky && type === 'thead'
     }),
-    classNames = _useStatusClasses.classNames;
+    classNames = _useStatusClasses2.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    ref: ref,
     as: type,
+    display: type === 'thead' ? 'table-header-group' : 'table-row-group',
+    ref: ref,
     className: classNames,
     variant: "tableBase.".concat(type)
   }, rowGroupProps, others), children);
 });
-exports.TableRowGroup = TableRowGroup;
 function TableHeaderRow(props) {
   var item = props.item,
     state = props.state,
@@ -198,7 +209,7 @@ function TableHeaderRow(props) {
     rowProps = _useTableHeaderRow.rowProps;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "tr",
-    isRow: true
+    display: "table-row"
   }, rowProps, {
     ref: ref
   }), children);
@@ -232,22 +243,24 @@ function TableColumnHeader(props) {
       name: (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending' ? 'Sort ascending' : 'Sort descending'
     }
   });
-  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(className, {
+  var _useStatusClasses3 = (0, _hooks.useStatusClasses)(className, {
       isFocused: isFocusVisible
     }),
-    classNames = _useStatusClasses2.classNames;
+    classNames = _useStatusClasses3.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    isRow: true,
-    ref: ref,
     as: "th",
+    display: "table-cell",
+    ref: ref,
     variant: "tableBase.head",
     className: classNames,
-    alignItems: "center",
     sx: _objectSpread({
-      gap: 'sm',
       width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
     }, column.props.sx)
-  }, (0, _utils.mergeProps)(columnHeaderProps, focusProps, column.props)), column.rendered, allowsSorting && sortIcon);
+  }, (0, _utils.mergeProps)(columnHeaderProps, focusProps, column.props)), (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_.Text, null, column.rendered), allowsSorting && sortIcon));
 }
 function TableRow(props) {
   var item = props.item,
@@ -272,17 +285,17 @@ function TableRow(props) {
     }),
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
-  var _useStatusClasses3 = (0, _hooks.useStatusClasses)(className, {
+  var _useStatusClasses4 = (0, _hooks.useStatusClasses)(className, {
       isSelected: isSelected,
       isHovered: isHovered,
       isPressed: isPressed,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),
-    classNames = _useStatusClasses3.classNames;
+    classNames = _useStatusClasses4.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "tr",
-    isRow: true,
+    display: "table-row",
     className: classNames,
     variant: "tableBase.row"
   }, (0, _utils.mergeProps)(rowProps, focusProps, hoverProps, pressProps), {
@@ -302,12 +315,13 @@ function TableCell(props) {
   var _useFocusRing3 = (0, _focus.useFocusRing)(),
     isFocusVisible = _useFocusRing3.isFocusVisible,
     focusProps = _useFocusRing3.focusProps;
-  var _useStatusClasses4 = (0, _hooks.useStatusClasses)(className, {
+  var _useStatusClasses5 = (0, _hooks.useStatusClasses)(className, {
       isFocused: isFocusVisible
     }),
-    classNames = _useStatusClasses4.classNames;
+    classNames = _useStatusClasses5.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "td",
+    display: "table-cell",
     variant: "tableBase.data",
     ref: ref,
     className: classNames,
@@ -316,27 +330,6 @@ function TableCell(props) {
     }, cell.props.sx)
   }, (0, _utils.mergeProps)(gridCellProps, focusProps, cell.props)), cell.rendered);
 }
-function TableCheckboxCell(props) {
-  var cell = props.cell,
-    state = props.state,
-    layoutState = props.layoutState;
-  var ref = (0, _react.useRef)(null);
-  var _useTableCell2 = (0, _table.useTableCell)({
-      node: cell
-    }, state, ref),
-    gridCellProps = _useTableCell2.gridCellProps;
-  var _useTableSelectionChe = (0, _table.useTableSelectionCheckbox)({
-      key: cell.parentKey
-    }, state),
-    checkboxProps = _useTableSelectionChe.checkboxProps;
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    as: "td",
-    variant: "tableBase.data",
-    width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
-  }, gridCellProps, {
-    ref: ref
-  }), (0, _react2.jsx)(_.CheckboxField, checkboxProps));
-}
 function TableSelectAllCell(props) {
   var column = props.column,
     state = props.state,
@@ -350,8 +343,11 @@ function TableSelectAllCell(props) {
     checkboxProps = _useTableSelectAllChe.checkboxProps;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "th",
+    display: "table-cell",
     variant: "tableBase.head",
-    width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
+    sx: {
+      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
+    }
   }, columnHeaderProps, {
     ref: ref
   }), state.selectionManager.selectionMode === 'single' ? (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, checkboxProps['aria-label']) : (0, _react2.jsx)(_.CheckboxField, (0, _extends2["default"])({
@@ -359,4 +355,30 @@ function TableSelectAllCell(props) {
       'data-testid': 'select-all-checkbox'
     }
   }, checkboxProps)));
-}
+}
+function TableCheckboxCell(props) {
+  var cell = props.cell,
+    state = props.state,
+    layoutState = props.layoutState;
+  var ref = (0, _react.useRef)(null);
+  var _useTableCell2 = (0, _table.useTableCell)({
+      node: cell
+    }, state, ref),
+    gridCellProps = _useTableCell2.gridCellProps;
+  var _useTableSelectionChe = (0, _table.useTableSelectionCheckbox)({
+      key: cell.parentKey
+    }, state),
+    checkboxProps = _useTableSelectionChe.checkboxProps;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    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)
+  }, gridCellProps, {
+    ref: ref
+  }), (0, _react2.jsx)(_.CheckboxField, checkboxProps));
+}
+var _default = TableBase;
+exports["default"] = _default;

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

@@ -89,14 +89,17 @@ var statusVariant = {
   Inactive: 'secondaryStatusBadge'
 };
 var Default = function Default() {
-  return (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table"
   }, (0, _react2.jsx)(_.THead, {
     columns: headers
   }, function (column) {
     return (0, _react2.jsx)(_.Column, {
-      key: column.key
+      key: column.key,
+      minWidth: 200
     }, column.name);
   }), (0, _react2.jsx)(_.TBody, {
     items: objects
@@ -106,7 +109,7 @@ var Default = function Default() {
     }, function (columnKey) {
       return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 exports.Default = Default;
 var MultiSelection = function MultiSelection() {
@@ -114,7 +117,9 @@ var MultiSelection = function MultiSelection() {
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     selectedKeys = _React$useState2[0],
     setSelectedKeys = _React$useState2[1];
-  return (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table",
     selectionMode: "multiple",
@@ -124,7 +129,8 @@ var MultiSelection = function MultiSelection() {
     columns: headers
   }, function (column) {
     return (0, _react2.jsx)(_.Column, {
-      key: column.key
+      key: column.key,
+      minWidth: 200
     }, column.name);
   }), (0, _react2.jsx)(_.TBody, {
     items: objects
@@ -134,42 +140,38 @@ var MultiSelection = function MultiSelection() {
     }, function (columnKey) {
       return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 exports.MultiSelection = MultiSelection;
 var WithStickyHeader = function WithStickyHeader() {
-  return (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper",
+    height: "400px"
+  }, (0, _react2.jsx)(_.TableBase, {
     "aria-label": "table",
     isStickyHeader: true,
     selectionMode: "single",
     defaultSelectedKeys: ['2'],
-    disabledKeys: ['3'],
-    tableBodyProps: {
-      style: {
-        height: '300px'
-      }
-    }
+    disabledKeys: ['3']
   }, (0, _react2.jsx)(_.THead, null, (0, _react2.jsx)(_.Column, {
-    width: 200
+    minWidth: 200
   }, "Name"), (0, _react2.jsx)(_.Column, {
-    width: 300
+    minWidth: 300
   }, "Email"), (0, _react2.jsx)(_.Column, {
-    width: 150
-  }, "Status"), (0, _react2.jsx)(_.Column, {
-    width: "1fr"
-  }, "Bio")), (0, _react2.jsx)(_.TBody, {
+    minWidth: 150
+  }, "Status"), (0, _react2.jsx)(_.Column, null, "Bio")), (0, _react2.jsx)(_.TBody, {
     items: _items.items
   }, function (item) {
     var _context;
     return (0, _react2.jsx)(_.Row, {
       key: item.id
-    }, (0, _react2.jsx)(_.Cell, null, (0, _concat["default"])(_context = "".concat(item.firstName, " ")).call(_context, item.lastName), ' ', item.id), (0, _react2.jsx)(_.Cell, null, item.email), (0, _react2.jsx)(_.Cell, null, (0, _react2.jsx)(_.Badge, {
+    }, (0, _react2.jsx)(_.Cell, null, (0, _concat["default"])(_context = "".concat(item.firstName, " ")).call(_context, item.lastName)), (0, _react2.jsx)(_.Cell, null, item.email), (0, _react2.jsx)(_.Cell, null, (0, _react2.jsx)(_.Badge, {
       variant: statusVariant[item.status],
       label: item.status
     })), (0, _react2.jsx)(_.Cell, null, (0, _react2.jsx)(_.Text, {
       variant: "textEllipsis"
-    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!")));
-  }));
+    }, "Lorem ipsum dolor sit amet.")));
+  })));
 };
 exports.WithStickyHeader = WithStickyHeader;
 WithStickyHeader.parameters = {
@@ -190,16 +192,15 @@ var ExampleTable = function ExampleTable() {
     paginationState = _usePaginationState.paginationState;
   var renderItems = (0, _slice["default"])(_items.items).call(_items.items, paginationState.firstRenderedIndex, paginationState.lastRenderedIndex + 1);
   return (0, _react2.jsx)(_.TableBase, {
-    "aria-label": "table"
+    "aria-label": "table",
+    className: "has-pagination"
   }, (0, _react2.jsx)(_.THead, null, (0, _react2.jsx)(_.Column, {
-    width: 200
+    minWidth: 200
   }, "Name"), (0, _react2.jsx)(_.Column, {
-    width: 300
+    minWidth: 300
   }, "Email"), (0, _react2.jsx)(_.Column, {
-    width: 150
-  }, "Status"), (0, _react2.jsx)(_.Column, {
-    width: "1fr"
-  }, "Bio")), (0, _react2.jsx)(_.TBody, {
+    minWidth: 150
+  }, "Status"), (0, _react2.jsx)(_.Column, null, "Bio")), (0, _react2.jsx)(_.TBody, {
     items: renderItems
   }, function (item) {
     var _context2;
@@ -210,7 +211,7 @@ var ExampleTable = function ExampleTable() {
       label: item.status
     })), (0, _react2.jsx)(_.Cell, null, (0, _react2.jsx)(_.Text, {
       variant: "textEllipsis"
-    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!")));
+    }, "Lorem ipsum dolor sit amet.")));
   }));
 };
 var WithPagination = function WithPagination() {
@@ -218,14 +219,20 @@ var WithPagination = function WithPagination() {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     offsetCount = _useState2[0],
     setOffsetCount = _useState2[1];
-  return (0, _react2.jsx)(_.PaginationProvider, null, (0, _react2.jsx)(_.Box, {
-    gap: "sm"
-  }, (0, _react2.jsx)(ExampleTable, null), (0, _react2.jsx)(_.Pagination, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.PaginationProvider, null, (0, _react2.jsx)(_.Box, {
+    variant: "cards.body",
+    overflow: "auto",
+    p: "0"
+  }, (0, _react2.jsx)(ExampleTable, null)), (0, _react2.jsx)(_.Box, {
+    variant: "cards.footer"
+  }, (0, _react2.jsx)(_.Pagination, {
     totalCount: _items.items.length,
     offsetCount: offsetCount,
     onOffsetCountChange: setOffsetCount,
     offsetOptions: [10, 20, 50, 100]
-  })));
+  }))));
 };
 exports.WithPagination = WithPagination;
 WithPagination.parameters = {
@@ -342,7 +349,9 @@ var DynamicWithSorting = function DynamicWithSorting() {
       direction: 'ascending'
     }
   });
-  return (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
     "aria-label": "Dynamic table",
     onSortChange: function onSortChange(descriptor) {
       if (descriptor.column) {
@@ -367,7 +376,7 @@ var DynamicWithSorting = function DynamicWithSorting() {
     }, function (columnKey) {
       return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 
 // Added to bypass color contrast issue due to virtualizer

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

@@ -7,12 +7,14 @@ declare const _default: {
             position: string;
             top: number;
             zIndex: number;
+            boxShadow: string;
         };
     };
     tbody: {
         borderBottom: string;
         borderBottomColor: string;
-        overflow: string;
+        overflowX: string;
+        scrollPaddingBottom: string;
     };
     caption: {
         fontFamily: string;
@@ -23,6 +25,7 @@ declare const _default: {
     };
     container: {
         width: string;
+        height: string;
         borderSpacing: string;
         borderCollapse: string;
         position: string;
@@ -82,12 +85,7 @@ declare const _default: {
             outlineOffset: string;
         };
         '&.is-hovered': {};
-        '&.is-selected': {
-            outline: string;
-            outlineStyle: string;
-            outlineColor: string;
-            outlineOffset: string;
-        };
+        '&.is-selected': {};
         '&.is-disabled': {
             bg: string;
             opacity: number;

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

@@ -25,6 +25,7 @@ var defaultFocus = {
 };
 var container = {
   width: '100%',
+  height: '100%',
   borderSpacing: '0',
   borderCollapse: 'collapse',
   position: 'relative'
@@ -43,7 +44,8 @@ var thead = {
   '&.is-sticky': {
     position: 'sticky',
     top: 0,
-    zIndex: 1
+    zIndex: 1,
+    boxShadow: '0 1px 0 #68747f'
   }
 };
 var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
@@ -59,7 +61,8 @@ var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
 var tbody = {
   borderBottom: '1px solid',
   borderBottomColor: 'neutral.80',
-  overflow: 'auto'
+  overflowX: 'auto',
+  scrollPaddingBottom: '20px'
 };
 var row = {
   '&:nth-of-type(odd) ': {
@@ -72,7 +75,9 @@ var row = {
   '&.is-hovered': {
     // This is the hover state for the row
   },
-  '&.is-selected': _objectSpread({}, defaultFocus),
+  '&.is-selected': {
+    // This is the selected state for the row
+  },
   '&.is-disabled': {
     bg: 'neutral.90',
     opacity: 0.5,

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

@@ -42,7 +42,10 @@ var NextGenTableBase = function NextGenTableBase() {
     additional_grant: '+25,000',
     total_grant: '75,000'
   }];
-  return (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper",
+    overflow: "unset"
+  }, (0, _react2.jsx)(_.TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table"
   }, (0, _react2.jsx)(_.THead, {
@@ -59,7 +62,7 @@ var NextGenTableBase = function NextGenTableBase() {
     }, function (columnKey) {
       return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 var _default = NextGenTableBase;
 exports["default"] = _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -517,6 +517,11 @@ declare const _default: {
         caption: {
             color: string;
         };
+        thead: {
+            '&.is-sticky': {
+                boxShadow: string;
+            };
+        };
         head: {
             color: string;
         };