@pega/cosmos-react-core 2.2.1 → 2.2.4

package/lib/components/ComboBox/ComboBox.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Icon, { registerIcon } from '../Icon';
+import * as caretDownIcon from '../Icon/icons/caret-down.icon';
+import * as caretUpIcon from '../Icon/icons/caret-up.icon';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+import { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';
+import Popover 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 { sameWidth } from '../Popover/modifiers';
+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 t = useI18n();
+    const inputRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const menuRef = useRef(null);
+    const menuComponentId = `${id}-listbox`;
+    // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.
+    const [, setContainerEl] = useElement();
+    const containerRef = useConsolidatedRef(ref, setContainerEl);
+    const focus = useFocusWithin([containerRef], focused => {
+        if (!focused) {
+            setOpen(false);
+            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
+            }
+        }
+    });
+    const onInputKeyDown = useCallback((e) => {
+        if (!menu || readOnly)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!open)
+                    setOpen(true);
+                break;
+            case 'Escape':
+                e.preventDefault();
+                if (open)
+                    e.stopPropagation();
+                setOpen(false);
+                break;
+            default:
+        }
+    }, [open, readOnly, menu, value]);
+    const onDropdownButtonClick = useCallback(() => {
+        onDropdownButtonClickProp?.(!open);
+        setOpen(!open);
+    }, [open, onDropdownButtonClickProp]);
+    const dropdownButton = useMemo(() => {
+        return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (_jsx(Button, { "aria-hidden": 'true', "aria-label": t(open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'), icon: true, variant: 'simple', onClick: onDropdownButtonClick, onMouseDown: (e) => {
+                e.preventDefault();
+                inputRef.current?.focus();
+            }, 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?.(e);
+    }, [readOnly, onClick]);
+    useEffect(() => {
+        if (focus && menu && value && value.length > 0) {
+            setOpen(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] }, 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), _jsx(VisuallyHiddenText, { 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: [
+                    {
+                        name: 'flip',
+                        options: {
+                            fallbackPlacements: ['top-start']
+                        }
+                    },
+                    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) => {
+                        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

@@ -0,0 +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 VisuallyHiddenText from '../VisuallyHiddenText';\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 '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-hidden='true'\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={`${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        <VisuallyHiddenText id={`${id}-inputDescription`}>\n          {`${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : ''}\n        </VisuallyHiddenText>\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"]}

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

@@ -0,0 +1,3 @@
+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>;
+//# sourceMappingURL=ComboBox.styles.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,70 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import { StyledButton } from '../Button';
+import { StyledFormControl } from '../FormControl';
+import { StyledPopover } from '../Popover';
+export const StyledSelectInput = styled.div(({ theme: { base, components } }) => {
+    return css `
+    @media (pointer: coarse) {
+      min-height: ${base['hit-area']['finger-min']};
+    }
+
+    &:focus-within {
+      border-color: ${components['form-control'][':focus']['border-color']};
+      box-shadow: ${components['form-control'][':focus']['box-shadow']};
+    }
+
+    &:hover:not([readonly]):not([disabled]):focus-within {
+      border-color: transparent;
+    }
+
+    input {
+      min-width: 0;
+      width: 100%;
+      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};
+    }
+
+    input,
+    input:focus {
+      border: none;
+      outline: none;
+      flex-grow: 1;
+      background-color: transparent;
+
+      &:read-only {
+        cursor: default;
+      }
+    }
+
+    & > ${StyledButton} {
+      align-self: stretch;
+      height: auto;
+      margin-block: -0.0625rem;
+      margin-inline-end: -0.0625rem;
+      border-start-start-radius: 0;
+      border-start-end-radius: calc(
+        ${base['border-radius']} * ${components['form-control']['border-radius']}
+      );
+      border-end-start-radius: 0;
+      border-end-end-radius: calc(
+        ${base['border-radius']} * ${components['form-control']['border-radius']}
+      );
+    }
+  `;
+});
+StyledSelectInput.defaultProps = defaultThemeProp;
+export const StyledComboBox = styled(StyledFormControl)(() => {
+    return css `
+    border: 0;
+
+    ${StyledPopover} {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  `;
+});
+StyledComboBox.defaultProps = defaultThemeProp;
+//# sourceMappingURL=ComboBox.styles.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,76 @@
+import { ChangeEvent, ReactNode } from 'react';
+import type { NoChildrenProp } from '../../types';
+import { FormControlProps } from '../FormControl';
+import { MenuItemProps, MenuProps } from '../Menu/Menu.types';
+export interface Selected {
+    id: string;
+    text: string;
+}
+export default interface ComboBoxProps extends NoChildrenProp {
+    /**
+     * Sets DOM id for the control and associates label element via 'for' attribute.
+     * If an id is not pass, a random id will be generated for any render.
+     */
+    id?: FormControlProps['id'];
+    /** Pass a string or a fragment with an Icon and string. */
+    label?: FormControlProps['label'];
+    /** Visually hides the label region. */
+    labelHidden?: FormControlProps['labelHidden'];
+    /** Indicate if the field is required. The browser defaults to false. */
+    required?: FormControlProps['required'];
+    /** Disable the control. The browser defaults to false. */
+    disabled?: FormControlProps['disabled'];
+    /** Makes the component non editable and non clickable. The browser defaults to false. */
+    readOnly?: FormControlProps['readOnly'];
+    /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */
+    name?: FormControlProps['name'];
+    /** Set visual state based on a validation state. */
+    status?: FormControlProps['status'];
+    /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */
+    info?: FormControlProps['info'];
+    /** Placeholder text */
+    placeholder?: FormControlProps['placeholder'];
+    /**
+     * Whether it is single selection or multi selection combobox.
+     * @default 'single-select'
+     */
+    mode?: 'single-select' | 'multi-select';
+    /** Currently selected option, single for single-select, an array for multi-select. */
+    selected?: {
+        items?: Selected | Selected[];
+        onRemove?: (id: MenuItemProps['id'], index: number) => void;
+        onNew?: (text: string) => void;
+    };
+    /** Value of the combobox filtering input. */
+    value?: FormControlProps['value'];
+    /** Callback fired when the filtering input value changes. */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired when the ComboBox input gains focus. */
+    onFocus?: (selected?: Selected | Selected[]) => void;
+    /**
+     * Callback fired when the ComboBox looses focus within its containing element.
+     * This is not specific to the input element.
+     * Note, behavior will be enhanced in an upcoming release and the input will be the only focusable element.
+     */
+    onBlur?: (selected?: Selected | Selected[]) => void;
+    /** Automatically focuses the input on render. */
+    autoFocus?: boolean;
+    /**
+     * Fired when the user clicks on the dropdown icon to initiate opening the menu.
+     * If you want to offer default menu items without an input value, pass this function.
+     * This function can be an appropriate time to fetch menu item data.
+     * Remember to set the loading prop to true when when fetching data for an empty list.
+     *
+     * @param open value defining whether the click opens or closes the menu
+     */
+    onDropdownButtonClick?: (open: boolean) => void;
+    /** Fired when user clicks on the Combobox input. */
+    onClick?: (e: MouseEvent) => 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;
+}
+//# sourceMappingURL=ComboBox.types.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ComboBox.types.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+import { BaseProps, ForwardProps } from '../../types';
+import { MenuItemProps } from '../Menu/Menu.types';
+import ComboBoxProps, { Selected } from './ComboBox.types';
+interface ComboBoxInputProps extends BaseProps {
+    mode?: 'multi-select' | 'single-select';
+    selected?: Selected | Selected[];
+    value?: ComboBoxProps['value'];
+    visual?: ComboBoxProps['visual'];
+    onRemove?: (id: MenuItemProps['id'], index: number) => void;
+}
+declare const ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps>;
+export default ComboBoxInput;
+//# sourceMappingURL=ComboBoxInput.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/ComboBox/ComboBoxInput.js

@@ -0,0 +1,13 @@
+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, visual, onRemove, ...restProps } = props;
+    return mode === 'multi-select' ? (_jsx(MultiSelectInput, { selected: selected, value: value, ...{
+            ref,
+            onRemove
+        }, ...restProps }, void 0)) : (_jsx(SingleSelectInput, { ref: ref, selected: selected, value: value, visual: visual, ...restProps }, void 0));
+});
+export default ComboBoxInput;
+//# sourceMappingURL=ComboBoxInput.js.map

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

@@ -0,0 +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,WACb,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,WACb,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"]}

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

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '../../../types';
+import { MultiSelectInputProps } from './MultiSelectInput.types';
+export declare const StyledMultiSelectInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps>;
+export default MultiSelectInput;
+//# sourceMappingURL=MultiSelectInput.d.ts.map

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

@@ -0,0 +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,CAqG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,64 @@
+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, useDirection } from '../../../hooks';
+import { cap } from '../../../utils';
+import { StyledSelectInput } from '../ComboBox.styles';
+export const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {
+    return css `
+    ul {
+      list-style: none;
+    }
+
+    ${StyledSelectable} {
+      margin: calc(0.25 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledMultiSelectInput.defaultProps = defaultThemeProp;
+const MultiSelectInput = forwardRef((props, ref) => {
+    const { selected = [], value, onRemove, onChange, onKeyDown, actions, readOnly, disabled, status, placeholder, autoFocus, ...restProps } = props;
+    const inputRef = useConsolidatedRef(ref);
+    const listRef = useRef(null);
+    useArrows(listRef, { selector: 'div[role="button"], input', cycle: false, dir: 'left-right' });
+    const onInputKeyDown = useCallback((e) => {
+        const lastIndex = selected.length - 1;
+        if (e.key === 'Backspace' && !value && selected.length > 0) {
+            onRemove?.(selected[lastIndex].id, lastIndex);
+        }
+        onKeyDown?.(e);
+    }, [onKeyDown, value, selected]);
+    const { end } = useDirection();
+    return (_jsxs(Flex, { as: StyledMultiSelectInput, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, ...{
+            readOnly,
+            disabled,
+            status
+        }, 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

@@ -0,0 +1 @@
+{"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 { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n  return css`\n    ul {\n      list-style: none;\n    }\n\n    ${StyledSelectable} {\n      margin: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledMultiSelectInput.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={StyledMultiSelectInput}\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/MultiSelectInput/MultiSelectInput.types.d.ts

@@ -0,0 +1,31 @@
+import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';
+import { BaseProps } from '../../../types';
+import { FormControlProps } from '../../FormControl';
+import { Selected } from '../ComboBox.types';
+export interface MultiSelectInputProps extends BaseProps {
+    /** List of items to be represented as pills. */
+    selected?: Selected[];
+    /** Input value */
+    value?: string;
+    /** Callback fired when the list value is selected irrespective of the input value changes. */
+    onRemove?: (id: string, index: number) => void;
+    /** Callback invoked when user accepts custom value by pressing enter. */
+    onNew?: (text: string) => void;
+    /** Callback fired when internal input value changes. */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired on every key stroke on input field. */
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /** Makes the input non editable and non clickable. The browser defaults to false. */
+    readOnly?: FormControlProps['readOnly'];
+    /** Disable the control. The browser defaults to false. */
+    disabled?: FormControlProps['disabled'];
+    /** Set visual state based on a validation state. */
+    status?: FormControlProps['status'];
+    /** Placeholder visible on empty input. */
+    placeholder?: string;
+    /** Additional actions related to the input. */
+    actions?: ReactNode;
+    /** Automatically focuses the input on render. */
+    autoFocus?: boolean;
+}
+//# sourceMappingURL=MultiSelectInput.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectInput.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,yEAAyE;IACzE,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,yDAAyD;IACzD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MultiSelectInput.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectInput.types.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';\n\nimport { BaseProps } from '../../../types';\nimport { FormControlProps } from '../../FormControl';\nimport { Selected } from '../ComboBox.types';\n\nexport interface MultiSelectInputProps extends BaseProps {\n  /** List of items to be represented as pills. */\n  selected?: Selected[];\n  /** Input value */\n  value?: string;\n  /** Callback fired when the list value is selected irrespective of the input value changes. */\n  onRemove?: (id: string, index: number) => void;\n  /** Callback invoked when user accepts custom value by pressing enter. */\n  onNew?: (text: string) => void;\n  /** Callback fired when internal input value changes. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Callback fired on every key stroke on input field. */\n  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Placeholder visible on empty input. */\n  placeholder?: string;\n  /** Additional actions related to the input. */\n  actions?: ReactNode;\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n}\n"]}

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

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '../../../types';
+import SingleSelectInputProps from './SingleSelectInput.types';
+export declare const StyledSingleSelectInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const SingleSelectInput: FunctionComponent<SingleSelectInputProps & ForwardProps>;
+export default SingleSelectInput;
+//# sourceMappingURL=SingleSelectInput.d.ts.map

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

@@ -0,0 +1 @@
+{"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;AAE/D,eAAO,MAAM,uBAAuB,yGAA8B,CAAC;AAuBnE,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAuC/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../../theme';
+import { StyledFormControl } from '../../FormControl';
+import Flex from '../../Flex';
+import { StyledSelectInput } from '../ComboBox.styles';
+export const StyledSingleSelectInput = styled(StyledSelectInput) ``;
+const StyledVisualContainer = styled.span(props => {
+    const { theme: { base, components: { 'form-control': formControl, input: { height } } } } = props;
+    return css `
+    border-inline-end: ${formControl['border-width']} solid ${formControl['border-color']};
+    min-width: calc(${height} - ${formControl['border-width']});
+    padding: 0 calc(0.5 * ${base.spacing});
+    height: calc(${height} - 2 * ${formControl['border-width']});
+  `;
+});
+StyledVisualContainer.defaultProps = defaultThemeProp;
+const SingleSelectInput = forwardRef((props, ref) => {
+    const { value, readOnly, disabled, status, actions, onChange, selected, visual, ...restProps } = props;
+    return (_jsxs(Flex, { as: StyledSingleSelectInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, ...{
+            disabled,
+            status,
+            readOnly
+        }, children: [visual && (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledVisualContainer, children: visual }, void 0)), _jsx("input", { ...{
+                    ref,
+                    disabled,
+                    status,
+                    readOnly
+                }, value: value || selected?.text || '', 
+                // no-op avoids react uncontrolled warning
+                onChange: onChange || (() => { }), readOnly: readOnly || !onChange, autoComplete: 'off', ...restProps }, void 0), actions] }, void 0));
+});
+export default SingleSelectInput;
+//# sourceMappingURL=SingleSelectInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAIvD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA,EAAE,CAAC;AAEnE,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAChD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,cAAc,EAAE,WAAW,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;yBACa,WAAW,CAAC,cAAc,CAAC,UAAU,WAAW,CAAC,cAAc,CAAC;sBACnE,MAAM,MAAM,WAAW,CAAC,cAAc,CAAC;4BACjC,IAAI,CAAC,OAAO;mBACrB,MAAM,UAAU,WAAW,CAAC,cAAc,CAAC;GAC3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CAAC,KAA8C,EAAE,GAA0B,EAAE,EAAE;IAC7E,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,GAC5F,KAAK,CAAC;IAER,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAC/C;YACF,QAAQ;YACR,MAAM;YACN,QAAQ;SACT,aAEA,MAAM,IAAI,CACT,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,qBAAqB,YACpF,MAAM,WACF,CACR,EACD,mBACM;oBACF,GAAG;oBACH,QAAQ;oBACR,MAAM;oBACN,QAAQ;iBACT,EACD,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE,IAAI,IAAI,EAAE;gBACpC,0CAA0C;gBAC1C,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAChC,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAC/B,YAAY,EAAC,KAAK,KACd,SAAS,WACb,EACD,OAAO,YACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { ForwardProps } from '../../../types';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport SingleSelectInputProps from './SingleSelectInput.types';\n\nexport const StyledSingleSelectInput = styled(StyledSelectInput)``;\n\nconst StyledVisualContainer = styled.span(props => {\n  const {\n    theme: {\n      base,\n      components: {\n        'form-control': formControl,\n        input: { height }\n      }\n    }\n  } = props;\n\n  return css`\n    border-inline-end: ${formControl['border-width']} solid ${formControl['border-color']};\n    min-width: calc(${height} - ${formControl['border-width']});\n    padding: 0 calc(0.5 * ${base.spacing});\n    height: calc(${height} - 2 * ${formControl['border-width']});\n  `;\n});\n\nStyledVisualContainer.defaultProps = defaultThemeProp;\n\nconst SingleSelectInput: FunctionComponent<SingleSelectInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SingleSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n    const { value, readOnly, disabled, status, actions, onChange, selected, visual, ...restProps } =\n      props;\n\n    return (\n      <Flex\n        as={StyledSingleSelectInput}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        {...{\n          disabled,\n          status,\n          readOnly\n        }}\n      >\n        {visual && (\n          <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledVisualContainer}>\n            {visual}\n          </Flex>\n        )}\n        <input\n          {...{\n            ref,\n            disabled,\n            status,\n            readOnly\n          }}\n          value={value || selected?.text || ''}\n          // no-op avoids react uncontrolled warning\n          onChange={onChange || (() => {})}\n          readOnly={readOnly || !onChange}\n          autoComplete='off'\n          {...restProps}\n        />\n        {actions}\n      </Flex>\n    );\n  }\n);\n\nexport default SingleSelectInput;\n"]}

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

@@ -0,0 +1,28 @@
+import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';
+import { FormControlProps } from '../../FormControl';
+import ComboBoxProps, { Selected } from '../ComboBox.types';
+export default interface SingleSelectInputProps {
+    /** List of items to be represented as pills. */
+    selected?: Selected;
+    /** Input value */
+    value?: string;
+    /** Callback invoked when user accepts custom value by pressing enter. */
+    onNew?: (text: string) => void;
+    /** Callback fired when internal input value changes. */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired on every key stroke on input field. */
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /** Makes the input non editable and non clickable. The browser defaults to false. */
+    readOnly?: FormControlProps['readOnly'];
+    /** Disable the control. The browser defaults to false. */
+    disabled?: FormControlProps['disabled'];
+    /** Set visual state based on a validation state. */
+    status?: FormControlProps['status'];
+    /** Placeholder visible on empty input. */
+    placeholder?: string;
+    /** Additional actions related to the input. */
+    actions?: ReactNode;
+    /** A visual to render a preview for the selected item */
+    visual?: ComboBoxProps['visual'];
+}
+//# sourceMappingURL=SingleSelectInput.types.d.ts.map