@hitachivantara/uikit-react-lab/dist/Flow/Sidebar/Sidebar.js

Contributed React components to UI Kit by the community.

import { useFlowContext } from "../hooks/useFlowContext.js";
import { useClasses } from "./Sidebar.styles.js";
import { HvFlowSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/SidebarGroupItem.js";
import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js";
import { HvFlowSidebarGroup } from "./SidebarGroup/SidebarGroup.js";
import { useEffect, useMemo, useState } from "react";
import { HvDrawer, HvInput, HvTypography, useLabels, useUniqueId } from "@hitachivantara/uikit-react-core";
import { jsx, jsxs } from "react/jsx-runtime";
import { Add } from "@hitachivantara/uikit-react-icons";
import { DragOverlay, useDndMonitor, useDroppable } from "@dnd-kit/core";
import { restrictToWindowEdges } from "@dnd-kit/modifiers";
//#region src/Flow/Sidebar/Sidebar.tsx
var DEFAULT_LABELS = {
	itemAriaRoleDescription: "Draggable",
	expandGroupButtonAriaLabel: "Expand group",
	searchPlaceholder: "Search node...",
	searchAriaLabel: "Search node..."
};
var HvFlowSidebar = ({ id, title, description, anchor = "right", buttonTitle = "Close", flatten = false, classes: classesProp, labels: labelsProps, dragOverlayProps, ...others }) => {
	const { classes } = useClasses(classesProp);
	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();
	const { setNodeRef } = useDroppable({ id: drawerElementId });
	const handleDragStart = (event) => {
		if (event.active.data.current?.hvFlow) setDraggingLabel(event.active.data.current.hvFlow?.label);
	};
	const handleDragEnd = () => {
		setDraggingLabel(void 0);
	};
	useDndMonitor({
		onDragEnd: handleDragEnd,
		onDragStart: handleDragStart
	});
	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()));
			if (Object.keys(filteredItems).length > 0) acc[groupId] = {
				...group,
				items: filteredItems
			};
			return acc;
		}, {}) : nodeGroups;
	}, [filterValue, nodeGroups]);
	useEffect(() => {
		setExpandedNodeGroups?.(filterValue ? Object.keys(filteredGroups) : []);
	}, [
		filterValue,
		filteredGroups,
		setExpandedNodeGroups
	]);
	return /* @__PURE__ */ jsxs(HvDrawer, {
		BackdropComponent: void 0,
		variant: "persistent",
		classes: { paper: classes.drawerPaper },
		hideBackdrop: true,
		anchor,
		buttonTitle,
		...others,
		children: [/* @__PURE__ */ jsxs("div", {
			id: drawerElementId,
			ref: setNodeRef,
			children: [/* @__PURE__ */ jsxs("div", {
				className: classes.titleContainer,
				children: [/* @__PURE__ */ jsx(Add, {}), /* @__PURE__ */ jsx(HvTypography, {
					component: "p",
					variant: "title3",
					children: title
				})]
			}), /* @__PURE__ */ jsxs("div", {
				className: classes.contentContainer,
				children: [
					/* @__PURE__ */ jsx(HvTypography, {
						className: classes.description,
						children: description
					}),
					/* @__PURE__ */ jsx(HvInput, {
						className: classes.searchRoot,
						type: "search",
						placeholder: labels?.searchPlaceholder,
						"aria-label": labels?.searchAriaLabel,
						"aria-controls": groupsElementId,
						"aria-owns": groupsElementId,
						onChange: (evt, val) => setFilterValue(val.trim()),
						inputProps: { autoComplete: "off" }
					}),
					/* @__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: groupId,
								expandButtonProps: { "aria-label": labels?.expandGroupButtonAriaLabel },
								itemProps: { "aria-roledescription": labels?.itemAriaRoleDescription },
								...group
							}, groupId);
						})
					})
				]
			})]
		}), /* @__PURE__ */ jsx(DragOverlay, {
			modifiers: [restrictToWindowEdges],
			...dragOverlayProps,
			children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, {
				label: draggingLabel,
				isDragging: true
			}) : null
		})]
	});
};
//#endregion
export { HvFlowSidebar };