@hitachivantara/uikit-react-lab 5.19.0 → 5.19.1
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/cjs/components/Dashboard/Dashboard.cjs +14 -15
- package/dist/cjs/components/Dashboard/Dashboard.cjs.map +1 -1
- package/dist/cjs/components/Dashboard/Dashboard.styles.cjs +187 -5
- package/dist/cjs/components/Dashboard/Dashboard.styles.cjs.map +1 -1
- package/dist/cjs/components/Flow/Background/Background.cjs.map +1 -1
- package/dist/cjs/components/Flow/Controls/Controls.cjs +34 -13
- package/dist/cjs/components/Flow/Controls/Controls.cjs.map +1 -1
- package/dist/cjs/components/Flow/DroppableFlow.cjs +101 -66
- package/dist/cjs/components/Flow/DroppableFlow.cjs.map +1 -1
- package/dist/cjs/components/Flow/Empty/Empty.cjs +2 -8
- package/dist/cjs/components/Flow/Empty/Empty.cjs.map +1 -1
- package/dist/cjs/components/Flow/Empty/Empty.styles.cjs +1 -4
- package/dist/cjs/components/Flow/Empty/Empty.styles.cjs.map +1 -1
- package/dist/cjs/components/Flow/Flow.cjs +24 -5
- package/dist/cjs/components/Flow/Flow.cjs.map +1 -1
- package/dist/cjs/components/Flow/Flow.styles.cjs +1 -4
- package/dist/cjs/components/Flow/Flow.styles.cjs.map +1 -1
- package/dist/cjs/components/Flow/FlowContext/FlowContext.cjs +10 -7
- package/dist/cjs/components/Flow/FlowContext/FlowContext.cjs.map +1 -1
- package/dist/cjs/components/Flow/FlowContext/NodeMetaContext.cjs +11 -6
- package/dist/cjs/components/Flow/FlowContext/NodeMetaContext.cjs.map +1 -1
- package/dist/cjs/components/Flow/Minimap/Minimap.cjs +12 -5
- package/dist/cjs/components/Flow/Minimap/Minimap.cjs.map +1 -1
- package/dist/cjs/components/Flow/Minimap/Minimap.styles.cjs +2 -7
- package/dist/cjs/components/Flow/Minimap/Minimap.styles.cjs.map +1 -1
- package/dist/cjs/components/Flow/Node/BaseNode.cjs +139 -105
- package/dist/cjs/components/Flow/Node/BaseNode.cjs.map +1 -1
- package/dist/cjs/components/Flow/Node/BaseNode.styles.cjs +1 -4
- package/dist/cjs/components/Flow/Node/BaseNode.styles.cjs.map +1 -1
- package/dist/cjs/components/Flow/Node/Node.cjs +65 -30
- package/dist/cjs/components/Flow/Node/Node.cjs.map +1 -1
- package/dist/cjs/components/Flow/Node/Node.styles.cjs +7 -5
- package/dist/cjs/components/Flow/Node/Node.styles.cjs.map +1 -1
- package/dist/cjs/components/Flow/Node/Parameters/ParamRenderer.cjs +1 -5
- package/dist/cjs/components/Flow/Node/Parameters/ParamRenderer.cjs.map +1 -1
- package/dist/cjs/components/Flow/Node/Parameters/Select.cjs +9 -18
- package/dist/cjs/components/Flow/Node/Parameters/Select.cjs.map +1 -1
- package/dist/cjs/components/Flow/Node/Parameters/Text.cjs +3 -13
- package/dist/cjs/components/Flow/Node/Parameters/Text.cjs.map +1 -1
- package/dist/cjs/components/Flow/Sidebar/Sidebar.cjs +78 -39
- package/dist/cjs/components/Flow/Sidebar/Sidebar.cjs.map +1 -1
- package/dist/cjs/components/Flow/Sidebar/Sidebar.styles.cjs +4 -13
- package/dist/cjs/components/Flow/Sidebar/Sidebar.styles.cjs.map +1 -1
- package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs +28 -16
- package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs.map +1 -1
- package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.cjs +28 -30
- package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.cjs.map +1 -1
- package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs +13 -8
- package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs.map +1 -1
- package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs +27 -18
- package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs.map +1 -1
- package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.cjs +17 -19
- package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.cjs.map +1 -1
- package/dist/cjs/components/Flow/Sidebar/utils.cjs.map +1 -1
- package/dist/cjs/components/Flow/base.cjs +406 -1
- package/dist/cjs/components/Flow/base.cjs.map +1 -1
- package/dist/cjs/components/Flow/hooks/useFlowContext.cjs.map +1 -1
- package/dist/cjs/components/Flow/hooks/useFlowNode.cjs +22 -7
- package/dist/cjs/components/Flow/hooks/useFlowNode.cjs.map +1 -1
- package/dist/cjs/components/Flow/hooks/useFlowNodeMeta.cjs +1 -3
- package/dist/cjs/components/Flow/hooks/useFlowNodeMeta.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/DefaultNavigation/DefaultNavigation.cjs +27 -30
- package/dist/cjs/components/StepNavigation/DefaultNavigation/DefaultNavigation.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/DefaultNavigation/Step/Step.cjs +45 -9
- package/dist/cjs/components/StepNavigation/DefaultNavigation/Step/Step.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/DefaultNavigation/Step/Step.styles.cjs +2 -7
- package/dist/cjs/components/StepNavigation/DefaultNavigation/Step/Step.styles.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/DefaultNavigation/utils.cjs +5 -20
- package/dist/cjs/components/StepNavigation/DefaultNavigation/utils.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/SimpleNavigation/Dot/Dot.cjs +27 -15
- package/dist/cjs/components/StepNavigation/SimpleNavigation/Dot/Dot.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.cjs +2 -8
- package/dist/cjs/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/SimpleNavigation/SimpleNavigation.cjs +22 -26
- package/dist/cjs/components/StepNavigation/SimpleNavigation/SimpleNavigation.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/SimpleNavigation/utils.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/StepNavigation.cjs +131 -92
- package/dist/cjs/components/StepNavigation/StepNavigation.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/StepNavigation.styles.cjs +1 -4
- package/dist/cjs/components/StepNavigation/StepNavigation.styles.cjs.map +1 -1
- package/dist/cjs/components/StepNavigation/utils.cjs.map +1 -1
- package/dist/cjs/components/Wizard/Wizard.cjs +65 -30
- package/dist/cjs/components/Wizard/Wizard.cjs.map +1 -1
- package/dist/cjs/components/Wizard/Wizard.styles.cjs +1 -4
- package/dist/cjs/components/Wizard/Wizard.styles.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardActions/WizardActions.cjs +72 -27
- package/dist/cjs/components/Wizard/WizardActions/WizardActions.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardActions/WizardActions.styles.cjs +1 -4
- package/dist/cjs/components/Wizard/WizardActions/WizardActions.styles.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContainer/WizardContainer.cjs +16 -7
- package/dist/cjs/components/Wizard/WizardContainer/WizardContainer.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContainer/WizardContainer.styles.cjs +13 -13
- package/dist/cjs/components/Wizard/WizardContainer/WizardContainer.styles.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContent/LoadingContainer.cjs +24 -17
- package/dist/cjs/components/Wizard/WizardContent/LoadingContainer.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContent/LoadingContainer.styles.cjs +17 -18
- package/dist/cjs/components/Wizard/WizardContent/LoadingContainer.styles.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContent/WizardContent.cjs +70 -61
- package/dist/cjs/components/Wizard/WizardContent/WizardContent.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContent/WizardContent.styles.cjs +1 -4
- package/dist/cjs/components/Wizard/WizardContent/WizardContent.styles.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardContext/WizardContext.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardTitle/WizardTitle.cjs +53 -31
- package/dist/cjs/components/Wizard/WizardTitle/WizardTitle.cjs.map +1 -1
- package/dist/cjs/components/Wizard/WizardTitle/WizardTitle.styles.cjs +1 -4
- package/dist/cjs/components/Wizard/WizardTitle/WizardTitle.styles.cjs.map +1 -1
- package/dist/esm/components/Dashboard/Dashboard.js +14 -15
- package/dist/esm/components/Dashboard/Dashboard.js.map +1 -1
- package/dist/esm/components/Dashboard/Dashboard.styles.js +187 -5
- package/dist/esm/components/Dashboard/Dashboard.styles.js.map +1 -1
- package/dist/esm/components/Flow/Background/Background.js.map +1 -1
- package/dist/esm/components/Flow/Controls/Controls.js +34 -13
- package/dist/esm/components/Flow/Controls/Controls.js.map +1 -1
- package/dist/esm/components/Flow/DroppableFlow.js +101 -66
- package/dist/esm/components/Flow/DroppableFlow.js.map +1 -1
- package/dist/esm/components/Flow/Empty/Empty.js +2 -8
- package/dist/esm/components/Flow/Empty/Empty.js.map +1 -1
- package/dist/esm/components/Flow/Empty/Empty.styles.js +1 -4
- package/dist/esm/components/Flow/Empty/Empty.styles.js.map +1 -1
- package/dist/esm/components/Flow/Flow.js +24 -5
- package/dist/esm/components/Flow/Flow.js.map +1 -1
- package/dist/esm/components/Flow/Flow.styles.js +1 -4
- package/dist/esm/components/Flow/Flow.styles.js.map +1 -1
- package/dist/esm/components/Flow/FlowContext/FlowContext.js +10 -7
- package/dist/esm/components/Flow/FlowContext/FlowContext.js.map +1 -1
- package/dist/esm/components/Flow/FlowContext/NodeMetaContext.js +11 -6
- package/dist/esm/components/Flow/FlowContext/NodeMetaContext.js.map +1 -1
- package/dist/esm/components/Flow/Minimap/Minimap.js +12 -5
- package/dist/esm/components/Flow/Minimap/Minimap.js.map +1 -1
- package/dist/esm/components/Flow/Minimap/Minimap.styles.js +2 -7
- package/dist/esm/components/Flow/Minimap/Minimap.styles.js.map +1 -1
- package/dist/esm/components/Flow/Node/BaseNode.js +139 -105
- package/dist/esm/components/Flow/Node/BaseNode.js.map +1 -1
- package/dist/esm/components/Flow/Node/BaseNode.styles.js +1 -4
- package/dist/esm/components/Flow/Node/BaseNode.styles.js.map +1 -1
- package/dist/esm/components/Flow/Node/Node.js +65 -30
- package/dist/esm/components/Flow/Node/Node.js.map +1 -1
- package/dist/esm/components/Flow/Node/Node.styles.js +7 -5
- package/dist/esm/components/Flow/Node/Node.styles.js.map +1 -1
- package/dist/esm/components/Flow/Node/Parameters/ParamRenderer.js +1 -5
- package/dist/esm/components/Flow/Node/Parameters/ParamRenderer.js.map +1 -1
- package/dist/esm/components/Flow/Node/Parameters/Select.js +9 -18
- package/dist/esm/components/Flow/Node/Parameters/Select.js.map +1 -1
- package/dist/esm/components/Flow/Node/Parameters/Text.js +3 -13
- package/dist/esm/components/Flow/Node/Parameters/Text.js.map +1 -1
- package/dist/esm/components/Flow/Sidebar/Sidebar.js +78 -39
- package/dist/esm/components/Flow/Sidebar/Sidebar.js.map +1 -1
- package/dist/esm/components/Flow/Sidebar/Sidebar.styles.js +4 -13
- package/dist/esm/components/Flow/Sidebar/Sidebar.styles.js.map +1 -1
- package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroup.js +28 -16
- package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroup.js.map +1 -1
- package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.js +28 -30
- package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.js.map +1 -1
- package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js +13 -8
- package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js.map +1 -1
- package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js +27 -18
- package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js.map +1 -1
- package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js +17 -19
- package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js.map +1 -1
- package/dist/esm/components/Flow/Sidebar/utils.js.map +1 -1
- package/dist/esm/components/Flow/base.js +406 -1
- package/dist/esm/components/Flow/base.js.map +1 -1
- package/dist/esm/components/Flow/hooks/useFlowContext.js.map +1 -1
- package/dist/esm/components/Flow/hooks/useFlowNode.js +22 -7
- package/dist/esm/components/Flow/hooks/useFlowNode.js.map +1 -1
- package/dist/esm/components/Flow/hooks/useFlowNodeMeta.js +1 -3
- package/dist/esm/components/Flow/hooks/useFlowNodeMeta.js.map +1 -1
- package/dist/esm/components/StepNavigation/DefaultNavigation/DefaultNavigation.js +27 -30
- package/dist/esm/components/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -1
- package/dist/esm/components/StepNavigation/DefaultNavigation/Step/Step.js +45 -9
- package/dist/esm/components/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -1
- package/dist/esm/components/StepNavigation/DefaultNavigation/Step/Step.styles.js +2 -7
- package/dist/esm/components/StepNavigation/DefaultNavigation/Step/Step.styles.js.map +1 -1
- package/dist/esm/components/StepNavigation/DefaultNavigation/utils.js +5 -20
- package/dist/esm/components/StepNavigation/DefaultNavigation/utils.js.map +1 -1
- package/dist/esm/components/StepNavigation/SimpleNavigation/Dot/Dot.js +27 -15
- package/dist/esm/components/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/esm/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.js +2 -8
- package/dist/esm/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.js.map +1 -1
- package/dist/esm/components/StepNavigation/SimpleNavigation/SimpleNavigation.js +22 -26
- package/dist/esm/components/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -1
- package/dist/esm/components/StepNavigation/SimpleNavigation/utils.js.map +1 -1
- package/dist/esm/components/StepNavigation/StepNavigation.js +130 -91
- package/dist/esm/components/StepNavigation/StepNavigation.js.map +1 -1
- package/dist/esm/components/StepNavigation/StepNavigation.styles.js +1 -4
- package/dist/esm/components/StepNavigation/StepNavigation.styles.js.map +1 -1
- package/dist/esm/components/StepNavigation/utils.js.map +1 -1
- package/dist/esm/components/Wizard/Wizard.js +65 -30
- package/dist/esm/components/Wizard/Wizard.js.map +1 -1
- package/dist/esm/components/Wizard/Wizard.styles.js +1 -4
- package/dist/esm/components/Wizard/Wizard.styles.js.map +1 -1
- package/dist/esm/components/Wizard/WizardActions/WizardActions.js +72 -27
- package/dist/esm/components/Wizard/WizardActions/WizardActions.js.map +1 -1
- package/dist/esm/components/Wizard/WizardActions/WizardActions.styles.js +1 -4
- package/dist/esm/components/Wizard/WizardActions/WizardActions.styles.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContainer/WizardContainer.js +16 -7
- package/dist/esm/components/Wizard/WizardContainer/WizardContainer.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContainer/WizardContainer.styles.js +13 -13
- package/dist/esm/components/Wizard/WizardContainer/WizardContainer.styles.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContent/LoadingContainer.js +24 -17
- package/dist/esm/components/Wizard/WizardContent/LoadingContainer.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContent/LoadingContainer.styles.js +18 -19
- package/dist/esm/components/Wizard/WizardContent/LoadingContainer.styles.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContent/WizardContent.js +70 -61
- package/dist/esm/components/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContent/WizardContent.styles.js +1 -4
- package/dist/esm/components/Wizard/WizardContent/WizardContent.styles.js.map +1 -1
- package/dist/esm/components/Wizard/WizardContext/WizardContext.js.map +1 -1
- package/dist/esm/components/Wizard/WizardTitle/WizardTitle.js +53 -31
- package/dist/esm/components/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/dist/esm/components/Wizard/WizardTitle/WizardTitle.styles.js +1 -4
- package/dist/esm/components/Wizard/WizardTitle/WizardTitle.styles.js.map +1 -1
- package/package.json +11 -11
|
@@ -19,24 +19,17 @@ const HvWizardActions = ({
|
|
|
19
19
|
submit: "Submit"
|
|
20
20
|
}
|
|
21
21
|
}) => {
|
|
22
|
-
const {
|
|
23
|
-
|
|
24
|
-
css,
|
|
25
|
-
cx
|
|
26
|
-
} = useClasses(classesProp);
|
|
27
|
-
const {
|
|
28
|
-
context,
|
|
29
|
-
setContext,
|
|
30
|
-
tab,
|
|
31
|
-
setTab
|
|
32
|
-
} = useContext(HvWizardContext);
|
|
22
|
+
const { classes, css, cx } = useClasses(classesProp);
|
|
23
|
+
const { context, setContext, tab, setTab } = useContext(HvWizardContext);
|
|
33
24
|
const [pages, setPages] = useState(0);
|
|
34
25
|
const [canSubmit, setCanSubmit] = useState(false);
|
|
35
26
|
useEffect(() => {
|
|
36
27
|
const contextEntries = Object.entries(context);
|
|
37
28
|
if (contextEntries.length) {
|
|
38
29
|
setPages(contextEntries.length);
|
|
39
|
-
const validWizard = Object.entries(context).every(
|
|
30
|
+
const validWizard = Object.entries(context).every(
|
|
31
|
+
([, value]) => value?.valid
|
|
32
|
+
);
|
|
40
33
|
if (validWizard !== canSubmit) {
|
|
41
34
|
setCanSubmit(validWizard);
|
|
42
35
|
}
|
|
@@ -45,25 +38,77 @@ const HvWizardActions = ({
|
|
|
45
38
|
const lastPage = pages - 1;
|
|
46
39
|
const isLastPage = tab >= lastPage;
|
|
47
40
|
const handleSkip = useCallback(() => {
|
|
48
|
-
setContext(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
41
|
+
setContext(
|
|
42
|
+
(c) => Object.entries(c).reduce(
|
|
43
|
+
(acc, [key, child]) => ({
|
|
44
|
+
...acc,
|
|
45
|
+
[+key]: {
|
|
46
|
+
...child,
|
|
47
|
+
valid: child?.valid !== false
|
|
48
|
+
}
|
|
49
|
+
}),
|
|
50
|
+
{}
|
|
51
|
+
)
|
|
52
|
+
);
|
|
55
53
|
setTab(lastPage);
|
|
56
54
|
}, [setTab, lastPage, setContext]);
|
|
57
|
-
const handleSubmitInternal = useCallback(
|
|
55
|
+
const handleSubmitInternal = useCallback(
|
|
56
|
+
() => handleSubmit(context),
|
|
57
|
+
[handleSubmit, context]
|
|
58
|
+
);
|
|
58
59
|
return /* @__PURE__ */ jsxs(HvDialogActions, { className: classes.actionsContainer, children: [
|
|
59
|
-
/* @__PURE__ */ jsx(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
/* @__PURE__ */ jsx(
|
|
61
|
+
HvButton,
|
|
62
|
+
{
|
|
63
|
+
variant: "secondaryGhost",
|
|
64
|
+
onClick: handleClose,
|
|
65
|
+
className: classes.buttonWidth,
|
|
66
|
+
children: `${labels.cancel ?? "Cancel"}`
|
|
67
|
+
}
|
|
68
|
+
),
|
|
69
|
+
skippable && /* @__PURE__ */ jsx(
|
|
70
|
+
HvButton,
|
|
71
|
+
{
|
|
72
|
+
variant: "secondaryGhost",
|
|
73
|
+
disabled: isLastPage,
|
|
74
|
+
className: classes.buttonWidth,
|
|
75
|
+
onClick: handleSkip,
|
|
76
|
+
children: `${labels.skip ?? "Skip"}`
|
|
77
|
+
}
|
|
78
|
+
),
|
|
79
|
+
/* @__PURE__ */ jsx("div", { "aria-hidden": true, className: css({ flex: 1 }), children: " " }),
|
|
64
80
|
/* @__PURE__ */ jsxs("div", { className: classes.buttonsContainer, children: [
|
|
65
|
-
/* @__PURE__ */ jsx(
|
|
66
|
-
|
|
81
|
+
/* @__PURE__ */ jsx(
|
|
82
|
+
HvButton,
|
|
83
|
+
{
|
|
84
|
+
variant: "secondaryGhost",
|
|
85
|
+
className: classes.buttonWidth,
|
|
86
|
+
disabled: tab <= 0,
|
|
87
|
+
onClick: () => setTab((t) => t - 1),
|
|
88
|
+
startIcon: /* @__PURE__ */ jsx(Backwards, {}),
|
|
89
|
+
children: `${labels.previous ?? "Previous"}`
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
isLastPage ? /* @__PURE__ */ jsx(
|
|
93
|
+
HvButton,
|
|
94
|
+
{
|
|
95
|
+
variant: "primary",
|
|
96
|
+
className: classes.buttonWidth,
|
|
97
|
+
disabled: loading || !canSubmit,
|
|
98
|
+
onClick: handleSubmitInternal,
|
|
99
|
+
children: `${labels.submit ?? "Submit"}`
|
|
100
|
+
}
|
|
101
|
+
) : /* @__PURE__ */ jsx(
|
|
102
|
+
HvButton,
|
|
103
|
+
{
|
|
104
|
+
variant: "secondaryGhost",
|
|
105
|
+
className: cx(classes.buttonWidth, classes.buttonSpacing),
|
|
106
|
+
onClick: () => setTab((t) => t + 1),
|
|
107
|
+
disabled: !skippable && !context?.[tab]?.valid,
|
|
108
|
+
endIcon: /* @__PURE__ */ jsx(Forwards, {}),
|
|
109
|
+
children: `${labels.next ?? "Next"}`
|
|
110
|
+
}
|
|
111
|
+
)
|
|
67
112
|
] })
|
|
68
113
|
] });
|
|
69
114
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardActions.js","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvDialogActions,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardActions.styles\";\n\nexport { staticClasses as wizardActionsClasses };\n\nexport type HvWizardActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n /** Function to handle the cancel button. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Function to handle the submit button. Also sends the current context state. */\n handleSubmit: (context: any) => void;\n /** An object containing all the labels for the wizard actions component. */\n labels?: {\n /** Cancel button label. */\n cancel?: string;\n /** Skip button label. */\n skip?: string;\n /** Previous button label. */\n previous?: string;\n /** Next button label. */\n next?: string;\n /** Submit button label. */\n submit?: string;\n };\n /** Whether the submit button is disabled. */\n loading?: boolean;\n /** Enables the skip button. */\n skippable?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardActionsClasses;\n}\n\nexport const HvWizardActions = ({\n classes: classesProp,\n handleClose,\n handleSubmit,\n loading = false,\n skippable = false,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n },\n}: HvWizardActionsProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n const [pages, setPages] = useState(0);\n const [canSubmit, setCanSubmit] = useState(false);\n\n useEffect(() => {\n const contextEntries = Object.entries(context);\n if (contextEntries.length) {\n setPages(contextEntries.length);\n\n const validWizard = Object.entries(context).every(\n ([, value]) => value?.valid\n );\n if (validWizard !== canSubmit) {\n setCanSubmit(validWizard);\n }\n }\n }, [context, canSubmit, setCanSubmit, setPages]);\n\n const lastPage = pages - 1;\n const isLastPage = tab >= lastPage;\n\n const handleSkip = useCallback(() => {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n valid: child?.valid !== false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(lastPage);\n }, [setTab, lastPage, setContext]);\n\n const handleSubmitInternal = useCallback(\n () => handleSubmit(context),\n [handleSubmit, context]\n );\n\n return (\n <HvDialogActions className={classes.actionsContainer}>\n <HvButton\n variant=\"secondaryGhost\"\n onClick={handleClose}\n className={classes.buttonWidth}\n >\n {`${labels.cancel ?? \"Cancel\"}`}\n </HvButton>\n {skippable && (\n <HvButton\n variant=\"secondaryGhost\"\n disabled={isLastPage}\n className={classes.buttonWidth}\n onClick={handleSkip}\n >\n {`${labels.skip ?? \"Skip\"}`}\n </HvButton>\n )}\n <div aria-hidden className={css({ flex: 1 })}>\n \n </div>\n <div className={classes.buttonsContainer}>\n <HvButton\n variant=\"secondaryGhost\"\n className={classes.buttonWidth}\n disabled={tab <= 0}\n onClick={() => setTab((t) => t - 1)}\n startIcon={<Backwards />}\n >\n {`${labels.previous ?? \"Previous\"}`}\n </HvButton>\n {isLastPage ? (\n <HvButton\n variant=\"primary\"\n className={classes.buttonWidth}\n disabled={loading || !canSubmit}\n onClick={handleSubmitInternal}\n >\n {`${labels.submit ?? \"Submit\"}`}\n </HvButton>\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(classes.buttonWidth, classes.buttonSpacing)}\n onClick={() => setTab((t) => t + 1)}\n disabled={!skippable && !context?.[tab]?.valid}\n endIcon={<Forwards />}\n >\n {`${labels.next ?? \"Next\"}`}\n </HvButton>\n )}\n </div>\n </HvDialogActions>\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"WizardActions.js","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvDialogActions,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardActions.styles\";\n\nexport { staticClasses as wizardActionsClasses };\n\nexport type HvWizardActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n /** Function to handle the cancel button. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** Function to handle the submit button. Also sends the current context state. */\n handleSubmit: (context: any) => void;\n /** An object containing all the labels for the wizard actions component. */\n labels?: {\n /** Cancel button label. */\n cancel?: string;\n /** Skip button label. */\n skip?: string;\n /** Previous button label. */\n previous?: string;\n /** Next button label. */\n next?: string;\n /** Submit button label. */\n submit?: string;\n };\n /** Whether the submit button is disabled. */\n loading?: boolean;\n /** Enables the skip button. */\n skippable?: boolean;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardActionsClasses;\n}\n\nexport const HvWizardActions = ({\n classes: classesProp,\n handleClose,\n handleSubmit,\n loading = false,\n skippable = false,\n labels = {\n cancel: \"Cancel\",\n next: \"Next\",\n previous: \"Previous\",\n skip: \"Skip\",\n submit: \"Submit\",\n },\n}: HvWizardActionsProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n const [pages, setPages] = useState(0);\n const [canSubmit, setCanSubmit] = useState(false);\n\n useEffect(() => {\n const contextEntries = Object.entries(context);\n if (contextEntries.length) {\n setPages(contextEntries.length);\n\n const validWizard = Object.entries(context).every(\n ([, value]) => value?.valid\n );\n if (validWizard !== canSubmit) {\n setCanSubmit(validWizard);\n }\n }\n }, [context, canSubmit, setCanSubmit, setPages]);\n\n const lastPage = pages - 1;\n const isLastPage = tab >= lastPage;\n\n const handleSkip = useCallback(() => {\n setContext((c) =>\n Object.entries(c).reduce(\n (acc, [key, child]) => ({\n ...acc,\n [+key]: {\n ...child,\n valid: child?.valid !== false,\n },\n }),\n {} as HvWizardTabs\n )\n );\n setTab(lastPage);\n }, [setTab, lastPage, setContext]);\n\n const handleSubmitInternal = useCallback(\n () => handleSubmit(context),\n [handleSubmit, context]\n );\n\n return (\n <HvDialogActions className={classes.actionsContainer}>\n <HvButton\n variant=\"secondaryGhost\"\n onClick={handleClose}\n className={classes.buttonWidth}\n >\n {`${labels.cancel ?? \"Cancel\"}`}\n </HvButton>\n {skippable && (\n <HvButton\n variant=\"secondaryGhost\"\n disabled={isLastPage}\n className={classes.buttonWidth}\n onClick={handleSkip}\n >\n {`${labels.skip ?? \"Skip\"}`}\n </HvButton>\n )}\n <div aria-hidden className={css({ flex: 1 })}>\n \n </div>\n <div className={classes.buttonsContainer}>\n <HvButton\n variant=\"secondaryGhost\"\n className={classes.buttonWidth}\n disabled={tab <= 0}\n onClick={() => setTab((t) => t - 1)}\n startIcon={<Backwards />}\n >\n {`${labels.previous ?? \"Previous\"}`}\n </HvButton>\n {isLastPage ? (\n <HvButton\n variant=\"primary\"\n className={classes.buttonWidth}\n disabled={loading || !canSubmit}\n onClick={handleSubmitInternal}\n >\n {`${labels.submit ?? \"Submit\"}`}\n </HvButton>\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n className={cx(classes.buttonWidth, classes.buttonSpacing)}\n onClick={() => setTab((t) => t + 1)}\n disabled={!skippable && !context?.[tab]?.valid}\n endIcon={<Forwards />}\n >\n {`${labels.next ?? \"Next\"}`}\n </HvButton>\n )}\n </div>\n </HvDialogActions>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
2
|
import { createClasses } from "@hitachivantara/uikit-react-core";
|
|
3
|
-
const {
|
|
4
|
-
staticClasses,
|
|
5
|
-
useClasses
|
|
6
|
-
} = createClasses("HvWizardActions", {
|
|
3
|
+
const { staticClasses, useClasses } = createClasses("HvWizardActions", {
|
|
7
4
|
actionsContainer: {},
|
|
8
5
|
buttonWidth: {
|
|
9
6
|
width: 120,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardActions.styles.js","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardActions\", {\n actionsContainer: {},\n buttonWidth: {\n width: 120,\n \"& span\": {\n whiteSpace: \"normal\",\n lineHeight: theme.lineHeights.sm,\n },\n },\n buttonsContainer: {\n display: \"flex\",\n alignItems: \"center\",\n gap: theme.space.xs,\n },\n buttonSpacing: {},\n});\n"],"names":[
|
|
1
|
+
{"version":3,"file":"WizardActions.styles.js","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardActions\", {\n actionsContainer: {},\n buttonWidth: {\n width: 120,\n \"& span\": {\n whiteSpace: \"normal\",\n lineHeight: theme.lineHeights.sm,\n },\n },\n buttonsContainer: {\n display: \"flex\",\n alignItems: \"center\",\n gap: theme.space.xs,\n },\n buttonSpacing: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,kBAAkB,CAAC;AAAA,EACnB,aAAa;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,MACR,YAAY;AAAA,MACZ,YAAY,MAAM,YAAY;AAAA,IAChC;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,eAAe,CAAC;AAClB,CAAC;"}
|
|
@@ -11,13 +11,22 @@ const HvWizardContainer = (props) => {
|
|
|
11
11
|
open,
|
|
12
12
|
...others
|
|
13
13
|
} = useDefaultProps("HvWizardContainer", props);
|
|
14
|
-
const {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
const { classes } = useClasses(classesProp);
|
|
15
|
+
return /* @__PURE__ */ jsx(
|
|
16
|
+
HvDialog,
|
|
17
|
+
{
|
|
18
|
+
classes: {
|
|
19
|
+
closeButton: classes.closeButton,
|
|
20
|
+
paper: classes.paper
|
|
21
|
+
},
|
|
22
|
+
className: classes.root,
|
|
23
|
+
open,
|
|
24
|
+
onClose: handleClose,
|
|
25
|
+
maxWidth: "lg",
|
|
26
|
+
...others,
|
|
27
|
+
children
|
|
28
|
+
}
|
|
29
|
+
);
|
|
21
30
|
};
|
|
22
31
|
export {
|
|
23
32
|
HvWizardContainer,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContainer.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = (props: HvWizardContainerProps) => {\n const {\n classes: classesProp,\n className,\n children,\n handleClose,\n open,\n ...others\n } = useDefaultProps(\"HvWizardContainer\", props);\n const { classes } = useClasses(classesProp);\n\n return (\n <HvDialog\n classes={{\n closeButton: classes.closeButton,\n paper: classes.paper,\n }}\n className={classes.root}\n open={open}\n onClose={handleClose}\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"WizardContainer.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialog,\n HvDialogProps,\n useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n extends Omit<HvBaseProps, \"onClose\">,\n Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n /** Current state of the Wizard. */\n open: boolean;\n /** Function executed on close. */\n handleClose: (\n event: React.SyntheticEvent,\n reason?: \"escapeKeyDown\" | \"backdropClick\"\n ) => void;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = (props: HvWizardContainerProps) => {\n const {\n classes: classesProp,\n className,\n children,\n handleClose,\n open,\n ...others\n } = useDefaultProps(\"HvWizardContainer\", props);\n const { classes } = useClasses(classesProp);\n\n return (\n <HvDialog\n classes={{\n closeButton: classes.closeButton,\n paper: classes.paper,\n }}\n className={classes.root}\n open={open}\n onClose={handleClose}\n maxWidth=\"lg\"\n {...others}\n >\n {children}\n </HvDialog>\n );\n};\n"],"names":[],"mappings":";;;;AA8Ba,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAC9C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,aAAa,QAAQ;AAAA,QACrB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB;AAAA,MACA,SAAS;AAAA,MACT,UAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { createClasses } from "@hitachivantara/uikit-react-core";
|
|
2
|
-
const {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
const { staticClasses, useClasses } = createClasses(
|
|
3
|
+
"HvWizardContainer",
|
|
4
|
+
{
|
|
5
|
+
root: {},
|
|
6
|
+
paper: {
|
|
7
|
+
width: "80%",
|
|
8
|
+
maxWidth: "80%",
|
|
9
|
+
maxHeight: "calc(100% - (2 * 80px))"
|
|
10
|
+
},
|
|
11
|
+
closeButton: {
|
|
12
|
+
display: "none"
|
|
13
|
+
}
|
|
14
14
|
}
|
|
15
|
-
|
|
15
|
+
);
|
|
16
16
|
export {
|
|
17
17
|
staticClasses,
|
|
18
18
|
useClasses
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContainer.styles.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvWizardContainer\",\n {\n root: {},\n paper: {\n width: \"80%\",\n maxWidth: \"80%\",\n maxHeight: \"calc(100% - (2 * 80px))\",\n },\n closeButton: {\n display: \"none\",\n },\n }\n);\n"],"names":[
|
|
1
|
+
{"version":3,"file":"WizardContainer.styles.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvWizardContainer\",\n {\n root: {},\n paper: {\n width: \"80%\",\n maxWidth: \"80%\",\n maxHeight: \"calc(100% - (2 * 80px))\",\n },\n closeButton: {\n display: \"none\",\n },\n }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,EACF;AACF;"}
|
|
@@ -7,24 +7,31 @@ const LoadingContainer = ({
|
|
|
7
7
|
classes: classesProp,
|
|
8
8
|
...others
|
|
9
9
|
}) => {
|
|
10
|
-
const {
|
|
11
|
-
classes,
|
|
12
|
-
cx
|
|
13
|
-
} = useClasses(classesProp);
|
|
10
|
+
const { classes, cx } = useClasses(classesProp);
|
|
14
11
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
15
|
-
/* @__PURE__ */ jsx(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
12
|
+
/* @__PURE__ */ jsx(
|
|
13
|
+
"div",
|
|
14
|
+
{
|
|
15
|
+
style: {
|
|
16
|
+
top: 0,
|
|
17
|
+
left: 0,
|
|
18
|
+
height: "100%",
|
|
19
|
+
width: "100%"
|
|
20
|
+
},
|
|
21
|
+
className: cx(classes.overlay, { [classes.blur]: !hidden }),
|
|
22
|
+
children: /* @__PURE__ */ jsx(
|
|
23
|
+
HvLoading,
|
|
24
|
+
{
|
|
25
|
+
classes: {
|
|
26
|
+
root: classes.loading
|
|
27
|
+
},
|
|
28
|
+
hidden,
|
|
29
|
+
...others
|
|
30
|
+
}
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
/* @__PURE__ */ jsx("div", { style: { display: "flow-root" }, children })
|
|
28
35
|
] });
|
|
29
36
|
};
|
|
30
37
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingContainer.js","sources":["../../../../../src/components/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import {\n HvLoading,\n HvLoadingProps,\n ExtractNames,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./LoadingContainer.styles\";\n\ntype HvWizardLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\ninterface LoadingContainerProps extends Omit<HvLoadingProps, \"classes\"> {\n classes?: HvWizardLoadingContainerClasses;\n}\n\nexport const LoadingContainer = ({\n children,\n hidden,\n classes: classesProp,\n ...others\n}: LoadingContainerProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <>\n <div\n style={{\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n }}\n className={cx(classes.overlay, { [classes.blur]: !hidden })}\n >\n <HvLoading\n classes={{\n root: classes.loading,\n }}\n hidden={hidden}\n {...others}\n />\n </div>\n <div style={{ display: \"flow-root\" }}>{children}</div>\n </>\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"LoadingContainer.js","sources":["../../../../../src/components/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import {\n HvLoading,\n HvLoadingProps,\n ExtractNames,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./LoadingContainer.styles\";\n\ntype HvWizardLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\ninterface LoadingContainerProps extends Omit<HvLoadingProps, \"classes\"> {\n classes?: HvWizardLoadingContainerClasses;\n}\n\nexport const LoadingContainer = ({\n children,\n hidden,\n classes: classesProp,\n ...others\n}: LoadingContainerProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <>\n <div\n style={{\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n }}\n className={cx(classes.overlay, { [classes.blur]: !hidden })}\n >\n <HvLoading\n classes={{\n root: classes.loading,\n }}\n hidden={hidden}\n {...others}\n />\n </div>\n <div style={{ display: \"flow-root\" }}>{children}</div>\n </>\n );\n};\n"],"names":[],"mappings":";;;AAcO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAA6B;AAC3B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QACT;AAAA,QACA,WAAW,GAAG,QAAQ,SAAS,EAAE,CAAC,QAAQ,IAAI,GAAG,CAAC,QAAQ;AAAA,QAE1D,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,IACF;AAAA,wBACC,OAAI,EAAA,OAAO,EAAE,SAAS,YAAA,GAAgB,UAAS;AAAA,EAClD,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,23 +1,22 @@
|
|
|
1
|
-
import { createClasses,
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
zIndex: theme.zIndices.modal
|
|
1
|
+
import { createClasses, theme } from "@hitachivantara/uikit-react-core";
|
|
2
|
+
const { staticClasses, useClasses } = createClasses(
|
|
3
|
+
"HvWizard-LoadingContainer",
|
|
4
|
+
{
|
|
5
|
+
loading: {
|
|
6
|
+
width: "100%",
|
|
7
|
+
height: "100%"
|
|
8
|
+
},
|
|
9
|
+
overlay: {
|
|
10
|
+
position: "absolute",
|
|
11
|
+
transition: "background-Color .2s ease",
|
|
12
|
+
zIndex: -1
|
|
13
|
+
},
|
|
14
|
+
blur: {
|
|
15
|
+
backgroundColor: theme.alpha("atmo2", 0.8),
|
|
16
|
+
zIndex: theme.zIndices.modal
|
|
17
|
+
}
|
|
19
18
|
}
|
|
20
|
-
|
|
19
|
+
);
|
|
21
20
|
export {
|
|
22
21
|
staticClasses,
|
|
23
22
|
useClasses
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../../../src/components/Wizard/WizardContent/LoadingContainer.styles.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../../../src/components/Wizard/WizardContent/LoadingContainer.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvWizard-LoadingContainer\",\n {\n loading: {\n width: \"100%\",\n height: \"100%\",\n },\n overlay: {\n position: \"absolute\",\n transition: \"background-Color .2s ease\",\n zIndex: -1,\n },\n blur: {\n backgroundColor: theme.alpha(\"atmo2\", 0.8),\n zIndex: theme.zIndices.modal,\n },\n }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,SAAS;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACJ,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,MACzC,QAAQ,MAAM,SAAS;AAAA,IACzB;AAAA,EACF;AACF;"}
|
|
@@ -15,35 +15,22 @@ const HvWizardContent = ({
|
|
|
15
15
|
children,
|
|
16
16
|
summaryContent
|
|
17
17
|
}) => {
|
|
18
|
-
const {
|
|
19
|
-
|
|
20
|
-
cx
|
|
21
|
-
} = useClasses(classesProp);
|
|
22
|
-
const {
|
|
23
|
-
context,
|
|
24
|
-
setContext,
|
|
25
|
-
summary,
|
|
26
|
-
tab
|
|
27
|
-
} = useContext(HvWizardContext);
|
|
18
|
+
const { classes, cx } = useClasses(classesProp);
|
|
19
|
+
const { context, setContext, summary, tab } = useContext(HvWizardContext);
|
|
28
20
|
const arrayChildren = React.Children.toArray(children);
|
|
29
|
-
const initialContext = arrayChildren.reduce(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
...child.props,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
};
|
|
41
|
-
}, {});
|
|
21
|
+
const initialContext = arrayChildren.reduce(
|
|
22
|
+
(acc, child, index) => {
|
|
23
|
+
const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
|
|
24
|
+
const valid = invalid ?? (index === 0 || null);
|
|
25
|
+
return {
|
|
26
|
+
...acc,
|
|
27
|
+
[index]: { ...child.props, form: {}, valid, touched: index === 0 }
|
|
28
|
+
};
|
|
29
|
+
},
|
|
30
|
+
{}
|
|
31
|
+
);
|
|
42
32
|
const summaryRef = useRef();
|
|
43
|
-
const resizedRef = useRef({
|
|
44
|
-
height: 0,
|
|
45
|
-
width: 0
|
|
46
|
-
});
|
|
33
|
+
const resizedRef = useRef({ height: 0, width: 0 });
|
|
47
34
|
const [containerRef, sizes] = useElementSize();
|
|
48
35
|
const [summaryHeight, setSummaryHeight] = useState(0);
|
|
49
36
|
const [summaryWidth, setSummaryWidth] = useState(0);
|
|
@@ -76,45 +63,67 @@ const HvWizardContent = ({
|
|
|
76
63
|
}, []);
|
|
77
64
|
useEffect(() => {
|
|
78
65
|
if (tab && !context[tab]?.touched) {
|
|
79
|
-
const updatedContext = Object.entries(context).reduce(
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
[key]: childState
|
|
89
|
-
}
|
|
90
|
-
|
|
66
|
+
const updatedContext = Object.entries(context).reduce(
|
|
67
|
+
(acc, [key, childState]) => ({
|
|
68
|
+
...acc,
|
|
69
|
+
...+key <= tab ? {
|
|
70
|
+
[key]: {
|
|
71
|
+
...childState,
|
|
72
|
+
touched: true,
|
|
73
|
+
valid: childState?.valid ?? true
|
|
74
|
+
}
|
|
75
|
+
} : { [key]: childState }
|
|
76
|
+
}),
|
|
77
|
+
{}
|
|
78
|
+
);
|
|
91
79
|
setContext(updatedContext);
|
|
92
80
|
}
|
|
93
81
|
}, [tab, context, setContext]);
|
|
94
82
|
const translateX = summaryWidth ? summaryWidth + 10 : 450;
|
|
95
|
-
return /* @__PURE__ */ jsxs(
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
summaryRef
|
|
83
|
+
return /* @__PURE__ */ jsxs(
|
|
84
|
+
"div",
|
|
85
|
+
{
|
|
86
|
+
className: classes.summaryRef,
|
|
87
|
+
ref: (el) => {
|
|
88
|
+
containerRef(el);
|
|
89
|
+
if (el) {
|
|
90
|
+
summaryRef.current = el;
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
children: [
|
|
94
|
+
summary !== null && /* @__PURE__ */ jsx("div", { className: classes.summarySticky, children: /* @__PURE__ */ jsx(
|
|
95
|
+
"div",
|
|
96
|
+
{
|
|
97
|
+
className: classes.summaryContainer,
|
|
98
|
+
style: {
|
|
99
|
+
left: summaryLeft,
|
|
100
|
+
width: summaryWidth,
|
|
101
|
+
height: summaryHeight,
|
|
102
|
+
transform: `translate(${summary ? 0 : translateX}px, 0)`
|
|
103
|
+
},
|
|
104
|
+
children: summaryContent
|
|
105
|
+
}
|
|
106
|
+
) }),
|
|
107
|
+
/* @__PURE__ */ jsx(
|
|
108
|
+
HvDialogContent,
|
|
109
|
+
{
|
|
110
|
+
className: cx(classes.contentContainer, {
|
|
111
|
+
[classes.fixedHeight]: fixedHeight
|
|
112
|
+
}),
|
|
113
|
+
indentContent: true,
|
|
114
|
+
children: /* @__PURE__ */ jsx(LoadingContainer, { hidden: !loading, children: React.Children.map(arrayChildren, (child, index) => {
|
|
115
|
+
if (index === tab) {
|
|
116
|
+
return React.cloneElement(child, {
|
|
117
|
+
tab
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
return null;
|
|
121
|
+
}) })
|
|
122
|
+
}
|
|
123
|
+
)
|
|
124
|
+
]
|
|
99
125
|
}
|
|
100
|
-
|
|
101
|
-
summary !== null && /* @__PURE__ */ jsx("div", { className: classes.summarySticky, children: /* @__PURE__ */ jsx("div", { className: classes.summaryContainer, style: {
|
|
102
|
-
left: summaryLeft,
|
|
103
|
-
width: summaryWidth,
|
|
104
|
-
height: summaryHeight,
|
|
105
|
-
transform: `translate(${summary ? 0 : translateX}px, 0)`
|
|
106
|
-
}, children: summaryContent }) }),
|
|
107
|
-
/* @__PURE__ */ jsx(HvDialogContent, { className: cx(classes.contentContainer, {
|
|
108
|
-
[classes.fixedHeight]: fixedHeight
|
|
109
|
-
}), indentContent: true, children: /* @__PURE__ */ jsx(LoadingContainer, { hidden: !loading, children: React.Children.map(arrayChildren, (child, index) => {
|
|
110
|
-
if (index === tab) {
|
|
111
|
-
return React.cloneElement(child, {
|
|
112
|
-
tab
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
return null;
|
|
116
|
-
}) }) })
|
|
117
|
-
] });
|
|
126
|
+
);
|
|
118
127
|
};
|
|
119
128
|
export {
|
|
120
129
|
HvWizardContent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.js","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialogContent,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useElementSize } from \"usehooks-ts\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport { staticClasses as wizardContentClasses };\n\nexport type HvWizardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes: classesProp,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce(\n (acc, child: ChildElement, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n },\n {}\n );\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n setContext(initialContext);\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab, context, setContext]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <div\n className={classes.summaryRef}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={cx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"WizardContent.js","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialogContent,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useElementSize } from \"usehooks-ts\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport { staticClasses as wizardContentClasses };\n\nexport type HvWizardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes: classesProp,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce(\n (acc, child: ChildElement, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n },\n {}\n );\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n setContext(initialContext);\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab, context, setContext]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <div\n className={classes.summaryRef}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={cx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
2
|
import { createClasses } from "@hitachivantara/uikit-react-core";
|
|
3
|
-
const {
|
|
4
|
-
staticClasses,
|
|
5
|
-
useClasses
|
|
6
|
-
} = createClasses("HvWizardContent", {
|
|
3
|
+
const { staticClasses, useClasses } = createClasses("HvWizardContent", {
|
|
7
4
|
contentContainer: {
|
|
8
5
|
position: "relative",
|
|
9
6
|
padding: 20,
|