@hitachivantara/uikit-react-lab 5.5.5 → 5.7.0

package/dist/esm/components/Flow/Node/Node.styles.js

@@ -0,0 +1,97 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvFlowNode", {
+  root: {
+    borderRadius: theme.radii.round,
+    backgroundColor: theme.colors.atmo1,
+    boxShadow: theme.colors.shadow,
+    minWidth: "250px"
+  },
+  headerContainer: {
+    padding: theme.spacing(0.5, 1),
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  groupContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  group: {
+    color: theme.colors.base_dark
+  },
+  titleContainer: {
+    padding: theme.spacing(theme.space.xs, theme.space.xs, theme.space.xs, theme.space.sm),
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  actions: {
+    display: "flex",
+    alignItems: "center"
+  },
+  inputsTitleContainer: {
+    display: "flex",
+    justifyContent: "center",
+    padding: theme.space.xs,
+    backgroundColor: theme.colors.atmo2,
+    borderTop: `1px solid ${theme.colors.atmo4}`,
+    borderBottom: `1px solid ${theme.colors.atmo4}`
+  },
+  outputsTitleContainer: {
+    display: "flex",
+    justifyContent: "center",
+    padding: theme.space.xs,
+    backgroundColor: theme.colors.atmo2,
+    borderTop: `1px solid ${theme.colors.atmo4}`,
+    borderBottom: `1px solid ${theme.colors.atmo4}`
+  },
+  inputsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.space.sm,
+    gap: theme.space.xs,
+    alignItems: "flex-start"
+  },
+  outputsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.space.sm,
+    gap: theme.space.xs,
+    alignItems: "flex-end"
+  },
+  paramsContainer: {
+    borderTop: `1px solid ${theme.colors.atmo4}`,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.space.xs,
+    padding: theme.space.sm
+  },
+  inputContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  outputContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  mandatory: {
+    width: 10,
+    height: 10,
+    margin: theme.spacing(0, theme.space.xs),
+    borderRadius: theme.radii.circle,
+    backgroundColor: theme.colors.negative_20
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Node.styles.js.map

package/dist/esm/components/Flow/Node/Node.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.styles.js","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  groupContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  group: {\n    color: theme.colors.base_dark,\n  },\n  titleContainer: {\n    padding: theme.spacing(\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.sm\n    ),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  inputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  outputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  inputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  paramsContainer: {\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    padding: theme.space.sm,\n  },\n  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","groupContainer","group","color","base_dark","titleContainer","space","xs","sm","actions","inputsTitleContainer","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","inputsContainer","gap","outputsContainer","paramsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJC,cAAcC,MAAMC,MAAMC;AAAAA,IAC1BC,iBAAiBH,MAAMI,OAAOC;AAAAA,IAC9BC,WAAWN,MAAMI,OAAOG;AAAAA,IACxBC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,SAASV,MAAMW,QAAQ,KAAK,CAAC;AAAA,IAC7BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,gBAAgB;AAAA,IACdJ,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAE,OAAO;AAAA,IACLC,OAAOlB,MAAMI,OAAOe;AAAAA,EACtB;AAAA,EACAC,gBAAgB;AAAA,IACdV,SAASV,MAAMW,QACbX,MAAMqB,MAAMC,IACZtB,MAAMqB,MAAMC,IACZtB,MAAMqB,MAAMC,IACZtB,MAAMqB,MAAME,EACd;AAAA,IACAX,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAS,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTG,YAAY;AAAA,EACd;AAAA,EACAU,sBAAsB;AAAA,IACpBb,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMqB,MAAMC;AAAAA,IACrBnB,iBAAiBH,MAAMI,OAAOsB;AAAAA,IAC9BC,WAAY,aAAY3B,MAAMI,OAAOwB,KAAM;AAAA,IAC3CC,cAAe,aAAY7B,MAAMI,OAAOwB,KAAM;AAAA,EAChD;AAAA,EACAE,uBAAuB;AAAA,IACrBlB,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMqB,MAAMC;AAAAA,IACrBnB,iBAAiBH,MAAMI,OAAOsB;AAAAA,IAC9BC,WAAY,aAAY3B,MAAMI,OAAOwB,KAAM;AAAA,IAC3CC,cAAe,aAAY7B,MAAMI,OAAOwB,KAAM;AAAA,EAChD;AAAA,EACAG,iBAAiB;AAAA,IACfnB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMqB,MAAME;AAAAA,IACrBS,KAAKhC,MAAMqB,MAAMC;AAAAA,IACjBP,YAAY;AAAA,EACd;AAAA,EACAkB,kBAAkB;AAAA,IAChBrB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMqB,MAAME;AAAAA,IACrBS,KAAKhC,MAAMqB,MAAMC;AAAAA,IACjBP,YAAY;AAAA,EACd;AAAA,EACAmB,iBAAiB;AAAA,IACfP,WAAY,aAAY3B,MAAMI,OAAOwB,KAAM;AAAA,IAC3ChB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfmB,KAAKhC,MAAMqB,MAAMC;AAAAA,IACjBZ,SAASV,MAAMqB,MAAME;AAAAA,EACvB;AAAA,EACAY,gBAAgB;AAAA,IACdvB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAqB,iBAAiB;AAAA,IACfxB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAsB,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,QAAQxC,MAAMW,QAAQ,GAAGX,MAAMqB,MAAMC,EAAE;AAAA,IACvCvB,cAAcC,MAAMC,MAAMwC;AAAAA,IAC1BtC,iBAAiBH,MAAMI,OAAOsC;AAAAA,EAChC;AACF,CAAC;"}

package/dist/esm/components/Flow/Node/Parameters/ParamRenderer.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import Text from "./Text.js";
+import Select from "./Select.js";
+const renderers = {
+  text: Text,
+  select: Select
+};
+const ParamRenderer = ({
+  nodeId,
+  params,
+  data
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: params.map((param, idx) => {
+    const Renderer = renderers[param.type];
+    if (Renderer) {
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { children: param.label }),
+        /* @__PURE__ */ jsx(Renderer, { nodeId, param, data })
+      ] }, idx);
+    }
+    return null;
+  }) });
+};
+const ParamRenderer$1 = ParamRenderer;
+export {
+  ParamRenderer$1 as default
+};
+//# sourceMappingURL=ParamRenderer.js.map

package/dist/esm/components/Flow/Node/Parameters/ParamRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParamRenderer.js","sources":["../../../../../../src/components/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Text from \"./Text\";\nimport Select from \"./Select\";\n\nexport type ParamRendererProps = {\n  nodeId: string;\n  params: HvFlowNodeParam[];\n  data: any;\n};\n\nconst renderers = {\n  text: Text,\n  select: Select,\n};\n\nconst ParamRenderer = ({ nodeId, params, data }: ParamRendererProps) => {\n  return (\n    <>\n      {params.map((param, idx) => {\n        const Renderer = renderers[param.type];\n        if (Renderer) {\n          return (\n            <div key={idx}>\n              <span>{param.label}</span>\n              <Renderer nodeId={nodeId} param={param} data={data} />\n            </div>\n          );\n        }\n        return null;\n      })}\n    </>\n  );\n};\n\nexport default ParamRenderer;\n"],"names":["renderers","text","Text","select","Select","ParamRenderer","nodeId","params","data","map","param","idx","Renderer","type","label"],"mappings":";;;AAUA,MAAMA,YAAY;AAAA,EAChBC,MAAMC;AAAAA,EACNC,QAAQC;AACV;AAEA,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAQC;AAAyB,MAAM;AACtE,SAEKD,oBAAAA,UAAAA,EAAAA,UAAAA,OAAOE,IAAI,CAACC,OAAOC,QAAQ;AACpBC,UAAAA,WAAWZ,UAAUU,MAAMG,IAAI;AACrC,QAAID,UAAU;AACZ,kCACG,OACC,EAAA,UAAA;AAAA,QAAC,oBAAA,QAAA,EAAMF,gBAAMI,MAAM,CAAA;AAAA,QAClB,oBAAA,UAAA,EAAS,QAAgB,OAAc,KAAW,CAAA;AAAA,MAAA,EAAA,GAF3CH,GAGV;AAAA,IAEJ;AACO,WAAA;AAAA,EACR,CAAA,EACH,CAAA;AAEJ;AAEA,MAAA,kBAAeN;"}

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

@@ -0,0 +1,39 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvDropdown } from "@hitachivantara/uikit-react-core";
+import { useState } from "react";
+import { useReactFlow } from "reactflow";
+const Select = ({
+  nodeId,
+  param,
+  data
+}) => {
+  var _a;
+  const reactFlowInstance = useReactFlow();
+  const [option, setOption] = useState(data[param.id]);
+  const onSelectChange = (item) => {
+    const nodes = reactFlowInstance.getNodes();
+    const newNodes = nodes.map((node) => {
+      if (node.id === nodeId) {
+        node.data = {
+          ...node.data,
+          [param.id]: item.label
+        };
+      }
+      return node;
+    });
+    reactFlowInstance.setNodes(newNodes);
+    setOption(item.label);
+  };
+  return /* @__PURE__ */ jsx(HvDropdown, { values: (_a = param.options) == null ? void 0 : _a.map((o) => {
+    return {
+      id: o,
+      label: o,
+      selected: o === option
+    };
+  }), onChange: (item) => onSelectChange(item) });
+};
+const Select$1 = Select;
+export {
+  Select$1 as default
+};
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../../../src/components/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { HvDropdown } from \"@hitachivantara/uikit-react-core\";\nimport { useState } from \"react\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Select = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [option, setOption] = useState(data[param.id]);\n\n  const onSelectChange = (item) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: item.label };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setOption(item.label);\n  };\n\n  return (\n    <HvDropdown\n      values={param.options?.map((o) => {\n        return { id: o, label: o, selected: o === option };\n      })}\n      onChange={(item) => onSelectChange(item)}\n    />\n  );\n};\n\nexport default Select;\n"],"names":["Select","nodeId","param","data","reactFlowInstance","useReactFlow","option","setOption","useState","id","onSelectChange","item","nodes","getNodes","newNodes","map","node","label","setNodes","options","o","selected"],"mappings":";;;;AAIA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;;AAC1C,QAAMC,oBAAoBC;AACpB,QAAA,CAACC,QAAQC,SAAS,IAAIC,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAEnD,QAAMC,iBAAkBC,CAAS,SAAA;AACzBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE,KAAKM;AAAAA,QAAAA;AAAAA,MAC/C;AACOD,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBc,SAASJ,QAAQ;AACnCP,cAAUI,KAAKM,KAAK;AAAA,EAAA;AAGtB,6BACG,YACC,EAAA,SAAQf,WAAMiB,YAANjB,mBAAea,IAAKK,CAAM,MAAA;AACzB,WAAA;AAAA,MAAEX,IAAIW;AAAAA,MAAGH,OAAOG;AAAAA,MAAGC,UAAUD,MAAMd;AAAAA,IAAAA;AAAAA,EAAO,IAEnD,UAAWK,CAASD,SAAAA,eAAeC,IAAI,EACvC,CAAA;AAEN;AAEA,MAAA,WAAeX;"}

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

@@ -0,0 +1,32 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvInput } from "@hitachivantara/uikit-react-core";
+import { useState } from "react";
+import { useReactFlow } from "reactflow";
+const Text = ({
+  nodeId,
+  param,
+  data
+}) => {
+  const reactFlowInstance = useReactFlow();
+  const [text, setText] = useState(data[param.id]);
+  const onTextChange = (val) => {
+    const nodes = reactFlowInstance.getNodes();
+    const newNodes = nodes.map((node) => {
+      if (node.id === nodeId) {
+        node.data = {
+          ...node.data,
+          [param.id]: val
+        };
+      }
+      return node;
+    });
+    reactFlowInstance.setNodes(newNodes);
+    setText(val);
+  };
+  return /* @__PURE__ */ jsx(HvInput, { value: text, onChange: (evt, val) => onTextChange(val) });
+};
+const Text$1 = Text;
+export {
+  Text$1 as default
+};
+//# sourceMappingURL=Text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../../../../src/components/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { HvInput } from \"@hitachivantara/uikit-react-core\";\nimport { useState } from \"react\";\nimport { useReactFlow } from \"reactflow\";\n\nconst Text = ({ nodeId, param, data }) => {\n  const reactFlowInstance = useReactFlow();\n  const [text, setText] = useState(data[param.id]);\n\n  const onTextChange = (val) => {\n    const nodes = reactFlowInstance.getNodes();\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [param.id]: val };\n      }\n      return node;\n    });\n    reactFlowInstance.setNodes(newNodes);\n    setText(val);\n  };\n\n  return <HvInput value={text} onChange={(evt, val) => onTextChange(val)} />;\n};\n\nexport default Text;\n"],"names":["Text","nodeId","param","data","reactFlowInstance","useReactFlow","text","setText","useState","id","onTextChange","val","nodes","getNodes","newNodes","map","node","setNodes","evt"],"mappings":";;;;AAIA,MAAMA,OAAOA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAK,MAAM;AACxC,QAAMC,oBAAoBC;AACpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,SAASL,KAAKD,MAAMO,EAAE,CAAC;AAE/C,QAAMC,eAAgBC,CAAQ,QAAA;AACtBC,UAAAA,QAAQR,kBAAkBS;AAC1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKP,OAAOR,QAAQ;AACtBe,aAAKb,OAAO;AAAA,UAAE,GAAGa,KAAKb;AAAAA,UAAM,CAACD,MAAMO,EAAE,GAAGE;AAAAA,QAAAA;AAAAA,MAC1C;AACOK,aAAAA;AAAAA,IAAAA,CACR;AACDZ,sBAAkBa,SAASH,QAAQ;AACnCP,YAAQI,GAAG;AAAA,EAAA;AAGN,SAAA,oBAAC,SAAQ,EAAA,OAAOL,MAAM,UAAU,CAACY,KAAKP,QAAQD,aAAaC,GAAG,EAAK,CAAA;AAC5E;AAEA,MAAA,SAAeX;"}

package/dist/esm/index.js

@@ -19,11 +19,14 @@ import { HvFlowMinimap } from "./components/Flow/Minimap/Minimap.js";
 import { staticClasses as staticClasses9 } from "./components/Flow/Sidebar/Sidebar.styles.js";
 import { HvFlowSidebar } from "./components/Flow/Sidebar/Sidebar.js";
 import { HvFlow } from "./components/Flow/Flow.js";
+import { staticClasses as staticClasses10 } from "./components/Flow/Node/Node.styles.js";
+import { HvFlowNode } from "./components/Flow/Node/Node.js";
 export {
   HvFlow,
   HvFlowBackground,
   HvFlowControls,
   HvFlowMinimap,
+  HvFlowNode,
   HvFlowSidebar,
   HvStepNavigation,
   HvWizard,
@@ -34,6 +37,7 @@ export {
   HvWizardTitle,
   staticClasses7 as flowClasses,
   staticClasses8 as flowMinimapClasses,
+  staticClasses10 as flowNodeClasses,
   staticClasses9 as flowSidebarClasses,
   staticClasses as stepNavigationClasses,
   staticClasses3 as wizardActionsClasses,

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":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -8,6 +8,8 @@ import { Edge } from 'reactflow';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
 import { FunctionComponent } from 'react';
 import { GetMiniMapNodeAttribute } from 'reactflow';
+import { HvActionGeneric } from '@hitachivantara/uikit-react-core';
+import { HvActionsGenericProps } from '@hitachivantara/uikit-react-core';
 import { HvAvatarSize } from '@hitachivantara/uikit-react-core';
 import { HvBaseProps } from '@hitachivantara/uikit-react-core';
 import { HvBreakpoints } from '@hitachivantara/uikit-react-core';
@@ -33,6 +35,23 @@ export declare const flowMinimapClasses: {
     root: "HvFlowMinimap-root";
 };
 
+export declare const flowNodeClasses: {
+    root: "HvFlowNode-root";
+    group: "HvFlowNode-group";
+    mandatory: "HvFlowNode-mandatory";
+    actions: "HvFlowNode-actions";
+    titleContainer: "HvFlowNode-titleContainer";
+    headerContainer: "HvFlowNode-headerContainer";
+    groupContainer: "HvFlowNode-groupContainer";
+    inputsTitleContainer: "HvFlowNode-inputsTitleContainer";
+    outputsTitleContainer: "HvFlowNode-outputsTitleContainer";
+    inputsContainer: "HvFlowNode-inputsContainer";
+    outputsContainer: "HvFlowNode-outputsContainer";
+    paramsContainer: "HvFlowNode-paramsContainer";
+    inputContainer: "HvFlowNode-inputContainer";
+    outputContainer: "HvFlowNode-outputContainer";
+};
+
 export declare const flowSidebarClasses: {
     description: "HvFlowSidebar-description";
     titleContainer: "HvFlowSidebar-titleContainer";
@@ -46,13 +65,13 @@ declare interface HvDroppableFlowProps<NodeData = any, NodeType extends string |
     /** Flow content: background, controls, and minimap. */
     children?: React.ReactNode;
     /** Flow nodes. */
-    nodes?: HvFlowNode<NodeData, NodeType>[];
+    nodes?: Node_2<NodeData, NodeType>[];
     /** Flow edges. */
-    edges?: HvFlowEdge[];
+    edges?: Edge[];
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvFlowClasses;
     /** Function called when the flow changes. Returns the updated nodes and edges. */
-    onFlowChange?: (nodes: HvFlowNode<NodeData, NodeType>[], edges: HvFlowEdge[]) => void;
+    onFlowChange?: (nodes: Node_2<NodeData, NodeType>[], edges: Edge[]) => void;
 }
 
 /**
@@ -63,7 +82,7 @@ declare interface HvDroppableFlowProps<NodeData = any, NodeType extends string |
  *
  * DISCLAIMER: This component is a work in progress and there might be breaking changes.
  */
-export declare const HvFlow: ({ nodeTypes, nodeGroups, sidebar, dndContextProps, ...others }: HvFlowProps) => JSX_2.Element;
+export declare const HvFlow: ({ nodeTypes, nodeGroups, sidebar, defaultActions, dndContextProps, ...others }: HvFlowProps) => JSX_2.Element;
 
 export declare const HvFlowBackground: ({ color, ...others }: HvFlowBackgroundProps) => JSX_2.Element;
 
@@ -98,9 +117,6 @@ export declare interface HvFlowControlsProps extends Omit<ControlProps, "positio
     hideInteractive?: boolean;
 }
 
-/** Edge */
-export declare type HvFlowEdge = Edge;
-
 export declare const HvFlowMinimap: ({ nodeColor, maskColor, maskStrokeColor, nodeStrokeColor, classes: classesProp, className, ...others }: HvFlowMinimapProps) => JSX_2.Element;
 
 export declare type HvFlowMinimapClasses = ExtractNames<typeof useClasses_9>;
@@ -118,15 +134,13 @@ export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMap
     classes?: HvFlowMinimapClasses;
 }
 
-/** Node */
-export declare type HvFlowNode<NodeData = any, NodeType extends string | undefined = string | undefined> = Node_2<NodeData, NodeType>;
+export declare const HvFlowNode: ({ id, type, description, expanded, params, actions, actionCallback, maxVisibleActions, classes: classesProp, className, }: HvFlowNodeProps) => JSX_2.Element | null;
+
+export declare type HvFlowNodeClasses = ExtractNames<typeof useClasses_11>;
 
 export declare interface HvFlowNodeComponentClass<GroupId extends keyof any = string> extends ComponentClass<NodeProps> {
     /** Metadata used on the HvFlowSidebar component to group the node */
-    meta?: {
-        groupId: GroupId;
-        label: string;
-    };
+    meta?: HvFlowNodeMeta<GroupId>;
 }
 
 export declare type HvFlowNodeComponentType<GroupId extends keyof any = string> = HvFlowNodeComponentClass<GroupId> | HvFlowNodeFunctionComponent<GroupId>;
@@ -134,10 +148,7 @@ export declare type HvFlowNodeComponentType<GroupId extends keyof any = string>
 /** Node types */
 export declare interface HvFlowNodeFunctionComponent<GroupId extends keyof any = string> extends FunctionComponent<NodeProps> {
     /** Metadata used on the HvFlowSidebar component to group the node */
-    meta?: {
-        groupId: GroupId;
-        label: string;
-    };
+    meta?: HvFlowNodeMeta<GroupId>;
 }
 
 /** Node groups */
@@ -150,6 +161,54 @@ export declare interface HvFlowNodeGroup {
 
 export declare type HvFlowNodeGroups<GroupId extends keyof any = string> = Record<GroupId, HvFlowNodeGroup>;
 
+export declare type HvFlowNodeInput = {
+    label: string;
+    isMandatory?: boolean;
+    accepts?: string[];
+};
+
+export declare type HvFlowNodeMeta<GroupId extends keyof any = string> = {
+    label: string;
+    groupId: GroupId;
+    inputs?: HvFlowNodeInput[];
+    outputs?: HvFlowNodeOutput[];
+};
+
+export declare type HvFlowNodeOutput = {
+    label: string;
+    isMandatory?: boolean;
+    provides?: string[];
+};
+
+export declare type HvFlowNodeParam = {
+    id: string;
+    type: "text" | "select";
+    label: string;
+    options?: string[];
+    value?: string;
+};
+
+export declare interface HvFlowNodeProps extends Omit<HvBaseProps, "id">, NodeProps {
+    /** Node description */
+    description: string;
+    /** Node expanded */
+    expanded?: boolean;
+    /** Node inputs */
+    inputs?: HvFlowNodeInput[];
+    /** Node outputs */
+    outputs?: HvFlowNodeOutput[];
+    /** Node parameters */
+    params?: HvFlowNodeParam[];
+    /** Node actions */
+    actions?: HvActionGeneric[];
+    /** Node action callback */
+    actionCallback?: HvActionsGenericProps["actionsCallback"];
+    /** Node maximum number of actions visible */
+    maxVisibleActions?: number;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvFlowNodeClasses;
+}
+
 export declare type HvFlowNodeTypes<GroupId extends keyof any = string> = {
     [key: string]: HvFlowNodeComponentType<GroupId>;
 };
@@ -161,6 +220,8 @@ export declare interface HvFlowProps<NodeData = any, NodeType extends string | u
     nodeTypes?: HvFlowNodeTypes<NodeGroups>;
     /** Flow sidebar. */
     sidebar?: React.ReactNode;
+    /** Flow default actions. */
+    defaultActions?: HvActionGeneric[];
     /**
      * Dnd Kit context props. This should be used for accessibility purposes.
      *
@@ -429,6 +490,30 @@ declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titl
     cx: (...args: any) => string;
 };
 
+declare const useClasses_11: (classesProp?: Partial<Record<"root" | "group" | "mandatory" | "actions" | "titleContainer" | "headerContainer" | "groupContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "paramsContainer" | "inputContainer" | "outputContainer", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+        group: string;
+        mandatory: string;
+        actions: string;
+        titleContainer: string;
+        headerContainer: string;
+        groupContainer: string;
+        inputsTitleContainer: string;
+        outputsTitleContainer: string;
+        inputsContainer: string;
+        outputsContainer: string;
+        paramsContainer: string;
+        inputContainer: string;
+        outputContainer: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
 declare const useClasses_2: (classesProp?: Partial<Record<"xl" | "lg" | "md" | "sm" | "xs" | "root" | "ghost" | "avatar" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
     classes: {
         xl: string;
@@ -474,13 +559,13 @@ declare const useClasses_4: (classesProp?: Partial<Record<"buttonWidth" | "actio
     cx: (...args: any) => string;
 };
 
-declare const useClasses_5: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "buttonWidth" | "rootSummaryButton" | "headerContainer" | "stepContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_5: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "headerContainer" | "buttonWidth" | "rootSummaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
     classes: {
         titleContainer: string;
         messageContainer: string;
+        headerContainer: string;
         buttonWidth: string;
         rootSummaryButton: string;
-        headerContainer: string;
         stepContainer: string;
     };
     css: {
@@ -568,9 +653,9 @@ export declare const wizardContentClasses: {
 export declare const wizardTitleClasses: {
     titleContainer: "HvWizardTitle-titleContainer";
     messageContainer: "HvWizardTitle-messageContainer";
+    headerContainer: "HvWizardTitle-headerContainer";
     buttonWidth: "HvWizardTitle-buttonWidth";
     rootSummaryButton: "HvWizardTitle-rootSummaryButton";
-    headerContainer: "HvWizardTitle-headerContainer";
     stepContainer: "HvWizardTitle-stepContainer";
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.5.5",
+  "version": "5.7.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,7 +32,7 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.27.10",
+    "@hitachivantara/uikit-react-core": "^5.28.0",
     "@hitachivantara/uikit-react-icons": "^5.6.7",
     "@hitachivantara/uikit-styles": "^5.12.1",
     "lodash": "^4.17.21",
@@ -48,7 +48,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "18f6e9c22421729de7c70bff66145e4806dd2f0d",
+  "gitHead": "f1d113e5f993a61c1a2a2733001ac2f70b8ede56",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {