@columenlabs/lumen-ui 0.1.161 → 0.1.163

package/dist/hooks/use-tell.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Tells `tell` a value each time the value itself changes, never because `tell` is a new function.
+ * The view hears its sort, chips and grouping through these: an app's inline callback (a new
+ * function every render) used to re-run the effect, set the app's state, render, and so on without
+ * end, asking the server for the same page each time. The value is compared by its JSON, so an
+ * equal value in a new object is not a change either. A `tell` that appears later hears the value.
+ */
+export declare function useTell<V>(value: V, tell: ((value: V) => void) | undefined): void;

package/dist/hooks/use-tell.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+/**
+ * Tells `tell` a value each time the value itself changes, never because `tell` is a new function.
+ * The view hears its sort, chips and grouping through these: an app's inline callback (a new
+ * function every render) used to re-run the effect, set the app's state, render, and so on without
+ * end, asking the server for the same page each time. The value is compared by its JSON, so an
+ * equal value in a new object is not a change either. A `tell` that appears later hears the value.
+ */
+export function useTell(value, tell) {
+    const tellRef = React.useRef(tell);
+    tellRef.current = tell;
+    const valueRef = React.useRef(value);
+    valueRef.current = value;
+    const sent = React.useRef(null);
+    const key = JSON.stringify(value ?? null);
+    const has = !!tell;
+    React.useEffect(() => {
+        const mark = has ? key : null;
+        if (mark === null || sent.current === mark)
+            return;
+        sent.current = mark;
+        tellRef.current?.(valueRef.current);
+    }, [key, has]);
+}

package/dist/index.d.ts

@@ -95,6 +95,7 @@ export { TILE_WIDTH, Tile, TileChip, type TileOption, TileRow, TileSpark, TileTo
 export { type FacetCounts, type FilterField, type FilterToken, LumenTokenizedFilter, type LumenFilterState, countsShown, useFacetCounts, useLumenFilter, } from './lumen-filter.js';
 export { LumenFilterPanel, LumenFilterPanelButton, type LumenFilterPanelProps, useFilterPanel, } from './lumen-filter-panel.js';
 export { useIsMobile } from './hooks/use-mobile.js';
+export { useTell } from './hooks/use-tell.js';
 export { useBackClose } from './hooks/use-back-close.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';
 export { type AppViewState, useAppView } from './app-views.js';

package/dist/index.js

@@ -102,6 +102,7 @@ export { TILE_WIDTH, Tile, TileChip, TileRow, TileSpark, TileToggleGroup, } from
 export { LumenTokenizedFilter, countsShown, useFacetCounts, useLumenFilter, } from './lumen-filter.js';
 export { LumenFilterPanel, LumenFilterPanelButton, useFilterPanel, } from './lumen-filter-panel.js';
 export { useIsMobile } from './hooks/use-mobile.js';
+export { useTell } from './hooks/use-tell.js';
 export { useBackClose } from './hooks/use-back-close.js';
 export { VIEW_ICONS, iconOf, viewIcon } from './view-icons.js';
 export { useAppView } from './app-views.js';

package/dist/lumen-filter-panel.js

@@ -89,7 +89,7 @@ export function LumenFilterPanel({ filter, open, onOpenChange, tips, order, titl
 /** One field: its values ticked in place, or a number field's range. */
 function Section({ field, filter, facets: { counts, empties }, tip, }) {
     const { tokens, setTokens } = filter;
-    const shown = countsShown(filter);
+    const shown = countsShown(filter, field.key);
     const mine = tokens.filter((t) => t.key === field.key);
     const not = mine.some((t) => t.not);
     const [more, setMore] = useState(false);

package/dist/lumen-filter.d.ts

@@ -36,10 +36,13 @@ export declare function filterByTokens<T>(rows: T[], fields: FilterField<T>[], t
 /** The row's text, for `contains` tokens. */
 text?: (row: T) => string[]): T[];
 /** A server's counts per field: each value's rows, and the rows with no value (`none`), over the
- *  rows every other field's tokens keep. */
+ *  rows every other field's tokens keep. `counted: false` gives a field's values to pick without
+ *  counts, for when the server could not count them without reading every row: the box and the
+ *  panel list the values and show no numbers. */
 export type FacetCounts = Record<string, {
     values: Record<string, number>;
     none?: number;
+    counted?: boolean;
 }>;
 /**
  * Each field's values with their counts, shared by the filter box and the filter panel. A field
@@ -50,11 +53,12 @@ export declare function useFacetCounts<T>(filter: LumenFilterState<T>): {
     counts: Map<string, Map<string, number>>;
     empties: Map<string, number>;
 };
-/** Whether a count means something: over a server's page only when the server counted. */
+/** Whether a count means something: over a server's page only when the server counted (that
+ *  field, when `key` is given). */
 export declare const countsShown: (filter: {
     partial: boolean;
     facets: FacetCounts | null;
-}) => boolean;
+}, key?: string) => boolean;
 /** Keeps the tokens and text, and filters `rows` by them. */
 export declare function useLumenFilter<T>(rows: T[], fields: FilterField<T>[], { text: textOf, initial, partial, facets, }?: {
     /** Free-text haystack per row (a name, an id), besides the field values. */

package/dist/lumen-filter.js

@@ -149,8 +149,9 @@ export function useFacetCounts(filter) {
         return { counts, empties };
     }, [fields, indexed, tokens, facets]);
 }
-/** Whether a count means something: over a server's page only when the server counted. */
-export const countsShown = (filter) => !filter.partial || !!filter.facets;
+/** Whether a count means something: over a server's page only when the server counted (that
+ *  field, when `key` is given). */
+export const countsShown = (filter, key) => (filter.facets ? key === undefined || filter.facets[key]?.counted !== false : !filter.partial);
 /** Keeps the tokens and text, and filters `rows` by them. */
 export function useLumenFilter(rows, fields, { text: textOf, initial = [], partial = false, facets, } = {}) {
     const [tokens, setRaw] = useState(() => onePerField(initial));
@@ -312,7 +313,7 @@ function NumberCondition({ label, current, tall, count, onSet, }) {
 export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label = 'Filter', className, saved, onSave, changed, link: given, }) {
     const { fields, indexed, tokens, setTokens, text, setText, hasText } = filter;
     // Over one page of a server's rows a count is not the real one: show none, unless the server counted.
-    const tally = (n) => (countsShown(filter) ? n : '');
+    const tally = (n, key) => (countsShown(filter, key) ? n : '');
     // Text counts are over the rows loaded: none over a server's page.
     const pageTally = (n) => (filter.partial ? '' : n);
     // A box its card passes no link takes the card's own (every card carries a square).
@@ -530,14 +531,14 @@ export function LumenTokenizedFilter({ filter, placeholder = 'Filter…', label
         return (_jsxs(CommandItem, { value: `${key}:${value}`, onSelect: () => toggle(key, value), className: tall, children: [_jsx(Checkbox, { checked: on, tabIndex: -1, "aria-hidden": true, className: "pointer-events-none" }), prefix && _jsx("span", { className: "shrink-0 text-muted-foreground", children: prefix }), _jsx("span", { className: "min-w-0 truncate", children: value }), _jsx(Button, { variant: "ghost", size: "xs", className: "-my-1 ml-auto h-6 px-1.5 font-normal text-muted-foreground opacity-0 group-data-selected/command-item:opacity-100 max-md:opacity-100", "aria-label": `Only ${value}`, onMouseDown: (e) => e.preventDefault(), onClick: (e) => {
                         e.stopPropagation();
                         only(key, value);
-                    }, children: "Only" }), _jsx(CommandShortcut, { className: cn('ml-0 w-8 text-right', shortcut), children: tally(count) })] }, `${key}:${value}`));
+                    }, children: "Only" }), _jsx(CommandShortcut, { className: cn('ml-0 w-8 text-right', shortcut), children: tally(count, key) })] }, `${key}:${value}`));
     };
     // A field's "No <field>" row, pinned above its values: the rows with no value (Exclude: any).
     const emptyRow = (f, include) => {
         const n = empties.get(f.key) ?? 0;
         if (!n && !hasEmpty(f.key))
             return null;
-        return (_jsxs(CommandItem, { value: `${f.key}:${EMPTY_VALUE}`, onSelect: () => toggleEmpty(f.key, include ? false : undefined), className: tall, children: [_jsx(Checkbox, { checked: hasEmpty(f.key), tabIndex: -1, "aria-hidden": true, className: "pointer-events-none" }), _jsx("span", { className: "min-w-0 truncate text-muted-foreground italic", children: noneOf(f.label) }), _jsx(CommandShortcut, { className: cn('ml-auto w-8 text-right', shortcut), children: tally(n) })] }, `${f.key}:${EMPTY_VALUE}`));
+        return (_jsxs(CommandItem, { value: `${f.key}:${EMPTY_VALUE}`, onSelect: () => toggleEmpty(f.key, include ? false : undefined), className: tall, children: [_jsx(Checkbox, { checked: hasEmpty(f.key), tabIndex: -1, "aria-hidden": true, className: "pointer-events-none" }), _jsx("span", { className: "min-w-0 truncate text-muted-foreground italic", children: noneOf(f.label) }), _jsx(CommandShortcut, { className: cn('ml-auto w-8 text-right', shortcut), children: tally(n, f.key) })] }, `${f.key}:${EMPTY_VALUE}`));
     };
     const summary = (c) => {
         const w = chipWords(c, fieldOf(c.key), 'full');

package/dist/lumen-layout.js

@@ -19,6 +19,7 @@ import { ConnectOffer } from './connections.js';
 import { usePageKey } from './fold.js';
 import { useGroup } from './group-button.js';
 import { useIsMobile } from './hooks/use-mobile.js';
+import { useTell } from './hooks/use-tell.js';
 import { SourceStatusItems, useJoins } from './joins.js';
 import { useYourData } from './joins.js';
 import { lazyPart } from './lazy-part.js';
@@ -249,7 +250,8 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
         savedFiltersRef.current = savedFilters;
         setTokens(config.filters.default);
     }, [savedFilters, config.filters.default, setTokens]);
-    useEffect(() => onTokens?.(filter.tokens), [onTokens, filter.tokens]);
+    // Told through a ref, so an app's inline callback never loops (useTell).
+    useTell(filter.tokens, onTokens);
     const group = useGroup(domain, config);
     // The sort the person set by a header click, held like the chips and grouping (rule C).
     const [heldSort, setHeldSort] = useState(config.sort);
@@ -262,8 +264,7 @@ function ViewLayout({ crumbs, actions, meta, status, intro, cards: extra, lead,
         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]);
+    useTell(heldSort ?? null, paging?.onSort);
     const [details, setDetails] = useState(null);
     const onDetails = onOpen ?? (domain.details?.length ? setDetails : undefined);
     const openKey = onOpen ? (openedKey ?? null) : details === null ? null : domain.rowKey(details);

package/dist/lumen-view.js

@@ -15,6 +15,7 @@ import { DrawerSection } from './drawer-section.js';
 import { useFloatingHead } from './floating-head.js';
 import { FreshnessMark, freshnessLine, freshnessOf } from './freshness.js';
 import { useIsMobile } from './hooks/use-mobile.js';
+import { useTell } from './hooks/use-tell.js';
 import { IconButton } from './icon-button.js';
 import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
@@ -236,8 +237,7 @@ export function LumenView({ domain, config, rows, total = rows.length, paging: s
     // server groups it.
     const groupBy = server && !server.groups ? null : pickedGroup;
     const served = server?.groups && groupBy ? server.groups : null;
-    const onGroup = server?.groups?.onGroup;
-    useEffect(() => onGroup?.(groupBy?.key ?? null), [onGroup, groupBy?.key]);
+    useTell(groupBy?.key ?? null, server?.groups?.onGroup);
     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) => {

package/package.json

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