@hitachivantara/uikit-react-lab 5.34.2 → 5.35.1

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","sources":["../../../src/Flow/Flow.tsx"],"sourcesContent":["import {\n  DndContext,\n  DndContextProps,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvFlowNodeAction, HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\n\nexport interface HvFlowProps<\n  NodeGroups extends keyof any = string,\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any,\n> extends HvDroppableFlowProps<NodeType, NodeData> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups, NodeData>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\n  /**\n   * Dnd Kit context props. This should be used for accessibility purposes.\n   *\n   * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n   */\n  dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/**\n * Flow component to build interactive node-based UIs.\n *\n * This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n *\n * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/lab-flow-usage--docs) to learn more about this component.\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n  nodeTypes,\n  nodeGroups,\n  sidebar,\n  defaultActions,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor),\n  );\n\n  // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n  // HvFlowContext is our custom internal context.\n  return (\n    <ReactFlowProvider>\n      <HvFlowProvider\n        nodeGroups={nodeGroups}\n        nodeTypes={nodeTypes}\n        defaultActions={defaultActions}\n      >\n        <DndContext\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA8CO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,UAAU;AAAA,IACd,UAAU,aAAa;AAAA,IACvB,UAAU,cAAc;AAAA,EAAA;AAK1B,6BACG,mBACC,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,CAAC,qBAAqB;AAAA,UAChC,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAC,oBAAA,iBAAA,EAAiB,GAAG,QAAQ;AAAA,YAC5B;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Flow.js","sources":["../../../src/Flow/Flow.tsx"],"sourcesContent":["import {\n  DndContext,\n  DndContextProps,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvFlowNodeAction, HvFlowNodeGroups } from \"./types\";\n\nexport interface HvFlowProps<\n  NodeGroups extends keyof any = string,\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any,\n> extends HvDroppableFlowProps<NodeType, NodeData> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\n  /**\n   * Dnd Kit context props. This should be used for accessibility purposes.\n   *\n   * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n   */\n  dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/**\n * Flow component to build interactive node-based UIs.\n *\n * This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n *\n * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/lab-flow-usage--docs) to learn more about this component.\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n  nodeGroups,\n  sidebar,\n  defaultActions,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor),\n  );\n\n  // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n  // HvFlowContext is our custom internal context.\n  return (\n    <ReactFlowProvider>\n      <HvFlowProvider nodeGroups={nodeGroups} defaultActions={defaultActions}>\n        <DndContext\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA4CO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,UAAU;AAAA,IACd,UAAU,aAAa;AAAA,IACvB,UAAU,cAAc;AAAA,EAAA;AAK1B,SACG,oBAAA,mBAAA,EACC,UAAC,oBAAA,gBAAA,EAAe,YAAwB,gBACtC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,CAAC,qBAAqB;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,iBAAA,EAAiB,GAAG,QAAQ;AAAA,QAC5B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAEL,CAAA,EACF,CAAA;AAEJ;"}

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

@@ -4,20 +4,18 @@ import { HvFlowNodeMetaProvider } from "./NodeMetaContext.js";
 const HvFlowContext = createContext({});
 const HvFlowProvider = ({
   nodeGroups,
-  nodeTypes,
   defaultActions,
   children
 }) => {
   const [expandedNodeGroups, setExpandedNodeGroups] = useState([]);
   const value = useMemo(
     () => ({
-      nodeTypes,
       nodeGroups,
       defaultActions,
       expandedNodeGroups,
       setExpandedNodeGroups
     }),
-    [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups]
+    [nodeGroups, defaultActions, expandedNodeGroups]
   );
   return /* @__PURE__ */ jsx(HvFlowNodeMetaProvider, { children: /* @__PURE__ */ jsx(HvFlowContext.Provider, { value, children }) });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"FlowContext.js","sources":["../../../../src/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n  createContext,\n  Dispatch,\n  SetStateAction,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { HvFlowNodeAction, HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\nimport { HvFlowNodeMetaProvider } from \"./NodeMetaContext\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes groups expanded on sidebar. */\n  expandedNodeGroups?: string[];\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\n  /** Function to set `expandedNodeGroups`. */\n  setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\n  /** Children. */\n  children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n  nodeGroups,\n  nodeTypes,\n  defaultActions,\n  children,\n}: HvFlowProviderProps) => {\n  const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n  const value = useMemo(\n    () => ({\n      nodeTypes,\n      nodeGroups,\n      defaultActions,\n      expandedNodeGroups,\n      setExpandedNodeGroups,\n    }),\n    [nodeTypes, nodeGroups, defaultActions, expandedNodeGroups],\n  );\n\n  return (\n    <HvFlowNodeMetaProvider>\n      <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n    </HvFlowNodeMetaProvider>\n  );\n};\n"],"names":[],"mappings":";;;AAwBa,MAAA,gBAAgB,cAAkC,EAAE;AAa1D,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAmB,CAAE,CAAA;AAEzE,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,WAAW,YAAY,gBAAgB,kBAAkB;AAAA,EAAA;AAI1D,SAAA,oBAAC,0BACC,UAAC,oBAAA,cAAc,UAAd,EAAuB,OAAe,SAAS,CAAA,EAClD,CAAA;AAEJ;"}
