@elliemae/ds-controlled-form 2.4.3-rc.9 → 2.4.4

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 (15) hide show
  1. package/cjs/combobox/ComboBoxCTX.js +2 -1
  2. package/cjs/combobox/parts/controls-input/useKeyboardNavigation.js +3 -2
  3. package/cjs/combobox/parts/menu-list/useItemRenderer.js +2 -1
  4. package/cjs/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.js +2 -1
  5. package/cjs/combobox/parts/multi-selected-values-container/useGroupPills.js +3 -2
  6. package/cjs/combobox/utils/listHelper.js +3 -1
  7. package/esm/combobox/ComboBoxCTX.js +2 -1
  8. package/esm/combobox/parts/controls-input/useKeyboardNavigation.js +3 -2
  9. package/esm/combobox/parts/menu-list/useItemRenderer.js +2 -1
  10. package/esm/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.js +2 -1
  11. package/esm/combobox/parts/multi-selected-values-container/useGroupPills.js +3 -2
  12. package/esm/combobox/utils/listHelper.js +3 -1
  13. package/package.json +15 -15
  14. package/types/combobox/react-desc-prop-types.d.ts +1 -0
  15. package/types/combobox/utils/listHelper.d.ts +1 -1
package/cjs/combobox/ComboBoxCTX.js CHANGED
@@ -18,7 +18,8 @@ const defaultProps = {
18
18
  startPlacementPreference: 'bottom-start',
19
19
  placementOrderPreference: ['bottom-start', 'bottom-end'],
20
20
  noOptionsMessage: 'No Matches Found',
21
- filteredOptions: [] // override in useCombobox to avoid ref duplications when more than one cb is used
21
+ filteredOptions: [],
22
+ isNonClearable: false // override in useCombobox to avoid ref duplications when more than one cb is used
22
23
 
23
24
  };
24
25
  const defaultContext = {
package/cjs/combobox/parts/controls-input/useKeyboardNavigation.js CHANGED
@@ -18,6 +18,7 @@ const useKeyboardNavigation = () => {
18
18
  const {
19
19
  props: {
20
20
  allOptions,
21
+ isNonClearable,
21
22
  onCancel,
22
23
  onKeyDown,
23
24
  onChange,
@@ -156,7 +157,7 @@ const useKeyboardNavigation = () => {
156
157
  const lastValue = listHelper.getLastValueSelected(selectedValues);
157
158
 
158
159
  if (!e.currentTarget.value && lastValue) {
159
- onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
160
+ onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues, isNonClearable), lastValue, e);
160
161
  }
161
162
  }
162
163
 
@@ -171,7 +172,7 @@ const useKeyboardNavigation = () => {
171
172
  }
172
173
  }
173
174
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
174
- [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
175
+ [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef, isNonClearable]);
175
176
  return {
176
177
  onInputKeyDown
177
178
  };
package/cjs/combobox/parts/menu-list/useItemRenderer.js CHANGED
@@ -37,6 +37,7 @@ const useItemRenderer = () => {
37
37
  filteredOptions,
38
38
  onCreate,
39
39
  onChange,
40
+ isNonClearable,
40
41
  selectedValues,
41
42
  onFilter,
42
43
  allOptions
@@ -66,7 +67,7 @@ const useItemRenderer = () => {
66
67
  setMenuState(false, 'selectOption', e);
67
68
  }
68
69
 
69
- onChange(listHelper.getSuggestedValueOnChange(option, selectedValues), option, e);
70
+ onChange(listHelper.getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);
70
71
  }
71
72
  } // prevent for loosing focus on input control
72
73
 
