@sincpro/web-ui 1.4.0 → 1.6.0

package/dist/primitives/table/index.d.ts

@@ -1,5 +1,6 @@
 export { type Aggregate, type DataColumn, DataTable, type DataTableCreate, type GroupColumn, } from "./DataTable.js";
-export { EditableTable, type EditAdd, type EditBands, type EditColumn, type EditLayout, sectionLines, type StackPlace, stackPlaces, type TabTarget, tabTarget, } from "./EditableTable.js";
+export { EditableTable, type EditAdd, type EditBands, type EditCellState, type EditColumn, type EditFlag, type EditLayout, type EditRowState, sectionLines, type StackPlace, stackPlaces, type TabTarget, tabTarget, } from "./EditableTable.js";
+export { PileFootLine } from "./PileFootLine.js";
 export { PivotTable, type PivotTableProps, } from "./PivotTable.js";
 export { type ReportColumn, type ReportRow, type ReportRowKind, ReportTable, } from "./ReportTable.js";
 export { type RowAction, RowActions } from "./RowActions.js";

package/dist/primitives/table/index.js

@@ -2,6 +2,7 @@
    wiring to TanStack for grouping and sorting. See the note in `DataTable.tsx`. */
 export { DataTable, } from "./DataTable.js";
 export { EditableTable, sectionLines, stackPlaces, tabTarget, } from "./EditableTable.js";
+export { PileFootLine } from "./PileFootLine.js";
 export { PivotTable, } from "./PivotTable.js";
 export { ReportTable, } from "./ReportTable.js";
 export { RowActions } from "./RowActions.js";

package/dist/primitives/table/rowWindow.d.ts

@@ -36,4 +36,7 @@ export declare function useRowWindow({ count, rowsBefore, getKey, }: {
     pad: (from: number, to: number, columns: number, key: string) => ReactNode;
     /** The spacer after the last drawn row. */
     tail: (columns: number) => ReactNode;
+    /** Scrolls row `index` into the window, so it gets drawn — for a jump past what is drawn
+     *  (`Home`, `End`, «take me to it»). Nothing when the window is off: every row is there. */
+    reveal: (index: number) => void;
 };

package/dist/primitives/table/rowWindow.js

@@ -173,5 +173,9 @@ export function useRowWindow({ count, rowsBefore = 1, getKey, }) {
             const end = rows.length === 0 ? 0 : rows[rows.length - 1].end;
             return spacer(total - end, columns, "\u0000tail");
         },
+        reveal: (index) => {
+            if (on && scroller !== null)
+                v.scrollToIndex(index, { align: "auto" });
+        },
     };
 }

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

@@ -6,7 +6,7 @@ import type { Surface } from "../../foundations/types.js";
 import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTable.js";
 import type { RowAction } from "../../primitives/table/RowActions.js";
 import type { SortState } from "../../primitives/table/Table.js";
-import { type ListCalendar, type ListCrumb, type ListEmpty, type ListGantt, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type ListTimeline, type RowOf } from "./types.js";
+import { type CardWays, type ListCalendar, type ListCrumb, type ListEmpty, type ListGantt, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type ListTimeline, type RowOf } from "./types.js";
 import type { ReactNode } from "react";
 type BarProps = {
     children?: ReactNode;
@@ -51,7 +51,8 @@ type TableProps<T extends object> = {
  *  nombre, el `meta` y las fichas. Escribirla igual es declarar que ESTA lista
  *  se puede ver como tablero. */
 type BoardProps<T> = {
-    card?: (item: T) => ReactNode;
+    /** `ways` carries the list's rule of what a press does — call `ways.press` from the card. */
+    card?: (item: T, ways: CardWays) => ReactNode;
     /** One column per stage, with drag (and Alt + ← / →) to move a card between them. */
     stages?: BoardStages<T>;
 };

package/dist/views/list/ListView.js

@@ -16,7 +16,7 @@ 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";
@@ -242,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. */
@@ -255,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]);
@@ -267,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)));

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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "1.4.0",
+  "version": "1.6.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",