@protobase/ui 0.19.4 → 0.19.5

package/dist/lib/use-focus-trap.js

@@ -2,9 +2,11 @@ import { lockPageScroll } from "./page-scroll-lock.js";
 import { useEffect, useRef } from "react";
 //#region src/lib/use-focus-trap.ts
 const focusable = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+const stack = [];
 /**
 * While `active`: moves focus into `container`, keeps Tab inside it, locks page scrolling (see `lockPageScroll`),
-* calls `onEscape` on Escape, and returns focus to the previously focused element afterwards.
+* calls `onEscape` on Escape, and returns focus to the previously focused element afterwards. A trap opened while
+* another is active takes Tab and Escape until it ends.
 */
 const useFocusTrap = (container, active, onEscape) => {
 	const escape = useRef(onEscape);
@@ -14,9 +16,12 @@ const useFocusTrap = (container, active, onEscape) => {
 		const root = container.current;
 		const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 		const unlock = lockPageScroll();
+		const token = {};
+		stack.push(token);
 		const items = () => [...root.querySelectorAll(focusable)];
 		(items()[0] ?? root).focus();
 		const onKey = (event) => {
+			if (stack.at(-1) !== token) return;
 			if (event.key === "Escape") return escape.current();
 			if (event.key !== "Tab") return;
 			const list = items();
@@ -37,6 +42,7 @@ const useFocusTrap = (container, active, onEscape) => {
 		document.addEventListener("keydown", onKey);
 		return () => {
 			document.removeEventListener("keydown", onKey);
+			stack.splice(stack.indexOf(token), 1);
 			unlock();
 			previous?.focus();
 		};

package/dist/package.js

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

package/dist/primitives/sheet-swipe.js

@@ -0,0 +1,5 @@
+//#region src/primitives/sheet-swipe.ts
+/** Whether a drag closes a sheet: mostly downwards, by 60 pixels or more. */
+const closesSheet = (dx, dy) => dy >= 60 && dy > Math.abs(dx);
+//#endregion
+export { closesSheet };

package/dist/primitives/sheet.js

@@ -1,13 +1,31 @@
 import { useFocusTrap } from "../lib/use-focus-trap.js";
+import { closesSheet } from "./sheet-swipe.js";
 import { useRef } from "react";
 import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/sheet.tsx
-/** A panel that rises from the bottom of the screen, for the filter panel on phones. */
+/**
+* A panel that rises from the bottom of the screen, for the filter panel on mobile screens. It closes on Escape, the
+* close button, a press above it and a swipe down on its header. Its content scrolls inside it when taller than the
+* panel, which stops short of the top so the screen behind stays in sight.
+*/
 const Sheet = ({ title, open, onClose, children }) => {
 	const panel = useRef(null);
+	const start = useRef(void 0);
 	useFocusTrap(panel, open, onClose);
 	if (!open) return null;
+	const down = (event) => {
+		if (event.pointerType === "touch") start.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	};
+	const up = (event) => {
+		if (!start.current) return;
+		const closes = closesSheet(event.clientX - start.current.x, event.clientY - start.current.y);
+		start.current = void 0;
+		if (closes) onClose();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "fixed inset-0 z-[80]",
 		children: [/* @__PURE__ */ jsx("div", {
@@ -22,17 +40,27 @@ const Sheet = ({ title, open, onClose, children }) => {
 			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" })
-				})]
+				className: "relative flex shrink-0 touch-none items-center justify-between border-b px-4",
+				onPointerDown: down,
+				onPointerUp: up,
+				onPointerCancel: () => start.current = void 0,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "absolute left-1/2 top-1.5 h-1 w-9 -translate-x-1/2 rounded-full bg-border-strong",
+						"aria-hidden": true
+					}),
+					/* @__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

package/dist/record-view/key-facts.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/record-view/key-facts.tsx
+/**
+* A record's key facts side by side, as the bedrooms, area and energy label of a listing on a real estate site: each
+* value under its icon, or under its label without one, wrapping onto more rows as needed, two to a row on a mobile
+* screen.
+*/
+const KeyFacts = ({ facts }) => /* @__PURE__ */ jsx("dl", {
+	className: "grid grid-cols-2 gap-x-4 gap-y-5 text-[13px] sm:flex sm:flex-wrap sm:gap-x-10",
+	children: facts.map(({ label, value, icon: Icon }) => /* @__PURE__ */ jsxs("div", {
+		title: label,
+		className: "flex min-w-0 flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "text-muted-foreground",
+			children: Icon ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+				className: "size-5",
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: label
+			})] }) : label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "min-w-0 break-words text-[15px] font-semibold text-foreground",
+			children: value
+		})]
+	}, label))
+});
+//#endregion
+export { KeyFacts };