@hitachivantara/uikit-react-lab 5.34.2 → 5.35.0

package/dist/cjs/Flow/DroppableFlow.cjs

@@ -11,7 +11,6 @@ const base = require("./base.cjs");
 const Flow_styles = require("./Flow.styles.cjs");
 const NodeMetaContext = require("./FlowContext/NodeMetaContext.cjs");
 const useFlowInstance = require("./hooks/useFlowInstance.cjs");
-const useFlowContext = require("./hooks/useFlowContext.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const ReactFlow__default = /* @__PURE__ */ _interopDefault(ReactFlow);
 const getNode = (nodes, nodeId) => {
@@ -36,8 +35,8 @@ const validateEdge = (nodes, edges, connection, nodeMetaRegistry) => {
     return false;
   const inputs = nodeMetaRegistry[targetId]?.inputs || [];
   const outputs = nodeMetaRegistry[sourceId]?.outputs || [];
-  const source = outputs.map((out) => out.outputs || out).flat().find((out) => out.id === sourceHandle);
-  const target = inputs.map((inp) => inp.inputs || inp).flat().find((inp) => inp.id === targetHandle);
+  const source = outputs.flatMap((out) => out.outputs || out).find((out) => out.id === sourceHandle);
+  const target = inputs.flatMap((inp) => inp.inputs || inp).find((inp) => inp.id === targetHandle);
   const sourceProvides = source?.provides || "";
   const targetAccepts = target?.accepts || [];
   const sourceMaxConnections = source?.maxConnections;
@@ -70,12 +69,12 @@ const HvDroppableFlow = ({
   onNodesChange: onNodesChangeProp,
   onEdgesChange: onEdgesChangeProp,
   defaultEdgeOptions: defaultEdgeOptionsProp,
+  nodeTypes,
   ...others
 }) => {
   const { classes, cx } = Flow_styles.useClasses(classesProp);
   const elementId = uikitReactCore.useUniqueId(id);
   const reactFlowInstance = useFlowInstance.useFlowInstance();
-  const { nodeTypes } = useFlowContext.useFlowContext();
   const [nodes, setNodes] = React.useState(initialNodes);
   const [edges, setEdges] = React.useState(initialEdges);
   const nodesRef = React.useRef(initialNodes);
@@ -104,7 +103,10 @@ const HvDroppableFlow = ({
         x: hvFlow?.x || 0,
         y: hvFlow?.y || 0
       });
-      const data = hvFlow?.data || {};
+      const data = {
+        nodeLabel: hvFlow?.label,
+        ...hvFlow?.data
+      };
       const newNode = {
         id: uid.uid(),
         position,

package/dist/cjs/Flow/Flow.cjs

@@ -7,7 +7,6 @@ const ReactFlow = require("reactflow");
 const DroppableFlow = require("./DroppableFlow.cjs");
 const FlowContext = require("./FlowContext/FlowContext.cjs");
 const HvFlow = ({
-  nodeTypes,
   nodeGroups,
   sidebar,
   defaultActions,
@@ -18,25 +17,17 @@ const HvFlow = ({
     core.useSensor(core.PointerSensor),
     core.useSensor(core.KeyboardSensor)
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    FlowContext.HvFlowProvider,
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, { nodeGroups, defaultActions, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    core.DndContext,
     {
-      nodeGroups,
-      nodeTypes,
-      defaultActions,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        core.DndContext,
-        {
-          sensors,
-          modifiers: [modifiers.restrictToWindowEdges],
-          ...dndContextProps,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DroppableFlow.HvDroppableFlow, { ...others }),
-            sidebar
-          ]
-        }
-      )
+      sensors,
+      modifiers: [modifiers.restrictToWindowEdges],
+      ...dndContextProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DroppableFlow.HvDroppableFlow, { ...others }),
+        sidebar
+      ]
     }
-  ) });
+  ) }) });
 };
 exports.HvFlow = HvFlow;

package/dist/cjs/Flow/FlowContext/FlowContext.cjs

