@hitachivantara/uikit-react-lab 6.1.8 → 6.1.10

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.
Files changed (68) hide show
  1. package/dist/Blade/Blade.js +134 -173
  2. package/dist/Blade/Blade.styles.js +54 -69
  3. package/dist/Blades/Blades.js +70 -101
  4. package/dist/Blades/Blades.styles.js +7 -10
  5. package/dist/Dashboard/Dashboard.js +57 -60
  6. package/dist/Dashboard/Dashboard.styles.js +6 -10
  7. package/dist/Flow/Background/Background.js +10 -16
  8. package/dist/Flow/Controls/Controls.js +77 -91
  9. package/dist/Flow/DroppableFlow.js +135 -200
  10. package/dist/Flow/Empty/Empty.js +12 -9
  11. package/dist/Flow/Empty/Empty.styles.js +12 -15
  12. package/dist/Flow/Flow.js +28 -30
  13. package/dist/Flow/Flow.styles.js +12 -18
  14. package/dist/Flow/FlowContext/FlowContext.js +22 -23
  15. package/dist/Flow/FlowContext/NodeMetaContext.js +36 -39
  16. package/dist/Flow/Minimap/Minimap.js +15 -28
  17. package/dist/Flow/Minimap/Minimap.styles.js +4 -9
  18. package/dist/Flow/Node/BaseNode.js +144 -190
  19. package/dist/Flow/Node/BaseNode.styles.js +122 -133
  20. package/dist/Flow/Node/Node.js +90 -108
  21. package/dist/Flow/Node/Node.styles.js +30 -40
  22. package/dist/Flow/Node/Parameters/ParamRenderer.js +17 -14
  23. package/dist/Flow/Node/Parameters/Select.js +33 -38
  24. package/dist/Flow/Node/Parameters/Slider.js +27 -29
  25. package/dist/Flow/Node/Parameters/Text.js +17 -17
  26. package/dist/Flow/Node/utils.js +44 -49
  27. package/dist/Flow/Sidebar/Sidebar.js +115 -137
  28. package/dist/Flow/Sidebar/Sidebar.styles.js +21 -22
  29. package/dist/Flow/Sidebar/SidebarGroup/SidebarGroup.js +57 -60
  30. package/dist/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.js +27 -33
  31. package/dist/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js +27 -47
  32. package/dist/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js +14 -32
  33. package/dist/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js +17 -23
  34. package/dist/Flow/base.js +5 -5
  35. package/dist/Flow/hooks/useFlowContext.js +5 -5
  36. package/dist/Flow/hooks/useFlowInstance.js +5 -4
  37. package/dist/Flow/hooks/useFlowNode.js +92 -113
  38. package/dist/Flow/hooks/useFlowNodeMeta.js +7 -7
  39. package/dist/Flow/hooks/useNode.js +136 -154
  40. package/dist/Flow/hooks/useNodeId.js +8 -7
  41. package/dist/Flow/nodes/DashboardNode.js +64 -86
  42. package/dist/Flow/nodes/DashboardNode.styles.js +8 -14
  43. package/dist/Flow/nodes/StickyNode.js +370 -435
  44. package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js +36 -52
  45. package/dist/StepNavigation/DefaultNavigation/Step/Step.js +40 -51
  46. package/dist/StepNavigation/DefaultNavigation/Step/Step.styles.js +22 -33
  47. package/dist/StepNavigation/DefaultNavigation/utils.js +38 -30
  48. package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js +24 -41
  49. package/dist/StepNavigation/SimpleNavigation/Dot/Dot.styles.js +13 -16
  50. package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js +35 -47
  51. package/dist/StepNavigation/SimpleNavigation/utils.js +10 -11
  52. package/dist/StepNavigation/StepNavigation.js +136 -179
  53. package/dist/StepNavigation/StepNavigation.styles.js +29 -32
  54. package/dist/Wizard/Wizard.js +81 -104
  55. package/dist/Wizard/Wizard.styles.js +4 -7
  56. package/dist/Wizard/WizardActions/WizardActions.js +111 -131
  57. package/dist/Wizard/WizardActions/WizardActions.styles.js +19 -20
  58. package/dist/Wizard/WizardContainer/WizardContainer.js +19 -28
  59. package/dist/Wizard/WizardContainer/WizardContainer.styles.js +8 -14
  60. package/dist/Wizard/WizardContent/WizardContent.js +103 -120
  61. package/dist/Wizard/WizardContent/WizardContent.styles.js +33 -36
  62. package/dist/Wizard/WizardContext/WizardContext.js +10 -13
  63. package/dist/Wizard/WizardTitle/WizardTitle.js +74 -79
  64. package/dist/Wizard/WizardTitle/WizardTitle.styles.js +12 -15
  65. package/dist/index.d.ts +1 -1
  66. package/dist/index.js +30 -81
  67. package/package.json +6 -6
  68. package/dist/StepNavigation/utils.js +0 -8
@@ -1,133 +1,113 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { useContext, useState, useEffect, useCallback, useMemo } from "react";
3
- import { HvDialogActions, HvButton } from "@hitachivantara/uikit-react-core";
4
- import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
5
- import { useClasses } from "./WizardActions.styles.js";
6
- import { staticClasses } from "./WizardActions.styles.js";
7
1
  import HvWizardContext from "../WizardContext/WizardContext.js";
8
- const HvWizardActions = ({
9
- classes: classesProp,
10
- handleClose,
11
- handleSubmit,
12
- loading = false,
13
- skippable = false,
14
- labels = {
15
- cancel: "Cancel",
16
- next: "Next",
17
- previous: "Previous",
18
- skip: "Skip",
19
- submit: "Submit"
20
- },
21
- handleBeforeNext,
22
- handleBeforePrevious
23
- }) => {
24
- const { classes, css, cx } = useClasses(classesProp);
25
- const { context, setContext, tab, setTab } = useContext(HvWizardContext);
26
- const [pages, setPages] = useState(0);
27
- const [canSubmit, setCanSubmit] = useState(false);
28
- useEffect(() => {
29
- const contextEntries = Object.entries(context);
30
- if (contextEntries.length) {
31
- setPages(contextEntries.length);
32
- const validWizard = Object.entries(context).every(
33
- ([, value]) => value?.valid
34
- );
35
- if (validWizard !== canSubmit) {
36
- setCanSubmit(validWizard);
37
- }
38
- }
39
- }, [context, canSubmit, setCanSubmit, setPages]);
40
- const lastPage = pages - 1;
41
- const isLastPage = tab >= lastPage;
42
- const handleSkip = useCallback(() => {
43
- setContext(
44
- (c) => Object.entries(c).reduce((acc, [key, child]) => {
45
- acc[+key] = {
46
- ...child,
47
- valid: child?.valid !== false
48
- };
49
- return acc;
50
- }, {})
51
- );
52
- setTab(lastPage);
53
- }, [setTab, lastPage, setContext]);
54
- const handleSubmitInternal = useCallback(
55
- () => handleSubmit(context),
56
- [handleSubmit, context]
57
- );
58
- const nextDisabled = useMemo(() => {
59
- if (loading) return true;
60
- return !skippable && !context?.[tab]?.valid;
61
- }, [context, loading, skippable, tab]);
62
- return /* @__PURE__ */ jsxs(HvDialogActions, { className: classes.actionsContainer, children: [
63
- /* @__PURE__ */ jsx(
64
- HvButton,
65
- {
66
- variant: "secondaryGhost",
67
- onClick: handleClose,
68
- className: classes.buttonWidth,
69
- children: labels.cancel ?? "Cancel"
70
- }
71
- ),
72
- skippable && /* @__PURE__ */ jsx(
73
- HvButton,
74
- {
75
- variant: "secondaryGhost",
76
- disabled: isLastPage,
77
- className: classes.buttonWidth,
78
- onClick: handleSkip,
79
- children: labels.skip ?? "Skip"
80
- }
81
- ),
82
- /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: css({ flex: 1 }), children: " " }),
83
- /* @__PURE__ */ jsxs("div", { className: classes.buttonsContainer, children: [
84
- /* @__PURE__ */ jsx(
85
- HvButton,
86
- {
87
- variant: "secondaryGhost",
88
- className: classes.buttonWidth,
89
- disabled: tab <= 0,
90
- onClick: () => {
91
- if (handleBeforePrevious) {
92
- handleBeforePrevious();
93
- } else {
94
- setTab((t) => t - 1);
95
- }
96
- },
97
- startIcon: /* @__PURE__ */ jsx(Backwards, {}),
98
- children: labels.previous ?? "Previous"
99
- }
100
- ),
101
- isLastPage ? /* @__PURE__ */ jsx(
102
- HvButton,
103
- {
104
- variant: "primary",
105
- className: classes.buttonWidth,
106
- disabled: loading || !canSubmit,
107
- onClick: handleSubmitInternal,
108
- children: labels.submit ?? "Submit"
109
- }
110
- ) : /* @__PURE__ */ jsx(
111
- HvButton,
112
- {
113
- variant: "secondaryGhost",
114
- className: cx(classes.buttonWidth, classes.buttonSpacing),
115
- onClick: () => {
116
- if (handleBeforeNext) {
117
- handleBeforeNext();
118
- } else {
119
- setTab((t) => t + 1);
120
- }
121
- },
122
- disabled: nextDisabled,
123
- endIcon: /* @__PURE__ */ jsx(Forwards, {}),
124
- children: labels.next ?? "Next"
125
- }
126
- )
127
- ] })
128
- ] });
129
- };
130
- export {
131
- HvWizardActions,
132
- staticClasses as wizardActionsClasses
2
+ import { useClasses } from "./WizardActions.styles.js";
3
+ import { useCallback, useContext, useEffect, useMemo, useState } from "react";
4
+ import { HvButton, HvDialogActions } from "@hitachivantara/uikit-react-core";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+ import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
7
+ //#region src/Wizard/WizardActions/WizardActions.tsx
8
+ var HvWizardActions = ({ classes: classesProp, handleClose, handleSubmit, loading = false, skippable = false, labels = {
9
+ cancel: "Cancel",
10
+ next: "Next",
11
+ previous: "Previous",
12
+ skip: "Skip",
13
+ submit: "Submit"
14
+ }, handleBeforeNext, handleBeforePrevious }) => {
15
+ const { classes, css, cx } = useClasses(classesProp);
16
+ const { context, setContext, tab, setTab } = useContext(HvWizardContext);
17
+ const [pages, setPages] = useState(0);
18
+ const [canSubmit, setCanSubmit] = useState(false);
19
+ useEffect(() => {
20
+ const contextEntries = Object.entries(context);
21
+ if (contextEntries.length) {
22
+ setPages(contextEntries.length);
23
+ const validWizard = Object.entries(context).every(([, value]) => value?.valid);
24
+ if (validWizard !== canSubmit) setCanSubmit(validWizard);
25
+ }
26
+ }, [
27
+ context,
28
+ canSubmit,
29
+ setCanSubmit,
30
+ setPages
31
+ ]);
32
+ const lastPage = pages - 1;
33
+ const isLastPage = tab >= lastPage;
34
+ const handleSkip = useCallback(() => {
35
+ setContext((c) => Object.entries(c).reduce((acc, [key, child]) => {
36
+ acc[+key] = {
37
+ ...child,
38
+ valid: child?.valid !== false
39
+ };
40
+ return acc;
41
+ }, {}));
42
+ setTab(lastPage);
43
+ }, [
44
+ setTab,
45
+ lastPage,
46
+ setContext
47
+ ]);
48
+ const handleSubmitInternal = useCallback(() => handleSubmit(context), [handleSubmit, context]);
49
+ const nextDisabled = useMemo(() => {
50
+ if (loading) return true;
51
+ return !skippable && !context?.[tab]?.valid;
52
+ }, [
53
+ context,
54
+ loading,
55
+ skippable,
56
+ tab
57
+ ]);
58
+ return /* @__PURE__ */ jsxs(HvDialogActions, {
59
+ className: classes.actionsContainer,
60
+ children: [
61
+ /* @__PURE__ */ jsx(HvButton, {
62
+ variant: "secondaryGhost",
63
+ onClick: handleClose,
64
+ className: classes.buttonWidth,
65
+ children: labels.cancel ?? "Cancel"
66
+ }),
67
+ skippable && /* @__PURE__ */ jsx(HvButton, {
68
+ variant: "secondaryGhost",
69
+ disabled: isLastPage,
70
+ className: classes.buttonWidth,
71
+ onClick: handleSkip,
72
+ children: labels.skip ?? "Skip"
73
+ }),
74
+ /* @__PURE__ */ jsx("div", {
75
+ "aria-hidden": true,
76
+ className: css({ flex: 1 }),
77
+ children: "\xA0"
78
+ }),
79
+ /* @__PURE__ */ jsxs("div", {
80
+ className: classes.buttonsContainer,
81
+ children: [/* @__PURE__ */ jsx(HvButton, {
82
+ variant: "secondaryGhost",
83
+ className: classes.buttonWidth,
84
+ disabled: tab <= 0,
85
+ onClick: () => {
86
+ if (handleBeforePrevious) handleBeforePrevious();
87
+ else setTab((t) => t - 1);
88
+ },
89
+ startIcon: /* @__PURE__ */ jsx(Backwards, {}),
90
+ children: labels.previous ?? "Previous"
91
+ }), isLastPage ? /* @__PURE__ */ jsx(HvButton, {
92
+ variant: "primary",
93
+ className: classes.buttonWidth,
94
+ disabled: loading || !canSubmit,
95
+ onClick: handleSubmitInternal,
96
+ children: labels.submit ?? "Submit"
97
+ }) : /* @__PURE__ */ jsx(HvButton, {
98
+ variant: "secondaryGhost",
99
+ className: cx(classes.buttonWidth, classes.buttonSpacing),
100
+ onClick: () => {
101
+ if (handleBeforeNext) handleBeforeNext();
102
+ else setTab((t) => t + 1);
103
+ },
104
+ disabled: nextDisabled,
105
+ endIcon: /* @__PURE__ */ jsx(Forwards, {}),
106
+ children: labels.next ?? "Next"
107
+ })]
108
+ })
109
+ ]
110
+ });
133
111
  };
112
+ //#endregion
113
+ export { HvWizardActions };
@@ -1,22 +1,21 @@
1
1
  import { createClasses } from "@hitachivantara/uikit-react-core";
2
- import { theme } from "@hitachivantara/uikit-styles";
3
- const { staticClasses, useClasses } = createClasses("HvWizardActions", {
4
- actionsContainer: {},
5
- buttonWidth: {
6
- width: 120,
7
- "& span": {
8
- whiteSpace: "normal",
9
- lineHeight: theme.lineHeights.sm
10
- }
11
- },
12
- buttonsContainer: {
13
- display: "flex",
14
- alignItems: "center",
15
- gap: theme.space.xs
16
- },
17
- buttonSpacing: {}
2
+ import { theme as theme$1 } from "@hitachivantara/uikit-styles";
3
+ //#region src/Wizard/WizardActions/WizardActions.styles.tsx
4
+ var { staticClasses, useClasses } = createClasses("HvWizardActions", {
5
+ actionsContainer: {},
6
+ buttonWidth: {
7
+ width: 120,
8
+ "& span": {
9
+ whiteSpace: "normal",
10
+ lineHeight: theme$1.lineHeights.sm
11
+ }
12
+ },
13
+ buttonsContainer: {
14
+ display: "flex",
15
+ alignItems: "center",
16
+ gap: theme$1.space.xs
17
+ },
18
+ buttonSpacing: {}
18
19
  });
19
- export {
20
- staticClasses,
21
- useClasses
22
- };
20
+ //#endregion
21
+ export { staticClasses, useClasses };
@@ -1,30 +1,21 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useDefaultProps, HvDialog } from "@hitachivantara/uikit-react-core";
3
1
  import { useClasses } from "./WizardContainer.styles.js";
4
- import { staticClasses } from "./WizardContainer.styles.js";
5
- const HvWizardContainer = (props) => {
6
- const {
7
- classes: classesProp,
8
- handleClose,
9
- ...others
10
- } = useDefaultProps("HvWizardContainer", props);
11
- const { classes } = useClasses(classesProp);
12
- return /* @__PURE__ */ jsx(
13
- HvDialog,
14
- {
15
- classes: {
16
- root: classes.root,
17
- closeButton: classes.closeButton,
18
- paper: classes.paper
19
- },
20
- onClose: handleClose,
21
- fullWidth: true,
22
- maxWidth: "lg",
23
- ...others
24
- }
25
- );
26
- };
27
- export {
28
- HvWizardContainer,
29
- staticClasses as wizardContainerClasses
2
+ import { HvDialog, useDefaultProps } from "@hitachivantara/uikit-react-core";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/Wizard/WizardContainer/WizardContainer.tsx
5
+ var HvWizardContainer = (props) => {
6
+ const { classes: classesProp, handleClose, ...others } = useDefaultProps("HvWizardContainer", props);
7
+ const { classes } = useClasses(classesProp);
8
+ return /* @__PURE__ */ jsx(HvDialog, {
9
+ classes: {
10
+ root: classes.root,
11
+ closeButton: classes.closeButton,
12
+ paper: classes.paper
13
+ },
14
+ onClose: handleClose,
15
+ fullWidth: true,
16
+ maxWidth: "lg",
17
+ ...others
18
+ });
30
19
  };
20
+ //#endregion
21
+ export { HvWizardContainer };
@@ -1,15 +1,9 @@
1
1
  import { createClasses } from "@hitachivantara/uikit-react-core";
2
- const { staticClasses, useClasses } = createClasses(
3
- "HvWizardContainer",
4
- {
5
- root: {},
6
- paper: {},
7
- closeButton: {
8
- display: "none"
9
- }
10
- }
11
- );
12
- export {
13
- staticClasses,
14
- useClasses
15
- };
2
+ //#region src/Wizard/WizardContainer/WizardContainer.styles.tsx
3
+ var { staticClasses, useClasses } = createClasses("HvWizardContainer", {
4
+ root: {},
5
+ paper: {},
6
+ closeButton: { display: "none" }
7
+ });
8
+ //#endregion
9
+ export { staticClasses, useClasses };
@@ -1,122 +1,105 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { useContext, Children, useRef, useState, useCallback, useEffect, cloneElement } from "react";
3
- import { useElementSize } from "usehooks-ts";
4
- import { HvLoadingContainer, HvDialogContent } from "@hitachivantara/uikit-react-core";
5
- import { useClasses } from "./WizardContent.styles.js";
6
- import { staticClasses } from "./WizardContent.styles.js";
7
1
  import HvWizardContext from "../WizardContext/WizardContext.js";
8
- const DRAWER_PERCENTAGE = 0.3;
9
- const DRAWER_MIN_WIDTH = 280;
10
- const HvWizardContent = ({
11
- classes: classesProp,
12
- fixedHeight = false,
13
- loading = false,
14
- children,
15
- summaryContent
16
- }) => {
17
- const { classes, cx } = useClasses(classesProp);
18
- const { context, setContext, summary, tab } = useContext(HvWizardContext);
19
- const arrayChildren = Children.toArray(children);
20
- const summaryRef = useRef(void 0);
21
- const resizedRef = useRef({ height: 0, width: 0 });
22
- const [containerRef, sizes] = useElementSize();
23
- const [summaryHeight, setSummaryHeight] = useState(0);
24
- const [summaryWidth, setSummaryWidth] = useState(0);
25
- const [summaryLeft, setSummaryLeft] = useState(0);
26
- const updateSummaryMeasures = useCallback(({ height = 0, width = 0 }) => {
27
- const drawerWidth = width * DRAWER_PERCENTAGE;
28
- setSummaryHeight(height);
29
- setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
30
- setSummaryLeft(width - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
31
- resizedRef.current = {
32
- height,
33
- width
34
- };
35
- }, []);
36
- useEffect(() => {
37
- const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;
38
- if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
39
- updateSummaryMeasures(sizes);
40
- }
41
- if (pageHeight && sizes.height !== pageHeight) {
42
- updateSummaryMeasures({
43
- width: sizes.width,
44
- height: pageHeight
45
- });
46
- }
47
- }, [tab, sizes, summary, updateSummaryMeasures]);
48
- useEffect(() => {
49
- const initialContext = arrayChildren.reduce(
50
- (acc, child, index) => {
51
- const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
52
- const valid = invalid ?? (index === 0 || null);
53
- acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };
54
- return acc;
55
- },
56
- {}
57
- );
58
- setContext(initialContext);
59
- }, []);
60
- useEffect(() => {
61
- if (tab && !context[tab]?.touched) {
62
- setContext(
63
- (oldContext) => Object.entries(oldContext).reduce(
64
- (acc, [key, childState]) => {
65
- acc[Number(key)] = +key <= tab ? {
66
- ...childState,
67
- touched: true,
68
- valid: childState?.valid ?? true
69
- } : childState;
70
- return acc;
71
- },
72
- {}
73
- )
74
- );
75
- }
76
- }, [tab, context, setContext]);
77
- const translateX = summaryWidth ? summaryWidth + 10 : 450;
78
- return /* @__PURE__ */ jsxs(
79
- "div",
80
- {
81
- className: classes.summaryRef,
82
- ref: (el) => {
83
- containerRef(el);
84
- if (el) {
85
- summaryRef.current = el;
86
- }
87
- },
88
- children: [
89
- summary !== null && /* @__PURE__ */ jsx("div", { className: classes.summarySticky, children: /* @__PURE__ */ jsx(
90
- "div",
91
- {
92
- className: classes.summaryContainer,
93
- style: {
94
- left: summaryLeft,
95
- width: summaryWidth,
96
- height: summaryHeight,
97
- transform: `translate(${summary ? 0 : translateX}px, 0)`
98
- },
99
- children: summaryContent
100
- }
101
- ) }),
102
- /* @__PURE__ */ jsx(HvLoadingContainer, { hidden: !loading, children: /* @__PURE__ */ jsx(
103
- HvDialogContent,
104
- {
105
- className: cx(classes.contentContainer, {
106
- [classes.fixedHeight]: fixedHeight
107
- }),
108
- indentContent: true,
109
- children: Children.map(arrayChildren, (child, index) => {
110
- if (index !== tab) return null;
111
- return cloneElement(child, { tab });
112
- })
113
- }
114
- ) })
115
- ]
116
- }
117
- );
118
- };
119
- export {
120
- HvWizardContent,
121
- staticClasses as wizardContentClasses
2
+ import { useClasses } from "./WizardContent.styles.js";
3
+ import { Children, cloneElement, useCallback, useContext, useEffect, useRef, useState } from "react";
4
+ import { HvDialogContent, HvLoadingContainer } from "@hitachivantara/uikit-react-core";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+ import { useElementSize } from "usehooks-ts";
7
+ //#region src/Wizard/WizardContent/WizardContent.tsx
8
+ var DRAWER_PERCENTAGE = .3;
9
+ var DRAWER_MIN_WIDTH = 280;
10
+ var HvWizardContent = ({ classes: classesProp, fixedHeight = false, loading = false, children, summaryContent }) => {
11
+ const { classes, cx } = useClasses(classesProp);
12
+ const { context, setContext, summary, tab } = useContext(HvWizardContext);
13
+ const arrayChildren = Children.toArray(children);
14
+ const summaryRef = useRef(void 0);
15
+ const resizedRef = useRef({
16
+ height: 0,
17
+ width: 0
18
+ });
19
+ const [containerRef, sizes] = useElementSize();
20
+ const [summaryHeight, setSummaryHeight] = useState(0);
21
+ const [summaryWidth, setSummaryWidth] = useState(0);
22
+ const [summaryLeft, setSummaryLeft] = useState(0);
23
+ const updateSummaryMeasures = useCallback(({ height = 0, width = 0 }) => {
24
+ const drawerWidth = width * DRAWER_PERCENTAGE;
25
+ setSummaryHeight(height);
26
+ setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
27
+ setSummaryLeft(width - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
28
+ resizedRef.current = {
29
+ height,
30
+ width
31
+ };
32
+ }, []);
33
+ useEffect(() => {
34
+ const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;
35
+ if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) updateSummaryMeasures(sizes);
36
+ if (pageHeight && sizes.height !== pageHeight) updateSummaryMeasures({
37
+ width: sizes.width,
38
+ height: pageHeight
39
+ });
40
+ }, [
41
+ tab,
42
+ sizes,
43
+ summary,
44
+ updateSummaryMeasures
45
+ ]);
46
+ useEffect(() => {
47
+ setContext(arrayChildren.reduce((acc, child, index) => {
48
+ const valid = ("mustValidate" in child.props && child.props.mustValidate === true ? false : null) ?? (index === 0 || null);
49
+ acc[index] = {
50
+ ...child.props,
51
+ form: {},
52
+ valid,
53
+ touched: index === 0
54
+ };
55
+ return acc;
56
+ }, {}));
57
+ }, []);
58
+ useEffect(() => {
59
+ if (tab && !context[tab]?.touched) setContext((oldContext) => Object.entries(oldContext).reduce((acc, [key, childState]) => {
60
+ acc[Number(key)] = +key <= tab ? {
61
+ ...childState,
62
+ touched: true,
63
+ valid: childState?.valid ?? true
64
+ } : childState;
65
+ return acc;
66
+ }, {}));
67
+ }, [
68
+ tab,
69
+ context,
70
+ setContext
71
+ ]);
72
+ const translateX = summaryWidth ? summaryWidth + 10 : 450;
73
+ return /* @__PURE__ */ jsxs("div", {
74
+ className: classes.summaryRef,
75
+ ref: (el) => {
76
+ containerRef(el);
77
+ if (el) summaryRef.current = el;
78
+ },
79
+ children: [summary !== null && /* @__PURE__ */ jsx("div", {
80
+ className: classes.summarySticky,
81
+ children: /* @__PURE__ */ jsx("div", {
82
+ className: classes.summaryContainer,
83
+ style: {
84
+ left: summaryLeft,
85
+ width: summaryWidth,
86
+ height: summaryHeight,
87
+ transform: `translate(${summary ? 0 : translateX}px, 0)`
88
+ },
89
+ children: summaryContent
90
+ })
91
+ }), /* @__PURE__ */ jsx(HvLoadingContainer, {
92
+ hidden: !loading,
93
+ children: /* @__PURE__ */ jsx(HvDialogContent, {
94
+ className: cx(classes.contentContainer, { [classes.fixedHeight]: fixedHeight }),
95
+ indentContent: true,
96
+ children: Children.map(arrayChildren, (child, index) => {
97
+ if (index !== tab) return null;
98
+ return cloneElement(child, { tab });
99
+ })
100
+ })
101
+ })]
102
+ });
122
103
  };
104
+ //#endregion
105
+ export { HvWizardContent };