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

package/lib/components/Toast/ToastContainer.js.flow

@@ -1,125 +0,0 @@
-// @flow strict
-
-import React, {useEffect, useReducer, useRef} from 'react';
-// $FlowFixMe[untyped-import]
-import {createPortal} from 'react-dom';
-import type {actionTypes, contentTypes, optionTypes} from 'src/types/toast';
-
-import {useToastPortal} from '../../hooks';
-import {classify} from '../../utils/classify';
-
-import {toastManager} from './';
-
-import css from './ToastContainer.module.css';
-
-
-const ADD = 'ADD';
-const REMOVE = 'REMOVE';
-
-type stateTypes = {
-  ...optionTypes,
-  content?: contentTypes,
-};
-
-type MapperValues = {
-  ...optionTypes,
-  content: contentTypes,
-};
-
-type Actions = {
-  type: actionTypes,
-  data: stateTypes,
-};
-
-const reducer = (state: stateTypes[], action: Actions) => {
-  const {type, data} = action;
-
-  if (type === ADD) {
-    if (
-      /* $FlowIgnore */
-      state.filter((i) => i.uniqueCode && i.uniqueCode === data.uniqueCode)
-        .length
-    ) {
-      return state;
-    }
-
-    return [...state, data];
-  } else if (type === REMOVE) {
-    return state.filter((i) => i.id !== data.id);
-  }
-  return state;
-};
-
-export const ToastContainer = (): null | React$Portal => {
-  const [data, dispatch] = useReducer(reducer, []);
-  const toastRef = useRef<HTMLDivElement | null>(null);
-
-  const {loaded} = useToastPortal({toastRef});
-
-  const callback = (
-    actionType: actionTypes,
-    content: contentTypes,
-    options: optionTypes,
-  ) => {
-    if (actionType === ADD) {
-      dispatch({type: ADD, data: {content, ...options, key: `${options.id}`}});
-    }
-    if (actionType === REMOVE) {
-      dispatch({type: REMOVE, data: {id: options.id}});
-    }
-
-    if (options.autoClose) {
-      window.setTimeout(() => {
-        dispatch({type: REMOVE, data: {id: options.id}});
-      }, options.timeout);
-    }
-  };
-
-  useEffect(() => {
-    toastManager.subscribe(callback);
-  }, []);
-
-  const positionMaintainer = () => {
-    const mapper = {};
-    /* $FlowIgnore */
-    data.map(({position, ...rest}: optionTypes) => {
-      if (position) {
-        if (!mapper[position]) {
-          mapper[position] = [];
-        }
-        mapper[position].push(rest);
-      }
-    });
-
-    return mapper;
-  };
-
-  const markup = () => {
-    const mapper = positionMaintainer();
-
-    return Object.keys(mapper).map((position) => {
-      const content = mapper[position].map(({content, id}: MapperValues) =>
-        // $FlowFixMe
-        React.cloneElement(content, {
-          key: id,
-          onClose: () => dispatch({type: REMOVE, data: {id}}),
-        }),
-      );
-
-      return (
-        <div
-          key={position.toString()}
-          className={classify(css.toastContainer, css[position])}
-        >
-          {content}
-        </div>
-      );
-    });
-  };
-
-  if (!toastRef.current) {
-    return null;
-  }
-
-  return loaded ? createPortal(markup(), toastRef.current) : null;
-};

package/lib/components/Toast/ToastManager.js.flow

