@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,63 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('core-js/modules/esnext.async-iterator.map.js');
7
- require('core-js/modules/esnext.iterator.map.js');
8
- var React = require('react');
9
- var Grid = require('@elliemae/ds-grid');
10
- var dsPills = require('@elliemae/ds-pills');
11
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
12
- var useGroupPills = require('./useGroupPills.js');
13
- var MultiAllyMessages = require('../a11y-messages/MultiAllyMessages.js');
14
- require('styled-components');
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
- var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
21
-
22
- var _MultiAllyMessages;
23
-
24
- const MultiSelectedValuesContainer = () => {
25
- var _inputRef$current2;
26
-
27
- const {
28
- props: {
29
- selectedValues
30
- },
31
- inputRef,
32
- pillGroupRef
33
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
34
- const multiSelectedValue = selectedValues;
35
- const pillsToShow = useGroupPills.useGroupPills();
36
- const correctPillsToShow = pillsToShow || 1;
37
- const pills = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
38
- style: {
39
- width: 'max-content'
40
- }
41
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {
42
- innerRef: pillGroupRef
43
- }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => {
44
- var _inputRef$current;
45
-
46
- return /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
47
- size: "s",
48
- labelTruncated: ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) === '' || correctPillsToShow !== pillsToShow,
49
- label: option.label,
50
- type: "value"
51
- }, option.value);
52
- }), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
53
- size: "s",
54
- labelTruncated: false,
55
- label: "+".concat(multiSelectedValue.length - correctPillsToShow),
56
- type: "value"
57
- }, "grouped"))), [pillsToShow, pillGroupRef, inputRef, multiSelectedValue, correctPillsToShow]);
58
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
59
- children: [multiSelectedValue.length > 0 && !((_inputRef$current2 = inputRef.current) !== null && _inputRef$current2 !== void 0 && _inputRef$current2.value) && (_MultiAllyMessages || (_MultiAllyMessages = /*#__PURE__*/_jsx__default["default"](MultiAllyMessages.MultiAllyMessages, {}))), pills]
60
- });
61
- };
62
-
63
- exports.MultiSelectedValuesContainer = MultiSelectedValuesContainer;
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var MultiSelectedValuesContainer = require('./MultiSelectedValuesContainer.js');
6
-
7
-
8
-
9
- exports.MultiSelectedValuesContainer = MultiSelectedValuesContainer.MultiSelectedValuesContainer;
@@ -1,23 +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 StyledGroupedPillPopoverContent = /*#__PURE__*/styled__default["default"].div.withConfig({
12
- componentId: "sc-1hugfiz-0"
13
- })(["padding:10px;background-color:#fff;"]);
14
- const StyledGroupPillWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
15
- componentId: "sc-1hugfiz-1"
16
- })([""]);
17
- const StyledA11ySelectedValues = /*#__PURE__*/styled__default["default"].span.withConfig({
18
- componentId: "sc-1hugfiz-2"
19
- })(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
20
-
21
- exports.StyledA11ySelectedValues = StyledA11ySelectedValues;
22
- exports.StyledGroupPillWrapper = StyledGroupPillWrapper;
23
- exports.StyledGroupedPillPopoverContent = StyledGroupedPillPopoverContent;
@@ -1,71 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/web.dom-collections.iterator.js');
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.for-each.js');
9
- require('core-js/modules/esnext.iterator.constructor.js');
10
- require('core-js/modules/esnext.iterator.for-each.js');
11
- var React = require('react');
12
- var useOnElementResize = require('../../utils/hooks/useOnElementResize.js');
13
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
14
-
15
- const getGroupedPillWidth = remainingPills => {
16
- if (remainingPills === 0) return 0;
17
- const digits = remainingPills.toString().length;
18
- return 8 * (digits - 1) + 31;
19
- };
20
-
21
- const useGroupPills = () => {
22
- const {
23
- props: {
24
- selectedValues
25
- },
26
- selectedOptionsRef,
27
- controlsWrapperRef,
28
- pillGroupRef
29
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
30
- const multiSelectedValues = selectedValues;
31
- const [pillsToShow, setPillsToShow] = React.useState(multiSelectedValues.length);
32
- const {
33
- width
34
- } = useOnElementResize.useOnElementResize(controlsWrapperRef);
35
- React.useEffect(() => {
36
- if (multiSelectedValues.length !== pillsToShow) {
37
- setPillsToShow(multiSelectedValues.length);
38
- } // eslint-disable-next-line react-hooks/exhaustive-deps
39
-
40
- }, [multiSelectedValues.length, width]);
41
- React.useLayoutEffect(() => {
42
- if (selectedOptionsRef.current) {
43
- pillGroupRef.current.style.width = 'max-content';
44
- let lastPillFit = -1;
45
- let currentWidth = 0;
46
- const referenceWidth = selectedOptionsRef.current.offsetWidth;
47
- const pills = [...selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-value')];
48
- const pillsWidth = pills.map(pill => pill === null || pill === void 0 ? void 0 : pill.offsetWidth);
49
- pillsWidth.forEach((pillWidth, idx) => {
50
- currentWidth += pillWidth;
51
-
52
- if (currentWidth + getGroupedPillWidth(multiSelectedValues.length - idx - 1) <= referenceWidth) {
53
- lastPillFit = idx;
54
- }
55
- });
56
-
57
- if (!(multiSelectedValues.length > 0 && pillsToShow !== multiSelectedValues.length)) {
58
- const nextPillsToShow = lastPillFit + 1;
59
-
60
- if (nextPillsToShow !== pillsToShow) {
61
- setPillsToShow(nextPillsToShow);
62
- }
63
- }
64
-
65
- pillGroupRef.current.style.width = 'fit-content';
66
- }
67
- }, [selectedOptionsRef, multiSelectedValues, pillsToShow, pillGroupRef, width]);
68
- return pillsToShow;
69
- };
70
-
71
- exports.useGroupPills = useGroupPills;
@@ -1,28 +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 DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
8
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
9
- var styled = require('./styled.js');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
14
-
15
- const SingleSelectedValueContainer = () => {
16
- const {
17
- props: {
18
- selectedValues
19
- },
20
- showSelectedValue
21
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
22
- const singleSelectedValue = selectedValues;
23
- return /*#__PURE__*/_jsx__default["default"](styled.StyledSingleSelectedValue, {}, void 0, showSelectedValue ? /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
24
- value: singleSelectedValue === null || singleSelectedValue === void 0 ? void 0 : singleSelectedValue.label
25
- }) : null);
26
- };
27
-
28
- exports.SingleSelectedValueContainer = SingleSelectedValueContainer;
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var SingleSelectedValueContainer = require('./SingleSelectedValueContainer.js');
6
-
7
-
8
-
9
- exports.SingleSelectedValueContainer = SingleSelectedValueContainer.SingleSelectedValueContainer;
@@ -1,15 +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 StyledSingleSelectedValue = /*#__PURE__*/styled__default["default"].div.withConfig({
12
- componentId: "sc-ui9n59-0"
13
- })(["width:100%;display:flex;align-items:center;"]);
14
-
15
- exports.StyledSingleSelectedValue = StyledSingleSelectedValue;
@@ -1,25 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var reactDesc = require('react-desc');
6
-
7
- const propTypes = {
8
- placeholder: reactDesc.PropTypes.string.description('input s placeholder value').defaultValue(''),
9
- options: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.object]).description('List of options').defaultValue([]),
10
- selectedValues: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object), reactDesc.PropTypes.object]).description('Array of option or single option selected'),
11
- autoFocus: reactDesc.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
12
- hasError: reactDesc.PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
13
- onChange: reactDesc.PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
14
- onSelectAll: reactDesc.PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue(''),
15
- onFilter: reactDesc.PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),
16
- onCreate: reactDesc.PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
17
- onClearAll: reactDesc.PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
18
- onMenuOpen: reactDesc.PropTypes.func.description('function triggered when user open the menu list').defaultValue(''),
19
- inputMinWidth: reactDesc.PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
20
- menuMinWidth: reactDesc.PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
21
- menuMaxHeight: reactDesc.PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
22
- withToggle: reactDesc.PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false')
23
- };
24
-
25
- exports.propTypes = propTypes;
@@ -1,152 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.find.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.find.js');
8
- var React = require('react');
9
- var ComboBoxCTX = require('../../ComboBoxCTX.js');
10
- var listHelper = require('../listHelper.js');
11
-
12
- const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
13
-
14
- const useKeyboardNavigation = () => {
15
- const {
16
- props: {
17
- inline,
18
- onSelectAll,
19
- onKeyDown,
20
- onChange,
21
- onCreate,
22
- options,
23
- selectedValues,
24
- onFilter
25
- },
26
- setShowPopover,
27
- showPopover,
28
- setShowSelectedValue,
29
- focusOptionIdx,
30
- inputRef,
31
- setCurrentOption,
32
- scrollOptionIntoView
33
- } = React.useContext(ComboBoxCTX.ComboBoxContext);
34
- const multiple = Array.isArray(selectedValues);
35
- const selectableOptions = listHelper.getOptions(options);
36
- const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
37
- const currentItem = options.find(item => item.dsId === focusOptionIdx);
38
- const selectOption = React.useCallback(() => {
39
- if (multiple) {
40
- if (inputRef.current) onFilter(inputRef.current.value);
41
- } else {
42
- onFilter('');
43
- if (inputRef.current) inputRef.current.value = '';
44
- setShowSelectedValue(true);
45
- }
46
-
47
- onChange(options.find(item => item.dsId === focusOptionIdx));
48
- setShowPopover(multiple ? true : !showPopover);
49
- }, [multiple, options, focusOptionIdx, setShowPopover, showPopover, onFilter, inputRef, setShowSelectedValue, onChange]);
50
- const onInputKeyDown = React.useCallback(e => {
51
- const targetElement = e.target; // =============================================================================
52
- // CUSTOM KEYS
53
- // =============================================================================
54
-
55
- onKeyDown(e, currentItem); // =============================================================================
56
- // ENTER KEY TO CREATE ELEMENTS
57
- // ====================================================== =================
58
-
59
- if (e.key === 'Enter' && onCreate && !selectableOptions.length) {
60
- onCreate(targetElement.value);
61
- onFilter('');
62
- if (inputRef.current) inputRef.current.value = '';
63
- return;
64
- } // =============================================================================
65
- // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER
66
- // =============================================================================
67
-
68
-
69
- if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
70
- e.preventDefault();
71
-
72
- if (!showPopover && !inline) {
73
- setShowPopover(true);
74
- } else {
75
- selectOption();
76
- }
77
- } // =============================================================================
78
- // CTRL + ENTER + MULTIPLE: SELECT AND CLOSE MENU
79
- // =============================================================================
80
-
81
-
82
- if (e.key === 'Enter' && e.ctrlKey && multiple) {
83
- setShowPopover(false);
84
- }
85
-
86
- if (e.key === 'a' && e.ctrlKey && multiple) {
87
- onSelectAll();
88
- } // =============================================================================
89
- // ARROWS UP AND DOWN
90
- // =============================================================================
91
-
92
-
93
- if (e.key === 'ArrowDown') {
94
- e.preventDefault();
95
-
96
- if (showPopover || inline) {
97
- const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
98
- setCurrentOption(options[nextItemIndex].dsId);
99
- scrollOptionIntoView(options[nextItemIndex].dsId);
100
- } else {
101
- setShowPopover(true);
102
- }
103
- }
104
-
105
- if (e.key === 'ArrowUp') {
106
- e.preventDefault();
107
-
108
- if (showPopover || inline) {
109
- const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
110
- setCurrentOption(options[nextItemIndex].dsId);
111
- scrollOptionIntoView(options[nextItemIndex].dsId);
112
- } else {
113
- setShowPopover(true);
114
- setTimeout(() => {
115
- const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
116
- setCurrentOption(options[nextItemIndex].dsId);
117
- scrollOptionIntoView(options[nextItemIndex].dsId);
118
- });
119
- }
120
- } // =============================================================================
121
- // ESCAPE
122
- // =============================================================================
123
-
124
-
125
- if (e.key === 'Escape' && !inline) {
126
- setShowPopover(false); // TODO confirm funcionality
127
- // onFilter('');
128
- // inputRef.current.value = '';
129
- } // =============================================================================
130
- // BACKSPACE
131
- // =============================================================================
132
-
133
-
134
- if (e.key === 'Backspace' && targetElement.value.length <= 0 && !inline) {
135
- if (multiple && !targetElement.value) {
136
- if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
137
- } else {
138
- onChange(null);
139
- }
140
-
141
- onFilter('');
142
- setShowSelectedValue(true);
143
- }
144
-
145
- if (e.key === 'Tab' && inline) ;
146
- }, [scrollOptionIntoView, currentItemIndex, options, currentItem, selectableOptions, inputRef, multiple, showPopover, selectedValues, inline, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption]);
147
- return {
148
- onInputKeyDown
149
- };
150
- };
151
-
152
- exports.useKeyboardNavigation = useKeyboardNavigation;
@@ -1,37 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/web.dom-collections.iterator.js');
6
- var React = require('react');
7
-
8
- // Taken and modified from https://stackoverflow.com/a/60218754
9
-
10
- const useOnElementResize = targetRef => {
11
- var _targetRef$current, _targetRef$current2;
12
-
13
- const [width, setWidth] = React.useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0);
14
- const [height, setHeight] = React.useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0);
15
- const observer = React.useRef(null);
16
- React.useEffect(() => {
17
- function outputsize() {
18
- if (targetRef.current) {
19
- setWidth(targetRef.current.offsetWidth);
20
- setHeight(targetRef.current.offsetHeight);
21
- }
22
- }
23
-
24
- observer.current = new ResizeObserver(outputsize).observe(targetRef.current);
25
- return () => {
26
- var _observer$current;
27
-
28
- (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
29
- };
30
- }, [targetRef]);
31
- return React.useMemo(() => ({
32
- width,
33
- height
34
- }), [width, height]);
35
- };
36
-
37
- exports.useOnElementResize = useOnElementResize;
@@ -1,39 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- require('core-js/modules/esnext.async-iterator.some.js');
9
- require('core-js/modules/esnext.iterator.some.js');
10
-
11
- const getSelectableOptions = options => options ? options.filter(option => option.type === 'option' && !option.disabled) : [];
12
- const getOptions = options => options ? options.filter(option => option.type === 'option') : [];
13
- const isSelectedValueEmpty = value => Array.isArray(value) ? value.length === 0 : !value;
14
- const isSelectedValueMultiple = value => Array.isArray(value);
15
- const isSelected = (value, activeOption) => {
16
- if (isSelectedValueMultiple(value)) {
17
- const multiValue = value;
18
- return multiValue.some(item => (item === null || item === void 0 ? void 0 : item.value) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value));
19
- }
20
-
21
- const singleValue = value;
22
- return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
23
- };
24
- const findInCircularList = function (list, from, criteria) {
25
- let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
26
-
27
- for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
28
- if (criteria(list[i])) return i;
29
- }
30
-
31
- return from; // return same item
32
- };
33
-
34
- exports.findInCircularList = findInCircularList;
35
- exports.getOptions = getOptions;
36
- exports.getSelectableOptions = getSelectableOptions;
37
- exports.isSelected = isSelected;
38
- exports.isSelectedValueEmpty = isSelectedValueEmpty;
39
- exports.isSelectedValueMultiple = isSelectedValueMultiple;
@@ -1,24 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { describe } from 'react-desc';
4
- import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
5
- import { useComboBox } from './config/useComboBox.js';
6
- import { Container } from './parts/container/Container.js';
7
- import { propTypes } from './propTypes.js';
8
- import { defaultProps, ComboBoxContext } from './ComboBoxCTX.js';
9
-
10
- var _Container;
11
-
12
- const DSComboBox = props => {
13
- const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
14
- useValidateTypescriptPropTypes(propsWithDefault, propTypes);
15
- const ctx = useComboBox(props);
16
- return /*#__PURE__*/_jsx(ComboBoxContext.Provider, {
17
- value: ctx
18
- }, void 0, _Container || (_Container = /*#__PURE__*/_jsx(Container, {})));
19
- };
20
-
21
- const DSComboBoxWithSchema = describe(DSComboBox);
22
- DSComboBoxWithSchema.propTypes = propTypes;
23
-
24
- export { DSComboBox, DSComboBoxWithSchema };
@@ -1,49 +0,0 @@
1
- import { createContext, createRef } from 'react';
2
- import { noop } from 'lodash';
3
-
4
- // eslint-disable-next-line @typescript-eslint/no-empty-function
5
- const defaultProps = {
6
- placeholder: '',
7
- options: [],
8
- selectedValues: null,
9
- hasError: false,
10
- inline: false,
11
- autoFocus: false,
12
- startPlacementPreference: 'bottom-start',
13
- placementOrderPreference: ['bottom-start', 'bottom-end'],
14
- onClearAll: noop,
15
- onSelectAll: noop,
16
- onCreate: noop,
17
- withToggle: false,
18
- onChange: noop,
19
- onKeyDown: noop,
20
- onFilter: noop,
21
- onMenuOpen: noop
22
- };
23
- const defaultContext = {
24
- props: defaultProps,
25
- showPopover: false,
26
- setShowPopover: noop,
27
- scrollOptionIntoView: noop,
28
- referenceElement: null,
29
- hasFocus: false,
30
- setHasFocus: noop,
31
- pillGroupRef: /*#__PURE__*/createRef(),
32
- setReferenceElement: noop,
33
- inputRef: /*#__PURE__*/createRef(),
34
- listRef: /*#__PURE__*/createRef(),
35
- wrapperListRef: /*#__PURE__*/createRef(),
36
- controlsWrapperRef: /*#__PURE__*/createRef(),
37
- selectedOptionsRef: /*#__PURE__*/createRef(),
38
- showSelectedValue: false,
39
- setShowSelectedValue: noop,
40
- focusOptionIdx: '',
41
- setCurrentOption: noop,
42
- showSelectedOptions: false,
43
- setShowSelectedOptions: noop
44
- };
45
- /** Context for cross component communication */
46
-
47
- const ComboBoxContext = /*#__PURE__*/createContext(defaultContext);
48
-
49
- export { ComboBoxContext, ComboBoxContext as default, defaultProps };
@@ -1,13 +0,0 @@
1
- const ComboboxDataTestid = {
2
- INPUT: 'combobox-input',
3
- LIST: 'combobox-menu-list',
4
- SELECTED_VALUES: 'combobox-selected-values',
5
- SELECT_ALL_BUTTON: 'combobox-all-btn',
6
- CLEAR_ALL_BUTTON: 'combobox-clear-btn',
7
- DROPDOWN: 'combobox-dropdown-btn',
8
- OPTION: 'combobox-option',
9
- SHOW_ALL_BUTTON: 'combobox-show-all-btn',
10
- SHOW_SELECTED_OPTIONS_BUTTON: 'combobox-selected-options-btn'
11
- };
12
-
13
- export { ComboboxDataTestid };
@@ -1,10 +0,0 @@
1
- const DATA_TESTID = {
2
- COMBOBOX_MENU_LIST: 'combobox-menu-list',
3
- COMBOBOX_CLEAR_BTN: 'combobox-clear-btn',
4
- COMBOBOX_ALL_BTN: 'combobox-all-btn',
5
- COMBOBOX_DROPDOWN_BTN: 'combobox-dropdown-btn',
6
- COMBOBOX_OPTION: 'combobox-option',
7
- COMBOBOX: 'combobox'
8
- };
9
-
10
- export { DATA_TESTID };