@hitachivantara/uikit-react-lab 5.22.2 → 5.24.0

package/dist/esm/Flow/Node/Parameters/Select.js

@@ -1,26 +1,16 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
 import { HvDropdown } from "@hitachivantara/uikit-react-core";
-import { useReactFlow } from "reactflow";
-const Select = ({ nodeId, param, data }) => {
+import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";
+const Select = ({ param, data }) => {
   const { id, label, multiple = false, options } = param;
-  const reactFlowInstance = useReactFlow();
+  const { setNodeData } = useFlowNodeUtils();
   const [opts, setOpts] = useState(
     data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0
   );
   const onSelectChange = (item) => {
     const newOpts = Array.isArray(item) ? item.map((x) => x.label) : item?.label ?? void 0;
-    reactFlowInstance.setNodes(
-      (nodes) => nodes.map((node) => {
-        if (node.id === nodeId) {
-          node.data = {
-            ...node.data,
-            [id]: newOpts
-          };
-        }
-        return node;
-      })
-    );
+    setNodeData((prev) => ({ ...prev, [id]: newOpts }));
     setOpts(
       newOpts ? Array.isArray(newOpts) ? newOpts : [newOpts] : void 0
     );

package/dist/esm/Flow/Node/Parameters/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeSelectParam } from \"../../types\";\n\ninterface SelectProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeSelectParam, \"type\">;\n  data: any;\n}\n\nconst Select = ({ nodeId, param, data }: SelectProps) => {\n  const { id, label, multiple = false, options } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [opts, setOpts] = useState<string[] | undefined>(\n    data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined\n  );\n\n  const onSelectChange: HvDropdownProps[\"onChange\"] = (item) => {\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : (item?.label as string) ?? undefined;\n\n    reactFlowInstance.setNodes((nodes) =>\n      nodes.map((node) => {\n        if (node.id === nodeId) {\n          node.data = {\n            ...node.data,\n            [id]: newOpts,\n          };\n        }\n        return node;\n      })\n    );\n    setOpts(\n      newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined\n    );\n  };\n\n  return (\n    <HvDropdown\n      className=\"nodrag\" // Prevents dragging within the select field\n      disablePortal\n      label={label}\n      values={options?.map((o) => {\n        return { id: o, label: o, selected: !!opts?.find((opt) => opt === o) };\n      })}\n      onChange={onSelectChange}\n      maxHeight={100}\n      multiSelect={multiple}\n    />\n  );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;AAYA,MAAM,SAAS,CAAC,EAAE,QAAQ,OAAO,WAAwB;AACvD,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAEjD,QAAM,oBAAoB;AAEpB,QAAA,CAAC,MAAM,OAAO,IAAI;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EAAA;AAG3D,QAAA,iBAA8C,CAAC,SAAS;AAC5D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,KAAe,IAChC,MAAM,SAAoB;AAEb,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACtB,eAAK,OAAO;AAAA,YACV,GAAG,KAAK;AAAA,YACR,CAAC,EAAE,GAAG;AAAA,UAAA;AAAA,QAEV;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAAA;AAAA,EAC7D;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,MAAM;AAC1B,eAAO,EAAE,IAAI,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,CAAC,EAAE;AAAA,MAAA,CACtE;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEA,MAAA,WAAe;"}
+{"version":3,"file":"Select.js","sources":["../../../../../src/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeSelectParam } from \"../../types\";\nimport { useFlowNodeUtils } from \"../../hooks\";\n\ninterface SelectProps {\n  param: Omit<HvFlowNodeSelectParam, \"type\">;\n  data: any;\n}\n\nconst Select = ({ param, data }: SelectProps) => {\n  const { id, label, multiple = false, options } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  const [opts, setOpts] = useState<string[] | undefined>(\n    data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined\n  );\n\n  const onSelectChange: HvDropdownProps[\"onChange\"] = (item) => {\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : (item?.label as string) ?? undefined;\n\n    setNodeData((prev) => ({ ...prev, [id]: newOpts }));\n    setOpts(\n      newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined\n    );\n  };\n\n  return (\n    <HvDropdown\n      className=\"nodrag\" // Prevents dragging within the select field\n      disablePortal\n      label={label}\n      values={options?.map((o) => {\n        return { id: o, label: o, selected: !!opts?.find((opt) => opt === o) };\n      })}\n      onChange={onSelectChange}\n      maxHeight={100}\n      multiSelect={multiple}\n    />\n  );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;AAWA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AAC/C,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAC3C,QAAA,EAAE,gBAAgB;AAElB,QAAA,CAAC,MAAM,OAAO,IAAI;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EAAA;AAG3D,QAAA,iBAA8C,CAAC,SAAS;AAC5D,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,KAAe,IAChC,MAAM,SAAoB;AAEnB,gBAAA,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,QAAU,EAAA;AAClD;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAAA;AAAA,EAC7D;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,MAAM;AAC1B,eAAO,EAAE,IAAI,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,CAAC,EAAE;AAAA,MAAA,CACtE;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEA,MAAA,WAAe;"}

package/dist/esm/Flow/Node/Parameters/Slider.js

@@ -1,8 +1,7 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useState } from "react";
 import { css } from "@emotion/css";
-import { useReactFlow } from "reactflow";
 import { HvSlider } from "@hitachivantara/uikit-react-core";
+import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";
 const classes = {
   labelContainer: css({
     marginRight: 0,
@@ -12,27 +11,15 @@ const classes = {
     padding: 0
   })
 };
-const Slider = ({ nodeId, param, data }) => {
+const Slider = ({ param, data }) => {
   const { id } = param;
-  const reactFlowInstance = useReactFlow();
-  const [value, setValue] = useState(data[id]);
-  const onSliderChange = (val) => {
-    reactFlowInstance.setNodes(
-      (nodes) => nodes.map((node) => {
-        if (node.id === nodeId) {
-          node.data = { ...node.data, [id]: val };
-        }
-        return node;
-      })
-    );
-    setValue(val);
-  };
+  const { setNodeData } = useFlowNodeUtils();
   return /* @__PURE__ */ jsx(
     HvSlider,
     {
       className: "nodrag",
-      defaultValues: value,
-      onChange: onSliderChange,
+      defaultValues: data[id],
+      onChange: (val) => setNodeData((prev) => ({ ...prev, [id]: val })),
       classes: {
         labelContainer: classes.labelContainer,
         sliderBase: classes.sliderBase

package/dist/esm/Flow/Node/Parameters/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { css } from \"@emotion/css\";\n\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvSlider, HvSliderProps } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeSliderParam } from \"../../types\";\n\ninterface SliderProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeSliderParam, \"type\">;\n  data: any;\n}\n\nconst classes = {\n  labelContainer: css({\n    marginRight: 0,\n    marginLeft: 0,\n  }),\n  sliderBase: css({\n    padding: 0,\n  }),\n};\n\nconst Slider = ({ nodeId, param, data }: SliderProps) => {\n  const { id } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [value, setValue] = useState(data[id]);\n\n  const onSliderChange: HvSliderProps[\"onChange\"] = (val) => {\n    reactFlowInstance.setNodes((nodes) =>\n      nodes.map((node) => {\n        if (node.id === nodeId) {\n          node.data = { ...node.data, [id]: val };\n        }\n        return node;\n      })\n    );\n    setValue(val);\n  };\n\n  return (\n    <HvSlider\n      className=\"nodrag\" // Prevents dragging within the input field\n      defaultValues={value}\n      onChange={onSliderChange}\n      classes={{\n        labelContainer: classes.labelContainer,\n        sliderBase: classes.sliderBase,\n      }}\n      {...param}\n    />\n  );\n};\n\nexport default Slider;\n"],"names":[],"mappings":";;;;;AAgBA,MAAM,UAAU;AAAA,EACd,gBAAgB,IAAI;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb;AAAA,EACD,YAAY,IAAI;AAAA,IACd,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,SAAS,CAAC,EAAE,QAAQ,OAAO,WAAwB;AACjD,QAAA,EAAE,GAAO,IAAA;AAEf,QAAM,oBAAoB;AAE1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK,EAAE,CAAC;AAErC,QAAA,iBAA4C,CAAC,QAAQ;AACvC,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACjB,eAAA,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC,EAAE,GAAG;QACpC;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH,aAAS,GAAG;AAAA,EAAA;AAIZ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe;AAAA,MACf,UAAU;AAAA,MACV,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAA,WAAe;"}
+{"version":3,"file":"Slider.js","sources":["../../../../../src/Flow/Node/Parameters/Slider.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { HvSlider } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeSliderParam } from \"../../types\";\nimport { useFlowNodeUtils } from \"../../hooks\";\n\ninterface SliderProps {\n  param: Omit<HvFlowNodeSliderParam, \"type\">;\n  data: any;\n}\n\nconst classes = {\n  labelContainer: css({\n    marginRight: 0,\n    marginLeft: 0,\n  }),\n  sliderBase: css({\n    padding: 0,\n  }),\n};\n\nconst Slider = ({ param, data }: SliderProps) => {\n  const { id } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  return (\n    <HvSlider\n      className=\"nodrag\" // Prevents dragging within the input field\n      defaultValues={data[id]}\n      onChange={(val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n      classes={{\n        labelContainer: classes.labelContainer,\n        sliderBase: classes.sliderBase,\n      }}\n      {...param}\n    />\n  );\n};\n\nexport default Slider;\n"],"names":[],"mappings":";;;;AAWA,MAAM,UAAU;AAAA,EACd,gBAAgB,IAAI;AAAA,IAClB,aAAa;AAAA,IACb,YAAY;AAAA,EAAA,CACb;AAAA,EACD,YAAY,IAAI;AAAA,IACd,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,SAAS,CAAC,EAAE,OAAO,WAAwB;AACzC,QAAA,EAAE,GAAO,IAAA;AACT,QAAA,EAAE,gBAAgB;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAe,KAAK,EAAE;AAAA,MACtB,UAAU,CAAC,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AAAA,MACjE,SAAS;AAAA,QACP,gBAAgB,QAAQ;AAAA,QACxB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAA,WAAe;"}

package/dist/esm/Flow/Node/Parameters/Text.js

@@ -1,29 +1,16 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useState } from "react";
 import { HvInput } from "@hitachivantara/uikit-react-core";
-import { useReactFlow } from "reactflow";
-const Text = ({ nodeId, param, data }) => {
+import { useFlowNodeUtils } from "../../hooks/useFlowNode.js";
+const Text = ({ param, data }) => {
   const { id, label } = param;
-  const reactFlowInstance = useReactFlow();
-  const [text, setText] = useState(data[id]);
-  const onTextChange = (event, val) => {
-    reactFlowInstance.setNodes(
-      (nodes) => nodes.map((node) => {
-        if (node.id === nodeId) {
-          node.data = { ...node.data, [id]: val };
-        }
-        return node;
-      })
-    );
-    setText(val);
-  };
+  const { setNodeData } = useFlowNodeUtils();
   return /* @__PURE__ */ jsx(
     HvInput,
     {
       className: "nodrag",
       label,
-      value: text,
-      onChange: onTextChange
+      defaultValue: data[id],
+      onChange: (evt, val) => setNodeData((prev) => ({ ...prev, [id]: val }))
     }
   );
 };

package/dist/esm/Flow/Node/Parameters/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../../../src/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvInput, HvInputProps } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeTextParam } from \"../../types\";\n\ninterface TextProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeTextParam, \"type\">;\n  data: any;\n}\n\nconst Text = ({ nodeId, param, data }: TextProps) => {\n  const { id, label } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [text, setText] = useState(data[id]);\n\n  const onTextChange: HvInputProps[\"onChange\"] = (event, val) => {\n    reactFlowInstance.setNodes((nodes) =>\n      nodes.map((node) => {\n        if (node.id === nodeId) {\n          node.data = { ...node.data, [id]: val };\n        }\n        return node;\n      })\n    );\n    setText(val);\n  };\n\n  return (\n    <HvInput\n      className=\"nodrag\" // Prevents dragging within the input field\n      label={label}\n      value={text}\n      onChange={onTextChange}\n    />\n  );\n};\n\nexport default Text;\n"],"names":[],"mappings":";;;;AAYA,MAAM,OAAO,CAAC,EAAE,QAAQ,OAAO,WAAsB;AAC7C,QAAA,EAAE,IAAI,MAAU,IAAA;AAEtB,QAAM,oBAAoB;AAE1B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK,EAAE,CAAC;AAEnC,QAAA,eAAyC,CAAC,OAAO,QAAQ;AAC3C,sBAAA;AAAA,MAAS,CAAC,UAC1B,MAAM,IAAI,CAAC,SAAS;AACd,YAAA,KAAK,OAAO,QAAQ;AACjB,eAAA,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC,EAAE,GAAG;QACpC;AACO,eAAA;AAAA,MAAA,CACR;AAAA,IAAA;AAEH,YAAQ,GAAG;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEA,MAAA,SAAe;"}
+{"version":3,"file":"Text.js","sources":["../../../../../src/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { HvInput } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowNodeTextParam } from \"../../types\";\nimport { useFlowNodeUtils } from \"../../hooks\";\n\ninterface TextProps {\n  param: Omit<HvFlowNodeTextParam, \"type\">;\n  data: any;\n}\n\nconst Text = ({ param, data }: TextProps) => {\n  const { id, label } = param;\n  const { setNodeData } = useFlowNodeUtils();\n\n  return (\n    <HvInput\n      className=\"nodrag\" // Prevents dragging within the input field\n      label={label}\n      defaultValue={data[id]}\n      onChange={(evt, val) => setNodeData((prev) => ({ ...prev, [id]: val }))}\n    />\n  );\n};\n\nexport default Text;\n"],"names":[],"mappings":";;;AAUA,MAAM,OAAO,CAAC,EAAE,OAAO,WAAsB;AACrC,QAAA,EAAE,IAAI,MAAU,IAAA;AAChB,QAAA,EAAE,gBAAgB;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,cAAc,KAAK,EAAE;AAAA,MACrB,UAAU,CAAC,KAAK,QAAQ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,IAAM,EAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;AAEA,MAAA,SAAe;"}

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

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from "react";
-import { useStore, useNodes, useEdges } from "reactflow";
+import { useStore, useNodes, useEdges, useNodeId, useReactFlow } from "reactflow";
 function useFlowNode(id) {
   const nodeSelector = useCallback(
     (state) => state.getNodes().find((n) => n.id === id),
@@ -52,6 +52,31 @@ function useFlowOutputNodes(id) {
     return edges.filter((e) => e.source === id).map((e) => nodes.find((n) => n.id === e.target)).filter((n) => n !== null);
   }, [edges, id, nodes]);
 }
+function useFlowNodeUtils() {
+  const nodeId = useNodeId();
+  const reactFlowInstance = useReactFlow();
+  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]
+  );
+  return useMemo(
+    () => ({
+      setNodeData
+    }),
+    [setNodeData]
+  );
+}
 export {
   useFlowInputNodes,
   useFlowNode,
@@ -59,6 +84,7 @@ export {
   useFlowNodeInputEdges,
   useFlowNodeOutputEdges,
   useFlowNodeParents,
+  useFlowNodeUtils,
   useFlowOutputNodes
 };
 //# sourceMappingURL=useFlowNode.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  Node,\n  Edge,\n  ReactFlowState,\n  useStore,\n  useNodes,\n  useEdges,\n} from \"reactflow\";\n\nexport function useFlowNode<T extends Node = Node>(id: string) {\n  const nodeSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.getNodes().find((n: Node): n is T => n.id === id),\n    [id]\n  );\n  return useStore<T | undefined>(nodeSelector);\n}\n\nexport function useFlowNodeInputEdges(id: string) {\n  const inputEdgesSelector = useCallback(\n    (state: ReactFlowState) => state.edges.filter((e: Edge) => e.target === id),\n    [id]\n  );\n  return useStore(inputEdgesSelector);\n}\n\nexport function useFlowNodeOutputEdges(id: string) {\n  const outputEdgesSelector = useCallback(\n    (state: ReactFlowState) => state.edges.filter((e: Edge) => e.source === id),\n    [id]\n  );\n  return useStore(outputEdgesSelector);\n}\n\nexport function useFlowNodeEdges(id: string) {\n  const edgesSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.edges.filter((e: Edge) => e.source === id || e.target === id),\n    [id]\n  );\n  return useStore(edgesSelector);\n}\n\nexport function useFlowNodeParents(id: string) {\n  const inputEdges = useFlowNodeInputEdges(id);\n  const parentNodesSelector = useCallback(\n    (state: ReactFlowState) => {\n      return inputEdges\n        .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n        .filter((n): n is Node => n !== null);\n    },\n    [inputEdges]\n  );\n  return useStore(parentNodesSelector);\n}\n\nexport function useFlowInputNodes<T = any>(id: string) {\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.target === id)\n      .map((e) => nodes.find((n) => n.id === e.source))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, id, nodes]);\n}\n\nexport function useFlowOutputNodes<T = any>(id: string) {\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.source === id)\n      .map((e) => nodes.find((n) => n.id === e.target))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, id, nodes]);\n}\n"],"names":[],"mappings":";;AAUO,SAAS,YAAmC,IAAY;AAC7D,QAAM,eAAe;AAAA,IACnB,CAAC,UACC,MAAM,WAAW,KAAK,CAAC,MAAoB,EAAE,OAAO,EAAE;AAAA,IACxD,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAwB,YAAY;AAC7C;AAEO,SAAS,sBAAsB,IAAY;AAChD,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAA0B,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,EAAE;AAAA,IAC1E,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,kBAAkB;AACpC;AAEO,SAAS,uBAAuB,IAAY;AACjD,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,EAAE;AAAA,IAC1E,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,mBAAmB;AACrC;AAEO,SAAS,iBAAiB,IAAY;AAC3C,QAAM,gBAAgB;AAAA,IACpB,CAAC,UACC,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,MAAM,EAAE,WAAW,EAAE;AAAA,IACpE,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,aAAa;AAC/B;AAEO,SAAS,mBAAmB,IAAY;AACvC,QAAA,aAAa,sBAAsB,EAAE;AAC3C,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B;AAClB,aAAA,WACJ,IAAI,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK,CAAC,MAAY,EAAE,OAAO,EAAE,MAAM,CAAC,EAChE,OAAO,CAAC,MAAiB,MAAM,IAAI;AAAA,IACxC;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAEb,SAAO,SAAS,mBAAmB;AACrC;AAEO,SAAS,kBAA2B,IAAY;AACrD,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,EAC7B,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,IAAI,KAAK,CAAC;AACvB;AAEO,SAAS,mBAA4B,IAAY;AACtD,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,EAC7B,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,IAAI,KAAK,CAAC;AACvB;"}
+{"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  Node,\n  Edge,\n  ReactFlowState,\n  useStore,\n  useNodes,\n  useEdges,\n  useReactFlow,\n  useNodeId,\n} from \"reactflow\";\n\nexport function useFlowNode<T extends Node = Node>(id: string) {\n  const nodeSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.getNodes().find((n: Node): n is T => n.id === id),\n    [id]\n  );\n  return useStore<T | undefined>(nodeSelector);\n}\n\nexport function useFlowNodeInputEdges(id: string) {\n  const inputEdgesSelector = useCallback(\n    (state: ReactFlowState) => state.edges.filter((e: Edge) => e.target === id),\n    [id]\n  );\n  return useStore(inputEdgesSelector);\n}\n\nexport function useFlowNodeOutputEdges(id: string) {\n  const outputEdgesSelector = useCallback(\n    (state: ReactFlowState) => state.edges.filter((e: Edge) => e.source === id),\n    [id]\n  );\n  return useStore(outputEdgesSelector);\n}\n\nexport function useFlowNodeEdges(id: string) {\n  const edgesSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.edges.filter((e: Edge) => e.source === id || e.target === id),\n    [id]\n  );\n  return useStore(edgesSelector);\n}\n\nexport function useFlowNodeParents(id: string) {\n  const inputEdges = useFlowNodeInputEdges(id);\n  const parentNodesSelector = useCallback(\n    (state: ReactFlowState) => {\n      return inputEdges\n        .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n        .filter((n): n is Node => n !== null);\n    },\n    [inputEdges]\n  );\n  return useStore(parentNodesSelector);\n}\n\nexport function useFlowInputNodes<T = any>(id: string) {\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.target === id)\n      .map((e) => nodes.find((n) => n.id === e.source))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, id, nodes]);\n}\n\nexport function useFlowOutputNodes<T = any>(id: string) {\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.source === id)\n      .map((e) => nodes.find((n) => n.id === e.target))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, id, nodes]);\n}\n\n/** Utilities to manipulate a node in the flow */\nexport function useFlowNodeUtils() {\n  const nodeId = useNodeId();\n  const reactFlowInstance = useReactFlow();\n\n  /** Mutate the node's `.data` object */\n  const setNodeData = useCallback(\n    (setNewData: (newData?: any) => any) => {\n      if (!nodeId) return;\n\n      reactFlowInstance.setNodes((nodes) => {\n        return nodes.map((n) => {\n          if (n.id === nodeId) {\n            return { ...n, data: setNewData(n.data) };\n          }\n          return n;\n        });\n      });\n    },\n    [nodeId, reactFlowInstance]\n  );\n\n  return useMemo(\n    () => ({\n      setNodeData,\n    }),\n    [setNodeData]\n  );\n}\n"],"names":[],"mappings":";;AAYO,SAAS,YAAmC,IAAY;AAC7D,QAAM,eAAe;AAAA,IACnB,CAAC,UACC,MAAM,WAAW,KAAK,CAAC,MAAoB,EAAE,OAAO,EAAE;AAAA,IACxD,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAwB,YAAY;AAC7C;AAEO,SAAS,sBAAsB,IAAY;AAChD,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAA0B,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,EAAE;AAAA,IAC1E,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,kBAAkB;AACpC;AAEO,SAAS,uBAAuB,IAAY;AACjD,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,EAAE;AAAA,IAC1E,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,mBAAmB;AACrC;AAEO,SAAS,iBAAiB,IAAY;AAC3C,QAAM,gBAAgB;AAAA,IACpB,CAAC,UACC,MAAM,MAAM,OAAO,CAAC,MAAY,EAAE,WAAW,MAAM,EAAE,WAAW,EAAE;AAAA,IACpE,CAAC,EAAE;AAAA,EAAA;AAEL,SAAO,SAAS,aAAa;AAC/B;AAEO,SAAS,mBAAmB,IAAY;AACvC,QAAA,aAAa,sBAAsB,EAAE;AAC3C,QAAM,sBAAsB;AAAA,IAC1B,CAAC,UAA0B;AAClB,aAAA,WACJ,IAAI,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK,CAAC,MAAY,EAAE,OAAO,EAAE,MAAM,CAAC,EAChE,OAAO,CAAC,MAAiB,MAAM,IAAI;AAAA,IACxC;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAEb,SAAO,SAAS,mBAAmB;AACrC;AAEO,SAAS,kBAA2B,IAAY;AACrD,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,EAC7B,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,IAAI,KAAK,CAAC;AACvB;AAEO,SAAS,mBAA4B,IAAY;AACtD,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO,QAAQ,MAAM;AACZ,WAAA,MACJ,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,EAC7B,IAAI,CAAC,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/C,OAAO,CAAC,MAAoB,MAAM,IAAI;AAAA,EACxC,GAAA,CAAC,OAAO,IAAI,KAAK,CAAC;AACvB;AAGO,SAAS,mBAAmB;AACjC,QAAM,SAAS;AACf,QAAM,oBAAoB;AAG1B,QAAM,cAAc;AAAA,IAClB,CAAC,eAAuC;AACtC,UAAI,CAAC;AAAQ;AAEK,wBAAA,SAAS,CAAC,UAAU;AAC7B,eAAA,MAAM,IAAI,CAAC,MAAM;AAClB,cAAA,EAAE,OAAO,QAAQ;AACnB,mBAAO,EAAE,GAAG,GAAG,MAAM,WAAW,EAAE,IAAI;UACxC;AACO,iBAAA;AAAA,QAAA,CACR;AAAA,MAAA,CACF;AAAA,IACH;AAAA,IACA,CAAC,QAAQ,iBAAiB;AAAA,EAAA;AAGrB,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,IAAA;AAAA,IAEF,CAAC,WAAW;AAAA,EAAA;AAEhB;"}

