@hitachivantara/uikit-react-lab 5.1.0 → 5.2.1

package/dist/esm/packages/lab/src/components/Wizard/WizardContent/wizardContentClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizardContentClasses.js","sources":["../../../../../../../../src/components/Wizard/WizardContent/wizardContentClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardContentClasses = {\n  /** Style applied to the Wizard content container. */\n  contentContainer?: string;\n  /** Style applied to the Wizard to fix its height. */\n  fixedHeight?: string;\n  /** Style applied to the summary container around the page content container. */\n  summaryRef?: string;\n  /** Style applied to the Summary container to stick it to the top. */\n  summarySticky?: string;\n  /** Style applied to the Summary container to position it on the right. */\n  summaryContainer?: string;\n};\n\nconst classKeys: string[] = [\n  \"contentContainer\",\n  \"fixedHeight\",\n  \"summaryRef\",\n  \"summarySticky\",\n  \"summaryContainer\",\n];\n\nconst wizardContentClasses = getClasses<HvWizardContentClasses>(\n  classKeys,\n  \"HvWizardContent\"\n);\n\nexport default wizardContentClasses;\n"],"names":["classKeys","wizardContentClasses","getClasses"],"mappings":";AAeA,MAAMA,YAAsB,CAC1B,oBACA,eACA,cACA,iBACA,kBAAkB;AAGpB,MAAMC,uBAAuBC,WAC3BF,WACA,iBAAiB;AAGnB,MAAA,yBAAeC;"}

package/dist/esm/packages/lab/src/components/Wizard/WizardContext/WizardContext.js

@@ -0,0 +1,42 @@
+import { createContext, useState, useCallback } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+const HvWizardContext = createContext({
+  context: {},
+  updateContext: () => {
+  },
+  summary: void 0,
+  setSummary: ({}) => {
+  },
+  tab: 0,
+  setTab: () => {
+  }
+});
+const HvWizardProvider = ({
+  children
+}) => {
+  const [context, setContext] = useState({});
+  const [summary, setSummary] = useState(void 0);
+  const [tab, setTab] = useState(0);
+  const updateContext = useCallback((newContext) => {
+    if (Object.entries(newContext).length > 0) {
+      setContext(newContext);
+    }
+  }, [setContext]);
+  return /* @__PURE__ */ jsx(HvWizardContext.Provider, {
+    value: {
+      context,
+      updateContext,
+      summary,
+      setSummary,
+      tab,
+      setTab
+    },
+    children
+  });
+};
+const WizardProvider = HvWizardProvider;
+export {
+  HvWizardContext,
+  WizardProvider as default
+};
+//# sourceMappingURL=WizardContext.js.map

package/dist/esm/packages/lab/src/components/Wizard/WizardContext/WizardContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardContext.js","sources":["../../../../../../../../src/components/Wizard/WizardContext/WizardContext.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useState,\n  Dispatch,\n  SetStateAction,\n  useCallback,\n} 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};\n\nexport type HvWizardTabs<T extends HvWizardTab> = {\n  [tab in number]?: T;\n};\n\ntype HvWizardContextProp = {\n  context: HvWizardTabs<HvWizardTab>;\n  updateContext: (values?: HvWizardTabs<HvWizardTab>) => void;\n  summary: any;\n  setSummary: (oldSummary?: any) => void;\n  tab: any;\n  setTab: Dispatch<SetStateAction<number>>;\n};\n\nexport const HvWizardContext = createContext<HvWizardContextProp>({\n  context: {},\n  updateContext: () => {},\n  summary: undefined,\n  setSummary: ({}) => {},\n  tab: 0,\n  setTab: () => {},\n});\n\nconst HvWizardProvider = ({ children }) => {\n  const [context, setContext] = useState({});\n  const [summary, setSummary] = useState(undefined);\n  const [tab, setTab] = useState(0);\n\n  const updateContext = useCallback(\n    (newContext) => {\n      if (Object.entries(newContext).length > 0) {\n        setContext(newContext);\n      }\n    },\n    [setContext]\n  );\n\n  return (\n    <HvWizardContext.Provider\n      value={{\n        context,\n        updateContext,\n        summary,\n        setSummary,\n        tab,\n        setTab,\n      }}\n    >\n      {children}\n    </HvWizardContext.Provider>\n  );\n};\n\nexport default HvWizardProvider;\n"],"names":["HvWizardContext","createContext","context","updateContext","summary","undefined","setSummary","tab","setTab","HvWizardProvider","children","setContext","useState","useCallback","newContext","Object","entries","length","_jsx","Provider","value"],"mappings":";;AA8BO,MAAMA,kBAAkBC,cAAmC;AAAA,EAChEC,SAAS,CAAC;AAAA,EACVC,eAAeA,MAAM;AAAA,EAAC;AAAA,EACtBC,SAASC;AAAAA,EACTC,YAAYA,CAAC,CAAA,MAAO;AAAA,EAAC;AAAA,EACrBC,KAAK;AAAA,EACLC,QAAQA,MAAM;AAAA,EAAC;AACjB,CAAC;AAED,MAAMC,mBAAmBA,CAAC;AAAA,EAAEC;AAAS,MAAM;AACzC,QAAM,CAACR,SAASS,UAAU,IAAIC,SAAS,CAAE,CAAA;AACzC,QAAM,CAACR,SAASE,UAAU,IAAIM,SAASP,MAAS;AAChD,QAAM,CAACE,KAAKC,MAAM,IAAII,SAAS,CAAC;AAE1BT,QAAAA,gBAAgBU,YACnBC,CAAe,eAAA;AACd,QAAIC,OAAOC,QAAQF,UAAU,EAAEG,SAAS,GAAG;AACzCN,iBAAWG,UAAU;AAAA,IACvB;AAAA,EAAA,GAEF,CAACH,UAAU,CAAC;AAIZO,SAAAA,oBAAClB,gBAAgBmB,UAAQ;AAAA,IACvBC,OAAO;AAAA,MACLlB;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC;AAAAA,MACAC;AAAAA,IACF;AAAA,IAAEE;AAAAA,EAAAA,CAGuB;AAE/B;AAEA,MAAA,iBAAeD;"}

package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.js

