@hitachivantara/uikit-react-lab 5.37.1 → 5.37.3

package/dist/cjs/Dashboard/Dashboard.cjs

@@ -27,15 +27,12 @@ const HvDashboard = (props) => {
   const { classes, cx } = Dashboard_styles.useClasses(classesProp);
   const { activeTheme } = uikitReactCore.useTheme();
   const layouts = React.useMemo(() => {
-    if (layoutsProp)
-      return layoutsProp;
-    if (!layout)
-      return {};
+    if (layoutsProp) return layoutsProp;
+    if (!layout) return {};
     return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };
   }, [layoutsProp, layout]);
   const cols = React.useMemo(() => {
-    if (!colsProp)
-      return defaultCols;
+    if (!colsProp) return defaultCols;
     if (typeof colsProp === "number") {
       return {
         xs: colsProp,

package/dist/cjs/Flow/DroppableFlow.cjs

@@ -23,16 +23,13 @@ const validateEdge = (nodes, edges, connection, nodeMetaRegistry) => {
     target: targetId,
     targetHandle
   } = connection;
-  if (!sourceHandle || !targetHandle || !sourceId || !targetId)
-    return false;
+  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;
   const sourceNode = getNode(nodes, sourceId);
   const targetNode = getNode(nodes, targetId);
-  if (!sourceNode || !targetNode)
-    return false;
+  if (!sourceNode || !targetNode) return false;
   const sourceType = sourceNode.type;
   const targetType = targetNode.type;
-  if (!sourceType || !targetType)
-    return false;
+  if (!sourceType || !targetType) return false;
   const inputs = nodeMetaRegistry[targetId]?.inputs || [];
   const outputs = nodeMetaRegistry[sourceId]?.outputs || [];
   const source = outputs.flatMap((out) => out.outputs || out).find((out) => out.id === sourceHandle);
@@ -92,8 +89,7 @@ const HvDroppableFlow = ({
   });
   const handleDragEnd = React.useCallback(
     (event) => {
-      if (event.over?.id !== elementId)
-        return;
+      if (event.over?.id !== elementId) return;
       const hvFlow = event.active.data.current?.hvFlow;
       const type = hvFlow?.type;
       if (!type || !nodeTypes?.[type]) {

package/dist/cjs/Flow/Node/BaseNode.cjs

@@ -91,8 +91,7 @@ const HvFlowBaseNode = ({
       input.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
     ] }, input.id);
   };
-  if (!node)
-    return null;
+  if (!node) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -147,8 +146,7 @@ const HvFlowBaseNode = ({
         inputs && inputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.inputsTitle }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => {
-            if (!utils.isInputGroup(input))
-              return renderInput(input);
+            if (!utils.isInputGroup(input)) return renderInput(input);
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {

package/dist/cjs/Flow/Node/Parameters/ParamRenderer.cjs

@@ -12,8 +12,7 @@ const renderers = {
 const ParamRenderer = ({ params, data }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: params.map((param, idx) => {
     const Renderer = renderers[param.type];
-    if (!Renderer)
-      return null;
+    if (!Renderer) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Renderer, { param, data }, idx);
   }) });
 };

package/dist/cjs/Flow/Node/Parameters/Select.cjs

@@ -38,5 +38,4 @@ const Select = ({ param, data }) => {
     }
   );
 };
-const Select$1 = Select;
-exports.default = Select$1;
+exports.default = Select;

package/dist/cjs/Flow/Node/Parameters/Slider.cjs

@@ -30,5 +30,4 @@ const Slider = ({ param, data }) => {
     }
   );
 };
-const Slider$1 = Slider;
-exports.default = Slider$1;
+exports.default = Slider;

package/dist/cjs/Flow/Node/Parameters/Text.cjs

@@ -16,5 +16,4 @@ const Text = ({ param, data }) => {
     }
   );
 };
-const Text$1 = Text;
-exports.default = Text$1;
+exports.default = Text;

package/dist/cjs/Flow/Sidebar/Sidebar.cjs

@@ -50,8 +50,7 @@ const HvFlowSidebar = ({
     onDragStart: handleDragStart
   });
   const filteredGroups = React.useMemo(() => {
-    if (!filterValue || !nodeGroups)
-      return nodeGroups || {};
+    if (!filterValue || !nodeGroups) return nodeGroups || {};
     return filterValue ? Object.entries(nodeGroups).reduce(
       (acc, [groupId, group]) => {
         const filteredItems = (group.items || []).filter(

package/dist/cjs/Flow/hooks/useFlowNode.cjs

@@ -70,8 +70,7 @@ function useFlowNodeUtils(id) {
   const reactFlowInstance = useFlowInstance.useFlowInstance();
   const setNodeData = React.useCallback(
     (setNewData) => {
-      if (!nodeId)
-        return;
+      if (!nodeId) return;
       reactFlowInstance.setNodes((nodes) => {
         return nodes.map((n) => {
           if (n.id === nodeId) {

package/dist/cjs/Flow/hooks/useNode.cjs

@@ -77,8 +77,7 @@ function useHvNode(props) {
   }, [id, title, inputs, outputs, registerNode, unregisterNode]);
   const handleDefaultAction = React.useCallback(
     (action) => {
-      if (!node)
-        return;
+      if (!node) return;
       if (action.callback) {
         action.callback(node);
         return;

package/dist/cjs/StepNavigation/DefaultNavigation/Step/Step.cjs

@@ -5,6 +5,23 @@ const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const utils = require("../utils.cjs");
 const Step_styles = require("./Step.styles.cjs");
+const iconSizeObject = {
+  xs: "XS",
+  sm: "XS",
+  md: "S",
+  lg: "M",
+  xl: "M"
+};
+const stateObject = {
+  Pending: 16,
+  Failed: 24,
+  Completed: 24
+};
+const iconStateObject = {
+  Pending: uikitReactIcons.HourGlass,
+  Failed: uikitReactIcons.Level3Bad,
+  Completed: uikitReactIcons.Level0Good
+};
 const HvStep = ({
   className,
   classes: classesProp,
@@ -16,18 +33,8 @@ const HvStep = ({
   number = 1
 }) => {
   const { classes, cx } = Step_styles.useClasses(classesProp);
-  const iconSize = {
-    xs: "XS",
-    sm: "XS",
-    md: "S",
-    ml: "M",
-    xl: "M"
-  }[size];
-  const squareL = {
-    Pending: 16,
-    Failed: 24,
-    Completed: 24
-  }[state];
+  const iconSize = iconSizeObject[size];
+  const squareL = stateObject[state];
   const svgSize = {
     xs: squareL - 8,
     sm: squareL,
@@ -39,11 +46,7 @@ const HvStep = ({
   const color = state === "Pending" ? "atmo2" : void 0;
   const semantic = state !== "Pending" ? utils.getSemantic(state) : void 0;
   const status = state === "Current" ? "secondary_60" : void 0;
-  const IconComponent = {
-    Pending: uikitReactIcons.HourGlass,
-    Failed: uikitReactIcons.Level3Bad,
-    Completed: uikitReactIcons.Level0Good
-  }[state];
+  const IconComponent = iconStateObject[state];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist/cjs/StepNavigation/StepNavigation.cjs

@@ -136,11 +136,11 @@ const HvStepNavigation = ({
       title = rawTitle,
       titleWidth = 0,
       titleDisabled = false
-    } = getTitleProps({
+    } = getTitleProps?.({
       state,
       rawTitle,
       number: index + 1
-    });
+    }) ?? {};
     return /* @__PURE__ */ jsxRuntime.jsx(
       uikitReactCore.HvTypography,
       {
@@ -173,9 +173,8 @@ const HvStepNavigation = ({
       className: cx(classes.root, className),
       ...others,
       children: ({ stepsWidth, navWidth, ...itemsProps }) => /* @__PURE__ */ jsxRuntime.jsx(
-        uikitReactCore.HvBox,
+        "nav",
         {
-          component: "nav",
           style: {
             width: `${navWidth}px`,
             margin: 0

package/dist/cjs/Wizard/WizardActions/WizardActions.cjs

@@ -57,8 +57,7 @@ const HvWizardActions = ({
     [handleSubmit, context]
   );
   const nextDisabled = React.useMemo(() => {
-    if (loading)
-      return true;
+    if (loading) return true;
     return !skippable && !context?.[tab]?.valid;
   }, [context, loading, skippable, tab]);
   return /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvDialogActions, { className: classes.actionsContainer, children: [

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

@@ -20,27 +20,29 @@ const HvWizardContent = ({
   const { classes, cx } = WizardContent_styles.useClasses(classesProp);
   const { context, setContext, summary, tab } = React.useContext(WizardContext.default);
   const arrayChildren = React__default.default.Children.toArray(children);
-  const initialContext = arrayChildren.reduce((acc, child, index) => {
-    const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
-    const valid = invalid ?? (index === 0 || null);
-    acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };
-    return acc;
-  }, {});
+  const initialContext = arrayChildren.reduce(
+    (acc, child, index) => {
+      const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
+      const valid = invalid ?? (index === 0 || null);
+      acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };
+      return acc;
+    },
+    {}
+  );
   const summaryRef = React.useRef();
   const resizedRef = React.useRef({ height: 0, width: 0 });
   const [containerRef, sizes] = usehooksTs.useElementSize();
   const [summaryHeight, setSummaryHeight] = React.useState(0);
   const [summaryWidth, setSummaryWidth] = React.useState(0);
   const [summaryLeft, setSummaryLeft] = React.useState(0);
-  const updateSummaryMeasures = React.useCallback((newSizes) => {
-    const modalWidth = newSizes.width;
-    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;
-    setSummaryHeight(newSizes.height);
+  const updateSummaryMeasures = React.useCallback(({ height = 0, width = 0 }) => {
+    const drawerWidth = width * DRAWER_PERCENTAGE;
+    setSummaryHeight(height);
     setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
-    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
+    setSummaryLeft(width - Math.max(drawerWidth, DRAWER_MIN_WIDTH));
     resizedRef.current = {
-      height: newSizes.height,
-      width: newSizes.width
+      height,
+      width
     };
   }, []);
   React.useEffect(() => {
@@ -61,14 +63,17 @@ const HvWizardContent = ({
   React.useEffect(() => {
     if (tab && !context[tab]?.touched) {
       setContext(
-        (oldContext) => Object.entries(oldContext).reduce((acc, [key, childState]) => {
-          acc[key] = +key <= tab ? {
-            ...childState,
-            touched: true,
-            valid: childState?.valid ?? true
-          } : childState;
-          return acc;
-        }, {})
+        (oldContext) => Object.entries(oldContext).reduce(
+          (acc, [key, childState]) => {
+            acc[Number(key)] = +key <= tab ? {
+              ...childState,
+              touched: true,
+              valid: childState?.valid ?? true
+            } : childState;
+            return acc;
+          },
+          {}
+        )
       );
     }
   }, [tab, context, setContext]);

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

@@ -8,18 +8,12 @@ const WizardTitle_styles = require("./WizardTitle.styles.cjs");
 const WizardContext = require("../WizardContext/WizardContext.cjs");
 const StepNavigation = require("../../StepNavigation/StepNavigation.cjs");
 const switchTabState = (state, currentTab, index) => {
-  if (state.loading)
-    return "Pending";
-  if (index === currentTab)
-    return "Current";
-  if (state.valid)
-    return "Completed";
-  if (state.disabled)
-    return "Disabled";
-  if (state.valid === null)
-    return "Enabled";
-  if (state.touched && state.valid === false)
-    return "Failed";
+  if (state?.loading) return "Pending";
+  if (index === currentTab) return "Current";
+  if (state?.valid) return "Completed";
+  if (state?.disabled) return "Disabled";
+  if (state?.valid === null) return "Enabled";
+  if (state?.touched && state?.valid === false) return "Failed";
   return "Enabled";
 };
 const HvWizardTitle = ({

package/dist/esm/Dashboard/Dashboard.js

@@ -26,15 +26,12 @@ const HvDashboard = (props) => {
   const { classes, cx } = useClasses(classesProp);
   const { activeTheme } = useTheme();
   const layouts = useMemo(() => {
-    if (layoutsProp)
-      return layoutsProp;
-    if (!layout)
-      return {};
+    if (layoutsProp) return layoutsProp;
+    if (!layout) return {};
     return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };
   }, [layoutsProp, layout]);
   const cols = useMemo(() => {
-    if (!colsProp)
-      return defaultCols;
+    if (!colsProp) return defaultCols;
     if (typeof colsProp === "number") {
       return {
         xs: colsProp,

package/dist/esm/Dashboard/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.js","sources":["../../../src/Dashboard/Dashboard.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  Layouts,\n  ReactGridLayoutProps,\n  Responsive as ResponsiveGrid,\n  ResponsiveProps,\n  WidthProvider,\n} from \"react-grid-layout\";\nimport { Global } from \"@emotion/react\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { gridStyles, staticClasses, useClasses } from \"./Dashboard.styles\";\n\nconst GridLayout = WidthProvider(ResponsiveGrid);\n\n/** Default column breakpoints. For now, use always 12-column */\nconst defaultCols: HvDashboardProps[\"cols\"] = {\n  xs: 12,\n  sm: 12,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport { staticClasses as dashboardClasses };\n\nexport type HvDashboardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardProps extends Omit<ResponsiveProps, \"cols\"> {\n  /** Dashboard items. Each node must be `key`'ed  */\n  children: React.ReactNode;\n  /** An object used to override or extend the styles applied. */\n  classes?: HvDashboardClasses;\n  /**\n   * Layout is an array of object with the format:\n   *\n   * `{i: string, x: number, y: number, w: number, h: number}`\n   *\n   * The `i` must match the key used on each item component.\n   */\n  layout?: ReactGridLayoutProps[\"layout\"];\n  /** Number of grid columns or an object of breakpoint -> #columns */\n  cols?: number | ResponsiveProps[\"cols\"];\n}\n\n/**\n * A Dashboard grid layout component, based on `react-grid-layout`.\n * The children elements are grid items and must be `key`ed.\n *\n * @see https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#grid-layout-props\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvDashboard = (props: HvDashboardProps) => {\n  const {\n    children,\n    className,\n    layout,\n    cols: colsProp,\n    layouts: layoutsProp,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvDashboard\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const layouts = useMemo<Layouts>(() => {\n    if (layoutsProp) return layoutsProp;\n    if (!layout) return {};\n\n    return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };\n  }, [layoutsProp, layout]);\n\n  const cols = useMemo<ResponsiveProps[\"cols\"]>(() => {\n    if (!colsProp) return defaultCols;\n\n    if (typeof colsProp === \"number\") {\n      return {\n        xs: colsProp,\n        sm: colsProp,\n        md: colsProp,\n        lg: colsProp,\n        xl: colsProp,\n      };\n    }\n\n    return colsProp;\n  }, [colsProp]);\n\n  return (\n    <>\n      <Global styles={gridStyles} />\n      <GridLayout\n        className={cx(classes.root, className)}\n        breakpoints={activeTheme?.breakpoints.values}\n        cols={cols}\n        layouts={layouts}\n        {...others}\n      >\n        {children}\n      </GridLayout>\n    </>\n  );\n};\n"],"names":["ResponsiveGrid"],"mappings":";;;;;;;AAiBA,MAAM,aAAa,cAAcA,UAAc;AAG/C,MAAM,cAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA+Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,EAAE,gBAAgB;AAElB,QAAA,UAAU,QAAiB,MAAM;AACjC,QAAA;AAAoB,aAAA;AACxB,QAAI,CAAC;AAAQ,aAAO;AAEb,WAAA,EAAE,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAO;AAAA,EAAA,GACnE,CAAC,aAAa,MAAM,CAAC;AAElB,QAAA,OAAO,QAAiC,MAAM;AAClD,QAAI,CAAC;AAAiB,aAAA;AAElB,QAAA,OAAO,aAAa,UAAU;AACzB,aAAA;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IAER;AAEO,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAEb,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAO,QAAQ,WAAY,CAAA;AAAA,IAC5B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,aAAa,aAAa,YAAY;AAAA,QACtC;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Dashboard.js","sources":["../../../src/Dashboard/Dashboard.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  Layouts,\n  ReactGridLayoutProps,\n  Responsive as ResponsiveGrid,\n  ResponsiveProps,\n  WidthProvider,\n} from \"react-grid-layout\";\nimport { Global } from \"@emotion/react\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { gridStyles, staticClasses, useClasses } from \"./Dashboard.styles\";\n\nconst GridLayout = WidthProvider(ResponsiveGrid);\n\n/** Default column breakpoints. For now, use always 12-column */\nconst defaultCols: HvDashboardProps[\"cols\"] = {\n  xs: 12,\n  sm: 12,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport { staticClasses as dashboardClasses };\n\nexport type HvDashboardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardProps extends Omit<ResponsiveProps, \"cols\"> {\n  /** Dashboard items. Each node must be `key`'ed  */\n  children: React.ReactNode;\n  /** An object used to override or extend the styles applied. */\n  classes?: HvDashboardClasses;\n  /**\n   * Layout is an array of object with the format:\n   *\n   * `{i: string, x: number, y: number, w: number, h: number}`\n   *\n   * The `i` must match the key used on each item component.\n   */\n  layout?: ReactGridLayoutProps[\"layout\"];\n  /** Number of grid columns or an object of breakpoint -> #columns */\n  cols?: number | ResponsiveProps[\"cols\"];\n}\n\n/**\n * A Dashboard grid layout component, based on `react-grid-layout`.\n * The children elements are grid items and must be `key`ed.\n *\n * @see https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#grid-layout-props\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvDashboard = (props: HvDashboardProps) => {\n  const {\n    children,\n    className,\n    layout,\n    cols: colsProp,\n    layouts: layoutsProp,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvDashboard\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const layouts = useMemo<Layouts>(() => {\n    if (layoutsProp) return layoutsProp;\n    if (!layout) return {};\n\n    return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };\n  }, [layoutsProp, layout]);\n\n  const cols = useMemo<ResponsiveProps[\"cols\"]>(() => {\n    if (!colsProp) return defaultCols;\n\n    if (typeof colsProp === \"number\") {\n      return {\n        xs: colsProp,\n        sm: colsProp,\n        md: colsProp,\n        lg: colsProp,\n        xl: colsProp,\n      };\n    }\n\n    return colsProp;\n  }, [colsProp]);\n\n  return (\n    <>\n      <Global styles={gridStyles} />\n      <GridLayout\n        className={cx(classes.root, className)}\n        breakpoints={activeTheme?.breakpoints.values}\n        cols={cols}\n        layouts={layouts}\n        {...others}\n      >\n        {children}\n      </GridLayout>\n    </>\n  );\n};\n"],"names":["ResponsiveGrid"],"mappings":";;;;;;;AAiBA,MAAM,aAAa,cAAcA,UAAc;AAG/C,MAAM,cAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA+Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,EAAE,gBAAgB;AAElB,QAAA,UAAU,QAAiB,MAAM;AACrC,QAAI,YAAoB,QAAA;AACpB,QAAA,CAAC,OAAQ,QAAO;AAEb,WAAA,EAAE,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAO;AAAA,EAAA,GACnE,CAAC,aAAa,MAAM,CAAC;AAElB,QAAA,OAAO,QAAiC,MAAM;AAC9C,QAAA,CAAC,SAAiB,QAAA;AAElB,QAAA,OAAO,aAAa,UAAU;AACzB,aAAA;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IAER;AAEO,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAEb,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAO,QAAQ,WAAY,CAAA;AAAA,IAC5B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,aAAa,aAAa,YAAY;AAAA,QACtC;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/Flow/DroppableFlow.js

@@ -20,16 +20,13 @@ const validateEdge = (nodes, edges, connection, nodeMetaRegistry) => {
     target: targetId,
     targetHandle
   } = connection;
-  if (!sourceHandle || !targetHandle || !sourceId || !targetId)
-    return false;
+  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;
   const sourceNode = getNode(nodes, sourceId);
   const targetNode = getNode(nodes, targetId);
-  if (!sourceNode || !targetNode)
-    return false;
+  if (!sourceNode || !targetNode) return false;
   const sourceType = sourceNode.type;
   const targetType = targetNode.type;
-  if (!sourceType || !targetType)
-    return false;
+  if (!sourceType || !targetType) return false;
   const inputs = nodeMetaRegistry[targetId]?.inputs || [];
   const outputs = nodeMetaRegistry[sourceId]?.outputs || [];
   const source = outputs.flatMap((out) => out.outputs || out).find((out) => out.id === sourceHandle);
@@ -89,8 +86,7 @@ const HvDroppableFlow = ({
   });
   const handleDragEnd = useCallback(
     (event) => {
-      if (event.over?.id !== elementId)
-        return;
+      if (event.over?.id !== elementId) return;
       const hvFlow = event.active.data.current?.hvFlow;
       const type = hvFlow?.type;
       if (!type || !nodeTypes?.[type]) {

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

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { Global } from \"@emotion/react\";\nimport ReactFlow, {\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  Connection,\n  Edge,\n  EdgeChange,\n  MarkerType,\n  Node,\n  NodeChange,\n  ReactFlowProps,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowStyles } from \"./base\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\nimport { useFlowInstance } from \"./hooks\";\nimport {\n  HvFlowNodeInputGroup,\n  HvFlowNodeMetaRegistry,\n  HvFlowNodeOutputGroup,\n  HvFlowNodeTypes,\n} from \"./types\";\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 types. */\n  nodeTypes?: HvFlowNodeTypes<NodeData>;\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  edges: Edge[],\n  connection: Connection,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry,\n) => {\n  const {\n    source: sourceId,\n    sourceHandle,\n    target: targetId,\n    targetHandle,\n  } = connection;\n\n  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n  const sourceNode = getNode(nodes, sourceId);\n  const targetNode = getNode(nodes, targetId);\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 = nodeMetaRegistry[targetId]?.inputs || [];\n  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n  const source = outputs\n    .flatMap((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n    .find((out) => out.id === sourceHandle);\n  const target = inputs\n    .flatMap((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n    .find((inp) => inp.id === targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) => edg.target === targetId && edg.targetHandle === targetHandle,\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle,\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\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  nodeTypes,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const reactFlowInstance = useFlowInstance();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n  // Keeping track of nodes and edges for onFlowChange since useState is async\n  const nodesRef = useRef(initialNodes);\n  const edgesRef = useRef(initialEdges);\n\n  const updateNodes = (nds: Node[]) => {\n    setNodes(nds);\n    nodesRef.current = nds;\n  };\n\n  const updateEdges = (eds: Edge[]) => {\n    setEdges(eds);\n    edgesRef.current = eds;\n  };\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\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        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = {\n        nodeLabel: hvFlow?.label,\n        ...hvFlow?.data,\n      };\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      updateNodes(nodes.concat(newNode));\n    },\n    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance],\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (nds: Node[], eds: Edge[]) => {\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, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onConnectProp?.(connection);\n    },\n    [handleFlowChange, onConnectProp],\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodesRef.current);\n      updateNodes(nds);\n\n      handleFlowChange(nds, edgesRef.current);\n      onNodesChangeProp?.(changes);\n    },\n    [handleFlowChange, onNodesChangeProp],\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [handleFlowChange, onEdgesChangeProp],\n  );\n\n  const { registry } = useNodeMetaRegistry();\n\n  const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\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={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { Global } from \"@emotion/react\";\nimport ReactFlow, {\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  Connection,\n  Edge,\n  EdgeChange,\n  MarkerType,\n  Node,\n  NodeChange,\n  ReactFlowProps,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowStyles } from \"./base\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\nimport { useFlowInstance } from \"./hooks\";\nimport {\n  HvFlowNodeInputGroup,\n  HvFlowNodeMetaRegistry,\n  HvFlowNodeOutputGroup,\n  HvFlowNodeTypes,\n} from \"./types\";\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 types. */\n  nodeTypes?: HvFlowNodeTypes<NodeData>;\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  edges: Edge[],\n  connection: Connection,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry,\n) => {\n  const {\n    source: sourceId,\n    sourceHandle,\n    target: targetId,\n    targetHandle,\n  } = connection;\n\n  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n  const sourceNode = getNode(nodes, sourceId);\n  const targetNode = getNode(nodes, targetId);\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 = nodeMetaRegistry[targetId]?.inputs || [];\n  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n  const source = outputs\n    .flatMap((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n    .find((out) => out.id === sourceHandle);\n  const target = inputs\n    .flatMap((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n    .find((inp) => inp.id === targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) => edg.target === targetId && edg.targetHandle === targetHandle,\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle,\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\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  nodeTypes,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const reactFlowInstance = useFlowInstance();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n  // Keeping track of nodes and edges for onFlowChange since useState is async\n  const nodesRef = useRef(initialNodes);\n  const edgesRef = useRef(initialEdges);\n\n  const updateNodes = (nds: Node[]) => {\n    setNodes(nds);\n    nodesRef.current = nds;\n  };\n\n  const updateEdges = (eds: Edge[]) => {\n    setEdges(eds);\n    edgesRef.current = eds;\n  };\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\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        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = {\n        nodeLabel: hvFlow?.label,\n        ...hvFlow?.data,\n      };\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      updateNodes(nodes.concat(newNode));\n    },\n    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance],\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (nds: Node[], eds: Edge[]) => {\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, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onConnectProp?.(connection);\n    },\n    [handleFlowChange, onConnectProp],\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodesRef.current);\n      updateNodes(nds);\n\n      handleFlowChange(nds, edgesRef.current);\n      onNodesChangeProp?.(changes);\n    },\n    [handleFlowChange, onNodesChangeProp],\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [handleFlowChange, onEdgesChangeProp],\n  );\n\n  const { registry } = useNodeMetaRegistry();\n\n  const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\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={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -90,8 +90,7 @@ const HvFlowBaseNode = ({
       input.isMandatory && !edgeConnected && /* @__PURE__ */ jsx("div", { className: classes.mandatory })
     ] }, input.id);
   };
-  if (!node)
-    return null;
+  if (!node) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -146,8 +145,7 @@ const HvFlowBaseNode = ({
         inputs && inputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: labels?.inputsTitle }) }),
           /* @__PURE__ */ jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => {
-            if (!isInputGroup(input))
-              return renderInput(input);
+            if (!isInputGroup(input)) return renderInput(input);
             return /* @__PURE__ */ jsxs(
               "div",
               {

package/dist/esm/Flow/Node/BaseNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvTypography,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvUseNodeParams, useHvNode } from \"../hooks\";\nimport {\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n  isConnected,\n  isInputGroup,\n  isOutputGroup,\n  renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n  outputsTitle: \"Outputs\",\n  inputsTitle: \"Inputs\",\n  deleteActionLabel: \"Delete\",\n  duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\" | \"color\">,\n    Omit<HvUseNodeParams, \"id\">,\n    NodeProps<T> {\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** The content of the node footer */\n  footer?: React.ReactNode;\n  /** Labels used on the node. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n  id,\n  title: titleProp,\n  headerItems,\n  icon: iconProp,\n  color: colorProp,\n  inputs: inputsProp,\n  outputs: outputsProp,\n  nodeActions: nodeActionsProp,\n  footer,\n  classes: classesProp,\n  labels: labelsProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const {\n    toggleShowActions,\n    getNodeToolbarProps,\n    handleDefaultAction,\n    nodeActions,\n    title,\n    icon,\n    color,\n    iconColor,\n    inputEdges,\n    inputs,\n    outputEdges,\n    outputs,\n    node,\n  } = useHvNode({\n    id,\n    title: titleProp,\n    inputs: inputsProp,\n    outputs: outputsProp,\n    icon: iconProp,\n    color: colorProp,\n    labels: labelsProp,\n    nodeActions: nodeActionsProp,\n  });\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const renderOutput = (output: HvFlowNodeOutput) => {\n    const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n    return (\n      <div className={classes.outputContainer} key={output.id}>\n        <Handle\n          type=\"source\"\n          isConnectableEnd={false}\n          id={output.id}\n          position={Position.Right}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        {output.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n        <HvTypography component=\"div\">{output.label}</HvTypography>\n      </div>\n    );\n  };\n\n  const renderInput = (input: HvFlowNodeInput) => {\n    const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n    return (\n      <div className={classes.inputContainer} key={input.id}>\n        <Handle\n          type=\"target\"\n          isConnectableStart={false}\n          id={input.id}\n          position={Position.Left}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        <HvTypography component=\"div\">{input.label}</HvTypography>\n        {input.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n      </div>\n    );\n  };\n\n  if (!node) return null;\n\n  return (\n    <div\n      style={{\n        // @ts-ignore\n        \"--node-color\": color,\n      }}\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        classes.root,\n        className,\n      )}\n      onMouseEnter={toggleShowActions}\n      onMouseLeave={toggleShowActions}\n    >\n      <NodeToolbar {...getNodeToolbarProps()}>\n        {nodeActions?.map((action) => (\n          <HvIconButton\n            key={action.id}\n            title={action.label}\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvIconButton>\n        ))}\n      </NodeToolbar>\n      <div className={classes.headerContainer}>\n        <div\n          style={{\n            // @ts-ignore\n            \"--icon-color\": iconColor,\n          }}\n          className={classes.titleContainer}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>{labels?.inputsTitle}</HvTypography>\n          </div>\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              if (!isInputGroup(input)) return renderInput(input);\n\n              return (\n                <div\n                  className={classes.inputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {input.label}\n                  </HvTypography>\n                  {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n                    renderInput(inp),\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>{labels?.outputsTitle}</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              if (!isOutputGroup(output)) {\n                return renderOutput(output);\n              }\n\n              return (\n                <div\n                  className={classes.outputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {output.label}\n                  </HvTypography>\n                  {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n                    return renderOutput(out);\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA4BO,MAAM,iBAAiB;AAAA,EAC5B,cAAc;AAAA,EACd,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,sBAAsB;AACxB;AAgBO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AACF,MAAoC;AAC5B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,UAAU;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,EAAA,CACd;AAEK,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,CAAC,WAA6B;AACjD,UAAM,gBAAgB,YAAY,IAAI,UAAU,OAAO,IAAK,WAAW;AAEvE,WACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,kBAAkB;AAAA,UAClB,IAAI,OAAO;AAAA,UACX,UAAU,SAAS;AAAA,UACnB,WAAW,GAAG,QAAQ,QAAQ;AAAA,YAC5B,CAAC,QAAQ,eAAe,GAAG;AAAA,UAAA,CAC5B;AAAA,QAAA;AAAA,MACH;AAAA,MACC,OAAO,eAAe,CAAC,qCACrB,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,MAEpC,oBAAA,cAAA,EAAa,WAAU,OAAO,iBAAO,OAAM;AAAA,IAAA,KAbA,OAAO,EAcrD;AAAA,EAAA;AAIE,QAAA,cAAc,CAAC,UAA2B;AAC9C,UAAM,gBAAgB,YAAY,IAAI,UAAU,MAAM,IAAK,UAAU;AAErE,WACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,oBAAoB;AAAA,UACpB,IAAI,MAAM;AAAA,UACV,UAAU,SAAS;AAAA,UACnB,WAAW,GAAG,QAAQ,QAAQ;AAAA,YAC5B,CAAC,QAAQ,eAAe,GAAG;AAAA,UAAA,CAC5B;AAAA,QAAA;AAAA,MACH;AAAA,MACC,oBAAA,cAAA,EAAa,WAAU,OAAO,gBAAM,OAAM;AAAA,MAC1C,MAAM,eAAe,CAAC,qCACpB,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,IAAA,KAZM,MAAM,EAcnD;AAAA,EAAA;AAIJ,MAAI,CAAC;AAAa,WAAA;AAGhB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA;AAAA,QAEL,gBAAgB;AAAA,MAClB;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MAEd,UAAA;AAAA,QAAA,oBAAC,eAAa,GAAG,uBACd,UAAa,aAAA,IAAI,CAAC,WACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,SAAS,MAAM,oBAAoB,MAAM;AAAA,YAExC,UAAA,aAAa,OAAO,IAAI;AAAA,UAAA;AAAA,UAJpB,OAAO;AAAA,QAMf,CAAA,GACH;AAAA,QACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA;AAAA,gBAEL,gBAAgB;AAAA,cAClB;AAAA,cACA,WAAW,QAAQ;AAAA,cAElB,UAAA;AAAA,gBAAA;AAAA,gBACD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,SAAQ;AAAA,oBACR,WAAW,QAAQ;AAAA,oBAElB,UAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UACC,mCAAgB,OAAI,EAAA,OAAO,EAAE,SAAS,UAAW,UAAY,aAAA;AAAA,QAAA,GAChE;AAAA,QACC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBAAmB,UAAS;AAAA,QAChE,UAAU,OAAO,SAAS,KAEvB,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,sBACtB,8BAAC,cAAc,EAAA,UAAA,QAAQ,aAAY,EACrC,CAAA;AAAA,UACA,oBAAC,SAAI,WAAW,QAAQ,iBACrB,UAAQ,QAAA,IAAI,CAAC,OAAO,QAAQ;AACvB,gBAAA,CAAC,aAAa,KAAK;AAAG,qBAAO,YAAY,KAAK;AAGhD,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBAGnB,UAAA;AAAA,kBAAA,oBAAC,gBAAa,WAAU,OAAM,SAAQ,SACnC,gBAAM,OACT;AAAA,kBACE,MAA+B,OAAO;AAAA,oBAAI,CAAC,QAC3C,YAAY,GAAG;AAAA,kBACjB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAPK,QAAQ,GAAG;AAAA,YAAA;AAAA,UAUrB,CAAA,GACH;AAAA,QAAA,GACF;AAAA,QAED,WAAW,QAAQ,SAAS,KAEzB,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,uBACtB,8BAAC,cAAc,EAAA,UAAA,QAAQ,cAAa,EACtC,CAAA;AAAA,UACA,oBAAC,SAAI,WAAW,QAAQ,kBACrB,UAAS,SAAA,IAAI,CAAC,QAAQ,QAAQ;AACzB,gBAAA,CAAC,cAAc,MAAM,GAAG;AAC1B,qBAAO,aAAa,MAAM;AAAA,YAC5B;AAGE,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBAGnB,UAAA;AAAA,kBAAA,oBAAC,gBAAa,WAAU,OAAM,SAAQ,SACnC,iBAAO,OACV;AAAA,kBACE,OAAiC,QAAQ,IAAI,CAAC,QAAQ;AACtD,2BAAO,aAAa,GAAG;AAAA,kBAAA,CACxB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAPI,QAAQ,GAAG;AAAA,YAAA;AAAA,UAUrB,CAAA,GACH;AAAA,QAAA,GACF;AAAA,QAED,UAAW,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBAAkB,UAAO,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlE;"}
+{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvTypography,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvUseNodeParams, useHvNode } from \"../hooks\";\nimport {\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n  isConnected,\n  isInputGroup,\n  isOutputGroup,\n  renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const DEFAULT_LABELS = {\n  outputsTitle: \"Outputs\",\n  inputsTitle: \"Inputs\",\n  deleteActionLabel: \"Delete\",\n  duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\" | \"color\">,\n    Omit<HvUseNodeParams, \"id\">,\n    NodeProps<T> {\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** The content of the node footer */\n  footer?: React.ReactNode;\n  /** Labels used on the node. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n  id,\n  title: titleProp,\n  headerItems,\n  icon: iconProp,\n  color: colorProp,\n  inputs: inputsProp,\n  outputs: outputsProp,\n  nodeActions: nodeActionsProp,\n  footer,\n  classes: classesProp,\n  labels: labelsProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const {\n    toggleShowActions,\n    getNodeToolbarProps,\n    handleDefaultAction,\n    nodeActions,\n    title,\n    icon,\n    color,\n    iconColor,\n    inputEdges,\n    inputs,\n    outputEdges,\n    outputs,\n    node,\n  } = useHvNode({\n    id,\n    title: titleProp,\n    inputs: inputsProp,\n    outputs: outputsProp,\n    icon: iconProp,\n    color: colorProp,\n    labels: labelsProp,\n    nodeActions: nodeActionsProp,\n  });\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const renderOutput = (output: HvFlowNodeOutput) => {\n    const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n    return (\n      <div className={classes.outputContainer} key={output.id}>\n        <Handle\n          type=\"source\"\n          isConnectableEnd={false}\n          id={output.id}\n          position={Position.Right}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        {output.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n        <HvTypography component=\"div\">{output.label}</HvTypography>\n      </div>\n    );\n  };\n\n  const renderInput = (input: HvFlowNodeInput) => {\n    const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n    return (\n      <div className={classes.inputContainer} key={input.id}>\n        <Handle\n          type=\"target\"\n          isConnectableStart={false}\n          id={input.id}\n          position={Position.Left}\n          className={cx(classes.handle, {\n            [classes.handleConnected]: edgeConnected,\n          })}\n        />\n        <HvTypography component=\"div\">{input.label}</HvTypography>\n        {input.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n      </div>\n    );\n  };\n\n  if (!node) return null;\n\n  return (\n    <div\n      style={{\n        // @ts-ignore\n        \"--node-color\": color,\n      }}\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        classes.root,\n        className,\n      )}\n      onMouseEnter={toggleShowActions}\n      onMouseLeave={toggleShowActions}\n    >\n      <NodeToolbar {...getNodeToolbarProps()}>\n        {nodeActions?.map((action) => (\n          <HvIconButton\n            key={action.id}\n            title={action.label}\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvIconButton>\n        ))}\n      </NodeToolbar>\n      <div className={classes.headerContainer}>\n        <div\n          style={{\n            // @ts-ignore\n            \"--icon-color\": iconColor,\n          }}\n          className={classes.titleContainer}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>{labels?.inputsTitle}</HvTypography>\n          </div>\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              if (!isInputGroup(input)) return renderInput(input);\n\n              return (\n                <div\n                  className={classes.inputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {input.label}\n                  </HvTypography>\n                  {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n                    renderInput(inp),\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>{labels?.outputsTitle}</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              if (!isOutputGroup(output)) {\n                return renderOutput(output);\n              }\n\n              return (\n                <div\n                  className={classes.outputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {output.label}\n                  </HvTypography>\n                  {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n                    return renderOutput(out);\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Flow/Node/Parameters/ParamRenderer.js

@@ -10,8 +10,7 @@ const renderers = {
 const ParamRenderer = ({ params, data }) => {
   return /* @__PURE__ */ jsx(Fragment, { children: params.map((param, idx) => {
     const Renderer = renderers[param.type];
-    if (!Renderer)
-      return null;
+    if (!Renderer) return null;
     return /* @__PURE__ */ jsx(Renderer, { param, data }, idx);
   }) });
 };

package/dist/esm/Flow/Node/Parameters/ParamRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParamRenderer.js","sources":["../../../../../src/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Select from \"./Select\";\nimport Slider from \"./Slider\";\nimport Text from \"./Text\";\n\nexport type ParamRendererProps = {\n  params: HvFlowNodeParam[];\n  data: any;\n};\n\nconst renderers = {\n  text: Text,\n  select: Select,\n  slider: Slider,\n};\n\nexport const ParamRenderer = ({ params, data }: ParamRendererProps) => {\n  return (\n    <>\n      {params.map((param, idx) => {\n        const Renderer = renderers[param.type];\n        if (!Renderer) return null;\n\n        return <Renderer key={idx} param={param} data={data} />;\n      })}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,YAAY;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AACV;AAEO,MAAM,gBAAgB,CAAC,EAAE,QAAQ,WAA+B;AACrE,SAEK,oBAAA,UAAA,EAAA,UAAA,OAAO,IAAI,CAAC,OAAO,QAAQ;AACpB,UAAA,WAAW,UAAU,MAAM,IAAI;AACrC,QAAI,CAAC;AAAiB,aAAA;AAEtB,WAAQ,oBAAA,UAAA,EAAmB,OAAc,KAAA,GAAnB,GAA+B;AAAA,EACtD,CAAA,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"ParamRenderer.js","sources":["../../../../../src/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Select from \"./Select\";\nimport Slider from \"./Slider\";\nimport Text from \"./Text\";\n\nexport type ParamRendererProps = {\n  params: HvFlowNodeParam[];\n  data: any;\n};\n\nconst renderers = {\n  text: Text,\n  select: Select,\n  slider: Slider,\n};\n\nexport const ParamRenderer = ({ params, data }: ParamRendererProps) => {\n  return (\n    <>\n      {params.map((param, idx) => {\n        const Renderer = renderers[param.type];\n        if (!Renderer) return null;\n\n        return <Renderer key={idx} param={param} data={data} />;\n      })}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,YAAY;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AACV;AAEO,MAAM,gBAAgB,CAAC,EAAE,QAAQ,WAA+B;AACrE,SAEK,oBAAA,UAAA,EAAA,UAAA,OAAO,IAAI,CAAC,OAAO,QAAQ;AACpB,UAAA,WAAW,UAAU,MAAM,IAAI;AACjC,QAAA,CAAC,SAAiB,QAAA;AAEtB,WAAQ,oBAAA,UAAA,EAAmB,OAAc,KAAA,GAAnB,GAA+B;AAAA,EACtD,CAAA,EACH,CAAA;AAEJ;"}

package/dist/esm/Flow/Node/Parameters/Select.js

@@ -36,7 +36,6 @@ const Select = ({ param, data }) => {
     }
   );
 };
-const Select$1 = Select;
 export {
-  Select$1 as default
+  Select as default
 };

package/dist/esm/Flow/Node/Parameters/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { useFlowNodeUtils } from \"../../hooks\";\nimport { HvFlowNodeSelectParam } from \"../../types\";\n\ninterface SelectProps {\n  param: Omit<HvFlowNodeSelectParam, \"type\">;\n  data: any;\n}\n\nconst Select = ({ param, data }: SelectProps) => {\n  const { id, label, multiple = false, options } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  const [opts, setOpts] = useState<string[] | undefined>(\n    data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined,\n  );\n\n  const handleChange: HvDropdownProps[\"onChange\"] = (item) => {\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.id as string)\n      : (item?.id as string) ?? undefined;\n\n    setNodeData((prev) => ({ ...prev, [id]: newOpts }));\n    setOpts(\n      newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined,\n    );\n  };\n\n  return (\n    <HvDropdown\n      className=\"nodrag\" // Prevents dragging within the select field\n      disablePortal\n      label={label}\n      values={options?.map((option) => {\n        const optionId = typeof option === \"string\" ? option : option.id;\n        const optionLabel = typeof option === \"string\" ? option : option.label;\n\n        return {\n          id: optionId,\n          label: optionLabel,\n          selected: !!opts?.find((opt) => opt === optionId),\n        };\n      })}\n      onChange={handleChange}\n      maxHeight={100}\n      multiSelect={multiple}\n    />\n  );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;AAWA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AAC/C,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAC3C,QAAA,EAAE,gBAAgB;AAElB,QAAA,CAAC,MAAM,OAAO,IAAI;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EAAA;AAG3D,QAAA,eAA4C,CAAC,SAAS;AAC1D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,EAAY,IAC7B,MAAM,MAAiB;AAEhB,gBAAA,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,QAAU,EAAA;AAClD;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAAA;AAAA,EAC7D;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,WAAW;AAC/B,cAAM,WAAW,OAAO,WAAW,WAAW,SAAS,OAAO;AAC9D,cAAM,cAAc,OAAO,WAAW,WAAW,SAAS,OAAO;AAE1D,eAAA;AAAA,UACL,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,QAAQ;AAAA,QAAA;AAAA,MAClD,CACD;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEA,MAAA,WAAe;"}
+{"version":3,"file":"Select.js","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { useFlowNodeUtils } from \"../../hooks\";\nimport { HvFlowNodeSelectParam } from \"../../types\";\n\ninterface SelectProps {\n  param: Omit<HvFlowNodeSelectParam, \"type\">;\n  data: any;\n}\n\nconst Select = ({ param, data }: SelectProps) => {\n  const { id, label, multiple = false, options } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  const [opts, setOpts] = useState<string[] | undefined>(\n    data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined,\n  );\n\n  const handleChange: HvDropdownProps[\"onChange\"] = (item) => {\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.id as string)\n      : ((item?.id as string) ?? undefined);\n\n    setNodeData((prev) => ({ ...prev, [id]: newOpts }));\n    setOpts(\n      newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined,\n    );\n  };\n\n  return (\n    <HvDropdown\n      className=\"nodrag\" // Prevents dragging within the select field\n      disablePortal\n      label={label}\n      values={options?.map((option) => {\n        const optionId = typeof option === \"string\" ? option : option.id;\n        const optionLabel = typeof option === \"string\" ? option : option.label;\n\n        return {\n          id: optionId,\n          label: optionLabel,\n          selected: !!opts?.find((opt) => opt === optionId),\n        };\n      })}\n      onChange={handleChange}\n      maxHeight={100}\n      multiSelect={multiple}\n    />\n  );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;AAWA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AAC/C,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAC3C,QAAA,EAAE,gBAAgB;AAElB,QAAA,CAAC,MAAM,OAAO,IAAI;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EAAA;AAG3D,QAAA,eAA4C,CAAC,SAAS;AAC1D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,EAAY,IAC5B,MAAM,MAAiB;AAEjB,gBAAA,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,QAAU,EAAA;AAClD;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAAA;AAAA,EAC7D;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,WAAW;AAC/B,cAAM,WAAW,OAAO,WAAW,WAAW,SAAS,OAAO;AAC9D,cAAM,cAAc,OAAO,WAAW,WAAW,SAAS,OAAO;AAE1D,eAAA;AAAA,UACL,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,QAAQ;AAAA,QAAA;AAAA,MAClD,CACD;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;"}

package/dist/esm/Flow/Node/Parameters/Slider.js

@@ -28,7 +28,6 @@ const Slider = ({ param, data }) => {
     }
   );
 };
-const Slider$1 = Slider;
 export {
-  Slider$1 as default
+  Slider as default
 };

package/dist/esm/Flow/Node/Parameters/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { HvSlider } from \"@hitachivantara/uikit-react-core\";\n\nimport { useFlowNodeUtils } from \"../../hooks\";\nimport { HvFlowNodeSliderParam } from \"../../types\";\n\ninterface SliderProps {\n  param: Omit<HvFlowNodeSliderParam, \"type\">;\n  data: any;\n}\n\nconst classes = {\n  labelContainer: css({\n    marginRight: 0,\n    marginLeft: 0,\n  }),\n  sliderBase: css({\n    padding: 0,\n  }),\n};\n\nconst Slider = ({ param, data }: SliderProps) => {\n  const { id } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  return (\n    <HvSlider\n      className=\"nodrag\" // Prevents dragging within the input field\n      defaultValues={data[id]}\n      onChange={(val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n      classes={{\n        labelContainer: classes.labelContainer,\n        sliderBase: classes.sliderBase,\n      }}\n      {...param}\n    />\n  );\n};\n\nexport default Slider;\n"],"names":[],"mappings":";;;;AAWA,MAAM,UAAU;AAAA,EACd,gBAAgB,IAAI;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb;AAAA,EACD,YAAY,IAAI;AAAA,IACd,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AACzC,QAAA,EAAE,GAAO,IAAA;AACT,QAAA,EAAE,gBAAgB;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe,KAAK,EAAE;AAAA,MACtB,UAAU,CAAC,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AAAA,MACjE,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAA,WAAe;"}
+{"version":3,"file":"Slider.js","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { HvSlider } from \"@hitachivantara/uikit-react-core\";\n\nimport { useFlowNodeUtils } from \"../../hooks\";\nimport { HvFlowNodeSliderParam } from \"../../types\";\n\ninterface SliderProps {\n  param: Omit<HvFlowNodeSliderParam, \"type\">;\n  data: any;\n}\n\nconst classes = {\n  labelContainer: css({\n    marginRight: 0,\n    marginLeft: 0,\n  }),\n  sliderBase: css({\n    padding: 0,\n  }),\n};\n\nconst Slider = ({ param, data }: SliderProps) => {\n  const { id } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  return (\n    <HvSlider\n      className=\"nodrag\" // Prevents dragging within the input field\n      defaultValues={data[id]}\n      onChange={(val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n      classes={{\n        labelContainer: classes.labelContainer,\n        sliderBase: classes.sliderBase,\n      }}\n      {...param}\n    />\n  );\n};\n\nexport default Slider;\n"],"names":[],"mappings":";;;;AAWA,MAAM,UAAU;AAAA,EACd,gBAAgB,IAAI;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb;AAAA,EACD,YAAY,IAAI;AAAA,IACd,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AACzC,QAAA,EAAE,GAAO,IAAA;AACT,QAAA,EAAE,gBAAgB;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe,KAAK,EAAE;AAAA,MACtB,UAAU,CAAC,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AAAA,MACjE,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/Flow/Node/Parameters/Text.js

@@ -14,7 +14,6 @@ const Text = ({ param, data }) => {
     }
   );
 };
-const Text$1 = Text;
 export {
-  Text$1 as default
+  Text as default
 };