@elliemae/ds-controlled-form 2.3.0-next.1 → 2.3.0-next.14

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 (144) hide show
  1. package/cjs/controlled-autocomplete/parts/controls/styled.js +2 -2
  2. package/cjs/controlled-autocomplete/parts/menu-list/MenuList.js +2 -2
  3. package/cjs/controlled-checkbox/ControlledCheckbox.js +54 -40
  4. package/cjs/controlled-checkbox/config/useValidateProps.js +2 -2
  5. package/cjs/controlled-checkbox/react-desc-prop-types.js +32 -0
  6. package/cjs/controlled-checkbox/utils/styleHelpers.js +4 -4
  7. package/cjs/controlled-combobox/ComboBox.js +3 -6
  8. package/cjs/controlled-combobox/ComboBoxCTX.js +1 -4
  9. package/cjs/controlled-combobox/ComboboxDataTestids.js +2 -1
  10. package/cjs/controlled-combobox/config/useComboBox.js +19 -73
  11. package/cjs/controlled-combobox/config/useCorrectOptions.js +77 -0
  12. package/cjs/controlled-combobox/parts/a11y-messages/FocusMenuItem.js +46 -0
  13. package/cjs/controlled-combobox/parts/a11y-messages/{MultiAllyMessages.js → SelectedValuesAllyMsg.js} +21 -7
  14. package/cjs/controlled-combobox/parts/a11y-messages/index.js +4 -4
  15. package/cjs/controlled-combobox/parts/container/Container.js +32 -21
  16. package/cjs/controlled-combobox/parts/container/styled.js +9 -6
  17. package/cjs/controlled-combobox/parts/controls/Controls.js +31 -19
  18. package/cjs/controlled-combobox/parts/controls/styled.js +24 -12
  19. package/cjs/controlled-combobox/parts/controls/useOnPillsNavigation.js +51 -0
  20. package/cjs/controlled-combobox/parts/controls-input/ControlsInput.js +9 -7
  21. package/cjs/controlled-combobox/parts/controls-input/useControlsInput.js +16 -8
  22. package/cjs/controlled-combobox/parts/dropdown-indicator/DropdownIndicator.js +6 -3
  23. package/cjs/controlled-combobox/parts/dropdown-indicator/styled.js +2 -3
  24. package/cjs/controlled-combobox/parts/header-list/HeaderList.js +8 -13
  25. package/cjs/controlled-combobox/parts/header-list/useHeaderListHandlers.js +12 -5
  26. package/cjs/controlled-combobox/parts/menu-list/MenuList.js +13 -18
  27. package/cjs/controlled-combobox/parts/menu-list/styled.js +5 -1
  28. package/cjs/controlled-combobox/parts/menu-list/useItemRenderer.js +14 -17
  29. package/cjs/controlled-combobox/parts/menu-list/useMenuList.js +11 -13
  30. package/cjs/controlled-combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +33 -19
  31. package/cjs/controlled-combobox/parts/multi-selected-values-container/useGroupPills.js +5 -5
  32. package/cjs/controlled-combobox/react-desc-prop-types.js +42 -0
  33. package/cjs/{controlled-checkbox/index.d.js → controlled-combobox/sharedTypes.js} +0 -0
  34. package/cjs/controlled-combobox/utils/hooks/useKeyboardNavigation.js +19 -18
  35. package/cjs/controlled-combobox/utils/listHelper.js +2 -2
  36. package/cjs/controlled-date-time-picker/parts/ControlledDateTimePickerContent.js +2 -2
  37. package/cjs/controlled-date-time-picker/parts/DateInputs/DateInputs.js +2 -2
  38. package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/Styleds.js +2 -2
  39. package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/Styleds.js +2 -2
  40. package/cjs/controlled-date-time-picker/parts/Styleds.js +6 -6
  41. package/cjs/controlled-date-time-picker/parts/TimeInputs/TimeInputs.js +2 -2
  42. package/esm/controlled-checkbox/ControlledCheckbox.js +49 -37
  43. package/esm/controlled-checkbox/config/useValidateProps.js +2 -2
  44. package/esm/controlled-checkbox/react-desc-prop-types.js +23 -0
  45. package/esm/controlled-checkbox/utils/styleHelpers.js +4 -4
  46. package/esm/controlled-combobox/ComboBox.js +4 -7
  47. package/esm/controlled-combobox/ComboBoxCTX.js +1 -4
  48. package/esm/controlled-combobox/ComboboxDataTestids.js +2 -1
  49. package/esm/controlled-combobox/config/useComboBox.js +22 -76
  50. package/esm/controlled-combobox/config/useCorrectOptions.js +73 -0
  51. package/esm/controlled-combobox/parts/a11y-messages/FocusMenuItem.js +38 -0
  52. package/esm/controlled-combobox/parts/a11y-messages/SelectedValuesAllyMsg.js +39 -0
  53. package/esm/controlled-combobox/parts/a11y-messages/index.js +2 -2
  54. package/esm/controlled-combobox/parts/container/Container.js +30 -21
  55. package/esm/controlled-combobox/parts/container/styled.js +9 -6
  56. package/esm/controlled-combobox/parts/controls/Controls.js +32 -20
  57. package/esm/controlled-combobox/parts/controls/styled.js +22 -10
  58. package/esm/controlled-combobox/parts/controls/useOnPillsNavigation.js +47 -0
  59. package/esm/controlled-combobox/parts/controls-input/ControlsInput.js +9 -7
  60. package/esm/controlled-combobox/parts/controls-input/useControlsInput.js +16 -8
  61. package/esm/controlled-combobox/parts/dropdown-indicator/DropdownIndicator.js +6 -3
  62. package/esm/controlled-combobox/parts/dropdown-indicator/styled.js +3 -3
  63. package/esm/controlled-combobox/parts/header-list/HeaderList.js +8 -13
  64. package/esm/controlled-combobox/parts/header-list/useHeaderListHandlers.js +12 -5
  65. package/esm/controlled-combobox/parts/menu-list/MenuList.js +16 -21
  66. package/esm/controlled-combobox/parts/menu-list/styled.js +5 -2
  67. package/esm/controlled-combobox/parts/menu-list/useItemRenderer.js +12 -15
  68. package/esm/controlled-combobox/parts/menu-list/useMenuList.js +11 -13
  69. package/esm/controlled-combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +35 -20
  70. package/esm/controlled-combobox/parts/multi-selected-values-container/useGroupPills.js +5 -5
  71. package/esm/controlled-combobox/{propTypes.js → react-desc-prop-types.js} +17 -7
  72. package/esm/{controlled-checkbox/index.d.js → controlled-combobox/sharedTypes.js} +0 -0
  73. package/esm/controlled-combobox/utils/hooks/useKeyboardNavigation.js +19 -18
  74. package/esm/controlled-combobox/utils/listHelper.js +2 -2
  75. package/package.json +35 -59
  76. package/types/controlled-checkbox/ControlledCheckbox.d.ts +4 -70
  77. package/types/controlled-checkbox/config/useValidateProps.d.ts +2 -2
  78. package/types/controlled-checkbox/react-desc-prop-types.d.ts +32 -0
  79. package/types/controlled-checkbox/styles.d.ts +3 -3
  80. package/types/controlled-checkbox/utils/setMultipleRefs.d.ts +1 -1
  81. package/types/controlled-checkbox/utils/styleHelpers.d.ts +3 -3
  82. package/types/controlled-combobox/ComboBox.d.ts +4 -70
  83. package/types/controlled-combobox/ComboBoxCTX.d.ts +4 -3
  84. package/types/controlled-combobox/ComboboxDataTestids.d.ts +1 -0
  85. package/types/controlled-combobox/config/useComboBox.d.ts +3 -2
  86. package/types/controlled-combobox/config/useCorrectOptions.d.ts +3 -0
  87. package/types/controlled-combobox/parts/a11y-messages/FocusMenuItem.d.ts +3 -0
  88. package/types/controlled-combobox/parts/a11y-messages/SelectedValuesAllyMsg.d.ts +3 -0
  89. package/types/controlled-combobox/parts/a11y-messages/index.d.ts +2 -2
  90. package/types/controlled-combobox/parts/controls/styled.d.ts +10 -2
  91. package/types/controlled-combobox/parts/controls/useOnPillsNavigation.d.ts +4 -0
  92. package/types/controlled-combobox/parts/dropdown-indicator/styled.d.ts +2 -1
  93. package/types/controlled-combobox/parts/header-list/useHeaderListHandlers.d.ts +2 -1
  94. package/types/controlled-combobox/parts/menu-list/styled.d.ts +1 -0
  95. package/types/controlled-combobox/parts/menu-list/useItemRenderer.d.ts +2 -2
  96. package/types/controlled-combobox/react-desc-prop-types.d.ts +57 -0
  97. package/types/controlled-combobox/sharedTypes.d.ts +27 -0
  98. package/types/controlled-combobox/utils/hooks/useKeyboardNavigation.d.ts +1 -1
  99. package/types/controlled-combobox/utils/listHelper.d.ts +7 -7
  100. package/types/controlled-date-time-picker/parts/Pickers/Calendar/Styleds.d.ts +3 -12
  101. package/types/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/Styleds.d.ts +1 -4
  102. package/types/controlled-date-time-picker/parts/Pickers/TimeWheel/Styleds.d.ts +3 -12
  103. package/types/controlled-date-time-picker/parts/Styleds.d.ts +1 -4
  104. package/cjs/controlled-checkbox/propTypes.js +0 -22
  105. package/cjs/controlled-combobox/config/constants.js +0 -14
  106. package/cjs/controlled-combobox/config/useGetPropsWithDefault.js +0 -11
  107. package/cjs/controlled-combobox/index.d.js +0 -2
  108. package/cjs/controlled-combobox/parts/a11y-messages/SingleAllyMessages.js +0 -28
  109. package/cjs/controlled-combobox/parts/dropdown-indicator/index.js +0 -2
  110. package/cjs/controlled-combobox/parts/empty-state/index.js +0 -23
  111. package/cjs/controlled-combobox/parts/empty-state/styled.js +0 -19
  112. package/cjs/controlled-combobox/parts/multi-selected-values-container/styled.js +0 -23
  113. package/cjs/controlled-combobox/parts/single-selected-value-container/SingleSelectedValueContainer.js +0 -28
  114. package/cjs/controlled-combobox/parts/single-selected-value-container/index.js +0 -9
  115. package/cjs/controlled-combobox/parts/single-selected-value-container/styled.js +0 -15
  116. package/cjs/controlled-combobox/propTypes.js +0 -28
  117. package/esm/controlled-checkbox/propTypes.js +0 -18
  118. package/esm/controlled-combobox/config/constants.js +0 -10
  119. package/esm/controlled-combobox/config/useGetPropsWithDefault.js +0 -7
  120. package/esm/controlled-combobox/index.d.js +0 -1
  121. package/esm/controlled-combobox/parts/a11y-messages/MultiAllyMessages.js +0 -25
  122. package/esm/controlled-combobox/parts/a11y-messages/SingleAllyMessages.js +0 -20
  123. package/esm/controlled-combobox/parts/dropdown-indicator/index.js +0 -1
  124. package/esm/controlled-combobox/parts/empty-state/index.js +0 -15
  125. package/esm/controlled-combobox/parts/empty-state/styled.js +0 -10
  126. package/esm/controlled-combobox/parts/multi-selected-values-container/styled.js +0 -13
  127. package/esm/controlled-combobox/parts/single-selected-value-container/SingleSelectedValueContainer.js +0 -20
  128. package/esm/controlled-combobox/parts/single-selected-value-container/index.js +0 -1
  129. package/esm/controlled-combobox/parts/single-selected-value-container/styled.js +0 -7
  130. package/types/controlled-checkbox/index.d.d.ts +0 -29
  131. package/types/controlled-checkbox/propTypes.d.ts +0 -60
  132. package/types/controlled-combobox/config/constants.d.ts +0 -8
  133. package/types/controlled-combobox/config/useGetPropsWithDefault.d.ts +0 -2
  134. package/types/controlled-combobox/parts/a11y-messages/MultiAllyMessages.d.ts +0 -3
  135. package/types/controlled-combobox/parts/a11y-messages/SingleAllyMessages.d.ts +0 -3
  136. package/types/controlled-combobox/parts/dropdown-indicator/index.d.ts +0 -0
  137. package/types/controlled-combobox/parts/empty-state/index.d.ts +0 -3
  138. package/types/controlled-combobox/parts/empty-state/styled.d.ts +0 -2
  139. package/types/controlled-combobox/parts/multi-selected-values-container/styled.d.ts +0 -3
  140. package/types/controlled-combobox/parts/single-selected-value-container/SingleSelectedValueContainer.d.ts +0 -3
  141. package/types/controlled-combobox/parts/single-selected-value-container/index.d.ts +0 -1
  142. package/types/controlled-combobox/parts/single-selected-value-container/styled.d.ts +0 -1
  143. package/types/controlled-combobox/propTypes.d.ts +0 -60
  144. package/types/controlled-combobox/tests/combobox-special-keys.test.d.ts +0 -1
@@ -2,7 +2,7 @@ import styled from 'styled-components';
2
2
 
3
3
  const StyledListWrapper = /*#__PURE__*/styled.div.withConfig({
4
4
  componentId: "sc-g2fmft-0"
5
- })(["min-width:", ";"], props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
5
+ })(["min-width:", ";background-color:#ffffff;"], props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
6
6
  const StyledList = /*#__PURE__*/styled.ul.withConfig({
7
7
  componentId: "sc-g2fmft-1"
8
8
  })(["position:relative;padding:0;"]);
@@ -22,5 +22,8 @@ const StyledVirtualListWrapper = /*#__PURE__*/styled.div.withConfig({
22
22
  const StyledCreatableLabel = /*#__PURE__*/styled.span.withConfig({
23
23
  componentId: "sc-g2fmft-3"
24
24
  })(["font-weight:bold;font-style:italic;"]);
25
+ const StyledNoResultsWrapper = /*#__PURE__*/styled.div.withConfig({
26
+ componentId: "sc-g2fmft-4"
27
+ })(["padding:16px;"]);
25
28
 
26
- export { StyledCreatableLabel, StyledList, StyledListWrapper, StyledVirtualListWrapper };
29
+ export { StyledCreatableLabel, StyledList, StyledListWrapper, StyledNoResultsWrapper, StyledVirtualListWrapper };
@@ -29,23 +29,20 @@ const useItemRenderer = () => {
29
29
  onCreate,
30
30
  onChange,
31
31
  selectedValues,
32
- onFilter
32
+ onFilter,
33
+ innerRef
33
34
  },
34
- inputRef,
35
35
  setShowPopover,
36
36
  focusOptionIdx,
37
37
  virtualListHelpers
38
38
  } = useContext(ComboBoxContext);
39
- const {
40
- virtualItems
41
- } = virtualListHelpers;
42
39
  const multiple = Array.isArray(selectedValues);
43
40
  const CBItem = multiple ? MultiMenuItem : SingleMenuItem;
44
41
  const handleClick = useCallback((option, e) => {
45
42
  if (option.type === 'creatable') {
46
- if (inputRef.current) {
47
- onCreate(inputRef.current.value);
48
- inputRef.current.value = '';
43
+ if (innerRef.current) {
44
+ onCreate(innerRef.current.value);
45
+ innerRef.current.value = '';
49
46
  onFilter('');
50
47
  }
51
48
 
@@ -53,20 +50,20 @@ const useItemRenderer = () => {
53
50
  }
54
51
 
55
52
  if (!multiple) {
56
- setShowPopover(false);
57
- if (inputRef.current) inputRef.current.value = '';
58
- } else if (inputRef.current) {
59
- onFilter(inputRef.current.value);
53
+ if (!option.disabled) setShowPopover(false);
54
+ if (innerRef.current) innerRef.current.value = '';
55
+ } else if (innerRef.current) {
56
+ onFilter(innerRef.current.value);
60
57
  }
61
58
 
62
59
  onChange(option);
63
60
  e.stopPropagation();
64
61
  e.preventDefault();
65
- }, [onFilter, onChange, setShowPopover, multiple, inputRef]);
62
+ }, [onFilter, onChange, setShowPopover, multiple, innerRef]);
66
63
  const handleOnMouseDown = useCallback(e => {
67
64
  e.preventDefault();
68
65
  }, []);
69
- const ItemRenderer = useMemo(() => virtualItems.map(vItem => {
66
+ const ItemRenderer = useMemo(() => virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.virtualItems.map(vItem => {
70
67
  const option = options[vItem.index];
71
68
  const generalProps = {
72
69
  wrapperStyles: {
@@ -125,7 +122,7 @@ const useItemRenderer = () => {
125
122
  }
126
123
 
127
124
  return /*#__PURE__*/jsx(Fragment, {});
128
- }), [options, focusOptionIdx, selectedValues, inputRef, virtualItems]);
125
+ }), [options, focusOptionIdx, selectedValues, innerRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.virtualItems]);
129
126
  return ItemRenderer;
130
127
  };
131
128
 
@@ -2,16 +2,16 @@ import { useContext, useEffect } from 'react';
2
2
  import { ComboBoxContext } from '../../ComboBoxCTX.js';
3
3
 
4
4
  const useMenuList = () => {
5
- var _inputRef$current2;
5
+ var _innerRef$current2;
6
6
 
7
7
  const {
8
8
  props: {
9
9
  inline,
10
10
  selectedValues,
11
11
  onMenuOpen,
12
- options
12
+ options,
13
+ innerRef
13
14
  },
14
- inputRef,
15
15
  setCurrentOption,
16
16
  scrollOptionIntoView,
17
17
  hasFocus,
@@ -26,18 +26,16 @@ const useMenuList = () => {
26
26
  };
27
27
 
28
28
  if (showPopover || inline) {
29
- var _inputRef$current;
29
+ var _innerRef$current;
30
30
 
31
31
  if (onMenuOpen) onMenuOpen();
32
32
 
33
- if (((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== '') {
33
+ if (((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value) !== '') {
34
34
  getFirstOption();
35
35
  } else if (Array.isArray(selectedValues)) {
36
- const multiSelectedValues = selectedValues;
37
-
38
- if (multiSelectedValues.length > 0) {
39
- setCurrentOption(multiSelectedValues[multiSelectedValues.length - 1].dsId);
40
- scrollOptionIntoView(multiSelectedValues[multiSelectedValues.length - 1].dsId);
36
+ if (selectedValues && selectedValues.length > 0) {
37
+ setCurrentOption(selectedValues[selectedValues.length - 1].dsId);
38
+ scrollOptionIntoView(selectedValues[selectedValues.length - 1].dsId);
41
39
  } else {
42
40
  getFirstOption();
43
41
  }
@@ -45,15 +43,15 @@ const useMenuList = () => {
45
43
  const singleSelectedValue = selectedValues;
46
44
 
47
45
  if (singleSelectedValue) {
48
- setCurrentOption(selectedValues.dsId);
49
- scrollOptionIntoView(selectedValues.dsId);
46
+ setCurrentOption(singleSelectedValue.dsId);
47
+ scrollOptionIntoView(singleSelectedValue.dsId);
50
48
  } else {
51
49
  getFirstOption();
52
50
  }
53
51
  }
54
52
  } // eslint-disable-next-line react-hooks/exhaustive-deps
55
53
 
56
- }, [showPopover, inline, hasFocus, (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value]);
54
+ }, [showPopover, inline, hasFocus, (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.value]);
57
55
  };
58
56
 
59
57
  export { useMenuList };
@@ -1,48 +1,63 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'core-js/modules/esnext.async-iterator.map.js';
3
3
  import 'core-js/modules/esnext.iterator.map.js';
4
- import { useContext, useMemo } from 'react';
5
- import Grid from '@elliemae/ds-grid';
4
+ import { useContext, useCallback, useMemo } from 'react';
6
5
  import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
7
6
  import { ComboBoxContext } from '../../ComboBoxCTX.js';
8
7
  import { useGroupPills } from './useGroupPills.js';
9
- import { MultiAllyMessages } from '../a11y-messages/MultiAllyMessages.js';
10
- import 'styled-components';
11
- import { jsxs, Fragment } from 'react/jsx-runtime';
12
-
13
- var _MultiAllyMessages;
8
+ import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
9
+ import { jsx, Fragment } from 'react/jsx-runtime';
14
10
 
15
11
  const MultiSelectedValuesContainer = () => {
16
- var _inputRef$current;
17
-
18
12
  const {
19
13
  props: {
20
- selectedValues
14
+ selectedValues,
15
+ onChange,
16
+ innerRef
21
17
  },
22
- inputRef,
23
- pillGroupRef
18
+ pillGroupRef,
19
+ showPopover,
20
+ setShowPopover
24
21
  } = useContext(ComboBoxContext);
25
22
  const multiSelectedValue = selectedValues;
26
- const pillsToShow = useGroupPills();
27
- const correctPillsToShow = pillsToShow || 1;
28
- const pills = useMemo(() => /*#__PURE__*/_jsx(Grid, {
23
+ const correctPillsToShow = useGroupPills() || 1;
24
+ const handleClickOnPills = useCallback(e => {
25
+ if (!showPopover) {
26
+ var _innerRef$current;
27
+
28
+ setShowPopover(true);
29
+ (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
30
+ }
31
+
32
+ e.stopPropagation();
33
+ }, [setShowPopover, innerRef, showPopover]);
34
+ const pills = useMemo(() => /*#__PURE__*/_jsx("div", {
29
35
  style: {
30
36
  width: 'max-content'
31
- }
37
+ },
38
+ "data-testid": ComboboxDataTestid.SELECTED_VALUES
32
39
  }, void 0, /*#__PURE__*/_jsx(DSPillGroupV2, {
40
+ onClick: handleClickOnPills,
33
41
  innerRef: pillGroupRef
34
42
  }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => /*#__PURE__*/_jsx(DSPillV2, {
35
43
  size: "s",
36
44
  label: option.label,
37
- type: "value"
45
+ type: "removable",
46
+ tabIndex: -1,
47
+ onRemove: () => {
48
+ var _innerRef$current2;
49
+
50
+ onChange(option);
51
+ (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
52
+ }
38
53
  }, option.value)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx(DSPillV2, {
39
54
  size: "s",
40
55
  labelTruncated: false,
41
56
  label: "+".concat(multiSelectedValue.length - correctPillsToShow),
42
57
  type: "value"
43
- }, "grouped"))), [pillGroupRef, multiSelectedValue, correctPillsToShow]);
44
- return /*#__PURE__*/jsxs(Fragment, {
45
- children: [multiSelectedValue.length > 0 && !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && (_MultiAllyMessages || (_MultiAllyMessages = /*#__PURE__*/_jsx(MultiAllyMessages, {}))), pills]
58
+ }, "grouped"))), [pillGroupRef, innerRef, onChange, handleClickOnPills, multiSelectedValue, correctPillsToShow]);
59
+ return /*#__PURE__*/jsx(Fragment, {
60
+ children: pills
46
61
  });
47
62
  };
48
63
 
@@ -17,9 +17,9 @@ const getGroupedPillWidth = remainingPills => {
17
17
  const useGroupPills = () => {
18
18
  const {
19
19
  props: {
20
- selectedValues
20
+ selectedValues,
21
+ innerRef
21
22
  },
22
- inputRef,
23
23
  selectedOptionsRef,
24
24
  controlsWrapperRef,
25
25
  pillGroupRef
@@ -31,7 +31,7 @@ const useGroupPills = () => {
31
31
  } = useOnElementResize(controlsWrapperRef);
32
32
  const {
33
33
  width: widthInput
34
- } = useOnElementResize(inputRef || null);
34
+ } = useOnElementResize(innerRef || null);
35
35
  useEffect(() => {
36
36
  if (multiSelectedValues.length !== pillsToShow) {
37
37
  setPillsToShow(multiSelectedValues.length);
@@ -44,7 +44,7 @@ const useGroupPills = () => {
44
44
  let lastPillFit = -1;
45
45
  let currentWidth = 0;
46
46
  const referenceWidth = selectedOptionsRef.current.offsetWidth;
47
- const pills = [...selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-value')];
47
+ const pills = [...selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-removable')];
48
48
  const pillsWidth = pills.map(pill => pill === null || pill === void 0 ? void 0 : pill.offsetWidth);
49
49
  pillsWidth.forEach((pillWidth, idx) => {
50
50
  currentWidth += pillWidth;
@@ -64,7 +64,7 @@ const useGroupPills = () => {
64
64
 
65
65
  if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';
66
66
  }
67
- }, [selectedOptionsRef, inputRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput]);
67
+ }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput]);
68
68
  return pillsToShow;
69
69
  };
70
70
 
@@ -1,9 +1,19 @@
1
- import { PropTypes } from 'react-desc';
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
6
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
+ import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
2
8
 
3
- const propTypes = {
9
+ 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; }
10
+
11
+ 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; }
12
+ const ComboboxPropTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
4
13
  placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),
5
- options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),
14
+ options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description('List of options').defaultValue([]),
6
15
  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).description('Array of option or single option selected'),
16
+ disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
7
17
  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
8
18
  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
9
19
  onChange: PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
@@ -16,9 +26,9 @@ const propTypes = {
16
26
  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
17
27
  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
18
28
  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
19
- withToggle: PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false'),
20
29
  withoutPortal: PropTypes.bool.description('Whether the combobox menu is rendered in a portal or not').defaultValue(false),
21
- zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10)
22
- };
30
+ zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),
31
+ innerRef: PropTypes.object.description('ref to the component s container')
32
+ });
23
33
 
24
- export { propTypes };
34
+ export { ComboboxPropTypes };
@@ -5,7 +5,7 @@ import { useContext, useCallback } from 'react';
5
5
  import { ComboBoxContext } from '../../ComboBoxCTX.js';
6
6
  import { findInCircularList } from '../listHelper.js';
7
7
 
8
- const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
8
+ const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
9
9
 
10
10
  const useKeyboardNavigation = () => {
11
11
  const {
@@ -19,13 +19,12 @@ const useKeyboardNavigation = () => {
19
19
  options,
20
20
  selectedValues,
21
21
  onFilter,
22
- withoutPortal
22
+ withoutPortal,
23
+ innerRef
23
24
  },
24
25
  setShowPopover,
25
26
  showPopover,
26
- setShowSelectedValue,
27
27
  focusOptionIdx,
28
- inputRef,
29
28
  setCurrentOption,
30
29
  scrollOptionIntoView,
31
30
  selectAllCheckboxRef,
@@ -36,16 +35,16 @@ const useKeyboardNavigation = () => {
36
35
  const currentItem = options.find(item => item.dsId === focusOptionIdx);
37
36
  const selectOption = useCallback(() => {
38
37
  if (multiple) {
39
- if (inputRef.current) onFilter(inputRef.current.value);
38
+ if (innerRef.current) onFilter(innerRef.current.value);
40
39
  } else {
41
40
  onFilter('');
42
- if (inputRef.current) inputRef.current.value = '';
43
- setShowSelectedValue(true);
41
+ if (innerRef.current) innerRef.current.value = '';
44
42
  }
45
43
 
46
- onChange(options.find(item => item.dsId === focusOptionIdx));
47
- setShowPopover(multiple ? true : !showPopover);
48
- }, [multiple, options, focusOptionIdx, setShowPopover, showPopover, onFilter, inputRef, setShowSelectedValue, onChange]);
44
+ const selectedOption = options.find(item => item.dsId === focusOptionIdx);
45
+ onChange(selectedOption);
46
+ if (!selectedOption.disabled && !multiple) setShowPopover(false);
47
+ }, [multiple, options, focusOptionIdx, setShowPopover, onFilter, innerRef, onChange]);
49
48
  const onInputKeyDown = useCallback(e => {
50
49
  const targetElement = e.target; // =============================================================================
51
50
  // CUSTOM KEYS
@@ -58,7 +57,7 @@ const useKeyboardNavigation = () => {
58
57
  if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 'creatable') {
59
58
  onCreate(targetElement.value);
60
59
  onFilter('');
61
- if (inputRef.current) inputRef.current.value = '';
60
+ if (innerRef.current) innerRef.current.value = '';
62
61
  return;
63
62
  } // =============================================================================
64
63
  // Enter and space on selection
@@ -67,6 +66,7 @@ const useKeyboardNavigation = () => {
67
66
 
68
67
  if (e.key === 'Enter' || e.keyCode === 32 && e.altKey) {
69
68
  e.preventDefault();
69
+ e.stopPropagation();
70
70
 
71
71
  if (!showPopover && !inline) {
72
72
  setShowPopover(true);
@@ -88,6 +88,7 @@ const useKeyboardNavigation = () => {
88
88
 
89
89
  if (e.key === 'ArrowDown') {
90
90
  e.preventDefault();
91
+ e.stopPropagation();
91
92
 
92
93
  if (showPopover || inline) {
93
94
  const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
@@ -100,6 +101,7 @@ const useKeyboardNavigation = () => {
100
101
 
101
102
  if (e.key === 'ArrowUp') {
102
103
  e.preventDefault();
104
+ e.stopPropagation();
103
105
 
104
106
  if (showPopover || inline) {
105
107
  const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
@@ -119,13 +121,13 @@ const useKeyboardNavigation = () => {
119
121
 
120
122
 
121
123
  if (e.key === 'Escape') {
122
- var _inputRef$current;
124
+ var _innerRef$current;
123
125
 
124
126
  if (onCancel) onCancel();
125
127
 
126
- if (inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== '') {
128
+ if (innerRef.current && ((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value) !== '') {
127
129
  onFilter('');
128
- inputRef.current.value = '';
130
+ innerRef.current.value = '';
129
131
  }
130
132
 
131
133
  if (!inline) setShowPopover(false);
@@ -142,7 +144,6 @@ const useKeyboardNavigation = () => {
142
144
  }
143
145
 
144
146
  onFilter('');
145
- setShowSelectedValue(true);
146
147
  }
147
148
 
148
149
  if (e.key === 'Tab' && !inline && !withoutPortal) {
@@ -154,10 +155,10 @@ const useKeyboardNavigation = () => {
154
155
  e.preventDefault();
155
156
  element.focus();
156
157
  }
157
- }
158
+ } // if (e.key === 'Tab' && multiple) {
159
+ // }
158
160
 
159
- if (e.key === 'Tab' && inline) ;
160
- }, [currentItemIndex, options, currentItem, inputRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption, onCancel, selectAllCheckboxRef, toggleSelectionButtonRef, withoutPortal]);
161
+ }, [currentItemIndex, options, currentItem, innerRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, selectOption, onCancel, selectAllCheckboxRef, toggleSelectionButtonRef, withoutPortal]);
161
162
  return {
162
163
  onInputKeyDown
163
164
  };
@@ -4,8 +4,8 @@ import 'core-js/modules/esnext.iterator.filter.js';
4
4
  import 'core-js/modules/esnext.async-iterator.some.js';
5
5
  import 'core-js/modules/esnext.iterator.some.js';
6
6
 
7
- const getSelectableOptions = options => options ? options.filter(option => option.type === 'option' && !option.disabled) : [];
8
- const getOptions = options => options ? options.filter(option => option.type === 'option') : [];
7
+ const getSelectableOptions = options => options.filter(option => option.type === 'option' && !option.disabled);
8
+ const getOptions = options => options.filter(option => option.type === 'option');
9
9
  const isSelectedValueEmpty = value => Array.isArray(value) ? value.length === 0 : !value;
10
10
  const isSelectedValueMultiple = value => Array.isArray(value);
11
11
  const isSelected = (value, activeOption) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-controlled-form",
3
- "version": "2.3.0-next.1",
3
+ "version": "2.3.0-next.14",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Controllers",
6
6
  "module": "./esm/index.js",
@@ -419,30 +419,18 @@
419
419
  "import": "./esm/controlled-combobox/tests/utils.js",
420
420
  "require": "./cjs/controlled-combobox/tests/utils.js"
421
421
  },
422
- "./controlled-combobox/propTypes": {
423
- "import": "./esm/controlled-combobox/propTypes.js",
424
- "require": "./cjs/controlled-combobox/propTypes.js"
422
+ "./controlled-combobox/sharedTypes": {
423
+ "import": "./esm/controlled-combobox/sharedTypes.js",
424
+ "require": "./cjs/controlled-combobox/sharedTypes.js"
425
425
  },
426
- "./controlled-combobox/parts/single-selected-value-container/styled": {
427
- "import": "./esm/controlled-combobox/parts/single-selected-value-container/styled.js",
428
- "require": "./cjs/controlled-combobox/parts/single-selected-value-container/styled.js"
429
- },
430
- "./controlled-combobox/parts/single-selected-value-container/SingleSelectedValueContainer": {
431
- "import": "./esm/controlled-combobox/parts/single-selected-value-container/SingleSelectedValueContainer.js",
432
- "require": "./cjs/controlled-combobox/parts/single-selected-value-container/SingleSelectedValueContainer.js"
433
- },
434
- "./controlled-combobox/parts/single-selected-value-container": {
435
- "import": "./esm/controlled-combobox/parts/single-selected-value-container/index.js",
436
- "require": "./cjs/controlled-combobox/parts/single-selected-value-container/index.js"
426
+ "./controlled-combobox/react-desc-prop-types": {
427
+ "import": "./esm/controlled-combobox/react-desc-prop-types.js",
428
+ "require": "./cjs/controlled-combobox/react-desc-prop-types.js"
437
429
  },
438
430
  "./controlled-combobox/parts/multi-selected-values-container/useGroupPills": {
439
431
  "import": "./esm/controlled-combobox/parts/multi-selected-values-container/useGroupPills.js",
440
432
  "require": "./cjs/controlled-combobox/parts/multi-selected-values-container/useGroupPills.js"
441
433
  },
442
- "./controlled-combobox/parts/multi-selected-values-container/styled": {
443
- "import": "./esm/controlled-combobox/parts/multi-selected-values-container/styled.js",
444
- "require": "./cjs/controlled-combobox/parts/multi-selected-values-container/styled.js"
445
- },
446
434
  "./controlled-combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer": {
447
435
  "import": "./esm/controlled-combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js",
448
436
  "require": "./cjs/controlled-combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js"
@@ -487,26 +475,18 @@
487
475
  "import": "./esm/controlled-combobox/parts/header-list/HeaderList.js",
488
476
  "require": "./cjs/controlled-combobox/parts/header-list/HeaderList.js"
489
477
  },
490
- "./controlled-combobox/parts/empty-state/styled": {
491
- "import": "./esm/controlled-combobox/parts/empty-state/styled.js",
492
- "require": "./cjs/controlled-combobox/parts/empty-state/styled.js"
493
- },
494
- "./controlled-combobox/parts/empty-state": {
495
- "import": "./esm/controlled-combobox/parts/empty-state/index.js",
496
- "require": "./cjs/controlled-combobox/parts/empty-state/index.js"
497
- },
498
478
  "./controlled-combobox/parts/dropdown-indicator/styled": {
499
479
  "import": "./esm/controlled-combobox/parts/dropdown-indicator/styled.js",
500
480
  "require": "./cjs/controlled-combobox/parts/dropdown-indicator/styled.js"
501
481
  },
502
- "./controlled-combobox/parts/dropdown-indicator": {
503
- "import": "./esm/controlled-combobox/parts/dropdown-indicator/index.js",
504
- "require": "./cjs/controlled-combobox/parts/dropdown-indicator/index.js"
505
- },
506
482
  "./controlled-combobox/parts/dropdown-indicator/DropdownIndicator": {
507
483
  "import": "./esm/controlled-combobox/parts/dropdown-indicator/DropdownIndicator.js",
508
484
  "require": "./cjs/controlled-combobox/parts/dropdown-indicator/DropdownIndicator.js"
509
485
  },
486
+ "./controlled-combobox/parts/controls/useOnPillsNavigation": {
487
+ "import": "./esm/controlled-combobox/parts/controls/useOnPillsNavigation.js",
488
+ "require": "./cjs/controlled-combobox/parts/controls/useOnPillsNavigation.js"
489
+ },
510
490
  "./controlled-combobox/parts/controls/styled": {
511
491
  "import": "./esm/controlled-combobox/parts/controls/styled.js",
512
492
  "require": "./cjs/controlled-combobox/parts/controls/styled.js"
@@ -547,34 +527,30 @@
547
527
  "import": "./esm/controlled-combobox/parts/a11y-messages/styled.js",
548
528
  "require": "./cjs/controlled-combobox/parts/a11y-messages/styled.js"
549
529
  },
550
- "./controlled-combobox/parts/a11y-messages/SingleAllyMessages": {
551
- "import": "./esm/controlled-combobox/parts/a11y-messages/SingleAllyMessages.js",
552
- "require": "./cjs/controlled-combobox/parts/a11y-messages/SingleAllyMessages.js"
553
- },
554
- "./controlled-combobox/parts/a11y-messages/MultiAllyMessages": {
555
- "import": "./esm/controlled-combobox/parts/a11y-messages/MultiAllyMessages.js",
556
- "require": "./cjs/controlled-combobox/parts/a11y-messages/MultiAllyMessages.js"
530
+ "./controlled-combobox/parts/a11y-messages/SelectedValuesAllyMsg": {
531
+ "import": "./esm/controlled-combobox/parts/a11y-messages/SelectedValuesAllyMsg.js",
532
+ "require": "./cjs/controlled-combobox/parts/a11y-messages/SelectedValuesAllyMsg.js"
557
533
  },
558
534
  "./controlled-combobox/parts/a11y-messages": {
559
535
  "import": "./esm/controlled-combobox/parts/a11y-messages/index.js",
560
536
  "require": "./cjs/controlled-combobox/parts/a11y-messages/index.js"
561
537
  },
538
+ "./controlled-combobox/parts/a11y-messages/FocusMenuItem": {
539
+ "import": "./esm/controlled-combobox/parts/a11y-messages/FocusMenuItem.js",
540
+ "require": "./cjs/controlled-combobox/parts/a11y-messages/FocusMenuItem.js"
541
+ },
562
542
  "./controlled-combobox": {
563
543
  "import": "./esm/controlled-combobox/index.js",
564
544
  "require": "./cjs/controlled-combobox/index.js"
565
545
  },
566
- "./controlled-combobox/config/useGetPropsWithDefault": {
567
- "import": "./esm/controlled-combobox/config/useGetPropsWithDefault.js",
568
- "require": "./cjs/controlled-combobox/config/useGetPropsWithDefault.js"
546
+ "./controlled-combobox/config/useCorrectOptions": {
547
+ "import": "./esm/controlled-combobox/config/useCorrectOptions.js",
548
+ "require": "./cjs/controlled-combobox/config/useCorrectOptions.js"
569
549
  },
570
550
  "./controlled-combobox/config/useComboBox": {
571
551
  "import": "./esm/controlled-combobox/config/useComboBox.js",
572
552
  "require": "./cjs/controlled-combobox/config/useComboBox.js"
573
553
  },
574
- "./controlled-combobox/config/constants": {
575
- "import": "./esm/controlled-combobox/config/constants.js",
576
- "require": "./cjs/controlled-combobox/config/constants.js"
577
- },
578
554
  "./controlled-combobox/ComboboxDataTestids": {
579
555
  "import": "./esm/controlled-combobox/ComboboxDataTestids.js",
580
556
  "require": "./cjs/controlled-combobox/ComboboxDataTestids.js"
@@ -599,9 +575,9 @@
599
575
  "import": "./esm/controlled-checkbox/styles.js",
600
576
  "require": "./cjs/controlled-checkbox/styles.js"
601
577
  },
602
- "./controlled-checkbox/propTypes": {
603
- "import": "./esm/controlled-checkbox/propTypes.js",
604
- "require": "./cjs/controlled-checkbox/propTypes.js"
578
+ "./controlled-checkbox/react-desc-prop-types": {
579
+ "import": "./esm/controlled-checkbox/react-desc-prop-types.js",
580
+ "require": "./cjs/controlled-checkbox/react-desc-prop-types.js"
605
581
  },
606
582
  "./controlled-checkbox": {
607
583
  "import": "./esm/controlled-checkbox/index.js",
@@ -744,22 +720,22 @@
744
720
  "build": "node ../../scripts/build/build.js"
745
721
  },
746
722
  "dependencies": {
747
- "@elliemae/ds-button": "2.3.0-next.1",
748
- "@elliemae/ds-form-layout-blocks": "2.3.0-next.1",
749
- "@elliemae/ds-grid": "2.3.0-next.1",
750
- "@elliemae/ds-icon": "2.3.0-next.1",
751
- "@elliemae/ds-icons": "2.3.0-next.1",
752
- "@elliemae/ds-props-helpers": "2.3.0-next.1",
753
- "@elliemae/ds-system": "2.3.0-next.1",
754
- "@elliemae/ds-tooltip": "2.3.0-next.1",
755
- "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.1",
723
+ "@elliemae/ds-button": "2.3.0-next.14",
724
+ "@elliemae/ds-form-layout-blocks": "2.3.0-next.14",
725
+ "@elliemae/ds-grid": "2.3.0-next.14",
726
+ "@elliemae/ds-icon": "2.3.0-next.14",
727
+ "@elliemae/ds-icons": "2.3.0-next.14",
728
+ "@elliemae/ds-props-helpers": "2.3.0-next.14",
729
+ "@elliemae/ds-system": "2.3.0-next.14",
730
+ "@elliemae/ds-tooltip": "2.3.0-next.14",
731
+ "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.14",
756
732
  "prop-types": "~15.7.2",
757
733
  "react-desc": "~4.1.3",
758
734
  "react-popper": "~2.2.5",
759
735
  "uid": "~2.0.0"
760
736
  },
761
737
  "devDependencies": {
762
- "@elliemae/pui-theme": "~2.2.5",
738
+ "@elliemae/pui-theme": "~2.3.0",
763
739
  "@testing-library/dom": "~8.11.1",
764
740
  "@testing-library/jest-dom": "~5.15.0",
765
741
  "@testing-library/react": "~12.1.2",
@@ -768,7 +744,7 @@
768
744
  "styled-system": "~5.1.5"
769
745
  },
770
746
  "peerDependencies": {
771
- "@elliemae/pui-theme": "^2.2.5",
747
+ "@elliemae/pui-theme": "~2.3.0",
772
748
  "react": "^17.0.2",
773
749
  "react-dom": "^17.0.2",
774
750
  "styled-components": "^5.3.3",