carbon-react 139.0.0 → 140.0.1

package/esm/__internal__/validations/validation-icon.component.js

@@ -83,7 +83,8 @@ export const ValidationIcon = ({
     isPartOfInput: isPartOfInput,
     inputSize: size,
     id: iconId,
-    focusable: tabIndex !== -1
+    focusable: tabIndex !== -1,
+    "data-role": `icon-${validationType}`
   }));
 };
 export default ValidationIcon;

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -30,11 +30,11 @@ export const DatePicker = ({
   setOpen,
   pickerTabGuardId
 }) => {
-  const l = useLocale();
+  const locale = useLocale();
   const {
     localize,
     options
-  } = l.date.dateFnsLocale();
+  } = locale.date.dateFnsLocale();
   const {
     weekStartsOn
   } = options || /* istanbul ignore next */{};
@@ -53,7 +53,7 @@ export const DatePicker = ({
     length: 7
   }).map((_, i) => localize?.day(i)), [localize]);
   const weekdaysShort = useMemo(() => {
-    const isGivenLocale = str => l.locale().includes(str);
+    const isGivenLocale = str => locale.locale().includes(str);
     return Array.from({
       length: 7
     }).map((_, i) => localize?.day(i, ["de", "pl"].some(isGivenLocale) ? {
@@ -61,7 +61,7 @@ export const DatePicker = ({
     } : {
       width: "abbreviated"
     }).substring(0, isGivenLocale("de") ? 2 : 3));
-  }, [l, localize]);
+  }, [locale, localize]);
   const ref = useRef(null);
   useEffect(() => {
     if (open) {
@@ -178,7 +178,7 @@ export const DatePicker = ({
     fixedWeeks: true,
     initialMonth: selectedDays || undefined,
     disabledDays: getDisabledDays(minDate, maxDate),
-    locale: l.locale(),
+    locale: locale.locale(),
     localeUtils: localeUtils,
     onDayKeyDown: handleOnDayKeyDown
   }, pickerProps))));

package/esm/components/date/__internal__/navbar/navbar.component.js

@@ -22,7 +22,8 @@ export const Navbar = ({
     }
   };
   return /*#__PURE__*/React.createElement(StyledNavbar, {
-    className: className
+    className: className,
+    "data-role": "date-navbar"
   }, /*#__PURE__*/React.createElement(StyledButton, {
     "aria-label": previousMonthButton(),
     onClick: () => onPreviousClick?.(),

package/esm/components/date/date.component.js

@@ -48,10 +48,10 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   const alreadyFocused = useRef(false);
   const isBlurBlocked = useRef(false);
   const focusedViaPicker = useRef(false);
-  const l = useLocale();
+  const locale = useLocale();
   const {
     dateFnsLocale
-  } = l.date;
+  } = locale.date;
   const {
     format,
     formats

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/esm/components/progress-tracker/progress-tracker.style.js

@@ -60,8 +60,9 @@ const StyledProgressBar = styled.span`
 })};
     border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
     overflow-x: hidden;
-    height: ${getHeight(size)};
-    width: 100%;
+    width: 100%
+    min-height: fit-content;
+    box-sizing: border-box;
   `}
 `;
 const fontSizes = {

package/esm/components/tooltip/tooltip.component.js

@@ -161,6 +161,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
     ref: handleTargetRef
   }), showTooltip ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledTooltip, _extends({
     "data-element": "tooltip",
+    "data-role": "tooltip",
     role: "tooltip",
     tabIndex: -1,
     type: type,

package/lib/__internal__/validations/validation-icon.component.js

@@ -92,7 +92,8 @@ const ValidationIcon = ({
     isPartOfInput: isPartOfInput,
     inputSize: size,
     id: iconId,
-    focusable: tabIndex !== -1
+    focusable: tabIndex !== -1,
+    "data-role": `icon-${validationType}`
   }));
 };
 exports.ValidationIcon = ValidationIcon;

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -38,11 +38,11 @@ const DatePicker = ({
   setOpen,
   pickerTabGuardId
 }) => {
-  const l = (0, _useLocale.default)();
+  const locale = (0, _useLocale.default)();
   const {
     localize,
     options
-  } = l.date.dateFnsLocale();
+  } = locale.date.dateFnsLocale();
   const {
     weekStartsOn
   } = options || /* istanbul ignore next */{};
@@ -61,7 +61,7 @@ const DatePicker = ({
     length: 7
   }).map((_, i) => localize?.day(i)), [localize]);
   const weekdaysShort = (0, _react.useMemo)(() => {
-    const isGivenLocale = str => l.locale().includes(str);
+    const isGivenLocale = str => locale.locale().includes(str);
     return Array.from({
       length: 7
     }).map((_, i) => localize?.day(i, ["de", "pl"].some(isGivenLocale) ? {
@@ -69,7 +69,7 @@ const DatePicker = ({
     } : {
       width: "abbreviated"
     }).substring(0, isGivenLocale("de") ? 2 : 3));
-  }, [l, localize]);
+  }, [locale, localize]);
   const ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (open) {
@@ -186,7 +186,7 @@ const DatePicker = ({
     fixedWeeks: true,
     initialMonth: selectedDays || undefined,
     disabledDays: (0, _utils.getDisabledDays)(minDate, maxDate),
-    locale: l.locale(),
+    locale: locale.locale(),
     localeUtils: localeUtils,
     onDayKeyDown: handleOnDayKeyDown
   }, pickerProps))));

package/lib/components/date/__internal__/navbar/navbar.component.js

@@ -29,7 +29,8 @@ const Navbar = ({
     }
   };
   return /*#__PURE__*/_react.default.createElement(_navbar.default, {
-    className: className
+    className: className,
+    "data-role": "date-navbar"
   }, /*#__PURE__*/_react.default.createElement(_button.default, {
     "aria-label": previousMonthButton(),
     onClick: () => onPreviousClick?.(),

package/lib/components/date/date.component.js

@@ -57,10 +57,10 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   const alreadyFocused = (0, _react.useRef)(false);
   const isBlurBlocked = (0, _react.useRef)(false);
   const focusedViaPicker = (0, _react.useRef)(false);
-  const l = (0, _useLocale.default)();
+  const locale = (0, _useLocale.default)();
   const {
     dateFnsLocale
-  } = l.date;
+  } = locale.date;
   const {
     format,
     formats

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/lib/components/progress-tracker/progress-tracker.style.js

@@ -69,8 +69,9 @@ const StyledProgressBar = exports.StyledProgressBar = _styledComponents.default.
 })};
     border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
     overflow-x: hidden;
-    height: ${getHeight(size)};
-    width: 100%;
+    width: 100%
+    min-height: fit-content;
+    box-sizing: border-box;
   `}
 `;
 const fontSizes = {

package/lib/components/tooltip/tooltip.component.js

@@ -170,6 +170,7 @@ const Tooltip = exports.Tooltip = /*#__PURE__*/_react.default.forwardRef(({
     ref: handleTargetRef
   }), showTooltip ? /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
     "data-element": "tooltip",
+    "data-role": "tooltip",
     role: "tooltip",
     tabIndex: -1,
     type: type,

package/package.json

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