@@ -0,0 +1,106 @@
+import { ClassNames } from "@emotion/react";
+import { HvDialogTitle, HvGrid, HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
+import { Report } from "@hitachivantara/uikit-react-icons";
+import { clsx } from "../../../../../../node_modules/clsx/dist/clsx.m.js";
+import wizardTitleClasses from "./wizardTitleClasses.js";
+import { styles } from "./WizardTitle.styles.js";
+import { useContext, useState, useEffect } from "react";
+import { HvWizardContext } from "../WizardContext/WizardContext.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvStepNavigation } from "../../StepNavigation/StepNavigation.js";
+const switchTabState = (state, currentTab, index) => {
+  if (index === currentTab)
+    return "Current";
+  if (state.valid)
+    return "Completed";
+  if (state.valid === null)
+    return "Enabled";
+  if (state.touched && state.valid === false)
+    return "Failed";
+  return "Enabled";
+};
+const HvWizardTitle = ({
+  title,
+  hasSummary = false,
+  labels = {},
+  classes,
+  customStep = {}
+}) => {
+  const {
+    context,
+    summary,
+    setSummary,
+    tab,
+    setTab
+  } = useContext(HvWizardContext);
+  const [steps, setSteps] = useState([]);
+  useEffect(() => {
+    if (summary === null && hasSummary) {
+      setSummary(false);
+    }
+    return () => {
+      setSummary(false);
+    };
+  }, []);
+  useEffect(() => {
+    const contextArray = Object.entries(context);
+    if (contextArray.length) {
+      const updatedSteps = contextArray.map(([, childState], index) => {
+        return {
+          title: (childState == null ? void 0 : childState.name) ?? `${index + 1}`,
+          state: switchTabState(childState, tab, index),
+          onClick: () => setTab(index)
+        };
+      });
+      setSteps(updatedSteps);
+    }
+  }, [context, tab, setTab]);
+  const toggleSummary = () => {
+    setSummary((oldSummary) => !oldSummary);
+  };
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx(HvDialogTitle, {
+      className: clsx(classes == null ? void 0 : classes.headerContainer, wizardTitleClasses.headerContainer, css(styles.headerContainer)),
+      classes: {
+        messageContainer: clsx(classes == null ? void 0 : classes.messageContainer, wizardTitleClasses.messageContainer, css(styles.messageContainer))
+      },
+      children: /* @__PURE__ */ jsxs(HvGrid, {
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        className: clsx(classes == null ? void 0 : classes.titleContainer, wizardTitleClasses.titleContainer, css(styles.titleContainer)),
+        children: [title && /* @__PURE__ */ jsx(HvTypography, {
+          variant: "title3",
+          component: "h3",
+          children: title
+        }), !!steps.length && /* @__PURE__ */ jsx(HvStepNavigation, {
+          className: clsx(classes == null ? void 0 : classes.stepContainer, wizardTitleClasses.stepContainer, css(styles.stepContainer)),
+          steps,
+          type: (customStep == null ? void 0 : customStep.type) ?? "Default",
+          stepSize: (customStep == null ? void 0 : customStep.stepSize) ?? "xs",
+          width: (customStep == null ? void 0 : customStep.width) ?? {
+            xs: 200,
+            sm: 350,
+            md: 600,
+            lg: 800
+          }
+        }), hasSummary && /* @__PURE__ */ jsx(HvButton, {
+          variant: "secondarySubtle",
+          className: clsx(classes == null ? void 0 : classes.buttonWidth, wizardTitleClasses.buttonWidth, css(styles.buttonWidth)),
+          classes: {
+            root: clsx(classes == null ? void 0 : classes.rootSummaryButton, wizardTitleClasses.rootSummaryButton, css(styles.rootSummaryButton))
+          },
+          onClick: toggleSummary,
+          startIcon: /* @__PURE__ */ jsx(Report, {}),
+          children: `${labels.summary ?? "Summary"}`
+        })]
+      })
+    })
+  });
+};
+export {
+  HvWizardTitle
+};
+//# sourceMappingURL=WizardTitle.js.map

package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardTitle.js","sources":["../../../../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport {\n  HvBaseProps,\n  HvButton,\n  HvDialogTitle,\n  HvGrid,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { clsx } from \"clsx\";\nimport wizardTitleClasses, { HvWizardTitleClasses } from \"./wizardTitleClasses\";\nimport { styles } from \"./WizardTitle.styles\";\nimport { HvStepNavigation, HvStepNavigationProps } from \"../..\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { HvWizardContext } from \"../WizardContext/WizardContext\";\nimport { HvStepProps } from \"components/StepNavigation/DefaultNavigation/Step/Step\";\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,\n  customStep = {},\n}: HvWizardTitleProps) => {\n  const { context, summary, setSummary, tab, setTab } =\n    useContext(HvWizardContext);\n\n  const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n  useEffect(() => {\n    if (summary === null && hasSummary) {\n      setSummary(false);\n    }\n\n    return () => {\n      setSummary(false);\n    };\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  const toggleSummary = () => {\n    setSummary((oldSummary) => !oldSummary);\n  };\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvDialogTitle\n          className={clsx(\n            classes?.headerContainer,\n            wizardTitleClasses.headerContainer,\n            css(styles.headerContainer)\n          )}\n          classes={{\n            messageContainer: clsx(\n              classes?.messageContainer,\n              wizardTitleClasses.messageContainer,\n              css(styles.messageContainer)\n            ),\n          }}\n        >\n          <HvGrid\n            container\n            justifyContent=\"space-between\"\n            alignItems=\"center\"\n            className={clsx(\n              classes?.titleContainer,\n              wizardTitleClasses.titleContainer,\n              css(styles.titleContainer)\n            )}\n          >\n            {title && (\n              <HvTypography variant=\"title3\" component=\"h3\">\n                {title}\n              </HvTypography>\n            )}\n            {!!steps.length && (\n              <HvStepNavigation\n                className={clsx(\n                  classes?.stepContainer,\n                  wizardTitleClasses.stepContainer,\n                  css(styles.stepContainer)\n                )}\n                steps={steps}\n                type={customStep?.type ?? \"Default\"}\n                stepSize={customStep?.stepSize ?? \"xs\"}\n                width={\n                  customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }\n                }\n              />\n            )}\n            {hasSummary && (\n              <HvButton\n                variant=\"secondarySubtle\"\n                className={clsx(\n                  classes?.buttonWidth,\n                  wizardTitleClasses.buttonWidth,\n                  css(styles.buttonWidth)\n                )}\n                classes={{\n                  root: clsx(\n                    classes?.rootSummaryButton,\n                    wizardTitleClasses.rootSummaryButton,\n                    css(styles.rootSummaryButton)\n                  ),\n                }}\n                onClick={toggleSummary}\n                startIcon={<Report />}\n              >\n                {`${labels.summary ?? \"Summary\"}`}\n              </HvButton>\n            )}\n          </HvGrid>\n        </HvDialogTitle>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","customStep","context","summary","setSummary","tab","setTab","useContext","HvWizardContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","ClassNames","children","css","HvDialogTitle","className","clsx","headerContainer","wizardTitleClasses","styles","messageContainer","HvGrid","container","justifyContent","alignItems","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report"],"mappings":"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"}

package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.styles.js

