@hipay/hipay-material-ui 3.13.3 → 3.13.5

package/HiColoredLabel/HiColoredLabel.js

@@ -42,7 +42,7 @@ var styles = function styles(theme) {
     body2: (0, _objectSpread2.default)({}, theme.typography.body2),
     body3: (0, _objectSpread2.default)({}, theme.typography.body3),
     body4: (0, _objectSpread2.default)({}, theme.typography.body3),
-    body5: (0, _objectSpread2.default)({}, theme.typography.body3),
+    body5: (0, _objectSpread2.default)({}, theme.typography.caption),
     color: {
       fontWeight: 400
     },

package/HiScrollStepper/HiScrollStepper.js

@@ -74,7 +74,9 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       _ref$customClasses = _ref.customClasses,
       customClasses = _ref$customClasses === void 0 ? {} : _ref$customClasses,
       _ref$stepMargin = _ref.stepMargin,
-      stepMargin = _ref$stepMargin === void 0 ? 60 : _ref$stepMargin;
+      stepMargin = _ref$stepMargin === void 0 ? 60 : _ref$stepMargin,
+      _ref$minScrollHeightT = _ref.minScrollHeightToEnable,
+      minScrollHeightToEnable = _ref$minScrollHeightT === void 0 ? 0 : _ref$minScrollHeightT;
   var classes = useStyles();
 
   var _useMap = (0, _reactUse.useMap)({
@@ -94,10 +96,10 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       stepLabelVisible = _useState2[0],
       setStepLabelVisible = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(document.body.scrollHeight > document.body.clientHeight),
+  var _useState3 = (0, _react.useState)(document.body.scrollHeight - minScrollHeightToEnable >= document.body.clientHeight),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      pageHasScroll = _useState4[0],
-      setPageHasScroll = _useState4[1];
+      stepperEnabled = _useState4[0],
+      setStepperEnabled = _useState4[1];
 
   var instantActiveStep = 0;
   var stepsRef = (0, _react.useMemo)(function () {
@@ -172,7 +174,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
   };
 
   var handleResize = function handleResize() {
-    setPageHasScroll(document.body.scrollHeight > document.body.clientHeight);
+    setStepperEnabled(document.body.scrollHeight - minScrollHeightToEnable >= document.body.clientHeight);
   };
 
   (0, _reactUse.useMount)(function () {
@@ -185,6 +187,12 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    handleResize();
+  }, [document.body.scrollHeight]);
+  (0, _react.useEffect)(function () {
+    handleScroll();
+  }, [stepperEnabled]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.root, customClasses.root)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -202,8 +210,8 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       },
       indicator: step.indicator,
       label: stepLabelVisible ? step.label : null,
-      status: pageHasScroll ? status[index] : null,
-      disabled: !pageHasScroll
+      status: stepperEnabled ? status[index] : null,
+      disabled: !stepperEnabled
     });
   }))), stepLabelVisibilityToggle && /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
     className: (0, _classnames.default)(classes.hideLabelToggle, customClasses.hideLabelToggle),

package/es/HiColoredLabel/HiColoredLabel.js

@@ -42,7 +42,7 @@ var styles = function styles(theme) {
     body2: (0, _objectSpread2.default)({}, theme.typography.body2),
     body3: (0, _objectSpread2.default)({}, theme.typography.body3),
     body4: (0, _objectSpread2.default)({}, theme.typography.body3),
-    body5: (0, _objectSpread2.default)({}, theme.typography.body3),
+    body5: (0, _objectSpread2.default)({}, theme.typography.caption),
     color: {
       fontWeight: 400
     },

package/es/HiScrollStepper/HiScrollStepper.js

@@ -74,7 +74,9 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       _ref$customClasses = _ref.customClasses,
       customClasses = _ref$customClasses === void 0 ? {} : _ref$customClasses,
       _ref$stepMargin = _ref.stepMargin,
-      stepMargin = _ref$stepMargin === void 0 ? 60 : _ref$stepMargin;
+      stepMargin = _ref$stepMargin === void 0 ? 60 : _ref$stepMargin,
+      _ref$minScrollHeightT = _ref.minScrollHeightToEnable,
+      minScrollHeightToEnable = _ref$minScrollHeightT === void 0 ? 0 : _ref$minScrollHeightT;
   var classes = useStyles();
 
   var _useMap = (0, _reactUse.useMap)({
@@ -94,10 +96,10 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       stepLabelVisible = _useState2[0],
       setStepLabelVisible = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(document.body.scrollHeight > document.body.clientHeight),
+  var _useState3 = (0, _react.useState)(document.body.scrollHeight - minScrollHeightToEnable >= document.body.clientHeight),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      pageHasScroll = _useState4[0],
-      setPageHasScroll = _useState4[1];
+      stepperEnabled = _useState4[0],
+      setStepperEnabled = _useState4[1];
 
   var instantActiveStep = 0;
   var stepsRef = (0, _react.useMemo)(function () {
@@ -172,7 +174,7 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
   };
 
   var handleResize = function handleResize() {
-    setPageHasScroll(document.body.scrollHeight > document.body.clientHeight);
+    setStepperEnabled(document.body.scrollHeight - minScrollHeightToEnable >= document.body.clientHeight);
   };
 
   (0, _reactUse.useMount)(function () {
@@ -185,6 +187,12 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    handleResize();
+  }, [document.body.scrollHeight]);
+  (0, _react.useEffect)(function () {
+    handleScroll();
+  }, [stepperEnabled]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.root, customClasses.root)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -202,8 +210,8 @@ var HiScrollStepper = function HiScrollStepper(_ref) {
       },
       indicator: step.indicator,
       label: stepLabelVisible ? step.label : null,
-      status: pageHasScroll ? status[index] : null,
-      disabled: !pageHasScroll
+      status: stepperEnabled ? status[index] : null,
+      disabled: !stepperEnabled
     });
   }))), stepLabelVisibilityToggle && /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
     className: (0, _classnames.default)(classes.hideLabelToggle, customClasses.hideLabelToggle),

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
-  "version": "3.13.3",
+  "private": false,
+  "version": "3.13.5",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",
@@ -15,8 +16,8 @@
     "@hipay/design-system": "^1.0.2",
     "@mui/material": "5.8.4",
     "@mui/styles": "5.8.4",
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.8.0",
-    "@mui/styled-engine-sc": "5.8.0",
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.10.0",
+    "@mui/styled-engine-sc": "5.10.0",
     "mdi-material-ui": "7.1.0",
     "moment-timezone": "0.5.27",
     "react": "17.0.2",
@@ -73,8 +74,8 @@
     "node": ">=6.0.0"
   },
   "resolutions": {
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.8.0"
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.10.0"
   },
   "main": "./index.js",
   "module": "./esm/index.js"
-}
+}