@pingux/astro 2.131.0-alpha.1 → 2.131.0

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

@@ -2,5 +2,19 @@ declare const _default: {
     base: {
         display: string;
     };
+    indeterminateCheckboxIcon: {
+        width: string;
+        height: string;
+        '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+            fill: string;
+            stroke: string;
+        };
+        '&.is-disabled': {
+            '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+                fill: string;
+                stroke: string;
+            };
+        };
+    };
 };
 export default _default;

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

@@ -8,7 +8,22 @@ exports["default"] = void 0;
 var base = {
   display: 'flex'
 };
+var indeterminateCheckboxIcon = {
+  width: '24px',
+  height: '24px',
+  '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+    fill: 'active',
+    stroke: 'active'
+  },
+  '&.is-disabled': {
+    '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+      fill: 'neutral.80',
+      stroke: 'neutral.80'
+    }
+  }
+};
 var _default = {
-  base: base
+  base: base,
+  indeterminateCheckboxIcon: indeterminateCheckboxIcon
 };
 exports["default"] = _default;

package/lib/cjs/components/Checkbox/CheckboxBase.js

@@ -15,7 +15,6 @@ var _visuallyHidden = require("@react-aria/visually-hidden");
 var _lodash = require("lodash");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _themeUi = require("theme-ui");
-var _colors = require("../../styles/colors");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 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); }
@@ -33,10 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
   }, props));
 });
 var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
-  var color = props.disabled ? _colors.neutral[80] : _colors.active;
   return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    width: "24",
-    height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -50,8 +46,7 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     width: "17",
     height: "17",
     rx: "1.5",
-    fill: color,
-    stroke: color
+    id: "indeterminate-checkbox-icon-wrapper"
   }), (0, _react2.jsx)("rect", {
     x: "6.5",
     y: "11",
@@ -76,6 +71,7 @@ var IndeterminateCheckbox = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     ref: ref
   }, props))), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: IndeterminateCheckboxIcon,
