carbon-react 141.4.4 → 142.0.0

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import Link from "../../../link";
 import ButtonMinor from "../../../button-minor";
 import StyledTypography from "../../../typography/typography.style";
-import ProgressTracker from "../../../progress-tracker";
+import { StyledProgressBar, InnerBar } from "../../../progress-tracker/progress-tracker.style";
 import LoaderBar from "../../../loader-bar";
 import Icon from "../../../icon";
 import { StyledFileUploadStatus, StyledFileUploadStatusRow, StyledFileLinkContainer } from "./file-upload-status.style";
@@ -24,10 +24,18 @@ export const FileUploadStatus = ({
   switch (status) {
     case "uploading":
       buttonText = locale.fileInput.actions.cancel();
-      progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, null) : /*#__PURE__*/React.createElement(ProgressTracker, {
+      progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, null) : /*#__PURE__*/React.createElement(StyledProgressBar, {
+        "data-element": "progress-tracker-bar",
+        "data-role": "progress-tracker-bar",
         progress: statusProps.progress,
-        length: "100%"
-      });
+        "aria-hidden": "true"
+      }, /*#__PURE__*/React.createElement(InnerBar, {
+        "data-element": "inner-bar",
+        "data-role": "inner-bar",
+        size: "medium",
+        progress: statusProps.progress,
+        error: false
+      }));
       break;
     case "previously":
     case "completed":

package/esm/components/message/{message-content → __internal__/message-content}/message-content.component.d.ts

@@ -1,12 +1,8 @@
 import React from "react";
 export interface MessageContentProps {
-    /** set message title */
     title?: React.ReactNode;
-    /** set content to component */
     children?: React.ReactNode;
-    /** determines if the close icon is shown */
     showCloseIcon?: boolean;
-    /** @ignore @private used to reduce the left-padding for the transparent variant */
     reduceLeftPadding?: boolean;
 }
 declare const MessageContent: ({ title, children, showCloseIcon, reduceLeftPadding, }: MessageContentProps) => React.JSX.Element;

package/esm/components/message/{message-content → __internal__/message-content}/message-content.component.js

@@ -1,12 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Content from "../../content";
+import Content from "../../../content";
 import MessageContentStyle from "./message-content.style";
 const MessageContent = ({
   title,
   children,
   showCloseIcon,
-  reduceLeftPadding = false
+  reduceLeftPadding
 }) => {
   return /*#__PURE__*/React.createElement(MessageContentStyle, {
     showCloseIcon: showCloseIcon,

package/{lib/components/message → esm/components/message/__internal__}/type-icon/type-icon.component.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
-import { MessageVariant } from "../message.component";
+import { MessageVariant } from "../../message.component";
 export interface TypeIconProps {
-    /** set background to be invisible */
     transparent?: boolean;
-    /** set type of message based on new DLS standard */
-    variant?: MessageVariant;
+    variant: MessageVariant;
 }
 declare const TypeIcon: ({ variant, transparent }: TypeIconProps) => React.JSX.Element;
 export default TypeIcon;

package/esm/components/message/{type-icon → __internal__/type-icon}/type-icon.component.js

@@ -1,10 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import TypeIconStyle from "./type-icon.style";
-import Icon from "../../icon";
+import Icon from "../../../icon";
 const TypeIcon = ({
-  variant = "info",
-  transparent = false
+  variant,
+  transparent
 }) => {
   function iconToRender() {
     if (variant === "neutral") return "info";

package/{lib/components/message → esm/components/message/__internal__}/type-icon/type-icon.style.d.ts

@@ -1,8 +1,6 @@
-import { MessageVariant } from "../message.component";
+import { MessageVariant } from "../../message.component";
 declare type TypeIconStyleProps = {
-    /** set background to be invisible */
     transparent?: boolean;
-    /** set type of message based on new DLS standard */
     variant: MessageVariant;
 };
 declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, TypeIconStyleProps, never>;

package/esm/components/message/message.component.js

@@ -2,8 +2,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import MessageStyle from "./message.style";
-import TypeIcon from "./type-icon/type-icon.component";
-import MessageContent from "./message-content/message-content.component";
+import TypeIcon from "./__internal__/type-icon/type-icon.component";
+import MessageContent from "./__internal__/message-content/message-content.component";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import Icon from "../icon";
 import IconButton from "../icon-button";

package/esm/components/progress-tracker/progress-tracker.component.d.ts

@@ -1,32 +1,16 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface ProgressTrackerProps extends MarginProps {
-    /** (Deprecated) Specifies an aria label to the component */
-    "aria-label"?: string;
-    /** (Deprecated) Specifies the aria describedby for the component */
-    "aria-describedby"?: string;
-    /** (Deprecated) The value of progress to be read out to the user. */
-    "aria-valuenow"?: number;
-    /** (Deprecated) The minimum value of the progress tracker */
-    "aria-valuemin"?: number;
-    /** (Deprecated) The maximum value of the progress tracker */
-    "aria-valuemax"?: number;
-    /** (Deprecated) Prop to define the human readable text alternative of aria-valuenow
-     * if aria-valuenow is not a number
-     */
-    "aria-valuetext"?: string;
     /** Size of the progress bar. */
     size?: "small" | "medium" | "large";
     /** Length of the component, any valid css string. */
     length?: string;
     /** Current progress (percentage). */
     progress?: number;
-    /** If error occurs. */
+    /** Flag to control error state. */
     error?: boolean;
-    /** Flag to control whether the default value labels (as percentages) should be rendered. */
-    description?: string;
     /** Value to add a description to the label */
-    showDefaultLabels?: boolean;
+    description?: string;
     /** Value to display as current progress. */
     currentProgressLabel?: string;
     /** Value to display as the maximum progress limit. */
@@ -35,14 +19,13 @@ export interface ProgressTrackerProps extends MarginProps {
     customValuePreposition?: string;
     /**
      * The position the value label are rendered in.
-     * Top/bottom apply to horizontal and left applies to vertical orientation.
      */
     labelsPosition?: "top" | "bottom" | "left";
-    /** Label width */
+    /** Label width when position is "left" */
     labelWidth?: string;
 }
 declare const ProgressTracker: {
-    ({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, error, progress, description, showDefaultLabels, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, labelWidth, ...rest }: ProgressTrackerProps): React.JSX.Element;
+    ({ size, length, error, progress, description, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, labelWidth, ...rest }: ProgressTrackerProps): React.JSX.Element;
     displayName: string;
 };
 export default ProgressTracker;

package/esm/components/progress-tracker/progress-tracker.component.js

@@ -1,25 +1,15 @@
 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, useLayoutEffect, useRef, useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue, StyledDescription } from "./progress-tracker.style";
-import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-import Logger from "../../__internal__/utils/logger";
-let deprecatedAriaTagsWarnTriggered = false;
 const ProgressTracker = ({
-  "aria-label": ariaLabel,
-  "aria-describedby": ariaDescribedBy,
-  "aria-valuenow": ariaValueNow,
-  "aria-valuemin": ariaValueMin,
-  "aria-valuemax": ariaValueMax,
-  "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
   error = false,
   progress = 0,
   description,
-  showDefaultLabels = false,
   currentProgressLabel,
   customValuePreposition,
   maxProgressLabel,
@@ -27,40 +17,22 @@ const ProgressTracker = ({
   labelWidth,
   ...rest
 }) => {
-  if ((ariaLabel || ariaDescribedBy || ariaValueNow || ariaValueMax || ariaValueMin || ariaValueText) && !deprecatedAriaTagsWarnTriggered) {
-    deprecatedAriaTagsWarnTriggered = true;
-    Logger.deprecate("The 'aria-' attribute props in `ProgressTracker` have been deprecated and will soon be removed.");
-  }
   const l = useLocale();
-  const barRef = useRef(null);
-  const [barLength, setBarLength] = useState("0px");
   const prefixLabels = labelsPosition !== "bottom";
-  const updateBarLength = useCallback(() => {
-    setBarLength(`${barRef.current?.offsetWidth}px`);
-  }, []);
-  useLayoutEffect(() => {
-    updateBarLength();
-  }, [updateBarLength]);
-  useResizeObserver(barRef, () => {
-    updateBarLength();
-  });
   const renderValueLabels = () => {
-    if (!showDefaultLabels && !currentProgressLabel) {
-      return null;
+    let displayedCurrentProgressLabel, displayedMaxProgressLabel;
+    if (currentProgressLabel) {
+      displayedCurrentProgressLabel = currentProgressLabel;
+      displayedMaxProgressLabel = maxProgressLabel || undefined;
+    } else {
+      displayedCurrentProgressLabel = `${progress}%`;
+      displayedMaxProgressLabel = "100%";
     }
-    const label = (value, defaultValue) => {
-      if (value) {
-        return value;
-      }
-      return showDefaultLabels ? defaultValue : undefined;
-    };
-    const displayedCurrentProgressLabel = label(currentProgressLabel, `${progress}%`);
-    const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
     return /*#__PURE__*/React.createElement(StyledValuesLabel, {
       labelsPosition: labelsPosition,
       size: size,
       labelWidth: labelWidth
-    }, displayedCurrentProgressLabel && /*#__PURE__*/React.createElement(StyledValue, {
+    }, /*#__PURE__*/React.createElement(StyledValue, {
       "data-element": "current-progress-label"
     }, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
       "data-element": "custom-preposition"
@@ -70,29 +42,18 @@ const ProgressTracker = ({
       "data-element": "progress-tracker-description"
     }, description));
   };
-  const valueMin = ariaValueMin === undefined ? 0 : ariaValueMin;
-  const valueMax = ariaValueMax === undefined ? 100 : ariaValueMax;
-  const defaultValueNow = valueMin + (valueMax - valueMin) * progress / 100;
   return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
     length: length
   }, rest, tagComponent("progress-bar", rest), {
-    role: "progressbar",
-    "aria-label": ariaLabel || "progress tracker",
-    "aria-describedby": ariaDescribedBy,
-    "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
-    "aria-valuemin": ariaValueMin,
-    "aria-valuemax": ariaValueMax,
-    "aria-valuetext": ariaValueText,
     labelsPosition: labelsPosition
   }), prefixLabels && renderValueLabels(), /*#__PURE__*/React.createElement(StyledProgressBar, {
-    size: size,
-    ref: barRef,
     progress: progress,
-    error: error
+    error: error,
+    "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement(InnerBar, {
     "data-element": "inner-bar",
+    "data-role": "inner-bar",
     size: size,
-    length: barLength,
     progress: progress,
     error: error
   })), !prefixLabels && renderValueLabels());

package/esm/components/progress-tracker/progress-tracker.style.d.ts

@@ -1,8 +1,8 @@
 import { ProgressTrackerProps } from "./progress-tracker.component";
 declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin" | "labelsPosition">, never>;
-declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "size">, never>;
+declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress">, never>;
 declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const StyledDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "labelWidth" | "size" | "labelsPosition">, never>;
-declare const InnerBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "length" | "size">, never>;
+declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "error" | "progress" | "size">>, never>;
 export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -46,7 +46,6 @@ const StyledProgressTracker = styled.div`
 `;
 const StyledProgressBar = styled.span`
   ${({
-  size,
   progress,
   error,
   theme
@@ -108,8 +107,7 @@ const StyledValuesLabel = styled.span`
 const InnerBar = styled.span`
   ${({
   progress,
-  size = "medium",
-  length,
+  size,
   error,
   theme
 }) => css`
@@ -120,7 +118,7 @@ const InnerBar = styled.span`
   error
 })};
     border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
-    width: calc(${length} * ${progress && progress / 100});
+    width: ${progress}%;
     min-width: 2px;
     height: ${getHeight(size)};
   `}

package/esm/components/toast/toast.style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import TypeIcon from "../message/type-icon/type-icon.style";
+import TypeIcon from "../message/__internal__/type-icon/type-icon.style";
 import { MessageVariant } from "../message/message.component";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;

package/esm/components/toast/toast.style.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import TypeIcon from "../message/type-icon/type-icon.style";
+import TypeIcon from "../message/__internal__/type-icon/type-icon.style";
 import StyledIconButton from "../icon-button/icon-button.style";
 import Portal from "../portal/portal";
 import baseTheme from "../../style/themes/base";

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _link = _interopRequireDefault(require("../../../link"));
 var _buttonMinor = _interopRequireDefault(require("../../../button-minor"));
 var _typography = _interopRequireDefault(require("../../../typography/typography.style"));
-var _progressTracker = _interopRequireDefault(require("../../../progress-tracker"));
+var _progressTracker = require("../../../progress-tracker/progress-tracker.style");
 var _loaderBar = _interopRequireDefault(require("../../../loader-bar"));
 var _icon = _interopRequireDefault(require("../../../icon"));
 var _fileUploadStatus = require("./file-upload-status.style");
@@ -31,10 +31,18 @@ const FileUploadStatus = ({
   switch (status) {
     case "uploading":
       buttonText = locale.fileInput.actions.cancel();
-      progressBar = statusProps.progress === undefined ? /*#__PURE__*/_react.default.createElement(_loaderBar.default, null) : /*#__PURE__*/_react.default.createElement(_progressTracker.default, {
+      progressBar = statusProps.progress === undefined ? /*#__PURE__*/_react.default.createElement(_loaderBar.default, null) : /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
+        "data-element": "progress-tracker-bar",
+        "data-role": "progress-tracker-bar",
         progress: statusProps.progress,
-        length: "100%"
-      });
+        "aria-hidden": "true"
+      }, /*#__PURE__*/_react.default.createElement(_progressTracker.InnerBar, {
+        "data-element": "inner-bar",
+        "data-role": "inner-bar",
+        size: "medium",
+        progress: statusProps.progress,
+        error: false
+      }));
       break;
     case "previously":
     case "completed":

package/lib/components/message/{message-content → __internal__/message-content}/message-content.component.d.ts

@@ -1,12 +1,8 @@
 import React from "react";
 export interface MessageContentProps {
-    /** set message title */
     title?: React.ReactNode;
-    /** set content to component */
     children?: React.ReactNode;
-    /** determines if the close icon is shown */
     showCloseIcon?: boolean;
-    /** @ignore @private used to reduce the left-padding for the transparent variant */
     reduceLeftPadding?: boolean;
 }
 declare const MessageContent: ({ title, children, showCloseIcon, reduceLeftPadding, }: MessageContentProps) => React.JSX.Element;

package/lib/components/message/{message-content → __internal__/message-content}/message-content.component.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _content = _interopRequireDefault(require("../../content"));
+var _content = _interopRequireDefault(require("../../../content"));
 var _messageContent = _interopRequireDefault(require("./message-content.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MessageContent = ({
   title,
   children,
   showCloseIcon,
-  reduceLeftPadding = false
+  reduceLeftPadding
 }) => {
   return /*#__PURE__*/_react.default.createElement(_messageContent.default, {
     showCloseIcon: showCloseIcon,

package/{esm/components/message → lib/components/message/__internal__}/type-icon/type-icon.component.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
-import { MessageVariant } from "../message.component";
+import { MessageVariant } from "../../message.component";
 export interface TypeIconProps {
-    /** set background to be invisible */
     transparent?: boolean;
-    /** set type of message based on new DLS standard */
-    variant?: MessageVariant;
+    variant: MessageVariant;
 }
 declare const TypeIcon: ({ variant, transparent }: TypeIconProps) => React.JSX.Element;
 export default TypeIcon;

package/lib/components/message/{type-icon → __internal__/type-icon}/type-icon.component.js

@@ -7,11 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _typeIcon = _interopRequireDefault(require("./type-icon.style"));
-var _icon = _interopRequireDefault(require("../../icon"));
+var _icon = _interopRequireDefault(require("../../../icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TypeIcon = ({
-  variant = "info",
-  transparent = false
+  variant,
+  transparent
 }) => {
   function iconToRender() {
     if (variant === "neutral") return "info";

package/{esm/components/message → lib/components/message/__internal__}/type-icon/type-icon.style.d.ts

@@ -1,8 +1,6 @@
-import { MessageVariant } from "../message.component";
+import { MessageVariant } from "../../message.component";
 declare type TypeIconStyleProps = {
-    /** set background to be invisible */
     transparent?: boolean;
-    /** set type of message based on new DLS standard */
     variant: MessageVariant;
 };
 declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, TypeIconStyleProps, never>;

package/lib/components/message/message.component.js

@@ -7,8 +7,8 @@ exports.default = exports.Message = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _message = _interopRequireDefault(require("./message.style"));
-var _typeIcon = _interopRequireDefault(require("./type-icon/type-icon.component"));
-var _messageContent = _interopRequireDefault(require("./message-content/message-content.component"));
+var _typeIcon = _interopRequireDefault(require("./__internal__/type-icon/type-icon.component"));
+var _messageContent = _interopRequireDefault(require("./__internal__/message-content/message-content.component"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _iconButton = _interopRequireDefault(require("../icon-button"));

package/lib/components/progress-tracker/progress-tracker.component.d.ts

@@ -1,32 +1,16 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface ProgressTrackerProps extends MarginProps {
-    /** (Deprecated) Specifies an aria label to the component */
-    "aria-label"?: string;
-    /** (Deprecated) Specifies the aria describedby for the component */
-    "aria-describedby"?: string;
-    /** (Deprecated) The value of progress to be read out to the user. */
-    "aria-valuenow"?: number;
-    /** (Deprecated) The minimum value of the progress tracker */
-    "aria-valuemin"?: number;
-    /** (Deprecated) The maximum value of the progress tracker */
-    "aria-valuemax"?: number;
-    /** (Deprecated) Prop to define the human readable text alternative of aria-valuenow
-     * if aria-valuenow is not a number
-     */
-    "aria-valuetext"?: string;
     /** Size of the progress bar. */
     size?: "small" | "medium" | "large";
     /** Length of the component, any valid css string. */
     length?: string;
     /** Current progress (percentage). */
     progress?: number;
-    /** If error occurs. */
+    /** Flag to control error state. */
     error?: boolean;
-    /** Flag to control whether the default value labels (as percentages) should be rendered. */
-    description?: string;
     /** Value to add a description to the label */
-    showDefaultLabels?: boolean;
+    description?: string;
     /** Value to display as current progress. */
     currentProgressLabel?: string;
     /** Value to display as the maximum progress limit. */
@@ -35,14 +19,13 @@ export interface ProgressTrackerProps extends MarginProps {
     customValuePreposition?: string;
     /**
      * The position the value label are rendered in.
-     * Top/bottom apply to horizontal and left applies to vertical orientation.
      */
     labelsPosition?: "top" | "bottom" | "left";
-    /** Label width */
+    /** Label width when position is "left" */
     labelWidth?: string;
 }
 declare const ProgressTracker: {
-    ({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, error, progress, description, showDefaultLabels, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, labelWidth, ...rest }: ProgressTrackerProps): React.JSX.Element;
+    ({ size, length, error, progress, description, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, labelWidth, ...rest }: ProgressTrackerProps): React.JSX.Element;
     displayName: string;
 };
 export default ProgressTracker;

package/lib/components/progress-tracker/progress-tracker.component.js

@@ -4,31 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _progressTracker = require("./progress-tracker.style");
-var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 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; }
 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); }
-let deprecatedAriaTagsWarnTriggered = false;
 const ProgressTracker = ({
-  "aria-label": ariaLabel,
-  "aria-describedby": ariaDescribedBy,
-  "aria-valuenow": ariaValueNow,
-  "aria-valuemin": ariaValueMin,
-  "aria-valuemax": ariaValueMax,
-  "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
   error = false,
   progress = 0,
   description,
-  showDefaultLabels = false,
   currentProgressLabel,
   customValuePreposition,
   maxProgressLabel,
@@ -36,40 +24,22 @@ const ProgressTracker = ({
   labelWidth,
   ...rest
 }) => {
-  if ((ariaLabel || ariaDescribedBy || ariaValueNow || ariaValueMax || ariaValueMin || ariaValueText) && !deprecatedAriaTagsWarnTriggered) {
-    deprecatedAriaTagsWarnTriggered = true;
-    _logger.default.deprecate("The 'aria-' attribute props in `ProgressTracker` have been deprecated and will soon be removed.");
-  }
   const l = (0, _useLocale.default)();
-  const barRef = (0, _react.useRef)(null);
-  const [barLength, setBarLength] = (0, _react.useState)("0px");
   const prefixLabels = labelsPosition !== "bottom";
-  const updateBarLength = (0, _react.useCallback)(() => {
-    setBarLength(`${barRef.current?.offsetWidth}px`);
-  }, []);
-  (0, _react.useLayoutEffect)(() => {
-    updateBarLength();
-  }, [updateBarLength]);
-  (0, _useResizeObserver.default)(barRef, () => {
-    updateBarLength();
-  });
   const renderValueLabels = () => {
-    if (!showDefaultLabels && !currentProgressLabel) {
-      return null;
+    let displayedCurrentProgressLabel, displayedMaxProgressLabel;
+    if (currentProgressLabel) {
+      displayedCurrentProgressLabel = currentProgressLabel;
+      displayedMaxProgressLabel = maxProgressLabel || undefined;
+    } else {
+      displayedCurrentProgressLabel = `${progress}%`;
+      displayedMaxProgressLabel = "100%";
     }
-    const label = (value, defaultValue) => {
-      if (value) {
-        return value;
-      }
-      return showDefaultLabels ? defaultValue : undefined;
-    };
-    const displayedCurrentProgressLabel = label(currentProgressLabel, `${progress}%`);
-    const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
     return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValuesLabel, {
       labelsPosition: labelsPosition,
       size: size,
       labelWidth: labelWidth
-    }, displayedCurrentProgressLabel && /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
+    }, /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
       "data-element": "current-progress-label"
     }, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
       "data-element": "custom-preposition"
@@ -79,29 +49,18 @@ const ProgressTracker = ({
       "data-element": "progress-tracker-description"
     }, description));
   };
-  const valueMin = ariaValueMin === undefined ? 0 : ariaValueMin;
-  const valueMax = ariaValueMax === undefined ? 100 : ariaValueMax;
-  const defaultValueNow = valueMin + (valueMax - valueMin) * progress / 100;
   return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
     length: length
   }, rest, (0, _tags.default)("progress-bar", rest), {
-    role: "progressbar",
-    "aria-label": ariaLabel || "progress tracker",
-    "aria-describedby": ariaDescribedBy,
-    "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
-    "aria-valuemin": ariaValueMin,
-    "aria-valuemax": ariaValueMax,
-    "aria-valuetext": ariaValueText,
     labelsPosition: labelsPosition
   }), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
-    size: size,
-    ref: barRef,
     progress: progress,
-    error: error
+    error: error,
+    "aria-hidden": "true"
   }, /*#__PURE__*/_react.default.createElement(_progressTracker.InnerBar, {
     "data-element": "inner-bar",
+    "data-role": "inner-bar",
     size: size,
-    length: barLength,
     progress: progress,
     error: error
   })), !prefixLabels && renderValueLabels());

package/lib/components/progress-tracker/progress-tracker.style.d.ts

@@ -1,8 +1,8 @@
 import { ProgressTrackerProps } from "./progress-tracker.component";
 declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin" | "labelsPosition">, never>;
-declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "size">, never>;
+declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress">, never>;
 declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const StyledDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "labelWidth" | "size" | "labelsPosition">, never>;
-declare const InnerBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "length" | "size">, never>;
+declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "error" | "progress" | "size">>, never>;
 export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };

package/lib/components/progress-tracker/progress-tracker.style.js

@@ -55,7 +55,6 @@ const StyledProgressTracker = exports.StyledProgressTracker = _styledComponents.
 `;
 const StyledProgressBar = exports.StyledProgressBar = _styledComponents.default.span`
   ${({
-  size,
   progress,
   error,
   theme
@@ -117,8 +116,7 @@ const StyledValuesLabel = exports.StyledValuesLabel = _styledComponents.default.
 const InnerBar = exports.InnerBar = _styledComponents.default.span`
   ${({
   progress,
-  size = "medium",
-  length,
+  size,
   error,
   theme
 }) => (0, _styledComponents.css)`
@@ -129,7 +127,7 @@ const InnerBar = exports.InnerBar = _styledComponents.default.span`
   error
 })};
     border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
-    width: calc(${length} * ${progress && progress / 100});
+    width: ${progress}%;
     min-width: 2px;
     height: ${getHeight(size)};
   `}

package/lib/components/toast/toast.style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import TypeIcon from "../message/type-icon/type-icon.style";
+import TypeIcon from "../message/__internal__/type-icon/type-icon.style";
 import { MessageVariant } from "../message/message.component";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;

package/lib/components/toast/toast.style.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "TypeIcon", {
   }
 });
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _typeIcon = _interopRequireDefault(require("../message/type-icon/type-icon.style"));
+var _typeIcon = _interopRequireDefault(require("../message/__internal__/type-icon/type-icon.style"));
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 var _portal = _interopRequireDefault(require("../portal/portal"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));

package/package.json

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