@elliemae/ds-controlled-form 2.4.3-rc.4 → 2.4.3-rc.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/cjs/combobox/parts/controls-input/ControlsInput.js +1 -1
  2. package/cjs/combobox/parts/controls-input/styled.js +5 -0
  3. package/cjs/combobox/parts/controls-input/useControlsInput.js +5 -2
  4. package/cjs/combobox/parts/controls-input/useKeyboardNavigation.js +0 -2
  5. package/cjs/combobox/utils/listHelper.js +4 -1
  6. package/esm/combobox/parts/controls-input/ControlsInput.js +1 -1
  7. package/esm/combobox/parts/controls-input/styled.js +5 -0
  8. package/esm/combobox/parts/controls-input/useControlsInput.js +5 -2
  9. package/esm/combobox/parts/controls-input/useKeyboardNavigation.js +0 -2
  10. package/esm/combobox/utils/listHelper.js +4 -1
  11. package/package.json +15 -15
  12. package/types/combobox/react-desc-prop-types.d.ts +0 -1
package/cjs/combobox/parts/controls-input/ControlsInput.js CHANGED
@@ -44,7 +44,7 @@ const ControlsInput = () => {
44
44
  return /*#__PURE__*/_jsx__default["default"](styled.StyledInputWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledInputWidthReference, {
45
45
  ref: spanReference,
46
46
  children: spanReferenceText
47
- }), /*#__PURE__*/_jsx__default["default"](styled.StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
47
+ }), showPlaceholder && /*#__PURE__*/_jsx__default["default"](styled.StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
48
48
  value: showPlaceholder
49
49
  })), /*#__PURE__*/jsxRuntime.jsx(styled.StyledInput, {
50
50
  "data-testid": ComboboxDataTestids.ComboboxDataTestid.INPUT,
package/cjs/combobox/parts/controls-input/styled.js CHANGED
@@ -12,7 +12,9 @@ const StyledInput = dsSystem.styled('input', {
12
12
  font-size: 13px;
13
13
  line-height: 13px;
14
14
  border: none;
15
+ overflow: hidden;
15
16
  padding: 0;
17
+ z-index: 2;
16
18
  outline: none;
17
19
  color: ${props => props.theme.colors.neutral[700]};
18
20
  &:focus {
@@ -41,17 +43,20 @@ const StyledInputPlaceHolder = dsSystem.styled.div`
41
43
  & span::after {
42
44
  content: '';
43
45
  padding: 1px;
46
+ // solve italic font style clipping issue with overflow hidden.
44
47
  }
45
48
  `;
46
49
  const StyledInputWidthReference = dsSystem.styled.span`
47
50
  visibility: hidden;
48
51
  position: absolute;
49
52
  top: -9999px;
53
+ z-index: 1;
50
54
  `;
51
55
  const StyledInputWrapper = dsSystem.styled('div')`
52
56
  position: relative;
53
57
  align-items: center;
54
58
  display: flex;
59
+ padding-right: 1px;
55
60
  `;
56
61
 
57
62
  exports.StyledInput = StyledInput;
package/cjs/combobox/parts/controls-input/useControlsInput.js CHANGED
@@ -17,7 +17,6 @@ const useControlsInput = () => {
17
17
  },
18
18
  setHasFocus,
19
19
  inputValue,
20
- setMenuState,
21
20
  setInputValue
22
21
  } = React.useContext(ComboBoxCTX.ComboBoxContext);
23
22
  const [width, setWidth] = React.useState(1); // use span reference to calculate the real width for the input
@@ -26,7 +25,11 @@ const useControlsInput = () => {
26
25
  const showPlaceholder = !inputValue && listHelper.isSelectedValueEmpty(selectedValues) ? placeholder : null;
27
26
  const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
28
27
  React.useEffect(() => {
29
- setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
28
+ if (spanReference.current) {
29
+ spanReference.current.style.display = 'block';
30
+ setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
31
+ spanReference.current.style.display = 'none';
32
+ }
30
33
  }, [inputValue]); // if we se an input mask we configure inside here the proper mask
31
34
  // or a stardard combobox onchange event
32
35
 
package/cjs/combobox/parts/controls-input/useKeyboardNavigation.js CHANGED
@@ -158,8 +158,6 @@ const useKeyboardNavigation = () => {
158
158
  if (!e.currentTarget.value && lastValue) {
159
159
  onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
160
160
  }
161
-
162
- if (onFilter) onFilter(allOptions, inputValue);
163
161
  }
164
162
 
165
163
  if (e.key === 'Tab' && !inline && menuState) {
package/cjs/combobox/utils/listHelper.js CHANGED
@@ -72,7 +72,10 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
72
72
 
73
73
  return selectedOption;
74
74
  };
75
- const filterOptions = (inputValue, options) => options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
75
+ const filterOptions = (inputValue, options) => {
76
+ if (inputValue === '') return options;
77
+ return options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
78
+ };
76
79
  const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
77
80
  const items = [];
78
81
  if (optionsToParse) optionsToParse.forEach(option => {
package/esm/combobox/parts/controls-input/ControlsInput.js CHANGED
@@ -36,7 +36,7 @@ const ControlsInput = () => {
36
36
  return /*#__PURE__*/_jsx(StyledInputWrapper, {}, void 0, /*#__PURE__*/jsx(StyledInputWidthReference, {
37
37
  ref: spanReference,
38
38
  children: spanReferenceText
39
- }), /*#__PURE__*/_jsx(StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
39
+ }), showPlaceholder && /*#__PURE__*/_jsx(StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
40
40
  value: showPlaceholder
41
41
  })), /*#__PURE__*/jsx(StyledInput, {
42
42
  "data-testid": ComboboxDataTestid.INPUT,
package/esm/combobox/parts/controls-input/styled.js CHANGED
@@ -8,7 +8,9 @@ const StyledInput = styled('input', {
8
8
  font-size: 13px;
9
9
  line-height: 13px;
10
10
  border: none;
11
+ overflow: hidden;
11
12
  padding: 0;
13
+ z-index: 2;
12
14
  outline: none;
13
15
  color: ${props => props.theme.colors.neutral[700]};
14
16
  &:focus {
@@ -37,17 +39,20 @@ const StyledInputPlaceHolder = styled.div`
37
39
  & span::after {
38
40
  content: '';
39
41
  padding: 1px;
42
+ // solve italic font style clipping issue with overflow hidden.
40
43
  }
41
44
  `;
42
45
  const StyledInputWidthReference = styled.span`
43
46
  visibility: hidden;
44
47
  position: absolute;
45
48
  top: -9999px;
49
+ z-index: 1;
46
50
  `;
47
51
  const StyledInputWrapper = styled('div')`
48
52
  position: relative;
49
53
  align-items: center;
50
54
  display: flex;
55
+ padding-right: 1px;
51
56
  `;
52
57
 
53
58
  export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };
package/esm/combobox/parts/controls-input/useControlsInput.js CHANGED
@@ -13,7 +13,6 @@ const useControlsInput = () => {
13
13
  },
14
14
  setHasFocus,
15
15
  inputValue,
16
- setMenuState,
17
16
  setInputValue
18
17
  } = useContext(ComboBoxContext);
19
18
  const [width, setWidth] = useState(1); // use span reference to calculate the real width for the input
@@ -22,7 +21,11 @@ const useControlsInput = () => {
22
21
  const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;
23
22
  const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
24
23
  useEffect(() => {
25
- setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
24
+ if (spanReference.current) {
25
+ spanReference.current.style.display = 'block';
26
+ setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
27
+ spanReference.current.style.display = 'none';
28
+ }
26
29
  }, [inputValue]); // if we se an input mask we configure inside here the proper mask
27
30
  // or a stardard combobox onchange event
28
31
 
package/esm/combobox/parts/controls-input/useKeyboardNavigation.js CHANGED
@@ -154,8 +154,6 @@ const useKeyboardNavigation = () => {
154
154
  if (!e.currentTarget.value && lastValue) {
155
155
  onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
156
156
  }
157
-
158
- if (onFilter) onFilter(allOptions, inputValue);
159
157
  }
160
158
 
161
159
  if (e.key === 'Tab' && !inline && menuState) {
package/esm/combobox/utils/listHelper.js CHANGED
@@ -68,7 +68,10 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
68
68
 
69
69
  return selectedOption;
70
70
  };
71
- const filterOptions = (inputValue, options) => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
71
+ const filterOptions = (inputValue, options) => {
72
+ if (inputValue === '') return options;
73
+ return options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
74
+ };
72
75
  const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
73
76
  const items = [];
74
77
  if (optionsToParse) optionsToParse.forEach(option => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-controlled-form",
3
- "version": "2.4.3-rc.4",
3
+ "version": "2.4.3-rc.7",
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.4",
900
- "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.4",
901
- "@elliemae/ds-controlled-form": "2.4.3-rc.4",
902
- "@elliemae/ds-form": "2.4.3-rc.4",
903
- "@elliemae/ds-form-layout-blocks": "2.4.3-rc.4",
904
- "@elliemae/ds-grid": "2.4.3-rc.4",
905
- "@elliemae/ds-icon": "2.4.3-rc.4",
906
- "@elliemae/ds-icons": "2.4.3-rc.4",
907
- "@elliemae/ds-pills": "2.4.3-rc.4",
908
- "@elliemae/ds-popperjs": "2.4.3-rc.4",
909
- "@elliemae/ds-props-helpers": "2.4.3-rc.4",
910
- "@elliemae/ds-system": "2.4.3-rc.4",
911
- "@elliemae/ds-tooltip": "2.4.3-rc.4",
912
- "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.4",
899
+ "@elliemae/ds-button": "2.4.3-rc.7",
900
+ "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.7",
901
+ "@elliemae/ds-controlled-form": "2.4.3-rc.7",
902
+ "@elliemae/ds-form": "2.4.3-rc.7",
903
+ "@elliemae/ds-form-layout-blocks": "2.4.3-rc.7",
904
+ "@elliemae/ds-grid": "2.4.3-rc.7",
905
+ "@elliemae/ds-icon": "2.4.3-rc.7",
906
+ "@elliemae/ds-icons": "2.4.3-rc.7",
907
+ "@elliemae/ds-pills": "2.4.3-rc.7",
908
+ "@elliemae/ds-popperjs": "2.4.3-rc.7",
909
+ "@elliemae/ds-props-helpers": "2.4.3-rc.7",
910
+ "@elliemae/ds-system": "2.4.3-rc.7",
911
+ "@elliemae/ds-tooltip": "2.4.3-rc.7",
912
+ "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.7",
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
@@ -36,7 +36,6 @@ export declare namespace DSComboboxT {
36
36
  onCreate?: (label: string) => void;
37
37
  onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;
38
38
  onCancel?: () => void;
39
- onBlur?: () => void;
40
39
  onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;
41
40
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;
42
41
  }