@pingux/astro 2.129.0 → 2.130.0-alpha.1

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

@@ -0,0 +1,238 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableCell = TableCell;
+exports["default"] = exports.TableRowGroup = exports.TableRow = exports.TableHeaderRow = exports.TableColumnHeader = 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"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _focus = require("@react-aria/focus");
+var _interactions = require("@react-aria/interactions");
+var _table = require("@react-aria/table");
+var _utils = require("@react-aria/utils");
+var _table2 = require("@react-stately/table");
+var _ = require("../..");
+var _hooks = require("../../hooks");
+var _react2 = require("@emotion/react");
+var _excluded = ["caption", "selectionMode", "selectedKeys", "defaultSelectedKeys", "tableBodyProps"],
+  _excluded2 = ["type", "children", "hasCaption", "className"];
+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; }
+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) { (0, _defineProperty2["default"])(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; }
+var TableBase = /*#__PURE__*/(0, _react.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,
+    tableBodyProps = props.tableBodyProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var state = (0, _table2.useTableState)(_objectSpread(_objectSpread({}, props), {}, {
+    selectionMode: selectionMode,
+    selectedKeys: selectedKeys,
+    defaultSelectedKeys: selectedKeys ? undefined : defaultSelectedKeys
+  }));
+  var tableRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var bodyRef = (0, _react.useRef)(null);
+  var collection = state.collection;
+  var _useTable = (0, _table.useTable)(_objectSpread(_objectSpread({}, props), {}, {
+      'aria-describedby': props['aria-describedby'] || 'table-caption',
+      scrollRef: bodyRef
+    }), state, tableRef),
+    gridProps = _useTable.gridProps;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "table",
+    display: "table",
+    variant: "tableBase.container",
+    ref: tableRef
+  }, gridProps, others), caption && (0, _react2.jsx)(_.Box, {
+    as: "caption",
+    display: "table-caption",
+    variant: "tableBase.caption",
+    textAlign: "left",
+    id: props['aria-describedby'] || 'table-caption'
+  }, caption), (0, _react2.jsx)(TableRowGroup, {
+    type: "thead",
+    hasCaption: !!caption
+  }, (0, _map["default"])(_context = collection.headerRows).call(_context, function (headerRow) {
+    var _context2, _state$collection$get, _state$collection;
+    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) {
+      return (0, _react2.jsx)(TableColumnHeader, {
+        key: column.key,
+        column: column,
+        state: state
+      });
+    }));
+  })), (0, _react2.jsx)(TableRowGroup, (0, _extends2["default"])({
+    ref: bodyRef,
+    type: "tbody"
+  }, tableBodyProps), (0, _map["default"])(_context3 = (0, _from["default"])(collection)).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) {
+      return (0, _react2.jsx)(TableCell, {
+        key: cell.key,
+        cell: cell,
+        state: state
+      });
+    }));
+  })));
+});
+var _default = TableBase;
+exports["default"] = _default;
+var TableRowGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var type = props.type,
+    children = props.children,
+    hasCaption = props.hasCaption,
+    className = props.className,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  var _useTableRowGroup = (0, _table.useTableRowGroup)(),
+    rowGroupProps = _useTableRowGroup.rowGroupProps;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      hasCaption: hasCaption
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    ref: ref
+  }, rowGroupProps, {
+    as: type,
+    className: classNames,
+    display: "table-row-group",
+    variant: "tableBase.".concat(type)
+  }, others), children);
+});
+exports.TableRowGroup = TableRowGroup;
+var TableHeaderRow = function TableHeaderRow(props) {
+  var item = props.item,
+    state = props.state,
+    children = props.children;
+  var ref = (0, _react.useRef)(null);
+  var _useTableHeaderRow = (0, _table.useTableHeaderRow)({
+      node: item
+    }, state, ref),
+    rowProps = _useTableHeaderRow.rowProps;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "tr",
+    display: "table-row"
+  }, rowProps, {
+    ref: ref
+  }), children);
+};
+exports.TableHeaderRow = TableHeaderRow;
+var TableColumnHeader = function TableColumnHeader(props) {
+  var column = props.column,
+    state = props.state,
+    className = props.className;
+  var ref = (0, _react.useRef)(null);
+  var _useTableColumnHeader = (0, _table.useTableColumnHeader)({
+      node: column
+    }, state, ref),
+    columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
+  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(className, {
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses2.classNames;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "th",
+    display: "table-cell",
+    variant: "tableBase.head",
+    className: classNames
+  }, (0, _utils.mergeProps)(columnHeaderProps, focusProps), {
+    ref: ref
+  }, column.props), column.rendered);
+};
+exports.TableColumnHeader = TableColumnHeader;
+var TableRow = function TableRow(props) {
+  var item = props.item,
+    state = props.state,
+    children = props.children,
+    className = props.className;
+  var ref = (0, _react.useRef)(null);
+  var _useTableRow = (0, _table.useTableRow)({
+      node: item
+    }, state, ref),
+    rowProps = _useTableRow.rowProps;
+  var isSelected = state.selectionManager.isSelected(item.key);
+  var _useFocusRing2 = (0, _focus.useFocusRing)(),
+    isFocusVisible = _useFocusRing2.isFocusVisible,
+    focusProps = _useFocusRing2.focusProps;
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = (0, _interactions.usePress)({
+      ref: ref
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
+  var _useStatusClasses3 = (0, _hooks.useStatusClasses)(className, {
+      isSelected: isSelected,
+      isHovered: isHovered,
+      isPressed: isPressed,
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses3.classNames;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    display: "table-row",
+    as: "tr",
+    className: classNames,
+    variant: "tableBase.row"
+  }, (0, _utils.mergeProps)(rowProps, focusProps, hoverProps, pressProps), {
+    ref: ref
+  }), children);
+};
+exports.TableRow = TableRow;
+function TableCell(props) {
+  var _cell$props$noWrap;
+  var cell = props.cell,
+    state = props.state,
+    className = props.className;
+  var ref = (0, _react.useRef)(null);
+  var _useTableCell = (0, _table.useTableCell)({
+      node: cell
+    }, state, ref),
+    gridCellProps = _useTableCell.gridCellProps;
+  var _useFocusRing3 = (0, _focus.useFocusRing)(),
+    isFocusVisible = _useFocusRing3.isFocusVisible,
+    focusProps = _useFocusRing3.focusProps;
+  var _useStatusClasses4 = (0, _hooks.useStatusClasses)(className, {
+      isFocused: isFocusVisible,
+      noWrap: (_cell$props$noWrap = cell.props.noWrap) !== null && _cell$props$noWrap !== void 0 ? _cell$props$noWrap : false
+    }),
+    classNames = _useStatusClasses4.classNames;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "td",
+    display: "table-cell",
+    className: classNames
+  }, (0, _utils.mergeProps)(gridCellProps, focusProps), {
+    variant: "tableBase.data",
+    ref: ref
+  }, cell.props), cell.rendered);
+}

