carbon-react 150.0.0 → 151.0.0

package/esm/components/fieldset/fieldset.component.js

@@ -1,7 +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, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import { FieldsetStyle, StyledLegend } from "./fieldset.style";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
@@ -28,7 +28,7 @@ export const Fieldset = ({
   return /*#__PURE__*/React.createElement(FieldsetStyle, _extends({
     ref: setRef,
     newValidation: validationRedesignOptIn
-  }, tagComponent("fieldset", rest), rest, marginProps), legend && /*#__PURE__*/React.createElement(StyledLegend, {
+  }, rest, marginProps, tagComponent("fieldset", rest)), legend && /*#__PURE__*/React.createElement(StyledLegend, {
     "data-element": "legend",
     isRequired: required,
     isOptional: isOptional

package/esm/components/file-input/file-input.component.d.ts

@@ -4,7 +4,7 @@ import { ValidationProps } from "../../__internal__/validations";
 import { InputProps } from "../../__internal__/input";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { FileUploadStatusProps } from "./__internal__/file-upload-status";
-export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<InputProps, "id" | "name" | "required">, Omit<TagProps, "data-component">, MarginProps {
+export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<InputProps, "id" | "name" | "required">, TagProps, MarginProps {
     /** Which file format(s) to accept. Will be passed to the underlying HTML input.
      * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept  */
     accept?: string;

package/esm/components/file-input/file-input.component.js

@@ -8,12 +8,13 @@ import useUniqueId from "../../hooks/__internal__/useUniqueId";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 import ValidationMessage from "../../__internal__/validation-message";
 import { StyledHiddenFileInput, StyledFileInputPresentation } from "./file-input.style";
-import { StyledHintText, ErrorBorder } from "../textbox/textbox.style";
+import ErrorBorder from "../textbox/textbox.style";
 import ButtonMinor from "../button-minor";
 import Typography from "../typography";
 import FileUploadStatus from "./__internal__/file-upload-status";
 import Box from "../box";
 import useLocale from "../../hooks/__internal__/useLocale";
+import HintText from "../../__internal__/hint-text";
 const FileInput = /*#__PURE__*/React.forwardRef(({
   accept,
   buttonText,
@@ -114,7 +115,7 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
 
   // allow for single input that a single set of status props is provided
   const filesUploaded = Array.isArray(uploadStatus) ? uploadStatus : [uploadStatus];
-  const input = /*#__PURE__*/React.createElement(React.Fragment, null, inputHint && /*#__PURE__*/React.createElement(StyledHintText, null, inputHint), /*#__PURE__*/React.createElement(Box, {
+  const input = /*#__PURE__*/React.createElement(React.Fragment, null, inputHint && /*#__PURE__*/React.createElement(HintText, null, inputHint), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,

package/esm/components/flat-table/flat-table-body/flat-table-body.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface FlatTableBodyProps extends Omit<TagProps, "data-component"> {
+export interface FlatTableBodyProps extends TagProps {
     /** Array of FlatTableRow. */
     children: React.ReactNode;
 }

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface FlatTableBodyDraggableProps extends Omit<TagProps, "data-component"> {
+export interface FlatTableBodyDraggableProps extends TagProps {
     /** Array of FlatTableRow. */
     children: React.ReactNode;
     /** Callback fired when order is changed */

package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { PaddingProps } from "styled-system";
 import { TableBorderSize, TableCellAlign } from "..";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface FlatTableCellProps extends PaddingProps, Omit<TagProps, "data-component"> {
+export interface FlatTableCellProps extends PaddingProps, TagProps {
     /** Content alignment */
     align?: TableCellAlign;
     /** Cell content */

package/esm/components/flat-table/flat-table-head/flat-table-head.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface FlatTableHeadProps extends Omit<TagProps, "data-component"> {
+export interface FlatTableHeadProps extends TagProps {
     /** Array of FlatTableRow. */
     children: React.ReactNode;
 }

package/esm/components/flat-table/flat-table-header/flat-table-header.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { PaddingProps } from "styled-system";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { TableBorderSize, TableCellAlign } from "..";
-export interface FlatTableHeaderProps extends PaddingProps, Omit<TagProps, "data-component"> {
+export interface FlatTableHeaderProps extends PaddingProps, TagProps {
     /** Content alignment */
     align?: TableCellAlign;
     /** If true sets alternative background color */

package/esm/components/flat-table/flat-table-row/flat-table-row.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { TableBorderSize } from "..";
 import { FlatTableRowDraggableProps } from "./__internal__/flat-table-row-draggable.component";
-export interface FlatTableRowProps extends Omit<TagProps, "data-component"> {
+export interface FlatTableRowProps extends TagProps {
     /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
     bgColor?: string;
     /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { PaddingProps } from "styled-system";
 import { TableBorderSize, TableCellAlign } from "..";
 import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
-export interface FlatTableRowHeaderProps extends PaddingProps, Omit<TagProps, "data-component"> {
+export interface FlatTableRowHeaderProps extends PaddingProps, TagProps {
     /** Content alignment */
     align?: TableCellAlign;
     /** RowHeader content */

package/esm/components/flat-table/flat-table.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface FlatTableProps extends MarginProps, Omit<TagProps, "data-component"> {
+export interface FlatTableProps extends MarginProps, TagProps {
     /** The HTML id of the element that contains a description of this table. */
     ariaDescribedby?: string;
     /** A string to render as the table's caption */

package/esm/components/flat-table/sort/sort.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface SortProps extends Omit<TagProps, "data-component"> {
+export interface SortProps extends TagProps {
     /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
     sortType?: "ascending" | "descending";
     /** Callback fired when the component is clicked */

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps, PaddingProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { FormButtonAlignment } from "./form.config";
-export interface FormProps extends SpaceProps {
+export interface FormProps extends SpaceProps, TagProps {
     /** Alignment of buttons */
     buttonAlignment?: FormButtonAlignment;
     /** Child elements */

package/esm/components/form/form.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, useRef } from "react";
 import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import FormSummary from "./__internal__/form-summary.component";
 import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons } from "./form.style";
 import { formSpacing } from "./form.config";
@@ -39,7 +40,7 @@ export const Form = ({
     noValidate: noValidate,
     height: height,
     isInModal: isInModal
-  }, rest), /*#__PURE__*/React.createElement(StyledFormContent, {
+  }, rest, tagComponent("form", rest)), /*#__PURE__*/React.createElement(StyledFormContent, {
     "data-element": "form-content",
     "data-role": "form-content",
     stickyFooter: stickyFooter,

package/esm/components/global-header/global-header.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { PaddingProps, FlexboxProps } from "styled-system";
-export interface GlobalHeaderProps extends PaddingProps, FlexboxProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface GlobalHeaderProps extends PaddingProps, FlexboxProps, TagProps {
     /** Child elements */
     children?: React.ReactNode;
     /** Logo to render */

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { SpaceProps, GridProps } from "styled-system";
-export interface GridContainerProps extends SpaceProps, GridProps, React.HTMLAttributes<HTMLDivElement> {
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
+export interface GridContainerProps extends SpaceProps, GridProps, React.HTMLAttributes<HTMLDivElement>, TagProps {
     /** Defines the Components to be rendered within the GridContainer. Requires GridItemProps */
     children?: React.ReactNode;
 }

package/esm/components/grid/grid-container/grid-container.component.js

@@ -1,8 +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/tags";
 import StyledGridContainer from "./grid-container.style";
-export const GridContainer = props => /*#__PURE__*/React.createElement(StyledGridContainer, _extends({
-  "data-component": "grid"
-}, props));
+export const GridContainer = props => /*#__PURE__*/React.createElement(StyledGridContainer, _extends({}, props, tagComponent("grid", props)));
 export default GridContainer;

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

@@ -1,6 +1,7 @@
 import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
 import { StyledGridItemProps } from "./grid-item.style";
-export interface GridItemProps extends StyledGridItemProps, React.HTMLAttributes<HTMLDivElement> {
+export interface GridItemProps extends StyledGridItemProps, React.HTMLAttributes<HTMLDivElement>, TagProps {
     /** Defines the Component(s) to be rendered within the GridItem */
     children?: React.ReactNode;
 }

package/esm/components/grid/grid-item/grid-item.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/tags";
 import StyledGridItem from "./grid-item.style";
 export const GridItem = props => {
   const {
@@ -8,7 +9,7 @@ export const GridItem = props => {
     responsiveSettings,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(StyledGridItem, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(StyledGridItem, _extends({}, rest, tagComponent("grid-item", rest), {
     responsiveSettings: responsiveSettings
   }), children);
 };

package/esm/components/grouped-character/grouped-character.component.d.ts

@@ -12,7 +12,7 @@ declare type CustomTarget = {
 export interface CustomEvent extends Omit<React.ChangeEvent<HTMLInputElement>, "target"> {
     target: CustomTarget;
 }
-export interface GroupedCharacterProps extends Omit<TextboxProps, "onChange" | "onBlur"> {
+export interface GroupedCharacterProps extends Omit<TextboxProps, "onChange" | "onBlur" | "data-component"> {
     /** Default input value if component is meant to be used as an uncontrolled component */
     defaultValue?: string;
     /** pattern by which input value should be grouped */

package/esm/components/grouped-character/grouped-character.component.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import Textbox from "../textbox";
 import { generateGroups, toSum } from "./grouped-character.utils";
 import Logger from "../../__internal__/utils/logger";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 const buildCustomTarget = ({
   target
 }, value) => {
@@ -116,7 +117,7 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     ref: ref
-  }));
+  }, tagComponent("grouped-character", rest)));
 });
 if (process.env.NODE_ENV !== "production") {
   GroupedCharacter.propTypes = {
@@ -248,7 +249,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/heading/heading.component.js

@@ -63,11 +63,7 @@ export const Heading = ({
     }, pills);
   };
   const marginProps = filterStyledSystemMarginProps(rest);
-  const dataAttributes = {
-    "data-element": rest["data-element"],
-    "data-role": rest["data-role"]
-  };
-  return title ? /*#__PURE__*/React.createElement(StyledHeading, _extends({}, tagComponent("heading", dataAttributes), marginProps), /*#__PURE__*/React.createElement(StyledHeader, {
+  return title ? /*#__PURE__*/React.createElement(StyledHeading, _extends({}, tagComponent("heading", rest), marginProps), /*#__PURE__*/React.createElement(StyledHeader, {
     "data-element": "header-container",
     divider: divider,
     subheader: !!subheader,

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

@@ -1,8 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { IconType } from "../icon";
 import { TooltipPositions } from "../tooltip/tooltip.config";
-export interface HelpProps extends MarginProps {
+export interface HelpProps extends MarginProps, TagProps {
     /** Overrides the default 'as' attribute of the Help component */
     as?: keyof JSX.IntrinsicElements;
     /** Aria label */

package/esm/components/help/help.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, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import Icon from "../icon";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledHelp from "./help.style";
 import Events from "../../__internal__/utils/helpers/events";
 import { TooltipContext } from "../../__internal__/tooltip-provider";
@@ -61,15 +61,14 @@ const Help = ({
     onFocus: handleFocusBlur(true),
     onBlur: handleFocusBlur(false),
     onMouseOver: handleFocusBlur(true),
-    onMouseLeave: handleFocusBlur(false)
-  }, tagComponent("help", rest), {
+    onMouseLeave: handleFocusBlur(false),
     tabIndex: tabIndex
   }, href ? {
     target: "_blank",
     rel: "noopener noreferrer"
   } : {
     role: "button"
-  }, filterStyledSystemMarginProps(rest), rest), /*#__PURE__*/React.createElement(Icon, {
+  }, filterStyledSystemMarginProps(rest), rest, tagComponent("help", rest)), /*#__PURE__*/React.createElement(Icon, {
     "aria-hidden": true,
     type: type,
     tooltipMessage: children,
@@ -87,6 +86,8 @@ if (process.env.NODE_ENV !== "production") {
     "ariaLabel": PropTypes.string,
     "as": PropTypes.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "search", "section", "select", "set", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]),
     "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "helpId": PropTypes.string,
     "href": PropTypes.string,
     "isFocused": PropTypes.bool,

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

@@ -1,5 +1,6 @@
 import { MarginProps } from "styled-system";
-export interface HrProps extends MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface HrProps extends MarginProps, TagProps {
     /** Set whether the component should be recognised by assistive technologies */
     "aria-hidden"?: "true" | "false";
     /** Breakpoint for adaptive left and right margins (below the breakpoint they go to 0).

package/esm/components/hr/hr.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 StyledHr from "./hr.style";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 const Hr = ({
@@ -20,19 +21,19 @@ const Hr = ({
   }
   return /*#__PURE__*/React.createElement(StyledHr, _extends({
     "aria-hidden": ariaHidden,
-    "data-component": "hr",
-    "data-role": "hr",
     height: height,
     ml: marginLeft,
     mr: marginRight,
     mt: rest.mt || 3,
     mb: rest.mb || 3
-  }, rest));
+  }, rest, tagComponent("hr", rest)));
 };
 if (process.env.NODE_ENV !== "production") {
   Hr.propTypes = {
     "adaptiveMxBreakpoint": PropTypes.number,
     "aria-hidden": PropTypes.oneOf(["false", "true"]),
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "height": PropTypes.oneOf(["large", "medium", "small"]),
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,

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

@@ -5,7 +5,7 @@ import { StyledIconProps } from "./icon.style";
 import { IconType } from "./icon-type";
 import { TooltipPositions } from "../tooltip/tooltip.config";
 export declare type LegacyIconTypes = "help" | "maintenance" | "new" | "success" | "messages";
-export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, Omit<TagProps, "data-component"> {
+export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, TagProps {
     /** Set whether icon should be recognised by assistive technologies */
     "aria-hidden"?: boolean;
     /** Aria label for accessibility purposes */

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { IconProps } from "../icon";
-export interface IconButtonProps extends SpaceProps {
+export interface IconButtonProps extends SpaceProps, TagProps {
     /** Prop to specify the aria-label of the icon-button component */
     "aria-label"?: string;
     /** Icon meant to be rendered, should be an Icon component */
@@ -18,6 +19,8 @@ export interface IconButtonProps extends SpaceProps {
     disabled?: boolean;
     /** Callback triggered on click */
     onClick?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** @private @internal @ignore */
+    "data-component"?: string;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/esm/components/icon-button/icon-button.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, useCallback, useContext } from "react";
 import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import Events from "../../__internal__/utils/helpers/events";
 import StyledIconButton from "./icon-button.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
@@ -38,7 +39,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     onClick: onClick,
     ref: setRefs,
     disabled: isDisabled
-  }), /*#__PURE__*/React.createElement(TooltipProvider, {
+  }, tagComponent(rest["data-component"] ?? "icon-button", rest)), /*#__PURE__*/React.createElement(TooltipProvider, {
     disabled: isDisabled,
     focusable: false,
     target: internalRef
@@ -48,6 +49,9 @@ if (process.env.NODE_ENV !== "production") {
   IconButton.propTypes = {
     "aria-label": PropTypes.string,
     "children": PropTypes.element.isRequired,
+    "data-component": PropTypes.string,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "disabled": PropTypes.bool,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,

package/esm/components/image/image.component.js

@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { StyledImage } from "./image.style";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 export const Image = ({
   alt,
   decorative = false,
@@ -26,7 +27,7 @@ export const Image = ({
     right: right,
     bottom: bottom,
     left: left
-  }, rest), children);
+  }, rest, tagComponent("image", rest)), children);
 };
 Image.displayName = "Image";
 export default Image;

package/esm/components/image/image.style.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { MarginProps, BackgroundProps, LayoutProps, PaddingProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 export declare type PositionProps = "absolute" | "fixed" | "relative" | "static" | "sticky";
-export interface StyledImageProps extends BackgroundProps, LayoutProps, MarginProps, PaddingProps {
+export interface StyledImageProps extends BackgroundProps, LayoutProps, MarginProps, PaddingProps, TagProps {
     /** HTML alt property to display when an img fails to load */
     alt?: string;
     /** Prop to specify if the image is decorative  */

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { StyledContentContainerProps, StyledInlineInputsProps } from "./inline-inputs.style";
-export interface InlineInputsProps extends MarginProps, StyledContentContainerProps, StyledInlineInputsProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface InlineInputsProps extends MarginProps, StyledContentContainerProps, StyledInlineInputsProps, TagProps {
     /** Breakpoint for adaptive label (inline label change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** Children elements */

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

@@ -6,6 +6,7 @@ import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from ".
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 const columnWrapper = (children, gutter) => {
   return React.Children.map(children, input => {
     return /*#__PURE__*/React.createElement(StyledInlineInput, {
@@ -55,12 +56,10 @@ const InlineInputs = ({
   }, [required]);
   return /*#__PURE__*/React.createElement(StyledInlineInputs, _extends({
     gutter: gutter,
-    "data-component": "inline-inputs",
-    "data-role": "inline-inputs",
     labelWidth: labelWidth,
     labelInline: inlineLabel,
     ref: ref
-  }, marginProps), renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
+  }, marginProps, tagComponent("inline-inputs", rest)), renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
     "data-role": "inline-inputs-container",

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { IconType } from "../icon";
 import { StyledLinkProps } from "./link.style";
-export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface LinkProps extends StyledLinkProps, React.AriaAttributes, TagProps {
     /** An href for an anchor tag. */
     href?: string;
     /** An icon to display next to the link. */

package/esm/components/link/link.component.js

@@ -162,6 +162,8 @@ if (process.env.NODE_ENV !== "production") {
     "ariaLabel": PropTypes.string,
     "children": PropTypes.node,
     "className": PropTypes.string,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "disabled": PropTypes.bool,
     "hasFocus": PropTypes.bool,
     "href": PropTypes.string,

package/esm/components/link-preview/link-preview.component.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 interface ImageShape {
     /** The url string to be passed to image src */
     url: string;
     /** The string to be passed to image alt */
     alt?: string;
 }
-export interface LinkPreviewProps {
+export interface LinkPreviewProps extends TagProps {
     /** Used to set the root element to either an anchor link or div container */
     as?: "a" | "div";
     /** The description to be displayed */

package/esm/components/link-preview/link-preview.component.js

@@ -7,6 +7,7 @@ import Preview from "../preview";
 import IconButton from "../icon-button";
 import Icon from "../icon";
 import Placeholder from "./__internal__/placeholder.component";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 const SCHEME_SEPARATOR = "://";
 export const LinkPreview = ({
   as,
@@ -40,10 +41,9 @@ export const LinkPreview = ({
     rel: "noopener noreferrer"
   } : {};
   return /*#__PURE__*/React.createElement(StyledLinkPreview, _extends({
-    "data-role": "link-preview",
     as: loadingState ? "div" : as,
     tabIndex: loadingState || as === "div" ? -1 : 0
-  }, linkProps, rest), imageProps().src ? /*#__PURE__*/React.createElement(Image, imageProps()) : /*#__PURE__*/React.createElement(Placeholder, null), /*#__PURE__*/React.createElement(StyledPreviewWrapper, {
+  }, linkProps, rest, tagComponent("link-preview", rest)), imageProps().src ? /*#__PURE__*/React.createElement(Image, imageProps()) : /*#__PURE__*/React.createElement(Placeholder, null), /*#__PURE__*/React.createElement(StyledPreviewWrapper, {
     isLoading: loadingState
   }, /*#__PURE__*/React.createElement(Preview, {
     loading: loadingState,

package/esm/components/loader-star/loader-star.component.d.ts

@@ -1,5 +1,5 @@
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export interface LoaderStarProps extends Omit<TagProps, "data-component"> {
+export interface LoaderStarProps extends TagProps {
     /**
      * The loaderStarLabel prop allows a specific label to be set.
      * This label will be present if the user has `reduce-motion` enabled and will also be available to assistive technologies.

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

@@ -21,7 +21,6 @@ const MenuDivider = /*#__PURE__*/React.forwardRef(({
 });
 if (process.env.NODE_ENV !== "production") {
   MenuDivider.propTypes = {
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "size": PropTypes.oneOf(["default", "large"])

package/esm/components/menu/menu-full-screen/menu-full-screen.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface MenuFullscreenProps extends Omit<TagProps, "data-component"> {
+export interface MenuFullscreenProps extends TagProps {
     /** Accessible name that conveys the purpose of the menu   */
     "aria-label"?: string;
     /** The child elements to render */

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

@@ -3,7 +3,7 @@ import { FlexboxProps, LayoutProps, MaxWidthProps, PaddingProps } from "styled-s
 import { IconType } from "../../icon";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export declare type VariantType = "default" | "alternate";
-interface MenuItemBaseProps extends Omit<TagProps, "data-component">, Pick<LayoutProps, "width" | "maxWidth" | "minWidth">, FlexboxProps, PaddingProps {
+interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWidth" | "minWidth">, FlexboxProps, PaddingProps {
     /** onClick handler */
     onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Defines which direction the submenu will hang eg. left/right */

package/esm/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -47,7 +47,6 @@ if (process.env.NODE_ENV !== "production") {
   MenuSegmentTitle.propTypes = {
     "as": PropTypes.oneOf(["h2", "h3", "h4", "h5", "h6"]),
     "children": PropTypes.node,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "text": PropTypes.string.isRequired,