@hitachivantara/uikit-react-lab 6.1.9 → 6.1.10

package/dist/Flow/base.js

@@ -1,6 +1,7 @@
-import { css } from "@emotion/react";
 import { theme } from "@hitachivantara/uikit-react-core";
-const flowStyles = css`
+import { css } from "@emotion/react";
+//#region src/Flow/base.ts
+var flowStyles = css`
   /* this gets exported as style.css and can be used for the default theming */
   /* these are the necessary styles for React Flow, they get used by base.css and style.css */
   .react-flow__container {
@@ -406,6 +407,5 @@ const flowStyles = css`
     top: 100%;
   }
 `;
-export {
-  flowStyles
-};
+//#endregion
+export { flowStyles };

package/dist/Flow/hooks/useFlowContext.js

@@ -1,6 +1,6 @@
-import { useContext } from "react";
 import { HvFlowContext } from "../FlowContext/FlowContext.js";
-const useFlowContext = () => useContext(HvFlowContext);
-export {
-  useFlowContext
-};
+import { useContext } from "react";
+//#region src/Flow/hooks/useFlowContext.ts
+var useFlowContext = () => useContext(HvFlowContext);
+//#endregion
+export { useFlowContext };

package/dist/Flow/hooks/useFlowInstance.js

@@ -1,7 +1,8 @@
 import { useReactFlow } from "reactflow";
+//#region src/Flow/hooks/useFlowInstance.ts
+/** Retrieves the React Flow instance */
 function useFlowInstance() {
-  return useReactFlow();
+	return useReactFlow();
 }
-export {
-  useFlowInstance
-};
+//#endregion
+export { useFlowInstance };

package/dist/Flow/hooks/useFlowNode.js

@@ -1,134 +1,113 @@
-import { useMemo, useCallback } from "react";
-import { useNodes, useEdges, useStore } from "reactflow";
-import { shallow } from "zustand/shallow";
 import { useFlowInstance } from "./useFlowInstance.js";
-import { useNodeId } from "./useNodeId.js";
+import { useNodeId as useNodeId$1 } from "./useNodeId.js";
+import { useCallback, useMemo } from "react";
+import { useEdges, useNodes, useStore } from "reactflow";
+import { shallow } from "zustand/shallow";
+//#region src/Flow/hooks/useFlowNode.ts
+/** Uses coordinates to create the relative position vector */
 function relativePosition(positionA, positionB) {
-  if (positionA && positionB)
-    return {
-      x: positionB.x - positionA.x,
-      y: positionB.y - positionA.y
-    };
-  return { x: 0, y: 0 };
+	if (positionA && positionB) return {
+		x: positionB.x - positionA.x,
+		y: positionB.y - positionA.y
+	};
+	return {
+		x: 0,
+		y: 0
+	};
 }
+/** Retrieves the node instance */
 function useFlowNode(id) {
-  const nodeId = useNodeId(id);
-  const nodeSelector = useCallback(
-    (state) => state.getNodes().find((n) => n.id === nodeId),
-    [nodeId]
-  );
-  return useStore(nodeSelector, shallow);
+	const nodeId = useNodeId$1(id);
+	return useStore(useCallback((state) => state.getNodes().find((n) => n.id === nodeId), [nodeId]), shallow);
 }
+/** Provides the input edges connected to the node */
 function useFlowNodeInputEdges(id) {
-  const nodeId = useNodeId(id);
-  const inputEdgesSelector = useCallback(
-    (state) => state.edges.filter((e) => e.target === nodeId),
-    [nodeId]
-  );
-  return useStore(inputEdgesSelector, shallow);
+	const nodeId = useNodeId$1(id);
+	return useStore(useCallback((state) => state.edges.filter((e) => e.target === nodeId), [nodeId]), shallow);
 }
+/** Gives the output edges connected from the node */
 function useFlowNodeOutputEdges(id) {
-  const nodeId = useNodeId(id);
-  const outputEdgesSelector = useCallback(
-    (state) => state.edges.filter((e) => e.source === nodeId),
-    [nodeId]
-  );
-  return useStore(outputEdgesSelector, shallow);
+	const nodeId = useNodeId$1(id);
+	return useStore(useCallback((state) => state.edges.filter((e) => e.source === nodeId), [nodeId]), shallow);
 }
+/** Offers both input and output edges of the node */
 function useFlowNodeEdges(id) {
-  const nodeId = useNodeId(id);
-  const edgesSelector = useCallback(
-    (state) => state.edges.filter(
-      (e) => e.source === nodeId || e.target === nodeId
-    ),
-    [nodeId]
-  );
-  return useStore(edgesSelector, shallow);
+	const nodeId = useNodeId$1(id);
+	return useStore(useCallback((state) => state.edges.filter((e) => e.source === nodeId || e.target === nodeId), [nodeId]), shallow);
 }
+/** Gets the parent nodes of a specified node (nodes that have an output connected to one of the inputs of the node) */
 function useFlowNodeParents(id) {
-  const inputEdges = useFlowNodeInputEdges(id);
-  const parentNodesSelector = useCallback(
-    (state) => {
-      return inputEdges.map((e) => state.getNodes().find((n) => n.id === e.source)).filter((n) => n !== null);
-    },
-    [inputEdges]
-  );
-  return useStore(parentNodesSelector, shallow);
+	const inputEdges = useFlowNodeInputEdges(id);
+	return useStore(useCallback((state) => {
+		return inputEdges.map((e) => state.getNodes().find((n) => n.id === e.source)).filter((n) => n !== null);
+	}, [inputEdges]), shallow);
 }
+/** Retrieves the nodes connected to the inputs of the node */
 function useFlowInputNodes(id) {
-  const nodeId = useNodeId(id);
-  const nodes = useNodes();
-  const edges = useEdges();
-  return useMemo(() => {
-    return edges.filter((e) => e.target === nodeId).map((e) => nodes.find((n) => n.id === e.source)).filter((n) => n !== null);
-  }, [edges, nodeId, nodes]);
+	const nodeId = useNodeId$1(id);
+	const nodes = useNodes();
+	const edges = useEdges();
+	return useMemo(() => {
+		return edges.filter((e) => e.target === nodeId).map((e) => nodes.find((n) => n.id === e.source)).filter((n) => n !== null);
+	}, [
+		edges,
+		nodeId,
+		nodes
+	]);
 }
+/** Retrieves the nodes connected to the outputs of the node */
 function useFlowOutputNodes(id) {
-  const nodeId = useNodeId(id);
-  const nodes = useNodes();
-  const edges = useEdges();
-  return useMemo(() => {
-    return edges.filter((e) => e.source === nodeId).map((e) => nodes.find((n) => n.id === e.target)).filter((n) => n !== null);
-  }, [edges, nodeId, nodes]);
+	const nodeId = useNodeId$1(id);
+	const nodes = useNodes();
+	const edges = useEdges();
+	return useMemo(() => {
+		return edges.filter((e) => e.source === nodeId).map((e) => nodes.find((n) => n.id === e.target)).filter((n) => n !== null);
+	}, [
+		edges,
+		nodeId,
+		nodes
+	]);
 }
+/** Utilities to manipulate a node in the flow */
 function useFlowNodeUtils(id) {
-  const nodeId = useNodeId(id);
-  const reactFlowInstance = useFlowInstance();
-  const setNodeData = useCallback(
-    (setNewData) => {
-      if (!nodeId) return;
-      reactFlowInstance.setNodes((nodes) => {
-        return nodes.map((n) => {
-          if (n.id === nodeId) {
-            return { ...n, data: setNewData(n.data) };
-          }
-          return n;
-        });
-      });
-    },
-    [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,
-      setNodeParent
-    }),
-    [setNodeData, setNodeParent]
-  );
+	const nodeId = useNodeId$1(id);
+	const reactFlowInstance = useFlowInstance();
+	/** Mutate the node's `.data` object */
+	const setNodeData = useCallback((setNewData) => {
+		if (!nodeId) return;
+		reactFlowInstance.setNodes((nodes) => {
+			return nodes.map((n) => {
+				if (n.id === nodeId) return {
+					...n,
+					data: setNewData(n.data)
+				};
+				return n;
+			});
+		});
+	}, [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,
+		setNodeParent
+	}), [setNodeData, setNodeParent]);
 }
 function useFlowNodeIntersections(id) {
-  const nodeId = useNodeId(id);
-  const node = useFlowNode(nodeId ?? "");
-  const reactFlowInstance = useFlowInstance();
-  return node ? reactFlowInstance.getIntersectingNodes(node, false) : [];
+	const node = useFlowNode(useNodeId$1(id) ?? "");
+	const reactFlowInstance = useFlowInstance();
+	return node ? reactFlowInstance.getIntersectingNodes(node, false) : [];
 }
