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

package/lib/components/Table/DefaultTableHeader.js.flow

@@ -0,0 +1,240 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {Checkbox} from '../Checkbox';
+import {Icon} from '../Icon';
+import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+
+import {BasicRow} from './DefaultRow';
+import type {SortDirection} from './hooks';
+import type {GenericObject} from './Table';
+
+import css from './Table.module.css';
+
+
+export type GenericHeaderItem<T: GenericObject, U: GenericObject> = {
+  label: React.Node,
+  key: $Keys<T>,
+  className?: string,
+  filterIcon?: React.Node,
+  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 const BasicHeadCell: ClassNameComponent<'th'> = makeClassNameComponent(
+  css.defaultHeaderCell,
+  'th',
+);
+
+export const BasicTableHead: ClassNameComponent<'thead'> =
+  makeClassNameComponent(css.defaultTableHead, 'thead');
+
+export type TableHeaderProps<T, U> = {
+  className?: string,
+  tableHeaderClassName?: string,
+  sortable?: boolean,
+  columns: GenericHeaderItems<T, U>,
+  handleSortClick?: (sortKey: $Keys<T>) => mixed,
+  sortKey?: $Keys<T>,
+  sortDirection?: SortDirection,
+  checked?: 'true' | 'false' | 'mixed',
+  handleCheckboxClick?: ({value: string, checked: boolean}) => mixed,
+  disabled?: boolean,
+  stickyHeader?: boolean,
+};
+
+const SortIcon = ({
+  sortDirection,
+  color,
+  className,
+}: {
+  sortDirection: SortDirection,
+  className: string,
+  color: ColorTypes,
+}) => {
+  if (sortDirection === 'original') {
+    return (
+      <Icon
+        color={color}
+        name="caret-down"
+        size="small"
+        type="solid"
+        className={className}
+      />
+    );
+  } else if (sortDirection === 'asc') {
+    return (
+      <Icon
+        color={color}
+        name="arrow-up"
+        size="small"
+        type="regular"
+        className={className}
+      />
+    );
+  } else if (sortDirection === 'desc') {
+    return (
+      <Icon
+        color={color}
+        name="arrow-down"
+        size="small"
+        type="regular"
+        className={className}
+      />
+    );
+  }
+};
+
+export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
+  props: TableHeaderProps<T, U>,
+): React.Node {
+  const {
+    className,
+    sortable = false,
+    columns,
+    handleSortClick,
+    sortKey,
+    sortDirection = 'original',
+    handleCheckboxClick,
+    checked,
+    disabled,
+    stickyHeader,
+  } = props;
+
+  const tableHeaderCells = () => (
+    <>
+      {columns.map((columnData, index) => {
+        const {
+          key,
+          label,
+          subtext,
+          filterIcon,
+          filtered,
+          className,
+          sticky,
+          sortable: columnSortable = false,
+        } = columnData;
+        let headerClassName;
+        const filterable = Boolean(filterIcon);
+        if ((sortable && columnSortable) || filterable) {
+          headerClassName = classify(
+            css.defaultHeaderCellSortable,
+            {
+              [css.filtered]: filtered,
+              [css.stickyHeaderCell]: sticky,
+            },
+            css[sortDirection],
+            className,
+          );
+        } else {
+          headerClassName = classify(className, {
+            [css.stickyHeaderCell]: sticky,
+          });
+        }
+
+        const headCellClickHandler = () => {
+          if (sortable && columnSortable && handleSortClick) {
+            handleSortClick(key);
+          }
+        };
+        let columnSortDirection = 'original';
+
+        if (sortKey === key) {
+          columnSortDirection = sortDirection;
+        }
+
+        return (
+          <BasicHeadCell
+            className={classify(
+              {
+                [css.selectedHeader]:
+                  sortKey === key && columnSortDirection !== 'original',
+              },
+              headerClassName,
+            )}
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            scope="col"
+            onClick={headCellClickHandler}
+          >
+            <div className={classify(css.labelContents)}>
+              <div className={css.labelContainer}>
+                <SubTitleExtraSmall
+                  color={TEXT_COLORS.secondary}
+                  className={classify({
+                    [css.selectedHeader]:
+                      sortKey === key && columnSortDirection !== 'original',
+                  })}
+                >
+                  {label}
+                </SubTitleExtraSmall>
+                <span className={css.headerSubtext}>{subtext && subtext}</span>
+              </div>
+              {(sortable || filterIcon != null) && (
+                <div className={css.headerIconContainer}>
+                  {columnSortable && (
+                    <SortIcon
+                      color={TEXT_COLORS.secondary}
+                      className={classify(css.sortArrow, {
+                        [css.selectedSortArrow]: sortKey === key,
+                      })}
+                      sortDirection={columnSortDirection}
+                    />
+                  )}
+                  {filterIcon != null && (
+                    <div className={css.filterIcon}>{filterIcon}</div>
+                  )}
+                </div>
+              )}
+            </div>
+          </BasicHeadCell>
+        );
+      })}
+    </>
+  );
+
+  return (
+    <BasicTableHead
+      className={classify(
+        css.tableHeaderSortable,
+        {[css.stickyHeader]: stickyHeader},
+        className,
+      )}
+    >
+      <BasicRow className={css.defaultHeaderRow}>
+        {handleCheckboxClick && (
+          <BasicHeadCell scope="col">
+            <div className={css.checkbox}>
+              <Checkbox
+                value="all"
+                checked={checked === 'true' ? true : false}
+                indeterminate={checked === 'mixed'}
+                onChange={handleCheckboxClick}
+                disabled={disabled}
+                ariaLabel="Select all rows"
+              />
+            </div>
+          </BasicHeadCell>
+        )}
+        {tableHeaderCells()}
+      </BasicRow>
+    </BasicTableHead>
+  );
+}

package/lib/components/Table/StaticTable.js

@@ -21,6 +21,7 @@ var _DefaultTableHeader = require("./DefaultTableHeader");
 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); }
+// $FlowFixMe[untyped-import]
 const BasicTable = exports.BasicTable = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTable, 'table');
 const BasicTableBody = exports.BasicTableBody = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTableBody, 'tbody');
 function useTableWidth(ref) {
@@ -36,7 +37,6 @@ function useTableWidth(ref) {
   return tableWidth;
 }
 function useMappedKeys(entries, rowKeys, idName) {
-  // @ts-ignore - TS2322 - Type 'string[] | Data[string][]' is not assignable to type 'string[]'.
   return React.useMemo(() => rowKeys ?? entries.map(e => (0, _get.default)(e, idName)), [entries, idName, rowKeys]);
 }
 function useHeaderCheckboxHandler(selectedKeys, entries, idName, onSelect) {
@@ -49,7 +49,6 @@ function useHeaderCheckboxHandler(selectedKeys, entries, idName, onSelect) {
     } = _ref;
     const allIds = entries.map(row => (0, _get.default)(row, idName));
     const newSelection = checked ? allIds : [];
-    // @ts-ignore - TS2345 - Argument of type 'Data[string][]' is not assignable to parameter of type 'string[]'.
     onSelect?.(newSelection);
   };
 }
@@ -115,9 +114,7 @@ function TableWrapper(_ref3) {
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_TableModule.default.tableContainer, classNames?.wrapper),
     "data-id": 'table-wrap',
