carbon-react 150.1.0 → 151.0.0

package/esm/__internal__/form-field/form-field.component.d.ts

@@ -61,6 +61,8 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     useValidationIcon?: boolean;
     /** String value for max-width of `field-line` element */
     maxWidth?: string;
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 declare const FormField: {
     ({ maxWidth, children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;

package/esm/__internal__/utils/helpers/tags/tags.d.ts

@@ -2,15 +2,23 @@ interface RestProps {
     [restKeys: string]: any;
 }
 export interface TagProps {
-    /** @private @ignore Identifier used for testing purposes, applied to the root element of the component. */
-    "data-component"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
 }
+interface InternalTagProps extends TagProps {
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Identifier used for testing purposes, applied to the root element of the component.
+     * INTERNAL USE ONLY.
+     */
+    "data-component"?: string;
+}
 /**
  * Builds props object containing top level data tags
  */
-declare function tagComponent(componentName: string | undefined, props: TagProps & RestProps): TagProps;
+declare function tagComponent(componentName: string | undefined, props: TagProps & RestProps): InternalTagProps;
 export default tagComponent;

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

@@ -4,7 +4,7 @@ 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, Omit<TagProps, "data-component"> {
+export interface AccordionGroupProps extends MarginProps, TagProps {
     /** 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

@@ -5,6 +5,7 @@ import invariant from "invariant";
 import Events from "../../../__internal__/utils/helpers/events";
 import Accordion from "../accordion.component";
 import { StyledAccordionGroup } from "../accordion.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 
 // typescript-to-proptypes breaks on recursive type references so it has to be an interface
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -51,9 +52,7 @@ export const AccordionGroup = ({
       focusAccordion(ev, refs.length - 1);
     }
   }, [focusAccordion, refs]);
-  return /*#__PURE__*/React.createElement(StyledAccordionGroup, _extends({}, rest, {
-    "data-component": "accordion-group"
-  }), filteredChildren.map((child, index) =>
+  return /*#__PURE__*/React.createElement(StyledAccordionGroup, _extends({}, rest, tagComponent("accordion-group", rest)), filteredChildren.map((child, index) =>
   /*#__PURE__*/
   // casted to ReactElement as there is no overload for an FunctionComponentElement in cloneElement
   React.cloneElement(child, {

package/esm/components/accordion/accordion.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { StyledAccordionContainerProps } from "./accordion.style";
-export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps {
+export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps, TagProps {
     /** Content of the Accordion component */
     children?: React.ReactNode;
     /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */

package/esm/components/accordion/accordion.component.js

@@ -1,6 +1,7 @@
 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, { useState, useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Events from "../../__internal__/utils/helpers/events";
@@ -64,12 +65,10 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   const getIconType = () => size === "small" || variant === "subtle" ? "chevron_down_thick" : "chevron_down";
   return /*#__PURE__*/React.createElement(StyledAccordionContainer, _extends({
     id: accordionId,
-    "data-component": "accordion",
-    "data-role": "accordion-container",
     width: width,
     borders: variant === "subtle" ? "none" : borders,
     variant: variant
-  }, rest), /*#__PURE__*/React.createElement(StyledAccordionTitleContainer, _extends({
+  }, rest, tagComponent("accordion", rest)), /*#__PURE__*/React.createElement(StyledAccordionTitleContainer, _extends({
     "data-element": "accordion-title-container",
     id: headerId,
     "aria-expanded": isExpanded,
@@ -121,6 +120,8 @@ if (process.env.NODE_ENV !== "production") {
   Accordion.propTypes = {
     "borders": PropTypes.oneOf(["default", "full", "none"]),
     "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "defaultExpanded": PropTypes.bool,
     "disableContentPadding": PropTypes.bool,
     "error": PropTypes.string,

package/esm/components/action-popover/action-popover.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { Alignment } from "./__internal__/action-popover.context";
 export interface RenderButtonProps {
     tabIndex: number;
@@ -13,7 +14,7 @@ export interface RenderButtonProps {
         "aria-expanded": string;
     };
 }
-export interface ActionPopoverProps extends MarginProps {
+export interface ActionPopoverProps extends MarginProps, TagProps {
     /** Children for popover component */
     children?: React.ReactNode;
     /** Horizontal alignment of menu items content */

package/esm/components/action-popover/action-popover.component.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useState, useCallback, useMemo, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import { MenuButton, ButtonIcon, StyledButtonIcon } from "./action-popover.style";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
@@ -200,13 +201,11 @@ const ActionPopover = /*#__PURE__*/forwardRef(({
   };
   return /*#__PURE__*/React.createElement(MenuButton, _extends({
     id: parentID,
-    "data-component": "action-popover-wrapper",
-    "data-role": "action-popover-wrapper",
     onKeyDown: onButtonKeyDown,
     onClick: onButtonClick,
     isOpen,
     ref: buttonRef
-  }, rest), menuButton(menuID), /*#__PURE__*/React.createElement(ActionPopoverContext.Provider, {
+  }, rest, tagComponent("action-popover-wrapper", rest)), menuButton(menuID), /*#__PURE__*/React.createElement(ActionPopoverContext.Provider, {
     value: {
       setOpenPopover: setOpen,
       focusButton,
@@ -227,6 +226,8 @@ if (process.env.NODE_ENV !== "production") {
     "aria-label": PropTypes.string,
     "aria-labelledby": PropTypes.string,
     "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
     "id": PropTypes.string,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/advanced-color-picker/advanced-color-picker.component.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { ModalProps } from "../modal";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface AdvancedColor {
     label: string;
     value: string;
 }
-export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps, "restoreFocusOnClose"> {
+export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps, "restoreFocusOnClose">, TagProps {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
     /**
@@ -14,7 +15,7 @@ export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps,
      */
     "aria-label"?: string;
     /**
-     * Prop to specify the aria-labeledby property of the component
+     * Prop to specify the aria-labelledby property of the component
      * To be used when the title prop is a custom React Node,
      * or the component is labelled by an internal element other than the title.
      */

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

@@ -9,6 +9,7 @@ import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { Dt, Dd } from "../definition-list";
 import Logger from "../../__internal__/utils/logger";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 let deprecateUncontrolledWarnTriggered = false;
 export const AdvancedColorPicker = ({
   "aria-describedby": ariaDescribedBy,
@@ -121,9 +122,7 @@ export const AdvancedColorPicker = ({
   }
   return /*#__PURE__*/React.createElement(StyledAdvancedColorPickerWrapper, _extends({
     m: "15px auto auto 15px"
-  }, filterStyledSystemMarginProps(props), {
-    "data-role": "advanced-color-picker-wrapper"
-  }), /*#__PURE__*/React.createElement(StyledAdvancedColorPickerCell, {
+  }, filterStyledSystemMarginProps(props), tagComponent("advanced-color-picker", props)), /*#__PURE__*/React.createElement(StyledAdvancedColorPickerCell, {
     "data-element": "color-picker-cell",
     "aria-label": l.advancedColorPicker.ariaLabel(),
     "aria-describedby": descriptionId.current,

package/esm/components/alert/alert.component.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { DialogProps } from "../dialog";
-export declare const Alert: ({ children, size, topModalOverride, closeButtonDataProps, ...rest }: DialogProps) => React.JSX.Element;
+export declare const Alert: ({ children, size, topModalOverride, closeButtonDataProps, ...rest }: Omit<DialogProps, "data-component">) => React.JSX.Element;
 export default Alert;

package/esm/components/alert/alert.component.js

@@ -9,10 +9,11 @@ export const Alert = ({
   closeButtonDataProps,
   ...rest
 }) => /*#__PURE__*/React.createElement(Dialog, _extends({
-  "data-component": "alert",
   role: "alertdialog",
   size: size,
   topModalOverride: topModalOverride,
   closeButtonDataProps: closeButtonDataProps
-}, rest), children);
+}, rest, {
+  "data-component": "alert"
+}), children);
 export default Alert;

package/esm/components/anchor-navigation/anchor-navigation.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface AnchorNavigationProps extends Omit<TagProps, "data-component"> {
+export interface AnchorNavigationProps extends TagProps {
     /** Child elements */
     children?: React.ReactNode;
     /** The AnchorNavigationItems components to be rendered in the sticky navigation.

package/esm/components/badge/badge.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface BadgeProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BadgeProps extends TagProps {
     /** Prop to specify an aria-label for the component */
     "aria-label"?: string;
     /** The badge will be added to this element */
@@ -11,5 +12,5 @@ export interface BadgeProps {
     /** Callback fired when badge is clicked */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
-export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, }: BadgeProps) => React.JSX.Element;
+export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, "data-element": dataElement, "data-role": dataRole, }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/esm/components/badge/badge.component.js

@@ -7,7 +7,9 @@ export const Badge = ({
   children,
   counter = 0,
   color = "--colorsActionMajor500",
-  onClick
+  onClick,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   const shouldDisplayCounter = +counter > 0;
   const counterToDisplay = +counter > 99 ? 99 : counter;
@@ -22,8 +24,9 @@ export const Badge = ({
     };
     if (shouldDisplayCounter) {
       return /*#__PURE__*/React.createElement(StyledBadge, _extends({
-        "data-role": "badge",
         "data-component": "badge",
+        "data-element": dataElement,
+        "data-role": dataRole,
         color: color
       }, props, {
         onFocus: () => {

package/esm/components/batch-selection/batch-selection.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface BatchSelectionProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BatchSelectionProps extends TagProps {
     /** Content to be rendered after selected count */
     children: React.ReactNode;
     /** Color of the background, transparent if not defined */
@@ -11,5 +12,5 @@ export interface BatchSelectionProps {
     /** Number of selected elements */
     selectedCount: number;
 }
-export declare const BatchSelection: ({ disabled, children, colorTheme, selectedCount, hidden, }: BatchSelectionProps) => React.JSX.Element;
+export declare const BatchSelection: ({ disabled, children, colorTheme, selectedCount, hidden, "data-element": dataElement, "data-role": dataRole, }: BatchSelectionProps) => React.JSX.Element;
 export default BatchSelection;

package/esm/components/batch-selection/batch-selection.component.js

@@ -8,13 +8,16 @@ export const BatchSelection = ({
   children,
   colorTheme = "transparent",
   selectedCount,
-  hidden
+  hidden,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   const l = useLocale();
   return /*#__PURE__*/React.createElement(StyledBatchSelection, {
     colorTheme: colorTheme,
     "data-component": "batch-selection",
-    "data-role": "batch-selection",
+    "data-element": dataElement,
+    "data-role": dataRole,
     disabled: disabled,
     hidden: hidden
   }, /*#__PURE__*/React.createElement(StyledSelectionCount, {

package/esm/components/box/box.component.d.ts

@@ -49,6 +49,8 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     opacity?: string | number;
     /** Set the container to be hidden from screen readers */
     "aria-hidden"?: "true" | "false";
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export default Box;

package/esm/components/breadcrumbs/breadcrumbs.component.js

@@ -17,15 +17,13 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(({
     }
   }, /*#__PURE__*/React.createElement(StyledBreadcrumbs, _extends({
     ref: ref,
-    role: "navigation"
-  }, tagComponent("breadcrumbs", rest), {
+    role: "navigation",
     "aria-label": l.breadcrumbs.ariaLabel()
-  }, rest), /*#__PURE__*/React.createElement("ol", null, children)));
+  }, rest, tagComponent("breadcrumbs", rest)), /*#__PURE__*/React.createElement("ol", null, children)));
 });
 if (process.env.NODE_ENV !== "production") {
   Breadcrumbs.propTypes = {
     "children": PropTypes.node,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "isDarkBackground": PropTypes.bool,

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -19,7 +19,7 @@ const Crumb = /*#__PURE__*/React.forwardRef(({
     isCurrent: isCurrent,
     "aria-current": isCurrent ? "page" : undefined,
     isDarkBackground: isDarkBackground
-  }, tagComponent("crumb", rest), rest, !isCurrent && {
+  }, rest, tagComponent("crumb", rest), !isCurrent && {
     href,
     onClick
   }), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, {
@@ -84,7 +84,6 @@ if (process.env.NODE_ENV !== "production") {
     "aria-valuenow": PropTypes.number,
     "aria-valuetext": PropTypes.string,
     "children": PropTypes.node,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "hasFocus": PropTypes.bool,

package/esm/components/button/button.component.js

@@ -177,7 +177,6 @@ if (process.env.NODE_ENV !== "production") {
     "buttonType": PropTypes.oneOf(["darkBackground", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
     "children": PropTypes.node,
     "className": PropTypes.string,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "destructive": PropTypes.bool,

package/esm/components/button-bar/button-bar.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { ButtonBarContextProps } from "./__internal__/button-bar.context";
-export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface ButtonBarProps extends ButtonBarContextProps, SpaceProps, TagProps {
     /** Button or IconButton Elements, to be rendered inside the component */
     children: React.ReactNode;
 }

package/esm/components/button-bar/button-bar.component.js

@@ -3,13 +3,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledButtonBar from "./button-bar.style";
 import ButtonBarContext from "./__internal__/button-bar.context";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 export const ButtonBar = ({
   children,
   size = "medium",
   iconPosition = "before",
   fullWidth = false,
   ...rest
-}) => /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, {
+}) => /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, tagComponent("button-bar", rest), {
   fullWidth: fullWidth,
   size: size
 }), /*#__PURE__*/React.createElement(ButtonBarContext.Provider, {

package/esm/components/button-minor/button-minor.component.js

@@ -46,7 +46,6 @@ if (process.env.NODE_ENV !== "production") {
     "buttonType": PropTypes.oneOf(["darkBackground", "gradient-grey", "gradient-white", "primary", "secondary", "tertiary"]),
     "children": PropTypes.node,
     "className": PropTypes.string,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "destructive": PropTypes.bool,

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts

@@ -38,9 +38,11 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     allowDeselect?: boolean;
     /** Disable all user interaction. */
     disabled?: boolean;
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -3,6 +3,7 @@ import React, { useMemo, useState, useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import FormField from "../../../__internal__/form-field";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 import guid from "../../../__internal__/utils/helpers/guid";
 import StyledButtonToggleGroup from "./button-toggle-group.style";
 import { ButtonToggle } from "..";
@@ -29,9 +30,6 @@ const ButtonToggleGroup = ({
   labelWidth,
   onChange,
   value,
-  "data-component": dataComponent = "button-toggle-group",
-  "data-element": dataElement,
-  "data-role": dataRole,
   helpAriaLabel,
   id,
   allowDeselect,
@@ -111,13 +109,10 @@ const ButtonToggleGroup = ({
     labelInline: computeLabelPropValues(labelInline),
     labelWidth: computeLabelPropValues(labelWidth),
     labelId: labelId.current,
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
     id: id,
     labelAs: "span",
     disabled: disabled
-  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(ButtonToggleGroupContext.Provider, {
+  }, filterStyledSystemMarginProps(props), tagComponent(props["data-component"] ?? "button-toggle-group", props)), /*#__PURE__*/React.createElement(ButtonToggleGroupContext.Provider, {
     value: {
       onButtonClick,
       handleKeyDown,
@@ -145,9 +140,6 @@ const ButtonToggleGroup = ({
     inputWidth: inputWidth,
     fullWidth: fullWidth,
     role: "group",
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
     id: id,
     disabled: disabled
   }), children)))));

package/esm/components/button-toggle/button-toggle.component.d.ts

@@ -1,18 +1,13 @@
 import React from "react";
 import { StyledButtonToggleProps } from "./button-toggle.style";
-export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface ButtonToggleProps extends Partial<StyledButtonToggleProps>, TagProps {
     /** Prop to specify the aria-label of the component */
     "aria-label"?: string;
     /** Prop to specify the aria-labelledby property of the component */
     "aria-labelledby"?: string;
     /** Text to display for the button. */
     children?: React.ReactNode;
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-component"?: string;
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-element"?: string;
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-role"?: string;
     /** Callback triggered by blur event on the button. */
     onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
     /** Callback triggered by focus event on the button. */
@@ -23,6 +18,8 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     pressed?: boolean;
     /** An optional string by which to identify the button in either an onClick handler, or an onChange handler on the parent ButtonToggleGroup. */
     value?: string;
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 export declare const ButtonToggle: {
     ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;

package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
 import { ValidationProps } from "../../../__internal__/validations";
-export interface CheckboxGroupProps extends ValidationProps, MarginProps {
+export interface CheckboxGroupProps extends ValidationProps, MarginProps, TagProps {
     /**
      * Unique identifier for the component.
      * Will use a randomly generated GUID if none is provided.

package/esm/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -1,8 +1,8 @@
 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, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
-import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import StyledCheckboxGroup from "./checkbox-group.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import Fieldset from "../../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";

package/esm/components/checkbox/checkbox.component.d.ts

@@ -1,17 +1,12 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { CommonCheckableInputProps } from "../../__internal__/checkable-input/checkable-input.component";
-export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
+export interface CheckboxProps extends CommonCheckableInputProps, MarginProps, TagProps {
     /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
     adaptiveSpacingBreakpoint?: number;
     /** Prop to specify the aria-labelledby property of the input */
     "aria-labelledby"?: string;
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-component"?: string;
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-element"?: string;
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-role"?: string;
     /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
     /** When true label is inline */

package/esm/components/checkbox/checkbox.component.js

@@ -1,6 +1,7 @@
 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, { useContext } from "react";
 import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import CheckboxStyle from "./checkbox.style";
 import CheckableInput from "../../__internal__/checkable-input/checkable-input.component";
 import CheckboxSvg from "./checkbox-svg.component";
@@ -40,7 +41,6 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   inputWidth,
   size,
   tooltipPosition,
-  "data-component": dataComponent = "checkbox",
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
@@ -86,7 +86,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     inputWidth,
     labelWidth,
     ref,
-    ...rest
+    ...rest,
+    "data-component": undefined
   };
   const validationProps = {
     error: contextError || error,
@@ -99,9 +100,6 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   };
   const marginProps = useFormSpacing(rest);
   const componentToRender = /*#__PURE__*/React.createElement(CheckboxStyle, _extends({
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
     disabled: disabled,
     labelSpacing: labelSpacing,
     inputWidth: inputWidth,
@@ -111,7 +109,10 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     reverse: reverse,
     size: size,
     applyNewValidation: validationRedesignOptIn
-  }, marginProps), /*#__PURE__*/React.createElement(CheckableInput, _extends({}, inputProps, validationProps), /*#__PURE__*/React.createElement(CheckboxSvg, null)));
+  }, marginProps, tagComponent("checkbox", {
+    "data-element": dataElement,
+    "data-role": dataRole
+  })), /*#__PURE__*/React.createElement(CheckableInput, _extends({}, inputProps, validationProps), /*#__PURE__*/React.createElement(CheckboxSvg, null)));
   return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
@@ -245,7 +246,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,

package/esm/components/confirm/confirm.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { DialogProps } from "../dialog";
 import { IconType } from "../icon";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFocusTrap" | "bespokeFocusTrap" | "focusableSelectors" | "help" | "role" | "contentPadding" | "focusableContainers" | "ariaRole" | "timeout" | "enableBackgroundUI" | "disableClose"> {
+export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFocusTrap" | "bespokeFocusTrap" | "focusableSelectors" | "help" | "role" | "contentPadding" | "focusableContainers" | "ariaRole" | "timeout" | "enableBackgroundUI" | "disableClose" | "data-component"> {
     /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
     cancelButtonType?: "primary" | "secondary" | "tertiary" | "darkBackground";
     /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */

package/esm/components/confirm/confirm.component.js

@@ -113,11 +113,12 @@ export const Confirm = ({
     disableClose: disableCancel,
     subtitle: subtitle,
     title: getTitle(),
-    "data-component": "confirm",
     role: "alertdialog",
     size: size,
     showCloseIcon: showCloseIcon,
     topModalOverride: topModalOverride
-  }, ariaProps, rest), children, /*#__PURE__*/React.createElement(StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
+  }, ariaProps, rest, {
+    "data-component": "confirm"
+  }), children, /*#__PURE__*/React.createElement(StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
 };
 export default Confirm;

package/esm/components/content/content.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyledContentProps, StyledContentTitleProps, StyledContentBodyProps } from "./content.style";
-export interface ContentProps extends StyledContentProps, StyledContentTitleProps, StyledContentBodyProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface ContentProps extends StyledContentProps, StyledContentTitleProps, StyledContentBodyProps, TagProps {
     /** The body of the content component */
     children?: React.ReactNode;
     /** The title of the content component */