@columenlabs/lumen-ui 0.1.121 → 0.1.122

package/dist/lumen-tabs.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { NavIcon } from './nav.js';
 /**
  * One tab: its icon, its name and a count or mark after it. Every tab has an icon; a tab the person edits takes theirs through `iconOf` and LumenTabDrawer.

package/dist/lumen-tabs.js

@@ -1,8 +1,64 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useScrollFade } from './scroll-fade.js';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// LumenTabs: a page's
+// tabs, each tab its own LumenLayout. The tabs sit on the left of one row and what only the open tab
+// uses (its inputs, its Run or Cancel) at the right end, so the page header keeps only what acts on
+// the whole page. Tabs and actions share one row on a phone too ("it splits into 2 rows"); only
+// actions so wide that the tabs would get under 12rem wrap to a line under them. Tabs that do not
+// fit what the actions leave fold into a More menu at the row's end, never a cut-off tab.
+import { ChevronDownIcon } from 'lucide-react';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { cn } from './lib/utils.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
 import { Tabs, TabsList, TabsTrigger } from './ui/tabs.js';
+/** The row's gap between tabs (`gap-6` in TabsList). */
+const GAP = 24;
+/** The More button, drawn like a tab. */
+const MORE = 'relative inline-flex shrink-0 items-center gap-1.5 pb-2 text-sm leading-4 font-medium whitespace-nowrap outline-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground focus-visible:rounded-sm focus-visible:ring-3 focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0';
 export function LumenTabs({ tabs, value, onChange, actions, }) {
     const shown = tabs.filter((t) => !t.hidden);
-    const fade = useScrollFade();
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "min-w-48 max-w-full flex-1", children: shown.length ? (_jsx(Tabs, { value: value, onValueChange: (v) => onChange(v), children: _jsx(TabsList, { ref: fade.ref, onScroll: fade.update, "data-fade": fade.side, className: "max-w-full overflow-x-auto", children: shown.map(({ value: v, label, icon: Icon, after }) => (_jsxs(TabsTrigger, { value: v, children: [_jsx(Icon, {}), label, after] }, v))) }) })) : null }), actions ? _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-0.5", children: actions }) : null] }));
+    const box = useRef(null);
+    const ruler = useRef(null);
+    // How many tabs fit before the More menu; all of them until measured.
+    const [fit, setFit] = useState(shown.length);
+    // The More button names the open tab when it is folded, so its width moves with the open tab.
+    const sig = `${shown.map((t) => t.value).join('|')}#${value}`;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: re-measure when the tab set changes
+    useLayoutEffect(() => {
+        const el = box.current;
+        const r = ruler.current;
+        if (!el || !r)
+            return;
+        const measure = () => {
+            const widths = [...r.children].map((c) => c.offsetWidth);
+            const more = widths.pop() ?? 0;
+            // A few pixels spare for rounding, so the row never needs to scroll.
+            const room = el.clientWidth - 4;
+            const all = widths.reduce((a, w, i) => a + w + (i ? GAP : 0), 0);
+            if (all <= room)
+                return setFit(widths.length);
+            let used = more;
+            let n = 0;
+            for (const w of widths) {
+                if (used + GAP + w > room)
+                    break;
+                used += GAP + w;
+                n++;
+            }
+            setFit(Math.max(1, n));
+        };
+        measure();
+        // The row's room, and the tabs' own widths (a count that arrives after the first paint).
+        const seen = new ResizeObserver(measure);
+        seen.observe(el);
+        seen.observe(r);
+        return () => seen.disconnect();
+    }, [sig]);
+    const inRow = shown.slice(0, fit);
+    const folded = shown.slice(fit);
+    const openFolded = folded.find((t) => t.value === value);
+    const trigger = (t) => (_jsxs(_Fragment, { children: [_jsx(t.icon, {}), t.label, t.after] }));
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { ref: box, className: "relative min-w-48 max-w-full flex-1", children: [_jsx(Tabs, { "aria-hidden": true, className: "pointer-events-none invisible absolute h-0 overflow-hidden", children: _jsxs(TabsList, { ref: ruler, className: "w-max", children: [shown.map((t) => (_jsx(TabsTrigger, { value: t.value, tabIndex: -1, children: trigger(t) }, t.value))), _jsxs("span", { "data-slot": "tabs-trigger", className: MORE, children: [openFolded ? trigger(openFolded) : 'More', _jsx(ChevronDownIcon, {})] })] }) }), shown.length ? (_jsx(Tabs, { value: value, onValueChange: (v) => onChange(v), children: _jsxs(TabsList, { className: "max-w-full overflow-x-hidden", children: [inRow.map((t) => (_jsx(TabsTrigger, { value: t.value, children: trigger(t) }, t.value))), folded.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { "data-slot": "tabs-trigger", "data-state": openFolded ? 'active' : 'inactive', className: cn(MORE, openFolded &&
+                                                'text-foreground after:bg-primary [&_svg:first-child]:text-primary'), children: [openFolded ? trigger(openFolded) : 'More', _jsx(ChevronDownIcon, { className: "text-muted-foreground" })] }), _jsx(DropdownMenuContent, { align: "end", className: "w-auto min-w-44", 
+                                            // A pick from the menu moves the tab; no keyboard ring back on the button.
+                                            onCloseAutoFocus: (e) => e.preventDefault(), children: _jsx(DropdownMenuRadioGroup, { value: value, onValueChange: (v) => onChange(v), children: folded.map((t) => (_jsx(DropdownMenuRadioItem, { value: t.value, children: trigger(t) }, t.value))) }) })] }))] }) })) : null] }), actions ? _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-0.5", children: actions }) : null] }));
 }

package/dist/scroll-fade.js

@@ -12,8 +12,9 @@ export function useScrollFade(given) {
         const el = ref.current;
         if (!el)
             return;
-        const start = el.scrollLeft > 1;
-        const end = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+        // A couple of pixels past the edge (rounding, a border) is not "more beyond it".
+        const start = el.scrollLeft > 2;
+        const end = el.scrollLeft + el.clientWidth < el.scrollWidth - 2;
         setSide(start && end ? 'both' : start ? 'start' : end ? 'end' : undefined);
     }, [ref]);
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.121",
+  "version": "0.1.122",
   "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.121",
+    "@columenlabs/lumen-ui-types": "0.1.122",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",