@elliemae/ds-form-combobox 3.51.0-next.2 → 3.51.0-next.4

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 (88) hide show
  1. package/dist/cjs/ComboBoxCTX.js +0 -4
  2. package/dist/cjs/ComboBoxCTX.js.map +2 -2
  3. package/dist/cjs/ComboboxDataTestids.js +0 -4
  4. package/dist/cjs/ComboboxDataTestids.js.map +2 -2
  5. package/dist/cjs/{parts/header-list/index.js → config/useClickOutside.js} +22 -6
  6. package/dist/cjs/config/useClickOutside.js.map +7 -0
  7. package/dist/cjs/config/useComboBox.js +19 -36
  8. package/dist/cjs/config/useComboBox.js.map +2 -2
  9. package/dist/cjs/config/useCorrectOptions.js +3 -6
  10. package/dist/cjs/config/useCorrectOptions.js.map +2 -2
  11. package/dist/cjs/parts/container/Container.js +29 -14
  12. package/dist/cjs/parts/container/Container.js.map +2 -2
  13. package/dist/cjs/parts/controls-input/ControlsInput.js +10 -5
  14. package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
  15. package/dist/cjs/parts/controls-input/useKeyboardNavigation.js +13 -16
  16. package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map +2 -2
  17. package/dist/cjs/parts/controls-input/useMaskedOnChange.js +4 -5
  18. package/dist/cjs/parts/controls-input/useMaskedOnChange.js.map +2 -2
  19. package/dist/cjs/parts/menu-list/MenuList.js +20 -35
  20. package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
  21. package/dist/cjs/parts/menu-list/styled.js.map +2 -2
  22. package/dist/cjs/parts/menu-list/useItemRenderer.js +40 -33
  23. package/dist/cjs/parts/menu-list/useItemRenderer.js.map +2 -2
  24. package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js +9 -1
  25. package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
  26. package/dist/cjs/react-desc-prop-types.js +3 -1
  27. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  28. package/dist/cjs/sharedTypes.js.map +2 -2
  29. package/dist/cjs/utils/listHelper.js +7 -23
  30. package/dist/cjs/utils/listHelper.js.map +2 -2
  31. package/dist/esm/ComboBoxCTX.js +0 -4
  32. package/dist/esm/ComboBoxCTX.js.map +2 -2
  33. package/dist/esm/ComboboxDataTestids.js +0 -4
  34. package/dist/esm/ComboboxDataTestids.js.map +2 -2
  35. package/dist/esm/config/useClickOutside.js +22 -0
  36. package/dist/esm/config/useClickOutside.js.map +7 -0
  37. package/dist/esm/config/useComboBox.js +20 -37
  38. package/dist/esm/config/useComboBox.js.map +2 -2
  39. package/dist/esm/config/useCorrectOptions.js +4 -7
  40. package/dist/esm/config/useCorrectOptions.js.map +2 -2
  41. package/dist/esm/parts/container/Container.js +30 -15
  42. package/dist/esm/parts/container/Container.js.map +2 -2
  43. package/dist/esm/parts/controls-input/ControlsInput.js +10 -5
  44. package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
  45. package/dist/esm/parts/controls-input/useKeyboardNavigation.js +13 -16
  46. package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map +2 -2
  47. package/dist/esm/parts/controls-input/useMaskedOnChange.js +4 -5
  48. package/dist/esm/parts/controls-input/useMaskedOnChange.js.map +2 -2
  49. package/dist/esm/parts/menu-list/MenuList.js +21 -36
  50. package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
  51. package/dist/esm/parts/menu-list/styled.js.map +2 -2
  52. package/dist/esm/parts/menu-list/useItemRenderer.js +41 -34
  53. package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
  54. package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js +9 -1
  55. package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
  56. package/dist/esm/react-desc-prop-types.js +3 -1
  57. package/dist/esm/react-desc-prop-types.js.map +2 -2
  58. package/dist/esm/sharedTypes.js.map +2 -2
  59. package/dist/esm/utils/listHelper.js +7 -23
  60. package/dist/esm/utils/listHelper.js.map +2 -2
  61. package/dist/types/ComboboxDataTestids.d.ts +0 -4
  62. package/dist/types/config/useClickOutside.d.ts +1 -0
  63. package/dist/types/config/useCorrectOptions.d.ts +1 -1
  64. package/dist/types/parts/menu-list/styled.d.ts +0 -1
  65. package/dist/types/react-desc-prop-types.d.ts +3 -1
  66. package/dist/types/sharedTypes.d.ts +0 -4
  67. package/dist/types/tests/read-only.test.d.ts +1 -0
  68. package/dist/types/utils/listHelper.d.ts +0 -1
  69. package/package.json +14 -14
  70. package/dist/cjs/parts/header-list/HeaderList.js +0 -104
  71. package/dist/cjs/parts/header-list/HeaderList.js.map +0 -7
  72. package/dist/cjs/parts/header-list/index.js.map +0 -7
  73. package/dist/cjs/parts/header-list/styled.js +0 -85
  74. package/dist/cjs/parts/header-list/styled.js.map +0 -7
  75. package/dist/cjs/parts/header-list/useHeaderListHandlers.js +0 -140
  76. package/dist/cjs/parts/header-list/useHeaderListHandlers.js.map +0 -7
  77. package/dist/esm/parts/header-list/HeaderList.js +0 -80
  78. package/dist/esm/parts/header-list/HeaderList.js.map +0 -7
  79. package/dist/esm/parts/header-list/index.js +0 -6
  80. package/dist/esm/parts/header-list/index.js.map +0 -7
  81. package/dist/esm/parts/header-list/styled.js +0 -55
  82. package/dist/esm/parts/header-list/styled.js.map +0 -7
  83. package/dist/esm/parts/header-list/useHeaderListHandlers.js +0 -110
  84. package/dist/esm/parts/header-list/useHeaderListHandlers.js.map +0 -7
  85. package/dist/types/parts/header-list/HeaderList.d.ts +0 -2
  86. package/dist/types/parts/header-list/index.d.ts +0 -1
  87. package/dist/types/parts/header-list/styled.d.ts +0 -6
  88. package/dist/types/parts/header-list/useHeaderListHandlers.d.ts +0 -11
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/sharedTypes.tsx"],
4
- "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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;AAoC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
4
+ "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 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 }\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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;AAgC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
6
6
  "names": []
