@columenlabs/lumen-ui 0.1.61 → 0.1.63

package/dist/lumen-view.js

@@ -10,7 +10,7 @@ import { controlOn, isCountAgg, isDollarFormat, viewPageSizes, viewPaginationSch
 import { DndContext, closestCenter } from '@dnd-kit/core';
 import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
 import { createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from '@tanstack/react-table';
-import { ArrowDownIcon, ArrowUpIcon, ChartCandlestick, ChartSpline, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, Grid3x3Icon, LayoutDashboardIcon, PencilIcon, PlusIcon, Settings2Icon, SigmaIcon, SparklesIcon, TableIcon, UserPenIcon, } from 'lucide-react';
+import { ArrowDownIcon, ArrowUpIcon, ChartCandlestick, ChartSpline, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, Grid3x3Icon, LayoutDashboardIcon, ListCollapseIcon, PencilIcon, PlusIcon, Settings2Icon, SigmaIcon, SparklesIcon, TableIcon, UserPenIcon, } from 'lucide-react';
 import Papa from 'papaparse';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAssistantNote } from './assistant-context.js';
@@ -614,6 +614,22 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const opens = (row) => (domain.panel ? panelOf(row) !== null : partsOf(row).length > 1);
     const openLabel = () => domain.panel?.label ?? subgroup?.label.toLowerCase() ?? 'parts';
     const folds = !domain.panel && !!subgroup?.under && !flat;
+    // Every folded line's key, so the header's menu can open or close them all at once.
+    const foldKeys = () => {
+        const under = folds ? subgroup?.under : undefined;
+        if (!under || !groups)
+            return [];
+        return groups.flatMap(([g, ms]) => {
+            const counts = new Map();
+            for (const r of ms)
+                counts.set(under(r.original), (counts.get(under(r.original)) ?? 0) + 1);
+            return [...counts]
+                .filter(([, n]) => n > 1 || subgroup?.always)
+                .map(([k]) => `under:${g}\u0000${k}`);
+        });
+    };
+    const anyFoldClosed = folds && foldKeys().some((k) => !openParts.has(k));
+    const setAllParts = (open) => setOpenParts(new Set(open === !!subgroup?.open ? [] : foldKeys()));
     const flatName = (row) => flat && subgroup?.under ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [subgroup.mark?.(subgroup.under(row), [row]), _jsx("span", { className: "truncate", children: subgroup.under(row) })] })) : null;
     const nests = folds || sorted.some((r) => opens(r.original));
     const chevron = (k, name) => (_jsx(Button, { variant: "ghost", size: "icon-xs", className: "-ml-1", "aria-expanded": openParts.has(k), "aria-label": `${openParts.has(k) ? 'Hide' : 'Show'} ${name}`, onClick: (e) => {
@@ -702,7 +718,16 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                         ? 'ascending'
                                         : h.column.getIsSorted() === 'desc'
                                             ? 'descending'
-                                            : undefined, children: [i === 0 && groups && (!serverGroups || serverGroups.onToggleAll) && (_jsx(IconButton, { icon: anyClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: anyClosed ? 'Expand all groups' : 'Collapse all groups', onClick: () => setAll(anyClosed) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", className: cn('font-medium', !(i === 0 && groups) && '-mx-2'), style: { color: colorOf(domain, shown[i]) ?? undefined }, onClick: h.column.getCanSort() ? h.column.getToggleSortingHandler() : undefined, children: [shown[i] ? _jsx(FreshnessMark, { domain: domain, field: shown[i] }) : null, flexRender(h.column.columnDef.header, h.getContext()), _jsx(SortIcon, { dir: h.column.getIsSorted() })] }) }), shown[i] && (domain.groups?.length || freshnessOf(domain, shown[i])) ? (_jsxs(TooltipContent, { children: [domain.groups?.length ? _jsx("div", { children: pathOf(domain, shown[i]) }) : null, freshnessLine(domain, shown[i]) ? (_jsx("div", { children: freshnessLine(domain, shown[i]) })) : null] })) : null] })] }, h.id))), add && (_jsx(TableHead, { className: cn('w-8 pl-1', PINNED_HEAD), children: _jsx(AddColumnMenu, { add: add, fieldOpen: fieldOpen, onFieldOpen: setFieldOpen }) }))] }, hg.id))) }), _jsxs(TableBody, { children: [!rows.length && !serverGroups?.list?.length && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center text-muted-foreground", children: "No rows match." }) })), groups && groupBy
+                                            : undefined, children: [i === 0 && groups && folds && !serverGroups && (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { icon: anyClosed || anyFoldClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: "Expand or collapse rows" }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-52", children: [_jsxs(DropdownMenuItem, { onSelect: () => {
+                                                                setAll(true);
+                                                                setAllParts(true);
+                                                            }, children: [_jsx(ChevronsUpDownIcon, {}), " Expand all"] }), _jsxs(DropdownMenuItem, { onSelect: () => {
+                                                                setAll(true);
+                                                                setAllParts(false);
+                                                            }, children: [_jsx(ListCollapseIcon, {}), " Close every ", subgroup?.label.toLowerCase()] }), _jsxs(DropdownMenuItem, { onSelect: () => setAll(false), children: [_jsx(ChevronsDownUpIcon, {}), " Collapse all"] })] })] })), i === 0 &&
+                                            groups &&
+                                            !(folds && !serverGroups) &&
+                                            (!serverGroups || serverGroups.onToggleAll) && (_jsx(IconButton, { icon: anyClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: anyClosed ? 'Expand all groups' : 'Collapse all groups', onClick: () => setAll(anyClosed) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", className: cn('font-medium', !(i === 0 && groups) && '-mx-2'), style: { color: colorOf(domain, shown[i]) ?? undefined }, onClick: h.column.getCanSort() ? h.column.getToggleSortingHandler() : undefined, children: [shown[i] ? _jsx(FreshnessMark, { domain: domain, field: shown[i] }) : null, flexRender(h.column.columnDef.header, h.getContext()), _jsx(SortIcon, { dir: h.column.getIsSorted() })] }) }), shown[i] && (domain.groups?.length || freshnessOf(domain, shown[i])) ? (_jsxs(TooltipContent, { children: [domain.groups?.length ? _jsx("div", { children: pathOf(domain, shown[i]) }) : null, freshnessLine(domain, shown[i]) ? (_jsx("div", { children: freshnessLine(domain, shown[i]) })) : null] })) : null] })] }, h.id))), add && (_jsx(TableHead, { className: cn('w-8 pl-1', PINNED_HEAD), children: _jsx(AddColumnMenu, { add: add, fieldOpen: fieldOpen, onFieldOpen: setFieldOpen }) }))] }, hg.id))) }), _jsxs(TableBody, { children: [!rows.length && !serverGroups?.list?.length && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center text-muted-foreground", children: "No rows match." }) })), groups && groupBy
                                 ? groups.map(([key, members], gi) => {
                                     const open = isOpen(key, gi);
                                     return (_jsxs(Fragment, { children: [_jsxs(TableRow, { className: ROLLUP, "data-group": key, children: [selection && (_jsx(TableCell, { className: cn('w-8 pr-0', PINNED_GROUP), children: _jsx(Checkbox, { checked: members.every((m) => selection.keys.has(keyOf(m.original)))

package/dist/nav.d.ts

@@ -72,7 +72,7 @@ export declare function SidebarSection({ label, items, onAdd, addLabel, onRemove
     loading?: boolean;
     /** Shown when there are no items. */
     empty?: ReactNode;
-    /** Extra content under the items (a search box, a retry line). */
+    /** Extra content under the items (a search box, a retry line); left out on the icon rail. */
     children?: ReactNode;
     /** What its items stand for in the assistant's @ picker; plain pages by default. */
     pageType?: AssistantPageType;

package/dist/nav.js

@@ -110,5 +110,5 @@ export function SidebarSection({ label, items, onAdd, addLabel = `Add to ${label
     }
     return (_jsx(FoldGroup, { label: label, action: onAdd && (_jsx(SidebarGroupAction, { title: addLabel, "aria-label": addLabel, onClick: onAdd, children: _jsx(PlusIcon, {}) })), children: _jsxs(SidebarGroupContent, { children: [_jsxs(SidebarMenu, { children: [loading
                             ? [0, 1].map((i) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuSkeleton, { showIcon: true }) }, i)))
-                            : items.map((item) => (_jsx(SectionRow, { item: item, activeId: activeId, onRemove: onRemove, removeLabel: removeLabel }, item.id))), !loading && !items.length && empty && (_jsx("li", { className: "px-2 py-1 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: empty }))] }), children] }) }));
+                            : items.map((item) => (_jsx(SectionRow, { item: item, activeId: activeId, onRemove: onRemove, removeLabel: removeLabel }, item.id))), !loading && !items.length && empty && (_jsx("li", { className: "px-2 py-1 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: empty }))] }), children && _jsx("div", { className: "group-data-[collapsible=icon]:hidden", children: children })] }) }));
 }

package/dist/ui/sidebar.js

@@ -112,10 +112,10 @@ function SidebarInput({ className, ...props }) {
     return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn('bg-background h-8 w-full shadow-none', className), ...props }));
 }
 function SidebarHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn('gap-2 p-2 flex flex-col', className), ...props }));
+    return (_jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn('gap-2 p-2 flex flex-col group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon]:whitespace-nowrap', className), ...props }));
 }
 function SidebarFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn('gap-2 p-2 flex flex-col', className), ...props }));
+    return (_jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn('gap-2 p-2 flex flex-col group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon]:whitespace-nowrap', className), ...props }));
 }
 function SidebarSeparator({ className, ...props }) {
     return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn('bg-sidebar-border mx-2 w-auto', className), ...props }));

package/package.json

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