@hitachivantara/uikit-react-lab 5.4.49 → 5.5.0

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

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, DragOverlay } from "@dnd-kit/core";
+import { restrictToWindowEdges } from "@dnd-kit/modifiers";
+import { ReactFlowProvider } from "reactflow";
+import { HvDroppableFlow } from "./DroppableFlow.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvFlowProvider } from "./FlowContext/FlowContext.js";
+import { HvFlowSidebarGroupItem } from "./Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js";
+const HvFlow = ({
+  nodeTypes,
+  nodeGroups,
+  sidebar,
+  dndContextProps,
+  ...others
+}) => {
+  const [draggingLabel, setDraggingLabel] = useState(void 0);
+  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));
+  const handleDragStart = (event) => {
+    var _a, _b;
+    if ((_a = event.active.data.current) == null ? void 0 : _a.hvFlow) {
+      setDraggingLabel((_b = event.active.data.current.hvFlow) == null ? void 0 : _b.label);
+    }
+  };
+  const handleDragEnd = () => {
+    setDraggingLabel(void 0);
+  };
+  return /* @__PURE__ */ jsx(ReactFlowProvider, {
+    children: /* @__PURE__ */ jsx(HvFlowProvider, {
+      nodeGroups,
+      nodeTypes,
+      children: /* @__PURE__ */ jsxs(DndContext, {
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        sensors,
+        modifiers: [restrictToWindowEdges],
+        ...dndContextProps,
+        children: [/* @__PURE__ */ jsx(HvDroppableFlow, {
+          ...others
+        }), sidebar, /* @__PURE__ */ jsx(DragOverlay, {
+          modifiers: [restrictToWindowEdges],
+          children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, {
+            label: draggingLabel,
+            isDragging: true
+          }) : null
+        })]
+      })
+    })
+  });
+};
+export {
+  HvFlow
+};
+//# sourceMappingURL=Flow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.js","sources":["../../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n  DndContext,\n  DndContextProps,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowSidebarGroupItem } from \"./Sidebar/SidebarGroup/SidebarGroupItem\";\n\nexport interface HvFlowProps<\n  NodeData = any,\n  NodeType extends string | undefined = string | undefined,\n  NodeGroups extends keyof any = string\n> extends HvDroppableFlowProps<NodeData, NodeType> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /**\n   * Dnd Kit context props. This should be used for accessibility purposes.\n   *\n   * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n   */\n  dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/**\n * Flow component to build interactive node-based UIs.\n *\n * This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n  nodeTypes,\n  nodeGroups,\n  sidebar,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor)\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  // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n  // HvFlowContext is our custom internal context.\n  return (\n    <ReactFlowProvider>\n      <HvFlowProvider nodeGroups={nodeGroups} nodeTypes={nodeTypes}>\n        <DndContext\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n          <DragOverlay modifiers={[restrictToWindowEdges]}>\n            {draggingLabel ? (\n              <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n            ) : null}\n          </DragOverlay>\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":["HvFlow","nodeTypes","nodeGroups","sidebar","dndContextProps","others","draggingLabel","setDraggingLabel","useState","undefined","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","ReactFlowProvider","children","HvFlowProvider","DndContext","onDragStart","onDragEnd","modifiers","restrictToWindowEdges","_jsx","HvDroppableFlow","DragOverlay","HvFlowSidebarGroupItem","isDragging"],"mappings":";;;;;;;;AA+CO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,SAASC,MAAS;AAE5D,QAAMC,UAAUC,WACdC,UAAUC,aAAa,GACvBD,UAAUE,cAAc,CAC1B;AAEA,QAAMC,kBAAmDC,CAAU,UAAA;;AACjE,SAAIA,WAAMC,OAAOC,KAAKC,YAAlBH,mBAA2BI,QAAQ;AACrCb,wBAAiBS,WAAMC,OAAOC,KAAKC,QAAQC,WAA1BJ,mBAAkCK,KAAK;AAAA,IAC1D;AAAA,EAAA;AAGF,QAAMC,gBAA8CA,MAAM;AACxDf,qBAAiBE,MAAS;AAAA,EAAA;AAK5B,6BACGc,mBAAiB;AAAA,IAAAC,8BACfC,gBAAc;AAAA,MAACvB;AAAAA,MAAwBD;AAAAA,MAAqBuB,+BAC1DE,YAAU;AAAA,QACTC,aAAaZ;AAAAA,QACba,WAAWN;AAAAA,QACXZ;AAAAA,QACAmB,WAAW,CAACC,qBAAqB;AAAA,QAAE,GAC/B1B;AAAAA,QAAeoB,UAAA,CAEnBO,oBAACC,iBAAe;AAAA,UAAA,GAAK3B;AAAAA,QAAAA,CAAS,GAC7BF,SACD4B,oBAACE,aAAW;AAAA,UAACJ,WAAW,CAACC,qBAAqB;AAAA,UAAEN,UAC7ClB,gBACCyB,oBAACG,wBAAsB;AAAA,YAACb,OAAOf;AAAAA,YAAe6B,YAAU;AAAA,UAAE,CAAA,IACxD;AAAA,QAAA,CACO,CAAC;AAAA,MAAA,CACJ;AAAA,IAAA,CACE;AAAA,EAAA,CACC;AAEvB;"}

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

@@ -0,0 +1,14 @@
+import { createClasses } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvFlow", {
+  root: {
+    height: "100%"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Flow.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.styles.js","sources":["../../../../src/components/Flow/Flow.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlow\", {\n  root: { height: \"100%\" },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","height"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IAAEC,QAAQ;AAAA,EAAO;AACzB,CAAC;"}

package/dist/esm/components/Flow/FlowContext/FlowContext.js

@@ -0,0 +1,27 @@
+import { createContext, useState, useMemo, useContext } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+const HvFlowContext = createContext({});
+const HvFlowProvider = ({
+  nodeGroups,
+  nodeTypes,
+  children
+}) => {
+  const [expandedNodeGroups, setExpandedNodeGroups] = useState([]);
+  const value = useMemo(() => ({
+    nodeTypes,
+    nodeGroups,
+    expandedNodeGroups,
+    setExpandedNodeGroups
+  }), [nodeGroups, nodeTypes, expandedNodeGroups]);
+  return /* @__PURE__ */ jsx(HvFlowContext.Provider, {
+    value,
+    children
+  });
+};
+const useFlowContext = () => useContext(HvFlowContext);
+export {
+  HvFlowContext,
+  HvFlowProvider,
+  useFlowContext
+};
+//# sourceMappingURL=FlowContext.js.map

package/dist/esm/components/Flow/FlowContext/FlowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowContext.js","sources":["../../../../../src/components/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes groups expanded on sidebar. */\n  expandedNodeGroups?: string[];\n  /** Function to set `expandedNodeGroups`. */\n  setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n  /** Children. */\n  children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n  nodeGroups,\n  nodeTypes,\n  children,\n}: HvFlowProviderProps) => {\n  const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n  const value = useMemo(\n    () => ({\n      nodeTypes,\n      nodeGroups,\n      expandedNodeGroups,\n      setExpandedNodeGroups,\n    }),\n    [nodeGroups, nodeTypes, expandedNodeGroups]\n  );\n\n  return (\n    <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n  );\n};\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":["HvFlowContext","createContext","HvFlowProvider","nodeGroups","nodeTypes","children","expandedNodeGroups","setExpandedNodeGroups","useState","value","useMemo","_jsx","Provider","useFlowContext","useContext"],"mappings":";;AAsBaA,MAAAA,gBAAgBC,cAAkC,EAAE;AAW1D,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACLN;AAAAA,IACAD;AAAAA,IACAG;AAAAA,IACAC;AAAAA,EAEF,IAAA,CAACJ,YAAYC,WAAWE,kBAAkB,CAC5C;AAGEK,SAAAA,oBAACX,cAAcY,UAAQ;AAAA,IAACH;AAAAA,IAAaJ;AAAAA,EAAAA,CAAmC;AAE5E;AAEaQ,MAAAA,iBAAiBA,MAAMC,WAAWd,aAAa;"}

package/dist/esm/components/Flow/Minimap/Minimap.js

@@ -0,0 +1,32 @@
+import { MiniMap } from "reactflow";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { useClasses } from "./Minimap.styles.js";
+import { staticClasses } from "./Minimap.styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+const HvFlowMinimap = ({
+  nodeColor = "atmo4",
+  maskColor = "atmo3",
+  maskStrokeColor = "atmo3",
+  nodeStrokeColor = "atmo4",
+  classes: classesProp,
+  className,
+  ...others
+}) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(MiniMap, {
+    className: cx(classes.root, className),
+    nodeColor: typeof nodeColor === "string" ? getColor(nodeColor, theme.colors.atmo4) : nodeColor,
+    nodeStrokeColor: typeof nodeStrokeColor === "string" ? getColor(nodeStrokeColor, theme.colors.atmo4) : nodeStrokeColor,
+    maskColor: getColor(maskColor, theme.colors.atmo3),
+    maskStrokeColor: getColor(maskStrokeColor, theme.colors.atmo3),
+    ...others
+  });
+};
+export {
+  HvFlowMinimap,
+  staticClasses as flowMinimapClasses
+};
+//# sourceMappingURL=Minimap.js.map

package/dist/esm/components/Flow/Minimap/Minimap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Minimap.js","sources":["../../../../../src/components/Flow/Minimap/Minimap.tsx"],"sourcesContent":["import { GetMiniMapNodeAttribute, MiniMap, MiniMapProps } from \"reactflow\";\n\nimport { ExtractNames } from \"@hitachivantara/uikit-react-core\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { staticClasses, useClasses } from \"./Minimap.styles\";\n\nexport { staticClasses as flowMinimapClasses };\n\nexport type HvFlowMinimapClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowMinimapProps<NodeData = any>\n  extends Omit<\n    MiniMapProps<NodeData>,\n    \"nodeColor\" | \"nodeStrokeColor\" | \"maskColor\" | \"maskStrokeColor\"\n  > {\n  /** Node color. Defaults to `atmo4`. */\n  nodeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n  /** Node stroke color. Defaults to `atmo4`. */\n  nodeStrokeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n  /** Mask color. Defaults to `atmo3`. */\n  maskColor?: HvColorAny;\n  /** Mask stroke color. Defaults to `atmo3`. */\n  maskStrokeColor?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowMinimapClasses;\n}\n\nexport const HvFlowMinimap = ({\n  nodeColor = \"atmo4\",\n  maskColor = \"atmo3\",\n  maskStrokeColor = \"atmo3\",\n  nodeStrokeColor = \"atmo4\",\n  classes: classesProp,\n  className,\n  ...others\n}: HvFlowMinimapProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MiniMap\n      className={cx(classes.root, className)}\n      nodeColor={\n        typeof nodeColor === \"string\"\n          ? getColor(nodeColor, theme.colors.atmo4)\n          : nodeColor\n      }\n      nodeStrokeColor={\n        typeof nodeStrokeColor === \"string\"\n          ? getColor(nodeStrokeColor, theme.colors.atmo4)\n          : nodeStrokeColor\n      }\n      maskColor={getColor(maskColor, theme.colors.atmo3)}\n      maskStrokeColor={getColor(maskStrokeColor, theme.colors.atmo3)}\n      {...others}\n    />\n  );\n};\n"],"names":["HvFlowMinimap","nodeColor","maskColor","maskStrokeColor","nodeStrokeColor","classes","classesProp","className","others","cx","useClasses","MiniMap","root","getColor","theme","colors","atmo4","atmo3"],"mappings":";;;;;AA4BO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,YAAY;AAAA,EACZC,YAAY;AAAA,EACZC,kBAAkB;AAAA,EAClBC,kBAAkB;AAAA,EAClBC,SAASC;AAAAA,EACTC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEH;AAAAA,IAASI;AAAAA,EAAAA,IAAOC,WAAWJ,WAAW;AAE9C,6BACGK,SAAO;AAAA,IACNJ,WAAWE,GAAGJ,QAAQO,MAAML,SAAS;AAAA,IACrCN,WACE,OAAOA,cAAc,WACjBY,SAASZ,WAAWa,MAAMC,OAAOC,KAAK,IACtCf;AAAAA,IAENG,iBACE,OAAOA,oBAAoB,WACvBS,SAAST,iBAAiBU,MAAMC,OAAOC,KAAK,IAC5CZ;AAAAA,IAENF,WAAWW,SAASX,WAAWY,MAAMC,OAAOE,KAAK;AAAA,IACjDd,iBAAiBU,SAASV,iBAAiBW,MAAMC,OAAOE,KAAK;AAAA,IAAE,GAC3DT;AAAAA,EAAAA,CACL;AAEL;"}

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

