@elliemae/ds-form-combobox 3.50.0-next.2 → 3.50.0-rc.1

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 (133) hide show
  1. package/dist/cjs/ComboBoxCTX.js +4 -6
  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 +32 -43
  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/config/useOptionsPerSection.js +56 -0
  12. package/dist/cjs/config/useOptionsPerSection.js.map +7 -0
  13. package/dist/cjs/parts/DropdownIndicator.js +3 -2
  14. package/dist/cjs/parts/DropdownIndicator.js.map +2 -2
  15. package/dist/cjs/parts/Section.js +92 -0
  16. package/dist/cjs/parts/Section.js.map +7 -0
  17. package/dist/cjs/parts/container/Container.js +29 -14
  18. package/dist/cjs/parts/container/Container.js.map +2 -2
  19. package/dist/cjs/parts/controls/Controls.js +7 -5
  20. package/dist/cjs/parts/controls/Controls.js.map +2 -2
  21. package/dist/cjs/parts/controls/styled.js +22 -6
  22. package/dist/cjs/parts/controls/styled.js.map +2 -2
  23. package/dist/cjs/parts/controls/useOnPillsNavigation.js +3 -3
  24. package/dist/cjs/parts/controls/useOnPillsNavigation.js.map +2 -2
  25. package/dist/cjs/parts/controls-input/ControlsInput.js +21 -6
  26. package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
  27. package/dist/cjs/parts/controls-input/styled.js +3 -1
  28. package/dist/cjs/parts/controls-input/styled.js.map +2 -2
  29. package/dist/cjs/parts/controls-input/useKeyboardNavigation.js +15 -18
  30. package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map +2 -2
  31. package/dist/cjs/parts/controls-input/useMaskedOnChange.js +4 -5
  32. package/dist/cjs/parts/controls-input/useMaskedOnChange.js.map +2 -2
  33. package/dist/cjs/parts/menu-list/MenuList.js +20 -35
  34. package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
  35. package/dist/cjs/parts/menu-list/styled.js.map +2 -2
  36. package/dist/cjs/parts/menu-list/useItemRenderer.js +59 -40
  37. package/dist/cjs/parts/menu-list/useItemRenderer.js.map +2 -2
  38. package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +12 -4
  39. package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
  40. package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js +19 -4
  41. package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +3 -3
  42. package/dist/cjs/react-desc-prop-types.js +3 -1
  43. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  44. package/dist/cjs/sharedTypes.js.map +2 -2
  45. package/dist/cjs/utils/listHelper.js +7 -23
  46. package/dist/cjs/utils/listHelper.js.map +2 -2
  47. package/dist/esm/ComboBoxCTX.js +4 -6
  48. package/dist/esm/ComboBoxCTX.js.map +2 -2
  49. package/dist/esm/ComboboxDataTestids.js +0 -4
  50. package/dist/esm/ComboboxDataTestids.js.map +2 -2
  51. package/dist/esm/config/useClickOutside.js +22 -0
  52. package/dist/esm/config/useClickOutside.js.map +7 -0
  53. package/dist/esm/config/useComboBox.js +33 -44
  54. package/dist/esm/config/useComboBox.js.map +2 -2
  55. package/dist/esm/config/useCorrectOptions.js +4 -7
  56. package/dist/esm/config/useCorrectOptions.js.map +2 -2
  57. package/dist/esm/config/useOptionsPerSection.js +26 -0
  58. package/dist/esm/config/useOptionsPerSection.js.map +7 -0
  59. package/dist/esm/parts/DropdownIndicator.js +3 -2
  60. package/dist/esm/parts/DropdownIndicator.js.map +2 -2
  61. package/dist/esm/parts/Section.js +62 -0
  62. package/dist/esm/parts/Section.js.map +7 -0
  63. package/dist/esm/parts/container/Container.js +30 -15
  64. package/dist/esm/parts/container/Container.js.map +2 -2
  65. package/dist/esm/parts/controls/Controls.js +7 -5
  66. package/dist/esm/parts/controls/Controls.js.map +2 -2
  67. package/dist/esm/parts/controls/styled.js +22 -6
  68. package/dist/esm/parts/controls/styled.js.map +2 -2
  69. package/dist/esm/parts/controls/useOnPillsNavigation.js +3 -3
  70. package/dist/esm/parts/controls/useOnPillsNavigation.js.map +2 -2
  71. package/dist/esm/parts/controls-input/ControlsInput.js +21 -6
  72. package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
  73. package/dist/esm/parts/controls-input/styled.js +3 -1
  74. package/dist/esm/parts/controls-input/styled.js.map +2 -2
  75. package/dist/esm/parts/controls-input/useKeyboardNavigation.js +15 -18
  76. package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map +2 -2
  77. package/dist/esm/parts/controls-input/useMaskedOnChange.js +4 -5
  78. package/dist/esm/parts/controls-input/useMaskedOnChange.js.map +2 -2
  79. package/dist/esm/parts/menu-list/MenuList.js +21 -36
  80. package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
  81. package/dist/esm/parts/menu-list/styled.js.map +2 -2
  82. package/dist/esm/parts/menu-list/useItemRenderer.js +61 -42
  83. package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
  84. package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +12 -4
  85. package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
  86. package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js +19 -4
  87. package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +3 -3
  88. package/dist/esm/react-desc-prop-types.js +3 -1
  89. package/dist/esm/react-desc-prop-types.js.map +2 -2
  90. package/dist/esm/sharedTypes.js.map +2 -2
  91. package/dist/esm/utils/listHelper.js +7 -23
  92. package/dist/esm/utils/listHelper.js.map +2 -2
  93. package/dist/types/ComboboxDataTestids.d.ts +0 -4
  94. package/dist/types/config/useClickOutside.d.ts +1 -0
  95. package/dist/types/config/useCorrectOptions.d.ts +1 -1
  96. package/dist/types/config/useOptionsPerSection.d.ts +2 -0
  97. package/dist/types/parts/DropdownIndicator.d.ts +1 -0
  98. package/dist/types/parts/Section.d.ts +14 -0
  99. package/dist/types/parts/container/Container.d.ts +1 -0
  100. package/dist/types/parts/controls/Controls.d.ts +1 -0
  101. package/dist/types/parts/controls/styled.d.ts +2 -0
  102. package/dist/types/parts/controls-input/ControlsInput.d.ts +1 -0
  103. package/dist/types/parts/controls-input/styled.d.ts +3 -1
  104. package/dist/types/parts/menu-list/MenuList.d.ts +1 -0
  105. package/dist/types/parts/menu-list/SkeletonContainer.d.ts +1 -0
  106. package/dist/types/parts/menu-list/styled.d.ts +0 -1
  107. package/dist/types/parts/menu-list/useItemRenderer.d.ts +1 -0
  108. package/dist/types/parts/multi-selected-values-container/MultiSelectedValuesContainer.d.ts +1 -0
  109. package/dist/types/parts/multi-selected-values-container/RemovableSelectedValuePill.d.ts +1 -0
  110. package/dist/types/react-desc-prop-types.d.ts +4 -1
  111. package/dist/types/sharedTypes.d.ts +1 -4
  112. package/dist/types/tests/read-only.test.d.ts +1 -0
  113. package/dist/types/utils/listHelper.d.ts +0 -1
  114. package/package.json +20 -18
  115. package/dist/cjs/parts/header-list/HeaderList.js +0 -104
  116. package/dist/cjs/parts/header-list/HeaderList.js.map +0 -7
  117. package/dist/cjs/parts/header-list/index.js.map +0 -7
  118. package/dist/cjs/parts/header-list/styled.js +0 -85
  119. package/dist/cjs/parts/header-list/styled.js.map +0 -7
  120. package/dist/cjs/parts/header-list/useHeaderListHandlers.js +0 -140
  121. package/dist/cjs/parts/header-list/useHeaderListHandlers.js.map +0 -7
  122. package/dist/esm/parts/header-list/HeaderList.js +0 -80
  123. package/dist/esm/parts/header-list/HeaderList.js.map +0 -7
  124. package/dist/esm/parts/header-list/index.js +0 -6
  125. package/dist/esm/parts/header-list/index.js.map +0 -7
  126. package/dist/esm/parts/header-list/styled.js +0 -55
  127. package/dist/esm/parts/header-list/styled.js.map +0 -7
  128. package/dist/esm/parts/header-list/useHeaderListHandlers.js +0 -110
  129. package/dist/esm/parts/header-list/useHeaderListHandlers.js.map +0 -7
  130. package/dist/types/parts/header-list/HeaderList.d.ts +0 -1
  131. package/dist/types/parts/header-list/index.d.ts +0 -1
  132. package/dist/types/parts/header-list/styled.d.ts +0 -6
  133. package/dist/types/parts/header-list/useHeaderListHandlers.d.ts +0 -11
@@ -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
- }
@@ -1,80 +0,0 @@
1
- import * as React from "react";
2
- import { jsx, jsxs } from "react/jsx-runtime";
3
- import { useContext } from "react";
4
- import { BUTTON_SIZES, BUTTON_TYPES } from "@elliemae/ds-button-v2";
5
- import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
6
- import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
7
- import { ComboBoxContext } from "../../ComboBoxCTX.js";
8
- import {
9
- StyledHeaderListWrapper,
10
- StyledButtonSelection,
11
- StyledSelectedItems,
12
- StyledSelectAllCheckbox,
13
- StyledNoOptionsSelected
14
- } from "./styled.js";
15
- import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
16
- import { useHeaderListHandlers } from "./useHeaderListHandlers.js";
17
- const HeaderList = () => {
18
- const {
19
- props: { selectedValues, onSelectAll },
20
- showSelectedOptions,
21
- selectAllCheckboxRef,
22
- toggleSelectionButtonRef,
23
- correctOptions: filteredOptions
24
- } = useContext(ComboBoxContext);
25
- const multiSelectedValues = selectedValues;
26
- const {
27
- handleKeyDown,
28
- handleOnMouseDown,
29
- handleFilterSelectionBtnOnTab,
30
- handleToggleSelectedValuesFilter,
31
- handleCheckAllOnTab,
32
- checkboxStatus,
33
- handleSelectAllCheckboxChange
34
- } = useHeaderListHandlers();
35
- return /* @__PURE__ */ jsxs(
36
- StyledHeaderListWrapper,
37
- {
38
- onKeyDown: handleKeyDown,
39
- onMouseDown: handleOnMouseDown,
40
- "data-testid": ComboboxDataTestid.MULTISELECT.HEADER_LIST,
41
- children: [
42
- /* @__PURE__ */ jsx(StyledSelectAllCheckbox, { children: onSelectAll && /* @__PURE__ */ jsx(
43
- DSControlledCheckbox,
44
- {
45
- checked: checkboxStatus,
46
- "aria-controls": filteredOptions.map((item) => item.dsId).join(" "),
47
- name: "select-all-checkbox",
48
- "aria-label": "Select/Unselect All Items",
49
- "aria-labelledby": "",
50
- id: "select-all-checkbox",
51
- onChange: handleSelectAllCheckboxChange,
52
- onKeyDown: handleCheckAllOnTab,
53
- innerRef: selectAllCheckboxRef
54
- }
55
- ) }),
56
- /* @__PURE__ */ jsx(StyledSelectedItems, { children: multiSelectedValues.length > 0 ? /* @__PURE__ */ jsx(
57
- StyledButtonSelection,
58
- {
59
- onKeyDown: handleFilterSelectionBtnOnTab,
60
- buttonType: BUTTON_TYPES.TEXT,
61
- onClick: handleToggleSelectedValuesFilter,
62
- size: BUTTON_SIZES.S,
63
- "data-testid": ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
64
- innerRef: toggleSelectionButtonRef,
65
- children: /* @__PURE__ */ jsx(
66
- SimpleTruncatedTooltipText,
67
- {
68
- value: !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL"
69
- }
70
- )
71
- }
72
- ) : /* @__PURE__ */ jsx(StyledNoOptionsSelected, { children: "0 SELECTED" }) })
73
- ]
74
- }
75
- );
76
- };
77
- export {
78
- HeaderList
79
- };
80
- //# sourceMappingURL=HeaderList.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/HeaderList.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACuCnB,SAOM,KAPN;AApCJ,SAAgB,kBAAkB;AAClC,SAAS,cAAc,oBAAoB;AAC3C,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,eAAa,mBAAmB,YAAY;AAAA,MAE5C;AAAA,4BAAC,2BACE,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,oBAAC,uBACE,8BAAoB,SAAS,IAC5B;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,YAAY,aAAa;AAAA,YACzB,SAAS;AAAA,YACT,MAAM,aAAa;AAAA,YACnB,eAAa,mBAAmB,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,oBAAC,2BAAwB,wBAAU,GAEvC;AAAA;AAAA;AAAA,EACF;AAEJ;",
6
- "names": []
7
- }
@@ -1,6 +0,0 @@
1
- import * as React from "react";
2
- import { HeaderList } from "./HeaderList.js";
3
- export {
4
- HeaderList
5
- };
6
- //# sourceMappingURL=index.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { HeaderList } from './HeaderList.js';\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;",
6
- "names": []
7
- }
@@ -1,55 +0,0 @@
1
- import * as React from "react";
2
- import { styled, th } from "@elliemae/ds-system";
3
- import { DSButtonV2 } from "@elliemae/ds-button-v2";
4
- const StyledHeaderListWrapper = styled.div`
5
- display: flex;
6
- position: sticky;
7
- top: 0;
8
- z-index: 10;
9
- justify-content: space-between;
10
- width: inherit;
11
- padding: 5px 12px 5px 16px;
12
- @media (max-width: ${th.breakpoint("small")}) {
13
- padding: 3.25px 12px 3.25px 16px;
14
- }
15
-
16
- background-color: #fff;
17
- box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};
18
- overflow-x: hidden;
19
-
20
- & button {
21
- font-size: 1rem;
22
- }
23
- `;
24
- const StyledButtonSelection = styled(DSButtonV2)`
25
- border-radius: 0px;
26
- padding: 0 ${(props) => props.theme.space.xxs};
27
- margin: 0;
28
- font-size: 1rem;
29
- align-items: center;
30
- transition: unset;
31
- &:hover:not([disabled]) {
32
- background-color: transparent;
33
- color: ${(props) => props.theme.colors.brand["700"]};
34
- }
35
- `;
36
- const StyledSelectedItems = styled.div`
37
- display: flex;
38
- align-items: center;
39
- `;
40
- const StyledNoOptionsSelected = styled.div`
41
- padding: 0 ${(props) => props.theme.space.xxs};
42
- font-size: 1rem;
43
- `;
44
- const StyledSelectAllCheckbox = styled.div`
45
- display: flex;
46
- align-items: center;
47
- `;
48
- export {
49
- StyledButtonSelection,
50
- StyledHeaderListWrapper,
51
- StyledNoOptionsSelected,
52
- StyledSelectAllCheckbox,
53
- StyledSelectedItems
54
- };
55
- //# sourceMappingURL=styled.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/styled.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,UAAU;AAC3B,SAAS,kBAAkB;AAEpB,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAQvB,GAAG,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,wBAAwB,OAAO,UAAU;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,OAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,OAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAIxC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }