@hipay/hipay-material-ui 3.13.2 → 3.13.3

package/HiScrollStepper/HiScrollStepper.js

@@ -94,6 +94,11 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       stepLabelVisible = _useState2[0],
       setStepLabelVisible = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(document.body.scrollHeight > document.body.clientHeight),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      pageHasScroll = _useState4[0],
+      setPageHasScroll = _useState4[1];
+
   var instantActiveStep = 0;
   var stepsRef = (0, _react.useMemo)(function () {
     return Array(steps.length).fill(0).map(function () {
@@ -121,7 +126,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
 
   var handleScroll = function handleScroll() {
     var newActiveStep = 0;
-    var scrollOffset = window.pageYOffset;
+    var scrollOffset = window.pageYOffset + 1;
 
     if (scrollOffset < stepMargin) {
       newActiveStep = 0;
@@ -166,12 +171,18 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
     setStepLabelVisible(newVisibility);
   };
 
+  var handleResize = function handleResize() {
+    setPageHasScroll(document.body.scrollHeight > document.body.clientHeight);
+  };
+
   (0, _reactUse.useMount)(function () {
     window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize);
   });
   (0, _react.useEffect)(function () {
     return function () {
       window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -191,7 +202,8 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       },
       indicator: step.indicator,
       label: stepLabelVisible ? step.label : null,
-      status: status[index]
+      status: pageHasScroll ? status[index] : null,
+      disabled: !pageHasScroll
     });
   }))), stepLabelVisibilityToggle && /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
     className: (0, _classnames.default)(classes.hideLabelToggle, customClasses.hideLabelToggle),

package/es/HiScrollStepper/HiScrollStepper.js

@@ -94,6 +94,11 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       stepLabelVisible = _useState2[0],
       setStepLabelVisible = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(document.body.scrollHeight > document.body.clientHeight),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      pageHasScroll = _useState4[0],
+      setPageHasScroll = _useState4[1];
+
   var instantActiveStep = 0;
   var stepsRef = (0, _react.useMemo)(function () {
     return Array(steps.length).fill(0).map(function () {
@@ -121,7 +126,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
 
   var handleScroll = function handleScroll() {
     var newActiveStep = 0;
-    var scrollOffset = window.pageYOffset;
+    var scrollOffset = window.pageYOffset + 1;
 
     if (scrollOffset < stepMargin) {
       newActiveStep = 0;
@@ -166,12 +171,18 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
     setStepLabelVisible(newVisibility);
   };
 
+  var handleResize = function handleResize() {
+    setPageHasScroll(document.body.scrollHeight > document.body.clientHeight);
+  };
+
   (0, _reactUse.useMount)(function () {
     window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize);
   });
   (0, _react.useEffect)(function () {
     return function () {
       window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -191,7 +202,8 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       },
       indicator: step.indicator,
       label: stepLabelVisible ? step.label : null,
-      status: status[index]
+      status: pageHasScroll ? status[index] : null,
+      disabled: !pageHasScroll
     });
   }))), stepLabelVisibilityToggle && /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
     className: (0, _classnames.default)(classes.hideLabelToggle, customClasses.hideLabelToggle),

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@hipay/hipay-material-ui",
-  "private": false,
-  "version": "3.13.2",
+  "version": "3.13.3",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",
@@ -27,7 +26,7 @@
   "dependencies": {
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/runtime": "7.6.3",
-    "@mui/lab": "^5.0.0-alpha.64",
+    "@mui/lab": "5.0.0-alpha.89",
     "@mui/icons-material": "^5.2.5",
     "brcast": "3.0.1",
     "classnames": "2.2.6",
@@ -78,4 +77,4 @@
   },
   "main": "./index.js",
   "module": "./esm/index.js"
-}
+}