@hipay/hipay-material-ui 3.7.9 → 3.7.11

package/HiDatePicker/HiDateRangeSelector.js

@@ -335,11 +335,11 @@ var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy'];
 var SLIDING_PERIOD_LIST = ['1', '7', '30', '365'];
 var CUSTOM_PERIOD_LIST = ['custom'];
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_Calendar.default, null);
+var _ref2 = /*#__PURE__*/_react.default.createElement(_CalendarBlank.default, null);
 
-var _ref3 = /*#__PURE__*/_react.default.createElement(_CalendarArrowRight.default, null);
+var _ref3 = /*#__PURE__*/_react.default.createElement(_Calendar.default, null);
 
-var _ref4 = /*#__PURE__*/_react.default.createElement(_CalendarBlank.default, null);
+var _ref4 = /*#__PURE__*/_react.default.createElement(_CalendarArrowRight.default, null);
 
 var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(HiDateRangeSelector, _React$Component);
@@ -437,40 +437,40 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
         return CUSTOM_PERIOD_LIST.includes(option);
       });
 
-      if (presetOptionsAvailable.length) {
+      if (customOptionsAvailable.length) {
         options.push({
-          id: "preset_periods_subheader",
-          type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          id: "custom_periods_subheader",
+          type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           icon: _ref2,
-          label: translations.preset_periods,
+          label: translations.custom_periods,
           children: this.options.filter(function (o) {
-            return presetOptionsAvailable.includes(o.id);
+            return customOptionsAvailable.includes(o.id);
           }),
           collapseParent: true
         });
       }
 
-      if (slidingOptionsAvailable.length) {
+      if (presetOptionsAvailable.length) {
         options.push({
-          id: "sliding_periods_subheader",
-          type: SLIDING_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          id: "preset_periods_subheader",
+          type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           icon: _ref3,
-          label: translations.sliding_periods,
+          label: translations.preset_periods,
           children: this.options.filter(function (o) {
-            return slidingOptionsAvailable.includes(o.id);
+            return presetOptionsAvailable.includes(o.id);
           }),
           collapseParent: true
         });
       }
 
-      if (customOptionsAvailable.length) {
+      if (slidingOptionsAvailable.length) {
         options.push({
-          id: "custom_periods_subheader",
-          type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          id: "sliding_periods_subheader",
+          type: SLIDING_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           icon: _ref4,
-          label: translations.custom_periods,
+          label: translations.sliding_periods,
           children: this.options.filter(function (o) {
-            return customOptionsAvailable.includes(o.id);
+            return slidingOptionsAvailable.includes(o.id);
           }),
           collapseParent: true
         });

package/HiScrollStepper/HiScrollStepper.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactUse = require("react-use");
+
+var _HiStepper = _interopRequireDefault(require("../HiStepper"));
+
+var _HiStep = _interopRequireDefault(require("../HiStepper/HiStep"));
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _core = require("@material-ui/core");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    root: {
+      display: 'flex'
+    },
+    stepperNav: {
+      position: 'relative',
+      marginRight: 80
+    },
+    stepperSteps: {
+      width: 'auto'
+    },
+    stepperWrapper: {
+      position: 'sticky',
+      top: 20,
+      zIndex: 2
+    },
+    hiStepper: {
+      background: 'transparent'
+    },
+    hideLabelToggle: {
+      position: 'absolute',
+      top: 0,
+      left: '100%',
+      marginLeft: theme.spacing(4),
+      background: theme.palette.background3,
+      padding: theme.spacing(2),
+      boxShadow: '0 2px 6px rgba(0,0,0,0.2)'
+    }
+  };
+});
+
+var HiScrollStepper = function HiScrollStepper(_ref) {
+  var steps = _ref.steps,
+      _ref$stepLabelVisibil = _ref.stepLabelVisibilityToggle,
+      stepLabelVisibilityToggle = _ref$stepLabelVisibil === void 0 ? true : _ref$stepLabelVisibil,
+      _ref$stepLabelDefault = _ref.stepLabelDefaultVisible,
+      stepLabelDefaultVisible = _ref$stepLabelDefault === void 0 ? true : _ref$stepLabelDefault,
+      onShowStepLabel = _ref.onShowStepLabel,
+      onHideStepLabel = _ref.onHideStepLabel,
+      _ref$customClasses = _ref.customClasses,
+      customClasses = _ref$customClasses === void 0 ? {} : _ref$customClasses,
+      _ref$stepMargin = _ref.stepMargin,
+      stepMargin = _ref$stepMargin === void 0 ? 60 : _ref$stepMargin;
+  var classes = useStyles();
+
+  var _useMap = (0, _reactUse.useMap)({
+    0: 'in_progress'
+  }),
+      _useMap2 = (0, _slicedToArray2.default)(_useMap, 2),
+      status = _useMap2[0],
+      setStatus = _useMap2[1].set;
+
+  var _useCounter = (0, _reactUse.useCounter)(0, steps.length - 1, 0),
+      _useCounter2 = (0, _slicedToArray2.default)(_useCounter, 2),
+      activeStep = _useCounter2[0],
+      setActiveStep = _useCounter2[1].set;
+
+  var _useState = (0, _react.useState)(stepLabelDefaultVisible),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      stepLabelVisible = _useState2[0],
+      setStepLabelVisible = _useState2[1];
+
+  var instantActiveStep = 0;
+  var stepsRef = (0, _react.useMemo)(function () {
+    return Array(steps.length).fill(0).map(function () {
+      return _react.default.createRef();
+    });
+  }, []);
+
+  var getOffsetTop = function getOffsetTop(element) {
+    var offsetTop = 0;
+
+    while (element) {
+      offsetTop += element.offsetTop;
+      element = element.offsetParent;
+    }
+
+    return offsetTop;
+  };
+
+  var scrollToStep = function scrollToStep(index) {
+    window.scrollTo({
+      top: getOffsetTop(stepsRef[index].current) - stepMargin,
+      behavior: 'smooth'
+    });
+  };
+
+  var handleScroll = function handleScroll() {
+    var newActiveStep = 0;
+    var scrollOffset = window.pageYOffset;
+
+    if (scrollOffset < stepMargin) {
+      newActiveStep = 0;
+    } else if (scrollOffset + window.innerHeight >= document.body.scrollHeight) {
+      newActiveStep = steps.length - 1;
+    } else {
+      var stepIndex = 0;
+
+      while (stepIndex < steps.length) {
+        var stepHeight = stepsRef[stepIndex].current.offsetHeight;
+        var stepBottomOffset = getOffsetTop(stepsRef[stepIndex].current) + (stepHeight - stepMargin);
+
+        if (stepBottomOffset > scrollOffset) {
+          newActiveStep = stepIndex;
+          break;
+        }
+
+        stepIndex++;
+      }
+    }
+
+    if (newActiveStep !== instantActiveStep) {
+      instantActiveStep = newActiveStep;
+      setActiveStep(newActiveStep);
+      steps.forEach(function (step, stepIndex) {
+        setStatus(stepIndex, stepIndex === newActiveStep ? 'in_progress' : null);
+      });
+    }
+  };
+
+  var handleStepLabelVisibility = function handleStepLabelVisibility() {
+    var newVisibility = !stepLabelVisible;
+
+    if (newVisibility === true && typeof onShowStepLabel === 'function') {
+      onShowStepLabel();
+    }
+
+    if (newVisibility === false && typeof onHideStepLabel === 'function') {
+      onHideStepLabel();
+    }
+
+    setStepLabelVisible(newVisibility);
+  };
+
+  (0, _reactUse.useMount)(function () {
+    window.addEventListener('scroll', handleScroll);
+  });
+  (0, _react.useEffect)(function () {
+    return function () {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.root, customClasses.root)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.stepperNav, customClasses.stepperNav)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.stepperWrapper, customClasses.stepperWrapper)
+  }, /*#__PURE__*/_react.default.createElement(_HiStepper.default, {
+    activeStep: activeStep,
+    className: (0, _classnames.default)(classes.hiStepper, customClasses.hiStepper)
+  }, steps.map(function (step, index) {
+    return /*#__PURE__*/_react.default.createElement(_HiStep.default, {
+      key: index,
+      onClick: function onClick() {
+        return scrollToStep(index);
+      },
+      indicator: step.indicator,
+      label: stepLabelVisible ? step.label : null,
+      status: status[index]
+    });
+  }))), stepLabelVisibilityToggle && /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
+    className: (0, _classnames.default)(classes.hideLabelToggle, customClasses.hideLabelToggle),
+    onClick: handleStepLabelVisibility
+  }, /*#__PURE__*/_react.default.createElement(_HiIcon.default, {
+    icon: stepLabelVisible ? 'chevron_left' : 'chevron_right'
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.stepperSteps, customClasses.stepperSteps)
+  }, steps.map(function (step, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      ref: stepsRef[index]
+    }, step.content);
+  })));
+};
+
+var _default = HiScrollStepper;
+exports.default = _default;