-export {
-  useFlowInputNodes,
-  useFlowNode,
-  useFlowNodeEdges,
-  useFlowNodeInputEdges,
-  useFlowNodeIntersections,
-  useFlowNodeOutputEdges,
-  useFlowNodeParents,
-  useFlowNodeUtils,
-  useFlowOutputNodes
-};
+//#endregion
+export { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeIntersections, useFlowNodeOutputEdges, useFlowNodeParents, useFlowNodeUtils, useFlowOutputNodes };

package/dist/Flow/hooks/useFlowNodeMeta.js

@@ -1,10 +1,10 @@
-import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
 import { useNodeId } from "./useNodeId.js";
+import { useNodeMetaRegistry } from "../FlowContext/NodeMetaContext.js";
+//#region src/Flow/hooks/useFlowNodeMeta.ts
 function useFlowNodeMeta(id) {
-  const nodeId = useNodeId(id);
-  const { registry } = useNodeMetaRegistry();
-  return registry[nodeId];
+	const nodeId = useNodeId(id);
+	const { registry } = useNodeMetaRegistry();
+	return registry[nodeId];
 }
-export {
-  useFlowNodeMeta
-};
+//#endregion
+export { useFlowNodeMeta };

package/dist/Flow/hooks/useNode.js

@@ -1,159 +1,141 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo, isValidElement, useState, useCallback, useEffect } from "react";
-import { uid } from "uid";
-import { useLabels } from "@hitachivantara/uikit-react-core";
-import { Delete, Duplicate } from "@hitachivantara/uikit-react-icons";
-import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { useFlowInstance } from "./useFlowInstance.js";
+import { useFlowNode, useFlowNodeInputEdges, useFlowNodeIntersections, useFlowNodeOutputEdges, useFlowNodeUtils } from "./useFlowNode.js";
 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, useFlowNodeIntersections, useFlowNodeUtils, useFlowNode } from "./useFlowNode.js";
-const DEFAULT_LABELS = {
-  deleteActionLabel: "Delete",
-  duplicateActionLabel: "Duplicate"
+import { identifyHandles } from "../Node/utils.js";
+import { isValidElement, useCallback, useEffect, useMemo, useState } from "react";
+import { useLabels } from "@hitachivantara/uikit-react-core";
+import { getColor, theme as theme$1 } from "@hitachivantara/uikit-styles";
+import { jsx } from "react/jsx-runtime";
+import { Delete, Duplicate } from "@hitachivantara/uikit-react-icons";
+import { uid } from "uid";
+//#region src/Flow/hooks/useNode.tsx
+var DEFAULT_LABELS = {
+	deleteActionLabel: "Delete",
+	duplicateActionLabel: "Duplicate"
 };
 function useHvNode(props) {
-  const {
-    id,
-    title: titleProp,
-    icon: iconProp,
-    color: colorProp,
-    subtitle: subtitleProp,
-    nodeActions: nodeActionsProp,
-    inputs: inputsProp,
-    outputs: outputsProp,
-    groupId,
-    labels: labelsProps,
-    nodeToolbarProps
-  } = props;
-  const { registerNode, unregisterNode } = useNodeMetaRegistry();
-  const labels = useLabels(DEFAULT_LABELS, labelsProps);
-  const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);
-  const inputEdges = useFlowNodeInputEdges();
-  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;
-  const title = titleProp || nodeGroup?.label;
-  const icon = iconProp || nodeGroup?.icon;
-  const color = getColor(colorProp || nodeGroup?.color);
-  const iconColor = getColor(
-    isValidElement(icon) && icon.props.color || "textDark"
-  );
-  const subtitle = subtitleProp || node?.data.nodeLabel;
-  const [showActions, setShowActions] = useState(false);
-  const toggleShowActions = useCallback(() => {
-    setShowActions(!showActions);
-  }, [showActions]);
-  const getNodeToolbarProps = useCallback(
-    () => ({
-      offset: 0,
-      isVisible: showActions,
-      ...nodeToolbarProps
-    }),
-    [nodeToolbarProps, showActions]
-  );
-  const nodeActions = useMemo(
-    () => nodeActionsProp || [
-      { id: "delete", label: labels?.deleteActionLabel, icon: /* @__PURE__ */ jsx(Delete, {}) },
-      {
-        id: "duplicate",
-        label: labels?.duplicateActionLabel,
-        icon: /* @__PURE__ */ jsx(Duplicate, {})
-      }
-    ],
-    [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp]
-  );
-  useEffect(() => {
-    registerNode(id, {
-      label: title || "",
-      inputs,
-      outputs
-    });
-    return () => unregisterNode(id);
-  }, [id, title, inputs, outputs, registerNode, unregisterNode]);
-  const handleDefaultAction = useCallback(
-    (action) => {
-      if (!node) return;
-      if (action.callback) {
-        action.callback(node);
-        return;
-      }
-      switch (action.id) {
-        case "delete":
-          reactFlowInstance.deleteElements({ nodes: [node] });
-          break;
-        case "duplicate":
-          reactFlowInstance.addNodes([
-            {
-              ...node,
-              id: uid(),
-              position: {
-                x: node.position.x,
-                y: node.position.y + (node.height || 0) + 20
-              },
-              selected: false,
-              zIndex: Number(theme.zIndices.overlay)
-            }
-          ]);
-          break;
-      }
-    },
-    [node, reactFlowInstance]
-  );
-  return useMemo(
-    () => ({
-      // state
-      id,
-      title,
-      icon,
-      color,
-      iconColor,
-      subtitle,
-      inputs,
-      inputEdges,
-      outputs,
-      outputEdges,
-      node,
-      nodeActions,
-      showActions,
-      intersections,
-      // prop getters
-      getNodeToolbarProps,
-      // actions
-      toggleShowActions,
-      handleDefaultAction,
-      setNodeData,
-      setNodeParent
-    }),
-    [
-      id,
-      title,
-      icon,
-      color,
-      iconColor,
-      subtitle,
-      inputs,
-      inputEdges,
-      outputs,
-      outputEdges,
-      node,
-      nodeActions,
-      showActions,
-      intersections,
-      getNodeToolbarProps,
-      toggleShowActions,
-      handleDefaultAction,
-      setNodeData,
-      setNodeParent
-    ]
-  );
+	const { id, title: titleProp, icon: iconProp, color: colorProp, subtitle: subtitleProp, nodeActions: nodeActionsProp, inputs: inputsProp, outputs: outputsProp, groupId, labels: labelsProps, nodeToolbarProps } = props;
+	const { registerNode, unregisterNode } = useNodeMetaRegistry();
+	const labels = useLabels(DEFAULT_LABELS, labelsProps);
+	const inputs = useMemo(() => identifyHandles(inputsProp), [inputsProp]);
+	const inputEdges = useFlowNodeInputEdges();
+	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;
+	const title = titleProp || nodeGroup?.label;
+	const icon = iconProp || nodeGroup?.icon;
+	const color = getColor(colorProp || nodeGroup?.color);
+	const iconColor = getColor(isValidElement(icon) && icon.props.color || "textDark");
+	const subtitle = subtitleProp || node?.data.nodeLabel;
+	const [showActions, setShowActions] = useState(false);
+	const toggleShowActions = useCallback(() => {
+		setShowActions(!showActions);
+	}, [showActions]);
+	const getNodeToolbarProps = useCallback(() => ({
+		offset: 0,
+		isVisible: showActions,
+		...nodeToolbarProps
+	}), [nodeToolbarProps, showActions]);
+	const nodeActions = useMemo(() => nodeActionsProp || [{
+		id: "delete",
+		label: labels?.deleteActionLabel,
+		icon: /* @__PURE__ */ jsx(Delete, {})
+	}, {
+		id: "duplicate",
+		label: labels?.duplicateActionLabel,
+		icon: /* @__PURE__ */ jsx(Duplicate, {})
+	}], [
+		labels?.deleteActionLabel,
+		labels?.duplicateActionLabel,
+		nodeActionsProp
+	]);
+	useEffect(() => {
+		registerNode(id, {
+			label: title || "",
+			inputs,
+			outputs
+		});
+		return () => unregisterNode(id);
+	}, [
+		id,
+		title,
+		inputs,
+		outputs,
+		registerNode,
+		unregisterNode
+	]);
+	const handleDefaultAction = useCallback((action) => {
+		if (!node) return;
+		if (action.callback) {
+			action.callback(node);
+			return;
+		}
+		switch (action.id) {
+			case "delete":
+				reactFlowInstance.deleteElements({ nodes: [node] });
+				break;
+			case "duplicate":
+				reactFlowInstance.addNodes([{
+					...node,
+					id: uid(),
+					position: {
+						x: node.position.x,
+						y: node.position.y + (node.height || 0) + 20
+					},
+					selected: false,
+					zIndex: Number(theme$1.zIndices.overlay)
+				}]);
+				break;
+			default: break;
+		}
+	}, [node, reactFlowInstance]);
+	return useMemo(() => ({
+		id,
+		title,
+		icon,
+		color,
+		iconColor,
+		subtitle,
+		inputs,
+		inputEdges,
+		outputs,
+		outputEdges,
+		node,
+		nodeActions,
+		showActions,
+		intersections,
+		getNodeToolbarProps,
+		toggleShowActions,
+		handleDefaultAction,
+		setNodeData,
+		setNodeParent
+	}), [
+		id,
+		title,
+		icon,
+		color,
+		iconColor,
+		subtitle,
+		inputs,
+		inputEdges,
+		outputs,
+		outputEdges,
+		node,
+		nodeActions,
+		showActions,
+		intersections,
+		getNodeToolbarProps,
+		toggleShowActions,
+		handleDefaultAction,
+		setNodeData,
+		setNodeParent
+	]);
 }
-export {
-  useHvNode
-};
+//#endregion
+export { useHvNode };

package/dist/Flow/hooks/useNodeId.js

@@ -1,8 +1,9 @@
-import { useNodeId as useNodeId$1 } from "reactflow";
-function useNodeId(id) {
-  const currentNodeId = useNodeId$1();
-  return id ?? currentNodeId;
+import { useNodeId } from "reactflow";
+//#region src/Flow/hooks/useNodeId.ts
+/** Retrieves the node id. INTERNAL USE ONLY */
+function useNodeId$1(id) {
+	const currentNodeId = useNodeId();
+	return id ?? currentNodeId;
 }
-export {
-  useNodeId
-};
+//#endregion
+export { useNodeId$1 as useNodeId };