carbon-react 84.4.0 → 86.0.1

package/lib/components/carousel/carousel.component.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "Slide", {
 });
 exports.Carousel = exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -31,286 +31,151 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 
 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 _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-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 _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 _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-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 NEXT = "next";
 const PREVIOUS = "previous";
-const TRANSITION_TIME = 750;
-
-let BaseCarousel = /*#__PURE__*/function (_React$Component) {
-  _inherits(BaseCarousel, _React$Component);
 
-  var _super = _createSuper(BaseCarousel);
-
-  function BaseCarousel(...args) {
-    var _this;
+const BaseCarousel = ({
+  children,
+  className,
+  enableSlideSelector = true,
+  enablePreviousButton = true,
+  enableNextButton = true,
+  initialSlideIndex = 0,
+  onSlideChange,
+  slideIndex,
+  theme = _base.default,
+  ...props
+}) => {
+  const [selectedSlideIndex, setSelectedSlideIndex] = (0, _react.useState)(Number(slideIndex) || Number(initialSlideIndex));
+  const transitionDirection = (0, _react.useRef)(NEXT);
+  const lastSlideIndexProp = (0, _react.useRef)(props.slideIndex);
+  const id = (0, _guid.default)();
+  const numOfSlides = (0, _react.useMemo)(() => {
+    return Array.isArray(children) ? (0, _lodash.compact)(children).length : 1;
+  }, [children]);
+  const handleSlideChange = (0, _react.useCallback)(newIndex => {
+    setSelectedSlideIndex(newIndex);
+
+    if (onSlideChange) {
+      onSlideChange(newIndex, transitionDirection.current);
+    }
+  }, [onSlideChange]);
+  (0, _react.useEffect)(() => {
+    const newIndex = slideIndex;
+    const isNewIndexUndefined = typeof newIndex === "undefined";
+    const isTheSameIndex = newIndex === lastSlideIndexProp.current || newIndex === selectedSlideIndex;
+    if (isNewIndexUndefined || isTheSameIndex) return;
+
+    if (newIndex > selectedSlideIndex) {
+      transitionDirection.current = NEXT;
+    } else {
+      transitionDirection.current = PREVIOUS;
+    }
 
-    _classCallCheck(this, BaseCarousel);
+    lastSlideIndexProp.current = newIndex;
+    handleSlideChange(newIndex);
+  }, [handleSlideChange, slideIndex, selectedSlideIndex]);
 
-    _this = _super.call(this, ...args);
-    /** Direction of animation */
+  function onPreviousClick() {
+    const newIndex = selectedSlideIndex - 1;
+    transitionDirection.current = PREVIOUS;
+    handleSlideChange(newIndex);
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      // Currently selected slide
-      selectedSlideIndex: Number(_this.props.slideIndex) || Number(_this.props.initialSlideIndex),
-      disabled: false // Next/Previous buttons disabled state
+  function onNextClick() {
+    const newIndex = selectedSlideIndex + 1;
+    transitionDirection.current = NEXT;
+    handleSlideChange(newIndex);
+  }
 
-    });
+  function onSlideSelection(ev) {
+    const newSlideSelection = Number(ev.target.value);
+    transitionDirection.current = newSlideSelection > selectedSlideIndex ? NEXT : PREVIOUS;
+    handleSlideChange(newSlideSelection);
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "visibleSlide", () => {
-      let index = _this.state.selectedSlideIndex;
-      const visibleSlide = (0, _lodash.compact)(_react.default.Children.toArray(_this.props.children))[index];
-      index = visibleSlide.props.id || index;
-      const additionalProps = {
-        timeout: TRANSITION_TIME,
-        theme: _this.props.theme,
-        slideProps: {
-          className: visibleSlide.props.className,
-          "data-element": "visible-slide",
-          key: `carbon-slide-${index}`,
-          ...visibleSlide.props
-        }
-      };
-      return /*#__PURE__*/_react.default.cloneElement(visibleSlide, (0, _lodash.assign)({}, visibleSlide.props, additionalProps));
+  function visibleSlides() {
+    const arrayWithKeys = _react.default.Children.map(children, (element, key) => {
+      return /*#__PURE__*/_react.default.cloneElement(element, {
+        key: `slide-${(0, _guid.default)()}`,
+        id: key,
+        selectedIndex: selectedSlideIndex,
+        theme,
+        ...element.props
+      });
     });
 
-    _this.transitionDirection = NEXT;
-    _this.onPreviousClick = _this.onPreviousClick.bind(_assertThisInitialized(_this));
-    _this.onNextClick = _this.onNextClick.bind(_assertThisInitialized(_this));
-    _this.onSlideSelection = _this.onSlideSelection.bind(_assertThisInitialized(_this));
-    _this.previousButtonProps = _this.previousButtonProps.bind(_assertThisInitialized(_this));
-    _this.nextButtonProps = _this.nextButtonProps.bind(_assertThisInitialized(_this));
-    _this.numOfSlides = _this.numOfSlides.bind(_assertThisInitialized(_this));
-    _this.slideSelector = _this.slideSelector.bind(_assertThisInitialized(_this));
-    _this.id = (0, _guid.default)();
-    return _this;
+    return arrayWithKeys;
   }
 
-  _createClass(BaseCarousel, [{
-    key: "componentDidUpdate",
-    value:
-    /** A lifecycle method that is called before re-render. */
-    function componentDidUpdate(prevProps) {
-      if (this.props.slideIndex === prevProps.slideIndex) return;
-      if (typeof this.props.slideIndex === "undefined") return;
-      const newIndex = this.verifyNewIndex(this.props.slideIndex);
-      const currentIndex = this.state.selectedSlideIndex;
-      if (newIndex === currentIndex) return;
-
-      if (newIndex > currentIndex) {
-        this.transitionDirection = NEXT;
-      } else {
-        this.transitionDirection = PREVIOUS;
-      }
-
-      this.handleSlideChange(newIndex);
-    }
-    /** Handles clicking on the previous button */
-
-  }, {
-    key: "onPreviousClick",
-    value: function onPreviousClick() {
-      let newIndex = this.state.selectedSlideIndex - 1;
-
-      if (newIndex < 0) {
-        newIndex = this.numOfSlides() - 1;
-      }
-
-      this.transitionDirection = PREVIOUS;
-      this.handleSlideChange(newIndex);
-    }
-    /** Handles clicking on the next button */
-
-  }, {
-    key: "onNextClick",
-    value: function onNextClick() {
-      const newIndex = (this.state.selectedSlideIndex + 1) % this.numOfSlides();
-      this.transitionDirection = NEXT;
-      this.handleSlideChange(newIndex);
-    }
-    /** Handles clicking slide selector */
-
-  }, {
-    key: "onSlideSelection",
-    value: function onSlideSelection(ev) {
-      const newSlideSelection = Number(ev.target.value);
-      this.transitionDirection = newSlideSelection > this.state.selectedSlideIndex ? NEXT : PREVIOUS;
-      this.handleSlideChange(newSlideSelection);
-    }
-    /** Verifies the new index and corrects it if necessary */
-
-  }, {
-    key: "verifyNewIndex",
-    value: function verifyNewIndex(newIndex) {
-      if (newIndex < 0) {
-        // If the new index is negative, select the last slide
-        return this.numOfSlides() - 1;
-      }
-
-      if (newIndex > this.numOfSlides() - 1) {
-        // If the new index is bigger than the number of slides, select the first slide
-        return 0;
-      }
-
-      return newIndex;
+  function slideSelector() {
+    if (!enableSlideSelector) return null;
+    const buttons = [];
+
+    for (let i = 0; i < numOfSlides; i++) {
+      buttons.push( /*#__PURE__*/_react.default.createElement(_carousel.CarouselSelectorInputWrapperStyle, {
+        key: i,
+        "data-element": "selector-inputs"
+      }, /*#__PURE__*/_react.default.createElement(_carousel.CarouselSelectorInputStyle, {
+        "data-element": "selector-input",
+        name: `carousel-slide-${id}`,
+        id: `carousel-slide-${i}-${id}`,
+        type: "radio",
+        value: i,
+        onChange: onSlideSelection,
+        checked: selectedSlideIndex === i
+      }), /*#__PURE__*/_react.default.createElement(_carousel.CarouselSelectorLabelStyle, {
+        "data-element": "selector-label",
+        htmlFor: `carousel-slide-${i}-${id}`
+      })));
     }
-    /** Handle the slide change to the newIndex */
-
-  }, {
-    key: "handleSlideChange",
-    value: function handleSlideChange(newIndex) {
-      this.setState({
-        selectedSlideIndex: newIndex
-      });
 
-      if (this.props.onSlideChange) {
-        this.props.onSlideChange(newIndex, this.transitionDirection);
-      }
-    }
-    /** Gets the props for the previous button */
-
-  }, {
-    key: "previousButtonProps",
-    value: function previousButtonProps() {
-      return !this.state.disabled ? {
-        onClick: this.onPreviousClick
-      } : {};
-    }
-    /** Gets the props for the next button */
-
-  }, {
-    key: "nextButtonProps",
-    value: function nextButtonProps() {
-      return !this.state.disabled ? {
-        onClick: this.onNextClick
-      } : {};
-    }
-    /** Gets the number of slides */
+    return /*#__PURE__*/_react.default.createElement(_carousel.CarouselSelectorWrapperStyle, {
+      "data-element": "slide-selector"
+    }, buttons);
+  }
 
-  }, {
-    key: "numOfSlides",
-    value: function numOfSlides() {
-      return Array.isArray(this.props.children) ? (0, _lodash.compact)(this.props.children).length : 1;
-    }
-    /** Gets the currently visible slide */
-
-  }, {
-    key: "visibleSlides",
-    value: function visibleSlides() {
-      const arrayWithKeys = _react.default.Children.map(this.props.children, (element, key) => {
-        return /*#__PURE__*/_react.default.cloneElement(element, {
-          key: `slide-${(0, _guid.default)()}`,
-          id: key,
-          selectedIndex: this.state.selectedSlideIndex,
-          theme: this.props.theme,
-          ...element.props
-        });
-      });
+  function previousButton() {
+    if (!enablePreviousButton) return null;
+    const isDisabled = selectedSlideIndex === 0;
+    return /*#__PURE__*/_react.default.createElement(_carousel.CarouselPreviousButtonWrapperStyle, null, /*#__PURE__*/_react.default.createElement(_carousel.CarouselButtonStyle, {
+      onClick: onPreviousClick,
+      "data-element": "previous",
+      "aria-label": "previous",
+      disabled: isDisabled
+    }, /*#__PURE__*/_react.default.createElement(_carousel.CarouselStyledIconLeft, {
+      type: "chevron_down"
+    })));
+  }
 
-      return arrayWithKeys;
-    }
-    /** Renders the slideSelector footer */
-
-  }, {
-    key: "slideSelector",
-    value: function slideSelector() {
-      if (!this.props.enableSlideSelector) return null;
-      const buttons = [];
-
-      for (let i = 0; i < this.numOfSlides(); i++) {
-        buttons.push( /*#__PURE__*/_react.default.createElement(_carousel.CarouselSelectorInputWrapperStyle, {
-          key: i,
-          "data-element": "selector-inputs"
-        }, /*#__PURE__*/_react.default.createElement(_carousel.CarouselSelectorInputStyle, {
-          disabled: this.state.disabled,
-          "data-element": "selector-input",
-          name: `carousel-slide-${this.id}`,
-          id: `carousel-slide-${i}-${this.id}`,
-          type: "radio",
-          value: i,
-          onChange: this.onSlideSelection,
-          checked: this.state.selectedSlideIndex === i
-        }), /*#__PURE__*/_react.default.createElement(_carousel.CarouselSelectorLabelStyle, {
-          "data-element": "selector-label",
-          htmlFor: `carousel-slide-${i}-${this.id}`
-        })));
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_carousel.CarouselSelectorWrapperStyle, {
-        "data-element": "slide-selector"
-      }, buttons);
-    }
-    /** Renders the previous button */
-
-  }, {
-    key: "previousButton",
-    value: function previousButton() {
-      if (!this.props.enablePreviousButton) return null;
-      const isDisabled = this.state.selectedSlideIndex === 0;
-      return /*#__PURE__*/_react.default.createElement(_carousel.CarouselPreviousButtonWrapperStyle, null, /*#__PURE__*/_react.default.createElement(_carousel.CarouselButtonStyle, _extends({}, this.previousButtonProps(), {
-        "data-element": "previous",
-        "aria-label": "previous",
-        disabled: isDisabled
-      }), /*#__PURE__*/_react.default.createElement(_carousel.CarouselStyledIconLeft, {
-        type: "chevron_down"
-      })));
-    }
-    /** Renders the next button */
-
-  }, {
-    key: "nextButton",
-    value: function nextButton() {
-      if (!this.props.enableNextButton) return null;
-      const numberOfChildren = this.props.children.length;
-      const isDisabled = numberOfChildren === this.state.selectedSlideIndex + 1;
-      return /*#__PURE__*/_react.default.createElement(_carousel.CarouselNextButtonWrapperStyle, null, /*#__PURE__*/_react.default.createElement(_carousel.CarouselButtonStyle, _extends({}, this.nextButtonProps(), {
-        "data-element": "next",
-        "aria-label": "next",
-        type: "button",
-        disabled: isDisabled
-      }), /*#__PURE__*/_react.default.createElement(_carousel.CarouselStyledIconRight, {
-        type: "chevron_down"
-      })));
-    }
-    /** Renders the Slide Component */
-
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_carousel.CarouselWrapperStyle, _extends({
-        className: this.props.className
-      }, (0, _tags.default)("carousel", this.props)), /*#__PURE__*/_react.default.createElement("div", {
-        className: "carbon-carousel__content"
-      }, this.previousButton(), /*#__PURE__*/_react.default.createElement(_carousel.CarouselSliderWrapper, {
-        elementIndex: this.state.selectedSlideIndex
-      }, this.visibleSlides()), this.nextButton()), this.slideSelector());
-    }
-  }]);
+  function nextButton() {
+    if (!enableNextButton) return null;
+    const isDisabled = numOfSlides === selectedSlideIndex + 1;
+    return /*#__PURE__*/_react.default.createElement(_carousel.CarouselNextButtonWrapperStyle, null, /*#__PURE__*/_react.default.createElement(_carousel.CarouselButtonStyle, {
+      onClick: onNextClick,
+      "data-element": "next",
+      "aria-label": "next",
+      type: "button",
+      disabled: isDisabled
+    }, /*#__PURE__*/_react.default.createElement(_carousel.CarouselStyledIconRight, {
+      type: "chevron_down"
+    })));
+  }
 
-  return BaseCarousel;
-}(_react.default.Component);
+  return /*#__PURE__*/_react.default.createElement(_carousel.CarouselWrapperStyle, _extends({
+    className: className
+  }, (0, _tags.default)("carousel", props)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "carbon-carousel__content"
+  }, previousButton(), /*#__PURE__*/_react.default.createElement(_carousel.CarouselSliderWrapper, {
+    elementIndex: selectedSlideIndex
+  }, visibleSlides()), nextButton()), slideSelector());
+};
 
 BaseCarousel.propTypes = {
   /** [legacy] Custom className */
@@ -340,13 +205,6 @@ BaseCarousel.propTypes = {
   /** theme is used only to support legacy code */
   theme: _propTypes.default.object
 };
-BaseCarousel.defaultProps = {
-  initialSlideIndex: 0,
-  enableSlideSelector: true,
-  enablePreviousButton: true,
-  enableNextButton: true,
-  theme: _base.default
-};
 const Carousel = (0, _styledComponents.withTheme)(BaseCarousel);
 exports.Carousel = Carousel;
 Carousel.displayName = "Carousel";

package/lib/components/decimal/decimal.component.js

@@ -17,6 +17,8 @@ var _textbox = _interopRequireDefault(require("../textbox"));
 
 var _utils = require("../../style/utils");
 
+var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
+
 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); }
