@hitachivantara/uikit-react-lab 4.1.2 → 4.1.3

package/dist/Wizard/WizardContent/WizardContent.js

@@ -30,7 +30,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DRAWER_PERCENTAGE = 0.3;
-var MODAL_MARGIN = 20;
 var DRAWER_MIN_WIDTH = 280;
 var HvWizardContent = function HvWizardContent(_ref) {
   var classes = _ref.classes,
@@ -55,9 +54,10 @@ var HvWizardContent = function HvWizardContent(_ref) {
     context = _React$useContext.context,
     setContext = _React$useContext.setContext,
     summary = _React$useContext.summary;
+  var summaryRef = _react.default.useRef(null);
   var resizedRef = _react.default.useRef({
-    width: 0,
-    height: 0
+    height: 0,
+    width: 0
   });
   var _useElementSize = (0, _usehooksTs.useElementSize)(),
     _useElementSize2 = (0, _slicedToArray2.default)(_useElementSize, 2),
@@ -80,17 +80,25 @@ var HvWizardContent = function HvWizardContent(_ref) {
     var drawerWidth = modalWidth * DRAWER_PERCENTAGE;
     setSummaryHeight(newSizes.height);
     setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
-    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH) - MODAL_MARGIN);
+    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
+    resizedRef.current = {
+      height: newSizes.height,
+      width: newSizes.width
+    };
   }, []);
   _react.default.useEffect(function () {
+    var _summaryRef$current, _summaryRef$current$g, _summaryRef$current$g2;
+    var pageHeight = (_summaryRef$current = summaryRef.current) === null || _summaryRef$current === void 0 ? void 0 : (_summaryRef$current$g = _summaryRef$current.getBoundingClientRect) === null || _summaryRef$current$g === void 0 ? void 0 : (_summaryRef$current$g2 = _summaryRef$current$g.call(_summaryRef$current)) === null || _summaryRef$current$g2 === void 0 ? void 0 : _summaryRef$current$g2.height;
     if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
       updateSummaryMeasures(sizes);
-      resizedRef.current = {
-        height: sizes.height,
-        width: sizes.width
-      };
     }
-  }, [sizes, summary, updateSummaryMeasures]);
+    if (pageHeight && sizes.height !== pageHeight) {
+      updateSummaryMeasures({
+        width: sizes.width,
+        height: pageHeight
+      });
+    }
+  }, [tab, sizes, summary, updateSummaryMeasures]);
   _react.default.useEffect(function () {
     setContext(initialContext);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -110,28 +118,31 @@ var HvWizardContent = function HvWizardContent(_ref) {
       }, {});
       setContext(updatedContext);
     }
-    updateSummaryMeasures(sizes);
   }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps
 
   var translateX = summaryWidth ? summaryWidth + 10 : 450;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    ref: containerRef,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvDialogContent, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.summaryRef,
+    ref: function ref(el) {
+      containerRef(el);
+      summaryRef.current = el;
+    },
+    children: [summary !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.summarySticky,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.summaryContainer,
+        style: {
+          left: summaryLeft,
+          width: summaryWidth,
+          height: summaryHeight,
+          transform: "translate(".concat(summary ? 0 : translateX, "px, 0)")
+        },
+        children: summaryContent
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvDialogContent, {
       className: (0, _clsx.default)(classes.contentContainer, fixedHeight && classes.fixedHeight),
       indentContent: true,
-      children: [summary !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: classes.summarySticky,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: classes.summaryContainer,
-          style: {
-            left: summaryLeft,
-            width: summaryWidth,
-            height: summaryHeight,
-            transform: "translate(".concat(summary ? 0 : translateX, "px, 0)")
-          },
-          children: summaryContent
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingContainer.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingContainer.default, {
         hidden: !loading,
         children: _react.default.Children.map(arrayChildren, function (child, index) {
           if (index === tab) {
@@ -141,8 +152,8 @@ var HvWizardContent = function HvWizardContent(_ref) {
           }
           return null;
         })
-      })]
-    })
+      })
+    })]
   });
 };
 process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
@@ -166,6 +177,10 @@ process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
      * Style applied to the Wizard to fix its height.
      */
     fixedHeight: _propTypes.default.string,
+    /**
+     * Style applied to the summary container around the page content container.
+     */
+    summaryRef: _propTypes.default.string,
     /**
      * Style applied to the Summary container to stick it to the top.
      */

package/dist/Wizard/WizardContent/WizardContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContent.js","names":["DRAWER_PERCENTAGE","MODAL_MARGIN","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","useContext","HvWizardContext","context","setContext","summary","resizedRef","useRef","width","height","useElementSize","containerRef","sizes","useState","summaryHeight","setSummaryHeight","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","useEffect","current","updatedContext","Object","entries","key","childState","translateX","clsx","contentContainer","summarySticky","summaryContainer","left","transform","map","cloneElement","propTypes","PropTypes","number","isRequired","node","shape","string","bool","withStyles","styles","name"],"sources":["../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { useElementSize } from \"usehooks-ts\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst MODAL_MARGIN = 20;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n  classes,\n  fixedHeight = false,\n  loading = false,\n  children,\n  tab,\n  summaryContent,\n}) => {\n  const arrayChildren = React.Children.toArray(children);\n  const initialContext = arrayChildren.reduce((acc, child, index) => {\n    const invalid = child.props.mustValidate === true ? false : null;\n    const valid = invalid ?? (index === 0 || null);\n    return {\n      ...acc,\n      [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n    };\n  }, {});\n\n  const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n  const resizedRef = React.useRef({ width: 0, height: 0 });\n  const [containerRef, sizes] = useElementSize();\n\n  const [summaryHeight, setSummaryHeight] = React.useState(0);\n  const [summaryWidth, setSummaryWidth] = React.useState(0);\n  const [summaryLeft, setSummaryLeft] = React.useState(0);\n  const updateSummaryMeasures = React.useCallback((newSizes) => {\n    const modalWidth = newSizes.width;\n    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n    setSummaryHeight(newSizes.height);\n    setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH) - MODAL_MARGIN);\n  }, []);\n\n  React.useEffect(() => {\n    if (\n      (summary && sizes.height !== resizedRef.current.height) ||\n      sizes.width !== resizedRef.current.width\n    ) {\n      updateSummaryMeasures(sizes);\n      resizedRef.current = {\n        height: sizes.height,\n        width: sizes.width,\n      };\n    }\n  }, [sizes, summary, updateSummaryMeasures]);\n\n  React.useEffect(() => {\n    setContext(initialContext);\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    if (tab && !context[tab]?.touched) {\n      const updatedContext = Object.entries(context).reduce(\n        (acc, [key, childState]) => ({\n          ...acc,\n          ...(+key <= tab\n            ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n            : { [key]: childState }),\n        }),\n        {}\n      );\n\n      setContext(updatedContext);\n    }\n    updateSummaryMeasures(sizes);\n  }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <div ref={containerRef}>\n      <HvDialogContent\n        className={clsx(classes.contentContainer, {\n          [classes.fixedHeight]: fixedHeight,\n        })}\n        indentContent\n      >\n        {summary !== null && (\n          <div className={classes.summarySticky}>\n            <div\n              className={classes.summaryContainer}\n              style={{\n                left: summaryLeft,\n                width: summaryWidth,\n                height: summaryHeight,\n                transform: `translate(${summary ? 0 : translateX}px, 0)`,\n              }}\n            >\n              {summaryContent}\n            </div>\n          </div>\n        )}\n        <LoadingContainer hidden={!loading}>\n          {React.Children.map(arrayChildren, (child, index) => {\n            if (index === tab) {\n              return React.cloneElement(child, { tab });\n            }\n            return null;\n          })}\n        </LoadingContainer>\n      </HvDialogContent>\n    </div>\n  );\n};\n\nHvWizardContent.propTypes = {\n  /**\n   * Current tab to show.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Tabs to show on the Wizard.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the Wizard content container.\n     */\n    contentContainer: PropTypes.string,\n    /**\n     * Style applied to the Wizard to fix its height.\n     */\n    fixedHeight: PropTypes.string,\n    /**\n     * Style applied to the Summary container to stick it to the top.\n     */\n    summarySticky: PropTypes.string,\n    /**\n     * Style applied to the Summary container to position it on the right.\n     */\n    summaryContainer: PropTypes.string,\n  }).isRequired,\n  /**\n   * Forces minimum height to the component.\n   */\n  fixedHeight: PropTypes.bool,\n  /**\n   * Whether the loading animation is shown.\n   */\n  loading: PropTypes.bool,\n  /**\n   * The content of the summary.\n   */\n  summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}
+{"version":3,"file":"WizardContent.js","names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","useContext","HvWizardContext","context","setContext","summary","summaryRef","useRef","resizedRef","height","width","useElementSize","containerRef","sizes","useState","summaryHeight","setSummaryHeight","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","el","summarySticky","summaryContainer","left","transform","clsx","contentContainer","map","cloneElement","propTypes","PropTypes","number","isRequired","node","shape","string","bool","withStyles","styles","name"],"sources":["../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { useElementSize } from \"usehooks-ts\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n  classes,\n  fixedHeight = false,\n  loading = false,\n  children,\n  tab,\n  summaryContent,\n}) => {\n  const arrayChildren = React.Children.toArray(children);\n  const initialContext = arrayChildren.reduce((acc, child, index) => {\n    const invalid = child.props.mustValidate === true ? false : null;\n    const valid = invalid ?? (index === 0 || null);\n    return {\n      ...acc,\n      [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n    };\n  }, {});\n\n  const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n  const summaryRef = React.useRef(null);\n  const resizedRef = React.useRef({ height: 0, width: 0 });\n  const [containerRef, sizes] = useElementSize();\n\n  const [summaryHeight, setSummaryHeight] = React.useState(0);\n  const [summaryWidth, setSummaryWidth] = React.useState(0);\n  const [summaryLeft, setSummaryLeft] = React.useState(0);\n  const updateSummaryMeasures = React.useCallback((newSizes) => {\n    const modalWidth = newSizes.width;\n    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n    setSummaryHeight(newSizes.height);\n    setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n    resizedRef.current = {\n      height: newSizes.height,\n      width: newSizes.width,\n    };\n  }, []);\n\n  React.useEffect(() => {\n    const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n    if (\n      (summary && sizes.height !== resizedRef.current.height) ||\n      sizes.width !== resizedRef.current.width\n    ) {\n      updateSummaryMeasures(sizes);\n    }\n\n    if (pageHeight && sizes.height !== pageHeight) {\n      updateSummaryMeasures({\n        width: sizes.width,\n        height: pageHeight,\n      });\n    }\n  }, [tab, sizes, summary, updateSummaryMeasures]);\n\n  React.useEffect(() => {\n    setContext(initialContext);\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    if (tab && !context[tab]?.touched) {\n      const updatedContext = Object.entries(context).reduce(\n        (acc, [key, childState]) => ({\n          ...acc,\n          ...(+key <= tab\n            ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n            : { [key]: childState }),\n        }),\n        {}\n      );\n\n      setContext(updatedContext);\n    }\n  }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <div\n      className={classes.summaryRef}\n      ref={(el) => {\n        containerRef(el);\n        summaryRef.current = el;\n      }}\n    >\n      {summary !== null && (\n        <div className={classes.summarySticky}>\n          <div\n            className={classes.summaryContainer}\n            style={{\n              left: summaryLeft,\n              width: summaryWidth,\n              height: summaryHeight,\n              transform: `translate(${summary ? 0 : translateX}px, 0)`,\n            }}\n          >\n            {summaryContent}\n          </div>\n        </div>\n      )}\n      <HvDialogContent\n        className={clsx(classes.contentContainer, {\n          [classes.fixedHeight]: fixedHeight,\n        })}\n        indentContent\n      >\n        <LoadingContainer hidden={!loading}>\n          {React.Children.map(arrayChildren, (child, index) => {\n            if (index === tab) {\n              return React.cloneElement(child, { tab });\n            }\n            return null;\n          })}\n        </LoadingContainer>\n      </HvDialogContent>\n    </div>\n  );\n};\n\nHvWizardContent.propTypes = {\n  /**\n   * Current tab to show.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Tabs to show on the Wizard.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the Wizard content container.\n     */\n    contentContainer: PropTypes.string,\n    /**\n     * Style applied to the Wizard to fix its height.\n     */\n    fixedHeight: PropTypes.string,\n    /**\n     * Style applied to the summary container around the page content container.\n     */\n    summaryRef: PropTypes.string,\n    /**\n     * Style applied to the Summary container to stick it to the top.\n     */\n    summarySticky: PropTypes.string,\n    /**\n     * Style applied to the Summary container to position it on the right.\n     */\n    summaryContainer: PropTypes.string,\n  }).isRequired,\n  /**\n   * Forces minimum height to the component.\n   */\n  fixedHeight: PropTypes.bool,\n  /**\n   * Whether the loading animation is shown.\n   */\n  loading: PropTypes.bool,\n  /**\n   * The content of the summary.\n   */\n  summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}

package/dist/Wizard/WizardContent/styles.js

@@ -16,13 +16,19 @@ var styles = function styles(theme) {
     fixedHeight: {
       minHeight: "calc(100vh - 387px)"
     },
+    summaryRef: {
+      flex: 1,
+      overflowY: "auto",
+      overflowX: "hidden"
+    },
     summarySticky: {
       position: "sticky",
-      top: 0
+      top: 0,
+      zIndex: 1
     },
     summaryContainer: {
       position: "absolute",
-      top: -20,
+      top: 0,
       minWidth: 280,
       boxShadow: theme.hv.shadows[1],
       backgroundColor: theme.hv.palette.atmosphere.atmo1,

package/dist/Wizard/WizardContent/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summarySticky","top","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction","overflowY"],"sources":["../../../src/Wizard/WizardContent/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  contentContainer: {\n    position: \"relative\",\n    padding: 20,\n    marginLeft: 0,\n    minHeight: 400,\n    overflowX: \"hidden\",\n  },\n  fixedHeight: {\n    minHeight: \"calc(100vh - 387px)\",\n  },\n  summarySticky: {\n    position: \"sticky\",\n    top: 0,\n  },\n  summaryContainer: {\n    position: \"absolute\",\n    top: -20,\n    minWidth: 280,\n    boxShadow: theme.hv.shadows[1],\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    transition: \"transform 0.3s\",\n    transitionTimingFunction: \"ease-in-out\",\n    overflowY: \"scroll\",\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OAAM;IACzBC,gBAAgB,EAAE;MAChBC,QAAQ,EAAE,UAAU;MACpBC,OAAO,EAAE,EAAE;MACXC,UAAU,EAAE,CAAC;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE;IACb,CAAC;IACDC,WAAW,EAAE;MACXF,SAAS,EAAE;IACb,CAAC;IACDG,aAAa,EAAE;MACbN,QAAQ,EAAE,QAAQ;MAClBO,GAAG,EAAE;IACP,CAAC;IACDC,gBAAgB,EAAE;MAChBR,QAAQ,EAAE,UAAU;MACpBO,GAAG,EAAE,CAAC,EAAE;MACRE,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAEZ,KAAK,CAACa,EAAE,CAACC,OAAO,CAAC,CAAC,CAAC;MAC9BC,eAAe,EAAEf,KAAK,CAACa,EAAE,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;MAClDC,UAAU,EAAE,gBAAgB;MAC5BC,wBAAwB,EAAE,aAAa;MACvCC,SAAS,EAAE;IACb;EACF,CAAC;AAAA,CAAC;AAAC,eAEYtB,MAAM;AAAA"}
+{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summaryRef","flex","overflowY","summarySticky","top","zIndex","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction"],"sources":["../../../src/Wizard/WizardContent/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  contentContainer: {\n    position: \"relative\",\n    padding: 20,\n    marginLeft: 0,\n    minHeight: 400,\n    overflowX: \"hidden\",\n  },\n  fixedHeight: {\n    minHeight: \"calc(100vh - 387px)\",\n  },\n  summaryRef: {\n    flex: 1,\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n  },\n  summarySticky: {\n    position: \"sticky\",\n    top: 0,\n    zIndex: 1,\n  },\n  summaryContainer: {\n    position: \"absolute\",\n    top: 0,\n    minWidth: 280,\n    boxShadow: theme.hv.shadows[1],\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    transition: \"transform 0.3s\",\n    transitionTimingFunction: \"ease-in-out\",\n    overflowY: \"scroll\",\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OAAM;IACzBC,gBAAgB,EAAE;MAChBC,QAAQ,EAAE,UAAU;MACpBC,OAAO,EAAE,EAAE;MACXC,UAAU,EAAE,CAAC;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE;IACb,CAAC;IACDC,WAAW,EAAE;MACXF,SAAS,EAAE;IACb,CAAC;IACDG,UAAU,EAAE;MACVC,IAAI,EAAE,CAAC;MACPC,SAAS,EAAE,MAAM;MACjBJ,SAAS,EAAE;IACb,CAAC;IACDK,aAAa,EAAE;MACbT,QAAQ,EAAE,QAAQ;MAClBU,GAAG,EAAE,CAAC;MACNC,MAAM,EAAE;IACV,CAAC;IACDC,gBAAgB,EAAE;MAChBZ,QAAQ,EAAE,UAAU;MACpBU,GAAG,EAAE,CAAC;MACNG,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAEhB,KAAK,CAACiB,EAAE,CAACC,OAAO,CAAC,CAAC,CAAC;MAC9BC,eAAe,EAAEnB,KAAK,CAACiB,EAAE,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;MAClDC,UAAU,EAAE,gBAAgB;MAC5BC,wBAAwB,EAAE,aAAa;MACvCd,SAAS,EAAE;IACb;EACF,CAAC;AAAA,CAAC;AAAC,eAEYX,MAAM;AAAA"}

package/dist/Wizard/WizardTitle/WizardTitle.js

@@ -52,6 +52,9 @@ var HvWizardTitle = function HvWizardTitle(_ref) {
     if (summary === null && hasSummary) {
       setSummary(false);
     }
+    return function () {
+      setSummary(false);
+    };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   _react.default.useEffect(function () {

package/dist/Wizard/WizardTitle/WizardTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardTitle.js","names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","React","useContext","HvWizardContext","context","summary","setSummary","useState","steps","setSteps","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","PropTypes","shape","string","bool","number","isRequired","func","oneOf","xl","withStyles","styles"],"sources":["../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\n  return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  tab,\n  classes,\n  changeTab,\n  customStep = {},\n}) => {\n  const { context, summary, setSummary } = React.useContext(HvWizardContext);\n  const [steps, setSteps] = React.useState([]);\n\n  React.useEffect(() => {\n    if (summary === null && hasSummary) {\n      setSummary(false);\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    const contextArray = Object.entries(context);\n    if (contextArray.length) {\n      const updatedSteps = contextArray.map(([, childState], index) => ({\n        title: childState.name ?? `${index + 1}`,\n        state: switchTabState(childState, tab, index),\n        onClick: () => changeTab(index),\n      }));\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, changeTab]);\n\n  const toggleSummary = () => {\n    setSummary((oldSummary) => !oldSummary);\n  };\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{ messageContainer: classes.messageContainer }}\n    >\n      <HvGrid\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className={classes.titleContainer}\n      >\n        {title && (\n          <HvTypography variant=\"xsTitle\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type={customStep?.type ?? \"Default\"}\n            stepSize={customStep?.stepSize ?? \"XS\"}\n            width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            category=\"secondary\"\n            className={classes.buttonWidth}\n            classes={{ root: classes.rootSummaryButton }}\n            onClick={toggleSummary}\n          >\n            <Report /> {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </HvGrid>\n    </HvDialogTitle>\n  );\n};\n\nHvWizardTitle.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the header container.\n     */\n    headerContainer: PropTypes.string,\n    /**\n     * Styles applied to override the Dialog Title styles.\n     */\n    messageContainer: PropTypes.string,\n    /**\n     * Styles applied to the header content container.\n     */\n    titleContainer: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its width.\n     */\n    buttonWidth: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its right padding.\n     */\n    rootSummaryButton: PropTypes.string,\n    /**\n     *\n     */\n    stepContainer: PropTypes.string,\n  }),\n  /**\n   * Title for the wizard.\n   */\n  title: PropTypes.string,\n  /**\n   * Shows the summary button.\n   */\n  hasSummary: PropTypes.bool,\n  /**\n   * An object containing all the labels for the wizard header.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Summary button label.\n     */\n    summary: PropTypes.string,\n  }),\n  /**\n   * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Function to change the tab when pressing previous and next buttons.\n   */\n  changeTab: PropTypes.func.isRequired,\n  /**\n   * Custom object to define type, size and width of the StepNavigation component\n   */\n  customStep: PropTypes.shape({\n    /**\n     * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n     */\n    type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n    /**\n     * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n     */\n    stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n    /**\n     * Width of the component element on each breakpoint screen resolution.\n     */\n    width: PropTypes.shape({\n      xs: PropTypes.number,\n      sm: PropTypes.number,\n      md: PropTypes.number,\n      lg: PropTypes.number,\n      xl: PropTypes.number,\n    }),\n  }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}
+{"version":3,"file":"WizardTitle.js","names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","React","useContext","HvWizardContext","context","summary","setSummary","useState","steps","setSteps","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","PropTypes","shape","string","bool","number","isRequired","func","oneOf","xl","withStyles","styles"],"sources":["../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\n  return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  tab,\n  classes,\n  changeTab,\n  customStep = {},\n}) => {\n  const { context, summary, setSummary } = React.useContext(HvWizardContext);\n  const [steps, setSteps] = React.useState([]);\n\n  React.useEffect(() => {\n    if (summary === null && hasSummary) {\n      setSummary(false);\n    }\n\n    return () => {\n      setSummary(false);\n    };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    const contextArray = Object.entries(context);\n    if (contextArray.length) {\n      const updatedSteps = contextArray.map(([, childState], index) => ({\n        title: childState.name ?? `${index + 1}`,\n        state: switchTabState(childState, tab, index),\n        onClick: () => changeTab(index),\n      }));\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, changeTab]);\n\n  const toggleSummary = () => {\n    setSummary((oldSummary) => !oldSummary);\n  };\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{ messageContainer: classes.messageContainer }}\n    >\n      <HvGrid\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className={classes.titleContainer}\n      >\n        {title && (\n          <HvTypography variant=\"xsTitle\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type={customStep?.type ?? \"Default\"}\n            stepSize={customStep?.stepSize ?? \"XS\"}\n            width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            category=\"secondary\"\n            className={classes.buttonWidth}\n            classes={{ root: classes.rootSummaryButton }}\n            onClick={toggleSummary}\n          >\n            <Report /> {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </HvGrid>\n    </HvDialogTitle>\n  );\n};\n\nHvWizardTitle.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the header container.\n     */\n    headerContainer: PropTypes.string,\n    /**\n     * Styles applied to override the Dialog Title styles.\n     */\n    messageContainer: PropTypes.string,\n    /**\n     * Styles applied to the header content container.\n     */\n    titleContainer: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its width.\n     */\n    buttonWidth: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its right padding.\n     */\n    rootSummaryButton: PropTypes.string,\n    /**\n     *\n     */\n    stepContainer: PropTypes.string,\n  }),\n  /**\n   * Title for the wizard.\n   */\n  title: PropTypes.string,\n  /**\n   * Shows the summary button.\n   */\n  hasSummary: PropTypes.bool,\n  /**\n   * An object containing all the labels for the wizard header.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Summary button label.\n     */\n    summary: PropTypes.string,\n  }),\n  /**\n   * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Function to change the tab when pressing previous and next buttons.\n   */\n  changeTab: PropTypes.func.isRequired,\n  /**\n   * Custom object to define type, size and width of the StepNavigation component\n   */\n  customStep: PropTypes.shape({\n    /**\n     * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n     */\n    type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n    /**\n     * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n     */\n    stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n    /**\n     * Width of the component element on each breakpoint screen resolution.\n     */\n    width: PropTypes.shape({\n      xs: PropTypes.number,\n      sm: PropTypes.number,\n      md: PropTypes.number,\n      lg: PropTypes.number,\n      xl: PropTypes.number,\n    }),\n  }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}

package/dist/legacy/Wizard/WizardContent/WizardContent.js

@@ -24,7 +24,6 @@ import styles from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DRAWER_PERCENTAGE = 0.3;
-var MODAL_MARGIN = 20;
 var DRAWER_MIN_WIDTH = 280;
 var HvWizardContent = function HvWizardContent(_ref) {
   var classes = _ref.classes,
@@ -49,9 +48,10 @@ var HvWizardContent = function HvWizardContent(_ref) {
     context = _React$useContext.context,
     setContext = _React$useContext.setContext,
     summary = _React$useContext.summary;
+  var summaryRef = React.useRef(null);
   var resizedRef = React.useRef({
-    width: 0,
-    height: 0
+    height: 0,
+    width: 0
   });
   var _useElementSize = useElementSize(),
     _useElementSize2 = _slicedToArray(_useElementSize, 2),
@@ -74,17 +74,25 @@ var HvWizardContent = function HvWizardContent(_ref) {
     var drawerWidth = modalWidth * DRAWER_PERCENTAGE;
     setSummaryHeight(newSizes.height);
     setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
-    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH) - MODAL_MARGIN);
+    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
+    resizedRef.current = {
+      height: newSizes.height,
+      width: newSizes.width
+    };
   }, []);
   React.useEffect(function () {
+    var _summaryRef$current, _summaryRef$current$g, _summaryRef$current$g2;
+    var pageHeight = (_summaryRef$current = summaryRef.current) === null || _summaryRef$current === void 0 ? void 0 : (_summaryRef$current$g = _summaryRef$current.getBoundingClientRect) === null || _summaryRef$current$g === void 0 ? void 0 : (_summaryRef$current$g2 = _summaryRef$current$g.call(_summaryRef$current)) === null || _summaryRef$current$g2 === void 0 ? void 0 : _summaryRef$current$g2.height;
     if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
       updateSummaryMeasures(sizes);
-      resizedRef.current = {
-        height: sizes.height,
-        width: sizes.width
-      };
     }
-  }, [sizes, summary, updateSummaryMeasures]);
+    if (pageHeight && sizes.height !== pageHeight) {
+      updateSummaryMeasures({
+        width: sizes.width,
+        height: pageHeight
+      });
+    }
+  }, [tab, sizes, summary, updateSummaryMeasures]);
   React.useEffect(function () {
     setContext(initialContext);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -104,28 +112,31 @@ var HvWizardContent = function HvWizardContent(_ref) {
       }, {});
       setContext(updatedContext);
     }
-    updateSummaryMeasures(sizes);
   }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps
 
   var translateX = summaryWidth ? summaryWidth + 10 : 450;
-  return /*#__PURE__*/_jsx("div", {
-    ref: containerRef,
-    children: /*#__PURE__*/_jsxs(HvDialogContent, {
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.summaryRef,
+    ref: function ref(el) {
+      containerRef(el);
+      summaryRef.current = el;
+    },
+    children: [summary !== null && /*#__PURE__*/_jsx("div", {
+      className: classes.summarySticky,
+      children: /*#__PURE__*/_jsx("div", {
+        className: classes.summaryContainer,
+        style: {
+          left: summaryLeft,
+          width: summaryWidth,
+          height: summaryHeight,
+          transform: "translate(".concat(summary ? 0 : translateX, "px, 0)")
+        },
+        children: summaryContent
+      })
+    }), /*#__PURE__*/_jsx(HvDialogContent, {
       className: clsx(classes.contentContainer, fixedHeight && classes.fixedHeight),
       indentContent: true,
-      children: [summary !== null && /*#__PURE__*/_jsx("div", {
-        className: classes.summarySticky,
-        children: /*#__PURE__*/_jsx("div", {
-          className: classes.summaryContainer,
-          style: {
-            left: summaryLeft,
-            width: summaryWidth,
-            height: summaryHeight,
-            transform: "translate(".concat(summary ? 0 : translateX, "px, 0)")
-          },
-          children: summaryContent
-        })
-      }), /*#__PURE__*/_jsx(LoadingContainer, {
+      children: /*#__PURE__*/_jsx(LoadingContainer, {
         hidden: !loading,
         children: React.Children.map(arrayChildren, function (child, index) {
           if (index === tab) {
@@ -135,8 +146,8 @@ var HvWizardContent = function HvWizardContent(_ref) {
           }
           return null;
         })
-      })]
-    })
+      })
+    })]
   });
 };
 process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
@@ -160,6 +171,10 @@ process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
      * Style applied to the Wizard to fix its height.
      */
     fixedHeight: PropTypes.string,
+    /**
+     * Style applied to the summary container around the page content container.
+     */
+    summaryRef: PropTypes.string,
     /**
      * Style applied to the Summary container to stick it to the top.
      */

package/dist/legacy/Wizard/WizardContent/WizardContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContent.js","names":["React","PropTypes","withStyles","useElementSize","clsx","HvDialogContent","HvWizardContext","LoadingContainer","styles","DRAWER_PERCENTAGE","MODAL_MARGIN","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","useContext","context","setContext","summary","resizedRef","useRef","width","height","containerRef","sizes","useState","summaryHeight","setSummaryHeight","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","useEffect","current","updatedContext","Object","entries","key","childState","translateX","contentContainer","summarySticky","summaryContainer","left","transform","map","cloneElement","propTypes","number","isRequired","node","shape","string","bool","name"],"sources":["../../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { useElementSize } from \"usehooks-ts\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst MODAL_MARGIN = 20;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n  classes,\n  fixedHeight = false,\n  loading = false,\n  children,\n  tab,\n  summaryContent,\n}) => {\n  const arrayChildren = React.Children.toArray(children);\n  const initialContext = arrayChildren.reduce((acc, child, index) => {\n    const invalid = child.props.mustValidate === true ? false : null;\n    const valid = invalid ?? (index === 0 || null);\n    return {\n      ...acc,\n      [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n    };\n  }, {});\n\n  const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n  const resizedRef = React.useRef({ width: 0, height: 0 });\n  const [containerRef, sizes] = useElementSize();\n\n  const [summaryHeight, setSummaryHeight] = React.useState(0);\n  const [summaryWidth, setSummaryWidth] = React.useState(0);\n  const [summaryLeft, setSummaryLeft] = React.useState(0);\n  const updateSummaryMeasures = React.useCallback((newSizes) => {\n    const modalWidth = newSizes.width;\n    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n    setSummaryHeight(newSizes.height);\n    setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH) - MODAL_MARGIN);\n  }, []);\n\n  React.useEffect(() => {\n    if (\n      (summary && sizes.height !== resizedRef.current.height) ||\n      sizes.width !== resizedRef.current.width\n    ) {\n      updateSummaryMeasures(sizes);\n      resizedRef.current = {\n        height: sizes.height,\n        width: sizes.width,\n      };\n    }\n  }, [sizes, summary, updateSummaryMeasures]);\n\n  React.useEffect(() => {\n    setContext(initialContext);\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    if (tab && !context[tab]?.touched) {\n      const updatedContext = Object.entries(context).reduce(\n        (acc, [key, childState]) => ({\n          ...acc,\n          ...(+key <= tab\n            ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n            : { [key]: childState }),\n        }),\n        {}\n      );\n\n      setContext(updatedContext);\n    }\n    updateSummaryMeasures(sizes);\n  }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <div ref={containerRef}>\n      <HvDialogContent\n        className={clsx(classes.contentContainer, {\n          [classes.fixedHeight]: fixedHeight,\n        })}\n        indentContent\n      >\n        {summary !== null && (\n          <div className={classes.summarySticky}>\n            <div\n              className={classes.summaryContainer}\n              style={{\n                left: summaryLeft,\n                width: summaryWidth,\n                height: summaryHeight,\n                transform: `translate(${summary ? 0 : translateX}px, 0)`,\n              }}\n            >\n              {summaryContent}\n            </div>\n          </div>\n        )}\n        <LoadingContainer hidden={!loading}>\n          {React.Children.map(arrayChildren, (child, index) => {\n            if (index === tab) {\n              return React.cloneElement(child, { tab });\n            }\n            return null;\n          })}\n        </LoadingContainer>\n      </HvDialogContent>\n    </div>\n  );\n};\n\nHvWizardContent.propTypes = {\n  /**\n   * Current tab to show.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Tabs to show on the Wizard.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the Wizard content container.\n     */\n    contentContainer: PropTypes.string,\n    /**\n     * Style applied to the Wizard to fix its height.\n     */\n    fixedHeight: PropTypes.string,\n    /**\n     * Style applied to the Summary container to stick it to the top.\n     */\n    summarySticky: PropTypes.string,\n    /**\n     * Style applied to the Summary container to position it on the right.\n     */\n    summaryContainer: PropTypes.string,\n  }).isRequired,\n  /**\n   * Forces minimum height to the component.\n   */\n  fixedHeight: PropTypes.bool,\n  /**\n   * Whether the loading animation is shown.\n   */\n  loading: PropTypes.bool,\n  /**\n   * The content of the summary.\n   */\n  summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}
+{"version":3,"file":"WizardContent.js","names":["React","PropTypes","withStyles","useElementSize","clsx","HvDialogContent","HvWizardContext","LoadingContainer","styles","DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","useContext","context","setContext","summary","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useState","summaryHeight","setSummaryHeight","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","el","summarySticky","summaryContainer","left","transform","contentContainer","map","cloneElement","propTypes","number","isRequired","node","shape","string","bool","name"],"sources":["../../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { useElementSize } from \"usehooks-ts\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n  classes,\n  fixedHeight = false,\n  loading = false,\n  children,\n  tab,\n  summaryContent,\n}) => {\n  const arrayChildren = React.Children.toArray(children);\n  const initialContext = arrayChildren.reduce((acc, child, index) => {\n    const invalid = child.props.mustValidate === true ? false : null;\n    const valid = invalid ?? (index === 0 || null);\n    return {\n      ...acc,\n      [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n    };\n  }, {});\n\n  const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n  const summaryRef = React.useRef(null);\n  const resizedRef = React.useRef({ height: 0, width: 0 });\n  const [containerRef, sizes] = useElementSize();\n\n  const [summaryHeight, setSummaryHeight] = React.useState(0);\n  const [summaryWidth, setSummaryWidth] = React.useState(0);\n  const [summaryLeft, setSummaryLeft] = React.useState(0);\n  const updateSummaryMeasures = React.useCallback((newSizes) => {\n    const modalWidth = newSizes.width;\n    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n    setSummaryHeight(newSizes.height);\n    setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n    resizedRef.current = {\n      height: newSizes.height,\n      width: newSizes.width,\n    };\n  }, []);\n\n  React.useEffect(() => {\n    const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n    if (\n      (summary && sizes.height !== resizedRef.current.height) ||\n      sizes.width !== resizedRef.current.width\n    ) {\n      updateSummaryMeasures(sizes);\n    }\n\n    if (pageHeight && sizes.height !== pageHeight) {\n      updateSummaryMeasures({\n        width: sizes.width,\n        height: pageHeight,\n      });\n    }\n  }, [tab, sizes, summary, updateSummaryMeasures]);\n\n  React.useEffect(() => {\n    setContext(initialContext);\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    if (tab && !context[tab]?.touched) {\n      const updatedContext = Object.entries(context).reduce(\n        (acc, [key, childState]) => ({\n          ...acc,\n          ...(+key <= tab\n            ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n            : { [key]: childState }),\n        }),\n        {}\n      );\n\n      setContext(updatedContext);\n    }\n  }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <div\n      className={classes.summaryRef}\n      ref={(el) => {\n        containerRef(el);\n        summaryRef.current = el;\n      }}\n    >\n      {summary !== null && (\n        <div className={classes.summarySticky}>\n          <div\n            className={classes.summaryContainer}\n            style={{\n              left: summaryLeft,\n              width: summaryWidth,\n              height: summaryHeight,\n              transform: `translate(${summary ? 0 : translateX}px, 0)`,\n            }}\n          >\n            {summaryContent}\n          </div>\n        </div>\n      )}\n      <HvDialogContent\n        className={clsx(classes.contentContainer, {\n          [classes.fixedHeight]: fixedHeight,\n        })}\n        indentContent\n      >\n        <LoadingContainer hidden={!loading}>\n          {React.Children.map(arrayChildren, (child, index) => {\n            if (index === tab) {\n              return React.cloneElement(child, { tab });\n            }\n            return null;\n          })}\n        </LoadingContainer>\n      </HvDialogContent>\n    </div>\n  );\n};\n\nHvWizardContent.propTypes = {\n  /**\n   * Current tab to show.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Tabs to show on the Wizard.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the Wizard content container.\n     */\n    contentContainer: PropTypes.string,\n    /**\n     * Style applied to the Wizard to fix its height.\n     */\n    fixedHeight: PropTypes.string,\n    /**\n     * Style applied to the summary container around the page content container.\n     */\n    summaryRef: PropTypes.string,\n    /**\n     * Style applied to the Summary container to stick it to the top.\n     */\n    summarySticky: PropTypes.string,\n    /**\n     * Style applied to the Summary container to position it on the right.\n     */\n    summaryContainer: PropTypes.string,\n  }).isRequired,\n  /**\n   * Forces minimum height to the component.\n   */\n  fixedHeight: PropTypes.bool,\n  /**\n   * Whether the loading animation is shown.\n   */\n  loading: PropTypes.bool,\n  /**\n   * The content of the summary.\n   */\n  summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}

package/dist/legacy/Wizard/WizardContent/styles.js

@@ -10,13 +10,19 @@ var styles = function styles(theme) {
     fixedHeight: {
       minHeight: "calc(100vh - 387px)"
     },
+    summaryRef: {
+      flex: 1,
+      overflowY: "auto",
+      overflowX: "hidden"
+    },
     summarySticky: {
       position: "sticky",
-      top: 0
+      top: 0,
+      zIndex: 1
     },
     summaryContainer: {
       position: "absolute",
-      top: -20,
+      top: 0,
       minWidth: 280,
       boxShadow: theme.hv.shadows[1],
       backgroundColor: theme.hv.palette.atmosphere.atmo1,

package/dist/legacy/Wizard/WizardContent/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summarySticky","top","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction","overflowY"],"sources":["../../../../src/Wizard/WizardContent/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  contentContainer: {\n    position: \"relative\",\n    padding: 20,\n    marginLeft: 0,\n    minHeight: 400,\n    overflowX: \"hidden\",\n  },\n  fixedHeight: {\n    minHeight: \"calc(100vh - 387px)\",\n  },\n  summarySticky: {\n    position: \"sticky\",\n    top: 0,\n  },\n  summaryContainer: {\n    position: \"absolute\",\n    top: -20,\n    minWidth: 280,\n    boxShadow: theme.hv.shadows[1],\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    transition: \"transform 0.3s\",\n    transitionTimingFunction: \"ease-in-out\",\n    overflowY: \"scroll\",\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OAAM;IACzBC,gBAAgB,EAAE;MAChBC,QAAQ,EAAE,UAAU;MACpBC,OAAO,EAAE,EAAE;MACXC,UAAU,EAAE,CAAC;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE;IACb,CAAC;IACDC,WAAW,EAAE;MACXF,SAAS,EAAE;IACb,CAAC;IACDG,aAAa,EAAE;MACbN,QAAQ,EAAE,QAAQ;MAClBO,GAAG,EAAE;IACP,CAAC;IACDC,gBAAgB,EAAE;MAChBR,QAAQ,EAAE,UAAU;MACpBO,GAAG,EAAE,CAAC,EAAE;MACRE,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAEZ,KAAK,CAACa,EAAE,CAACC,OAAO,CAAC,CAAC,CAAC;MAC9BC,eAAe,EAAEf,KAAK,CAACa,EAAE,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;MAClDC,UAAU,EAAE,gBAAgB;MAC5BC,wBAAwB,EAAE,aAAa;MACvCC,SAAS,EAAE;IACb;EACF,CAAC;AAAA,CAAC;AAEF,eAAetB,MAAM"}
+{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summaryRef","flex","overflowY","summarySticky","top","zIndex","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction"],"sources":["../../../../src/Wizard/WizardContent/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  contentContainer: {\n    position: \"relative\",\n    padding: 20,\n    marginLeft: 0,\n    minHeight: 400,\n    overflowX: \"hidden\",\n  },\n  fixedHeight: {\n    minHeight: \"calc(100vh - 387px)\",\n  },\n  summaryRef: {\n    flex: 1,\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n  },\n  summarySticky: {\n    position: \"sticky\",\n    top: 0,\n    zIndex: 1,\n  },\n  summaryContainer: {\n    position: \"absolute\",\n    top: 0,\n    minWidth: 280,\n    boxShadow: theme.hv.shadows[1],\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    transition: \"transform 0.3s\",\n    transitionTimingFunction: \"ease-in-out\",\n    overflowY: \"scroll\",\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OAAM;IACzBC,gBAAgB,EAAE;MAChBC,QAAQ,EAAE,UAAU;MACpBC,OAAO,EAAE,EAAE;MACXC,UAAU,EAAE,CAAC;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE;IACb,CAAC;IACDC,WAAW,EAAE;MACXF,SAAS,EAAE;IACb,CAAC;IACDG,UAAU,EAAE;MACVC,IAAI,EAAE,CAAC;MACPC,SAAS,EAAE,MAAM;MACjBJ,SAAS,EAAE;IACb,CAAC;IACDK,aAAa,EAAE;MACbT,QAAQ,EAAE,QAAQ;MAClBU,GAAG,EAAE,CAAC;MACNC,MAAM,EAAE;IACV,CAAC;IACDC,gBAAgB,EAAE;MAChBZ,QAAQ,EAAE,UAAU;MACpBU,GAAG,EAAE,CAAC;MACNG,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAEhB,KAAK,CAACiB,EAAE,CAACC,OAAO,CAAC,CAAC,CAAC;MAC9BC,eAAe,EAAEnB,KAAK,CAACiB,EAAE,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;MAClDC,UAAU,EAAE,gBAAgB;MAC5BC,wBAAwB,EAAE,aAAa;MACvCd,SAAS,EAAE;IACb;EACF,CAAC;AAAA,CAAC;AAEF,eAAeX,MAAM"}

package/dist/legacy/Wizard/WizardTitle/WizardTitle.js

@@ -46,6 +46,9 @@ var HvWizardTitle = function HvWizardTitle(_ref) {
     if (summary === null && hasSummary) {
       setSummary(false);
     }
+    return function () {
+      setSummary(false);
+    };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(function () {

package/dist/legacy/Wizard/WizardTitle/WizardTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardTitle.js","names":["React","PropTypes","withStyles","HvButton","HvDialogTitle","HvGrid","HvTypography","Report","HvStepNavigation","HvWizardContext","styles","switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","useContext","context","summary","setSummary","useState","steps","setSteps","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","shape","string","bool","number","isRequired","func","oneOf","xl"],"sources":["../../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\n  return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  tab,\n  classes,\n  changeTab,\n  customStep = {},\n}) => {\n  const { context, summary, setSummary } = React.useContext(HvWizardContext);\n  const [steps, setSteps] = React.useState([]);\n\n  React.useEffect(() => {\n    if (summary === null && hasSummary) {\n      setSummary(false);\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    const contextArray = Object.entries(context);\n    if (contextArray.length) {\n      const updatedSteps = contextArray.map(([, childState], index) => ({\n        title: childState.name ?? `${index + 1}`,\n        state: switchTabState(childState, tab, index),\n        onClick: () => changeTab(index),\n      }));\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, changeTab]);\n\n  const toggleSummary = () => {\n    setSummary((oldSummary) => !oldSummary);\n  };\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{ messageContainer: classes.messageContainer }}\n    >\n      <HvGrid\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className={classes.titleContainer}\n      >\n        {title && (\n          <HvTypography variant=\"xsTitle\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type={customStep?.type ?? \"Default\"}\n            stepSize={customStep?.stepSize ?? \"XS\"}\n            width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            category=\"secondary\"\n            className={classes.buttonWidth}\n            classes={{ root: classes.rootSummaryButton }}\n            onClick={toggleSummary}\n          >\n            <Report /> {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </HvGrid>\n    </HvDialogTitle>\n  );\n};\n\nHvWizardTitle.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the header container.\n     */\n    headerContainer: PropTypes.string,\n    /**\n     * Styles applied to override the Dialog Title styles.\n     */\n    messageContainer: PropTypes.string,\n    /**\n     * Styles applied to the header content container.\n     */\n    titleContainer: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its width.\n     */\n    buttonWidth: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its right padding.\n     */\n    rootSummaryButton: PropTypes.string,\n    /**\n     *\n     */\n    stepContainer: PropTypes.string,\n  }),\n  /**\n   * Title for the wizard.\n   */\n  title: PropTypes.string,\n  /**\n   * Shows the summary button.\n   */\n  hasSummary: PropTypes.bool,\n  /**\n   * An object containing all the labels for the wizard header.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Summary button label.\n     */\n    summary: PropTypes.string,\n  }),\n  /**\n   * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Function to change the tab when pressing previous and next buttons.\n   */\n  changeTab: PropTypes.func.isRequired,\n  /**\n   * Custom object to define type, size and width of the StepNavigation component\n   */\n  customStep: PropTypes.shape({\n    /**\n     * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n     */\n    type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n    /**\n     * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n     */\n    stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n    /**\n     * Width of the component element on each breakpoint screen resolution.\n     */\n    width: PropTypes.shape({\n      xs: PropTypes.number,\n      sm: PropTypes.number,\n      md: PropTypes.number,\n      lg: PropTypes.number,\n      xl: PropTypes.number,\n    }),\n  }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}
+{"version":3,"file":"WizardTitle.js","names":["React","PropTypes","withStyles","HvButton","HvDialogTitle","HvGrid","HvTypography","Report","HvStepNavigation","HvWizardContext","styles","switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","useContext","context","summary","setSummary","useState","steps","setSteps","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","shape","string","bool","number","isRequired","func","oneOf","xl"],"sources":["../../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\n  return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  tab,\n  classes,\n  changeTab,\n  customStep = {},\n}) => {\n  const { context, summary, setSummary } = React.useContext(HvWizardContext);\n  const [steps, setSteps] = React.useState([]);\n\n  React.useEffect(() => {\n    if (summary === null && hasSummary) {\n      setSummary(false);\n    }\n\n    return () => {\n      setSummary(false);\n    };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    const contextArray = Object.entries(context);\n    if (contextArray.length) {\n      const updatedSteps = contextArray.map(([, childState], index) => ({\n        title: childState.name ?? `${index + 1}`,\n        state: switchTabState(childState, tab, index),\n        onClick: () => changeTab(index),\n      }));\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, changeTab]);\n\n  const toggleSummary = () => {\n    setSummary((oldSummary) => !oldSummary);\n  };\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{ messageContainer: classes.messageContainer }}\n    >\n      <HvGrid\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className={classes.titleContainer}\n      >\n        {title && (\n          <HvTypography variant=\"xsTitle\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type={customStep?.type ?? \"Default\"}\n            stepSize={customStep?.stepSize ?? \"XS\"}\n            width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            category=\"secondary\"\n            className={classes.buttonWidth}\n            classes={{ root: classes.rootSummaryButton }}\n            onClick={toggleSummary}\n          >\n            <Report /> {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </HvGrid>\n    </HvDialogTitle>\n  );\n};\n\nHvWizardTitle.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the header container.\n     */\n    headerContainer: PropTypes.string,\n    /**\n     * Styles applied to override the Dialog Title styles.\n     */\n    messageContainer: PropTypes.string,\n    /**\n     * Styles applied to the header content container.\n     */\n    titleContainer: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its width.\n     */\n    buttonWidth: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its right padding.\n     */\n    rootSummaryButton: PropTypes.string,\n    /**\n     *\n     */\n    stepContainer: PropTypes.string,\n  }),\n  /**\n   * Title for the wizard.\n   */\n  title: PropTypes.string,\n  /**\n   * Shows the summary button.\n   */\n  hasSummary: PropTypes.bool,\n  /**\n   * An object containing all the labels for the wizard header.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Summary button label.\n     */\n    summary: PropTypes.string,\n  }),\n  /**\n   * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Function to change the tab when pressing previous and next buttons.\n   */\n  changeTab: PropTypes.func.isRequired,\n  /**\n   * Custom object to define type, size and width of the StepNavigation component\n   */\n  customStep: PropTypes.shape({\n    /**\n     * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n     */\n    type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n    /**\n     * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n     */\n    stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n    /**\n     * Width of the component element on each breakpoint screen resolution.\n     */\n    width: PropTypes.shape({\n      xs: PropTypes.number,\n      sm: PropTypes.number,\n      md: PropTypes.number,\n      lg: PropTypes.number,\n      xl: PropTypes.number,\n    }),\n  }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}

package/dist/modern/Wizard/WizardContent/WizardContent.js

@@ -13,7 +13,6 @@ import styles from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DRAWER_PERCENTAGE = 0.3;
-const MODAL_MARGIN = 20;
 const DRAWER_MIN_WIDTH = 280;
 const HvWizardContent = ({
   classes,
@@ -40,9 +39,10 @@ const HvWizardContent = ({
     setContext,
     summary
   } = React.useContext(HvWizardContext);
+  const summaryRef = React.useRef(null);
   const resizedRef = React.useRef({
-    width: 0,
-    height: 0
+    height: 0,
+    width: 0
   });
   const [containerRef, sizes] = useElementSize();
   const [summaryHeight, setSummaryHeight] = React.useState(0);
@@ -53,17 +53,25 @@ const HvWizardContent = ({
     const drawerWidth = modalWidth * DRAWER_PERCENTAGE;
     setSummaryHeight(newSizes.height);
     setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
-    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH) - MODAL_MARGIN);
+    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
+    resizedRef.current = {
+      height: newSizes.height,
+      width: newSizes.width
+    };
   }, []);
   React.useEffect(() => {
+    var _summaryRef$current, _summaryRef$current$g, _summaryRef$current$g2;
+    const pageHeight = (_summaryRef$current = summaryRef.current) === null || _summaryRef$current === void 0 ? void 0 : (_summaryRef$current$g = _summaryRef$current.getBoundingClientRect) === null || _summaryRef$current$g === void 0 ? void 0 : (_summaryRef$current$g2 = _summaryRef$current$g.call(_summaryRef$current)) === null || _summaryRef$current$g2 === void 0 ? void 0 : _summaryRef$current$g2.height;
     if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
       updateSummaryMeasures(sizes);
-      resizedRef.current = {
-        height: sizes.height,
-        width: sizes.width
-      };
     }
-  }, [sizes, summary, updateSummaryMeasures]);
+    if (pageHeight && sizes.height !== pageHeight) {
+      updateSummaryMeasures({
+        width: sizes.width,
+        height: pageHeight
+      });
+    }
+  }, [tab, sizes, summary, updateSummaryMeasures]);
   React.useEffect(() => {
     setContext(initialContext);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -84,28 +92,31 @@ const HvWizardContent = ({
       }, {});
       setContext(updatedContext);
     }
-    updateSummaryMeasures(sizes);
   }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const translateX = summaryWidth ? summaryWidth + 10 : 450;
-  return /*#__PURE__*/_jsx("div", {
-    ref: containerRef,
-    children: /*#__PURE__*/_jsxs(HvDialogContent, {
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.summaryRef,
+    ref: el => {
+      containerRef(el);
+      summaryRef.current = el;
+    },
+    children: [summary !== null && /*#__PURE__*/_jsx("div", {
+      className: classes.summarySticky,
+      children: /*#__PURE__*/_jsx("div", {
+        className: classes.summaryContainer,
+        style: {
+          left: summaryLeft,
+          width: summaryWidth,
+          height: summaryHeight,
+          transform: `translate(${summary ? 0 : translateX}px, 0)`
+        },
+        children: summaryContent
+      })
+    }), /*#__PURE__*/_jsx(HvDialogContent, {
       className: clsx(classes.contentContainer, fixedHeight && classes.fixedHeight),
       indentContent: true,
-      children: [summary !== null && /*#__PURE__*/_jsx("div", {
-        className: classes.summarySticky,
-        children: /*#__PURE__*/_jsx("div", {
-          className: classes.summaryContainer,
-          style: {
-            left: summaryLeft,
-            width: summaryWidth,
-            height: summaryHeight,
-            transform: `translate(${summary ? 0 : translateX}px, 0)`
-          },
-          children: summaryContent
-        })
-      }), /*#__PURE__*/_jsx(LoadingContainer, {
+      children: /*#__PURE__*/_jsx(LoadingContainer, {
         hidden: !loading,
         children: React.Children.map(arrayChildren, (child, index) => {
           if (index === tab) {
@@ -115,8 +126,8 @@ const HvWizardContent = ({
           }
           return null;
         })
-      })]
-    })
+      })
+    })]
   });
 };
 process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
@@ -140,6 +151,10 @@ process.env.NODE_ENV !== "production" ? HvWizardContent.propTypes = {
      * Style applied to the Wizard to fix its height.
      */
     fixedHeight: PropTypes.string,
+    /**
+     * Style applied to the summary container around the page content container.
+     */
+    summaryRef: PropTypes.string,
     /**
      * Style applied to the Summary container to stick it to the top.
      */

package/dist/modern/Wizard/WizardContent/WizardContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContent.js","names":["React","PropTypes","withStyles","useElementSize","clsx","HvDialogContent","HvWizardContext","LoadingContainer","styles","DRAWER_PERCENTAGE","MODAL_MARGIN","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","context","setContext","summary","useContext","resizedRef","useRef","width","height","containerRef","sizes","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","useEffect","current","updatedContext","Object","entries","key","childState","translateX","contentContainer","summarySticky","summaryContainer","left","transform","map","cloneElement","propTypes","number","isRequired","node","shape","string","bool","name"],"sources":["../../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { useElementSize } from \"usehooks-ts\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst MODAL_MARGIN = 20;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n  classes,\n  fixedHeight = false,\n  loading = false,\n  children,\n  tab,\n  summaryContent,\n}) => {\n  const arrayChildren = React.Children.toArray(children);\n  const initialContext = arrayChildren.reduce((acc, child, index) => {\n    const invalid = child.props.mustValidate === true ? false : null;\n    const valid = invalid ?? (index === 0 || null);\n    return {\n      ...acc,\n      [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n    };\n  }, {});\n\n  const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n  const resizedRef = React.useRef({ width: 0, height: 0 });\n  const [containerRef, sizes] = useElementSize();\n\n  const [summaryHeight, setSummaryHeight] = React.useState(0);\n  const [summaryWidth, setSummaryWidth] = React.useState(0);\n  const [summaryLeft, setSummaryLeft] = React.useState(0);\n  const updateSummaryMeasures = React.useCallback((newSizes) => {\n    const modalWidth = newSizes.width;\n    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n    setSummaryHeight(newSizes.height);\n    setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH) - MODAL_MARGIN);\n  }, []);\n\n  React.useEffect(() => {\n    if (\n      (summary && sizes.height !== resizedRef.current.height) ||\n      sizes.width !== resizedRef.current.width\n    ) {\n      updateSummaryMeasures(sizes);\n      resizedRef.current = {\n        height: sizes.height,\n        width: sizes.width,\n      };\n    }\n  }, [sizes, summary, updateSummaryMeasures]);\n\n  React.useEffect(() => {\n    setContext(initialContext);\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    if (tab && !context[tab]?.touched) {\n      const updatedContext = Object.entries(context).reduce(\n        (acc, [key, childState]) => ({\n          ...acc,\n          ...(+key <= tab\n            ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n            : { [key]: childState }),\n        }),\n        {}\n      );\n\n      setContext(updatedContext);\n    }\n    updateSummaryMeasures(sizes);\n  }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <div ref={containerRef}>\n      <HvDialogContent\n        className={clsx(classes.contentContainer, {\n          [classes.fixedHeight]: fixedHeight,\n        })}\n        indentContent\n      >\n        {summary !== null && (\n          <div className={classes.summarySticky}>\n            <div\n              className={classes.summaryContainer}\n              style={{\n                left: summaryLeft,\n                width: summaryWidth,\n                height: summaryHeight,\n                transform: `translate(${summary ? 0 : translateX}px, 0)`,\n              }}\n            >\n              {summaryContent}\n            </div>\n          </div>\n        )}\n        <LoadingContainer hidden={!loading}>\n          {React.Children.map(arrayChildren, (child, index) => {\n            if (index === tab) {\n              return React.cloneElement(child, { tab });\n            }\n            return null;\n          })}\n        </LoadingContainer>\n      </HvDialogContent>\n    </div>\n  );\n};\n\nHvWizardContent.propTypes = {\n  /**\n   * Current tab to show.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Tabs to show on the Wizard.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the Wizard content container.\n     */\n    contentContainer: PropTypes.string,\n    /**\n     * Style applied to the Wizard to fix its height.\n     */\n    fixedHeight: PropTypes.string,\n    /**\n     * Style applied to the Summary container to stick it to the top.\n     */\n    summarySticky: PropTypes.string,\n    /**\n     * Style applied to the Summary container to position it on the right.\n     */\n    summaryContainer: PropTypes.string,\n  }).isRequired,\n  /**\n   * Forces minimum height to the component.\n   */\n  fixedHeight: PropTypes.bool,\n  /**\n   * Whether the loading animation is shown.\n   */\n  loading: PropTypes.bool,\n  /**\n   * The content of the summary.\n   */\n  summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}
+{"version":3,"file":"WizardContent.js","names":["React","PropTypes","withStyles","useElementSize","clsx","HvDialogContent","HvWizardContext","LoadingContainer","styles","DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","tab","summaryContent","arrayChildren","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","context","setContext","summary","useContext","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","el","summarySticky","summaryContainer","left","transform","contentContainer","map","cloneElement","propTypes","number","isRequired","node","shape","string","bool","name"],"sources":["../../../../src/Wizard/WizardContent/WizardContent.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { useElementSize } from \"usehooks-ts\";\nimport clsx from \"clsx\";\nimport { HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport HvWizardContext from \"../WizardContext\";\nimport LoadingContainer from \"./LoadingContainer\";\n\nimport styles from \"./styles\";\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nconst HvWizardContent = ({\n  classes,\n  fixedHeight = false,\n  loading = false,\n  children,\n  tab,\n  summaryContent,\n}) => {\n  const arrayChildren = React.Children.toArray(children);\n  const initialContext = arrayChildren.reduce((acc, child, index) => {\n    const invalid = child.props.mustValidate === true ? false : null;\n    const valid = invalid ?? (index === 0 || null);\n    return {\n      ...acc,\n      [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n    };\n  }, {});\n\n  const { context, setContext, summary } = React.useContext(HvWizardContext);\n\n  const summaryRef = React.useRef(null);\n  const resizedRef = React.useRef({ height: 0, width: 0 });\n  const [containerRef, sizes] = useElementSize();\n\n  const [summaryHeight, setSummaryHeight] = React.useState(0);\n  const [summaryWidth, setSummaryWidth] = React.useState(0);\n  const [summaryLeft, setSummaryLeft] = React.useState(0);\n  const updateSummaryMeasures = React.useCallback((newSizes) => {\n    const modalWidth = newSizes.width;\n    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n    setSummaryHeight(newSizes.height);\n    setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n    resizedRef.current = {\n      height: newSizes.height,\n      width: newSizes.width,\n    };\n  }, []);\n\n  React.useEffect(() => {\n    const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n    if (\n      (summary && sizes.height !== resizedRef.current.height) ||\n      sizes.width !== resizedRef.current.width\n    ) {\n      updateSummaryMeasures(sizes);\n    }\n\n    if (pageHeight && sizes.height !== pageHeight) {\n      updateSummaryMeasures({\n        width: sizes.width,\n        height: pageHeight,\n      });\n    }\n  }, [tab, sizes, summary, updateSummaryMeasures]);\n\n  React.useEffect(() => {\n    setContext(initialContext);\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    if (tab && !context[tab]?.touched) {\n      const updatedContext = Object.entries(context).reduce(\n        (acc, [key, childState]) => ({\n          ...acc,\n          ...(+key <= tab\n            ? { [key]: { ...childState, touched: true, valid: childState.valid ?? true } }\n            : { [key]: childState }),\n        }),\n        {}\n      );\n\n      setContext(updatedContext);\n    }\n  }, [tab]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <div\n      className={classes.summaryRef}\n      ref={(el) => {\n        containerRef(el);\n        summaryRef.current = el;\n      }}\n    >\n      {summary !== null && (\n        <div className={classes.summarySticky}>\n          <div\n            className={classes.summaryContainer}\n            style={{\n              left: summaryLeft,\n              width: summaryWidth,\n              height: summaryHeight,\n              transform: `translate(${summary ? 0 : translateX}px, 0)`,\n            }}\n          >\n            {summaryContent}\n          </div>\n        </div>\n      )}\n      <HvDialogContent\n        className={clsx(classes.contentContainer, {\n          [classes.fixedHeight]: fixedHeight,\n        })}\n        indentContent\n      >\n        <LoadingContainer hidden={!loading}>\n          {React.Children.map(arrayChildren, (child, index) => {\n            if (index === tab) {\n              return React.cloneElement(child, { tab });\n            }\n            return null;\n          })}\n        </LoadingContainer>\n      </HvDialogContent>\n    </div>\n  );\n};\n\nHvWizardContent.propTypes = {\n  /**\n   * Current tab to show.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Tabs to show on the Wizard.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the Wizard content container.\n     */\n    contentContainer: PropTypes.string,\n    /**\n     * Style applied to the Wizard to fix its height.\n     */\n    fixedHeight: PropTypes.string,\n    /**\n     * Style applied to the summary container around the page content container.\n     */\n    summaryRef: PropTypes.string,\n    /**\n     * Style applied to the Summary container to stick it to the top.\n     */\n    summarySticky: PropTypes.string,\n    /**\n     * Style applied to the Summary container to position it on the right.\n     */\n    summaryContainer: PropTypes.string,\n  }).isRequired,\n  /**\n   * Forces minimum height to the component.\n   */\n  fixedHeight: PropTypes.bool,\n  /**\n   * Whether the loading animation is shown.\n   */\n  loading: PropTypes.bool,\n  /**\n   * The content of the summary.\n   */\n  summaryContent: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvWizardContent\" })(HvWizardContent);\n"],"mappings":"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"}

package/dist/modern/Wizard/WizardContent/styles.js

@@ -9,13 +9,19 @@ const styles = theme => ({
   fixedHeight: {
     minHeight: "calc(100vh - 387px)"
   },
+  summaryRef: {
+    flex: 1,
+    overflowY: "auto",
+    overflowX: "hidden"
+  },
   summarySticky: {
     position: "sticky",
-    top: 0
+    top: 0,
+    zIndex: 1
   },
   summaryContainer: {
     position: "absolute",
-    top: -20,
+    top: 0,
     minWidth: 280,
     boxShadow: theme.hv.shadows[1],
     backgroundColor: theme.hv.palette.atmosphere.atmo1,

package/dist/modern/Wizard/WizardContent/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summarySticky","top","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction","overflowY"],"sources":["../../../../src/Wizard/WizardContent/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  contentContainer: {\n    position: \"relative\",\n    padding: 20,\n    marginLeft: 0,\n    minHeight: 400,\n    overflowX: \"hidden\",\n  },\n  fixedHeight: {\n    minHeight: \"calc(100vh - 387px)\",\n  },\n  summarySticky: {\n    position: \"sticky\",\n    top: 0,\n  },\n  summaryContainer: {\n    position: \"absolute\",\n    top: -20,\n    minWidth: 280,\n    boxShadow: theme.hv.shadows[1],\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    transition: \"transform 0.3s\",\n    transitionTimingFunction: \"ease-in-out\",\n    overflowY: \"scroll\",\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAK,KAAM;EACzBC,gBAAgB,EAAE;IAChBC,QAAQ,EAAE,UAAU;IACpBC,OAAO,EAAE,EAAE;IACXC,UAAU,EAAE,CAAC;IACbC,SAAS,EAAE,GAAG;IACdC,SAAS,EAAE;EACb,CAAC;EACDC,WAAW,EAAE;IACXF,SAAS,EAAE;EACb,CAAC;EACDG,aAAa,EAAE;IACbN,QAAQ,EAAE,QAAQ;IAClBO,GAAG,EAAE;EACP,CAAC;EACDC,gBAAgB,EAAE;IAChBR,QAAQ,EAAE,UAAU;IACpBO,GAAG,EAAE,CAAC,EAAE;IACRE,QAAQ,EAAE,GAAG;IACbC,SAAS,EAAEZ,KAAK,CAACa,EAAE,CAACC,OAAO,CAAC,CAAC,CAAC;IAC9BC,eAAe,EAAEf,KAAK,CAACa,EAAE,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;IAClDC,UAAU,EAAE,gBAAgB;IAC5BC,wBAAwB,EAAE,aAAa;IACvCC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAetB,MAAM"}
+{"version":3,"file":"styles.js","names":["styles","theme","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summaryRef","flex","overflowY","summarySticky","top","zIndex","summaryContainer","minWidth","boxShadow","hv","shadows","backgroundColor","palette","atmosphere","atmo1","transition","transitionTimingFunction"],"sources":["../../../../src/Wizard/WizardContent/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  contentContainer: {\n    position: \"relative\",\n    padding: 20,\n    marginLeft: 0,\n    minHeight: 400,\n    overflowX: \"hidden\",\n  },\n  fixedHeight: {\n    minHeight: \"calc(100vh - 387px)\",\n  },\n  summaryRef: {\n    flex: 1,\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n  },\n  summarySticky: {\n    position: \"sticky\",\n    top: 0,\n    zIndex: 1,\n  },\n  summaryContainer: {\n    position: \"absolute\",\n    top: 0,\n    minWidth: 280,\n    boxShadow: theme.hv.shadows[1],\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    transition: \"transform 0.3s\",\n    transitionTimingFunction: \"ease-in-out\",\n    overflowY: \"scroll\",\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAK,KAAM;EACzBC,gBAAgB,EAAE;IAChBC,QAAQ,EAAE,UAAU;IACpBC,OAAO,EAAE,EAAE;IACXC,UAAU,EAAE,CAAC;IACbC,SAAS,EAAE,GAAG;IACdC,SAAS,EAAE;EACb,CAAC;EACDC,WAAW,EAAE;IACXF,SAAS,EAAE;EACb,CAAC;EACDG,UAAU,EAAE;IACVC,IAAI,EAAE,CAAC;IACPC,SAAS,EAAE,MAAM;IACjBJ,SAAS,EAAE;EACb,CAAC;EACDK,aAAa,EAAE;IACbT,QAAQ,EAAE,QAAQ;IAClBU,GAAG,EAAE,CAAC;IACNC,MAAM,EAAE;EACV,CAAC;EACDC,gBAAgB,EAAE;IAChBZ,QAAQ,EAAE,UAAU;IACpBU,GAAG,EAAE,CAAC;IACNG,QAAQ,EAAE,GAAG;IACbC,SAAS,EAAEhB,KAAK,CAACiB,EAAE,CAACC,OAAO,CAAC,CAAC,CAAC;IAC9BC,eAAe,EAAEnB,KAAK,CAACiB,EAAE,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;IAClDC,UAAU,EAAE,gBAAgB;IAC5BC,wBAAwB,EAAE,aAAa;IACvCd,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAeX,MAAM"}

package/dist/modern/Wizard/WizardTitle/WizardTitle.js

@@ -38,6 +38,9 @@ const HvWizardTitle = ({
     if (summary === null && hasSummary) {
       setSummary(false);
     }
+    return () => {
+      setSummary(false);
+    };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(() => {

package/dist/modern/Wizard/WizardTitle/WizardTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardTitle.js","names":["React","PropTypes","withStyles","HvButton","HvDialogTitle","HvGrid","HvTypography","Report","HvStepNavigation","HvWizardContext","styles","switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","context","summary","setSummary","useContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","shape","string","bool","number","isRequired","func","oneOf","xl"],"sources":["../../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\n  return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  tab,\n  classes,\n  changeTab,\n  customStep = {},\n}) => {\n  const { context, summary, setSummary } = React.useContext(HvWizardContext);\n  const [steps, setSteps] = React.useState([]);\n\n  React.useEffect(() => {\n    if (summary === null && hasSummary) {\n      setSummary(false);\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    const contextArray = Object.entries(context);\n    if (contextArray.length) {\n      const updatedSteps = contextArray.map(([, childState], index) => ({\n        title: childState.name ?? `${index + 1}`,\n        state: switchTabState(childState, tab, index),\n        onClick: () => changeTab(index),\n      }));\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, changeTab]);\n\n  const toggleSummary = () => {\n    setSummary((oldSummary) => !oldSummary);\n  };\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{ messageContainer: classes.messageContainer }}\n    >\n      <HvGrid\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className={classes.titleContainer}\n      >\n        {title && (\n          <HvTypography variant=\"xsTitle\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type={customStep?.type ?? \"Default\"}\n            stepSize={customStep?.stepSize ?? \"XS\"}\n            width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            category=\"secondary\"\n            className={classes.buttonWidth}\n            classes={{ root: classes.rootSummaryButton }}\n            onClick={toggleSummary}\n          >\n            <Report /> {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </HvGrid>\n    </HvDialogTitle>\n  );\n};\n\nHvWizardTitle.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the header container.\n     */\n    headerContainer: PropTypes.string,\n    /**\n     * Styles applied to override the Dialog Title styles.\n     */\n    messageContainer: PropTypes.string,\n    /**\n     * Styles applied to the header content container.\n     */\n    titleContainer: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its width.\n     */\n    buttonWidth: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its right padding.\n     */\n    rootSummaryButton: PropTypes.string,\n    /**\n     *\n     */\n    stepContainer: PropTypes.string,\n  }),\n  /**\n   * Title for the wizard.\n   */\n  title: PropTypes.string,\n  /**\n   * Shows the summary button.\n   */\n  hasSummary: PropTypes.bool,\n  /**\n   * An object containing all the labels for the wizard header.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Summary button label.\n     */\n    summary: PropTypes.string,\n  }),\n  /**\n   * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Function to change the tab when pressing previous and next buttons.\n   */\n  changeTab: PropTypes.func.isRequired,\n  /**\n   * Custom object to define type, size and width of the StepNavigation component\n   */\n  customStep: PropTypes.shape({\n    /**\n     * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n     */\n    type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n    /**\n     * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n     */\n    stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n    /**\n     * Width of the component element on each breakpoint screen resolution.\n     */\n    width: PropTypes.shape({\n      xs: PropTypes.number,\n      sm: PropTypes.number,\n      md: PropTypes.number,\n      lg: PropTypes.number,\n      xl: PropTypes.number,\n    }),\n  }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}
+{"version":3,"file":"WizardTitle.js","names":["React","PropTypes","withStyles","HvButton","HvDialogTitle","HvGrid","HvTypography","Report","HvStepNavigation","HvWizardContext","styles","switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","tab","classes","changeTab","customStep","context","summary","setSummary","useContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","headerContainer","messageContainer","titleContainer","stepContainer","type","stepSize","width","xs","sm","md","lg","buttonWidth","root","rootSummaryButton","propTypes","shape","string","bool","number","isRequired","func","oneOf","xl"],"sources":["../../../../src/Wizard/WizardTitle/WizardTitle.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvButton, HvDialogTitle, HvGrid, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { HvStepNavigation } from \"@hitachivantara/uikit-react-lab\";\nimport HvWizardContext from \"../WizardContext\";\n\nimport styles from \"./styles\";\n\nconst switchTabState = (state, currentTab, index) => {\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\n  return \"Enabled\";\n};\n\nconst HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  tab,\n  classes,\n  changeTab,\n  customStep = {},\n}) => {\n  const { context, summary, setSummary } = React.useContext(HvWizardContext);\n  const [steps, setSteps] = React.useState([]);\n\n  React.useEffect(() => {\n    if (summary === null && hasSummary) {\n      setSummary(false);\n    }\n\n    return () => {\n      setSummary(false);\n    };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    const contextArray = Object.entries(context);\n    if (contextArray.length) {\n      const updatedSteps = contextArray.map(([, childState], index) => ({\n        title: childState.name ?? `${index + 1}`,\n        state: switchTabState(childState, tab, index),\n        onClick: () => changeTab(index),\n      }));\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, changeTab]);\n\n  const toggleSummary = () => {\n    setSummary((oldSummary) => !oldSummary);\n  };\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{ messageContainer: classes.messageContainer }}\n    >\n      <HvGrid\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className={classes.titleContainer}\n      >\n        {title && (\n          <HvTypography variant=\"xsTitle\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type={customStep?.type ?? \"Default\"}\n            stepSize={customStep?.stepSize ?? \"XS\"}\n            width={customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            category=\"secondary\"\n            className={classes.buttonWidth}\n            classes={{ root: classes.rootSummaryButton }}\n            onClick={toggleSummary}\n          >\n            <Report /> {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </HvGrid>\n    </HvDialogTitle>\n  );\n};\n\nHvWizardTitle.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the header container.\n     */\n    headerContainer: PropTypes.string,\n    /**\n     * Styles applied to override the Dialog Title styles.\n     */\n    messageContainer: PropTypes.string,\n    /**\n     * Styles applied to the header content container.\n     */\n    titleContainer: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its width.\n     */\n    buttonWidth: PropTypes.string,\n    /**\n     * Styles applied to the Button component to override its right padding.\n     */\n    rootSummaryButton: PropTypes.string,\n    /**\n     *\n     */\n    stepContainer: PropTypes.string,\n  }),\n  /**\n   * Title for the wizard.\n   */\n  title: PropTypes.string,\n  /**\n   * Shows the summary button.\n   */\n  hasSummary: PropTypes.bool,\n  /**\n   * An object containing all the labels for the wizard header.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Summary button label.\n     */\n    summary: PropTypes.string,\n  }),\n  /**\n   * Current tab to check if it's last page or first to disable previous button and swap between next and submit button.\n   */\n  tab: PropTypes.number.isRequired,\n  /**\n   * Function to change the tab when pressing previous and next buttons.\n   */\n  changeTab: PropTypes.func.isRequired,\n  /**\n   * Custom object to define type, size and width of the StepNavigation component\n   */\n  customStep: PropTypes.shape({\n    /**\n     * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n     */\n    type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n    /**\n     * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n     */\n    stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n    /**\n     * Width of the component element on each breakpoint screen resolution.\n     */\n    width: PropTypes.shape({\n      xs: PropTypes.number,\n      sm: PropTypes.number,\n      md: PropTypes.number,\n      lg: PropTypes.number,\n      xl: PropTypes.number,\n    }),\n  }),\n};\n\nexport default withStyles(styles, { name: \"HvWizardTitle\" })(HvWizardTitle);\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "A collection of contributed React components for the Hitachi Vantara's Design System.",
   "homepage": "https://github.com/lumada-design/hv-uikit-react",
   "license": "Apache-2.0",
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "39f4c4f5d0d0ba4d5e4ebf1ebfddcba9c5edb7d4"
+  "gitHead": "c5516d4272d8dc5237861c1fe11088e1de3dcd48"
 }