@hitachivantara/uikit-react-lab 5.11.2 → 5.12.0

package/dist/cjs/components/Wizard/WizardActions/WizardActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WizardActions.cjs","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogActions,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardActions.styles\";\n\nexport { staticClasses as wizardActionsClasses };\n\nexport type HvWizardActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n  /** Function to handle the cancel button. */\n  handleClose: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** Function to handle the submit button. Also sends the current context state. */\n  handleSubmit: (context: any) => void;\n  /** An object containing all the labels for the wizard actions component. */\n  labels?: {\n    /** Cancel button label. */\n    cancel?: string;\n    /** Skip button label. */\n    skip?: string;\n    /** Previous button label. */\n    previous?: string;\n    /** Next button label. */\n    next?: string;\n    /** Submit button label. */\n    submit?: string;\n  };\n  /** Whether the submit button is disabled. */\n  loading?: boolean;\n  /** Enables the skip button. */\n  skippable?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardActionsClasses;\n}\n\nexport const HvWizardActions = ({\n  classes: classesProp,\n  handleClose,\n  handleSubmit,\n  loading = false,\n  skippable = false,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n  },\n}: HvWizardActionsProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n  const [pages, setPages] = useState(0);\n  const [canSubmit, setCanSubmit] = useState(false);\n\n  useEffect(() => {\n    const contextEntries = Object.entries(context);\n    if (contextEntries.length) {\n      setPages(contextEntries.length);\n\n      const validWizard = Object.entries(context).every(\n        ([, value]) => value?.valid\n      );\n      if (validWizard !== canSubmit) {\n        setCanSubmit(validWizard);\n      }\n    }\n  }, [context, canSubmit, setCanSubmit, setPages]);\n\n  const lastPage = pages - 1;\n  const isLastPage = tab >= lastPage;\n\n  const handleSkip = useCallback(() => {\n    setContext((c) =>\n      Object.entries(c).reduce(\n        (acc, [key, child]) => ({\n          ...acc,\n          [+key]: {\n            ...child,\n            valid: child?.valid !== false,\n          },\n        }),\n        {} as HvWizardTabs\n      )\n    );\n    setTab(lastPage);\n  }, [setTab, lastPage, setContext]);\n\n  const handleSubmitInternal = useCallback(\n    () => handleSubmit(context),\n    [handleSubmit, context]\n  );\n\n  return (\n    <HvDialogActions className={classes.actionsContainer}>\n      <HvButton\n        variant=\"secondaryGhost\"\n        onClick={handleClose}\n        className={classes.buttonWidth}\n      >\n        {`${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        &nbsp;\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={() => setTab((t) => t + 1)}\n            disabled={!skippable && !context?.[tab]?.valid}\n            endIcon={<Forwards />}\n          >\n            {`${labels.next ?? \"Next\"}`}\n          </HvButton>\n        )}\n      </div>\n    </HvDialogActions>\n  );\n};\n"],"names":["HvWizardActions","classes","classesProp","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","css","cx","useClasses","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","jsxs","HvDialogActions","actionsContainer","jsx","HvButton","buttonWidth","flex","buttonsContainer","t","Backwards","buttonSpacing","Forwards"],"mappings":";;;;;;;;AA8CO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC;AAAAA,EACTC;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,IAAEX;AAAAA,IAASY;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,qBAAAA,WAAWb,WAAW;AAE7C,QAAA;AAAA,IAAEc;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,cAAAA,OAAe;AACvE,QAAM,CAACC,OAAOC,QAAQ,IAAIC,eAAS,CAAC;AACpC,QAAM,CAACC,WAAWC,YAAY,IAAIF,eAAS,KAAK;AAEhDG,QAAAA,UAAU,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,KACxB;AACA,UAAIH,gBAAgBP,WAAW;AAC7BC,qBAAaM,WAAW;AAAA,MAC1B;AAAA,IACF;AAAA,KACC,CAAChB,SAASS,WAAWC,cAAcH,QAAQ,CAAC;AAE/C,QAAMa,WAAWd,QAAQ;AACzB,QAAMe,aAAanB,OAAOkB;AAEpBE,QAAAA,aAAaC,MAAAA,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,CACF,CAAA,CACF;AACAhB,WAAOiB,QAAQ;AAAA,EACd,GAAA,CAACjB,QAAQiB,UAAUnB,UAAU,CAAC;AAE3B4B,QAAAA,uBAAuBN,kBAC3B,MAAMnC,aAAaY,OAAO,GAC1B,CAACZ,cAAcY,OAAO,CACxB;AAEA,SACG8B,2BAAAA,KAAAC,eAAAA,iBAAA,EAAgB,WAAW9C,QAAQ+C,kBAClC,UAAA;AAAA,IAAAC,2BAAA,IAACC,eACC,UAAA,EAAA,SAAQ,kBACR,SAAS/C,aACT,WAAWF,QAAQkD,aAEjB,UAAE5C,GAAAA,OAAOC,UAAU,QAAS,IAChC;AAAA,IACCF,aACE2C,2BAAAA,IAAAC,eAAAA,UAAA,EACC,SAAQ,kBACR,UAAUb,YACV,WAAWpC,QAAQkD,aACnB,SAASb,YAEP,UAAA,GAAE/B,OAAOI,QAAQ,MAAO,IAC5B;AAAA,IAEDsC,2BAAA,IAAA,OAAA,EAAI,eAAW,MAAC,WAAWpC,IAAI;AAAA,MAAEuC,MAAM;AAAA,IAAA,CAAG,GAAE,UAE7C,KAAA;AAAA,IACCN,2BAAA,KAAA,OAAA,EAAI,WAAW7C,QAAQoD,kBACtB,UAAA;AAAA,MAACJ,2BAAAA,IAAAC,eAAAA,UAAA,EACC,SAAQ,kBACR,WAAWjD,QAAQkD,aACnB,UAAUjC,OAAO,GACjB,SAAS,MAAMC,OAAQmC,OAAMA,IAAI,CAAC,GAClC,WAAYL,2BAAA,IAAAM,gBAAA,WAAA,KAEV,UAAEhD,GAAAA,OAAOG,YAAY,UAAW,GACpC,CAAA;AAAA,MACC2B,aACEY,2BAAAA,IAAAC,eAAAA,UAAA,EACC,SAAQ,WACR,WAAWjD,QAAQkD,aACnB,UAAU9C,WAAW,CAACoB,WACtB,SAASoB,sBAEP,UAAA,GAAEtC,OAAOK,UAAU,QAAS,GAAA,CAChC,IAEAqC,2BAAAA,IAACC,eAAAA,UACC,EAAA,SAAQ,kBACR,WAAWpC,GAAGb,QAAQkD,aAAalD,QAAQuD,aAAa,GACxD,SAAS,MAAMrC,OAAQmC,OAAMA,IAAI,CAAC,GAClC,UAAU,CAAChD,aAAa,GAACU,wCAAUE,SAAVF,mBAAgBmB,QACzC,SAASc,2BAAA,IAACQ,+BAER,UAAElD,GAAAA,OAAOE,QAAQ,MAAO,GAC5B,CAAA;AAAA,IAAA,GAEJ;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"WizardActions.cjs","sources":["../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogActions,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardActions.styles\";\n\nexport { staticClasses as wizardActionsClasses };\n\nexport type HvWizardActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n  /** Function to handle the cancel button. */\n  handleClose: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** Function to handle the submit button. Also sends the current context state. */\n  handleSubmit: (context: any) => void;\n  /** An object containing all the labels for the wizard actions component. */\n  labels?: {\n    /** Cancel button label. */\n    cancel?: string;\n    /** Skip button label. */\n    skip?: string;\n    /** Previous button label. */\n    previous?: string;\n    /** Next button label. */\n    next?: string;\n    /** Submit button label. */\n    submit?: string;\n  };\n  /** Whether the submit button is disabled. */\n  loading?: boolean;\n  /** Enables the skip button. */\n  skippable?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardActionsClasses;\n}\n\nexport const HvWizardActions = ({\n  classes: classesProp,\n  handleClose,\n  handleSubmit,\n  loading = false,\n  skippable = false,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n  },\n}: HvWizardActionsProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n  const [pages, setPages] = useState(0);\n  const [canSubmit, setCanSubmit] = useState(false);\n\n  useEffect(() => {\n    const contextEntries = Object.entries(context);\n    if (contextEntries.length) {\n      setPages(contextEntries.length);\n\n      const validWizard = Object.entries(context).every(\n        ([, value]) => value?.valid\n      );\n      if (validWizard !== canSubmit) {\n        setCanSubmit(validWizard);\n      }\n    }\n  }, [context, canSubmit, setCanSubmit, setPages]);\n\n  const lastPage = pages - 1;\n  const isLastPage = tab >= lastPage;\n\n  const handleSkip = useCallback(() => {\n    setContext((c) =>\n      Object.entries(c).reduce(\n        (acc, [key, child]) => ({\n          ...acc,\n          [+key]: {\n            ...child,\n            valid: child?.valid !== false,\n          },\n        }),\n        {} as HvWizardTabs\n      )\n    );\n    setTab(lastPage);\n  }, [setTab, lastPage, setContext]);\n\n  const handleSubmitInternal = useCallback(\n    () => handleSubmit(context),\n    [handleSubmit, context]\n  );\n\n  return (\n    <HvDialogActions className={classes.actionsContainer}>\n      <HvButton\n        variant=\"secondaryGhost\"\n        onClick={handleClose}\n        className={classes.buttonWidth}\n      >\n        {`${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        &nbsp;\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={() => setTab((t) => t + 1)}\n            disabled={!skippable && !context?.[tab]?.valid}\n            endIcon={<Forwards />}\n          >\n            {`${labels.next ?? \"Next\"}`}\n          </HvButton>\n        )}\n      </div>\n    </HvDialogActions>\n  );\n};\n"],"names":["HvWizardActions","classes","classesProp","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","css","cx","useClasses","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","jsxs","HvDialogActions","actionsContainer","jsx","HvButton","buttonWidth","flex","buttonsContainer","t","Backwards","buttonSpacing","Forwards"],"mappings":"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"}

