carbon-react 142.13.5 → 143.0.1

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

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

package/esm/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/esm/components/accordion/accordion-group/accordion-group.component.js

@@ -1,3 +1,4 @@
+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); }
 import React, { useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -50,7 +51,9 @@ export const AccordionGroup = ({
       focusAccordion(ev, refs.length - 1);
     }
   }, [focusAccordion, refs]);
-  return /*#__PURE__*/React.createElement(StyledAccordionGroup, rest, filteredChildren.map((child, index) =>
+  return /*#__PURE__*/React.createElement(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.cloneElement(child, {

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

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

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

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

package/esm/components/preview/preview.component.js

@@ -34,8 +34,12 @@ export const Preview = ({
         disableAnimation: disableAnimation || reduceMotion
       }, props)));
     }
-    return /*#__PURE__*/React.createElement(StyledPreview, marginProps, placeholders);
+    return /*#__PURE__*/React.createElement(StyledPreview, _extends({
+      "data-role": "preview-wrapper"
+    }, marginProps), placeholders);
   }
-  return /*#__PURE__*/React.createElement(StyledPreview, marginProps, children);
+  return /*#__PURE__*/React.createElement(StyledPreview, _extends({
+    "data-role": "preview-wrapper"
+  }, marginProps), children);
 };
 export default Preview;

package/esm/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/esm/components/select/__internal__/select-list/select-list.component.js

@@ -44,6 +44,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   multiselectValues,
   enableVirtualScroll,
   virtualScrollOverscan = 5,
+  listWidth,
   ...listProps
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
@@ -153,7 +154,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   const childElementRefs = useRef(Array.from({
     length: React.Children.count(children)
   }));
-  const optionChildrenList = useMemo(() => childrenList.filter(child => /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow)), [childrenList]);
+  const optionChildrenList = useMemo(() => childrenList.filter(child => {
+    return /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow);
+  }), [childrenList]);
   const {
     measureElement
   } = virtualizer;
@@ -372,12 +375,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       elements
     }) {
       Object.assign(elements.floating.style, {
-        width: `${rects.reference.width}px`
+        width: `${listWidth ?? rects.reference.width}px`
       });
     }
   }), ...(flipEnabled ? [flip({
     fallbackStrategy: "initialPlacement"
-  })] : [])], [flipEnabled]);
+  })] : [])], [listWidth, flipEnabled]);
   const loader = isLoading ? /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
     key: "loader"
   }, /*#__PURE__*/React.createElement(Loader, null)) : undefined;
@@ -458,7 +461,8 @@ if (process.env.NODE_ENV !== "production") {
     "labelId": PropTypes.string,
     "listActionButton": PropTypes.node,
     "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,
     "multiColumn": PropTypes.bool,
     "multiselectValues": PropTypes.arrayOf(PropTypes.string),
     "onListAction": PropTypes.func,

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

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

package/esm/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/esm/components/select/filterable-select/filterable-select.component.js

@@ -54,6 +54,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   disableDefaultFiltering = false,
   isOptional,
   required,
+  listWidth,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -396,6 +397,17 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       ...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,
@@ -414,11 +426,12 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     onListScrollBottom,
     tableHeader,
     multiColumn,
-    listPlacement,
+    listPlacement: listWidth !== undefined ? placement : listPlacement,
     flipEnabled,
     isOpen,
     enableVirtualScroll,
-    virtualScrollOverscan
+    virtualScrollOverscan,
+    listWidth
   };
   const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, selectListProps, children);
   const marginProps = useFormSpacing(textboxProps);
@@ -576,7 +589,8 @@ if (process.env.NODE_ENV !== "production") {
     "list": PropTypes.string,
     "listActionButton": PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
     "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/esm/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/esm/components/select/multi-select/multi-select.component.js

@@ -55,6 +55,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   virtualScrollOverscan,
   isOptional,
   required,
+  listWidth,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -421,6 +422,17 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       ...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.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
@@ -435,13 +447,14 @@ const MultiSelect = /*#__PURE__*/React.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 = useFormSpacing(textboxProps);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
@@ -601,7 +614,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/esm/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/esm/components/select/option/option.component.js

@@ -20,11 +20,11 @@ const Option = /*#__PURE__*/React.forwardRef(({
   const selectListContext = useContext(SelectListContext);
   let isSelected = selectListContext.currentOptionsListIndex === index;
   const internalIdRef = useRef(id || guid());
-  if (selectListContext.multiselectValues) {
+  if (selectListContext.multiselectValues && value) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
   function handleClick() {
-    if (disabled) {
+    if (disabled || !value) {
       return;
     }
     if (!onClick) {
@@ -43,15 +43,16 @@ const Option = /*#__PURE__*/React.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") {
@@ -125,7 +126,6 @@ if (process.env.NODE_ENV !== "production") {
     "dangerouslySetInnerHTML": PropTypes.shape({
       "__html": PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired
     }),
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "datatype": PropTypes.string,
@@ -395,7 +395,7 @@ if (process.env.NODE_ENV !== "production") {
     "suppressContentEditableWarning": PropTypes.bool,
     "suppressHydrationWarning": PropTypes.bool,
     "tabIndex": PropTypes.number,
-    "text": PropTypes.string.isRequired,
+    "text": PropTypes.string,
     "title": PropTypes.string,
     "translate": PropTypes.oneOf(["no", "yes"]),
     "type": PropTypes.oneOfType([PropTypes.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.shape({
@@ -451,7 +451,7 @@ if (process.env.NODE_ENV !== "production") {
     })]),
     "typeof": PropTypes.string,
     "unselectable": PropTypes.oneOf(["off", "on"]),
-    "value": PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+    "value": PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     "vocab": PropTypes.string,
     "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   };

package/esm/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/esm/components/select/option/option.style.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 const StyledOption = styled.li`
-  cursor: pointer;
   box-sizing: border-box;
   line-height: 16px;
   padding: 12px 16px;
@@ -12,19 +11,22 @@ const StyledOption = styled.li`
   width: 100%;
 
   ${({
+  isInteractive,
   isHighlighted
-}) => isHighlighted && css`
-      background-color: var(--colorsUtilityMajor200);
+}) => isInteractive && css`
+      cursor: pointer;
+      :hover {
+        background-color: var(--colorsUtilityMajor100);
+      }
+      ${isHighlighted && css`
+        background-color: var(--colorsUtilityMajor200);
+      `}
     `}
 
   ${({
   hidden
 }) => hidden && "display: none;"}
 
-  :hover {
-    background-color: var(--colorsUtilityMajor100);
-  }
-
   ${({
   isDisabled
 }) => isDisabled && css`

package/esm/components/select/option-group-header/option-group-header.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { CSSProperties } from "styled-components";
 import { TagProps } from "__internal__/utils/helpers/tags";
 import { IconProps } from "../../icon";
-export interface OptionGroupHeaderProps extends TagProps {
+export interface OptionGroupHeaderProps extends Omit<TagProps, "data-component"> {
     /**
      * Unique identifier for the component.
      * Will use a randomly generated GUID if none is provided.

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -21,7 +21,8 @@ const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
     style: style,
     id: internalIdRef.current
   }, rest, {
-    ref: ref
+    ref: ref,
+    "data-component": "option-group-header"
   }), children || /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
     type: icon
   }), /*#__PURE__*/React.createElement("h4", null, label)));
@@ -29,7 +30,6 @@ const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
 if (process.env.NODE_ENV !== "production") {
   OptionGroupHeader.propTypes = {
     "children": PropTypes.node,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "icon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bill_unpaid", "bin", "biometric", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "export", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "import", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "maintenance", "marker", "message", "messages", "microphone", "minimise", "minus_large", "minus", "mobile", "money_bag", "new", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "pin", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "success", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { CSSProperties } from "styled-components";
 import { TagProps } from "__internal__/utils/helpers/tags";
-export interface OptionRowProps extends TagProps {
+export interface OptionRowProps extends Omit<TagProps, "data-component"> {
     /** The option's visible text, displayed within <Textbox> of <Select> */
     text: string;
     /** Row content, should consist of multiple td elements */

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

@@ -37,19 +37,19 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
     ref: ref,
     "aria-selected": isSelected,
     "aria-disabled": disabled,
-    "data-component": "option-row",
     isDisabled: disabled,
     onClick: handleClick,
     isHighlighted: selectListContext.currentOptionsListIndex === index,
     role: "option",
     hidden: hidden,
     style: style
-  }, rest), children);
+  }, rest, {
+    "data-component": "option-row"
+  }), children);
 });
 if (process.env.NODE_ENV !== "production") {
   OptionRow.propTypes = {
     "children": PropTypes.node,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "disabled": PropTypes.bool,

package/esm/components/select/simple-select/simple-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";
 export interface OptionData {
     text?: string;
     value?: string | Record<string, unknown>;
@@ -51,7 +51,7 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     /** 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
@@ -67,6 +67,8 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     isRequired?: 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 SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default SimpleSelect;