@hitachivantara/uikit-react-lab 5.18.10 → 5.19.1

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

@@ -1,21 +1,12 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvFlowSidebar", {
-  drawerPaper: {
-    width: "360px"
-  },
+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
-  },
+  contentContainer: { padding: theme.spacing(0, "lg", "sm", "lg") },
+  description: { color: theme.colors.secondary_60 },
   searchRoot: {
     paddingTop: theme.space.sm,
     paddingBottom: theme.space.sm

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

@@ -1 +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  nodeType: {\n    marginBottom: theme.space.xs,\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","nodeType","marginBottom","xs"],"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;AAAA,EACAC,UAAU;AAAA,IACRC,cAAcjB,MAAMS,MAAMS;AAAAA,EAC5B;AACF,CAAC;"}
+{"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  nodeType: {\n    marginBottom: theme.space.xs,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,aAAa,EAAE,OAAO,QAAQ;AAAA,EAC9B,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACA,kBAAkB,EAAE,SAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,IAAI,EAAE;AAAA,EAChE,aAAa,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EAChD,YAAY;AAAA,IACV,YAAY,MAAM,MAAM;AAAA,IACxB,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,eAAe;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,EAC5B;AACF,CAAC;"}

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

@@ -18,31 +18,43 @@ const HvFlowSidebarGroup = ({
   classes: classesProp,
   itemProps
 }) => {
-  const {
-    classes,
-    cx,
-    css
-  } = useClasses(classesProp);
-  const {
-    expandedNodeGroups,
-    setExpandedNodeGroups
-  } = useFlowContext();
-  const opened = useMemo(() => !!expandedNodeGroups?.find((groupId) => groupId === id), [expandedNodeGroups, id]);
+  const { classes, cx, css } = useClasses(classesProp);
+  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();
+  const opened = useMemo(
+    () => !!expandedNodeGroups?.find((groupId) => groupId === id),
+    [expandedNodeGroups, id]
+  );
   const handleClick = useCallback(() => {
-    setExpandedNodeGroups?.((prev) => opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]);
+    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: [
+  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, { component: "p", 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" }) })
+      /* @__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.type)) })
+    opened && /* @__PURE__ */ jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsx(
+      HvFlowDraggableSidebarGroupItem,
+      {
+        ...itemProps,
+        ...obj
+      },
+      obj.type
+    )) })
   ] });
 };
 export {

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

@@ -1 +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 \"../../hooks\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNode = {\n  type: string;\n  label: string;\n  data?: unknown;\n};\n\nexport type HvFlowSidebarGroupNodes = HvFlowSidebarGroupNode[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\n  /** Group nodes. */\n  nodes: HvFlowSidebarGroupNodes;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupClasses;\n  /** Expand button props. */\n  expandButtonProps?: HvButtonProps;\n  /** Item group props. */\n  itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n  id,\n  label,\n  nodes,\n  color,\n  description,\n  icon,\n  expandButtonProps,\n  classes: classesProp,\n  itemProps,\n}: HvFlowSidebarGroupProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n  const opened = useMemo(\n    () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n    [expandedNodeGroups, id]\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]\n    );\n  }, [id, opened, setExpandedNodeGroups]);\n\n  return (\n    <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n      <div className={classes.titleContainer}>\n        <div className={classes.labelContainer}>\n          <div className={classes.icon} role=\"none\">\n            {icon}\n          </div>\n          <HvTypography component=\"p\" variant=\"title4\">\n            {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\n        </HvButton>\n      </div>\n      {description && (\n        <div className={classes.descriptionContainer}>\n          <HvTypography>{description}</HvTypography>\n        </div>\n      )}\n      {opened && (\n        <div className={classes.itemsContainer}>\n          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.type}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":["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","borderColor","getColor","root","titleContainer","labelContainer","length","descriptionContainer","itemsContainer","map","obj","type"],"mappings":";;;;;;;;;AA4CO,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,CAACJ,oBAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,EAAE,GAC5D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,YAAY,MAAM;AACpCP,4BAAyBQ,CACvBN,SAAAA,SAASM,KAAKC,OAAQJ,CAAYnB,YAAAA,OAAOmB,OAAO,IAAI,CAAC,GAAGG,MAAMtB,EAAE,CAClE;AAAA,EACC,GAAA,CAACA,IAAIgB,QAAQF,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAWJ,GAAGC,IAAI;AAAA,IAAEa,aAAaC,SAAStB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQmB,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWnB,QAAQoB,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAWpB,QAAQqB,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAWrB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,WAAU,KAAI,SAAQ,UACjCH,UAAAA,MAAM2B,SAAS,IAAK,GAAE5B,KAAM,KAAIC,MAAM2B,MAAO,MAAK5B,OACrD;AAAA,MAAA,GACF;AAAA,MACA,oBAAC,YACC,MAAI,MACJ,SAASmB,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAU,oBAAA,IAAA,EAAG,MAAK,QAAM,wBAAO,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACCZ,mCACE,OAAI,EAAA,WAAWG,QAAQuB,sBACtB,UAAA,oBAAC,cAAc1B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACE,oBAAA,OAAA,EAAI,WAAWT,QAAQwB,gBACrB7B,gBAAM8B,IAAKC,CAAAA,QACT,oBAAA,iCAAA,EAEKxB,GAAAA,WACAwB,GAAAA,OAFCA,IAAIC,IAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"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 \"../../hooks\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNode = {\n  type: string;\n  label: string;\n  data?: unknown;\n};\n\nexport type HvFlowSidebarGroupNodes = HvFlowSidebarGroupNode[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\n  /** Group nodes. */\n  nodes: HvFlowSidebarGroupNodes;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupClasses;\n  /** Expand button props. */\n  expandButtonProps?: HvButtonProps;\n  /** Item group props. */\n  itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n  id,\n  label,\n  nodes,\n  color,\n  description,\n  icon,\n  expandButtonProps,\n  classes: classesProp,\n  itemProps,\n}: HvFlowSidebarGroupProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n  const opened = useMemo(\n    () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n    [expandedNodeGroups, id]\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]\n    );\n  }, [id, opened, setExpandedNodeGroups]);\n\n  return (\n    <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n      <div className={classes.titleContainer}>\n        <div className={classes.labelContainer}>\n          <div className={classes.icon} role=\"none\">\n            {icon}\n          </div>\n          <HvTypography component=\"p\" variant=\"title4\">\n            {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\n        </HvButton>\n      </div>\n      {description && (\n        <div className={classes.descriptionContainer}>\n          <HvTypography>{description}</HvTypography>\n        </div>\n      )}\n      {opened && (\n        <div className={classes.itemsContainer}>\n          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.type}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA4CO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,MAA+B;AAC7B,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,oBAAoB,sBAAsB,IAAI,eAAe;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,CAAC,CAAC,oBAAoB,KAAK,CAAC,YAAY,YAAY,EAAE;AAAA,IAC5D,CAAC,oBAAoB,EAAE;AAAA,EAAA;AAGnB,QAAA,cAAc,YAAY,MAAM;AACpC;AAAA,MAAwB,CAAC,SACvB,SAAS,KAAK,OAAO,CAAC,YAAY,OAAO,OAAO,IAAI,CAAC,GAAG,MAAM,EAAE;AAAA,IAAA;AAAA,EAEjE,GAAA,CAAC,IAAI,QAAQ,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAW,GAAG,IAAI,EAAE,aAAa,SAAS,KAAK,EAAE,CAAC,GAAG,QAAQ,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAW,QAAQ,MAAM,MAAK,QAChC,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,WAAU,KAAI,SAAQ,UACjC,UAAA,MAAM,SAAS,IAAI,GAAG,KAAK,KAAK,MAAM,MAAM,MAAM,OACrD;AAAA,MAAA,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS;AAAA,UACT,iBAAe;AAAA,UACd,GAAG;AAAA,UAEH,UAAA,6BAAU,IAAG,EAAA,MAAK,QAAO,IAAK,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MACnD;AAAA,IAAA,GACF;AAAA,IACC,mCACE,OAAI,EAAA,WAAW,QAAQ,sBACtB,UAAA,oBAAC,cAAc,EAAA,UAAA,YAAA,CAAY,EAC7B,CAAA;AAAA,IAED,8BACE,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA,MAAM,IAAI,CAAC,QACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEE,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,MAFC,IAAI;AAAA,IAIZ,CAAA,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

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

@@ -1,35 +1,33 @@
 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
+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

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

@@ -1 +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;"}
+{"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":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS,MAAM,MAAM;AAAA,MACrB,cAAc,MAAM,MAAM;AAAA,MAC1B,aAAa;AAAA,MACb,gBAAgB;AAAA,IAClB;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,gBAAgB;AAAA,IAClB;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IACA,MAAM,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,IACrC,sBAAsB;AAAA,MACpB,SAAS,GAAG,MAAM,MAAM,EAAE,MAAM,MAAM,MAAM,EAAE,gBAAgB,MAAM,MAAM,EAAE;AAAA,IAC9E;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,MAAM,MAAM;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AACF;"}

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

@@ -13,13 +13,7 @@ const HvFlowDraggableSidebarGroupItem = ({
 }) => {
   const itemRef = useRef(null);
   const elementId = useUniqueId(id, `hvFlowDraggableItem-${type}`);
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    isDragging,
-    transform
-  } = useDraggable({
+  const { attributes, listeners, setNodeRef, isDragging, transform } = useDraggable({
     id: elementId,
     data: {
       hvFlow: {
@@ -39,7 +33,18 @@ const HvFlowDraggableSidebarGroupItem = ({
   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 });
+  return /* @__PURE__ */ jsx(
+    HvFlowSidebarGroupItem,
+    {
+      ref: forkedRef,
+      style,
+      label,
+      isDragging,
+      ...listeners,
+      ...attributes,
+      ...others
+    }
+  );
 };
 export {
   HvFlowDraggableSidebarGroupItem

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

@@ -1 +1 @@
-{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\n\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps {\n  /** Item type. */\n  type: string;\n  /** Item data. */\n  data?: unknown;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  id,\n  label,\n  type,\n  data,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n\n  const elementId = useUniqueId(id, `hvFlowDraggableItem-${type}`);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id: elementId,\n      data: {\n        hvFlow: {\n          // Needed to know which item is being dragged and dropped\n          type,\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          // Data\n          data,\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","id","label","type","data","others","itemRef","useRef","elementId","useUniqueId","attributes","listeners","setNodeRef","isDragging","transform","useDraggable","hvFlow","x","current","getBoundingClientRect","y","forkedRef","useForkRef","style","undefined"],"mappings":";;;;;;AAqBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;AACpCC,QAAAA,UAAUC,OAAoB,IAAI;AAExC,QAAMC,YAAYC,YAAYR,IAAK,uBAAsBE,IAAK,EAAC;AAEzD,QAAA;AAAA,IAAEO;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,aAAa;AAAA,IACXd,IAAIO;AAAAA,IACJJ,MAAM;AAAA,MACJY,QAAQ;AAAA;AAAA,QAENb;AAAAA;AAAAA,QAEAD;AAAAA;AAAAA,QAEAe,GAAGX,QAAQY,SAASC,sBAAwBF,EAAAA;AAAAA,QAC5CG,GAAGd,QAAQY,SAASC,sBAAwBC,EAAAA;AAAAA;AAAAA,QAE5ChB;AAAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEGiB,QAAAA,YAAYC,WAAWhB,SAASM,UAAU;AAEhD,QAAMW,QAAQT,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUG,CAAE,OAAMH,UAAUM,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,SACG,oBAAA,wBAAA,EACC,KAAKH,WACL,OACA,OACA,YACIV,GAAAA,cACAD,YACAL,GAAAA,OACJ,CAAA;AAEN;"}
+{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\n\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps {\n  /** Item type. */\n  type: string;\n  /** Item data. */\n  data?: unknown;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  id,\n  label,\n  type,\n  data,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n\n  const elementId = useUniqueId(id, `hvFlowDraggableItem-${type}`);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id: elementId,\n      data: {\n        hvFlow: {\n          // Needed to know which item is being dragged and dropped\n          type,\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          // Data\n          data,\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":[],"mappings":";;;;;;AAqBO,MAAM,kCAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAU,OAAoB,IAAI;AAExC,QAAM,YAAY,YAAY,IAAI,uBAAuB,IAAI,EAAE;AAE/D,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrD,aAAa;AAAA,IACX,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEG,QAAA,YAAY,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,EAEzD,IAAA;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -4,24 +4,33 @@ 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";
-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" })
-  ] });
-});
+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

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

@@ -1 +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"],"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,8BACG,OACC,EAAA,KACA,WAAWI,GACTL,QAAQO,MACR;AAAA,IAAE,CAACP,QAAQQ,QAAQ,GAAGT;AAAAA,EACtBG,GAAAA,SACF,GACA,GAAIC,QAEJ,UAAA;AAAA,IAAA,oBAAC,gBAAcL,UAAM,MAAA,CAAA;AAAA,IACrB,oBAAC,MAAK,EAAA,MAAK,OAAM,CAAA;AAAA,EACnB,EAAA,CAAA;AAEJ,CACF;"}
+{"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":[],"mappings":";;;;;;AAwBO,MAAM,yBAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,UACjC;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,gBAAc,UAAM,MAAA,CAAA;AAAA,UACrB,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxB;AACF;"}

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

@@ -1,24 +1,22 @@
 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
+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

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroupItem.styles.js","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,cAC3C,0BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,QAAS,aAAYC,MAAMC,OAAOC,KAAM;AAAA,IACxCC,SAASH,MAAMI,QAAQ,GAAG,GAAG,GAAG,IAAI;AAAA,IACpCC,QAAQ;AAAA,IACRC,WAAY,WAAUN,MAAMC,OAAOM,KAAM;AAAA,IAEzC,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IAAEC,aAAaV,MAAMC,OAAOU;AAAAA,EAAW;AACnD,CACF;"}
+{"version":3,"file":"SidebarGroupItem.styles.js","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":[],"mappings":";AAMa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,MACvC,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,IAAI;AAAA,MACpC,QAAQ;AAAA,MACR,WAAW,WAAW,MAAM,OAAO,KAAK;AAAA,MAExC,mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,UAAU,EAAE,aAAa,MAAM,OAAO,WAAW;AAAA,EACnD;AACF;"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/components/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport {\n  HvFlowSidebarGroupNodes,\n  HvFlowSidebarGroupNode,\n} from \"./SidebarGroup\";\n\ntype NodeGroup = HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n\nexport const buildGroups = (\n  nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n  nodeTypes: HvFlowContextValue[\"nodeTypes\"],\n  defaultGroupProps?: HvFlowNodeGroup\n) => {\n  if (!nodeGroups) return {};\n\n  return Object.entries(nodeGroups).reduce((acc, curr) => {\n    const nodesWithGroupId: HvFlowSidebarGroupNode[] = [];\n    const nodesWithoutGroupId: HvFlowSidebarGroupNode[] = [];\n\n    if (nodeTypes) {\n      for (const [nodeType, node] of Object.entries(nodeTypes)) {\n        if (node.meta?.groupId === curr[0]) {\n          nodesWithGroupId.push({\n            type: nodeType,\n            label: node.meta?.label,\n            data: node.meta?.data,\n          });\n        } else if (!node.meta?.groupId) {\n          nodesWithoutGroupId.push({\n            type: nodeType,\n            label: node.meta?.label || \"\",\n            data: node.meta?.data,\n          });\n        }\n      }\n    }\n\n    acc[curr[0]] = {\n      ...curr[1],\n      nodes: nodesWithGroupId,\n    };\n\n    // Create a \"Default\" group for nodes without a groupId\n    if (nodesWithoutGroupId.length > 0) {\n      acc.Default = {\n        // @ts-ignore\n        name: \"Default\",\n        label: \"Default\",\n        nodes: nodesWithoutGroupId,\n        ...defaultGroupProps,\n      };\n    }\n\n    return acc;\n  }, {} as Record<string, NodeGroup>);\n};\n"],"names":["buildGroups","nodeGroups","nodeTypes","defaultGroupProps","Object","entries","reduce","acc","curr","nodesWithGroupId","nodesWithoutGroupId","nodeType","node","meta","groupId","push","type","label","data","nodes","length","Default","name"],"mappings":"AASO,MAAMA,cAAcA,CACzBC,YACAC,WACAC,sBACG;AACH,MAAI,CAACF;AAAY,WAAO;AAExB,SAAOG,OAAOC,QAAQJ,UAAU,EAAEK,OAAO,CAACC,KAAKC,SAAS;AACtD,UAAMC,mBAA6C,CAAA;AACnD,UAAMC,sBAAgD,CAAA;AAEtD,QAAIR,WAAW;AACb,iBAAW,CAACS,UAAUC,IAAI,KAAKR,OAAOC,QAAQH,SAAS,GAAG;AACxD,YAAIU,KAAKC,MAAMC,YAAYN,KAAK,CAAC,GAAG;AAClCC,2BAAiBM,KAAK;AAAA,YACpBC,MAAML;AAAAA,YACNM,OAAOL,KAAKC,MAAMI;AAAAA,YAClBC,MAAMN,KAAKC,MAAMK;AAAAA,UAAAA,CAClB;AAAA,QACQ,WAAA,CAACN,KAAKC,MAAMC,SAAS;AAC9BJ,8BAAoBK,KAAK;AAAA,YACvBC,MAAML;AAAAA,YACNM,OAAOL,KAAKC,MAAMI,SAAS;AAAA,YAC3BC,MAAMN,KAAKC,MAAMK;AAAAA,UAAAA,CAClB;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEIV,QAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,MACb,GAAGA,KAAK,CAAC;AAAA,MACTW,OAAOV;AAAAA,IAAAA;AAILC,QAAAA,oBAAoBU,SAAS,GAAG;AAClCb,UAAIc,UAAU;AAAA;AAAA,QAEZC,MAAM;AAAA,QACNL,OAAO;AAAA,QACPE,OAAOT;AAAAA,QACP,GAAGP;AAAAA,MAAAA;AAAAA,IAEP;AAEOI,WAAAA;AAAAA,EACT,GAAG,CAAgC,CAAA;AACrC;"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport {\n  HvFlowSidebarGroupNodes,\n  HvFlowSidebarGroupNode,\n} from \"./SidebarGroup\";\n\ntype NodeGroup = HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n\nexport const buildGroups = (\n  nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n  nodeTypes: HvFlowContextValue[\"nodeTypes\"],\n  defaultGroupProps?: HvFlowNodeGroup\n) => {\n  if (!nodeGroups) return {};\n\n  return Object.entries(nodeGroups).reduce((acc, curr) => {\n    const nodesWithGroupId: HvFlowSidebarGroupNode[] = [];\n    const nodesWithoutGroupId: HvFlowSidebarGroupNode[] = [];\n\n    if (nodeTypes) {\n      for (const [nodeType, node] of Object.entries(nodeTypes)) {\n        if (node.meta?.groupId === curr[0]) {\n          nodesWithGroupId.push({\n            type: nodeType,\n            label: node.meta?.label,\n            data: node.meta?.data,\n          });\n        } else if (!node.meta?.groupId) {\n          nodesWithoutGroupId.push({\n            type: nodeType,\n            label: node.meta?.label || \"\",\n            data: node.meta?.data,\n          });\n        }\n      }\n    }\n\n    acc[curr[0]] = {\n      ...curr[1],\n      nodes: nodesWithGroupId,\n    };\n\n    // Create a \"Default\" group for nodes without a groupId\n    if (nodesWithoutGroupId.length > 0) {\n      acc.Default = {\n        // @ts-ignore\n        name: \"Default\",\n        label: \"Default\",\n        nodes: nodesWithoutGroupId,\n        ...defaultGroupProps,\n      };\n    }\n\n    return acc;\n  }, {} as Record<string, NodeGroup>);\n};\n"],"names":[],"mappings":"AASO,MAAM,cAAc,CACzB,YACA,WACA,sBACG;AACH,MAAI,CAAC;AAAY,WAAO;AAExB,SAAO,OAAO,QAAQ,UAAU,EAAE,OAAO,CAAC,KAAK,SAAS;AACtD,UAAM,mBAA6C,CAAA;AACnD,UAAM,sBAAgD,CAAA;AAEtD,QAAI,WAAW;AACb,iBAAW,CAAC,UAAU,IAAI,KAAK,OAAO,QAAQ,SAAS,GAAG;AACxD,YAAI,KAAK,MAAM,YAAY,KAAK,CAAC,GAAG;AAClC,2BAAiB,KAAK;AAAA,YACpB,MAAM;AAAA,YACN,OAAO,KAAK,MAAM;AAAA,YAClB,MAAM,KAAK,MAAM;AAAA,UAAA,CAClB;AAAA,QACQ,WAAA,CAAC,KAAK,MAAM,SAAS;AAC9B,8BAAoB,KAAK;AAAA,YACvB,MAAM;AAAA,YACN,OAAO,KAAK,MAAM,SAAS;AAAA,YAC3B,MAAM,KAAK,MAAM;AAAA,UAAA,CAClB;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEI,QAAA,KAAK,CAAC,CAAC,IAAI;AAAA,MACb,GAAG,KAAK,CAAC;AAAA,MACT,OAAO;AAAA,IAAA;AAIL,QAAA,oBAAoB,SAAS,GAAG;AAClC,UAAI,UAAU;AAAA;AAAA,QAEZ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAEP;AAEO,WAAA;AAAA,EACT,GAAG,CAA+B,CAAA;AACpC;"}