carbon-react 150.0.0 → 151.0.0

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 StyledCheckboxGroup from "./checkbox-group.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import StyledCheckboxGroup, { StyledHintText } from "./checkbox-group.style";
 import Fieldset from "../../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
@@ -10,10 +10,11 @@ import FormSpacingProvider from "../../../__internal__/form-spacing-provider";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
 import Box from "../../box";
-import { ErrorBorder } from "../../textbox/textbox.style";
+import ErrorBorder from "../../textbox/textbox.style";
 import CheckboxGroupContext from "./__internal__/checkbox-group.context";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility";
+import HintText from "../../../__internal__/hint-text";
 export const CheckboxGroup = ({
   children,
   legend,
@@ -61,8 +62,10 @@ export const CheckboxGroup = ({
     "aria-describedby": combinedAriaDescribedBy
   }, tagComponent("checkboxgroup", rest), {
     blockGroupBehaviour: !(error || warning)
-  }, filterStyledSystemMarginProps(rest)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, {
-    id: inputHintId
+  }, filterStyledSystemMarginProps(rest)), legendHelp && /*#__PURE__*/React.createElement(HintText, {
+    align: legendAlign,
+    id: inputHintId,
+    marginTop: "-4px"
   }, legendHelp), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {

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

@@ -1,4 +1,3 @@
-export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCheckboxGroup: import("styled-components").StyledComponent<"div", any, {
     legendInline?: boolean | undefined;
     inline?: boolean | undefined;

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

@@ -4,12 +4,6 @@ import StyledIcon from "../../icon/icon.style";
 import CheckboxStyle from "../checkbox.style";
 import { StyledLabelContainer } from "../../../__internal__/label/label.style";
 import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
-export const StyledHintText = styled.div`
-  margin-top: -4px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
 const StyledCheckboxGroup = styled.div`
   display: flex;
   flex-direction: column;

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 */

package/esm/components/content/content.component.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from "react";
 import PropTypes from "prop-types";
 import { StyledContent, StyledContentTitle, StyledContentBody } from "./content.style";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 export const Content = ({
   variant = "primary",
   children,
@@ -15,9 +16,7 @@ export const Content = ({
   return /*#__PURE__*/React.createElement(StyledContent, _extends({
     align: align,
     bodyFullWidth: bodyFullWidth
-  }, rest, {
-    "data-component": "content"
-  }), /*#__PURE__*/React.createElement(StyledContentTitle, {
+  }, rest, tagComponent("content", rest)), /*#__PURE__*/React.createElement(StyledContentTitle, {
     variant: variant,
     inline: inline,
     "data-element": "content-title",

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

@@ -12,7 +12,7 @@ export interface DateChangeEvent {
         };
     };
 }
-export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedValue" | "rawValue" | "onChange" | "onBlur" | "onMouseDown" | "onChangeDeferred" | "deferTimeout" | "children" | "leftChildren" | "placeholder" | "iconOnClick" | "iconOnMouseDown" | "characterLimit" | "warnOverLimit" | "iconTabIndex" | "inputIcon"> {
+export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedValue" | "rawValue" | "onChange" | "onBlur" | "onMouseDown" | "onChangeDeferred" | "deferTimeout" | "children" | "leftChildren" | "placeholder" | "iconOnClick" | "iconOnMouseDown" | "characterLimit" | "warnOverLimit" | "iconTabIndex" | "inputIcon" | "data-component"> {
     /** Boolean to allow the input to have an empty value */
     allowEmptyValue?: boolean;
     /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */

package/esm/components/date/date.component.js

@@ -13,11 +13,11 @@ import DateRangeContext from "../date-range/__internal__/date-range.context";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import guid from "../../__internal__/utils/helpers/guid";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 const DateInput = /*#__PURE__*/React.forwardRef(({
   adaptiveLabelBreakpoint,
   allowEmptyValue,
   autoFocus,
-  "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
   disabled,
@@ -288,15 +288,16 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     ref: wrapperRef,
     role: "presentation",
     size: size,
-    labelInline: labelInline,
-    "data-component": dataComponent || "date",
-    "data-element": dataElement,
-    "data-role": dataRole
+    labelInline: labelInline
   }, marginProps, {
     applyDateRangeStyling: !!inputRefMap,
     maxWidth: maxWidth,
     inputWidth: inputWidth
-  }), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
+  }, tagComponent("date", {
+    "data-element": dataElement,
+    "data-role": dataRole
+  })), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
+    "data-component": "date-input",
     value: computedValue(),
     onBlur: handleBlur,
     onChange: handleChange,
@@ -467,7 +468,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/decimal/decimal.component.d.ts

@@ -10,7 +10,7 @@ export interface CustomEvent {
         };
     };
 }
-export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onBlur"> {
+export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onBlur" | "data-component"> {
     /** Text alignment of the label */
     align?: "left" | "right";
     /** Allow an empty value instead of defaulting to 0.00 */

package/esm/components/decimal/decimal.component.js

@@ -6,6 +6,7 @@ import Textbox from "../textbox";
 import LocaleContext from "../../__internal__/i18n-context";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 import Logger from "../../__internal__/utils/logger";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 let deprecateUncontrolledWarnTriggered = false;
 const Decimal = /*#__PURE__*/React.forwardRef(({
   align = "right",
@@ -175,7 +176,7 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
     "data-component": "decimal",
     id: id,
     ref: ref
-  }, rest)), /*#__PURE__*/React.createElement("input", {
+  }, rest, tagComponent("decimal", rest))), /*#__PURE__*/React.createElement("input", {
     name: name,
     value: toStandardDecimal(stateValue),
     type: "hidden",
@@ -313,7 +314,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/definition-list/dd/dd.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-export interface DdProps extends SpaceProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface DdProps extends SpaceProps, TagProps {
     /** Prop for what will render in the `<Dd></Dd>` tags */
     children: React.ReactNode;
 }

package/esm/components/definition-list/dd/dd.component.js

@@ -3,6 +3,7 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledDd } from "../definition-list.style";
 import DlContext from "../__internal__/dl.context";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 const Dd = ({
   children,
   ...rest
@@ -20,7 +21,7 @@ const Dd = ({
     asSingleColumn: asSingleColumn,
     ddTextAlign: ddTextAlign,
     mb: mb || 2
-  }, rest), children);
+  }, rest, tagComponent("dd", rest)), children);
 };
 Dd.displayName = "Dd";
 export default Dd;

package/esm/components/definition-list/dl.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { DlContextProps } from "./__internal__/dl.context";
-export interface DlProps extends SpaceProps, DlContextProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface DlProps extends SpaceProps, DlContextProps, TagProps {
     /** HTML id attribute of the input */
     id?: string;
     /** prop to render children. */

package/esm/components/definition-list/dl.component.js

@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { StyledDl } from "./definition-list.style";
 import DlContext from "./__internal__/dl.context";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 const Dl = ({
   children,
   w = 50,
@@ -13,10 +14,8 @@ const Dl = ({
 }) => {
   return /*#__PURE__*/React.createElement(StyledDl, _extends({
     w: w,
-    "data-component": "dl",
-    "data-role": "dl",
     asSingleColumn: asSingleColumn
-  }, rest), /*#__PURE__*/React.createElement(DlContext.Provider, {
+  }, rest, tagComponent("dl", rest)), /*#__PURE__*/React.createElement(DlContext.Provider, {
     value: {
       asSingleColumn,
       dtTextAlign,

package/esm/components/definition-list/dt/dt.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-export interface DtProps extends SpaceProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface DtProps extends SpaceProps, TagProps {
     /** Prop for what will render in the `<Dd></Dd>` tags */
     children: React.ReactNode;
 }

package/esm/components/definition-list/dt/dt.component.js

@@ -3,6 +3,7 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledDt } from "../definition-list.style";
 import DlContext from "../__internal__/dl.context";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 const Dt = ({
   children,
   ...rest
@@ -22,7 +23,7 @@ const Dt = ({
     pr: pr || asSingleColumn ? undefined : 3,
     dtTextAlign: dtTextAlign,
     asSingleColumn: asSingleColumn
-  }, rest), children);
+  }, rest, tagComponent("dt", rest)), children);
 };
 Dt.displayName = "Dt";
 export default Dt;

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

@@ -66,6 +66,8 @@ export interface DialogProps extends ModalProps, TagProps {
     greyBackground?: boolean;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
     focusableContainers?: CustomRefObject<HTMLElement>[];
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 export declare type DialogHandle = {
     /** Programmatically focus on root container of Dialog. */

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

@@ -79,18 +79,13 @@ export const DialogFullScreen = ({
     "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
     "aria-label": ariaLabel
   };
-  const componentTags = {
-    "data-component": "dialog-full-screen",
-    "data-element": rest["data-element"],
-    "data-role": rest["data-role"]
-  };
   return /*#__PURE__*/React.createElement(Modal, _extends({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
     topModalOverride: topModalOverride,
     restoreFocusOnClose: restoreFocusOnClose
-  }, componentTags), /*#__PURE__*/React.createElement(FocusTrap, {
+  }, tagComponent("dialog-full-screen", rest)), /*#__PURE__*/React.createElement(FocusTrap, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,

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

@@ -3,7 +3,7 @@ import { SpaceProps } from "styled-system";
 import { StyledDismissibleBoxProps } from "./dismissible-box.style";
 import { BoxProps } from "../box";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxProps, Omit<BoxProps, "display" | "justifyContent" | "bg" | "backgroundColor">, Omit<TagProps, "data-component"> {
+export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxProps, Omit<BoxProps, "display" | "justifyContent" | "bg" | "backgroundColor">, TagProps {
     /** The content to render in the component */
     children?: React.ReactNode;
     /** Data tag prop bag for close Button */

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -16,9 +16,8 @@ export const DismissibleBox = ({
   const locale = useLocale();
   return /*#__PURE__*/React.createElement(StyledDismissibleBox, _extends({
     p: "20px 24px 20px 20px",
-    "data-component": "dismissible-box",
     borderRadius: borderRadius
-  }, rest), children, /*#__PURE__*/React.createElement("span", {
+  }, rest, tagComponent("dismissible-box", rest)), children, /*#__PURE__*/React.createElement("span", {
     "data-element": "close-button-wrapper"
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onClose,

package/esm/components/draggable/__internal__/drop-target.component.d.ts

@@ -4,5 +4,5 @@ interface DropTargetProps extends Omit<DraggableContainerProps, "getOrder"> {
     children?: React.ReactNode;
     getOrder: (movedItemId?: string | number | undefined) => void;
 }
-declare const DropTarget: ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, ...rest }: DropTargetProps) => React.JSX.Element;
+declare const DropTarget: ({ children, getOrder, ...rest }: DropTargetProps) => React.JSX.Element;
 export default DropTarget;

package/esm/components/draggable/__internal__/drop-target.component.js

@@ -3,9 +3,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useDrop } from "react-dnd";
 import { StyledDraggableContainer } from "../draggable-item/draggable-item.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 const DropTarget = ({
-  "data-element": dataElement,
-  "data-role": dataRole,
   children,
   getOrder,
   ...rest
@@ -20,10 +19,7 @@ const DropTarget = ({
     }
   });
   return /*#__PURE__*/React.createElement(StyledDraggableContainer, _extends({
-    ref: drop,
-    "data-component": "draggable-container",
-    "data-element": dataElement,
-    "data-role": dataRole
-  }, rest), children);
+    ref: drop
+  }, rest, tagComponent("draggable-container", rest)), children);
 };
 export default DropTarget;

package/esm/components/draggable/draggable-container.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface DraggableContainerProps extends MarginProps, Omit<TagProps, "data-component"> {
+export interface DraggableContainerProps extends MarginProps, TagProps {
     /** Callback fired when order is changed */
     getOrder?: (draggableItemIds?: (string | number | undefined)[], movedItemId?: string | number | undefined) => void;
     /**

package/esm/components/draggable/draggable-item/draggable-item.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
-export interface DraggableItemProps extends PaddingProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface DraggableItemProps extends PaddingProps, TagProps {
     /**
      * The id of the `DraggableItem`.
      *
@@ -29,7 +30,7 @@ export interface DraggableItemProps extends PaddingProps {
     flexDirection?: "row" | "row-reverse";
 }
 declare const DraggableItem: {
-    ({ id, findItem, moveItem, children, py, flexDirection, ...rest }: DraggableItemProps): JSX.Element;
+    ({ id, findItem, moveItem, children, py, flexDirection, "data-element": dataElement, "data-role": dataRole, ...rest }: DraggableItemProps): JSX.Element;
     displayName: string;
 };
 export default DraggableItem;

package/esm/components/draggable/draggable-item/draggable-item.component.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from "react";
 import PropTypes from "prop-types";
 import { useDrop, useDrag } from "react-dnd";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import { StyledDraggableItem } from "./draggable-item.style";
 import Icon from "../../icon";
@@ -12,6 +13,8 @@ const DraggableItem = ({
   children,
   py = 1,
   flexDirection,
+  "data-element": dataElement,
+  "data-role": dataRole = "draggable-item",
   ...rest
 }) => {
   let originalIndex;
@@ -58,19 +61,22 @@ const DraggableItem = ({
   });
   const paddingProps = filterStyledSystemPaddingProps(rest);
   return /*#__PURE__*/React.createElement(StyledDraggableItem, _extends({
-    "data-element": "draggable",
-    "data-role": "draggable-item",
     isDragging: isDragging,
     ref: node => drag(drop(node)),
     py: py,
     flexDirection: flexDirection
-  }, paddingProps), children, /*#__PURE__*/React.createElement(Icon, {
+  }, paddingProps, tagComponent("draggable-item", {
+    "data-element": dataElement,
+    "data-role": dataRole
+  })), children, /*#__PURE__*/React.createElement(Icon, {
     type: "drag"
   }));
 };
 if (process.env.NODE_ENV !== "production") {
   DraggableItem.propTypes = {
     "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "findItem": PropTypes.func,
     "flexDirection": PropTypes.oneOf(["row-reverse", "row"]),
     "id": PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import DrawerSidebarContext from "./__internal__/drawer-sidebar.context";
-export interface DrawerProps extends Omit<TagProps, "data-component"> {
+export interface DrawerProps extends TagProps {
     /** Duration of a animation */
     animationDuration?: string;
     /** Specify an aria-label for the Drawer component */

package/esm/components/duelling-picklist/duelling-picklist.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-export interface DuellingPicklistProps extends MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface DuellingPicklistProps extends MarginProps, TagProps {
     /**
      * Content of the component, should contain two Picklist children
      * and a PicklistDivider

package/esm/components/duelling-picklist/duelling-picklist.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 } from "react";
 import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { StyledDuellingPicklistOverlay, StyledDuellingPicklist, StyledLabelContainer, StyledLabel, StyledControlsContainer, StyledControl } from "./duelling-picklist.style";
 import { Picklist } from "./picklist/picklist.component";
@@ -39,10 +40,8 @@ export const DuellingPicklist = ({
     return child;
   });
   return /*#__PURE__*/React.createElement(StyledDuellingPicklistOverlay, _extends({
-    disabled: disabled,
-    "data-component": "duelling-picklist",
-    "data-role": "duelling-picklist-overlay"
-  }, filterStyledSystemMarginProps(rest)), shouldDisplayLabels && /*#__PURE__*/React.createElement(StyledLabelContainer, null, /*#__PURE__*/React.createElement(StyledLabel, {
+    disabled: disabled
+  }, filterStyledSystemMarginProps(rest), tagComponent("duelling-picklist", rest)), shouldDisplayLabels && /*#__PURE__*/React.createElement(StyledLabelContainer, null, /*#__PURE__*/React.createElement(StyledLabel, {
     "data-element": "picklist-left-label"
   }, leftLabel), /*#__PURE__*/React.createElement(StyledLabel, {
     "data-element": "picklist-right-label"

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-export interface FieldsetProps extends MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface FieldsetProps extends MarginProps, TagProps {
     /** Child elements */
     children?: React.ReactNode;
     /** The text for the fieldset's legend element. */