package/dist/esm/index.js

@@ -1,36 +1,42 @@
-import { staticClasses } from "./Dashboard/Dashboard.styles.js";
+import { staticClasses } from "./Blade/Blade.styles.js";
+import { HvBlade } from "./Blade/Blade.js";
+import { staticClasses as staticClasses2 } from "./Blades/Blades.styles.js";
+import { HvBlades } from "./Blades/Blades.js";
+import { staticClasses as staticClasses3 } from "./Dashboard/Dashboard.styles.js";
 import { HvDashboard } from "./Dashboard/Dashboard.js";
-import { staticClasses as staticClasses2 } from "./Flow/Flow.styles.js";
+import { staticClasses as staticClasses4 } from "./Flow/Flow.styles.js";
 import { HvFlowBackground } from "./Flow/Background/Background.js";
 import { HvFlowControls } from "./Flow/Controls/Controls.js";
-import { staticClasses as staticClasses3 } from "./Flow/Minimap/Minimap.styles.js";
+import { staticClasses as staticClasses5 } from "./Flow/Minimap/Minimap.styles.js";
 import { HvFlowMinimap } from "./Flow/Minimap/Minimap.js";
-import { staticClasses as staticClasses4 } from "./Flow/Sidebar/Sidebar.styles.js";
+import { staticClasses as staticClasses6 } from "./Flow/Sidebar/Sidebar.styles.js";
 import { HvFlowSidebar } from "./Flow/Sidebar/Sidebar.js";
 import { HvFlowEmpty } from "./Flow/Empty/Empty.js";
 import { HvFlow } from "./Flow/Flow.js";
-import { staticClasses as staticClasses5 } from "./Flow/Node/BaseNode.styles.js";
+import { staticClasses as staticClasses7 } from "./Flow/Node/BaseNode.styles.js";
 import { HvFlowBaseNode } from "./Flow/Node/BaseNode.js";
-import { staticClasses as staticClasses6 } from "./Flow/Node/Node.styles.js";
+import { staticClasses as staticClasses8 } from "./Flow/Node/Node.styles.js";
 import { HvFlowNode } from "./Flow/Node/Node.js";
 import { HvDashboardNode, hvDashboardNodeClasses } from "./Flow/nodes/DashboardNode.js";
-import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeParents, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
+import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeParents, useFlowNodeUtils, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
 import { useFlowContext } from "./Flow/hooks/useFlowContext.js";
 import { useFlowNodeMeta } from "./Flow/hooks/useFlowNodeMeta.js";
-import { staticClasses as staticClasses7 } from "./StepNavigation/StepNavigation.styles.js";
+import { staticClasses as staticClasses9 } from "./StepNavigation/StepNavigation.styles.js";
 import { HvStepNavigation } from "./StepNavigation/StepNavigation.js";
-import { staticClasses as staticClasses8 } from "./Wizard/Wizard.styles.js";
+import { staticClasses as staticClasses10 } from "./Wizard/Wizard.styles.js";
 import { HvWizard } from "./Wizard/Wizard.js";
-import { staticClasses as staticClasses9 } from "./Wizard/WizardActions/WizardActions.styles.js";
+import { staticClasses as staticClasses11 } from "./Wizard/WizardActions/WizardActions.styles.js";
 import { HvWizardActions } from "./Wizard/WizardActions/WizardActions.js";
-import { staticClasses as staticClasses10 } from "./Wizard/WizardContainer/WizardContainer.styles.js";
+import { staticClasses as staticClasses12 } from "./Wizard/WizardContainer/WizardContainer.styles.js";
 import { HvWizardContainer } from "./Wizard/WizardContainer/WizardContainer.js";
-import { staticClasses as staticClasses11 } from "./Wizard/WizardContent/WizardContent.styles.js";
+import { staticClasses as staticClasses13 } from "./Wizard/WizardContent/WizardContent.styles.js";
 import { HvWizardContent } from "./Wizard/WizardContent/WizardContent.js";
 import { default as default2 } from "./Wizard/WizardContext/WizardContext.js";
-import { staticClasses as staticClasses12 } from "./Wizard/WizardTitle/WizardTitle.styles.js";
+import { staticClasses as staticClasses14 } from "./Wizard/WizardTitle/WizardTitle.styles.js";
 import { HvWizardTitle } from "./Wizard/WizardTitle/WizardTitle.js";
 export {
+  HvBlade,
+  HvBlades,
   HvDashboard,
   HvDashboardNode,
   HvFlow,
@@ -48,14 +54,16 @@ export {
   HvWizardContent,
   default2 as HvWizardContext,
   HvWizardTitle,
-  staticClasses as dashboardClasses,
-  staticClasses5 as flowBaseNodeClasses,
-  staticClasses2 as flowClasses,
-  staticClasses3 as flowMinimapClasses,
-  staticClasses6 as flowNodeClasses,
-  staticClasses4 as flowSidebarClasses,
+  staticClasses as bladeClasses,
+  staticClasses2 as bladesClasses,
+  staticClasses3 as dashboardClasses,
+  staticClasses7 as flowBaseNodeClasses,
+  staticClasses4 as flowClasses,
+  staticClasses5 as flowMinimapClasses,
+  staticClasses8 as flowNodeClasses,
+  staticClasses6 as flowSidebarClasses,
   hvDashboardNodeClasses,
-  staticClasses7 as stepNavigationClasses,
+  staticClasses9 as stepNavigationClasses,
   useFlowContext,
   useFlowInputNodes,
   useFlowNode,
@@ -64,11 +72,12 @@ export {
   useFlowNodeMeta,
   useFlowNodeOutputEdges,
   useFlowNodeParents,
+  useFlowNodeUtils,
   useFlowOutputNodes,
-  staticClasses9 as wizardActionsClasses,
-  staticClasses8 as wizardClasses,
-  staticClasses10 as wizardContainerClasses,
-  staticClasses11 as wizardContentClasses,
-  staticClasses12 as wizardTitleClasses
+  staticClasses11 as wizardActionsClasses,
+  staticClasses10 as wizardClasses,
+  staticClasses12 as wizardContainerClasses,
+  staticClasses13 as wizardContentClasses,
+  staticClasses14 as wizardTitleClasses
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}