@@ -6,20 +6,18 @@ const NodeMetaContext = require("./NodeMetaContext.cjs");
 const HvFlowContext = React.createContext({});
 const HvFlowProvider = ({
   nodeGroups,
-  nodeTypes,
   defaultActions,
   children
 }) => {
   const [expandedNodeGroups, setExpandedNodeGroups] = React.useState([]);
   const value = React.useMemo(
     () => ({
-      nodeTypes,
       nodeGroups,
       defaultActions,
       expandedNodeGroups,
       setExpandedNodeGroups
     }),
-    [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups]
+    [nodeGroups, defaultActions, expandedNodeGroups]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(NodeMetaContext.HvFlowNodeMetaProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(HvFlowContext.Provider, { value, children }) });
 };

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const css = require("@emotion/css");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const BaseNode = require("./BaseNode.cjs");
@@ -18,7 +17,6 @@ const HvFlowNode = ({
   id,
   type,
   headerItems,
-  description,
   actions,
   actionCallback,
   // TODO - remove in v6
@@ -27,34 +25,38 @@ const HvFlowNode = ({
   expanded = false,
   actionsIconOnly = true,
   params,
-  nodeDefaults,
   classes: classesProp,
   labels: labelsProps,
   children,
   expandParamsButtonProps,
   disableInlineEdit,
+  title: titleProp,
+  subtitle: subtitleProp,
+  description,
+  groupId,
+  color: colorProp,
+  icon: iconProp,
   ...props
 }) => {
   const { classes } = Node_styles.useClasses(classesProp);
-  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const [showParams, setShowParams] = React.useState(expanded);
+  const { nodeGroups, defaultActions } = useFlowContext.useFlowContext();
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const node = useFlowNode.useFlowNode();
   const { setNodeData } = useFlowNode.useFlowNodeUtils();
-  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext.useFlowContext();
-  const subtitle = node?.data.customNodeLabel || nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;
-  const groupId = nodeTypes?.[type].meta?.groupId;
   const inlineEditorWidth = actions === void 0 || Array.isArray(actions) && actions.length === 0 || maxVisibleActions === 0 ? "100%" : `calc(200px - calc(${maxVisibleActions} * 32px + ${uikitReactCore.theme.spacing(2)}))`;
-  const group = groupId && nodeGroups && nodeGroups[groupId] || void 0;
-  const groupLabel = group?.label || nodeDefaults?.title;
-  const icon = group?.icon || nodeDefaults?.icon;
-  const color = group?.color || nodeDefaults?.color;
+  const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
+  const title = titleProp || nodeGroup?.label;
+  const icon = iconProp || nodeGroup?.icon;
+  const color = colorProp || nodeGroup?.color;
+  const subtitle = subtitleProp || node?.data.nodeLabel;
   const hasParams = !!(params && params.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     BaseNode.HvFlowBaseNode,
     {
       id,
       type,
-      title: groupLabel,
+      title,
       icon,
       color,
       nodeActions: defaultActions,
@@ -83,14 +85,12 @@ const HvFlowNode = ({
             {
               defaultValue: subtitle,
               showIcon: true,
+              style: { width: inlineEditorWidth },
               classes: {
                 root: classes.inlineEditRoot,
-                button: classes.inlineEditButton,
-                inputRoot: css.css({
-                  width: inlineEditorWidth
-                })
+                button: classes.inlineEditButton
               },
-              onBlur: (evt, value) => setNodeData((prev) => ({ ...prev, customNodeLabel: value }))
+              onBlur: (evt, value) => setNodeData((prev) => ({ ...prev, nodeLabel: value }))
             }
           )),
           actions && /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -4,11 +4,9 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const core = require("@dnd-kit/core");
 const modifiers = require("@dnd-kit/modifiers");
-const usehooksTs = require("usehooks-ts");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const Sidebar_styles = require("./Sidebar.styles.cjs");
-const utils = require("./utils.cjs");
 const SidebarGroup = require("./SidebarGroup/SidebarGroup.cjs");
 const SidebarGroupItem = require("./SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs");
 const useFlowContext = require("../hooks/useFlowContext.cjs");
@@ -25,30 +23,20 @@ const HvFlowSidebar = ({
   description,
   anchor = "right",
   buttonTitle = "Close",
+  flatten = false,
   classes: classesProp,
   labels: labelsProps,
   dragOverlayProps,
-  defaultGroupProps,
   ...others
 }) => {
   const { classes } = Sidebar_styles.useClasses(classesProp);
-  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext.useFlowContext();
-  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);
-  }, [unfilteredGroups]);
+  const { nodeGroups, setExpandedNodeGroups } = useFlowContext.useFlowContext();
+  const [filterValue, setFilterValue] = React.useState("");
+  const [draggingLabel, setDraggingLabel] = React.useState();
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const drawerElementId = uikitReactCore.useUniqueId(id);
-  const groupsElementId = uikitReactCore.useUniqueId(id);
-  const { setNodeRef } = core.useDroppable({
-    id: drawerElementId
-  });
+  const groupsElementId = uikitReactCore.useUniqueId();
+  const { setNodeRef } = core.useDroppable({ id: drawerElementId });
   const handleDragStart = (event) => {
     if (event.active.data.current?.hvFlow) {
       setDraggingLabel(event.active.data.current.hvFlow?.label);
@@ -61,34 +49,29 @@ const HvFlowSidebar = ({
     onDragEnd: handleDragEnd,
     onDragStart: handleDragStart
   });
-  const handleSearch = (event, value) => {
-    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 filteredGroups = React.useMemo(() => {
+    if (!filterValue || !nodeGroups)
+      return nodeGroups || {};
+    return filterValue ? Object.entries(nodeGroups).reduce(
+      (acc, [groupId, group]) => {
+        const filteredItems = (group.items || []).filter(
+          (item) => item.label.toLowerCase().includes(filterValue.toLowerCase())
         );
-        const nodesCount = filteredNodes.length;
-        if (nodesCount > 0) {
-          acc[curr[0]] = {
-            ...curr[1],
-            nodes: filteredNodes
+        const itemsCount = Object.keys(filteredItems).length;
+        if (itemsCount > 0) {
+          acc[groupId] = {
+            ...group,
+            items: filteredItems
           };
         }
         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;
-        }
-      }
-      setNdTypes(value ? filteredNodeTypes : nodeTypes);
-    }
-  };
-  const handleDebouncedSearch = usehooksTs.useDebounceCallback(handleSearch, 500);
+      },
+      {}
+    ) : nodeGroups;
+  }, [filterValue, nodeGroups]);
+  React.useEffect(() => {
+    setExpandedNodeGroups?.(filterValue ? Object.keys(filteredGroups) : []);
+  }, [filterValue, filteredGroups, setExpandedNodeGroups]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     uikitReactCore.HvDrawer,
     {
@@ -118,39 +101,36 @@ const HvFlowSidebar = ({
                 "aria-label": labels?.searchAriaLabel,
                 "aria-controls": groupsElementId,
                 "aria-owns": groupsElementId,
-                onChange: handleDebouncedSearch,
+                onChange: (evt, val) => setFilterValue(val.trim()),
                 inputProps: { autoComplete: "off" }
               }
             ),
-            nodeGroups ? /* @__PURE__ */ jsxRuntime.jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => {
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(filteredGroups).map(([groupId, group]) => {
+              if (flatten) {
+                return (group.items || []).map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem,
+                  {
+                    "aria-roledescription": labels?.itemAriaRoleDescription,
+                    ...item
+                  },
+                  `${item.nodeType}-${i}`
+                ));
+              }
               return /* @__PURE__ */ jsxRuntime.jsx(
                 SidebarGroup.HvFlowSidebarGroup,
                 {
-                  id: obj[0],
+                  id: groupId,
                   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
+                  ...group
                 },
-                obj[0]
+                groupId
               );
-            })
+            }) })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { modifiers: [modifiers.restrictToWindowEdges], ...dragOverlayProps, children: draggingLabel ? /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })

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

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

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs

@@ -11,7 +11,7 @@ const DraggableSidebarGroupItem = require("./SidebarGroupItem/DraggableSidebarGr
 const HvFlowSidebarGroup = ({
   id,
   label,
-  nodes,
+  items = [],
   color,
   description,
   icon,
@@ -22,19 +22,19 @@ const HvFlowSidebarGroup = ({
   const { classes, cx, css } = SidebarGroup_styles.useClasses(classesProp);
   const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext.useFlowContext();
   const opened = React.useMemo(
-    () => !!expandedNodeGroups?.find((groupId) => groupId === id),
+    () => !!expandedNodeGroups?.find((group) => group === id),
     [expandedNodeGroups, id]
   );
   const handleClick = React.useCallback(() => {
     setExpandedNodeGroups?.(
-      (prev) => opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]
+      (prev) => opened ? prev.filter((group) => id !== group) : [...prev, id]
     );
   }, [id, opened, setExpandedNodeGroups]);
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx(css({ borderColor: uikitStyles.getColor(color) }), classes.root), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "p", variant: "title4", children: nodes.length > 1 ? `${label} (${nodes.length})` : label })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, role: "presentation", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "p", variant: "title4", children: Object.keys(items).length > 1 ? `${label} (${Object.keys(items).length})` : label })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         uikitReactCore.HvButton,
@@ -48,13 +48,13 @@ const HvFlowSidebarGroup = ({
       )
     ] }),
     description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.descriptionContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: description }) }),
-    opened && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsxRuntime.jsx(
+    opened && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.itemsContainer, children: Object.entries(items).map(([itemId, item]) => /* @__PURE__ */ jsxRuntime.jsx(
       DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem,
       {
         ...itemProps,
-        ...obj
+        ...item
       },
-      obj.type
+      itemId
     )) })
   ] });
 };

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs

@@ -7,20 +7,20 @@ const utils = require("@mui/material/utils");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const SidebarGroupItem = require("./SidebarGroupItem.cjs");
 const HvFlowDraggableSidebarGroupItem = ({
-  id,
+  id: idProp,
   label,
-  type,
+  nodeType,
   data,
   ...others
 }) => {
   const itemRef = React.useRef(null);
-  const elementId = uikitReactCore.useUniqueId(id);
+  const id = uikitReactCore.useUniqueId(idProp);
   const { attributes, listeners, setNodeRef, isDragging, transform } = core.useDraggable({
-    id: elementId,
+    id,
     data: {
       hvFlow: {
         // Needed to know which item is being dragged and dropped
-        type,
+        type: nodeType,
         // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow
         label,
         // Item position: used to position the item when dropped

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs

@@ -5,32 +5,31 @@ const React = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const SidebarGroupItem_styles = require("./SidebarGroupItem.styles.cjs");
-const HvFlowSidebarGroupItem = React.forwardRef(
-  ({
+const HvFlowSidebarGroupItem = React.forwardRef((props, ref) => {
+  const {
     label,
     isDragging,
     classes: classesProp,
     className,
     ...others
-  }, ref) => {
-    const { classes, cx } = SidebarGroupItem_styles.useClasses(classesProp);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: cx(
-          classes.root,
-          { [classes.dragging]: isDragging },
-          className
-        ),
-        ...others,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Drag, {})
-        ]
-      }
-    );
-  }
-);
+  } = props;
+  const { classes, cx } = SidebarGroupItem_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cx(
+        classes.root,
+        { [classes.dragging]: isDragging },
+        className
+      ),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Drag, {})
+      ]
+    }
+  );
+});
 exports.flowSidebarGroupItemClasses = SidebarGroupItem_styles.staticClasses;
 exports.HvFlowSidebarGroupItem = HvFlowSidebarGroupItem;

package/dist/esm/Flow/DroppableFlow.js

@@ -10,7 +10,6 @@ import { useClasses } from "./Flow.styles.js";
 import { staticClasses } from "./Flow.styles.js";
 import { useNodeMetaRegistry } from "./FlowContext/NodeMetaContext.js";
 import { useFlowInstance } from "./hooks/useFlowInstance.js";
-import { useFlowContext } from "./hooks/useFlowContext.js";
 const getNode = (nodes, nodeId) => {
   return nodes.find((n) => n.id === nodeId);
 };
@@ -33,8 +32,8 @@ const validateEdge = (nodes, edges, connection, nodeMetaRegistry) => {
     return false;
   const inputs = nodeMetaRegistry[targetId]?.inputs || [];
   const outputs = nodeMetaRegistry[sourceId]?.outputs || [];
-  const source = outputs.map((out) => out.outputs || out).flat().find((out) => out.id === sourceHandle);
-  const target = inputs.map((inp) => inp.inputs || inp).flat().find((inp) => inp.id === targetHandle);
+  const source = outputs.flatMap((out) => out.outputs || out).find((out) => out.id === sourceHandle);
+  const target = inputs.flatMap((inp) => inp.inputs || inp).find((inp) => inp.id === targetHandle);
   const sourceProvides = source?.provides || "";
   const targetAccepts = target?.accepts || [];
   const sourceMaxConnections = source?.maxConnections;
@@ -67,12 +66,12 @@ const HvDroppableFlow = ({
   onNodesChange: onNodesChangeProp,
   onEdgesChange: onEdgesChangeProp,
   defaultEdgeOptions: defaultEdgeOptionsProp,
+  nodeTypes,
   ...others
 }) => {
   const { classes, cx } = useClasses(classesProp);
   const elementId = useUniqueId(id);
   const reactFlowInstance = useFlowInstance();
-  const { nodeTypes } = useFlowContext();
   const [nodes, setNodes] = useState(initialNodes);
   const [edges, setEdges] = useState(initialEdges);
   const nodesRef = useRef(initialNodes);
@@ -101,7 +100,10 @@ const HvDroppableFlow = ({
         x: hvFlow?.x || 0,
         y: hvFlow?.y || 0
       });
-      const data = hvFlow?.data || {};
+      const data = {
+        nodeLabel: hvFlow?.label,
+        ...hvFlow?.data
+      };
       const newNode = {
         id: uid(),
         position,

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

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { Global } from \"@emotion/react\";\nimport ReactFlow, {\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  Connection,\n  Edge,\n  EdgeChange,\n  MarkerType,\n  Node,\n  NodeChange,\n  ReactFlowProps,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowStyles } from \"./base\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\nimport { useFlowContext, useFlowInstance } from \"./hooks\";\nimport {\n  HvFlowNodeInputGroup,\n  HvFlowNodeMetaRegistry,\n  HvFlowNodeOutputGroup,\n} from \"./types\";\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  connection: Connection,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry,\n) => {\n  const {\n    source: sourceId,\n    sourceHandle,\n    target: targetId,\n    targetHandle,\n  } = connection;\n\n  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n  const sourceNode = getNode(nodes, sourceId);\n  const targetNode = getNode(nodes, targetId);\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[targetId]?.inputs || [];\n  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n  const source = outputs\n    .map((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n    .flat()\n    .find((out) => out.id === sourceHandle);\n  const target = inputs\n    .map((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n    .flat()\n    .find((inp) => inp.id === targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) => edg.target === targetId && edg.targetHandle === targetHandle,\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) => edg.source === sourceId && edg.sourceHandle === 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);\n\n  const reactFlowInstance = useFlowInstance();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n  // Keeping track of nodes and edges for onFlowChange since useState is async\n  const nodesRef = useRef(initialNodes);\n  const edgesRef = useRef(initialEdges);\n\n  const updateNodes = (nds: Node[]) => {\n    setNodes(nds);\n    nodesRef.current = nds;\n  };\n\n  const updateEdges = (eds: Edge[]) => {\n    setEdges(eds);\n    edgesRef.current = eds;\n  };\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`,\n          );\n        }\n        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      updateNodes(nodes.concat(newNode));\n    },\n    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance],\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (nds: Node[], eds: Edge[]) => {\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, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onConnectProp?.(connection);\n    },\n    [handleFlowChange, onConnectProp],\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodesRef.current);\n      updateNodes(nds);\n\n      handleFlowChange(nds, edgesRef.current);\n      onNodesChangeProp?.(changes);\n    },\n    [handleFlowChange, onNodesChangeProp],\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [handleFlowChange, onEdgesChangeProp],\n  );\n\n  const { registry } = useNodeMetaRegistry();\n\n  const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { Global } from \"@emotion/react\";\nimport ReactFlow, {\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  Connection,\n  Edge,\n  EdgeChange,\n  MarkerType,\n  Node,\n  NodeChange,\n  ReactFlowProps,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowStyles } from \"./base\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\nimport { useFlowInstance } from \"./hooks\";\nimport {\n  HvFlowNodeInputGroup,\n  HvFlowNodeMetaRegistry,\n  HvFlowNodeOutputGroup,\n  HvFlowNodeTypes,\n} from \"./types\";\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 types. */\n  nodeTypes?: HvFlowNodeTypes<NodeData>;\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  connection: Connection,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry,\n) => {\n  const {\n    source: sourceId,\n    sourceHandle,\n    target: targetId,\n    targetHandle,\n  } = connection;\n\n  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n  const sourceNode = getNode(nodes, sourceId);\n  const targetNode = getNode(nodes, targetId);\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[targetId]?.inputs || [];\n  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n  const source = outputs\n    .flatMap((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n    .find((out) => out.id === sourceHandle);\n  const target = inputs\n    .flatMap((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n    .find((inp) => inp.id === targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) => edg.target === targetId && edg.targetHandle === targetHandle,\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) => edg.source === sourceId && edg.sourceHandle === 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  nodeTypes,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const reactFlowInstance = useFlowInstance();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n  // Keeping track of nodes and edges for onFlowChange since useState is async\n  const nodesRef = useRef(initialNodes);\n  const edgesRef = useRef(initialEdges);\n\n  const updateNodes = (nds: Node[]) => {\n    setNodes(nds);\n    nodesRef.current = nds;\n  };\n\n  const updateEdges = (eds: Edge[]) => {\n    setEdges(eds);\n    edgesRef.current = eds;\n  };\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`,\n          );\n        }\n        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = {\n        nodeLabel: hvFlow?.label,\n        ...hvFlow?.data,\n      };\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      updateNodes(nodes.concat(newNode));\n    },\n    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance],\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (nds: Node[], eds: Edge[]) => {\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, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onConnectProp?.(connection);\n    },\n    [handleFlowChange, onConnectProp],\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodesRef.current);\n      updateNodes(nds);\n\n      handleFlowChange(nds, edgesRef.current);\n      onNodesChangeProp?.(changes);\n    },\n    [handleFlowChange, onNodesChangeProp],\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [handleFlowChange, onEdgesChangeProp],\n  );\n\n  const { registry } = useNodeMetaRegistry();\n\n  const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Flow/Flow.js

@@ -5,7 +5,6 @@ import { ReactFlowProvider } from "reactflow";
 import { HvDroppableFlow } from "./DroppableFlow.js";
 import { HvFlowProvider } from "./FlowContext/FlowContext.js";
 const HvFlow = ({
-  nodeTypes,
   nodeGroups,
   sidebar,
   defaultActions,
@@ -16,26 +15,18 @@ const HvFlow = ({
     useSensor(PointerSensor),
     useSensor(KeyboardSensor)
   );
-  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
-    HvFlowProvider,
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(HvFlowProvider, { nodeGroups, defaultActions, children: /* @__PURE__ */ jsxs(
+    DndContext,
     {
-      nodeGroups,
-      nodeTypes,
-      defaultActions,
-      children: /* @__PURE__ */ jsxs(
-        DndContext,
-        {
-          sensors,
-          modifiers: [restrictToWindowEdges],
-          ...dndContextProps,
-          children: [
-            /* @__PURE__ */ jsx(HvDroppableFlow, { ...others }),
-            sidebar
-          ]
-        }
-      )
+      sensors,
+      modifiers: [restrictToWindowEdges],
+      ...dndContextProps,
+      children: [
+        /* @__PURE__ */ jsx(HvDroppableFlow, { ...others }),
+        sidebar
+      ]
     }
-  ) });
+  ) }) });
 };
 export {
   HvFlow