@spaced-out/ui-design-system 0.4.15 → 0.5.1

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

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

@@ -1,10 +0,0 @@
-// @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.flow

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

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

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

@@ -1,123 +0,0 @@
-// @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.flow

@@ -1,161 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import {useWindowSize} from '../../../hooks/useWindowSize/useWindowSize';
-import {size36, size100} from '../../../styles/variables/_size';
-import {spaceMedium} from '../../../styles/variables/_space';
-import {classify} from '../../../utils/classify';
-import type {ElevationType} from '../../Tooltip';
-
-import {TabDropdown} from './TabDropdown';
-
-import css from './TabList.module.css';
-
-
-type ClassNames = $ReadOnly<{wrapper?: string}>;
-
-export type TabListProps = {
-  classNames?: ClassNames,
-  onSelect?: ({tabId: string, label?: string}) => mixed,
-  children?: React.Node,
-  size?: 'medium',
-  selectedTab?: {tabId: string, label?: string},
-  menuWidth?: string,
-  elevation?: ElevationType,
-};
-
-export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
-  React.forwardRef<TabListProps, HTMLDivElement>(
-    (
-      {
-        classNames,
-        children,
-        size,
-        onSelect,
-        selectedTab,
-        menuWidth,
-        elevation = 'modal',
-      }: TabListProps,
-      forwardRef,
-    ): React.Node => {
-      const ref = React.useRef(null);
-      React.useImperativeHandle(forwardRef, () => ref.current);
-      const {width} = useWindowSize();
-
-      const [containerWidth, setContainerWidth] = React.useState(0);
-
-      const childrenWithProps = () => {
-        const childrenArray = React.Children.toArray(children);
-        const totalChildCount = childrenArray.length;
-        let tabListWidth = 0;
-        const menuOptions = [];
-
-        let nodes: React.Node[] = [];
-        const tabListNodes: React.Node[] = [];
-        for (let i = 0; i < totalChildCount; i++) {
-          const child = childrenArray[i];
-          const {
-            width = size100,
-            tabId,
-            label,
-            disabled,
-            iconName,
-            iconType,
-          } = child.props;
-          const widthInt = parseInt(width);
-          tabListWidth = tabListWidth + widthInt;
-
-          if (tabListWidth < containerWidth || i === 0) {
-            const childOnSelect = (params) => {
-              onSelect && onSelect(params); // call the tab level onSelect
-            };
-            tabListNodes.push(
-              React.cloneElement(child, {
-                size,
-                onSelect: childOnSelect,
-                selectedTab,
-              }),
-            );
-          } else {
-            menuOptions.push({
-              key: tabId,
-              label,
-              disabled,
-              iconLeft: iconName,
-              iconLeftType: iconType,
-            });
-          }
-        }
-
-        const menuOnSelect = ({key, label}) => {
-          onSelect && onSelect({tabId: key, label});
-        };
-        const selectedKeys = [selectedTab?.tabId || ''];
-
-        const isMenuOptionSelected = (() => {
-          for (let i = 0; i < menuOptions.length; i++) {
-            if (menuOptions[i].key === selectedTab?.tabId) {
-              return true;
-            }
-          }
-          return false;
-        })();
-
-        const tabDropDownNode = menuOptions.length ? (
-          <TabDropdown
-            key={'tabDropdown' + menuOptions.length}
-            size={size}
-            onOptionSelect={menuOnSelect}
-            props={{
-              tab: {
-                iconName: 'ellipsis',
-                tabId: 'tab-dropdown',
-                selectedTab: {
-                  tabId: isMenuOptionSelected ? 'tab-dropdown' : '',
-                },
-              },
-              menu: {
-                isFluid: false,
-                menuDisabled: false,
-                options: menuOptions,
-                selectedKeys,
-                width: menuWidth,
-              },
-            }}
-            elevation={elevation}
-          />
-        ) : null;
-
-        nodes = [...tabListNodes, tabDropDownNode];
-        return nodes;
-      };
-
-      React.useLayoutEffect(() => {
-        if (ref.current && ref.current.offsetWidth) {
-          const availableContainerWidth =
-            ref.current.offsetWidth -
-            (parseInt(size36) + parseInt(spaceMedium));
-          setContainerWidth(availableContainerWidth);
-        }
-        // it depends on width of the screen as ref.current.offsetWidth will not provide the events when changed.
-      }, [ref.current, width]);
-
-      return (
-        <div
-          ref={ref}
-          data-testid="Tabs"
-          className={classify(
-            css.tabsContainer,
-            {
-              [css.mediumSize]: size === 'medium',
-              [css.smallSize]: size === 'small',
-            },
-            classNames?.wrapper,
-          )}
-        >
-          {containerWidth ? childrenWithProps() : null}
-        </div>
-      );
-    },
-  );

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

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

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

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