@columenlabs/lumen-ui 0.1.305 → 0.1.306

package/dist/lumen-bottom-sheet.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog } from 'radix-ui';
 import * as React from 'react';
 import { Drawer } from 'vaul';
+import { useKeyboardFit } from './hooks/use-keyboard-fit.js';
 import { cn } from './lib/utils.js';
 /** A snap point in px against a screen `h` px tall. */
 function px(s, h) {
@@ -27,11 +28,14 @@ function useSafeBottom() {
     }, []);
     return inset;
 }
-/** The screen's height, kept up to date. */
+/**
+ * The screen's height, kept up to date: the layout viewport, which a phone's keyboard leaves alone
+ * (iOS shrinks `innerHeight` with the keyboard, which would shrink the sheet with it).
+ */
 function useScreenHeight() {
-    const [h, setH] = React.useState(() => typeof window === 'undefined' ? 800 : window.innerHeight);
+    const [h, setH] = React.useState(() => typeof window === 'undefined' ? 800 : document.documentElement.clientHeight);
     React.useEffect(() => {
-        const on = () => setH(window.innerHeight);
+        const on = () => setH(document.documentElement.clientHeight);
         window.addEventListener('resize', on);
         return () => window.removeEventListener('resize', on);
     }, []);
@@ -51,7 +55,14 @@ export function LumenBottomSheet({ snaps, snap, onSnap, title, children, classNa
     const at = snaps.indexOf(snap);
     // The sheet is as tall as the screen and slides down to its snap; what it holds fills only the
     // part on screen, so a composer or footer at its bottom stays in view at every snap.
-    const shown = Math.min(h, Math.max(0, px(rest(snap), h)));
+    const rested = Math.min(h, Math.max(0, px(rest(snap), h)));
+    // Typing in the sheet with the keyboard up: the sheet ends at the keyboard, as tall as its snap or
+    // what is visible, so the field and the composer sit just above the keys (theme.css holds vaul's
+    // slide off while it does). A field above the sheet leaves the sheet where it rests.
+    const kb = useKeyboardFit();
+    const [typing, setTyping] = React.useState(false);
+    const lifted = typing && kb ? Math.min(rested, kb.height) : undefined;
+    const shown = lifted ?? rested;
     return (_jsx(Drawer.Root, { open: true, modal: false, dismissible: false, handleOnly: true, snapPoints: rests, activeSnapPoint: rests[at] ?? rest(snap), setActiveSnapPoint: (s) => {
             const i = s == null ? -1 : rests.indexOf(s);
             const next = snaps[i];
@@ -59,5 +70,10 @@ export function LumenBottomSheet({ snaps, snap, onSnap, title, children, classNa
                 onSnap(next);
         }, children: _jsx(Dialog.Root, { open: true, modal: false, onOpenChange: () => { }, children: _jsx(Drawer.Portal, { children: _jsxs(Drawer.Content, { "data-slot": "lumen-bottom-sheet", "aria-describedby": undefined, 
                     // Focus stays where the person was: the sheet is always there, opening it is not a move.
-                    onOpenAutoFocus: (e) => e.preventDefault(), className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { height: shown }, children: [_jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "mx-auto! my-2! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col pb-[env(safe-area-inset-bottom)]", children: children })] })] }) }) }) }));
+                    onOpenAutoFocus: (e) => e.preventDefault(), onFocus: () => setTyping(true), onBlur: (e) => {
+                        if (!e.currentTarget.contains(e.relatedTarget))
+                            setTyping(false);
+                    }, "data-lifted": lifted === undefined ? undefined : '', style: lifted === undefined || !kb
+                        ? undefined
+                        : { top: kb.top + kb.height - lifted, bottom: 'auto', height: lifted }, className: cn('fixed inset-x-0 bottom-0 z-40 flex h-dvh flex-col rounded-t-2xl border-t bg-popover text-popover-foreground shadow-[0_-4px_16px_rgb(0_0_0/0.15)] outline-none', className), children: [_jsx(Drawer.Title, { className: "sr-only", children: title }), _jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden", style: { height: shown }, children: [_jsx(Drawer.Handle, { "aria-label": "Drag to resize", className: "mx-auto! my-2! h-1! w-9! shrink-0 rounded-full! bg-border! opacity-100!" }), _jsx("div", { className: cn('flex min-h-0 flex-1 flex-col', lifted === undefined && 'pb-[env(safe-area-inset-bottom)]'), children: children })] })] }) }) }) }));
 }

package/dist/theme.css

@@ -974,3 +974,10 @@ body[data-spotlight="nav"] [data-spotlit] {
     display: none;
   }
 }
+
+/* LumenBottomSheet while the person types in it with the keyboard up: it is placed at the keyboard
+   (lumen-bottom-sheet.tsx), so vaul's slide to its snap, set inline, stays off until the keys go. */
+[data-slot="lumen-bottom-sheet"][data-lifted] {
+  transform: none !important;
+  transition: none !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.305",
+  "version": "0.1.306",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.305",
+    "@columenlabs/lumen-ui-types": "0.1.306",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",