package/dist/cjs/components/Wizard/WizardContent/WizardContent.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const usehooksTs = require("usehooks-ts");
-const React = require("react");
 const WizardContent_styles = require("./WizardContent.styles.cjs");
 const LoadingContainer = require("./LoadingContainer.cjs");
 const WizardContext = require("../WizardContext/WizardContext.cjs");
@@ -63,8 +63,7 @@ const HvWizardContent = ({
     };
   }, []);
   React.useEffect(() => {
-    var _a, _b, _c;
-    const pageHeight = (_c = (_b = (_a = summaryRef.current) == null ? void 0 : _a.getBoundingClientRect) == null ? void 0 : _b.call(_a)) == null ? void 0 : _c.height;
+    const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;
     if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
       updateSummaryMeasures(sizes);
     }
@@ -79,15 +78,14 @@ const HvWizardContent = ({
     setContext(initialContext);
   }, []);
   React.useEffect(() => {
-    var _a;
-    if (tab && !((_a = context[tab]) == null ? void 0 : _a.touched)) {
+    if (tab && !context[tab]?.touched) {
       const updatedContext = Object.entries(context).reduce((acc, [key, childState]) => ({
         ...acc,
         ...+key <= tab ? {
           [key]: {
             ...childState,
             touched: true,
-            valid: (childState == null ? void 0 : childState.valid) ?? true
+            valid: childState?.valid ?? true
           }
         } : {
           [key]: childState

package/dist/cjs/components/Wizard/WizardContent/WizardContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContent.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialogContent,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useElementSize } from \"usehooks-ts\";\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport { staticClasses as wizardContentClasses };\n\nexport type HvWizardContentClasses = ExtractNames<typeof useClasses>;\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: classesProp,\n  fixedHeight = false,\n  loading = false,\n  children,\n  summaryContent,\n}: HvWizardContentProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\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, context, setContext]);\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <div\n      className={classes.summaryRef}\n      ref={(el) => {\n        containerRef(el);\n        if (el) {\n          summaryRef.current = el;\n        }\n      }}\n    >\n      {summary !== null && (\n        <div className={classes.summarySticky}>\n          <div\n            className={classes.summaryContainer}\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(classes.contentContainer, {\n          [classes.fixedHeight]: 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};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","classesProp","fixedHeight","loading","children","summaryContent","cx","useClasses","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","el","jsx","summarySticky","summaryContainer","left","transform","HvDialogContent","contentContainer","LoadingContainer","map","cloneElement"],"mappings":"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"}
+{"version":3,"file":"WizardContent.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialogContent,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useElementSize } from \"usehooks-ts\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport { staticClasses as wizardContentClasses };\n\nexport type HvWizardContentClasses = ExtractNames<typeof useClasses>;\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: classesProp,\n  fixedHeight = false,\n  loading = false,\n  children,\n  summaryContent,\n}: HvWizardContentProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\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, context, setContext]);\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <div\n      className={classes.summaryRef}\n      ref={(el) => {\n        containerRef(el);\n        if (el) {\n          summaryRef.current = el;\n        }\n      }}\n    >\n      {summary !== null && (\n        <div className={classes.summarySticky}>\n          <div\n            className={classes.summaryContainer}\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(classes.contentContainer, {\n          [classes.fixedHeight]: 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};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","classesProp","fixedHeight","loading","children","summaryContent","cx","useClasses","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","el","jsx","summarySticky","summaryContainer","left","transform","HvDialogContent","contentContainer","LoadingContainer","map","cloneElement"],"mappings":"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"}

package/dist/cjs/components/Wizard/WizardTitle/WizardTitle.cjs

@@ -48,7 +48,7 @@ const HvWizardTitle = ({
     if (contextArray.length) {
       const updatedSteps = contextArray.map(([, childState], index) => {
         return {
-          title: (childState == null ? void 0 : childState.name) ?? `${index + 1}`,
+          title: childState?.name ?? `${index + 1}`,
           state: switchTabState(childState, tab, index),
           onClick: () => setTab(index)
         };

package/dist/cjs/components/Wizard/WizardTitle/WizardTitle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/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  // \"Disabled\"\n  // \"Pending\"\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":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","classesProp","customStep","context","setSummary","tab","setTab","useContext","HvWizardContext","useClasses","steps","setSteps","useState","useEffect","toggleSummary","prevValue","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","jsx","HvDialogTitle","headerContainer","messageContainer","jsxs","titleContainer","HvTypography","HvStepNavigation","stepContainer","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","Report","summary"],"mappings":";;;;;;;;;AAoCA,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC,SAASC;AAAAA,EACTC,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,cAAAA,OAAe;AAEjE,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,mBAAAA,WAAWR,WAAW;AAE1C,QAAM,CAACS,OAAOC,QAAQ,IAAIC,MAAAA,SAAwB,CAAE,CAAA;AAEpDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACXT,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAACA,UAAU,CAAC;AAEf,QAAMU,gBAAgBA,MAAM;AACdC,eAAAA,CAAAA,cAAc,CAACA,SAAS;AAAA,EAAA;AAGtCF,QAAAA,UAAU,MAAM;AACRG,UAAAA,eAAeC,OAAOC,QAAQf,OAAO;AAE3C,QAAIa,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,GAAG7B,UAAU;AAClB,eAAA;AAAA,UACLI,QAAOyB,yCAAYC,SAAS,GAAE9B,QAAQ,CAAE;AAAA,UACxCF,OAAOD,eAAegC,YAAYjB,KAAKZ,KAAK;AAAA,UAC5C+B,SAASA,MAAMlB,OAAOb,KAAK;AAAA,QAAA;AAAA,MAC7B,CAEJ;AAEAkB,eAASS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAACjB,SAASE,KAAKC,MAAM,CAAC;AAEzB,SACGmB,2BAAAA,IAAAC,eAAAA,eAAA,EACC,WAAW1B,QAAQ2B,iBACnB,SAAS;AAAA,IACPC,kBAAkB5B,QAAQ4B;AAAAA,EAAAA,GAG5B,UAAAC,2BAAAA,KAAC,OAAI,EAAA,WAAW7B,QAAQ8B,gBACrBjC,UAAAA;AAAAA,IAAAA,wCACEkC,eAAa,cAAA,EAAA,SAAQ,UAAS,WAAU,MACtClC,UACH,OAAA;AAAA,IAED,CAAC,CAACa,MAAMS,yCACNa,eACC,kBAAA,EAAA,WAAWhC,QAAQiC,eACnB,OACA,MAAK,WACL,UAAS,MACT,OAAO;AAAA,MACLC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,IAAA,GAEFpC,GAAAA,WAEP,CAAA;AAAA,IACAJ,6CACEyC,eACC,UAAA,EAAA,SAAQ,mBACR,WAAWvC,QAAQwC,aACnB,SAAS;AAAA,MACPC,MAAMzC,QAAQ0C;AAAAA,IAChB,GACA,SAAS5B,eACT,WAAWW,2BAAA,IAACkB,6BAEV,UAAE5C,GAAAA,OAAO6C,WAAW,SAAU,GAClC,CAAA;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;;"}
+{"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/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  // \"Disabled\"\n  // \"Pending\"\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":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","classesProp","customStep","context","setSummary","tab","setTab","useContext","HvWizardContext","useClasses","steps","setSteps","useState","useEffect","toggleSummary","prevValue","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","jsx","HvDialogTitle","headerContainer","messageContainer","jsxs","titleContainer","HvTypography","HvStepNavigation","stepContainer","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","Report","summary"],"mappings":";;;;;;;;;AAoCA,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC,SAASC;AAAAA,EACTC,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,cAAAA,OAAe;AAEjE,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,mBAAAA,WAAWR,WAAW;AAE1C,QAAM,CAACS,OAAOC,QAAQ,IAAIC,MAAAA,SAAwB,CAAE,CAAA;AAEpDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACXT,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAACA,UAAU,CAAC;AAEf,QAAMU,gBAAgBA,MAAM;AACdC,eAAAA,CAAAA,cAAc,CAACA,SAAS;AAAA,EAAA;AAGtCF,QAAAA,UAAU,MAAM;AACRG,UAAAA,eAAeC,OAAOC,QAAQf,OAAO;AAE3C,QAAIa,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,GAAG7B,UAAU;AAClB,eAAA;AAAA,UACLI,OAAOyB,YAAYC,QAAS,GAAE9B,QAAQ,CAAE;AAAA,UACxCF,OAAOD,eAAegC,YAAYjB,KAAKZ,KAAK;AAAA,UAC5C+B,SAASA,MAAMlB,OAAOb,KAAK;AAAA,QAAA;AAAA,MAC7B,CAEJ;AAEAkB,eAASS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAACjB,SAASE,KAAKC,MAAM,CAAC;AAEzB,SACGmB,2BAAAA,IAAAC,eAAAA,eAAA,EACC,WAAW1B,QAAQ2B,iBACnB,SAAS;AAAA,IACPC,kBAAkB5B,QAAQ4B;AAAAA,EAAAA,GAG5B,UAAAC,2BAAAA,KAAC,OAAI,EAAA,WAAW7B,QAAQ8B,gBACrBjC,UAAAA;AAAAA,IAAAA,wCACEkC,eAAa,cAAA,EAAA,SAAQ,UAAS,WAAU,MACtClC,UACH,OAAA;AAAA,IAED,CAAC,CAACa,MAAMS,yCACNa,eACC,kBAAA,EAAA,WAAWhC,QAAQiC,eACnB,OACA,MAAK,WACL,UAAS,MACT,OAAO;AAAA,MACLC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,IAAA,GAEFpC,GAAAA,WAEP,CAAA;AAAA,IACAJ,6CACEyC,eACC,UAAA,EAAA,SAAQ,mBACR,WAAWvC,QAAQwC,aACnB,SAAS;AAAA,MACPC,MAAMzC,QAAQ0C;AAAAA,IAChB,GACA,SAAS5B,eACT,WAAWW,2BAAA,IAACkB,6BAEV,UAAE5C,GAAAA,OAAO6C,WAAW,SAAU,GAClC,CAAA;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;;"}

package/dist/esm/components/Flow/Controls/Controls.js

@@ -43,15 +43,15 @@ const HvFlowControls = ({
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const handleZoomIn = () => {
     zoomIn();
-    onZoomInProp == null ? void 0 : onZoomInProp();
+    onZoomInProp?.();
   };
   const handleZoomOut = () => {
     zoomOut();
-    onZoomOutProp == null ? void 0 : onZoomOutProp();
+    onZoomOutProp?.();
   };
   const handleFitView = () => {
     fitView(fitViewOptions);
-    onFitViewProp == null ? void 0 : onFitViewProp();
+    onFitViewProp?.();
   };
   const handleInteractive = () => {
     store.setState({
@@ -59,13 +59,13 @@ const HvFlowControls = ({
       nodesConnectable: !isInteractive,
       elementsSelectable: !isInteractive
     });
-    onInteractiveChange == null ? void 0 : onInteractiveChange(!isInteractive);
+    onInteractiveChange?.(!isInteractive);
   };
   return /* @__PURE__ */ jsx(Panel, { position, ...others, children: /* @__PURE__ */ jsxs(HvMultiButton, { vertical: orientation === "vertical", children: [
-    !hideZoom && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels == null ? void 0 : labels.zoomIn, onClick: handleZoomIn, disabled: maxZoomReached, children: /* @__PURE__ */ jsx(ZoomIn, { role: "none" }) }),
-    !hideZoom && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels == null ? void 0 : labels.zoomOut, onClick: handleZoomOut, disabled: minZoomReached, children: /* @__PURE__ */ jsx(ZoomOut, { role: "none" }) }),
-    !hideFitView && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels == null ? void 0 : labels.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsx(Focus, { role: "none" }) }),
-    !hideInteractive && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels == null ? void 0 : labels.interactive, onClick: handleInteractive, children: isInteractive ? /* @__PURE__ */ jsx(Unlock, { role: "none" }) : /* @__PURE__ */ jsx(Lock, { role: "none" }) }),
+    !hideZoom && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.zoomIn, onClick: handleZoomIn, disabled: maxZoomReached, children: /* @__PURE__ */ jsx(ZoomIn, { role: "none" }) }),
+    !hideZoom && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.zoomOut, onClick: handleZoomOut, disabled: minZoomReached, children: /* @__PURE__ */ jsx(ZoomOut, { role: "none" }) }),
+    !hideFitView && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsx(Focus, { role: "none" }) }),
+    !hideInteractive && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.interactive, onClick: handleInteractive, children: isInteractive ? /* @__PURE__ */ jsx(Unlock, { role: "none" }) : /* @__PURE__ */ jsx(Lock, { role: "none" }) }),
     children
   ] }) });
 };

package/dist/esm/components/Flow/Controls/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","sources":["../../../../../src/components/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n  ControlProps,\n  Panel,\n  PanelPosition,\n  ReactFlowState,\n  useReactFlow,\n  useStore,\n  useStoreApi,\n} from \"reactflow\";\n\nimport { shallow } from \"zustand/shallow\";\n\nimport {\n  HvButton,\n  HvMultiButton,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  Focus,\n  Lock,\n  Unlock,\n  ZoomIn,\n  ZoomOut,\n} from \"@hitachivantara/uikit-react-icons\";\n\nexport type HvFlowControlsPosition = PanelPosition;\n\nexport interface HvFlowControlsProps\n  extends Omit<\n    ControlProps,\n    \"position\" | \"showFitView\" | \"showInteractive\" | \"showZoom\"\n  > {\n  /** Controls position. Defaults to `bottom-center`. */\n  position?: HvFlowControlsPosition;\n  /** Controls orientation. Defaults to `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Labels used on the controls buttons. */\n  labels?: {\n    zoomIn?: string;\n    zoomOut?: string;\n    fitView?: string;\n    interactive?: string;\n  };\n  /** Whether to hide the zoom controls. */\n  hideZoom?: boolean;\n  /** Whether to hide the fit view controls. */\n  hideFitView?: boolean;\n  /** Whether to hide the interactive controls. */\n  hideInteractive?: boolean;\n}\n\nconst DEFAULT_LABELS: HvFlowControlsProps[\"labels\"] = {\n  fitView: \"Fit view\",\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  interactive: \"Interactive\",\n};\n\nconst selector = (state: ReactFlowState) => ({\n  isInteractive:\n    state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,\n  minZoomReached: state.transform[2] <= state.minZoom,\n  maxZoomReached: state.transform[2] >= state.maxZoom,\n});\n\nexport const HvFlowControls = ({\n  onZoomIn: onZoomInProp,\n  onZoomOut: onZoomOutProp,\n  onFitView: onFitViewProp,\n  labels: labelsProps,\n  hideInteractive,\n  hideFitView,\n  hideZoom,\n  position = \"bottom-center\",\n  orientation = \"horizontal\",\n  onInteractiveChange,\n  fitViewOptions,\n  children,\n  ...others\n}: HvFlowControlsProps) => {\n  const { isInteractive, minZoomReached, maxZoomReached } = useStore(\n    selector,\n    shallow\n  );\n  const store = useStoreApi();\n  const { zoomIn, zoomOut, fitView } = useReactFlow();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const handleZoomIn = () => {\n    zoomIn();\n    onZoomInProp?.();\n  };\n\n  const handleZoomOut = () => {\n    zoomOut();\n    onZoomOutProp?.();\n  };\n\n  const handleFitView = () => {\n    fitView(fitViewOptions);\n    onFitViewProp?.();\n  };\n\n  const handleInteractive = () => {\n    store.setState({\n      nodesDraggable: !isInteractive,\n      nodesConnectable: !isInteractive,\n      elementsSelectable: !isInteractive,\n    });\n\n    onInteractiveChange?.(!isInteractive);\n  };\n\n  return (\n    <Panel position={position} {...others}>\n      <HvMultiButton vertical={orientation === \"vertical\"}>\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomIn}\n            onClick={handleZoomIn}\n            disabled={maxZoomReached}\n          >\n            <ZoomIn role=\"none\" />\n          </HvButton>\n        )}\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomOut}\n            onClick={handleZoomOut}\n            disabled={minZoomReached}\n          >\n            <ZoomOut role=\"none\" />\n          </HvButton>\n        )}\n        {!hideFitView && (\n          <HvButton icon title={labels?.fitView} onClick={handleFitView}>\n            <Focus role=\"none\" />\n          </HvButton>\n        )}\n        {!hideInteractive && (\n          <HvButton\n            icon\n            title={labels?.interactive}\n            onClick={handleInteractive}\n          >\n            {isInteractive ? <Unlock role=\"none\" /> : <Lock role=\"none\" />}\n          </HvButton>\n        )}\n        {children}\n      </HvMultiButton>\n    </Panel>\n  );\n};\n"],"names":["DEFAULT_LABELS","fitView","zoomIn","zoomOut","interactive","selector","state","isInteractive","nodesDraggable","nodesConnectable","elementsSelectable","minZoomReached","transform","minZoom","maxZoomReached","maxZoom","HvFlowControls","onZoomIn","onZoomInProp","onZoomOut","onZoomOutProp","onFitView","onFitViewProp","labels","labelsProps","hideInteractive","hideFitView","hideZoom","position","orientation","onInteractiveChange","fitViewOptions","children","others","useStore","shallow","store","useStoreApi","useReactFlow","useLabels","handleZoomIn","handleZoomOut","handleFitView","handleInteractive","setState"],"mappings":";;;;;AAmDA,MAAMA,iBAAgD;AAAA,EACpDC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,aAAa;AACf;AAEA,MAAMC,WAAWA,CAACC,WAA2B;AAAA,EAC3CC,eACED,MAAME,kBAAkBF,MAAMG,oBAAoBH,MAAMI;AAAAA,EAC1DC,gBAAgBL,MAAMM,UAAU,CAAC,KAAKN,MAAMO;AAAAA,EAC5CC,gBAAgBR,MAAMM,UAAU,CAAC,KAAKN,MAAMS;AAC9C;AAEO,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC,UAAUC;AAAAA,EACVC,WAAWC;AAAAA,EACXC,WAAWC;AAAAA,EACXC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAE1B;AAAAA,IAAeI;AAAAA,IAAgBG;AAAAA,EAAAA,IAAmBoB,SACxD7B,UACA8B,OACF;AACA,QAAMC,QAAQC;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,aAAa;AAE5Cf,QAAAA,SAASgB,UAAUvC,gBAAgBwB,WAAW;AAEpD,QAAMgB,eAAeA,MAAM;AAClB;AACQ;AAAA,EAAA;AAGjB,QAAMC,gBAAgBA,MAAM;AAClB;AACQ;AAAA,EAAA;AAGlB,QAAMC,gBAAgBA,MAAM;AAC1BzC,YAAQ8B,cAAc;AACN;AAAA,EAAA;AAGlB,QAAMY,oBAAoBA,MAAM;AAC9BP,UAAMQ,SAAS;AAAA,MACbpC,gBAAgB,CAACD;AAAAA,MACjBE,kBAAkB,CAACF;AAAAA,MACnBG,oBAAoB,CAACH;AAAAA,IAAAA,CACtB;AAEDuB,+DAAsB,CAACvB;AAAAA,EAAa;AAIpC,SAAA,oBAAC,SAAM,UAAwB0B,GAAAA,QAC7B,UAAC,qBAAA,eAAA,EAAc,UAAUJ,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAACF,YACC,oBAAA,UAAA,EACC,MAAI,MACJ,OAAOJ,iCAAQrB,QACf,SAASsC,cACT,UAAU1B,gBAEV,UAAA,oBAAC,QAAO,EAAA,MAAK,OAAM,CAAA,GACrB;AAAA,IAED,CAACa,YACA,oBAAC,UACC,EAAA,MAAI,MACJ,OAAOJ,iCAAQpB,SACf,SAASsC,eACT,UAAU9B,gBAEV,8BAAC,SAAQ,EAAA,MAAK,OAAM,CAAA,GACtB;AAAA,IAED,CAACe,eACC,oBAAA,UAAA,EAAS,MAAI,MAAC,OAAOH,iCAAQtB,SAAS,SAASyC,eAC9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAM,CAAA,GACpB;AAAA,IAED,CAACjB,mBACC,oBAAA,UAAA,EACC,MAAI,MACJ,OAAOF,iCAAQnB,aACf,SAASuC,mBAERpC,UAAgB,gBAAA,oBAAC,UAAO,MAAK,OAAA,CAAM,IAAO,oBAAA,MAAA,EAAK,MAAK,OAAA,CAAS,EAChE,CAAA;AAAA,IAEDyB;AAAAA,EAAAA,EACH,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"Controls.js","sources":["../../../../../src/components/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n  ControlProps,\n  Panel,\n  PanelPosition,\n  ReactFlowState,\n  useReactFlow,\n  useStore,\n  useStoreApi,\n} from \"reactflow\";\n\nimport { shallow } from \"zustand/shallow\";\n\nimport {\n  HvButton,\n  HvMultiButton,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  Focus,\n  Lock,\n  Unlock,\n  ZoomIn,\n  ZoomOut,\n} from \"@hitachivantara/uikit-react-icons\";\n\nexport type HvFlowControlsPosition = PanelPosition;\n\nexport interface HvFlowControlsProps\n  extends Omit<\n    ControlProps,\n    \"position\" | \"showFitView\" | \"showInteractive\" | \"showZoom\"\n  > {\n  /** Controls position. Defaults to `bottom-center`. */\n  position?: HvFlowControlsPosition;\n  /** Controls orientation. Defaults to `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Labels used on the controls buttons. */\n  labels?: {\n    zoomIn?: string;\n    zoomOut?: string;\n    fitView?: string;\n    interactive?: string;\n  };\n  /** Whether to hide the zoom controls. */\n  hideZoom?: boolean;\n  /** Whether to hide the fit view controls. */\n  hideFitView?: boolean;\n  /** Whether to hide the interactive controls. */\n  hideInteractive?: boolean;\n}\n\nconst DEFAULT_LABELS: HvFlowControlsProps[\"labels\"] = {\n  fitView: \"Fit view\",\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  interactive: \"Interactive\",\n};\n\nconst selector = (state: ReactFlowState) => ({\n  isInteractive:\n    state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,\n  minZoomReached: state.transform[2] <= state.minZoom,\n  maxZoomReached: state.transform[2] >= state.maxZoom,\n});\n\nexport const HvFlowControls = ({\n  onZoomIn: onZoomInProp,\n  onZoomOut: onZoomOutProp,\n  onFitView: onFitViewProp,\n  labels: labelsProps,\n  hideInteractive,\n  hideFitView,\n  hideZoom,\n  position = \"bottom-center\",\n  orientation = \"horizontal\",\n  onInteractiveChange,\n  fitViewOptions,\n  children,\n  ...others\n}: HvFlowControlsProps) => {\n  const { isInteractive, minZoomReached, maxZoomReached } = useStore(\n    selector,\n    shallow\n  );\n  const store = useStoreApi();\n  const { zoomIn, zoomOut, fitView } = useReactFlow();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const handleZoomIn = () => {\n    zoomIn();\n    onZoomInProp?.();\n  };\n\n  const handleZoomOut = () => {\n    zoomOut();\n    onZoomOutProp?.();\n  };\n\n  const handleFitView = () => {\n    fitView(fitViewOptions);\n    onFitViewProp?.();\n  };\n\n  const handleInteractive = () => {\n    store.setState({\n      nodesDraggable: !isInteractive,\n      nodesConnectable: !isInteractive,\n      elementsSelectable: !isInteractive,\n    });\n\n    onInteractiveChange?.(!isInteractive);\n  };\n\n  return (\n    <Panel position={position} {...others}>\n      <HvMultiButton vertical={orientation === \"vertical\"}>\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomIn}\n            onClick={handleZoomIn}\n            disabled={maxZoomReached}\n          >\n            <ZoomIn role=\"none\" />\n          </HvButton>\n        )}\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomOut}\n            onClick={handleZoomOut}\n            disabled={minZoomReached}\n          >\n            <ZoomOut role=\"none\" />\n          </HvButton>\n        )}\n        {!hideFitView && (\n          <HvButton icon title={labels?.fitView} onClick={handleFitView}>\n            <Focus role=\"none\" />\n          </HvButton>\n        )}\n        {!hideInteractive && (\n          <HvButton\n            icon\n            title={labels?.interactive}\n            onClick={handleInteractive}\n          >\n            {isInteractive ? <Unlock role=\"none\" /> : <Lock role=\"none\" />}\n          </HvButton>\n        )}\n        {children}\n      </HvMultiButton>\n    </Panel>\n  );\n};\n"],"names":["DEFAULT_LABELS","fitView","zoomIn","zoomOut","interactive","selector","state","isInteractive","nodesDraggable","nodesConnectable","elementsSelectable","minZoomReached","transform","minZoom","maxZoomReached","maxZoom","HvFlowControls","onZoomIn","onZoomInProp","onZoomOut","onZoomOutProp","onFitView","onFitViewProp","labels","labelsProps","hideInteractive","hideFitView","hideZoom","position","orientation","onInteractiveChange","fitViewOptions","children","others","useStore","shallow","store","useStoreApi","useReactFlow","useLabels","handleZoomIn","handleZoomOut","handleFitView","handleInteractive","setState"],"mappings":";;;;;AAmDA,MAAMA,iBAAgD;AAAA,EACpDC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,aAAa;AACf;AAEA,MAAMC,WAAWA,CAACC,WAA2B;AAAA,EAC3CC,eACED,MAAME,kBAAkBF,MAAMG,oBAAoBH,MAAMI;AAAAA,EAC1DC,gBAAgBL,MAAMM,UAAU,CAAC,KAAKN,MAAMO;AAAAA,EAC5CC,gBAAgBR,MAAMM,UAAU,CAAC,KAAKN,MAAMS;AAC9C;AAEO,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC,UAAUC;AAAAA,EACVC,WAAWC;AAAAA,EACXC,WAAWC;AAAAA,EACXC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAE1B;AAAAA,IAAeI;AAAAA,IAAgBG;AAAAA,EAAAA,IAAmBoB,SACxD7B,UACA8B,OACF;AACA,QAAMC,QAAQC;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,aAAa;AAE5Cf,QAAAA,SAASgB,UAAUvC,gBAAgBwB,WAAW;AAEpD,QAAMgB,eAAeA,MAAM;AAClB;AACQ;EAAA;AAGjB,QAAMC,gBAAgBA,MAAM;AAClB;AACQ;EAAA;AAGlB,QAAMC,gBAAgBA,MAAM;AAC1BzC,YAAQ8B,cAAc;AACN;EAAA;AAGlB,QAAMY,oBAAoBA,MAAM;AAC9BP,UAAMQ,SAAS;AAAA,MACbpC,gBAAgB,CAACD;AAAAA,MACjBE,kBAAkB,CAACF;AAAAA,MACnBG,oBAAoB,CAACH;AAAAA,IAAAA,CACtB;AAEDuB,0BAAsB,CAACvB,aAAa;AAAA,EAAA;AAIpC,SAAA,oBAAC,SAAM,UAAwB0B,GAAAA,QAC7B,UAAC,qBAAA,eAAA,EAAc,UAAUJ,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAACF,YACC,oBAAA,UAAA,EACC,MAAI,MACJ,OAAOJ,QAAQrB,QACf,SAASsC,cACT,UAAU1B,gBAEV,UAAA,oBAAC,QAAO,EAAA,MAAK,OAAM,CAAA,GACrB;AAAA,IAED,CAACa,YACA,oBAAC,UACC,EAAA,MAAI,MACJ,OAAOJ,QAAQpB,SACf,SAASsC,eACT,UAAU9B,gBAEV,8BAAC,SAAQ,EAAA,MAAK,OAAM,CAAA,GACtB;AAAA,IAED,CAACe,eACC,oBAAA,UAAA,EAAS,MAAI,MAAC,OAAOH,QAAQtB,SAAS,SAASyC,eAC9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAM,CAAA,GACpB;AAAA,IAED,CAACjB,mBACC,oBAAA,UAAA,EACC,MAAI,MACJ,OAAOF,QAAQnB,aACf,SAASuC,mBAERpC,UAAgB,gBAAA,oBAAC,UAAO,MAAK,OAAA,CAAM,IAAO,oBAAA,MAAA,EAAK,MAAK,OAAA,CAAS,EAChE,CAAA;AAAA,IAEDyB;AAAAA,EAAAA,EACH,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/Flow/DroppableFlow.js

@@ -13,7 +13,6 @@ const getNode = (nodes, nodeId) => {
   return nodes.find((n) => n.id === nodeId);
 };
 const validateEdge = (nodes, edge, nodeTypes) => {
-  var _a, _b, _c, _d, _e, _f;
   if (!edge.sourceHandle || !edge.targetHandle)
     return false;
   const sourceNode = getNode(nodes, edge.source);
@@ -24,10 +23,10 @@ const validateEdge = (nodes, edge, nodeTypes) => {
   const targetType = targetNode.type;
   if (!sourceType || !targetType)
     return false;
-  const inputs = ((_b = (_a = nodeTypes == null ? void 0 : nodeTypes[targetType]) == null ? void 0 : _a.meta) == null ? void 0 : _b.inputs) || [];
-  const outputs = ((_d = (_c = nodeTypes == null ? void 0 : nodeTypes[sourceType]) == null ? void 0 : _c.meta) == null ? void 0 : _d.outputs) || [];
-  const sourceProvides = ((_e = outputs[edge.sourceHandle]) == null ? void 0 : _e.provides) || "";
-  const targetAccepts = ((_f = inputs[edge.targetHandle]) == null ? void 0 : _f.accepts) || [];
+  const inputs = nodeTypes?.[targetType]?.meta?.inputs || [];
+  const outputs = nodeTypes?.[sourceType]?.meta?.outputs || [];
+  const sourceProvides = outputs[edge.sourceHandle]?.provides || "";
+  const targetAccepts = inputs[edge.targetHandle]?.accepts || [];
   const isValid = targetAccepts.includes(sourceProvides);
   return isValid;
 };
@@ -49,6 +48,7 @@ const HvDroppableFlow = ({
   className,
   children,
   onFlowChange,
+  onDndDrop,
   classes: classesProp,
   nodes: initialNodes = [],
   edges: initialEdges = [],
@@ -75,53 +75,56 @@ const HvDroppableFlow = ({
     id: elementId
   });
   const handleDragEnd = useCallback((event) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (event.over && event.over.id === elementId) {
-      const type = (_b = (_a = event.active.data.current) == null ? void 0 : _a.hvFlow) == null ? void 0 : _b.type;
-      if (type && (nodeTypes == null ? void 0 : nodeTypes[type])) {
+      const type = event.active.data.current?.hvFlow?.type;
+      if (type && nodeTypes?.[type]) {
         const position = reactFlowInstance.project({
-          x: (((_d = (_c = event.active.data.current) == null ? void 0 : _c.hvFlow) == null ? void 0 : _d.x) || 0) - event.over.rect.left,
-          y: (((_f = (_e = event.active.data.current) == null ? void 0 : _e.hvFlow) == null ? void 0 : _f.y) || 0) - event.over.rect.top
+          x: (event.active.data.current?.hvFlow?.x || 0) - event.over.rect.left,
+          y: (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top
         });
-        const data = ((_h = (_g = event.active.data.current) == null ? void 0 : _g.hvFlow) == null ? void 0 : _h.data) || {};
+        const data = event.active.data.current?.hvFlow?.data || {};
         const newNode = {
           id: uid(),
           position,
           data,
           type
         };
+        if (onDndDrop) {
+          onDndDrop(event, newNode);
+          return;
+        }
         setNodes((nds) => nds.concat(newNode));
       } else {
         console.error(`Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`);
       }
     }
-  }, [elementId, nodeTypes, reactFlowInstance]);
+  }, [elementId, nodeTypes, onDndDrop, reactFlowInstance]);
   useDndMonitor({
     onDragEnd: handleDragEnd
   });
   const handleFlowChange = useCallback((nds, eds) => {
     const isDragging = nds.find((node) => node.dragging);
     if (!isDragging) {
-      onFlowChange == null ? void 0 : onFlowChange(nds, eds);
+      onFlowChange?.(nds, eds);
     }
   }, [onFlowChange]);
   const handleConnect = useCallback((connection) => {
     const eds = addEdge(connection, edges);
     setEdges(eds);
     handleFlowChange(nodes, eds);
-    onConnectProp == null ? void 0 : onConnectProp(connection);
+    onConnectProp?.(connection);
   }, [edges, handleFlowChange, nodes, onConnectProp]);
   const handleNodesChange = useCallback((changes) => {
     const nds = applyNodeChanges(changes, nodes);
     setNodes(nds);
     handleFlowChange(nds, edges);
-    onNodesChangeProp == null ? void 0 : onNodesChangeProp(changes);
+    onNodesChangeProp?.(changes);
   }, [edges, handleFlowChange, nodes, onNodesChangeProp]);
   const handleEdgesChange = useCallback((changes) => {
     const eds = applyEdgeChanges(changes, edges);
     setEdges(eds);
     handleFlowChange(nodes, eds);
-    onEdgesChangeProp == null ? void 0 : onEdgesChangeProp(changes);
+    onEdgesChangeProp?.(changes);
   }, [edges, handleFlowChange, nodes, onEdgesChangeProp]);
   const isValidConnection = (connection) => {
     const isValid = validateEdge(nodes, connection, nodeTypes);

package/dist/esm/components/Flow/DroppableFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.js","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeTypes } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Function called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edge: Edge,\n  nodeTypes: HvFlowNodeTypes<string> | undefined\n) => {\n  if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n  const sourceNode = getNode(nodes, edge.source);\n  const targetNode = getNode(nodes, edge.target);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeTypes?.[targetType]?.meta?.inputs || [];\n  const outputs = nodeTypes?.[sourceType]?.meta?.outputs || [];\n\n  const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n  const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n\n  const isValid = targetAccepts.includes(sourceProvides);\n  return isValid;\n};\n\nconst validateEdges = (\n  edges: Edge[],\n  nodes: Node[],\n  nodeTypes: HvFlowNodeTypes<string> | undefined\n) => {\n  if (edges) {\n    const validEdges: Edge[] = [];\n\n    edges.forEach((edge) => {\n      const isValidEdge = validateEdge(nodes, edge, nodeTypes);\n      if (isValidEdge) {\n        validEdges.push(edge);\n      }\n    });\n\n    return validEdges;\n  }\n  return [];\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvFlow\");\n\n  const reactFlowInstance = useReactFlow();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over && event.over.id === elementId) {\n        const type = event.active.data.current?.hvFlow?.type;\n\n        // Only known node types can be dropped in the canvas\n        if (type && nodeTypes?.[type]) {\n          // Converts the coordinates to the react flow coordinate system\n          const position = reactFlowInstance.project({\n            x:\n              (event.active.data.current?.hvFlow?.x || 0) -\n              event.over.rect.left,\n            y:\n              (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n          });\n\n          // Node data\n          const data = event.active.data.current?.hvFlow?.data || {};\n\n          const newNode: Node = {\n            id: uid(),\n            position,\n            data,\n            type,\n          };\n\n          setNodes((nds) => nds.concat(newNode));\n        } else {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n      }\n    },\n    [elementId, nodeTypes, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  const isValidConnection = (connection) => {\n    const isValid = validateEdge(nodes, connection, nodeTypes);\n    return isValid;\n  };\n\n  const validEdges = validateEdges(edges, nodes, nodeTypes);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={validEdges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edge","nodeTypes","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","meta","outputs","sourceProvides","provides","targetAccepts","accepts","isValid","includes","validateEdges","edges","validEdges","forEach","isValidEdge","push","HvDroppableFlow","className","children","onFlowChange","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","data","current","hvFlow","position","project","x","rect","left","y","top","newNode","uid","nds","concat","error","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","flowStyles","root"],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.js","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeTypes } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edge: Edge,\n  nodeTypes: HvFlowNodeTypes<string> | undefined\n) => {\n  if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n  const sourceNode = getNode(nodes, edge.source);\n  const targetNode = getNode(nodes, edge.target);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeTypes?.[targetType]?.meta?.inputs || [];\n  const outputs = nodeTypes?.[sourceType]?.meta?.outputs || [];\n\n  const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n  const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n\n  const isValid = targetAccepts.includes(sourceProvides);\n  return isValid;\n};\n\nconst validateEdges = (\n  edges: Edge[],\n  nodes: Node[],\n  nodeTypes: HvFlowNodeTypes<string> | undefined\n) => {\n  if (edges) {\n    const validEdges: Edge[] = [];\n\n    edges.forEach((edge) => {\n      const isValidEdge = validateEdge(nodes, edge, nodeTypes);\n      if (isValidEdge) {\n        validEdges.push(edge);\n      }\n    });\n\n    return validEdges;\n  }\n  return [];\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvFlow\");\n\n  const reactFlowInstance = useReactFlow();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over && event.over.id === elementId) {\n        const type = event.active.data.current?.hvFlow?.type;\n\n        // Only known node types can be dropped in the canvas\n        if (type && nodeTypes?.[type]) {\n          // Converts the coordinates to the react flow coordinate system\n          const position = reactFlowInstance.project({\n            x:\n              (event.active.data.current?.hvFlow?.x || 0) -\n              event.over.rect.left,\n            y:\n              (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n          });\n\n          // Node data\n          const data = event.active.data.current?.hvFlow?.data || {};\n\n          // Node to add\n          const newNode: Node = {\n            id: uid(),\n            position,\n            data,\n            type,\n          };\n\n          // Drop override\n          if (onDndDrop) {\n            onDndDrop(event, newNode);\n            return;\n          }\n\n          setNodes((nds) => nds.concat(newNode));\n        } else {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n      }\n    },\n    [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  const isValidConnection = (connection) => {\n    const isValid = validateEdge(nodes, connection, nodeTypes);\n    return isValid;\n  };\n\n  const validEdges = validateEdges(edges, nodes, nodeTypes);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={validEdges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edge","nodeTypes","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","meta","outputs","sourceProvides","provides","targetAccepts","accepts","isValid","includes","validateEdges","edges","validEdges","forEach","isValidEdge","push","HvDroppableFlow","className","children","onFlowChange","onDndDrop","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","data","current","hvFlow","position","project","x","rect","left","y","top","newNode","uid","nds","concat","error","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","flowStyles","root"],"mappings":";;;;;;;;;;;AA6DaA,MAAAA,UAAUA,CAACC,OAAeC,WAAmB;AACxD,SAAOD,MAAME,KAAMC,CAAMA,MAAAA,EAAEC,OAAOH,MAAM;AAC1C;AAEA,MAAMI,eAAeA,CACnBL,OACAM,MACAC,cACG;AACH,MAAI,CAACD,KAAKE,gBAAgB,CAACF,KAAKG;AAAqB,WAAA;AAErD,QAAMC,aAAaX,QAAQC,OAAOM,KAAKK,MAAM;AAC7C,QAAMC,aAAab,QAAQC,OAAOM,KAAKO,MAAM;AAEzC,MAAA,CAACH,cAAc,CAACE;AAAmB,WAAA;AAEvC,QAAME,aAAaJ,WAAWK;AAC9B,QAAMC,aAAaJ,WAAWG;AAE1B,MAAA,CAACD,cAAc,CAACE;AAAmB,WAAA;AAEvC,QAAMC,SAASV,YAAYS,UAAU,GAAGE,MAAMD,UAAU;AACxD,QAAME,UAAUZ,YAAYO,UAAU,GAAGI,MAAMC,WAAW;AAE1D,QAAMC,iBAAiBD,QAAQb,KAAKE,YAAY,GAAGa,YAAY;AAC/D,QAAMC,gBAAgBL,OAAOX,KAAKG,YAAY,GAAGc,WAAW;AAEtDC,QAAAA,UAAUF,cAAcG,SAASL,cAAc;AAC9CI,SAAAA;AACT;AAEA,MAAME,gBAAgBA,CACpBC,OACA3B,OACAO,cACG;AACH,MAAIoB,OAAO;AACT,UAAMC,aAAqB,CAAA;AAE3BD,UAAME,QAASvB,CAAS,SAAA;AACtB,YAAMwB,cAAczB,aAAaL,OAAOM,MAAMC,SAAS;AACvD,UAAIuB,aAAa;AACfF,mBAAWG,KAAKzB,IAAI;AAAA,MACtB;AAAA,IAAA,CACD;AAEMsB,WAAAA;AAAAA,EACT;AACA,SAAO;AACT;AAEO,MAAMI,kBAAkBA,CAAC;AAAA,EAC9B5B;AAAAA,EACA6B;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTtC,OAAOuC,eAAe,CAAE;AAAA,EACxBZ,OAAOa,eAAe,CAAE;AAAA,EACxBC,WAAWC;AAAAA,EACXC,eAAeC;AAAAA,EACfC,eAAeC;AAAAA,EACfC,oBAAoBC;AAAAA,EACpB,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAEZ;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,WAAWb,WAAW;AAExCc,QAAAA,YAAYC,YAAYjD,IAAI,QAAQ;AAE1C,QAAMkD,oBAAoBC;AAEpB,QAAA;AAAA,IAAEhD;AAAAA,MAAciD,eAAe;AAErC,QAAM,CAACxD,OAAOyD,QAAQ,IAAIC,SAASnB,YAAY;AAC/C,QAAM,CAACZ,OAAOgC,QAAQ,IAAID,SAASlB,YAAY;AAEzC,QAAA;AAAA,IAAEoB;AAAAA,MAAeC,aAAa;AAAA,IAClCzD,IAAIgD;AAAAA,EAAAA,CACL;AAEKU,QAAAA,gBAAgBC,YACpB,CAACC,UAAwB;AACvB,QAAIA,MAAMC,QAAQD,MAAMC,KAAK7D,OAAOgD,WAAW;AAC7C,YAAMrC,OAAOiD,MAAME,OAAOC,KAAKC,SAASC,QAAQtD;AAG5CA,UAAAA,QAAQR,YAAYQ,IAAI,GAAG;AAEvBuD,cAAAA,WAAWhB,kBAAkBiB,QAAQ;AAAA,UACzCC,IACGR,MAAME,OAAOC,KAAKC,SAASC,QAAQG,KAAK,KACzCR,MAAMC,KAAKQ,KAAKC;AAAAA,UAClBC,IACGX,MAAME,OAAOC,KAAKC,SAASC,QAAQM,KAAK,KAAKX,MAAMC,KAAKQ,KAAKG;AAAAA,QAAAA,CACjE;AAGD,cAAMT,OAAOH,MAAME,OAAOC,KAAKC,SAASC,QAAQF,QAAQ;AAGxD,cAAMU,UAAgB;AAAA,UACpBzE,IAAI0E,IAAI;AAAA,UACRR;AAAAA,UACAH;AAAAA,UACApD;AAAAA,QAAAA;AAIF,YAAIqB,WAAW;AACbA,oBAAU4B,OAAOa,OAAO;AACxB;AAAA,QACF;AAEApB,iBAAUsB,CAAQA,QAAAA,IAAIC,OAAOH,OAAO,CAAC;AAAA,MAAA,OAChC;AAEGI,gBAAAA,MACL,0DAAyDlE,IAAK,+CACjE;AAAA,MACF;AAAA,IACF;AAAA,KAEF,CAACqC,WAAW7C,WAAW6B,WAAWkB,iBAAiB,CACrD;AAEc,gBAAA;AAAA,IACZ4B,WAAWpB;AAAAA,EAAAA,CACZ;AAED,QAAMqB,mBAAmBpB,YACvB,CACEgB,KACAK,QACG;AAGH,UAAMC,aAAaN,IAAI7E,KAAMoF,CAAAA,SAASA,KAAKC,QAAQ;AACnD,QAAI,CAACF,YAAY;AACflD,qBAAe4C,KAAKK,GAAG;AAAA,IACzB;AAAA,EAAA,GAEF,CAACjD,YAAY,CACf;AAEMqD,QAAAA,gBAAgBzB,YACpB,CAAC0B,eAA2B;AACpBL,UAAAA,MAAMM,QAAQD,YAAY9D,KAAK;AACrCgC,aAASyB,GAAG;AAEZD,qBAAiBnF,OAAOoF,GAAG;AAC3B1C,oBAAgB+C,UAAU;AAAA,KAE5B,CAAC9D,OAAOwD,kBAAkBnF,OAAO0C,aAAa,CAChD;AAEMiD,QAAAA,oBAAoB5B,YACxB,CAAC6B,YAA0B;AACnBb,UAAAA,MAAMc,iBAAiBD,SAAS5F,KAAK;AAC3CyD,aAASsB,GAAG;AAEZI,qBAAiBJ,KAAKpD,KAAK;AAC3BiB,wBAAoBgD,OAAO;AAAA,KAE7B,CAACjE,OAAOwD,kBAAkBnF,OAAO4C,iBAAiB,CACpD;AAEMkD,QAAAA,oBAAoB/B,YACxB,CAAC6B,YAA0B;AACnBR,UAAAA,MAAMW,iBAAiBH,SAASjE,KAAK;AAC3CgC,aAASyB,GAAG;AAEZD,qBAAiBnF,OAAOoF,GAAG;AAC3BtC,wBAAoB8C,OAAO;AAAA,KAE7B,CAACjE,OAAOwD,kBAAkBnF,OAAO8C,iBAAiB,CACpD;AAEA,QAAMkD,oBAAqBP,CAAe,eAAA;AACxC,UAAMjE,UAAUnB,aAAaL,OAAOyF,YAAYlF,SAAS;AAClDiB,WAAAA;AAAAA,EAAAA;AAGT,QAAMI,aAAaF,cAAcC,OAAO3B,OAAOO,SAAS;AAExD,QAAMwC,qBAAqB;AAAA,IACzBkD,WAAW;AAAA,MACTlF,MAAMmF,WAAWC;AAAAA,MACjBC,QAAQ;AAAA,MACRC,OAAO;AAAA,IACT;AAAA,IACA,GAAGrD;AAAAA,EAAAA;AAGL,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAO,QAAQsD,WAAW,CAAA;AAAA,IAC1B,oBAAA,OAAA,EACC,IAAIlD,WACJ,KAAKQ,YACL,WAAWV,GAAGb,QAAQkE,MAAMtE,SAAS,GAErC,UAAC,oBAAA,WAAA,EACC,OACA,OAAOL,YACP,WACA,eAAe+D,mBACf,eAAeG,mBACf,WAAWN,eACX,mBACA,oBACIvC,GAAAA,QAEHf,SACH,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Flow/Empty/Empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"Empty.js","sources":["../../../../../src/components/Flow/Empty/Empty.tsx"],"sourcesContent":["import { useStore } from \"reactflow\";\nimport {\n  HvEmptyState,\n  HvEmptyStateProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport { useClasses } from \"./Empty.styles\";\n\nexport interface HvFlowEmptyProps extends HvEmptyStateProps {}\n\nexport const HvFlowEmpty = ({ className, ...others }: HvFlowEmptyProps) => {\n  const { classes, cx } = useClasses();\n  const nodes = useStore((state) => state.getNodes());\n  return (\n    !nodes ||\n    (nodes.length === 0 ? (\n      <HvEmptyState className={cx(classes.root, className)} {...others} />\n    ) : null)\n  );\n};\n"],"names":["HvFlowEmpty","className","others","classes","cx","useClasses","nodes","useStore","state","getNodes","length","root"],"mappings":";;;;AASO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAAW,GAAGC;AAAyB,MAAM;AACnE,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,MAAOC,WAAW;AACnC,QAAMC,QAAQC,SAAUC,CAAUA,UAAAA,MAAMC,UAAU;AAClD,SACE,CAACH,UACAA,MAAMI,WAAW,IACf,oBAAA,cAAA,EAAa,WAAWN,GAAGD,QAAQQ,MAAMV,SAAS,GAAG,GAAIC,OAAU,CAAA,IAClE;AAER;"}
+{"version":3,"file":"Empty.js","sources":["../../../../../src/components/Flow/Empty/Empty.tsx"],"sourcesContent":["import { useStore } from \"reactflow\";\nimport {\n  HvEmptyState,\n  HvEmptyStateProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./Empty.styles\";\n\nexport interface HvFlowEmptyProps extends HvEmptyStateProps {}\n\nexport const HvFlowEmpty = ({ className, ...others }: HvFlowEmptyProps) => {\n  const { classes, cx } = useClasses();\n  const nodes = useStore((state) => state.getNodes());\n  return (\n    !nodes ||\n    (nodes.length === 0 ? (\n      <HvEmptyState className={cx(classes.root, className)} {...others} />\n    ) : null)\n  );\n};\n"],"names":["HvFlowEmpty","className","others","classes","cx","useClasses","nodes","useStore","state","getNodes","length","root"],"mappings":";;;;AAUO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAAW,GAAGC;AAAyB,MAAM;AACnE,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,MAAOC,WAAW;AACnC,QAAMC,QAAQC,SAAUC,CAAUA,UAAAA,MAAMC,UAAU;AAClD,SACE,CAACH,UACAA,MAAMI,WAAW,IACf,oBAAA,cAAA,EAAa,WAAWN,GAAGD,QAAQQ,MAAMV,SAAS,GAAG,GAAIC,OAAU,CAAA,IAClE;AAER;"}

