@hitachivantara/uikit-react-lab 5.4.50 → 5.5.1

package/dist/cjs/components/Flow/Background/Background.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Background.cjs","sources":["../../../../../src/components/Flow/Background/Background.tsx"],"sourcesContent":["import { Background, BackgroundProps } from \"reactflow\";\n\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nexport interface HvFlowBackgroundProps extends Omit<BackgroundProps, \"color\"> {\n  /** Color for the background dots. Defaults to `secondary`. */\n  color?: HvColorAny;\n}\n\nexport const HvFlowBackground = ({\n  color = \"secondary\",\n  ...others\n}: HvFlowBackgroundProps) => {\n  return (\n    <Background color={getColor(color, theme.colors.secondary)} {...others} />\n  );\n};\n"],"names":["HvFlowBackground","color","others","Background","getColor","theme","colors","secondary"],"mappings":";;;;;AASO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC,QAAQ;AAAA,EACR,GAAGC;AACkB,MAAM;AAC3B,wCACGC,UAAAA,YAAU;AAAA,IAACF,OAAOG,YAAAA,SAASH,OAAOI,YAAAA,MAAMC,OAAOC,SAAS;AAAA,IAAE,GAAKL;AAAAA,EAAAA,CAAS;AAE7E;;"}

package/dist/cjs/components/Flow/Controls/Controls.cjs

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ReactFlow = require("reactflow");
+const shallow = require("zustand/shallow");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const DEFAULT_LABELS = {
+  fitView: "Fit view",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  interactive: "Interactive"
+};
+const selector = (state) => ({
+  isInteractive: state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,
+  minZoomReached: state.transform[2] <= state.minZoom,
+  maxZoomReached: state.transform[2] >= state.maxZoom
+});
+const HvFlowControls = ({
+  onZoomIn: onZoomInProp,
+  onZoomOut: onZoomOutProp,
+  onFitView: onFitViewProp,
+  labels: labelsProps,
+  hideInteractive,
+  hideFitView,
+  hideZoom,
+  position = "bottom-center",
+  orientation = "horizontal",
+  onInteractiveChange,
+  fitViewOptions,
+  children,
+  ...others
+}) => {
+  const {
+    isInteractive,
+    minZoomReached,
+    maxZoomReached
+  } = ReactFlow.useStore(selector, shallow.shallow);
+  const store = ReactFlow.useStoreApi();
+  const {
+    zoomIn,
+    zoomOut,
+    fitView
+  } = ReactFlow.useReactFlow();
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
+  const handleZoomIn = () => {
+    zoomIn();
+    onZoomInProp == null ? void 0 : onZoomInProp();
+  };
+  const handleZoomOut = () => {
+    zoomOut();
+    onZoomOutProp == null ? void 0 : onZoomOutProp();
+  };
+  const handleFitView = () => {
+    fitView(fitViewOptions);
+    onFitViewProp == null ? void 0 : onFitViewProp();
+  };
+  const handleInteractive = () => {
+    store.setState({
+      nodesDraggable: !isInteractive,
+      nodesConnectable: !isInteractive,
+      elementsSelectable: !isInteractive
+    });
+    onInteractiveChange == null ? void 0 : onInteractiveChange(!isInteractive);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Panel, {
+    position,
+    ...others,
+    children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, {
+      vertical: orientation === "vertical",
+      children: [!hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
+        icon: true,
+        title: labels == null ? void 0 : labels.zoomIn,
+        onClick: handleZoomIn,
+        disabled: maxZoomReached,
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, {
+          role: "none"
+        })
+      }), !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
+        icon: true,
+        title: labels == null ? void 0 : labels.zoomOut,
+        onClick: handleZoomOut,
+        disabled: minZoomReached,
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, {
+          role: "none"
+        })
+      }), !hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
+        icon: true,
+        title: labels == null ? void 0 : labels.fitView,
+        onClick: handleFitView,
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, {
+          role: "none"
+        })
+      }), !hideInteractive && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
+        icon: true,
+        title: labels == null ? void 0 : labels.interactive,
+        onClick: handleInteractive,
+        children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, {
+          role: "none"
+        }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, {
+          role: "none"
+        })
+      }), children]
+    })
+  });
+};
+exports.HvFlowControls = HvFlowControls;
+//# sourceMappingURL=Controls.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.cjs","sources":["../../../../../src/components/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n  ControlProps,\n  Panel,\n  PanelPosition,\n  ReactFlowState,\n  useReactFlow,\n  useStore,\n  useStoreApi,\n} from \"reactflow\";\n\nimport { shallow } from \"zustand/shallow\";\n\nimport {\n  HvButton,\n  HvMultiButton,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  Focus,\n  Lock,\n  Unlock,\n  ZoomIn,\n  ZoomOut,\n} from \"@hitachivantara/uikit-react-icons\";\n\nexport type HvFlowControlsPosition = PanelPosition;\n\nexport interface HvFlowControlsProps\n  extends Omit<\n    ControlProps,\n    \"position\" | \"showFitView\" | \"showInteractive\" | \"showZoom\"\n  > {\n  /** Controls position. Defaults to `bottom-center`. */\n  position?: HvFlowControlsPosition;\n  /** Controls orientation. Defaults to `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Labels used on the controls buttons. */\n  labels?: {\n    zoomIn?: string;\n    zoomOut?: string;\n    fitView?: string;\n    interactive?: string;\n  };\n  /** Whether to hide the zoom controls. */\n  hideZoom?: boolean;\n  /** Whether to hide the fit view controls. */\n  hideFitView?: boolean;\n  /** Whether to hide the interactive controls. */\n  hideInteractive?: boolean;\n}\n\nconst DEFAULT_LABELS: HvFlowControlsProps[\"labels\"] = {\n  fitView: \"Fit view\",\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  interactive: \"Interactive\",\n};\n\nconst selector = (state: ReactFlowState) => ({\n  isInteractive:\n    state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,\n  minZoomReached: state.transform[2] <= state.minZoom,\n  maxZoomReached: state.transform[2] >= state.maxZoom,\n});\n\nexport const HvFlowControls = ({\n  onZoomIn: onZoomInProp,\n  onZoomOut: onZoomOutProp,\n  onFitView: onFitViewProp,\n  labels: labelsProps,\n  hideInteractive,\n  hideFitView,\n  hideZoom,\n  position = \"bottom-center\",\n  orientation = \"horizontal\",\n  onInteractiveChange,\n  fitViewOptions,\n  children,\n  ...others\n}: HvFlowControlsProps) => {\n  const { isInteractive, minZoomReached, maxZoomReached } = useStore(\n    selector,\n    shallow\n  );\n  const store = useStoreApi();\n  const { zoomIn, zoomOut, fitView } = useReactFlow();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const handleZoomIn = () => {\n    zoomIn();\n    onZoomInProp?.();\n  };\n\n  const handleZoomOut = () => {\n    zoomOut();\n    onZoomOutProp?.();\n  };\n\n  const handleFitView = () => {\n    fitView(fitViewOptions);\n    onFitViewProp?.();\n  };\n\n  const handleInteractive = () => {\n    store.setState({\n      nodesDraggable: !isInteractive,\n      nodesConnectable: !isInteractive,\n      elementsSelectable: !isInteractive,\n    });\n\n    onInteractiveChange?.(!isInteractive);\n  };\n\n  return (\n    <Panel position={position} {...others}>\n      <HvMultiButton vertical={orientation === \"vertical\"}>\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomIn}\n            onClick={handleZoomIn}\n            disabled={maxZoomReached}\n          >\n            <ZoomIn role=\"none\" />\n          </HvButton>\n        )}\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomOut}\n            onClick={handleZoomOut}\n            disabled={minZoomReached}\n          >\n            <ZoomOut role=\"none\" />\n          </HvButton>\n        )}\n        {!hideFitView && (\n          <HvButton icon title={labels?.fitView} onClick={handleFitView}>\n            <Focus role=\"none\" />\n          </HvButton>\n        )}\n        {!hideInteractive && (\n          <HvButton\n            icon\n            title={labels?.interactive}\n            onClick={handleInteractive}\n          >\n            {isInteractive ? <Unlock role=\"none\" /> : <Lock role=\"none\" />}\n          </HvButton>\n        )}\n        {children}\n      </HvMultiButton>\n    </Panel>\n  );\n};\n"],"names":["DEFAULT_LABELS","fitView","zoomIn","zoomOut","interactive","selector","state","isInteractive","nodesDraggable","nodesConnectable","elementsSelectable","minZoomReached","transform","minZoom","maxZoomReached","maxZoom","HvFlowControls","onZoomIn","onZoomInProp","onZoomOut","onZoomOutProp","onFitView","onFitViewProp","labels","labelsProps","hideInteractive","hideFitView","hideZoom","position","orientation","onInteractiveChange","fitViewOptions","children","others","useStore","shallow","store","useStoreApi","useReactFlow","useLabels","handleZoomIn","handleZoomOut","handleFitView","handleInteractive","setState","Panel","HvMultiButton","vertical","HvButton","icon","title","onClick","disabled","ZoomIn","role","ZoomOut","Focus","_jsx","Unlock","Lock"],"mappings":";;;;;;;AAmDA,MAAMA,iBAAgD;AAAA,EACpDC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,aAAa;AACf;AAEA,MAAMC,WAAWA,CAACC,WAA2B;AAAA,EAC3CC,eACED,MAAME,kBAAkBF,MAAMG,oBAAoBH,MAAMI;AAAAA,EAC1DC,gBAAgBL,MAAMM,UAAU,CAAC,KAAKN,MAAMO;AAAAA,EAC5CC,gBAAgBR,MAAMM,UAAU,CAAC,KAAKN,MAAMS;AAC9C;AAEO,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC,UAAUC;AAAAA,EACVC,WAAWC;AAAAA,EACXC,WAAWC;AAAAA,EACXC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAE1B;AAAAA,IAAeI;AAAAA,IAAgBG;AAAAA,EAAAA,IAAmBoB,UACxD7B,SAAAA,UACA8B,QAAAA,OACF;AACA,QAAMC,QAAQC,UAAAA;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,UAAa,aAAA;AAE5Cf,QAAAA,SAASgB,eAAAA,UAAUvC,gBAAgBwB,WAAW;AAEpD,QAAMgB,eAAeA,MAAM;AAClB;AACQ;AAAA,EAAA;AAGjB,QAAMC,gBAAgBA,MAAM;AAClB;AACQ;AAAA,EAAA;AAGlB,QAAMC,gBAAgBA,MAAM;AAC1BzC,YAAQ8B,cAAc;AACN;AAAA,EAAA;AAGlB,QAAMY,oBAAoBA,MAAM;AAC9BP,UAAMQ,SAAS;AAAA,MACbpC,gBAAgB,CAACD;AAAAA,MACjBE,kBAAkB,CAACF;AAAAA,MACnBG,oBAAoB,CAACH;AAAAA,IAAAA,CACtB;AAEDuB,+DAAsB,CAACvB;AAAAA,EAAa;AAGtC,wCACGsC,UAAAA,OAAK;AAAA,IAACjB;AAAAA,IAAmB,GAAKK;AAAAA,IAAMD,0CAClCc,8BAAa;AAAA,MAACC,UAAUlB,gBAAgB;AAAA,MAAWG,WACjD,CAACL,2CACCqB,eAAAA,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQrB;AAAAA,QACfiD,SAASX;AAAAA,QACTY,UAAUtC;AAAAA,QAAekB,yCAExBqB,wBAAM;AAAA,UAACC,MAAK;AAAA,QAAA,CAAQ;AAAA,MACb,CAAA,GAEX,CAAC3B,2CACCqB,yBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQpB;AAAAA,QACfgD,SAASV;AAAAA,QACTW,UAAUzC;AAAAA,QAAeqB,yCAExBuB,yBAAO;AAAA,UAACD,MAAK;AAAA,QAAA,CAAQ;AAAA,MACd,CAAA,GAEX,CAAC5B,8CACCsB,yBAAQ;AAAA,QAACC,MAAI;AAAA,QAACC,OAAO3B,iCAAQtB;AAAAA,QAASkD,SAAST;AAAAA,QAAcV,yCAC3DwB,uBAAK;AAAA,UAACF,MAAK;AAAA,QAAA,CAAQ;AAAA,MACZ,CAAA,GAEX,CAAC7B,kDACCuB,yBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQnB;AAAAA,QACf+C,SAASR;AAAAA,QAAkBX,UAE1BzB,gBAAgBkD,2BAAAA,IAACC,wBAAM;AAAA,UAACJ,MAAK;AAAA,QAAA,CAAQ,IAAIG,2BAAAA,IAACE,sBAAI;AAAA,UAACL,MAAK;AAAA,QAAA,CAAQ;AAAA,MACrD,CAAA,GAEXtB,QAAQ;AAAA,IAAA,CACI;AAAA,EAAA,CACV;AAEX;;"}

package/dist/cjs/components/Flow/DroppableFlow.cjs

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ReactFlow = require("reactflow");
+require("reactflow/dist/style.css");
+const core = require("@dnd-kit/core");
+const uid = require("uid");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const Flow_styles = require("./Flow.styles.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const FlowContext = require("./FlowContext/FlowContext.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const ReactFlow__default = /* @__PURE__ */ _interopDefault(ReactFlow);
+const HvDroppableFlow = ({
+  id,
+  className,
+  children,
+  onFlowChange,
+  classes: classesProp,
+  nodes: initialNodes = [],
+  edges: initialEdges = [],
+  onConnect: onConnectProp,
+  onNodesChange: onNodesChangeProp,
+  onEdgesChange: onEdgesChangeProp,
+  ...others
+}) => {
+  const {
+    classes,
+    cx
+  } = Flow_styles.useClasses(classesProp);
+  const elementId = uikitReactCore.useUniqueId(id, "hvFlow");
+  const reactFlowInstance = ReactFlow.useReactFlow();
+  const {
+    nodeTypes
+  } = FlowContext.useFlowContext();
+  const [nodes, setNodes] = React.useState(initialNodes);
+  const [edges, setEdges] = React.useState(initialEdges);
+  const {
+    setNodeRef
+  } = core.useDroppable({
+    id: elementId
+  });
+  const handleDragEnd = React.useCallback((event) => {
+    var _a, _b, _c, _d;
+    if (event.over && event.over.id === elementId) {
+      const type = event.active.id.toString();
+      const position = reactFlowInstance.project({
+        x: (((_b = (_a = event.active.data.current) == null ? void 0 : _a.hvFlow) == null ? void 0 : _b.x) || 0) - event.over.rect.left,
+        y: (((_d = (_c = event.active.data.current) == null ? void 0 : _c.hvFlow) == null ? void 0 : _d.y) || 0) - event.over.rect.top
+      });
+      const newNode = {
+        id: uid.uid(),
+        position,
+        data: {},
+        type
+      };
+      setNodes((nds) => nds.concat(newNode));
+    }
+  }, [elementId, reactFlowInstance, setNodes]);
+  core.useDndMonitor({
+    onDragEnd: handleDragEnd
+  });
+  const handleFlowChange = React.useCallback((nds, eds) => {
+    const isDragging = nds.find((node) => node.dragging);
+    if (!isDragging) {
+      onFlowChange == null ? void 0 : onFlowChange(nds, eds);
+    }
+  }, [onFlowChange]);
+  const handleConnect = React.useCallback((connection) => {
+    const eds = ReactFlow.addEdge(connection, edges);
+    setEdges(eds);
+    handleFlowChange(nodes, eds);
+    onConnectProp == null ? void 0 : onConnectProp(connection);
+  }, [edges, handleFlowChange, nodes, onConnectProp]);
+  const handleNodesChange = React.useCallback((changes) => {
+    const nds = ReactFlow.applyNodeChanges(changes, nodes);
+    setNodes(nds);
+    handleFlowChange(nds, edges);
+    onNodesChangeProp == null ? void 0 : onNodesChangeProp(changes);
+  }, [edges, handleFlowChange, nodes, onNodesChangeProp]);
+  const handleEdgesChange = React.useCallback((changes) => {
+    const eds = ReactFlow.applyEdgeChanges(changes, edges);
+    setEdges(eds);
+    handleFlowChange(nodes, eds);
+    onEdgesChangeProp == null ? void 0 : onEdgesChangeProp(changes);
+  }, [edges, handleFlowChange, nodes, onEdgesChangeProp]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    id: elementId,
+    ref: setNodeRef,
+    className: cx(classes.root, className),
+    children: /* @__PURE__ */ jsxRuntime.jsx(ReactFlow__default.default, {
+      nodes,
+      edges,
+      nodeTypes,
+      onNodesChange: handleNodesChange,
+      onEdgesChange: handleEdgesChange,
+      onConnect: handleConnect,
+      ...others,
+      children
+    })
+  });
+};
+exports.flowClasses = Flow_styles.staticClasses;
+exports.HvDroppableFlow = HvDroppableFlow;
+//# sourceMappingURL=DroppableFlow.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n} from \"reactflow\";\nimport \"reactflow/dist/style.css\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowEdge, HvFlowNode } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./FlowContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeData = any,\n  NodeType extends string | undefined = string | undefined\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: HvFlowNode<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: HvFlowEdge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Function called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (\n    nodes: HvFlowNode<NodeData, NodeType>[],\n    edges: HvFlowEdge[]\n  ) => void;\n}\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvFlow\");\n\n  const reactFlowInstance = useReactFlow();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over && event.over.id === elementId) {\n        const type = event.active.id.toString();\n\n        // Converts the coordinates to the react flow coordinate system\n        const position = reactFlowInstance.project({\n          x: (event.active.data.current?.hvFlow?.x || 0) - event.over.rect.left,\n          y: (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n        });\n\n        const newNode: HvFlowNode = {\n          id: uid(),\n          position,\n          data: {},\n          type,\n        };\n\n        setNodes((nds) => nds.concat(newNode));\n      }\n    },\n    [elementId, reactFlowInstance, setNodes]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\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, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  return (\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        {...others}\n      >\n        {children}\n      </ReactFlow>\n    </div>\n  );\n};\n"],"names":["HvDroppableFlow","id","className","children","onFlowChange","classes","classesProp","nodes","initialNodes","edges","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","type","active","toString","position","project","x","data","current","hvFlow","rect","left","y","top","newNode","uid","nds","concat","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","find","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","ref","root","ReactFlow"],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const core = require("@dnd-kit/core");
+const modifiers = require("@dnd-kit/modifiers");
+const ReactFlow = require("reactflow");
+const DroppableFlow = require("./DroppableFlow.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const FlowContext = require("./FlowContext/FlowContext.cjs");
+const SidebarGroupItem = require("./Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs");
+const HvFlow = ({
+  nodeTypes,
+  nodeGroups,
+  sidebar,
+  dndContextProps,
+  ...others
+}) => {
+  const [draggingLabel, setDraggingLabel] = React.useState(void 0);
+  const sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.KeyboardSensor));
+  const handleDragStart = (event) => {
+    var _a, _b;
+    if ((_a = event.active.data.current) == null ? void 0 : _a.hvFlow) {
+      setDraggingLabel((_b = event.active.data.current.hvFlow) == null ? void 0 : _b.label);
+    }
+  };
+  const handleDragEnd = () => {
+    setDraggingLabel(void 0);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.ReactFlowProvider, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, {
+      nodeGroups,
+      nodeTypes,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(core.DndContext, {
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        sensors,
+        modifiers: [modifiers.restrictToWindowEdges],
+        ...dndContextProps,
+        children: [/* @__PURE__ */ jsxRuntime.jsx(DroppableFlow.HvDroppableFlow, {
+          ...others
+        }), sidebar, /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, {
+          modifiers: [modifiers.restrictToWindowEdges],
+          children: draggingLabel ? /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, {
+            label: draggingLabel,
+            isDragging: true
+          }) : null
+        })]
+      })
+    })
+  });
+};
+exports.HvFlow = HvFlow;
+//# sourceMappingURL=Flow.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.cjs","sources":["../../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n  DndContext,\n  DndContextProps,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowSidebarGroupItem } from \"./Sidebar/SidebarGroup/SidebarGroupItem\";\n\nexport interface HvFlowProps<\n  NodeData = any,\n  NodeType extends string | undefined = string | undefined,\n  NodeGroups extends keyof any = string\n> extends HvDroppableFlowProps<NodeData, NodeType> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /**\n   * Dnd Kit context props. This should be used for accessibility purposes.\n   *\n   * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n   */\n  dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/**\n * Flow component to build interactive node-based UIs.\n *\n * This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n  nodeTypes,\n  nodeGroups,\n  sidebar,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor)\n  );\n\n  const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n    if (event.active.data.current?.hvFlow) {\n      setDraggingLabel(event.active.data.current.hvFlow?.label);\n    }\n  };\n\n  const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n    setDraggingLabel(undefined);\n  };\n\n  // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n  // HvFlowContext is our custom internal context.\n  return (\n    <ReactFlowProvider>\n      <HvFlowProvider nodeGroups={nodeGroups} nodeTypes={nodeTypes}>\n        <DndContext\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n          <DragOverlay modifiers={[restrictToWindowEdges]}>\n            {draggingLabel ? (\n              <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n            ) : null}\n          </DragOverlay>\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":["HvFlow","nodeTypes","nodeGroups","sidebar","dndContextProps","others","draggingLabel","setDraggingLabel","useState","undefined","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","ReactFlowProvider","children","HvFlowProvider","DndContext","onDragStart","onDragEnd","modifiers","restrictToWindowEdges","_jsx","HvDroppableFlow","DragOverlay","HvFlowSidebarGroupItem","isDragging"],"mappings":";;;;;;;;;;AA+CO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,MAAAA,SAASC,MAAS;AAE5D,QAAMC,UAAUC,KAAAA,WACdC,KAAAA,UAAUC,KAAa,aAAA,GACvBD,KAAAA,UAAUE,KAAc,cAAA,CAC1B;AAEA,QAAMC,kBAAmDC,CAAU,UAAA;;AACjE,SAAIA,WAAMC,OAAOC,KAAKC,YAAlBH,mBAA2BI,QAAQ;AACrCb,wBAAiBS,WAAMC,OAAOC,KAAKC,QAAQC,WAA1BJ,mBAAkCK,KAAK;AAAA,IAC1D;AAAA,EAAA;AAGF,QAAMC,gBAA8CA,MAAM;AACxDf,qBAAiBE,MAAS;AAAA,EAAA;AAK5B,wCACGc,UAAAA,mBAAiB;AAAA,IAAAC,yCACfC,4BAAc;AAAA,MAACvB;AAAAA,MAAwBD;AAAAA,MAAqBuB,0CAC1DE,iBAAU;AAAA,QACTC,aAAaZ;AAAAA,QACba,WAAWN;AAAAA,QACXZ;AAAAA,QACAmB,WAAW,CAACC,UAAAA,qBAAqB;AAAA,QAAE,GAC/B1B;AAAAA,QAAeoB,UAAA,CAEnBO,2BAAAA,IAACC,+BAAe;AAAA,UAAA,GAAK3B;AAAAA,QAAAA,CAAS,GAC7BF,SACD4B,2BAAAA,IAACE,kBAAW;AAAA,UAACJ,WAAW,CAACC,UAAAA,qBAAqB;AAAA,UAAEN,UAC7ClB,gBACCyB,2BAAAA,IAACG,yCAAsB;AAAA,YAACb,OAAOf;AAAAA,YAAe6B,YAAU;AAAA,UAAE,CAAA,IACxD;AAAA,QAAA,CACO,CAAC;AAAA,MAAA,CACJ;AAAA,IAAA,CACE;AAAA,EAAA,CACC;AAEvB;;"}

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const {
+  staticClasses,
+  useClasses
+} = uikitReactCore.createClasses("HvFlow", {
+  root: {
+    height: "100%"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=Flow.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.styles.cjs","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: { height: \"100%\" },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IAAEC,QAAQ;AAAA,EAAO;AACzB,CAAC;;;"}

package/dist/cjs/components/Flow/FlowContext/FlowContext.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const HvFlowContext = React.createContext({});
+const HvFlowProvider = ({
+  nodeGroups,
+  nodeTypes,
+  children
+}) => {
+  const [expandedNodeGroups, setExpandedNodeGroups] = React.useState([]);
+  const value = React.useMemo(() => ({
+    nodeTypes,
+    nodeGroups,
+    expandedNodeGroups,
+    setExpandedNodeGroups
+  }), [nodeGroups, nodeTypes, expandedNodeGroups]);
+  return /* @__PURE__ */ jsxRuntime.jsx(HvFlowContext.Provider, {
+    value,
+    children
+  });
+};
+const useFlowContext = () => React.useContext(HvFlowContext);
+exports.HvFlowContext = HvFlowContext;
+exports.HvFlowProvider = HvFlowProvider;
+exports.useFlowContext = useFlowContext;
+//# sourceMappingURL=FlowContext.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowContext.cjs","sources":["../../../../../src/components/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes groups expanded on sidebar. */\n  expandedNodeGroups?: string[];\n  /** Function to set `expandedNodeGroups`. */\n  setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n  /** Children. */\n  children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n  nodeGroups,\n  nodeTypes,\n  children,\n}: HvFlowProviderProps) => {\n  const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n  const value = useMemo(\n    () => ({\n      nodeTypes,\n      nodeGroups,\n      expandedNodeGroups,\n      setExpandedNodeGroups,\n    }),\n    [nodeGroups, nodeTypes, expandedNodeGroups]\n  );\n\n  return (\n    <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n  );\n};\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":["HvFlowContext","createContext","HvFlowProvider","nodeGroups","nodeTypes","children","expandedNodeGroups","setExpandedNodeGroups","useState","value","useMemo","_jsx","Provider","useFlowContext","useContext"],"mappings":";;;;AAsBaA,MAAAA,gBAAgBC,MAAkC,cAAA,EAAE;AAW1D,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,MAAAA,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IACLN;AAAAA,IACAD;AAAAA,IACAG;AAAAA,IACAC;AAAAA,EAEF,IAAA,CAACJ,YAAYC,WAAWE,kBAAkB,CAC5C;AAGEK,SAAAA,2BAAAA,IAACX,cAAcY,UAAQ;AAAA,IAACH;AAAAA,IAAaJ;AAAAA,EAAAA,CAAmC;AAE5E;AAEaQ,MAAAA,iBAAiBA,MAAMC,MAAAA,WAAWd,aAAa;;;;"}

package/dist/cjs/components/Flow/Minimap/Minimap.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ReactFlow = require("reactflow");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const Minimap_styles = require("./Minimap.styles.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const HvFlowMinimap = ({
+  nodeColor = "atmo4",
+  maskColor = "atmo3",
+  maskStrokeColor = "atmo3",
+  nodeStrokeColor = "atmo4",
+  classes: classesProp,
+  className,
+  ...others
+}) => {
+  const {
+    classes,
+    cx
+  } = Minimap_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.MiniMap, {
+    className: cx(classes.root, className),
+    nodeColor: typeof nodeColor === "string" ? uikitStyles.getColor(nodeColor, uikitStyles.theme.colors.atmo4) : nodeColor,
+    nodeStrokeColor: typeof nodeStrokeColor === "string" ? uikitStyles.getColor(nodeStrokeColor, uikitStyles.theme.colors.atmo4) : nodeStrokeColor,
+    maskColor: uikitStyles.getColor(maskColor, uikitStyles.theme.colors.atmo3),
+    maskStrokeColor: uikitStyles.getColor(maskStrokeColor, uikitStyles.theme.colors.atmo3),
+    ...others
+  });
+};
+exports.flowMinimapClasses = Minimap_styles.staticClasses;
+exports.HvFlowMinimap = HvFlowMinimap;
+//# sourceMappingURL=Minimap.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Minimap.cjs","sources":["../../../../../src/components/Flow/Minimap/Minimap.tsx"],"sourcesContent":["import { GetMiniMapNodeAttribute, MiniMap, MiniMapProps } from \"reactflow\";\n\nimport { ExtractNames } from \"@hitachivantara/uikit-react-core\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { staticClasses, useClasses } from \"./Minimap.styles\";\n\nexport { staticClasses as flowMinimapClasses };\n\nexport type HvFlowMinimapClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowMinimapProps<NodeData = any>\n  extends Omit<\n    MiniMapProps<NodeData>,\n    \"nodeColor\" | \"nodeStrokeColor\" | \"maskColor\" | \"maskStrokeColor\"\n  > {\n  /** Node color. Defaults to `atmo4`. */\n  nodeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n  /** Node stroke color. Defaults to `atmo4`. */\n  nodeStrokeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n  /** Mask color. Defaults to `atmo3`. */\n  maskColor?: HvColorAny;\n  /** Mask stroke color. Defaults to `atmo3`. */\n  maskStrokeColor?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowMinimapClasses;\n}\n\nexport const HvFlowMinimap = ({\n  nodeColor = \"atmo4\",\n  maskColor = \"atmo3\",\n  maskStrokeColor = \"atmo3\",\n  nodeStrokeColor = \"atmo4\",\n  classes: classesProp,\n  className,\n  ...others\n}: HvFlowMinimapProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MiniMap\n      className={cx(classes.root, className)}\n      nodeColor={\n        typeof nodeColor === \"string\"\n          ? getColor(nodeColor, theme.colors.atmo4)\n          : nodeColor\n      }\n      nodeStrokeColor={\n        typeof nodeStrokeColor === \"string\"\n          ? getColor(nodeStrokeColor, theme.colors.atmo4)\n          : nodeStrokeColor\n      }\n      maskColor={getColor(maskColor, theme.colors.atmo3)}\n      maskStrokeColor={getColor(maskStrokeColor, theme.colors.atmo3)}\n      {...others}\n    />\n  );\n};\n"],"names":["HvFlowMinimap","nodeColor","maskColor","maskStrokeColor","nodeStrokeColor","classes","classesProp","className","others","cx","useClasses","MiniMap","root","getColor","theme","colors","atmo4","atmo3"],"mappings":";;;;;;AA4BO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,YAAY;AAAA,EACZC,YAAY;AAAA,EACZC,kBAAkB;AAAA,EAClBC,kBAAkB;AAAA,EAClBC,SAASC;AAAAA,EACTC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEH;AAAAA,IAASI;AAAAA,EAAAA,IAAOC,eAAAA,WAAWJ,WAAW;AAE9C,wCACGK,UAAAA,SAAO;AAAA,IACNJ,WAAWE,GAAGJ,QAAQO,MAAML,SAAS;AAAA,IACrCN,WACE,OAAOA,cAAc,WACjBY,qBAASZ,WAAWa,kBAAMC,OAAOC,KAAK,IACtCf;AAAAA,IAENG,iBACE,OAAOA,oBAAoB,WACvBS,qBAAST,iBAAiBU,kBAAMC,OAAOC,KAAK,IAC5CZ;AAAAA,IAENF,WAAWW,YAAAA,SAASX,WAAWY,YAAAA,MAAMC,OAAOE,KAAK;AAAA,IACjDd,iBAAiBU,YAAAA,SAASV,iBAAiBW,YAAAA,MAAMC,OAAOE,KAAK;AAAA,IAAE,GAC3DT;AAAAA,EAAAA,CACL;AAEL;;;"}

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const {
+  staticClasses,
+  useClasses
+} = uikitReactCore.createClasses("HvFlowMinimap", {
+  root: {
+    "&.react-flow__minimap": {
+      backgroundColor: uikitReactCore.theme.colors.atmo2
+    }
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=Minimap.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Minimap.styles.cjs","sources":["../../../../../src/components/Flow/Minimap/Minimap.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowMinimap\", {\n  root: {\n    \"&.react-flow__minimap\": { backgroundColor: theme.colors.atmo2 },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","backgroundColor","theme","colors","atmo2"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJ,yBAAyB;AAAA,MAAEC,iBAAiBC,eAAAA,MAAMC,OAAOC;AAAAA,IAAM;AAAA,EACjE;AACF,CAAC;;;"}

package/dist/cjs/components/Flow/Sidebar/Sidebar.cjs

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const debounce = require("lodash/debounce");
+const core = require("@dnd-kit/core");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const Sidebar_styles = require("./Sidebar.styles.cjs");
+const utils = require("./utils.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const SidebarGroup = require("./SidebarGroup/SidebarGroup.cjs");
+const FlowContext = require("../FlowContext/FlowContext.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
+const DEFAULT_LABELS = {
+  itemAriaRoleDescription: "Draggable",
+  expandGroupButtonAriaLabel: "Expand group",
+  searchPlaceholder: "Search node...",
+  searchAriaLabel: "Search node..."
+};
+const HvFlowSidebar = ({
+  id,
+  title,
+  description,
+  anchor = "right",
+  buttonTitle = "Close",
+  classes: classesProp,
+  labels: labelsProps,
+  ...others
+}) => {
+  const {
+    classes
+  } = Sidebar_styles.useClasses(classesProp);
+  const {
+    nodeGroups,
+    nodeTypes,
+    setExpandedNodeGroups
+  } = FlowContext.useFlowContext();
+  const unfilteredGroups = React.useMemo(() => utils.buildGroups(nodeGroups, nodeTypes), [nodeGroups, nodeTypes]);
+  const [groups, setGroups] = React.useState(unfilteredGroups);
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
+  const drawerElementId = uikitReactCore.useUniqueId(id, "hvFlowSidebarDrawer");
+  const groupsElementId = uikitReactCore.useUniqueId(id, "hvFlowSidebarGroups");
+  const {
+    setNodeRef
+  } = core.useDroppable({
+    id: drawerElementId
+  });
+  const handleSearch = (event, value) => {
+    const gps = value ? Object.entries(unfilteredGroups).reduce((acc, curr) => {
+      const filteredNodes = curr[1].nodes.filter((obj) => obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase()));
+      const nodesCount = filteredNodes.length;
+      if (nodesCount > 0) {
+        acc[curr[0]] = {
+          ...curr[1],
+          nodes: filteredNodes
+        };
+      }
+      return acc;
+    }, {}) : unfilteredGroups;
+    setGroups(gps);
+    setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups(value ? Object.keys(gps) : []);
+  };
+  const handleDebouncedSearch = debounce__default.default(handleSearch, 500);
+  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDrawer, {
+    BackdropComponent: void 0,
+    variant: "persistent",
+    classes: {
+      paper: classes.drawerPaper
+    },
+    anchor,
+    buttonTitle,
+    ...others,
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      id: drawerElementId,
+      ref: setNodeRef,
+      children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: classes.titleContainer,
+        children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {
+          role: "none"
+        }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
+          variant: "title3",
+          children: title
+        })]
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: classes.contentContainer,
+        children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
+          className: classes.description,
+          children: description
+        }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvInput, {
+          className: classes.searchRoot,
+          type: "search",
+          placeholder: labels == null ? void 0 : labels.searchPlaceholder,
+          "aria-label": labels == null ? void 0 : labels.searchAriaLabel,
+          "aria-controls": groupsElementId,
+          "aria-owns": groupsElementId,
+          onChange: handleDebouncedSearch,
+          inputProps: {
+            autoComplete: "off"
+          }
+        }), /* @__PURE__ */ jsxRuntime.jsx("ul", {
+          id: groupsElementId,
+          className: classes.groupsContainer,
+          children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup.HvFlowSidebarGroup, {
+            id: obj[0],
+            expandButtonProps: {
+              "aria-label": labels == null ? void 0 : labels.expandGroupButtonAriaLabel
+            },
+            itemProps: {
+              "aria-roledescription": labels == null ? void 0 : labels.itemAriaRoleDescription
+            },
+            ...obj[1]
+          }, obj[0]))
+        })]
+      })]
+    })
+  });
+};
+exports.flowSidebarClasses = Sidebar_styles.staticClasses;
+exports.HvFlowSidebar = HvFlowSidebar;
+//# sourceMappingURL=Sidebar.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nimport debounce from \"lodash/debounce\";\n\nimport { useDroppable } from \"@dnd-kit/core\";\n\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../FlowContext\";\nimport { buildGroups } from \"./utils\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n  extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n  /** Sidebar title. */\n  title?: string;\n  /** Sidebar description. */\n  description?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarClasses;\n  /** Labels used on the sidebar. */\n  labels?: {\n    itemAriaRoleDescription?: string;\n    expandGroupButtonAriaLabel?: string;\n    searchPlaceholder?: string;\n    searchAriaLabel?: string;\n  };\n}\n\nconst DEFAULT_LABELS: HvFlowSidebarProps[\"labels\"] = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id, \"hvFlowSidebarDrawer\");\n  const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\n\n  // The sidebar is droppable to distinguish between the canvas and the sidebar\n  // Otherwise items dropped inside the sidebar will be added to the canvas\n  const { setNodeRef } = useDroppable({\n    id: drawerElementId,\n  });\n\n  const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    const gps = value\n      ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n          // Filter nodes by search\n          const filteredNodes = curr[1].nodes.filter((obj) =>\n            obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n          );\n          const nodesCount = filteredNodes.length;\n\n          // Only show groups with nodes\n          if (nodesCount > 0) {\n            acc[curr[0]] = {\n              ...curr[1],\n              nodes: filteredNodes,\n            };\n          }\n\n          return acc;\n        }, {})\n      : unfilteredGroups;\n\n    setGroups(gps);\n    setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\n      anchor={anchor}\n      buttonTitle={buttonTitle}\n      {...others}\n    >\n      <div id={drawerElementId} ref={setNodeRef}>\n        <div className={classes.titleContainer}>\n          <Add role=\"none\" />\n          <HvTypography variant=\"title3\">{title}</HvTypography>\n        </div>\n        <div className={classes.contentContainer}>\n          <HvTypography className={classes.description}>\n            {description}\n          </HvTypography>\n          <HvInput\n            className={classes.searchRoot}\n            type=\"search\"\n            placeholder={labels?.searchPlaceholder}\n            aria-label={labels?.searchAriaLabel}\n            aria-controls={groupsElementId}\n            aria-owns={groupsElementId}\n            onChange={handleDebouncedSearch}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          <ul id={groupsElementId} className={classes.groupsContainer}>\n            {Object.entries(groups).map((obj) => (\n              <HvFlowSidebarGroup\n                key={obj[0]}\n                id={obj[0]}\n                expandButtonProps={{\n                  \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                }}\n                itemProps={{\n                  \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                }}\n                {...obj[1]}\n              />\n            ))}\n          </ul>\n        </div>\n      </div>\n    </HvDrawer>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleSearch","event","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","label","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","HvDrawer","BackdropComponent","undefined","variant","paper","drawerPaper","children","ref","_jsxs","className","titleContainer","_jsx","Add","role","HvTypography","contentContainer","HvInput","searchRoot","type","placeholder","onChange","inputProps","autoComplete","groupsContainer","map","HvFlowSidebarGroup","expandButtonProps","itemProps"],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const {
+  staticClasses,
+  useClasses
+} = uikitReactCore.createClasses("HvFlowSidebar", {
+  drawerPaper: {
+    width: "360px"
+  },
+  titleContainer: {
+    display: "flex",
+    padding: uikitReactCore.theme.spacing("sm", "lg", "xs", "sm")
+  },
+  contentContainer: {
+    padding: uikitReactCore.theme.spacing(0, "lg", "sm", "lg")
+  },
+  description: {
+    color: uikitReactCore.theme.colors.secondary_60
+  },
+  searchRoot: {
+    paddingTop: uikitReactCore.theme.space.sm,
+    paddingBottom: uikitReactCore.theme.space.sm
+  },
+  groupsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: uikitReactCore.theme.space.sm,
+    listStyleType: "none"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=Sidebar.styles.cjs.map