package/lib/cjs/components/TableBase/TableBase.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Table/Table" />
+
+# Table
+
+Data tables display information in a grid-like format of rows and columns. 
+They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data. 
+
+Column header names describe the type of content displayed in each column. 
+Each row contains data related to a single entity.
+
+Tables should:
+- Have consistently aligned content.
+- Use multiple heading rows for higher-level grouping of the columns.
+- Use column dividers sparingly.
+
+Tables shouldn’t use different indicators to represent empty fields.
+
+This basic component is rendered as an HTML `<table>`, which accepts the `<TableBody>` component and the `<TableHead>` as children.
+
+### Required Components
+
+This component requires these additional components: 
+
+- TableCaption
+- TableHead
+- TableRow
+- TableCell
+- TableBody

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

@@ -0,0 +1,6 @@
+import { StoryFn } from '@storybook/react';
+import { TableProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<TableProps>;
+export declare const Customization: StoryFn<TableProps>;

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

@@ -0,0 +1,111 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = exports.Customization = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _ = require("../..");
+var _items = require("../../utils/devUtils/constants/items");
+var _TableBase = _interopRequireDefault(require("./TableBase.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/Table',
+  component: _.TableBase,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TableBase["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var headers = [{
+  key: 'type',
+  name: 'Type'
+}, {
+  key: 'date',
+  name: 'Date'
+}, {
+  key: 'additional_grant',
+  name: 'Additional Grant'
+}, {
+  key: 'total_grant',
+  name: 'Total Grant'
+}];
+var objects = [{
+  id: 1,
+  type: 'Lorem ipsum',
+  date: '2020-06-12',
+  additional_grant: '+25,000',
+  total_grant: '25,000'
+}, {
+  id: 2,
+  type: 'Lorem ipsum',
+  date: '2020-10-01',
+  additional_grant: '+25,000',
+  total_grant: '50,000'
+}, {
+  id: 3,
+  type: 'Lorem ipsum',
+  date: '2021-01-01',
+  additional_grant: '+25,000',
+  total_grant: '75,000'
+}];
+var Default = function Default() {
+  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
+    }, column.name);
+  }), (0, _react2.jsx)(_.TBody, {
+    items: objects
+  }, function (item) {
+    return (0, _react2.jsx)(_.Row, {
+      key: item.id
+    }, function (columnKey) {
+      return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
+    });
+  })));
+};
+exports.Default = Default;
+var Customization = function Customization() {
+  var statusVariant = {
+    'Pending': 'warningStatusBadge',
+    'Failed': 'criticalStatusBadge',
+    'Rejected': 'criticalStatusBadge',
+    'Active': 'healthyStatusBadge',
+    'Inactive': 'secondaryStatusBadge'
+  };
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
+    "aria-label": "table"
+  }, (0, _react2.jsx)(_.THead, null, (0, _react2.jsx)(_.Column, {
+    width: 70
+  }, "#"), (0, _react2.jsx)(_.Column, null, "Name"), (0, _react2.jsx)(_.Column, null, "Email"), (0, _react2.jsx)(_.Column, null, "Status"), (0, _react2.jsx)(_.Column, null, "Bio")), (0, _react2.jsx)(_.TBody, {
+    items: _items.items
+  }, function (item) {
+    return (0, _react2.jsx)(_.Row, {
+      key: item.email
+    }, (0, _react2.jsx)(_.Cell, null, item.id), (0, _react2.jsx)(_.Cell, {
+      noWrap: true
+    }, item.firstName, ' ', item.lastName), (0, _react2.jsx)(_.Cell, {
+      noWrap: true
+    }, item.email), (0, _react2.jsx)(_.Cell, null, (0, _react2.jsx)(_.Badge, {
+      variant: statusVariant[item.status],
+      label: item.status
+    })), (0, _react2.jsx)(_.Cell, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!"));
+  })));
+};
+exports.Customization = Customization;

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

