@protobase/ui 0.14.3 → 0.14.4

package/dist/auth/auth-gate.js

@@ -69,6 +69,15 @@ const AuthGate = ({ workspace, children }) => {
 	useEffect(() => {
 		if (state.kind === "signed-out" && page.kind === "sign-in" && page.providerError) forgetSignInLink();
 	}, [state.kind, page]);
+	useEffect(() => {
+		if (state.kind !== "signed-out" || !browse) return;
+		const leave = () => {
+			setPage({ kind: "sign-in" });
+			browse();
+		};
+		window.addEventListener("popstate", leave);
+		return () => window.removeEventListener("popstate", leave);
+	}, [state.kind, browse]);
 	const signInFailed = useCallback((error) => setPage({
 		kind: "sign-in",
 		error

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.14.3";
+var version = "0.14.4";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/responsive-dialog.d.ts

@@ -11,7 +11,8 @@ export type ResponsiveDialogProps = {
 };
 /**
  * A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
- * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
+ * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open; the sheet also
+ * closes when swiped down.
  */
 export declare const ResponsiveDialog: ({ title, description, open, onClose, actions, children }: ResponsiveDialogProps) => import("react").JSX.Element | null;
 //#endregion

package/dist/primitives/responsive-dialog.js

@@ -5,21 +5,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/responsive-dialog.tsx
 /**
 * A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
-* the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
+* the viewport does. Both close on Escape and on a press outside, and keep focus inside while open; the sheet also
+* closes when swiped down.
 */
 const ResponsiveDialog = ({ title, description, open, onClose, actions, children }) => {
-	const desktop = useIsDesktop();
-	if (!open) return null;
-	if (desktop) return /* @__PURE__ */ jsx(Dialog, {
-		title,
-		description,
-		onClose,
-		actions,
-		children
-	});
+	if (useIsDesktop()) {
+		if (!open) return null;
+		return /* @__PURE__ */ jsx(Dialog, {
+			title,
+			description,
+			onClose,
+			actions,
+			children
+		});
+	}
 	return /* @__PURE__ */ jsx(Sheet, {
 		title,
-		open: true,
+		open,
 		onClose,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "pt-3 text-[13px]",

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
-/** 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-foreground/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
-			})]
-		})]
-	});
-};
+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
+				})
+			]
+		})
+	})] })
+});
 //#endregion
 export { Sheet };