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

package/lib/components/TableBase/TableBase.js

@@ -10,8 +10,9 @@ 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", "tableBodyProps", "hasSelectionCheckboxes", "isStickyHeader"],
-  _excluded2 = ["type", "children", "hasCaption", "className", "isSticky"];
+var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className"],
+  _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(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; }
@@ -23,7 +24,7 @@ import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTab
 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, Icon, Loader } from '../..';
+import { Box, CheckboxField, Icon, Loader, Text } from '../..';
 import { useGetTheme, useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -31,11 +32,15 @@ var TableBase = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
+  var tableRef = useLocalOrForwardRef(ref);
+  var headerRef = useRef(null);
+  var scrollRef = useRef(null);
+  var bodyRef = useRef(null);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     tableWidth = _useState2[0],
@@ -43,11 +48,9 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useTableState(_objectSpread(_objectSpread({}, props), {}, {
     showSelectionCheckboxes: hasSelectionCheckboxes || selectionMode === 'multiple' && selectionBehavior !== 'replace'
   }));
-  var tableRef = useLocalOrForwardRef(ref);
-  var bodyRef = useRef(null);
   var collection = state.collection;
   var _useTable = useTable(_objectSpread(_objectSpread({}, props), {}, {
-      scrollRef: bodyRef
+      scrollRef: scrollRef
     }), state, tableRef),
     gridProps = _useTable.gridProps;
   var getDefaultWidth = useCallback(function (node) {
@@ -58,9 +61,9 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
   }, []);
   var getDefaultMinWidth = useCallback(function (node) {
     if (node.props.isSelectionCell) {
-      return 50;
+      return 70;
     }
-    return 70;
+    return 100;
   }, []);
   var layoutState = useTableColumnResizeState({
     getDefaultWidth: getDefaultWidth,
@@ -78,28 +81,31 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
       return setTableWidth(tableRef.current.clientWidth);
     }
   });
