@columenlabs/lumen-ui 0.1.39 → 0.1.41

package/dist/lumen-layout.js

@@ -250,6 +250,9 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
         savedSortRef.current = savedSort;
         setHeldSort(config.sort);
     }, [savedSort, config.sort]);
+    // A server's page sorts on the server: it hears each sort held.
+    const onServerSort = paging?.onSort;
+    useEffect(() => onServerSort?.(heldSort ?? null), [onServerSort, heldSort]);
     const [details, setDetails] = useState(null);
     const onDetails = onOpen ?? (domain.details?.length ? setDetails : undefined);
     // The assistant sees the view, its data domain, its filter, how many rows show, the first of them and the
@@ -493,7 +496,8 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
     const viewCard = mainTableOf(cards);
     const viewOn = (k) => !viewCard || controlOn(viewCard, k);
     const showBox = !hideFilter && viewOn('filter');
-    const groupButton = viewOn('group') ? group.button : null;
+    // A server's page cannot be grouped: a group would bucket the one page only.
+    const groupButton = viewOn('group') && !paging ? group.button : null;
     const viewFilter = !showBox && !groupButton ? undefined : (_jsxs(_Fragment, { children: [showBox && (_jsx(LumenTokenizedFilter, { filter: filter, label: `Filter ${config.name}`, className: "min-w-0 flex-1", saved: config.filters.default, link: {
                     color: viewColor,
                     onPick: (color) => links.setColor(viewCardId, color),

package/dist/lumen-view.d.ts

@@ -57,6 +57,11 @@ export interface ServerPaging {
     onPage: (page: number) => void;
     onSize?: (size: number) => void;
     sizes?: readonly number[];
+    /** The columns the server sorts by; the rest take no header sort, and the view groups nothing,
+     *  since either would order or bucket one page only. */
+    sorts?: readonly string[];
+    /** Told the sort held (a header click, a revert), to fetch the rows in that order. */
+    onSort?: (sort: CustomViewConfig['sort']) => void;
 }
 export interface LumenViewProps<T> {
     /** The view's domain, its formula columns included (`withViewFields`). */
@@ -142,7 +147,7 @@ export interface AddColumn {
  * and ⋯, and its own filter and Group (they narrow this table only); its body
  * the table (grouped one level, or the pivot) with the loading states.
  */
-export declare function LumenView<T extends RowData>({ domain, config, rows, total, paging: server, groupBy, pivot, subgroup, load: sourceLoad, state, title, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller, cardId, tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort, onSort, shown, }: LumenViewProps<T>): import("react").JSX.Element;
+export declare function LumenView<T extends RowData>({ domain, config, rows, total, paging: server, groupBy: pickedGroup, pivot: pickedPivot, subgroup, load: sourceLoad, state, title, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller, cardId, tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort, onSort, shown, }: LumenViewProps<T>): import("react").JSX.Element;
 /** A field's colour for its header: its topic's source (a broker green, an app brown) where
  *  the group names one, else its group's (Holding, Symbol, Account, Formulas). */
 export declare function colorOf<T>(domain: ViewDomain<T>, f: ViewField<T> | undefined): string | null;
@@ -175,6 +180,9 @@ export interface LumenTableProps<T> {
     sort?: CustomViewConfig['sort'];
     /** Told the sort a header click sets, so a page can hold or save it (rule C). */
     onSort?: (sort: CustomViewConfig['sort']) => void;
+    /** The rows come sorted by a server, which sorts by these columns only: a header click asks
+     *  the server (through `onSort`) and the other headers take no click. */
+    serverSorts?: readonly string[];
     /** The + Add column head at the end of the header. */
     add?: AddColumn & {
         field?: {

package/dist/lumen-view.js

@@ -226,7 +226,7 @@ function downloadCsv({ name, columns, rows, groupBy, sort, hidden, }) {
  * and ⋯, and its own filter and Group (they narrow this table only); its body
  * the table (grouped one level, or the pivot) with the loading states.
  */
-export function LumenView({ domain, config, rows, total = rows.length, paging: server, groupBy = null, pivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, }) {
+export function LumenView({ domain, config, rows, total = rows.length, paging: server, groupBy: pickedGroup = null, pivot: pickedPivot = false, subgroup, load: sourceLoad, state, title = config.name, selection, onDetails, tapped, groupActions, controls, inLayout: inScroller = false, cardId = 'view', tools, filter, filterCount, strip, link, note, onColumns, onAddColumn, sort = config.sort, onSort, shown, }) {
     // Its controls (Edit widget ▸ Controls): Pager, Columns and Download here.
     const on = (k) => controlOn({ kind: 'table', controls: shown }, k);
     const cell = useGridCell();
@@ -234,6 +234,9 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
     // scrolls with the page.
     const inLayout = inScroller && !cell;
     const columns = pick(domain.fields, config.columns);
+    // A server's page groups and pivots nothing: either would cover the one page only.
+    const groupBy = server ? null : pickedGroup;
+    const pivot = server ? false : pickedPivot;
     // Live columns on screen keep their source reading while the market trades (#861).
     const load = useLiveLoad(sourceLoad, columns.some((c) => {
         const r = freshnessOf(domain, c);
@@ -280,7 +283,7 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
     const compare = openChart && picked.length > 1 ? (_jsx(IconButton, { icon: ChartSpline, label: `Compare ${picked.join(', ')}`, variant: "outline", onClick: () => openChart(picked) })) : null;
     // A server's page: the pager counts from the server's total, or the rows seen so far.
     const pager = server ? (_jsx(LumenPager, { total: server.total ?? server.page * server.size + rows.length, page: server.page, size: server.size, onPage: server.onPage, onSize: server.onSize ?? (() => { }), sizes: server.sizes ?? [server.size], more: server.total === null && server.more })) : paging ? (_jsx(LumenPager, { total: tableRows.length, page: page, size: pageSize, onPage: setPageIndex, onSize: setPageSize, noun: rows.length === total ? 'rows' : `of ${total} rows` })) : (_jsx("span", { className: "num px-2 text-xs text-muted-foreground", children: count }));
-    const table = pivot && config.pivot ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: tableRows, groupBy: groupBy, subgroup: sub, chips: chips, page: paging ? { index: page, size: pageSize } : null, inView: inLayout, fit: fit, onDetails: onDetails, tapped: tapped, selection: selection, groupActions: groupActions, sort: sort, onSort: onSort, total: config.total !== false, add: onAddColumn || onColumns
+    const table = pivot && config.pivot ? (_jsx(PivotTable, { domain: domain, rows: rows, pivot: config.pivot })) : (_jsx(LumenTable, { domain: domain, columns: columns, rows: tableRows, groupBy: groupBy, subgroup: sub, chips: chips, page: paging ? { index: page, size: pageSize } : null, inView: inLayout, fit: fit, onDetails: onDetails, tapped: tapped, selection: selection, groupActions: groupActions, sort: sort, onSort: onSort, serverSorts: server ? (server.sorts ?? []) : undefined, total: config.total !== false, add: onAddColumn || onColumns
             ? { ...onAddColumn, field: onColumns && { domain, columns, onColumns } }
             : undefined }));
     return (_jsx(LumenWidget, { id: cardId, kind: "table", style: "table", title: title, controls: controls, tools: state ? (tools) : (_jsxs(_Fragment, { children: [tools, compare, pager, onColumns && !onAddColumn && on('columns') && (_jsx(ColumnPicker, { domain: domain, columns: columns, onColumns: onColumns })), !pivot && on('download') && (_jsx(IconButton, { icon: DownloadIcon, label: "Download CSV", onClick: () => downloadCsv({
@@ -349,8 +352,15 @@ export function LumenTable({ load, ...props }) {
         return _jsx(LumenTableRows, { ...props });
     return (_jsx("div", { className: "relative", children: _jsx(LumenStates, { load: load, children: _jsx(LumenTableRows, { ...props }) }) }));
 }
-function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null, chips = [], page = null, inView = false, fit = false, onDetails, tapped, selection, groupActions, sort, onSort, total = true, subgroup = null, add, }) {
-    const [sorting, setSorting] = useState(sort && columns.some((f) => f.key === sort.key) ? [{ id: sort.key, desc: sort.desc }] : []);
+/** The table's sort from a view's: none when its column is not shown, or the server cannot sort
+ *  by it. */
+function sortingOf(sort, columns, serverSorts) {
+    if (!sort || (serverSorts && !serverSorts.includes(sort.key)))
+        return [];
+    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, }) {
+    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);
     const savedSortRef = useRef(savedSort);
@@ -358,8 +368,8 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
         if (savedSortRef.current === savedSort)
             return;
         savedSortRef.current = savedSort;
-        setSorting(sort && columns.some((f) => f.key === sort.key) ? [{ id: sort.key, desc: sort.desc }] : []);
-    }, [savedSort, sort, columns]);
+        setSorting(sortingOf(sort, columns, serverSorts));
+    }, [savedSort, sort, columns, serverSorts]);
     const paging = page !== null && !groupBy;
     const pagination = {
         pageIndex: paging ? page.index : 0,
@@ -451,6 +461,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
             return computed.value(now[i] ?? f, r) ?? undefined;
         },
         sortUndefined: 'last',
+        enableSorting: !serverSorts || serverSorts.includes(f.key),
         header: f.label,
         cell: ({ row }) => {
             const { shown: now, cellOf, inline, chips, computed } = latest.current;
@@ -463,12 +474,14 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                     return [{ key: x.key, node: cellOf(x, row.original, true) }];
                 }) })) : (cellOf(field, row.original, chip));
         },
-    })), [shownKeys, inlineOn]);
+    })), [shownKeys, inlineOn, serverSorts?.join(',')]);
     const table = useTable({
         features: SORTING,
         data: rows,
         columns: defs,
         state: { sorting, pagination },
+        // A server's rows come sorted; the table only shows which column it sorted by.
+        manualSorting: !!serverSorts,
         onSortingChange: (u) => {
             const next = typeof u === 'function' ? u(sorting) : u;
             setSorting(next);
@@ -604,7 +617,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
                                     ? 'ascending'
                                     : h.column.getIsSorted() === 'desc'
                                         ? 'descending'
-                                        : undefined, children: [i === 0 && groups && (_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.getToggleSortingHandler(), 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 && (_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 && (_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 && (_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/ui/tabs.d.ts

@@ -2,6 +2,6 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
 import type * as React from 'react';
 declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
 declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): React.JSX.Element;
-declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+declare function TabsTrigger({ className, onMouseDown, onKeyDown, onBlur, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/ui/tabs.js

@@ -13,8 +13,22 @@ function Tabs({ className, ...props }) {
 function TabsList({ className, ...props }) {
     return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn('inline-flex w-full items-center justify-start gap-6 overflow-x-auto overflow-y-hidden text-muted-foreground [scrollbar-width:none]', className), ...props }));
 }
-function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative inline-flex shrink-0 items-center gap-1.5 px-0 pt-0 pb-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full after:bg-transparent text-sm leading-4 font-medium whitespace-nowrap text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:rounded-sm focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:after:bg-primary data-[state=active]:[&_svg]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+// Radix focuses a trigger from its own mousedown, which browsers count as :focus-visible, so a
+// clicked tab drew the keyboard ring over its underline. A pointer press marks the trigger until
+// the next key or blur; the ring shows only without that mark.
+const pointerOn = (e) => e.currentTarget.setAttribute('data-pointer', '');
+const pointerOff = (e) => e.currentTarget.removeAttribute('data-pointer');
+function TabsTrigger({ className, onMouseDown, onKeyDown, onBlur, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", onMouseDown: (e) => {
+            pointerOn(e);
+            onMouseDown?.(e);
+        }, onKeyDown: (e) => {
+            pointerOff(e);
+            onKeyDown?.(e);
+        }, onBlur: (e) => {
+            pointerOff(e);
+            onBlur?.(e);
+        }, className: cn("relative inline-flex shrink-0 items-center gap-1.5 px-0 pt-0 pb-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full after:bg-transparent text-sm leading-4 font-medium whitespace-nowrap text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:rounded-sm focus-visible:not-data-[pointer]:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:after:bg-primary data-[state=active]:[&_svg]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn('flex-1 outline-none', className), ...props }));

package/package.json

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