@@ -0,0 +1,16 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvFlowMinimap", {
+  root: {
+    "&.react-flow__minimap": {
+      backgroundColor: theme.colors.atmo2
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Minimap.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Minimap.styles.js","sources":["../../../../../src/components/Flow/Minimap/Minimap.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowMinimap\", {\n  root: {\n    \"&.react-flow__minimap\": { backgroundColor: theme.colors.atmo2 },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","backgroundColor","theme","colors","atmo2"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJ,yBAAyB;AAAA,MAAEC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAAM;AAAA,EACjE;AACF,CAAC;"}

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

@@ -0,0 +1,120 @@
+import { useMemo, useState } from "react";
+import debounce from "lodash/debounce";
+import { useDroppable } from "@dnd-kit/core";
+import { useLabels, useUniqueId, HvDrawer, HvTypography, HvInput } from "@hitachivantara/uikit-react-core";
+import { Add } from "@hitachivantara/uikit-react-icons";
+import { useClasses } from "./Sidebar.styles.js";
+import { staticClasses } from "./Sidebar.styles.js";
+import { buildGroups } from "./utils.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvFlowSidebarGroup } from "./SidebarGroup/SidebarGroup.js";
+import { useFlowContext } from "../FlowContext/FlowContext.js";
+const DEFAULT_LABELS = {
+  itemAriaRoleDescription: "Draggable",
+  expandGroupButtonAriaLabel: "Expand group",
+  searchPlaceholder: "Search node...",
+  searchAriaLabel: "Search node..."
+};
+const HvFlowSidebar = ({
+  id,
+  title,
+  description,
+  anchor = "right",
+  buttonTitle = "Close",
+  classes: classesProp,
+  labels: labelsProps,
+  ...others
+}) => {
+  const {
+    classes
+  } = useClasses(classesProp);
+  const {
+    nodeGroups,
+    nodeTypes,
+    setExpandedNodeGroups
+  } = useFlowContext();
+  const unfilteredGroups = useMemo(() => buildGroups(nodeGroups, nodeTypes), [nodeGroups, nodeTypes]);
+  const [groups, setGroups] = useState(unfilteredGroups);
+  const labels = useLabels(DEFAULT_LABELS, labelsProps);
+  const drawerElementId = useUniqueId(id, "hvFlowSidebarDrawer");
+  const groupsElementId = useUniqueId(id, "hvFlowSidebarGroups");
+  const {
+    setNodeRef
+  } = useDroppable({
+    id: drawerElementId
+  });
+  const handleSearch = (event, value) => {
+    const gps = value ? Object.entries(unfilteredGroups).reduce((acc, curr) => {
+      const filteredNodes = curr[1].nodes.filter((obj) => obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase()));
+      const nodesCount = filteredNodes.length;
+      if (nodesCount > 0) {
+        acc[curr[0]] = {
+          ...curr[1],
+          nodes: filteredNodes
+        };
+      }
+      return acc;
+    }, {}) : unfilteredGroups;
+    setGroups(gps);
+    setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups(value ? Object.keys(gps) : []);
+  };
+  const handleDebouncedSearch = debounce(handleSearch, 500);
+  return /* @__PURE__ */ jsx(HvDrawer, {
+    BackdropComponent: void 0,
+    variant: "persistent",
+    classes: {
+      paper: classes.drawerPaper
+    },
+    anchor,
+    buttonTitle,
+    ...others,
+    children: /* @__PURE__ */ jsxs("div", {
+      id: drawerElementId,
+      ref: setNodeRef,
+      children: [/* @__PURE__ */ jsxs("div", {
+        className: classes.titleContainer,
+        children: [/* @__PURE__ */ jsx(Add, {
+          role: "none"
+        }), /* @__PURE__ */ jsx(HvTypography, {
+          variant: "title3",
+          children: title
+        })]
+      }), /* @__PURE__ */ jsxs("div", {
+        className: classes.contentContainer,
+        children: [/* @__PURE__ */ jsx(HvTypography, {
+          className: classes.description,
+          children: description
+        }), /* @__PURE__ */ jsx(HvInput, {
+          className: classes.searchRoot,
+          type: "search",
+          placeholder: labels == null ? void 0 : labels.searchPlaceholder,
+          "aria-label": labels == null ? void 0 : labels.searchAriaLabel,
+          "aria-controls": groupsElementId,
+          "aria-owns": groupsElementId,
+          onChange: handleDebouncedSearch,
+          inputProps: {
+            autoComplete: "off"
+          }
+        }), /* @__PURE__ */ jsx("ul", {
+          id: groupsElementId,
+          className: classes.groupsContainer,
+          children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsx(HvFlowSidebarGroup, {
+            id: obj[0],
+            expandButtonProps: {
+              "aria-label": labels == null ? void 0 : labels.expandGroupButtonAriaLabel
+            },
+            itemProps: {
+              "aria-roledescription": labels == null ? void 0 : labels.itemAriaRoleDescription
+            },
+            ...obj[1]
+          }, obj[0]))
+        })]
+      })]
+    })
+  });
+};
+export {
+  HvFlowSidebar,
+  staticClasses as flowSidebarClasses
+};
+//# sourceMappingURL=Sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nimport debounce from \"lodash/debounce\";\n\nimport { useDroppable } from \"@dnd-kit/core\";\n\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 { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../FlowContext\";\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?: {\n    itemAriaRoleDescription?: string;\n    expandGroupButtonAriaLabel?: string;\n    searchPlaceholder?: string;\n    searchAriaLabel?: string;\n  };\n}\n\nconst DEFAULT_LABELS: HvFlowSidebarProps[\"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  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id, \"hvFlowSidebarDrawer\");\n  const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\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 handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\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  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\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 variant=\"title3\">{title}</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          <ul id={groupsElementId} className={classes.groupsContainer}>\n            {Object.entries(groups).map((obj) => (\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          </ul>\n        </div>\n      </div>\n    </HvDrawer>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleSearch","event","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","label","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","HvDrawer","BackdropComponent","undefined","variant","paper","drawerPaper","children","ref","_jsxs","className","titleContainer","_jsx","Add","role","HvTypography","contentContainer","HvInput","searchRoot","type","placeholder","onChange","inputProps","autoComplete","groupsContainer","map","HvFlowSidebarGroup","expandButtonProps","itemProps"],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvFlowSidebar", {
+  drawerPaper: {
+    width: "360px"
+  },
+  titleContainer: {
+    display: "flex",
+    padding: theme.spacing("sm", "lg", "xs", "sm")
+  },
+  contentContainer: {
+    padding: theme.spacing(0, "lg", "sm", "lg")
+  },
+  description: {
+    color: theme.colors.secondary_60
+  },
+  searchRoot: {
+    paddingTop: theme.space.sm,
+    paddingBottom: theme.space.sm
+  },
+  groupsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.space.sm,
+    listStyleType: "none"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Sidebar.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.styles.js","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n  drawerPaper: { width: \"360px\" },\n  titleContainer: {\n    display: \"flex\",\n    padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n  },\n  contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n  description: { color: theme.colors.secondary_60 },\n  searchRoot: {\n    paddingTop: theme.space.sm,\n    paddingBottom: theme.space.sm,\n  },\n  groupsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.sm,\n    listStyleType: \"none\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","drawerPaper","width","titleContainer","display","padding","theme","spacing","contentContainer","description","color","colors","secondary_60","searchRoot","paddingTop","space","sm","paddingBottom","groupsContainer","flexDirection","gap","listStyleType"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,aAAa;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EAC9BC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,SAASC,MAAMC,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACAC,kBAAkB;AAAA,IAAEH,SAASC,MAAMC,QAAQ,GAAG,MAAM,MAAM,IAAI;AAAA,EAAE;AAAA,EAChEE,aAAa;AAAA,IAAEC,OAAOJ,MAAMK,OAAOC;AAAAA,EAAa;AAAA,EAChDC,YAAY;AAAA,IACVC,YAAYR,MAAMS,MAAMC;AAAAA,IACxBC,eAAeX,MAAMS,MAAMC;AAAAA,EAC7B;AAAA,EACAE,iBAAiB;AAAA,IACfd,SAAS;AAAA,IACTe,eAAe;AAAA,IACfC,KAAKd,MAAMS,MAAMC;AAAAA,IACjBK,eAAe;AAAA,EACjB;AACF,CAAC;"}

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

@@ -0,0 +1,79 @@
+import { useMemo, useCallback } from "react";
+import { Up, Down } from "@hitachivantara/uikit-react-icons";
+import { HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
+import { getColor } from "@hitachivantara/uikit-styles";
+import { useClasses } from "./SidebarGroup.styles.js";
+import { staticClasses } from "./SidebarGroup.styles.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useFlowContext } from "../../FlowContext/FlowContext.js";
+import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroupItem/DraggableSidebarGroupItem.js";
+const HvFlowSidebarGroup = ({
+  id,
+  label,
+  nodes,
+  color,
+  description,
+  icon,
+  expandButtonProps,
+  classes: classesProp,
+  itemProps
+}) => {
+  const {
+    classes,
+    cx,
+    css
+  } = useClasses(classesProp);
+  const {
+    expandedNodeGroups,
+    setExpandedNodeGroups
+  } = useFlowContext();
+  const opened = useMemo(() => !!(expandedNodeGroups == null ? void 0 : expandedNodeGroups.find((groupId) => groupId === id)), [expandedNodeGroups, id]);
+  const handleClick = useCallback(() => {
+    setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups((prev) => opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]);
+  }, [id, opened, setExpandedNodeGroups]);
+  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(HvTypography, {
+          variant: "title4",
+          children: nodes.length > 1 ? `${label} (${nodes.length})` : label
+        })]
+      }), /* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        onClick: handleClick,
+        "aria-expanded": opened,
+        ...expandButtonProps,
+        children: opened ? /* @__PURE__ */ jsx(Up, {
+          role: "none"
+        }) : /* @__PURE__ */ jsx(Down, {
+          role: "none"
+        })
+      })]
+    }), description && /* @__PURE__ */ jsx("div", {
+      className: classes.descriptionContainer,
+      children: /* @__PURE__ */ jsx(HvTypography, {
+        children: description
+      })
+    }), opened && /* @__PURE__ */ jsx("div", {
+      className: classes.itemsContainer,
+      children: nodes.map((obj) => /* @__PURE__ */ jsx(HvFlowDraggableSidebarGroupItem, {
+        ...itemProps,
+        ...obj
+      }, obj.id))
+    })]
+  });
+};
+export {
+  HvFlowSidebarGroup,
+  staticClasses as flowSidebarGroupClasses
+};
+//# sourceMappingURL=SidebarGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.js","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../FlowContext\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNodes = {\n  id: string;\n  label: string;\n}[];\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 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.id}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":["HvFlowSidebarGroup","id","label","nodes","color","description","icon","expandButtonProps","classes","classesProp","itemProps","cx","css","useClasses","expandedNodeGroups","setExpandedNodeGroups","useFlowContext","opened","useMemo","find","groupId","handleClick","useCallback","prev","filter","className","borderColor","getColor","root","children","_jsxs","titleContainer","labelContainer","_jsx","role","HvTypography","variant","length","HvButton","onClick","Up","Down","descriptionContainer","itemsContainer","map","obj","HvFlowDraggableSidebarGroupItem"],"mappings":";;;;;;;;;AAyCO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACuB,MAAM;AACvB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe;AAErE,QAAMC,SAASC,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,YAAY,MAAM;AACpCP,mEAAyBQ,CACvBN,SAAAA,SAASM,KAAKC,OAAQJ,CAAYnB,YAAAA,OAAOmB,OAAO,IAAI,CAAC,GAAGG,MAAMtB,EAAE;AAAA,EAEjE,GAAA,CAACA,IAAIgB,QAAQF,qBAAqB,CAAC;AAEtC,8BACE,MAAA;AAAA,IAAIU,WAAWd,GAAGC,IAAI;AAAA,MAAEc,aAAaC,SAASvB,KAAK;AAAA,IAAA,CAAG,GAAGI,QAAQoB,IAAI;AAAA,IAAEC,WACrEC,qBAAA,OAAA;AAAA,MAAKL,WAAWjB,QAAQuB;AAAAA,MAAeF,WACrCC,qBAAA,OAAA;AAAA,QAAKL,WAAWjB,QAAQwB;AAAAA,QAAeH,WACrCI,oBAAA,OAAA;AAAA,UAAKR,WAAWjB,QAAQF;AAAAA,UAAM4B,MAAK;AAAA,UAAML,UACtCvB;AAAAA,QAAAA,CACE,GACL2B,oBAACE,cAAY;AAAA,UAACC,SAAQ;AAAA,UAAQP,UAC3B1B,MAAMkC,SAAS,IAAK,GAAEnC,KAAM,KAAIC,MAAMkC,MAAO,MAAKnC;AAAAA,QAAAA,CACvC,CAAC;AAAA,MAAA,CACZ,GACL+B,oBAACK,UAAQ;AAAA,QACPhC,MAAI;AAAA,QACJiC,SAASlB;AAAAA,QACT,iBAAeJ;AAAAA,QAAO,GAClBV;AAAAA,QAAiBsB,UAEpBZ,SAASgB,oBAACO,IAAE;AAAA,UAACN,MAAK;AAAA,QAAA,CAAQ,IAAID,oBAACQ,MAAI;AAAA,UAACP,MAAK;AAAA,QAAA,CAAQ;AAAA,MAAA,CAC1C,CAAC;AAAA,IAAA,CACR,GACJ7B,eACC4B,oBAAA,OAAA;AAAA,MAAKR,WAAWjB,QAAQkC;AAAAA,MAAqBb,8BAC1CM,cAAY;AAAA,QAAAN,UAAExB;AAAAA,MAAAA,CAA0B;AAAA,IAAA,CACtC,GAENY,UACCgB,oBAAA,OAAA;AAAA,MAAKR,WAAWjB,QAAQmC;AAAAA,MAAed,UACpC1B,MAAMyC,IAAKC,CAAAA,4BACTC,iCAA+B;AAAA,QAAA,GAE1BpC;AAAAA,QAAS,GACTmC;AAAAA,MAAAA,GAFCA,IAAI5C,EAGV,CACF;AAAA,IAAA,CACE,CACN;AAAA,EAAA,CACC;AAER;"}

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

@@ -0,0 +1,37 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvFlowSidebarGroup", {
+  root: {
+    padding: theme.space.sm,
+    borderRadius: theme.radii.round,
+    borderWidth: "1px",
+    borderTopWidth: "3px"
+  },
+  titleContainer: {
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  labelContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
+  icon: {
+    paddingRight: theme.space.xs
+  },
+  descriptionContainer: {
+    padding: `${theme.space.xs} 0 ${theme.space.sm} calc(32px + ${theme.space.xs})`
+  },
+  itemsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.space.xs,
+    paddingLeft: theme.space.sm
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=SidebarGroup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.styles.js","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvFlowSidebarGroup\",\n  {\n    root: {\n      padding: theme.space.sm,\n      borderRadius: theme.radii.round,\n      borderWidth: \"1px\",\n      borderTopWidth: \"3px\",\n    },\n    titleContainer: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n    },\n    labelContainer: {\n      display: \"flex\",\n      alignItems: \"center\",\n    },\n    icon: { paddingRight: theme.space.xs },\n    descriptionContainer: {\n      padding: `${theme.space.xs} 0 ${theme.space.sm} calc(32px + ${theme.space.xs})`,\n    },\n    itemsContainer: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: theme.space.xs,\n      paddingLeft: theme.space.sm,\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","borderRadius","radii","round","borderWidth","borderTopWidth","titleContainer","display","justifyContent","labelContainer","alignItems","icon","paddingRight","xs","descriptionContainer","itemsContainer","flexDirection","gap","paddingLeft"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,sBACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,cAAcH,MAAMI,MAAMC;AAAAA,IAC1BC,aAAa;AAAA,IACbC,gBAAgB;AAAA,EAClB;AAAA,EACAC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,gBAAgB;AAAA,IACdF,SAAS;AAAA,IACTG,YAAY;AAAA,EACd;AAAA,EACAC,MAAM;AAAA,IAAEC,cAAcd,MAAMC,MAAMc;AAAAA,EAAG;AAAA,EACrCC,sBAAsB;AAAA,IACpBjB,SAAU,GAAEC,MAAMC,MAAMc,EAAG,MAAKf,MAAMC,MAAMC,EAAG,gBAAeF,MAAMC,MAAMc,EAAG;AAAA,EAC/E;AAAA,EACAE,gBAAgB;AAAA,IACdR,SAAS;AAAA,IACTS,eAAe;AAAA,IACfC,KAAKnB,MAAMC,MAAMc;AAAAA,IACjBK,aAAapB,MAAMC,MAAMC;AAAAA,EAC3B;AACF,CACF;"}

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

@@ -0,0 +1,48 @@
+import { useForkRef } from "@mui/material";
+import { useRef } from "react";
+import { useDraggable } from "@dnd-kit/core";
+import { HvFlowSidebarGroupItem } from "./SidebarGroupItem.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+const HvFlowDraggableSidebarGroupItem = ({
+  label,
+  id,
+  ...others
+}) => {
+  var _a, _b;
+  const itemRef = useRef(null);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+    transform
+  } = useDraggable({
+    id,
+    data: {
+      hvFlow: {
+        // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow
+        label,
+        // Item position: used to position the item when dropped
+        x: (_a = itemRef.current) == null ? void 0 : _a.getBoundingClientRect().x,
+        y: (_b = itemRef.current) == null ? void 0 : _b.getBoundingClientRect().y
+      }
+    }
+  });
+  const forkedRef = useForkRef(itemRef, setNodeRef);
+  const style = transform ? {
+    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
+  } : void 0;
+  return /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, {
+    ref: forkedRef,
+    style,
+    label,
+    isDragging,
+    ...listeners,
+    ...attributes,
+    ...others
+  });
+};
+export {
+  HvFlowDraggableSidebarGroupItem
+};
+//# sourceMappingURL=DraggableSidebarGroupItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useForkRef } from \"@mui/material\";\n\nimport { useRef } from \"react\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\n\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps {\n  /** Item id: the item type. */\n  id: string;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  label,\n  id,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id,\n      data: {\n        hvFlow: {\n          // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n          label,\n          // Item position: used to position the item when dropped\n          x: itemRef.current?.getBoundingClientRect().x,\n          y: itemRef.current?.getBoundingClientRect().y,\n        },\n      },\n    });\n\n  const forkedRef = useForkRef(itemRef, setNodeRef);\n\n  const style = transform\n    ? {\n        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n      }\n    : undefined;\n\n  return (\n    <HvFlowSidebarGroupItem\n      ref={forkedRef}\n      style={style}\n      label={label}\n      isDragging={isDragging}\n      {...listeners}\n      {...attributes}\n      {...others}\n    />\n  );\n};\n"],"names":["HvFlowDraggableSidebarGroupItem","label","id","others","itemRef","useRef","attributes","listeners","setNodeRef","isDragging","transform","useDraggable","data","hvFlow","x","current","getBoundingClientRect","y","forkedRef","useForkRef","style","undefined","HvFlowSidebarGroupItem","ref"],"mappings":";;;;;AAiBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;;AACpCC,QAAAA,UAAUC,OAAoB,IAAI;AAElC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,aAAa;AAAA,IACXT;AAAAA,IACAU,MAAM;AAAA,MACJC,QAAQ;AAAA;AAAA,QAENZ;AAAAA;AAAAA,QAEAa,IAAGV,aAAQW,YAARX,mBAAiBY,wBAAwBF;AAAAA,QAC5CG,IAAGb,aAAQW,YAARX,mBAAiBY,wBAAwBC;AAAAA,MAC9C;AAAA,IACF;AAAA,EAAA,CACD;AAEGC,QAAAA,YAAYC,WAAWf,SAASI,UAAU;AAEhD,QAAMY,QAAQV,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUI,CAAE,OAAMJ,UAAUO,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,6BACGC,wBAAsB;AAAA,IACrBC,KAAKL;AAAAA,IACLE;AAAAA,IACAnB;AAAAA,IACAQ;AAAAA,IAAuB,GACnBF;AAAAA,IAAS,GACTD;AAAAA,IAAU,GACVH;AAAAA,EAAAA,CACL;AAEL;"}

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

@@ -0,0 +1,35 @@
+import { forwardRef } from "react";
+import { HvTypography } from "@hitachivantara/uikit-react-core";
+import { Drag } from "@hitachivantara/uikit-react-icons";
+import { useClasses } from "./SidebarGroupItem.styles.js";
+import { staticClasses } from "./SidebarGroupItem.styles.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+const HvFlowSidebarGroupItem = forwardRef(({
+  label,
+  isDragging,
+  classes: classesProp,
+  className,
+  ...others
+}, ref) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: cx(classes.root, {
+      [classes.dragging]: isDragging
+    }, className),
+    ...others,
+    children: [/* @__PURE__ */ jsx(HvTypography, {
+      children: label
+    }), /* @__PURE__ */ jsx(Drag, {
+      role: "none"
+    })]
+  });
+});
+export {
+  HvFlowSidebarGroupItem,
+  staticClasses as flowSidebarGroupItemClasses
+};
+//# sourceMappingURL=SidebarGroupItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\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":["HvFlowSidebarGroupItem","forwardRef","label","isDragging","classes","classesProp","className","others","ref","cx","useClasses","root","dragging","children","_jsx","HvTypography","Drag","role"],"mappings":";;;;;;AAwBaA,MAAAA,yBAAyBC,WAIpC,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACA,GAAGC;AACwB,GAC7BC,QACG;AACG,QAAA;AAAA,IAAEJ;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,WAAWL,WAAW;AAE9C,8BACE,OAAA;AAAA,IACEG;AAAAA,IACAF,WAAWG,GACTL,QAAQO,MACR;AAAA,MAAE,CAACP,QAAQQ,QAAQ,GAAGT;AAAAA,OACtBG,SACF;AAAA,IAAE,GACEC;AAAAA,IAAMM,UAAA,CAEVC,oBAACC,cAAY;AAAA,MAAAF,UAAEX;AAAAA,IAAAA,CAAoB,GACnCY,oBAACE,MAAI;AAAA,MAACC,MAAK;AAAA,IAAA,CAAQ,CAAC;AAAA,EAAA,CACjB;AAET,CACF;"}

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

@@ -0,0 +1,26 @@
+import { createClasses, theme, outlineStyles } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvFlowSidebarGroupItem", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    border: `1px solid ${theme.colors.atmo4}`,
+    padding: theme.spacing(0, 0, 0, "sm"),
+    cursor: "pointer",
+    boxShadow: `0 1px 0 ${theme.colors.shad1}`,
+    "&:focus-visible": {
+      ...outlineStyles
+    }
+  },
+  dragging: {
+    borderColor: theme.colors.primary_80
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=SidebarGroupItem.styles.js.map