@hitachivantara/uikit-react-lab 5.11.2 → 5.12.0

package/dist/cjs/components/Flow/Controls/Controls.cjs

@@ -45,15 +45,15 @@ const HvFlowControls = ({
   const labels = uikitReactCore.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({
@@ -61,13 +61,13 @@ const HvFlowControls = ({
       nodesConnectable: !isInteractive,
       elementsSelectable: !isInteractive
     });
-    onInteractiveChange == null ? void 0 : onInteractiveChange(!isInteractive);
+    onInteractiveChange?.(!isInteractive);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Panel, { position, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, { vertical: orientation === "vertical", children: [
-    !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels == null ? void 0 : labels.zoomIn, onClick: handleZoomIn, disabled: maxZoomReached, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, { role: "none" }) }),
-    !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels == null ? void 0 : labels.zoomOut, onClick: handleZoomOut, disabled: minZoomReached, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, { role: "none" }) }),
-    !hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels == null ? void 0 : labels.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, { role: "none" }) }),
-    !hideInteractive && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels == null ? void 0 : labels.interactive, onClick: handleInteractive, children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, { role: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, { role: "none" }) }),
+    !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.zoomIn, onClick: handleZoomIn, disabled: maxZoomReached, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, { role: "none" }) }),
+    !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.zoomOut, onClick: handleZoomOut, disabled: minZoomReached, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, { role: "none" }) }),
+    !hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, { role: "none" }) }),
+    !hideInteractive && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.interactive, onClick: handleInteractive, children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, { role: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, { role: "none" }) }),
     children
   ] }) });
 };

package/dist/cjs/components/Flow/Controls/Controls.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.cjs","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","jsx","Panel","jsxs","HvMultiButton","HvButton","ZoomIn","ZoomOut","Focus","Unlock","Lock"],"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,UACxD7B,SAAAA,UACA8B,QAAAA,OACF;AACA,QAAMC,QAAQC,UAAAA;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,UAAa,aAAA;AAE5Cf,QAAAA,SAASgB,eAAAA,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,SAAAsC,2BAAA,IAACC,mBAAM,UAAwBb,GAAAA,QAC7B,UAACc,2BAAA,KAAAC,eAAA,eAAA,EAAc,UAAUnB,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAACF,YACCkB,2BAAA,IAAAI,yBAAA,EACC,MAAI,MACJ,OAAO1B,iCAAQrB,QACf,SAASsC,cACT,UAAU1B,gBAEV,UAAA+B,2BAAA,IAACK,gBAAO,QAAA,EAAA,MAAK,OAAM,CAAA,GACrB;AAAA,IAED,CAACvB,YACAkB,2BAAA,IAACI,yBACC,EAAA,MAAI,MACJ,OAAO1B,iCAAQpB,SACf,SAASsC,eACT,UAAU9B,gBAEV,yCAACwC,gBAAQ,SAAA,EAAA,MAAK,OAAM,CAAA,GACtB;AAAA,IAED,CAACzB,eACCmB,2BAAAA,IAAAI,eAAA,UAAA,EAAS,MAAI,MAAC,OAAO1B,iCAAQtB,SAAS,SAASyC,eAC9C,UAAAG,+BAACO,gBAAAA,OAAM,EAAA,MAAK,OAAM,CAAA,GACpB;AAAA,IAED,CAAC3B,mBACCoB,2BAAAA,IAAAI,eAAA,UAAA,EACC,MAAI,MACJ,OAAO1B,iCAAQnB,aACf,SAASuC,mBAERpC,UAAgB,gBAAAsC,2BAAAA,IAACQ,0BAAO,MAAK,OAAA,CAAM,IAAOR,+BAAAS,gBAAAA,MAAA,EAAK,MAAK,OAAA,CAAS,EAChE,CAAA;AAAA,IAEDtB;AAAAA,EAAAA,EACH,CAAA,EACF,CAAA;AAEJ;;"}
+{"version":3,"file":"Controls.cjs","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","jsx","Panel","jsxs","HvMultiButton","HvButton","ZoomIn","ZoomOut","Focus","Unlock","Lock"],"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,UACxD7B,SAAAA,UACA8B,QAAAA,OACF;AACA,QAAMC,QAAQC,UAAAA;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,UAAa,aAAA;AAE5Cf,QAAAA,SAASgB,eAAAA,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,SAAAsC,2BAAA,IAACC,mBAAM,UAAwBb,GAAAA,QAC7B,UAACc,2BAAA,KAAAC,eAAA,eAAA,EAAc,UAAUnB,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAACF,YACCkB,2BAAA,IAAAI,yBAAA,EACC,MAAI,MACJ,OAAO1B,QAAQrB,QACf,SAASsC,cACT,UAAU1B,gBAEV,UAAA+B,2BAAA,IAACK,gBAAO,QAAA,EAAA,MAAK,OAAM,CAAA,GACrB;AAAA,IAED,CAACvB,YACAkB,2BAAA,IAACI,yBACC,EAAA,MAAI,MACJ,OAAO1B,QAAQpB,SACf,SAASsC,eACT,UAAU9B,gBAEV,yCAACwC,gBAAQ,SAAA,EAAA,MAAK,OAAM,CAAA,GACtB;AAAA,IAED,CAACzB,eACCmB,2BAAAA,IAAAI,eAAA,UAAA,EAAS,MAAI,MAAC,OAAO1B,QAAQtB,SAAS,SAASyC,eAC9C,UAAAG,+BAACO,gBAAAA,OAAM,EAAA,MAAK,OAAM,CAAA,GACpB;AAAA,IAED,CAAC3B,mBACCoB,2BAAAA,IAAAI,eAAA,UAAA,EACC,MAAI,MACJ,OAAO1B,QAAQnB,aACf,SAASuC,mBAERpC,UAAgB,gBAAAsC,2BAAAA,IAACQ,0BAAO,MAAK,OAAA,CAAM,IAAOR,+BAAAS,gBAAAA,MAAA,EAAK,MAAK,OAAA,CAAS,EAChE,CAAA;AAAA,IAEDtB;AAAAA,EAAAA,EACH,CAAA,EACF,CAAA;AAEJ;;"}

package/dist/cjs/components/Flow/DroppableFlow.cjs

@@ -16,7 +16,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);
@@ -27,10 +26,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;
 };
@@ -52,6 +51,7 @@ const HvDroppableFlow = ({
   className,
   children,
   onFlowChange,
+  onDndDrop,
   classes: classesProp,
   nodes: initialNodes = [],
   edges: initialEdges = [],
@@ -78,53 +78,56 @@ const HvDroppableFlow = ({
     id: elementId
   });
   const handleDragEnd = React.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.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]);
   core.useDndMonitor({
     onDragEnd: handleDragEnd
   });
   const handleFlowChange = React.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 = React.useCallback((connection) => {
     const eds = ReactFlow.addEdge(connection, edges);
     setEdges(eds);
     handleFlowChange(nodes, eds);
-    onConnectProp == null ? void 0 : onConnectProp(connection);
+    onConnectProp?.(connection);
   }, [edges, handleFlowChange, nodes, onConnectProp]);
   const handleNodesChange = React.useCallback((changes) => {
     const nds = ReactFlow.applyNodeChanges(changes, nodes);
     setNodes(nds);
     handleFlowChange(nds, edges);
-    onNodesChangeProp == null ? void 0 : onNodesChangeProp(changes);
+    onNodesChangeProp?.(changes);
   }, [edges, handleFlowChange, nodes, onNodesChangeProp]);
   const handleEdgesChange = React.useCallback((changes) => {
     const eds = ReactFlow.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/cjs/components/Flow/DroppableFlow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.cjs","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","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","jsxs","Fragment","jsx","Global","flowStyles","root","ReactFlow"],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.cjs","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","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","jsxs","Fragment","jsx","Global","flowStyles","root","ReactFlow"],"mappings":"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"}

package/dist/cjs/components/Flow/Empty/Empty.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Empty.cjs","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","jsx","HvEmptyState","root"],"mappings":";;;;;;AASO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAAW,GAAGC;AAAyB,MAAM;AACnE,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,MAAOC,aAAW,WAAA;AACnC,QAAMC,QAAQC,UAAAA,SAAUC,CAAUA,UAAAA,MAAMC,UAAU;AAClD,SACE,CAACH,UACAA,MAAMI,WAAW,IACfC,2BAAAA,IAAAC,eAAAA,cAAA,EAAa,WAAWR,GAAGD,QAAQU,MAAMZ,SAAS,GAAG,GAAIC,OAAU,CAAA,IAClE;AAER;;"}
+{"version":3,"file":"Empty.cjs","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","jsx","HvEmptyState","root"],"mappings":";;;;;;AAUO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAAW,GAAGC;AAAyB,MAAM;AACnE,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,MAAOC,aAAW,WAAA;AACnC,QAAMC,QAAQC,UAAAA,SAAUC,CAAUA,UAAAA,MAAMC,UAAU;AAClD,SACE,CAACH,UACAA,MAAMI,WAAW,IACfC,2BAAAA,IAAAC,eAAAA,cAAA,EAAa,WAAWR,GAAGD,QAAQU,MAAMZ,SAAS,GAAG,GAAIC,OAAU,CAAA,IAClE;AAER;;"}

package/dist/cjs/components/Flow/Flow.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.styles.cjs","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,eAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,eAAAA,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,eAAAA,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,eAAAA,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,eAAAA,MAAMC,OAAOQ;AAAAA,MAC9BN,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,0BAAgBb,IAAK,EAAC,GAAG;AAAA,MAC1Cc,QAAS,aAAYX,eAAMC,MAAAA,OAAOC,YAAa;AAAA,MAC/CU,cAAcZ,eAAAA,MAAMa,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"Flow.styles.cjs","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,eAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,eAAAA,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,eAAAA,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,eAAAA,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,eAAAA,MAAMC,OAAOQ;AAAAA,MAC9BN,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,0BAAgBb,IAAK,EAAC,GAAG;AAAA,MAC1Cc,QAAS,aAAYX,eAAMC,MAAAA,OAAOC,YAAa;AAAA,MAC/CU,cAAcZ,eAAAA,MAAMa,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/Flow/Node/Node.cjs

@@ -30,7 +30,6 @@ const HvFlowNode = ({
   className,
   children
 }) => {
-  var _a, _b, _c, _d, _e, _f;
   const [showParams, setShowParams] = React.useState(expanded);
   const [showActions, setShowActions] = React.useState(false);
   const reactFlowInstance = ReactFlow.useReactFlow();
@@ -47,11 +46,11 @@ const HvFlowNode = ({
   const edges = ReactFlow.useStore((s) => s.edges);
   const nodes = ReactFlow.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 = uikitStyles.getColor(colorProp);
@@ -59,7 +58,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;
           });
         }
@@ -94,13 +93,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) => React.isValidElement(actionIcon) ? actionIcon : actionIcon == null ? void 0 : actionIcon();
+  const actsVisible = actions?.slice(0, maxVisibleActions);
+  const actsDropdown = actions?.slice(maxVisibleActions);
+  const renderedIcon = (actionIcon) => React.isValidElement(actionIcon) ? actionIcon : actionIcon?.();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(css({
     border: `1px solid ${color}`
   }), classes.root, className), onMouseEnter: () => setShowActions(true), onMouseLeave: () => setShowActions(false), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.NodeToolbar, { isVisible: showActions, offset: 0, children: defaultActions == null ? void 0 : defaultActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: () => handleDefaultAction(action.id), children: renderedIcon(action.icon) }, action.id)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.NodeToolbar, { isVisible: showActions, offset: 0, children: defaultActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: () => handleDefaultAction(action.id), children: renderedIcon(action.icon) }, action.id)) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(css({
       backgroundColor: color
     }), classes.headerContainer), children: [
@@ -117,26 +116,26 @@ const HvFlowNode = ({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: title }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: (actions == null ? void 0 : actions.length) && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        actsVisible == null ? void 0 : actsVisible.map((action) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { title: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: action.label }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: (event) => {
-          actionCallback == null ? void 0 : actionCallback(event, node.id, action);
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: actions?.length && actions?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        actsVisible?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { title: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: action.label }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.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__ */ jsxRuntime.jsx(uikitReactCore.HvDropDownMenu, { keepOpened: false, dataList: actsDropdown == null ? void 0 : actsDropdown.map((action) => ({
+        actsDropdown && actsDropdown.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.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__ */ jsxRuntime.jsx("div", { className: classes.contentContainer, children }),
-    showParams && params && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(ParamRenderer.default, { nodeId: id, params, data: node == null ? void 0 : node.data }) }),
+    showParams && params && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(ParamRenderer.default, { nodeId: id, params, data: node?.data }) }),
     inputs && inputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: "Inputs" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs == null ? void 0 : inputs.map((input, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
         /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Handle, { type: "target", isConnectableStart: false, id: `${idx}`, position: ReactFlow.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__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: input.label }),
         input.isMandatory && !isInputConnected(id, "target", idx, edges) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
@@ -144,7 +143,7 @@ const HvFlowNode = ({
     ] }),
     outputs && outputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: "Outputs" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsContainer, children: outputs == null ? void 0 : outputs.map((output, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
         /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Handle, { type: "source", isConnectableEnd: false, id: `${idx}`, position: ReactFlow.Position.Right, style: {
           bottom: -10 + 29 * (outputs.length - idx),
           top: "auto"

package/dist/cjs/components/Flow/Node/Node.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Node.cjs","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\n\nimport {\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n  useStore,\n} from \"reactflow\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvBaseProps,\n  HvButton,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useFlowContext } from \"../hooks\";\nimport { HvFlowDefaultAction, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowNodeProps extends Omit<HvBaseProps, \"id\">, NodeProps {\n  /** Node description */\n  description: string;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n}\n\nconst isInputConnected = (id, type, idx, edges) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n};\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  description,\n  expanded = false,\n  params,\n  actions,\n  actionCallback,\n  maxVisibleActions = 1,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowNodeProps) => {\n  const [showParams, setShowParams] = useState(expanded);\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n  const edges = useStore((s) => s.edges);\n  const nodes = useStore((s) => s.getNodes());\n\n  const node = nodes.find((n) => n.id === id);\n\n  const groupId = nodeTypes?.[type].meta?.groupId;\n  const title = nodeTypes?.[type].meta?.label;\n  const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;\n\n  const inputs = nodeTypes?.[type]?.meta?.inputs;\n  const outputs = nodeTypes?.[type]?.meta?.outputs;\n  const icon = groupId && nodeGroups && nodeGroups[groupId].icon;\n  const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;\n  const color = getColor(colorProp);\n\n  useEffect(() => {\n    const newNodes = nodes.map((n) => {\n      if (n.id === id) {\n        if (Object.keys(n.data).length === 0) {\n          params?.forEach((param) => {\n            n.data[param.id] = param.value;\n          });\n        }\n      }\n      return n;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowDefaultAction) => {\n      if (!node) return;\n\n      switch (action) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: `${reactFlowInstance.getNodes().length + 1}`,\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  const hasParams = !!(params && params.length > 0);\n\n  if (!node) return null;\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n    isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\n  return (\n    <div\n      className={cx(\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {defaultActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action.id)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div className={classes.groupContainer}>\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.group}>\n            {groupLabel}\n          </HvTypography>\n        </div>\n        <div style={{ display: \"flex\" }}>\n          <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n            <div>\n              <Info />\n            </div>\n          </HvTooltip>\n          <HvButton\n            icon\n            disabled={!hasParams}\n            onClick={() => setShowParams((p) => !p)}\n          >\n            {showParams ? <Up /> : <Down />}\n          </HvButton>\n        </div>\n      </div>\n      <div className={classes.titleContainer}>\n        <div>\n          <HvTypography>{title}</HvTypography>\n        </div>\n        <div className={classes.actions}>\n          {actions?.length && actions?.length > 0 && (\n            <>\n              {actsVisible?.map((action) => (\n                <HvTooltip\n                  key={action.id}\n                  title={<HvTypography>{action.label}</HvTypography>}\n                >\n                  <div>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, node.id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\n                  </div>\n                </HvTooltip>\n              ))}\n\n              {actsDropdown && actsDropdown.length > 0 && (\n                <HvDropDownMenu\n                  keepOpened={false}\n                  dataList={actsDropdown?.map((action) => ({\n                    id: action.id,\n                    label: action.label,\n                  }))}\n                  onClick={(event, action) => {\n                    actionCallback?.(event, node.id, action as HvActionGeneric);\n                  }}\n                />\n              )}\n            </>\n          )}\n        </div>\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","HvFlowNode","description","expanded","params","actions","actionCallback","maxVisibleActions","classes","classesProp","className","children","showParams","setShowParams","useState","showActions","setShowActions","reactFlowInstance","useReactFlow","cx","css","useClasses","nodeGroups","nodeTypes","defaultActions","useFlowContext","useStore","s","nodes","getNodes","node","find","n","groupId","meta","title","label","groupLabel","inputs","outputs","icon","colorProp","color","getColor","useEffect","newNodes","map","Object","keys","data","length","forEach","param","value","setNodes","handleDefaultAction","useCallback","action","deleteElements","addNodes","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","hasParams","actsVisible","slice","actsDropdown","renderedIcon","actionIcon","isValidElement","jsxs","border","root","jsx","NodeToolbar","HvButton","backgroundColor","headerContainer","groupContainer","HvTypography","group","display","HvTooltip","Info","p","Up","Down","titleContainer","event","HvDropDownMenu","contentContainer","paramsContainer","ParamRenderer","Fragment","inputsTitleContainer","inputsContainer","input","inputContainer","Handle","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}
+{"version":3,"file":"Node.cjs","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\n\nimport {\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n  useStore,\n} from \"reactflow\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvBaseProps,\n  HvButton,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useFlowContext } from \"../hooks\";\nimport { HvFlowDefaultAction, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowNodeProps extends Omit<HvBaseProps, \"id\">, NodeProps {\n  /** Node description */\n  description: string;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n}\n\nconst isInputConnected = (id, type, idx, edges) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n};\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  description,\n  expanded = false,\n  params,\n  actions,\n  actionCallback,\n  maxVisibleActions = 1,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowNodeProps) => {\n  const [showParams, setShowParams] = useState(expanded);\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n  const edges = useStore((s) => s.edges);\n  const nodes = useStore((s) => s.getNodes());\n\n  const node = nodes.find((n) => n.id === id);\n\n  const groupId = nodeTypes?.[type].meta?.groupId;\n  const title = nodeTypes?.[type].meta?.label;\n  const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;\n\n  const inputs = nodeTypes?.[type]?.meta?.inputs;\n  const outputs = nodeTypes?.[type]?.meta?.outputs;\n  const icon = groupId && nodeGroups && nodeGroups[groupId].icon;\n  const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;\n  const color = getColor(colorProp);\n\n  useEffect(() => {\n    const newNodes = nodes.map((n) => {\n      if (n.id === id) {\n        if (Object.keys(n.data).length === 0) {\n          params?.forEach((param) => {\n            n.data[param.id] = param.value;\n          });\n        }\n      }\n      return n;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowDefaultAction) => {\n      if (!node) return;\n\n      switch (action) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: `${reactFlowInstance.getNodes().length + 1}`,\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  const hasParams = !!(params && params.length > 0);\n\n  if (!node) return null;\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n    isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\n  return (\n    <div\n      className={cx(\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {defaultActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action.id)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div className={classes.groupContainer}>\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.group}>\n            {groupLabel}\n          </HvTypography>\n        </div>\n        <div style={{ display: \"flex\" }}>\n          <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n            <div>\n              <Info />\n            </div>\n          </HvTooltip>\n          <HvButton\n            icon\n            disabled={!hasParams}\n            onClick={() => setShowParams((p) => !p)}\n          >\n            {showParams ? <Up /> : <Down />}\n          </HvButton>\n        </div>\n      </div>\n      <div className={classes.titleContainer}>\n        <div>\n          <HvTypography>{title}</HvTypography>\n        </div>\n        <div className={classes.actions}>\n          {actions?.length && actions?.length > 0 && (\n            <>\n              {actsVisible?.map((action) => (\n                <HvTooltip\n                  key={action.id}\n                  title={<HvTypography>{action.label}</HvTypography>}\n                >\n                  <div>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, node.id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\n                  </div>\n                </HvTooltip>\n              ))}\n\n              {actsDropdown && actsDropdown.length > 0 && (\n                <HvDropDownMenu\n                  keepOpened={false}\n                  dataList={actsDropdown?.map((action) => ({\n                    id: action.id,\n                    label: action.label,\n                  }))}\n                  onClick={(event, action) => {\n                    actionCallback?.(event, node.id, action as HvActionGeneric);\n                  }}\n                />\n              )}\n            </>\n          )}\n        </div>\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","HvFlowNode","description","expanded","params","actions","actionCallback","maxVisibleActions","classes","classesProp","className","children","showParams","setShowParams","useState","showActions","setShowActions","reactFlowInstance","useReactFlow","cx","css","useClasses","nodeGroups","nodeTypes","defaultActions","useFlowContext","useStore","s","nodes","getNodes","node","find","n","groupId","meta","title","label","groupLabel","inputs","outputs","icon","colorProp","color","getColor","useEffect","newNodes","map","Object","keys","data","length","forEach","param","value","setNodes","handleDefaultAction","useCallback","action","deleteElements","addNodes","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","hasParams","actsVisible","slice","actsDropdown","renderedIcon","actionIcon","isValidElement","jsxs","border","root","jsx","NodeToolbar","HvButton","backgroundColor","headerContainer","groupContainer","HvTypography","group","display","HvTooltip","Info","p","Up","Down","titleContainer","event","HvDropDownMenu","contentContainer","paramsContainer","ParamRenderer","Fragment","inputsTitleContainer","inputsContainer","input","inputContainer","Handle","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}

package/dist/cjs/components/Flow/Node/Node.styles.cjs

@@ -16,7 +16,9 @@ const {
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    borderTopLeftRadius: uikitReactCore.theme.radii.round,
+    borderTopRightRadius: uikitReactCore.theme.radii.round
   },
   groupContainer: {
     display: "flex",

package/dist/cjs/components/Flow/Node/Node.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Node.styles.cjs","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  groupContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  group: {\n    color: theme.colors.base_dark,\n  },\n  titleContainer: {\n    minHeight: 48,\n    padding: theme.spacing(\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.sm\n    ),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  inputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  outputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  contentContainer: {\n    padding: theme.space.sm,\n  },\n  inputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  paramsContainer: {\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    padding: theme.space.sm,\n  },\n  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","groupContainer","group","color","base_dark","titleContainer","minHeight","space","xs","sm","actions","inputsTitleContainer","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","contentContainer","inputsContainer","gap","outputsContainer","paramsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":"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"}
+{"version":3,"file":"Node.styles.cjs","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    borderTopLeftRadius: theme.radii.round,\n    borderTopRightRadius: theme.radii.round,\n  },\n  groupContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  group: {\n    color: theme.colors.base_dark,\n  },\n  titleContainer: {\n    minHeight: 48,\n    padding: theme.spacing(\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.sm\n    ),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  inputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  outputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  contentContainer: {\n    padding: theme.space.sm,\n  },\n  inputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  paramsContainer: {\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    padding: theme.space.sm,\n  },\n  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","borderTopLeftRadius","borderTopRightRadius","groupContainer","group","color","base_dark","titleContainer","minHeight","space","xs","sm","actions","inputsTitleContainer","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","contentContainer","inputsContainer","gap","outputsContainer","paramsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":"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"}

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

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const React = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const ReactFlow = require("reactflow");
 const Select = ({
   nodeId,
   param,
   data
 }) => {
-  var _a;
   const reactFlowInstance = ReactFlow.useReactFlow();
   const [option, setOption] = React.useState(data[param.id]);
   const onSelectChange = (item) => {
@@ -26,7 +25,7 @@ const Select = ({
     reactFlowInstance.setNodes(newNodes);
     setOption(item.label);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDropdown, { label: param.label, values: (_a = param.options) == null ? void 0 : _a.map((o) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDropdown, { disablePortal: true, label: param.label, values: param.options?.map((o) => {
     return {
       id: o,
       label: o,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../../../src/components/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { HvDropdown } from \"@hitachivantara/uikit-react-core\";\nimport { useState } from \"react\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Select = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [option, setOption] = useState(data[param.id]);\n\n  const onSelectChange = (item) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: item.label };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setOption(item.label);\n  };\n\n  return (\n    <HvDropdown\n      label={param.label}\n      values={param.options?.map((o) => {\n        return { id: o, label: o, selected: o === option };\n      })}\n      onChange={(item) => onSelectChange(item)}\n    />\n  );\n};\n\nexport default Select;\n"],"names":["Select","nodeId","param","data","reactFlowInstance","useReactFlow","option","setOption","useState","id","onSelectChange","item","nodes","getNodes","newNodes","map","node","label","setNodes","jsx","HvDropdown","options","o","selected"],"mappings":";;;;;;AAIA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;;AAC1C,QAAMC,oBAAoBC,UAAAA;AACpB,QAAA,CAACC,QAAQC,SAAS,IAAIC,MAAAA,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAEnD,QAAMC,iBAAkBC,CAAS,SAAA;AACzBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE,KAAKM;AAAAA,QAAAA;AAAAA,MAC/C;AACOD,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBc,SAASJ,QAAQ;AACnCP,cAAUI,KAAKM,KAAK;AAAA,EAAA;AAIpB,SAAAE,+BAACC,eAAAA,cACC,OAAOlB,MAAMe,OACb,SAAQf,WAAMmB,YAANnB,mBAAea,IAAKO,CAAM,MAAA;AACzB,WAAA;AAAA,MAAEb,IAAIa;AAAAA,MAAGL,OAAOK;AAAAA,MAAGC,UAAUD,MAAMhB;AAAAA,IAAAA;AAAAA,EAAO,IAEnD,UAAWK,CAASD,SAAAA,eAAeC,IAAI,EACvC,CAAA;AAEN;AAEA,MAAA,WAAeX;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../../../../src/components/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Select = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [option, setOption] = useState(data[param.id]);\n\n  const onSelectChange = (item) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: item.label };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setOption(item.label);\n  };\n\n  return (\n    <HvDropdown\n      disablePortal\n      label={param.label}\n      values={param.options?.map((o) => {\n        return { id: o, label: o, selected: o === option };\n      })}\n      onChange={(item) => onSelectChange(item)}\n    />\n  );\n};\n\nexport default Select;\n"],"names":["Select","nodeId","param","data","reactFlowInstance","useReactFlow","option","setOption","useState","id","onSelectChange","item","nodes","getNodes","newNodes","map","node","label","setNodes","jsx","HvDropdown","options","o","selected"],"mappings":";;;;;;AAIA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;AAC1C,QAAMC,oBAAoBC,UAAAA;AACpB,QAAA,CAACC,QAAQC,SAAS,IAAIC,MAAAA,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAEnD,QAAMC,iBAAkBC,CAAS,SAAA;AACzBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE,KAAKM;AAAAA,QAAAA;AAAAA,MAC/C;AACOD,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBc,SAASJ,QAAQ;AACnCP,cAAUI,KAAKM,KAAK;AAAA,EAAA;AAIpB,SAAAE,2BAAA,IAACC,eACC,YAAA,EAAA,eAAa,MACb,OAAOlB,MAAMe,OACb,QAAQf,MAAMmB,SAASN,IAAKO,CAAM,MAAA;AACzB,WAAA;AAAA,MAAEb,IAAIa;AAAAA,MAAGL,OAAOK;AAAAA,MAAGC,UAAUD,MAAMhB;AAAAA,IAAAA;AAAAA,EAAO,CAClD,GACD,UAAWK,CAASD,SAAAA,eAAeC,IAAI,EACvC,CAAA;AAEN;AAEA,MAAA,WAAeX;;"}

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const React = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const ReactFlow = require("reactflow");
 const Text = ({
   nodeId,

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

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../../../../../src/components/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { HvInput } from \"@hitachivantara/uikit-react-core\";\nimport { useState } from \"react\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Text = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [text, setText] = useState(data[param.id]);\n\n  const onTextChange = (val) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: val };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setText(val);\n  };\n\n  return (\n    <HvInput\n      label={param.label}\n      value={text}\n      onChange={(evt, val) => onTextChange(val)}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","nodeId","param","data","reactFlowInstance","useReactFlow","text","setText","useState","id","onTextChange","val","nodes","getNodes","newNodes","map","node","setNodes","jsx","HvInput","label","evt"],"mappings":";;;;;;AAIA,MAAMA,OAAOA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;AACxC,QAAMC,oBAAoBC,UAAAA;AACpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,MAAAA,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAE/C,QAAMC,eAAgBC,CAAQ,QAAA;AACtBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE;AAAAA,QAAAA;AAAAA,MAC1C;AACOK,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBa,SAASH,QAAQ;AACnCP,YAAQI,GAAG;AAAA,EAAA;AAGb,SACGO,2BAAAA,IAAAC,eAAAA,SAAA,EACC,OAAOjB,MAAMkB,OACb,OAAOd,MACP,UAAU,CAACe,KAAKV,QAAQD,aAAaC,GAAG,EACxC,CAAA;AAEN;AAEA,MAAA,SAAeX;;"}
+{"version":3,"file":"Text.cjs","sources":["../../../../../../src/components/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvInput } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Text = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [text, setText] = useState(data[param.id]);\n\n  const onTextChange = (val) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: val };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setText(val);\n  };\n\n  return (\n    <HvInput\n      label={param.label}\n      value={text}\n      onChange={(evt, val) => onTextChange(val)}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","nodeId","param","data","reactFlowInstance","useReactFlow","text","setText","useState","id","onTextChange","val","nodes","getNodes","newNodes","map","node","setNodes","jsx","HvInput","label","evt"],"mappings":";;;;;;AAIA,MAAMA,OAAOA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;AACxC,QAAMC,oBAAoBC,UAAAA;AACpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,MAAAA,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAE/C,QAAMC,eAAgBC,CAAQ,QAAA;AACtBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE;AAAAA,QAAAA;AAAAA,MAC1C;AACOK,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBa,SAASH,QAAQ;AACnCP,YAAQI,GAAG;AAAA,EAAA;AAGb,SACGO,2BAAAA,IAAAC,eAAAA,SAAA,EACC,OAAOjB,MAAMkB,OACb,OAAOd,MACP,UAAU,CAACe,KAAKV,QAAQD,aAAaC,GAAG,EACxC,CAAA;AAEN;AAEA,MAAA,SAAeX;;"}