@hitachivantara/uikit-react-lab 5.32.2 → 5.32.4

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

@@ -67,7 +67,7 @@ const HvFlowControls = ({
         title: labels?.zoomIn,
         onClick: handleZoomIn,
         disabled: maxZoomReached,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, { role: "none" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, {})
       }
     ),
     !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(
@@ -77,17 +77,17 @@ const HvFlowControls = ({
         title: labels?.zoomOut,
         onClick: handleZoomOut,
         disabled: minZoomReached,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, { role: "none" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, {})
       }
     ),
-    !hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, { role: "none" }) }),
+    !hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, {}) }),
     !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: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, {})
       }
     ),
     children

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

@@ -57,7 +57,7 @@ const HvFlowNode = ({
       classes,
       headerItems: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         headerItems,
-        description && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { title: description, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { role: "none", color: "base_dark" }) }) }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { title: description, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { color: "base_dark" }) }),
         hasParams && /* @__PURE__ */ jsxRuntime.jsx(
           uikitReactCore.HvButton,
           {
@@ -66,7 +66,7 @@ const HvFlowNode = ({
             onClick: () => setShowParams((p) => !p),
             "aria-label": showParams ? labels?.collapseLabel : labels?.expandLabel,
             ...expandParamsButtonProps,
-            children: showParams ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, { role: "none", color: "base_dark" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { role: "none", color: "base_dark" })
+            children: showParams ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, { color: "base_dark" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { color: "base_dark" })
           }
         )
       ] }),

package/dist/cjs/Flow/Sidebar/Sidebar.cjs

@@ -104,7 +104,7 @@ const HvFlowSidebar = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, { role: "none" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {}),
             /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "p", variant: "title3", children: title })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.contentContainer, children: [

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs

@@ -33,7 +33,7 @@ const HvFlowSidebarGroup = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx(css({ borderColor: uikitStyles.getColor(color) }), classes.root), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, role: "none", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "p", variant: "title4", children: nodes.length > 1 ? `${label} (${nodes.length})` : label })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -43,7 +43,7 @@ const HvFlowSidebarGroup = ({
           onClick: handleClick,
           "aria-expanded": opened,
           ...expandButtonProps,
-          children: opened ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, { role: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { role: "none" })
+          children: opened ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, {})
         }
       )
     ] }),

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs

@@ -26,7 +26,7 @@ const HvFlowSidebarGroupItem = React.forwardRef(
         ...others,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Drag, { role: "none" })
+          /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Drag, {})
         ]
       }
     );

package/dist/cjs/Flow/nodes/DashboardNode.cjs

@@ -68,7 +68,7 @@ const HvDashboardNode = (props) => {
                   uikitReactCore.HvEmptyState,
                   {
                     className: classes.empty,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { role: "none" }),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, {}),
                     message: labels?.emptyMessage
                   }
                 )

package/dist/esm/Flow/Controls/Controls.js

@@ -65,7 +65,7 @@ const HvFlowControls = ({
         title: labels?.zoomIn,
         onClick: handleZoomIn,
         disabled: maxZoomReached,
-        children: /* @__PURE__ */ jsx(ZoomIn, { role: "none" })
+        children: /* @__PURE__ */ jsx(ZoomIn, {})
       }
     ),
     !hideZoom && /* @__PURE__ */ jsx(
@@ -75,17 +75,17 @@ const HvFlowControls = ({
         title: labels?.zoomOut,
         onClick: handleZoomOut,
         disabled: minZoomReached,
-        children: /* @__PURE__ */ jsx(ZoomOut, { role: "none" })
+        children: /* @__PURE__ */ jsx(ZoomOut, {})
       }
     ),
-    !hideFitView && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsx(Focus, { role: "none" }) }),
+    !hideFitView && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsx(Focus, {}) }),
     !hideInteractive && /* @__PURE__ */ jsx(
       HvButton,
       {
         icon: true,
         title: labels?.interactive,
         onClick: handleInteractive,
-        children: isInteractive ? /* @__PURE__ */ jsx(Unlock, { role: "none" }) : /* @__PURE__ */ jsx(Lock, { role: "none" })
+        children: isInteractive ? /* @__PURE__ */ jsx(Unlock, {}) : /* @__PURE__ */ jsx(Lock, {})
       }
     ),
     children

package/dist/esm/Flow/Controls/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","sources":["../../../../src/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n  ControlProps,\n  Panel,\n  PanelPosition,\n  ReactFlowState,\n  useStore,\n  useStoreApi,\n} from \"reactflow\";\nimport { shallow } from \"zustand/shallow\";\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\nimport { useFlowInstance } from \"../hooks\";\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?: Partial<typeof DEFAULT_LABELS>;\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 = {\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 } = useFlowInstance();\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":[],"mappings":";;;;;;AA6CA,MAAM,iBAAiB;AAAA,EACrB,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,IAAA;AAAA,IACxD;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,QAAQ;AACd,QAAM,EAAE,QAAQ,SAAS,YAAY,gBAAgB;AAE/C,QAAA,SAAS,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,SAAA,oBAAC,SAAM,UAAqB,GAAG,QAC7B,UAAC,qBAAA,eAAA,EAAc,UAAU,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAAC,YACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,UAAA,oBAAC,QAAO,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IACtB;AAAA,IAED,CAAC,YACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,UAAA,oBAAC,SAAQ,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IACvB;AAAA,IAED,CAAC,eACC,oBAAA,UAAA,EAAS,MAAI,MAAC,OAAO,QAAQ,SAAS,SAAS,eAC9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAO,CAAA,GACrB;AAAA,IAED,CAAC,mBACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QAER,UAAA,oCAAiB,QAAO,EAAA,MAAK,QAAO,IAAK,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IAC9D;AAAA,IAED;AAAA,EAAA,EACH,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"Controls.js","sources":["../../../../src/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n  ControlProps,\n  Panel,\n  PanelPosition,\n  ReactFlowState,\n  useStore,\n  useStoreApi,\n} from \"reactflow\";\nimport { shallow } from \"zustand/shallow\";\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\nimport { useFlowInstance } from \"../hooks\";\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?: Partial<typeof DEFAULT_LABELS>;\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 = {\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 } = useFlowInstance();\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 />\n          </HvButton>\n        )}\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomOut}\n            onClick={handleZoomOut}\n            disabled={minZoomReached}\n          >\n            <ZoomOut />\n          </HvButton>\n        )}\n        {!hideFitView && (\n          <HvButton icon title={labels?.fitView} onClick={handleFitView}>\n            <Focus />\n          </HvButton>\n        )}\n        {!hideInteractive && (\n          <HvButton\n            icon\n            title={labels?.interactive}\n            onClick={handleInteractive}\n          >\n            {isInteractive ? <Unlock /> : <Lock />}\n          </HvButton>\n        )}\n        {children}\n      </HvMultiButton>\n    </Panel>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA6CA,MAAM,iBAAiB;AAAA,EACrB,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,IAAA;AAAA,IACxD;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,QAAQ;AACd,QAAM,EAAE,QAAQ,SAAS,YAAY,gBAAgB;AAE/C,QAAA,SAAS,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,SAAA,oBAAC,SAAM,UAAqB,GAAG,QAC7B,UAAC,qBAAA,eAAA,EAAc,UAAU,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAAC,YACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,8BAAC,QAAO,EAAA;AAAA,MAAA;AAAA,IACV;AAAA,IAED,CAAC,YACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,8BAAC,SAAQ,EAAA;AAAA,MAAA;AAAA,IACX;AAAA,IAED,CAAC,eACC,oBAAA,UAAA,EAAS,MAAI,MAAC,OAAO,QAAQ,SAAS,SAAS,eAC9C,UAAA,oBAAC,QAAM,CAAA,GACT;AAAA,IAED,CAAC,mBACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QAER,UAAgB,gBAAA,oBAAC,QAAO,CAAA,CAAA,wBAAM,MAAK,EAAA;AAAA,MAAA;AAAA,IACtC;AAAA,IAED;AAAA,EAAA,EACH,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/Flow/DroppableFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { Global } from \"@emotion/react\";\nimport ReactFlow, {\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  Connection,\n  Edge,\n  EdgeChange,\n  MarkerType,\n  Node,\n  NodeChange,\n  ReactFlowProps,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowStyles } from \"./base\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\nimport { useFlowContext, useFlowInstance } from \"./hooks\";\nimport {\n  HvFlowNodeInputGroup,\n  HvFlowNodeMetaRegistry,\n  HvFlowNodeOutputGroup,\n} from \"./types\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any,\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edges: Edge[],\n  connection: Connection,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry,\n) => {\n  const {\n    source: sourceId,\n    sourceHandle,\n    target: targetId,\n    targetHandle,\n  } = connection;\n\n  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n  const sourceNode = getNode(nodes, sourceId);\n  const targetNode = getNode(nodes, targetId);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[targetId]?.inputs || [];\n  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n  const source = outputs\n    .map((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n    .flat()\n    .find((out) => out.id === sourceHandle);\n  const target = inputs\n    .map((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n    .flat()\n    .find((inp) => inp.id === targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) => edg.target === targetId && edg.targetHandle === targetHandle,\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle,\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const reactFlowInstance = useFlowInstance();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n  // Keeping track of nodes and edges for onFlowChange since useState is async\n  const nodesRef = useRef(initialNodes);\n  const edgesRef = useRef(initialEdges);\n\n  const updateNodes = (nds: Node[]) => {\n    setNodes(nds);\n    nodesRef.current = nds;\n  };\n\n  const updateEdges = (eds: Edge[]) => {\n    setEdges(eds);\n    edgesRef.current = eds;\n  };\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`,\n          );\n        }\n        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      updateNodes(nodes.concat(newNode));\n    },\n    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance],\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (nds: Node[], eds: Edge[]) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange],\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onConnectProp?.(connection);\n    },\n    [handleFlowChange, onConnectProp],\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodesRef.current);\n      updateNodes(nds);\n\n      handleFlowChange(nds, edgesRef.current);\n      onNodesChangeProp?.(changes);\n    },\n    [handleFlowChange, onNodesChangeProp],\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [handleFlowChange, onEdgesChangeProp],\n  );\n\n  const { registry } = useNodeMetaRegistry();\n\n  const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.js","sources":["../../../src/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\nimport { Global } from \"@emotion/react\";\nimport ReactFlow, {\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  Connection,\n  Edge,\n  EdgeChange,\n  MarkerType,\n  Node,\n  NodeChange,\n  ReactFlowProps,\n} from \"reactflow\";\nimport { uid } from \"uid\";\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { flowStyles } from \"./base\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\nimport { useFlowContext, useFlowInstance } from \"./hooks\";\nimport {\n  HvFlowNodeInputGroup,\n  HvFlowNodeMetaRegistry,\n  HvFlowNodeOutputGroup,\n} from \"./types\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any,\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edges: Edge[],\n  connection: Connection,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry,\n) => {\n  const {\n    source: sourceId,\n    sourceHandle,\n    target: targetId,\n    targetHandle,\n  } = connection;\n\n  if (!sourceHandle || !targetHandle || !sourceId || !targetId) return false;\n\n  const sourceNode = getNode(nodes, sourceId);\n  const targetNode = getNode(nodes, targetId);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[targetId]?.inputs || [];\n  const outputs = nodeMetaRegistry[sourceId]?.outputs || [];\n\n  const source = outputs\n    .map((out) => (out as HvFlowNodeOutputGroup).outputs || out)\n    .flat()\n    .find((out) => out.id === sourceHandle);\n  const target = inputs\n    .map((inp) => (inp as HvFlowNodeInputGroup).inputs || inp)\n    .flat()\n    .find((inp) => inp.id === targetHandle);\n\n  const sourceProvides = source?.provides || \"\";\n  const targetAccepts = target?.accepts || [];\n  const sourceMaxConnections = source?.maxConnections;\n  const targetMaxConnections = target?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) => edg.target === targetId && edg.targetHandle === targetHandle,\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) => edg.source === sourceId && edg.sourceHandle === sourceHandle,\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const reactFlowInstance = useFlowInstance();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n  // Keeping track of nodes and edges for onFlowChange since useState is async\n  const nodesRef = useRef(initialNodes);\n  const edgesRef = useRef(initialEdges);\n\n  const updateNodes = (nds: Node[]) => {\n    setNodes(nds);\n    nodesRef.current = nds;\n  };\n\n  const updateEdges = (eds: Edge[]) => {\n    setEdges(eds);\n    edgesRef.current = eds;\n  };\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`,\n          );\n        }\n        return;\n      }\n\n      // Position node in the flow\n      const position = reactFlowInstance.screenToFlowPosition({\n        x: hvFlow?.x || 0,\n        y: hvFlow?.y || 0,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      updateNodes(nodes.concat(newNode));\n    },\n    [elementId, nodeTypes, nodes, onDndDrop, reactFlowInstance],\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (nds: Node[], eds: Edge[]) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange],\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onConnectProp?.(connection);\n    },\n    [handleFlowChange, onConnectProp],\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodesRef.current);\n      updateNodes(nds);\n\n      handleFlowChange(nds, edgesRef.current);\n      onNodesChangeProp?.(changes);\n    },\n    [handleFlowChange, onNodesChangeProp],\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edgesRef.current);\n      updateEdges(eds);\n\n      handleFlowChange(nodesRef.current, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [handleFlowChange, onEdgesChangeProp],\n  );\n\n  const { registry } = useNodeMetaRegistry();\n\n  const isValidConnection: ReactFlowProps[\"isValidConnection\"] = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\n      <div\n        id={elementId}\n        ref={setNodeRef}\n        className={cx(classes.root, className)}\n      >\n        <ReactFlow\n          nodes={nodes}\n          edges={edges}\n          nodeTypes={nodeTypes}\n          onNodesChange={handleNodesChange}\n          onEdgesChange={handleEdgesChange}\n          onConnect={handleConnect}\n          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -56,7 +56,7 @@ const HvFlowNode = ({
       classes,
       headerItems: /* @__PURE__ */ jsxs(Fragment, { children: [
         headerItems,
-        description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Info, { role: "none", color: "base_dark" }) }) }),
+        description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx(Info, { color: "base_dark" }) }),
         hasParams && /* @__PURE__ */ jsx(
           HvButton,
           {
@@ -65,7 +65,7 @@ const HvFlowNode = ({
             onClick: () => setShowParams((p) => !p),
             "aria-label": showParams ? labels?.collapseLabel : labels?.expandLabel,
             ...expandParamsButtonProps,
-            children: showParams ? /* @__PURE__ */ jsx(Up, { role: "none", color: "base_dark" }) : /* @__PURE__ */ jsx(Down, { role: "none", color: "base_dark" })
+            children: showParams ? /* @__PURE__ */ jsx(Up, { color: "base_dark" }) : /* @__PURE__ */ jsx(Down, { color: "base_dark" })
           }
         )
       ] }),

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

@@ -1 +1 @@
-{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  ExtractNames,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvTooltip,\n  HvTypography,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeParam } from \"../types\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport { ParamRenderer } from \"./Parameters\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nconst DEFAULT_LABELS = {\n  collapseLabel: \"Collapse\",\n  expandLabel: \"Expand\",\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n  /** Node description. */\n  description?: string;\n  /** Node actions. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Node action callback.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"]; // TODO - remove in v6\n  /** Node action callback. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** Whether the actions should be all icon buttons when visible. @default true */\n  actionsIconOnly?: HvActionsGenericProps[\"iconOnly\"];\n  /** Node maximum number of actions visible. */\n  maxVisibleActions?: HvActionsGenericProps[\"maxVisibleActions\"];\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** Labels used on the node. */\n  labels?: HvFlowBaseNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n}\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  actionCallback, // TODO - remove in v6\n  onAction,\n  maxVisibleActions = 1,\n  expanded = false,\n  actionsIconOnly = true,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  labels: labelsProps,\n  children,\n  expandParamsButtonProps,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const [showParams, setShowParams] = useState(expanded);\n\n  const node = useFlowNode();\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupId = nodeTypes?.[type].meta?.groupId;\n\n  const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n  const groupLabel = group?.label || nodeDefaults?.title;\n  const icon = group?.icon || nodeDefaults?.icon;\n  const color = group?.color || nodeDefaults?.color;\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      nodeActions={defaultActions}\n      classes={classes}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={description}>\n              <div>\n                <Info role=\"none\" color=\"base_dark\" />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={\n                showParams ? labels?.collapseLabel : labels?.expandLabel\n              }\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up role=\"none\" color=\"base_dark\" />\n              ) : (\n                <Down role=\"none\" color=\"base_dark\" />\n              )}\n            </HvButton>\n          )}\n        </>\n      }\n      labels={labels as HvFlowNodeProps[\"labels\"]}\n      {...props}\n    >\n      {(subtitle || actions) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\n          {actions && (\n            <HvActionsGeneric\n              className={classes.actions}\n              classes={{ button: classes.actionsButton }}\n              actions={actions}\n              actionsCallback={actionCallback}\n              onAction={onAction}\n              maxVisibleActions={maxVisibleActions}\n              iconOnly={actionsIconOnly}\n            />\n          )}\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8BA,MAAM,iBAAiB;AAAA,EACrB,eAAe;AAAA,EACf,aAAa;AACf;AAiCO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,SAAS,UAAU,gBAAgB,WAAW;AAEpD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ;AAErD,QAAM,OAAO;AAEb,QAAM,EAAE,YAAY,WAAW,mBAAmB,eAAe;AAEjE,QAAM,WAAW,YAAY,IAAI,EAAE,MAAM,SAAS,cAAc;AAChE,QAAM,UAAU,YAAY,IAAI,EAAE,MAAM;AAExC,QAAM,QAAS,WAAW,cAAc,WAAW,OAAO,KAAM;AAC1D,QAAA,aAAa,OAAO,SAAS,cAAc;AAC3C,QAAA,OAAO,OAAO,QAAQ,cAAc;AACpC,QAAA,QAAQ,OAAO,SAAS,cAAc;AAE5C,QAAM,YAAY,CAAC,EAAE,UAAU,OAAO,SAAS;AAG7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,aAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAA;AAAA,QACA,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAC,oBAAA,OAAA,EACC,UAAC,oBAAA,MAAA,EAAK,MAAK,QAAO,OAAM,YAAA,CAAY,EACtC,CAAA,GACF;AAAA,QAED,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,oBAAoB;AAAA,YACpB,SAAS,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;AAAA,YACtC,cACE,aAAa,QAAQ,gBAAgB,QAAQ;AAAA,YAE9C,GAAG;AAAA,YAEH,UACC,aAAA,oBAAC,IAAG,EAAA,MAAK,QAAO,OAAM,YAAY,CAAA,IAEjC,oBAAA,MAAA,EAAK,MAAK,QAAO,OAAM,aAAY;AAAA,UAAA;AAAA,QAExC;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,YAAY,YACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,mBACrB,UAAA;AAAA,UAAA,YACE,oBAAA,OAAA,EACC,UAAC,oBAAA,cAAA,EAAc,mBAAS,CAAA,GAC1B;AAAA,UAED,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAS,EAAE,QAAQ,QAAQ,cAAc;AAAA,cACzC;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,cACA;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,GAEJ;AAAA,QAED;AAAA,QACA,cAAc,UACZ,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA,oBAAC,eAAc,EAAA,QAAgB,MAAM,MAAM,KAAM,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  ExtractNames,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvTooltip,\n  HvTypography,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeParam } from \"../types\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport { ParamRenderer } from \"./Parameters\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nconst DEFAULT_LABELS = {\n  collapseLabel: \"Collapse\",\n  expandLabel: \"Expand\",\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n  /** Node description. */\n  description?: string;\n  /** Node actions. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Node action callback.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"]; // TODO - remove in v6\n  /** Node action callback. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** Whether the actions should be all icon buttons when visible. @default true */\n  actionsIconOnly?: HvActionsGenericProps[\"iconOnly\"];\n  /** Node maximum number of actions visible. */\n  maxVisibleActions?: HvActionsGenericProps[\"maxVisibleActions\"];\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** Labels used on the node. */\n  labels?: HvFlowBaseNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n}\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  actionCallback, // TODO - remove in v6\n  onAction,\n  maxVisibleActions = 1,\n  expanded = false,\n  actionsIconOnly = true,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  labels: labelsProps,\n  children,\n  expandParamsButtonProps,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const [showParams, setShowParams] = useState(expanded);\n\n  const node = useFlowNode();\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupId = nodeTypes?.[type].meta?.groupId;\n\n  const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n  const groupLabel = group?.label || nodeDefaults?.title;\n  const icon = group?.icon || nodeDefaults?.icon;\n  const color = group?.color || nodeDefaults?.color;\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      nodeActions={defaultActions}\n      classes={classes}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={description}>\n              <Info color=\"base_dark\" />\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={\n                showParams ? labels?.collapseLabel : labels?.expandLabel\n              }\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up color=\"base_dark\" />\n              ) : (\n                <Down color=\"base_dark\" />\n              )}\n            </HvButton>\n          )}\n        </>\n      }\n      labels={labels as HvFlowNodeProps[\"labels\"]}\n      {...props}\n    >\n      {(subtitle || actions) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\n          {actions && (\n            <HvActionsGeneric\n              className={classes.actions}\n              classes={{ button: classes.actionsButton }}\n              actions={actions}\n              actionsCallback={actionCallback}\n              onAction={onAction}\n              maxVisibleActions={maxVisibleActions}\n              iconOnly={actionsIconOnly}\n            />\n          )}\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8BA,MAAM,iBAAiB;AAAA,EACrB,eAAe;AAAA,EACf,aAAa;AACf;AAiCO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,SAAS,UAAU,gBAAgB,WAAW;AAEpD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ;AAErD,QAAM,OAAO;AAEb,QAAM,EAAE,YAAY,WAAW,mBAAmB,eAAe;AAEjE,QAAM,WAAW,YAAY,IAAI,EAAE,MAAM,SAAS,cAAc;AAChE,QAAM,UAAU,YAAY,IAAI,EAAE,MAAM;AAExC,QAAM,QAAS,WAAW,cAAc,WAAW,OAAO,KAAM;AAC1D,QAAA,aAAa,OAAO,SAAS,cAAc;AAC3C,QAAA,OAAO,OAAO,QAAQ,cAAc;AACpC,QAAA,QAAQ,OAAO,SAAS,cAAc;AAE5C,QAAM,YAAY,CAAC,EAAE,UAAU,OAAO,SAAS;AAG7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,aAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAA;AAAA,QACA,mCACE,WAAU,EAAA,OAAO,aAChB,UAAC,oBAAA,MAAA,EAAK,OAAM,YAAA,CAAY,EAC1B,CAAA;AAAA,QAED,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,oBAAoB;AAAA,YACpB,SAAS,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;AAAA,YACtC,cACE,aAAa,QAAQ,gBAAgB,QAAQ;AAAA,YAE9C,GAAG;AAAA,YAEH,UAAA,iCACE,IAAG,EAAA,OAAM,aAAY,IAEtB,oBAAC,MAAK,EAAA,OAAM,YAAY,CAAA;AAAA,UAAA;AAAA,QAE5B;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,YAAY,YACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,mBACrB,UAAA;AAAA,UAAA,YACE,oBAAA,OAAA,EACC,UAAC,oBAAA,cAAA,EAAc,mBAAS,CAAA,GAC1B;AAAA,UAED,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAS,EAAE,QAAQ,QAAQ,cAAc;AAAA,cACzC;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,cACA;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,GAEJ;AAAA,QAED;AAAA,QACA,cAAc,UACZ,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA,oBAAC,eAAc,EAAA,QAAgB,MAAM,MAAM,KAAM,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/Flow/Sidebar/Sidebar.js

@@ -103,7 +103,7 @@ const HvFlowSidebar = ({
       children: [
         /* @__PURE__ */ jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
           /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
-            /* @__PURE__ */ jsx(Add, { role: "none" }),
+            /* @__PURE__ */ jsx(Add, {}),
             /* @__PURE__ */ jsx(HvTypography, { component: "p", variant: "title3", children: title })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: classes.contentContainer, children: [

package/dist/esm/Flow/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport {\n  DndContextProps,\n  DragOverlay,\n  DragOverlayProps,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext } from \"../hooks\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\nimport { buildGroups } from \"./utils\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n  extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n  /** Sidebar title. */\n  title?: string;\n  /** Sidebar description. */\n  description?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarClasses;\n  /** Labels used on the sidebar. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /**\n   * Dnd Kit drag overlay props for customization.\n   *\n   * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n   */\n  dragOverlayProps?: DragOverlayProps;\n  /** Props to be applied to the default nodes group. */\n  defaultGroupProps?: HvFlowNodeGroup;\n}\n\nconst DEFAULT_LABELS = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  dragOverlayProps,\n  defaultGroupProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes, defaultGroupProps),\n    [nodeGroups, nodeTypes, defaultGroupProps],\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [ndTypes, setNdTypes] = useState(nodeTypes);\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  useEffect(() => {\n    setGroups(unfilteredGroups);\n  }, [unfilteredGroups]);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id);\n  const groupsElementId = useUniqueId(id);\n\n  // The sidebar is droppable to distinguish between the canvas and the sidebar\n  // Otherwise items dropped inside the sidebar will be added to the canvas\n  const { setNodeRef } = useDroppable({\n    id: drawerElementId,\n  });\n\n  const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n    if (event.active.data.current?.hvFlow) {\n      setDraggingLabel(event.active.data.current.hvFlow?.label);\n    }\n  };\n\n  const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n    setDraggingLabel(undefined);\n  };\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n    onDragStart: handleDragStart,\n  });\n\n  const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    if (nodeGroups) {\n      const gps = value\n        ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n            // Filter nodes by search\n            const filteredNodes = curr[1].nodes.filter((obj) =>\n              obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase()),\n            );\n            const nodesCount = filteredNodes.length;\n\n            // Only show groups with nodes\n            if (nodesCount > 0) {\n              acc[curr[0]] = {\n                ...curr[1],\n                nodes: filteredNodes,\n              };\n            }\n\n            return acc;\n          }, {})\n        : unfilteredGroups;\n\n      setGroups(gps);\n      setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n    } else if (nodeTypes) {\n      const filteredNodeTypes = {};\n      for (const [key, node] of Object.entries(nodeTypes)) {\n        if (\n          node.meta?.label\n            .toLocaleLowerCase()\n            .includes(value.toLocaleLowerCase())\n        ) {\n          filteredNodeTypes[key] = node;\n        }\n      }\n      setNdTypes(value ? filteredNodeTypes : nodeTypes);\n    }\n  };\n\n  const handleDebouncedSearch = useDebounceCallback(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\n      showBackdrop={false}\n      anchor={anchor}\n      buttonTitle={buttonTitle}\n      {...others}\n    >\n      <div id={drawerElementId} ref={setNodeRef}>\n        <div className={classes.titleContainer}>\n          <Add role=\"none\" />\n          <HvTypography component=\"p\" variant=\"title3\">\n            {title}\n          </HvTypography>\n        </div>\n        <div className={classes.contentContainer}>\n          <HvTypography className={classes.description}>\n            {description}\n          </HvTypography>\n          <HvInput\n            className={classes.searchRoot}\n            type=\"search\"\n            placeholder={labels?.searchPlaceholder}\n            aria-label={labels?.searchAriaLabel}\n            aria-controls={groupsElementId}\n            aria-owns={groupsElementId}\n            onChange={handleDebouncedSearch}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          {nodeGroups ? (\n            <ul id={groupsElementId} className={classes.groupsContainer}>\n              {Object.entries(groups).map((obj) => {\n                return (\n                  <HvFlowSidebarGroup\n                    key={obj[0]}\n                    id={obj[0]}\n                    expandButtonProps={{\n                      \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                    }}\n                    itemProps={{\n                      \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                    }}\n                    {...obj[1]}\n                  />\n                );\n              })}\n            </ul>\n          ) : (\n            ndTypes &&\n            Object.entries(ndTypes).map((obj) => {\n              return (\n                <HvFlowDraggableSidebarGroupItem\n                  key={obj[0]}\n                  id={obj[0]}\n                  type={obj[0]}\n                  label={obj[1]?.meta?.label || \"\"}\n                  data={obj[1]?.meta?.data}\n                  aria-roledescription={labels?.itemAriaRoleDescription}\n                  className={classes.nodeType}\n                />\n              );\n            })\n          )}\n        </div>\n      </div>\n      <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </HvDrawer>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport {\n  DndContextProps,\n  DragOverlay,\n  DragOverlayProps,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext } from \"../hooks\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\nimport { buildGroups } from \"./utils\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n  extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n  /** Sidebar title. */\n  title?: string;\n  /** Sidebar description. */\n  description?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarClasses;\n  /** Labels used on the sidebar. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /**\n   * Dnd Kit drag overlay props for customization.\n   *\n   * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).\n   */\n  dragOverlayProps?: DragOverlayProps;\n  /** Props to be applied to the default nodes group. */\n  defaultGroupProps?: HvFlowNodeGroup;\n}\n\nconst DEFAULT_LABELS = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  dragOverlayProps,\n  defaultGroupProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes, defaultGroupProps),\n    [nodeGroups, nodeTypes, defaultGroupProps],\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n  const [ndTypes, setNdTypes] = useState(nodeTypes);\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  useEffect(() => {\n    setGroups(unfilteredGroups);\n  }, [unfilteredGroups]);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id);\n  const groupsElementId = useUniqueId(id);\n\n  // The sidebar is droppable to distinguish between the canvas and the sidebar\n  // Otherwise items dropped inside the sidebar will be added to the canvas\n  const { setNodeRef } = useDroppable({\n    id: drawerElementId,\n  });\n\n  const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n    if (event.active.data.current?.hvFlow) {\n      setDraggingLabel(event.active.data.current.hvFlow?.label);\n    }\n  };\n\n  const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n    setDraggingLabel(undefined);\n  };\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n    onDragStart: handleDragStart,\n  });\n\n  const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    if (nodeGroups) {\n      const gps = value\n        ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n            // Filter nodes by search\n            const filteredNodes = curr[1].nodes.filter((obj) =>\n              obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase()),\n            );\n            const nodesCount = filteredNodes.length;\n\n            // Only show groups with nodes\n            if (nodesCount > 0) {\n              acc[curr[0]] = {\n                ...curr[1],\n                nodes: filteredNodes,\n              };\n            }\n\n            return acc;\n          }, {})\n        : unfilteredGroups;\n\n      setGroups(gps);\n      setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n    } else if (nodeTypes) {\n      const filteredNodeTypes = {};\n      for (const [key, node] of Object.entries(nodeTypes)) {\n        if (\n          node.meta?.label\n            .toLocaleLowerCase()\n            .includes(value.toLocaleLowerCase())\n        ) {\n          filteredNodeTypes[key] = node;\n        }\n      }\n      setNdTypes(value ? filteredNodeTypes : nodeTypes);\n    }\n  };\n\n  const handleDebouncedSearch = useDebounceCallback(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\n      showBackdrop={false}\n      anchor={anchor}\n      buttonTitle={buttonTitle}\n      {...others}\n    >\n      <div id={drawerElementId} ref={setNodeRef}>\n        <div className={classes.titleContainer}>\n          <Add />\n          <HvTypography component=\"p\" variant=\"title3\">\n            {title}\n          </HvTypography>\n        </div>\n        <div className={classes.contentContainer}>\n          <HvTypography className={classes.description}>\n            {description}\n          </HvTypography>\n          <HvInput\n            className={classes.searchRoot}\n            type=\"search\"\n            placeholder={labels?.searchPlaceholder}\n            aria-label={labels?.searchAriaLabel}\n            aria-controls={groupsElementId}\n            aria-owns={groupsElementId}\n            onChange={handleDebouncedSearch}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          {nodeGroups ? (\n            <ul id={groupsElementId} className={classes.groupsContainer}>\n              {Object.entries(groups).map((obj) => {\n                return (\n                  <HvFlowSidebarGroup\n                    key={obj[0]}\n                    id={obj[0]}\n                    expandButtonProps={{\n                      \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                    }}\n                    itemProps={{\n                      \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                    }}\n                    {...obj[1]}\n                  />\n                );\n              })}\n            </ul>\n          ) : (\n            ndTypes &&\n            Object.entries(ndTypes).map((obj) => {\n              return (\n                <HvFlowDraggableSidebarGroupItem\n                  key={obj[0]}\n                  id={obj[0]}\n                  type={obj[0]}\n                  label={obj[1]?.meta?.label || \"\"}\n                  data={obj[1]?.meta?.data}\n                  aria-roledescription={labels?.itemAriaRoleDescription}\n                  className={classes.nodeType}\n                />\n              );\n            })\n          )}\n        </div>\n      </div>\n      <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </HvDrawer>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.js

@@ -32,7 +32,7 @@ const HvFlowSidebarGroup = ({
   return /* @__PURE__ */ jsxs("li", { className: cx(css({ borderColor: getColor(color) }), classes.root), children: [
     /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
       /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-        /* @__PURE__ */ jsx("div", { className: classes.icon, role: "none", children: icon }),
+        /* @__PURE__ */ jsx("div", { className: classes.icon, children: icon }),
         /* @__PURE__ */ jsx(HvTypography, { component: "p", variant: "title4", children: nodes.length > 1 ? `${label} (${nodes.length})` : label })
       ] }),
       /* @__PURE__ */ jsx(
@@ -42,7 +42,7 @@ const HvFlowSidebarGroup = ({
           onClick: handleClick,
           "aria-expanded": opened,
           ...expandButtonProps,
-          children: opened ? /* @__PURE__ */ jsx(Up, { role: "none" }) : /* @__PURE__ */ jsx(Down, { role: "none" })
+          children: opened ? /* @__PURE__ */ jsx(Up, {}) : /* @__PURE__ */ jsx(Down, {})
         }
       )
     ] }),

package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { useFlowContext } from \"../../hooks\";\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNode = {\n  type: string;\n  label: string;\n  data?: unknown;\n};\n\nexport type HvFlowSidebarGroupNodes = HvFlowSidebarGroupNode[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\n  /** Group nodes. */\n  nodes: HvFlowSidebarGroupNodes;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupClasses;\n  /** Expand button props. */\n  expandButtonProps?: HvButtonProps;\n  /** Item group props. */\n  itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n  id,\n  label,\n  nodes,\n  color,\n  description,\n  icon,\n  expandButtonProps,\n  classes: classesProp,\n  itemProps,\n}: HvFlowSidebarGroupProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n  const opened = useMemo(\n    () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n    [expandedNodeGroups, id],\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((groupId) => id !== groupId) : [...prev, id],\n    );\n  }, [id, opened, setExpandedNodeGroups]);\n\n  return (\n    <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n      <div className={classes.titleContainer}>\n        <div className={classes.labelContainer}>\n          <div className={classes.icon} role=\"none\">\n            {icon}\n          </div>\n          <HvTypography component=\"p\" variant=\"title4\">\n            {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\n        </HvButton>\n      </div>\n      {description && (\n        <div className={classes.descriptionContainer}>\n          <HvTypography>{description}</HvTypography>\n        </div>\n      )}\n      {opened && (\n        <div className={classes.itemsContainer}>\n          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.type}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA2CO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,MAA+B;AAC7B,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,oBAAoB,sBAAsB,IAAI,eAAe;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,CAAC,CAAC,oBAAoB,KAAK,CAAC,YAAY,YAAY,EAAE;AAAA,IAC5D,CAAC,oBAAoB,EAAE;AAAA,EAAA;AAGnB,QAAA,cAAc,YAAY,MAAM;AACpC;AAAA,MAAwB,CAAC,SACvB,SAAS,KAAK,OAAO,CAAC,YAAY,OAAO,OAAO,IAAI,CAAC,GAAG,MAAM,EAAE;AAAA,IAAA;AAAA,EAEjE,GAAA,CAAC,IAAI,QAAQ,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAW,GAAG,IAAI,EAAE,aAAa,SAAS,KAAK,EAAE,CAAC,GAAG,QAAQ,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAW,QAAQ,MAAM,MAAK,QAChC,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,WAAU,KAAI,SAAQ,UACjC,UAAA,MAAM,SAAS,IAAI,GAAG,KAAK,KAAK,MAAM,MAAM,MAAM,OACrD;AAAA,MAAA,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS;AAAA,UACT,iBAAe;AAAA,UACd,GAAG;AAAA,UAEH,UAAA,6BAAU,IAAG,EAAA,MAAK,QAAO,IAAK,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MACnD;AAAA,IAAA,GACF;AAAA,IACC,mCACE,OAAI,EAAA,WAAW,QAAQ,sBACtB,UAAA,oBAAC,cAAc,EAAA,UAAA,YAAA,CAAY,EAC7B,CAAA;AAAA,IAED,8BACE,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA,MAAM,IAAI,CAAC,QACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEE,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,MAFC,IAAI;AAAA,IAIZ,CAAA,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SidebarGroup.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { useFlowContext } from \"../../hooks\";\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNode = {\n  type: string;\n  label: string;\n  data?: unknown;\n};\n\nexport type HvFlowSidebarGroupNodes = HvFlowSidebarGroupNode[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\n  /** Group nodes. */\n  nodes: HvFlowSidebarGroupNodes;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupClasses;\n  /** Expand button props. */\n  expandButtonProps?: HvButtonProps;\n  /** Item group props. */\n  itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n  id,\n  label,\n  nodes,\n  color,\n  description,\n  icon,\n  expandButtonProps,\n  classes: classesProp,\n  itemProps,\n}: HvFlowSidebarGroupProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n  const opened = useMemo(\n    () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n    [expandedNodeGroups, id],\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((groupId) => id !== groupId) : [...prev, id],\n    );\n  }, [id, opened, setExpandedNodeGroups]);\n\n  return (\n    <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n      <div className={classes.titleContainer}>\n        <div className={classes.labelContainer}>\n          <div className={classes.icon}>{icon}</div>\n          <HvTypography component=\"p\" variant=\"title4\">\n            {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up /> : <Down />}\n        </HvButton>\n      </div>\n      {description && (\n        <div className={classes.descriptionContainer}>\n          <HvTypography>{description}</HvTypography>\n        </div>\n      )}\n      {opened && (\n        <div className={classes.itemsContainer}>\n          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.type}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA2CO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,MAA+B;AAC7B,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,oBAAoB,sBAAsB,IAAI,eAAe;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,CAAC,CAAC,oBAAoB,KAAK,CAAC,YAAY,YAAY,EAAE;AAAA,IAC5D,CAAC,oBAAoB,EAAE;AAAA,EAAA;AAGnB,QAAA,cAAc,YAAY,MAAM;AACpC;AAAA,MAAwB,CAAC,SACvB,SAAS,KAAK,OAAO,CAAC,YAAY,OAAO,OAAO,IAAI,CAAC,GAAG,MAAM,EAAE;AAAA,IAAA;AAAA,EAEjE,GAAA,CAAC,IAAI,QAAQ,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAW,GAAG,IAAI,EAAE,aAAa,SAAS,KAAK,EAAE,CAAC,GAAG,QAAQ,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,QAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,QACnC,oBAAA,cAAA,EAAa,WAAU,KAAI,SAAQ,UACjC,UAAA,MAAM,SAAS,IAAI,GAAG,KAAK,KAAK,MAAM,MAAM,MAAM,OACrD;AAAA,MAAA,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS;AAAA,UACT,iBAAe;AAAA,UACd,GAAG;AAAA,UAEH,UAAS,SAAA,oBAAC,IAAG,CAAA,CAAA,wBAAM,MAAK,EAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,IAAA,GACF;AAAA,IACC,mCACE,OAAI,EAAA,WAAW,QAAQ,sBACtB,UAAA,oBAAC,cAAc,EAAA,UAAA,YAAA,CAAY,EAC7B,CAAA;AAAA,IAED,8BACE,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA,MAAM,IAAI,CAAC,QACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEE,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,MAFC,IAAI;AAAA,IAIZ,CAAA,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js

@@ -25,7 +25,7 @@ const HvFlowSidebarGroupItem = forwardRef(
         ...others,
         children: [
           /* @__PURE__ */ jsx(HvTypography, { children: label }),
-          /* @__PURE__ */ jsx(Drag, { role: "none" })
+          /* @__PURE__ */ jsx(Drag, {})
         ]
       }
     );

package/dist/esm/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Drag } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./SidebarGroupItem.styles\";\n\nexport { staticClasses as flowSidebarGroupItemClasses };\n\nexport type HvFlowSidebarGroupItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupItemProps extends HvBaseProps {\n  /** Item label. */\n  label: string;\n  /** Whether the item is being dragged. */\n  isDragging?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupItemClasses;\n}\n\nexport const HvFlowSidebarGroupItem = forwardRef<\n  HTMLDivElement,\n  HvFlowSidebarGroupItemProps\n>(\n  (\n    {\n      label,\n      isDragging,\n      classes: classesProp,\n      className,\n      ...others\n    }: HvFlowSidebarGroupItemProps,\n    ref,\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          classes.root,\n          { [classes.dragging]: isDragging },\n          className,\n        )}\n        {...others}\n      >\n        <HvTypography>{label}</HvTypography>\n        <Drag role=\"none\" />\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,yBAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,UACjC;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,gBAAc,UAAM,MAAA,CAAA;AAAA,UACrB,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxB;AACF;"}
+{"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Drag } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./SidebarGroupItem.styles\";\n\nexport { staticClasses as flowSidebarGroupItemClasses };\n\nexport type HvFlowSidebarGroupItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupItemProps extends HvBaseProps {\n  /** Item label. */\n  label: string;\n  /** Whether the item is being dragged. */\n  isDragging?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupItemClasses;\n}\n\nexport const HvFlowSidebarGroupItem = forwardRef<\n  HTMLDivElement,\n  HvFlowSidebarGroupItemProps\n>(\n  (\n    {\n      label,\n      isDragging,\n      classes: classesProp,\n      className,\n      ...others\n    }: HvFlowSidebarGroupItemProps,\n    ref,\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          classes.root,\n          { [classes.dragging]: isDragging },\n          className,\n        )}\n        {...others}\n      >\n        <HvTypography>{label}</HvTypography>\n        <Drag />\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,yBAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,UACjC;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,gBAAc,UAAM,MAAA,CAAA;AAAA,8BACpB,MAAK,EAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACF;"}

package/dist/esm/Flow/nodes/DashboardNode.js

@@ -67,7 +67,7 @@ const HvDashboardNode = (props) => {
                   HvEmptyState,
                   {
                     className: classes.empty,
-                    icon: /* @__PURE__ */ jsx(Info, { role: "none" }),
+                    icon: /* @__PURE__ */ jsx(Info, {}),
                     message: labels?.emptyMessage
                   }
                 )

package/dist/esm/Flow/nodes/DashboardNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardNode.js","sources":["../../../../src/Flow/nodes/DashboardNode.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvButton,\n  HvDialog,\n  HvDialogActions,\n  HvDialogContent,\n  HvDialogProps,\n  HvDialogTitle,\n  HvEmptyState,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDashboard, HvDashboardProps } from \"../../Dashboard\";\nimport { HvFlowNode, HvFlowNodeProps } from \"../Node\";\nimport { staticClasses, useClasses } from \"./DashboardNode.styles\";\n\nexport { staticClasses as hvDashboardNodeClasses };\n\nconst DEFAULT_LABELS = {\n  emptyMessage: \"No visualizations connected to the dashboard.\",\n  dialogTitle: \"Configure dashboard\",\n  dialogSubtitle: \"Please configure the layout of your dashboard as needed.\",\n  dialogApply: \"Apply\",\n  dialogCancel: \"Cancel\",\n};\n\nexport type HvDashboardNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardNodeProps\n  extends HvFlowNodeProps,\n    Pick<HvDialogProps, \"open\" | \"onClose\">,\n    Pick<HvDashboardProps, \"layout\"> {\n  classes?: HvDashboardNodeClasses;\n  labels?: HvFlowNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n  previewItems?: React.ReactNode;\n  onApply?: () => void;\n  onCancel?: () => void;\n  dashboardProps?: Omit<HvDashboardProps, \"children\">;\n  dialogProps?: HvDialogProps;\n}\n\nexport const HvDashboardNode = (props: HvDashboardNodeProps) => {\n  const {\n    id,\n    open,\n    layout,\n    labels: labelsProp,\n    classes: classesProp,\n    previewItems,\n    children,\n    dialogProps,\n    dashboardProps,\n    onApply,\n    onCancel,\n    onClose,\n    ...others\n  } = props;\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvFlowNode\n      id={id}\n      classes={classes}\n      labels={labels as HvDashboardNodeProps[\"labels\"]}\n      {...others}\n    >\n      {children}\n      <HvDialog\n        open={open}\n        maxWidth=\"lg\"\n        fullWidth\n        onClose={onClose}\n        {...dialogProps}\n      >\n        <HvDialogTitle variant=\"info\">{labels?.dialogTitle}</HvDialogTitle>\n        <HvDialogContent indentContent>\n          {labels?.dialogSubtitle}\n          {layout && layout?.length > 0 ? (\n            <HvDashboard\n              cols={12}\n              layout={layout}\n              compactType=\"vertical\"\n              rowHeight={80}\n              margin={[16, 16]}\n              containerPadding={[0, 16]}\n              {...dashboardProps}\n            >\n              {previewItems}\n            </HvDashboard>\n          ) : (\n            <HvEmptyState\n              className={classes.empty}\n              icon={<Info role=\"none\" />}\n              message={labels?.emptyMessage}\n            />\n          )}\n        </HvDialogContent>\n        <HvDialogActions>\n          <HvButton variant=\"primary\" onClick={onApply}>\n            {labels?.dialogApply}\n          </HvButton>\n          <HvButton variant=\"secondarySubtle\" onClick={onCancel}>\n            {labels?.dialogCancel}\n          </HvButton>\n        </HvDialogActions>\n      </HvDialog>\n    </HvFlowNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAmBA,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAiBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACE,QAAA,SAAS,UAAU,gBAAgB,UAAU;AACnD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAS;AAAA,YACT,WAAS;AAAA,YACT;AAAA,YACC,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAA,oBAAC,eAAc,EAAA,SAAQ,QAAQ,UAAA,QAAQ,aAAY;AAAA,cACnD,qBAAC,iBAAgB,EAAA,eAAa,MAC3B,UAAA;AAAA,gBAAQ,QAAA;AAAA,gBACR,UAAU,QAAQ,SAAS,IAC1B;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAM;AAAA,oBACN;AAAA,oBACA,aAAY;AAAA,oBACZ,WAAW;AAAA,oBACX,QAAQ,CAAC,IAAI,EAAE;AAAA,oBACf,kBAAkB,CAAC,GAAG,EAAE;AAAA,oBACvB,GAAG;AAAA,oBAEH,UAAA;AAAA,kBAAA;AAAA,gBAAA,IAGH;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,QAAQ;AAAA,oBACnB,MAAM,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,oBACxB,SAAS,QAAQ;AAAA,kBAAA;AAAA,gBACnB;AAAA,cAAA,GAEJ;AAAA,mCACC,iBACC,EAAA,UAAA;AAAA,gBAAA,oBAAC,YAAS,SAAQ,WAAU,SAAS,SAClC,kBAAQ,aACX;AAAA,oCACC,UAAS,EAAA,SAAQ,mBAAkB,SAAS,UAC1C,kBAAQ,cACX;AAAA,cAAA,GACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"DashboardNode.js","sources":["../../../../src/Flow/nodes/DashboardNode.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvButton,\n  HvDialog,\n  HvDialogActions,\n  HvDialogContent,\n  HvDialogProps,\n  HvDialogTitle,\n  HvEmptyState,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDashboard, HvDashboardProps } from \"../../Dashboard\";\nimport { HvFlowNode, HvFlowNodeProps } from \"../Node\";\nimport { staticClasses, useClasses } from \"./DashboardNode.styles\";\n\nexport { staticClasses as hvDashboardNodeClasses };\n\nconst DEFAULT_LABELS = {\n  emptyMessage: \"No visualizations connected to the dashboard.\",\n  dialogTitle: \"Configure dashboard\",\n  dialogSubtitle: \"Please configure the layout of your dashboard as needed.\",\n  dialogApply: \"Apply\",\n  dialogCancel: \"Cancel\",\n};\n\nexport type HvDashboardNodeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDashboardNodeProps\n  extends HvFlowNodeProps,\n    Pick<HvDialogProps, \"open\" | \"onClose\">,\n    Pick<HvDashboardProps, \"layout\"> {\n  classes?: HvDashboardNodeClasses;\n  labels?: HvFlowNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n  previewItems?: React.ReactNode;\n  onApply?: () => void;\n  onCancel?: () => void;\n  dashboardProps?: Omit<HvDashboardProps, \"children\">;\n  dialogProps?: HvDialogProps;\n}\n\nexport const HvDashboardNode = (props: HvDashboardNodeProps) => {\n  const {\n    id,\n    open,\n    layout,\n    labels: labelsProp,\n    classes: classesProp,\n    previewItems,\n    children,\n    dialogProps,\n    dashboardProps,\n    onApply,\n    onCancel,\n    onClose,\n    ...others\n  } = props;\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvFlowNode\n      id={id}\n      classes={classes}\n      labels={labels as HvDashboardNodeProps[\"labels\"]}\n      {...others}\n    >\n      {children}\n      <HvDialog\n        open={open}\n        maxWidth=\"lg\"\n        fullWidth\n        onClose={onClose}\n        {...dialogProps}\n      >\n        <HvDialogTitle variant=\"info\">{labels?.dialogTitle}</HvDialogTitle>\n        <HvDialogContent indentContent>\n          {labels?.dialogSubtitle}\n          {layout && layout?.length > 0 ? (\n            <HvDashboard\n              cols={12}\n              layout={layout}\n              compactType=\"vertical\"\n              rowHeight={80}\n              margin={[16, 16]}\n              containerPadding={[0, 16]}\n              {...dashboardProps}\n            >\n              {previewItems}\n            </HvDashboard>\n          ) : (\n            <HvEmptyState\n              className={classes.empty}\n              icon={<Info />}\n              message={labels?.emptyMessage}\n            />\n          )}\n        </HvDialogContent>\n        <HvDialogActions>\n          <HvButton variant=\"primary\" onClick={onApply}>\n            {labels?.dialogApply}\n          </HvButton>\n          <HvButton variant=\"secondarySubtle\" onClick={onCancel}>\n            {labels?.dialogCancel}\n          </HvButton>\n        </HvDialogActions>\n      </HvDialog>\n    </HvFlowNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAmBA,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAiBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACE,QAAA,SAAS,UAAU,gBAAgB,UAAU;AACnD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAS;AAAA,YACT,WAAS;AAAA,YACT;AAAA,YACC,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAA,oBAAC,eAAc,EAAA,SAAQ,QAAQ,UAAA,QAAQ,aAAY;AAAA,cACnD,qBAAC,iBAAgB,EAAA,eAAa,MAC3B,UAAA;AAAA,gBAAQ,QAAA;AAAA,gBACR,UAAU,QAAQ,SAAS,IAC1B;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAM;AAAA,oBACN;AAAA,oBACA,aAAY;AAAA,oBACZ,WAAW;AAAA,oBACX,QAAQ,CAAC,IAAI,EAAE;AAAA,oBACf,kBAAkB,CAAC,GAAG,EAAE;AAAA,oBACvB,GAAG;AAAA,oBAEH,UAAA;AAAA,kBAAA;AAAA,gBAAA,IAGH;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,QAAQ;AAAA,oBACnB,0BAAO,MAAK,EAAA;AAAA,oBACZ,SAAS,QAAQ;AAAA,kBAAA;AAAA,gBACnB;AAAA,cAAA,GAEJ;AAAA,mCACC,iBACC,EAAA,UAAA;AAAA,gBAAA,oBAAC,YAAS,SAAQ,WAAU,SAAS,SAClC,kBAAQ,aACX;AAAA,oCACC,UAAS,EAAA,SAAQ,mBAAkB,SAAS,UAC1C,kBAAQ,cACX;AAAA,cAAA,GACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.32.2",
+  "version": "5.32.4",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,8 +32,8 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.62.1",
-    "@hitachivantara/uikit-react-icons": "^5.9.6",
+    "@hitachivantara/uikit-react-core": "^5.63.0",
+    "@hitachivantara/uikit-react-icons": "^5.9.8",
     "@hitachivantara/uikit-styles": "^5.28.0",
     "@types/react-grid-layout": "^1.3.5",
     "react-grid-layout": "^1.4.4",
@@ -49,7 +49,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "cf867c1a52e93c9cf9e6fcbbb2f9643d550a8d1c",
+  "gitHead": "2d237eef49915ff00973faca64e5286c0b495e4c",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {

package/dist/cjs/Blade/Blade.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Blade.cjs","sources":["../../../src/Blade/Blade.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n  HvTypographyVariants,\n  setId,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blade.styles\";\n\nexport { staticClasses as bladeClasses };\n\nexport type HvBladeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * The content that will be rendered within the blade.\n   */\n  children: React.ReactNode;\n\n  /**\n   * The content of the blade's button.\n   *\n   * If a render function is provided, it will be called with the expanded state as an argument.\n   */\n  label?: React.ReactNode | ((expanded: boolean) => React.ReactNode);\n  /**\n   * Typography variant for the blade's button label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * Heading Level to apply to blade button.\n   *\n   * If 'undefined', the button will not have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Indicates whether the blade is expanded or not.\n   *\n   * When defined the expanded state becomes controlled.\n   *\n   * @default undefined\n   */\n  expanded?: boolean;\n  /**\n   * Specifies the initial expanded state of the blade when it is uncontrolled.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback function triggered when the blade's button is pressed.\n   * It receives the event and the new expanded state as arguments.\n   *\n   * If the blade is uncontrolled, this new state will be effective.\n   * If the blade is controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {boolean} value The new value.\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n\n  /**\n   * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If true, the blade will take up the maximum width of the container when expanded.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Props to be passed to the button that toggles the blade's expanded state.\n   * This can be used to further customize the appearance or behavior of the blade's button,\n   * e.g. to set the aria-label attribute.\n   */\n  buttonProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Props to be passed to the container div that holds the blade's children.\n   * This can be used to further customize the appearance or behavior of the blade's content area.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladeClasses;\n}\n\n/**\n * A blade is a design element that expands horizontally to reveal information, similar to an accordion.\n *\n * It is usually stacked horizontally with other blades and works best when used within a flex container.\n * The `HvBlades` component is recommended for this purpose, as it also provides better management of the\n * blades' expanded state.\n */\nexport const HvBlade = (props: HvBladeProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded,\n    defaultExpanded = false,\n    label,\n    labelVariant = \"label\",\n    headingLevel,\n    onChange,\n    disabled = false,\n    children,\n    fullWidth,\n    buttonProps,\n    containerProps,\n    ...others\n  } = useDefaultProps(\"HvBlade\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isExpanded, setIsExpanded] = useControlled(\n    expanded,\n    Boolean(defaultExpanded),\n  );\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, !isExpanded);\n\n        // This will only run if uncontrolled\n        setIsExpanded(!isExpanded);\n\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isExpanded, setIsExpanded],\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction],\n  );\n\n  const id = useUniqueId(idProp);\n  const bladeHeaderId = setId(id, \"button\");\n  const bladeContainerId = setId(id, \"container\");\n  const bladeHeader = useMemo(() => {\n    const buttonLabel = typeof label === \"function\" ? label(isExpanded) : label;\n\n    const bladeButton = (\n      <HvTypography\n        id={bladeHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.button, {\n          [classes.disabled]: disabled,\n          [classes.textOnlyLabel]: typeof buttonLabel === \"string\",\n        })}\n        style={{ flexShrink: headingLevel === undefined ? 0 : undefined }}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isExpanded}\n        aria-controls={bladeContainerId}\n        {...buttonProps}\n      >\n        {buttonLabel}\n      </HvTypography>\n    );\n    return headingLevel === undefined ? (\n      bladeButton\n    ) : (\n      <HvTypography\n        component={`h${headingLevel}`}\n        variant={labelVariant}\n        className={classes.heading}\n        style={{ flexShrink: 0 }}\n      >\n        {bladeButton}\n      </HvTypography>\n    );\n  }, [\n    bladeContainerId,\n    bladeHeaderId,\n    buttonProps,\n    classes.button,\n    classes.disabled,\n    classes.heading,\n    classes.textOnlyLabel,\n    cx,\n    disabled,\n    handleClick,\n    handleKeyDown,\n    headingLevel,\n    isExpanded,\n    label,\n    labelVariant,\n  ]);\n\n  const bladeRef = useRef<HTMLDivElement>(null);\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n  useEffect(() => {\n    if (bladeRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        setMaxWidth(entries[0].target.clientWidth);\n      });\n      resizeObserver.observe(\n        // using the blade's container as reference max-width is more stable\n        bladeRef.current.parentElement ?? bladeRef.current,\n      );\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n  }, [isExpanded]);\n\n  const { style: containerStyle, ...otherContainerProps } =\n    containerProps || {};\n\n  return (\n    <div\n      ref={bladeRef}\n      id={idProp}\n      className={cx(classes.root, className, {\n        [classes.fullWidth]: fullWidth,\n        [classes.expanded]: isExpanded,\n      })}\n      {...others}\n    >\n      {bladeHeader}\n      <div\n        id={bladeContainerId}\n        role=\"region\"\n        aria-labelledby={bladeHeaderId}\n        className={classes.container}\n        hidden={!isExpanded}\n        style={{\n          ...containerStyle,\n          maxWidth: isExpanded ? maxWidth : 0,\n        }}\n        {...otherContainerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useControlled","useCallback","useUniqueId","setId","useMemo","jsx","HvTypography","useRef","useState","useEffect","jsxs"],"mappings":"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"}

package/dist/cjs/Blade/Blade.styles.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Blade.styles.cjs","sources":["../../../src/Blade/Blade.styles.tsx"],"sourcesContent":["import { createClasses, outlineStyles } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBlade\", {\n  root: {\n    position: \"relative\",\n\n    display: \"flex\",\n    minWidth: 72,\n\n    \"& + $root\": {\n      marginLeft: theme.spacing(\"sm\"),\n    },\n\n    transition: \"flex-grow 600ms linear\",\n\n    zIndex: 0,\n\n    color: theme.colors.secondary,\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: theme.radii.round,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  expanded: {},\n\n  fullWidth: {\n    flexGrow: 0,\n\n    \"&$expanded\": {\n      flexGrow: 1,\n    },\n  },\n\n  heading: {},\n\n  button: {\n    height: \"100%\",\n    minWidth: 70,\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n      background: theme.colors.containerBackgroundHover,\n    },\n\n    \"&:hover\": {\n      background: theme.colors.containerBackgroundHover,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      zIndex: 1,\n    },\n\n    cursor: \"pointer\",\n  },\n  textOnlyLabel: {\n    padding: theme.spacing(\"xs\", \"sm\"),\n  },\n\n  container: {\n    display: \"inline-block\",\n    height: \"100%\",\n    width: \"100%\",\n\n    minWidth: 0,\n\n    overflowX: \"hidden\",\n\n    maxWidth: 0,\n    transition: \"max-width 600ms linear\",\n  },\n\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n\n    \"&:focus\": {\n      background: \"none\",\n    },\n\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":";;;;AAGO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IAEV,SAAS;AAAA,IACT,UAAU;AAAA,IAEV,aAAa;AAAA,MACX,YAAYC,YAAAA,MAAM,QAAQ,IAAI;AAAA,IAChC;AAAA,IAEA,YAAY;AAAA,IAEZ,QAAQ;AAAA,IAER,OAAOA,YAAAA,MAAM,OAAO;AAAA,IACpB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,EACzC;AAAA,EACA,UAAU,CAAC;AAAA,EAEX,WAAW;AAAA,IACT,UAAU;AAAA,IAEV,cAAc;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EAEA,SAAS,CAAC;AAAA,EAEV,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IAEV,yBAAyB;AAAA,MACvB,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,YAAYA,YAAAA,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACT,YAAYA,YAAAA,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAGC,eAAA;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,IAEA,QAAQ;AAAA,EACV;AAAA,EACA,eAAe;AAAA,IACb,SAASD,YAAA,MAAM,QAAQ,MAAM,IAAI;AAAA,EACnC;AAAA,EAEA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IAEP,UAAU;AAAA,IAEV,WAAW;AAAA,IAEX,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAOA,YAAAA,MAAM,OAAO;AAAA,IAEpB,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/Blades/Blades.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Blades.cjs","sources":["../../../src/Blades/Blades.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useControlled,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Blades.styles\";\n\nexport { staticClasses as bladesClasses };\n\nexport type HvBladesClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBladesProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Array of indices representing the expanded state of each blade.\n   *\n   * When defined, the expanded state of the blades becomes controlled.\n   */\n  expanded?: number[];\n  /**\n   * Initial expanded state of the blades when in an uncontrolled state.\n   *\n   * It's an array of indices representing the blades that should be initially expanded.\n   */\n  defaultExpanded?: number[];\n\n  /**\n   * If true, ensures that only one blade can be expanded at a time.\n   */\n  atMostOneExpanded?: boolean;\n  /**\n   * If true, ensures that at least one blade is always expanded.\n   */\n  atLeastOneExpanded?: boolean;\n\n  /**\n   * If true, the blades will take up the full width of the container by default.\n   */\n  fullWidthBlades?: boolean;\n\n  /**\n   * Callback function triggered when the expanded state of any blade changes.\n   * It receives the event and the new array of expanded indices as arguments.\n   *\n   * If uncontrolled, this new state will be effective.\n   * If controlled, it is up to the parent component to manage this state.\n   *\n   * @param {SyntheticEvent} event The event source of the callback.\n   * @param {number[]} value Array of indices of the blades that are expanded.\n   */\n  onChange?: (event: SyntheticEvent, value: number[]) => void;\n\n  /**\n   * The blades to be rendered within the group.\n   * Must be instances of `HvBlade`, otherwise the behavior is undefined and will most likely break.\n   */\n  children: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBladesClasses;\n}\n\nfunction getExpandedBlades(\n  defaultExpanded: number[] | undefined,\n  children: React.ReactNode,\n  atMostOneExpanded: boolean,\n  atLeastOneExpanded: boolean,\n) {\n  const childrenArray = Children.toArray(children);\n  const expandedBlades =\n    defaultExpanded ??\n    childrenArray\n      .map((child: any, i: number) => {\n        const childIsControlled = child?.props?.expanded !== undefined;\n        const childIsExpanded = childIsControlled\n          ? child?.props?.expanded\n          : child?.props?.defaultExpanded;\n\n        return childIsExpanded ? i : undefined;\n      })\n      .filter((v) => v !== undefined);\n\n  const numberOfExpandedBlades = expandedBlades.length;\n  if (\n    atLeastOneExpanded &&\n    numberOfExpandedBlades === 0 &&\n    childrenArray.length > 0\n  ) {\n    return [0];\n  }\n  if (atMostOneExpanded && numberOfExpandedBlades > 1) {\n    return [expandedBlades[0]];\n  }\n\n  return expandedBlades;\n}\n\n/**\n * `HvBlades` is a component that groups multiple `HvBlade` components.\n *\n * It allows for better control over the expanded state of blades, suitable for both\n * controlled and uncontrolled scenarios.\n */\nexport const HvBlades = (props: HvBladesProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    expanded: expandedProp,\n    defaultExpanded,\n    atMostOneExpanded = false,\n    atLeastOneExpanded = false,\n    fullWidthBlades = false,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvBlades\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [expanded, setExpanded] = useControlled(expandedProp, () =>\n    getExpandedBlades(\n      defaultExpanded,\n      children,\n      atMostOneExpanded,\n      atLeastOneExpanded,\n    ),\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (event: SyntheticEvent, isExpanded: boolean) => void,\n      event: SyntheticEvent,\n      isExpanded: boolean,\n    ) => {\n      const newValue: number[] = [];\n      if (atMostOneExpanded) {\n        if (isExpanded) {\n          newValue.push(index);\n        }\n      } else {\n        newValue.push(...expanded);\n        if (isExpanded) {\n          newValue.push(index);\n        } else {\n          newValue.splice(newValue.indexOf(index), 1);\n        }\n      }\n\n      if (atLeastOneExpanded && newValue.length === 0) {\n        newValue.push(index);\n      }\n\n      childOnChange?.(event, isExpanded);\n\n      onChange?.(event, newValue);\n\n      // This will only run if uncontrolled\n      setExpanded(newValue);\n    },\n    [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded],\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsExpanded = expanded.includes(i);\n\n      return cloneElement(child, {\n        expanded: childIsExpanded,\n        fullWidth: child?.props?.fullWidth ?? fullWidthBlades,\n        buttonProps: {\n          ...child?.props?.buttonProps,\n          \"aria-disabled\":\n            // If the accordion panel associated with an accordion header is visible,\n            // and if the accordion does not permit the panel to be collapsed, the header\n            // button element has aria-disabled set to true.\n            child?.props?.disabled ||\n            (childIsExpanded && atMostOneExpanded && expanded.length === 1)\n              ? true\n              : undefined,\n        },\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isExpanded: boolean,\n        ) =>\n          onChildChangeInterceptor(\n            i,\n            child?.props?.onChange,\n            event,\n            isExpanded,\n          ),\n      });\n    });\n  }, [\n    children,\n    expanded,\n    fullWidthBlades,\n    atMostOneExpanded,\n    onChildChangeInterceptor,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {modifiedChildren}\n    </div>\n  );\n};\n"],"names":["Children","useDefaultProps","useClasses","useControlled","useCallback","useMemo","cloneElement","jsx"],"mappings":";;;;;;AAwEA,SAAS,kBACP,iBACA,UACA,mBACA,oBACA;AACM,QAAA,gBAAgBA,MAAAA,SAAS,QAAQ,QAAQ;AAC/C,QAAM,iBACJ,mBACA,cACG,IAAI,CAAC,OAAY,MAAc;AACxB,UAAA,oBAAoB,OAAO,OAAO,aAAa;AACrD,UAAM,kBAAkB,oBACpB,OAAO,OAAO,WACd,OAAO,OAAO;AAElB,WAAO,kBAAkB,IAAI;AAAA,EAAA,CAC9B,EACA,OAAO,CAAC,MAAM,MAAM,MAAS;AAElC,QAAM,yBAAyB,eAAe;AAC9C,MACE,sBACA,2BAA2B,KAC3B,cAAc,SAAS,GACvB;AACA,WAAO,CAAC,CAAC;AAAA,EACX;AACI,MAAA,qBAAqB,yBAAyB,GAAG;AAC5C,WAAA,CAAC,eAAe,CAAC,CAAC;AAAA,EAC3B;AAEO,SAAA;AACT;AAQa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,eAAgB,gBAAA,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAIC,yBAAW,WAAW;AAExC,QAAA,CAAC,UAAU,WAAW,IAAIC,eAAA;AAAA,IAAc;AAAA,IAAc,MAC1D;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,2BAA2BC,MAAA;AAAA,IAC/B,CACE,OACA,eACA,OACA,eACG;AACH,YAAM,WAAqB,CAAA;AAC3B,UAAI,mBAAmB;AACrB,YAAI,YAAY;AACd,mBAAS,KAAK,KAAK;AAAA,QACrB;AAAA,MAAA,OACK;AACI,iBAAA,KAAK,GAAG,QAAQ;AACzB,YAAI,YAAY;AACd,mBAAS,KAAK,KAAK;AAAA,QAAA,OACd;AACL,mBAAS,OAAO,SAAS,QAAQ,KAAK,GAAG,CAAC;AAAA,QAC5C;AAAA,MACF;AAEI,UAAA,sBAAsB,SAAS,WAAW,GAAG;AAC/C,iBAAS,KAAK,KAAK;AAAA,MACrB;AAEA,sBAAgB,OAAO,UAAU;AAEjC,iBAAW,OAAO,QAAQ;AAG1B,kBAAY,QAAQ;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,UAAU,aAAa,mBAAmB,kBAAkB;AAAA,EAAA;AAGnE,QAAA,mBAAmBC,MAAAA,QAAQ,MAAM;AACrC,WAAOL,MAAS,SAAA,IAAI,UAAU,CAAC,OAAY,MAAc;AACjD,YAAA,kBAAkB,SAAS,SAAS,CAAC;AAE3C,aAAOM,MAAAA,aAAa,OAAO;AAAA,QACzB,UAAU;AAAA,QACV,WAAW,OAAO,OAAO,aAAa;AAAA,QACtC,aAAa;AAAA,UACX,GAAG,OAAO,OAAO;AAAA,UACjB;AAAA;AAAA;AAAA;AAAA,YAIE,OAAO,OAAO,YACb,mBAAmB,qBAAqB,SAAS,WAAW,IACzD,OACA;AAAA;AAAA,QACR;AAAA,QACA,UAAU,CACR,OACA,eAEA;AAAA,UACE;AAAA,UACA,OAAO,OAAO;AAAA,UACd;AAAA,UACA;AAAA,QACF;AAAA,MAAA,CACH;AAAA,IAAA,CACF;AAAA,EAAA,GACA;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAAC,2BAAA,IAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UACH,iBAAA,CAAA;AAEJ;;;"}

package/dist/cjs/Blades/Blades.styles.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Blades.styles.cjs","sources":["../../../src/Blades/Blades.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBlades\", {\n  root: {\n    position: \"relative\",\n\n    display: \"flex\",\n  },\n});\n"],"names":["createClasses"],"mappings":";;;AAEO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IAEV,SAAS;AAAA,EACX;AACF,CAAC;;;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Dashboard.cjs","sources":["../../../src/Dashboard/Dashboard.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  Layouts,\n  ReactGridLayoutProps,\n  Responsive as ResponsiveGrid,\n  ResponsiveProps,\n  WidthProvider,\n} from \"react-grid-layout\";\nimport { Global } from \"@emotion/react\";\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/Dashboard/Dashboard.styles.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dashboard.styles.cjs","sources":["../../../src/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;;;;"}