@hitachivantara/uikit-react-lab 5.16.5 → 5.18.0

package/dist/cjs/components/Dashboard/Dashboard.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const react = require("@emotion/react");
+const reactGridLayout = require("react-grid-layout");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const Dashboard_styles = require("./Dashboard.styles.cjs");
+const GridLayout = reactGridLayout.WidthProvider(reactGridLayout.Responsive);
+const defaultCols = {
+  xs: 12,
+  sm: 12,
+  md: 12,
+  lg: 12,
+  xl: 12
+};
+const HvDashboard = (props) => {
+  const {
+    children,
+    className,
+    layout,
+    cols: colsProp,
+    layouts: layoutsProp,
+    classes: classesProp,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvDashboard", props);
+  const {
+    classes,
+    cx
+  } = Dashboard_styles.useClasses(classesProp);
+  const {
+    activeTheme
+  } = uikitReactCore.useTheme();
+  const layouts = React.useMemo(() => {
+    if (layoutsProp)
+      return layoutsProp;
+    if (!layout)
+      return {};
+    return {
+      xs: layout,
+      sm: layout,
+      md: layout,
+      lg: layout,
+      xl: layout
+    };
+  }, [layoutsProp, layout]);
+  const cols = React.useMemo(() => {
+    if (!colsProp)
+      return defaultCols;
+    if (typeof colsProp === "number") {
+      return {
+        xs: colsProp,
+        sm: colsProp,
+        md: colsProp,
+        lg: colsProp,
+        xl: colsProp
+      };
+    }
+    return colsProp;
+  }, [colsProp]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: Dashboard_styles.gridStyles }),
+    /* @__PURE__ */ jsxRuntime.jsx(GridLayout, { className: cx(classes.root, className), breakpoints: activeTheme?.breakpoints.values, cols, layouts, ...others, children })
+  ] });
+};
+exports.dashboardClasses = Dashboard_styles.staticClasses;
+exports.HvDashboard = HvDashboard;
+//# sourceMappingURL=Dashboard.cjs.map

package/dist/cjs/components/Dashboard/Dashboard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.cjs","sources":["../../../../src/components/Dashboard/Dashboard.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Global } from \"@emotion/react\";\nimport {\n  Responsive as ResponsiveGrid,\n  ResponsiveProps,\n  ReactGridLayoutProps,\n  Layouts,\n  WidthProvider,\n} from \"react-grid-layout\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { gridStyles, staticClasses, useClasses } from \"./Dashboard.styles\";\n\nconst GridLayout = WidthProvider(ResponsiveGrid);\n\n/** Default column breakpoints. For now, use always 12-column */\nconst defaultCols: HvDashboardProps[\"cols\"] = {\n  xs: 12,\n  sm: 12,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport { staticClasses as dashboardClasses };\n\nexport type HvDashboardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardProps extends Omit<ResponsiveProps, \"cols\"> {\n  /** Dashboard items. Each node must be `key`'ed  */\n  children: React.ReactNode;\n  /** An object used to override or extend the styles applied. */\n  classes?: HvDashboardClasses;\n  /**\n   * Layout is an array of object with the format:\n   *\n   * `{i: string, x: number, y: number, w: number, h: number}`\n   *\n   * The `i` must match the key used on each item component.\n   */\n  layout?: ReactGridLayoutProps[\"layout\"];\n  /** Number of grid columns or an object of breakpoint -> #columns */\n  cols?: number | ResponsiveProps[\"cols\"];\n}\n\n/**\n * A Dashboard grid layout component, based on `react-grid-layout`.\n * The children elements are grid items and must be `key`ed.\n *\n * @see https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#grid-layout-props\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvDashboard = (props: HvDashboardProps) => {\n  const {\n    children,\n    className,\n    layout,\n    cols: colsProp,\n    layouts: layoutsProp,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvDashboard\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const layouts = useMemo<Layouts>(() => {\n    if (layoutsProp) return layoutsProp;\n    if (!layout) return {};\n\n    return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };\n  }, [layoutsProp, layout]);\n\n  const cols = useMemo<ResponsiveProps[\"cols\"]>(() => {\n    if (!colsProp) return defaultCols;\n\n    if (typeof colsProp === \"number\") {\n      return {\n        xs: colsProp,\n        sm: colsProp,\n        md: colsProp,\n        lg: colsProp,\n        xl: colsProp,\n      };\n    }\n\n    return colsProp;\n  }, [colsProp]);\n\n  return (\n    <>\n      <Global styles={gridStyles} />\n      <GridLayout\n        className={cx(classes.root, className)}\n        breakpoints={activeTheme?.breakpoints.values}\n        cols={cols}\n        layouts={layouts}\n        {...others}\n      >\n        {children}\n      </GridLayout>\n    </>\n  );\n};\n"],"names":["GridLayout","WidthProvider","ResponsiveGrid","defaultCols","xs","sm","md","lg","xl","HvDashboard","props","children","className","layout","cols","colsProp","layouts","layoutsProp","classes","classesProp","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","useMemo","jsxs","Fragment","jsx","Global","gridStyles","root","breakpoints","values"],"mappings":";;;;;;;;AAiBA,MAAMA,aAAaC,gBAAAA,cAAcC,gBAAAA,UAAc;AAG/C,MAAMC,cAAwC;AAAA,EAC5CC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AA+BaC,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,MAAMC;AAAAA,IACNC,SAASC;AAAAA,IACTC,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,eAAgB,gBAAA,eAAeX,KAAK;AAClC,QAAA;AAAA,IAAEQ;AAAAA,IAASI;AAAAA,EAAAA,IAAOC,iBAAAA,WAAWJ,WAAW;AACxC,QAAA;AAAA,IAAEK;AAAAA,MAAgBC,eAAS,SAAA;AAE3BT,QAAAA,UAAUU,MAAAA,QAAiB,MAAM;AACjCT,QAAAA;AAAoBA,aAAAA;AACxB,QAAI,CAACJ;AAAQ,aAAO;AAEb,WAAA;AAAA,MAAET,IAAIS;AAAAA,MAAQR,IAAIQ;AAAAA,MAAQP,IAAIO;AAAAA,MAAQN,IAAIM;AAAAA,MAAQL,IAAIK;AAAAA,IAAAA;AAAAA,EAAO,GACnE,CAACI,aAAaJ,MAAM,CAAC;AAElBC,QAAAA,OAAOY,MAAAA,QAAiC,MAAM;AAClD,QAAI,CAACX;AAAiBZ,aAAAA;AAElB,QAAA,OAAOY,aAAa,UAAU;AACzB,aAAA;AAAA,QACLX,IAAIW;AAAAA,QACJV,IAAIU;AAAAA,QACJT,IAAIS;AAAAA,QACJR,IAAIQ;AAAAA,QACJP,IAAIO;AAAAA,MAAAA;AAAAA,IAER;AAEOA,WAAAA;AAAAA,EAAAA,GACN,CAACA,QAAQ,CAAC;AAEb,SAEIY,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAACC,2BAAAA,IAAAC,MAAA,QAAA,EAAO,QAAQC,iBAAW,WAAA,CAAA;AAAA,mCAC1B,YACC,EAAA,WAAWT,GAAGJ,QAAQc,MAAMpB,SAAS,GACrC,aAAaY,aAAaS,YAAYC,QACtC,MACA,SACA,GAAId,QAEHT,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/Dashboard/Dashboard.styles.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("@emotion/react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const {
+  staticClasses,
+  useClasses
+} = uikitReactCore.createClasses("HvDashboard", {
+  root: {}
+});
+const gridStyles = /* @__PURE__ */ react.css(".react-grid-layout{position:relative;transition:height 200ms ease;}.react-grid-item{transition:all 200ms ease;transition-property:left,top,width,height;}.react-grid-item img{pointer-events:none;user-select:none;}.react-grid-item.cssTransforms{transition-property:transform,width,height;}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height;}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform;}.react-grid-item.dropping{visibility:hidden;}.react-grid-item.react-grid-placeholder{background:", uikitReactCore.theme.colors.primary_20, ';transition-duration:100ms;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none;}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px;}.react-grid-item>.react-resizable-handle::after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0, 0, 0, 0.4);border-bottom:2px solid rgba(0, 0, 0, 0.4);}.react-resizable-hide>.react-resizable-handle{display:none;}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize;}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize;}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize;}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg);}.react-resizable{position:relative;}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+");background-position:bottom right;padding:0 3px 3px 0;}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg);}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize;}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg);}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg);}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize;}.react-resizable-handle-w{left:0;transform:rotate(135deg);}.react-resizable-handle-e{right:0;transform:rotate(315deg);}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize;}.react-resizable-handle-n{top:0;transform:rotate(225deg);}.react-resizable-handle-s{bottom:0;transform:rotate(45deg);}' + (process.env.NODE_ENV === "production" ? "" : ";label:gridStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9EYXNoYm9hcmQvRGFzaGJvYXJkLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvbGFiL3NyYy9jb21wb25lbnRzL0Rhc2hib2FyZC9EYXNoYm9hcmQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBjcmVhdGVDbGFzc2VzLCB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtY29yZVwiO1xuXG5leHBvcnQgY29uc3QgeyBzdGF0aWNDbGFzc2VzLCB1c2VDbGFzc2VzIH0gPSBjcmVhdGVDbGFzc2VzKFwiSHZEYXNoYm9hcmRcIiwge1xuICByb290OiB7fSxcbn0pO1xuXG5leHBvcnQgY29uc3QgZ3JpZFN0eWxlcyA9IGNzc2BcbiAgLnJlYWN0LWdyaWQtbGF5b3V0IHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgdHJhbnNpdGlvbjogaGVpZ2h0IDIwMG1zIGVhc2U7XG4gIH1cbiAgLnJlYWN0LWdyaWQtaXRlbSB7XG4gICAgdHJhbnNpdGlvbjogYWxsIDIwMG1zIGVhc2U7XG4gICAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogbGVmdCwgdG9wLCB3aWR0aCwgaGVpZ2h0O1xuICB9XG4gIC5yZWFjdC1ncmlkLWl0ZW0gaW1nIHtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtLmNzc1RyYW5zZm9ybXMge1xuICAgIHRyYW5zaXRpb24tcHJvcGVydHk6IHRyYW5zZm9ybSwgd2lkdGgsIGhlaWdodDtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtLnJlc2l6aW5nIHtcbiAgICB0cmFuc2l0aW9uOiBub25lO1xuICAgIHotaW5kZXg6IDE7XG4gICAgd2lsbC1jaGFuZ2U6IHdpZHRoLCBoZWlnaHQ7XG4gIH1cblxuICAucmVhY3QtZ3JpZC1pdGVtLnJlYWN0LWRyYWdnYWJsZS1kcmFnZ2luZyB7XG4gICAgdHJhbnNpdGlvbjogbm9uZTtcbiAgICB6LWluZGV4OiAzO1xuICAgIHdpbGwtY2hhbmdlOiB0cmFuc2Zvcm07XG4gIH1cblxuICAucmVhY3QtZ3JpZC1pdGVtLmRyb3BwaW5nIHtcbiAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gIH1cblxuICAucmVhY3QtZ3JpZC1pdGVtLnJlYWN0LWdyaWQtcGxhY2Vob2xkZXIge1xuICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnByaW1hcnlfMjB9O1xuICAgIHRyYW5zaXRpb24tZHVyYXRpb246IDEwMG1zO1xuICAgIHotaW5kZXg6IDI7XG4gICAgLXdlYmtpdC11c2VyLXNlbGVjdDogbm9uZTtcbiAgICAtbW96LXVzZXItc2VsZWN0OiBub25lO1xuICAgIC1tcy11c2VyLXNlbGVjdDogbm9uZTtcbiAgICAtby11c2VyLXNlbGVjdDogbm9uZTtcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgfVxuXG4gIC5yZWFjdC1ncmlkLWl0ZW0ucmVhY3QtZ3JpZC1wbGFjZWhvbGRlci5wbGFjZWhvbGRlci1yZXNpemluZyB7XG4gICAgdHJhbnNpdGlvbjogbm9uZTtcbiAgfVxuXG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZSB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHdpZHRoOiAyMHB4O1xuICAgIGhlaWdodDogMjBweDtcbiAgfVxuXG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZTo6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHJpZ2h0OiAzcHg7XG4gICAgYm90dG9tOiAzcHg7XG4gICAgd2lkdGg6IDVweDtcbiAgICBoZWlnaHQ6IDVweDtcbiAgICBib3JkZXItcmlnaHQ6IDJweCBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuNCk7XG4gICAgYm9yZGVyLWJvdHRvbTogMnB4IHNvbGlkIHJnYmEoMCwgMCwgMCwgMC40KTtcbiAgfVxuXG4gIC5yZWFjdC1yZXNpemFibGUtaGlkZSA+IC5yZWFjdC1yZXNpemFibGUtaGFuZGxlIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5cbiAgLnJlYWN0LWdyaWQtaXRlbSA+IC5yZWFjdC1yZXNpemFibGUtaGFuZGxlLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtc3cge1xuICAgIGJvdHRvbTogMDtcbiAgICBsZWZ0OiAwO1xuICAgIGN1cnNvcjogc3ctcmVzaXplO1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDkwZGVnKTtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1zZSB7XG4gICAgYm90dG9tOiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIGN1cnNvcjogc2UtcmVzaXplO1xuICB9XG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS5yZWFjdC1yZXNpemFibGUtaGFuZGxlLW53IHtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICBjdXJzb3I6IG53LXJlc2l6ZTtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpO1xuICB9XG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS5yZWFjdC1yZXNpemFibGUtaGFuZGxlLW5lIHtcbiAgICB0b3A6IDA7XG4gICAgcmlnaHQ6IDA7XG4gICAgY3Vyc29yOiBuZS1yZXNpemU7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMjcwZGVnKTtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS13LFxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1lIHtcbiAgICB0b3A6IDUwJTtcbiAgICBtYXJnaW4tdG9wOiAtMTBweDtcbiAgICBjdXJzb3I6IGV3LXJlc2l6ZTtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS13IHtcbiAgICBsZWZ0OiAwO1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDEzNWRlZyk7XG4gIH1cbiAgLnJlYWN0LWdyaWQtaXRlbSA+IC5yZWFjdC1yZXNpemFibGUtaGFuZGxlLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtZSB7XG4gICAgcmlnaHQ6IDA7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMzE1ZGVnKTtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1uLFxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1zIHtcbiAgICBsZWZ0OiA1MCU7XG4gICAgbWFyZ2luLWxlZnQ6IC0xMHB4O1xuICAgIGN1cnNvcjogbnMtcmVzaXplO1xuICB9XG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS5yZWFjdC1yZXNpemFibGUtaGFuZGxlLW4ge1xuICAgIHRvcDogMDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgyMjVkZWcpO1xuICB9XG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS5yZWFjdC1yZXNpemFibGUtaGFuZGxlLXMge1xuICAgIGJvdHRvbTogMDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gIH1cblxuICAucmVhY3QtcmVzaXphYmxlIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIH1cbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB3aWR0aDogMjBweDtcbiAgICBoZWlnaHQ6IDIwcHg7XG4gICAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDtcbiAgICBiYWNrZ3JvdW5kLW9yaWdpbjogY29udGVudC1ib3g7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSFpwWlhkQ2IzZzlJakFnTUNBMklEWWlJSE4wZVd4bFBTSmlZV05yWjNKdmRXNWtMV052Ykc5eU9pTm1abVptWm1Zd01DSWdlRDBpTUhCNElpQjVQU0l3Y0hnaUlIZHBaSFJvUFNJMmNIZ2lJR2hsYVdkb2REMGlObkI0SWo0OFp5QnZjR0ZqYVhSNVBTSXdMak13TWlJK1BIQmhkR2dnWkQwaVRTQTJJRFlnVENBd0lEWWdUQ0F3SURRdU1pQk1JRFFnTkM0eUlFd2dOQzR5SURRdU1pQk1JRFF1TWlBd0lFd2dOaUF3SUV3Z05pQTJJRXdnTmlBMklGb2lJR1pwYkd3OUlpTXdNREF3TURBaUx6NDhMMmMrUEM5emRtYytcIik7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogYm90dG9tIHJpZ2h0O1xuICAgIHBhZGRpbmc6IDAgM3B4IDNweCAwO1xuICB9XG4gIC5yZWFjdC1yZXNpemFibGUtaGFuZGxlLXN3IHtcbiAgICBib3R0b206IDA7XG4gICAgbGVmdDogMDtcbiAgICBjdXJzb3I6IHN3LXJlc2l6ZTtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSg5MGRlZyk7XG4gIH1cbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtc2Uge1xuICAgIGJvdHRvbTogMDtcbiAgICByaWdodDogMDtcbiAgICBjdXJzb3I6IHNlLXJlc2l6ZTtcbiAgfVxuICAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1udyB7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgY3Vyc29yOiBudy1yZXNpemU7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcbiAgfVxuICAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1uZSB7XG4gICAgdG9wOiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIGN1cnNvcjogbmUtcmVzaXplO1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDI3MGRlZyk7XG4gIH1cbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtdyxcbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtZSB7XG4gICAgdG9wOiA1MCU7XG4gICAgbWFyZ2luLXRvcDogLTEwcHg7XG4gICAgY3Vyc29yOiBldy1yZXNpemU7XG4gIH1cbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtdyB7XG4gICAgbGVmdDogMDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxMzVkZWcpO1xuICB9XG4gIC5yZWFjdC1yZXNpemFibGUtaGFuZGxlLWUge1xuICAgIHJpZ2h0OiAwO1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDMxNWRlZyk7XG4gIH1cbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtbixcbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtcyB7XG4gICAgbGVmdDogNTAlO1xuICAgIG1hcmdpbi1sZWZ0OiAtMTBweDtcbiAgICBjdXJzb3I6IG5zLXJlc2l6ZTtcbiAgfVxuICAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1uIHtcbiAgICB0b3A6IDA7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMjI1ZGVnKTtcbiAgfVxuICAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1zIHtcbiAgICBib3R0b206IDA7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoNDVkZWcpO1xuICB9XG5gO1xuIl19 */");
+exports.gridStyles = gridStyles;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=Dashboard.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.styles.cjs","sources":["../../../../src/components/Dashboard/Dashboard.styles.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDashboard\", {\n  root: {},\n});\n\nexport const gridStyles = css`\n  .react-grid-layout {\n    position: relative;\n    transition: height 200ms ease;\n  }\n  .react-grid-item {\n    transition: all 200ms ease;\n    transition-property: left, top, width, height;\n  }\n  .react-grid-item img {\n    pointer-events: none;\n    user-select: none;\n  }\n  .react-grid-item.cssTransforms {\n    transition-property: transform, width, height;\n  }\n  .react-grid-item.resizing {\n    transition: none;\n    z-index: 1;\n    will-change: width, height;\n  }\n\n  .react-grid-item.react-draggable-dragging {\n    transition: none;\n    z-index: 3;\n    will-change: transform;\n  }\n\n  .react-grid-item.dropping {\n    visibility: hidden;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ${theme.colors.primary_20};\n    transition-duration: 100ms;\n    z-index: 2;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n  }\n\n  .react-grid-item.react-grid-placeholder.placeholder-resizing {\n    transition: none;\n  }\n\n  .react-grid-item > .react-resizable-handle {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n  }\n\n  .react-grid-item > .react-resizable-handle::after {\n    content: \"\";\n    position: absolute;\n    right: 3px;\n    bottom: 3px;\n    width: 5px;\n    height: 5px;\n    border-right: 2px solid rgba(0, 0, 0, 0.4);\n    border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n  }\n\n  .react-resizable-hide > .react-resizable-handle {\n    display: none;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n    bottom: 0;\n    left: 0;\n    cursor: sw-resize;\n    transform: rotate(90deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n    bottom: 0;\n    right: 0;\n    cursor: se-resize;\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n    top: 0;\n    left: 0;\n    cursor: nw-resize;\n    transform: rotate(180deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n    top: 0;\n    right: 0;\n    cursor: ne-resize;\n    transform: rotate(270deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n    top: 50%;\n    margin-top: -10px;\n    cursor: ew-resize;\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n    left: 0;\n    transform: rotate(135deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n    right: 0;\n    transform: rotate(315deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n    left: 50%;\n    margin-left: -10px;\n    cursor: ns-resize;\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n    top: 0;\n    transform: rotate(225deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n    bottom: 0;\n    transform: rotate(45deg);\n  }\n\n  .react-resizable {\n    position: relative;\n  }\n  .react-resizable-handle {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    background-repeat: no-repeat;\n    background-origin: content-box;\n    box-sizing: border-box;\n    background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+\");\n    background-position: bottom right;\n    padding: 0 3px 3px 0;\n  }\n  .react-resizable-handle-sw {\n    bottom: 0;\n    left: 0;\n    cursor: sw-resize;\n    transform: rotate(90deg);\n  }\n  .react-resizable-handle-se {\n    bottom: 0;\n    right: 0;\n    cursor: se-resize;\n  }\n  .react-resizable-handle-nw {\n    top: 0;\n    left: 0;\n    cursor: nw-resize;\n    transform: rotate(180deg);\n  }\n  .react-resizable-handle-ne {\n    top: 0;\n    right: 0;\n    cursor: ne-resize;\n    transform: rotate(270deg);\n  }\n  .react-resizable-handle-w,\n  .react-resizable-handle-e {\n    top: 50%;\n    margin-top: -10px;\n    cursor: ew-resize;\n  }\n  .react-resizable-handle-w {\n    left: 0;\n    transform: rotate(135deg);\n  }\n  .react-resizable-handle-e {\n    right: 0;\n    transform: rotate(315deg);\n  }\n  .react-resizable-handle-n,\n  .react-resizable-handle-s {\n    left: 50%;\n    margin-left: -10px;\n    cursor: ns-resize;\n  }\n  .react-resizable-handle-n {\n    top: 0;\n    transform: rotate(225deg);\n  }\n  .react-resizable-handle-s {\n    bottom: 0;\n    transform: rotate(45deg);\n  }\n`;\n"],"names":["staticClasses","useClasses","createClasses","root","gridStyles","theme","colors","primary_20","process","env","NODE_ENV"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM,CAAC;AACT,CAAC;AAEM,MAAMC,mlBAiCKC,qBAAMC,OAAOC,YAAU,+lGAAAC,QAAAC,IAAAC,aAAA,eAAA,KAAA,uBAAAF,QAAAC,IAAAC,aAwJxC,eAAA,KAAA,6lOAAA;;;;"}

package/dist/cjs/components/Flow/Node/BaseNode.cjs

@@ -7,14 +7,15 @@ const uid = require("uid");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const useFlowNode = require("../hooks/useFlowNode.cjs");
 const NodeMetaContext = require("../FlowContext/NodeMetaContext.cjs");
 const BaseNode_styles = require("./BaseNode.styles.cjs");
-const isInputConnected = (id, type, idx, edges) => {
+const isInputConnected = (id, type, handleId, edges) => {
   if (type === "target") {
-    return edges.some((e) => e.target === id && e.targetHandle === idx.toString());
+    return edges.some((e) => e.target === id && e.targetHandle === handleId);
   }
   if (type === "source") {
-    return edges.some((e) => e.source === id && e.sourceHandle === idx.toString());
+    return edges.some((e) => e.source === id && e.sourceHandle === handleId);
   }
   return false;
 };
@@ -60,9 +61,9 @@ const HvFlowBaseNode = ({
     cx,
     css
   } = BaseNode_styles.useClasses(classesProp);
-  const edges = ReactFlow.useEdges();
-  const nodes = ReactFlow.useNodes();
-  const node = nodes.find((n) => n.id === id);
+  const node = useFlowNode.useFlowNode(id);
+  const inputEdges = useFlowNode.useFlowNodeInputEdges(id);
+  const outputEdges = useFlowNode.useFlowNodeOutputEdges(id);
   const handleDefaultAction = React.useCallback((action) => {
     if (!node)
       return;
@@ -122,25 +123,31 @@ const HvFlowBaseNode = ({
     children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.contentContainer, children }),
     inputs && inputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: "Inputs" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Handle, { type: "target", isConnectableStart: false, id: `${idx}`, position: ReactFlow.Position.Left, style: {
-          top: "auto",
-          bottom: (outputs?.length ? 80 : 18) + (outputs?.length || 0) * 29 + 29 * idx
-        } }),
-        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: input.label }),
-        input.isMandatory && !isInputConnected(id, "target", idx, edges) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
-      ] }, idx)) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputsContainer, children: inputs?.map((input, idx) => {
+        const handleId = input.id ?? idx.toString();
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Handle, { type: "target", isConnectableStart: false, id: handleId, position: ReactFlow.Position.Left, style: {
+            top: "auto",
+            bottom: (outputs?.length ? 80 : 18) + (outputs?.length || 0) * 29 + 29 * idx
+          } }),
+          /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: input.label }),
+          input.isMandatory && !isInputConnected(id, "target", handleId, inputEdges) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory })
+        ] }, idx);
+      }) })
     ] }),
     outputs && outputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsTitleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: "Outputs" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Handle, { type: "source", isConnectableEnd: false, id: `${idx}`, position: ReactFlow.Position.Right, style: {
-          bottom: -10 + 29 * (outputs.length - idx),
-          top: "auto"
-        } }),
-        output.isMandatory && !isInputConnected(id, "source", idx, edges) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory }),
-        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: output.label })
-      ] }, idx)) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outputsContainer, children: outputs?.map((output, idx) => {
+        const handleId = output.id ?? idx.toString();
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Handle, { type: "source", isConnectableEnd: false, id: handleId, position: ReactFlow.Position.Right, style: {
+            bottom: -10 + 29 * (outputs.length - idx),
+            top: "auto"
+          } }),
+          output.isMandatory && !isInputConnected(id, "source", handleId, outputEdges) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.mandatory }),
+          /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: output.label })
+        ] }, idx);
+      }) })
     ] })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.cjs","sources":["../../../../../src/components/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useEdges,\n  useNodes,\n  useReactFlow,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvBaseProps,\n  HvButton,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFlowNodeAction,\n  HvFlowBuiltInActions,\n  HvFlowNodeInput,\n  HvFlowNodeOutput,\n} from \"../types\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: HvFlowNodeInput[];\n  /** Node outputs */\n  outputs?: HvFlowNodeOutput[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  idx: number,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some(\n      (e) => e.target === id && e.targetHandle === idx.toString()\n    );\n  }\n  if (type === \"source\") {\n    return edges.some(\n      (e) => e.source === id && e.sourceHandle === idx.toString()\n    );\n  }\n\n  return false;\n};\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs,\n  outputs,\n  nodeActions = defaultActions,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  useEffect(() => {\n    registerNode(id, { label: title || \"\", inputs, outputs });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const edges = useEdges();\n  const nodes = useNodes();\n\n  const node = nodes.find((n) => n.id === id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: uid(),\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n  const iconColor = isValidElement(icon)\n    ? getColor(icon.props.color || \"base_dark\")\n    : getColor(\"base_dark\");\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } })\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => (\n              <div className={classes.inputContainer} key={idx}>\n                <Handle\n                  type=\"target\"\n                  isConnectableStart={false}\n                  id={`${idx}`}\n                  position={Position.Left}\n                  style={{\n                    top: \"auto\",\n                    bottom:\n                      (outputs?.length ? 80 : 18) +\n                      (outputs?.length || 0) * 29 +\n                      29 * idx,\n                  }}\n                />\n                <HvTypography>{input.label}</HvTypography>\n                {input.isMandatory &&\n                  !isInputConnected(id, \"target\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => (\n              <div className={classes.outputContainer} key={idx}>\n                <Handle\n                  type=\"source\"\n                  isConnectableEnd={false}\n                  id={`${idx}`}\n                  position={Position.Right}\n                  style={{\n                    bottom: -10 + 29 * (outputs.length - idx),\n                    top: \"auto\",\n                  }}\n                />\n                {output.isMandatory &&\n                  !isInputConnected(id, \"source\", idx, edges) && (\n                    <div className={classes.mandatory} />\n                  )}\n                <HvTypography>{output.label}</HvTypography>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","idx","edges","some","e","target","targetHandle","toString","source","sourceHandle","defaultActions","label","icon","Delete","Duplicate","renderedIcon","actionIcon","isValidElement","HvFlowBaseNode","title","headerItems","color","colorProp","inputs","outputs","nodeActions","classes","classesProp","className","children","registerNode","unregisterNode","useNodeMetaRegistry","useEffect","showActions","setShowActions","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","useEdges","nodes","useNodes","node","find","n","handleDefaultAction","useCallback","action","callback","deleteElements","addNodes","uid","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","getColor","iconColor","props","jsxs","border","root","jsx","NodeToolbar","map","HvButton","backgroundColor","headerContainer","titleContainer","fill","HvTypography","display","contentContainer","length","Fragment","inputsTitleContainer","inputsContainer","input","inputContainer","Handle","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}
+{"version":3,"file":"BaseNode.cjs","sources":["../../../../../src/components/Flow/Node/BaseNode.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useState } from \"react\";\nimport {\n  Edge,\n  Handle,\n  NodeProps,\n  NodeToolbar,\n  Position,\n  useReactFlow,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvBaseProps,\n  HvButton,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Delete, Duplicate } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvFlowNodeAction,\n  HvFlowBuiltInActions,\n  HvFlowNodeInput,\n  HvFlowNodeOutput,\n} from \"../types\";\nimport {\n  useFlowNode,\n  useFlowNodeInputEdges,\n  useFlowNodeOutputEdges,\n} from \"../hooks/useFlowNode\";\nimport { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\nimport { staticClasses, useClasses } from \"./BaseNode.styles\";\n\nexport { staticClasses as flowBaseNodeClasses };\n\nexport type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowBaseNodeProps<T = any>\n  extends Omit<HvBaseProps, \"id\">,\n    NodeProps<T> {\n  /** Header title */\n  title?: string;\n  /** Header icon */\n  icon?: React.ReactNode;\n  /** Header color */\n  color?: HvColorAny;\n  /** Header items */\n  headerItems?: React.ReactNode;\n  /** Node inputs */\n  inputs?: HvFlowNodeInput[];\n  /** Node outputs */\n  outputs?: HvFlowNodeOutput[];\n  /** Node actions */\n  nodeActions?: HvFlowNodeAction[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowBaseNodeClasses;\n}\n\nconst isInputConnected = (\n  id: string,\n  type: \"target\" | \"source\",\n  handleId: string,\n  edges: Edge[]\n) => {\n  if (type === \"target\") {\n    return edges.some((e) => e.target === id && e.targetHandle === handleId);\n  }\n  if (type === \"source\") {\n    return edges.some((e) => e.source === id && e.sourceHandle === handleId);\n  }\n\n  return false;\n};\n\nconst defaultActions: HvFlowBuiltInActions[] = [\n  { id: \"delete\", label: \"Delete\", icon: <Delete /> },\n  { id: \"duplicate\", label: \"Duplicate\", icon: <Duplicate /> },\n];\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowBaseNode = ({\n  id,\n  title,\n  headerItems,\n  icon,\n  color: colorProp,\n  inputs,\n  outputs,\n  nodeActions = defaultActions,\n  classes: classesProp,\n  className,\n  children,\n}: HvFlowBaseNodeProps<unknown>) => {\n  const { registerNode, unregisterNode } = useNodeMetaRegistry();\n  useEffect(() => {\n    registerNode(id, { label: title || \"\", inputs, outputs });\n    return () => unregisterNode(id);\n  }, [id, title, inputs, outputs, registerNode, unregisterNode]);\n\n  const [showActions, setShowActions] = useState(false);\n  const reactFlowInstance = useReactFlow();\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const node = useFlowNode(id);\n  const inputEdges = useFlowNodeInputEdges(id);\n  const outputEdges = useFlowNodeOutputEdges(id);\n\n  const handleDefaultAction = useCallback(\n    (action: HvFlowNodeAction) => {\n      if (!node) return;\n\n      if (action.callback) {\n        action.callback(node);\n        return;\n      }\n\n      // built-in actions\n      switch (action.id) {\n        case \"delete\":\n          reactFlowInstance.deleteElements({ nodes: [node] });\n          break;\n        case \"duplicate\":\n          reactFlowInstance.addNodes([\n            {\n              ...node,\n              id: uid(),\n              position: {\n                x: node.position.x,\n                y: node.position.y + (node.height || 0) + 20,\n              },\n              selected: false,\n              zIndex: Number(theme.zIndices.overlay),\n            },\n          ]);\n          break;\n        default:\n          break;\n      }\n    },\n    [node, reactFlowInstance]\n  );\n\n  if (!node) return null;\n\n  const color = getColor(colorProp);\n  const iconColor = isValidElement(icon)\n    ? getColor(icon.props.color || \"base_dark\")\n    : getColor(\"base_dark\");\n\n  return (\n    <div\n      className={cx(\n        \"nowheel\", // Disables the default canvas pan behaviour when scrolling inside the node\n        css({ border: `1px solid ${color}` }),\n        classes.root,\n        className\n      )}\n      onMouseEnter={() => setShowActions(true)}\n      onMouseLeave={() => setShowActions(false)}\n    >\n      <NodeToolbar isVisible={showActions} offset={0}>\n        {nodeActions?.map((action) => (\n          <HvButton\n            key={action.id}\n            icon\n            onClick={() => handleDefaultAction(action)}\n          >\n            {renderedIcon(action.icon)}\n          </HvButton>\n        ))}\n      </NodeToolbar>\n      <div\n        className={cx(css({ backgroundColor: color }), classes.headerContainer)}\n      >\n        <div\n          className={cx(\n            classes.titleContainer,\n            css({ \"& svg *.color0\": { fill: iconColor } })\n          )}\n        >\n          {icon}\n          <HvTypography\n            component=\"p\"\n            variant=\"title4\"\n            className={classes.title}\n          >\n            {title}\n          </HvTypography>\n        </div>\n        {headerItems && <div style={{ display: \"flex\" }}>{headerItems}</div>}\n      </div>\n      {children && <div className={classes.contentContainer}>{children}</div>}\n      {inputs && inputs.length > 0 && (\n        <>\n          <div className={classes.inputsTitleContainer}>\n            <HvTypography>Inputs</HvTypography>\n          </div>\n\n          <div className={classes.inputsContainer}>\n            {inputs?.map((input, idx) => {\n              const handleId = input.id ?? idx.toString();\n              return (\n                <div className={classes.inputContainer} key={idx}>\n                  <Handle\n                    type=\"target\"\n                    isConnectableStart={false}\n                    id={handleId}\n                    position={Position.Left}\n                    style={{\n                      top: \"auto\",\n                      bottom:\n                        (outputs?.length ? 80 : 18) +\n                        (outputs?.length || 0) * 29 +\n                        29 * idx,\n                    }}\n                  />\n                  <HvTypography>{input.label}</HvTypography>\n                  {input.isMandatory &&\n                    !isInputConnected(id, \"target\", handleId, inputEdges) && (\n                      <div className={classes.mandatory} />\n                    )}\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n      {outputs && outputs.length > 0 && (\n        <>\n          <div className={classes.outputsTitleContainer}>\n            <HvTypography>Outputs</HvTypography>\n          </div>\n          <div className={classes.outputsContainer}>\n            {outputs?.map((output, idx) => {\n              const handleId = output.id ?? idx.toString();\n              return (\n                <div className={classes.outputContainer} key={idx}>\n                  <Handle\n                    type=\"source\"\n                    isConnectableEnd={false}\n                    id={handleId}\n                    position={Position.Right}\n                    style={{\n                      bottom: -10 + 29 * (outputs.length - idx),\n                      top: \"auto\",\n                    }}\n                  />\n                  {output.isMandatory &&\n                    !isInputConnected(id, \"source\", handleId, outputEdges) && (\n                      <div className={classes.mandatory} />\n                    )}\n                  <HvTypography>{output.label}</HvTypography>\n                </div>\n              );\n            })}\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["isInputConnected","id","type","handleId","edges","some","e","target","targetHandle","source","sourceHandle","defaultActions","label","icon","Delete","Duplicate","renderedIcon","actionIcon","isValidElement","HvFlowBaseNode","title","headerItems","color","colorProp","inputs","outputs","nodeActions","classes","classesProp","className","children","registerNode","unregisterNode","useNodeMetaRegistry","useEffect","showActions","setShowActions","useState","reactFlowInstance","useReactFlow","cx","css","useClasses","node","useFlowNode","inputEdges","useFlowNodeInputEdges","outputEdges","useFlowNodeOutputEdges","handleDefaultAction","useCallback","action","callback","deleteElements","nodes","addNodes","uid","position","x","y","height","selected","zIndex","Number","theme","zIndices","overlay","getColor","iconColor","props","jsxs","border","root","jsx","NodeToolbar","map","HvButton","backgroundColor","headerContainer","titleContainer","fill","HvTypography","display","contentContainer","length","Fragment","inputsTitleContainer","inputsContainer","input","idx","toString","inputContainer","Handle","Position","Left","top","bottom","isMandatory","mandatory","outputsTitleContainer","outputsContainer","output","outputContainer","Right"],"mappings":"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"}

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

@@ -31,9 +31,7 @@ const HvFlowNode = ({
     classes
   } = Node_styles.useClasses(classesProp);
   const [showParams, setShowParams] = React.useState(expanded);
-  const {
-    node
-  } = useFlowNode.useFlowNode(id);
+  const node = useFlowNode.useFlowNode(id);
   const {
     nodeGroups,
     nodeTypes,

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

@@ -1 +1 @@
-{"version":3,"file":"Node.cjs","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import React, { isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks/index\";\nimport { HvFlowNodeParam } from \"../types/index\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n// TODO How to include here the types from the parent component?\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nexport interface HvFlowNodeProps<T = any>\n  extends Omit<HvFlowBaseNodeProps<T>, \"classes\"> {\n  /** Node description */\n  description?: string;\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses | HvFlowBaseNodeProps<T>[\"classes\"];\n}\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  children,\n  expandParamsButtonProps,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n  const [showParams, setShowParams] = useState(expanded);\n  const { node } = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n  const groupId = nodeTypes?.[type].meta?.groupId;\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupLabel =\n    (groupId && nodeGroups && nodeGroups[groupId].label) || nodeDefaults?.title;\n\n  const inputs = nodeTypes?.[type]?.meta?.inputs;\n  const outputs = nodeTypes?.[type]?.meta?.outputs;\n  const icon =\n    (groupId && nodeGroups && nodeGroups[groupId].icon) || nodeDefaults?.icon;\n  const colorProp =\n    (groupId && nodeGroups && nodeGroups[groupId].color) || nodeDefaults?.color;\n  const color = getColor(colorProp);\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      inputs={inputs}\n      outputs={outputs}\n      nodeActions={defaultActions}\n      classes={classesProp as HvFlowBaseNodeProps<unknown>[\"classes\"]}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n              <div>\n                <Info color=\"base_dark\" />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={showParams ? \"Collapse\" : \"Expand\"}\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up role=\"none\" color=\"base_dark\" />\n              ) : (\n                <Down role=\"none\" color=\"base_dark\" />\n              )}\n            </HvButton>\n          )}\n        </>\n      }\n      {...props}\n    >\n      {(subtitle || actsVisible?.length || actsDropdown?.length) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\n          <div className={classes.actions}>\n            {actions?.length && actions?.length > 0 && (\n              <>\n                {actsVisible?.map((action) => (\n                  <HvTooltip key={action.id} title={action.label}>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\n                  </HvTooltip>\n                ))}\n\n                {actsDropdown && actsDropdown.length > 0 && (\n                  <HvDropDownMenu\n                    keepOpened={false}\n                    dataList={actsDropdown?.map((action) => ({\n                      id: action.id,\n                      label: action.label,\n                    }))}\n                    onClick={(event, action) => {\n                      actionCallback?.(event, id, action as HvActionGeneric);\n                    }}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":["renderedIcon","actionIcon","isValidElement","HvFlowNode","id","type","headerItems","description","actions","actionCallback","maxVisibleActions","expanded","params","nodeDefaults","classes","classesProp","children","expandParamsButtonProps","props","useClasses","showParams","setShowParams","useState","node","useFlowNode","nodeGroups","nodeTypes","defaultActions","useFlowContext","groupId","meta","subtitle","label","subTitle","groupLabel","title","inputs","outputs","icon","colorProp","color","getColor","actsVisible","slice","actsDropdown","hasParams","length","jsxs","HvFlowBaseNode","jsx","HvTooltip","HvTypography","Info","HvButton","p","Up","Down","subtitleContainer","map","action","event","HvDropDownMenu","paramsContainer","ParamRenderer","data"],"mappings":"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"}
+{"version":3,"file":"Node.cjs","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import React, { isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks/index\";\nimport { HvFlowNodeParam } from \"../types/index\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n// TODO How to include here the types from the parent component?\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nexport interface HvFlowNodeProps<T = any>\n  extends Omit<HvFlowBaseNodeProps<T>, \"classes\"> {\n  /** Node description */\n  description?: string;\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses | HvFlowBaseNodeProps<T>[\"classes\"];\n}\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  children,\n  expandParamsButtonProps,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n  const [showParams, setShowParams] = useState(expanded);\n  const node = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n  const groupId = nodeTypes?.[type].meta?.groupId;\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupLabel =\n    (groupId && nodeGroups && nodeGroups[groupId].label) || nodeDefaults?.title;\n\n  const inputs = nodeTypes?.[type]?.meta?.inputs;\n  const outputs = nodeTypes?.[type]?.meta?.outputs;\n  const icon =\n    (groupId && nodeGroups && nodeGroups[groupId].icon) || nodeDefaults?.icon;\n  const colorProp =\n    (groupId && nodeGroups && nodeGroups[groupId].color) || nodeDefaults?.color;\n  const color = getColor(colorProp);\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      inputs={inputs}\n      outputs={outputs}\n      nodeActions={defaultActions}\n      classes={classesProp as HvFlowBaseNodeProps<unknown>[\"classes\"]}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={<HvTypography>{description}</HvTypography>}>\n              <div>\n                <Info color=\"base_dark\" />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={showParams ? \"Collapse\" : \"Expand\"}\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up role=\"none\" color=\"base_dark\" />\n              ) : (\n                <Down role=\"none\" color=\"base_dark\" />\n              )}\n            </HvButton>\n          )}\n        </>\n      }\n      {...props}\n    >\n      {(subtitle || actsVisible?.length || actsDropdown?.length) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\n          <div className={classes.actions}>\n            {actions?.length && actions?.length > 0 && (\n              <>\n                {actsVisible?.map((action) => (\n                  <HvTooltip key={action.id} title={action.label}>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\n                  </HvTooltip>\n                ))}\n\n                {actsDropdown && actsDropdown.length > 0 && (\n                  <HvDropDownMenu\n                    keepOpened={false}\n                    dataList={actsDropdown?.map((action) => ({\n                      id: action.id,\n                      label: action.label,\n                    }))}\n                    onClick={(event, action) => {\n                      actionCallback?.(event, id, action as HvActionGeneric);\n                    }}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":["renderedIcon","actionIcon","isValidElement","HvFlowNode","id","type","headerItems","description","actions","actionCallback","maxVisibleActions","expanded","params","nodeDefaults","classes","classesProp","children","expandParamsButtonProps","props","useClasses","showParams","setShowParams","useState","node","useFlowNode","nodeGroups","nodeTypes","defaultActions","useFlowContext","groupId","meta","subtitle","label","subTitle","groupLabel","title","inputs","outputs","icon","colorProp","color","getColor","actsVisible","slice","actsDropdown","hasParams","length","jsxs","HvFlowBaseNode","jsx","HvTooltip","HvTypography","Info","HvButton","p","Up","Down","subtitleContainer","map","action","event","HvDropDownMenu","paramsContainer","ParamRenderer","data"],"mappings":"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"}

package/dist/cjs/components/Flow/Node/Parameters/Select.cjs

@@ -19,7 +19,7 @@ const Select = ({
   const [opts, setOpts] = React.useState(data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0);
   const onSelectChange = (item) => {
     const nodes = reactFlowInstance.getNodes();
-    const newOpts = Array.isArray(item) ? item.map((x) => x.label) : item?.label ? [item.label] : void 0;
+    const newOpts = Array.isArray(item) ? item.map((x) => x.label) : item?.label ?? void 0;
     const newNodes = nodes.map((node) => {
       if (node.id === nodeId) {
         node.data = {
@@ -30,7 +30,7 @@ const Select = ({
       return node;
     });
     reactFlowInstance.setNodes(newNodes);
-    setOpts(newOpts);
+    setOpts(newOpts ? Array.isArray(newOpts) ? newOpts : [newOpts] : void 0);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     uikitReactCore.HvDropdown,

package/dist/cjs/components/Flow/Node/Parameters/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../../../src/components/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 nodes = reactFlowInstance.getNodes();\n\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : item?.label\n      ? [item.label as string]\n      : undefined;\n\n    const newNodes = 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    reactFlowInstance.setNodes(newNodes);\n    setOpts(newOpts);\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":["Select","nodeId","param","data","id","label","multiple","options","reactFlowInstance","useReactFlow","opts","setOpts","useState","Array","isArray","undefined","onSelectChange","item","nodes","getNodes","newOpts","map","x","newNodes","node","setNodes","jsx","HvDropdown","o","selected","find","opt"],"mappings":";;;;;;AAYA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAkB,MAAM;AACjD,QAAA;AAAA,IAAEC;AAAAA,IAAIC;AAAAA,IAAOC,WAAW;AAAA,IAAOC;AAAAA,EAAYL,IAAAA;AAEjD,QAAMM,oBAAoBC,UAAAA;AAEpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,MAAAA,SACtBT,KAAKC,EAAE,IAAKS,MAAMC,QAAQX,KAAKC,EAAE,CAAC,IAAID,KAAKC,EAAE,IAAI,CAACD,KAAKC,EAAE,CAAC,IAAKW,MACjE;AAEA,QAAMC,iBAA+CC,CAAS,SAAA;AACtDC,UAAAA,QAAQV,kBAAkBW;AAEhC,UAAMC,UAAUP,MAAMC,QAAQG,IAAI,IAC9BA,KAAKI,IAAKC,CAAAA,MAAMA,EAAEjB,KAAe,IACjCY,MAAMZ,QACN,CAACY,KAAKZ,KAAe,IACrBU;AAEEQ,UAAAA,WAAWL,MAAMG,IAAKG,CAAS,SAAA;AAC/BA,UAAAA,KAAKpB,OAAOH,QAAQ;AACtBuB,aAAKrB,OAAO;AAAA,UACV,GAAGqB,KAAKrB;AAAAA,UACR,CAACC,EAAE,GAAGgB;AAAAA,QAAAA;AAAAA,MAEV;AACOI,aAAAA;AAAAA,IAAAA,CACR;AAEDhB,sBAAkBiB,SAASF,QAAQ;AACnCZ,YAAQS,OAAO;AAAA,EAAA;AAIf,SAAAM,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQpB,SAASc,IAAKO,CAAM,MAAA;AACnB,eAAA;AAAA,UAAExB,IAAIwB;AAAAA,UAAGvB,OAAOuB;AAAAA,UAAGC,UAAU,CAAC,CAACnB,MAAMoB,KAAMC,CAAAA,QAAQA,QAAQH,CAAC;AAAA,QAAA;AAAA,MAAE,CACtE;AAAA,MACD,UAAUZ;AAAAA,MACV,WAAW;AAAA,MACX,aAAaV;AAAAA,IAAAA;AAAAA,EAAAA;AAGnB;AAEA,MAAA,WAAeN;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../../../../src/components/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 nodes = reactFlowInstance.getNodes();\n\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : (item?.label as string) ?? undefined;\n\n    const newNodes = 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    reactFlowInstance.setNodes(newNodes);\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":["Select","nodeId","param","data","id","label","multiple","options","reactFlowInstance","useReactFlow","opts","setOpts","useState","Array","isArray","undefined","onSelectChange","item","nodes","getNodes","newOpts","map","x","newNodes","node","setNodes","jsx","HvDropdown","o","selected","find","opt"],"mappings":";;;;;;AAYA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAkB,MAAM;AACjD,QAAA;AAAA,IAAEC;AAAAA,IAAIC;AAAAA,IAAOC,WAAW;AAAA,IAAOC;AAAAA,EAAYL,IAAAA;AAEjD,QAAMM,oBAAoBC,UAAAA;AAEpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,MAAAA,SACtBT,KAAKC,EAAE,IAAKS,MAAMC,QAAQX,KAAKC,EAAE,CAAC,IAAID,KAAKC,EAAE,IAAI,CAACD,KAAKC,EAAE,CAAC,IAAKW,MACjE;AAEA,QAAMC,iBAA+CC,CAAS,SAAA;AACtDC,UAAAA,QAAQV,kBAAkBW;AAEhC,UAAMC,UAAUP,MAAMC,QAAQG,IAAI,IAC9BA,KAAKI,IAAKC,CAAAA,MAAMA,EAAEjB,KAAgB,IACjCY,MAAMZ,SAAoBU;AAEzBQ,UAAAA,WAAWL,MAAMG,IAAKG,CAAS,SAAA;AAC/BA,UAAAA,KAAKpB,OAAOH,QAAQ;AACtBuB,aAAKrB,OAAO;AAAA,UACV,GAAGqB,KAAKrB;AAAAA,UACR,CAACC,EAAE,GAAGgB;AAAAA,QAAAA;AAAAA,MAEV;AACOI,aAAAA;AAAAA,IAAAA,CACR;AAEDhB,sBAAkBiB,SAASF,QAAQ;AAEjCH,YAAAA,UAAWP,MAAMC,QAAQM,OAAO,IAAIA,UAAU,CAACA,OAAO,IAAKL,MAC7D;AAAA,EAAA;AAIA,SAAAW,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQpB,SAASc,IAAKO,CAAM,MAAA;AACnB,eAAA;AAAA,UAAExB,IAAIwB;AAAAA,UAAGvB,OAAOuB;AAAAA,UAAGC,UAAU,CAAC,CAACnB,MAAMoB,KAAMC,CAAAA,QAAQA,QAAQH,CAAC;AAAA,QAAA;AAAA,MAAE,CACtE;AAAA,MACD,UAAUZ;AAAAA,MACV,WAAW;AAAA,MACX,aAAaV;AAAAA,IAAAA;AAAAA,EAAAA;AAGnB;AAEA,MAAA,WAAeN;;"}

package/dist/cjs/components/Flow/hooks/useFlowNode.cjs

@@ -1,25 +1,33 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
 const ReactFlow = require("reactflow");
 function useFlowNode(id) {
-  const nodes = ReactFlow.useNodes();
-  const edges = ReactFlow.useEdges();
-  return {
-    // self node
-    get node() {
-      const self = nodes.find((n) => n.id === id);
-      return self;
-    },
-    // parent nodes
-    get parentNodes() {
-      const connectedEdges = edges.filter((e) => e.target === id);
-      const parentNodeArray = connectedEdges.map((e) => {
-        const parentNode = nodes.find((n) => n.id === e.source);
-        return parentNode;
-      });
-      return parentNodeArray;
-    }
-  };
+  const nodeSelector = React.useCallback((state) => state.getNodes().find((n) => n.id === id), [id]);
+  return ReactFlow.useStore(nodeSelector);
+}
+function useFlowNodeInputEdges(id) {
+  const inputEdgesSelector = React.useCallback((state) => state.edges.filter((e) => e.target === id), [id]);
+  return ReactFlow.useStore(inputEdgesSelector);
+}
+function useFlowNodeOutputEdges(id) {
+  const outputEdgesSelector = React.useCallback((state) => state.edges.filter((e) => e.source === id), [id]);
+  return ReactFlow.useStore(outputEdgesSelector);
+}
+function useFlowNodeEdges(id) {
+  const edgesSelector = React.useCallback((state) => state.edges.filter((e) => e.source === id || e.target === id), [id]);
+  return ReactFlow.useStore(edgesSelector);
+}
+function useFlowNodeParents(id) {
+  const inputEdges = useFlowNodeInputEdges(id);
+  const parentNodesSelector = React.useCallback((state) => {
+    return inputEdges.map((e) => state.getNodes().find((n) => n.id === e.source)).filter((n) => n !== null);
+  }, [inputEdges]);
+  return ReactFlow.useStore(parentNodesSelector);
 }
 exports.useFlowNode = useFlowNode;
+exports.useFlowNodeEdges = useFlowNodeEdges;
+exports.useFlowNodeInputEdges = useFlowNodeInputEdges;
+exports.useFlowNodeOutputEdges = useFlowNodeOutputEdges;
+exports.useFlowNodeParents = useFlowNodeParents;
 //# sourceMappingURL=useFlowNode.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFlowNode.cjs","sources":["../../../../../src/components/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { Edge, Node, useEdges, useNodes } from \"reactflow\";\n\nexport function useFlowNode<T = any>(id: string) {\n  const nodes = useNodes<T>();\n  const edges = useEdges();\n\n  return {\n    // self node\n    get node() {\n      const self = nodes.find((n: Node) => n.id === id);\n      return self;\n    },\n\n    // parent nodes\n    get parentNodes() {\n      const connectedEdges = edges.filter((e: Edge) => e.target === id);\n      const parentNodeArray = connectedEdges.map((e) => {\n        const parentNode = nodes.find((n: Node) => n.id === e.source) as Node;\n        return parentNode;\n      });\n      return parentNodeArray;\n    },\n  };\n}\n"],"names":["useFlowNode","id","nodes","useNodes","edges","useEdges","node","self","find","n","parentNodes","connectedEdges","filter","e","target","parentNodeArray","map","parentNode","source"],"mappings":";;;AAEO,SAASA,YAAqBC,IAAY;AAC/C,QAAMC,QAAQC,UAAAA;AACd,QAAMC,QAAQC,UAAAA;AAEP,SAAA;AAAA;AAAA,IAEL,IAAIC,OAAO;AACT,YAAMC,OAAOL,MAAMM,KAAK,CAACC,MAAYA,EAAER,OAAOA,EAAE;AACzCM,aAAAA;AAAAA,IACT;AAAA;AAAA,IAGA,IAAIG,cAAc;AAChB,YAAMC,iBAAiBP,MAAMQ,OAAO,CAACC,MAAYA,EAAEC,WAAWb,EAAE;AAC1Dc,YAAAA,kBAAkBJ,eAAeK,IAAKH,CAAM,MAAA;AAC1CI,cAAAA,aAAaf,MAAMM,KAAK,CAACC,MAAYA,EAAER,OAAOY,EAAEK,MAAM;AACrDD,eAAAA;AAAAA,MAAAA,CACR;AACMF,aAAAA;AAAAA,IACT;AAAA,EAAA;AAEJ;;"}
+{"version":3,"file":"useFlowNode.cjs","sources":["../../../../../src/components/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Node, Edge, ReactFlowState, useStore } 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"],"names":["useFlowNode","id","nodeSelector","useCallback","state","getNodes","find","n","useStore","useFlowNodeInputEdges","inputEdgesSelector","edges","filter","e","target","useFlowNodeOutputEdges","outputEdgesSelector","source","useFlowNodeEdges","edgesSelector","useFlowNodeParents","inputEdges","parentNodesSelector","map"],"mappings":";;;;AAGO,SAASA,YAAmCC,IAAY;AAC7D,QAAMC,eAAeC,MAAAA,YACnB,CAACC,UACCA,MAAMC,WAAWC,KAAK,CAACC,MAAoBA,EAAEN,OAAOA,EAAE,GACxD,CAACA,EAAE,CACL;AACA,SAAOO,UAAAA,SAAwBN,YAAY;AAC7C;AAEO,SAASO,sBAAsBR,IAAY;AAChD,QAAMS,qBAAqBP,MAAAA,YACzB,CAACC,UAA0BA,MAAMO,MAAMC,OAAO,CAACC,MAAYA,EAAEC,WAAWb,EAAE,GAC1E,CAACA,EAAE,CACL;AACA,SAAOO,UAAAA,SAASE,kBAAkB;AACpC;AAEO,SAASK,uBAAuBd,IAAY;AACjD,QAAMe,sBAAsBb,MAAAA,YAC1B,CAACC,UAA0BA,MAAMO,MAAMC,OAAO,CAACC,MAAYA,EAAEI,WAAWhB,EAAE,GAC1E,CAACA,EAAE,CACL;AACA,SAAOO,UAAAA,SAASQ,mBAAmB;AACrC;AAEO,SAASE,iBAAiBjB,IAAY;AAC3C,QAAMkB,gBAAgBhB,MAAAA,YACpB,CAACC,UACCA,MAAMO,MAAMC,OAAO,CAACC,MAAYA,EAAEI,WAAWhB,MAAMY,EAAEC,WAAWb,EAAE,GACpE,CAACA,EAAE,CACL;AACA,SAAOO,UAAAA,SAASW,aAAa;AAC/B;AAEO,SAASC,mBAAmBnB,IAAY;AACvCoB,QAAAA,aAAaZ,sBAAsBR,EAAE;AACrCqB,QAAAA,sBAAsBnB,kBAC1B,CAACC,UAA0B;AACzB,WAAOiB,WACJE,IAAKV,CAAAA,MAAMT,MAAMC,SAAS,EAAEC,KAAK,CAACC,MAAYA,EAAEN,OAAOY,EAAEI,MAAM,CAAC,EAChEL,OAAO,CAACL,MAAiBA,MAAM,IAAI;AAAA,EAAA,GAExC,CAACc,UAAU,CACb;AACA,SAAOb,UAAAA,SAASc,mBAAmB;AACrC;;;;;;"}

package/dist/cjs/components/Flow/hooks/useFlowNodeMeta.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const NodeMetaContext = require("../FlowContext/NodeMetaContext.cjs");
+function useFlowNodeMeta(id) {
+  const {
+    registry
+  } = NodeMetaContext.useNodeMetaRegistry();
+  return registry[id];
+}
+exports.useFlowNodeMeta = useFlowNodeMeta;
+//# sourceMappingURL=useFlowNodeMeta.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowNodeMeta.cjs","sources":["../../../../../src/components/Flow/hooks/useFlowNodeMeta.ts"],"sourcesContent":["import { useNodeMetaRegistry } from \"../FlowContext/NodeMetaContext\";\n\nexport function useFlowNodeMeta(id: string) {\n  const { registry } = useNodeMetaRegistry();\n\n  return registry[id];\n}\n"],"names":["useFlowNodeMeta","id","registry","useNodeMetaRegistry"],"mappings":";;;AAEO,SAASA,gBAAgBC,IAAY;AACpC,QAAA;AAAA,IAAEC;AAAAA,MAAaC,gBAAoB,oBAAA;AAEzC,SAAOD,SAASD,EAAE;AACpB;;"}

package/dist/cjs/index.cjs

@@ -1,18 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const StepNavigation_styles = require("./components/StepNavigation/StepNavigation.styles.cjs");
-const StepNavigation = require("./components/StepNavigation/StepNavigation.cjs");
-const Wizard_styles = require("./components/Wizard/Wizard.styles.cjs");
-const Wizard = require("./components/Wizard/Wizard.cjs");
-const WizardActions_styles = require("./components/Wizard/WizardActions/WizardActions.styles.cjs");
-const WizardActions = require("./components/Wizard/WizardActions/WizardActions.cjs");
-const WizardContainer_styles = require("./components/Wizard/WizardContainer/WizardContainer.styles.cjs");
-const WizardContainer = require("./components/Wizard/WizardContainer/WizardContainer.cjs");
-const WizardContent_styles = require("./components/Wizard/WizardContent/WizardContent.styles.cjs");
-const WizardContent = require("./components/Wizard/WizardContent/WizardContent.cjs");
-const WizardContext = require("./components/Wizard/WizardContext/WizardContext.cjs");
-const WizardTitle_styles = require("./components/Wizard/WizardTitle/WizardTitle.styles.cjs");
-const WizardTitle = require("./components/Wizard/WizardTitle/WizardTitle.cjs");
+const Dashboard_styles = require("./components/Dashboard/Dashboard.styles.cjs");
+const Dashboard = require("./components/Dashboard/Dashboard.cjs");
 const Flow_styles = require("./components/Flow/Flow.styles.cjs");
 const Background = require("./components/Flow/Background/Background.cjs");
 const Controls = require("./components/Flow/Controls/Controls.cjs");
@@ -28,19 +17,22 @@ const Node_styles = require("./components/Flow/Node/Node.styles.cjs");
 const Node = require("./components/Flow/Node/Node.cjs");
 const useFlowNode = require("./components/Flow/hooks/useFlowNode.cjs");
 const useFlowContext = require("./components/Flow/hooks/useFlowContext.cjs");
-exports.stepNavigationClasses = StepNavigation_styles.staticClasses;
-exports.HvStepNavigation = StepNavigation.HvStepNavigation;
-exports.wizardClasses = Wizard_styles.staticClasses;
-exports.HvWizard = Wizard.HvWizard;
-exports.wizardActionsClasses = WizardActions_styles.staticClasses;
-exports.HvWizardActions = WizardActions.HvWizardActions;
-exports.wizardContainerClasses = WizardContainer_styles.staticClasses;
-exports.HvWizardContainer = WizardContainer.HvWizardContainer;
-exports.wizardContentClasses = WizardContent_styles.staticClasses;
-exports.HvWizardContent = WizardContent.HvWizardContent;
-exports.HvWizardContext = WizardContext.default;
-exports.wizardTitleClasses = WizardTitle_styles.staticClasses;
-exports.HvWizardTitle = WizardTitle.HvWizardTitle;
+const useFlowNodeMeta = require("./components/Flow/hooks/useFlowNodeMeta.cjs");
+const StepNavigation_styles = require("./components/StepNavigation/StepNavigation.styles.cjs");
+const StepNavigation = require("./components/StepNavigation/StepNavigation.cjs");
+const Wizard_styles = require("./components/Wizard/Wizard.styles.cjs");
+const Wizard = require("./components/Wizard/Wizard.cjs");
+const WizardActions_styles = require("./components/Wizard/WizardActions/WizardActions.styles.cjs");
+const WizardActions = require("./components/Wizard/WizardActions/WizardActions.cjs");
+const WizardContainer_styles = require("./components/Wizard/WizardContainer/WizardContainer.styles.cjs");
+const WizardContainer = require("./components/Wizard/WizardContainer/WizardContainer.cjs");
+const WizardContent_styles = require("./components/Wizard/WizardContent/WizardContent.styles.cjs");
+const WizardContent = require("./components/Wizard/WizardContent/WizardContent.cjs");
+const WizardContext = require("./components/Wizard/WizardContext/WizardContext.cjs");
+const WizardTitle_styles = require("./components/Wizard/WizardTitle/WizardTitle.styles.cjs");
+const WizardTitle = require("./components/Wizard/WizardTitle/WizardTitle.cjs");
+exports.dashboardClasses = Dashboard_styles.staticClasses;
+exports.HvDashboard = Dashboard.HvDashboard;
 exports.flowClasses = Flow_styles.staticClasses;
 exports.HvFlowBackground = Background.HvFlowBackground;
 exports.HvFlowControls = Controls.HvFlowControls;
@@ -55,5 +47,23 @@ exports.HvFlowBaseNode = BaseNode.HvFlowBaseNode;
 exports.flowNodeClasses = Node_styles.staticClasses;
 exports.HvFlowNode = Node.HvFlowNode;
 exports.useFlowNode = useFlowNode.useFlowNode;
+exports.useFlowNodeEdges = useFlowNode.useFlowNodeEdges;
+exports.useFlowNodeInputEdges = useFlowNode.useFlowNodeInputEdges;
+exports.useFlowNodeOutputEdges = useFlowNode.useFlowNodeOutputEdges;
+exports.useFlowNodeParents = useFlowNode.useFlowNodeParents;
 exports.useFlowContext = useFlowContext.useFlowContext;
+exports.useFlowNodeMeta = useFlowNodeMeta.useFlowNodeMeta;
+exports.stepNavigationClasses = StepNavigation_styles.staticClasses;
+exports.HvStepNavigation = StepNavigation.HvStepNavigation;
+exports.wizardClasses = Wizard_styles.staticClasses;
+exports.HvWizard = Wizard.HvWizard;
+exports.wizardActionsClasses = WizardActions_styles.staticClasses;
+exports.HvWizardActions = WizardActions.HvWizardActions;
+exports.wizardContainerClasses = WizardContainer_styles.staticClasses;
+exports.HvWizardContainer = WizardContainer.HvWizardContainer;
+exports.wizardContentClasses = WizardContent_styles.staticClasses;
+exports.HvWizardContent = WizardContent.HvWizardContent;
+exports.HvWizardContext = WizardContext.default;
+exports.wizardTitleClasses = WizardTitle_styles.staticClasses;
+exports.HvWizardTitle = WizardTitle.HvWizardTitle;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

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