@hitachivantara/uikit-react-lab 5.15.0 → 5.16.0

package/dist/cjs/components/Flow/Empty/Empty.cjs

@@ -12,7 +12,7 @@ const HvFlowEmpty = ({
     classes,
     cx
   } = Empty_styles.useClasses();
-  const nodes = ReactFlow.useStore((state) => state.getNodes());
+  const nodes = ReactFlow.useNodes();
   return !nodes || (nodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvEmptyState, { className: cx(classes.root, className), ...others }) : null);
 };
 exports.HvFlowEmpty = HvFlowEmpty;

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

@@ -1 +1 @@
-{"version":3,"file":"Empty.cjs","sources":["../../../../../src/components/Flow/Empty/Empty.tsx"],"sourcesContent":["import { useStore } from \"reactflow\";\nimport {\n  HvEmptyState,\n  HvEmptyStateProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./Empty.styles\";\n\nexport interface HvFlowEmptyProps extends HvEmptyStateProps {}\n\nexport const HvFlowEmpty = ({ className, ...others }: HvFlowEmptyProps) => {\n  const { classes, cx } = useClasses();\n  const nodes = useStore((state) => state.getNodes());\n  return (\n    !nodes ||\n    (nodes.length === 0 ? (\n      <HvEmptyState className={cx(classes.root, className)} {...others} />\n    ) : null)\n  );\n};\n"],"names":["HvFlowEmpty","className","others","classes","cx","useClasses","nodes","useStore","state","getNodes","length","jsx","HvEmptyState","root"],"mappings":";;;;;;AAUO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAAW,GAAGC;AAAyB,MAAM;AACnE,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,MAAOC,aAAW,WAAA;AACnC,QAAMC,QAAQC,UAAAA,SAAUC,CAAUA,UAAAA,MAAMC,UAAU;AAClD,SACE,CAACH,UACAA,MAAMI,WAAW,IACfC,2BAAAA,IAAAC,eAAAA,cAAA,EAAa,WAAWR,GAAGD,QAAQU,MAAMZ,SAAS,GAAG,GAAIC,OAAU,CAAA,IAClE;AAER;;"}
+{"version":3,"file":"Empty.cjs","sources":["../../../../../src/components/Flow/Empty/Empty.tsx"],"sourcesContent":["import { useNodes } from \"reactflow\";\nimport {\n  HvEmptyState,\n  HvEmptyStateProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./Empty.styles\";\n\nexport interface HvFlowEmptyProps extends HvEmptyStateProps {}\n\nexport const HvFlowEmpty = ({ className, ...others }: HvFlowEmptyProps) => {\n  const { classes, cx } = useClasses();\n  const nodes = useNodes();\n  return (\n    !nodes ||\n    (nodes.length === 0 ? (\n      <HvEmptyState className={cx(classes.root, className)} {...others} />\n    ) : null)\n  );\n};\n"],"names":["HvFlowEmpty","className","others","classes","cx","useClasses","nodes","useNodes","length","jsx","HvEmptyState","root"],"mappings":";;;;;;AAUO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAAW,GAAGC;AAAyB,MAAM;AACnE,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,MAAOC,aAAW,WAAA;AACnC,QAAMC,QAAQC,UAAAA;AACd,SACE,CAACD,UACAA,MAAME,WAAW,IACfC,2BAAAA,IAAAC,eAAAA,cAAA,EAAa,WAAWN,GAAGD,QAAQQ,MAAMV,SAAS,GAAG,GAAIC,OAAU,CAAA,IAClE;AAER;;"}

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

@@ -5,6 +5,7 @@ const BaseNode_styles = require("./Node/BaseNode.styles.cjs");
 require("@emotion/react/jsx-runtime");
 require("react");
 require("reactflow");
+require("uid");
 require("@hitachivantara/uikit-react-icons");
 require("@hitachivantara/uikit-styles");
 const {

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.styles.cjs","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowBaseNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: {\n    height: \"100%\",\n    \"& .react-flow__handle\": {\n      backgroundColor: theme.colors.secondary_60,\n      width: 8,\n      height: 8,\n      zIndex: theme.zIndices.overlay,\n    },\n    \"& .react-flow__handle-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    \"& .react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    [`& .selected > .${flowBaseNodeClasses.root}`]: {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      borderRadius: theme.radii.round,\n      boxSizing: \"border-box\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","backgroundColor","theme","colors","secondary_60","width","zIndex","zIndices","overlay","negative_20","translate","positive_20","flowBaseNodeClasses","border","borderRadius","radii","round","boxSizing"],"mappings":";;;;;;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,eAAAA,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,eAAAA,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,eAAAA,MAAMC,OAAOM;AAAAA,MAC9BJ,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7BT,iBAAiBC,eAAAA,MAAMC,OAAOQ;AAAAA,MAC9BN,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,8BAAoBb,IAAK,EAAC,GAAG;AAAA,MAC9Cc,QAAS,aAAYX,eAAMC,MAAAA,OAAOC,YAAa;AAAA,MAC/CU,cAAcZ,eAAAA,MAAMa,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"Flow.styles.cjs","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowBaseNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: {\n    height: \"100%\",\n    \"& .react-flow__handle\": {\n      backgroundColor: theme.colors.secondary_60,\n      width: 8,\n      height: 8,\n      zIndex: theme.zIndices.overlay,\n    },\n    \"& .react-flow__handle-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    \"& .react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    [`& .selected > .${flowBaseNodeClasses.root}`]: {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      borderRadius: theme.radii.round,\n      boxSizing: \"border-box\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","backgroundColor","theme","colors","secondary_60","width","zIndex","zIndices","overlay","negative_20","translate","positive_20","flowBaseNodeClasses","border","borderRadius","radii","round","boxSizing"],"mappings":";;;;;;;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,eAAAA,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,eAAAA,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,eAAAA,MAAMC,OAAOM;AAAAA,MAC9BJ,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7BT,iBAAiBC,eAAAA,MAAMC,OAAOQ;AAAAA,MAC9BN,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,8BAAoBb,IAAK,EAAC,GAAG;AAAA,MAC9Cc,QAAS,aAAYX,eAAMC,MAAAA,OAAOC,YAAa;AAAA,MAC/CU,cAAcZ,eAAAA,MAAMa,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;;;"}

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const ReactFlow = require("reactflow");
+const uid = require("uid");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
@@ -59,8 +60,8 @@ const HvFlowBaseNode = ({
     cx,
     css
   } = BaseNode_styles.useClasses(classesProp);
-  const edges = ReactFlow.useStore((s) => s.edges);
-  const nodes = ReactFlow.useStore((s) => s.getNodes());
+  const edges = ReactFlow.useEdges();
+  const nodes = ReactFlow.useNodes();
   const node = nodes.find((n) => n.id === id);
   const handleDefaultAction = React.useCallback((action) => {
     if (!node)
@@ -78,7 +79,7 @@ const HvFlowBaseNode = ({
       case "duplicate":
         reactFlowInstance.addNodes([{
           ...node,
-          id: `${reactFlowInstance.getNodes().length + 1}`,
+          id: uid.uid(),
           position: {
             x: node.position.x,
             y: node.position.y + (node.height || 0) + 20
@@ -92,6 +93,7 @@ const HvFlowBaseNode = ({
   if (!node)
     return null;
   const color = uikitStyles.getColor(colorProp);
+  const iconColor = React.isValidElement(icon) ? uikitStyles.getColor(icon.props.color || "base_dark") : uikitStyles.getColor("base_dark");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(
     "nowheel",
     // Disables the default canvas pan behaviour when scrolling inside the node
@@ -105,7 +107,11 @@ const HvFlowBaseNode = ({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(css({
       backgroundColor: color
     }), classes.headerContainer), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.titleContainer, css({
+        "& svg *.color0": {
+          fill: iconColor
+        }
+      })), children: [
         icon,
         /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title4", className: classes.title, children: title })
       ] }),

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.cjs","sources":["../../../../../src/components/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\n\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n  useStore,\n} from \"reactflow\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvBaseProps,\n  HvButton,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFlowNodeAction,\n  HvFlowBuiltInActions,\n  HvFlowNodeInput,\n  HvFlowNodeOutput,\n} from \"../types/index\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: HvFlowNodeInput[];\n  /** Node outputs */\n  outputs?: HvFlowNodeOutput[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  idx: number,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n\n  return false;\n};\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs,\n  outputs,\n  nodeActions = defaultActions,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  useEffect(() => {\n    registerNode(id, { label: title || \"\", inputs, outputs });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const edges = useStore((s) => s.edges);\n  const nodes = useStore((s) => s.getNodes());\n\n  const node = nodes.find((n) => n.id === id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: `${reactFlowInstance.getNodes().length + 1}`,\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div className={classes.titleContainer}>\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.title}>\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","defaultActions","label","icon","Delete","Duplicate","renderedIcon","actionIcon","isValidElement","HvFlowBaseNode","title","headerItems","color","colorProp","inputs","outputs","nodeActions","classes","classesProp","className","children","registerNode","unregisterNode","useNodeMetaRegistry","useEffect","showActions","setShowActions","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","useStore","s","nodes","getNodes","node","find","n","handleDefaultAction","useCallback","action","callback","deleteElements","addNodes","length","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","getColor","jsxs","border","root","jsx","NodeToolbar","map","HvButton","backgroundColor","headerContainer","titleContainer","HvTypography","display","contentContainer","Fragment","inputsTitleContainer","inputsContainer","input","inputContainer","Handle","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}
+{"version":3,"file":"BaseNode.cjs","sources":["../../../../../src/components/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useEdges,\n  useNodes,\n  useReactFlow,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvBaseProps,\n  HvButton,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFlowNodeAction,\n  HvFlowBuiltInActions,\n  HvFlowNodeInput,\n  HvFlowNodeOutput,\n} from \"../types\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: HvFlowNodeInput[];\n  /** Node outputs */\n  outputs?: HvFlowNodeOutput[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  idx: number,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n\n  return false;\n};\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs,\n  outputs,\n  nodeActions = defaultActions,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  useEffect(() => {\n    registerNode(id, { label: title || \"\", inputs, outputs });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const edges = useEdges();\n  const nodes = useNodes();\n\n  const node = nodes.find((n) => n.id === id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: uid(),\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n  const iconColor = isValidElement(icon)\n    ? getColor(icon.props.color || \"base_dark\")\n    : getColor(\"base_dark\");\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } })\n          )}\n        >\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.title}>\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","defaultActions","label","icon","Delete","Duplicate","renderedIcon","actionIcon","isValidElement","HvFlowBaseNode","title","headerItems","color","colorProp","inputs","outputs","nodeActions","classes","classesProp","className","children","registerNode","unregisterNode","useNodeMetaRegistry","useEffect","showActions","setShowActions","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","useEdges","nodes","useNodes","node","find","n","handleDefaultAction","useCallback","action","callback","deleteElements","addNodes","uid","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","getColor","iconColor","props","jsxs","border","root","jsx","NodeToolbar","map","HvButton","backgroundColor","headerContainer","titleContainer","fill","HvTypography","display","contentContainer","length","Fragment","inputsTitleContainer","inputsContainer","input","inputContainer","Handle","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}

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

@@ -51,8 +51,8 @@ const HvFlowNode = ({
   const hasParams = !!(params && params.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(BaseNode.HvFlowBaseNode, { id, type, title: groupLabel, icon, color, inputs, outputs, nodeActions: defaultActions, classes: classesProp, headerItems: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     headerItems,
-    description && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { title: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: description }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, {}) }) }),
-    hasParams && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: () => setShowParams((p) => !p), children: showParams ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, {}) })
+    description && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { title: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: description }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { color: "base_dark" }) }) }),
+    hasParams && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, overrideIconColors: false, onClick: () => setShowParams((p) => !p), children: showParams ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, { color: "base_dark" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { color: "base_dark" }) })
   ] }), ...props, children: [
     (subtitle || actsVisible?.length || actsDropdown?.length) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.subtitleContainer, children: [
       subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: subtitle }) }),

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

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

package/dist/cjs/components/Flow/hooks/useFlowNode.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const ReactFlow = require("reactflow");
-const useFlowNode = (id) => {
-  const nodes = ReactFlow.useStore((state) => state.getNodes());
-  const edges = ReactFlow.useStore((state) => state.edges);
+function useFlowNode(id) {
+  const nodes = ReactFlow.useNodes();
+  const edges = ReactFlow.useEdges();
   return {
     // self node
     get node() {
@@ -20,6 +20,6 @@ const useFlowNode = (id) => {
       return parentNodeArray;
     }
   };
-};
+}
 exports.useFlowNode = useFlowNode;
 //# sourceMappingURL=useFlowNode.cjs.map

package/dist/cjs/components/Flow/hooks/useFlowNode.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFlowNode.cjs","sources":["../../../../../src/components/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { Edge, Node, useStore } from \"reactflow\";\n\nexport const useFlowNode = (id: string) => {\n  const nodes = useStore((state) => state.getNodes());\n  const edges = useStore((state) => state.edges);\n\n  return {\n    // self node\n    get node() {\n      const self = nodes.find((n: Node) => n.id === id);\n      return self;\n    },\n\n    // parent nodes\n    get parentNodes() {\n      const connectedEdges = edges.filter((e: Edge) => e.target === id);\n      const parentNodeArray = connectedEdges.map((e) => {\n        const parentNode = nodes.find((n: Node) => n.id === e.source) as Node;\n        return parentNode;\n      });\n      return parentNodeArray;\n    },\n  };\n};\n"],"names":["useFlowNode","id","nodes","useStore","state","getNodes","edges","node","self","find","n","parentNodes","connectedEdges","filter","e","target","parentNodeArray","map","parentNode","source"],"mappings":";;;AAEaA,MAAAA,cAAcA,CAACC,OAAe;AACzC,QAAMC,QAAQC,UAAAA,SAAUC,CAAUA,UAAAA,MAAMC,UAAU;AAClD,QAAMC,QAAQH,UAAAA,SAAUC,CAAUA,UAAAA,MAAME,KAAK;AAEtC,SAAA;AAAA;AAAA,IAEL,IAAIC,OAAO;AACT,YAAMC,OAAON,MAAMO,KAAK,CAACC,MAAYA,EAAET,OAAOA,EAAE;AACzCO,aAAAA;AAAAA,IACT;AAAA;AAAA,IAGA,IAAIG,cAAc;AAChB,YAAMC,iBAAiBN,MAAMO,OAAO,CAACC,MAAYA,EAAEC,WAAWd,EAAE;AAC1De,YAAAA,kBAAkBJ,eAAeK,IAAKH,CAAM,MAAA;AAC1CI,cAAAA,aAAahB,MAAMO,KAAK,CAACC,MAAYA,EAAET,OAAOa,EAAEK,MAAM;AACrDD,eAAAA;AAAAA,MAAAA,CACR;AACMF,aAAAA;AAAAA,IACT;AAAA,EAAA;AAEJ;;"}
+{"version":3,"file":"useFlowNode.cjs","sources":["../../../../../src/components/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { Edge, Node, useEdges, useNodes } from \"reactflow\";\n\nexport function useFlowNode<T = any>(id: string) {\n  const nodes = useNodes<T>();\n  const edges = useEdges();\n\n  return {\n    // self node\n    get node() {\n      const self = nodes.find((n: Node) => n.id === id);\n      return self;\n    },\n\n    // parent nodes\n    get parentNodes() {\n      const connectedEdges = edges.filter((e: Edge) => e.target === id);\n      const parentNodeArray = connectedEdges.map((e) => {\n        const parentNode = nodes.find((n: Node) => n.id === e.source) as Node;\n        return parentNode;\n      });\n      return parentNodeArray;\n    },\n  };\n}\n"],"names":["useFlowNode","id","nodes","useNodes","edges","useEdges","node","self","find","n","parentNodes","connectedEdges","filter","e","target","parentNodeArray","map","parentNode","source"],"mappings":";;;AAEO,SAASA,YAAqBC,IAAY;AAC/C,QAAMC,QAAQC,UAAAA;AACd,QAAMC,QAAQC,UAAAA;AAEP,SAAA;AAAA;AAAA,IAEL,IAAIC,OAAO;AACT,YAAMC,OAAOL,MAAMM,KAAK,CAACC,MAAYA,EAAER,OAAOA,EAAE;AACzCM,aAAAA;AAAAA,IACT;AAAA;AAAA,IAGA,IAAIG,cAAc;AAChB,YAAMC,iBAAiBP,MAAMQ,OAAO,CAACC,MAAYA,EAAEC,WAAWb,EAAE;AAC1Dc,YAAAA,kBAAkBJ,eAAeK,IAAKH,CAAM,MAAA;AAC1CI,cAAAA,aAAaf,MAAMM,KAAK,CAACC,MAAYA,EAAER,OAAOY,EAAEK,MAAM;AACrDD,eAAAA;AAAAA,MAAAA,CACR;AACMF,aAAAA;AAAAA,IACT;AAAA,EAAA;AAEJ;;"}

package/dist/esm/components/Flow/Empty/Empty.js

@@ -1,5 +1,5 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useStore } from "reactflow";
+import { useNodes } from "reactflow";
 import { HvEmptyState } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./Empty.styles.js";
 const HvFlowEmpty = ({
@@ -10,7 +10,7 @@ const HvFlowEmpty = ({
     classes,
     cx
   } = useClasses();
-  const nodes = useStore((state) => state.getNodes());
+  const nodes = useNodes();
   return !nodes || (nodes.length === 0 ? /* @__PURE__ */ jsx(HvEmptyState, { className: cx(classes.root, className), ...others }) : null);
 };
 export {

package/dist/esm/components/Flow/Empty/Empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"Empty.js","sources":["../../../../../src/components/Flow/Empty/Empty.tsx"],"sourcesContent":["import { useStore } from \"reactflow\";\nimport {\n  HvEmptyState,\n  HvEmptyStateProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./Empty.styles\";\n\nexport interface HvFlowEmptyProps extends HvEmptyStateProps {}\n\nexport const HvFlowEmpty = ({ className, ...others }: HvFlowEmptyProps) => {\n  const { classes, cx } = useClasses();\n  const nodes = useStore((state) => state.getNodes());\n  return (\n    !nodes ||\n    (nodes.length === 0 ? (\n      <HvEmptyState className={cx(classes.root, className)} {...others} />\n    ) : null)\n  );\n};\n"],"names":["HvFlowEmpty","className","others","classes","cx","useClasses","nodes","useStore","state","getNodes","length","root"],"mappings":";;;;AAUO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAAW,GAAGC;AAAyB,MAAM;AACnE,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,MAAOC,WAAW;AACnC,QAAMC,QAAQC,SAAUC,CAAUA,UAAAA,MAAMC,UAAU;AAClD,SACE,CAACH,UACAA,MAAMI,WAAW,IACf,oBAAA,cAAA,EAAa,WAAWN,GAAGD,QAAQQ,MAAMV,SAAS,GAAG,GAAIC,OAAU,CAAA,IAClE;AAER;"}
+{"version":3,"file":"Empty.js","sources":["../../../../../src/components/Flow/Empty/Empty.tsx"],"sourcesContent":["import { useNodes } from \"reactflow\";\nimport {\n  HvEmptyState,\n  HvEmptyStateProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./Empty.styles\";\n\nexport interface HvFlowEmptyProps extends HvEmptyStateProps {}\n\nexport const HvFlowEmpty = ({ className, ...others }: HvFlowEmptyProps) => {\n  const { classes, cx } = useClasses();\n  const nodes = useNodes();\n  return (\n    !nodes ||\n    (nodes.length === 0 ? (\n      <HvEmptyState className={cx(classes.root, className)} {...others} />\n    ) : null)\n  );\n};\n"],"names":["HvFlowEmpty","className","others","classes","cx","useClasses","nodes","useNodes","length","root"],"mappings":";;;;AAUO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAAW,GAAGC;AAAyB,MAAM;AACnE,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,MAAOC,WAAW;AACnC,QAAMC,QAAQC;AACd,SACE,CAACD,UACAA,MAAME,WAAW,IACf,oBAAA,cAAA,EAAa,WAAWJ,GAAGD,QAAQM,MAAMR,SAAS,GAAG,GAAIC,OAAU,CAAA,IAClE;AAER;"}

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

@@ -3,6 +3,7 @@ import { staticClasses as staticClasses$1 } from "./Node/BaseNode.styles.js";
 import "@emotion/react/jsx-runtime";
 import "react";
 import "reactflow";
+import "uid";
 import "@hitachivantara/uikit-react-icons";
 import "@hitachivantara/uikit-styles";
 const {

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.styles.js","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowBaseNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: {\n    height: \"100%\",\n    \"& .react-flow__handle\": {\n      backgroundColor: theme.colors.secondary_60,\n      width: 8,\n      height: 8,\n      zIndex: theme.zIndices.overlay,\n    },\n    \"& .react-flow__handle-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    \"& .react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    [`& .selected > .${flowBaseNodeClasses.root}`]: {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      borderRadius: theme.radii.round,\n      boxSizing: \"border-box\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","backgroundColor","theme","colors","secondary_60","width","zIndex","zIndices","overlay","negative_20","translate","positive_20","flowBaseNodeClasses","border","borderRadius","radii","round","boxSizing"],"mappings":";;;;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,MAAMC,OAAOM;AAAAA,MAC9BJ,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7BT,iBAAiBC,MAAMC,OAAOQ;AAAAA,MAC9BN,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,gBAAoBb,IAAK,EAAC,GAAG;AAAA,MAC9Cc,QAAS,aAAYX,MAAMC,OAAOC,YAAa;AAAA,MAC/CU,cAAcZ,MAAMa,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Flow.styles.js","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowBaseNodeClasses } from \"./Node\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: {\n    height: \"100%\",\n    \"& .react-flow__handle\": {\n      backgroundColor: theme.colors.secondary_60,\n      width: 8,\n      height: 8,\n      zIndex: theme.zIndices.overlay,\n    },\n    \"& .react-flow__handle-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    \"& .react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\n      width: 12,\n      height: 12,\n      \"&.react-flow__handle-left\": {\n        translate: \"0 4px\",\n      },\n    },\n    [`& .selected > .${flowBaseNodeClasses.root}`]: {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      borderRadius: theme.radii.round,\n      boxSizing: \"border-box\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height","backgroundColor","theme","colors","secondary_60","width","zIndex","zIndices","overlay","negative_20","translate","positive_20","flowBaseNodeClasses","border","borderRadius","radii","round","boxSizing"],"mappings":";;;;;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvBC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,OAAO;AAAA,MACPL,QAAQ;AAAA,MACRM,QAAQJ,MAAMK,SAASC;AAAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClCP,iBAAiBC,MAAMC,OAAOM;AAAAA,MAC9BJ,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7BT,iBAAiBC,MAAMC,OAAOQ;AAAAA,MAC9BN,OAAO;AAAA,MACPL,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3BU,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAE,kBAAiBE,gBAAoBb,IAAK,EAAC,GAAG;AAAA,MAC9Cc,QAAS,aAAYX,MAAMC,OAAOC,YAAa;AAAA,MAC/CU,cAAcZ,MAAMa,MAAMC;AAAAA,MAC1BC,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;"}

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { useEffect, useState, useCallback, isValidElement } from "react";
-import { useReactFlow, useStore, NodeToolbar, Handle, Position } from "reactflow";
+import { useReactFlow, useEdges, useNodes, NodeToolbar, Handle, Position } from "reactflow";
+import { uid } from "uid";
 import { HvButton, HvTypography } from "@hitachivantara/uikit-react-core";
 import { Delete, Duplicate } from "@hitachivantara/uikit-react-icons";
 import { theme, getColor } from "@hitachivantara/uikit-styles";
@@ -58,8 +59,8 @@ const HvFlowBaseNode = ({
     cx,
     css
   } = useClasses(classesProp);
-  const edges = useStore((s) => s.edges);
-  const nodes = useStore((s) => s.getNodes());
+  const edges = useEdges();
+  const nodes = useNodes();
   const node = nodes.find((n) => n.id === id);
   const handleDefaultAction = useCallback((action) => {
     if (!node)
@@ -77,7 +78,7 @@ const HvFlowBaseNode = ({
       case "duplicate":
         reactFlowInstance.addNodes([{
           ...node,
-          id: `${reactFlowInstance.getNodes().length + 1}`,
+          id: uid(),
           position: {
             x: node.position.x,
             y: node.position.y + (node.height || 0) + 20
@@ -91,6 +92,7 @@ const HvFlowBaseNode = ({
   if (!node)
     return null;
   const color = getColor(colorProp);
+  const iconColor = isValidElement(icon) ? getColor(icon.props.color || "base_dark") : getColor("base_dark");
   return /* @__PURE__ */ jsxs("div", { className: cx(
     "nowheel",
     // Disables the default canvas pan behaviour when scrolling inside the node
@@ -104,7 +106,11 @@ const HvFlowBaseNode = ({
     /* @__PURE__ */ jsxs("div", { className: cx(css({
       backgroundColor: color
     }), classes.headerContainer), children: [
-      /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
+      /* @__PURE__ */ jsxs("div", { className: cx(classes.titleContainer, css({
+        "& svg *.color0": {
+          fill: iconColor
+        }
+      })), children: [
         icon,
         /* @__PURE__ */ jsx(HvTypography, { variant: "title4", className: classes.title, children: title })
       ] }),

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.js","sources":["../../../../../src/components/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\n\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n  useStore,\n} from \"reactflow\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvBaseProps,\n  HvButton,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFlowNodeAction,\n  HvFlowBuiltInActions,\n  HvFlowNodeInput,\n  HvFlowNodeOutput,\n} from \"../types/index\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: HvFlowNodeInput[];\n  /** Node outputs */\n  outputs?: HvFlowNodeOutput[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  idx: number,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n\n  return false;\n};\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs,\n  outputs,\n  nodeActions = defaultActions,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  useEffect(() => {\n    registerNode(id, { label: title || \"\", inputs, outputs });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const edges = useStore((s) => s.edges);\n  const nodes = useStore((s) => s.getNodes());\n\n  const node = nodes.find((n) => n.id === id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: `${reactFlowInstance.getNodes().length + 1}`,\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div className={classes.titleContainer}>\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.title}>\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","defaultActions","label","icon","renderedIcon","actionIcon","isValidElement","HvFlowBaseNode","title","headerItems","color","colorProp","inputs","outputs","nodeActions","classes","classesProp","className","children","registerNode","unregisterNode","useNodeMetaRegistry","useEffect","showActions","setShowActions","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","useStore","s","nodes","getNodes","node","find","n","handleDefaultAction","useCallback","action","callback","deleteElements","addNodes","length","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","getColor","border","root","map","backgroundColor","headerContainer","titleContainer","display","contentContainer","inputsTitleContainer","inputsContainer","input","inputContainer","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}
+{"version":3,"file":"BaseNode.js","sources":["../../../../../src/components/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useEdges,\n  useNodes,\n  useReactFlow,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvBaseProps,\n  HvButton,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFlowNodeAction,\n  HvFlowBuiltInActions,\n  HvFlowNodeInput,\n  HvFlowNodeOutput,\n} from \"../types\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: HvFlowNodeInput[];\n  /** Node outputs */\n  outputs?: HvFlowNodeOutput[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  idx: number,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n\n  return false;\n};\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs,\n  outputs,\n  nodeActions = defaultActions,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  useEffect(() => {\n    registerNode(id, { label: title || \"\", inputs, outputs });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const edges = useEdges();\n  const nodes = useNodes();\n\n  const node = nodes.find((n) => n.id === id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: uid(),\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n  const iconColor = isValidElement(icon)\n    ? getColor(icon.props.color || \"base_dark\")\n    : getColor(\"base_dark\");\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } })\n          )}\n        >\n          {icon}\n          <HvTypography variant=\"title4\" className={classes.title}>\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","defaultActions","label","icon","renderedIcon","actionIcon","isValidElement","HvFlowBaseNode","title","headerItems","color","colorProp","inputs","outputs","nodeActions","classes","classesProp","className","children","registerNode","unregisterNode","useNodeMetaRegistry","useEffect","showActions","setShowActions","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","useEdges","nodes","useNodes","node","find","n","handleDefaultAction","useCallback","action","callback","deleteElements","addNodes","uid","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","getColor","iconColor","props","border","root","map","backgroundColor","headerContainer","titleContainer","fill","display","contentContainer","length","inputsTitleContainer","inputsContainer","input","inputContainer","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}

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

@@ -50,8 +50,8 @@ const HvFlowNode = ({
   const hasParams = !!(params && params.length > 0);
   return /* @__PURE__ */ jsxs(HvFlowBaseNode, { id, type, title: groupLabel, icon, color, inputs, outputs, nodeActions: defaultActions, classes: classesProp, headerItems: /* @__PURE__ */ jsxs(Fragment, { children: [
     headerItems,
-    description && /* @__PURE__ */ jsx(HvTooltip, { title: /* @__PURE__ */ jsx(HvTypography, { children: description }), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Info, {}) }) }),
-    hasParams && /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: () => setShowParams((p) => !p), children: showParams ? /* @__PURE__ */ jsx(Up, {}) : /* @__PURE__ */ jsx(Down, {}) })
+    description && /* @__PURE__ */ jsx(HvTooltip, { title: /* @__PURE__ */ jsx(HvTypography, { children: description }), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Info, { color: "base_dark" }) }) }),
+    hasParams && /* @__PURE__ */ jsx(HvButton, { icon: true, overrideIconColors: false, onClick: () => setShowParams((p) => !p), children: showParams ? /* @__PURE__ */ jsx(Up, { color: "base_dark" }) : /* @__PURE__ */ jsx(Down, { color: "base_dark" }) })
   ] }), ...props, children: [
     (subtitle || actsVisible?.length || actsDropdown?.length) && /* @__PURE__ */ jsxs("div", { className: classes.subtitleContainer, children: [
       subtitle && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { children: subtitle }) }),

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

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

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

@@ -1,7 +1,7 @@
-import { useStore } from "reactflow";
-const useFlowNode = (id) => {
-  const nodes = useStore((state) => state.getNodes());
-  const edges = useStore((state) => state.edges);
+import { useNodes, useEdges } from "reactflow";
+function useFlowNode(id) {
+  const nodes = useNodes();
+  const edges = useEdges();
   return {
     // self node
     get node() {
@@ -18,7 +18,7 @@ const useFlowNode = (id) => {
       return parentNodeArray;
     }
   };
-};
+}
 export {
   useFlowNode
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useFlowNode.js","sources":["../../../../../src/components/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { Edge, Node, useStore } from \"reactflow\";\n\nexport const useFlowNode = (id: string) => {\n  const nodes = useStore((state) => state.getNodes());\n  const edges = useStore((state) => state.edges);\n\n  return {\n    // self node\n    get node() {\n      const self = nodes.find((n: Node) => n.id === id);\n      return self;\n    },\n\n    // parent nodes\n    get parentNodes() {\n      const connectedEdges = edges.filter((e: Edge) => e.target === id);\n      const parentNodeArray = connectedEdges.map((e) => {\n        const parentNode = nodes.find((n: Node) => n.id === e.source) as Node;\n        return parentNode;\n      });\n      return parentNodeArray;\n    },\n  };\n};\n"],"names":["useFlowNode","id","nodes","useStore","state","getNodes","edges","node","self","find","n","parentNodes","connectedEdges","filter","e","target","parentNodeArray","map","parentNode","source"],"mappings":";AAEaA,MAAAA,cAAcA,CAACC,OAAe;AACzC,QAAMC,QAAQC,SAAUC,CAAUA,UAAAA,MAAMC,UAAU;AAClD,QAAMC,QAAQH,SAAUC,CAAUA,UAAAA,MAAME,KAAK;AAEtC,SAAA;AAAA;AAAA,IAEL,IAAIC,OAAO;AACT,YAAMC,OAAON,MAAMO,KAAK,CAACC,MAAYA,EAAET,OAAOA,EAAE;AACzCO,aAAAA;AAAAA,IACT;AAAA;AAAA,IAGA,IAAIG,cAAc;AAChB,YAAMC,iBAAiBN,MAAMO,OAAO,CAACC,MAAYA,EAAEC,WAAWd,EAAE;AAC1De,YAAAA,kBAAkBJ,eAAeK,IAAKH,CAAM,MAAA;AAC1CI,cAAAA,aAAahB,MAAMO,KAAK,CAACC,MAAYA,EAAET,OAAOa,EAAEK,MAAM;AACrDD,eAAAA;AAAAA,MAAAA,CACR;AACMF,aAAAA;AAAAA,IACT;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useFlowNode.js","sources":["../../../../../src/components/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { Edge, Node, useEdges, useNodes } from \"reactflow\";\n\nexport function useFlowNode<T = any>(id: string) {\n  const nodes = useNodes<T>();\n  const edges = useEdges();\n\n  return {\n    // self node\n    get node() {\n      const self = nodes.find((n: Node) => n.id === id);\n      return self;\n    },\n\n    // parent nodes\n    get parentNodes() {\n      const connectedEdges = edges.filter((e: Edge) => e.target === id);\n      const parentNodeArray = connectedEdges.map((e) => {\n        const parentNode = nodes.find((n: Node) => n.id === e.source) as Node;\n        return parentNode;\n      });\n      return parentNodeArray;\n    },\n  };\n}\n"],"names":["useFlowNode","id","nodes","useNodes","edges","useEdges","node","self","find","n","parentNodes","connectedEdges","filter","e","target","parentNodeArray","map","parentNode","source"],"mappings":";AAEO,SAASA,YAAqBC,IAAY;AAC/C,QAAMC,QAAQC;AACd,QAAMC,QAAQC;AAEP,SAAA;AAAA;AAAA,IAEL,IAAIC,OAAO;AACT,YAAMC,OAAOL,MAAMM,KAAK,CAACC,MAAYA,EAAER,OAAOA,EAAE;AACzCM,aAAAA;AAAAA,IACT;AAAA;AAAA,IAGA,IAAIG,cAAc;AAChB,YAAMC,iBAAiBP,MAAMQ,OAAO,CAACC,MAAYA,EAAEC,WAAWb,EAAE;AAC1Dc,YAAAA,kBAAkBJ,eAAeK,IAAKH,CAAM,MAAA;AAC1CI,cAAAA,aAAaf,MAAMM,KAAK,CAACC,MAAYA,EAAER,OAAOY,EAAEK,MAAM;AACrDD,eAAAA;AAAAA,MAAAA,CACR;AACMF,aAAAA;AAAAA,IACT;AAAA,EAAA;AAEJ;"}

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 import { BackgroundProps } from 'reactflow';
 import { ComponentClass } from 'react';
 import { ControlProps } from 'reactflow';
-import type { CSSInterpolation } from '@emotion/serialize';
+import { CSSInterpolation } from '@emotion/serialize';
 import { Dispatch } from 'react';
 import { DndContextProps } from '@dnd-kit/core';
 import { DragEndEvent } from '@dnd-kit/core';
@@ -20,7 +20,7 @@ import { HvColorAny } from '@hitachivantara/uikit-styles';
 import { HvDialogProps } from '@hitachivantara/uikit-react-core';
 import { HvDrawerProps } from '@hitachivantara/uikit-react-core';
 import { HvEmptyStateProps } from '@hitachivantara/uikit-react-core';
-import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
+import { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 import { MiniMapProps } from 'reactflow';
 import { ModalProps } from '@mui/material';
 import { Node as Node_2 } from 'reactflow';
@@ -31,17 +31,17 @@ import { ReactFlowProps } from 'reactflow';
 import { SetStateAction } from 'react';
 
 export declare const flowBaseNodeClasses: {
-    title: "HvFlowBaseNode-title";
     root: "HvFlowBaseNode-root";
-    mandatory: "HvFlowBaseNode-mandatory";
+    title: "HvFlowBaseNode-title";
     titleContainer: "HvFlowBaseNode-titleContainer";
+    mandatory: "HvFlowBaseNode-mandatory";
+    inputContainer: "HvFlowBaseNode-inputContainer";
+    contentContainer: "HvFlowBaseNode-contentContainer";
     headerContainer: "HvFlowBaseNode-headerContainer";
     inputsTitleContainer: "HvFlowBaseNode-inputsTitleContainer";
     outputsTitleContainer: "HvFlowBaseNode-outputsTitleContainer";
-    contentContainer: "HvFlowBaseNode-contentContainer";
     inputsContainer: "HvFlowBaseNode-inputsContainer";
     outputsContainer: "HvFlowBaseNode-outputsContainer";
-    inputContainer: "HvFlowBaseNode-inputContainer";
     outputContainer: "HvFlowBaseNode-outputContainer";
 };
 
@@ -556,19 +556,19 @@ export declare interface HvWizardTitleProps extends HvBaseProps {
 }
 
 export declare const stepNavigationClasses: {
-    li: "HvStepNavigation-li";
-    ol: "HvStepNavigation-ol";
     root: "HvStepNavigation-root";
     separator: "HvStepNavigation-separator";
+    li: "HvStepNavigation-li";
+    ol: "HvStepNavigation-ol";
     titles: "HvStepNavigation-titles";
 };
 
-declare const useClasses: (classesProp?: Partial<Record<"li" | "ol" | "root" | "separator" | "titles", string>>, addStatic?: boolean) => {
+declare const useClasses: (classesProp?: Partial<Record<"root" | "separator" | "li" | "ol" | "titles", string>>, addStatic?: boolean) => {
     classes: {
-        li: string;
-        ol: string;
         root: string;
         separator: string;
+        li: string;
+        ol: string;
         titles: string;
     };
     css: {
@@ -595,19 +595,19 @@ declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titl
     cx: (...args: any) => string;
 };
 
-declare const useClasses_11: (classesProp?: Partial<Record<"title" | "root" | "mandatory" | "titleContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputContainer" | "outputContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_11: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "inputContainer" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "outputContainer", string>>, addStatic?: boolean) => {
     classes: {
-        title: string;
         root: string;
-        mandatory: string;
+        title: string;
         titleContainer: string;
+        mandatory: string;
+        inputContainer: string;
+        contentContainer: string;
         headerContainer: string;
         inputsTitleContainer: string;
         outputsTitleContainer: string;
-        contentContainer: string;
         inputsContainer: string;
         outputsContainer: string;
-        inputContainer: string;
         outputContainer: string;
     };
     css: {
@@ -630,16 +630,16 @@ declare const useClasses_12: (classesProp?: Partial<Record<"actions" | "subtitle
     cx: (...args: any) => string;
 };
 
-declare const useClasses_2: (classesProp?: Partial<Record<"xl" | "lg" | "md" | "sm" | "xs" | "root" | "ghost" | "avatar" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
+declare const useClasses_2: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "avatar" | "ghost" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
     classes: {
-        xl: string;
-        lg: string;
-        md: string;
-        sm: string;
         xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
         root: string;
-        ghost: string;
         avatar: string;
+        ghost: string;
         ghostDisabled: string;
         notCurrent: string;
     };
@@ -661,10 +661,10 @@ declare const useClasses_3: (classesProp?: Partial<Record<"root", string>>, addS
     cx: (...args: any) => string;
 };
 
-declare const useClasses_4: (classesProp?: Partial<Record<"buttonWidth" | "actionsContainer" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
+declare const useClasses_4: (classesProp?: Partial<Record<"actionsContainer" | "buttonWidth" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
     classes: {
-        buttonWidth: string;
         actionsContainer: string;
+        buttonWidth: string;
         buttonsContainer: string;
         buttonSpacing: string;
     };
@@ -675,13 +675,13 @@ declare const useClasses_4: (classesProp?: Partial<Record<"buttonWidth" | "actio
     cx: (...args: any) => string;
 };
 
-declare const useClasses_5: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "headerContainer" | "buttonWidth" | "rootSummaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_5: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "buttonWidth" | "rootSummaryButton" | "headerContainer" | "stepContainer", string>>, addStatic?: boolean) => {
     classes: {
         titleContainer: string;
         messageContainer: string;
-        headerContainer: string;
         buttonWidth: string;
         rootSummaryButton: string;
+        headerContainer: string;
         stepContainer: string;
     };
     css: {
@@ -743,14 +743,14 @@ declare const useClasses_9: (classesProp?: Partial<Record<"root", string>>, addS
 
 export declare const useFlowContext: () => HvFlowContextValue<string>;
 
-export declare const useFlowNode: (id: string) => {
-    readonly node: Node_2 | undefined;
-    readonly parentNodes: Node_2[];
+export declare function useFlowNode<T = any>(id: string): {
+    readonly node: Node_2<T, string | undefined> | undefined;
+    readonly parentNodes: Node_2<any, string | undefined>[];
 };
 
 export declare const wizardActionsClasses: {
-    buttonWidth: "HvWizardActions-buttonWidth";
     actionsContainer: "HvWizardActions-actionsContainer";
+    buttonWidth: "HvWizardActions-buttonWidth";
     buttonsContainer: "HvWizardActions-buttonsContainer";
     buttonSpacing: "HvWizardActions-buttonSpacing";
 };
@@ -776,9 +776,9 @@ export declare const wizardContentClasses: {
 export declare const wizardTitleClasses: {
     titleContainer: "HvWizardTitle-titleContainer";
     messageContainer: "HvWizardTitle-messageContainer";
-    headerContainer: "HvWizardTitle-headerContainer";
     buttonWidth: "HvWizardTitle-buttonWidth";
     rootSummaryButton: "HvWizardTitle-rootSummaryButton";
+    headerContainer: "HvWizardTitle-headerContainer";
     stepContainer: "HvWizardTitle-stepContainer";
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.15.0",
+  "version": "5.16.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,7 +32,7 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.36.3",
+    "@hitachivantara/uikit-react-core": "^5.36.4",
     "@hitachivantara/uikit-react-icons": "^5.7.2",
     "@hitachivantara/uikit-styles": "^5.16.1",
     "lodash": "^4.17.21",
@@ -48,7 +48,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "1464c1eda257df2ecca90646bc1e01474bc69d67",
+  "gitHead": "48869c29cffd62f712769fb6e7e629aa8a930025",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {