@elliemae/ds-form 2.2.0-alpha.1 → 3.0.0-next.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 (152) hide show
  1. package/cjs/ComboBox/index.js +0 -3
  2. package/cjs/ComboBoxFreeSolo/ComboBoxFreeSolo.js +0 -1
  3. package/cjs/index.js +0 -2
  4. package/esm/ComboBox/index.js +0 -1
  5. package/esm/ComboBoxFreeSolo/ComboBoxFreeSolo.js +0 -1
  6. package/esm/index.js +0 -1
  7. package/package.json +23 -207
  8. package/types/ComboBox/index.d.ts +0 -1
  9. package/types/MenuItem/components/SubmenuItem/styled.d.ts +1 -1
  10. package/types/MenuItem/components/styled.d.ts +3 -3
  11. package/cjs/ComboBox/v3/ComboBox.js +0 -33
  12. package/cjs/ComboBox/v3/ComboBoxCTX.js +0 -55
  13. package/cjs/ComboBox/v3/ComboboxDataTestids.js +0 -17
  14. package/cjs/ComboBox/v3/config/constants.js +0 -14
  15. package/cjs/ComboBox/v3/config/useComboBox.js +0 -122
  16. package/cjs/ComboBox/v3/config/useGetPropsWithDefault.js +0 -11
  17. package/cjs/ComboBox/v3/index.d.js +0 -2
  18. package/cjs/ComboBox/v3/index.js +0 -10
  19. package/cjs/ComboBox/v3/parts/a11y-messages/MultiAllyMessages.js +0 -33
  20. package/cjs/ComboBox/v3/parts/a11y-messages/SingleAllyMessages.js +0 -28
  21. package/cjs/ComboBox/v3/parts/a11y-messages/index.js +0 -11
  22. package/cjs/ComboBox/v3/parts/a11y-messages/styled.js +0 -15
  23. package/cjs/ComboBox/v3/parts/container/Container.js +0 -67
  24. package/cjs/ComboBox/v3/parts/container/index.js +0 -9
  25. package/cjs/ComboBox/v3/parts/container/styled.js +0 -23
  26. package/cjs/ComboBox/v3/parts/controls/Controls.js +0 -71
  27. package/cjs/ComboBox/v3/parts/controls/index.js +0 -9
  28. package/cjs/ComboBox/v3/parts/controls/styled.js +0 -65
  29. package/cjs/ComboBox/v3/parts/controls-input/ControlsInput.js +0 -67
  30. package/cjs/ComboBox/v3/parts/controls-input/styled.js +0 -27
  31. package/cjs/ComboBox/v3/parts/controls-input/useControlsInput.js +0 -77
  32. package/cjs/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.js +0 -33
  33. package/cjs/ComboBox/v3/parts/dropdown-indicator/index.js +0 -2
  34. package/cjs/ComboBox/v3/parts/dropdown-indicator/styled.js +0 -17
  35. package/cjs/ComboBox/v3/parts/empty-state/index.js +0 -27
  36. package/cjs/ComboBox/v3/parts/empty-state/styled.js +0 -19
  37. package/cjs/ComboBox/v3/parts/header-list/HeaderList.js +0 -113
  38. package/cjs/ComboBox/v3/parts/header-list/index.js +0 -9
  39. package/cjs/ComboBox/v3/parts/header-list/styled.js +0 -58
  40. package/cjs/ComboBox/v3/parts/header-list/useHeaderListHandlers.js +0 -73
  41. package/cjs/ComboBox/v3/parts/menu-list/MenuList.js +0 -81
  42. package/cjs/ComboBox/v3/parts/menu-list/index.js +0 -9
  43. package/cjs/ComboBox/v3/parts/menu-list/styled.js +0 -33
  44. package/cjs/ComboBox/v3/parts/menu-list/useItemRenderer.js +0 -105
  45. package/cjs/ComboBox/v3/parts/menu-list/useMenuList.js +0 -61
  46. package/cjs/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +0 -63
  47. package/cjs/ComboBox/v3/parts/multi-selected-values-container/index.js +0 -9
  48. package/cjs/ComboBox/v3/parts/multi-selected-values-container/styled.js +0 -23
  49. package/cjs/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js +0 -71
  50. package/cjs/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.js +0 -28
  51. package/cjs/ComboBox/v3/parts/single-selected-value-container/index.js +0 -9
  52. package/cjs/ComboBox/v3/parts/single-selected-value-container/styled.js +0 -15
  53. package/cjs/ComboBox/v3/propTypes.js +0 -25
  54. package/cjs/ComboBox/v3/utils/hooks/useKeyboardNavigation.js +0 -152
  55. package/cjs/ComboBox/v3/utils/hooks/useOnElementResize.js +0 -37
  56. package/cjs/ComboBox/v3/utils/listHelper.js +0 -39
  57. package/esm/ComboBox/v3/ComboBox.js +0 -24
  58. package/esm/ComboBox/v3/ComboBoxCTX.js +0 -49
  59. package/esm/ComboBox/v3/ComboboxDataTestids.js +0 -13
  60. package/esm/ComboBox/v3/config/constants.js +0 -10
  61. package/esm/ComboBox/v3/config/useComboBox.js +0 -114
  62. package/esm/ComboBox/v3/config/useGetPropsWithDefault.js +0 -7
  63. package/esm/ComboBox/v3/index.d.js +0 -1
  64. package/esm/ComboBox/v3/index.js +0 -1
  65. package/esm/ComboBox/v3/parts/a11y-messages/MultiAllyMessages.js +0 -25
  66. package/esm/ComboBox/v3/parts/a11y-messages/SingleAllyMessages.js +0 -20
  67. package/esm/ComboBox/v3/parts/a11y-messages/index.js +0 -2
  68. package/esm/ComboBox/v3/parts/a11y-messages/styled.js +0 -7
  69. package/esm/ComboBox/v3/parts/container/Container.js +0 -59
  70. package/esm/ComboBox/v3/parts/container/index.js +0 -1
  71. package/esm/ComboBox/v3/parts/container/styled.js +0 -13
  72. package/esm/ComboBox/v3/parts/controls/Controls.js +0 -63
  73. package/esm/ComboBox/v3/parts/controls/index.js +0 -1
  74. package/esm/ComboBox/v3/parts/controls/styled.js +0 -52
  75. package/esm/ComboBox/v3/parts/controls-input/ControlsInput.js +0 -59
  76. package/esm/ComboBox/v3/parts/controls-input/styled.js +0 -16
  77. package/esm/ComboBox/v3/parts/controls-input/useControlsInput.js +0 -73
  78. package/esm/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.js +0 -26
  79. package/esm/ComboBox/v3/parts/dropdown-indicator/index.js +0 -1
  80. package/esm/ComboBox/v3/parts/dropdown-indicator/styled.js +0 -8
  81. package/esm/ComboBox/v3/parts/empty-state/index.js +0 -19
  82. package/esm/ComboBox/v3/parts/empty-state/styled.js +0 -10
  83. package/esm/ComboBox/v3/parts/header-list/HeaderList.js +0 -105
  84. package/esm/ComboBox/v3/parts/header-list/index.js +0 -1
  85. package/esm/ComboBox/v3/parts/header-list/styled.js +0 -41
  86. package/esm/ComboBox/v3/parts/header-list/useHeaderListHandlers.js +0 -69
  87. package/esm/ComboBox/v3/parts/menu-list/MenuList.js +0 -73
  88. package/esm/ComboBox/v3/parts/menu-list/index.js +0 -1
  89. package/esm/ComboBox/v3/parts/menu-list/styled.js +0 -23
  90. package/esm/ComboBox/v3/parts/menu-list/useItemRenderer.js +0 -97
  91. package/esm/ComboBox/v3/parts/menu-list/useMenuList.js +0 -57
  92. package/esm/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +0 -54
  93. package/esm/ComboBox/v3/parts/multi-selected-values-container/index.js +0 -1
  94. package/esm/ComboBox/v3/parts/multi-selected-values-container/styled.js +0 -13
  95. package/esm/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js +0 -67
  96. package/esm/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.js +0 -20
  97. package/esm/ComboBox/v3/parts/single-selected-value-container/index.js +0 -1
  98. package/esm/ComboBox/v3/parts/single-selected-value-container/styled.js +0 -7
  99. package/esm/ComboBox/v3/propTypes.js +0 -21
  100. package/esm/ComboBox/v3/utils/hooks/useKeyboardNavigation.js +0 -148
  101. package/esm/ComboBox/v3/utils/hooks/useOnElementResize.js +0 -33
  102. package/esm/ComboBox/v3/utils/listHelper.js +0 -30
  103. package/types/ComboBox/v3/ComboBox.d.ts +0 -62
  104. package/types/ComboBox/v3/ComboBoxCTX.d.ts +0 -6
  105. package/types/ComboBox/v3/ComboboxDataTestids.d.ts +0 -11
  106. package/types/ComboBox/v3/config/constants.d.ts +0 -8
  107. package/types/ComboBox/v3/config/useComboBox.d.ts +0 -2
  108. package/types/ComboBox/v3/config/useGetPropsWithDefault.d.ts +0 -2
  109. package/types/ComboBox/v3/index.d.ts +0 -1
  110. package/types/ComboBox/v3/parts/a11y-messages/MultiAllyMessages.d.ts +0 -3
  111. package/types/ComboBox/v3/parts/a11y-messages/SingleAllyMessages.d.ts +0 -3
  112. package/types/ComboBox/v3/parts/a11y-messages/index.d.ts +0 -2
  113. package/types/ComboBox/v3/parts/a11y-messages/styled.d.ts +0 -1
  114. package/types/ComboBox/v3/parts/container/Container.d.ts +0 -3
  115. package/types/ComboBox/v3/parts/container/index.d.ts +0 -1
  116. package/types/ComboBox/v3/parts/container/styled.d.ts +0 -3
  117. package/types/ComboBox/v3/parts/controls/Controls.d.ts +0 -3
  118. package/types/ComboBox/v3/parts/controls/index.d.ts +0 -1
  119. package/types/ComboBox/v3/parts/controls/styled.d.ts +0 -7
  120. package/types/ComboBox/v3/parts/controls-input/ControlsInput.d.ts +0 -3
  121. package/types/ComboBox/v3/parts/controls-input/styled.d.ts +0 -4
  122. package/types/ComboBox/v3/parts/controls-input/useControlsInput.d.ts +0 -12
  123. package/types/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.d.ts +0 -3
  124. package/types/ComboBox/v3/parts/dropdown-indicator/index.d.ts +0 -0
  125. package/types/ComboBox/v3/parts/dropdown-indicator/styled.d.ts +0 -1
  126. package/types/ComboBox/v3/parts/empty-state/index.d.ts +0 -3
  127. package/types/ComboBox/v3/parts/empty-state/styled.d.ts +0 -2
  128. package/types/ComboBox/v3/parts/header-list/HeaderList.d.ts +0 -3
  129. package/types/ComboBox/v3/parts/header-list/index.d.ts +0 -1
  130. package/types/ComboBox/v3/parts/header-list/styled.d.ts +0 -7
  131. package/types/ComboBox/v3/parts/header-list/useHeaderListHandlers.d.ts +0 -12
  132. package/types/ComboBox/v3/parts/menu-list/MenuList.d.ts +0 -3
  133. package/types/ComboBox/v3/parts/menu-list/index.d.ts +0 -1
  134. package/types/ComboBox/v3/parts/menu-list/styled.d.ts +0 -10
  135. package/types/ComboBox/v3/parts/menu-list/useItemRenderer.d.ts +0 -2
  136. package/types/ComboBox/v3/parts/menu-list/useMenuList.d.ts +0 -2
  137. package/types/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.d.ts +0 -3
  138. package/types/ComboBox/v3/parts/multi-selected-values-container/index.d.ts +0 -1
  139. package/types/ComboBox/v3/parts/multi-selected-values-container/styled.d.ts +0 -3
  140. package/types/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.d.ts +0 -2
  141. package/types/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.d.ts +0 -3
  142. package/types/ComboBox/v3/parts/single-selected-value-container/index.d.ts +0 -1
  143. package/types/ComboBox/v3/parts/single-selected-value-container/styled.d.ts +0 -1
  144. package/types/ComboBox/v3/propTypes.d.ts +0 -51
  145. package/types/ComboBox/v3/tests/combobox-general.test.d.ts +0 -1
  146. package/types/ComboBox/v3/tests/combobox-multi-select.test.d.ts +0 -1
  147. package/types/ComboBox/v3/tests/combobox-single-select.test.d.ts +0 -1
  148. package/types/ComboBox/v3/tests/combobox-special-keys.test.d.ts +0 -1
  149. package/types/ComboBox/v3/tests/utils.d.ts +0 -22
  150. package/types/ComboBox/v3/utils/hooks/useKeyboardNavigation.d.ts +0 -4
  151. package/types/ComboBox/v3/utils/hooks/useOnElementResize.d.ts +0 -3
  152. package/types/ComboBox/v3/utils/listHelper.d.ts +0 -7
@@ -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 };
@@ -1,114 +0,0 @@
1
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
- import 'core-js/modules/web.dom-collections.iterator.js';
3
- import 'core-js/modules/esnext.async-iterator.for-each.js';
4
- import 'core-js/modules/esnext.iterator.constructor.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import 'core-js/modules/esnext.async-iterator.find.js';
7
- import 'core-js/modules/esnext.iterator.find.js';
8
- import 'core-js/modules/esnext.async-iterator.filter.js';
9
- import 'core-js/modules/esnext.iterator.filter.js';
10
- import { useState, useRef, useCallback, useMemo } from 'react';
11
- import { useVirtual } from 'react-virtual';
12
- import { useGetComboBoxWithDefaultsProps } from './useGetPropsWithDefault.js';
13
-
14
- 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; }
15
-
16
- 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(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; }
17
- const useComboBox = props => {
18
- const [showPopover, setShowPopover] = useState(false);
19
- const [referenceElement, setReferenceElement] = useState(null);
20
- const [showSelectedValue, setShowSelectedValue] = useState(false);
21
- const [showSelectedOptions, setShowSelectedOptions] = useState(false);
22
- const [hasFocus, setHasFocus] = useState(false);
23
- const [focusOptionIdx, setCurrentOption] = useState('');
24
- const inputRef = useRef(null);
25
- const listRef = useRef(null);
26
- const wrapperListRef = useRef(null);
27
- const selectedOptionsRef = useRef(null);
28
- const controlsWrapperRef = useRef(null);
29
- const pillGroupRef = useRef(null);
30
- const propsWithDefaults = useGetComboBoxWithDefaultsProps(props);
31
- const {
32
- options,
33
- selectedValues
34
- } = propsWithDefaults; // ---------------------------------------------------------------------------
35
- // Menu Options with/out selected filter
36
- // ---------------------------------------------------------------------------
37
-
38
- const selectedValuesWithSections = useCallback(() => {
39
- var _items2;
40
-
41
- const multiSelectedValue = selectedValues;
42
- const items = [];
43
- options.forEach(option => {
44
- const isSelectedValue = multiSelectedValue.find(item => item.dsId === option.dsId);
45
-
46
- if (isSelectedValue) {
47
- items.push(option);
48
- }
49
-
50
- if (option.type === 'section') {
51
- var _items;
52
-
53
- if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === 'section') {
54
- items[items.length - 1] = option;
55
- } else {
56
- items.push(option);
57
- }
58
- }
59
- });
60
-
61
- if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === 'section') {
62
- items.pop();
63
- }
64
-
65
- return items;
66
- }, [options, selectedValues]);
67
- const correctOptions = useMemo(() => showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0 ? selectedValuesWithSections() : options, [options, selectedValuesWithSections, selectedValues, showSelectedOptions]); // ===========================================================================
68
- // Virtualization setup
69
- // ===========================================================================
70
-
71
- const virtualListHelpers = useVirtual({
72
- size: correctOptions.length,
73
- parentRef: listRef,
74
- overscan: 15,
75
- paddingStart: 0
76
- }); // ===========================================================================
77
- // Scroll into view function
78
- // ===========================================================================
79
-
80
- const scrollOptionIntoView = useCallback(function (dsId) {
81
- let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
82
- align: 'center'
83
- };
84
- virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), opts);
85
- }, [correctOptions, virtualListHelpers]);
86
- const ctx = useMemo(() => ({
87
- props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
88
- options: correctOptions
89
- }),
90
- virtualListHelpers,
91
- showPopover,
92
- referenceElement,
93
- inputRef,
94
- showSelectedValue,
95
- listRef,
96
- focusOptionIdx,
97
- selectedOptionsRef,
98
- controlsWrapperRef,
99
- hasFocus,
100
- pillGroupRef,
101
- showSelectedOptions,
102
- wrapperListRef,
103
- setShowSelectedOptions,
104
- setHasFocus,
105
- setCurrentOption,
106
- scrollOptionIntoView,
107
- setShowSelectedValue,
108
- setReferenceElement,
109
- setShowPopover
110
- }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, showSelectedValue, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, hasFocus, listRef]);
111
- return ctx;
112
- };
113
-
114
- export { useComboBox };
@@ -1,7 +0,0 @@
1
- import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
2
- import { defaultProps } from '../ComboBoxCTX.js';
3
-
4
- // we have to merge the "default" nested default values with what the user gives us...
5
- const useGetComboBoxWithDefaultsProps = props => useMemoMergePropsWithDefault(props, defaultProps);
6
-
7
- export { useGetComboBoxWithDefaultsProps };
@@ -1 +0,0 @@
1
-
@@ -1 +0,0 @@
1
- export { DSComboBox, DSComboBoxWithSchema } from './ComboBox.js';
@@ -1,25 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/esnext.async-iterator.map.js';
3
- import 'core-js/modules/esnext.iterator.map.js';
4
- import { useContext } from 'react';
5
- import { ComboBoxContext } from '../../ComboBoxCTX.js';
6
- import { getSelectableOptions } from '../../utils/listHelper.js';
7
- import { StyledA11ySelectedValues } from './styled.js';
8
-
9
- const MultiAllyMessages = () => {
10
- const {
11
- props: {
12
- options,
13
- selectedValues
14
- }
15
- } = useContext(ComboBoxContext);
16
- const selectableOptions = getSelectableOptions(options);
17
- const multipleSelectedValues = selectedValues;
18
- return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
19
- "aria-live": "polite",
20
- "aria-atomic": "false",
21
- "aria-relevant": "additions text"
22
- }, void 0, "Options selected: ".concat(multipleSelectedValues.map(item => item.label).join(', '), ". ").concat(multipleSelectedValues.length, " of ").concat(selectableOptions.length));
23
- };
24
-
25
- export { MultiAllyMessages };
@@ -1,20 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { useContext } from 'react';
3
- import { ComboBoxContext } from '../../ComboBoxCTX.js';
4
- import { StyledA11ySelectedValues } from './styled.js';
5
-
6
- const SingleAllyMessages = () => {
7
- const {
8
- props: {
9
- selectedValues
10
- }
11
- } = useContext(ComboBoxContext);
12
- const singleSelectedValue = selectedValues;
13
- return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
14
- "aria-live": "polite",
15
- "aria-atomic": "false",
16
- "aria-relevant": "additions text"
17
- }, void 0, "Option selected: ".concat(singleSelectedValue.label, "."));
18
- };
19
-
20
- export { SingleAllyMessages };
@@ -1,2 +0,0 @@
1
- export { MultiAllyMessages } from './MultiAllyMessages.js';
2
- export { SingleAllyMessages } from './SingleAllyMessages.js';