carbon-react 139.0.0 → 140.0.0

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

@@ -10,7 +10,7 @@ export interface ContentPaddingInterface {
     py?: PaddingValues;
     px?: PaddingValues;
 }
-export interface DialogProps extends ModalProps, TagProps {
+export interface DialogProps extends ModalProps, Omit<TagProps, "data-component"> {
     /** Custom class name  */
     className?: string;
     /** Prop to specify the aria-describedby property of the Dialog component */

package/esm/components/dialog/dialog.component.js

@@ -16,6 +16,8 @@ import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const Dialog = /*#__PURE__*/forwardRef(({
   className,
+  "data-element": dataElement = "dialog",
+  "data-role": dataRole,
   children,
   open,
   height,
@@ -148,19 +150,14 @@ const Dialog = /*#__PURE__*/forwardRef(({
     "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : rest["aria-describedby"],
     "aria-label": rest["aria-label"]
   };
-  const componentTags = {
-    "data-component": rest["data-component"] || "dialog",
-    "data-element": rest["data-element"],
-    "data-role": rest["data-role"]
-  };
-  return /*#__PURE__*/React.createElement(Modal, _extends({
+  return /*#__PURE__*/React.createElement(Modal, {
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
     disableClose: disableClose,
     className: className ? `${className} carbon-dialog` : "carbon-dialog",
     topModalOverride: topModalOverride
-  }, componentTags), /*#__PURE__*/React.createElement(FocusTrap, {
+  }, /*#__PURE__*/React.createElement(FocusTrap, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
@@ -169,18 +166,21 @@ const Dialog = /*#__PURE__*/forwardRef(({
     isOpen: open,
     additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
+    "data-component": "dialog",
+    "data-element": dataElement,
+    "data-role": dataRole,
     "aria-modal": isTopModal ? true : undefined,
     ref: containerRef,
     topMargin: TOP_MARGIN
   }, dialogProps, {
-    "data-component": "dialog",
-    "data-element": "dialog",
-    "data-role": rest["data-role"],
     role: role,
     tabIndex: -1
   }, contentPadding, {
     backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
-  }), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, contentPadding, /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
+  }), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
+    "data-role": "dialog-content"
+  }), /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
+    "data-role": "dialog-inner-content",
     ref: innerContentRef
   }, contentPadding), children)))));
 });
@@ -202,7 +202,6 @@ if (process.env.NODE_ENV !== "production") {
       "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,

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface ModalProps extends TagProps {
+export interface ModalProps extends Omit<TagProps, "data-component"> {
     /** Custom class name  */
     className?: string;
     /** Modal content */
@@ -22,5 +22,5 @@ export interface ModalProps extends TagProps {
     /** Manually override the internal modal stacking order to set this as top */
     topModalOverride?: boolean;
 }
-declare const Modal: ({ children, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, topModalOverride, ...rest }: ModalProps) => React.JSX.Element;
+declare const Modal: ({ children, "data-element": dataElement, "data-role": dataRole, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, topModalOverride, ...rest }: ModalProps) => React.JSX.Element;
 export default Modal;

package/esm/components/modal/modal.component.js

@@ -10,6 +10,8 @@ import { StyledModal, StyledModalBackground } from "./modal.style";
 import ModalContext from "./__internal__/modal.context";
 const Modal = ({
   children,
+  "data-element": dataElement,
+  "data-role": dataRole = "modal",
   open,
   onCancel,
   disableEscKey = false,
@@ -70,6 +72,9 @@ const Modal = ({
     content = children;
   }
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledModal, _extends({
+    "data-component": "modal",
+    "data-element": dataElement,
+    "data-role": dataRole,
     "data-state": open ? "open" : "closed",
     transitionName: "modal",
     transitionTime: timeout,

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

@@ -10,7 +10,7 @@ export interface ContentPaddingInterface {
     py?: PaddingValues;
     px?: PaddingValues;
 }
-export interface DialogProps extends ModalProps, TagProps {
+export interface DialogProps extends ModalProps, Omit<TagProps, "data-component"> {
     /** Custom class name  */
     className?: string;
     /** Prop to specify the aria-describedby property of the Dialog component */

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

@@ -25,6 +25,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   className,
+  "data-element": dataElement = "dialog",
+  "data-role": dataRole,
   children,
   open,
   height,
@@ -157,19 +159,14 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : rest["aria-describedby"],
     "aria-label": rest["aria-label"]
   };
-  const componentTags = {
-    "data-component": rest["data-component"] || "dialog",
-    "data-element": rest["data-element"],
-    "data-role": rest["data-role"]
-  };
-  return /*#__PURE__*/_react.default.createElement(_modal.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_modal.default, {
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
     disableClose: disableClose,
     className: className ? `${className} carbon-dialog` : "carbon-dialog",
     topModalOverride: topModalOverride
-  }, componentTags), /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+  }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
@@ -178,18 +175,21 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     isOpen: open,
     additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
+    "data-component": "dialog",
+    "data-element": dataElement,
+    "data-role": dataRole,
     "aria-modal": isTopModal ? true : undefined,
     ref: containerRef,
     topMargin: _dialog2.TOP_MARGIN
   }, dialogProps, {
-    "data-component": "dialog",
-    "data-element": "dialog",
-    "data-role": rest["data-role"],
     role: role,
     tabIndex: -1
   }, contentPadding, {
     backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
-  }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
+  }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
+    "data-role": "dialog-content"
+  }), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
+    "data-role": "dialog-inner-content",
     ref: innerContentRef
   }, contentPadding), children)))));
 });
@@ -211,7 +211,6 @@ if (process.env.NODE_ENV !== "production") {
       "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,

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface ModalProps extends TagProps {
+export interface ModalProps extends Omit<TagProps, "data-component"> {
     /** Custom class name  */
     className?: string;
     /** Modal content */
@@ -22,5 +22,5 @@ export interface ModalProps extends TagProps {
     /** Manually override the internal modal stacking order to set this as top */
     topModalOverride?: boolean;
 }
-declare const Modal: ({ children, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, topModalOverride, ...rest }: ModalProps) => React.JSX.Element;
+declare const Modal: ({ children, "data-element": dataElement, "data-role": dataRole, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, topModalOverride, ...rest }: ModalProps) => React.JSX.Element;
 export default Modal;

package/lib/components/modal/modal.component.js

@@ -19,6 +19,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Modal = ({
   children,
+  "data-element": dataElement,
+  "data-role": dataRole = "modal",
   open,
   onCancel,
   disableEscKey = false,
@@ -79,6 +81,9 @@ const Modal = ({
     content = children;
   }
   return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_modal.StyledModal, _extends({
+    "data-component": "modal",
+    "data-element": dataElement,
+    "data-role": dataRole,
     "data-state": open ? "open" : "closed",
     transitionName: "modal",
     transitionTime: timeout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "139.0.0",
+  "version": "140.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",