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

package/lib/components/TokenListInput/TokenListInput.js

@@ -68,17 +68,12 @@ function TokenListInput(props) {
     context
   } = (0, _react2.useFloating)({
     open: true,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Strategy | undefined'.
     strategy: _ButtonDropdown.STRATEGY_TYPE.absolute,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'Placement | undefined'.
     placement: _ButtonDropdown.ANCHOR_POSITION_TYPE.bottomStart,
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
-
-  // @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
   const inputRef = React.useRef();
-  // @ts-ignore - TS2345 - Argument of type '(ReferenceType & ReferenceType) | null' is not assignable to parameter of type 'HTMLElement | null | undefined'.
   const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onOpenToggle = isOpen => {
     if (isOpen) {
@@ -95,12 +90,11 @@ function TokenListInput(props) {
     }
   }, [focusOnMount]);
   const addValue = value => {
-    // @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'.
+    // $FlowFixMe[incompatible-use] - token has key property
     const existingToken = values.find(token => token.key === value.key);
     if (!existingToken) {
       onChange([...values, value]);
@@ -127,14 +121,14 @@ function TokenListInput(props) {
         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[]'.
+          //$FlowFixMe
           firstOption = (0, _tokenListInput.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>[]'.
+          //$FlowFixMe
           firstOption = (0, _tokenListInput.getFirstOptionFromGroup)(menu.groupTitleOptions);
         }
         if (firstOption) {
-          // @ts-ignore - TS2345 - Argument of type 'V' is not assignable to parameter of type 'T'.
+          //$FlowFixMe
           addValue(firstOption);
         }
       }
@@ -181,11 +175,9 @@ function TokenListInput(props) {
         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: (0, _classify.default)(_TokenListInputModule.default.box, {
@@ -194,9 +186,7 @@ function TokenListInput(props) {
         [_TokenListInputModule.default.small]: size === 'small',
         [_TokenListInputModule.default.withError]: error,
         [_TokenListInputModule.default.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; }'.
-      ,
+      }, classNames?.box),
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef])
     }, /*#__PURE__*/React.createElement(_TokenValueChips.TokenValueChips, {
       values: values,
@@ -204,11 +194,7 @@ function TokenListInput(props) {
       disabled: disabled,
       locked: locked,
       onDismiss: removeValue
-    }), !hideInput &&
-    /*#__PURE__*/
-    // @ts-ignore - TS2345 - Argument of type 'InputProps' is not assignable to parameter of type 'InputProps'.
-    React.createElement("input", _extends({}, inputProps, {
-      // @ts-ignore - TS2322 - Type 'RefObject<HTMLInputElement | null | undefined>' is not assignable to type 'Ref<HTMLInputElement> | undefined'.
+    }), !hideInput && /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
       ref: inputRef,
       type: "text",
       readOnly: locked,
@@ -246,14 +232,10 @@ function TokenListInput(props) {
     }, helperText) : helperText), !locked && isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.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'.
-      ,
+      returnFocus: false,
       initialFocus: refs.reference
     }, /*#__PURE__*/React.createElement("div", {
-      className: _TokenListInputModule.default.menuWrapper
-      // @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-      ,
+      className: _TokenListInputModule.default.menuWrapper,
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         position: strategy,
@@ -274,7 +256,8 @@ function TokenListInput(props) {
         if (values.length >= limit) {
           return;
         }
-        // @ts-ignore - TS2345 - Argument of type 'MenuOption' is not assignable to parameter of type 'T'.
+        // $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();

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

@@ -0,0 +1,389 @@
+// @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';

package/lib/components/TokenListInput/TokenValueChips.js

@@ -15,14 +15,16 @@ function defaultResolveTokenValue(_ref) {
     disabled,
     onDismiss
   } = _ref;
+  // $FlowFixMe[prop-missing] - assumes token has label and key
+
   return (
     /*#__PURE__*/
-    // @ts-ignore - TS2339 - Property 'label' does not exist on type 'NonNullable<T>'.
+    // $FlowFixMe - assumes token has label and key
     React.createElement(_Tooltip.Tooltip, {
       body: token?.label,
       elevation: _elevation.elevationMenu
     }, /*#__PURE__*/React.createElement(_Chip.Chip
-    // @ts-ignore - TS2339 - Property 'key' does not exist on type 'NonNullable<T>'.
+    // $FlowFixMe - assumes token has key
     , {
       key: token?.key,
       onDismiss: _ => onDismiss?.(token),

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

@@ -0,0 +1,69 @@
+// @flow strict
+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: (T) => mixed,
+  resolveTokenValue?: (ResolveTokenValueProps<T>) => React.Node,
+};
+
+export type ResolveTokenValueProps<T> = {
+  token: T,
+  disabled?: boolean,
+  onDismiss?: (T) => mixed,
+  locked?: boolean,
+};
+
+function defaultResolveTokenValue<T>({
+  token,
+  disabled,
+  onDismiss,
+}: ResolveTokenValueProps<T>): React.Node {
+  // $FlowFixMe[prop-missing] - assumes token has label and key
+
+  return (
+    // $FlowFixMe - assumes token has label and key
+    <Tooltip body={token?.label} elevation={elevationMenu}>
+      <Chip
+        // $FlowFixMe - assumes token has key
+        key={token?.key}
+        onDismiss={(_) => onDismiss?.(token)}
+        dismissable={true}
+        semantic={'primary'}
+        disabled={disabled}
+      >
+        {/* $FlowFixMe - assumes token has label */}
+        {token?.label}
+      </Chip>
+    </Tooltip>
+  );
+}
+
+export function TokenValueChips<T>(props: Props<T>): React.Node {
+  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.js.flow

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

package/lib/components/Tooltip/Tooltip.js

@@ -16,6 +16,8 @@ var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* eslint-disable ft-flow/no-weak-types */
+
 const DELAY_MOTION_DURATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = Object.freeze({
   none: 'none',
   fast: 'fast',
@@ -35,7 +37,6 @@ const ELEVATION_TYPES = exports.ELEVATION_TYPES = Object.freeze({
 });
 const getElevationValue = elevation => {
   const elevationKey = 'elevation' + (0, _string.capitalize)(elevation);
-  // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_elevation")'.
   return ELEVATION[elevationKey] || elevation;
 };
 exports.getElevationValue = getElevationValue;
@@ -69,11 +70,7 @@ const Tooltip = _ref => {
     }), (0, _react2.shift)()]
   });
   const motionDurationToken = 'motionDuration' + (0, _string.capitalize)(delayMotionDuration);
-  const hoverDelay =
-  // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_motion")'.
-  parseInt(MOTION[motionDurationToken]) === NaN ? 0
-  // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_motion")'.
-  : parseInt(MOTION[motionDurationToken]);
+  const hoverDelay = parseInt(MOTION[motionDurationToken]) === NaN ? 0 : parseInt(MOTION[motionDurationToken]);
   const {
     getReferenceProps,
     getFloatingProps