7
7
  }
@@ -17,8 +17,13 @@ function isArrayOfItems(value) {
17
17
  }
18
18
  const isItem = (value) => !Array.isArray(value) && value !== null && typeof value === "object";
19
19
  const findInCircularList = (list, from, criteria, step = 1) => {
20
- for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
20
+ if (list.length === 0) return from;
21
+ let i = (from + step + list.length) % list.length;
22
+ let iterations = 0;
23
+ while (iterations < list.length) {
21
24
  if (criteria(list[i])) return i;
25
+ i = (i + step + list.length) % list.length;
26
+ iterations += 1;
22
27
  }
23
28
  return from;
24
29
  };
@@ -58,26 +63,6 @@ const filterOptions = (inputValue, options) => {
58
63
  (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase())
59
64
  );
60
65
  };
61
- const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
62
- const items = [];
63
- if (optionsToParse)
64
- optionsToParse.forEach((option) => {
65
- if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {
66
- items.push(option);
67
- }
68
- if (option.type === MENU_OPTION_TYPES.SECTION) {
69
- if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
70
- items[items.length - 1] = option;
71
- } else {
72
- items.push(option);
73
- }
74
- }
75
- });
76
- if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
77
- items.pop();
78
- }
79
- return items;
80
- };
81
66
  const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));
82
67
  const scrollIfNeeded = (elem, options = { behavior: "smooth", block: "end", inline: "nearest" }) => {
83
68
  const bounding = elem.getBoundingClientRect();
@@ -98,7 +83,6 @@ export {
98
83
  isSelected,
99
84
  isSelectedValueEmpty,
100
85
  isSelectedValueMultiple,
101
- scrollIfNeeded,
102
- selectedValuesWithSections
86
+ scrollIfNeeded
103
87
  };
104
88
  //# sourceMappingURL=listHelper.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/listHelper.tsx"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1,8 +1,4 @@
1
1
  export declare const ComboboxDataTestid: {
2
- MULTISELECT: {
3
- HEADER_LIST: string;
4
- SHOW_SELECTED_OPTIONS_TOGGLE: string;
5
- };
6
2
  CONTROLS_WRAPPER: string;
7
3
  CONTAINER: string;
8
4
  INPUT: string;
@@ -0,0 +1 @@
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;
@@ -1,3 +1,3 @@
1
1
  import type { DSComboboxT } from '../react-desc-prop-types.js';
2
- declare const useCorrectOptions: (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => DSComboboxT.OptionTypes[];
2
+ declare const useCorrectOptions: (propsWithDefaults: DSComboboxT.Props, inputValue: string) => DSComboboxT.OptionTypes[];
3
3
  export { useCorrectOptions };
@@ -10,7 +10,6 @@ export declare const StyledList: import("styled-components").StyledComponent<"ul
10
10
  export declare const StyledVirtualListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
11
11
  inline: boolean | undefined;
12
12
  maxHeight: SizingProps['maxHeight'];
13
- withHeader?: boolean | undefined;
14
13
  } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
15
14
  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>;
16
15
  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>;
@@ -64,6 +64,7 @@ export declare namespace DSComboboxT {
64
64
  onlySelectable: boolean;
65
65
  isSkeleton: boolean;
66
66
  applyAriaDisabled: boolean;
67
+ readOnly: boolean;
67
68
  }
68
69
  interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional, Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>, XstyledProps {
69
70
  }
@@ -92,6 +93,8 @@ export declare const ComboboxPropTypes: {
92
93
  onlySelectable: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
93
94
  isSkeleton: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
94
95
  applyAriaDisabled: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
96
+ readOnly: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
97
+ onSelectAll: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
95
98
  'aria-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
96
99
  'on-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
97
100
  'data-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
@@ -408,7 +411,6 @@ export declare const ComboboxPropTypes: {
408
411
  preload: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
409
412
  property: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
410
413
  radioGroup: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
411
- readOnly: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
412
414
  rel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
413
415
  rev: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
414
416
  required: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
@@ -20,12 +20,8 @@ export declare namespace DSComboboxInternalsT {
20
20
  setInputValue: React.Dispatch<React.SetStateAction<string>>;
21
21
  selectedOptionsRef: React.RefObject<HTMLDivElement>;
22
22
  controlsWrapperRef: React.RefObject<HTMLDivElement>;
23
- selectAllCheckboxRef: React.RefObject<HTMLInputElement>;
24
- toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;
25
23
  focusOptionIdx: string;
26
24
  setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;
27
- showSelectedOptions: boolean;
28
- setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;
29
25
  setMenuState: (newState: boolean, reason: string, e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>) => void;
30
26
  correctOptions: DSComboboxT.OptionTypes[];
31
27
  instanceUid: string;
@@ -0,0 +1 @@
1
+ export {};
@@ -11,6 +11,5 @@ export declare const getLastValueSelected: (selectedValues: DSComboboxT.Selected
11
11
  export declare const getFirstOption: (options: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.SelectedOptionsT) => string;
12
12
  export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.ItemOption, selectedValues: DSComboboxT.SelectedOptionsT, isNonClearable?: boolean) => DSComboboxT.ItemOption | DSComboboxT.ItemOption[] | null;
13
13
  export declare const filterOptions: (inputValue: string, options: DSComboboxT.OptionTypes[]) => DSComboboxT.OptionTypes[];
14
- export declare const selectedValuesWithSections: (optionsToParse: DSComboboxT.OptionTypes[], multiSelectedValue: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];
15
14
  export declare const getFilteredOptionsSelected: (filteredOption: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];
16
15
  export declare const scrollIfNeeded: (elem: HTMLElement, options?: ScrollIntoViewOptions | undefined) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-combobox",
3
- "version": "3.51.0-next.2",
3
+ "version": "3.51.0-next.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Combobox",
6
6
  "files": [
@@ -38,17 +38,17 @@
38
38
  "dependencies": {
39
39
  "react-virtual": "~2.10.4",
40
40
  "uid": "~2.0.1",
41
- "@elliemae/ds-circular-progress-indicator": "3.51.0-next.2",
42
- "@elliemae/ds-grid": "3.51.0-next.2",
43
- "@elliemae/ds-form-checkbox": "3.51.0-next.2",
44
- "@elliemae/ds-menu-items": "3.51.0-next.2",
45
- "@elliemae/ds-icons": "3.51.0-next.2",
46
- "@elliemae/ds-popperjs": "3.51.0-next.2",
47
- "@elliemae/ds-props-helpers": "3.51.0-next.2",
48
- "@elliemae/ds-button-v2": "3.51.0-next.2",
49
- "@elliemae/ds-system": "3.51.0-next.2",
50
- "@elliemae/ds-pills-v2": "3.51.0-next.2",
51
- "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.2"
41
+ "@elliemae/ds-button-v2": "3.51.0-next.4",
42
+ "@elliemae/ds-circular-progress-indicator": "3.51.0-next.4",
43
+ "@elliemae/ds-form-checkbox": "3.51.0-next.4",
44
+ "@elliemae/ds-grid": "3.51.0-next.4",
45
+ "@elliemae/ds-icons": "3.51.0-next.4",
46
+ "@elliemae/ds-menu-items": "3.51.0-next.4",
47
+ "@elliemae/ds-pills-v2": "3.51.0-next.4",
48
+ "@elliemae/ds-popperjs": "3.51.0-next.4",
49
+ "@elliemae/ds-props-helpers": "3.51.0-next.4",
50
+ "@elliemae/ds-system": "3.51.0-next.4",
51
+ "@elliemae/ds-truncated-tooltip-text": "3.51.0-next.4"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@elliemae/pui-cli": "9.0.0-next.50",
@@ -56,8 +56,8 @@
56
56
  "jest": "~29.7.0",
57
57
  "styled-components": "~5.3.9",
58
58
  "styled-system": "^5.1.5",
59
- "@elliemae/ds-form-helpers-mask-hooks": "3.51.0-next.2",
60
- "@elliemae/ds-monorepo-devops": "3.51.0-next.2"
59
+ "@elliemae/ds-form-helpers-mask-hooks": "3.51.0-next.4",
60
+ "@elliemae/ds-monorepo-devops": "3.51.0-next.4"
61
61
  },
62
62
  "peerDependencies": {
63
63
  "@elliemae/pui-theme": "~2.10.0",
@@ -1,104 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var HeaderList_exports = {};
30
- __export(HeaderList_exports, {
31
- HeaderList: () => HeaderList
32
- });
33
- module.exports = __toCommonJS(HeaderList_exports);
34
- var React = __toESM(require("react"));
35
- var import_jsx_runtime = require("react/jsx-runtime");
36
- var import_react = require("react");
37
- var import_ds_button_v2 = require("@elliemae/ds-button-v2");
38
- var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
39
- var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
40
- var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
41
- var import_styled = require("./styled.js");
42
- var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
43
- var import_useHeaderListHandlers = require("./useHeaderListHandlers.js");
44
- const HeaderList = () => {
45
- const {
46
- props: { selectedValues, onSelectAll },
47
- showSelectedOptions,
48
- selectAllCheckboxRef,
49
- toggleSelectionButtonRef,
50
- correctOptions: filteredOptions
51
- } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
52
- const multiSelectedValues = selectedValues;
53
- const {
54
- handleKeyDown,
55
- handleOnMouseDown,
56
- handleFilterSelectionBtnOnTab,
57
- handleToggleSelectedValuesFilter,
58
- handleCheckAllOnTab,
59
- checkboxStatus,
60
- handleSelectAllCheckboxChange
61
- } = (0, import_useHeaderListHandlers.useHeaderListHandlers)();
62
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
63
- import_styled.StyledHeaderListWrapper,
64
- {
65
- onKeyDown: handleKeyDown,
66
- onMouseDown: handleOnMouseDown,
67
- "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.HEADER_LIST,
68
- children: [
69
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelectAllCheckbox, { children: onSelectAll && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
70
- import_ds_form_checkbox.DSControlledCheckbox,
71
- {
72
- checked: checkboxStatus,
73
- "aria-controls": filteredOptions.map((item) => item.dsId).join(" "),
74
- name: "select-all-checkbox",
75
- "aria-label": "Select/Unselect All Items",
76
- "aria-labelledby": "",
77
- id: "select-all-checkbox",
78
- onChange: handleSelectAllCheckboxChange,
79
- onKeyDown: handleCheckAllOnTab,
80
- innerRef: selectAllCheckboxRef
81
- }
82
- ) }),
83
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelectedItems, { children: multiSelectedValues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
84
- import_styled.StyledButtonSelection,
85
- {
86
- onKeyDown: handleFilterSelectionBtnOnTab,
87
- buttonType: import_ds_button_v2.BUTTON_TYPES.TEXT,
88
- onClick: handleToggleSelectedValuesFilter,
89
- size: import_ds_button_v2.BUTTON_SIZES.S,
90
- "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
91
- innerRef: toggleSelectionButtonRef,
92
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
93
- import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText,
94
- {
95
- value: !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL"
96
- }
97
- )
98
- }
99
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledNoOptionsSelected, { children: "0 SELECTED" }) })
100
- ]
101
- }
102
- );
103
- };
104
- //# sourceMappingURL=HeaderList.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/parts/header-list/HeaderList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/parts/header-list/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export { HeaderList } from './HeaderList.js';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA2B;",
6
- "names": []
7
- }
@@ -1,85 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var styled_exports = {};
30
- __export(styled_exports, {
31
- StyledButtonSelection: () => StyledButtonSelection,
32
- StyledHeaderListWrapper: () => StyledHeaderListWrapper,
33
- StyledNoOptionsSelected: () => StyledNoOptionsSelected,
34
- StyledSelectAllCheckbox: () => StyledSelectAllCheckbox,
35
- StyledSelectedItems: () => StyledSelectedItems
36
- });
37
- module.exports = __toCommonJS(styled_exports);
38
- var React = __toESM(require("react"));
39
- var import_ds_system = require("@elliemae/ds-system");
40
- var import_ds_button_v2 = require("@elliemae/ds-button-v2");
41
- const StyledHeaderListWrapper = import_ds_system.styled.div`
42
- display: flex;
43
- position: sticky;
44
- top: 0;
45
- z-index: 10;
46
- justify-content: space-between;
47
- width: inherit;
48
- padding: 5px 12px 5px 16px;
49
- @media (max-width: ${import_ds_system.th.breakpoint("small")}) {
50
- padding: 3.25px 12px 3.25px 16px;
51
- }
52
-
53
- background-color: #fff;
54
- box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};
55
- overflow-x: hidden;
56
-
57
- & button {
58
- font-size: 1rem;
59
- }
60
- `;
61
- const StyledButtonSelection = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
62
- border-radius: 0px;
63
- padding: 0 ${(props) => props.theme.space.xxs};
64
- margin: 0;
65
- font-size: 1rem;
66
- align-items: center;
67
- transition: unset;
68
- &:hover:not([disabled]) {
69
- background-color: transparent;
70
- color: ${(props) => props.theme.colors.brand["700"]};
71
- }
72
- `;
73
- const StyledSelectedItems = import_ds_system.styled.div`
74
- display: flex;
75
- align-items: center;
76
- `;
77
- const StyledNoOptionsSelected = import_ds_system.styled.div`
78
- padding: 0 ${(props) => props.theme.space.xxs};
79
- font-size: 1rem;
80
- `;
81
- const StyledSelectAllCheckbox = import_ds_system.styled.div`
82
- display: flex;
83
- align-items: center;
84
- `;
85
- //# sourceMappingURL=styled.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/parts/header-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,140 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var useHeaderListHandlers_exports = {};
30
- __export(useHeaderListHandlers_exports, {
31
- useHeaderListHandlers: () => useHeaderListHandlers
32
- });
33
- module.exports = __toCommonJS(useHeaderListHandlers_exports);
34
- var React = __toESM(require("react"));
35
- var import_react = require("react");
36
- var import_listHelper = require("../../utils/listHelper.js");
37
- var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
38
- const useHeaderListHandlers = () => {
39
- const {
40
- props: { selectedValues, onSelectAll },
41
- showSelectedOptions,
42
- internalRef,
43
- setShowSelectedOptions,
44
- setMenuState,
45
- correctOptions: filteredOptions
46
- } = (0, import_react.useContext)(import_ComboBoxCTX.default);
47
- const multiSelectedValues = selectedValues;
48
- const selectableOptions = (0, import_listHelper.getSelectableOptions)(filteredOptions);
49
- const getCheckboxStatus = (0, import_react.useMemo)(() => {
50
- if (multiSelectedValues.length === selectableOptions.length) {
51
- return true;
52
- }
53
- if (multiSelectedValues?.length === 0) {
54
- return false;
55
- }
56
- return "mixed";
57
- }, [multiSelectedValues.length, selectableOptions.length]);
58
- const [checkboxStatus, setCheckboxStatus] = (0, import_react.useState)(false);
59
- (0, import_react.useEffect)(() => {
60
- setCheckboxStatus(getCheckboxStatus);
61
- }, [getCheckboxStatus, multiSelectedValues]);
62
- const handleOnMouseDown = (0, import_react.useCallback)((e) => {
63
- e.preventDefault();
64
- }, []);
65
- const handleSelectAllCheckboxChange = (0, import_react.useCallback)(
66
- (e) => {
67
- if ((!checkboxStatus || checkboxStatus === "mixed") && onSelectAll) {
68
- onSelectAll(
69
- filteredOptions.filter((option) => option.type === "option" && !option.disabled),
70
- e
71
- );
72
- setCheckboxStatus(true);
73
- } else if (onSelectAll) {
74
- onSelectAll([], e);
75
- setCheckboxStatus(false);
76
- }
77
- },
78
- [checkboxStatus, onSelectAll, filteredOptions]
79
- );
80
- const handleToggleSelectedValuesFilter = (0, import_react.useCallback)(
81
- (e) => {
82
- e.preventDefault();
83
- setShowSelectedOptions(!showSelectedOptions);
84
- },
85
- [setShowSelectedOptions, showSelectedOptions]
86
- );
87
- const handleKeyDown = (0, import_react.useCallback)(
88
- (e) => {
89
- if (e.key === "Escape") {
90
- setMenuState(false, "close", e);
91
- internalRef.current?.focus();
92
- }
93
- },
94
- [setMenuState, internalRef]
95
- );
96
- const handleFilterSelectionBtnOnTab = (0, import_react.useCallback)(
97
- (e) => {
98
- if (e.key === "Tab" && !e.shiftKey) {
99
- e.preventDefault();
100
- internalRef.current?.focus();
101
- }
102
- },
103
- [internalRef]
104
- );
105
- const handleCheckAllOnTab = (0, import_react.useCallback)(
106
- (e) => {
107
- if (e.key === "Tab" && !e.shiftKey && multiSelectedValues.length === 0) {
108
- e.preventDefault();
109
- internalRef.current?.focus();
110
- }
111
- },
112
- [internalRef, multiSelectedValues]
113
- );
114
- (0, import_react.useEffect)(() => {
115
- if (multiSelectedValues.length === 0) {
116
- setShowSelectedOptions(false);
117
- }
118
- }, [multiSelectedValues, setShowSelectedOptions]);
119
- return (0, import_react.useMemo)(
120
- () => ({
121
- handleKeyDown,
122
- handleToggleSelectedValuesFilter,
123
- handleFilterSelectionBtnOnTab,
124
- handleOnMouseDown,
125
- handleCheckAllOnTab,
126
- handleSelectAllCheckboxChange,
127
- checkboxStatus
128
- }),
129
- [
130
- handleKeyDown,
131
- handleFilterSelectionBtnOnTab,
132
- handleToggleSelectedValuesFilter,
133
- handleOnMouseDown,
134
- handleCheckAllOnTab,
135
- handleSelectAllCheckboxChange,
136
- checkboxStatus
137
- ]
138
- );
139
- };
140
- //# sourceMappingURL=useHeaderListHandlers.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/parts/header-list/useHeaderListHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type React from 'react';\nimport { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSelectableOptions } from '../../utils/listHelper.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nconst useHeaderListHandlers = () => {\n const {\n props: { selectedValues, onSelectAll },\n showSelectedOptions,\n internalRef,\n setShowSelectedOptions,\n setMenuState,\n correctOptions: filteredOptions,\n } = useContext(ComboBoxContext);\n\n const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n const selectableOptions = getSelectableOptions(filteredOptions);\n\n const getCheckboxStatus = useMemo(() => {\n if (multiSelectedValues.length === selectableOptions.length) {\n return true;\n }\n if (multiSelectedValues?.length === 0) {\n return false;\n }\n return 'mixed';\n }, [multiSelectedValues.length, selectableOptions.length]);\n\n const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n useEffect(() => {\n setCheckboxStatus(getCheckboxStatus);\n }, [getCheckboxStatus, multiSelectedValues]);\n\n const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n // this prevent the input control to lose focus\n }, []);\n\n const handleSelectAllCheckboxChange = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n onSelectAll(\n filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n e,\n );\n setCheckboxStatus(true);\n } else if (onSelectAll) {\n onSelectAll([], e);\n setCheckboxStatus(false);\n }\n },\n [checkboxStatus, onSelectAll, filteredOptions],\n );\n\n const handleToggleSelectedValuesFilter: (\n e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,\n ) => void = useCallback(\n (e) => {\n e.preventDefault();\n setShowSelectedOptions(!showSelectedOptions);\n },\n [setShowSelectedOptions, showSelectedOptions],\n );\n\n // when pressing escape on each header list button we close the menu\n // and set focus on input\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setMenuState(false, 'close', e);\n internalRef.current?.focus();\n }\n },\n [setMenuState, internalRef],\n );\n\n // when hitting tab on selected values button filter we target the input again\n const handleFilterSelectionBtnOnTab = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey) {\n e.preventDefault();\n internalRef.current?.focus();\n }\n },\n [internalRef],\n );\n\n const handleCheckAllOnTab = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n e.preventDefault();\n internalRef.current?.focus();\n }\n },\n [internalRef, multiSelectedValues],\n );\n\n useEffect(() => {\n // toggle off selected values filter when removing all of them\n if (multiSelectedValues.length === 0) {\n setShowSelectedOptions(false);\n }\n }, [multiSelectedValues, setShowSelectedOptions]);\n\n return useMemo(\n () => ({\n handleKeyDown,\n handleToggleSelectedValuesFilter,\n handleFilterSelectionBtnOnTab,\n handleOnMouseDown,\n handleCheckAllOnTab,\n handleSelectAllCheckboxChange,\n checkboxStatus,\n }),\n [\n handleKeyDown,\n handleFilterSelectionBtnOnTab,\n handleToggleSelectedValuesFilter,\n handleOnMouseDown,\n handleCheckAllOnTab,\n handleSelectAllCheckboxChange,\n checkboxStatus,\n ],\n );\n};\n\nexport { useHeaderListHandlers };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsE;AAEtE,wBAAqC;AACrC,yBAA4B;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,wBAAoB,wCAAqB,eAAe;AAE9D,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA4B,KAAK;AAE7E,8BAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,wBAAoB,0BAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,uCAEM;AAAA,IACV,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAGA,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,mBAAmB;AAAA,EACnC;AAEA,8BAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
6
- "names": ["ComboBoxContext"]
7
- }