@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/Table/BulkActions.stories.d.ts

@@ -1,257 +0,0 @@
-import * as React from 'react';
-import type { TableProps } from './';
-declare const _default: {
-    argTypes: {
-        readonly headers: {
-            readonly type: {
-                readonly required: true;
-            };
-            readonly description: "Provide an array of objects to render the header, each object should consist of label(*), key(*), sortable, sticky and render function";
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly table: {
-                readonly type: {
-                    readonly summary: "{label: React.ReactNode, key: $Keys<T>, className?: string, filterIcon?: React.ReactNode, filtered?: boolean, subtext?: string, sortable?: boolean, headerIconClassName?: string, sticky?: boolean, render?: React.ComponentType<{data: T, extras?: U, className?: string, selected?: boolean,}>, }";
-                };
-            };
-        };
-        readonly entries: {
-            readonly type: {
-                readonly required: true;
-            };
-            readonly description: "Provide an array of object. Each object belong on one row in the table. Each object should have id and all the keys with values that is being passed in headers array";
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly table: {
-                readonly type: {
-                    readonly summary: "Array<T>";
-                };
-            };
-        };
-        readonly classNames: {
-            readonly description: "Provide optional classNames to be applied to the wrapper, table, tableHeader, tableBody, tableRow, or checkbox";
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly table: {
-                readonly type: {
-                    readonly summary: "{wrapper?: string, table?: string, tableHeader?: string, tableBody?: string, tableRow?: string, checkbox?: string}";
-                };
-            };
-        };
-        readonly Row: {
-            readonly description: "Custom Row component to be passed to table";
-            readonly table: {
-                readonly type: {
-                    readonly summary: "TableRow<T, U>";
-                };
-            };
-        };
-        readonly sortable: {
-            readonly description: "Sort Icon will appear in right side of column's header with column level true sortable value";
-            readonly name: "sortable";
-            readonly options: readonly [false, true];
-            readonly control: "boolean";
-            readonly table: {
-                readonly type: {
-                    readonly summary: "boolean";
-                };
-                readonly defaultValue: {
-                    readonly summary: true;
-                };
-            };
-        };
-        readonly showHeader: {
-            readonly description: "Show or hide header";
-            readonly options: readonly [false, true];
-            readonly control: "boolean";
-            readonly table: {
-                readonly type: {
-                    readonly summary: "boolean";
-                };
-                readonly defaultValue: {
-                    readonly summary: true;
-                };
-            };
-        };
-        readonly defaultSortKey: {
-            readonly description: "key name for which table should be sorted by default. headers array should have sortable true for that key object";
-            readonly control: {
-                readonly type: "text";
-            };
-            readonly table: {
-                readonly type: {
-                    readonly summary: "string";
-                };
-            };
-        };
-        readonly defaultSortDirection: {
-            readonly description: "default sorting direction for the defaultSortKey column";
-            readonly control: {
-                readonly type: "text";
-            };
-            readonly table: {
-                readonly type: {
-                    readonly summary: "'asc' | 'desc' | 'original'";
-                };
-            };
-        };
-        readonly selectedKeys: {
-            readonly description: "array of keys which are selected. This prop is also used to decide weather to show checkboxes or not. So, pass an empty array in case no row is selected.";
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly table: {
-                readonly type: {
-                    readonly summary: "string[]";
-                };
-            };
-        };
-        readonly disabledKeys: {
-            readonly description: "array of keys which are disabled. This prop is used to disable the checkbox and its events for particular rows.";
-            readonly control: {
-                readonly type: "object";
-            };
-            readonly table: {
-                readonly type: {
-                    readonly summary: "string[]";
-                };
-            };
-        };
-        readonly onSelect: {
-            readonly description: "callback function when any row is selected";
-            readonly action: "selected";
-            readonly type: {
-                readonly summary: "(keys: string[]) => mixed";
-            };
-        };
-        readonly idName: {
-            readonly description: "name of key in row objects that has to be used as id";
-        };
-        readonly onSort: {
-            readonly description: "callback function when any table is sorted";
-            readonly action: "sorted";
-            readonly type: {
-                readonly summary: "(key: $Keys<T>, direction: SortDirection) => void";
-            };
-        };
-        readonly isLoading: {
-            readonly description: "to wait for data to populate in table and show loading state when entries array is empty.";
-            readonly options: readonly [false, true];
-            readonly control: "boolean";
-            readonly table: {
-                readonly type: {
-                    readonly summary: "boolean";
-                };
-                readonly defaultValue: {
-                    readonly summary: false;
-                };
-            };
-        };
-        readonly emptyText: {
-            readonly description: "Provide component to be shown in case of empty data";
-            readonly table: {
-                readonly type: {
-                    readonly summary: "React.Component";
-                };
-            };
-        };
-        readonly customLoader: {
-            readonly description: "Provide optional component to be shown in case of loading state. It will override the default loader.";
-            readonly table: {
-                readonly type: {
-                    readonly summary: "React.Component";
-                };
-            };
-        };
-        readonly disabled: {
-            readonly description: "disable all the checkboxes of each row in the table";
-            readonly options: readonly [false, true];
-            readonly control: "boolean";
-            readonly table: {
-                readonly type: {
-                    readonly summary: "boolean";
-                };
-                readonly defaultValue: {
-                    readonly summary: false;
-                };
-            };
-        };
-        readonly borderRadius: {
-            readonly description: "Border Radius of all four corners of the table. Default value is borderRadiusMedium i.e., 12px.";
-            readonly control: "text";
-            readonly table: {
-                readonly type: {
-                    readonly summary: "string";
-                };
-                readonly defaultValue: {
-                    readonly summary: "12px";
-                };
-            };
-        };
-        readonly stickyHeader: {
-            readonly description: "Sticky header will stick the header to the top of the table when scrolling. This would only work if the table wrapper is scrollable.";
-            readonly control: "boolean";
-            readonly table: {
-                readonly type: {
-                    readonly summary: "boolean";
-                };
-                readonly defaultValue: {
-                    readonly summary: false;
-                };
-            };
-        };
-        readonly enableInternalSorting: {
-            readonly description: "Enable internal sorting for the table. This would sort the table data internally and not rely on the apis sorting";
-            readonly control: "boolean";
-            readonly table: {
-                readonly type: {
-                    readonly summary: "?boolean";
-                };
-                readonly defaultValue: {
-                    readonly summary: true;
-                };
-            };
-        };
-    };
-    parameters: {
-        readonly docs: {
-            readonly subtitle: "Generates a Table component.";
-            readonly description: {
-                readonly component: "\n```js\nimport {\n  Table,\n  StaticTable,\n  DefaultRow,\n  BasicSingleCell,\n  DateCell,\n  DoubleCell,\n  SingleCell,\n  MonogramCell,\n  TableActionBar,\n  ButtonCta,\n  DropdownCta,\n  TableTopBar,\n  TableBottomBar\n} from \"@spaced-out/ui-design-system/lib/components/Table\";\n```\nTable component internally uses HTML Table, Thead, Tbody, Tr, Th and Td tags. It accepts entries and headers for showing table.\nThe Table component takes care of lots of things for you but it's not a magical component, it wraps a lot of behavior, so you can have,\nfor instance, a static table with no sorting options.\n\nStaticTables work just like regular tables, except they don't have interactive headers, so you lose sorting.\nBut remember, a regular interactive table uses a static table under the hood,\nso how does it work? You can think of the StaticTable as a kind of controlled table component.\nexcept that traditionally we'd update the entries prop and rerender from that.\nThat would work just fine, but instead we can just pass in the keys we care about. By using StaticTable,\nwe can simplify filtering and sorting outside of the table while the table keeps a stable value reference to all the entities.\n\nTo make any of rows selectable, we can do that by also passing in another property, selectedKeys.\n\nLet's say we want to also make any of the rows selectable, we can do that by also passing in another property, selectedKeys.\n\n### Custom Cells\n\nIt's possible you need to render out a custom cell, not just the default cell.\nThere are two ways to do that. If you only need to modify a single cell,\nyou can simply add a render: `React.ComponentType<{data: T, extras?: U}>`\nkey to any given header item.\n\nThis cell renderer receives the _whole row_ of data, not just the individual cell, it's up to you what to do with it.\n\n### With Table Top, Bottom Bar and Actions\n\nYou can attach a top, bottom and action bar to the table by adding `TableTopBar`, `TableBottomBar` and `TableActionBar` components.\nThere are just semantic components which just provide padding and border standardization. You can add any component inside these components.\nThese also accept **className** prop.\n\n### Best Practices\n* A Data Table should always have a `TableTopBar`\n* Use `stickyHeader` prop to make the header sticky\n* Always assign a height to the table wrapper to make it scrollable\n* Manage the Table's Wrapper height effectively when using `TableActionBar` component\n* Always use local `ButtonCta` and `DropdownCta` for actions in Action bar. These components are\njust CSS Wrappers for Button and SimpleButtonDropdown components\n* Use ButtonCta component to add a button CTA in the `TableActionBar`\n* Use DropdownCta component to add a dropdown CTA button in the `TableActionBar` for screen width less than size1280(1280px)\n\n```jsx\n<Table\n  headers={TABLE_HEADERS}\n  entries={TABLE_DATA}\n  stickyHeader={true}\n  classNames={{\n    wrapper: classify(css.tableWrapper, {\n      [css.withActionBar]: getNumberOfEntriesSelected() > 0,\n    })\n  }}\n/>\n```\n\n```css\n.tableWrapper {\n  height: calc(sizeFullViewportHeight - size160);\n}\n\n.tableWrapper.withActionBar {\n  height: calc((sizeFullViewportHeight - size160) - actionBarHeight);\n}\n```\n\n### Usage\n\n```jsx\nconst TABLE_HEADERS = [\n  { label: \"Name\", key: \"name\", sortable: true, className: css.mediumColumn },\n  { label: \"Tel\", key: \"phone\", sortable: true, className: css.mediumColumn },\n];\n\nconst TABLE_DATA = [\n  {\n    id: \"1\",\n    name: \"Alice\",\n    phone: \"123-456-7890\",\n  },\n  {\n    id: \"2\",\n    name: \"Bob\",\n    phone: \"987-654-3210\",\n  },\n];\n\nexport const _TableExample = (): React.ReactNode => {\n  return (\n    <div className={css.container}>\n      {/* Top Bar with Filters */}\n      <TableTopBar>\n        <div className={css.left}>\n          <SubTitleMedium className={css.title}>Basic Data Table</SubTitleMedium>\n          <SearchInput />\n        </div>\n      </TableTopBar>\n\n      {/* Table */}\n      <Table\n        headers={TABLE_HEADERS}\n        entries={TABLE_DATA}\n        isLoading={isLoading}\n        stickyHeader={true}\n        borderRadius={'0'}\n        selectedKeys={staticTableKeysAcrossPages[currPage] || []}\n        onSelect={(keys) => {\n          setSelectAllEntries(false);\n          setStaticTableKeysAcrossPages({\n            ...staticTableKeysAcrossPages,\n            [currPage]: keys,\n          });\n        }}\n        classNames={{\n          wrapper: classify(css.tableWrapper, {\n            [css.withActionBar]: getNumberOfEntriesSelected() > 0,\n          })\n        }}\n      />\n\n      {/* Table Actions */}\n      {getNumberOfEntriesSelected() > 0 && (\n        <TableActionBar className={css.actionBar}>\n          <div className={css.leftActionSlot}>\n            <ButtonCta\n              onClick={() => {\n                setSelectAllEntries(true);\n                setStaticTableKeysAcrossPages({\n                  ...staticTableKeysAcrossPages,\n                  [currPage]: tableEntries.map((entry) => entry.id),\n                });\n              }}\n            >\n              Select all items\n            </ButtonCta>\n            {getNumberOfEntriesSelected() > 0 && (\n              <BodySmall color=\"inversePrimary\">\n                {getNumberOfEntriesSelected() entries selected}\n              </BodySmall>\n            )}\n          </div>\n          <div className={classify(css.middleActionSlot, css.fullTable)}>\n            <ButtonCta size=\"small\" iconLeftName=\"folder-plus\">\n              Add to group\n            </ButtonCta>\n          </div>\n          <div className={classify(css.middleActionSlot, css.smallTable)}>\n            <ButtonCta size=\"small\" iconLeftName=\"folder-plus\">\n              Add to group\n            </ButtonCta>\n            <DropdownCta\n              ariaLabel=\"Icon Button Dropdown\"\n              iconLeftName=\"ellipsis\"\n              options={[\n                {\n                  iconLeft: 'layer-plus',\n                  key: '1',\n                  label: 'Create group',\n                },\n              ]}\n              selectedKeys={selectedKeys}\n              onOptionSelect={() => setSelectedKeys([])}\n              size=\"small\"\n            />\n          </div>\n          <div className={css.rightActionSlot}>\n            <ButtonCta\n              iconLeftName=\"close\"\n              onClick={() => {\n                setSelectAllEntries(false);\n                setStaticTableKeysAcrossPages({});\n              }}\n            >\n              Close\n            </ButtonCta>\n          </div>\n        </TableActionBar>\n      )}\n\n      {/* Bottom Bar with Pagination */}\n      <TableBottomBar>\n        <Pagination\n          currentPage={currPage}\n          totalPages={totalPages}\n          onChange={(page) => {\n            onMove(page || 1);\n          }}\n        >\n          <SubTitleExtraSmall color=\"secondary\">\n            Showing page {currPage} of {totalPages}\n          </SubTitleExtraSmall>\n        </Pagination>\n      </TableBottomBar>\n    </div>\n  );\n};\n```\n\n```css\n@value actionBarHeight: size50;\n\n.container {\n  width: sizeFluid;\n}\n\n.left {\n  display: flex;\n  align-items: center;\n}\n\n.title {\n  margin-right: spaceMedium;\n}\n\n.mediumColumn {\n  width: calc(sizeFluid / 5);\n}\n\n.tableWrapper {\n  height: calc(sizeFullViewportHeight - size160);\n}\n\n.actionBar {\n  display: flex;\n  align-items: center;\n  gap: spaceXSmall;\n}\n\n.tableWrapper.withActionBar {\n  height: calc((sizeFullViewportHeight - size160) - actionBarHeight);\n}\n\n.leftActionSlot,\n.rightActionSlot,\n.middleActionSlot {\n  display: flex;\n  gap: spaceSmall;\n  align-items: center;\n}\n\n.leftActionSlot,\n.rightActionSlot {\n  width: calc(sizeFluid / 4);\n}\n\n.leftActionSlot {\n  justify-content: flex-start;\n}\n\n.middleActionSlot {\n  width: calc(sizeFluid / 2);\n  justify-content: center;\n  gap: spaceXXSmall;\n}\n\n.rightActionSlot {\n  justify-content: flex-end;\n}\n\n.smallTable {\n  display: none;\n}\n\n@media only screen and (max-width: size1280) {\n  .fullTable {\n    display: none;\n  }\n\n  .smallTable {\n    display: flex;\n  }\n}\n\n.dangerText {\n  color: colorTextDanger;\n}\n\n.dangerText:hover,\n.dangerText:active,\n.dangerText:focus {\n  color: colorTextDanger;\n}\n\n```\n        ";
-            };
-        };
-        readonly storySource: {
-            readonly componentPath: "/src/components/Table/Table.jsx";
-        };
-    };
-    tags: string[];
-    title: string;
-};
-export default _default;
-export declare const _BulkActions: {
-    (args: TableProps<{
-        [key: string]: unknown;
-    }, {
-        [key: string]: unknown;
-    }>): React.JSX.Element;
-    args: {
-        headers: ({
-            label: string;
-            key: string;
-            sortable: boolean;
-            className: string;
-            render?: undefined;
-        } | {
-            label: string;
-            key: string;
-            render: () => React.JSX.Element;
-            className: string;
-            sortable?: undefined;
-        })[];
-        borderRadius: string;
-    };
-};
-//# sourceMappingURL=BulkActions.stories.d.ts.map

package/lib/components/Table/BulkActions.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BulkActions.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Table/BulkActions.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBnC,wBAIE;AAqCF,eAAO,MAAM,YAAY;WACjB,UAAU,CAAC;QACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,EAAE;QACD,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;;;;;;;;;;;;;;;;;CA6LH,CAAC"}

package/lib/components/Table/BulkActions.stories.js

@@ -1,252 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._BulkActions = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _classify = require("../../utils/classify");
-var _Button = require("../Button");
-var _ButtonDropdown = require("../ButtonDropdown");
-var _Dropdown = require("../Dropdown");
-var _Pagination = require("../Pagination");
-var _SearchInput = require("../SearchInput");
-var _Text = require("../Text");
-var _dummyTableData = require("./dummyTableData");
-var _Table = require("./Table.docs");
-var _TableActionBar = require("./TableActionBar");
-var _ = require("./");
-var _TableStoriesModule = _interopRequireDefault(require("./Table.stories.module.css"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var _default = exports.default = {
-  tags: ['autodocs'],
-  title: 'Components/Table/Bulk Actions',
-  ..._Table.TABLE_DOCS
-};
-const Dropdown = () => /*#__PURE__*/React.createElement(_.BasicSingleCell, {
-  className: _TableStoriesModule.default.endAlign
-}, /*#__PURE__*/React.createElement(_ButtonDropdown.SimpleButtonDropdown, {
-  size: "small",
-  type: "ghost",
-  anchorPosition: "bottom-end",
-  options: [{
-    iconLeft: 'coffee',
-    key: '1',
-    label: 'Option one'
-  }, {
-    iconLeft: 'user',
-    key: '2',
-    label: 'Option two'
-  }, {
-    iconLeft: 'face-party',
-    key: '4',
-    label: 'Option three'
-  }],
-  iconLeftName: "ellipsis"
-}));
-const longTableHeaders = [{
-  label: 'Name',
-  key: 'name',
-  sortable: true,
-  className: _TableStoriesModule.default.mediumColumn
-}, {
-  label: 'Tel',
-  key: 'phone',
-  sortable: true,
-  className: _TableStoriesModule.default.mediumColumn
-}, {
-  label: 'Notes',
-  key: 'notes',
-  sortable: false,
-  className: _TableStoriesModule.default.mediumColumn
-}, {
-  label: 'Sign',
-  key: 'sign',
-  sortable: false,
-  className: _TableStoriesModule.default.mediumColumn
-}, {
-  label: 'email',
-  key: 'email',
-  sortable: false,
-  className: _TableStoriesModule.default.mediumColumn
-}, {
-  label: '',
-  key: 'email',
-  render: Dropdown,
-  className: _TableStoriesModule.default.optionColumn
-}];
-const _BulkActions = args => {
-  const [staticTableKeysAcrossPages, setStaticTableKeysAcrossPages] = React.useState({
-    '1': []
-  });
-  const [selectAllEntries, setSelectAllEntries] = React.useState(false);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [currPage, setCurrPage] = React.useState(7);
-  const [tableEntries, setTableEntries] = React.useState([]);
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-  const itemsPerPage = 20;
-  const totalPages = Math.ceil(_dummyTableData.LARGE_TABLE_DATA.length / itemsPerPage);
-  React.useEffect(() => {
-    onMove(7);
-  }, []);
-  const onMove = pageNumber => {
-    setIsLoading(true);
-    if (selectAllEntries) {
-      setSelectAllEntries(false);
-      // @ts-ignore - TS2345 - Argument of type '{}' is not assignable to parameter of type 'SetStateAction<{ '1': never[]; }>'.
-      setStaticTableKeysAcrossPages({});
-    }
-    setTimeout(() => {
-      const startIndex = (pageNumber - 1) * itemsPerPage;
-      const endIndex = startIndex + itemsPerPage;
-      setCurrPage(pageNumber || 1);
-      // @ts-ignore - TS2345 - Argument of type '({ readonly id: "1"; readonly name: "Alice"; readonly phone: "123-456-7890"; readonly notes: "likes candy"; readonly email: "alice@symbolics.co"; readonly sign: "taurus"; readonly address: "8475 Bedford Lane Addison, IL 60101"; } | ... 241 more ... | { ...; })[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
-      setTableEntries(_dummyTableData.LARGE_TABLE_DATA.slice(startIndex, endIndex));
-      setIsLoading(false);
-    }, 1000);
-  };
-  const getNumberOfEntriesSelected = () => {
-    if (selectAllEntries) {
-      return _dummyTableData.LARGE_TABLE_DATA.length;
-    }
-    return Object.values(staticTableKeysAcrossPages).flat().length;
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: _TableStoriesModule.default.tableActions
-  }, /*#__PURE__*/React.createElement(_.TableTopBar, null, /*#__PURE__*/React.createElement("div", {
-    className: _TableStoriesModule.default.left
-  }, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
-    className: _TableStoriesModule.default.title
-  }, "Data Table"), /*#__PURE__*/React.createElement(_SearchInput.SearchInput, null)), /*#__PURE__*/React.createElement("div", {
-    className: _TableStoriesModule.default.right
-  }, /*#__PURE__*/React.createElement(_Button.Button, {
-    type: "ghost",
-    iconLeftName: "bars-filter",
-    classNames: {
-      wrapper: _TableStoriesModule.default.filterBtn
-    },
-    ariaLabel: "Filter"
-  }), /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
-    placeholder: "Select Options",
-    options: [{
-      iconLeft: 'coffee',
-      key: '1',
-      label: 'Option one'
-    }, {
-      iconLeft: 'user',
-      key: '2',
-      label: 'Option two'
-    }, {
-      iconLeft: 'face-party',
-      key: '4',
-      label: 'Option three'
-    }]
-  }), /*#__PURE__*/React.createElement(_Button.Button, {
-    classNames: {
-      wrapper: _TableStoriesModule.default.button
-    }
-  }, "Button Text"))), /*#__PURE__*/React.createElement(_.Table, _extends({}, args, {
-    headers: args.headers,
-    isLoading: isLoading,
-    stickyHeader: true,
-    borderRadius: '0'
-    // @ts-ignore - TS2698 - Spread types may only be created from object types.
-    ,
-    entries: tableEntries.map(entry => ({
-      ...entry
-    }))
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{ '1': never[]; }'.
-    ,
-    selectedKeys: staticTableKeysAcrossPages[currPage] || [],
-    disabledKeys: ['2'],
-    onSelect: keys => {
-      setSelectAllEntries(false);
-      setStaticTableKeysAcrossPages({
-        ...staticTableKeysAcrossPages,
-        [currPage]: keys
-      });
-    }
-    // @ts-ignore - TS17001 - JSX elements cannot have multiple attributes with the same name.
-    ,
-    stickyHeader: true,
-    classNames: {
-      wrapper: (0, _classify.classify)(_TableStoriesModule.default.tableWrapper, {
-        [_TableStoriesModule.default.withActionBar]: getNumberOfEntriesSelected() > 0
-      })
-    }
-  })), getNumberOfEntriesSelected() > 0 && /*#__PURE__*/React.createElement(_.TableActionBar, {
-    className: _TableStoriesModule.default.actionBar
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _TableStoriesModule.default.leftActionSlot
-  }, /*#__PURE__*/React.createElement(_.ButtonCta, {
-    type: "secondary",
-    size: "small",
-    onClick: () => {
-      setSelectAllEntries(true);
-      setStaticTableKeysAcrossPages({
-        ...staticTableKeysAcrossPages,
-        // @ts-ignore - TS2339 - Property 'id' does not exist on type 'never'.
-        [currPage]: tableEntries.map(entry => entry.id)
-      });
-    }
-  }, getNumberOfEntriesSelected() ? `(${getNumberOfEntriesSelected()})` : '', ' ', "Select All")), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.classify)(_TableStoriesModule.default.middleActionSlot, _TableStoriesModule.default.fullTable)
-  }, /*#__PURE__*/React.createElement(_.ButtonCta, {
-    size: "small",
-    iconLeftName: "folder-plus"
-  }, "Add to group"), /*#__PURE__*/React.createElement(_.ButtonCta, {
-    size: "small",
-    iconLeftName: "layer-plus"
-  }, "Create group"), /*#__PURE__*/React.createElement(_.ButtonCta, {
-    size: "small",
-    iconLeftName: "trash"
-  }, "Delete")), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.classify)(_TableStoriesModule.default.middleActionSlot, _TableStoriesModule.default.smallTable)
-  }, /*#__PURE__*/React.createElement(_.ButtonCta, {
-    size: "small",
-    iconLeftName: "folder-plus"
-  }, "Add to group"), /*#__PURE__*/React.createElement(_TableActionBar.DropdownCta, {
-    ariaLabel: "Icon Button Dropdown",
-    iconLeftName: "ellipsis",
-    options: [{
-      iconLeft: 'layer-plus',
-      key: '1',
-      label: 'Create group'
-    }, {
-      iconLeft: 'trash',
-      key: '2',
-      label: 'Delete',
-      classNames: {
-        wrapper: _TableStoriesModule.default.dangerText
-      }
-    }],
-    selectedKeys: selectedKeys,
-    onOptionSelect: () => setSelectedKeys([]),
-    size: "small"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: _TableStoriesModule.default.rightActionSlot
-  }, /*#__PURE__*/React.createElement(_.ButtonCta, {
-    size: "small",
-    iconLeftName: "close",
-    onClick: () => {
-      setSelectAllEntries(false);
-      // @ts-ignore - TS2345 - Argument of type '{}' is not assignable to parameter of type 'SetStateAction<{ '1': never[]; }>'.
-      setStaticTableKeysAcrossPages({});
-    }
-  }))), /*#__PURE__*/React.createElement(_.TableBottomBar, null, /*#__PURE__*/React.createElement(_Pagination.Pagination, {
-    currentPage: currPage,
-    totalPages: totalPages,
-    onChange: page => {
-      onMove(page || 1);
-    }
-  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
-    color: "secondary"
-  }, "Showing page ", currPage, " of ", totalPages))));
-};
-exports._BulkActions = _BulkActions;
-_BulkActions.args = {
-  headers: longTableHeaders,
-  borderRadius: '0px'
-};

