@hitachivantara/uikit-react-lab 5.19.0 → 5.19.1

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

@@ -24,25 +24,14 @@ const HvDashboard = (props) => {
     classes: classesProp,
     ...others
   } = uikitReactCore.useDefaultProps("HvDashboard", props);
-  const {
-    classes,
-    cx
-  } = Dashboard_styles.useClasses(classesProp);
-  const {
-    activeTheme
-  } = uikitReactCore.useTheme();
+  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
-    };
+    return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };
   }, [layoutsProp, layout]);
   const cols = React.useMemo(() => {
     if (!colsProp)
@@ -60,7 +49,17 @@ const HvDashboard = (props) => {
   }, [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 })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GridLayout,
+      {
+        className: cx(classes.root, className),
+        breakpoints: activeTheme?.breakpoints.values,
+        cols,
+        layouts,
+        ...others,
+        children
+      }
+    )
   ] });
 };
 exports.dashboardClasses = Dashboard_styles.staticClasses;

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

@@ -1 +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;;;"}
+{"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":["WidthProvider","ResponsiveGrid","useDefaultProps","useClasses","useTheme","useMemo","jsxs","Fragment","jsx","Global","gridStyles"],"mappings":";;;;;;;;AAiBA,MAAM,aAAaA,gBAAAA,cAAcC,gBAAAA,UAAc;AAG/C,MAAM,cAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA+Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACDC,eAAgB,gBAAA,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAIC,4BAAW,WAAW;AACxC,QAAA,EAAE,gBAAgBC,eAAAA;AAElB,QAAA,UAAUC,MAAAA,QAAiB,MAAM;AACjC,QAAA;AAAoB,aAAA;AACxB,QAAI,CAAC;AAAQ,aAAO;AAEb,WAAA,EAAE,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAO;AAAA,EAAA,GACnE,CAAC,aAAa,MAAM,CAAC;AAElB,QAAA,OAAOA,MAAAA,QAAiC,MAAM;AAClD,QAAI,CAAC;AAAiB,aAAA;AAElB,QAAA,OAAO,aAAa,UAAU;AACzB,aAAA;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IAER;AAEO,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAEb,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAACC,2BAAAA,IAAAC,MAAA,QAAA,EAAO,QAAQC,iBAAY,WAAA,CAAA;AAAA,IAC5BF,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,aAAa,aAAa,YAAY;AAAA,QACtC;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}

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

@@ -2,13 +2,195 @@
 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", {
+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 */");
+const gridStyles = 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);
+  }
+`;
 exports.gridStyles = gridStyles;
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

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

@@ -1 +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;;;;"}
+{"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":["createClasses","css","theme"],"mappings":";;;;AAGO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AACT,CAAC;AAEM,MAAM,aAAaC,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,kBAiCRC,eAAA,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Background.cjs","sources":["../../../../../src/components/Flow/Background/Background.tsx"],"sourcesContent":["import { Background, BackgroundProps } from \"reactflow\";\n\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nexport interface HvFlowBackgroundProps extends Omit<BackgroundProps, \"color\"> {\n  /** Color for the background dots. Defaults to `secondary`. */\n  color?: HvColorAny;\n}\n\nexport const HvFlowBackground = ({\n  color = \"secondary\",\n  ...others\n}: HvFlowBackgroundProps) => {\n  return (\n    <Background color={getColor(color, theme.colors.secondary)} {...others} />\n  );\n};\n"],"names":["HvFlowBackground","color","others","jsx","Background","getColor","theme","colors","secondary"],"mappings":";;;;;AASO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC,QAAQ;AAAA,EACR,GAAGC;AACkB,MAAM;AAEzB,SAAAC,+BAACC,UAAAA,YAAW,EAAA,OAAOC,YAAAA,SAASJ,OAAOK,kBAAMC,OAAOC,SAAS,GAAG,GAAIN,OAAU,CAAA;AAE9E;;"}
+{"version":3,"file":"Background.cjs","sources":["../../../../../src/components/Flow/Background/Background.tsx"],"sourcesContent":["import { Background, BackgroundProps } from \"reactflow\";\n\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nexport interface HvFlowBackgroundProps extends Omit<BackgroundProps, \"color\"> {\n  /** Color for the background dots. Defaults to `secondary`. */\n  color?: HvColorAny;\n}\n\nexport const HvFlowBackground = ({\n  color = \"secondary\",\n  ...others\n}: HvFlowBackgroundProps) => {\n  return (\n    <Background color={getColor(color, theme.colors.secondary)} {...others} />\n  );\n};\n"],"names":["jsx","Background","getColor","theme"],"mappings":";;;;;AASO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAQ;AAAA,EACR,GAAG;AACL,MAA6B;AAEzB,SAAAA,+BAACC,UAAAA,YAAW,EAAA,OAAOC,YAAAA,SAAS,OAAOC,kBAAM,OAAO,SAAS,GAAI,GAAG,OAAQ,CAAA;AAE5E;;"}

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

@@ -31,17 +31,12 @@ const HvFlowControls = ({
   children,
   ...others
 }) => {
-  const {
-    isInteractive,
-    minZoomReached,
-    maxZoomReached
-  } = ReactFlow.useStore(selector, shallow.shallow);
+  const { isInteractive, minZoomReached, maxZoomReached } = ReactFlow.useStore(
+    selector,
+    shallow.shallow
+  );
   const store = ReactFlow.useStoreApi();
-  const {
-    zoomIn,
-    zoomOut,
-    fitView
-  } = ReactFlow.useReactFlow();
+  const { zoomIn, zoomOut, fitView } = ReactFlow.useReactFlow();
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const handleZoomIn = () => {
     zoomIn();
@@ -64,10 +59,36 @@ const HvFlowControls = ({
     onInteractiveChange?.(!isInteractive);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Panel, { position, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, { vertical: orientation === "vertical", children: [
-    !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.zoomIn, onClick: handleZoomIn, disabled: maxZoomReached, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, { role: "none" }) }),
-    !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.zoomOut, onClick: handleZoomOut, disabled: minZoomReached, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, { role: "none" }) }),
+    !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(
+      uikitReactCore.HvButton,
+      {
+        icon: true,
+        title: labels?.zoomIn,
+        onClick: handleZoomIn,
+        disabled: maxZoomReached,
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, { role: "none" })
+      }
+    ),
+    !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(
+      uikitReactCore.HvButton,
+      {
+        icon: true,
+        title: labels?.zoomOut,
+        onClick: handleZoomOut,
+        disabled: minZoomReached,
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, { role: "none" })
+      }
+    ),
     !hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, { role: "none" }) }),
-    !hideInteractive && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.interactive, onClick: handleInteractive, children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, { role: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, { role: "none" }) }),
+    !hideInteractive && /* @__PURE__ */ jsxRuntime.jsx(
+      uikitReactCore.HvButton,
+      {
+        icon: true,
+        title: labels?.interactive,
+        onClick: handleInteractive,
+        children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, { role: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, { role: "none" })
+      }
+    ),
     children
   ] }) });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Controls.cjs","sources":["../../../../../src/components/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n  ControlProps,\n  Panel,\n  PanelPosition,\n  ReactFlowState,\n  useReactFlow,\n  useStore,\n  useStoreApi,\n} from \"reactflow\";\n\nimport { shallow } from \"zustand/shallow\";\n\nimport {\n  HvButton,\n  HvMultiButton,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  Focus,\n  Lock,\n  Unlock,\n  ZoomIn,\n  ZoomOut,\n} from \"@hitachivantara/uikit-react-icons\";\n\nexport type HvFlowControlsPosition = PanelPosition;\n\nexport interface HvFlowControlsProps\n  extends Omit<\n    ControlProps,\n    \"position\" | \"showFitView\" | \"showInteractive\" | \"showZoom\"\n  > {\n  /** Controls position. Defaults to `bottom-center`. */\n  position?: HvFlowControlsPosition;\n  /** Controls orientation. Defaults to `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Labels used on the controls buttons. */\n  labels?: {\n    zoomIn?: string;\n    zoomOut?: string;\n    fitView?: string;\n    interactive?: string;\n  };\n  /** Whether to hide the zoom controls. */\n  hideZoom?: boolean;\n  /** Whether to hide the fit view controls. */\n  hideFitView?: boolean;\n  /** Whether to hide the interactive controls. */\n  hideInteractive?: boolean;\n}\n\nconst DEFAULT_LABELS: HvFlowControlsProps[\"labels\"] = {\n  fitView: \"Fit view\",\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  interactive: \"Interactive\",\n};\n\nconst selector = (state: ReactFlowState) => ({\n  isInteractive:\n    state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,\n  minZoomReached: state.transform[2] <= state.minZoom,\n  maxZoomReached: state.transform[2] >= state.maxZoom,\n});\n\nexport const HvFlowControls = ({\n  onZoomIn: onZoomInProp,\n  onZoomOut: onZoomOutProp,\n  onFitView: onFitViewProp,\n  labels: labelsProps,\n  hideInteractive,\n  hideFitView,\n  hideZoom,\n  position = \"bottom-center\",\n  orientation = \"horizontal\",\n  onInteractiveChange,\n  fitViewOptions,\n  children,\n  ...others\n}: HvFlowControlsProps) => {\n  const { isInteractive, minZoomReached, maxZoomReached } = useStore(\n    selector,\n    shallow\n  );\n  const store = useStoreApi();\n  const { zoomIn, zoomOut, fitView } = useReactFlow();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const handleZoomIn = () => {\n    zoomIn();\n    onZoomInProp?.();\n  };\n\n  const handleZoomOut = () => {\n    zoomOut();\n    onZoomOutProp?.();\n  };\n\n  const handleFitView = () => {\n    fitView(fitViewOptions);\n    onFitViewProp?.();\n  };\n\n  const handleInteractive = () => {\n    store.setState({\n      nodesDraggable: !isInteractive,\n      nodesConnectable: !isInteractive,\n      elementsSelectable: !isInteractive,\n    });\n\n    onInteractiveChange?.(!isInteractive);\n  };\n\n  return (\n    <Panel position={position} {...others}>\n      <HvMultiButton vertical={orientation === \"vertical\"}>\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomIn}\n            onClick={handleZoomIn}\n            disabled={maxZoomReached}\n          >\n            <ZoomIn role=\"none\" />\n          </HvButton>\n        )}\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomOut}\n            onClick={handleZoomOut}\n            disabled={minZoomReached}\n          >\n            <ZoomOut role=\"none\" />\n          </HvButton>\n        )}\n        {!hideFitView && (\n          <HvButton icon title={labels?.fitView} onClick={handleFitView}>\n            <Focus role=\"none\" />\n          </HvButton>\n        )}\n        {!hideInteractive && (\n          <HvButton\n            icon\n            title={labels?.interactive}\n            onClick={handleInteractive}\n          >\n            {isInteractive ? <Unlock role=\"none\" /> : <Lock role=\"none\" />}\n          </HvButton>\n        )}\n        {children}\n      </HvMultiButton>\n    </Panel>\n  );\n};\n"],"names":["DEFAULT_LABELS","fitView","zoomIn","zoomOut","interactive","selector","state","isInteractive","nodesDraggable","nodesConnectable","elementsSelectable","minZoomReached","transform","minZoom","maxZoomReached","maxZoom","HvFlowControls","onZoomIn","onZoomInProp","onZoomOut","onZoomOutProp","onFitView","onFitViewProp","labels","labelsProps","hideInteractive","hideFitView","hideZoom","position","orientation","onInteractiveChange","fitViewOptions","children","others","useStore","shallow","store","useStoreApi","useReactFlow","useLabels","handleZoomIn","handleZoomOut","handleFitView","handleInteractive","setState","jsx","Panel","jsxs","HvMultiButton","HvButton","ZoomIn","ZoomOut","Focus","Unlock","Lock"],"mappings":";;;;;;;AAmDA,MAAMA,iBAAgD;AAAA,EACpDC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,aAAa;AACf;AAEA,MAAMC,WAAWA,CAACC,WAA2B;AAAA,EAC3CC,eACED,MAAME,kBAAkBF,MAAMG,oBAAoBH,MAAMI;AAAAA,EAC1DC,gBAAgBL,MAAMM,UAAU,CAAC,KAAKN,MAAMO;AAAAA,EAC5CC,gBAAgBR,MAAMM,UAAU,CAAC,KAAKN,MAAMS;AAC9C;AAEO,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC,UAAUC;AAAAA,EACVC,WAAWC;AAAAA,EACXC,WAAWC;AAAAA,EACXC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAE1B;AAAAA,IAAeI;AAAAA,IAAgBG;AAAAA,EAAAA,IAAmBoB,UACxD7B,SAAAA,UACA8B,QAAAA,OACF;AACA,QAAMC,QAAQC,UAAAA;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,UAAa,aAAA;AAE5Cf,QAAAA,SAASgB,eAAAA,UAAUvC,gBAAgBwB,WAAW;AAEpD,QAAMgB,eAAeA,MAAM;AAClB;AACQ;EAAA;AAGjB,QAAMC,gBAAgBA,MAAM;AAClB;AACQ;EAAA;AAGlB,QAAMC,gBAAgBA,MAAM;AAC1BzC,YAAQ8B,cAAc;AACN;EAAA;AAGlB,QAAMY,oBAAoBA,MAAM;AAC9BP,UAAMQ,SAAS;AAAA,MACbpC,gBAAgB,CAACD;AAAAA,MACjBE,kBAAkB,CAACF;AAAAA,MACnBG,oBAAoB,CAACH;AAAAA,IAAAA,CACtB;AAEDuB,0BAAsB,CAACvB,aAAa;AAAA,EAAA;AAIpC,SAAAsC,2BAAA,IAACC,mBAAM,UAAwBb,GAAAA,QAC7B,UAACc,2BAAA,KAAAC,eAAA,eAAA,EAAc,UAAUnB,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAACF,YACCkB,2BAAA,IAAAI,yBAAA,EACC,MAAI,MACJ,OAAO1B,QAAQrB,QACf,SAASsC,cACT,UAAU1B,gBAEV,UAAA+B,2BAAA,IAACK,gBAAO,QAAA,EAAA,MAAK,OAAM,CAAA,GACrB;AAAA,IAED,CAACvB,YACAkB,2BAAA,IAACI,yBACC,EAAA,MAAI,MACJ,OAAO1B,QAAQpB,SACf,SAASsC,eACT,UAAU9B,gBAEV,yCAACwC,gBAAQ,SAAA,EAAA,MAAK,OAAM,CAAA,GACtB;AAAA,IAED,CAACzB,eACCmB,2BAAAA,IAAAI,eAAA,UAAA,EAAS,MAAI,MAAC,OAAO1B,QAAQtB,SAAS,SAASyC,eAC9C,UAAAG,+BAACO,gBAAAA,OAAM,EAAA,MAAK,OAAM,CAAA,GACpB;AAAA,IAED,CAAC3B,mBACCoB,2BAAAA,IAAAI,eAAA,UAAA,EACC,MAAI,MACJ,OAAO1B,QAAQnB,aACf,SAASuC,mBAERpC,UAAgB,gBAAAsC,2BAAAA,IAACQ,0BAAO,MAAK,OAAA,CAAM,IAAOR,+BAAAS,gBAAAA,MAAA,EAAK,MAAK,OAAA,CAAS,EAChE,CAAA;AAAA,IAEDtB;AAAAA,EAAAA,EACH,CAAA,EACF,CAAA;AAEJ;;"}
+{"version":3,"file":"Controls.cjs","sources":["../../../../../src/components/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n  ControlProps,\n  Panel,\n  PanelPosition,\n  ReactFlowState,\n  useReactFlow,\n  useStore,\n  useStoreApi,\n} from \"reactflow\";\n\nimport { shallow } from \"zustand/shallow\";\n\nimport {\n  HvButton,\n  HvMultiButton,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  Focus,\n  Lock,\n  Unlock,\n  ZoomIn,\n  ZoomOut,\n} from \"@hitachivantara/uikit-react-icons\";\n\nexport type HvFlowControlsPosition = PanelPosition;\n\nexport interface HvFlowControlsProps\n  extends Omit<\n    ControlProps,\n    \"position\" | \"showFitView\" | \"showInteractive\" | \"showZoom\"\n  > {\n  /** Controls position. Defaults to `bottom-center`. */\n  position?: HvFlowControlsPosition;\n  /** Controls orientation. Defaults to `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Labels used on the controls buttons. */\n  labels?: {\n    zoomIn?: string;\n    zoomOut?: string;\n    fitView?: string;\n    interactive?: string;\n  };\n  /** Whether to hide the zoom controls. */\n  hideZoom?: boolean;\n  /** Whether to hide the fit view controls. */\n  hideFitView?: boolean;\n  /** Whether to hide the interactive controls. */\n  hideInteractive?: boolean;\n}\n\nconst DEFAULT_LABELS: HvFlowControlsProps[\"labels\"] = {\n  fitView: \"Fit view\",\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  interactive: \"Interactive\",\n};\n\nconst selector = (state: ReactFlowState) => ({\n  isInteractive:\n    state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,\n  minZoomReached: state.transform[2] <= state.minZoom,\n  maxZoomReached: state.transform[2] >= state.maxZoom,\n});\n\nexport const HvFlowControls = ({\n  onZoomIn: onZoomInProp,\n  onZoomOut: onZoomOutProp,\n  onFitView: onFitViewProp,\n  labels: labelsProps,\n  hideInteractive,\n  hideFitView,\n  hideZoom,\n  position = \"bottom-center\",\n  orientation = \"horizontal\",\n  onInteractiveChange,\n  fitViewOptions,\n  children,\n  ...others\n}: HvFlowControlsProps) => {\n  const { isInteractive, minZoomReached, maxZoomReached } = useStore(\n    selector,\n    shallow\n  );\n  const store = useStoreApi();\n  const { zoomIn, zoomOut, fitView } = useReactFlow();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const handleZoomIn = () => {\n    zoomIn();\n    onZoomInProp?.();\n  };\n\n  const handleZoomOut = () => {\n    zoomOut();\n    onZoomOutProp?.();\n  };\n\n  const handleFitView = () => {\n    fitView(fitViewOptions);\n    onFitViewProp?.();\n  };\n\n  const handleInteractive = () => {\n    store.setState({\n      nodesDraggable: !isInteractive,\n      nodesConnectable: !isInteractive,\n      elementsSelectable: !isInteractive,\n    });\n\n    onInteractiveChange?.(!isInteractive);\n  };\n\n  return (\n    <Panel position={position} {...others}>\n      <HvMultiButton vertical={orientation === \"vertical\"}>\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomIn}\n            onClick={handleZoomIn}\n            disabled={maxZoomReached}\n          >\n            <ZoomIn role=\"none\" />\n          </HvButton>\n        )}\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomOut}\n            onClick={handleZoomOut}\n            disabled={minZoomReached}\n          >\n            <ZoomOut role=\"none\" />\n          </HvButton>\n        )}\n        {!hideFitView && (\n          <HvButton icon title={labels?.fitView} onClick={handleFitView}>\n            <Focus role=\"none\" />\n          </HvButton>\n        )}\n        {!hideInteractive && (\n          <HvButton\n            icon\n            title={labels?.interactive}\n            onClick={handleInteractive}\n          >\n            {isInteractive ? <Unlock role=\"none\" /> : <Lock role=\"none\" />}\n          </HvButton>\n        )}\n        {children}\n      </HvMultiButton>\n    </Panel>\n  );\n};\n"],"names":["useStore","shallow","useStoreApi","useReactFlow","useLabels","jsx","Panel","jsxs","HvMultiButton","HvButton","ZoomIn","ZoomOut","Focus","Unlock","Lock"],"mappings":";;;;;;;AAmDA,MAAM,iBAAgD;AAAA,EACpD,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AACf;AAEA,MAAM,WAAW,CAAC,WAA2B;AAAA,EAC3C,eACE,MAAM,kBAAkB,MAAM,oBAAoB,MAAM;AAAA,EAC1D,gBAAgB,MAAM,UAAU,CAAC,KAAK,MAAM;AAAA,EAC5C,gBAAgB,MAAM,UAAU,CAAC,KAAK,MAAM;AAC9C;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,EAAE,eAAe,gBAAgB,eAAmB,IAAAA,UAAA;AAAA,IACxD;AAAA,IACAC,QAAA;AAAA,EAAA;AAEF,QAAM,QAAQC,UAAAA;AACd,QAAM,EAAE,QAAQ,SAAS,YAAYC,UAAa,aAAA;AAE5C,QAAA,SAASC,eAAAA,UAAU,gBAAgB,WAAW;AAEpD,QAAM,eAAe,MAAM;AAClB;AACQ;EAAA;AAGjB,QAAM,gBAAgB,MAAM;AAClB;AACQ;EAAA;AAGlB,QAAM,gBAAgB,MAAM;AAC1B,YAAQ,cAAc;AACN;EAAA;AAGlB,QAAM,oBAAoB,MAAM;AAC9B,UAAM,SAAS;AAAA,MACb,gBAAgB,CAAC;AAAA,MACjB,kBAAkB,CAAC;AAAA,MACnB,oBAAoB,CAAC;AAAA,IAAA,CACtB;AAED,0BAAsB,CAAC,aAAa;AAAA,EAAA;AAIpC,SAAAC,2BAAA,IAACC,mBAAM,UAAqB,GAAG,QAC7B,UAACC,2BAAA,KAAAC,eAAA,eAAA,EAAc,UAAU,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAAC,YACAH,2BAAA;AAAA,MAACI,eAAA;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,UAAAJ,2BAAAA,IAACK,gBAAAA,QAAO,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IACtB;AAAA,IAED,CAAC,YACAL,2BAAA;AAAA,MAACI,eAAA;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,UAAAJ,2BAAAA,IAACM,gBAAAA,SAAQ,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IACvB;AAAA,IAED,CAAC,eACCN,2BAAAA,IAAAI,eAAA,UAAA,EAAS,MAAI,MAAC,OAAO,QAAQ,SAAS,SAAS,eAC9C,UAAAJ,+BAACO,gBAAAA,OAAM,EAAA,MAAK,OAAO,CAAA,GACrB;AAAA,IAED,CAAC,mBACAP,2BAAA;AAAA,MAACI,eAAA;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QAER,UAAA,+CAAiBI,gBAAO,QAAA,EAAA,MAAK,QAAO,IAAKR,2BAAA,IAACS,gBAAK,MAAA,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IAC9D;AAAA,IAED;AAAA,EAAA,EACH,CAAA,EACF,CAAA;AAEJ;;"}

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

@@ -35,11 +35,15 @@ const validateEdge = (nodes, edges, edge, nodeMetaRegistry) => {
   const targetMaxConnections = inputs[edge.targetHandle]?.maxConnections;
   let isValid = targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);
   if (isValid && targetMaxConnections != null) {
-    const targetConnections = edges.filter((edg) => edg.target === edge.target && edg.targetHandle === edge.targetHandle).length;
+    const targetConnections = edges.filter(
+      (edg) => edg.target === edge.target && edg.targetHandle === edge.targetHandle
+    ).length;
     isValid = targetConnections < targetMaxConnections;
   }
   if (isValid && sourceMaxConnections != null) {
-    const sourceConnections = edges.filter((edg) => edg.source === edge.source && edg.sourceHandle === edge.sourceHandle).length;
+    const sourceConnections = edges.filter(
+      (edg) => edg.source === edge.source && edg.sourceHandle === edge.sourceHandle
+    ).length;
     isValid = sourceConnections < sourceMaxConnections;
   }
   return isValid;
@@ -59,77 +63,83 @@ const HvDroppableFlow = ({
   defaultEdgeOptions: defaultEdgeOptionsProp,
   ...others
 }) => {
-  const {
-    classes,
-    cx
-  } = Flow_styles.useClasses(classesProp);
+  const { classes, cx } = Flow_styles.useClasses(classesProp);
   const elementId = uikitReactCore.useUniqueId(id, "hvFlow");
   const reactFlowInstance = ReactFlow.useReactFlow();
-  const {
-    nodeTypes
-  } = useFlowContext.useFlowContext();
+  const { nodeTypes } = useFlowContext.useFlowContext();
   const [nodes, setNodes] = React.useState(initialNodes);
   const [edges, setEdges] = React.useState(initialEdges);
-  const {
-    setNodeRef
-  } = core.useDroppable({
+  const { setNodeRef } = core.useDroppable({
     id: elementId
   });
-  const handleDragEnd = React.useCallback((event) => {
-    if (event.over?.id !== elementId)
-      return;
-    const hvFlow = event.active.data.current?.hvFlow;
-    const type = hvFlow?.type;
-    if (!type || !nodeTypes?.[type]) {
-      return;
-    }
-    const position = reactFlowInstance.project({
-      x: (hvFlow?.x || 0) - event.over.rect.left,
-      y: (hvFlow?.y || 0) - event.over.rect.top
-    });
-    const data = hvFlow?.data || {};
-    const newNode = {
-      id: uid.uid(),
-      position,
-      data,
-      type
-    };
-    if (onDndDrop) {
-      onDndDrop(event, newNode);
-      return;
-    }
-    setNodes((nds) => nds.concat(newNode));
-  }, [elementId, nodeTypes, onDndDrop, reactFlowInstance]);
+  const handleDragEnd = React.useCallback(
+    (event) => {
+      if (event.over?.id !== elementId)
+        return;
+      const hvFlow = event.active.data.current?.hvFlow;
+      const type = hvFlow?.type;
+      if (!type || !nodeTypes?.[type]) {
+        return;
+      }
+      const position = reactFlowInstance.project({
+        x: (hvFlow?.x || 0) - event.over.rect.left,
+        y: (hvFlow?.y || 0) - event.over.rect.top
+      });
+      const data = hvFlow?.data || {};
+      const newNode = {
+        id: uid.uid(),
+        position,
+        data,
+        type
+      };
+      if (onDndDrop) {
+        onDndDrop(event, newNode);
+        return;
+      }
+      setNodes((nds) => nds.concat(newNode));
+    },
+    [elementId, nodeTypes, onDndDrop, reactFlowInstance]
+  );
   core.useDndMonitor({
     onDragEnd: handleDragEnd
   });
-  const handleFlowChange = React.useCallback((nds, eds) => {
-    const isDragging = nds.find((node) => node.dragging);
-    if (!isDragging) {
-      onFlowChange?.(nds, eds);
-    }
-  }, [onFlowChange]);
-  const handleConnect = React.useCallback((connection) => {
-    const eds = ReactFlow.addEdge(connection, edges);
-    setEdges(eds);
-    handleFlowChange(nodes, eds);
-    onConnectProp?.(connection);
-  }, [edges, handleFlowChange, nodes, onConnectProp]);
-  const handleNodesChange = React.useCallback((changes) => {
-    const nds = ReactFlow.applyNodeChanges(changes, nodes);
-    setNodes(nds);
-    handleFlowChange(nds, edges);
-    onNodesChangeProp?.(changes);
-  }, [edges, handleFlowChange, nodes, onNodesChangeProp]);
-  const handleEdgesChange = React.useCallback((changes) => {
-    const eds = ReactFlow.applyEdgeChanges(changes, edges);
-    setEdges(eds);
-    handleFlowChange(nodes, eds);
-    onEdgesChangeProp?.(changes);
-  }, [edges, handleFlowChange, nodes, onEdgesChangeProp]);
-  const {
-    registry
-  } = NodeMetaContext.useNodeMetaRegistry();
+  const handleFlowChange = React.useCallback(
+    (nds, eds) => {
+      const isDragging = nds.find((node) => node.dragging);
+      if (!isDragging) {
+        onFlowChange?.(nds, eds);
+      }
+    },
+    [onFlowChange]
+  );
+  const handleConnect = React.useCallback(
+    (connection) => {
+      const eds = ReactFlow.addEdge(connection, edges);
+      setEdges(eds);
+      handleFlowChange(nodes, eds);
+      onConnectProp?.(connection);
+    },
+    [edges, handleFlowChange, nodes, onConnectProp]
+  );
+  const handleNodesChange = React.useCallback(
+    (changes) => {
+      const nds = ReactFlow.applyNodeChanges(changes, nodes);
+      setNodes(nds);
+      handleFlowChange(nds, edges);
+      onNodesChangeProp?.(changes);
+    },
+    [edges, handleFlowChange, nodes, onNodesChangeProp]
+  );
+  const handleEdgesChange = React.useCallback(
+    (changes) => {
+      const eds = ReactFlow.applyEdgeChanges(changes, edges);
+      setEdges(eds);
+      handleFlowChange(nodes, eds);
+      onEdgesChangeProp?.(changes);
+    },
+    [edges, handleFlowChange, nodes, onEdgesChangeProp]
+  );
+  const { registry } = NodeMetaContext.useNodeMetaRegistry();
   const isValidConnection = (connection) => validateEdge(nodes, edges, connection, registry);
   const defaultEdgeOptions = {
     markerEnd: {
@@ -145,8 +155,33 @@ const HvDroppableFlow = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: base.flowStyles }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(ReactFlow__default.default, { nodes, edges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, isValidConnection, defaultEdgeOptions, snapGrid: [1, 1], snapToGrid: true, onError: (code, message) => {
-    }, ...others, children }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: elementId,
+        ref: setNodeRef,
+        className: cx(classes.root, className),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ReactFlow__default.default,
+          {
+            nodes,
+            edges,
+            nodeTypes,
+            onNodesChange: handleNodesChange,
+            onEdgesChange: handleEdgesChange,
+            onConnect: handleConnect,
+            isValidConnection,
+            defaultEdgeOptions,
+            snapGrid: [1, 1],
+            snapToGrid: true,
+            onError: (code, message) => {
+            },
+            ...others,
+            children
+          }
+        )
+      }
+    )
   ] });
 };
 exports.flowClasses = Flow_styles.staticClasses;