carbon-react 142.13.5 → 143.0.0

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);
@@ -372,12 +373,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 +459,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/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/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;

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);
@@ -381,12 +382,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 +468,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/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/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;

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

@@ -57,12 +57,13 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
   virtualScrollOverscan,
   isOptional,
   required,
+  listWidth,
   ...props
 }, ref) => {
   const selectListId = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)(null);
   const listboxRef = (0, _react.useRef)(null);
-  const filterTimer = (0, _react.useRef)();
+  const filterTimer = (0, _react.useRef)(undefined);
   const isMouseDownReported = (0, _react.useRef)();
   const isControlled = (0, _react.useRef)(value !== undefined);
   const isTimerCounting = (0, _react.useRef)();
@@ -80,7 +81,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     id: inputId.current,
     label
   });
-  const focusTimer = (0, _react.useRef)(null);
+  const focusTimer = (0, _react.useRef)(undefined);
   const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
   if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
     deprecateUncontrolledWarnTriggered = true;
@@ -109,9 +110,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
       if (!match) {
         return previousValue;
       }
-      if (onChange) {
-        onChange(createCustomEvent(match.props.value));
-      }
+      onChange?.(createCustomEvent(match.props.value));
       if (isControlled.current) {
         return previousValue;
       }
@@ -124,14 +123,14 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
       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);
@@ -140,18 +139,12 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     const {
       key
     } = event;
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-    if (readOnly) {
-      return;
-    }
+    onKeyDown?.(event);
+    if (readOnly) return;
     if (key === " " || (0, _isNavigationKey.default)(key)) {
       event.preventDefault();
       setOpenState(isAlreadyOpen => {
-        if (!isAlreadyOpen && onOpen) {
-          onOpen();
-        }
+        if (!isAlreadyOpen) onOpen?.();
         return true;
       });
     } else if (key.length === 1 && !event.metaKey && !event.ctrlKey) {
@@ -193,21 +186,18 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
   }, [handleGlobalClick]);
   (0, _react.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;
     });
   }
@@ -221,9 +211,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     if (isMouseDownReported.current) {
       return;
     }
-    if (onBlur) {
-      onBlur(event);
-    }
+    onBlur?.(event);
   }
   function handleTextboxMouseDown() {
     isMouseDownReported.current = true;
@@ -232,28 +220,22 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     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;
         });
       });
@@ -264,9 +246,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
       setSelectedValue(newValue);
       setTextValue(text);
     }
-    if (onChange) {
-      onChange(createCustomEvent(newValue, selectionConfirmed));
-    }
+    onChange?.(createCustomEvent(newValue, selectionConfirmed));
   }
   function onSelectOption(optionData) {
     const {
@@ -323,6 +303,17 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
       ...(0, _utils.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.default.createElement(_selectList.default, {
     ref: listboxRef,
     id: selectListId.current,
@@ -337,11 +328,12 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     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 = (0, _useFormSpacing.default)(props);
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
@@ -495,7 +487,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/package.json

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