@elliemae/ds-form-combobox 3.51.0-next.1 → 3.51.0-next.12

package/dist/esm/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/sharedTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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    correctOptions: DSComboboxT.OptionTypes[];\n    instanceUid: string;\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;AAoC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\n\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    internalRef: React.RefObject<HTMLInputElement>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string, opts: DSFastListT.ScrollToOptions) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.MutableRefObject<DSComboboxT.ActionRefVirtualized>;\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    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    setMenuState: (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    correctOptions: DSComboboxT.OptionTypes[];\n    instanceUid: string;\n    optionsPerSection: DSComboboxT.OptionTypes[];\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,yBAAyB;AA+B3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
   "names": []
 }

package/dist/esm/utils/listHelper.js

@@ -17,8 +17,13 @@ function isArrayOfItems(value) {
 }
 const isItem = (value) => !Array.isArray(value) && value !== null && typeof value === "object";
 const findInCircularList = (list, from, criteria, step = 1) => {
-  for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
+  if (list.length === 0) return from;
+  let i = (from + step + list.length) % list.length;
+  let iterations = 0;
+  while (iterations < list.length) {
     if (criteria(list[i])) return i;
+    i = (i + step + list.length) % list.length;
+    iterations += 1;
   }
   return from;
 };
@@ -58,26 +63,6 @@ const filterOptions = (inputValue, options) => {
     (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase())
   );
 };
