@hitachivantara/uikit-react-lab 5.19.0 → 5.19.1

package/dist/cjs/components/Flow/Node/Parameters/ParamRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ParamRenderer.cjs","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","jsx"],"mappings":";;;;;AAUA,MAAMA,YAAY;AAAA,EAChBC,MAAMC,KAAAA;AAAAA,EACNC,QAAQC,OAAAA;AACV;AAEA,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAAAA,EAAQC;AAAyB,MAAM;AACtE,SAEKD,2BAAAA,IAAAA,WAAAA,UAAAA,EAAAA,UAAAA,OAAOE,IAAI,CAACC,OAAOC,QAAQ;AACpBC,UAAAA,WAAWZ,UAAUU,MAAMG,IAAI;AACrC,QAAI,CAACD;AAAiB,aAAA;AAEtB,WAAQE,2BAAAA,IAAA,UAAA,EAAmB,QAAgB,OAAc,QAAnCH,GAAiD;AAAA,EAExE,CAAA,EACH,CAAA;AAEJ;AAEA,MAAA,kBAAeN;;"}
+{"version":3,"file":"ParamRenderer.cjs","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":["Text","Select","jsx","Fragment"],"mappings":";;;;;AAUA,MAAM,YAAY;AAAA,EAChB,MAAMA,KAAA;AAAA,EACN,QAAQC,OAAA;AACV;AAEA,MAAM,gBAAgB,CAAC,EAAE,QAAQ,QAAQ,WAA+B;AACtE,SAEKC,2BAAA,IAAAC,WAAA,UAAA,EAAA,UAAA,OAAO,IAAI,CAAC,OAAO,QAAQ;AACpB,UAAA,WAAW,UAAU,MAAM,IAAI;AACrC,QAAI,CAAC;AAAiB,aAAA;AAEtB,WAAQD,2BAAAA,IAAA,UAAA,EAAmB,QAAgB,OAAc,QAAnC,GAA+C;AAAA,EAEtE,CAAA,EACH,CAAA;AAEJ;AAEA,MAAA,kBAAe;;"}

package/dist/cjs/components/Flow/Node/Parameters/Select.cjs

