@hitachivantara/uikit-react-lab 5.3.0 → 5.3.1

package/dist/esm/components/Wizard/WizardActions/WizardActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardActions.js","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport {\n  HvBaseProps,\n  HvButton,\n  HvDialogActions,\n  HvGrid,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport wizardActionsClasses, {\n  HvWizardActionsClasses,\n} from \"./wizardActionsClasses\";\nimport { styles } from \"./WizardActions.styles\";\nimport HvWizardContext, { HvWizardTabs } from \"../WizardContext\";\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,\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 { 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]);\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    <ClassNames>\n      {({ css }) => (\n        <HvDialogActions\n          className={clsx(\n            classes?.actionsContainer,\n            wizardActionsClasses.actionsContainer,\n            css(styles.actionsContainer)\n          )}\n        >\n          <HvGrid>\n            <HvButton\n              variant=\"secondaryGhost\"\n              onClick={handleClose}\n              className={clsx(\n                classes?.buttonWidth,\n                wizardActionsClasses.buttonWidth,\n                css(styles.buttonWidth)\n              )}\n            >\n              {`${labels.cancel ?? \"Cancel\"}`}\n            </HvButton>\n            {skippable && (\n              <HvButton\n                variant=\"secondaryGhost\"\n                disabled={isLastPage}\n                className={clsx(\n                  classes?.buttonWidth,\n                  wizardActionsClasses.buttonWidth,\n                  css(styles.buttonWidth)\n                )}\n                onClick={handleSkip}\n              >\n                {`${labels.skip ?? \"Skip\"}`}\n              </HvButton>\n            )}\n          </HvGrid>\n          <HvGrid\n            className={clsx(\n              classes?.buttonsContainer,\n              wizardActionsClasses.buttonsContainer,\n              css(styles.buttonsContainer)\n            )}\n          >\n            <HvButton\n              variant=\"secondaryGhost\"\n              className={clsx(\n                classes?.buttonWidth,\n                wizardActionsClasses.buttonWidth,\n                css(styles.buttonWidth)\n              )}\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={clsx(\n                  classes?.buttonWidth,\n                  wizardActionsClasses.buttonWidth,\n                  css(styles.buttonWidth)\n                )}\n                disabled={loading || !canSubmit}\n                onClick={handleSubmitInternal}\n              >\n                {`${labels.submit ?? \"Submit\"}`}\n              </HvButton>\n            ) : (\n              <HvButton\n                variant=\"secondaryGhost\"\n                className={clsx(\n                  classes?.buttonWidth,\n                  wizardActionsClasses.buttonWidth,\n                  css(styles.buttonWidth),\n                  classes?.buttonSpacing,\n                  wizardActionsClasses.buttonSpacing,\n                  css(styles.buttonSpacing)\n                )}\n                onClick={() => setTab((t) => t + 1)}\n                disabled={!skippable && !context?.[tab]?.valid}\n                endIcon={<Forwards />}\n              >\n                {`${labels.next ?? \"Next\"}`}\n              </HvButton>\n            )}\n          </HvGrid>\n        </HvDialogActions>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvWizardActions","classes","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","context","setContext","tab","setTab","useContext","HvWizardContext","pages","setPages","useState","canSubmit","setCanSubmit","useEffect","contextEntries","Object","entries","length","validWizard","every","value","valid","lastPage","isLastPage","handleSkip","useCallback","c","reduce","acc","key","child","handleSubmitInternal","ClassNames","children","css","HvDialogActions","className","clsx","actionsContainer","wizardActionsClasses","styles","_jsxs","HvGrid","_jsx","HvButton","variant","onClick","buttonWidth","disabled","buttonsContainer","t","startIcon","Backwards","buttonSpacing","endIcon","Forwards"],"mappings":"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"}
+{"version":3,"file":"WizardActions.js","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n  HvBaseProps,\n  HvButton,\n  HvDialogActions,\n  HvGrid,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport { styles } from \"./WizardActions.styles\";\nimport {\n  HvWizardContext,\n  HvWizardTabs,\n  wizardActionsClasses,\n  HvWizardActionsClasses,\n} from \"..\";\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,\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 { 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]);\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    <ClassNames>\n      {({ css, cx }) => (\n        <HvDialogActions\n          className={cx(\n            wizardActionsClasses.actionsContainer,\n            css(styles.actionsContainer),\n            classes?.actionsContainer\n          )}\n        >\n          <HvGrid>\n            <HvButton\n              variant=\"secondaryGhost\"\n              onClick={handleClose}\n              className={cx(\n                wizardActionsClasses.buttonWidth,\n                css(styles.buttonWidth),\n                classes?.buttonWidth\n              )}\n            >\n              {`${labels.cancel ?? \"Cancel\"}`}\n            </HvButton>\n            {skippable && (\n              <HvButton\n                variant=\"secondaryGhost\"\n                disabled={isLastPage}\n                className={cx(\n                  wizardActionsClasses.buttonWidth,\n                  css(styles.buttonWidth),\n                  classes?.buttonWidth\n                )}\n                onClick={handleSkip}\n              >\n                {`${labels.skip ?? \"Skip\"}`}\n              </HvButton>\n            )}\n          </HvGrid>\n          <HvGrid\n            className={cx(\n              wizardActionsClasses.buttonsContainer,\n              css(styles.buttonsContainer),\n              classes?.buttonsContainer\n            )}\n          >\n            <HvButton\n              variant=\"secondaryGhost\"\n              className={cx(\n                wizardActionsClasses.buttonWidth,\n                css(styles.buttonWidth),\n                classes?.buttonWidth\n              )}\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={cx(\n                  wizardActionsClasses.buttonWidth,\n                  css(styles.buttonWidth),\n                  classes?.buttonWidth\n                )}\n                disabled={loading || !canSubmit}\n                onClick={handleSubmitInternal}\n              >\n                {`${labels.submit ?? \"Submit\"}`}\n              </HvButton>\n            ) : (\n              <HvButton\n                variant=\"secondaryGhost\"\n                className={cx(\n                  wizardActionsClasses.buttonWidth,\n                  wizardActionsClasses.buttonSpacing,\n                  css(styles.buttonWidth),\n                  css(styles.buttonSpacing),\n                  classes?.buttonWidth,\n                  classes?.buttonSpacing\n                )}\n                onClick={() => setTab((t) => t + 1)}\n                disabled={!skippable && !context?.[tab]?.valid}\n                endIcon={<Forwards />}\n              >\n                {`${labels.next ?? \"Next\"}`}\n              </HvButton>\n            )}\n          </HvGrid>\n        </HvDialogActions>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvWizardActions","classes","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","context","setContext","tab","setTab","useContext","HvWizardContext","pages","setPages","useState","canSubmit","setCanSubmit","useEffect","contextEntries","Object","entries","length","validWizard","every","value","valid","lastPage","isLastPage","handleSkip","useCallback","c","reduce","acc","key","child","handleSubmitInternal","ClassNames","children","css","cx","HvDialogActions","className","wizardActionsClasses","actionsContainer","styles","_jsxs","HvGrid","_jsx","HvButton","variant","onClick","buttonWidth","disabled","buttonsContainer","t","startIcon","Backwards","buttonSpacing","endIcon","Forwards"],"mappings":";;;;;;;;AA8CO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC,YAAY;AAAA,EACZC,SAAS;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,QAAQ;AAAA,EACV;AACoB,MAAM;AACpB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,WAAWC,eAAe;AACvE,QAAM,CAACC,OAAOC,QAAQ,IAAIC,SAAS,CAAC;AACpC,QAAM,CAACC,WAAWC,YAAY,IAAIF,SAAS,KAAK;AAEhDG,YAAU,MAAM;AACRC,UAAAA,iBAAiBC,OAAOC,QAAQd,OAAO;AAC7C,QAAIY,eAAeG,QAAQ;AACzBR,eAASK,eAAeG,MAAM;AAE9B,YAAMC,cAAcH,OAAOC,QAAQd,OAAO,EAAEiB,MAC1C,CAAC,GAAGC,KAAK,MAAMA,+BAAOC,KAAK;AAE7B,UAAIH,gBAAgBP,WAAW;AAC7BC,qBAAaM,WAAW;AAAA,MAC1B;AAAA,IACF;AAAA,EAAA,GACC,CAAChB,OAAO,CAAC;AAEZ,QAAMoB,WAAWd,QAAQ;AACzB,QAAMe,aAAanB,OAAOkB;AAEpBE,QAAAA,aAAaC,YAAY,MAAM;AACvBC,eAAAA,CAAAA,MACVX,OAAOC,QAAQU,CAAC,EAAEC,OAChB,CAACC,KAAK,CAACC,KAAKC,KAAK,OAAO;AAAA,MACtB,GAAGF;AAAAA,MACH,CAAC,CAACC,GAAG,GAAG;AAAA,QACN,GAAGC;AAAAA,QACHT,QAAOS,+BAAOT,WAAU;AAAA,MAC1B;AAAA,IAAA,IAEF,GACD;AAEHhB,WAAOiB,QAAQ;AAAA,EACd,GAAA,CAACjB,QAAQiB,UAAUnB,UAAU,CAAC;AAE3B4B,QAAAA,uBAAuBN,YAC3B,MAAMhC,aAAaS,OAAO,GAC1B,CAACT,cAAcS,OAAO,CAAC;AAGzB,6BACG8B,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA;;kCACNC,iBAAe;AAAA,QACdC,WAAWF,GACTG,qBAAqBC,kBACrBL,IAAIM,OAAOD,gBAAgB,GAC3BhD,mCAASgD,gBAAgB;AAAA,QACzBN,UAAA,CAEFQ,qBAACC,QAAM;AAAA,UAAAT,UAAA,CACLU,oBAACC,UAAQ;AAAA,YACPC,SAAQ;AAAA,YACRC,SAAStD;AAAAA,YACT6C,WAAWF,GACTG,qBAAqBS,aACrBb,IAAIM,OAAOO,WAAW,GACtBxD,mCAASwD,WAAW;AAAA,YACpBd,UAEA,GAAErC,OAAOC,UAAU;AAAA,UAAA,CAAU,GAEhCF,aACCgD,oBAACC,UAAQ;AAAA,YACPC,SAAQ;AAAA,YACRG,UAAUzB;AAAAA,YACVc,WAAWF,GACTG,qBAAqBS,aACrBb,IAAIM,OAAOO,WAAW,GACtBxD,mCAASwD,WAAW;AAAA,YAEtBD,SAAStB;AAAAA,YAAWS,UAElB,GAAErC,OAAOI,QAAQ;AAAA,UAAA,CAEtB,CAAA;AAAA,QAAA,CACM,GACTyC,qBAACC,QAAM;AAAA,UACLL,WAAWF,GACTG,qBAAqBW,kBACrBf,IAAIM,OAAOS,gBAAgB,GAC3B1D,mCAAS0D,gBAAgB;AAAA,UACzBhB,UAAA,CAEFU,oBAACC,UAAQ;AAAA,YACPC,SAAQ;AAAA,YACRR,WAAWF,GACTG,qBAAqBS,aACrBb,IAAIM,OAAOO,WAAW,GACtBxD,mCAASwD,WAAW;AAAA,YAEtBC,UAAU5C,OAAO;AAAA,YACjB0C,SAASA,MAAMzC,OAAQ6C,CAAAA,MAAMA,IAAI,CAAC;AAAA,YAClCC,WAAWR,oBAACS,WAAa,EAAA;AAAA,YAAAnB,UAEvB,GAAErC,OAAOG,YAAY;AAAA,UAAA,CAAY,GAEpCwB,aACCoB,oBAACC,UAAQ;AAAA,YACPC,SAAQ;AAAA,YACRR,WAAWF,GACTG,qBAAqBS,aACrBb,IAAIM,OAAOO,WAAW,GACtBxD,mCAASwD,WAAW;AAAA,YAEtBC,UAAUtD,WAAW,CAACiB;AAAAA,YACtBmC,SAASf;AAAAA,YAAqBE,UAE5B,GAAErC,OAAOK,UAAU;AAAA,UAAA,CACZ,IAEX0C,oBAACC,UAAQ;AAAA,YACPC,SAAQ;AAAA,YACRR,WAAWF,GACTG,qBAAqBS,aACrBT,qBAAqBe,eACrBnB,IAAIM,OAAOO,WAAW,GACtBb,IAAIM,OAAOa,aAAa,GACxB9D,mCAASwD,aACTxD,mCAAS8D,aAAa;AAAA,YAExBP,SAASA,MAAMzC,OAAQ6C,CAAAA,MAAMA,IAAI,CAAC;AAAA,YAClCF,UAAU,CAACrD,aAAa,GAACO,wCAAUE,SAAVF,mBAAgBmB;AAAAA,YACzCiC,SAASX,oBAACY,UAAY,EAAA;AAAA,YAAAtB,UAEpB,GAAErC,OAAOE,QAAQ;AAAA,UAAA,CAEtB,CAAA;AAAA,QAAA,CACM,CAAA;AAAA,MAAA,CAAA;AAAA;AAAA,EAAA,CAGF;AAEjB;"}

package/dist/esm/components/Wizard/WizardContainer/WizardContainer.js

@@ -1,6 +1,5 @@
 import { ClassNames } from "@emotion/react";
 import { HvDialog } from "@hitachivantara/uikit-react-core";
-import { clsx } from "clsx";
 import wizardContainerClasses from "./wizardContainerClasses.js";
 import { styles } from "./WizardContainer.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
@@ -14,13 +13,14 @@ const HvWizardContainer = ({
 }) => {
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx(HvDialog, {
       classes: {
-        closeButton: clsx(classes == null ? void 0 : classes.closeButton, wizardContainerClasses.closeButton, css(styles.closeButton)),
-        paper: clsx(classes == null ? void 0 : classes.paper, wizardContainerClasses.paper, css(styles.paper))
+        closeButton: cx(wizardContainerClasses.closeButton, css(styles.closeButton), classes == null ? void 0 : classes.closeButton),
+        paper: cx(wizardContainerClasses.paper, css(styles.paper), classes == null ? void 0 : classes.paper)
       },
-      className: clsx(className, classes == null ? void 0 : classes.root, wizardContainerClasses.root),
+      className: cx(wizardContainerClasses.root, className, classes == null ? void 0 : classes.root),
       open,
       onClose: handleClose,
       ...others,

package/dist/esm/components/Wizard/WizardContainer/WizardContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContainer.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialog } from \"@hitachivantara/uikit-react-core\";\nimport { clsx } from \"clsx\";\nimport wizardContainerClasses, {\n  HvWizardContainerClasses,\n} from \"./wizardContainerClasses\";\nimport { styles } from \"./WizardContainer.styles\";\nimport React from \"react\";\n\nexport interface HvWizardContainerProps extends Omit<HvBaseProps, \"onClose\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  handleClose: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = ({\n  classes,\n  className,\n  children,\n  handleClose,\n  open,\n  ...others\n}: HvWizardContainerProps) => {\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvDialog\n          classes={{\n            closeButton: clsx(\n              classes?.closeButton,\n              wizardContainerClasses.closeButton,\n              css(styles.closeButton)\n            ),\n            paper: clsx(\n              classes?.paper,\n              wizardContainerClasses.paper,\n              css(styles.paper)\n            ),\n          }}\n          className={clsx(\n            className,\n            classes?.root,\n            wizardContainerClasses.root\n          )}\n          open={open}\n          onClose={handleClose}\n          {...others}\n        >\n          {children}\n        </HvDialog>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvWizardContainer","classes","className","children","handleClose","open","others","ClassNames","css","HvDialog","closeButton","clsx","wizardContainerClasses","styles","paper","root","onClose"],"mappings":";;;;;;AAqBO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AAC5B,6BACGC,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,IAAAA,0BACDC,UAAQ;AAAA,MACPR,SAAS;AAAA,QACPS,aAAaC,KACXV,mCAASS,aACTE,uBAAuBF,aACvBF,IAAIK,OAAOH,WAAW,CAAC;AAAA,QAEzBI,OAAOH,KACLV,mCAASa,OACTF,uBAAuBE,OACvBN,IAAIK,OAAOC,KAAK,CAAC;AAAA,MAErB;AAAA,MACAZ,WAAWS,KACTT,WACAD,mCAASc,MACTH,uBAAuBG,IAAI;AAAA,MAE7BV;AAAAA,MACAW,SAASZ;AAAAA,MAAY,GACjBE;AAAAA,MAAMH;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGF;AAEjB;"}
+{"version":3,"file":"WizardContainer.js","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialog } from \"@hitachivantara/uikit-react-core\";\nimport wizardContainerClasses, {\n  HvWizardContainerClasses,\n} from \"./wizardContainerClasses\";\nimport { styles } from \"./WizardContainer.styles\";\nimport React from \"react\";\n\nexport interface HvWizardContainerProps extends Omit<HvBaseProps, \"onClose\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  handleClose: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = ({\n  classes,\n  className,\n  children,\n  handleClose,\n  open,\n  ...others\n}: HvWizardContainerProps) => {\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvDialog\n          classes={{\n            closeButton: cx(\n              wizardContainerClasses.closeButton,\n              css(styles.closeButton),\n              classes?.closeButton\n            ),\n            paper: cx(\n              wizardContainerClasses.paper,\n              css(styles.paper),\n              classes?.paper\n            ),\n          }}\n          className={cx(wizardContainerClasses.root, className, classes?.root)}\n          open={open}\n          onClose={handleClose}\n          {...others}\n        >\n          {children}\n        </HvDialog>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvWizardContainer","classes","className","children","handleClose","open","others","ClassNames","css","cx","HvDialog","closeButton","wizardContainerClasses","styles","paper","root","onClose"],"mappings":";;;;;AAoBO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AAC5B,6BACGC,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,0BACNC,UAAQ;AAAA,MACPT,SAAS;AAAA,QACPU,aAAaF,GACXG,uBAAuBD,aACvBH,IAAIK,OAAOF,WAAW,GACtBV,mCAASU,WAAW;AAAA,QAEtBG,OAAOL,GACLG,uBAAuBE,OACvBN,IAAIK,OAAOC,KAAK,GAChBb,mCAASa,KAAK;AAAA,MAElB;AAAA,MACAZ,WAAWO,GAAGG,uBAAuBG,MAAMb,WAAWD,mCAASc,IAAI;AAAA,MACnEV;AAAAA,MACAW,SAASZ;AAAAA,MAAY,GACjBE;AAAAA,MAAMH;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGF;AAEjB;"}

package/dist/esm/components/Wizard/WizardContent/WizardContent.js

@@ -1,12 +1,11 @@
 import { ClassNames } from "@emotion/react";
 import { HvDialogContent } from "@hitachivantara/uikit-react-core";
-import { clsx } from "clsx";
-import wizardContentClasses from "./wizardContentClasses.js";
 import { useElementSize } from "usehooks-ts";
-import { styles } from "./WizardContent.styles.js";
 import React, { useContext, useRef, useState, useCallback, useEffect } from "react";
+import { styles } from "./WizardContent.styles.js";
 import { LoadingContainer } from "./LoadingContainer.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import wizardContentClasses from "./wizardContentClasses.js";
 import HvWizardContext from "../WizardContext/WizardContext.js";
 const DRAWER_PERCENTAGE = 0.3;
 const DRAWER_MIN_WIDTH = 280;
@@ -94,9 +93,10 @@ const HvWizardContent = ({
   const translateX = summaryWidth ? summaryWidth + 10 : 450;
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxs("div", {
-      className: clsx(classes == null ? void 0 : classes.summaryRef, wizardContentClasses.summaryRef, css(styles.summaryRef)),
+      className: cx(wizardContentClasses.summaryRef, css(styles.summaryRef), classes == null ? void 0 : classes.summaryRef),
       ref: (el) => {
         containerRef(el);
         if (el) {
@@ -104,9 +104,9 @@ const HvWizardContent = ({
         }
       },
       children: [summary !== null && /* @__PURE__ */ jsx("div", {
-        className: clsx(classes == null ? void 0 : classes.summarySticky, wizardContentClasses.summarySticky, css(styles.summarySticky)),
+        className: cx(wizardContentClasses.summarySticky, css(styles.summarySticky), classes == null ? void 0 : classes.summarySticky),
         children: /* @__PURE__ */ jsx("div", {
-          className: clsx(classes == null ? void 0 : classes.summaryContainer, wizardContentClasses.summaryContainer, css(styles.summaryContainer)),
+          className: cx(wizardContentClasses.summaryContainer, css(styles.summaryContainer), classes == null ? void 0 : classes.summaryContainer),
           style: {
             left: summaryLeft,
             width: summaryWidth,
@@ -116,7 +116,7 @@ const HvWizardContent = ({
           children: summaryContent
         })
       }), /* @__PURE__ */ jsx(HvDialogContent, {
-        className: clsx(classes == null ? void 0 : classes.contentContainer, wizardContentClasses.contentContainer, css(styles.contentContainer), fixedHeight && clsx(classes == null ? void 0 : classes.fixedHeight, wizardContentClasses.fixedHeight, css(styles.fixedHeight))),
+        className: cx(wizardContentClasses.contentContainer, fixedHeight && wizardContentClasses.fixedHeight, css(styles.contentContainer), fixedHeight && css(styles.fixedHeight), classes == null ? void 0 : classes.contentContainer, fixedHeight && (classes == null ? void 0 : classes.fixedHeight)),
         indentContent: true,
         children: /* @__PURE__ */ jsx(LoadingContainer, {
           hidden: !loading,

package/dist/esm/components/Wizard/WizardContent/WizardContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContent.js","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport { clsx } from \"clsx\";\nimport wizardContentClasses, {\n  HvWizardContentClasses,\n} from \"./wizardContentClasses\";\nimport { useElementSize } from \"usehooks-ts\";\nimport { styles } from \"./WizardContent.styles\";\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport HvWizardContext, { HvWizardTabs } from \"../WizardContext\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport interface HvWizardContentProps extends HvBaseProps {\n  /** Forces minimum height to the component. */\n  fixedHeight?: boolean;\n  /** Whether the loading animation is shown. */\n  loading?: boolean;\n  /** The content of the summary. */\n  summaryContent?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n  classes,\n  fixedHeight = false,\n  loading = false,\n  children,\n  summaryContent,\n}: HvWizardContentProps) => {\n  const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n  const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n  const initialContext = arrayChildren.reduce(\n    (acc, child: ChildElement, index) => {\n      const invalid =\n        \"mustValidate\" in child.props && child.props.mustValidate === true\n          ? false\n          : null;\n      const valid = invalid ?? (index === 0 || null);\n      return {\n        ...acc,\n        [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n      };\n    },\n    {}\n  );\n\n  const summaryRef = useRef<HTMLElement>();\n  const resizedRef = useRef({ height: 0, width: 0 });\n  const [containerRef, sizes] = useElementSize();\n\n  const [summaryHeight, setSummaryHeight] = useState(0);\n  const [summaryWidth, setSummaryWidth] = useState(0);\n  const [summaryLeft, setSummaryLeft] = useState(0);\n\n  const updateSummaryMeasures = useCallback((newSizes) => {\n    const modalWidth = newSizes.width;\n    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n    setSummaryHeight(newSizes.height);\n    setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n    resizedRef.current = {\n      height: newSizes.height,\n      width: newSizes.width,\n    };\n  }, []);\n\n  useEffect(() => {\n    const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n    if (\n      (summary && sizes.height !== resizedRef.current.height) ||\n      sizes.width !== resizedRef.current.width\n    ) {\n      updateSummaryMeasures(sizes);\n    }\n\n    if (pageHeight && sizes.height !== pageHeight) {\n      updateSummaryMeasures({\n        width: sizes.width,\n        height: pageHeight,\n      });\n    }\n  }, [tab, sizes, summary, updateSummaryMeasures]);\n\n  useEffect(() => {\n    setContext(initialContext);\n  }, []);\n\n  useEffect(() => {\n    if (tab && !context[tab]?.touched) {\n      const updatedContext = Object.entries(context).reduce(\n        (acc, [key, childState]) => ({\n          ...acc,\n          ...(+key <= tab\n            ? {\n                [key]: {\n                  ...childState,\n                  touched: true,\n                  valid: childState?.valid ?? true,\n                },\n              }\n            : { [key]: childState }),\n        }),\n        {}\n      );\n\n      setContext(updatedContext);\n    }\n  }, [tab]);\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <div\n          className={clsx(\n            classes?.summaryRef,\n            wizardContentClasses.summaryRef,\n            css(styles.summaryRef)\n          )}\n          ref={(el) => {\n            containerRef(el);\n            if (el) {\n              summaryRef.current = el;\n            }\n          }}\n        >\n          {summary !== null && (\n            <div\n              className={clsx(\n                classes?.summarySticky,\n                wizardContentClasses.summarySticky,\n                css(styles.summarySticky)\n              )}\n            >\n              <div\n                className={clsx(\n                  classes?.summaryContainer,\n                  wizardContentClasses.summaryContainer,\n                  css(styles.summaryContainer)\n                )}\n                style={{\n                  left: summaryLeft,\n                  width: summaryWidth,\n                  height: summaryHeight,\n                  transform: `translate(${summary ? 0 : translateX}px, 0)`,\n                }}\n              >\n                {summaryContent}\n              </div>\n            </div>\n          )}\n          <HvDialogContent\n            className={clsx(\n              classes?.contentContainer,\n              wizardContentClasses.contentContainer,\n              css(styles.contentContainer),\n              fixedHeight &&\n                clsx(\n                  classes?.fixedHeight,\n                  wizardContentClasses.fixedHeight,\n                  css(styles.fixedHeight)\n                )\n            )}\n            indentContent\n          >\n            <LoadingContainer hidden={!loading}>\n              {React.Children.map(arrayChildren, (child, index) => {\n                if (index === tab) {\n                  return React.cloneElement(child as React.ReactElement, {\n                    tab,\n                  });\n                }\n                return null;\n              })}\n            </LoadingContainer>\n          </HvDialogContent>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","summaryContent","context","setContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","ClassNames","css","className","clsx","wizardContentClasses","styles","ref","el","summarySticky","summaryContainer","style","left","transform","_jsx","HvDialogContent","contentContainer","indentContent","LoadingContainer","hidden","map","cloneElement"],"mappings":"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"}
+{"version":3,"file":"WizardContent.js","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport { useElementSize } from \"usehooks-ts\";\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  HvWizardContext,\n  HvWizardTabs,\n  wizardContentClasses,\n  HvWizardContentClasses,\n} from \"..\";\nimport { styles } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport interface HvWizardContentProps extends HvBaseProps {\n  /** Forces minimum height to the component. */\n  fixedHeight?: boolean;\n  /** Whether the loading animation is shown. */\n  loading?: boolean;\n  /** The content of the summary. */\n  summaryContent?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n  classes,\n  fixedHeight = false,\n  loading = false,\n  children,\n  summaryContent,\n}: HvWizardContentProps) => {\n  const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n  const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n  const initialContext = arrayChildren.reduce(\n    (acc, child: ChildElement, index) => {\n      const invalid =\n        \"mustValidate\" in child.props && child.props.mustValidate === true\n          ? false\n          : null;\n      const valid = invalid ?? (index === 0 || null);\n      return {\n        ...acc,\n        [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n      };\n    },\n    {}\n  );\n\n  const summaryRef = useRef<HTMLElement>();\n  const resizedRef = useRef({ height: 0, width: 0 });\n  const [containerRef, sizes] = useElementSize();\n\n  const [summaryHeight, setSummaryHeight] = useState(0);\n  const [summaryWidth, setSummaryWidth] = useState(0);\n  const [summaryLeft, setSummaryLeft] = useState(0);\n\n  const updateSummaryMeasures = useCallback((newSizes) => {\n    const modalWidth = newSizes.width;\n    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n    setSummaryHeight(newSizes.height);\n    setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n    resizedRef.current = {\n      height: newSizes.height,\n      width: newSizes.width,\n    };\n  }, []);\n\n  useEffect(() => {\n    const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n    if (\n      (summary && sizes.height !== resizedRef.current.height) ||\n      sizes.width !== resizedRef.current.width\n    ) {\n      updateSummaryMeasures(sizes);\n    }\n\n    if (pageHeight && sizes.height !== pageHeight) {\n      updateSummaryMeasures({\n        width: sizes.width,\n        height: pageHeight,\n      });\n    }\n  }, [tab, sizes, summary, updateSummaryMeasures]);\n\n  useEffect(() => {\n    setContext(initialContext);\n  }, []);\n\n  useEffect(() => {\n    if (tab && !context[tab]?.touched) {\n      const updatedContext = Object.entries(context).reduce(\n        (acc, [key, childState]) => ({\n          ...acc,\n          ...(+key <= tab\n            ? {\n                [key]: {\n                  ...childState,\n                  touched: true,\n                  valid: childState?.valid ?? true,\n                },\n              }\n            : { [key]: childState }),\n        }),\n        {}\n      );\n\n      setContext(updatedContext);\n    }\n  }, [tab]);\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            wizardContentClasses.summaryRef,\n            css(styles.summaryRef),\n            classes?.summaryRef\n          )}\n          ref={(el) => {\n            containerRef(el);\n            if (el) {\n              summaryRef.current = el;\n            }\n          }}\n        >\n          {summary !== null && (\n            <div\n              className={cx(\n                wizardContentClasses.summarySticky,\n                css(styles.summarySticky),\n                classes?.summarySticky\n              )}\n            >\n              <div\n                className={cx(\n                  wizardContentClasses.summaryContainer,\n                  css(styles.summaryContainer),\n                  classes?.summaryContainer\n                )}\n                style={{\n                  left: summaryLeft,\n                  width: summaryWidth,\n                  height: summaryHeight,\n                  transform: `translate(${summary ? 0 : translateX}px, 0)`,\n                }}\n              >\n                {summaryContent}\n              </div>\n            </div>\n          )}\n          <HvDialogContent\n            className={cx(\n              wizardContentClasses.contentContainer,\n              fixedHeight && wizardContentClasses.fixedHeight,\n              css(styles.contentContainer),\n              fixedHeight && css(styles.fixedHeight),\n              classes?.contentContainer,\n              fixedHeight && classes?.fixedHeight\n            )}\n            indentContent\n          >\n            <LoadingContainer hidden={!loading}>\n              {React.Children.map(arrayChildren, (child, index) => {\n                if (index === tab) {\n                  return React.cloneElement(child as React.ReactElement, {\n                    tab,\n                  });\n                }\n                return null;\n              })}\n            </LoadingContainer>\n          </HvDialogContent>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","summaryContent","context","setContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","ClassNames","css","cx","className","wizardContentClasses","styles","ref","el","summarySticky","summaryContainer","style","left","transform","_jsx","HvDialogContent","contentContainer","indentContent","LoadingContainer","hidden","map","cloneElement"],"mappings":"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"}

package/dist/esm/components/Wizard/WizardTitle/WizardTitle.js

@@ -1,13 +1,12 @@
 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 "clsx";
-import wizardTitleClasses from "./wizardTitleClasses.js";
-import { styles } from "./WizardTitle.styles.js";
 import { useContext, useState, useEffect } from "react";
-import HvWizardContext from "../WizardContext/WizardContext.js";
+import { styles } from "./WizardTitle.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import wizardTitleClasses from "./wizardTitleClasses.js";
 import { HvStepNavigation } from "../../StepNavigation/StepNavigation.js";
+import HvWizardContext from "../WizardContext/WizardContext.js";
 const switchTabState = (state, currentTab, index) => {
   if (index === currentTab)
     return "Current";
@@ -60,23 +59,24 @@ const HvWizardTitle = ({
   };
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx(HvDialogTitle, {
-      className: clsx(classes == null ? void 0 : classes.headerContainer, wizardTitleClasses.headerContainer, css(styles.headerContainer)),
+      className: cx(wizardTitleClasses.headerContainer, css(styles.headerContainer), classes == null ? void 0 : classes.headerContainer),
       classes: {
-        messageContainer: clsx(classes == null ? void 0 : classes.messageContainer, wizardTitleClasses.messageContainer, css(styles.messageContainer))
+        messageContainer: cx(wizardTitleClasses.messageContainer, css(styles.messageContainer), classes == null ? void 0 : classes.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)),
+        className: cx(wizardTitleClasses.titleContainer, css(styles.titleContainer), classes == null ? void 0 : classes.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)),
+          className: cx(wizardTitleClasses.stepContainer, css(styles.stepContainer), classes == null ? void 0 : classes.stepContainer),
           steps,
           type: (customStep == null ? void 0 : customStep.type) ?? "Default",
           stepSize: (customStep == null ? void 0 : customStep.stepSize) ?? "xs",
@@ -88,9 +88,9 @@ const HvWizardTitle = ({
           }
         }), hasSummary && /* @__PURE__ */ jsx(HvButton, {
           variant: "secondarySubtle",
-          className: clsx(classes == null ? void 0 : classes.buttonWidth, wizardTitleClasses.buttonWidth, css(styles.buttonWidth)),
+          className: cx(wizardTitleClasses.buttonWidth, css(styles.buttonWidth), classes == null ? void 0 : classes.buttonWidth),
           classes: {
-            root: clsx(classes == null ? void 0 : classes.rootSummaryButton, wizardTitleClasses.rootSummaryButton, css(styles.rootSummaryButton))
+            root: cx(wizardTitleClasses.rootSummaryButton, css(styles.rootSummaryButton), classes == null ? void 0 : classes.rootSummaryButton)
           },
           onClick: toggleSummary,
           startIcon: /* @__PURE__ */ jsx(Report, {}),

package/dist/esm/components/Wizard/WizardTitle/WizardTitle.js.map

@@ -1 +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 { useContext, useEffect, useState } from \"react\";\nimport { HvStepProps } from \"components/StepNavigation/DefaultNavigation\";\nimport { HvStepNavigation, HvStepNavigationProps } from \"components\";\nimport HvWizardContext from \"../WizardContext/WizardContext\";\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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"}
+{"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 { useContext, useEffect, useState } from \"react\";\nimport { HvStepNavigation, HvStepNavigationProps } from \"components\";\nimport { HvStepProps } from \"components/StepNavigation/DefaultNavigation\";\nimport { HvWizardContext, wizardTitleClasses, HvWizardTitleClasses } from \"..\";\nimport { styles } from \"./WizardTitle.styles\";\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, cx }) => (\n        <HvDialogTitle\n          className={cx(\n            wizardTitleClasses.headerContainer,\n            css(styles.headerContainer),\n            classes?.headerContainer\n          )}\n          classes={{\n            messageContainer: cx(\n              wizardTitleClasses.messageContainer,\n              css(styles.messageContainer),\n              classes?.messageContainer\n            ),\n          }}\n        >\n          <HvGrid\n            container\n            justifyContent=\"space-between\"\n            alignItems=\"center\"\n            className={cx(\n              wizardTitleClasses.titleContainer,\n              css(styles.titleContainer),\n              classes?.titleContainer\n            )}\n          >\n            {title && (\n              <HvTypography variant=\"title3\" component=\"h3\">\n                {title}\n              </HvTypography>\n            )}\n            {!!steps.length && (\n              <HvStepNavigation\n                className={cx(\n                  wizardTitleClasses.stepContainer,\n                  css(styles.stepContainer),\n                  classes?.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={cx(\n                  wizardTitleClasses.buttonWidth,\n                  css(styles.buttonWidth),\n                  classes?.buttonWidth\n                )}\n                classes={{\n                  root: cx(\n                    wizardTitleClasses.rootSummaryButton,\n                    css(styles.rootSummaryButton),\n                    classes?.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","cx","HvDialogTitle","className","wizardTitleClasses","headerContainer","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/index.js

@@ -8,7 +8,8 @@ import { default as default5 } from "./components/Wizard/WizardContainer/wizardC
 import { HvWizardContainer } from "./components/Wizard/WizardContainer/WizardContainer.js";
 import { default as default6 } from "./components/Wizard/WizardContent/wizardContentClasses.js";
 import { HvWizardContent } from "./components/Wizard/WizardContent/WizardContent.js";
-import { default as default7 } from "./components/Wizard/WizardTitle/wizardTitleClasses.js";
+import { default as default7 } from "./components/Wizard/WizardContext/WizardContext.js";
+import { default as default8 } from "./components/Wizard/WizardTitle/wizardTitleClasses.js";
 import { HvWizardTitle } from "./components/Wizard/WizardTitle/WizardTitle.js";
 export {
   HvStepNavigation,
@@ -16,12 +17,13 @@ export {
   HvWizardActions,
   HvWizardContainer,
   HvWizardContent,
+  default7 as HvWizardContext,
   HvWizardTitle,
   default2 as stepNavigationClasses,
   default4 as wizardActionsClasses,
   default3 as wizardClasses,
   default5 as wizardContainerClasses,
   default6 as wizardContentClasses,
-  default7 as wizardTitleClasses
+  default8 as wizardTitleClasses
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/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

@@ -1,3 +1,4 @@
+import { Dispatch } from 'react';
 import { HvAvatarSize } from '@hitachivantara/uikit-react-core';
 import { HvBaseProps } from '@hitachivantara/uikit-react-core';
 import { HvBreakpoints } from '@hitachivantara/uikit-react-core';
@@ -6,6 +7,7 @@ import { HvStepNavigationProps as HvStepNavigationProps_2 } from 'components';
 import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 import { ModalProps } from '@mui/material';
 import { default as React_2 } from 'react';
+import { SetStateAction } from 'react';
 
 declare interface HvStepClasses {
     /** Styles applied to the component root class. */
@@ -200,6 +202,17 @@ export declare interface HvWizardContentProps extends HvBaseProps {
     classes?: HvWizardContentClasses;
 }
 
+export declare const HvWizardContext: React_2.Context<HvWizardContextProp>;
+
+declare type HvWizardContextProp = {
+    context: HvWizardTabs;
+    setContext: React_2.Dispatch<React_2.SetStateAction<HvWizardTabs>>;
+    summary: boolean;
+    setSummary: React_2.Dispatch<React_2.SetStateAction<boolean>>;
+    tab: number;
+    setTab: Dispatch<SetStateAction<number>>;
+};
+
 export declare interface HvWizardProps extends HvBaseProps {
     /** Current state of the Wizard. */
     open: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-core": "^5.7.0",
+    "@hitachivantara/uikit-react-core": "^5.7.1",
     "clsx": "^1.2.1",
     "usehooks-ts": "^2.9.1"
   },
@@ -41,7 +41,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "70863685a81d8e910d8b1c36c044e978e7d9a6bc",
+  "gitHead": "c3b256edc78382d2ccb89104a5570d076dd52034",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {