@hitachivantara/uikit-react-lab 3.54.0 → 3.55.0

package/dist/StepNavigation/DefaultNavigation/Step/Step.d.ts

@@ -22,6 +22,11 @@ export type HvStepProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, Hv
      * Number of the step.
      */
     number?: number;
+    /**
+     * Define if a step is disabled/enabled.
+     * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+     */
+    disabled?: boolean;
   };
 
 export default function HvStep(props: HvStepProps): JSX.Element | null;

package/dist/StepNavigation/DefaultNavigation/Step/Step.js

@@ -34,6 +34,7 @@ var HvStep = function HvStep(_ref) {
       state = _ref.state,
       title = _ref.title,
       onClick = _ref.onClick,
+      disabled = _ref.disabled,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "SM" : _ref$size,
       _ref$number = _ref.number,
@@ -73,7 +74,7 @@ var HvStep = function HvStep(_ref) {
     "aria-label": "step-".concat(title),
     icon: true,
     overrideIconColors: false,
-    disabled: ["Current", "Disabled"].includes(state),
+    disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
     onClick: onClick
   }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvAvatar, {
     className: (0, _clsx.default)(classes.avatar, classes[size]),
@@ -178,7 +179,13 @@ process.env.NODE_ENV !== "production" ? HvStep.propTypes = {
   /**
    * Event onClick of the step.
    */
-  onClick: _propTypes.default.func
+  onClick: _propTypes.default.func,
+
+  /**
+   * Define if a step is disabled/enabled.
+   * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+   */
+  disabled: _propTypes.default.bool
 } : void 0;
 
 var _default = (0, _core.withStyles)(_styles.default, {

package/dist/StepNavigation/DefaultNavigation/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["HvStep","className","classes","state","title","onClick","size","number","iconSize","XS","SM","MD","LG","XL","squareL","Pending","Failed","Completed","svgSize","backgroundColor","getColor","color","undefined","semantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","clsx","root","ghost","ghostDisabled","includes","avatar","propTypes","PropTypes","string","shape","stepTitle","isRequired","oneOf","func","withStyles","styles","name"],"sources":["../../../../src/StepNavigation/DefaultNavigation/Step/Step.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\n\nimport { Level0Good, Level3Bad, HourGlass } from \"@hitachivantara/uikit-react-icons\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nconst HvStep = ({ className, classes, state, title, onClick, size = \"SM\", number = 1 }) => {\n  const iconSize = {\n    XS: \"XS\",\n    SM: \"XS\",\n    MD: \"S\",\n    LG: \"M\",\n    XL: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    XS: squareL - 8,\n    SM: squareL,\n    MD: squareL + 8,\n    LG: squareL + 16,\n    XL: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n\n  const semantic = state !== \"Pending\" ? backgroundColor : undefined;\n\n  const status = state === \"Current\" ? \"atmo5\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={clsx(className, classes.root, { [classes[\"not-current\"]]: state !== \"Current\" })}\n    >\n      <HvButton\n        className={clsx(classes.ghost, { [classes.ghostDisabled]: state === \"Current\" })}\n        aria-label={`step-${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={[\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={clsx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n\nHvStep.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n    /**\n     * Styles applied to the root element when step is not in \"current\" state.\n     */\n    \"not-current\": PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XS.\n     */\n    XS: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is SM.\n     */\n    SM: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is MD.\n     */\n    MD: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is LG.\n     */\n    LG: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XL.\n     */\n    XL: PropTypes.string,\n    /**\n     * Styles applied to the avatar element.\n     */\n    avatar: PropTypes.string,\n    /**\n     * Styles applied to the title of a step element.\n     */\n    stepTitle: PropTypes.string,\n  }).isRequired,\n  /**\n   * Sets one of the standard sizes of the step\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Number of the step.\n   */\n  number: PropTypes.number,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvStep\" })(HvStep);\n"],"mappings":"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"}
+{"version":3,"file":"Step.js","names":["HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","XS","SM","MD","LG","XL","squareL","Pending","Failed","Completed","svgSize","backgroundColor","getColor","color","undefined","semantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","clsx","root","ghost","ghostDisabled","includes","avatar","propTypes","PropTypes","string","shape","stepTitle","isRequired","oneOf","func","bool","withStyles","styles","name"],"sources":["../../../../src/StepNavigation/DefaultNavigation/Step/Step.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\n\nimport { Level0Good, Level3Bad, HourGlass } from \"@hitachivantara/uikit-react-icons\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nconst HvStep = ({\n  className,\n  classes,\n  state,\n  title,\n  onClick,\n  disabled,\n  size = \"SM\",\n  number = 1,\n}) => {\n  const iconSize = {\n    XS: \"XS\",\n    SM: \"XS\",\n    MD: \"S\",\n    LG: \"M\",\n    XL: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    XS: squareL - 8,\n    SM: squareL,\n    MD: squareL + 8,\n    LG: squareL + 16,\n    XL: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n\n  const semantic = state !== \"Pending\" ? backgroundColor : undefined;\n\n  const status = state === \"Current\" ? \"atmo5\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={clsx(className, classes.root, { [classes[\"not-current\"]]: state !== \"Current\" })}\n    >\n      <HvButton\n        className={clsx(classes.ghost, { [classes.ghostDisabled]: state === \"Current\" })}\n        aria-label={`step-${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={clsx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n\nHvStep.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n    /**\n     * Styles applied to the root element when step is not in \"current\" state.\n     */\n    \"not-current\": PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XS.\n     */\n    XS: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is SM.\n     */\n    SM: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is MD.\n     */\n    MD: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is LG.\n     */\n    LG: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XL.\n     */\n    XL: PropTypes.string,\n    /**\n     * Styles applied to the avatar element.\n     */\n    avatar: PropTypes.string,\n    /**\n     * Styles applied to the title of a step element.\n     */\n    stepTitle: PropTypes.string,\n  }).isRequired,\n  /**\n   * Sets one of the standard sizes of the step\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Number of the step.\n   */\n  number: PropTypes.number,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStep\" })(HvStep);\n"],"mappings":"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"}

package/dist/StepNavigation/SimpleNavigation/Dot/Dot.d.ts

@@ -5,6 +5,6 @@ import { HvStepProps } from "../../DefaultNavigation/Step";
 export type HvDotClassKey = "root";
 
 export type HvDotProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvDotClassKey> &
-  Pick<HvStepProps, "size" | "title" | "state" | "onClick">;
+  Pick<HvStepProps, "size" | "title" | "state" | "onClick" | "disabled">;
 
 export default function HvDot(props: HvDotProps): JSX.Element | null;

package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js

@@ -68,7 +68,8 @@ var HvDot = function HvDot(_ref) {
       state = _ref.state,
       title = _ref.title,
       size = _ref.size,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      disabled = _ref.disabled;
   var dotSize = _utils.dotSizes[size] * (state === "Current" ? 1.5 : 1);
   var getBackgroundColor = (0, _react.useCallback)(function (theme) {
     return state === "Disabled" ? (0, _utils.disabledColor)(theme) : (0, _utils.defaultColor)(theme);
@@ -97,11 +98,11 @@ var HvDot = function HvDot(_ref) {
     });
   }, [dotSize, getBackgroundColor])();
   return /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
-    className: (0, _clsx.default)(classes.root, customClasses.ghost, className, "Current Disabled".includes(state) && customClasses.ghostDisabled, state === "Current" && customClasses.active),
+    className: (0, _clsx.default)(classes.root, customClasses.ghost, (disabled !== null && disabled !== void 0 ? disabled : "Current Disabled".includes(state)) && customClasses.ghostDisabled, className, state === "Current" && customClasses.active),
     "aria-label": "step-".concat(title),
     icon: true,
     overrideIconColors: false,
-    disabled: ["Current", "Disabled"].includes(state),
+    disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
     onClick: onClick
   }, []);
 };
@@ -155,7 +156,13 @@ process.env.NODE_ENV !== "production" ? HvDot.propTypes = {
   /**
    * Event onClick of the step.
    */
-  onClick: _propTypes.default.func
+  onClick: _propTypes.default.func,
+
+  /**
+   * Define if a step is disabled/enabled.
+   * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+   */
+  disabled: _propTypes.default.bool
 } : void 0;
 
 var _default = (0, _core.withStyles)(_styles.default, {

package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.js","names":["HvDot","classes","className","state","title","size","onClick","dotSize","dotSizes","getBackgroundColor","useCallback","theme","disabledColor","defaultColor","customClasses","useMemo","makeStyles","backgroundColor","ghostDisabled","active","ghost","styles","width","height","clsx","root","includes","propTypes","PropTypes","string","shape","isRequired","oneOf","func","withStyles","name"],"sources":["../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { makeStyles, withStyles } from \"@material-ui/core\";\n\nimport { defaultColor, disabledColor, dotSizes } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Simple\" Step Navigation root component\n */\nconst HvDot = ({ classes, className, state, title, size, onClick }) => {\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n  const getBackgroundColor = useCallback(\n    (theme) => (state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme)),\n    [state]\n  );\n  const customClasses = useMemo(\n    () =>\n      makeStyles((theme) => {\n        const backgroundColor = getBackgroundColor(theme);\n        return {\n          ghostDisabled: {},\n          active: {},\n          ghost: {\n            ...styles.ghost,\n            width: dotSize,\n            height: dotSize,\n            backgroundColor,\n            \"&:hover\": {\n              backgroundColor,\n            },\n            \"&$ghostDisabled\": {\n              ...styles.ghost[\"&$ghostDisabled\"],\n              backgroundColor,\n            },\n            \"&$ghostDisabled&:hover\": {\n              ...styles.ghost[\"&$ghostDisabled&:hover\"],\n              backgroundColor,\n            },\n          },\n        };\n      }),\n    [dotSize, getBackgroundColor]\n  )();\n  return (\n    <HvButton\n      className={clsx(\n        classes.root,\n        customClasses.ghost,\n        {\n          [customClasses.active]: state === \"Current\",\n          [customClasses.ghostDisabled]: [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={[\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n\nHvDot.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the active class.\n     */\n    active: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvDot\" })(HvDot);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA;AACA;AACA;AACA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAyD;EAAA,IAAtDC,OAAsD,QAAtDA,OAAsD;EAAA,IAA7CC,SAA6C,QAA7CA,SAA6C;EAAA,IAAlCC,KAAkC,QAAlCA,KAAkC;EAAA,IAA3BC,KAA2B,QAA3BA,KAA2B;EAAA,IAApBC,IAAoB,QAApBA,IAAoB;EAAA,IAAdC,OAAc,QAAdA,OAAc;EACrE,IAAMC,OAAO,GAAGC,eAAA,CAASH,IAAT,KAAkBF,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,CAA9C,CAAhB;EACA,IAAMM,kBAAkB,GAAG,IAAAC,kBAAA,EACzB,UAACC,KAAD;IAAA,OAAYR,KAAK,KAAK,UAAV,GAAuB,IAAAS,oBAAA,EAAcD,KAAd,CAAvB,GAA8C,IAAAE,mBAAA,EAAaF,KAAb,CAA1D;EAAA,CADyB,EAEzB,CAACR,KAAD,CAFyB,CAA3B;EAIA,IAAMW,aAAa,GAAG,IAAAC,cAAA,EACpB;IAAA,OACE,IAAAC,gBAAA,EAAW,UAACL,KAAD,EAAW;MACpB,IAAMM,eAAe,GAAGR,kBAAkB,CAACE,KAAD,CAA1C;MACA,OAAO;QACLO,aAAa,EAAE,EADV;QAELC,MAAM,EAAE,EAFH;QAGLC,KAAK,kCACAC,eAAA,CAAOD,KADP;UAEHE,KAAK,EAAEf,OAFJ;UAGHgB,MAAM,EAAEhB,OAHL;UAIHU,eAAe,EAAfA,eAJG;UAKH,WAAW;YACTA,eAAe,EAAfA;UADS,CALR;UAQH,mDACKI,eAAA,CAAOD,KAAP,CAAa,iBAAb,CADL;YAEEH,eAAe,EAAfA;UAFF,EARG;UAYH,0DACKI,eAAA,CAAOD,KAAP,CAAa,wBAAb,CADL;YAEEH,eAAe,EAAfA;UAFF;QAZG;MAHA,CAAP;IAqBD,CAvBD,CADF;EAAA,CADoB,EA0BpB,CAACV,OAAD,EAAUE,kBAAV,CA1BoB,GAAtB;EA4BA,oBACE,6BAAC,wBAAD;IACE,SAAS,EAAE,IAAAe,aAAA,EACTvB,OAAO,CAACwB,IADC,EAETX,aAAa,CAACM,KAFL,EAOTlB,SAPS,EAKwB,mBAAwBwB,QAAxB,CAAiCvB,KAAjC,CALxB,IAKNW,aAAa,CAACI,aALR,EAIiBf,KAAK,KAAK,SAJ3B,IAINW,aAAa,CAACK,MAJR,CADb;IAUE,6BAAoBf,KAApB,CAVF;IAWE,IAAI,MAXN;IAYE,kBAAkB,EAAE,KAZtB;IAaE,QAAQ,EAAE,CAAC,SAAD,EAAY,UAAZ,EAAwBsB,QAAxB,CAAiCvB,KAAjC,CAbZ;IAcE,OAAO,EAAEG;EAdX,GAgBG,EAhBH,CADF;AAoBD,CAtDD;;AAwDA,wCAAAN,KAAK,CAAC2B,SAAN,GAAkB;EAChB;AACF;AACA;EACEzB,SAAS,EAAE0B,kBAAA,CAAUC,MAJL;;EAKhB;AACF;AACA;EACE5B,OAAO,EAAE2B,kBAAA,CAAUE,KAAV,CAAgB;IACvB;AACJ;AACA;IACIL,IAAI,EAAEG,kBAAA,CAAUC,MAJO;;IAKvB;AACJ;AACA;IACIV,MAAM,EAAES,kBAAA,CAAUC,MARK;;IASvB;AACJ;AACA;IACIT,KAAK,EAAEQ,kBAAA,CAAUC,MAZM;;IAavB;AACJ;AACA;IACIX,aAAa,EAAEU,kBAAA,CAAUC;EAhBF,CAAhB,EAiBNE,UAzBa;;EA0BhB;AACF;AACA;EACE5B,KAAK,EAAEyB,kBAAA,CAAUI,KAAV,CAAgB,CAAC,SAAD,EAAY,QAAZ,EAAsB,WAAtB,EAAmC,SAAnC,EAA8C,UAA9C,CAAhB,EAA2ED,UA7BlE;;EA8BhB;AACF;AACA;EACE3B,KAAK,EAAEwB,kBAAA,CAAUC,MAAV,CAAiBE,UAjCR;;EAkChB;AACF;AACA;EACE1B,IAAI,EAAEuB,kBAAA,CAAUI,KAAV,CAAgB,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,CAAhB,EAAgDD,UArCtC;;EAsChB;AACF;AACA;EACEzB,OAAO,EAAEsB,kBAAA,CAAUK;AAzCH,CAAlB;;eA4Ce,IAAAC,gBAAA,EAAWb,eAAX,EAAmB;EAAEc,IAAI,EAAE;AAAR,CAAnB,EAAsCnC,KAAtC,C"}
+{"version":3,"file":"Dot.js","names":["HvDot","classes","className","state","title","size","onClick","disabled","dotSize","dotSizes","getBackgroundColor","useCallback","theme","disabledColor","defaultColor","customClasses","useMemo","makeStyles","backgroundColor","ghostDisabled","active","ghost","styles","width","height","clsx","root","includes","propTypes","PropTypes","string","shape","isRequired","oneOf","func","bool","withStyles","name"],"sources":["../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { makeStyles, withStyles } from \"@material-ui/core\";\n\nimport { defaultColor, disabledColor, dotSizes } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Simple\" Step Navigation root component\n */\nconst HvDot = ({ classes, className, state, title, size, onClick, disabled }) => {\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n  const getBackgroundColor = useCallback(\n    (theme) => (state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme)),\n    [state]\n  );\n  const customClasses = useMemo(\n    () =>\n      makeStyles((theme) => {\n        const backgroundColor = getBackgroundColor(theme);\n        return {\n          ghostDisabled: {},\n          active: {},\n          ghost: {\n            ...styles.ghost,\n            width: dotSize,\n            height: dotSize,\n            backgroundColor,\n            \"&:hover\": {\n              backgroundColor,\n            },\n            \"&$ghostDisabled\": {\n              ...styles.ghost[\"&$ghostDisabled\"],\n              backgroundColor,\n            },\n            \"&$ghostDisabled&:hover\": {\n              ...styles.ghost[\"&$ghostDisabled&:hover\"],\n              backgroundColor,\n            },\n          },\n        };\n      }),\n    [dotSize, getBackgroundColor]\n  )();\n  return (\n    <HvButton\n      className={clsx(\n        classes.root,\n        customClasses.ghost,\n        {\n          [customClasses.active]: state === \"Current\",\n          [customClasses.ghostDisabled]: disabled ?? [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n\nHvDot.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the active class.\n     */\n    active: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvDot\" })(HvDot);\n"],"mappings":"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"}

package/dist/StepNavigation/StepNavigation.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { StandardProps } from "@material-ui/core";
+import { Breakpoint } from "@material-ui/core/styles/createBreakpoints";
 import { HvStepProps } from "./DefaultNavigation/Step/Step";
 
 export type HvStepNavigationClassKey = "root";
@@ -15,7 +16,7 @@ export type HvStepNavigationProps = StandardProps<
   /**
    * Steps to show on the component.
    */
-  steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className">> & {
+  steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className" | "disabled">> & {
     /**
      * Class names to override styles on the separator component after the step.
      */
@@ -26,15 +27,15 @@ export type HvStepNavigationProps = StandardProps<
     titleClassName: string;
   };
   /**
-   * Sets one of the standard sizes of the steps
+   * Sets one of the standard sizes of the steps.
    */
   stepSize?: "XS" | "SM" | "MD" | "LG" | "XL";
   /**
-   * Width of the component element.
+   * Width of the component element on each breakpoint screen resolution.
    */
-  width?: number;
+  width?: { [breakpoint in Breakpoint]?: number };
   /**
-   * Defines either show a title or only a tooltip on each step component
+   * Defines either show a title or only a tooltip on each step component.
    */
   showTitles?: boolean;
 };

package/dist/StepNavigation/StepNavigation.js

@@ -199,9 +199,9 @@ var HvStepNavigation = function HvStepNavigation(_ref) {
   };
 
   var getDynamicValues = function getDynamicValues(stepsWidth) {
-    var _theme$breakpoints$va, _theme$breakpoints$va2;
+    var _width$breakpoint, _theme$breakpoints$va, _theme$breakpoints$va2;
 
-    var maxWidth = width !== null && width !== void 0 ? width : Math.max(Number(hasTitles) * (_utils.TITLE_WIDTH + _utils.TITLE_MARGIN) * steps.length - _utils.TITLE_MARGIN, _utils.SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
+    var maxWidth = (_width$breakpoint = width === null || width === void 0 ? void 0 : width[breakpoint]) !== null && _width$breakpoint !== void 0 ? _width$breakpoint : Math.max(Number(hasTitles) * (_utils.TITLE_WIDTH + _utils.TITLE_MARGIN) * steps.length - _utils.TITLE_MARGIN, _utils.SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
     var next = theme.breakpoints.keys.find(function (_, index, self) {
       return index - 1 >= 0 ? self[index - 1] === breakpoint : false;
     });
@@ -350,7 +350,13 @@ process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
     /**
      * State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}.
      */
-    state: _propTypes.default.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired
+    state: _propTypes.default.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
+
+    /**
+     * Define if a step is disabled/enabled.
+     * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+     */
+    disabled: _propTypes.default.bool
   })).isRequired,
 
   /**
@@ -359,9 +365,15 @@ process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
   stepSize: _propTypes.default.oneOf(["XS", "SM", "MD", "LG", "XL"]),
 
   /**
-   * Width of the component.
+   * Width of the component element on each breakpoint screen resolution.
    */
-  width: _propTypes.default.number,
+  width: _propTypes.default.shape({
+    xs: _propTypes.default.number,
+    sm: _propTypes.default.number,
+    md: _propTypes.default.number,
+    lg: _propTypes.default.number,
+    xl: _propTypes.default.number
+  }),
 
   /**
    * Defines either show a title or only a tooltip on each step component

package/dist/StepNavigation/StepNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepNavigation.js","names":["HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","theme","useTheme","breakpoint","useWidth","stepSizeKey","includes","hasTitles","styledLi","containerSize","styled","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","Separator","withStyles","separatorElement","clsx","separator","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","index","state","props","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","length","ol","getDynamicValues","stepsWidth","Number","TITLE_WIDTH","TITLE_MARGIN","SEPARATOR_WIDTH","next","breakpoints","keys","find","_","self","navWidth","min","values","titleWidth","ceil","styledTitle","titleClassName","variant","stepTitle","textAlign","marginRight","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","HvDefaultNavigation","Simple","HvSimpleNavigation","numSteps","root","itemsProps","margin","propTypes","PropTypes","string","shape","isRequired","oneOf","arrayOf","bool","styles","name"],"sources":["../../src/StepNavigation/StepNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles, Typography, styled, useTheme } from \"@material-ui/core\";\nimport { HvTooltip, HvTypography, useWidth } from \"@hitachivantara/uikit-react-core\";\n\nimport HvDefaultNavigation from \"./DefaultNavigation\";\nimport HvSimpleNavigation from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"XS\", \"SM\", \"MD\", \"LG\", \"XL\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element;\n * will be 100px. If the step component has titles, each one will have 215px of width by default.\n */\nconst HvStepNavigation = ({\n  className,\n  classes,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  ...others\n}) => {\n  const theme = useTheme();\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey = stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"SM\" : \"MD\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor\n  ) => {\n    const Separator = withStyles({\n      separatorElement: {\n        height: separatorHeight,\n        width: separatorWidth,\n        backgroundColor,\n      },\n    })(({ classes: { separatorElement } }) => (\n      <div\n        aria-label={`separator-${title}`}\n        className={clsx(separatorElement, separatorClassName)}\n      />\n    ));\n    return (\n      <li aria-hidden key={`separator-${title}`} className={classes.separator}>\n        <Separator />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }) => {\n    const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {\n      const containerSize = state === \"Current\" ? maxSize : minSize;\n      const StepContainer = styledLi(containerSize);\n      const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));\n      const stepProps = {\n        ...{\n          size: stepSizeKey,\n          state,\n          title,\n          number: index + 1,\n          ...props,\n        },\n      };\n      const stepElement = (\n        <StepContainer key={`step-${title}`} className={classes.li}>\n          {hasTitles ? (\n            <StepComponent aria-label={`step-${title}`} {...stepProps} />\n          ) : (\n            <HvTooltip\n              placement=\"bottom\"\n              title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n            >\n              <div aria-label={`step-container-${title}`}>\n                <Step className={classes.li}>\n                  <StepComponent aria-label={`step-${title}`} {...stepProps} />\n                </Step>\n              </div>\n            </HvTooltip>\n          )}\n        </StepContainer>\n      );\n      if (index < steps.length - 1) {\n        const separatorElement = styledSeparatorElement(\n          title,\n          separatorClassName,\n          height,\n          [steps[index + 1].state, state].includes(\"Current\") ? minWidth : maxWidth,\n          getColor(state)\n        );\n        return [...acc, stepElement, separatorElement];\n      }\n      return [...acc, stepElement];\n    }, []);\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues = (stepsWidth) => {\n    const maxWidth =\n      width ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n      );\n    const next = theme.breakpoints.keys.find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false\n    );\n    const navWidth = Math.min(maxWidth, theme.breakpoints.values?.[next] ?? maxWidth);\n    const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const styledTitle = (titleClassName, variant, title, titleWidth) =>\n    withStyles({\n      stepTitle: {\n        textAlign: \"center\",\n        width: titleWidth - TITLE_MARGIN,\n        marginRight: TITLE_MARGIN,\n      },\n    })(({ classes: { stepTitle } }) =>\n      title ? (\n        <HvTypography variant={variant} className={clsx(stepTitle, titleClassName)}>\n          {title}\n        </HvTypography>\n      ) : null\n    );\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"highlightText\",\n            title = rawTitle,\n            titleWidth = 0,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n          const Title = styledTitle(titleClassName, variant, title, titleWidth);\n          return <Title key={`step-title-${rawTitle}`} />;\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      {...{\n        stepSize: stepSizeKey,\n        numSteps: steps.length,\n        getTitles,\n        getDynamicValues,\n        className: clsx(className, classes.root),\n        ...others,\n      }}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <Typography\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n        >\n          {drawItems(itemsProps)}\n        </Typography>\n      )}\n    </StepNavigation>\n  );\n};\n\nHvStepNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the li element.\n     */\n    li: PropTypes.string,\n    /**\n     *  Styles applied to the ol element.\n     */\n    ol: PropTypes.string,\n    /**\n     * Styles applied to the separator element.\n     */\n    separator: PropTypes.string,\n    /**\n     * Styles applied to the titles container element.\n     */\n    titles: PropTypes.string,\n  }).isRequired,\n  /**\n   * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n   */\n  type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n  /**\n   * Steps to show on the component.\n   */\n  steps: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * Class names to override styles on the step component.\n       */\n      className: PropTypes.string,\n      /**\n       * Class names to override styles on the separator component after the step.\n       */\n      separatorClassName: PropTypes.string,\n      /**\n       * Class names to override styles on the title component above the step.\n       */\n      titleClassName: PropTypes.string,\n      /**\n       * Title of the step.\n       */\n      title: PropTypes.string.isRequired,\n      /**\n       * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}.\n       */\n      state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n    })\n  ).isRequired,\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.\n   */\n  width: PropTypes.number,\n  /**\n   * Defines either show a title or only a tooltip on each step component\n   */\n  showTitles: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStepNavigation\" })(HvStepNavigation);\n"],"mappings":"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"}
+{"version":3,"file":"StepNavigation.js","names":["HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","theme","useTheme","breakpoint","useWidth","stepSizeKey","includes","hasTitles","styledLi","containerSize","styled","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","Separator","withStyles","separatorElement","clsx","separator","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","index","state","props","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","length","ol","getDynamicValues","stepsWidth","Number","TITLE_WIDTH","TITLE_MARGIN","SEPARATOR_WIDTH","next","breakpoints","keys","find","_","self","navWidth","min","values","titleWidth","ceil","styledTitle","titleClassName","variant","stepTitle","textAlign","marginRight","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","HvDefaultNavigation","Simple","HvSimpleNavigation","numSteps","root","itemsProps","margin","propTypes","PropTypes","string","shape","isRequired","oneOf","arrayOf","disabled","bool","xs","sm","md","lg","xl","styles","name"],"sources":["../../src/StepNavigation/StepNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles, Typography, styled, useTheme } from \"@material-ui/core\";\nimport { HvTooltip, HvTypography, useWidth } from \"@hitachivantara/uikit-react-core\";\n\nimport HvDefaultNavigation from \"./DefaultNavigation\";\nimport HvSimpleNavigation from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"XS\", \"SM\", \"MD\", \"LG\", \"XL\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element;\n * will be 100px. If the step component has titles, each one will have 215px of width by default.\n */\nconst HvStepNavigation = ({\n  className,\n  classes,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  ...others\n}) => {\n  const theme = useTheme();\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey = stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"SM\" : \"MD\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor\n  ) => {\n    const Separator = withStyles({\n      separatorElement: {\n        height: separatorHeight,\n        width: separatorWidth,\n        backgroundColor,\n      },\n    })(({ classes: { separatorElement } }) => (\n      <div\n        aria-label={`separator-${title}`}\n        className={clsx(separatorElement, separatorClassName)}\n      />\n    ));\n    return (\n      <li aria-hidden key={`separator-${title}`} className={classes.separator}>\n        <Separator />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }) => {\n    const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {\n      const containerSize = state === \"Current\" ? maxSize : minSize;\n      const StepContainer = styledLi(containerSize);\n      const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));\n      const stepProps = {\n        ...{\n          size: stepSizeKey,\n          state,\n          title,\n          number: index + 1,\n          ...props,\n        },\n      };\n      const stepElement = (\n        <StepContainer key={`step-${title}`} className={classes.li}>\n          {hasTitles ? (\n            <StepComponent aria-label={`step-${title}`} {...stepProps} />\n          ) : (\n            <HvTooltip\n              placement=\"bottom\"\n              title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n            >\n              <div aria-label={`step-container-${title}`}>\n                <Step className={classes.li}>\n                  <StepComponent aria-label={`step-${title}`} {...stepProps} />\n                </Step>\n              </div>\n            </HvTooltip>\n          )}\n        </StepContainer>\n      );\n      if (index < steps.length - 1) {\n        const separatorElement = styledSeparatorElement(\n          title,\n          separatorClassName,\n          height,\n          [steps[index + 1].state, state].includes(\"Current\") ? minWidth : maxWidth,\n          getColor(state)\n        );\n        return [...acc, stepElement, separatorElement];\n      }\n      return [...acc, stepElement];\n    }, []);\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues = (stepsWidth) => {\n    const maxWidth =\n      width?.[breakpoint] ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n      );\n    const next = theme.breakpoints.keys.find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false\n    );\n    const navWidth = Math.min(maxWidth, theme.breakpoints.values?.[next] ?? maxWidth);\n    const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const styledTitle = (titleClassName, variant, title, titleWidth) =>\n    withStyles({\n      stepTitle: {\n        textAlign: \"center\",\n        width: titleWidth - TITLE_MARGIN,\n        marginRight: TITLE_MARGIN,\n      },\n    })(({ classes: { stepTitle } }) =>\n      title ? (\n        <HvTypography variant={variant} className={clsx(stepTitle, titleClassName)}>\n          {title}\n        </HvTypography>\n      ) : null\n    );\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"highlightText\",\n            title = rawTitle,\n            titleWidth = 0,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n          const Title = styledTitle(titleClassName, variant, title, titleWidth);\n          return <Title key={`step-title-${rawTitle}`} />;\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      {...{\n        stepSize: stepSizeKey,\n        numSteps: steps.length,\n        getTitles,\n        getDynamicValues,\n        className: clsx(className, classes.root),\n        ...others,\n      }}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <Typography\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n        >\n          {drawItems(itemsProps)}\n        </Typography>\n      )}\n    </StepNavigation>\n  );\n};\n\nHvStepNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the li element.\n     */\n    li: PropTypes.string,\n    /**\n     *  Styles applied to the ol element.\n     */\n    ol: PropTypes.string,\n    /**\n     * Styles applied to the separator element.\n     */\n    separator: PropTypes.string,\n    /**\n     * Styles applied to the titles container element.\n     */\n    titles: PropTypes.string,\n  }).isRequired,\n  /**\n   * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n   */\n  type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n  /**\n   * Steps to show on the component.\n   */\n  steps: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * Class names to override styles on the step component.\n       */\n      className: PropTypes.string,\n      /**\n       * Class names to override styles on the separator component after the step.\n       */\n      separatorClassName: PropTypes.string,\n      /**\n       * Class names to override styles on the title component above the step.\n       */\n      titleClassName: PropTypes.string,\n      /**\n       * Title of the step.\n       */\n      title: PropTypes.string.isRequired,\n      /**\n       * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}.\n       */\n      state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n      /**\n       * Define if a step is disabled/enabled.\n       * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n       */\n      disabled: PropTypes.bool,\n    })\n  ).isRequired,\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   * Defines either show a title or only a tooltip on each step component\n   */\n  showTitles: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStepNavigation\" })(HvStepNavigation);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,OASnB;EAAA,IARJC,SAQI,QARJA,SAQI;EAAA,IAPJC,OAOI,QAPJA,OAOI;EAAA,IANJC,KAMI,QANJA,KAMI;EAAA,IALJC,KAKI,QALJA,KAKI;EAAA,IAJJC,QAII,QAJJA,QAII;EAAA,IAHJC,UAGI,QAHJA,UAGI;EAAA,qBAFJC,IAEI;EAAA,IAFJA,IAEI,0BAFG,SAEH;EAAA,IADDC,MACC;EACJ,IAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd,CADI,CAEJ;;EACA,IAAMC,UAAU,GAAG,IAAAC,wBAAA,GAAnB,CAHI,CAIJ;;EACA,IAAMC,WAAW,GAAGR,QAAH,aAAGA,QAAH,cAAGA,QAAH,GAAgB,CAAC,IAAD,EAAO,IAAP,EAAaS,QAAb,CAAsBH,UAAtB,IAAoC,IAApC,GAA2C,IAA5E;EACA,IAAMI,SAAS,GAAGT,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiB,CAAC,CAAC,IAAD,EAAO,IAAP,EAAaQ,QAAb,CAAsBH,UAAtB,CAAjC;;EAEA,IAAMK,QAAQ,GAAG,SAAXA,QAAW,CAACC,aAAD;IAAA,OACf,IAAAC,YAAA,EAAO,IAAP,EAAa;MACXf,KAAK,EAAEc,aADI;MAEXE,MAAM,EAAEF;IAFG,CAAb,CADe;EAAA,CAAjB;;EAMA,IAAMG,SAAS,GAAG,SAAZA,SAAY,CAACH,aAAD;IAAA,OAChB,IAAAC,YAAA,EAAO,KAAP,EAAc;MACZf,KAAK,EAAEc,aADK;MAEZE,MAAM,EAAEF;IAFI,CAAd,CADgB;EAAA,CAAlB;;EAMA,IAAMI,sBAAsB,GAAG,SAAzBA,sBAAyB,CAC7BC,KAD6B,EAE7BC,kBAF6B,EAG7BC,eAH6B,EAI7BC,cAJ6B,EAK7BC,eAL6B,EAM1B;IACH,IAAMC,SAAS,GAAG,IAAAC,gBAAA,EAAW;MAC3BC,gBAAgB,EAAE;QAChBV,MAAM,EAAEK,eADQ;QAEhBrB,KAAK,EAAEsB,cAFS;QAGhBC,eAAe,EAAfA;MAHgB;IADS,CAAX,EAMf;MAAA,IAAcG,gBAAd,SAAG3B,OAAH,CAAc2B,gBAAd;MAAA,oBACD;QACE,kCAAyBP,KAAzB,CADF;QAEE,SAAS,EAAE,IAAAQ,aAAA,EAAKD,gBAAL,EAAuBN,kBAAvB;MAFb,EADC;IAAA,CANe,CAAlB;IAYA,oBACE;MAAI,mBAAJ;MAAgB,GAAG,sBAAeD,KAAf,CAAnB;MAA2C,SAAS,EAAEpB,OAAO,CAAC6B;IAA9D,gBACE,6BAAC,SAAD,OADF,CADF;EAKD,CAxBD;;EA0BA,IAAMC,SAAS,GAAG,SAAZA,SAAY,QAGZ;IAAA,kCAFJC,eAEI;IAAA,IAFeC,QAEf,yBAFeA,QAEf;IAAA,IAFyBC,QAEzB,yBAFyBA,QAEzB;IAAA,IAFmCC,QAEnC,yBAFmCA,QAEnC;IAAA,IAF6CjB,MAE7C,yBAF6CA,MAE7C;IAAA,6BADJkB,UACI;IAAA,IADUC,OACV,oBADUA,OACV;IAAA,IADmBC,OACnB,oBADmBA,OACnB;IAAA,IAD4BC,aAC5B,oBAD4BA,aAC5B;IACJ,IAAMC,KAAK,GAAGrC,KAAK,CAACsC,MAAN,CAAa,UAACC,GAAD,SAAsDC,KAAtD,EAAgE;MAAA,IAAxDC,KAAwD,SAAxDA,KAAwD;MAAA,IAAjDvB,KAAiD,SAAjDA,KAAiD;MAAA,IAA1CC,kBAA0C,SAA1CA,kBAA0C;MAAA,IAAnBuB,KAAmB;MACzF,IAAM7B,aAAa,GAAG4B,KAAK,KAAK,SAAV,GAAsBN,OAAtB,GAAgCD,OAAtD;MACA,IAAMS,aAAa,GAAG/B,QAAQ,CAACC,aAAD,CAA9B;MACA,IAAM+B,IAAI,GAAG5B,SAAS,CAAC6B,IAAI,CAACC,GAAL,CAASjC,aAAT,EAAwB,EAAxB,CAAD,EAA8BgC,IAAI,CAACC,GAAL,CAASjC,aAAT,EAAwB,EAAxB,CAA9B,CAAtB;;MACA,IAAMkC,SAAS;QAEXC,IAAI,EAAEvC,WAFK;QAGXgC,KAAK,EAALA,KAHW;QAIXvB,KAAK,EAALA,KAJW;QAKX+B,MAAM,EAAET,KAAK,GAAG;MALL,GAMRE,KANQ,EAAf;;MASA,IAAMQ,WAAW,gBACf,6BAAC,aAAD;QAAe,GAAG,iBAAUhC,KAAV,CAAlB;QAAqC,SAAS,EAAEpB,OAAO,CAACqD;MAAxD,GACGxC,SAAS,gBACR,6BAAC,aAAD;QAAe,6BAAoBO,KAApB;MAAf,GAAgD6B,SAAhD,EADQ,gBAGR,6BAAC,yBAAD;QACE,SAAS,EAAC,QADZ;QAEE,KAAK,eAAE,6BAAC,4BAAD,kBAAkBP,KAAK,GAAG,CAA1B,eAAgCtB,KAAhC;MAFT,gBAIE;QAAK,uCAA8BA,KAA9B;MAAL,gBACE,6BAAC,IAAD;QAAM,SAAS,EAAEpB,OAAO,CAACqD;MAAzB,gBACE,6BAAC,aAAD;QAAe,6BAAoBjC,KAApB;MAAf,GAAgD6B,SAAhD,EADF,CADF,CAJF,CAJJ,CADF;;MAkBA,IAAIP,KAAK,GAAGxC,KAAK,CAACoD,MAAN,GAAe,CAA3B,EAA8B;QAC5B,IAAM3B,gBAAgB,GAAGR,sBAAsB,CAC7CC,KAD6C,EAE7CC,kBAF6C,EAG7CJ,MAH6C,EAI7C,CAACf,KAAK,CAACwC,KAAK,GAAG,CAAT,CAAL,CAAiBC,KAAlB,EAAyBA,KAAzB,EAAgC/B,QAAhC,CAAyC,SAAzC,IAAsDoB,QAAtD,GAAiEC,QAJpB,EAK7CC,QAAQ,CAACS,KAAD,CALqC,CAA/C;QAOA,kDAAWF,GAAX,IAAgBW,WAAhB,EAA6BzB,gBAA7B;MACD;;MACD,kDAAWc,GAAX,IAAgBW,WAAhB;IACD,CA1Ca,EA0CX,EA1CW,CAAd;IA4CA,oBAAO;MAAI,SAAS,EAAEpD,OAAO,CAACuD;IAAvB,GAA4BhB,KAA5B,CAAP;EACD,CAjDD;;EAmDA,IAAMiB,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,UAAD,EAAgB;IAAA;;IACvC,IAAMxB,QAAQ,wBACZhC,KADY,aACZA,KADY,uBACZA,KAAK,CAAGQ,UAAH,CADO,iEAEZsC,IAAI,CAACC,GAAL,CACEU,MAAM,CAAC7C,SAAD,CAAN,IAAqB8C,kBAAA,GAAcC,mBAAnC,IAAmD1D,KAAK,CAACoD,MAAzD,GAAkEM,mBADpE,EAEEC,sBAAA,IAAmB3D,KAAK,CAACoD,MAAN,GAAe,CAAlC,IAAuCG,UAFzC,CAFF;IAMA,IAAMK,IAAI,GAAGvD,KAAK,CAACwD,WAAN,CAAkBC,IAAlB,CAAuBC,IAAvB,CAA4B,UAACC,CAAD,EAAIxB,KAAJ,EAAWyB,IAAX;MAAA,OACvCzB,KAAK,GAAG,CAAR,IAAa,CAAb,GAAiByB,IAAI,CAACzB,KAAK,GAAG,CAAT,CAAJ,KAAoBjC,UAArC,GAAkD,KADX;IAAA,CAA5B,CAAb;IAGA,IAAM2D,QAAQ,GAAGrB,IAAI,CAACsB,GAAL,CAASpC,QAAT,qDAAmB1B,KAAK,CAACwD,WAAN,CAAkBO,MAArC,2DAAmB,uBAA2BR,IAA3B,CAAnB,yEAAuD7B,QAAvD,CAAjB;IACA,IAAMsC,UAAU,GAAGb,MAAM,CAAC7C,SAAD,CAAN,GAAoBkC,IAAI,CAACyB,IAAL,CAAU,CAACJ,QAAQ,GAAGR,mBAAZ,IAA4B1D,KAAK,CAACoD,MAA5C,CAAvC;IACA,IAAM/B,cAAc,GAClBmC,MAAM,CAAC,CAAC7C,SAAF,CAAN,GAAqBkC,IAAI,CAACyB,IAAL,CAAU,CAACJ,QAAQ,GAAGX,UAAZ,KAA2BvD,KAAK,CAACoD,MAAN,GAAe,CAA1C,CAAV,CADvB;IAEA,OAAO;MAAErD,KAAK,EAAEmE,QAAT;MAAmBG,UAAU,EAAVA,UAAnB;MAA+BhD,cAAc,EAAdA;IAA/B,CAAP;EACD,CAfD;;EAiBA,IAAMkD,WAAW,GAAG,SAAdA,WAAc,CAACC,cAAD,EAAiBC,OAAjB,EAA0BvD,KAA1B,EAAiCmD,UAAjC;IAAA,OAClB,IAAA7C,gBAAA,EAAW;MACTkD,SAAS,EAAE;QACTC,SAAS,EAAE,QADF;QAET5E,KAAK,EAAEsE,UAAU,GAAGX,mBAFX;QAGTkB,WAAW,EAAElB;MAHJ;IADF,CAAX,EAMG;MAAA,IAAcgB,SAAd,SAAG5E,OAAH,CAAc4E,SAAd;MAAA,OACDxD,KAAK,gBACH,6BAAC,4BAAD;QAAc,OAAO,EAAEuD,OAAvB;QAAgC,SAAS,EAAE,IAAA/C,aAAA,EAAKgD,SAAL,EAAgBF,cAAhB;MAA3C,GACGtD,KADH,CADG,GAID,IALH;IAAA,CANH,CADkB;EAAA,CAApB;;EAeA,IAAM2D,SAAS,GAAG,SAAZA,SAAY,CAACC,aAAD;IAAA,OAChBnE,SAAS,gBACP;MAAK,SAAS,EAAEb,OAAO,CAACiF;IAAxB,GACG/E,KAAK,CAACgF,GAAN,CAAU,iBAA6CxC,KAA7C,EAAuD;MAAA,IAA7CyC,QAA6C,SAApD/D,KAAoD;MAAA,IAAnCuB,KAAmC,SAAnCA,KAAmC;MAAA,IAA5B+B,cAA4B,SAA5BA,cAA4B;;MAChE,qBAIIM,aAAa,CAAC;QAChBrC,KAAK,EAALA,KADgB;QAEhBwC,QAAQ,EAARA,QAFgB;QAGhBhC,MAAM,EAAET,KAAK,GAAG;MAHA,CAAD,CAJjB;MAAA,2CACEiC,OADF;MAAA,IACEA,OADF,sCACY,eADZ;MAAA,0CAEEvD,KAFF;MAAA,IAEEA,KAFF,qCAEU+D,QAFV;MAAA,2CAGEZ,UAHF;MAAA,IAGEA,UAHF,sCAGe,CAHf;;MASA,IAAMa,KAAK,GAAGX,WAAW,CAACC,cAAD,EAAiBC,OAAjB,EAA0BvD,KAA1B,EAAiCmD,UAAjC,CAAzB;MACA,oBAAO,6BAAC,KAAD;QAAO,GAAG,uBAAgBY,QAAhB;MAAV,EAAP;IACD,CAZA,CADH,CADO,GAgBL,IAjBY;EAAA,CAAlB;;EAmBA,IAAME,cAAc,GAAG;IACrBC,OAAO,EAAEC,0BADY;IAErBC,MAAM,EAAEC;EAFa,EAGrBpF,IAHqB,CAAvB;EAKA,oBACE,6BAAC,cAAD;IAEIF,QAAQ,EAAEQ,WAFd;IAGI+E,QAAQ,EAAExF,KAAK,CAACoD,MAHpB;IAIIyB,SAAS,EAATA,SAJJ;IAKIvB,gBAAgB,EAAhBA,gBALJ;IAMIzD,SAAS,EAAE,IAAA6B,aAAA,EAAK7B,SAAL,EAAgBC,OAAO,CAAC2F,IAAxB;EANf,GAOOrF,MAPP,GAUG;IAAA,IAAGmD,UAAH,SAAGA,UAAH;IAAA,IAAeW,QAAf,SAAeA,QAAf;IAAA,IAA4BwB,UAA5B;IAAA,oBACC,6BAAC,gBAAD;MACE,SAAS,EAAC,KADZ;MAEE,KAAK,EAAE;QACL3F,KAAK,YAAKmE,QAAL,OADA;QAELyB,MAAM,EAAE;MAFH;IAFT,GAOG/D,SAAS,CAAC8D,UAAD,CAPZ,CADD;EAAA,CAVH,CADF;AAwBD,CA1LD;;AA4LA,wCAAA9F,gBAAgB,CAACgG,SAAjB,GAA6B;EAC3B;AACF;AACA;EACE/F,SAAS,EAAEgG,kBAAA,CAAUC,MAJM;;EAK3B;AACF;AACA;EACEhG,OAAO,EAAE+F,kBAAA,CAAUE,KAAV,CAAgB;IACvB;AACJ;AACA;IACIN,IAAI,EAAEI,kBAAA,CAAUC,MAJO;;IAKvB;AACJ;AACA;IACI3C,EAAE,EAAE0C,kBAAA,CAAUC,MARS;;IASvB;AACJ;AACA;IACIzC,EAAE,EAAEwC,kBAAA,CAAUC,MAZS;;IAavB;AACJ;AACA;IACInE,SAAS,EAAEkE,kBAAA,CAAUC,MAhBE;;IAiBvB;AACJ;AACA;IACIf,MAAM,EAAEc,kBAAA,CAAUC;EApBK,CAAhB,EAqBNE,UA7BwB;;EA8B3B;AACF;AACA;EACE7F,IAAI,EAAE0F,kBAAA,CAAUI,KAAV,CAAgB,CAAC,QAAD,EAAW,SAAX,CAAhB,CAjCqB;;EAkC3B;AACF;AACA;EACEjG,KAAK,EAAE6F,kBAAA,CAAUK,OAAV,CACLL,kBAAA,CAAUE,KAAV,CAAgB;IACd;AACN;AACA;IACMlG,SAAS,EAAEgG,kBAAA,CAAUC,MAJP;;IAKd;AACN;AACA;IACM3E,kBAAkB,EAAE0E,kBAAA,CAAUC,MARhB;;IASd;AACN;AACA;IACMtB,cAAc,EAAEqB,kBAAA,CAAUC,MAZZ;;IAad;AACN;AACA;IACM5E,KAAK,EAAE2E,kBAAA,CAAUC,MAAV,CAAiBE,UAhBV;;IAiBd;AACN;AACA;IACMvD,KAAK,EAAEoD,kBAAA,CAAUI,KAAV,CAAgB,CAAC,SAAD,EAAY,QAAZ,EAAsB,WAAtB,EAAmC,SAAnC,EAA8C,UAA9C,CAAhB,EAA2ED,UApBpE;;IAqBd;AACN;AACA;AACA;IACMG,QAAQ,EAAEN,kBAAA,CAAUO;EAzBN,CAAhB,CADK,EA4BLJ,UAjEyB;;EAkE3B;AACF;AACA;EACE/F,QAAQ,EAAE4F,kBAAA,CAAUI,KAAV,CAAgB,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,CAAhB,CArEiB;;EAsE3B;AACF;AACA;EACElG,KAAK,EAAE8F,kBAAA,CAAUE,KAAV,CAAgB;IACrBM,EAAE,EAAER,kBAAA,CAAU5C,MADO;IAErBqD,EAAE,EAAET,kBAAA,CAAU5C,MAFO;IAGrBsD,EAAE,EAAEV,kBAAA,CAAU5C,MAHO;IAIrBuD,EAAE,EAAEX,kBAAA,CAAU5C,MAJO;IAKrBwD,EAAE,EAAEZ,kBAAA,CAAU5C;EALO,CAAhB,CAzEoB;;EAgF3B;AACF;AACA;EACE/C,UAAU,EAAE2F,kBAAA,CAAUO;AAnFK,CAA7B;;eAsFe,IAAA5E,gBAAA,EAAWkF,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAiD/G,gBAAjD,C"}

package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.d.ts

@@ -22,6 +22,11 @@ export type HvStepProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, Hv
      * Number of the step.
      */
     number?: number;
+    /**
+     * Define if a step is disabled/enabled.
+     * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+     */
+    disabled?: boolean;
   };
 
 export default function HvStep(props: HvStepProps): JSX.Element | null;

package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js

@@ -17,6 +17,7 @@ var HvStep = function HvStep(_ref) {
       state = _ref.state,
       title = _ref.title,
       onClick = _ref.onClick,
+      disabled = _ref.disabled,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "SM" : _ref$size,
       _ref$number = _ref.number,
@@ -56,7 +57,7 @@ var HvStep = function HvStep(_ref) {
     "aria-label": "step-".concat(title),
     icon: true,
     overrideIconColors: false,
-    disabled: ["Current", "Disabled"].includes(state),
+    disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(HvAvatar, {
     className: clsx(classes.avatar, classes[size]),
@@ -161,7 +162,13 @@ process.env.NODE_ENV !== "production" ? HvStep.propTypes = {
   /**
    * Event onClick of the step.
    */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+
+  /**
+   * Define if a step is disabled/enabled.
+   * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+   */
+  disabled: PropTypes.bool
 } : void 0;
 export default withStyles(styles, {
   name: "HvStep"

package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["React","PropTypes","clsx","withStyles","Level0Good","Level3Bad","HourGlass","HvAvatar","HvButton","getColor","styles","HvStep","className","classes","state","title","onClick","size","number","iconSize","XS","SM","MD","LG","XL","squareL","Pending","Failed","Completed","svgSize","backgroundColor","color","undefined","semantic","status","IconComponent","root","ghost","ghostDisabled","includes","avatar","propTypes","string","shape","stepTitle","isRequired","oneOf","func","name"],"sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\n\nimport { Level0Good, Level3Bad, HourGlass } from \"@hitachivantara/uikit-react-icons\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nconst HvStep = ({ className, classes, state, title, onClick, size = \"SM\", number = 1 }) => {\n  const iconSize = {\n    XS: \"XS\",\n    SM: \"XS\",\n    MD: \"S\",\n    LG: \"M\",\n    XL: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    XS: squareL - 8,\n    SM: squareL,\n    MD: squareL + 8,\n    LG: squareL + 16,\n    XL: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n\n  const semantic = state !== \"Pending\" ? backgroundColor : undefined;\n\n  const status = state === \"Current\" ? \"atmo5\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={clsx(className, classes.root, { [classes[\"not-current\"]]: state !== \"Current\" })}\n    >\n      <HvButton\n        className={clsx(classes.ghost, { [classes.ghostDisabled]: state === \"Current\" })}\n        aria-label={`step-${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={[\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={clsx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n\nHvStep.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n    /**\n     * Styles applied to the root element when step is not in \"current\" state.\n     */\n    \"not-current\": PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XS.\n     */\n    XS: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is SM.\n     */\n    SM: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is MD.\n     */\n    MD: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is LG.\n     */\n    LG: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XL.\n     */\n    XL: PropTypes.string,\n    /**\n     * Styles applied to the avatar element.\n     */\n    avatar: PropTypes.string,\n    /**\n     * Styles applied to the title of a step element.\n     */\n    stepTitle: PropTypes.string,\n  }).isRequired,\n  /**\n   * Sets one of the standard sizes of the step\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Number of the step.\n   */\n  number: PropTypes.number,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvStep\" })(HvStep);\n"],"mappings":"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"}
+{"version":3,"file":"Step.js","names":["React","PropTypes","clsx","withStyles","Level0Good","Level3Bad","HourGlass","HvAvatar","HvButton","getColor","styles","HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","XS","SM","MD","LG","XL","squareL","Pending","Failed","Completed","svgSize","backgroundColor","color","undefined","semantic","status","IconComponent","root","ghost","ghostDisabled","includes","avatar","propTypes","string","shape","stepTitle","isRequired","oneOf","func","bool","name"],"sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\n\nimport { Level0Good, Level3Bad, HourGlass } from \"@hitachivantara/uikit-react-icons\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nconst HvStep = ({\n  className,\n  classes,\n  state,\n  title,\n  onClick,\n  disabled,\n  size = \"SM\",\n  number = 1,\n}) => {\n  const iconSize = {\n    XS: \"XS\",\n    SM: \"XS\",\n    MD: \"S\",\n    LG: \"M\",\n    XL: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    XS: squareL - 8,\n    SM: squareL,\n    MD: squareL + 8,\n    LG: squareL + 16,\n    XL: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n\n  const semantic = state !== \"Pending\" ? backgroundColor : undefined;\n\n  const status = state === \"Current\" ? \"atmo5\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={clsx(className, classes.root, { [classes[\"not-current\"]]: state !== \"Current\" })}\n    >\n      <HvButton\n        className={clsx(classes.ghost, { [classes.ghostDisabled]: state === \"Current\" })}\n        aria-label={`step-${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={clsx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n\nHvStep.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n    /**\n     * Styles applied to the root element when step is not in \"current\" state.\n     */\n    \"not-current\": PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XS.\n     */\n    XS: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is SM.\n     */\n    SM: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is MD.\n     */\n    MD: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is LG.\n     */\n    LG: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XL.\n     */\n    XL: PropTypes.string,\n    /**\n     * Styles applied to the avatar element.\n     */\n    avatar: PropTypes.string,\n    /**\n     * Styles applied to the title of a step element.\n     */\n    stepTitle: PropTypes.string,\n  }).isRequired,\n  /**\n   * Sets one of the standard sizes of the step\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Number of the step.\n   */\n  number: PropTypes.number,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStep\" })(HvStep);\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AAEA,SAASC,UAAT,QAA2B,mBAA3B;AAEA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,SAAhC,QAAiD,mCAAjD;AACA,SAASC,QAAT,EAAmBC,QAAnB,QAAmC,kCAAnC;AAEA,SAASC,QAAT,QAAyB,UAAzB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;;AACA,IAAMC,MAAM,GAAG,SAATA,MAAS,OAST;EAAA,IARJC,SAQI,QARJA,SAQI;EAAA,IAPJC,OAOI,QAPJA,OAOI;EAAA,IANJC,KAMI,QANJA,KAMI;EAAA,IALJC,KAKI,QALJA,KAKI;EAAA,IAJJC,OAII,QAJJA,OAII;EAAA,IAHJC,QAGI,QAHJA,QAGI;EAAA,qBAFJC,IAEI;EAAA,IAFJA,IAEI,0BAFG,IAEH;EAAA,uBADJC,MACI;EAAA,IADJA,MACI,4BADK,CACL;EACJ,IAAMC,QAAQ,GAAG;IACfC,EAAE,EAAE,IADW;IAEfC,EAAE,EAAE,IAFW;IAGfC,EAAE,EAAE,GAHW;IAIfC,EAAE,EAAE,GAJW;IAKfC,EAAE,EAAE;EALW,EAMfP,IANe,CAAjB;EAQA,IAAMQ,OAAO,GAAG;IACdC,OAAO,EAAE,EADK;IAEdC,MAAM,EAAE,EAFM;IAGdC,SAAS,EAAE;EAHG,EAIdf,KAJc,CAAhB;EAMA,IAAMgB,OAAO,GAAG;IACdT,EAAE,EAAEK,OAAO,GAAG,CADA;IAEdJ,EAAE,EAAEI,OAFU;IAGdH,EAAE,EAAEG,OAAO,GAAG,CAHA;IAIdF,EAAE,EAAEE,OAAO,GAAG,EAJA;IAKdD,EAAE,EAAEC,OAAO,GAAG;EALA,EAMdR,IANc,CAAhB;EAQA,IAAMa,eAAe,GAAGtB,QAAQ,CAACK,KAAD,CAAhC;EAEA,IAAMkB,KAAK,GAAGlB,KAAK,KAAK,SAAV,GAAsB,OAAtB,GAAgCmB,SAA9C;EAEA,IAAMC,QAAQ,GAAGpB,KAAK,KAAK,SAAV,GAAsBiB,eAAtB,GAAwCE,SAAzD;EAEA,IAAME,MAAM,GAAGrB,KAAK,KAAK,SAAV,GAAsB,OAAtB,GAAgCmB,SAA/C;EAEA,IAAMG,aAAa,GAAG;IACpBT,OAAO,EAAErB,SADW;IAEpBsB,MAAM,EAAEvB,SAFY;IAGpBwB,SAAS,EAAEzB;EAHS,EAIpBU,KAJoB,CAAtB;EAMA,oBACE;IACE,SAAS,EAAEZ,IAAI,CAACU,SAAD,EAAYC,OAAO,CAACwB,IAApB,EAAsDvB,KAAK,KAAK,SAAhE,IAA6BD,OAAO,CAAC,aAAD,CAApC;EADjB,gBAGE,oBAAC,QAAD;IACE,SAAS,EAAEX,IAAI,CAACW,OAAO,CAACyB,KAAT,EAA2CxB,KAAK,KAAK,SAArD,IAAmBD,OAAO,CAAC0B,aAA3B,CADjB;IAEE,6BAAoBxB,KAApB,CAFF;IAGE,IAAI,MAHN;IAIE,kBAAkB,EAAE,KAJtB;IAKE,QAAQ,EAAEE,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc,CAAC,SAAD,EAAY,UAAZ,EAAwBuB,QAAxB,CAAiC1B,KAAjC,CALxB;IAME,OAAO,EAAEE;EANX,gBAQE,oBAAC,QAAD;IACE,SAAS,EAAEd,IAAI,CAACW,OAAO,CAAC4B,MAAT,EAAiB5B,OAAO,CAACK,IAAD,CAAxB,CADjB;IAEE,eAAe,EAAEa,eAFnB;IAGE,MAAM,EAAEI,MAHV;IAIE,IAAI,EAAEjB;EAJR,GAMGkB,aAAa,gBACZ,oBAAC,aAAD;IACE,KAAK,EAAEJ,KADT;IAEE,QAAQ,EAAEE,QAFZ;IAGE,KAAK,EAAEJ,OAHT;IAIE,MAAM,EAAEA,OAJV;IAKE,QAAQ,EAAEV;EALZ,EADY,GASZD,MAfJ,CARF,CAHF,CADF;AAiCD,CA/ED;;AAiFA,wCAAAR,MAAM,CAAC+B,SAAP,GAAmB;EACjB;AACF;AACA;EACE9B,SAAS,EAAEX,SAAS,CAAC0C,MAJJ;;EAKjB;AACF;AACA;EACE9B,OAAO,EAAEZ,SAAS,CAAC2C,KAAV,CAAgB;IACvB;AACJ;AACA;IACIP,IAAI,EAAEpC,SAAS,CAAC0C,MAJO;;IAKvB;AACJ;AACA;IACIL,KAAK,EAAErC,SAAS,CAAC0C,MARM;;IASvB;AACJ;AACA;IACIJ,aAAa,EAAEtC,SAAS,CAAC0C,MAZF;;IAavB;AACJ;AACA;IACI,eAAe1C,SAAS,CAAC0C,MAhBF;;IAiBvB;AACJ;AACA;IACItB,EAAE,EAAEpB,SAAS,CAAC0C,MApBS;;IAqBvB;AACJ;AACA;IACIrB,EAAE,EAAErB,SAAS,CAAC0C,MAxBS;;IAyBvB;AACJ;AACA;IACIpB,EAAE,EAAEtB,SAAS,CAAC0C,MA5BS;;IA6BvB;AACJ;AACA;IACInB,EAAE,EAAEvB,SAAS,CAAC0C,MAhCS;;IAiCvB;AACJ;AACA;IACIlB,EAAE,EAAExB,SAAS,CAAC0C,MApCS;;IAqCvB;AACJ;AACA;IACIF,MAAM,EAAExC,SAAS,CAAC0C,MAxCK;;IAyCvB;AACJ;AACA;IACIE,SAAS,EAAE5C,SAAS,CAAC0C;EA5CE,CAAhB,EA6CNG,UArDc;;EAsDjB;AACF;AACA;EACE5B,IAAI,EAAEjB,SAAS,CAAC8C,KAAV,CAAgB,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,CAAhB,CAzDW;;EA0DjB;AACF;AACA;EACEjC,KAAK,EAAEb,SAAS,CAAC8C,KAAV,CAAgB,CAAC,SAAD,EAAY,QAAZ,EAAsB,WAAtB,EAAmC,SAAnC,EAA8C,UAA9C,CAAhB,EAA2ED,UA7DjE;;EA8DjB;AACF;AACA;EACE/B,KAAK,EAAEd,SAAS,CAAC0C,MAAV,CAAiBG,UAjEP;;EAkEjB;AACF;AACA;EACE3B,MAAM,EAAElB,SAAS,CAACkB,MArED;;EAsEjB;AACF;AACA;EACEH,OAAO,EAAEf,SAAS,CAAC+C,IAzEF;;EA0EjB;AACF;AACA;AACA;EACE/B,QAAQ,EAAEhB,SAAS,CAACgD;AA9EH,CAAnB;AAiFA,eAAe9C,UAAU,CAACO,MAAD,EAAS;EAAEwC,IAAI,EAAE;AAAR,CAAT,CAAV,CAAuCvC,MAAvC,CAAf"}

package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.d.ts

@@ -5,6 +5,6 @@ import { HvStepProps } from "../../DefaultNavigation/Step";
 export type HvDotClassKey = "root";
 
 export type HvDotProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvDotClassKey> &
-  Pick<HvStepProps, "size" | "title" | "state" | "onClick">;
+  Pick<HvStepProps, "size" | "title" | "state" | "onClick" | "disabled">;
 
 export default function HvDot(props: HvDotProps): JSX.Element | null;

package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js

@@ -30,7 +30,8 @@ var HvDot = function HvDot(_ref) {
       state = _ref.state,
       title = _ref.title,
       size = _ref.size,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      disabled = _ref.disabled;
   var dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
   var getBackgroundColor = useCallback(function (theme) {
     return state === "Disabled" ? disabledColor(theme) : defaultColor(theme);
@@ -59,11 +60,11 @@ var HvDot = function HvDot(_ref) {
     });
   }, [dotSize, getBackgroundColor])();
   return /*#__PURE__*/React.createElement(HvButton, {
-    className: clsx(classes.root, customClasses.ghost, className, "Current Disabled".includes(state) && customClasses.ghostDisabled, state === "Current" && customClasses.active),
+    className: clsx(classes.root, customClasses.ghost, (disabled !== null && disabled !== void 0 ? disabled : "Current Disabled".includes(state)) && customClasses.ghostDisabled, className, state === "Current" && customClasses.active),
     "aria-label": "step-".concat(title),
     icon: true,
     overrideIconColors: false,
-    disabled: ["Current", "Disabled"].includes(state),
+    disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
     onClick: onClick
   }, []);
 };
@@ -117,7 +118,13 @@ process.env.NODE_ENV !== "production" ? HvDot.propTypes = {
   /**
    * Event onClick of the step.
    */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+
+  /**
+   * Define if a step is disabled/enabled.
+   * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+   */
+  disabled: PropTypes.bool
 } : void 0;
 export default withStyles(styles, {
   name: "HvDot"

package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.js","names":["React","useCallback","useMemo","PropTypes","clsx","HvButton","makeStyles","withStyles","defaultColor","disabledColor","dotSizes","styles","HvDot","classes","className","state","title","size","onClick","dotSize","getBackgroundColor","theme","customClasses","backgroundColor","ghostDisabled","active","ghost","width","height","root","includes","propTypes","string","shape","isRequired","oneOf","func","name"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { makeStyles, withStyles } from \"@material-ui/core\";\n\nimport { defaultColor, disabledColor, dotSizes } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Simple\" Step Navigation root component\n */\nconst HvDot = ({ classes, className, state, title, size, onClick }) => {\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n  const getBackgroundColor = useCallback(\n    (theme) => (state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme)),\n    [state]\n  );\n  const customClasses = useMemo(\n    () =>\n      makeStyles((theme) => {\n        const backgroundColor = getBackgroundColor(theme);\n        return {\n          ghostDisabled: {},\n          active: {},\n          ghost: {\n            ...styles.ghost,\n            width: dotSize,\n            height: dotSize,\n            backgroundColor,\n            \"&:hover\": {\n              backgroundColor,\n            },\n            \"&$ghostDisabled\": {\n              ...styles.ghost[\"&$ghostDisabled\"],\n              backgroundColor,\n            },\n            \"&$ghostDisabled&:hover\": {\n              ...styles.ghost[\"&$ghostDisabled&:hover\"],\n              backgroundColor,\n            },\n          },\n        };\n      }),\n    [dotSize, getBackgroundColor]\n  )();\n  return (\n    <HvButton\n      className={clsx(\n        classes.root,\n        customClasses.ghost,\n        {\n          [customClasses.active]: state === \"Current\",\n          [customClasses.ghostDisabled]: [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={[\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n\nHvDot.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the active class.\n     */\n    active: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvDot\" })(HvDot);\n"],"mappings":"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"}
+{"version":3,"file":"Dot.js","names":["React","useCallback","useMemo","PropTypes","clsx","HvButton","makeStyles","withStyles","defaultColor","disabledColor","dotSizes","styles","HvDot","classes","className","state","title","size","onClick","disabled","dotSize","getBackgroundColor","theme","customClasses","backgroundColor","ghostDisabled","active","ghost","width","height","root","includes","propTypes","string","shape","isRequired","oneOf","func","bool","name"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { makeStyles, withStyles } from \"@material-ui/core\";\n\nimport { defaultColor, disabledColor, dotSizes } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Simple\" Step Navigation root component\n */\nconst HvDot = ({ classes, className, state, title, size, onClick, disabled }) => {\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n  const getBackgroundColor = useCallback(\n    (theme) => (state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme)),\n    [state]\n  );\n  const customClasses = useMemo(\n    () =>\n      makeStyles((theme) => {\n        const backgroundColor = getBackgroundColor(theme);\n        return {\n          ghostDisabled: {},\n          active: {},\n          ghost: {\n            ...styles.ghost,\n            width: dotSize,\n            height: dotSize,\n            backgroundColor,\n            \"&:hover\": {\n              backgroundColor,\n            },\n            \"&$ghostDisabled\": {\n              ...styles.ghost[\"&$ghostDisabled\"],\n              backgroundColor,\n            },\n            \"&$ghostDisabled&:hover\": {\n              ...styles.ghost[\"&$ghostDisabled&:hover\"],\n              backgroundColor,\n            },\n          },\n        };\n      }),\n    [dotSize, getBackgroundColor]\n  )();\n  return (\n    <HvButton\n      className={clsx(\n        classes.root,\n        customClasses.ghost,\n        {\n          [customClasses.active]: state === \"Current\",\n          [customClasses.ghostDisabled]: disabled ?? [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n\nHvDot.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the active class.\n     */\n    active: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvDot\" })(HvDot);\n"],"mappings":"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"}

package/dist/legacy/StepNavigation/StepNavigation.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { StandardProps } from "@material-ui/core";
+import { Breakpoint } from "@material-ui/core/styles/createBreakpoints";
 import { HvStepProps } from "./DefaultNavigation/Step/Step";
 
 export type HvStepNavigationClassKey = "root";
@@ -15,7 +16,7 @@ export type HvStepNavigationProps = StandardProps<
   /**
    * Steps to show on the component.
    */
-  steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className">> & {
+  steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className" | "disabled">> & {
     /**
      * Class names to override styles on the separator component after the step.
      */
@@ -26,15 +27,15 @@ export type HvStepNavigationProps = StandardProps<
     titleClassName: string;
   };
   /**
-   * Sets one of the standard sizes of the steps
+   * Sets one of the standard sizes of the steps.
    */
   stepSize?: "XS" | "SM" | "MD" | "LG" | "XL";
   /**
-   * Width of the component element.
+   * Width of the component element on each breakpoint screen resolution.
    */
-  width?: number;
+  width?: { [breakpoint in Breakpoint]?: number };
   /**
-   * Defines either show a title or only a tooltip on each step component
+   * Defines either show a title or only a tooltip on each step component.
    */
   showTitles?: boolean;
 };

package/dist/legacy/StepNavigation/StepNavigation.js

@@ -165,9 +165,9 @@ var HvStepNavigation = function HvStepNavigation(_ref) {
   };
 
   var getDynamicValues = function getDynamicValues(stepsWidth) {
-    var _theme$breakpoints$va, _theme$breakpoints$va2;
+    var _width$breakpoint, _theme$breakpoints$va, _theme$breakpoints$va2;
 
-    var maxWidth = width !== null && width !== void 0 ? width : Math.max(Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN, SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
+    var maxWidth = (_width$breakpoint = width === null || width === void 0 ? void 0 : width[breakpoint]) !== null && _width$breakpoint !== void 0 ? _width$breakpoint : Math.max(Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN, SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
     var next = theme.breakpoints.keys.find(function (_, index, self) {
       return index - 1 >= 0 ? self[index - 1] === breakpoint : false;
     });
@@ -317,7 +317,13 @@ process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
     /**
      * State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}.
      */
-    state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired
+    state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
+
+    /**
+     * Define if a step is disabled/enabled.
+     * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+     */
+    disabled: PropTypes.bool
   })).isRequired,
 
   /**
@@ -326,9 +332,15 @@ process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
   stepSize: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]),
 
   /**
-   * Width of the component.
+   * Width of the component element on each breakpoint screen resolution.
    */
-  width: PropTypes.number,
+  width: PropTypes.shape({
+    xs: PropTypes.number,
+    sm: PropTypes.number,
+    md: PropTypes.number,
+    lg: PropTypes.number,
+    xl: PropTypes.number
+  }),
 
   /**
    * Defines either show a title or only a tooltip on each step component

package/dist/legacy/StepNavigation/StepNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepNavigation.js","names":["React","PropTypes","clsx","withStyles","Typography","styled","useTheme","HvTooltip","HvTypography","useWidth","HvDefaultNavigation","HvSimpleNavigation","SEPARATOR_WIDTH","TITLE_MARGIN","TITLE_WIDTH","styles","HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","theme","breakpoint","stepSizeKey","includes","hasTitles","styledLi","containerSize","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","Separator","separatorElement","separator","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","index","state","props","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","length","ol","getDynamicValues","stepsWidth","Number","next","breakpoints","keys","find","_","self","navWidth","min","values","titleWidth","ceil","styledTitle","titleClassName","variant","stepTitle","textAlign","marginRight","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","Simple","numSteps","root","itemsProps","margin","propTypes","string","shape","isRequired","oneOf","arrayOf","bool","name"],"sources":["../../../src/StepNavigation/StepNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles, Typography, styled, useTheme } from \"@material-ui/core\";\nimport { HvTooltip, HvTypography, useWidth } from \"@hitachivantara/uikit-react-core\";\n\nimport HvDefaultNavigation from \"./DefaultNavigation\";\nimport HvSimpleNavigation from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"XS\", \"SM\", \"MD\", \"LG\", \"XL\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element;\n * will be 100px. If the step component has titles, each one will have 215px of width by default.\n */\nconst HvStepNavigation = ({\n  className,\n  classes,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  ...others\n}) => {\n  const theme = useTheme();\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey = stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"SM\" : \"MD\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor\n  ) => {\n    const Separator = withStyles({\n      separatorElement: {\n        height: separatorHeight,\n        width: separatorWidth,\n        backgroundColor,\n      },\n    })(({ classes: { separatorElement } }) => (\n      <div\n        aria-label={`separator-${title}`}\n        className={clsx(separatorElement, separatorClassName)}\n      />\n    ));\n    return (\n      <li aria-hidden key={`separator-${title}`} className={classes.separator}>\n        <Separator />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }) => {\n    const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {\n      const containerSize = state === \"Current\" ? maxSize : minSize;\n      const StepContainer = styledLi(containerSize);\n      const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));\n      const stepProps = {\n        ...{\n          size: stepSizeKey,\n          state,\n          title,\n          number: index + 1,\n          ...props,\n        },\n      };\n      const stepElement = (\n        <StepContainer key={`step-${title}`} className={classes.li}>\n          {hasTitles ? (\n            <StepComponent aria-label={`step-${title}`} {...stepProps} />\n          ) : (\n            <HvTooltip\n              placement=\"bottom\"\n              title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n            >\n              <div aria-label={`step-container-${title}`}>\n                <Step className={classes.li}>\n                  <StepComponent aria-label={`step-${title}`} {...stepProps} />\n                </Step>\n              </div>\n            </HvTooltip>\n          )}\n        </StepContainer>\n      );\n      if (index < steps.length - 1) {\n        const separatorElement = styledSeparatorElement(\n          title,\n          separatorClassName,\n          height,\n          [steps[index + 1].state, state].includes(\"Current\") ? minWidth : maxWidth,\n          getColor(state)\n        );\n        return [...acc, stepElement, separatorElement];\n      }\n      return [...acc, stepElement];\n    }, []);\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues = (stepsWidth) => {\n    const maxWidth =\n      width ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n      );\n    const next = theme.breakpoints.keys.find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false\n    );\n    const navWidth = Math.min(maxWidth, theme.breakpoints.values?.[next] ?? maxWidth);\n    const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const styledTitle = (titleClassName, variant, title, titleWidth) =>\n    withStyles({\n      stepTitle: {\n        textAlign: \"center\",\n        width: titleWidth - TITLE_MARGIN,\n        marginRight: TITLE_MARGIN,\n      },\n    })(({ classes: { stepTitle } }) =>\n      title ? (\n        <HvTypography variant={variant} className={clsx(stepTitle, titleClassName)}>\n          {title}\n        </HvTypography>\n      ) : null\n    );\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"highlightText\",\n            title = rawTitle,\n            titleWidth = 0,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n          const Title = styledTitle(titleClassName, variant, title, titleWidth);\n          return <Title key={`step-title-${rawTitle}`} />;\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      {...{\n        stepSize: stepSizeKey,\n        numSteps: steps.length,\n        getTitles,\n        getDynamicValues,\n        className: clsx(className, classes.root),\n        ...others,\n      }}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <Typography\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n        >\n          {drawItems(itemsProps)}\n        </Typography>\n      )}\n    </StepNavigation>\n  );\n};\n\nHvStepNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the li element.\n     */\n    li: PropTypes.string,\n    /**\n     *  Styles applied to the ol element.\n     */\n    ol: PropTypes.string,\n    /**\n     * Styles applied to the separator element.\n     */\n    separator: PropTypes.string,\n    /**\n     * Styles applied to the titles container element.\n     */\n    titles: PropTypes.string,\n  }).isRequired,\n  /**\n   * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n   */\n  type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n  /**\n   * Steps to show on the component.\n   */\n  steps: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * Class names to override styles on the step component.\n       */\n      className: PropTypes.string,\n      /**\n       * Class names to override styles on the separator component after the step.\n       */\n      separatorClassName: PropTypes.string,\n      /**\n       * Class names to override styles on the title component above the step.\n       */\n      titleClassName: PropTypes.string,\n      /**\n       * Title of the step.\n       */\n      title: PropTypes.string.isRequired,\n      /**\n       * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}.\n       */\n      state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n    })\n  ).isRequired,\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.\n   */\n  width: PropTypes.number,\n  /**\n   * Defines either show a title or only a tooltip on each step component\n   */\n  showTitles: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStepNavigation\" })(HvStepNavigation);\n"],"mappings":"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"}
+{"version":3,"file":"StepNavigation.js","names":["React","PropTypes","clsx","withStyles","Typography","styled","useTheme","HvTooltip","HvTypography","useWidth","HvDefaultNavigation","HvSimpleNavigation","SEPARATOR_WIDTH","TITLE_MARGIN","TITLE_WIDTH","styles","HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","theme","breakpoint","stepSizeKey","includes","hasTitles","styledLi","containerSize","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","Separator","separatorElement","separator","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","index","state","props","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","length","ol","getDynamicValues","stepsWidth","Number","next","breakpoints","keys","find","_","self","navWidth","min","values","titleWidth","ceil","styledTitle","titleClassName","variant","stepTitle","textAlign","marginRight","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","Simple","numSteps","root","itemsProps","margin","propTypes","string","shape","isRequired","oneOf","arrayOf","disabled","bool","xs","sm","md","lg","xl","name"],"sources":["../../../src/StepNavigation/StepNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles, Typography, styled, useTheme } from \"@material-ui/core\";\nimport { HvTooltip, HvTypography, useWidth } from \"@hitachivantara/uikit-react-core\";\n\nimport HvDefaultNavigation from \"./DefaultNavigation\";\nimport HvSimpleNavigation from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"XS\", \"SM\", \"MD\", \"LG\", \"XL\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element;\n * will be 100px. If the step component has titles, each one will have 215px of width by default.\n */\nconst HvStepNavigation = ({\n  className,\n  classes,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  ...others\n}) => {\n  const theme = useTheme();\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey = stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"SM\" : \"MD\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor\n  ) => {\n    const Separator = withStyles({\n      separatorElement: {\n        height: separatorHeight,\n        width: separatorWidth,\n        backgroundColor,\n      },\n    })(({ classes: { separatorElement } }) => (\n      <div\n        aria-label={`separator-${title}`}\n        className={clsx(separatorElement, separatorClassName)}\n      />\n    ));\n    return (\n      <li aria-hidden key={`separator-${title}`} className={classes.separator}>\n        <Separator />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }) => {\n    const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {\n      const containerSize = state === \"Current\" ? maxSize : minSize;\n      const StepContainer = styledLi(containerSize);\n      const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));\n      const stepProps = {\n        ...{\n          size: stepSizeKey,\n          state,\n          title,\n          number: index + 1,\n          ...props,\n        },\n      };\n      const stepElement = (\n        <StepContainer key={`step-${title}`} className={classes.li}>\n          {hasTitles ? (\n            <StepComponent aria-label={`step-${title}`} {...stepProps} />\n          ) : (\n            <HvTooltip\n              placement=\"bottom\"\n              title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n            >\n              <div aria-label={`step-container-${title}`}>\n                <Step className={classes.li}>\n                  <StepComponent aria-label={`step-${title}`} {...stepProps} />\n                </Step>\n              </div>\n            </HvTooltip>\n          )}\n        </StepContainer>\n      );\n      if (index < steps.length - 1) {\n        const separatorElement = styledSeparatorElement(\n          title,\n          separatorClassName,\n          height,\n          [steps[index + 1].state, state].includes(\"Current\") ? minWidth : maxWidth,\n          getColor(state)\n        );\n        return [...acc, stepElement, separatorElement];\n      }\n      return [...acc, stepElement];\n    }, []);\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues = (stepsWidth) => {\n    const maxWidth =\n      width?.[breakpoint] ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n      );\n    const next = theme.breakpoints.keys.find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false\n    );\n    const navWidth = Math.min(maxWidth, theme.breakpoints.values?.[next] ?? maxWidth);\n    const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const styledTitle = (titleClassName, variant, title, titleWidth) =>\n    withStyles({\n      stepTitle: {\n        textAlign: \"center\",\n        width: titleWidth - TITLE_MARGIN,\n        marginRight: TITLE_MARGIN,\n      },\n    })(({ classes: { stepTitle } }) =>\n      title ? (\n        <HvTypography variant={variant} className={clsx(stepTitle, titleClassName)}>\n          {title}\n        </HvTypography>\n      ) : null\n    );\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"highlightText\",\n            title = rawTitle,\n            titleWidth = 0,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n          const Title = styledTitle(titleClassName, variant, title, titleWidth);\n          return <Title key={`step-title-${rawTitle}`} />;\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      {...{\n        stepSize: stepSizeKey,\n        numSteps: steps.length,\n        getTitles,\n        getDynamicValues,\n        className: clsx(className, classes.root),\n        ...others,\n      }}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <Typography\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n        >\n          {drawItems(itemsProps)}\n        </Typography>\n      )}\n    </StepNavigation>\n  );\n};\n\nHvStepNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the li element.\n     */\n    li: PropTypes.string,\n    /**\n     *  Styles applied to the ol element.\n     */\n    ol: PropTypes.string,\n    /**\n     * Styles applied to the separator element.\n     */\n    separator: PropTypes.string,\n    /**\n     * Styles applied to the titles container element.\n     */\n    titles: PropTypes.string,\n  }).isRequired,\n  /**\n   * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n   */\n  type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n  /**\n   * Steps to show on the component.\n   */\n  steps: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * Class names to override styles on the step component.\n       */\n      className: PropTypes.string,\n      /**\n       * Class names to override styles on the separator component after the step.\n       */\n      separatorClassName: PropTypes.string,\n      /**\n       * Class names to override styles on the title component above the step.\n       */\n      titleClassName: PropTypes.string,\n      /**\n       * Title of the step.\n       */\n      title: PropTypes.string.isRequired,\n      /**\n       * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}.\n       */\n      state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n      /**\n       * Define if a step is disabled/enabled.\n       * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n       */\n      disabled: PropTypes.bool,\n    })\n  ).isRequired,\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   * Defines either show a title or only a tooltip on each step component\n   */\n  showTitles: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStepNavigation\" })(HvStepNavigation);\n"],"mappings":"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"}

package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.d.ts

@@ -22,6 +22,11 @@ export type HvStepProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, Hv
      * Number of the step.
      */
     number?: number;
+    /**
+     * Define if a step is disabled/enabled.
+     * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+     */
+    disabled?: boolean;
   };
 
 export default function HvStep(props: HvStepProps): JSX.Element | null;

package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js

@@ -17,6 +17,7 @@ const HvStep = ({
   state,
   title,
   onClick,
+  disabled,
   size = "SM",
   number = 1
 }) => {
@@ -55,7 +56,7 @@ const HvStep = ({
     "aria-label": `step-${title}`,
     icon: true,
     overrideIconColors: false,
-    disabled: ["Current", "Disabled"].includes(state),
+    disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(HvAvatar, {
     className: clsx(classes.avatar, classes[size]),
@@ -160,7 +161,13 @@ process.env.NODE_ENV !== "production" ? HvStep.propTypes = {
   /**
    * Event onClick of the step.
    */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+
+  /**
+   * Define if a step is disabled/enabled.
+   * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+   */
+  disabled: PropTypes.bool
 } : void 0;
 export default withStyles(styles, {
   name: "HvStep"

package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["React","PropTypes","clsx","withStyles","Level0Good","Level3Bad","HourGlass","HvAvatar","HvButton","getColor","styles","HvStep","className","classes","state","title","onClick","size","number","iconSize","XS","SM","MD","LG","XL","squareL","Pending","Failed","Completed","svgSize","backgroundColor","color","undefined","semantic","status","IconComponent","root","ghost","ghostDisabled","includes","avatar","propTypes","string","shape","stepTitle","isRequired","oneOf","func","name"],"sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\n\nimport { Level0Good, Level3Bad, HourGlass } from \"@hitachivantara/uikit-react-icons\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nconst HvStep = ({ className, classes, state, title, onClick, size = \"SM\", number = 1 }) => {\n  const iconSize = {\n    XS: \"XS\",\n    SM: \"XS\",\n    MD: \"S\",\n    LG: \"M\",\n    XL: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    XS: squareL - 8,\n    SM: squareL,\n    MD: squareL + 8,\n    LG: squareL + 16,\n    XL: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n\n  const semantic = state !== \"Pending\" ? backgroundColor : undefined;\n\n  const status = state === \"Current\" ? \"atmo5\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={clsx(className, classes.root, { [classes[\"not-current\"]]: state !== \"Current\" })}\n    >\n      <HvButton\n        className={clsx(classes.ghost, { [classes.ghostDisabled]: state === \"Current\" })}\n        aria-label={`step-${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={[\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={clsx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n\nHvStep.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n    /**\n     * Styles applied to the root element when step is not in \"current\" state.\n     */\n    \"not-current\": PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XS.\n     */\n    XS: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is SM.\n     */\n    SM: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is MD.\n     */\n    MD: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is LG.\n     */\n    LG: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XL.\n     */\n    XL: PropTypes.string,\n    /**\n     * Styles applied to the avatar element.\n     */\n    avatar: PropTypes.string,\n    /**\n     * Styles applied to the title of a step element.\n     */\n    stepTitle: PropTypes.string,\n  }).isRequired,\n  /**\n   * Sets one of the standard sizes of the step\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Number of the step.\n   */\n  number: PropTypes.number,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvStep\" })(HvStep);\n"],"mappings":"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"}
+{"version":3,"file":"Step.js","names":["React","PropTypes","clsx","withStyles","Level0Good","Level3Bad","HourGlass","HvAvatar","HvButton","getColor","styles","HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","XS","SM","MD","LG","XL","squareL","Pending","Failed","Completed","svgSize","backgroundColor","color","undefined","semantic","status","IconComponent","root","ghost","ghostDisabled","includes","avatar","propTypes","string","shape","stepTitle","isRequired","oneOf","func","bool","name"],"sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\n\nimport { Level0Good, Level3Bad, HourGlass } from \"@hitachivantara/uikit-react-icons\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nconst HvStep = ({\n  className,\n  classes,\n  state,\n  title,\n  onClick,\n  disabled,\n  size = \"SM\",\n  number = 1,\n}) => {\n  const iconSize = {\n    XS: \"XS\",\n    SM: \"XS\",\n    MD: \"S\",\n    LG: \"M\",\n    XL: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    XS: squareL - 8,\n    SM: squareL,\n    MD: squareL + 8,\n    LG: squareL + 16,\n    XL: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n\n  const semantic = state !== \"Pending\" ? backgroundColor : undefined;\n\n  const status = state === \"Current\" ? \"atmo5\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={clsx(className, classes.root, { [classes[\"not-current\"]]: state !== \"Current\" })}\n    >\n      <HvButton\n        className={clsx(classes.ghost, { [classes.ghostDisabled]: state === \"Current\" })}\n        aria-label={`step-${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={clsx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n\nHvStep.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n    /**\n     * Styles applied to the root element when step is not in \"current\" state.\n     */\n    \"not-current\": PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XS.\n     */\n    XS: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is SM.\n     */\n    SM: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is MD.\n     */\n    MD: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is LG.\n     */\n    LG: PropTypes.string,\n    /**\n     * Styles applied to the root element when size is XL.\n     */\n    XL: PropTypes.string,\n    /**\n     * Styles applied to the avatar element.\n     */\n    avatar: PropTypes.string,\n    /**\n     * Styles applied to the title of a step element.\n     */\n    stepTitle: PropTypes.string,\n  }).isRequired,\n  /**\n   * Sets one of the standard sizes of the step\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Number of the step.\n   */\n  number: PropTypes.number,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStep\" })(HvStep);\n"],"mappings":"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"}

package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.d.ts

@@ -5,6 +5,6 @@ import { HvStepProps } from "../../DefaultNavigation/Step";
 export type HvDotClassKey = "root";
 
 export type HvDotProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvDotClassKey> &
-  Pick<HvStepProps, "size" | "title" | "state" | "onClick">;
+  Pick<HvStepProps, "size" | "title" | "state" | "onClick" | "disabled">;
 
 export default function HvDot(props: HvDotProps): JSX.Element | null;

package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js

@@ -22,7 +22,8 @@ const HvDot = ({
   state,
   title,
   size,
-  onClick
+  onClick,
+  disabled
 }) => {
   const dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
   const getBackgroundColor = useCallback(theme => state === "Disabled" ? disabledColor(theme) : defaultColor(theme), [state]);
@@ -48,11 +49,11 @@ const HvDot = ({
     };
   }), [dotSize, getBackgroundColor])();
   return /*#__PURE__*/React.createElement(HvButton, {
-    className: clsx(classes.root, customClasses.ghost, className, "Current Disabled".includes(state) && customClasses.ghostDisabled, state === "Current" && customClasses.active),
+    className: clsx(classes.root, customClasses.ghost, (disabled !== null && disabled !== void 0 ? disabled : "Current Disabled".includes(state)) && customClasses.ghostDisabled, className, state === "Current" && customClasses.active),
     "aria-label": `step-${title}`,
     icon: true,
     overrideIconColors: false,
-    disabled: ["Current", "Disabled"].includes(state),
+    disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
     onClick: onClick
   }, []);
 };
@@ -106,7 +107,13 @@ process.env.NODE_ENV !== "production" ? HvDot.propTypes = {
   /**
    * Event onClick of the step.
    */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+
+  /**
+   * Define if a step is disabled/enabled.
+   * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+   */
+  disabled: PropTypes.bool
 } : void 0;
 export default withStyles(styles, {
   name: "HvDot"

package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.js","names":["React","useCallback","useMemo","PropTypes","clsx","HvButton","makeStyles","withStyles","defaultColor","disabledColor","dotSizes","styles","HvDot","classes","className","state","title","size","onClick","dotSize","getBackgroundColor","theme","customClasses","backgroundColor","ghostDisabled","active","ghost","width","height","root","includes","propTypes","string","shape","isRequired","oneOf","func","name"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { makeStyles, withStyles } from \"@material-ui/core\";\n\nimport { defaultColor, disabledColor, dotSizes } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Simple\" Step Navigation root component\n */\nconst HvDot = ({ classes, className, state, title, size, onClick }) => {\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n  const getBackgroundColor = useCallback(\n    (theme) => (state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme)),\n    [state]\n  );\n  const customClasses = useMemo(\n    () =>\n      makeStyles((theme) => {\n        const backgroundColor = getBackgroundColor(theme);\n        return {\n          ghostDisabled: {},\n          active: {},\n          ghost: {\n            ...styles.ghost,\n            width: dotSize,\n            height: dotSize,\n            backgroundColor,\n            \"&:hover\": {\n              backgroundColor,\n            },\n            \"&$ghostDisabled\": {\n              ...styles.ghost[\"&$ghostDisabled\"],\n              backgroundColor,\n            },\n            \"&$ghostDisabled&:hover\": {\n              ...styles.ghost[\"&$ghostDisabled&:hover\"],\n              backgroundColor,\n            },\n          },\n        };\n      }),\n    [dotSize, getBackgroundColor]\n  )();\n  return (\n    <HvButton\n      className={clsx(\n        classes.root,\n        customClasses.ghost,\n        {\n          [customClasses.active]: state === \"Current\",\n          [customClasses.ghostDisabled]: [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={[\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n\nHvDot.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the active class.\n     */\n    active: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvDot\" })(HvDot);\n"],"mappings":"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"}
+{"version":3,"file":"Dot.js","names":["React","useCallback","useMemo","PropTypes","clsx","HvButton","makeStyles","withStyles","defaultColor","disabledColor","dotSizes","styles","HvDot","classes","className","state","title","size","onClick","disabled","dotSize","getBackgroundColor","theme","customClasses","backgroundColor","ghostDisabled","active","ghost","width","height","root","includes","propTypes","string","shape","isRequired","oneOf","func","bool","name"],"sources":["../../../../../src/StepNavigation/SimpleNavigation/Dot/Dot.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { makeStyles, withStyles } from \"@material-ui/core\";\n\nimport { defaultColor, disabledColor, dotSizes } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Simple\" Step Navigation root component\n */\nconst HvDot = ({ classes, className, state, title, size, onClick, disabled }) => {\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n  const getBackgroundColor = useCallback(\n    (theme) => (state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme)),\n    [state]\n  );\n  const customClasses = useMemo(\n    () =>\n      makeStyles((theme) => {\n        const backgroundColor = getBackgroundColor(theme);\n        return {\n          ghostDisabled: {},\n          active: {},\n          ghost: {\n            ...styles.ghost,\n            width: dotSize,\n            height: dotSize,\n            backgroundColor,\n            \"&:hover\": {\n              backgroundColor,\n            },\n            \"&$ghostDisabled\": {\n              ...styles.ghost[\"&$ghostDisabled\"],\n              backgroundColor,\n            },\n            \"&$ghostDisabled&:hover\": {\n              ...styles.ghost[\"&$ghostDisabled&:hover\"],\n              backgroundColor,\n            },\n          },\n        };\n      }),\n    [dotSize, getBackgroundColor]\n  )();\n  return (\n    <HvButton\n      className={clsx(\n        classes.root,\n        customClasses.ghost,\n        {\n          [customClasses.active]: state === \"Current\",\n          [customClasses.ghostDisabled]: disabled ?? [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n\nHvDot.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the active class.\n     */\n    active: PropTypes.string,\n    /**\n     * Styles applied to the ghost class.\n     */\n    ghost: PropTypes.string,\n    /**\n     * Styles applied to the ghostDisabled class.\n     */\n    ghostDisabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n   */\n  state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n  /**\n   * Title of the step.\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Event onClick of the step.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvDot\" })(HvDot);\n"],"mappings":"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"}

package/dist/modern/StepNavigation/StepNavigation.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { StandardProps } from "@material-ui/core";
+import { Breakpoint } from "@material-ui/core/styles/createBreakpoints";
 import { HvStepProps } from "./DefaultNavigation/Step/Step";
 
 export type HvStepNavigationClassKey = "root";
@@ -15,7 +16,7 @@ export type HvStepNavigationProps = StandardProps<
   /**
    * Steps to show on the component.
    */
-  steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className">> & {
+  steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className" | "disabled">> & {
     /**
      * Class names to override styles on the separator component after the step.
      */
@@ -26,15 +27,15 @@ export type HvStepNavigationProps = StandardProps<
     titleClassName: string;
   };
   /**
-   * Sets one of the standard sizes of the steps
+   * Sets one of the standard sizes of the steps.
    */
   stepSize?: "XS" | "SM" | "MD" | "LG" | "XL";
   /**
-   * Width of the component element.
+   * Width of the component element on each breakpoint screen resolution.
    */
-  width?: number;
+  width?: { [breakpoint in Breakpoint]?: number };
   /**
-   * Defines either show a title or only a tooltip on each step component
+   * Defines either show a title or only a tooltip on each step component.
    */
   showTitles?: boolean;
 };

