carbon-react 150.1.0 → 151.1.0

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

@@ -1,6 +1,5 @@
 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, { useCallback, useEffect, useRef, useState, useContext } from "react";
-import PropTypes from "prop-types";
 import invariant from "invariant";
 import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem, StyledMenuItemInnerText, StyledMenuItemOuterContainer, StyledMenuItemWrapper } from "../action-popover.style";
 import Events from "../../../__internal__/utils/helpers/events";

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

@@ -1,6 +1,5 @@
 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, { useCallback, useMemo, useContext, useState } from "react";
-import PropTypes from "prop-types";
 import invariant from "invariant";
 import { Menu } from "../action-popover.style";
 import Events from "../../../__internal__/utils/helpers/events";
@@ -137,27 +136,5 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
     role: "list"
   }, rest), clonedChildren);
 });
-if (process.env.NODE_ENV !== "production") {
-  ActionPopoverMenu.propTypes = {
-    "children": PropTypes.node,
-    "data-element": PropTypes.string,
-    "focusIndex": PropTypes.number,
-    "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
-    "isASubmenu": PropTypes.bool,
-    "isOpen": PropTypes.bool,
-    "menuID": PropTypes.string,
-    "parentID": PropTypes.string,
-    "placement": PropTypes.oneOf(["bottom", "top"]),
-    "role": PropTypes.string,
-    "setFocusIndex": PropTypes.func,
-    "setOpen": PropTypes.func,
-    "style": PropTypes.shape({
-      "bottom": PropTypes.string,
-      "left": PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-      "right": PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-      "top": PropTypes.string
-    })
-  };
-}
 ActionPopoverMenu.displayName = "ActionPopoverMenu";
 export default ActionPopoverMenu;

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

@@ -1,6 +1,5 @@
 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 { MenuButtonOverrideWrapper } from "../action-popover.style";
 import Button from "../../button";
 export const ActionPopoverMenuButton = ({

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

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

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

@@ -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, useCallback, useMemo, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
-import PropTypes from "prop-types";
 import invariant from "invariant";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 import { MenuButton, ButtonIcon, StyledButtonIcon } from "./action-popover.style";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
@@ -15,7 +15,7 @@ import useModalManager from "../../hooks/__internal__/useModalManager";
 import { findFirstFocusableItem, findLastFocusableItem, getItems, checkChildrenForString } from "./__internal__/action-popover-utils";
 const onOpenDefault = () => {};
 const onCloseDefault = () => {};
-const ActionPopover = /*#__PURE__*/forwardRef(({
+export const ActionPopover = /*#__PURE__*/forwardRef(({
   children,
   id,
   onOpen = onOpenDefault,
@@ -200,13 +200,11 @@ const ActionPopover = /*#__PURE__*/forwardRef(({
   };
   return /*#__PURE__*/React.createElement(MenuButton, _extends({
     id: parentID,
-    "data-component": "action-popover-wrapper",
-    "data-role": "action-popover-wrapper",
     onKeyDown: onButtonKeyDown,
     onClick: onButtonClick,
     isOpen,
     ref: buttonRef
-  }, rest), menuButton(menuID), /*#__PURE__*/React.createElement(ActionPopoverContext.Provider, {
+  }, rest, tagComponent("action-popover-wrapper", rest)), menuButton(menuID), /*#__PURE__*/React.createElement(ActionPopoverContext.Provider, {
     value: {
       setOpenPopover: setOpen,
       focusButton,
@@ -221,175 +219,4 @@ const ActionPopover = /*#__PURE__*/forwardRef(({
     ref: menu
   }, menuProps), children))));
 });
-if (process.env.NODE_ENV !== "production") {
-  ActionPopover.propTypes = {
-    "aria-describedby": PropTypes.string,
-    "aria-label": PropTypes.string,
-    "aria-labelledby": PropTypes.string,
-    "children": PropTypes.node,
-    "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
-    "id": PropTypes.string,
-    "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
-      "__@toStringTag": PropTypes.string.isRequired,
-      "description": PropTypes.string,
-      "toString": PropTypes.func.isRequired,
-      "valueOf": PropTypes.func.isRequired
-    }), PropTypes.string]),
-    "onClose": PropTypes.func,
-    "onOpen": PropTypes.func,
-    "placement": PropTypes.oneOf(["bottom", "top"]),
-    "renderButton": PropTypes.func,
-    "rightAlignMenu": PropTypes.bool,
-    "submenuPosition": PropTypes.oneOf(["left", "right"])
-  };
-}
-export { ActionPopover };
 export default ActionPopover;

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

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

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

@@ -1,6 +1,5 @@
 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, useCallback, useRef } from "react";
-import PropTypes from "prop-types";
 import { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle } from "./advanced-color-picker.style";
 import { SimpleColorPicker, SimpleColor } from "../simple-color-picker";
 import Events from "../../__internal__/utils/helpers/events";
@@ -9,6 +8,7 @@ import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { Dt, Dd } from "../definition-list";
 import Logger from "../../__internal__/utils/logger";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 let deprecateUncontrolledWarnTriggered = false;
 export const AdvancedColorPicker = ({
   "aria-describedby": ariaDescribedBy,
@@ -121,9 +121,7 @@ export const AdvancedColorPicker = ({
   }
   return /*#__PURE__*/React.createElement(StyledAdvancedColorPickerWrapper, _extends({
     m: "15px auto auto 15px"
-  }, filterStyledSystemMarginProps(props), {
-    "data-role": "advanced-color-picker-wrapper"
-  }), /*#__PURE__*/React.createElement(StyledAdvancedColorPickerCell, {
+  }, filterStyledSystemMarginProps(props), tagComponent("advanced-color-picker", props)), /*#__PURE__*/React.createElement(StyledAdvancedColorPickerCell, {
     "data-element": "color-picker-cell",
     "aria-label": l.advancedColorPicker.ariaLabel(),
     "aria-describedby": descriptionId.current,

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

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

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

@@ -1,6 +1,5 @@
 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 Dialog from "../dialog";
 export const Alert = ({
   children,
@@ -9,10 +8,11 @@ export const Alert = ({
   closeButtonDataProps,
   ...rest
 }) => /*#__PURE__*/React.createElement(Dialog, _extends({
-  "data-component": "alert",
   role: "alertdialog",
   size: size,
   topModalOverride: topModalOverride,
   closeButtonDataProps: closeButtonDataProps
-}, rest), children);
+}, rest, {
+  "data-component": "alert"
+}), children);
 export default Alert;

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import StyledNavigationItem from "./anchor-navigation-item.style";
 const AnchorNavigationItem = /*#__PURE__*/React.forwardRef(({
   children,
@@ -18,24 +17,5 @@ const AnchorNavigationItem = /*#__PURE__*/React.forwardRef(({
   href: href,
   "data-element": "anchor-navigation-item"
 }, children)));
-if (process.env.NODE_ENV !== "production") {
-  AnchorNavigationItem.propTypes = {
-    "children": PropTypes.node,
-    "href": PropTypes.string,
-    "isSelected": PropTypes.bool,
-    "onClick": PropTypes.func,
-    "onKeyDown": PropTypes.func,
-    "tabIndex": PropTypes.number,
-    "target": PropTypes.shape({
-      "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
-        if (props[propName] == null) {
-          return new Error("Prop '" + propName + "' is required but wasn't specified");
-        } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-          return new Error("Expected prop '" + propName + "' to be of type Element");
-        }
-      }]).isRequired
-    })
-  };
-}
 AnchorNavigationItem.displayName = "AnchorNavigationItem";
 export default AnchorNavigationItem;

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

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

package/esm/components/anchor-navigation/anchor-navigation.component.js

@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import PropTypes from "prop-types";
 import { isFragment } from "react-is";
 import invariant from "invariant";
 import throttle from "lodash/throttle";
@@ -123,13 +122,5 @@ const AnchorNavigation = ({
     onKeyDown: event => handleKeyDown(event, index)
   }))), /*#__PURE__*/React.createElement(StyledContent, null, children));
 };
-if (process.env.NODE_ENV !== "production") {
-  AnchorNavigation.propTypes = {
-    "children": PropTypes.node,
-    "data-element": PropTypes.string,
-    "data-role": PropTypes.string,
-    "stickyNavigation": PropTypes.node
-  };
-}
 AnchorNavigation.displayName = "AnchorNavigation";
 export default AnchorNavigation;

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

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

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

@@ -1,13 +1,14 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import { StyledBadgeWrapper, StyledCrossIcon, StyledCounter, StyledBadge } from "./badge.style";
 export const Badge = ({
   "aria-label": ariaLabel,
   children,
   counter = 0,
   color = "--colorsActionMajor500",
-  onClick
+  onClick,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   const shouldDisplayCounter = +counter > 0;
   const counterToDisplay = +counter > 99 ? 99 : counter;
@@ -22,8 +23,9 @@ export const Badge = ({
     };
     if (shouldDisplayCounter) {
       return /*#__PURE__*/React.createElement(StyledBadge, _extends({
-        "data-role": "badge",
         "data-component": "badge",
+        "data-element": dataElement,
+        "data-role": dataRole,
         color: color
       }, props, {
         onFocus: () => {

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

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

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

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { StyledBatchSelection, StyledSelectionCount } from "./batch-selection.style";
 import BatchSelectionContext from "./__internal__/batch-selection.context";
@@ -8,13 +7,16 @@ export const BatchSelection = ({
   children,
   colorTheme = "transparent",
   selectedCount,
-  hidden
+  hidden,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   const l = useLocale();
   return /*#__PURE__*/React.createElement(StyledBatchSelection, {
     colorTheme: colorTheme,
     "data-component": "batch-selection",
-    "data-role": "batch-selection",
+    "data-element": dataElement,
+    "data-role": dataRole,
     disabled: disabled,
     hidden: hidden
   }, /*#__PURE__*/React.createElement(StyledSelectionCount, {

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

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