npm - @hitachivantara/uikit-react-lab - Versions diffs - 5.41.13 → 5.41.15 - Mend

@hitachivantara/uikit-react-lab 5.41.13 → 5.41.15

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 (16) hide show

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

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const ReactFlow = require("reactflow");
+const reactflow = require("reactflow");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const HvFlowBackground = ({
   color = "secondary",
   ...others
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ReactFlow.Background,
+    reactflow.Background,
     {
       color: uikitStyles.getColor(color, uikitStyles.theme.colors.secondary_80),
       gap: 16,

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const ReactFlow = require("reactflow");
+const reactflow = require("reactflow");
 const shallow = require("zustand/shallow");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -32,11 +32,11 @@ const HvFlowControls = ({
   children,
   ...others
 }) => {
-  const { isInteractive, minZoomReached, maxZoomReached } = ReactFlow.useStore(
+  const { isInteractive, minZoomReached, maxZoomReached } = reactflow.useStore(
     selector,
     shallow.shallow
   );
-  const store = ReactFlow.useStoreApi();
+  const store = reactflow.useStoreApi();
   const { zoomIn, zoomOut, fitView } = useFlowInstance.useFlowInstance();
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const handleZoomIn = () => {
@@ -59,7 +59,7 @@ const HvFlowControls = ({
     });
     onInteractiveChange?.(!isInteractive);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Panel, { position, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, { vertical: orientation === "vertical", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(reactflow.Panel, { position, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, { vertical: orientation === "vertical", children: [
     !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(
       uikitReactCore.HvButton,
       {

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

@@ -4,15 +4,13 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const core = require("@dnd-kit/core");
 const react$1 = require("@emotion/react");
-const ReactFlow = require("reactflow");
+const reactflow = require("reactflow");
 const uid = require("uid");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const base = require("./base.cjs");
 const Flow_styles = require("./Flow.styles.cjs");
 const NodeMetaContext = require("./FlowContext/NodeMetaContext.cjs");
 const useFlowInstance = require("./hooks/useFlowInstance.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const ReactFlow__default = /* @__PURE__ */ _interopDefault(ReactFlow);
 const getNode = (nodes, nodeId) => {
   return nodes.find((n) => n.id === nodeId);
 };
@@ -131,7 +129,7 @@ const HvDroppableFlow = ({
   );
   const handleConnect = react.useCallback(
     (connection) => {
-      const eds = ReactFlow.addEdge(connection, edgesRef.current);
+      const eds = reactflow.addEdge(connection, edgesRef.current);
       updateEdges(eds);
       handleFlowChange(nodesRef.current, eds);
       onConnectProp?.(connection);
@@ -140,7 +138,7 @@ const HvDroppableFlow = ({
   );
   const handleNodesChange = react.useCallback(
     (changes) => {
-      const nds = ReactFlow.applyNodeChanges(changes, nodesRef.current);
+      const nds = reactflow.applyNodeChanges(changes, nodesRef.current);
       updateNodes(nds);
       handleFlowChange(nds, edgesRef.current);
       onNodesChangeProp?.(changes);
@@ -149,7 +147,7 @@ const HvDroppableFlow = ({
   );
   const handleEdgesChange = react.useCallback(
     (changes) => {
-      const eds = ReactFlow.applyEdgeChanges(changes, edgesRef.current);
+      const eds = reactflow.applyEdgeChanges(changes, edgesRef.current);
       updateEdges(eds);
       handleFlowChange(nodesRef.current, eds);
       onEdgesChangeProp?.(changes);
@@ -160,7 +158,7 @@ const HvDroppableFlow = ({
   const isValidConnection = (connection) => validateEdge(nodes, edges, connection, registry);
   const defaultEdgeOptions = {
     markerEnd: {
-      type: ReactFlow.MarkerType.ArrowClosed,
+      type: reactflow.MarkerType.ArrowClosed,
       height: 20,
       width: 20
     },
@@ -179,7 +177,7 @@ const HvDroppableFlow = ({
         ref: setNodeRef,
         className: cx(classes.root, className),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          ReactFlow__default.default,
+          reactflow.ReactFlow,
           {
             nodes,
             edges,

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

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const ReactFlow = require("reactflow");
+const reactflow = require("reactflow");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const Empty_styles = require("./Empty.styles.cjs");
 const HvFlowEmpty = ({ className, ...others }) => {
   const { classes, cx } = Empty_styles.useClasses();
-  const nodes = ReactFlow.useNodes();
+  const nodes = reactflow.useNodes();
   return !nodes || (nodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvEmptyState, { className: cx(classes.root, className), ...others }) : null);
 };
 exports.HvFlowEmpty = HvFlowEmpty;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const core = require("@dnd-kit/core");
 const modifiers = require("@dnd-kit/modifiers");
-const ReactFlow = require("reactflow");
+const reactflow = require("reactflow");
 const DroppableFlow = require("./DroppableFlow.cjs");
 const FlowContext = require("./FlowContext/FlowContext.cjs");
 const HvFlow = ({
@@ -17,7 +17,7 @@ const HvFlow = ({
     core.useSensor(core.PointerSensor),
     core.useSensor(core.KeyboardSensor)
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, { nodeGroups, defaultActions, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactflow.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, { nodeGroups, defaultActions, children: /* @__PURE__ */ jsxRuntime.jsxs(
     core.DndContext,
     {
       sensors,

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const ReactFlow = require("reactflow");
+const reactflow = require("reactflow");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Minimap_styles = require("./Minimap.styles.cjs");
 const HvFlowMinimap = ({
@@ -15,7 +15,7 @@ const HvFlowMinimap = ({
 }) => {
   const { classes, cx } = Minimap_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ReactFlow.MiniMap,
+    reactflow.MiniMap,
     {
       className: cx(classes.root, className),
       nodeColor: typeof nodeColor === "string" ? uikitStyles.getColor(nodeColor, "atmo4") : nodeColor,

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const ReactFlow = require("reactflow");
+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");
@@ -58,12 +58,12 @@ const HvFlowBaseNode = ({
     const edgeConnected = utils.isConnected(id, "source", output.id, outputEdges);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        ReactFlow.Handle,
+        reactflow.Handle,
         {
           type: "source",
           isConnectableEnd: false,
           id: output.id,
-          position: ReactFlow.Position.Right,
+          position: reactflow.Position.Right,
           className: cx(classes.handle, {
             [classes.handleConnected]: edgeConnected
           })
@@ -77,12 +77,12 @@ const HvFlowBaseNode = ({
     const edgeConnected = utils.isConnected(id, "target", input.id, inputEdges);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        ReactFlow.Handle,
+        reactflow.Handle,
         {
           type: "target",
           isConnectableStart: false,
           id: input.id,
-          position: ReactFlow.Position.Left,
+          position: reactflow.Position.Left,
           className: cx(classes.handle, {
             [classes.handleConnected]: edgeConnected
           })
@@ -111,7 +111,7 @@ const HvFlowBaseNode = ({
       onMouseEnter: toggleShowActions,
       onMouseLeave: toggleShowActions,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.NodeToolbar, { ...getNodeToolbarProps(), children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(reactflow.NodeToolbar, { ...getNodeToolbarProps(), children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
           uikitReactCore.HvIconButton,
           {
             title: action.label,

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs CHANGED Viewed

@@ -5,7 +5,7 @@ const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const SidebarGroupItem_styles = require("./SidebarGroupItem.styles.cjs");
-const HvFlowSidebarGroupItem = react.forwardRef((props, ref) => {
+const HvFlowSidebarGroupItem = react.forwardRef(function HvFlowSidebarGroupItem2(props, ref) {
   const {
     label,
     isDragging,

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const ReactFlow = require("reactflow");
+const reactflow = require("reactflow");
 function useFlowInstance() {
-  return ReactFlow.useReactFlow();
+  return reactflow.useReactFlow();
 }
 exports.useFlowInstance = useFlowInstance;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
-const ReactFlow = require("reactflow");
+const reactflow = require("reactflow");
 const shallow = require("zustand/shallow");
 const useFlowInstance = require("./useFlowInstance.cjs");
 const useNodeId = require("./useNodeId.cjs");
@@ -19,7 +19,7 @@ function useFlowNode(id) {
     (state) => state.getNodes().find((n) => n.id === nodeId),
     [nodeId]
   );
-  return ReactFlow.useStore(nodeSelector, shallow.shallow);
+  return reactflow.useStore(nodeSelector, shallow.shallow);
 }
 function useFlowNodeInputEdges(id) {
   const nodeId = useNodeId.useNodeId(id);
@@ -27,7 +27,7 @@ function useFlowNodeInputEdges(id) {
     (state) => state.edges.filter((e) => e.target === nodeId),
     [nodeId]
   );
-  return ReactFlow.useStore(inputEdgesSelector, shallow.shallow);
+  return reactflow.useStore(inputEdgesSelector, shallow.shallow);
 }
 function useFlowNodeOutputEdges(id) {
   const nodeId = useNodeId.useNodeId(id);
@@ -35,7 +35,7 @@ function useFlowNodeOutputEdges(id) {
     (state) => state.edges.filter((e) => e.source === nodeId),
     [nodeId]
   );
-  return ReactFlow.useStore(outputEdgesSelector, shallow.shallow);
+  return reactflow.useStore(outputEdgesSelector, shallow.shallow);
 }
 function useFlowNodeEdges(id) {
   const nodeId = useNodeId.useNodeId(id);
@@ -45,7 +45,7 @@ function useFlowNodeEdges(id) {
     ),
     [nodeId]
   );
-  return ReactFlow.useStore(edgesSelector, shallow.shallow);
+  return reactflow.useStore(edgesSelector, shallow.shallow);
 }
 function useFlowNodeParents(id) {
   const inputEdges = useFlowNodeInputEdges(id);
@@ -55,20 +55,20 @@ function useFlowNodeParents(id) {
     },
     [inputEdges]
   );
-  return ReactFlow.useStore(parentNodesSelector, shallow.shallow);
+  return reactflow.useStore(parentNodesSelector, shallow.shallow);
 }
 function useFlowInputNodes(id) {
   const nodeId = useNodeId.useNodeId(id);
-  const nodes = ReactFlow.useNodes();
-  const edges = ReactFlow.useEdges();
+  const nodes = reactflow.useNodes();
+  const edges = reactflow.useEdges();
   return react.useMemo(() => {
     return edges.filter((e) => e.target === nodeId).map((e) => nodes.find((n) => n.id === e.source)).filter((n) => n !== null);
   }, [edges, nodeId, nodes]);
 }
 function useFlowOutputNodes(id) {
   const nodeId = useNodeId.useNodeId(id);
-  const nodes = ReactFlow.useNodes();
-  const edges = ReactFlow.useEdges();
+  const nodes = reactflow.useNodes();
+  const edges = reactflow.useEdges();
   return react.useMemo(() => {
     return edges.filter((e) => e.source === nodeId).map((e) => nodes.find((n) => n.id === e.target)).filter((n) => n !== null);
   }, [edges, nodeId, nodes]);

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const ReactFlow = require("reactflow");
+const reactflow = require("reactflow");
 function useNodeId(id) {
-  const currentNodeId = ReactFlow.useNodeId();
+  const currentNodeId = reactflow.useNodeId();
   return id ?? currentNodeId;
 }
 exports.useNodeId = useNodeId;

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

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback } from "react";
 import { useDroppable, useDndMonitor } from "@dnd-kit/core";
 import { Global } from "@emotion/react";
-import ReactFlow, { addEdge, applyNodeChanges, applyEdgeChanges, MarkerType } from "reactflow";
+import { addEdge, applyNodeChanges, applyEdgeChanges, MarkerType, ReactFlow } from "reactflow";
 import { uid } from "uid";
 import { useUniqueId } from "@hitachivantara/uikit-react-core";
 import { flowStyles } from "./base.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { Global } from \"@emotion/react\";\nimport ReactFlow, {\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n Connection,\n Edge,\n EdgeChange,\n MarkerType,\n Node,\n NodeChange,\n ReactFlowProps,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowStyles } from \"./base\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\nimport { useFlowInstance } from \"./hooks\";\nimport {\n HvFlowNodeInputGroup,\n HvFlowNodeMetaRegistry,\n HvFlowNodeOutputGroup,\n HvFlowNodeTypes,\n} from \"./types\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeType extends string \| undefined = string \| undefined,\n NodeData = any,\n> extends Omit<ReactFlowProps, \"nodes\" \| \"edges\" \| \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. /\n children?: React.ReactNode;\n /* Flow nodes types. /\n nodeTypes?: HvFlowNodeTypes<NodeData>;\n /* Flow nodes. /\n nodes?: Node<NodeData, NodeType>[];\n /* Flow edges. /\n edges?: Edge[];\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvFlowClasses;\n /* Callback called when the flow changes. Returns the updated nodes and edges. /\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n /\n Callback called when a node is dropped in the flow.\n \n This callback should be used to override the custom UI Kit drop event.\n * Thus, when defined, the user is responsible for adding nodes to the flow.\n \n This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n \n Returns the event and the node to be added to the flow.\n */\n onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n nodes: Node[],\n edges: Edge[],\n connection: Connection,\n nodeMetaRegistry: HvFlowNodeMetaRegistry,\n) => {\n const {\n source: sourceId,\n sourceHandle,\n target: targetId,\n targetHandle,\n } = connection;\n\n if (!sourceHandle \|\| !targetHandle \|\| !sourceId \|\| !targetId) return false;\n\n const sourceNode = getNode(nodes, sourceId);\n const targetNode = getNode(nodes, targetId);\n\n if (!sourceNode \|\| !targetNode) return false;\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType \|\| !targetType) return false;\n\n const inputs = nodeMetaRegistry[targetId]?.inputs \|\| [];\n const outputs = nodeMetaRegistry[sourceId]?.outputs \|\| [];\n\n const source = outputs\n .flatMap((out) => (out as HvFlowNodeOutputGroup).outputs \|\| out)\n .find((out) => out.id === sourceHandle);\n const target = inputs\n .flatMap((inp) => (inp as HvFlowNodeInputGroup).inputs \|\| inp)\n .find((inp) => inp.id === targetHandle);\n\n const sourceProvides = source?.provides \|\| \"\";\n const targetAccepts = target?.accepts \|\| [];\n const sourceMaxConnections = source?.maxConnections;\n const targetMaxConnections = target?.maxConnections;\n\n let isValid =\n targetAccepts.length === 0 \|\| targetAccepts.includes(sourceProvides);\n\n if (isValid && targetMaxConnections != null) {\n const targetConnections = edges.filter(\n (edg) => edg.target === targetId && edg.targetHandle === targetHandle,\n ).length;\n\n isValid = targetConnections < targetMaxConnections;\n }\n\n if (isValid && sourceMaxConnections != null) {\n const sourceConnections = edges.filter(\n (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle,\n ).length;\n\n isValid = sourceConnections < sourceMaxConnections;\n }\n\n return isValid;\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n onDndDrop,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n defaultEdgeOptions: defaultEdgeOptionsProp,\n nodeTypes,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const reactFlowInstance = useFlowInstance();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n // Keeping track of nodes and edges for onFlowChange since useState is async\n const nodesRef = useRef(initialNodes);\n const edgesRef = useRef(initialEdges);\n\n const updateNodes = (nds: Node[]) => {\n setNodes(nds);\n nodesRef.current = nds;\n };\n\n const updateEdges = (eds: Edge[]) => {\n setEdges(eds);\n edgesRef.current = eds;\n };\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over?.id !== elementId) return;\n\n const hvFlow = event.active.data.current?.hvFlow;\n const type = hvFlow?.type;\n\n // Only known node types can be dropped in the canvas\n if (!type \|\| !nodeTypes?.[type]) {\n if (import.meta.env.DEV) {\n // eslint-disable-next-line no-console\n console.error(\n `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`,\n );\n }\n return;\n }\n\n // Position node in the flow\n const position = reactFlowInstance.screenToFlowPosition({\n x: hvFlow?.x \|\| 0,\n y: hvFlow?.y \|\| 0,\n });\n\n // Node data\n const data = {\n nodeLabel: hvFlow?.label,\n ...hvFlow?.data,\n };\n\n // Node to add\n const newNode: Node = {\n id: uid(),\n position,\n data,\n type,\n };\n\n // Drop override\n if (onDndDrop) {\n onDndDrop(event, newNode);\n return;\n }\n\n updateNodes(nodes.concat(newNode));\n },\n [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance],\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (nds: Node[], eds: Edge[]) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange],\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edgesRef.current);\n updateEdges(eds);\n\n handleFlowChange(nodesRef.current, eds);\n onConnectProp?.(connection);\n },\n [handleFlowChange, onConnectProp],\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodesRef.current);\n updateNodes(nds);\n\n handleFlowChange(nds, edgesRef.current);\n onNodesChangeProp?.(changes);\n },\n [handleFlowChange, onNodesChangeProp],\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edgesRef.current);\n updateEdges(eds);\n\n handleFlowChange(nodesRef.current, eds);\n onEdgesChangeProp?.(changes);\n },\n [handleFlowChange, onEdgesChangeProp],\n );\n\n const { registry } = useNodeMetaRegistry();\n\n const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n validateEdge(nodes, edges, connection, registry);\n\n const defaultEdgeOptions = {\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n type: \"smoothstep\",\n pathOptions: {\n borderRadius: 40,\n },\n ...defaultEdgeOptionsProp,\n };\n\n return (\n <>\n <Global styles={flowStyles} />\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={edges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={defaultEdgeOptions}\n snapGrid={[1, 1]}\n snapToGrid\n onError={(code, message) => {\n if (import.meta.env.DEV) {\n // eslint-disable-next-line no-console\n console.error(message);\n }\n }}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n </>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { Global } from \"@emotion/react\";\nimport {\n addEdge,\n applyEdgeChanges,\n applyNodeChanges,\n Connection,\n Edge,\n EdgeChange,\n MarkerType,\n Node,\n NodeChange,\n ReactFlow,\n ReactFlowProps,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowStyles } from \"./base\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\nimport { useFlowInstance } from \"./hooks\";\nimport {\n HvFlowNodeInputGroup,\n HvFlowNodeMetaRegistry,\n HvFlowNodeOutputGroup,\n HvFlowNodeTypes,\n} from \"./types\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n NodeType extends string \| undefined = string \| undefined,\n NodeData = any,\n> extends Omit<ReactFlowProps, \"nodes\" \| \"edges\" \| \"nodeTypes\"> {\n /** Flow content: background, controls, and minimap. /\n children?: React.ReactNode;\n /* Flow nodes types. /\n nodeTypes?: HvFlowNodeTypes<NodeData>;\n /* Flow nodes. /\n nodes?: Node<NodeData, NodeType>[];\n /* Flow edges. /\n edges?: Edge[];\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvFlowClasses;\n /* Callback called when the flow changes. Returns the updated nodes and edges. /\n onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n /\n Callback called when a node is dropped in the flow.\n \n This callback should be used to override the custom UI Kit drop event.\n * Thus, when defined, the user is responsible for adding nodes to the flow.\n \n This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n \n Returns the event and the node to be added to the flow.\n */\n onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n nodes: Node[],\n edges: Edge[],\n connection: Connection,\n nodeMetaRegistry: HvFlowNodeMetaRegistry,\n) => {\n const {\n source: sourceId,\n sourceHandle,\n target: targetId,\n targetHandle,\n } = connection;\n\n if (!sourceHandle \|\| !targetHandle \|\| !sourceId \|\| !targetId) return false;\n\n const sourceNode = getNode(nodes, sourceId);\n const targetNode = getNode(nodes, targetId);\n\n if (!sourceNode \|\| !targetNode) return false;\n\n const sourceType = sourceNode.type;\n const targetType = targetNode.type;\n\n if (!sourceType \|\| !targetType) return false;\n\n const inputs = nodeMetaRegistry[targetId]?.inputs \|\| [];\n const outputs = nodeMetaRegistry[sourceId]?.outputs \|\| [];\n\n const source = outputs\n .flatMap((out) => (out as HvFlowNodeOutputGroup).outputs \|\| out)\n .find((out) => out.id === sourceHandle);\n const target = inputs\n .flatMap((inp) => (inp as HvFlowNodeInputGroup).inputs \|\| inp)\n .find((inp) => inp.id === targetHandle);\n\n const sourceProvides = source?.provides \|\| \"\";\n const targetAccepts = target?.accepts \|\| [];\n const sourceMaxConnections = source?.maxConnections;\n const targetMaxConnections = target?.maxConnections;\n\n let isValid =\n targetAccepts.length === 0 \|\| targetAccepts.includes(sourceProvides);\n\n if (isValid && targetMaxConnections != null) {\n const targetConnections = edges.filter(\n (edg) => edg.target === targetId && edg.targetHandle === targetHandle,\n ).length;\n\n isValid = targetConnections < targetMaxConnections;\n }\n\n if (isValid && sourceMaxConnections != null) {\n const sourceConnections = edges.filter(\n (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle,\n ).length;\n\n isValid = sourceConnections < sourceMaxConnections;\n }\n\n return isValid;\n};\n\nexport const HvDroppableFlow = ({\n id,\n className,\n children,\n onFlowChange,\n onDndDrop,\n classes: classesProp,\n nodes: initialNodes = [],\n edges: initialEdges = [],\n onConnect: onConnectProp,\n onNodesChange: onNodesChangeProp,\n onEdgesChange: onEdgesChangeProp,\n defaultEdgeOptions: defaultEdgeOptionsProp,\n nodeTypes,\n ...others\n}: HvDroppableFlowProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const reactFlowInstance = useFlowInstance();\n\n const [nodes, setNodes] = useState(initialNodes);\n const [edges, setEdges] = useState(initialEdges);\n // Keeping track of nodes and edges for onFlowChange since useState is async\n const nodesRef = useRef(initialNodes);\n const edgesRef = useRef(initialEdges);\n\n const updateNodes = (nds: Node[]) => {\n setNodes(nds);\n nodesRef.current = nds;\n };\n\n const updateEdges = (eds: Edge[]) => {\n setEdges(eds);\n edgesRef.current = eds;\n };\n\n const { setNodeRef } = useDroppable({\n id: elementId,\n });\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n if (event.over?.id !== elementId) return;\n\n const hvFlow = event.active.data.current?.hvFlow;\n const type = hvFlow?.type;\n\n // Only known node types can be dropped in the canvas\n if (!type \|\| !nodeTypes?.[type]) {\n if (import.meta.env.DEV) {\n // eslint-disable-next-line no-console\n console.error(\n `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`,\n );\n }\n return;\n }\n\n // Position node in the flow\n const position = reactFlowInstance.screenToFlowPosition({\n x: hvFlow?.x \|\| 0,\n y: hvFlow?.y \|\| 0,\n });\n\n // Node data\n const data = {\n nodeLabel: hvFlow?.label,\n ...hvFlow?.data,\n };\n\n // Node to add\n const newNode: Node = {\n id: uid(),\n position,\n data,\n type,\n };\n\n // Drop override\n if (onDndDrop) {\n onDndDrop(event, newNode);\n return;\n }\n\n updateNodes(nodes.concat(newNode));\n },\n [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance],\n );\n\n useDndMonitor({\n onDragEnd: handleDragEnd,\n });\n\n const handleFlowChange = useCallback(\n (nds: Node[], eds: Edge[]) => {\n // The new flow is returned if the user is not dragging nodes\n // This avoids triggering this handler too many times\n const isDragging = nds.find((node) => node.dragging);\n if (!isDragging) {\n onFlowChange?.(nds, eds);\n }\n },\n [onFlowChange],\n );\n\n const handleConnect = useCallback(\n (connection: Connection) => {\n const eds = addEdge(connection, edgesRef.current);\n updateEdges(eds);\n\n handleFlowChange(nodesRef.current, eds);\n onConnectProp?.(connection);\n },\n [handleFlowChange, onConnectProp],\n );\n\n const handleNodesChange = useCallback(\n (changes: NodeChange[]) => {\n const nds = applyNodeChanges(changes, nodesRef.current);\n updateNodes(nds);\n\n handleFlowChange(nds, edgesRef.current);\n onNodesChangeProp?.(changes);\n },\n [handleFlowChange, onNodesChangeProp],\n );\n\n const handleEdgesChange = useCallback(\n (changes: EdgeChange[]) => {\n const eds = applyEdgeChanges(changes, edgesRef.current);\n updateEdges(eds);\n\n handleFlowChange(nodesRef.current, eds);\n onEdgesChangeProp?.(changes);\n },\n [handleFlowChange, onEdgesChangeProp],\n );\n\n const { registry } = useNodeMetaRegistry();\n\n const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n validateEdge(nodes, edges, connection, registry);\n\n const defaultEdgeOptions = {\n markerEnd: {\n type: MarkerType.ArrowClosed,\n height: 20,\n width: 20,\n },\n type: \"smoothstep\",\n pathOptions: {\n borderRadius: 40,\n },\n ...defaultEdgeOptionsProp,\n };\n\n return (\n <>\n <Global styles={flowStyles} />\n <div\n id={elementId}\n ref={setNodeRef}\n className={cx(classes.root, className)}\n >\n <ReactFlow\n nodes={nodes}\n edges={edges}\n nodeTypes={nodeTypes}\n onNodesChange={handleNodesChange}\n onEdgesChange={handleEdgesChange}\n onConnect={handleConnect}\n isValidConnection={isValidConnection}\n defaultEdgeOptions={defaultEdgeOptions}\n snapGrid={[1, 1]}\n snapToGrid\n onError={(code, message) => {\n if (import.meta.env.DEV) {\n // eslint-disable-next-line no-console\n console.error(message);\n }\n }}\n {...others}\n >\n {children}\n </ReactFlow>\n </div>\n </>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { HvTypography } from "@hitachivantara/uikit-react-core";
 import { Drag } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./SidebarGroupItem.styles.js";
 import { staticClasses } from "./SidebarGroupItem.styles.js";
-const HvFlowSidebarGroupItem = forwardRef((props, ref) => {
+const HvFlowSidebarGroupItem = forwardRef(function HvFlowSidebarGroupItem2(props, ref) {
   const {
     label,
     isDragging,

package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Drag } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./SidebarGroupItem.styles\";\n\nexport { staticClasses as flowSidebarGroupItemClasses };\n\nexport type HvFlowSidebarGroupItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupItemProps extends HvBaseProps {\n /** Item label. /\n label: string;\n /* Whether the item is being dragged. /\n isDragging?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowSidebarGroupItemClasses;\n}\n\nexport const HvFlowSidebarGroupItem = forwardRef<\n HTMLDivElement,\n HvFlowSidebarGroupItemProps\n>((props, ref) => {\n const {\n label,\n isDragging,\n classes: classesProp,\n className,\n ...others\n } = props;\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div\n ref={ref}\n className={cx(\n classes.root,\n { [classes.dragging]: isDragging },\n className,\n )}\n {...others}\n >\n <HvTypography>{label}</HvTypography>\n <Drag />\n </div>\n );\n});\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,yBAAyB,WAGpC,~~CAAC~~,OAAO,~~QAAQ~~;~~AACV~~,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,gBAAc,UAAM,MAAA,CAAA;AAAA,4BACpB,MAAK,CAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACR;AAEJ,CAAC;"}
1	+ {"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Drag } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./SidebarGroupItem.styles\";\n\nexport { staticClasses as flowSidebarGroupItemClasses };\n\nexport type HvFlowSidebarGroupItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupItemProps extends HvBaseProps {\n /** Item label. /\n label: string;\n /* Whether the item is being dragged. /\n isDragging?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFlowSidebarGroupItemClasses;\n}\n\nexport const HvFlowSidebarGroupItem = forwardRef<\n HTMLDivElement,\n HvFlowSidebarGroupItemProps\n>(function HvFlowSidebarGroupItem(props, ref) {\n const {\n label,\n isDragging,\n classes: classesProp,\n className,\n ...others\n } = props;\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <div\n ref={ref}\n className={cx(\n classes.root,\n { [classes.dragging]: isDragging },\n className,\n )}\n {...others}\n >\n <HvTypography>{label}</HvTypography>\n <Drag />\n </div>\n );\n});\n"],"names":["HvFlowSidebarGroupItem"],"mappings":";;;;;;AAuBO,MAAM,yBAAyB,WAGpC,SAASA,wBAAuB,OAAO,KAAK;AACtC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,gBAAc,UAAM,MAAA,CAAA;AAAA,4BACpB,MAAK,CAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACR;AAEJ,CAAC;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.41.13",
+  "version": "5.41.15",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -33,10 +33,10 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.82.3",
-    "@hitachivantara/uikit-react-icons": "^5.13.0",
-    "@hitachivantara/uikit-react-utils": "^0.2.17",
-    "@hitachivantara/uikit-styles": "^5.40.2",
+    "@hitachivantara/uikit-react-core": "^5.83.0",
+    "@hitachivantara/uikit-react-icons": "^5.13.2",
+    "@hitachivantara/uikit-react-utils": "^0.2.19",
+    "@hitachivantara/uikit-styles": "^5.40.4",
     "@mui/base": "^5.0.0-beta.40",
     "@types/react-grid-layout": "^1.3.5",
     "react-grid-layout": "^1.4.4",
@@ -52,7 +52,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "8c8ff8da3d880c63a34299c6d4593b1865dc60f0",
+  "gitHead": "75efe8d1fa16056ea5a0a3f2b895635065b7a3be",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",