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

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

@@ -1,98 +0,0 @@
-import {$Keys} from 'utility-types';
-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 extends GenericObject>(
-  entries: Array<T>,
-  idName: $Keys<T>,
-  {
-    defaultSortKey = 'id',
-    defaultSortDirection = 'original',
-    onSort,
-    enableInternalSorting = true,
-  }: {
-    defaultSortKey?: $Keys<T>;
-    defaultSortDirection?: SortDirection;
-    onSort?: (sortKey: string, sortDirection: SortDirection) => unknown;
-    enableInternalSorting?: boolean;
-  },
-): {
-  handleSortClick: (sortKey: $Keys<T>) => unknown;
-  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.d.ts

@@ -1,8 +0,0 @@
-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.d.ts

@@ -1,146 +0,0 @@
-import {$ReadOnly, $Keys} from 'utility-types';
-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<unknown> = [...Object.keys(TAB_SIZE)];
-export type TabSize = $Keys<typeof TAB_SIZE>;
-export type TabProps = {
-  classNames?: ClassNames;
-  onSelect?: (arg0: {tabId?: string; label?: string}) => unknown;
-  size?: TabSize;
-  selectedTab?: {
-    tabId?: string;
-    label?: string;
-  };
-  disabled?: boolean;
-  tabId?: string;
-  label?: string;
-  iconName?: string;
-  iconType?: IconType;
-  width?: string;
-  onClick?:
-    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
-    | null
-    | undefined;
-};
-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.d.ts

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

package/lib/components/Tabs/TabList/TabDropdown.d.ts

@@ -1,100 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import {
-  // $FlowFixMe[untyped-import]
-  autoUpdate, // $FlowFixMe[untyped-import]
-  flip, // $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 {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,
-    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  classNames?: ClassNames;
-  selected?: boolean;
-  disabled?: boolean;
-};
-export const TabDropdown = ({
-  anchorPosition = 'bottom-start',
-  size,
-  onOptionSelect,
-  props,
-  classNames,
-}: TabDropdownProps): React.ReactNode => {
-  const menuBtnRef = React.useRef();
-  const {x, y, refs, strategy} = 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)}
-          ref={menuBtnRef}
-        >
-          <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 && (
-            <div
-              ref={mergeRefs([refs.setFloating, boundaryRef])}
-              style={{
-                display: 'flex',
-                position: strategy,
-                top: y ?? spaceNone,
-                left: x ?? spaceNone,
-              }}
-            >
-              <Menu
-                {...props.menu}
-                onSelect={(option, e) => {
-                  onOptionSelect && onOptionSelect(option, e);
-                  clickAway();
-                }}
-                size={props.menu.size || size}
-                onTabOut={clickAway}
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </ClickAway>
-  );
-};

package/lib/components/Tabs/TabList/TabList.d.ts

@@ -1,157 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-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 {TabDropdown} from './TabDropdown';
-import css from './TabList.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type TabListProps = {
-  classNames?: ClassNames;
-  onSelect?: (arg0: {tabId: string; label?: string}) => unknown;
-  children?: React.ReactNode;
-  size?: 'medium';
-  selectedTab?: {
-    tabId: string;
-    label?: string;
-  };
-  menuWidth?: string;
-};
-export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
-  React.forwardRef<TabListProps, HTMLDivElement>(
-    (
-      {
-        classNames,
-        children,
-        size,
-        onSelect,
-        selectedTab,
-        menuWidth,
-      }: TabListProps,
-      forwardRef,
-    ): React.ReactNode => {
-      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.ReactNode[] = [];
-        const tabListNodes: React.ReactNode[] = [];
-
-        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,
-              },
-            }}
-          />
-        ) : 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.d.ts

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

package/lib/components/Tabs/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Tab';
-export * from './TabList';