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

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

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

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

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

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

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

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

@@ -0,0 +1,333 @@
+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 {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 {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
+  errorText?: string;
+  focusOnMount?: boolean;
+  helperText?: string;
+  inputValue?: string;
+  inputPlaceholder?: string;
+  limit?: number;
+  // maximum number of values
+  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,
+    errorText,
+    focusOnMount,
+    helperText,
+    inputValue = '',
+    inputPlaceholder = '',
+    limit = DEFAULT_LIMIT_VALUE,
+    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 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]: errorText,
+                  [css.inputLocked]: locked,
+                },
+                classNames?.box,
+              )}
+              ref={mergeRefs([refs.setReference, triggerRef])}
+            >
+              <TokenValueChips
+                values={values}
+                resolveTokenValue={resolveTokenValue}
+                disabled={disabled}
+                locked={locked}
+                onChange={onChange}
+              />
+              {!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"
+                />
+              )}
+              {locked && (
+                <Icon
+                  name="lock"
+                  color={disabled ? 'disabled' : 'secondary'}
+                  size="small"
+                  className={css.lockIcon}
+                />
+              )}
+            </div>
+            {!isOpen && (Boolean(helperText) || errorText) && (
+              <div className={css.footerTextContainer}>
+                {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';