@@ -4,19 +4,12 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const ReactFlow = require("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 = ReactFlow.useReactFlow();
-  const [opts, setOpts] = React.useState(data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0);
+  const [opts, setOpts] = React.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;
@@ -30,7 +23,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__ */ jsxRuntime.jsx(
     uikitReactCore.HvDropdown,
@@ -39,11 +34,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/cjs/components/Flow/Node/Parameters/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","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","jsx","HvDropdown","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,UAAAA;AAEpB,QAAA,CAACC,MAAMC,OAAO,IAAIC,MAAAA,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,SAAAW,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb;AAAA,MACA,QAAQpB,SAASc,IAAKO,CAAM,MAAA;AACnB,eAAA;AAAA,UAAExB,IAAIwB;AAAAA,UAAGvB,OAAOuB;AAAAA,UAAGC,UAAU,CAAC,CAACnB,MAAMoB,KAAMC,CAAAA,QAAQA,QAAQH,CAAC;AAAA,QAAA;AAAA,MAAE,CACtE;AAAA,MACD,UAAUZ;AAAAA,MACV,WAAW;AAAA,MACX,aAAaV;AAAAA,IAAAA;AAAAA,EAAAA;AAGnB;AAEA,MAAA,WAAeN;;"}
+{"version":3,"file":"Select.cjs","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":["useReactFlow","useState","jsx","HvDropdown"],"mappings":";;;;;;AAYA,MAAM,SAAS,CAAC,EAAE,QAAQ,OAAO,WAAwB;AACvD,QAAM,EAAE,IAAI,OAAO,WAAW,OAAO,QAAY,IAAA;AAEjD,QAAM,oBAAoBA,UAAAA;AAEpB,QAAA,CAAC,MAAM,OAAO,IAAIC,MAAA;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,SAAAC,2BAAA;AAAA,IAACC,eAAA;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/cjs/components/Flow/Node/Parameters/Text.cjs

@@ -4,25 +4,15 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const ReactFlow = require("reactflow");
-const Text = ({
-  nodeId,
-  param,
-  data
-}) => {
-  const {
-    id,
-    label
-  } = param;
+const Text = ({ nodeId, param, data }) => {
+  const { id, label } = param;
   const reactFlowInstance = ReactFlow.useReactFlow();
   const [text, setText] = React.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/cjs/components/Flow/Node/Parameters/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","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","jsx","HvInput"],"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,UAAAA;AAE1B,QAAM,CAACC,MAAMC,OAAO,IAAIC,MAASP,SAAAA,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,SAAAO,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,OAAOb;AAAAA,MACP,UAAUG;AAAAA,IAAAA;AAAAA,EAAAA;AAGhB;AAEA,MAAA,SAAeX;;"}
+{"version":3,"file":"Text.cjs","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":["useReactFlow","useState","jsx","HvInput"],"mappings":";;;;;;AAYA,MAAM,OAAO,CAAC,EAAE,QAAQ,OAAO,WAAsB;AAC7C,QAAA,EAAE,IAAI,MAAU,IAAA;AAEtB,QAAM,oBAAoBA,UAAAA;AAE1B,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAS,SAAA,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,SAAAC,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEA,MAAA,SAAe;;"}

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

@@ -33,15 +33,12 @@ const HvFlowSidebar = ({
   defaultGroupProps,
   ...others
 }) => {
-  const {
-    classes
-  } = Sidebar_styles.useClasses(classesProp);
-  const {
-    nodeGroups,
-    nodeTypes,
-    setExpandedNodeGroups
-  } = useFlowContext.useFlowContext();
-  const unfilteredGroups = React.useMemo(() => utils.buildGroups(nodeGroups, nodeTypes, defaultGroupProps), [nodeGroups, nodeTypes, defaultGroupProps]);
+  const { classes } = Sidebar_styles.useClasses(classesProp);
+  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext.useFlowContext();
+  const unfilteredGroups = React.useMemo(
+    () => utils.buildGroups(nodeGroups, nodeTypes, defaultGroupProps),
+    [nodeGroups, nodeTypes, defaultGroupProps]
+  );
   const [groups, setGroups] = React.useState(unfilteredGroups);
   const [ndTypes, setNdTypes] = React.useState(nodeTypes);
   const [draggingLabel, setDraggingLabel] = React.useState(void 0);
@@ -51,9 +48,7 @@ const HvFlowSidebar = ({
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const drawerElementId = uikitReactCore.useUniqueId(id, "hvFlowSidebarDrawer");
   const groupsElementId = uikitReactCore.useUniqueId(id, "hvFlowSidebarGroups");
-  const {
-    setNodeRef
-  } = core.useDroppable({
+  const { setNodeRef } = core.useDroppable({
     id: drawerElementId
   });
   const handleDragStart = (event) => {
@@ -71,7 +66,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]] = {
@@ -94,32 +91,74 @@ const HvFlowSidebar = ({
     }
   };
   const handleDebouncedSearch = debounce__default.default(handleSearch, 500);
-  return /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvDrawer, { BackdropComponent: void 0, variant: "persistent", classes: {
-    paper: classes.drawerPaper
-  }, showBackdrop: false, anchor, buttonTitle, ...others, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, { role: "none" }),
-        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "p", variant: "title3", children: title })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.contentContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { className: classes.description, children: description }),
-        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.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__ */ jsxRuntime.jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup.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__ */ jsxRuntime.jsx(DraggableSidebarGroupItem.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__ */ jsxRuntime.jsx(core.DragOverlay, { modifiers: [modifiers.restrictToWindowEdges], ...dragOverlayProps, children: draggingLabel ? /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    uikitReactCore.HvDrawer,
+    {
+      BackdropComponent: void 0,
+      variant: "persistent",
+      classes: {
+        paper: classes.drawerPaper
+      },
+      showBackdrop: false,
+      anchor,
+      buttonTitle,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, { role: "none" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "p", variant: "title3", children: title })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.contentContainer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { className: classes.description, children: description }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              uikitReactCore.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__ */ jsxRuntime.jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarGroup.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__ */ jsxRuntime.jsx(
+                DraggableSidebarGroupItem.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__ */ jsxRuntime.jsx(core.DragOverlay, { modifiers: [modifiers.restrictToWindowEdges], ...dragOverlayProps, children: draggingLabel ? /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
+      ]
+    }
+  );
 };
 exports.flowSidebarClasses = Sidebar_styles.staticClasses;
 exports.HvFlowSidebar = HvFlowSidebar;

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","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","useDndMonitor","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","HvDrawer","paper","drawerPaper","jsxs","titleContainer","jsx","Add","HvTypography","contentContainer","HvInput","searchRoot","autoComplete","groupsContainer","map","HvFlowSidebarGroup","HvFlowDraggableSidebarGroupItem","nodeType","DragOverlay","restrictToWindowEdges","HvFlowSidebarGroupItem"],"mappings":";;;;;;;;;;;;;;;;;AA6DA,MAAMA,iBAA+C;AAAA,EACnDC,yBAAyB;AAAA,EACzBC,4BAA4B;AAAA,EAC5BC,mBAAmB;AAAA,EACnBC,iBAAiB;AACnB;AAEO,MAAMC,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,cAAc;AAAA,EACdC,SAASC;AAAAA,EACTC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,eAAAA,WAAWN,WAAW;AAEpC,QAAA;AAAA,IAAEO;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,MAA0BC,eAAe,eAAA;AAExE,QAAMC,mBAAmBC,MAAAA,QACvB,MAAMC,MAAAA,YAAYN,YAAYC,WAAWJ,iBAAiB,GAC1D,CAACG,YAAYC,WAAWJ,iBAAiB,CAC3C;AAEA,QAAM,CAACU,QAAQC,SAAS,IAAIC,eAASL,gBAAgB;AACrD,QAAM,CAACM,SAASC,UAAU,IAAIF,eAASR,SAAS;AAChD,QAAM,CAACW,eAAeC,gBAAgB,IAAIJ,MAAAA,SAASK,MAAS;AAE5DC,QAAAA,UAAU,MAAM;AACdP,cAAUJ,gBAAgB;AAAA,EAAA,GACzB,CAACA,gBAAgB,CAAC;AAEfV,QAAAA,SAASsB,eAAAA,UAAUnC,gBAAgBc,WAAW;AAE9CsB,QAAAA,kBAAkBC,eAAAA,YAAY/B,IAAI,qBAAqB;AACvDgC,QAAAA,kBAAkBD,eAAAA,YAAY/B,IAAI,qBAAqB;AAIvD,QAAA;AAAA,IAAEiC;AAAAA,MAAeC,kBAAa;AAAA,IAClClC,IAAI8B;AAAAA,EAAAA,CACL;AAED,QAAMK,kBAAmDC,CAAU,UAAA;AACjE,QAAIA,MAAMC,OAAOC,KAAKC,SAASC,QAAQ;AACrCd,uBAAiBU,MAAMC,OAAOC,KAAKC,QAAQC,QAAQC,KAAK;AAAA,IAC1D;AAAA,EAAA;AAGF,QAAMC,gBAA8CA,MAAM;AACxDhB,qBAAiBC,MAAS;AAAA,EAAA;AAGdgB,qBAAA;AAAA,IACZC,WAAWF;AAAAA,IACXG,aAAaV;AAAAA,EAAAA,CACd;AAEKW,QAAAA,eAAyCA,CAACV,OAAOW,UAAU;AAC/D,QAAIlC,YAAY;AACRmC,YAAAA,MAAMD,QACRE,OAAOC,QAAQjC,gBAAgB,EAAEkC,OAAO,CAACC,KAAKC,SAAS;AAErD,cAAMC,gBAAgBD,KAAK,CAAC,EAAEE,MAAMC,OAAQC,CAAAA,QAC1CA,IAAIhB,MAAMiB,oBAAoBC,SAASZ,MAAMW,kBAAmB,CAAA,CAClE;AACA,cAAME,aAAaN,cAAcO;AAGjC,YAAID,aAAa,GAAG;AACdP,cAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,YACb,GAAGA,KAAK,CAAC;AAAA,YACTE,OAAOD;AAAAA,UAAAA;AAAAA,QAEX;AAEOF,eAAAA;AAAAA,MAAAA,GACN,CAAA,CAAE,IACLnC;AAEJI,gBAAU2B,GAAG;AACbjC,8BAAwBgC,QAAQE,OAAOa,KAAKd,GAAG,IAAI,CAAA,CAAE;AAAA,eAC5ClC,WAAW;AACpB,YAAMiD,oBAAoB,CAAA;AAC1B,iBAAW,CAACC,KAAKC,IAAI,KAAKhB,OAAOC,QAAQpC,SAAS,GAAG;AAEjDmD,YAAAA,KAAKC,MAAMzB,MACRiB,oBACAC,SAASZ,MAAMW,kBAAkB,CAAC,GACrC;AACAK,4BAAkBC,GAAG,IAAIC;AAAAA,QAC3B;AAAA,MACF;AACWlB,iBAAAA,QAAQgB,oBAAoBjD,SAAS;AAAA,IAClD;AAAA,EAAA;AAGIqD,QAAAA,wBAAwBC,kBAAAA,QAAStB,cAAc,GAAG;AAExD,yCACGuB,eACC,UAAA,EAAA,mBAAmB1C,QACnB,SAAQ,cACR,SAAS;AAAA,IACP2C,OAAOjE,QAAQkE;AAAAA,EAAAA,GAEjB,cAAc,OACd,QACA,aACI5D,GAAAA,QAEJ,UAAA;AAAA,IAAA6D,2BAAA,KAAC,OAAI,EAAA,IAAI1C,iBAAiB,KAAKG,YAC7B,UAAA;AAAA,MAACuC,2BAAA,KAAA,OAAA,EAAI,WAAWnE,QAAQoE,gBACtB,UAAA;AAAA,QAACC,2BAAAA,IAAAC,gBAAA,KAAA,EAAI,MAAK,OAAM,CAAA;AAAA,uCACfC,eAAAA,cAAa,EAAA,WAAU,KAAI,SAAQ,UACjC3E,UACH,OAAA;AAAA,MAAA,GACF;AAAA,MACCuE,2BAAA,KAAA,OAAA,EAAI,WAAWnE,QAAQwE,kBACtB,UAAA;AAAA,QAAAH,2BAAA,IAACE,eAAa,cAAA,EAAA,WAAWvE,QAAQH,aAC9BA,UACH,aAAA;AAAA,uCACC4E,eAAAA,SACC,EAAA,WAAWzE,QAAQ0E,YACnB,MAAK,UACL,aAAaxE,QAAQV,mBACrB,cAAYU,QAAQT,iBACpB,iBAAekC,iBACf,aAAWA,iBACX,UAAUmC,uBACV,YAAY;AAAA,UAAEa,cAAc;AAAA,QAAA,GAAQ;AAAA,QAErCnE,aACC6D,2BAAA,IAAC,MAAG,EAAA,IAAI1C,iBAAiB,WAAW3B,QAAQ4E,iBACzChC,UAAOC,OAAAA,QAAQ9B,MAAM,EAAE8D,IAAKzB,CAAQ,QAAA;AACnC,gDACG0B,aAAAA,oBAEC,EAAA,IAAI1B,IAAI,CAAC,GACT,mBAAmB;AAAA,YACjB,cAAclD,QAAQX;AAAAA,aAExB,WAAW;AAAA,YACT,wBAAwBW,QAAQZ;AAAAA,UAAAA,GAE9B8D,GAAAA,IAAI,CAAC,EARJA,GAAAA,IAAI,CAAC,CASV;AAAA,QAAA,CAEL,EACH,CAAA,IAEAlC,WACA0B,OAAOC,QAAQ3B,OAAO,EAAE2D,IAAKzB,CAAQ,QAAA;AACnC,iBACGiB,2BAAAA,IAAAU,0BAAAA,iCAAA,EAEC,IAAI3B,IAAI,CAAC,GACT,MAAMA,IAAI,CAAC,GACX,OAAOA,IAAI,CAAC,GAAGS,MAAMzB,SAAS,IAC9B,MAAMgB,IAAI,CAAC,GAAGS,MAAM5B,MACpB,wBAAsB/B,QAAQZ,yBAC9B,WAAWU,QAAQgF,SANd5B,GAAAA,IAAI,CAAC,CAOV;AAAA,QAAA,CAEL;AAAA,MAAA,GAEL;AAAA,IAAA,GACF;AAAA,mCACC6B,KAAY,aAAA,EAAA,WAAW,CAACC,UAAAA,qBAAqB,GAAG,GAAI9E,kBAClDgB,UACC,gBAAAiD,2BAAAA,IAACc,2CAAuB,OAAO/D,eAAe,YAAU,KAAA,CAAA,IACtD,MACN;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"Sidebar.cjs","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":["useClasses","useFlowContext","useMemo","buildGroups","useState","useEffect","useLabels","useUniqueId","useDroppable","useDndMonitor","debounce","jsxs","HvDrawer","jsx","Add","HvTypography","HvInput","HvFlowSidebarGroup","HvFlowDraggableSidebarGroupItem","DragOverlay","restrictToWindowEdges","HvFlowSidebarGroupItem"],"mappings":"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"}

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

@@ -1,23 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const {
-  staticClasses,
-  useClasses
-} = uikitReactCore.createClasses("HvFlowSidebar", {
-  drawerPaper: {
-    width: "360px"
-  },
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlowSidebar", {
+  drawerPaper: { width: "360px" },
   titleContainer: {
     display: "flex",
     padding: uikitReactCore.theme.spacing("sm", "lg", "xs", "sm")
   },
-  contentContainer: {
-    padding: uikitReactCore.theme.spacing(0, "lg", "sm", "lg")
-  },
-  description: {
-    color: uikitReactCore.theme.colors.secondary_60
-  },
+  contentContainer: { padding: uikitReactCore.theme.spacing(0, "lg", "sm", "lg") },
+  description: { color: uikitReactCore.theme.colors.secondary_60 },
   searchRoot: {
     paddingTop: uikitReactCore.theme.space.sm,
     paddingBottom: uikitReactCore.theme.space.sm

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.styles.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n  drawerPaper: { width: \"360px\" },\n  titleContainer: {\n    display: \"flex\",\n    padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n  },\n  contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n  description: { color: theme.colors.secondary_60 },\n  searchRoot: {\n    paddingTop: theme.space.sm,\n    paddingBottom: theme.space.sm,\n  },\n  groupsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.sm,\n    listStyleType: \"none\",\n  },\n  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,eAAAA,cAAc,iBAAiB;AAAA,EAC1EC,aAAa;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EAC9BC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,SAASC,eAAMC,MAAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACAC,kBAAkB;AAAA,IAAEH,SAASC,eAAMC,MAAAA,QAAQ,GAAG,MAAM,MAAM,IAAI;AAAA,EAAE;AAAA,EAChEE,aAAa;AAAA,IAAEC,OAAOJ,eAAAA,MAAMK,OAAOC;AAAAA,EAAa;AAAA,EAChDC,YAAY;AAAA,IACVC,YAAYR,eAAAA,MAAMS,MAAMC;AAAAA,IACxBC,eAAeX,eAAAA,MAAMS,MAAMC;AAAAA,EAC7B;AAAA,EACAE,iBAAiB;AAAA,IACfd,SAAS;AAAA,IACTe,eAAe;AAAA,IACfC,KAAKd,eAAAA,MAAMS,MAAMC;AAAAA,IACjBK,eAAe;AAAA,EACjB;AAAA,EACAC,UAAU;AAAA,IACRC,cAAcjB,eAAAA,MAAMS,MAAMS;AAAAA,EAC5B;AACF,CAAC;;;"}
+{"version":3,"file":"Sidebar.styles.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n  drawerPaper: { width: \"360px\" },\n  titleContainer: {\n    display: \"flex\",\n    padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n  },\n  contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n  description: { color: theme.colors.secondary_60 },\n  searchRoot: {\n    paddingTop: theme.space.sm,\n    paddingBottom: theme.space.sm,\n  },\n  groupsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.sm,\n    listStyleType: \"none\",\n  },\n  nodeType: {\n    marginBottom: theme.space.xs,\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;AAEO,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,iBAAiB;AAAA,EAC1E,aAAa,EAAE,OAAO,QAAQ;AAAA,EAC9B,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,SAASC,eAAM,MAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACA,kBAAkB,EAAE,SAASA,qBAAM,QAAQ,GAAG,MAAM,MAAM,IAAI,EAAE;AAAA,EAChE,aAAa,EAAE,OAAOA,qBAAM,OAAO,aAAa;AAAA,EAChD,YAAY;AAAA,IACV,YAAYA,eAAAA,MAAM,MAAM;AAAA,IACxB,eAAeA,eAAAA,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAKA,eAAAA,MAAM,MAAM;AAAA,IACjB,eAAe;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,IACR,cAAcA,eAAAA,MAAM,MAAM;AAAA,EAC5B;AACF,CAAC;;;"}

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

@@ -19,31 +19,43 @@ const HvFlowSidebarGroup = ({
   classes: classesProp,
   itemProps
 }) => {
-  const {
-    classes,
-    cx,
-    css
-  } = SidebarGroup_styles.useClasses(classesProp);
-  const {
-    expandedNodeGroups,
-    setExpandedNodeGroups
-  } = useFlowContext.useFlowContext();
-  const opened = React.useMemo(() => !!expandedNodeGroups?.find((groupId) => groupId === id), [expandedNodeGroups, id]);
+  const { classes, cx, css } = SidebarGroup_styles.useClasses(classesProp);
+  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext.useFlowContext();
+  const opened = React.useMemo(
+    () => !!expandedNodeGroups?.find((groupId) => groupId === id),
+    [expandedNodeGroups, id]
+  );
   const handleClick = React.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__ */ jsxRuntime.jsxs("li", { className: cx(css({
-    borderColor: uikitStyles.getColor(color)
-  }), classes.root), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx(css({ borderColor: uikitStyles.getColor(color) }), classes.root), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, role: "none", children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "p", variant: "title4", children: nodes.length > 1 ? `${label} (${nodes.length})` : label })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: handleClick, "aria-expanded": opened, ...expandButtonProps, children: opened ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, { role: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { role: "none" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        uikitReactCore.HvButton,
+        {
+          icon: true,
+          onClick: handleClick,
+          "aria-expanded": opened,
+          ...expandButtonProps,
+          children: opened ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, { role: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { role: "none" })
+        }
+      )
     ] }),
     description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.descriptionContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: description }) }),
-    opened && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsxRuntime.jsx(DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem, { ...itemProps, ...obj }, obj.type)) })
+    opened && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsxRuntime.jsx(
+      DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem,
+      {
+        ...itemProps,
+        ...obj
+      },
+      obj.type
+    )) })
   ] });
 };
 exports.flowSidebarGroupClasses = SidebarGroup_styles.staticClasses;

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.cjs","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../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","jsxs","borderColor","getColor","root","titleContainer","labelContainer","jsx","HvTypography","length","HvButton","Up","Down","descriptionContainer","itemsContainer","map","obj","HvFlowDraggableSidebarGroupItem","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,oBAAAA,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe,eAAA;AAErE,QAAMC,SAASC,MAAAA,QACb,MAAM,CAAC,CAACJ,oBAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,EAAE,GAC5D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,MAAAA,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,SACGU,2BAAA,KAAA,MAAA,EAAG,WAAWd,GAAGC,IAAI;AAAA,IAAEc,aAAaC,qBAASvB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQoB,IAAI,GACnE,UAAA;AAAA,IAACH,2BAAA,KAAA,OAAA,EAAI,WAAWjB,QAAQqB,gBACtB,UAAA;AAAA,MAACJ,2BAAA,KAAA,OAAA,EAAI,WAAWjB,QAAQsB,gBACtB,UAAA;AAAA,QAAAC,+BAAC,SAAI,WAAWvB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACCyB,+BAAAC,eAAAA,cAAA,EAAa,WAAU,KAAI,SAAQ,UACjC7B,UAAAA,MAAM8B,SAAS,IAAK,GAAE/B,KAAM,KAAIC,MAAM8B,MAAO,MAAK/B,OACrD;AAAA,MAAA,GACF;AAAA,MACA6B,2BAAAA,IAACG,2BACC,MAAI,MACJ,SAASb,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAUc,2BAAA,IAAAI,oBAAA,EAAG,MAAK,QAAM,mCAAOC,gBAAAA,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACC/B,8CACE,OAAI,EAAA,WAAWG,QAAQ6B,sBACtB,UAAAN,2BAAAA,IAACC,eAAAA,cAAc3B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACEc,2BAAAA,IAAA,OAAA,EAAI,WAAWvB,QAAQ8B,gBACrBnC,gBAAMoC,IAAKC,CAAAA,QACTT,+BAAAU,0BAAAA,iCAAA,EAEK/B,GAAAA,WACA8B,GAAAA,OAFCA,IAAIE,IAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"SidebarGroup.cjs","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../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":["useClasses","useFlowContext","useMemo","useCallback","jsxs","getColor","jsx","HvTypography","HvButton","Up","Down","HvFlowDraggableSidebarGroupItem"],"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,IAAIA,oBAAAA,WAAW,WAAW;AAEnD,QAAM,EAAE,oBAAoB,sBAAsB,IAAIC,eAAe,eAAA;AAErE,QAAM,SAASC,MAAA;AAAA,IACb,MAAM,CAAC,CAAC,oBAAoB,KAAK,CAAC,YAAY,YAAY,EAAE;AAAA,IAC5D,CAAC,oBAAoB,EAAE;AAAA,EAAA;AAGnB,QAAA,cAAcC,MAAAA,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,SACGC,2BAAAA,KAAA,MAAA,EAAG,WAAW,GAAG,IAAI,EAAE,aAAaC,YAAAA,SAAS,KAAK,EAAE,CAAC,GAAG,QAAQ,IAAI,GACnE,UAAA;AAAA,IAACD,2BAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,MAACA,2BAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,QAAAE,+BAAC,SAAI,WAAW,QAAQ,MAAM,MAAK,QAChC,UACH,MAAA;AAAA,QACCA,+BAAAC,eAAAA,cAAA,EAAa,WAAU,KAAI,SAAQ,UACjC,UAAA,MAAM,SAAS,IAAI,GAAG,KAAK,KAAK,MAAM,MAAM,MAAM,OACrD;AAAA,MAAA,GACF;AAAA,MACAD,2BAAA;AAAA,QAACE,eAAA;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS;AAAA,UACT,iBAAe;AAAA,UACd,GAAG;AAAA,UAEH,UAAA,wCAAUC,gBAAG,IAAA,EAAA,MAAK,QAAO,IAAKH,2BAAA,IAACI,gBAAK,MAAA,EAAA,MAAK,OAAO,CAAA;AAAA,QAAA;AAAA,MACnD;AAAA,IAAA,GACF;AAAA,IACC,8CACE,OAAI,EAAA,WAAW,QAAQ,sBACtB,UAAAJ,2BAAAA,IAACC,eAAAA,cAAc,EAAA,UAAA,YAAA,CAAY,EAC7B,CAAA;AAAA,IAED,yCACE,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA,MAAM,IAAI,CAAC,QACVD,2BAAA;AAAA,MAACK,0BAAA;AAAA,MAAA;AAAA,QAEE,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,MAFC,IAAI;AAAA,IAIZ,CAAA,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.styles.cjs","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvFlowSidebarGroup\",\n  {\n    root: {\n      padding: theme.space.sm,\n      borderRadius: theme.radii.round,\n      borderWidth: \"1px\",\n      borderTopWidth: \"3px\",\n    },\n    titleContainer: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n    },\n    labelContainer: {\n      display: \"flex\",\n      alignItems: \"center\",\n    },\n    icon: { paddingRight: theme.space.xs },\n    descriptionContainer: {\n      padding: `${theme.space.xs} 0 ${theme.space.sm} calc(32px + ${theme.space.xs})`,\n    },\n    itemsContainer: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: theme.space.xs,\n      paddingLeft: theme.space.sm,\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","borderRadius","radii","round","borderWidth","borderTopWidth","titleContainer","display","justifyContent","labelContainer","alignItems","icon","paddingRight","xs","descriptionContainer","itemsContainer","flexDirection","gap","paddingLeft"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAC3C,sBACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAASC,eAAAA,MAAMC,MAAMC;AAAAA,IACrBC,cAAcH,eAAAA,MAAMI,MAAMC;AAAAA,IAC1BC,aAAa;AAAA,IACbC,gBAAgB;AAAA,EAClB;AAAA,EACAC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,gBAAgB;AAAA,IACdF,SAAS;AAAA,IACTG,YAAY;AAAA,EACd;AAAA,EACAC,MAAM;AAAA,IAAEC,cAAcd,eAAAA,MAAMC,MAAMc;AAAAA,EAAG;AAAA,EACrCC,sBAAsB;AAAA,IACpBjB,SAAU,GAAEC,eAAAA,MAAMC,MAAMc,EAAG,MAAKf,eAAAA,MAAMC,MAAMC,EAAG,gBAAeF,eAAAA,MAAMC,MAAMc,EAAG;AAAA,EAC/E;AAAA,EACAE,gBAAgB;AAAA,IACdR,SAAS;AAAA,IACTS,eAAe;AAAA,IACfC,KAAKnB,eAAAA,MAAMC,MAAMc;AAAAA,IACjBK,aAAapB,eAAAA,MAAMC,MAAMC;AAAAA,EAC3B;AACF,CACF;;;"}
+{"version":3,"file":"SidebarGroup.styles.cjs","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvFlowSidebarGroup\",\n  {\n    root: {\n      padding: theme.space.sm,\n      borderRadius: theme.radii.round,\n      borderWidth: \"1px\",\n      borderTopWidth: \"3px\",\n    },\n    titleContainer: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n    },\n    labelContainer: {\n      display: \"flex\",\n      alignItems: \"center\",\n    },\n    icon: { paddingRight: theme.space.xs },\n    descriptionContainer: {\n      padding: `${theme.space.xs} 0 ${theme.space.sm} calc(32px + ${theme.space.xs})`,\n    },\n    itemsContainer: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: theme.space.xs,\n      paddingLeft: theme.space.sm,\n    },\n  }\n);\n"],"names":["createClasses","theme"],"mappings":";;;AAEa,MAAA,EAAE,eAAe,WAAA,IAAeA,eAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAASC,eAAAA,MAAM,MAAM;AAAA,MACrB,cAAcA,eAAAA,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,cAAcA,qBAAM,MAAM,GAAG;AAAA,IACrC,sBAAsB;AAAA,MACpB,SAAS,GAAGA,eAAAA,MAAM,MAAM,EAAE,MAAMA,eAAAA,MAAM,MAAM,EAAE,gBAAgBA,eAAAA,MAAM,MAAM,EAAE;AAAA,IAC9E;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAKA,eAAAA,MAAM,MAAM;AAAA,MACjB,aAAaA,eAAAA,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AACF;;;"}

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

@@ -15,13 +15,7 @@ const HvFlowDraggableSidebarGroupItem = ({
 }) => {
   const itemRef = React.useRef(null);
   const elementId = uikitReactCore.useUniqueId(id, `hvFlowDraggableItem-${type}`);
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    isDragging,
-    transform
-  } = core.useDraggable({
+  const { attributes, listeners, setNodeRef, isDragging, transform } = core.useDraggable({
     id: elementId,
     data: {
       hvFlow: {
@@ -41,7 +35,18 @@ const HvFlowDraggableSidebarGroupItem = ({
   const style = transform ? {
     transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
   } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, { ref: forkedRef, style, label, isDragging, ...listeners, ...attributes, ...others });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SidebarGroupItem.HvFlowSidebarGroupItem,
+    {
+      ref: forkedRef,
+      style,
+      label,
+      isDragging,
+      ...listeners,
+      ...attributes,
+      ...others
+    }
+  );
 };
 exports.HvFlowDraggableSidebarGroupItem = HvFlowDraggableSidebarGroupItem;
 //# sourceMappingURL=DraggableSidebarGroupItem.cjs.map