@columenlabs/lumen-ui 0.1.48 → 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/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.48",
+  "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.48",
+    "@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",