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

package/.cspell/custom-words.txt

@@ -66,6 +66,7 @@ Manaus
 Minh
 Moresby
 msword
+multiarbitrary
 Neue
 Nishant
 nofollow

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.38-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.37...v0.3.38-beta.0) (2025-05-09)
+
+
+### Features
+
+* **token-list-input:** [GDS-508] token list input and hooks to support it ([#338](https://github.com/spaced-out/ui-design-system/issues/338)) ([4177a80](https://github.com/spaced-out/ui-design-system/commit/4177a806cfe44ab777ba16da661e092fa1a0c345))
+
 ### [0.3.37](https://github.com/spaced-out/ui-design-system/compare/v0.3.36...v0.3.37) (2025-04-28)
 
 

package/lib/components/Chip/Chip.js

@@ -115,4 +115,5 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }));
 });
-exports.Chip = Chip;
+exports.Chip = Chip;
+Chip.displayName = 'Chip';

package/lib/components/Chip/Chip.js.flow

@@ -178,3 +178,5 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
       );
     },
   );
+
+Chip.displayName = 'Chip';

package/lib/components/TokenListInput/TokenListInput.js

@@ -0,0 +1,237 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_LIMIT_VALUE = void 0;
+exports.TokenListInput = TokenListInput;
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@floating-ui/react");
+var _size = require("../../styles/variables/_size");
+var _space = require("../../styles/variables/_space");
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _clickAway = require("../../utils/click-away");
+var _mergeRefs = require("../../utils/merge-refs");
+var _tokenListInput = require("../../utils/token-list-input/token-list-input");
+var _ButtonDropdown = require("../ButtonDropdown");
+var _Icon = require("../Icon");
+var _Menu = require("../Menu");
+var _Text = require("../Text");
+var _TokenValueChips = require("./TokenValueChips");
+var _TokenListInputModule = _interopRequireDefault(require("./TokenListInput.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const DEFAULT_LIMIT_VALUE = 100;
+exports.DEFAULT_LIMIT_VALUE = DEFAULT_LIMIT_VALUE;
+function TokenListInput(props) {
+  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(null);
+  const {
+    x,
+    y,
+    refs,
+    strategy
+  } = (0, _react2.useFloating)({
+    open: true,
+    strategy: _ButtonDropdown.STRATEGY_TYPE.absolute,
+    placement: _ButtonDropdown.ANCHOR_POSITION_TYPE.bottomStart,
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
+  });
+  const inputRef = React.useRef();
+  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 => {
+    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 => {
+    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 = (0, _tokenListInput.getFirstOption)(menu.options);
+        } else if (menu?.groupTitleOptions && menu.groupTitleOptions.length > 0) {
+          //$FlowFixMe
+          firstOption = (0, _tokenListInput.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 /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
+    closeOnEscapeKeypress: true,
+    onChange: onOpenToggle,
+    clickAwayRef: clickAwayRef
+  }, _ref => {
+    let {
+      isOpen,
+      onOpen,
+      clickAway,
+      boundaryRef,
+      triggerRef
+    } = _ref;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: (0, _classify.default)(_TokenListInputModule.default.tokenListContainer, classNames?.wrapper),
+      ref: menuRef
+    }, /*#__PURE__*/React.createElement("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: (0, _classify.default)(_TokenListInputModule.default.box, {
+        [_TokenListInputModule.default.inputDisabled]: disabled,
+        [_TokenListInputModule.default.medium]: size === 'medium',
+        [_TokenListInputModule.default.small]: size === 'small',
+        [_TokenListInputModule.default.withError]: errorText,
+        [_TokenListInputModule.default.inputLocked]: locked
+      }, classNames?.box),
+      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef])
+    }, /*#__PURE__*/React.createElement(_TokenValueChips.TokenValueChips, {
+      values: values,
+      resolveTokenValue: resolveTokenValue,
+      disabled: disabled,
+      locked: locked,
+      onChange: onChange
+    }), !hideInput && /*#__PURE__*/React.createElement("input", _extends({}, 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: (0, _classify.default)({
+        [_TokenListInputModule.default.inputMedium]: size === 'medium',
+        [_TokenListInputModule.default.inputSmall]: size === 'small'
+      }, classNames?.input),
+      autoComplete: "off"
+    })), locked && /*#__PURE__*/React.createElement(_Icon.Icon, {
+      name: "lock",
+      color: disabled ? 'disabled' : 'secondary',
+      size: "small",
+      className: _TokenListInputModule.default.lockIcon
+    })), !isOpen && (Boolean(helperText) || errorText) && /*#__PURE__*/React.createElement("div", {
+      className: _TokenListInputModule.default.footerTextContainer
+    }, errorText ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
+      color: _typography.TEXT_COLORS.danger
+    }, errorText) : typeof helperText === 'string' ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
+      color: _typography.TEXT_COLORS.secondary
+    }, helperText) : helperText), !locked && isOpen && menu && /*#__PURE__*/React.createElement("div", {
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+      style: {
+        position: strategy,
+        top: y ?? _space.spaceNone,
+        left: x ?? _space.spaceNone,
+        width: _size.sizeFluid
+      }
+    }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, 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
+    })))));
+  });
+}
+TokenListInput.displayName = 'TokenListInput';

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

@@ -0,0 +1,344 @@
+// @flow strict
+
+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.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
+  errorText?: string,
+  focusOnMount?: boolean,
+  helperText?: string,
+  inputValue?: string,
+  inputPlaceholder?: string,
+  limit?: number, // maximum number of values
+  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,
+};
+
+export function TokenListInput<T>(props: Props<T>): React.Node {
+  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>();
+
+  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: 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
+            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';