@fluid-app/portal-sdk 0.1.443 → 0.1.444

package/dist/index.mjs

@@ -88,6 +88,7 @@ import { twMerge } from "tailwind-merge";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { createRoot } from "react-dom/client";
+import { MobileBottomSheet } from "@fluid-app/ui-components/components/MobileBottomSheet";
 //#region src/types/page-template.ts
 /**
 * Built-in page category IDs
@@ -956,7 +957,7 @@ function AppShellLayout({ sidebarContent, headerContent, children, sidebarHeader
 							ref: screenContentRef,
 							"data-fluid-portal-screen-area": "",
 							tabIndex: -1,
-							className: "ring-foreground/5 scrollbar-none bg-background text-foreground h-full overflow-auto rounded-xl shadow-sm ring-1",
+							className: "ring-foreground/5 scrollbar-none bg-background text-foreground h-full overflow-auto rounded-xl shadow-sm ring-1 max-md:rounded-none max-md:shadow-none max-md:ring-0",
 							children
 						})
 					})]
@@ -1270,41 +1271,22 @@ function SdkBottomNav({ navItems, currentSlug, onNavigate, appDefinitionId = 0,
 			className: `flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[10px] font-medium transition-colors ${overflowItems.some((item) => isInSection(item, currentSlug)) ? "text-primary" : "text-muted-foreground"}`,
 			children: [/* @__PURE__ */ jsx(Ellipsis, { className: "size-5" }), /* @__PURE__ */ jsx("span", { children: t("nav_more") })]
 		})]
-	}), moreOpen && /* @__PURE__ */ jsxs("div", {
-		className: "fixed inset-0 z-50 flex flex-col",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex-1 bg-black/50",
-			onClick: () => setMoreOpen(false),
-			"aria-hidden": "true"
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "bg-sidebar rounded-t-2xl pb-[env(safe-area-inset-bottom)]",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between px-4 pt-4 pb-2",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-foreground text-sm font-semibold",
-					children: t("nav_more")
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => setMoreOpen(false),
-					className: "text-muted-foreground hover:bg-sidebar-accent flex items-center justify-center rounded-full p-1",
-					"aria-label": t("nav_close"),
-					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "px-2 pb-4",
-				children: overflowItems.map((item) => {
-					return /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: () => handleItemClick(item),
-						className: `flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${isInSection(item, currentSlug) ? "bg-sidebar-primary text-sidebar-primary-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"}`,
-						children: [/* @__PURE__ */ jsx(RepIcon, {
-							name: item.icon || "file",
-							className: "size-5"
-						}), /* @__PURE__ */ jsx("span", { children: translateNavLabel(shellApi, item.slug, item.label) })]
-					}, item.id ?? item.slug ?? item.label);
-				})
-			})]
-		})]
+	}), /* @__PURE__ */ jsx(MobileBottomSheet, {
+		open: moreOpen,
+		onOpenChange: setMoreOpen,
+		title: t("nav_more"),
+		surface: "sidebar",
+		children: overflowItems.map((item) => {
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => handleItemClick(item),
+				className: `flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${isInSection(item, currentSlug) ? "bg-sidebar-primary text-sidebar-primary-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"}`,
+				children: [/* @__PURE__ */ jsx(RepIcon, {
+					name: item.icon || "file",
+					className: "size-5"
+				}), /* @__PURE__ */ jsx("span", { children: translateNavLabel(shellApi, item.slug, item.label) })]
+			}, item.id ?? item.slug ?? item.label);
+		})
 	})] });
 }
 //#endregion