+    variant: "variants.box.indeterminateCheckboxIcon",
     mr: 2
   }, props, {
     opacity: 1

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

@@ -4,6 +4,7 @@ declare const _default: {
         padding: string;
         outline: string;
         cursor: string;
+        fontFamily: string;
         '&.is-focused, &.is-selected, &.is-pressed': {
             color: string;
             bg: string;

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

@@ -10,6 +10,7 @@ var item = {
   padding: '10px 10px',
   outline: 'none',
   cursor: 'pointer',
+  fontFamily: 'standard',
   '&.is-focused, &.is-selected, &.is-pressed': {
     color: 'white',
     bg: 'active',

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import type { TableBaseProps, TableCellProps, TableColumnHeaderProps, TableHeaderRowProps, TableRowGroupProps, TableRowProps } from '../../types/tableBase';
-declare const TableBase: React.ForwardRefExoticComponent<TableBaseProps & React.RefAttributes<HTMLTableElement>>;
+import type { TableBaseProps, TableCellProps, TableCheckboxCellProps, TableColumnHeaderProps, TableHeaderRowProps, TableRowGroupProps, TableRowProps } 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 const TableHeaderRow: (props: TableHeaderRowProps) => React.JSX.Element;
-export declare const TableColumnHeader: (props: TableColumnHeaderProps) => React.JSX.Element;
-export declare const TableRow: (props: TableRowProps) => React.JSX.Element;
-export declare function TableCell(props: TableCellProps): React.JSX.Element;
+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

@@ -15,23 +15,29 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableCell = TableCell;
-exports["default"] = exports.TableRowGroup = exports.TableRow = exports.TableHeaderRow = exports.TableColumnHeader = void 0;
+exports.TableCheckboxCell = TableCheckboxCell;
+exports.TableColumnHeader = TableColumnHeader;
+exports.TableHeaderRow = TableHeaderRow;
+exports.TableRow = TableRow;
+exports["default"] = exports.TableRowGroup = 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 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 _visuallyHidden = require("@react-aria/visually-hidden");
 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"];
+var _excluded = ["caption", "selectionMode", "selectionBehavior", "tableBodyProps", "showSelectionCheckboxes", "isStickyHeader"],
+  _excluded2 = ["type", "children", "hasCaption", "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; }
@@ -40,15 +46,18 @@ 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,
+    selectionBehavior = props.selectionBehavior,
     tableBodyProps = props.tableBodyProps,
+    showSelectionCheckboxes = props.showSelectionCheckboxes,
+    _props$isStickyHeader = props.isStickyHeader,
+    isStickyHeader = _props$isStickyHeader === void 0 ? false : _props$isStickyHeader,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tableWidth = _useState2[0],
+    setTableWidth = _useState2[1];
   var state = (0, _table2.useTableState)(_objectSpread(_objectSpread({}, props), {}, {
-    selectionMode: selectionMode,
-    selectedKeys: selectedKeys,
-    defaultSelectedKeys: selectedKeys ? undefined : defaultSelectedKeys
+    showSelectionCheckboxes: showSelectionCheckboxes || selectionMode === 'multiple' && selectionBehavior !== 'replace'
   }));
   var tableRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var bodyRef = (0, _react.useRef)(null);
@@ -58,9 +67,38 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       scrollRef: bodyRef
     }), state, tableRef),
     gridProps = _useTable.gridProps;
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+  var getDefaultWidth = (0, _react.useCallback)(function (node) {
+    if (node.props.isSelectionCell) {
+      return 70;
+    }
+    return undefined;
+  }, []);
+  var getDefaultMinWidth = (0, _react.useCallback)(function (node) {
+    if (node.props.isSelectionCell) {
+      return 50;
+    }
+    return 70;
+  }, []);
+  var layoutState = (0, _table2.useTableColumnResizeState)({
+    getDefaultWidth: getDefaultWidth,
+    getDefaultMinWidth: getDefaultMinWidth,
+    tableWidth: tableWidth
+  }, state);
+  (0, _react.useLayoutEffect)(function () {
+    if (tableRef && tableRef.current) {
+      setTableWidth(tableRef.current.clientWidth);
+    }
+  }, [tableRef]);
+  (0, _utils.useResizeObserver)({
+    ref: tableRef,
+    onResize: function onResize() {
+      return setTableWidth(tableRef.current.clientWidth);
+    }
+  });
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "table",
-    display: "table",
     variant: "tableBase.container",
     ref: tableRef
   }, gridProps, others), caption && (0, _react2.jsx)(_.Box, {
@@ -71,7 +109,8 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     id: props['aria-describedby'] || 'table-caption'
   }, caption), (0, _react2.jsx)(TableRowGroup, {
     type: "thead",
-    hasCaption: !!caption
+    hasCaption: !!caption,
+    isSticky: isStickyHeader
   }, (0, _map["default"])(_context = collection.headerRows).call(_context, function (headerRow) {
     var _context2, _state$collection$get, _state$collection;
     return (0, _react2.jsx)(TableHeaderRow, {
@@ -79,10 +118,16 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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, {
+      return column.props.isSelectionCell ? (0, _react2.jsx)(TableSelectAllCell, {
+        key: column.key,
+        column: column,
+        state: state,
+        layoutState: layoutState
+      }) : (0, _react2.jsx)(TableColumnHeader, {
         key: column.key,
         column: column,
-        state: state
+        state: state,
+        layoutState: layoutState
       });
     }));
   })), (0, _react2.jsx)(TableRowGroup, (0, _extends2["default"])({
@@ -95,13 +140,19 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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, {
+      return cell.props.isSelectionCell ? (0, _react2.jsx)(TableCheckboxCell, {
+        key: cell.key,
+        cell: cell,
+        state: state,
+        layoutState: layoutState
+      }) : (0, _react2.jsx)(TableCell, {
         key: cell.key,
         cell: cell,
-        state: state
+        state: state,
+        layoutState: layoutState
       });
     }));
-  })));
+  }))));
 });
 var _default = TableBase;
 exports["default"] = _default;
@@ -110,24 +161,24 @@ var TableRowGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     children = props.children,
     hasCaption = props.hasCaption,
     className = props.className,
+    isSticky = props.isSticky,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
   var _useTableRowGroup = (0, _table.useTableRowGroup)(),
     rowGroupProps = _useTableRowGroup.rowGroupProps;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      hasCaption: hasCaption
+      hasCaption: hasCaption,
+      isSticky: isSticky && type === 'thead'
     }),
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    ref: ref
-  }, rowGroupProps, {
+    ref: ref,
     as: type,
     className: classNames,
-    display: "table-row-group",
     variant: "tableBase.".concat(type)
-  }, others), children);
+  }, rowGroupProps, others), children);
 });
 exports.TableRowGroup = TableRowGroup;
-var TableHeaderRow = function TableHeaderRow(props) {
+function TableHeaderRow(props) {
   var item = props.item,
     state = props.state,
     children = props.children;
@@ -138,16 +189,16 @@ var TableHeaderRow = function TableHeaderRow(props) {
     rowProps = _useTableHeaderRow.rowProps;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "tr",
-    display: "table-row"
+    isRow: true
   }, rowProps, {
     ref: ref
   }), children);
-};
-exports.TableHeaderRow = TableHeaderRow;
-var TableColumnHeader = function TableColumnHeader(props) {
+}
+function TableColumnHeader(props) {
   var column = props.column,
     state = props.state,
-    className = props.className;
+    className = props.className,
+    layoutState = props.layoutState;
   var ref = (0, _react.useRef)(null);
   var _useTableColumnHeader = (0, _table.useTableColumnHeader)({
       node: column
@@ -161,16 +212,16 @@ var TableColumnHeader = function TableColumnHeader(props) {
     }),
     classNames = _useStatusClasses2.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    ref: ref,
     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) {
+    className: classNames,
+    sx: _objectSpread({
+      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
+    }, column.props.sx)
+  }, (0, _utils.mergeProps)(columnHeaderProps, focusProps, column.props)), column.rendered);
+}
+function TableRow(props) {
   var item = props.item,
     state = props.state,
     children = props.children,
@@ -200,20 +251,19 @@ var TableRow = function TableRow(props) {
     }),
     classNames = _useStatusClasses3.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    display: "table-row",
     as: "tr",
+    isRow: true,
     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;
+    className = props.className,
+    layoutState = props.layoutState;
   var ref = (0, _react.useRef)(null);
   var _useTableCell = (0, _table.useTableCell)({
       node: cell
@@ -223,16 +273,60 @@ function TableCell(props) {
     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
+      isFocused: isFocusVisible
     }),
     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,
+    className: classNames,
+    sx: _objectSpread({
+      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
+    }, 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,
+    layoutState = props.layoutState;
+  var ref = (0, _react.useRef)(null);
+  var _useTableColumnHeader2 = (0, _table.useTableColumnHeader)({
+      node: column
+    }, state, ref),
+    columnHeaderProps = _useTableColumnHeader2.columnHeaderProps;
+  var _useTableSelectAllChe = (0, _table.useTableSelectAllCheckbox)(state),
+    checkboxProps = _useTableSelectAllChe.checkboxProps;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    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' ? (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, checkboxProps['aria-label']) : (0, _react2.jsx)(_.CheckboxField, (0, _extends2["default"])({
+    checkBoxProps: {
+      'data-testid': 'select-all-checkbox'
+    }
+  }, checkboxProps)));
 }

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

@@ -1,6 +1,8 @@
 import { StoryFn } from '@storybook/react';
-import { TableProps } from '../../types';
+import { TableBaseProps } from '../../types/tableBase';
 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>;
+export declare const Default: StoryFn<TableBaseProps<object>>;
+export declare const MultiSelection: StoryFn<TableBaseProps<object>>;
+export declare const WithStickyHeader: StoryFn<TableBaseProps<object>>;
+export declare const WithPagination: StoryFn<TableBaseProps<object>>;

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

@@ -1,17 +1,27 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 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"));
+exports["default"] = exports.WithStickyHeader = exports.WithPagination = exports.MultiSelection = exports.Default = void 0;
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _ = require("../..");
+var _hooks = require("../../hooks");
 var _items = require("../../utils/devUtils/constants/items");
 var _TableBase = _interopRequireDefault(require("./TableBase.mdx"));
 var _react2 = require("@emotion/react");
+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; }
 var _default = {
   title: 'Experimental/Table',
   component: _.TableBase,
@@ -56,10 +66,15 @@ var objects = [{
   additional_grant: '+25,000',
   total_grant: '75,000'
 }];
+var statusVariant = {
+  Pending: 'warningStatusBadge',
+  Failed: 'criticalStatusBadge',
+  Rejected: 'criticalStatusBadge',
+  Active: 'healthyStatusBadge',
+  Inactive: 'secondaryStatusBadge'
+};
 var Default = function Default() {
-  return (0, _react2.jsx)(_.Card, {
-    variant: "cards.tableWrapper"
-  }, (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table"
   }, (0, _react2.jsx)(_.THead, {
@@ -76,36 +91,107 @@ var Default = function Default() {
     }, 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"
+var MultiSelection = function MultiSelection() {
+  var _React$useState = _react["default"].useState(new _set["default"](['1', '3'])),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    selectedKeys = _React$useState2[0],
+    setSelectedKeys = _React$useState2[1];
+  return (0, _react2.jsx)(_.TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table",
+    selectionMode: "multiple",
+    selectedKeys: selectedKeys,
+    onSelectionChange: setSelectedKeys
+  }, (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.MultiSelection = MultiSelection;
+var WithStickyHeader = function WithStickyHeader() {
+  return (0, _react2.jsx)(_.TableBase, {
+    "aria-label": "table",
+    isStickyHeader: true,
+    tableBodyProps: {
+      style: {
+        height: '300px'
+      }
+    }
   }, (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, {
+    width: 200
+  }, "Name"), (0, _react2.jsx)(_.Column, {
+    width: 300
+  }, "Email"), (0, _react2.jsx)(_.Column, {
+    width: 150
+  }, "Status"), (0, _react2.jsx)(_.Column, {
+    width: "1fr"
+  }, "Bio")), (0, _react2.jsx)(_.TBody, {
     items: _items.items
   }, function (item) {
+    var _context;
+    return (0, _react2.jsx)(_.Row, {
+      key: item.email
+    }, (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!")));
+  }));
+};
+exports.WithStickyHeader = WithStickyHeader;
+var ExampleTable = function ExampleTable() {
+  var _usePaginationState = (0, _hooks.usePaginationState)(),
+    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"
+  }, (0, _react2.jsx)(_.THead, null, (0, _react2.jsx)(_.Column, {
+    width: 200
+  }, "Name"), (0, _react2.jsx)(_.Column, {
+    width: 300
+  }, "Email"), (0, _react2.jsx)(_.Column, {
+    width: 150
+  }, "Status"), (0, _react2.jsx)(_.Column, {
+    width: "1fr"
+  }, "Bio")), (0, _react2.jsx)(_.TBody, {
+    items: renderItems
+  }, function (item) {
+    var _context2;
     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, {
+    }, (0, _react2.jsx)(_.Cell, null, (0, _concat["default"])(_context2 = "".concat(item.firstName, " ")).call(_context2, 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, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!"));
-  })));
+    })), (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!")));
+  }));
+};
+var WithPagination = function WithPagination() {
+  var _useState = (0, _react.useState)(10),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    offsetCount = _useState2[0],
+    setOffsetCount = _useState2[1];
+  return (0, _react2.jsx)(_.PaginationProvider, null, (0, _react2.jsx)(ExampleTable, null), (0, _react2.jsx)(_.Pagination, {
+    totalCount: _items.items.length,
+    offsetCount: offsetCount,
+    onOffsetCountChange: setOffsetCount,
+    offsetOptions: [10, 20, 50, 100]
+  }));
 };
-exports.Customization = Customization;
+exports.WithPagination = WithPagination;