-  return ___EmotionJSX(Card, {
-    variant: "cards.tableWrapper"
+  var _useStatusClasses = useStatusClasses(className, {
+      'has-caption': !!caption
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Box, {
+    ref: scrollRef
   }, ___EmotionJSX(Box, _extends({
     as: "table",
+    display: "table",
     variant: "tableBase.container",
+    className: classNames,
     ref: tableRef
-  }, gridProps, others), caption && ___EmotionJSX(Box, {
-    as: "caption",
-    display: "table-caption",
-    variant: "tableBase.caption",
-    textAlign: "left"
-  }, caption), ___EmotionJSX(TableRowGroup, {
+  }, gridProps, others), caption && ___EmotionJSX(TableCaption, {
+    caption: caption
+  }), ___EmotionJSX(TableRowGroup, {
+    ref: headerRef,
     type: "thead",
-    hasCaption: !!caption,
     isSticky: isStickyHeader
   }, _mapInstanceProperty(_context = collection.headerRows).call(_context, function (headerRow) {
-    var _context2, _state$collection$get, _state$collection;
+    var _context2;
     return ___EmotionJSX(TableHeaderRow, {
       key: headerRow.key,
       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) {
+    }, _mapInstanceProperty(_context2 = _Array$from(headerRow.childNodes)).call(_context2, function (column) {
       return column.props.isSelectionCell ? ___EmotionJSX(TableSelectAllCell, {
         key: column.key,
         column: column,
@@ -115,24 +121,24 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
   })), ___EmotionJSX(TableRowGroup, _extends({
     ref: bodyRef,
     type: "tbody"
-  }, tableBodyProps), collection.size === 0 && ___EmotionJSX(Box, {
+  }, collection.body.props), collection.size === 0 && ___EmotionJSX(Box, {
+    as: "tr",
     role: "row",
     key: "loading",
     "data-testid": "loading",
-    as: "tr",
     alignItems: "center",
     justifyContent: "center",
     px: "lg",
     py: "md"
   }, ___EmotionJSX(Loader, {
     color: "active"
-  })), _mapInstanceProperty(_context3 = _Array$from(collection)).call(_context3, function (row) {
+  })), _mapInstanceProperty(_context3 = _Array$from(collection.body.childNodes)).call(_context3, function (row) {
     var _context4;
     return ___EmotionJSX(TableRow, {
       key: row.key,
       item: row,
       state: state
-    }, _mapInstanceProperty(_context4 = _Array$from(state.collection.getChildren(row.key))).call(_context4, function (cell) {
+    }, _mapInstanceProperty(_context4 = _Array$from(collection.getChildren(row.key))).call(_context4, function (cell) {
       return cell.props.isSelectionCell ? ___EmotionJSX(TableCheckboxCell, {
         key: cell.key,
         cell: cell,
@@ -147,29 +153,41 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
     }));
   }))));
 });
-export default TableBase;
-export var TableRowGroup = /*#__PURE__*/forwardRef(function (props, ref) {
+var TableCaption = /*#__PURE__*/forwardRef(function (props, ref) {
+  var caption = props.caption,
+    others = _objectWithoutProperties(props, _excluded2);
+  if (!caption) {
+    return null;
+  }
+  return ___EmotionJSX(Box, _extends({
+    as: "caption",
+    display: "table-caption",
+    ref: ref,
+    variant: "tableBase.caption",
+    textAlign: "left"
+  }, others), caption);
+});
+var TableRowGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var type = props.type,
     children = props.children,
-    hasCaption = props.hasCaption,
     className = props.className,
     isSticky = props.isSticky,
-    others = _objectWithoutProperties(props, _excluded2);
+    others = _objectWithoutProperties(props, _excluded3);
   var _useTableRowGroup = useTableRowGroup(),
     rowGroupProps = _useTableRowGroup.rowGroupProps;
-  var _useStatusClasses = useStatusClasses(className, {
-      hasCaption: hasCaption,
+  var _useStatusClasses2 = useStatusClasses(className, {
       isSticky: isSticky && type === 'thead'
     }),
-    classNames = _useStatusClasses.classNames;
+    classNames = _useStatusClasses2.classNames;
   return ___EmotionJSX(Box, _extends({
-    ref: ref,
     as: type,
+    display: type === 'thead' ? 'table-header-group' : 'table-row-group',
+    ref: ref,
     className: classNames,
     variant: "tableBase.".concat(type)
   }, rowGroupProps, others), children);
 });
-export function TableHeaderRow(props) {
+function TableHeaderRow(props) {
   var item = props.item,
     state = props.state,
     children = props.children;
@@ -180,12 +198,12 @@ export function TableHeaderRow(props) {
     rowProps = _useTableHeaderRow.rowProps;
   return ___EmotionJSX(Box, _extends({
     as: "tr",
-    isRow: true
+    display: "table-row"
   }, rowProps, {
     ref: ref
   }), children);
 }
-export function TableColumnHeader(props) {
+function TableColumnHeader(props) {
   var _column$props;
   var column = props.column,
     state = props.state,
@@ -214,24 +232,26 @@ export function TableColumnHeader(props) {
       name: (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending' ? 'Sort ascending' : 'Sort descending'
     }
   });
-  var _useStatusClasses2 = useStatusClasses(className, {
+  var _useStatusClasses3 = useStatusClasses(className, {
       isFocused: isFocusVisible
     }),
-    classNames = _useStatusClasses2.classNames;
+    classNames = _useStatusClasses3.classNames;
   return ___EmotionJSX(Box, _extends({
-    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)
-  }, mergeProps(columnHeaderProps, focusProps, column.props)), column.rendered, allowsSorting && sortIcon);
+  }, mergeProps(columnHeaderProps, focusProps, column.props)), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, ___EmotionJSX(Text, null, column.rendered), allowsSorting && sortIcon));
 }
-export function TableRow(props) {
+function TableRow(props) {
   var item = props.item,
     state = props.state,
     children = props.children,
@@ -254,24 +274,24 @@ export function TableRow(props) {
     }),
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
-  var _useStatusClasses3 = useStatusClasses(className, {
+  var _useStatusClasses4 = useStatusClasses(className, {
       isSelected: isSelected,
       isHovered: isHovered,
       isPressed: isPressed,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),
-    classNames = _useStatusClasses3.classNames;
+    classNames = _useStatusClasses4.classNames;
   return ___EmotionJSX(Box, _extends({
     as: "tr",
-    isRow: true,
+    display: "table-row",
     className: classNames,
     variant: "tableBase.row"
   }, mergeProps(rowProps, focusProps, hoverProps, pressProps), {
     ref: ref
   }), children);
 }
-export function TableCell(props) {
+function TableCell(props) {
   var cell = props.cell,
     state = props.state,
     className = props.className,
@@ -284,12 +304,13 @@ export function TableCell(props) {
   var _useFocusRing3 = useFocusRing(),
     isFocusVisible = _useFocusRing3.isFocusVisible,
     focusProps = _useFocusRing3.focusProps;
-  var _useStatusClasses4 = useStatusClasses(className, {
+  var _useStatusClasses5 = useStatusClasses(className, {
       isFocused: isFocusVisible
     }),
-    classNames = _useStatusClasses4.classNames;
+    classNames = _useStatusClasses5.classNames;
   return ___EmotionJSX(Box, _extends({
     as: "td",
+    display: "table-cell",
     variant: "tableBase.data",
     ref: ref,
     className: classNames,
@@ -298,27 +319,6 @@ export function TableCell(props) {
     }, 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,
@@ -332,8 +332,11 @@ function TableSelectAllCell(props) {
     checkboxProps = _useTableSelectAllChe.checkboxProps;
   return ___EmotionJSX(Box, _extends({
     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' ? ___EmotionJSX(VisuallyHidden, null, checkboxProps['aria-label']) : ___EmotionJSX(CheckboxField, _extends({
@@ -341,4 +344,29 @@ function TableSelectAllCell(props) {
       'data-testid': 'select-all-checkbox'
     }
   }, 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: cell.parentKey
+    }, state),
+    checkboxProps = _useTableSelectionChe.checkboxProps;
+  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)
+  }, gridCellProps, {
+    ref: ref
+  }), ___EmotionJSX(CheckboxField, checkboxProps));
+}
+export default TableBase;

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

@@ -20,7 +20,7 @@ import React, { useState } from 'react';
 import { useCollator } from '@react-aria/i18n';
 import { useAsyncList } from '@react-stately/data';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Badge, Box, Cell, Column, Pagination, PaginationProvider, Row, TableBase, TBody, Text, THead } from '../..';
+import { Badge, Box, Card, Cell, Column, Pagination, PaginationProvider, Row, TableBase, TBody, Text, THead } from '../..';
 import { usePaginationState } from '../../hooks';
 import { items as listData } from '../../utils/devUtils/constants/items';
 import TableReadme from './TableBase.mdx';
@@ -76,14 +76,17 @@ var statusVariant = {
   Inactive: 'secondaryStatusBadge'
 };
 export var Default = function Default() {
-  return ___EmotionJSX(TableBase, {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table"
   }, ___EmotionJSX(THead, {
     columns: headers
   }, function (column) {
     return ___EmotionJSX(Column, {
-      key: column.key
+      key: column.key,
+      minWidth: 200
     }, column.name);
   }), ___EmotionJSX(TBody, {
     items: objects
@@ -93,14 +96,16 @@ export var Default = function Default() {
     }, function (columnKey) {
       return ___EmotionJSX(Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 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, {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table",
     selectionMode: "multiple",
@@ -110,7 +115,8 @@ export var MultiSelection = function MultiSelection() {
     columns: headers
   }, function (column) {
     return ___EmotionJSX(Column, {
-      key: column.key
+      key: column.key,
+      minWidth: 200
     }, column.name);
   }), ___EmotionJSX(TBody, {
     items: objects
@@ -120,41 +126,37 @@ export var MultiSelection = function MultiSelection() {
     }, function (columnKey) {
       return ___EmotionJSX(Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 export var WithStickyHeader = function WithStickyHeader() {
-  return ___EmotionJSX(TableBase, {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper",
+    height: "400px"
+  }, ___EmotionJSX(TableBase, {
     "aria-label": "table",
     isStickyHeader: true,
     selectionMode: "single",
     defaultSelectedKeys: ['2'],
-    disabledKeys: ['3'],
-    tableBodyProps: {
-      style: {
-        height: '300px'
-      }
-    }
+    disabledKeys: ['3']
   }, ___EmotionJSX(THead, null, ___EmotionJSX(Column, {
-    width: 200
+    minWidth: 200
   }, "Name"), ___EmotionJSX(Column, {
-    width: 300
+    minWidth: 300
   }, "Email"), ___EmotionJSX(Column, {
-    width: 150
-  }, "Status"), ___EmotionJSX(Column, {
-    width: "1fr"
-  }, "Bio")), ___EmotionJSX(TBody, {
+    minWidth: 150
+  }, "Status"), ___EmotionJSX(Column, null, "Bio")), ___EmotionJSX(TBody, {
     items: listData
   }, function (item) {
     var _context;
     return ___EmotionJSX(Row, {
       key: item.id
-    }, ___EmotionJSX(Cell, null, _concatInstanceProperty(_context = "".concat(item.firstName, " ")).call(_context, item.lastName), ' ', item.id), ___EmotionJSX(Cell, null, item.email), ___EmotionJSX(Cell, null, ___EmotionJSX(Badge, {
+    }, ___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!")));
-  }));
+    }, "Lorem ipsum dolor sit amet.")));
+  })));
 };
 WithStickyHeader.parameters = {
   a11y: {
@@ -174,16 +176,15 @@ var ExampleTable = function ExampleTable() {
     paginationState = _usePaginationState.paginationState;
   var renderItems = _sliceInstanceProperty(listData).call(listData, paginationState.firstRenderedIndex, paginationState.lastRenderedIndex + 1);
   return ___EmotionJSX(TableBase, {
-    "aria-label": "table"
+    "aria-label": "table",
+    className: "has-pagination"
   }, ___EmotionJSX(THead, null, ___EmotionJSX(Column, {
-    width: 200
+    minWidth: 200
   }, "Name"), ___EmotionJSX(Column, {
-    width: 300
+    minWidth: 300
   }, "Email"), ___EmotionJSX(Column, {
-    width: 150
-  }, "Status"), ___EmotionJSX(Column, {
-    width: "1fr"
-  }, "Bio")), ___EmotionJSX(TBody, {
+    minWidth: 150
+  }, "Status"), ___EmotionJSX(Column, null, "Bio")), ___EmotionJSX(TBody, {
     items: renderItems
   }, function (item) {
     var _context2;
@@ -194,7 +195,7 @@ var ExampleTable = function ExampleTable() {
       label: item.status
     })), ___EmotionJSX(Cell, null, ___EmotionJSX(Text, {
       variant: "textEllipsis"
-    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!")));
+    }, "Lorem ipsum dolor sit amet.")));
   }));
 };
 export var WithPagination = function WithPagination() {
@@ -202,14 +203,20 @@ export var WithPagination = function WithPagination() {
     _useState2 = _slicedToArray(_useState, 2),
     offsetCount = _useState2[0],
     setOffsetCount = _useState2[1];
-  return ___EmotionJSX(PaginationProvider, null, ___EmotionJSX(Box, {
-    gap: "sm"
-  }, ___EmotionJSX(ExampleTable, null), ___EmotionJSX(Pagination, {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(PaginationProvider, null, ___EmotionJSX(Box, {
+    variant: "cards.body",
+    overflow: "auto",
+    p: "0"
+  }, ___EmotionJSX(ExampleTable, null)), ___EmotionJSX(Box, {
+    variant: "cards.footer"
+  }, ___EmotionJSX(Pagination, {
     totalCount: listData.length,
     offsetCount: offsetCount,
     onOffsetCountChange: setOffsetCount,
     offsetOptions: [10, 20, 50, 100]
-  })));
+  }))));
 };
 WithPagination.parameters = {
   a11y: {
@@ -325,7 +332,9 @@ export var DynamicWithSorting = function DynamicWithSorting() {
       direction: 'ascending'
     }
   });
-  return ___EmotionJSX(TableBase, {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
     "aria-label": "Dynamic table",
     onSortChange: function onSortChange(descriptor) {
       if (descriptor.column) {
@@ -350,7 +359,7 @@ export var DynamicWithSorting = function DynamicWithSorting() {
     }, function (columnKey) {
       return ___EmotionJSX(Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 
 // Added to bypass color contrast issue due to virtualizer

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

@@ -18,6 +18,7 @@ var defaultFocus = {
 };
 var container = {
   width: '100%',
+  height: '100%',
   borderSpacing: '0',
   borderCollapse: 'collapse',
   position: 'relative'
@@ -36,7 +37,8 @@ var thead = {
   '&.is-sticky': {
     position: 'sticky',
     top: 0,
-    zIndex: 1
+    zIndex: 1,
+    boxShadow: '0 1px 0 #68747f'
   }
 };
 var head = _objectSpread(_objectSpread({}, text.label), {}, {
@@ -52,7 +54,8 @@ var head = _objectSpread(_objectSpread({}, text.label), {}, {
 var tbody = {
   borderBottom: '1px solid',
   borderBottomColor: 'neutral.80',
-  overflow: 'auto'
+  overflowX: 'auto',
+  scrollPaddingBottom: '20px'
 };
 var row = {
   '&:nth-of-type(odd) ': {
@@ -65,7 +68,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/components/TableBase/stories/NextGenTableBase.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Cell, Column, Row, TableBase, TBody, THead } from '../../..';
+import { Card, Cell, Column, Row, TableBase, TBody, THead } from '../../..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NextGenTableBase = function NextGenTableBase() {
   var headers = [{
@@ -34,7 +34,10 @@ var NextGenTableBase = function NextGenTableBase() {
     additional_grant: '+25,000',
     total_grant: '75,000'
   }];
-  return ___EmotionJSX(TableBase, {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper",
+    overflow: "unset"
+  }, ___EmotionJSX(TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table"
   }, ___EmotionJSX(THead, {
@@ -51,6 +54,6 @@ var NextGenTableBase = function NextGenTableBase() {
     }, function (columnKey) {
       return ___EmotionJSX(Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 export default NextGenTableBase;

package/lib/components/Tabs/Tabs.stories.js

@@ -45,13 +45,25 @@ export default {
   }
 };
 var tabs = [{
-  name: 'Tab 1',
-  children: ___EmotionJSX(Text, null, "Tab 1 body")
+  name: 'Overview',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
 }, {
-  name: 'Tab 2',
-  children: ___EmotionJSX(Text, null, "Tab 2 body")
+  name: 'Configuration',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
+}, {
+  name: 'Resources',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
+}, {
+  name: 'Policies',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
+}, {
+  name: 'Attribute Mappings',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
+}, {
+  name: 'Access',
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
 }, {
-  name: 'Tab 3',
+  name: 'Integration',
   children: ___EmotionJSX(Text, null, "Tab 3 body")
 }];
 var customTabs = [{
@@ -81,7 +93,11 @@ export var Controlled = function Controlled() {
     _useState2 = _slicedToArray(_useState, 2),
     currentTab = _useState2[0],
     setCurrentTab = _useState2[1];
-  return ___EmotionJSX(Tabs, {
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: '500px'
+    }
+  }, ___EmotionJSX(Tabs, {
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab,
     items: tabs
@@ -91,7 +107,7 @@ export var Controlled = function Controlled() {
       title: item.name,
       textValue: item.name
     }, item.children);
-  });
+  }));
 };
 export var Centered = function Centered() {
   return ___EmotionJSX(Tabs, {