package/lib/components/Table/Cell.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import type { ClassNameComponent } from '../../utils/makeClassNameComponent';
-type CellsProps = {
-    children?: React.ReactNode;
-    className?: string | null | undefined;
-    truncatedText?: React.ReactNode;
-    onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-};
-export declare const Cells: ({ children, className, ...rest }: CellsProps) => React.ReactElement<React.ComponentProps<"div">>;
-export declare const Cell: ({ children, className, }: CellsProps) => React.ReactElement<React.ComponentProps<"div">>;
-export declare const BasicSingleCell: ClassNameComponent<'td'>;
-export declare const BasicDoubleCell: ClassNameComponent<'td'>;
-export declare const PaddedContentCell: ClassNameComponent<'td'>;
-export declare const PaddedDoubleContentCell: ClassNameComponent<'td'>;
-export declare const SingleCell: ({ title, className, }: {
-    title: string;
-    icon?: React.ReactNode;
-    className?: string;
-}) => React.JSX.Element;
-export declare const DoubleCell: ({ title, subtitle, className, }: {
-    title: React.ReactNode;
-    subtitle?: React.ReactNode;
-    className?: string;
-}) => React.JSX.Element;
-export declare const DateCell: ({ date, className, }: {
-    date: string | Date;
-    className?: string;
-}) => React.JSX.Element;
-export declare const Monogram: ({ initials, }: {
-    initials: string;
-}) => React.JSX.Element;
-export declare const MonogramCell: ({ initials, className, }: {
-    initials: string;
-    className?: string;
-}) => React.JSX.Element;
-export {};
-//# sourceMappingURL=Cell.d.ts.map

