carbon-react 125.2.2 → 125.4.0

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

@@ -60,6 +60,9 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
      * Higher values make for smoother scrolling but may impact performance.
      * Only used if the `enableVirtualScroll` prop is set. */
     virtualScrollOverscan?: number;
+    /** Boolean to disable automatic filtering and highlighting of options.
+     * This allows custom filtering and option styling to be performed outside of the component when the filter text changes. */
+    disableDefaultFiltering?: boolean;
 }
 export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<unknown>>;
 export default FilterableSelect;

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

@@ -54,6 +54,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   inputRef,
   enableVirtualScroll,
   virtualScrollOverscan,
+  disableDefaultFiltering = false,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -120,7 +121,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     setSelectedValue(previousValue => {
       const match = findElementWithMatchingText(newFilterText, children);
       const isFilterCleared = isDeleteEvent && newFilterText === "";
-      if (!match || isFilterCleared) {
+      if (!match || isFilterCleared || match.props.disabled) {
         setTextValue(newFilterText);
         triggerChange("", false);
         return "";
@@ -396,32 +397,35 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
   }
-  const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
+  const selectListProps = {
     ref: listboxRef,
     id: selectListId.current,
-    labelId: labelId,
+    labelId,
     anchorElement: textboxRef?.parentElement || undefined,
     onSelect: onSelectOption,
-    onSelectListClose: onSelectListClose,
+    onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText: filterText,
-    highlightedValue: highlightedValue,
-    noResultsMessage: noResultsMessage,
-    disablePortal: disablePortal,
-    listActionButton: listActionButton,
-    listMaxHeight: listMaxHeight,
+    filterText,
+    highlightedValue,
+    noResultsMessage,
+    disablePortal,
+    listActionButton,
+    listMaxHeight,
     onListAction: handleOnListAction,
-    isLoading: isLoading,
-    onListScrollBottom: onListScrollBottom,
-    tableHeader: tableHeader,
-    multiColumn: multiColumn,
+    isLoading,
+    onListScrollBottom,
+    tableHeader,
+    multiColumn,
     loaderDataRole: "filterable-select-list-loader",
-    listPlacement: listPlacement,
-    flipEnabled: flipEnabled,
-    isOpen: isOpen,
-    enableVirtualScroll: enableVirtualScroll,
-    virtualScrollOverscan: virtualScrollOverscan
-  }, children);
+    listPlacement,
+    flipEnabled,
+    isOpen,
+    enableVirtualScroll,
+    virtualScrollOverscan
+  };
+  const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, _extends({}, selectListProps, {
+    filterText: filterText
+  }), children);
   const marginProps = useFormSpacing(textboxProps);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     hasTextCursor: true,
@@ -529,6 +533,7 @@ FilterableSelect.propTypes = {
   "deferTimeout": PropTypes.number,
   "dir": PropTypes.string,
   "disabled": PropTypes.bool,
+  "disableDefaultFiltering": PropTypes.bool,
   "disablePortal": PropTypes.bool,
   "draggable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
   "enableVirtualScroll": PropTypes.bool,

package/esm/components/select/option/option.component.d.ts

@@ -16,6 +16,8 @@ export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElemen
     borderColor?: string;
     /** MultiSelect only - fill Pill background with color */
     fill?: boolean;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
     /**
      * @private
      * @ignore

package/esm/components/select/option/option.component.js

@@ -6,6 +6,7 @@ import SelectListContext from "../__internal__/select-list-context";
 const Option = /*#__PURE__*/React.forwardRef(({
   text,
   children,
+  disabled,
   onSelect,
   value,
   id,
@@ -21,6 +22,9 @@ const Option = /*#__PURE__*/React.forwardRef(({
     isSelected = selectListContext.multiselectValues.includes(value);
   }
   function handleClick() {
+    if (disabled) {
+      return;
+    }
     if (!onClick) {
       onSelect?.({
         text,
@@ -36,7 +40,9 @@ const Option = /*#__PURE__*/React.forwardRef(({
     id: id,
     ref: ref,
     "aria-selected": isSelected,
+    "aria-disabled": disabled,
     "data-component": "option",
+    isDisabled: disabled,
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",

package/esm/components/select/option/option.style.d.ts

@@ -1,6 +1,7 @@
 import { OptionProps } from ".";
 interface StyledOptionProps extends Pick<OptionProps, "id"> {
     isHighlighted?: boolean;
+    isDisabled?: boolean;
 }
 declare const StyledOption: import("styled-components").StyledComponent<"li", any, StyledOptionProps, never>;
 export default StyledOption;

package/esm/components/select/option/option.style.js

@@ -24,5 +24,15 @@ const StyledOption = styled.li`
   :hover {
     background-color: var(--colorsUtilityMajor100);
   }
+
+  ${({
+  isDisabled
+}) => isDisabled && css`
+      color: var(--colorsUtilityYin030);
+      cursor: not-allowed;
+      :hover {
+        background-color: var(--colorsUtilityYang100);
+      }
+    `}
 `;
 export default StyledOption;

package/esm/components/select/option-row/option-row.component.d.ts

@@ -13,6 +13,8 @@ export interface OptionRowProps extends TagProps {
      * Will use a randomly generated GUID if none is provided.
      */
     id?: string;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
     /**
      * @private
      * @ignore

package/esm/components/select/option-row/option-row.component.js

@@ -7,6 +7,7 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
   id,
   text,
   children,
+  disabled,
   onSelect,
   value,
   index,
@@ -15,6 +16,9 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const handleClick = () => {
+    if (disabled) {
+      return;
+    }
     onSelect?.({
       id,
       text,
@@ -30,7 +34,9 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
     id: id,
     ref: ref,
     "aria-selected": isSelected,
+    "aria-disabled": disabled,
     "data-component": "option-row",
+    isDisabled: disabled,
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
@@ -43,6 +49,7 @@ OptionRow.propTypes = {
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
+  "disabled": PropTypes.bool,
   "hidden": PropTypes.bool,
   "id": PropTypes.string,
   "index": PropTypes.number,

package/esm/components/select/option-row/option-row.style.d.ts

@@ -1,6 +1,7 @@
 import { OptionRowProps } from ".";
 interface StyledOptionRowProps extends Pick<OptionRowProps, "hidden"> {
     isHighlighted?: boolean;
+    isDisabled?: boolean;
 }
 declare const StyledOptionRow: import("styled-components").StyledComponent<"tr", any, StyledOptionRowProps, never>;
 export default StyledOptionRow;

package/esm/components/select/option-row/option-row.style.js

@@ -28,5 +28,15 @@ const StyledOptionRow = styled.tr`
       font-weight: 700;
     }
   }
+
+  ${({
+  isDisabled
+}) => isDisabled && css`
+      color: var(--colorsUtilityYin030);
+      cursor: not-allowed;
+      :hover {
+        background-color: var(--colorsUtilityYang100);
+      }
+    `}
 `;
 export default StyledOptionRow;

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

@@ -189,7 +189,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }
     let nextIndex = getNextIndexByKey(key, indexOfHighlighted, lastIndex, isLoading);
     const nextElement = childrenList[nextIndex];
-    if ( /*#__PURE__*/React.isValidElement(nextElement) && nextElement.type !== Option && nextElement.type !== OptionRow) {
+    if ( /*#__PURE__*/React.isValidElement(nextElement) && nextElement.type !== Option && nextElement.type !== OptionRow || nextElement.props.disabled) {
       nextIndex = getNextHighlightableItemIndex(key, nextIndex);
     }
     return nextIndex;
@@ -254,6 +254,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
         onSelectListClose();
         return;
       }
+      if (currentOption.props.disabled) {
+        return;
+      }
       const {
         text,
         value

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

@@ -60,6 +60,9 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
      * Higher values make for smoother scrolling but may impact performance.
      * Only used if the `enableVirtualScroll` prop is set. */
     virtualScrollOverscan?: number;
+    /** Boolean to disable automatic filtering and highlighting of options.
+     * This allows custom filtering and option styling to be performed outside of the component when the filter text changes. */
+    disableDefaultFiltering?: boolean;
 }
 export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<unknown>>;
 export default FilterableSelect;

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

@@ -63,6 +63,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   inputRef,
   enableVirtualScroll,
   virtualScrollOverscan,
+  disableDefaultFiltering = false,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -129,7 +130,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     setSelectedValue(previousValue => {
       const match = findElementWithMatchingText(newFilterText, children);
       const isFilterCleared = isDeleteEvent && newFilterText === "";
-      if (!match || isFilterCleared) {
+      if (!match || isFilterCleared || match.props.disabled) {
         setTextValue(newFilterText);
         triggerChange("", false);
         return "";
@@ -405,32 +406,35 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
   }
-  const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
+  const selectListProps = {
     ref: listboxRef,
     id: selectListId.current,
-    labelId: labelId,
+    labelId,
     anchorElement: textboxRef?.parentElement || undefined,
     onSelect: onSelectOption,
-    onSelectListClose: onSelectListClose,
+    onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText: filterText,
-    highlightedValue: highlightedValue,
-    noResultsMessage: noResultsMessage,
-    disablePortal: disablePortal,
-    listActionButton: listActionButton,
-    listMaxHeight: listMaxHeight,
+    filterText,
+    highlightedValue,
+    noResultsMessage,
+    disablePortal,
+    listActionButton,
+    listMaxHeight,
     onListAction: handleOnListAction,
-    isLoading: isLoading,
-    onListScrollBottom: onListScrollBottom,
-    tableHeader: tableHeader,
-    multiColumn: multiColumn,
+    isLoading,
+    onListScrollBottom,
+    tableHeader,
+    multiColumn,
     loaderDataRole: "filterable-select-list-loader",
-    listPlacement: listPlacement,
-    flipEnabled: flipEnabled,
-    isOpen: isOpen,
-    enableVirtualScroll: enableVirtualScroll,
-    virtualScrollOverscan: virtualScrollOverscan
-  }, children);
+    listPlacement,
+    flipEnabled,
+    isOpen,
+    enableVirtualScroll,
+    virtualScrollOverscan
+  };
+  const selectList = disableDefaultFiltering ? /*#__PURE__*/_react.default.createElement(_selectList.default, selectListProps, children) : /*#__PURE__*/_react.default.createElement(FilterableSelectList, _extends({}, selectListProps, {
+    filterText: filterText
+  }), children);
   const marginProps = (0, _useFormSpacing.default)(textboxProps);
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
     hasTextCursor: true,
@@ -538,6 +542,7 @@ FilterableSelect.propTypes = {
   "deferTimeout": _propTypes.default.number,
   "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,

package/lib/components/select/option/option.component.d.ts

@@ -16,6 +16,8 @@ export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElemen
     borderColor?: string;
     /** MultiSelect only - fill Pill background with color */
     fill?: boolean;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
     /**
      * @private
      * @ignore

package/lib/components/select/option/option.component.js

@@ -15,6 +15,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const Option = /*#__PURE__*/_react.default.forwardRef(({
   text,
   children,
+  disabled,
   onSelect,
   value,
   id,
@@ -30,6 +31,9 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
     isSelected = selectListContext.multiselectValues.includes(value);
   }
   function handleClick() {
+    if (disabled) {
+      return;
+    }
     if (!onClick) {
       onSelect?.({
         text,
@@ -45,7 +49,9 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
     id: id,
     ref: ref,
     "aria-selected": isSelected,
+    "aria-disabled": disabled,
     "data-component": "option",
+    isDisabled: disabled,
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",

package/lib/components/select/option/option.style.d.ts

@@ -1,6 +1,7 @@
 import { OptionProps } from ".";
 interface StyledOptionProps extends Pick<OptionProps, "id"> {
     isHighlighted?: boolean;
+    isDisabled?: boolean;
 }
 declare const StyledOption: import("styled-components").StyledComponent<"li", any, StyledOptionProps, never>;
 export default StyledOption;

package/lib/components/select/option/option.style.js

@@ -32,5 +32,15 @@ const StyledOption = _styledComponents.default.li`
   :hover {
     background-color: var(--colorsUtilityMajor100);
   }
+
+  ${({
+  isDisabled
+}) => isDisabled && (0, _styledComponents.css)`
+      color: var(--colorsUtilityYin030);
+      cursor: not-allowed;
+      :hover {
+        background-color: var(--colorsUtilityYang100);
+      }
+    `}
 `;
 var _default = exports.default = StyledOption;

package/lib/components/select/option-row/option-row.component.d.ts

@@ -13,6 +13,8 @@ export interface OptionRowProps extends TagProps {
      * Will use a randomly generated GUID if none is provided.
      */
     id?: string;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
     /**
      * @private
      * @ignore

package/lib/components/select/option-row/option-row.component.js

@@ -16,6 +16,7 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
   id,
   text,
   children,
+  disabled,
   onSelect,
   value,
   index,
@@ -24,6 +25,9 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const handleClick = () => {
+    if (disabled) {
+      return;
+    }
     onSelect?.({
       id,
       text,
@@ -39,7 +43,9 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
     id: id,
     ref: ref,
     "aria-selected": isSelected,
+    "aria-disabled": disabled,
     "data-component": "option-row",
+    isDisabled: disabled,
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
@@ -52,6 +58,7 @@ OptionRow.propTypes = {
   "data-component": _propTypes.default.string,
   "data-element": _propTypes.default.string,
   "data-role": _propTypes.default.string,
+  "disabled": _propTypes.default.bool,
   "hidden": _propTypes.default.bool,
   "id": _propTypes.default.string,
   "index": _propTypes.default.number,

package/lib/components/select/option-row/option-row.style.d.ts

@@ -1,6 +1,7 @@
 import { OptionRowProps } from ".";
 interface StyledOptionRowProps extends Pick<OptionRowProps, "hidden"> {
     isHighlighted?: boolean;
+    isDisabled?: boolean;
 }
 declare const StyledOptionRow: import("styled-components").StyledComponent<"tr", any, StyledOptionRowProps, never>;
 export default StyledOptionRow;

package/lib/components/select/option-row/option-row.style.js

@@ -36,5 +36,15 @@ const StyledOptionRow = _styledComponents.default.tr`
       font-weight: 700;
     }
   }
+
+  ${({
+  isDisabled
+}) => isDisabled && (0, _styledComponents.css)`
+      color: var(--colorsUtilityYin030);
+      cursor: not-allowed;
+      :hover {
+        background-color: var(--colorsUtilityYang100);
+      }
+    `}
 `;
 var _default = exports.default = StyledOptionRow;

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

@@ -198,7 +198,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
     let nextIndex = (0, _getNextIndexByKey.default)(key, indexOfHighlighted, lastIndex, isLoading);
     const nextElement = childrenList[nextIndex];
-    if ( /*#__PURE__*/_react.default.isValidElement(nextElement) && nextElement.type !== _option.default && nextElement.type !== _optionRow.default) {
+    if ( /*#__PURE__*/_react.default.isValidElement(nextElement) && nextElement.type !== _option.default && nextElement.type !== _optionRow.default || nextElement.props.disabled) {
       nextIndex = getNextHighlightableItemIndex(key, nextIndex);
     }
     return nextIndex;
@@ -263,6 +263,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
         onSelectListClose();
         return;
       }
+      if (currentOption.props.disabled) {
+        return;
+      }
       const {
         text,
         value

package/package.json

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