@hitachivantara/uikit-react-lab 5.30.3 → 5.31.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Wizard/WizardActions/WizardActions.cjs +7 -1
- package/dist/cjs/Wizard/WizardActions/WizardActions.cjs.map +1 -1
- package/dist/cjs/Wizard/WizardContext/WizardContext.cjs.map +1 -1
- package/dist/cjs/Wizard/WizardTitle/WizardTitle.cjs +4 -0
- package/dist/cjs/Wizard/WizardTitle/WizardTitle.cjs.map +1 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.js +7 -1
- package/dist/esm/Wizard/WizardActions/WizardActions.js.map +1 -1
- package/dist/esm/Wizard/WizardContext/WizardContext.js.map +1 -1
- package/dist/esm/Wizard/WizardTitle/WizardTitle.js +4 -0
- package/dist/esm/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/dist/types/index.d.ts +2 -0
- package/package.json +7 -7
|
@@ -105,7 +105,13 @@ const HvWizardActions = ({
|
|
|
105
105
|
{
|
|
106
106
|
variant: "secondaryGhost",
|
|
107
107
|
className: cx(classes.buttonWidth, classes.buttonSpacing),
|
|
108
|
-
onClick: () =>
|
|
108
|
+
onClick: () => {
|
|
109
|
+
if (handleBeforeNext) {
|
|
110
|
+
handleBeforeNext();
|
|
111
|
+
} else {
|
|
112
|
+
setTab((t) => t + 1);
|
|
113
|
+
}
|
|
114
|
+
},
|
|
109
115
|
disabled: !skippable && !context?.[tab]?.valid,
|
|
110
116
|
endIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}),
|
|
111
117
|
children: labels.next ?? "Next"
|
|
@@ -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 | 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
|
|
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={() => {\n if (handleBeforeNext) {\n handleBeforeNext();\n } else {\n setTab((t) => t + 1);\n }\n }}\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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContext.cjs","sources":["../../../../src/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":";;;
|
|
1
|
+
{"version":3,"file":"WizardContext.cjs","sources":["../../../../src/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 disabled?: boolean;\n loading?: boolean;\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":";;;AA2BA,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;;"}
|
|
@@ -8,10 +8,14 @@ const WizardTitle_styles = require("./WizardTitle.styles.cjs");
|
|
|
8
8
|
const WizardContext = require("../WizardContext/WizardContext.cjs");
|
|
9
9
|
const StepNavigation = require("../../StepNavigation/StepNavigation.cjs");
|
|
10
10
|
const switchTabState = (state, currentTab, index) => {
|
|
11
|
+
if (state.loading)
|
|
12
|
+
return "Pending";
|
|
11
13
|
if (index === currentTab)
|
|
12
14
|
return "Current";
|
|
13
15
|
if (state.valid)
|
|
14
16
|
return "Completed";
|
|
17
|
+
if (state.disabled)
|
|
18
|
+
return "Disabled";
|
|
15
19
|
if (state.valid === null)
|
|
16
20
|
return "Enabled";
|
|
17
21
|
if (state.touched && state.valid === false)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardTitle.cjs","sources":["../../../../src/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
|
|
1
|
+
{"version":3,"file":"WizardTitle.cjs","sources":["../../../../src/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 (state.loading) return \"Pending\";\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.disabled) return \"Disabled\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\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,MAAM;AAAgB,WAAA;AAC1B,MAAI,UAAU;AAAmB,WAAA;AACjC,MAAI,MAAM;AAAc,WAAA;AACxB,MAAI,MAAM;AAAiB,WAAA;AAC3B,MAAI,MAAM,UAAU;AAAa,WAAA;AAC7B,MAAA,MAAM,WAAW,MAAM,UAAU;AAAc,WAAA;AAC5C,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;;;"}
|
|
@@ -104,7 +104,13 @@ const HvWizardActions = ({
|
|
|
104
104
|
{
|
|
105
105
|
variant: "secondaryGhost",
|
|
106
106
|
className: cx(classes.buttonWidth, classes.buttonSpacing),
|
|
107
|
-
onClick: () =>
|
|
107
|
+
onClick: () => {
|
|
108
|
+
if (handleBeforeNext) {
|
|
109
|
+
handleBeforeNext();
|
|
110
|
+
} else {
|
|
111
|
+
setTab((t) => t + 1);
|
|
112
|
+
}
|
|
113
|
+
},
|
|
108
114
|
disabled: !skippable && !context?.[tab]?.valid,
|
|
109
115
|
endIcon: /* @__PURE__ */ jsx(Forwards, {}),
|
|
110
116
|
children: labels.next ?? "Next"
|
|
@@ -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 | 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
|
|
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={() => {\n if (handleBeforeNext) {\n handleBeforeNext();\n } else {\n setTab((t) => t + 1);\n }\n }}\n disabled={!skippable && !context?.[tab]?.valid}\n endIcon={<Forwards />}\n >\n {labels.next ?? \"Next\"}\n </HvButton>\n )}\n </div>\n </HvDialogActions>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContext.js","sources":["../../../../src/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":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"WizardContext.js","sources":["../../../../src/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 disabled?: boolean;\n loading?: boolean;\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":[],"mappings":";AA2BA,MAAM,kBAAkB,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;"}
|
|
@@ -7,10 +7,14 @@ import { staticClasses } from "./WizardTitle.styles.js";
|
|
|
7
7
|
import HvWizardContext from "../WizardContext/WizardContext.js";
|
|
8
8
|
import { HvStepNavigation } from "../../StepNavigation/StepNavigation.js";
|
|
9
9
|
const switchTabState = (state, currentTab, index) => {
|
|
10
|
+
if (state.loading)
|
|
11
|
+
return "Pending";
|
|
10
12
|
if (index === currentTab)
|
|
11
13
|
return "Current";
|
|
12
14
|
if (state.valid)
|
|
13
15
|
return "Completed";
|
|
16
|
+
if (state.disabled)
|
|
17
|
+
return "Disabled";
|
|
14
18
|
if (state.valid === null)
|
|
15
19
|
return "Enabled";
|
|
16
20
|
if (state.touched && state.valid === false)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardTitle.js","sources":["../../../../src/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
|
|
1
|
+
{"version":3,"file":"WizardTitle.js","sources":["../../../../src/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 (state.loading) return \"Pending\";\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.disabled) return \"Disabled\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\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":[],"mappings":";;;;;;;;AAoCA,MAAM,iBAAiB,CAAC,OAAO,YAAY,UAAU;AACnD,MAAI,MAAM;AAAgB,WAAA;AAC1B,MAAI,UAAU;AAAmB,WAAA;AACjC,MAAI,MAAM;AAAc,WAAA;AACxB,MAAI,MAAM;AAAiB,WAAA;AAC3B,MAAI,MAAM,UAAU;AAAa,WAAA;AAC7B,MAAA,MAAM,WAAW,MAAM,UAAU;AAAc,WAAA;AAC5C,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,WAAW,WAAW,eAAe;AAEvE,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,CAAE,CAAA;AAEpD,YAAU,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;AAGtC,YAAU,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,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,QACP,kBAAkB,QAAQ;AAAA,MAC5B;AAAA,MAEA,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACrB,UAAA;AAAA,QAAA,6BACE,cAAa,EAAA,SAAQ,UAAS,WAAU,MACtC,UACH,OAAA;AAAA,QAED,CAAC,CAAC,MAAM,UACP;AAAA,UAAC;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,cACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS;AAAA,YACT,+BAAY,QAAO,EAAA;AAAA,YAElB,UAAA,GAAG,OAAO,WAAW,SAAS;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
package/dist/types/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.31.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React components for the NEXT UI Kit.",
|
|
@@ -32,15 +32,15 @@
|
|
|
32
32
|
"@dnd-kit/core": "^6.1.0",
|
|
33
33
|
"@dnd-kit/modifiers": "^6.0.1",
|
|
34
34
|
"@emotion/css": "^11.11.0",
|
|
35
|
-
"@hitachivantara/uikit-react-core": "^5.
|
|
36
|
-
"@hitachivantara/uikit-react-icons": "^5.9.
|
|
37
|
-
"@hitachivantara/uikit-styles": "^5.
|
|
35
|
+
"@hitachivantara/uikit-react-core": "^5.59.0",
|
|
36
|
+
"@hitachivantara/uikit-react-icons": "^5.9.2",
|
|
37
|
+
"@hitachivantara/uikit-styles": "^5.24.0",
|
|
38
38
|
"@types/react-grid-layout": "^1.3.5",
|
|
39
39
|
"react-grid-layout": "^1.4.4",
|
|
40
40
|
"reactflow": "^11.10.1",
|
|
41
41
|
"uid": "^2.0.2",
|
|
42
|
-
"usehooks-ts": "^2.
|
|
43
|
-
"zustand": "^4.
|
|
42
|
+
"usehooks-ts": "^2.16.0",
|
|
43
|
+
"zustand": "^4.5.2"
|
|
44
44
|
},
|
|
45
45
|
"files": [
|
|
46
46
|
"dist"
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"access": "public",
|
|
50
50
|
"directory": "package"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "8e5b105c16009cc9383a55e5e00eb5832932ceed",
|
|
53
53
|
"main": "dist/cjs/index.cjs",
|
|
54
54
|
"exports": {
|
|
55
55
|
".": {
|