package/lib/components/Table/Cell.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,oCAAoC,CAAC;AAQ3E,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CACrF,CAAC;AAEF,eAAO,MAAM,KAAK,GAChB,kCAIG,UAAU,KAEZ,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAE1C,CAAC;AAER,eAAO,MAAM,IAAI,GACf,0BAGG,UAAU,KACZ,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAsE,CAAC;AAExH,eAAO,MAAM,eAAe,EAAE,kBAAkB,CAAC,IAAI,CAGpD,CAAC;AACF,eAAO,MAAM,eAAe,EAAE,kBAAkB,CAAC,IAAI,CAGpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,kBAAkB,CAAC,IAAI,CACF,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,kBAAkB,CAAC,IAAI,CACR,CAAC;AAEtD,eAAO,MAAM,UAAU,GACrB,uBAGG;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAGkB,CAAC;AAEtB,eAAO,MAAM,UAAU,GACrB,iCAIG;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAQwB,CAAC;AAE5B,eAAO,MAAM,QAAQ,GACnB,sBAGG;IACD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAYF,CAAC;AAEF,eAAO,MAAM,QAAQ,GACnB,eAEG;IACD,QAAQ,EAAE,MAAM,CAAC;CAClB,sBAC2C,CAAC;AAE/C,eAAO,MAAM,YAAY,GACvB,0BAGG;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAGkB,CAAC"}

package/lib/components/Table/DefaultRow.d.ts

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import type { ClassNameComponent } from '../../utils/makeClassNameComponent';
-import type { GenericHeaderItems } from './DefaultTableHeader';
-import type { GenericObject } from './Table';
-type ClassNames = Readonly<{
-    tableRow?: string;
-    checkbox?: string;
-}>;
-export type TableRowProps<T, U> = {
-    data: T;
-    extras?: U;
-    sortedKeys?: (string | T[keyof T])[];
-    headers?: GenericHeaderItems<T, U>;
-    selected?: boolean;
-    disabled?: boolean;
-};
-export type TableRow<T, U> = React.ComponentType<TableRowProps<T, U>>;
-export declare const BasicRow: ClassNameComponent<'tr'>;
-type EmptyRowProps = {
-    emptyText?: React.ReactNode;
-    isLoading?: boolean;
-    headersLength: number;
-    customLoader?: React.ReactNode;
-};
-export declare const EmptyRow: ({ isLoading, emptyText, headersLength, customLoader, }: EmptyRowProps) => React.ReactElement<React.ComponentProps<"tr">>;
-export declare function DefaultRow<T extends GenericObject, U extends GenericObject>({ data, extras, headers, selected, onSelect, classNames, disabled, }: {
-    data: T;
-    extras?: U;
-    headers: GenericHeaderItems<T, U>;
-    selected?: boolean;
-    onSelect?: (arg1: {
-        value: string;
-        checked: boolean;
-    }) => unknown;
-    classNames?: ClassNames;
-    disabled?: boolean;
-}): React.JSX.Element;
-export {};
-//# sourceMappingURL=DefaultRow.d.ts.map

