@hitachivantara/uikit-react-lab 5.13.2 → 5.13.3

package/dist/esm/components/Flow/FlowContext/NodeMetaContext.js

@@ -0,0 +1,39 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useContext, useRef, useCallback, useMemo } from "react";
+const HvFlowNodeMetaContext = createContext(void 0);
+const HvFlowNodeMetaProvider = ({
+  children
+}) => {
+  const registryRef = useRef({});
+  const registerNode = useCallback((id, nodeInfo) => {
+    registryRef.current[id] = nodeInfo;
+  }, []);
+  const unregisterNode = useCallback((id) => {
+    delete registryRef.current[id];
+  }, []);
+  const getRegistry = useCallback(() => {
+    return registryRef.current;
+  }, []);
+  const value = useMemo(() => ({
+    registerNode,
+    unregisterNode,
+    getRegistry
+  }), [registerNode, unregisterNode, getRegistry]);
+  return /* @__PURE__ */ jsx(HvFlowNodeMetaContext.Provider, { value, children });
+};
+function useNodeMetaRegistry() {
+  const context = useContext(HvFlowNodeMetaContext);
+  if (context === void 0) {
+    throw new Error("useNodeRegistry must be used within a HvFlowNodeMetaProvider");
+  }
+  return {
+    registerNode: context.registerNode,
+    unregisterNode: context.unregisterNode,
+    registry: context.getRegistry()
+  };
+}
+export {
+  HvFlowNodeMetaProvider,
+  useNodeMetaRegistry
+};
+//# sourceMappingURL=NodeMetaContext.js.map

package/dist/esm/components/Flow/FlowContext/NodeMetaContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeMetaContext.js","sources":["../../../../../src/components/Flow/FlowContext/NodeMetaContext.tsx"],"sourcesContent":["import { createContext, useRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvFlowNodeMeta } from \"../types\";\n\ninterface HvFlowNodeMetaContextType {\n  registerNode: (id: string, nodeInfo: HvFlowNodeMeta) => void;\n  unregisterNode: (id: string) => void;\n  getRegistry: () => Record<string, HvFlowNodeMeta>;\n}\n\nconst HvFlowNodeMetaContext = createContext<\n  HvFlowNodeMetaContextType | undefined\n>(undefined);\n\nexport const HvFlowNodeMetaProvider = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  const registryRef = useRef<Record<string, HvFlowNodeMeta>>({});\n\n  const registerNode = useCallback((id: string, nodeInfo: HvFlowNodeMeta) => {\n    registryRef.current[id] = nodeInfo;\n  }, []);\n\n  const unregisterNode = useCallback((id: string) => {\n    delete registryRef.current[id];\n  }, []);\n\n  const getRegistry = useCallback(() => {\n    return registryRef.current;\n  }, []);\n\n  const value = useMemo<HvFlowNodeMetaContextType>(\n    () => ({\n      registerNode,\n      unregisterNode,\n      getRegistry,\n    }),\n    [registerNode, unregisterNode, getRegistry]\n  );\n\n  return (\n    <HvFlowNodeMetaContext.Provider value={value}>\n      {children}\n    </HvFlowNodeMetaContext.Provider>\n  );\n};\n\nexport function useNodeMeta(nodeId: string): HvFlowNodeMeta | undefined {\n  const context = useContext(HvFlowNodeMetaContext);\n\n  if (context === undefined) {\n    throw new Error(\"useNodeMeta must be used within a HvFlowNodeMetaProvider\");\n  }\n\n  const registry = context.getRegistry();\n  return registry[nodeId];\n}\n\nexport function useNodeMetaRegistry() {\n  const context = useContext(HvFlowNodeMetaContext);\n\n  if (context === undefined) {\n    throw new Error(\n      \"useNodeRegistry must be used within a HvFlowNodeMetaProvider\"\n    );\n  }\n\n  return {\n    registerNode: context.registerNode,\n    unregisterNode: context.unregisterNode,\n    registry: context.getRegistry(),\n  };\n}\n"],"names":["HvFlowNodeMetaContext","createContext","undefined","HvFlowNodeMetaProvider","children","registryRef","useRef","registerNode","useCallback","id","nodeInfo","current","unregisterNode","getRegistry","value","useMemo","useNodeMetaRegistry","context","useContext","Error","registry"],"mappings":";;AAUA,MAAMA,wBAAwBC,cAE5BC,MAAS;AAEJ,MAAMC,yBAAyBA,CAAC;AAAA,EACrCC;AAGF,MAAM;AACEC,QAAAA,cAAcC,OAAuC,CAAA,CAAE;AAE7D,QAAMC,eAAeC,YAAY,CAACC,IAAYC,aAA6B;AAC7DC,gBAAAA,QAAQF,EAAE,IAAIC;AAAAA,EAC5B,GAAG,CAAE,CAAA;AAECE,QAAAA,iBAAiBJ,YAAY,CAACC,OAAe;AAC1CJ,WAAAA,YAAYM,QAAQF,EAAE;AAAA,EAC/B,GAAG,CAAE,CAAA;AAECI,QAAAA,cAAcL,YAAY,MAAM;AACpC,WAAOH,YAAYM;AAAAA,EACrB,GAAG,CAAE,CAAA;AAECG,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACLR;AAAAA,IACAK;AAAAA,IACAC;AAAAA,EAEF,IAAA,CAACN,cAAcK,gBAAgBC,WAAW,CAC5C;AAEA,SACG,oBAAA,sBAAsB,UAAtB,EAA+B,OAC7BT,SACH,CAAA;AAEJ;AAaO,SAASY,sBAAsB;AAC9BC,QAAAA,UAAUC,WAAWlB,qBAAqB;AAEhD,MAAIiB,YAAYf,QAAW;AACnB,UAAA,IAAIiB,MACR,8DACF;AAAA,EACF;AAEO,SAAA;AAAA,IACLZ,cAAcU,QAAQV;AAAAA,IACtBK,gBAAgBK,QAAQL;AAAAA,IACxBQ,UAAUH,QAAQJ,YAAY;AAAA,EAAA;AAElC;"}

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

@@ -0,0 +1,138 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useEffect, useState, useCallback, isValidElement } from "react";
+import { useReactFlow, useStore, NodeToolbar, Handle, Position } from "reactflow";
+import { HvButton, HvTypography } from "@hitachivantara/uikit-react-core";
+import { Delete, Duplicate } from "@hitachivantara/uikit-react-icons";
+import { theme, getColor } from "@hitachivantara/uikit-styles";
+import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
+import { useClasses } from "./BaseNode.styles.js";
+import { staticClasses } from "./BaseNode.styles.js";
+const isInputConnected = (id, type, idx, edges) => {
+  if (type === "target") {
+    return edges.some((e) => e.target === id && e.targetHandle === idx.toString());
+  }
+  if (type === "source") {
+    return edges.some((e) => e.source === id && e.sourceHandle === idx.toString());
+  }
+  return false;
+};
+const defaultActions = [{
+  id: "delete",
+  label: "Delete",
+  icon: /* @__PURE__ */ jsx(Delete, {})
+}, {
+  id: "duplicate",
+  label: "Duplicate",
+  icon: /* @__PURE__ */ jsx(Duplicate, {})
+}];
+const renderedIcon = (actionIcon) => isValidElement(actionIcon) ? actionIcon : actionIcon?.();
+const HvFlowBaseNode = ({
+  id,
+  title,
+  headerItems,
+  icon,
+  color: colorProp,
+  inputs,
+  outputs,
+  nodeActions = defaultActions,
+  classes: classesProp,
+  className,
+  children
+}) => {
+  const {
+    registerNode,
+    unregisterNode
+  } = useNodeMetaRegistry();
+  useEffect(() => {
+    registerNode(id, {
+      label: title || "",
+      inputs,
+      outputs
+    });
+    return () => unregisterNode(id);
+  }, [id, title, inputs, outputs, registerNode, unregisterNode]);
+  const [showActions, setShowActions] = useState(false);
+  const reactFlowInstance = useReactFlow();
+  const {
+    classes,
+    cx,
+    css
+  } = useClasses(classesProp);
+  const edges = useStore((s) => s.edges);
+  const nodes = useStore((s) => s.getNodes());
+  const node = nodes.find((n) => n.id === id);
+  const handleDefaultAction = useCallback((action) => {
+    if (!node)
+      return;
+    if (action.callback) {
+      action.callback(node);
+      return;
+    }
+    switch (action.id) {
+      case "delete":
+        reactFlowInstance.deleteElements({
+          nodes: [node]
+        });
+        break;
+      case "duplicate":
+        reactFlowInstance.addNodes([{
+          ...node,
+          id: `${reactFlowInstance.getNodes().length + 1}`,
+          position: {
+            x: node.position.x,
+            y: node.position.y + (node.height || 0) + 20
+          },
+          selected: false,
+          zIndex: Number(theme.zIndices.overlay)
+        }]);
+        break;
+    }
+  }, [node, reactFlowInstance]);
+  if (!node)
+    return null;
+  const color = getColor(colorProp);
+  return /* @__PURE__ */ jsxs("div", { className: cx(css({
+    border: `1px solid ${color}`
+  }), classes.root, className), onMouseEnter: () => setShowActions(true), onMouseLeave: () => setShowActions(false), children: [
+    /* @__PURE__ */ jsx(NodeToolbar, { isVisible: showActions, offset: 0, children: nodeActions?.map((action) => /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: () => handleDefaultAction(action), children: renderedIcon(action.icon) }, action.id)) }),
+    /* @__PURE__ */ jsxs("div", { className: cx(css({
+      backgroundColor: color
+    }), classes.headerContainer), children: [
+      /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
+        icon,
+        /* @__PURE__ */ jsx(HvTypography, { variant: "title4", className: classes.title, children: title })
+      ] }),
+      headerItems && /* @__PURE__ */ jsx("div", { style: {
+        display: "flex"
+      }, children: headerItems })
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: classes.contentContainer, children }),
+    inputs && inputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: "Inputs" }) }),
+      /* @__PURE__ */ jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", isConnectableStart: false, id: `${idx}`, position: Position.Left, style: {
+          top: "auto",
+          bottom: (outputs?.length ? 80 : 18) + (outputs?.length || 0) * 29 + 29 * idx
+        } }),
+        /* @__PURE__ */ jsx(HvTypography, { children: input.label }),
+        input.isMandatory && !isInputConnected(id, "target", idx, edges) && /* @__PURE__ */ jsx("div", { className: classes.mandatory })
+      ] }, idx)) })
+    ] }),
+    outputs && outputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: "Outputs" }) }),
+      /* @__PURE__ */ jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
+        /* @__PURE__ */ jsx(Handle, { type: "source", isConnectableEnd: false, id: `${idx}`, position: Position.Right, style: {
+          bottom: -10 + 29 * (outputs.length - idx),
+          top: "auto"
+        } }),
+        output.isMandatory && !isInputConnected(id, "source", idx, edges) && /* @__PURE__ */ jsx("div", { className: classes.mandatory }),
+        /* @__PURE__ */ jsx(HvTypography, { children: output.label })
+      ] }, idx)) })
+    ] })
+  ] });
+};
+export {
+  HvFlowBaseNode,
+  staticClasses as flowBaseNodeClasses
+};
+//# sourceMappingURL=BaseNode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNode.js","sources":["../../../../../src/components/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\n\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n  useStore,\n} from \"reactflow\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvBaseProps,\n  HvButton,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFlowNodeAction,\n  HvFlowBuiltInActions,\n  HvFlowNodeInput,\n  HvFlowNodeOutput,\n} from \"../types/index\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowBaseNodeProps<T>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: HvFlowNodeInput[];\n  /** Node outputs */\n  outputs?: HvFlowNodeOutput[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  idx: number,\n  edges: Edge[]\n) => {\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  return false;\n};\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs,\n  outputs,\n  nodeActions = defaultActions,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  useEffect(() => {\n    registerNode(id, { label: title || \"\", inputs, outputs });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\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 handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\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  if (!node) return null;\n\n  const color = getColor(colorProp);\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        {nodeActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action)}\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.titleContainer}>\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.title}>\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>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","defaultActions","label","icon","renderedIcon","actionIcon","isValidElement","HvFlowBaseNode","title","headerItems","color","colorProp","inputs","outputs","nodeActions","classes","classesProp","className","children","registerNode","unregisterNode","useNodeMetaRegistry","useEffect","showActions","setShowActions","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","useStore","s","nodes","getNodes","node","find","n","handleDefaultAction","useCallback","action","callback","deleteElements","addNodes","length","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","getColor","border","root","map","backgroundColor","headerContainer","titleContainer","display","contentContainer","inputsTitleContainer","inputsContainer","input","inputContainer","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}

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

@@ -0,0 +1,82 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvFlowBaseNode", {
+  root: {
+    borderRadius: theme.radii.round,
+    backgroundColor: theme.colors.atmo1,
+    boxShadow: theme.colors.shadow,
+    minWidth: "250px"
+  },
+  headerContainer: {
+    padding: theme.spacing(0.5, 1),
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    borderTopLeftRadius: theme.radii.round,
+    borderTopRightRadius: theme.radii.round
+  },
+  titleContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  title: {
+    color: theme.colors.base_dark
+  },
+  inputsTitleContainer: {
+    display: "flex",
+    justifyContent: "center",
+    padding: theme.space.xs,
+    backgroundColor: theme.colors.atmo2,
+    borderTop: `1px solid ${theme.colors.atmo4}`,
+    borderBottom: `1px solid ${theme.colors.atmo4}`
+  },
+  outputsTitleContainer: {
+    display: "flex",
+    justifyContent: "center",
+    padding: theme.space.xs,
+    backgroundColor: theme.colors.atmo2,
+    borderTop: `1px solid ${theme.colors.atmo4}`,
+    borderBottom: `1px solid ${theme.colors.atmo4}`
+  },
+  contentContainer: {},
+  inputsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.space.sm,
+    gap: theme.space.xs,
+    alignItems: "flex-start"
+  },
+  outputsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.space.sm,
+    gap: theme.space.xs,
+    alignItems: "flex-end"
+  },
+  inputContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  outputContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  mandatory: {
+    width: 10,
+    height: 10,
+    margin: theme.spacing(0, theme.space.xs),
+    borderRadius: theme.radii.circle,
+    backgroundColor: theme.colors.negative_20
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=BaseNode.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseNode.styles.js","sources":["../../../../../src/components/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\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  titleContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  title: {\n    color: theme.colors.base_dark,\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  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  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","titleContainer","title","color","base_dark","inputsTitleContainer","space","xs","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","contentContainer","inputsContainer","sm","gap","outputsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJC,cAAcC,MAAMC,MAAMC;AAAAA,IAC1BC,iBAAiBH,MAAMI,OAAOC;AAAAA,IAC9BC,WAAWN,MAAMI,OAAOG;AAAAA,IACxBC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,SAASV,MAAMW,QAAQ,KAAK,CAAC;AAAA,IAC7BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,qBAAqBhB,MAAMC,MAAMC;AAAAA,IACjCe,sBAAsBjB,MAAMC,MAAMC;AAAAA,EACpC;AAAA,EACAgB,gBAAgB;AAAA,IACdN,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAI,OAAO;AAAA,IACLC,OAAOpB,MAAMI,OAAOiB;AAAAA,EACtB;AAAA,EACAC,sBAAsB;AAAA,IACpBV,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMuB,MAAMC;AAAAA,IACrBrB,iBAAiBH,MAAMI,OAAOqB;AAAAA,IAC9BC,WAAY,aAAY1B,MAAMI,OAAOuB,KAAM;AAAA,IAC3CC,cAAe,aAAY5B,MAAMI,OAAOuB,KAAM;AAAA,EAChD;AAAA,EACAE,uBAAuB;AAAA,IACrBjB,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMuB,MAAMC;AAAAA,IACrBrB,iBAAiBH,MAAMI,OAAOqB;AAAAA,IAC9BC,WAAY,aAAY1B,MAAMI,OAAOuB,KAAM;AAAA,IAC3CC,cAAe,aAAY5B,MAAMI,OAAOuB,KAAM;AAAA,EAChD;AAAA,EACAG,kBAAkB,CAAC;AAAA,EACnBC,iBAAiB;AAAA,IACfnB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMuB,MAAMS;AAAAA,IACrBC,KAAKjC,MAAMuB,MAAMC;AAAAA,IACjBT,YAAY;AAAA,EACd;AAAA,EACAmB,kBAAkB;AAAA,IAChBtB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMuB,MAAMS;AAAAA,IACrBC,KAAKjC,MAAMuB,MAAMC;AAAAA,IACjBT,YAAY;AAAA,EACd;AAAA,EACAoB,gBAAgB;AAAA,IACdvB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAqB,iBAAiB;AAAA,IACfxB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAsB,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,QAAQxC,MAAMW,QAAQ,GAAGX,MAAMuB,MAAMC,EAAE;AAAA,IACvCzB,cAAcC,MAAMC,MAAMwC;AAAAA,IAC1BtC,iBAAiBH,MAAMI,OAAOsC;AAAAA,EAChC;AACF,CAAC;"}

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

@@ -1,156 +1,73 @@
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
-import { useState, useEffect, useCallback, isValidElement } from "react";
-import { useReactFlow, useStore, NodeToolbar, Handle, Position } from "reactflow";
-import { HvButton, HvTypography, HvTooltip, HvDropDownMenu } from "@hitachivantara/uikit-react-core";
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { useState, isValidElement } from "react";
+import { HvTooltip, HvTypography, HvButton, HvDropDownMenu } from "@hitachivantara/uikit-react-core";
+import { getColor } from "@hitachivantara/uikit-styles";
 import { Info, Up, Down } from "@hitachivantara/uikit-react-icons";
-import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./Node.styles.js";
 import { staticClasses } from "./Node.styles.js";
 import ParamRenderer from "./Parameters/ParamRenderer.js";
+import { HvFlowBaseNode } from "./BaseNode.js";
+import { useFlowNode } from "../hooks/useFlowNode.js";
 import { useFlowContext } from "../hooks/useFlowContext.js";
-const isInputConnected = (id, type, idx, edges) => {
-  if (type === "target") {
-    return edges.some((e) => e.target === id && e.targetHandle === idx.toString());
-  }
-  if (type === "source") {
-    return edges.some((e) => e.source === id && e.sourceHandle === idx.toString());
-  }
-};
+const renderedIcon = (actionIcon) => isValidElement(actionIcon) ? actionIcon : actionIcon?.();
 const HvFlowNode = ({
   id,
   type,
+  headerItems,
   description,
-  expanded = false,
-  params,
   actions,
   actionCallback,
   maxVisibleActions = 1,
+  expanded = false,
+  params,
   classes: classesProp,
-  className,
-  children
+  children,
+  ...props
 }) => {
-  const [showParams, setShowParams] = useState(expanded);
-  const [showActions, setShowActions] = useState(false);
-  const reactFlowInstance = useReactFlow();
   const {
-    classes,
-    cx,
-    css
+    classes
   } = useClasses(classesProp);
+  const [showParams, setShowParams] = useState(expanded);
+  const {
+    node
+  } = useFlowNode(id);
   const {
     nodeGroups,
     nodeTypes,
     defaultActions
   } = useFlowContext();
-  const edges = useStore((s) => s.edges);
-  const nodes = useStore((s) => s.getNodes());
-  const node = nodes.find((n) => n.id === id);
   const groupId = nodeTypes?.[type].meta?.groupId;
-  const title = nodeTypes?.[type].meta?.label;
+  const subtitle = nodeTypes?.[type].meta?.label;
   const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;
   const inputs = nodeTypes?.[type]?.meta?.inputs;
   const outputs = nodeTypes?.[type]?.meta?.outputs;
   const icon = groupId && nodeGroups && nodeGroups[groupId].icon;
   const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;
   const color = getColor(colorProp);
-  useEffect(() => {
-    const newNodes = nodes.map((n) => {
-      if (n.id === id) {
-        if (Object.keys(n.data).length === 0) {
-          params?.forEach((param) => {
-            n.data[param.id] = param.value;
-          });
-        }
-      }
-      return n;
-    });
-    reactFlowInstance.setNodes(newNodes);
-  }, []);
-  const handleDefaultAction = useCallback((action) => {
-    if (!node)
-      return;
-    switch (action) {
-      case "delete":
-        reactFlowInstance.deleteElements({
-          nodes: [node]
-        });
-        break;
-      case "duplicate":
-        reactFlowInstance.addNodes([{
-          ...node,
-          id: `${reactFlowInstance.getNodes().length + 1}`,
-          position: {
-            x: node.position.x,
-            y: node.position.y + (node.height || 0) + 20
-          },
-          selected: false,
-          zIndex: Number(theme.zIndices.overlay)
-        }]);
-        break;
-    }
-  }, [node, reactFlowInstance]);
-  const hasParams = !!(params && params.length > 0);
-  if (!node)
-    return null;
   const actsVisible = actions?.slice(0, maxVisibleActions);
   const actsDropdown = actions?.slice(maxVisibleActions);
-  const renderedIcon = (actionIcon) => isValidElement(actionIcon) ? actionIcon : actionIcon?.();
-  return /* @__PURE__ */ jsxs("div", { className: cx(css({
-    border: `1px solid ${color}`
-  }), classes.root, className), onMouseEnter: () => setShowActions(true), onMouseLeave: () => setShowActions(false), children: [
-    /* @__PURE__ */ jsx(NodeToolbar, { isVisible: showActions, offset: 0, children: defaultActions?.map((action) => /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: () => handleDefaultAction(action.id), children: renderedIcon(action.icon) }, action.id)) }),
-    /* @__PURE__ */ jsxs("div", { className: cx(css({
-      backgroundColor: color
-    }), classes.headerContainer), children: [
-      /* @__PURE__ */ jsxs("div", { className: classes.groupContainer, children: [
-        icon,
-        /* @__PURE__ */ jsx(HvTypography, { variant: "title4", className: classes.group, children: groupLabel })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: {
-        display: "flex"
-      }, children: [
-        /* @__PURE__ */ jsx(HvTooltip, { title: /* @__PURE__ */ jsx(HvTypography, { children: description }), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Info, {}) }) }),
-        /* @__PURE__ */ jsx(HvButton, { icon: true, disabled: !hasParams, onClick: () => setShowParams((p) => !p), children: showParams ? /* @__PURE__ */ jsx(Up, {}) : /* @__PURE__ */ jsx(Down, {}) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { children: title }) }),
+  const hasParams = !!(params && params.length > 0);
+  return /* @__PURE__ */ jsxs(HvFlowBaseNode, { id, type, title: groupLabel, icon, color, inputs, outputs, nodeActions: defaultActions, classes: classesProp, headerItems: /* @__PURE__ */ jsxs(Fragment, { children: [
+    headerItems,
+    description && /* @__PURE__ */ jsx(HvTooltip, { title: /* @__PURE__ */ jsx(HvTypography, { children: description }), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Info, {}) }) }),
+    hasParams && /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: () => setShowParams((p) => !p), children: showParams ? /* @__PURE__ */ jsx(Up, {}) : /* @__PURE__ */ jsx(Down, {}) })
+  ] }), ...props, children: [
+    (subtitle || actsVisible?.length || actsDropdown?.length) && /* @__PURE__ */ jsxs("div", { className: classes.subtitleContainer, children: [
+      subtitle && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { children: subtitle }) }),
       /* @__PURE__ */ jsx("div", { className: classes.actions, children: actions?.length && actions?.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         actsVisible?.map((action) => /* @__PURE__ */ jsx(HvTooltip, { title: /* @__PURE__ */ jsx(HvTypography, { children: action.label }), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: (event) => {
-          actionCallback?.(event, node.id, action);
+          actionCallback?.(event, id, action);
         }, "aria-label": action.label, children: renderedIcon(action.icon) }) }) }, action.id)),
         actsDropdown && actsDropdown.length > 0 && /* @__PURE__ */ jsx(HvDropDownMenu, { keepOpened: false, dataList: actsDropdown?.map((action) => ({
           id: action.id,
           label: action.label
         })), onClick: (event, action) => {
-          actionCallback?.(event, node.id, action);
+          actionCallback?.(event, id, action);
         } })
       ] }) })
     ] }),
-    children && /* @__PURE__ */ jsx("div", { className: classes.contentContainer, children }),
-    showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { nodeId: id, params, data: node?.data }) }),
-    inputs && inputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: "Inputs" }) }),
-      /* @__PURE__ */ jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
-        /* @__PURE__ */ jsx(Handle, { type: "target", isConnectableStart: false, id: `${idx}`, position: Position.Left, style: {
-          top: "auto",
-          bottom: (outputs?.length ? 80 : 18) + (outputs?.length || 0) * 29 + 29 * idx
-        } }),
-        /* @__PURE__ */ jsx(HvTypography, { children: input.label }),
-        input.isMandatory && !isInputConnected(id, "target", idx, edges) && /* @__PURE__ */ jsx("div", { className: classes.mandatory })
-      ] }, idx)) })
-    ] }),
-    outputs && outputs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: "Outputs" }) }),
-      /* @__PURE__ */ jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
-        /* @__PURE__ */ jsx(Handle, { type: "source", isConnectableEnd: false, id: `${idx}`, position: Position.Right, style: {
-          bottom: -10 + 29 * (outputs.length - idx),
-          top: "auto"
-        } }),
-        output.isMandatory && !isInputConnected(id, "source", idx, edges) && /* @__PURE__ */ jsx("div", { className: classes.mandatory }),
-        /* @__PURE__ */ jsx(HvTypography, { children: output.label })
-      ] }, idx)) })
-    ] })
+    children,
+    showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { nodeId: id, params, data: node?.data }) })
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Node.js","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","border","root","backgroundColor","headerContainer","groupContainer","group","display","p","titleContainer","event","contentContainer","paramsContainer","inputsTitleContainer","inputsContainer","input","inputContainer","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}
+{"version":3,"file":"Node.js","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import { SyntheticEvent, isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks/index\";\nimport { HvFlowNodeParam } from \"../types/index\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n// TODO How to include here the types from the parent component?\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowNodeProps<T>\n  extends Omit<HvFlowBaseNodeProps<T>, \"classes\"> {\n  /** Node description */\n  description?: string;\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  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses | HvFlowBaseNodeProps<T>[\"classes\"];\n}\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  classes: classesProp,\n  children,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n  const [showParams, setShowParams] = useState(expanded);\n  const { node } = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n  const groupId = nodeTypes?.[type].meta?.groupId;\n  const subtitle = 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  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      inputs={inputs}\n      outputs={outputs}\n      nodeActions={defaultActions}\n      classes={classesProp as HvFlowBaseNodeProps<unknown>[\"classes\"]}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n              <div>\n                <Info />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton icon onClick={() => setShowParams((p) => !p)}>\n              {showParams ? <Up /> : <Down />}\n            </HvButton>\n          )}\n        </>\n      }\n      {...props}\n    >\n      {(subtitle || actsVisible?.length || actsDropdown?.length) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\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: SyntheticEvent<Element, Event>) => {\n                          actionCallback?.(event, 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, id, action as HvActionGeneric);\n                    }}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":["renderedIcon","actionIcon","isValidElement","HvFlowNode","id","type","headerItems","description","actions","actionCallback","maxVisibleActions","expanded","params","classes","classesProp","children","props","useClasses","showParams","setShowParams","useState","node","useFlowNode","nodeGroups","nodeTypes","defaultActions","useFlowContext","groupId","meta","subtitle","label","groupLabel","inputs","outputs","icon","colorProp","color","getColor","actsVisible","slice","actsDropdown","hasParams","length","p","subtitleContainer","map","action","event","paramsContainer","data"],"mappings":"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"}