npm - @hitachivantara/uikit-react-lab - Versions diffs - 5.5.5 → 5.6.0 - Mend

@hitachivantara/uikit-react-lab 5.5.5 → 5.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

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

@@ -1,6 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useState, useCallback } from "react";
-import ReactFlow, { useReactFlow, addEdge, applyNodeChanges, applyEdgeChanges } from "reactflow";
+import ReactFlow, { useReactFlow, addEdge, applyNodeChanges, applyEdgeChanges, MarkerType } from "reactflow";
 import "reactflow/dist/style.css";
 import { useDroppable, useDndMonitor } from "@dnd-kit/core";
 import { uid } from "uid";
@@ -8,6 +8,44 @@ import { useUniqueId } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./Flow.styles.js";
 import { staticClasses } from "./Flow.styles.js";
 import { useFlowContext } from "./FlowContext/FlowContext.js";
+const getNode = (nodes, nodeId) => {
+  return nodes.find((n) => n.id === nodeId);
+};
+const validateEdges = (edges, nodes, nodeTypes) => {
+  if (edges) {
+    const validEdges = [];
+    edges.forEach((edge) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (!edge.sourceHandle || !edge.targetHandle)
+        return [];
+      const sourceNode = getNode(nodes, edge.source);
+      const targetNode = getNode(nodes, edge.target);
+      if (!sourceNode || !targetNode)
+        return [];
+      const sourceType = sourceNode.type;
+      const targetType = targetNode.type;
+      if (!sourceType || !targetType)
+        return [];
+      const output = (_c = (_b = (_a = nodeTypes == null ? void 0 : nodeTypes[sourceType]) == null ? void 0 : _a.meta) == null ? void 0 : _b.outputs) == null ? void 0 : _c[edge.sourceHandle];
+      const input = (_f = (_e = (_d = nodeTypes == null ? void 0 : nodeTypes[targetType]) == null ? void 0 : _d.meta) == null ? void 0 : _e.inputs) == null ? void 0 : _f[edge.targetHandle];
+      const sourceProvides = (output == null ? void 0 : output.provides) || [];
+      const targetAccepts = (input == null ? void 0 : input.accepts) || [];
+      let isValid = false;
+      sourceProvides.forEach((s) => {
+        targetAccepts.forEach((t) => {
+          if (s === t) {
+            isValid = true;
+          }
+        });
+      });
+      if (isValid) {
+        validEdges.push(edge);
+      }
+    });
+    return validEdges;
+  }
+  return [];
+};
 const HvDroppableFlow = ({
   id,
   className,
@@ -81,10 +119,44 @@ const HvDroppableFlow = ({
     handleFlowChange(nodes, eds);
     onEdgesChangeProp == null ? void 0 : onEdgesChangeProp(changes);
   }, [edges, handleFlowChange, nodes, onEdgesChangeProp]);
-  return /* @__PURE__ */ jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsx(ReactFlow, { nodes, edges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, ...others, children }) });
+  const isValidConnection = (connection) => {
+    var _a, _b, _c, _d, _e, _f;
+    const sourceNode = getNode(nodes, connection.source);
+    const targetNode = getNode(nodes, connection.target);
+    if (!sourceNode || !targetNode) {
+      return false;
+    }
+    const sourceType = sourceNode.type;
+    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[connection.sourceHandle]) == null ? void 0 : _e.provides) || [];
+    const targetAccepts = ((_f = inputs[connection.targetHandle]) == null ? void 0 : _f.accepts) || [];
+    let isValid = false;
+    sourceProvides.forEach((s) => {
+      targetAccepts.forEach((t) => {
+        if (s === t) {
+          isValid = true;
+        }
+      });
+    });
+    return isValid;
+  };
+  const validEdges = validateEdges(edges, nodes, nodeTypes);
+  return /* @__PURE__ */ jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsx(ReactFlow, { nodes, edges: validEdges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, isValidConnection, defaultEdgeOptions: {
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      height: 20,
+      width: 20
+    }
+  }, ...others, children }) });
 };
 export {
   HvDroppableFlow,
-  staticClasses as flowClasses
+  staticClasses as flowClasses,
+  getNode
 };
 //# sourceMappingURL=DroppableFlow.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DroppableFlow.js","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n Connection,\n EdgeChange,\n NodeChange,\n ReactFlowProps,\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n useReactFlow,\n} from \"reactflow\";\nimport \"reactflow/dist/style.css\";\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 { HvFlowEdge, HvFlowNode } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./FlowContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeData = any,\n NodeType extends string \| undefined = string \| undefined\n> extends Omit<ReactFlowProps, \"nodes\" \| \"edges\" \| \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. /\n children?: React.ReactNode;\n /* Flow nodes. /\n nodes?: HvFlowNode<NodeData, NodeType>[];\n /* Flow edges. /\n edges?: HvFlowEdge[];\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?: (\n nodes: HvFlowNode<NodeData, NodeType>[],\n edges: HvFlowEdge[]\n ) => void;\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 ...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.id.toString();\n\n // Converts the coordinates to the react flow coordinate system\n const position = reactFlowInstance.project({\n x: (event.active.data.current?.hvFlow?.x \|\| 0) - event.over.rect.left,\n y: (event.active.data.current?.hvFlow?.y \|\| 0) - event.over.rect.top,\n });\n\n const newNode: HvFlowNode = {\n id: uid(),\n position,\n data: {},\n type,\n };\n\n setNodes((nds) => nds.concat(newNode));\n }\n },\n [elementId, reactFlowInstance, setNodes]\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 return (\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={edges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n );\n};\n"],"names":["HvDroppableFlow","id","className","children","onFlowChange","classes","classesProp","nodes","initialNodes","edges","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","type","active","toString","position","project","x","data","current","hvFlow","rect","left","y","top","newNode","uid","nds","concat","onDragEnd","handleFlowChange","eds","isDragging","find","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","root"],"mappings":"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"}
1	+ {"version":3,"file":"DroppableFlow.js","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n Connection,\n EdgeChange,\n NodeChange,\n ReactFlowProps,\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n useReactFlow,\n MarkerType,\n Edge,\n Node,\n} from \"reactflow\";\nimport \"reactflow/dist/style.css\";\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 \"./FlowContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeData = any,\n NodeType extends string \| undefined = string \| undefined\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 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 if (!edge.sourceHandle \|\| !edge.targetHandle) return [];\n\n const sourceNode = getNode(nodes, edge.source);\n const targetNode = getNode(nodes, edge.target);\n\n if (!sourceNode \|\| !targetNode) return [];\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType \|\| !targetType) return [];\n\n const output =\n nodeTypes?.[sourceType]?.meta?.outputs?.[edge.sourceHandle];\n const input = nodeTypes?.[targetType]?.meta?.inputs?.[edge.targetHandle];\n\n const sourceProvides = output?.provides \|\| [];\n const targetAccepts = input?.accepts \|\| [];\n\n let isValid = false;\n sourceProvides.forEach((s) => {\n targetAccepts.forEach((t) => {\n if (s === t) {\n isValid = true;\n }\n });\n });\n\n if (isValid) {\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 ...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.id.toString();\n\n // Converts the coordinates to the react flow coordinate system\n const position = reactFlowInstance.project({\n x: (event.active.data.current?.hvFlow?.x \|\| 0) - event.over.rect.left,\n y: (event.active.data.current?.hvFlow?.y \|\| 0) - event.over.rect.top,\n });\n\n const newNode: Node = {\n id: uid(),\n position,\n data: {},\n type,\n };\n\n setNodes((nds) => nds.concat(newNode));\n }\n },\n [elementId, reactFlowInstance, setNodes]\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 sourceNode = getNode(nodes, connection.source);\n const targetNode = getNode(nodes, connection.target);\n\n if (!sourceNode \|\| !targetNode) {\n return false;\n }\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType \|\| !targetType) {\n return false;\n }\n\n const inputs = nodeTypes?.[targetType]?.meta?.inputs \|\| [];\n const outputs = nodeTypes?.[sourceType]?.meta?.outputs \|\| [];\n\n const sourceProvides = outputs[connection.sourceHandle]?.provides \|\| [];\n const targetAccepts = inputs[connection.targetHandle]?.accepts \|\| [];\n\n let isValid = false;\n sourceProvides.forEach((s) => {\n targetAccepts.forEach((t) => {\n if (s === t) {\n isValid = true;\n }\n });\n });\n\n return isValid;\n };\n\n const validEdges = validateEdges(edges, nodes, nodeTypes);\n\n return (\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={{\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n }}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdges","edges","nodeTypes","validEdges","forEach","edge","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","output","meta","outputs","input","inputs","sourceProvides","provides","targetAccepts","accepts","isValid","s","t","push","HvDroppableFlow","className","children","onFlowChange","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","toString","position","project","x","data","current","hvFlow","rect","left","y","top","newNode","uid","nds","concat","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","isValidConnection","root","markerEnd","MarkerType","ArrowClosed","height","width"],"mappings":"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"}

package/dist/esm/components/Flow/Flow.styles.js CHANGED Viewed

@@ -1,10 +1,49 @@
-import { createClasses } from "@hitachivantara/uikit-react-core";
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+import { staticClasses as staticClasses$1 } from "./Node/Node.styles.js";
+import "@emotion/react/jsx-runtime";
+import "@hitachivantara/uikit-react-icons";
+import "@hitachivantara/uikit-styles";
+import "react";
+import "reactflow";
 const {
   staticClasses,
   useClasses
 } = createClasses("HvFlow", {
   root: {
-    height: "100%"
+    height: "100%",
+    "& .react-flow__handle": {
+      backgroundColor: theme.colors.secondary_60,
+      width: 8,
+      height: 8,
+      zIndex: theme.zIndices.overlay
+    },
+    "& .react-flow__handle-connecting": {
+      backgroundColor: theme.colors.negative_20,
+      width: 12,
+      height: 12,
+      "&.react-flow__handle-top": {
+        top: -6
+      },
+      "&.react-flow__handle-bottom": {
+        bottom: -6
+      }
+    },
+    "& .react-flow__handle-valid": {
+      backgroundColor: theme.colors.positive_20,
+      width: 12,
+      height: 12,
+      "&.react-flow__handle-top": {
+        top: -6
+      },
+      "&.react-flow__handle-bottom": {
+        bottom: -6
+      }
+    },
+    [`& .selected > .${staticClasses$1.root}`]: {
+      border: `1px solid ${theme.colors.secondary_60}`,
+      borderRadius: theme.radii.round,
+      boxSizing: "border-box"
+    }
   }
 });
 export {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Flow.styles.js","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n root: { height: \"100%\" },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height"],"mappings":"~~;AAEa~~,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,~~IAAEC~~,QAAQ;AAAA,~~EAAO~~;~~AACzB~~,CAAC;"}
1	+ {"version":3,"file":"Flow.styles.js","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\nimport { flowNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n root: {\n height: \"100%\",\n \"& .react-flow__handle\": {\n backgroundColor: theme.colors.secondary_60,\n width: 8,\n height: 8,\n zIndex: theme.zIndices.overlay,\n },\n \"& .react-flow__handle-connecting\": {\n backgroundColor: theme.colors.negative_20,\n width: 12,\n height: 12,\n \"&.react-flow__handle-top\": {\n top: -6,\n },\n \"&.react-flow__handle-bottom\": {\n bottom: -6,\n },\n },\n \"& .react-flow__handle-valid\": {\n backgroundColor: theme.colors.positive_20,\n width: 12,\n height: 12,\n \"&.react-flow__handle-top\": {\n top: -6,\n },\n \"&.react-flow__handle-bottom\": {\n bottom: -6,\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","top","bottom","positive_20","flowNodeClasses","border","borderRadius","radii","round","boxSizing"],"mappings":";;;;;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,MAAMC,OAAOM;AAAAA,MAC9BJ,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,4BAA4B;AAAA,QAC1BU,KAAK;AAAA,MACP;AAAA,MACA,+BAA+B;AAAA,QAC7BC,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7BV,iBAAiBC,MAAMC,OAAOS;AAAAA,MAC9BP,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,4BAA4B;AAAA,QAC1BU,KAAK;AAAA,MACP;AAAA,MACA,+BAA+B;AAAA,QAC7BC,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,gBAAgBd,IAAK,EAAC,GAAG;AAAA,MAC1Ce,QAAS,aAAYZ,MAAMC,OAAOC,YAAa;AAAA,MAC/CW,cAAcb,MAAMc,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;"}

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

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { HvTypography, HvTooltip, HvButton } from "@hitachivantara/uikit-react-core";
+import { Info, Up, Down } from "@hitachivantara/uikit-react-icons";
+import { getColor } from "@hitachivantara/uikit-styles";
+import { useState, useEffect } from "react";
+import { useReactFlow, useStore, Handle, Position } from "reactflow";
+import { useFlowContext } from "../FlowContext/FlowContext.js";
+import { useClasses } from "./Node.styles.js";
+import { staticClasses } from "./Node.styles.js";
+import ParamRenderer from "./Parameters/ParamRenderer.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 HvFlowNode = ({
+  id,
+  type,
+  title,
+  description,
+  expanded = false,
+  params,
+  classes: classesProp,
+  className
+}) => {
+  var _a, _b, _c, _d, _e;
+  const [showParams, setShowParams] = useState(expanded);
+  const reactFlowInstance = useReactFlow();
+  const {
+    classes,
+    cx,
+    css
+  } = useClasses(classesProp);
+  const {
+    nodeGroups,
+    nodeTypes
+  } = useFlowContext();
+  const edges = useStore((s) => s.edges);
+  const nodes = useStore((s) => s.getNodes());
+  const node = nodes.find((n) => n.id === id);
+  const groupId = (_a = nodeTypes == null ? void 0 : nodeTypes[type].meta) == null ? void 0 : _a.groupId;
+  const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;
+  const inputs = (_c = (_b = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _b.meta) == null ? void 0 : _c.inputs;
+  const outputs = (_e = (_d = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _d.meta) == null ? void 0 : _e.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 == null ? void 0 : params.forEach((param) => {
+            n.data[param.label] = param.value;
+          });
+        }
+      }
+      return n;
+    });
+    reactFlowInstance.setNodes(newNodes);
+  }, []);
+  const hasParams = !!(params && params.length > 0);
+  return /* @__PURE__ */ jsxs("div", { className: cx(css({
+    border: `1px solid ${color}`
+  }), classes.root, className), children: [
+    /* @__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__ */ jsx("div", { className: classes.titleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: title }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: "Inputs" }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.inputsContainer, children: inputs == null ? void 0 : inputs.map((input, idx) => /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
+      /* @__PURE__ */ jsx(Handle, { type: "target", isConnectableStart: false, id: `${idx}`, position: Position.Left, style: {
+        top: 160 + 29 * idx
+      } }),
+      /* @__PURE__ */ jsx(HvTypography, { children: input.label }),
+      input.isMandatory && !isInputConnected(id, "target", idx, edges) && /* @__PURE__ */ jsx("div", { className: classes.mandatory })
+    ] }, idx)) }),
+    showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { nodeId: id, params, data: node == null ? void 0 : node.data }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: "Outputs" }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.outputsContainer, children: outputs == null ? void 0 : outputs.map((output, idx) => /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
+      /* @__PURE__ */ jsx(Handle, { type: "source", isConnectableEnd: false, id: `${idx}`, position: Position.Right, style: {
+        bottom: -8 + 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 {
+  HvFlowNode,
+  staticClasses as flowNodeClasses
+};
+//# sourceMappingURL=Node.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Node.js","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvTooltip,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\nimport { useEffect, useState } from \"react\";\nimport { Handle, NodeProps, Position, useReactFlow, useStore } from \"reactflow\";\nimport { useFlowContext } from \"../FlowContext/FlowContext\";\n\nimport { HvFlowNodeInput, HvFlowNodeOutput, 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 title */\n title: string;\n /** Node description */\n description: string;\n /** Node expanded */\n expanded?: boolean;\n /** Node inputs */\n inputs?: HvFlowNodeInput[];\n /** Node outputs */\n outputs?: HvFlowNodeOutput[];\n /** Node parameters */\n params?: HvFlowNodeParam[];\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 title,\n description,\n expanded = false,\n params,\n classes: classesProp,\n className,\n}: HvFlowNodeProps) => {\n const [showParams, setShowParams] = useState(expanded);\n const reactFlowInstance = useReactFlow();\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const { nodeGroups, nodeTypes } = 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 groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;\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.label] = 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 hasParams = !!(params && params.length > 0);\n\n return (\n <div\n className={cx(\n css({ border: `1px solid ${color}` }),\n classes.root,\n className\n )}\n >\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 <HvTypography>{title}</HvTypography>\n </div>\n <div className={classes.inputsTitleContainer}>\n <HvTypography>Inputs</HvTypography>\n </div>\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: 160 + 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 {showParams && params && (\n <div className={classes.paramsContainer}>\n <ParamRenderer nodeId={id} params={params} data={node?.data} />\n </div>\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: -8 + 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 </div>\n );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","HvFlowNode","title","description","expanded","params","classes","classesProp","className","showParams","setShowParams","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","nodeGroups","nodeTypes","useFlowContext","useStore","s","nodes","getNodes","node","find","n","groupId","meta","groupLabel","label","inputs","outputs","icon","colorProp","color","getColor","useEffect","newNodes","map","Object","keys","data","length","forEach","param","value","setNodes","hasParams","border","root","backgroundColor","headerContainer","groupContainer","group","display","p","titleContainer","inputsTitleContainer","inputsContainer","input","inputContainer","Position","Left","top","isMandatory","mandatory","paramsContainer","outputsTitleContainer","outputsContainer","output","outputContainer","Right","bottom"],"mappings":"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"}

package/dist/esm/components/Flow/Node/Node.styles.js ADDED Viewed

@@ -0,0 +1,89 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvFlowNode", {
+  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"
+  },
+  groupContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  group: {
+    color: theme.colors.base_dark
+  },
+  titleContainer: {
+    padding: theme.space.sm
+  },
+  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}`
+  },
+  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"
+  },
+  paramsContainer: {
+    borderTop: `1px solid ${theme.colors.atmo4}`,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.space.xs,
+    padding: theme.space.sm
+  },
+  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=Node.styles.js.map

package/dist/esm/components/Flow/Node/Node.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Node.styles.js","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: { padding: theme.space.sm },\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 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","space","sm","inputsTitleContainer","xs","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","inputsContainer","gap","outputsContainer","paramsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,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,EACd;AAAA,EACAC,gBAAgB;AAAA,IACdJ,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAE,OAAO;AAAA,IACLC,OAAOlB,MAAMI,OAAOe;AAAAA,EACtB;AAAA,EACAC,gBAAgB;AAAA,IAAEV,SAASV,MAAMqB,MAAMC;AAAAA,EAAG;AAAA,EAC1CC,sBAAsB;AAAA,IACpBX,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMqB,MAAMG;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,MAAMqB,MAAMG;AAAAA,IACrBrB,iBAAiBH,MAAMI,OAAOqB;AAAAA,IAC9BC,WAAY,aAAY1B,MAAMI,OAAOuB,KAAM;AAAA,IAC3CC,cAAe,aAAY5B,MAAMI,OAAOuB,KAAM;AAAA,EAChD;AAAA,EACAG,iBAAiB;AAAA,IACflB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMqB,MAAMC;AAAAA,IACrBS,KAAK/B,MAAMqB,MAAMG;AAAAA,IACjBT,YAAY;AAAA,EACd;AAAA,EACAiB,kBAAkB;AAAA,IAChBpB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMqB,MAAMC;AAAAA,IACrBS,KAAK/B,MAAMqB,MAAMG;AAAAA,IACjBT,YAAY;AAAA,EACd;AAAA,EACAkB,iBAAiB;AAAA,IACfP,WAAY,aAAY1B,MAAMI,OAAOuB,KAAM;AAAA,IAC3Cf,SAAS;AAAA,IACTC,eAAe;AAAA,IACfkB,KAAK/B,MAAMqB,MAAMG;AAAAA,IACjBd,SAASV,MAAMqB,MAAMC;AAAAA,EACvB;AAAA,EACAY,gBAAgB;AAAA,IACdtB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAoB,iBAAiB;AAAA,IACfvB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAqB,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,QAAQvC,MAAMW,QAAQ,GAAGX,MAAMqB,MAAMG,EAAE;AAAA,IACvCzB,cAAcC,MAAMC,MAAMuC;AAAAA,IAC1BrC,iBAAiBH,MAAMI,OAAOqC;AAAAA,EAChC;AACF,CAAC;"}

package/dist/esm/components/Flow/Node/Parameters/ParamRenderer.js ADDED Viewed

@@ -0,0 +1,28 @@
+import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import Text from "./Text.js";
+import Select from "./Select.js";
+const renderers = {
+  text: Text,
+  select: Select
+};
+const ParamRenderer = ({
+  nodeId,
+  params,
+  data
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: params.map((param, idx) => {
+    const Renderer = renderers[param.type];
+    if (Renderer) {
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { children: param.label }),
+        /* @__PURE__ */ jsx(Renderer, { nodeId, param, data })
+      ] }, idx);
+    }
+    return null;
+  }) });
+};
+const ParamRenderer$1 = ParamRenderer;
+export {
+  ParamRenderer$1 as default
+};
+//# sourceMappingURL=ParamRenderer.js.map

package/dist/esm/components/Flow/Node/Parameters/ParamRenderer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ParamRenderer.js","sources":["../../../../../../src/components/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Text from \"./Text\";\nimport Select from \"./Select\";\n\nexport type ParamRendererProps = {\n nodeId: string;\n params: HvFlowNodeParam[];\n data: any;\n};\n\nconst renderers = {\n text: Text,\n select: Select,\n};\n\nconst ParamRenderer = ({ nodeId, params, data }: ParamRendererProps) => {\n return (\n <>\n {params.map((param, idx) => {\n const Renderer = renderers[param.type];\n if (Renderer) {\n return (\n <div key={idx}>\n <span>{param.label}</span>\n <Renderer nodeId={nodeId} param={param} data={data} />\n </div>\n );\n }\n return null;\n })}\n </>\n );\n};\n\nexport default ParamRenderer;\n"],"names":["renderers","text","Text","select","Select","ParamRenderer","nodeId","params","data","map","param","idx","Renderer","type","label"],"mappings":";;;AAUA,MAAMA,YAAY;AAAA,EAChBC,MAAMC;AAAAA,EACNC,QAAQC;AACV;AAEA,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAQC;AAAyB,MAAM;AACtE,SAEKD,oBAAAA,UAAAA,EAAAA,UAAAA,OAAOE,IAAI,CAACC,OAAOC,QAAQ;AACpBC,UAAAA,WAAWZ,UAAUU,MAAMG,IAAI;AACrC,QAAID,UAAU;AACZ,kCACG,OACC,EAAA,UAAA;AAAA,QAAC,oBAAA,QAAA,EAAMF,gBAAMI,MAAM,CAAA;AAAA,QAClB,oBAAA,UAAA,EAAS,QAAgB,OAAc,KAAW,CAAA;AAAA,MAAA,EAAA,GAF3CH,GAGV;AAAA,IAEJ;AACO,WAAA;AAAA,EACR,CAAA,EACH,CAAA;AAEJ;AAEA,MAAA,kBAAeN;"}

package/dist/esm/components/Flow/Node/Parameters/Select.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvDropdown } from "@hitachivantara/uikit-react-core";
+import { useState } from "react";
+import { useReactFlow } from "reactflow";
+const Select = ({
+  nodeId,
+  param,
+  data
+}) => {
+  var _a;
+  const reactFlowInstance = useReactFlow();
+  const [option, setOption] = useState(data[param.id]);
+  const onSelectChange = (item) => {
+    const nodes = reactFlowInstance.getNodes();
+    const newNodes = nodes.map((node) => {
+      if (node.id === nodeId) {
+        node.data = {
+          ...node.data,
+          [param.id]: item.label
+        };
+      }
+      return node;
+    });
+    reactFlowInstance.setNodes(newNodes);
+    setOption(item.label);
+  };
+  return /* @__PURE__ */ jsx(HvDropdown, { values: (_a = param.options) == null ? void 0 : _a.map((o) => {
+    return {
+      id: o,
+      label: o,
+      selected: o === option
+    };
+  }), onChange: (item) => onSelectChange(item) });
+};
+const Select$1 = Select;
+export {
+  Select$1 as default
+};
+//# sourceMappingURL=Select.js.map

package/dist/esm/components/Flow/Node/Parameters/Select.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Select.js","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 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","options","o","selected"],"mappings":";;;;AAIA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;;AAC1C,QAAMC,oBAAoBC;AACpB,QAAA,CAACC,QAAQC,SAAS,IAAIC,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;AAGtB,6BACG,YACC,EAAA,SAAQf,WAAMiB,YAANjB,mBAAea,IAAKK,CAAM,MAAA;AACzB,WAAA;AAAA,MAAEX,IAAIW;AAAAA,MAAGH,OAAOG;AAAAA,MAAGC,UAAUD,MAAMd;AAAAA,IAAAA;AAAAA,EAAO,IAEnD,UAAWK,CAASD,SAAAA,eAAeC,IAAI,EACvC,CAAA;AAEN;AAEA,MAAA,WAAeX;"}

package/dist/esm/components/Flow/Node/Parameters/Text.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvInput } from "@hitachivantara/uikit-react-core";
+import { useState } from "react";
+import { useReactFlow } from "reactflow";
+const Text = ({
+  nodeId,
+  param,
+  data
+}) => {
+  const reactFlowInstance = useReactFlow();
+  const [text, setText] = useState(data[param.id]);
+  const onTextChange = (val) => {
+    const nodes = reactFlowInstance.getNodes();
+    const newNodes = nodes.map((node) => {
+      if (node.id === nodeId) {
+        node.data = {
+          ...node.data,
+          [param.id]: val
+        };
+      }
+      return node;
+    });
+    reactFlowInstance.setNodes(newNodes);
+    setText(val);
+  };
+  return /* @__PURE__ */ jsx(HvInput, { value: text, onChange: (evt, val) => onTextChange(val) });
+};
+const Text$1 = Text;
+export {
+  Text$1 as default
+};
+//# sourceMappingURL=Text.js.map

package/dist/esm/components/Flow/Node/Parameters/Text.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Text.js","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 <HvInput value={text} onChange={(evt, val) => onTextChange(val)} />;\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","evt"],"mappings":";;;;AAIA,MAAMA,OAAOA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;AACxC,QAAMC,oBAAoBC;AACpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,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;AAGN,SAAA,oBAAC,SAAQ,EAAA,OAAOL,MAAM,UAAU,CAACY,KAAKP,QAAQD,aAAaC,GAAG,EAAK,CAAA;AAC5E;AAEA,MAAA,SAAeX;"}

package/dist/esm/index.js CHANGED Viewed

@@ -19,11 +19,14 @@ import { HvFlowMinimap } from "./components/Flow/Minimap/Minimap.js";
 import { staticClasses as staticClasses9 } from "./components/Flow/Sidebar/Sidebar.styles.js";
 import { HvFlowSidebar } from "./components/Flow/Sidebar/Sidebar.js";
 import { HvFlow } from "./components/Flow/Flow.js";
+import { staticClasses as staticClasses10 } from "./components/Flow/Node/Node.styles.js";
+import { HvFlowNode } from "./components/Flow/Node/Node.js";
 export {
   HvFlow,
   HvFlowBackground,
   HvFlowControls,
   HvFlowMinimap,
+  HvFlowNode,
   HvFlowSidebar,
   HvStepNavigation,
   HvWizard,
@@ -34,6 +37,7 @@ export {
   HvWizardTitle,
   staticClasses7 as flowClasses,
   staticClasses8 as flowMinimapClasses,
+  staticClasses10 as flowNodeClasses,
   staticClasses9 as flowSidebarClasses,
   staticClasses as stepNavigationClasses,
   staticClasses3 as wizardActionsClasses,

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}