+{"version":3,"file":"FlowContext.js","sources":["../../../../src/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n  createContext,\n  Dispatch,\n  SetStateAction,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { HvFlowNodeAction, HvFlowNodeGroups } from \"../types\";\nimport { HvFlowNodeMetaProvider } from \"./NodeMetaContext\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes groups expanded on sidebar. */\n  expandedNodeGroups?: string[];\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\n  /** Function to set `expandedNodeGroups`. */\n  setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\n  /** Children. */\n  children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n  nodeGroups,\n  defaultActions,\n  children,\n}: HvFlowProviderProps) => {\n  const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n  const value = useMemo(\n    () => ({\n      nodeGroups,\n      defaultActions,\n      expandedNodeGroups,\n      setExpandedNodeGroups,\n    }),\n    [nodeGroups, defaultActions, expandedNodeGroups],\n  );\n\n  return (\n    <HvFlowNodeMetaProvider>\n      <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n    </HvFlowNodeMetaProvider>\n  );\n};\n"],"names":[],"mappings":";;;AAsBa,MAAA,gBAAgB,cAAkC,EAAE;AAW1D,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAmB,CAAE,CAAA;AAEzE,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY,gBAAgB,kBAAkB;AAAA,EAAA;AAI/C,SAAA,oBAAC,0BACC,UAAC,oBAAA,cAAc,UAAd,EAAuB,OAAe,SAAS,CAAA,EAClD,CAAA;AAEJ;"}

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

@@ -1,6 +1,5 @@
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
-import { css } from "@emotion/css";
 import { useLabels, theme, HvTooltip, HvButton, HvTypography, HvInlineEditor, HvActionsGeneric } from "@hitachivantara/uikit-react-core";
 import { Info, Up, Down } from "@hitachivantara/uikit-react-icons";
 import { HvFlowBaseNode } from "./BaseNode.js";
@@ -17,7 +16,6 @@ const HvFlowNode = ({
   id,
   type,
   headerItems,
-  description,
   actions,
   actionCallback,
   // TODO - remove in v6
@@ -26,34 +24,38 @@ const HvFlowNode = ({
   expanded = false,
   actionsIconOnly = true,
   params,
-  nodeDefaults,
   classes: classesProp,
   labels: labelsProps,
   children,
   expandParamsButtonProps,
   disableInlineEdit,
+  title: titleProp,
+  subtitle: subtitleProp,
+  description,
+  groupId,
+  color: colorProp,
+  icon: iconProp,
   ...props
 }) => {
   const { classes } = useClasses(classesProp);
-  const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const [showParams, setShowParams] = useState(expanded);
+  const { nodeGroups, defaultActions } = useFlowContext();
+  const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const node = useFlowNode();
   const { setNodeData } = useFlowNodeUtils();
-  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();
-  const subtitle = node?.data.customNodeLabel || nodeTypes?.[type].meta?.label || nodeDefaults?.subTitle;
-  const groupId = nodeTypes?.[type].meta?.groupId;
   const inlineEditorWidth = actions === void 0 || Array.isArray(actions) && actions.length === 0 || maxVisibleActions === 0 ? "100%" : `calc(200px - calc(${maxVisibleActions} * 32px + ${theme.spacing(2)}))`;
-  const group = groupId && nodeGroups && nodeGroups[groupId] || void 0;
-  const groupLabel = group?.label || nodeDefaults?.title;
-  const icon = group?.icon || nodeDefaults?.icon;
-  const color = group?.color || nodeDefaults?.color;
+  const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
+  const title = titleProp || nodeGroup?.label;
+  const icon = iconProp || nodeGroup?.icon;
+  const color = colorProp || nodeGroup?.color;
+  const subtitle = subtitleProp || node?.data.nodeLabel;
   const hasParams = !!(params && params.length > 0);
   return /* @__PURE__ */ jsxs(
     HvFlowBaseNode,
     {
       id,
       type,
-      title: groupLabel,
+      title,
       icon,
       color,
       nodeActions: defaultActions,
@@ -82,14 +84,12 @@ const HvFlowNode = ({
             {
               defaultValue: subtitle,
               showIcon: true,
+              style: { width: inlineEditorWidth },
               classes: {
                 root: classes.inlineEditRoot,
-                button: classes.inlineEditButton,
-                inputRoot: css({
-                  width: inlineEditorWidth
-                })
+                button: classes.inlineEditButton
               },
-              onBlur: (evt, value) => setNodeData((prev) => ({ ...prev, customNodeLabel: value }))
+              onBlur: (evt, value) => setNodeData((prev) => ({ ...prev, nodeLabel: value }))
             }
           )),
           actions && /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { css } from \"@emotion/css\";\nimport {\n  ExtractNames,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvInlineEditor,\n  HvTooltip,\n  HvTypography,\n  theme,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode, useFlowNodeUtils } from \"../hooks\";\nimport { HvFlowNodeParam } from \"../types\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport { ParamRenderer } from \"./Parameters\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowNodeDefaults = {\n  title?: string;\n  subTitle?: string;\n  color?: string;\n  icon?: React.ReactNode;\n};\n\nconst DEFAULT_LABELS = {\n  collapseLabel: \"Collapse\",\n  expandLabel: \"Expand\",\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n  /** Node description. */\n  description?: string;\n  /** Node actions. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Node action callback.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"]; // TODO - remove in v6\n  /** Node action callback. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** Whether the actions should be all icon buttons when visible. @default true */\n  actionsIconOnly?: HvActionsGenericProps[\"iconOnly\"];\n  /** Node maximum number of actions visible. */\n  maxVisibleActions?: HvActionsGenericProps[\"maxVisibleActions\"];\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  /** Labels used on the node. */\n  labels?: HvFlowBaseNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n  /** Remove the ability to customize the label of the Node */\n  disableInlineEdit?: boolean;\n}\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  description,\n  actions,\n  actionCallback, // TODO - remove in v6\n  onAction,\n  maxVisibleActions = 1,\n  expanded = false,\n  actionsIconOnly = true,\n  params,\n  nodeDefaults,\n  classes: classesProp,\n  labels: labelsProps,\n  children,\n  expandParamsButtonProps,\n  disableInlineEdit,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const [showParams, setShowParams] = useState(expanded);\n\n  const node = useFlowNode();\n\n  const { setNodeData } = useFlowNodeUtils();\n\n  const { nodeGroups, nodeTypes, defaultActions } = useFlowContext();\n\n  const subtitle =\n    node?.data.customNodeLabel ||\n    nodeTypes?.[type].meta?.label ||\n    nodeDefaults?.subTitle;\n  const groupId = nodeTypes?.[type].meta?.groupId;\n\n  const inlineEditorWidth =\n    actions === undefined ||\n    (Array.isArray(actions) && actions.length === 0) ||\n    maxVisibleActions === 0\n      ? \"100%\"\n      : `calc(200px - calc(${maxVisibleActions} * 32px + ${theme.spacing(2)}))`;\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 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      nodeActions={defaultActions}\n      classes={classes}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={description}>\n              <Info color=\"base_dark\" />\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={\n                showParams ? labels?.collapseLabel : labels?.expandLabel\n              }\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up color=\"base_dark\" />\n              ) : (\n                <Down color=\"base_dark\" />\n              )}\n            </HvButton>\n          )}\n        </>\n      }\n      labels={labels as HvFlowNodeProps[\"labels\"]}\n      {...props}\n    >\n      {(subtitle || actions) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle &&\n            (disableInlineEdit ? (\n              <HvTypography className={classes.subtitle}>\n                {subtitle}\n              </HvTypography>\n            ) : (\n              <HvInlineEditor\n                defaultValue={subtitle}\n                showIcon\n                classes={{\n                  root: classes.inlineEditRoot,\n                  button: classes.inlineEditButton,\n                  inputRoot: css({\n                    width: inlineEditorWidth,\n                  }),\n                }}\n                onBlur={(evt, value) =>\n                  setNodeData((prev) => ({ ...prev, customNodeLabel: value }))\n                }\n              />\n            ))}\n          {actions && (\n            <HvActionsGeneric\n              className={classes.actions}\n              classes={{ button: classes.actionsButton }}\n              actions={actions}\n              actionsCallback={actionCallback}\n              onAction={onAction}\n              maxVisibleActions={maxVisibleActions}\n              iconOnly={actionsIconOnly}\n            />\n          )}\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Node.js","sources":["../../../../src/Flow/Node/Node.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  ExtractNames,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n  HvButton,\n  HvButtonProps,\n  HvInlineEditor,\n  HvTooltip,\n  HvTypography,\n  theme,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Info, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext, useFlowNode, useFlowNodeUtils } from \"../hooks\";\nimport { HvFlowNodeParam } from \"../types\";\nimport { HvFlowBaseNode, HvFlowBaseNodeProps } from \"./BaseNode\";\nimport { staticClasses, useClasses } from \"./Node.styles\";\nimport { ParamRenderer } from \"./Parameters\";\n\nexport { staticClasses as flowNodeClasses };\n\nexport type HvFlowNodeClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  collapseLabel: \"Collapse\",\n  expandLabel: \"Expand\",\n};\n\nexport interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {\n  /** Node description. */\n  description?: string;\n  /** Node actions. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Node action callback.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"]; // TODO - remove in v6\n  /** Node action callback. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** Whether the actions should be all icon buttons when visible. @default true */\n  actionsIconOnly?: HvActionsGenericProps[\"iconOnly\"];\n  /** Node maximum number of actions visible. */\n  maxVisibleActions?: HvActionsGenericProps[\"maxVisibleActions\"];\n  /** Node subtitle - this is typically the node \"name\" */\n  subtitle?: string;\n  /** Node group ID */\n  groupId?: string;\n  /** Node expanded */\n  expanded?: boolean;\n  /** Node parameters */\n  params?: HvFlowNodeParam[];\n  /** Props to be passed to the expand parameters button. */\n  expandParamsButtonProps?: HvButtonProps;\n  /** Labels used on the node. */\n  labels?: HvFlowBaseNodeProps[\"labels\"] & Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowNodeClasses;\n  /** Remove the ability to customize the label of the Node */\n  disableInlineEdit?: boolean;\n}\n\nexport const HvFlowNode = ({\n  id,\n  type,\n  headerItems,\n  actions,\n  actionCallback, // TODO - remove in v6\n  onAction,\n  maxVisibleActions = 1,\n  expanded = false,\n  actionsIconOnly = true,\n  params,\n  classes: classesProp,\n  labels: labelsProps,\n  children,\n  expandParamsButtonProps,\n  disableInlineEdit,\n  title: titleProp,\n  subtitle: subtitleProp,\n  description,\n  groupId,\n  color: colorProp,\n  icon: iconProp,\n  ...props\n}: HvFlowNodeProps<unknown>) => {\n  const { classes } = useClasses(classesProp);\n  const [showParams, setShowParams] = useState(expanded);\n  const { nodeGroups, defaultActions } = useFlowContext();\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n  const node = useFlowNode();\n  const { setNodeData } = useFlowNodeUtils();\n\n  const inlineEditorWidth =\n    actions === undefined ||\n    (Array.isArray(actions) && actions.length === 0) ||\n    maxVisibleActions === 0\n      ? \"100%\"\n      : `calc(200px - calc(${maxVisibleActions} * 32px + ${theme.spacing(2)}))`;\n\n  const nodeGroup = (groupId && nodeGroups && nodeGroups[groupId]) || undefined;\n\n  const title = titleProp || nodeGroup?.label;\n  const icon = iconProp || nodeGroup?.icon;\n  const color = colorProp || nodeGroup?.color;\n  const subtitle = subtitleProp || node?.data.nodeLabel;\n\n  const hasParams = !!(params && params.length > 0);\n\n  return (\n    <HvFlowBaseNode\n      id={id}\n      type={type}\n      title={title}\n      icon={icon}\n      color={color}\n      nodeActions={defaultActions}\n      classes={classes}\n      headerItems={\n        <>\n          {headerItems}\n          {description && (\n            <HvTooltip title={description}>\n              <Info color=\"base_dark\" />\n            </HvTooltip>\n          )}\n          {hasParams && (\n            <HvButton\n              icon\n              overrideIconColors={false}\n              onClick={() => setShowParams((p) => !p)}\n              aria-label={\n                showParams ? labels?.collapseLabel : labels?.expandLabel\n              }\n              {...expandParamsButtonProps}\n            >\n              {showParams ? (\n                <Up color=\"base_dark\" />\n              ) : (\n                <Down color=\"base_dark\" />\n              )}\n            </HvButton>\n          )}\n        </>\n      }\n      labels={labels as HvFlowNodeProps[\"labels\"]}\n      {...props}\n    >\n      {(subtitle || actions) && (\n        <div className={classes.subtitleContainer}>\n          {subtitle &&\n            (disableInlineEdit ? (\n              <HvTypography className={classes.subtitle}>\n                {subtitle}\n              </HvTypography>\n            ) : (\n              <HvInlineEditor\n                defaultValue={subtitle}\n                showIcon\n                style={{ width: inlineEditorWidth }}\n                classes={{\n                  root: classes.inlineEditRoot,\n                  button: classes.inlineEditButton,\n                }}\n                onBlur={(evt, value) =>\n                  setNodeData((prev) => ({ ...prev, nodeLabel: value }))\n                }\n              />\n            ))}\n          {actions && (\n            <HvActionsGeneric\n              className={classes.actions}\n              classes={{ button: classes.actionsButton }}\n              actions={actions}\n              actionsCallback={actionCallback}\n              onAction={onAction}\n              maxVisibleActions={maxVisibleActions}\n              iconOnly={actionsIconOnly}\n            />\n          )}\n        </div>\n      )}\n      {children}\n      {showParams && params && (\n        <div className={classes.paramsContainer}>\n          <ParamRenderer params={params} data={node?.data} />\n        </div>\n      )}\n    </HvFlowBaseNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,MAAM,iBAAiB;AAAA,EACrB,eAAe;AAAA,EACf,aAAa;AACf;AAqCO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,MAAM;AAAA,EACN,GAAG;AACL,MAAgC;AAC9B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ;AACrD,QAAM,EAAE,YAAY,eAAe,IAAI,eAAe;AAChD,QAAA,SAAS,UAAU,gBAAgB,WAAW;AACpD,QAAM,OAAO;AACP,QAAA,EAAE,gBAAgB;AAExB,QAAM,oBACJ,YAAY,UACX,MAAM,QAAQ,OAAO,KAAK,QAAQ,WAAW,KAC9C,sBAAsB,IAClB,SACA,qBAAqB,iBAAiB,aAAa,MAAM,QAAQ,CAAC,CAAC;AAEzE,QAAM,YAAa,WAAW,cAAc,WAAW,OAAO,KAAM;AAE9D,QAAA,QAAQ,aAAa,WAAW;AAChC,QAAA,OAAO,YAAY,WAAW;AAC9B,QAAA,QAAQ,aAAa,WAAW;AAChC,QAAA,WAAW,gBAAgB,MAAM,KAAK;AAE5C,QAAM,YAAY,CAAC,EAAE,UAAU,OAAO,SAAS;AAG7C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,aAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAA;AAAA,QACA,mCACE,WAAU,EAAA,OAAO,aAChB,UAAC,oBAAA,MAAA,EAAK,OAAM,YAAA,CAAY,EAC1B,CAAA;AAAA,QAED,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,oBAAoB;AAAA,YACpB,SAAS,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;AAAA,YACtC,cACE,aAAa,QAAQ,gBAAgB,QAAQ;AAAA,YAE9C,GAAG;AAAA,YAEH,UAAA,iCACE,IAAG,EAAA,OAAM,aAAY,IAEtB,oBAAC,MAAK,EAAA,OAAM,YAAY,CAAA;AAAA,UAAA;AAAA,QAE5B;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,YAAY,YACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,mBACrB,UAAA;AAAA,UAAA,aACE,oBACE,oBAAA,cAAA,EAAa,WAAW,QAAQ,UAC9B,oBACH,IAEA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,cAAc;AAAA,cACd,UAAQ;AAAA,cACR,OAAO,EAAE,OAAO,kBAAkB;AAAA,cAClC,SAAS;AAAA,gBACP,MAAM,QAAQ;AAAA,gBACd,QAAQ,QAAQ;AAAA,cAClB;AAAA,cACA,QAAQ,CAAC,KAAK,UACZ,YAAY,CAAC,UAAU,EAAE,GAAG,MAAM,WAAW,MAAQ,EAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAI5D,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAS,EAAE,QAAQ,QAAQ,cAAc;AAAA,cACzC;AAAA,cACA,iBAAiB;AAAA,cACjB;AAAA,cACA;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA,GAEJ;AAAA,QAED;AAAA,QACA,cAAc,UACZ,oBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA,oBAAC,eAAc,EAAA,QAAgB,MAAM,MAAM,KAAM,CAAA,GACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -1,13 +1,11 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useMemo, useState, useEffect } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { useDroppable, useDndMonitor, DragOverlay } from "@dnd-kit/core";
 import { restrictToWindowEdges } from "@dnd-kit/modifiers";
-import { useDebounceCallback } from "usehooks-ts";
 import { useLabels, useUniqueId, HvDrawer, HvTypography, HvInput } from "@hitachivantara/uikit-react-core";
 import { Add } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./Sidebar.styles.js";
 import { staticClasses } from "./Sidebar.styles.js";
-import { buildGroups } from "./utils.js";
 import { HvFlowSidebarGroup } from "./SidebarGroup/SidebarGroup.js";
 import { HvFlowSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/SidebarGroupItem.js";
 import { useFlowContext } from "../hooks/useFlowContext.js";
@@ -24,30 +22,20 @@ const HvFlowSidebar = ({
   description,
   anchor = "right",
   buttonTitle = "Close",
+  flatten = false,
   classes: classesProp,
   labels: labelsProps,
   dragOverlayProps,
-  defaultGroupProps,
   ...others
 }) => {
   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);
-  useEffect(() => {
-    setGroups(unfilteredGroups);
-  }, [unfilteredGroups]);
+  const { nodeGroups, setExpandedNodeGroups } = useFlowContext();
+  const [filterValue, setFilterValue] = useState("");
+  const [draggingLabel, setDraggingLabel] = useState();
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const drawerElementId = useUniqueId(id);
-  const groupsElementId = useUniqueId(id);
-  const { setNodeRef } = useDroppable({
-    id: drawerElementId
-  });
+  const groupsElementId = useUniqueId();
+  const { setNodeRef } = useDroppable({ id: drawerElementId });
   const handleDragStart = (event) => {
     if (event.active.data.current?.hvFlow) {
       setDraggingLabel(event.active.data.current.hvFlow?.label);
@@ -60,34 +48,29 @@ const HvFlowSidebar = ({
     onDragEnd: handleDragEnd,
     onDragStart: handleDragStart
   });
-  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 filteredGroups = useMemo(() => {
+    if (!filterValue || !nodeGroups)
+      return nodeGroups || {};
+    return filterValue ? Object.entries(nodeGroups).reduce(
+      (acc, [groupId, group]) => {
+        const filteredItems = (group.items || []).filter(
+          (item) => item.label.toLowerCase().includes(filterValue.toLowerCase())
         );
-        const nodesCount = filteredNodes.length;
-        if (nodesCount > 0) {
-          acc[curr[0]] = {
-            ...curr[1],
-            nodes: filteredNodes
+        const itemsCount = Object.keys(filteredItems).length;
+        if (itemsCount > 0) {
+          acc[groupId] = {
+            ...group,
+            items: filteredItems
           };
         }
         return acc;
-      }, {}) : unfilteredGroups;
-      setGroups(gps);
-      setExpandedNodeGroups?.(value ? Object.keys(gps) : []);
-    } else if (nodeTypes) {
-      const filteredNodeTypes = {};
-      for (const [key, node] of Object.entries(nodeTypes)) {
-        if (node.meta?.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())) {
-          filteredNodeTypes[key] = node;
-        }
-      }
-      setNdTypes(value ? filteredNodeTypes : nodeTypes);
-    }
-  };
-  const handleDebouncedSearch = useDebounceCallback(handleSearch, 500);
+      },
+      {}
+    ) : nodeGroups;
+  }, [filterValue, nodeGroups]);
+  useEffect(() => {
+    setExpandedNodeGroups?.(filterValue ? Object.keys(filteredGroups) : []);
+  }, [filterValue, filteredGroups, setExpandedNodeGroups]);
   return /* @__PURE__ */ jsxs(
     HvDrawer,
     {
@@ -117,39 +100,36 @@ const HvFlowSidebar = ({
                 "aria-label": labels?.searchAriaLabel,
                 "aria-controls": groupsElementId,
                 "aria-owns": groupsElementId,
-                onChange: handleDebouncedSearch,
+                onChange: (evt, val) => setFilterValue(val.trim()),
                 inputProps: { autoComplete: "off" }
               }
             ),
-            nodeGroups ? /* @__PURE__ */ jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => {
+            /* @__PURE__ */ jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(filteredGroups).map(([groupId, group]) => {
+              if (flatten) {
+                return (group.items || []).map((item, i) => /* @__PURE__ */ jsx(
+                  HvFlowDraggableSidebarGroupItem,
+                  {
+                    "aria-roledescription": labels?.itemAriaRoleDescription,
+                    ...item
+                  },
+                  `${item.nodeType}-${i}`
+                ));
+              }
               return /* @__PURE__ */ jsx(
                 HvFlowSidebarGroup,
                 {
-                  id: obj[0],
+                  id: groupId,
                   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
+                  ...group
                 },
-                obj[0]
+                groupId
               );
-            })
+            }) })
           ] })
         ] }),
         /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToWindowEdges], ...dragOverlayProps, children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport {\n  DndContextProps,\n  DragOverlay,\n  DragOverlayProps,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport { useDebounceCallback } from \"usehooks-ts\";\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 { useFlowContext } from \"../hooks\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\nimport { buildGroups } from \"./utils\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n  extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n  /** Sidebar title. */\n  title?: string;\n  /** Sidebar description. */\n  description?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarClasses;\n  /** Labels used on the sidebar. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\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 = {\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);\n  const groupsElementId = useUniqueId(id);\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 = useDebounceCallback(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 />\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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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\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  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useFlowContext } from \"../hooks\";\nimport { HvFlowNodeGroups } from \"../types\";\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowSidebarGroupItem,\n} from \"./SidebarGroup/SidebarGroupItem\";\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  /** Flatten sidebar items */\n  flatten?: boolean;\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?: Partial<typeof DEFAULT_LABELS>;\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}\n\nconst DEFAULT_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  flatten = false,\n  classes: classesProp,\n  labels: labelsProps,\n  dragOverlayProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n  const [filterValue, setFilterValue] = useState(\"\");\n  const [draggingLabel, setDraggingLabel] = useState<string>();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id);\n  const groupsElementId = useUniqueId();\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({ id: drawerElementId });\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 filteredGroups = useMemo(() => {\n    if (!filterValue || !nodeGroups) return nodeGroups || {};\n\n    return filterValue\n      ? Object.entries(nodeGroups).reduce<HvFlowNodeGroups>(\n          (acc, [groupId, group]) => {\n            // Filter items by search\n            const filteredItems = (group.items || []).filter((item) =>\n              item.label.toLowerCase().includes(filterValue.toLowerCase()),\n            );\n            const itemsCount = Object.keys(filteredItems).length;\n\n            // Only show groups with nodes\n            if (itemsCount > 0) {\n              acc[groupId] = {\n                ...group,\n                items: filteredItems,\n              };\n            }\n\n            return acc;\n          },\n          {},\n        )\n      : nodeGroups;\n  }, [filterValue, nodeGroups]);\n\n  useEffect(() => {\n    setExpandedNodeGroups?.(filterValue ? Object.keys(filteredGroups) : []);\n  }, [filterValue, filteredGroups, setExpandedNodeGroups]);\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 />\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={(evt, val) => setFilterValue(val.trim())}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          <ul id={groupsElementId} className={classes.groupsContainer}>\n            {Object.entries(filteredGroups).map(([groupId, group]) => {\n              if (flatten) {\n                return (group.items || []).map((item, i) => (\n                  <HvFlowDraggableSidebarGroupItem\n                    key={`${item.nodeType}-${i}`}\n                    aria-roledescription={labels?.itemAriaRoleDescription}\n                    {...item}\n                  />\n                ));\n              }\n\n              return (\n                <HvFlowSidebarGroup\n                  key={groupId}\n                  id={groupId}\n                  expandButtonProps={{\n                    \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                  }}\n                  itemProps={{\n                    \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                  }}\n                  {...group}\n                />\n              );\n            })}\n          </ul>\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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"}

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

@@ -16,9 +16,6 @@ const { staticClasses, useClasses } = createClasses("HvFlowSidebar", {
     flexDirection: "column",
     gap: theme.space.sm,
     listStyleType: "none"
-  },
-  nodeType: {
-    marginBottom: theme.space.xs
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.styles.js","sources":["../../../../src/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n  drawerPaper: { width: \"360px\" },\n  titleContainer: {\n    display: \"flex\",\n    padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n  },\n  contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n  description: { color: theme.colors.secondary_60 },\n  searchRoot: {\n    paddingTop: theme.space.sm,\n    paddingBottom: theme.space.sm,\n  },\n  groupsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.sm,\n    listStyleType: \"none\",\n  },\n  nodeType: {\n    marginBottom: theme.space.xs,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,aAAa,EAAE,OAAO,QAAQ;AAAA,EAC9B,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACA,kBAAkB,EAAE,SAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,IAAI,EAAE;AAAA,EAChE,aAAa,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EAChD,YAAY;AAAA,IACV,YAAY,MAAM,MAAM;AAAA,IACxB,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,eAAe;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,EAC5B;AACF,CAAC;"}
+{"version":3,"file":"Sidebar.styles.js","sources":["../../../../src/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n  drawerPaper: { width: \"360px\" },\n  titleContainer: {\n    display: \"flex\",\n    padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n  },\n  contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n  description: { color: theme.colors.secondary_60 },\n  searchRoot: {\n    paddingTop: theme.space.sm,\n    paddingBottom: theme.space.sm,\n  },\n  groupsContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space.sm,\n    listStyleType: \"none\",\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,aAAa,EAAE,OAAO,QAAQ;AAAA,EAC9B,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACA,kBAAkB,EAAE,SAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,IAAI,EAAE;AAAA,EAChE,aAAa,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EAChD,YAAY;AAAA,IACV,YAAY,MAAM,MAAM;AAAA,IACxB,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,eAAe;AAAA,EACjB;AACF,CAAC;"}

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

@@ -10,7 +10,7 @@ import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroupItem/DraggableSid
 const HvFlowSidebarGroup = ({
   id,
   label,
-  nodes,
+  items = [],
   color,
   description,
   icon,
@@ -21,19 +21,19 @@ const HvFlowSidebarGroup = ({
   const { classes, cx, css } = useClasses(classesProp);
   const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();
   const opened = useMemo(
-    () => !!expandedNodeGroups?.find((groupId) => groupId === id),
+    () => !!expandedNodeGroups?.find((group) => group === id),
     [expandedNodeGroups, id]
   );
   const handleClick = useCallback(() => {
     setExpandedNodeGroups?.(
-      (prev) => opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]
+      (prev) => opened ? prev.filter((group) => id !== group) : [...prev, id]
     );
   }, [id, opened, setExpandedNodeGroups]);
   return /* @__PURE__ */ jsxs("li", { className: cx(css({ borderColor: getColor(color) }), classes.root), children: [
     /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
       /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-        /* @__PURE__ */ jsx("div", { className: classes.icon, children: icon }),
-        /* @__PURE__ */ jsx(HvTypography, { component: "p", variant: "title4", children: nodes.length > 1 ? `${label} (${nodes.length})` : label })
+        /* @__PURE__ */ jsx("div", { className: classes.icon, role: "presentation", children: icon }),
+        /* @__PURE__ */ jsx(HvTypography, { component: "p", variant: "title4", children: Object.keys(items).length > 1 ? `${label} (${Object.keys(items).length})` : label })
       ] }),
       /* @__PURE__ */ jsx(
         HvButton,
@@ -47,13 +47,13 @@ const HvFlowSidebarGroup = ({
       )
     ] }),
     description && /* @__PURE__ */ jsx("div", { className: classes.descriptionContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: description }) }),
-    opened && /* @__PURE__ */ jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsx(
+    opened && /* @__PURE__ */ jsx("div", { className: classes.itemsContainer, children: Object.entries(items).map(([itemId, item]) => /* @__PURE__ */ jsx(
       HvFlowDraggableSidebarGroupItem,
       {
         ...itemProps,
-        ...obj
+        ...item
       },
-      obj.type
+      itemId
     )) })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { useFlowContext } from \"../../hooks\";\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\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}>{icon}</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 /> : <Down />}\n        </HvButton>\n      </div>\n      {description && (\n        <div className={classes.descriptionContainer}>\n          <HvTypography>{description}</HvTypography>\n        </div>\n      )}\n      {opened && (\n        <div className={classes.itemsContainer}>\n          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.type}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA2CO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,MAA+B;AAC7B,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,oBAAoB,sBAAsB,IAAI,eAAe;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,CAAC,CAAC,oBAAoB,KAAK,CAAC,YAAY,YAAY,EAAE;AAAA,IAC5D,CAAC,oBAAoB,EAAE;AAAA,EAAA;AAGnB,QAAA,cAAc,YAAY,MAAM;AACpC;AAAA,MAAwB,CAAC,SACvB,SAAS,KAAK,OAAO,CAAC,YAAY,OAAO,OAAO,IAAI,CAAC,GAAG,MAAM,EAAE;AAAA,IAAA;AAAA,EAEjE,GAAA,CAAC,IAAI,QAAQ,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAW,GAAG,IAAI,EAAE,aAAa,SAAS,KAAK,EAAE,CAAC,GAAG,QAAQ,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,QAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,QACnC,oBAAA,cAAA,EAAa,WAAU,KAAI,SAAQ,UACjC,UAAA,MAAM,SAAS,IAAI,GAAG,KAAK,KAAK,MAAM,MAAM,MAAM,OACrD;AAAA,MAAA,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS;AAAA,UACT,iBAAe;AAAA,UACd,GAAG;AAAA,UAEH,UAAS,SAAA,oBAAC,IAAG,CAAA,CAAA,wBAAM,MAAK,EAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,IAAA,GACF;AAAA,IACC,mCACE,OAAI,EAAA,WAAW,QAAQ,sBACtB,UAAA,oBAAC,cAAc,EAAA,UAAA,YAAA,CAAY,EAC7B,CAAA;AAAA,IAED,8BACE,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA,MAAM,IAAI,CAAC,QACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEE,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,MAFC,IAAI;AAAA,IAIZ,CAAA,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SidebarGroup.js","sources":["../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { useFlowContext } from \"../../hooks\";\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\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  items = [],\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((group) => group === id),\n    [expandedNodeGroups, id],\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((group) => id !== group) : [...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=\"presentation\">\n            {icon}\n          </div>\n          <HvTypography component=\"p\" variant=\"title4\">\n            {Object.keys(items).length > 1\n              ? `${label} (${Object.keys(items).length})`\n              : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up /> : <Down />}\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          {Object.entries(items).map(([itemId, item]) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={itemId}\n              {...itemProps}\n              {...item}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAiCO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,MAA+B;AAC7B,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,oBAAoB,sBAAsB,IAAI,eAAe;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,CAAC,CAAC,oBAAoB,KAAK,CAAC,UAAU,UAAU,EAAE;AAAA,IACxD,CAAC,oBAAoB,EAAE;AAAA,EAAA;AAGnB,QAAA,cAAc,YAAY,MAAM;AACpC;AAAA,MAAwB,CAAC,SACvB,SAAS,KAAK,OAAO,CAAC,UAAU,OAAO,KAAK,IAAI,CAAC,GAAG,MAAM,EAAE;AAAA,IAAA;AAAA,EAE7D,GAAA,CAAC,IAAI,QAAQ,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAW,GAAG,IAAI,EAAE,aAAa,SAAS,KAAK,EAAE,CAAC,GAAG,QAAQ,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAW,QAAQ,MAAM,MAAK,gBAChC,UACH,MAAA;AAAA,QACA,oBAAC,gBAAa,WAAU,KAAI,SAAQ,UACjC,UAAA,OAAO,KAAK,KAAK,EAAE,SAAS,IACzB,GAAG,KAAK,KAAK,OAAO,KAAK,KAAK,EAAE,MAAM,MACtC,MACN,CAAA;AAAA,MAAA,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS;AAAA,UACT,iBAAe;AAAA,UACd,GAAG;AAAA,UAEH,UAAS,SAAA,oBAAC,IAAG,CAAA,CAAA,wBAAM,MAAK,EAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,IAAA,GACF;AAAA,IACC,mCACE,OAAI,EAAA,WAAW,QAAQ,sBACtB,UAAA,oBAAC,cAAc,EAAA,UAAA,YAAA,CAAY,EAC7B,CAAA;AAAA,IAED,UACC,oBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA,OAAO,QAAQ,KAAK,EAAE,IAAI,CAAC,CAAC,QAAQ,IAAI,MACvC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEE,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,MAFC;AAAA,IAIR,CAAA,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

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

@@ -5,20 +5,20 @@ import { useForkRef } from "@mui/material/utils";
 import { useUniqueId } from "@hitachivantara/uikit-react-core";
 import { HvFlowSidebarGroupItem } from "./SidebarGroupItem.js";
 const HvFlowDraggableSidebarGroupItem = ({
-  id,
+  id: idProp,
   label,
-  type,
+  nodeType,
   data,
   ...others
 }) => {
   const itemRef = useRef(null);
-  const elementId = useUniqueId(id);
+  const id = useUniqueId(idProp);
   const { attributes, listeners, setNodeRef, isDragging, transform } = useDraggable({
-    id: elementId,
+    id,
     data: {
       hvFlow: {
         // Needed to know which item is being dragged and dropped
-        type,
+        type: nodeType,
         // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow
         label,
         // Item position: used to position the item when dropped

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

@@ -1 +1 @@
-{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useDraggable } from \"@dnd-kit/core\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps {\n  /** Item type. */\n  type: string;\n  /** Item data. */\n  data?: unknown;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  id,\n  label,\n  type,\n  data,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n  const elementId = useUniqueId(id);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id: elementId,\n      data: {\n        hvFlow: {\n          // Needed to know which item is being dragged and dropped\n          type,\n          // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n          label,\n          // Item position: used to position the item when dropped\n          x: itemRef.current?.getBoundingClientRect().x,\n          y: itemRef.current?.getBoundingClientRect().y,\n          // Data\n          data,\n        },\n      },\n    });\n\n  const forkedRef = useForkRef(itemRef, setNodeRef);\n\n  const style = transform\n    ? {\n        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n      }\n    : undefined;\n\n  return (\n    <HvFlowSidebarGroupItem\n      ref={forkedRef}\n      style={style}\n      label={label}\n      isDragging={isDragging}\n      {...listeners}\n      {...attributes}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,kCAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAU,OAAoB,IAAI;AAClC,QAAA,YAAY,YAAY,EAAE;AAEhC,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrD,aAAa;AAAA,IACX,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEG,QAAA,YAAY,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,EAEzD,IAAA;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useDraggable } from \"@dnd-kit/core\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowGroupItem } from \"../../../types\";\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps,\n    HvFlowGroupItem {}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  id: idProp,\n  label,\n  nodeType,\n  data,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n  const id = useUniqueId(idProp);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id,\n      data: {\n        hvFlow: {\n          // Needed to know which item is being dragged and dropped\n          type: nodeType,\n          // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n          label,\n          // Item position: used to position the item when dropped\n          x: itemRef.current?.getBoundingClientRect().x,\n          y: itemRef.current?.getBoundingClientRect().y,\n          // Data\n          data,\n        },\n      },\n    });\n\n  const forkedRef = useForkRef(itemRef, setNodeRef);\n\n  const style = transform\n    ? {\n        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n      }\n    : undefined;\n\n  return (\n    <HvFlowSidebarGroupItem\n      ref={forkedRef}\n      style={style}\n      label={label}\n      isDragging={isDragging}\n      {...listeners}\n      {...attributes}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,kCAAkC,CAAC;AAAA,EAC9C,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4C;AACpC,QAAA,UAAU,OAAoB,IAAI;AAClC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,EAAE,YAAY,WAAW,YAAY,YAAY,cACrD,aAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,QAAQ;AAAA;AAAA,QAEN,MAAM;AAAA;AAAA,QAEN;AAAA;AAAA,QAEA,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA,QAC5C,GAAG,QAAQ,SAAS,sBAAwB,EAAA;AAAA;AAAA,QAE5C;AAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AAEG,QAAA,YAAY,WAAW,SAAS,UAAU;AAEhD,QAAM,QAAQ,YACV;AAAA,IACE,WAAW,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,EAEzD,IAAA;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -4,33 +4,32 @@ import { HvTypography } from "@hitachivantara/uikit-react-core";
 import { Drag } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./SidebarGroupItem.styles.js";
 import { staticClasses } from "./SidebarGroupItem.styles.js";
-const HvFlowSidebarGroupItem = forwardRef(
-  ({
+const HvFlowSidebarGroupItem = forwardRef((props, ref) => {
+  const {
     label,
     isDragging,
     classes: classesProp,
     className,
     ...others
-  }, ref) => {
-    const { classes, cx } = useClasses(classesProp);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cx(
-          classes.root,
-          { [classes.dragging]: isDragging },
-          className
-        ),
-        ...others,
-        children: [
-          /* @__PURE__ */ jsx(HvTypography, { children: label }),
-          /* @__PURE__ */ jsx(Drag, {})
-        ]
-      }
-    );
-  }
-);
+  } = props;
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx(
+        classes.root,
+        { [classes.dragging]: isDragging },
+        className
+      ),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx(HvTypography, { children: label }),
+        /* @__PURE__ */ jsx(Drag, {})
+      ]
+    }
+  );
+});
 export {
   HvFlowSidebarGroupItem,
   staticClasses as flowSidebarGroupItemClasses

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Drag } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./SidebarGroupItem.styles\";\n\nexport { staticClasses as flowSidebarGroupItemClasses };\n\nexport type HvFlowSidebarGroupItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupItemProps extends HvBaseProps {\n  /** Item label. */\n  label: string;\n  /** Whether the item is being dragged. */\n  isDragging?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupItemClasses;\n}\n\nexport const HvFlowSidebarGroupItem = forwardRef<\n  HTMLDivElement,\n  HvFlowSidebarGroupItemProps\n>(\n  (\n    {\n      label,\n      isDragging,\n      classes: classesProp,\n      className,\n      ...others\n    }: HvFlowSidebarGroupItemProps,\n    ref,\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          classes.root,\n          { [classes.dragging]: isDragging },\n          className,\n        )}\n        {...others}\n      >\n        <HvTypography>{label}</HvTypography>\n        <Drag />\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,yBAAyB;AAAA,EAIpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,UACjC;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,gBAAc,UAAM,MAAA,CAAA;AAAA,8BACpB,MAAK,EAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACF;"}
+{"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Drag } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./SidebarGroupItem.styles\";\n\nexport { staticClasses as flowSidebarGroupItemClasses };\n\nexport type HvFlowSidebarGroupItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupItemProps extends HvBaseProps {\n  /** Item label. */\n  label: string;\n  /** Whether the item is being dragged. */\n  isDragging?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupItemClasses;\n}\n\nexport const HvFlowSidebarGroupItem = forwardRef<\n  HTMLDivElement,\n  HvFlowSidebarGroupItemProps\n>((props, ref) => {\n  const {\n    label,\n    isDragging,\n    classes: classesProp,\n    className,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        classes.root,\n        { [classes.dragging]: isDragging },\n        className,\n      )}\n      {...others}\n    >\n      <HvTypography>{label}</HvTypography>\n      <Drag />\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,yBAAyB,WAGpC,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,gBAAc,UAAM,MAAA,CAAA;AAAA,4BACpB,MAAK,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;"}