@@ -0,0 +1,76 @@
+declare const _default: {
+    thead: {};
+    tbody: {
+        borderTop: string;
+        borderTopColor: string;
+        borderBottom: string;
+        borderBottomColor: string;
+    };
+    caption: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        p: string;
+        textAlign: string;
+    };
+    container: {
+        width: string;
+        borderSpacing: string;
+        borderCollapse: string;
+    };
+    data: {
+        p: string;
+        '&.no-wrap': {
+            whiteSpace: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineStyle: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+    };
+    head: {
+        fontWeight: number;
+        textAlign: string;
+        p: string;
+        cursor: string;
+        '&.is-focused': {
+            outline: string;
+            outlineStyle: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+    };
+    row: {
+        '&:nth-of-type(odd) ': {
+            bg: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineStyle: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {};
+        '&.is-selected': {};
+    };
+};
+export default _default;

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _Text = require("../Text/Text.styles");
+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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var defaultFocus = {
+  outline: '1px',
+  outlineStyle: 'solid',
+  outlineColor: 'focus',
+  outlineOffset: '-1px'
+};
+var container = {
+  width: '100%',
+  borderSpacing: '0',
+  borderCollapse: 'collapse'
+};
+var caption = {
+  fontFamily: 'standard',
+  fontSize: 'lg',
+  fontWeight: '2',
+  p: 'sm',
+  textAlign: 'left'
+};
+var thead = {};
+var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
+  fontWeight: 500,
+  textAlign: 'left',
+  p: 'sm',
+  cursor: 'default',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var tbody = {
+  borderTop: '1px solid',
+  borderTopColor: 'neutral.40',
+  borderBottom: '1px solid',
+  borderBottomColor: 'neutral.80'
+};
+var row = {
+  '&:nth-of-type(odd) ': {
+    bg: 'neutral.95'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    // This is the hover state for the row
+  },
+  '&.is-selected': {
+    // This is the selected state for the row
+  }
+};
+var data = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
+  p: 'sm',
+  '&.no-wrap': {
+    whiteSpace: 'nowrap'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var _default = {
+  thead: thead,
+  tbody: tbody,
+  caption: caption,
+  container: container,
+  data: data,
+  head: head,
+  row: row
+};
+exports["default"] = _default;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _index = require("../../index");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _TableBase = _interopRequireDefault(require("./TableBase"));
+var _react3 = require("@emotion/react");
+var testId = 'test-table';
+var defaultProps = {
+  'aria-label': 'table',
+  'data-testid': testId,
+  caption: 'Populations of Countries'
+};
+var headers = [{
+  key: 'country',
+  name: 'Country'
+}, {
+  key: 'population',
+  name: 'Population'
+}, {
+  key: 'continent',
+  name: 'Continent'
+}];
+var objects = [{
+  key: '1',
+  country: 'USA',
+  population: '320,000,000',
+  continent: 'South America',
+  cellProps: {
+    noWrap: true
+  }
+}, {
+  key: '2',
+  country: 'Canada',
+  population: '37,000,000',
+  continent: 'North America'
+}, {
+  key: '3',
+  country: 'China',
+  population: '1,398,000,000',
+  continent: 'Asia'
+}, {
+  key: '4',
+  country: 'France',
+  population: '67,000,000',
+  continent: 'Europe'
+}];
+var getComponent = function getComponent() {
+  return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], defaultProps, (0, _react3.jsx)(_index.THead, {
+    columns: headers
+  }, function (head) {
+    return (0, _react3.jsx)(_index.Column, {
+      key: head.key
+    }, head.name);
+  }), (0, _react3.jsx)(_index.TBody, {
+    items: objects
+  }, function (row) {
+    return (0, _react3.jsx)(_index.Row, {
+      key: row.key
+    }, function (columnKey) {
+      return (0, _react3.jsx)(_index.Cell, row.cellProps || {}, row[columnKey]);
+    });
+  })));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_TableBase["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react3.jsx)(_index.THead, {
+      columns: headers
+    }, function (head) {
+      return (0, _react3.jsx)(_index.Column, {
+        key: head.key
+      }, head.name);
+    }), (0, _react3.jsx)(_index.TBody, {
+      items: objects
+    }, function (row) {
+      return (0, _react3.jsx)(_index.Row, {
+        key: row.key
+      }, function (columnKey) {
+        return (0, _react3.jsx)(_index.Cell, null, row[columnKey]);
+      });
+    }));
+  }
+});
+test('default table', function () {
+  getComponent();
+  var table = _react2.screen.getByTestId(testId);
+  expect(table).toBeInTheDocument();
+});
+test('renders caption', function () {
+  getComponent();
+  var caption = _react2.screen.getByText(defaultProps.caption);
+  expect(caption).toBeInTheDocument();
+});
+test('renders table headers', function () {
+  getComponent();
+  var headerCells = _react2.screen.getAllByRole('columnheader');
+  expect(headerCells).toHaveLength(headers.length);
+  (0, _forEach["default"])(headers).call(headers, function (header) {
+    expect(_react2.screen.getByText(header.name)).toBeInTheDocument();
+  });
+});
+test('renders table rows', function () {
+  getComponent();
+  var rows = _react2.screen.getAllByRole('row');
+  expect(rows).toHaveLength(objects.length + 1);
+  (0, _forEach["default"])(objects).call(objects, function (object) {
+    expect(_react2.screen.getByText(object.country)).toBeInTheDocument();
+    expect(_react2.screen.getByText(object.population)).toBeInTheDocument();
+    expect(_react2.screen.getByText(object.continent)).toBeInTheDocument();
+  });
+});
+test('renders cell with noWrap prop', function () {
+  getComponent();
+  var cell = _react2.screen.getByText('South America');
+  expect(cell).toHaveClass('no-wrap');
+});

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

@@ -0,0 +1 @@
+export { default } from './TableBase';