@hitachivantara/uikit-react-lab 5.19.0 → 5.19.1

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

@@ -1,8 +1,5 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvFlowBaseNode", {
+const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
   root: {
     borderRadius: theme.radii.round,
     backgroundColor: theme.colors.atmo1,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.styles.js","sources":["../../../../../src/components/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    borderTopLeftRadius: \"inherit\",\n    borderTopRightRadius: \"inherit\",\n  },\n  titleContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  title: {\n    color: theme.colors.base_dark,\n  },\n  inputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  outputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  contentContainer: {},\n  inputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","theme","radii","round","backgroundColor","colors","atmo1","boxShadow","shadow","minWidth","headerContainer","padding","spacing","display","flexDirection","justifyContent","alignItems","borderTopLeftRadius","borderTopRightRadius","titleContainer","title","color","base_dark","inputsTitleContainer","space","xs","atmo2","borderTop","atmo4","borderBottom","outputsTitleContainer","contentContainer","inputsContainer","sm","gap","outputsContainer","inputContainer","outputContainer","mandatory","width","height","margin","circle","negative_20"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJC,cAAcC,MAAMC,MAAMC;AAAAA,IAC1BC,iBAAiBH,MAAMI,OAAOC;AAAAA,IAC9BC,WAAWN,MAAMI,OAAOG;AAAAA,IACxBC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,SAASV,MAAMW,QAAQ,KAAK,CAAC;AAAA,IAC7BC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,qBAAqB;AAAA,IACrBC,sBAAsB;AAAA,EACxB;AAAA,EACAC,gBAAgB;AAAA,IACdN,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAI,OAAO;AAAA,IACLC,OAAOpB,MAAMI,OAAOiB;AAAAA,EACtB;AAAA,EACAC,sBAAsB;AAAA,IACpBV,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMuB,MAAMC;AAAAA,IACrBrB,iBAAiBH,MAAMI,OAAOqB;AAAAA,IAC9BC,WAAY,aAAY1B,MAAMI,OAAOuB,KAAM;AAAA,IAC3CC,cAAe,aAAY5B,MAAMI,OAAOuB,KAAM;AAAA,EAChD;AAAA,EACAE,uBAAuB;AAAA,IACrBjB,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBJ,SAASV,MAAMuB,MAAMC;AAAAA,IACrBrB,iBAAiBH,MAAMI,OAAOqB;AAAAA,IAC9BC,WAAY,aAAY1B,MAAMI,OAAOuB,KAAM;AAAA,IAC3CC,cAAe,aAAY5B,MAAMI,OAAOuB,KAAM;AAAA,EAChD;AAAA,EACAG,kBAAkB,CAAC;AAAA,EACnBC,iBAAiB;AAAA,IACfnB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMuB,MAAMS;AAAAA,IACrBC,KAAKjC,MAAMuB,MAAMC;AAAAA,IACjBT,YAAY;AAAA,EACd;AAAA,EACAmB,kBAAkB;AAAA,IAChBtB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfH,SAASV,MAAMuB,MAAMS;AAAAA,IACrBC,KAAKjC,MAAMuB,MAAMC;AAAAA,IACjBT,YAAY;AAAA,EACd;AAAA,EACAoB,gBAAgB;AAAA,IACdvB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAqB,iBAAiB;AAAA,IACfxB,SAAS;AAAA,IACTC,eAAe;AAAA,IACfE,YAAY;AAAA,EACd;AAAA,EACAsB,WAAW;AAAA,IACTC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,QAAQxC,MAAMW,QAAQ,GAAGX,MAAMuB,MAAMC,EAAE;AAAA,IACvCzB,cAAcC,MAAMC,MAAMwC;AAAAA,IAC1BtC,iBAAiBH,MAAMI,OAAOsC;AAAAA,EAChC;AACF,CAAC;"}
+{"version":3,"file":"BaseNode.styles.js","sources":["../../../../../src/components/Flow/Node/BaseNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowBaseNode\", {\n  root: {\n    borderRadius: theme.radii.round,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    minWidth: \"250px\",\n  },\n  headerContainer: {\n    padding: theme.spacing(0.5, 1),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    borderTopLeftRadius: \"inherit\",\n    borderTopRightRadius: \"inherit\",\n  },\n  titleContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  title: {\n    color: theme.colors.base_dark,\n  },\n  inputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  outputsTitleContainer: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.space.xs,\n    backgroundColor: theme.colors.atmo2,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  contentContainer: {},\n  inputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-start\",\n  },\n  outputsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n    gap: theme.space.xs,\n    alignItems: \"flex-end\",\n  },\n  inputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  outputContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  mandatory: {\n    width: 10,\n    height: 10,\n    margin: theme.spacing(0, theme.space.xs),\n    borderRadius: theme.radii.circle,\n    backgroundColor: theme.colors.negative_20,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,MAAM,OAAO;AAAA,IACxB,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS,MAAM,QAAQ,KAAK,CAAC;AAAA,IAC7B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,sBAAsB;AAAA,IACpB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IACrB,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,EACd;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IACrB,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,EACd;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,MAAM,QAAQ,GAAG,MAAM,MAAM,EAAE;AAAA,IACvC,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AACF,CAAC;"}

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

@@ -27,16 +27,10 @@ const HvFlowNode = ({
   expandParamsButtonProps,
   ...props
 }) => {
-  const {
-    classes
-  } = useClasses(classesProp);
+  const { classes } = useClasses(classesProp);
   const [showParams, setShowParams] = useState(expanded);
   const node = useFlowNode(id);
-  const {
-    nodeGroups,
-    nodeTypes,
-    defaultActions
-  } = useFlowContext();
+  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();
   const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;
   const groupId = nodeTypes?.[type].meta?.groupId;
   const group = groupId && nodeGroups && nodeGroups[groupId] || void 0;
@@ -46,28 +40,69 @@ const HvFlowNode = ({
   const actsVisible = actions?.slice(0, maxVisibleActions);
   const actsDropdown = actions?.slice(maxVisibleActions);
   const hasParams = !!(params && params.length > 0);
-  return /* @__PURE__ */ jsxs(HvFlowBaseNode, { id, type, title: groupLabel, icon, color, inputs, outputs, nodeActions: defaultActions, classes: classesProp, headerItems: /* @__PURE__ */ jsxs(Fragment, { children: [
-    headerItems,
-    description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Info, { color: "base_dark" }) }) }),
-    hasParams && /* @__PURE__ */ jsx(HvButton, { icon: true, overrideIconColors: false, onClick: () => setShowParams((p) => !p), "aria-label": showParams ? "Collapse" : "Expand", ...expandParamsButtonProps, children: showParams ? /* @__PURE__ */ jsx(Up, { role: "none", color: "base_dark" }) : /* @__PURE__ */ jsx(Down, { role: "none", color: "base_dark" }) })
-  ] }), ...props, children: [
-    (subtitle || actsVisible?.length || actsDropdown?.length) && /* @__PURE__ */ jsxs("div", { className: classes.subtitleContainer, children: [
-      subtitle && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { children: subtitle }) }),
-      /* @__PURE__ */ jsx("div", { className: classes.actions, children: actions?.length && actions?.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        actsVisible?.map((action) => /* @__PURE__ */ jsx(HvTooltip, { title: action.label, children: /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: (event) => {
-          actionCallback?.(event, id, action);
-        }, "aria-label": action.label, children: renderedIcon(action.icon) }) }, action.id)),
-        actsDropdown && actsDropdown.length > 0 && /* @__PURE__ */ jsx(HvDropDownMenu, { keepOpened: false, dataList: actsDropdown?.map((action) => ({
-          id: action.id,
-          label: action.label
-        })), onClick: (event, action) => {
-          actionCallback?.(event, id, action);
-        } })
-      ] }) })
-    ] }),
-    children,
-    showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { nodeId: id, params, data: node?.data }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    HvFlowBaseNode,
+    {
+      id,
+      type,
+      title: groupLabel,
+      icon,
+      color,
+      inputs,
+      outputs,
+      nodeActions: defaultActions,
+      classes: classesProp,
+      headerItems: /* @__PURE__ */ jsxs(Fragment, { children: [
+        headerItems,
+        description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Info, { color: "base_dark" }) }) }),
+        hasParams && /* @__PURE__ */ jsx(
+          HvButton,
+          {
+            icon: true,
+            overrideIconColors: false,
+            onClick: () => setShowParams((p) => !p),
+            "aria-label": showParams ? "Collapse" : "Expand",
+            ...expandParamsButtonProps,
+            children: showParams ? /* @__PURE__ */ jsx(Up, { role: "none", color: "base_dark" }) : /* @__PURE__ */ jsx(Down, { role: "none", color: "base_dark" })
+          }
+        )
+      ] }),
+      ...props,
+      children: [
+        (subtitle || actsVisible?.length || actsDropdown?.length) && /* @__PURE__ */ jsxs("div", { className: classes.subtitleContainer, children: [
+          subtitle && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { children: subtitle }) }),
+          /* @__PURE__ */ jsx("div", { className: classes.actions, children: actions?.length && actions?.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            actsVisible?.map((action) => /* @__PURE__ */ jsx(HvTooltip, { title: action.label, children: /* @__PURE__ */ jsx(
+              HvButton,
+              {
+                icon: true,
+                onClick: (event) => {
+                  actionCallback?.(event, id, action);
+                },
+                "aria-label": action.label,
+                children: renderedIcon(action.icon)
+              }
+            ) }, action.id)),
+            actsDropdown && actsDropdown.length > 0 && /* @__PURE__ */ jsx(
+              HvDropDownMenu,
+              {
+                keepOpened: false,
+                dataList: actsDropdown?.map((action) => ({
+                  id: action.id,
+                  label: action.label
+                })),
+                onClick: (event, action) => {
+                  actionCallback?.(event, id, action);
+                }
+              }
+            )
+          ] }) })
+        ] }),
+        children,
+        showParams && params && /* @__PURE__ */ jsx("div", { className: classes.paramsContainer, children: /* @__PURE__ */ jsx(ParamRenderer, { nodeId: id, params, data: node?.data }) })
+      ]
+    }
+  );
 };
 export {
   HvFlowNode,

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

@@ -1 +1 @@
-{"version":3,"file":"Node.js","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import React, { isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport {\n  HvFlowBaseNode,\n  HvFlowBaseNodeProps,\n  HvFlowBaseNodeClasses,\n} from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport interface HvFlowNodeClasses\n  extends ExtractNames<typeof useClasses>,\n    HvFlowBaseNodeClasses {}\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n  /** Node description */\n  description?: string;\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** Node outputs. */\n  outputs?: HvFlowNodeOutput[];\n  /** Node inputs. */\n  inputs?: HvFlowNodeInput[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n}\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  outputs,\n  inputs,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  children,\n  expandParamsButtonProps,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n\n  const [showParams, setShowParams] = useState(expanded);\n\n  const node = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupId = nodeTypes?.[type].meta?.groupId;\n\n  const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n  const groupLabel = group?.label || nodeDefaults?.title;\n  const icon = group?.icon || nodeDefaults?.icon;\n  const color = group?.color || nodeDefaults?.color;\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      inputs={inputs}\n      outputs={outputs}\n      nodeActions={defaultActions}\n      classes={classesProp as HvFlowBaseNodeClasses}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={description}>\n              <div>\n                <Info color=\"base_dark\" />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={showParams ? \"Collapse\" : \"Expand\"}\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up role=\"none\" color=\"base_dark\" />\n              ) : (\n                <Down role=\"none\" color=\"base_dark\" />\n              )}\n            </HvButton>\n          )}\n        </>\n      }\n      {...props}\n    >\n      {(subtitle || actsVisible?.length || actsDropdown?.length) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\n          <div className={classes.actions}>\n            {actions?.length && actions?.length > 0 && (\n              <>\n                {actsVisible?.map((action) => (\n                  <HvTooltip key={action.id} title={action.label}>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\n                  </HvTooltip>\n                ))}\n\n                {actsDropdown && actsDropdown.length > 0 && (\n                  <HvDropDownMenu\n                    keepOpened={false}\n                    dataList={actsDropdown?.map((action) => ({\n                      id: action.id,\n                      label: action.label,\n                    }))}\n                    onClick={(event, action) => {\n                      actionCallback?.(event, id, action as HvActionGeneric);\n                    }}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":["renderedIcon","actionIcon","isValidElement","HvFlowNode","id","type","headerItems","description","actions","outputs","inputs","actionCallback","maxVisibleActions","expanded","params","nodeDefaults","classes","classesProp","children","expandParamsButtonProps","props","useClasses","showParams","setShowParams","useState","node","useFlowNode","nodeGroups","nodeTypes","defaultActions","useFlowContext","subtitle","meta","label","subTitle","groupId","group","undefined","groupLabel","title","icon","color","actsVisible","slice","actsDropdown","hasParams","length","p","subtitleContainer","map","action","event","paramsContainer","data"],"mappings":"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"}
+{"version":3,"file":"Node.js","sources":["../../../../../src/components/Flow/Node/Node.tsx"],"sourcesContent":["import React, { isValidElement, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvTooltip,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode } from \"../hooks\";\nimport { HvFlowNodeInput, HvFlowNodeOutput, HvFlowNodeParam } from \"../types\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport ParamRenderer from \"./Parameters/ParamRenderer\";\nimport {\n  HvFlowBaseNode,\n  HvFlowBaseNodeProps,\n  HvFlowBaseNodeClasses,\n} from \"./BaseNode\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport interface HvFlowNodeClasses\n  extends ExtractNames<typeof useClasses>,\n    HvFlowBaseNodeClasses {}\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n  /** Node description */\n  description?: string;\n  /** Node actions */\n  actions?: HvActionGeneric[]; // HvFlowNodeActions[];\n  /** Node action callback */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** Node maximum number of actions visible */\n  maxVisibleActions?: number;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** A set of node default values for when there are no groups to fetch this data from. */\n  nodeDefaults?: HvFlowNodeDefaults;\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** Node outputs. */\n  outputs?: HvFlowNodeOutput[];\n  /** Node inputs. */\n  inputs?: HvFlowNodeInput[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n}\n\nconst renderedIcon = (actionIcon: HvActionGeneric[\"icon\"]) =>\n  isValidElement(actionIcon) ? actionIcon : (actionIcon as Function)?.();\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  outputs,\n  inputs,\n  actionCallback,\n  maxVisibleActions = 1,\n  expanded = false,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  children,\n  expandParamsButtonProps,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp as HvFlowNodeClasses);\n\n  const [showParams, setShowParams] = useState(expanded);\n\n  const node = useFlowNode(id);\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n  const subtitle = nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;\n  const groupId = nodeTypes?.[type].meta?.groupId;\n\n  const group = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n  const groupLabel = group?.label || nodeDefaults?.title;\n  const icon = group?.icon || nodeDefaults?.icon;\n  const color = group?.color || nodeDefaults?.color;\n\n  const actsVisible = actions?.slice(0, maxVisibleActions);\n  const actsDropdown = actions?.slice(maxVisibleActions);\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={groupLabel}\n      icon={icon}\n      color={color}\n      inputs={inputs}\n      outputs={outputs}\n      nodeActions={defaultActions}\n      classes={classesProp as HvFlowBaseNodeClasses}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={description}>\n              <div>\n                <Info color=\"base_dark\" />\n              </div>\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={showParams ? \"Collapse\" : \"Expand\"}\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up role=\"none\" color=\"base_dark\" />\n              ) : (\n                <Down role=\"none\" color=\"base_dark\" />\n              )}\n            </HvButton>\n          )}\n        </>\n      }\n      {...props}\n    >\n      {(subtitle || actsVisible?.length || actsDropdown?.length) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle && (\n            <div>\n              <HvTypography>{subtitle}</HvTypography>\n            </div>\n          )}\n          <div className={classes.actions}>\n            {actions?.length && actions?.length > 0 && (\n              <>\n                {actsVisible?.map((action) => (\n                  <HvTooltip key={action.id} title={action.label}>\n                    <HvButton\n                      icon\n                      onClick={(event) => {\n                        actionCallback?.(event, id, action);\n                      }}\n                      aria-label={action.label}\n                    >\n                      {renderedIcon(action.icon)}\n                    </HvButton>\n                  </HvTooltip>\n                ))}\n\n                {actsDropdown && actsDropdown.length > 0 && (\n                  <HvDropDownMenu\n                    keepOpened={false}\n                    dataList={actsDropdown?.map((action) => ({\n                      id: action.id,\n                      label: action.label,\n                    }))}\n                    onClick={(event, action) => {\n                      actionCallback?.(event, id, action as HvActionGeneric);\n                    }}\n                  />\n                )}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer nodeId={id} params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,13 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvFlowNode", {
+const { staticClasses, useClasses } = createClasses("HvFlowNode", {
   subtitleContainer: {
     minHeight: 48,
-    padding: theme.spacing(theme.space.xs, theme.space.xs, theme.space.xs, theme.space.sm),
+    padding: theme.spacing(
+      theme.space.xs,
+      theme.space.xs,
+      theme.space.xs,
+      theme.space.sm
+    ),
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",

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

@@ -1 +1 @@
-{"version":3,"file":"Node.styles.js","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n  subtitleContainer: {\n    minHeight: 48,\n    padding: theme.spacing(\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.sm\n    ),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  paramsContainer: {\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    padding: theme.space.sm,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","subtitleContainer","minHeight","padding","theme","spacing","space","xs","sm","display","flexDirection","justifyContent","alignItems","actions","paramsContainer","borderTop","colors","atmo4","gap"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,mBAAmB;AAAA,IACjBC,WAAW;AAAA,IACXC,SAASC,MAAMC,QACbD,MAAME,MAAMC,IACZH,MAAME,MAAMC,IACZH,MAAME,MAAMC,IACZH,MAAME,MAAME,EACd;AAAA,IACAC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,SAAS;AAAA,IACPJ,SAAS;AAAA,IACTG,YAAY;AAAA,EACd;AAAA,EACAE,iBAAiB;AAAA,IACfC,WAAY,aAAYX,MAAMY,OAAOC,KAAM;AAAA,IAC3CR,SAAS;AAAA,IACTC,eAAe;AAAA,IACfQ,KAAKd,MAAME,MAAMC;AAAAA,IACjBJ,SAASC,MAAME,MAAME;AAAAA,EACvB;AACF,CAAC;"}
+{"version":3,"file":"Node.styles.js","sources":["../../../../../src/components/Flow/Node/Node.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowNode\", {\n  subtitleContainer: {\n    minHeight: 48,\n    padding: theme.spacing(\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.xs,\n      theme.space.sm\n    ),\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  paramsContainer: {\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.xs,\n    padding: theme.space.sm,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,mBAAmB;AAAA,IACjB,WAAW;AAAA,IACX,SAAS,MAAM;AAAA,MACb,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,IACd;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,iBAAiB;AAAA,IACf,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,SAAS,MAAM,MAAM;AAAA,EACvB;AACF,CAAC;"}

package/dist/esm/components/Flow/Node/Parameters/ParamRenderer.js

@@ -5,11 +5,7 @@ const renderers = {
   text: Text,
   select: Select
 };
-const ParamRenderer = ({
-  nodeId,
-  params,
-  data
-}) => {
+const ParamRenderer = ({ nodeId, params, data }) => {
   return /* @__PURE__ */ jsx(Fragment, { children: params.map((param, idx) => {
     const Renderer = renderers[param.type];
     if (!Renderer)

package/dist/esm/components/Flow/Node/Parameters/ParamRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParamRenderer.js","sources":["../../../../../../src/components/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Text from \"./Text\";\nimport Select from \"./Select\";\n\nexport type ParamRendererProps = {\n  nodeId: string;\n  params: HvFlowNodeParam[];\n  data: any;\n};\n\nconst renderers = {\n  text: Text,\n  select: Select,\n};\n\nconst ParamRenderer = ({ nodeId, params, data }: ParamRendererProps) => {\n  return (\n    <>\n      {params.map((param, idx) => {\n        const Renderer = renderers[param.type];\n        if (!Renderer) return null;\n\n        return <Renderer key={idx} nodeId={nodeId} param={param} data={data} />;\n        return null;\n      })}\n    </>\n  );\n};\n\nexport default ParamRenderer;\n"],"names":["renderers","text","Text","select","Select","ParamRenderer","nodeId","params","data","map","param","idx","Renderer","type"],"mappings":";;;AAUA,MAAMA,YAAY;AAAA,EAChBC,MAAMC;AAAAA,EACNC,QAAQC;AACV;AAEA,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAQC;AAAyB,MAAM;AACtE,SAEKD,oBAAAA,UAAAA,EAAAA,UAAAA,OAAOE,IAAI,CAACC,OAAOC,QAAQ;AACpBC,UAAAA,WAAWZ,UAAUU,MAAMG,IAAI;AACrC,QAAI,CAACD;AAAiB,aAAA;AAEtB,WAAQ,oBAAA,UAAA,EAAmB,QAAgB,OAAc,QAAnCD,GAAiD;AAAA,EAExE,CAAA,EACH,CAAA;AAEJ;AAEA,MAAA,kBAAeN;"}
+{"version":3,"file":"ParamRenderer.js","sources":["../../../../../../src/components/Flow/Node/Parameters/ParamRenderer.tsx"],"sourcesContent":["import { HvFlowNodeParam } from \"../../types\";\nimport Text from \"./Text\";\nimport Select from \"./Select\";\n\nexport type ParamRendererProps = {\n  nodeId: string;\n  params: HvFlowNodeParam[];\n  data: any;\n};\n\nconst renderers = {\n  text: Text,\n  select: Select,\n};\n\nconst ParamRenderer = ({ nodeId, params, data }: ParamRendererProps) => {\n  return (\n    <>\n      {params.map((param, idx) => {\n        const Renderer = renderers[param.type];\n        if (!Renderer) return null;\n\n        return <Renderer key={idx} nodeId={nodeId} param={param} data={data} />;\n        return null;\n      })}\n    </>\n  );\n};\n\nexport default ParamRenderer;\n"],"names":[],"mappings":";;;AAUA,MAAM,YAAY;AAAA,EAChB,MAAM;AAAA,EACN,QAAQ;AACV;AAEA,MAAM,gBAAgB,CAAC,EAAE,QAAQ,QAAQ,WAA+B;AACtE,SAEK,oBAAA,UAAA,EAAA,UAAA,OAAO,IAAI,CAAC,OAAO,QAAQ;AACpB,UAAA,WAAW,UAAU,MAAM,IAAI;AACrC,QAAI,CAAC;AAAiB,aAAA;AAEtB,WAAQ,oBAAA,UAAA,EAAmB,QAAgB,OAAc,QAAnC,GAA+C;AAAA,EAEtE,CAAA,EACH,CAAA;AAEJ;AAEA,MAAA,kBAAe;"}

package/dist/esm/components/Flow/Node/Parameters/Select.js

@@ -2,19 +2,12 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
 import { HvDropdown } from "@hitachivantara/uikit-react-core";
 import { useReactFlow } from "reactflow";
-const Select = ({
-  nodeId,
-  param,
-  data
-}) => {
-  const {
-    id,
-    label,
-    multiple = false,
-    options
-  } = param;
+const Select = ({ nodeId, param, data }) => {
+  const { id, label, multiple = false, options } = param;
   const reactFlowInstance = useReactFlow();
-  const [opts, setOpts] = useState(data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0);
+  const [opts, setOpts] = useState(
+    data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0
+  );
   const onSelectChange = (item) => {
     const nodes = reactFlowInstance.getNodes();
     const newOpts = Array.isArray(item) ? item.map((x) => x.label) : item?.label ?? void 0;
@@ -28,7 +21,9 @@ const Select = ({
       return node;
     });
     reactFlowInstance.setNodes(newNodes);
-    setOpts(newOpts ? Array.isArray(newOpts) ? newOpts : [newOpts] : void 0);
+    setOpts(
+      newOpts ? Array.isArray(newOpts) ? newOpts : [newOpts] : void 0
+    );
   };
   return /* @__PURE__ */ jsx(
     HvDropdown,
@@ -37,11 +32,7 @@ const Select = ({
       disablePortal: true,
       label,
       values: options?.map((o) => {
-        return {
-          id: o,
-          label: o,
-          selected: !!opts?.find((opt) => opt === o)
-        };
+        return { id: o, label: o, selected: !!opts?.find((opt) => opt === o) };
       }),
       onChange: onSelectChange,
       maxHeight: 100,

package/dist/esm/components/Flow/Node/Parameters/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../../src/components/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeSelectParam } from \"../../types\";\n\ninterface SelectProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeSelectParam, \"type\">;\n  data: any;\n}\n\nconst Select = ({ nodeId, param, data }: SelectProps) => {\n  const { id, label, multiple = false, options } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [opts, setOpts] = useState<string[] | undefined>(\n    data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined\n  );\n\n  const onSelectChange: HvDropdownProps[\"onChange\"] = (item) => {\n    const nodes = reactFlowInstance.getNodes();\n\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : (item?.label as string) ?? undefined;\n\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = {\n          ...node.data,\n          [id]: newOpts,\n        };\n      }\n      return node;\n    });\n\n    reactFlowInstance.setNodes(newNodes);\n    setOpts(\n      newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined\n    );\n  };\n\n  return (\n    <HvDropdown\n      className=\"nodrag\" // Prevents dragging within the select field\n      disablePortal\n      label={label}\n      values={options?.map((o) => {\n        return { id: o, label: o, selected: !!opts?.find((opt) => opt === o) };\n      })}\n      onChange={onSelectChange}\n      maxHeight={100}\n      multiSelect={multiple}\n    />\n  );\n};\n\nexport default Select;\n"],"names":["Select","nodeId","param","data","id","label","multiple","options","reactFlowInstance","useReactFlow","opts","setOpts","useState","Array","isArray","undefined","onSelectChange","item","nodes","getNodes","newOpts","map","x","newNodes","node","setNodes","o","selected","find","opt"],"mappings":";;;;AAYA,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAkB,MAAM;AACjD,QAAA;AAAA,IAAEC;AAAAA,IAAIC;AAAAA,IAAOC,WAAW;AAAA,IAAOC;AAAAA,EAAYL,IAAAA;AAEjD,QAAMM,oBAAoBC;AAEpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,SACtBT,KAAKC,EAAE,IAAKS,MAAMC,QAAQX,KAAKC,EAAE,CAAC,IAAID,KAAKC,EAAE,IAAI,CAACD,KAAKC,EAAE,CAAC,IAAKW,MACjE;AAEA,QAAMC,iBAA+CC,CAAS,SAAA;AACtDC,UAAAA,QAAQV,kBAAkBW;AAEhC,UAAMC,UAAUP,MAAMC,QAAQG,IAAI,IAC9BA,KAAKI,IAAKC,CAAAA,MAAMA,EAAEjB,KAAgB,IACjCY,MAAMZ,SAAoBU;AAEzBQ,UAAAA,WAAWL,MAAMG,IAAKG,CAAS,SAAA;AAC/BA,UAAAA,KAAKpB,OAAOH,QAAQ;AACtBuB,aAAKrB,OAAO;AAAA,UACV,GAAGqB,KAAKrB;AAAAA,UACR,CAACC,EAAE,GAAGgB;AAAAA,QAAAA;AAAAA,MAEV;AACOI,aAAAA;AAAAA,IAAAA,CACR;AAEDhB,sBAAkBiB,SAASF,QAAQ;AAEjCH,YAAAA,UAAWP,MAAMC,QAAQM,OAAO,IAAIA,UAAU,CAACA,OAAO,IAAKL,MAC7D;AAAA,EAAA;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQR,SAASc,IAAKK,CAAM,MAAA;AACnB,eAAA;AAAA,UAAEtB,IAAIsB;AAAAA,UAAGrB,OAAOqB;AAAAA,UAAGC,UAAU,CAAC,CAACjB,MAAMkB,KAAMC,CAAAA,QAAQA,QAAQH,CAAC;AAAA,QAAA;AAAA,MAAE,CACtE;AAAA,MACD,UAAUV;AAAAA,MACV,WAAW;AAAA,MACX,aAAaV;AAAAA,IAAAA;AAAAA,EAAAA;AAGnB;AAEA,MAAA,WAAeN;"}
+{"version":3,"file":"Select.js","sources":["../../../../../../src/components/Flow/Node/Parameters/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvDropdown, HvDropdownProps } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeSelectParam } from \"../../types\";\n\ninterface SelectProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeSelectParam, \"type\">;\n  data: any;\n}\n\nconst Select = ({ nodeId, param, data }: SelectProps) => {\n  const { id, label, multiple = false, options } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [opts, setOpts] = useState<string[] | undefined>(\n    data[id] ? (Array.isArray(data[id]) ? data[id] : [data[id]]) : undefined\n  );\n\n  const onSelectChange: HvDropdownProps[\"onChange\"] = (item) => {\n    const nodes = reactFlowInstance.getNodes();\n\n    const newOpts = Array.isArray(item)\n      ? item.map((x) => x.label as string)\n      : (item?.label as string) ?? undefined;\n\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = {\n          ...node.data,\n          [id]: newOpts,\n        };\n      }\n      return node;\n    });\n\n    reactFlowInstance.setNodes(newNodes);\n    setOpts(\n      newOpts ? (Array.isArray(newOpts) ? newOpts : [newOpts]) : undefined\n    );\n  };\n\n  return (\n    <HvDropdown\n      className=\"nodrag\" // Prevents dragging within the select field\n      disablePortal\n      label={label}\n      values={options?.map((o) => {\n        return { id: o, label: o, selected: !!opts?.find((opt) => opt === o) };\n      })}\n      onChange={onSelectChange}\n      maxHeight={100}\n      multiSelect={multiple}\n    />\n  );\n};\n\nexport default Select;\n"],"names":[],"mappings":";;;;AAYA,MAAM,SAAS,CAAC,EAAE,QAAQ,OAAO,WAAwB;AACvD,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAEjD,QAAM,oBAAoB;AAEpB,QAAA,CAAC,MAAM,OAAO,IAAI;AAAA,IACtB,KAAK,EAAE,IAAK,MAAM,QAAQ,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAK;AAAA,EAAA;AAG3D,QAAA,iBAA8C,CAAC,SAAS;AACtD,UAAA,QAAQ,kBAAkB;AAEhC,UAAM,UAAU,MAAM,QAAQ,IAAI,IAC9B,KAAK,IAAI,CAAC,MAAM,EAAE,KAAe,IAChC,MAAM,SAAoB;AAE/B,UAAM,WAAW,MAAM,IAAI,CAAC,SAAS;AAC/B,UAAA,KAAK,OAAO,QAAQ;AACtB,aAAK,OAAO;AAAA,UACV,GAAG,KAAK;AAAA,UACR,CAAC,EAAE,GAAG;AAAA,QAAA;AAAA,MAEV;AACO,aAAA;AAAA,IAAA,CACR;AAED,sBAAkB,SAAS,QAAQ;AACnC;AAAA,MACE,UAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,IAAK;AAAA,IAAA;AAAA,EAC7D;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQ,SAAS,IAAI,CAAC,MAAM;AAC1B,eAAO,EAAE,IAAI,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC,QAAQ,QAAQ,CAAC,EAAE;AAAA,MAAA,CACtE;AAAA,MACD,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EAAA;AAGnB;AAEA,MAAA,WAAe;"}

package/dist/esm/components/Flow/Node/Parameters/Text.js

@@ -2,25 +2,15 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
 import { HvInput } from "@hitachivantara/uikit-react-core";
 import { useReactFlow } from "reactflow";
-const Text = ({
-  nodeId,
-  param,
-  data
-}) => {
-  const {
-    id,
-    label
-  } = param;
+const Text = ({ nodeId, param, data }) => {
+  const { id, label } = param;
   const reactFlowInstance = useReactFlow();
   const [text, setText] = useState(data[id]);
   const onTextChange = (event, val) => {
     const nodes = reactFlowInstance.getNodes();
     const newNodes = nodes.map((node) => {
       if (node.id === nodeId) {
-        node.data = {
-          ...node.data,
-          [id]: val
-        };
+        node.data = { ...node.data, [id]: val };
       }
       return node;
     });

package/dist/esm/components/Flow/Node/Parameters/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../../../../src/components/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvInput, HvInputProps } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeTextParam } from \"../../types\";\n\ninterface TextProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeTextParam, \"type\">;\n  data: any;\n}\n\nconst Text = ({ nodeId, param, data }: TextProps) => {\n  const { id, label } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [text, setText] = useState(data[id]);\n\n  const onTextChange: HvInputProps[\"onChange\"] = (event, val) => {\n    const nodes = reactFlowInstance.getNodes();\n\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [id]: val };\n      }\n      return node;\n    });\n\n    reactFlowInstance.setNodes(newNodes);\n    setText(val);\n  };\n\n  return (\n    <HvInput\n      className=\"nodrag\" // Prevents dragging within the input field\n      label={label}\n      value={text}\n      onChange={onTextChange}\n    />\n  );\n};\n\nexport default Text;\n"],"names":["Text","nodeId","param","data","id","label","reactFlowInstance","useReactFlow","text","setText","useState","onTextChange","event","val","nodes","getNodes","newNodes","map","node","setNodes"],"mappings":";;;;AAYA,MAAMA,OAAOA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAOC;AAAgB,MAAM;AAC7C,QAAA;AAAA,IAAEC;AAAAA,IAAIC;AAAAA,EAAUH,IAAAA;AAEtB,QAAMI,oBAAoBC;AAE1B,QAAM,CAACC,MAAMC,OAAO,IAAIC,SAASP,KAAKC,EAAE,CAAC;AAEnCO,QAAAA,eAAyCA,CAACC,OAAOC,QAAQ;AACvDC,UAAAA,QAAQR,kBAAkBS;AAE1BC,UAAAA,WAAWF,MAAMG,IAAKC,CAAS,SAAA;AAC/BA,UAAAA,KAAKd,OAAOH,QAAQ;AACtBiB,aAAKf,OAAO;AAAA,UAAE,GAAGe,KAAKf;AAAAA,UAAM,CAACC,EAAE,GAAGS;AAAAA,QAAAA;AAAAA,MACpC;AACOK,aAAAA;AAAAA,IAAAA,CACR;AAEDZ,sBAAkBa,SAASH,QAAQ;AACnCP,YAAQI,GAAG;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,OAAOL;AAAAA,MACP,UAAUG;AAAAA,IAAAA;AAAAA,EAAAA;AAGhB;AAEA,MAAA,SAAeX;"}
+{"version":3,"file":"Text.js","sources":["../../../../../../src/components/Flow/Node/Parameters/Text.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvInput, HvInputProps } from \"@hitachivantara/uikit-react-core\";\nimport { useReactFlow } from \"reactflow\";\n\nimport { HvFlowNodeTextParam } from \"../../types\";\n\ninterface TextProps {\n  nodeId: string;\n  param: Omit<HvFlowNodeTextParam, \"type\">;\n  data: any;\n}\n\nconst Text = ({ nodeId, param, data }: TextProps) => {\n  const { id, label } = param;\n\n  const reactFlowInstance = useReactFlow();\n\n  const [text, setText] = useState(data[id]);\n\n  const onTextChange: HvInputProps[\"onChange\"] = (event, val) => {\n    const nodes = reactFlowInstance.getNodes();\n\n    const newNodes = nodes.map((node) => {\n      if (node.id === nodeId) {\n        node.data = { ...node.data, [id]: val };\n      }\n      return node;\n    });\n\n    reactFlowInstance.setNodes(newNodes);\n    setText(val);\n  };\n\n  return (\n    <HvInput\n      className=\"nodrag\" // Prevents dragging within the input field\n      label={label}\n      value={text}\n      onChange={onTextChange}\n    />\n  );\n};\n\nexport default Text;\n"],"names":[],"mappings":";;;;AAYA,MAAM,OAAO,CAAC,EAAE,QAAQ,OAAO,WAAsB;AAC7C,QAAA,EAAE,IAAI,MAAU,IAAA;AAEtB,QAAM,oBAAoB;AAE1B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK,EAAE,CAAC;AAEnC,QAAA,eAAyC,CAAC,OAAO,QAAQ;AACvD,UAAA,QAAQ,kBAAkB;AAEhC,UAAM,WAAW,MAAM,IAAI,CAAC,SAAS;AAC/B,UAAA,KAAK,OAAO,QAAQ;AACjB,aAAA,OAAO,EAAE,GAAG,KAAK,MAAM,CAAC,EAAE,GAAG;MACpC;AACO,aAAA;AAAA,IAAA,CACR;AAED,sBAAkB,SAAS,QAAQ;AACnC,YAAQ,GAAG;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEA,MAAA,SAAe;"}

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

@@ -30,15 +30,12 @@ const HvFlowSidebar = ({
   defaultGroupProps,
   ...others
 }) => {
-  const {
-    classes
-  } = useClasses(classesProp);
-  const {
-    nodeGroups,
-    nodeTypes,
-    setExpandedNodeGroups
-  } = useFlowContext();
-  const unfilteredGroups = useMemo(() => buildGroups(nodeGroups, nodeTypes, defaultGroupProps), [nodeGroups, nodeTypes, defaultGroupProps]);
+  const { classes } = useClasses(classesProp);
+  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();
+  const unfilteredGroups = useMemo(
+    () => buildGroups(nodeGroups, nodeTypes, defaultGroupProps),
+    [nodeGroups, nodeTypes, defaultGroupProps]
+  );
   const [groups, setGroups] = useState(unfilteredGroups);
   const [ndTypes, setNdTypes] = useState(nodeTypes);
   const [draggingLabel, setDraggingLabel] = useState(void 0);
@@ -48,9 +45,7 @@ const HvFlowSidebar = ({
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const drawerElementId = useUniqueId(id, "hvFlowSidebarDrawer");
   const groupsElementId = useUniqueId(id, "hvFlowSidebarGroups");
-  const {
-    setNodeRef
-  } = useDroppable({
+  const { setNodeRef } = useDroppable({
     id: drawerElementId
   });
   const handleDragStart = (event) => {
@@ -68,7 +63,9 @@ const HvFlowSidebar = ({
   const handleSearch = (event, value) => {
     if (nodeGroups) {
       const gps = value ? Object.entries(unfilteredGroups).reduce((acc, curr) => {
-        const filteredNodes = curr[1].nodes.filter((obj) => obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase()));
+        const filteredNodes = curr[1].nodes.filter(
+          (obj) => obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+        );
         const nodesCount = filteredNodes.length;
         if (nodesCount > 0) {
           acc[curr[0]] = {
@@ -91,32 +88,74 @@ const HvFlowSidebar = ({
     }
   };
   const handleDebouncedSearch = debounce(handleSearch, 500);
-  return /* @__PURE__ */ jsxs(HvDrawer, { BackdropComponent: void 0, variant: "persistent", classes: {
-    paper: classes.drawerPaper
-  }, showBackdrop: false, anchor, buttonTitle, ...others, children: [
-    /* @__PURE__ */ jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
-      /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
-        /* @__PURE__ */ jsx(Add, { role: "none" }),
-        /* @__PURE__ */ jsx(HvTypography, { component: "p", variant: "title3", children: title })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: classes.contentContainer, children: [
-        /* @__PURE__ */ jsx(HvTypography, { className: classes.description, children: description }),
-        /* @__PURE__ */ jsx(HvInput, { className: classes.searchRoot, type: "search", placeholder: labels?.searchPlaceholder, "aria-label": labels?.searchAriaLabel, "aria-controls": groupsElementId, "aria-owns": groupsElementId, onChange: handleDebouncedSearch, inputProps: {
-          autoComplete: "off"
-        } }),
-        nodeGroups ? /* @__PURE__ */ jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => {
-          return /* @__PURE__ */ jsx(HvFlowSidebarGroup, { id: obj[0], expandButtonProps: {
-            "aria-label": labels?.expandGroupButtonAriaLabel
-          }, itemProps: {
-            "aria-roledescription": labels?.itemAriaRoleDescription
-          }, ...obj[1] }, obj[0]);
-        }) }) : ndTypes && Object.entries(ndTypes).map((obj) => {
-          return /* @__PURE__ */ jsx(HvFlowDraggableSidebarGroupItem, { id: obj[0], type: obj[0], label: obj[1]?.meta?.label || "", data: obj[1]?.meta?.data, "aria-roledescription": labels?.itemAriaRoleDescription, className: classes.nodeType }, obj[0]);
-        })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToWindowEdges], ...dragOverlayProps, children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    HvDrawer,
+    {
+      BackdropComponent: void 0,
+      variant: "persistent",
+      classes: {
+        paper: classes.drawerPaper
+      },
+      showBackdrop: false,
+      anchor,
+      buttonTitle,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
+          /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
+            /* @__PURE__ */ jsx(Add, { role: "none" }),
+            /* @__PURE__ */ jsx(HvTypography, { component: "p", variant: "title3", children: title })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: classes.contentContainer, children: [
+            /* @__PURE__ */ jsx(HvTypography, { className: classes.description, children: description }),
+            /* @__PURE__ */ jsx(
+              HvInput,
+              {
+                className: classes.searchRoot,
+                type: "search",
+                placeholder: labels?.searchPlaceholder,
+                "aria-label": labels?.searchAriaLabel,
+                "aria-controls": groupsElementId,
+                "aria-owns": groupsElementId,
+                onChange: handleDebouncedSearch,
+                inputProps: { autoComplete: "off" }
+              }
+            ),
+            nodeGroups ? /* @__PURE__ */ jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => {
+              return /* @__PURE__ */ jsx(
+                HvFlowSidebarGroup,
+                {
+                  id: obj[0],
+                  expandButtonProps: {
+                    "aria-label": labels?.expandGroupButtonAriaLabel
+                  },
+                  itemProps: {
+                    "aria-roledescription": labels?.itemAriaRoleDescription
+                  },
+                  ...obj[1]
+                },
+                obj[0]
+              );
+            }) }) : ndTypes && Object.entries(ndTypes).map((obj) => {
+              return /* @__PURE__ */ jsx(
+                HvFlowDraggableSidebarGroupItem,
+                {
+                  id: obj[0],
+                  type: obj[0],
+                  label: obj[1]?.meta?.label || "",
+                  data: obj[1]?.meta?.data,
+                  "aria-roledescription": labels?.itemAriaRoleDescription,
+                  className: classes.nodeType
+                },
+                obj[0]
+              );
+            })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToWindowEdges], ...dragOverlayProps, children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
+      ]
+    }
+  );
 };
 export {
   HvFlowSidebar,

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

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