@hipay/hipay-material-ui 3.7.10 → 3.7.11

package/HiScrollStepper/HiScrollStepper.js

@@ -67,6 +67,8 @@ 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,
@@ -87,12 +89,17 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       activeStep = _useCounter2[0],
       setActiveStep = _useCounter2[1].set;
 
-  var _useState = (0, _react.useState)(true),
+  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;
@@ -107,7 +114,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
 
   var scrollToStep = function scrollToStep(index) {
     window.scrollTo({
-      top: getOffsetTop(steps[index].ref.current) - stepMargin,
+      top: getOffsetTop(stepsRef[index].current) - stepMargin,
       behavior: 'smooth'
     });
   };
@@ -124,8 +131,8 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       var stepIndex = 0;
 
       while (stepIndex < steps.length) {
-        var stepHeight = steps[stepIndex].ref.current.offsetHeight;
-        var stepBottomOffset = getOffsetTop(steps[stepIndex].ref.current) + (stepHeight - stepMargin);
+        var stepHeight = stepsRef[stepIndex].current.offsetHeight;
+        var stepBottomOffset = getOffsetTop(stepsRef[stepIndex].current) + (stepHeight - stepMargin);
 
         if (stepBottomOffset > scrollOffset) {
           newActiveStep = stepIndex;
@@ -182,7 +189,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       onClick: function onClick() {
         return scrollToStep(index);
       },
-      indicator: index + 1,
+      indicator: step.indicator,
       label: stepLabelVisible ? step.label : null,
       status: status[index]
     });
@@ -196,7 +203,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
   }, steps.map(function (step, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
-      ref: step.ref
+      ref: stepsRef[index]
     }, step.content);
   })));
 };

package/HiStepper/HiStep.js

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

package/es/HiScrollStepper/HiScrollStepper.js

@@ -67,6 +67,8 @@ 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,
@@ -87,12 +89,17 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       activeStep = _useCounter2[0],
       setActiveStep = _useCounter2[1].set;
 
-  var _useState = (0, _react.useState)(true),
+  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;
@@ -107,7 +114,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
 
   var scrollToStep = function scrollToStep(index) {
     window.scrollTo({
-      top: getOffsetTop(steps[index].ref.current) - stepMargin,
+      top: getOffsetTop(stepsRef[index].current) - stepMargin,
       behavior: 'smooth'
     });
   };
@@ -124,8 +131,8 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       var stepIndex = 0;
 
       while (stepIndex < steps.length) {
-        var stepHeight = steps[stepIndex].ref.current.offsetHeight;
-        var stepBottomOffset = getOffsetTop(steps[stepIndex].ref.current) + (stepHeight - stepMargin);
+        var stepHeight = stepsRef[stepIndex].current.offsetHeight;
+        var stepBottomOffset = getOffsetTop(stepsRef[stepIndex].current) + (stepHeight - stepMargin);
 
         if (stepBottomOffset > scrollOffset) {
           newActiveStep = stepIndex;
@@ -182,7 +189,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       onClick: function onClick() {
         return scrollToStep(index);
       },
-      indicator: index + 1,
+      indicator: step.indicator,
       label: stepLabelVisible ? step.label : null,
       status: status[index]
     });
@@ -196,7 +203,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
   }, steps.map(function (step, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
-      ref: step.ref
+      ref: stepsRef[index]
     }, step.content);
   })));
 };

package/es/HiStepper/HiStep.js

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

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
-  "version": "3.7.10",
+  "private": false,
+  "version": "3.7.11",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",
@@ -66,4 +67,4 @@
   },
   "main": "./index.js",
   "module": "./esm/index.js"
-}
+}