@pega/cosmos-react-core 10.0.0-build.4.16 → 10.0.0-build.4.18

package/lib/components/Badges/Selection.js

@@ -107,7 +107,7 @@ const Selectable = forwardRef(function Selectable({ testId, id, children, contex
             // Prevents back navigation in Firefox.
             if (e.key === 'Backspace')
                 e.preventDefault();
-        }, tabIndex: tabIndex, ...restProps, children: [_jsx("span", { "aria-hidden": shouldAriaHideChildren ? true : undefined, children: children }), onRemove && (_jsx(BareButton, { "data-testid": testIds.remove, tabIndex: tabIndex === -1 ? -1 : undefined, onClick: handleCloseClick, "aria-label": t('remove_noun', [resolvedChildrenText]), children: _jsx(Icon, { name: 'times' }) }))] }));
+        }, tabIndex: tabIndex, ...restProps, children: [_jsx("span", { "aria-hidden": shouldAriaHideChildren ? true : undefined, children: children }), onRemove && (_jsx(BareButton, { "data-testid": testIds.remove, tabIndex: -1, onClick: handleCloseClick, "aria-label": t('remove_noun', [resolvedChildrenText]), children: _jsx(Icon, { name: 'times' }) }))] }));
 });
 export default withTestIds(Selectable, getSelectableTestIds);
 //# sourceMappingURL=Selection.js.map

package/lib/components/Badges/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, isValidElement } from 'react';\nimport type { MouseEvent, PropsWithoutRef, KeyboardEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport type { Attributes, ForwardProps, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { readableHue } from '../../styles';\n\nimport { getSelectableTestIds } from './Badges.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps extends TestIdProp, Pick<Attributes<'div'>, 'tabIndex'> {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** The content of the Badge. */\n  children: ReactNode;\n  /** Label text used for the remove button's aria-label when children is JSX. */\n  contextualLabel?: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.span<{ $hasRichContent?: boolean }>(\n  ({\n    $hasRichContent,\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius }\n    }\n  }) => {\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = $hasRichContent\n      ? tryCatch(() => transparentize(0.9, interactive))\n      : tryCatch(() => mix(0.15, interactive, primaryBackground));\n\n    const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));\n    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n    const closeButtonColor = $hasRichContent\n      ? tryCatch(() => readableColor(primaryBackground))\n      : 'inherit';\n\n    const height = 1.125;\n    return css`\n      background-color: ${displayBackground};\n      border: 0 solid transparent;\n      border-radius: calc(${height} * ${borderRadius});\n      color: ${tryCatch(() => readableColor(displayBackground!))};\n      cursor: default;\n      display: inline-flex;\n      font-size: 0.75rem;\n      height: ${height}rem;\n      padding: 0 ${spacing};\n      max-width: 100%;\n      line-height: 1;\n\n      span {\n        display: flex;\n        align-items: center;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      ${$hasRichContent &&\n      css`\n        ${StyledBareButton} {\n          color: ${closeButtonColor};\n        }\n      `}\n\n      &:hover,\n      &:focus-within,\n      [data-active-scope='true'] &[data-current='true'] {\n        color: ${tryCatch(() => readableHue(interactive, displayBackground!))};\n\n        ${StyledBareButton} {\n          color: ${closeButtonColor};\n        }\n      }\n\n      &:hover {\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${interactive};\n      }\n\n      &:focus-within,\n      [data-active-scope='true'] &[data-current='true'] {\n        box-shadow:\n          0 0 0.5rem -0.125rem ${boxShadowColor},\n          inset 0 0 0 0.125rem ${interactive};\n        outline: none;\n      }\n\n      ${StyledIcon} {\n        margin-inline-start: ${spacing};\n        height: 1em;\n        width: 1em;\n      }\n    `;\n  }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable = forwardRef<HTMLElement, PropsWithoutRef<SelectableProps> & ForwardProps>(\n  function Selectable(\n    { testId, id, children, contextualLabel, onRemove, onKeyUp, tabIndex, ...restProps },\n    ref\n  ) {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const t = useI18n();\n    const testIds = useTestIds(testId, getSelectableTestIds);\n\n    const handleCloseClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onRemove?.(id);\n    };\n\n    const handleKeyUp = (e: KeyboardEvent) => {\n      onKeyUp?.(e);\n\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        onRemove?.(id);\n      }\n    };\n    const childrenIsJSX = isValidElement(children);\n    const childrenIsPrimitive = typeof children === 'string' || typeof children === 'number';\n    const shouldAriaHideChildren = onRemove && !childrenIsJSX;\n    const resolvedChildrenText = contextualLabel || (childrenIsPrimitive ? String(children) : '');\n\n    return (\n      <StyledSelectable\n        data-testid={testIds.root}\n        $hasRichContent={childrenIsJSX}\n        ref={consolidatedRef}\n        onKeyUp={handleKeyUp}\n        onKeyDown={e => {\n          // Prevents back navigation in Firefox.\n          if (e.key === 'Backspace') e.preventDefault();\n        }}\n        tabIndex={tabIndex}\n        {...restProps}\n      >\n        <span aria-hidden={shouldAriaHideChildren ? true : undefined}>{children}</span>\n        {onRemove && (\n          <BareButton\n            data-testid={testIds.remove}\n            tabIndex={tabIndex === -1 ? -1 : undefined}\n            onClick={handleCloseClick}\n            aria-label={t('remove_noun', [resolvedChildrenText])}\n          >\n            <Icon name='times' />\n          </BareButton>\n        )}\n      </StyledSelectable>\n    );\n  }\n);\n\nexport default withTestIds(Selectable, getSelectableTestIds);\n"]}
+{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, isValidElement } from 'react';\nimport type { MouseEvent, PropsWithoutRef, KeyboardEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport type { Attributes, ForwardProps, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { readableHue } from '../../styles';\n\nimport { getSelectableTestIds } from './Badges.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps extends TestIdProp, Pick<Attributes<'div'>, 'tabIndex'> {\n  /** An id that is used by the onSelect and onRemove functions if they are provided. */\n  id: string;\n  /** The content of the Badge. */\n  children: ReactNode;\n  /** Label text used for the remove button's aria-label when children is JSX. */\n  contextualLabel?: string;\n  /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n  onRemove?: (id: string) => void;\n  /** Event handler fired on every keyup event. */\n  onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.span<{ $hasRichContent?: boolean }>(\n  ({\n    $hasRichContent,\n    theme: {\n      base: { spacing, palette, 'border-radius': borderRadius }\n    }\n  }) => {\n    const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n    const displayBackground = $hasRichContent\n      ? tryCatch(() => transparentize(0.9, interactive))\n      : tryCatch(() => mix(0.15, interactive, primaryBackground));\n\n    const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));\n    const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n    const closeButtonColor = $hasRichContent\n      ? tryCatch(() => readableColor(primaryBackground))\n      : 'inherit';\n\n    const height = 1.125;\n    return css`\n      background-color: ${displayBackground};\n      border: 0 solid transparent;\n      border-radius: calc(${height} * ${borderRadius});\n      color: ${tryCatch(() => readableColor(displayBackground!))};\n      cursor: default;\n      display: inline-flex;\n      font-size: 0.75rem;\n      height: ${height}rem;\n      padding: 0 ${spacing};\n      max-width: 100%;\n      line-height: 1;\n\n      span {\n        display: flex;\n        align-items: center;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      ${$hasRichContent &&\n      css`\n        ${StyledBareButton} {\n          color: ${closeButtonColor};\n        }\n      `}\n\n      &:hover,\n      &:focus-within,\n      [data-active-scope='true'] &[data-current='true'] {\n        color: ${tryCatch(() => readableHue(interactive, displayBackground!))};\n\n        ${StyledBareButton} {\n          color: ${closeButtonColor};\n        }\n      }\n\n      &:hover {\n        box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n      }\n\n      &:active {\n        box-shadow: inset 0 0 0 0.0625rem ${interactive};\n      }\n\n      &:focus-within,\n      [data-active-scope='true'] &[data-current='true'] {\n        box-shadow:\n          0 0 0.5rem -0.125rem ${boxShadowColor},\n          inset 0 0 0 0.125rem ${interactive};\n        outline: none;\n      }\n\n      ${StyledIcon} {\n        margin-inline-start: ${spacing};\n        height: 1em;\n        width: 1em;\n      }\n    `;\n  }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable = forwardRef<HTMLElement, PropsWithoutRef<SelectableProps> & ForwardProps>(\n  function Selectable(\n    { testId, id, children, contextualLabel, onRemove, onKeyUp, tabIndex, ...restProps },\n    ref\n  ) {\n    const consolidatedRef = useConsolidatedRef(ref);\n    const t = useI18n();\n    const testIds = useTestIds(testId, getSelectableTestIds);\n\n    const handleCloseClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onRemove?.(id);\n    };\n\n    const handleKeyUp = (e: KeyboardEvent) => {\n      onKeyUp?.(e);\n\n      if (e.key === 'Backspace' || e.key === 'Delete') {\n        onRemove?.(id);\n      }\n    };\n    const childrenIsJSX = isValidElement(children);\n    const childrenIsPrimitive = typeof children === 'string' || typeof children === 'number';\n    const shouldAriaHideChildren = onRemove && !childrenIsJSX;\n    const resolvedChildrenText = contextualLabel || (childrenIsPrimitive ? String(children) : '');\n\n    return (\n      <StyledSelectable\n        data-testid={testIds.root}\n        $hasRichContent={childrenIsJSX}\n        ref={consolidatedRef}\n        onKeyUp={handleKeyUp}\n        onKeyDown={e => {\n          // Prevents back navigation in Firefox.\n          if (e.key === 'Backspace') e.preventDefault();\n        }}\n        tabIndex={tabIndex}\n        {...restProps}\n      >\n        <span aria-hidden={shouldAriaHideChildren ? true : undefined}>{children}</span>\n        {onRemove && (\n          <BareButton\n            data-testid={testIds.remove}\n            tabIndex={-1}\n            onClick={handleCloseClick}\n            aria-label={t('remove_noun', [resolvedChildrenText])}\n          >\n            <Icon name='times' />\n          </BareButton>\n        )}\n      </StyledSelectable>\n    );\n  }\n);\n\nexport default withTestIds(Selectable, getSelectableTestIds);\n"]}

package/lib/components/ComboBox/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;;;;AAQlD,wBAuXE"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;;;;AAQlD,wBAkXE"}

package/lib/components/ComboBox/ComboBox.js

@@ -8,7 +8,7 @@ import Popover from '../Popover';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import Menu from '../Menu';
-import { navigatorIsAvailable, withTestIds, getFocusables, createClassName } from '../../utils';
+import { navigatorIsAvailable, withTestIds, getFocusables, createClassName, getActiveElement } from '../../utils';
 import menuHelpers from '../Menu/helpers';
 import { fitToContent } from '../Popover/modifiers';
 import VisuallyHiddenText from '../VisuallyHiddenText';
@@ -23,7 +23,6 @@ export default withTestIds(forwardRef(function ComboBox(props, ref) {
     const testIds = useTestIds(testId, getComboBoxTestIds);
     const bodyRef = useRef(document.body);
     const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);
-    const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] = useState(false);
     const t = useI18n();
     const listId = `${id}-list`;
     const inputRef = useRef(null);
@@ -37,10 +36,8 @@ export default withTestIds(forwardRef(function ComboBox(props, ref) {
     const containerRef = useConsolidatedRef(ref, setContainerEl);
     const toggleMenuDescendantsActive = useCallback((bool) => {
         setPauseMenuDescendantEvaluation(!bool);
-        setPauseSelectedDescendantEvaluation(bool);
     }, []);
     const toggleSelectedDescendantsActive = useCallback((bool) => {
-        setPauseSelectedDescendantEvaluation(!bool);
         setPauseMenuDescendantEvaluation(bool);
     }, []);
     const focus = useFocusWithin([containerRef, popoverRef], focused => {
@@ -143,7 +140,7 @@ export default withTestIds(forwardRef(function ComboBox(props, ref) {
         onClick?.(e);
     }, [readOnly, onClick]);
     useEffect(() => {
-        if (focus && menu && value && value.length > 0) {
+        if (focus && menu && value && value.length > 0 && getActiveElement() === inputRef.current) {
             setOpen(true);
             toggleMenuDescendantsActive(true);
         }
@@ -155,7 +152,7 @@ export default withTestIds(forwardRef(function ComboBox(props, ref) {
     // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.
     // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.
     const inputActions = (_jsxs(_Fragment, { children: [dropdownButton, actions] }));
-    const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, "data-testid": label ? undefined : testIds.root, children: [_jsx(ComboBoxInput, { "data-testid": testIds.control, ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": !readOnly && !disabled && open, "aria-controls": open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined, "aria-haspopup": 'listbox', "aria-describedby": ariaDescribedBy, className: createClassName('combo-box', className, { mode }), selected: selected?.items, loading: selected?.loading, spellCheck: false, id: id, readOnly: readOnly, disabled: disabled, onChange: onChange, value: value, mode: mode, status: status, suggestion: suggestion, actions: inputActions, visual: visual, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, onSelectedFocus: () => {
+    const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, "data-testid": label ? undefined : testIds.root, children: [_jsx(ComboBoxInput, { "data-testid": testIds.control, ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": !readOnly && !disabled && open, "aria-controls": open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined, "aria-haspopup": 'listbox', "aria-describedby": ariaDescribedBy, className: createClassName('combo-box', className, { mode }), selected: selected?.items, loading: selected?.loading, spellCheck: false, id: id, readOnly: readOnly, disabled: disabled, onChange: onChange, value: value, mode: mode, status: status, suggestion: suggestion, actions: inputActions, visual: visual, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, onSelectedFocus: () => {
                     toggleSelectedDescendantsActive(true);
                 }, onSelectedBlur: () => {
                     toggleSelectedDescendantsActive(false);

package/lib/components/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport type {\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  MutableRefObject,\n  MouseEvent\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useUID,\n  useElement,\n  useDirection,\n  useTestIds,\n  useEscape\n} from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu';\nimport { navigatorIsAvailable, withTestIds, getFocusables, createClassName } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { fitToContent } from '../Popover/modifiers';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport type ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox, StyledDropdownButton } from './ComboBox.styles';\nimport { getComboBoxTestIds } from './ComboxBox.test-ids';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nexport default withTestIds(\n  forwardRef<RefElement<ComboBoxProps>, PropsWithoutRef<ComboBoxProps>>(\n    function ComboBox(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        additionalInfo,\n        value,\n        required,\n        id = uid,\n        label,\n        labelHidden,\n        info,\n        status,\n        readOnly,\n        disabled,\n        mode = 'single-select',\n        selected,\n        onChange,\n        actions,\n        onFocus,\n        onBlur,\n        suggestion,\n        onDropdownButtonClick: onDropdownButtonClickProp,\n        onMenuOpen,\n        onClick,\n        onKeyDown,\n        menu,\n        visual,\n        className,\n        handle,\n        ...restProps\n      } = props;\n\n      const testIds = useTestIds(testId, getComboBoxTestIds);\n      const bodyRef = useRef<Element>(document.body);\n\n      const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);\n      const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] =\n        useState(false);\n      const t = useI18n();\n      const listId = `${id}-list`;\n      const inputRef = useRef<HTMLInputElement>(null);\n      const popoverRef = useRef<HTMLDivElement>(null);\n      const [open, setOpen] = useState(false);\n      const menuRef: MenuProps['ref'] = useRef(null);\n      const menuComponentId = `${id}-listbox`;\n      const { start } = useDirection();\n\n      // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n      const [, setContainerEl] = useElement();\n      const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n      const toggleMenuDescendantsActive = useCallback((bool: boolean) => {\n        setPauseMenuDescendantEvaluation(!bool);\n        setPauseSelectedDescendantEvaluation(bool);\n      }, []);\n\n      const toggleSelectedDescendantsActive = useCallback((bool: boolean) => {\n        setPauseSelectedDescendantEvaluation(!bool);\n        setPauseMenuDescendantEvaluation(bool);\n      }, []);\n\n      const focus = useFocusWithin([containerRef, popoverRef], focused => {\n        if (!focused) {\n          setOpen(false);\n          toggleMenuDescendantsActive(false);\n          onBlur?.(selected?.items);\n        } else {\n          onFocus?.(selected?.items);\n          if (isMobile) {\n            setTimeout(() => {\n              containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            }, 150); // delay it to let keyboard expand first\n          }\n        }\n      });\n\n      const handleEscape = useCallback(\n        (e: KeyboardEvent) => {\n          e.preventDefault();\n          if (open) {\n            e.stopPropagation();\n            setOpen(false);\n            toggleMenuDescendantsActive(false);\n          }\n        },\n        [open]\n      );\n\n      useEscape(handleEscape, containerRef, [handleEscape]);\n\n      useImperativeHandle(handle, () => ({\n        focusInput: () => {\n          inputRef.current?.focus();\n        }\n      }));\n\n      const onInputKeyDown = useCallback(\n        (e: ReactKeyboardEvent<HTMLInputElement>) => {\n          if (!menu || readOnly) return;\n          if (onKeyDown?.(e) === false) {\n            return;\n          }\n\n          switch (e.key) {\n            case 'ArrowUp':\n              if (e.altKey) {\n                e.preventDefault();\n                if (open) {\n                  setOpen(false);\n                  toggleMenuDescendantsActive(false);\n                }\n              }\n              break;\n            case 'ArrowDown':\n              e.preventDefault();\n              if (!open) {\n                setOpen(true);\n                toggleMenuDescendantsActive(true);\n              }\n              break;\n            case 'Tab': {\n              const forward = !e.shiftKey;\n\n              if (forward) {\n                const popoverFocusables = getFocusables(popoverRef);\n\n                if (popoverFocusables.length) {\n                  e.preventDefault();\n                  popoverFocusables[0].focus();\n                  break;\n                }\n              }\n\n              setOpen(false);\n              toggleMenuDescendantsActive(false);\n\n              break;\n            }\n            default:\n          }\n        },\n        [open, readOnly, menu, value, onKeyDown]\n      );\n\n      const onDropdownButtonClick = useCallback(() => {\n        onDropdownButtonClickProp?.(!open);\n        setOpen(!open);\n      }, [open, onDropdownButtonClickProp]);\n\n      const dropdownButton = useMemo(() => {\n        return (menu?.items || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n          <StyledDropdownButton\n            aria-label={t(\n              open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n            )}\n            icon\n            variant='simple'\n            onClick={onDropdownButtonClick}\n            onMouseDown={(e: MouseEvent) => {\n              e.preventDefault();\n              inputRef.current?.focus();\n            }}\n            disabled={disabled}\n            tabIndex='-1'\n          >\n            <Icon name={open ? 'caret-up' : 'caret-down'} />\n          </StyledDropdownButton>\n        ) : null;\n      }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n      const ariaDescribedBy = useMemo(() => {\n        let idString = `${id}-inputDescription`;\n\n        if (info) {\n          idString = idString.concat(` ${id}-info`);\n        }\n        if (onChange) {\n          idString = idString.concat(` ${id}-searchDescription`);\n        }\n        if (mode === 'multi-select') {\n          idString = idString.concat(` ${id}-multiselectDescription`);\n        }\n\n        return idString;\n      }, [info, id, mode, onChange]);\n\n      const onInputClick = useCallback(\n        (e: MouseEvent<HTMLInputElement>) => {\n          if (readOnly) return;\n          setOpen(true);\n          toggleMenuDescendantsActive(true);\n          onClick?.(e);\n        },\n        [readOnly, onClick]\n      );\n\n      useEffect(() => {\n        if (focus && menu && value && value.length > 0) {\n          setOpen(true);\n          toggleMenuDescendantsActive(true);\n        }\n      }, [menu, value, focus]);\n\n      useEffect(() => {\n        if (open) onMenuOpen?.();\n      }, [open]);\n\n      // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n      // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n      const inputActions = (\n        <>\n          {dropdownButton}\n          {actions}\n        </>\n      );\n\n      const Comp = (\n        <StyledComboBox\n          ref={containerRef}\n          as={StyledFormControl}\n          id={`${id}-combobox`}\n          data-testid={label ? undefined : testIds.root}\n        >\n          <ComboBoxInput\n            data-testid={testIds.control}\n            ref={inputRef}\n            role='combobox'\n            aria-autocomplete='list'\n            aria-expanded={!readOnly && !disabled && open}\n            aria-controls={\n              open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n            }\n            aria-haspopup='listbox'\n            aria-describedby={ariaDescribedBy}\n            className={createClassName('combo-box', className, { mode })}\n            selected={selected?.items}\n            loading={selected?.loading}\n            spellCheck={false}\n            id={id}\n            readOnly={readOnly}\n            disabled={disabled}\n            onChange={onChange}\n            value={value}\n            mode={mode}\n            status={status}\n            suggestion={suggestion}\n            actions={inputActions}\n            visual={visual}\n            onRemove={selected?.onRemove}\n            onClick={onInputClick}\n            onKeyDown={onInputKeyDown}\n            required={required}\n            pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n            onSelectedFocus={() => {\n              toggleSelectedDescendantsActive(true);\n            }}\n            onSelectedBlur={() => {\n              toggleSelectedDescendantsActive(false);\n            }}\n            {...restProps}\n          />\n\n          <Popover\n            hideOnTargetHidden\n            ref={popoverRef}\n            show={open && menu !== undefined}\n            target={containerRef.current}\n            placement='bottom-start'\n            modifiers={[fitToContent]}\n            // FIXME: Removed absolute strategy for mobile to avoid overflow issues.\n            strategy='fixed'\n            onMouseDown={(e: MouseEvent) => e.preventDefault()}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!inputRef.current) return;\n\n              if (e.key === 'Tab') {\n                const popoverFocusables = getFocusables(popoverRef);\n                const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n                const forward = !e.shiftKey;\n                const isLast = currentIndex === popoverFocusables.length - 1;\n\n                if (forward && isLast) {\n                  e.preventDefault();\n                  const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n                  const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n                  allFocusable[nextIndex]?.focus();\n                  setOpen(false);\n                  toggleMenuDescendantsActive(false);\n                } else if (!forward && currentIndex === 0) {\n                  e.preventDefault();\n                  inputRef.current.focus();\n                }\n              }\n              if (e.key === 'Escape') {\n                handleEscape(e);\n                inputRef.current.focus();\n              }\n            }}\n          >\n            {menu && (\n              <Menu\n                ref={menuRef}\n                listId={listId}\n                id={menuComponentId}\n                role='listbox'\n                mode={mode}\n                {...menu}\n                items={menu.items}\n                focusControlEl={inputRef.current || undefined}\n                onItemClick={(itemId, e) => {\n                  if (mode === 'single-select') {\n                    setOpen(false);\n                    toggleMenuDescendantsActive(true);\n                  }\n                  menu.onItemClick?.(itemId, e);\n\n                  const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n                  if (clickedItem?.primary && !clickedItem?.selected) {\n                    selected?.onNew?.(clickedItem?.primary);\n                  }\n                }}\n                aria-label={t('menu_option_list')}\n                pauseDescendantEvaluation={pauseMenuDescendantEvaluation}\n                arrowNavigationUnsupported\n                cycle={false}\n              />\n            )}\n          </Popover>\n        </StyledComboBox>\n      );\n\n      return (\n        <>\n          {label ? (\n            <FormField\n              testId={testIds}\n              label={label}\n              labelHidden={labelHidden}\n              id={id}\n              info={info}\n              readOnly={readOnly}\n              status={status}\n              required={required}\n              disabled={disabled}\n              suggestion={suggestion}\n              additionalInfo={additionalInfo}\n            >\n              {Comp}\n            </FormField>\n          ) : (\n            Comp\n          )}\n          <VisuallyHiddenText id={`${id}-inputDescription`} aria-hidden>\n            {`${t('combobox_open_close')} `}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText id={`${id}-searchDescription`} aria-hidden>\n            {t('combobox_search_instructions')}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText id={`${id}-multiselectDescription`} aria-hidden>\n            {t(\n              Array.isArray(selected?.items) && selected.items.some(item => item.primary)\n                ? 'multiselect_instructions_with_links'\n                : 'multiselect_instructions',\n              [start]\n            )}\n          </VisuallyHiddenText>\n        </>\n      );\n    }\n  ),\n  getComboBoxTestIds\n);\n"]}
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport type {\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  MutableRefObject,\n  MouseEvent\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useUID,\n  useElement,\n  useDirection,\n  useTestIds,\n  useEscape\n} from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu';\nimport {\n  navigatorIsAvailable,\n  withTestIds,\n  getFocusables,\n  createClassName,\n  getActiveElement\n} from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { fitToContent } from '../Popover/modifiers';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport type ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox, StyledDropdownButton } from './ComboBox.styles';\nimport { getComboBoxTestIds } from './ComboxBox.test-ids';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nexport default withTestIds(\n  forwardRef<RefElement<ComboBoxProps>, PropsWithoutRef<ComboBoxProps>>(\n    function ComboBox(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        additionalInfo,\n        value,\n        required,\n        id = uid,\n        label,\n        labelHidden,\n        info,\n        status,\n        readOnly,\n        disabled,\n        mode = 'single-select',\n        selected,\n        onChange,\n        actions,\n        onFocus,\n        onBlur,\n        suggestion,\n        onDropdownButtonClick: onDropdownButtonClickProp,\n        onMenuOpen,\n        onClick,\n        onKeyDown,\n        menu,\n        visual,\n        className,\n        handle,\n        ...restProps\n      } = props;\n\n      const testIds = useTestIds(testId, getComboBoxTestIds);\n      const bodyRef = useRef<Element>(document.body);\n\n      const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);\n      const t = useI18n();\n      const listId = `${id}-list`;\n      const inputRef = useRef<HTMLInputElement>(null);\n      const popoverRef = useRef<HTMLDivElement>(null);\n      const [open, setOpen] = useState(false);\n      const menuRef: MenuProps['ref'] = useRef(null);\n      const menuComponentId = `${id}-listbox`;\n      const { start } = useDirection();\n\n      // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n      const [, setContainerEl] = useElement();\n      const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n      const toggleMenuDescendantsActive = useCallback((bool: boolean) => {\n        setPauseMenuDescendantEvaluation(!bool);\n      }, []);\n\n      const toggleSelectedDescendantsActive = useCallback((bool: boolean) => {\n        setPauseMenuDescendantEvaluation(bool);\n      }, []);\n\n      const focus = useFocusWithin([containerRef, popoverRef], focused => {\n        if (!focused) {\n          setOpen(false);\n          toggleMenuDescendantsActive(false);\n          onBlur?.(selected?.items);\n        } else {\n          onFocus?.(selected?.items);\n          if (isMobile) {\n            setTimeout(() => {\n              containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            }, 150); // delay it to let keyboard expand first\n          }\n        }\n      });\n\n      const handleEscape = useCallback(\n        (e: KeyboardEvent) => {\n          e.preventDefault();\n          if (open) {\n            e.stopPropagation();\n            setOpen(false);\n            toggleMenuDescendantsActive(false);\n          }\n        },\n        [open]\n      );\n\n      useEscape(handleEscape, containerRef, [handleEscape]);\n\n      useImperativeHandle(handle, () => ({\n        focusInput: () => {\n          inputRef.current?.focus();\n        }\n      }));\n\n      const onInputKeyDown = useCallback(\n        (e: ReactKeyboardEvent<HTMLInputElement>) => {\n          if (!menu || readOnly) return;\n          if (onKeyDown?.(e) === false) {\n            return;\n          }\n\n          switch (e.key) {\n            case 'ArrowUp':\n              if (e.altKey) {\n                e.preventDefault();\n                if (open) {\n                  setOpen(false);\n                  toggleMenuDescendantsActive(false);\n                }\n              }\n              break;\n            case 'ArrowDown':\n              e.preventDefault();\n              if (!open) {\n                setOpen(true);\n                toggleMenuDescendantsActive(true);\n              }\n              break;\n            case 'Tab': {\n              const forward = !e.shiftKey;\n\n              if (forward) {\n                const popoverFocusables = getFocusables(popoverRef);\n\n                if (popoverFocusables.length) {\n                  e.preventDefault();\n                  popoverFocusables[0].focus();\n                  break;\n                }\n              }\n\n              setOpen(false);\n              toggleMenuDescendantsActive(false);\n\n              break;\n            }\n            default:\n          }\n        },\n        [open, readOnly, menu, value, onKeyDown]\n      );\n\n      const onDropdownButtonClick = useCallback(() => {\n        onDropdownButtonClickProp?.(!open);\n        setOpen(!open);\n      }, [open, onDropdownButtonClickProp]);\n\n      const dropdownButton = useMemo(() => {\n        return (menu?.items || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n          <StyledDropdownButton\n            aria-label={t(\n              open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n            )}\n            icon\n            variant='simple'\n            onClick={onDropdownButtonClick}\n            onMouseDown={(e: MouseEvent) => {\n              e.preventDefault();\n              inputRef.current?.focus();\n            }}\n            disabled={disabled}\n            tabIndex='-1'\n          >\n            <Icon name={open ? 'caret-up' : 'caret-down'} />\n          </StyledDropdownButton>\n        ) : null;\n      }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n      const ariaDescribedBy = useMemo(() => {\n        let idString = `${id}-inputDescription`;\n\n        if (info) {\n          idString = idString.concat(` ${id}-info`);\n        }\n        if (onChange) {\n          idString = idString.concat(` ${id}-searchDescription`);\n        }\n        if (mode === 'multi-select') {\n          idString = idString.concat(` ${id}-multiselectDescription`);\n        }\n\n        return idString;\n      }, [info, id, mode, onChange]);\n\n      const onInputClick = useCallback(\n        (e: MouseEvent<HTMLInputElement>) => {\n          if (readOnly) return;\n          setOpen(true);\n          toggleMenuDescendantsActive(true);\n          onClick?.(e);\n        },\n        [readOnly, onClick]\n      );\n\n      useEffect(() => {\n        if (focus && menu && value && value.length > 0 && getActiveElement() === inputRef.current) {\n          setOpen(true);\n          toggleMenuDescendantsActive(true);\n        }\n      }, [menu, value, focus]);\n\n      useEffect(() => {\n        if (open) onMenuOpen?.();\n      }, [open]);\n\n      // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n      // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n      const inputActions = (\n        <>\n          {dropdownButton}\n          {actions}\n        </>\n      );\n\n      const Comp = (\n        <StyledComboBox\n          ref={containerRef}\n          as={StyledFormControl}\n          id={`${id}-combobox`}\n          data-testid={label ? undefined : testIds.root}\n        >\n          <ComboBoxInput\n            data-testid={testIds.control}\n            ref={inputRef}\n            role='combobox'\n            aria-autocomplete='list'\n            aria-expanded={!readOnly && !disabled && open}\n            aria-controls={\n              open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n            }\n            aria-haspopup='listbox'\n            aria-describedby={ariaDescribedBy}\n            className={createClassName('combo-box', className, { mode })}\n            selected={selected?.items}\n            loading={selected?.loading}\n            spellCheck={false}\n            id={id}\n            readOnly={readOnly}\n            disabled={disabled}\n            onChange={onChange}\n            value={value}\n            mode={mode}\n            status={status}\n            suggestion={suggestion}\n            actions={inputActions}\n            visual={visual}\n            onRemove={selected?.onRemove}\n            onClick={onInputClick}\n            onKeyDown={onInputKeyDown}\n            required={required}\n            onSelectedFocus={() => {\n              toggleSelectedDescendantsActive(true);\n            }}\n            onSelectedBlur={() => {\n              toggleSelectedDescendantsActive(false);\n            }}\n            {...restProps}\n          />\n\n          <Popover\n            hideOnTargetHidden\n            ref={popoverRef}\n            show={open && menu !== undefined}\n            target={containerRef.current}\n            placement='bottom-start'\n            modifiers={[fitToContent]}\n            // FIXME: Removed absolute strategy for mobile to avoid overflow issues.\n            strategy='fixed'\n            onMouseDown={(e: MouseEvent) => e.preventDefault()}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!inputRef.current) return;\n\n              if (e.key === 'Tab') {\n                const popoverFocusables = getFocusables(popoverRef);\n                const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n                const forward = !e.shiftKey;\n                const isLast = currentIndex === popoverFocusables.length - 1;\n\n                if (forward && isLast) {\n                  e.preventDefault();\n                  const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n                  const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n                  allFocusable[nextIndex]?.focus();\n                  setOpen(false);\n                  toggleMenuDescendantsActive(false);\n                } else if (!forward && currentIndex === 0) {\n                  e.preventDefault();\n                  inputRef.current.focus();\n                }\n              }\n              if (e.key === 'Escape') {\n                handleEscape(e);\n                inputRef.current.focus();\n              }\n            }}\n          >\n            {menu && (\n              <Menu\n                ref={menuRef}\n                listId={listId}\n                id={menuComponentId}\n                role='listbox'\n                mode={mode}\n                {...menu}\n                items={menu.items}\n                focusControlEl={inputRef.current || undefined}\n                onItemClick={(itemId, e) => {\n                  if (mode === 'single-select') {\n                    setOpen(false);\n                    toggleMenuDescendantsActive(true);\n                  }\n                  menu.onItemClick?.(itemId, e);\n\n                  const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n                  if (clickedItem?.primary && !clickedItem?.selected) {\n                    selected?.onNew?.(clickedItem?.primary);\n                  }\n                }}\n                aria-label={t('menu_option_list')}\n                pauseDescendantEvaluation={pauseMenuDescendantEvaluation}\n                arrowNavigationUnsupported\n                cycle={false}\n              />\n            )}\n          </Popover>\n        </StyledComboBox>\n      );\n\n      return (\n        <>\n          {label ? (\n            <FormField\n              testId={testIds}\n              label={label}\n              labelHidden={labelHidden}\n              id={id}\n              info={info}\n              readOnly={readOnly}\n              status={status}\n              required={required}\n              disabled={disabled}\n              suggestion={suggestion}\n              additionalInfo={additionalInfo}\n            >\n              {Comp}\n            </FormField>\n          ) : (\n            Comp\n          )}\n          <VisuallyHiddenText id={`${id}-inputDescription`} aria-hidden>\n            {`${t('combobox_open_close')} `}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText id={`${id}-searchDescription`} aria-hidden>\n            {t('combobox_search_instructions')}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText id={`${id}-multiselectDescription`} aria-hidden>\n            {t(\n              Array.isArray(selected?.items) && selected.items.some(item => item.primary)\n                ? 'multiselect_instructions_with_links'\n                : 'multiselect_instructions',\n              [start]\n            )}\n          </VisuallyHiddenText>\n        </>\n      );\n    }\n  ),\n  getComboBoxTestIds\n);\n"]}

package/lib/components/ComboBox/ComboBox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JA+B/B,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAoD5B,CAAC;AAIH,eAAO,MAAM,cAAc;;;;mBAkBzB,CAAC"}
+{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JA+B/B,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NA4D5B,CAAC;AAIH,eAAO,MAAM,cAAc;;;;mBAkBzB,CAAC"}

package/lib/components/ComboBox/ComboBox.styles.js

@@ -40,8 +40,16 @@ export const StyledDropdownButton = styled(Button)(({ theme }) => {
 StyledDropdownButton.defaultProps = defaultThemeProp;
 export const StyledSelectInput = styled.div(({ theme: { base, components } }) => {
     return css `
+    height: ${components.input.height};
+    max-height: ${components.input.height};
+
+    /* Clip overflowing content, but leave room for a focus ring. */
+    overflow: clip;
+    overflow-clip-margin: 0.3rem;
+
     @media (pointer: coarse) {
-      min-height: ${base['hit-area']['finger-min']};
+      height: ${base['hit-area']['finger-min']};
+      max-height: ${base['hit-area']['finger-min']};
     }
 
     /*

package/lib/components/ComboBox/ComboBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;IAElF,OAAO,GAAG,CAAA;;;;;;oCAMwB,gBAAgB,MAAM,uBAAuB;;kCAE/C,gBAAgB,MAAM,uBAAuB;;;;;;;iCAO9C,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;eAElE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;0BACrC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;8BAE5C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;GAMzF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;;oBAEQ,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;;;;cAQpC,cAAc,KAAK,cAAc;;UAErC,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;MAI/E,kBAAkB;oBACJ,UAAU,CAAC,KAAK,CAAC,MAAM;qBACtB,UAAU,CAAC,KAAK,CAAC,MAAM;;;;sBAItB,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;wBAErC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;GAcjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;;MAON,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledProgressRing } from '../Progress';\n\nexport const StyledDropdownButton = styled(Button)(({ theme }) => {\n  const baseBorderRadius = theme.base['border-radius'];\n  const formControlBorderRadius = theme.components['form-control']['border-radius'];\n\n  return css`\n    align-self: stretch;\n    height: auto;\n    margin-block: -0.0625rem;\n    margin-inline-end: -0.0625rem;\n    border-start-start-radius: 0;\n    border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n    border-end-start-radius: 0;\n    border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n\n    &::after {\n      content: '';\n      pointer-events: none;\n      position: absolute;\n      z-index: 1;\n      inset-inline-start: calc(${theme.components['form-control']['border-width']} * -1);\n      inset-block: 0;\n      width: ${theme.components['form-control']['border-width']};\n      background-color: ${theme.components['form-control']['border-color']};\n      transform: scaleY(0.5);\n      transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    }\n\n    &:hover::after {\n      transform: scaleY(1);\n    }\n  `;\n});\n\nStyledDropdownButton.defaultProps = defaultThemeProp;\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n  return css`\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n\n    /*\n      FIXME\n      :not selectors needed to prevent greedy div selector affecting Progress styles.\n      Best if div could be more targeted to specific classes.\n    */\n    div:not(${StyledBackdrop}, ${StyledBackdrop} div) {\n      min-height: calc(\n        ${components.input.height} - 2 * ${components['form-control']['border-width']}\n      );\n    }\n\n    ${StyledProgressRing} svg {\n      width: calc(${components.input.height} - 0.5rem);\n      height: calc(${components.input.height} - 0.5rem);\n    }\n\n    &:focus-within {\n      border-color: ${components['form-control'][':focus']['border-color']};\n      box-shadow: ${components['form-control'][':focus']['box-shadow']};\n    }\n\n    &:hover:not([readonly]):not([disabled]):focus-within {\n      border-color: transparent;\n    }\n\n    input {\n      min-width: 0;\n      width: 100%;\n      height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n      color: ${components['form-control']['foreground-color']};\n      text-overflow: ellipsis;\n      padding-inline: ${base.spacing};\n    }\n\n    input,\n    input:focus {\n      border: none;\n      outline: none;\n      flex-grow: 1;\n      background-color: transparent;\n\n      &:read-only {\n        cursor: default;\n      }\n    }\n  `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n  return css`\n    border: 0;\n\n    &:focus {\n      z-index: 1;\n    }\n\n    ${StyledPopover} {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      ${StyledMenu},\n      ${StyledMenuListWrapper} {\n        max-height: inherit;\n      }\n    }\n  `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;IAElF,OAAO,GAAG,CAAA;;;;;;oCAMwB,gBAAgB,MAAM,uBAAuB;;kCAE/C,gBAAgB,MAAM,uBAAuB;;;;;;;iCAO9C,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;eAElE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;0BACrC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;8BAE5C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;GAMzF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;cACE,UAAU,CAAC,KAAK,CAAC,MAAM;kBACnB,UAAU,CAAC,KAAK,CAAC,MAAM;;;;;;;gBAOzB,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;oBAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;;;;cAQpC,cAAc,KAAK,cAAc;;UAErC,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;MAI/E,kBAAkB;oBACJ,UAAU,CAAC,KAAK,CAAC,MAAM;qBACtB,UAAU,CAAC,KAAK,CAAC,MAAM;;;;sBAItB,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;wBAErC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;GAcjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;;MAON,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledProgressRing } from '../Progress';\n\nexport const StyledDropdownButton = styled(Button)(({ theme }) => {\n  const baseBorderRadius = theme.base['border-radius'];\n  const formControlBorderRadius = theme.components['form-control']['border-radius'];\n\n  return css`\n    align-self: stretch;\n    height: auto;\n    margin-block: -0.0625rem;\n    margin-inline-end: -0.0625rem;\n    border-start-start-radius: 0;\n    border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n    border-end-start-radius: 0;\n    border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n\n    &::after {\n      content: '';\n      pointer-events: none;\n      position: absolute;\n      z-index: 1;\n      inset-inline-start: calc(${theme.components['form-control']['border-width']} * -1);\n      inset-block: 0;\n      width: ${theme.components['form-control']['border-width']};\n      background-color: ${theme.components['form-control']['border-color']};\n      transform: scaleY(0.5);\n      transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    }\n\n    &:hover::after {\n      transform: scaleY(1);\n    }\n  `;\n});\n\nStyledDropdownButton.defaultProps = defaultThemeProp;\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n  return css`\n    height: ${components.input.height};\n    max-height: ${components.input.height};\n\n    /* Clip overflowing content, but leave room for a focus ring. */\n    overflow: clip;\n    overflow-clip-margin: 0.3rem;\n\n    @media (pointer: coarse) {\n      height: ${base['hit-area']['finger-min']};\n      max-height: ${base['hit-area']['finger-min']};\n    }\n\n    /*\n      FIXME\n      :not selectors needed to prevent greedy div selector affecting Progress styles.\n      Best if div could be more targeted to specific classes.\n    */\n    div:not(${StyledBackdrop}, ${StyledBackdrop} div) {\n      min-height: calc(\n        ${components.input.height} - 2 * ${components['form-control']['border-width']}\n      );\n    }\n\n    ${StyledProgressRing} svg {\n      width: calc(${components.input.height} - 0.5rem);\n      height: calc(${components.input.height} - 0.5rem);\n    }\n\n    &:focus-within {\n      border-color: ${components['form-control'][':focus']['border-color']};\n      box-shadow: ${components['form-control'][':focus']['box-shadow']};\n    }\n\n    &:hover:not([readonly]):not([disabled]):focus-within {\n      border-color: transparent;\n    }\n\n    input {\n      min-width: 0;\n      width: 100%;\n      height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n      color: ${components['form-control']['foreground-color']};\n      text-overflow: ellipsis;\n      padding-inline: ${base.spacing};\n    }\n\n    input,\n    input:focus {\n      border: none;\n      outline: none;\n      flex-grow: 1;\n      background-color: transparent;\n\n      &:read-only {\n        cursor: default;\n      }\n    }\n  `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n  return css`\n    border: 0;\n\n    &:focus {\n      z-index: 1;\n    }\n\n    ${StyledPopover} {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      ${StyledMenu},\n      ${StyledMenuListWrapper} {\n        max-height: inherit;\n      }\n    }\n  `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}

package/lib/components/ComboBox/ComboBoxInput.d.ts

@@ -15,8 +15,6 @@ interface ComboBoxInputProps extends BaseProps {
     onSelectedFocus?: MultiSelectInputProps['onSelectedFocus'];
     /** Callback on selected item pseudo blur */
     onSelectedBlur?: MultiSelectInputProps['onSelectedBlur'];
-    /** Pause evaluation of selected item descendants */
-    pauseDescendantEvaluation?: MultiSelectInputProps['pauseDescendantEvaluation'];
 }
 declare const ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps>;
 export default ComboBoxInput;

package/lib/components/ComboBox/ComboBoxInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxInput.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IACxC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,6CAA6C;IAC7C,eAAe,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;IAC3D,4CAA4C;IAC5C,cAAc,CAAC,EAAE,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACzD,oDAAoD;IACpD,yBAAyB,CAAC,EAAE,qBAAqB,CAAC,2BAA2B,CAAC,CAAC;CAChF;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAmCvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ComboBoxInput.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IACxC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,6CAA6C;IAC7C,eAAe,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;IAC3D,4CAA4C;IAC5C,cAAc,CAAC,EAAE,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;CAC1D;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiCvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ComboBox/ComboBoxInput.js

@@ -3,8 +3,8 @@ import { forwardRef } from 'react';
 import SingleSelectInput from './SingleSelectInput/SingleSelectInput';
 import MultiSelectInput from './MultiSelectInput/MultiSelectInput';
 const ComboBoxInput = forwardRef(function ComboBoxInput(props, ref) {
-    const { value, mode, selected, visual, onRemove, onSelectedFocus, onSelectedBlur, pauseDescendantEvaluation, ...restProps } = props;
-    return mode === 'multi-select' ? (_jsx(MultiSelectInput, { selected: selected, value: value, ref: ref, onRemove: onRemove, onSelectedBlur: onSelectedBlur, onSelectedFocus: onSelectedFocus, pauseDescendantEvaluation: pauseDescendantEvaluation, ...restProps })) : (_jsx(SingleSelectInput, { ref: ref, selected: selected, value: value, visual: visual, ...restProps }));
+    const { value, mode, selected, visual, onRemove, onSelectedFocus, onSelectedBlur, ...restProps } = props;
+    return mode === 'multi-select' ? (_jsx(MultiSelectInput, { selected: selected, value: value, ref: ref, onRemove: onRemove, onSelectedBlur: onSelectedBlur, onSelectedFocus: onSelectedFocus, ...restProps })) : (_jsx(SingleSelectInput, { ref: ref, selected: selected, value: value, visual: visual, ...restProps }));
 });
 export default ComboBoxInput;
 //# sourceMappingURL=ComboBoxInput.js.map

package/lib/components/ComboBox/ComboBoxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxInput.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,gBAAgB,MAAM,qCAAqC,CAAC;AAoBnE,MAAM,aAAa,GAAyD,UAAU,CACpF,SAAS,aAAa,CAAC,KAA0C,EAAE,GAA0B;IAC3F,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,eAAe,EACf,cAAc,EACd,yBAAyB,EACzB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CAC/B,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAsB,EAChC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,yBAAyB,EAAE,yBAAyB,KAChD,SAAS,GACb,CACH,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAoB,EAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,KACV,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef } from 'react';\n\nimport type { BaseProps, ForwardProps } from '../../types';\nimport type { MenuItemProps } from '../Menu/Menu.types';\n\nimport SingleSelectInput from './SingleSelectInput/SingleSelectInput';\nimport MultiSelectInput from './MultiSelectInput/MultiSelectInput';\nimport type { MultiSelectInputProps } from './MultiSelectInput/MultiSelectInput.types';\nimport type ComboBoxProps from './ComboBox.types';\nimport type { Selected } from './ComboBox.types';\n\ninterface ComboBoxInputProps extends BaseProps {\n  mode?: 'multi-select' | 'single-select';\n  selected?: Selected | Selected[];\n  loading?: boolean;\n  value?: ComboBoxProps['value'];\n  visual?: ComboBoxProps['visual'];\n  onRemove?: (id: MenuItemProps['id'], index: number) => void;\n  /** Callback on selected item pseudo focus */\n  onSelectedFocus?: MultiSelectInputProps['onSelectedFocus'];\n  /** Callback on selected item pseudo blur */\n  onSelectedBlur?: MultiSelectInputProps['onSelectedBlur'];\n  /** Pause evaluation of selected item descendants */\n  pauseDescendantEvaluation?: MultiSelectInputProps['pauseDescendantEvaluation'];\n}\n\nconst ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps> = forwardRef(\n  function ComboBoxInput(props: PropsWithoutRef<ComboBoxInputProps>, ref: Ref<HTMLInputElement>) {\n    const {\n      value,\n      mode,\n      selected,\n      visual,\n      onRemove,\n      onSelectedFocus,\n      onSelectedBlur,\n      pauseDescendantEvaluation,\n      ...restProps\n    } = props;\n\n    return mode === 'multi-select' ? (\n      <MultiSelectInput\n        selected={selected as Selected[]}\n        value={value}\n        ref={ref}\n        onRemove={onRemove}\n        onSelectedBlur={onSelectedBlur}\n        onSelectedFocus={onSelectedFocus}\n        pauseDescendantEvaluation={pauseDescendantEvaluation}\n        {...restProps}\n      />\n    ) : (\n      <SingleSelectInput\n        ref={ref}\n        selected={selected as Selected}\n        value={value}\n        visual={visual}\n        {...restProps}\n      />\n    );\n  }\n);\n\nexport default ComboBoxInput;\n"]}
+{"version":3,"file":"ComboBoxInput.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,gBAAgB,MAAM,qCAAqC,CAAC;AAkBnE,MAAM,aAAa,GAAyD,UAAU,CACpF,SAAS,aAAa,CAAC,KAA0C,EAAE,GAA0B;IAC3F,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,eAAe,EACf,cAAc,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CAC/B,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAsB,EAChC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,KAC5B,SAAS,GACb,CACH,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAoB,EAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,KACV,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef } from 'react';\n\nimport type { BaseProps, ForwardProps } from '../../types';\nimport type { MenuItemProps } from '../Menu/Menu.types';\n\nimport SingleSelectInput from './SingleSelectInput/SingleSelectInput';\nimport MultiSelectInput from './MultiSelectInput/MultiSelectInput';\nimport type { MultiSelectInputProps } from './MultiSelectInput/MultiSelectInput.types';\nimport type ComboBoxProps from './ComboBox.types';\nimport type { Selected } from './ComboBox.types';\n\ninterface ComboBoxInputProps extends BaseProps {\n  mode?: 'multi-select' | 'single-select';\n  selected?: Selected | Selected[];\n  loading?: boolean;\n  value?: ComboBoxProps['value'];\n  visual?: ComboBoxProps['visual'];\n  onRemove?: (id: MenuItemProps['id'], index: number) => void;\n  /** Callback on selected item pseudo focus */\n  onSelectedFocus?: MultiSelectInputProps['onSelectedFocus'];\n  /** Callback on selected item pseudo blur */\n  onSelectedBlur?: MultiSelectInputProps['onSelectedBlur'];\n}\n\nconst ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps> = forwardRef(\n  function ComboBoxInput(props: PropsWithoutRef<ComboBoxInputProps>, ref: Ref<HTMLInputElement>) {\n    const {\n      value,\n      mode,\n      selected,\n      visual,\n      onRemove,\n      onSelectedFocus,\n      onSelectedBlur,\n      ...restProps\n    } = props;\n\n    return mode === 'multi-select' ? (\n      <MultiSelectInput\n        selected={selected as Selected[]}\n        value={value}\n        ref={ref}\n        onRemove={onRemove}\n        onSelectedBlur={onSelectedBlur}\n        onSelectedFocus={onSelectedFocus}\n        {...restProps}\n      />\n    ) : (\n      <SingleSelectInput\n        ref={ref}\n        selected={selected as Selected}\n        value={value}\n        visual={visual}\n        {...restProps}\n      />\n    );\n  }\n);\n\nexport default ComboBoxInput;\n"]}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts

@@ -1,9 +1,7 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '../../../types';
+import type { WithAttributes } from '../../../types';
+import StyledMultiSelectInput from './MultiSelectInput.styles';
 import type { MultiSelectInputProps } from './MultiSelectInput.types';
-export declare const StyledMultiSelectInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-declare const MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps>;
+export { StyledMultiSelectInput };
+declare const MultiSelectInput: import("react").ForwardRefExoticComponent<Omit<WithAttributes<"input", MultiSelectInputProps>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default MultiSelectInput;
 //# sourceMappingURL=MultiSelectInput.d.ts.map

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmD,MAAM,OAAO,CAAC;AAIhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiBnD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,eAAO,MAAM,sBAAsB;;mBAYlC,CAAC;AAQF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA0U7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAgBrD,OAAO,sBAA8C,MAAM,2BAA2B,CAAC;AACvF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAKlC,QAAA,MAAM,gBAAgB,0JA2NpB,CAAC;AAEH,eAAe,gBAAgB,CAAC"}