package/dist/modern/StepNavigation/StepNavigation.js

@@ -154,9 +154,9 @@ const HvStepNavigation = _ref => {
   };
 
   const getDynamicValues = stepsWidth => {
-    var _theme$breakpoints$va, _theme$breakpoints$va2;
+    var _width$breakpoint, _theme$breakpoints$va, _theme$breakpoints$va2;
 
-    const maxWidth = width !== null && width !== void 0 ? width : Math.max(Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN, SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
+    const maxWidth = (_width$breakpoint = width === null || width === void 0 ? void 0 : width[breakpoint]) !== null && _width$breakpoint !== void 0 ? _width$breakpoint : Math.max(Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN, SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
     const next = theme.breakpoints.keys.find((_, index, self) => index - 1 >= 0 ? self[index - 1] === breakpoint : false);
     const navWidth = Math.min(maxWidth, (_theme$breakpoints$va = (_theme$breakpoints$va2 = theme.breakpoints.values) === null || _theme$breakpoints$va2 === void 0 ? void 0 : _theme$breakpoints$va2[next]) !== null && _theme$breakpoints$va !== void 0 ? _theme$breakpoints$va : maxWidth);
     const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);
@@ -300,7 +300,13 @@ process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
     /**
      * State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}.
      */
-    state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired
+    state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
+
+    /**
+     * Define if a step is disabled/enabled.
+     * If this property is not defined and the step is on state "Disabled", the step component will be disabled
+     */
+    disabled: PropTypes.bool
   })).isRequired,
 
   /**
@@ -309,9 +315,15 @@ process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
   stepSize: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]),
 
   /**
-   * Width of the component.
+   * Width of the component element on each breakpoint screen resolution.
    */
