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

package/lib/components/Table/hooks.js

@@ -32,8 +32,7 @@ function useSortableEntries(entries, idName, _ref) {
   };
   const advanceSortDirection = dir => {
     const nextDirection = getNextDirection(dir);
-
-    // @ts-ignore - TS6133 - 'dir' is declared but its value is never read.
+    // eslint-disable-next-line unused-imports/no-unused-vars
     setSortDirection(dir => nextDirection);
     return nextDirection;
   };
@@ -45,9 +44,7 @@ function useSortableEntries(entries, idName, _ref) {
       setSortKey(nextSortKey);
       nextSortDirection = 'desc';
     }
-    // @ts-ignore - TS2345 - Argument of type 'string' is not assignable to parameter of type 'SetStateAction<SortDirection>'.
     setSortDirection(nextSortDirection);
-    // @ts-ignore - TS2345 - Argument of type 'string' is not assignable to parameter of type 'SortDirection'.
     onSort?.(nextSortKey, nextSortDirection);
   }, [sortKey, sortDirection, entries]);
   const sortedEntries = React.useMemo(() => {
@@ -56,7 +53,6 @@ function useSortableEntries(entries, idName, _ref) {
     }
     const caseInsensitiveSortFunction = entry => {
       if (typeof entry[sortKey] === 'string') {
-        // @ts-ignore - TS2339 - Property 'toLowerCase' does not exist on type 'T[keyof T]'.
         return entry[sortKey].toLowerCase();
       }
       return entry[sortKey];
@@ -67,12 +63,9 @@ function useSortableEntries(entries, idName, _ref) {
   const sortedKeys = React.useMemo(() => sortedEntries.map(ent => (0, _get.default)(ent, idName)), [sortedEntries]);
   return {
     sortedEntries,
-    // @ts-ignore - TS2322 - Type 'T[keyof T][]' is not assignable to type 'keyof T[]'.
     sortedKeys,
     sortDirection,
-    // @ts-ignore - TS2322 - Type 'string | number | symbol' is not assignable to type 'string | undefined'.
     sortKey,
-    // @ts-ignore - TS2322 - Type '(nextSortKey: string) => void' is not assignable to type '(sortKey: keyof T) => unknown'.
     handleSortClick
   };
 }

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

@@ -0,0 +1,97 @@
+// @flow strict
+
+import * as React from 'react';
+import get from 'lodash/get';
+import sortBy from 'lodash/sortBy';
+
+import type {GenericObject} from './Table';
+
+
+export type SortDirection = 'asc' | 'desc' | 'original';
+
+export function useSortableEntries<T: GenericObject>(
+  entries: Array<T>,
+  idName: $Keys<T>,
+  {
+    defaultSortKey = 'id',
+    defaultSortDirection = 'original',
+    onSort,
+    enableInternalSorting = true,
+  }: {
+    defaultSortKey?: $Keys<T>,
+    defaultSortDirection?: SortDirection,
+    onSort?: (sortKey: string, sortDirection: SortDirection) => mixed,
+    enableInternalSorting?: boolean,
+  },
+): {
+  handleSortClick: (sortKey: $Keys<T>) => mixed,
+  sortDirection: SortDirection,
+  sortKey?: string,
+  sortedEntries: T[],
+  sortedKeys: $Keys<T>[],
+} {
+  const [sortKey, setSortKey] = React.useState(defaultSortKey);
+  const [sortDirection, setSortDirection] =
+    React.useState<SortDirection>(defaultSortDirection);
+
+  const getNextDirection = (direction: SortDirection): SortDirection => {
+    switch (direction) {
+    case 'original':
+      return 'desc';
+    case 'asc':
+      return 'original';
+    case 'desc':
+      return 'asc';
+    default:
+      return 'original';
+    }
+  };
+  const advanceSortDirection = (dir: SortDirection) => {
+    const nextDirection = getNextDirection(dir);
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    setSortDirection((dir) => nextDirection);
+    return nextDirection;
+  };
+
+  const handleSortClick = React.useCallback(
+    (nextSortKey: string) => {
+      let nextSortDirection;
+      if (nextSortKey === sortKey) {
+        nextSortDirection = advanceSortDirection(sortDirection);
+      } else {
+        setSortKey(nextSortKey);
+        nextSortDirection = 'desc';
+      }
+      setSortDirection(nextSortDirection);
+      onSort?.(nextSortKey, nextSortDirection);
+    },
+    [sortKey, sortDirection, entries],
+  );
+
+  const sortedEntries = React.useMemo(() => {
+    if (!enableInternalSorting || sortDirection === 'original') {
+      return entries;
+    }
+    const caseInsensitiveSortFunction = (entry) => {
+      if (typeof entry[sortKey] === 'string') {
+        return entry[sortKey].toLowerCase();
+      }
+      return entry[sortKey];
+    };
+    const sortedAsc = sortBy(entries, caseInsensitiveSortFunction);
+    return sortDirection === 'asc' ? sortedAsc : sortedAsc.reverse();
+  }, [sortDirection, sortKey, entries, enableInternalSorting]);
+
+  const sortedKeys = React.useMemo(
+    () => sortedEntries.map((ent) => get(ent, idName)),
+    [sortedEntries],
+  );
+
+  return {
+    sortedEntries,
+    sortedKeys,
+    sortDirection,
+    sortKey,
+    handleSortClick,
+  };
+}

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

@@ -0,0 +1,10 @@
+// @flow strict
+
+export * from './Cell';
+export * from './DefaultRow';
+export * from './DefaultTableHeader';
+export * from './StaticTable';
+export * from './Table';
+export * from './TableActionBar';
+export * from './TableBottomBar';
+export * from './TableTopBar';

package/lib/components/Tabs/Tab/Tab.js

@@ -35,7 +35,6 @@ const Tab = exports.Tab = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     ...props
   } = _ref;
   const tabRef = React.useRef(null);
-  // @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLButtonElement'.
   React.useImperativeHandle(forwardRef, () => tabRef.current);
   const selected = tabId && tabId === selectedTab?.tabId;
   const onClickHandler = e => {
@@ -46,7 +45,6 @@ const Tab = exports.Tab = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         label
       });
       onClick && onClick(e);
-      // @ts-ignore - TS2339 - Property 'blur' does not exist on type 'never'.
       tabRef.current?.blur();
     }
   };