-const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
-  const items = [];
-  if (optionsToParse)
-    optionsToParse.forEach((option) => {
-      if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {
-        items.push(option);
-      }
-      if (option.type === MENU_OPTION_TYPES.SECTION) {
-        if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
-          items[items.length - 1] = option;
-        } else {
-          items.push(option);
-        }
-      }
-    });
-  if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
-    items.pop();
-  }
-  return items;
-};
 const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));
 const scrollIfNeeded = (elem, options = { behavior: "smooth", block: "end", inline: "nearest" }) => {
   const bounding = elem.getBoundingClientRect();
@@ -98,7 +83,6 @@ export {
   isSelected,
   isSelectedValueEmpty,
   isSelectedValueMultiple,
-  scrollIfNeeded,
-  selectedValuesWithSections
+  scrollIfNeeded
 };
 //# sourceMappingURL=listHelper.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/listHelper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[] {\n  return Array.isArray(value) && value.length > 0;\n}\n\nexport const isItem = (value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption =>\n  !Array.isArray(value) && value !== null && typeof value === 'object';\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,yBAAyB;AAC3B,MAAM,uBAAuB,CAAC,YACnC,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,CAAC,OAAO,QAAQ;AAElF,MAAM,aAAa,CAAC,YACzB,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,kBAAkB,MAAM;AAE9D,MAAM,uBAAuB,CAAC,UACnC,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAExC,MAAM,0BAA0B,CAAC,UAAiD,MAAM,QAAQ,KAAK;AAErG,MAAM,aAAa,CAAC,OAAqC,iBAAkD;AAChH,MAAI,wBAAwB,KAAK,GAAG;AAClC,UAAM,aAAa;AACnB,WAAO,WAAW,KAAK,CAAC,SAAS,MAAM,UAAU,cAAc,KAAK;AAAA,EACtE;AACA,QAAM,cAAc;AACpB,SAAO,aAAa,UAAU,aAAa;AAC7C;AAEO,SAAS,eAAe,OAAwE;AACrG,SAAO,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS;AAChD;AAEO,MAAM,SAAS,CAAC,UACrB,CAAC,MAAM,QAAQ,KAAK,KAAK,UAAU,QAAQ,OAAO,UAAU;AAEvD,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,mBAAiD;AACpF,MAAI,MAAM,QAAQ,cAAc,GAAG;AACjC,WAAO,eAAe,eAAe,SAAS,CAAC;AAAA,EACjD;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAC5B,SACA,mBACW;AACX,QAAM,YAAY,qBAAqB,cAAc;AACrD,MAAI,UAAW,QAAO,UAAU;AAEhC,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,CAAC,EAAE,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,UAAU;AAC/E,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AAEF,SAAO;AACT;AAEO,MAAM,4BAA4B,CACvC,gBACA,gBACA,mBACG;AACH,MAAI,MAAM,QAAQ,cAAc,GAAG;AACjC,UAAM,UAAU,eAAe,KAAK,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,UAAU,eAAe,KAAK;AAC3G,QAAI,SAAS;AACX,UAAI,eAAgB,QAAO;AAC3B,aAAO,eAAe,OAAO,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,UAAU,eAAe,KAAK;AAAA,IACtG;AACA,WAAO,CAAC,GAAG,gBAAgB,cAAc;AAAA,EAC3C;AACA,MAAI,kBAAkB,eAAe,SAAS,eAAe,MAAM;AACjE,QAAI,eAAgB,QAAO;AAC3B,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,gBAAgB,CAAC,YAAoB,YAAuC;AACvF,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,QAAQ;AAAA,IACb,CAAC,WACC,OAAO,SAAS,kBAAkB,UAAU,OAAO,MAAM,YAAY,EAAE,SAAS,WAAW,YAAY,CAAC;AAAA,EAC5G;AACF;AAEO,MAAM,6BAA6B,CACxC,gBACA,uBACG;AACH,QAAM,QAAQ,CAAC;AAEf,MAAI;AACF,mBAAe,QAAQ,CAAC,WAAW;AAEjC,UAAI,OAAO,SAAS,kBAAkB,UAAU,WAAW,oBAAoB,MAAM,GAAG;AACtF,cAAM,KAAK,MAAM;AAAA,MACnB;AAEA,UAAI,OAAO,SAAS,kBAAkB,SAAS;AAC7C,YAAI,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,kBAAkB,SAAS;AAC/D,gBAAM,MAAM,SAAS,CAAC,IAAI;AAAA,QAC5B,OAAO;AACL,gBAAM,KAAK,MAAM;AAAA,QACnB;AAAA,MACF;AAAA,IACF,CAAC;AACH,MAAI,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,kBAAkB,SAAS;AAC/D,UAAM,IAAI;AAAA,EACZ;AAEA,SAAO;AACT;AAEO,MAAM,6BAA6B,CACxC,gBACA,mBACG,eAAe,OAAO,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,WAAW,gBAAgB,MAAM,CAAC;AAE9G,MAAM,iBAAiB,CAC5B,MACA,UAAU,EAAE,UAAU,UAAU,OAAO,OAAO,QAAQ,UAAU,MAC7D;AACH,QAAM,WAAW,KAAK,sBAAsB;AAC5C,MACE,EACE,SAAS,OAAO,KAChB,SAAS,QAAQ,KACjB,SAAS,WAAW,OAAO,eAAe,SAAS,gBAAgB,iBACnE,SAAS,UAAU,OAAO,cAAc,SAAS,gBAAgB;AAGnE,SAAK,eAAe,OAAO;AAC/B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport 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 function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[] {\n  return Array.isArray(value) && value.length > 0;\n}\n\nexport const isItem = (value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption =>\n  !Array.isArray(value) && value !== null && typeof value === 'object';\n\nexport const findInCircularList = (\n  list: DSComboboxT.OptionTypes[],\n  from: number,\n  criteria: (item: DSComboboxT.OptionTypes) => boolean,\n  step = 1,\n): number => {\n  if (list.length === 0) return from;\n\n  let i = (from + step + list.length) % list.length;\n  let iterations = 0;\n\n  while (iterations < list.length) {\n    if (criteria(list[i])) return i;\n\n    i = (i + step + list.length) % list.length;\n    iterations += 1;\n  }\n\n  return from; // Return the original index if no match is found\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 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"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/ComboboxDataTestids.d.ts

@@ -1,8 +1,4 @@
 export declare const ComboboxDataTestid: {
-    MULTISELECT: {
-        HEADER_LIST: string;
-        SHOW_SELECTED_OPTIONS_TOGGLE: string;
-    };
     CONTROLS_WRAPPER: string;
     CONTAINER: string;
     INPUT: string;

package/dist/types/config/useClickOutside.d.ts

@@ -0,0 +1 @@
+export declare function useOnClickOutside<T extends Node, CbT extends (event: Event) => void, Z extends Node>(ref: T | null, cb: CbT, excludeNode: Z | null): void;

package/dist/types/config/useCorrectOptions.d.ts

@@ -1,3 +1,3 @@
 import type { DSComboboxT } from '../react-desc-prop-types.js';
-declare const useCorrectOptions: (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => DSComboboxT.OptionTypes[];
+declare const useCorrectOptions: (propsWithDefaults: DSComboboxT.Props, inputValue: string) => DSComboboxT.OptionTypes[];
 export { useCorrectOptions };

package/dist/types/config/useOptionsPerSection.d.ts

@@ -0,0 +1,2 @@
+import type { DSComboboxT } from '../react-desc-prop-types.js';
+export declare const useOptionsPerSection: (correctOptions: DSComboboxT.OptionTypes[]) => DSComboboxT.OptionTypes[];

package/dist/types/parts/Section.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { DSComboboxT } from '../react-desc-prop-types.js';
+interface SectionProps {
+    label: string;
+    wrapperStyles: React.CSSProperties;
+    innerRef: (instance: HTMLDivElement | null) => void;
+    options: DSComboboxT.ItemOption[] | DSComboboxT.ItemSeparatorOptions[];
+    handleClick: (option: DSComboboxT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;
+    handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;
+    focusOptionIdx: string;
+    selectedValues: DSComboboxT.SelectedOptionsT;
+}
+export declare const Section: React.MemoExoticComponent<(props: SectionProps) => import("react/jsx-runtime.js").JSX.Element>;
+export {};

package/dist/types/parts/controls/styled.d.ts

@@ -5,11 +5,13 @@ interface StyledControlsWrapperT {
     minWidth?: number;
     disabled: boolean;
     applyAriaDisabled: boolean;
+    readOnly: boolean;
 }
 export declare const StyledControlsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledControlsWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 export declare const StyledSingleSelectWraper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     disabled: boolean;
     applyAriaDisabled: boolean;
+    readOnly: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledSelection: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledHeaderActionsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;

package/dist/types/parts/controls-input/styled.d.ts

@@ -1,4 +1,6 @@
-export declare const StyleHiddenInput: import("styled-components").StyledComponent<"input", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"input">, never>;
+export declare const StyleHiddenInput: import("styled-components").StyledComponent<"input", import("@elliemae/ds-system").Theme, {
+    isDisabled: boolean;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"input">, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@elliemae/ds-system").Theme, {
     withoutCaret: boolean;
     applyAriaDisabled: boolean;

package/dist/types/parts/menu-list/styled.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SizingProps } from '@elliemae/ds-system';
 interface StyledListWrapperT {
     minWidth: SizingProps['minWidth'];
@@ -5,13 +6,7 @@ interface StyledListWrapperT {
     width: number | string;
     inline?: boolean;
 }
-export declare const StyledListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledListWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledList: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"ul">, never>;
-export declare const StyledVirtualListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
-    inline: boolean | undefined;
-    maxHeight: SizingProps['maxHeight'];
-    withHeader?: boolean | undefined;
-} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledListWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledListWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 export declare const StyledCreatableLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledCreatableValue: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledNoResultsWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/parts/menu-list/useItemRenderer.d.ts

@@ -1,2 +1,10 @@
 /// <reference types="react" />
-export declare const useItemRenderer: () => Array<JSX.Element> | null;
+import type { DSComboboxT } from '../../react-desc-prop-types.js';
+interface ItemRendererT {
+    extraItemProps?: {
+        itemList: DSComboboxT.OptionTypes[];
+    };
+    index: number;
+}
+export declare const ItemRenderer: ({ index, extraItemProps }: ItemRendererT) => JSX.Element;
+export {};

package/dist/types/parts/multi-selected-values-container/RemovableSelectedValuePill.d.ts

@@ -3,4 +3,5 @@ import type { DSComboboxT } from '../../react-desc-prop-types.js';
 export declare const RemovableSelectedValuePill: React.ComponentType<{
     pill: DSComboboxT.ItemOption;
     applyAriaDisabled?: boolean;
+    trailingComma?: boolean;
 }>;

package/dist/types/react-desc-prop-types.d.ts

@@ -1,8 +1,10 @@
 import type React from 'react';
 import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
+import type { DSFloatingWrapperT } from '@elliemae/ds-floating-context';
 import type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';
 import type { SizingProps } from '@elliemae/ds-system';
 import type { DSPopperJST } from '@elliemae/ds-popperjs';
+import type { DSFastListT } from '@elliemae/ds-fast-list';
 export declare function noop<T extends unknown[]>(..._args: T): void;
 export declare namespace DSComboboxT {
     interface CommonItemOptions extends GlobalAttributesT {
@@ -17,6 +19,7 @@ export declare namespace DSComboboxT {
     interface ItemSectionOptions extends CommonItemOptions {
         type: 'section';
         label: string;
+        options: OptionTypes[];
     }
     interface ItemOption extends CommonItemOptions {
         value: string;
@@ -44,6 +47,7 @@ export declare namespace DSComboboxT {
         onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;
         onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;
         isLoading?: boolean;
+        popperProps?: DSFloatingWrapperT.Props;
     }
     interface RequiredProps {
         allOptions: OptionTypes[];
@@ -64,11 +68,15 @@ export declare namespace DSComboboxT {
         onlySelectable: boolean;
         isSkeleton: boolean;
         applyAriaDisabled: boolean;
+        readOnly: boolean;
     }
     interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional, Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>, XstyledProps {
     }
     interface InternalProps extends DefaultProps, RequiredProps, PropsOptional, Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>, XstyledProps {
     }
+    type ActionRefVirtualized = {
+        scrollTo: (index: number, opts?: DSFastListT.ScrollToOptions) => void;
+    };
 }
 export declare const ComboboxPropTypes: {
     placeholder: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
@@ -92,6 +100,9 @@ export declare const ComboboxPropTypes: {
     onlySelectable: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     isSkeleton: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     applyAriaDisabled: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    readOnly: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    onSelectAll: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    popperProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     'aria-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     'on-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     'data-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
@@ -408,7 +419,6 @@ export declare const ComboboxPropTypes: {
     preload: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     property: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     radioGroup: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    readOnly: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     rel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     rev: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
     required: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;

package/dist/types/sharedTypes.d.ts

@@ -1,34 +1,28 @@
 import type React from 'react';
-import type { useVirtual } from 'react-virtual';
+import type { DSFastListT } from '@elliemae/ds-fast-list';
 import type { DSComboboxT } from './react-desc-prop-types.js';
 export declare namespace DSComboboxInternalsT {
     interface ComboBoxContextT {
         props: DSComboboxT.InternalProps;
         internalRef: React.RefObject<HTMLInputElement>;
-        virtualListHelpers?: ReturnType<typeof useVirtual>;
         menuState: boolean;
         setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;
-        referenceElement: HTMLElement | null;
-        setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
         pillGroupRef: React.RefObject<HTMLDivElement>;
-        scrollOptionIntoView: (dsId: string) => void;
+        scrollOptionIntoView: (dsId: string, opts: DSFastListT.ScrollToOptions) => void;
         setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;
         hasFocus: boolean;
-        listRef: React.RefObject<HTMLDivElement>;
+        listRef: React.MutableRefObject<DSComboboxT.ActionRefVirtualized>;
         wrapperListRef: React.RefObject<HTMLDivElement>;
         inputValue: string;
         setInputValue: React.Dispatch<React.SetStateAction<string>>;
         selectedOptionsRef: React.RefObject<HTMLDivElement>;
         controlsWrapperRef: React.RefObject<HTMLDivElement>;
-        selectAllCheckboxRef: React.RefObject<HTMLInputElement>;
-        toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;
         focusOptionIdx: string;
         setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;
-        showSelectedOptions: boolean;
-        setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;
         setMenuState: (newState: boolean, reason: string, e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>) => void;
         correctOptions: DSComboboxT.OptionTypes[];
         instanceUid: string;
+        optionsPerSection: DSComboboxT.OptionTypes[];
     }
 }
 export declare const isSeparator: (el: DSComboboxT.OptionTypes | undefined) => el is DSComboboxT.ItemSeparatorOptions;

package/dist/types/tests/read-only.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/listHelper.d.ts

@@ -11,6 +11,5 @@ export declare const getLastValueSelected: (selectedValues: DSComboboxT.Selected
 export declare const getFirstOption: (options: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.SelectedOptionsT) => string;
 export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.ItemOption, selectedValues: DSComboboxT.SelectedOptionsT, isNonClearable?: boolean) => DSComboboxT.ItemOption | DSComboboxT.ItemOption[] | null;
 export declare const filterOptions: (inputValue: string, options: DSComboboxT.OptionTypes[]) => DSComboboxT.OptionTypes[];
-export declare const selectedValuesWithSections: (optionsToParse: DSComboboxT.OptionTypes[], multiSelectedValue: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];
 export declare const getFilteredOptionsSelected: (filteredOption: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];
 export declare const scrollIfNeeded: (elem: HTMLElement, options?: ScrollIntoViewOptions | undefined) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-combobox",
-  "version": "3.51.0-next.1",
+  "version": "3.51.0-next.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Combobox",
   "files": [
@@ -25,8 +25,8 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "pnpm": ">=9",
+    "node": ">=22"
   },
   "author": "ICE MT",
   "jestSonar": {
@@ -38,26 +38,26 @@
   "dependencies": {
     "react-virtual": "~2.10.4",
     "uid": "~2.0.1",
-    "@elliemae/ds-button-v2": "3.51.0-next.1",
-    "@elliemae/ds-circular-progress-indicator": "3.51.0-next.1",
-    "@elliemae/ds-form-checkbox": "3.51.0-next.1",
-    "@elliemae/ds-grid": "3.51.0-next.1",
-    "@elliemae/ds-menu-items": "3.51.0-next.1",
-    "@elliemae/ds-icons": "3.51.0-next.1",
-    "@elliemae/ds-pills-v2": "3.51.0-next.1",
-    "@elliemae/ds-props-helpers": "3.51.0-next.1",
-    "@elliemae/ds-popperjs": "3.51.0-next.1",
-    "@elliemae/ds-system": "3.51.0-next.1",
-    "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.1"
+    "@elliemae/ds-button-v2": "3.51.0-next.12",
+    "@elliemae/ds-circular-progress-indicator": "3.51.0-next.12",
+    "@elliemae/ds-floating-context": "3.51.0-next.12",
+    "@elliemae/ds-form-checkbox": "3.51.0-next.12",
+    "@elliemae/ds-grid": "3.51.0-next.12",
+    "@elliemae/ds-menu-items": "3.51.0-next.12",
+    "@elliemae/ds-icons": "3.51.0-next.12",
+    "@elliemae/ds-pills-v2": "3.51.0-next.12",
+    "@elliemae/ds-props-helpers": "3.51.0-next.12",
+    "@elliemae/ds-system": "3.51.0-next.12",
+    "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.12"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.50",
+    "@elliemae/pui-cli": "9.0.0-next.55",
     "@elliemae/pui-theme": "~2.10.0",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.51.0-next.1",
-    "@elliemae/ds-monorepo-devops": "3.51.0-next.1"
+    "@elliemae/ds-form-helpers-mask-hooks": "3.51.0-next.12",
+    "@elliemae/ds-monorepo-devops": "3.51.0-next.12"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.10.0",

package/dist/cjs/parts/header-list/HeaderList.js

@@ -1,104 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  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
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var HeaderList_exports = {};
-__export(HeaderList_exports, {
-  HeaderList: () => HeaderList
-});
-module.exports = __toCommonJS(HeaderList_exports);
-var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ds_button_v2 = require("@elliemae/ds-button-v2");
-var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
-var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
-var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
-var import_styled = require("./styled.js");
-var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
-var import_useHeaderListHandlers = require("./useHeaderListHandlers.js");
-const HeaderList = () => {
-  const {
-    props: { selectedValues, onSelectAll },
-    showSelectedOptions,
-    selectAllCheckboxRef,
-    toggleSelectionButtonRef,
-    correctOptions: filteredOptions
-  } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
-  const multiSelectedValues = selectedValues;
-  const {
-    handleKeyDown,
-    handleOnMouseDown,
-    handleFilterSelectionBtnOnTab,
-    handleToggleSelectedValuesFilter,
-    handleCheckAllOnTab,
-    checkboxStatus,
-    handleSelectAllCheckboxChange
-  } = (0, import_useHeaderListHandlers.useHeaderListHandlers)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_styled.StyledHeaderListWrapper,
-    {
-      onKeyDown: handleKeyDown,
-      onMouseDown: handleOnMouseDown,
-      "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.HEADER_LIST,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelectAllCheckbox, { children: onSelectAll && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ds_form_checkbox.DSControlledCheckbox,
-          {
-            checked: checkboxStatus,
-            "aria-controls": filteredOptions.map((item) => item.dsId).join(" "),
-            name: "select-all-checkbox",
-            "aria-label": "Select/Unselect All Items",
-            "aria-labelledby": "",
-            id: "select-all-checkbox",
-            onChange: handleSelectAllCheckboxChange,
-            onKeyDown: handleCheckAllOnTab,
-            innerRef: selectAllCheckboxRef
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelectedItems, { children: multiSelectedValues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_styled.StyledButtonSelection,
-          {
-            onKeyDown: handleFilterSelectionBtnOnTab,
-            buttonType: import_ds_button_v2.BUTTON_TYPES.TEXT,
-            onClick: handleToggleSelectedValuesFilter,
-            size: import_ds_button_v2.BUTTON_SIZES.S,
-            "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
-            innerRef: toggleSelectionButtonRef,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText,
-              {
-                value: !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL"
-              }
-            )
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledNoOptionsSelected, { children: "0 SELECTED" }) })
-      ]
-    }
-  );
-};
-//# sourceMappingURL=HeaderList.js.map

package/dist/cjs/parts/header-list/HeaderList.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/parts/header-list/HeaderList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useContext } from 'react';\nimport { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n  StyledHeaderListWrapper,\n  StyledButtonSelection,\n  StyledSelectedItems,\n  StyledSelectAllCheckbox,\n  StyledNoOptionsSelected,\n} from './styled.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { useHeaderListHandlers } from './useHeaderListHandlers.js';\nexport const HeaderList = (): JSX.Element => {\n  const {\n    props: { selectedValues, onSelectAll },\n    showSelectedOptions,\n    selectAllCheckboxRef,\n    toggleSelectionButtonRef,\n    correctOptions: filteredOptions,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n  const {\n    handleKeyDown,\n    handleOnMouseDown,\n    handleFilterSelectionBtnOnTab,\n    handleToggleSelectedValuesFilter,\n    handleCheckAllOnTab,\n    checkboxStatus,\n    handleSelectAllCheckboxChange,\n  } = useHeaderListHandlers();\n\n  return (\n    <StyledHeaderListWrapper\n      onKeyDown={handleKeyDown}\n      onMouseDown={handleOnMouseDown}\n      data-testid={ComboboxDataTestid.MULTISELECT.HEADER_LIST}\n    >\n      <StyledSelectAllCheckbox>\n        {onSelectAll && (\n          <DSControlledCheckbox\n            checked={checkboxStatus}\n            aria-controls={filteredOptions.map((item) => item.dsId).join(' ')}\n            name=\"select-all-checkbox\"\n            aria-label=\"Select/Unselect All Items\"\n            aria-labelledby=\"\"\n            id=\"select-all-checkbox\"\n            onChange={handleSelectAllCheckboxChange}\n            onKeyDown={handleCheckAllOnTab}\n            innerRef={selectAllCheckboxRef}\n          />\n        )}\n      </StyledSelectAllCheckbox>\n      <StyledSelectedItems>\n        {multiSelectedValues.length > 0 ? (\n          <StyledButtonSelection\n            onKeyDown={handleFilterSelectionBtnOnTab}\n            buttonType={BUTTON_TYPES.TEXT}\n            onClick={handleToggleSelectedValuesFilter}\n            size={BUTTON_SIZES.S}\n            data-testid={ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE}\n            innerRef={toggleSelectionButtonRef}\n          >\n            <SimpleTruncatedTooltipText\n              value={!showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : 'SHOW ALL'}\n            ></SimpleTruncatedTooltipText>\n          </StyledButtonSelection>\n        ) : (\n          <StyledNoOptionsSelected>0 SELECTED</StyledNoOptionsSelected>\n        )}\n      </StyledSelectedItems>\n    </StyledHeaderListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCnB;AApCJ,mBAAkC;AAClC,0BAA2C;AAC3C,8BAAqC;AACrC,uCAA2C;AAC3C,yBAAgC;AAChC,oBAMO;AAEP,iCAAmC;AACnC,mCAAsC;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,QAAI,yBAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oDAAsB;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,eAAa,8CAAmB,YAAY;AAAA,MAE5C;AAAA,oDAAC,yCACE,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,iBAAe,gBAAgB,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,YAChE,MAAK;AAAA,YACL,cAAW;AAAA,YACX,mBAAgB;AAAA,YAChB,IAAG;AAAA,YACH,UAAU;AAAA,YACV,WAAW;AAAA,YACX,UAAU;AAAA;AAAA,QACZ,GAEJ;AAAA,QACA,4CAAC,qCACE,8BAAoB,SAAS,IAC5B;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,YAAY,iCAAa;AAAA,YACzB,SAAS;AAAA,YACT,MAAM,iCAAa;AAAA,YACnB,eAAa,8CAAmB,YAAY;AAAA,YAC5C,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,CAAC,sBAAsB,kBAAkB,oBAAoB,MAAM,MAAM;AAAA;AAAA,YACjF;AAAA;AAAA,QACH,IAEA,4CAAC,yCAAwB,wBAAU,GAEvC;AAAA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
-}

package/dist/cjs/parts/header-list/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/parts/header-list/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { HeaderList } from './HeaderList.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA2B;",
-  "names": []
-}

package/dist/cjs/parts/header-list/styled.js

@@ -1,85 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  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
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var styled_exports = {};
-__export(styled_exports, {
-  StyledButtonSelection: () => StyledButtonSelection,
-  StyledHeaderListWrapper: () => StyledHeaderListWrapper,
-  StyledNoOptionsSelected: () => StyledNoOptionsSelected,
-  StyledSelectAllCheckbox: () => StyledSelectAllCheckbox,
-  StyledSelectedItems: () => StyledSelectedItems
-});
-module.exports = __toCommonJS(styled_exports);
-var React = __toESM(require("react"));
-var import_ds_system = require("@elliemae/ds-system");
-var import_ds_button_v2 = require("@elliemae/ds-button-v2");
-const StyledHeaderListWrapper = import_ds_system.styled.div`
-  display: flex;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  justify-content: space-between;
-  width: inherit;
-  padding: 5px 12px 5px 16px;
-  @media (max-width: ${import_ds_system.th.breakpoint("small")}) {
-    padding: 3.25px 12px 3.25px 16px;
-  }
-
-  background-color: #fff;
-  box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};
-  overflow-x: hidden;
-
-  & button {
-    font-size: 1rem;
-  }
-`;
-const StyledButtonSelection = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
-  border-radius: 0px;
-  padding: 0 ${(props) => props.theme.space.xxs};
-  margin: 0;
-  font-size: 1rem;
-  align-items: center;
-  transition: unset;
-  &:hover:not([disabled]) {
-    background-color: transparent;
-    color: ${(props) => props.theme.colors.brand["700"]};
-  }
-`;
-const StyledSelectedItems = import_ds_system.styled.div`
-  display: flex;
-  align-items: center;
-`;
-const StyledNoOptionsSelected = import_ds_system.styled.div`
-  padding: 0 ${(props) => props.theme.space.xxs};
-  font-size: 1rem;
-`;
-const StyledSelectAllCheckbox = import_ds_system.styled.div`
-  display: flex;
-  align-items: center;
-`;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/parts/header-list/styled.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/parts/header-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-len */\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nexport const StyledHeaderListWrapper = styled.div`\n  display: flex;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  justify-content: space-between;\n  width: inherit;\n  padding: 5px 12px 5px 16px;\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: 3.25px 12px 3.25px 16px;\n  }\n\n  background-color: #fff;\n  box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};\n  overflow-x: hidden;\n\n  & button {\n    font-size: 1rem;\n  }\n`;\n\nexport const StyledButtonSelection = styled(DSButtonV2)`\n  border-radius: 0px;\n  padding: 0 ${(props) => props.theme.space.xxs};\n  margin: 0;\n  font-size: 1rem;\n  align-items: center;\n  transition: unset;\n  &:hover:not([disabled]) {\n    background-color: transparent;\n    color: ${(props) => props.theme.colors.brand['700']};\n  }\n`;\n\nexport const StyledSelectedItems = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledNoOptionsSelected = styled.div`\n  padding: 0 ${(props) => props.theme.space.xxs};\n  font-size: 1rem;\n`;\n\nexport const StyledSelectAllCheckbox = styled.div`\n  display: flex;\n  align-items: center;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA2B;AAC3B,0BAA2B;AAEpB,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAQvB,oBAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlE,MAAM,4BAAwB,yBAAO,8BAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAIhD,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,wBAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAIxC,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;",
-  "names": []
-}