@pega/cosmos-react-core 3.0.0-dev.9.1 → 3.0.0-rc.10

package/lib/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAG5C,OAAO,UAA+B,MAAM,eAAe,CAAC;AA8B5D,0FAA0F;AAC1F,MAAM,EAAE,GAAqC,UAAU,CACrD,CAAC,KAAoB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACpD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CACpD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface CheckboxProps extends NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: RadioCheckProps['checked'];\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /**\n   * Sets Checkbox to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n   * @default false\n   */\n  indeterminate?: RadioCheckProps['indeterminate'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n}\n\n// Odd issue with SB doc prop table not being generated when called Checkbox...so using CB\nconst CB: FC<CheckboxProps & ForwardProps> = forwardRef(\n  (props: CheckboxProps, ref: Ref<HTMLInputElement>) => (\n    <RadioCheck {...props} type='checkbox' ref={ref} />\n  )\n);\n\n// Adding here for doc purposes only\nCB.defaultProps = RadioCheck.defaultProps;\n\nexport default CB;\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,UAAU,EAAO,MAAM,OAAO,CAAC;AAGzD,OAAO,UAA+B,MAAM,eAAe,CAAC;AAgC5D,0FAA0F;AAC1F,MAAM,EAAE,GAAqC,UAAU,CACrD,CAAC,KAAoB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACpD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CACpD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { ChangeEvent, FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface CheckboxProps extends NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: RadioCheckProps['checked'];\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /**\n   * Sets Checkbox to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n   * @default false\n   */\n  indeterminate?: RadioCheckProps['indeterminate'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Callback invoked when this particular checkbox changes selection. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n}\n\n// Odd issue with SB doc prop table not being generated when called Checkbox...so using CB\nconst CB: FC<CheckboxProps & ForwardProps> = forwardRef(\n  (props: CheckboxProps, ref: Ref<HTMLInputElement>) => (\n    <RadioCheck {...props} type='checkbox' ref={ref} />\n  )\n);\n\n// Adding here for doc purposes only\nCB.defaultProps = RadioCheck.defaultProps;\n\nexport default CB;\n"]}

package/lib/components/ColorPicker/ColorPicker.d.ts

@@ -42,6 +42,8 @@ export interface ColorPickerProps extends BaseProps, NoChildrenProp {
     name?: FormControlProps['name'];
     /** Layout field elements inline in a row. */
     inline?: FormFieldProps['inline'];
+    /** Button when clicked will show additional information on the color picker */
+    additionalInfo?: FormFieldProps['additionalInfo'];
     /** onChange event handler that gets called on change of value. */
     onChange?: ColorChangeHandler;
     /** onBeforeClose of the color picker */

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,GAAG,EAGH,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AACzF,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAKrE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,yCAAyC;IACzC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AA0ED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAuHpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,GAAG,EAGH,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AACzF,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAKrE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,yCAAyC;IACzC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,+EAA+E;IAC/E,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAClD,kEAAkE;IAClE,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AA0ED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAyHpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/ColorPicker/ColorPicker.js

@@ -76,7 +76,7 @@ const StyledColorPicker = styled.div(({ theme, swatchOnly }) => {
 StyledColorPicker.defaultProps = defaultThemeProp;
 const ColorPicker = forwardRef((props, ref) => {
     const uid = useUID();
-    const { id = uid, value = '#000000', label, info, disabled, status, required, readOnly, labelHidden, swatchOnly = false, alpha = false, inline, onClick, onChange, onBeforeClose, ...restProps } = props;
+    const { id = uid, value = '#000000', label, info, disabled, status, required, readOnly, labelHidden, swatchOnly = false, alpha = false, inline, onClick, onChange, onBeforeClose, additionalInfo, ...restProps } = props;
     const inputRef = useConsolidatedRef(ref);
     const maskedSwatchRef = useConsolidatedRef();
     const [popoverEl, setPopoverEl] = useElement(null);
@@ -107,10 +107,8 @@ const ColorPicker = forwardRef((props, ref) => {
             popoverEl?.focus();
         }
     }, [showPopOver]);
-    return (_jsx(FormField, { inline: inline, container: inline ? { justify: 'between' } : undefined, as: StyledColorPicker, id: id, label: label, labelHidden: labelHidden, swatchOnly: swatchOnly, info: info, disabled: disabled, status: status, required: required, children: _jsxs(Flex, { container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, onClick: readOnly ? undefined : () => setShowPopOver(true), children: [_jsx("input", { ...restProps, id: id, type: readOnly ? undefined : 'color', ref: inputRef, defaultValue: value, disabled: disabled, required: required, readOnly: readOnly, onClick: e => {
+    return (_jsx(FormField, { inline: inline, container: inline ? { justify: 'between' } : undefined, as: StyledColorPicker, id: id, label: label, labelHidden: labelHidden, swatchOnly: swatchOnly, info: info, disabled: disabled, status: status, required: required, additionalInfo: additionalInfo, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, onClick: readOnly || disabled ? undefined : () => setShowPopOver(true), children: [_jsx("input", { ...restProps, id: id, type: readOnly ? undefined : 'color', ref: inputRef, defaultValue: value, disabled: disabled, required: required, readOnly: readOnly, onClick: e => {
                         e.preventDefault();
-                        if (readOnly)
-                            e.preventDefault();
                     } }), _jsx("div", { style: { backgroundColor: value }, ref: maskedSwatchRef }), !swatchOnly && value, _jsx(Popover, { placement: 'bottom-start', style: { zIndex: '3000' }, show: showPopOver, ref: setPopoverEl, groupId: 'popover', target: maskedSwatchRef.current, children: _jsx(ChromePicker, { disableAlpha: !alpha, color: value, onChange: (color, e) => {
                             onChange?.(color, e);
                         } }) })] }) }));

package/lib/components/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  Ref,\n  useState,\n  PropsWithoutRef,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { ChromePicker, ColorChangeHandler } from 'react-color';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport Flex from '../Flex';\nimport { useConsolidatedRef, useUID, useElement, useOuterEvent } from '../../hooks';\nimport Popover from '../Popover';\n\nexport interface ColorPickerProps extends BaseProps, NoChildrenProp {\n  /** label for the color picker control */\n  label: FormControlProps['label'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not passed, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /**\n   * Color picker value in hex\n   * @default \"#000000\"\n   */\n  value?: FormControlProps['value'];\n  /**\n   * Show color swatch without hex value display.\n   * @default false\n   */\n  swatchOnly?: boolean;\n  /**\n   * Enables alpha slider.\n   * @default false\n   */\n  alpha?: boolean;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. */\n  disabled?: FormControlProps['disabled'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Layout field elements inline in a row. */\n  inline?: FormFieldProps['inline'];\n  /** onChange event handler that gets called on change of value. */\n  onChange?: ColorChangeHandler;\n  /** onBeforeClose of the color picker */\n  onBeforeClose?: () => void;\n  /** Called when the underlying input element is clicked. This should be rarely if ever used. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Ref placed on the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\ntype ColorPickerPropsWithDefaults = PropsWithDefaults<ColorPickerProps, 'value' | 'swatchOnly'>;\n\nconst StyledColorPicker = styled.div<Pick<ColorPickerPropsWithDefaults, 'swatchOnly'>>(\n  ({ theme, swatchOnly }) => {\n    const size = theme.components.input.height;\n    const borderWidth = theme.components['form-control']['border-width'];\n\n    return css`\n      ${StyledFormControl} {\n        overflow: hidden;\n        text-transform: uppercase;\n        ${!swatchOnly &&\n        css`\n          min-width: 8rem;\n        `}\n\n        ${!swatchOnly &&\n        css`\n          padding-inline-end: ${theme.base.spacing};\n        `}\n\n        &:focus-within {\n          box-shadow: ${theme.base.shadow.focus};\n          border: none;\n        }\n\n        & > input {\n          ${hideVisually}\n\n          & + div {\n            height: calc(${size} - (2 * ${borderWidth}));\n\n            ${swatchOnly\n              ? css`\n                  width: calc(${size} - (2 * ${borderWidth}));\n                `\n              : css`\n                  min-width: calc(${size} - ${borderWidth});\n                  margin-inline-end: ${theme.base.spacing};\n                  border-inline-end: ${borderWidth} solid\n                    ${theme.components['form-control']['border-color']};\n                `}\n          }\n\n          &:focus + div {\n            width: ${size};\n            height: ${size};\n          }\n        }\n\n        & input {\n          height: 2rem !important;\n          min-height: 2rem;\n          color: #000000 !important;\n          background-color: #ffffff !important;\n          font-size: 0.8125rem !important;\n          font-family: ${theme.base['font-family']};\n\n          & + label {\n            font-weight: 600;\n            color: rgba(0, 0, 0, 0.6) !important;\n            font-size: 0.8125rem !important;\n            font-family: ${theme.base['font-family']};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledColorPicker.defaultProps = defaultThemeProp;\n\nconst ColorPicker: FC<ColorPickerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ColorPickerProps>, ref: ColorPickerProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value = '#000000',\n      label,\n      info,\n      disabled,\n      status,\n      required,\n      readOnly,\n      labelHidden,\n      swatchOnly = false,\n      alpha = false,\n      inline,\n      onClick,\n      onChange,\n      onBeforeClose,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef(ref);\n    const maskedSwatchRef = useConsolidatedRef<HTMLDivElement>();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n    const [showPopOver, setShowPopOver] = useState(false);\n\n    const hidePopover = () => {\n      if (showPopOver) {\n        onBeforeClose?.();\n      }\n\n      setShowPopOver(false);\n    };\n\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        hidePopover();\n      }\n    };\n\n    useOuterEvent('mousedown', [popoverEl], hidePopover);\n\n    useEffect(() => {\n      document.addEventListener('keydown', closePopover);\n      popoverEl?.addEventListener('keydown', closePopover);\n      return () => {\n        document.removeEventListener('keydown', closePopover);\n        popoverEl?.removeEventListener('keydown', closePopover);\n      };\n    }, [popoverEl]);\n\n    useEffect(() => {\n      if (showPopOver) {\n        popoverEl?.focus();\n      }\n    }, [showPopOver]);\n\n    return (\n      <FormField\n        inline={inline}\n        container={inline ? { justify: 'between' } : undefined}\n        as={StyledColorPicker}\n        id={id}\n        label={label}\n        labelHidden={labelHidden}\n        swatchOnly={swatchOnly}\n        info={info}\n        disabled={disabled}\n        status={status}\n        required={required}\n      >\n        <Flex\n          container={{ alignItems: 'center' }}\n          item={swatchOnly ? { alignSelf: 'start' } : undefined}\n          as={StyledFormControl}\n          disabled={disabled}\n          status={status}\n          required={required}\n          readOnly={readOnly}\n          onClick={readOnly ? undefined : () => setShowPopOver(true)}\n        >\n          <input\n            {...restProps}\n            id={id}\n            type={readOnly ? undefined : 'color'}\n            ref={inputRef}\n            defaultValue={value}\n            disabled={disabled}\n            required={required}\n            readOnly={readOnly}\n            onClick={e => {\n              e.preventDefault();\n              if (readOnly) e.preventDefault();\n            }}\n          />\n          <div style={{ backgroundColor: value }} ref={maskedSwatchRef} />\n          {!swatchOnly && value}\n          <Popover\n            placement='bottom-start'\n            style={{ zIndex: '3000' }}\n            show={showPopOver}\n            ref={setPopoverEl}\n            groupId='popover'\n            target={maskedSwatchRef.current}\n          >\n            <ChromePicker\n              disableAlpha={!alpha}\n              color={value}\n              onChange={(color, e) => {\n                onChange?.(color, e);\n              }}\n            />\n          </Popover>\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nexport default ColorPicker;\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  Ref,\n  useState,\n  PropsWithoutRef,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { ChromePicker, ColorChangeHandler } from 'react-color';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport Flex from '../Flex';\nimport { useConsolidatedRef, useUID, useElement, useOuterEvent } from '../../hooks';\nimport Popover from '../Popover';\n\nexport interface ColorPickerProps extends BaseProps, NoChildrenProp {\n  /** label for the color picker control */\n  label: FormControlProps['label'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not passed, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /**\n   * Color picker value in hex\n   * @default \"#000000\"\n   */\n  value?: FormControlProps['value'];\n  /**\n   * Show color swatch without hex value display.\n   * @default false\n   */\n  swatchOnly?: boolean;\n  /**\n   * Enables alpha slider.\n   * @default false\n   */\n  alpha?: boolean;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. */\n  disabled?: FormControlProps['disabled'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Layout field elements inline in a row. */\n  inline?: FormFieldProps['inline'];\n  /** Button when clicked will show additional information on the color picker */\n  additionalInfo?: FormFieldProps['additionalInfo'];\n  /** onChange event handler that gets called on change of value. */\n  onChange?: ColorChangeHandler;\n  /** onBeforeClose of the color picker */\n  onBeforeClose?: () => void;\n  /** Called when the underlying input element is clicked. This should be rarely if ever used. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Ref placed on the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\ntype ColorPickerPropsWithDefaults = PropsWithDefaults<ColorPickerProps, 'value' | 'swatchOnly'>;\n\nconst StyledColorPicker = styled.div<Pick<ColorPickerPropsWithDefaults, 'swatchOnly'>>(\n  ({ theme, swatchOnly }) => {\n    const size = theme.components.input.height;\n    const borderWidth = theme.components['form-control']['border-width'];\n\n    return css`\n      ${StyledFormControl} {\n        overflow: hidden;\n        text-transform: uppercase;\n        ${!swatchOnly &&\n        css`\n          min-width: 8rem;\n        `}\n\n        ${!swatchOnly &&\n        css`\n          padding-inline-end: ${theme.base.spacing};\n        `}\n\n        &:focus-within {\n          box-shadow: ${theme.base.shadow.focus};\n          border: none;\n        }\n\n        & > input {\n          ${hideVisually}\n\n          & + div {\n            height: calc(${size} - (2 * ${borderWidth}));\n\n            ${swatchOnly\n              ? css`\n                  width: calc(${size} - (2 * ${borderWidth}));\n                `\n              : css`\n                  min-width: calc(${size} - ${borderWidth});\n                  margin-inline-end: ${theme.base.spacing};\n                  border-inline-end: ${borderWidth} solid\n                    ${theme.components['form-control']['border-color']};\n                `}\n          }\n\n          &:focus + div {\n            width: ${size};\n            height: ${size};\n          }\n        }\n\n        & input {\n          height: 2rem !important;\n          min-height: 2rem;\n          color: #000000 !important;\n          background-color: #ffffff !important;\n          font-size: 0.8125rem !important;\n          font-family: ${theme.base['font-family']};\n\n          & + label {\n            font-weight: 600;\n            color: rgba(0, 0, 0, 0.6) !important;\n            font-size: 0.8125rem !important;\n            font-family: ${theme.base['font-family']};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledColorPicker.defaultProps = defaultThemeProp;\n\nconst ColorPicker: FC<ColorPickerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ColorPickerProps>, ref: ColorPickerProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value = '#000000',\n      label,\n      info,\n      disabled,\n      status,\n      required,\n      readOnly,\n      labelHidden,\n      swatchOnly = false,\n      alpha = false,\n      inline,\n      onClick,\n      onChange,\n      onBeforeClose,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef(ref);\n    const maskedSwatchRef = useConsolidatedRef<HTMLDivElement>();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n    const [showPopOver, setShowPopOver] = useState(false);\n\n    const hidePopover = () => {\n      if (showPopOver) {\n        onBeforeClose?.();\n      }\n\n      setShowPopOver(false);\n    };\n\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        hidePopover();\n      }\n    };\n\n    useOuterEvent('mousedown', [popoverEl], hidePopover);\n\n    useEffect(() => {\n      document.addEventListener('keydown', closePopover);\n      popoverEl?.addEventListener('keydown', closePopover);\n      return () => {\n        document.removeEventListener('keydown', closePopover);\n        popoverEl?.removeEventListener('keydown', closePopover);\n      };\n    }, [popoverEl]);\n\n    useEffect(() => {\n      if (showPopOver) {\n        popoverEl?.focus();\n      }\n    }, [showPopOver]);\n\n    return (\n      <FormField\n        inline={inline}\n        container={inline ? { justify: 'between' } : undefined}\n        as={StyledColorPicker}\n        id={id}\n        label={label}\n        labelHidden={labelHidden}\n        swatchOnly={swatchOnly}\n        info={info}\n        disabled={disabled}\n        status={status}\n        required={required}\n        additionalInfo={additionalInfo}\n        {...restProps}\n      >\n        <Flex\n          container={{ alignItems: 'center' }}\n          item={swatchOnly ? { alignSelf: 'start' } : undefined}\n          as={StyledFormControl}\n          disabled={disabled}\n          status={status}\n          required={required}\n          readOnly={readOnly}\n          onClick={readOnly || disabled ? undefined : () => setShowPopOver(true)}\n        >\n          <input\n            {...restProps}\n            id={id}\n            type={readOnly ? undefined : 'color'}\n            ref={inputRef}\n            defaultValue={value}\n            disabled={disabled}\n            required={required}\n            readOnly={readOnly}\n            onClick={e => {\n              e.preventDefault();\n            }}\n          />\n          <div style={{ backgroundColor: value }} ref={maskedSwatchRef} />\n          {!swatchOnly && value}\n          <Popover\n            placement='bottom-start'\n            style={{ zIndex: '3000' }}\n            show={showPopOver}\n            ref={setPopoverEl}\n            groupId='popover'\n            target={maskedSwatchRef.current}\n          >\n            <ChromePicker\n              disableAlpha={!alpha}\n              color={value}\n              onChange={(color, e) => {\n                onChange?.(color, e);\n              }}\n            />\n          </Popover>\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nexport default ColorPicker;\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":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAY3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAO7C,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAgN7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAoB3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAO7C,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA8S7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/ComboBox/ComboBox.js

@@ -3,7 +3,7 @@ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'r
 import Icon, { registerIcon } from '../Icon';
 import * as caretDownIcon from '../Icon/icons/caret-down.icon';
 import * as caretUpIcon from '../Icon/icons/caret-up.icon';
-import { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';
+import { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement, useDirection } from '../../hooks';
 import Popover from '../Popover';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
@@ -12,24 +12,38 @@ import Button from '../Button';
 import { navigatorIsAvailable } from '../../utils';
 import menuHelpers from '../Menu/helpers';
 import { sameWidth } from '../Popover/modifiers';
+import VisuallyHiddenText from '../VisuallyHiddenText';
 import ComboBoxInput from './ComboBoxInput';
 import { StyledComboBox } from './ComboBox.styles';
 registerIcon(caretDownIcon, caretUpIcon);
 const isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');
 const ComboBox = forwardRef((props, ref) => {
     const uid = useUID();
-    const { value, required, id = uid, label, labelHidden, info, status, readOnly, disabled, mode = 'single-select', selected, onChange, actions, onFocus, onBlur, onDropdownButtonClick: onDropdownButtonClickProp, onClick, menu, ...restProps } = props;
+    const { additionalInfo, value, required, id = uid, label, labelHidden, info, status, readOnly, disabled, mode = 'single-select', selected, onChange, actions, onFocus, onBlur, onResolveSuggestion, onDropdownButtonClick: onDropdownButtonClickProp, onClick, onKeyDown, menu, ...restProps } = props;
+    const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);
+    const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] = useState(false);
     const t = useI18n();
+    const listId = `${id}-list`;
     const inputRef = useRef(null);
     const [open, setOpen] = useState(false);
     const menuRef = useRef(null);
     const menuComponentId = `${id}-listbox`;
+    const { start } = useDirection();
     // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.
     const [, setContainerEl] = useElement();
     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], focused => {
         if (!focused) {
             setOpen(false);
+            toggleMenuDescendantsActive(false);
             onBlur?.(selected?.items);
         }
         else {
@@ -44,28 +58,39 @@ const ComboBox = forwardRef((props, ref) => {
     const onInputKeyDown = useCallback((e) => {
         if (!menu || readOnly)
             return;
+        if (onKeyDown?.(e) === false) {
+            return;
+        }
         switch (e.key) {
             case 'ArrowUp':
                 if (e.altKey) {
                     e.preventDefault();
-                    if (open)
+                    if (open) {
                         setOpen(false);
+                        toggleMenuDescendantsActive(false);
+                    }
                 }
                 break;
             case 'ArrowDown':
                 e.preventDefault();
-                if (!open)
+                if (!open) {
                     setOpen(true);
+                    toggleMenuDescendantsActive(true);
+                }
                 break;
             case 'Escape':
-                e.preventDefault();
-                if (open)
-                    e.stopPropagation();
+            case 'Tab':
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    if (open)
+                        e.stopPropagation();
+                }
                 setOpen(false);
+                toggleMenuDescendantsActive(false);
                 break;
             default:
         }
-    }, [open, readOnly, menu, value]);
+    }, [open, readOnly, menu, value, onKeyDown]);
     const onDropdownButtonClick = useCallback(() => {
         onDropdownButtonClickProp?.(!open);
         setOpen(!open);
@@ -76,21 +101,36 @@ const ComboBox = forwardRef((props, ref) => {
                 inputRef.current?.focus();
             }, disabled: disabled, tabIndex: '-1', children: _jsx(Icon, { name: open ? 'caret-up' : 'caret-down' }) })) : null;
     }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);
+    const ariaDescribedBy = useMemo(() => {
+        let idString = `${id}-inputDescription`;
+        if (info) {
+            idString = idString.concat(` ${id}-info`);
+        }
+        if (onChange) {
+            idString = idString.concat(` ${id}-searchDescription`);
+        }
+        if (mode === 'multi-select') {
+            idString = idString.concat(` ${id}-multiselectDescription`);
+        }
+        return idString;
+    }, [info, id, mode, onChange]);
     const onInputClick = useCallback((e) => {
         if (readOnly)
             return;
         setOpen(true);
+        toggleMenuDescendantsActive(true);
         onClick?.(e);
     }, [readOnly, onClick]);
     useEffect(() => {
         if (focus && menu && value && value.length > 0) {
             setOpen(true);
+            toggleMenuDescendantsActive(true);
         }
     }, [menu, value, focus]);
     // 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`, children: [_jsx(ComboBoxInput, { ref: inputRef, role: 'combobox', "aria-haspopup": 'listbox', "aria-expanded": !readOnly && !disabled && open, "aria-autocomplete": 'list', "aria-describedby": info ? `${id}-inputDescription ${id}-info` : `${id}-inputDescription`, selected: selected?.items, spellCheck: false, ...{
+    const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, role: 'combobox', "aria-haspopup": 'listbox', "aria-expanded": !readOnly && !disabled && open, "aria-owns": open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined, children: [_jsx(ComboBoxInput, { ref: inputRef, role: 'searchbox', "aria-autocomplete": 'list', "aria-controls": open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined, "aria-describedby": ariaDescribedBy, selected: selected?.items, spellCheck: false, ...{
                     id,
                     readOnly,
                     disabled,
@@ -98,7 +138,11 @@ const ComboBox = forwardRef((props, ref) => {
                     value,
                     mode,
                     status
-                }, actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, ...restProps }), _jsx("span", { id: `${id}-inputDescription`, hidden: true, children: `${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : '' }), _jsx(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: [
+                }, actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, onSelectedFocus: () => {
+                    toggleSelectedDescendantsActive(true);
+                }, onSelectedBlur: () => {
+                    toggleSelectedDescendantsActive(false);
+                }, ...restProps }), _jsx(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: [
                     {
                         name: 'flip',
                         options: {
@@ -106,17 +150,30 @@ const ComboBox = forwardRef((props, ref) => {
                         }
                     },
                     sameWidth
-                ], strategy: isMobile ? 'absolute' : 'fixed', onMouseDown: (e) => e.preventDefault(), children: menu && (_jsx(Menu, { ref: menuRef, id: menuComponentId, role: 'listbox', mode: mode, ...menu, items: menu.items, focusControlEl: inputRef.current || undefined, onItemClick: (itemId, e) => {
+                ], 
+                // FIXME: Removed absolute strategy for mobile to avoid overflow issues.
+                strategy: 'fixed', onMouseDown: (e) => e.preventDefault(), children: menu && (_jsx(Menu, { ref: menuRef, listId: listId, id: menuComponentId, role: 'listbox', mode: mode, ...menu, items: menu.items, focusControlEl: inputRef.current || undefined, onItemClick: (itemId, e) => {
                         if (mode === 'single-select') {
                             setOpen(false);
+                            toggleMenuDescendantsActive(true);
                         }
                         menu.onItemClick?.(itemId, e);
                         const clickedItem = menuHelpers.getItem(menu.items, itemId);
                         if (clickedItem?.primary && !clickedItem?.selected) {
                             selected?.onNew?.(clickedItem?.primary);
                         }
-                    }, arrowNavigationUnsupported: true })) })] }));
-    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
+                    }, "aria-label": t('menu_option_list'), pauseDescendantEvaluation: pauseMenuDescendantEvaluation, arrowNavigationUnsupported: true })) })] }));
+    return (_jsxs(_Fragment, { children: [label ? (_jsx(FormField, { ...{
+                    label,
+                    labelHidden,
+                    id,
+                    info,
+                    status,
+                    required,
+                    disabled,
+                    onResolveSuggestion,
+                    additionalInfo
+                }, children: Comp })) : (Comp), _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, "aria-hidden": true, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, "aria-hidden": true, children: t('combobox_search_instructions') }), _jsx(VisuallyHiddenText, { id: `${id}-multiselectDescription`, "aria-hidden": true, children: t('multiselect_instructions', [start]) })] }));
 });
 export default ComboBox;
 //# sourceMappingURL=ComboBox.js.map

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  FunctionComponent,\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\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 { ForwardProps } from '../../types';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu, { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { sameWidth } from '../Popover/modifiers';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox } from './ComboBox.styles';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\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      onDropdownButtonClick: onDropdownButtonClickProp,\n      onClick,\n      menu,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState(false);\n    const menuRef: MenuProps['ref'] = useRef(null);\n    const menuComponentId = `${id}-listbox`;\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 focus = useFocusWithin([containerRef], focused => {\n      if (!focused) {\n        setOpen(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 onInputKeyDown = useCallback(\n      (e: ReactKeyboardEvent<HTMLInputElement>) => {\n        if (!menu || readOnly) return;\n        switch (e.key) {\n          case 'ArrowUp':\n            if (e.altKey) {\n              e.preventDefault();\n              if (open) setOpen(false);\n            }\n            break;\n          case 'ArrowDown':\n            e.preventDefault();\n            if (!open) setOpen(true);\n            break;\n          case 'Escape':\n            e.preventDefault();\n            if (open) e.stopPropagation();\n            setOpen(false);\n            break;\n          default:\n        }\n      },\n      [open, readOnly, menu, value]\n    );\n\n    const onDropdownButtonClick = useCallback(() => {\n      onDropdownButtonClickProp?.(!open);\n      setOpen(!open);\n    }, [open, onDropdownButtonClickProp]);\n\n    const dropdownButton = useMemo(() => {\n      return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n        <Button\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        </Button>\n      ) : null;\n    }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n    const onInputClick = useCallback(\n      (e: MouseEvent) => {\n        if (readOnly) return;\n        setOpen(true);\n        onClick?.(e);\n      },\n      [readOnly, onClick]\n    );\n\n    useEffect(() => {\n      if (focus && menu && value && value.length > 0) {\n        setOpen(true);\n      }\n    }, [menu, value, focus]);\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 ref={containerRef} as={StyledFormControl} id={`${id}-combobox`}>\n        <ComboBoxInput\n          ref={inputRef}\n          role='combobox'\n          aria-haspopup='listbox'\n          aria-expanded={!readOnly && !disabled && open}\n          aria-autocomplete='list'\n          aria-describedby={info ? `${id}-inputDescription ${id}-info` : `${id}-inputDescription`}\n          selected={selected?.items}\n          spellCheck={false}\n          {...{\n            id,\n            readOnly,\n            disabled,\n            onChange,\n            value,\n            mode,\n            status\n          }}\n          actions={inputActions}\n          onRemove={selected?.onRemove}\n          onClick={onInputClick}\n          onKeyDown={onInputKeyDown}\n          required={required}\n          {...restProps}\n        />\n\n        <span id={`${id}-inputDescription`} hidden>\n          {`${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : ''}\n        </span>\n\n        <Popover\n          show={open && menu !== undefined}\n          target={containerRef.current}\n          placement='bottom-start'\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['top-start']\n              }\n            },\n            sameWidth\n          ]}\n          strategy={isMobile ? 'absolute' : 'fixed'}\n          onMouseDown={(e: MouseEvent) => e.preventDefault()}\n        >\n          {menu && (\n            <Menu\n              ref={menuRef}\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                }\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              arrowNavigationUnsupported\n            />\n          )}\n        </Popover>\n      </StyledComboBox>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default ComboBox;\n"]}
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAKV,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAE3D,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,OAAO,EACP,MAAM,EACN,UAAU,EACV,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,IAAmB,MAAM,SAAS,CAAC;AAC1C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAEvD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,YAAY,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEzC,MAAM,QAAQ,GAAG,oBAAoB,IAAI,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAEhF,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAwB,EAAE,EAAE;IAClE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,cAAc,EACd,KAAK,EACL,QAAQ,EACR,EAAE,GAAG,GAAG,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,eAAe,EACtB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,mBAAmB,EACnB,qBAAqB,EAAE,yBAAyB,EAChD,OAAO,EACP,SAAS,EACT,IAAI,EACJ,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzF,MAAM,CAAC,iCAAiC,EAAE,oCAAoC,CAAC,GAC7E,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,MAAM,GAAG,GAAG,EAAE,OAAO,CAAC;IAC5B,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,OAAO,GAAqB,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,eAAe,GAAG,GAAG,EAAE,UAAU,CAAC;IACxC,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,wFAAwF;IACxF,MAAM,CAAC,EAAE,cAAc,CAAC,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,YAAY,GAAG,kBAAkB,CAAiB,GAAG,EAAE,cAAc,CAAC,CAAC;IAE7E,MAAM,2BAA2B,GAAG,WAAW,CAAC,CAAC,IAAa,EAAE,EAAE;QAChE,gCAAgC,CAAC,CAAC,IAAI,CAAC,CAAC;QACxC,oCAAoC,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,+BAA+B,GAAG,WAAW,CAAC,CAAC,IAAa,EAAE,EAAE;QACpE,oCAAoC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC5C,gCAAgC,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,cAAc,CAAC,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,EAAE;QACrD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,2BAA2B,CAAC,KAAK,CAAC,CAAC;YACnC,MAAM,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;SAC3B;aAAM;YACL,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;YAC3B,IAAI,QAAQ,EAAE;gBACZ,UAAU,CAAC,GAAG,EAAE;oBACd,YAAY,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;gBAC/E,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,wCAAwC;aAClD;SACF;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,CAAuC,EAAE,EAAE;QAC1C,IAAI,CAAC,IAAI,IAAI,QAAQ;YAAE,OAAO;QAC9B,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE;YAC5B,OAAO;SACR;QAED,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,SAAS;gBACZ,IAAI,CAAC,CAAC,MAAM,EAAE;oBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,IAAI,EAAE;wBACR,OAAO,CAAC,KAAK,CAAC,CAAC;wBACf,2BAA2B,CAAC,KAAK,CAAC,CAAC;qBACpC;iBACF;gBACD,MAAM;YACR,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,EAAE;oBACT,OAAO,CAAC,IAAI,CAAC,CAAC;oBACd,2BAA2B,CAAC,IAAI,CAAC,CAAC;iBACnC;gBACD,MAAM;YACR,KAAK,QAAQ,CAAC;YACd,KAAK,KAAK;gBACR,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;oBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,IAAI;wBAAE,CAAC,CAAC,eAAe,EAAE,CAAC;iBAC/B;gBACD,OAAO,CAAC,KAAK,CAAC,CAAC;gBACf,2BAA2B,CAAC,KAAK,CAAC,CAAC;gBACnC,MAAM;YACR,QAAQ;SACT;IACH,CAAC,EACD,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CACzC,CAAC;IAEF,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,yBAAyB,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QACnC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,IAAI,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAEtC,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,IAAI,yBAAyB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACpF,KAAC,MAAM,kBACO,CAAC,CACX,IAAI,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,gCAAgC,CAC5E,EACD,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,qBAAqB,EAC9B,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE;gBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YAC5B,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,IAAI,YAEb,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,GAAI,GACzC,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEhE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,QAAQ,GAAG,GAAG,EAAE,mBAAmB,CAAC;QAExC,IAAI,IAAI,EAAE;YACR,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;SAC3C;QACD,IAAI,QAAQ,EAAE;YACZ,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC;SACxD;QACD,IAAI,IAAI,KAAK,cAAc,EAAE;YAC3B,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,yBAAyB,CAAC,CAAC;SAC7D;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE/B,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAa,EAAE,EAAE;QAChB,IAAI,QAAQ;YAAE,OAAO;QACrB,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAClC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACf,CAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9C,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,2BAA2B,CAAC,IAAI,CAAC,CAAC;SACnC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,iFAAiF;IACjF,gIAAgI;IAChI,MAAM,YAAY,GAAG,CACnB,8BACG,cAAc,EACd,OAAO,IACP,CACJ,CAAC;IAEF,MAAM,IAAI,GAAG,CACX,MAAC,cAAc,IACb,GAAG,EAAE,YAAY,EACjB,EAAE,EAAE,iBAAiB,EACrB,EAAE,EAAE,GAAG,EAAE,WAAW,EACpB,IAAI,EAAC,UAAU,mBACD,SAAS,mBACR,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,IAAI,eAE3C,IAAI,IAAI,IAAI,KAAK,SAAS,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAGnF,KAAC,aAAa,IACZ,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,WAAW,uBACE,MAAM,mBAEtB,IAAI,IAAI,IAAI,KAAK,SAAS,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,sBAEjE,eAAe,EACjC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EACzB,UAAU,EAAE,KAAK,KACb;oBACF,EAAE;oBACF,QAAQ;oBACR,QAAQ;oBACR,QAAQ;oBACR,KAAK;oBACL,IAAI;oBACJ,MAAM;iBACP,EACD,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAC5B,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,QAAQ,EAClB,yBAAyB,EAAE,iCAAiC,EAC5D,eAAe,EAAE,GAAG,EAAE;oBACpB,+BAA+B,CAAC,IAAI,CAAC,CAAC;gBACxC,CAAC,EACD,cAAc,EAAE,GAAG,EAAE;oBACnB,+BAA+B,CAAC,KAAK,CAAC,CAAC;gBACzC,CAAC,KACG,SAAS,GACb,EAEF,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,IAAI,IAAI,KAAK,SAAS,EAChC,MAAM,EAAE,YAAY,CAAC,OAAO,EAC5B,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE;4BACP,kBAAkB,EAAE,CAAC,WAAW,CAAC;yBAClC;qBACF;oBACD,SAAS;iBACV;gBACD,wEAAwE;gBACxE,QAAQ,EAAC,OAAO,EAChB,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,YAEjD,IAAI,IAAI,CACP,KAAC,IAAI,IACH,GAAG,EAAE,OAAO,EACZ,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,eAAe,EACnB,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,IAAI,KACN,IAAI,EACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,QAAQ,CAAC,OAAO,IAAI,SAAS,EAC7C,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;wBACzB,IAAI,IAAI,KAAK,eAAe,EAAE;4BAC5B,OAAO,CAAC,KAAK,CAAC,CAAC;4BACf,2BAA2B,CAAC,IAAI,CAAC,CAAC;yBACnC;wBACD,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;wBAE9B,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;wBAE5D,IAAI,WAAW,EAAE,OAAO,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE;4BAClD,QAAQ,EAAE,KAAK,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;yBACzC;oBACH,CAAC,gBACW,CAAC,CAAC,kBAAkB,CAAC,EACjC,yBAAyB,EAAE,6BAA6B,EACxD,0BAA0B,SAC1B,CACH,GACO,IACK,CAClB,CAAC;IAEF,OAAO,CACL,8BACG,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,SAAS,OACJ;oBACF,KAAK;oBACL,WAAW;oBACX,EAAE;oBACF,IAAI;oBACJ,MAAM;oBACN,QAAQ;oBACR,QAAQ;oBACR,mBAAmB;oBACnB,cAAc;iBACf,YAEA,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,EACD,KAAC,kBAAkB,IAAC,EAAE,EAAE,GAAG,EAAE,mBAAmB,iCAC7C,GAAG,CAAC,CAAC,qBAAqB,CAAC,GAAG,GACZ,EACrB,KAAC,kBAAkB,IAAC,EAAE,EAAE,GAAG,EAAE,oBAAoB,iCAC9C,CAAC,CAAC,8BAA8B,CAAC,GACf,EACrB,KAAC,kBAAkB,IAAC,EAAE,EAAE,GAAG,EAAE,yBAAyB,iCACnD,CAAC,CAAC,0BAA0B,EAAE,CAAC,KAAK,CAAC,CAAC,GACpB,IACpB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\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 { ForwardProps } from '../../types';\nimport {\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useUID,\n  useElement,\n  useDirection\n} from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu, { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { sameWidth } from '../Popover/modifiers';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox } from './ComboBox.styles';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\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      onResolveSuggestion,\n      onDropdownButtonClick: onDropdownButtonClickProp,\n      onClick,\n      onKeyDown,\n      menu,\n      ...restProps\n    } = props;\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 [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], 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 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 'Escape':\n          case 'Tab':\n            if (e.key === 'Escape') {\n              e.preventDefault();\n              if (open) e.stopPropagation();\n            }\n            setOpen(false);\n            toggleMenuDescendantsActive(false);\n            break;\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?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n        <Button\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        </Button>\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) => {\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    // 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        role='combobox'\n        aria-haspopup='listbox'\n        aria-expanded={!readOnly && !disabled && open}\n        aria-owns={\n          open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n        }\n      >\n        <ComboBoxInput\n          ref={inputRef}\n          role='searchbox'\n          aria-autocomplete='list'\n          aria-controls={\n            open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n          }\n          aria-describedby={ariaDescribedBy}\n          selected={selected?.items}\n          spellCheck={false}\n          {...{\n            id,\n            readOnly,\n            disabled,\n            onChange,\n            value,\n            mode,\n            status\n          }}\n          actions={inputActions}\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          show={open && menu !== undefined}\n          target={containerRef.current}\n          placement='bottom-start'\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['top-start']\n              }\n            },\n            sameWidth\n          ]}\n          // FIXME: Removed absolute strategy for mobile to avoid overflow issues.\n          strategy='fixed'\n          onMouseDown={(e: MouseEvent) => e.preventDefault()}\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            />\n          )}\n        </Popover>\n      </StyledComboBox>\n    );\n\n    return (\n      <>\n        {label ? (\n          <FormField\n            {...{\n              label,\n              labelHidden,\n              id,\n              info,\n              status,\n              required,\n              disabled,\n              onResolveSuggestion,\n              additionalInfo\n            }}\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('multiselect_instructions', [start])}\n        </VisuallyHiddenText>\n      </>\n    );\n  }\n);\n\nexport default ComboBox;\n"]}

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

@@ -1,3 +1,5 @@
 export declare const StyledSelectInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledComboBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>>, never>;
+export declare const StyledComboBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+}, never>;
 //# sourceMappingURL=ComboBox.styles.d.ts.map

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":"AAOA,eAAO,MAAM,iBAAiB,yGAmD5B,CAAC;AAIH,eAAO,MAAM,cAAc,sPASzB,CAAC"}
+{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,yGAsD5B,CAAC;AAIH,eAAO,MAAM,cAAc;;SASzB,CAAC"}

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

@@ -5,7 +5,10 @@ import { StyledFormControl } from '../FormControl';
 import { StyledPopover } from '../Popover';
 export const StyledSelectInput = styled.div(({ theme: { base, components } }) => {
     return css `
+    min-width: calc(${base['content-width'].xs} + ${base['hit-area']['mouse-min']});
+
     @media (pointer: coarse) {
+      min-width: calc(${base['content-width'].xs} + ${base['hit-area']['finger-min']});
       min-height: ${base['hit-area']['finger-min']};
     }
 
@@ -24,7 +27,7 @@ export const StyledSelectInput = styled.div(({ theme: { base, components } }) =>
       height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});
       color: ${components['form-control']['foreground-color']};
       text-overflow: ellipsis;
-      margin-inline-start: ${base.spacing};
+      margin-inline: ${base.spacing};
     }
 
     input,

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,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,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;;;;sBAI5B,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;;6BAEhC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;UAe/B,YAAY;;;;;;;UAOZ,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;;UAItE,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;GAG7E,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;;;MAGN,aAAa;;;;GAIhB,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 { StyledButton } from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\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    &: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      margin-inline-start: ${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    & > ${StyledButton} {\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(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n      border-end-start-radius: 0;\n      border-end-end-radius: calc(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n    }\n  `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n  return css`\n    border: 0;\n\n    ${StyledPopover} {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\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,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,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;sBACU,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;wBAGzD,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;oBAChE,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;sBAI5B,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;;uBAEtC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;UAezB,YAAY;;;;;;;UAOZ,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;;UAItE,IAAI,CAAC,eAAe,CAAC,MAAM,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC;;;GAG7E,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;;;MAGN,aAAa;;;;GAIhB,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 { StyledButton } from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n  return css`\n    min-width: calc(${base['content-width'].xs} + ${base['hit-area']['mouse-min']});\n\n    @media (pointer: coarse) {\n      min-width: calc(${base['content-width'].xs} + ${base['hit-area']['finger-min']});\n      min-height: ${base['hit-area']['finger-min']};\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      margin-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    & > ${StyledButton} {\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(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n      border-end-start-radius: 0;\n      border-end-end-radius: calc(\n        ${base['border-radius']} * ${components['form-control']['border-radius']}\n      );\n    }\n  `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n  return css`\n    border: 0;\n\n    ${StyledPopover} {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n  `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode } from 'react';
+import { ChangeEvent, ReactNode, Ref, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import type { NoChildrenProp } from '../../types';
 import { FormControlProps } from '../FormControl';
 import { MenuItemProps, MenuProps } from '../Menu/Menu.types';
@@ -53,6 +53,8 @@ export default interface ComboBoxProps extends NoChildrenProp {
      * Note, behavior will be enhanced in an upcoming release and the input will be the only focusable element.
      */
     onBlur?: (selected?: Selected | Selected[]) => void;
+    /** Callback fired when AI suggestion is accepted/rejected */
+    onResolveSuggestion?: FormControlProps['onResolveSuggestion'];
     /** Automatically focuses the input on render. */
     autoFocus?: boolean;
     /**
@@ -66,11 +68,19 @@ export default interface ComboBoxProps extends NoChildrenProp {
     onDropdownButtonClick?: (open: boolean) => void;
     /** Fired when user clicks on the Combobox input. */
     onClick?: (e: MouseEvent) => void;
+    /** Fired before running default component onKeyDown handler.
+     * Returning `false` from this function prevents default onKeyDown handling.
+     */
+    onKeyDown?: (e: ReactKeyboardEvent) => boolean | void;
     /** Action Buttons that will render within the input. */
     actions?: ReactNode;
     /** Menu related props. @see MenuProps */
     menu?: MenuProps;
     /** A visual which represents the selected item. */
     visual?: ReactNode;
+    /** Pass a heading and content to show additional information on the field. */
+    additionalInfo?: FormControlProps['additionalInfo'];
+    /** Reference to the element. */
+    ref?: Ref<HTMLDivElement>;
 }
 //# sourceMappingURL=ComboBox.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.types.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE9D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,cAAc;IAC3D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,uBAAuB;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IACxC,sFAAsF;IACtF,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;KAChC,CAAC;IACF,6CAA6C;IAC7C,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,KAAK,IAAI,CAAC;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB"}
+{"version":3,"file":"ComboBox.types.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.types.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEvent, ReactNode } from 'react';\n\nimport type { NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\nimport { MenuItemProps, MenuProps } from '../Menu/Menu.types';\n\nexport interface Selected {\n  id: string;\n  text: string;\n}\n\nexport default interface ComboBoxProps extends NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the component non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Placeholder text */\n  placeholder?: FormControlProps['placeholder'];\n  /**\n   * Whether it is single selection or multi selection combobox.\n   * @default 'single-select'\n   */\n  mode?: 'single-select' | 'multi-select';\n  /** Currently selected option, single for single-select, an array for multi-select. */\n  selected?: {\n    items?: Selected | Selected[];\n    onRemove?: (id: MenuItemProps['id'], index: number) => void;\n    onNew?: (text: string) => void;\n  };\n  /** Value of the combobox filtering input. */\n  value?: FormControlProps['value'];\n  /** Callback fired when the filtering input value changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Callback fired when the ComboBox input gains focus. */\n  onFocus?: (selected?: Selected | Selected[]) => void;\n  /**\n   * Callback fired when the ComboBox looses focus within its containing element.\n   * This is not specific to the input element.\n   * Note, behavior will be enhanced in an upcoming release and the input will be the only focusable element.\n   */\n  onBlur?: (selected?: Selected | Selected[]) => void;\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n  /**\n   * Fired when the user clicks on the dropdown icon to initiate opening the menu.\n   * If you want to offer default menu items without an input value, pass this function.\n   * This function can be an appropriate time to fetch menu item data.\n   * Remember to set the loading prop to true when when fetching data for an empty list.\n   *\n   * @param open value defining whether the click opens or closes the menu\n   */\n  onDropdownButtonClick?: (open: boolean) => void;\n  /** Fired when user clicks on the Combobox input. */\n  onClick?: (e: MouseEvent) => void;\n  /** Action Buttons that will render within the input. */\n  actions?: ReactNode;\n  /** Menu related props. @see MenuProps */\n  menu?: MenuProps;\n  /** A visual which represents the selected item. */\n  visual?: ReactNode;\n}\n"]}
+{"version":3,"file":"ComboBox.types.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEvent, ReactNode, Ref, KeyboardEvent as ReactKeyboardEvent } from 'react';\n\nimport type { NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\nimport { MenuItemProps, MenuProps } from '../Menu/Menu.types';\n\nexport interface Selected {\n  id: string;\n  text: string;\n}\n\nexport default interface ComboBoxProps extends NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the component non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Placeholder text */\n  placeholder?: FormControlProps['placeholder'];\n  /**\n   * Whether it is single selection or multi selection combobox.\n   * @default 'single-select'\n   */\n  mode?: 'single-select' | 'multi-select';\n  /** Currently selected option, single for single-select, an array for multi-select. */\n  selected?: {\n    items?: Selected | Selected[];\n    onRemove?: (id: MenuItemProps['id'], index: number) => void;\n    onNew?: (text: string) => void;\n  };\n  /** Value of the combobox filtering input. */\n  value?: FormControlProps['value'];\n  /** Callback fired when the filtering input value changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Callback fired when the ComboBox input gains focus. */\n  onFocus?: (selected?: Selected | Selected[]) => void;\n  /**\n   * Callback fired when the ComboBox looses focus within its containing element.\n   * This is not specific to the input element.\n   * Note, behavior will be enhanced in an upcoming release and the input will be the only focusable element.\n   */\n  onBlur?: (selected?: Selected | Selected[]) => void;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n  /**\n   * Fired when the user clicks on the dropdown icon to initiate opening the menu.\n   * If you want to offer default menu items without an input value, pass this function.\n   * This function can be an appropriate time to fetch menu item data.\n   * Remember to set the loading prop to true when when fetching data for an empty list.\n   *\n   * @param open value defining whether the click opens or closes the menu\n   */\n  onDropdownButtonClick?: (open: boolean) => void;\n  /** Fired when user clicks on the Combobox input. */\n  onClick?: (e: MouseEvent) => void;\n  /** Fired before running default component onKeyDown handler.\n   * Returning `false` from this function prevents default onKeyDown handling.\n   */\n  onKeyDown?: (e: ReactKeyboardEvent) => boolean | void;\n  /** Action Buttons that will render within the input. */\n  actions?: ReactNode;\n  /** Menu related props. @see MenuProps */\n  menu?: MenuProps;\n  /** A visual which represents the selected item. */\n  visual?: ReactNode;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Reference to the element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react';
 import { BaseProps, ForwardProps } from '../../types';
 import { MenuItemProps } from '../Menu/Menu.types';
+import type { MultiSelectInputProps } from './MultiSelectInput/MultiSelectInput.types';
 import ComboBoxProps, { Selected } from './ComboBox.types';
 interface ComboBoxInputProps extends BaseProps {
     mode?: 'multi-select' | 'single-select';
@@ -8,6 +9,12 @@ interface ComboBoxInputProps extends BaseProps {
     value?: ComboBoxProps['value'];
     visual?: ComboBoxProps['visual'];
     onRemove?: (id: MenuItemProps['id'], index: number) => void;
+    /** Callback on selected item pseudo focus */
+    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":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAInD,OAAO,aAAa,EAAE,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE3D,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IACxC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;IACjC,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;CAC7D;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ComboBoxInput.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAInD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,aAAa,EAAE,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE3D,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IACxC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;IACjC,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,CAqCvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ComboBox/ComboBoxInput.js

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

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,EAA2C,MAAM,OAAO,CAAC;AAK5E,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,gBAAgB,MAAM,qCAAqC,CAAC;AAWnE,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA0B,EAAE,EAAE;IACzE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExE,OAAO,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CAC/B,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAsB,EAChC,KAAK,EAAE,KAAK,KACR;YACF,GAAG;YACH,QAAQ;SACT,KACG,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, FunctionComponent, Ref, PropsWithoutRef } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { MenuItemProps } from '../Menu/Menu.types';\n\nimport SingleSelectInput from './SingleSelectInput/SingleSelectInput';\nimport MultiSelectInput from './MultiSelectInput/MultiSelectInput';\nimport ComboBoxProps, { Selected } from './ComboBox.types';\n\ninterface ComboBoxInputProps extends BaseProps {\n  mode?: 'multi-select' | 'single-select';\n  selected?: Selected | Selected[];\n  value?: ComboBoxProps['value'];\n  visual?: ComboBoxProps['visual'];\n  onRemove?: (id: MenuItemProps['id'], index: number) => void;\n}\n\nconst ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ComboBoxInputProps>, ref: Ref<HTMLInputElement>) => {\n    const { value, mode, selected, visual, onRemove, ...restProps } = props;\n\n    return mode === 'multi-select' ? (\n      <MultiSelectInput\n        selected={selected as Selected[]}\n        value={value}\n        {...{\n          ref,\n          onRemove\n        }}\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,EAA2C,MAAM,OAAO,CAAC;AAK5E,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,gBAAgB,MAAM,qCAAqC,CAAC;AAkBnE,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA0B,EAAE,EAAE;IACzE,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,KACR;YACF,GAAG;YACH,QAAQ;YACR,cAAc;YACd,eAAe;YACf,yBAAyB;SAC1B,KACG,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, FunctionComponent, Ref, PropsWithoutRef } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { MenuItemProps } from '../Menu/Menu.types';\n\nimport SingleSelectInput from './SingleSelectInput/SingleSelectInput';\nimport MultiSelectInput from './MultiSelectInput/MultiSelectInput';\nimport type { MultiSelectInputProps } from './MultiSelectInput/MultiSelectInput.types';\nimport ComboBoxProps, { Selected } from './ComboBox.types';\n\ninterface ComboBoxInputProps extends BaseProps {\n  mode?: 'multi-select' | 'single-select';\n  selected?: Selected | Selected[];\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  (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        {...{\n          ref,\n          onRemove,\n          onSelectedBlur,\n          onSelectedFocus,\n          pauseDescendantEvaluation\n        }}\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.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGAUjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA2G7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGA4BjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA+N7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}