npm - @hitachivantara/uikit-react-lab - Versions diffs - 5.13.4 → 5.15.0 - Mend

@hitachivantara/uikit-react-lab 5.13.4 → 5.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

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

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

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

@@ -25,6 +25,9 @@ const {
     flexDirection: "column",
     gap: theme.space.sm,
     listStyleType: "none"
+  },
+  nodeType: {
+    marginBottom: theme.space.xs
   }
 });
 export {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Sidebar.styles.js","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n drawerPaper: { width: \"360px\" },\n titleContainer: {\n display: \"flex\",\n padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n },\n contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n description: { color: theme.colors.secondary_60 },\n searchRoot: {\n paddingTop: theme.space.sm,\n paddingBottom: theme.space.sm,\n },\n groupsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.sm,\n listStyleType: \"none\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","drawerPaper","width","titleContainer","display","padding","theme","spacing","contentContainer","description","color","colors","secondary_60","searchRoot","paddingTop","space","sm","paddingBottom","groupsContainer","flexDirection","gap","listStyleType"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,aAAa;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EAC9BC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,SAASC,MAAMC,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACAC,kBAAkB;AAAA,IAAEH,SAASC,MAAMC,QAAQ,GAAG,MAAM,MAAM,IAAI;AAAA,EAAE;AAAA,EAChEE,aAAa;AAAA,IAAEC,OAAOJ,MAAMK,OAAOC;AAAAA,EAAa;AAAA,EAChDC,YAAY;AAAA,IACVC,YAAYR,MAAMS,MAAMC;AAAAA,IACxBC,eAAeX,MAAMS,MAAMC;AAAAA,EAC7B;AAAA,EACAE,iBAAiB;AAAA,IACfd,SAAS;AAAA,IACTe,eAAe;AAAA,IACfC,KAAKd,MAAMS,MAAMC;AAAAA,IACjBK,eAAe;AAAA,EACjB;AACF,CAAC;"}
1	+ {"version":3,"file":"Sidebar.styles.js","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFlowSidebar\", {\n drawerPaper: { width: \"360px\" },\n titleContainer: {\n display: \"flex\",\n padding: theme.spacing(\"sm\", \"lg\", \"xs\", \"sm\"),\n },\n contentContainer: { padding: theme.spacing(0, \"lg\", \"sm\", \"lg\") },\n description: { color: theme.colors.secondary_60 },\n searchRoot: {\n paddingTop: theme.space.sm,\n paddingBottom: theme.space.sm,\n },\n groupsContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: theme.space.sm,\n listStyleType: \"none\",\n },\n nodeType: {\n marginBottom: theme.space.xs,\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","drawerPaper","width","titleContainer","display","padding","theme","spacing","contentContainer","description","color","colors","secondary_60","searchRoot","paddingTop","space","sm","paddingBottom","groupsContainer","flexDirection","gap","listStyleType","nodeType","marginBottom","xs"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,aAAa;AAAA,IAAEC,OAAO;AAAA,EAAQ;AAAA,EAC9BC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,SAASC,MAAMC,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,EAC/C;AAAA,EACAC,kBAAkB;AAAA,IAAEH,SAASC,MAAMC,QAAQ,GAAG,MAAM,MAAM,IAAI;AAAA,EAAE;AAAA,EAChEE,aAAa;AAAA,IAAEC,OAAOJ,MAAMK,OAAOC;AAAAA,EAAa;AAAA,EAChDC,YAAY;AAAA,IACVC,YAAYR,MAAMS,MAAMC;AAAAA,IACxBC,eAAeX,MAAMS,MAAMC;AAAAA,EAC7B;AAAA,EACAE,iBAAiB;AAAA,IACfd,SAAS;AAAA,IACTe,eAAe;AAAA,IACfC,KAAKd,MAAMS,MAAMC;AAAAA,IACjBK,eAAe;AAAA,EACjB;AAAA,EACAC,UAAU;AAAA,IACRC,cAAcjB,MAAMS,MAAMS;AAAAA,EAC5B;AACF,CAAC;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SidebarGroup.js","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n ExtractNames,\n HvButton,\n HvButtonProps,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n HvFlowDraggableSidebarGroupItem,\n HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../hooks\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type ~~HvFlowSidebarGroupNodes~~ = {\n type: string;\n label: string;\n data?: unknown;\n}[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n /** Group id. /\n id: string;\n /* Group nodes. /\n nodes: HvFlowSidebarGroupNodes;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvFlowSidebarGroupClasses;\n /* Expand button props. /\n expandButtonProps?: HvButtonProps;\n /* Item group props. */\n itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n id,\n label,\n nodes,\n color,\n description,\n icon,\n expandButtonProps,\n classes: classesProp,\n itemProps,\n}: HvFlowSidebarGroupProps) => {\n const { classes, cx, css } = useClasses(classesProp);\n\n const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n const opened = useMemo(\n () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n [expandedNodeGroups, id]\n );\n\n const handleClick = useCallback(() => {\n setExpandedNodeGroups?.((prev) =>\n opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]\n );\n }, [id, opened, setExpandedNodeGroups]);\n\n return (\n <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n <div className={classes.titleContainer}>\n <div className={classes.labelContainer}>\n <div className={classes.icon} role=\"none\">\n {icon}\n </div>\n <HvTypography variant=\"title4\">\n {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n </HvTypography>\n </div>\n <HvButton\n icon\n onClick={handleClick}\n aria-expanded={opened}\n {...expandButtonProps}\n >\n {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\n </HvButton>\n </div>\n {description && (\n <div className={classes.descriptionContainer}>\n <HvTypography>{description}</HvTypography>\n </div>\n )}\n {opened && (\n <div className={classes.itemsContainer}>\n {nodes.map((obj) => (\n <HvFlowDraggableSidebarGroupItem\n key={obj.type}\n {...itemProps}\n {...obj}\n />\n ))}\n </div>\n )}\n </li>\n );\n};\n"],"names":["HvFlowSidebarGroup","id","label","nodes","color","description","icon","expandButtonProps","classes","classesProp","itemProps","cx","css","useClasses","expandedNodeGroups","setExpandedNodeGroups","useFlowContext","opened","useMemo","find","groupId","handleClick","useCallback","prev","filter","borderColor","getColor","root","titleContainer","labelContainer","length","descriptionContainer","itemsContainer","map","obj","type"],"mappings":";;;;;;;;;~~AA0CO~~,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACuB,MAAM;AACvB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe;AAErE,QAAMC,SAASC,QACb,MAAM,CAAC,CAACJ,oBAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,EAAE,GAC5D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,YAAY,MAAM;AACpCP,4BAAyBQ,CACvBN,SAAAA,SAASM,KAAKC,OAAQJ,CAAYnB,YAAAA,OAAOmB,OAAO,IAAI,CAAC,GAAGG,MAAMtB,EAAE,CAClE;AAAA,EACC,GAAA,CAACA,IAAIgB,QAAQF,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAWJ,GAAGC,IAAI;AAAA,IAAEa,aAAaC,SAAStB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQmB,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWnB,QAAQoB,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAWpB,QAAQqB,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAWrB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,SAAQ,UACnBH,UAAM2B,MAAAA,SAAS,IAAK,GAAE5B,KAAM,KAAIC,MAAM2B,MAAO,MAAK5B,OACrD;AAAA,MAAA,GACF;AAAA,MACA,oBAAC,YACC,MAAI,MACJ,SAASmB,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAU,oBAAA,IAAA,EAAG,MAAK,QAAM,wBAAO,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACCZ,mCACE,OAAI,EAAA,WAAWG,QAAQuB,sBACtB,UAAA,oBAAC,cAAc1B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACE,oBAAA,OAAA,EAAI,WAAWT,QAAQwB,gBACrB7B,gBAAM8B,IAAKC,CAAAA,QACT,oBAAA,iCAAA,EAEKxB,GAAAA,WACAwB,GAAAA,OAFCA,IAAIC,IAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"SidebarGroup.js","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n ExtractNames,\n HvButton,\n HvButtonProps,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n HvFlowDraggableSidebarGroupItem,\n HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../hooks\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNode = {\n type: string;\n label: string;\n data?: unknown;\n};\n\nexport type HvFlowSidebarGroupNodes = HvFlowSidebarGroupNode[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n /** Group id. /\n id: string;\n /* Group nodes. /\n nodes: HvFlowSidebarGroupNodes;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvFlowSidebarGroupClasses;\n /* Expand button props. /\n expandButtonProps?: HvButtonProps;\n /* Item group props. */\n itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n id,\n label,\n nodes,\n color,\n description,\n icon,\n expandButtonProps,\n classes: classesProp,\n itemProps,\n}: HvFlowSidebarGroupProps) => {\n const { classes, cx, css } = useClasses(classesProp);\n\n const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n const opened = useMemo(\n () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n [expandedNodeGroups, id]\n );\n\n const handleClick = useCallback(() => {\n setExpandedNodeGroups?.((prev) =>\n opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]\n );\n }, [id, opened, setExpandedNodeGroups]);\n\n return (\n <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n <div className={classes.titleContainer}>\n <div className={classes.labelContainer}>\n <div className={classes.icon} role=\"none\">\n {icon}\n </div>\n <HvTypography variant=\"title4\">\n {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n </HvTypography>\n </div>\n <HvButton\n icon\n onClick={handleClick}\n aria-expanded={opened}\n {...expandButtonProps}\n >\n {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\n </HvButton>\n </div>\n {description && (\n <div className={classes.descriptionContainer}>\n <HvTypography>{description}</HvTypography>\n </div>\n )}\n {opened && (\n <div className={classes.itemsContainer}>\n {nodes.map((obj) => (\n <HvFlowDraggableSidebarGroupItem\n key={obj.type}\n {...itemProps}\n {...obj}\n />\n ))}\n </div>\n )}\n </li>\n );\n};\n"],"names":["HvFlowSidebarGroup","id","label","nodes","color","description","icon","expandButtonProps","classes","classesProp","itemProps","cx","css","useClasses","expandedNodeGroups","setExpandedNodeGroups","useFlowContext","opened","useMemo","find","groupId","handleClick","useCallback","prev","filter","borderColor","getColor","root","titleContainer","labelContainer","length","descriptionContainer","itemsContainer","map","obj","type"],"mappings":";;;;;;;;;AA4CO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACuB,MAAM;AACvB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe;AAErE,QAAMC,SAASC,QACb,MAAM,CAAC,CAACJ,oBAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,EAAE,GAC5D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,YAAY,MAAM;AACpCP,4BAAyBQ,CACvBN,SAAAA,SAASM,KAAKC,OAAQJ,CAAYnB,YAAAA,OAAOmB,OAAO,IAAI,CAAC,GAAGG,MAAMtB,EAAE,CAClE;AAAA,EACC,GAAA,CAACA,IAAIgB,QAAQF,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAWJ,GAAGC,IAAI;AAAA,IAAEa,aAAaC,SAAStB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQmB,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWnB,QAAQoB,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAWpB,QAAQqB,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAWrB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,SAAQ,UACnBH,UAAM2B,MAAAA,SAAS,IAAK,GAAE5B,KAAM,KAAIC,MAAM2B,MAAO,MAAK5B,OACrD;AAAA,MAAA,GACF;AAAA,MACA,oBAAC,YACC,MAAI,MACJ,SAASmB,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAU,oBAAA,IAAA,EAAG,MAAK,QAAM,wBAAO,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACCZ,mCACE,OAAI,EAAA,WAAWG,QAAQuB,sBACtB,UAAA,oBAAC,cAAc1B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACE,oBAAA,OAAA,EAAI,WAAWT,QAAQwB,gBACrB7B,gBAAM8B,IAAKC,CAAAA,QACT,oBAAA,iCAAA,EAEKxB,GAAAA,WACAwB,GAAAA,OAFCA,IAAIC,IAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Flow/Sidebar/utils.js CHANGED Viewed

@@ -1,20 +1,37 @@
-const buildGroups = (nodeGroups, nodeTypes) => {
+const buildGroups = (nodeGroups, nodeTypes, defaultGroupProps) => {
   if (nodeGroups) {
     const groups = Object.entries(nodeGroups).reduce((acc, curr) => {
-      const nodes = nodeTypes ? Object.entries(nodeTypes).reduce((accN, currN) => {
-        if (currN[1].meta?.groupId === curr[0]) {
-          accN.push({
-            type: currN[0],
-            label: currN[1].meta?.label,
-            data: currN[1].meta?.data
-          });
+      const nodesWithGroupId = [];
+      const nodesWithoutGroupId = [];
+      if (nodeTypes) {
+        for (const [nodeType, node] of Object.entries(nodeTypes)) {
+          if (node.meta?.groupId === curr[0]) {
+            nodesWithGroupId.push({
+              type: nodeType,
+              label: node.meta?.label,
+              data: node.meta?.data
+            });
+          } else if (!node.meta?.groupId) {
+            nodesWithoutGroupId.push({
+              type: nodeType,
+              label: node.meta?.label || "",
+              data: node.meta?.data
+            });
+          }
         }
-        return accN;
-      }, []) : [];
+      }
       acc[curr[0]] = {
         ...curr[1],
-        nodes
+        nodes: nodesWithGroupId
       };
+      if (nodesWithoutGroupId.length > 0) {
+        acc.Default = {
+          name: "Default",
+          label: "Default",
+          nodes: nodesWithoutGroupId,
+          ...defaultGroupProps
+        };
+      }
       return acc;
     }, {});
     return groups;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../../src/components/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { HvFlowSidebarGroupNodes } from \"./SidebarGroup\";\n\nexport const buildGroups = (\n nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n nodeTypes: HvFlowContextValue[\"nodeTypes\"]\n): {\n [key: string]: HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n} => {\n if (nodeGroups) {\n const groups = Object.entries(nodeGroups).reduce((acc, curr) => {\n const ~~nodes~~ = ~~nodeTypes~~\n ? ~~Object.entries~~(nodeTypes)~~.reduce(~~\n (~~accN:~~ ~~HvFlowSidebarGroupNodes~~, ~~currN~~) => {\n if (~~currN[1]~~.meta?.groupId === curr[0]) {\n ~~accN~~.push({\n type: ~~currN[0]~~,\n label: ~~currN[1]~~.meta?.label,\n data: ~~currN[1]~~.meta?.data,\n });\n }\n ~~return~~ ~~accN;\~~n },\n ~~[]\~~n )\n ~~: [];\~~n\n acc[curr[0]] = {\n ...curr[1],\n nodes,\n };\n\n return acc;\n }, {});\n\n return groups;\n }\n\n return {};\n};\n"],"names":["buildGroups","nodeGroups","nodeTypes","groups","Object","entries","reduce","acc","curr","~~nodes~~","~~accN~~","~~currN~~","meta","groupId","push","type","label","data"],"mappings":"~~AAIaA~~,~~MAAAA~~,cAAcA,CACzBC,YACAC,~~cAGG~~;AACH,~~MAAID~~,YAAY;~~AACRE~~,UAAAA,SAASC,OAAOC,~~QAAQJ~~,UAAU,~~EAAEK~~,OAAO,CAACC,KAAKC,SAAS;~~AACxDC~~,~~YAAAA~~,~~QAAQP~~,~~YACVE~~,~~OAAOC~~,~~QAAQH~~,~~SAAS~~,~~EAAEI~~,~~OACxB~~,~~CAACI~~,~~MAA+BC~~,~~UAAU;AACxC~~,~~YAAIA~~,~~MAAM~~,~~CAAC~~,~~EAAEC~~,MAAMC,~~YAAYL~~,KAAK,CAAC,GAAG;~~AACtCE~~,~~eAAKI~~,KAAK;AAAA,~~YACRC~~,~~MAAMJ,MAAM,CAAC~~;~~AAAA~~,~~YACbK~~,OAAOL,~~MAAM~~,~~CAAC,EAAEC,~~MAAMI;AAAAA,~~YACtBC~~,MAAMN,~~MAAM~~,~~CAAC,EAAEC,~~MAAMK;AAAAA,~~UAAAA~~,~~CACtB~~;AAAA,~~QACH~~;~~AACOP~~,~~eAAAA~~;AAAAA,~~MAAAA~~,~~GAET~~,~~CAAA~~,~~CACF~~,~~IACA~~;~~AAEAF~~,UAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,QACb,GAAGA,KAAK,CAAC;AAAA,~~QACTC~~;AAAAA,MAAAA;~~AAGKF~~,aAAAA;AAAAA,IACT,GAAG,CAAE,CAAA;AAEEJ,WAAAA;AAAAA,EACT;AAEA,SAAO;AACT;"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../../src/components/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport {\n HvFlowSidebarGroupNodes,\n HvFlowSidebarGroupNode,\n} from \"./SidebarGroup\";\n\nexport const buildGroups = (\n nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n nodeTypes: HvFlowContextValue[\"nodeTypes\"],\n defaultGroupProps?: HvFlowNodeGroup\n): {\n [key: string]: HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n} => {\n if (nodeGroups) {\n const groups = Object.entries(nodeGroups).reduce((acc, curr) => {\n const nodesWithGroupId: HvFlowSidebarGroupNode[] = [];\n const nodesWithoutGroupId: HvFlowSidebarGroupNode[] = [];\n\n if (nodeTypes) {\n for (const [nodeType, node] of Object.entries(nodeTypes)) {\n if (node.meta?.groupId === curr[0]) {\n nodesWithGroupId.push({\n type: nodeType,\n label: node.meta?.label,\n data: node.meta?.data,\n });\n } else if (!node.meta?.groupId) {\n nodesWithoutGroupId.push({\n type: nodeType,\n label: node.meta?.label \|\| \"\",\n data: node.meta?.data,\n });\n }\n }\n }\n\n acc[curr[0]] = {\n ...curr[1],\n nodes: nodesWithGroupId,\n } as HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n\n // Create a \"Default\" group for nodes without a groupId\n if (nodesWithoutGroupId.length > 0) {\n // @ts-ignore\n acc.Default = {\n name: \"Default\",\n label: \"Default\",\n nodes: nodesWithoutGroupId,\n ...defaultGroupProps,\n } as HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n }\n\n return acc;\n }, {});\n\n return groups;\n }\n\n return {};\n};\n"],"names":["buildGroups","nodeGroups","nodeTypes","defaultGroupProps","groups","Object","entries","reduce","acc","curr","nodesWithGroupId","nodesWithoutGroupId","nodeType","node","meta","groupId","push","type","label","data","nodes","length","Default","name"],"mappings":"AAOO,MAAMA,cAAcA,CACzBC,YACAC,WACAC,sBAGG;AACH,MAAIF,YAAY;AACRG,UAAAA,SAASC,OAAOC,QAAQL,UAAU,EAAEM,OAAO,CAACC,KAAKC,SAAS;AAC9D,YAAMC,mBAA6C,CAAA;AACnD,YAAMC,sBAAgD,CAAA;AAEtD,UAAIT,WAAW;AACb,mBAAW,CAACU,UAAUC,IAAI,KAAKR,OAAOC,QAAQJ,SAAS,GAAG;AACxD,cAAIW,KAAKC,MAAMC,YAAYN,KAAK,CAAC,GAAG;AAClCC,6BAAiBM,KAAK;AAAA,cACpBC,MAAML;AAAAA,cACNM,OAAOL,KAAKC,MAAMI;AAAAA,cAClBC,MAAMN,KAAKC,MAAMK;AAAAA,YAAAA,CAClB;AAAA,UACQ,WAAA,CAACN,KAAKC,MAAMC,SAAS;AAC9BJ,gCAAoBK,KAAK;AAAA,cACvBC,MAAML;AAAAA,cACNM,OAAOL,KAAKC,MAAMI,SAAS;AAAA,cAC3BC,MAAMN,KAAKC,MAAMK;AAAAA,YAAAA,CAClB;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAEIV,UAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,QACb,GAAGA,KAAK,CAAC;AAAA,QACTW,OAAOV;AAAAA,MAAAA;AAILC,UAAAA,oBAAoBU,SAAS,GAAG;AAElCb,YAAIc,UAAU;AAAA,UACZC,MAAM;AAAA,UACNL,OAAO;AAAA,UACPE,OAAOT;AAAAA,UACP,GAAGR;AAAAA,QAAAA;AAAAA,MAEP;AAEOK,aAAAA;AAAAA,IACT,GAAG,CAAE,CAAA;AAEEJ,WAAAA;AAAAA,EACT;AAEA,SAAO;AACT;"}

package/dist/types/index.d.ts CHANGED Viewed

@@ -66,6 +66,7 @@ export declare const flowSidebarClasses: {
     drawerPaper: "HvFlowSidebar-drawerPaper";
     searchRoot: "HvFlowSidebar-searchRoot";
     groupsContainer: "HvFlowSidebar-groupsContainer";
+    nodeType: "HvFlowSidebar-nodeType";
 };
 declare interface HvDroppableFlowProps<NodeType extends string | undefined = string | undefined, NodeData = any> extends Omit<ReactFlowProps, "nodes" | "edges" | "nodeTypes"> {
@@ -114,7 +115,7 @@ export declare const HvFlowBaseNode: ({ id, title, headerItems, icon, color: col
 export declare type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses_11>;
-export declare interface HvFlowBaseNodeProps<T> extends Omit<HvBaseProps, "id">, NodeProps<T> {
+export declare interface HvFlowBaseNodeProps<T = any> extends Omit<HvBaseProps, "id">, NodeProps<T> {
     /** Header title */
     title?: string;
     /** Header icon */
@@ -200,7 +201,7 @@ export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMap
     classes?: HvFlowMinimapClasses;
 }
-export declare const HvFlowNode: ({ id, type, headerItems, description, actions, actionCallback, maxVisibleActions, expanded, params, classes: classesProp, children, ...props }: HvFlowNodeProps<unknown>) => JSX_2.Element;
+export declare const HvFlowNode: ({ id, type, headerItems, description, actions, actionCallback, maxVisibleActions, expanded, params, nodeDefaults, classes: classesProp, children, ...props }: HvFlowNodeProps<unknown>) => JSX_2.Element;
 export declare interface HvFlowNodeAction extends HvActionGeneric {
     callback?: (node: Node_2) => void;
@@ -215,6 +216,13 @@ export declare interface HvFlowNodeComponentClass<GroupId extends keyof any = st
 export declare type HvFlowNodeComponentType<GroupId extends keyof any = string, NodeData = any> = HvFlowNodeComponentClass<GroupId, NodeData> | HvFlowNodeFunctionComponent<GroupId, NodeData>;
+export declare type HvFlowNodeDefaults = {
+    title?: string;
+    subTitle?: string;
+    color?: string;
+    icon?: React_2.ReactNode;
+};
 /** Node types */
 export declare interface HvFlowNodeFunctionComponent<GroupId extends keyof any = string, NodeData = any> extends FunctionComponent<NodeProps> {
     /** Metadata used on the HvFlowSidebar component to group the node */
@@ -235,6 +243,7 @@ export declare type HvFlowNodeInput = {
     label: string;
     isMandatory?: boolean;
     accepts?: string[];
+    maxConnections?: number;
 };
 export declare interface HvFlowNodeMeta {
@@ -249,17 +258,12 @@ export declare type HvFlowNodeOutput = {
     label: string;
     isMandatory?: boolean;
     provides?: string;
+    maxConnections?: number;
 };
-export declare type HvFlowNodeParam = {
-    id: string;
-    type: "text" | "select";
-    label: string;
-    options?: string[];
-    value?: string;
-};
+export declare type HvFlowNodeParam = HvFlowNodeSelectParam | HvFlowNodeTextParam;
-export declare interface HvFlowNodeProps<T> extends Omit<HvFlowBaseNodeProps<T>, "classes"> {
+export declare interface HvFlowNodeProps<T = any> extends Omit<HvFlowBaseNodeProps<T>, "classes"> {
     /** Node description */
     description?: string;
     /** Node actions */
@@ -272,13 +276,30 @@ export declare interface HvFlowNodeProps<T> extends Omit<HvFlowBaseNodeProps<T>,
     expanded?: boolean;
     /** Node parameters */
     params?: HvFlowNodeParam[];
+    /** A set of node default values for when there are no groups to fetch this data from. */
+    nodeDefaults?: HvFlowNodeDefaults;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvFlowNodeClasses | HvFlowBaseNodeProps<T>["classes"];
 }
+export declare interface HvFlowNodeSelectParam extends HvFlowNodeSharedParam {
+    type: "select";
+    multiple?: boolean;
+    options?: string[];
+}
+export declare interface HvFlowNodeSharedParam {
+    id: string;
+    label: string;
+}
+export declare interface HvFlowNodeTextParam extends HvFlowNodeSharedParam {
+    type: "text";
+}
 export declare type HvFlowNodeTypeMeta<GroupId extends keyof any = string, NodeData = any> = {
     label: string;
-    groupId: GroupId;
+    groupId?: GroupId;
     inputs?: HvFlowNodeInput[];
     outputs?: HvFlowNodeOutput[];
     data?: NodeData;
@@ -305,7 +326,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, dragOverlayProps, ...others }: HvFlowSidebarProps) => JSX_2.Element;
+export declare const HvFlowSidebar: ({ id, title, description, anchor, buttonTitle, classes: classesProp, labels: labelsProps, dragOverlayProps, defaultGroupProps, ...others }: HvFlowSidebarProps) => JSX_2.Element;
 export declare type HvFlowSidebarClasses = ExtractNames<typeof useClasses_10>;
@@ -329,6 +350,8 @@ export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes
      * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).
      */
     dragOverlayProps?: DragOverlayProps;
+    /** Props to be applied to the default nodes group. */
+    defaultGroupProps?: HvFlowNodeGroup;
 }
 declare type HvStepClasses = ExtractNames<typeof useClasses_2>;
@@ -555,7 +578,7 @@ declare const useClasses: (classesProp?: Partial<Record<"li" | "ol" | "root" | "
     cx: (...args: any) => string;
 };
-declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titleContainer" | "contentContainer" | "drawerPaper" | "searchRoot" | "groupsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titleContainer" | "contentContainer" | "drawerPaper" | "searchRoot" | "groupsContainer" | "nodeType", string>>, addStatic?: boolean) => {
     classes: {
         description: string;
         titleContainer: string;
@@ -563,6 +586,7 @@ declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titl
         drawerPaper: string;
         searchRoot: string;
         groupsContainer: string;
+        nodeType: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.13.4",
+  "version": "5.15.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.36.2",
-    "@hitachivantara/uikit-react-icons": "^5.7.1",
-    "@hitachivantara/uikit-styles": "^5.16.0",
+    "@hitachivantara/uikit-react-core": "^5.36.3",
+    "@hitachivantara/uikit-react-icons": "^5.7.2",
+    "@hitachivantara/uikit-styles": "^5.16.1",
     "lodash": "^4.17.21",
     "reactflow": "^11.9.4",
     "uid": "^2.0.2",
@@ -48,7 +48,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "e275b72fdcf3da36dc5139ed37d2f3a7e7b240c9",
+  "gitHead": "1464c1eda257df2ecca90646bc1e01474bc69d67",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {