@mendylanda/ui 0.3.0-alpha.9 → 0.3.0

package/README.md

@@ -86,9 +86,9 @@ Opening the menu shows the category list without choosing a filter. Focusing a c
 
 See [defaults and app configuration](https://ui.mendylanda.com/docs/defaults) for the full behavior and [system reference](https://ui.mendylanda.com/docs/system) for query adapters, selected-label loading, grouped fields, and custom editors.
 
-## Table (alpha)
+## Table
 
-Install `@mendylanda/ui@alpha` to try the table. This API may change during the alpha.
+The table is exported from `@mendylanda/ui/table`.
 
 ```tsx
 import { DataTable, defineColumns, format } from "@mendylanda/ui/table";
@@ -119,7 +119,7 @@ Pass a filter controller once to place the shared filter bar and connect table r
 
 Create the controller with `useFilters`, `useUrlFilters`, or `useControlledFilters`. Its values remain application query state. The table does not derive a predicate or fetch rows from filter definitions. Set `filterBar={false}` when controls live elsewhere, or use `TableFilters` and `TableView` with the same controller in a composed layout.
 
-Tables fit their rows, headers, and empty content by default, capped at 65dvh. Short tables do not reserve a vertical scrollbar. Full-page layouts can set an explicit `height`. Rows remain 44px unless `rowHeight="auto"` opts into measurement for wrapped or editable content. Selected rows receive the standard highlight; `isRowHighlighted` adds application state. `onRowClick`, `rowClassName`, and `renderRowDetail` cover row actions and expandable content.
+Tables use `layout="content"` by default, fitting their rows, headers, and empty content up to 65dvh. Short tables do not reserve a vertical scrollbar. An explicit `height` sets the table viewport in content layout. `layout="fill"` measures the space from the component's top to the bottom of the viewport and remeasures when the viewport resizes or content above the table changes size. `DataTable` reserves its toolbar, pagination, and footer automatically. Composed layouts can pass controls below the grid through `TableView`'s `footer` prop. Rows remain 44px unless `rowHeight="auto"` opts into measurement for wrapped or editable content. Selected rows receive the standard highlight; `isRowHighlighted` adds application state. `onRowClick`, `rowClassName`, and `renderRowDetail` cover row actions and expandable content.
 
 Changes to table query state or the shared controller reset scroll and cell selection. Appending rows keeps the current position and selection. Empty states distinguish an empty dataset, an empty filtered result with one controller clear, and an empty later page that can return to the first page. Locked filters never get a clear action.
 

package/dist/table/data-table.js

@@ -1,11 +1,13 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useDataTable } from "./use-data-table.js";
 import { TableView } from "./table-view.js";
 import { TableColumnSettings, TablePagination } from "./table-controls.js";
 import { TableFilters } from "./table-filters.js";
-function ControlledTable({ table, toolbar, footer, showColumnSettings = true, showPagination = false, filters, filterBar, ...view }) {
-    return (_jsxs("div", { "data-mendy-ui": "", className: "mui-184ddc11e5f9 mui-267171770524", children: [(toolbar || showColumnSettings || (filters && filterBar !== false)) && (_jsxs("div", { className: "mui-222f930b8752 mui-faa8a23c68f6 mui-b9677bd1cb66 mui-32c92bb1fde4 mui-074569488cca", children: [_jsxs("div", { className: "mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-267171770524", children: [filters && filterBar !== false && _jsx(TableFilters, { ...filterBar, filters: filters }), !filters && toolbar] }), filters && toolbar, showColumnSettings && _jsx(TableColumnSettings, { table: table })] })), _jsx(TableView, { table: table, filters: filters, ...view }), showPagination && (_jsx(TablePagination, { table: table, loading: view.status === "loading" || view.refreshing })), footer] }));
+import { TableFrame } from "./table-frame.js";
+function ControlledTable({ table, toolbar, footer, showColumnSettings = true, showPagination = false, filters, filterBar, layout = "content", ...view }) {
+    const fill = layout === "fill";
+    return (_jsx(TableFrame, { layout: layout, slot: "data-table", header: (toolbar || showColumnSettings || (filters && filterBar !== false)) && (_jsxs("div", { className: "mui-222f930b8752 mui-27ead27a81df mui-faa8a23c68f6 mui-b9677bd1cb66 mui-32c92bb1fde4 mui-074569488cca", children: [_jsxs("div", { className: "mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-267171770524", children: [filters && filterBar !== false && _jsx(TableFilters, { ...filterBar, filters: filters }), !filters && toolbar] }), filters && toolbar, showColumnSettings && _jsx(TableColumnSettings, { table: table })] })), footer: showPagination || footer ? (_jsxs(_Fragment, { children: [showPagination && (_jsx("div", { className: "mui-27ead27a81df", children: _jsx(TablePagination, { table: table, loading: view.status === "loading" || view.refreshing }) })), footer] })) : undefined, children: _jsx(TableView, { table: table, filters: filters, ...view, height: fill ? "100%" : view.height }) }));
 }
 function ConfiguredTable(props) {
     const table = useDataTable(props);

package/dist/table/table-frame.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+/** Shared sizing for the composed view and the table with built-in controls. */
+export declare function TableFrame({ layout, stretch, slot, header, footer, children, }: {
+    layout: "content" | "fill";
+    stretch?: boolean;
+    slot?: string;
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-frame.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+import { useFillLayout } from "./use-fill-layout.js";
+/** Shared sizing for the composed view and the table with built-in controls. */
+export function TableFrame({ layout, stretch = false, slot = "table-view", header, footer, children, }) {
+    const fill = layout === "fill";
+    const ref = useFillLayout(fill);
+    return (_jsxs("div", { ref: ref, "data-mendy-ui": "", "data-slot": slot, "data-layout": layout, className: cn("mui-184ddc11e5f9", fill ? "mui-222f930b8752 mui-410da8dfa8ac mui-302c0d124a94 mui-074569488cca" : "mui-267171770524"), style: !fill && stretch ? { height: "100%" } : undefined, children: [header && _jsx("div", { className: "mui-27ead27a81df", children: header }), _jsx("div", { className: fill ? "mui-0f2a693e93e2 mui-410da8dfa8ac mui-7bd5bab6d7f4 mui-b5985369ee35" : undefined, style: !fill && stretch ? { height: "100%" } : undefined, children: children }), footer && _jsx("div", { className: "mui-27ead27a81df mui-267171770524", children: footer })] }));
+}

package/dist/table/table-view.d.ts

@@ -20,6 +20,10 @@ export interface TableViewProps<T extends object> extends TableDataState {
     label?: string;
     /** Defaults to "auto": fit the rows, capped at 65% of the viewport height. */
     height?: number | string;
+    /** Fill the remaining page height, or fit content by default. Fill overrides height. */
+    layout?: "content" | "fill";
+    /** Controls below the grid, included in the available height when layout is fill. */
+    footer?: ReactNode;
     /** Auto measures multiline rows and retains all columns to keep their height stable. */
     rowHeight?: number | "auto";
     rowClassName?: (row: T) => string | undefined;
@@ -45,4 +49,4 @@ export interface TableViewProps<T extends object> extends TableDataState {
     rowSelectionControls?: boolean;
     onCopyError?: (error: unknown) => void;
 }
-export declare function TableView<T extends object>({ table, label, height, rowHeight: rowHeightOption, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status, refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, rowSelectionControls, onCopyError, }: TableViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TableView<T extends object>({ table, label, height, layout: layoutMode, footer, rowHeight: rowHeightOption, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status, refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, rowSelectionControls, onCopyError, }: TableViewProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-view.js

@@ -13,7 +13,9 @@ import { TableInitialState } from "./table-feedback.js";
 import { useTableInteraction } from "./use-table-interaction.js";
 import { useTableResults } from "./use-table-results.js";
 import { useInlineRowSelection } from "./use-inline-row-selection.js";
-export function TableView({ table, label = "Data table", height = "auto", rowHeight: rowHeightOption = 44, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status = "ready", refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, rowSelectionControls = true, onCopyError, }) {
+import { TableFrame } from "./table-frame.js";
+export function TableView({ table, label = "Data table", height = "auto", layout: layoutMode = "content", footer, rowHeight: rowHeightOption = 44, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status = "ready", refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, rowSelectionControls = true, onCopyError, }) {
+    const fill = layoutMode === "fill";
     const { resultKey, hasFilters, clearFilters } = useTableResults(table, queryKey, filters);
     const autoRowHeight = rowHeightOption === "auto" || Boolean(renderRowDetail);
     const rowHeight = rowHeightOption === "auto" ? 44 : rowHeightOption;
@@ -99,10 +101,10 @@ export function TableView({ table, label = "Data table", height = "auto", rowHei
         virtual,
     ]);
     const headersById = new Map(table.getFlatHeaders().map((header) => [header.column.id, header]));
-    return (_jsxs("div", { "data-mendy-ui": "", className: "mui-184ddc11e5f9", children: [_jsx("div", { "aria-live": "polite", className: "mui-32fb090591d9", children: announcement }), _jsxs("div", { ref: setContainer, role: "grid", tabIndex: -1, "aria-label": label, "aria-rowcount": renderRowDetail ? -1 : rows.length + 1, "aria-colcount": layout.columns.length, "aria-busy": status === "loading" || refreshing, style: {
-                    height: height === "auto" ? undefined : height,
-                    maxHeight: height === "auto" ? "65dvh" : undefined,
-                }, className: cn("mui-d2d9e1f13413 mui-014aadadffad mui-1a26a0d28420 mui-3fa8c572949b mui-4f1a55de40bc mui-5b272f3c5076 mui-c74ab393b96d mui-b30fc56058b6", className), onKeyDown: onKeyDown, children: [_jsx("div", { role: "row", "aria-rowindex": 1, className: "mui-964a9431ff49 mui-98599e4ee250 mui-4e8f0a87a0dc mui-222f930b8752 mui-2bf6510f1330 mui-bbe39cfb5cc6 mui-5b272f3c5076", style: { width: totalWidth }, children: columns.map((column) => (_jsxs(Fragment, { children: [columnGaps.has(column.id) && (_jsx("div", { "aria-hidden": "true", className: "mui-27ead27a81df", style: { width: columnGaps.get(column.id) } })), _jsx(TableHeaderCell, { table: table, header: headersById.get(column.id), index: columnIndexes.get(column.id), style: cellStyle(column), renderHeader: renderHeader, contentClassName: contentClassName, selectLoaded: selectLoaded }, column.id)] }, column.id))) }), _jsx(TableInitialState, { status: status, hasRows: rows.length > 0, loadingState: loadingState ?? (_jsx(TableLoadingRows, { columns: columns, columnGaps: columnGaps, width: totalWidth, rowHeight: rowHeight, cellStyle: cellStyle, count: height === "auto"
+    return (_jsxs(TableFrame, { layout: layoutMode, stretch: height === "100%", footer: footer, children: [_jsx("div", { "aria-live": "polite", className: "mui-32fb090591d9", children: announcement }), _jsxs("div", { ref: setContainer, role: "grid", tabIndex: -1, "aria-label": label, "aria-rowcount": renderRowDetail ? -1 : rows.length + 1, "aria-colcount": layout.columns.length, "aria-busy": status === "loading" || refreshing, style: {
+                    height: fill || height === "auto" ? undefined : height,
+                    maxHeight: !fill && height === "auto" ? "65dvh" : undefined,
+                }, className: cn("mui-d2d9e1f13413 mui-014aadadffad mui-1a26a0d28420 mui-3fa8c572949b mui-4f1a55de40bc mui-5b272f3c5076 mui-c74ab393b96d mui-b30fc56058b6", fill && "mui-410da8dfa8ac mui-7bd5bab6d7f4", className), onKeyDown: onKeyDown, children: [_jsx("div", { role: "row", "aria-rowindex": 1, className: "mui-964a9431ff49 mui-98599e4ee250 mui-4e8f0a87a0dc mui-222f930b8752 mui-2bf6510f1330 mui-bbe39cfb5cc6 mui-5b272f3c5076", style: { width: totalWidth }, children: columns.map((column) => (_jsxs(Fragment, { children: [columnGaps.has(column.id) && (_jsx("div", { "aria-hidden": "true", className: "mui-27ead27a81df", style: { width: columnGaps.get(column.id) } })), _jsx(TableHeaderCell, { table: table, header: headersById.get(column.id), index: columnIndexes.get(column.id), style: cellStyle(column), renderHeader: renderHeader, contentClassName: contentClassName, selectLoaded: selectLoaded }, column.id)] }, column.id))) }), _jsx(TableInitialState, { status: status, hasRows: rows.length > 0, loadingState: loadingState ?? (_jsx(TableLoadingRows, { columns: columns, columnGaps: columnGaps, width: totalWidth, rowHeight: rowHeight, cellStyle: cellStyle, count: !fill && height === "auto"
                                 ? 8
                                 : Math.max(1, Math.ceil(((virtual.scrollRect?.height ?? 400) - rowHeight) / rowHeight)) })), emptyState: emptyState, hasFilters: hasFilters, pageIndex: table.state.pagination.pageIndex, clearFilters: clearFilters, firstPage: () => table.setPageIndex(0), error: error, retry: retry }), _jsx("div", { role: "rowgroup", className: "mui-d2d9e1f13413 mui-2bf6510f1330", style: { height: virtual.getTotalSize(), width: totalWidth }, children: items.map((item) => (_jsx(TableBodyRow, { row: rows[item.index], rowIndex: item.index, start: item.start, rowHeight: rowHeight, autoRowHeight: autoRowHeight, measureElement: autoRowHeight ? virtual.measureElement : undefined, rowClassName: rowClassName, renderRowDetail: renderRowDetail, detailWidth: viewportWidth ?? totalWidth, cellStyle: cellStyle, columns: columns, columnGaps: columnGaps, columnIndexes: columnIndexes, contentVersion: table.options, contentState: table.state, focusedId: focused?.id, copied: copied, contentClassName: contentClassName, onRowClick: onRowClick, onRowActivate: onRowActivate, isRowHighlighted: isRowHighlighted, inlineSelection: inlineSelection }, item.key))) }), rows.length > 0 && status === "error" && (_jsxs("div", { role: "alert", className: "mui-964a9431ff49 mui-30150dd033ab mui-5b272f3c5076 mui-094f5333853b", children: [error ?? "Could not refresh rows.", retry && (_jsx(Button, { onClick: retry, variant: "outline", size: "sm", children: "Retry" }))] })), loadMore?.available && (_jsxs("div", { className: "mui-964a9431ff49 mui-635702706586 mui-222f930b8752 mui-71556df3b421 mui-a503dd374cca mui-074569488cca mui-96b92a971c95 mui-c74ab393b96d mui-35f35c41d134", children: [loadMore.loading ? (_jsxs("div", { role: "status", className: "mui-222f930b8752 mui-71556df3b421 mui-074569488cca", children: [_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "mui-2bd43fb57913 mui-27ead27a81df mui-2c14b55d77e6 mui-237747164b60", children: _jsx("path", { d: "M12 3v3m6.366-.366-2.12 2.12M21 12h-3m.366 6.366-2.12-2.12M12 21v-3m-6.366.366 2.12-2.12M3 12h3m-.366-6.366 2.12 2.12" }) }), _jsx("span", { children: "Loading more\u2026" })] })) : (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
                                     requested.current = null;

package/dist/table/use-fill-layout.d.ts

@@ -0,0 +1,2 @@
+/** Size the containing frame, not the grid, so controls share its available height. */
+export declare function useFillLayout(enabled: boolean): (node: HTMLDivElement | null) => void;

package/dist/table/use-fill-layout.js

@@ -0,0 +1,67 @@
+"use client";
+import { useCallback, useRef } from "react";
+/** Size the containing frame, not the grid, so controls share its available height. */
+export function useFillLayout(enabled) {
+    const dispose = useRef(undefined);
+    return useCallback((node) => {
+        dispose.current?.();
+        dispose.current = undefined;
+        if (!node || !enabled)
+            return;
+        let frame = 0;
+        let previous = -1;
+        const measure = () => {
+            frame = 0;
+            let inset = 0;
+            let ancestor = node.parentElement;
+            while (ancestor) {
+                const style = getComputedStyle(ancestor);
+                inset += parseFloat(style.paddingBottom) || 0;
+                inset += parseFloat(style.borderBottomWidth) || 0;
+                ancestor = ancestor.parentElement;
+            }
+            const height = Math.max(0, window.innerHeight - node.getBoundingClientRect().top - inset);
+            if (Math.abs(height - previous) < 0.5)
+                return;
+            previous = height;
+            node.style.height = `${height}px`;
+        };
+        const schedule = () => {
+            if (!frame)
+                frame = requestAnimationFrame(measure);
+        };
+        const observer = new ResizeObserver(schedule);
+        const observe = () => {
+            observer.disconnect();
+            let current = node;
+            while (current?.parentElement) {
+                observer.observe(current.parentElement);
+                let sibling = current.previousElementSibling;
+                while (sibling) {
+                    observer.observe(sibling);
+                    sibling = sibling.previousElementSibling;
+                }
+                current = current.parentElement;
+            }
+            schedule();
+        };
+        // Newly inserted preceding siblings can move a table inside a fixed-height parent.
+        const mutations = new MutationObserver(observe);
+        let parent = node.parentElement;
+        while (parent) {
+            mutations.observe(parent, { childList: true });
+            parent = parent.parentElement;
+        }
+        measure();
+        observe();
+        window.addEventListener("resize", schedule);
+        dispose.current = () => {
+            observer.disconnect();
+            mutations.disconnect();
+            window.removeEventListener("resize", schedule);
+            cancelAnimationFrame(frame);
+            if (node.style.height === `${previous}px`)
+                node.style.removeProperty("height");
+        };
+    }, [enabled]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mendylanda/ui",
-  "version": "0.3.0-alpha.9",
+  "version": "0.3.0",
   "description": "Mendy Landa’s reusable React components. Typed filters and tables with shared interaction behavior and customizable UI.",
   "homepage": "https://ui.mendylanda.com",
   "license": "MIT",
@@ -71,11 +71,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
-    "typecheck": "tsc -p tsconfig.build.json --noEmit",
-    "prepack": "pnpm build"
-  },
   "dependencies": {
     "@hello-pangea/dnd": "18.0.1",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -112,5 +107,9 @@
     "nuqs": {
       "optional": true
     }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit"
   }
-}
+}