carbon-react 150.0.0 → 151.0.0

package/lib/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/lib/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.CheckboxGroup = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _checkboxGroup = _interopRequireDefault(require("./checkbox-group.style"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
-var _checkboxGroup = _interopRequireWildcard(require("./checkbox-group.style"));
 var _fieldset = _interopRequireDefault(require("../../../__internal__/fieldset"));
 var _utils = require("../../../style/utils");
 var _tooltipProvider = require("../../../__internal__/tooltip-provider");
@@ -15,10 +15,11 @@ var _formSpacingProvider = _interopRequireDefault(require("../../../__internal__
 var _newValidation = _interopRequireDefault(require("../../carbon-provider/__internal__/new-validation.context"));
 var _validationMessage = _interopRequireDefault(require("../../../__internal__/validation-message/validation-message.component"));
 var _box = _interopRequireDefault(require("../../box"));
-var _textbox = require("../../textbox/textbox.style");
+var _textbox = _interopRequireDefault(require("../../textbox/textbox.style"));
 var _checkboxGroup2 = _interopRequireDefault(require("./__internal__/checkbox-group.context"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility"));
+var _hintText = _interopRequireDefault(require("../../../__internal__/hint-text"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -70,15 +71,17 @@ const CheckboxGroup = ({
     "aria-describedby": combinedAriaDescribedBy
   }, (0, _tags.default)("checkboxgroup", rest), {
     blockGroupBehaviour: !(error || warning)
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), legendHelp && /*#__PURE__*/_react.default.createElement(_checkboxGroup.StyledHintText, {
-    id: inputHintId
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), legendHelp && /*#__PURE__*/_react.default.createElement(_hintText.default, {
+    align: legendAlign,
+    id: inputHintId,
+    marginTop: "-4px"
   }, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     warning: warning,
     validationId: validationId
-  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.default, {
     warning: !!(!error && warning),
     inline: inline
   }), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {

package/lib/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/lib/components/checkbox/checkbox-group/checkbox-group.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledHintText = void 0;
+exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _formField = _interopRequireDefault(require("../../../__internal__/form-field/form-field.style"));
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
@@ -13,12 +13,6 @@ var _validationIcon = _interopRequireDefault(require("../../../__internal__/vali
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
-  margin-top: -4px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  font-size: 14px;
-`;
 const StyledCheckboxGroup = _styledComponents.default.div`
   display: flex;
   flex-direction: column;

package/lib/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/lib/components/checkbox/checkbox.component.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Checkbox = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _checkbox = _interopRequireDefault(require("./checkbox.style"));
 var _checkableInput = _interopRequireDefault(require("../../__internal__/checkable-input/checkable-input.component"));
 var _checkboxSvg = _interopRequireDefault(require("./checkbox-svg.component"));
@@ -49,7 +50,6 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
   inputWidth,
   size,
   tooltipPosition,
-  "data-component": dataComponent = "checkbox",
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
@@ -95,7 +95,8 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
     inputWidth,
     labelWidth,
     ref,
-    ...rest
+    ...rest,
+    "data-component": undefined
   };
   const validationProps = {
     error: contextError || error,
@@ -108,9 +109,6 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
   };
   const marginProps = (0, _useFormSpacing.default)(rest);
   const componentToRender = /*#__PURE__*/_react.default.createElement(_checkbox.default, _extends({
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
     disabled: disabled,
     labelSpacing: labelSpacing,
     inputWidth: inputWidth,
@@ -120,7 +118,10 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
     reverse: reverse,
     size: size,
     applyNewValidation: validationRedesignOptIn
-  }, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, _extends({}, inputProps, validationProps), /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null)));
+  }, marginProps, (0, _tags.default)("checkbox", {
+    "data-element": dataElement,
+    "data-role": dataRole
+  })), /*#__PURE__*/_react.default.createElement(_checkableInput.default, _extends({}, inputProps, validationProps), /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null)));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
@@ -254,7 +255,6 @@ if (process.env.NODE_ENV !== "production") {
     "dangerouslySetInnerHTML": _propTypes.default.shape({
       "__html": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
     }),
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "datatype": _propTypes.default.string,

package/lib/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/lib/components/confirm/confirm.component.js

@@ -122,12 +122,13 @@ const Confirm = ({
     disableClose: disableCancel,
     subtitle: subtitle,
     title: getTitle(),
-    "data-component": "confirm",
     role: "alertdialog",
     size: size,
     showCloseIcon: showCloseIcon,
     topModalOverride: topModalOverride
-  }, ariaProps, rest), children, /*#__PURE__*/_react.default.createElement(_confirm.StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
+  }, ariaProps, rest, {
+    "data-component": "confirm"
+  }), children, /*#__PURE__*/_react.default.createElement(_confirm.StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
 };
 exports.Confirm = Confirm;
 var _default = exports.default = Confirm;

package/lib/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/lib/components/content/content.component.js

@@ -7,6 +7,7 @@ exports.default = exports.Content = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _content = require("./content.style");
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const Content = ({
@@ -22,9 +23,7 @@ const Content = ({
   return /*#__PURE__*/_react.default.createElement(_content.StyledContent, _extends({
     align: align,
     bodyFullWidth: bodyFullWidth
-  }, rest, {
-    "data-component": "content"
-  }), /*#__PURE__*/_react.default.createElement(_content.StyledContentTitle, {
+  }, rest, (0, _tags.default)("content", rest)), /*#__PURE__*/_react.default.createElement(_content.StyledContentTitle, {
     variant: variant,
     inline: inline,
     "data-element": "content-title",

package/lib/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/lib/components/date/date.component.js

@@ -18,6 +18,7 @@ var _dateRange = _interopRequireDefault(require("../date-range/__internal__/date
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -26,7 +27,6 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   adaptiveLabelBreakpoint,
   allowEmptyValue,
   autoFocus,
-  "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
   disabled,
@@ -297,15 +297,16 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.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.default.createElement(_textbox.default, _extends({}, (0, _utils2.filterOutStyledSystemSpacingProps)(rest), {
+  }, (0, _tags.default)("date", {
+    "data-element": dataElement,
+    "data-role": dataRole
+  })), /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, (0, _utils2.filterOutStyledSystemSpacingProps)(rest), {
+    "data-component": "date-input",
     value: computedValue(),
     onBlur: handleBlur,
     onChange: handleChange,
@@ -476,7 +477,6 @@ if (process.env.NODE_ENV !== "production") {
     "dangerouslySetInnerHTML": _propTypes.default.shape({
       "__html": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
     }),
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "datatype": _propTypes.default.string,

package/lib/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/lib/components/decimal/decimal.component.js

@@ -11,6 +11,7 @@ var _textbox = _interopRequireDefault(require("../textbox"));
 var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
 var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -184,7 +185,7 @@ const Decimal = exports.Decimal = /*#__PURE__*/_react.default.forwardRef(({
     "data-component": "decimal",
     id: id,
     ref: ref
-  }, rest)), /*#__PURE__*/_react.default.createElement("input", {
+  }, rest, (0, _tags.default)("decimal", rest))), /*#__PURE__*/_react.default.createElement("input", {
     name: name,
     value: toStandardDecimal(stateValue),
     type: "hidden",
@@ -322,7 +323,6 @@ if (process.env.NODE_ENV !== "production") {
     "dangerouslySetInnerHTML": _propTypes.default.shape({
       "__html": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
     }),
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "datatype": _propTypes.default.string,

package/lib/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/lib/components/definition-list/dd/dd.component.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _definitionList = require("../definition-list.style");
 var _dl = _interopRequireDefault(require("../__internal__/dl.context"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -29,7 +30,7 @@ const Dd = ({
     asSingleColumn: asSingleColumn,
     ddTextAlign: ddTextAlign,
     mb: mb || 2
-  }, rest), children);
+  }, rest, (0, _tags.default)("dd", rest)), children);
 };
 Dd.displayName = "Dd";
 var _default = exports.default = Dd;

package/lib/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/lib/components/definition-list/dl.component.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _definitionList = require("./definition-list.style");
 var _dl = _interopRequireDefault(require("./__internal__/dl.context"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const Dl = ({
@@ -20,10 +21,8 @@ const Dl = ({
 }) => {
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDl, _extends({
     w: w,
-    "data-component": "dl",
-    "data-role": "dl",
     asSingleColumn: asSingleColumn
-  }, rest), /*#__PURE__*/_react.default.createElement(_dl.default.Provider, {
+  }, rest, (0, _tags.default)("dl", rest)), /*#__PURE__*/_react.default.createElement(_dl.default.Provider, {
     value: {
       asSingleColumn,
       dtTextAlign,

package/lib/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/lib/components/definition-list/dt/dt.component.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _definitionList = require("../definition-list.style");
 var _dl = _interopRequireDefault(require("../__internal__/dl.context"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -31,7 +32,7 @@ const Dt = ({
     pr: pr || asSingleColumn ? undefined : 3,
     dtTextAlign: dtTextAlign,
     asSingleColumn: asSingleColumn
-  }, rest), children);
+  }, rest, (0, _tags.default)("dt", rest)), children);
 };
 Dt.displayName = "Dt";
 var _default = exports.default = Dt;

package/lib/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/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -88,18 +88,13 @@ 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.default.createElement(_modal.default, _extends({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
     topModalOverride: topModalOverride,
     restoreFocusOnClose: restoreFocusOnClose
-  }, componentTags), /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+  }, (0, _tags.default)("dialog-full-screen", rest)), /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,

package/lib/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/lib/components/dismissible-box/dismissible-box.component.js

@@ -23,9 +23,8 @@ const DismissibleBox = ({
   const locale = (0, _useLocale.default)();
   return /*#__PURE__*/_react.default.createElement(_dismissibleBox.StyledDismissibleBox, _extends({
     p: "20px 24px 20px 20px",
-    "data-component": "dismissible-box",
     borderRadius: borderRadius
-  }, rest), children, /*#__PURE__*/_react.default.createElement("span", {
+  }, rest, (0, _tags.default)("dismissible-box", rest)), children, /*#__PURE__*/_react.default.createElement("span", {
     "data-element": "close-button-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({
     onClick: onClose,

package/lib/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/lib/components/draggable/__internal__/drop-target.component.js

@@ -8,11 +8,10 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDnd = require("react-dnd");
 var _draggableItem = require("../draggable-item/draggable-item.style");
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const DropTarget = ({
-  "data-element": dataElement,
-  "data-role": dataRole,
   children,
   getOrder,
   ...rest
@@ -27,10 +26,7 @@ const DropTarget = ({
     }
   });
   return /*#__PURE__*/_react.default.createElement(_draggableItem.StyledDraggableContainer, _extends({
-    ref: drop,
-    "data-component": "draggable-container",
-    "data-element": dataElement,
-    "data-role": dataRole
-  }, rest), children);
+    ref: drop
+  }, rest, (0, _tags.default)("draggable-container", rest)), children);
 };
 var _default = exports.default = DropTarget;

package/lib/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/lib/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/lib/components/draggable/draggable-item/draggable-item.component.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDnd = require("react-dnd");
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 var _utils = require("../../../style/utils");
 var _draggableItem = require("./draggable-item.style");
 var _icon = _interopRequireDefault(require("../../icon"));
@@ -19,6 +20,8 @@ const DraggableItem = ({
   children,
   py = 1,
   flexDirection,
+  "data-element": dataElement,
+  "data-role": dataRole = "draggable-item",
   ...rest
 }) => {
   let originalIndex;
@@ -65,19 +68,22 @@ const DraggableItem = ({
   });
   const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_draggableItem.StyledDraggableItem, _extends({
-    "data-element": "draggable",
-    "data-role": "draggable-item",
     isDragging: isDragging,
     ref: node => drag(drop(node)),
     py: py,
     flexDirection: flexDirection
-  }, paddingProps), children, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }, paddingProps, (0, _tags.default)("draggable-item", {
+    "data-element": dataElement,
+    "data-role": dataRole
+  })), children, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "drag"
   }));
 };
 if (process.env.NODE_ENV !== "production") {
   DraggableItem.propTypes = {
     "children": _propTypes.default.node,
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string,
     "findItem": _propTypes.default.func,
     "flexDirection": _propTypes.default.oneOf(["row-reverse", "row"]),
     "id": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,

package/lib/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/lib/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/lib/components/duelling-picklist/duelling-picklist.component.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DuellingPicklist = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _utils = require("../../style/utils");
 var _duellingPicklist = require("./duelling-picklist.style");
 var _picklist = require("./picklist/picklist.component");
@@ -48,10 +49,8 @@ const DuellingPicklist = ({
     return child;
   });
   return /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledDuellingPicklistOverlay, _extends({
-    disabled: disabled,
-    "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, {
+    disabled: disabled
+  }, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _tags.default)("duelling-picklist", 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, {
     "data-element": "picklist-right-label"