@@ -1,67 +0,0 @@
-// @flow strict
-
-import type {
-  callbackFuncTypes,
-  contentTypes,
-  ToastOptions,
-} from '../../types/toast';
-import {uuid} from '../../utils/helpers';
-
-
-const DEFAULT_AUTOCLOSE_TIME = 8000; // default auto close time for with autoClose = true (be default true) but timeout not passed.
-
-export const POSITIONS = {
-  TOP_CENTER: 'topCenter',
-  TOP_LEFT: 'topLeft',
-  TOP_RIGHT: 'topRight',
-  BOTTOM_LEFT: 'bottomLeft',
-  BOTTOM_RIGHT: 'bottomRight',
-  BOTTOM_CENTER: 'bottomCenter',
-};
-
-export const ACTIONS = {
-  ADD: 'ADD',
-  REMOVE: 'REMOVE',
-};
-
-const defaultOptions: ToastOptions = {
-  autoClose: true,
-  timeout: DEFAULT_AUTOCLOSE_TIME,
-  position: POSITIONS.BOTTOM_LEFT,
-};
-
-export const toastManager: {
-  add(content: contentTypes, options?: ToastOptions): string,
-  remove(id: string): boolean,
-  subscribe(callback: callbackFuncTypes): void,
-  ...
-} = (() => {
-  let callbackFn: callbackFuncTypes;
-
-  const manager = {
-    subscribe(callback: callbackFuncTypes): void {
-      callbackFn = callback;
-    },
-
-    add(content: contentTypes, options?: ToastOptions): string {
-      const mergedOptions = {...defaultOptions, ...options};
-      const toastId = uuid();
-      callbackFn &&
-        callbackFn(ACTIONS.ADD, content, {...mergedOptions, id: toastId});
-      return toastId;
-    },
-
-    remove(id: string) {
-      callbackFn(ACTIONS.REMOVE, null, {id});
-      return true;
-    },
-  };
-
-  return manager;
-})();
-
-export const toastApi = {
-  show: (content: contentTypes, options?: ToastOptions): string =>
-    toastManager.add(content, options),
-  remove: (id: string): boolean => toastManager.remove(id),
-};

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

@@ -1,12 +0,0 @@
-// @flow strict
-
-export type {ToastProps, ToastSemanticType} from './Toast';
-export {
-  Toast,
-  TOAST_SEMANTIC,
-  ToastBody,
-  ToastFooter,
-  ToastTitle,
-} from './Toast';
-export {ToastContainer} from './ToastContainer';
-export {toastApi, toastManager} from './ToastManager';

package/lib/components/Toggle/Toggle.js.flow

@@ -1,115 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-
-import css from './Toggle.module.css';
-
-/**
- * Note:
- * Do not wrap Toggle in a label. For simplicity's sake, Toggle uses an
- * internal label tag to handle click delegation to the hidden input, and
- * nesting labels is a bad idea.
- */
-
-type ClassNames = $ReadOnly<{wrapper?: string, label?: string}>;
-
-export type ToggleProps = {
-  name?: string,
-  classNames?: ClassNames,
-  children?: React.Node,
-  checked?: boolean,
-  onChange?: ({value: string, checked: boolean}) => mixed,
-  disabled?: boolean,
-  focused?: boolean,
-  value?: string,
-  ariaLabel?: string,
-  labelPosition?: 'left' | 'right',
-};
-
-export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
-  React.forwardRef<ToggleProps, HTMLInputElement>(
-    (
-      {
-        name = 'toggle',
-        value = '',
-        classNames,
-        children,
-        disabled,
-        checked,
-        focused,
-        onChange,
-        ariaLabel,
-        labelPosition = 'right',
-        ...props
-      }: ToggleProps,
-      forwardRef,
-    ): React.Node => {
-      const toggleInput = React.createRef<HTMLInputElement>();
-      React.useImperativeHandle(forwardRef, () => toggleInput.current);
-      const handleOnChange = () => {
-        if (!disabled) {
-          onChange &&
-            onChange({
-              value,
-              checked: !checked,
-            });
-        }
-      };
-
-      const onWrapClickHandler = (e) => {
-        e.nativeEvent.stopImmediatePropagation();
-        toggleInput.current?.click();
-      };
-
-      React.useEffect(() => {
-        if (toggleInput.current && focused) {
-          toggleInput.current.focus();
-        }
-      }, [focused]);
-      return (
-        <div
-          className={classify(
-            css.container,
-            {
-              [css.disabled]: disabled,
-            },
-            classNames?.wrapper,
-          )}
-          onClick={onWrapClickHandler}
-        >
-          {labelPosition === 'left' && React.Children.count(children) > 0 && (
-            <div className={classify(css.toggleLabel, classNames?.label)}>
-              {children}
-            </div>
-          )}
-          <span className={css.toggleWrap}>
-            <input
-              type="checkbox"
-              name={name}
-              value={value}
-              checked={checked}
-              onChange={handleOnChange}
-              ref={toggleInput}
-              disabled={disabled}
-              aria-label={ariaLabel || children}
-              {...props}
-            />
-            <span
-              className={classify(css.toggle, {
-                [css.disabledButton]: disabled,
-              })}
-            />
-          </span>
-          {labelPosition === 'right' && React.Children.count(children) > 0 && (
-            <div className={classify(css.toggleLabel, classNames?.label)}>
-              {children}
-            </div>
-          )}
-        </div>
-      );
-    },
-  );
-
-Toggle.name = Toggle.displayName = 'Toggle';

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

@@ -1,2 +0,0 @@
-//@flow strict
-export * from './Toggle';

package/lib/components/TokenListInput/TokenListInput.js.flow

@@ -1,389 +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]
-  useFloating,
-} from '@floating-ui/react';
-import without from 'lodash/without';
-
-import {useReferenceElementWidth} from '../../hooks';
-import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
-import {TEXT_COLORS} from '../../types/typography';
-import classify from '../../utils/classify';
-import {ClickAway} from '../../utils/click-away';
-import type {ClickAwayRefType} from '../../utils/click-away/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
-import {
-  getFirstOption,
-  getFirstOptionFromGroup,
-} from '../../utils/token-list-input/token-list-input';
-import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
-import {CircularLoader} from '../CircularLoader';
-import {Icon} from '../Icon';
-import type {InputProps} from '../Input';
-import type {BaseMenuProps} from '../Menu';
-import {Menu} from '../Menu';
-import {BodySmall} from '../Text';
-import {type ElevationType, getElevationValue} from '../Tooltip';
-
-import type {ResolveTokenValueProps} from './TokenValueChips';
-import {TokenValueChips} from './TokenValueChips';
-
-import css from './TokenListInput.module.css';
-
-
-export const DEFAULT_LIMIT_VALUE = 100;
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  box?: string,
-  input?: string,
-}>;
-
-export type TokenListMenuOptionTypes<T> = {
-  options?: Array<T>,
-  groupTitleOptions?: Array<TokenGroupTitleOption<T>>,
-  resolveLabel?: (option: T) => string,
-};
-
-export type TokenGroupTitleOption<T> = {
-  groupTitle?: React.Node,
-  options?: Array<T>,
-  showLineDivider?: boolean,
-};
-
-export type TokenListMenuProps<T> = {
-  ...BaseMenuProps,
-  ...TokenListMenuOptionTypes<T>,
-};
-
-// TODO: use Generics with Constraints when we have typescript.
-
-export type Props<T> = {
-  classNames?: ClassNames,
-  clickAwayRef?: ClickAwayRefType,
-  disabled?: boolean, // disables user interaction with the input
-  error?: boolean,
-  errorText?: string,
-  focusOnMount?: boolean,
-  helperText?: string,
-  inputValue?: string,
-  inputPlaceholder?: string,
-  limit?: number, // maximum number of values
-  isLoading?: boolean,
-  locked?: boolean,
-  onChange: (values: Array<T>) => mixed, // an onChange handler
-  onInputBlur?: (e: SyntheticEvent<HTMLInputElement>) => mixed,
-  onInputChange?: (value: string) => mixed,
-  onInputFocus?: (e: SyntheticEvent<HTMLInputElement>) => mixed,
-  placeholder?: string,
-  size?: 'medium' | 'small',
-  tabIndex?: number,
-  values: Array<T>, // a list of options representing the current value of the input
-  menu?: TokenListMenuProps<T>,
-  onMenuOpen?: () => mixed,
-  onMenuClose?: () => mixed,
-  resolveTokenValue?: (ResolveTokenValueProps<T>) => React.Node,
-  inputProps?: InputProps,
-  elevation?: ElevationType,
-};
-
-export function TokenListInput<T>(props: Props<T>): React.Node {
-  const {
-    classNames,
-    clickAwayRef,
-    disabled = false,
-    error,
-    errorText,
-    focusOnMount,
-    helperText,
-    inputValue = '',
-    inputPlaceholder = '',
-    limit = DEFAULT_LIMIT_VALUE,
-    isLoading,
-    locked,
-    onChange,
-    menu,
-    onMenuOpen,
-    onMenuClose,
-    onInputBlur,
-    onInputChange,
-    onInputFocus,
-    placeholder,
-    size = 'medium',
-    tabIndex,
-    values,
-    resolveTokenValue,
-    inputProps,
-    elevation = 'modal',
-  } = props;
-  const menuRef = React.useRef<HTMLDivElement | null>(null);
-
-  const {x, y, refs, strategy, context} = useFloating({
-    open: true,
-    strategy: STRATEGY_TYPE.absolute,
-    placement: ANCHOR_POSITION_TYPE.bottomStart,
-    whileElementsMounted: autoUpdate,
-    middleware: [flip(), offset(parseInt(spaceXXSmall))],
-  });
-
-  const inputRef = React.useRef<?HTMLInputElement>();
-  const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
-
-  const onOpenToggle = (isOpen) => {
-    if (isOpen) {
-      onMenuOpen?.();
-      inputRef.current?.focus();
-    } else {
-      onMenuClose?.();
-      inputRef.current?.blur();
-    }
-  };
-
-  React.useEffect(() => {
-    if (focusOnMount) {
-      inputRef.current?.focus();
-    }
-  }, [focusOnMount]);
-
-  const addValue = (value: T) => {
-    if (locked || !value || value.disabled) {
-      return; // Prevent adding values when disabled or locked
-    }
-    onInputChange?.('');
-    // $FlowFixMe[incompatible-use] - token has key property
-    const existingToken = values.find((token) => token.key === value.key);
-    if (!existingToken) {
-      onChange([...values, value]);
-    }
-    setTimeout(() => {
-      inputRef.current && inputRef.current.focus();
-    }, 0);
-  };
-
-  const removeValue = (value: T) => {
-    !disabled && !locked && onChange(without(values, value));
-    setTimeout(() => {
-      inputRef.current && inputRef.current.focus();
-    }, 0);
-  };
-
-  const hideInput = values.length >= limit || disabled || locked;
-
-  const handleInputKeyDown = (
-    event: SyntheticKeyboardEvent<HTMLInputElement>,
-  ) => {
-    const value = event.currentTarget.value;
-    const key = event.key;
-
-    // Note: adding this Enter key handler to handle the case where the user is typing a new value
-    // and presses Enter to add the value to the list (maintain parity with the old TokenListInput)
-    if (key === 'Enter') {
-      if (value.trim()) {
-        event.preventDefault();
-        let firstOption = null;
-        if (menu?.options && menu.options.length > 0) {
-          //$FlowFixMe
-          firstOption = getFirstOption(menu.options);
-        } else if (
-          menu?.groupTitleOptions &&
-          menu.groupTitleOptions.length > 0
-        ) {
-          //$FlowFixMe
-          firstOption = getFirstOptionFromGroup(menu.groupTitleOptions);
-        }
-        if (firstOption) {
-          //$FlowFixMe
-          addValue(firstOption);
-        }
-      }
-    } else if (key === 'Backspace') {
-      if (inputValue === '' && values.length > 0) {
-        onChange(values.slice(0, -1));
-      }
-    } else if (key === 'Escape') {
-      event.preventDefault();
-      setTimeout(() => {
-        inputRef.current && inputRef.current.blur();
-      }, 0);
-    }
-  };
-
-  return (
-    <ClickAway
-      closeOnEscapeKeypress={true}
-      onChange={onOpenToggle}
-      clickAwayRef={clickAwayRef}
-    >
-      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
-        <>
-          <div
-            ref={menuRef}
-            className={classify(css.tokenListContainer, classNames?.wrapper)}
-            data-testid="TokenListInput"
-          >
-            <div
-              onClick={() => {
-                if (disabled || locked || values.length >= limit) {
-                  return;
-                }
-                if (!isOpen) {
-                  onOpen();
-                }
-              }}
-              onFocus={(e) => {
-                if (disabled || locked || values.length >= limit) {
-                  return;
-                }
-                if (!isOpen) {
-                  onOpen();
-                }
-                onInputFocus?.(e);
-              }}
-              onBlur={(e) => {
-                onInputBlur?.(e);
-              }}
-              className={classify(
-                css.box,
-                {
-                  [css.inputDisabled]: disabled,
-                  [css.medium]: size === 'medium',
-                  [css.small]: size === 'small',
-                  [css.withError]: error,
-                  [css.inputLocked]: locked,
-                },
-                classNames?.box,
-              )}
-              ref={mergeRefs([refs.setReference, triggerRef])}
-            >
-              <TokenValueChips
-                values={values}
-                resolveTokenValue={resolveTokenValue}
-                disabled={disabled}
-                locked={locked}
-                onDismiss={removeValue}
-              />
-              {!hideInput && (
-                <input
-                  {...inputProps}
-                  ref={inputRef}
-                  type="text"
-                  readOnly={locked}
-                  value={inputValue}
-                  placeholder={
-                    values.length === 0
-                      ? placeholder || inputPlaceholder
-                      : inputPlaceholder
-                  }
-                  onChange={(event) => {
-                    onInputChange?.(event.target.value);
-                    !isOpen && onOpen();
-                  }}
-                  disabled={disabled || locked}
-                  tabIndex={tabIndex}
-                  data-qa-id="token-list-input"
-                  onKeyDown={handleInputKeyDown}
-                  className={classify(
-                    {
-                      [css.inputMedium]: size === 'medium',
-                      [css.inputSmall]: size === 'small',
-                    },
-                    classNames?.input,
-                  )}
-                  autoComplete="off"
-                />
-              )}
-              {isLoading && (
-                <div className={css.loaderContainer}>
-                  <CircularLoader size="small" colorToken="colorFillPrimary" />
-                </div>
-              )}
-              {locked && (
-                <Icon
-                  name="lock"
-                  color={disabled ? 'disabled' : 'secondary'}
-                  size="small"
-                  className={css.lockIcon}
-                />
-              )}
-            </div>
-            {!isOpen && (Boolean(helperText) || errorText) && (
-              <div className={css.footerTextContainer}>
-                {error && errorText ? (
-                  <BodySmall color={TEXT_COLORS.danger}>{errorText}</BodySmall>
-                ) : typeof helperText === 'string' ? (
-                  <BodySmall color={TEXT_COLORS.secondary}>
-                    {helperText}
-                  </BodySmall>
-                ) : (
-                  helperText
-                )}
-              </div>
-            )}
-            {!locked && isOpen && menu && (
-              <FloatingPortal>
-                <FloatingFocusManager
-                  modal={false}
-                  context={context}
-                  returnFocus={false}
-                  initialFocus={refs.reference}
-                >
-                  <div
-                    className={css.menuWrapper}
-                    ref={mergeRefs([refs.setFloating, boundaryRef])}
-                    style={{
-                      position: strategy,
-                      top: y ?? spaceNone,
-                      left: x ?? spaceNone,
-                      /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
-                       so its parent is effectively the <body> element. This means the menu
-                       would otherwise default to the body's width. To support fluid width,
-                       we must manually set the dropdown width here; otherwise, it uses a fixed width.
-                       Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */ ...(menu.isFluid !==
-                        false && {
-                        '--dropdown-width': dropdownWidth,
-                      }),
-                      '--menu-elevation': getElevationValue(elevation),
-                    }}
-                  >
-                    {/* $FlowFixMe[incompatible-type] Menu expects MenuOption but receives T */}
-                    {/* $FlowFixMe[prop-missing] MenuOption properties are missing in T */}
-                    <Menu
-                      {...menu}
-                      onSelect={(option) => {
-                        if (values.length >= limit) {
-                          return;
-                        }
-                        // $FlowFixMe[incompatible-call] option from Menu is MenuOption but addValue expects T
-                        // $FlowFixMe[prop-missing] MenuOption properties are missing in T
-                        addValue(option);
-                        clickAway();
-                        inputRef.current?.focus();
-                      }}
-                      size={menu.size || size}
-                      onTabOut={clickAway}
-                      ref={menuRef}
-                    />
-                  </div>
-                </FloatingFocusManager>
-              </FloatingPortal>
-            )}
-          </div>
-        </>
-      )}
-    </ClickAway>
-  );
-}
-
-TokenListInput.displayName = 'TokenListInput';