package/lib/components/Table/DefaultRow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/DefaultRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,oCAAoC,CAAC;AAO3E,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAK3C,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAQH,MAAM,MAAM,aAAa,CAAC,CAAC,EAAE,CAAC,IAAI;IAChC,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAEtE,eAAO,MAAM,QAAQ,EAAE,kBAAkB,CAAC,IAAI,CAG7C,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,QAAQ,GACnB,wDAKG,aAAa,KACf,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAwB1C,CAAC;AASP,wBAAgB,UAAU,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,aAAa,EACzE,EACE,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,OAAO,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,OAAO,CAAC;KAClB,KACE,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBA6CF"}

package/lib/components/Table/DefaultTableHeader.d.ts

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import type { ClassNameComponent } from '../../utils/makeClassNameComponent';
-import type { SortDirection } from './hooks';
-import type { GenericObject } from './Table';
-export type GenericHeaderItem<T extends GenericObject, U extends GenericObject> = {
-    label: React.ReactNode;
-    key: keyof T;
-    className?: string;
-    filterIcon?: React.ReactNode;
-    filtered?: boolean;
-    subtext?: string;
-    sortable?: boolean;
-    headerIconClassName?: string;
-    sticky?: boolean;
-    render?: React.ComponentType<{
-        data: T;
-        extras?: U;
-        className?: string;
-        selected?: boolean;
-        disabled?: boolean;
-    }>;
-};
-export type GenericHeaderItems<T, U> = GenericHeaderItem<T, U>[];
-export declare const BasicHeadCell: ClassNameComponent<'th'>;
-export declare const BasicTableHead: ClassNameComponent<'thead'>;
-export type TableHeaderProps<T, U> = {
-    className?: string;
-    tableHeaderClassName?: string;
-    sortable?: boolean;
-    columns: GenericHeaderItems<T, U>;
-    handleSortClick?: (sortKey: keyof T) => unknown;
-    sortKey?: keyof T;
-    sortDirection?: SortDirection;
-    checked?: 'true' | 'false' | 'mixed';
-    handleCheckboxClick?: (arg1: {
-        value: string;
-        checked: boolean;
-    }) => unknown;
-    disabled?: boolean;
-    stickyHeader?: boolean;
-};
-export declare function DefaultTableHeader<T extends GenericObject, U extends GenericObject>(props: TableHeaderProps<T, U>): React.JSX.Element;
-//# sourceMappingURL=DefaultTableHeader.d.ts.map

package/lib/components/Table/DefaultTableHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultTableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/DefaultTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,oCAAoC,CAAC;AAO3E,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAK3C,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,aAAa,IAAI;IAChF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,IAAI,EAAE,CAAC,CAAC;QACR,MAAM,CAAC,EAAE,CAAC,CAAC;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;CACJ,CAAC;AAGF,MAAM,MAAM,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AAEjE,eAAO,MAAM,aAAa,EAAE,kBAAkB,CAAC,IAAI,CAGlD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,kBAAkB,CAAC,OAAO,CACA,CAAC;AAExD,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAClC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,OAAO,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IACrC,mBAAmB,CAAC,EAAE,CACpB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,OAAO,CAAC;KAClB,KACE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AA4CF,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,aAAa,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,qBAuIjH"}