@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/TokenListInput/TokenListInput.tsx

@@ -1,393 +0,0 @@
-import * as React from 'react';
-import {
-  autoUpdate,
-  flip,
-  FloatingFocusManager,
-  FloatingPortal,
-  offset,
-  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 {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.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?: (arg1: ResolveTokenValueProps<T>) => React.ReactNode;
-  inputProps?: InputProps;
-  elevation?: ElevationType;
-};
-
-export function TokenListInput<T>(props: Props<T>) {
-  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,
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Strategy | undefined'.
-    strategy: STRATEGY_TYPE.absolute,
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
-    placement: ANCHOR_POSITION_TYPE.bottomStart,
-    whileElementsMounted: autoUpdate,
-    middleware: [flip(), offset(parseInt(spaceXXSmall))],
-  });
-
-// @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
-  const inputRef = React.useRef<HTMLInputElement | null | undefined>();
-// @ts-ignore - TS2345 - Argument of type '(ReferenceType & ReferenceType) | null' is not assignable to parameter of type 'HTMLElement | null | undefined'.
-  const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
-
-  const onOpenToggle = (isOpen: boolean) => {
-    if (isOpen) {
-      onMenuOpen?.();
-      inputRef.current?.focus();
-    } else {
-      onMenuClose?.();
-      inputRef.current?.blur();
-    }
-  };
-
-  React.useEffect(() => {
-    if (focusOnMount) {
-      inputRef.current?.focus();
-    }
-  }, [focusOnMount]);
-
-  const addValue = (value: T) => {
-// @ts-ignore - TS2339 - Property 'disabled' does not exist on type 'T'.
-    if (locked || !value || value.disabled) {
-      return; // Prevent adding values when disabled or locked
-    }
-    onInputChange?.('');
-// @ts-ignore - TS2339 - Property 'key' does not exist on type 'T'. | TS2339 - Property 'key' does not exist on type 'T'.
-    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) {
-// @ts-ignore - TS2345 - Argument of type 'T[]' is not assignable to parameter of type 'V[]'.
-          firstOption = getFirstOption(menu.options);
-        } else if (
-          menu?.groupTitleOptions &&
-          menu.groupTitleOptions.length > 0
-        ) {
-// @ts-ignore - TS2345 - Argument of type 'TokenGroupTitleOption<T>[]' is not assignable to parameter of type 'Group<V>[]'.
-          firstOption = getFirstOptionFromGroup(menu.groupTitleOptions);
-        }
-        if (firstOption) {
-// @ts-ignore - TS2345 - Argument of type 'V' is not assignable to parameter of type 'T'.
-          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();
-                }
-// @ts-ignore - TS2345 - Argument of type 'FocusEvent<HTMLDivElement, Element>' is not assignable to parameter of type 'SyntheticEvent<HTMLInputElement, Event>'.
-                onInputFocus?.(e);
-              }}
-              onBlur={(e) => {
-// @ts-ignore - TS2345 - Argument of type 'FocusEvent<HTMLDivElement, Element>' is not assignable to parameter of type 'SyntheticEvent<HTMLInputElement, Event>'.
-                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,
-              )}
-// @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-              ref={mergeRefs([refs.setReference, triggerRef])}
-            >
-{ /* @ts-ignore - TS2786 - 'TokenValueChips' cannot be used as a JSX component. */}
-              <TokenValueChips
-                values={values}
-                resolveTokenValue={resolveTokenValue}
-                disabled={disabled}
-                locked={locked}
-                onDismiss={removeValue}
-              />
-              {!hideInput && (
-                <input
-                  {...(() => {
-                    const { size: _, ...restInputProps } = inputProps || {};
-                    return restInputProps;
-                  })()}
-// @ts-ignore - TS2322 - Type 'RefObject<HTMLInputElement | null | undefined>' is not assignable to type 'Ref<HTMLInputElement> | undefined'.
-                  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}
-// @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
-                  initialFocus={refs.reference}
-                >
-                  <div
-                    className={css.menuWrapper}
-// @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-                    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),
-                    }}
-                  >
-                    {}
-                    {}
-{ /* @ts-ignore - TS2769 - No overload matches this call. */}
-                    <Menu
-                      {...menu}
-                      onSelect={(option) => {
-                        if (values.length >= limit) {
-                          return;
-                        }
-// @ts-ignore - TS2345 - Argument of type 'MenuOption' is not assignable to parameter of type 'T'.
-                        addValue(option);
-                        clickAway();
-                        inputRef.current?.focus();
-                      }}
-                      size={menu.size || size}
-                      onTabOut={clickAway}
-                      ref={menuRef}
-                    />
-                  </div>
-                </FloatingFocusManager>
-              </FloatingPortal>
-            )}
-          </div>
-        </>
-      )}
-    </ClickAway>
-  );
-}
-
-TokenListInput.displayName = 'TokenListInput';

package/lib/components/TokenListInput/TokenValueChips.tsx

@@ -1,69 +0,0 @@
-import * as React from 'react';
-
-import {elevationMenu} from '../../styles/variables/_elevation';
-import {Chip} from '../Chip';
-import {Tooltip} from '../Tooltip';
-
-
-type Props<T> = {
-  values: Array<T>;
-  disabled?: boolean;
-  locked?: boolean;
-  onDismiss: (arg1: T) => unknown;
-  resolveTokenValue?: (arg1: ResolveTokenValueProps<T>) => React.ReactNode;
-};
-
-export type ResolveTokenValueProps<T> = {
-  token: T;
-  disabled?: boolean;
-  onDismiss?: (arg1: T) => unknown;
-  locked?: boolean;
-};
-
-function defaultResolveTokenValue<T>(
-  {
-    token,
-    disabled,
-    onDismiss,
-  }: ResolveTokenValueProps<T>,
-) {
-  return (
-// @ts-ignore - TS2339 - Property 'label' does not exist on type 'NonNullable<T>'.
-    <Tooltip body={token?.label} elevation={elevationMenu}>
-      <Chip
-// @ts-ignore - TS2339 - Property 'key' does not exist on type 'NonNullable<T>'.
-        key={token?.key}
-        onDismiss={(_) => onDismiss?.(token)}
-        dismissable={true}
-        semantic={'primary'}
-        disabled={disabled}
-      >
-        {}
-{ /* @ts-ignore - TS2339 - Property 'label' does not exist on type 'NonNullable<T>'. */}
-        {token?.label}
-      </Chip>
-    </Tooltip>
-  );
-}
-
-export function TokenValueChips<T>(props: Props<T>) {
-  const {
-    values,
-    disabled,
-    locked,
-    onDismiss,
-    resolveTokenValue = defaultResolveTokenValue,
-  } = props;
-
-  return values.map((token) => {
-    const resolvedTokenValue = resolveTokenValue({
-      token,
-      onDismiss,
-      disabled,
-      locked,
-    });
-    return resolvedTokenValue;
-  });
-}
-
-TokenValueChips.displayName = 'TokenValueChips';

package/lib/components/TokenListInput/index.ts

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