@flood-md/react 0.2.11 → 0.2.13

package/dist/data-display.js

@@ -1,11 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 import { ScrollArea } from "./index.js";
 export const DescribedData = /* @__PURE__ */ forwardRef(function DescribedData({ items, layout, density, dividers, className, ...props }, ref) {
     if (items.some(item => typeof item.id !== "string" || !item.id.trim()) || new Set(items.map(item => item.id)).size !== items.length)
         throw new Error("Flood description items require unique nonempty IDs");
     return _jsx("dl", { ...props, ref: ref, className: ["flood-description-list", className].filter(Boolean).join(" "), "data-layout": layout, "data-density": density, "data-dividers": dividers, children: items.map(item => _jsxs("div", { className: "flood-description-list__item", children: [_jsx("dt", { children: item.term }), _jsx("dd", { children: item.description })] }, item.id)) });
 });
-export const TabularData = /* @__PURE__ */ forwardRef(function TabularData({ caption, children, hideCaption, density, striped, scrollLabel, cellVerticalAlign, className, hidden, dir, lang, ...props }, ref) {
-    return _jsx("div", { className: "flood-table-container", hidden: hidden, dir: dir, lang: lang, children: _jsx(ScrollArea, { orientation: "horizontal", "aria-label": scrollLabel ?? caption, children: _jsxs("table", { ...props, ref: ref, hidden: hidden, dir: dir, lang: lang, className: ["flood-table", className].filter(Boolean).join(" "), "data-density": density, "data-striped": striped, "data-cell-vertical-align": cellVerticalAlign, children: [_jsx("caption", { className: hideCaption ? "flood-visually-hidden" : undefined, children: caption }), children] }) }) });
+export const TabularData = /* @__PURE__ */ forwardRef(function TabularData({ caption, children, hideCaption, density, striped, scrollLabel, cellVerticalAlign, maxViewportHeight, stickyHeader, className, hidden, dir, lang, ...props }, ref) {
+    const viewport = useRef(null);
+    const scrollVertically = maxViewportHeight !== undefined;
+    const pinHeader = scrollVertically && stickyHeader;
+    useEffect(() => {
+        const node = viewport.current;
+        const header = node?.querySelector("table")?.tHead;
+        if (!pinHeader || !node || !header)
+            return;
+        const update = () => { node.style.scrollPaddingBlockStart = `${header.offsetHeight}px`; };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(header);
+        return () => {
+            observer.disconnect();
+            node.style.removeProperty("scroll-padding-block-start");
+        };
+    }, [pinHeader, children]);
+    return _jsx("div", { className: "flood-table-container", hidden: hidden, dir: dir, lang: lang, children: _jsx(ScrollArea, { ref: viewport, orientation: scrollVertically ? "both" : "horizontal", contentInset: scrollVertically ? "scrollbar" : undefined, tabIndex: scrollVertically ? 0 : undefined, style: scrollVertically ? { maxBlockSize: maxViewportHeight } : undefined, "aria-label": scrollLabel ?? caption, onFocus: pinHeader ? event => {
+                const target = event.target;
+                const header = event.currentTarget.querySelector("table")?.tHead;
+                if (header && target !== event.currentTarget && !header.contains(target) &&
+                    !target.closest("[popover], dialog[open]") && target.getBoundingClientRect().top < header.getBoundingClientRect().bottom) {
+                    target.scrollIntoView({ block: "nearest", inline: "nearest" });
+                }
+            } : undefined, children: _jsxs("table", { ...props, ref: ref, hidden: hidden, dir: dir, lang: lang, className: ["flood-table", className].filter(Boolean).join(" "), "data-density": density, "data-striped": striped, "data-cell-vertical-align": cellVerticalAlign, "data-sticky-header": pinHeader || undefined, "data-bounded": scrollVertically || undefined, children: [_jsx("caption", { className: hideCaption ? "flood-visually-hidden" : undefined, children: caption }), children] }) }) });
 });

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

@@ -0,0 +1,25 @@
+import { type CSSProperties } from "react";
+import { type DataTableColumn, type DataTableProps } from "./index.js";
+export declare function useDataTableColumnLayout(columns: readonly DataTableColumn[], visibleColumns: readonly DataTableColumn[], { columnWidths, defaultColumnWidths, onColumnWidthsChange, measureViewport, }: Pick<DataTableProps, "columnWidths" | "defaultColumnWidths" | "onColumnWidthsChange"> & {
+    measureViewport?: boolean;
+}): {
+    table: import("react").RefObject<HTMLTableElement | null>;
+    fixedWidth: number | undefined;
+    viewportWidth: number | undefined;
+    disclosureWidth: number | undefined;
+    atDefaults: boolean;
+    reset: () => void;
+    utilityCell: (id: string, header?: boolean) => {
+        "data-pin-edge": "end" | "start" | undefined;
+        "data-pin-boundary": true | undefined;
+        style: CSSProperties | undefined;
+        "data-data-table-utility": string;
+    };
+    columnCell: (column: DataTableColumn, header?: boolean) => {
+        "data-pin-edge": "end" | "start" | undefined;
+        "data-pin-boundary": true | undefined;
+        style: CSSProperties | undefined;
+        "data-data-table-column": string;
+    };
+    renderHandle: (column: DataTableColumn, label: string, disabled: boolean) => false | import("react").JSX.Element | undefined;
+};

package/dist/data-table-columns.js

@@ -0,0 +1,271 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { IconSlot } from "./index.js";
+const defaultMinWidth = 64;
+const defaultMaxWidth = 960;
+const columnKey = (id) => `column:${id}`;
+const utilityKey = (id) => `utility:${id}`;
+const validWidth = (value) => typeof value === "number" && Number.isFinite(value) && value > 0;
+function bounds(column) {
+    const min = validWidth(column.minWidth) ? Math.ceil(column.minWidth) : defaultMinWidth;
+    const max = validWidth(column.maxWidth) ? Math.floor(column.maxWidth) : defaultMaxWidth;
+    return { min, max: Math.max(min, max) };
+}
+function clampWidth(value, { min, max }) {
+    return Math.max(min, Math.min(max, Math.round(value)));
+}
+function normalizeWidths(columns, widths) {
+    return new Map(columns.flatMap(column => {
+        const value = widths && Object.prototype.hasOwnProperty.call(widths, column.id) ? widths[column.id] : undefined;
+        return column.resizable && validWidth(value) ? [[column.id, clampWidth(value, bounds(column))]] : [];
+    }));
+}
+function equalWidths(a, b) {
+    return a.size === b.size && [...a].every(([key, width]) => b.get(key) === width);
+}
+function measuredColumnWidth(header) {
+    const style = header.ownerDocument.defaultView?.getComputedStyle(header);
+    if (!style)
+        return header.offsetWidth;
+    const inlineSize = Number.parseFloat(style.inlineSize);
+    if (!Number.isFinite(inlineSize))
+        return header.offsetWidth;
+    const borderBox = style.boxSizing === "border-box" ? inlineSize : inlineSize +
+        Number.parseFloat(style.paddingInlineStart) + Number.parseFloat(style.paddingInlineEnd) +
+        Number.parseFloat(style.borderInlineStartWidth) + Number.parseFloat(style.borderInlineEndWidth);
+    // Avoid shaving a fraction of a pixel from untouched labels when switching to fixed tracks.
+    return Math.ceil(borderBox * 100) / 100;
+}
+function ColumnResizeHandle({ column, label, width, disabled, onPreview, onResize }) {
+    const gesture = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const limits = bounds(column);
+    const direction = (node) => {
+        const rtl = node.ownerDocument.defaultView?.getComputedStyle(node).direction === "rtl";
+        return (rtl ? -1 : 1) * (column.pinned === "end" ? -1 : 1);
+    };
+    const cancel = () => {
+        const active = gesture.current;
+        if (!active)
+            return;
+        gesture.current = null;
+        if (active.handle.hasPointerCapture(active.id))
+            active.handle.releasePointerCapture(active.id);
+        setDragging(false);
+        onPreview(undefined);
+    };
+    useEffect(() => {
+        if (disabled)
+            cancel();
+    }, [disabled]);
+    useEffect(() => () => {
+        if (gesture.current)
+            onPreview(undefined);
+    }, []);
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const document = gesture.current?.handle.ownerDocument;
+        const view = document?.defaultView;
+        const hide = () => { if (document?.hidden)
+            cancel(); };
+        view?.addEventListener("blur", cancel);
+        document?.addEventListener("visibilitychange", hide);
+        return () => {
+            view?.removeEventListener("blur", cancel);
+            document?.removeEventListener("visibilitychange", hide);
+        };
+    }, [dragging]);
+    const requestedWidth = (event) => {
+        const active = gesture.current;
+        if (active?.id !== event.pointerId)
+            return undefined;
+        return clampWidth(active.width + (event.clientX - active.origin) * active.direction / active.scale, limits);
+    };
+    const value = width === undefined ? limits.min : clampWidth(width, limits);
+    return _jsx("div", { role: "separator", "aria-label": label, title: label, "aria-orientation": "vertical", "aria-valuemin": limits.min, "aria-valuemax": limits.max, "aria-valuenow": value, "aria-valuetext": `${value} px`, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, className: "flood-data-table__resize", "data-dragging": dragging || undefined, onKeyDown: event => {
+            if (event.defaultPrevented || disabled || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                return;
+            if (event.key === "Escape" && gesture.current) {
+                event.preventDefault();
+                cancel();
+                return;
+            }
+            if (gesture.current)
+                return;
+            let next;
+            if (event.key === "Home")
+                next = limits.min;
+            else if (event.key === "End")
+                next = limits.max;
+            else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                const step = event.shiftKey ? 24 : 8;
+                next = clampWidth((width ?? value) + (event.key === "ArrowRight" ? step : -step) * direction(event.currentTarget), limits);
+            }
+            else
+                return;
+            event.preventDefault();
+            if (next !== width)
+                onResize(next);
+        }, onPointerDown: event => {
+            const handle = event.currentTarget;
+            const header = handle.closest("th");
+            if (event.defaultPrevented || disabled || gesture.current || event.button !== 0 || !event.isPrimary || !header?.offsetWidth)
+                return;
+            try {
+                handle.setPointerCapture(event.pointerId);
+            }
+            catch {
+                return;
+            }
+            event.preventDefault();
+            handle.focus({ preventScroll: true });
+            gesture.current = {
+                handle, id: event.pointerId, origin: event.clientX, width: header.offsetWidth,
+                direction: direction(handle), scale: header.getBoundingClientRect().width / header.offsetWidth || 1,
+            };
+            setDragging(true);
+        }, onPointerMove: event => {
+            const next = requestedWidth(event);
+            if (next !== undefined && !disabled)
+                onPreview(event.clientX === gesture.current?.origin ? undefined : next);
+        }, onPointerUp: event => {
+            const next = requestedWidth(event);
+            if (next === undefined)
+                return;
+            const moved = event.clientX !== gesture.current?.origin && next !== gesture.current?.width;
+            cancel();
+            if (!disabled && moved)
+                onResize(next);
+        }, onPointerCancel: event => { if (gesture.current?.id === event.pointerId)
+            cancel(); }, onLostPointerCapture: event => { if (gesture.current?.id === event.pointerId)
+            cancel(); }, children: _jsx("span", { className: "flood-data-table__resize-icon", children: _jsx(IconSlot, { size: "sm", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M3 12h18m-14-4-4 4 4 4m10-8 4 4-4 4" }) }) }) }) });
+}
+export function useDataTableColumnLayout(columns, visibleColumns, { columnWidths, defaultColumnWidths, onColumnWidthsChange, measureViewport = false, }) {
+    const [local, setLocal] = useState(defaultColumnWidths);
+    const [draft, setDraft] = useState();
+    const [metrics, setMetrics] = useState({ widths: new Map(), utilityKeys: [], viewport: 0 });
+    const table = useRef(null);
+    const baseline = useRef(new Map());
+    const accepted = normalizeWidths(columns, columnWidths ?? local);
+    const defaults = normalizeWidths(columns, defaultColumnWidths);
+    const activeDraft = draft && visibleColumns.some(column => column.resizable && column.id === draft.id) ? draft : undefined;
+    const visibleSizes = new Map(visibleColumns.flatMap(column => {
+        const width = activeDraft?.id === column.id ? activeDraft.width : accepted.get(column.id);
+        return width === undefined ? [] : [[columnKey(column.id), width]];
+    }));
+    const active = measureViewport || columns.some(column => column.resizable || column.pinned);
+    const hasSizes = visibleSizes.size > 0;
+    const columnOrder = JSON.stringify(visibleColumns.map(column => column.id));
+    useLayoutEffect(() => {
+        const node = table.current;
+        const viewport = node?.closest(".flood-scroll-area__viewport");
+        const headerRow = node?.tHead?.rows[0];
+        if (!active || !node || !viewport || !headerRow)
+            return;
+        let headers = Array.from(headerRow.cells);
+        const measure = () => {
+            const widths = new Map();
+            const utilityKeys = [];
+            for (const header of headers) {
+                const id = header.dataset.dataTableColumn;
+                const utility = header.dataset.dataTableUtility;
+                const key = id !== undefined ? columnKey(id) : utilityKey(utility ?? `unknown-${header.cellIndex}`);
+                if (id === undefined)
+                    utilityKeys.push(key);
+                if (header.offsetWidth === 0)
+                    continue;
+                widths.set(key, header.offsetWidth);
+                if (!hasSizes || !baseline.current.has(key))
+                    baseline.current.set(key, measuredColumnWidth(header));
+            }
+            setMetrics(previous => previous.viewport === viewport.clientWidth && equalWidths(previous.widths, widths) &&
+                previous.utilityKeys.join("|") === utilityKeys.join("|")
+                ? previous : { widths, utilityKeys, viewport: viewport.clientWidth });
+        };
+        measure();
+        const Observer = node.ownerDocument.defaultView?.ResizeObserver;
+        if (!Observer)
+            return;
+        const observer = new Observer(measure);
+        const observeHeaders = () => {
+            observer.disconnect();
+            headers = Array.from(headerRow.cells);
+            observer.observe(viewport);
+            for (const header of headers)
+                observer.observe(header, { box: "border-box" });
+            measure();
+        };
+        observeHeaders();
+        const HeaderObserver = node.ownerDocument.defaultView?.MutationObserver;
+        const headerObserver = HeaderObserver && new HeaderObserver(observeHeaders);
+        headerObserver?.observe(headerRow, { childList: true });
+        return () => {
+            observer.disconnect();
+            headerObserver?.disconnect();
+        };
+    }, [active, hasSizes, columnOrder]);
+    const sizes = hasSizes ? new Map([...baseline.current, ...visibleSizes]) : metrics.widths;
+    const keys = [...metrics.utilityKeys, ...visibleColumns.map(column => columnKey(column.id))];
+    const fixedWidth = hasSizes && keys.every(key => sizes.has(key))
+        ? keys.reduce((total, key) => total + sizes.get(key), 0)
+        : undefined;
+    const start = visibleColumns.filter(column => column.pinned === "start").map(column => columnKey(column.id));
+    const end = visibleColumns.filter(column => column.pinned === "end").map(column => columnKey(column.id)).reverse();
+    if (start.length)
+        start.unshift(...metrics.utilityKeys);
+    const pinned = new Map();
+    const pinnedKeys = [...start, ...end];
+    const pinnedWidth = pinnedKeys.reduce((total, key) => total + (metrics.widths.get(key) ?? 0), 0);
+    if (pinnedKeys.every(key => metrics.widths.has(key)) && pinnedWidth + defaultMinWidth <= metrics.viewport) {
+        for (const [edge, group] of [["start", start], ["end", end]]) {
+            let offset = 0;
+            group.forEach((key, index) => {
+                pinned.set(key, { edge, offset, boundary: index === group.length - 1 });
+                offset += metrics.widths.get(key);
+            });
+        }
+    }
+    function cell(key, header, width) {
+        const pin = pinned.get(key);
+        const inlineSize = header ? (fixedWidth === undefined ? width : sizes.get(key)) : undefined;
+        return {
+            "data-pin-edge": pin?.edge,
+            "data-pin-boundary": pin?.boundary || undefined,
+            style: inlineSize !== undefined || pin
+                ? { inlineSize, "--flood-data-table-pin-offset": pin ? `${pin.offset}px` : undefined }
+                : undefined,
+        };
+    }
+    function publish(next) {
+        if (equalWidths(accepted, next))
+            return;
+        const widths = Object.fromEntries(next);
+        if (columnWidths === undefined)
+            setLocal(widths);
+        onColumnWidthsChange?.(widths);
+    }
+    return {
+        table, fixedWidth,
+        viewportWidth: metrics.viewport || undefined,
+        disclosureWidth: metrics.widths.get(utilityKey("expansion")),
+        atDefaults: equalWidths(accepted, defaults),
+        reset: () => { setDraft(undefined); publish(defaults); },
+        utilityCell: (id, header = false) => ({
+            ...cell(utilityKey(id), header),
+            "data-data-table-utility": id,
+        }),
+        columnCell: (column, header = false) => ({
+            ...cell(columnKey(column.id), header, header ? (accepted.get(column.id) ?? column.width) : undefined),
+            "data-data-table-column": column.id,
+        }),
+        renderHandle: (column, label, disabled) => column.resizable &&
+            _jsx(ColumnResizeHandle, { column: column, label: label, disabled: disabled, width: visibleSizes.get(columnKey(column.id)) ?? metrics.widths.get(columnKey(column.id)), onPreview: width => setDraft(previous => {
+                    if (width === undefined)
+                        return previous?.id === column.id ? undefined : previous;
+                    if (previous?.id === column.id && previous.width === width)
+                        return previous;
+                    return { id: column.id, width };
+                }), onResize: width => publish(new Map(accepted).set(column.id, width)) }),
+    };
+}

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

@@ -0,0 +1,21 @@
+import { type ReactNode, type TdHTMLAttributes } from "react";
+import { type DataTableLabels, type DataTableRow } from "./index.js";
+export declare function useDataTableExpansion(rows: readonly DataTableRow[], expandedIds: readonly string[] | undefined, defaultExpandedIds: readonly string[] | undefined, onExpandedChange: ((ids: string[]) => void) | undefined): {
+    enabled: boolean;
+    expanded: Set<string>;
+    toggle: (id: string) => void;
+};
+interface DataTableExpandableRowProps {
+    row: DataTableRow;
+    showDisclosure: boolean;
+    expanded: boolean;
+    colSpan: number;
+    labels: DataTableLabels;
+    onToggle: () => void;
+    disclosureCellProps?: TdHTMLAttributes<HTMLTableCellElement>;
+    viewportWidth?: number;
+    disclosureWidth?: number;
+    children: (disclosureCell: ReactNode) => ReactNode;
+}
+export declare function DataTableExpandableRow({ row, showDisclosure, expanded, colSpan, labels, onToggle, disclosureCellProps, viewportWidth, disclosureWidth, children }: DataTableExpandableRowProps): import("react").JSX.Element;
+export {};

package/dist/data-table-expansion.js

@@ -0,0 +1,79 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { IconButton } from "./index.js";
+import { useLayerExitContent } from "./overlay-runtime.js";
+function hasExpandedContent(row) {
+    return row.expandedContent != null && typeof row.expandedContent !== "boolean";
+}
+export function useDataTableExpansion(rows, expandedIds, defaultExpandedIds, onExpandedChange) {
+    const [localExpandedIds, setLocalExpandedIds] = useState(defaultExpandedIds ?? []);
+    const expanded = new Set(expandedIds ?? localExpandedIds);
+    const enabled = expandedIds !== undefined || defaultExpandedIds !== undefined || rows.some(hasExpandedContent);
+    function toggle(id) {
+        const next = new Set(expanded);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        const ids = [...next];
+        if (expandedIds === undefined)
+            setLocalExpandedIds(ids);
+        onExpandedChange?.(ids);
+    }
+    return { enabled, expanded, toggle };
+}
+export function DataTableExpandableRow({ row, showDisclosure, expanded, colSpan, labels, onToggle, disclosureCellProps, viewportWidth, disclosureWidth, children }) {
+    const detailId = useId();
+    const toggle = useRef(null);
+    const reveal = useRef(null);
+    const detail = useRef(null);
+    const lastFocusedDetail = useRef(null);
+    const expandable = showDisclosure && hasExpandedContent(row);
+    const open = expandable && expanded;
+    const showDetail = useLayerExitContent(reveal, open, expandable, "grid-template-rows");
+    useEffect(() => {
+        const content = detail.current;
+        const header = content?.querySelector("table")?.tHead?.rows[0];
+        if (!content || !header)
+            return;
+        const alignBranch = () => {
+            const bounds = content.getBoundingClientRect();
+            if (!bounds.height)
+                return;
+            const heading = header.getBoundingClientRect();
+            const center = (heading.top + heading.height / 2 - bounds.top) * content.offsetHeight / bounds.height;
+            const value = `${center}px`;
+            if (content.style.getPropertyValue("--flood-data-table-branch-target") !== value) {
+                content.style.setProperty("--flood-data-table-branch-target", value);
+            }
+        };
+        alignBranch();
+        const observer = new ResizeObserver(alignBranch);
+        observer.observe(content);
+        observer.observe(header);
+        return () => {
+            observer.disconnect();
+            content.style.removeProperty("--flood-data-table-branch-target");
+        };
+    }, [showDetail, row.expandedContent]);
+    useEffect(() => {
+        if (open)
+            return;
+        const previousFocus = lastFocusedDetail.current;
+        lastFocusedDetail.current = null;
+        const button = toggle.current;
+        const active = button?.ownerDocument.activeElement;
+        if (button && previousFocus && (active === button.ownerDocument.body || reveal.current?.contains(active ?? null))) {
+            button.focus({ preventScroll: true });
+        }
+    }, [open]);
+    const label = row.label ?? row.primaryAction?.title ?? row.id;
+    const actionLabel = open ? labels.collapseRow ?? (name => `Collapse ${name}`) : labels.expandRow ?? (name => `Expand ${name}`);
+    return _jsxs(_Fragment, { children: [children(showDisclosure ? _jsx("td", { ...disclosureCellProps, "data-data-table-utility": "expansion", "data-detail-visible": showDetail || undefined, className: "flood-data-table__expand", children: expandable && _jsx(IconButton, { ref: toggle, label: actionLabel(label), size: "sm", iconSize: "xs", variant: "ghost", className: "flood-data-table__disclosure", type: "button", "aria-expanded": open, "aria-controls": open ? detailId : undefined, onClick: onToggle, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }) }) }) : null), showDetail && _jsx("tr", { id: detailId, className: "flood-data-table__expanded-row", "aria-hidden": open ? undefined : true, onFocusCapture: event => {
+                    if (event.currentTarget.contains(event.target))
+                        lastFocusedDetail.current = event.target;
+                }, children: _jsx("td", { colSpan: colSpan, children: _jsx("div", { ref: reveal, className: "flood-data-table__detail-reveal", "data-open": open || undefined, children: _jsx("div", { className: "flood-data-table__detail-clip", children: _jsx("div", { ref: detail, className: "flood-data-table__expanded-content", style: {
+                                    maxInlineSize: viewportWidth ? `max(0px, calc(${viewportWidth}px - 2 * var(--flood-data-table-edge) - var(--flood-scroll-content-inline, 0px)))` : undefined,
+                                    "--flood-data-table-disclosure-center": disclosureWidth === undefined ? undefined : `${disclosureWidth / 2}px`,
+                                }, children: row.expandedContent }) }) }) }) })] });
+}

package/dist/data-table.js

@@ -1,6 +1,32 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useState } from "react";
-import { Table, Checkbox, Button, IconSlot, VisuallyHidden, Pagination, Text, Spinner, Alert, Stack } from "./index.js";
+import { createElement as _createElement } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Table, Checkbox, Button, Badge, IconSlot, VisuallyHidden, Pagination, Text, Spinner, Alert, Stack, Inline, Menu, Tooltip } from "./index.js";
+import { useDataTableColumnLayout } from "./data-table-columns.js";
+import { DataTableExpandableRow, useDataTableExpansion } from "./data-table-expansion.js";
+const columnName = (column) => column.unit ? `${column.label} ${column.unit}` : column.label;
+function DataTableHeading({ column, sortLabel, disabled, descending, onSort }) {
+    const label = useRef(null);
+    const [truncated, setTruncated] = useState(false);
+    useEffect(() => {
+        const node = label.current;
+        if (!node)
+            return;
+        const measure = () => setTruncated(node.scrollWidth > node.clientWidth);
+        measure();
+        const Observer = node.ownerDocument.defaultView?.ResizeObserver;
+        const observer = Observer && new Observer(measure);
+        observer?.observe(node);
+        const fonts = node.ownerDocument.fonts;
+        fonts?.addEventListener("loadingdone", measure);
+        return () => {
+            observer?.disconnect();
+            fonts?.removeEventListener("loadingdone", measure);
+        };
+    }, [column.label, column.unit]);
+    const content = _jsxs(_Fragment, { children: [_jsx("span", { ref: label, className: "flood-data-table__header-label", children: column.label }), " ", column.unit && _jsx(Badge, { size: "sm", variant: "outline", className: "flood-data-table__header-unit", "aria-hidden": "true", children: column.unit })] });
+    return _jsx(Tooltip, { content: columnName(column), disabled: !truncated, trigger: trigger => column.sortable ? _jsxs(Button, { ...trigger, "aria-describedby": undefined, variant: "ghost", size: "sm", disabled: disabled, className: "flood-data-table__sort", "aria-label": sortLabel, onClick: onSort, children: [content, _jsx(IconSlot, { size: "sm", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: descending ? _jsx("path", { d: "m7 14 5-5 5 5" }) : _jsx("path", { d: "m8 8 4-4 4 4M8 16l4 4 4-4" }) }) })] }) : _jsx("span", { ...trigger, "aria-describedby": undefined, className: "flood-data-table__header-content", tabIndex: truncated ? 0 : undefined, children: content }) });
+}
 function activatePrimaryRowAction(event) {
     const target = event.target;
     const row = event.currentTarget;
@@ -19,7 +45,7 @@ function activatePrimaryRowAction(event) {
     button.focus({ preventScroll: true });
     button.click();
 }
-export const ManagedDataTable = /* @__PURE__ */ forwardRef(function ManagedDataTable({ caption, hideCaption = false, columns, rows, density = "comfortable", striped = false, minWidth = "40rem", toolbar, inset = "standard", sort: controlledSort, defaultSort = null, onSortChange, locale = "en", selectable = false, selectedIds, defaultSelectedIds = [], onSelectionChange, page: controlledPage, defaultPage = 1, pageSize = 10, onPageChange, showResults = true, paginationMode = "client", totalRows, selectionScope, state = "ready", onRetry, emptyContent, labels = {}, className, ...props }, ref) {
+export const ManagedDataTable = /* @__PURE__ */ forwardRef(function ManagedDataTable({ caption, hideCaption = false, columns, rows, density = "comfortable", striped = false, minWidth = "40rem", toolbar, inset = "standard", maxViewportHeight, stickyHeader, showColumnVisibility = false, hiddenColumnIds, defaultHiddenColumnIds = [], onHiddenColumnIdsChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, expandedIds, defaultExpandedIds, onExpandedChange, sort: controlledSort, defaultSort = null, onSortChange, locale = "en", selectable = false, selectedIds, defaultSelectedIds = [], onSelectionChange, page: controlledPage, defaultPage = 1, pageSize = 10, onPageChange, showResults = true, showSelection = true, paginationMode = "client", totalRows, selectionScope, state = "ready", onRetry, emptyContent, labels = {}, className, ...props }, ref) {
     if (!caption.trim() || columns.length === 0 || columns.some(column => !column.id.trim() || !column.label.trim()) || new Set(columns.map(column => column.id)).size !== columns.length)
         throw new Error("Flood DataTable requires a caption and unique named columns");
     if (rows.some(row => !row.id.trim() || (row.label !== undefined && !row.label.trim())) || new Set(rows.map(row => row.id)).size !== rows.length)
@@ -39,6 +65,55 @@ export const ManagedDataTable = /* @__PURE__ */ forwardRef(function ManagedDataT
     const [localSort, setSort] = useState(defaultSort), [localSelected, setSelected] = useState(defaultSelectedIds), [localPage, setPage] = useState(defaultPage);
     const requestedSort = controlledSort === undefined ? localSort : controlledSort;
     const sorting = requestedSort && columns.some(column => column.id === requestedSort.column && column.sortable) ? requestedSort : null;
+    const [localHiddenIds, setHiddenIds] = useState(defaultHiddenColumnIds);
+    const hidden = new Set(hiddenColumnIds ?? localHiddenIds);
+    const required = new Set(rows.flatMap(row => row.primaryAction ? [row.primaryAction.column] : []));
+    if (sorting)
+        required.add(sorting.column);
+    const displayed = columns.filter(column => column.hideable === false || required.has(column.id) || !hidden.has(column.id));
+    const retained = displayed.length > 0 ? displayed : columns.slice(0, 1);
+    const visibleColumns = [
+        ...retained.filter(column => column.pinned === "start"),
+        ...retained.filter(column => !column.pinned),
+        ...retained.filter(column => column.pinned === "end"),
+    ];
+    const expansion = useDataTableExpansion(rows, expandedIds, defaultExpandedIds, onExpandedChange);
+    const columnLayout = useDataTableColumnLayout(columns, visibleColumns, {
+        columnWidths, defaultColumnWidths, onColumnWidthsChange, measureViewport: expansion.enabled,
+    });
+    const columnCount = visibleColumns.length + Number(selectable) + Number(expansion.enabled);
+    const visibleIds = new Set(visibleColumns.map(column => column.id));
+    const normalizeHiddenIds = (ids) => columns.filter(column => column.hideable !== false && ids.has(column.id)).map(column => column.id);
+    const defaultIds = normalizeHiddenIds(new Set(defaultHiddenColumnIds));
+    const requestedIds = normalizeHiddenIds(hidden);
+    const visibilityAtDefaults = requestedIds.length === defaultIds.length && defaultIds.every(id => hidden.has(id));
+    const changeHiddenIds = (next) => {
+        if (hiddenColumnIds === undefined)
+            setHiddenIds(next);
+        onHiddenColumnIdsChange?.(next);
+    };
+    const columnItems = showColumnVisibility ? [
+        ...columns.map((column) => ({
+            id: `column:${column.id}`,
+            type: "checkbox",
+            label: sorting?.column === column.id
+                ? (labels.sortedColumn ?? (label => `${label} (sorted)`))(columnName(column))
+                : columnName(column),
+            checked: visibleIds.has(column.id),
+            disabled: column.hideable === false || required.has(column.id) || (visibleColumns.length === 1 && visibleIds.has(column.id)),
+            onCheckedChange: checked => {
+                const next = new Set(hidden);
+                if (checked)
+                    next.delete(column.id);
+                else
+                    next.add(column.id);
+                changeHiddenIds(normalizeHiddenIds(next));
+            },
+        })),
+        { id: "column-layout-separator", type: "separator" },
+        { id: "reset-columns", label: labels.resetColumns ?? "Reset columns",
+            disabled: visibilityAtDefaults && columnLayout.atDefaults },
+    ] : [];
     const sorted = useMemo(() => {
         if (server || !sorting)
             return [...rows];
@@ -86,8 +161,26 @@ export const ManagedDataTable = /* @__PURE__ */ forwardRef(function ManagedDataT
             changePage(1);
     };
     const resultLabel = labels.results ?? ((from, to, total) => `${from}–${to} of ${total}`);
-    return _jsxs("div", { ...props, ref: ref, className: ["flood-data-table", className].filter(Boolean).join(" "), "data-inset": inset, "aria-busy": state === "loading" || undefined, children: [toolbar != null && _jsx("div", { className: "flood-data-table__toolbar", children: toolbar }), _jsxs(Table, { caption: caption, hideCaption: hideCaption, density: density, striped: striped, style: { minWidth }, children: [_jsx("thead", { children: _jsxs("tr", { children: [selectable && _jsx("th", { scope: "col", className: "flood-data-table__choice", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: labels.selectPage ?? "Select rows on this page" }), checked: all, indeterminate: some && !all, disabled: blocked || pageChoices.length === 0, onChange: event => { const ids = new Set(selection); for (const row of pageChoices)
-                                            event.currentTarget.checked ? ids.add(row.id) : ids.delete(row.id); select([...ids]); } }) }), columns.map(column => _jsx("th", { scope: "col", "data-numeric": column.numeric || undefined, "data-align": column.align, "data-sortable": column.sortable || undefined, "aria-sort": sorting?.column === column.id ? sorting.direction : undefined, style: { width: column.width }, children: column.sortable ? _jsxs(Button, { variant: "ghost", size: "sm", disabled: blocked, className: "flood-data-table__sort", "aria-label": (labels.sort ?? ((label) => `Sort by ${label}`))(column.label), onClick: () => changeSort(column.id), children: [column.label, _jsx(IconSlot, { size: "sm", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: sorting?.column === column.id ? _jsx("path", { d: "m7 14 5-5 5 5" }) : _jsx("path", { d: "m8 8 4-4 4 4M8 16l4 4 4-4" }) }) })] }) : column.label }, column.id))] }) }), _jsx("tbody", { children: state === "ready" && visible.length > 0 ? visible.map(row => _jsxs("tr", { "data-selected": selectable && chosen.has(row.id) || undefined, "data-primary-action": row.primaryAction && !row.primaryAction.buttonProps.disabled && row.primaryAction.buttonProps["aria-disabled"] !== "true" || undefined, onClick: row.primaryAction ? activatePrimaryRowAction : undefined, children: [selectable && _jsx("td", { className: "flood-data-table__choice", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: (labels.selectRow ?? ((label) => `Select ${label}`))(row.label ?? row.id) }), checked: chosen.has(row.id), disabled: Boolean(row.selectionDisabled), onChange: event => select(event.currentTarget.checked ? [...selection, row.id] : selection.filter(id => id !== row.id)) }) }), columns.map(column => _jsx("td", { "data-numeric": column.numeric || undefined, "data-align": column.align, children: row.primaryAction?.column === column.id
+    const selectionLabel = selectable
+        ? (labels.selection ?? ((count, total) => `${count} of ${total} selected`))(selection.length, server && scope === "dataset" ? total : eligible.size)
+        : null;
+    const renderToolbar = typeof toolbar === "function" ? toolbar : null;
+    const columnsControl = showColumnVisibility ? (_jsx(Menu, { label: labels.columns ?? "Columns", items: columnItems, align: "end", onAction: id => {
+            if (id !== "reset-columns")
+                return;
+            if (!visibilityAtDefaults)
+                changeHiddenIds(defaultIds);
+            columnLayout.reset();
+        }, trigger: trigger => _jsx(Button, { ...trigger, className: renderToolbar ? undefined : "flood-data-table__columns", variant: "subtle", size: "sm", children: labels.columns ?? "Columns" }) })) : null;
+    const toolbarContent = typeof toolbar === "function" ? toolbar({ columns: columnsControl }) : toolbar;
+    const sortLabel = labels.sort ?? ((label) => `Sort by ${label}`);
+    return _jsxs("div", { ...props, ref: ref, className: ["flood-data-table", className].filter(Boolean).join(" "), "data-inset": inset, "aria-busy": state === "loading" || undefined, children: [columnsControl && !renderToolbar ? _jsxs(Inline, { gap: "3", className: "flood-data-table__toolbar", children: [toolbarContent != null && _jsx("div", { className: "flood-data-table__toolbar-content", children: toolbarContent }), columnsControl] }) : toolbarContent != null && _jsx("div", { className: "flood-data-table__toolbar", children: toolbarContent }), _jsxs(Table, { ref: columnLayout.table, className: "flood-data-table__table", caption: caption, hideCaption: hideCaption, density: density, striped: striped, maxViewportHeight: maxViewportHeight, stickyHeader: stickyHeader, "data-inset": inset, "data-fixed-columns": columnLayout.fixedWidth !== undefined || undefined, style: columnLayout.fixedWidth === undefined ? { minWidth } : { minWidth, inlineSize: columnLayout.fixedWidth, tableLayout: "fixed" }, children: [_jsx("thead", { children: _jsxs("tr", { children: [expansion.enabled && _jsx("th", { ...columnLayout.utilityCell("expansion", true), scope: "col", "data-data-table-utility": "expansion", className: "flood-data-table__expand", children: _jsx(VisuallyHidden, { children: labels.rowDetails ?? "Row details" }) }), selectable && _jsx("th", { ...columnLayout.utilityCell("selection", true), scope: "col", className: "flood-data-table__choice", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: labels.selectPage ?? "Select rows on this page" }), checked: all, indeterminate: some && !all, disabled: blocked || pageChoices.length === 0, onChange: event => { const ids = new Set(selection); for (const row of pageChoices)
+                                            event.currentTarget.checked ? ids.add(row.id) : ids.delete(row.id); select([...ids]); } }) }), visibleColumns.map(column => {
+                                    const name = columnName(column);
+                                    return _createElement("th", { ...columnLayout.columnCell(column, true), key: column.id, scope: "col", "data-numeric": column.numeric || undefined, "data-align": column.align, "data-sortable": column.sortable || undefined, "data-resize-edge": column.resizable ? column.pinned === "end" ? "start" : "end" : undefined, "aria-label": column.sortable ? sortLabel(name) : name, "aria-sort": sorting?.column === column.id ? sorting.direction : undefined },
+                                        _jsx(DataTableHeading, { column: column, sortLabel: sortLabel(name), disabled: blocked, descending: sorting?.column === column.id, onSort: () => changeSort(column.id) }),
+                                        column.resizable && columnLayout.renderHandle(column, (labels.resizeColumn ?? (label => `Resize ${label} column`))(name), blocked));
+                                })] }) }), _jsx("tbody", { children: state === "ready" && visible.length > 0 ? visible.map(row => _jsx(DataTableExpandableRow, { row: row, showDisclosure: expansion.enabled, expanded: expansion.expanded.has(row.id), colSpan: columnCount, labels: labels, onToggle: () => expansion.toggle(row.id), disclosureCellProps: columnLayout.utilityCell("expansion"), viewportWidth: columnLayout.viewportWidth, disclosureWidth: columnLayout.disclosureWidth, children: disclosure => _jsxs("tr", { "data-selected": selectable && chosen.has(row.id) || undefined, "data-primary-action": row.primaryAction && !row.primaryAction.buttonProps.disabled && row.primaryAction.buttonProps["aria-disabled"] !== "true" || undefined, onClick: row.primaryAction ? activatePrimaryRowAction : undefined, children: [disclosure, selectable && _jsx("td", { ...columnLayout.utilityCell("selection"), className: "flood-data-table__choice", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: (labels.selectRow ?? ((label) => `Select ${label}`))(row.label ?? row.id) }), checked: chosen.has(row.id), disabled: Boolean(row.selectionDisabled), onChange: event => select(event.currentTarget.checked ? [...selection, row.id] : selection.filter(id => id !== row.id)) }) }), visibleColumns.map(column => _createElement("td", { ...columnLayout.columnCell(column), key: column.id, "data-numeric": column.numeric || undefined, "data-align": column.align }, row.primaryAction?.column === column.id
                                         ? _jsxs(Stack, { gap: "1", children: [_jsx(Button, { ...row.primaryAction.buttonProps, type: "button", variant: "ghost", size: "sm", className: ["flood-data-table__primary-action", row.primaryAction.buttonProps.className].filter(Boolean).join(" "), children: row.primaryAction.title }), row.primaryAction.description != null && _jsx(Text, { as: "div", size: "helper", tone: "subtle", children: row.primaryAction.description })] })
-                                        : row.cells[column.id] ?? null }, column.id))] }, row.id)) : _jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "flood-data-table__state", children: state === "loading" ? _jsx(Spinner, { label: labels.loading ?? "Loading rows…" }) : state === "error" ? _jsxs(Stack, { gap: "3", children: [_jsx(Alert, { tone: "error", announcement: "polite", children: labels.error ?? "Could not load the rows." }), onRetry && _jsx(Button, { variant: "subtle", size: "sm", onClick: onRetry, children: labels.retry ?? "Try again" })] }) : emptyContent ?? _jsx(Text, { as: "p", size: "compact", tone: "subtle", role: "status", children: labels.empty ?? "No results found." }) }) }) })] }), (showResults || selectable || pageCount > 1) && _jsxs("div", { className: "flood-data-table__footer", children: [showResults && _jsx(Text, { as: "p", size: "helper", tone: "subtle", children: state === "ready" ? resultLabel(visible.length ? (page - 1) * pageSize + 1 : 0, visible.length ? (page - 1) * pageSize + visible.length : 0, total) : "" }), selectable && _jsx(Text, { as: "p", size: "helper", tone: "subtle", role: "status", children: (labels.selection ?? ((count, total) => `${count} of ${total} selected`))(selection.length, server && scope === "dataset" ? total : eligible.size) }), pageCount > 1 && _jsx(Pagination, { page: Math.min(page, pageCount), pageCount: pageCount, onPageChange: changePage, disabled: blocked, label: labels.pagination, previousLabel: labels.previousPage, nextLabel: labels.nextPage, pageLabel: labels.page })] })] });
+                                        : row.cells[column.id] ?? null))] }) }, row.id)) : _jsx("tr", { children: _jsx("td", { colSpan: columnCount, className: "flood-data-table__state", children: state === "loading" ? _jsx(Spinner, { label: labels.loading ?? "Loading rows…" }) : state === "error" ? _jsxs(Stack, { gap: "3", children: [_jsx(Alert, { tone: "error", announcement: "polite", children: labels.error ?? "Could not load the rows." }), onRetry && _jsx(Button, { variant: "subtle", size: "sm", onClick: onRetry, children: labels.retry ?? "Try again" })] }) : emptyContent ?? _jsx(Text, { as: "p", size: "compact", tone: "subtle", role: "status", children: labels.empty ?? "No results found." }) }) }) })] }), selectable && !showSelection && _jsx(VisuallyHidden, { role: "status", children: selectionLabel }), (showResults || (selectable && showSelection) || pageCount > 1) && _jsxs("div", { className: "flood-data-table__footer", children: [showResults && _jsx(Text, { as: "p", size: "helper", tone: "subtle", children: state === "ready" ? resultLabel(visible.length ? (page - 1) * pageSize + 1 : 0, visible.length ? (page - 1) * pageSize + visible.length : 0, total) : "" }), selectable && showSelection && _jsx(Text, { as: "p", size: "helper", tone: "subtle", role: "status", children: selectionLabel }), pageCount > 1 && _jsx(Pagination, { page: Math.min(page, pageCount), pageCount: pageCount, onPageChange: changePage, disabled: blocked, label: labels.pagination, previousLabel: labels.previousPage, nextLabel: labels.nextPage, pageLabel: labels.page })] })] });
 });

package/dist/dumbbell-chart.d.ts

@@ -0,0 +1,2 @@
+import { type DumbbellChartProps } from "./index.js";
+export declare const DumbbellPlot: import("react").ForwardRefExoticComponent<DumbbellChartProps & import("react").RefAttributes<HTMLDivElement>>;