@hitachivantara/uikit-react-lab 5.29.0 → 5.30.0
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/Wizard/WizardActions/WizardActions.cjs +8 -7
- package/dist/cjs/Wizard/WizardActions/WizardActions.cjs.map +1 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.js +8 -7
- package/dist/esm/Wizard/WizardActions/WizardActions.js.map +1 -1
- package/dist/types/index.d.ts +8 -6
- package/package.json +2 -2
|
@@ -18,7 +18,8 @@ const HvWizardActions = ({
|
|
|
18
18
|
previous: "Previous",
|
|
19
19
|
skip: "Skip",
|
|
20
20
|
submit: "Submit"
|
|
21
|
-
}
|
|
21
|
+
},
|
|
22
|
+
handleBeforeNext
|
|
22
23
|
}) => {
|
|
23
24
|
const { classes, css, cx } = WizardActions_styles.useClasses(classesProp);
|
|
24
25
|
const { context, setContext, tab, setTab } = React.useContext(WizardContext.default);
|
|
@@ -64,7 +65,7 @@ const HvWizardActions = ({
|
|
|
64
65
|
variant: "secondaryGhost",
|
|
65
66
|
onClick: handleClose,
|
|
66
67
|
className: classes.buttonWidth,
|
|
67
|
-
children:
|
|
68
|
+
children: labels.cancel ?? "Cancel"
|
|
68
69
|
}
|
|
69
70
|
),
|
|
70
71
|
skippable && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -74,7 +75,7 @@ const HvWizardActions = ({
|
|
|
74
75
|
disabled: isLastPage,
|
|
75
76
|
className: classes.buttonWidth,
|
|
76
77
|
onClick: handleSkip,
|
|
77
|
-
children:
|
|
78
|
+
children: labels.skip ?? "Skip"
|
|
78
79
|
}
|
|
79
80
|
),
|
|
80
81
|
/* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: css({ flex: 1 }), children: " " }),
|
|
@@ -87,7 +88,7 @@ const HvWizardActions = ({
|
|
|
87
88
|
disabled: tab <= 0,
|
|
88
89
|
onClick: () => setTab((t) => t - 1),
|
|
89
90
|
startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {}),
|
|
90
|
-
children:
|
|
91
|
+
children: labels.previous ?? "Previous"
|
|
91
92
|
}
|
|
92
93
|
),
|
|
93
94
|
isLastPage ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -97,17 +98,17 @@ const HvWizardActions = ({
|
|
|
97
98
|
className: classes.buttonWidth,
|
|
98
99
|
disabled: loading || !canSubmit,
|
|
99
100
|
onClick: handleSubmitInternal,
|
|
100
|
-
children:
|
|
101
|
+
children: labels.submit ?? "Submit"
|
|
101
102
|
}
|
|
102
103
|
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
103
104
|
uikitReactCore.HvButton,
|
|
104
105
|
{
|
|
105
106
|
variant: "secondaryGhost",
|
|
106
107
|
className: cx(classes.buttonWidth, classes.buttonSpacing),
|
|
107
|
-
onClick: () => setTab((t) => t + 1),
|
|
108
|
+
onClick: () => handleBeforeNext?.() || setTab((t) => t + 1),
|
|
108
109
|
disabled: !skippable && !context?.[tab]?.valid,
|
|
109
110
|
endIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}),
|
|
110
|
-
children:
|
|
111
|
+
children: labels.next ?? "Next"
|
|
111
112
|
}
|
|
112
113
|
)
|
|
113
114
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardActions.cjs","sources":["../../../../src/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 {
|
|
1
|
+
{"version":3,"file":"WizardActions.cjs","sources":["../../../../src/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 | React.ReactNode;\n /** Skip button label. */\n skip?: string | React.ReactNode;\n /** Previous button label. */\n previous?: string | React.ReactNode;\n /** Next button label. */\n next?: string | React.ReactNode;\n /** Submit button label. */\n submit?: string | React.ReactNode;\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 /** Function executed instead of default go to next page */\n handleBeforeNext?: () => void;\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 handleBeforeNext,\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={() => handleBeforeNext?.() || 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":["useClasses","useContext","HvWizardContext","useState","useEffect","useCallback","jsxs","HvDialogActions","jsx","HvButton","Backwards","Forwards"],"mappings":"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"}
|
|
@@ -17,7 +17,8 @@ const HvWizardActions = ({
|
|
|
17
17
|
previous: "Previous",
|
|
18
18
|
skip: "Skip",
|
|
19
19
|
submit: "Submit"
|
|
20
|
-
}
|
|
20
|
+
},
|
|
21
|
+
handleBeforeNext
|
|
21
22
|
}) => {
|
|
22
23
|
const { classes, css, cx } = useClasses(classesProp);
|
|
23
24
|
const { context, setContext, tab, setTab } = useContext(HvWizardContext);
|
|
@@ -63,7 +64,7 @@ const HvWizardActions = ({
|
|
|
63
64
|
variant: "secondaryGhost",
|
|
64
65
|
onClick: handleClose,
|
|
65
66
|
className: classes.buttonWidth,
|
|
66
|
-
children:
|
|
67
|
+
children: labels.cancel ?? "Cancel"
|
|
67
68
|
}
|
|
68
69
|
),
|
|
69
70
|
skippable && /* @__PURE__ */ jsx(
|
|
@@ -73,7 +74,7 @@ const HvWizardActions = ({
|
|
|
73
74
|
disabled: isLastPage,
|
|
74
75
|
className: classes.buttonWidth,
|
|
75
76
|
onClick: handleSkip,
|
|
76
|
-
children:
|
|
77
|
+
children: labels.skip ?? "Skip"
|
|
77
78
|
}
|
|
78
79
|
),
|
|
79
80
|
/* @__PURE__ */ jsx("div", { "aria-hidden": true, className: css({ flex: 1 }), children: " " }),
|
|
@@ -86,7 +87,7 @@ const HvWizardActions = ({
|
|
|
86
87
|
disabled: tab <= 0,
|
|
87
88
|
onClick: () => setTab((t) => t - 1),
|
|
88
89
|
startIcon: /* @__PURE__ */ jsx(Backwards, {}),
|
|
89
|
-
children:
|
|
90
|
+
children: labels.previous ?? "Previous"
|
|
90
91
|
}
|
|
91
92
|
),
|
|
92
93
|
isLastPage ? /* @__PURE__ */ jsx(
|
|
@@ -96,17 +97,17 @@ const HvWizardActions = ({
|
|
|
96
97
|
className: classes.buttonWidth,
|
|
97
98
|
disabled: loading || !canSubmit,
|
|
98
99
|
onClick: handleSubmitInternal,
|
|
99
|
-
children:
|
|
100
|
+
children: labels.submit ?? "Submit"
|
|
100
101
|
}
|
|
101
102
|
) : /* @__PURE__ */ jsx(
|
|
102
103
|
HvButton,
|
|
103
104
|
{
|
|
104
105
|
variant: "secondaryGhost",
|
|
105
106
|
className: cx(classes.buttonWidth, classes.buttonSpacing),
|
|
106
|
-
onClick: () => setTab((t) => t + 1),
|
|
107
|
+
onClick: () => handleBeforeNext?.() || setTab((t) => t + 1),
|
|
107
108
|
disabled: !skippable && !context?.[tab]?.valid,
|
|
108
109
|
endIcon: /* @__PURE__ */ jsx(Forwards, {}),
|
|
109
|
-
children:
|
|
110
|
+
children: labels.next ?? "Next"
|
|
110
111
|
}
|
|
111
112
|
)
|
|
112
113
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardActions.js","sources":["../../../../src/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 {
|
|
1
|
+
{"version":3,"file":"WizardActions.js","sources":["../../../../src/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 | React.ReactNode;\n /** Skip button label. */\n skip?: string | React.ReactNode;\n /** Previous button label. */\n previous?: string | React.ReactNode;\n /** Next button label. */\n next?: string | React.ReactNode;\n /** Submit button label. */\n submit?: string | React.ReactNode;\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 /** Function executed instead of default go to next page */\n handleBeforeNext?: () => void;\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 handleBeforeNext,\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={() => handleBeforeNext?.() || 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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"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -733,7 +733,7 @@ declare interface HvStepProps extends Pick<HvButtonProps, "onClick">, Omit<HvBas
|
|
|
733
733
|
|
|
734
734
|
export declare const HvWizard: ({ className, children, onClose, handleSubmit, title, open, skippable, loading, hasSummary, summaryContent, labels, fixedHeight, customStep, classes: classesProp, ...others }: HvWizardProps) => JSX_2.Element;
|
|
735
735
|
|
|
736
|
-
export declare const HvWizardActions: ({ classes: classesProp, handleClose, handleSubmit, loading, skippable, labels, }: HvWizardActionsProps) => JSX_2.Element;
|
|
736
|
+
export declare const HvWizardActions: ({ classes: classesProp, handleClose, handleSubmit, loading, skippable, labels, handleBeforeNext, }: HvWizardActionsProps) => JSX_2.Element;
|
|
737
737
|
|
|
738
738
|
export declare type HvWizardActionsClasses = ExtractNames<typeof useClasses_13>;
|
|
739
739
|
|
|
@@ -745,15 +745,15 @@ export declare interface HvWizardActionsProps extends HvBaseProps {
|
|
|
745
745
|
/** An object containing all the labels for the wizard actions component. */
|
|
746
746
|
labels?: {
|
|
747
747
|
/** Cancel button label. */
|
|
748
|
-
cancel?: string;
|
|
748
|
+
cancel?: string | React.ReactNode;
|
|
749
749
|
/** Skip button label. */
|
|
750
|
-
skip?: string;
|
|
750
|
+
skip?: string | React.ReactNode;
|
|
751
751
|
/** Previous button label. */
|
|
752
|
-
previous?: string;
|
|
752
|
+
previous?: string | React.ReactNode;
|
|
753
753
|
/** Next button label. */
|
|
754
|
-
next?: string;
|
|
754
|
+
next?: string | React.ReactNode;
|
|
755
755
|
/** Submit button label. */
|
|
756
|
-
submit?: string;
|
|
756
|
+
submit?: string | React.ReactNode;
|
|
757
757
|
};
|
|
758
758
|
/** Whether the submit button is disabled. */
|
|
759
759
|
loading?: boolean;
|
|
@@ -761,6 +761,8 @@ export declare interface HvWizardActionsProps extends HvBaseProps {
|
|
|
761
761
|
skippable?: boolean;
|
|
762
762
|
/** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
|
|
763
763
|
classes?: HvWizardActionsClasses;
|
|
764
|
+
/** Function executed instead of default go to next page */
|
|
765
|
+
handleBeforeNext?: () => void;
|
|
764
766
|
}
|
|
765
767
|
|
|
766
768
|
export declare type HvWizardClasses = ExtractNames<typeof useClasses_12>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.30.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React components for the NEXT UI Kit.",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"access": "public",
|
|
51
51
|
"directory": "package"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "76710ff27f609fbe142a070abd884562ed8e6c49",
|
|
54
54
|
"main": "dist/cjs/index.cjs",
|
|
55
55
|
"exports": {
|
|
56
56
|
".": {
|