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

Contributed React components for the NEXT UI Kit.

import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useMemo, useEffect } from "react";
import { useDroppable, useDndMonitor, DragOverlay } from "@dnd-kit/core";
import { restrictToWindowEdges } from "@dnd-kit/modifiers";
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 { HvFlowSidebarGroup } from "./SidebarGroup/SidebarGroup.js";
import { HvFlowSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/SidebarGroupItem.js";
import { useFlowContext } from "../hooks/useFlowContext.js";
import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js";
const DEFAULT_LABELS = {
  itemAriaRoleDescription: "Draggable",
  expandGroupButtonAriaLabel: "Expand group",
  searchPlaceholder: "Search node...",
  searchAriaLabel: "Search node..."
};
const 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())
        );
        const itemsCount = Object.keys(filteredItems).length;
        if (itemsCount > 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
      },
      showBackdrop: false,
      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 })
      ]
    }
  );
};
export {
  HvFlowSidebar,
  staticClasses as flowSidebarClasses
};