@protobase/ui 0.14.4 → 0.14.6

package/dist/primitives/sheet.js

@@ -1,44 +1,44 @@
+import { useFocusTrap } from "../lib/use-focus-trap.js";
+import { useRef } from "react";
 import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Drawer } from "@base-ui/react/drawer";
 //#region src/primitives/sheet.tsx
-const motion = "transition-[transform,opacity] duration-[400ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] motion-reduce:duration-0";
-/**
-* A panel that rises from the bottom of the screen, for the filter panel and `ResponsiveDialog` on phones. It closes
-* when swiped down, on its close button, on a press outside and on Escape, and keeps focus inside while open (Base UI's
-* `Drawer`).
-*/
-const Sheet = ({ title, open, onClose, children }) => /* @__PURE__ */ jsx(Drawer.Root, {
-	open,
-	onOpenChange: (next) => !next && onClose(),
-	children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: `fixed inset-0 z-[80] bg-foreground/40 opacity-[calc(1-var(--drawer-swipe-progress))] data-starting-style:opacity-0 data-ending-style:opacity-0 ${motion}` }), /* @__PURE__ */ jsx(Drawer.Viewport, {
-		className: "fixed inset-0 z-[80] flex items-end",
-		children: /* @__PURE__ */ jsxs(Drawer.Popup, {
-			className: `flex max-h-[85vh] w-full flex-col rounded-t-xl border-t bg-background shadow-pop outline-none [transform:translateY(var(--drawer-swipe-movement-y))] data-starting-style:[transform:translateY(100%)] data-ending-style:[transform:translateY(100%)] data-swiping:select-none ${motion}`,
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "flex shrink-0 justify-center pt-2",
-					"aria-hidden": true,
-					children: /* @__PURE__ */ jsx("div", { className: "h-1 w-10 rounded-full bg-border-strong" })
-				}),
-				/* @__PURE__ */ jsxs("header", {
-					className: "flex shrink-0 items-center justify-between border-b px-4",
-					children: [/* @__PURE__ */ jsx(Drawer.Title, {
-						className: "text-[15px] font-semibold",
-						children: title
-					}), /* @__PURE__ */ jsx(Drawer.Close, {
-						"aria-label": "Close",
-						className: "-mr-2 inline-flex size-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted",
-						children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-					})]
-				}),
-				/* @__PURE__ */ jsx(Drawer.Content, {
-					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-6",
-					children
-				})
-			]
-		})
-	})] })
-});
+/** A panel that rises from the bottom of the screen, for the filter panel on phones. */
+const Sheet = ({ title, open, onClose, children }) => {
+	const panel = useRef(null);
+	useFocusTrap(panel, open, onClose);
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-[80]",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 bg-backdrop/40",
+			onClick: onClose,
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: panel,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": title,
+			tabIndex: -1,
+			className: "absolute inset-x-0 bottom-0 flex max-h-[85vh] flex-col rounded-t-xl border-t bg-background shadow-pop outline-none",
+			children: [/* @__PURE__ */ jsxs("header", {
+				className: "flex shrink-0 items-center justify-between border-b px-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-[15px] font-semibold",
+					children: title
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Close",
+					onClick: onClose,
+					className: "-mr-2 inline-flex size-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted",
+					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-6",
+				children
+			})]
+		})]
+	});
+};
 //#endregion
 export { Sheet };