carbon-react 127.1.0 → 127.1.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 (5) hide show
  1. package/esm/components/select/filterable-select/filterable-select.component.js +14 -12
  2. package/esm/components/select/multi-select/multi-select.component.js +1 -1
  3. package/lib/components/select/filterable-select/filterable-select.component.js +14 -12
  4. package/lib/components/select/multi-select/multi-select.component.js +1 -1
  5. package/package.json +1 -1
package/esm/components/select/filterable-select/filterable-select.component.js CHANGED
@@ -119,19 +119,22 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
119
119
  }
120
120
  const updateValues = useCallback((newFilterText, isDeleteEvent) => {
121
121
  setSelectedValue(previousValue => {
122
- const match = findElementWithMatchingText(newFilterText, children);
123
- const isFilterCleared = isDeleteEvent && newFilterText === "";
122
+ const trimmed = newFilterText.trimStart();
123
+ const match = findElementWithMatchingText(trimmed, children);
124
+ const isFilterCleared = isDeleteEvent && !newFilterText.length;
124
125
  if (!match || isFilterCleared || match.props.disabled) {
125
126
  setTextValue(newFilterText);
126
127
  triggerChange("", false);
127
128
  return "";
128
129
  }
129
- triggerChange(match.props.value, false);
130
+ if (trimmed.length) {
131
+ triggerChange(match.props.value, false);
132
+ }
130
133
  if (isDeleteEvent) {
131
134
  setTextValue(newFilterText);
132
135
  return match.props.value;
133
136
  }
134
- if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
137
+ if (trimmed.length && match.props.text?.toLowerCase().startsWith(trimmed.toLowerCase())) {
135
138
  setTextValue(match.props.text);
136
139
  } else {
137
140
  setTextValue(newFilterText);
@@ -147,7 +150,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
147
150
  const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, newValue));
148
151
  if (!matchingOption || matchingOption.props.text === undefined) {
149
152
  setTextValue(filterText || "");
150
- } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase())) {
153
+ } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
151
154
  setTextValue(matchingOption.props.text);
152
155
  }
153
156
  }, [children, filterText]);
@@ -255,10 +258,11 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
255
258
  };
256
259
  }, [handleGlobalClick]);
257
260
  useEffect(() => {
258
- const textStartsWithFilter = textValue?.toLowerCase().startsWith(filterText?.toLowerCase());
261
+ const trimmed = filterText?.trimStart();
262
+ const textStartsWithFilter = textValue?.toLowerCase().startsWith(trimmed.toLowerCase());
259
263
  const isTextboxActive = !disabled && !readOnly;
260
- if (isTextboxActive && textboxRef && filterText?.length && textValue?.length > filterText?.length && textStartsWithFilter) {
261
- textboxRef.selectionStart = filterText.length;
264
+ if (isTextboxActive && textboxRef && trimmed.length && textValue?.length > trimmed.length && textStartsWithFilter) {
265
+ textboxRef.selectionStart = trimmed.length;
262
266
  }
263
267
  }, [textValue, filterText, textboxRef, disabled, readOnly]);
264
268
  const onSelectOption = useCallback(optionData => {
@@ -405,7 +409,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
405
409
  onSelect: onSelectOption,
406
410
  onSelectListClose,
407
411
  onMouseDown: handleListMouseDown,
408
- filterText,
412
+ filterText: filterText.trim(),
409
413
  highlightedValue,
410
414
  noResultsMessage,
411
415
  disablePortal,
@@ -423,9 +427,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
423
427
  enableVirtualScroll,
424
428
  virtualScrollOverscan
425
429
  };
426
- const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, _extends({}, selectListProps, {
427
- filterText: filterText
428
- }), children);
430
+ const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, selectListProps, children);
429
431
  const marginProps = useFormSpacing(textboxProps);
430
432
  return /*#__PURE__*/React.createElement(StyledSelect, _extends({
431
433
  hasTextCursor: true,
package/esm/components/select/multi-select/multi-select.component.js CHANGED
@@ -417,7 +417,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
417
417
  onSelect: onSelectOption,
418
418
  onSelectListClose: onSelectListClose,
419
419
  onMouseDown: handleListMouseDown,
420
- filterText: filterText,
420
+ filterText: filterText.trim(),
421
421
  highlightedValue: highlightedValue,
422
422
  noResultsMessage: noResultsMessage,
423
423
  disablePortal: disablePortal,
package/lib/components/select/filterable-select/filterable-select.component.js CHANGED
@@ -128,19 +128,22 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
128
128
  }
129
129
  const updateValues = (0, _react.useCallback)((newFilterText, isDeleteEvent) => {
130
130
  setSelectedValue(previousValue => {
131
- const match = findElementWithMatchingText(newFilterText, children);
132
- const isFilterCleared = isDeleteEvent && newFilterText === "";
131
+ const trimmed = newFilterText.trimStart();
132
+ const match = findElementWithMatchingText(trimmed, children);
133
+ const isFilterCleared = isDeleteEvent && !newFilterText.length;
133
134
  if (!match || isFilterCleared || match.props.disabled) {
134
135
  setTextValue(newFilterText);
135
136
  triggerChange("", false);
136
137
  return "";
137
138
  }
138
- triggerChange(match.props.value, false);
139
+ if (trimmed.length) {
140
+ triggerChange(match.props.value, false);
141
+ }
139
142
  if (isDeleteEvent) {
140
143
  setTextValue(newFilterText);
141
144
  return match.props.value;
142
145
  }
143
- if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
146
+ if (trimmed.length && match.props.text?.toLowerCase().startsWith(trimmed.toLowerCase())) {
144
147
  setTextValue(match.props.text);
145
148
  } else {
146
149
  setTextValue(newFilterText);
@@ -156,7 +159,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
156
159
  const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, newValue));
157
160
  if (!matchingOption || matchingOption.props.text === undefined) {
158
161
  setTextValue(filterText || "");
159
- } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase())) {
162
+ } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
160
163
  setTextValue(matchingOption.props.text);
161
164
  }
162
165
  }, [children, filterText]);
@@ -264,10 +267,11 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
264
267
  };
265
268
  }, [handleGlobalClick]);
266
269
  (0, _react.useEffect)(() => {
267
- const textStartsWithFilter = textValue?.toLowerCase().startsWith(filterText?.toLowerCase());
270
+ const trimmed = filterText?.trimStart();
271
+ const textStartsWithFilter = textValue?.toLowerCase().startsWith(trimmed.toLowerCase());
268
272
  const isTextboxActive = !disabled && !readOnly;
269
- if (isTextboxActive && textboxRef && filterText?.length && textValue?.length > filterText?.length && textStartsWithFilter) {
270
- textboxRef.selectionStart = filterText.length;
273
+ if (isTextboxActive && textboxRef && trimmed.length && textValue?.length > trimmed.length && textStartsWithFilter) {
274
+ textboxRef.selectionStart = trimmed.length;
271
275
  }
272
276
  }, [textValue, filterText, textboxRef, disabled, readOnly]);
273
277
  const onSelectOption = (0, _react.useCallback)(optionData => {
@@ -414,7 +418,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
414
418
  onSelect: onSelectOption,
415
419
  onSelectListClose,
416
420
  onMouseDown: handleListMouseDown,
417
- filterText,
421
+ filterText: filterText.trim(),
418
422
  highlightedValue,
419
423
  noResultsMessage,
420
424
  disablePortal,
@@ -432,9 +436,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
432
436
  enableVirtualScroll,
433
437
  virtualScrollOverscan
434
438
  };
435
- const selectList = disableDefaultFiltering ? /*#__PURE__*/_react.default.createElement(_selectList.default, selectListProps, children) : /*#__PURE__*/_react.default.createElement(FilterableSelectList, _extends({}, selectListProps, {
436
- filterText: filterText
437
- }), children);
439
+ const selectList = disableDefaultFiltering ? /*#__PURE__*/_react.default.createElement(_selectList.default, selectListProps, children) : /*#__PURE__*/_react.default.createElement(FilterableSelectList, selectListProps, children);
438
440
  const marginProps = (0, _useFormSpacing.default)(textboxProps);
439
441
  return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
440
442
  hasTextCursor: true,
package/lib/components/select/multi-select/multi-select.component.js CHANGED
@@ -426,7 +426,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
426
426
  onSelect: onSelectOption,
427
427
  onSelectListClose: onSelectListClose,
428
428
  onMouseDown: handleListMouseDown,
429
- filterText: filterText,
429
+ filterText: filterText.trim(),
430
430
  highlightedValue: highlightedValue,
431
431
  noResultsMessage: noResultsMessage,
432
432
  disablePortal: disablePortal,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "127.1.0",
3
+ "version": "127.1.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",