-    ref: tableRef
-    // @ts-ignore - TS2322 - Type '{ [key: string]: string | number | null | undefined; } | undefined' is not assignable to type 'CSSProperties | undefined'.
-    ,
+    ref: tableRef,
     style: wrapperStyle
   }, /*#__PURE__*/React.createElement(BasicTable, {
     "data-id": "basic-table",
@@ -158,11 +155,11 @@ function StaticTable(props) {
     showHeader = true,
     tableHeaderClassName,
     sortable,
-    // @ts-ignore - TS6133 - 'defaultSortKey' is declared but its value is never read.
+    // eslint-disable-next-line unused-imports/no-unused-vars
     defaultSortKey,
-    // @ts-ignore - TS6133 - 'defaultSortDirection' is declared but its value is never read.
+    // eslint-disable-next-line unused-imports/no-unused-vars
     defaultSortDirection = 'original',
-    // @ts-ignore - TS6133 - 'onSort' is declared but its value is never read.
+    // eslint-disable-next-line unused-imports/no-unused-vars
     onSort,
     handleSortClick,
     sortKey,
@@ -182,16 +179,13 @@ function StaticTable(props) {
   // this is a fallback and honestly probably doesn't need the
   // memo'ing
   const tableRef = React.useRef(null);
-  // @ts-ignore - TS2345 - Argument of type 'string | number | symbol' is not assignable to parameter of type 'string'.
   const mappedKeys = useMappedKeys(entries, rowKeys, idName);
   const tableWidth = useTableWidth(tableRef);
 
   /**
    * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
    */
-  const handleHeaderCheckboxClick = useHeaderCheckboxHandler(selectedKeys, entries,
-  // @ts-ignore - TS2345 - Argument of type 'string | number | symbol' is not assignable to parameter of type 'string'.
-  idName, onSelect);
+  const handleHeaderCheckboxClick = useHeaderCheckboxHandler(selectedKeys, entries, idName, onSelect);
   return /*#__PURE__*/React.createElement(TableWrapper, {
     tableRef: tableRef,
     wrapperStyle: {
@@ -212,9 +206,7 @@ function StaticTable(props) {
     selectedKeys: selectedKeys,
     headers: headers,
     sortKey: sortKey,
-    sortDirection: sortDirection
-    // @ts-ignore - TS2322 - Type '((sortKey: string) => unknown) | undefined' is not assignable to type '((sortKey: keyof Data) => unknown) | undefined'.
-    ,
+    sortDirection: sortDirection,
     handleSortClick: handleSortClick,
     handleHeaderCheckboxClick: handleHeaderCheckboxClick
   }, isLoading || !entries.length ? /*#__PURE__*/React.createElement(_DefaultRow.EmptyRow, {
@@ -227,12 +219,8 @@ function StaticTable(props) {
     if (data == null) {
       return null;
     }
-    const selected = selectedKeys && Array.isArray(selectedKeys)
-    // @ts-ignore - TS2345 - Argument of type 'Data["id"] | Data[keyof Data]' is not assignable to parameter of type 'string'.
-    ? selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
-    const isRowDisabled = disabledKeys && Array.isArray(disabledKeys)
-    // @ts-ignore - TS2345 - Argument of type 'Data["id"] | Data[keyof Data]' is not assignable to parameter of type 'string'.
-    ? disabledKeys.includes((0, _get.default)(data, idName)) : false;
+    const selected = selectedKeys && Array.isArray(selectedKeys) ? selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
+    const isRowDisabled = disabledKeys && Array.isArray(disabledKeys) ? disabledKeys.includes((0, _get.default)(data, idName)) : false;
     return /*#__PURE__*/React.createElement(RowRenderer, {
       TableRow: TableRow,
       keyId: key,
@@ -259,11 +247,11 @@ function StaticTableVirtualized(props) {
     showHeader = true,
     tableHeaderClassName,
     sortable,
-    // @ts-ignore - TS6133 - 'defaultSortKey' is declared but its value is never read.
+    // eslint-disable-next-line unused-imports/no-unused-vars
     defaultSortKey,
-    // @ts-ignore - TS6133 - 'defaultSortDirection' is declared but its value is never read.
+    // eslint-disable-next-line unused-imports/no-unused-vars
     defaultSortDirection = 'original',
-    // @ts-ignore - TS6133 - 'onSort' is declared but its value is never read.
+    // eslint-disable-next-line unused-imports/no-unused-vars
     onSort,
     handleSortClick,
     sortKey,
@@ -291,14 +279,12 @@ function StaticTableVirtualized(props) {
 
   // this is a fallback and honestly probably doesn't need the
   // memo'ing
-  // @ts-ignore - TS2345 - Argument of type 'string | number | symbol' is not assignable to parameter of type 'string'.
   const mappedKeys = useMappedKeys(entries, rowKeys, idName);
   const tableWidth = useTableWidth(tableRef);
   const virtualizer = (0, _reactVirtual.useVirtualizer)({
     count: entries.length,
     getScrollElement: () => tableRef.current,
     estimateSize: () => parseInt(rowHeight),
-    // @ts-ignore - TS2322 - Type '(index: number) => Data["id" | keyof Data]' is not assignable to type '(index: number) => Key'.
     getItemKey: index => entries[index][idName],
     overscan: 1
   });
@@ -326,11 +312,8 @@ function StaticTableVirtualized(props) {
         hasTriggeredRef.current = false; // reset when scrolling up
       }
     };
-
-    // @ts-ignore - TS2339 - Property 'addEventListener' does not exist on type 'never'.
     scrollElement.addEventListener('scroll', handleScroll);
     return () => {
-      // @ts-ignore - TS2339 - Property 'removeEventListener' does not exist on type 'never'.
       scrollElement.removeEventListener('scroll', handleScroll);
     };
   }, [onEndReached, isAllDataFetched]);
@@ -339,9 +322,7 @@ function StaticTableVirtualized(props) {
    * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
    */
 
-  const handleHeaderCheckboxClick = useHeaderCheckboxHandler(selectedKeys, entries,
-  // @ts-ignore - TS2345 - Argument of type 'string | number | symbol' is not assignable to parameter of type 'string'.
-  idName, onSelect);
+  const handleHeaderCheckboxClick = useHeaderCheckboxHandler(selectedKeys, entries, idName, onSelect);
   const VirtualizedStartRow = () => /*#__PURE__*/React.createElement("tr", {
     style: {
       height: virtualizer.getVirtualItems()[0]?.start ?? _space.spaceNone,
@@ -357,9 +338,7 @@ function StaticTableVirtualized(props) {
   }));
   const VirtualizedEndRow = () => /*#__PURE__*/React.createElement("tr", {
     style: {
-      height: virtualizer.getTotalSize() - (
-      // @ts-ignore - TS2339 - Property 'at' does not exist on type 'VirtualItem[]'.
-      virtualizer.getVirtualItems().at(-1)?.end ?? _space.spaceNone)
+      height: virtualizer.getTotalSize() - (virtualizer.getVirtualItems().at(-1)?.end ?? _space.spaceNone)
     },
     "aria-hidden": true
   }, /*#__PURE__*/React.createElement("td", {
@@ -375,7 +354,6 @@ function StaticTableVirtualized(props) {
     wrapperStyle: {
       '--border-radius': borderRadius,
       '--table-width': tableWidth ? `${tableWidth}px` : _size.sizeFluid,
-      // @ts-ignore - TS2532 - Object is possibly 'undefined'.
       height: (rowsCount + 1) * parseInt(rowHeight),
       overflowY: 'auto'
     },
@@ -393,9 +371,7 @@ function StaticTableVirtualized(props) {
     selectedKeys: selectedKeys,
     headers: headers,
     sortKey: sortKey,
-    sortDirection: sortDirection
-    // @ts-ignore - TS2322 - Type '((sortKey: string) => unknown) | undefined' is not assignable to type '((sortKey: keyof Data) => unknown) | undefined'.
-    ,
+    sortDirection: sortDirection,
     handleSortClick: handleSortClick,
     handleHeaderCheckboxClick: handleHeaderCheckboxClick
   }, /*#__PURE__*/React.createElement(VirtualizedStartRow, null), isLoading || !entries.length ? /*#__PURE__*/React.createElement(_DefaultRow.EmptyRow, {
@@ -409,16 +385,10 @@ function StaticTableVirtualized(props) {
     if (data == null) {
       return null;
     }
-    const selected = selectedKeys && Array.isArray(selectedKeys)
-    // @ts-ignore - TS2345 - Argument of type 'Data[keyof Data] | Data["id"]' is not assignable to parameter of type 'string'.
-    ? selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
-    const isRowDisabled = disabledKeys && Array.isArray(disabledKeys)
-    // @ts-ignore - TS2345 - Argument of type 'Data[keyof Data] | Data["id"]' is not assignable to parameter of type 'string'.
-    ? disabledKeys.includes((0, _get.default)(data, idName)) : false;
+    const selected = selectedKeys && Array.isArray(selectedKeys) ? selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
+    const isRowDisabled = disabledKeys && Array.isArray(disabledKeys) ? disabledKeys.includes((0, _get.default)(data, idName)) : false;
     return /*#__PURE__*/React.createElement(RowRenderer, {
-      TableRow: TableRow
-      // @ts-ignore - TS2322 - Type 'Key' is not assignable to type 'string'.
-      ,
+      TableRow: TableRow,
       keyId: key,
       data: data,
       headers: headers,