package/dist/esm/components/Flow/Flow.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.styles.js","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\nimport { flowNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: {\n    height: \"100%\",\n    \"& .react-flow__handle\": {\n      backgroundColor: theme.colors.secondary_60,\n      width: 8,\n      height: 8,\n      zIndex: theme.zIndices.overlay,\n    },\n    \"& .react-flow__handle-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    \"& .react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    [`& .selected > .${flowNodeClasses.root}`]: {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      borderRadius: theme.radii.round,\n      boxSizing: \"border-box\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","backgroundColor","theme","colors","secondary_60","width","zIndex","zIndices","overlay","negative_20","translate","positive_20","flowNodeClasses","border","borderRadius","radii","round","boxSizing"],"mappings":";;;;;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,MAAMC,OAAOM;AAAAA,MAC9BJ,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7BT,iBAAiBC,MAAMC,OAAOQ;AAAAA,MAC9BN,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,gBAAgBb,IAAK,EAAC,GAAG;AAAA,MAC1Cc,QAAS,aAAYX,MAAMC,OAAOC,YAAa;AAAA,MAC/CU,cAAcZ,MAAMa,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Flow.styles.js","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: {\n    height: \"100%\",\n    \"& .react-flow__handle\": {\n      backgroundColor: theme.colors.secondary_60,\n      width: 8,\n      height: 8,\n      zIndex: theme.zIndices.overlay,\n    },\n    \"& .react-flow__handle-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    \"& .react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    [`& .selected > .${flowNodeClasses.root}`]: {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      borderRadius: theme.radii.round,\n      boxSizing: \"border-box\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","backgroundColor","theme","colors","secondary_60","width","zIndex","zIndices","overlay","negative_20","translate","positive_20","flowNodeClasses","border","borderRadius","radii","round","boxSizing"],"mappings":";;;;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,MAAMC,OAAOM;AAAAA,MAC9BJ,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7BT,iBAAiBC,MAAMC,OAAOQ;AAAAA,MAC9BN,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,gBAAgBb,IAAK,EAAC,GAAG;AAAA,MAC1Cc,QAAS,aAAYX,MAAMC,OAAOC,YAAa;AAAA,MAC/CU,cAAcZ,MAAMa,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/Flow/Node/Node.js

@@ -29,7 +29,6 @@ const HvFlowNode = ({
   className,
   children
 }) => {
-  var _a, _b, _c, _d, _e, _f;
   const [showParams, setShowParams] = useState(expanded);
   const [showActions, setShowActions] = useState(false);
   const reactFlowInstance = useReactFlow();
@@ -46,11 +45,11 @@ const HvFlowNode = ({
   const edges = useStore((s) => s.edges);
   const nodes = useStore((s) => s.getNodes());
   const node = nodes.find((n) => n.id === id);
-  const groupId = (_a = nodeTypes == null ? void 0 : nodeTypes[type].meta) == null ? void 0 : _a.groupId;
-  const title = (_b = nodeTypes == null ? void 0 : nodeTypes[type].meta) == null ? void 0 : _b.label;
+  const groupId = nodeTypes?.[type].meta?.groupId;
+  const title = nodeTypes?.[type].meta?.label;
   const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;
-  const inputs = (_d = (_c = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _c.meta) == null ? void 0 : _d.inputs;
-  const outputs = (_f = (_e = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _e.meta) == null ? void 0 : _f.outputs;
+  const inputs = nodeTypes?.[type]?.meta?.inputs;
+  const outputs = nodeTypes?.[type]?.meta?.outputs;
   const icon = groupId && nodeGroups && nodeGroups[groupId].icon;
   const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;
   const color = getColor(colorProp);
@@ -58,7 +57,7 @@ const HvFlowNode = ({
     const newNodes = nodes.map((n) => {
       if (n.id === id) {
         if (Object.keys(n.data).length === 0) {
-          params == null ? void 0 : params.forEach((param) => {
+          params?.forEach((param) => {
             n.data[param.id] = param.value;
           });
         }
@@ -93,13 +92,13 @@ const HvFlowNode = ({
   const hasParams = !!(params && params.length > 0);
   if (!node)
     return null;
-  const actsVisible = actions == null ? void 0 : actions.slice(0, maxVisibleActions);
-  const actsDropdown = actions == null ? void 0 : actions.slice(maxVisibleActions);
-  const renderedIcon = (actionIcon) => isValidElement(actionIcon) ? actionIcon : actionIcon == null ? void 0 : actionIcon();
+  const actsVisible = actions?.slice(0, maxVisibleActions);
+  const actsDropdown = actions?.slice(maxVisibleActions);
+  const renderedIcon = (actionIcon) => isValidElement(actionIcon) ? actionIcon : actionIcon?.();
   return /* @__PURE__ */ jsxs("div", { className: cx(css({
     border: `1px solid ${color}`
   }), classes.root, className), onMouseEnter: () => setShowActions(true), onMouseLeave: () => setShowActions(false), children: [
-    /* @__PURE__ */ jsx(NodeToolbar, { isVisible: showActions, offset: 0, children: defaultActions == null ? void 0 : defaultActions.map((action) => /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: () => handleDefaultAction(action.id), children: renderedIcon(action.icon) }, action.id)) }),
+    /* @__PURE__ */ jsx(NodeToolbar, { isVisible: showActions, offset: 0, children: defaultActions?.map((action) => /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: () => handleDefaultAction(action.id), children: renderedIcon(action.icon) }, action.id)) }),
     /* @__PURE__ */ jsxs("div", { className: cx(css({
       backgroundColor: color
     }), classes.headerContainer), children: [
@@ -116,26 +115,26 @@ const HvFlowNode = ({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { children: title }) }),
-      /* @__PURE__ */ jsx("div", { className: classes.actions, children: (actions == null ? void 0 : actions.length) && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        actsVisible == null ? void 0 : actsVisible.map((action) => /* @__PURE__ */ jsx(HvTooltip, { title: /* @__PURE__ */ jsx(HvTypography, { children: action.label }), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: (event) => {
-          actionCallback == null ? void 0 : actionCallback(event, node.id, action);
+      /* @__PURE__ */ jsx("div", { className: classes.actions, children: actions?.length && actions?.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        actsVisible?.map((action) => /* @__PURE__ */ jsx(HvTooltip, { title: /* @__PURE__ */ jsx(HvTypography, { children: action.label }), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: (event) => {
+          actionCallback?.(event, node.id, action);
         }, "aria-label": action.label, children: renderedIcon(action.icon) }) }) }, action.id)),
-        actsDropdown && actsDropdown.length > 0 && /* @__PURE__ */ jsx(HvDropDownMenu, { keepOpened: false, dataList: actsDropdown == null ? void 0 : actsDropdown.map((action) => ({
+        actsDropdown && actsDropdown.length > 0 && /* @__PURE__ */ jsx(HvDropDownMenu, { keepOpened: false, dataList: actsDropdown?.map((action) => ({
           id: action.id,
           label: action.label
         })), onClick: (event, action) => {
-          actionCallback == null ? void 0 : actionCallback(event, node.id, action);
+          actionCallback?.(event, node.id, action);
         } })
       ] }) })
     ] }),
     children && /* @__PURE__ */ jsx("div", { className: classes.contentContainer, children }),
-    showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { nodeId: id, params, data: node == null ? void 0 : node.data }) }),
+    showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { nodeId: id, params, data: node?.data }) }),
     inputs && inputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: "Inputs" }) }),
-      /* @__PURE__ */ jsx("div", { className: classes.inputsContainer, children: inputs == null ? void 0 : inputs.map((input, idx) => /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
+      /* @__PURE__ */ jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
         /* @__PURE__ */ jsx(Handle, { type: "target", isConnectableStart: false, id: `${idx}`, position: Position.Left, style: {
           top: "auto",
-          bottom: ((outputs == null ? void 0 : outputs.length) ? 80 : 18) + ((outputs == null ? void 0 : outputs.length) || 0) * 29 + 29 * idx
+          bottom: (outputs?.length ? 80 : 18) + (outputs?.length || 0) * 29 + 29 * idx
         } }),
         /* @__PURE__ */ jsx(HvTypography, { children: input.label }),
         input.isMandatory && !isInputConnected(id, "target", idx, edges) && /* @__PURE__ */ jsx("div", { className: classes.mandatory })
@@ -143,7 +142,7 @@ const HvFlowNode = ({
     ] }),
     outputs && outputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: "Outputs" }) }),
-      /* @__PURE__ */ jsx("div", { className: classes.outputsContainer, children: outputs == null ? void 0 : outputs.map((output, idx) => /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
+      /* @__PURE__ */ jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
         /* @__PURE__ */ jsx(Handle, { type: "source", isConnectableEnd: false, id: `${idx}`, position: Position.Right, style: {
           bottom: -10 + 29 * (outputs.length - idx),
           top: "auto"