@hitachivantara/uikit-react-lab 5.13.4 → 5.15.0

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

@@ -16,7 +16,7 @@ const ReactFlow__default = /* @__PURE__ */ _interopDefault(ReactFlow);
 const getNode = (nodes, nodeId) => {
   return nodes.find((n) => n.id === nodeId);
 };
-const validateEdge = (nodes, edge, nodeMetaRegistry) => {
+const validateEdge = (nodes, edges, edge, nodeMetaRegistry) => {
   if (!edge.sourceHandle || !edge.targetHandle)
     return false;
   const sourceNode = getNode(nodes, edge.source);
@@ -31,7 +31,17 @@ const validateEdge = (nodes, edge, nodeMetaRegistry) => {
   const outputs = nodeMetaRegistry[edge.source]?.outputs || [];
   const sourceProvides = outputs[edge.sourceHandle]?.provides || "";
   const targetAccepts = inputs[edge.targetHandle]?.accepts || [];
-  const isValid = targetAccepts.includes(sourceProvides);
+  const sourceMaxConnections = outputs[edge.sourceHandle]?.maxConnections;
+  const targetMaxConnections = inputs[edge.targetHandle]?.maxConnections;
+  let isValid = targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);
+  if (isValid && targetMaxConnections != null) {
+    const targetConnections = edges.filter((edg) => edg.target === edge.target && edg.targetHandle === edge.targetHandle).length;
+    isValid = targetConnections < targetMaxConnections;
+  }
+  if (isValid && sourceMaxConnections != null) {
+    const sourceConnections = edges.filter((edg) => edg.source === edge.source && edg.sourceHandle === edge.sourceHandle).length;
+    isValid = sourceConnections < sourceMaxConnections;
+  }
   return isValid;
 };
 const HvDroppableFlow = ({
@@ -120,7 +130,7 @@ const HvDroppableFlow = ({
   const {
     registry
   } = NodeMetaContext.useNodeMetaRegistry();
-  const isValidConnection = (connection) => validateEdge(nodes, connection, registry);
+  const isValidConnection = (connection) => validateEdge(nodes, edges, connection, registry);
   const defaultEdgeOptions = {
     markerEnd: {
       type: ReactFlow.MarkerType.ArrowClosed,

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

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { 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  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\n  const isValid = targetAccepts.includes(sourceProvides);\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 && event.over.id === elementId) {\n        const type = event.active.data.current?.hvFlow?.type;\n\n        // Only known node types can be dropped in the canvas\n        if (type && nodeTypes?.[type]) {\n          // Converts the coordinates to the react flow coordinate system\n          const position = reactFlowInstance.project({\n            x:\n              (event.active.data.current?.hvFlow?.x || 0) -\n              event.over.rect.left,\n            y:\n              (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n          });\n\n          // Node data\n          const data = event.active.data.current?.hvFlow?.data || {};\n\n          // Node to add\n          const newNode: Node = {\n            id: uid(),\n            position,\n            data,\n            type,\n          };\n\n          // Drop override\n          if (onDndDrop) {\n            onDndDrop(event, newNode);\n            return;\n          }\n\n          setNodes((nds) => nds.concat(newNode));\n        } else {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n      }\n    },\n    [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  const { registry } = useNodeMetaRegistry();\n  const isValidConnection = (connection) =>\n    validateEdge(nodes, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edge","nodeMetaRegistry","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","outputs","sourceProvides","provides","targetAccepts","accepts","isValid","includes","HvDroppableFlow","className","children","onFlowChange","onDndDrop","classes","classesProp","initialNodes","edges","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","data","current","hvFlow","position","project","x","rect","left","y","top","newNode","uid","nds","concat","error","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","registry","useNodeMetaRegistry","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","jsxs","Fragment","jsx","Global","flowStyles","root","ReactFlow"],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { 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 && event.over.id === elementId) {\n        const type = event.active.data.current?.hvFlow?.type;\n\n        // Only known node types can be dropped in the canvas\n        if (type && nodeTypes?.[type]) {\n          // Converts the coordinates to the react flow coordinate system\n          const position = reactFlowInstance.project({\n            x:\n              (event.active.data.current?.hvFlow?.x || 0) -\n              event.over.rect.left,\n            y:\n              (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n          });\n\n          // Node data\n          const data = event.active.data.current?.hvFlow?.data || {};\n\n          // Node to add\n          const newNode: Node = {\n            id: uid(),\n            position,\n            data,\n            type,\n          };\n\n          // Drop override\n          if (onDndDrop) {\n            onDndDrop(event, newNode);\n            return;\n          }\n\n          setNodes((nds) => nds.concat(newNode));\n        } else {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n      }\n    },\n    [elementId, nodeTypes, onDndDrop, reactFlowInstance]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  const { 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    ...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          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edges","edge","nodeMetaRegistry","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","outputs","sourceProvides","provides","targetAccepts","accepts","sourceMaxConnections","maxConnections","targetMaxConnections","isValid","length","includes","targetConnections","filter","edg","sourceConnections","HvDroppableFlow","className","children","onFlowChange","onDndDrop","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","active","data","current","hvFlow","position","project","x","rect","left","y","top","newNode","uid","nds","concat","error","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","registry","useNodeMetaRegistry","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","jsxs","Fragment","jsx","Global","flowStyles","root","ReactFlow"],"mappings":"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"}

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

@@ -92,9 +92,15 @@ const HvFlowBaseNode = ({
   if (!node)
     return null;
   const color = uikitStyles.getColor(colorProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(css({
-    border: `1px solid ${color}`
-  }), classes.root, className), onMouseEnter: () => setShowActions(true), onMouseLeave: () => setShowActions(false), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(
+    "nowheel",
+    // Disables the default canvas pan behaviour when scrolling inside the node
+    css({
+      border: `1px solid ${color}`
+    }),
+    classes.root,
+    className
+  ), onMouseEnter: () => setShowActions(true), onMouseLeave: () => setShowActions(false), children: [
     /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.NodeToolbar, { isVisible: showActions, offset: 0, children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: () => handleDefaultAction(action), children: renderedIcon(action.icon) }, action.id)) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(css({
       backgroundColor: color

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.cjs","sources":["../../../../../src/components/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\n\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n  useStore,\n} from \"reactflow\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvBaseProps,\n  HvButton,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFlowNodeAction,\n  HvFlowBuiltInActions,\n  HvFlowNodeInput,\n  HvFlowNodeOutput,\n} from \"../types/index\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowBaseNodeProps<T>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: HvFlowNodeInput[];\n  /** Node outputs */\n  outputs?: HvFlowNodeOutput[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  idx: number,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n\n  return false;\n};\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs,\n  outputs,\n  nodeActions = defaultActions,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  useEffect(() => {\n    registerNode(id, { label: title || \"\", inputs, outputs });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const edges = useStore((s) => s.edges);\n  const nodes = useStore((s) => s.getNodes());\n\n  const node = nodes.find((n) => n.id === id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: `${reactFlowInstance.getNodes().length + 1}`,\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n\n  return (\n    <div\n      className={cx(\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div className={classes.titleContainer}>\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.title}>\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","defaultActions","label","icon","Delete","Duplicate","renderedIcon","actionIcon","isValidElement","HvFlowBaseNode","title","headerItems","color","colorProp","inputs","outputs","nodeActions","classes","classesProp","className","children","registerNode","unregisterNode","useNodeMetaRegistry","useEffect","showActions","setShowActions","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","useStore","s","nodes","getNodes","node","find","n","handleDefaultAction","useCallback","action","callback","deleteElements","addNodes","length","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","getColor","jsxs","border","root","jsx","NodeToolbar","map","HvButton","backgroundColor","headerContainer","titleContainer","HvTypography","display","contentContainer","Fragment","inputsTitleContainer","inputsContainer","input","inputContainer","Handle","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":";;;;;;;;;;AAwDA,MAAMA,mBAAmBA,CACvBC,IACAC,MACAC,KACAC,UACG;AACH,MAAIF,SAAS,UAAU;AACdE,WAAAA,MAAMC,KACVC,CAAAA,MAAMA,EAAEC,WAAWN,MAAMK,EAAEE,iBAAiBL,IAAIM,SACnD,CAAA;AAAA,EACF;AACA,MAAIP,SAAS,UAAU;AACdE,WAAAA,MAAMC,KACVC,CAAAA,MAAMA,EAAEI,WAAWT,MAAMK,EAAEK,iBAAiBR,IAAIM,SACnD,CAAA;AAAA,EACF;AAEO,SAAA;AACT;AAEA,MAAMG,iBAAyC,CAC7C;AAAA,EAAEX,IAAI;AAAA,EAAUY,OAAO;AAAA,EAAUC,qCAAOC,gBAAM,QAAA,EAAA;AAAI,GAClD;AAAA,EAAEd,IAAI;AAAA,EAAaY,OAAO;AAAA,EAAaC,qCAAOE,gBAAS,WAAA,EAAA;AAAI,CAAC;AAG9D,MAAMC,eAAeA,CAACC,eACpBC,qBAAeD,UAAU,IAAIA,aAAcA;AAEtC,MAAME,iBAAiBA,CAAC;AAAA,EAC7BnB;AAAAA,EACAoB;AAAAA,EACAC;AAAAA,EACAR;AAAAA,EACAS,OAAOC;AAAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,cAAcf;AAAAA,EACdgB,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAC4B,MAAM;AAC5B,QAAA;AAAA,IAAEC;AAAAA,IAAcC;AAAAA,MAAmBC,gBAAoB,oBAAA;AAC7DC,QAAAA,UAAU,MAAM;AACdH,iBAAa/B,IAAI;AAAA,MAAEY,OAAOQ,SAAS;AAAA,MAAII;AAAAA,MAAQC;AAAAA,IAAAA,CAAS;AACjD,WAAA,MAAMO,eAAehC,EAAE;AAAA,EAAA,GAC7B,CAACA,IAAIoB,OAAOI,QAAQC,SAASM,cAAcC,cAAc,CAAC;AAE7D,QAAM,CAACG,aAAaC,cAAc,IAAIC,eAAS,KAAK;AACpD,QAAMC,oBAAoBC,UAAAA;AAEpB,QAAA;AAAA,IAAEZ;AAAAA,IAASa;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,gBAAAA,WAAWd,WAAW;AAEnD,QAAMzB,QAAQwC,UAAAA,SAAUC,CAAMA,MAAAA,EAAEzC,KAAK;AACrC,QAAM0C,QAAQF,UAAAA,SAAUC,CAAMA,MAAAA,EAAEE,UAAU;AAE1C,QAAMC,OAAOF,MAAMG,KAAMC,CAAMA,MAAAA,EAAEjD,OAAOA,EAAE;AAEpCkD,QAAAA,sBAAsBC,kBAC1B,CAACC,WAA6B;AAC5B,QAAI,CAACL;AAAM;AAEX,QAAIK,OAAOC,UAAU;AACnBD,aAAOC,SAASN,IAAI;AACpB;AAAA,IACF;AAGA,YAAQK,OAAOpD,IAAE;AAAA,MACf,KAAK;AACHsC,0BAAkBgB,eAAe;AAAA,UAAET,OAAO,CAACE,IAAI;AAAA,QAAA,CAAG;AAClD;AAAA,MACF,KAAK;AACHT,0BAAkBiB,SAAS,CACzB;AAAA,UACE,GAAGR;AAAAA,UACH/C,IAAK,GAAEsC,kBAAkBQ,SAAS,EAAEU,SAAS,CAAE;AAAA,UAC/CC,UAAU;AAAA,YACRC,GAAGX,KAAKU,SAASC;AAAAA,YACjBC,GAAGZ,KAAKU,SAASE,KAAKZ,KAAKa,UAAU,KAAK;AAAA,UAC5C;AAAA,UACAC,UAAU;AAAA,UACVC,QAAQC,OAAOC,kBAAMC,SAASC,OAAO;AAAA,QACtC,CAAA,CACF;AACD;AAAA,IAGJ;AAAA,EAAA,GAEF,CAACnB,MAAMT,iBAAiB,CAC1B;AAEA,MAAI,CAACS;AAAa,WAAA;AAEZzB,QAAAA,QAAQ6C,qBAAS5C,SAAS;AAEhC,SACG6C,2BAAA,KAAA,OAAA,EACC,WAAW5B,GACTC,IAAI;AAAA,IAAE4B,QAAS,aAAY/C,KAAM;AAAA,EAAG,CAAA,GACpCK,QAAQ2C,MACRzC,SACF,GACA,cAAc,MAAMO,eAAe,IAAI,GACvC,cAAc,MAAMA,eAAe,KAAK,GAExC,UAAA;AAAA,IAACmC,2BAAAA,IAAAC,UAAAA,aAAA,EAAY,WAAWrC,aAAa,QAAQ,GAC1CT,uBAAa+C,IAAKrB,CAAAA,WAChBmB,2BAAAA,IAAAG,eAAAA,UAAA,EAEC,MAAI,MACJ,SAAS,MAAMxB,oBAAoBE,MAAM,GAExCpC,UAAaoC,aAAAA,OAAOvC,IAAI,EAJpBuC,GAAAA,OAAOpD,EAKd,CACD,EACH,CAAA;AAAA,IACCoE,2BAAAA,KAAA,OAAA,EACC,WAAW5B,GAAGC,IAAI;AAAA,MAAEkC,iBAAiBrD;AAAAA,IAAO,CAAA,GAAGK,QAAQiD,eAAe,GAEtE,UAAA;AAAA,MAACR,2BAAA,KAAA,OAAA,EAAI,WAAWzC,QAAQkD,gBACrBhE,UAAAA;AAAAA,QAAAA;AAAAA,uCACAiE,eAAAA,cAAa,EAAA,SAAQ,UAAS,WAAWnD,QAAQP,OAC/CA,UACH,OAAA;AAAA,MAAA,GACF;AAAA,MACCC,eAAgBkD,2BAAA,IAAA,OAAA,EAAI,OAAO;AAAA,QAAEQ,SAAS;AAAA,MAAA,GAAW1D,UAAY,aAAA;AAAA,IAAA,GAChE;AAAA,IACCS,YAAayC,2BAAA,IAAA,OAAA,EAAI,WAAW5C,QAAQqD,kBAAmBlD,UAAS;AAAA,IAChEN,UAAUA,OAAOgC,SAAS,KAEvBY,2BAAAA,KAAAa,WAAAA,UAAA,EAAA,UAAA;AAAA,MAAAV,2BAAAA,IAAC,SAAI,WAAW5C,QAAQuD,sBACtB,UAACX,2BAAA,IAAAO,eAAA,cAAA,EAAa,oBAAM,EACtB,CAAA;AAAA,MAECP,2BAAA,IAAA,OAAA,EAAI,WAAW5C,QAAQwD,iBACrB3D,UAAQiD,QAAAA,IAAI,CAACW,OAAOlF,QACnBkE,2BAAAA,KAAC,OAAI,EAAA,WAAWzC,QAAQ0D,gBACtB,UAAA;AAAA,QAAAd,2BAAA,IAACe,UACC,QAAA,EAAA,MAAK,UACL,oBAAoB,OACpB,IAAK,GAAEpF,GAAI,IACX,UAAUqF,UAAAA,SAASC,MACnB,OAAO;AAAA,UACLC,KAAK;AAAA,UACLC,SACGjE,SAAS+B,SAAS,KAAK,OACvB/B,SAAS+B,UAAU,KAAK,KACzB,KAAKtD;AAAAA,QAAAA,GACP;AAAA,QAEJqE,2BAAAA,IAACO,eAAAA,cAAcM,EAAAA,UAAAA,MAAMxE,MAAM,CAAA;AAAA,QAC1BwE,MAAMO,eACL,CAAC5F,iBAAiBC,IAAI,UAAUE,KAAKC,KAAK,KACxCoE,2BAAAA,IAAC,OAAI,EAAA,WAAW5C,QAAQiE,UACzB,CAAA;AAAA,MAAA,KAlBwC1F,GAmB7C,CACD,GACH;AAAA,IAAA,GACF;AAAA,IAEDuB,WAAWA,QAAQ+B,SAAS,KAEzBY,2BAAAA,KAAAa,WAAAA,UAAA,EAAA,UAAA;AAAA,MAAAV,2BAAAA,IAAC,SAAI,WAAW5C,QAAQkE,uBACtB,UAACtB,2BAAA,IAAAO,eAAA,cAAA,EAAa,qBAAO,EACvB,CAAA;AAAA,MACCP,2BAAA,IAAA,OAAA,EAAI,WAAW5C,QAAQmE,kBACrBrE,UAASgD,SAAAA,IAAI,CAACsB,QAAQ7F,QACrBkE,2BAAAA,KAAC,OAAI,EAAA,WAAWzC,QAAQqE,iBACtB,UAAA;AAAA,QAAAzB,2BAAA,IAACe,UACC,QAAA,EAAA,MAAK,UACL,kBAAkB,OAClB,IAAK,GAAEpF,GAAI,IACX,UAAUqF,UAAAA,SAASU,OACnB,OAAO;AAAA,UACLP,QAAQ,MAAM,MAAMjE,QAAQ+B,SAAStD;AAAAA,UACrCuF,KAAK;AAAA,QAAA,GACL;AAAA,QAEHM,OAAOJ,eACN,CAAC5F,iBAAiBC,IAAI,UAAUE,KAAKC,KAAK,KACxCoE,2BAAAA,IAAC,OAAI,EAAA,WAAW5C,QAAQiE,UACzB,CAAA;AAAA,QACHrB,2BAAAA,IAACO,eAAAA,cAAciB,EAAAA,UAAAA,OAAOnF,MAAM,CAAA;AAAA,MAAA,KAfgBV,GAgB9C,CACD,GACH;AAAA,IAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"BaseNode.cjs","sources":["../../../../../src/components/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\n\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n  useStore,\n} from \"reactflow\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvBaseProps,\n  HvButton,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFlowNodeAction,\n  HvFlowBuiltInActions,\n  HvFlowNodeInput,\n  HvFlowNodeOutput,\n} from \"../types/index\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowBaseNodeProps<T = 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  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  idx: number,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n\n  return false;\n};\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs,\n  outputs,\n  nodeActions = defaultActions,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  useEffect(() => {\n    registerNode(id, { label: title || \"\", inputs, outputs });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const edges = useStore((s) => s.edges);\n  const nodes = useStore((s) => s.getNodes());\n\n  const node = nodes.find((n) => n.id === id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: `${reactFlowInstance.getNodes().length + 1}`,\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n\n  return (\n    <div\n      className={cx(\n        \"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 className={classes.titleContainer}>\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.title}>\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","defaultActions","label","icon","Delete","Duplicate","renderedIcon","actionIcon","isValidElement","HvFlowBaseNode","title","headerItems","color","colorProp","inputs","outputs","nodeActions","classes","classesProp","className","children","registerNode","unregisterNode","useNodeMetaRegistry","useEffect","showActions","setShowActions","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","useStore","s","nodes","getNodes","node","find","n","handleDefaultAction","useCallback","action","callback","deleteElements","addNodes","length","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","getColor","jsxs","border","root","jsx","NodeToolbar","map","HvButton","backgroundColor","headerContainer","titleContainer","HvTypography","display","contentContainer","Fragment","inputsTitleContainer","inputsContainer","input","inputContainer","Handle","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}

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

@@ -21,6 +21,7 @@ const HvFlowNode = ({
   maxVisibleActions = 1,
   expanded = false,
   params,
+  nodeDefaults,
   classes: classesProp,
   children,
   ...props
@@ -38,12 +39,12 @@ const HvFlowNode = ({
     defaultActions
   } = useFlowContext.useFlowContext();
   const groupId = nodeTypes?.[type].meta?.groupId;
-  const subtitle = nodeTypes?.[type].meta?.label;
-  const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;
+  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;
+  const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label || nodeDefaults?.title;
   const inputs = nodeTypes?.[type]?.meta?.inputs;
   const outputs = nodeTypes?.[type]?.meta?.outputs;
-  const icon = groupId && nodeGroups && nodeGroups[groupId].icon;
-  const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;
+  const icon = groupId && nodeGroups && nodeGroups[groupId].icon || nodeDefaults?.icon;
+  const colorProp = groupId && nodeGroups && nodeGroups[groupId].color || nodeDefaults?.color;
   const color = uikitStyles.getColor(colorProp);
   const actsVisible = actions?.slice(0, maxVisibleActions);
   const actsDropdown = actions?.slice(maxVisibleActions);

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

@@ -1 +1 @@
-{"version":3,"file":"Node.cjs","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import { SyntheticEvent, isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks/index\";\nimport { HvFlowNodeParam } from \"../types/index\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n// TODO How to include here the types from the parent component?\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowNodeProps<T>\n  extends Omit<HvFlowBaseNodeProps<T>, \"classes\"> {\n  /** Node description */\n  description?: string;\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses | HvFlowBaseNodeProps<T>[\"classes\"];\n}\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  classes: classesProp,\n  children,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n  const [showParams, setShowParams] = useState(expanded);\n  const { node } = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n  const groupId = nodeTypes?.[type].meta?.groupId;\n  const subtitle = nodeTypes?.[type].meta?.label;\n  const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;\n\n  const inputs = nodeTypes?.[type]?.meta?.inputs;\n  const outputs = nodeTypes?.[type]?.meta?.outputs;\n  const icon = groupId && nodeGroups && nodeGroups[groupId].icon;\n  const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;\n  const color = getColor(colorProp);\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      inputs={inputs}\n      outputs={outputs}\n      nodeActions={defaultActions}\n      classes={classesProp as HvFlowBaseNodeProps<unknown>[\"classes\"]}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n              <div>\n                <Info />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton icon onClick={() => setShowParams((p) => !p)}>\n              {showParams ? <Up /> : <Down />}\n            </HvButton>\n          )}\n        </>\n      }\n      {...props}\n    >\n      {(subtitle || actsVisible?.length || actsDropdown?.length) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\n          <div className={classes.actions}>\n            {actions?.length && actions?.length > 0 && (\n              <>\n                {actsVisible?.map((action) => (\n                  <HvTooltip\n                    key={action.id}\n                    title={<HvTypography>{action.label}</HvTypography>}\n                  >\n                    <div>\n                      <HvButton\n                        icon\n                        onClick={(event: SyntheticEvent<Element, Event>) => {\n                          actionCallback?.(event, id, action);\n                        }}\n                        aria-label={action.label}\n                      >\n                        {renderedIcon(action.icon)}\n                      </HvButton>\n                    </div>\n                  </HvTooltip>\n                ))}\n\n                {actsDropdown && actsDropdown.length > 0 && (\n                  <HvDropDownMenu\n                    keepOpened={false}\n                    dataList={actsDropdown?.map((action) => ({\n                      id: action.id,\n                      label: action.label,\n                    }))}\n                    onClick={(event, action) => {\n                      actionCallback?.(event, id, action as HvActionGeneric);\n                    }}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":["renderedIcon","actionIcon","isValidElement","HvFlowNode","id","type","headerItems","description","actions","actionCallback","maxVisibleActions","expanded","params","classes","classesProp","children","props","useClasses","showParams","setShowParams","useState","node","useFlowNode","nodeGroups","nodeTypes","defaultActions","useFlowContext","groupId","meta","subtitle","label","groupLabel","inputs","outputs","icon","colorProp","color","getColor","actsVisible","slice","actsDropdown","hasParams","length","jsxs","HvFlowBaseNode","jsx","HvTooltip","HvTypography","Info","HvButton","p","Up","Down","subtitleContainer","map","action","event","HvDropDownMenu","paramsContainer","ParamRenderer","data"],"mappings":"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"}
+{"version":3,"file":"Node.cjs","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import React, { SyntheticEvent, isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks/index\";\nimport { HvFlowNodeParam } from \"../types/index\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n// TODO How to include here the types from the parent component?\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nexport interface HvFlowNodeProps<T = any>\n  extends Omit<HvFlowBaseNodeProps<T>, \"classes\"> {\n  /** Node description */\n  description?: string;\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses | HvFlowBaseNodeProps<T>[\"classes\"];\n}\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  children,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n  const [showParams, setShowParams] = useState(expanded);\n  const { node } = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n  const groupId = nodeTypes?.[type].meta?.groupId;\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupLabel =\n    (groupId && nodeGroups && nodeGroups[groupId].label) || nodeDefaults?.title;\n\n  const inputs = nodeTypes?.[type]?.meta?.inputs;\n  const outputs = nodeTypes?.[type]?.meta?.outputs;\n  const icon =\n    (groupId && nodeGroups && nodeGroups[groupId].icon) || nodeDefaults?.icon;\n  const colorProp =\n    (groupId && nodeGroups && nodeGroups[groupId].color) || nodeDefaults?.color;\n  const color = getColor(colorProp);\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      inputs={inputs}\n      outputs={outputs}\n      nodeActions={defaultActions}\n      classes={classesProp as HvFlowBaseNodeProps<unknown>[\"classes\"]}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n              <div>\n                <Info />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton icon onClick={() => setShowParams((p) => !p)}>\n              {showParams ? <Up /> : <Down />}\n            </HvButton>\n          )}\n        </>\n      }\n      {...props}\n    >\n      {(subtitle || actsVisible?.length || actsDropdown?.length) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\n          <div className={classes.actions}>\n            {actions?.length && actions?.length > 0 && (\n              <>\n                {actsVisible?.map((action) => (\n                  <HvTooltip\n                    key={action.id}\n                    title={<HvTypography>{action.label}</HvTypography>}\n                  >\n                    <div>\n                      <HvButton\n                        icon\n                        onClick={(event: SyntheticEvent<Element, Event>) => {\n                          actionCallback?.(event, id, action);\n                        }}\n                        aria-label={action.label}\n                      >\n                        {renderedIcon(action.icon)}\n                      </HvButton>\n                    </div>\n                  </HvTooltip>\n                ))}\n\n                {actsDropdown && actsDropdown.length > 0 && (\n                  <HvDropDownMenu\n                    keepOpened={false}\n                    dataList={actsDropdown?.map((action) => ({\n                      id: action.id,\n                      label: action.label,\n                    }))}\n                    onClick={(event, action) => {\n                      actionCallback?.(event, id, action as HvActionGeneric);\n                    }}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":["renderedIcon","actionIcon","isValidElement","HvFlowNode","id","type","headerItems","description","actions","actionCallback","maxVisibleActions","expanded","params","nodeDefaults","classes","classesProp","children","props","useClasses","showParams","setShowParams","useState","node","useFlowNode","nodeGroups","nodeTypes","defaultActions","useFlowContext","groupId","meta","subtitle","label","subTitle","groupLabel","title","inputs","outputs","icon","colorProp","color","getColor","actsVisible","slice","actsDropdown","hasParams","length","jsxs","HvFlowBaseNode","jsx","HvTooltip","HvTypography","Info","HvButton","p","Up","Down","subtitleContainer","map","action","event","HvDropDownMenu","paramsContainer","ParamRenderer","data"],"mappings":"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"}

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

@@ -9,29 +9,47 @@ const Select = ({
   param,
   data
 }) => {
+  const {
+    id,
+    label,
+    multiple = false,
+    options
+  } = param;
   const reactFlowInstance = ReactFlow.useReactFlow();
-  const [option, setOption] = React.useState(data[param.id]);
+  const [opts, setOpts] = React.useState(data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0);
   const onSelectChange = (item) => {
     const nodes = reactFlowInstance.getNodes();
+    const newOpts = Array.isArray(item) ? item.map((x) => x.label) : item?.label ? [item.label] : void 0;
     const newNodes = nodes.map((node) => {
       if (node.id === nodeId) {
         node.data = {
           ...node.data,
-          [param.id]: item.label
+          [id]: newOpts
         };
       }
       return node;
     });
     reactFlowInstance.setNodes(newNodes);
-    setOption(item.label);
+    setOpts(newOpts);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDropdown, { disablePortal: true, label: param.label, values: param.options?.map((o) => {
-    return {
-      id: o,
-      label: o,
-      selected: o === option
-    };
-  }), onChange: (item) => onSelectChange(item) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    uikitReactCore.HvDropdown,
+    {
+      className: "nodrag",
+      disablePortal: true,
+      label,
+      values: options?.map((o) => {
+        return {
+          id: o,
+          label: o,
+          selected: !!opts?.find((opt) => opt === o)
+        };
+      }),
+      onChange: onSelectChange,
+      maxHeight: 100,
+      multiSelect: multiple
+    }
+  );
 };
 const Select$1 = Select;
 exports.default = Select$1;

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

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../../../src/components/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Select = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [option, setOption] = useState(data[param.id]);\n\n  const onSelectChange = (item) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: item.label };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setOption(item.label);\n  };\n\n  return (\n    <HvDropdown\n      disablePortal\n      label={param.label}\n      values={param.options?.map((o) => {\n        return { id: o, label: o, selected: o === option };\n      })}\n      onChange={(item) => onSelectChange(item)}\n    />\n  );\n};\n\nexport default Select;\n"],"names":["Select","nodeId","param","data","reactFlowInstance","useReactFlow","option","setOption","useState","id","onSelectChange","item","nodes","getNodes","newNodes","map","node","label","setNodes","jsx","HvDropdown","options","o","selected"],"mappings":";;;;;;AAIA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;AAC1C,QAAMC,oBAAoBC,UAAAA;AACpB,QAAA,CAACC,QAAQC,SAAS,IAAIC,MAAAA,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAEnD,QAAMC,iBAAkBC,CAAS,SAAA;AACzBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE,KAAKM;AAAAA,QAAAA;AAAAA,MAC/C;AACOD,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBc,SAASJ,QAAQ;AACnCP,cAAUI,KAAKM,KAAK;AAAA,EAAA;AAIpB,SAAAE,2BAAA,IAACC,eACC,YAAA,EAAA,eAAa,MACb,OAAOlB,MAAMe,OACb,QAAQf,MAAMmB,SAASN,IAAKO,CAAM,MAAA;AACzB,WAAA;AAAA,MAAEb,IAAIa;AAAAA,MAAGL,OAAOK;AAAAA,MAAGC,UAAUD,MAAMhB;AAAAA,IAAAA;AAAAA,EAAO,CAClD,GACD,UAAWK,CAASD,SAAAA,eAAeC,IAAI,EACvC,CAAA;AAEN;AAEA,MAAA,WAAeX;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../../../../src/components/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 nodes = reactFlowInstance.getNodes();\n\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : item?.label\n      ? [item.label as string]\n      : undefined;\n\n    const newNodes = 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    reactFlowInstance.setNodes(newNodes);\n    setOpts(newOpts);\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":["Select","nodeId","param","data","id","label","multiple","options","reactFlowInstance","useReactFlow","opts","setOpts","useState","Array","isArray","undefined","onSelectChange","item","nodes","getNodes","newOpts","map","x","newNodes","node","setNodes","jsx","HvDropdown","o","selected","find","opt"],"mappings":";;;;;;AAYA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAkB,MAAM;AACjD,QAAA;AAAA,IAAEC;AAAAA,IAAIC;AAAAA,IAAOC,WAAW;AAAA,IAAOC;AAAAA,EAAYL,IAAAA;AAEjD,QAAMM,oBAAoBC,UAAAA;AAEpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,MAAAA,SACtBT,KAAKC,EAAE,IAAKS,MAAMC,QAAQX,KAAKC,EAAE,CAAC,IAAID,KAAKC,EAAE,IAAI,CAACD,KAAKC,EAAE,CAAC,IAAKW,MACjE;AAEA,QAAMC,iBAA+CC,CAAS,SAAA;AACtDC,UAAAA,QAAQV,kBAAkBW;AAEhC,UAAMC,UAAUP,MAAMC,QAAQG,IAAI,IAC9BA,KAAKI,IAAKC,CAAAA,MAAMA,EAAEjB,KAAe,IACjCY,MAAMZ,QACN,CAACY,KAAKZ,KAAe,IACrBU;AAEEQ,UAAAA,WAAWL,MAAMG,IAAKG,CAAS,SAAA;AAC/BA,UAAAA,KAAKpB,OAAOH,QAAQ;AACtBuB,aAAKrB,OAAO;AAAA,UACV,GAAGqB,KAAKrB;AAAAA,UACR,CAACC,EAAE,GAAGgB;AAAAA,QAAAA;AAAAA,MAEV;AACOI,aAAAA;AAAAA,IAAAA,CACR;AAEDhB,sBAAkBiB,SAASF,QAAQ;AACnCZ,YAAQS,OAAO;AAAA,EAAA;AAIf,SAAAM,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQpB,SAASc,IAAKO,CAAM,MAAA;AACnB,eAAA;AAAA,UAAExB,IAAIwB;AAAAA,UAAGvB,OAAOuB;AAAAA,UAAGC,UAAU,CAAC,CAACnB,MAAMoB,KAAMC,CAAAA,QAAQA,QAAQH,CAAC;AAAA,QAAA;AAAA,MAAE,CACtE;AAAA,MACD,UAAUZ;AAAAA,MACV,WAAW;AAAA,MACX,aAAaV;AAAAA,IAAAA;AAAAA,EAAAA;AAGnB;AAEA,MAAA,WAAeN;;"}

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

@@ -9,15 +9,19 @@ const Text = ({
   param,
   data
 }) => {
+  const {
+    id,
+    label
+  } = param;
   const reactFlowInstance = ReactFlow.useReactFlow();
-  const [text, setText] = React.useState(data[param.id]);
-  const onTextChange = (val) => {
+  const [text, setText] = React.useState(data[id]);
+  const onTextChange = (event, val) => {
     const nodes = reactFlowInstance.getNodes();
     const newNodes = nodes.map((node) => {
       if (node.id === nodeId) {
         node.data = {
           ...node.data,
-          [param.id]: val
+          [id]: val
         };
       }
       return node;
@@ -25,7 +29,15 @@ const Text = ({
     reactFlowInstance.setNodes(newNodes);
     setText(val);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvInput, { label: param.label, value: text, onChange: (evt, val) => onTextChange(val) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    uikitReactCore.HvInput,
+    {
+      className: "nodrag",
+      label,
+      value: text,
+      onChange: onTextChange
+    }
+  );
 };
 const Text$1 = Text;
 exports.default = Text$1;

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

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../../../../../src/components/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvInput } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Text = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [text, setText] = useState(data[param.id]);\n\n  const onTextChange = (val) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: val };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setText(val);\n  };\n\n  return (\n    <HvInput\n      label={param.label}\n      value={text}\n      onChange={(evt, val) => onTextChange(val)}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","nodeId","param","data","reactFlowInstance","useReactFlow","text","setText","useState","id","onTextChange","val","nodes","getNodes","newNodes","map","node","setNodes","jsx","HvInput","label","evt"],"mappings":";;;;;;AAIA,MAAMA,OAAOA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;AACxC,QAAMC,oBAAoBC,UAAAA;AACpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,MAAAA,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAE/C,QAAMC,eAAgBC,CAAQ,QAAA;AACtBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE;AAAAA,QAAAA;AAAAA,MAC1C;AACOK,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBa,SAASH,QAAQ;AACnCP,YAAQI,GAAG;AAAA,EAAA;AAGb,SACGO,2BAAAA,IAAAC,eAAAA,SAAA,EACC,OAAOjB,MAAMkB,OACb,OAAOd,MACP,UAAU,CAACe,KAAKV,QAAQD,aAAaC,GAAG,EACxC,CAAA;AAEN;AAEA,MAAA,SAAeX;;"}
+{"version":3,"file":"Text.cjs","sources":["../../../../../../src/components/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    const nodes = reactFlowInstance.getNodes();\n\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [id]: val };\n      }\n      return node;\n    });\n\n    reactFlowInstance.setNodes(newNodes);\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":["Text","nodeId","param","data","id","label","reactFlowInstance","useReactFlow","text","setText","useState","onTextChange","event","val","nodes","getNodes","newNodes","map","node","setNodes","jsx","HvInput"],"mappings":";;;;;;AAYA,MAAMA,OAAOA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAgB,MAAM;AAC7C,QAAA;AAAA,IAAEC;AAAAA,IAAIC;AAAAA,EAAUH,IAAAA;AAEtB,QAAMI,oBAAoBC,UAAAA;AAE1B,QAAM,CAACC,MAAMC,OAAO,IAAIC,MAASP,SAAAA,KAAKC,EAAE,CAAC;AAEnCO,QAAAA,eAAyCA,CAACC,OAAOC,QAAQ;AACvDC,UAAAA,QAAQR,kBAAkBS;AAE1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKd,OAAOH,QAAQ;AACtBiB,aAAKf,OAAO;AAAA,UAAE,GAAGe,KAAKf;AAAAA,UAAM,CAACC,EAAE,GAAGS;AAAAA,QAAAA;AAAAA,MACpC;AACOK,aAAAA;AAAAA,IAAAA,CACR;AAEDZ,sBAAkBa,SAASH,QAAQ;AACnCP,YAAQI,GAAG;AAAA,EAAA;AAIX,SAAAO,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,OAAOb;AAAAA,MACP,UAAUG;AAAAA,IAAAA;AAAAA,EAAAA;AAGhB;AAEA,MAAA,SAAeX;;"}

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

@@ -12,6 +12,7 @@ const utils = require("./utils.cjs");
 const SidebarGroup = require("./SidebarGroup/SidebarGroup.cjs");
 const SidebarGroupItem = require("./SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs");
 const useFlowContext = require("../hooks/useFlowContext.cjs");
+const DraggableSidebarGroupItem = require("./SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
 const DEFAULT_LABELS = {
@@ -29,6 +30,7 @@ const HvFlowSidebar = ({
   classes: classesProp,
   labels: labelsProps,
   dragOverlayProps,
+  defaultGroupProps,
   ...others
 }) => {
   const {
@@ -39,8 +41,9 @@ const HvFlowSidebar = ({
     nodeTypes,
     setExpandedNodeGroups
   } = useFlowContext.useFlowContext();
-  const unfilteredGroups = React.useMemo(() => utils.buildGroups(nodeGroups, nodeTypes), [nodeGroups, nodeTypes]);
+  const unfilteredGroups = React.useMemo(() => utils.buildGroups(nodeGroups, nodeTypes, defaultGroupProps), [nodeGroups, nodeTypes, defaultGroupProps]);
   const [groups, setGroups] = React.useState(unfilteredGroups);
+  const [ndTypes, setNdTypes] = React.useState(nodeTypes);
   const [draggingLabel, setDraggingLabel] = React.useState(void 0);
   React.useEffect(() => {
     setGroups(unfilteredGroups);
@@ -66,19 +69,29 @@ const HvFlowSidebar = ({
     onDragStart: handleDragStart
   });
   const handleSearch = (event, value) => {
-    const gps = value ? Object.entries(unfilteredGroups).reduce((acc, curr) => {
-      const filteredNodes = curr[1].nodes.filter((obj) => obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase()));
-      const nodesCount = filteredNodes.length;
-      if (nodesCount > 0) {
-        acc[curr[0]] = {
-          ...curr[1],
-          nodes: filteredNodes
-        };
+    if (nodeGroups) {
+      const gps = value ? Object.entries(unfilteredGroups).reduce((acc, curr) => {
+        const filteredNodes = curr[1].nodes.filter((obj) => obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase()));
+        const nodesCount = filteredNodes.length;
+        if (nodesCount > 0) {
+          acc[curr[0]] = {
+            ...curr[1],
+            nodes: filteredNodes
+          };
+        }
+        return acc;
+      }, {}) : unfilteredGroups;
+      setGroups(gps);
+      setExpandedNodeGroups?.(value ? Object.keys(gps) : []);
+    } else if (nodeTypes) {
+      const filteredNodeTypes = {};
+      for (const [key, node] of Object.entries(nodeTypes)) {
+        if (node.meta?.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())) {
+          filteredNodeTypes[key] = node;
+        }
       }
-      return acc;
-    }, {}) : unfilteredGroups;
-    setGroups(gps);
-    setExpandedNodeGroups?.(value ? Object.keys(gps) : []);
+      setNdTypes(value ? filteredNodeTypes : nodeTypes);
+    }
   };
   const handleDebouncedSearch = debounce__default.default(handleSearch, 500);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -94,13 +107,15 @@ const HvFlowSidebar = ({
         /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvInput, { className: classes.searchRoot, type: "search", placeholder: labels?.searchPlaceholder, "aria-label": labels?.searchAriaLabel, "aria-controls": groupsElementId, "aria-owns": groupsElementId, onChange: handleDebouncedSearch, inputProps: {
           autoComplete: "off"
         } }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => {
+        nodeGroups ? /* @__PURE__ */ jsxRuntime.jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => {
           return /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup.HvFlowSidebarGroup, { id: obj[0], expandButtonProps: {
             "aria-label": labels?.expandGroupButtonAriaLabel
           }, itemProps: {
             "aria-roledescription": labels?.itemAriaRoleDescription
           }, ...obj[1] }, obj[0]);
-        }) })
+        }) }) : ndTypes && Object.entries(ndTypes).map((obj) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem, { id: obj[0], type: obj[0], label: obj[1]?.meta?.label || "", data: obj[1]?.meta?.data, "aria-roledescription": labels?.itemAriaRoleDescription, className: classes.nodeType }, obj[0]);
+        })
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { modifiers: [modifiers.restrictToWindowEdges], ...dragOverlayProps, children: draggingLabel ? /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport {\n  DndContextProps,\n  DragOverlay,\n  DragOverlayProps,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../hooks\";\nimport { buildGroups } from \"./utils\";\nimport { HvFlowSidebarGroupItem } from \"./SidebarGroup/SidebarGroupItem\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n  extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n  /** Sidebar title. */\n  title?: string;\n  /** Sidebar description. */\n  description?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarClasses;\n  /** Labels used on the sidebar. */\n  labels?: {\n    itemAriaRoleDescription?: string;\n    expandGroupButtonAriaLabel?: string;\n    searchPlaceholder?: string;\n    searchAriaLabel?: string;\n  };\n  /**\n   * Dnd Kit drag overlay props for customization.\n   *\n   * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n   */\n  dragOverlayProps?: DragOverlayProps;\n}\n\nconst DEFAULT_LABELS: HvFlowSidebarProps[\"labels\"] = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  dragOverlayProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  useEffect(() => {\n    setGroups(unfilteredGroups);\n  }, [unfilteredGroups]);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id, \"hvFlowSidebarDrawer\");\n  const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\n\n  // The sidebar is droppable to distinguish between the canvas and the sidebar\n  // Otherwise items dropped inside the sidebar will be added to the canvas\n  const { setNodeRef } = useDroppable({\n    id: drawerElementId,\n  });\n\n  const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n    if (event.active.data.current?.hvFlow) {\n      setDraggingLabel(event.active.data.current.hvFlow?.label);\n    }\n  };\n\n  const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n    setDraggingLabel(undefined);\n  };\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n    onDragStart: handleDragStart,\n  });\n\n  const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    const gps = value\n      ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n          // Filter nodes by search\n          const filteredNodes = curr[1].nodes.filter((obj) =>\n            obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n          );\n          const nodesCount = filteredNodes.length;\n\n          // Only show groups with nodes\n          if (nodesCount > 0) {\n            acc[curr[0]] = {\n              ...curr[1],\n              nodes: filteredNodes,\n            };\n          }\n\n          return acc;\n        }, {})\n      : unfilteredGroups;\n\n    setGroups(gps);\n    setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <>\n      <HvDrawer\n        BackdropComponent={undefined}\n        variant=\"persistent\"\n        classes={{\n          paper: classes.drawerPaper,\n        }}\n        showBackdrop={false}\n        anchor={anchor}\n        buttonTitle={buttonTitle}\n        {...others}\n      >\n        <div id={drawerElementId} ref={setNodeRef}>\n          <div className={classes.titleContainer}>\n            <Add role=\"none\" />\n            <HvTypography variant=\"title3\">{title}</HvTypography>\n          </div>\n          <div className={classes.contentContainer}>\n            <HvTypography className={classes.description}>\n              {description}\n            </HvTypography>\n            <HvInput\n              className={classes.searchRoot}\n              type=\"search\"\n              placeholder={labels?.searchPlaceholder}\n              aria-label={labels?.searchAriaLabel}\n              aria-controls={groupsElementId}\n              aria-owns={groupsElementId}\n              onChange={handleDebouncedSearch}\n              inputProps={{ autoComplete: \"off\" }}\n            />\n            <ul id={groupsElementId} className={classes.groupsContainer}>\n              {Object.entries(groups).map((obj) => {\n                return (\n                  <HvFlowSidebarGroup\n                    key={obj[0]}\n                    id={obj[0]}\n                    expandButtonProps={{\n                      \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                    }}\n                    itemProps={{\n                      \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                    }}\n                    {...obj[1]}\n                  />\n                );\n              })}\n            </ul>\n          </div>\n        </div>\n      </HvDrawer>\n      <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","dragOverlayProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","draggingLabel","setDraggingLabel","undefined","useEffect","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","useDndMonitor","onDragEnd","onDragStart","handleSearch","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","jsxs","Fragment","jsx","HvDrawer","paper","drawerPaper","titleContainer","Add","HvTypography","contentContainer","HvInput","searchRoot","autoComplete","groupsContainer","map","HvFlowSidebarGroup","DragOverlay","restrictToWindowEdges","HvFlowSidebarGroupItem"],"mappings":"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"}
+{"version":3,"file":"Sidebar.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport {\n  DndContextProps,\n  DragOverlay,\n  DragOverlayProps,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../hooks\";\nimport { buildGroups } from \"./utils\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\nimport { HvFlowNodeGroup } from \"../types\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n  extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n  /** Sidebar title. */\n  title?: string;\n  /** Sidebar description. */\n  description?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarClasses;\n  /** Labels used on the sidebar. */\n  labels?: {\n    itemAriaRoleDescription?: string;\n    expandGroupButtonAriaLabel?: string;\n    searchPlaceholder?: string;\n    searchAriaLabel?: string;\n  };\n  /**\n   * Dnd Kit drag overlay props for customization.\n   *\n   * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n   */\n  dragOverlayProps?: DragOverlayProps;\n  /** Props to be applied to the default nodes group. */\n  defaultGroupProps?: HvFlowNodeGroup;\n}\n\nconst DEFAULT_LABELS: HvFlowSidebarProps[\"labels\"] = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  dragOverlayProps,\n  defaultGroupProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes, defaultGroupProps),\n    [nodeGroups, nodeTypes, defaultGroupProps]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [ndTypes, setNdTypes] = useState(nodeTypes);\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  useEffect(() => {\n    setGroups(unfilteredGroups);\n  }, [unfilteredGroups]);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id, \"hvFlowSidebarDrawer\");\n  const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\n\n  // The sidebar is droppable to distinguish between the canvas and the sidebar\n  // Otherwise items dropped inside the sidebar will be added to the canvas\n  const { setNodeRef } = useDroppable({\n    id: drawerElementId,\n  });\n\n  const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n    if (event.active.data.current?.hvFlow) {\n      setDraggingLabel(event.active.data.current.hvFlow?.label);\n    }\n  };\n\n  const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n    setDraggingLabel(undefined);\n  };\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n    onDragStart: handleDragStart,\n  });\n\n  const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    if (nodeGroups) {\n      const gps = value\n        ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n            // Filter nodes by search\n            const filteredNodes = curr[1].nodes.filter((obj) =>\n              obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n            );\n            const nodesCount = filteredNodes.length;\n\n            // Only show groups with nodes\n            if (nodesCount > 0) {\n              acc[curr[0]] = {\n                ...curr[1],\n                nodes: filteredNodes,\n              };\n            }\n\n            return acc;\n          }, {})\n        : unfilteredGroups;\n\n      setGroups(gps);\n      setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n    } else if (nodeTypes) {\n      const filteredNodeTypes = {};\n      for (const [key, node] of Object.entries(nodeTypes)) {\n        if (\n          node.meta?.label\n            .toLocaleLowerCase()\n            .includes(value.toLocaleLowerCase())\n        ) {\n          filteredNodeTypes[key] = node;\n        }\n      }\n      setNdTypes(value ? filteredNodeTypes : nodeTypes);\n    }\n  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <>\n      <HvDrawer\n        BackdropComponent={undefined}\n        variant=\"persistent\"\n        classes={{\n          paper: classes.drawerPaper,\n        }}\n        showBackdrop={false}\n        anchor={anchor}\n        buttonTitle={buttonTitle}\n        {...others}\n      >\n        <div id={drawerElementId} ref={setNodeRef}>\n          <div className={classes.titleContainer}>\n            <Add role=\"none\" />\n            <HvTypography variant=\"title3\">{title}</HvTypography>\n          </div>\n          <div className={classes.contentContainer}>\n            <HvTypography className={classes.description}>\n              {description}\n            </HvTypography>\n            <HvInput\n              className={classes.searchRoot}\n              type=\"search\"\n              placeholder={labels?.searchPlaceholder}\n              aria-label={labels?.searchAriaLabel}\n              aria-controls={groupsElementId}\n              aria-owns={groupsElementId}\n              onChange={handleDebouncedSearch}\n              inputProps={{ autoComplete: \"off\" }}\n            />\n            {nodeGroups ? (\n              <ul id={groupsElementId} className={classes.groupsContainer}>\n                {Object.entries(groups).map((obj) => {\n                  return (\n                    <HvFlowSidebarGroup\n                      key={obj[0]}\n                      id={obj[0]}\n                      expandButtonProps={{\n                        \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                      }}\n                      itemProps={{\n                        \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                      }}\n                      {...obj[1]}\n                    />\n                  );\n                })}\n              </ul>\n            ) : (\n              ndTypes &&\n              Object.entries(ndTypes).map((obj) => {\n                return (\n                  <HvFlowDraggableSidebarGroupItem\n                    key={obj[0]}\n                    id={obj[0]}\n                    type={obj[0]}\n                    label={obj[1]?.meta?.label || \"\"}\n                    data={obj[1]?.meta?.data}\n                    aria-roledescription={labels?.itemAriaRoleDescription}\n                    className={classes.nodeType}\n                  />\n                );\n              })\n            )}\n          </div>\n        </div>\n      </HvDrawer>\n      <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","dragOverlayProps","defaultGroupProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","ndTypes","setNdTypes","draggingLabel","setDraggingLabel","undefined","useEffect","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","useDndMonitor","onDragEnd","onDragStart","handleSearch","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","toLocaleLowerCase","includes","nodesCount","length","keys","filteredNodeTypes","key","node","meta","handleDebouncedSearch","debounce","jsxs","Fragment","jsx","HvDrawer","paper","drawerPaper","titleContainer","Add","HvTypography","contentContainer","HvInput","searchRoot","autoComplete","groupsContainer","map","HvFlowSidebarGroup","HvFlowDraggableSidebarGroupItem","nodeType","DragOverlay","restrictToWindowEdges","HvFlowSidebarGroupItem"],"mappings":"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"}

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

@@ -27,6 +27,9 @@ const {
     flexDirection: "column",
     gap: uikitReactCore.theme.space.sm,
     listStyleType: "none"
+  },
+  nodeType: {
+    marginBottom: uikitReactCore.theme.space.xs
   }
 });
 exports.staticClasses = staticClasses;

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.styles.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n  drawerPaper: { width: \"360px\" },\n  titleContainer: {\n    display: \"flex\",\n    padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n  },\n  contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n  description: { color: theme.colors.secondary_60 },\n  searchRoot: {\n    paddingTop: theme.space.sm,\n    paddingBottom: theme.space.sm,\n  },\n  groupsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.sm,\n    listStyleType: \"none\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","drawerPaper","width","titleContainer","display","padding","theme","spacing","contentContainer","description","color","colors","secondary_60","searchRoot","paddingTop","space","sm","paddingBottom","groupsContainer","flexDirection","gap","listStyleType"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,iBAAiB;AAAA,EAC1EC,aAAa;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EAC9BC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,SAASC,eAAMC,MAAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACAC,kBAAkB;AAAA,IAAEH,SAASC,eAAMC,MAAAA,QAAQ,GAAG,MAAM,MAAM,IAAI;AAAA,EAAE;AAAA,EAChEE,aAAa;AAAA,IAAEC,OAAOJ,eAAAA,MAAMK,OAAOC;AAAAA,EAAa;AAAA,EAChDC,YAAY;AAAA,IACVC,YAAYR,eAAAA,MAAMS,MAAMC;AAAAA,IACxBC,eAAeX,eAAAA,MAAMS,MAAMC;AAAAA,EAC7B;AAAA,EACAE,iBAAiB;AAAA,IACfd,SAAS;AAAA,IACTe,eAAe;AAAA,IACfC,KAAKd,eAAAA,MAAMS,MAAMC;AAAAA,IACjBK,eAAe;AAAA,EACjB;AACF,CAAC;;;"}
+{"version":3,"file":"Sidebar.styles.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n  drawerPaper: { width: \"360px\" },\n  titleContainer: {\n    display: \"flex\",\n    padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n  },\n  contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n  description: { color: theme.colors.secondary_60 },\n  searchRoot: {\n    paddingTop: theme.space.sm,\n    paddingBottom: theme.space.sm,\n  },\n  groupsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.sm,\n    listStyleType: \"none\",\n  },\n  nodeType: {\n    marginBottom: theme.space.xs,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","drawerPaper","width","titleContainer","display","padding","theme","spacing","contentContainer","description","color","colors","secondary_60","searchRoot","paddingTop","space","sm","paddingBottom","groupsContainer","flexDirection","gap","listStyleType","nodeType","marginBottom","xs"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,iBAAiB;AAAA,EAC1EC,aAAa;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EAC9BC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,SAASC,eAAMC,MAAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACAC,kBAAkB;AAAA,IAAEH,SAASC,eAAMC,MAAAA,QAAQ,GAAG,MAAM,MAAM,IAAI;AAAA,EAAE;AAAA,EAChEE,aAAa;AAAA,IAAEC,OAAOJ,eAAAA,MAAMK,OAAOC;AAAAA,EAAa;AAAA,EAChDC,YAAY;AAAA,IACVC,YAAYR,eAAAA,MAAMS,MAAMC;AAAAA,IACxBC,eAAeX,eAAAA,MAAMS,MAAMC;AAAAA,EAC7B;AAAA,EACAE,iBAAiB;AAAA,IACfd,SAAS;AAAA,IACTe,eAAe;AAAA,IACfC,KAAKd,eAAAA,MAAMS,MAAMC;AAAAA,IACjBK,eAAe;AAAA,EACjB;AAAA,EACAC,UAAU;AAAA,IACRC,cAAcjB,eAAAA,MAAMS,MAAMS;AAAAA,EAC5B;AACF,CAAC;;;"}