package/HiScrollStepper/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiScrollStepper.default;
+  }
+});
+
+var _HiScrollStepper = _interopRequireDefault(require("./HiScrollStepper"));

package/HiStepper/HiStep.js

@@ -123,7 +123,10 @@ var useStepLabelStyle = (0, _styles.makeStyles)(function (theme) {
     label: (0, _objectSpread2.default)({}, theme.typography.button, {
       fontWeight: '600 !important',
       color: "inherit !important",
-      fontSize: '13px'
+      fontSize: '13px',
+      whiteSpace: 'nowrap',
+      height: 16,
+      transform: 'translateY(-2px)'
     }),
     active: {},
     completed: {}

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -335,11 +335,11 @@ var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy'];
 var SLIDING_PERIOD_LIST = ['1', '7', '30', '365'];
 var CUSTOM_PERIOD_LIST = ['custom'];
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_Calendar.default, null);
+var _ref2 = /*#__PURE__*/_react.default.createElement(_CalendarBlank.default, null);
 
-var _ref3 = /*#__PURE__*/_react.default.createElement(_CalendarArrowRight.default, null);
+var _ref3 = /*#__PURE__*/_react.default.createElement(_Calendar.default, null);
 
-var _ref4 = /*#__PURE__*/_react.default.createElement(_CalendarBlank.default, null);
+var _ref4 = /*#__PURE__*/_react.default.createElement(_CalendarArrowRight.default, null);
 
 var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(HiDateRangeSelector, _React$Component);
@@ -437,40 +437,40 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
         return CUSTOM_PERIOD_LIST.includes(option);
       });
 
-      if (presetOptionsAvailable.length) {
+      if (customOptionsAvailable.length) {
         options.push({
-          id: "preset_periods_subheader",
-          type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          id: "custom_periods_subheader",
+          type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           icon: _ref2,
-          label: translations.preset_periods,
+          label: translations.custom_periods,
           children: this.options.filter(function (o) {
-            return presetOptionsAvailable.includes(o.id);
+            return customOptionsAvailable.includes(o.id);
           }),
           collapseParent: true
         });
       }
 
-      if (slidingOptionsAvailable.length) {
+      if (presetOptionsAvailable.length) {
         options.push({
-          id: "sliding_periods_subheader",
-          type: SLIDING_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          id: "preset_periods_subheader",
+          type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           icon: _ref3,
-          label: translations.sliding_periods,
+          label: translations.preset_periods,
           children: this.options.filter(function (o) {
-            return slidingOptionsAvailable.includes(o.id);
+            return presetOptionsAvailable.includes(o.id);
           }),
           collapseParent: true
         });
       }
 
-      if (customOptionsAvailable.length) {
+      if (slidingOptionsAvailable.length) {
         options.push({
-          id: "custom_periods_subheader",
-          type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          id: "sliding_periods_subheader",
+          type: SLIDING_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           icon: _ref4,
-          label: translations.custom_periods,
+          label: translations.sliding_periods,
           children: this.options.filter(function (o) {
-            return customOptionsAvailable.includes(o.id);
+            return slidingOptionsAvailable.includes(o.id);
           }),
           collapseParent: true
         });

package/es/HiScrollStepper/HiScrollStepper.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactUse = require("react-use");
+
+var _HiStepper = _interopRequireDefault(require("../HiStepper"));
+
+var _HiStep = _interopRequireDefault(require("../HiStepper/HiStep"));
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _core = require("@material-ui/core");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    root: {
+      display: 'flex'
+    },
+    stepperNav: {
+      position: 'relative',
+      marginRight: 80
+    },
+    stepperSteps: {
+      width: 'auto'
+    },
+    stepperWrapper: {
+      position: 'sticky',
+      top: 20,
+      zIndex: 2
+    },
+    hiStepper: {
+      background: 'transparent'
+    },
+    hideLabelToggle: {
+      position: 'absolute',
+      top: 0,
+      left: '100%',
+      marginLeft: theme.spacing(4),
+      background: theme.palette.background3,
+      padding: theme.spacing(2),
+      boxShadow: '0 2px 6px rgba(0,0,0,0.2)'
+    }
+  };
+});
+
+var HiScrollStepper = function HiScrollStepper(_ref) {
+  var steps = _ref.steps,
+      _ref$stepLabelVisibil = _ref.stepLabelVisibilityToggle,
+      stepLabelVisibilityToggle = _ref$stepLabelVisibil === void 0 ? true : _ref$stepLabelVisibil,
+      _ref$stepLabelDefault = _ref.stepLabelDefaultVisible,
+      stepLabelDefaultVisible = _ref$stepLabelDefault === void 0 ? true : _ref$stepLabelDefault,
+      onShowStepLabel = _ref.onShowStepLabel,
+      onHideStepLabel = _ref.onHideStepLabel,
+      _ref$customClasses = _ref.customClasses,
+      customClasses = _ref$customClasses === void 0 ? {} : _ref$customClasses,
+      _ref$stepMargin = _ref.stepMargin,
+      stepMargin = _ref$stepMargin === void 0 ? 60 : _ref$stepMargin;
+  var classes = useStyles();
+
+  var _useMap = (0, _reactUse.useMap)({
+    0: 'in_progress'
+  }),
+      _useMap2 = (0, _slicedToArray2.default)(_useMap, 2),
+      status = _useMap2[0],
+      setStatus = _useMap2[1].set;
+
+  var _useCounter = (0, _reactUse.useCounter)(0, steps.length - 1, 0),
+      _useCounter2 = (0, _slicedToArray2.default)(_useCounter, 2),
+      activeStep = _useCounter2[0],
+      setActiveStep = _useCounter2[1].set;
+
+  var _useState = (0, _react.useState)(stepLabelDefaultVisible),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      stepLabelVisible = _useState2[0],
+      setStepLabelVisible = _useState2[1];
+
+  var instantActiveStep = 0;
+  var stepsRef = (0, _react.useMemo)(function () {
+    return Array(steps.length).fill(0).map(function () {
+      return _react.default.createRef();
+    });
+  }, []);
+
+  var getOffsetTop = function getOffsetTop(element) {
+    var offsetTop = 0;
+
+    while (element) {
+      offsetTop += element.offsetTop;
+      element = element.offsetParent;
+    }
+
+    return offsetTop;
+  };
+
+  var scrollToStep = function scrollToStep(index) {
+    window.scrollTo({
+      top: getOffsetTop(stepsRef[index].current) - stepMargin,
+      behavior: 'smooth'
+    });
+  };
+
+  var handleScroll = function handleScroll() {
+    var newActiveStep = 0;
+    var scrollOffset = window.pageYOffset;
+
+    if (scrollOffset < stepMargin) {
+      newActiveStep = 0;
+    } else if (scrollOffset + window.innerHeight >= document.body.scrollHeight) {
+      newActiveStep = steps.length - 1;
+    } else {
+      var stepIndex = 0;
+
+      while (stepIndex < steps.length) {
+        var stepHeight = stepsRef[stepIndex].current.offsetHeight;
+        var stepBottomOffset = getOffsetTop(stepsRef[stepIndex].current) + (stepHeight - stepMargin);
+
+        if (stepBottomOffset > scrollOffset) {
+          newActiveStep = stepIndex;
+          break;
+        }
+
+        stepIndex++;
+      }
+    }
+
+    if (newActiveStep !== instantActiveStep) {
+      instantActiveStep = newActiveStep;
+      setActiveStep(newActiveStep);
+      steps.forEach(function (step, stepIndex) {
+        setStatus(stepIndex, stepIndex === newActiveStep ? 'in_progress' : null);
+      });
+    }
+  };
+
+  var handleStepLabelVisibility = function handleStepLabelVisibility() {
+    var newVisibility = !stepLabelVisible;
+
+    if (newVisibility === true && typeof onShowStepLabel === 'function') {
+      onShowStepLabel();
+    }
+
+    if (newVisibility === false && typeof onHideStepLabel === 'function') {
+      onHideStepLabel();
+    }
+
+    setStepLabelVisible(newVisibility);
+  };
+
+  (0, _reactUse.useMount)(function () {
+    window.addEventListener('scroll', handleScroll);
+  });
+  (0, _react.useEffect)(function () {
+    return function () {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.root, customClasses.root)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.stepperNav, customClasses.stepperNav)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.stepperWrapper, customClasses.stepperWrapper)
+  }, /*#__PURE__*/_react.default.createElement(_HiStepper.default, {
+    activeStep: activeStep,
+    className: (0, _classnames.default)(classes.hiStepper, customClasses.hiStepper)
+  }, steps.map(function (step, index) {
+    return /*#__PURE__*/_react.default.createElement(_HiStep.default, {
+      key: index,
+      onClick: function onClick() {
+        return scrollToStep(index);
+      },
+      indicator: step.indicator,
+      label: stepLabelVisible ? step.label : null,
+      status: status[index]
+    });
+  }))), stepLabelVisibilityToggle && /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
+    className: (0, _classnames.default)(classes.hideLabelToggle, customClasses.hideLabelToggle),
+    onClick: handleStepLabelVisibility
+  }, /*#__PURE__*/_react.default.createElement(_HiIcon.default, {
+    icon: stepLabelVisible ? 'chevron_left' : 'chevron_right'
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.stepperSteps, customClasses.stepperSteps)
+  }, steps.map(function (step, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      ref: stepsRef[index]
+    }, step.content);
+  })));
+};
+
+var _default = HiScrollStepper;
+exports.default = _default;

package/es/HiScrollStepper/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiScrollStepper.default;
+  }
+});
+
+var _HiScrollStepper = _interopRequireDefault(require("./HiScrollStepper"));

package/es/HiStepper/HiStep.js

@@ -123,7 +123,10 @@ var useStepLabelStyle = (0, _styles.makeStyles)(function (theme) {
     label: (0, _objectSpread2.default)({}, theme.typography.button, {
       fontWeight: '600 !important',
       color: "inherit !important",
-      fontSize: '13px'
+      fontSize: '13px',
+      whiteSpace: 'nowrap',
+      height: 16,
+      transform: 'translateY(-2px)'
     }),
     active: {},
     completed: {}

package/es/hi-svg-icons/HiRouteSwitch.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _pure = _interopRequireDefault(require("recompose/pure"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ref = /*#__PURE__*/_react.default.createElement("polygon", {
+  class: "cls-2",
+  points: "24.39 18.47 24.25 16.98 20.96 17.3 20.89 13.99 19.39 14.03 19.5 18.95 24.39 18.47"
+});
+
+var _ref2 = /*#__PURE__*/_react.default.createElement("polygon", {
+  class: "cls-2",
+  points: "7.34 6.86 7.49 8.36 10.77 8.04 10.84 11.35 12.35 11.31 12.23 6.39 7.34 6.86"
+});
+
+/**
+ * @ignore - internal component.
+ */
+var HiRouteSwitch = (0, _pure.default)(function (props) {
+  var theme = (0, _styles.useTheme)();
+  var _props$color = props.color,
+      color = _props$color === void 0 ? props.color || theme.palette.neutral.main : _props$color,
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
+    style: (0, _objectSpread2.default)({}, style, {
+      fontSize: props.size || 24
+    })
+  }, other), /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 28.35 28.35"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "11.83",
+    cy: "16.66",
+    r: "9",
+    fill: color,
+    opacity: 0.16
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M16.59,16.68v4h1.26a.93.93,0,0,1,.7.28.94.94,0,0,1,.28.7h7v1.49h-7a1,1,0,0,1-.28.71.93.93,0,0,1-.7.28h-4a.93.93,0,0,1-.7-.28,1,1,0,0,1-.29-.71h-7V21.64h7a1,1,0,0,1,.29-.7.93.93,0,0,1,.7-.28H15.1v-4Zm1.71-4a2.44,2.44,0,1,0-2.43,2.43A2.43,2.43,0,0,0,18.3,12.67Z",
+    fill: color
+  }), _ref, _ref2, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M21.28,7.25,20.22,8.31a6.14,6.14,0,0,1-.5,9.19l.94,1.17a7.64,7.64,0,0,0,.62-11.42Z",
+    fill: color
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M12,7.84l-.94-1.18a7.64,7.64,0,0,0-.62,11.42l1.06-1A6.14,6.14,0,0,1,12,7.84Z",
+    fill: color
+  })));
+});
+HiRouteSwitch.muiName = 'SvgIcon';
+var _default = HiRouteSwitch;
+exports.default = _default;

package/es/hi-svg-icons/HiRouteSwitchMenu.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _pure = _interopRequireDefault(require("recompose/pure"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ref = /*#__PURE__*/_react.default.createElement("polygon", {
+  class: "cls-1",
+  points: "22.73 17.72 22.59 16.23 19.3 16.55 19.23 13.24 17.73 13.27 17.84 18.19 22.73 17.72"
+});
+
+var _ref2 = /*#__PURE__*/_react.default.createElement("polygon", {
+  class: "cls-1",
+  points: "5.68 6.11 5.82 7.6 9.11 7.29 9.18 10.59 10.68 10.56 10.57 5.64 5.68 6.11"
+});
+
+/**
+ * @ignore - internal component.
+ */
+var HiRouteSwitchMenu = (0, _pure.default)(function (props) {
+  var theme = (0, _styles.useTheme)();
+  var _props$color = props.color,
+      color = _props$color === void 0 ? props.color || theme.palette.neutral.main : _props$color,
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
+    style: (0, _objectSpread2.default)({}, style, {
+      fontSize: props.size || 24
+    })
+  }, other), /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 28.35 28.35"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M14.92,15.92v4h1.27a1,1,0,0,1,1,1h7v1.49h-7a1,1,0,0,1-.28.71,1,1,0,0,1-.7.28h-4a1,1,0,0,1-1-1h-7V20.89h7a1,1,0,0,1,.28-.7,1,1,0,0,1,.71-.28h1.28v-4Zm1.72-4a2.44,2.44,0,1,0-2.44,2.43A2.44,2.44,0,0,0,16.64,11.92Z",
+    fill: color
+  }), _ref, _ref2, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M19.62,6.5,18.56,7.56a6.14,6.14,0,0,1-.5,9.19L19,17.92A7.64,7.64,0,0,0,19.62,6.5Z",
+    fill: color
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M10.35,7.09,9.41,5.91a7.64,7.64,0,0,0-.62,11.42l1.06-1a6.14,6.14,0,0,1,.5-9.19Z",
+    fill: color
+  })));
+});
+HiRouteSwitchMenu.muiName = 'SvgIcon';
+var _default = HiRouteSwitchMenu;
+exports.default = _default;

package/es/hi-svg-icons/index.js

@@ -167,6 +167,18 @@ Object.defineProperty(exports, "HiRouteMenu", {
     return _HiRouteMenu.default;
   }
 });
+Object.defineProperty(exports, "HiRouteSwitch", {
+  enumerable: true,
+  get: function get() {
+    return _HiRouteSwitch.default;
+  }
+});
+Object.defineProperty(exports, "HiRouteSwitchMenu", {
+  enumerable: true,
+  get: function get() {
+    return _HiRouteSwitchMenu.default;
+  }
+});
 Object.defineProperty(exports, "HiSettlement", {
   enumerable: true,
   get: function get() {
@@ -288,6 +300,10 @@ var _HiRoute = _interopRequireDefault(require("./HiRoute"));
 
 var _HiRouteMenu = _interopRequireDefault(require("./HiRouteMenu"));
 
+var _HiRouteSwitch = _interopRequireDefault(require("./HiRouteSwitch"));
+
+var _HiRouteSwitchMenu = _interopRequireDefault(require("./HiRouteSwitchMenu"));
+
 var _HiSettlement = _interopRequireDefault(require("./HiSettlement"));
 
 var _HiSizeLarge = _interopRequireDefault(require("./HiSizeLarge"));

package/hi-svg-icons/HiRouteSwitch.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _pure = _interopRequireDefault(require("recompose/pure"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ref = /*#__PURE__*/_react.default.createElement("polygon", {
+  class: "cls-2",
+  points: "24.39 18.47 24.25 16.98 20.96 17.3 20.89 13.99 19.39 14.03 19.5 18.95 24.39 18.47"
+});
+
+var _ref2 = /*#__PURE__*/_react.default.createElement("polygon", {
+  class: "cls-2",
+  points: "7.34 6.86 7.49 8.36 10.77 8.04 10.84 11.35 12.35 11.31 12.23 6.39 7.34 6.86"
+});
+
+/**
+ * @ignore - internal component.
+ */
+var HiRouteSwitch = (0, _pure.default)(function (props) {
+  var theme = (0, _styles.useTheme)();
+  var _props$color = props.color,
+      color = _props$color === void 0 ? props.color || theme.palette.neutral.main : _props$color,
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
+    style: (0, _objectSpread2.default)({}, style, {
+      fontSize: props.size || 24
+    })
+  }, other), /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 28.35 28.35"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "11.83",
+    cy: "16.66",
+    r: "9",
+    fill: color,
+    opacity: 0.16
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M16.59,16.68v4h1.26a.93.93,0,0,1,.7.28.94.94,0,0,1,.28.7h7v1.49h-7a1,1,0,0,1-.28.71.93.93,0,0,1-.7.28h-4a.93.93,0,0,1-.7-.28,1,1,0,0,1-.29-.71h-7V21.64h7a1,1,0,0,1,.29-.7.93.93,0,0,1,.7-.28H15.1v-4Zm1.71-4a2.44,2.44,0,1,0-2.43,2.43A2.43,2.43,0,0,0,18.3,12.67Z",
+    fill: color
+  }), _ref, _ref2, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M21.28,7.25,20.22,8.31a6.14,6.14,0,0,1-.5,9.19l.94,1.17a7.64,7.64,0,0,0,.62-11.42Z",
+    fill: color
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M12,7.84l-.94-1.18a7.64,7.64,0,0,0-.62,11.42l1.06-1A6.14,6.14,0,0,1,12,7.84Z",
+    fill: color
+  })));
+});
+HiRouteSwitch.muiName = 'SvgIcon';
+var _default = HiRouteSwitch;
+exports.default = _default;

package/hi-svg-icons/HiRouteSwitchMenu.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _pure = _interopRequireDefault(require("recompose/pure"));
+
+var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ref = /*#__PURE__*/_react.default.createElement("polygon", {
+  class: "cls-1",
+  points: "22.73 17.72 22.59 16.23 19.3 16.55 19.23 13.24 17.73 13.27 17.84 18.19 22.73 17.72"
+});
+
+var _ref2 = /*#__PURE__*/_react.default.createElement("polygon", {
+  class: "cls-1",
+  points: "5.68 6.11 5.82 7.6 9.11 7.29 9.18 10.59 10.68 10.56 10.57 5.64 5.68 6.11"
+});
+
+/**
+ * @ignore - internal component.
+ */
+var HiRouteSwitchMenu = (0, _pure.default)(function (props) {
+  var theme = (0, _styles.useTheme)();
+  var _props$color = props.color,
+      color = _props$color === void 0 ? props.color || theme.palette.neutral.main : _props$color,
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({
+    style: (0, _objectSpread2.default)({}, style, {
+      fontSize: props.size || 24
+    })
+  }, other), /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 28.35 28.35"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M14.92,15.92v4h1.27a1,1,0,0,1,1,1h7v1.49h-7a1,1,0,0,1-.28.71,1,1,0,0,1-.7.28h-4a1,1,0,0,1-1-1h-7V20.89h7a1,1,0,0,1,.28-.7,1,1,0,0,1,.71-.28h1.28v-4Zm1.72-4a2.44,2.44,0,1,0-2.44,2.43A2.44,2.44,0,0,0,16.64,11.92Z",
+    fill: color
+  }), _ref, _ref2, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M19.62,6.5,18.56,7.56a6.14,6.14,0,0,1-.5,9.19L19,17.92A7.64,7.64,0,0,0,19.62,6.5Z",
+    fill: color
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M10.35,7.09,9.41,5.91a7.64,7.64,0,0,0-.62,11.42l1.06-1a6.14,6.14,0,0,1,.5-9.19Z",
+    fill: color
+  })));
+});
+HiRouteSwitchMenu.muiName = 'SvgIcon';
+var _default = HiRouteSwitchMenu;
+exports.default = _default;