-  width: PropTypes.number,
+  width: PropTypes.shape({
+    xs: PropTypes.number,
+    sm: PropTypes.number,
+    md: PropTypes.number,
+    lg: PropTypes.number,
+    xl: PropTypes.number
+  }),
 
   /**
    * Defines either show a title or only a tooltip on each step component

package/dist/modern/StepNavigation/StepNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepNavigation.js","names":["React","PropTypes","clsx","withStyles","Typography","styled","useTheme","HvTooltip","HvTypography","useWidth","HvDefaultNavigation","HvSimpleNavigation","SEPARATOR_WIDTH","TITLE_MARGIN","TITLE_WIDTH","styles","HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","theme","breakpoint","stepSizeKey","includes","hasTitles","styledLi","containerSize","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","Separator","separatorElement","separator","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","index","state","props","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","length","ol","getDynamicValues","stepsWidth","Number","next","breakpoints","keys","find","_","self","navWidth","min","values","titleWidth","ceil","styledTitle","titleClassName","variant","stepTitle","textAlign","marginRight","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","Simple","numSteps","root","itemsProps","margin","propTypes","string","shape","isRequired","oneOf","arrayOf","bool","name"],"sources":["../../../src/StepNavigation/StepNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles, Typography, styled, useTheme } from \"@material-ui/core\";\nimport { HvTooltip, HvTypography, useWidth } from \"@hitachivantara/uikit-react-core\";\n\nimport HvDefaultNavigation from \"./DefaultNavigation\";\nimport HvSimpleNavigation from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"XS\", \"SM\", \"MD\", \"LG\", \"XL\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element;\n * will be 100px. If the step component has titles, each one will have 215px of width by default.\n */\nconst HvStepNavigation = ({\n  className,\n  classes,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  ...others\n}) => {\n  const theme = useTheme();\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey = stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"SM\" : \"MD\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor\n  ) => {\n    const Separator = withStyles({\n      separatorElement: {\n        height: separatorHeight,\n        width: separatorWidth,\n        backgroundColor,\n      },\n    })(({ classes: { separatorElement } }) => (\n      <div\n        aria-label={`separator-${title}`}\n        className={clsx(separatorElement, separatorClassName)}\n      />\n    ));\n    return (\n      <li aria-hidden key={`separator-${title}`} className={classes.separator}>\n        <Separator />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }) => {\n    const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {\n      const containerSize = state === \"Current\" ? maxSize : minSize;\n      const StepContainer = styledLi(containerSize);\n      const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));\n      const stepProps = {\n        ...{\n          size: stepSizeKey,\n          state,\n          title,\n          number: index + 1,\n          ...props,\n        },\n      };\n      const stepElement = (\n        <StepContainer key={`step-${title}`} className={classes.li}>\n          {hasTitles ? (\n            <StepComponent aria-label={`step-${title}`} {...stepProps} />\n          ) : (\n            <HvTooltip\n              placement=\"bottom\"\n              title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n            >\n              <div aria-label={`step-container-${title}`}>\n                <Step className={classes.li}>\n                  <StepComponent aria-label={`step-${title}`} {...stepProps} />\n                </Step>\n              </div>\n            </HvTooltip>\n          )}\n        </StepContainer>\n      );\n      if (index < steps.length - 1) {\n        const separatorElement = styledSeparatorElement(\n          title,\n          separatorClassName,\n          height,\n          [steps[index + 1].state, state].includes(\"Current\") ? minWidth : maxWidth,\n          getColor(state)\n        );\n        return [...acc, stepElement, separatorElement];\n      }\n      return [...acc, stepElement];\n    }, []);\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues = (stepsWidth) => {\n    const maxWidth =\n      width ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n      );\n    const next = theme.breakpoints.keys.find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false\n    );\n    const navWidth = Math.min(maxWidth, theme.breakpoints.values?.[next] ?? maxWidth);\n    const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const styledTitle = (titleClassName, variant, title, titleWidth) =>\n    withStyles({\n      stepTitle: {\n        textAlign: \"center\",\n        width: titleWidth - TITLE_MARGIN,\n        marginRight: TITLE_MARGIN,\n      },\n    })(({ classes: { stepTitle } }) =>\n      title ? (\n        <HvTypography variant={variant} className={clsx(stepTitle, titleClassName)}>\n          {title}\n        </HvTypography>\n      ) : null\n    );\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"highlightText\",\n            title = rawTitle,\n            titleWidth = 0,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n          const Title = styledTitle(titleClassName, variant, title, titleWidth);\n          return <Title key={`step-title-${rawTitle}`} />;\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      {...{\n        stepSize: stepSizeKey,\n        numSteps: steps.length,\n        getTitles,\n        getDynamicValues,\n        className: clsx(className, classes.root),\n        ...others,\n      }}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <Typography\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n        >\n          {drawItems(itemsProps)}\n        </Typography>\n      )}\n    </StepNavigation>\n  );\n};\n\nHvStepNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the li element.\n     */\n    li: PropTypes.string,\n    /**\n     *  Styles applied to the ol element.\n     */\n    ol: PropTypes.string,\n    /**\n     * Styles applied to the separator element.\n     */\n    separator: PropTypes.string,\n    /**\n     * Styles applied to the titles container element.\n     */\n    titles: PropTypes.string,\n  }).isRequired,\n  /**\n   * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n   */\n  type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n  /**\n   * Steps to show on the component.\n   */\n  steps: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * Class names to override styles on the step component.\n       */\n      className: PropTypes.string,\n      /**\n       * Class names to override styles on the separator component after the step.\n       */\n      separatorClassName: PropTypes.string,\n      /**\n       * Class names to override styles on the title component above the step.\n       */\n      titleClassName: PropTypes.string,\n      /**\n       * Title of the step.\n       */\n      title: PropTypes.string.isRequired,\n      /**\n       * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}.\n       */\n      state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n    })\n  ).isRequired,\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.\n   */\n  width: PropTypes.number,\n  /**\n   * Defines either show a title or only a tooltip on each step component\n   */\n  showTitles: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStepNavigation\" })(HvStepNavigation);\n"],"mappings":"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"}
+{"version":3,"file":"StepNavigation.js","names":["React","PropTypes","clsx","withStyles","Typography","styled","useTheme","HvTooltip","HvTypography","useWidth","HvDefaultNavigation","HvSimpleNavigation","SEPARATOR_WIDTH","TITLE_MARGIN","TITLE_WIDTH","styles","HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","theme","breakpoint","stepSizeKey","includes","hasTitles","styledLi","containerSize","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","Separator","separatorElement","separator","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","index","state","props","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","length","ol","getDynamicValues","stepsWidth","Number","next","breakpoints","keys","find","_","self","navWidth","min","values","titleWidth","ceil","styledTitle","titleClassName","variant","stepTitle","textAlign","marginRight","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","Simple","numSteps","root","itemsProps","margin","propTypes","string","shape","isRequired","oneOf","arrayOf","disabled","bool","xs","sm","md","lg","xl","name"],"sources":["../../../src/StepNavigation/StepNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles, Typography, styled, useTheme } from \"@material-ui/core\";\nimport { HvTooltip, HvTypography, useWidth } from \"@hitachivantara/uikit-react-core\";\n\nimport HvDefaultNavigation from \"./DefaultNavigation\";\nimport HvSimpleNavigation from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"XS\", \"SM\", \"MD\", \"LG\", \"XL\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element;\n * will be 100px. If the step component has titles, each one will have 215px of width by default.\n */\nconst HvStepNavigation = ({\n  className,\n  classes,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  ...others\n}) => {\n  const theme = useTheme();\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey = stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"SM\" : \"MD\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor\n  ) => {\n    const Separator = withStyles({\n      separatorElement: {\n        height: separatorHeight,\n        width: separatorWidth,\n        backgroundColor,\n      },\n    })(({ classes: { separatorElement } }) => (\n      <div\n        aria-label={`separator-${title}`}\n        className={clsx(separatorElement, separatorClassName)}\n      />\n    ));\n    return (\n      <li aria-hidden key={`separator-${title}`} className={classes.separator}>\n        <Separator />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }) => {\n    const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {\n      const containerSize = state === \"Current\" ? maxSize : minSize;\n      const StepContainer = styledLi(containerSize);\n      const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));\n      const stepProps = {\n        ...{\n          size: stepSizeKey,\n          state,\n          title,\n          number: index + 1,\n          ...props,\n        },\n      };\n      const stepElement = (\n        <StepContainer key={`step-${title}`} className={classes.li}>\n          {hasTitles ? (\n            <StepComponent aria-label={`step-${title}`} {...stepProps} />\n          ) : (\n            <HvTooltip\n              placement=\"bottom\"\n              title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n            >\n              <div aria-label={`step-container-${title}`}>\n                <Step className={classes.li}>\n                  <StepComponent aria-label={`step-${title}`} {...stepProps} />\n                </Step>\n              </div>\n            </HvTooltip>\n          )}\n        </StepContainer>\n      );\n      if (index < steps.length - 1) {\n        const separatorElement = styledSeparatorElement(\n          title,\n          separatorClassName,\n          height,\n          [steps[index + 1].state, state].includes(\"Current\") ? minWidth : maxWidth,\n          getColor(state)\n        );\n        return [...acc, stepElement, separatorElement];\n      }\n      return [...acc, stepElement];\n    }, []);\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues = (stepsWidth) => {\n    const maxWidth =\n      width?.[breakpoint] ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n      );\n    const next = theme.breakpoints.keys.find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false\n    );\n    const navWidth = Math.min(maxWidth, theme.breakpoints.values?.[next] ?? maxWidth);\n    const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const styledTitle = (titleClassName, variant, title, titleWidth) =>\n    withStyles({\n      stepTitle: {\n        textAlign: \"center\",\n        width: titleWidth - TITLE_MARGIN,\n        marginRight: TITLE_MARGIN,\n      },\n    })(({ classes: { stepTitle } }) =>\n      title ? (\n        <HvTypography variant={variant} className={clsx(stepTitle, titleClassName)}>\n          {title}\n        </HvTypography>\n      ) : null\n    );\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"highlightText\",\n            title = rawTitle,\n            titleWidth = 0,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n          const Title = styledTitle(titleClassName, variant, title, titleWidth);\n          return <Title key={`step-title-${rawTitle}`} />;\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      {...{\n        stepSize: stepSizeKey,\n        numSteps: steps.length,\n        getTitles,\n        getDynamicValues,\n        className: clsx(className, classes.root),\n        ...others,\n      }}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <Typography\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n        >\n          {drawItems(itemsProps)}\n        </Typography>\n      )}\n    </StepNavigation>\n  );\n};\n\nHvStepNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the li element.\n     */\n    li: PropTypes.string,\n    /**\n     *  Styles applied to the ol element.\n     */\n    ol: PropTypes.string,\n    /**\n     * Styles applied to the separator element.\n     */\n    separator: PropTypes.string,\n    /**\n     * Styles applied to the titles container element.\n     */\n    titles: PropTypes.string,\n  }).isRequired,\n  /**\n   * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n   */\n  type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n  /**\n   * Steps to show on the component.\n   */\n  steps: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * Class names to override styles on the step component.\n       */\n      className: PropTypes.string,\n      /**\n       * Class names to override styles on the separator component after the step.\n       */\n      separatorClassName: PropTypes.string,\n      /**\n       * Class names to override styles on the title component above the step.\n       */\n      titleClassName: PropTypes.string,\n      /**\n       * Title of the step.\n       */\n      title: PropTypes.string.isRequired,\n      /**\n       * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}.\n       */\n      state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n      /**\n       * Define if a step is disabled/enabled.\n       * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n       */\n      disabled: PropTypes.bool,\n    })\n  ).isRequired,\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   * Defines either show a title or only a tooltip on each step component\n   */\n  showTitles: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStepNavigation\" })(HvStepNavigation);\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "3.54.0",
+  "version": "3.55.0",
   "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",
@@ -62,5 +62,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c22744ec752bf0b2957e69354b1988369246bd9e"
+  "gitHead": "9948231e8d50be1b40c4a620952b1950cea845bf"
 }