@hitachivantara/uikit-react-lab 5.25.0 → 5.26.1

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

@@ -11,27 +11,11 @@ require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlow", {
   root: {
     height: "100%",
-    "& .react-flow__handle": {
-      backgroundColor: uikitReactCore.theme.colors.secondary_60,
-      width: 8,
-      height: 8,
-      zIndex: uikitReactCore.theme.zIndices.overlay
-    },
     "& .react-flow__handle-connecting": {
-      backgroundColor: uikitReactCore.theme.colors.negative_20,
-      width: 12,
-      height: 12,
-      "&.react-flow__handle-left": {
-        translate: "0 4px"
-      }
+      backgroundColor: uikitReactCore.theme.colors.negative_20
     },
     "& .react-flow__handle-valid": {
-      backgroundColor: uikitReactCore.theme.colors.positive_20,
-      width: 12,
-      height: 12,
-      "&.react-flow__handle-left": {
-        translate: "0 4px"
-      }
+      backgroundColor: uikitReactCore.theme.colors.positive_20
     },
     [`& .selected > .${BaseNode_styles.staticClasses.root}`]: {
       border: `1px solid ${uikitReactCore.theme.colors.secondary_60}`,

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.styles.cjs","sources":["../../../src/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":["createClasses","theme","flowBaseNodeClasses"],"mappings":";;;;;;;;;;AAIO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvB,iBAAiBC,eAAAA,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQA,eAAAA,MAAM,SAAS;AAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClC,iBAAiBA,eAAAA,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3B,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7B,iBAAiBA,eAAAA,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3B,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,kBAAkBC,8BAAoB,IAAI,EAAE,GAAG;AAAA,MAC9C,QAAQ,aAAaD,eAAM,MAAA,OAAO,YAAY;AAAA,MAC9C,cAAcA,eAAAA,MAAM,MAAM;AAAA,MAC1B,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"Flow.styles.cjs","sources":["../../../src/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-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n    },\n    \"& .react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\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":["createClasses","theme","flowBaseNodeClasses"],"mappings":";;;;;;;;;;AAIO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,oCAAoC;AAAA,MAClC,iBAAiBC,eAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,+BAA+B;AAAA,MAC7B,iBAAiBA,eAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,CAAC,kBAAkBC,8BAAoB,IAAI,EAAE,GAAG;AAAA,MAC9C,QAAQ,aAAaD,eAAM,MAAA,OAAO,YAAY;AAAA,MAC9C,cAAcA,eAAAA,MAAM,MAAM;AAAA,MAC1B,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;;;"}

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

@@ -11,10 +11,12 @@ const useFlowNode = require("../hooks/useFlowNode.cjs");
 const NodeMetaContext = require("../FlowContext/NodeMetaContext.cjs");
 const BaseNode_styles = require("./BaseNode.styles.cjs");
 const utils = require("./utils.cjs");
-const defaultActions = [
-  { id: "delete", label: "Delete", icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {}) },
-  { id: "duplicate", label: "Duplicate", icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Duplicate, {}) }
-];
+const DEFAULT_LABELS = {
+  outputsTitle: "Outputs",
+  inputsTitle: "Inputs",
+  deleteActionLabel: "Delete",
+  duplicateActionLabel: "Duplicate"
+};
 const HvFlowBaseNode = ({
   id,
   title,
@@ -23,15 +25,28 @@ const HvFlowBaseNode = ({
   color: colorProp,
   inputs: inputsProp,
   outputs: outputsProp,
-  nodeActions = defaultActions,
+  nodeActions: nodeActionsProp,
   footer,
   classes: classesProp,
+  labels: labelsProps,
   className,
   children
 }) => {
   const { registerNode, unregisterNode } = NodeMetaContext.useNodeMetaRegistry();
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const inputs = React.useMemo(() => utils.identifyHandles(inputsProp), [inputsProp]);
   const outputs = React.useMemo(() => utils.identifyHandles(outputsProp), [outputsProp]);
+  const nodeActions = React.useMemo(
+    () => nodeActionsProp || [
+      { id: "delete", label: labels?.deleteActionLabel, icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {}) },
+      {
+        id: "duplicate",
+        label: labels?.duplicateActionLabel,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Duplicate, {})
+      }
+    ],
+    [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp]
+  );
   React.useEffect(() => {
     registerNode(id, {
       label: title || "",
@@ -76,32 +91,46 @@ const HvFlowBaseNode = ({
     },
     [node, reactFlowInstance]
   );
-  const renderOutput = (output) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ReactFlow.Handle,
-      {
-        type: "source",
-        isConnectableEnd: false,
-        id: output.id,
-        position: ReactFlow.Position.Right
-      }
-    ),
-    output.isMandatory && !utils.isInputConnected(id, "source", output.id, outputEdges) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory }),
-    /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: output.label })
-  ] }, output.id);
-  const renderInput = (input) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ReactFlow.Handle,
-      {
-        type: "target",
-        isConnectableStart: false,
-        id: input.id,
-        position: ReactFlow.Position.Left
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: input.label }),
-    input.isMandatory && !utils.isInputConnected(id, "target", input.id, inputEdges) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
-  ] }, input.id);
+  const renderOutput = (output) => {
+    const edgeConnected = utils.isConnected(id, "source", output.id, outputEdges);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ReactFlow.Handle,
+        {
+          type: "source",
+          isConnectableEnd: false,
+          id: output.id,
+          position: ReactFlow.Position.Right,
+          className: cx(
+            classes.handle,
+            edgeConnected && classes.handleConnected
+          )
+        }
+      ),
+      output.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory }),
+      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: output.label })
+    ] }, output.id);
+  };
+  const renderInput = (input) => {
+    const edgeConnected = utils.isConnected(id, "target", input.id, inputEdges);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ReactFlow.Handle,
+        {
+          type: "target",
+          isConnectableStart: false,
+          id: input.id,
+          position: ReactFlow.Position.Left,
+          className: cx(
+            classes.handle,
+            edgeConnected && classes.handleConnected
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", children: input.label }),
+      input.isMandatory && !edgeConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
+    ] }, input.id);
+  };
   if (!node)
     return null;
   const color = uikitStyles.getColor(colorProp);
@@ -119,15 +148,7 @@ const HvFlowBaseNode = ({
       onMouseEnter: () => setShowActions(true),
       onMouseLeave: () => setShowActions(false),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.NodeToolbar, { isVisible: showActions, offset: 0, children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
-          uikitReactCore.HvButton,
-          {
-            icon: true,
-            onClick: () => handleDefaultAction(action),
-            children: utils.renderedIcon(action.icon)
-          },
-          action.id
-        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.NodeToolbar, { isVisible: showActions, offset: 0, children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { enterDelay: 500, title: action.label, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: () => handleDefaultAction(action), children: utils.renderedIcon(action.icon) }) }, action.id)) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -160,7 +181,7 @@ const HvFlowBaseNode = ({
         ),
         children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.contentContainer, children }),
         inputs && inputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: "Inputs" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.inputsTitle }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => {
             if (!utils.isInputGroup(input))
               return renderInput(input);
@@ -180,19 +201,20 @@ const HvFlowBaseNode = ({
           }) })
         ] }),
         outputs && outputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: "Outputs" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: labels?.outputsTitle }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => {
-            if (!utils.isOutputGroup(output))
+            if (!utils.isOutputGroup(output)) {
               return renderOutput(output);
+            }
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 className: classes.outputGroupContainer,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "div", variant: "label", children: output.label }),
-                  output.outputs.map(
-                    (out) => renderOutput(out)
-                  )
+                  output.outputs.map((out) => {
+                    return renderOutput(out);
+                  })
                 ]
               },
               `group${idx}`

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.cjs","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import React, {\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n  ExtractNames,\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  HvFlowNodeOutputGroup,\n  HvFlowNodeInputGroup,\n} from \"../types\";\nimport {\n  useFlowNode,\n  useFlowNodeInputEdges,\n  useFlowNodeOutputEdges,\n} from \"../hooks/useFlowNode\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n  identifyHandles,\n  isInputConnected,\n  isInputGroup,\n  isOutputGroup,\n  renderedIcon,\n} from \"./utils\";\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 | HvFlowNodeInputGroup)[];\n  /** Node outputs */\n  outputs?: (HvFlowNodeOutput | HvFlowNodeOutputGroup)[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** The content of the Node footer */\n  footer?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs: inputsProp,\n  outputs: outputsProp,\n  nodeActions = defaultActions,\n  footer,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n\n  const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);\n\n  const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);\n\n  useEffect(() => {\n    registerNode(id, {\n      label: title || \"\",\n      inputs,\n      outputs,\n    });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const node = useFlowNode(id);\n  const inputEdges = useFlowNodeInputEdges(id);\n  const outputEdges = useFlowNodeOutputEdges(id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: uid(),\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  const renderOutput = (output: HvFlowNodeOutput) => (\n    <div className={classes.outputContainer} key={output.id}>\n      <Handle\n        type=\"source\"\n        isConnectableEnd={false}\n        id={output.id}\n        position={Position.Right}\n      />\n      {output.isMandatory &&\n        !isInputConnected(id, \"source\", output.id!, outputEdges) && (\n          <div className={classes.mandatory} />\n        )}\n      <HvTypography component=\"div\">{output.label}</HvTypography>\n    </div>\n  );\n\n  const renderInput = (input: HvFlowNodeInput) => (\n    <div className={classes.inputContainer} key={input.id}>\n      <Handle\n        type=\"target\"\n        isConnectableStart={false}\n        id={input.id}\n        position={Position.Left}\n      />\n      <HvTypography component=\"div\">{input.label}</HvTypography>\n      {input.isMandatory &&\n        !isInputConnected(id, \"target\", input.id!, inputEdges) && (\n          <div className={classes.mandatory} />\n        )}\n    </div>\n  );\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n  const iconColor = isValidElement(icon)\n    ? getColor(icon.props.color || \"base_dark\")\n    : getColor(\"base_dark\");\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } })\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              if (!isInputGroup(input)) return renderInput(input);\n\n              return (\n                <div\n                  className={classes.inputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {input.label}\n                  </HvTypography>\n                  {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n                    renderInput(inp)\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              if (!isOutputGroup(output)) return renderOutput(output);\n\n              return (\n                <div\n                  className={classes.outputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {output.label}\n                  </HvTypography>\n                  {(output as HvFlowNodeOutputGroup).outputs.map((out) =>\n                    renderOutput(out)\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":["jsx","Delete","Duplicate","useNodeMetaRegistry","useMemo","identifyHandles","useEffect","useState","useReactFlow","useClasses","useFlowNode","useFlowNodeInputEdges","useFlowNodeOutputEdges","useCallback","uid","theme","Handle","Position","isInputConnected","HvTypography","getColor","isValidElement","jsxs","NodeToolbar","HvButton","renderedIcon","Fragment","isInputGroup","isOutputGroup"],"mappings":"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"}
+{"version":3,"file":"BaseNode.cjs","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import React, {\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvTooltip,\n  HvTypography,\n  useLabels,\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  HvFlowNodeInput,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n  HvFlowNodeInputGroup,\n} from \"../types\";\nimport {\n  useFlowNode,\n  useFlowNodeInputEdges,\n  useFlowNodeOutputEdges,\n} from \"../hooks/useFlowNode\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n  identifyHandles,\n  isConnected,\n  isInputGroup,\n  isOutputGroup,\n  renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  outputsTitle: \"Outputs\",\n  inputsTitle: \"Inputs\",\n  deleteActionLabel: \"Delete\",\n  duplicateActionLabel: \"Duplicate\",\n};\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 | HvFlowNodeInputGroup)[];\n  /** Node outputs */\n  outputs?: (HvFlowNodeOutput | HvFlowNodeOutputGroup)[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** The content of the node footer */\n  footer?: React.ReactNode;\n  /** Labels used on the node. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs: inputsProp,\n  outputs: outputsProp,\n  nodeActions: nodeActionsProp,\n  footer,\n  classes: classesProp,\n  labels: labelsProps,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);\n\n  const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);\n\n  const nodeActions = useMemo(\n    () =>\n      nodeActionsProp || [\n        { id: \"delete\", label: labels?.deleteActionLabel, icon: <Delete /> },\n        {\n          id: \"duplicate\",\n          label: labels?.duplicateActionLabel,\n          icon: <Duplicate />,\n        },\n      ],\n    [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp]\n  );\n\n  useEffect(() => {\n    registerNode(id, {\n      label: title || \"\",\n      inputs,\n      outputs,\n    });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const node = useFlowNode(id);\n  const inputEdges = useFlowNodeInputEdges(id);\n  const outputEdges = useFlowNodeOutputEdges(id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: uid(),\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  const renderOutput = (output: HvFlowNodeOutput) => {\n    const edgeConnected = isConnected(id, \"source\", output.id!, outputEdges);\n\n    return (\n      <div className={classes.outputContainer} key={output.id}>\n        <Handle\n          type=\"source\"\n          isConnectableEnd={false}\n          id={output.id}\n          position={Position.Right}\n          className={cx(\n            classes.handle,\n            edgeConnected && classes.handleConnected\n          )}\n        />\n        {output.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n        <HvTypography component=\"div\">{output.label}</HvTypography>\n      </div>\n    );\n  };\n\n  const renderInput = (input: HvFlowNodeInput) => {\n    const edgeConnected = isConnected(id, \"target\", input.id!, inputEdges);\n\n    return (\n      <div className={classes.inputContainer} key={input.id}>\n        <Handle\n          type=\"target\"\n          isConnectableStart={false}\n          id={input.id}\n          position={Position.Left}\n          className={cx(\n            classes.handle,\n            edgeConnected && classes.handleConnected\n          )}\n        />\n        <HvTypography component=\"div\">{input.label}</HvTypography>\n        {input.isMandatory && !edgeConnected && (\n          <div className={classes.mandatory} />\n        )}\n      </div>\n    );\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          <HvTooltip key={action.id} enterDelay={500} title={action.label}>\n            <HvButton icon onClick={() => handleDefaultAction(action)}>\n              {renderedIcon(action.icon)}\n            </HvButton>\n          </HvTooltip>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } })\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>{labels?.inputsTitle}</HvTypography>\n          </div>\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              if (!isInputGroup(input)) return renderInput(input);\n\n              return (\n                <div\n                  className={classes.inputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {input.label}\n                  </HvTypography>\n                  {(input as HvFlowNodeInputGroup).inputs.map((inp) =>\n                    renderInput(inp)\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>{labels?.outputsTitle}</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              if (!isOutputGroup(output)) {\n                return renderOutput(output);\n              }\n\n              return (\n                <div\n                  className={classes.outputGroupContainer}\n                  key={`group${idx}`}\n                >\n                  <HvTypography component=\"div\" variant=\"label\">\n                    {output.label}\n                  </HvTypography>\n                  {(output as HvFlowNodeOutputGroup).outputs.map((out) => {\n                    return renderOutput(out);\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {footer && <div className={classes.footerContainer}>{footer}</div>}\n    </div>\n  );\n};\n"],"names":["useNodeMetaRegistry","useLabels","useMemo","identifyHandles","jsx","Delete","Duplicate","useEffect","useState","useReactFlow","useClasses","useFlowNode","useFlowNodeInputEdges","useFlowNodeOutputEdges","useCallback","uid","theme","isConnected","jsxs","Handle","Position","HvTypography","getColor","isValidElement","NodeToolbar","HvTooltip","HvButton","renderedIcon","Fragment","isInputGroup","isOutputGroup"],"mappings":"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"}

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

