@columenlabs/lumen-ui 0.1.47 → 0.1.49

package/dist/details-table.d.ts

@@ -12,8 +12,12 @@ export interface DetailsTableProps {
     }[];
     /** An optional total row, one cell per column. */
     foot?: ReactNode[];
+    /** The key of the row shown as picked, when rows can be picked. */
+    selected?: string;
+    /** Makes each row pickable by click or Enter/Space, for example to chart the picked row below. */
+    onSelect?: (key: string) => void;
 }
-export declare function DetailsTable({ head, rows, foot }: DetailsTableProps): import("react").JSX.Element;
+export declare function DetailsTable({ head, rows, foot, selected, onSelect }: DetailsTableProps): import("react").JSX.Element;
 /** Facts as a two-row table: the labels as the header, the values under them. */
 export declare function FactsTable({ items }: {
     items: [string, ReactNode][];

package/dist/details-table.js

@@ -1,11 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from './lib/utils.js';
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './ui/table.js';
-export function DetailsTable({ head, rows, foot }) {
+export function DetailsTable({ head, rows, foot, selected, onSelect }) {
     const marked = head.findIndex((h) => h.grow);
     const grow = marked >= 0 ? marked : head.length - 1;
     const cell = (i) => cn('num', head[i]?.right && 'text-right', i !== grow && 'w-px');
-    return (_jsx("div", { className: "-mx-1 overflow-x-auto overflow-y-hidden rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: head.map((h, i) => (_jsx(TableHead, { className: cn(h.right && 'text-right', i !== grow && 'w-px'), children: h.label }, h.label))) }) }), _jsx(TableBody, { children: rows.map((r) => (_jsx(TableRow, { children: r.cells.map((c, i) => (_jsx(TableCell, { className: cell(i), children: c }, i))) }, r.key))) }), foot && (_jsx(TableFooter, { children: _jsx(TableRow, { children: foot.map((c, i) => (_jsx(TableCell, { className: cell(i), children: c }, i))) }) }))] }) }));
+    return (_jsx("div", { className: "-mx-1 overflow-x-auto overflow-y-hidden rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: head.map((h, i) => (_jsx(TableHead, { className: cn(h.right && 'text-right', i !== grow && 'w-px'), children: h.label }, h.label))) }) }), _jsx(TableBody, { children: rows.map((r) => (_jsx(TableRow, { "data-state": r.key === selected ? 'selected' : undefined, "aria-current": r.key === selected || undefined, tabIndex: onSelect ? 0 : undefined, className: cn(onSelect &&
+                            'cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring'), onClick: onSelect && (() => onSelect(r.key)), onKeyDown: onSelect &&
+                            ((e) => {
+                                if (e.key !== 'Enter' && e.key !== ' ')
+                                    return;
+                                e.preventDefault();
+                                onSelect(r.key);
+                            }), children: r.cells.map((c, i) => (_jsx(TableCell, { className: cell(i), children: c }, i))) }, r.key))) }), foot && (_jsx(TableFooter, { children: _jsx(TableRow, { children: foot.map((c, i) => (_jsx(TableCell, { className: cell(i), children: c }, i))) }) }))] }) }));
 }
 /** Facts as a two-row table: the labels as the header, the values under them. */
 export function FactsTable({ items }) {

package/dist/lumen-view.js

@@ -367,6 +367,7 @@ function sortingOf(sort, columns, serverSorts) {
     return columns.some((f) => f.key === sort.key) ? [{ id: sort.key, desc: sort.desc }] : [];
 }
 function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null, chips = [], page = null, inView = false, fit = false, onDetails, tapped, selection, groupActions, sort, onSort, serverSorts, total = true, subgroup = null, add, serverGroups = null, }) {
+    const isMobile = useIsMobile();
     const [sorting, setSorting] = useState(() => sortingOf(sort, columns, serverSorts));
     // A saved sort patched while the table is open (the assistant's card move) applies at once.
     const savedSort = JSON.stringify(sort ?? null);
@@ -555,6 +556,9 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const lead = Math.max(1, shown.findIndex((f, i) => i > 0 && rolls(f)) < 0
         ? shown.length
         : shown.findIndex((f, i) => i > 0 && rolls(f)));
+    // On a phone the hideOnPhone columns are gone, so the label spans only the leading ones still
+    // drawn; spanning the hidden ones too pushed the group's totals right of their headers.
+    const leadSpan = Math.max(1, lead - (isMobile ? shown.slice(0, lead).filter((f) => f.hideOnPhone).length : 0));
     const rollCell = (f, members) => rollsUp(f) && f.rollRender ? (f.rollRender(members)) : rollsUp(f) ? (_jsx(ViewValueCell, { value: computed.roll(f, members), format: f.aggregate && isCountAgg(f.aggregate) ? 'rounded' : f.format, amount: f.aggregate !== 'count' && f.amount, compact: f.compact })) : null;
     const rollCells = (members) => shown.map((f) => (_jsx(TableCell, { className: colOf(f), children: rollCell(f, members) }, f.key)));
     // A row's chevron opens one level under it, closed by default: its panel, else the view's
@@ -654,7 +658,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                                             ? true
                                                             : members.some((m) => selection.keys.has(keyOf(m.original)))
                                                                 ? 'indeterminate'
-                                                                : false, onCheckedChange: (on) => toggle(members.map((m) => keyOf(m.original)), on === true), "aria-label": `Select every row of ${key}` }) })), shown.slice(lead - 1).map((f, i) => i === 0 ? (_jsxs(TableCell, { colSpan: lead, className: PINNED_GROUP, children: [_jsxs(Button, { variant: "ghost", size: "xs", className: "-mx-2 hover:bg-transparent aria-expanded:bg-transparent", "aria-expanded": open, "aria-label": `${open ? 'Collapse' : 'Expand'} ${key}`, onClick: () => serverGroups
+                                                                : false, onCheckedChange: (on) => toggle(members.map((m) => keyOf(m.original)), on === true), "aria-label": `Select every row of ${key}` }) })), shown.slice(lead - 1).map((f, i) => i === 0 ? (_jsxs(TableCell, { colSpan: leadSpan, className: PINNED_GROUP, children: [_jsxs(Button, { variant: "ghost", size: "xs", className: "-mx-2 hover:bg-transparent aria-expanded:bg-transparent", "aria-expanded": open, "aria-label": `${open ? 'Collapse' : 'Expand'} ${key}`, onClick: () => serverGroups
                                                                 ? serverGroups.onToggle(key)
                                                                 : setFlipped((c) => {
                                                                     const n = new Set(c);

package/dist/nav.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, ReactNode } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 import { type AssistantPageType } from './assistant-screen.js';
 /** A nav icon: a lucide icon, or a view's emoji drawn at icon size. */
 export type NavIcon = ComponentType<{

package/dist/nav.js

@@ -6,6 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // the name, a click folds it, the fold is remembered in the browser, and `+` never folds.
 import { Link, useRouterState } from '@tanstack/react-router';
 import { ChevronRightIcon, PlusIcon, Trash2Icon } from 'lucide-react';
+import { useState } from 'react';
 import { useAssistantPages } from './assistant-screen.js';
 import { LumenConfirm } from './confirm.js';
 import { useFolded } from './fold.js';
@@ -66,7 +67,8 @@ function SectionRow({ item, activeId, onRemove, removeLabel, }) {
     const isActive = activeId === item.id;
     // The open item shows no trash icon.
     const remove = item.fixed || isActive ? undefined : onRemove;
-    const row = (_jsxs(_Fragment, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: isActive, children: _jsxs(Link, { to: item.to, children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }), item.badge !== undefined && item.badge !== null && (_jsx(SidebarMenuBadge, { className: cn(SECTION_BADGE, 
+    const [open, setOpen] = useState(Boolean(item.defaultOpen || subActive || isActive));
+    const row = (_jsxs(_Fragment, { children: [_jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: isActive, children: _jsxs(Link, { to: item.to, onClick: subs.length ? () => setOpen((o) => (isActive ? !o : true)) : undefined, children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }), item.badge !== undefined && item.badge !== null && (_jsx(SidebarMenuBadge, { className: cn(SECTION_BADGE, 
                 // The remove icon shows on hover from md up, and always below it: make room there.
                 remove &&
                     'max-md:right-7 md:group-focus-within/menu-item:opacity-0 md:group-hover/menu-item:opacity-0'), children: item.badge })), remove && (_jsx(LumenConfirm, { title: `${removeLabel(item)}?`, action: "Remove", onConfirm: () => remove(item), children: _jsx(SidebarMenuAction, { showOnHover: true, "aria-label": removeLabel(item), title: removeLabel(item), 
@@ -74,7 +76,7 @@ function SectionRow({ item, activeId, onRemove, removeLabel, }) {
                     className: "text-muted-foreground peer-hover/menu-button:text-muted-foreground hover:bg-transparent hover:text-destructive", children: _jsx(Trash2Icon, {}) }) }))] }));
     if (!subs.length)
         return _jsx(SidebarMenuItem, { children: row });
-    return (_jsx(Collapsible, { asChild: true, defaultOpen: item.defaultOpen || subActive || isActive, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [row, _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(SidebarMenuAction, { "aria-label": `Show or hide ${item.title}`, className: "right-auto left-1.5 bg-sidebar opacity-0 group-hover/menu-item:opacity-100 focus-visible:opacity-100 peer-data-[active=true]/menu-button:bg-sidebar-accent [&>svg]:transition-transform data-[state=open]:[&>svg]:rotate-90", children: _jsx(ChevronRightIcon, {}) }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { className: "mr-0 pr-0", children: subs.map((sub) => {
+    return (_jsx(Collapsible, { asChild: true, open: open, onOpenChange: setOpen, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [row, _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(SidebarMenuAction, { "aria-label": `Show or hide ${item.title}`, className: "right-auto left-1.5 bg-sidebar opacity-0 group-hover/menu-item:opacity-100 focus-visible:opacity-100 peer-data-[active=true]/menu-button:bg-sidebar-accent [&>svg]:transition-transform data-[state=open]:[&>svg]:rotate-90", children: _jsx(ChevronRightIcon, {}) }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { className: "mr-0 pr-0", children: subs.map((sub) => {
                             const hasBadge = sub.badge !== undefined && sub.badge !== null;
                             return (_jsxs(SidebarMenuSubItem, { children: [_jsx(SidebarMenuSubButton, { asChild: true, isActive: activeId === `${item.id}/${sub.id}`, className: cn(hasBadge && 'pr-8'), children: _jsxs(Link, { to: sub.to, title: sub.title, children: [sub.icon ? (_jsx("span", { "aria-hidden": true, className: "flex shrink-0 [&>svg]:size-4", style: { color: sub.color }, children: _jsx(sub.icon, {}) })) : (sub.color && (_jsx("span", { "aria-hidden": true, className: "mx-1 size-2 shrink-0 rounded-full", style: { background: sub.color } }))), _jsx("span", { children: sub.title })] }) }), hasBadge && (_jsx("span", { className: cn('pointer-events-none absolute top-1 right-1 flex h-5 min-w-5 items-center justify-center px-1 text-xs text-muted-foreground', typeof sub.badge === 'number' && 'num'), children: sub.badge }))] }, sub.id));
                         }) }) })] }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,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.47",
+    "@columenlabs/lumen-ui-types": "0.1.49",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",