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

package/lib/components/Toast/ToastContainer.d.ts

@@ -1,140 +0,0 @@
-import React, {useEffect, useReducer, useRef} from 'react';
-// @ts-expect-error[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.d.ts

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

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

@@ -1,111 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-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.ReactNode;
-  checked?: boolean;
-  onChange?: (arg0: {value: string; checked: boolean}) => unknown;
-  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.ReactNode => {
-      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>
-      );
-    },
-  );

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

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

package/lib/components/TokenListInput/TokenListInput.d.ts

@@ -1,351 +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]
-  useFloating,
-} from '@floating-ui/react';
-import without from 'lodash/without';
-import {sizeFluid} from '../../styles/variables/_size';
-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 {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.ReactNode;
-  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>) => unknown;
-  // an onChange handler
-  onInputBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
-  onInputChange?: (value: string) => unknown;
-  onInputFocus?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
-  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?: () => unknown;
-  onMenuClose?: () => unknown;
-  resolveTokenValue?: (arg0: ResolveTokenValueProps<T>) => React.ReactNode;
-  inputProps?: InputProps;
-};
-export function TokenListInput<T>(props: Props<T>): React.ReactNode {
-  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,
-  } = props;
-  const menuRef = React.useRef<HTMLDivElement | null>(null);
-  const {x, y, refs, strategy} = useFloating({
-    open: true,
-    strategy: STRATEGY_TYPE.absolute,
-    placement: ANCHOR_POSITION_TYPE.bottomStart,
-    whileElementsMounted: autoUpdate,
-    middleware: [flip(), offset(parseInt(spaceXXSmall))],
-  });
-  const inputRef = React.useRef<HTMLInputElement | null | undefined>();
-
-  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: React.KeyboardEvent<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
-            className={classify(css.tokenListContainer, classNames?.wrapper)}
-            ref={menuRef}
-          >
-            <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 && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  width: sizeFluid,
-                }}
-              >
-                {/* $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>
-            )}
-          </div>
-        </>
-      )}
-    </ClickAway>
-  );
-}
-TokenListInput.displayName = 'TokenListInput';