package/cjs/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.js CHANGED
@@ -19,6 +19,7 @@ const RemovableSelectedValuePill = props => {
19
19
  const {
20
20
  props: {
21
21
  onChange,
22
+ isNonClearable,
22
23
  disabled,
23
24
  selectedValues,
24
25
  innerRef
@@ -28,7 +29,7 @@ const RemovableSelectedValuePill = props => {
28
29
  size: "s",
29
30
  label: pill.label,
30
31
  disabled: disabled,
31
- type: disabled ? 'value' : 'removable',
32
+ type: disabled || isNonClearable ? 'value' : 'removable',
32
33
  tabIndex: -1,
33
34
  onRemove: e => {
34
35
  // preventing the menu to be opened
package/cjs/combobox/parts/multi-selected-values-container/useGroupPills.js CHANGED
@@ -21,6 +21,7 @@ const useGroupPills = () => {
21
21
  const {
22
22
  props: {
23
23
  selectedValues,
24
+ isNonClearable,
24
25
  disabled,
25
26
  innerRef
26
27
  },
@@ -51,7 +52,7 @@ const useGroupPills = () => {
51
52
  let lastPillFit = -1;
52
53
  let currentWidth = 0;
53
54
  const referenceWidth = selectedOptionsRef.current.offsetWidth;
54
- const pills = [...pillGroupRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
55
+ const pills = [...pillGroupRef.current.querySelectorAll(disabled || isNonClearable ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
55
56
  const pillsWidth = pills.map(pill => pill?.offsetWidth);
56
57
  pillsWidth.forEach((pillWidth, idx) => {
57
58
  currentWidth += pillWidth;
@@ -71,7 +72,7 @@ const useGroupPills = () => {
71
72
 
72
73
  if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';
73
74
  }
74
- }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled, selectedValuesLength]);
75
+ }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled, selectedValuesLength, isNonClearable]);
75
76
  return pillsToShow || 1;
76
77
  };
77
78
 
package/cjs/combobox/utils/listHelper.js CHANGED
@@ -55,11 +55,12 @@ const getFirstOption = (options, selectedValues, inputValue) => {
55
55
 
56
56
  return '';
57
57
  };
58
- const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
58
+ const getSuggestedValueOnChange = (selectedOption, selectedValues, isNonClearable) => {
59
59
  if (Array.isArray(selectedValues)) {
60
60
  const isFound = selectedValues.find(item => item.type === 'option' && item.value === selectedOption.value);
61
61
 
62
62
  if (isFound) {
63
+ if (isNonClearable) return selectedValues;
63
64
  return selectedValues.filter(item => item.type === 'option' && item.value !== selectedOption.value);
64
65
  }
65
66
 
@@ -67,6 +68,7 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
67
68
  }
68
69
 
69
70
  if (selectedValues && selectedValues.dsId === selectedOption.dsId) {
71
+ if (isNonClearable) return selectedOption;
70
72
  return null;
71
73
  }
72
74
 
package/esm/combobox/ComboBoxCTX.js CHANGED
@@ -14,7 +14,8 @@ const defaultProps = {
14
14
  startPlacementPreference: 'bottom-start',
15
15
  placementOrderPreference: ['bottom-start', 'bottom-end'],
16
16
  noOptionsMessage: 'No Matches Found',
17
- filteredOptions: [] // override in useCombobox to avoid ref duplications when more than one cb is used
17
+ filteredOptions: [],
18
+ isNonClearable: false // override in useCombobox to avoid ref duplications when more than one cb is used
18
19
 
19
20
  };
20
21
  const defaultContext = {
package/esm/combobox/parts/controls-input/useKeyboardNavigation.js CHANGED
@@ -14,6 +14,7 @@ const useKeyboardNavigation = () => {
14
14
  const {
15
15
  props: {
16
16
  allOptions,
17
+ isNonClearable,
17
18
  onCancel,
18
19
  onKeyDown,
19
20
  onChange,
@@ -152,7 +153,7 @@ const useKeyboardNavigation = () => {
152
153
  const lastValue = getLastValueSelected(selectedValues);
153
154
 
154
155
  if (!e.currentTarget.value && lastValue) {
155
- onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
156
+ onChange(getSuggestedValueOnChange(lastValue, selectedValues, isNonClearable), lastValue, e);
156
157
  }
157
158
  }
158
159
 
@@ -167,7 +168,7 @@ const useKeyboardNavigation = () => {
167
168
  }
168
169
  }
169
170
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
170
- [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
171
+ [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef, isNonClearable]);
171
172
  return {
172
173
  onInputKeyDown
173
174
  };
package/esm/combobox/parts/menu-list/useItemRenderer.js CHANGED
@@ -28,6 +28,7 @@ const useItemRenderer = () => {
28
28
  filteredOptions,
29
29
  onCreate,
30
30
  onChange,
31
+ isNonClearable,
31
32
  selectedValues,
32
33
  onFilter,
33
34
  allOptions
@@ -57,7 +58,7 @@ const useItemRenderer = () => {
57
58
  setMenuState(false, 'selectOption', e);
58
59
  }
59
60
 
60
- onChange(getSuggestedValueOnChange(option, selectedValues), option, e);
61
+ onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);
61
62
  }
62
63
  } // prevent for loosing focus on input control
63
64
 
package/esm/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.js CHANGED
@@ -11,6 +11,7 @@ const RemovableSelectedValuePill = props => {
11
11
  const {
12
12
  props: {
13
13
  onChange,
14
+ isNonClearable,
14
15
  disabled,
15
16
  selectedValues,
16
17
  innerRef
@@ -20,7 +21,7 @@ const RemovableSelectedValuePill = props => {
20
21
  size: "s",
21
22
  label: pill.label,
22
23
  disabled: disabled,
23
- type: disabled ? 'value' : 'removable',
24
+ type: disabled || isNonClearable ? 'value' : 'removable',
24
25
  tabIndex: -1,
25
26
  onRemove: e => {
26
27
  // preventing the menu to be opened
package/esm/combobox/parts/multi-selected-values-container/useGroupPills.js CHANGED
@@ -17,6 +17,7 @@ const useGroupPills = () => {
17
17
  const {
18
18
  props: {
19
19
  selectedValues,
20
+ isNonClearable,
20
21
  disabled,
21
22
  innerRef
22
23
  },
@@ -47,7 +48,7 @@ const useGroupPills = () => {
47
48
  let lastPillFit = -1;
48
49
  let currentWidth = 0;
49
50
  const referenceWidth = selectedOptionsRef.current.offsetWidth;
50
- const pills = [...pillGroupRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
51
+ const pills = [...pillGroupRef.current.querySelectorAll(disabled || isNonClearable ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
51
52
  const pillsWidth = pills.map(pill => pill?.offsetWidth);
52
53
  pillsWidth.forEach((pillWidth, idx) => {
53
54
  currentWidth += pillWidth;
@@ -67,7 +68,7 @@ const useGroupPills = () => {
67
68
 
68
69
  if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';
69
70
  }
70
- }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled, selectedValuesLength]);
71
+ }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled, selectedValuesLength, isNonClearable]);
71
72
  return pillsToShow || 1;
72
73
  };
73
74
 
package/esm/combobox/utils/listHelper.js CHANGED
@@ -51,11 +51,12 @@ const getFirstOption = (options, selectedValues, inputValue) => {
51
51
 
52
52
  return '';
53
53
  };
54
- const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
54
+ const getSuggestedValueOnChange = (selectedOption, selectedValues, isNonClearable) => {
55
55
  if (Array.isArray(selectedValues)) {
56
56
  const isFound = selectedValues.find(item => item.type === 'option' && item.value === selectedOption.value);
57
57
 
58
58
  if (isFound) {
59
+ if (isNonClearable) return selectedValues;
59
60
  return selectedValues.filter(item => item.type === 'option' && item.value !== selectedOption.value);
60
61
  }
61
62
 
@@ -63,6 +64,7 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
63
64
  }
64
65
 
65
66
  if (selectedValues && selectedValues.dsId === selectedOption.dsId) {
67
+ if (isNonClearable) return selectedOption;
66
68
  return null;
67
69
  }
68
70
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-controlled-form",
3
- "version": "2.4.3-rc.9",
3
+ "version": "2.4.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Controllers",
6
6
  "module": "./esm/index.js",
@@ -896,20 +896,20 @@
896
896
  "build": "node ../../scripts/build/build.js"
897
897
  },
898
898
  "dependencies": {
899
- "@elliemae/ds-button": "2.4.3-rc.9",
900
- "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.9",
901
- "@elliemae/ds-controlled-form": "2.4.3-rc.9",
902
- "@elliemae/ds-form": "2.4.3-rc.9",
903
- "@elliemae/ds-form-layout-blocks": "2.4.3-rc.9",
904
- "@elliemae/ds-grid": "2.4.3-rc.9",
905
- "@elliemae/ds-icon": "2.4.3-rc.9",
906
- "@elliemae/ds-icons": "2.4.3-rc.9",
907
- "@elliemae/ds-pills": "2.4.3-rc.9",
908
- "@elliemae/ds-popperjs": "2.4.3-rc.9",
909
- "@elliemae/ds-props-helpers": "2.4.3-rc.9",
910
- "@elliemae/ds-system": "2.4.3-rc.9",
911
- "@elliemae/ds-tooltip": "2.4.3-rc.9",
912
- "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.9",
899
+ "@elliemae/ds-button": "2.4.4",
900
+ "@elliemae/ds-circular-progress-indicator": "2.4.4",
901
+ "@elliemae/ds-controlled-form": "2.4.4",
902
+ "@elliemae/ds-form": "2.4.4",
903
+ "@elliemae/ds-form-layout-blocks": "2.4.4",
904
+ "@elliemae/ds-grid": "2.4.4",
905
+ "@elliemae/ds-icon": "2.4.4",
906
+ "@elliemae/ds-icons": "2.4.4",
907
+ "@elliemae/ds-pills": "2.4.4",
908
+ "@elliemae/ds-popperjs": "2.4.4",
909
+ "@elliemae/ds-props-helpers": "2.4.4",
910
+ "@elliemae/ds-system": "2.4.4",
911
+ "@elliemae/ds-tooltip": "2.4.4",
912
+ "@elliemae/ds-truncated-tooltip-text": "2.4.4",
913
913
  "prop-types": "~15.7.2",
914
914
  "react-desc": "~4.1.3",
915
915
  "react-popper": "~2.2.5",
package/types/combobox/react-desc-prop-types.d.ts CHANGED
@@ -52,6 +52,7 @@ export declare namespace DSComboboxT {
52
52
  inline: boolean;
53
53
  withoutPortal: boolean;
54
54
  zIndex: number;
55
+ isNonClearable: boolean;
55
56
  disabled: boolean;
56
57
  noOptionsMessage: string;
57
58
  innerRef: React.RefObject<HTMLInputElement>;
package/types/combobox/utils/listHelper.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare const isSelected: (value: DSComboboxT.SelectedOptionsT, activeOpt
7
7
  export declare const findInCircularList: (list: DSComboboxT.OptionTypes[], from: number, criteria: (item: DSComboboxT.OptionTypes) => boolean, step?: number) => number;
8
8
  export declare const getLastValueSelected: (selectedValues: DSComboboxT.SelectedOptionsT) => DSComboboxT.ItemOption | null;
9
9
  export declare const getFirstOption: (options: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.SelectedOptionsT, inputValue: string) => string;
10
- export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.ItemOption, selectedValues: DSComboboxT.SelectedOptionsT) => DSComboboxT.ItemOption | DSComboboxT.ItemOption[] | null;
10
+ export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.ItemOption, selectedValues: DSComboboxT.SelectedOptionsT, isNonClearable?: boolean | undefined) => DSComboboxT.ItemOption | DSComboboxT.ItemOption[] | null;
11
11
  export declare const filterOptions: (inputValue: string, options: DSComboboxT.OptionTypes[]) => DSComboboxT.OptionTypes[];
12
12
  export declare const selectedValuesWithSections: (optionsToParse: DSComboboxT.OptionTypes[], multiSelectedValue: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];
13
13
  export declare const getFilteredOptionsSelected: (filteredOption: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];