@hitachivantara/uikit-react-lab 5.19.0 → 5.19.2
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
|
@@ -18,35 +18,22 @@ const HvWizardContent = ({
|
|
|
18
18
|
children,
|
|
19
19
|
summaryContent
|
|
20
20
|
}) => {
|
|
21
|
-
const {
|
|
22
|
-
|
|
23
|
-
cx
|
|
24
|
-
} = WizardContent_styles.useClasses(classesProp);
|
|
25
|
-
const {
|
|
26
|
-
context,
|
|
27
|
-
setContext,
|
|
28
|
-
summary,
|
|
29
|
-
tab
|
|
30
|
-
} = React.useContext(WizardContext.default);
|
|
21
|
+
const { classes, cx } = WizardContent_styles.useClasses(classesProp);
|
|
22
|
+
const { context, setContext, summary, tab } = React.useContext(WizardContext.default);
|
|
31
23
|
const arrayChildren = React__default.default.Children.toArray(children);
|
|
32
|
-
const initialContext = arrayChildren.reduce(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
...child.props,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
};
|
|
44
|
-
}, {});
|
|
24
|
+
const initialContext = arrayChildren.reduce(
|
|
25
|
+
(acc, child, index) => {
|
|
26
|
+
const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
|
|
27
|
+
const valid = invalid ?? (index === 0 || null);
|
|
28
|
+
return {
|
|
29
|
+
...acc,
|
|
30
|
+
[index]: { ...child.props, form: {}, valid, touched: index === 0 }
|
|
31
|
+
};
|
|
32
|
+
},
|
|
33
|
+
{}
|
|
34
|
+
);
|
|
45
35
|
const summaryRef = React.useRef();
|
|
46
|
-
const resizedRef = React.useRef({
|
|
47
|
-
height: 0,
|
|
48
|
-
width: 0
|
|
49
|
-
});
|
|
36
|
+
const resizedRef = React.useRef({ height: 0, width: 0 });
|
|
50
37
|
const [containerRef, sizes] = usehooksTs.useElementSize();
|
|
51
38
|
const [summaryHeight, setSummaryHeight] = React.useState(0);
|
|
52
39
|
const [summaryWidth, setSummaryWidth] = React.useState(0);
|
|
@@ -79,45 +66,67 @@ const HvWizardContent = ({
|
|
|
79
66
|
}, []);
|
|
80
67
|
React.useEffect(() => {
|
|
81
68
|
if (tab && !context[tab]?.touched) {
|
|
82
|
-
const updatedContext = Object.entries(context).reduce(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
[key]: childState
|
|
92
|
-
}
|
|
93
|
-
|
|
69
|
+
const updatedContext = Object.entries(context).reduce(
|
|
70
|
+
(acc, [key, childState]) => ({
|
|
71
|
+
...acc,
|
|
72
|
+
...+key <= tab ? {
|
|
73
|
+
[key]: {
|
|
74
|
+
...childState,
|
|
75
|
+
touched: true,
|
|
76
|
+
valid: childState?.valid ?? true
|
|
77
|
+
}
|
|
78
|
+
} : { [key]: childState }
|
|
79
|
+
}),
|
|
80
|
+
{}
|
|
81
|
+
);
|
|
94
82
|
setContext(updatedContext);
|
|
95
83
|
}
|
|
96
84
|
}, [tab, context, setContext]);
|
|
97
85
|
const translateX = summaryWidth ? summaryWidth + 10 : 450;
|
|
98
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
summaryRef
|
|
86
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
87
|
+
"div",
|
|
88
|
+
{
|
|
89
|
+
className: classes.summaryRef,
|
|
90
|
+
ref: (el) => {
|
|
91
|
+
containerRef(el);
|
|
92
|
+
if (el) {
|
|
93
|
+
summaryRef.current = el;
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
children: [
|
|
97
|
+
summary !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.summarySticky, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
98
|
+
"div",
|
|
99
|
+
{
|
|
100
|
+
className: classes.summaryContainer,
|
|
101
|
+
style: {
|
|
102
|
+
left: summaryLeft,
|
|
103
|
+
width: summaryWidth,
|
|
104
|
+
height: summaryHeight,
|
|
105
|
+
transform: `translate(${summary ? 0 : translateX}px, 0)`
|
|
106
|
+
},
|
|
107
|
+
children: summaryContent
|
|
108
|
+
}
|
|
109
|
+
) }),
|
|
110
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
111
|
+
uikitReactCore.HvDialogContent,
|
|
112
|
+
{
|
|
113
|
+
className: cx(classes.contentContainer, {
|
|
114
|
+
[classes.fixedHeight]: fixedHeight
|
|
115
|
+
}),
|
|
116
|
+
indentContent: true,
|
|
117
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(LoadingContainer.LoadingContainer, { hidden: !loading, children: React__default.default.Children.map(arrayChildren, (child, index) => {
|
|
118
|
+
if (index === tab) {
|
|
119
|
+
return React__default.default.cloneElement(child, {
|
|
120
|
+
tab
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
return null;
|
|
124
|
+
}) })
|
|
125
|
+
}
|
|
126
|
+
)
|
|
127
|
+
]
|
|
102
128
|
}
|
|
103
|
-
|
|
104
|
-
summary !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.summarySticky, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.summaryContainer, style: {
|
|
105
|
-
left: summaryLeft,
|
|
106
|
-
width: summaryWidth,
|
|
107
|
-
height: summaryHeight,
|
|
108
|
-
transform: `translate(${summary ? 0 : translateX}px, 0)`
|
|
109
|
-
}, children: summaryContent }) }),
|
|
110
|
-
/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogContent, { className: cx(classes.contentContainer, {
|
|
111
|
-
[classes.fixedHeight]: fixedHeight
|
|
112
|
-
}), indentContent: true, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingContainer.LoadingContainer, { hidden: !loading, children: React__default.default.Children.map(arrayChildren, (child, index) => {
|
|
113
|
-
if (index === tab) {
|
|
114
|
-
return React__default.default.cloneElement(child, {
|
|
115
|
-
tab
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
return null;
|
|
119
|
-
}) }) })
|
|
120
|
-
] });
|
|
129
|
+
);
|
|
121
130
|
};
|
|
122
131
|
exports.wizardContentClasses = WizardContent_styles.staticClasses;
|
|
123
132
|
exports.HvWizardContent = HvWizardContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.cjs","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.cjs","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":["useClasses","useContext","HvWizardContext","React","useRef","useElementSize","useState","useCallback","useEffect","jsxs","jsx","HvDialogContent","LoadingContainer"],"mappings":"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"}
|
|
@@ -2,10 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
4
|
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
5
|
-
const {
|
|
6
|
-
staticClasses,
|
|
7
|
-
useClasses
|
|
8
|
-
} = uikitReactCore.createClasses("HvWizardContent", {
|
|
5
|
+
const { staticClasses, useClasses } = uikitReactCore.createClasses("HvWizardContent", {
|
|
9
6
|
contentContainer: {
|
|
10
7
|
position: "relative",
|
|
11
8
|
padding: 20,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.styles.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardContent\", {\n contentContainer: {\n position: \"relative\",\n padding: 20,\n marginLeft: 0,\n minHeight: 400,\n overflowX: \"hidden\",\n },\n fixedHeight: {\n minHeight: \"calc(100vh - 387px)\",\n },\n summaryRef: {\n flex: 1,\n overflowY: \"auto\",\n overflowX: \"hidden\",\n },\n summarySticky: {\n position: \"sticky\",\n top: 0,\n zIndex: 1,\n },\n summaryContainer: {\n position: \"absolute\",\n top: 0,\n minWidth: 280,\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n transition: \"transform 0.3s\",\n transitionTimingFunction: \"ease-in-out\",\n overflowY: \"scroll\",\n },\n});\n"],"names":["
|
|
1
|
+
{"version":3,"file":"WizardContent.styles.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardContent\", {\n contentContainer: {\n position: \"relative\",\n padding: 20,\n marginLeft: 0,\n minHeight: 400,\n overflowX: \"hidden\",\n },\n fixedHeight: {\n minHeight: \"calc(100vh - 387px)\",\n },\n summaryRef: {\n flex: 1,\n overflowY: \"auto\",\n overflowX: \"hidden\",\n },\n summarySticky: {\n position: \"sticky\",\n top: 0,\n zIndex: 1,\n },\n summaryContainer: {\n position: \"absolute\",\n top: 0,\n minWidth: 280,\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n transition: \"transform 0.3s\",\n transitionTimingFunction: \"ease-in-out\",\n overflowY: \"scroll\",\n },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAGO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,mBAAmB;AAAA,EAC5E,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,eAAe;AAAA,IACb,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU;AAAA,IACV,WAAWC,YAAAA,MAAM,OAAO;AAAA,IACxB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,0BAA0B;AAAA,IAC1B,WAAW;AAAA,EACb;AACF,CAAC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContext.cjs","sources":["../../../../../src/components/Wizard/WizardContext/WizardContext.tsx"],"sourcesContent":["import React, { createContext, Dispatch, SetStateAction } from \"react\";\n\nexport type HvWizardTab = {\n name?: string;\n valid?: boolean;\n mustValidate?: boolean;\n touched?: boolean;\n form?: any;\n children?: React.ReactNode;\n [other: string]: any;\n};\n\nexport type HvWizardTabs = {\n [tab in number]?: HvWizardTab;\n};\n\ntype HvWizardContextProp = {\n context: HvWizardTabs;\n setContext: React.Dispatch<React.SetStateAction<HvWizardTabs>>;\n summary: boolean;\n setSummary: React.Dispatch<React.SetStateAction<boolean>>;\n tab: number;\n setTab: Dispatch<SetStateAction<number>>;\n};\n\nconst HvWizardContext = createContext<HvWizardContextProp>({\n context: {},\n setContext: () => {},\n summary: false,\n setSummary: () => {},\n tab: 0,\n setTab: () => {},\n});\n\nexport default HvWizardContext;\n"],"names":["
|
|
1
|
+
{"version":3,"file":"WizardContext.cjs","sources":["../../../../../src/components/Wizard/WizardContext/WizardContext.tsx"],"sourcesContent":["import React, { createContext, Dispatch, SetStateAction } from \"react\";\n\nexport type HvWizardTab = {\n name?: string;\n valid?: boolean;\n mustValidate?: boolean;\n touched?: boolean;\n form?: any;\n children?: React.ReactNode;\n [other: string]: any;\n};\n\nexport type HvWizardTabs = {\n [tab in number]?: HvWizardTab;\n};\n\ntype HvWizardContextProp = {\n context: HvWizardTabs;\n setContext: React.Dispatch<React.SetStateAction<HvWizardTabs>>;\n summary: boolean;\n setSummary: React.Dispatch<React.SetStateAction<boolean>>;\n tab: number;\n setTab: Dispatch<SetStateAction<number>>;\n};\n\nconst HvWizardContext = createContext<HvWizardContextProp>({\n context: {},\n setContext: () => {},\n summary: false,\n setSummary: () => {},\n tab: 0,\n setTab: () => {},\n});\n\nexport default HvWizardContext;\n"],"names":["createContext"],"mappings":";;;AAyBA,MAAM,kBAAkBA,MAAAA,cAAmC;AAAA,EACzD,SAAS,CAAC;AAAA,EACV,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,SAAS;AAAA,EACT,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,KAAK;AAAA,EACL,QAAQ,MAAM;AAAA,EAAC;AACjB,CAAC;AAED,MAAA,oBAAe;;"}
|
|
@@ -25,15 +25,8 @@ const HvWizardTitle = ({
|
|
|
25
25
|
classes: classesProp,
|
|
26
26
|
customStep = {}
|
|
27
27
|
}) => {
|
|
28
|
-
const {
|
|
29
|
-
|
|
30
|
-
setSummary,
|
|
31
|
-
tab,
|
|
32
|
-
setTab
|
|
33
|
-
} = React.useContext(WizardContext.default);
|
|
34
|
-
const {
|
|
35
|
-
classes
|
|
36
|
-
} = WizardTitle_styles.useClasses(classesProp);
|
|
28
|
+
const { context, setSummary, tab, setTab } = React.useContext(WizardContext.default);
|
|
29
|
+
const { classes } = WizardTitle_styles.useClasses(classesProp);
|
|
37
30
|
const [steps, setSteps] = React.useState([]);
|
|
38
31
|
React.useEffect(() => {
|
|
39
32
|
return () => {
|
|
@@ -46,31 +39,60 @@ const HvWizardTitle = ({
|
|
|
46
39
|
React.useEffect(() => {
|
|
47
40
|
const contextArray = Object.entries(context);
|
|
48
41
|
if (contextArray.length) {
|
|
49
|
-
const updatedSteps = contextArray.map(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
42
|
+
const updatedSteps = contextArray.map(
|
|
43
|
+
([, childState], index) => {
|
|
44
|
+
return {
|
|
45
|
+
title: childState?.name ?? `${index + 1}`,
|
|
46
|
+
state: switchTabState(childState, tab, index),
|
|
47
|
+
onClick: () => setTab(index)
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
);
|
|
56
51
|
setSteps(updatedSteps);
|
|
57
52
|
}
|
|
58
53
|
}, [context, tab, setTab]);
|
|
59
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
54
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
55
|
+
uikitReactCore.HvDialogTitle,
|
|
56
|
+
{
|
|
57
|
+
className: classes.headerContainer,
|
|
58
|
+
classes: {
|
|
59
|
+
messageContainer: classes.messageContainer
|
|
60
|
+
},
|
|
61
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
|
|
62
|
+
title && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title3", component: "h3", children: title }),
|
|
63
|
+
!!steps.length && /* @__PURE__ */ jsxRuntime.jsx(
|
|
64
|
+
StepNavigation.HvStepNavigation,
|
|
65
|
+
{
|
|
66
|
+
className: classes.stepContainer,
|
|
67
|
+
steps,
|
|
68
|
+
type: "Default",
|
|
69
|
+
stepSize: "xs",
|
|
70
|
+
width: {
|
|
71
|
+
xs: 200,
|
|
72
|
+
sm: 350,
|
|
73
|
+
md: 600,
|
|
74
|
+
lg: 800,
|
|
75
|
+
xl: 1e3
|
|
76
|
+
},
|
|
77
|
+
...customStep
|
|
78
|
+
}
|
|
79
|
+
),
|
|
80
|
+
hasSummary && /* @__PURE__ */ jsxRuntime.jsx(
|
|
81
|
+
uikitReactCore.HvButton,
|
|
82
|
+
{
|
|
83
|
+
variant: "secondarySubtle",
|
|
84
|
+
className: classes.buttonWidth,
|
|
85
|
+
classes: {
|
|
86
|
+
root: classes.rootSummaryButton
|
|
87
|
+
},
|
|
88
|
+
onClick: toggleSummary,
|
|
89
|
+
startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Report, {}),
|
|
90
|
+
children: `${labels.summary ?? "Summary"}`
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
] })
|
|
94
|
+
}
|
|
95
|
+
);
|
|
74
96
|
};
|
|
75
97
|
exports.wizardTitleClasses = WizardTitle_styles.staticClasses;
|
|
76
98
|
exports.HvWizardTitle = HvWizardTitle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvDialogTitle,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardTitle.styles\";\n\nexport { staticClasses as wizardTitleClasses };\n\nexport type HvWizardTitleClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n /** Title for the wizard. */\n title?: string;\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** An object containing all the labels for the wizard header. */\n labels?: {\n /** Summary button label. */\n summary?: string;\n };\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n classes: classesProp,\n customStep = {},\n}: HvWizardTitleProps) => {\n const { context, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n const { classes } = useClasses(classesProp);\n\n const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n useEffect(() => {\n return () => {\n setSummary(false);\n };\n }, [setSummary]);\n\n const toggleSummary = () => {\n setSummary((prevValue) => !prevValue);\n };\n\n useEffect(() => {\n const contextArray = Object.entries(context);\n\n if (contextArray.length) {\n const updatedSteps: HvStepProps[] = contextArray.map(\n ([, childState], index) => {\n return {\n title: childState?.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => setTab(index),\n };\n }\n );\n\n setSteps(updatedSteps);\n }\n }, [context, tab, setTab]);\n\n return (\n <HvDialogTitle\n className={classes.headerContainer}\n classes={{\n messageContainer: classes.messageContainer,\n }}\n >\n <div className={classes.titleContainer}>\n {title && (\n <HvTypography variant=\"title3\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={classes.stepContainer}\n steps={steps}\n type=\"Default\"\n stepSize=\"xs\"\n width={{\n xs: 200,\n sm: 350,\n md: 600,\n lg: 800,\n xl: 1000,\n }}\n {...customStep}\n />\n )}\n {hasSummary && (\n <HvButton\n variant=\"secondarySubtle\"\n className={classes.buttonWidth}\n classes={{\n root: classes.rootSummaryButton,\n }}\n onClick={toggleSummary}\n startIcon={<Report />}\n >\n {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </div>\n </HvDialogTitle>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvDialogTitle,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardTitle.styles\";\n\nexport { staticClasses as wizardTitleClasses };\n\nexport type HvWizardTitleClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n /** Title for the wizard. */\n title?: string;\n /** Shows the summary button. */\n hasSummary?: boolean;\n /** An object containing all the labels for the wizard header. */\n labels?: {\n /** Summary button label. */\n summary?: string;\n };\n /** Custom object to define type, size and width of the StepNavigation component */\n customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n classes: classesProp,\n customStep = {},\n}: HvWizardTitleProps) => {\n const { context, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n const { classes } = useClasses(classesProp);\n\n const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n useEffect(() => {\n return () => {\n setSummary(false);\n };\n }, [setSummary]);\n\n const toggleSummary = () => {\n setSummary((prevValue) => !prevValue);\n };\n\n useEffect(() => {\n const contextArray = Object.entries(context);\n\n if (contextArray.length) {\n const updatedSteps: HvStepProps[] = contextArray.map(\n ([, childState], index) => {\n return {\n title: childState?.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => setTab(index),\n };\n }\n );\n\n setSteps(updatedSteps);\n }\n }, [context, tab, setTab]);\n\n return (\n <HvDialogTitle\n className={classes.headerContainer}\n classes={{\n messageContainer: classes.messageContainer,\n }}\n >\n <div className={classes.titleContainer}>\n {title && (\n <HvTypography variant=\"title3\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={classes.stepContainer}\n steps={steps}\n type=\"Default\"\n stepSize=\"xs\"\n width={{\n xs: 200,\n sm: 350,\n md: 600,\n lg: 800,\n xl: 1000,\n }}\n {...customStep}\n />\n )}\n {hasSummary && (\n <HvButton\n variant=\"secondarySubtle\"\n className={classes.buttonWidth}\n classes={{\n root: classes.rootSummaryButton,\n }}\n onClick={toggleSummary}\n startIcon={<Report />}\n >\n {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </div>\n </HvDialogTitle>\n );\n};\n"],"names":["useContext","HvWizardContext","useClasses","useState","useEffect","jsx","HvDialogTitle","jsxs","HvTypography","HvStepNavigation","HvButton","Report"],"mappings":";;;;;;;;;AAoCA,MAAM,iBAAiB,CAAC,OAAO,YAAY,UAAU;AACnD,MAAI,UAAU;AAAmB,WAAA;AACjC,MAAI,MAAM;AAAc,WAAA;AACxB,MAAI,MAAM,UAAU;AAAa,WAAA;AAC7B,MAAA,MAAM,WAAW,MAAM,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,aAAa;AAAA,EACb,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,EACT,aAAa,CAAC;AAChB,MAA0B;AACxB,QAAM,EAAE,SAAS,YAAY,KAAK,WAAWA,MAAAA,WAAWC,cAAAA,OAAe;AAEvE,QAAM,EAAE,QAAA,IAAYC,mBAAA,WAAW,WAAW;AAE1C,QAAM,CAAC,OAAO,QAAQ,IAAIC,MAAA,SAAwB,CAAE,CAAA;AAEpDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACX,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB,MAAM;AACf,eAAA,CAAC,cAAc,CAAC,SAAS;AAAA,EAAA;AAGtCA,QAAAA,UAAU,MAAM;AACR,UAAA,eAAe,OAAO,QAAQ,OAAO;AAE3C,QAAI,aAAa,QAAQ;AACvB,YAAM,eAA8B,aAAa;AAAA,QAC/C,CAAC,CAAG,EAAA,UAAU,GAAG,UAAU;AAClB,iBAAA;AAAA,YACL,OAAO,YAAY,QAAQ,GAAG,QAAQ,CAAC;AAAA,YACvC,OAAO,eAAe,YAAY,KAAK,KAAK;AAAA,YAC5C,SAAS,MAAM,OAAO,KAAK;AAAA,UAAA;AAAA,QAE/B;AAAA,MAAA;AAGF,eAAS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAAC,SAAS,KAAK,MAAM,CAAC;AAGvB,SAAAC,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,QACP,kBAAkB,QAAQ;AAAA,MAC5B;AAAA,MAEA,UAACC,2BAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,gBACrB,UAAA;AAAA,QAAA,wCACEC,eAAa,cAAA,EAAA,SAAQ,UAAS,WAAU,MACtC,UACH,OAAA;AAAA,QAED,CAAC,CAAC,MAAM,UACPH,2BAAA;AAAA,UAACI,eAAA;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB;AAAA,YACA,MAAK;AAAA,YACL,UAAS;AAAA,YACT,OAAO;AAAA,cACL,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,YACN;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAED,cACCJ,2BAAA;AAAA,UAACK,eAAA;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS;AAAA,YACT,0CAAYC,gBAAO,QAAA,EAAA;AAAA,YAElB,UAAA,GAAG,OAAO,WAAW,SAAS;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}
|
|
@@ -2,10 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
4
|
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
5
|
-
const {
|
|
6
|
-
staticClasses,
|
|
7
|
-
useClasses
|
|
8
|
-
} = uikitReactCore.createClasses("HvWizardTitle", {
|
|
5
|
+
const { staticClasses, useClasses } = uikitReactCore.createClasses("HvWizardTitle", {
|
|
9
6
|
messageContainer: {
|
|
10
7
|
"& > div": {
|
|
11
8
|
width: "100%"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardTitle.styles.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardTitle\", {\n messageContainer: {\n \"& > div\": {\n width: \"100%\",\n },\n },\n titleContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: theme.spacing(1),\n width: \"100%\",\n },\n buttonWidth: {\n width: 120,\n },\n rootSummaryButton: {\n paddingRight: 18,\n },\n headerContainer: {\n backgroundColor: theme.colors.atmo2,\n \"& h6\": {\n fontSize: \"16px\",\n fontWeight: \"bold\",\n letterSpacing: 0,\n },\n },\n stepContainer: {\n margin: \"auto\",\n },\n});\n"],"names":["
|
|
1
|
+
{"version":3,"file":"WizardTitle.styles.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardTitle\", {\n messageContainer: {\n \"& > div\": {\n width: \"100%\",\n },\n },\n titleContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: theme.spacing(1),\n width: \"100%\",\n },\n buttonWidth: {\n width: 120,\n },\n rootSummaryButton: {\n paddingRight: 18,\n },\n headerContainer: {\n backgroundColor: theme.colors.atmo2,\n \"& h6\": {\n fontSize: \"16px\",\n fontWeight: \"bold\",\n letterSpacing: 0,\n },\n },\n stepContainer: {\n margin: \"auto\",\n },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAGO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,iBAAiB;AAAA,EAC1E,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC,YAAAA,MAAM,QAAQ,CAAC;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,mBAAmB;AAAA,IACjB,cAAc;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,MACN,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,QAAQ;AAAA,EACV;AACF,CAAC;;;"}
|
|
@@ -23,25 +23,14 @@ const HvDashboard = (props) => {
|
|
|
23
23
|
classes: classesProp,
|
|
24
24
|
...others
|
|
25
25
|
} = useDefaultProps("HvDashboard", props);
|
|
26
|
-
const {
|
|
27
|
-
|
|
28
|
-
cx
|
|
29
|
-
} = useClasses(classesProp);
|
|
30
|
-
const {
|
|
31
|
-
activeTheme
|
|
32
|
-
} = useTheme();
|
|
26
|
+
const { classes, cx } = useClasses(classesProp);
|
|
27
|
+
const { activeTheme } = useTheme();
|
|
33
28
|
const layouts = useMemo(() => {
|
|
34
29
|
if (layoutsProp)
|
|
35
30
|
return layoutsProp;
|
|
36
31
|
if (!layout)
|
|
37
32
|
return {};
|
|
38
|
-
return {
|
|
39
|
-
xs: layout,
|
|
40
|
-
sm: layout,
|
|
41
|
-
md: layout,
|
|
42
|
-
lg: layout,
|
|
43
|
-
xl: layout
|
|
44
|
-
};
|
|
33
|
+
return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };
|
|
45
34
|
}, [layoutsProp, layout]);
|
|
46
35
|
const cols = useMemo(() => {
|
|
47
36
|
if (!colsProp)
|
|
@@ -59,7 +48,17 @@ const HvDashboard = (props) => {
|
|
|
59
48
|
}, [colsProp]);
|
|
60
49
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
61
50
|
/* @__PURE__ */ jsx(Global, { styles: gridStyles }),
|
|
62
|
-
/* @__PURE__ */ jsx(
|
|
51
|
+
/* @__PURE__ */ jsx(
|
|
52
|
+
GridLayout,
|
|
53
|
+
{
|
|
54
|
+
className: cx(classes.root, className),
|
|
55
|
+
breakpoints: activeTheme?.breakpoints.values,
|
|
56
|
+
cols,
|
|
57
|
+
layouts,
|
|
58
|
+
...others,
|
|
59
|
+
children
|
|
60
|
+
}
|
|
61
|
+
)
|
|
63
62
|
] });
|
|
64
63
|
};
|
|
65
64
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dashboard.js","sources":["../../../../src/components/Dashboard/Dashboard.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Global } from \"@emotion/react\";\nimport {\n Responsive as ResponsiveGrid,\n ResponsiveProps,\n ReactGridLayoutProps,\n Layouts,\n WidthProvider,\n} from \"react-grid-layout\";\nimport {\n ExtractNames,\n useDefaultProps,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { gridStyles, staticClasses, useClasses } from \"./Dashboard.styles\";\n\nconst GridLayout = WidthProvider(ResponsiveGrid);\n\n/** Default column breakpoints. For now, use always 12-column */\nconst defaultCols: HvDashboardProps[\"cols\"] = {\n xs: 12,\n sm: 12,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport { staticClasses as dashboardClasses };\n\nexport type HvDashboardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardProps extends Omit<ResponsiveProps, \"cols\"> {\n /** Dashboard items. Each node must be `key`'ed */\n children: React.ReactNode;\n /** An object used to override or extend the styles applied. */\n classes?: HvDashboardClasses;\n /**\n * Layout is an array of object with the format:\n *\n * `{i: string, x: number, y: number, w: number, h: number}`\n *\n * The `i` must match the key used on each item component.\n */\n layout?: ReactGridLayoutProps[\"layout\"];\n /** Number of grid columns or an object of breakpoint -> #columns */\n cols?: number | ResponsiveProps[\"cols\"];\n}\n\n/**\n * A Dashboard grid layout component, based on `react-grid-layout`.\n * The children elements are grid items and must be `key`ed.\n *\n * @see https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#grid-layout-props\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvDashboard = (props: HvDashboardProps) => {\n const {\n children,\n className,\n layout,\n cols: colsProp,\n layouts: layoutsProp,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvDashboard\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const layouts = useMemo<Layouts>(() => {\n if (layoutsProp) return layoutsProp;\n if (!layout) return {};\n\n return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };\n }, [layoutsProp, layout]);\n\n const cols = useMemo<ResponsiveProps[\"cols\"]>(() => {\n if (!colsProp) return defaultCols;\n\n if (typeof colsProp === \"number\") {\n return {\n xs: colsProp,\n sm: colsProp,\n md: colsProp,\n lg: colsProp,\n xl: colsProp,\n };\n }\n\n return colsProp;\n }, [colsProp]);\n\n return (\n <>\n <Global styles={gridStyles} />\n <GridLayout\n className={cx(classes.root, className)}\n breakpoints={activeTheme?.breakpoints.values}\n cols={cols}\n layouts={layouts}\n {...others}\n >\n {children}\n </GridLayout>\n </>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"file":"Dashboard.js","sources":["../../../../src/components/Dashboard/Dashboard.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Global } from \"@emotion/react\";\nimport {\n Responsive as ResponsiveGrid,\n ResponsiveProps,\n ReactGridLayoutProps,\n Layouts,\n WidthProvider,\n} from \"react-grid-layout\";\nimport {\n ExtractNames,\n useDefaultProps,\n useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { gridStyles, staticClasses, useClasses } from \"./Dashboard.styles\";\n\nconst GridLayout = WidthProvider(ResponsiveGrid);\n\n/** Default column breakpoints. For now, use always 12-column */\nconst defaultCols: HvDashboardProps[\"cols\"] = {\n xs: 12,\n sm: 12,\n md: 12,\n lg: 12,\n xl: 12,\n};\n\nexport { staticClasses as dashboardClasses };\n\nexport type HvDashboardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardProps extends Omit<ResponsiveProps, \"cols\"> {\n /** Dashboard items. Each node must be `key`'ed */\n children: React.ReactNode;\n /** An object used to override or extend the styles applied. */\n classes?: HvDashboardClasses;\n /**\n * Layout is an array of object with the format:\n *\n * `{i: string, x: number, y: number, w: number, h: number}`\n *\n * The `i` must match the key used on each item component.\n */\n layout?: ReactGridLayoutProps[\"layout\"];\n /** Number of grid columns or an object of breakpoint -> #columns */\n cols?: number | ResponsiveProps[\"cols\"];\n}\n\n/**\n * A Dashboard grid layout component, based on `react-grid-layout`.\n * The children elements are grid items and must be `key`ed.\n *\n * @see https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#grid-layout-props\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvDashboard = (props: HvDashboardProps) => {\n const {\n children,\n className,\n layout,\n cols: colsProp,\n layouts: layoutsProp,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvDashboard\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const layouts = useMemo<Layouts>(() => {\n if (layoutsProp) return layoutsProp;\n if (!layout) return {};\n\n return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };\n }, [layoutsProp, layout]);\n\n const cols = useMemo<ResponsiveProps[\"cols\"]>(() => {\n if (!colsProp) return defaultCols;\n\n if (typeof colsProp === \"number\") {\n return {\n xs: colsProp,\n sm: colsProp,\n md: colsProp,\n lg: colsProp,\n xl: colsProp,\n };\n }\n\n return colsProp;\n }, [colsProp]);\n\n return (\n <>\n <Global styles={gridStyles} />\n <GridLayout\n className={cx(classes.root, className)}\n breakpoints={activeTheme?.breakpoints.values}\n cols={cols}\n layouts={layouts}\n {...others}\n >\n {children}\n </GridLayout>\n </>\n );\n};\n"],"names":["ResponsiveGrid"],"mappings":";;;;;;;AAiBA,MAAM,aAAa,cAAcA,UAAc;AAG/C,MAAM,cAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA+Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,EAAE,gBAAgB;AAElB,QAAA,UAAU,QAAiB,MAAM;AACjC,QAAA;AAAoB,aAAA;AACxB,QAAI,CAAC;AAAQ,aAAO;AAEb,WAAA,EAAE,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAO;AAAA,EAAA,GACnE,CAAC,aAAa,MAAM,CAAC;AAElB,QAAA,OAAO,QAAiC,MAAM;AAClD,QAAI,CAAC;AAAiB,aAAA;AAElB,QAAA,OAAO,aAAa,UAAU;AACzB,aAAA;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IAER;AAEO,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAEb,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAO,QAAQ,WAAY,CAAA;AAAA,IAC5B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,aAAa,aAAa,YAAY;AAAA,QACtC;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|