@elliemae/ds-form-combobox 3.15.0 → 3.16.0-next.10

package/dist/cjs/react-desc-prop-types.js

@@ -29,36 +29,36 @@ __export(react_desc_prop_types_exports, {
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 function noop(..._args) {
 }
 const ComboboxPropTypes = {
-  ...import_ds_utilities.globalAttributesPropTypes,
-  placeholder: import_ds_utilities.PropTypes.string.description("input's placeholder value").defaultValue(""),
-  allOptions: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.array, import_ds_utilities.PropTypes.object]).isRequired.description("List of original options").defaultValue([]),
-  filteredOptions: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.array, import_ds_utilities.PropTypes.object]).description("List of filtered options to show in the menu based on the current internal input filter value").defaultValue([]),
-  selectedValues: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.object), import_ds_utilities.PropTypes.object]).isRequired.description(
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  placeholder: import_ds_props_helpers.PropTypes.string.description("input's placeholder value").defaultValue(""),
+  allOptions: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).isRequired.description("List of original options").defaultValue([]),
+  filteredOptions: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).description("List of filtered options to show in the menu based on the current internal input filter value").defaultValue([]),
+  selectedValues: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object), import_ds_props_helpers.PropTypes.object]).isRequired.description(
     "Array of option or single option selected"
   ),
-  disabled: import_ds_utilities.PropTypes.bool.description("wheter or not the input is disabled").defaultValue("false"),
-  autoFocus: import_ds_utilities.PropTypes.bool.description("Whether the combo box uses auto focus or not").defaultValue("false"),
-  hasError: import_ds_utilities.PropTypes.bool.description("Whether the combo box has error or not").defaultValue("false"),
-  noOptionsMessage: import_ds_utilities.PropTypes.string.description("Custome message to be display when no matches found after filtering").defaultValue("No Matches Found"),
-  onChange: import_ds_utilities.PropTypes.func.isRequired.description("function triggered when an option is selected it will send the options selected").defaultValue("() => {}"),
-  onFilter: import_ds_utilities.PropTypes.func.description("function triggered when user type in the combobox input").defaultValue(""),
-  onCreate: import_ds_utilities.PropTypes.func.description(
+  disabled: import_ds_props_helpers.PropTypes.bool.description("wheter or not the input is disabled").defaultValue("false"),
+  autoFocus: import_ds_props_helpers.PropTypes.bool.description("Whether the combo box uses auto focus or not").defaultValue("false"),
+  hasError: import_ds_props_helpers.PropTypes.bool.description("Whether the combo box has error or not").defaultValue("false"),
+  noOptionsMessage: import_ds_props_helpers.PropTypes.string.description("Custome message to be display when no matches found after filtering").defaultValue("No Matches Found"),
+  onChange: import_ds_props_helpers.PropTypes.func.isRequired.description("function triggered when an option is selected it will send the options selected").defaultValue("() => {}"),
+  onFilter: import_ds_props_helpers.PropTypes.func.description("function triggered when user type in the combobox input").defaultValue(""),
+  onCreate: import_ds_props_helpers.PropTypes.func.description(
     'function triggered when user select "create" a new item whenever is not a match in the all option list'
   ).defaultValue(""),
-  onCancel: import_ds_utilities.PropTypes.func.description("function triggered when user press ESC key").defaultValue("() => {}"),
-  onMenuChange: import_ds_utilities.PropTypes.func.description("function triggered when user open or close the menu list").defaultValue("() => {}"),
-  inputMinWidth: import_ds_utilities.PropTypes.any.description("Minimum width for the combo box input controller").defaultValue(void 0),
-  menuMinWidth: import_ds_utilities.PropTypes.any.description("Minimum width for the dropdown menu").defaultValue(void 0),
-  menuMaxHeight: import_ds_utilities.PropTypes.any.description("Maximum height for the dropdown menu").defaultValue(void 0),
-  withoutPortal: import_ds_utilities.PropTypes.bool.description("Whether the combobox menu is rendered in a portal or not").defaultValue(false),
-  zIndex: import_ds_utilities.PropTypes.number.description("The z-index of the combobox menu").defaultValue(10),
-  innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.shape({ current: import_ds_utilities.PropTypes.any })]).description(
+  onCancel: import_ds_props_helpers.PropTypes.func.description("function triggered when user press ESC key").defaultValue("() => {}"),
+  onMenuChange: import_ds_props_helpers.PropTypes.func.description("function triggered when user open or close the menu list").defaultValue("() => {}"),
+  inputMinWidth: import_ds_props_helpers.PropTypes.any.description("Minimum width for the combo box input controller").defaultValue(void 0),
+  menuMinWidth: import_ds_props_helpers.PropTypes.any.description("Minimum width for the dropdown menu").defaultValue(void 0),
+  menuMaxHeight: import_ds_props_helpers.PropTypes.any.description("Maximum height for the dropdown menu").defaultValue(void 0),
+  withoutPortal: import_ds_props_helpers.PropTypes.bool.description("Whether the combobox menu is rendered in a portal or not").defaultValue(false),
+  zIndex: import_ds_props_helpers.PropTypes.number.description("The z-index of the combobox menu").defaultValue(10),
+  innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any })]).description(
     "reference to the component"
   ),
-  onlySelectable: import_ds_utilities.PropTypes.bool.description("filtering is disabled")
+  onlySelectable: import_ds_props_helpers.PropTypes.bool.description("filtering is disabled")
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export interface ItemCreatableOption extends CommonItemOptions {\n    label: string;\n    type: 'creatable';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n  export interface PropsOptional {\n    inputMinWidth?: number;\n    menuMinWidth?: number;\n    menuMaxHeight?: number;\n    placeholder?: string;\n    autoFocus?: boolean;\n    filteredOptions: OptionTypes[];\n    isMenuOpen?: boolean;\n    onMenuChange?: (\n      state: boolean,\n      reason: string,\n      e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    onCreate?: (label: string) => void;\n    onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n    onCancel?: () => void;\n    onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n    zIndex?: number;\n    isLoading?: boolean;\n  }\n\n  export interface RequiredProps {\n    allOptions: OptionTypes[];\n    selectedValues: SelectedOptionsT;\n    onChange: (\n      suggestedValue: ItemOption | OptionTypes[] | null,\n      selectedOption: ItemOption,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    hasError: boolean;\n    inline: boolean;\n    withoutPortal: boolean;\n    isNonClearable: boolean;\n    disabled: boolean;\n    noOptionsMessage: string;\n    innerRef: React.RefObject<HTMLInputElement>;\n    useMask: DSMaskT.Hook | typeof noop;\n    onlySelectable: boolean;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {}\n}\n\nexport const ComboboxPropTypes = {\n  ...globalAttributesPropTypes,\n  placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n  allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of original options')\n    .defaultValue([]),\n  filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .description('List of filtered options to show in the menu based on the current internal input filter value')\n    .defaultValue([]),\n  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n    'Array of option or single option selected',\n  ),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n  noOptionsMessage: PropTypes.string\n    .description('Custome message to be display when no matches found after filtering')\n    .defaultValue('No Matches Found'),\n  onChange: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue('() => {}'),\n  onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n  onCreate: PropTypes.func\n    .description(\n      'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n    )\n    .defaultValue(''),\n  onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n  onMenuChange: PropTypes.func\n    .description('function triggered when user open or close the menu list')\n    .defaultValue('() => {}'),\n  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  withoutPortal: PropTypes.bool\n    .description('Whether the combobox menu is rendered in a portal or not')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'reference to the component',\n  ),\n  onlySelectable: PropTypes.bool.description('filtering is disabled'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAAqD;AAE9C,SAAS,QAA6B,OAAgB;AAAC;AAiFvD,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,aAAa,8BAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,EAAE;AAAA,EACtF,YAAY,8BAAU,UAAU,CAAC,8BAAU,OAAO,8BAAU,MAAM,CAAC,EAChE,WAAW,YAAY,0BAA0B,EACjD,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,8BAAU,UAAU,CAAC,8BAAU,OAAO,8BAAU,MAAM,CAAC,EACrE,YAAY,+FAA+F,EAC3G,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,GAAG,8BAAU,MAAM,CAAC,EAAE,WAAW;AAAA,IACtG;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAChG,WAAW,8BAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EAC1G,UAAU,8BAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,OAAO;AAAA,EACnG,kBAAkB,8BAAU,OACzB,YAAY,qEAAqE,EACjF,aAAa,kBAAkB;AAAA,EAClC,UAAU,8BAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,UAAU;AAAA,EAC1B,UAAU,8BAAU,KAAK,YAAY,yDAAyD,EAAE,aAAa,EAAE;AAAA,EAC/G,UAAU,8BAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,EAAE;AAAA,EAClB,UAAU,8BAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,UAAU;AAAA,EAC1G,cAAc,8BAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,UAAU;AAAA,EAC1B,eAAe,8BAAU,IAAI,YAAY,kDAAkD,EAAE,aAAa,MAAS;AAAA,EACnH,cAAc,8BAAU,IAAI,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EACrG,eAAe,8BAAU,IAAI,YAAY,sCAAsC,EAAE,aAAa,MAAS;AAAA,EACvG,eAAe,8BAAU,KACtB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,QAAQ,8BAAU,OAAO,YAAY,kCAAkC,EAAE,aAAa,EAAE;AAAA,EACxF,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,EAAE,SAAS,8BAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,gBAAgB,8BAAU,KAAK,YAAY,uBAAuB;AACpE;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export interface ItemCreatableOption extends CommonItemOptions {\n    label: string;\n    type: 'creatable';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n  export interface PropsOptional {\n    inputMinWidth?: number;\n    menuMinWidth?: number;\n    menuMaxHeight?: number;\n    placeholder?: string;\n    autoFocus?: boolean;\n    filteredOptions: OptionTypes[];\n    isMenuOpen?: boolean;\n    onMenuChange?: (\n      state: boolean,\n      reason: string,\n      e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    onCreate?: (label: string) => void;\n    onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n    onCancel?: () => void;\n    onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n    zIndex?: number;\n    isLoading?: boolean;\n  }\n\n  export interface RequiredProps {\n    allOptions: OptionTypes[];\n    selectedValues: SelectedOptionsT;\n    onChange: (\n      suggestedValue: ItemOption | OptionTypes[] | null,\n      selectedOption: ItemOption,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    hasError: boolean;\n    inline: boolean;\n    withoutPortal: boolean;\n    isNonClearable: boolean;\n    disabled: boolean;\n    noOptionsMessage: string;\n    innerRef: React.RefObject<HTMLInputElement>;\n    useMask: DSMaskT.Hook | typeof noop;\n    onlySelectable: boolean;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {}\n}\n\nexport const ComboboxPropTypes = {\n  ...globalAttributesPropTypes,\n  placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n  allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of original options')\n    .defaultValue([]),\n  filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .description('List of filtered options to show in the menu based on the current internal input filter value')\n    .defaultValue([]),\n  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n    'Array of option or single option selected',\n  ),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n  noOptionsMessage: PropTypes.string\n    .description('Custome message to be display when no matches found after filtering')\n    .defaultValue('No Matches Found'),\n  onChange: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue('() => {}'),\n  onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n  onCreate: PropTypes.func\n    .description(\n      'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n    )\n    .defaultValue(''),\n  onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n  onMenuChange: PropTypes.func\n    .description('function triggered when user open or close the menu list')\n    .defaultValue('() => {}'),\n  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  withoutPortal: PropTypes.bool\n    .description('Whether the combobox menu is rendered in a portal or not')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'reference to the component',\n  ),\n  onlySelectable: PropTypes.bool.description('filtering is disabled'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAqD;AAE9C,SAAS,QAA6B,OAAgB;AAAC;AAiFvD,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,aAAa,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,EAAE;AAAA,EACtF,YAAY,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAChE,WAAW,YAAY,0BAA0B,EACjD,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EACrE,YAAY,+FAA+F,EAC3G,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,GAAG,kCAAU,MAAM,CAAC,EAAE,WAAW;AAAA,IACtG;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAChG,WAAW,kCAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EAC1G,UAAU,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,OAAO;AAAA,EACnG,kBAAkB,kCAAU,OACzB,YAAY,qEAAqE,EACjF,aAAa,kBAAkB;AAAA,EAClC,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,UAAU;AAAA,EAC1B,UAAU,kCAAU,KAAK,YAAY,yDAAyD,EAAE,aAAa,EAAE;AAAA,EAC/G,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,UAAU;AAAA,EAC1G,cAAc,kCAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,UAAU;AAAA,EAC1B,eAAe,kCAAU,IAAI,YAAY,kDAAkD,EAAE,aAAa,MAAS;AAAA,EACnH,cAAc,kCAAU,IAAI,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EACrG,eAAe,kCAAU,IAAI,YAAY,sCAAsC,EAAE,aAAa,MAAS;AAAA,EACvG,eAAe,kCAAU,KACtB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,QAAQ,kCAAU,OAAO,YAAY,kCAAkC,EAAE,aAAa,EAAE;AAAA,EACxF,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK,YAAY,uBAAuB;AACpE;",
   "names": []
 }

package/dist/cjs/sharedTypes.js

@@ -29,7 +29,7 @@ __export(sharedTypes_exports, {
 });
 module.exports = __toCommonJS(sharedTypes_exports);
 var React = __toESM(require("react"));
-var import_constants = require("./constants");
+var import_constants = require("./constants.js");
 const isSeparator = (el) => el?.type === import_constants.MENU_OPTION_TYPES.SEPARATOR;
 const isOption = (el) => el?.type === import_constants.MENU_OPTION_TYPES.OPTION;
 //# sourceMappingURL=sharedTypes.js.map

package/dist/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from './constants';\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    internalRef: React.RefObject<HTMLInputElement>;\n    virtualListHelpers?: ReturnType<typeof useVirtual>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    referenceElement: HTMLElement | null;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.RefObject<HTMLDivElement>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    inputValue: string;\n    setInputValue: React.Dispatch<React.SetStateAction<string>>;\n    selectedOptionsRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n    toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    showSelectedOptions: boolean;\n    setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n    setMenuState: (\n      newState: boolean,\n      reason?: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n  }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n  el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n  el?.type === MENU_OPTION_TYPES.OPTION;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    internalRef: React.RefObject<HTMLInputElement>;\n    virtualListHelpers?: ReturnType<typeof useVirtual>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    referenceElement: HTMLElement | null;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.RefObject<HTMLDivElement>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    inputValue: string;\n    setInputValue: React.Dispatch<React.SetStateAction<string>>;\n    selectedOptionsRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n    toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    showSelectedOptions: boolean;\n    setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n    setMenuState: (\n      newState: boolean,\n      reason?: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n  }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n  el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n  el?.type === MENU_OPTION_TYPES.OPTION;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAkC;AAkC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,mCAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,mCAAkB;",
   "names": []
 }

package/dist/cjs/utils/listHelper.js

@@ -40,7 +40,7 @@ __export(listHelper_exports, {
 });
 module.exports = __toCommonJS(listHelper_exports);
 var React = __toESM(require("react"));
-var import_constants = require("../constants");
+var import_constants = require("../constants.js");
 const getSelectableOptions = (options) => options.filter((option) => option.type === import_constants.MENU_OPTION_TYPES.OPTION && !option.disabled);
 const getOptions = (options) => options.filter((option) => option.type === import_constants.MENU_OPTION_TYPES.OPTION);
 const isSelectedValueEmpty = (value) => Array.isArray(value) ? value.length === 0 : !value;

package/dist/cjs/utils/listHelper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/listHelper.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n  Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n  if (isSelectedValueMultiple(value)) {\n    const multiValue = value as DSComboboxT.ItemOption[];\n    return multiValue.some((item) => item?.value === activeOption?.value);\n  }\n  const singleValue = value as DSComboboxT.ItemOption;\n  return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = (\n  list: DSComboboxT.OptionTypes[],\n  from: number,\n  criteria: (item: DSComboboxT.OptionTypes) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n  if (Array.isArray(selectedValues)) {\n    return selectedValues[selectedValues.length - 1];\n  }\n  return selectedValues;\n};\n\nexport const getFirstOption = (\n  options: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.SelectedOptionsT,\n): string => {\n  const lastValue = getLastValueSelected(selectedValues);\n  if (lastValue) return lastValue.dsId;\n\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n      return options[i].dsId;\n    }\n  // list of disabled item results return ''\n  return '';\n};\n\nexport const getSuggestedValueOnChange = (\n  selectedOption: DSComboboxT.ItemOption,\n  selectedValues: DSComboboxT.SelectedOptionsT,\n  isNonClearable?: boolean,\n) => {\n  if (Array.isArray(selectedValues)) {\n    const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n    if (isFound) {\n      if (isNonClearable) return selectedValues;\n      return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n    }\n    return [...selectedValues, selectedOption];\n  }\n  if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n    if (isNonClearable) return selectedOption;\n    return null;\n  }\n  return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) => {\n  if (!inputValue) return options;\n  return options.filter(\n    (option) =>\n      option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n  );\n};\n\nexport const selectedValuesWithSections = (\n  optionsToParse: DSComboboxT.OptionTypes[],\n  multiSelectedValue: DSComboboxT.ItemOption[],\n) => {\n  const items = [] as DSComboboxT.OptionTypes[];\n\n  if (optionsToParse)\n    optionsToParse.forEach((option) => {\n      // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);\n      if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {\n        items.push(option);\n      }\n\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n          items[items.length - 1] = option;\n        } else {\n          items.push(option);\n        }\n      }\n    });\n  if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n    items.pop();\n  }\n\n  return items;\n};\n\nexport const getFilteredOptionsSelected = (\n  filteredOption: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n  elem: HTMLElement,\n  options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n  const bounding = elem.getBoundingClientRect();\n  if (\n    !(\n      bounding.top >= 0 &&\n      bounding.left >= 0 &&\n      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n    )\n  )\n    elem.scrollIntoView(options);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n  Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n  if (isSelectedValueMultiple(value)) {\n    const multiValue = value as DSComboboxT.ItemOption[];\n    return multiValue.some((item) => item?.value === activeOption?.value);\n  }\n  const singleValue = value as DSComboboxT.ItemOption;\n  return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = (\n  list: DSComboboxT.OptionTypes[],\n  from: number,\n  criteria: (item: DSComboboxT.OptionTypes) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n  if (Array.isArray(selectedValues)) {\n    return selectedValues[selectedValues.length - 1];\n  }\n  return selectedValues;\n};\n\nexport const getFirstOption = (\n  options: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.SelectedOptionsT,\n): string => {\n  const lastValue = getLastValueSelected(selectedValues);\n  if (lastValue) return lastValue.dsId;\n\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n      return options[i].dsId;\n    }\n  // list of disabled item results return ''\n  return '';\n};\n\nexport const getSuggestedValueOnChange = (\n  selectedOption: DSComboboxT.ItemOption,\n  selectedValues: DSComboboxT.SelectedOptionsT,\n  isNonClearable?: boolean,\n) => {\n  if (Array.isArray(selectedValues)) {\n    const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n    if (isFound) {\n      if (isNonClearable) return selectedValues;\n      return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n    }\n    return [...selectedValues, selectedOption];\n  }\n  if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n    if (isNonClearable) return selectedOption;\n    return null;\n  }\n  return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) => {\n  if (!inputValue) return options;\n  return options.filter(\n    (option) =>\n      option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n  );\n};\n\nexport const selectedValuesWithSections = (\n  optionsToParse: DSComboboxT.OptionTypes[],\n  multiSelectedValue: DSComboboxT.ItemOption[],\n) => {\n  const items = [] as DSComboboxT.OptionTypes[];\n\n  if (optionsToParse)\n    optionsToParse.forEach((option) => {\n      // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);\n      if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {\n        items.push(option);\n      }\n\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n          items[items.length - 1] = option;\n        } else {\n          items.push(option);\n        }\n      }\n    });\n  if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n    items.pop();\n  }\n\n  return items;\n};\n\nexport const getFilteredOptionsSelected = (\n  filteredOption: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n  elem: HTMLElement,\n  options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n  const bounding = elem.getBoundingClientRect();\n  if (\n    !(\n      bounding.top >= 0 &&\n      bounding.left >= 0 &&\n      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n    )\n  )\n    elem.scrollIntoView(options);\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAkC;AAC3B,MAAM,uBAAuB,CAAC,YACnC,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,mCAAkB,UAAU,CAAC,OAAO,QAAQ;AAElF,MAAM,aAAa,CAAC,YACzB,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,mCAAkB,MAAM;AAE9D,MAAM,uBAAuB,CAAC,UACnC,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAExC,MAAM,0BAA0B,CAAC,UAAiD,MAAM,QAAQ,KAAK;AAErG,MAAM,aAAa,CAAC,OAAqC,iBAAkD;AAChH,MAAI,wBAAwB,KAAK,GAAG;AAClC,UAAM,aAAa;AACnB,WAAO,WAAW,KAAK,CAAC,SAAS,MAAM,UAAU,cAAc,KAAK;AAAA,EACtE;AACA,QAAM,cAAc;AACpB,SAAO,aAAa,UAAU,aAAa;AAC7C;AAEO,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,EAAE;AAAG,aAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,mBAAiD;AACpF,MAAI,MAAM,QAAQ,cAAc,GAAG;AACjC,WAAO,eAAe,eAAe,SAAS;AAAA,EAChD;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAC5B,SACA,mBACW;AACX,QAAM,YAAY,qBAAqB,cAAc;AACrD,MAAI;AAAW,WAAO,UAAU;AAEhC,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,GAAG,IAAI,KAAK,CAAC,QAAQ,GAAG,UAAU;AAC/E,aAAO,QAAQ,GAAG;AAAA,IACpB;AAEF,SAAO;AACT;AAEO,MAAM,4BAA4B,CACvC,gBACA,gBACA,mBACG;AACH,MAAI,MAAM,QAAQ,cAAc,GAAG;AACjC,UAAM,UAAU,eAAe,KAAK,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,UAAU,eAAe,KAAK;AAC3G,QAAI,SAAS;AACX,UAAI;AAAgB,eAAO;AAC3B,aAAO,eAAe,OAAO,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,UAAU,eAAe,KAAK;AAAA,IACtG;AACA,WAAO,CAAC,GAAG,gBAAgB,cAAc;AAAA,EAC3C;AACA,MAAI,kBAAkB,eAAe,SAAS,eAAe,MAAM;AACjE,QAAI;AAAgB,aAAO;AAC3B,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,gBAAgB,CAAC,YAAoB,YAAuC;AACvF,MAAI,CAAC;AAAY,WAAO;AACxB,SAAO,QAAQ;AAAA,IACb,CAAC,WACC,OAAO,SAAS,mCAAkB,UAAU,OAAO,MAAM,YAAY,EAAE,SAAS,WAAW,YAAY,CAAC;AAAA,EAC5G;AACF;AAEO,MAAM,6BAA6B,CACxC,gBACA,uBACG;AACH,QAAM,QAAQ,CAAC;AAEf,MAAI;AACF,mBAAe,QAAQ,CAAC,WAAW;AAEjC,UAAI,OAAO,SAAS,mCAAkB,UAAU,WAAW,oBAAoB,MAAM,GAAG;AACtF,cAAM,KAAK,MAAM;AAAA,MACnB;AAEA,UAAI,OAAO,SAAS,mCAAkB,SAAS;AAC7C,YAAI,MAAM,MAAM,SAAS,IAAI,SAAS,mCAAkB,SAAS;AAC/D,gBAAM,MAAM,SAAS,KAAK;AAAA,QAC5B,OAAO;AACL,gBAAM,KAAK,MAAM;AAAA,QACnB;AAAA,MACF;AAAA,IACF,CAAC;AACH,MAAI,MAAM,MAAM,SAAS,IAAI,SAAS,mCAAkB,SAAS;AAC/D,UAAM,IAAI;AAAA,EACZ;AAEA,SAAO;AACT;AAEO,MAAM,6BAA6B,CACxC,gBACA,mBACG,eAAe,OAAO,CAAC,WAAW,OAAO,SAAS,mCAAkB,UAAU,WAAW,gBAAgB,MAAM,CAAC;AAE9G,MAAM,iBAAiB,CAC5B,MACA,UAAU,EAAE,UAAU,UAAU,OAAO,OAAO,QAAQ,UAAU,MAC7D;AACH,QAAM,WAAW,KAAK,sBAAsB;AAC5C,MACE,EACE,SAAS,OAAO,KAChB,SAAS,QAAQ,KACjB,SAAS,WAAW,OAAO,eAAe,SAAS,gBAAgB,iBACnE,SAAS,UAAU,OAAO,cAAc,SAAS,gBAAgB;AAGnE,SAAK,eAAe,OAAO;AAC/B;",
   "names": []
 }

package/dist/esm/ComboBox.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { describe } from "@elliemae/ds-utilities";
-import { useComboBox } from "./config/useComboBox";
-import { Container } from "./parts/container";
-import { ComboBoxContext } from "./ComboBoxCTX";
-import { ComboboxPropTypes } from "./react-desc-prop-types";
+import { describe } from "@elliemae/ds-props-helpers";
+import { useComboBox } from "./config/useComboBox.js";
+import { Container } from "./parts/container/index.js";
+import { ComboBoxContext } from "./ComboBoxCTX.js";
+import { ComboboxPropTypes } from "./react-desc-prop-types.js";
 const DSComboBox = (props) => {
   const ctx = useComboBox(props);
   return /* @__PURE__ */ jsx(ComboBoxContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Container, {}) });

package/dist/esm/ComboBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ComboBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useComboBox } from './config/useComboBox';\nimport { Container } from './parts/container';\nimport { ComboBoxContext } from './ComboBoxCTX';\nimport type { DSComboboxT } from './react-desc-prop-types';\nimport { ComboboxPropTypes } from './react-desc-prop-types';\n\nconst DSComboBox: React.ComponentType<DSComboboxT.Props> = (props) => {\n  const ctx = useComboBox(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n    </ComboBoxContext.Provider>\n  );\n};\nDSComboBox.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useComboBox } from './config/useComboBox.js';\nimport { Container } from './parts/container/index.js';\nimport { ComboBoxContext } from './ComboBoxCTX.js';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { ComboboxPropTypes } from './react-desc-prop-types.js';\n\nconst DSComboBox: React.ComponentType<DSComboboxT.Props> = (props) => {\n  const ctx = useComboBox(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n    </ComboBoxContext.Provider>\n  );\n};\nDSComboBox.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACajB;AAXN,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,SAAS,yBAAyB;AAElC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,MAAM,YAAY,KAAK;AAC7B,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,KAC/B,8BAAC,aAAU,GACb;AAEJ;AACA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAEhD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/esm/ComboBoxCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ComboBoxCTX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types';\nimport type { DSComboboxInternalsT } from './sharedTypes';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: noop,\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n  setMenuState: noop,\n  internalRef: createRef<HTMLInputElement>(),\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: noop,\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n  setMenuState: noop,\n  internalRef: createRef<HTMLInputElement>(),\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU,UAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAElB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc,UAA0B;AAAA,EACxC,SAAS,UAA0B;AAAA,EACnC,gBAAgB,UAA0B;AAAA,EAC1C,oBAAoB,UAA4B;AAAA,EAChD,oBAAoB,UAA4B;AAAA,EAChD,sBAAsB,UAA4B;AAAA,EAClD,0BAA0B,UAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;AAAA,EACd,aAAa,UAA4B;AAC3C;AAEO,MAAM,kBAAkB,cAAc,cAAc;AAE3D,IAAO,sBAAQ;",
   "names": []
 }

package/dist/esm/config/useComboBox.js

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { useMemo, useState, useRef, useCallback, useEffect } from "react";
 import { useVirtual } from "react-virtual";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
-import { defaultProps } from "../ComboBoxCTX";
-import { ComboboxPropTypes } from "../react-desc-prop-types";
-import { useCorrectOptions } from "./useCorrectOptions";
-import { getFirstOption } from "../utils/listHelper";
-import { DSComboBoxName } from "../theming";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { defaultProps } from "../ComboBoxCTX.js";
+import { ComboboxPropTypes } from "../react-desc-prop-types.js";
+import { useCorrectOptions } from "./useCorrectOptions.js";
+import { getFirstOption } from "../utils/listHelper.js";
+import { DSComboBoxName } from "../theming.js";
 const useComboBox = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);

package/dist/esm/config/useComboBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useComboBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../ComboBoxCTX';\nimport type { DSComboboxT } from '../react-desc-prop-types';\nimport { ComboboxPropTypes } from '../react-desc-prop-types';\nimport type { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nimport { DSComboBoxName } from '../theming';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n    },\n    [onMenuChange],\n  );\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: correctOptions.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    // this code calculate the option to be focused when opening the menu\n    // when losing focus we remove the focused one\n    // when focus adquired again getFirstOption calculate the correct one\n    if (!hasFocus) setFocusOptionIdx('');\n    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptions?.[0]?.dsId ?? '');\n  }, [correctOptions, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, filteredOptions: correctOptions },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n      internalRef,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n    },\n    [onMenuChange],\n  );\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: correctOptions.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    // this code calculate the option to be focused when opening the menu\n    // when losing focus we remove the focused one\n    // when focus adquired again getFirstOption calculate the correct one\n    if (!hasFocus) setFocusOptionIdx('');\n    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptions?.[0]?.dsId ?? '');\n  }, [correctOptions, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, filteredOptions: correctOptions },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n      internalRef,\n    ],\n  );\n\n  return ctx;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,QAAQ,aAAa,iBAAiB;AAClE,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,oBAAoB;AAE7B,SAAS,yBAAyB;AAElC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AACxB,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,mBAAmB,cAAc;AACnF,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AACjF,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAkB,KAAK;AAE7E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AACvD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,cAAc,OAAyB,IAAI;AACjD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,iBAAiB,OAAuB,IAAI;AAElD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,uBAAuB,OAAyB,IAAI;AAC1D,QAAM,2BAA2B,OAA0B,IAAI;AAC/D,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,EAAE,gBAAgB,YAAY,aAAa,IAAI;AAErD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,eAAe;AAAW,aAAO;AACrC,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,QAAM,eAAe;AAAA,IACnB,CACE,UACA,QACA,MACG;AACH,UAAI,iBAAiB;AAAW,qBAAa,UAAU,QAAQ,CAAC;AAChE,qBAAe,QAAQ;AAAA,IACzB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,QAAM,iBAAiB,kBAAkB,mBAAmB,YAAY,mBAAmB;AAM3F,QAAM,qBAAoD,WAAW;AAAA,IACnE,MAAM,eAAe;AAAA,IACrB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,SAAS,MAAM;AAC5C,yBAAmB;AAAA,QACjB,eAAe,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QAEnD;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,kBAAkB;AAAA,EACrC;AAMA,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB,EAAE;AAE/D,YAAU,MAAM;AAId,QAAI,CAAC;AAAU,wBAAkB,EAAE;AACnC,QAAI,aAAa,CAAC,kBAAkB,sBAAsB;AACxD,YAAM,eAAe,eAAe,gBAAgB,cAAc;AAClE,wBAAkB,YAAY;AAC9B,2BAAqB,cAAc,EAAE,OAAO,SAAS,CAAC;AAAA,IACxD;AAAA,EAEF,GAAG,CAAC,aAAa,UAAU,gBAAgB,cAAc,CAAC;AAG1D,YAAU,MAAM;AACd,sBAAkB,iBAAiB,IAAI,QAAQ,EAAE;AAAA,EACnD,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAE/B,YAAU,MAAM;AACd,QAAI,CAAC,aAAa;AAChB,wBAAkB,EAAE;AACpB,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,mBAAmB,iBAAiB,eAAe;AAAA,MAC/D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/config/useCorrectOptions.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { useMemo } from "react";
 import { uid } from "uid";
-import { MENU_OPTION_TYPES } from "../constants";
-import { selectedValuesWithSections, filterOptions } from "../utils/listHelper";
+import { MENU_OPTION_TYPES } from "../constants.js";
+import { selectedValuesWithSections, filterOptions } from "../utils/listHelper.js";
 const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
   const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;
   return useMemo(() => {

package/dist/esm/config/useCorrectOptions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCorrectOptions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nimport { selectedValuesWithSections, filterOptions } from '../utils/listHelper';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n  const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;\n\n  return useMemo(() => {\n    const correctFilterOptions = filteredOptions ?? filterOptions(inputValue, allOptions);\n    // when show selected toggle is on we return the selected value only as filteredOptions prop\n    if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return selectedValuesWithSections(correctFilterOptions, selectedValues);\n    }\n\n    // whether oncreate is passed we add as first option the creatable action based on input value string\n    if (\n      onCreate &&\n      inputValue &&\n      correctFilterOptions.findIndex(\n        (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue,\n      ) === -1\n    ) {\n      const creatableUuid = uid();\n      const creatableItem: DSComboboxT.ItemCreatableOption = {\n        dsId: `creatable-${creatableUuid}`,\n        label: inputValue,\n        type: 'creatable',\n      };\n\n      return [creatableItem, ...correctFilterOptions];\n    }\n\n    return correctFilterOptions;\n  }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);\n};\n\nexport { useCorrectOptions };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nimport { selectedValuesWithSections, filterOptions } from '../utils/listHelper.js';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n  const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;\n\n  return useMemo(() => {\n    const correctFilterOptions = filteredOptions ?? filterOptions(inputValue, allOptions);\n    // when show selected toggle is on we return the selected value only as filteredOptions prop\n    if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return selectedValuesWithSections(correctFilterOptions, selectedValues);\n    }\n\n    // whether oncreate is passed we add as first option the creatable action based on input value string\n    if (\n      onCreate &&\n      inputValue &&\n      correctFilterOptions.findIndex(\n        (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue,\n      ) === -1\n    ) {\n      const creatableUuid = uid();\n      const creatableItem: DSComboboxT.ItemCreatableOption = {\n        dsId: `creatable-${creatableUuid}`,\n        label: inputValue,\n        type: 'creatable',\n      };\n\n      return [creatableItem, ...correctFilterOptions];\n    }\n\n    return correctFilterOptions;\n  }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);\n};\n\nexport { useCorrectOptions };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe;AACxB,SAAS,WAAW;AAEpB,SAAS,yBAAyB;AAClC,SAAS,4BAA4B,qBAAqB;AAC1D,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,iBAAiB,YAAY,gBAAgB,SAAS,IAAI;AAElE,SAAO,QAAQ,MAAM;AACnB,UAAM,uBAAuB,mBAAmB,cAAc,YAAY,UAAU;AAEpF,QAAI,uBAAuB,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AACrF,aAAO,2BAA2B,sBAAsB,cAAc;AAAA,IACxE;AAGA,QACE,YACA,cACA,qBAAqB;AAAA,MACnB,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,OAAO,UAAU;AAAA,IAC3E,MAAM,IACN;AACA,YAAM,gBAAgB,IAAI;AAC1B,YAAM,gBAAiD;AAAA,QACrD,MAAM,aAAa;AAAA,QACnB,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAEA,aAAO,CAAC,eAAe,GAAG,oBAAoB;AAAA,IAChD;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,YAAY,qBAAqB,gBAAgB,UAAU,UAAU,CAAC;AAC7F;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-export * from "./ComboBox";
-export * from "./theming";
-export * from "./ComboboxDataTestids";
+export * from "./ComboBox.js";
+export * from "./theming.js";
+export * from "./ComboboxDataTestids.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ComboBox';\nexport * from './theming';\nexport * from './ComboboxDataTestids';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ComboBox.js';\nexport * from './theming.js';\nexport * from './ComboboxDataTestids.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/parts/DropdownIndicator.js

@@ -4,8 +4,8 @@ import { useCallback, useContext } from "react";
 import { styled } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button";
 import { ChevronSmallDown } from "@elliemae/ds-icons";
-import ComboBoxContext from "../ComboBoxCTX";
-import { ComboboxDataTestid } from "../ComboboxDataTestids";
+import ComboBoxContext from "../ComboBoxCTX.js";
+import { ComboboxDataTestid } from "../ComboboxDataTestids.js";
 const StyledDropDownButton = styled(DSButtonV2)`
   &:focus::after {
     border: none;

package/dist/esm/parts/DropdownIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n  }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props: { disabled },\n    menuState,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledDropDownButton\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls=\"combo-listbox\"\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n    >\n      <ChevronSmallDown />\n    </StyledDropDownButton>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n  }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props: { disabled },\n    menuState,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledDropDownButton\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls=\"combo-listbox\"\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n    >\n      <ChevronSmallDown />\n    </StyledDropDownButton>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;AC6CjB;AA3CN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA;AAI3F,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,eAAa,mBAAmB;AAAA,MAChC,iBAAc;AAAA,MACd,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MAEV,8BAAC,oBAAiB;AAAA;AAAA,EACpB;AAEJ;",
   "names": []
 }

package/dist/esm/parts/LiveRegion.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
-import ComboBoxContext from "../ComboBoxCTX";
-import { StyledA11ySelectedValues } from "./styled";
-import { getSelectableOptions, isSelected } from "../utils/listHelper";
-import { ComboboxDataTestid } from "../ComboboxDataTestids";
+import ComboBoxContext from "../ComboBoxCTX.js";
+import { StyledA11ySelectedValues } from "./styled.js";
+import { getSelectableOptions, isSelected } from "../utils/listHelper.js";
+import { ComboboxDataTestid } from "../ComboboxDataTestids.js";
 const LiveRegion = () => {
   const {
     props: { selectedValues, filteredOptions },

package/dist/esm/parts/LiveRegion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/LiveRegion.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { getSelectableOptions, isSelected } from '../utils/listHelper';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const LiveRegion = (): JSX.Element => {\n  const {\n    props: { selectedValues, filteredOptions },\n    hasFocus,\n    focusOptionIdx,\n    menuState,\n  } = useContext(ComboBoxContext);\n\n  const selectabledOptions = getSelectableOptions(filteredOptions);\n  const focusOption = filteredOptions.find((option) => option.dsId === focusOptionIdx);\n  const isFocusOptionSelected = focusOption?.type === 'option' && isSelected(selectedValues, focusOption);\n  const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n  const navigationContext =\n    'Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu';\n  const ariaFocused = useMemo(() => {\n    if (menuState && focusOption && focusOption.type === 'option')\n      return (\n        <StyledA11ySelectedValues key={menuState} aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n          {`option ${focusOption?.label} ${isFocusOptionSelected ? 'selected and ' : ''}focused .${\n            focusSelectableOptionIdx + 1\n          } of ${selectabledOptions.length}. ${navigationContext} `}\n        </StyledA11ySelectedValues>\n      );\n    if (focusOption?.type === 'creatable')\n      return (\n        <StyledA11ySelectedValues\n          key={menuState}\n          aria-live=\"assertive\"\n          aria-atomic=\"false\"\n          aria-relevant=\"additions text\"\n        >\n          {`Press enter to Add option written in input box. ${navigationContext}`}\n        </StyledA11ySelectedValues>\n      );\n    return null;\n  }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);\n\n  const ariaSelected = useMemo(() => {\n    if (Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return `Options selected: ${selectedValues.map((item) => item.label).join(', ')}`;\n    }\n    if (selectedValues) {\n      return `Option selected: ${selectedValues?.label}`;\n    }\n    return 'No Option Selected';\n  }, [selectedValues]);\n\n  const ScreenReaderText = (\n    <>\n      <span id=\"aria-selection\">{ariaSelected}</span>\n      <span id=\"aria-context\">{ariaFocused}</span>\n    </>\n  );\n\n  return (\n    <StyledA11ySelectedValues\n      data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      aria-relevant=\"additions text\"\n    >\n      {hasFocus && ScreenReaderText}\n    </StyledA11ySelectedValues>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwBf,SA+BJ,UA/BI,KA+BJ,YA/BI;AAxBR,SAAgB,YAAY,eAAe;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,kBAAkB;AAEjD,SAAS,0BAA0B;AAC5B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,gBAAgB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,qBAAqB,qBAAqB,eAAe;AAC/D,QAAM,cAAc,gBAAgB,KAAK,CAAC,WAAW,OAAO,SAAS,cAAc;AACnF,QAAM,wBAAwB,aAAa,SAAS,YAAY,WAAW,gBAAgB,WAAW;AACtG,QAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,QAAM,oBACJ;AACF,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,aAAa,eAAe,YAAY,SAAS;AACnD,aACE,oBAAC,4BAAyC,aAAU,UAAS,eAAY,SAAQ,iBAAc,kBAC5F,oBAAU,aAAa,SAAS,wBAAwB,kBAAkB,cACzE,2BAA2B,QACtB,mBAAmB,WAAW,wBAHR,SAI/B;AAEJ,QAAI,aAAa,SAAS;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,aAAU;AAAA,UACV,eAAY;AAAA,UACZ,iBAAc;AAAA,UAEb,6DAAmD;AAAA;AAAA,QAL/C;AAAA,MAMP;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,WAAW,uBAAuB,0BAA0B,mBAAmB,MAAM,CAAC;AAEvG,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AAC9D,aAAO,qBAAqB,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI;AAAA,IAChF;AACA,QAAI,gBAAgB;AAClB,aAAO,oBAAoB,gBAAgB;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,mBACJ,iCACE;AAAA,wBAAC,UAAK,IAAG,kBAAkB,wBAAa;AAAA,IACxC,oBAAC,UAAK,IAAG,gBAAgB,uBAAY;AAAA,KACvC;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,mBAAmB;AAAA,MAChC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAc;AAAA,MAEb,sBAAY;AAAA;AAAA,EACf;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { StyledA11ySelectedValues } from './styled.js';\nimport { getSelectableOptions, isSelected } from '../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nexport const LiveRegion = (): JSX.Element => {\n  const {\n    props: { selectedValues, filteredOptions },\n    hasFocus,\n    focusOptionIdx,\n    menuState,\n  } = useContext(ComboBoxContext);\n\n  const selectabledOptions = getSelectableOptions(filteredOptions);\n  const focusOption = filteredOptions.find((option) => option.dsId === focusOptionIdx);\n  const isFocusOptionSelected = focusOption?.type === 'option' && isSelected(selectedValues, focusOption);\n  const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n  const navigationContext =\n    'Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu';\n  const ariaFocused = useMemo(() => {\n    if (menuState && focusOption && focusOption.type === 'option')\n      return (\n        <StyledA11ySelectedValues key={menuState} aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n          {`option ${focusOption?.label} ${isFocusOptionSelected ? 'selected and ' : ''}focused .${\n            focusSelectableOptionIdx + 1\n          } of ${selectabledOptions.length}. ${navigationContext} `}\n        </StyledA11ySelectedValues>\n      );\n    if (focusOption?.type === 'creatable')\n      return (\n        <StyledA11ySelectedValues\n          key={menuState}\n          aria-live=\"assertive\"\n          aria-atomic=\"false\"\n          aria-relevant=\"additions text\"\n        >\n          {`Press enter to Add option written in input box. ${navigationContext}`}\n        </StyledA11ySelectedValues>\n      );\n    return null;\n  }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);\n\n  const ariaSelected = useMemo(() => {\n    if (Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return `Options selected: ${selectedValues.map((item) => item.label).join(', ')}`;\n    }\n    if (selectedValues) {\n      return `Option selected: ${selectedValues?.label}`;\n    }\n    return 'No Option Selected';\n  }, [selectedValues]);\n\n  const ScreenReaderText = (\n    <>\n      <span id=\"aria-selection\">{ariaSelected}</span>\n      <span id=\"aria-context\">{ariaFocused}</span>\n    </>\n  );\n\n  return (\n    <StyledA11ySelectedValues\n      data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      aria-relevant=\"additions text\"\n    >\n      {hasFocus && ScreenReaderText}\n    </StyledA11ySelectedValues>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBf,SA+BJ,UA/BI,KA+BJ,YA/BI;AAvBR,SAAgB,YAAY,eAAe;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,kBAAkB;AACjD,SAAS,0BAA0B;AAC5B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,gBAAgB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,qBAAqB,qBAAqB,eAAe;AAC/D,QAAM,cAAc,gBAAgB,KAAK,CAAC,WAAW,OAAO,SAAS,cAAc;AACnF,QAAM,wBAAwB,aAAa,SAAS,YAAY,WAAW,gBAAgB,WAAW;AACtG,QAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,QAAM,oBACJ;AACF,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,aAAa,eAAe,YAAY,SAAS;AACnD,aACE,oBAAC,4BAAyC,aAAU,UAAS,eAAY,SAAQ,iBAAc,kBAC5F,oBAAU,aAAa,SAAS,wBAAwB,kBAAkB,cACzE,2BAA2B,QACtB,mBAAmB,WAAW,wBAHR,SAI/B;AAEJ,QAAI,aAAa,SAAS;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,aAAU;AAAA,UACV,eAAY;AAAA,UACZ,iBAAc;AAAA,UAEb,6DAAmD;AAAA;AAAA,QAL/C;AAAA,MAMP;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,WAAW,uBAAuB,0BAA0B,mBAAmB,MAAM,CAAC;AAEvG,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AAC9D,aAAO,qBAAqB,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI;AAAA,IAChF;AACA,QAAI,gBAAgB;AAClB,aAAO,oBAAoB,gBAAgB;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,mBACJ,iCACE;AAAA,wBAAC,UAAK,IAAG,kBAAkB,wBAAa;AAAA,IACxC,oBAAC,UAAK,IAAG,gBAAgB,uBAAY;AAAA,KACvC;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,mBAAmB;AAAA,MAChC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAc;AAAA,MAEb,sBAAY;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

package/dist/esm/parts/container/Container.js

@@ -1,14 +1,14 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useContext } from "react";
-import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-utilities";
+import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
-import ComboBoxContext from "../../ComboBoxCTX";
-import { StyledContainer, StyledPopperWrapper } from "./styled";
-import { Controls } from "../controls";
-import { MenuList } from "../menu-list";
-import { ComboboxDataTestid } from "../../ComboboxDataTestids";
-import { LiveRegion } from "../LiveRegion";
+import ComboBoxContext from "../../ComboBoxCTX.js";
+import { StyledContainer, StyledPopperWrapper } from "./styled.js";
+import { Controls } from "../controls/index.js";
+import { MenuList } from "../menu-list/index.js";
+import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
+import { LiveRegion } from "../LiveRegion.js";
 const Container = () => {
   const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);
   const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;

package/dist/esm/parts/container/Container.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { LiveRegion } from '../LiveRegion';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n  const globalAttributes = useGetGlobalAttributes(props);\n  const xStyledProps = useGetXstyledProps(props);\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId, ...containerGlobals } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (internalRef?.current) internalRef.current.blur();\n  }, [internalRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [setMenuState]);\n\n  return useMemo(\n    () => (\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        ref={setReferenceElement}\n        className={className}\n        {...xStyledProps}\n      >\n        <LiveRegion />\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            <DSPopperJS\n              customOffset={[0, 5]}\n              referenceElement={referenceElement}\n              showPopover={menuState}\n              closeContextMenu={handleCloseMenu}\n              startPlacementPreference={startPlacementPreference}\n              placementOrderPreference={placementOrderPreference}\n              withoutPortal={withoutPortal}\n              withoutArrow\n              withoutAnimation\n              zIndex={zIndex}\n            >\n              <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n                <MenuList />\n              </StyledPopperWrapper>\n            </DSPopperJS>\n          </>\n        )}\n      </StyledContainer>\n    ),\n    [\n      dataTestId,\n      setReferenceElement,\n      className,\n      xStyledProps,\n      inline,\n      referenceElement,\n      menuState,\n      handleCloseMenu,\n      startPlacementPreference,\n      placementOrderPreference,\n      withoutPortal,\n      zIndex,\n      handleMouseDown,\n    ],\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n  const globalAttributes = useGetGlobalAttributes(props);\n  const xStyledProps = useGetXstyledProps(props);\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId, ...containerGlobals } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (internalRef?.current) internalRef.current.blur();\n  }, [internalRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [setMenuState]);\n\n  return useMemo(\n    () => (\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        ref={setReferenceElement}\n        className={className}\n        {...xStyledProps}\n      >\n        <LiveRegion />\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            <DSPopperJS\n              customOffset={[0, 5]}\n              referenceElement={referenceElement}\n              showPopover={menuState}\n              closeContextMenu={handleCloseMenu}\n              startPlacementPreference={startPlacementPreference}\n              placementOrderPreference={placementOrderPreference}\n              withoutPortal={withoutPortal}\n              withoutArrow\n              withoutAnimation\n              zIndex={zIndex}\n            >\n              <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n                <MenuList />\n              </StyledPopperWrapper>\n            </DSPopperJS>\n          </>\n        )}\n      </StyledContainer>\n    ),\n    [\n      dataTestId,\n      setReferenceElement,\n      className,\n      xStyledProps,\n      inline,\n      referenceElement,\n      menuState,\n      handleCloseMenu,\n      startPlacementPreference,\n      placementOrderPreference,\n      withoutPortal,\n      zIndex,\n      handleMouseDown,\n    ],\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACiDf,SAEE,UAFF,KAEE,YAFF;AAhDR,SAAgB,aAAa,WAAW,SAAS,kBAAkB;AACnE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAEpB,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,IACzF,WAAW,eAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AAC9F,QAAM,mBAAmB,uBAAuB,KAAK;AACrD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,WAAW,eAAe,eAAe,iBAAiB,IAAI;AACtE,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa;AAAS,kBAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,cAAc,mBAAmB;AAAA,QAC9C,KAAK;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,cAAW;AAAA,UACX,SACC,iCACE;AAAA,gCAAC,YAAS;AAAA,YACV,oBAAC,YAAS;AAAA,aACZ,IAEA,iCACE;AAAA,gCAAC,YAAS;AAAA,YACV;AAAA,cAAC;AAAA;AAAA,gBACC,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAa;AAAA,gBACb,kBAAkB;AAAA,gBAClB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,cAAY;AAAA,gBACZ,kBAAgB;AAAA,gBAChB;AAAA,gBAEA,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAC9C,8BAAC,YAAS,GACZ;AAAA;AAAA,YACF;AAAA,aACF;AAAA;AAAA;AAAA,IAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/container/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Container } from "./Container";
+import { Container } from "./Container.js";
 export {
   Container
 };

package/dist/esm/parts/container/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { Container } from './Container';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { Container } from './Container.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;",
   "names": []
 }

package/dist/esm/parts/container/styled.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { styled, xStyledCommonProps } from "@elliemae/ds-system";
-import { DSComboBoxName, DSComboboxSlots } from "../../theming";
+import { DSComboBoxName, DSComboboxSlots } from "../../theming.js";
 const StyledContainer = styled("div", {
   name: DSComboBoxName,
   slot: DSComboboxSlots.CONTAINER

package/dist/esm/parts/container/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming';\n\nexport const StyledContainer = styled('div', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.CONTAINER,\n})`\n  position: relative;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledPopperWrapper = styled('div')`\n  position: relative;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  overflow: auto;\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledContainer = styled('div', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.CONTAINER,\n})`\n  position: relative;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledPopperWrapper = styled('div')`\n  position: relative;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  overflow: auto;\n`;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA,IACtD;AAAA;AAGG,MAAM,sBAAsB,OAAO,KAAK;AAAA;AAAA,YAEnC,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/controls/Controls.js

@@ -1,19 +1,19 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useCallback } from "react";
-import { DropdownIndicator } from "../DropdownIndicator";
-import { ComboboxDataTestid } from "../../ComboboxDataTestids";
-import ComboBoxContext from "../../ComboBoxCTX";
+import { DropdownIndicator } from "../DropdownIndicator.js";
+import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
+import ComboBoxContext from "../../ComboBoxCTX.js";
 import {
   StyledControlsWrapper,
   StyleHeaderActionsSeparator,
   StyledHeaderActionsWrapper,
   StyledSelection
-} from "./styled";
-import { MultiSelectedValuesContainer } from "../multi-selected-values-container";
-import { ControlsInput } from "../controls-input/ControlsInput";
-import { useOnPillsNavigation } from "./useOnPillsNavigation";
-import { RemovableSelectedValuePill } from "../multi-selected-values-container/RemovableSelectedValuePill";
+} from "./styled.js";
+import { MultiSelectedValuesContainer } from "../multi-selected-values-container/index.js";
+import { ControlsInput } from "../controls-input/ControlsInput.js";
+import { useOnPillsNavigation } from "./useOnPillsNavigation.js";
+import { RemovableSelectedValuePill } from "../multi-selected-values-container/RemovableSelectedValuePill.js";
 const Controls = () => {
   const {
     props: { inline, disabled, inputMinWidth, hasError, selectedValues },