carbon-react 150.1.0 → 151.1.0

package/lib/components/definition-list/dd/dd.component.d.ts

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

package/lib/components/definition-list/dd/dd.component.js

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

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

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

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _definitionList = require("./definition-list.style");
 var _dl = _interopRequireDefault(require("./__internal__/dl.context"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Dl = ({
@@ -20,10 +20,8 @@ const Dl = ({
 }) => {
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDl, _extends({
     w: w,
-    "data-component": "dl",
-    "data-role": "dl",
     asSingleColumn: asSingleColumn
-  }, rest), /*#__PURE__*/_react.default.createElement(_dl.default.Provider, {
+  }, rest, (0, _tags.default)("dl", rest)), /*#__PURE__*/_react.default.createElement(_dl.default.Provider, {
     value: {
       asSingleColumn,
       dtTextAlign,

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

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

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

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

package/lib/components/detail/detail.component.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Detail = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../style/utils");
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _detail = require("./detail.style");

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

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

package/lib/components/dialog/dialog.component.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Dialog = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _modal = _interopRequireDefault(require("../modal"));
 var _heading = _interopRequireDefault(require("../heading"));
@@ -134,70 +133,4 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     tabIndex: -1
   }), children)))));
 });
-if (process.env.NODE_ENV !== "production") {
-  Dialog.propTypes = {
-    "aria-describedby": _propTypes.default.string,
-    "aria-label": _propTypes.default.string,
-    "aria-labelledby": _propTypes.default.string,
-    "ariaRole": _propTypes.default.string,
-    "bespokeFocusTrap": _propTypes.default.func,
-    "children": _propTypes.default.node,
-    "className": _propTypes.default.string,
-    "closeButtonDataProps": _propTypes.default.shape({
-      "data-element": _propTypes.default.string,
-      "data-role": _propTypes.default.string
-    }),
-    "contentPadding": _propTypes.default.shape({
-      "p": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
-      "px": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
-      "py": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
-    }),
-    "data-component": _propTypes.default.string,
-    "data-element": _propTypes.default.string,
-    "data-role": _propTypes.default.string,
-    "disableAutoFocus": _propTypes.default.bool,
-    "disableClose": _propTypes.default.bool,
-    "disableEscKey": _propTypes.default.bool,
-    "disableFocusTrap": _propTypes.default.bool,
-    "enableBackgroundUI": _propTypes.default.bool,
-    "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.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.default.string,
-    "focusFirstElement": _propTypes.default.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.default.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.default.bool,
-    "height": _propTypes.default.string,
-    "help": _propTypes.default.string,
-    "onCancel": _propTypes.default.func,
-    "open": _propTypes.default.bool.isRequired,
-    "restoreFocusOnClose": _propTypes.default.bool,
-    "role": _propTypes.default.string,
-    "showCloseIcon": _propTypes.default.bool,
-    "size": _propTypes.default.oneOf(["auto", "extra-large", "extra-small", "large", "maximise", "medium-large", "medium-small", "medium", "small"]),
-    "subtitle": _propTypes.default.node,
-    "timeout": _propTypes.default.number,
-    "title": _propTypes.default.node,
-    "topModalOverride": _propTypes.default.bool
-  };
-}
 var _default = exports.default = Dialog;

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DialogFullScreen = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _modal = _interopRequireDefault(require("../modal"));
 var _heading = _interopRequireDefault(require("../heading"));
@@ -88,18 +87,13 @@ const DialogFullScreen = ({
     "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
     "aria-label": ariaLabel
   };
-  const componentTags = {
-    "data-component": "dialog-full-screen",
-    "data-element": rest["data-element"],
-    "data-role": rest["data-role"]
-  };
   return /*#__PURE__*/_react.default.createElement(_modal.default, _extends({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
     topModalOverride: topModalOverride,
     restoreFocusOnClose: restoreFocusOnClose
-  }, componentTags), /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+  }, (0, _tags.default)("dialog-full-screen", rest)), /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,

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

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

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DismissibleBox = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _dismissibleBox = require("./dismissible-box.style");
 var _iconButton = _interopRequireDefault(require("../icon-button"));
@@ -23,9 +22,8 @@ const DismissibleBox = ({
   const locale = (0, _useLocale.default)();
   return /*#__PURE__*/_react.default.createElement(_dismissibleBox.StyledDismissibleBox, _extends({
     p: "20px 24px 20px 20px",
-    "data-component": "dismissible-box",
     borderRadius: borderRadius
-  }, rest), children, /*#__PURE__*/_react.default.createElement("span", {
+  }, rest, (0, _tags.default)("dismissible-box", rest)), children, /*#__PURE__*/_react.default.createElement("span", {
     "data-element": "close-button-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({
     onClick: onClose,

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

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

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

@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDnd = require("react-dnd");
 var _draggableItem = require("../draggable-item/draggable-item.style");
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const DropTarget = ({
-  "data-element": dataElement,
-  "data-role": dataRole,
   children,
   getOrder,
   ...rest
@@ -27,10 +25,7 @@ const DropTarget = ({
     }
   });
   return /*#__PURE__*/_react.default.createElement(_draggableItem.StyledDraggableContainer, _extends({
-    ref: drop,
-    "data-component": "draggable-container",
-    "data-element": dataElement,
-    "data-role": dataRole
-  }, rest), children);
+    ref: drop
+  }, rest, (0, _tags.default)("draggable-container", rest)), children);
 };
 var _default = exports.default = DropTarget;

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

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

package/lib/components/draggable/draggable-container.component.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDnd = require("react-dnd");
 var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 var _invariant = _interopRequireDefault(require("invariant"));
@@ -85,168 +84,5 @@ const DraggableContainer = ({
     }, [item.props.children]);
   })));
 };
-if (process.env.NODE_ENV !== "production") {
-  DraggableContainer.propTypes = {
-    "children": _propTypes.default.node,
-    "data-element": _propTypes.default.string,
-    "data-role": _propTypes.default.string,
-    "flexDirection": _propTypes.default.oneOf(["row-reverse", "row"]),
-    "getOrder": _propTypes.default.func,
-    "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string]),
-    "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-      "__@toStringTag": _propTypes.default.string.isRequired,
-      "description": _propTypes.default.string,
-      "toString": _propTypes.default.func.isRequired,
-      "valueOf": _propTypes.default.func.isRequired
-    }), _propTypes.default.string])
-  };
-}
 DraggableContainer.displayName = "DraggableContainer";
 var _default = exports.default = DraggableContainer;

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

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