@fluid-app/portal-sdk 0.1.139 → 0.1.141

package/dist/index.cjs

@@ -1742,46 +1742,26 @@ function filterRepOnlySections(sections) {
 //#region src/shell/QuickLinksDropdown.tsx
 function QuickLinksDropdown({ onNavigate }) {
 	const [open, setOpen] = (0, react.useState)(false);
-	const panelRef = (0, react.useRef)(null);
-	const buttonRef = (0, react.useRef)(null);
-	const close = (0, react.useCallback)(() => setOpen(false), []);
-	(0, react.useEffect)(() => {
-		if (!open) return;
-		const handleMouseDown = (e) => {
-			if (panelRef.current && !panelRef.current.contains(e.target) && buttonRef.current && !buttonRef.current.contains(e.target)) close();
-		};
-		const handleKeyDown = (e) => {
-			if (e.key === "Escape") close();
-		};
-		document.addEventListener("mousedown", handleMouseDown);
-		document.addEventListener("keydown", handleKeyDown);
-		return () => {
-			document.removeEventListener("mousedown", handleMouseDown);
-			document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, [open, close]);
 	const { isCustomer } = require_ShareablesScreen.useUserType();
 	const sections = (0, react.useMemo)(() => {
 		const all = getSystemNavigationBySection();
 		return isCustomer ? filterRepOnlySections(all) : all;
 	}, [isCustomer]);
-	const handleItemClick = (slug) => {
-		onNavigate(slug);
-		close();
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			ref: buttonRef,
-			type: "button",
-			onClick: () => setOpen((prev) => !prev),
-			className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex shrink-0 items-center justify-center rounded-md p-2",
-			"aria-label": "Quick links",
-			"aria-expanded": open,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LayoutGrid, { className: "h-4 w-4" })
-		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: panelRef,
-			className: "border-border bg-background absolute top-full right-0 z-50 mt-1 w-[700px] max-w-[90vw] overflow-hidden rounded-lg border shadow-lg",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+				variant: "ghost",
+				size: "sm",
+				className: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shrink-0",
+				"aria-label": "Quick links",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LayoutGrid, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.PopoverContent, {
+			align: "end",
+			className: "w-175 max-w-[90vw] overflow-hidden rounded-lg p-0 shadow-lg",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1799,13 +1779,16 @@ function QuickLinksDropdown({ onNavigate }) {
 							children: sectionName
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "grid grid-cols-4 gap-2",
-							children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								onClick: () => handleItemClick(item.slug),
-								className: "text-sidebar-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
+							children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+								variant: "ghost",
+								className: "text-sidebar-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground h-auto justify-start gap-2 rounded-lg px-3 py-2 text-sm",
+								onClick: () => {
+									if (item.slug) onNavigate(item.slug);
+									setOpen(false);
+								},
 								children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RepIcon, {
 									name: item.icon,
-									className: "text-muted-foreground h-4 w-4 shrink-0"
+									className: "h-4 w-4 shrink-0"
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "truncate",
 									children: item.label
@@ -1833,12 +1816,12 @@ function SdkMobileQuickLinksGrid({ onNavigate }) {
 			children: sectionName
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "grid grid-cols-3 gap-2",
-			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-				type: "button",
+			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+				variant: "ghost",
+				className: "text-sidebar-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground h-auto flex-col gap-1 rounded-lg p-2",
 				onClick: () => {
 					if (item.slug) onNavigate(item.slug);
 				},
-				className: "text-sidebar-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground flex h-auto flex-col items-center gap-1 rounded-lg p-2",
 				children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RepIcon, {
 					name: item.icon,
 					className: "size-5"