@pega/cosmos-react-core 2.0.0-dev.2.1 → 2.0.0-dev.20.0

package/lib/components/ColorPicker/ColorPicker.js

@@ -1,4 +1,5 @@
-import React, { forwardRef, useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { hideVisually } from 'polished';
 import { ChromePicker } from 'react-color';
@@ -73,14 +74,16 @@ const StyledColorPicker = styled.div(({ theme, swatchOnly }) => {
     `;
 });
 StyledColorPicker.defaultProps = defaultThemeProp;
-const ColorPicker = forwardRef(({ id = useUID(), value = '#000000', label, info, disabled, status, required, readOnly, labelHidden, swatchOnly = false, alpha = false, inline, onClick, onChange, onBeforeClose, ...restProps }, ref) => {
+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 inputRef = useConsolidatedRef(ref);
     const maskedSwatchRef = useConsolidatedRef();
     const [popoverEl, setPopoverEl] = useElement(null);
     const [showPopOver, setShowPopOver] = useState(false);
     const hidePopover = () => {
         if (showPopOver) {
-            onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose();
+            onBeforeClose?.();
         }
         setShowPopOver(false);
     };
@@ -93,32 +96,24 @@ const ColorPicker = forwardRef(({ id = useUID(), value = '#000000', label, info,
     useOuterEvent('mousedown', [popoverEl], hidePopover);
     useEffect(() => {
         document.addEventListener('keydown', closePopover);
-        popoverEl === null || popoverEl === void 0 ? void 0 : popoverEl.addEventListener('keydown', closePopover);
+        popoverEl?.addEventListener('keydown', closePopover);
         return () => {
             document.removeEventListener('keydown', closePopover);
-            popoverEl === null || popoverEl === void 0 ? void 0 : popoverEl.removeEventListener('keydown', closePopover);
+            popoverEl?.removeEventListener('keydown', closePopover);
         };
     }, [popoverEl]);
     useEffect(() => {
         if (showPopOver) {
-            popoverEl === null || popoverEl === void 0 ? void 0 : popoverEl.focus();
+            popoverEl?.focus();
         }
     }, [showPopOver]);
-    return (React.createElement(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 },
-        React.createElement(Flex, { container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, onClick: () => {
-                setShowPopOver(true);
-            } },
-            React.createElement("input", { ...restProps, id: id, type: readOnly ? undefined : 'color', ref: inputRef, defaultValue: value, disabled: disabled, required: required, readOnly: readOnly, onClick: e => {
-                    e.preventDefault();
-                    if (readOnly)
+    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 => {
                         e.preventDefault();
-                } }),
-            React.createElement("div", { style: { backgroundColor: value }, ref: maskedSwatchRef }),
-            !swatchOnly && value,
-            React.createElement(Popover, { placement: 'bottom-start', style: { zIndex: '3000' }, show: showPopOver, ref: setPopoverEl, groupId: 'popover', target: maskedSwatchRef.current },
-                React.createElement(ChromePicker, { disableAlpha: !alpha, color: value, onChange: (color, e) => {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(color, e);
-                    } })))));
+                        if (readOnly)
+                            e.preventDefault();
+                    } }, void 0), _jsx("div", { style: { backgroundColor: value }, ref: maskedSwatchRef }, void 0), !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);
+                        } }, void 0) }, void 0)] }, void 0) }, void 0));
 });
 export default ColorPicker;
 //# sourceMappingURL=ColorPicker.js.map

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 React, {\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, 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 {\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  (\n    {\n      id = useUID(),\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    }: PropsWithoutRef<ColorPickerProps>,\n    ref: ColorPickerProps['ref']\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={() => {\n            setShowPopOver(true);\n          }}\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, 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 {\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"]}

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

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
 import ComboBoxProps from './ComboBox.types';
-export declare const StyledComboBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<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("../../types").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>>, never>;
 declare const ComboBox: FunctionComponent<ComboBoxProps & ForwardProps>;
 export default ComboBox;
 //# sourceMappingURL=ComboBox.d.ts.map

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,OAAc,EAEZ,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAS3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AA0B7C,eAAO,MAAM,cAAc,gOAO1B,CAAC;AAMF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyL7D,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;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AA+B7C,eAAO,MAAM,cAAc,4PAO1B,CAAC;AAQF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA8L7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/ComboBox/ComboBox.js

@@ -1,18 +1,27 @@
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { hideVisually } from 'polished';
-import Icon from '../Icon';
+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 Popover, { StyledPopover } from '../Popover';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import Menu from '../Menu';
 import Button from '../Button';
+import { navigatorIsAvailable } from '../../utils';
+import menuHelpers from '../Menu/helpers';
 import ComboBoxInput from './ComboBoxInput';
+registerIcon(caretDownIcon, caretUpIcon);
 const popoverModifiers = [
     {
         name: 'flip',
-        enabled: true
+        enabled: true,
+        options: {
+            fallbackPlacements: ['top-start']
+        }
     },
     {
         name: 'preventOverflow',
@@ -43,7 +52,10 @@ export const StyledComboBox = styled(StyledFormControl) `
 const StyledAriaDescription = styled.p `
   ${hideVisually}
 `;
-const ComboBox = forwardRef(({ value, required, id = useUID(), label, labelHidden, info, status, readOnly, disabled, mode = 'single-select', selected, onChange, actions, onFocus, onBlur, onDropdownButtonClick: onDropdownButtonClickProp, onClick, menu, ...restProps }, ref) => {
+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 t = useI18n();
     const inputRef = useRef(null);
     const [open, setOpen] = useState(false);
@@ -55,10 +67,16 @@ const ComboBox = forwardRef(({ value, required, id = useUID(), label, labelHidde
     useFocusWithin([containerRef], focused => {
         if (!focused) {
             setOpen(false);
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(selected === null || selected === void 0 ? void 0 : selected.items);
+            onBlur?.(selected?.items);
+        }
+        else {
+            onFocus?.(selected?.items);
+            if (isMobile) {
+                setTimeout(() => {
+                    containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }, 150); // delay it to let keyboard expand first
+            }
         }
-        else
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(selected === null || selected === void 0 ? void 0 : selected.items);
     });
     const onInputKeyDown = useCallback((e) => {
         if (!menu || readOnly)
@@ -79,19 +97,17 @@ const ComboBox = forwardRef(({ value, required, id = useUID(), label, labelHidde
         }
     }, [open, readOnly, menu, value]);
     const onDropdownButtonClick = useCallback(() => {
-        onDropdownButtonClickProp === null || onDropdownButtonClickProp === void 0 ? void 0 : onDropdownButtonClickProp(!open);
+        onDropdownButtonClickProp?.(!open);
         setOpen(!open);
     }, [open, onDropdownButtonClickProp]);
     const dropdownButton = useMemo(() => {
-        var _a;
-        return (((_a = menu === null || menu === void 0 ? void 0 : menu.items) === null || _a === void 0 ? void 0 : _a.length) || onDropdownButtonClickProp || !onChange) && !readOnly ? (React.createElement(Button, { "aria-label": t(open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'), icon: true, variant: 'simple', onClick: onDropdownButtonClick, disabled: disabled, tabIndex: '-1' },
-            React.createElement(Icon, { name: open ? 'caret-up' : 'caret-down' }))) : null;
+        return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (_jsx(Button, { "aria-label": t(open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'), icon: true, variant: 'simple', onClick: onDropdownButtonClick, disabled: disabled, tabIndex: '-1', children: _jsx(Icon, { name: open ? 'caret-up' : 'caret-down' }, void 0) }, void 0)) : null;
     }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);
     const onInputClick = useCallback((e) => {
         if (readOnly)
             return;
         setOpen(true);
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        onClick?.(e);
     }, [readOnly, onClick]);
     useEffect(() => {
         if (menu && value && value.length > 0) {
@@ -100,34 +116,26 @@ const ComboBox = forwardRef(({ value, required, id = useUID(), label, labelHidde
     }, [menu, value]);
     // 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 = (React.createElement(React.Fragment, null,
-        dropdownButton,
-        actions));
-    const Comp = (React.createElement(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox` },
-        React.createElement(ComboBoxInput, { ref: inputRef, role: 'combobox', "aria-haspopup": 'listbox', "aria-owns": menuComponentId, "aria-expanded": !readOnly && !disabled && open, "aria-autocomplete": 'list', "aria-controls": menuComponentId, "aria-describedby": `${id}-inputDescription`, selected: selected === null || selected === void 0 ? void 0 : selected.items, spellCheck: false, ...{
-                id,
-                readOnly,
-                disabled,
-                onChange,
-                value,
-                mode,
-                status
-            }, actions: inputActions, onRemove: selected === null || selected === void 0 ? void 0 : selected.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, ...restProps }),
-        React.createElement(StyledAriaDescription, { id: `${id}-inputDescription` },
-            t('combobox_open_close'),
-            !!onChange && ` ${t('combobox_search_instructions')}`),
-        React.createElement(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: popoverModifiers, strategy: 'fixed', onMouseDown: (e) => e.preventDefault() }, menu && (React.createElement(Menu, { ref: menuRef, id: menuComponentId, role: 'listbox', mode: mode, ...menu, items: menu.items, focusControlEl: inputRef.current || undefined, onItemClick: (itemId, e) => {
-                var _a, _b;
-                if (mode === 'single-select') {
-                    setOpen(false);
-                }
-                (_a = menu === null || menu === void 0 ? void 0 : menu.onItemClick) === null || _a === void 0 ? void 0 : _a.call(menu, itemId, e);
-                const clickedItem = menu.items.find(item => item.id === itemId);
-                if ((clickedItem === null || clickedItem === void 0 ? void 0 : clickedItem.primary) && !(clickedItem === null || clickedItem === void 0 ? void 0 : clickedItem.selected)) {
-                    (_b = selected === null || selected === void 0 ? void 0 : selected.onNew) === null || _b === void 0 ? void 0 : _b.call(selected, clickedItem === null || clickedItem === void 0 ? void 0 : clickedItem.primary);
-                }
-            }, arrowNavigationUnsupported: true })))));
-    return label ? (React.createElement(FormField, { ...{ label, labelHidden, id, info, status, required, disabled } }, Comp)) : (Comp);
+    const inputActions = (_jsxs(_Fragment, { children: [dropdownButton, actions] }, void 0));
+    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": `${id}-inputDescription`, selected: selected?.items, spellCheck: false, ...{
+                    id,
+                    readOnly,
+                    disabled,
+                    onChange,
+                    value,
+                    mode,
+                    status
+                }, actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, ...restProps }, void 0), _jsxs(StyledAriaDescription, { id: `${id}-inputDescription`, children: [t('combobox_open_close'), !!onChange && ` ${t('combobox_search_instructions')}`] }, void 0), _jsx(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: popoverModifiers, 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) => {
+                        if (mode === 'single-select') {
+                            setOpen(false);
+                        }
+                        menu.onItemClick?.(itemId, e);
+                        const clickedItem = menuHelpers.getItem(menu.items, itemId);
+                        if (clickedItem?.primary && !clickedItem?.selected) {
+                            selected?.onNew?.(clickedItem?.primary);
+                        }
+                    }, arrowNavigationUnsupported: true }, void 0)) }, void 0)] }, void 0));
+    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp }, void 0)) : (Comp);
 });
 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 React, {\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';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport Icon from '../Icon';\nimport { ForwardProps } from '../../types';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover, { PopoverProps, StyledPopover } from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport Button from '../Button';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\n\nconst popoverModifiers: PopoverProps['modifiers'] = [\n  {\n    name: 'flip',\n    enabled: true\n  },\n  {\n    name: 'preventOverflow',\n    enabled: true\n  },\n  {\n    name: 'hide',\n    enabled: false\n  },\n  {\n    name: 'sameWidth',\n    enabled: true,\n    phase: 'beforeWrite',\n    fn({ state }) {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    },\n    requires: ['computeStyles']\n  }\n];\n\nexport const StyledComboBox = styled(StyledFormControl)`\n  border: 0;\n\n  & ${StyledPopover} {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n`;\n\nconst StyledAriaDescription = styled.p`\n  ${hideVisually}\n`;\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      required,\n      id = useUID(),\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    }: PropsWithoutRef<ComboBoxProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState<boolean>(false);\n    const menuRef = useRef<HTMLDivElement>(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(ref, setContainerEl);\n\n    useFocusWithin([containerRef], focused => {\n      if (!focused) {\n        setOpen(false);\n        onBlur?.(selected?.items);\n      } else onFocus?.(selected?.items);\n    });\n\n    const onInputKeyDown = useCallback(\n      (e: ReactKeyboardEvent<HTMLInputElement>) => {\n        if (!menu || readOnly) return;\n        switch (e.key) {\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          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 (menu && value && value.length > 0) {\n        setOpen(true);\n      }\n    }, [menu, value]);\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-owns={menuComponentId}\n          aria-expanded={!readOnly && !disabled && open}\n          aria-autocomplete='list'\n          aria-controls={menuComponentId}\n          aria-describedby={`${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          {...restProps}\n        />\n\n        <StyledAriaDescription id={`${id}-inputDescription`}>\n          {t('combobox_open_close')}\n          {!!onChange && ` ${t('combobox_search_instructions')}`}\n        </StyledAriaDescription>\n\n        <Popover\n          show={open && menu !== undefined}\n          target={containerRef.current}\n          placement='bottom-start'\n          modifiers={popoverModifiers}\n          strategy='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 = menu.items.find(item => item.id === 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":"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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';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\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, { PopoverProps, StyledPopover } from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst popoverModifiers: PopoverProps['modifiers'] = [\n  {\n    name: 'flip',\n    enabled: true,\n    options: {\n      fallbackPlacements: ['top-start']\n    }\n  },\n  {\n    name: 'preventOverflow',\n    enabled: true\n  },\n  {\n    name: 'hide',\n    enabled: false\n  },\n  {\n    name: 'sameWidth',\n    enabled: true,\n    phase: 'beforeWrite',\n    fn({ state }) {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    },\n    requires: ['computeStyles']\n  }\n];\n\nexport const StyledComboBox = styled(StyledFormControl)`\n  border: 0;\n\n  & ${StyledPopover} {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n`;\n\nconst StyledAriaDescription = styled.p`\n  ${hideVisually}\n`;\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<boolean>(false);\n    const menuRef = useRef<HTMLDivElement>(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    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 '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          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 (menu && value && value.length > 0) {\n        setOpen(true);\n      }\n    }, [menu, value]);\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={`${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          {...restProps}\n        />\n\n        <StyledAriaDescription id={`${id}-inputDescription`}>\n          {t('combobox_open_close')}\n          {!!onChange && ` ${t('combobox_search_instructions')}`}\n        </StyledAriaDescription>\n\n        <Popover\n          show={open && menu !== undefined}\n          target={containerRef.current}\n          placement='bottom-start'\n          modifiers={popoverModifiers}\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"]}

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,OAAc,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAEnF,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,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,CAkBvE,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,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,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,CAkBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ComboBox/ComboBoxInput.js

@@ -1,12 +1,13 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import SingleSelectInput from './SingleSelectInput/SingleSelectInput';
 import MultiSelectInput from './MultiSelectInput/MultiSelectInput';
 const ComboBoxInput = forwardRef((props, ref) => {
     const { value, mode, selected, onRemove, ...restProps } = props;
-    return mode === 'multi-select' ? (React.createElement(MultiSelectInput, { selected: selected, value: value, ...{
+    return mode === 'multi-select' ? (_jsx(MultiSelectInput, { selected: selected, value: value, ...{
             ref,
             onRemove
-        }, ...restProps })) : (React.createElement(SingleSelectInput, { ref: ref, selected: selected, value: value, ...restProps }));
+        }, ...restProps }, void 0)) : (_jsx(SingleSelectInput, { ref: ref, selected: selected, value: value, ...restProps }, void 0));
 });
 export default ComboBoxInput;
 //# sourceMappingURL=ComboBoxInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxInput.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAKnF,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,gBAAgB,MAAM,qCAAqC,CAAC;AAUnE,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA0B,EAAE,EAAE;IACzE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEhE,OAAO,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CAC/B,oBAAC,gBAAgB,IACf,QAAQ,EAAE,QAAsB,EAChC,KAAK,EAAE,KAAK,KACR;YACF,GAAG;YACH,QAAQ;SACT,KACG,SAAS,GACb,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAoB,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,GAAI,CAC7F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React, { 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  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, 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 ref={ref} selected={selected as Selected} value={value} {...restProps} />\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;AAUnE,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA0B,EAAE,EAAE;IACzE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEhE,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,WACb,CACH,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAoB,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,WAAI,CAC7F,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  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, 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 ref={ref} selected={selected as Selected} value={value} {...restProps} />\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,OAAc,EACZ,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,iBAAiB,4HAyD5B,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA0G7E,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,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,iBAAiB,4HA4D5B,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAqG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js

@@ -1,17 +1,21 @@
-import React, { forwardRef, useRef, useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../../theme';
 import Selectable, { StyledSelectable } from '../../Badges/Selection';
 import { StyledFormControl } from '../../FormControl';
 import Flex from '../../Flex';
-import { useArrows, useConsolidatedRef, useTheme } from '../../../hooks';
+import { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';
+import { cap } from '../../../utils';
 import { StyledButton } from '../../Button';
 export const StyledMultiSelect = styled.div(props => {
     const { theme: { components: { 'form-control': formControl, input: { height } }, base } } = props;
     return css `
     min-height: ${height};
-    max-height: 4.75rem;
-    overflow: auto;
+
+    @media (pointer: coarse) {
+      min-height: ${base['hit-area']['finger-min']};
+    }
 
     &:focus-within {
       border-color: ${formControl[':focus']['border-color']};
@@ -28,6 +32,7 @@ export const StyledMultiSelect = styled.div(props => {
 
     input {
       min-width: 0;
+      width: 100%;
       color: ${formControl['foreground-color']};
       text-overflow: ellipsis;
       margin-inline-start: ${base.spacing};
@@ -61,54 +66,40 @@ const MultiSelectInput = forwardRef((props, ref) => {
     const inputRef = useConsolidatedRef(ref);
     const listRef = useRef(null);
     useArrows(listRef, { selector: 'div[role="button"], input', cycle: false, dir: 'left-right' });
-    const theme = useTheme();
     const onInputKeyDown = useCallback((e) => {
         const lastIndex = selected.length - 1;
-        switch (e.key) {
-            case 'Backspace':
-                if (!value && selected.length > 0)
-                    onRemove === null || onRemove === void 0 ? void 0 : onRemove(selected[lastIndex].id, lastIndex);
-                break;
-            default:
+        if (e.key === 'Backspace' && !value && selected.length > 0) {
+            onRemove?.(selected[lastIndex].id, lastIndex);
         }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        onKeyDown?.(e);
     }, [onKeyDown, value, selected]);
-    return (React.createElement(Flex, { as: StyledMultiSelect, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, ...{
+    const { end } = useDirection();
+    return (_jsxs(Flex, { as: StyledMultiSelect, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, ...{
             readOnly,
             disabled,
             status
-        } },
-        React.createElement(Flex, { ref: listRef, as: 'ul', item: { grow: 1 }, container: { alignItems: 'center', wrap: 'wrap' }, onBlur: () => {
-                var _a;
-                (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('div[role="button"]').forEach(el => {
-                    el.tabIndex = -1;
-                });
-                if (inputRef.current)
-                    inputRef.current.tabIndex = 0;
-            } },
-            selected.map((element, idx) => {
-                return (React.createElement("li", { key: element.id },
-                    React.createElement(Selectable, { id: element.id.toString(), disabled: readOnly || disabled, status: status, onRemove: id => {
-                            var _a;
-                            onRemove === null || onRemove === void 0 ? void 0 : onRemove(id, idx);
-                            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                        }, onKeyDown: (e) => {
-                            var _a;
-                            // prevent browser's Back on FF
-                            if (e.key === 'Backspace')
-                                e.preventDefault();
-                            if (idx === selected.length - 1 &&
-                                e.key === `Arrow${theme.base.rtl ? 'Left' : 'Right'}`)
-                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                        } }, element.text)));
-            }),
-            React.createElement(Flex, { as: 'li', item: { grow: 1 }, container: true },
-                React.createElement("input", { ref: inputRef, value: value, 
-                    // noop avoids react uncontrolled warning
-                    onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, placeholder: (selected === null || selected === void 0 ? void 0 : selected.length) ? undefined : placeholder, autoComplete: 'off', 
-                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                    autoFocus: autoFocus, ...restProps }))),
-        actions));
+        }, children: [_jsxs(Flex, { ref: listRef, as: 'ul', item: { grow: 1 }, container: { alignItems: 'center', wrap: 'wrap' }, onBlur: () => {
+                    listRef.current?.querySelectorAll('div[role="button"]').forEach(el => {
+                        el.tabIndex = -1;
+                    });
+                    if (inputRef.current)
+                        inputRef.current.tabIndex = 0;
+                }, children: [selected.map((element, idx) => {
+                        return (_jsx("li", { children: _jsx(Selectable, { id: element.id.toString(), disabled: readOnly || disabled, status: status, onRemove: id => {
+                                    onRemove?.(id, idx);
+                                    inputRef.current?.focus();
+                                }, onKeyDown: (e) => {
+                                    // prevent browser's Back on FF
+                                    if (e.key === 'Backspace')
+                                        e.preventDefault();
+                                    if (idx === selected.length - 1 && e.key === `Arrow${cap(end)}`)
+                                        inputRef.current?.focus();
+                                }, children: element.text }, void 0) }, element.id));
+                    }), _jsx(Flex, { as: 'li', item: { grow: 1 }, container: true, children: _jsx("input", { size: 5, ref: inputRef, value: value, 
+                            // no-op avoids react uncontrolled warning
+                            onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, placeholder: selected?.length ? undefined : placeholder, autoComplete: 'off', 
+                            // eslint-disable-next-line jsx-a11y/no-autofocus
+                            autoFocus: autoFocus, ...restProps }, void 0) }, void 0)] }, void 0), actions] }, void 0));
 });
 export default MultiSelectInput;
 //# sourceMappingURL=MultiSelectInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  KeyboardEvent,\n  useRef,\n  useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { useArrows, useConsolidatedRef, useTheme } from '../../../hooks';\nimport { StyledButton } from '../../Button';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelect = styled.div<MultiSelectInputProps>(props => {\n  const {\n    theme: {\n      components: {\n        'form-control': formControl,\n        input: { height }\n      },\n      base\n    }\n  } = props;\n\n  return css`\n    min-height: ${height};\n    max-height: 4.75rem;\n    overflow: auto;\n\n    &:focus-within {\n      border-color: ${formControl[':focus']['border-color']};\n      box-shadow: ${formControl[':focus']['box-shadow']};\n    }\n\n    &:hover:not([readonly]):not([disabled]):focus-within {\n      border-color: transparent;\n    }\n\n    ul {\n      list-style: none;\n    }\n\n    input {\n      min-width: 0;\n      color: ${formControl['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    ${StyledSelectable} {\n      margin: calc(0.25 * ${base.spacing});\n    }\n\n    > ${StyledButton} {\n      border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});\n      height: calc(${height} - 2 * ${formControl['border-width']});\n    }\n  `;\n});\n\nStyledMultiSelect.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      selected = [],\n      value,\n      onRemove,\n      onChange,\n      onKeyDown,\n      actions,\n      readOnly,\n      disabled,\n      status,\n      placeholder,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const listRef = useRef<HTMLUListElement>(null);\n    useArrows(listRef, { selector: 'div[role=\"button\"], input', cycle: false, dir: 'left-right' });\n\n    const theme = useTheme();\n\n    const onInputKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        const lastIndex = selected.length - 1;\n        switch (e.key) {\n          case 'Backspace':\n            if (!value && selected.length > 0) onRemove?.(selected[lastIndex].id, lastIndex);\n            break;\n          default:\n        }\n        onKeyDown?.(e);\n      },\n      [onKeyDown, value, selected]\n    );\n\n    return (\n      <Flex\n        as={StyledMultiSelect}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center' }}\n        {...{\n          readOnly,\n          disabled,\n          status\n        }}\n      >\n        <Flex\n          ref={listRef}\n          as='ul'\n          item={{ grow: 1 }}\n          container={{ alignItems: 'center', wrap: 'wrap' }}\n          onBlur={() => {\n            listRef.current?.querySelectorAll<HTMLElement>('div[role=\"button\"]').forEach(el => {\n              el.tabIndex = -1;\n            });\n            if (inputRef.current) inputRef.current.tabIndex = 0;\n          }}\n        >\n          {selected.map((element, idx) => {\n            return (\n              <li key={element.id}>\n                <Selectable\n                  id={element.id.toString()}\n                  disabled={readOnly || disabled}\n                  status={status}\n                  onRemove={id => {\n                    onRemove?.(id, idx);\n                    inputRef.current?.focus();\n                  }}\n                  onKeyDown={(e: KeyboardEvent<Element>) => {\n                    // prevent browser's Back on FF\n                    if (e.key === 'Backspace') e.preventDefault();\n                    if (\n                      idx === selected.length - 1 &&\n                      e.key === `Arrow${theme.base.rtl ? 'Left' : 'Right'}`\n                    )\n                      inputRef.current?.focus();\n                  }}\n                >\n                  {element.text}\n                </Selectable>\n              </li>\n            );\n          })}\n          <Flex as='li' item={{ grow: 1 }} container>\n            <input\n              ref={inputRef}\n              value={value}\n              // noop avoids react uncontrolled warning\n              onChange={onChange || (() => {})}\n              onKeyDown={onInputKeyDown}\n              readOnly={readOnly || !onChange}\n              placeholder={selected?.length ? undefined : placeholder}\n              autoComplete='off'\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...restProps}\n            />\n          </Flex>\n        </Flex>\n        {actions}\n      </Flex>\n    );\n  }\n);\n\nexport default MultiSelectInput;\n"]}
+{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  KeyboardEvent,\n  useRef,\n  useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';\nimport { cap } from '../../../utils';\nimport { StyledButton } from '../../Button';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelect = styled.div<MultiSelectInputProps>(props => {\n  const {\n    theme: {\n      components: {\n        'form-control': formControl,\n        input: { height }\n      },\n      base\n    }\n  } = props;\n\n  return css`\n    min-height: ${height};\n\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n\n    &:focus-within {\n      border-color: ${formControl[':focus']['border-color']};\n      box-shadow: ${formControl[':focus']['box-shadow']};\n    }\n\n    &:hover:not([readonly]):not([disabled]):focus-within {\n      border-color: transparent;\n    }\n\n    ul {\n      list-style: none;\n    }\n\n    input {\n      min-width: 0;\n      width: 100%;\n      color: ${formControl['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    ${StyledSelectable} {\n      margin: calc(0.25 * ${base.spacing});\n    }\n\n    > ${StyledButton} {\n      border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});\n      height: calc(${height} - 2 * ${formControl['border-width']});\n    }\n  `;\n});\n\nStyledMultiSelect.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const {\n      selected = [],\n      value,\n      onRemove,\n      onChange,\n      onKeyDown,\n      actions,\n      readOnly,\n      disabled,\n      status,\n      placeholder,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const listRef = useRef<HTMLUListElement>(null);\n    useArrows(listRef, { selector: 'div[role=\"button\"], input', cycle: false, dir: 'left-right' });\n\n    const onInputKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        const lastIndex = selected.length - 1;\n        if (e.key === 'Backspace' && !value && selected.length > 0) {\n          onRemove?.(selected[lastIndex].id, lastIndex);\n        }\n        onKeyDown?.(e);\n      },\n      [onKeyDown, value, selected]\n    );\n\n    const { end } = useDirection();\n\n    return (\n      <Flex\n        as={StyledMultiSelect}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center' }}\n        {...{\n          readOnly,\n          disabled,\n          status\n        }}\n      >\n        <Flex\n          ref={listRef}\n          as='ul'\n          item={{ grow: 1 }}\n          container={{ alignItems: 'center', wrap: 'wrap' }}\n          onBlur={() => {\n            listRef.current?.querySelectorAll<HTMLElement>('div[role=\"button\"]').forEach(el => {\n              el.tabIndex = -1;\n            });\n            if (inputRef.current) inputRef.current.tabIndex = 0;\n          }}\n        >\n          {selected.map((element, idx) => {\n            return (\n              <li key={element.id}>\n                <Selectable\n                  id={element.id.toString()}\n                  disabled={readOnly || disabled}\n                  status={status}\n                  onRemove={id => {\n                    onRemove?.(id, idx);\n                    inputRef.current?.focus();\n                  }}\n                  onKeyDown={(e: KeyboardEvent<Element>) => {\n                    // prevent browser's Back on FF\n                    if (e.key === 'Backspace') e.preventDefault();\n                    if (idx === selected.length - 1 && e.key === `Arrow${cap(end)}`)\n                      inputRef.current?.focus();\n                  }}\n                >\n                  {element.text}\n                </Selectable>\n              </li>\n            );\n          })}\n          <Flex as='li' item={{ grow: 1 }} container>\n            <input\n              size={5}\n              ref={inputRef}\n              value={value}\n              // no-op avoids react uncontrolled warning\n              onChange={onChange || (() => {})}\n              onKeyDown={onInputKeyDown}\n              readOnly={readOnly || !onChange}\n              placeholder={selected?.length ? undefined : placeholder}\n              autoComplete='off'\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...restProps}\n            />\n          </Flex>\n        </Flex>\n        {actions}\n      </Flex>\n    );\n  }\n);\n\nexport default MultiSelectInput;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAMnF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAsD/D,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAiC/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SingleSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AA2D/D,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAiC/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}