@@ -58,9 +56,7 @@ const Tab = exports.Tab = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       [_TabModule.default.mediumSize]: size === 'medium',
       [_TabModule.default.smallSize]: size === 'small'
     }, classNames?.wrapper),
-    onClick: onClickHandler
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    onClick: onClickHandler,
     style: {
       width
     },

package/lib/components/Tabs/Tab/Tab.js.flow

@@ -0,0 +1,140 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../../types/typography';
+import {classify} from '../../../utils/classify';
+import {UnstyledButton} from '../../Button';
+import type {IconType} from '../../Icon';
+import {Icon} from '../../Icon';
+import {ButtonTextMedium, ButtonTextSmall} from '../../Text';
+
+import css from './Tab.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, iconTextWrap?: string}>;
+
+export const TAB_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+});
+
+export const tabSizeOptions: Array<mixed> = [...Object.keys(TAB_SIZE)];
+
+export type TabSize = $Keys<typeof TAB_SIZE>;
+
+export type TabProps = {
+  classNames?: ClassNames,
+  onSelect?: ({tabId?: string, label?: string}) => mixed,
+  size?: TabSize,
+  selectedTab?: {tabId?: string, label?: string},
+  disabled?: boolean,
+  tabId?: string,
+  label?: string,
+  iconName?: string,
+  iconType?: IconType,
+  width?: string,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export const Tab: React$AbstractComponent<TabProps, HTMLButtonElement> =
+  React.forwardRef<TabProps, HTMLButtonElement>(
+    (
+      {
+        classNames,
+        onSelect,
+        size = 'medium',
+        selectedTab,
+        disabled = false,
+        tabId,
+        label,
+        iconName,
+        iconType,
+        onClick,
+        width,
+        ...props
+      }: TabProps,
+      forwardRef,
+    ) => {
+      const tabRef = React.useRef(null);
+      React.useImperativeHandle(forwardRef, () => tabRef.current);
+      const selected = tabId && tabId === selectedTab?.tabId;
+      const onClickHandler = (e) => {
+        if (!disabled) {
+          e.preventDefault();
+          onSelect && onSelect({tabId, label});
+          onClick && onClick(e);
+          tabRef.current?.blur();
+        }
+      };
+      return (
+        <UnstyledButton
+          {...props}
+          disabled={disabled}
+          className={classify(
+            css.button,
+            {
+              [css.selected]: selected === true,
+              [css.disabled]: disabled === true,
+              [css.mediumSize]: size === 'medium',
+              [css.smallSize]: size === 'small',
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onClickHandler}
+          style={{width}}
+          tabIndex={disabled ? -1 : 0}
+          ref={tabRef}
+        >
+          <span
+            className={classify(
+              css.iconTextWrap,
+              {
+                [css.selected]: selected === true,
+                [css.disabled]: disabled === true,
+              },
+              classNames?.iconTextWrap,
+            )}
+          >
+            {iconName ? (
+              <Icon
+                name={iconName}
+                type={iconType}
+                size={size}
+                className={classify(css.icon, {
+                  [css.disabled]: disabled === true,
+                })}
+              />
+            ) : null}
+
+            {label && (
+              <>
+                {size === TAB_SIZE.medium ? (
+                  <ButtonTextMedium
+                    color={TEXT_COLORS.secondary}
+                    className={classify(css.tabContainer, {
+                      [css.disabled]: disabled === true,
+                    })}
+                  >
+                    {label}
+                  </ButtonTextMedium>
+                ) : (
+                  <ButtonTextSmall
+                    color={TEXT_COLORS.secondary}
+                    className={classify(css.tabContainer, {
+                      [css.selected]: selected === true,
+                      [css.disabled]: disabled === true,
+                    })}
+                  >
+                    {label}
+                  </ButtonTextSmall>
+                )}
+              </>
+            )}
+          </span>
+        </UnstyledButton>
+      );
+    },
+  );
+
+Tab.displayName = 'Tab';

package/lib/components/Tabs/Tab/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Tab';

package/lib/components/Tabs/TabList/TabDropdown.js

@@ -35,7 +35,6 @@ const TabDropdown = _ref => {
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
     placement: anchorPosition,
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
@@ -52,9 +51,7 @@ const TabDropdown = _ref => {
       "data-testid": "TabDropdown",
       className: (0, _classify.classify)(_TabDropdownModule.default.tabDropdownContainer, classNames?.wrapper)
     }, /*#__PURE__*/React.createElement(_Tab.Tab, _extends({}, props?.tab, {
-      size: size
-      // @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-      ,
+      size: size,
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         e.stopPropagation();
@@ -66,12 +63,9 @@ const TabDropdown = _ref => {
       }
     })), isOpen && props?.menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
       modal: false,
-      context: context
-      // @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
-      ,
+      context: context,
       initialFocus: refs.reference
     }, /*#__PURE__*/React.createElement("div", {
-      // @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       className: _TabDropdownModule.default.menuWrapper,
       style: {

package/lib/components/Tabs/TabList/TabDropdown.js.flow

@@ -0,0 +1,123 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  shift,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+
+import {spaceNone, spaceXXSmall} from '../../../styles/variables/_space';
+import {classify} from '../../../utils/classify';
+import {ClickAway} from '../../../utils/click-away';
+import {mergeRefs} from '../../../utils/merge-refs';
+import type {AnchorType} from '../../ButtonDropdown';
+import type {MenuOption, MenuProps} from '../../Menu';
+import {Menu} from '../../Menu';
+import type {ElevationType} from '../../Tooltip';
+import {getElevationValue} from '../../Tooltip';
+import type {TabProps} from '../Tab';
+import {Tab} from '../Tab';
+
+import css from './TabDropdown.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type TabDropdownProps = {
+  anchorPosition?: AnchorType,
+  size?: 'medium' | 'small',
+  props?: {
+    tab: TabProps,
+    menu: MenuProps,
+  },
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
+  classNames?: ClassNames,
+  selected?: boolean,
+  disabled?: boolean,
+  elevation?: ElevationType,
+};
+
+export const TabDropdown = ({
+  anchorPosition = 'bottom-start',
+  size,
+  onOptionSelect,
+  props,
+  elevation = 'modal',
+  classNames,
+}: TabDropdownProps): React.Node => {
+  const {x, y, refs, strategy, context} = useFloating({
+    open: true,
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: autoUpdate,
+    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+  });
+
+  return (
+    <ClickAway>
+      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+        <div
+          data-testid="TabDropdown"
+          className={classify(css.tabDropdownContainer, classNames?.wrapper)}
+        >
+          <Tab
+            {...props?.tab}
+            size={size}
+            ref={mergeRefs([refs.setReference, triggerRef])}
+            onClick={(e) => {
+              e.stopPropagation();
+              onOpen();
+            }}
+            classNames={{
+              wrapper: css.dotTabWrapper,
+              iconTextWrap: css.dotTextWrap,
+            }}
+          />
+          {isOpen && props?.menu && (
+            <FloatingPortal>
+              <FloatingFocusManager
+                modal={false}
+                context={context}
+                initialFocus={refs.reference}
+              >
+                <div
+                  ref={mergeRefs([refs.setFloating, boundaryRef])}
+                  className={css.menuWrapper}
+                  style={{
+                    display: 'flex',
+                    position: strategy,
+                    top: y ?? spaceNone,
+                    left: x ?? spaceNone,
+                    '--menu-elevation': getElevationValue(elevation),
+                  }}
+                >
+                  <Menu
+                    {...props.menu}
+                    onSelect={(option, e) => {
+                      onOptionSelect && onOptionSelect(option, e);
+                      clickAway();
+                    }}
+                    size={props.menu.size || size}
+                    onTabOut={clickAway}
+                  />
+                </div>
+              </FloatingFocusManager>
+            </FloatingPortal>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/Tabs/TabList/TabList.js

@@ -24,7 +24,6 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     elevation = 'modal'
   } = _ref;
   const ref = React.useRef(null);
-  // @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLDivElement'.
   React.useImperativeHandle(forwardRef, () => ref.current);
   const {
     width
@@ -34,7 +33,6 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     const childrenArray = React.Children.toArray(children);
     const totalChildCount = childrenArray.length;
     let tabListWidth = 0;
-    // @ts-ignore
     const menuOptions = [];
     let nodes = [];
     const tabListNodes = [];
@@ -47,7 +45,6 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
         disabled,
         iconName,
         iconType
-        // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
       } = child.props;
       const widthInt = parseInt(width);
       tabListWidth = tabListWidth + widthInt;
@@ -55,10 +52,7 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
         const childOnSelect = params => {
           onSelect && onSelect(params); // call the tab level onSelect
         };
-        tabListNodes.push(
-        /*#__PURE__*/
-        // @ts-ignore - TS2769 - No overload matches this call.
-        React.cloneElement(child, {
+        tabListNodes.push(/*#__PURE__*/React.cloneElement(child, {
           size,
           onSelect: childOnSelect,
           selectedTab
@@ -73,8 +67,6 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
         });
       }
     }
-
-    // @ts-ignore - TS7031 - Binding element 'key' implicitly has an 'any' type. | TS7031 - Binding element 'label' implicitly has an 'any' type.
     const menuOnSelect = _ref2 => {
       let {
         key,
@@ -96,9 +88,7 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     })();
     const tabDropDownNode = menuOptions.length ? /*#__PURE__*/React.createElement(_TabDropdown.TabDropdown, {
       key: 'tabDropdown' + menuOptions.length,
-      size: size
-      // @ts-ignore - TS2322 - Type '({ key, label }: { key: any; label: any; }) => void' is not assignable to type '(option: MenuOption, arg2?: SyntheticEvent<HTMLElement, Event> | null | undefined) => unknown'.
-      ,
+      size: size,
       onOptionSelect: menuOnSelect,
       props: {
         tab: {
@@ -122,11 +112,8 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     return nodes;
   };
   React.useLayoutEffect(() => {
-    // @ts-ignore - TS2339 - Property 'offsetWidth' does not exist on type 'never'.
     if (ref.current && ref.current.offsetWidth) {
-      const availableContainerWidth =
-      // @ts-ignore - TS2339 - Property 'offsetWidth' does not exist on type 'never'.
-      ref.current.offsetWidth - (parseInt(_size.size36) + parseInt(_space.spaceMedium));
+      const availableContainerWidth = ref.current.offsetWidth - (parseInt(_size.size36) + parseInt(_space.spaceMedium));
       setContainerWidth(availableContainerWidth);
     }
     // it depends on width of the screen as ref.current.offsetWidth will not provide the events when changed.
@@ -136,7 +123,6 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     "data-testid": "Tabs",
     className: (0, _classify.classify)(_TabListModule.default.tabsContainer, {
       [_TabListModule.default.mediumSize]: size === 'medium',
-      // @ts-ignore - TS2367 - This condition will always return 'false' since the types '"medium" | undefined' and '"small"' have no overlap.
       [_TabListModule.default.smallSize]: size === 'small'
     }, classNames?.wrapper)
   }, containerWidth ? childrenWithProps() : null);