@@ -50,12 +52,12 @@ let Decimal = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Decimal);
 
-  function Decimal(props) {
+  function Decimal(props, context) {
     var _this;
 
     _classCallCheck(this, Decimal);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props, context);
 
     _defineProperty(_assertThisInitialized(_this), "emptyValue", _this.props.allowEmptyValue ? "" : "0.00");
 
@@ -164,7 +166,7 @@ let Decimal = /*#__PURE__*/function (_React$Component) {
       const separator = _this.getSeparator("decimal");
 
       const [integer, remainder] = value.split(".");
-      const formattedInteger = Intl.NumberFormat(_this.props.locale, {
+      const formattedInteger = Intl.NumberFormat(_this.props.locale || _this.context.locale(), {
         maximumFractionDigits: 0
       }).format(integer);
       let formattedNumber = formattedInteger;
@@ -251,7 +253,7 @@ let Decimal = /*#__PURE__*/function (_React$Component) {
     key: "getSeparator",
     value: function getSeparator(separatorType) {
       const numberWithGroupAndDecimalSeparator = 10000.1;
-      return Intl.NumberFormat(this.props.locale).formatToParts(numberWithGroupAndDecimalSeparator).find(part => part.type === separatorType).value;
+      return Intl.NumberFormat(this.props.locale || this.context.locale()).formatToParts(numberWithGroupAndDecimalSeparator).find(part => part.type === separatorType).value;
     }
   }, {
     key: "render",
@@ -259,6 +261,7 @@ let Decimal = /*#__PURE__*/function (_React$Component) {
       const {
         name,
         defaultValue,
+        locale,
         ...rest
       } = this.props;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, rest, {
@@ -278,6 +281,8 @@ let Decimal = /*#__PURE__*/function (_React$Component) {
   return Decimal;
 }(_react.default.Component);
 
+_defineProperty(Decimal, "contextType", _i18nContext.default);
+
 _defineProperty(Decimal, "maxPrecision", 15);
 
 Decimal.propTypes = {
@@ -353,15 +358,14 @@ Decimal.propTypes = {
   required: _propTypes.default.bool,
 
   /**
-   * The locale string - default en
+   * Override the locale string, default from I18nProvider
    */
   locale: _propTypes.default.string
 };
 Decimal.defaultProps = {
   align: "right",
   precision: 2,
-  allowEmptyValue: false,
-  locale: "en"
+  allowEmptyValue: false
 };
 var _default = Decimal;
 exports.default = _default;

package/lib/components/flat-table/flat-table-head/flat-table-head.component.js

@@ -45,7 +45,7 @@ const FlatTableHead = ({
        This is only needed when the preceding row has rowSpans applied, 
        as in any other use case the rows will all have FlatTableRowHeaders */
     const previousRowHasHeader = !!hasFlatTableRowHeader;
-    hasFlatTableRowHeader = child.props.children.find(c => c.type === _flatTableRowHeader.default);
+    hasFlatTableRowHeader = _react.default.Children.toArray(child.props.children).find(c => c.type === _flatTableRowHeader.default);
     return /*#__PURE__*/_react.default.cloneElement(child, { ...child.props,
       stickyOffset: rowHeights.slice(0, index).reduce((a, b) => a + b, 0),
       ref: refs[index],

package/lib/components/loader/loader-square.style.js

@@ -29,6 +29,34 @@ const loaderAnimation = (0, _styledComponents.keyframes)`
     transform: scale(1);
   }
 `;
+
+const getDimentions = size => {
+  let width;
+  let marginRight;
+
+  switch (size) {
+    case "medium":
+      width = "16px";
+      marginRight = "8px";
+      break;
+
+    case "large":
+      width = "20px";
+      marginRight = "8px";
+      break;
+
+    default:
+      width = "12px";
+      marginRight = "6px";
+  }
+
+  return `
+  width: ${width};
+  height: ${width};
+  margin-right: ${marginRight};
+  `;
+};
+
 const StyledLoaderSquare = _styledComponents.default.div`
   ${({
   theme,
@@ -39,9 +67,7 @@ const StyledLoaderSquare = _styledComponents.default.div`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: ${theme.colors.primary};
     display: inline-block;
-    height: ${size === "large" ? "16px" : "8px"};
-    width: ${size === "large" ? "16px" : "8px"};
-    margin-right: ${size === "large" ? "10px" : "6px"};
+    ${getDimentions(size)}
 
     ${isInsideButton && (0, _styledComponents.css)`
       background-color: ${isActive ? theme.colors.white : theme.colors.border};

package/lib/components/loader/loader.component.js

@@ -47,14 +47,14 @@ const Loader = ({
 };
 
 Loader.defaultProps = {
-  size: "small",
+  size: "medium",
   isInsideButton: false,
   isActive: true
 };
 Loader.propTypes = { ...marginPropTypes,
 
   /** Size of the loader. */
-  size: _propTypes.default.oneOf(["small", "large"]),
+  size: _propTypes.default.oneOf(["small", "medium", "large"]),
 
   /** Applies white color. */
   isInsideButton: _propTypes.default.bool,

package/lib/components/loader/loader.config.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LOADER_SIZES = void 0;
 // eslint-disable-next-line import/prefer-default-export
-const LOADER_SIZES = ["small", "large"];
+const LOADER_SIZES = ["small", "medium", "large"];
 exports.LOADER_SIZES = LOADER_SIZES;

package/lib/components/loader/loader.d.ts

@@ -2,7 +2,7 @@ import { MarginProps } from "styled-system";
 
 export interface LoaderProps extends MarginProps {
   /** Size of the loader. */
-  size?: "small" | "large";
+  size?: "small" | "medium" | "large";
   /** Applies white color. */
   isInsideButton?: boolean;
   /** Applies slate color. Available only when isInsideButton is true. */

package/lib/components/loader-bar/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./loader-bar";

package/lib/components/loader-bar/index.js

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

package/lib/components/loader-bar/loader-bar.component.js

@@ -0,0 +1,47 @@
+"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("../../utils/helpers/tags"));
+
+var _loaderBar = _interopRequireWildcard(require("./loader-bar.style"));
+
+var _utils = require("../../style/utils");
+
+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; }
+
+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 LoaderBar = ({
+  size = "medium",
+  ...rest
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_loaderBar.StyledLoader, _extends({}, rest, (0, _tags.default)("loader-bar", rest)), /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
+    size: size
+  }, /*#__PURE__*/_react.default.createElement(_loaderBar.InnerBar, {
+    size: size
+  })));
+};
+
+LoaderBar.propTypes = { ...marginPropTypes,
+
+  /** Size of the loader. */
+  size: _propTypes.default.oneOf(["small", "medium", "large"])
+};
+var _default = LoaderBar;
+exports.default = _default;

package/lib/components/loader-bar/loader-bar.config.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LOADER_BAR_SIZES = void 0;
+// eslint-disable-next-line import/prefer-default-export
+const LOADER_BAR_SIZES = ["small", "medium", "large"];
+exports.LOADER_BAR_SIZES = LOADER_BAR_SIZES;

package/lib/components/loader-bar/loader-bar.d.ts

@@ -0,0 +1,10 @@
+import { MarginProps } from "styled-system";
+
+export interface LoaderBarProps extends MarginProps {
+  /** Size of the loaderBar. */
+  size?: "small" | "medium" | "large";
+}
+
+declare function LoaderBar(props: LoaderBarProps): JSX.Element;
+
+export default LoaderBar;

package/lib/components/loader-bar/loader-bar.style.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledLoader = exports.InnerBar = 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 _loaderBar = require("./loader-bar.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 INNER_BAR_LENGTH = "128px";
+const OUTER_BAR_LENGTH = "256px";
+const StyledLoader = _styledComponents.default.div`
+  ${_styledSystem.margin}
+  text-align: center;
+  white-space: nowrap;
+  line-height: 0;
+  font-size: 0;
+`;
+exports.StyledLoader = StyledLoader;
+const innerBarAnimation = (0, _styledComponents.keyframes)`
+  0% {
+    left: -${INNER_BAR_LENGTH}
+  }
+  100% {
+    left: ${OUTER_BAR_LENGTH}
+  }
+`;
+const StyledLoaderBar = _styledComponents.default.div`
+  ${({
+  size,
+  theme
+}) => (0, _styledComponents.css)`
+    display: inline-block;
+    height: ${getHeight(size)};
+    width: ${OUTER_BAR_LENGTH};
+    background-color: ${theme.colors.loadingBarBackground};
+    overflow: hidden;
+    position: relative;
+  `}
+`;
+const InnerBar = _styledComponents.default.div`
+  ${({
+  theme,
+  size
+}) => (0, _styledComponents.css)`
+    position: absolute;
+    background-color: ${theme.colors.primary};
+    width: ${INNER_BAR_LENGTH};
+    height: ${getHeight(size)};
+    animation: 2s ${innerBarAnimation} linear 0s infinite normal none running;
+  `}
+`;
+exports.InnerBar = InnerBar;
+
+function getHeight(size) {
+  switch (size) {
+    case "small":
+      return "4px";
+
+    case "large":
+      return "16px";
+
+    default:
+      return "8px";
+  }
+}
+
+StyledLoader.defaultProps = {
+  theme: _base.default
+};
+StyledLoaderBar.defaultProps = {
+  theme: _base.default,
+  size: "medium"
+};
+InnerBar.defaultProps = {
+  theme: _base.default,
+  size: "medium"
+};
+StyledLoaderBar.propTypes = {
+  size: _propTypes.default.oneOf(_loaderBar.LOADER_BAR_SIZES)
+};
+var _default = StyledLoaderBar;
+exports.default = _default;

package/lib/components/pages/pages.component.js

@@ -9,165 +9,104 @@ Object.defineProperty(exports, "Page", {
     return _page.default;
   }
 });
-exports.Pages = exports.default = void 0;
+exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _lodash = require("lodash");
-
-var _styledComponents = require("styled-components");
-
 var _tags = _interopRequireDefault(require("../../utils/helpers/tags"));
 
 var _page = _interopRequireDefault(require("./page/page.component"));
 
 var _pages = require("./pages.style");
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 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 _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-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 _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 NEXT = "next";
 const PREVIOUS = "previous";
 const TRANSITION_TIME = 500;
 
-let Pages = /*#__PURE__*/function (_React$Component) {
-  _inherits(Pages, _React$Component);
-
-  var _super = _createSuper(Pages);
-
-  function Pages(...args) {
-    var _this;
+const Pages = ({
+  pageIndex: incomingPageIndex,
+  initialpageIndex = 0,
+  transition = "slide",
+  children,
+  ...props
+}) => {
+  const [pageIndex, setPageIndex] = (0, _react.useState)(Number(incomingPageIndex) || Number(initialpageIndex));
+  const transitionDirection = (0, _react.useRef)(NEXT);
+
+  const transitionName = () => {
+    if (transition === "slide") {
+      return `slide-${transitionDirection.current}`;
+    }
 
-    _classCallCheck(this, Pages);
+    return `carousel-transition-${transition}`;
+  };
 
-    _this = _super.call(this, ...args);
-    /** Direction of animation */
+  const handleVisiblePage = () => {
+    let index = pageIndex;
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      // Currently selected page
-      pageIndex: Number(_this.props.pageIndex) || Number(_this.props.initialpageIndex)
-    });
+    const visiblePage = _react.default.Children.toArray(children)[index];
 
-    _defineProperty(_assertThisInitialized(_this), "numOfPages", () => {
-      return Array.isArray(_this.props.children) ? (0, _lodash.compact)(_this.props.children).length : 1;
+    index = visiblePage.props.id || index;
+    const additionalProps = {
+      transitionName,
+      timeout: TRANSITION_TIME,
+      "data-element": "visible-page",
+      key: `carbon-page-${visiblePage.props.id || pageIndex}`,
+      className: visiblePage.props.className
+    };
+    return /*#__PURE__*/_react.default.cloneElement(visiblePage, { ...visiblePage.props,
+      ...additionalProps
     });
+  };
+
+  const numOfPages = (0, _react.useCallback)(() => {
+    return Array.isArray(children) ? children.length : 1;
+  }, [children]);
+  const verifyNewIndex = (0, _react.useCallback)(newIndex => {
+    if (newIndex < 0) {
+      // If the new index is negative, select the last page
+      return numOfPages() - 1;
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "visiblePage", () => {
-      let index = _this.state.pageIndex;
-      const visiblePage = (0, _lodash.compact)(_react.default.Children.toArray(_this.props.children))[index];
-      index = visiblePage.props.id || index;
-      const additionalProps = {
-        transitionName: _this.transitionName,
-        timeout: TRANSITION_TIME,
-        "data-element": "visible-page",
-        key: `carbon-page-${index}`,
-        className: visiblePage.props.className
-      };
-      return /*#__PURE__*/_react.default.cloneElement(visiblePage, (0, _lodash.assign)({}, visiblePage.props, additionalProps));
-    });
+    if (newIndex > numOfPages() - 1) {
+      // If the new index is bigger than the number of slides, select the first page
+      return 0;
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "transitionName", () => {
-      if (_this.props.transition === "slide") {
-        return `slide-${_this.transitionDirection}`;
-      }
+    return newIndex;
+  }, [numOfPages]);
+  (0, _react.useEffect)(() => {
+    if (typeof incomingPageIndex === "undefined") return;
+    const newIndex = verifyNewIndex(incomingPageIndex); // 2
 
-      return `carousel-transition-${_this.props.transition}`;
-    });
+    const currentIndex = pageIndex; // 1
 
-    _this.transitionDirection = NEXT;
-    return _this;
-  }
+    if (newIndex === currentIndex) return;
 
-  _createClass(Pages, [{
-    key: "componentDidUpdate",
-    value:
-    /** A lifecycle method that is called before re-render. */
-    function componentDidUpdate(prevProps) {
-      if (this.props.pageIndex === prevProps.pageIndex) return;
-      if (typeof this.props.pageIndex === "undefined") return;
-      const newIndex = this.verifyNewIndex(this.props.pageIndex);
-      const currentIndex = this.state.pageIndex;
-      if (newIndex === currentIndex) return;
-
-      if (newIndex > currentIndex) {
-        this.transitionDirection = NEXT;
-      } else {
-        this.transitionDirection = PREVIOUS;
-      }
-
-      this.handleStateUpdate(newIndex);
+    if (newIndex > currentIndex) {
+      transitionDirection.current = NEXT;
+    } else {
+      transitionDirection.current = PREVIOUS;
     }
-  }, {
-    key: "handleStateUpdate",
-    value: function handleStateUpdate(newIndex) {
-      this.setState({
-        pageIndex: newIndex
-      });
-    }
-    /** Verifies the new index and corrects it if necessary */
-
-  }, {
-    key: "verifyNewIndex",
-    value: function verifyNewIndex(newIndex) {
-      if (newIndex < 0) {
-        // If the new index is negative, select the last page
-        return this.numOfPages() - 1;
-      }
-
-      if (newIndex > this.numOfPages() - 1) {
-        // If the new index is bigger than the number of slides, select the first page
-        return 0;
-      }
-
-      return newIndex;
-    }
-    /** Gets the number of slides */
-
-  }, {
-    key: "render",
-    value:
-    /** Renders the Slide Component */
-    function render() {
-      return /*#__PURE__*/_react.default.createElement(_pages.PagesWrapperStyle, _extends({
-        className: this.props.className
-      }, (0, _tags.default)("carousel", this.props)), /*#__PURE__*/_react.default.createElement(_pages.PagesContent, {
-        className: "carbon-carousel__content",
-        theme: this.props.theme
-      }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, this.visiblePage())));
-    }
-  }]);
 
-  return Pages;
-}(_react.default.Component);
+    setPageIndex(newIndex);
+  }, [incomingPageIndex, pageIndex, verifyNewIndex]);
+  /** Renders the Slide Component */
+
+  return /*#__PURE__*/_react.default.createElement(_pages.PagesWrapperStyle, (0, _tags.default)("carousel", props), /*#__PURE__*/_react.default.createElement(_pages.PagesContent, {
+    className: "carbon-carousel__content"
+  }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, handleVisiblePage())));
+};
 
 Pages.propTypes = {
   /** [legacy] Custom className */
@@ -181,17 +120,7 @@ Pages.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),
 
   /** Controls which transition to use. */
-  transition: _propTypes.default.string,
-
-  /** theme is used only to support legacy code */
-  theme: _propTypes.default.object
-};
-Pages.defaultProps = {
-  initialpageIndex: 0,
-  transition: "slide",
-  theme: _base.default
+  transition: _propTypes.default.string
 };
-const PagesWithHOC = (0, _styledComponents.withTheme)(Pages);
-exports.Pages = PagesWithHOC;
 var _default = Pages;
 exports.default = _default;

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

@@ -21,7 +21,8 @@ var _default = palette => {
       whiteMix: palette.productBlueTint(90),
       withOpacity: baseWithOpacity(0.55),
       hoveredTabKeyline: palette.productBlueTint(30),
-      disabled: palette.productBlueTint(40)
+      disabled: palette.productBlueTint(40),
+      loadingBarBackground: palette.productBlueTint(70)
     },
     stepSequence: {
       completedText: palette.productBlueShade(23)

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

@@ -26,6 +26,7 @@ var _default = palette => {
       disabled: palette.genericGreenTint(40),
       whiteMix: palette.genericGreenTint(90),
       withOpacity: baseWithOpacity(0.55),
+      loadingBarBackground: palette.genericGreenTint(70),
       // generic
       black: "#000000",
       slate: "#003349",

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

@@ -15,7 +15,8 @@ var _default = palette => {
       tertiary: palette.productGreenShade(61),
       whiteMix: palette.productGreenTint(90),
       hoveredTabKeyline: palette.productGreenTint(30),
-      disabled: palette.productGreenTint(40)
+      disabled: palette.productGreenTint(40),
+      loadingBarBackground: palette.productGreenTint(70)
     },
     stepSequence: {
       completedText: palette.productGreenShade(23)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "84.4.0",
+  "version": "86.0.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {