@elliemae/ds-form 2.1.0-rc.6 → 2.1.0-rc.7

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 (155) hide show
  1. package/cjs/ComboBox/index.js +0 -3
  2. package/cjs/ComboBoxFreeSolo/ComboBoxFreeSolo.js +0 -1
  3. package/cjs/MenuItem/components/MultiMenuItem/MultiMenuItem.js +2 -1
  4. package/cjs/index.js +0 -2
  5. package/esm/ComboBox/index.js +0 -1
  6. package/esm/ComboBoxFreeSolo/ComboBoxFreeSolo.js +0 -1
  7. package/esm/MenuItem/components/MultiMenuItem/MultiMenuItem.js +2 -1
  8. package/esm/index.js +0 -1
  9. package/package.json +23 -207
  10. package/types/ComboBox/index.d.ts +0 -1
  11. package/types/MenuItem/components/SubmenuItem/styled.d.ts +1 -1
  12. package/types/MenuItem/components/styled.d.ts +3 -3
  13. package/types/MenuItem/props.d.ts +1 -0
  14. package/cjs/ComboBox/v3/ComboBox.js +0 -33
  15. package/cjs/ComboBox/v3/ComboBoxCTX.js +0 -55
  16. package/cjs/ComboBox/v3/ComboboxDataTestids.js +0 -17
  17. package/cjs/ComboBox/v3/config/constants.js +0 -14
  18. package/cjs/ComboBox/v3/config/useComboBox.js +0 -122
  19. package/cjs/ComboBox/v3/config/useGetPropsWithDefault.js +0 -11
  20. package/cjs/ComboBox/v3/index.d.js +0 -2
  21. package/cjs/ComboBox/v3/index.js +0 -10
  22. package/cjs/ComboBox/v3/parts/a11y-messages/MultiAllyMessages.js +0 -33
  23. package/cjs/ComboBox/v3/parts/a11y-messages/SingleAllyMessages.js +0 -28
  24. package/cjs/ComboBox/v3/parts/a11y-messages/index.js +0 -11
  25. package/cjs/ComboBox/v3/parts/a11y-messages/styled.js +0 -15
  26. package/cjs/ComboBox/v3/parts/container/Container.js +0 -67
  27. package/cjs/ComboBox/v3/parts/container/index.js +0 -9
  28. package/cjs/ComboBox/v3/parts/container/styled.js +0 -23
  29. package/cjs/ComboBox/v3/parts/controls/Controls.js +0 -71
  30. package/cjs/ComboBox/v3/parts/controls/index.js +0 -9
  31. package/cjs/ComboBox/v3/parts/controls/styled.js +0 -65
  32. package/cjs/ComboBox/v3/parts/controls-input/ControlsInput.js +0 -67
  33. package/cjs/ComboBox/v3/parts/controls-input/styled.js +0 -27
  34. package/cjs/ComboBox/v3/parts/controls-input/useControlsInput.js +0 -77
  35. package/cjs/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.js +0 -33
  36. package/cjs/ComboBox/v3/parts/dropdown-indicator/index.js +0 -2
  37. package/cjs/ComboBox/v3/parts/dropdown-indicator/styled.js +0 -17
  38. package/cjs/ComboBox/v3/parts/empty-state/index.js +0 -27
  39. package/cjs/ComboBox/v3/parts/empty-state/styled.js +0 -19
  40. package/cjs/ComboBox/v3/parts/header-list/HeaderList.js +0 -113
  41. package/cjs/ComboBox/v3/parts/header-list/index.js +0 -9
  42. package/cjs/ComboBox/v3/parts/header-list/styled.js +0 -58
  43. package/cjs/ComboBox/v3/parts/header-list/useHeaderListHandlers.js +0 -73
  44. package/cjs/ComboBox/v3/parts/menu-list/MenuList.js +0 -81
  45. package/cjs/ComboBox/v3/parts/menu-list/index.js +0 -9
  46. package/cjs/ComboBox/v3/parts/menu-list/styled.js +0 -33
  47. package/cjs/ComboBox/v3/parts/menu-list/useItemRenderer.js +0 -105
  48. package/cjs/ComboBox/v3/parts/menu-list/useMenuList.js +0 -61
  49. package/cjs/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +0 -63
  50. package/cjs/ComboBox/v3/parts/multi-selected-values-container/index.js +0 -9
  51. package/cjs/ComboBox/v3/parts/multi-selected-values-container/styled.js +0 -23
  52. package/cjs/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js +0 -71
  53. package/cjs/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.js +0 -28
  54. package/cjs/ComboBox/v3/parts/single-selected-value-container/index.js +0 -9
  55. package/cjs/ComboBox/v3/parts/single-selected-value-container/styled.js +0 -15
  56. package/cjs/ComboBox/v3/propTypes.js +0 -25
  57. package/cjs/ComboBox/v3/utils/hooks/useKeyboardNavigation.js +0 -152
  58. package/cjs/ComboBox/v3/utils/hooks/useOnElementResize.js +0 -37
  59. package/cjs/ComboBox/v3/utils/listHelper.js +0 -39
  60. package/esm/ComboBox/v3/ComboBox.js +0 -24
  61. package/esm/ComboBox/v3/ComboBoxCTX.js +0 -49
  62. package/esm/ComboBox/v3/ComboboxDataTestids.js +0 -13
  63. package/esm/ComboBox/v3/config/constants.js +0 -10
  64. package/esm/ComboBox/v3/config/useComboBox.js +0 -114
  65. package/esm/ComboBox/v3/config/useGetPropsWithDefault.js +0 -7
  66. package/esm/ComboBox/v3/index.d.js +0 -1
  67. package/esm/ComboBox/v3/index.js +0 -1
  68. package/esm/ComboBox/v3/parts/a11y-messages/MultiAllyMessages.js +0 -25
  69. package/esm/ComboBox/v3/parts/a11y-messages/SingleAllyMessages.js +0 -20
  70. package/esm/ComboBox/v3/parts/a11y-messages/index.js +0 -2
  71. package/esm/ComboBox/v3/parts/a11y-messages/styled.js +0 -7
  72. package/esm/ComboBox/v3/parts/container/Container.js +0 -59
  73. package/esm/ComboBox/v3/parts/container/index.js +0 -1
  74. package/esm/ComboBox/v3/parts/container/styled.js +0 -13
  75. package/esm/ComboBox/v3/parts/controls/Controls.js +0 -63
  76. package/esm/ComboBox/v3/parts/controls/index.js +0 -1
  77. package/esm/ComboBox/v3/parts/controls/styled.js +0 -52
  78. package/esm/ComboBox/v3/parts/controls-input/ControlsInput.js +0 -59
  79. package/esm/ComboBox/v3/parts/controls-input/styled.js +0 -16
  80. package/esm/ComboBox/v3/parts/controls-input/useControlsInput.js +0 -73
  81. package/esm/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.js +0 -26
  82. package/esm/ComboBox/v3/parts/dropdown-indicator/index.js +0 -1
  83. package/esm/ComboBox/v3/parts/dropdown-indicator/styled.js +0 -8
  84. package/esm/ComboBox/v3/parts/empty-state/index.js +0 -19
  85. package/esm/ComboBox/v3/parts/empty-state/styled.js +0 -10
  86. package/esm/ComboBox/v3/parts/header-list/HeaderList.js +0 -105
  87. package/esm/ComboBox/v3/parts/header-list/index.js +0 -1
  88. package/esm/ComboBox/v3/parts/header-list/styled.js +0 -41
  89. package/esm/ComboBox/v3/parts/header-list/useHeaderListHandlers.js +0 -69
  90. package/esm/ComboBox/v3/parts/menu-list/MenuList.js +0 -73
  91. package/esm/ComboBox/v3/parts/menu-list/index.js +0 -1
  92. package/esm/ComboBox/v3/parts/menu-list/styled.js +0 -23
  93. package/esm/ComboBox/v3/parts/menu-list/useItemRenderer.js +0 -97
  94. package/esm/ComboBox/v3/parts/menu-list/useMenuList.js +0 -57
  95. package/esm/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +0 -54
  96. package/esm/ComboBox/v3/parts/multi-selected-values-container/index.js +0 -1
  97. package/esm/ComboBox/v3/parts/multi-selected-values-container/styled.js +0 -13
  98. package/esm/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js +0 -67
  99. package/esm/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.js +0 -20
  100. package/esm/ComboBox/v3/parts/single-selected-value-container/index.js +0 -1
  101. package/esm/ComboBox/v3/parts/single-selected-value-container/styled.js +0 -7
  102. package/esm/ComboBox/v3/propTypes.js +0 -21
  103. package/esm/ComboBox/v3/utils/hooks/useKeyboardNavigation.js +0 -148
  104. package/esm/ComboBox/v3/utils/hooks/useOnElementResize.js +0 -33
  105. package/esm/ComboBox/v3/utils/listHelper.js +0 -30
  106. package/types/ComboBox/v3/ComboBox.d.ts +0 -62
  107. package/types/ComboBox/v3/ComboBoxCTX.d.ts +0 -6
  108. package/types/ComboBox/v3/ComboboxDataTestids.d.ts +0 -11
  109. package/types/ComboBox/v3/config/constants.d.ts +0 -8
  110. package/types/ComboBox/v3/config/useComboBox.d.ts +0 -2
  111. package/types/ComboBox/v3/config/useGetPropsWithDefault.d.ts +0 -2
  112. package/types/ComboBox/v3/index.d.ts +0 -1
  113. package/types/ComboBox/v3/parts/a11y-messages/MultiAllyMessages.d.ts +0 -3
  114. package/types/ComboBox/v3/parts/a11y-messages/SingleAllyMessages.d.ts +0 -3
  115. package/types/ComboBox/v3/parts/a11y-messages/index.d.ts +0 -2
  116. package/types/ComboBox/v3/parts/a11y-messages/styled.d.ts +0 -1
  117. package/types/ComboBox/v3/parts/container/Container.d.ts +0 -3
  118. package/types/ComboBox/v3/parts/container/index.d.ts +0 -1
  119. package/types/ComboBox/v3/parts/container/styled.d.ts +0 -3
  120. package/types/ComboBox/v3/parts/controls/Controls.d.ts +0 -3
  121. package/types/ComboBox/v3/parts/controls/index.d.ts +0 -1
  122. package/types/ComboBox/v3/parts/controls/styled.d.ts +0 -7
  123. package/types/ComboBox/v3/parts/controls-input/ControlsInput.d.ts +0 -3
  124. package/types/ComboBox/v3/parts/controls-input/styled.d.ts +0 -4
  125. package/types/ComboBox/v3/parts/controls-input/useControlsInput.d.ts +0 -12
  126. package/types/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.d.ts +0 -3
  127. package/types/ComboBox/v3/parts/dropdown-indicator/index.d.ts +0 -0
  128. package/types/ComboBox/v3/parts/dropdown-indicator/styled.d.ts +0 -1
  129. package/types/ComboBox/v3/parts/empty-state/index.d.ts +0 -3
  130. package/types/ComboBox/v3/parts/empty-state/styled.d.ts +0 -2
  131. package/types/ComboBox/v3/parts/header-list/HeaderList.d.ts +0 -3
  132. package/types/ComboBox/v3/parts/header-list/index.d.ts +0 -1
  133. package/types/ComboBox/v3/parts/header-list/styled.d.ts +0 -7
  134. package/types/ComboBox/v3/parts/header-list/useHeaderListHandlers.d.ts +0 -12
  135. package/types/ComboBox/v3/parts/menu-list/MenuList.d.ts +0 -3
  136. package/types/ComboBox/v3/parts/menu-list/index.d.ts +0 -1
  137. package/types/ComboBox/v3/parts/menu-list/styled.d.ts +0 -10
  138. package/types/ComboBox/v3/parts/menu-list/useItemRenderer.d.ts +0 -2
  139. package/types/ComboBox/v3/parts/menu-list/useMenuList.d.ts +0 -2
  140. package/types/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.d.ts +0 -3
  141. package/types/ComboBox/v3/parts/multi-selected-values-container/index.d.ts +0 -1
  142. package/types/ComboBox/v3/parts/multi-selected-values-container/styled.d.ts +0 -3
  143. package/types/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.d.ts +0 -2
  144. package/types/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.d.ts +0 -3
  145. package/types/ComboBox/v3/parts/single-selected-value-container/index.d.ts +0 -1
  146. package/types/ComboBox/v3/parts/single-selected-value-container/styled.d.ts +0 -1
  147. package/types/ComboBox/v3/propTypes.d.ts +0 -51
  148. package/types/ComboBox/v3/tests/combobox-general.test.d.ts +0 -1
  149. package/types/ComboBox/v3/tests/combobox-multi-select.test.d.ts +0 -1
  150. package/types/ComboBox/v3/tests/combobox-single-select.test.d.ts +0 -1
  151. package/types/ComboBox/v3/tests/combobox-special-keys.test.d.ts +0 -1
  152. package/types/ComboBox/v3/tests/utils.d.ts +0 -22
  153. package/types/ComboBox/v3/utils/hooks/useKeyboardNavigation.d.ts +0 -4
  154. package/types/ComboBox/v3/utils/hooks/useOnElementResize.d.ts +0 -3
  155. package/types/ComboBox/v3/utils/listHelper.d.ts +0 -7
@@ -1,33 +0,0 @@
1
- 'use strict';
2
-
3
- var _jsx = require('@babel/runtime/helpers/jsx');
4
- var React = require('react');
5
- var ChevronSmallDown = require('@elliemae/ds-icons/ChevronSmallDown');
6
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
7
- var styled = require('./styled.js');
8
- var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
9
-
10
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
-
12
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
13
- var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
14
-
15
- var _ChevronSmallDown;
16
-
17
- const DropdownIndicator = () => {
18
- const {
19
- showPopover
20
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
21
- return /*#__PURE__*/_jsx__default["default"](styled.StyledDropDownButton, {
22
- "data-testid": ComboboxDataTestids.ComboboxDataTestid.DROPDOWN,
23
- "aria-controls": "combo-listbox",
24
- "aria-labelledby": "combo-label",
25
- "aria-expanded": showPopover,
26
- "aria-haspopup": "listbox",
27
- buttonType: "text",
28
- icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {})),
29
- tabIndex: -1
30
- });
31
- };
32
-
33
- module.exports = DropdownIndicator;
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -1,17 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var styled = require('styled-components');
6
- var DSButton = require('@elliemae/ds-button');
7
-
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
- var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
12
-
13
- const StyledDropDownButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
14
- componentId: "sc-1ijoe1w-0"
15
- })(["box-sizing:border-box;width:100;& svg{fill:", ";}"], props => props.theme.colors.brand['700']);
16
-
17
- exports.StyledDropDownButton = StyledDropDownButton;
@@ -1,27 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- var React = require('react');
7
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
8
- var styled = require('./styled.js');
9
-
10
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
-
12
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
13
-
14
- var _StyledNoResults, _StyledNoResults2;
15
-
16
- const EmptyState = () => {
17
- const {
18
- props: {
19
- onCreate
20
- }
21
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
22
- return /*#__PURE__*/_jsx__default["default"](styled.StyledNoResultsWrapper, {
23
- id: "id-no-results"
24
- }, void 0, onCreate ? _StyledNoResults || (_StyledNoResults = /*#__PURE__*/_jsx__default["default"](styled.StyledNoResults, {}, void 0, "No items match your search, click RETURN at any point to add your unique entry to the field")) : _StyledNoResults2 || (_StyledNoResults2 = /*#__PURE__*/_jsx__default["default"](styled.StyledNoResults, {}, void 0, "No matches found.")));
25
- };
26
-
27
- exports.EmptyState = EmptyState;
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var styled = require('styled-components');
6
-
7
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
-
9
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
10
-
11
- const StyledNoResultsWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
12
- componentId: "sc-o4fon6-0"
13
- })(["padding:16px;"]);
14
- const StyledNoResults = /*#__PURE__*/styled__default["default"].span.withConfig({
15
- componentId: "sc-o4fon6-1"
16
- })([""]);
17
-
18
- exports.StyledNoResults = StyledNoResults;
19
- exports.StyledNoResultsWrapper = StyledNoResultsWrapper;
@@ -1,113 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- var React = require('react');
7
- var lodash = require('lodash');
8
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
9
- var styled = require('./styled.js');
10
- var listHelper = require('../../utils/listHelper.js');
11
- var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
12
- var useHeaderListHandlers = require('./useHeaderListHandlers.js');
13
- var jsxRuntime = require('react/jsx-runtime');
14
-
15
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
-
17
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
18
-
19
- var _StyledSeparator, _StyledNoOptionsSelec, _StyledSeparator2;
20
-
21
- const HeaderList = () => {
22
- var _inputRef$current;
23
-
24
- const {
25
- props: {
26
- onSelectAll,
27
- onClearAll,
28
- withToggle,
29
- selectedValues,
30
- options
31
- },
32
- showSelectedOptions,
33
- inputRef
34
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
35
- const isSelectAllSupplied = onSelectAll !== lodash.noop;
36
- const isClearAllSupplied = onClearAll !== lodash.noop;
37
- const multiSelectedValues = selectedValues;
38
- const selectableOptions = listHelper.getSelectableOptions(options);
39
- const {
40
- handleKeyDown,
41
- handleClickOnClearAll,
42
- handleClickOnSelectAll,
43
- handleOnBlurClearAll,
44
- handleOnBlurSelectAll,
45
- handleOnMouseDown,
46
- handleToggle
47
- } = useHeaderListHandlers.useHeaderListHandlers();
48
- return /*#__PURE__*/_jsx__default["default"](styled.StyledHeaderListWrapper, {
49
- onKeyDown: handleKeyDown,
50
- onMouseDown: handleOnMouseDown
51
- }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, isSelectAllSupplied && /*#__PURE__*/_jsx__default["default"](styled.StyledButton, {
52
- disabled: (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== '' || selectableOptions.length === multiSelectedValues.length,
53
- "data-testid": ComboboxDataTestids.ComboboxDataTestid.SELECT_ALL_BUTTON,
54
- buttonType: "text",
55
- labelText: "All",
56
- size: "s",
57
- onMouseDown: handleOnMouseDown,
58
- onBlur: handleOnBlurSelectAll,
59
- onClick: handleClickOnSelectAll
60
- }), isSelectAllSupplied && isClearAllSupplied && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {
61
- orientation: "vertical",
62
- position: "center",
63
- type: "group-level",
64
- margin: "none"
65
- }))), isClearAllSupplied && /*#__PURE__*/_jsx__default["default"](styled.StyledButton, {
66
- disabled: multiSelectedValues.length === 0,
67
- tabIndex: 0,
68
- "data-testid": ComboboxDataTestids.ComboboxDataTestid.CLEAR_ALL_BUTTON,
69
- buttonType: "text",
70
- size: "s",
71
- labelText: "Clear",
72
- onMouseDown: handleOnMouseDown,
73
- onBlur: handleOnBlurClearAll,
74
- onClick: handleClickOnClearAll
75
- })), /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, withToggle ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
76
- children: multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx__default["default"](styled.StyledButtonSelection, {
77
- buttonType: "text",
78
- disabled: !showSelectedOptions && selectableOptions.length === multiSelectedValues.length,
79
- onClick: handleToggle,
80
- labelText: !showSelectedOptions ? "".concat(multiSelectedValues.length, " SELECTED") : 'SHOW ALL',
81
- size: "s"
82
- }) : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx__default["default"](styled.StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))
83
- }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
84
- children: [/*#__PURE__*/_jsx__default["default"](styled.StyledShowAllButton, {
85
- buttonType: "text",
86
- "data-testid": ComboboxDataTestids.ComboboxDataTestid.SHOW_ALL_BUTTON,
87
- tabIndex: !showSelectedOptions ? -1 : 0,
88
- onClick: showSelectedOptions ? handleToggle : lodash.noop,
89
- labelText: "SHOW ALL",
90
- isSelected: !showSelectedOptions,
91
- size: "s",
92
- style: {
93
- fontWeight: showSelectedOptions ? '300' : '600'
94
- }
95
- }), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {
96
- orientation: "vertical",
97
- position: "center",
98
- type: "group-level",
99
- margin: "none"
100
- })), /*#__PURE__*/_jsx__default["default"](styled.StyledButtonSelection, {
101
- tabIndex: showSelectedOptions ? -1 : 0,
102
- "data-testid": ComboboxDataTestids.ComboboxDataTestid.SHOW_SELECTED_OPTIONS_BUTTON,
103
- disabled: multiSelectedValues.length === 0 || !showSelectedOptions && selectableOptions.length === multiSelectedValues.length,
104
- buttonType: "text",
105
- isSelected: showSelectedOptions,
106
- onClick: !showSelectedOptions ? handleToggle : lodash.noop,
107
- labelText: "".concat(multiSelectedValues.length, " SELECTED"),
108
- size: "s"
109
- })]
110
- })));
111
- };
112
-
113
- exports.HeaderList = HeaderList;
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var HeaderList = require('./HeaderList.js');
6
-
7
-
8
-
9
- exports.HeaderList = HeaderList.HeaderList;
@@ -1,58 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
- var styled = require('styled-components');
7
- var dsSystem = require('@elliemae/ds-system');
8
- var DSButton = require('@elliemae/ds-button');
9
- var DSSeparator = require('@elliemae/ds-separator');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
14
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
- var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
16
- var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
17
-
18
- var _templateObject;
19
-
20
- const selectedStyle = isSelected => dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n & span {\n border-bottom: 2px solid ", ";\n }\n cursor: ", ";\n"])), props => isSelected ? props.theme.colors.brand[700] : '#FFF', isSelected && 'default');
21
-
22
- const StyledHeaderListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
23
- componentId: "sc-dazbzt-0"
24
- })(["display:flex;position:fixed;top:0;z-index:10;justify-content:space-between;padding:0px 12px 0px 12px;width:100%;height:28px;background-color:#fff;box-shadow:0 4px 2px -4px ", ";overflow-x:hidden;& button{font-size:13px;}"], props => props.theme.colors.neutral[700]);
25
- const StyledSeparator = /*#__PURE__*/styled__default["default"](DSSeparator__default["default"]).withConfig({
26
- componentId: "sc-dazbzt-1"
27
- })(["height:50%;width:auto;"]);
28
- const StyledButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
29
- componentId: "sc-dazbzt-2"
30
- })(["padding:0 ", ";align-items:center;"], props => props.theme.space.xxs);
31
- const StyledGeneralSelectionButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
32
- componentId: "sc-dazbzt-3"
33
- })(["border-radius:0px;padding:0 ", ";margin:0;align-items:center;", " transition:unset;"], props => props.theme.space.xxs, _ref => {
34
- let {
35
- isSelected
36
- } = _ref;
37
- return selectedStyle(isSelected);
38
- });
39
- const StyledButtonSelection = /*#__PURE__*/styled__default["default"](StyledGeneralSelectionButton).withConfig({
40
- componentId: "sc-dazbzt-4"
41
- })(["&:hover:not([disabled]){background-color:transparent;color:", ";}"], props => props.theme.colors.brand['700']);
42
- const StyledShowAllButton = /*#__PURE__*/styled__default["default"](StyledGeneralSelectionButton).withConfig({
43
- componentId: "sc-dazbzt-5"
44
- })(["color:", ";&:hover:not([disabled]){background-color:transparent;color:", ";}"], props => props.theme.colors.neutral['700'], props => props.theme.colors.neutral['700']);
45
- const StyledSelectedItems = /*#__PURE__*/styled__default["default"].div.withConfig({
46
- componentId: "sc-dazbzt-6"
47
- })(["display:flex;align-items:center;"]);
48
- const StyledNoOptionsSelected = /*#__PURE__*/styled__default["default"].div.withConfig({
49
- componentId: "sc-dazbzt-7"
50
- })(["padding:0 ", ";"], props => props.theme.space.xxs);
51
-
52
- exports.StyledButton = StyledButton;
53
- exports.StyledButtonSelection = StyledButtonSelection;
54
- exports.StyledHeaderListWrapper = StyledHeaderListWrapper;
55
- exports.StyledNoOptionsSelected = StyledNoOptionsSelected;
56
- exports.StyledSelectedItems = StyledSelectedItems;
57
- exports.StyledSeparator = StyledSeparator;
58
- exports.StyledShowAllButton = StyledShowAllButton;
@@ -1,73 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
7
-
8
- const useHeaderListHandlers = () => {
9
- const {
10
- props: {
11
- onSelectAll,
12
- onFilter,
13
- onClearAll,
14
- selectedValues
15
- },
16
- inputRef,
17
- showSelectedOptions,
18
- setShowSelectedOptions,
19
- setShowPopover
20
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
21
- const multiSelectedValues = selectedValues;
22
- const handleOnBlurSelectAll = React.useCallback(e => {
23
- if (!onClearAll || multiSelectedValues.length === 0) {
24
- e.preventDefault();
25
- inputRef.current.focus();
26
- }
27
- }, [inputRef, onClearAll, multiSelectedValues]);
28
- const handleOnBlurClearAll = React.useCallback(e => {// since ux change order from the action buttons this is unneccesary. will comment until review finish
29
- // e.preventDefault();
30
- // inputRef.current.focus();
31
- }, [inputRef]);
32
- const handleClickOnSelectAll = React.useCallback(() => {
33
- onSelectAll();
34
- inputRef.current.focus();
35
- }, [onSelectAll, inputRef, setShowPopover]);
36
- const handleClickOnClearAll = React.useCallback(e => {
37
- setShowSelectedOptions(false);
38
- e.preventDefault();
39
- e.stopPropagation();
40
- onClearAll();
41
- inputRef.current.focus();
42
- }, [inputRef, setShowSelectedOptions, onClearAll]);
43
- const handleOnMouseDown = React.useCallback(e => {
44
- e.preventDefault();
45
- }, []);
46
- const handleToggle = React.useCallback(() => {
47
- inputRef.current.value = '';
48
- onFilter('');
49
- setShowSelectedOptions(!showSelectedOptions);
50
- inputRef.current.focus();
51
- }, [setShowSelectedOptions, inputRef, onFilter, showSelectedOptions]);
52
- const handleKeyDown = React.useCallback(e => {
53
- if (e.key === 'Escape') {
54
- setShowPopover(false);
55
- }
56
- }, [setShowPopover]);
57
- React.useEffect(() => {
58
- if (multiSelectedValues.length === 0) {
59
- setShowSelectedOptions(false);
60
- }
61
- }, [multiSelectedValues, setShowSelectedOptions]);
62
- return React.useMemo(() => ({
63
- handleKeyDown,
64
- handleToggle,
65
- handleOnMouseDown,
66
- handleClickOnClearAll,
67
- handleClickOnSelectAll,
68
- handleOnBlurClearAll,
69
- handleOnBlurSelectAll
70
- }), [handleKeyDown, handleToggle, handleOnMouseDown, handleClickOnClearAll, handleClickOnSelectAll, handleOnBlurClearAll, handleOnBlurSelectAll]);
71
- };
72
-
73
- exports.useHeaderListHandlers = useHeaderListHandlers;
@@ -1,81 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- var React = require('react');
7
- var styled = require('./styled.js');
8
- var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
9
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
10
- var HeaderList = require('../header-list/HeaderList.js');
11
- var useOnElementResize = require('../../utils/hooks/useOnElementResize.js');
12
- var index = require('../empty-state/index.js');
13
- var useItemRenderer = require('./useItemRenderer.js');
14
- var useMenuList = require('./useMenuList.js');
15
- var jsxRuntime = require('react/jsx-runtime');
16
-
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
20
-
21
- var _HeaderList, _EmptyState;
22
-
23
- const MenuList = () => {
24
- const {
25
- props: {
26
- menuMinWidth,
27
- menuMaxHeight,
28
- inline,
29
- options,
30
- selectedValues
31
- },
32
- referenceElement,
33
- inputRef,
34
- listRef,
35
- showPopover,
36
- wrapperListRef,
37
- controlsWrapperRef,
38
- virtualListHelpers: {
39
- totalSize
40
- }
41
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
42
- const multiple = Array.isArray(selectedValues);
43
- const withHeader = !inline && multiple && options.length > 0;
44
- const ItemRenderer = useItemRenderer.useItemRenderer();
45
- useMenuList.useMenuList();
46
- useOnElementResize.useOnElementResize(controlsWrapperRef);
47
- const listWidth = React.useMemo(() => menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth), [menuMinWidth, referenceElement]);
48
- const handleOnFocus = React.useCallback(() => {
49
- var _inputRef$current;
50
-
51
- (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
52
- }, [inputRef]);
53
- return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledListWrapper, {
54
- tabIndex: -1,
55
- ref: wrapperListRef,
56
- inline: inline,
57
- onMouseDown: e => e.preventDefault(),
58
- minWidth: listWidth,
59
- id: "combo-listbox",
60
- role: "listbox",
61
- children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx__default["default"](HeaderList.HeaderList, {}))), options.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
62
- tabIndex: -1,
63
- inline: inline,
64
- maxHeight: menuMaxHeight,
65
- ref: listRef,
66
- withHeader: withHeader,
67
- children: /*#__PURE__*/_jsx__default["default"](styled.StyledList, {
68
- tabIndex: -1,
69
- "aria-expanded": showPopover,
70
- onFocus: handleOnFocus,
71
- "data-testid": ComboboxDataTestids.ComboboxDataTestid.LIST,
72
- style: {
73
- height: totalSize,
74
- margin: inline ? '0px' : '8px 0px'
75
- }
76
- }, void 0, ItemRenderer)
77
- }) : _EmptyState || (_EmptyState = /*#__PURE__*/_jsx__default["default"](index.EmptyState, {}))]
78
- });
79
- };
80
-
81
- exports.MenuList = MenuList;
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var MenuList = require('./MenuList.js');
6
-
7
-
8
-
9
- exports.MenuList = MenuList.MenuList;
@@ -1,33 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var styled = require('styled-components');
6
-
7
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
-
9
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
10
-
11
- const StyledListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
12
- componentId: "sc-1uedyf-0"
13
- })(["min-width:", ";"], props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
14
- const StyledList = /*#__PURE__*/styled__default["default"].ul.withConfig({
15
- componentId: "sc-1uedyf-1"
16
- })(["position:relative;padding:0;"]);
17
- const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
18
- componentId: "sc-1uedyf-2"
19
- })(["overflow-y:auto;margin-top:", ";max-height:", ";"], _ref => {
20
- let {
21
- withHeader
22
- } = _ref;
23
- return withHeader ? '28px' : '';
24
- }, _ref2 => {
25
- let {
26
- maxHeight
27
- } = _ref2;
28
- return !maxHeight ? '400px' : "".concat(maxHeight, "px");
29
- });
30
-
31
- exports.StyledList = StyledList;
32
- exports.StyledListWrapper = StyledListWrapper;
33
- exports.StyledVirtualListWrapper = StyledVirtualListWrapper;
@@ -1,105 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- require('core-js/modules/esnext.async-iterator.map.js');
7
- require('core-js/modules/esnext.iterator.map.js');
8
- require('core-js/modules/esnext.async-iterator.filter.js');
9
- require('core-js/modules/esnext.iterator.constructor.js');
10
- require('core-js/modules/esnext.iterator.filter.js');
11
- require('core-js/modules/esnext.async-iterator.for-each.js');
12
- require('core-js/modules/esnext.iterator.for-each.js');
13
- var React = require('react');
14
- var dsForm = require('@elliemae/ds-form');
15
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
16
- var listHelper = require('../../utils/listHelper.js');
17
- var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
18
- var jsxRuntime = require('react/jsx-runtime');
19
-
20
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
21
-
22
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
23
-
24
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
25
-
26
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
27
-
28
- const useItemRenderer = () => {
29
- const {
30
- props: {
31
- options,
32
- onChange,
33
- selectedValues,
34
- onFilter
35
- },
36
- inputRef,
37
- setShowPopover,
38
- focusOptionIdx,
39
- virtualListHelpers
40
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
41
- const {
42
- virtualItems
43
- } = virtualListHelpers;
44
- const multiple = Array.isArray(selectedValues);
45
- const CBItem = multiple ? dsForm.MultiMenuItem : dsForm.SingleMenuItem;
46
- const handleClick = React.useCallback((option, e) => {
47
- var _inputRef$current;
48
-
49
- if (!multiple) {
50
- setShowPopover(false);
51
- if (inputRef.current) inputRef.current.value = '';
52
- } else if (inputRef.current) {
53
- onFilter(inputRef.current.value);
54
- }
55
-
56
- onChange(option);
57
- (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
58
- e.stopPropagation();
59
- e.preventDefault();
60
- }, [onFilter, onChange, setShowPopover, multiple, inputRef]);
61
- const handleOnMouseDown = React.useCallback(e => {
62
- e.preventDefault();
63
- }, []);
64
- const ItemRenderer = React.useMemo(() => virtualItems.map(vItem => {
65
- const option = options[vItem.index];
66
- const generalProps = {
67
- wrapperStyles: {
68
- position: 'absolute',
69
- top: vItem.start,
70
- left: 0,
71
- width: '100%'
72
- },
73
- key: "".concat(option.dsId),
74
- innerRef: vItem.measureRef
75
- };
76
-
77
- if (option.type === 'section') {
78
- return /*#__PURE__*/jsxRuntime.jsx(dsForm.Section, _objectSpread({
79
- label: option.label
80
- }, generalProps));
81
- }
82
-
83
- if (option.type === 'separator') {
84
- return /*#__PURE__*/jsxRuntime.jsx(dsForm.Separator, _objectSpread({}, generalProps));
85
- }
86
-
87
- if (option.type === 'option') {
88
- return /*#__PURE__*/jsxRuntime.jsx(CBItem, _objectSpread(_objectSpread({}, generalProps), {}, {
89
- value: option.value,
90
- label: option.label,
91
- dataTestid: ComboboxDataTestids.ComboboxDataTestid.OPTION,
92
- disabled: option.disabled,
93
- onClick: e => handleClick(option, e),
94
- onMouseDown: handleOnMouseDown,
95
- isActive: option.dsId === focusOptionIdx,
96
- isSelected: listHelper.isSelected(selectedValues, option)
97
- }));
98
- }
99
-
100
- return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
101
- }), [options, focusOptionIdx, selectedValues, inputRef, virtualItems]);
102
- return ItemRenderer;
103
- };
104
-
105
- exports.useItemRenderer = useItemRenderer;
@@ -1,61 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
7
-
8
- const useMenuList = () => {
9
- var _inputRef$current;
10
-
11
- const {
12
- props: {
13
- inline,
14
- selectedValues,
15
- onMenuOpen,
16
- options
17
- },
18
- inputRef,
19
- setCurrentOption,
20
- scrollOptionIntoView,
21
- hasFocus,
22
- showPopover
23
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
24
- React.useEffect(() => {
25
- const getFirstOption = () => {
26
- for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
27
- setCurrentOption(options[i].dsId);
28
- break;
29
- }
30
- };
31
-
32
- if (showPopover || inline) {
33
- onMenuOpen();
34
-
35
- if (inputRef.current.value !== '') {
36
- getFirstOption();
37
- } else if (Array.isArray(selectedValues)) {
38
- const multiSelectedValues = selectedValues;
39
-
40
- if (multiSelectedValues.length > 0) {
41
- setCurrentOption(multiSelectedValues[multiSelectedValues.length - 1].dsId);
42
- scrollOptionIntoView(multiSelectedValues[multiSelectedValues.length - 1].dsId);
43
- } else {
44
- getFirstOption();
45
- }
46
- } else {
47
- const singleSelectedValue = selectedValues;
48
-
49
- if (singleSelectedValue) {
50
- setCurrentOption(selectedValues.dsId);
51
- scrollOptionIntoView(selectedValues.dsId);
52
- } else {
53
- getFirstOption();
54
- }
55
- }
56
- } // eslint-disable-next-line react-hooks/exhaustive-deps
57
-
58
- }, [showPopover, inline, hasFocus, (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]);
59
- };
60
-
61
- exports.useMenuList = useMenuList;