carbon-react 142.8.1 → 142.9.1

package/esm/__internal__/character-count/character-count.component.js

@@ -19,11 +19,13 @@ const CharacterCount = ({
   const getFormatNumber = (rawValue, locale) => new Intl.NumberFormat(locale).format(rawValue);
   return /*#__PURE__*/React.createElement(StyledCharacterCountWrapper, null, /*#__PURE__*/React.createElement(VisuallyHiddenHint, {
     "data-element": "visually-hidden-hint",
+    "data-role": "visually-hidden-hint",
     id: visuallyHiddenHintId
   }, l.characterCount.visuallyHiddenHint(getFormatNumber(limit, l.locale()))), /*#__PURE__*/React.createElement(StyledCharacterCount, {
     "aria-hidden": "true",
     isOverLimit: isOverLimit,
-    "data-element": "character-count"
+    "data-element": "character-count",
+    "data-role": "character-count"
   }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale()))), /*#__PURE__*/React.createElement(VisuallyHiddenCharacterCount, {
     "data-element": "visually-hidden-character-count",
     "data-role": "visually-hidden-character-count",

package/esm/__internal__/label/label.style.js

@@ -21,7 +21,6 @@ const StyledLabel = styled.label`
       color: var(--colorsUtilityYin030);
     `}
 `;
-const DEFAULT_CONTAINER_WIDTH = 30;
 export const StyledLabelContainer = styled.div`
   display: flex;
   align-items: center;
@@ -43,7 +42,7 @@ export const StyledLabelContainer = styled.div`
         padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
-      width: ${width || DEFAULT_CONTAINER_WIDTH}%;
+      width: ${width}%;
     `}
 
   ${({

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -106,6 +106,7 @@ export const DialogFullScreen = ({
   }), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledContent, {
     hasHeader: title !== undefined,
     "data-element": "content",
+    "data-role": "dialog-full-screen-content",
     ref: contentRef,
     disableContentPadding: disableContentPadding
   }, children))));

package/esm/components/duelling-picklist/duelling-picklist.component.js

@@ -40,7 +40,8 @@ export const DuellingPicklist = ({
   });
   return /*#__PURE__*/React.createElement(StyledDuellingPicklistOverlay, _extends({
     disabled: disabled,
-    "data-component": "duelling-picklist"
+    "data-component": "duelling-picklist",
+    "data-role": "duelling-picklist-overlay"
   }, filterStyledSystemMarginProps(rest)), shouldDisplayLabels && /*#__PURE__*/React.createElement(StyledLabelContainer, null, /*#__PURE__*/React.createElement(StyledLabel, {
     "data-element": "picklist-left-label"
   }, leftLabel), /*#__PURE__*/React.createElement(StyledLabel, {
@@ -48,7 +49,7 @@ export const DuellingPicklist = ({
   }, rightLabel)), shouldDisplayControls && /*#__PURE__*/React.createElement(StyledControlsContainer, null, /*#__PURE__*/React.createElement(StyledControl, {
     "data-element": "picklist-left-control"
   }, leftControls), /*#__PURE__*/React.createElement(StyledControl, {
-    "data-element": "picklist-right-label"
+    "data-element": "picklist-right-control"
   }, rightControls)), /*#__PURE__*/React.createElement(FocusContext.Provider, {
     value: {
       setElementToFocus: addElementToFocus,

package/esm/components/duelling-picklist/picklist/picklist.component.js

@@ -57,6 +57,7 @@ export const Picklist = ({
   }, [elementToFocus, index, refs, setElementToFocus]);
   return /*#__PURE__*/React.createElement(StyledPicklist, {
     "data-element": "picklist",
+    "data-role": "picklist",
     scrollVariant: "light",
     onKeyDown: handleKeyDown
   }, isEmpty && /*#__PURE__*/React.createElement(StyledEmptyContainer, null, placeholder), /*#__PURE__*/React.createElement(TransitionGroup, {

package/esm/components/duelling-picklist/picklist-group/picklist-group.component.js

@@ -71,6 +71,7 @@ const PicklistGroup = /*#__PURE__*/React.forwardRef(({
     onKeyDown: handleKeydown,
     "data-element": "picklist-group"
   }, title, /*#__PURE__*/React.createElement(StyledGroupButton, {
+    "data-role": "picklist-group-button",
     buttonType: "secondary",
     destructive: type === "remove",
     iconType: type,

package/esm/components/duelling-picklist/picklist-item/picklist-item.component.js

@@ -75,6 +75,7 @@ const PicklistItem = /*#__PURE__*/React.forwardRef(({
     locked: locked,
     ref: picklistItemNodeRef
   }, children, !locked && /*#__PURE__*/React.createElement(StyledButton, {
+    "data-role": "picklist-item-button",
     buttonType: "primary",
     destructive: type === "remove",
     iconType: type,

package/esm/components/form/__internal__/form-summary.component.js

@@ -18,7 +18,8 @@ export const Summary = ({
   if (messages[`${type}Count`]) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMessagePrefix, null, message?.[0]), /*#__PURE__*/React.createElement(StyledInternalSummary, {
       type: type,
-      "data-element": `${type}s`
+      "data-element": `${type}s`,
+      "data-role": "internal-summary"
     }, /*#__PURE__*/React.createElement(Icon, {
       type: type
     }), /*#__PURE__*/React.createElement("span", null, message?.[1])));
@@ -32,6 +33,7 @@ const FormSummary = ({
   return /*#__PURE__*/React.createElement(StyledFormSummary, {
     showSummary: !!(props.errorCount || props.warningCount),
     "data-element": "form-summary",
+    "data-role": "form-summary",
     fullWidth: fullWidth
   }, /*#__PURE__*/React.createElement(Summary, _extends({
     type: "error"

package/esm/components/form/form.component.js

@@ -47,6 +47,7 @@ export const Form = ({
     isInModal: isInModal
   }, rest), /*#__PURE__*/React.createElement(StyledFormContent, {
     "data-element": "form-content",
+    "data-role": "form-content",
     className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     isInModal: isInModal
@@ -54,20 +55,24 @@ export const Form = ({
     marginBottom: formSpacing[fieldSpacing]
   }, children)), !fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
+    "data-role": "form-footer",
     className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
     isInModal: isInModal
   }, footerPadding), leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
+    "data-role": "form-left-buttons",
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/React.createElement(FormSummary, {
     errorCount: errorCount,
     warningCount: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
+    "data-role": "form-right-buttons",
     buttonAlignment: buttonAlignment
   }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
+    "data-role": "form-footer",
     className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,

package/esm/components/inline-inputs/inline-inputs.component.d.ts

@@ -16,7 +16,7 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     labelAlign?: "left" | "right";
     /**
      * Custom label id, could be used in combination with aria-labelledby prop of each input,
-     * to make them accesible for screen readers.
+     * to make them accessible for screen readers.
      */
     labelId?: string;
     /** Flag to configure component as mandatory. */

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -57,6 +57,7 @@ const InlineInputs = ({
   return /*#__PURE__*/React.createElement(StyledInlineInputs, _extends({
     gutter: gutter,
     "data-component": "inline-inputs",
+    "data-role": "inline-inputs",
     className: className,
     labelWidth: labelWidth,
     labelInline: inlineLabel,
@@ -64,6 +65,7 @@ const InlineInputs = ({
   }, marginProps), renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
+    "data-role": "inline-inputs-container",
     inputWidth: inputWidth
   }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
     marginBottom: undefined

package/esm/components/pager/__internal__/pager-navigation.component.js

@@ -88,6 +88,7 @@ const PagerNavigation = ({
     onKeyUp: ev => Events.isEnterKey(ev) ? handlePageInputChange(ev) : false
   }), /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.ofY(pageCount))) : /*#__PURE__*/React.createElement(StyledPagerNavLabel, {
     "data-element": "current-page-label",
+    "data-role": "current-page-label",
     id: currentPageId,
     "aria-live": "polite"
   }, navLabelString)), !hasOnePage && renderButtonsAfterCount());

package/esm/components/pager/pager.component.js

@@ -125,6 +125,7 @@ export const Pager = ({
   const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
   return /*#__PURE__*/React.createElement(StyledPagerContainer, _extends({
     "data-component": "pager",
+    "data-role": "pager",
     variant: variant
   }, rest), /*#__PURE__*/React.createElement(StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/React.createElement(PagerNavigation, {
     pageSize: currentPageSize,

package/esm/components/tile/flex-tile-container/flex-tile-container.component.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { BoxProps } from "../../box";
-export interface FlexTileContainerProps extends Pick<BoxProps, "columnGap"> {
+export interface FlexTileContainerProps extends Pick<BoxProps, "columnGap" | "overflow"> {
     /** The child elements of FlexTileContainer need to be FlexTileCell components. */
     children: React.ReactNode;
 }
-export declare const FlexTileContainer: ({ children, columnGap, }: FlexTileContainerProps) => JSX.Element;
+export declare const FlexTileContainer: ({ children, columnGap, overflow, }: FlexTileContainerProps) => JSX.Element;
 export default FlexTileContainer;

package/esm/components/tile/flex-tile-container/flex-tile-container.component.js

@@ -3,7 +3,8 @@ import PropTypes from "prop-types";
 import Box from "../../box";
 const FlexTileContainer = ({
   children,
-  columnGap = 2
+  columnGap = 2,
+  overflow = "hidden"
 }) => {
   if (!children) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
@@ -16,7 +17,7 @@ const FlexTileContainer = ({
     flexWrap: "wrap",
     columnGap: columnGap,
     justifyContent: "flex-start",
-    overflow: "hidden",
+    overflow: overflow,
     width: "100%",
     "data-component": "flex-tile-container"
   }, children);
@@ -24,7 +25,108 @@ const FlexTileContainer = ({
 if (process.env.NODE_ENV !== "production") {
   FlexTileContainer.propTypes = {
     "children": PropTypes.node,
-    "columnGap": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    "columnGap": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    "overflow": PropTypes.oneOfType([PropTypes.oneOf(["-moz-hidden-unscrollable", "-moz-initial", "auto", "clip", "hidden", "inherit", "initial", "revert-layer", "revert", "scroll", "unset", "visible"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-hidden-unscrollable", "-moz-initial", "auto", "clip", "hidden", "inherit", "initial", "revert-layer", "revert", "scroll", "unset", "visible", null]), PropTypes.shape({
+      "__@iterator": PropTypes.func.isRequired,
+      "anchor": PropTypes.func.isRequired,
+      "at": PropTypes.func.isRequired,
+      "big": PropTypes.func.isRequired,
+      "blink": PropTypes.func.isRequired,
+      "bold": PropTypes.func.isRequired,
+      "charAt": PropTypes.func.isRequired,
+      "charCodeAt": PropTypes.func.isRequired,
+      "codePointAt": PropTypes.func.isRequired,
+      "concat": PropTypes.func.isRequired,
+      "endsWith": PropTypes.func.isRequired,
+      "fixed": PropTypes.func.isRequired,
+      "fontcolor": PropTypes.func.isRequired,
+      "fontsize": PropTypes.func.isRequired,
+      "includes": PropTypes.func.isRequired,
+      "indexOf": PropTypes.func.isRequired,
+      "italics": PropTypes.func.isRequired,
+      "lastIndexOf": PropTypes.func.isRequired,
+      "length": PropTypes.number.isRequired,
+      "link": PropTypes.func.isRequired,
+      "localeCompare": PropTypes.func.isRequired,
+      "match": PropTypes.func.isRequired,
+      "matchAll": PropTypes.func.isRequired,
+      "normalize": PropTypes.func.isRequired,
+      "padEnd": PropTypes.func.isRequired,
+      "padStart": PropTypes.func.isRequired,
+      "repeat": PropTypes.func.isRequired,
+      "replace": PropTypes.func.isRequired,
+      "search": PropTypes.func.isRequired,
+      "slice": PropTypes.func.isRequired,
+      "small": PropTypes.func.isRequired,
+      "split": PropTypes.func.isRequired,
+      "startsWith": PropTypes.func.isRequired,
+      "strike": PropTypes.func.isRequired,
+      "sub": PropTypes.func.isRequired,
+      "substr": PropTypes.func.isRequired,
+      "substring": PropTypes.func.isRequired,
+      "sup": PropTypes.func.isRequired,
+      "toLocaleLowerCase": PropTypes.func.isRequired,
+      "toLocaleUpperCase": PropTypes.func.isRequired,
+      "toLowerCase": PropTypes.func.isRequired,
+      "toString": PropTypes.func.isRequired,
+      "toUpperCase": PropTypes.func.isRequired,
+      "trim": PropTypes.func.isRequired,
+      "trimEnd": PropTypes.func.isRequired,
+      "trimLeft": PropTypes.func.isRequired,
+      "trimRight": PropTypes.func.isRequired,
+      "trimStart": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    })])), PropTypes.object, PropTypes.shape({
+      "__@iterator": PropTypes.func.isRequired,
+      "anchor": PropTypes.func.isRequired,
+      "at": PropTypes.func.isRequired,
+      "big": PropTypes.func.isRequired,
+      "blink": PropTypes.func.isRequired,
+      "bold": PropTypes.func.isRequired,
+      "charAt": PropTypes.func.isRequired,
+      "charCodeAt": PropTypes.func.isRequired,
+      "codePointAt": PropTypes.func.isRequired,
+      "concat": PropTypes.func.isRequired,
+      "endsWith": PropTypes.func.isRequired,
+      "fixed": PropTypes.func.isRequired,
+      "fontcolor": PropTypes.func.isRequired,
+      "fontsize": PropTypes.func.isRequired,
+      "includes": PropTypes.func.isRequired,
+      "indexOf": PropTypes.func.isRequired,
+      "italics": PropTypes.func.isRequired,
+      "lastIndexOf": PropTypes.func.isRequired,
+      "length": PropTypes.number.isRequired,
+      "link": PropTypes.func.isRequired,
+      "localeCompare": PropTypes.func.isRequired,
+      "match": PropTypes.func.isRequired,
+      "matchAll": PropTypes.func.isRequired,
+      "normalize": PropTypes.func.isRequired,
+      "padEnd": PropTypes.func.isRequired,
+      "padStart": PropTypes.func.isRequired,
+      "repeat": PropTypes.func.isRequired,
+      "replace": PropTypes.func.isRequired,
+      "search": PropTypes.func.isRequired,
+      "slice": PropTypes.func.isRequired,
+      "small": PropTypes.func.isRequired,
+      "split": PropTypes.func.isRequired,
+      "startsWith": PropTypes.func.isRequired,
+      "strike": PropTypes.func.isRequired,
+      "sub": PropTypes.func.isRequired,
+      "substr": PropTypes.func.isRequired,
+      "substring": PropTypes.func.isRequired,
+      "sup": PropTypes.func.isRequired,
+      "toLocaleLowerCase": PropTypes.func.isRequired,
+      "toLocaleUpperCase": PropTypes.func.isRequired,
+      "toLowerCase": PropTypes.func.isRequired,
+      "toString": PropTypes.func.isRequired,
+      "toUpperCase": PropTypes.func.isRequired,
+      "trim": PropTypes.func.isRequired,
+      "trimEnd": PropTypes.func.isRequired,
+      "trimLeft": PropTypes.func.isRequired,
+      "trimRight": PropTypes.func.isRequired,
+      "trimStart": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    })])
   };
 }
 export { FlexTileContainer };

package/esm/components/tile-select/__internal__/accordion/accordion.component.js

@@ -19,10 +19,12 @@ const Accordion = ({
   return /*#__PURE__*/React.createElement(StyledContentContainer, {
     "aria-expanded": expanded,
     isExpanded: expanded,
-    maxHeight: contentHeight
+    maxHeight: contentHeight,
+    "data-role": "tile-select-accordion-content-container"
   }, /*#__PURE__*/React.createElement(StyledContent, {
     role: "region",
     "data-element": "tile-select-accordion-content",
+    "data-role": "tile-select-accordion-content",
     ref: contentRef,
     id: contentId,
     "aria-labelledby": controlId

package/esm/components/tile-select/tile-select-group/tile-select-group.component.js

@@ -24,7 +24,8 @@ export const TileSelectGroup = ({
       name: name,
       onBlur: onBlur,
       onChange: onChange,
-      value: value
+      value: value,
+      "data-role": "tile-select-group-radio-button-mapper"
     }, React.Children.map(children, child => {
       if ( /*#__PURE__*/React.isValidElement(child)) {
         return /*#__PURE__*/React.cloneElement(child, {

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

@@ -50,6 +50,7 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
     }
   });
   const renderActionButton = () => /*#__PURE__*/React.createElement(StyledDeselectWrapper, {
+    "data-role": "deselect-wrapper",
     hasActionAdornment: !!actionButtonAdornment
   }, customActionButton && customActionButton(handleDeselect), !customActionButton && checked && /*#__PURE__*/React.createElement(Button, {
     buttonType: "tertiary",
@@ -70,6 +71,7 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
     className: className,
     disabled: disabled
   }, tagComponent("tile-select", rest), filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledFocusWrapper, {
+    "data-role": "focus-wrapper",
     hasFocus: hasFocus,
     checked: checked
   }, /*#__PURE__*/React.createElement(StyledTileSelectInput, _extends({
@@ -104,13 +106,18 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
   }, title), subtitle && /*#__PURE__*/React.createElement(StyledSubtitle, {
     as: checkPropTypeIsNode(subtitle) ? "div" : undefined
   }, subtitle), titleAdornment && /*#__PURE__*/React.createElement(StyledAdornment, {
-    hasAdditionalInformation: !!additionalInformation
+    hasAdditionalInformation: !!additionalInformation,
+    "data-role": "title-adornment"
   }, titleAdornment && /*#__PURE__*/React.createElement("div", null, titleAdornment))), additionalInformation && /*#__PURE__*/React.createElement("div", null, additionalInformation), /*#__PURE__*/React.createElement(StyledDescription, {
     as: checkPropTypeIsNode(description) ? "div" : undefined
-  }, description), footer && /*#__PURE__*/React.createElement(StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/React.createElement(StyledAccordionFooterWrapper, {
-    accordionExpanded: accordionExpanded
+  }, description), footer && /*#__PURE__*/React.createElement(StyledFooterWrapper, {
+    "data-role": "tile-select-footer"
+  }, footer), accordionContent && accordionControl && /*#__PURE__*/React.createElement(StyledAccordionFooterWrapper, {
+    accordionExpanded: accordionExpanded,
+    "data-role": "accordion-footer"
   }, accordionControl(controlId, contentId))), prefixAdornment && /*#__PURE__*/React.createElement(Box, {
     "data-element": "prefix-adornment",
+    "data-role": "prefix-adornment",
     mr: 3,
     opacity: disabled ? "0.3" : undefined
   }, prefixAdornment))), accordionContent && /*#__PURE__*/React.createElement(Accordion, {

package/lib/__internal__/character-count/character-count.component.js

@@ -26,11 +26,13 @@ const CharacterCount = ({
   const getFormatNumber = (rawValue, locale) => new Intl.NumberFormat(locale).format(rawValue);
   return /*#__PURE__*/_react.default.createElement(_characterCount.StyledCharacterCountWrapper, null, /*#__PURE__*/_react.default.createElement(_characterCount.VisuallyHiddenHint, {
     "data-element": "visually-hidden-hint",
+    "data-role": "visually-hidden-hint",
     id: visuallyHiddenHintId
   }, l.characterCount.visuallyHiddenHint(getFormatNumber(limit, l.locale()))), /*#__PURE__*/_react.default.createElement(_characterCount.StyledCharacterCount, {
     "aria-hidden": "true",
     isOverLimit: isOverLimit,
-    "data-element": "character-count"
+    "data-element": "character-count",
+    "data-role": "character-count"
   }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale()))), /*#__PURE__*/_react.default.createElement(_characterCount.VisuallyHiddenCharacterCount, {
     "data-element": "visually-hidden-character-count",
     "data-role": "visually-hidden-character-count",

package/lib/__internal__/label/label.style.js

@@ -29,7 +29,6 @@ const StyledLabel = _styledComponents.default.label`
       color: var(--colorsUtilityYin030);
     `}
 `;
-const DEFAULT_CONTAINER_WIDTH = 30;
 const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.default.div`
   display: flex;
   align-items: center;
@@ -51,7 +50,7 @@ const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.de
         padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
-      width: ${width || DEFAULT_CONTAINER_WIDTH}%;
+      width: ${width}%;
     `}
 
   ${({

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -115,6 +115,7 @@ const DialogFullScreen = ({
   }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_content.default, {
     hasHeader: title !== undefined,
     "data-element": "content",
+    "data-role": "dialog-full-screen-content",
     ref: contentRef,
     disableContentPadding: disableContentPadding
   }, children))));

package/lib/components/duelling-picklist/duelling-picklist.component.js

@@ -49,7 +49,8 @@ const DuellingPicklist = ({
   });
   return /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledDuellingPicklistOverlay, _extends({
     disabled: disabled,
-    "data-component": "duelling-picklist"
+    "data-component": "duelling-picklist",
+    "data-role": "duelling-picklist-overlay"
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), shouldDisplayLabels && /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledLabelContainer, null, /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledLabel, {
     "data-element": "picklist-left-label"
   }, leftLabel), /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledLabel, {
@@ -57,7 +58,7 @@ const DuellingPicklist = ({
   }, rightLabel)), shouldDisplayControls && /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledControlsContainer, null, /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledControl, {
     "data-element": "picklist-left-control"
   }, leftControls), /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledControl, {
-    "data-element": "picklist-right-label"
+    "data-element": "picklist-right-control"
   }, rightControls)), /*#__PURE__*/_react.default.createElement(_duellingPicklist2.default.Provider, {
     value: {
       setElementToFocus: addElementToFocus,

package/lib/components/duelling-picklist/picklist/picklist.component.js

@@ -66,6 +66,7 @@ const Picklist = ({
   }, [elementToFocus, index, refs, setElementToFocus]);
   return /*#__PURE__*/_react.default.createElement(_picklist.StyledPicklist, {
     "data-element": "picklist",
+    "data-role": "picklist",
     scrollVariant: "light",
     onKeyDown: handleKeyDown
   }, isEmpty && /*#__PURE__*/_react.default.createElement(_picklist.StyledEmptyContainer, null, placeholder), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {

package/lib/components/duelling-picklist/picklist-group/picklist-group.component.js

@@ -80,6 +80,7 @@ const PicklistGroup = exports.PicklistGroup = /*#__PURE__*/_react.default.forwar
     onKeyDown: handleKeydown,
     "data-element": "picklist-group"
   }, title, /*#__PURE__*/_react.default.createElement(_picklistGroup.StyledGroupButton, {
+    "data-role": "picklist-group-button",
     buttonType: "secondary",
     destructive: type === "remove",
     iconType: type,

package/lib/components/duelling-picklist/picklist-item/picklist-item.component.js

@@ -84,6 +84,7 @@ const PicklistItem = exports.PicklistItem = /*#__PURE__*/_react.default.forwardR
     locked: locked,
     ref: picklistItemNodeRef
   }, children, !locked && /*#__PURE__*/_react.default.createElement(_picklistItem.StyledButton, {
+    "data-role": "picklist-item-button",
     buttonType: "primary",
     destructive: type === "remove",
     iconType: type,

package/lib/components/form/__internal__/form-summary.component.js

@@ -27,7 +27,8 @@ const Summary = ({
   if (messages[`${type}Count`]) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_formSummary.StyledMessagePrefix, null, message?.[0]), /*#__PURE__*/_react.default.createElement(_formSummary.StyledInternalSummary, {
       type: type,
-      "data-element": `${type}s`
+      "data-element": `${type}s`,
+      "data-role": "internal-summary"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: type
     }), /*#__PURE__*/_react.default.createElement("span", null, message?.[1])));
@@ -42,6 +43,7 @@ const FormSummary = ({
   return /*#__PURE__*/_react.default.createElement(_formSummary.StyledFormSummary, {
     showSummary: !!(props.errorCount || props.warningCount),
     "data-element": "form-summary",
+    "data-role": "form-summary",
     fullWidth: fullWidth
   }, /*#__PURE__*/_react.default.createElement(Summary, _extends({
     type: "error"

package/lib/components/form/form.component.js

@@ -56,6 +56,7 @@ const Form = ({
     isInModal: isInModal
   }, rest), /*#__PURE__*/_react.default.createElement(_form.StyledFormContent, {
     "data-element": "form-content",
+    "data-role": "form-content",
     className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     isInModal: isInModal
@@ -63,20 +64,24 @@ const Form = ({
     marginBottom: _form2.formSpacing[fieldSpacing]
   }, children)), !fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
     "data-element": "form-footer",
+    "data-role": "form-footer",
     className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
     isInModal: isInModal
   }, footerPadding), leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
+    "data-role": "form-left-buttons",
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/_react.default.createElement(_formSummary.default, {
     errorCount: errorCount,
     warningCount: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledRightButtons, {
+    "data-role": "form-right-buttons",
     buttonAlignment: buttonAlignment
   }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
     "data-element": "form-footer",
+    "data-role": "form-footer",
     className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,

package/lib/components/inline-inputs/inline-inputs.component.d.ts

@@ -16,7 +16,7 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     labelAlign?: "left" | "right";
     /**
      * Custom label id, could be used in combination with aria-labelledby prop of each input,
-     * to make them accesible for screen readers.
+     * to make them accessible for screen readers.
      */
     labelId?: string;
     /** Flag to configure component as mandatory. */

package/lib/components/inline-inputs/inline-inputs.component.js

@@ -66,6 +66,7 @@ const InlineInputs = ({
   return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, _extends({
     gutter: gutter,
     "data-component": "inline-inputs",
+    "data-role": "inline-inputs",
     className: className,
     labelWidth: labelWidth,
     labelInline: inlineLabel,
@@ -73,6 +74,7 @@ const InlineInputs = ({
   }, marginProps), renderLabel(), /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
+    "data-role": "inline-inputs-container",
     inputWidth: inputWidth
   }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
     marginBottom: undefined

package/lib/components/pager/__internal__/pager-navigation.component.js

@@ -97,6 +97,7 @@ const PagerNavigation = ({
     onKeyUp: ev => _events.default.isEnterKey(ev) ? handlePageInputChange(ev) : false
   }), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNoSelect, null, l.pager.ofY(pageCount))) : /*#__PURE__*/_react.default.createElement(_pager.StyledPagerNavLabel, {
     "data-element": "current-page-label",
+    "data-role": "current-page-label",
     id: currentPageId,
     "aria-live": "polite"
   }, navLabelString)), !hasOnePage && renderButtonsAfterCount());

package/lib/components/pager/pager.component.js

@@ -134,6 +134,7 @@ const Pager = ({
   const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
   return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerContainer, _extends({
     "data-component": "pager",
+    "data-role": "pager",
     variant: variant
   }, rest), /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSizeOptions, null, renderPageSizeOptions()), /*#__PURE__*/_react.default.createElement(_pagerNavigation.default, {
     pageSize: currentPageSize,

package/lib/components/tile/flex-tile-container/flex-tile-container.component.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { BoxProps } from "../../box";
-export interface FlexTileContainerProps extends Pick<BoxProps, "columnGap"> {
+export interface FlexTileContainerProps extends Pick<BoxProps, "columnGap" | "overflow"> {
     /** The child elements of FlexTileContainer need to be FlexTileCell components. */
     children: React.ReactNode;
 }
-export declare const FlexTileContainer: ({ children, columnGap, }: FlexTileContainerProps) => JSX.Element;
+export declare const FlexTileContainer: ({ children, columnGap, overflow, }: FlexTileContainerProps) => JSX.Element;
 export default FlexTileContainer;

package/lib/components/tile/flex-tile-container/flex-tile-container.component.js

@@ -10,7 +10,8 @@ var _box = _interopRequireDefault(require("../../box"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FlexTileContainer = ({
   children,
-  columnGap = 2
+  columnGap = 2,
+  overflow = "hidden"
 }) => {
   if (!children) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
@@ -23,7 +24,7 @@ const FlexTileContainer = ({
     flexWrap: "wrap",
     columnGap: columnGap,
     justifyContent: "flex-start",
-    overflow: "hidden",
+    overflow: overflow,
     width: "100%",
     "data-component": "flex-tile-container"
   }, children);
@@ -32,7 +33,108 @@ exports.FlexTileContainer = FlexTileContainer;
 if (process.env.NODE_ENV !== "production") {
   FlexTileContainer.propTypes = {
     "children": _propTypes.default.node,
-    "columnGap": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+    "columnGap": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    "overflow": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-hidden-unscrollable", "-moz-initial", "auto", "clip", "hidden", "inherit", "initial", "revert-layer", "revert", "scroll", "unset", "visible"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-hidden-unscrollable", "-moz-initial", "auto", "clip", "hidden", "inherit", "initial", "revert-layer", "revert", "scroll", "unset", "visible", null]), _propTypes.default.shape({
+      "__@iterator": _propTypes.default.func.isRequired,
+      "anchor": _propTypes.default.func.isRequired,
+      "at": _propTypes.default.func.isRequired,
+      "big": _propTypes.default.func.isRequired,
+      "blink": _propTypes.default.func.isRequired,
+      "bold": _propTypes.default.func.isRequired,
+      "charAt": _propTypes.default.func.isRequired,
+      "charCodeAt": _propTypes.default.func.isRequired,
+      "codePointAt": _propTypes.default.func.isRequired,
+      "concat": _propTypes.default.func.isRequired,
+      "endsWith": _propTypes.default.func.isRequired,
+      "fixed": _propTypes.default.func.isRequired,
+      "fontcolor": _propTypes.default.func.isRequired,
+      "fontsize": _propTypes.default.func.isRequired,
+      "includes": _propTypes.default.func.isRequired,
+      "indexOf": _propTypes.default.func.isRequired,
+      "italics": _propTypes.default.func.isRequired,
+      "lastIndexOf": _propTypes.default.func.isRequired,
+      "length": _propTypes.default.number.isRequired,
+      "link": _propTypes.default.func.isRequired,
+      "localeCompare": _propTypes.default.func.isRequired,
+      "match": _propTypes.default.func.isRequired,
+      "matchAll": _propTypes.default.func.isRequired,
+      "normalize": _propTypes.default.func.isRequired,
+      "padEnd": _propTypes.default.func.isRequired,
+      "padStart": _propTypes.default.func.isRequired,
+      "repeat": _propTypes.default.func.isRequired,
+      "replace": _propTypes.default.func.isRequired,
+      "search": _propTypes.default.func.isRequired,
+      "slice": _propTypes.default.func.isRequired,
+      "small": _propTypes.default.func.isRequired,
+      "split": _propTypes.default.func.isRequired,
+      "startsWith": _propTypes.default.func.isRequired,
+      "strike": _propTypes.default.func.isRequired,
+      "sub": _propTypes.default.func.isRequired,
+      "substr": _propTypes.default.func.isRequired,
+      "substring": _propTypes.default.func.isRequired,
+      "sup": _propTypes.default.func.isRequired,
+      "toLocaleLowerCase": _propTypes.default.func.isRequired,
+      "toLocaleUpperCase": _propTypes.default.func.isRequired,
+      "toLowerCase": _propTypes.default.func.isRequired,
+      "toString": _propTypes.default.func.isRequired,
+      "toUpperCase": _propTypes.default.func.isRequired,
+      "trim": _propTypes.default.func.isRequired,
+      "trimEnd": _propTypes.default.func.isRequired,
+      "trimLeft": _propTypes.default.func.isRequired,
+      "trimRight": _propTypes.default.func.isRequired,
+      "trimStart": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    })])), _propTypes.default.object, _propTypes.default.shape({
+      "__@iterator": _propTypes.default.func.isRequired,
+      "anchor": _propTypes.default.func.isRequired,
+      "at": _propTypes.default.func.isRequired,
+      "big": _propTypes.default.func.isRequired,
+      "blink": _propTypes.default.func.isRequired,
+      "bold": _propTypes.default.func.isRequired,
+      "charAt": _propTypes.default.func.isRequired,
+      "charCodeAt": _propTypes.default.func.isRequired,
+      "codePointAt": _propTypes.default.func.isRequired,
+      "concat": _propTypes.default.func.isRequired,
+      "endsWith": _propTypes.default.func.isRequired,
+      "fixed": _propTypes.default.func.isRequired,
+      "fontcolor": _propTypes.default.func.isRequired,
+      "fontsize": _propTypes.default.func.isRequired,
+      "includes": _propTypes.default.func.isRequired,
+      "indexOf": _propTypes.default.func.isRequired,
+      "italics": _propTypes.default.func.isRequired,
+      "lastIndexOf": _propTypes.default.func.isRequired,
+      "length": _propTypes.default.number.isRequired,
+      "link": _propTypes.default.func.isRequired,
+      "localeCompare": _propTypes.default.func.isRequired,
+      "match": _propTypes.default.func.isRequired,
+      "matchAll": _propTypes.default.func.isRequired,
+      "normalize": _propTypes.default.func.isRequired,
+      "padEnd": _propTypes.default.func.isRequired,
+      "padStart": _propTypes.default.func.isRequired,
+      "repeat": _propTypes.default.func.isRequired,
+      "replace": _propTypes.default.func.isRequired,
+      "search": _propTypes.default.func.isRequired,
+      "slice": _propTypes.default.func.isRequired,
+      "small": _propTypes.default.func.isRequired,
+      "split": _propTypes.default.func.isRequired,
+      "startsWith": _propTypes.default.func.isRequired,
+      "strike": _propTypes.default.func.isRequired,
+      "sub": _propTypes.default.func.isRequired,
+      "substr": _propTypes.default.func.isRequired,
+      "substring": _propTypes.default.func.isRequired,
+      "sup": _propTypes.default.func.isRequired,
+      "toLocaleLowerCase": _propTypes.default.func.isRequired,
+      "toLocaleUpperCase": _propTypes.default.func.isRequired,
+      "toLowerCase": _propTypes.default.func.isRequired,
+      "toString": _propTypes.default.func.isRequired,
+      "toUpperCase": _propTypes.default.func.isRequired,
+      "trim": _propTypes.default.func.isRequired,
+      "trimEnd": _propTypes.default.func.isRequired,
+      "trimLeft": _propTypes.default.func.isRequired,
+      "trimRight": _propTypes.default.func.isRequired,
+      "trimStart": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    })])
   };
 }
 var _default = exports.default = FlexTileContainer;

package/lib/components/tile-select/__internal__/accordion/accordion.component.js

@@ -28,10 +28,12 @@ const Accordion = ({
   return /*#__PURE__*/_react.default.createElement(_accordion.StyledContentContainer, {
     "aria-expanded": expanded,
     isExpanded: expanded,
-    maxHeight: contentHeight
+    maxHeight: contentHeight,
+    "data-role": "tile-select-accordion-content-container"
   }, /*#__PURE__*/_react.default.createElement(_accordion.StyledContent, {
     role: "region",
     "data-element": "tile-select-accordion-content",
+    "data-role": "tile-select-accordion-content",
     ref: contentRef,
     id: contentId,
     "aria-labelledby": controlId

package/lib/components/tile-select/tile-select-group/tile-select-group.component.js

@@ -31,7 +31,8 @@ const TileSelectGroup = ({
       name: name,
       onBlur: onBlur,
       onChange: onChange,
-      value: value
+      value: value,
+      "data-role": "tile-select-group-radio-button-mapper"
     }, _react.default.Children.map(children, child => {
       if ( /*#__PURE__*/_react.default.isValidElement(child)) {
         return /*#__PURE__*/_react.default.cloneElement(child, {

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

@@ -59,6 +59,7 @@ const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
     }
   });
   const renderActionButton = () => /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDeselectWrapper, {
+    "data-role": "deselect-wrapper",
     hasActionAdornment: !!actionButtonAdornment
   }, customActionButton && customActionButton(handleDeselect), !customActionButton && checked && /*#__PURE__*/_react.default.createElement(_button.default, {
     buttonType: "tertiary",
@@ -79,6 +80,7 @@ const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
     className: className,
     disabled: disabled
   }, (0, _tags.default)("tile-select", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFocusWrapper, {
+    "data-role": "focus-wrapper",
     hasFocus: hasFocus,
     checked: checked
   }, /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTileSelectInput, _extends({
@@ -113,13 +115,18 @@ const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, title), subtitle && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledSubtitle, {
     as: checkPropTypeIsNode(subtitle) ? "div" : undefined
   }, subtitle), titleAdornment && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAdornment, {
-    hasAdditionalInformation: !!additionalInformation
+    hasAdditionalInformation: !!additionalInformation,
+    "data-role": "title-adornment"
   }, titleAdornment && /*#__PURE__*/_react.default.createElement("div", null, titleAdornment))), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, {
     as: checkPropTypeIsNode(description) ? "div" : undefined
-  }, description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAccordionFooterWrapper, {
-    accordionExpanded: accordionExpanded
+  }, description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, {
+    "data-role": "tile-select-footer"
+  }, footer), accordionContent && accordionControl && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAccordionFooterWrapper, {
+    accordionExpanded: accordionExpanded,
+    "data-role": "accordion-footer"
   }, accordionControl(controlId, contentId))), prefixAdornment && /*#__PURE__*/_react.default.createElement(_box.default, {
     "data-element": "prefix-adornment",
+    "data-role": "prefix-adornment",
     mr: 3,
     opacity: disabled ? "0.3" : undefined
   }, prefixAdornment))), accordionContent && /*#__PURE__*/_react.default.createElement(_accordion.default, {

package/package.json

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