carbon-react 150.1.0 → 151.0.0

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

@@ -187,6 +187,8 @@ if (process.env.NODE_ENV !== "production") {
   SimpleColorPicker.propTypes = {
     "children": PropTypes.node,
     "childWidth": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     "legend": PropTypes.string.isRequired,

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

@@ -1,17 +1,14 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { IconType } from "../icon";
-export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, MarginProps, TagProps {
     /** Set align of the rendered content */
     align?: "left" | "right";
     /** Button type: "primary" | "secondary" */
     buttonType?: "primary" | "secondary";
     /** The additional button to display. */
     children: React.ReactNode;
-    /** A custom value for the data-element attribute */
-    "data-element"?: string;
-    /** A custom value for the data-role attribute */
-    "data-role"?: string;
     /** Prop to specify an aria-label for the component */
     "aria-label"?: string;
     /** Gives the button a disabled state. */

package/esm/components/step-flow/step-flow.component.js

@@ -116,7 +116,6 @@ if (process.env.NODE_ENV !== "production") {
     "aria-labelledby": PropTypes.string,
     "category": PropTypes.string,
     "currentStep": PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]).isRequired,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface StepSequenceItemProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface StepSequenceItemProps extends TagProps {
     /** Aria label */
     ariaLabel?: string;
     /** Hidden label to be displayed if item is complete */

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { StyledStepSequenceItem, StyledStepSequenceItemContent, StyledStepSequenceItemIndicator, StyledStepSequenceItemHiddenLabel } from "./step-sequence-item.style";
 import Icon from "../../icon";
 import { StepSequenceContext } from "../step-sequence.component";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 export const StepSequenceItem = ({
   hideIndicator = false,
   indicator,
@@ -33,11 +34,10 @@ export const StepSequenceItem = ({
     return null;
   };
   return /*#__PURE__*/React.createElement(StyledStepSequenceItem, _extends({
-    "data-component": "step-sequence-item",
     orientation: orientation,
     status: status,
     key: `step-seq-item-${indicator}`,
     "aria-label": ariaLabel
-  }, rest), hiddenLabel(), /*#__PURE__*/React.createElement(StyledStepSequenceItemContent, null, icon(), /*#__PURE__*/React.createElement("span", null, children)));
+  }, rest, tagComponent("step-sequence-item", rest)), hiddenLabel(), /*#__PURE__*/React.createElement(StyledStepSequenceItemContent, null, icon(), /*#__PURE__*/React.createElement("span", null, children)));
 };
 export default StepSequenceItem;

package/esm/components/step-sequence/step-sequence.component.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export declare const StepSequenceContext: React.Context<{
     orientation: "horizontal" | "vertical";
 }>;
-export interface StepSequenceProps extends SpaceProps {
+export interface StepSequenceProps extends SpaceProps, TagProps {
     /** Step sequence items to be rendered */
     children: React.ReactNode;
     /** The direction that step sequence items should be rendered */

package/esm/components/step-sequence/step-sequence.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 from "react";
 import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import StyledStepSequence from "./step-sequence.style";
 export const StepSequenceContext = /*#__PURE__*/React.createContext({
   orientation: "horizontal"
@@ -11,10 +12,9 @@ export const StepSequence = ({
   ...props
 }) => {
   return /*#__PURE__*/React.createElement(StyledStepSequence, _extends({
-    "data-component": "step-sequence",
     orientation: orientation,
     p: 0
-  }, props), /*#__PURE__*/React.createElement(StepSequenceContext.Provider, {
+  }, props, tagComponent("step-sequence", props)), /*#__PURE__*/React.createElement(StepSequenceContext.Provider, {
     value: {
       orientation
     }

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

@@ -1,13 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
-export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
-    /** 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;
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface SwitchProps extends CommonCheckableInputProps, MarginProps, TagProps {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** Set the default value of the Switch if component is meant to be used as uncontrolled */

package/esm/components/switch/switch.component.js

@@ -42,7 +42,6 @@ const Switch = /*#__PURE__*/React.forwardRef(({
   error,
   warning,
   info,
-  "data-component": dataComponent = "switch",
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
@@ -75,7 +74,7 @@ const Switch = /*#__PURE__*/React.forwardRef(({
   const shouldValidationBeOnLabel = labelInline && !reverse ? true : validationOnLabel;
   const marginProps = useFormSpacing(rest);
   const switchStyleProps = {
-    "data-component": dataComponent,
+    "data-component": "switch",
     "data-role": dataRole,
     "data-element": dataElement,
     checked: isControlled ? checked : checkedInternal,
@@ -127,13 +126,14 @@ const Switch = /*#__PURE__*/React.forwardRef(({
     ref,
     required,
     isOptional,
-    ...rest
+    ...rest,
+    "data-component": undefined
   };
 
   // Created separate const declarations to help when removing the old validation.
   // Not all props utilised by the old validation work or will be needed with the new validation.
   const switchStylePropsForNewValidation = {
-    "data-component": dataComponent,
+    "data-component": "switch",
     "data-role": dataRole,
     "data-element": dataElement,
     checked: isControlled ? checked : checkedInternal,
@@ -368,7 +368,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/tabs/tab/tab.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
-export interface TabProps extends PaddingProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
+export interface TabProps extends PaddingProps, TagProps {
     title?: string;
     /** A unique ID to identify this specific tab. */
     tabId: string;

package/esm/components/tabs/tab/tab.component.js

@@ -70,6 +70,6 @@ export const Tab = ({
     isTabSelected: isTabSelected,
     "aria-labelledby": ariaLabelledby,
     position: position
-  }, tagComponent("tab", rest), rest), !href && children));
+  }, rest, tagComponent("tab", rest)), !href && children));
 };
 export default Tab;

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import Tab from "./tab";
-export interface TabsProps extends MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface TabsProps extends MarginProps, TagProps {
     /** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */
     renderHiddenTabs?: boolean;
     /** Allows manual control over the currently selected tab. */

package/esm/components/tabs/tabs.component.js

@@ -262,10 +262,9 @@ const Tabs = ({
   };
   return /*#__PURE__*/React.createElement(StyledTabs, _extends({
     position: isInSidebar ? "left" : position,
-    "data-role": "tabs"
-  }, tagComponent("tabs", rest), {
+    "data-role": "tabs",
     isInSidebar: isInSidebar,
     headerWidth: headerWidth
-  }, rest), renderTabHeaders(), renderTabs());
+  }, rest, tagComponent("tabs", rest)), renderTabHeaders(), renderTabs());
 };
 export { Tabs, Tab };

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

@@ -2,17 +2,12 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { IconType } from "../icon";
 import { ValidationProps } from "../../__internal__/validations";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { CommonInputProps } from "../../__internal__/input";
 import { BorderRadiusType } from "../box/box.component";
-export interface TextareaProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size"> {
+export interface TextareaProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size">, TagProps {
     /** Prop to specify the aria-labelledby property of the component */
     "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;
     /** id of the input */
     id?: string;
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */

package/esm/components/textarea/textarea.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, { useRef, useEffect, useContext, useCallback, useState } from "react";
 import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import { InputPresentation } from "../../__internal__/input";
 import FormField from "../../__internal__/form-field";
 import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
@@ -53,7 +54,6 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   labelWidth = 30,
   tooltipPosition,
   value,
-  "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
@@ -220,12 +220,12 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(StyledTextarea, _extends({
     labelInline: labelInlineWithNewValidation,
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
     hasIcon: hasIconInside,
     minHeight: textareaMinHeight
-  }, marginProps), /*#__PURE__*/React.createElement(FormField, {
+  }, marginProps, tagComponent("textarea", {
+    "data-element": dataElement,
+    "data-role": dataRole
+  })), /*#__PURE__*/React.createElement(FormField, {
     fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,
     error: error,
@@ -390,7 +390,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/textbox/textbox.component.d.ts

@@ -3,19 +3,14 @@ import { MarginProps } from "styled-system";
 import { IconType } from "../icon";
 import { CommonInputProps } from "../../__internal__/input";
 import { ValidationProps } from "../../__internal__/validations";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export declare const ALIGN_DEFAULT = "left";
 export declare const SIZE_DEFAULT = "medium";
 export declare const LABEL_WIDTH_DEFAULT = 30;
 export declare const LABEL_VALIDATION_DEFAULT = false;
-export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size" | "inputBorderRadius"> {
+export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size" | "inputBorderRadius">, TagProps {
     /** Prop to specify the aria-labelledby property of the component */
     "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;
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** Integer to determine a timeout for the deferred callback */
@@ -96,6 +91,8 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     isOptional?: boolean;
     /** The id attribute for the validation tooltip */
     tooltipId?: string;
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 export interface TextboxProps extends CommonTextboxProps {
     /** Content to be rendered next to the input */

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

@@ -12,6 +12,7 @@ export const FlexTileDivider = () => {
     m: "0px 0px -1px 0px"
   }, /*#__PURE__*/React.createElement(Hr, {
     "aria-hidden": "true",
+    "data-role": "hr",
     m: 0
   }));
 };

package/esm/components/tile-select/tile-select-group/tile-select-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 { TileSelectDeselectEvent } from "../tile-select.component";
-export interface TileSelectGroupProps extends MarginProps {
+export interface TileSelectGroupProps extends MarginProps, TagProps {
     /** The TileSelect components to be rendered in the group */
     children: React.ReactNode;
     /** The content for the TileSelectGroup Legend */

package/esm/components/tile-select/tile-select.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 export interface TileSelectDeselectEvent {
     target: {
         name?: string;
@@ -8,7 +9,7 @@ export interface TileSelectDeselectEvent {
         checked: false;
     };
 }
-export interface TileSelectProps extends MarginProps {
+export interface TileSelectProps extends MarginProps, TagProps {
     /** title of the TileSelect */
     title?: React.ReactNode;
     /** adornment to be rendered next to the title */

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

@@ -32,6 +32,8 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
   accordionContent,
   accordionControl,
   accordionExpanded,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }, ref) => {
   const l = useLocale();
@@ -68,7 +70,10 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement(StyledTileSelectContainer, _extends({
     checked: checked,
     disabled: disabled
-  }, tagComponent("tile-select", rest), filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledFocusWrapper, {
+  }, tagComponent("tile-select", {
+    "data-element": dataElement,
+    "data-role": dataRole
+  }), filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledFocusWrapper, {
     "data-role": "focus-wrapper",
     hasFocus: hasFocus,
     checked: checked
@@ -132,6 +137,8 @@ if (process.env.NODE_ENV !== "production") {
     "additionalInformation": PropTypes.node,
     "checked": PropTypes.bool,
     "customActionButton": PropTypes.func,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "description": PropTypes.node,
     "disabled": PropTypes.bool,
     "footer": PropTypes.node,

package/esm/components/time/__internal__/time-toggle/time-toggle.component.d.ts

@@ -2,11 +2,11 @@ import React from "react";
 import { TagProps } from "../../../../__internal__/utils/helpers/tags";
 import { ToggleValue } from "../../time.component";
 export interface ToggleDataProps {
-    wrapperProps?: Omit<TagProps, "data-component">;
-    amToggleProps?: Omit<TagProps, "data-component">;
-    pmToggleProps?: Omit<TagProps, "data-component">;
+    wrapperProps?: TagProps;
+    amToggleProps?: TagProps;
+    pmToggleProps?: TagProps;
 }
-export interface ToggleProps extends Omit<TagProps, "data-component"> {
+export interface ToggleProps extends TagProps {
     size?: "small" | "medium" | "large";
     onChange: (pressedValue: ToggleValue) => void;
     toggleValue: ToggleValue;

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

@@ -19,7 +19,7 @@ export interface TimeInputEvent {
         value: TimeValue;
     };
 }
-interface TimeInputProps extends Omit<TagProps, "data-component">, Omit<ValidationProps, "info"> {
+interface TimeInputProps extends TagProps, Omit<ValidationProps, "info"> {
     /** Set an id value on the input */
     id?: string;
     /** Override the default label text */
@@ -27,7 +27,7 @@ interface TimeInputProps extends Omit<TagProps, "data-component">, Omit<Validati
     /** Override the default aria-label text */
     "aria-label"?: string;
 }
-export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps {
+export interface TimeProps extends TagProps, MarginProps {
     /** Label text for the component */
     label?: string;
     /** Label alignment */

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

@@ -3,7 +3,7 @@ import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 declare type ToastVariants = "error" | "info" | "success" | "warning" | "notice" | "neutral" | "notification";
 declare type AlignOptions = "left" | "center" | "right";
 declare type AlignYOptions = "top" | "center" | "bottom";
-export interface ToastProps {
+export interface ToastProps extends TagProps {
     /** Sets the horizontal alignment of the component. */
     align?: AlignOptions;
     /** Sets the vertical alignment of the component */
@@ -14,8 +14,6 @@ export interface ToastProps {
     variant?: ToastVariants;
     /** Custom id  */
     id?: string;
-    /** Component name */
-    "data-component"?: string;
     /** Determines if the Toast is open. */
     open?: boolean;
     /** Callback for when dismissed. */

package/esm/components/toast/toast.component.js

@@ -125,7 +125,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       alignY: alignY,
       isNotice: isNotice,
       isNotification: isNotification
-    }, tagComponent(restProps["data-component"] || "toast", restProps), {
+    }, tagComponent("toast", restProps), {
       variant: toastVariant,
       id: id,
       maxWidth: maxWidth,
@@ -172,7 +172,8 @@ if (process.env.NODE_ENV !== "production") {
       "data-element": PropTypes.string,
       "data-role": PropTypes.string
     }),
-    "data-component": PropTypes.string,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "disableAutoFocus": PropTypes.bool,
     "id": PropTypes.string,
     "maxWidth": PropTypes.string,

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { TooltipPositions } from "./tooltip.config";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 export declare type InputSizes = "small" | "medium" | "large";
-export interface TooltipProps {
+export interface TooltipProps extends TagProps {
     /** The message to be displayed within the tooltip */
     message: React.ReactNode;
     /** The id attribute to use for the tooltip */

package/esm/components/tooltip/tooltip.component.js

@@ -186,6 +186,8 @@ if (process.env.NODE_ENV !== "production") {
   Tooltip.propTypes = {
     "bgColor": PropTypes.string,
     "children": PropTypes.element.isRequired,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "flipOverrides": PropTypes.arrayOf(PropTypes.oneOf(["bottom", "left", "right", "top"])),
     "fontColor": PropTypes.string,
     "id": PropTypes.string,

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

@@ -63,6 +63,8 @@ export interface TypographyProps extends SpaceProps, TagProps {
      * @ignore
      * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 export declare const Typography: {
     ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, className, ...rest }: TypographyProps): React.JSX.Element;

package/esm/components/vertical-divider/vertical-divider.component.d.ts

@@ -1,6 +1,7 @@
 import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 declare type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
-export interface VerticalDividerProps extends SpaceProps {
+export interface VerticalDividerProps extends SpaceProps, TagProps {
     /** Shorthand for the height attribute */
     h?: number | string;
     /** Height attribute of the component */

package/esm/components/vertical-divider/vertical-divider.component.js

@@ -3,6 +3,7 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import MenuContext from "../menu/__internal__/menu.context";
 import { StyledVerticalWrapper, StyledDivider } from "./vertical-divider.style";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 const VerticalDivider = ({
   h,
   height,
@@ -15,7 +16,6 @@ const VerticalDivider = ({
     inMenu
   } = useContext(MenuContext);
   return /*#__PURE__*/React.createElement(StyledVerticalWrapper, _extends({
-    "data-component": "vertical-divider",
     "data-role": "vertical-divider",
     p: props.p || 3,
     height: h || height,
@@ -23,7 +23,7 @@ const VerticalDivider = ({
   }, props, {
     as: inMenu ? "li" : "div",
     "aria-hidden": inMenu ?? ariaHidden
-  }), /*#__PURE__*/React.createElement(StyledDivider, {
+  }, tagComponent("vertical-divider", props)), /*#__PURE__*/React.createElement(StyledDivider, {
     "data-role": "divider",
     tint: tint
   }));
@@ -31,6 +31,8 @@ const VerticalDivider = ({
 if (process.env.NODE_ENV !== "production") {
   VerticalDivider.propTypes = {
     "aria-hidden": PropTypes.bool,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "displayInline": PropTypes.bool,
     "h": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     "height": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

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

@@ -10,6 +10,7 @@ var _invariant = _interopRequireDefault(require("invariant"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _accordion = _interopRequireDefault(require("../accordion.component"));
 var _accordion2 = require("../accordion.style");
+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; }
@@ -59,9 +60,7 @@ const AccordionGroup = ({
       focusAccordion(ev, refs.length - 1);
     }
   }, [focusAccordion, refs]);
-  return /*#__PURE__*/_react.default.createElement(_accordion2.StyledAccordionGroup, _extends({}, rest, {
-    "data-component": "accordion-group"
-  }), filteredChildren.map((child, index) =>
+  return /*#__PURE__*/_react.default.createElement(_accordion2.StyledAccordionGroup, _extends({}, rest, (0, _tags.default)("accordion-group", rest)), filteredChildren.map((child, index) =>
   /*#__PURE__*/
   // casted to ReactElement as there is no overload for an FunctionComponentElement in cloneElement
   _react.default.cloneElement(child, {

package/lib/components/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 */