@hitachivantara/uikit-react-lab 5.17.0 → 5.18.1

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/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/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");
@@ -29,19 +18,21 @@ const Node = require("./components/Flow/Node/Node.cjs");
 const useFlowNode = require("./components/Flow/hooks/useFlowNode.cjs");
 const useFlowContext = require("./components/Flow/hooks/useFlowContext.cjs");
 const useFlowNodeMeta = require("./components/Flow/hooks/useFlowNodeMeta.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 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;
@@ -62,4 +53,17 @@ 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/Dashboard/Dashboard.js

@@ -0,0 +1,69 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { useMemo } from "react";
+import { Global } from "@emotion/react";
+import { WidthProvider, Responsive } from "react-grid-layout";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-core";
+import { useClasses, gridStyles } from "./Dashboard.styles.js";
+import { staticClasses } from "./Dashboard.styles.js";
+const GridLayout = WidthProvider(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
+  } = useDefaultProps("HvDashboard", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  const {
+    activeTheme
+  } = useTheme();
+  const layouts = useMemo(() => {
+    if (layoutsProp)
+      return layoutsProp;
+    if (!layout)
+      return {};
+    return {
+      xs: layout,
+      sm: layout,
+      md: layout,
+      lg: layout,
+      xl: layout
+    };
+  }, [layoutsProp, layout]);
+  const cols = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Global, { styles: gridStyles }),
+    /* @__PURE__ */ jsx(GridLayout, { className: cx(classes.root, className), breakpoints: activeTheme?.breakpoints.values, cols, layouts, ...others, children })
+  ] });
+};
+export {
+  HvDashboard,
+  staticClasses as dashboardClasses
+};
+//# sourceMappingURL=Dashboard.js.map

package/dist/esm/components/Dashboard/Dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.js","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","gridStyles","root","breakpoints","values"],"mappings":";;;;;;;AAiBA,MAAMA,aAAaC,cAAcC,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,gBAAgB,eAAeX,KAAK;AAClC,QAAA;AAAA,IAAEQ;AAAAA,IAASI;AAAAA,EAAAA,IAAOC,WAAWJ,WAAW;AACxC,QAAA;AAAA,IAAEK;AAAAA,MAAgBC,SAAS;AAE3BT,QAAAA,UAAUU,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,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,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAO,QAAQY,WAAW,CAAA;AAAA,wBAC1B,YACC,EAAA,WAAWL,GAAGJ,QAAQU,MAAMhB,SAAS,GACrC,aAAaY,aAAaK,YAAYC,QACtC,MACA,SACA,GAAIV,QAEHT,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Dashboard/Dashboard.styles.js

@@ -0,0 +1,15 @@
+import { css } from "@emotion/react";
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvDashboard", {
+  root: {}
+});
+const gridStyles = /* @__PURE__ */ 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:", 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 */");
+export {
+  gridStyles,
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Dashboard.styles.js.map

package/dist/esm/components/Dashboard/Dashboard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.styles.js","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,cAAc,eAAe;AAAA,EACxEC,MAAM,CAAC;AACT,CAAC;AAEM,MAAMC,6kBAiCKC,MAAMC,OAAOC,YAAU,+lGAAAC,QAAAC,IAAAC,aAAA,eAAA,KAAA,uBAAAF,QAAAC,IAAAC,aAwJxC,eAAA,KAAA,6lOAAA;"}

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

@@ -17,7 +17,7 @@ const Select = ({
   const [opts, setOpts] = 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 = {
@@ -28,7 +28,7 @@ const Select = ({
       return node;
     });
     reactFlowInstance.setNodes(newNodes);
-    setOpts(newOpts);
+    setOpts(newOpts ? Array.isArray(newOpts) ? newOpts : [newOpts] : void 0);
   };
   return /* @__PURE__ */ jsx(
     HvDropdown,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","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","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;AAEpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,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,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQb,SAASc,IAAKK,CAAM,MAAA;AACnB,eAAA;AAAA,UAAEtB,IAAIsB;AAAAA,UAAGrB,OAAOqB;AAAAA,UAAGC,UAAU,CAAC,CAACjB,MAAMkB,KAAMC,CAAAA,QAAQA,QAAQH,CAAC;AAAA,QAAA;AAAA,MAAE,CACtE;AAAA,MACD,UAAUV;AAAAA,MACV,WAAW;AAAA,MACX,aAAaV;AAAAA,IAAAA;AAAAA,EAAAA;AAGnB;AAEA,MAAA,WAAeN;"}
+{"version":3,"file":"Select.js","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","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;AAEpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,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,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQR,SAASc,IAAKK,CAAM,MAAA;AACnB,eAAA;AAAA,UAAEtB,IAAIsB;AAAAA,UAAGrB,OAAOqB;AAAAA,UAAGC,UAAU,CAAC,CAACjB,MAAMkB,KAAMC,CAAAA,QAAQA,QAAQH,CAAC;AAAA,QAAA;AAAA,MAAE,CACtE;AAAA,MACD,UAAUV;AAAAA,MACV,WAAW;AAAA,MACX,aAAaV;AAAAA,IAAAA;AAAAA,EAAAA;AAGnB;AAEA,MAAA,WAAeN;"}

package/dist/esm/index.js

@@ -1,33 +1,36 @@
-import { staticClasses } from "./components/StepNavigation/StepNavigation.styles.js";
-import { HvStepNavigation } from "./components/StepNavigation/StepNavigation.js";
-import { staticClasses as staticClasses2 } from "./components/Wizard/Wizard.styles.js";
-import { HvWizard } from "./components/Wizard/Wizard.js";
-import { staticClasses as staticClasses3 } from "./components/Wizard/WizardActions/WizardActions.styles.js";
-import { HvWizardActions } from "./components/Wizard/WizardActions/WizardActions.js";
-import { staticClasses as staticClasses4 } from "./components/Wizard/WizardContainer/WizardContainer.styles.js";
-import { HvWizardContainer } from "./components/Wizard/WizardContainer/WizardContainer.js";
-import { staticClasses as staticClasses5 } from "./components/Wizard/WizardContent/WizardContent.styles.js";
-import { HvWizardContent } from "./components/Wizard/WizardContent/WizardContent.js";
-import { default as default2 } from "./components/Wizard/WizardContext/WizardContext.js";
-import { staticClasses as staticClasses6 } from "./components/Wizard/WizardTitle/WizardTitle.styles.js";
-import { HvWizardTitle } from "./components/Wizard/WizardTitle/WizardTitle.js";
-import { staticClasses as staticClasses7 } from "./components/Flow/Flow.styles.js";
+import { staticClasses } from "./components/Dashboard/Dashboard.styles.js";
+import { HvDashboard } from "./components/Dashboard/Dashboard.js";
+import { staticClasses as staticClasses2 } from "./components/Flow/Flow.styles.js";
 import { HvFlowBackground } from "./components/Flow/Background/Background.js";
 import { HvFlowControls } from "./components/Flow/Controls/Controls.js";
-import { staticClasses as staticClasses8 } from "./components/Flow/Minimap/Minimap.styles.js";
+import { staticClasses as staticClasses3 } from "./components/Flow/Minimap/Minimap.styles.js";
 import { HvFlowMinimap } from "./components/Flow/Minimap/Minimap.js";
-import { staticClasses as staticClasses9 } from "./components/Flow/Sidebar/Sidebar.styles.js";
+import { staticClasses as staticClasses4 } from "./components/Flow/Sidebar/Sidebar.styles.js";
 import { HvFlowSidebar } from "./components/Flow/Sidebar/Sidebar.js";
 import { HvFlowEmpty } from "./components/Flow/Empty/Empty.js";
 import { HvFlow } from "./components/Flow/Flow.js";
-import { staticClasses as staticClasses10 } from "./components/Flow/Node/BaseNode.styles.js";
+import { staticClasses as staticClasses5 } from "./components/Flow/Node/BaseNode.styles.js";
 import { HvFlowBaseNode } from "./components/Flow/Node/BaseNode.js";
-import { staticClasses as staticClasses11 } from "./components/Flow/Node/Node.styles.js";
+import { staticClasses as staticClasses6 } from "./components/Flow/Node/Node.styles.js";
 import { HvFlowNode } from "./components/Flow/Node/Node.js";
 import { useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeParents } from "./components/Flow/hooks/useFlowNode.js";
 import { useFlowContext } from "./components/Flow/hooks/useFlowContext.js";
 import { useFlowNodeMeta } from "./components/Flow/hooks/useFlowNodeMeta.js";
+import { staticClasses as staticClasses7 } from "./components/StepNavigation/StepNavigation.styles.js";
+import { HvStepNavigation } from "./components/StepNavigation/StepNavigation.js";
+import { staticClasses as staticClasses8 } from "./components/Wizard/Wizard.styles.js";
+import { HvWizard } from "./components/Wizard/Wizard.js";
+import { staticClasses as staticClasses9 } from "./components/Wizard/WizardActions/WizardActions.styles.js";
+import { HvWizardActions } from "./components/Wizard/WizardActions/WizardActions.js";
+import { staticClasses as staticClasses10 } from "./components/Wizard/WizardContainer/WizardContainer.styles.js";
+import { HvWizardContainer } from "./components/Wizard/WizardContainer/WizardContainer.js";
+import { staticClasses as staticClasses11 } from "./components/Wizard/WizardContent/WizardContent.styles.js";
+import { HvWizardContent } from "./components/Wizard/WizardContent/WizardContent.js";
+import { default as default2 } from "./components/Wizard/WizardContext/WizardContext.js";
+import { staticClasses as staticClasses12 } from "./components/Wizard/WizardTitle/WizardTitle.styles.js";
+import { HvWizardTitle } from "./components/Wizard/WizardTitle/WizardTitle.js";
 export {
+  HvDashboard,
   HvFlow,
   HvFlowBackground,
   HvFlowBaseNode,
@@ -43,12 +46,13 @@ export {
   HvWizardContent,
   default2 as HvWizardContext,
   HvWizardTitle,
-  staticClasses10 as flowBaseNodeClasses,
-  staticClasses7 as flowClasses,
-  staticClasses8 as flowMinimapClasses,
-  staticClasses11 as flowNodeClasses,
-  staticClasses9 as flowSidebarClasses,
-  staticClasses as stepNavigationClasses,
+  staticClasses as dashboardClasses,
+  staticClasses5 as flowBaseNodeClasses,
+  staticClasses2 as flowClasses,
+  staticClasses3 as flowMinimapClasses,
+  staticClasses6 as flowNodeClasses,
+  staticClasses4 as flowSidebarClasses,
+  staticClasses7 as stepNavigationClasses,
   useFlowContext,
   useFlowNode,
   useFlowNodeEdges,
@@ -56,10 +60,10 @@ export {
   useFlowNodeMeta,
   useFlowNodeOutputEdges,
   useFlowNodeParents,
-  staticClasses3 as wizardActionsClasses,
-  staticClasses2 as wizardClasses,
-  staticClasses4 as wizardContainerClasses,
-  staticClasses5 as wizardContentClasses,
-  staticClasses6 as wizardTitleClasses
+  staticClasses9 as wizardActionsClasses,
+  staticClasses8 as wizardClasses,
+  staticClasses10 as wizardContainerClasses,
+  staticClasses11 as wizardContentClasses,
+  staticClasses12 as wizardTitleClasses
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/types/index.d.ts

@@ -28,8 +28,14 @@ import { NodeProps } from 'reactflow';
 import { PanelPosition } from 'reactflow';
 import { default as React_2 } from 'react';
 import { ReactFlowProps } from 'reactflow';
+import { ReactGridLayoutProps } from 'react-grid-layout';
+import { ResponsiveProps } from 'react-grid-layout';
 import { SetStateAction } from 'react';
 
+export declare const dashboardClasses: {
+    root: "HvDashboard-root";
+};
+
 export declare const flowBaseNodeClasses: {
     root: "HvFlowBaseNode-root";
     title: "HvFlowBaseNode-title";
@@ -62,13 +68,42 @@ export declare const flowNodeClasses: {
 export declare const flowSidebarClasses: {
     description: "HvFlowSidebar-description";
     titleContainer: "HvFlowSidebar-titleContainer";
-    contentContainer: "HvFlowSidebar-contentContainer";
     drawerPaper: "HvFlowSidebar-drawerPaper";
+    contentContainer: "HvFlowSidebar-contentContainer";
     searchRoot: "HvFlowSidebar-searchRoot";
     groupsContainer: "HvFlowSidebar-groupsContainer";
     nodeType: "HvFlowSidebar-nodeType";
 };
 
+/**
+ * A Dashboard grid layout component, based on `react-grid-layout`.
+ * The children elements are grid items and must be `key`ed.
+ *
+ * @see https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#grid-layout-props
+ *
+ * DISCLAIMER: This component is a work in progress and there might be breaking changes.
+ */
+export declare const HvDashboard: (props: HvDashboardProps) => JSX_2.Element;
+
+export declare type HvDashboardClasses = ExtractNames<typeof useClasses>;
+
+export declare interface HvDashboardProps extends Omit<ResponsiveProps, "cols"> {
+    /** Dashboard items. Each node must be `key`'ed  */
+    children: React.ReactNode;
+    /** An object used to override or extend the styles applied. */
+    classes?: HvDashboardClasses;
+    /**
+     * Layout is an array of object with the format:
+     *
+     * `{i: string, x: number, y: number, w: number, h: number}`
+     *
+     * The `i` must match the key used on each item component.
+     */
+    layout?: ReactGridLayoutProps["layout"];
+    /** Number of grid columns or an object of breakpoint -> #columns */
+    cols?: number | ResponsiveProps["cols"];
+}
+
 declare interface HvDroppableFlowProps<NodeType extends string | undefined = string | undefined, NodeData = any> extends Omit<ReactFlowProps, "nodes" | "edges" | "nodeTypes"> {
     /** Flow content: background, controls, and minimap. */
     children?: React.ReactNode;
@@ -113,7 +148,7 @@ export declare interface HvFlowBackgroundProps extends Omit<BackgroundProps, "co
 
 export declare const HvFlowBaseNode: ({ id, title, headerItems, icon, color: colorProp, inputs, outputs, nodeActions, classes: classesProp, className, children, }: HvFlowBaseNodeProps<unknown>) => JSX_2.Element | null;
 
-export declare type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses_11>;
+export declare type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses_5>;
 
 export declare interface HvFlowBaseNodeProps<T = any> extends Omit<HvBaseProps, "id">, NodeProps<T> {
     /** Header title */
@@ -140,7 +175,7 @@ export declare type HvFlowBuiltInActions = Omit<HvFlowNodeAction, "id" | "callba
     id: HvFlowBuiltInAction;
 };
 
-export declare type HvFlowClasses = ExtractNames<typeof useClasses_8>;
+export declare type HvFlowClasses = ExtractNames<typeof useClasses_2>;
 
 declare interface HvFlowContextValue<NodeGroups extends keyof any = string> {
     /** Flow nodes types. */
@@ -186,7 +221,7 @@ export declare interface HvFlowEmptyProps extends HvEmptyStateProps {
 
 export declare const HvFlowMinimap: ({ nodeColor, maskColor, maskStrokeColor, nodeStrokeColor, classes: classesProp, className, ...others }: HvFlowMinimapProps) => JSX_2.Element;
 
-export declare type HvFlowMinimapClasses = ExtractNames<typeof useClasses_9>;
+export declare type HvFlowMinimapClasses = ExtractNames<typeof useClasses_3>;
 
 export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMapProps<NodeData>, "nodeColor" | "nodeStrokeColor" | "maskColor" | "maskStrokeColor"> {
     /** Node color. Defaults to `atmo4`. */
@@ -207,7 +242,7 @@ export declare interface HvFlowNodeAction extends HvActionGeneric {
     callback?: (node: Node_2) => void;
 }
 
-export declare type HvFlowNodeClasses = ExtractNames<typeof useClasses_12>;
+export declare type HvFlowNodeClasses = ExtractNames<typeof useClasses_6>;
 
 export declare interface HvFlowNodeComponentClass<GroupId extends keyof any = string, NodeData = any> extends ComponentClass<NodeProps>, NodeExtras<GroupId, NodeData> {
 }
@@ -327,7 +362,7 @@ export declare interface HvFlowProps<NodeGroups extends keyof any = string, Node
 
 export declare const HvFlowSidebar: ({ id, title, description, anchor, buttonTitle, classes: classesProp, labels: labelsProps, dragOverlayProps, defaultGroupProps, ...others }: HvFlowSidebarProps) => JSX_2.Element;
 
-export declare type HvFlowSidebarClasses = ExtractNames<typeof useClasses_10>;
+export declare type HvFlowSidebarClasses = ExtractNames<typeof useClasses_4>;
 
 export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes" | "title"> {
     /** Sidebar title. */
@@ -353,7 +388,7 @@ export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes
     defaultGroupProps?: HvFlowNodeGroup;
 }
 
-declare type HvStepClasses = ExtractNames<typeof useClasses_2>;
+declare type HvStepClasses = ExtractNames<typeof useClasses_8>;
 
 /**
  * Navigation page with steps.
@@ -378,7 +413,7 @@ declare type HvStepClasses = ExtractNames<typeof useClasses_2>;
  */
 export declare const HvStepNavigation: ({ className, classes: classesProp, width, steps, stepSize, showTitles, type, "aria-label": ariaLabel, ...others }: HvStepNavigationProps) => JSX_2.Element;
 
-export declare type HvStepNavigationClasses = ExtractNames<typeof useClasses>;
+export declare type HvStepNavigationClasses = ExtractNames<typeof useClasses_7>;
 
 export declare interface HvStepNavigationProps extends HvBaseProps {
     /** Type of step navigation. Values = {"Simple", "Default"} */
@@ -424,7 +459,7 @@ export declare const HvWizard: ({ className, children, onClose, handleSubmit, ti
 
 export declare const HvWizardActions: ({ classes: classesProp, handleClose, handleSubmit, loading, skippable, labels, }: HvWizardActionsProps) => JSX_2.Element;
 
-export declare type HvWizardActionsClasses = ExtractNames<typeof useClasses_4>;
+export declare type HvWizardActionsClasses = ExtractNames<typeof useClasses_10>;
 
 export declare interface HvWizardActionsProps extends HvBaseProps {
     /** Function to handle the cancel button. */
@@ -452,11 +487,11 @@ export declare interface HvWizardActionsProps extends HvBaseProps {
     classes?: HvWizardActionsClasses;
 }
 
-export declare type HvWizardClasses = ExtractNames<typeof useClasses_3>;
+export declare type HvWizardClasses = ExtractNames<typeof useClasses_9>;
 
 export declare const HvWizardContainer: (props: HvWizardContainerProps) => JSX_2.Element;
 
-export declare type HvWizardContainerClasses = ExtractNames<typeof useClasses_6>;
+export declare type HvWizardContainerClasses = ExtractNames<typeof useClasses_12>;
 
 export declare interface HvWizardContainerProps extends Omit<HvBaseProps, "onClose">, Pick<HvDialogProps, "maxWidth" | "fullWidth"> {
     /** Current state of the Wizard. */
@@ -469,7 +504,7 @@ export declare interface HvWizardContainerProps extends Omit<HvBaseProps, "onClo
 
 export declare const HvWizardContent: ({ classes: classesProp, fixedHeight, loading, children, summaryContent, }: HvWizardContentProps) => JSX_2.Element;
 
-export declare type HvWizardContentClasses = ExtractNames<typeof useClasses_7>;
+export declare type HvWizardContentClasses = ExtractNames<typeof useClasses_13>;
 
 export declare interface HvWizardContentProps extends HvBaseProps {
     /** Forces minimum height to the component. */
@@ -536,7 +571,7 @@ export declare type HvWizardTabs = {
 
 export declare const HvWizardTitle: ({ title, hasSummary, labels, classes: classesProp, customStep, }: HvWizardTitleProps) => JSX_2.Element;
 
-export declare type HvWizardTitleClasses = ExtractNames<typeof useClasses_5>;
+export declare type HvWizardTitleClasses = ExtractNames<typeof useClasses_11>;
 
 export declare interface HvWizardTitleProps extends HvBaseProps {
     /** Title for the wizard. */
@@ -566,13 +601,9 @@ export declare const stepNavigationClasses: {
     titles: "HvStepNavigation-titles";
 };
 
-declare const useClasses: (classesProp?: Partial<Record<"root" | "separator" | "li" | "ol" | "titles", string>>, addStatic?: boolean) => {
+declare const useClasses: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
-        separator: string;
-        li: string;
-        ol: string;
-        titles: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -581,15 +612,12 @@ declare const useClasses: (classesProp?: Partial<Record<"root" | "separator" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titleContainer" | "contentContainer" | "drawerPaper" | "searchRoot" | "groupsContainer" | "nodeType", string>>, addStatic?: boolean) => {
+declare const useClasses_10: (classesProp?: Partial<Record<"actionsContainer" | "buttonWidth" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
     classes: {
-        description: string;
-        titleContainer: string;
-        contentContainer: string;
-        drawerPaper: string;
-        searchRoot: string;
-        groupsContainer: string;
-        nodeType: string;
+        actionsContainer: string;
+        buttonWidth: string;
+        buttonsContainer: string;
+        buttonSpacing: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -598,20 +626,14 @@ declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titl
     cx: (...args: any) => string;
 };
 
-declare const useClasses_11: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "inputContainer" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "outputContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_11: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "headerContainer" | "buttonWidth" | "rootSummaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
     classes: {
-        root: string;
-        title: string;
         titleContainer: string;
-        mandatory: string;
-        inputContainer: string;
-        contentContainer: string;
+        messageContainer: string;
         headerContainer: string;
-        inputsTitleContainer: string;
-        outputsTitleContainer: string;
-        inputsContainer: string;
-        outputsContainer: string;
-        outputContainer: string;
+        buttonWidth: string;
+        rootSummaryButton: string;
+        stepContainer: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -620,11 +642,11 @@ declare const useClasses_11: (classesProp?: Partial<Record<"root" | "title" | "t
     cx: (...args: any) => string;
 };
 
-declare const useClasses_12: (classesProp?: Partial<Record<"actions" | "subtitleContainer" | "paramsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_12: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
     classes: {
-        actions: string;
-        subtitleContainer: string;
-        paramsContainer: string;
+        root: string;
+        paper: string;
+        closeButton: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -633,18 +655,24 @@ declare const useClasses_12: (classesProp?: Partial<Record<"actions" | "subtitle
     cx: (...args: any) => string;
 };
 
-declare const useClasses_2: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "avatar" | "ghost" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
+declare const useClasses_13: (classesProp?: Partial<Record<"contentContainer" | "fixedHeight" | "summaryRef" | "summarySticky" | "summaryContainer", string>>, addStatic?: boolean) => {
+    classes: {
+        contentContainer: string;
+        fixedHeight: string;
+        summaryRef: string;
+        summarySticky: string;
+        summaryContainer: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_2: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     classes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
         root: string;
-        avatar: string;
-        ghost: string;
-        ghostDisabled: string;
-        notCurrent: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -664,12 +692,15 @@ declare const useClasses_3: (classesProp?: Partial<Record<"root", string>>, addS
     cx: (...args: any) => string;
 };
 
-declare const useClasses_4: (classesProp?: Partial<Record<"actionsContainer" | "buttonWidth" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
+declare const useClasses_4: (classesProp?: Partial<Record<"description" | "titleContainer" | "drawerPaper" | "contentContainer" | "searchRoot" | "groupsContainer" | "nodeType", string>>, addStatic?: boolean) => {
     classes: {
-        actionsContainer: string;
-        buttonWidth: string;
-        buttonsContainer: string;
-        buttonSpacing: string;
+        description: string;
+        titleContainer: string;
+        drawerPaper: string;
+        contentContainer: string;
+        searchRoot: string;
+        groupsContainer: string;
+        nodeType: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -678,14 +709,20 @@ declare const useClasses_4: (classesProp?: Partial<Record<"actionsContainer" | "
     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<"root" | "title" | "titleContainer" | "mandatory" | "inputContainer" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "outputContainer", string>>, addStatic?: boolean) => {
     classes: {
+        root: string;
+        title: string;
         titleContainer: string;
-        messageContainer: string;
-        buttonWidth: string;
-        rootSummaryButton: string;
+        mandatory: string;
+        inputContainer: string;
+        contentContainer: string;
         headerContainer: string;
-        stepContainer: string;
+        inputsTitleContainer: string;
+        outputsTitleContainer: string;
+        inputsContainer: string;
+        outputsContainer: string;
+        outputContainer: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -694,11 +731,11 @@ declare const useClasses_5: (classesProp?: Partial<Record<"titleContainer" | "me
     cx: (...args: any) => string;
 };
 
-declare const useClasses_6: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
+declare const useClasses_6: (classesProp?: Partial<Record<"actions" | "subtitleContainer" | "paramsContainer", string>>, addStatic?: boolean) => {
     classes: {
-        root: string;
-        paper: string;
-        closeButton: string;
+        actions: string;
+        subtitleContainer: string;
+        paramsContainer: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -707,13 +744,13 @@ declare const useClasses_6: (classesProp?: Partial<Record<"root" | "paper" | "cl
     cx: (...args: any) => string;
 };
 
-declare const useClasses_7: (classesProp?: Partial<Record<"contentContainer" | "fixedHeight" | "summaryRef" | "summarySticky" | "summaryContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_7: (classesProp?: Partial<Record<"root" | "separator" | "li" | "ol" | "titles", string>>, addStatic?: boolean) => {
     classes: {
-        contentContainer: string;
-        fixedHeight: string;
-        summaryRef: string;
-        summarySticky: string;
-        summaryContainer: string;
+        root: string;
+        separator: string;
+        li: string;
+        ol: string;
+        titles: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -722,9 +759,18 @@ declare const useClasses_7: (classesProp?: Partial<Record<"contentContainer" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_8: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_8: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "avatar" | "ghost" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
     classes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
         root: string;
+        avatar: string;
+        ghost: string;
+        ghostDisabled: string;
+        notCurrent: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -786,9 +832,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.17.0",
+  "version": "5.18.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,10 +32,11 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.36.10",
-    "@hitachivantara/uikit-react-icons": "^5.7.4",
-    "@hitachivantara/uikit-styles": "^5.16.2",
+    "@hitachivantara/uikit-react-core": "^5.37.0",
+    "@hitachivantara/uikit-react-icons": "^5.7.6",
+    "@hitachivantara/uikit-styles": "^5.16.3",
     "lodash": "^4.17.21",
+    "react-grid-layout": "^1.4.3",
     "reactflow": "^11.9.4",
     "uid": "^2.0.2",
     "usehooks-ts": "^2.9.1",
@@ -48,7 +49,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "51d5aaf46b3f007d313ead5ce8bfd5d3b248bc80",
+  "gitHead": "ccae7457cd79b27e3c30bf3865f1fd1e2fbca56d",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {