@hitachivantara/uikit-react-lab 5.12.1 → 5.13.0

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

@@ -28,6 +28,7 @@ const HvFlowSidebar = ({
   buttonTitle = "Close",
   classes: classesProp,
   labels: labelsProps,
+  dragOverlayProps,
   ...others
 }) => {
   const {
@@ -102,7 +103,7 @@ const HvFlowSidebar = ({
         }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { modifiers: [modifiers.restrictToWindowEdges], children: draggingLabel ? /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
+    /* @__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;

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\";\n\nimport debounce from \"lodash/debounce\";\n\nimport {\n  DndContextProps,\n  DragOverlay,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\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 { HvFlowSidebarGroupItem } 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  /** 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\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  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\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    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  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <>\n      <HvDrawer\n        BackdropComponent={undefined}\n        variant=\"persistent\"\n        classes={{\n          paper: classes.drawerPaper,\n        }}\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 variant=\"title3\">{title}</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            <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          </div>\n        </div>\n      </HvDrawer>\n      <DragOverlay modifiers={[restrictToWindowEdges]}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","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","handleDebouncedSearch","debounce","jsxs","Fragment","jsx","HvDrawer","paper","drawerPaper","titleContainer","Add","HvTypography","contentContainer","HvInput","searchRoot","autoComplete","groupsContainer","map","HvFlowSidebarGroup","DragOverlay","restrictToWindowEdges","HvFlowSidebarGroupItem"],"mappings":"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"}
+{"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 { HvFlowSidebarGroupItem } 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  /** 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}\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  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\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    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  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <>\n      <HvDrawer\n        BackdropComponent={undefined}\n        variant=\"persistent\"\n        classes={{\n          paper: classes.drawerPaper,\n        }}\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 variant=\"title3\">{title}</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            <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          </div>\n        </div>\n      </HvDrawer>\n      <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","dragOverlayProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","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","handleDebouncedSearch","debounce","jsxs","Fragment","jsx","HvDrawer","paper","drawerPaper","titleContainer","Add","HvTypography","contentContainer","HvInput","searchRoot","autoComplete","groupsContainer","map","HvFlowSidebarGroup","DragOverlay","restrictToWindowEdges","HvFlowSidebarGroupItem"],"mappings":"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"}

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

@@ -25,6 +25,7 @@ const HvFlowSidebar = ({
   buttonTitle = "Close",
   classes: classesProp,
   labels: labelsProps,
+  dragOverlayProps,
   ...others
 }) => {
   const {
@@ -99,7 +100,7 @@ const HvFlowSidebar = ({
         }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToWindowEdges], children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
+    /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToWindowEdges], ...dragOverlayProps, children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\n\nimport debounce from \"lodash/debounce\";\n\nimport {\n  DndContextProps,\n  DragOverlay,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\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 { HvFlowSidebarGroupItem } 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  /** 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\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  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\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    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  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <>\n      <HvDrawer\n        BackdropComponent={undefined}\n        variant=\"persistent\"\n        classes={{\n          paper: classes.drawerPaper,\n        }}\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 variant=\"title3\">{title}</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            <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          </div>\n        </div>\n      </HvDrawer>\n      <DragOverlay modifiers={[restrictToWindowEdges]}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","draggingLabel","setDraggingLabel","undefined","useEffect","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","onDragEnd","onDragStart","handleSearch","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","paper","drawerPaper","titleContainer","contentContainer","searchRoot","autoComplete","groupsContainer","map","restrictToWindowEdges"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport {\n  DndContextProps,\n  DragOverlay,\n  DragOverlayProps,\n  useDndMonitor,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../hooks\";\nimport { buildGroups } from \"./utils\";\nimport { HvFlowSidebarGroupItem } 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  /** 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}\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  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\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    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  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <>\n      <HvDrawer\n        BackdropComponent={undefined}\n        variant=\"persistent\"\n        classes={{\n          paper: classes.drawerPaper,\n        }}\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 variant=\"title3\">{title}</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            <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          </div>\n        </div>\n      </HvDrawer>\n      <DragOverlay modifiers={[restrictToWindowEdges]} {...dragOverlayProps}>\n        {draggingLabel ? (\n          <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n        ) : null}\n      </DragOverlay>\n    </>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","dragOverlayProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","draggingLabel","setDraggingLabel","undefined","useEffect","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","onDragEnd","onDragStart","handleSearch","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","paper","drawerPaper","titleContainer","contentContainer","searchRoot","autoComplete","groupsContainer","map","restrictToWindowEdges"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -5,6 +5,7 @@ import type { CSSInterpolation } from '@emotion/serialize';
 import { Dispatch } from 'react';
 import { DndContextProps } from '@dnd-kit/core';
 import { DragEndEvent } from '@dnd-kit/core';
+import { DragOverlayProps } from '@dnd-kit/core';
 import { Edge } from 'reactflow';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
 import { FunctionComponent } from 'react';
@@ -266,7 +267,7 @@ export declare interface HvFlowProps<NodeGroups extends keyof any = string, Node
     dndContextProps?: Pick<DndContextProps, "accessibility">;
 }
 
-export declare const HvFlowSidebar: ({ id, title, description, anchor, buttonTitle, classes: classesProp, labels: labelsProps, ...others }: HvFlowSidebarProps) => JSX_2.Element;
+export declare const HvFlowSidebar: ({ id, title, description, anchor, buttonTitle, classes: classesProp, labels: labelsProps, dragOverlayProps, ...others }: HvFlowSidebarProps) => JSX_2.Element;
 
 export declare type HvFlowSidebarClasses = ExtractNames<typeof useClasses_10>;
 
@@ -284,6 +285,12 @@ export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes
         searchPlaceholder?: string;
         searchAriaLabel?: string;
     };
+    /**
+     * Dnd Kit drag overlay props for customization.
+     *
+     * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).
+     */
+    dragOverlayProps?: DragOverlayProps;
 }
 
 declare type HvStepClasses = ExtractNames<typeof useClasses_2>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.12.1",
+  "version": "5.13.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,9 +32,9 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.34.0",
-    "@hitachivantara/uikit-react-icons": "^5.6.11",
-    "@hitachivantara/uikit-styles": "^5.15.0",
+    "@hitachivantara/uikit-react-core": "^5.35.0",
+    "@hitachivantara/uikit-react-icons": "^5.6.12",
+    "@hitachivantara/uikit-styles": "^5.16.0",
     "lodash": "^4.17.21",
     "reactflow": "^11.9.4",
     "uid": "^2.0.2",
@@ -48,7 +48,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "d0dde26c6eff55d855702074f70a1480e51693cd",
+  "gitHead": "e322581164467dcb33d75ddcd8cfc12da884f71e",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {