npm - @elliemae/ds-form-combobox - Versions diffs - 3.16.0-next.2 → 3.16.0-next.20 - Mend

@elliemae/ds-form-combobox 3.16.0-next.2 → 3.16.0-next.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (194) hide show

package/dist/cjs/sharedTypes.js.map CHANGED Viewed

@@ -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"],
-  "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;",
+  "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/tests/utils.js CHANGED Viewed

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/tests/utils.js.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/tests/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const basicOptions = [\n  {\n    dsId: '1',\n    type: 'option',\n    value: 'id_1',\n    label: 'Luke Skywalker too long this text is super long',\n  },\n  {\n    dsId: '2',\n    type: 'option',\n    value: 'id_2',\n    label: 'Obi-Wan Kenobi',\n  },\n  {\n    dsId: '3',\n    type: 'option',\n    value: 'id_3',\n    label: 'Padme Amidala',\n  },\n  {\n    dsId: '4',\n    type: 'option',\n    value: 'id_4',\n    label: 'Harry Potter',\n  },\n];\n\nexport const groupedOptions = [\n  {\n    dsId: '1',\n    type: 'option',\n    value: 'id_1',\n    label: 'Luke Skywalker too long this text is super long',\n  },\n  {\n    dsId: '2',\n    type: 'option',\n    value: 'id_2',\n    label: 'Obi-Wan Kenobi',\n  },\n  {\n    dsId: 'separator',\n    type: 'separator',\n  },\n  {\n    dsId: 'section',\n    type: 'section',\n    label: 'Group A',\n  },\n  {\n    dsId: '3',\n    type: 'option',\n    value: 'id_3',\n    label: 'Padme Amidala',\n  },\n];\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/dist/cjs/theming.js CHANGED Viewed

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/theming.js.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/theming.ts", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const DSComboBoxName = 'DSCombobox';\n\nexport const DSComboboxSlots = {\n  CONTAINER: 'root',\n  INPUT_WRAPPER: 'input-wrapper',\n  INPUT: 'input',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,eAAe;AAAA,EACf,OAAO;AACT;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,eAAe;AAAA,EACf,OAAO;AACT;",
   "names": []
 }

package/dist/cjs/utils/listHelper.js CHANGED Viewed

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -40,7 +44,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 CHANGED Viewed

@@ -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"],
-  "mappings": "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",
+  "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": "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",
   "names": []
 }

package/dist/esm/ComboBox.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -14,6 +14,7 @@ const defaultProps = {
   noOptionsMessage: "No Matches Found",
   isNonClearable: false,
   onlySelectable: false
+  // override in useCombobox to avoid ref duplications when more than one cb is used
 };
 const defaultContext = {
   props: defaultProps,

package/dist/esm/ComboBoxCTX.js.map CHANGED Viewed

@@ -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"],
-  "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;",
+  "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;AAAA;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 CHANGED Viewed

@@ -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);
@@ -48,6 +48,7 @@ const useComboBox = (props) => {
     (dsId, opts = { align: "center" }) => {
       virtualListHelpers.scrollToIndex(
         correctOptions.findIndex((opt) => opt.dsId === dsId),
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         opts
       );
     },

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

@@ -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"],
-  "mappings": "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",
+  "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": "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",
   "names": []
 }

package/dist/esm/config/useCorrectOptions.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

package/dist/esm/parts/DropdownIndicator.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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"],
-  "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;",
+  "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,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAIhG,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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"],
-  "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;",
+  "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,YAAY,GAAG,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 },

package/dist/esm/parts/controls/Controls.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/Controls.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../LiveRegion';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      internalRef.current?.blur();\n      return;\n    }\n    internalRef.current?.focus();\n    setMenuState(true);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        internalRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, internalRef, disabled, setMenuState],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === internalRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [internalRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../LiveRegion.js';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill.js';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      internalRef.current?.blur();\n      return;\n    }\n    internalRef.current?.focus();\n    setMenuState(true);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        internalRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, internalRef, disabled, setMenuState],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === internalRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [internalRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;AC2FX,cAWJ,YAXI;AAzFZ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AAGrC,SAAS,kCAAkC;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,IAAI,qBAAqB;AAEhD,QAAM,OAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,eAAa,mBAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,oBAAC,mBAAgB,KAAK,oBAAoB,SAAS,oBAChD,gBAAM,QAAQ,cAAc,IAC3B,oBAAC,gCAA6B,IAE9B,oBAAC,SAAI,eAAa,mBAAmB,iBAClC,4BAAkB,oBAAC,8BAA2B,MAAM,gBAAgB,GACvE,GAEJ;AAAA,QAGF,oBAAC,iBAAc;AAAA,QACd,CAAC,UACA,qBAAC,8BAA2B,gBAAe,UAAS,MAAM,CAAC,eAAe,aAAa,GACrF;AAAA,8BAAC,+BAA4B,UAAoB;AAAA,UACjD,oBAAC,qBAAkB;AAAA,WACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

package/dist/esm/parts/controls/index.js CHANGED Viewed

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