@sincpro/web-ui 1.3.0 → 1.5.0

package/dist/views/list/ListView.js

@@ -16,12 +16,13 @@ import { Breadcrumb } from "../../components/record/Breadcrumb.js";
 import { RecordTimeline } from "../../components/timeline/RecordTimeline.js";
 import { useUiCopy } from "../../foundations/copy.js";
 import { useDensity } from "../../foundations/density.js";
-import { pathKey, pileIsOpen, pilesOf, } from "../../foundations/grouping.js";
+import { pathKey, pileFoot, pileIsOpen, pilesOf, } from "../../foundations/grouping.js";
 import { pivotFrom, pivotIsEmpty } from "../../foundations/pivot.js";
 import { Button } from "../../primitives/button/Button.js";
 import { Empty, Failed, Skeleton } from "../../primitives/notice/Notice.js";
 import { PivotTable } from "../../primitives/table/PivotTable.js";
 import { ReportTable } from "../../primitives/table/ReportTable.js";
+import { ProgressBar } from "../../primitives/value/ProgressBar.js";
 import { groupedColumnIds, WIDE_PRESENTS } from "./columns.js";
 import { groupLevelsOf, reportColumnsOf, reportRowsOf, sheetFromColumns, sheetRowsOf, } from "./derive.js";
 import { SheetPresentation, TablePresentation, } from "./presentations.js";
@@ -79,6 +80,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
     const density = useDensity();
     const copy = useUiCopy();
     const loading = state?.loading === true;
+    const refreshing = state?.refreshing === true && !loading;
     const error = state?.error ?? null;
     const columnSpecs = useMemo(() => specsFromColumns(columns ?? [], false), [columns]);
     const columnControl = useColumnControl(columnSpecs, {
@@ -240,6 +242,11 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
        los decide la vista para la lista entera. */
     const first = items[0];
     const firstRow = first === undefined ? undefined : row(first);
+    /* The same foot the table draws: «Ver 50 más de 49.950», or «Se muestran 500 de …». */
+    function footOf(pile) {
+        const foot = pileFoot(pile, group?.onMore !== undefined);
+        return foot === null ? null : (_jsx(GroupMore, { foot: foot, depth: pile.depth, onMore: () => group?.onMore?.(pile) }));
+    }
     /** Los montones, con sus filas adentro. Se llama a sí misma porque el árbol
      *  tiene N niveles: un montón dibuja su encabezado y, adentro, o bien los
      *  montones de abajo o bien las filas — nunca las dos cosas. */
@@ -253,10 +260,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
                         ? null
                         : pile.piles.length > 0
                             ? renderPiles(pile.piles, nodes)
-                            : nodes(pile.items), open &&
-                        pile.piles.length === 0 &&
-                        pile.items.length < pile.count &&
-                        group?.onMore !== undefined ? (_jsx(GroupMore, { left: pile.count - pile.items.length, depth: pile.depth, onMore: () => group.onMore?.(pile) })) : null] }, key));
+                            : nodes(pile.items), open ? footOf(pile) : null] }, key));
         });
     }
     const reportRows = useMemo(() => reportRowsOf(piles, columns, row), [piles, columns, row]);
@@ -265,9 +269,14 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
             return nodes(ordered);
         return renderPiles(piles, nodes);
     }
+    const waysOf = (item) => ({
+        ...(press === undefined ? {} : { press: () => press(item) }),
+        ...(onPeek === undefined || choosing ? {} : { peek: () => onPeek(item) }),
+        ...(onOpen === undefined || choosing ? {} : { open: () => onOpen(item) }),
+    });
     const renderCard = (item) => {
         if (card !== undefined) {
-            return _jsx(Fragment, { children: card(item) }, keyOf(item));
+            return _jsx(Fragment, { children: card(item, waysOf(item)) }, keyOf(item));
         }
         const d = row(item);
         return (_jsx(RecordCard, { title: d.name, ...(d.tags === undefined ? {} : { tags: d.tags }), ...(d.meta === undefined ? {} : { meta: d.meta }), ...(press === undefined ? {} : { onOpen: () => press(item) }) }, keyOf(item)));
@@ -331,7 +340,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
     /* The list is its own container (`@container`: the presentations adapt to the width
        the LIST has, not the window) and fills the space it is given. Before, every page
        wrapped it in a `div` to get both. */
-    _jsxs("div", { ref: frame, className: "@container flex min-w-0 flex-1 flex-col bg-surface", children: [_jsxs(Listing, { bar: bar, 
+    _jsxs("div", { ref: frame, "aria-busy": refreshing || loading, className: "@container flex min-w-0 flex-1 flex-col bg-surface", children: [_jsxs(Listing, { bar: bar, 
                 /* La barra se queda arriba: con 187 filas, scrollear para ver la última
                    dejaba sin buscador, sin paginador y sin el conmutador.
                    Embedded it does NOT: the record has its own sticky parts (its rail, its tabs),
@@ -344,7 +353,9 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
                         metrics: _jsx("div", { className: "px-3.5", children: metrics }),
                     }), children: [loading ? _jsx(Skeleton, { label: copy.failed.loading }) : null, isEmpty ? (filtered ? (_jsx(Empty, { sentence: empty?.whenFiltered?.sentence ?? copy.list.emptyFiltered, ...(empty?.whenFiltered?.action === undefined
                             ? {}
-                            : { action: empty.whenFiltered.action }) })) : (_jsx(Empty, { sentence: empty?.sentence ?? copy.list.empty, ...(empty?.action === undefined ? {} : { action: empty.action }) }))) : null, loading || isEmpty ? null : body] }), error === null ? null : (_jsx("div", { className: "px-3 pt-(--spacing-block)", children: _jsx(Failed, { heading: copy.failed.list, sentence: error }) })), children] }));
+                            : { action: empty.whenFiltered.action }) })) : (_jsx(Empty, { sentence: empty?.sentence ?? copy.list.empty, ...(empty?.action === undefined ? {} : { action: empty.action }) }))) : null, _jsxs("div", { className: "relative min-w-0", children: [refreshing ? (
+                            /* Over the top edge of the rows, not above them: the rows do not move. */
+                            _jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20", children: _jsx(ProgressBar, { label: copy.list.refreshing, width: "w-full" }) })) : null, loading || isEmpty ? null : body] })] }), error === null ? null : (_jsx("div", { className: "px-3 pt-(--spacing-block)", children: _jsx(Failed, { heading: copy.failed.list, sentence: error }) })), children] }));
 }
 /** What a list offers when it fails and can be retried. */
 export function RetryAction({ onRetry }) {

package/dist/views/list/index.d.ts

@@ -1,2 +1,2 @@
 export { List, type ListPresentProps, type ListProps } from "./List.js";
-export { type ListCrumb, type ListEmpty, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type RowOf, } from "./types.js";
+export { type CardWays, type ListCrumb, type ListEmpty, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type RowOf, } from "./types.js";

package/dist/views/list/types.d.ts

@@ -41,6 +41,20 @@ export type RowOf = {
     children?: ReactNode;
     actions?: ReactNode;
 };
+/**
+ * What a press on ONE card does in this list, already bound to its record.
+ *
+ * Context: a board's own card replaced the built-in one and lost, with it, the rule of what
+ * a press does — the application had to pass it by hand. It gets the same three ways as a
+ * `List.Present` (`ListSet`), so a card written by the domain answers a click like the
+ * list's own: `press` is the rule (choose, look or open, as the list decided); `peek` and
+ * `open` are the two ways in, absent while the list is choosing.
+ */
+export type CardWays = {
+    press?: () => void;
+    peek?: () => void;
+    open?: () => void;
+};
 /**
  * The set as a presentation receives it — what a `List.Present` draws from.
  *
@@ -286,8 +300,8 @@ export type ListViewProps<T extends object> = {
      *  columns that declare `input` get a control in that row. See `DataTable`'s header.
      *  While a record is being written the table shows even if the set is empty. */
     create?: DataTableCreate<T>;
-    /** The board presentation. */
-    card?: (item: T) => ReactNode;
+    /** The board presentation: the card of one record, with what a press on it does. */
+    card?: (item: T, ways: CardWays) => ReactNode;
     /** The board by stages: one column each, cards moved between them. */
     boardStages?: BoardStages<T>;
     /** The calendar presentation: when each record happens. */
@@ -359,8 +373,16 @@ export type ListViewProps<T extends object> = {
     /** The three states, in a single place. Every view used to re-assemble them
      *  with three nested ternaries, and that is why «empty because of a filter»
      *  and «really empty» got mixed up in half the screens. */
+    /** Los estados del conjunto, en un solo lugar.
+     *
+     *  `loading` es la PRIMERA lectura: no hay filas todavía, y se dibuja el esqueleto.
+     *  `refreshing` es volver a preguntar con filas en la mano —se tipeó en la búsqueda, se
+     *  cambió de página—: las filas se quedan y una barra discreta dice que se está
+     *  preguntando. Cambiarlas por un esqueleto en cada pregunta hacía parpadear la tabla, y un
+     *  clic podía caer sobre una fila que ya no estaba. */
     state?: {
         loading?: boolean;
+        refreshing?: boolean;
         error?: string | null;
     };
     filtered?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "An enterprise web design system for business software — ERPs, back offices, management tools — in React and Tailwind: tokens, primitives, components and the two views every management screen is made of.",
   "type": "module",
   "main": "./dist/index.js",