@hitachivantara/uikit-react-lab 5.23.0 → 5.24.1

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

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeMetaRegistry } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edges: Edge[],\n  edge: Edge,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n  if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n  const sourceNode = getNode(nodes, edge.source);\n  const targetNode = getNode(nodes, edge.target);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[edge.target]?.inputs || [];\n  const outputs = nodeMetaRegistry[edge.source]?.outputs || [];\n\n  const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n  const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n  const sourceMaxConnections = outputs[edge.sourceHandle]?.maxConnections;\n  const targetMaxConnections = inputs[edge.targetHandle]?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) =>\n        edg.target === edge.target && edg.targetHandle === edge.targetHandle\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) =>\n        edg.source === edge.source && edg.sourceHandle === edge.sourceHandle\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...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?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      setNodes((nds) => nds.concat(newNode));\n    },\n    [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  const { registry } = useNodeMetaRegistry();\n  const isValidConnection = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeMetaRegistry } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edges: Edge[],\n  edge: Edge,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n  if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n  const sourceNode = getNode(nodes, edge.source);\n  const targetNode = getNode(nodes, edge.target);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[edge.target]?.inputs || [];\n  const outputs = nodeMetaRegistry[edge.source]?.outputs || [];\n\n  const source = outputs.find((out) => out.id === edge.sourceHandle);\n  const target = inputs.find((inp) => inp.id === edge.targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) =>\n        edg.target === edge.target && edg.targetHandle === edge.targetHandle\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) =>\n        edg.source === edge.source && edg.sourceHandle === edge.sourceHandle\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...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?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      setNodes((nds) => nds.concat(newNode));\n    },\n    [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  const { registry } = useNodeMetaRegistry();\n  const isValidConnection = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
-import { useEffect, useState, useCallback, isValidElement } from "react";
+import { useMemo, useEffect, useState, useCallback, isValidElement } from "react";
 import { useReactFlow, NodeToolbar, Handle, Position } from "reactflow";
 import { uid } from "uid";
 import { HvButton, HvTypography } from "@hitachivantara/uikit-react-core";
@@ -29,8 +29,8 @@ const HvFlowBaseNode = ({
   headerItems,
   icon,
   color: colorProp,
-  inputs,
-  outputs,
+  inputs: inputsProp,
+  outputs: outputsProp,
   nodeActions = defaultActions,
   footer,
   classes: classesProp,
@@ -38,8 +38,24 @@ const HvFlowBaseNode = ({
   children
 }) => {
   const { registerNode, unregisterNode } = useNodeMetaRegistry();
+  const inputs = useMemo(
+    () => inputsProp?.map(
+      (input, idx) => input.id != null ? input : { ...input, id: String(idx) }
+    ),
+    [inputsProp]
+  );
+  const outputs = useMemo(
+    () => outputsProp?.map(
+      (output, idx) => output.id != null ? output : { ...output, id: String(idx) }
+    ),
+    [outputsProp]
+  );
   useEffect(() => {
-    registerNode(id, { label: title || "", inputs, outputs });
+    registerNode(id, {
+      label: title || "",
+      inputs,
+      outputs
+    });
     return () => unregisterNode(id);
   }, [id, title, inputs, outputs, registerNode, unregisterNode]);
   const [showActions, setShowActions] = useState(false);
@@ -137,41 +153,35 @@ const HvFlowBaseNode = ({
         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) => {
-            const handleId = input.id ?? idx.toString();
-            return /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
-              /* @__PURE__ */ jsx(
-                Handle,
-                {
-                  type: "target",
-                  isConnectableStart: false,
-                  id: handleId,
-                  position: Position.Left
-                }
-              ),
-              /* @__PURE__ */ jsx(HvTypography, { children: input.label }),
-              input.isMandatory && !isInputConnected(id, "target", handleId, inputEdges) && /* @__PURE__ */ jsx("div", { className: classes.mandatory })
-            ] }, idx);
-          }) })
+          /* @__PURE__ */ jsx("div", { className: classes.inputsContainer, children: inputs?.map((input) => /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
+            /* @__PURE__ */ jsx(
+              Handle,
+              {
+                type: "target",
+                isConnectableStart: false,
+                id: input.id,
+                position: Position.Left
+              }
+            ),
+            /* @__PURE__ */ jsx(HvTypography, { children: input.label }),
+            input.isMandatory && !isInputConnected(id, "target", input.id, inputEdges) && /* @__PURE__ */ jsx("div", { className: classes.mandatory })
+          ] }, input.id)) })
         ] }),
         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) => {
-            const handleId = output.id ?? idx.toString();
-            return /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
-              /* @__PURE__ */ jsx(
-                Handle,
-                {
-                  type: "source",
-                  isConnectableEnd: false,
-                  id: handleId,
-                  position: Position.Right
-                }
-              ),
-              output.isMandatory && !isInputConnected(id, "source", handleId, outputEdges) && /* @__PURE__ */ jsx("div", { className: classes.mandatory }),
-              /* @__PURE__ */ jsx(HvTypography, { children: output.label })
-            ] }, idx);
-          }) })
+          /* @__PURE__ */ jsx("div", { className: classes.outputsContainer, children: outputs?.map((output) => /* @__PURE__ */ jsxs("div", { className: classes.outputContainer, children: [
+            /* @__PURE__ */ jsx(
+              Handle,
+              {
+                type: "source",
+                isConnectableEnd: false,
+                id: output.id,
+                position: Position.Right
+              }
+            ),
+            output.isMandatory && !isInputConnected(id, "source", output.id, outputEdges) && /* @__PURE__ */ jsx("div", { className: classes.mandatory }),
+            /* @__PURE__ */ jsx(HvTypography, { children: output.label })
+          ] }, output.id)) })
         ] }),
         footer && /* @__PURE__ */ jsx("div", { className: classes.footerContainer, children: footer })
       ]

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import React, { isValidElement, useCallback, useEffect, useState } from \"react\";\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n} from \"reactflow\";\nimport { uid } from \"uid\";\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\";\nimport {\n  useFlowNode,\n  useFlowNodeInputEdges,\n  useFlowNodeOutputEdges,\n} from \"../hooks/useFlowNode\";\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 = any>\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  /** The content of the Node footer */\n  footer?: React.ReactNode;\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  handleId: string,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some((e) => e.target === id && e.targetHandle === handleId);\n  }\n  if (type === \"source\") {\n    return edges.some((e) => e.source === id && e.sourceHandle === handleId);\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  footer,\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 node = useFlowNode(id);\n  const inputEdges = useFlowNodeInputEdges(id);\n  const outputEdges = useFlowNodeOutputEdges(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: uid(),\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  const iconColor = isValidElement(icon)\n    ? getColor(icon.props.color || \"base_dark\")\n    : getColor(\"base_dark\");\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\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\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } })\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              const handleId = input.id ?? idx.toString();\n              return (\n                <div className={classes.inputContainer} key={idx}>\n                  <Handle\n                    type=\"target\"\n                    isConnectableStart={false}\n                    id={handleId}\n                    position={Position.Left}\n                  />\n                  <HvTypography>{input.label}</HvTypography>\n                  {input.isMandatory &&\n                    !isInputConnected(id, \"target\", handleId, inputEdges) && (\n                      <div className={classes.mandatory} />\n                    )}\n                </div>\n              );\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              const handleId = output.id ?? idx.toString();\n              return (\n                <div className={classes.outputContainer} key={idx}>\n                  <Handle\n                    type=\"source\"\n                    isConnectableEnd={false}\n                    id={handleId}\n                    position={Position.Right}\n                  />\n                  {output.isMandatory &&\n                    !isInputConnected(id, \"source\", handleId, outputEdges) && (\n                      <div className={classes.mandatory} />\n                    )}\n                  <HvTypography>{output.label}</HvTypography>\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import React, {\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n} from \"reactflow\";\nimport { uid } from \"uid\";\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\";\nimport {\n  useFlowNode,\n  useFlowNodeInputEdges,\n  useFlowNodeOutputEdges,\n} from \"../hooks/useFlowNode\";\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 = any>\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  /** The content of the Node footer */\n  footer?: React.ReactNode;\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  handleId: string,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some((e) => e.target === id && e.targetHandle === handleId);\n  }\n  if (type === \"source\") {\n    return edges.some((e) => e.source === id && e.sourceHandle === handleId);\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: inputsProp,\n  outputs: outputsProp,\n  nodeActions = defaultActions,\n  footer,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n\n  const inputs = useMemo(\n    () =>\n      inputsProp?.map((input, idx) =>\n        input.id != null ? input : { ...input, id: String(idx) }\n      ),\n    [inputsProp]\n  );\n\n  const outputs = useMemo(\n    () =>\n      outputsProp?.map((output, idx) =>\n        output.id != null ? output : { ...output, id: String(idx) }\n      ),\n    [outputsProp]\n  );\n\n  useEffect(() => {\n    registerNode(id, {\n      label: title || \"\",\n      inputs,\n      outputs,\n    });\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 node = useFlowNode(id);\n  const inputEdges = useFlowNodeInputEdges(id);\n  const outputEdges = useFlowNodeOutputEdges(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: uid(),\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  const iconColor = isValidElement(icon)\n    ? getColor(icon.props.color || \"base_dark\")\n    : getColor(\"base_dark\");\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\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\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } })\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input) => (\n              <div className={classes.inputContainer} key={input.id}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={input.id}\n                  position={Position.Left}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", input.id!, inputEdges) && (\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) => (\n              <div className={classes.outputContainer} key={output.id}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={output.id}\n                  position={Position.Right}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", output.id!, outputEdges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -99,7 +99,7 @@ const HvFlowNode = ({
           ] }) })
         ] }),
         children,
