npm - @hitachivantara/uikit-react-lab - Versions diffs - 5.38.2 → 5.40.0 - Mend

@hitachivantara/uikit-react-lab 5.38.2 → 5.40.0

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

Files changed (22) hide show

package/dist/cjs/Flow/Flow.styles.cjs +1 -0
package/dist/cjs/Flow/Node/BaseNode.cjs +13 -8
package/dist/cjs/Flow/base.cjs +7 -7
package/dist/cjs/Flow/hooks/useFlowNode.cjs +37 -2
package/dist/cjs/Flow/hooks/useNode.cjs +10 -2
package/dist/cjs/StepNavigation/StepNavigation.cjs +5 -7
package/dist/cjs/index.cjs +1 -0
package/dist/esm/Flow/Flow.styles.js +1 -0
package/dist/esm/Flow/Flow.styles.js.map +1 -1
package/dist/esm/Flow/Node/BaseNode.js +13 -8
package/dist/esm/Flow/Node/BaseNode.js.map +1 -1
package/dist/esm/Flow/base.js +7 -7
package/dist/esm/Flow/base.js.map +1 -1
package/dist/esm/Flow/hooks/useFlowNode.js +37 -2
package/dist/esm/Flow/hooks/useFlowNode.js.map +1 -1
package/dist/esm/Flow/hooks/useNode.js +11 -3
package/dist/esm/Flow/hooks/useNode.js.map +1 -1
package/dist/esm/StepNavigation/StepNavigation.js +5 -7
package/dist/esm/StepNavigation/StepNavigation.js.map +1 -1
package/dist/esm/index.js +2 -1
package/dist/types/index.d.ts +43 -34
package/package.json +7 -5

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

@@ -4,6 +4,7 @@ const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const BaseNode_styles = require("./Node/BaseNode.styles.cjs");
 require("react/jsx-runtime");
 require("reactflow");
+require("@hitachivantara/uikit-react-utils");
 const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlow", {
   root: {
     height: "100%",

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const ReactFlow = require("reactflow");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const BaseNode_styles = require("./BaseNode.styles.cjs");
 const utils = require("./utils.cjs");
 const useNode = require("../hooks/useNode.cjs");
@@ -95,10 +96,12 @@ const HvFlowBaseNode = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      style: {
-        // @ts-ignore
-        "--node-color": color
-      },
+      style: uikitReactUtils.mergeStyles(
+        {},
+        {
+          "--node-color": color
+        }
+      ),
       className: cx(
         "nowheel",
         // Disables the default canvas pan behaviour when scrolling inside the node
@@ -121,10 +124,12 @@ const HvFlowBaseNode = ({
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              style: {
-                // @ts-ignore
-                "--icon-color": iconColor
-              },
+              style: uikitReactUtils.mergeStyles(
+                {},
+                {
+                  "--icon-color": iconColor
+                }
+              ),
               className: classes.titleContainer,
               children: [
                 icon,

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

@@ -231,8 +231,7 @@ const flowStyles = react.css`
   }
   .react-flow__node-default,
   .react-flow__node-input,
-  .react-flow__node-output,
-  .react-flow__node-group {
+  .react-flow__node-output {
     padding: ${uikitReactCore.theme.space.sm};
     border-radius: ${uikitReactCore.theme.radii.round};
     width: 150px;
@@ -241,6 +240,10 @@ const flowStyles = react.css`
     border: 1px solid ${uikitReactCore.theme.colors.negative};
     background-color: ${uikitReactCore.theme.colors.negative_20};
   }
+  .react-flow__node-group {
+    color: ${uikitReactCore.theme.colors.secondary};
+    text-align: center;
+  }
   .react-flow__node-default::before {
     content: "Unknown node type";
     display: block;
@@ -249,7 +252,6 @@ const flowStyles = react.css`
   .react-flow__node-input.selectable:hover,
   .react-flow__node-output.selectable:hover,
   .react-flow__node-group.selectable:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   }
   .react-flow__node-default.selectable.selected,
   .react-flow__node-default.selectable:focus,
@@ -263,7 +265,6 @@ const flowStyles = react.css`
   .react-flow__node-group.selectable.selected,
   .react-flow__node-group.selectable:focus,
   .react-flow__node-group.selectable:focus-visible {
-    box-shadow: 0 0 0 0.5px #1a192b;
   }
   .react-flow__node-group {
     background-color: rgba(240, 240, 240, 0.25);
@@ -271,7 +272,6 @@ const flowStyles = react.css`
   .react-flow__nodesselection-rect,
   .react-flow__selection {
     background: rgba(0, 89, 220, 0.08);
-    border: 1px dotted rgba(0, 89, 220, 0.8);
   }
   .react-flow__nodesselection-rect:focus,
   .react-flow__nodesselection-rect:focus-visible,
@@ -373,9 +373,9 @@ const flowStyles = react.css`
   }
   /* line styles */
   .react-flow__resize-control.line {
-    border-color: ${uikitReactCore.theme.colors.primary};
+    border-color: ${uikitReactCore.theme.colors.primary_80};
     border-width: 0;
-    border-style: solid;
+    border-style: dashed;
   }
   .react-flow__resize-control.line.left,
   .react-flow__resize-control.line.right {

package/dist/cjs/Flow/hooks/useFlowNode.cjs CHANGED Viewed

@@ -5,6 +5,14 @@ const ReactFlow = require("reactflow");
 const shallow = require("zustand/shallow");
 const useFlowInstance = require("./useFlowInstance.cjs");
 const useNodeId = require("./useNodeId.cjs");
+function relativePosition(positionA, positionB) {
+  if (positionA && positionB)
+    return {
+      x: positionB.x - positionA.x,
+      y: positionB.y - positionA.y
+    };
+  return { x: 0, y: 0 };
+}
 function useFlowNode(id) {
   const nodeId = useNodeId.useNodeId(id);
   const nodeSelector = React.useCallback(
@@ -82,17 +90,44 @@ function useFlowNodeUtils(id) {
     },
     [nodeId, reactFlowInstance]
   );
+  const setNodeParent = React.useCallback(
+    (node, extent) => {
+      if (!nodeId) return;
+      reactFlowInstance.setNodes((nodes) => {
+        return nodes.map((n) => {
+          if (n.id === nodeId) {
+            return {
+              ...n,
+              parentId: node ? node.id : void 0,
+              extent,
+              position: node ? relativePosition(node.position, n.position) : n.positionAbsolute ?? n.position
+            };
+          }
+          return n;
+        });
+      });
+    },
+    [nodeId, reactFlowInstance]
+  );
   return React.useMemo(
     () => ({
-      setNodeData
+      setNodeData,
+      setNodeParent
     }),
-    [setNodeData]
+    [setNodeData, setNodeParent]
   );
 }
+function useFlowNodeIntersections(id) {
+  const nodeId = useNodeId.useNodeId(id);
+  const node = useFlowNode(nodeId ?? "");
+  const reactFlowInstance = useFlowInstance.useFlowInstance();
+  return node ? reactFlowInstance.getIntersectingNodes(node, false) : [];
+}
 exports.useFlowInputNodes = useFlowInputNodes;
 exports.useFlowNode = useFlowNode;
 exports.useFlowNodeEdges = useFlowNodeEdges;
 exports.useFlowNodeInputEdges = useFlowNodeInputEdges;
+exports.useFlowNodeIntersections = useFlowNodeIntersections;
 exports.useFlowNodeOutputEdges = useFlowNodeOutputEdges;
 exports.useFlowNodeParents = useFlowNodeParents;
 exports.useFlowNodeUtils = useFlowNodeUtils;

package/dist/cjs/Flow/hooks/useNode.cjs CHANGED Viewed

@@ -36,6 +36,8 @@ function useHvNode(props) {
   const outputs = React.useMemo(() => utils.identifyHandles(outputsProp), [outputsProp]);
   const outputEdges = useFlowNode.useFlowNodeOutputEdges();
   const { nodeGroups } = useFlowContext.useFlowContext();
+  const intersections = useFlowNode.useFlowNodeIntersections();
+  const { setNodeParent, setNodeData } = useFlowNode.useFlowNodeUtils();
   const node = useFlowNode.useFlowNode();
   const reactFlowInstance = useFlowInstance.useFlowInstance();
   const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
@@ -120,11 +122,14 @@ function useHvNode(props) {
       node,
       nodeActions,
       showActions,
+      intersections,
       // prop getters
       getNodeToolbarProps,
       // actions
       toggleShowActions,
-      handleDefaultAction
+      handleDefaultAction,
+      setNodeData,
+      setNodeParent
     }),
     [
       id,
@@ -140,9 +145,12 @@ function useHvNode(props) {
       node,
       nodeActions,
       showActions,
+      intersections,
       getNodeToolbarProps,
       toggleShowActions,
-      handleDefaultAction
+      handleDefaultAction,
+      setNodeData,
+      setNodeParent
     ]
   );
 }

package/dist/cjs/StepNavigation/StepNavigation.cjs CHANGED Viewed

@@ -69,13 +69,11 @@ const HvStepNavigation = ({
         const StepContainer = styledLi(containerSize);
         const Step = styledDiv(Math.max(containerSize, 30));
         const stepProps = {
-          ...{
-            size: stepSizeKey,
-            state,
-            title,
-            number: index + 1,
-            ...props
-          }
+          size: stepSizeKey,
+          state,
+          title,
+          number: index + 1,
+          ...props
         };
         const stepElement = /* @__PURE__ */ jsxRuntime.jsx(StepContainer, { className: classes.li, children: hasTitles ? /* @__PURE__ */ jsxRuntime.jsx(
           StepComponent,

package/dist/cjs/index.cjs CHANGED Viewed

@@ -67,6 +67,7 @@ exports.useFlowInputNodes = useFlowNode.useFlowInputNodes;
 exports.useFlowNode = useFlowNode.useFlowNode;
 exports.useFlowNodeEdges = useFlowNode.useFlowNodeEdges;
 exports.useFlowNodeInputEdges = useFlowNode.useFlowNodeInputEdges;
+exports.useFlowNodeIntersections = useFlowNode.useFlowNodeIntersections;
 exports.useFlowNodeOutputEdges = useFlowNode.useFlowNodeOutputEdges;
 exports.useFlowNodeParents = useFlowNode.useFlowNodeParents;
 exports.useFlowNodeUtils = useFlowNode.useFlowNodeUtils;

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

@@ -2,6 +2,7 @@ import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 import { staticClasses as staticClasses$1 } from "./Node/BaseNode.styles.js";
 import "react/jsx-runtime";
 import "reactflow";
+import "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvFlow", {
   root: {
     height: "100%",

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

	@@ -1 +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 [`& .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,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;"}
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 [`& .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,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;"}

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { NodeToolbar, Handle, Position } from "reactflow";
 import { useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
+import { mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseNode.styles.js";
 import { staticClasses } from "./BaseNode.styles.js";
 import { renderedIcon, isInputGroup, isOutputGroup, isConnected } from "./utils.js";
@@ -94,10 +95,12 @@ const HvFlowBaseNode = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      style: {
-        // @ts-ignore
-        "--node-color": color
-      },
+      style: mergeStyles(
+        {},
+        {
+          "--node-color": color
+        }
+      ),
       className: cx(
         "nowheel",
         // Disables the default canvas pan behaviour when scrolling inside the node
@@ -120,10 +123,12 @@ const HvFlowBaseNode = ({
           /* @__PURE__ */ jsxs(
             "div",
             {
-              style: {
-                // @ts-ignore
-                "--icon-color": iconColor
-              },
+              style: mergeStyles(
+                {},
+                {
+                  "--icon-color": iconColor
+                }
+              ),
               className: classes.titleContainer,
               children: [
                 icon,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvUseNodeParams, useHvNode } from \"../hooks\";\nimport {\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n isConnected,\n isInputGroup,\n isOutputGroup,\n renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const 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\" \| \"color\">,\n Omit<HvUseNodeParams, \"id\">,\n NodeProps<T> {\n /** Header items /\n headerItems?: React.ReactNode;\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: titleProp,\n headerItems,\n icon: iconProp,\n color: colorProp,\n inputs: inputsProp,\n outputs: outputsProp,\n nodeActions: nodeActionsProp,\n footer,\n classes: classesProp,\n labels: labelsProp,\n className,\n children,\n}: HvFlowBaseNodeProps<unknown>) => {\n const {\n toggleShowActions,\n getNodeToolbarProps,\n handleDefaultAction,\n nodeActions,\n title,\n icon,\n color,\n iconColor,\n inputEdges,\n inputs,\n outputEdges,\n outputs,\n node,\n } = useHvNode({\n id,\n title: titleProp,\n inputs: inputsProp,\n outputs: outputsProp,\n icon: iconProp,\n color: colorProp,\n labels: labelsProp,\n nodeActions: nodeActionsProp,\n });\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const { classes, cx } = useClasses(classesProp);\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(classes.handle, {\n [classes.handleConnected]: edgeConnected,\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(classes.handle, {\n [classes.handleConnected]: edgeConnected,\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 return (\n <div\n style={{\n // @ts-ignore\n \"--node-color\": color,\n }}\n className={cx(\n \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n classes.root,\n className,\n )}\n onMouseEnter={toggleShowActions}\n onMouseLeave={toggleShowActions}\n >\n <NodeToolbar {...getNodeToolbarProps()}>\n {nodeActions?.map((action) => (\n <HvIconButton\n key={action.id}\n title={action.label}\n onClick={() => handleDefaultAction(action)}\n >\n {renderedIcon(action.icon)}\n </HvIconButton>\n ))}\n </NodeToolbar>\n <div className={classes.headerContainer}>\n <div\n style={{\n // @ts-ignore\n \"--icon-color\": iconColor,\n }}\n className={classes.titleContainer}\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":[],"mappings":"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"}
1	+ {"version":3,"file":"BaseNode.js","sources":["../../../../src/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { Handle, NodeProps, NodeToolbar, Position } from \"reactflow\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvIconButton,\n HvTypography,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { mergeStyles } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvUseNodeParams, useHvNode } from \"../hooks\";\nimport {\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\nimport {\n isConnected,\n isInputGroup,\n isOutputGroup,\n renderedIcon,\n} from \"./utils\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport const 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\" \| \"color\">,\n Omit<HvUseNodeParams, \"id\">,\n NodeProps<T> {\n /** Header items /\n headerItems?: React.ReactNode;\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: titleProp,\n headerItems,\n icon: iconProp,\n color: colorProp,\n inputs: inputsProp,\n outputs: outputsProp,\n nodeActions: nodeActionsProp,\n footer,\n classes: classesProp,\n labels: labelsProp,\n className,\n children,\n}: HvFlowBaseNodeProps<unknown>) => {\n const {\n toggleShowActions,\n getNodeToolbarProps,\n handleDefaultAction,\n nodeActions,\n title,\n icon,\n color,\n iconColor,\n inputEdges,\n inputs,\n outputEdges,\n outputs,\n node,\n } = useHvNode({\n id,\n title: titleProp,\n inputs: inputsProp,\n outputs: outputsProp,\n icon: iconProp,\n color: colorProp,\n labels: labelsProp,\n nodeActions: nodeActionsProp,\n });\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const { classes, cx } = useClasses(classesProp);\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(classes.handle, {\n [classes.handleConnected]: edgeConnected,\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(classes.handle, {\n [classes.handleConnected]: edgeConnected,\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 return (\n <div\n style={mergeStyles(\n {},\n {\n \"--node-color\": color,\n },\n )}\n className={cx(\n \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n classes.root,\n className,\n )}\n onMouseEnter={toggleShowActions}\n onMouseLeave={toggleShowActions}\n >\n <NodeToolbar {...getNodeToolbarProps()}>\n {nodeActions?.map((action) => (\n <HvIconButton\n key={action.id}\n title={action.label}\n onClick={() => handleDefaultAction(action)}\n >\n {renderedIcon(action.icon)}\n </HvIconButton>\n ))}\n </NodeToolbar>\n <div className={classes.headerContainer}>\n <div\n style={mergeStyles(\n {},\n {\n \"--icon-color\": iconColor,\n },\n )}\n className={classes.titleContainer}\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":[],"mappings":"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"}

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

@@ -229,8 +229,7 @@ const flowStyles = css`
   }
   .react-flow__node-default,
   .react-flow__node-input,
-  .react-flow__node-output,
-  .react-flow__node-group {
+  .react-flow__node-output {
     padding: ${theme.space.sm};
     border-radius: ${theme.radii.round};
     width: 150px;
@@ -239,6 +238,10 @@ const flowStyles = css`
     border: 1px solid ${theme.colors.negative};
     background-color: ${theme.colors.negative_20};
   }
+  .react-flow__node-group {
+    color: ${theme.colors.secondary};
+    text-align: center;
+  }
   .react-flow__node-default::before {
     content: "Unknown node type";
     display: block;
@@ -247,7 +250,6 @@ const flowStyles = css`
   .react-flow__node-input.selectable:hover,
   .react-flow__node-output.selectable:hover,
   .react-flow__node-group.selectable:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   }
   .react-flow__node-default.selectable.selected,
   .react-flow__node-default.selectable:focus,
@@ -261,7 +263,6 @@ const flowStyles = css`
   .react-flow__node-group.selectable.selected,
   .react-flow__node-group.selectable:focus,
   .react-flow__node-group.selectable:focus-visible {
-    box-shadow: 0 0 0 0.5px #1a192b;
   }
   .react-flow__node-group {
     background-color: rgba(240, 240, 240, 0.25);
@@ -269,7 +270,6 @@ const flowStyles = css`
   .react-flow__nodesselection-rect,
   .react-flow__selection {
     background: rgba(0, 89, 220, 0.08);
-    border: 1px dotted rgba(0, 89, 220, 0.8);
   }
   .react-flow__nodesselection-rect:focus,
   .react-flow__nodesselection-rect:focus-visible,
@@ -371,9 +371,9 @@ const flowStyles = css`
   }
   /* line styles */
   .react-flow__resize-control.line {
-    border-color: ${theme.colors.primary};
+    border-color: ${theme.colors.primary_80};
     border-width: 0;
-    border-style: solid;
+    border-style: dashed;
   }
   .react-flow__resize-control.line.left,
   .react-flow__resize-control.line.right {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"base.js","sources":["../../../src/Flow/base.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const flowStyles = css`\n /* this gets exported as style.css and can be used for the default theming /\n / these are the necessary styles for React Flow, they get used by base.css and style.css /\n .react-flow__container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n .react-flow__pane {\n z-index: 1;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__pane.selection {\n cursor: pointer;\n }\n .react-flow__pane.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__viewport {\n transform-origin: 0 0;\n z-index: 2;\n pointer-events: none;\n }\n .react-flow__renderer {\n z-index: 4;\n }\n .react-flow__selection {\n z-index: 6;\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible {\n outline: none;\n }\n .react-flow .react-flow__edges {\n pointer-events: none;\n overflow: visible;\n }\n .react-flow__edge-path,\n .react-flow__connection-path {\n stroke: ${theme.colors.secondary};\n stroke-width: 1;\n fill: none;\n }\n .react-flow__edge {\n pointer-events: visibleStroke;\n cursor: pointer;\n }\n .react-flow__edge.animated path {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__edge.animated path.react-flow__edge-interaction {\n stroke-dasharray: none;\n -webkit-animation: none;\n animation: none;\n }\n .react-flow__edge.inactive {\n pointer-events: none;\n }\n .react-flow__edge.selected,\n .react-flow__edge:focus,\n .react-flow__edge:focus-visible {\n outline: none;\n }\n .react-flow__edge.selected .react-flow__edge-path,\n .react-flow__edge:focus .react-flow__edge-path,\n .react-flow__edge:focus-visible .react-flow__edge-path {\n stroke: #555;\n }\n .react-flow__edge-textwrapper {\n pointer-events: all;\n }\n .react-flow__edge-textbg {\n fill: white;\n }\n .react-flow__edge .react-flow__edge-text {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__connection {\n pointer-events: none;\n }\n .react-flow__connection .animated {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__connectionline {\n z-index: 1001;\n }\n .react-flow__nodes {\n pointer-events: none;\n transform-origin: 0 0;\n }\n .react-flow__node {\n position: absolute;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n box-sizing: border-box;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__node.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__nodesselection {\n z-index: 3;\n transform-origin: left top;\n pointer-events: none;\n }\n .react-flow__nodesselection-rect {\n position: absolute;\n pointer-events: all;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__handle {\n position: absolute;\n pointer-events: none;\n min-width: 5px;\n min-height: 5px;\n width: 6px;\n height: 6px;\n background: #1a192b;\n border: 1px solid white;\n border-radius: 100%;\n }\n .react-flow__handle.connectionindicator {\n pointer-events: all;\n cursor: crosshair;\n }\n .react-flow__handle-bottom {\n top: auto;\n left: 50%;\n bottom: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-top {\n left: 50%;\n top: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-left {\n top: 50%;\n left: -4px;\n transform: translate(0, -50%);\n }\n .react-flow__handle-right {\n right: -4px;\n top: 50%;\n transform: translate(0, -50%);\n }\n .react-flow__edgeupdater {\n cursor: move;\n pointer-events: all;\n }\n .react-flow__panel {\n position: absolute;\n z-index: 5;\n margin: 15px;\n }\n .react-flow__panel.top {\n top: 0;\n }\n .react-flow__panel.bottom {\n bottom: 0;\n }\n .react-flow__panel.left {\n left: 0;\n }\n .react-flow__panel.right {\n right: 0;\n }\n .react-flow__panel.center {\n left: 50%;\n transform: translateX(-50%);\n }\n .react-flow__attribution {\n font-size: 10px;\n background: rgba(255, 255, 255, 0.5);\n padding: 2px 3px;\n margin: 0;\n }\n .react-flow__attribution a {\n text-decoration: none;\n color: #999;\n }\n @-webkit-keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n @keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n .react-flow__edgelabel-renderer {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__edge.updating .react-flow__edge-path {\n stroke: #777;\n }\n .react-flow__edge-text {\n font-size: 10px;\n }\n .react-flow__node.selectable:focus,\n .react-flow__node.selectable:focus-visible {\n outline: none;\n }\n .react-flow__node-default,\n .react-flow__node-input,\n .react-flow__node-output,\n .react-flow__node-group {\n padding: ${theme.space.sm};\n border-radius: ${theme.radii.round};\n width: 150px;\n color: ${theme.colors.secondary};\n text-align: center;\n border: 1px solid ${theme.colors.negative};\n background-color: ${theme.colors.negative_20};\n }\n .react-flow__node-default::before {\n content: \"Unknown node type\";\n display: block;\n }\n .react-flow__node-default.selectable:hover,\n .react-flow__node-input.selectable:hover,\n .react-flow__node-output.selectable:hover,\n .react-flow__node-group.selectable:hover {\n box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n }\n .react-flow__node-default.selectable.selected,\n .react-flow__node-default.selectable:focus,\n .react-flow__node-default.selectable:focus-visible,\n .react-flow__node-input.selectable.selected,\n .react-flow__node-input.selectable:focus,\n .react-flow__node-input.selectable:focus-visible,\n .react-flow__node-output.selectable.selected,\n .react-flow__node-output.selectable:focus,\n .react-flow__node-output.selectable:focus-visible,\n .react-flow__node-group.selectable.selected,\n .react-flow__node-group.selectable:focus,\n .react-flow__node-group.selectable:focus-visible {\n box-shadow: 0 0 0 0.5px #1a192b;\n }\n .react-flow__node-group {\n background-color: rgba(240, 240, 240, 0.25);\n }\n .react-flow__nodesselection-rect,\n .react-flow__selection {\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible,\n .react-flow__selection:focus,\n .react-flow__selection:focus-visible {\n outline: none;\n }\n .react-flow__controls {\n box-shadow: ${theme.colors.shadow};\n }\n .react-flow__controls-button {\n border: none;\n background: #fefefe;\n border-bottom: 1px solid #eee;\n box-sizing: content-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 16px;\n height: 16px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n padding: 5px;\n }\n .react-flow__controls-button:hover {\n background: #f4f4f4;\n }\n .react-flow__controls-button svg {\n width: 100%;\n max-width: 12px;\n max-height: 12px;\n }\n .react-flow__controls-button:disabled {\n pointer-events: none;\n }\n .react-flow__controls-button:disabled svg {\n fill-opacity: 0.4;\n }\n .react-flow__minimap {\n background-color: #fff;\n }\n .react-flow__resize-control {\n position: absolute;\n }\n .react-flow__resize-control.left,\n .react-flow__resize-control.right {\n cursor: ew-resize;\n }\n .react-flow__resize-control.top,\n .react-flow__resize-control.bottom {\n cursor: ns-resize;\n }\n .react-flow__resize-control.top.left,\n .react-flow__resize-control.bottom.right {\n cursor: nwse-resize;\n }\n .react-flow__resize-control.bottom.left,\n .react-flow__resize-control.top.right {\n cursor: nesw-resize;\n }\n / handle styles /\n .react-flow__resize-control.handle {\n width: 4px;\n height: 4px;\n border: 1px solid #fff;\n border-radius: 1px;\n background-color: ${theme.colors.primary};\n transform: translate(-50%, -50%);\n }\n .react-flow__resize-control.handle.left {\n left: 0;\n top: 50%;\n }\n .react-flow__resize-control.handle.right {\n left: 100%;\n top: 50%;\n }\n .react-flow__resize-control.handle.top {\n left: 50%;\n top: 0;\n }\n .react-flow__resize-control.handle.bottom {\n left: 50%;\n top: 100%;\n }\n .react-flow__resize-control.handle.top.left {\n left: 0;\n }\n .react-flow__resize-control.handle.bottom.left {\n left: 0;\n }\n .react-flow__resize-control.handle.top.right {\n left: 100%;\n }\n .react-flow__resize-control.handle.bottom.right {\n left: 100%;\n }\n / line styles */\n .react-flow__resize-control.line {\n border-color: ${theme.colors.primary};\n border-width: 0;\n border-style: solid;\n }\n .react-flow__resize-control.line.left,\n .react-flow__resize-control.line.right {\n width: 1px;\n transform: translate(-50%, 0);\n top: 0;\n height: 100%;\n }\n .react-flow__resize-control.line.left {\n left: 0;\n border-left-width: 1px;\n }\n .react-flow__resize-control.line.right {\n left: 100%;\n border-right-width: 1px;\n }\n .react-flow__resize-control.line.top,\n .react-flow__resize-control.line.bottom {\n height: 1px;\n transform: translate(0, -50%);\n left: 0;\n width: 100%;\n }\n .react-flow__resize-control.line.top {\n top: 0;\n border-top-width: 1px;\n }\n .react-flow__resize-control.line.bottom {\n border-bottom-width: 1px;\n top: 100%;\n }\n`;\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cA2CZ,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eA4LrB,MAAM,MAAM,EAAE;AAAA,qBACR,MAAM,MAAM,KAAK;AAAA;AAAA,aAEzB,MAAM,OAAO,SAAS;AAAA;AAAA,wBAEX,MAAM,OAAO,QAAQ;AAAA,wBACrB,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAyC9B,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA4Db,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAiCxB,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"base.js","sources":["../../../src/Flow/base.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const flowStyles = css`\n /* this gets exported as style.css and can be used for the default theming /\n / these are the necessary styles for React Flow, they get used by base.css and style.css /\n .react-flow__container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n .react-flow__pane {\n z-index: 1;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__pane.selection {\n cursor: pointer;\n }\n .react-flow__pane.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__viewport {\n transform-origin: 0 0;\n z-index: 2;\n pointer-events: none;\n }\n .react-flow__renderer {\n z-index: 4;\n }\n .react-flow__selection {\n z-index: 6;\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible {\n outline: none;\n }\n .react-flow .react-flow__edges {\n pointer-events: none;\n overflow: visible;\n }\n .react-flow__edge-path,\n .react-flow__connection-path {\n stroke: ${theme.colors.secondary};\n stroke-width: 1;\n fill: none;\n }\n .react-flow__edge {\n pointer-events: visibleStroke;\n cursor: pointer;\n }\n .react-flow__edge.animated path {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__edge.animated path.react-flow__edge-interaction {\n stroke-dasharray: none;\n -webkit-animation: none;\n animation: none;\n }\n .react-flow__edge.inactive {\n pointer-events: none;\n }\n .react-flow__edge.selected,\n .react-flow__edge:focus,\n .react-flow__edge:focus-visible {\n outline: none;\n }\n .react-flow__edge.selected .react-flow__edge-path,\n .react-flow__edge:focus .react-flow__edge-path,\n .react-flow__edge:focus-visible .react-flow__edge-path {\n stroke: #555;\n }\n .react-flow__edge-textwrapper {\n pointer-events: all;\n }\n .react-flow__edge-textbg {\n fill: white;\n }\n .react-flow__edge .react-flow__edge-text {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__connection {\n pointer-events: none;\n }\n .react-flow__connection .animated {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n .react-flow__connectionline {\n z-index: 1001;\n }\n .react-flow__nodes {\n pointer-events: none;\n transform-origin: 0 0;\n }\n .react-flow__node {\n position: absolute;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n box-sizing: border-box;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__node.dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n .react-flow__nodesselection {\n z-index: 3;\n transform-origin: left top;\n pointer-events: none;\n }\n .react-flow__nodesselection-rect {\n position: absolute;\n pointer-events: all;\n cursor: -webkit-grab;\n cursor: grab;\n }\n .react-flow__handle {\n position: absolute;\n pointer-events: none;\n min-width: 5px;\n min-height: 5px;\n width: 6px;\n height: 6px;\n background: #1a192b;\n border: 1px solid white;\n border-radius: 100%;\n }\n .react-flow__handle.connectionindicator {\n pointer-events: all;\n cursor: crosshair;\n }\n .react-flow__handle-bottom {\n top: auto;\n left: 50%;\n bottom: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-top {\n left: 50%;\n top: -4px;\n transform: translate(-50%, 0);\n }\n .react-flow__handle-left {\n top: 50%;\n left: -4px;\n transform: translate(0, -50%);\n }\n .react-flow__handle-right {\n right: -4px;\n top: 50%;\n transform: translate(0, -50%);\n }\n .react-flow__edgeupdater {\n cursor: move;\n pointer-events: all;\n }\n .react-flow__panel {\n position: absolute;\n z-index: 5;\n margin: 15px;\n }\n .react-flow__panel.top {\n top: 0;\n }\n .react-flow__panel.bottom {\n bottom: 0;\n }\n .react-flow__panel.left {\n left: 0;\n }\n .react-flow__panel.right {\n right: 0;\n }\n .react-flow__panel.center {\n left: 50%;\n transform: translateX(-50%);\n }\n .react-flow__attribution {\n font-size: 10px;\n background: rgba(255, 255, 255, 0.5);\n padding: 2px 3px;\n margin: 0;\n }\n .react-flow__attribution a {\n text-decoration: none;\n color: #999;\n }\n @-webkit-keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n @keyframes dashdraw {\n from {\n stroke-dashoffset: 10;\n }\n }\n .react-flow__edgelabel-renderer {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .react-flow__edge.updating .react-flow__edge-path {\n stroke: #777;\n }\n .react-flow__edge-text {\n font-size: 10px;\n }\n .react-flow__node.selectable:focus,\n .react-flow__node.selectable:focus-visible {\n outline: none;\n }\n .react-flow__node-default,\n .react-flow__node-input,\n .react-flow__node-output {\n padding: ${theme.space.sm};\n border-radius: ${theme.radii.round};\n width: 150px;\n color: ${theme.colors.secondary};\n text-align: center;\n border: 1px solid ${theme.colors.negative};\n background-color: ${theme.colors.negative_20};\n }\n .react-flow__node-group {\n color: ${theme.colors.secondary};\n text-align: center;\n }\n .react-flow__node-default::before {\n content: \"Unknown node type\";\n display: block;\n }\n .react-flow__node-default.selectable:hover,\n .react-flow__node-input.selectable:hover,\n .react-flow__node-output.selectable:hover,\n .react-flow__node-group.selectable:hover {\n }\n .react-flow__node-default.selectable.selected,\n .react-flow__node-default.selectable:focus,\n .react-flow__node-default.selectable:focus-visible,\n .react-flow__node-input.selectable.selected,\n .react-flow__node-input.selectable:focus,\n .react-flow__node-input.selectable:focus-visible,\n .react-flow__node-output.selectable.selected,\n .react-flow__node-output.selectable:focus,\n .react-flow__node-output.selectable:focus-visible,\n .react-flow__node-group.selectable.selected,\n .react-flow__node-group.selectable:focus,\n .react-flow__node-group.selectable:focus-visible {\n }\n .react-flow__node-group {\n background-color: rgba(240, 240, 240, 0.25);\n }\n .react-flow__nodesselection-rect,\n .react-flow__selection {\n background: rgba(0, 89, 220, 0.08);\n }\n .react-flow__nodesselection-rect:focus,\n .react-flow__nodesselection-rect:focus-visible,\n .react-flow__selection:focus,\n .react-flow__selection:focus-visible {\n outline: none;\n }\n .react-flow__controls {\n box-shadow: ${theme.colors.shadow};\n }\n .react-flow__controls-button {\n border: none;\n background: #fefefe;\n border-bottom: 1px solid #eee;\n box-sizing: content-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 16px;\n height: 16px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n padding: 5px;\n }\n .react-flow__controls-button:hover {\n background: #f4f4f4;\n }\n .react-flow__controls-button svg {\n width: 100%;\n max-width: 12px;\n max-height: 12px;\n }\n .react-flow__controls-button:disabled {\n pointer-events: none;\n }\n .react-flow__controls-button:disabled svg {\n fill-opacity: 0.4;\n }\n .react-flow__minimap {\n background-color: #fff;\n }\n .react-flow__resize-control {\n position: absolute;\n }\n .react-flow__resize-control.left,\n .react-flow__resize-control.right {\n cursor: ew-resize;\n }\n .react-flow__resize-control.top,\n .react-flow__resize-control.bottom {\n cursor: ns-resize;\n }\n .react-flow__resize-control.top.left,\n .react-flow__resize-control.bottom.right {\n cursor: nwse-resize;\n }\n .react-flow__resize-control.bottom.left,\n .react-flow__resize-control.top.right {\n cursor: nesw-resize;\n }\n / handle styles /\n .react-flow__resize-control.handle {\n width: 4px;\n height: 4px;\n border: 1px solid #fff;\n border-radius: 1px;\n background-color: ${theme.colors.primary};\n transform: translate(-50%, -50%);\n }\n .react-flow__resize-control.handle.left {\n left: 0;\n top: 50%;\n }\n .react-flow__resize-control.handle.right {\n left: 100%;\n top: 50%;\n }\n .react-flow__resize-control.handle.top {\n left: 50%;\n top: 0;\n }\n .react-flow__resize-control.handle.bottom {\n left: 50%;\n top: 100%;\n }\n .react-flow__resize-control.handle.top.left {\n left: 0;\n }\n .react-flow__resize-control.handle.bottom.left {\n left: 0;\n }\n .react-flow__resize-control.handle.top.right {\n left: 100%;\n }\n .react-flow__resize-control.handle.bottom.right {\n left: 100%;\n }\n / line styles */\n .react-flow__resize-control.line {\n border-color: ${theme.colors.primary_80};\n border-width: 0;\n border-style: dashed;\n }\n .react-flow__resize-control.line.left,\n .react-flow__resize-control.line.right {\n width: 1px;\n transform: translate(-50%, 0);\n top: 0;\n height: 100%;\n }\n .react-flow__resize-control.line.left {\n left: 0;\n border-left-width: 1px;\n }\n .react-flow__resize-control.line.right {\n left: 100%;\n border-right-width: 1px;\n }\n .react-flow__resize-control.line.top,\n .react-flow__resize-control.line.bottom {\n height: 1px;\n transform: translate(0, -50%);\n left: 0;\n width: 100%;\n }\n .react-flow__resize-control.line.top {\n top: 0;\n border-top-width: 1px;\n }\n .react-flow__resize-control.line.bottom {\n border-bottom-width: 1px;\n top: 100%;\n }\n`;\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cA2CZ,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eA2LrB,MAAM,MAAM,EAAE;AAAA,qBACR,MAAM,MAAM,KAAK;AAAA;AAAA,aAEzB,MAAM,OAAO,SAAS;AAAA;AAAA,wBAEX,MAAM,OAAO,QAAQ;AAAA,wBACrB,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA,aAGnC,MAAM,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAuCjB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA4Db,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAiCxB,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/esm/Flow/hooks/useFlowNode.js CHANGED Viewed

@@ -3,6 +3,14 @@ import { useStore, useNodes, useEdges } from "reactflow";
 import { shallow } from "zustand/shallow";
 import { useFlowInstance } from "./useFlowInstance.js";
 import { useNodeId } from "./useNodeId.js";
+function relativePosition(positionA, positionB) {
+  if (positionA && positionB)
+    return {
+      x: positionB.x - positionA.x,
+      y: positionB.y - positionA.y
+    };
+  return { x: 0, y: 0 };
+}
 function useFlowNode(id) {
   const nodeId = useNodeId(id);
   const nodeSelector = useCallback(
@@ -80,18 +88,45 @@ function useFlowNodeUtils(id) {
     },
     [nodeId, reactFlowInstance]
   );
+  const setNodeParent = useCallback(
+    (node, extent) => {
+      if (!nodeId) return;
+      reactFlowInstance.setNodes((nodes) => {
+        return nodes.map((n) => {
+          if (n.id === nodeId) {
+            return {
+              ...n,
+              parentId: node ? node.id : void 0,
+              extent,
+              position: node ? relativePosition(node.position, n.position) : n.positionAbsolute ?? n.position
+            };
+          }
+          return n;
+        });
+      });
+    },
+    [nodeId, reactFlowInstance]
+  );
   return useMemo(
     () => ({
-      setNodeData
+      setNodeData,
+      setNodeParent
     }),
-    [setNodeData]
+    [setNodeData, setNodeParent]
   );
 }
+function useFlowNodeIntersections(id) {
+  const nodeId = useNodeId(id);
+  const node = useFlowNode(nodeId ?? "");
+  const reactFlowInstance = useFlowInstance();
+  return node ? reactFlowInstance.getIntersectingNodes(node, false) : [];
+}
 export {
   useFlowInputNodes,
   useFlowNode,
   useFlowNodeEdges,
   useFlowNodeInputEdges,
+  useFlowNodeIntersections,
   useFlowNodeOutputEdges,
   useFlowNodeParents,
   useFlowNodeUtils,

package/dist/esm/Flow/hooks/useFlowNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n Edge,\n Node,\n ReactFlowState,\n useEdges,\n useNodes,\n useStore,\n} from \"reactflow\";\nimport { shallow } from \"zustand/shallow\";\n\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport { useNodeId } from \"./useNodeId\";\n\n/** Retrieves the node instance /\nexport function useFlowNode<T extends Node = Node>(id?: string) {\n const nodeId = useNodeId(id);\n\n const nodeSelector = useCallback(\n (state: ReactFlowState) =>\n state.getNodes().find((n: Node): n is T => n.id === nodeId),\n [nodeId],\n );\n return useStore<T \| undefined>(nodeSelector, shallow);\n}\n\n/* Provides the input edges connected to the node /\nexport function useFlowNodeInputEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const inputEdgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.target === nodeId),\n [nodeId],\n );\n return useStore(inputEdgesSelector, shallow);\n}\n\n/* Gives the output edges connected from the node /\nexport function useFlowNodeOutputEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const outputEdgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.source === nodeId),\n [nodeId],\n );\n return useStore(outputEdgesSelector, shallow);\n}\n\n/* Offers both input and output edges of the node /\nexport function useFlowNodeEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const edgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter(\n (e: Edge) => e.source === nodeId \|\| e.target === nodeId,\n ),\n [nodeId],\n );\n return useStore(edgesSelector, shallow);\n}\n\n/* Gets the parent nodes of a specified node (nodes that have an output connected to one of the inputs of the node) /\nexport function useFlowNodeParents(id?: string) {\n const inputEdges = useFlowNodeInputEdges(id);\n const parentNodesSelector = useCallback(\n (state: ReactFlowState) => {\n return inputEdges\n .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n .filter((n): n is Node => n !== null);\n },\n [inputEdges],\n );\n return useStore(parentNodesSelector, shallow);\n}\n\n/* Retrieves the nodes connected to the inputs of the node /\nexport function useFlowInputNodes<T = any>(id?: string) {\n const nodeId = useNodeId(id);\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.target === nodeId)\n .map((e) => nodes.find((n) => n.id === e.source))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, nodeId, nodes]);\n}\n\n/* Retrieves the nodes connected to the outputs of the node /\nexport function useFlowOutputNodes<T = any>(id?: string) {\n const nodeId = useNodeId(id);\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.source === nodeId)\n .map((e) => nodes.find((n) => n.id === e.target))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, nodeId, nodes]);\n}\n\n/* Utilities to manipulate a node in the flow /\nexport function useFlowNodeUtils<NodeData = any>(id?: string) {\n const nodeId = useNodeId(id);\n const reactFlowInstance = useFlowInstance<NodeData>();\n\n /* Mutate the node's `.data` object */\n const setNodeData = useCallback(\n (setNewData: (newData?: NodeData) => NodeData) => {\n if (!nodeId) return;\n\n reactFlowInstance.setNodes((nodes) => {\n return nodes.map((n) => {\n if (n.id === nodeId) {\n return { ...n, data: setNewData(n.data) };\n }\n return n;\n });\n });\n },\n [nodeId, reactFlowInstance],\n );\n\n return useMemo(\n () => ({\n setNodeData,\n }),\n [setNodeData],\n );\n}\n"],"names":[],"mappings":";;;;;~~AAeO~~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~~WAAW~~;AAAA,EAAA;~~AAEhB~~;"}
1	+ {"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n CoordinateExtent,\n Edge,\n Node,\n ReactFlowState,\n useEdges,\n useNodes,\n useStore,\n XYPosition,\n} from \"reactflow\";\nimport { shallow } from \"zustand/shallow\";\n\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport { useNodeId } from \"./useNodeId\";\n\n/** Uses coordinates to create the relative position vector /\nfunction relativePosition(positionA?: XYPosition, positionB?: XYPosition) {\n if (positionA && positionB)\n return {\n x: positionB.x - positionA.x,\n y: positionB.y - positionA.y,\n };\n return { x: 0, y: 0 };\n}\n\n/* Retrieves the node instance /\nexport function useFlowNode<T extends Node = Node>(id?: string) {\n const nodeId = useNodeId(id);\n\n const nodeSelector = useCallback(\n (state: ReactFlowState) =>\n state.getNodes().find((n: Node): n is T => n.id === nodeId),\n [nodeId],\n );\n return useStore<T \| undefined>(nodeSelector, shallow);\n}\n\n/* Provides the input edges connected to the node /\nexport function useFlowNodeInputEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const inputEdgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.target === nodeId),\n [nodeId],\n );\n return useStore(inputEdgesSelector, shallow);\n}\n\n/* Gives the output edges connected from the node /\nexport function useFlowNodeOutputEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const outputEdgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter((e: Edge) => e.source === nodeId),\n [nodeId],\n );\n return useStore(outputEdgesSelector, shallow);\n}\n\n/* Offers both input and output edges of the node /\nexport function useFlowNodeEdges(id?: string) {\n const nodeId = useNodeId(id);\n\n const edgesSelector = useCallback(\n (state: ReactFlowState) =>\n state.edges.filter(\n (e: Edge) => e.source === nodeId \|\| e.target === nodeId,\n ),\n [nodeId],\n );\n return useStore(edgesSelector, shallow);\n}\n\n/* Gets the parent nodes of a specified node (nodes that have an output connected to one of the inputs of the node) /\nexport function useFlowNodeParents(id?: string) {\n const inputEdges = useFlowNodeInputEdges(id);\n const parentNodesSelector = useCallback(\n (state: ReactFlowState) => {\n return inputEdges\n .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n .filter((n): n is Node => n !== null);\n },\n [inputEdges],\n );\n return useStore(parentNodesSelector, shallow);\n}\n\n/* Retrieves the nodes connected to the inputs of the node /\nexport function useFlowInputNodes<T = any>(id?: string) {\n const nodeId = useNodeId(id);\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.target === nodeId)\n .map((e) => nodes.find((n) => n.id === e.source))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, nodeId, nodes]);\n}\n\n/* Retrieves the nodes connected to the outputs of the node /\nexport function useFlowOutputNodes<T = any>(id?: string) {\n const nodeId = useNodeId(id);\n const nodes = useNodes();\n const edges = useEdges();\n\n return useMemo(() => {\n return edges\n .filter((e) => e.source === nodeId)\n .map((e) => nodes.find((n) => n.id === e.target))\n .filter((n): n is Node<T> => n !== null);\n }, [edges, nodeId, nodes]);\n}\n\n/* Utilities to manipulate a node in the flow /\nexport function useFlowNodeUtils<NodeData = any>(id?: string) {\n const nodeId = useNodeId(id);\n const reactFlowInstance = useFlowInstance<NodeData>();\n\n /* Mutate the node's `.data` object */\n const setNodeData = useCallback(\n (setNewData: (newData?: NodeData) => NodeData) => {\n if (!nodeId) return;\n\n reactFlowInstance.setNodes((nodes) => {\n return nodes.map((n) => {\n if (n.id === nodeId) {\n return { ...n, data: setNewData(n.data) };\n }\n return n;\n });\n });\n },\n [nodeId, reactFlowInstance],\n );\n\n const setNodeParent = useCallback(\n (node?: Node<any>, extent?: \"parent\" \| CoordinateExtent) => {\n if (!nodeId) return;\n\n reactFlowInstance.setNodes((nodes) => {\n return nodes.map((n) => {\n if (n.id === nodeId) {\n return {\n ...n,\n parentId: node ? node.id : undefined,\n extent,\n position: node\n ? relativePosition(node.position, n.position)\n : (n.positionAbsolute ?? n.position),\n };\n }\n return n;\n });\n });\n },\n [nodeId, reactFlowInstance],\n );\n\n return useMemo(\n () => ({\n setNodeData,\n setNodeParent,\n }),\n [setNodeData, setNodeParent],\n );\n}\n\nexport function useFlowNodeIntersections<NodeData = any>(id?: string) {\n const nodeId = useNodeId(id);\n const node = useFlowNode(nodeId ?? \"\");\n const reactFlowInstance = useFlowInstance<NodeData>();\n\n return node ? reactFlowInstance.getIntersectingNodes(node, false) : [];\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/Flow/hooks/useNode.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
 import { identifyHandles } from "../Node/utils.js";
 import { useFlowContext } from "./useFlowContext.js";
 import { useFlowInstance } from "./useFlowInstance.js";
-import { useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNode } from "./useFlowNode.js";
+import { useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeIntersections, useFlowNodeUtils, useFlowNode } from "./useFlowNode.js";
 const DEFAULT_LABELS = {
   deleteActionLabel: "Delete",
   duplicateActionLabel: "Duplicate"
@@ -34,6 +34,8 @@ function useHvNode(props) {
   const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);
   const outputEdges = useFlowNodeOutputEdges();
   const { nodeGroups } = useFlowContext();
+  const intersections = useFlowNodeIntersections();
+  const { setNodeParent, setNodeData } = useFlowNodeUtils();
   const node = useFlowNode();
   const reactFlowInstance = useFlowInstance();
   const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
@@ -118,11 +120,14 @@ function useHvNode(props) {
       node,
       nodeActions,
       showActions,
+      intersections,
       // prop getters
       getNodeToolbarProps,
       // actions
       toggleShowActions,
-      handleDefaultAction
+      handleDefaultAction,
+      setNodeData,
+      setNodeParent
     }),
     [
       id,
@@ -138,9 +143,12 @@ function useHvNode(props) {
       node,
       nodeActions,
       showActions,
+      intersections,
       getNodeToolbarProps,
       toggleShowActions,
-      handleDefaultAction
+      handleDefaultAction,
+      setNodeData,
+      setNodeParent
     ]
   );
 }

package/dist/esm/Flow/hooks/useNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useNode.js","sources":["../../../../src/Flow/hooks/useNode.tsx"],"sourcesContent":["import {\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { NodeToolbarProps } from \"reactflow\";\nimport { uid } from \"uid\";\nimport { useLabels } from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { identifyHandles } from \"../Node/utils\";\nimport {\n HvFlowNodeAction,\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { useFlowContext } from \"./useFlowContext\";\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport {\n useFlowNode,\n useFlowNodeInputEdges,\n useFlowNodeOutputEdges,\n} from \"./useFlowNode\";\n\nconst DEFAULT_LABELS = {\n deleteActionLabel: \"Delete\",\n duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvUseNodeParams {\n id: string;\n /** Node group ID /\n groupId?: string;\n\n title?: string;\n\n subtitle?: string;\n\n icon?: React.ReactNode;\n\n color?: HvColorAny;\n /* Node inputs /\n inputs?: (HvFlowNodeInput \| HvFlowNodeInputGroup)[];\n /* Node outputs /\n outputs?: (HvFlowNodeOutput \| HvFlowNodeOutputGroup)[];\n /* Node actions /\n nodeActions?: HvFlowNodeAction[];\n /* Labels used on the default actions. /\n labels?: Partial<typeof DEFAULT_LABELS>;\n /* Props for the NodeToolbar Component */\n nodeToolbarProps?: NodeToolbarProps;\n}\n\nexport function useHvNode(props: HvUseNodeParams) {\n const {\n id,\n title: titleProp,\n icon: iconProp,\n color: colorProp,\n subtitle: subtitleProp,\n nodeActions: nodeActionsProp,\n inputs: inputsProp,\n outputs: outputsProp,\n groupId,\n labels: labelsProps,\n nodeToolbarProps,\n } = props;\n\n const { registerNode, unregisterNode } = useNodeMetaRegistry();\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);\n const inputEdges = useFlowNodeInputEdges();\n const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);\n const outputEdges = useFlowNodeOutputEdges();\n const { nodeGroups } = useFlowContext();\n\n const node = useFlowNode();\n\n const reactFlowInstance = useFlowInstance();\n\n const nodeGroup = (groupId && nodeGroups && nodeGroups[groupId]) \|\| undefined;\n\n const title = titleProp \|\| nodeGroup?.label;\n const icon = iconProp \|\| nodeGroup?.icon;\n const color = getColor(colorProp \|\| nodeGroup?.color);\n const iconColor = isValidElement(icon)\n ? getColor(icon.props.color \|\| \"base_dark\")\n : getColor(\"base_dark\");\n const subtitle = subtitleProp \|\| node?.data.nodeLabel;\n\n const [showActions, setShowActions] = useState(false);\n\n const toggleShowActions = useCallback(() => {\n setShowActions(!showActions);\n }, [showActions]);\n\n const getNodeToolbarProps = useCallback(\n () => ({\n offset: 0,\n isVisible: showActions,\n ...nodeToolbarProps,\n }),\n [nodeToolbarProps, showActions],\n );\n\n const nodeActions = useMemo<HvFlowNodeAction[]>(\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 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 return useMemo(\n () => ({\n // state\n id,\n title,\n icon,\n color,\n iconColor,\n subtitle,\n inputs,\n inputEdges,\n outputs,\n outputEdges,\n node,\n nodeActions,\n showActions,\n // prop getters\n getNodeToolbarProps,\n // actions\n toggleShowActions,\n handleDefaultAction,\n }),\n [\n id,\n title,\n icon,\n color,\n iconColor,\n subtitle,\n inputs,\n inputEdges,\n outputs,\n outputEdges,\n node,\n nodeActions,\n showActions,\n getNodeToolbarProps,\n toggleShowActions,\n handleDefaultAction,\n ],\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;~~AA8BA~~,MAAM,iBAAiB;AAAA,EACrB,mBAAmB;AAAA,EACnB,sBAAsB;AACxB;AA0BO,SAAS,UAAU,OAAwB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACE,IAAA;AAEJ,QAAM,EAAE,cAAc,eAAe,IAAI,oBAAoB;AACvD,QAAA,SAAS,UAAU,gBAAgB,WAAW;AAC9C,QAAA,SAAS,QAAQ,MAAM,gBAAgB,UAAU,GAAG,CAAC,UAAU,CAAC;AACtE,QAAM,aAAa;AACb,QAAA,UAAU,QAAQ,MAAM,gBAAgB,WAAW,GAAG,CAAC,WAAW,CAAC;AACzE,QAAM,cAAc;AACd,QAAA,EAAE,eAAe;~~AAEvB~~,QAAM,OAAO;AAEb,QAAM,oBAAoB;AAE1B,QAAM,YAAa,WAAW,cAAc,WAAW,OAAO,KAAM;AAE9D,QAAA,QAAQ,aAAa,WAAW;AAChC,QAAA,OAAO,YAAY,WAAW;AACpC,QAAM,QAAQ,SAAS,aAAa,WAAW,KAAK;AAC9C,QAAA,YAAY,eAAe,IAAI,IACjC,SAAS,KAAK,MAAM,SAAS,WAAW,IACxC,SAAS,WAAW;AAClB,QAAA,WAAW,gBAAgB,MAAM,KAAK;AAE5C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAE9C,QAAA,oBAAoB,YAAY,MAAM;AAC1C,mBAAe,CAAC,WAAW;AAAA,EAAA,GAC1B,CAAC,WAAW,CAAC;AAEhB,QAAM,sBAAsB;AAAA,IAC1B,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,GAAG;AAAA,IAAA;AAAA,IAEL,CAAC,kBAAkB,WAAW;AAAA,EAAA;AAGhC,QAAM,cAAc;AAAA,IAClB,MACE,mBAAmB;AAAA,MACjB,EAAE,IAAI,UAAU,OAAO,QAAQ,mBAAmB,MAAO,oBAAA,QAAA,CAAA,CAAO,EAAG;AAAA,MACnE;AAAA,QACE,IAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,0BAAO,WAAU,EAAA;AAAA,MACnB;AAAA,IACF;AAAA,IACF,CAAC,QAAQ,mBAAmB,QAAQ,sBAAsB,eAAe;AAAA,EAAA;AAG3E,YAAU,MAAM;AACd,iBAAa,IAAI;AAAA,MACf,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,IAAA,CACD;AACM,WAAA,MAAM,eAAe,EAAE;AAAA,EAAA,GAC7B,CAAC,IAAI,OAAO,QAAQ,SAAS,cAAc,cAAc,CAAC;AAE7D,QAAM,sBAAsB;AAAA,IAC1B,CAAC,WAA6B;AAC5B,UAAI,CAAC,KAAM;AAEX,UAAI,OAAO,UAAU;AACnB,eAAO,SAAS,IAAI;AACpB;AAAA,MACF;AAGA,cAAQ,OAAO,IAAI;AAAA,QACjB,KAAK;AACH,4BAAkB,eAAe,EAAE,OAAO,CAAC,IAAI,EAAG,CAAA;AAClD;AAAA,QACF,KAAK;AACH,4BAAkB,SAAS;AAAA,YACzB;AAAA,cACE,GAAG;AAAA,cACH,IAAI,IAAI;AAAA,cACR,UAAU;AAAA,gBACR,GAAG,KAAK,SAAS;AAAA,gBACjB,GAAG,KAAK,SAAS,KAAK,KAAK,UAAU,KAAK;AAAA,cAC5C;AAAA,cACA,UAAU;AAAA,cACV,QAAQ,OAAO,MAAM,SAAS,OAAO;AAAA,YACvC;AAAA,UAAA,CACD;AACD;AAAA,MAGJ;AAAA,IACF;AAAA,IACA,CAAC,MAAM,iBAAiB;AAAA,EAAA;AAGnB,SAAA;AAAA,IACL,OAAO;AAAA;AAAA,MAEL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAEJ;"}
1	+ {"version":3,"file":"useNode.js","sources":["../../../../src/Flow/hooks/useNode.tsx"],"sourcesContent":["import {\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { NodeToolbarProps } from \"reactflow\";\nimport { uid } from \"uid\";\nimport { useLabels } from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { identifyHandles } from \"../Node/utils\";\nimport {\n HvFlowNodeAction,\n HvFlowNodeInput,\n HvFlowNodeInputGroup,\n HvFlowNodeOutput,\n HvFlowNodeOutputGroup,\n} from \"../types\";\nimport { useFlowContext } from \"./useFlowContext\";\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport {\n useFlowNode,\n useFlowNodeInputEdges,\n useFlowNodeIntersections,\n useFlowNodeOutputEdges,\n useFlowNodeUtils,\n} from \"./useFlowNode\";\n\nconst DEFAULT_LABELS = {\n deleteActionLabel: \"Delete\",\n duplicateActionLabel: \"Duplicate\",\n};\n\nexport interface HvUseNodeParams {\n id: string;\n /** Node group ID /\n groupId?: string;\n\n title?: string;\n\n subtitle?: string;\n\n icon?: React.ReactNode;\n\n color?: HvColorAny;\n /* Node inputs /\n inputs?: (HvFlowNodeInput \| HvFlowNodeInputGroup)[];\n /* Node outputs /\n outputs?: (HvFlowNodeOutput \| HvFlowNodeOutputGroup)[];\n /* Node actions /\n nodeActions?: HvFlowNodeAction[];\n /* Labels used on the default actions. /\n labels?: Partial<typeof DEFAULT_LABELS>;\n /* Props for the NodeToolbar Component */\n nodeToolbarProps?: NodeToolbarProps;\n}\n\nexport function useHvNode(props: HvUseNodeParams) {\n const {\n id,\n title: titleProp,\n icon: iconProp,\n color: colorProp,\n subtitle: subtitleProp,\n nodeActions: nodeActionsProp,\n inputs: inputsProp,\n outputs: outputsProp,\n groupId,\n labels: labelsProps,\n nodeToolbarProps,\n } = props;\n\n const { registerNode, unregisterNode } = useNodeMetaRegistry();\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);\n const inputEdges = useFlowNodeInputEdges();\n const outputs = useMemo(() => identifyHandles(outputsProp), [outputsProp]);\n const outputEdges = useFlowNodeOutputEdges();\n const { nodeGroups } = useFlowContext();\n const intersections = useFlowNodeIntersections();\n const { setNodeParent, setNodeData } = useFlowNodeUtils();\n\n const node = useFlowNode();\n\n const reactFlowInstance = useFlowInstance();\n\n const nodeGroup = (groupId && nodeGroups && nodeGroups[groupId]) \|\| undefined;\n\n const title = titleProp \|\| nodeGroup?.label;\n const icon = iconProp \|\| nodeGroup?.icon;\n const color = getColor(colorProp \|\| nodeGroup?.color);\n const iconColor = isValidElement(icon)\n ? getColor(icon.props.color \|\| \"base_dark\")\n : getColor(\"base_dark\");\n const subtitle = subtitleProp \|\| node?.data.nodeLabel;\n\n const [showActions, setShowActions] = useState(false);\n\n const toggleShowActions = useCallback(() => {\n setShowActions(!showActions);\n }, [showActions]);\n\n const getNodeToolbarProps = useCallback(\n () => ({\n offset: 0,\n isVisible: showActions,\n ...nodeToolbarProps,\n }),\n [nodeToolbarProps, showActions],\n );\n\n const nodeActions = useMemo<HvFlowNodeAction[]>(\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 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 return useMemo(\n () => ({\n // state\n id,\n title,\n icon,\n color,\n iconColor,\n subtitle,\n inputs,\n inputEdges,\n outputs,\n outputEdges,\n node,\n nodeActions,\n showActions,\n intersections,\n // prop getters\n getNodeToolbarProps,\n // actions\n toggleShowActions,\n handleDefaultAction,\n setNodeData,\n setNodeParent,\n }),\n [\n id,\n title,\n icon,\n color,\n iconColor,\n subtitle,\n inputs,\n inputEdges,\n outputs,\n outputEdges,\n node,\n nodeActions,\n showActions,\n intersections,\n getNodeToolbarProps,\n toggleShowActions,\n handleDefaultAction,\n setNodeData,\n setNodeParent,\n ],\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/StepNavigation/StepNavigation.js CHANGED Viewed

@@ -66,13 +66,11 @@ const HvStepNavigation = ({
         const StepContainer = styledLi(containerSize);
         const Step = styledDiv(Math.max(containerSize, 30));
         const stepProps = {
-          ...{
-            size: stepSizeKey,
-            state,
-            title,
-            number: index + 1,
-            ...props
-          }
+          size: stepSizeKey,
+          state,
+          title,
+          number: index + 1,
+          ...props
         };
         const stepElement = /* @__PURE__ */ jsx(StepContainer, { className: classes.li, children: hasTitles ? /* @__PURE__ */ jsx(
           StepComponent,

package/dist/esm/StepNavigation/StepNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepNavigation.js","sources":["../../../src/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvBreakpoints,\n HvTooltip,\n HvTypography,\n useTheme,\n useWidth,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n HvDefaultNavigation,\n HvDefaultNavigationProps,\n HvStepProps,\n} from \"./DefaultNavigation\";\nimport {\n HvSimpleNavigation,\n HvSimpleNavigationProps,\n} from \"./SimpleNavigation\";\nimport { staticClasses, useClasses } from \"./StepNavigation.styles\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\n\nexport { staticClasses as stepNavigationClasses };\n\nexport type HvStepNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n /** Type of step navigation. Values = {\"Simple\", \"Default\"} /\n type?: \"Simple\" \| \"Default\";\n /* Steps to show on the component. /\n steps: Array<\n Pick<\n HvStepProps,\n \"state\" \| \"title\" \| \"onClick\" \| \"className\" \| \"disabled\"\n > & {\n /* Class names to override styles on the separator component after the step. /\n separatorClassName?: string;\n /* Class names to override styles on the title component above the step. /\n titleClassName?: string;\n }\n >;\n /* Sets one of the standard sizes of the steps. /\n stepSize?: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\";\n /* Width of the component element on each breakpoint screen resolution. /\n width?: { [breakpoint in HvBreakpoints]?: number };\n /* Defines either show a title or only a tooltip on each step component. /\n showTitles?: boolean;\n /* A Jss Object used to override or extend the styles applied to the empty state StepNavigation. /\n classes?: HvStepNavigationClasses;\n}\n\n/\n Navigation page with steps.\n \n You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n \n For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n /\nexport const HvStepNavigation = ({\n className,\n classes: classesProp,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n \"aria-label\": ariaLabel,\n ...others\n}: HvStepNavigationProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { activeTheme } = useTheme();\n\n // current breakpoint 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey =\n stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize: any) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize: any) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title: string,\n separatorClassName: string \| undefined,\n separatorHeight: any,\n separatorWidth: any,\n backgroundColor: any,\n ) => {\n const widthValue =\n separatorWidth -\n 2 \n Number(\n (activeTheme?.stepNavigation.separatorMargin \|\| \"0px\").replace(\n \"px\",\n \"\",\n ),\n );\n\n return (\n <li\n aria-hidden\n key={`separator-${title}`}\n className={cx(\n css({\n height: separatorHeight,\n width: widthValue,\n backgroundColor,\n margin: `0 ${theme.stepNavigation.separatorMargin}`,\n }),\n classes.separator,\n )}\n >\n <div className={separatorClassName} />\n </li>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }: any) => {\n const items = steps.reduce<React.ReactNode[]>(\n (acc, { state, title, separatorClassName, ...props }, index): any => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30));\n const stepProps = {\n ...{\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n },\n };\n const stepElement = (\n <StepContainer key={`step-${title}`} className={classes.li}>\n {hasTitles ? (\n <StepComponent\n key={`step-${title}`}\n aria-label={`${title}`}\n {...stepProps}\n />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n >\n <div>\n <Step className={classes.li}>\n <StepComponent aria-label={`${title}`} {...stepProps} />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\")\n ? minWidth\n : maxWidth,\n getColor(\n steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n theme,\n ),\n );\n\n acc.push(stepElement, separatorElement);\n return acc;\n }\n acc.push(stepElement);\n return acc;\n },\n [],\n );\n\n return <ol className={classes.ol}>{items}</ol>;\n };\n\n const getDynamicValues: HvDefaultNavigationProps[\"getDynamicValues\"] = (\n stepsWidth,\n ) => {\n const themeBreakpoints = activeTheme?.breakpoints.values \|\| {};\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth,\n );\n const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false,\n );\n const navWidth = Math.min(\n maxWidth,\n next ? (themeBreakpoints as any)[next] : maxWidth,\n );\n const titleWidth =\n Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) *\n Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const getTitles: HvSimpleNavigationProps[\"getTitles\"] = (\n getTitleProps,\n ): React.ReactNode =>\n hasTitles ? (\n <div className={classes.titles}>\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"label\",\n title = rawTitle,\n titleWidth = 0,\n titleDisabled = false,\n } = getTitleProps?.({\n state,\n rawTitle,\n number: index + 1,\n }) ?? {};\n\n return (\n <HvTypography\n variant={variant}\n className={cx(\n css({\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n }),\n titleClassName,\n )}\n disabled={titleDisabled}\n key={title}\n >\n {title}\n </HvTypography>\n );\n })}\n </div>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <StepNavigation\n numSteps={steps.length}\n stepSize={stepSizeKey}\n getTitles={getTitles}\n getDynamicValues={getDynamicValues}\n className={cx(classes.root, className)}\n {...others}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <nav\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n aria-label={ariaLabel}\n >\n {drawItems(itemsProps)}\n </nav>\n )}\n </StepNavigation>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"StepNavigation.js","sources":["../../../src/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvBreakpoints,\n HvTooltip,\n HvTypography,\n useTheme,\n useWidth,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n HvDefaultNavigation,\n HvDefaultNavigationProps,\n HvStepProps,\n} from \"./DefaultNavigation\";\nimport {\n HvSimpleNavigation,\n HvSimpleNavigationProps,\n} from \"./SimpleNavigation\";\nimport { staticClasses, useClasses } from \"./StepNavigation.styles\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\n\nexport { staticClasses as stepNavigationClasses };\n\nexport type HvStepNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n /** Type of step navigation. Values = {\"Simple\", \"Default\"} /\n type?: \"Simple\" \| \"Default\";\n /* Steps to show on the component. /\n steps: Array<\n Pick<\n HvStepProps,\n \"state\" \| \"title\" \| \"onClick\" \| \"className\" \| \"disabled\"\n > & {\n /* Class names to override styles on the separator component after the step. /\n separatorClassName?: string;\n /* Class names to override styles on the title component above the step. /\n titleClassName?: string;\n }\n >;\n /* Sets one of the standard sizes of the steps. /\n stepSize?: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\";\n /* Width of the component element on each breakpoint screen resolution. /\n width?: { [breakpoint in HvBreakpoints]?: number };\n /* Defines either show a title or only a tooltip on each step component. /\n showTitles?: boolean;\n /* A Jss Object used to override or extend the styles applied to the empty state StepNavigation. /\n classes?: HvStepNavigationClasses;\n}\n\n/\n Navigation page with steps.\n \n You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n \n For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n /\nexport const HvStepNavigation = ({\n className,\n classes: classesProp,\n width,\n steps,\n stepSize,\n showTitles,\n type = \"Default\",\n \"aria-label\": ariaLabel,\n ...others\n}: HvStepNavigationProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { activeTheme } = useTheme();\n\n // current breakpoint 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'\n const breakpoint = useWidth();\n // step configurations\n const stepSizeKey =\n stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n const styledLi = (containerSize: any) =>\n styled(\"li\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledDiv = (containerSize: any) =>\n styled(\"div\")({\n width: containerSize,\n height: containerSize,\n });\n\n const styledSeparatorElement = (\n title: string,\n separatorClassName: string \| undefined,\n separatorHeight: any,\n separatorWidth: any,\n backgroundColor: any,\n ) => {\n const widthValue =\n separatorWidth -\n 2 \n Number(\n (activeTheme?.stepNavigation.separatorMargin \|\| \"0px\").replace(\n \"px\",\n \"\",\n ),\n );\n\n return (\n <li\n aria-hidden\n key={`separator-${title}`}\n className={cx(\n css({\n height: separatorHeight,\n width: widthValue,\n backgroundColor,\n margin: `0 ${theme.stepNavigation.separatorMargin}`,\n }),\n classes.separator,\n )}\n >\n <div className={separatorClassName} />\n </li>\n );\n };\n\n const drawItems = ({\n separatorValues: { minWidth, maxWidth, getColor, height },\n stepValues: { minSize, maxSize, StepComponent },\n }: any) => {\n const items = steps.reduce<React.ReactNode[]>(\n (acc, { state, title, separatorClassName, ...props }, index): any => {\n const containerSize = state === \"Current\" ? maxSize : minSize;\n const StepContainer = styledLi(containerSize);\n const Step = styledDiv(Math.max(containerSize, 30));\n const stepProps = {\n size: stepSizeKey,\n state,\n title,\n number: index + 1,\n ...props,\n };\n const stepElement = (\n <StepContainer key={`step-${title}`} className={classes.li}>\n {hasTitles ? (\n <StepComponent\n key={`step-${title}`}\n aria-label={`${title}`}\n {...stepProps}\n />\n ) : (\n <HvTooltip\n placement=\"bottom\"\n title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n >\n <div>\n <Step className={classes.li}>\n <StepComponent aria-label={`${title}`} {...stepProps} />\n </Step>\n </div>\n </HvTooltip>\n )}\n </StepContainer>\n );\n if (index < steps.length - 1) {\n const separatorElement = styledSeparatorElement(\n title,\n separatorClassName,\n height,\n [steps[index + 1].state, state].includes(\"Current\")\n ? minWidth\n : maxWidth,\n getColor(\n steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n theme,\n ),\n );\n\n acc.push(stepElement, separatorElement);\n return acc;\n }\n acc.push(stepElement);\n return acc;\n },\n [],\n );\n\n return <ol className={classes.ol}>{items}</ol>;\n };\n\n const getDynamicValues: HvDefaultNavigationProps[\"getDynamicValues\"] = (\n stepsWidth,\n ) => {\n const themeBreakpoints = activeTheme?.breakpoints.values \|\| {};\n const maxWidth =\n width?.[breakpoint] ??\n Math.max(\n Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n TITLE_MARGIN,\n SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth,\n );\n const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n index - 1 >= 0 ? self[index - 1] === breakpoint : false,\n );\n const navWidth = Math.min(\n maxWidth,\n next ? (themeBreakpoints as any)[next] : maxWidth,\n );\n const titleWidth =\n Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n const separatorWidth =\n Number(!hasTitles) *\n Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n return { width: navWidth, titleWidth, separatorWidth };\n };\n\n const getTitles: HvSimpleNavigationProps[\"getTitles\"] = (\n getTitleProps,\n ): React.ReactNode =>\n hasTitles ? (\n <div className={classes.titles}>\n {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n const {\n variant = \"label\",\n title = rawTitle,\n titleWidth = 0,\n titleDisabled = false,\n } = getTitleProps?.({\n state,\n rawTitle,\n number: index + 1,\n }) ?? {};\n\n return (\n <HvTypography\n variant={variant}\n className={cx(\n css({\n textAlign: \"center\",\n width: titleWidth - TITLE_MARGIN,\n marginRight: TITLE_MARGIN,\n }),\n titleClassName,\n )}\n disabled={titleDisabled}\n key={title}\n >\n {title}\n </HvTypography>\n );\n })}\n </div>\n ) : null;\n\n const StepNavigation = {\n Default: HvDefaultNavigation,\n Simple: HvSimpleNavigation,\n }[type];\n\n return (\n <StepNavigation\n numSteps={steps.length}\n stepSize={stepSizeKey}\n getTitles={getTitles}\n getDynamicValues={getDynamicValues}\n className={cx(classes.root, className)}\n {...others}\n >\n {({ stepsWidth, navWidth, ...itemsProps }) => (\n <nav\n style={{\n width: `${navWidth}px`,\n margin: 0,\n }}\n aria-label={ariaLabel}\n >\n {drawItems(itemsProps)}\n </nav>\n )}\n </StepNavigation>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/index.js CHANGED Viewed

@@ -20,7 +20,7 @@ import { staticClasses as staticClasses8 } from "./Flow/Node/Node.styles.js";
 import { HvFlowNode } from "./Flow/Node/Node.js";
 import { staticClasses as staticClasses9 } from "./Flow/nodes/DashboardNode.styles.js";
 import { HvDashboardNode } from "./Flow/nodes/DashboardNode.js";
-import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeParents, useFlowNodeUtils, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
+import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeIntersections, useFlowNodeOutputEdges, useFlowNodeParents, useFlowNodeUtils, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
 import { useFlowContext } from "./Flow/hooks/useFlowContext.js";
 import { useFlowNodeMeta } from "./Flow/hooks/useFlowNodeMeta.js";
 import { useFlowInstance } from "./Flow/hooks/useFlowInstance.js";
@@ -75,6 +75,7 @@ export {
   useFlowNode,
   useFlowNodeEdges,
   useFlowNodeInputEdges,
+  useFlowNodeIntersections,
   useFlowNodeMeta,
   useFlowNodeOutputEdges,
   useFlowNodeParents,

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

@@ -6,6 +6,7 @@ import { ClipboardEventHandler } from 'react';
 import { CompositionEventHandler } from 'react';
 import { Context } from 'react';
 import { ControlProps } from 'reactflow';
+import { CoordinateExtent } from 'reactflow';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { Dispatch } from 'react';
@@ -32,6 +33,7 @@ import { HvSize } from '@hitachivantara/uikit-react-core';
 import { HvSliderProps } from '@hitachivantara/uikit-react-core';
 import { HvTypographyVariants } from '@hitachivantara/uikit-react-core';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSXElementConstructor } from 'react';
 import { KeyboardEventHandler } from 'react';
 import { MiniMapProps } from 'reactflow';
 import { MouseEventHandler } from 'react';
@@ -41,6 +43,7 @@ import { NodeToolbarProps } from 'reactflow';
 import { PanelPosition } from 'reactflow';
 import { PointerEventHandler } from 'react';
 import { Position } from 'reactflow';
+import { ReactElement } from 'react';
 import { ReactEventHandler } from 'react';
 import { ReactFlowInstance } from 'reactflow';
 import { ReactFlowProps } from 'reactflow';
@@ -118,8 +121,8 @@ export declare const flowBaseNodeClasses: {
     titleContainer: "HvFlowBaseNode-titleContainer";
     mandatory: "HvFlowBaseNode-mandatory";
     footerContainer: "HvFlowBaseNode-footerContainer";
-    inputContainer: "HvFlowBaseNode-inputContainer";
     handle: "HvFlowBaseNode-handle";
+    inputContainer: "HvFlowBaseNode-inputContainer";
     headerContainer: "HvFlowBaseNode-headerContainer";
     inputsTitleContainer: "HvFlowBaseNode-inputsTitleContainer";
     outputsTitleContainer: "HvFlowBaseNode-outputsTitleContainer";
@@ -145,10 +148,11 @@ export declare const flowNodeClasses: {
     title: "HvFlowNode-title";
     titleContainer: "HvFlowNode-titleContainer";
     mandatory: "HvFlowNode-mandatory";
+    subtitle: "HvFlowNode-subtitle";
     actions: "HvFlowNode-actions";
     footerContainer: "HvFlowNode-footerContainer";
-    inputContainer: "HvFlowNode-inputContainer";
     handle: "HvFlowNode-handle";
+    inputContainer: "HvFlowNode-inputContainer";
     headerContainer: "HvFlowNode-headerContainer";
     inputsTitleContainer: "HvFlowNode-inputsTitleContainer";
     outputsTitleContainer: "HvFlowNode-outputsTitleContainer";
@@ -159,7 +163,6 @@ export declare const flowNodeClasses: {
     outputGroupContainer: "HvFlowNode-outputGroupContainer";
     outputContainer: "HvFlowNode-outputContainer";
     handleConnected: "HvFlowNode-handleConnected";
-    subtitle: "HvFlowNode-subtitle";
     subtitleContainer: "HvFlowNode-subtitleContainer";
     inlineEditRoot: "HvFlowNode-inlineEditRoot";
     inlineEditButton: "HvFlowNode-inlineEditButton";
@@ -335,11 +338,12 @@ export declare const hvDashboardNodeClasses: {
     title: "HvDashboardNode-title";
     titleContainer: "HvDashboardNode-titleContainer";
     mandatory: "HvDashboardNode-mandatory";
-    empty: "HvDashboardNode-empty";
+    subtitle: "HvDashboardNode-subtitle";
     actions: "HvDashboardNode-actions";
+    empty: "HvDashboardNode-empty";
     footerContainer: "HvDashboardNode-footerContainer";
-    inputContainer: "HvDashboardNode-inputContainer";
     handle: "HvDashboardNode-handle";
+    inputContainer: "HvDashboardNode-inputContainer";
     headerContainer: "HvDashboardNode-headerContainer";
     inputsTitleContainer: "HvDashboardNode-inputsTitleContainer";
     outputsTitleContainer: "HvDashboardNode-outputsTitleContainer";
@@ -350,7 +354,6 @@ export declare const hvDashboardNodeClasses: {
     outputGroupContainer: "HvDashboardNode-outputGroupContainer";
     outputContainer: "HvDashboardNode-outputContainer";
     handleConnected: "HvDashboardNode-handleConnected";
-    subtitle: "HvDashboardNode-subtitle";
     subtitleContainer: "HvDashboardNode-subtitleContainer";
     inlineEditRoot: "HvDashboardNode-inlineEditRoot";
     inlineEditButton: "HvDashboardNode-inlineEditButton";
@@ -1049,15 +1052,15 @@ declare const useClasses_6: (classesProp?: Partial<Record<"titleContainer" | "de
     cx: (...args: any) => string;
 };
-declare const useClasses_7: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "footerContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected", string>>, addStatic?: boolean) => {
+declare const useClasses_7: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "footerContainer" | "handle" | "inputContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         title: string;
         titleContainer: string;
         mandatory: string;
         footerContainer: string;
-        inputContainer: string;
         handle: string;
+        inputContainer: string;
         headerContainer: string;
         inputsTitleContainer: string;
         outputsTitleContainer: string;
@@ -1073,16 +1076,17 @@ declare const useClasses_7: (classesProp?: Partial<Record<"root" | "title" | "ti
     cx: (...args: any) => string;
 };
-declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "actions" | "footerContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "subtitle" | "actions" | "footerContainer" | "handle" | "inputContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         title: string;
         titleContainer: string;
         mandatory: string;
+        subtitle: string;
         actions: string;
         footerContainer: string;
-        inputContainer: string;
         handle: string;
+        inputContainer: string;
         headerContainer: string;
         inputsTitleContainer: string;
         outputsTitleContainer: string;
@@ -1093,7 +1097,6 @@ declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "ti
         outputGroupContainer: string;
         outputContainer: string;
         handleConnected: string;
-        subtitle: string;
         subtitleContainer: string;
         inlineEditRoot: string;
         inlineEditButton: string;
@@ -1104,17 +1107,18 @@ declare const useClasses_8: (classesProp?: Partial<Record<"root" | "title" | "ti
     cx: (...args: any) => string;
 };
-declare const useClasses_9: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "empty" | "actions" | "footerContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_9: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "subtitle" | "actions" | "empty" | "footerContainer" | "handle" | "inputContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         title: string;
         titleContainer: string;
         mandatory: string;
-        empty: string;
+        subtitle: string;
         actions: string;
+        empty: string;
         footerContainer: string;
-        inputContainer: string;
         handle: string;
+        inputContainer: string;
         headerContainer: string;
         inputsTitleContainer: string;
         outputsTitleContainer: string;
@@ -1125,7 +1129,6 @@ declare const useClasses_9: (classesProp?: Partial<Record<"root" | "title" | "ti
         outputGroupContainer: string;
         outputContainer: string;
         handleConnected: string;
-        subtitle: string;
         subtitleContainer: string;
         inlineEditRoot: string;
         inlineEditButton: string;
@@ -1153,6 +1156,8 @@ export declare function useFlowNodeEdges(id?: string): Edge[];
 /** Provides the input edges connected to the node */
 export declare function useFlowNodeInputEdges(id?: string): Edge[];
+export declare function useFlowNodeIntersections<NodeData = any>(id?: string): Node_2<NodeData>[];
 export declare function useFlowNodeMeta(id?: string): HvFlowNodeMeta | undefined;
 /** Gives the output edges connected from the node */
@@ -1164,6 +1169,7 @@ export declare function useFlowNodeParents(id?: string): Node_2[];
 /** Utilities to manipulate a node in the flow */
 export declare function useFlowNodeUtils<NodeData = any>(id?: string): {
     setNodeData: (setNewData: (newData?: NodeData) => NodeData) => void;
+    setNodeParent: (node?: Node_2<any>, extent?: "parent" | CoordinateExtent) => void;
 };
 /** Retrieves the nodes connected to the outputs of the node */
@@ -1172,29 +1178,30 @@ export declare function useFlowOutputNodes<T = any>(id?: string): Node_2<T>[];
 export declare function useHvNode(props: HvUseNodeParams): {
     id: string;
     title: string | undefined;
-    icon: ReactNode;
+    icon: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined;
     color: string | undefined;
     iconColor: string | undefined;
     subtitle: any;
     inputs: (HvFlowNodeInput | HvFlowNodeOutput | {
         inputs: HvFlowNodeInput[];
-        label: React.ReactNode;
+        label: ReactNode;
     } | {
         outputs: HvFlowNodeOutput[];
-        label: React.ReactNode;
+        label: ReactNode;
     })[] | undefined;
     inputEdges: Edge[];
     outputs: (HvFlowNodeInput | HvFlowNodeOutput | {
         inputs: HvFlowNodeInput[];
-        label: React.ReactNode;
+        label: ReactNode;
     } | {
         outputs: HvFlowNodeOutput[];
-        label: React.ReactNode;
+        label: ReactNode;
     })[] | undefined;
     outputEdges: Edge[];
     node: Node_2 | undefined;
     nodeActions: HvFlowNodeAction[];
     showActions: boolean;
+    intersections: Node_2<any>[];
     getNodeToolbarProps: () => {
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -1203,7 +1210,7 @@ export declare function useHvNode(props: HvUseNodeParams): {
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
         className?: string | undefined;
-        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
@@ -1216,7 +1223,7 @@ export declare function useHvNode(props: HvUseNodeParams): {
         style?: CSSProperties | undefined;
         tabIndex?: number | undefined;
         title?: string | undefined;
-        translate?: "yes" | "no" | undefined;
+        translate?: "no" | "yes" | undefined;
         radioGroup?: string | undefined;
         role?: AriaRole | undefined;
         about?: string | undefined;
@@ -1242,32 +1249,32 @@ export declare function useHvNode(props: HvUseNodeParams): {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        inputMode?: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         children?: ReactNode;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-autocomplete"?: "none" | "list" | "both" | "inline" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "false" | "true") | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-current"?: boolean | "page" | "step" | "false" | "true" | "time" | "date" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "popup" | "execute" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "false" | "true") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-haspopup"?: boolean | "grid" | "menu" | "listbox" | "false" | "true" | "dialog" | "tree" | undefined;
         "aria-hidden"?: (boolean | "false" | "true") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
@@ -1278,13 +1285,13 @@ export declare function useHvNode(props: HvUseNodeParams): {
         "aria-modal"?: (boolean | "false" | "true") | undefined;
         "aria-multiline"?: (boolean | "false" | "true") | undefined;
         "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-orientation"?: "vertical" | "horizontal" | undefined;
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
         "aria-readonly"?: (boolean | "false" | "true") | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
         "aria-required"?: (boolean | "false" | "true") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
@@ -1461,14 +1468,16 @@ export declare function useHvNode(props: HvUseNodeParams): {
         onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement> | undefined;
-        nodeId?: string | string[];
+        nodeId?: string | string[] | undefined;
         isVisible: boolean;
-        position?: Position;
+        position?: Position | undefined;
         offset: number;
-        align?: Align;
+        align?: Align | undefined;
     };
     toggleShowActions: () => void;
     handleDefaultAction: (action: HvFlowNodeAction) => void;
+    setNodeData: (setNewData: (newData?: any) => any) => void;
+    setNodeParent: (node?: Node_2<any> | undefined, extent?: CoordinateExtent | "parent" | undefined) => void;
 };
 export declare function useNodeMetaRegistry(): {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.38.2",
+  "version": "5.40.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -33,9 +33,10 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.68.1",
-    "@hitachivantara/uikit-react-icons": "^5.10.8",
-    "@hitachivantara/uikit-styles": "^5.32.0",
+    "@hitachivantara/uikit-react-core": "^5.70.0",
+    "@hitachivantara/uikit-react-icons": "^5.10.10",
+    "@hitachivantara/uikit-react-utils": "^0.2.2",
+    "@hitachivantara/uikit-styles": "^5.33.0",
     "@mui/base": "^5.0.0-beta.40",
     "@types/react-grid-layout": "^1.3.5",
     "react-grid-layout": "^1.4.4",
@@ -51,9 +52,10 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "e6a4e1b89e4fec6bcebf1a88fcaab0ba41c0bda7",
+  "gitHead": "43f1456d5a748ec8fc9fe27972459cfa3d0f4416",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "require": "./dist/cjs/index.cjs",
       "import": "./dist/esm/index.js"
     }