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

@hitachivantara/uikit-react-lab 5.6.0 → 5.7.0

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

Files changed (18) hide show

package/dist/cjs/components/Flow/Flow.cjs CHANGED Viewed

@@ -12,6 +12,7 @@ const HvFlow = ({
   nodeTypes,
   nodeGroups,
   sidebar,
+  defaultActions,
   dndContextProps,
   ...others
 }) => {
@@ -26,7 +27,7 @@ const HvFlow = ({
   const handleDragEnd = () => {
     setDraggingLabel(void 0);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, { nodeGroups, nodeTypes, children: /* @__PURE__ */ jsxRuntime.jsxs(core.DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, sensors, modifiers: [modifiers.restrictToWindowEdges], ...dndContextProps, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, { nodeGroups, nodeTypes, defaultActions, children: /* @__PURE__ */ jsxRuntime.jsxs(core.DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, sensors, modifiers: [modifiers.restrictToWindowEdges], ...dndContextProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx(DroppableFlow.HvDroppableFlow, { ...others }),
     sidebar,
     /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { modifiers: [modifiers.restrictToWindowEdges], children: draggingLabel ? /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })

package/dist/cjs/components/Flow/Flow.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Flow.cjs","sources":["../../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n DndContext,\n DndContextProps,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowSidebarGroupItem } from \"./Sidebar/SidebarGroup/SidebarGroupItem\";\n\nexport interface HvFlowProps<\n NodeData = any,\n NodeType extends string \| undefined = string \| undefined,\n NodeGroups extends keyof any = string\n> extends HvDroppableFlowProps<NodeData, NodeType> {\n /** Flow nodes groups. /\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /* Flow nodes types. /\n nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n /* Flow sidebar. /\n sidebar?: React.ReactNode;\n /\n Dnd Kit context props. This should be used for accessibility purposes.\n \n More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n /\n dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/\n Flow component to build interactive node-based UIs.\n \n This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n \n DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n nodeTypes,\n nodeGroups,\n sidebar,\n dndContextProps,\n ...others\n}: HvFlowProps) => {\n const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor)\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 // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n // HvFlowContext is our custom internal context.\n return (\n <ReactFlowProvider>\n <HvFlowProvider nodeGroups={nodeGroups} nodeTypes={nodeTypes}>\n <DndContext\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n modifiers={[restrictToWindowEdges]}\n {...dndContextProps}\n >\n <HvDroppableFlow {...others} />\n {sidebar}\n <DragOverlay modifiers={[restrictToWindowEdges]}>\n {draggingLabel ? (\n <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n ) : null}\n </DragOverlay>\n </DndContext>\n </HvFlowProvider>\n </ReactFlowProvider>\n );\n};\n"],"names":["HvFlow","nodeTypes","nodeGroups","sidebar","dndContextProps","others","draggingLabel","setDraggingLabel","useState","undefined","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","ReactFlowProvider","jsx","HvFlowProvider","DndContext","restrictToWindowEdges","HvDroppableFlow","DragOverlay","HvFlowSidebarGroupItem"],"mappings":";;;;;;;;;;~~AA+CO~~,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,MAAAA,SAASC,MAAS;AAE5D,QAAMC,UAAUC,KAAAA,WACdC,KAAAA,UAAUC,KAAa,aAAA,GACvBD,KAAAA,UAAUE,KAAc,cAAA,CAC1B;AAEA,QAAMC,kBAAmDC,CAAU,UAAA;;AACjE,SAAIA,WAAMC,OAAOC,KAAKC,YAAlBH,mBAA2BI,QAAQ;AACrCb,wBAAiBS,WAAMC,OAAOC,KAAKC,QAAQC,WAA1BJ,mBAAkCK,KAAK;AAAA,IAC1D;AAAA,EAAA;AAGF,QAAMC,gBAA8CA,MAAM;AACxDf,qBAAiBE,MAAS;AAAA,EAAA;AAK5B,wCACGc,UAAAA,mBACC,EAAA,UAAAC,2BAAA,IAACC,~~8BAAe~~,~~YAAwB~~,~~WACtC~~,~~0CAACC~~,~~KAAAA~~,~~YACC~~,~~EAAA~~,~~aAAaX~~,iBACb,WAAWO,eACX,SACA,WAAW,~~CAACK,+BAAqB~~,GACjC,~~GAAIvB~~,iBAEJ,UAAA;AAAA,IAACoB,2BAAAA,~~IAAAI~~,cAAA,iBAAA,EAAgB,~~GAAIvB~~,QAAO;AAAA,~~IAC3BF~~;AAAAA,~~IACAqB~~,2BAAA,~~IAAAK~~,KAAA,aAAA,EAAY,WAAW,CAACF,UAAAA,qBAAqB,~~GAC3CrB~~,UAAAA,gBACEkB,2BAAAA,~~IAAAM~~,iBAAAA,wBAAA,EAAuB,~~OAAOxB~~,eAAe,YAAU,KAAA,CAAA,IACtD,MACN;AAAA,EAAA,GACF,GACF,EACF,CAAA;AAEJ;;"}
1	+ {"version":3,"file":"Flow.cjs","sources":["../../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n DndContext,\n DndContextProps,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvActionGeneric } from \"@hitachivantara/uikit-react-core\";\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowSidebarGroupItem } from \"./Sidebar/SidebarGroup/SidebarGroupItem\";\n\nexport interface HvFlowProps<\n NodeData = any,\n NodeType extends string \| undefined = string \| undefined,\n NodeGroups extends keyof any = string\n> extends HvDroppableFlowProps<NodeData, NodeType> {\n /** Flow nodes groups. /\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /* Flow nodes types. /\n nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n /* Flow sidebar. /\n sidebar?: React.ReactNode;\n /* Flow default actions. /\n defaultActions?: HvActionGeneric[];\n /\n Dnd Kit context props. This should be used for accessibility purposes.\n \n More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n /\n dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/\n Flow component to build interactive node-based UIs.\n \n This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n \n DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n nodeTypes,\n nodeGroups,\n sidebar,\n defaultActions,\n dndContextProps,\n ...others\n}: HvFlowProps) => {\n const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor)\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 // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n // HvFlowContext is our custom internal context.\n return (\n <ReactFlowProvider>\n <HvFlowProvider\n nodeGroups={nodeGroups}\n nodeTypes={nodeTypes}\n defaultActions={defaultActions}\n >\n <DndContext\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n modifiers={[restrictToWindowEdges]}\n {...dndContextProps}\n >\n <HvDroppableFlow {...others} />\n {sidebar}\n <DragOverlay modifiers={[restrictToWindowEdges]}>\n {draggingLabel ? (\n <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n ) : null}\n </DragOverlay>\n </DndContext>\n </HvFlowProvider>\n </ReactFlowProvider>\n );\n};\n"],"names":["HvFlow","nodeTypes","nodeGroups","sidebar","defaultActions","dndContextProps","others","draggingLabel","setDraggingLabel","useState","undefined","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","ReactFlowProvider","jsx","HvFlowProvider","jsxs","DndContext","restrictToWindowEdges","HvDroppableFlow","DragOverlay","HvFlowSidebarGroupItem"],"mappings":";;;;;;;;;;AAkDO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,MAAAA,SAASC,MAAS;AAE5D,QAAMC,UAAUC,KAAAA,WACdC,KAAAA,UAAUC,KAAa,aAAA,GACvBD,KAAAA,UAAUE,KAAc,cAAA,CAC1B;AAEA,QAAMC,kBAAmDC,CAAU,UAAA;;AACjE,SAAIA,WAAMC,OAAOC,KAAKC,YAAlBH,mBAA2BI,QAAQ;AACrCb,wBAAiBS,WAAMC,OAAOC,KAAKC,QAAQC,WAA1BJ,mBAAkCK,KAAK;AAAA,IAC1D;AAAA,EAAA;AAGF,QAAMC,gBAA8CA,MAAM;AACxDf,qBAAiBE,MAAS;AAAA,EAAA;AAK5B,wCACGc,UAAAA,mBACC,EAAA,UAAAC,2BAAA,IAACC,8BACC,YACA,WACA,gBAEA,UAACC,2BAAA,KAAAC,iBAAA,EACC,aAAaZ,iBACb,WAAWO,eACX,SACA,WAAW,CAACM,UAAqB,qBAAA,GACjC,GAAIxB,iBAEJ,UAAA;AAAA,IAACoB,2BAAAA,IAAAK,cAAA,iBAAA,EAAgB,GAAIxB,QAAO;AAAA,IAC3BH;AAAAA,IACAsB,2BAAA,IAAAM,KAAA,aAAA,EAAY,WAAW,CAACF,UAAAA,qBAAqB,GAC3CtB,UAAAA,gBACEkB,2BAAAA,IAAAO,iBAAAA,wBAAA,EAAuB,OAAOzB,eAAe,YAAU,KAAA,CAAA,IACtD,MACN;AAAA,EAAA,GACF,GACF,EACF,CAAA;AAEJ;;"}

package/dist/cjs/components/Flow/FlowContext/FlowContext.cjs CHANGED Viewed

@@ -6,15 +6,17 @@ const HvFlowContext = React.createContext({});
 const HvFlowProvider = ({
   nodeGroups,
   nodeTypes,
+  defaultActions,
   children
 }) => {
   const [expandedNodeGroups, setExpandedNodeGroups] = React.useState([]);
   const value = React.useMemo(() => ({
     nodeTypes,
     nodeGroups,
+    defaultActions,
     expandedNodeGroups,
     setExpandedNodeGroups
-  }), [nodeGroups, nodeTypes, expandedNodeGroups]);
+  }), [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups]);
   return /* @__PURE__ */ jsxRuntime.jsx(HvFlowContext.Provider, { value, children });
 };
 const useFlowContext = () => React.useContext(HvFlowContext);

package/dist/cjs/components/Flow/FlowContext/FlowContext.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowContext.cjs","sources":["../../../../../src/components/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n Dispatch,\n SetStateAction,\n createContext,\n useContext,\n useMemo,\n useState,\n} from \"react\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n /** Flow nodes types. /\n nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n /* Flow nodes groups. /\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /* Flow nodes groups expanded on sidebar. /\n expandedNodeGroups?: string[];\n /* Function to set `expandedNodeGroups`. /\n setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n /* Flow nodes types. /\n nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n /* Flow nodes groups. /\n nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n /* Children. */\n children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n nodeGroups,\n nodeTypes,\n children,\n}: HvFlowProviderProps) => {\n const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n const value = useMemo(\n () => ({\n nodeTypes,\n nodeGroups,\n expandedNodeGroups,\n setExpandedNodeGroups,\n }),\n [nodeGroups, ~~nodeTypes~~, expandedNodeGroups]\n );\n\n return (\n <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n );\n};\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":["HvFlowContext","createContext","HvFlowProvider","nodeGroups","nodeTypes","children","expandedNodeGroups","setExpandedNodeGroups","useState","value","useMemo","jsx","useFlowContext","useContext"],"mappings":";;;;~~AAsBaA~~,MAAAA,gBAAgBC,MAAkC,cAAA,EAAE;~~AAW1D~~,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,MAAAA,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,~~IACLN~~;AAAAA,IACAD;AAAAA,~~IACAG~~;AAAAA,IACAC;AAAAA,~~EAEF~~,~~IAAA~~,CAACJ,~~YAAYC~~,~~WAAWE~~,kBAAkB,~~CAC5C~~;AAEA,SACGK,2BAAAA,IAAA,cAAc,UAAd,EAAuB,OAAeN,SAAS,CAAA;AAEpD;AAEaO,MAAAA,iBAAiBA,MAAMC,MAAAA,~~WAAWb~~,aAAa;;;;"}
1	+ {"version":3,"file":"FlowContext.cjs","sources":["../../../../../src/components/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import { HvActionGeneric } from \"@hitachivantara/uikit-react-core\";\nimport {\n Dispatch,\n SetStateAction,\n createContext,\n useContext,\n useMemo,\n useState,\n} from \"react\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n /** Flow nodes types. /\n nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n /* Flow nodes groups. /\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /* Flow nodes groups expanded on sidebar. /\n expandedNodeGroups?: string[];\n /* Flow default actions. /\n defaultActions?: HvActionGeneric[];\n /* Function to set `expandedNodeGroups`. /\n setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n /* Flow nodes types. /\n nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n /* Flow nodes groups. /\n nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n /* Flow default actions. /\n defaultActions?: HvActionGeneric[];\n /* Children. */\n children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n nodeGroups,\n nodeTypes,\n defaultActions,\n children,\n}: HvFlowProviderProps) => {\n const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n const value = useMemo(\n () => ({\n nodeTypes,\n nodeGroups,\n defaultActions,\n expandedNodeGroups,\n setExpandedNodeGroups,\n }),\n [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups]\n );\n\n return (\n <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n );\n};\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":["HvFlowContext","createContext","HvFlowProvider","nodeGroups","nodeTypes","defaultActions","children","expandedNodeGroups","setExpandedNodeGroups","useState","value","useMemo","jsx","useFlowContext","useContext"],"mappings":";;;;AAyBaA,MAAAA,gBAAgBC,MAAkC,cAAA,EAAE;AAa1D,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,MAAAA,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IACLP;AAAAA,IACAD;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAC;AAAAA,EAAAA,IAEF,CAACJ,WAAWD,YAAYE,gBAAgBE,kBAAkB,CAC5D;AAEA,SACGK,2BAAAA,IAAA,cAAc,UAAd,EAAuB,OAAeN,SAAS,CAAA;AAEpD;AAEaO,MAAAA,iBAAiBA,MAAMC,MAAAA,WAAWd,aAAa;;;;"}

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

@@ -20,15 +20,18 @@ const isInputConnected = (id, type, idx, edges) => {
 const HvFlowNode = ({
   id,
   type,
-  title,
   description,
   expanded = false,
   params,
+  actions,
+  actionCallback,
+  maxVisibleActions = 1,
   classes: classesProp,
   className
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const [showParams, setShowParams] = React.useState(expanded);
+  const [showActions, setShowActions] = React.useState(false);
   const reactFlowInstance = ReactFlow.useReactFlow();
   const {
     classes,
@@ -37,15 +40,17 @@ const HvFlowNode = ({
   } = Node_styles.useClasses(classesProp);
   const {
     nodeGroups,
-    nodeTypes
+    nodeTypes,
+    defaultActions
   } = FlowContext.useFlowContext();
   const edges = ReactFlow.useStore((s) => s.edges);
   const nodes = ReactFlow.useStore((s) => s.getNodes());
   const node = nodes.find((n) => n.id === id);
   const groupId = (_a = nodeTypes == null ? void 0 : nodeTypes[type].meta) == null ? void 0 : _a.groupId;
+  const title = (_b = nodeTypes == null ? void 0 : nodeTypes[type].meta) == null ? void 0 : _b.label;
   const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;
-  const inputs = (_c = (_b = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _b.meta) == null ? void 0 : _c.inputs;
-  const outputs = (_e = (_d = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _d.meta) == null ? void 0 : _e.outputs;
+  const inputs = (_d = (_c = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _c.meta) == null ? void 0 : _d.inputs;
+  const outputs = (_f = (_e = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _e.meta) == null ? void 0 : _f.outputs;
   const icon = groupId && nodeGroups && nodeGroups[groupId].icon;
   const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;
   const color = uikitStyles.getColor(colorProp);
@@ -62,10 +67,39 @@ const HvFlowNode = ({
     });
     reactFlowInstance.setNodes(newNodes);
   }, []);
+  const handleDefaultAction = React.useCallback((action) => {
+    if (!node)
+      return;
+    switch (action) {
+      case "delete":
+        reactFlowInstance.deleteElements({
+          nodes: [node]
+        });
+        break;
+      case "duplicate":
+        reactFlowInstance.addNodes([{
+          ...node,
+          id: `${reactFlowInstance.getNodes().length + 1}`,
+          position: {
+            x: node.position.x,
+            y: node.position.y + (node.height || 0) + 20
+          },
+          selected: false,
+          zIndex: Number(uikitStyles.theme.zIndices.overlay)
+        }]);
+        break;
+    }
+  }, [node, reactFlowInstance]);
   const hasParams = !!(params && params.length > 0);
+  if (!node)
+    return null;
+  const actsVisible = actions == null ? void 0 : actions.slice(0, maxVisibleActions);
+  const actsDropdown = actions == null ? void 0 : actions.slice(maxVisibleActions);
+  const renderedIcon = (actionIcon) => React.isValidElement(actionIcon) ? actionIcon : actionIcon == null ? void 0 : actionIcon();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(css({
     border: `1px solid ${color}`
-  }), classes.root, className), children: [
+  }), classes.root, className), onMouseEnter: () => setShowActions(true), onMouseLeave: () => setShowActions(false), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.NodeToolbar, { isVisible: showActions, offset: 0, children: defaultActions == null ? void 0 : defaultActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: () => handleDefaultAction(action.id), children: renderedIcon(action.icon) })) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(css({
       backgroundColor: color
     }), classes.headerContainer), children: [
@@ -80,7 +114,20 @@ const HvFlowNode = ({
         /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, disabled: !hasParams, onClick: () => setShowParams((p) => !p), children: showParams ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, {}) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.titleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: title }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: title }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: (actions == null ? void 0 : actions.length) && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        actsVisible == null ? void 0 : actsVisible.map((action) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { title: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: action.label }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: (event) => {
+          actionCallback == null ? void 0 : actionCallback(event, node.id, action);
+        }, children: renderedIcon(action.icon) }) }) })),
+        actsDropdown && actsDropdown.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDropDownMenu, { keepOpened: false, dataList: actsDropdown == null ? void 0 : actsDropdown.map((action) => ({
+          id: action.id,
+          label: action.label
+        })), onClick: (event, action) => {
+          actionCallback == null ? void 0 : actionCallback(event, node.id, action);
+        } })
+      ] }) })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: "Inputs" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs == null ? void 0 : inputs.map((input, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Handle, { type: "target", isConnectableStart: false, id: `${idx}`, position: ReactFlow.Position.Left, style: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Node.cjs","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvTooltip,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\nimport { useEffect, useState } from \"react\";\nimport { Handle, NodeProps, Position, useReactFlow, useStore } from \"reactflow\";\nimport { useFlowContext } from \"../FlowContext/FlowContext\";\n\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowNodeProps extends Omit<HvBaseProps, \"id\">, NodeProps {\n /** Node title /\n title: string;\n /* Node description /\n description: string;\n /* Node expanded /\n expanded?: boolean;\n /* Node inputs /\n inputs?: HvFlowNodeInput[];\n /* Node outputs /\n outputs?: HvFlowNodeOutput[];\n /* Node parameters /\n params?: HvFlowNodeParam[];\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvFlowNodeClasses;\n}\n\nconst isInputConnected = (id, type, idx, edges) => {\n if (type === \"target\") {\n return edges.some(\n (e) => e.target === id && e.targetHandle === idx.toString()\n );\n }\n if (type === \"source\") {\n return edges.some(\n (e) => e.source === id && e.sourceHandle === idx.toString()\n );\n }\n};\n\nexport const HvFlowNode = ({\n id,\n type,\n title,\n description,\n expanded = false,\n params,\n classes: classesProp,\n className,\n}: HvFlowNodeProps) => {\n const [showParams, setShowParams] = useState(expanded);\n const reactFlowInstance = useReactFlow();\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const { nodeGroups, nodeTypes } = useFlowContext();\n const edges = useStore((s) => s.edges);\n const nodes = useStore((s) => s.getNodes());\n\n const node = nodes.find((n) => n.id === id);\n\n const groupId = nodeTypes?.[type].meta?.groupId;\n const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;\n const inputs = nodeTypes?.[type]?.meta?.inputs;\n const outputs = nodeTypes?.[type]?.meta?.outputs;\n const icon = groupId && nodeGroups && nodeGroups[groupId].icon;\n const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;\n const color = getColor(colorProp);\n\n useEffect(() => {\n const newNodes = nodes.map((n) => {\n if (n.id === id) {\n if (Object.keys(n.data).length === 0) {\n params?.forEach((param) => {\n n.data[param.label] = param.value;\n });\n }\n }\n return n;\n });\n reactFlowInstance.setNodes(newNodes);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const hasParams = !!(params && params.length > 0);\n\n return (\n <div\n className={cx(\n css({ border: `1px solid ${color}` }),\n classes.root,\n className\n )}\n >\n <div\n className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n >\n <div className={classes.groupContainer}>\n {icon}\n <HvTypography variant=\"title4\" className={classes.group}>\n {groupLabel}\n </HvTypography>\n </div>\n <div style={{ display: \"flex\" }}>\n <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n <div>\n <Info />\n </div>\n </HvTooltip>\n <HvButton\n icon\n disabled={!hasParams}\n onClick={() => setShowParams((p) => !p)}\n >\n {showParams ? <Up /> : <Down />}\n </HvButton>\n </div>\n </div>\n <div className={classes.titleContainer}>\n <HvTypography>{title}</HvTypography>\n </div>\n <div className={classes.inputsTitleContainer}>\n <HvTypography>Inputs</HvTypography>\n </div>\n <div className={classes.inputsContainer}>\n {inputs?.map((input, idx) => (\n <div className={classes.inputContainer} key={idx}>\n <Handle\n type=\"target\"\n isConnectableStart={false}\n id={`${idx}`}\n position={Position.Left}\n style={{\n top: 160 + 29 idx,\n }}\n />\n <HvTypography>{input.label}</HvTypography>\n {input.isMandatory &&\n !isInputConnected(id, \"target\", idx, edges) && (\n <div className={classes.mandatory} />\n )}\n </div>\n ))}\n </div>\n {showParams && params && (\n <div className={classes.paramsContainer}>\n <ParamRenderer nodeId={id} params={params} data={node?.data} />\n </div>\n )}\n <div className={classes.outputsTitleContainer}>\n <HvTypography>Outputs</HvTypography>\n </div>\n <div className={classes.outputsContainer}>\n {outputs?.map((output, idx) => (\n <div className={classes.outputContainer} key={idx}>\n <Handle\n type=\"source\"\n isConnectableEnd={false}\n id={`${idx}`}\n position={Position.Right}\n style={{\n bottom: -8 + 29 * (outputs.length - idx),\n top: \"auto\",\n }}\n />\n {output.isMandatory &&\n !isInputConnected(id, \"source\", idx, edges) && (\n <div className={classes.mandatory} />\n )}\n <HvTypography>{output.label}</HvTypography>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","HvFlowNode","title","description","expanded","params","classes","classesProp","className","showParams","setShowParams","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","nodeGroups","nodeTypes","useFlowContext","useStore","s","nodes","getNodes","node","find","n","groupId","meta","groupLabel","label","inputs","outputs","icon","colorProp","color","getColor","useEffect","newNodes","map","Object","keys","data","length","forEach","param","value","setNodes","hasParams","jsxs","border","root","backgroundColor","headerContainer","groupContainer","HvTypography","group","display","jsx","HvTooltip","Info","HvButton","p","Up","Down","titleContainer","inputsTitleContainer","inputsContainer","input","inputContainer","Handle","Position","Left","top","isMandatory","mandatory","paramsContainer","ParamRenderer","outputsTitleContainer","outputsContainer","output","outputContainer","Right","bottom"],"mappings":"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"}
1	+ {"version":3,"file":"Node.cjs","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvActionGeneric,\n HvActionsGenericProps,\n HvBaseProps,\n HvButton,\n HvDropDownMenu,\n HvTooltip,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, theme } from \"@hitachivantara/uikit-styles\";\nimport { isValidElement, useCallback, useEffect, useState } from \"react\";\nimport {\n Handle,\n NodeProps,\n NodeToolbar,\n Position,\n useReactFlow,\n useStore,\n} from \"reactflow\";\nimport { useFlowContext } from \"../FlowContext/FlowContext\";\n\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowNodeProps extends Omit<HvBaseProps, \"id\">, NodeProps {\n /** Node description /\n description: string;\n /* Node expanded /\n expanded?: boolean;\n /* Node inputs /\n inputs?: HvFlowNodeInput[];\n /* Node outputs /\n outputs?: HvFlowNodeOutput[];\n /* Node parameters /\n params?: HvFlowNodeParam[];\n /* Node actions /\n actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n /* Node action callback /\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /* Node maximum number of actions visible /\n maxVisibleActions?: number;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvFlowNodeClasses;\n}\n\nconst isInputConnected = (id, type, idx, edges) => {\n if (type === \"target\") {\n return edges.some(\n (e) => e.target === id && e.targetHandle === idx.toString()\n );\n }\n if (type === \"source\") {\n return edges.some(\n (e) => e.source === id && e.sourceHandle === idx.toString()\n );\n }\n};\n\nexport const HvFlowNode = ({\n id,\n type,\n description,\n expanded = false,\n params,\n actions,\n actionCallback,\n maxVisibleActions = 1,\n classes: classesProp,\n className,\n}: HvFlowNodeProps) => {\n const [showParams, setShowParams] = useState(expanded);\n const [showActions, setShowActions] = useState(false);\n const reactFlowInstance = useReactFlow();\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n const edges = useStore((s) => s.edges);\n const nodes = useStore((s) => s.getNodes());\n\n const node = nodes.find((n) => n.id === id);\n\n const groupId = nodeTypes?.[type].meta?.groupId;\n const title = nodeTypes?.[type].meta?.label;\n const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;\n\n const inputs = nodeTypes?.[type]?.meta?.inputs;\n const outputs = nodeTypes?.[type]?.meta?.outputs;\n const icon = groupId && nodeGroups && nodeGroups[groupId].icon;\n const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;\n const color = getColor(colorProp);\n\n useEffect(() => {\n const newNodes = nodes.map((n) => {\n if (n.id === id) {\n if (Object.keys(n.data).length === 0) {\n params?.forEach((param) => {\n n.data[param.label] = param.value;\n });\n }\n }\n return n;\n });\n reactFlowInstance.setNodes(newNodes);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleDefaultAction = useCallback(\n (action: string) => {\n if (!node) return;\n\n switch (action) {\n case \"delete\":\n reactFlowInstance.deleteElements({ nodes: [node] });\n break;\n case \"duplicate\":\n reactFlowInstance.addNodes([\n {\n ...node,\n id: `${reactFlowInstance.getNodes().length + 1}`,\n position: {\n x: node.position.x,\n y: node.position.y + (node.height \|\| 0) + 20,\n },\n selected: false,\n zIndex: Number(theme.zIndices.overlay),\n },\n ]);\n break;\n default:\n break;\n }\n },\n [node, reactFlowInstance]\n );\n\n const hasParams = !!(params && params.length > 0);\n\n if (!node) return null;\n\n const actsVisible = actions?.slice(0, maxVisibleActions);\n const actsDropdown = actions?.slice(maxVisibleActions);\n\n const renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\n return (\n <div\n className={cx(\n css({ border: `1px solid ${color}` }),\n classes.root,\n className\n )}\n onMouseEnter={() => setShowActions(true)}\n onMouseLeave={() => setShowActions(false)}\n >\n <NodeToolbar isVisible={showActions} offset={0}>\n {defaultActions?.map((action) => (\n <HvButton icon onClick={() => handleDefaultAction(action.id)}>\n {renderedIcon(action.icon)}\n </HvButton>\n ))}\n </NodeToolbar>\n <div\n className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n >\n <div className={classes.groupContainer}>\n {icon}\n <HvTypography variant=\"title4\" className={classes.group}>\n {groupLabel}\n </HvTypography>\n </div>\n <div style={{ display: \"flex\" }}>\n <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n <div>\n <Info />\n </div>\n </HvTooltip>\n <HvButton\n icon\n disabled={!hasParams}\n onClick={() => setShowParams((p) => !p)}\n >\n {showParams ? <Up /> : <Down />}\n </HvButton>\n </div>\n </div>\n <div className={classes.titleContainer}>\n <div>\n <HvTypography>{title}</HvTypography>\n </div>\n <div className={classes.actions}>\n {actions?.length && actions?.length > 0 && (\n <>\n {actsVisible?.map((action) => (\n <HvTooltip title={<HvTypography>{action.label}</HvTypography>}>\n <div>\n <HvButton\n icon\n onClick={(event) => {\n actionCallback?.(event, node.id, action);\n }}\n >\n {renderedIcon(action.icon)}\n </HvButton>\n </div>\n </HvTooltip>\n ))}\n\n {actsDropdown && actsDropdown.length > 0 && (\n <HvDropDownMenu\n keepOpened={false}\n dataList={actsDropdown?.map((action) => ({\n id: action.id,\n label: action.label,\n }))}\n onClick={(event, action) => {\n actionCallback?.(event, node.id, action as HvActionGeneric);\n }}\n />\n )}\n </>\n )}\n </div>\n </div>\n <div className={classes.inputsTitleContainer}>\n <HvTypography>Inputs</HvTypography>\n </div>\n <div className={classes.inputsContainer}>\n {inputs?.map((input, idx) => (\n <div className={classes.inputContainer} key={idx}>\n <Handle\n type=\"target\"\n isConnectableStart={false}\n id={`${idx}`}\n position={Position.Left}\n style={{\n top: 160 + 29 idx,\n }}\n />\n <HvTypography>{input.label}</HvTypography>\n {input.isMandatory &&\n !isInputConnected(id, \"target\", idx, edges) && (\n <div className={classes.mandatory} />\n )}\n </div>\n ))}\n </div>\n {showParams && params && (\n <div className={classes.paramsContainer}>\n <ParamRenderer nodeId={id} params={params} data={node?.data} />\n </div>\n )}\n <div className={classes.outputsTitleContainer}>\n <HvTypography>Outputs</HvTypography>\n </div>\n <div className={classes.outputsContainer}>\n {outputs?.map((output, idx) => (\n <div className={classes.outputContainer} key={idx}>\n <Handle\n type=\"source\"\n isConnectableEnd={false}\n id={`${idx}`}\n position={Position.Right}\n style={{\n bottom: -8 + 29 * (outputs.length - idx),\n top: \"auto\",\n }}\n />\n {output.isMandatory &&\n !isInputConnected(id, \"source\", idx, edges) && (\n <div className={classes.mandatory} />\n )}\n <HvTypography>{output.label}</HvTypography>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","HvFlowNode","description","expanded","params","actions","actionCallback","maxVisibleActions","classes","classesProp","className","showParams","setShowParams","useState","showActions","setShowActions","reactFlowInstance","useReactFlow","cx","css","useClasses","nodeGroups","nodeTypes","defaultActions","useFlowContext","useStore","s","nodes","getNodes","node","find","n","groupId","meta","title","label","groupLabel","inputs","outputs","icon","colorProp","color","getColor","useEffect","newNodes","map","Object","keys","data","length","forEach","param","value","setNodes","handleDefaultAction","useCallback","action","deleteElements","addNodes","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","hasParams","actsVisible","slice","actsDropdown","renderedIcon","actionIcon","isValidElement","jsxs","border","root","jsx","NodeToolbar","HvButton","backgroundColor","headerContainer","groupContainer","HvTypography","group","display","HvTooltip","Info","p","Up","Down","titleContainer","event","HvDropDownMenu","inputsTitleContainer","inputsContainer","input","inputContainer","Handle","Position","Left","top","isMandatory","mandatory","paramsContainer","ParamRenderer","outputsTitleContainer","outputsContainer","output","outputContainer","Right","bottom"],"mappings":"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"}