@@ -0,0 +1,33 @@
+import { theme } from "@hitachivantara/uikit-react-core";
+const styles = {
+  messageContainer: {
+    "& > div": {
+      width: "100%"
+    }
+  },
+  titleContainer: {
+    margin: 0,
+    width: "100%"
+  },
+  buttonWidth: {
+    width: 120
+  },
+  rootSummaryButton: {
+    paddingRight: 18
+  },
+  headerContainer: {
+    backgroundColor: theme.colors.atmo2,
+    "& h6": {
+      fontSize: "16px",
+      fontWeight: "bold",
+      letterSpacing: 0
+    }
+  },
+  stepContainer: {
+    margin: "auto"
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=WizardTitle.styles.js.map

package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardTitle.styles.js","sources":["../../../../../../../../src/components/Wizard/WizardTitle/WizardTitle.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n  messageContainer: {\n    \"& > div\": {\n      width: \"100%\",\n    },\n  },\n  titleContainer: {\n    margin: 0,\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":["styles","messageContainer","width","titleContainer","margin","buttonWidth","rootSummaryButton","paddingRight","headerContainer","backgroundColor","theme","colors","atmo2","fontSize","fontWeight","letterSpacing","stepContainer"],"mappings":";AAGO,MAAMA,SAA8C;AAAA,EACzDC,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAC,gBAAgB;AAAA,IACdC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EACAG,aAAa;AAAA,IACXH,OAAO;AAAA,EACT;AAAA,EACAI,mBAAmB;AAAA,IACjBC,cAAc;AAAA,EAChB;AAAA,EACAC,iBAAiB;AAAA,IACfC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9B,QAAQ;AAAA,MACNC,UAAU;AAAA,MACVC,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbZ,QAAQ;AAAA,EACV;AACF;"}

package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/wizardTitleClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "@hitachivantara/uikit-react-core";
+const classKeys = ["headerContainer", "messageContainer", "titleContainer", "buttonWidth", "rootSummaryButton", "stepContainer"];
+const wizardTitleClasses = getClasses(classKeys, "HvWizardTitle");
+const wizardTitleClasses$1 = wizardTitleClasses;
+export {
+  wizardTitleClasses$1 as default
+};
+//# sourceMappingURL=wizardTitleClasses.js.map

package/dist/esm/packages/lab/src/components/Wizard/WizardTitle/wizardTitleClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizardTitleClasses.js","sources":["../../../../../../../../src/components/Wizard/WizardTitle/wizardTitleClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardTitleClasses = {\n  /** Styles applied to the header container. */\n  headerContainer?: string;\n  /** Styles applied to override the Dialog Title styles. */\n  messageContainer?: string;\n  /** Styles applied to the header content container. */\n  titleContainer?: string;\n  /** Styles applied to the Button component to override its width. */\n  buttonWidth?: string;\n  /** Styles applied to the Button component to override its right padding. */\n  rootSummaryButton?: string;\n  /** Styles applies to the step container. */\n  stepContainer?: string;\n};\n\nconst classKeys: string[] = [\n  \"headerContainer\",\n  \"messageContainer\",\n  \"titleContainer\",\n  \"buttonWidth\",\n  \"rootSummaryButton\",\n  \"stepContainer\",\n];\n\nconst wizardTitleClasses = getClasses<HvWizardTitleClasses>(\n  classKeys,\n  \"HvWizardTitle\"\n);\n\nexport default wizardTitleClasses;\n"],"names":["classKeys","wizardTitleClasses","getClasses"],"mappings":";AAiBA,MAAMA,YAAsB,CAC1B,mBACA,oBACA,kBACA,eACA,qBACA,eAAe;AAGjB,MAAMC,qBAAqBC,WACzBF,WACA,eAAe;AAGjB,MAAA,uBAAeC;"}

package/dist/esm/packages/lab/src/components/Wizard/wizardClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "@hitachivantara/uikit-react-core";
+const classKeys = ["root"];
+const wizardClasses = getClasses(classKeys, "HvWizard");
+const wizardClasses$1 = wizardClasses;
+export {
+  wizardClasses$1 as default
+};
+//# sourceMappingURL=wizardClasses.js.map

package/dist/esm/packages/lab/src/components/Wizard/wizardClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizardClasses.js","sources":["../../../../../../../src/components/Wizard/wizardClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardClasses = {\n  /** Styles applied to the component root class. */\n  root?: string;\n};\n\nconst classKeys: string[] = [\"root\"];\n\nconst wizardClasses = getClasses<HvWizardClasses>(classKeys, \"HvWizard\");\n\nexport default wizardClasses;\n"],"names":["classKeys","wizardClasses","getClasses"],"mappings":";AAOA,MAAMA,YAAsB,CAAC,MAAM;AAEnC,MAAMC,gBAAgBC,WAA4BF,WAAW,UAAU;AAEvE,MAAA,kBAAeC;"}

package/dist/esm/packages/lab/src/index.js

@@ -1,5 +1,19 @@
+import { default as default2 } from "./components/StepNavigation/stepNavigationClasses.js";
 import { HvStepNavigation } from "./components/StepNavigation/StepNavigation.js";
+import { default as default3 } from "./components/Wizard/wizardClasses.js";
+import { HvWizardContainer } from "./components/Wizard/WizardContainer/WizardContainer.js";
+import { HvWizardTitle } from "./components/Wizard/WizardTitle/WizardTitle.js";
+import { HvWizardContent } from "./components/Wizard/WizardContent/WizardContent.js";
+import { HvWizardActions } from "./components/Wizard/WizardActions/WizardActions.js";
+import { HvWizard } from "./components/Wizard/Wizard.js";
 export {
-  HvStepNavigation
+  HvStepNavigation,
+  HvWizard,
+  HvWizardActions,
+  HvWizardContainer,
+  HvWizardContent,
+  HvWizardTitle,
+  default2 as stepNavigationClasses,
+  default3 as wizardClasses
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/packages/lab/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/types/index.d.ts

@@ -3,6 +3,8 @@ import { HvBaseProps } from '@hitachivantara/uikit-react-core';
 import { HvBreakpoints } from '@hitachivantara/uikit-react-core';
 import { HvButtonProps } from '@hitachivantara/uikit-react-core';
 import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
+import { ModalProps } from '@mui/material';
+import { default as React_2 } from 'react';
 
 declare interface HvStepClasses {
     /** Styles applied to the component root class. */
@@ -52,7 +54,7 @@ declare interface HvStepClasses {
  */
 export declare const HvStepNavigation: ({ className, classes, width, steps, stepSize, showTitles, type, ...others }: HvStepNavigationProps) => JSX_2.Element;
 
-declare interface HvStepNavigationClasses {
+export declare interface HvStepNavigationClasses {
     /** Styles applied to the component root class. */
     root?: string;
     /** Styles applied to the title element. */
@@ -105,4 +107,173 @@ declare interface HvStepProps extends Pick<HvButtonProps, "onClick">, Omit<HvBas
     disabled?: boolean;
 }
 
+export declare const HvWizard: ({ className, children, onClose, handleSubmit, title, open, skippable, loading, hasSummary, summaryContent, labels, fixedHeight, customStep, ...others }: HvWizardProps) => JSX_2.Element;
+
+export declare const HvWizardActions: ({ classes, handleClose, handleSubmit, loading, skippable, labels, }: HvWizardActionsProps) => JSX_2.Element;
+
+declare type HvWizardActionsClasses = {
+    /** Styles applied to the component which contains the groups of buttons. */
+    actionsContainer?: string;
+    /** Styles applied to the component which contains the buttons. */
+    buttonsContainer?: string;
+    /** Styles applied to the Button component to override its width. */
+    buttonWidth?: string;
+    /** Styles applied to some Button components to override its left padding. */
+    buttonSpacing?: string;
+};
+
+declare interface HvWizardActionsProps extends HvBaseProps {
+    /** Function to handle the cancel button. */
+    handleClose: (event: React.SyntheticEvent, reason?: "escapeKeyDown" | "backdropClick") => void;
+    /** Function to handle the submit button. Also sends the current context state. */
+    handleSubmit: (context: any) => void;
+    /** An object containing all the labels for the wizard actions component. */
+    labels?: {
+        /** Cancel button label. */
+        cancel?: string;
+        /** Skip button label. */
+        skip?: string;
+        /** Previous button label. */
+        previous?: string;
+        /** Next button label. */
+        next?: string;
+        /** Submit button label. */
+        submit?: string;
+    };
+    /** Whether the submit button is disabled. */
+    loading?: boolean;
+    /** Enables the skip button. */
+    skippable?: boolean;
+    /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
+    classes?: HvWizardActionsClasses;
+}
+
+export declare type HvWizardClasses = {
+    /** Styles applied to the component root class. */
+    root?: string;
+};
+
+export declare const HvWizardContainer: ({ classes, className, children, handleClose, open, ...others }: HvWizardContainerProps) => JSX_2.Element;
+
+declare type HvWizardContainerClasses = {
+    /** Styles applied to the component root class. */
+    root?: string;
+    /** Style applied to the component (root). */
+    paper?: string;
+    /** Style applied to the close button. */
+    closeButton?: string;
+};
+
+declare interface HvWizardContainerProps extends Omit<HvBaseProps, "onClose"> {
+    /** Current state of the Wizard. */
+    open: boolean;
+    /** Function executed on close. */
+    handleClose: (event: React_2.SyntheticEvent, reason?: "escapeKeyDown" | "backdropClick") => void;
+    /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
+    classes?: HvWizardContainerClasses;
+}
+
+export declare const HvWizardContent: ({ classes, fixedHeight, loading, children, summaryContent, }: HvWizardContentProps) => JSX_2.Element;
+
+declare type HvWizardContentClasses = {
+    /** Style applied to the Wizard content container. */
+    contentContainer?: string;
+    /** Style applied to the Wizard to fix its height. */
+    fixedHeight?: string;
+    /** Style applied to the summary container around the page content container. */
+    summaryRef?: string;
+    /** Style applied to the Summary container to stick it to the top. */
+    summarySticky?: string;
+    /** Style applied to the Summary container to position it on the right. */
+    summaryContainer?: string;
+};
+
+declare interface HvWizardContentProps extends HvBaseProps {
+    /** Forces minimum height to the component. */
+    fixedHeight?: boolean;
+    /** Whether the loading animation is shown. */
+    loading?: boolean;
+    /** The content of the summary. */
+    summaryContent?: React_2.ReactNode;
+    /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
+    classes?: HvWizardContentClasses;
+}
+
+export declare interface HvWizardProps extends HvBaseProps {
+    /** Current state of the Wizard. */
+    open: boolean;
+    /** Function executed on close. */
+    onClose: ModalProps["onClose"];
+    /** Function executed on submit. */
+    handleSubmit: (context: HvWizardTabs<HvWizardTab>) => void;
+    /** Title for the wizard. */
+    title?: string;
+    /** An object containing all the labels for the wizard. */
+    labels?: HvWizardActionsProps["labels"] & HvWizardTitleProps["labels"];
+    /** Shows the summary button. */
+    hasSummary?: boolean;
+    /** The content of the summary. */
+    summaryContent?: React_2.ReactNode;
+    /** Enables the skip button. */
+    skippable?: boolean;
+    /** Forces minimum height to the component. */
+    fixedHeight?: boolean;
+    /** Whether the loading animation is shown. */
+    loading?: boolean;
+    /** Custom object to define type, size and width of the StepNavigation component */
+    customStep?: Pick<HvStepNavigationProps, "type" | "stepSize" | "width">;
+    /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
+    classes?: HvWizardClasses;
+}
+
+declare type HvWizardTab = {
+    name?: string;
+    valid?: boolean;
+    mustValidate?: boolean;
+    touched?: boolean;
+    form?: any;
+    children?: React_2.ReactNode;
+};
+
+declare type HvWizardTabs<T extends HvWizardTab> = {
+    [tab in number]?: T;
+};
+
+export declare const HvWizardTitle: ({ title, hasSummary, labels, classes, customStep, }: HvWizardTitleProps) => JSX_2.Element;
+
+declare type HvWizardTitleClasses = {
+    /** Styles applied to the header container. */
+    headerContainer?: string;
+    /** Styles applied to override the Dialog Title styles. */
+    messageContainer?: string;
+    /** Styles applied to the header content container. */
+    titleContainer?: string;
+    /** Styles applied to the Button component to override its width. */
+    buttonWidth?: string;
+    /** Styles applied to the Button component to override its right padding. */
+    rootSummaryButton?: string;
+    /** Styles applies to the step container. */
+    stepContainer?: string;
+};
+
+declare interface HvWizardTitleProps extends HvBaseProps {
+    /** Title for the wizard. */
+    title?: string;
+    /** Shows the summary button. */
+    hasSummary?: boolean;
+    /** An object containing all the labels for the wizard header. */
+    labels?: {
+        /** Summary button label. */
+        summary?: string;
+    };
+    /** Custom object to define type, size and width of the StepNavigation component */
+    customStep?: Pick<HvStepNavigationProps, "type" | "stepSize" | "width">;
+    /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
+    classes?: HvWizardTitleClasses;
+}
+
+export declare const stepNavigationClasses: HvStepNavigationClasses;
+
+export declare const wizardClasses: HvWizardClasses;
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.1.0",
+  "version": "5.2.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -30,7 +30,8 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-core": "^5.2.0"
+    "@hitachivantara/uikit-react-core": "^5.4.0",
+    "usehooks-ts": "^2.9.1"
   },
   "files": [
     "dist"
@@ -39,7 +40,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "cc3664804d0cd97461a994caacc15ce31ad41ffc",
+  "gitHead": "6a771d68070e4bfb03ca573900704d35934c0573",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {