@mendylanda/ui 0.3.2-dev.58.0ef9785a4046 → 0.4.0

package/dist/filters/filter-menu-panel.js

@@ -146,14 +146,19 @@ function EditorHeading({ section, desktop, back, onCleared, }) {
 }
 function MenuHeading({ label }) {
     const ref = useRef(null);
+    const textRef = useRef(null);
     const [overflow, setOverflow] = useState(false);
     const [below, setBelow] = useState(false);
     const measure = () => {
         const element = ref.current;
-        if (!element)
+        const text = textRef.current;
+        if (!element || !text)
             return;
-        setOverflow(element.scrollHeight > element.clientHeight + 1);
-        setBelow(element.scrollHeight - element.clientHeight - element.scrollTop > 1);
+        // Measure the text's line boxes, not glyph overflow. Fonts can paint below a
+        // single line without the title having another line to scroll to.
+        const height = text.getBoundingClientRect().height;
+        setOverflow(height > element.clientHeight + 1);
+        setBelow(height - element.clientHeight - element.scrollTop > 1);
     };
     useLayoutEffect(() => {
         const element = ref.current;
@@ -163,9 +168,11 @@ function MenuHeading({ label }) {
         measure();
         const observer = new ResizeObserver(measure);
         observer.observe(element);
+        if (textRef.current)
+            observer.observe(textRef.current);
         return () => observer.disconnect();
     }, [label]);
-    return (_jsx("span", { ref: ref, onScroll: measure, title: label, tabIndex: overflow ? 0 : undefined, "data-more-below": below, className: "mui-1326520533f0 mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-2368e909f3a5 mui-726fca123972 mui-393883c1db68 mui-cacb19aa9640 mui-bbaaa5969856 mui-1df9125eebaf mui-223daa83ed2d", children: label }));
+    return (_jsx("span", { ref: ref, onScroll: measure, title: label, tabIndex: overflow ? 0 : undefined, "data-more-below": below, className: cn("mui-1326520533f0 mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-726fca123972 mui-393883c1db68 mui-cacb19aa9640 mui-bbaaa5969856 mui-1df9125eebaf mui-223daa83ed2d", overflow ? "mui-2368e909f3a5" : "mui-0fc84a692dad"), children: _jsx("span", { ref: textRef, className: "mui-496aca80e4d8", children: label }) }));
 }
 function FilterMenuList({ sections, selectedId, initialKey, panelId, desktop, detached, rows, choose, keyboardNavigation, onPointerMove, }) {
     const { classNames } = useMendyUI();

package/dist/table/columns.d.ts

@@ -29,6 +29,8 @@ export interface ValueFormat<V> {
 }
 interface ValueOptions<T extends object, V> {
     label: string;
+    /** Override the formatter's alignment without changing display, copy, or export text. */
+    align?: "start" | "center" | "end";
     size?: number;
     grow?: number | false;
     minSize?: number;

package/dist/table/columns.js

@@ -14,7 +14,7 @@ function valueColumn(id, value, options) {
         maxSize: options.maxSize,
         defaultHidden: options.hidden,
         pin: options.pin,
-        align: options.format?.align,
+        align: options.align ?? options.format?.align,
         enableSorting: options.sortable ?? true,
         cell: ({ row }) => {
             const v = value(row.original);

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

@@ -4,6 +4,8 @@ import type { TableViewProps } from "./table-view.js";
 import { type TableFiltersProps } from "./table-filters.js";
 type Appearance<T extends object> = Omit<TableViewProps<T>, "table"> & {
     toolbar?: ReactNode;
+    /** Custom controls beside the filter bar, before toolbar actions and column settings. */
+    toolbarStart?: ReactNode;
     footer?: ReactNode;
     showColumnSettings?: boolean;
     showPagination?: boolean;

package/dist/table/data-table.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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";
 import { TableFrame } from "./table-frame.js";
-function ControlledTable({ table, toolbar, footer, showColumnSettings = true, showPagination = false, filters, filterBar, layout = "content", ...view }) {
+function ControlledTable({ table, toolbar, toolbarStart, footer, showColumnSettings = true, showPagination = false, filters, filterBar, layout = "content", minHeight, ...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 }) }));
+    return (_jsx(TableFrame, { layout: layout, minHeight: minHeight, slot: "data-table", header: (toolbarStart || toolbar || showColumnSettings || (filters && filterBar !== false)) && (_jsx(TableToolbar, { table: table, toolbar: toolbar, toolbarStart: toolbarStart, filters: filters, filterBar: filterBar, showColumnSettings: showColumnSettings })), 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);
@@ -16,3 +16,6 @@ function ConfiguredTable(props) {
 export function DataTable(props) {
     return "table" in props ? _jsx(ControlledTable, { ...props }) : _jsx(ConfiguredTable, { ...props });
 }
+function TableToolbar({ table, toolbar, toolbarStart, filters, filterBar, showColumnSettings, }) {
+    return (_jsxs("div", { className: "mui-222f930b8752 mui-27ead27a81df mui-faa8a23c68f6 mui-b9677bd1cb66 mui-32c92bb1fde4 mui-074569488cca", children: [_jsxs("div", { className: "mui-222f930b8752 mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-faa8a23c68f6 mui-71556df3b421 mui-074569488cca", children: [filters && filterBar !== false && _jsx(TableFilters, { ...filterBar, filters: filters }), toolbarStart, !filters && !toolbarStart && toolbar] }), _jsxs("div", { className: "mui-222f930b8752 mui-faa8a23c68f6 mui-71556df3b421 mui-074569488cca", children: [(filters || toolbarStart) && toolbar, showColumnSettings && _jsx(TableColumnSettings, { table: table })] })] }));
+}

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

@@ -22,3 +22,7 @@ export declare function TableLoadMore({ loadMore, columnCount, rowIndex, onLoad,
     rowIndex: number;
     onLoad: () => void;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function TableRefreshError({ columnCount, rowIndex, error, retry, }: Pick<TableDataState, "error" | "retry"> & {
+    columnCount: number;
+    rowIndex: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-feedback.js

@@ -19,3 +19,7 @@ export function TableLoadMore({ loadMore, columnCount, rowIndex, onLoad, }) {
     const { t } = useMendyLocale();
     return (_jsx(TableFeedbackRow, { columnCount: columnCount, rowIndex: rowIndex, className: "mui-964a9431ff49 mui-8368bbb62f66", children: _jsxs("div", { className: "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: t("loadingMore") })] })) : (_jsx(Button, { size: "sm", variant: "ghost", onClick: onLoad, children: loadMore.error ? t("retryMore") : t("loadMore") })), loadMore.error && _jsx("span", { role: "alert", children: loadMore.error })] }) }));
 }
+export function TableRefreshError({ columnCount, rowIndex, error, retry, }) {
+    const { t } = useMendyLocale();
+    return (_jsx(TableFeedbackRow, { columnCount: columnCount, rowIndex: rowIndex, className: "mui-964a9431ff49 mui-30150dd033ab", children: _jsxs("div", { role: "alert", className: "mui-5b272f3c5076 mui-094f5333853b", children: [error ?? t("refreshError"), retry && (_jsx(Button, { onClick: retry, variant: "outline", size: "sm", children: t("retry") }))] }) }));
+}

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

@@ -1,7 +1,8 @@
 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, }: {
+export declare function TableFrame({ layout, minHeight, stretch, slot, header, footer, children, }: {
     layout: "content" | "fill";
+    minHeight?: number;
     stretch?: boolean;
     slot?: string;
     header?: ReactNode;

package/dist/table/table-frame.js

@@ -4,9 +4,9 @@ import { useMendyLocale } from "../locale-context.js";
 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, }) {
+export function TableFrame({ layout, minHeight = 240, stretch = false, slot = "table-view", header, footer, children, }) {
     const { direction, code, configured } = useMendyLocale();
     const fill = layout === "fill";
-    const ref = useFillLayout(fill);
-    return (_jsxs("div", { ref: ref, "data-mendy-ui": "", "data-slot": slot, dir: configured ? direction : undefined, lang: code, "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 })] }));
+    const ref = useFillLayout(fill, minHeight);
+    return (_jsxs("div", { ref: ref, "data-mendy-ui": "", "data-slot": slot, dir: configured ? direction : undefined, lang: code, "data-layout": layout, className: cn("mui-184ddc11e5f9", fill ? "mui-222f930b8752 mui-410da8dfa8ac mui-302c0d124a94 mui-074569488cca" : "mui-267171770524"), style: fill ? { height: minHeight, minHeight } : 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

@@ -22,6 +22,8 @@ export interface TableViewProps<T extends object> extends TableDataState {
     height?: number | string;
     /** Fill the remaining page height, or fit content by default. Fill overrides height. */
     layout?: "content" | "fill";
+    /** Minimum frame height in pixels for fill layout, including controls. Defaults to 240. */
+    minHeight?: number;
     /** 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. */
@@ -49,4 +51,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, 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;
+export declare function TableView<T extends object>({ table, label, height, layout: layoutMode, minHeight, 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

@@ -4,18 +4,17 @@ import { useMendyLocale } from "../locale-context.js";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { TableHeaderCell, TableBodyRow } from "./table-parts.js";
-import { Button } from "../primitives/button.js";
 import { cn } from "../utils.js";
 import { useColumnWindow } from "./use-column-window.js";
 import { useViewportWidth } from "./use-viewport-width.js";
 import { tableLayout } from "./table-layout.js";
 import { TableLoadingRows } from "./table-loading.js";
-import { TableInitialState, TableFeedbackRow, TableLoadMore } from "./table-feedback.js";
+import { TableInitialState, TableRefreshError, TableLoadMore } 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";
 import { TableFrame } from "./table-frame.js";
-export function TableView({ table, label, 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, }) {
+export function TableView({ table, label, height = "auto", layout: layoutMode = "content", minHeight, 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 { t, direction, code } = useMendyLocale();
     const fill = layoutMode === "fill";
     const { resultKey, hasFilters, clearFilters } = useTableResults(table, queryKey, filters);
@@ -42,6 +41,9 @@ export function TableView({ table, label, height = "auto", layout: layoutMode =
         estimateSize,
         getItemKey,
         overscan: 8,
+        // Match server markup and the first client render with a bounded window.
+        // Browser measurements replace this estimate as soon as the grid mounts.
+        initialRect: { width: 0, height: rowHeight * 12 },
     });
     const viewportWidth = useViewportWidth(container);
     const startColumns = table.getStartVisibleLeafColumns();
@@ -106,12 +108,12 @@ export function TableView({ table, label, height = "auto", layout: layoutMode =
         virtual,
     ]);
     const headersById = new Map(table.getFlatHeaders().map((header) => [header.column.id, header]));
-    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 ?? t("dataTable"), dir: direction, lang: code, "aria-rowcount": renderRowDetail ? -1 : rows.length + 1 + feedbackRowCount, "aria-colcount": layout.columns.length, "aria-busy": status === "loading" || refreshing, style: {
+    return (_jsxs(TableFrame, { layout: layoutMode, minHeight: minHeight, 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 ?? t("dataTable"), dir: direction, lang: code, "aria-rowcount": renderRowDetail ? -1 : rows.length + 1 + feedbackRowCount, "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, { columnCount: layout.columns.length, 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))) }), hasRefreshError && (_jsx(TableFeedbackRow, { columnCount: layout.columns.length, rowIndex: rows.length + 2, className: "mui-964a9431ff49 mui-30150dd033ab", children: _jsxs("div", { role: "alert", className: "mui-5b272f3c5076 mui-094f5333853b", children: [error ?? t("refreshError"), retry && (_jsx(Button, { onClick: retry, variant: "outline", size: "sm", children: t("retry") }))] }) })), loadMore?.available && (_jsx(TableLoadMore, { loadMore: loadMore, columnCount: layout.columns.length, rowIndex: rows.length + 2 + Number(hasInitialFeedback || hasRefreshError), onLoad: () => {
+                                : 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))) }), hasRefreshError && (_jsx(TableRefreshError, { columnCount: layout.columns.length, rowIndex: rows.length + 2, error: error, retry: retry })), loadMore?.available && (_jsx(TableLoadMore, { loadMore: loadMore, columnCount: layout.columns.length, rowIndex: rows.length + 2 + Number(hasInitialFeedback || hasRefreshError), onLoad: () => {
                             requested.current = null;
                             void Promise.resolve()
                                 .then(() => loadMore.load())

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

@@ -1,2 +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;
+export declare function useFillLayout(enabled: boolean, minHeight: number): (node: HTMLDivElement | null) => void;

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

@@ -1,7 +1,7 @@
 "use client";
 import { useCallback, useRef } from "react";
 /** Size the containing frame, not the grid, so controls share its available height. */
-export function useFillLayout(enabled) {
+export function useFillLayout(enabled, minHeight) {
     const dispose = useRef(undefined);
     return useCallback((node) => {
         dispose.current?.();
@@ -13,14 +13,19 @@ export function useFillLayout(enabled) {
         const measure = () => {
             frame = 0;
             let inset = 0;
+            let scroll = window.scrollY;
             let ancestor = node.parentElement;
             while (ancestor) {
                 const style = getComputedStyle(ancestor);
                 inset += parseFloat(style.paddingBottom) || 0;
                 inset += parseFloat(style.borderBottomWidth) || 0;
+                if (ancestor !== document.body && ancestor !== document.documentElement)
+                    scroll += ancestor.scrollTop;
                 ancestor = ancestor.parentElement;
             }
-            const height = Math.max(0, window.innerHeight - node.getBoundingClientRect().top - inset);
+            // Use the unscrolled position: resizing after scrolling down must not grow the page.
+            const top = node.getBoundingClientRect().top + scroll;
+            const height = Math.max(minHeight, window.innerHeight - top - inset);
             if (Math.abs(height - previous) < 0.5)
                 return;
             previous = height;
@@ -63,5 +68,5 @@ export function useFillLayout(enabled) {
             if (node.style.height === `${previous}px`)
                 node.style.removeProperty("height");
         };
-    }, [enabled]);
+    }, [enabled, minHeight]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mendylanda/ui",
-  "version": "0.3.2-dev.58.0ef9785a4046",
+  "version": "0.4.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",
@@ -118,5 +118,5 @@
     "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
     "typecheck": "tsc -p tsconfig.build.json --noEmit"
   },
-  "gitHead": "0ef9785a4046cf8030396c3278c4231b866fcef4"
+  "gitHead": "4351f6209bd1bf1ea4a286fbc490eab25fb6fba2"
 }