package/dist/cjs/components/Flow/Node/Node.styles.cjs CHANGED Viewed

@@ -27,7 +27,15 @@ const {
     color: uikitReactCore.theme.colors.base_dark
   },
   titleContainer: {
-    padding: uikitReactCore.theme.space.sm
+    padding: uikitReactCore.theme.spacing(uikitReactCore.theme.space.xs, uikitReactCore.theme.space.xs, uikitReactCore.theme.space.xs, uikitReactCore.theme.space.sm),
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  actions: {
+    display: "flex",
+    alignItems: "center"
   },
   inputsTitleContainer: {
     display: "flex",

package/dist/cjs/components/Flow/Node/Node.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Node.styles.cjs","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n root: {\n borderRadius: theme.radii.round,\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n minWidth: \"250px\",\n },\n headerContainer: {\n padding: theme.spacing(0.5, 1),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n groupContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n group: {\n color: theme.colors.base_dark,\n },\n titleContainer: { padding: theme.space.sm },\n inputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo4}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n outputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo4}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n inputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-start\",\n },\n outputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-end\",\n },\n paramsContainer: {\n borderTop: `1px solid ${theme.colors.atmo4}`,\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n padding: theme.space.sm,\n },\n inputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n outputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n mandatory: {\n width: 10,\n height: 10,\n margin: theme.spacing(0, theme.space.xs),\n borderRadius: theme.radii.circle,\n backgroundColor: theme.colors.negative_20,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","groupContainer","group","color","base_dark","titleContainer","space","sm","~~inputsTitleContainer~~","xs","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","inputsContainer","gap","outputsContainer","paramsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJC,cAAcC,eAAAA,MAAMC,MAAMC;AAAAA,IAC1BC,iBAAiBH,eAAAA,MAAMI,OAAOC;AAAAA,IAC9BC,WAAWN,eAAAA,MAAMI,OAAOG;AAAAA,IACxBC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,SAASV,eAAAA,MAAMW,QAAQ,KAAK,CAAC;AAAA,IAC7BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,gBAAgB;AAAA,IACdJ,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAE,OAAO;AAAA,IACLC,OAAOlB,eAAAA,MAAMI,OAAOe;AAAAA,EACtB;AAAA,EACAC,gBAAgB;AAAA,~~IAAEV~~,SAASV,eAAAA,MAAMqB,MAAMC;~~AAAAA~~,~~EAAG~~;AAAA,~~EAC1CC~~,sBAAsB;AAAA,~~IACpBX~~,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,eAAAA,MAAMqB,~~MAAMG~~;AAAAA,~~IACrBrB~~,iBAAiBH,eAAAA,MAAMI,~~OAAOqB~~;AAAAA,IAC9BC,WAAY,~~aAAY1B~~,eAAMI,MAAAA,~~OAAOuB~~,KAAM;AAAA,IAC3CC,cAAe,~~aAAY5B~~,eAAMI,MAAAA,~~OAAOuB~~,KAAM;AAAA,EAChD;AAAA,EACAE,uBAAuB;AAAA,~~IACrBjB~~,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,eAAAA,MAAMqB,~~MAAMG~~;AAAAA,~~IACrBrB~~,iBAAiBH,eAAAA,MAAMI,~~OAAOqB~~;AAAAA,IAC9BC,WAAY,~~aAAY1B~~,eAAMI,MAAAA,~~OAAOuB~~,KAAM;AAAA,IAC3CC,cAAe,~~aAAY5B~~,eAAMI,MAAAA,~~OAAOuB~~,KAAM;AAAA,EAChD;AAAA,EACAG,iBAAiB;AAAA,~~IACflB~~,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,eAAAA,MAAMqB,~~MAAMC~~;AAAAA,IACrBS,~~KAAK/B~~,eAAAA,MAAMqB,~~MAAMG~~;AAAAA,~~IACjBT~~,YAAY;AAAA,EACd;AAAA,~~EACAiB~~,kBAAkB;AAAA,~~IAChBpB~~,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,eAAAA,MAAMqB,~~MAAMC~~;AAAAA,IACrBS,~~KAAK/B~~,eAAAA,MAAMqB,~~MAAMG~~;AAAAA,~~IACjBT~~,YAAY;AAAA,EACd;AAAA,~~EACAkB~~,iBAAiB;AAAA,IACfP,WAAY,~~aAAY1B~~,eAAMI,MAAAA,~~OAAOuB~~,KAAM;AAAA,~~IAC3Cf~~,SAAS;AAAA,IACTC,eAAe;AAAA,~~IACfkB~~,~~KAAK/B~~,eAAAA,MAAMqB,~~MAAMG~~;AAAAA,~~IACjBd~~,SAASV,eAAAA,MAAMqB,~~MAAMC~~;AAAAA,EACvB;AAAA,EACAY,gBAAgB;AAAA,~~IACdtB~~,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,~~EACAoB~~,iBAAiB;AAAA,~~IACfvB~~,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,~~EACAqB~~,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,~~QAAQvC~~,eAAMW,MAAAA,QAAQ,GAAGX,eAAAA,MAAMqB,~~MAAMG~~,EAAE;AAAA,~~IACvCzB~~,cAAcC,eAAAA,MAAMC,~~MAAMuC~~;AAAAA,~~IAC1BrC~~,iBAAiBH,eAAAA,MAAMI,~~OAAOqC~~;AAAAA,EAChC;AACF,CAAC;;;"}
1	+ {"version":3,"file":"Node.styles.cjs","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n root: {\n borderRadius: theme.radii.round,\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n minWidth: \"250px\",\n },\n headerContainer: {\n padding: theme.spacing(0.5, 1),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n groupContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n group: {\n color: theme.colors.base_dark,\n },\n titleContainer: {\n padding: theme.spacing(\n theme.space.xs,\n theme.space.xs,\n theme.space.xs,\n theme.space.sm\n ),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n actions: {\n display: \"flex\",\n alignItems: \"center\",\n },\n inputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo4}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n outputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo4}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n inputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-start\",\n },\n outputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-end\",\n },\n paramsContainer: {\n borderTop: `1px solid ${theme.colors.atmo4}`,\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n padding: theme.space.sm,\n },\n inputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n outputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n mandatory: {\n width: 10,\n height: 10,\n margin: theme.spacing(0, theme.space.xs),\n borderRadius: theme.radii.circle,\n backgroundColor: theme.colors.negative_20,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","groupContainer","group","color","base_dark","titleContainer","space","xs","sm","actions","inputsTitleContainer","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","inputsContainer","gap","outputsContainer","paramsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":"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"}

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

@@ -10,6 +10,7 @@ const HvFlow = ({
   nodeTypes,
   nodeGroups,
   sidebar,
+  defaultActions,
   dndContextProps,
   ...others
 }) => {
@@ -24,7 +25,7 @@ const HvFlow = ({
   const handleDragEnd = () => {
     setDraggingLabel(void 0);
   };
-  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(HvFlowProvider, { nodeGroups, nodeTypes, children: /* @__PURE__ */ jsxs(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, sensors, modifiers: [restrictToWindowEdges], ...dndContextProps, children: [
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(HvFlowProvider, { nodeGroups, nodeTypes, defaultActions, children: /* @__PURE__ */ jsxs(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, sensors, modifiers: [restrictToWindowEdges], ...dndContextProps, children: [
     /* @__PURE__ */ jsx(HvDroppableFlow, { ...others }),
     sidebar,
     /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToWindowEdges], children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Flow.js","sources":["../../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n DndContext,\n DndContextProps,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowSidebarGroupItem } from \"./Sidebar/SidebarGroup/SidebarGroupItem\";\n\nexport interface HvFlowProps<\n NodeData = any,\n NodeType extends string \| undefined = string \| undefined,\n NodeGroups extends keyof any = string\n> extends HvDroppableFlowProps<NodeData, NodeType> {\n /** Flow nodes groups. /\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /* Flow nodes types. /\n nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n /* Flow sidebar. /\n sidebar?: React.ReactNode;\n /\n Dnd Kit context props. This should be used for accessibility purposes.\n \n More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n /\n dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/\n Flow component to build interactive node-based UIs.\n \n This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n \n DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n nodeTypes,\n nodeGroups,\n sidebar,\n dndContextProps,\n ...others\n}: HvFlowProps) => {\n const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor)\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 // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n // HvFlowContext is our custom internal context.\n return (\n <ReactFlowProvider>\n <HvFlowProvider nodeGroups={nodeGroups} nodeTypes={nodeTypes}>\n <DndContext\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n modifiers={[restrictToWindowEdges]}\n {...dndContextProps}\n >\n <HvDroppableFlow {...others} />\n {sidebar}\n <DragOverlay modifiers={[restrictToWindowEdges]}>\n {draggingLabel ? (\n <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n ) : null}\n </DragOverlay>\n </DndContext>\n </HvFlowProvider>\n </ReactFlowProvider>\n );\n};\n"],"names":["HvFlow","nodeTypes","nodeGroups","sidebar","dndContextProps","others","draggingLabel","setDraggingLabel","useState","undefined","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","restrictToWindowEdges"],"mappings":";;;;;;;;~~AA+CO~~,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,SAASC,MAAS;AAE5D,QAAMC,UAAUC,WACdC,UAAUC,aAAa,GACvBD,UAAUE,cAAc,CAC1B;AAEA,QAAMC,kBAAmDC,CAAU,UAAA;;AACjE,SAAIA,WAAMC,OAAOC,KAAKC,YAAlBH,mBAA2BI,QAAQ;AACrCb,wBAAiBS,WAAMC,OAAOC,KAAKC,QAAQC,WAA1BJ,mBAAkCK,KAAK;AAAA,IAC1D;AAAA,EAAA;AAGF,QAAMC,gBAA8CA,MAAM;AACxDf,qBAAiBE,MAAS;AAAA,EAAA;AAK5B,6BACG,mBACC,EAAA,UAAA,oBAAC,~~kBAAe~~,~~YAAwB~~,~~WACtC,+BAAC~~,~~YACC~~,~~EAAA~~,aAAaM,iBACb,WAAWO,eACX,SACA,WAAW,CAACC,qBAAqB,GACjC,GAAInB,iBAEJ,UAAA;AAAA,IAAC,oBAAA,iBAAA,EAAgB,GAAIC,QAAO;AAAA,~~IAC3BF~~;AAAAA,IACA,oBAAA,aAAA,EAAY,WAAW,~~CAACoB~~,qBAAqB,GAC3CjB,UAAAA,gBACE,oBAAA,wBAAA,EAAuB,OAAOA,eAAe,YAAU,KAAA,CAAA,IACtD,MACN;AAAA,EAAA,GACF,GACF,EACF,CAAA;AAEJ;"}
1	+ {"version":3,"file":"Flow.js","sources":["../../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n DndContext,\n DndContextProps,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvActionGeneric } from \"@hitachivantara/uikit-react-core\";\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowSidebarGroupItem } from \"./Sidebar/SidebarGroup/SidebarGroupItem\";\n\nexport interface HvFlowProps<\n NodeData = any,\n NodeType extends string \| undefined = string \| undefined,\n NodeGroups extends keyof any = string\n> extends HvDroppableFlowProps<NodeData, NodeType> {\n /** Flow nodes groups. /\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /* Flow nodes types. /\n nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n /* Flow sidebar. /\n sidebar?: React.ReactNode;\n /* Flow default actions. /\n defaultActions?: HvActionGeneric[];\n /\n Dnd Kit context props. This should be used for accessibility purposes.\n \n More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n /\n dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/\n Flow component to build interactive node-based UIs.\n \n This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n \n DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n nodeTypes,\n nodeGroups,\n sidebar,\n defaultActions,\n dndContextProps,\n ...others\n}: HvFlowProps) => {\n const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor)\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 // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n // HvFlowContext is our custom internal context.\n return (\n <ReactFlowProvider>\n <HvFlowProvider\n nodeGroups={nodeGroups}\n nodeTypes={nodeTypes}\n defaultActions={defaultActions}\n >\n <DndContext\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n modifiers={[restrictToWindowEdges]}\n {...dndContextProps}\n >\n <HvDroppableFlow {...others} />\n {sidebar}\n <DragOverlay modifiers={[restrictToWindowEdges]}>\n {draggingLabel ? (\n <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n ) : null}\n </DragOverlay>\n </DndContext>\n </HvFlowProvider>\n </ReactFlowProvider>\n );\n};\n"],"names":["HvFlow","nodeTypes","nodeGroups","sidebar","defaultActions","dndContextProps","others","draggingLabel","setDraggingLabel","useState","undefined","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","restrictToWindowEdges"],"mappings":";;;;;;;;AAkDO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,SAASC,MAAS;AAE5D,QAAMC,UAAUC,WACdC,UAAUC,aAAa,GACvBD,UAAUE,cAAc,CAC1B;AAEA,QAAMC,kBAAmDC,CAAU,UAAA;;AACjE,SAAIA,WAAMC,OAAOC,KAAKC,YAAlBH,mBAA2BI,QAAQ;AACrCb,wBAAiBS,WAAMC,OAAOC,KAAKC,QAAQC,WAA1BJ,mBAAkCK,KAAK;AAAA,IAC1D;AAAA,EAAA;AAGF,QAAMC,gBAA8CA,MAAM;AACxDf,qBAAiBE,MAAS;AAAA,EAAA;AAK5B,6BACG,mBACC,EAAA,UAAA,oBAAC,kBACC,YACA,WACA,gBAEA,UAAC,qBAAA,YAAA,EACC,aAAaM,iBACb,WAAWO,eACX,SACA,WAAW,CAACC,qBAAqB,GACjC,GAAInB,iBAEJ,UAAA;AAAA,IAAC,oBAAA,iBAAA,EAAgB,GAAIC,QAAO;AAAA,IAC3BH;AAAAA,IACA,oBAAA,aAAA,EAAY,WAAW,CAACqB,qBAAqB,GAC3CjB,UAAAA,gBACE,oBAAA,wBAAA,EAAuB,OAAOA,eAAe,YAAU,KAAA,CAAA,IACtD,MACN;AAAA,EAAA,GACF,GACF,EACF,CAAA;AAEJ;"}

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

@@ -4,15 +4,17 @@ const HvFlowContext = createContext({});
 const HvFlowProvider = ({
   nodeGroups,
   nodeTypes,
+  defaultActions,
   children
 }) => {
   const [expandedNodeGroups, setExpandedNodeGroups] = useState([]);
   const value = useMemo(() => ({
     nodeTypes,
     nodeGroups,
+    defaultActions,
     expandedNodeGroups,
     setExpandedNodeGroups
-  }), [nodeGroups, nodeTypes, expandedNodeGroups]);
+  }), [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups]);
   return /* @__PURE__ */ jsx(HvFlowContext.Provider, { value, children });
 };
 const useFlowContext = () => useContext(HvFlowContext);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowContext.js","sources":["../../../../../src/components/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n Dispatch,\n SetStateAction,\n createContext,\n useContext,\n useMemo,\n useState,\n} from \"react\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n /** Flow nodes types. /\n nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n /* Flow nodes groups. /\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /* Flow nodes groups expanded on sidebar. /\n expandedNodeGroups?: string[];\n /* Function to set `expandedNodeGroups`. /\n setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n /* Flow nodes types. /\n nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n /* Flow nodes groups. /\n nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n /* Children. */\n children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n nodeGroups,\n nodeTypes,\n children,\n}: HvFlowProviderProps) => {\n const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n const value = useMemo(\n () => ({\n nodeTypes,\n nodeGroups,\n expandedNodeGroups,\n setExpandedNodeGroups,\n }),\n [nodeGroups, ~~nodeTypes~~, expandedNodeGroups]\n );\n\n return (\n <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n );\n};\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":["HvFlowContext","createContext","HvFlowProvider","nodeGroups","nodeTypes","children","expandedNodeGroups","setExpandedNodeGroups","useState","value","useMemo","useFlowContext","useContext"],"mappings":";;~~AAsBaA~~,MAAAA,gBAAgBC,cAAkC,EAAE;~~AAW1D~~,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,QACZ,OAAO;AAAA,~~IACLN~~;AAAAA,IACAD;AAAAA,~~IACAG~~;AAAAA,IACAC;AAAAA,~~EAEF~~,~~IAAA~~,CAACJ,~~YAAYC~~,~~WAAWE~~,kBAAkB,~~CAC5C~~;AAEA,SACG,oBAAA,cAAc,UAAd,EAAuB,OAAeD,SAAS,CAAA;AAEpD;AAEaM,MAAAA,iBAAiBA,MAAMC,~~WAAWZ~~,aAAa;"}
1	+ {"version":3,"file":"FlowContext.js","sources":["../../../../../src/components/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import { HvActionGeneric } from \"@hitachivantara/uikit-react-core\";\nimport {\n Dispatch,\n SetStateAction,\n createContext,\n useContext,\n useMemo,\n useState,\n} from \"react\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n /** Flow nodes types. /\n nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n /* Flow nodes groups. /\n nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n /* Flow nodes groups expanded on sidebar. /\n expandedNodeGroups?: string[];\n /* Flow default actions. /\n defaultActions?: HvActionGeneric[];\n /* Function to set `expandedNodeGroups`. /\n setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n /* Flow nodes types. /\n nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n /* Flow nodes groups. /\n nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n /* Flow default actions. /\n defaultActions?: HvActionGeneric[];\n /* Children. */\n children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n nodeGroups,\n nodeTypes,\n defaultActions,\n children,\n}: HvFlowProviderProps) => {\n const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n const value = useMemo(\n () => ({\n nodeTypes,\n nodeGroups,\n defaultActions,\n expandedNodeGroups,\n setExpandedNodeGroups,\n }),\n [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups]\n );\n\n return (\n <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n );\n};\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":["HvFlowContext","createContext","HvFlowProvider","nodeGroups","nodeTypes","defaultActions","children","expandedNodeGroups","setExpandedNodeGroups","useState","value","useMemo","useFlowContext","useContext"],"mappings":";;AAyBaA,MAAAA,gBAAgBC,cAAkC,EAAE;AAa1D,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACLP;AAAAA,IACAD;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAC;AAAAA,EAAAA,IAEF,CAACJ,WAAWD,YAAYE,gBAAgBE,kBAAkB,CAC5D;AAEA,SACG,oBAAA,cAAc,UAAd,EAAuB,OAAeD,SAAS,CAAA;AAEpD;AAEaM,MAAAA,iBAAiBA,MAAMC,WAAWb,aAAa;"}

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

@@ -1,9 +1,9 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { HvTypography, HvTooltip, HvButton } from "@hitachivantara/uikit-react-core";
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { HvButton, HvTypography, HvTooltip, HvDropDownMenu } from "@hitachivantara/uikit-react-core";
 import { Info, Up, Down } from "@hitachivantara/uikit-react-icons";
-import { getColor } from "@hitachivantara/uikit-styles";
-import { useState, useEffect } from "react";
-import { useReactFlow, useStore, Handle, Position } from "reactflow";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { useState, useEffect, useCallback, isValidElement } from "react";
+import { useReactFlow, useStore, NodeToolbar, Handle, Position } from "reactflow";
 import { useFlowContext } from "../FlowContext/FlowContext.js";
 import { useClasses } from "./Node.styles.js";
 import { staticClasses } from "./Node.styles.js";
@@ -19,15 +19,18 @@ const isInputConnected = (id, type, idx, edges) => {
 const HvFlowNode = ({
   id,
   type,
-  title,
   description,
   expanded = false,
   params,
+  actions,
+  actionCallback,
+  maxVisibleActions = 1,
   classes: classesProp,
   className
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const [showParams, setShowParams] = useState(expanded);
+  const [showActions, setShowActions] = useState(false);
   const reactFlowInstance = useReactFlow();
   const {
     classes,
@@ -36,15 +39,17 @@ const HvFlowNode = ({
   } = useClasses(classesProp);
   const {
     nodeGroups,
-    nodeTypes
+    nodeTypes,
+    defaultActions
   } = useFlowContext();
   const edges = useStore((s) => s.edges);
   const nodes = useStore((s) => s.getNodes());
   const node = nodes.find((n) => n.id === id);
   const groupId = (_a = nodeTypes == null ? void 0 : nodeTypes[type].meta) == null ? void 0 : _a.groupId;
+  const title = (_b = nodeTypes == null ? void 0 : nodeTypes[type].meta) == null ? void 0 : _b.label;
   const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;
-  const inputs = (_c = (_b = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _b.meta) == null ? void 0 : _c.inputs;
-  const outputs = (_e = (_d = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _d.meta) == null ? void 0 : _e.outputs;
+  const inputs = (_d = (_c = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _c.meta) == null ? void 0 : _d.inputs;
+  const outputs = (_f = (_e = nodeTypes == null ? void 0 : nodeTypes[type]) == null ? void 0 : _e.meta) == null ? void 0 : _f.outputs;
   const icon = groupId && nodeGroups && nodeGroups[groupId].icon;
   const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;
   const color = getColor(colorProp);
@@ -61,10 +66,39 @@ const HvFlowNode = ({
     });
     reactFlowInstance.setNodes(newNodes);
   }, []);
+  const handleDefaultAction = useCallback((action) => {
+    if (!node)
+      return;
+    switch (action) {
+      case "delete":
+        reactFlowInstance.deleteElements({
+          nodes: [node]
+        });
+        break;
+      case "duplicate":
+        reactFlowInstance.addNodes([{
+          ...node,
+          id: `${reactFlowInstance.getNodes().length + 1}`,
+          position: {
+            x: node.position.x,
+            y: node.position.y + (node.height || 0) + 20
+          },
+          selected: false,
+          zIndex: Number(theme.zIndices.overlay)
+        }]);
+        break;
+    }
+  }, [node, reactFlowInstance]);
   const hasParams = !!(params && params.length > 0);
+  if (!node)
+    return null;
+  const actsVisible = actions == null ? void 0 : actions.slice(0, maxVisibleActions);
+  const actsDropdown = actions == null ? void 0 : actions.slice(maxVisibleActions);
+  const renderedIcon = (actionIcon) => isValidElement(actionIcon) ? actionIcon : actionIcon == null ? void 0 : actionIcon();
   return /* @__PURE__ */ jsxs("div", { className: cx(css({
     border: `1px solid ${color}`
-  }), classes.root, className), children: [
+  }), classes.root, className), onMouseEnter: () => setShowActions(true), onMouseLeave: () => setShowActions(false), children: [
+    /* @__PURE__ */ jsx(NodeToolbar, { isVisible: showActions, offset: 0, children: defaultActions == null ? void 0 : defaultActions.map((action) => /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: () => handleDefaultAction(action.id), children: renderedIcon(action.icon) })) }),
     /* @__PURE__ */ jsxs("div", { className: cx(css({
       backgroundColor: color
     }), classes.headerContainer), children: [
@@ -79,7 +113,20 @@ const HvFlowNode = ({
         /* @__PURE__ */ jsx(HvButton, { icon: true, disabled: !hasParams, onClick: () => setShowParams((p) => !p), children: showParams ? /* @__PURE__ */ jsx(Up, {}) : /* @__PURE__ */ jsx(Down, {}) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: classes.titleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: title }) }),
+    /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { children: title }) }),
+      /* @__PURE__ */ jsx("div", { className: classes.actions, children: (actions == null ? void 0 : actions.length) && (actions == null ? void 0 : actions.length) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        actsVisible == null ? void 0 : actsVisible.map((action) => /* @__PURE__ */ jsx(HvTooltip, { title: /* @__PURE__ */ jsx(HvTypography, { children: action.label }), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: (event) => {
+          actionCallback == null ? void 0 : actionCallback(event, node.id, action);
+        }, children: renderedIcon(action.icon) }) }) })),
+        actsDropdown && actsDropdown.length > 0 && /* @__PURE__ */ jsx(HvDropDownMenu, { keepOpened: false, dataList: actsDropdown == null ? void 0 : actsDropdown.map((action) => ({
+          id: action.id,
+          label: action.label
+        })), onClick: (event, action) => {
+          actionCallback == null ? void 0 : actionCallback(event, node.id, action);
+        } })
+      ] }) })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: "Inputs" }) }),
     /* @__PURE__ */ jsx("div", { className: classes.inputsContainer, children: inputs == null ? void 0 : inputs.map((input, idx) => /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
       /* @__PURE__ */ jsx(Handle, { type: "target", isConnectableStart: false, id: `${idx}`, position: Position.Left, style: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Node.js","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvTooltip,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\nimport { useEffect, useState } from \"react\";\nimport { Handle, NodeProps, Position, useReactFlow, useStore } from \"reactflow\";\nimport { useFlowContext } from \"../FlowContext/FlowContext\";\n\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowNodeProps extends Omit<HvBaseProps, \"id\">, NodeProps {\n /** Node title /\n title: string;\n /* Node description /\n description: string;\n /* Node expanded /\n expanded?: boolean;\n /* Node inputs /\n inputs?: HvFlowNodeInput[];\n /* Node outputs /\n outputs?: HvFlowNodeOutput[];\n /* Node parameters /\n params?: HvFlowNodeParam[];\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvFlowNodeClasses;\n}\n\nconst isInputConnected = (id, type, idx, edges) => {\n if (type === \"target\") {\n return edges.some(\n (e) => e.target === id && e.targetHandle === idx.toString()\n );\n }\n if (type === \"source\") {\n return edges.some(\n (e) => e.source === id && e.sourceHandle === idx.toString()\n );\n }\n};\n\nexport const HvFlowNode = ({\n id,\n type,\n title,\n description,\n expanded = false,\n params,\n classes: classesProp,\n className,\n}: HvFlowNodeProps) => {\n const [showParams, setShowParams] = useState(expanded);\n const reactFlowInstance = useReactFlow();\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const { nodeGroups, nodeTypes } = useFlowContext();\n const edges = useStore((s) => s.edges);\n const nodes = useStore((s) => s.getNodes());\n\n const node = nodes.find((n) => n.id === id);\n\n const groupId = nodeTypes?.[type].meta?.groupId;\n const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;\n const inputs = nodeTypes?.[type]?.meta?.inputs;\n const outputs = nodeTypes?.[type]?.meta?.outputs;\n const icon = groupId && nodeGroups && nodeGroups[groupId].icon;\n const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;\n const color = getColor(colorProp);\n\n useEffect(() => {\n const newNodes = nodes.map((n) => {\n if (n.id === id) {\n if (Object.keys(n.data).length === 0) {\n params?.forEach((param) => {\n n.data[param.label] = param.value;\n });\n }\n }\n return n;\n });\n reactFlowInstance.setNodes(newNodes);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const hasParams = !!(params && params.length > 0);\n\n return (\n <div\n className={cx(\n css({ border: `1px solid ${color}` }),\n classes.root,\n className\n )}\n >\n <div\n className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n >\n <div className={classes.groupContainer}>\n {icon}\n <HvTypography variant=\"title4\" className={classes.group}>\n {groupLabel}\n </HvTypography>\n </div>\n <div style={{ display: \"flex\" }}>\n <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n <div>\n <Info />\n </div>\n </HvTooltip>\n <HvButton\n icon\n disabled={!hasParams}\n onClick={() => setShowParams((p) => !p)}\n >\n {showParams ? <Up /> : <Down />}\n </HvButton>\n </div>\n </div>\n <div className={classes.titleContainer}>\n <HvTypography>{title}</HvTypography>\n </div>\n <div className={classes.inputsTitleContainer}>\n <HvTypography>Inputs</HvTypography>\n </div>\n <div className={classes.inputsContainer}>\n {inputs?.map((input, idx) => (\n <div className={classes.inputContainer} key={idx}>\n <Handle\n type=\"target\"\n isConnectableStart={false}\n id={`${idx}`}\n position={Position.Left}\n style={{\n top: 160 + 29 idx,\n }}\n />\n <HvTypography>{input.label}</HvTypography>\n {input.isMandatory &&\n !isInputConnected(id, \"target\", idx, edges) && (\n <div className={classes.mandatory} />\n )}\n </div>\n ))}\n </div>\n {showParams && params && (\n <div className={classes.paramsContainer}>\n <ParamRenderer nodeId={id} params={params} data={node?.data} />\n </div>\n )}\n <div className={classes.outputsTitleContainer}>\n <HvTypography>Outputs</HvTypography>\n </div>\n <div className={classes.outputsContainer}>\n {outputs?.map((output, idx) => (\n <div className={classes.outputContainer} key={idx}>\n <Handle\n type=\"source\"\n isConnectableEnd={false}\n id={`${idx}`}\n position={Position.Right}\n style={{\n bottom: -8 + 29 * (outputs.length - idx),\n top: \"auto\",\n }}\n />\n {output.isMandatory &&\n !isInputConnected(id, \"source\", idx, edges) && (\n <div className={classes.mandatory} />\n )}\n <HvTypography>{output.label}</HvTypography>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","HvFlowNode","title","description","expanded","params","classes","classesProp","className","showParams","setShowParams","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","nodeGroups","nodeTypes","useFlowContext","useStore","s","nodes","getNodes","node","find","n","groupId","meta","groupLabel","label","inputs","outputs","icon","colorProp","color","getColor","useEffect","newNodes","map","Object","keys","data","length","forEach","param","value","setNodes","hasParams","border","root","backgroundColor","headerContainer","groupContainer","group","display","p","titleContainer","inputsTitleContainer","inputsContainer","input","inputContainer","Position","Left","top","isMandatory","mandatory","paramsContainer","outputsTitleContainer","outputsContainer","output","outputContainer","Right","bottom"],"mappings":"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"}
1	+ {"version":3,"file":"Node.js","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import {\n ExtractNames,\n HvActionGeneric,\n HvActionsGenericProps,\n HvBaseProps,\n HvButton,\n HvDropDownMenu,\n HvTooltip,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, theme } from \"@hitachivantara/uikit-styles\";\nimport { isValidElement, useCallback, useEffect, useState } from \"react\";\nimport {\n Handle,\n NodeProps,\n NodeToolbar,\n Position,\n useReactFlow,\n useStore,\n} from \"reactflow\";\nimport { useFlowContext } from \"../FlowContext/FlowContext\";\n\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowNodeProps extends Omit<HvBaseProps, \"id\">, NodeProps {\n /** Node description /\n description: string;\n /* Node expanded /\n expanded?: boolean;\n /* Node inputs /\n inputs?: HvFlowNodeInput[];\n /* Node outputs /\n outputs?: HvFlowNodeOutput[];\n /* Node parameters /\n params?: HvFlowNodeParam[];\n /* Node actions /\n actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n /* Node action callback /\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /* Node maximum number of actions visible /\n maxVisibleActions?: number;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvFlowNodeClasses;\n}\n\nconst isInputConnected = (id, type, idx, edges) => {\n if (type === \"target\") {\n return edges.some(\n (e) => e.target === id && e.targetHandle === idx.toString()\n );\n }\n if (type === \"source\") {\n return edges.some(\n (e) => e.source === id && e.sourceHandle === idx.toString()\n );\n }\n};\n\nexport const HvFlowNode = ({\n id,\n type,\n description,\n expanded = false,\n params,\n actions,\n actionCallback,\n maxVisibleActions = 1,\n classes: classesProp,\n className,\n}: HvFlowNodeProps) => {\n const [showParams, setShowParams] = useState(expanded);\n const [showActions, setShowActions] = useState(false);\n const reactFlowInstance = useReactFlow();\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n const edges = useStore((s) => s.edges);\n const nodes = useStore((s) => s.getNodes());\n\n const node = nodes.find((n) => n.id === id);\n\n const groupId = nodeTypes?.[type].meta?.groupId;\n const title = nodeTypes?.[type].meta?.label;\n const groupLabel = groupId && nodeGroups && nodeGroups[groupId].label;\n\n const inputs = nodeTypes?.[type]?.meta?.inputs;\n const outputs = nodeTypes?.[type]?.meta?.outputs;\n const icon = groupId && nodeGroups && nodeGroups[groupId].icon;\n const colorProp = groupId && nodeGroups && nodeGroups[groupId].color;\n const color = getColor(colorProp);\n\n useEffect(() => {\n const newNodes = nodes.map((n) => {\n if (n.id === id) {\n if (Object.keys(n.data).length === 0) {\n params?.forEach((param) => {\n n.data[param.label] = param.value;\n });\n }\n }\n return n;\n });\n reactFlowInstance.setNodes(newNodes);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleDefaultAction = useCallback(\n (action: string) => {\n if (!node) return;\n\n switch (action) {\n case \"delete\":\n reactFlowInstance.deleteElements({ nodes: [node] });\n break;\n case \"duplicate\":\n reactFlowInstance.addNodes([\n {\n ...node,\n id: `${reactFlowInstance.getNodes().length + 1}`,\n position: {\n x: node.position.x,\n y: node.position.y + (node.height \|\| 0) + 20,\n },\n selected: false,\n zIndex: Number(theme.zIndices.overlay),\n },\n ]);\n break;\n default:\n break;\n }\n },\n [node, reactFlowInstance]\n );\n\n const hasParams = !!(params && params.length > 0);\n\n if (!node) return null;\n\n const actsVisible = actions?.slice(0, maxVisibleActions);\n const actsDropdown = actions?.slice(maxVisibleActions);\n\n const renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\n return (\n <div\n className={cx(\n css({ border: `1px solid ${color}` }),\n classes.root,\n className\n )}\n onMouseEnter={() => setShowActions(true)}\n onMouseLeave={() => setShowActions(false)}\n >\n <NodeToolbar isVisible={showActions} offset={0}>\n {defaultActions?.map((action) => (\n <HvButton icon onClick={() => handleDefaultAction(action.id)}>\n {renderedIcon(action.icon)}\n </HvButton>\n ))}\n </NodeToolbar>\n <div\n className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n >\n <div className={classes.groupContainer}>\n {icon}\n <HvTypography variant=\"title4\" className={classes.group}>\n {groupLabel}\n </HvTypography>\n </div>\n <div style={{ display: \"flex\" }}>\n <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n <div>\n <Info />\n </div>\n </HvTooltip>\n <HvButton\n icon\n disabled={!hasParams}\n onClick={() => setShowParams((p) => !p)}\n >\n {showParams ? <Up /> : <Down />}\n </HvButton>\n </div>\n </div>\n <div className={classes.titleContainer}>\n <div>\n <HvTypography>{title}</HvTypography>\n </div>\n <div className={classes.actions}>\n {actions?.length && actions?.length > 0 && (\n <>\n {actsVisible?.map((action) => (\n <HvTooltip title={<HvTypography>{action.label}</HvTypography>}>\n <div>\n <HvButton\n icon\n onClick={(event) => {\n actionCallback?.(event, node.id, action);\n }}\n >\n {renderedIcon(action.icon)}\n </HvButton>\n </div>\n </HvTooltip>\n ))}\n\n {actsDropdown && actsDropdown.length > 0 && (\n <HvDropDownMenu\n keepOpened={false}\n dataList={actsDropdown?.map((action) => ({\n id: action.id,\n label: action.label,\n }))}\n onClick={(event, action) => {\n actionCallback?.(event, node.id, action as HvActionGeneric);\n }}\n />\n )}\n </>\n )}\n </div>\n </div>\n <div className={classes.inputsTitleContainer}>\n <HvTypography>Inputs</HvTypography>\n </div>\n <div className={classes.inputsContainer}>\n {inputs?.map((input, idx) => (\n <div className={classes.inputContainer} key={idx}>\n <Handle\n type=\"target\"\n isConnectableStart={false}\n id={`${idx}`}\n position={Position.Left}\n style={{\n top: 160 + 29 idx,\n }}\n />\n <HvTypography>{input.label}</HvTypography>\n {input.isMandatory &&\n !isInputConnected(id, \"target\", idx, edges) && (\n <div className={classes.mandatory} />\n )}\n </div>\n ))}\n </div>\n {showParams && params && (\n <div className={classes.paramsContainer}>\n <ParamRenderer nodeId={id} params={params} data={node?.data} />\n </div>\n )}\n <div className={classes.outputsTitleContainer}>\n <HvTypography>Outputs</HvTypography>\n </div>\n <div className={classes.outputsContainer}>\n {outputs?.map((output, idx) => (\n <div className={classes.outputContainer} key={idx}>\n <Handle\n type=\"source\"\n isConnectableEnd={false}\n id={`${idx}`}\n position={Position.Right}\n style={{\n bottom: -8 + 29 * (outputs.length - idx),\n top: \"auto\",\n }}\n />\n {output.isMandatory &&\n !isInputConnected(id, \"source\", idx, edges) && (\n <div className={classes.mandatory} />\n )}\n <HvTypography>{output.label}</HvTypography>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","HvFlowNode","description","expanded","params","actions","actionCallback","maxVisibleActions","classes","classesProp","className","showParams","setShowParams","useState","showActions","setShowActions","reactFlowInstance","useReactFlow","cx","css","useClasses","nodeGroups","nodeTypes","defaultActions","useFlowContext","useStore","s","nodes","getNodes","node","find","n","groupId","meta","title","label","groupLabel","inputs","outputs","icon","colorProp","color","getColor","useEffect","newNodes","map","Object","keys","data","length","forEach","param","value","setNodes","handleDefaultAction","useCallback","action","deleteElements","addNodes","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","hasParams","actsVisible","slice","actsDropdown","renderedIcon","actionIcon","isValidElement","border","root","backgroundColor","headerContainer","groupContainer","group","display","p","titleContainer","event","inputsTitleContainer","inputsContainer","input","inputContainer","Position","Left","top","isMandatory","mandatory","paramsContainer","outputsTitleContainer","outputsContainer","output","outputContainer","Right","bottom"],"mappings":"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"}

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

@@ -25,7 +25,15 @@ const {
     color: theme.colors.base_dark
   },
   titleContainer: {
-    padding: theme.space.sm
+    padding: theme.spacing(theme.space.xs, theme.space.xs, theme.space.xs, theme.space.sm),
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  actions: {
+    display: "flex",
+    alignItems: "center"
   },
   inputsTitleContainer: {
     display: "flex",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Node.styles.js","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n root: {\n borderRadius: theme.radii.round,\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n minWidth: \"250px\",\n },\n headerContainer: {\n padding: theme.spacing(0.5, 1),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n groupContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n group: {\n color: theme.colors.base_dark,\n },\n titleContainer: { padding: theme.space.sm },\n inputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo4}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n outputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo4}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n inputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-start\",\n },\n outputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-end\",\n },\n paramsContainer: {\n borderTop: `1px solid ${theme.colors.atmo4}`,\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n padding: theme.space.sm,\n },\n inputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n outputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n mandatory: {\n width: 10,\n height: 10,\n margin: theme.spacing(0, theme.space.xs),\n borderRadius: theme.radii.circle,\n backgroundColor: theme.colors.negative_20,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","groupContainer","group","color","base_dark","titleContainer","space","sm","~~inputsTitleContainer~~","xs","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","inputsContainer","gap","outputsContainer","paramsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJC,cAAcC,MAAMC,MAAMC;AAAAA,IAC1BC,iBAAiBH,MAAMI,OAAOC;AAAAA,IAC9BC,WAAWN,MAAMI,OAAOG;AAAAA,IACxBC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,SAASV,MAAMW,QAAQ,KAAK,CAAC;AAAA,IAC7BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,gBAAgB;AAAA,IACdJ,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAE,OAAO;AAAA,IACLC,OAAOlB,MAAMI,OAAOe;AAAAA,EACtB;AAAA,EACAC,gBAAgB;AAAA,~~IAAEV~~,SAASV,MAAMqB,MAAMC;~~AAAAA~~,~~EAAG~~;AAAA,~~EAC1CC~~,sBAAsB;AAAA,~~IACpBX~~,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMqB,~~MAAMG~~;AAAAA,~~IACrBrB~~,iBAAiBH,MAAMI,~~OAAOqB~~;AAAAA,IAC9BC,WAAY,~~aAAY1B~~,MAAMI,~~OAAOuB~~,KAAM;AAAA,IAC3CC,cAAe,~~aAAY5B~~,MAAMI,~~OAAOuB~~,KAAM;AAAA,EAChD;AAAA,EACAE,uBAAuB;AAAA,~~IACrBjB~~,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMqB,~~MAAMG~~;AAAAA,~~IACrBrB~~,iBAAiBH,MAAMI,~~OAAOqB~~;AAAAA,IAC9BC,WAAY,~~aAAY1B~~,MAAMI,~~OAAOuB~~,KAAM;AAAA,IAC3CC,cAAe,~~aAAY5B~~,MAAMI,~~OAAOuB~~,KAAM;AAAA,EAChD;AAAA,EACAG,iBAAiB;AAAA,~~IACflB~~,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMqB,~~MAAMC~~;AAAAA,IACrBS,~~KAAK/B~~,MAAMqB,~~MAAMG~~;AAAAA,~~IACjBT~~,YAAY;AAAA,EACd;AAAA,~~EACAiB~~,kBAAkB;AAAA,~~IAChBpB~~,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMqB,~~MAAMC~~;AAAAA,IACrBS,~~KAAK/B~~,MAAMqB,~~MAAMG~~;AAAAA,~~IACjBT~~,YAAY;AAAA,EACd;AAAA,~~EACAkB~~,iBAAiB;AAAA,IACfP,WAAY,~~aAAY1B~~,MAAMI,~~OAAOuB~~,KAAM;AAAA,~~IAC3Cf~~,SAAS;AAAA,IACTC,eAAe;AAAA,~~IACfkB~~,~~KAAK/B~~,MAAMqB,~~MAAMG~~;AAAAA,~~IACjBd~~,SAASV,MAAMqB,~~MAAMC~~;AAAAA,EACvB;AAAA,EACAY,gBAAgB;AAAA,~~IACdtB~~,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,~~EACAoB~~,iBAAiB;AAAA,~~IACfvB~~,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,~~EACAqB~~,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,~~QAAQvC~~,MAAMW,QAAQ,GAAGX,MAAMqB,~~MAAMG~~,EAAE;AAAA,~~IACvCzB~~,cAAcC,MAAMC,~~MAAMuC~~;AAAAA,~~IAC1BrC~~,iBAAiBH,MAAMI,~~OAAOqC~~;AAAAA,EAChC;AACF,CAAC;"}
1	+ {"version":3,"file":"Node.styles.js","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n root: {\n borderRadius: theme.radii.round,\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n minWidth: \"250px\",\n },\n headerContainer: {\n padding: theme.spacing(0.5, 1),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n groupContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n group: {\n color: theme.colors.base_dark,\n },\n titleContainer: {\n padding: theme.spacing(\n theme.space.xs,\n theme.space.xs,\n theme.space.xs,\n theme.space.sm\n ),\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n actions: {\n display: \"flex\",\n alignItems: \"center\",\n },\n inputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo4}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n outputsTitleContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n padding: theme.space.xs,\n backgroundColor: theme.colors.atmo2,\n borderTop: `1px solid ${theme.colors.atmo4}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n inputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-start\",\n },\n outputsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n gap: theme.space.xs,\n alignItems: \"flex-end\",\n },\n paramsContainer: {\n borderTop: `1px solid ${theme.colors.atmo4}`,\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.xs,\n padding: theme.space.sm,\n },\n inputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n outputContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n mandatory: {\n width: 10,\n height: 10,\n margin: theme.spacing(0, theme.space.xs),\n borderRadius: theme.radii.circle,\n backgroundColor: theme.colors.negative_20,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","groupContainer","group","color","base_dark","titleContainer","space","xs","sm","actions","inputsTitleContainer","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","inputsContainer","gap","outputsContainer","paramsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJC,cAAcC,MAAMC,MAAMC;AAAAA,IAC1BC,iBAAiBH,MAAMI,OAAOC;AAAAA,IAC9BC,WAAWN,MAAMI,OAAOG;AAAAA,IACxBC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,SAASV,MAAMW,QAAQ,KAAK,CAAC;AAAA,IAC7BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,gBAAgB;AAAA,IACdJ,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAE,OAAO;AAAA,IACLC,OAAOlB,MAAMI,OAAOe;AAAAA,EACtB;AAAA,EACAC,gBAAgB;AAAA,IACdV,SAASV,MAAMW,QACbX,MAAMqB,MAAMC,IACZtB,MAAMqB,MAAMC,IACZtB,MAAMqB,MAAMC,IACZtB,MAAMqB,MAAME,EACd;AAAA,IACAX,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAS,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTG,YAAY;AAAA,EACd;AAAA,EACAU,sBAAsB;AAAA,IACpBb,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMqB,MAAMC;AAAAA,IACrBnB,iBAAiBH,MAAMI,OAAOsB;AAAAA,IAC9BC,WAAY,aAAY3B,MAAMI,OAAOwB,KAAM;AAAA,IAC3CC,cAAe,aAAY7B,MAAMI,OAAOwB,KAAM;AAAA,EAChD;AAAA,EACAE,uBAAuB;AAAA,IACrBlB,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMqB,MAAMC;AAAAA,IACrBnB,iBAAiBH,MAAMI,OAAOsB;AAAAA,IAC9BC,WAAY,aAAY3B,MAAMI,OAAOwB,KAAM;AAAA,IAC3CC,cAAe,aAAY7B,MAAMI,OAAOwB,KAAM;AAAA,EAChD;AAAA,EACAG,iBAAiB;AAAA,IACfnB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMqB,MAAME;AAAAA,IACrBS,KAAKhC,MAAMqB,MAAMC;AAAAA,IACjBP,YAAY;AAAA,EACd;AAAA,EACAkB,kBAAkB;AAAA,IAChBrB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMqB,MAAME;AAAAA,IACrBS,KAAKhC,MAAMqB,MAAMC;AAAAA,IACjBP,YAAY;AAAA,EACd;AAAA,EACAmB,iBAAiB;AAAA,IACfP,WAAY,aAAY3B,MAAMI,OAAOwB,KAAM;AAAA,IAC3ChB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfmB,KAAKhC,MAAMqB,MAAMC;AAAAA,IACjBZ,SAASV,MAAMqB,MAAME;AAAAA,EACvB;AAAA,EACAY,gBAAgB;AAAA,IACdvB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAqB,iBAAiB;AAAA,IACfxB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAsB,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,QAAQxC,MAAMW,QAAQ,GAAGX,MAAMqB,MAAMC,EAAE;AAAA,IACvCvB,cAAcC,MAAMC,MAAMwC;AAAAA,IAC1BtC,iBAAiBH,MAAMI,OAAOsC;AAAAA,EAChC;AACF,CAAC;"}

package/dist/types/index.d.ts CHANGED Viewed

@@ -8,6 +8,8 @@ import { Edge } from 'reactflow';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
 import { FunctionComponent } from 'react';
 import { GetMiniMapNodeAttribute } from 'reactflow';
+import { HvActionGeneric } from '@hitachivantara/uikit-react-core';
+import { HvActionsGenericProps } from '@hitachivantara/uikit-react-core';
 import { HvAvatarSize } from '@hitachivantara/uikit-react-core';
 import { HvBaseProps } from '@hitachivantara/uikit-react-core';
 import { HvBreakpoints } from '@hitachivantara/uikit-react-core';
@@ -37,6 +39,7 @@ export declare const flowNodeClasses: {
     root: "HvFlowNode-root";
     group: "HvFlowNode-group";
     mandatory: "HvFlowNode-mandatory";
+    actions: "HvFlowNode-actions";
     titleContainer: "HvFlowNode-titleContainer";
     headerContainer: "HvFlowNode-headerContainer";
     groupContainer: "HvFlowNode-groupContainer";
@@ -79,7 +82,7 @@ declare interface HvDroppableFlowProps<NodeData = any, NodeType extends string |
  *
  * DISCLAIMER: This component is a work in progress and there might be breaking changes.
  */
-export declare const HvFlow: ({ nodeTypes, nodeGroups, sidebar, dndContextProps, ...others }: HvFlowProps) => JSX_2.Element;
+export declare const HvFlow: ({ nodeTypes, nodeGroups, sidebar, defaultActions, dndContextProps, ...others }: HvFlowProps) => JSX_2.Element;
 export declare const HvFlowBackground: ({ color, ...others }: HvFlowBackgroundProps) => JSX_2.Element;
@@ -131,7 +134,7 @@ export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMap
     classes?: HvFlowMinimapClasses;
 }
-export declare const HvFlowNode: ({ id, type, title, description, expanded, params, classes: classesProp, className, }: HvFlowNodeProps) => JSX_2.Element;
+export declare const HvFlowNode: ({ id, type, description, expanded, params, actions, actionCallback, maxVisibleActions, classes: classesProp, className, }: HvFlowNodeProps) => JSX_2.Element | null;
 export declare type HvFlowNodeClasses = ExtractNames<typeof useClasses_11>;
@@ -186,8 +189,6 @@ export declare type HvFlowNodeParam = {
 };
 export declare interface HvFlowNodeProps extends Omit<HvBaseProps, "id">, NodeProps {
-    /** Node title */
-    title: string;
     /** Node description */
     description: string;
     /** Node expanded */
@@ -198,6 +199,12 @@ export declare interface HvFlowNodeProps extends Omit<HvBaseProps, "id">, NodePr
     outputs?: HvFlowNodeOutput[];
     /** Node parameters */
     params?: HvFlowNodeParam[];
+    /** Node actions */
+    actions?: HvActionGeneric[];
+    /** Node action callback */
+    actionCallback?: HvActionsGenericProps["actionsCallback"];
+    /** Node maximum number of actions visible */
+    maxVisibleActions?: number;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvFlowNodeClasses;
 }
@@ -213,6 +220,8 @@ export declare interface HvFlowProps<NodeData = any, NodeType extends string | u
     nodeTypes?: HvFlowNodeTypes<NodeGroups>;
     /** Flow sidebar. */
     sidebar?: React.ReactNode;
+    /** Flow default actions. */
+    defaultActions?: HvActionGeneric[];
     /**
      * Dnd Kit context props. This should be used for accessibility purposes.
      *
@@ -481,11 +490,12 @@ declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titl
     cx: (...args: any) => string;
 };
-declare const useClasses_11: (classesProp?: Partial<Record<"root" | "group" | "mandatory" | "titleContainer" | "headerContainer" | "groupContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "paramsContainer" | "inputContainer" | "outputContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_11: (classesProp?: Partial<Record<"root" | "group" | "mandatory" | "actions" | "titleContainer" | "headerContainer" | "groupContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "paramsContainer" | "inputContainer" | "outputContainer", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         group: string;
         mandatory: string;
+        actions: string;
         titleContainer: string;
         headerContainer: string;
         groupContainer: string;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -48,7 +48,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "05db5a640d352bf7f44caffc109394fef5be37aa",
+  "gitHead": "f1d113e5f993a61c1a2a2733001ac2f70b8ede56",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {