@hitachivantara/uikit-react-lab 5.4.49 → 5.5.0

package/dist/cjs/components/Flow/Sidebar/Sidebar.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.styles.cjs","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,eAAAA,cAAc,iBAAiB;AAAA,EAC1EC,aAAa;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EAC9BC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,SAASC,eAAMC,MAAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACAC,kBAAkB;AAAA,IAAEH,SAASC,eAAMC,MAAAA,QAAQ,GAAG,MAAM,MAAM,IAAI;AAAA,EAAE;AAAA,EAChEE,aAAa;AAAA,IAAEC,OAAOJ,eAAAA,MAAMK,OAAOC;AAAAA,EAAa;AAAA,EAChDC,YAAY;AAAA,IACVC,YAAYR,eAAAA,MAAMS,MAAMC;AAAAA,IACxBC,eAAeX,eAAAA,MAAMS,MAAMC;AAAAA,EAC7B;AAAA,EACAE,iBAAiB;AAAA,IACfd,SAAS;AAAA,IACTe,eAAe;AAAA,IACfC,KAAKd,eAAAA,MAAMS,MAAMC;AAAAA,IACjBK,eAAe;AAAA,EACjB;AACF,CAAC;;;"}

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const SidebarGroup_styles = require("./SidebarGroup.styles.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const FlowContext = require("../../FlowContext/FlowContext.cjs");
+const DraggableSidebarGroupItem = require("./SidebarGroupItem/DraggableSidebarGroupItem.cjs");
+const HvFlowSidebarGroup = ({
+  id,
+  label,
+  nodes,
+  color,
+  description,
+  icon,
+  expandButtonProps,
+  classes: classesProp,
+  itemProps
+}) => {
+  const {
+    classes,
+    cx,
+    css
+  } = SidebarGroup_styles.useClasses(classesProp);
+  const {
+    expandedNodeGroups,
+    setExpandedNodeGroups
+  } = FlowContext.useFlowContext();
+  const opened = React.useMemo(() => !!(expandedNodeGroups == null ? void 0 : expandedNodeGroups.find((groupId) => groupId === id)), [expandedNodeGroups, id]);
+  const handleClick = React.useCallback(() => {
+    setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups((prev) => opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]);
+  }, [id, opened, setExpandedNodeGroups]);
+  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(uikitReactCore.HvTypography, {
+          variant: "title4",
+          children: nodes.length > 1 ? `${label} (${nodes.length})` : label
+        })]
+      }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
+        icon: true,
+        onClick: handleClick,
+        "aria-expanded": opened,
+        ...expandButtonProps,
+        children: opened ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, {
+          role: "none"
+        }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, {
+          role: "none"
+        })
+      })]
+    }), description && /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: classes.descriptionContainer,
+      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
+        children: description
+      })
+    }), opened && /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: classes.itemsContainer,
+      children: nodes.map((obj) => /* @__PURE__ */ jsxRuntime.jsx(DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem, {
+        ...itemProps,
+        ...obj
+      }, obj.id))
+    })]
+  });
+};
+exports.flowSidebarGroupClasses = SidebarGroup_styles.staticClasses;
+exports.HvFlowSidebarGroup = HvFlowSidebarGroup;
+//# sourceMappingURL=SidebarGroup.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.cjs","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,oBAAAA,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,YAAe,eAAA;AAErE,QAAMC,SAASC,MAAAA,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,MAAAA,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,yCACE,MAAA;AAAA,IAAIU,WAAWd,GAAGC,IAAI;AAAA,MAAEc,aAAaC,qBAASvB,KAAK;AAAA,IAAA,CAAG,GAAGI,QAAQoB,IAAI;AAAA,IAAEC,WACrEC,2BAAAA,KAAA,OAAA;AAAA,MAAKL,WAAWjB,QAAQuB;AAAAA,MAAeF,WACrCC,2BAAAA,KAAA,OAAA;AAAA,QAAKL,WAAWjB,QAAQwB;AAAAA,QAAeH,WACrCI,2BAAAA,IAAA,OAAA;AAAA,UAAKR,WAAWjB,QAAQF;AAAAA,UAAM4B,MAAK;AAAA,UAAML,UACtCvB;AAAAA,QAAAA,CACE,GACL2B,2BAAAA,IAACE,6BAAY;AAAA,UAACC,SAAQ;AAAA,UAAQP,UAC3B1B,MAAMkC,SAAS,IAAK,GAAEnC,KAAM,KAAIC,MAAMkC,MAAO,MAAKnC;AAAAA,QAAAA,CACvC,CAAC;AAAA,MAAA,CACZ,GACL+B,2BAAAA,IAACK,yBAAQ;AAAA,QACPhC,MAAI;AAAA,QACJiC,SAASlB;AAAAA,QACT,iBAAeJ;AAAAA,QAAO,GAClBV;AAAAA,QAAiBsB,UAEpBZ,SAASgB,2BAAAA,IAACO,oBAAE;AAAA,UAACN,MAAK;AAAA,QAAA,CAAQ,IAAID,2BAAAA,IAACQ,sBAAI;AAAA,UAACP,MAAK;AAAA,QAAA,CAAQ;AAAA,MAAA,CAC1C,CAAC;AAAA,IAAA,CACR,GACJ7B,eACC4B,2BAAAA,IAAA,OAAA;AAAA,MAAKR,WAAWjB,QAAQkC;AAAAA,MAAqBb,yCAC1CM,6BAAY;AAAA,QAAAN,UAAExB;AAAAA,MAAAA,CAA0B;AAAA,IAAA,CACtC,GAENY,UACCgB,2BAAAA,IAAA,OAAA;AAAA,MAAKR,WAAWjB,QAAQmC;AAAAA,MAAed,UACpC1B,MAAMyC,IAAKC,CAAAA,uCACTC,0BAAAA,iCAA+B;AAAA,QAAA,GAE1BpC;AAAAA,QAAS,GACTmC;AAAAA,MAAAA,GAFCA,IAAI5C,EAGV,CACF;AAAA,IAAA,CACE,CACN;AAAA,EAAA,CACC;AAER;;;"}

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

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

package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.styles.cjs","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,eAAAA,cAC3C,sBACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAASC,eAAAA,MAAMC,MAAMC;AAAAA,IACrBC,cAAcH,eAAAA,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,eAAAA,MAAMC,MAAMc;AAAAA,EAAG;AAAA,EACrCC,sBAAsB;AAAA,IACpBjB,SAAU,GAAEC,eAAAA,MAAMC,MAAMc,EAAG,MAAKf,eAAAA,MAAMC,MAAMC,EAAG,gBAAeF,eAAAA,MAAMC,MAAMc,EAAG;AAAA,EAC/E;AAAA,EACAE,gBAAgB;AAAA,IACdR,SAAS;AAAA,IACTS,eAAe;AAAA,IACfC,KAAKnB,eAAAA,MAAMC,MAAMc;AAAAA,IACjBK,aAAapB,eAAAA,MAAMC,MAAMC;AAAAA,EAC3B;AACF,CACF;;;"}

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const material = require("@mui/material");
+const React = require("react");
+const core = require("@dnd-kit/core");
+const SidebarGroupItem = require("./SidebarGroupItem.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const HvFlowDraggableSidebarGroupItem = ({
+  label,
+  id,
+  ...others
+}) => {
+  var _a, _b;
+  const itemRef = React.useRef(null);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+    transform
+  } = core.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 = material.useForkRef(itemRef, setNodeRef);
+  const style = transform ? {
+    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, {
+    ref: forkedRef,
+    style,
+    label,
+    isDragging,
+    ...listeners,
+    ...attributes,
+    ...others
+  });
+};
+exports.HvFlowDraggableSidebarGroupItem = HvFlowDraggableSidebarGroupItem;
+//# sourceMappingURL=DraggableSidebarGroupItem.cjs.map

package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableSidebarGroupItem.cjs","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,aAAoB,IAAI;AAElC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,kBAAa;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,SAAAA,WAAWf,SAASI,UAAU;AAEhD,QAAMY,QAAQV,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUI,CAAE,OAAMJ,UAAUO,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,wCACGC,iBAAAA,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/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const SidebarGroupItem_styles = require("./SidebarGroupItem.styles.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const HvFlowSidebarGroupItem = React.forwardRef(({
+  label,
+  isDragging,
+  classes: classesProp,
+  className,
+  ...others
+}, ref) => {
+  const {
+    classes,
+    cx
+  } = SidebarGroupItem_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    ref,
+    className: cx(classes.root, {
+      [classes.dragging]: isDragging
+    }, className),
+    ...others,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
+      children: label
+    }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Drag, {
+      role: "none"
+    })]
+  });
+});
+exports.flowSidebarGroupItemClasses = SidebarGroupItem_styles.staticClasses;
+exports.HvFlowSidebarGroupItem = HvFlowSidebarGroupItem;
+//# sourceMappingURL=SidebarGroupItem.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroupItem.cjs","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,iBAIpC,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,wBAAAA,WAAWL,WAAW;AAE9C,yCACE,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,2BAAAA,IAACC,6BAAY;AAAA,MAAAF,UAAEX;AAAAA,IAAAA,CAAoB,GACnCY,2BAAAA,IAACE,sBAAI;AAAA,MAACC,MAAK;AAAA,IAAA,CAAQ,CAAC;AAAA,EAAA,CACjB;AAET,CACF;;;"}

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const {
+  staticClasses,
+  useClasses
+} = uikitReactCore.createClasses("HvFlowSidebarGroupItem", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    border: `1px solid ${uikitReactCore.theme.colors.atmo4}`,
+    padding: uikitReactCore.theme.spacing(0, 0, 0, "sm"),
+    cursor: "pointer",
+    boxShadow: `0 1px 0 ${uikitReactCore.theme.colors.shad1}`,
+    "&:focus-visible": {
+      ...uikitReactCore.outlineStyles
+    }
+  },
+  dragging: {
+    borderColor: uikitReactCore.theme.colors.primary_80
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=SidebarGroupItem.styles.cjs.map

package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroupItem.styles.cjs","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.tsx"],"sourcesContent":["import {\n  createClasses,\n  outlineStyles,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvFlowSidebarGroupItem\",\n  {\n    root: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      border: `1px solid ${theme.colors.atmo4}`,\n      padding: theme.spacing(0, 0, 0, \"sm\"),\n      cursor: \"pointer\",\n      boxShadow: `0 1px 0 ${theme.colors.shad1}`,\n\n      \"&:focus-visible\": {\n        ...outlineStyles,\n      },\n    },\n    dragging: { borderColor: theme.colors.primary_80 },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","border","theme","colors","atmo4","padding","spacing","cursor","boxShadow","shad1","outlineStyles","dragging","borderColor","primary_80"],"mappings":";;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAC3C,0BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,QAAS,aAAYC,eAAMC,MAAAA,OAAOC,KAAM;AAAA,IACxCC,SAASH,eAAMI,MAAAA,QAAQ,GAAG,GAAG,GAAG,IAAI;AAAA,IACpCC,QAAQ;AAAA,IACRC,WAAY,WAAUN,eAAMC,MAAAA,OAAOM,KAAM;AAAA,IAEzC,mBAAmB;AAAA,MACjB,GAAGC,eAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IAAEC,aAAaV,eAAAA,MAAMC,OAAOU;AAAAA,EAAW;AACnD,CACF;;;"}

package/dist/cjs/components/Flow/Sidebar/utils.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const buildGroups = (nodeGroups, nodeTypes) => {
+  if (nodeGroups) {
+    const groups = Object.entries(nodeGroups).reduce((acc, curr) => {
+      const nodes = nodeTypes ? Object.entries(nodeTypes).reduce((accN, currN) => {
+        var _a, _b;
+        if (((_a = currN[1].meta) == null ? void 0 : _a.groupId) === curr[0]) {
+          accN.push({
+            id: currN[0],
+            label: (_b = currN[1].meta) == null ? void 0 : _b.label
+          });
+        }
+        return accN;
+      }, []) : [];
+      acc[curr[0]] = {
+        ...curr[1],
+        nodes
+      };
+      return acc;
+    }, {});
+    return groups;
+  }
+  return {};
+};
+exports.buildGroups = buildGroups;
+//# sourceMappingURL=utils.cjs.map

