carbon-react 127.1.0 → 128.0.0

package/esm/components/select/filterable-select/filterable-select.component.d.ts

@@ -17,8 +17,6 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     children: React.ReactNode;
     /** The default selected value(s), when the component is operating in uncontrolled mode */
     defaultValue?: string | Record<string, unknown>;
-    /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
-    disablePortal?: boolean;
     /** If true the loader animation is displayed in the option list */
     isLoading?: boolean;
     /** True for default text button or a Button Component to be rendered */

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -35,7 +35,6 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   onBlur,
   openOnFocus,
   noResultsMessage,
-  disablePortal,
   listActionButton,
   listMaxHeight,
   onListAction,
@@ -119,19 +118,22 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   }
   const updateValues = useCallback((newFilterText, isDeleteEvent) => {
     setSelectedValue(previousValue => {
-      const match = findElementWithMatchingText(newFilterText, children);
-      const isFilterCleared = isDeleteEvent && newFilterText === "";
+      const trimmed = newFilterText.trimStart();
+      const match = findElementWithMatchingText(trimmed, children);
+      const isFilterCleared = isDeleteEvent && !newFilterText.length;
       if (!match || isFilterCleared || match.props.disabled) {
         setTextValue(newFilterText);
         triggerChange("", false);
         return "";
       }
-      triggerChange(match.props.value, false);
+      if (trimmed.length) {
+        triggerChange(match.props.value, false);
+      }
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
-      if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
+      if (trimmed.length && match.props.text?.toLowerCase().startsWith(trimmed.toLowerCase())) {
         setTextValue(match.props.text);
       } else {
         setTextValue(newFilterText);
@@ -147,7 +149,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase())) {
+    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -255,10 +257,11 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     };
   }, [handleGlobalClick]);
   useEffect(() => {
-    const textStartsWithFilter = textValue?.toLowerCase().startsWith(filterText?.toLowerCase());
+    const trimmed = filterText?.trimStart();
+    const textStartsWithFilter = textValue?.toLowerCase().startsWith(trimmed.toLowerCase());
     const isTextboxActive = !disabled && !readOnly;
-    if (isTextboxActive && textboxRef && filterText?.length && textValue?.length > filterText?.length && textStartsWithFilter) {
-      textboxRef.selectionStart = filterText.length;
+    if (isTextboxActive && textboxRef && trimmed.length && textValue?.length > trimmed.length && textStartsWithFilter) {
+      textboxRef.selectionStart = trimmed.length;
     }
   }, [textValue, filterText, textboxRef, disabled, readOnly]);
   const onSelectOption = useCallback(optionData => {
@@ -405,10 +408,9 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     onSelect: onSelectOption,
     onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText,
+    filterText: filterText.trim(),
     highlightedValue,
     noResultsMessage,
-    disablePortal,
     listActionButton,
     listMaxHeight,
     onListAction: handleOnListAction,
@@ -423,9 +425,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     enableVirtualScroll,
     virtualScrollOverscan
   };
-  const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, _extends({}, selectListProps, {
-    filterText: filterText
-  }), children);
+  const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, selectListProps, children);
   const marginProps = useFormSpacing(textboxProps);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     hasTextCursor: true,
@@ -535,7 +535,6 @@ if (process.env.NODE_ENV !== "production") {
     "dir": PropTypes.string,
     "disabled": PropTypes.bool,
     "disableDefaultFiltering": PropTypes.bool,
-    "disablePortal": PropTypes.bool,
     "draggable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
     "enableVirtualScroll": PropTypes.bool,
     "enterKeyHint": PropTypes.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),

package/esm/components/select/multi-select/multi-select.component.d.ts

@@ -18,8 +18,6 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
     children: React.ReactNode;
     /** The default selected value(s), when the component is operating in uncontrolled mode */
     defaultValue?: string[] | Record<string, unknown>[];
-    /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
-    disablePortal?: boolean;
     /** If true the loader animation is displayed in the option list */
     isLoading?: boolean;
     /** When true component will work in multi column mode.

package/esm/components/select/multi-select/multi-select.component.js

@@ -40,7 +40,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   openOnFocus = false,
   noResultsMessage,
   placeholder,
-  disablePortal,
   isLoading,
   tableHeader,
   multiColumn,
@@ -417,10 +416,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText: filterText,
+    filterText: filterText.trim(),
     highlightedValue: highlightedValue,
     noResultsMessage: noResultsMessage,
-    disablePortal: disablePortal,
     isLoading: isLoading,
     tableHeader: tableHeader,
     multiColumn: multiColumn,
@@ -546,7 +544,6 @@ if (process.env.NODE_ENV !== "production") {
     "deferTimeout": PropTypes.number,
     "dir": PropTypes.string,
     "disabled": PropTypes.bool,
-    "disablePortal": PropTypes.bool,
     "draggable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
     "enableVirtualScroll": PropTypes.bool,
     "enterKeyHint": PropTypes.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),

package/esm/components/select/select-list/select-list.component.d.ts

@@ -7,8 +7,6 @@ export interface SelectListProps {
     labelId?: string;
     /** Child components (such as <Option>) */
     children?: React.ReactNode;
-    /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
-    disablePortal?: boolean;
     /** DOM element to position the dropdown menu list relative to */
     anchorElement?: HTMLElement;
     /** A callback for when a child is selected */

package/esm/components/select/select-list/select-list.component.js

@@ -33,7 +33,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   filterText,
   anchorElement,
   highlightedValue,
-  disablePortal,
   onListAction,
   isLoading,
   onListScrollBottom,
@@ -395,7 +394,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }
   }, /*#__PURE__*/React.createElement(Popover, {
     placement: listPlacement,
-    disablePortal: disablePortal,
+    disablePortal: true,
     reference: anchorRef,
     middleware: popoverMiddleware,
     isOpen: isOpen,
@@ -432,7 +431,6 @@ if (process.env.NODE_ENV !== "production") {
       }
     },
     "children": PropTypes.node,
-    "disablePortal": PropTypes.bool,
     "enableVirtualScroll": PropTypes.bool,
     "filterText": PropTypes.string,
     "flipEnabled": PropTypes.bool,

package/esm/components/select/simple-select/simple-select.component.d.ts

@@ -26,8 +26,6 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     children: React.ReactNode;
     /** The default selected value(s), when the component is operating in uncontrolled mode */
     defaultValue?: string | Record<string, unknown>;
-    /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
-    disablePortal?: boolean;
     /** If true the loader animation is displayed in the option list */
     isLoading?: boolean;
     /** When true component will work in multi column mode.

package/esm/components/select/simple-select/simple-select.component.js

@@ -34,7 +34,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   onFocus,
   onKeyDown,
   onBlur,
-  disablePortal = false,
   isLoading,
   listMaxHeight,
   onListScrollBottom,
@@ -329,7 +328,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     onMouseDown: handleListMouseDown,
     onSelectListClose: onSelectListClose,
     highlightedValue: selectedValue,
-    disablePortal: disablePortal,
     listMaxHeight: listMaxHeight,
     isLoading: isLoading,
     onListScrollBottom: onListScrollBottom,
@@ -448,7 +446,6 @@ if (process.env.NODE_ENV !== "production") {
     "deferTimeout": PropTypes.number,
     "dir": PropTypes.string,
     "disabled": PropTypes.bool,
-    "disablePortal": PropTypes.bool,
     "draggable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
     "enableVirtualScroll": PropTypes.bool,
     "enterKeyHint": PropTypes.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),

package/lib/components/select/filterable-select/filterable-select.component.d.ts

@@ -17,8 +17,6 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     children: React.ReactNode;
     /** The default selected value(s), when the component is operating in uncontrolled mode */
     defaultValue?: string | Record<string, unknown>;
-    /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
-    disablePortal?: boolean;
     /** If true the loader animation is displayed in the option list */
     isLoading?: boolean;
     /** True for default text button or a Button Component to be rendered */

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -44,7 +44,6 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   onBlur,
   openOnFocus,
   noResultsMessage,
-  disablePortal,
   listActionButton,
   listMaxHeight,
   onListAction,
@@ -128,19 +127,22 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   }
   const updateValues = (0, _react.useCallback)((newFilterText, isDeleteEvent) => {
     setSelectedValue(previousValue => {
-      const match = findElementWithMatchingText(newFilterText, children);
-      const isFilterCleared = isDeleteEvent && newFilterText === "";
+      const trimmed = newFilterText.trimStart();
+      const match = findElementWithMatchingText(trimmed, children);
+      const isFilterCleared = isDeleteEvent && !newFilterText.length;
       if (!match || isFilterCleared || match.props.disabled) {
         setTextValue(newFilterText);
         triggerChange("", false);
         return "";
       }
-      triggerChange(match.props.value, false);
+      if (trimmed.length) {
+        triggerChange(match.props.value, false);
+      }
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
-      if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
+      if (trimmed.length && match.props.text?.toLowerCase().startsWith(trimmed.toLowerCase())) {
         setTextValue(match.props.text);
       } else {
         setTextValue(newFilterText);
@@ -156,7 +158,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase())) {
+    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -264,10 +266,11 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     };
   }, [handleGlobalClick]);
   (0, _react.useEffect)(() => {
-    const textStartsWithFilter = textValue?.toLowerCase().startsWith(filterText?.toLowerCase());
+    const trimmed = filterText?.trimStart();
+    const textStartsWithFilter = textValue?.toLowerCase().startsWith(trimmed.toLowerCase());
     const isTextboxActive = !disabled && !readOnly;
-    if (isTextboxActive && textboxRef && filterText?.length && textValue?.length > filterText?.length && textStartsWithFilter) {
-      textboxRef.selectionStart = filterText.length;
+    if (isTextboxActive && textboxRef && trimmed.length && textValue?.length > trimmed.length && textStartsWithFilter) {
+      textboxRef.selectionStart = trimmed.length;
     }
   }, [textValue, filterText, textboxRef, disabled, readOnly]);
   const onSelectOption = (0, _react.useCallback)(optionData => {
@@ -414,10 +417,9 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     onSelect: onSelectOption,
     onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText,
+    filterText: filterText.trim(),
     highlightedValue,
     noResultsMessage,
-    disablePortal,
     listActionButton,
     listMaxHeight,
     onListAction: handleOnListAction,
@@ -432,9 +434,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     enableVirtualScroll,
     virtualScrollOverscan
   };
-  const selectList = disableDefaultFiltering ? /*#__PURE__*/_react.default.createElement(_selectList.default, selectListProps, children) : /*#__PURE__*/_react.default.createElement(FilterableSelectList, _extends({}, selectListProps, {
-    filterText: filterText
-  }), children);
+  const selectList = disableDefaultFiltering ? /*#__PURE__*/_react.default.createElement(_selectList.default, selectListProps, children) : /*#__PURE__*/_react.default.createElement(FilterableSelectList, selectListProps, children);
   const marginProps = (0, _useFormSpacing.default)(textboxProps);
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
     hasTextCursor: true,
@@ -544,7 +544,6 @@ if (process.env.NODE_ENV !== "production") {
     "dir": _propTypes.default.string,
     "disabled": _propTypes.default.bool,
     "disableDefaultFiltering": _propTypes.default.bool,
-    "disablePortal": _propTypes.default.bool,
     "draggable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "enableVirtualScroll": _propTypes.default.bool,
     "enterKeyHint": _propTypes.default.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),

package/lib/components/select/multi-select/multi-select.component.d.ts

@@ -18,8 +18,6 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
     children: React.ReactNode;
     /** The default selected value(s), when the component is operating in uncontrolled mode */
     defaultValue?: string[] | Record<string, unknown>[];
-    /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
-    disablePortal?: boolean;
     /** If true the loader animation is displayed in the option list */
     isLoading?: boolean;
     /** When true component will work in multi column mode.

package/lib/components/select/multi-select/multi-select.component.js

@@ -49,7 +49,6 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   openOnFocus = false,
   noResultsMessage,
   placeholder,
-  disablePortal,
   isLoading,
   tableHeader,
   multiColumn,
@@ -426,10 +425,9 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText: filterText,
+    filterText: filterText.trim(),
     highlightedValue: highlightedValue,
     noResultsMessage: noResultsMessage,
-    disablePortal: disablePortal,
     isLoading: isLoading,
     tableHeader: tableHeader,
     multiColumn: multiColumn,
@@ -555,7 +553,6 @@ if (process.env.NODE_ENV !== "production") {
     "deferTimeout": _propTypes.default.number,
     "dir": _propTypes.default.string,
     "disabled": _propTypes.default.bool,
-    "disablePortal": _propTypes.default.bool,
     "draggable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "enableVirtualScroll": _propTypes.default.bool,
     "enterKeyHint": _propTypes.default.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),

package/lib/components/select/select-list/select-list.component.d.ts

@@ -7,8 +7,6 @@ export interface SelectListProps {
     labelId?: string;
     /** Child components (such as <Option>) */
     children?: React.ReactNode;
-    /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
-    disablePortal?: boolean;
     /** DOM element to position the dropdown menu list relative to */
     anchorElement?: HTMLElement;
     /** A callback for when a child is selected */

package/lib/components/select/select-list/select-list.component.js

@@ -42,7 +42,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   filterText,
   anchorElement,
   highlightedValue,
-  disablePortal,
   onListAction,
   isLoading,
   onListScrollBottom,
@@ -404,7 +403,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: listPlacement,
-    disablePortal: disablePortal,
+    disablePortal: true,
     reference: anchorRef,
     middleware: popoverMiddleware,
     isOpen: isOpen,
@@ -441,7 +440,6 @@ if (process.env.NODE_ENV !== "production") {
       }
     },
     "children": _propTypes.default.node,
-    "disablePortal": _propTypes.default.bool,
     "enableVirtualScroll": _propTypes.default.bool,
     "filterText": _propTypes.default.string,
     "flipEnabled": _propTypes.default.bool,

package/lib/components/select/simple-select/simple-select.component.d.ts

@@ -26,8 +26,6 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     children: React.ReactNode;
     /** The default selected value(s), when the component is operating in uncontrolled mode */
     defaultValue?: string | Record<string, unknown>;
-    /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
-    disablePortal?: boolean;
     /** If true the loader animation is displayed in the option list */
     isLoading?: boolean;
     /** When true component will work in multi column mode.

package/lib/components/select/simple-select/simple-select.component.js

@@ -43,7 +43,6 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
   onFocus,
   onKeyDown,
   onBlur,
-  disablePortal = false,
   isLoading,
   listMaxHeight,
   onListScrollBottom,
@@ -338,7 +337,6 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     onMouseDown: handleListMouseDown,
     onSelectListClose: onSelectListClose,
     highlightedValue: selectedValue,
-    disablePortal: disablePortal,
     listMaxHeight: listMaxHeight,
     isLoading: isLoading,
     onListScrollBottom: onListScrollBottom,
@@ -457,7 +455,6 @@ if (process.env.NODE_ENV !== "production") {
     "deferTimeout": _propTypes.default.number,
     "dir": _propTypes.default.string,
     "disabled": _propTypes.default.bool,
-    "disablePortal": _propTypes.default.bool,
     "draggable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "enableVirtualScroll": _propTypes.default.bool,
     "enterKeyHint": _propTypes.default.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "127.1.0",
+  "version": "128.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",