carbon-react 150.1.0 → 151.1.0

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

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

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

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

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

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

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

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

package/esm/components/detail/detail.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 { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledDetail, StyledDetailContent, StyledDetailIcon, StyledDetailFootnote } from "./detail.style";

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

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

package/esm/components/dialog/dialog.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, { useRef, useImperativeHandle, forwardRef } from "react";
-import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
 import Heading from "../heading";
@@ -12,7 +11,7 @@ import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-const Dialog = /*#__PURE__*/forwardRef(({
+export const Dialog = /*#__PURE__*/forwardRef(({
   className,
   "data-component": dataComponent = "dialog",
   "data-element": dataElement = "dialog",
@@ -125,71 +124,4 @@ const Dialog = /*#__PURE__*/forwardRef(({
     tabIndex: -1
   }), children)))));
 });
-if (process.env.NODE_ENV !== "production") {
-  Dialog.propTypes = {
-    "aria-describedby": PropTypes.string,
-    "aria-label": PropTypes.string,
-    "aria-labelledby": PropTypes.string,
-    "ariaRole": PropTypes.string,
-    "bespokeFocusTrap": PropTypes.func,
-    "children": PropTypes.node,
-    "className": PropTypes.string,
-    "closeButtonDataProps": PropTypes.shape({
-      "data-element": PropTypes.string,
-      "data-role": PropTypes.string
-    }),
-    "contentPadding": PropTypes.shape({
-      "p": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
-      "px": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
-      "py": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
-    }),
-    "data-component": PropTypes.string,
-    "data-element": PropTypes.string,
-    "data-role": PropTypes.string,
-    "disableAutoFocus": PropTypes.bool,
-    "disableClose": PropTypes.bool,
-    "disableEscKey": PropTypes.bool,
-    "disableFocusTrap": PropTypes.bool,
-    "enableBackgroundUI": PropTypes.bool,
-    "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
-      "current": function (props, propName) {
-        if (props[propName] == null) {
-          return null;
-        } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-          return new Error("Expected prop '" + propName + "' to be of type Element");
-        }
-      }
-    })),
-    "focusableSelectors": PropTypes.string,
-    "focusFirstElement": PropTypes.oneOfType([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");
-      }
-    }, PropTypes.shape({
-      "current": function (props, propName) {
-        if (props[propName] == null) {
-          return null;
-        } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-          return new Error("Expected prop '" + propName + "' to be of type Element");
-        }
-      }
-    })]),
-    "greyBackground": PropTypes.bool,
-    "height": PropTypes.string,
-    "help": PropTypes.string,
-    "onCancel": PropTypes.func,
-    "open": PropTypes.bool.isRequired,
-    "restoreFocusOnClose": PropTypes.bool,
-    "role": PropTypes.string,
-    "showCloseIcon": PropTypes.bool,
-    "size": PropTypes.oneOf(["auto", "extra-large", "extra-small", "large", "maximise", "medium-large", "medium-small", "medium", "small"]),
-    "subtitle": PropTypes.node,
-    "timeout": PropTypes.number,
-    "title": PropTypes.node,
-    "topModalOverride": PropTypes.bool
-  };
-}
-export { Dialog };
 export default Dialog;

package/esm/components/dialog-full-screen/dialog-full-screen.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, { useRef } from "react";
-import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
 import Heading from "../heading";
@@ -79,18 +78,13 @@ export const DialogFullScreen = ({
     "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
     "aria-label": ariaLabel
   };
-  const componentTags = {
-    "data-component": "dialog-full-screen",
-    "data-element": rest["data-element"],
-    "data-role": rest["data-role"]
-  };
   return /*#__PURE__*/React.createElement(Modal, _extends({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
     topModalOverride: topModalOverride,
     restoreFocusOnClose: restoreFocusOnClose
-  }, componentTags), /*#__PURE__*/React.createElement(FocusTrap, {
+  }, tagComponent("dialog-full-screen", rest)), /*#__PURE__*/React.createElement(FocusTrap, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,

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

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

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

@@ -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 useLocale from "../../hooks/__internal__/useLocale";
 import { StyledDismissibleBox } from "./dismissible-box.style";
 import IconButton from "../icon-button";
@@ -16,9 +15,8 @@ export const DismissibleBox = ({
   const locale = useLocale();
   return /*#__PURE__*/React.createElement(StyledDismissibleBox, _extends({
     p: "20px 24px 20px 20px",
-    "data-component": "dismissible-box",
     borderRadius: borderRadius
-  }, rest), children, /*#__PURE__*/React.createElement("span", {
+  }, rest, tagComponent("dismissible-box", rest)), children, /*#__PURE__*/React.createElement("span", {
     "data-element": "close-button-wrapper"
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
     onClick: onClose,

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

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

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

@@ -1,11 +1,9 @@
 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 { useDrop } from "react-dnd";
 import { StyledDraggableContainer } from "../draggable-item/draggable-item.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
 const DropTarget = ({
-  "data-element": dataElement,
-  "data-role": dataRole,
   children,
   getOrder,
   ...rest
@@ -20,10 +18,7 @@ const DropTarget = ({
     }
   });
   return /*#__PURE__*/React.createElement(StyledDraggableContainer, _extends({
-    ref: drop,
-    "data-component": "draggable-container",
-    "data-element": dataElement,
-    "data-role": dataRole
-  }, rest), children);
+    ref: drop
+  }, rest, tagComponent("draggable-container", rest)), children);
 };
 export default DropTarget;

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

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

package/esm/components/draggable/draggable-container.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, { useEffect, useState, useRef, useMemo } from "react";
-import PropTypes from "prop-types";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import invariant from "invariant";
@@ -76,168 +75,5 @@ const DraggableContainer = ({
     }, [item.props.children]);
   })));
 };
-if (process.env.NODE_ENV !== "production") {
-  DraggableContainer.propTypes = {
-    "children": PropTypes.node,
-    "data-element": PropTypes.string,
-    "data-role": PropTypes.string,
-    "flexDirection": PropTypes.oneOf(["row-reverse", "row"]),
-    "getOrder": PropTypes.func,
-    "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])
-  };
-}
 DraggableContainer.displayName = "DraggableContainer";
 export default DraggableContainer;

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

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