carbon-react 142.13.5 → 143.0.1

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

@@ -48,12 +48,13 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   virtualScrollOverscan,
   isOptional,
   required,
+  listWidth,
   ...props
 }, ref) => {
   const selectListId = useRef(guid());
   const containerRef = useRef(null);
   const listboxRef = useRef(null);
-  const filterTimer = useRef();
+  const filterTimer = useRef(undefined);
   const isMouseDownReported = useRef();
   const isControlled = useRef(value !== undefined);
   const isTimerCounting = useRef();
@@ -71,7 +72,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     id: inputId.current,
     label
   });
-  const focusTimer = useRef(null);
+  const focusTimer = useRef(undefined);
   const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
   if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
     deprecateUncontrolledWarnTriggered = true;
@@ -100,9 +101,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       if (!match) {
         return previousValue;
       }
-      if (onChange) {
-        onChange(createCustomEvent(match.props.value));
-      }
+      onChange?.(createCustomEvent(match.props.value));
       if (isControlled.current) {
         return previousValue;
       }
@@ -115,14 +114,14 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       const newVal = filterText.current + newCharacter;
       filterText.current = newVal;
       selectValueStartingWithText(newVal);
-      clearTimeout(filterTimer.current);
+      window.clearTimeout(filterTimer.current);
     } else {
       filterText.current = newCharacter;
       selectValueStartingWithText(newCharacter);
     }
     isTimerCounting.current = true;
-    clearTimeout(filterTimer.current);
-    filterTimer.current = setTimeout(() => {
+    window.clearTimeout(filterTimer.current);
+    filterTimer.current = window.setTimeout(() => {
       isTimerCounting.current = false;
       filterText.current = "";
     }, 500);
@@ -131,18 +130,12 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     const {
       key
     } = event;
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-    if (readOnly) {
-      return;
-    }
+    onKeyDown?.(event);
+    if (readOnly) return;
     if (key === " " || isNavigationKey(key)) {
       event.preventDefault();
       setOpenState(isAlreadyOpen => {
-        if (!isAlreadyOpen && onOpen) {
-          onOpen();
-        }
+        if (!isAlreadyOpen) onOpen?.();
         return true;
       });
     } else if (key.length === 1 && !event.metaKey && !event.ctrlKey) {
@@ -184,21 +177,18 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   }, [handleGlobalClick]);
   useEffect(() => {
     return function cleanup() {
-      clearTimeout(filterTimer.current);
+      window.clearTimeout(filterTimer.current);
+      window.clearTimeout(focusTimer.current);
     };
   }, []);
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
-    }
+    onClick?.(event);
     setOpenState(isAlreadyOpen => {
       if (isAlreadyOpen) {
         return false;
       }
-      if (onOpen) {
-        onOpen();
-      }
+      onOpen?.();
       return true;
     });
   }
@@ -212,9 +202,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     if (isMouseDownReported.current) {
       return;
     }
