carbon-react 99.0.1 → 100.1.1

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -31,8 +31,10 @@ const FocusTrap = ({
   const [focusableElements, setFocusableElements] = (0, _react.useState)();
   const [firstElement, setFirstElement] = (0, _react.useState)();
   const [lastElement, setLastElement] = (0, _react.useState)();
+  const [currentFocusedElement, setCurrentFocusedElement] = (0, _react.useState)();
   const {
-    isAnimationComplete
+    isAnimationComplete,
+    triggerRefocusFlag
   } = (0, _react.useContext)(_modal.ModalContext);
   const hasNewInputs = (0, _react.useCallback)(candidate => {
     if (!focusableElements || candidate.length !== focusableElements.length) {
@@ -114,6 +116,33 @@ const FocusTrap = ({
       document.removeEventListener("keydown", trapFn);
     };
   }, [firstElement, lastElement, focusableElements, bespokeTrap]);
+  const updateCurrentFocusedElement = (0, _react.useCallback)(() => {
+    const element = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.find(el => el === document.activeElement);
+
+    if (element) {
+      setCurrentFocusedElement(element);
+    }
+  }, [focusableElements]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener("focusin", updateCurrentFocusedElement);
+    return () => {
+      document.removeEventListener("focusin", updateCurrentFocusedElement);
+    };
+  }, [updateCurrentFocusedElement]);
+  const refocusTrap = (0, _react.useCallback)(() => {
+    /* istanbul ignore else */
+    if (currentFocusedElement && !currentFocusedElement.hasAttribute("disabled")) {
+      // the trap breaks if it tries to refocus a disabled element
+      (0, _focusTrapUtils.setElementFocus)(currentFocusedElement);
+    } else if (firstElement) {
+      (0, _focusTrapUtils.setElementFocus)(firstElement);
+    }
+  }, [currentFocusedElement, firstElement]);
+  (0, _react.useEffect)(() => {
+    if (triggerRefocusFlag) {
+      refocusTrap();
+    }
+  }, [triggerRefocusFlag, refocusTrap]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: trapRef
   }, children);

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,282 +25,240 @@ var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-conte
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _extends() { _extends = Object.assign || 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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
-let DateRange = /*#__PURE__*/function (_React$Component) {
-  _inherits(DateRange, _React$Component);
-
-  var _super = _createSuper(DateRange);
-
-  function DateRange(...args) {
-    var _this;
-
-    _classCallCheck(this, DateRange);
-
-    _this = _super.call(this, ...args);
-
-    _defineProperty(_assertThisInitialized(_this), "localeData", {
-      locale: _this.context.locale(),
-      formats: _this.context.date.formats.inputs(),
-      format: _this.context.date.formats.javascript()
+const DateRange = ({
+  defaultValue,
+  endDateProps = {},
+  id,
+  labelsInline,
+  name,
+  onBlur,
+  onChange,
+  startDateProps = {},
+  tooltipPosition,
+  validationOnLabel,
+  value,
+  ...rest
+}) => {
+  const {
+    locale,
+    date
+  } = (0, _react.useContext)(_i18nContext.default);
+  const format = date.formats.javascript();
+  const formats = date.formats.inputs();
+  const localeData = (0, _react.useMemo)(() => ({
+    locale: locale(),
+    formats,
+    format
+  }), [format, formats, locale]);
+  const inlineLabelWidth = 40;
+
+  const today = _date2.default.todayFormatted();
+
+  const isControlled = value !== undefined;
+  const startDateInputRef = (0, _react.useRef)();
+  const endDateInputRef = (0, _react.useRef)();
+  /** The startDate value */
+
+  const getStartDate = (0, _react.useCallback)(() => {
+    const {
+      value: startValue
+    } = startDateProps;
+    const computedValue = isControlled ? value : defaultValue;
+    return startValue || computedValue ? computedValue[0] : undefined;
+  }, [defaultValue, isControlled, startDateProps, value]);
+  /** The endDate value */
+
+  const getEndDate = (0, _react.useCallback)(() => {
+    const {
+      value: endValue
+    } = endDateProps;
+    const computedValue = isControlled ? value : defaultValue;
+    return endValue || computedValue ? computedValue[1] : undefined;
+  }, [defaultValue, isControlled, endDateProps, value]);
+  const [startDateValue, setStartDateValue] = (0, _react.useState)({
+    formattedValue: _date2.default.formatDateToCurrentLocale({
+      value: getStartDate(),
+      ...localeData
+    }),
+    rawValue: _date2.default.formatValue({
+      value: getStartDate() || (!isControlled ? today : ""),
+      ...localeData
+    })
+  });
+  const [endDateValue, setEndDateValue] = (0, _react.useState)({
+    formattedValue: _date2.default.formatDateToCurrentLocale({
+      value: getEndDate(),
+      ...localeData
+    }),
+    rawValue: _date2.default.formatValue({
+      value: getEndDate() || (!isControlled ? today : ""),
+      ...localeData
+    })
+  });
+  const updateValues = (0, _react.useCallback)(() => {
+    setStartDateValue({
+      formattedValue: _date2.default.formatDateToCurrentLocale({
+        value: getStartDate(),
+        ...localeData
+      }),
+      rawValue: _date2.default.formatValue({
+        value: getStartDate() || today,
+        ...localeData
+      })
     });
+    setEndDateValue({
+      formattedValue: _date2.default.formatDateToCurrentLocale({
+        value: getEndDate(),
+        ...localeData
+      }),
+      rawValue: _date2.default.formatValue({
+        value: getEndDate() || today,
+        ...localeData
+      })
+    });
+  }, [getEndDate, getStartDate, localeData, today]);
 
-    _defineProperty(_assertThisInitialized(_this), "today", _date2.default.todayFormatted());
-
-    _defineProperty(_assertThisInitialized(_this), "isControlled", _this.props.value !== undefined);
-
-    _defineProperty(_assertThisInitialized(_this), "startDateInputRef", /*#__PURE__*/_react.default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "endDateInputRef", /*#__PURE__*/_react.default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "isBlurBlocked", true);
+  function usePrevious(arg) {
+    const ref = (0, _react.useRef)();
+    (0, _react.useEffect)(() => {
+      ref.current = arg;
+    });
+    return ref.current;
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "inlineLabelWidth", 40);
+  const previousValue = usePrevious(value);
+  (0, _react.useEffect)(() => {
+    const hasPreviousValues = previousValue === null || previousValue === void 0 ? void 0 : previousValue.length;
+    const hasUpdated = isControlled && hasPreviousValues && (value[0] !== previousValue[0] || value[1] !== previousValue[1]);
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      startDateValue: {
-        formattedValue: _date2.default.formatDateToCurrentLocale({
-          value: _this.startDate,
-          ..._this.localeData
+    if (hasUpdated) {
+      updateValues();
+    }
+  }, [value, previousValue, updateValues, isControlled]);
+  const buildCustomEvent = (0, _react.useCallback)((changedDate, newValue) => {
+    const startValue = changedDate === "startDate" && newValue ? newValue : startDateValue;
+    const endValue = changedDate === "endDate" && newValue ? newValue : endDateValue;
+    return {
+      target: { ...(name && {
+          name
         }),
-        rawValue: _date2.default.formatValue({
-          value: _this.startDate || (!_this.isControlled ? _this.today : ""),
-          ..._this.localeData
-        })
-      },
-      endDateValue: {
-        formattedValue: _date2.default.formatDateToCurrentLocale({
-          value: _this.endDate,
-          ..._this.localeData
+        ...(id && {
+          id
         }),
-        rawValue: _date2.default.formatValue({
-          value: _this.endDate || (!_this.isControlled ? _this.today : ""),
-          ..._this.localeData
-        })
+        value: [startValue, endValue]
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "startDateOnChange", ev => {
-      _this._onChange("startDate", ev);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "endDateOnChange", ev => {
-      _this._onChange("endDate", ev);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "_onChange", (changedDate, ev) => {
-      _this.setState({
-        [`${changedDate}Value`]: { ...ev.target.value
-        }
-      }, () => {
-        if (_this.props.onChange) {
-          const event = _this.buildCustomEvent();
+    };
+  }, [endDateValue, id, name, startDateValue]);
 
-          _this.props.onChange(event);
-        }
+  const handleOnChange = (changedDate, ev) => {
+    if (changedDate === "startDate") {
+      setStartDateValue({ ...ev.target.value
       });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "_onBlur", () => {
-      if (_this.isBlurBlocked()) {
-        return;
-      }
-
-      if (_this.props.onBlur) {
-        const event = _this.buildCustomEvent();
-
-        _this.props.onBlur(event);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "isBlurBlocked", () => {
-      var _this$startDateInputR, _this$startDateInputR2, _this$startDateInputR3, _this$startDateInputR4, _this$endDateInputRef, _this$endDateInputRef2, _this$endDateInputRef3, _this$endDateInputRef4;
-
-      const startBlocked = ((_this$startDateInputR = _this.startDateInputRef) === null || _this$startDateInputR === void 0 ? void 0 : (_this$startDateInputR2 = _this$startDateInputR.current) === null || _this$startDateInputR2 === void 0 ? void 0 : _this$startDateInputR2.isBlurBlocked) || ((_this$startDateInputR3 = _this.startDateInputRef) === null || _this$startDateInputR3 === void 0 ? void 0 : (_this$startDateInputR4 = _this$startDateInputR3.current) === null || _this$startDateInputR4 === void 0 ? void 0 : _this$startDateInputR4.inputFocusedViaPicker);
-      const endBlocked = ((_this$endDateInputRef = _this.endDateInputRef) === null || _this$endDateInputRef === void 0 ? void 0 : (_this$endDateInputRef2 = _this$endDateInputRef.current) === null || _this$endDateInputRef2 === void 0 ? void 0 : _this$endDateInputRef2.isBlurBlocked) || ((_this$endDateInputRef3 = _this.endDateInputRef) === null || _this$endDateInputRef3 === void 0 ? void 0 : (_this$endDateInputRef4 = _this$endDateInputRef3.current) === null || _this$endDateInputRef4 === void 0 ? void 0 : _this$endDateInputRef4.inputFocusedViaPicker);
-      return startBlocked || endBlocked;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "buildCustomEvent", () => {
-      const {
-        startDateValue,
-        endDateValue
-      } = _this.state;
-      const {
-        name,
-        id
-      } = _this.props;
-      return {
-        target: { ...(name && {
-            name
-          }),
-          ...(id && {
-            id
-          }),
-          value: [startDateValue, endDateValue]
-        }
-      };
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusStart", () => {
-      _this.blockBlur("start");
-
-      _this.endDateInputRef.current.closeDatePicker();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusEnd", () => {
-      _this.blockBlur("end");
-
-      _this.startDateInputRef.current.closeDatePicker();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "blockBlur", id => {
-      if (id === "start") {
-        _this.startDateInputRef.current.isBlurBlocked = true;
-        _this.startDateInputRef.current.inputFocusedViaPicker = true;
-      } else {
-        _this.endDateInputRef.current.isBlurBlocked = true;
-        _this.endDateInputRef.current.inputFocusedViaPicker = true;
-      }
-    });
-
-    return _this;
-  }
-
-  _createClass(DateRange, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (this.hasUpdated(prevProps)) {
-        this.updateValues(this.props.value);
-      }
-    }
-  }, {
-    key: "hasUpdated",
-    value: function hasUpdated(prevProps) {
-      return this.isControlled && (this.props.value[0] !== prevProps.value[0] || this.props.value[1] !== prevProps.value[1]);
-    }
-  }, {
-    key: "updateValues",
-    value: function updateValues() {
-      this.setState({
-        startDateValue: {
-          formattedValue: _date2.default.formatDateToCurrentLocale({
-            value: this.startDate,
-            ...this.localeData
-          }),
-          rawValue: _date2.default.formatValue({
-            value: this.startDate || this.today,
-            ...this.localeData
-          })
-        },
-        endDateValue: {
-          formattedValue: _date2.default.formatDateToCurrentLocale({
-            value: this.endDate,
-            ...this.localeData
-          }),
-          rawValue: _date2.default.formatValue({
-            value: this.endDate || this.today,
-            ...this.localeData
-          })
-        }
+    } else {
+      setEndDateValue({ ...ev.target.value
       });
     }
-  }, {
-    key: "startDate",
-    get:
-    /** The startDate value */
-    function () {
-      const value = this.isControlled ? this.props.value : this.props.defaultValue;
-
-      if (this.props.startDateProps && this.props.startDateProps.value) {
-        return this.props.startDateProps.value;
-      }
 
-      return value ? value[0] : undefined;
+    if (onChange) {
+      const event = buildCustomEvent(changedDate, ev.target.value);
+      onChange(event);
     }
-    /** The endDate value */
+  };
 
-  }, {
-    key: "endDate",
-    get: function () {
-      const value = this.isControlled ? this.props.value : this.props.defaultValue;
+  const startDateOnChange = ev => {
+    handleOnChange("startDate", ev);
+  };
 
-      if (this.props.endDateProps && this.props.endDateProps.value) {
-        return this.props.endDateProps.value;
-      }
+  const endDateOnChange = ev => {
+    handleOnChange("endDate", ev);
+  };
+
+  const isBlurBlocked = () => {
+    var _startDateInputRef$cu, _startDateInputRef$cu2, _endDateInputRef$curr, _endDateInputRef$curr2;
 
-      return value ? value[1] : undefined;
+    const startBlocked = (startDateInputRef === null || startDateInputRef === void 0 ? void 0 : (_startDateInputRef$cu = startDateInputRef.current) === null || _startDateInputRef$cu === void 0 ? void 0 : _startDateInputRef$cu.isBlurBlocked) || (startDateInputRef === null || startDateInputRef === void 0 ? void 0 : (_startDateInputRef$cu2 = startDateInputRef.current) === null || _startDateInputRef$cu2 === void 0 ? void 0 : _startDateInputRef$cu2.inputFocusedViaPicker);
+    const endBlocked = (endDateInputRef === null || endDateInputRef === void 0 ? void 0 : (_endDateInputRef$curr = endDateInputRef.current) === null || _endDateInputRef$curr === void 0 ? void 0 : _endDateInputRef$curr.isBlurBlocked) || (endDateInputRef === null || endDateInputRef === void 0 ? void 0 : (_endDateInputRef$curr2 = endDateInputRef.current) === null || _endDateInputRef$curr2 === void 0 ? void 0 : _endDateInputRef$curr2.inputFocusedViaPicker);
+    return startBlocked || endBlocked;
+  };
+
+  const handleOnBlur = () => {
+    if (isBlurBlocked()) {
+      return;
     }
-    /** Handle focus on start date field */
-
-  }, {
-    key: "dateProps",
-    value: function dateProps(propsKey) {
-      const dateProps = this.props[`${propsKey}DateProps`] || {};
-      return {
-        label: this.props[`${propsKey}Label`],
-        labelInline: this.props.labelsInline,
-        value: this.state[`${propsKey}DateValue`].rawValue,
-        error: this.props[`${propsKey}Error`],
-        warning: this.props[`${propsKey}Warning`],
-        info: this.props[`${propsKey}Info`],
-        validationOnLabel: this.props.validationOnLabel,
-        onBlur: this._onBlur,
-        onChange: this[`${propsKey}DateOnChange`],
-        ...dateProps
-      };
+
+    if (onBlur) {
+      const event = buildCustomEvent();
+      onBlur(event);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_dateRange.default, _extends({}, (0, _tags.default)("date-range", this.props), {
-        labelsInline: this.props.labelsInline
-      }, (0, _utils.filterStyledSystemMarginProps)(this.props)), /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, this.dateProps("start"), {
-        onFocus: this.focusStart,
-        "data-element": "start-date",
-        ref: this.startDateInputRef,
-        labelWidth: this.inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
-        ,
-        tooltipPosition: this.props.tooltipPosition
-      })), /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, this.dateProps("end"), {
-        onFocus: this.focusEnd,
-        "data-element": "end-date",
-        ref: this.endDateInputRef,
-        labelWidth: this.inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
-        ,
-        tooltipPosition: this.props.tooltipPosition
-      })));
+  };
+
+  const blockBlur = blockId => {
+    if (blockId === "start") {
+      startDateInputRef.current.isBlurBlocked = true;
+      startDateInputRef.current.inputFocusedViaPicker = true;
+    } else {
+      endDateInputRef.current.isBlurBlocked = true;
+      endDateInputRef.current.inputFocusedViaPicker = true;
     }
-  }]);
-
-  return DateRange;
-}(_react.default.Component);
+  };
+
+  const focusStart = () => {
+    blockBlur("start");
+    endDateInputRef.current.closeDatePicker();
+  };
+
+  const focusEnd = () => {
+    blockBlur("end");
+    startDateInputRef.current.closeDatePicker();
+  };
+
+  const dateProps = propsKey => {
+    const props = propsKey === "start" ? startDateProps : endDateProps;
+    const {
+      rawValue
+    } = propsKey === "start" ? startDateValue : endDateValue;
+    const onChangeCallback = propsKey === "start" ? startDateOnChange : endDateOnChange;
+    return {
+      label: rest[`${propsKey}Label`],
+      labelInline: labelsInline,
+      value: rawValue,
+      error: rest[`${propsKey}Error`],
+      warning: rest[`${propsKey}Warning`],
+      info: rest[`${propsKey}Info`],
+      validationOnLabel,
+      onBlur: handleOnBlur,
+      onChange: onChangeCallback,
+      ...props
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_dateRange.default, _extends({}, (0, _tags.default)("date-range", rest), {
+    labelsInline: labelsInline
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, dateProps("start"), {
+    onFocus: focusStart,
+    "data-element": "start-date",
+    ref: startDateInputRef,
+    labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
+    ,
+    tooltipPosition: tooltipPosition
+  })), /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, dateProps("end"), {
+    onFocus: focusEnd,
+    "data-element": "end-date",
+    ref: endDateInputRef,
+    labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
+    ,
+    tooltipPosition: tooltipPosition
+  })));
+};
 
-DateRange.contextType = _i18nContext.default;
 DateRange.propTypes = {
   /** Filtered styled system margin props */
   ...marginPropTypes,

package/lib/components/date-range/date-range.d.ts

@@ -81,6 +81,6 @@ export interface DateRangeProps extends MarginProps {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 
-declare class DateRange extends React.Component<DateRangeProps> {}
+declare function DateRange(props: DateRangeProps): JSX.Element;
 
 export default DateRange;

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

@@ -17,6 +17,8 @@ function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _
 
 function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
 
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
 function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
 
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
@@ -25,39 +27,73 @@ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) {
 
 var _modalList = /*#__PURE__*/new WeakMap();
 
+var _getTopModal = /*#__PURE__*/new WeakSet();
+
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
     _classCallCheck(this, ModalManagerInstance);
 
+    _getTopModal.add(this);
+
     _modalList.set(this, {
       writable: true,
       value: []
     });
 
-    _defineProperty(this, "addModal", modal => {
-      _classPrivateFieldGet(this, _modalList).push(modal);
+    _defineProperty(this, "addModal", (modal, setTriggerRefocusFlag) => {
+      const {
+        modal: topModal,
+        setTriggerRefocusFlag: setTrapFlag
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (topModal && setTrapFlag) {
+        setTrapFlag(false);
+      }
+
+      _classPrivateFieldGet(this, _modalList).push({
+        modal,
+        setTriggerRefocusFlag
+      });
     });
   }
 
   _createClass(ModalManagerInstance, [{
     key: "isTopmost",
     value: function isTopmost(modal) {
-      if (!modal || !_classPrivateFieldGet(this, _modalList).length) {
+      const {
+        modal: topModal
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (!modal || !topModal) {
         return false;
       }
 
-      return _classPrivateFieldGet(this, _modalList).indexOf(modal) === _classPrivateFieldGet(this, _modalList).length - 1;
+      return modal === topModal;
     }
   }, {
     key: "removeModal",
     value: function removeModal(modal) {
-      const modalIndex = _classPrivateFieldGet(this, _modalList).indexOf(modal);
+      const modalIndex = _classPrivateFieldGet(this, _modalList).findIndex(({
+        modal: m
+      }) => m === modal);
 
       if (modalIndex === -1) {
         return;
       }
 
       _classPrivateFieldGet(this, _modalList).splice(modalIndex, 1);
+
+      if (!_classPrivateFieldGet(this, _modalList).length) {
+        return;
+      }
+
+      const {
+        setTriggerRefocusFlag
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (setTriggerRefocusFlag) {
+        setTriggerRefocusFlag(true);
+      }
     }
   }, {
     key: "clearList",
@@ -69,6 +105,14 @@ let ModalManagerInstance = /*#__PURE__*/function () {
   return ModalManagerInstance;
 }();
 
+function _getTopModal2() {
+  if (!_classPrivateFieldGet(this, _modalList).length) {
+    return {};
+  }
+
+  return _classPrivateFieldGet(this, _modalList)[_classPrivateFieldGet(this, _modalList).length - 1];
+}
+
 const ModalManager = new ModalManagerInstance();
 var _default = ModalManager;
 exports.default = _default;

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

@@ -46,6 +46,7 @@ const Modal = ({
   const modalRegistered = (0, _react.useRef)(false);
   const originalOverflow = (0, _react.useRef)(undefined);
   const [isAnimationComplete, setAnimationComplete] = (0, _react.useState)(false);
+  const [triggerRefocusFlag, setTriggerRefocusFlag] = (0, _react.useState)(false);
   const setOverflow = (0, _react.useCallback)(() => {
     if (typeof originalOverflow.current === "undefined" && !enableBackgroundUI) {
       originalOverflow.current = document.documentElement.style.overflow;
@@ -110,7 +111,7 @@ const Modal = ({
   const registerModal = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (!modalRegistered.current) {
-      _modalManager.default.addModal(ref.current);
+      _modalManager.default.addModal(ref.current, setTriggerRefocusFlag);
 
       modalRegistered.current = true;
     }
@@ -164,7 +165,8 @@ const Modal = ({
     timeout: timeout
   }, /*#__PURE__*/_react.default.createElement(ModalContext.Provider, {
     value: {
-      isAnimationComplete
+      isAnimationComplete,
+      triggerRefocusFlag
     }
   }, content)))));
 };

package/lib/components/pages/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./pages";
+export { default as Page } from "./page/page";

package/lib/components/pages/index.js

@@ -9,7 +9,15 @@ Object.defineProperty(exports, "default", {
     return _pages.default;
   }
 });
+Object.defineProperty(exports, "Page", {
+  enumerable: true,
+  get: function () {
+    return _page.default;
+  }
+});
 
 var _pages = _interopRequireDefault(require("./pages.component"));
 
+var _page = _interopRequireDefault(require("./page/page.component"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1 @@
+export { default } from "./progress-tracker";

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _progressTracker.default;
+  }
+});
+
+var _progressTracker = _interopRequireDefault(require("./progress-tracker.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/progress-tracker/progress-tracker-test.stories.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _progressTracker = require("./progress-tracker.config");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  component: _.default,
+  title: "Progress Tracker/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    size: {
+      options: _progressTracker.PROGRESS_TRACKER_SIZES,
+      control: {
+        type: "select"
+      }
+    },
+    progress: {
+      control: {
+        type: "number"
+      }
+    },
+    currentProgressLabel: {
+      options: ["", "$100", "100ml"],
+      control: {
+        type: "select"
+      }
+    },
+    maxProgressLabel: {
+      options: ["", "$200", "200ml"],
+      control: {
+        type: "select"
+      }
+    },
+    variant: {
+      options: _progressTracker.PROGRESS_TRACKER_VARIANTS,
+      control: {
+        type: "select"
+      }
+    },
+    orientation: {
+      options: ["horizontal", "vertical"],
+      control: {
+        type: "select"
+      }
+    },
+    direction: {
+      options: ["up", "down"],
+      control: {
+        type: "select"
+      }
+    },
+    labelsPosition: {
+      options: ["top", "bottom", "left", "right"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+const Default = ({ ...args
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_.default, args);
+};
+
+exports.Default = Default;
+Default.storyName = "default";

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

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+
+var _utils = require("../../style/utils");
+
+var _progressTracker = require("./progress-tracker.style");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
+
+const ProgressTracker = ({
+  size = "medium",
+  progress = 0,
+  showDefaultLabels = false,
+  currentProgressLabel,
+  maxProgressLabel,
+  variant = "default",
+  orientation = "horizontal",
+  direction = "up",
+  labelsPosition,
+  ...rest
+}) => {
+  const isVertical = orientation === "vertical";
+  const prefixLabels = !isVertical && labelsPosition !== "bottom" || isVertical && labelsPosition === "left";
+
+  const renderValueLabels = () => {
+    if (!showDefaultLabels && !currentProgressLabel && !maxProgressLabel) {
+      return null;
+    }
+
+    const label = (value, defaultValue) => {
+      if (value) {
+        return value;
+      }
+
+      return showDefaultLabels ? defaultValue : undefined;
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValuesLabel, {
+      position: labelsPosition,
+      isVertical: isVertical
+    }, isVertical && direction === "up" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
+      isMaxValue: true
+    }, label(maxProgressLabel, "100%")), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, null, label(currentProgressLabel, `${progress}%`))), (direction === "down" || !isVertical) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, null, label(currentProgressLabel, `${progress}%`)), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
+      isMaxValue: true
+    }, label(maxProgressLabel, "100%"))));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
+    size: size,
+    isVertical: isVertical
+  }, rest, (0, _tags.default)("progress-bar", rest)), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
+    direction: isVertical ? direction : undefined,
+    isVertical: isVertical,
+    size: size
+  }, /*#__PURE__*/_react.default.createElement(_progressTracker.InnerBar, {
+    isVertical: isVertical,
+    size: size,
+    progress: progress,
+    variant: variant
+  })), !prefixLabels && renderValueLabels());
+};
+
+ProgressTracker.propTypes = { ...marginPropTypes,
+
+  /** Size of the progress bar. */
+  size: _propTypes.default.oneOf(["small", "medium", "large"]),
+
+  /** Current progress (percentage). */
+  progress: _propTypes.default.number,
+
+  /** Flag to control whether the default value labels (as percentages) should be rendered. */
+  showDefaultLabels: _propTypes.default.bool,
+
+  /** Value to display as current progress. */
+  currentProgressLabel: _propTypes.default.string,
+
+  /** Value to display as the maximum progress limit. */
+  maxProgressLabel: _propTypes.default.string,
+
+  /**
+   * Sets the colour of the bar that shows the current progress.
+   * The "traffic" variant changes the colour of status bar depending on current progress.
+   */
+  variant: _propTypes.default.oneOf(["default", "traffic"]),
+
+  /** The orientation of the component. */
+  orientation: _propTypes.default.oneOf(["horizontal", "vertical"]),
+
+  /** The direction the bar should move as progress increases, only applies in vertical orientation. */
+  direction: _propTypes.default.oneOf(["up", "down"]),
+
+  /**
+   * The position the value label are rendered in.
+   * Top/bottom apply to horizontal and left/right to vertical orientation.
+   */
+  labelsPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+};
+var _default = ProgressTracker;
+exports.default = _default;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PROGRESS_TRACKER_VARIANTS = exports.PROGRESS_TRACKER_SIZES = exports.OUTER_TRACKER_LENGTH = void 0;
+const OUTER_TRACKER_LENGTH = "256px";
+exports.OUTER_TRACKER_LENGTH = OUTER_TRACKER_LENGTH;
+const PROGRESS_TRACKER_SIZES = ["small", "medium", "large"];
+exports.PROGRESS_TRACKER_SIZES = PROGRESS_TRACKER_SIZES;
+const PROGRESS_TRACKER_VARIANTS = ["default", "traffic"];
+exports.PROGRESS_TRACKER_VARIANTS = PROGRESS_TRACKER_VARIANTS;

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

@@ -0,0 +1,32 @@
+import { MarginProps } from "styled-system";
+
+export interface ProgressBarProps extends MarginProps {
+  /** Size of the progressBar. */
+  size?: "small" | "medium" | "large";
+  /** Current progress (percentage). */
+  progress?: number;
+  /** Flag to control whether the default value labels (as percentages) should be rendered. */
+  showDefaultLabels?: boolean;
+  /** Value to display as current progress. */
+  currentProgressLabel?: string;
+  /** Value to display as the maximum progress limit. */
+  maxProgressLabel?: string;
+  /**
+   * Sets the colour of the bar that shows the current progress.
+   * The "traffic" variant changes the colour of status bar depending on current progress.
+   * */
+  variant?: "default" | "traffic";
+  /** The orientation of the component. */
+  orientation?: "horizontal" | "vertical";
+  /** The direction the bar should move as progress increases, only applies in vertical orientation. */
+  direction?: "up" | "down";
+  /**
+   * The position the value label are rendered in.
+   * Top/bottom apply to horizontal and left/right to vertical orientation.
+   */
+  labelsPosition?: "top" | "bottom" | "left" | "right";
+}
+
+declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+
+export default ProgressBar;

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

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledValue = exports.StyledValuesLabel = exports.StyledProgressTracker = exports.InnerBar = exports.StyledProgressBar = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledSystem = require("styled-system");
+
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
+var _progressTracker = require("./progress-tracker.config");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StyledProgressTracker = _styledComponents.default.div`
+  ${_styledSystem.margin}
+  text-align: center;
+  white-space: nowrap;
+
+  ${({
+  isVertical
+}) => (0, _styledComponents.css)`
+    ${!isVertical && `
+      width: ${_progressTracker.OUTER_TRACKER_LENGTH};
+    `}
+    ${isVertical && `
+      height: ${_progressTracker.OUTER_TRACKER_LENGTH};
+      display: flex;
+    `}
+  `}
+`;
+exports.StyledProgressTracker = StyledProgressTracker;
+const StyledProgressBar = _styledComponents.default.span`
+  ${({
+  direction,
+  isVertical,
+  size,
+  theme
+}) => (0, _styledComponents.css)`
+    display: flex;
+    position: relative;
+    background-color: ${theme.progressTracker.background};
+
+    ${!isVertical && (0, _styledComponents.css)`
+      overflow-x: hidden;
+      height: ${getHeight(size)};
+      width: 100%;
+    `}
+    ${isVertical && (0, _styledComponents.css)`
+      overflow-y: hidden;
+      width: ${getHeight(size)};
+      height: 100%;
+
+      ${direction === "up" && `
+        align-items: flex-end;
+      `}
+    `}
+  `}
+`;
+exports.StyledProgressBar = StyledProgressBar;
+const StyledValue = _styledComponents.default.span`
+  ${({
+  isMaxValue,
+  theme
+}) => (0, _styledComponents.css)`
+    ${isMaxValue && `
+      color: ${theme.text.placeholder};
+    `}
+    ${!isMaxValue && `
+      font-weight: bold;
+    `}
+  `}
+`;
+exports.StyledValue = StyledValue;
+const StyledValuesLabel = _styledComponents.default.span`
+  text-align: start;
+  display: flex;
+  justify-content: space-between;
+  ${({
+  isVertical,
+  position
+}) => (0, _styledComponents.css)`
+    ${isVertical && (0, _styledComponents.css)`
+      flex-direction: column;
+
+      ${position !== "left" && (0, _styledComponents.css)`
+        padding-left: 4px;
+      `}
+
+      ${position === "left" && (0, _styledComponents.css)`
+        padding-right: 4px;
+
+        ${StyledValue} {
+          text-align: right;
+        }
+      `}
+    `}
+
+    ${!isVertical && (0, _styledComponents.css)`
+      ${position !== "bottom" && (0, _styledComponents.css)`
+        padding-bottom: 4px;
+      `}
+
+      ${position === "bottom" && (0, _styledComponents.css)`
+        padding-top: 4px;
+      `}
+    `}
+  `}
+`;
+exports.StyledValuesLabel = StyledValuesLabel;
+const InnerBar = _styledComponents.default.span`
+  ${({
+  isVertical,
+  progress,
+  size,
+  theme,
+  variant
+}) => (0, _styledComponents.css)`
+    position: absolute;
+    left: 0;
+    background-color: ${getInnerBarColour(variant, progress, theme)};
+
+    ${!isVertical && (0, _styledComponents.css)`
+      width: calc(${_progressTracker.OUTER_TRACKER_LENGTH} * ${progress / 100});
+      min-width: 2px;
+      height: ${getHeight(size)};
+    `}
+    ${isVertical && (0, _styledComponents.css)`
+      height: calc(${_progressTracker.OUTER_TRACKER_LENGTH} * ${progress / 100});
+      min-height: 2px;
+      width: ${getHeight(size)};
+    `}
+  `}
+`;
+exports.InnerBar = InnerBar;
+
+function getHeight(size) {
+  switch (size) {
+    case "small":
+      return "4px";
+
+    case "large":
+      return "16px";
+
+    default:
+      return "8px";
+  }
+}
+
+function getInnerBarColour(variant, progress, theme) {
+  if (progress >= 100) return theme.colors.success;
+  if (variant === "default") return theme.progressTracker.innerBackground;
+  if (progress < 20) return theme.colors.error;
+  return theme.progressTracker.trafficNeutral;
+}
+
+StyledProgressTracker.defaultProps = {
+  theme: _base.default
+};
+StyledProgressBar.defaultProps = {
+  theme: _base.default,
+  size: "medium"
+};
+InnerBar.propTypes = {
+  size: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_SIZES),
+  progress: _propTypes.default.number,
+  variant: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_VARIANTS)
+};
+InnerBar.defaultProps = {
+  progress: 0,
+  theme: _base.default,
+  size: "medium",
+  variant: "default"
+};
+StyledValue.defaultProps = {
+  theme: _base.default
+};
+StyledProgressBar.propTypes = {
+  size: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_SIZES)
+};

package/lib/style/themes/base/base-theme.config.js

@@ -51,6 +51,11 @@ var _default = palette => {
       },
       asterisk: palette.errorRed
     },
+    progressTracker: {
+      background: palette.slateTint(90),
+      innerBackground: palette.slateTint(40),
+      trafficNeutral: palette.productBlueShade(3)
+    },
     anchorNavigation: {
       divider: palette.slateTint(80),
       navItemHoverBackground: palette.slateTint(90)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "99.0.1",
+  "version": "100.1.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -18,7 +18,6 @@
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
     "test-cypress": "cypress open",
-    "cypress:ci": "cypress run --record --parallel",
     "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",
@@ -94,9 +93,9 @@
     "core-js": "^3.1.4",
     "cpy-cli": "^3.1.1",
     "cross-env": "^5.2.0",
-    "cypress": "^8.3.1",
+    "cypress": "^9.0.0",
     "cypress-axe": "^0.13.0",
-    "cypress-cucumber-preprocessor": "^4.2.0",
+    "cypress-cucumber-preprocessor": "^4.3.0",
     "cypress-each": "^1.5.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.5.1",