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

Contributed React components for the NEXT UI Kit.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const core = require("@dnd-kit/core");
const modifiers = require("@dnd-kit/modifiers");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
const Sidebar_styles = require("./Sidebar.styles.cjs");
const SidebarGroup = require("./SidebarGroup/SidebarGroup.cjs");
const SidebarGroupItem = require("./SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs");
const useFlowContext = require("../hooks/useFlowContext.cjs");
const DraggableSidebarGroupItem = require("./SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs");
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 } = Sidebar_styles.useClasses(classesProp);
  const { nodeGroups, setExpandedNodeGroups } = useFlowContext.useFlowContext();
  const [filterValue, setFilterValue] = react.useState("");
  const [draggingLabel, setDraggingLabel] = react.useState();
  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
  const drawerElementId = uikitReactCore.useUniqueId(id);
  const groupsElementId = uikitReactCore.useUniqueId();
  const { setNodeRef } = core.useDroppable({ id: drawerElementId });
  const handleDragStart = (event) => {
    if (event.active.data.current?.hvFlow) {
      setDraggingLabel(event.active.data.current.hvFlow?.label);
    }
  };
  const handleDragEnd = () => {
    setDraggingLabel(void 0);
  };
  core.useDndMonitor({
    onDragEnd: handleDragEnd,
    onDragStart: handleDragStart
  });
  const filteredGroups = react.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]);
  react.useEffect(() => {
    setExpandedNodeGroups?.(filterValue ? Object.keys(filteredGroups) : []);
  }, [filterValue, filteredGroups, setExpandedNodeGroups]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    uikitReactCore.HvDrawer,
    {
      BackdropComponent: void 0,
      variant: "persistent",
      classes: {
        paper: classes.drawerPaper
      },
      showBackdrop: false,
      anchor,
      buttonTitle,
      ...others,
      children: [
        /* @__PURE__ */ jsxRuntime.jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
            /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {}),
            /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { component: "p", variant: "title3", children: title })
          ] }),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.contentContainer, children: [
            /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { className: classes.description, children: description }),
            /* @__PURE__ */ jsxRuntime.jsx(
              uikitReactCore.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__ */ jsxRuntime.jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(filteredGroups).map(([groupId, group]) => {
              if (flatten) {
                return (group.items || []).map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
                  DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem,
                  {
                    "aria-roledescription": labels?.itemAriaRoleDescription,
                    ...item
                  },
                  `${item.nodeType}-${i}`
                ));
              }
              return /* @__PURE__ */ jsxRuntime.jsx(
                SidebarGroup.HvFlowSidebarGroup,
                {
                  id: groupId,
                  expandButtonProps: {
                    "aria-label": labels?.expandGroupButtonAriaLabel
                  },
                  itemProps: {
                    "aria-roledescription": labels?.itemAriaRoleDescription
                  },
                  ...group
                },
                groupId
              );
            }) })
          ] })
        ] }),
        /* @__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;
exports.HvFlowSidebar = HvFlowSidebar;