-        showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { nodeId: id, params, data: node?.data }) })
+        showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { params, data: node?.data }) })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport {\n  HvFlowBaseNode,\n  HvFlowBaseNodeProps,\n  HvFlowBaseNodeClasses,\n} from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport interface HvFlowNodeClasses\n  extends ExtractNames<typeof useClasses>,\n    HvFlowBaseNodeClasses {}\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\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 set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** Node outputs. */\n  outputs?: HvFlowNodeOutput[];\n  /** Node inputs. */\n  inputs?: HvFlowNodeInput[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\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  outputs,\n  inputs,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  children,\n  expandParamsButtonProps,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n\n  const [showParams, setShowParams] = useState(expanded);\n\n  const node = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupId = nodeTypes?.[type].meta?.groupId;\n\n  const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n  const groupLabel = group?.label || nodeDefaults?.title;\n  const icon = group?.icon || nodeDefaults?.icon;\n  const color = group?.color || nodeDefaults?.color;\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 HvFlowBaseNodeClasses}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={description}>\n              <div>\n                <Info color=\"base_dark\" />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={showParams ? \"Collapse\" : \"Expand\"}\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up role=\"none\" color=\"base_dark\" />\n              ) : (\n                <Down role=\"none\" color=\"base_dark\" />\n              )}\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 key={action.id} title={action.label}>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\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":[],"mappings":"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"}
+{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport {\n  HvFlowBaseNode,\n  HvFlowBaseNodeProps,\n  HvFlowBaseNodeClasses,\n} from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport interface HvFlowNodeClasses\n  extends ExtractNames<typeof useClasses>,\n    HvFlowBaseNodeClasses {}\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\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 set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** Node outputs. */\n  outputs?: HvFlowNodeOutput[];\n  /** Node inputs. */\n  inputs?: HvFlowNodeInput[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\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  outputs,\n  inputs,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  children,\n  expandParamsButtonProps,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n\n  const [showParams, setShowParams] = useState(expanded);\n\n  const node = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupId = nodeTypes?.[type].meta?.groupId;\n\n  const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n  const groupLabel = group?.label || nodeDefaults?.title;\n  const icon = group?.icon || nodeDefaults?.icon;\n  const color = group?.color || nodeDefaults?.color;\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 HvFlowBaseNodeClasses}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={description}>\n              <div>\n                <Info color=\"base_dark\" />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={showParams ? \"Collapse\" : \"Expand\"}\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up role=\"none\" color=\"base_dark\" />\n              ) : (\n                <Down role=\"none\" color=\"base_dark\" />\n              )}\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 key={action.id} title={action.label}>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\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 params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8DA,MAAM,eAAe,CAAC,eACpB,eAAe,UAAU,IAAI,aAAc;AAEtC,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAgC;AAE/D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ;AAE/C,QAAA,OAAO,YAAY,EAAE;AAE3B,QAAM,EAAE,YAAY,WAAW,mBAAmB,eAAe;AAEjE,QAAM,WAAW,YAAY,IAAI,EAAE,MAAM,SAAS,cAAc;AAChE,QAAM,UAAU,YAAY,IAAI,EAAE,MAAM;AAExC,QAAM,QAAS,WAAW,cAAc,WAAW,OAAO,KAAM;AAC1D,QAAA,aAAa,OAAO,SAAS,cAAc;AAC3C,QAAA,OAAO,OAAO,QAAQ,cAAc;AACpC,QAAA,QAAQ,OAAO,SAAS,cAAc;AAE5C,QAAM,cAAc,SAAS,MAAM,GAAG,iBAAiB;AACjD,QAAA,eAAe,SAAS,MAAM,iBAAiB;AAErD,QAAM,YAAY,CAAC,EAAE,UAAU,OAAO,SAAS;AAG7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT,aAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAA;AAAA,QACA,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA,oBAAC,OACC,EAAA,UAAA,oBAAC,MAAK,EAAA,OAAM,YAAY,CAAA,EAC1B,CAAA,GACF;AAAA,QAED,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,oBAAoB;AAAA,YACpB,SAAS,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;AAAA,YACtC,cAAY,aAAa,aAAa;AAAA,YACrC,GAAG;AAAA,YAEH,UACC,aAAA,oBAAC,IAAG,EAAA,MAAK,QAAO,OAAM,YAAY,CAAA,IAEjC,oBAAA,MAAA,EAAK,MAAK,QAAO,OAAM,aAAY;AAAA,UAAA;AAAA,QAExC;AAAA,MAAA,GAEJ;AAAA,MAED,GAAG;AAAA,MAEF,UAAA;AAAA,SAAY,YAAA,aAAa,UAAU,cAAc,gCAChD,OAAI,EAAA,WAAW,QAAQ,mBACrB,UAAA;AAAA,UAAA,YACE,oBAAA,OAAA,EACC,UAAC,oBAAA,cAAA,EAAc,mBAAS,CAAA,GAC1B;AAAA,UAEF,oBAAC,OAAI,EAAA,WAAW,QAAQ,SACrB,mBAAS,UAAU,SAAS,SAAS,KAEjC,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAA,aAAa,IAAI,CAAC,+BAChB,WAA0B,EAAA,OAAO,OAAO,OACvC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAI;AAAA,gBACJ,SAAS,CAAC,UAAU;AACD,mCAAA,OAAO,IAAI,MAAM;AAAA,gBACpC;AAAA,gBACA,cAAY,OAAO;AAAA,gBAElB,UAAA,aAAa,OAAO,IAAI;AAAA,cAAA;AAAA,YAAA,KARb,OAAO,EAUvB,CACD;AAAA,YAEA,gBAAgB,aAAa,SAAS,KACrC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,YAAY;AAAA,gBACZ,UAAU,cAAc,IAAI,CAAC,YAAY;AAAA,kBACvC,IAAI,OAAO;AAAA,kBACX,OAAO,OAAO;AAAA,gBAAA,EACd;AAAA,gBACF,SAAS,CAAC,OAAO,WAAW;AACT,mCAAA,OAAO,IAAI,MAAyB;AAAA,gBACvD;AAAA,cAAA;AAAA,YACF;AAAA,UAAA,EAAA,CAEJ,EAEJ,CAAA;AAAA,QAAA,GACF;AAAA,QAED;AAAA,QACA,cAAc,UACZ,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA,oBAAC,eAAc,EAAA,QAAgB,MAAM,MAAM,KAAM,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

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

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

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

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

@@ -1,26 +1,16 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
 import { HvDropdown } from "@hitachivantara/uikit-react-core";
-import { useReactFlow } from "reactflow";
-const Select = ({ nodeId, param, data }) => {
+import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";
+const Select = ({ param, data }) => {
   const { id, label, multiple = false, options } = param;
-  const reactFlowInstance = useReactFlow();
+  const { setNodeData } = useFlowNodeUtils();
   const [opts, setOpts] = useState(
     data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0
   );
   const onSelectChange = (item) => {
     const newOpts = Array.isArray(item) ? item.map((x) => x.label) : item?.label ?? void 0;
-    reactFlowInstance.setNodes(
-      (nodes) => nodes.map((node) => {
-        if (node.id === nodeId) {
-          node.data = {
-            ...node.data,
-            [id]: newOpts
-          };
-        }
-        return node;
-      })
-    );
+    setNodeData((prev) => ({ ...prev, [id]: newOpts }));
     setOpts(
       newOpts ? Array.isArray(newOpts) ? newOpts : [newOpts] : void 0
     );

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeSelectParam } from \"../../types\";\n\ninterface SelectProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeSelectParam, \"type\">;\n  data: any;\n}\n\nconst Select = ({ nodeId, param, data }: SelectProps) => {\n  const { id, label, multiple = false, options } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [opts, setOpts] = useState<string[] | undefined>(\n    data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined\n  );\n\n  const onSelectChange: HvDropdownProps[\"onChange\"] = (item) => {\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : (item?.label as string) ?? undefined;\n\n    reactFlowInstance.setNodes((nodes) =>\n      nodes.map((node) => {\n        if (node.id === nodeId) {\n          node.data = {\n            ...node.data,\n            [id]: newOpts,\n          };\n        }\n        return node;\n      })\n    );\n    setOpts(\n      newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined\n    );\n  };\n\n  return (\n    <HvDropdown\n      className=\"nodrag\" // Prevents dragging within the select field\n      disablePortal\n      label={label}\n      values={options?.map((o) => {\n        return { id: o, label: o, selected: !!opts?.find((opt) => opt === o) };\n      })}\n      onChange={onSelectChange}\n      maxHeight={100}\n      multiSelect={multiple}\n    />\n  );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;AAYA,MAAM,SAAS,CAAC,EAAE,QAAQ,OAAO,WAAwB;AACvD,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAEjD,QAAM,oBAAoB;AAEpB,QAAA,CAAC,MAAM,OAAO,IAAI;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EAAA;AAG3D,QAAA,iBAA8C,CAAC,SAAS;AAC5D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,KAAe,IAChC,MAAM,SAAoB;AAEb,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACtB,eAAK,OAAO;AAAA,YACV,GAAG,KAAK;AAAA,YACR,CAAC,EAAE,GAAG;AAAA,UAAA;AAAA,QAEV;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAAA;AAAA,EAC7D;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,MAAM;AAC1B,eAAO,EAAE,IAAI,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,CAAC,EAAE;AAAA,MAAA,CACtE;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEA,MAAA,WAAe;"}
+{"version":3,"file":"Select.js","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeSelectParam } from \"../../types\";\nimport { useFlowNodeUtils } from \"../../hooks\";\n\ninterface SelectProps {\n  param: Omit<HvFlowNodeSelectParam, \"type\">;\n  data: any;\n}\n\nconst Select = ({ param, data }: SelectProps) => {\n  const { id, label, multiple = false, options } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  const [opts, setOpts] = useState<string[] | undefined>(\n    data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined\n  );\n\n  const onSelectChange: HvDropdownProps[\"onChange\"] = (item) => {\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : (item?.label as string) ?? undefined;\n\n    setNodeData((prev) => ({ ...prev, [id]: newOpts }));\n    setOpts(\n      newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined\n    );\n  };\n\n  return (\n    <HvDropdown\n      className=\"nodrag\" // Prevents dragging within the select field\n      disablePortal\n      label={label}\n      values={options?.map((o) => {\n        return { id: o, label: o, selected: !!opts?.find((opt) => opt === o) };\n      })}\n      onChange={onSelectChange}\n      maxHeight={100}\n      multiSelect={multiple}\n    />\n  );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;AAWA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AAC/C,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAC3C,QAAA,EAAE,gBAAgB;AAElB,QAAA,CAAC,MAAM,OAAO,IAAI;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EAAA;AAG3D,QAAA,iBAA8C,CAAC,SAAS;AAC5D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,KAAe,IAChC,MAAM,SAAoB;AAEnB,gBAAA,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,QAAU,EAAA;AAClD;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAAA;AAAA,EAC7D;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,MAAM;AAC1B,eAAO,EAAE,IAAI,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,CAAC,EAAE;AAAA,MAAA,CACtE;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEA,MAAA,WAAe;"}

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

@@ -1,8 +1,7 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useState } from "react";
 import { css } from "@emotion/css";
-import { useReactFlow } from "reactflow";
 import { HvSlider } from "@hitachivantara/uikit-react-core";
+import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";
 const classes = {
   labelContainer: css({
     marginRight: 0,
@@ -12,27 +11,15 @@ const classes = {
     padding: 0
   })
 };
-const Slider = ({ nodeId, param, data }) => {
+const Slider = ({ param, data }) => {
   const { id } = param;
-  const reactFlowInstance = useReactFlow();
-  const [value, setValue] = useState(data[id]);
-  const onSliderChange = (val) => {
-    reactFlowInstance.setNodes(
-      (nodes) => nodes.map((node) => {
-        if (node.id === nodeId) {
-          node.data = { ...node.data, [id]: val };
-        }
-        return node;
-      })
-    );
-    setValue(val);
-  };
+  const { setNodeData } = useFlowNodeUtils();
   return /* @__PURE__ */ jsx(
     HvSlider,
     {
       className: "nodrag",
-      defaultValues: value,
-      onChange: onSliderChange,
+      defaultValues: data[id],
+      onChange: (val) => setNodeData((prev) => ({ ...prev, [id]: val })),
       classes: {
         labelContainer: classes.labelContainer,
         sliderBase: classes.sliderBase

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { css } from \"@emotion/css\";\n\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvSlider, HvSliderProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeSliderParam } from \"../../types\";\n\ninterface SliderProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeSliderParam, \"type\">;\n  data: any;\n}\n\nconst classes = {\n  labelContainer: css({\n    marginRight: 0,\n    marginLeft: 0,\n  }),\n  sliderBase: css({\n    padding: 0,\n  }),\n};\n\nconst Slider = ({ nodeId, param, data }: SliderProps) => {\n  const { id } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [value, setValue] = useState(data[id]);\n\n  const onSliderChange: HvSliderProps[\"onChange\"] = (val) => {\n    reactFlowInstance.setNodes((nodes) =>\n      nodes.map((node) => {\n        if (node.id === nodeId) {\n          node.data = { ...node.data, [id]: val };\n        }\n        return node;\n      })\n    );\n    setValue(val);\n  };\n\n  return (\n    <HvSlider\n      className=\"nodrag\" // Prevents dragging within the input field\n      defaultValues={value}\n      onChange={onSliderChange}\n      classes={{\n        labelContainer: classes.labelContainer,\n        sliderBase: classes.sliderBase,\n      }}\n      {...param}\n    />\n  );\n};\n\nexport default Slider;\n"],"names":[],"mappings":";;;;;AAgBA,MAAM,UAAU;AAAA,EACd,gBAAgB,IAAI;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb;AAAA,EACD,YAAY,IAAI;AAAA,IACd,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,SAAS,CAAC,EAAE,QAAQ,OAAO,WAAwB;AACjD,QAAA,EAAE,GAAO,IAAA;AAEf,QAAM,oBAAoB;AAE1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK,EAAE,CAAC;AAErC,QAAA,iBAA4C,CAAC,QAAQ;AACvC,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACjB,eAAA,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC,EAAE,GAAG;QACpC;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH,aAAS,GAAG;AAAA,EAAA;AAIZ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe;AAAA,MACf,UAAU;AAAA,MACV,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAA,WAAe;"}
+{"version":3,"file":"Slider.js","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { HvSlider } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeSliderParam } from \"../../types\";\nimport { useFlowNodeUtils } from \"../../hooks\";\n\ninterface SliderProps {\n  param: Omit<HvFlowNodeSliderParam, \"type\">;\n  data: any;\n}\n\nconst classes = {\n  labelContainer: css({\n    marginRight: 0,\n    marginLeft: 0,\n  }),\n  sliderBase: css({\n    padding: 0,\n  }),\n};\n\nconst Slider = ({ param, data }: SliderProps) => {\n  const { id } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  return (\n    <HvSlider\n      className=\"nodrag\" // Prevents dragging within the input field\n      defaultValues={data[id]}\n      onChange={(val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n      classes={{\n        labelContainer: classes.labelContainer,\n        sliderBase: classes.sliderBase,\n      }}\n      {...param}\n    />\n  );\n};\n\nexport default Slider;\n"],"names":[],"mappings":";;;;AAWA,MAAM,UAAU;AAAA,EACd,gBAAgB,IAAI;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb;AAAA,EACD,YAAY,IAAI;AAAA,IACd,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AACzC,QAAA,EAAE,GAAO,IAAA;AACT,QAAA,EAAE,gBAAgB;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe,KAAK,EAAE;AAAA,MACtB,UAAU,CAAC,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AAAA,MACjE,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAA,WAAe;"}

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

@@ -1,29 +1,16 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useState } from "react";
 import { HvInput } from "@hitachivantara/uikit-react-core";
-import { useReactFlow } from "reactflow";
-const Text = ({ nodeId, param, data }) => {
+import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";
+const Text = ({ param, data }) => {
   const { id, label } = param;
-  const reactFlowInstance = useReactFlow();
-  const [text, setText] = useState(data[id]);
-  const onTextChange = (event, val) => {
-    reactFlowInstance.setNodes(
-      (nodes) => nodes.map((node) => {
-        if (node.id === nodeId) {
-          node.data = { ...node.data, [id]: val };
-        }
-        return node;
-      })
-    );
-    setText(val);
-  };
+  const { setNodeData } = useFlowNodeUtils();
   return /* @__PURE__ */ jsx(
     HvInput,
     {
       className: "nodrag",
       label,
-      value: text,
-      onChange: onTextChange
+      defaultValue: data[id],
+      onChange: (evt, val) => setNodeData((prev) => ({ ...prev, [id]: val }))
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../../../src/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvInput, HvInputProps } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeTextParam } from \"../../types\";\n\ninterface TextProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeTextParam, \"type\">;\n  data: any;\n}\n\nconst Text = ({ nodeId, param, data }: TextProps) => {\n  const { id, label } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [text, setText] = useState(data[id]);\n\n  const onTextChange: HvInputProps[\"onChange\"] = (event, val) => {\n    reactFlowInstance.setNodes((nodes) =>\n      nodes.map((node) => {\n        if (node.id === nodeId) {\n          node.data = { ...node.data, [id]: val };\n        }\n        return node;\n      })\n    );\n    setText(val);\n  };\n\n  return (\n    <HvInput\n      className=\"nodrag\" // Prevents dragging within the input field\n      label={label}\n      value={text}\n      onChange={onTextChange}\n    />\n  );\n};\n\nexport default Text;\n"],"names":[],"mappings":";;;;AAYA,MAAM,OAAO,CAAC,EAAE,QAAQ,OAAO,WAAsB;AAC7C,QAAA,EAAE,IAAI,MAAU,IAAA;AAEtB,QAAM,oBAAoB;AAE1B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK,EAAE,CAAC;AAEnC,QAAA,eAAyC,CAAC,OAAO,QAAQ;AAC3C,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACjB,eAAA,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC,EAAE,GAAG;QACpC;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH,YAAQ,GAAG;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEA,MAAA,SAAe;"}
+{"version":3,"file":"Text.js","sources":["../../../../../src/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { HvInput } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeTextParam } from \"../../types\";\nimport { useFlowNodeUtils } from \"../../hooks\";\n\ninterface TextProps {\n  param: Omit<HvFlowNodeTextParam, \"type\">;\n  data: any;\n}\n\nconst Text = ({ param, data }: TextProps) => {\n  const { id, label } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  return (\n    <HvInput\n      className=\"nodrag\" // Prevents dragging within the input field\n      label={label}\n      defaultValue={data[id]}\n      onChange={(evt, val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n    />\n  );\n};\n\nexport default Text;\n"],"names":[],"mappings":";;;AAUA,MAAM,OAAO,CAAC,EAAE,OAAO,WAAsB;AACrC,QAAA,EAAE,IAAI,MAAU,IAAA;AAChB,QAAA,EAAE,gBAAgB;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,cAAc,KAAK,EAAE;AAAA,MACrB,UAAU,CAAC,KAAK,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,IAAM,EAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;AAEA,MAAA,SAAe;"}

package/dist/esm/Flow/hooks/useFlowNode.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from "react";
-import { useStore, useNodes, useEdges } from "reactflow";
+import { useStore, useNodes, useEdges, useNodeId, useReactFlow } from "reactflow";
 function useFlowNode(id) {
   const nodeSelector = useCallback(
     (state) => state.getNodes().find((n) => n.id === id),
@@ -52,6 +52,31 @@ function useFlowOutputNodes(id) {
     return edges.filter((e) => e.source === id).map((e) => nodes.find((n) => n.id === e.target)).filter((n) => n !== null);
   }, [edges, id, nodes]);
 }
+function useFlowNodeUtils() {
+  const nodeId = useNodeId();
+  const reactFlowInstance = useReactFlow();
+  const setNodeData = useCallback(
+    (setNewData) => {
+      if (!nodeId)
+        return;
+      reactFlowInstance.setNodes((nodes) => {
+        return nodes.map((n) => {
+          if (n.id === nodeId) {
+            return { ...n, data: setNewData(n.data) };
+          }
+          return n;
+        });
+      });
+    },
+    [nodeId, reactFlowInstance]
+  );
+  return useMemo(
+    () => ({
+      setNodeData
+    }),
+    [setNodeData]
+  );
+}
 export {
   useFlowInputNodes,
   useFlowNode,
@@ -59,6 +84,7 @@ export {
   useFlowNodeInputEdges,
   useFlowNodeOutputEdges,
   useFlowNodeParents,
+  useFlowNodeUtils,
   useFlowOutputNodes
 };
 //# sourceMappingURL=useFlowNode.js.map

package/dist/esm/Flow/hooks/useFlowNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  Node,\n  Edge,\n  ReactFlowState,\n  useStore,\n  useNodes,\n  useEdges,\n} from \"reactflow\";\n\nexport function useFlowNode<T extends Node = Node>(id: string) {\n  const nodeSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.getNodes().find((n: Node): n is T => n.id === id),\n    [id]\n  );\n  return useStore<T | undefined>(nodeSelector);\n}\n\nexport function useFlowNodeInputEdges(id: string) {\n  const inputEdgesSelector = useCallback(\n    (state: ReactFlowState) => state.edges.filter((e: Edge) => e.target === id),\n    [id]\n  );\n  return useStore(inputEdgesSelector);\n}\n\nexport function useFlowNodeOutputEdges(id: string) {\n  const outputEdgesSelector = useCallback(\n    (state: ReactFlowState) => state.edges.filter((e: Edge) => e.source === id),\n    [id]\n  );\n  return useStore(outputEdgesSelector);\n}\n\nexport function useFlowNodeEdges(id: string) {\n  const edgesSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.edges.filter((e: Edge) => e.source === id || e.target === id),\n    [id]\n  );\n  return useStore(edgesSelector);\n}\n\nexport function useFlowNodeParents(id: string) {\n  const inputEdges = useFlowNodeInputEdges(id);\n  const parentNodesSelector = useCallback(\n    (state: ReactFlowState) => {\n      return inputEdges\n        .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n        .filter((n): n is Node => n !== null);\n    },\n    [inputEdges]\n  );\n  return useStore(parentNodesSelector);\n}\n\nexport function useFlowInputNodes<T = any>(id: string) {\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.target === id)\n      .map((e) => nodes.find((n) => n.id === e.source))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, id, nodes]);\n}\n\nexport function useFlowOutputNodes<T = any>(id: string) {\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.source === id)\n      .map((e) => nodes.find((n) => n.id === e.target))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, id, nodes]);\n}\n"],"names":[],"mappings":";;AAUO,SAAS,YAAmC,IAAY;AAC7D,QAAM,eAAe;AAAA,IACnB,CAAC,UACC,MAAM,WAAW,KAAK,CAAC,MAAoB,EAAE,OAAO,EAAE;AAAA,IACxD,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAwB,YAAY;AAC7C;AAEO,SAAS,sBAAsB,IAAY;AAChD,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAA0B,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,EAAE;AAAA,IAC1E,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,kBAAkB;AACpC;AAEO,SAAS,uBAAuB,IAAY;AACjD,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,EAAE;AAAA,IAC1E,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,mBAAmB;AACrC;AAEO,SAAS,iBAAiB,IAAY;AAC3C,QAAM,gBAAgB;AAAA,IACpB,CAAC,UACC,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,MAAM,EAAE,WAAW,EAAE;AAAA,IACpE,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,aAAa;AAC/B;AAEO,SAAS,mBAAmB,IAAY;AACvC,QAAA,aAAa,sBAAsB,EAAE;AAC3C,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B;AAClB,aAAA,WACJ,IAAI,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK,CAAC,MAAY,EAAE,OAAO,EAAE,MAAM,CAAC,EAChE,OAAO,CAAC,MAAiB,MAAM,IAAI;AAAA,IACxC;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAEb,SAAO,SAAS,mBAAmB;AACrC;AAEO,SAAS,kBAA2B,IAAY;AACrD,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,EAC7B,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,IAAI,KAAK,CAAC;AACvB;AAEO,SAAS,mBAA4B,IAAY;AACtD,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,EAC7B,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,IAAI,KAAK,CAAC;AACvB;"}
+{"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  Node,\n  Edge,\n  ReactFlowState,\n  useStore,\n  useNodes,\n  useEdges,\n  useReactFlow,\n  useNodeId,\n} from \"reactflow\";\n\nexport function useFlowNode<T extends Node = Node>(id: string) {\n  const nodeSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.getNodes().find((n: Node): n is T => n.id === id),\n    [id]\n  );\n  return useStore<T | undefined>(nodeSelector);\n}\n\nexport function useFlowNodeInputEdges(id: string) {\n  const inputEdgesSelector = useCallback(\n    (state: ReactFlowState) => state.edges.filter((e: Edge) => e.target === id),\n    [id]\n  );\n  return useStore(inputEdgesSelector);\n}\n\nexport function useFlowNodeOutputEdges(id: string) {\n  const outputEdgesSelector = useCallback(\n    (state: ReactFlowState) => state.edges.filter((e: Edge) => e.source === id),\n    [id]\n  );\n  return useStore(outputEdgesSelector);\n}\n\nexport function useFlowNodeEdges(id: string) {\n  const edgesSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.edges.filter((e: Edge) => e.source === id || e.target === id),\n    [id]\n  );\n  return useStore(edgesSelector);\n}\n\nexport function useFlowNodeParents(id: string) {\n  const inputEdges = useFlowNodeInputEdges(id);\n  const parentNodesSelector = useCallback(\n    (state: ReactFlowState) => {\n      return inputEdges\n        .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n        .filter((n): n is Node => n !== null);\n    },\n    [inputEdges]\n  );\n  return useStore(parentNodesSelector);\n}\n\nexport function useFlowInputNodes<T = any>(id: string) {\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.target === id)\n      .map((e) => nodes.find((n) => n.id === e.source))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, id, nodes]);\n}\n\nexport function useFlowOutputNodes<T = any>(id: string) {\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.source === id)\n      .map((e) => nodes.find((n) => n.id === e.target))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, id, nodes]);\n}\n\n/** Utilities to manipulate a node in the flow */\nexport function useFlowNodeUtils() {\n  const nodeId = useNodeId();\n  const reactFlowInstance = useReactFlow();\n\n  /** Mutate the node's `.data` object */\n  const setNodeData = useCallback(\n    (setNewData: (newData?: any) => any) => {\n      if (!nodeId) return;\n\n      reactFlowInstance.setNodes((nodes) => {\n        return nodes.map((n) => {\n          if (n.id === nodeId) {\n            return { ...n, data: setNewData(n.data) };\n          }\n          return n;\n        });\n      });\n    },\n    [nodeId, reactFlowInstance]\n  );\n\n  return useMemo(\n    () => ({\n      setNodeData,\n    }),\n    [setNodeData]\n  );\n}\n"],"names":[],"mappings":";;AAYO,SAAS,YAAmC,IAAY;AAC7D,QAAM,eAAe;AAAA,IACnB,CAAC,UACC,MAAM,WAAW,KAAK,CAAC,MAAoB,EAAE,OAAO,EAAE;AAAA,IACxD,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAwB,YAAY;AAC7C;AAEO,SAAS,sBAAsB,IAAY;AAChD,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAA0B,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,EAAE;AAAA,IAC1E,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,kBAAkB;AACpC;AAEO,SAAS,uBAAuB,IAAY;AACjD,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,EAAE;AAAA,IAC1E,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,mBAAmB;AACrC;AAEO,SAAS,iBAAiB,IAAY;AAC3C,QAAM,gBAAgB;AAAA,IACpB,CAAC,UACC,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,MAAM,EAAE,WAAW,EAAE;AAAA,IACpE,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,aAAa;AAC/B;AAEO,SAAS,mBAAmB,IAAY;AACvC,QAAA,aAAa,sBAAsB,EAAE;AAC3C,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B;AAClB,aAAA,WACJ,IAAI,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK,CAAC,MAAY,EAAE,OAAO,EAAE,MAAM,CAAC,EAChE,OAAO,CAAC,MAAiB,MAAM,IAAI;AAAA,IACxC;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAEb,SAAO,SAAS,mBAAmB;AACrC;AAEO,SAAS,kBAA2B,IAAY;AACrD,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,EAC7B,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,IAAI,KAAK,CAAC;AACvB;AAEO,SAAS,mBAA4B,IAAY;AACtD,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,EAC7B,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,IAAI,KAAK,CAAC;AACvB;AAGO,SAAS,mBAAmB;AACjC,QAAM,SAAS;AACf,QAAM,oBAAoB;AAG1B,QAAM,cAAc;AAAA,IAClB,CAAC,eAAuC;AACtC,UAAI,CAAC;AAAQ;AAEK,wBAAA,SAAS,CAAC,UAAU;AAC7B,eAAA,MAAM,IAAI,CAAC,MAAM;AAClB,cAAA,EAAE,OAAO,QAAQ;AACnB,mBAAO,EAAE,GAAG,GAAG,MAAM,WAAW,EAAE,IAAI;UACxC;AACO,iBAAA;AAAA,QAAA,CACR;AAAA,MAAA,CACF;AAAA,IACH;AAAA,IACA,CAAC,QAAQ,iBAAiB;AAAA,EAAA;AAGrB,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,IAAA;AAAA,IAEF,CAAC,WAAW;AAAA,EAAA;AAEhB;"}

package/dist/esm/index.js

@@ -18,7 +18,7 @@ import { HvFlowBaseNode } from "./Flow/Node/BaseNode.js";
 import { staticClasses as staticClasses8 } from "./Flow/Node/Node.styles.js";
 import { HvFlowNode } from "./Flow/Node/Node.js";
 import { HvDashboardNode, hvDashboardNodeClasses } from "./Flow/nodes/DashboardNode.js";
-import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeParents, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
+import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeParents, useFlowNodeUtils, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
 import { useFlowContext } from "./Flow/hooks/useFlowContext.js";
 import { useFlowNodeMeta } from "./Flow/hooks/useFlowNodeMeta.js";
 import { staticClasses as staticClasses9 } from "./StepNavigation/StepNavigation.styles.js";
@@ -72,6 +72,7 @@ export {
   useFlowNodeMeta,
   useFlowNodeOutputEdges,
   useFlowNodeParents,
+  useFlowNodeUtils,
   useFlowOutputNodes,
   staticClasses11 as wizardActionsClasses,
   staticClasses10 as wizardClasses,

package/dist/types/index.d.ts

@@ -333,7 +333,7 @@ export declare interface HvFlowBackgroundProps extends Omit<BackgroundProps, "co
     color?: HvColorAny;
 }
 
-export declare const HvFlowBaseNode: ({ id, title, headerItems, icon, color: colorProp, inputs, outputs, nodeActions, footer, classes: classesProp, className, children, }: HvFlowBaseNodeProps<unknown>) => JSX_2.Element | null;
+export declare const HvFlowBaseNode: ({ id, title, headerItems, icon, color: colorProp, inputs: inputsProp, outputs: outputsProp, nodeActions, footer, classes: classesProp, className, children, }: HvFlowBaseNodeProps<unknown>) => JSX_2.Element | null;
 
 export declare type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses_7>;
 
@@ -1044,6 +1044,11 @@ export declare function useFlowNodeOutputEdges(id: string): Edge<any>[];
 
 export declare function useFlowNodeParents(id: string): Node_2<any, string | undefined>[];
 
+/** Utilities to manipulate a node in the flow */
+export declare function useFlowNodeUtils(): {
+    setNodeData: (setNewData: (newData?: any) => any) => void;
+};
+
 export declare function useFlowOutputNodes<T = any>(id: string): Node_2<T, string | undefined>[];
 
 export declare const wizardActionsClasses: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.23.0",
+  "version": "5.24.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,7 +32,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.44.3",
+    "@hitachivantara/uikit-react-core": "^5.44.4",
     "@hitachivantara/uikit-react-icons": "^5.8.0",
     "@hitachivantara/uikit-styles": "^5.17.2",
     "@types/react-grid-layout": "^1.3.5",
@@ -50,7 +50,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "5cf0119ea66c034bda2108043eb3c6b09ab4b7ff",
+  "gitHead": "b3de50ca5f1d39d98879d15cfdd10bfa09861302",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {