fumadocs-ui/dist/components/sidebar/tabs/dropdown.js

The Radix UI version of Fumadocs UI

'use client';

import { useSidebar } from "../base.js";
import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
import Link from "fumadocs-core/link";
import { usePathname } from "fumadocs-core/framework";
import { cn } from "@fumadocs/ui/cn";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Check, ChevronsUpDown } from "lucide-react";
import { useMemo, useState } from "react";
import { isActive, normalize } from "@fumadocs/ui/urls";

//#region src/components/sidebar/tabs/dropdown.tsx
function SidebarTabsDropdown({ options, placeholder, ...props }) {
	const [open, setOpen] = useState(false);
	const { closeOnRedirect } = useSidebar();
	const pathname = usePathname();
	const selected = useMemo(() => {
		return options.findLast((item$1) => isTabActive(item$1, pathname));
	}, [options, pathname]);
	const onClick = () => {
		closeOnRedirect.current = false;
		setOpen(false);
	};
	const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
		className: "size-9 shrink-0 empty:hidden md:size-5",
		children: selected.icon
	}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
		className: "text-sm font-medium",
		children: selected.title
	}), /* @__PURE__ */ jsx("p", {
		className: "text-sm text-fd-muted-foreground empty:hidden md:hidden",
		children: selected.description
	})] })] }) : placeholder;
	return /* @__PURE__ */ jsxs(Popover, {
		open,
		onOpenChange: setOpen,
		children: [item && /* @__PURE__ */ jsxs(PopoverTrigger, {
			...props,
			className: cn("flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground", props.className),
			children: [item, /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })]
		}), /* @__PURE__ */ jsx(PopoverContent, {
			className: "flex flex-col gap-1 w-(--radix-popover-trigger-width) p-1 fd-scroll-container",
			children: options.map((item$1) => {
				const isActive$1 = selected && item$1.url === selected.url;
				if (!isActive$1 && item$1.unlisted) return;
				return /* @__PURE__ */ jsxs(Link, {
					href: item$1.url,
					onClick,
					...item$1.props,
					className: cn("flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item$1.props?.className),
					children: [
						/* @__PURE__ */ jsx("div", {
							className: "shrink-0 size-9 md:mb-auto md:size-5 empty:hidden",
							children: item$1.icon
						}),
						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
							className: "text-sm font-medium leading-none",
							children: item$1.title
						}), /* @__PURE__ */ jsx("p", {
							className: "text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden",
							children: item$1.description
						})] }),
						/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive$1 && "invisible") })
					]
				}, item$1.url);
			})
		})]
	});
}
function isTabActive(tab, pathname) {
	if (tab.urls) return tab.urls.has(normalize(pathname));
	return isActive(tab.url, pathname, true);
}

//#endregion
export { SidebarTabsDropdown, isTabActive };
//# sourceMappingURL=dropdown.js.map