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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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 +49 -39
  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 +44 -36
  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 +33 -57
  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 +31 -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.6",
3
+ "version": "2.3.0-rc.1",
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,15 +720,15 @@
744
720
  "build": "node ../../scripts/build/build.js"
745
721
  },
746
722
  "dependencies": {
747
- "@elliemae/ds-button": "2.3.0-next.6",
748
- "@elliemae/ds-form-layout-blocks": "2.3.0-next.6",
749
- "@elliemae/ds-grid": "2.3.0-next.6",
750
- "@elliemae/ds-icon": "2.3.0-next.6",
751
- "@elliemae/ds-icons": "2.3.0-next.6",
752
- "@elliemae/ds-props-helpers": "2.3.0-next.6",
753
- "@elliemae/ds-system": "2.3.0-next.6",
754
- "@elliemae/ds-tooltip": "2.3.0-next.6",
755
- "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.6",
723
+ "@elliemae/ds-button": "2.3.0-rc.1",
724
+ "@elliemae/ds-form-layout-blocks": "2.3.0-rc.1",
725
+ "@elliemae/ds-grid": "2.3.0-rc.1",
726
+ "@elliemae/ds-icon": "2.3.0-rc.1",
727
+ "@elliemae/ds-icons": "2.3.0-rc.1",
728
+ "@elliemae/ds-props-helpers": "2.3.0-rc.1",
729
+ "@elliemae/ds-system": "2.3.0-rc.1",
730
+ "@elliemae/ds-tooltip": "2.3.0-rc.1",
731
+ "@elliemae/ds-truncated-tooltip-text": "2.3.0-rc.1",
756
732
  "prop-types": "~15.7.2",
757
733
  "react-desc": "~4.1.3",
758
734
  "react-popper": "~2.2.5",