@seedgrid/fe-components 2026.3.31 → 2026.4.1

package/dist/inputs/SgDatatable.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { createPortal } from "react-dom";
+import { Check, GripVertical, SlidersHorizontal } from "lucide-react";
 import { SgButton } from "../buttons/SgButton";
 import { SgGroupBox } from "../layout/SgGroupBox";
 import { t, useComponentsI18n } from "../i18n";
@@ -112,6 +114,28 @@ function rowsAreEqual(rowA, rowB, dataKey) {
         return rowA === rowB;
     return getRowIdentity(rowA, dataKey) === getRowIdentity(rowB, dataKey);
 }
+function getColumnKey(column, index) {
+    if (column.columnId?.trim())
+        return `columnId:${column.columnId.trim()}`;
+    if (column.field?.trim())
+        return `field:${column.field.trim()}`;
+    return `index:${index}`;
+}
+function moveItem(list, fromIndex, toIndex) {
+    if (fromIndex === toIndex)
+        return list;
+    if (fromIndex < 0 || fromIndex >= list.length)
+        return list;
+    if (toIndex < 0 || toIndex >= list.length)
+        return list;
+    const next = [...list];
+    const item = next[fromIndex];
+    if (item === undefined)
+        return list;
+    next.splice(fromIndex, 1);
+    next.splice(toIndex, 0, item);
+    return next;
+}
 function resolveAlignmentClass(align) {
     if (align === "center")
         return "text-center";
@@ -121,7 +145,7 @@ function resolveAlignmentClass(align) {
 }
 function SgDatatableBase(props, imperativeRef) {
     const i18n = useComponentsI18n();
-    const { id, title, value, columns, dataKey, lazy = false, totalRecords: controlledTotalRecords, paginator = false, rows = 10, first, rowsPerPageOptions, onPage, sortField, sortOrder, onSort, removableSort = true, selectionMode, selection, onSelectionChange, showGlobalFilter = false, globalFilter, globalFilterPlaceholder, onGlobalFilterChange, showColumnFilters = false, filters, onFilter, showClearFiltersButton = false, stripedRows = false, showGridlines = false, hoverableRows = true, loading = false, emptyMessage, className = "", style, tableClassName = "", rowClassName, groupBoxProps = {} } = props;
+    const { id, title, value, columns, dataKey, lazy = false, totalRecords: controlledTotalRecords, paginator = false, rows = 10, first, rowsPerPageOptions, onPage, sortField, sortOrder, onSort, removableSort = true, selectionMode, selection, onSelectionChange, showGlobalFilter = false, globalFilter, globalFilterPlaceholder, onGlobalFilterChange, showColumnFilters = false, filters, onFilter, showClearFiltersButton = false, stripedRows = false, showGridlines = false, hoverableRows = true, loading = false, emptyMessage, className = "", style, tableClassName = "", rowClassName, groupBoxProps = {}, showColumnManager = true, columnManagerLabel, columnManagerMaxHeight = 320 } = props;
     const isFirstControlled = first !== undefined;
     const isSortFieldControlled = sortField !== undefined;
     const isSortOrderControlled = sortOrder !== undefined;
@@ -135,6 +159,22 @@ function SgDatatableBase(props, imperativeRef) {
     const [internalSelection, setInternalSelection] = React.useState(null);
     const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(globalFilter ?? "");
     const [internalFilters, setInternalFilters] = React.useState(() => normalizeFilters(filters));
+    const columnManagerRef = React.useRef(null);
+    const columnManagerButtonRef = React.useRef(null);
+    const columnManagerPanelRef = React.useRef(null);
+    const [isColumnManagerOpen, setIsColumnManagerOpen] = React.useState(false);
+    const [draggingColumnKey, setDraggingColumnKey] = React.useState(null);
+    const [columnManagerPosition, setColumnManagerPosition] = React.useState(null);
+    const columnDescriptors = React.useMemo(() => columns.map((column, index) => ({
+        key: getColumnKey(column, index),
+        column,
+        originalIndex: index
+    })), [columns]);
+    const [columnOrder, setColumnOrder] = React.useState(() => columnDescriptors.map((item) => item.key));
+    const [hiddenColumnsMap, setHiddenColumnsMap] = React.useState(() => columnDescriptors.reduce((acc, item) => {
+        acc[item.key] = Boolean(item.column.hidden);
+        return acc;
+    }, {}));
     React.useEffect(() => {
         if (!isFirstControlled)
             return;
@@ -168,7 +208,75 @@ function SgDatatableBase(props, imperativeRef) {
             return;
         setInternalFilters(normalizeFilters(filters));
     }, [isFiltersControlled, filters]);
-    const visibleColumns = React.useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    React.useEffect(() => {
+        const availableKeys = columnDescriptors.map((item) => item.key);
+        setColumnOrder((prev) => {
+            const kept = prev.filter((key) => availableKeys.includes(key));
+            const missing = availableKeys.filter((key) => !kept.includes(key));
+            return [...kept, ...missing];
+        });
+        setHiddenColumnsMap((prev) => {
+            const next = {};
+            for (const item of columnDescriptors) {
+                next[item.key] = prev[item.key] ?? Boolean(item.column.hidden);
+            }
+            return next;
+        });
+    }, [columnDescriptors]);
+    React.useEffect(() => {
+        if (!isColumnManagerOpen)
+            return;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (columnManagerRef.current?.contains(target))
+                return;
+            if (columnManagerPanelRef.current?.contains(target))
+                return;
+            setIsColumnManagerOpen(false);
+        };
+        document.addEventListener("mousedown", handlePointerDown);
+        return () => document.removeEventListener("mousedown", handlePointerDown);
+    }, [isColumnManagerOpen]);
+    const updateColumnManagerPosition = React.useCallback(() => {
+        const button = columnManagerButtonRef.current;
+        if (!button)
+            return;
+        const rect = button.getBoundingClientRect();
+        const panelWidth = 300;
+        const viewportPadding = 12;
+        const left = Math.min(Math.max(rect.left, viewportPadding), Math.max(viewportPadding, window.innerWidth - panelWidth - viewportPadding));
+        setColumnManagerPosition({
+            top: rect.bottom + 8,
+            left
+        });
+    }, []);
+    React.useLayoutEffect(() => {
+        if (!isColumnManagerOpen)
+            return;
+        updateColumnManagerPosition();
+        const raf = window.requestAnimationFrame(updateColumnManagerPosition);
+        return () => window.cancelAnimationFrame(raf);
+    }, [isColumnManagerOpen, updateColumnManagerPosition]);
+    React.useEffect(() => {
+        if (!isColumnManagerOpen)
+            return;
+        const handleViewportChange = () => updateColumnManagerPosition();
+        const useCapture = true;
+        window.addEventListener("resize", handleViewportChange);
+        window.addEventListener("scroll", handleViewportChange, useCapture);
+        return () => {
+            window.removeEventListener("resize", handleViewportChange);
+            window.removeEventListener("scroll", handleViewportChange, useCapture);
+        };
+    }, [isColumnManagerOpen, updateColumnManagerPosition]);
+    const orderedColumns = React.useMemo(() => {
+        const map = new Map(columnDescriptors.map((item) => [item.key, item]));
+        return columnOrder
+            .map((key) => map.get(key))
+            .filter((item) => Boolean(item));
+    }, [columnDescriptors, columnOrder]);
+    const visibleColumns = React.useMemo(() => orderedColumns.filter((item) => !hiddenColumnsMap[item.key]).map((item) => item.column), [orderedColumns, hiddenColumnsMap]);
+    const visibleColumnCount = React.useMemo(() => orderedColumns.filter((item) => !hiddenColumnsMap[item.key]).length, [orderedColumns, hiddenColumnsMap]);
     const currentFirst = isFirstControlled ? Math.max(0, first ?? 0) : internalFirst;
     const currentRows = Math.max(1, internalRows);
     const currentSortField = isSortFieldControlled ? sortField ?? null : internalSortField;
@@ -379,61 +487,134 @@ function SgDatatableBase(props, imperativeRef) {
             : [...previous, rowData];
         commitSelection(next);
     }, [selectionMode, currentSelection, dataKey, commitSelection]);
+    const resolvedColumnManagerLabel = columnManagerLabel ??
+        resolveMessage(t(i18n, "components.datatable.columns"), "components.datatable.columns", "Colunas");
+    const restoreColumnsLabel = resolveMessage(t(i18n, "components.datatable.restoreColumns"), "components.datatable.restoreColumns", "Restaurar padrão");
+    const showAllColumnsLabel = resolveMessage(t(i18n, "components.datatable.showAllColumns"), "components.datatable.showAllColumns", "Mostrar todas");
+    const dragHandleLabel = resolveMessage(t(i18n, "components.datatable.dragToReorder"), "components.datatable.dragToReorder", "Arrastar para reordenar");
+    const toggleColumnVisibility = React.useCallback((columnKey, forceVisible) => {
+        setHiddenColumnsMap((prev) => {
+            const isCurrentlyHidden = Boolean(prev[columnKey]);
+            const willHide = forceVisible === undefined ? !isCurrentlyHidden : !forceVisible;
+            if (willHide && visibleColumnCount <= 1) {
+                return prev;
+            }
+            return {
+                ...prev,
+                [columnKey]: willHide
+            };
+        });
+    }, [visibleColumnCount]);
+    const handleReorderColumn = React.useCallback((fromKey, toKey) => {
+        setColumnOrder((prev) => {
+            const fromIndex = prev.indexOf(fromKey);
+            const toIndex = prev.indexOf(toKey);
+            if (fromIndex < 0 || toIndex < 0)
+                return prev;
+            return moveItem(prev, fromIndex, toIndex);
+        });
+    }, []);
+    const restoreDefaultColumns = React.useCallback(() => {
+        setColumnOrder(columnDescriptors.map((item) => item.key));
+        setHiddenColumnsMap(columnDescriptors.reduce((acc, item) => {
+            acc[item.key] = Boolean(item.column.hidden);
+            return acc;
+        }, {}));
+    }, [columnDescriptors]);
+    const showAllColumns = React.useCallback(() => {
+        setHiddenColumnsMap((prev) => {
+            const next = { ...prev };
+            for (const item of columnDescriptors) {
+                next[item.key] = false;
+            }
+            return next;
+        });
+    }, [columnDescriptors]);
     const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
-    return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, showClearFiltersButton ? (_jsx(SgButton, { size: "sm", appearance: "outline", onClick: clearFilters, children: clearFiltersLabel })) : null] })) : null, _jsx("div", { className: "relative", children: _jsx("div", { className: "overflow-x-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))]", children: _jsxs("table", { id: id, className: cn("min-w-full border-collapse text-sm", tableClassName), children: [_jsxs("thead", { children: [_jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
-                                                    const sortCandidate = column.sortField ?? column.field;
-                                                    const isSorted = Boolean(sortCandidate) && sortCandidate === currentSortField;
-                                                    const sortIcon = !column.sortable
-                                                        ? null
-                                                        : isSorted
-                                                            ? currentSortOrder === 1
-                                                                ? " ^"
-                                                                : currentSortOrder === -1
-                                                                    ? " v"
-                                                                    : " <>"
-                                                            : " <>";
-                                                    return (_jsx("th", { className: cn("px-3 py-2 font-semibold text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]", column.headerClassName, column.className), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => handleHeaderSort(column), className: cn("inline-flex items-center gap-1 font-semibold", resolveAlignmentClass(column.align), "text-[rgb(var(--sg-text))] hover:text-[rgb(var(--sg-primary-600))]"), children: [_jsx("span", { children: column.header }), _jsx("span", { "aria-hidden": "true", children: sortIcon })] })) : (_jsx("span", { children: column.header })) }, `head-${column.field ?? columnIndex}`));
-                                                }) }), shouldShowFiltersRow ? (_jsx("tr", { children: visibleColumns.map((column, columnIndex) => {
-                                                    const filterField = column.filterField ?? column.field;
-                                                    const filterValue = filterField ? currentFilters[filterField] ?? "" : "";
-                                                    return (_jsx("th", { className: cn("px-3 py-2 align-top", showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]"), children: column.filter && filterField ? (_jsx("input", { value: filterValue, onChange: (event) => {
-                                                                const nextFilters = {
-                                                                    ...currentFilters,
-                                                                    [filterField]: event.target.value
-                                                                };
-                                                                const normalized = normalizeFilters(nextFilters);
-                                                                commitFilters(normalized, currentGlobalFilter);
-                                                            }, placeholder: column.filterPlaceholder ?? t(i18n, "components.datatable.columnFilterPlaceholder", { column: String(column.header ?? "") }), className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-xs text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null }, `filter-${column.field ?? columnIndex}`));
-                                                }) })) : null] }), _jsx("tbody", { children: loading ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(1, visibleColumns.length), className: "px-4 py-6 text-center text-sm text-[rgb(var(--sg-muted))]", children: loadingLabel }) })) : pagedRows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(1, visibleColumns.length), className: "px-4 py-6 text-center text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel }) })) : (pagedRows.map((rowData, rowIndex) => {
-                                            const absoluteRowIndex = safeFirst + rowIndex;
-                                            const selected = isRowSelected(rowData);
-                                            const customRowClass = typeof rowClassName === "function" ? rowClassName(rowData, absoluteRowIndex) : rowClassName;
-                                            return (_jsx("tr", { "aria-selected": selected || undefined, onClick: (event) => {
-                                                    const target = event.target;
-                                                    if (target.closest("button,a,input,select,textarea,label,[data-sg-stop-row-select='true']")) {
-                                                        return;
-                                                    }
-                                                    handleRowSelection(rowData);
-                                                }, className: cn(selectionMode ? "cursor-pointer" : "", stripedRows && absoluteRowIndex % 2 === 1 ? "bg-[rgb(var(--sg-primary-50))]" : "", hoverableRows ? "hover:bg-[rgb(var(--sg-primary-100))]" : "", selected ? "bg-[rgb(var(--sg-primary-100))]" : "", customRowClass), children: visibleColumns.map((column, columnIndex) => {
-                                                    const cellField = column.field;
-                                                    const cellValue = getFieldValue(rowData, cellField);
-                                                    const customCellClass = typeof column.bodyClassName === "function"
-                                                        ? column.bodyClassName(rowData, absoluteRowIndex)
-                                                        : column.bodyClassName;
-                                                    const renderedValue = column.body
-                                                        ? column.body(rowData, {
-                                                            rowData,
-                                                            rowIndex: absoluteRowIndex,
-                                                            field: cellField,
-                                                            value: cellValue
-                                                        })
-                                                        : (_jsx("span", { children: cellValue === null || cellValue === undefined ? "-" : String(cellValue) }));
-                                                    return (_jsx("td", { className: cn("px-3 py-2 text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]", column.className, customCellClass), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: renderedValue }, `cell-${cellField ?? columnIndex}-${absoluteRowIndex}`));
-                                                }) }, String(getRowIdentity(rowData, dataKey) ?? absoluteRowIndex)));
-                                        })) }), hasFooter ? (_jsx("tfoot", { children: _jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
-                                                const footerValue = typeof column.footer === "function" ? column.footer(sortedRows) : column.footer;
-                                                return (_jsx("td", { className: cn("px-3 py-2 font-semibold text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-t border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-t border-[rgb(var(--sg-border))]", column.className), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: footerValue ?? null }, `foot-${column.field ?? columnIndex}`));
-                                            }) }) })) : null] }) }) }), paginator ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: currentPage <= 1, onClick: () => goToPage(currentPage - 1), children: prevLabel }), pageWindow.map((pageNumber) => (_jsx(SgButton, { size: "sm", appearance: pageNumber === currentPage ? "solid" : "outline", onClick: () => goToPage(pageNumber), children: String(pageNumber) }, `page-${pageNumber}`))), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: currentPage >= pageCount, onClick: () => goToPage(currentPage + 1), children: nextLabel }), _jsx("span", { className: "min-w-[180px] text-xs text-[rgb(var(--sg-muted))] md:ml-auto", children: pageReport }), rowsPerPageOptions && rowsPerPageOptions.length > 0 ? (_jsxs("label", { className: "ml-auto inline-flex items-center gap-2 text-xs text-[rgb(var(--sg-muted))] md:ml-0", children: [_jsx("span", { children: rowsPerPageLabel }), _jsx("select", { value: currentRows, onChange: (event) => {
+    return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, showClearFiltersButton ? (_jsx(SgButton, { size: "sm", appearance: "outline", onClick: clearFilters, children: clearFiltersLabel })) : null] })) : null, _jsxs("div", { className: "relative", ref: columnManagerRef, children: [showColumnManager ? (_jsx("div", { className: "mb-2 flex items-center justify-start", children: _jsx("button", { ref: columnManagerButtonRef, type: "button", "aria-label": resolvedColumnManagerLabel, title: resolvedColumnManagerLabel, onClick: () => setIsColumnManagerOpen((prev) => !prev), className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] text-[rgb(var(--sg-primary-600))] shadow-sm transition hover:bg-[rgb(var(--sg-primary-50))] hover:text-[rgb(var(--sg-primary-700))]", children: _jsx(SlidersHorizontal, { size: 18 }) }) })) : null, showColumnManager && isColumnManagerOpen && columnManagerPosition && typeof document !== "undefined"
+                                ? createPortal(_jsxs("div", { ref: columnManagerPanelRef, className: "fixed z-[1400] w-[300px] rounded-xl border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] shadow-xl", style: {
+                                        top: columnManagerPosition.top,
+                                        left: columnManagerPosition.left
+                                    }, children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-[rgb(var(--sg-border))] px-4 py-3", children: [_jsx(SlidersHorizontal, { size: 18, className: "text-[rgb(var(--sg-primary-600))]" }), _jsx("span", { className: "text-sm font-semibold text-[rgb(var(--sg-text))]", children: resolvedColumnManagerLabel })] }), _jsx("div", { className: "overflow-y-auto px-2 py-2", style: { maxHeight: toCssSize(columnManagerMaxHeight) }, children: _jsx("div", { className: "space-y-1", children: orderedColumns.map((item) => {
+                                                    const isHidden = Boolean(hiddenColumnsMap[item.key]);
+                                                    const isHideable = item.column.hideable !== false;
+                                                    const isReorderable = item.column.reorderable !== false;
+                                                    const canHideThisColumn = isHideable && (!isHidden ? visibleColumnCount > 1 : true);
+                                                    const columnLabel = typeof item.column.header === "string" || typeof item.column.header === "number"
+                                                        ? String(item.column.header)
+                                                        : item.column.field ?? item.key;
+                                                    return (_jsxs("div", { draggable: isReorderable, onDragStart: () => setDraggingColumnKey(item.key), onDragOver: (event) => {
+                                                            if (!isReorderable)
+                                                                return;
+                                                            event.preventDefault();
+                                                        }, onDrop: (event) => {
+                                                            event.preventDefault();
+                                                            if (!isReorderable)
+                                                                return;
+                                                            if (!draggingColumnKey || draggingColumnKey === item.key)
+                                                                return;
+                                                            handleReorderColumn(draggingColumnKey, item.key);
+                                                            setDraggingColumnKey(null);
+                                                        }, onDragEnd: () => setDraggingColumnKey(null), className: cn("flex items-center gap-3 rounded-md px-2 py-2", draggingColumnKey === item.key ? "opacity-60" : "", "hover:bg-[rgb(var(--sg-primary-50))]"), children: [_jsx("button", { type: "button", disabled: !canHideThisColumn, onClick: () => toggleColumnVisibility(item.key), className: cn("inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border transition", !isHidden
+                                                                    ? "border-[rgb(var(--sg-primary-600))] bg-[rgb(var(--sg-primary-600))] text-white"
+                                                                    : "border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] text-transparent", !canHideThisColumn ? "cursor-not-allowed opacity-50" : "hover:scale-[1.02]"), children: _jsx(Check, { size: 14 }) }), _jsx("button", { type: "button", disabled: !canHideThisColumn, onClick: () => toggleColumnVisibility(item.key), className: cn("flex-1 truncate text-left text-sm", isHidden
+                                                                    ? "text-[rgb(var(--sg-muted))]"
+                                                                    : "text-[rgb(var(--sg-text))]", !canHideThisColumn ? "cursor-not-allowed" : ""), children: columnLabel }), _jsx("div", { className: cn("inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[rgb(var(--sg-muted))]", isReorderable ? "cursor-grab active:cursor-grabbing" : "opacity-40"), title: dragHandleLabel, children: _jsx(GripVertical, { size: 16 }) })] }, `manager-${item.key}`));
+                                                }) }) }), _jsxs("div", { className: "flex items-center gap-2 border-t border-[rgb(var(--sg-border))] px-3 py-3", children: [_jsx(SgButton, { size: "sm", appearance: "outline", onClick: restoreDefaultColumns, children: restoreColumnsLabel }), _jsx(SgButton, { size: "sm", appearance: "outline", onClick: showAllColumns, children: showAllColumnsLabel })] })] }), document.body)
+                                : null, _jsx("div", { className: "overflow-x-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))]", children: _jsxs("table", { id: id, className: cn("min-w-full border-collapse text-sm", tableClassName), children: [_jsxs("thead", { children: [_jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
+                                                        const sortCandidate = column.sortField ?? column.field;
+                                                        const isSorted = Boolean(sortCandidate) && sortCandidate === currentSortField;
+                                                        const sortIcon = !column.sortable
+                                                            ? null
+                                                            : isSorted
+                                                                ? currentSortOrder === 1
+                                                                    ? " ^"
+                                                                    : currentSortOrder === -1
+                                                                        ? " v"
+                                                                        : " <>"
+                                                                : " <>";
+                                                        return (_jsx("th", { className: cn("px-3 py-2 font-semibold text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]", column.headerClassName, column.className), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => handleHeaderSort(column), className: cn("inline-flex items-center gap-1 font-semibold", resolveAlignmentClass(column.align), "text-[rgb(var(--sg-text))] hover:text-[rgb(var(--sg-primary-600))]"), children: [_jsx("span", { children: column.header }), _jsx("span", { "aria-hidden": "true", children: sortIcon })] })) : (_jsx("span", { children: column.header })) }, `head-${column.columnId ?? column.field ?? columnIndex}`));
+                                                    }) }), shouldShowFiltersRow ? (_jsx("tr", { children: visibleColumns.map((column, columnIndex) => {
+                                                        const filterField = column.filterField ?? column.field;
+                                                        const filterValue = filterField ? currentFilters[filterField] ?? "" : "";
+                                                        return (_jsx("th", { className: cn("px-3 py-2 align-top", showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]"), children: column.filter && filterField ? (_jsx("input", { value: filterValue, onChange: (event) => {
+                                                                    const nextFilters = {
+                                                                        ...currentFilters,
+                                                                        [filterField]: event.target.value
+                                                                    };
+                                                                    const normalized = normalizeFilters(nextFilters);
+                                                                    commitFilters(normalized, currentGlobalFilter);
+                                                                }, placeholder: column.filterPlaceholder ?? t(i18n, "components.datatable.columnFilterPlaceholder", { column: String(column.header ?? "") }), className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-xs text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null }, `filter-${column.columnId ?? column.field ?? columnIndex}`));
+                                                    }) })) : null] }), _jsx("tbody", { children: loading ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(1, visibleColumns.length), className: "px-4 py-6 text-center text-sm text-[rgb(var(--sg-muted))]", children: loadingLabel }) })) : pagedRows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(1, visibleColumns.length), className: "px-4 py-6 text-center text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel }) })) : (pagedRows.map((rowData, rowIndex) => {
+                                                const absoluteRowIndex = safeFirst + rowIndex;
+                                                const selected = isRowSelected(rowData);
+                                                const customRowClass = typeof rowClassName === "function" ? rowClassName(rowData, absoluteRowIndex) : rowClassName;
+                                                return (_jsx("tr", { "aria-selected": selected || undefined, onClick: (event) => {
+                                                        const target = event.target;
+                                                        if (target.closest("button,a,input,select,textarea,label,[data-sg-stop-row-select='true']")) {
+                                                            return;
+                                                        }
+                                                        handleRowSelection(rowData);
+                                                    }, className: cn(selectionMode ? "cursor-pointer" : "", stripedRows && absoluteRowIndex % 2 === 1 ? "bg-[rgb(var(--sg-primary-50))]" : "", hoverableRows ? "hover:bg-[rgb(var(--sg-primary-100))]" : "", selected ? "bg-[rgb(var(--sg-primary-100))]" : "", customRowClass), children: visibleColumns.map((column, columnIndex) => {
+                                                        const cellField = column.field;
+                                                        const cellValue = getFieldValue(rowData, cellField);
+                                                        const customCellClass = typeof column.bodyClassName === "function"
+                                                            ? column.bodyClassName(rowData, absoluteRowIndex)
+                                                            : column.bodyClassName;
+                                                        const renderedValue = column.body
+                                                            ? column.body(rowData, {
+                                                                rowData,
+                                                                rowIndex: absoluteRowIndex,
+                                                                field: cellField,
+                                                                value: cellValue
+                                                            })
+                                                            : (_jsx("span", { children: cellValue === null || cellValue === undefined ? "-" : String(cellValue) }));
+                                                        return (_jsx("td", { className: cn("px-3 py-2 text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-b border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-b border-[rgb(var(--sg-border))]", column.className, customCellClass), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: renderedValue }, `cell-${column.columnId ?? cellField ?? columnIndex}-${absoluteRowIndex}`));
+                                                    }) }, String(getRowIdentity(rowData, dataKey) ?? absoluteRowIndex)));
+                                            })) }), hasFooter ? (_jsx("tfoot", { children: _jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
+                                                    const footerValue = typeof column.footer === "function" ? column.footer(sortedRows) : column.footer;
+                                                    return (_jsx("td", { className: cn("px-3 py-2 font-semibold text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-t border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-t border-[rgb(var(--sg-border))]", column.className), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: footerValue ?? null }, `foot-${column.columnId ?? column.field ?? columnIndex}`));
+                                                }) }) })) : null] }) })] }), paginator ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: currentPage <= 1, onClick: () => goToPage(currentPage - 1), children: prevLabel }), pageWindow.map((pageNumber) => (_jsx(SgButton, { size: "sm", appearance: pageNumber === currentPage ? "solid" : "outline", onClick: () => goToPage(pageNumber), children: String(pageNumber) }, `page-${pageNumber}`))), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: currentPage >= pageCount, onClick: () => goToPage(currentPage + 1), children: nextLabel }), _jsx("span", { className: "min-w-[180px] text-xs text-[rgb(var(--sg-muted))] md:ml-auto", children: pageReport }), rowsPerPageOptions && rowsPerPageOptions.length > 0 ? (_jsxs("label", { className: "ml-auto inline-flex items-center gap-2 text-xs text-[rgb(var(--sg-muted))] md:ml-0", children: [_jsx("span", { children: rowsPerPageLabel }), _jsx("select", { value: currentRows, onChange: (event) => {
                                             const nextRows = Number(event.target.value) || currentRows;
                                             commitPage(0, nextRows);
                                         }, className: "rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-xs text-[rgb(var(--sg-input-fg,var(--sg-text)))]", children: rowsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })) : null] })) : null] }) }) }));