@@ -72,20 +72,40 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowBaseNo
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    position: "relative",
-    "& .react-flow__handle-left": {
-      left: -20
-    }
+    position: "relative"
   },
   outputContainer: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    position: "relative",
-    "& .react-flow__handle-right": {
-      right: -20
+    position: "relative"
+  },
+  handle: {
+    zIndex: uikitReactCore.theme.zIndices.overlay,
+    marginLeft: 2,
+    backgroundColor: uikitReactCore.theme.colors.atmo1,
+    height: 10,
+    width: 10,
+    border: `1px solid ${uikitReactCore.theme.colors.secondary_60}`,
+    "&.react-flow__handle-left": {
+      left: -23
+    },
+    "&.react-flow__handle-right": {
+      right: -21
+    },
+    "::before": {
+      fontSize: 14,
+      color: uikitReactCore.theme.colors.secondary_60,
+      content: '"+"',
+      marginTop: -7,
+      position: "absolute"
     }
   },
+  handleConnected: {
+    backgroundColor: uikitReactCore.theme.colors.secondary_60,
+    width: 8,
+    height: 8
+  },
   mandatory: {
     width: 10,
     height: 10,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.styles.cjs","sources":["../../../../src/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    borderTopLeftRadius: \"inherit\",\n    borderTopRightRadius: \"inherit\",\n  },\n  titleContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  title: {\n    color: theme.colors.base_dark,\n  },\n  inputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    borderBottom: `1px solid ${theme.colors.atmo3}`,\n  },\n  outputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    borderBottom: `1px solid ${theme.colors.atmo3}`,\n  },\n  contentContainer: {},\n  inputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputGroupContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputGroupContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    position: \"relative\",\n    \"& .react-flow__handle-left\": {\n      left: -20,\n    },\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    position: \"relative\",\n    \"& .react-flow__handle-right\": {\n      right: -20,\n    },\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n  footerContainer: {\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;AAEO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,cAAcC,eAAAA,MAAM,MAAM;AAAA,IAC1B,iBAAiBA,eAAAA,MAAM,OAAO;AAAA,IAC9B,WAAWA,eAAAA,MAAM,OAAO;AAAA,IACxB,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,SAASA,eAAA,MAAM,QAAQ,KAAK,CAAC;AAAA,IAC7B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,OAAOA,eAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,sBAAsB;AAAA,IACpB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAASA,eAAAA,MAAM,MAAM;AAAA,IACrB,iBAAiBA,eAAAA,MAAM,OAAO;AAAA,IAC9B,WAAW,aAAaA,eAAM,MAAA,OAAO,KAAK;AAAA,IAC1C,cAAc,aAAaA,eAAM,MAAA,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAASA,eAAAA,MAAM,MAAM;AAAA,IACrB,iBAAiBA,eAAAA,MAAM,OAAO;AAAA,IAC9B,WAAW,aAAaA,eAAM,MAAA,OAAO,KAAK;AAAA,IAC1C,cAAc,aAAaA,eAAM,MAAA,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAASA,eAAAA,MAAM,MAAM;AAAA,IACrB,KAAKA,eAAAA,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,EACd;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAASA,eAAAA,MAAM,MAAM;AAAA,IACrB,KAAKA,eAAAA,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,EACd;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAKA,eAAAA,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,EACd;AAAA,EACA,sBAAsB;AAAA,IACpB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAKA,eAAAA,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,EACd;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,8BAA8B;AAAA,MAC5B,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,+BAA+B;AAAA,MAC7B,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQA,eAAM,MAAA,QAAQ,GAAGA,eAAA,MAAM,MAAM,EAAE;AAAA,IACvC,cAAcA,eAAAA,MAAM,MAAM;AAAA,IAC1B,iBAAiBA,eAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,iBAAiB;AAAA,IACf,SAASA,eAAAA,MAAM,MAAM;AAAA,IACrB,WAAW,aAAaA,eAAM,MAAA,OAAO,KAAK;AAAA,EAC5C;AACF,CAAC;;;"}
+{"version":3,"file":"BaseNode.styles.cjs","sources":["../../../../src/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    borderTopLeftRadius: \"inherit\",\n    borderTopRightRadius: \"inherit\",\n  },\n  titleContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  title: {\n    color: theme.colors.base_dark,\n  },\n  inputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    borderBottom: `1px solid ${theme.colors.atmo3}`,\n  },\n  outputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    borderBottom: `1px solid ${theme.colors.atmo3}`,\n  },\n  contentContainer: {},\n  inputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputGroupContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputGroupContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  handle: {\n    zIndex: theme.zIndices.overlay,\n    marginLeft: 2,\n    backgroundColor: theme.colors.atmo1,\n    height: 10,\n    width: 10,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    \"&.react-flow__handle-left\": {\n      left: -23,\n    },\n    \"&.react-flow__handle-right\": {\n      right: -21,\n    },\n    \"::before\": {\n      fontSize: 14,\n      color: theme.colors.secondary_60,\n      content: '\"+\"',\n      marginTop: -7,\n      position: \"absolute\",\n    },\n  },\n  handleConnected: {\n    backgroundColor: theme.colors.secondary_60,\n    width: 8,\n    height: 8,\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n  footerContainer: {\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n  },\n});\n"],"names":["createClasses","theme"],"mappings":"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"}

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

@@ -9,6 +9,10 @@ const ParamRenderer = require("./Parameters/ParamRenderer.cjs");
 const BaseNode = require("./BaseNode.cjs");
 const useFlowNode = require("../hooks/useFlowNode.cjs");
 const useFlowContext = require("../hooks/useFlowContext.cjs");
+const DEFAULT_LABELS = {
+  collapseLabel: "Collapse",
+  expandLabel: "Expand"
+};
 const renderedIcon = (actionIcon) => React.isValidElement(actionIcon) ? actionIcon : actionIcon?.();
 const HvFlowNode = ({
   id,
@@ -22,11 +26,13 @@ const HvFlowNode = ({
   params,
   nodeDefaults,
   classes: classesProp,
+  labels: labelsProps,
   children,
   expandParamsButtonProps,
   ...props
 }) => {
   const { classes } = Node_styles.useClasses(classesProp);
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const [showParams, setShowParams] = React.useState(expanded);
   const node = useFlowNode.useFlowNode(id);
   const { nodeGroups, nodeTypes, defaultActions } = useFlowContext.useFlowContext();
@@ -51,19 +57,20 @@ const HvFlowNode = ({
       classes,
       headerItems: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         headerItems,
-        description && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { title: description, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { color: "base_dark" }) }) }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { title: description, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { role: "none", color: "base_dark" }) }) }),
         hasParams && /* @__PURE__ */ jsxRuntime.jsx(
           uikitReactCore.HvButton,
           {
             icon: true,
             overrideIconColors: false,
             onClick: () => setShowParams((p) => !p),
-            "aria-label": showParams ? "Collapse" : "Expand",
+            "aria-label": showParams ? labels?.collapseLabel : labels?.expandLabel,
             ...expandParamsButtonProps,
             children: showParams ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, { role: "none", color: "base_dark" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { role: "none", color: "base_dark" })
           }
         )
       ] }),
+      labels,
       ...props,
       children: [
         (subtitle || actsVisible?.length || actsDropdown?.length) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.subtitleContainer, children: [

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

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

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

@@ -7,7 +7,7 @@ const isInputGroup = (input) => {
 const isOutputGroup = (output) => {
   return "outputs" in output;
 };
-const isInputConnected = (id, type, handleId, edges) => {
+const isConnected = (id, type, handleId, edges) => {
   if (type === "target") {
     return edges.some((e) => e.target === id && e.targetHandle === handleId);
   }
@@ -48,7 +48,7 @@ const identifyHandles = (handles) => {
   );
 };
 exports.identifyHandles = identifyHandles;
-exports.isInputConnected = isInputConnected;
+exports.isConnected = isConnected;
 exports.isInputGroup = isInputGroup;
 exports.isOutputGroup = isOutputGroup;
 exports.renderedIcon = renderedIcon;

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

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../../src/Flow/Node/utils.ts"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { Edge } from \"reactflow\";\nimport { HvActionGeneric } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\n\nexport const isInputGroup = (\n  input: HvFlowNodeInput | HvFlowNodeInputGroup\n): input is HvFlowNodeInputGroup => {\n  return \"inputs\" in input;\n};\n\nexport const isOutputGroup = (\n  output: HvFlowNodeOutput | HvFlowNodeOutputGroup\n): output is HvFlowNodeOutputGroup => {\n  return \"outputs\" in output;\n};\n\nexport const isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  handleId: string,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some((e) => e.target === id && e.targetHandle === handleId);\n  }\n  if (type === \"source\") {\n    return edges.some((e) => e.source === id && e.sourceHandle === handleId);\n  }\n\n  return false;\n};\n\nexport const renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const identifyHandles = (\n  handles?:\n    | (HvFlowNodeInput | HvFlowNodeInputGroup)[]\n    | (HvFlowNodeOutput | HvFlowNodeOutputGroup)[]\n) => {\n  let idx = 0;\n\n  return handles?.map(\n    (\n      handle:\n        | HvFlowNodeOutput\n        | HvFlowNodeOutputGroup\n        | HvFlowNodeInput\n        | HvFlowNodeInputGroup\n    ) => {\n      if (isInputGroup(handle)) {\n        return {\n          ...handle,\n          inputs: handle.inputs.map((x) => {\n            const identifiedHandle =\n              x.id != null ? x : { ...x, id: String(idx) };\n            idx += 1;\n            return identifiedHandle;\n          }),\n        } satisfies HvFlowNodeInputGroup;\n      }\n\n      if (isOutputGroup(handle)) {\n        return {\n          ...handle,\n          outputs: handle.outputs.map((x) => {\n            const identifiedHandle =\n              x.id != null ? x : { ...x, id: String(idx) };\n            idx += 1;\n            return identifiedHandle;\n          }),\n        } satisfies HvFlowNodeOutputGroup;\n      }\n\n      const identifiedHandle =\n        handle.id != null ? handle : { ...handle, id: String(idx) };\n      idx += 1;\n      return identifiedHandle;\n    }\n  );\n};\n"],"names":["isValidElement","identifiedHandle"],"mappings":";;;AAWa,MAAA,eAAe,CAC1B,UACkC;AAClC,SAAO,YAAY;AACrB;AAEa,MAAA,gBAAgB,CAC3B,WACoC;AACpC,SAAO,aAAa;AACtB;AAEO,MAAM,mBAAmB,CAC9B,IACA,MACA,UACA,UACG;AACH,MAAI,SAAS,UAAU;AACd,WAAA,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,iBAAiB,QAAQ;AAAA,EACzE;AACA,MAAI,SAAS,UAAU;AACd,WAAA,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,iBAAiB,QAAQ;AAAA,EACzE;AAEO,SAAA;AACT;AAEO,MAAM,eAAe,CAAC,eAC3BA,MAAAA,eAAe,UAAU,IAAI,aAAc,aAA0B;AAE1D,MAAA,kBAAkB,CAC7B,YAGG;AACH,MAAI,MAAM;AAEV,SAAO,SAAS;AAAA,IACd,CACE,WAKG;AACC,UAAA,aAAa,MAAM,GAAG;AACjB,eAAA;AAAA,UACL,GAAG;AAAA,UACH,QAAQ,OAAO,OAAO,IAAI,CAAC,MAAM;AACzBC,kBAAAA,oBACJ,EAAE,MAAM,OAAO,IAAI,EAAE,GAAG,GAAG,IAAI,OAAO,GAAG,EAAE;AACtC,mBAAA;AACAA,mBAAAA;AAAAA,UAAA,CACR;AAAA,QAAA;AAAA,MAEL;AAEI,UAAA,cAAc,MAAM,GAAG;AAClB,eAAA;AAAA,UACL,GAAG;AAAA,UACH,SAAS,OAAO,QAAQ,IAAI,CAAC,MAAM;AAC3BA,kBAAAA,oBACJ,EAAE,MAAM,OAAO,IAAI,EAAE,GAAG,GAAG,IAAI,OAAO,GAAG,EAAE;AACtC,mBAAA;AACAA,mBAAAA;AAAAA,UAAA,CACR;AAAA,QAAA;AAAA,MAEL;AAEM,YAAA,mBACJ,OAAO,MAAM,OAAO,SAAS,EAAE,GAAG,QAAQ,IAAI,OAAO,GAAG,EAAE;AACrD,aAAA;AACA,aAAA;AAAA,IACT;AAAA,EAAA;AAEJ;;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../../src/Flow/Node/utils.ts"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { Edge } from \"reactflow\";\nimport { HvActionGeneric } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowNodeInput,\n  HvFlowNodeInputGroup,\n  HvFlowNodeOutput,\n  HvFlowNodeOutputGroup,\n} from \"../types\";\n\nexport const isInputGroup = (\n  input: HvFlowNodeInput | HvFlowNodeInputGroup\n): input is HvFlowNodeInputGroup => {\n  return \"inputs\" in input;\n};\n\nexport const isOutputGroup = (\n  output: HvFlowNodeOutput | HvFlowNodeOutputGroup\n): output is HvFlowNodeOutputGroup => {\n  return \"outputs\" in output;\n};\n\nexport const isConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  handleId: string,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some((e) => e.target === id && e.targetHandle === handleId);\n  }\n  if (type === \"source\") {\n    return edges.some((e) => e.source === id && e.sourceHandle === handleId);\n  }\n\n  return false;\n};\n\nexport const renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const identifyHandles = (\n  handles?:\n    | (HvFlowNodeInput | HvFlowNodeInputGroup)[]\n    | (HvFlowNodeOutput | HvFlowNodeOutputGroup)[]\n) => {\n  let idx = 0;\n\n  return handles?.map(\n    (\n      handle:\n        | HvFlowNodeOutput\n        | HvFlowNodeOutputGroup\n        | HvFlowNodeInput\n        | HvFlowNodeInputGroup\n    ) => {\n      if (isInputGroup(handle)) {\n        return {\n          ...handle,\n          inputs: handle.inputs.map((x) => {\n            const identifiedHandle =\n              x.id != null ? x : { ...x, id: String(idx) };\n            idx += 1;\n            return identifiedHandle;\n          }),\n        } satisfies HvFlowNodeInputGroup;\n      }\n\n      if (isOutputGroup(handle)) {\n        return {\n          ...handle,\n          outputs: handle.outputs.map((x) => {\n            const identifiedHandle =\n              x.id != null ? x : { ...x, id: String(idx) };\n            idx += 1;\n            return identifiedHandle;\n          }),\n        } satisfies HvFlowNodeOutputGroup;\n      }\n\n      const identifiedHandle =\n        handle.id != null ? handle : { ...handle, id: String(idx) };\n      idx += 1;\n      return identifiedHandle;\n    }\n  );\n};\n"],"names":["isValidElement","identifiedHandle"],"mappings":";;;AAWa,MAAA,eAAe,CAC1B,UACkC;AAClC,SAAO,YAAY;AACrB;AAEa,MAAA,gBAAgB,CAC3B,WACoC;AACpC,SAAO,aAAa;AACtB;AAEO,MAAM,cAAc,CACzB,IACA,MACA,UACA,UACG;AACH,MAAI,SAAS,UAAU;AACd,WAAA,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,iBAAiB,QAAQ;AAAA,EACzE;AACA,MAAI,SAAS,UAAU;AACd,WAAA,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE,iBAAiB,QAAQ;AAAA,EACzE;AAEO,SAAA;AACT;AAEO,MAAM,eAAe,CAAC,eAC3BA,MAAAA,eAAe,UAAU,IAAI,aAAc,aAA0B;AAE1D,MAAA,kBAAkB,CAC7B,YAGG;AACH,MAAI,MAAM;AAEV,SAAO,SAAS;AAAA,IACd,CACE,WAKG;AACC,UAAA,aAAa,MAAM,GAAG;AACjB,eAAA;AAAA,UACL,GAAG;AAAA,UACH,QAAQ,OAAO,OAAO,IAAI,CAAC,MAAM;AACzBC,kBAAAA,oBACJ,EAAE,MAAM,OAAO,IAAI,EAAE,GAAG,GAAG,IAAI,OAAO,GAAG,EAAE;AACtC,mBAAA;AACAA,mBAAAA;AAAAA,UAAA,CACR;AAAA,QAAA;AAAA,MAEL;AAEI,UAAA,cAAc,MAAM,GAAG;AAClB,eAAA;AAAA,UACL,GAAG;AAAA,UACH,SAAS,OAAO,QAAQ,IAAI,CAAC,MAAM;AAC3BA,kBAAAA,oBACJ,EAAE,MAAM,OAAO,IAAI,EAAE,GAAG,GAAG,IAAI,OAAO,GAAG,EAAE;AACtC,mBAAA;AACAA,mBAAAA;AAAAA,UAAA,CACR;AAAA,QAAA;AAAA,MAEL;AAEM,YAAA,mBACJ,OAAO,MAAM,OAAO,SAAS,EAAE,GAAG,QAAQ,IAAI,OAAO,GAAG,EAAE;AACrD,aAAA;AACA,aAAA;AAAA,IACT;AAAA,EAAA;AAEJ;;;;;;"}

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

@@ -29,8 +29,6 @@ const buildGroups = (nodeGroups, nodeTypes, defaultGroupProps) => {
     };
     if (nodesWithoutGroupId.length > 0) {
       acc.Default = {
-        // @ts-ignore
-        name: "Default",
         label: "Default",
         nodes: nodesWithoutGroupId,
         ...defaultGroupProps

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

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../../src/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport {\n  HvFlowSidebarGroupNodes,\n  HvFlowSidebarGroupNode,\n} from \"./SidebarGroup\";\n\ntype NodeGroup = HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n\nexport const buildGroups = (\n  nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n  nodeTypes: HvFlowContextValue[\"nodeTypes\"],\n  defaultGroupProps?: HvFlowNodeGroup\n) => {\n  if (!nodeGroups) return {};\n\n  return Object.entries(nodeGroups).reduce((acc, curr) => {\n    const nodesWithGroupId: HvFlowSidebarGroupNode[] = [];\n    const nodesWithoutGroupId: HvFlowSidebarGroupNode[] = [];\n\n    if (nodeTypes) {\n      for (const [nodeType, node] of Object.entries(nodeTypes)) {\n        if (node.meta?.groupId === curr[0]) {\n          nodesWithGroupId.push({\n            type: nodeType,\n            label: node.meta?.label,\n            data: node.meta?.data,\n          });\n        } else if (!node.meta?.groupId) {\n          nodesWithoutGroupId.push({\n            type: nodeType,\n            label: node.meta?.label || \"\",\n            data: node.meta?.data,\n          });\n        }\n      }\n    }\n\n    acc[curr[0]] = {\n      ...curr[1],\n      nodes: nodesWithGroupId,\n    };\n\n    // Create a \"Default\" group for nodes without a groupId\n    if (nodesWithoutGroupId.length > 0) {\n      acc.Default = {\n        // @ts-ignore\n        name: \"Default\",\n        label: \"Default\",\n        nodes: nodesWithoutGroupId,\n        ...defaultGroupProps,\n      };\n    }\n\n    return acc;\n  }, {} as Record<string, NodeGroup>);\n};\n"],"names":[],"mappings":";;AASO,MAAM,cAAc,CACzB,YACA,WACA,sBACG;AACH,MAAI,CAAC;AAAY,WAAO;AAExB,SAAO,OAAO,QAAQ,UAAU,EAAE,OAAO,CAAC,KAAK,SAAS;AACtD,UAAM,mBAA6C,CAAA;AACnD,UAAM,sBAAgD,CAAA;AAEtD,QAAI,WAAW;AACb,iBAAW,CAAC,UAAU,IAAI,KAAK,OAAO,QAAQ,SAAS,GAAG;AACxD,YAAI,KAAK,MAAM,YAAY,KAAK,CAAC,GAAG;AAClC,2BAAiB,KAAK;AAAA,YACpB,MAAM;AAAA,YACN,OAAO,KAAK,MAAM;AAAA,YAClB,MAAM,KAAK,MAAM;AAAA,UAAA,CAClB;AAAA,QACQ,WAAA,CAAC,KAAK,MAAM,SAAS;AAC9B,8BAAoB,KAAK;AAAA,YACvB,MAAM;AAAA,YACN,OAAO,KAAK,MAAM,SAAS;AAAA,YAC3B,MAAM,KAAK,MAAM;AAAA,UAAA,CAClB;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEI,QAAA,KAAK,CAAC,CAAC,IAAI;AAAA,MACb,GAAG,KAAK,CAAC;AAAA,MACT,OAAO;AAAA,IAAA;AAIL,QAAA,oBAAoB,SAAS,GAAG;AAClC,UAAI,UAAU;AAAA;AAAA,QAEZ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAEP;AAEO,WAAA;AAAA,EACT,GAAG,CAA+B,CAAA;AACpC;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../../src/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport {\n  HvFlowSidebarGroupNodes,\n  HvFlowSidebarGroupNode,\n} from \"./SidebarGroup\";\n\ntype NodeGroup = HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n\nexport const buildGroups = (\n  nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n  nodeTypes: HvFlowContextValue[\"nodeTypes\"],\n  defaultGroupProps?: HvFlowNodeGroup\n) => {\n  if (!nodeGroups) return {};\n\n  return Object.entries(nodeGroups).reduce((acc, curr) => {\n    const nodesWithGroupId: HvFlowSidebarGroupNode[] = [];\n    const nodesWithoutGroupId: HvFlowSidebarGroupNode[] = [];\n\n    if (nodeTypes) {\n      for (const [nodeType, node] of Object.entries(nodeTypes)) {\n        if (node.meta?.groupId === curr[0]) {\n          nodesWithGroupId.push({\n            type: nodeType,\n            label: node.meta?.label,\n            data: node.meta?.data,\n          });\n        } else if (!node.meta?.groupId) {\n          nodesWithoutGroupId.push({\n            type: nodeType,\n            label: node.meta?.label || \"\",\n            data: node.meta?.data,\n          });\n        }\n      }\n    }\n\n    acc[curr[0]] = {\n      ...curr[1],\n      nodes: nodesWithGroupId,\n    };\n\n    // Create a \"Default\" group for nodes without a groupId\n    if (nodesWithoutGroupId.length > 0) {\n      acc.Default = {\n        label: \"Default\",\n        nodes: nodesWithoutGroupId,\n        ...defaultGroupProps,\n      };\n    }\n\n    return acc;\n  }, {} as Record<string, NodeGroup>);\n};\n"],"names":[],"mappings":";;AASO,MAAM,cAAc,CACzB,YACA,WACA,sBACG;AACH,MAAI,CAAC;AAAY,WAAO;AAExB,SAAO,OAAO,QAAQ,UAAU,EAAE,OAAO,CAAC,KAAK,SAAS;AACtD,UAAM,mBAA6C,CAAA;AACnD,UAAM,sBAAgD,CAAA;AAEtD,QAAI,WAAW;AACb,iBAAW,CAAC,UAAU,IAAI,KAAK,OAAO,QAAQ,SAAS,GAAG;AACxD,YAAI,KAAK,MAAM,YAAY,KAAK,CAAC,GAAG;AAClC,2BAAiB,KAAK;AAAA,YACpB,MAAM;AAAA,YACN,OAAO,KAAK,MAAM;AAAA,YAClB,MAAM,KAAK,MAAM;AAAA,UAAA,CAClB;AAAA,QACQ,WAAA,CAAC,KAAK,MAAM,SAAS;AAC9B,8BAAoB,KAAK;AAAA,YACvB,MAAM;AAAA,YACN,OAAO,KAAK,MAAM,SAAS;AAAA,YAC3B,MAAM,KAAK,MAAM;AAAA,UAAA,CAClB;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEI,QAAA,KAAK,CAAC,CAAC,IAAI;AAAA,MACb,GAAG,KAAK,CAAC;AAAA,MACT,OAAO;AAAA,IAAA;AAIL,QAAA,oBAAoB,SAAS,GAAG;AAClC,UAAI,UAAU;AAAA,QACZ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAEP;AAEO,WAAA;AAAA,EACT,GAAG,CAA+B,CAAA;AACpC;;"}

package/dist/cjs/Flow/nodes/DashboardNode.cjs

@@ -31,7 +31,7 @@ const HvDashboardNode = (props) => {
   } = props;
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
   const { classes } = DashboardNode_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Node.HvFlowNode, { id, classes, ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Node.HvFlowNode, { id, classes, labels, ...others, children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsxs(
       uikitReactCore.HvDialog,

package/dist/cjs/Flow/nodes/DashboardNode.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardNode.cjs","sources":["../../../../src/Flow/nodes/DashboardNode.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvButton,\n  HvDialog,\n  HvDialogActions,\n  HvDialogContent,\n  HvDialogProps,\n  HvDialogTitle,\n  HvEmptyState,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDashboard, HvDashboardProps } from \"../../Dashboard\";\nimport { HvFlowNode, HvFlowNodeProps } from \"../Node\";\nimport { staticClasses, useClasses } from \"./DashboardNode.styles\";\n\nexport { staticClasses as hvDashboardNodeClasses };\n\nconst DEFAULT_LABELS = {\n  emptyMessage: \"No visualizations connected to the dashboard.\",\n  dialogTitle: \"Configure dashboard\",\n  dialogSubtitle: \"Please configure the layout of your dashboard as needed.\",\n  dialogApply: \"Apply\",\n  dialogCancel: \"Cancel\",\n};\n\nexport type HvDashboardNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardNodeProps\n  extends HvFlowNodeProps,\n    Pick<HvDialogProps, \"open\" | \"onClose\">,\n    Pick<HvDashboardProps, \"layout\"> {\n  classes?: HvDashboardNodeClasses;\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  previewItems?: React.ReactNode;\n  onApply?: () => void;\n  onCancel?: () => void;\n\n  dashboardProps?: Omit<HvDashboardProps, \"children\">;\n  dialogProps?: HvDialogProps;\n}\n\nexport const HvDashboardNode = (props: HvDashboardNodeProps) => {\n  const {\n    id,\n    open,\n    layout,\n    labels: labelsProp,\n    classes: classesProp,\n    previewItems,\n    children,\n    dialogProps,\n    dashboardProps,\n    onApply,\n    onCancel,\n    onClose,\n    ...others\n  } = props;\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvFlowNode id={id} classes={classes} {...others}>\n      {children}\n      <HvDialog\n        open={open}\n        maxWidth=\"lg\"\n        fullWidth\n        onClose={onClose}\n        {...dialogProps}\n      >\n        <HvDialogTitle variant=\"info\">{labels?.dialogTitle}</HvDialogTitle>\n        <HvDialogContent indentContent>\n          {labels?.dialogSubtitle}\n          {layout && layout?.length > 0 ? (\n            <HvDashboard\n              cols={12}\n              layout={layout}\n              compactType=\"vertical\"\n              rowHeight={80}\n              margin={[16, 16]}\n              containerPadding={[0, 16]}\n              {...dashboardProps}\n            >\n              {previewItems}\n            </HvDashboard>\n          ) : (\n            <HvEmptyState\n              className={classes.empty}\n              icon={<Info role=\"none\" />}\n              message={labels?.emptyMessage}\n            />\n          )}\n        </HvDialogContent>\n        <HvDialogActions>\n          <HvButton variant=\"primary\" onClick={onApply}>\n            {labels?.dialogApply}\n          </HvButton>\n          <HvButton variant=\"secondarySubtle\" onClick={onCancel}>\n            {labels?.dialogCancel}\n          </HvButton>\n        </HvDialogActions>\n      </HvDialog>\n    </HvFlowNode>\n  );\n};\n"],"names":["useLabels","useClasses","jsxs","HvFlowNode","HvDialog","jsx","HvDialogTitle","HvDialogContent","HvDashboard","HvEmptyState","Info","HvDialogActions","HvButton"],"mappings":";;;;;;;;AAmBA,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAkBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACE,QAAA,SAASA,eAAAA,UAAU,gBAAgB,UAAU;AACnD,QAAM,EAAE,QAAA,IAAYC,qBAAA,WAAW,WAAW;AAE1C,SACGC,2BAAAA,KAAAC,KAAAA,YAAA,EAAW,IAAQ,SAAmB,GAAG,QACvC,UAAA;AAAA,IAAA;AAAA,IACDD,2BAAA;AAAA,MAACE,eAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAS;AAAA,QACT,WAAS;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAA,IAACC,eAAc,eAAA,EAAA,SAAQ,QAAQ,UAAA,QAAQ,aAAY;AAAA,UACnDJ,2BAAAA,KAACK,eAAAA,iBAAgB,EAAA,eAAa,MAC3B,UAAA;AAAA,YAAQ,QAAA;AAAA,YACR,UAAU,QAAQ,SAAS,IAC1BF,2BAAA;AAAA,cAACG,UAAA;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN;AAAA,gBACA,aAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,QAAQ,CAAC,IAAI,EAAE;AAAA,gBACf,kBAAkB,CAAC,GAAG,EAAE;AAAA,gBACvB,GAAG;AAAA,gBAEH,UAAA;AAAA,cAAA;AAAA,YAAA,IAGHH,2BAAA;AAAA,cAACI,eAAA;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBACnB,MAAMJ,2BAAAA,IAACK,gBAAAA,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,gBACxB,SAAS,QAAQ;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA,GAEJ;AAAA,0CACCC,eAAAA,iBACC,EAAA,UAAA;AAAA,YAAAN,+BAACO,eAAAA,YAAS,SAAQ,WAAU,SAAS,SAClC,kBAAQ,aACX;AAAA,2CACCA,eAAAA,UAAS,EAAA,SAAQ,mBAAkB,SAAS,UAC1C,kBAAQ,cACX;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"DashboardNode.cjs","sources":["../../../../src/Flow/nodes/DashboardNode.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvButton,\n  HvDialog,\n  HvDialogActions,\n  HvDialogContent,\n  HvDialogProps,\n  HvDialogTitle,\n  HvEmptyState,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDashboard, HvDashboardProps } from \"../../Dashboard\";\nimport { HvFlowNode, HvFlowNodeProps } from \"../Node\";\nimport { staticClasses, useClasses } from \"./DashboardNode.styles\";\n\nexport { staticClasses as hvDashboardNodeClasses };\n\nconst DEFAULT_LABELS = {\n  emptyMessage: \"No visualizations connected to the dashboard.\",\n  dialogTitle: \"Configure dashboard\",\n  dialogSubtitle: \"Please configure the layout of your dashboard as needed.\",\n  dialogApply: \"Apply\",\n  dialogCancel: \"Cancel\",\n};\n\nexport type HvDashboardNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardNodeProps\n  extends HvFlowNodeProps,\n    Pick<HvDialogProps, \"open\" | \"onClose\">,\n    Pick<HvDashboardProps, \"layout\"> {\n  classes?: HvDashboardNodeClasses;\n  labels?: HvFlowNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n  previewItems?: React.ReactNode;\n  onApply?: () => void;\n  onCancel?: () => void;\n  dashboardProps?: Omit<HvDashboardProps, \"children\">;\n  dialogProps?: HvDialogProps;\n}\n\nexport const HvDashboardNode = (props: HvDashboardNodeProps) => {\n  const {\n    id,\n    open,\n    layout,\n    labels: labelsProp,\n    classes: classesProp,\n    previewItems,\n    children,\n    dialogProps,\n    dashboardProps,\n    onApply,\n    onCancel,\n    onClose,\n    ...others\n  } = props;\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvFlowNode id={id} classes={classes} labels={labels} {...others}>\n      {children}\n      <HvDialog\n        open={open}\n        maxWidth=\"lg\"\n        fullWidth\n        onClose={onClose}\n        {...dialogProps}\n      >\n        <HvDialogTitle variant=\"info\">{labels?.dialogTitle}</HvDialogTitle>\n        <HvDialogContent indentContent>\n          {labels?.dialogSubtitle}\n          {layout && layout?.length > 0 ? (\n            <HvDashboard\n              cols={12}\n              layout={layout}\n              compactType=\"vertical\"\n              rowHeight={80}\n              margin={[16, 16]}\n              containerPadding={[0, 16]}\n              {...dashboardProps}\n            >\n              {previewItems}\n            </HvDashboard>\n          ) : (\n            <HvEmptyState\n              className={classes.empty}\n              icon={<Info role=\"none\" />}\n              message={labels?.emptyMessage}\n            />\n          )}\n        </HvDialogContent>\n        <HvDialogActions>\n          <HvButton variant=\"primary\" onClick={onApply}>\n            {labels?.dialogApply}\n          </HvButton>\n          <HvButton variant=\"secondarySubtle\" onClick={onCancel}>\n            {labels?.dialogCancel}\n          </HvButton>\n        </HvDialogActions>\n      </HvDialog>\n    </HvFlowNode>\n  );\n};\n"],"names":["useLabels","useClasses","HvFlowNode","jsxs","HvDialog","jsx","HvDialogTitle","HvDialogContent","HvDashboard","HvEmptyState","Info","HvDialogActions","HvButton"],"mappings":";;;;;;;;AAmBA,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAiBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACE,QAAA,SAASA,eAAAA,UAAU,gBAAgB,UAAU;AACnD,QAAM,EAAE,QAAA,IAAYC,qBAAA,WAAW,WAAW;AAE1C,yCACGC,KAAW,YAAA,EAAA,IAAQ,SAAkB,QAAiB,GAAG,QACvD,UAAA;AAAA,IAAA;AAAA,IACDC,2BAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAS;AAAA,QACT,WAAS;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAA,IAACC,eAAc,eAAA,EAAA,SAAQ,QAAQ,UAAA,QAAQ,aAAY;AAAA,UACnDH,2BAAAA,KAACI,eAAAA,iBAAgB,EAAA,eAAa,MAC3B,UAAA;AAAA,YAAQ,QAAA;AAAA,YACR,UAAU,QAAQ,SAAS,IAC1BF,2BAAA;AAAA,cAACG,UAAA;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN;AAAA,gBACA,aAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,QAAQ,CAAC,IAAI,EAAE;AAAA,gBACf,kBAAkB,CAAC,GAAG,EAAE;AAAA,gBACvB,GAAG;AAAA,gBAEH,UAAA;AAAA,cAAA;AAAA,YAAA,IAGHH,2BAAA;AAAA,cAACI,eAAA;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBACnB,MAAMJ,2BAAAA,IAACK,gBAAAA,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,gBACxB,SAAS,QAAQ;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA,GAEJ;AAAA,0CACCC,eAAAA,iBACC,EAAA,UAAA;AAAA,YAAAN,+BAACO,eAAAA,YAAS,SAAQ,WAAU,SAAS,SAClC,kBAAQ,aACX;AAAA,2CACCA,eAAAA,UAAS,EAAA,SAAQ,mBAAkB,SAAS,UAC1C,kBAAQ,cACX;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}

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

@@ -9,27 +9,11 @@ import "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvFlow", {
   root: {
     height: "100%",
-    "& .react-flow__handle": {
-      backgroundColor: theme.colors.secondary_60,
-      width: 8,
-      height: 8,
-      zIndex: theme.zIndices.overlay
-    },
     "& .react-flow__handle-connecting": {
-      backgroundColor: theme.colors.negative_20,
-      width: 12,
-      height: 12,
-      "&.react-flow__handle-left": {
-        translate: "0 4px"
-      }
+      backgroundColor: theme.colors.negative_20
     },
     "& .react-flow__handle-valid": {
-      backgroundColor: theme.colors.positive_20,
-      width: 12,
-      height: 12,
-      "&.react-flow__handle-left": {
-        translate: "0 4px"
-      }
+      backgroundColor: theme.colors.positive_20
     },
     [`& .selected > .${staticClasses$1.root}`]: {
       border: `1px solid ${theme.colors.secondary_60}`,

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.styles.js","sources":["../../../src/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":["flowBaseNodeClasses"],"mappings":";;;;;;;;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,MAAM,SAAS;AAAA,IACzB;AAAA,IACA,oCAAoC;AAAA,MAClC,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3B,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,+BAA+B;AAAA,MAC7B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,6BAA6B;AAAA,QAC3B,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,kBAAkBA,gBAAoB,IAAI,EAAE,GAAG;AAAA,MAC9C,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,cAAc,MAAM,MAAM;AAAA,MAC1B,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Flow.styles.js","sources":["../../../src/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-connecting\": {\n      backgroundColor: theme.colors.negative_20,\n    },\n    \"& .react-flow__handle-valid\": {\n      backgroundColor: theme.colors.positive_20,\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":["flowBaseNodeClasses"],"mappings":";;;;;;;;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,oCAAoC;AAAA,MAClC,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,+BAA+B;AAAA,MAC7B,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,CAAC,kBAAkBA,gBAAoB,IAAI,EAAE,GAAG;AAAA,MAC9C,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,cAAc,MAAM,MAAM;AAAA,MAC1B,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;"}