package/dist/cjs/components/Flow/Sidebar/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../../../src/components/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { HvFlowSidebarGroupNodes } from \"./SidebarGroup\";\n\nexport const buildGroups = (\n  nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n  nodeTypes: HvFlowContextValue[\"nodeTypes\"]\n): {\n  [key: string]: HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n} => {\n  if (nodeGroups) {\n    const groups = Object.entries(nodeGroups).reduce((acc, curr) => {\n      const nodes = nodeTypes\n        ? Object.entries(nodeTypes).reduce(\n            (accN: HvFlowSidebarGroupNodes, currN) => {\n              if (currN[1].meta?.groupId === curr[0]) {\n                accN.push({\n                  id: currN[0],\n                  label: currN[1].meta?.label,\n                });\n              }\n              return accN;\n            },\n            []\n          )\n        : [];\n\n      acc[curr[0]] = {\n        ...curr[1],\n        nodes,\n      };\n\n      return acc;\n    }, {});\n\n    return groups;\n  }\n\n  return {};\n};\n"],"names":["buildGroups","nodeGroups","nodeTypes","groups","Object","entries","reduce","acc","curr","nodes","accN","currN","meta","groupId","push","id","label"],"mappings":";;AAIaA,MAAAA,cAAcA,CACzBC,YACAC,cAGG;AACH,MAAID,YAAY;AACRE,UAAAA,SAASC,OAAOC,QAAQJ,UAAU,EAAEK,OAAO,CAACC,KAAKC,SAAS;AACxDC,YAAAA,QAAQP,YACVE,OAAOC,QAAQH,SAAS,EAAEI,OACxB,CAACI,MAA+BC,UAAU;;AACxC,cAAIA,WAAM,CAAC,EAAEC,SAATD,mBAAeE,aAAYL,KAAK,CAAC,GAAG;AACtCE,eAAKI,KAAK;AAAA,YACRC,IAAIJ,MAAM,CAAC;AAAA,YACXK,QAAOL,WAAM,CAAC,EAAEC,SAATD,mBAAeK;AAAAA,UAAAA,CACvB;AAAA,QACH;AACON,eAAAA;AAAAA,MAAAA,GAET,CAAA,CACF,IACA;AAEAF,UAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,QACb,GAAGA,KAAK,CAAC;AAAA,QACTC;AAAAA,MAAAA;AAGKF,aAAAA;AAAAA,IACT,GAAG,CAAE,CAAA;AAEEJ,WAAAA;AAAAA,EACT;AAEA,SAAO;AACT;;"}

package/dist/cjs/index.cjs

@@ -13,6 +13,14 @@ const WizardContent = require("./components/Wizard/WizardContent/WizardContent.c
 const WizardContext = require("./components/Wizard/WizardContext/WizardContext.cjs");
 const WizardTitle_styles = require("./components/Wizard/WizardTitle/WizardTitle.styles.cjs");
 const WizardTitle = require("./components/Wizard/WizardTitle/WizardTitle.cjs");
+const Flow_styles = require("./components/Flow/Flow.styles.cjs");
+const Background = require("./components/Flow/Background/Background.cjs");
+const Controls = require("./components/Flow/Controls/Controls.cjs");
+const Minimap_styles = require("./components/Flow/Minimap/Minimap.styles.cjs");
+const Minimap = require("./components/Flow/Minimap/Minimap.cjs");
+const Sidebar_styles = require("./components/Flow/Sidebar/Sidebar.styles.cjs");
+const Sidebar = require("./components/Flow/Sidebar/Sidebar.cjs");
+const Flow = require("./components/Flow/Flow.cjs");
 exports.stepNavigationClasses = StepNavigation_styles.staticClasses;
 exports.HvStepNavigation = StepNavigation.HvStepNavigation;
 exports.wizardClasses = Wizard_styles.staticClasses;
@@ -26,4 +34,12 @@ exports.HvWizardContent = WizardContent.HvWizardContent;
 exports.HvWizardContext = WizardContext.default;
 exports.wizardTitleClasses = WizardTitle_styles.staticClasses;
 exports.HvWizardTitle = WizardTitle.HvWizardTitle;
+exports.flowClasses = Flow_styles.staticClasses;
+exports.HvFlowBackground = Background.HvFlowBackground;
+exports.HvFlowControls = Controls.HvFlowControls;
+exports.flowMinimapClasses = Minimap_styles.staticClasses;
+exports.HvFlowMinimap = Minimap.HvFlowMinimap;
+exports.flowSidebarClasses = Sidebar_styles.staticClasses;
+exports.HvFlowSidebar = Sidebar.HvFlowSidebar;
+exports.HvFlow = Flow.HvFlow;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

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

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

@@ -0,0 +1,16 @@
+import { Background } from "reactflow";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { jsx } from "@emotion/react/jsx-runtime";
+const HvFlowBackground = ({
+  color = "secondary",
+  ...others
+}) => {
+  return /* @__PURE__ */ jsx(Background, {
+    color: getColor(color, theme.colors.secondary),
+    ...others
+  });
+};
+export {
+  HvFlowBackground
+};
+//# sourceMappingURL=Background.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Background.js","sources":["../../../../../src/components/Flow/Background/Background.tsx"],"sourcesContent":["import { Background, BackgroundProps } from \"reactflow\";\n\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nexport interface HvFlowBackgroundProps extends Omit<BackgroundProps, \"color\"> {\n  /** Color for the background dots. Defaults to `secondary`. */\n  color?: HvColorAny;\n}\n\nexport const HvFlowBackground = ({\n  color = \"secondary\",\n  ...others\n}: HvFlowBackgroundProps) => {\n  return (\n    <Background color={getColor(color, theme.colors.secondary)} {...others} />\n  );\n};\n"],"names":["HvFlowBackground","color","others","Background","getColor","theme","colors","secondary"],"mappings":";;;AASO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC,QAAQ;AAAA,EACR,GAAGC;AACkB,MAAM;AAC3B,6BACGC,YAAU;AAAA,IAACF,OAAOG,SAASH,OAAOI,MAAMC,OAAOC,SAAS;AAAA,IAAE,GAAKL;AAAAA,EAAAA,CAAS;AAE7E;"}

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

@@ -0,0 +1,108 @@
+import { useStore, useStoreApi, useReactFlow, Panel } from "reactflow";
+import { shallow } from "zustand/shallow";
+import { useLabels, HvMultiButton, HvButton } from "@hitachivantara/uikit-react-core";
+import { ZoomIn, ZoomOut, Focus, Unlock, Lock } from "@hitachivantara/uikit-react-icons";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+const DEFAULT_LABELS = {
+  fitView: "Fit view",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  interactive: "Interactive"
+};
+const selector = (state) => ({
+  isInteractive: state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,
+  minZoomReached: state.transform[2] <= state.minZoom,
+  maxZoomReached: state.transform[2] >= state.maxZoom
+});
+const HvFlowControls = ({
+  onZoomIn: onZoomInProp,
+  onZoomOut: onZoomOutProp,
+  onFitView: onFitViewProp,
+  labels: labelsProps,
+  hideInteractive,
+  hideFitView,
+  hideZoom,
+  position = "bottom-center",
+  orientation = "horizontal",
+  onInteractiveChange,
+  fitViewOptions,
+  children,
+  ...others
+}) => {
+  const {
+    isInteractive,
+    minZoomReached,
+    maxZoomReached
+  } = useStore(selector, shallow);
+  const store = useStoreApi();
+  const {
+    zoomIn,
+    zoomOut,
+    fitView
+  } = useReactFlow();
+  const labels = useLabels(DEFAULT_LABELS, labelsProps);
+  const handleZoomIn = () => {
+    zoomIn();
+    onZoomInProp == null ? void 0 : onZoomInProp();
+  };
+  const handleZoomOut = () => {
+    zoomOut();
+    onZoomOutProp == null ? void 0 : onZoomOutProp();
+  };
+  const handleFitView = () => {
+    fitView(fitViewOptions);
+    onFitViewProp == null ? void 0 : onFitViewProp();
+  };
+  const handleInteractive = () => {
+    store.setState({
+      nodesDraggable: !isInteractive,
+      nodesConnectable: !isInteractive,
+      elementsSelectable: !isInteractive
+    });
+    onInteractiveChange == null ? void 0 : onInteractiveChange(!isInteractive);
+  };
+  return /* @__PURE__ */ jsx(Panel, {
+    position,
+    ...others,
+    children: /* @__PURE__ */ jsxs(HvMultiButton, {
+      vertical: orientation === "vertical",
+      children: [!hideZoom && /* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        title: labels == null ? void 0 : labels.zoomIn,
+        onClick: handleZoomIn,
+        disabled: maxZoomReached,
+        children: /* @__PURE__ */ jsx(ZoomIn, {
+          role: "none"
+        })
+      }), !hideZoom && /* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        title: labels == null ? void 0 : labels.zoomOut,
+        onClick: handleZoomOut,
+        disabled: minZoomReached,
+        children: /* @__PURE__ */ jsx(ZoomOut, {
+          role: "none"
+        })
+      }), !hideFitView && /* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        title: labels == null ? void 0 : labels.fitView,
+        onClick: handleFitView,
+        children: /* @__PURE__ */ jsx(Focus, {
+          role: "none"
+        })
+      }), !hideInteractive && /* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        title: labels == null ? void 0 : labels.interactive,
+        onClick: handleInteractive,
+        children: isInteractive ? /* @__PURE__ */ jsx(Unlock, {
+          role: "none"
+        }) : /* @__PURE__ */ jsx(Lock, {
+          role: "none"
+        })
+      }), children]
+    })
+  });
+};
+export {
+  HvFlowControls
+};
+//# sourceMappingURL=Controls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.js","sources":["../../../../../src/components/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n  ControlProps,\n  Panel,\n  PanelPosition,\n  ReactFlowState,\n  useReactFlow,\n  useStore,\n  useStoreApi,\n} from \"reactflow\";\n\nimport { shallow } from \"zustand/shallow\";\n\nimport {\n  HvButton,\n  HvMultiButton,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  Focus,\n  Lock,\n  Unlock,\n  ZoomIn,\n  ZoomOut,\n} from \"@hitachivantara/uikit-react-icons\";\n\nexport type HvFlowControlsPosition = PanelPosition;\n\nexport interface HvFlowControlsProps\n  extends Omit<\n    ControlProps,\n    \"position\" | \"showFitView\" | \"showInteractive\" | \"showZoom\"\n  > {\n  /** Controls position. Defaults to `bottom-center`. */\n  position?: HvFlowControlsPosition;\n  /** Controls orientation. Defaults to `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Labels used on the controls buttons. */\n  labels?: {\n    zoomIn?: string;\n    zoomOut?: string;\n    fitView?: string;\n    interactive?: string;\n  };\n  /** Whether to hide the zoom controls. */\n  hideZoom?: boolean;\n  /** Whether to hide the fit view controls. */\n  hideFitView?: boolean;\n  /** Whether to hide the interactive controls. */\n  hideInteractive?: boolean;\n}\n\nconst DEFAULT_LABELS: HvFlowControlsProps[\"labels\"] = {\n  fitView: \"Fit view\",\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  interactive: \"Interactive\",\n};\n\nconst selector = (state: ReactFlowState) => ({\n  isInteractive:\n    state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,\n  minZoomReached: state.transform[2] <= state.minZoom,\n  maxZoomReached: state.transform[2] >= state.maxZoom,\n});\n\nexport const HvFlowControls = ({\n  onZoomIn: onZoomInProp,\n  onZoomOut: onZoomOutProp,\n  onFitView: onFitViewProp,\n  labels: labelsProps,\n  hideInteractive,\n  hideFitView,\n  hideZoom,\n  position = \"bottom-center\",\n  orientation = \"horizontal\",\n  onInteractiveChange,\n  fitViewOptions,\n  children,\n  ...others\n}: HvFlowControlsProps) => {\n  const { isInteractive, minZoomReached, maxZoomReached } = useStore(\n    selector,\n    shallow\n  );\n  const store = useStoreApi();\n  const { zoomIn, zoomOut, fitView } = useReactFlow();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const handleZoomIn = () => {\n    zoomIn();\n    onZoomInProp?.();\n  };\n\n  const handleZoomOut = () => {\n    zoomOut();\n    onZoomOutProp?.();\n  };\n\n  const handleFitView = () => {\n    fitView(fitViewOptions);\n    onFitViewProp?.();\n  };\n\n  const handleInteractive = () => {\n    store.setState({\n      nodesDraggable: !isInteractive,\n      nodesConnectable: !isInteractive,\n      elementsSelectable: !isInteractive,\n    });\n\n    onInteractiveChange?.(!isInteractive);\n  };\n\n  return (\n    <Panel position={position} {...others}>\n      <HvMultiButton vertical={orientation === \"vertical\"}>\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomIn}\n            onClick={handleZoomIn}\n            disabled={maxZoomReached}\n          >\n            <ZoomIn role=\"none\" />\n          </HvButton>\n        )}\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomOut}\n            onClick={handleZoomOut}\n            disabled={minZoomReached}\n          >\n            <ZoomOut role=\"none\" />\n          </HvButton>\n        )}\n        {!hideFitView && (\n          <HvButton icon title={labels?.fitView} onClick={handleFitView}>\n            <Focus role=\"none\" />\n          </HvButton>\n        )}\n        {!hideInteractive && (\n          <HvButton\n            icon\n            title={labels?.interactive}\n            onClick={handleInteractive}\n          >\n            {isInteractive ? <Unlock role=\"none\" /> : <Lock role=\"none\" />}\n          </HvButton>\n        )}\n        {children}\n      </HvMultiButton>\n    </Panel>\n  );\n};\n"],"names":["DEFAULT_LABELS","fitView","zoomIn","zoomOut","interactive","selector","state","isInteractive","nodesDraggable","nodesConnectable","elementsSelectable","minZoomReached","transform","minZoom","maxZoomReached","maxZoom","HvFlowControls","onZoomIn","onZoomInProp","onZoomOut","onZoomOutProp","onFitView","onFitViewProp","labels","labelsProps","hideInteractive","hideFitView","hideZoom","position","orientation","onInteractiveChange","fitViewOptions","children","others","useStore","shallow","store","useStoreApi","useReactFlow","useLabels","handleZoomIn","handleZoomOut","handleFitView","handleInteractive","setState","Panel","HvMultiButton","vertical","HvButton","icon","title","onClick","disabled","ZoomIn","role","ZoomOut","Focus","_jsx","Unlock","Lock"],"mappings":";;;;;AAmDA,MAAMA,iBAAgD;AAAA,EACpDC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,aAAa;AACf;AAEA,MAAMC,WAAWA,CAACC,WAA2B;AAAA,EAC3CC,eACED,MAAME,kBAAkBF,MAAMG,oBAAoBH,MAAMI;AAAAA,EAC1DC,gBAAgBL,MAAMM,UAAU,CAAC,KAAKN,MAAMO;AAAAA,EAC5CC,gBAAgBR,MAAMM,UAAU,CAAC,KAAKN,MAAMS;AAC9C;AAEO,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC,UAAUC;AAAAA,EACVC,WAAWC;AAAAA,EACXC,WAAWC;AAAAA,EACXC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAE1B;AAAAA,IAAeI;AAAAA,IAAgBG;AAAAA,EAAAA,IAAmBoB,SACxD7B,UACA8B,OACF;AACA,QAAMC,QAAQC;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,aAAa;AAE5Cf,QAAAA,SAASgB,UAAUvC,gBAAgBwB,WAAW;AAEpD,QAAMgB,eAAeA,MAAM;AAClB;AACQ;AAAA,EAAA;AAGjB,QAAMC,gBAAgBA,MAAM;AAClB;AACQ;AAAA,EAAA;AAGlB,QAAMC,gBAAgBA,MAAM;AAC1BzC,YAAQ8B,cAAc;AACN;AAAA,EAAA;AAGlB,QAAMY,oBAAoBA,MAAM;AAC9BP,UAAMQ,SAAS;AAAA,MACbpC,gBAAgB,CAACD;AAAAA,MACjBE,kBAAkB,CAACF;AAAAA,MACnBG,oBAAoB,CAACH;AAAAA,IAAAA,CACtB;AAEDuB,+DAAsB,CAACvB;AAAAA,EAAa;AAGtC,6BACGsC,OAAK;AAAA,IAACjB;AAAAA,IAAmB,GAAKK;AAAAA,IAAMD,+BAClCc,eAAa;AAAA,MAACC,UAAUlB,gBAAgB;AAAA,MAAWG,WACjD,CAACL,gCACCqB,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQrB;AAAAA,QACfiD,SAASX;AAAAA,QACTY,UAAUtC;AAAAA,QAAekB,8BAExBqB,QAAM;AAAA,UAACC,MAAK;AAAA,QAAA,CAAQ;AAAA,MACb,CAAA,GAEX,CAAC3B,gCACCqB,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQpB;AAAAA,QACfgD,SAASV;AAAAA,QACTW,UAAUzC;AAAAA,QAAeqB,8BAExBuB,SAAO;AAAA,UAACD,MAAK;AAAA,QAAA,CAAQ;AAAA,MACd,CAAA,GAEX,CAAC5B,mCACCsB,UAAQ;AAAA,QAACC,MAAI;AAAA,QAACC,OAAO3B,iCAAQtB;AAAAA,QAASkD,SAAST;AAAAA,QAAcV,8BAC3DwB,OAAK;AAAA,UAACF,MAAK;AAAA,QAAA,CAAQ;AAAA,MACZ,CAAA,GAEX,CAAC7B,uCACCuB,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQnB;AAAAA,QACf+C,SAASR;AAAAA,QAAkBX,UAE1BzB,gBAAgBkD,oBAACC,QAAM;AAAA,UAACJ,MAAK;AAAA,QAAA,CAAQ,IAAIG,oBAACE,MAAI;AAAA,UAACL,MAAK;AAAA,QAAA,CAAQ;AAAA,MACrD,CAAA,GAEXtB,QAAQ;AAAA,IAAA,CACI;AAAA,EAAA,CACV;AAEX;"}

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

@@ -0,0 +1,104 @@
+import { useState, useCallback } from "react";
+import ReactFlow, { useReactFlow, addEdge, applyNodeChanges, applyEdgeChanges } from "reactflow";
+import "reactflow/dist/style.css";
+import { useDroppable, useDndMonitor } from "@dnd-kit/core";
+import { uid } from "uid";
+import { useUniqueId } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./Flow.styles.js";
+import { staticClasses } from "./Flow.styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useFlowContext } from "./FlowContext/FlowContext.js";
+const HvDroppableFlow = ({
+  id,
+  className,
+  children,
+  onFlowChange,
+  classes: classesProp,
+  nodes: initialNodes = [],
+  edges: initialEdges = [],
+  onConnect: onConnectProp,
+  onNodesChange: onNodesChangeProp,
+  onEdgesChange: onEdgesChangeProp,
+  ...others
+}) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  const elementId = useUniqueId(id, "hvFlow");
+  const reactFlowInstance = useReactFlow();
+  const {
+    nodeTypes
+  } = useFlowContext();
+  const [nodes, setNodes] = useState(initialNodes);
+  const [edges, setEdges] = useState(initialEdges);
+  const {
+    setNodeRef
+  } = useDroppable({
+    id: elementId
+  });
+  const handleDragEnd = useCallback((event) => {
+    var _a, _b, _c, _d;
+    if (event.over && event.over.id === elementId) {
+      const type = event.active.id.toString();
+      const position = reactFlowInstance.project({
+        x: (((_b = (_a = event.active.data.current) == null ? void 0 : _a.hvFlow) == null ? void 0 : _b.x) || 0) - event.over.rect.left,
+        y: (((_d = (_c = event.active.data.current) == null ? void 0 : _c.hvFlow) == null ? void 0 : _d.y) || 0) - event.over.rect.top
+      });
+      const newNode = {
+        id: uid(),
+        position,
+        data: {},
+        type
+      };
+      setNodes((nds) => nds.concat(newNode));
+    }
+  }, [elementId, reactFlowInstance, setNodes]);
+  useDndMonitor({
+    onDragEnd: handleDragEnd
+  });
+  const handleFlowChange = useCallback((nds, eds) => {
+    const isDragging = nds.find((node) => node.dragging);
+    if (!isDragging) {
+      onFlowChange == null ? void 0 : onFlowChange(nds, eds);
+    }
+  }, [onFlowChange]);
+  const handleConnect = useCallback((connection) => {
+    const eds = addEdge(connection, edges);
+    setEdges(eds);
+    handleFlowChange(nodes, eds);
+    onConnectProp == null ? void 0 : onConnectProp(connection);
+  }, [edges, handleFlowChange, nodes, onConnectProp]);
+  const handleNodesChange = useCallback((changes) => {
+    const nds = applyNodeChanges(changes, nodes);
+    setNodes(nds);
+    handleFlowChange(nds, edges);
+    onNodesChangeProp == null ? void 0 : onNodesChangeProp(changes);
+  }, [edges, handleFlowChange, nodes, onNodesChangeProp]);
+  const handleEdgesChange = useCallback((changes) => {
+    const eds = applyEdgeChanges(changes, edges);
+    setEdges(eds);
+    handleFlowChange(nodes, eds);
+    onEdgesChangeProp == null ? void 0 : onEdgesChangeProp(changes);
+  }, [edges, handleFlowChange, nodes, onEdgesChangeProp]);
+  return /* @__PURE__ */ jsx("div", {
+    id: elementId,
+    ref: setNodeRef,
+    className: cx(classes.root, className),
+    children: /* @__PURE__ */ jsx(ReactFlow, {
+      nodes,
+      edges,
+      nodeTypes,
+      onNodesChange: handleNodesChange,
+      onEdgesChange: handleEdgesChange,
+      onConnect: handleConnect,
+      ...others,
+      children
+    })
+  });
+};
+export {
+  HvDroppableFlow,
+  staticClasses as flowClasses
+};
+//# sourceMappingURL=DroppableFlow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DroppableFlow.js","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n} from \"reactflow\";\nimport \"reactflow/dist/style.css\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowEdge, HvFlowNode } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./FlowContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeData = any,\n  NodeType extends string | undefined = string | undefined\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: HvFlowNode<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: HvFlowEdge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Function called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (\n    nodes: HvFlowNode<NodeData, NodeType>[],\n    edges: HvFlowEdge[]\n  ) => void;\n}\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvFlow\");\n\n  const reactFlowInstance = useReactFlow();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over && event.over.id === elementId) {\n        const type = event.active.id.toString();\n\n        // Converts the coordinates to the react flow coordinate system\n        const position = reactFlowInstance.project({\n          x: (event.active.data.current?.hvFlow?.x || 0) - event.over.rect.left,\n          y: (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n        });\n\n        const newNode: HvFlowNode = {\n          id: uid(),\n          position,\n          data: {},\n          type,\n        };\n\n        setNodes((nds) => nds.concat(newNode));\n      }\n    },\n    [elementId, reactFlowInstance, setNodes]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\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, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  return (\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        {...others}\n      >\n        {children}\n      </ReactFlow>\n    </div>\n  );\n};\n"],"names":["HvDroppableFlow","id","className","children","onFlowChange","classes","classesProp","nodes","initialNodes","edges","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","type","active","toString","position","project","x","data","current","hvFlow","rect","left","y","top","newNode","uid","nds","concat","onDragEnd","handleFlowChange","eds","isDragging","find","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","ref","root","ReactFlow"],"mappings":"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"}