-    if (onBlur) {
-      onBlur(event);
-    }
+    onBlur?.(event);
   }
   function handleTextboxMouseDown() {
     isMouseDownReported.current = true;
@@ -223,28 +211,22 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     if (isClickTriggeredBySelect.current) {
       return;
     }
-    if (onFocus) {
-      onFocus(event);
-    }
+    onFocus?.(event);
     if (isMouseDownReported.current) {
       isMouseDownReported.current = false;
       return;
     }
     if (openOnFocus) {
-      if (focusTimer.current) {
-        clearTimeout(focusTimer.current);
-      }
+      window.clearTimeout(focusTimer.current);
 
       // we need to use a timeout here as there is a race condition when rendered in a modal
       // whereby the select list isn't visible when the select is auto focused straight away
-      focusTimer.current = setTimeout(() => {
+      focusTimer.current = window.setTimeout(() => {
         setOpenState(isAlreadyOpen => {
           if (isAlreadyOpen) {
             return true;
           }
-          if (onOpen) {
-            onOpen();
-          }
+          onOpen?.();
           return true;
         });
       });
@@ -255,9 +237,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       setSelectedValue(newValue);
       setTextValue(text);
     }
-    if (onChange) {
-      onChange(createCustomEvent(newValue, selectionConfirmed));
-    }
+    onChange?.(createCustomEvent(newValue, selectionConfirmed));
   }
   function onSelectOption(optionData) {
     const {
@@ -314,6 +294,17 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       ...filterOutStyledSystemSpacingProps(props)
     };
   }
+  let placement;
+  switch (listPlacement) {
+    case "top":
+      placement = "top-end";
+      break;
+    case "bottom":
+      placement = "bottom-end";
+      break;
+    default:
+      placement = listPlacement;
+  }
   const selectList = /*#__PURE__*/React.createElement(SelectList, {
     ref: listboxRef,
     id: selectListId.current,
@@ -328,11 +319,12 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     onListScrollBottom: onListScrollBottom,
     tableHeader: tableHeader,
     multiColumn: multiColumn,
-    listPlacement: listPlacement,
+    listPlacement: listWidth !== undefined ? placement : listPlacement,
     flipEnabled: flipEnabled,
     isOpen: isOpen,
     enableVirtualScroll: enableVirtualScroll,
-    virtualScrollOverscan: virtualScrollOverscan
+    virtualScrollOverscan: virtualScrollOverscan,
+    listWidth: listWidth
   }, children);
   const marginProps = useFormSpacing(props);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
@@ -486,7 +478,8 @@ if (process.env.NODE_ENV !== "production") {
     "leftChildren": PropTypes.node,
     "list": PropTypes.string,
     "listMaxHeight": PropTypes.number,
-    "listPlacement": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+    "listPlacement": PropTypes.oneOf(["bottom-end", "bottom-start", "bottom", "top-end", "top-start", "top"]),
+    "listWidth": PropTypes.number,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,
       "description": PropTypes.string,

package/lib/__internal__/validations/validation-icon.component.js

@@ -78,7 +78,8 @@ const ValidationIcon = ({
       setTriggeredByIcon(false);
       if (onBlur) onBlur(e);
     },
-    isPartOfInput: isPartOfInput
+    isPartOfInput: isPartOfInput,
+    "data-role": "validation-icon-wrapper"
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_icon.default, {
     "aria-describedby": validationTooltipId.current,
     key: `${validationType}-icon`,

package/lib/components/accordion/accordion-group/accordion-group.component.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 declare type AccordionGroupChild = React.ReactElement | boolean | null | undefined | AccordionGroupChildArray;
 interface AccordionGroupChildArray extends Array<AccordionGroupChild> {
 }
-export interface AccordionGroupProps extends MarginProps {
+export interface AccordionGroupProps extends MarginProps, Omit<TagProps, "data-component"> {
     /** An Accordion or list of Accordion components to be rendered inside the AccordionGroup */
     children?: AccordionGroupChild;
 }

package/lib/components/accordion/accordion-group/accordion-group.component.js

@@ -13,6 +13,7 @@ var _accordion2 = require("../accordion.style");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 // typescript-to-proptypes breaks on recursive type references so it has to be an interface
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
@@ -58,7 +59,9 @@ const AccordionGroup = ({
       focusAccordion(ev, refs.length - 1);
     }
   }, [focusAccordion, refs]);
-  return /*#__PURE__*/_react.default.createElement(_accordion2.StyledAccordionGroup, rest, filteredChildren.map((child, index) =>
+  return /*#__PURE__*/_react.default.createElement(_accordion2.StyledAccordionGroup, _extends({}, rest, {
+    "data-component": "accordion-group"
+  }), filteredChildren.map((child, index) =>
   /*#__PURE__*/
   // casted to ReactElement as there is no overload for an FunctionComponentElement in cloneElement
   _react.default.cloneElement(child, {

package/lib/components/advanced-color-picker/advanced-color-picker.component.js

@@ -129,7 +129,9 @@ const AdvancedColorPicker = ({
   }
   return /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerWrapper, _extends({
     m: "15px auto auto 15px"
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerCell, {
+  }, (0, _utils.filterStyledSystemMarginProps)(props), {
+    "data-role": "advanced-color-picker-wrapper"
+  }), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerCell, {
     "data-element": "color-picker-cell",
     "aria-label": l.advancedColorPicker.ariaLabel(),
     "aria-describedby": descriptionId.current,

package/lib/components/pages/page/page.component.js

@@ -44,6 +44,7 @@ const Page = ({
     hasContent: true
   }, title), /*#__PURE__*/_react.default.createElement(_page.StyledPageContent, _extends({
     "data-element": "carbon-page-content",
+    "data-role": "page-content",
     p: "34px 40px"
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_box.default, {
     boxSizing: "border-box",

package/lib/components/preview/preview.component.js

@@ -41,9 +41,13 @@ const Preview = ({
         disableAnimation: disableAnimation || reduceMotion
       }, props)));
     }
-    return /*#__PURE__*/_react.default.createElement(_preview.StyledPreview, marginProps, placeholders);
+    return /*#__PURE__*/_react.default.createElement(_preview.StyledPreview, _extends({
+      "data-role": "preview-wrapper"
+    }, marginProps), placeholders);
   }
-  return /*#__PURE__*/_react.default.createElement(_preview.StyledPreview, marginProps, children);
+  return /*#__PURE__*/_react.default.createElement(_preview.StyledPreview, _extends({
+    "data-role": "preview-wrapper"
+  }, marginProps), children);
 };
 exports.Preview = Preview;
 var _default = exports.default = Preview;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Side } from "@floating-ui/dom";
+export declare type ListPlacement = "top" | "bottom" | "top-start" | "bottom-start" | "top-end" | "bottom-end";
 export interface SelectListProps {
     /** The ID for the parent <div> */
     id?: string;
@@ -38,7 +38,7 @@ export interface SelectListProps {
     /** When true component will work in multi column mode, children should consist of OptionRow components in this mode */
     multiColumn?: boolean;
     /** Placement of the select list relative to the input element */
-    listPlacement?: Side;
+    listPlacement?: ListPlacement;
     /** Use the opposite list placement if the set placement does not fit */
     flipEnabled?: boolean;
     /** @private @ignore
@@ -56,6 +56,8 @@ export interface SelectListProps {
     virtualScrollOverscan?: number;
     /** @private @ignore A callback for when a mouseDown event occurs on the component */
     onMouseDown?: () => void;
+    /** Override the default width of the list element. Number passed is converted into pixel value */
+    listWidth?: number;
 }
 declare const SelectList: React.ForwardRefExoticComponent<SelectListProps & React.RefAttributes<HTMLDivElement>>;
 export default SelectList;

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

@@ -53,6 +53,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   multiselectValues,
   enableVirtualScroll,
   virtualScrollOverscan = 5,
+  listWidth,
   ...listProps
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = (0, _react.useState)(-1);
@@ -162,7 +163,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const childElementRefs = (0, _react.useRef)(Array.from({
     length: _react.default.Children.count(children)
   }));
-  const optionChildrenList = (0, _react.useMemo)(() => childrenList.filter(child => /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _option.default || child.type === _optionRow.default)), [childrenList]);
+  const optionChildrenList = (0, _react.useMemo)(() => childrenList.filter(child => {
+    return /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _option.default || child.type === _optionRow.default);
+  }), [childrenList]);
   const {
     measureElement
   } = virtualizer;
@@ -381,12 +384,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       elements
     }) {
       Object.assign(elements.floating.style, {
-        width: `${rects.reference.width}px`
+        width: `${listWidth ?? rects.reference.width}px`
       });
     }
   }), ...(flipEnabled ? [(0, _dom.flip)({
     fallbackStrategy: "initialPlacement"
-  })] : [])], [flipEnabled]);
+  })] : [])], [listWidth, flipEnabled]);
   const loader = isLoading ? /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
     key: "loader"
   }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : undefined;
@@ -467,7 +470,8 @@ if (process.env.NODE_ENV !== "production") {
     "labelId": _propTypes.default.string,
     "listActionButton": _propTypes.default.node,
     "listMaxHeight": _propTypes.default.number,
-    "listPlacement": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
+    "listPlacement": _propTypes.default.oneOf(["bottom-end", "bottom-start", "bottom", "top-end", "top-start", "top"]),
+    "listWidth": _propTypes.default.number,
     "multiColumn": _propTypes.default.bool,
     "multiselectValues": _propTypes.default.arrayOf(_propTypes.default.string),
     "onListAction": _propTypes.default.func,

package/lib/components/select/__internal__/utils/with-filter.hoc.js

@@ -115,7 +115,9 @@ const withFilter = WrappedComponent => {
               colSpan: colSpan
             }, noResultsMessage || noResultsText));
           }
-          return /*#__PURE__*/_react.default.createElement(_option.default, null, noResultsMessage || noResultsText);
+          return /*#__PURE__*/_react.default.createElement(_option.default, {
+            isInteractive: true
+          }, noResultsMessage || noResultsText);
         }
         return addHighlightedContent(filteredElements, filterText);
       }

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { Side } from "@floating-ui/dom";
 import { ButtonProps } from "../../button";
 import { FormInputPropTypes } from "../__internal__/select-textbox";
+import { ListPlacement } from "../__internal__/select-list/select-list.component";
 import { CustomSelectChangeEvent } from "../simple-select";
 export interface FilterableSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
@@ -49,7 +49,7 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     /** Maximum list height - defaults to 180 */
     listMaxHeight?: number;
     /** Placement of the select list in relation to the input element */
-    listPlacement?: Side;
+    listPlacement?: ListPlacement;
     /** Use the opposite list placement if the set placement does not fit */
     flipEnabled?: boolean;
     /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
@@ -68,6 +68,8 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     required?: boolean;
     /** Specify a callback triggered on change */
     onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
+    /** Override the default width of the list element. Number passed is converted into pixel value */
+    listWidth?: number;
 }
 export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default FilterableSelect;

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

@@ -63,6 +63,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   disableDefaultFiltering = false,
   isOptional,
   required,
+  listWidth,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -405,6 +406,17 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
   }
+  let placement;
+  switch (listPlacement) {
+    case "top":
+      placement = "top-end";
+      break;
+    case "bottom":
+      placement = "bottom-end";
+      break;
+    default:
+      placement = listPlacement;
+  }
   const selectListProps = {
     ref: listboxRef,
     id: selectListId.current,
@@ -423,11 +435,12 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     onListScrollBottom,
     tableHeader,
     multiColumn,
-    listPlacement,
+    listPlacement: listWidth !== undefined ? placement : listPlacement,
     flipEnabled,
     isOpen,
     enableVirtualScroll,
-    virtualScrollOverscan
+    virtualScrollOverscan,
+    listWidth
   };
   const selectList = disableDefaultFiltering ? /*#__PURE__*/_react.default.createElement(_selectList.default, selectListProps, children) : /*#__PURE__*/_react.default.createElement(FilterableSelectList, selectListProps, children);
   const marginProps = (0, _useFormSpacing.default)(textboxProps);
@@ -585,7 +598,8 @@ if (process.env.NODE_ENV !== "production") {
     "list": _propTypes.default.string,
     "listActionButton": _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.bool]),
     "listMaxHeight": _propTypes.default.number,
-    "listPlacement": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
+    "listPlacement": _propTypes.default.oneOf(["bottom-end", "bottom-start", "bottom", "top-end", "top-start", "top"]),
+    "listWidth": _propTypes.default.number,
     "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
       "__@toStringTag": _propTypes.default.string.isRequired,
       "description": _propTypes.default.string,

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Side } from "@floating-ui/dom";
 import { FormInputPropTypes } from "../__internal__/select-textbox";
+import { ListPlacement } from "../__internal__/select-list/select-list.component";
 import { CustomSelectChangeEvent } from "../simple-select";
 export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
@@ -44,7 +44,7 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
     /** Maximum list height - defaults to 180 */
     listMaxHeight?: number;
     /** Placement of the select list in relation to the input element */
-    listPlacement?: Side;
+    listPlacement?: ListPlacement;
     /** Use the opposite list placement if the set placement does not fit */
     flipEnabled?: boolean;
     /** Wraps the pill text when it would overflow the input width */
@@ -60,6 +60,8 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
     isOptional?: boolean;
     /** Specify a callback triggered on change */
     onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
+    /** Override the default width of the list element. Number passed is converted into pixel value */
+    listWidth?: number;
 }
 export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default MultiSelect;

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

@@ -64,6 +64,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   virtualScrollOverscan,
   isOptional,
   required,
+  listWidth,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -430,6 +431,17 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
   }
+  let placement;
+  switch (listPlacement) {
+    case "top":
+      placement = "top-end";
+      break;
+    case "bottom":
+      placement = "bottom-end";
+      break;
+    default:
+      placement = listPlacement;
+  }
   const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
@@ -444,13 +456,14 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     isLoading: isLoading,
     tableHeader: tableHeader,
     multiColumn: multiColumn,
-    listPlacement: listPlacement,
+    listPlacement: listWidth !== undefined ? placement : listPlacement,
     listMaxHeight: listMaxHeight,
     flipEnabled: flipEnabled,
     multiselectValues: actualValue,
     isOpen: isOpen,
     enableVirtualScroll: enableVirtualScroll,
-    virtualScrollOverscan: virtualScrollOverscan
+    virtualScrollOverscan: virtualScrollOverscan,
+    listWidth: listWidth
   }, children);
   const marginProps = (0, _useFormSpacing.default)(textboxProps);
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
@@ -610,7 +623,8 @@ if (process.env.NODE_ENV !== "production") {
     "leftChildren": _propTypes.default.node,
     "list": _propTypes.default.string,
     "listMaxHeight": _propTypes.default.number,
-    "listPlacement": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
+    "listPlacement": _propTypes.default.oneOf(["bottom-end", "bottom-start", "bottom", "top-end", "top-start", "top"]),
+    "listWidth": _propTypes.default.number,
     "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
       "__@toStringTag": _propTypes.default.string.isRequired,
       "description": _propTypes.default.string,

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

@@ -1,17 +1,17 @@
 import React from "react";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, TagProps {
+export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElement>, "value" | "onSelect" | "onClick">, Omit<TagProps, "data-component"> {
     /**
      * Unique identifier for the component.
      * Will use a randomly generated GUID if none is provided.
      */
     id?: string;
     /** The option's visible text, displayed within `<Textbox>` of `<Select>`, and used for filtering */
-    text: string;
-    /** Optional: alternative rendered content, displayed within `<SelectList>` of `<Select>` (eg: an icon, an image, etc) */
+    text?: string;
+    /** Alternative rendered content, displayed within `<SelectList>` of `<Select>` (eg: an icon, an image, etc) */
     children?: React.ReactNode;
-    /** The option's invisible internal value */
-    value: string | Record<string, unknown>;
+    /** The option's invisible internal value, if this is not passed the option will not be treated as interactive or selectable */
+    value?: string | Record<string, unknown>;
     /** MultiSelect only - custom Pill border color - provide any color from palette or any valid css color value. */
     borderColor?: string;
     /** MultiSelect only - fill Pill background with color */

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

@@ -29,11 +29,11 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
   const selectListContext = (0, _react.useContext)(_selectList.default);
   let isSelected = selectListContext.currentOptionsListIndex === index;
   const internalIdRef = (0, _react.useRef)(id || (0, _guid.default)());
-  if (selectListContext.multiselectValues) {
+  if (selectListContext.multiselectValues && value) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
   function handleClick() {
-    if (disabled) {
+    if (disabled || !value) {
       return;
     }
     if (!onClick) {
@@ -52,15 +52,16 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,
-    "data-component": "option",
     isDisabled: disabled,
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden,
-    style: style
+    style: style,
+    isInteractive: !!value
   }, rest, {
-    fill: undefined
+    fill: undefined,
+    "data-component": "option"
   }), children || text);
 });
 if (process.env.NODE_ENV !== "production") {
@@ -134,7 +135,6 @@ if (process.env.NODE_ENV !== "production") {
     "dangerouslySetInnerHTML": _propTypes.default.shape({
       "__html": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
     }),
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "datatype": _propTypes.default.string,
@@ -404,7 +404,7 @@ if (process.env.NODE_ENV !== "production") {
     "suppressContentEditableWarning": _propTypes.default.bool,
     "suppressHydrationWarning": _propTypes.default.bool,
     "tabIndex": _propTypes.default.number,
-    "text": _propTypes.default.string.isRequired,
+    "text": _propTypes.default.string,
     "title": _propTypes.default.string,
     "translate": _propTypes.default.oneOf(["no", "yes"]),
     "type": _propTypes.default.oneOfType([_propTypes.default.oneOf(["button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week"]), _propTypes.default.shape({
@@ -460,7 +460,7 @@ if (process.env.NODE_ENV !== "production") {
     })]),
     "typeof": _propTypes.default.string,
     "unselectable": _propTypes.default.oneOf(["off", "on"]),
-    "value": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired,
+    "value": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
     "vocab": _propTypes.default.string,
     "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   };

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

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

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

@@ -8,7 +8,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledOption = _styledComponents.default.li`
-  cursor: pointer;
   box-sizing: border-box;
   line-height: 16px;
   padding: 12px 16px;
@@ -20,19 +19,22 @@ const StyledOption = _styledComponents.default.li`
   width: 100%;
 
   ${({
+  isInteractive,
   isHighlighted
-}) => isHighlighted && (0, _styledComponents.css)`
-      background-color: var(--colorsUtilityMajor200);
+}) => isInteractive && (0, _styledComponents.css)`
+      cursor: pointer;
+      :hover {
+        background-color: var(--colorsUtilityMajor100);
+      }
+      ${isHighlighted && (0, _styledComponents.css)`
+        background-color: var(--colorsUtilityMajor200);
+      `}
     `}
 
   ${({
   hidden
 }) => hidden && "display: none;"}
 
-  :hover {
-    background-color: var(--colorsUtilityMajor100);
-  }
-
   ${({
   isDisabled
 }) => isDisabled && (0, _styledComponents.css)`