package/dist/inputs/SgInputText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGlF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;AAyeF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAsElD"}
+{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGlF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;AAohBF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAsElD"}

package/dist/inputs/SgInputText.js

@@ -120,13 +120,16 @@ function SgInputTextBase(props) {
         const value = stripAffixes(inputProps.value ?? inputProps.defaultValue ?? "");
         return value.length;
     });
-    React.useEffect(() => {
-        const next = (inputRef.current?.value ?? "").length > 0;
-        if (next !== isFilled)
-            setIsFilled(next);
-        const nextLength = (inputRef.current?.value ?? "").length;
+    const syncFilledStateFromDom = React.useCallback(() => {
+        const nextValue = inputRef.current?.value ?? "";
+        const nextFilled = nextValue.length > 0;
+        const nextLength = nextValue.length;
+        setIsFilled((prev) => (prev === nextFilled ? prev : nextFilled));
         setValueLength((prev) => (prev === nextLength ? prev : nextLength));
-    }, [isFilled]);
+    }, []);
+    React.useEffect(() => {
+        syncFilledStateFromDom();
+    }, [syncFilledStateFromDom]);
     React.useEffect(() => {
         if (inputProps.value === undefined)
             return;
@@ -134,6 +137,27 @@ function SgInputTextBase(props) {
         setIsFilled(raw.length > 0);
         setValueLength(raw.length);
     }, [inputProps.value, stripAffixes]);
+    React.useEffect(() => {
+        const node = inputRef.current;
+        if (!node)
+            return;
+        const sync = () => {
+            syncFilledStateFromDom();
+        };
+        // Browsers/password managers may hydrate the value without dispatching React events.
+        const timers = [
+            window.setTimeout(sync, 0),
+            window.setTimeout(sync, 100),
+            window.setTimeout(sync, 300)
+        ];
+        node.addEventListener("input", sync);
+        node.addEventListener("change", sync);
+        return () => {
+            timers.forEach((timer) => window.clearTimeout(timer));
+            node.removeEventListener("input", sync);
+            node.removeEventListener("change", sync);
+        };
+    }, [syncFilledStateFromDom]);
     React.useLayoutEffect(() => {
         if (prefixRef.current) {
             const next = prefixRef.current.offsetWidth;
@@ -222,6 +246,7 @@ function SgInputTextBase(props) {
         props.onExit?.();
     };
     const handleFocus = () => {
+        syncFilledStateFromDom();
         props.onEnter?.();
     };
     const handleClear = () => {
@@ -316,7 +341,17 @@ function SgInputTextBase(props) {
     const outerLayoutStyle = labelPosition === "left"
         ? { ["--sg-input-label-width"]: resolvedLabelWidth }
         : undefined;
-    const fieldNode = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative", children: [prefixText ? (_jsx("span", { ref: prefixRef, className: "pointer-events-none absolute left-0 top-0 z-10 flex h-11 items-center rounded-l-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: prefixText })) : null, props.prefixIcon ? (_jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-foreground/60", children: props.prefixIcon })) : null, _jsx("input", { id: props.id, type: props.type ?? "text", placeholder: placeholder, className: props.className ?? finalClass, style: {
+    const fieldNode = (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        @keyframes sg-input-autofill-detect {
+          from {}
+          to {}
+        }
+
+        input:-webkit-autofill {
+          animation-name: sg-input-autofill-detect;
+          animation-duration: 0.01s;
+        }
+      ` }), _jsxs("div", { className: "relative", children: [prefixText ? (_jsx("span", { ref: prefixRef, className: "pointer-events-none absolute left-0 top-0 z-10 flex h-11 items-center rounded-l-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: prefixText })) : null, props.prefixIcon ? (_jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-foreground/60", children: props.prefixIcon })) : null, _jsx("input", { id: props.id, type: props.type ?? "text", placeholder: placeholder, className: props.className ?? finalClass, style: {
                             borderRadius: resolvedBorderRadius,
                             paddingLeft: prefixPaddingStyle,
                             paddingRight: suffixPaddingStyle,
@@ -332,7 +367,7 @@ function SgInputTextBase(props) {
                             ...(prefixText ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeftWidth: 0 } : {}),
                             ...(suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
                             ...(resolvedInputProps.style ?? {})
-                        }, maxLength: props.maxLength, readOnly: props.readOnly, disabled: props.enabled === false, inputMode: props.textInputType ?? resolvedInputProps.inputMode, ...resolvedInputProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: suffixText })) : null, isFloatLabel ? (_jsxs("label", { htmlFor: props.id, className: [
+                        }, maxLength: props.maxLength, readOnly: props.readOnly, disabled: props.enabled === false, inputMode: props.textInputType ?? resolvedInputProps.inputMode, ...resolvedInputProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onAnimationStart: syncFilledStateFromDom }), suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: suffixText })) : null, isFloatLabel ? (_jsxs("label", { htmlFor: props.id, className: [
                             "absolute z-10 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
                             isFilled ? "-top-2 text-xs" : "top-3 text-sm",
                             hasError ? "text-[hsl(var(--destructive))]" : isFilled ? "text-[hsl(var(--primary))]" : "text-foreground/60",

package/dist/layout/SgScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgScreen.d.ts","sourceRoot":"","sources":["../../src/layout/SgScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,2CA8EtD;yBA9Ee,QAAQ"}
+{"version":3,"file":"SgScreen.d.ts","sourceRoot":"","sources":["../../src/layout/SgScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,2CA0CtD;yBA1Ce,QAAQ"}

package/dist/layout/SgScreen.js

@@ -1,46 +1,19 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { cn, renderDockContent, toCssSpace } from "./sgDocking";
 export function SgScreen(props) {
     const { fullscreen = true, width, height, padding, className, style, children, ...rest } = props;
-    const ref = React.useRef(null);
-    const [measuredSize, setMeasuredSize] = React.useState({});
-    React.useLayoutEffect(() => {
-        if (!fullscreen) {
-            setMeasuredSize({});
-            return;
-        }
-        const element = ref.current;
-        const parent = element?.parentElement;
-        if (!element || !parent)
-            return;
-        const update = () => {
-            setMeasuredSize({
-                width: parent.clientWidth || undefined,
-                height: parent.clientHeight || undefined
-            });
-        };
-        update();
-        const observer = new ResizeObserver(update);
-        observer.observe(parent);
-        window.addEventListener("resize", update);
-        return () => {
-            observer.disconnect();
-            window.removeEventListener("resize", update);
-        };
-    }, [fullscreen]);
-    return (_jsx("div", { ref: ref, className: cn("relative box-border flex flex-1 self-stretch min-h-0 min-w-0 max-h-full max-w-full overflow-hidden", className), style: {
+    return (_jsx("div", { className: cn("relative box-border flex flex-1 self-stretch min-h-0 min-w-0 max-h-full max-w-full overflow-hidden", className), style: {
             ...style,
             ...(width !== undefined
                 ? { width: toCssSpace(width) }
-                : fullscreen && measuredSize.width !== undefined
-                    ? { width: `${measuredSize.width}px` }
+                : fullscreen
+                    ? { width: "100%" }
                     : null),
             ...(height !== undefined
                 ? { height: toCssSpace(height) }
-                : fullscreen && measuredSize.height !== undefined
-                    ? { height: `${measuredSize.height}px` }
+                : fullscreen
+                    ? { height: "100dvh" }
                     : null),
             padding: toCssSpace(padding)
         }, ...rest, children: _jsx("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col", children: renderDockContent({

package/dist/layout/sgDocking.js

@@ -71,7 +71,7 @@ function renderDockItem(item, index, axis) {
             ...(item.minHeightPx !== undefined ? { minHeight: `${item.minHeightPx}px` } : null),
             ...(heightCss !== undefined
                 ? { height: heightCss, flex: `0 0 ${heightCss}` }
-                : { height: "100%", flex: "1 1 0%" })
+                : { height: "auto", flex: "0 0 auto" })
         }, "w-full min-w-0");
     }
     if (axis === "left" || axis === "right") {
@@ -83,7 +83,7 @@ function renderDockItem(item, index, axis) {
             ...(item.minWidthPx !== undefined ? { minWidth: `${item.minWidthPx}px` } : null),
             ...(widthCss !== undefined
                 ? { width: widthCss, flex: `0 0 ${widthCss}` }
-                : { width: "100%", flex: "1 1 0%" })
+                : { width: "auto", flex: "0 0 auto" })
         }, "h-full min-h-0 min-w-0");
     }
     return cloneWithLayout(item.node, item.key ?? `client-${index}`, {

package/dist/overlay/SgConfirmationDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/overlay/SgConfirmationDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEjF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,aAAa,EACb,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,CAC1E,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,gCAAgC,CAAC;IAChD,aAAa,CAAC,EAAE,gCAAgC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAoEF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,yBAAyB,CAAC,2CA2I9E;yBA3Ie,oBAAoB"}
+{"version":3,"file":"SgConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/overlay/SgConfirmationDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEjF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,aAAa,EACb,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,CAC1E,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,gCAAgC,CAAC;IAChD,aAAa,CAAC,EAAE,gCAAgC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAoEF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,yBAAyB,CAAC,2CA2J9E;yBA3Je,oBAAoB"}

package/dist/overlay/SgConfirmationDialog.js

@@ -75,7 +75,21 @@ export function SgConfirmationDialog(props) {
     const resolvedIcon = icon !== undefined ? icon : defaultSeverityIcon(severity);
     const cancelSeverity = cancelButton?.severity ?? "secondary";
     const confirmSeverity = confirmButton?.severity ?? resolveButtonSeverity(severity, "primary");
+    const resolvedCancelCustomColors = cancelButton?.appearance === undefined &&
+        cancelButton?.severity === undefined &&
+        cancelButton?.className === undefined
+        ? {
+            // SgButton outline uses `bg` as the text color token, so keep it visible here.
+            bg: "hsl(var(--foreground))",
+            fg: "hsl(var(--foreground))",
+            border: "hsl(var(--border))",
+            hoverBg: "hsl(var(--muted) / 0.8)",
+            hoverFg: "hsl(var(--foreground))",
+            hoverBorder: "hsl(var(--border))",
+            activeBg: "hsl(var(--muted))",
+        }
+        : undefined;
     const messageBlock = (_jsx("div", { className: "text-sm text-muted-foreground", children: message }));
-    return (_jsx(SgDialog, { ...dialogProps, open: open, onOpenChange: handleDialogOpenChange, onClose: onClose, closeable: closeable, severity: severity, showTopAccent: showSeverityAccent, customColor: customColor, elevation: elevation, title: title, size: size, footer: (_jsxs(_Fragment, { children: [_jsx(SgButton, { size: "sm", appearance: cancelButton?.appearance ?? "ghost", severity: cancelSeverity, shape: cancelButton?.shape ?? "rounded", disabled: cancelButton?.disabled, className: cancelButton?.className, leftIcon: cancelIcon, onClick: handleCancel, children: cancelLabel }), _jsx(SgButton, { size: "sm", appearance: confirmButton?.appearance ?? "solid", severity: confirmSeverity, shape: confirmButton?.shape ?? "rounded", disabled: confirmButton?.disabled, className: confirmButton?.className, leftIcon: confirmIcon, onClick: handleConfirm, children: confirmLabel })] })), children: resolvedIcon ? (iconPlacement === "top" ? (_jsxs("div", { className: "flex flex-col items-start gap-3", children: [_jsx("div", { className: "shrink-0", children: resolvedIcon }), messageBlock] })) : (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "shrink-0", children: resolvedIcon }), _jsx("div", { className: "min-w-0", children: messageBlock })] }))) : (messageBlock) }));
+    return (_jsx(SgDialog, { ...dialogProps, open: open, onOpenChange: handleDialogOpenChange, onClose: onClose, closeable: closeable, severity: severity, showTopAccent: showSeverityAccent, customColor: customColor, elevation: elevation, title: title, size: size, footer: (_jsxs(_Fragment, { children: [_jsx(SgButton, { size: "sm", appearance: cancelButton?.appearance ?? "outline", severity: cancelSeverity, shape: cancelButton?.shape ?? "rounded", disabled: cancelButton?.disabled, className: cancelButton?.className, customColors: resolvedCancelCustomColors, leftIcon: cancelIcon, onClick: handleCancel, children: cancelLabel }), _jsx(SgButton, { size: "sm", appearance: confirmButton?.appearance ?? "solid", severity: confirmSeverity, shape: confirmButton?.shape ?? "rounded", disabled: confirmButton?.disabled, className: confirmButton?.className, leftIcon: confirmIcon, onClick: handleConfirm, children: confirmLabel })] })), children: resolvedIcon ? (iconPlacement === "top" ? (_jsxs("div", { className: "flex flex-col items-start gap-3", children: [_jsx("div", { className: "shrink-0", children: resolvedIcon }), messageBlock] })) : (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "shrink-0", children: resolvedIcon }), _jsx("div", { className: "min-w-0", children: messageBlock })] }))) : (messageBlock) }));
 }
 SgConfirmationDialog.displayName = "SgConfirmationDialog";

package/dist/overlay/SgDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgDialog.d.ts","sourceRoot":"","sources":["../../src/overlay/SgDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC3E,gCAAgC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsRF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BA6QtD;yBA7Qe,QAAQ"}
+{"version":3,"file":"SgDialog.d.ts","sourceRoot":"","sources":["../../src/overlay/SgDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC3E,gCAAgC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsRF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BAqRtD;yBArRe,QAAQ"}