@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.0

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

@@ -0,0 +1,267 @@
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import {Button} from '../Button';
+import {SimpleButtonDropdown} from '../ButtonDropdown';
+import {SimpleDropdown} from '../Dropdown';
+import {Pagination} from '../Pagination';
+import {SearchInput} from '../SearchInput';
+import {SubTitleExtraSmall, SubTitleMedium} from '../Text';
+
+import type {TableProps} from './';
+import {LARGE_TABLE_DATA} from './dummyTableData';
+import {TABLE_DOCS} from './Table.docs';
+import {DropdownCta} from './TableActionBar';
+import {
+  BasicSingleCell,
+  ButtonCta,
+  Table,
+  TableActionBar,
+  TableBottomBar,
+  TableTopBar,
+} from './';
+
+import css from './Table.stories.module.css';
+
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Table/Bulk Actions',
+  ...TABLE_DOCS,
+};
+
+const Dropdown = () => (<BasicSingleCell className={css.endAlign}>
+  <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"
+  ></SimpleButtonDropdown>
+</BasicSingleCell>);
+
+const longTableHeaders = [
+  {label: 'Name', key: 'name', sortable: true, className: css.mediumColumn},
+  {label: 'Tel', key: 'phone', sortable: true, className: css.mediumColumn},
+  {label: 'Notes', key: 'notes', sortable: false, className: css.mediumColumn},
+  {label: 'Sign', key: 'sign', sortable: false, className: css.mediumColumn},
+  {label: 'email', key: 'email', sortable: false, className: css.mediumColumn},
+  {label: '', key: 'email', render: Dropdown, className: css.optionColumn},
+];
+
+export const _BulkActions = (
+  args: TableProps<{
+    [key: string]: unknown;
+  }, {
+    [key: string]: unknown;
+  }>,
+) => {
+  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(LARGE_TABLE_DATA.length / itemsPerPage);
+
+  React.useEffect(() => {
+    onMove(7);
+  }, []);
+
+  const onMove = (pageNumber: number) => {
+    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(LARGE_TABLE_DATA.slice(startIndex, endIndex));
+      setIsLoading(false);
+    }, 1000);
+  };
+
+  const getNumberOfEntriesSelected = () => {
+    if (selectAllEntries) {
+      return LARGE_TABLE_DATA.length;
+    }
+    return Object.values(staticTableKeysAcrossPages).flat().length;
+  };
+
+  return (
+    <div className={css.tableActions}>
+      <TableTopBar>
+        <div className={css.left}>
+          <SubTitleMedium className={css.title}>Data Table</SubTitleMedium>
+          <SearchInput />
+        </div>
+        <div className={css.right}>
+          <Button
+            type="ghost"
+            iconLeftName="bars-filter"
+            classNames={{wrapper: css.filterBtn}}
+            ariaLabel="Filter"
+          ></Button>
+          <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',
+              },
+            ]}
+          />
+          <Button classNames={{wrapper: css.button}}>Button Text</Button>
+        </div>
+      </TableTopBar>
+      <Table
+        {...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: classify(css.tableWrapper, {
+            [css.withActionBar]: getNumberOfEntriesSelected() > 0,
+          }),
+        }}
+      />
+      {getNumberOfEntriesSelected() > 0 && (
+        <TableActionBar className={css.actionBar}>
+          <div className={css.leftActionSlot}>
+            <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
+            </ButtonCta>
+          </div>
+          <div className={classify(css.middleActionSlot, css.fullTable)}>
+            <ButtonCta size="small" iconLeftName="folder-plus">
+              Add to group
+            </ButtonCta>
+            <ButtonCta size="small" iconLeftName="layer-plus">
+              Create group
+            </ButtonCta>
+            <ButtonCta size="small" iconLeftName="trash">
+              Delete
+            </ButtonCta>
+          </div>
+          <div className={classify(css.middleActionSlot, css.smallTable)}>
+            <ButtonCta size="small" iconLeftName="folder-plus">
+              Add to group
+            </ButtonCta>
+            <DropdownCta
+              ariaLabel="Icon Button Dropdown"
+              iconLeftName="ellipsis"
+              options={[
+                {
+                  iconLeft: 'layer-plus',
+                  key: '1',
+                  label: 'Create group',
+                },
+                {
+                  iconLeft: 'trash',
+                  key: '2',
+                  label: 'Delete',
+                  classNames: {wrapper: css.dangerText},
+                },
+              ]}
+              selectedKeys={selectedKeys}
+              onOptionSelect={() => setSelectedKeys([])}
+              size="small"
+            />
+          </div>
+          <div className={css.rightActionSlot}>
+            <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({});
+              }}
+            ></ButtonCta>
+          </div>
+        </TableActionBar>
+      )}
+      <TableBottomBar>
+        <Pagination
+          currentPage={currPage}
+          totalPages={totalPages}
+          onChange={(page) => {
+            onMove(page || 1);
+          }}
+        >
+          <SubTitleExtraSmall color="secondary">
+            Showing page {currPage} of {totalPages}
+          </SubTitleExtraSmall>
+        </Pagination>
+      </TableBottomBar>
+    </div>
+  );
+};
+
+_BulkActions.args = {
+  headers: longTableHeaders,
+  borderRadius: '0px',
+};

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1 @@
+{"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/Cell.js

@@ -14,9 +14,9 @@ var _Text = require("../Text");
 var _TableModule = _interopRequireDefault(require("./Table.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); } // $FlowIssue[nonstrict-import] date-fns
-// $FlowIssue[nonstrict-import] date-fns
-const Cells = _ref => {
+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); }
+const Cells = (_ref // @ts-ignore - TS2322 - Type '{ children: React.ReactNode; truncatedText?: React.ReactNode; onClick?: ((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
+) => {
   let {
     children,
     className,

package/lib/components/Table/Cell.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import formatDistance from 'date-fns/formatDistance';
+import parseISO from 'date-fns/parseISO';
+
+import {classify} from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {Avatar} from '../Avatar';
+import {BodyMedium, BodySmall, TEXT_COLORS} from '../Text';
+
+import css from './Table.module.css';
+
+
+type CellsProps = {
+  children?: React.ReactNode;
+  className?: string | null | undefined;
+  truncatedText?: React.ReactNode;
+  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+};
+
+export const Cells = (
+  {
+    children,
+    className,
+    ...rest
+  }: CellsProps,
+// @ts-ignore - TS2322 - Type '{ children: React.ReactNode; truncatedText?: React.ReactNode; onClick?: ((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
+): React.ReactElement<React.ComponentProps<'div'>> => (<div className={classify(css.row, className)} {...rest}>
+  {children}
+</div>);
+
+export const Cell = (
+  {
+    children,
+    className,
+  }: CellsProps,
+): React.ReactElement<React.ComponentProps<'div'>> => (<div className={classify(css.cell, className)}>{children}</div>);
+
+export const BasicSingleCell: ClassNameComponent<'td'> = makeClassNameComponent(
+  css.defaultSingleCell,
+  'td',
+);
+export const BasicDoubleCell: ClassNameComponent<'td'> = makeClassNameComponent(
+  css.defaultDoubleCell,
+  'td',
+);
+
+export const PaddedContentCell: ClassNameComponent<'td'> =
+  makeClassNameComponent(css.singleContentCell, 'td');
+
+export const PaddedDoubleContentCell: ClassNameComponent<'td'> =
+  makeClassNameComponent(css.doubleContentCell, 'td');
+
+export const SingleCell = (
+  {
+    title,
+    className,
+  }: {
+    title: string;
+    icon?: React.ReactNode;
+    className?: string;
+  },
+) => (<PaddedContentCell className={className}>
+  <BodyMedium className={css.paddedTitleBlock}>{title}</BodyMedium>
+</PaddedContentCell>);
+
+export const DoubleCell = (
+  {
+    title,
+    subtitle,
+    className,
+  }: {
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    className?: string;
+  },
+) => (<PaddedDoubleContentCell className={className}>
+  <div className={css.paddedTitleBlock}>
+    <BodyMedium className={css.doubleTitle}>{title}</BodyMedium>
+    <BodySmall color={TEXT_COLORS.tertiary} className={css.doubleSubtitle}>
+      {subtitle ?? ''}
+    </BodySmall>
+  </div>
+</PaddedDoubleContentCell>);
+
+export const DateCell = (
+  {
+    date,
+    className,
+  }: {
+    date: string | Date;
+    className?: string;
+  },
+) => {
+  const parsedDate: Date = typeof date === 'object' ? date : parseISO(date);
+  return (
+    <DoubleCell
+      title={`${parsedDate.getMonth() + 1} / ${
+        parsedDate.getDate() + 1
+      } / ${parsedDate.getFullYear()}`}
+      subtitle={`${formatDistance(parsedDate, new Date())} ago`}
+      className={className}
+    />
+  );
+};
+
+export const Monogram = (
+  {
+    initials,
+  }: {
+    initials: string;
+  },
+) => (<Avatar size="small" text={initials} />);
+
+export const MonogramCell = (
+  {
+    initials,
+    className,
+  }: {
+    initials: string;
+    className?: string;
+  },
+) => (<PaddedContentCell className={className}>
+  <Monogram initials={initials} />
+</PaddedContentCell>);

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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1 @@
+{"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/DefaultRow.js

@@ -17,11 +17,12 @@ var _TableModule = _interopRequireDefault(require("./Table.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); }
 // When using a custom Row prop, you need to create a component that looks like
-//     MyRow = (props: TableRowProps<Entries, Extras>): React.Node => {...}
+//     MyRow = (props: TableRowProps<Entries, Extras>): React.ReactNode => {...}
 // otherwise flow will complain.
 // Note that b/c extras is often optional, you will need to explicitly include
 // `invariant(extras, 'extras exists');` in order to pull values out of
 // extras (flow will remind you that it is of type `U | void`)
+
 const BasicRow = exports.BasicRow = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultRow, 'tr');
 const EmptyRow = _ref => {
   let {
@@ -49,7 +50,6 @@ const EmptyRow = _ref => {
 // initially stubbing out a design, the idea is you just avoid
 // passing in a Row component and instead let this render out
 // all the fields in the header in the short term
-//
 // Using the default row has the benefit that mismatches between
 // header and entries _will_ error out even though there are the
 // suppressions below

package/lib/components/Table/DefaultRow.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {Checkbox} from '../Checkbox';
+import {CircularLoader} from '../CircularLoader';
+import {BodyLarge, TEXT_COLORS} from '../Text';
+
+import {PaddedContentCell, SingleCell} from './Cell';
+import type {GenericHeaderItems} from './DefaultTableHeader';
+import type {GenericObject} from './Table';
+
+import css from './Table.module.css';
+
+
+type ClassNames = Readonly<{
+  tableRow?: string;
+  checkbox?: string;
+}>;
+
+// When using a custom Row prop, you need to create a component that looks like
+//     MyRow = (props: TableRowProps<Entries, Extras>): React.ReactNode => {...}
+// otherwise flow will complain.
+// Note that b/c extras is often optional, you will need to explicitly include
+// `invariant(extras, 'extras exists');` in order to pull values out of
+// extras (flow will remind you that it is of type `U | void`)
+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 const BasicRow: ClassNameComponent<'tr'> = makeClassNameComponent(
+  css.defaultRow,
+  'tr',
+);
+
+type EmptyRowProps = {
+  emptyText?: React.ReactNode;
+  isLoading?: boolean;
+  headersLength: number;
+  customLoader?: React.ReactNode;
+};
+
+export const EmptyRow = (
+  {
+    isLoading,
+    emptyText,
+    headersLength = 0,
+    customLoader,
+  }: EmptyRowProps,
+): React.ReactElement<React.ComponentProps<'tr'>> => (<tr>
+  <td colSpan={headersLength}>
+    <div className={css.emptyRow}>
+      {isLoading ? (
+        customLoader ? (
+          customLoader
+        ) : (
+          <div className={css.defaultLoader}>
+            {' '}
+            <CircularLoader colorToken="colorFillPrimary" size="large" />
+          </div>
+        )
+      ) : (
+        emptyText || (
+          <BodyLarge
+            color={TEXT_COLORS.secondary}
+            className={css.defaultEmptyText}
+          >
+            Nothing to display here.
+          </BodyLarge>
+        )
+      )}
+    </div>
+  </td>
+</tr>);
+
+// This is a fallback row we use to render a table when
+// initially stubbing out a design, the idea is you just avoid
+// passing in a Row component and instead let this render out
+// all the fields in the header in the short term
+// Using the default row has the benefit that mismatches between
+// header and entries _will_ error out even though there are the
+// suppressions below
+export 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;
+    // value dependent on checkbox checked value
+    onSelect?: (
+      arg1: {
+        value: string;
+        checked: boolean;
+      },
+    ) => unknown;
+    classNames?: ClassNames;
+    disabled?: boolean;
+  },
+) {
+  return (
+    <BasicRow
+      className={classify(
+        selected ? css.defaultSelectedBodyRow : css.defaultBodyRow,
+        classNames?.tableRow,
+      )}
+    >
+      {selected != null && (
+        <PaddedContentCell
+          className={classify(css.checkbox, classNames?.checkbox)}
+        >
+          <Checkbox
+            checked={selected ? true : false}
+            onChange={onSelect}
+            disabled={disabled}
+            ariaLabel="Select row"
+          />
+        </PaddedContentCell>
+      )}
+      {headers.map((item, index) => {
+        const {key, render: Renderer, className: cellClassName, sticky} = item;
+        const value = data[key];
+        return Renderer ? (
+          <Renderer
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            data={data}
+            extras={extras}
+            selected={selected}
+            disabled={disabled}
+            className={classify({[css.stickyCell]: sticky})}
+          />
+        ) : (
+          <SingleCell
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            title={String(value)}
+            className={classify(cellClassName, {[css.stickyCell]: sticky})}
+          />
+        );
+      })}
+    </BasicRow>
+  );
+}