@hitachivantara/uikit-react-lab 4.0.1-next.2 → 4.0.1-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +3 -1
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js +2 -9
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -1
- package/dist/StepNavigation/DefaultNavigation/Step/Step.d.ts +2 -2
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js +2 -2
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -1
- package/dist/StepNavigation/DefaultNavigation/utils.js +3 -2
- package/dist/StepNavigation/DefaultNavigation/utils.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js +2 -5
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +3 -1
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js +2 -11
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/utils.js +10 -8
- package/dist/StepNavigation/SimpleNavigation/utils.js.map +1 -1
- package/dist/StepNavigation/StepNavigation.js +5 -5
- package/dist/StepNavigation/StepNavigation.js.map +1 -1
- package/dist/Wizard/Wizard.d.ts +63 -0
- package/dist/Wizard/Wizard.js +262 -0
- package/dist/Wizard/Wizard.js.map +1 -0
- package/dist/Wizard/WizardActions/WizardActions.d.ts +61 -0
- package/dist/Wizard/WizardActions/WizardActions.js +270 -0
- package/dist/Wizard/WizardActions/WizardActions.js.map +1 -0
- package/dist/Wizard/WizardActions/index.d.ts +2 -0
- package/dist/Wizard/WizardActions/index.js +16 -0
- package/dist/Wizard/WizardActions/index.js.map +1 -0
- package/dist/Wizard/WizardActions/styles.js +30 -0
- package/dist/Wizard/WizardActions/styles.js.map +1 -0
- package/dist/Wizard/WizardContainer/WizardContainer.d.ts +28 -0
- package/dist/Wizard/WizardContainer/WizardContainer.js +116 -0
- package/dist/Wizard/WizardContainer/WizardContainer.js.map +1 -0
- package/dist/Wizard/WizardContainer/index.d.ts +2 -0
- package/dist/Wizard/WizardContainer/index.js +16 -0
- package/dist/Wizard/WizardContainer/index.js.map +1 -0
- package/dist/Wizard/WizardContainer/styles.js +23 -0
- package/dist/Wizard/WizardContainer/styles.js.map +1 -0
- package/dist/Wizard/WizardContent/LoadingContainer.js +101 -0
- package/dist/Wizard/WizardContent/LoadingContainer.js.map +1 -0
- package/dist/Wizard/WizardContent/WizardContent.d.ts +28 -0
- package/dist/Wizard/WizardContent/WizardContent.js +167 -0
- package/dist/Wizard/WizardContent/WizardContent.js.map +1 -0
- package/dist/Wizard/WizardContent/index.d.ts +2 -0
- package/dist/Wizard/WizardContent/index.js +16 -0
- package/dist/Wizard/WizardContent/index.js.map +1 -0
- package/dist/Wizard/WizardContent/styles.js +24 -0
- package/dist/Wizard/WizardContent/styles.js.map +1 -0
- package/dist/Wizard/WizardContext/WizardContext.js +21 -0
- package/dist/Wizard/WizardContext/WizardContext.js.map +1 -0
- package/dist/Wizard/WizardContext/index.js +16 -0
- package/dist/Wizard/WizardContext/index.js.map +1 -0
- package/dist/Wizard/WizardTitle/WizardTitle.d.ts +42 -0
- package/dist/Wizard/WizardTitle/WizardTitle.js +227 -0
- package/dist/Wizard/WizardTitle/WizardTitle.js.map +1 -0
- package/dist/Wizard/WizardTitle/index.d.ts +2 -0
- package/dist/Wizard/WizardTitle/index.js +16 -0
- package/dist/Wizard/WizardTitle/index.js.map +1 -0
- package/dist/Wizard/WizardTitle/styles.js +41 -0
- package/dist/Wizard/WizardTitle/styles.js.map +1 -0
- package/dist/Wizard/index.d.ts +2 -0
- package/dist/Wizard/index.js +56 -0
- package/dist/Wizard/index.js.map +1 -0
- package/dist/Wizard/styles.js +16 -0
- package/dist/Wizard/styles.js.map +1 -0
- package/dist/index.d.ts +8 -5
- package/dist/index.js +14 -5
- package/dist/index.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +3 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js +2 -8
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.d.ts +2 -2
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js +2 -2
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js +3 -2
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js +4 -7
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +3 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js +2 -9
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js +9 -5
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js.map +1 -1
- package/dist/legacy/StepNavigation/StepNavigation.js +5 -5
- package/dist/legacy/StepNavigation/StepNavigation.js.map +1 -1
- package/dist/legacy/Wizard/Wizard.d.ts +63 -0
- package/dist/legacy/Wizard/Wizard.js +229 -0
- package/dist/legacy/Wizard/Wizard.js.map +1 -0
- package/dist/legacy/Wizard/WizardActions/WizardActions.d.ts +61 -0
- package/dist/legacy/Wizard/WizardActions/WizardActions.js +237 -0
- package/dist/legacy/Wizard/WizardActions/WizardActions.js.map +1 -0
- package/dist/legacy/Wizard/WizardActions/index.d.ts +2 -0
- package/dist/legacy/Wizard/WizardActions/index.js +2 -0
- package/dist/legacy/Wizard/WizardActions/index.js.map +1 -0
- package/dist/legacy/Wizard/WizardActions/styles.js +22 -0
- package/dist/legacy/Wizard/WizardActions/styles.js.map +1 -0
- package/dist/legacy/Wizard/WizardContainer/WizardContainer.d.ts +28 -0
- package/dist/legacy/Wizard/WizardContainer/WizardContainer.js +90 -0
- package/dist/legacy/Wizard/WizardContainer/WizardContainer.js.map +1 -0
- package/dist/legacy/Wizard/WizardContainer/index.d.ts +2 -0
- package/dist/legacy/Wizard/WizardContainer/index.js +2 -0
- package/dist/legacy/Wizard/WizardContainer/index.js.map +1 -0
- package/dist/legacy/Wizard/WizardContainer/styles.js +15 -0
- package/dist/legacy/Wizard/WizardContainer/styles.js.map +1 -0
- package/dist/legacy/Wizard/WizardContent/LoadingContainer.js +78 -0
- package/dist/legacy/Wizard/WizardContent/LoadingContainer.js.map +1 -0
- package/dist/legacy/Wizard/WizardContent/WizardContent.d.ts +28 -0
- package/dist/legacy/Wizard/WizardContent/WizardContent.js +132 -0
- package/dist/legacy/Wizard/WizardContent/WizardContent.js.map +1 -0
- package/dist/legacy/Wizard/WizardContent/index.d.ts +2 -0
- package/dist/legacy/Wizard/WizardContent/index.js +2 -0
- package/dist/legacy/Wizard/WizardContent/index.js.map +1 -0
- package/dist/legacy/Wizard/WizardContent/styles.js +16 -0
- package/dist/legacy/Wizard/WizardContent/styles.js.map +1 -0
- package/dist/legacy/Wizard/WizardContext/WizardContext.js +12 -0
- package/dist/legacy/Wizard/WizardContext/WizardContext.js.map +1 -0
- package/dist/legacy/Wizard/WizardContext/index.js +2 -0
- package/dist/legacy/Wizard/WizardContext/index.js.map +1 -0
- package/dist/legacy/Wizard/WizardTitle/WizardTitle.d.ts +42 -0
- package/dist/legacy/Wizard/WizardTitle/WizardTitle.js +204 -0
- package/dist/legacy/Wizard/WizardTitle/WizardTitle.js.map +1 -0
- package/dist/legacy/Wizard/WizardTitle/index.d.ts +2 -0
- package/dist/legacy/Wizard/WizardTitle/index.js +2 -0
- package/dist/legacy/Wizard/WizardTitle/index.js.map +1 -0
- package/dist/legacy/Wizard/WizardTitle/styles.js +33 -0
- package/dist/legacy/Wizard/WizardTitle/styles.js.map +1 -0
- package/dist/legacy/Wizard/index.d.ts +2 -0
- package/dist/legacy/Wizard/index.js +7 -0
- package/dist/legacy/Wizard/index.js.map +1 -0
- package/dist/legacy/Wizard/styles.js +8 -0
- package/dist/legacy/Wizard/styles.js.map +1 -0
- package/dist/legacy/index.d.ts +8 -5
- package/dist/legacy/index.js +3 -2
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +3 -1
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js +2 -6
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.d.ts +2 -2
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js +2 -2
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js +3 -2
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js +4 -5
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +3 -1
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js +2 -6
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js +7 -5
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js.map +1 -1
- package/dist/modern/StepNavigation/StepNavigation.js +5 -5
- package/dist/modern/StepNavigation/StepNavigation.js.map +1 -1
- package/dist/modern/Wizard/Wizard.d.ts +63 -0
- package/dist/modern/Wizard/Wizard.js +209 -0
- package/dist/modern/Wizard/Wizard.js.map +1 -0
- package/dist/modern/Wizard/WizardActions/WizardActions.d.ts +61 -0
- package/dist/modern/Wizard/WizardActions/WizardActions.js +197 -0
- package/dist/modern/Wizard/WizardActions/WizardActions.js.map +1 -0
- package/dist/modern/Wizard/WizardActions/index.d.ts +2 -0
- package/dist/modern/Wizard/WizardActions/index.js +2 -0
- package/dist/modern/Wizard/WizardActions/index.js.map +1 -0
- package/dist/modern/Wizard/WizardActions/styles.js +20 -0
- package/dist/modern/Wizard/WizardActions/styles.js.map +1 -0
- package/dist/modern/Wizard/WizardContainer/WizardContainer.d.ts +28 -0
- package/dist/modern/Wizard/WizardContainer/WizardContainer.js +85 -0
- package/dist/modern/Wizard/WizardContainer/WizardContainer.js.map +1 -0
- package/dist/modern/Wizard/WizardContainer/index.d.ts +2 -0
- package/dist/modern/Wizard/WizardContainer/index.js +2 -0
- package/dist/modern/Wizard/WizardContainer/index.js.map +1 -0
- package/dist/modern/Wizard/WizardContainer/styles.js +13 -0
- package/dist/modern/Wizard/WizardContainer/styles.js.map +1 -0
- package/dist/modern/Wizard/WizardContent/LoadingContainer.js +71 -0
- package/dist/modern/Wizard/WizardContent/LoadingContainer.js.map +1 -0
- package/dist/modern/Wizard/WizardContent/WizardContent.d.ts +28 -0
- package/dist/modern/Wizard/WizardContent/WizardContent.js +122 -0
- package/dist/modern/Wizard/WizardContent/WizardContent.js.map +1 -0
- package/dist/modern/Wizard/WizardContent/index.d.ts +2 -0
- package/dist/modern/Wizard/WizardContent/index.js +2 -0
- package/dist/modern/Wizard/WizardContent/index.js.map +1 -0
- package/dist/modern/Wizard/WizardContent/styles.js +14 -0
- package/dist/modern/Wizard/WizardContent/styles.js.map +1 -0
- package/dist/modern/Wizard/WizardContext/WizardContext.js +12 -0
- package/dist/modern/Wizard/WizardContext/WizardContext.js.map +1 -0
- package/dist/modern/Wizard/WizardContext/index.js +2 -0
- package/dist/modern/Wizard/WizardContext/index.js.map +1 -0
- package/dist/modern/Wizard/WizardTitle/WizardTitle.d.ts +42 -0
- package/dist/modern/Wizard/WizardTitle/WizardTitle.js +188 -0
- package/dist/modern/Wizard/WizardTitle/WizardTitle.js.map +1 -0
- package/dist/modern/Wizard/WizardTitle/index.d.ts +2 -0
- package/dist/modern/Wizard/WizardTitle/index.js +2 -0
- package/dist/modern/Wizard/WizardTitle/index.js.map +1 -0
- package/dist/modern/Wizard/WizardTitle/styles.js +31 -0
- package/dist/modern/Wizard/WizardTitle/styles.js.map +1 -0
- package/dist/modern/Wizard/index.d.ts +2 -0
- package/dist/modern/Wizard/index.js +7 -0
- package/dist/modern/Wizard/index.js.map +1 -0
- package/dist/modern/Wizard/styles.js +6 -0
- package/dist/modern/Wizard/styles.js.map +1 -0
- package/dist/modern/index.d.ts +8 -5
- package/dist/modern/index.js +3 -2
- package/dist/modern/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -15,10 +15,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
15
15
|
|
|
16
16
|
import React from "react";
|
|
17
17
|
import PropTypes from "prop-types";
|
|
18
|
-
import { useTheme } from "@mui/material";
|
|
19
18
|
import { withStyles } from "@mui/styles";
|
|
20
19
|
import HvStep from "./Step";
|
|
21
|
-
import { getColor
|
|
20
|
+
import { getColor, stepSizes } from "./utils";
|
|
22
21
|
import styles from "./styles";
|
|
23
22
|
/**
|
|
24
23
|
* Default Navigation
|
|
@@ -35,8 +34,7 @@ var HvDefaultNavigation = function HvDefaultNavigation(_ref) {
|
|
|
35
34
|
children = _ref.children,
|
|
36
35
|
other = _objectWithoutProperties(_ref, _excluded);
|
|
37
36
|
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
// step values
|
|
40
38
|
var _stepSizes$stepSize = stepSizes[stepSize],
|
|
41
39
|
maxSize = _stepSizes$stepSize.container,
|
|
42
40
|
minSize = _stepSizes$stepSize.avatar;
|
|
@@ -50,10 +48,6 @@ var HvDefaultNavigation = function HvDefaultNavigation(_ref) {
|
|
|
50
48
|
separatorWidth = _getDynamicValues.separatorWidth; // separator values
|
|
51
49
|
|
|
52
50
|
|
|
53
|
-
var getColor = function getColor(state) {
|
|
54
|
-
return getStateColor(state === "Current" ? "Disabled" : state, theme);
|
|
55
|
-
};
|
|
56
|
-
|
|
57
51
|
var maxWidth = Math.max(titleWidth - minSize, separatorWidth);
|
|
58
52
|
var minWidth = Math.max(titleWidth - (maxSize + minSize) * 0.5, separatorWidth); //
|
|
59
53
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultNavigation.js","names":["React","PropTypes","
|
|
1
|
+
{"version":3,"file":"DefaultNavigation.js","names":["React","PropTypes","withStyles","HvStep","getColor","stepSizes","styles","HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","other","maxSize","container","minSize","avatar","StepComponent","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","state","variant","navWidth","separatorValues","height","stepValues","propTypes","className","string","classes","shape","root","isRequired","number","oneOf","func","elementType","name"],"sources":["../../../../src/StepNavigation/DefaultNavigation/DefaultNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { withStyles } from \"@mui/styles\";\n\nimport HvStep from \"./Step\";\nimport { getColor, stepSizes } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Default Navigation\n */\nconst HvDefaultNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n children,\n ...other\n}) => {\n // step values\n const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n const StepComponent = HvStep;\n //\n\n const stepsWidth = maxSize + minSize * (numSteps - 1);\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n const minWidth = Math.max(titleWidth - (maxSize + minSize) * 0.5, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ state }) => ({\n variant: state === \"Disabled\" ? \"disabledText\" : \"highlightText\",\n titleWidth,\n }));\n\n return (\n <div {...other}>\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: 3,\n },\n stepValues: {\n minSize,\n maxSize,\n StepComponent,\n },\n }}\n />\n {titles}\n </div>\n );\n};\n\nHvDefaultNavigation.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 }).isRequired,\n /**\n * Number of steps to show on the component.\n */\n numSteps: PropTypes.number.isRequired,\n /**\n * Sets one of the standard sizes of the steps\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n /**\n * Returns dynamic width values of the component (width, titleWidth, separatorWidth).\n */\n getDynamicValues: PropTypes.func.isRequired,\n /**\n * Returns a JSX.element of the titles container.\n */\n getTitles: PropTypes.func.isRequired,\n /**\n * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}\n */\n children: PropTypes.elementType.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvDefaultNavigation\" })(HvDefaultNavigation);\n"],"mappings":"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"}
|
|
@@ -7,9 +7,9 @@ export type HvStepClassKey = "root";
|
|
|
7
7
|
export type HvStepProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvStepClassKey> &
|
|
8
8
|
Pick<HvButtonProps, "onClick"> & {
|
|
9
9
|
/**
|
|
10
|
-
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
|
|
10
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled", "Enabled"}
|
|
11
11
|
*/
|
|
12
|
-
state: "Pending" | "Failed" | "Completed" | "Current" | "Disabled";
|
|
12
|
+
state: "Pending" | "Failed" | "Completed" | "Current" | "Disabled" | "Enabled";
|
|
13
13
|
/**
|
|
14
14
|
* Title of the step.
|
|
15
15
|
*/
|
|
@@ -150,9 +150,9 @@ process.env.NODE_ENV !== "production" ? HvStep.propTypes = {
|
|
|
150
150
|
size: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]),
|
|
151
151
|
|
|
152
152
|
/**
|
|
153
|
-
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
|
|
153
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled", "Enabled"}
|
|
154
154
|
*/
|
|
155
|
-
state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
|
|
155
|
+
state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled", "Enabled"]).isRequired,
|
|
156
156
|
|
|
157
157
|
/**
|
|
158
158
|
* Title of the step.
|
|
@@ -1 +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","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 \"@mui/styles\";\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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
|
|
1
|
+
{"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 \"@mui/styles\";\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\", \"Enabled\"}\n */\n state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"])\n .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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"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
var getColor = function getColor(state, theme) {
|
|
2
|
-
var _theme$hv$palette$sem, _theme$hv, _theme$hv$palette, _theme$hv$palette$sem2, _theme$hv$palette$sem3, _theme$hv2, _theme$hv2$palette, _theme$hv2$palette$se, _theme$hv$palette$sem4, _theme$hv3, _theme$hv3$palette, _theme$hv3$palette$se, _theme$hv$palette$acc, _theme$hv4, _theme$hv4$palette, _theme$hv4$palette$ac, _theme$hv$palette$atm, _theme$hv5, _theme$hv5$palette, _theme$hv5$palette$at;
|
|
2
|
+
var _theme$hv$palette$sem, _theme$hv, _theme$hv$palette, _theme$hv$palette$sem2, _theme$hv$palette$sem3, _theme$hv2, _theme$hv2$palette, _theme$hv2$palette$se, _theme$hv$palette$sem4, _theme$hv3, _theme$hv3$palette, _theme$hv3$palette$se, _theme$hv$palette$acc, _theme$hv4, _theme$hv4$palette, _theme$hv4$palette$ac, _theme$hv$palette$atm, _theme$hv5, _theme$hv5$palette, _theme$hv5$palette$at, _theme$hv$palette$acc2, _theme$hv6, _theme$hv6$palette, _theme$hv6$palette$ac;
|
|
3
3
|
|
|
4
4
|
return {
|
|
5
5
|
Pending: (_theme$hv$palette$sem = theme === null || theme === void 0 ? void 0 : (_theme$hv = theme.hv) === null || _theme$hv === void 0 ? void 0 : (_theme$hv$palette = _theme$hv.palette) === null || _theme$hv$palette === void 0 ? void 0 : (_theme$hv$palette$sem2 = _theme$hv$palette.semantic) === null || _theme$hv$palette$sem2 === void 0 ? void 0 : _theme$hv$palette$sem2.sema3) !== null && _theme$hv$palette$sem !== void 0 ? _theme$hv$palette$sem : "sema3",
|
|
6
6
|
Failed: (_theme$hv$palette$sem3 = theme === null || theme === void 0 ? void 0 : (_theme$hv2 = theme.hv) === null || _theme$hv2 === void 0 ? void 0 : (_theme$hv2$palette = _theme$hv2.palette) === null || _theme$hv2$palette === void 0 ? void 0 : (_theme$hv2$palette$se = _theme$hv2$palette.semantic) === null || _theme$hv2$palette$se === void 0 ? void 0 : _theme$hv2$palette$se.sema4) !== null && _theme$hv$palette$sem3 !== void 0 ? _theme$hv$palette$sem3 : "sema4",
|
|
7
7
|
Completed: (_theme$hv$palette$sem4 = theme === null || theme === void 0 ? void 0 : (_theme$hv3 = theme.hv) === null || _theme$hv3 === void 0 ? void 0 : (_theme$hv3$palette = _theme$hv3.palette) === null || _theme$hv3$palette === void 0 ? void 0 : (_theme$hv3$palette$se = _theme$hv3$palette.semantic) === null || _theme$hv3$palette$se === void 0 ? void 0 : _theme$hv3$palette$se.sema1) !== null && _theme$hv$palette$sem4 !== void 0 ? _theme$hv$palette$sem4 : "sema1",
|
|
8
8
|
Current: (_theme$hv$palette$acc = theme === null || theme === void 0 ? void 0 : (_theme$hv4 = theme.hv) === null || _theme$hv4 === void 0 ? void 0 : (_theme$hv4$palette = _theme$hv4.palette) === null || _theme$hv4$palette === void 0 ? void 0 : (_theme$hv4$palette$ac = _theme$hv4$palette.accent) === null || _theme$hv4$palette$ac === void 0 ? void 0 : _theme$hv4$palette$ac.acce1) !== null && _theme$hv$palette$acc !== void 0 ? _theme$hv$palette$acc : "acce1",
|
|
9
|
-
Disabled: (_theme$hv$palette$atm = theme === null || theme === void 0 ? void 0 : (_theme$hv5 = theme.hv) === null || _theme$hv5 === void 0 ? void 0 : (_theme$hv5$palette = _theme$hv5.palette) === null || _theme$hv5$palette === void 0 ? void 0 : (_theme$hv5$palette$at = _theme$hv5$palette.atmosphere) === null || _theme$hv5$palette$at === void 0 ? void 0 : _theme$hv5$palette$at.atmo5) !== null && _theme$hv$palette$atm !== void 0 ? _theme$hv$palette$atm : "atmo5"
|
|
9
|
+
Disabled: (_theme$hv$palette$atm = theme === null || theme === void 0 ? void 0 : (_theme$hv5 = theme.hv) === null || _theme$hv5 === void 0 ? void 0 : (_theme$hv5$palette = _theme$hv5.palette) === null || _theme$hv5$palette === void 0 ? void 0 : (_theme$hv5$palette$at = _theme$hv5$palette.atmosphere) === null || _theme$hv5$palette$at === void 0 ? void 0 : _theme$hv5$palette$at.atmo5) !== null && _theme$hv$palette$atm !== void 0 ? _theme$hv$palette$atm : "atmo5",
|
|
10
|
+
Enabled: (_theme$hv$palette$acc2 = theme === null || theme === void 0 ? void 0 : (_theme$hv6 = theme.hv) === null || _theme$hv6 === void 0 ? void 0 : (_theme$hv6$palette = _theme$hv6.palette) === null || _theme$hv6$palette === void 0 ? void 0 : (_theme$hv6$palette$ac = _theme$hv6$palette.accent) === null || _theme$hv6$palette$ac === void 0 ? void 0 : _theme$hv6$palette$ac.acce1) !== null && _theme$hv$palette$acc2 !== void 0 ? _theme$hv$palette$acc2 : "acce1"
|
|
10
11
|
}[state];
|
|
11
12
|
};
|
|
12
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":["getColor","state","theme","Pending","hv","palette","semantic","sema3","Failed","sema4","Completed","sema1","Current","accent","acce1","Disabled","atmosphere","atmo5","EXTRA_SMALL","container","avatar","SMALL","MEDIUM","LARGE","EXTRA_LARGE","stepSizes","XS","SM","MD","LG","XL"],"sources":["../../../../src/StepNavigation/DefaultNavigation/utils.js"],"sourcesContent":["const getColor = (state, theme) =>\n ({\n Pending: theme?.hv?.palette?.semantic?.sema3 ?? \"sema3\",\n Failed: theme?.hv?.palette?.semantic?.sema4 ?? \"sema4\",\n Completed: theme?.hv?.palette?.semantic?.sema1 ?? \"sema1\",\n Current: theme?.hv?.palette?.accent?.acce1 ?? \"acce1\",\n Disabled: theme?.hv?.palette?.atmosphere?.atmo5 ?? \"atmo5\",\n }[state]);\n\nconst EXTRA_SMALL = { container: 32, avatar: 24 };\nconst SMALL = { container: 40, avatar: 32 };\nconst MEDIUM = { container: 48, avatar: 40 };\nconst LARGE = { container: 60, avatar: 52 };\nconst EXTRA_LARGE = { container: 96, avatar: 88 };\n\nconst stepSizes = {\n XS: EXTRA_SMALL,\n SM: SMALL,\n MD: MEDIUM,\n LG: LARGE,\n XL: EXTRA_LARGE,\n};\n\nexport { getColor, stepSizes };\n"],"mappings":"AAAA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAQC,KAAR;EAAA;;EAAA,OACd;IACCC,OAAO,2BAAED,KAAF,aAAEA,KAAF,oCAAEA,KAAK,CAAEE,EAAT,mEAAE,UAAWC,OAAb,gFAAE,kBAAoBC,QAAtB,2DAAE,uBAA8BC,KAAhC,yEAAyC,OADjD;IAECC,MAAM,4BAAEN,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBC,QAAtB,0DAAE,sBAA8BG,KAAhC,2EAAyC,OAFhD;IAGCC,SAAS,4BAAER,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBC,QAAtB,0DAAE,sBAA8BK,KAAhC,2EAAyC,OAHnD;IAICC,OAAO,2BAAEV,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBQ,MAAtB,0DAAE,sBAA4BC,KAA9B,yEAAuC,OAJ/C;IAKCC,QAAQ,2BAAEb,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBW,UAAtB,0DAAE,sBAAgCC,KAAlC,yEAA2C;
|
|
1
|
+
{"version":3,"file":"utils.js","names":["getColor","state","theme","Pending","hv","palette","semantic","sema3","Failed","sema4","Completed","sema1","Current","accent","acce1","Disabled","atmosphere","atmo5","Enabled","EXTRA_SMALL","container","avatar","SMALL","MEDIUM","LARGE","EXTRA_LARGE","stepSizes","XS","SM","MD","LG","XL"],"sources":["../../../../src/StepNavigation/DefaultNavigation/utils.js"],"sourcesContent":["const getColor = (state, theme) =>\n ({\n Pending: theme?.hv?.palette?.semantic?.sema3 ?? \"sema3\",\n Failed: theme?.hv?.palette?.semantic?.sema4 ?? \"sema4\",\n Completed: theme?.hv?.palette?.semantic?.sema1 ?? \"sema1\",\n Current: theme?.hv?.palette?.accent?.acce1 ?? \"acce1\",\n Disabled: theme?.hv?.palette?.atmosphere?.atmo5 ?? \"atmo5\",\n Enabled: theme?.hv?.palette?.accent?.acce1 ?? \"acce1\",\n }[state]);\n\nconst EXTRA_SMALL = { container: 32, avatar: 24 };\nconst SMALL = { container: 40, avatar: 32 };\nconst MEDIUM = { container: 48, avatar: 40 };\nconst LARGE = { container: 60, avatar: 52 };\nconst EXTRA_LARGE = { container: 96, avatar: 88 };\n\nconst stepSizes = {\n XS: EXTRA_SMALL,\n SM: SMALL,\n MD: MEDIUM,\n LG: LARGE,\n XL: EXTRA_LARGE,\n};\n\nexport { getColor, stepSizes };\n"],"mappings":"AAAA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAQC,KAAR;EAAA;;EAAA,OACd;IACCC,OAAO,2BAAED,KAAF,aAAEA,KAAF,oCAAEA,KAAK,CAAEE,EAAT,mEAAE,UAAWC,OAAb,gFAAE,kBAAoBC,QAAtB,2DAAE,uBAA8BC,KAAhC,yEAAyC,OADjD;IAECC,MAAM,4BAAEN,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBC,QAAtB,0DAAE,sBAA8BG,KAAhC,2EAAyC,OAFhD;IAGCC,SAAS,4BAAER,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBC,QAAtB,0DAAE,sBAA8BK,KAAhC,2EAAyC,OAHnD;IAICC,OAAO,2BAAEV,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBQ,MAAtB,0DAAE,sBAA4BC,KAA9B,yEAAuC,OAJ/C;IAKCC,QAAQ,2BAAEb,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBW,UAAtB,0DAAE,sBAAgCC,KAAlC,yEAA2C,OALpD;IAMCC,OAAO,4BAAEhB,KAAF,aAAEA,KAAF,qCAAEA,KAAK,CAAEE,EAAT,qEAAE,WAAWC,OAAb,gFAAE,mBAAoBQ,MAAtB,0DAAE,sBAA4BC,KAA9B,2EAAuC;EAN/C,EAOCb,KAPD,CADc;AAAA,CAAjB;;AAUA,IAAMkB,WAAW,GAAG;EAAEC,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAApB;AACA,IAAMC,KAAK,GAAG;EAAEF,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAd;AACA,IAAME,MAAM,GAAG;EAAEH,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAf;AACA,IAAMG,KAAK,GAAG;EAAEJ,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAAd;AACA,IAAMI,WAAW,GAAG;EAAEL,SAAS,EAAE,EAAb;EAAiBC,MAAM,EAAE;AAAzB,CAApB;AAEA,IAAMK,SAAS,GAAG;EAChBC,EAAE,EAAER,WADY;EAEhBS,EAAE,EAAEN,KAFY;EAGhBO,EAAE,EAAEN,MAHY;EAIhBO,EAAE,EAAEN,KAJY;EAKhBO,EAAE,EAAEN;AALY,CAAlB;AAQA,SAASzB,QAAT,EAAmB0B,SAAnB"}
|
|
@@ -13,12 +13,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
13
13
|
|
|
14
14
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
15
|
|
|
16
|
-
import React, {
|
|
16
|
+
import React, { useMemo } from "react";
|
|
17
17
|
import PropTypes from "prop-types";
|
|
18
18
|
import clsx from "clsx";
|
|
19
19
|
import { HvButton } from "@hitachivantara/uikit-react-core";
|
|
20
20
|
import { withStyles, makeStyles } from "@mui/styles";
|
|
21
|
-
import {
|
|
21
|
+
import { getColor, dotSizes } from "../utils";
|
|
22
22
|
import styles from "./styles";
|
|
23
23
|
/**
|
|
24
24
|
* Step element of "Simple" Step Navigation root component
|
|
@@ -35,12 +35,9 @@ var HvDot = function HvDot(_ref) {
|
|
|
35
35
|
onClick = _ref.onClick,
|
|
36
36
|
disabled = _ref.disabled;
|
|
37
37
|
var dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
|
|
38
|
-
var getBackgroundColor = useCallback(function (theme) {
|
|
39
|
-
return state === "Disabled" ? disabledColor(theme) : defaultColor(theme);
|
|
40
|
-
}, [state]);
|
|
41
38
|
var customClasses = useMemo(function () {
|
|
42
39
|
return makeStyles(function (theme) {
|
|
43
|
-
var backgroundColor =
|
|
40
|
+
var backgroundColor = getColor(state, theme);
|
|
44
41
|
return {
|
|
45
42
|
ghostDisabled: {},
|
|
46
43
|
active: {},
|
|
@@ -60,7 +57,7 @@ var HvDot = function HvDot(_ref) {
|
|
|
60
57
|
})
|
|
61
58
|
};
|
|
62
59
|
});
|
|
63
|
-
}, [dotSize,
|
|
60
|
+
}, [dotSize, state])();
|
|
64
61
|
return /*#__PURE__*/_jsx(HvButton, {
|
|
65
62
|
className: clsx(classes.root, customClasses.ghost, (disabled !== null && disabled !== void 0 ? disabled : "Current Disabled".includes(state)) && customClasses.ghostDisabled, className, state === "Current" && customClasses.active),
|
|
66
63
|
"aria-label": "step-".concat(title),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dot.js","names":["React","
|
|
1
|
+
{"version":3,"file":"Dot.js","names":["React","useMemo","PropTypes","clsx","HvButton","withStyles","makeStyles","getColor","dotSizes","styles","HvDot","classes","className","state","title","size","onClick","disabled","dotSize","customClasses","theme","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, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles, makeStyles } from \"@mui/styles\";\n\nimport { getColor, 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 customClasses = useMemo(\n () =>\n makeStyles((theme) => {\n const backgroundColor = getColor(state, 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, state]\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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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { StandardProps } from "@mui/material";
|
|
3
3
|
|
|
4
|
+
import { HvTheme } from "@hitachivantara/uikit-react-core";
|
|
5
|
+
|
|
4
6
|
import { HvStepNavigationProps } from "../StepNavigation";
|
|
5
7
|
import { HvDotProps } from "./Dot";
|
|
6
8
|
|
|
@@ -12,7 +14,7 @@ export type ComponentChildProps = {
|
|
|
12
14
|
separatorValues: {
|
|
13
15
|
minWidth: number;
|
|
14
16
|
maxWidth: number;
|
|
15
|
-
getColor: (state: HvDotProps["state"]) => any;
|
|
17
|
+
getColor: (state: HvDotProps["state"], theme: HvTheme) => any;
|
|
16
18
|
height: number;
|
|
17
19
|
};
|
|
18
20
|
stepValues: {
|
|
@@ -6,7 +6,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
6
6
|
|
|
7
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
8
|
|
|
9
|
-
import "core-js/modules/es.array.includes.js";
|
|
10
9
|
import "core-js/modules/es.array.concat.js";
|
|
11
10
|
import "core-js/modules/es.object.keys.js";
|
|
12
11
|
import "core-js/modules/es.symbol.js";
|
|
@@ -17,10 +16,9 @@ import "core-js/modules/web.dom-collections.for-each.js";
|
|
|
17
16
|
import "core-js/modules/es.object.get-own-property-descriptors.js";
|
|
18
17
|
import React from "react";
|
|
19
18
|
import PropTypes from "prop-types";
|
|
20
|
-
import { useTheme } from "@mui/material";
|
|
21
19
|
import { withStyles } from "@mui/styles";
|
|
22
20
|
import HvDot from "./Dot";
|
|
23
|
-
import {
|
|
21
|
+
import { getColor, dotSizes } from "./utils";
|
|
24
22
|
import styles from "./styles";
|
|
25
23
|
/**
|
|
26
24
|
* Simple Navigation
|
|
@@ -37,8 +35,7 @@ var HvSimpleNavigation = function HvSimpleNavigation(_ref) {
|
|
|
37
35
|
children = _ref.children,
|
|
38
36
|
other = _objectWithoutProperties(_ref, _excluded);
|
|
39
37
|
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
// step values
|
|
42
39
|
var dotSize = dotSizes[stepSize];
|
|
43
40
|
var StepComponent = HvDot; //
|
|
44
41
|
|
|
@@ -50,10 +47,6 @@ var HvSimpleNavigation = function HvSimpleNavigation(_ref) {
|
|
|
50
47
|
separatorWidth = _getDynamicValues.separatorWidth; // separator values
|
|
51
48
|
|
|
52
49
|
|
|
53
|
-
var getColor = function getColor(state) {
|
|
54
|
-
return ["Current", "Disabled"].includes(state) ? disabledColor(theme) : defaultColor(theme);
|
|
55
|
-
};
|
|
56
|
-
|
|
57
50
|
var maxWidth = Math.max(titleWidth - dotSize, separatorWidth);
|
|
58
51
|
var minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth); //
|
|
59
52
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleNavigation.js","names":["React","PropTypes","
|
|
1
|
+
{"version":3,"file":"SimpleNavigation.js","names":["React","PropTypes","withStyles","HvDot","getColor","dotSizes","styles","HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","other","dotSize","StepComponent","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","title","navWidth","separatorValues","height","stepValues","minSize","maxSize","propTypes","className","string","classes","shape","root","isRequired","oneOf","func","elementType","name"],"sources":["../../../../src/StepNavigation/SimpleNavigation/SimpleNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { withStyles } from \"@mui/styles\";\n\nimport HvDot from \"./Dot\";\nimport { getColor, dotSizes } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Simple Navigation\n */\nconst HvSimpleNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n children,\n ...other\n}) => {\n // step values\n const dotSize = dotSizes[stepSize];\n const StepComponent = HvDot;\n //\n\n const stepsWidth = (numSteps + 0.5) * dotSize;\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ rawTitle, number }) => ({\n title: `${number}. ${rawTitle}`,\n titleWidth,\n }));\n\n return (\n <div {...other}>\n {titles}\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: 2,\n },\n stepValues: {\n minSize: dotSize,\n maxSize: 1.5 * dotSize,\n StepComponent,\n },\n }}\n />\n </div>\n );\n};\n\nHvSimpleNavigation.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 }).isRequired,\n /**\n * Number of steps to show on the component.\n */\n numSteps: PropTypes.number.isRequired,\n /**\n * Sets one of the standard sizes of the steps\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n /**\n * Returns dynamic width values of the component (width, titleWidth, separatorWidth).\n */\n getDynamicValues: PropTypes.func.isRequired,\n /**\n * Returns a JSX.element of the titles container.\n */\n getTitles: PropTypes.func.isRequired,\n /**\n * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}\n */\n children: PropTypes.elementType.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvSimpleNavigation\" })(HvSimpleNavigation);\n"],"mappings":"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"}
|
|
@@ -7,16 +7,20 @@ var dotSizes = {
|
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
var defaultColor = function defaultColor(theme) {
|
|
10
|
-
var _theme$hv, _theme$hv$palette, _theme$hv$palette$
|
|
10
|
+
var _theme$hv$palette$acc, _theme$hv, _theme$hv$palette, _theme$hv$palette$acc2;
|
|
11
11
|
|
|
12
|
-
return theme === null || theme === void 0 ? void 0 : (_theme$hv = theme.hv) === null || _theme$hv === void 0 ? void 0 : (_theme$hv$palette = _theme$hv.palette) === null || _theme$hv$palette === void 0 ? void 0 : (_theme$hv$palette$
|
|
12
|
+
return (_theme$hv$palette$acc = theme === null || theme === void 0 ? void 0 : (_theme$hv = theme.hv) === null || _theme$hv === void 0 ? void 0 : (_theme$hv$palette = _theme$hv.palette) === null || _theme$hv$palette === void 0 ? void 0 : (_theme$hv$palette$acc2 = _theme$hv$palette.accent) === null || _theme$hv$palette$acc2 === void 0 ? void 0 : _theme$hv$palette$acc2.acce1) !== null && _theme$hv$palette$acc !== void 0 ? _theme$hv$palette$acc : "acce1";
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
var disabledColor = function disabledColor(theme) {
|
|
16
|
-
var _theme$hv2, _theme$hv2$palette, _theme$hv2$palette$at;
|
|
16
|
+
var _theme$hv$palette$atm, _theme$hv2, _theme$hv2$palette, _theme$hv2$palette$at;
|
|
17
17
|
|
|
18
|
-
return theme === null || theme === void 0 ? void 0 : (_theme$hv2 = theme.hv) === null || _theme$hv2 === void 0 ? void 0 : (_theme$hv2$palette = _theme$hv2.palette) === null || _theme$hv2$palette === void 0 ? void 0 : (_theme$hv2$palette$at = _theme$hv2$palette.atmosphere) === null || _theme$hv2$palette$at === void 0 ? void 0 : _theme$hv2$palette$at.atmo5;
|
|
18
|
+
return (_theme$hv$palette$atm = theme === null || theme === void 0 ? void 0 : (_theme$hv2 = theme.hv) === null || _theme$hv2 === void 0 ? void 0 : (_theme$hv2$palette = _theme$hv2.palette) === null || _theme$hv2$palette === void 0 ? void 0 : (_theme$hv2$palette$at = _theme$hv2$palette.atmosphere) === null || _theme$hv2$palette$at === void 0 ? void 0 : _theme$hv2$palette$at.atmo5) !== null && _theme$hv$palette$atm !== void 0 ? _theme$hv$palette$atm : "atmo5";
|
|
19
19
|
};
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
var getColor = function getColor(state, theme) {
|
|
22
|
+
return state === "Disabled" ? disabledColor(theme) : defaultColor(theme);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { dotSizes, getColor };
|
|
22
26
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":["dotSizes","XS","SM","MD","LG","XL","defaultColor","theme","hv","palette","accent","acce1","disabledColor","atmosphere","atmo5"],"sources":["../../../../src/StepNavigation/SimpleNavigation/utils.js"],"sourcesContent":["const dotSizes = {\n XS: 8,\n SM: 10,\n MD: 12,\n LG: 14,\n XL: 16,\n};\n\nconst defaultColor = (theme) => theme?.hv?.palette?.accent?.acce1;\nconst disabledColor = (theme) => theme?.hv?.palette?.atmosphere?.atmo5;\n\nexport { dotSizes,
|
|
1
|
+
{"version":3,"file":"utils.js","names":["dotSizes","XS","SM","MD","LG","XL","defaultColor","theme","hv","palette","accent","acce1","disabledColor","atmosphere","atmo5","getColor","state"],"sources":["../../../../src/StepNavigation/SimpleNavigation/utils.js"],"sourcesContent":["const dotSizes = {\n XS: 8,\n SM: 10,\n MD: 12,\n LG: 14,\n XL: 16,\n};\n\nconst defaultColor = (theme) => theme?.hv?.palette?.accent?.acce1 ?? \"acce1\";\nconst disabledColor = (theme) => theme?.hv?.palette?.atmosphere?.atmo5 ?? \"atmo5\";\n\nconst getColor = (state, theme) =>\n state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme);\n\nexport { dotSizes, getColor };\n"],"mappings":"AAAA,IAAMA,QAAQ,GAAG;EACfC,EAAE,EAAE,CADW;EAEfC,EAAE,EAAE,EAFW;EAGfC,EAAE,EAAE,EAHW;EAIfC,EAAE,EAAE,EAJW;EAKfC,EAAE,EAAE;AALW,CAAjB;;AAQA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EAAA;;EAAA,gCAAWA,KAAX,aAAWA,KAAX,oCAAWA,KAAK,CAAEC,EAAlB,mEAAW,UAAWC,OAAtB,gFAAW,kBAAoBC,MAA/B,2DAAW,uBAA4BC,KAAvC,yEAAgD,OAAhD;AAAA,CAArB;;AACA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACL,KAAD;EAAA;;EAAA,gCAAWA,KAAX,aAAWA,KAAX,qCAAWA,KAAK,CAAEC,EAAlB,qEAAW,WAAWC,OAAtB,gFAAW,mBAAoBI,UAA/B,0DAAW,sBAAgCC,KAA3C,yEAAoD,OAApD;AAAA,CAAtB;;AAEA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAQT,KAAR;EAAA,OACfS,KAAK,KAAK,UAAV,GAAuBJ,aAAa,CAACL,KAAD,CAApC,GAA8CD,YAAY,CAACC,KAAD,CAD3C;AAAA,CAAjB;;AAGA,SAASP,QAAT,EAAmBe,QAAnB"}
|
|
@@ -52,8 +52,8 @@ import styles from "./styles";
|
|
|
52
52
|
* correspondent to the current media breakpoint;
|
|
53
53
|
* * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;
|
|
54
54
|
* * Define a <b>width</b> of the component. If you don't define any value and the step component has no title
|
|
55
|
-
* displayed above, the width of the separator element
|
|
56
|
-
*
|
|
55
|
+
* displayed above, the width of the separator element will be 100px.
|
|
56
|
+
* If the step component has titles, each one will have 215px of width by default.
|
|
57
57
|
*/
|
|
58
58
|
|
|
59
59
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -160,7 +160,7 @@ var HvStepNavigation = function HvStepNavigation(_ref) {
|
|
|
160
160
|
}, "step-".concat(title));
|
|
161
161
|
|
|
162
162
|
if (index < steps.length - 1) {
|
|
163
|
-
var separatorElement = styledSeparatorElement(title, separatorClassName, height, [steps[index + 1].state, state].includes("Current") ? minWidth : maxWidth, getColor(state));
|
|
163
|
+
var separatorElement = styledSeparatorElement(title, separatorClassName, height, [steps[index + 1].state, state].includes("Current") ? minWidth : maxWidth, getColor(steps[index + 1].state === "Disabled" ? "Disabled" : state, theme));
|
|
164
164
|
return [].concat(_toConsumableArray(acc), [stepElement, separatorElement]);
|
|
165
165
|
}
|
|
166
166
|
|
|
@@ -326,9 +326,9 @@ process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
|
|
|
326
326
|
title: PropTypes.string.isRequired,
|
|
327
327
|
|
|
328
328
|
/**
|
|
329
|
-
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}.
|
|
329
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled", "Enabled"}.
|
|
330
330
|
*/
|
|
331
|
-
state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
|
|
331
|
+
state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled", "Enabled"]).isRequired,
|
|
332
332
|
|
|
333
333
|
/**
|
|
334
334
|
* Define if a step is disabled/enabled.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepNavigation.js","names":["React","PropTypes","clsx","Typography","styled","useTheme","withStyles","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 { Typography, styled, useTheme } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\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,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AAEA,SAASC,UAAT,EAAqBC,MAArB,EAA6BC,QAA7B,QAA6C,eAA7C;AACA,SAASC,UAAT,QAA2B,aAA3B;AACA,SAASC,SAAT,EAAoBC,YAApB,EAAkCC,QAAlC,QAAkD,kCAAlD;AAEA,OAAOC,mBAAP,MAAgC,qBAAhC;AACA,OAAOC,kBAAP,MAA+B,oBAA/B;AACA,SAASC,eAAT,EAA0BC,YAA1B,EAAwCC,WAAxC,QAA2D,SAA3D;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACA,IAAMC,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,GAAGpB,QAAQ,EAAtB,CADI,CAEJ;;EACA,IAAMqB,UAAU,GAAGjB,QAAQ,EAA3B,CAHI,CAIJ;;EACA,IAAMkB,WAAW,GAAGN,QAAH,aAAGA,QAAH,cAAGA,QAAH,GAAgB,CAAC,IAAD,EAAO,IAAP,EAAaO,QAAb,CAAsBF,UAAtB,IAAoC,IAApC,GAA2C,IAA5E;EACA,IAAMG,SAAS,GAAGP,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiB,CAAC,CAAC,IAAD,EAAO,IAAP,EAAaM,QAAb,CAAsBF,UAAtB,CAAjC;;EAEA,IAAMI,QAAQ,GAAG,SAAXA,QAAW,CAACC,aAAD;IAAA,OACf3B,MAAM,CAAC,IAAD,CAAN,CAAa;MACXe,KAAK,EAAEY,aADI;MAEXC,MAAM,EAAED;IAFG,CAAb,CADe;EAAA,CAAjB;;EAMA,IAAME,SAAS,GAAG,SAAZA,SAAY,CAACF,aAAD;IAAA,OAChB3B,MAAM,CAAC,KAAD,CAAN,CAAc;MACZe,KAAK,EAAEY,aADK;MAEZC,MAAM,EAAED;IAFI,CAAd,CADgB;EAAA,CAAlB;;EAMA,IAAMG,sBAAsB,GAAG,SAAzBA,sBAAyB,CAC7BC,KAD6B,EAE7BC,kBAF6B,EAG7BC,eAH6B,EAI7BC,cAJ6B,EAK7BC,eAL6B,EAM1B;IACH,IAAMC,SAAS,GAAGlC,UAAU,CAAC;MAC3BmC,gBAAgB,EAAE;QAChBT,MAAM,EAAEK,eADQ;QAEhBlB,KAAK,EAAEmB,cAFS;QAGhBC,eAAe,EAAfA;MAHgB;IADS,CAAD,CAAV,CAMf;MAAA,IAAcE,gBAAd,SAAGvB,OAAH,CAAcuB,gBAAd;MAAA,oBACD;QACE,kCAAyBN,KAAzB,CADF;QAEE,SAAS,EAAEjC,IAAI,CAACuC,gBAAD,EAAmBL,kBAAnB;MAFjB,EADC;IAAA,CANe,CAAlB;IAYA,oBACE;MAAI,mBAAJ;MAA2C,SAAS,EAAElB,OAAO,CAACwB,SAA9D;MAAA,uBACE,KAAC,SAAD;IADF,uBAAkCP,KAAlC,EADF;EAKD,CAxBD;;EA0BA,IAAMQ,SAAS,GAAG,SAAZA,SAAY,QAGZ;IAAA,kCAFJC,eAEI;IAAA,IAFeC,QAEf,yBAFeA,QAEf;IAAA,IAFyBC,QAEzB,yBAFyBA,QAEzB;IAAA,IAFmCC,QAEnC,yBAFmCA,QAEnC;IAAA,IAF6Cf,MAE7C,yBAF6CA,MAE7C;IAAA,6BADJgB,UACI;IAAA,IADUC,OACV,oBADUA,OACV;IAAA,IADmBC,OACnB,oBADmBA,OACnB;IAAA,IAD4BC,aAC5B,oBAD4BA,aAC5B;IACJ,IAAMC,KAAK,GAAGhC,KAAK,CAACiC,MAAN,CAAa,UAACC,GAAD,SAAsDC,KAAtD,EAAgE;MAAA,IAAxDC,KAAwD,SAAxDA,KAAwD;MAAA,IAAjDrB,KAAiD,SAAjDA,KAAiD;MAAA,IAA1CC,kBAA0C,SAA1CA,kBAA0C;MAAA,IAAnBqB,KAAmB;;MACzF,IAAM1B,aAAa,GAAGyB,KAAK,KAAK,SAAV,GAAsBN,OAAtB,GAAgCD,OAAtD;MACA,IAAMS,aAAa,GAAG5B,QAAQ,CAACC,aAAD,CAA9B;MACA,IAAM4B,IAAI,GAAG1B,SAAS,CAAC2B,IAAI,CAACC,GAAL,CAAS9B,aAAT,EAAwB,EAAxB,CAAD,EAA8B6B,IAAI,CAACC,GAAL,CAAS9B,aAAT,EAAwB,EAAxB,CAA9B,CAAtB;;MACA,IAAM+B,SAAS;QAEXC,IAAI,EAAEpC,WAFK;QAGX6B,KAAK,EAALA,KAHW;QAIXrB,KAAK,EAALA,KAJW;QAKX6B,MAAM,EAAET,KAAK,GAAG;MALL,GAMRE,KANQ,EAAf;;MASA,IAAMQ,WAAW,gBACf,KAAC,aAAD;QAAqC,SAAS,EAAE/C,OAAO,CAACgD,EAAxD;QAAA,UACGrC,SAAS,gBACR,KAAC,aAAD;UAAe,6BAAoBM,KAApB;QAAf,GAAgD2B,SAAhD,EADQ,gBAGR,KAAC,SAAD;UACE,SAAS,EAAC,QADZ;UAEE,KAAK,eAAE,KAAC,YAAD;YAAA,oBAAkBP,KAAK,GAAG,CAA1B,eAAgCpB,KAAhC;UAAA,EAFT;UAAA,uBAIE;YAAK,uCAA8BA,KAA9B,CAAL;YAAA,uBACE,KAAC,IAAD;cAAM,SAAS,EAAEjB,OAAO,CAACgD,EAAzB;cAAA,uBACE,KAAC,aAAD;gBAAe,6BAAoB/B,KAApB;cAAf,GAAgD2B,SAAhD;YADF;UADF;QAJF;MAJJ,kBAA4B3B,KAA5B,EADF;;MAkBA,IAAIoB,KAAK,GAAGnC,KAAK,CAAC+C,MAAN,GAAe,CAA3B,EAA8B;QAC5B,IAAM1B,gBAAgB,GAAGP,sBAAsB,CAC7CC,KAD6C,EAE7CC,kBAF6C,EAG7CJ,MAH6C,EAI7C,CAACZ,KAAK,CAACmC,KAAK,GAAG,CAAT,CAAL,CAAiBC,KAAlB,EAAyBA,KAAzB,EAAgC5B,QAAhC,CAAyC,SAAzC,IAAsDiB,QAAtD,GAAiEC,QAJpB,EAK7CC,QAAQ,CAACS,KAAD,CALqC,CAA/C;QAOA,oCAAWF,GAAX,IAAgBW,WAAhB,EAA6BxB,gBAA7B;MACD;;MACD,oCAAWa,GAAX,IAAgBW,WAAhB;IACD,CA1Ca,EA0CX,EA1CW,CAAd;IA4CA,oBAAO;MAAI,SAAS,EAAE/C,OAAO,CAACkD,EAAvB;MAAA,UAA4BhB;IAA5B,EAAP;EACD,CAjDD;;EAmDA,IAAMiB,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,UAAD,EAAgB;IAAA;;IACvC,IAAMxB,QAAQ,wBACZ3B,KADY,aACZA,KADY,uBACZA,KAAK,CAAGO,UAAH,CADO,iEAEZkC,IAAI,CAACC,GAAL,CACEU,MAAM,CAAC1C,SAAD,CAAN,IAAqBf,WAAW,GAAGD,YAAnC,IAAmDO,KAAK,CAAC+C,MAAzD,GAAkEtD,YADpE,EAEED,eAAe,IAAIQ,KAAK,CAAC+C,MAAN,GAAe,CAAnB,CAAf,GAAuCG,UAFzC,CAFF;IAMA,IAAME,IAAI,GAAG/C,KAAK,CAACgD,WAAN,CAAkBC,IAAlB,CAAuBC,IAAvB,CAA4B,UAACC,CAAD,EAAIrB,KAAJ,EAAWsB,IAAX;MAAA,OACvCtB,KAAK,GAAG,CAAR,IAAa,CAAb,GAAiBsB,IAAI,CAACtB,KAAK,GAAG,CAAT,CAAJ,KAAoB7B,UAArC,GAAkD,KADX;IAAA,CAA5B,CAAb;IAGA,IAAMoD,QAAQ,GAAGlB,IAAI,CAACmB,GAAL,CAASjC,QAAT,qDAAmBrB,KAAK,CAACgD,WAAN,CAAkBO,MAArC,2DAAmB,uBAA2BR,IAA3B,CAAnB,yEAAuD1B,QAAvD,CAAjB;IACA,IAAMmC,UAAU,GAAGV,MAAM,CAAC1C,SAAD,CAAN,GAAoB+B,IAAI,CAACsB,IAAL,CAAU,CAACJ,QAAQ,GAAGjE,YAAZ,IAA4BO,KAAK,CAAC+C,MAA5C,CAAvC;IACA,IAAM7B,cAAc,GAClBiC,MAAM,CAAC,CAAC1C,SAAF,CAAN,GAAqB+B,IAAI,CAACsB,IAAL,CAAU,CAACJ,QAAQ,GAAGR,UAAZ,KAA2BlD,KAAK,CAAC+C,MAAN,GAAe,CAA1C,CAAV,CADvB;IAEA,OAAO;MAAEhD,KAAK,EAAE2D,QAAT;MAAmBG,UAAU,EAAVA,UAAnB;MAA+B3C,cAAc,EAAdA;IAA/B,CAAP;EACD,CAfD;;EAiBA,IAAM6C,WAAW,GAAG,SAAdA,WAAc,CAACC,cAAD,EAAiBC,OAAjB,EAA0BlD,KAA1B,EAAiC8C,UAAjC;IAAA,OAClB3E,UAAU,CAAC;MACTgF,SAAS,EAAE;QACTC,SAAS,EAAE,QADF;QAETpE,KAAK,EAAE8D,UAAU,GAAGpE,YAFX;QAGT2E,WAAW,EAAE3E;MAHJ;IADF,CAAD,CAAV,CAMG;MAAA,IAAcyE,SAAd,SAAGpE,OAAH,CAAcoE,SAAd;MAAA,OACDnD,KAAK,gBACH,KAAC,YAAD;QAAc,OAAO,EAAEkD,OAAvB;QAAgC,SAAS,EAAEnF,IAAI,CAACoF,SAAD,EAAYF,cAAZ,CAA/C;QAAA,UACGjD;MADH,EADG,GAID,IALH;IAAA,CANH,CADkB;EAAA,CAApB;;EAeA,IAAMsD,SAAS,GAAG,SAAZA,SAAY,CAACC,aAAD;IAAA,OAChB7D,SAAS,gBACP;MAAK,SAAS,EAAEX,OAAO,CAACyE,MAAxB;MAAA,UACGvE,KAAK,CAACwE,GAAN,CAAU,iBAA6CrC,KAA7C,EAAuD;QAAA,IAA7CsC,QAA6C,SAApD1D,KAAoD;QAAA,IAAnCqB,KAAmC,SAAnCA,KAAmC;QAAA,IAA5B4B,cAA4B,SAA5BA,cAA4B;;QAChE,qBAIIM,aAAa,CAAC;UAChBlC,KAAK,EAALA,KADgB;UAEhBqC,QAAQ,EAARA,QAFgB;UAGhB7B,MAAM,EAAET,KAAK,GAAG;QAHA,CAAD,CAJjB;QAAA,2CACE8B,OADF;QAAA,IACEA,OADF,sCACY,eADZ;QAAA,0CAEElD,KAFF;QAAA,IAEEA,KAFF,qCAEU0D,QAFV;QAAA,2CAGEZ,UAHF;QAAA,IAGEA,UAHF,sCAGe,CAHf;;QASA,IAAMa,KAAK,GAAGX,WAAW,CAACC,cAAD,EAAiBC,OAAjB,EAA0BlD,KAA1B,EAAiC8C,UAAjC,CAAzB;QACA,oBAAO,KAAC,KAAD,2BAA0BY,QAA1B,EAAP;MACD,CAZA;IADH,EADO,GAgBL,IAjBY;EAAA,CAAlB;;EAmBA,IAAME,cAAc,GAAG;IACrBC,OAAO,EAAEtF,mBADY;IAErBuF,MAAM,EAAEtF;EAFa,EAGrBY,IAHqB,CAAvB;EAKA,oBACE,KAAC,cAAD;IAEIF,QAAQ,EAAEM,WAFd;IAGIuE,QAAQ,EAAE9E,KAAK,CAAC+C,MAHpB;IAIIsB,SAAS,EAATA,SAJJ;IAKIpB,gBAAgB,EAAhBA,gBALJ;IAMIpD,SAAS,EAAEf,IAAI,CAACe,SAAD,EAAYC,OAAO,CAACiF,IAApB;EANnB,GAOO3E,MAPP;IAAA,UAUG;MAAA,IAAG8C,UAAH,SAAGA,UAAH;MAAA,IAAeQ,QAAf,SAAeA,QAAf;MAAA,IAA4BsB,UAA5B;;MAAA,oBACC,KAAC,UAAD;QACE,SAAS,EAAC,KADZ;QAEE,KAAK,EAAE;UACLjF,KAAK,YAAK2D,QAAL,OADA;UAELuB,MAAM,EAAE;QAFH,CAFT;QAAA,UAOG1D,SAAS,CAACyD,UAAD;MAPZ,EADD;IAAA;EAVH,GADF;AAwBD,CA1LD;;AA4LA,wCAAApF,gBAAgB,CAACsF,SAAjB,GAA6B;EAC3B;AACF;AACA;EACErF,SAAS,EAAEhB,SAAS,CAACsG,MAJM;;EAK3B;AACF;AACA;EACErF,OAAO,EAAEjB,SAAS,CAACuG,KAAV,CAAgB;IACvB;AACJ;AACA;IACIL,IAAI,EAAElG,SAAS,CAACsG,MAJO;;IAKvB;AACJ;AACA;IACIrC,EAAE,EAAEjE,SAAS,CAACsG,MARS;;IASvB;AACJ;AACA;IACInC,EAAE,EAAEnE,SAAS,CAACsG,MAZS;;IAavB;AACJ;AACA;IACI7D,SAAS,EAAEzC,SAAS,CAACsG,MAhBE;;IAiBvB;AACJ;AACA;IACIZ,MAAM,EAAE1F,SAAS,CAACsG;EApBK,CAAhB,EAqBNE,UA7BwB;;EA8B3B;AACF;AACA;EACElF,IAAI,EAAEtB,SAAS,CAACyG,KAAV,CAAgB,CAAC,QAAD,EAAW,SAAX,CAAhB,CAjCqB;;EAkC3B;AACF;AACA;EACEtF,KAAK,EAAEnB,SAAS,CAAC0G,OAAV,CACL1G,SAAS,CAACuG,KAAV,CAAgB;IACd;AACN;AACA;IACMvF,SAAS,EAAEhB,SAAS,CAACsG,MAJP;;IAKd;AACN;AACA;IACMnE,kBAAkB,EAAEnC,SAAS,CAACsG,MARhB;;IASd;AACN;AACA;IACMnB,cAAc,EAAEnF,SAAS,CAACsG,MAZZ;;IAad;AACN;AACA;IACMpE,KAAK,EAAElC,SAAS,CAACsG,MAAV,CAAiBE,UAhBV;;IAiBd;AACN;AACA;IACMjD,KAAK,EAAEvD,SAAS,CAACyG,KAAV,CAAgB,CAAC,SAAD,EAAY,QAAZ,EAAsB,WAAtB,EAAmC,SAAnC,EAA8C,UAA9C,CAAhB,EAA2ED,UApBpE;;IAqBd;AACN;AACA;AACA;IACMG,QAAQ,EAAE3G,SAAS,CAAC4G;EAzBN,CAAhB,CADK,EA4BLJ,UAjEyB;;EAkE3B;AACF;AACA;EACEpF,QAAQ,EAAEpB,SAAS,CAACyG,KAAV,CAAgB,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,CAAhB,CArEiB;;EAsE3B;AACF;AACA;EACEvF,KAAK,EAAElB,SAAS,CAACuG,KAAV,CAAgB;IACrBM,EAAE,EAAE7G,SAAS,CAAC+D,MADO;IAErB+C,EAAE,EAAE9G,SAAS,CAAC+D,MAFO;IAGrBgD,EAAE,EAAE/G,SAAS,CAAC+D,MAHO;IAIrBiD,EAAE,EAAEhH,SAAS,CAAC+D,MAJO;IAKrBkD,EAAE,EAAEjH,SAAS,CAAC+D;EALO,CAAhB,CAzEoB;;EAgF3B;AACF;AACA;EACE1C,UAAU,EAAErB,SAAS,CAAC4G;AAnFK,CAA7B;AAsFA,eAAevG,UAAU,CAACS,MAAD,EAAS;EAAEoG,IAAI,EAAE;AAAR,CAAT,CAAV,CAAiDnG,gBAAjD,CAAf"}
|
|
1
|
+
{"version":3,"file":"StepNavigation.js","names":["React","PropTypes","clsx","Typography","styled","useTheme","withStyles","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 { Typography, styled, useTheme } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\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 will be 100px.\n * 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(steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state, theme)\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\", \"Enabled\"}.\n */\n state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"])\n .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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"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StandardProps, ModalProps } from "@mui/material";
|
|
3
|
+
import { HvWizardActionsProps } from "./WizardActions";
|
|
4
|
+
import { HvWizardTitleProps } from "./WizardTitle";
|
|
5
|
+
import { HvStepNavigationProps } from "../StepNavigation";
|
|
6
|
+
|
|
7
|
+
export type HvWizardClassKey = "root";
|
|
8
|
+
|
|
9
|
+
export type HvWizardProps = StandardProps<
|
|
10
|
+
React.HTMLAttributes<HTMLDivElement>,
|
|
11
|
+
HvWizardClassKey
|
|
12
|
+
> & {
|
|
13
|
+
/**
|
|
14
|
+
* Class names to be applied.
|
|
15
|
+
*/
|
|
16
|
+
className: string;
|
|
17
|
+
/**
|
|
18
|
+
* Current state of the Wizard.
|
|
19
|
+
*/
|
|
20
|
+
open: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Function executed on close.
|
|
23
|
+
*/
|
|
24
|
+
onClose: ModalProps["onClose"];
|
|
25
|
+
/**
|
|
26
|
+
* Function executed on submit.
|
|
27
|
+
*/
|
|
28
|
+
onSubmit: any;
|
|
29
|
+
/**
|
|
30
|
+
* Title for the wizard.
|
|
31
|
+
*/
|
|
32
|
+
title: string;
|
|
33
|
+
/**
|
|
34
|
+
* The content of the component.
|
|
35
|
+
*/
|
|
36
|
+
children: React.ReactNode;
|
|
37
|
+
/**
|
|
38
|
+
* An object containing all the labels for the wizard.
|
|
39
|
+
*/
|
|
40
|
+
labels: HvWizardActionsProps["labels"] & HvWizardTitleProps["labels"];
|
|
41
|
+
/**
|
|
42
|
+
* Shows the summary button.
|
|
43
|
+
*/
|
|
44
|
+
hasSummary?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Enables the skip button.
|
|
47
|
+
*/
|
|
48
|
+
skippable?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Forces minimum height to the component.
|
|
51
|
+
*/
|
|
52
|
+
fixedHeight?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Whether the loading animation is shown.
|
|
55
|
+
*/
|
|
56
|
+
loading?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Custom object to define type, size and width of the StepNavigation component
|
|
59
|
+
*/
|
|
60
|
+
customStep?: Pick<HvStepNavigationProps, "type" | "stepSize" | "width">;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export default function HvWizard(props: HvWizardProps): JSX.Element | null;
|