package/hi-svg-icons/index.js

@@ -167,6 +167,18 @@ Object.defineProperty(exports, "HiRouteMenu", {
     return _HiRouteMenu.default;
   }
 });
+Object.defineProperty(exports, "HiRouteSwitch", {
+  enumerable: true,
+  get: function get() {
+    return _HiRouteSwitch.default;
+  }
+});
+Object.defineProperty(exports, "HiRouteSwitchMenu", {
+  enumerable: true,
+  get: function get() {
+    return _HiRouteSwitchMenu.default;
+  }
+});
 Object.defineProperty(exports, "HiSettlement", {
   enumerable: true,
   get: function get() {
@@ -288,6 +300,10 @@ var _HiRoute = _interopRequireDefault(require("./HiRoute"));
 
 var _HiRouteMenu = _interopRequireDefault(require("./HiRouteMenu"));
 
+var _HiRouteSwitch = _interopRequireDefault(require("./HiRouteSwitch"));
+
+var _HiRouteSwitchMenu = _interopRequireDefault(require("./HiRouteSwitchMenu"));
+
 var _HiSettlement = _interopRequireDefault(require("./HiSettlement"));
 
 var _HiSizeLarge = _interopRequireDefault(require("./HiSizeLarge"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
   "private": false,
-  "version": "3.7.9",
+  "version": "3.7.11",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",