carbon-react 116.1.3 → 116.2.1

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

@@ -3,7 +3,7 @@ import { SpaceProps } from "styled-system";
 import { StyledAccordionContainerProps } from "./accordion.style";
 export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps {
     /** Width of the buttonHeading when it's set, defaults to 150px */
-    buttonWidth?: number;
+    buttonWidth?: number | string;
     /** Content of the Accordion component */
     children?: React.ReactNode;
     /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */

package/esm/components/accordion/accordion.component.js

@@ -29,7 +29,7 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   warning,
   info,
   buttonHeading,
-  buttonWidth = 150,
+  buttonWidth = "150px",
   openTitle,
   ...rest
 }, ref) => {
@@ -130,7 +130,7 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
 Accordion.propTypes = {
   "borders": PropTypes.oneOf(["default", "full", "none"]),
   "buttonHeading": PropTypes.bool,
-  "buttonWidth": PropTypes.number,
+  "buttonWidth": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "children": PropTypes.node,
   "defaultExpanded": PropTypes.bool,
   "disableContentPadding": PropTypes.bool,

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

@@ -28,7 +28,7 @@ interface StyledAccordionHeadingsContainerProps {
 declare const StyledAccordionHeadingsContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionHeadingsContainerProps, never>;
 interface StyledAccordionTitleContainerProps {
     buttonHeading?: boolean;
-    buttonWidth?: number;
+    buttonWidth?: number | string;
     hasButtonProps?: boolean;
     iconAlign?: "left" | "right";
     size?: "large" | "small";

package/esm/components/accordion/accordion.style.js

@@ -156,7 +156,7 @@ const StyledAccordionTitleContainer = styled.div`
       }
 
       ${buttonWidth && css`
-        width: ${buttonWidth}px;
+        width: ${typeof buttonWidth === "number" ? `${buttonWidth}px` : buttonWidth};
       `}
     `}
   `}

package/esm/components/action-popover/action-popover.component.js

@@ -115,7 +115,11 @@ const ActionPopover = ({
       focusButton();
     }
   }, [setOpen, focusButton]);
-  useModalManager(isOpen, handleEscapeKey, buttonRef);
+  useModalManager({
+    open: isOpen,
+    closeModal: handleEscapeKey,
+    modalRef: buttonRef
+  });
   useEffect(() => {
     const handler = ({
       target

package/esm/components/modal/__internal__/modal-manager.d.ts

@@ -15,7 +15,7 @@ declare class ModalManagerInstance {
     private getTopModal;
     addModal: (modal: HTMLElement | null, setTriggerRefocusFlag?: SetTriggerRefocusFlag | undefined) => void;
     isTopmost(modal: HTMLElement | null): boolean;
-    removeModal(modal: HTMLElement | null): void;
+    removeModal(modal: HTMLElement | null, triggerRefocusOnClose?: boolean): void;
     clearList(): void;
     callTopModalSetters(): void;
 }

package/esm/components/modal/__internal__/modal-manager.js

@@ -66,7 +66,7 @@ let ModalManagerInstance = /*#__PURE__*/function () {
     }
   }, {
     key: "removeModal",
-    value: function removeModal(modal) {
+    value: function removeModal(modal, triggerRefocusOnClose = true) {
       const modalIndex = this.modalList.findIndex(({
         modal: m
       }) => m === modal);
@@ -86,7 +86,7 @@ let ModalManagerInstance = /*#__PURE__*/function () {
         setTriggerRefocusFlag
       } = this.getTopModal();
 
-      if (setTriggerRefocusFlag) {
+      if (setTriggerRefocusFlag && triggerRefocusOnClose) {
         setTriggerRefocusFlag(true);
       }
     }

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

@@ -53,7 +53,12 @@ const Modal = ({
       onCancel(ev);
     }
   }, [disableClose, disableEscKey, onCancel]);
-  useModalManager(open, closeModal, ref, setTriggerRefocusFlag);
+  useModalManager({
+    open,
+    closeModal,
+    modalRef: ref,
+    setTriggerRefocusFlag
+  });
   let background;
   let content;
 

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

@@ -1 +1,2 @@
-export { default } from "./progress-tracker";
+export { default } from "./progress-tracker.component";
+export type { ProgressTrackerProps } from "./progress-tracker.component";

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

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { MarginProps } from "styled-system";
+export interface ProgressTrackerProps extends MarginProps {
+    /** Specifies an aria label to the component */
+    "aria-label"?: string;
+    /** Specifies the aria describedby for the component */
+    "aria-describedby"?: string;
+    /** The value of progress to be read out to the user. */
+    "aria-valuenow"?: number;
+    /** The minimum value of the progress tracker */
+    "aria-valuemin"?: number;
+    /** The maximum value of the progress tracker */
+    "aria-valuemax"?: number;
+    /** 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 progress bar, any valid css string. */
+    length?: string;
+    /** Current progress (percentage). */
+    progress?: number;
+    /** If error occurs. */
+    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;
+    /** Value to display as current progress. */
+    currentProgressLabel?: string;
+    /** Value to display as the maximum progress limit. */
+    maxProgressLabel?: string;
+    /** Value of the preposition defined between Value1 and Value2 on the label. */
+    customValuePreposition?: string;
+    /**
+     * The position the value label are rendered in.
+     * Top/bottom apply to horizontal and left/right to vertical orientation.
+     */
+    labelsPosition?: "top" | "bottom";
+}
+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, ...rest }: ProgressTrackerProps): JSX.Element;
+    displayName: string;
+};
+export default ProgressTracker;

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

@@ -2,13 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags";
-import { filterStyledSystemMarginProps } from "../../style/utils";
 import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue, StyledDescription } from "./progress-tracker.style";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const ProgressTracker = ({
   "aria-label": ariaLabel = "progress tracker",
@@ -30,11 +27,13 @@ const ProgressTracker = ({
   ...rest
 }) => {
   const l = useLocale();
-  const barRef = useRef();
-  const [barLength, setBarLength] = useState(0);
+  const barRef = useRef(null);
+  const [barLength, setBarLength] = useState("0px");
   const prefixLabels = labelsPosition !== "bottom";
   const updateBarLength = useCallback(() => {
-    setBarLength(`${barRef.current.offsetWidth}px`);
+    var _barRef$current;
+
+    setBarLength(`${(_barRef$current = barRef.current) === null || _barRef$current === void 0 ? void 0 : _barRef$current.offsetWidth}px`);
   }, []);
   useLayoutEffect(() => {
     updateBarLength();
@@ -59,14 +58,13 @@ const ProgressTracker = ({
     const displayedCurrentProgressLabel = label(currentProgressLabel, `${progress}%`);
     const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
     return /*#__PURE__*/React.createElement(StyledValuesLabel, {
-      position: labelsPosition,
+      labelsPosition: labelsPosition,
       size: size
     }, displayedCurrentProgressLabel && /*#__PURE__*/React.createElement(StyledValue, null, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, customValuePreposition || l.progressTracker.of()), /*#__PURE__*/React.createElement(StyledValue, null, displayedMaxProgressLabel)), description && /*#__PURE__*/React.createElement(StyledDescription, null, description));
   };
 
   const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
   return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
-    size: size,
     length: length
   }, rest, tagComponent("progress-bar", rest), {
     role: "progressbar",
@@ -89,59 +87,177 @@ const ProgressTracker = ({
   })), !prefixLabels && renderValueLabels());
 };
 
-ProgressTracker.propTypes = { ...marginPropTypes,
-
-  /** Specifies an aria label to the component */
-  "aria-label": PropTypes.string,
-
-  /** Specifies the aria describedby for the component */
+ProgressTracker.propTypes = {
   "aria-describedby": PropTypes.string,
-
-  /** The value of progress to be read out to the user. */
-  "aria-valuenow": PropTypes.number,
-
-  /** The minimum value of the progress tracker */
-  "aria-valuemin": PropTypes.number,
-
-  /** The maximum value of the progress tracker */
+  "aria-label": PropTypes.string,
   "aria-valuemax": PropTypes.number,
-
-  /** Prop to define the human readable text alternative of aria-valuenow
-   * if aria-valuenow is not a number
-   */
+  "aria-valuemin": PropTypes.number,
+  "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
-
-  /** Size of the progress bar. */
-  size: PropTypes.oneOf(["small", "medium", "large"]),
-
-  /** Length of the progress bar, any valid css string. */
-  length: PropTypes.string,
-
-  /** Current progress (percentage). */
-  progress: PropTypes.number,
-
-  /** If error occurs. */
-  error: PropTypes.bool,
-
-  /** Flag to control whether the default value labels (as percentages) should be rendered. */
-  description: PropTypes.string,
-
-  /** Value to add a description to the label */
-  showDefaultLabels: PropTypes.bool,
-
-  /** Value to display as current progress. */
-  currentProgressLabel: PropTypes.string,
-
-  /** Value to display as the maximum progress limit. */
-  maxProgressLabel: PropTypes.string,
-
-  /** Value of the preposition defined between Value1 and Value2 on the label. */
-  customValuePreposition: PropTypes.string,
-
-  /**
-   * The position the value label are rendered in.
-   * Top/bottom apply to horizontal and left/right to vertical orientation.
-   */
-  labelsPosition: PropTypes.oneOf(["top", "bottom"])
+  "currentProgressLabel": PropTypes.string,
+  "customValuePreposition": PropTypes.string,
+  "description": PropTypes.string,
+  "error": PropTypes.bool,
+  "labelsPosition": PropTypes.oneOf(["bottom", "top"]),
+  "length": PropTypes.string,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "maxProgressLabel": PropTypes.string,
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "progress": PropTypes.number,
+  "showDefaultLabels": PropTypes.bool,
+  "size": PropTypes.oneOf(["large", "medium", "small"])
 };
+ProgressTracker.displayName = "ProgressTracker";
 export default ProgressTracker;

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

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

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

@@ -1,8 +1,38 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
-import { PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
+
+function getHeight(size) {
+  switch (size) {
+    case "small":
+      return "var(--sizing050)";
+
+    case "large":
+      return "var(--sizing200)";
+
+    default:
+      return "var(--sizing100)";
+  }
+}
+
+function getBackgroundColour({
+  progress,
+  error
+}) {
+  if (error) return "var(--colorsSemanticNegative500)";
+  if (progress && progress >= 100) return "var(--colorsSemanticPositive500)";
+  return "var(--colorsSemanticNeutral500)";
+}
+
+function getBorderColour({
+  progress,
+  error
+}) {
+  if (error) return "var(--colorsSemanticNegative500)";
+  if (progress === 100) return "var(--colorsSemanticPositive500)";
+  return "var(--colorsSemanticNeutral500)";
+}
+
 const StyledProgressTracker = styled.div`
   ${margin}
   text-align: center;
@@ -23,7 +53,10 @@ const StyledProgressBar = styled.span`
     display: flex;
     position: relative;
     background-color: var(--colorsSemanticNeutral200);
-    border: 1px solid ${getBorderColour(progress, error)};
+    border: 1px solid ${getBorderColour({
+  progress,
+  error
+})};
     border-radius: 25px;
     overflow-x: hidden;
     height: ${getHeight(size)};
@@ -50,80 +83,34 @@ const StyledValuesLabel = styled.span`
   gap: 4px;
   font-size: ${({
   size
-}) => fontSizes[size]};
+}) => size && fontSizes[size]};
   ${({
-  position
-}) => position === "bottom" && "margin-top: 8px"};
+  labelsPosition
+}) => labelsPosition === "bottom" && "margin-top: 8px"};
   ${({
-  position
-}) => position !== "bottom" && "margin-bottom: 8px"};
+  labelsPosition
+}) => labelsPosition !== "bottom" && "margin-bottom: 8px"};
 `;
 const InnerBar = styled.span`
   ${({
   progress,
-  size,
+  size = "medium",
   length,
   error
 }) => css`
     position: relative;
     left: 0;
-    background-color: ${getBackgroundColour(progress, error)};
+    background-color: ${getBackgroundColour({
+  progress,
+  error
+})};
     border-radius: 25px;
-    width: calc(${length} * ${progress / 100});
+    width: calc(${length} * ${progress && progress / 100});
     min-width: 2px;
     height: ${getHeight(size)};
   `}
 `;
-
-function getHeight(size) {
-  switch (size) {
-    case "small":
-      return "var(--sizing050)";
-
-    case "large":
-      return "var(--sizing200)";
-
-    default:
-      return "var(--sizing100)";
-  }
-}
-
-function getBackgroundColour(progress, error) {
-  if (error) return "var(--colorsSemanticNegative500)";
-  if (progress >= 100) return "var(--colorsSemanticPositive500)";
-  return "var(--colorsSemanticNeutral500)";
-}
-
-function getBorderColour(progress, error) {
-  if (error) return "var(--colorsSemanticNegative500)";
-  if (progress === 100) return "var(--colorsSemanticPositive500)";
-  return "var(--colorsSemanticNeutral500)";
-}
-
 StyledProgressTracker.defaultProps = {
   theme: baseTheme
 };
-StyledProgressBar.defaultProps = {
-  size: "medium"
-};
-InnerBar.defaultProps = {
-  progress: 0,
-  size: "medium"
-};
-InnerBar.propTypes = {
-  size: PropTypes.oneOf(PROGRESS_TRACKER_SIZES),
-  progress: PropTypes.number
-};
-StyledProgressTracker.propTypes = {
-  theme: PropTypes.object
-};
-StyledValuesLabel.propTypes = {
-  position: PropTypes.oneOf(["top", "bottom", "left", "right"])
-};
-StyledValue.propTypes = {
-  isMaxValue: PropTypes.bool
-};
-StyledProgressBar.propTypes = {
-  size: PropTypes.oneOf(PROGRESS_TRACKER_SIZES)
-};
 export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription };

package/esm/components/select/select-list/select-list.component.js

@@ -252,7 +252,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       onSelectListClose();
     }
   }, [onSelectListClose]);
-  useModalManager(isOpen, handleEscapeKey, listRef);
+  useModalManager({
+    open: isOpen,
+    closeModal: handleEscapeKey,
+    modalRef: listRef,
+    triggerRefocusOnClose: false
+  });
   const handleListScroll = useCallback(event => {
     const element = event.target;
     /* istanbul ignore else */

package/esm/components/toast/toast.component.js

@@ -44,7 +44,11 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       onDismiss(ev);
     }
   }, [onDismiss]);
-  useModalManager(open, dismissToast, refToPass);
+  useModalManager({
+    open,
+    closeModal: dismissToast,
+    modalRef: refToPass
+  });
   useEffect(() => {
     /* istanbul ignore next */
     if (timer.current) clearTimeout(timer.current);

package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js

@@ -18,7 +18,11 @@ export default ((mainControlRef, childrenRefs, hide, isOpen) => {
   }, [refocusMainControl]); // useModalmanager is used here to handle the escape key
   // and to ensure that closing the menu does not close the modal
 
-  useModalManager(isOpen, handleEscapeKey, mainControlRef);
+  useModalManager({
+    open: isOpen,
+    closeModal: handleEscapeKey,
+    modalRef: mainControlRef
+  });
   const handleKeyDown = useCallback(ev => {
     if (!(Events.isEnterKey(ev) || Events.isSpaceKey(ev))) {
       ev.preventDefault();

package/esm/hooks/__internal__/useModalManager/useModalManager.d.ts

@@ -1,3 +1,10 @@
 import React from "react";
-declare const useModalManager: (open: boolean, closeModal: (e: KeyboardEvent) => void, modalRef: React.RefObject<HTMLElement>, setTriggerRefocusFlag?: ((flag: boolean) => void) | undefined) => void;
+declare type UseModalManagerArgs = {
+    open: boolean;
+    closeModal: (e: KeyboardEvent) => void;
+    modalRef: React.RefObject<HTMLElement>;
+    setTriggerRefocusFlag?: (flag: boolean) => void;
+    triggerRefocusOnClose?: boolean;
+};
+declare const useModalManager: ({ open, closeModal, modalRef, setTriggerRefocusFlag, triggerRefocusOnClose, }: UseModalManagerArgs) => void;
 export default useModalManager;