@seedgrid/fe-components 2026.3.5 → 2026.3.11-1

package/dist/inputs/SgDatatable.js

@@ -0,0 +1,441 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SgButton } from "../buttons/SgButton";
+import { SgGroupBox } from "../layout/SgGroupBox";
+import { t, useComponentsI18n } from "../i18n";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function toCssSize(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+function normalizeFilters(filters) {
+    if (!filters)
+        return {};
+    return Object.entries(filters).reduce((acc, [field, value]) => {
+        const text = String(value ?? "").trim();
+        if (!text)
+            return acc;
+        acc[field] = text;
+        return acc;
+    }, {});
+}
+function getFieldValue(row, field) {
+    if (!field)
+        return undefined;
+    if (!field.includes("."))
+        return row[field];
+    const chunks = field.split(".");
+    let current = row;
+    for (const chunk of chunks) {
+        if (current === null || current === undefined)
+            return undefined;
+        if (typeof current !== "object")
+            return undefined;
+        current = current[chunk];
+    }
+    return current;
+}
+function normalizeText(value) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string")
+        return value.toLowerCase();
+    if (typeof value === "number" || typeof value === "bigint")
+        return String(value);
+    if (typeof value === "boolean")
+        return value ? "true" : "false";
+    if (value instanceof Date)
+        return value.toISOString().toLowerCase();
+    return String(value).toLowerCase();
+}
+function matchesFilter(value, query, mode) {
+    const search = query.trim().toLowerCase();
+    if (!search)
+        return true;
+    const source = normalizeText(value);
+    if (mode === "startsWith")
+        return source.startsWith(search);
+    if (mode === "endsWith")
+        return source.endsWith(search);
+    if (mode === "equals")
+        return source === search;
+    return source.includes(search);
+}
+function compareValues(a, b) {
+    if (a === b)
+        return 0;
+    if (a === null || a === undefined)
+        return -1;
+    if (b === null || b === undefined)
+        return 1;
+    if (typeof a === "number" && typeof b === "number")
+        return a - b;
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() - b.getTime();
+    return String(a).localeCompare(String(b), undefined, {
+        sensitivity: "base",
+        numeric: true
+    });
+}
+function resolveMessage(translated, key, fallback) {
+    return translated === key ? fallback : translated;
+}
+function buildPageWindow(currentPage, pageCount, maxButtons = 5) {
+    if (pageCount <= 0)
+        return [];
+    if (pageCount <= maxButtons)
+        return Array.from({ length: pageCount }, (_, index) => index + 1);
+    const half = Math.floor(maxButtons / 2);
+    let start = Math.max(1, currentPage - half);
+    let end = start + maxButtons - 1;
+    if (end > pageCount) {
+        end = pageCount;
+        start = end - maxButtons + 1;
+    }
+    const pages = [];
+    for (let page = start; page <= end; page += 1) {
+        pages.push(page);
+    }
+    return pages;
+}
+function getRowIdentity(rowData, dataKey) {
+    if (!dataKey)
+        return rowData;
+    return getFieldValue(rowData, dataKey);
+}
+function rowsAreEqual(rowA, rowB, dataKey) {
+    if (!dataKey)
+        return rowA === rowB;
+    return getRowIdentity(rowA, dataKey) === getRowIdentity(rowB, dataKey);
+}
+function resolveAlignmentClass(align) {
+    if (align === "center")
+        return "text-center";
+    if (align === "right")
+        return "text-right";
+    return "text-left";
+}
+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 isFirstControlled = first !== undefined;
+    const isSortFieldControlled = sortField !== undefined;
+    const isSortOrderControlled = sortOrder !== undefined;
+    const isSelectionControlled = selection !== undefined;
+    const isGlobalFilterControlled = globalFilter !== undefined;
+    const isFiltersControlled = filters !== undefined;
+    const [internalFirst, setInternalFirst] = React.useState(Math.max(0, first ?? 0));
+    const [internalRows, setInternalRows] = React.useState(Math.max(1, rows));
+    const [internalSortField, setInternalSortField] = React.useState(sortField ?? null);
+    const [internalSortOrder, setInternalSortOrder] = React.useState(sortOrder ?? 0);
+    const [internalSelection, setInternalSelection] = React.useState(null);
+    const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(globalFilter ?? "");
+    const [internalFilters, setInternalFilters] = React.useState(() => normalizeFilters(filters));
+    React.useEffect(() => {
+        if (!isFirstControlled)
+            return;
+        setInternalFirst(Math.max(0, first ?? 0));
+    }, [isFirstControlled, first]);
+    React.useEffect(() => {
+        setInternalRows(Math.max(1, rows));
+    }, [rows]);
+    React.useEffect(() => {
+        if (!isSortFieldControlled)
+            return;
+        setInternalSortField(sortField ?? null);
+    }, [isSortFieldControlled, sortField]);
+    React.useEffect(() => {
+        if (!isSortOrderControlled)
+            return;
+        setInternalSortOrder(sortOrder ?? 0);
+    }, [isSortOrderControlled, sortOrder]);
+    React.useEffect(() => {
+        if (!isSelectionControlled)
+            return;
+        setInternalSelection(selection ?? null);
+    }, [isSelectionControlled, selection]);
+    React.useEffect(() => {
+        if (!isGlobalFilterControlled)
+            return;
+        setInternalGlobalFilter(globalFilter ?? "");
+    }, [isGlobalFilterControlled, globalFilter]);
+    React.useEffect(() => {
+        if (!isFiltersControlled)
+            return;
+        setInternalFilters(normalizeFilters(filters));
+    }, [isFiltersControlled, filters]);
+    const visibleColumns = React.useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const currentFirst = isFirstControlled ? Math.max(0, first ?? 0) : internalFirst;
+    const currentRows = Math.max(1, internalRows);
+    const currentSortField = isSortFieldControlled ? sortField ?? null : internalSortField;
+    const currentSortOrder = isSortOrderControlled ? sortOrder ?? 0 : internalSortOrder;
+    const currentSelection = isSelectionControlled ? selection ?? null : internalSelection;
+    const currentGlobalFilter = isGlobalFilterControlled ? globalFilter ?? "" : internalGlobalFilter;
+    const currentFilters = isFiltersControlled ? normalizeFilters(filters) : internalFilters;
+    const globalFilterColumns = React.useMemo(() => visibleColumns.filter((column) => column.field && !column.excludeGlobalFilter), [visibleColumns]);
+    const filteredRows = React.useMemo(() => {
+        if (lazy)
+            return value;
+        return value.filter((rowData) => {
+            const matchesGlobal = !currentGlobalFilter.trim()
+                ? true
+                : globalFilterColumns.some((column) => {
+                    const columnField = column.filterField ?? column.field;
+                    return matchesFilter(getFieldValue(rowData, columnField), currentGlobalFilter, "contains");
+                });
+            if (!matchesGlobal)
+                return false;
+            const columnFilterEntries = Object.entries(currentFilters);
+            if (columnFilterEntries.length === 0)
+                return true;
+            for (const [field, query] of columnFilterEntries) {
+                const column = visibleColumns.find((item) => (item.filterField ?? item.field) === field);
+                if (!column)
+                    continue;
+                const matchMode = column.filterMatchMode ?? "contains";
+                const fieldValue = getFieldValue(rowData, field);
+                if (!matchesFilter(fieldValue, query, matchMode))
+                    return false;
+            }
+            return true;
+        });
+    }, [lazy, value, currentGlobalFilter, currentFilters, globalFilterColumns, visibleColumns]);
+    const sortedRows = React.useMemo(() => {
+        if (lazy)
+            return filteredRows;
+        if (!currentSortField || currentSortOrder === 0)
+            return filteredRows;
+        const sortColumn = visibleColumns.find((column) => (column.sortField ?? column.field) === currentSortField);
+        const direction = currentSortOrder === -1 ? -1 : 1;
+        return [...filteredRows].sort((rowA, rowB) => {
+            if (sortColumn?.sortFunction) {
+                return sortColumn.sortFunction(rowA, rowB) * direction;
+            }
+            const sortFieldName = sortColumn?.sortField ?? sortColumn?.field ?? currentSortField;
+            const aValue = getFieldValue(rowA, sortFieldName);
+            const bValue = getFieldValue(rowB, sortFieldName);
+            return compareValues(aValue, bValue) * direction;
+        });
+    }, [lazy, currentSortField, currentSortOrder, filteredRows, visibleColumns]);
+    const resolvedTotalRecords = lazy ? Math.max(0, controlledTotalRecords ?? value.length) : sortedRows.length;
+    const pageCount = Math.max(1, Math.ceil(Math.max(resolvedTotalRecords, 1) / currentRows));
+    const maxFirst = Math.max(0, (pageCount - 1) * currentRows);
+    const safeFirst = Math.min(currentFirst, maxFirst);
+    const pagedRows = React.useMemo(() => {
+        if (!paginator)
+            return sortedRows;
+        if (lazy)
+            return sortedRows;
+        return sortedRows.slice(safeFirst, safeFirst + currentRows);
+    }, [paginator, lazy, sortedRows, safeFirst, currentRows]);
+    const currentPage = Math.floor(safeFirst / currentRows) + 1;
+    const pageWindow = React.useMemo(() => buildPageWindow(currentPage, pageCount, 5), [currentPage, pageCount]);
+    const commitPage = React.useCallback((nextFirst, nextRows) => {
+        const normalizedRows = Math.max(1, nextRows);
+        const normalizedFirst = Math.max(0, nextFirst);
+        if (!isFirstControlled)
+            setInternalFirst(normalizedFirst);
+        setInternalRows(normalizedRows);
+        const nextPageCount = Math.max(1, Math.ceil(Math.max(resolvedTotalRecords, 1) / normalizedRows));
+        const page = Math.floor(normalizedFirst / normalizedRows) + 1;
+        onPage?.({
+            first: normalizedFirst,
+            rows: normalizedRows,
+            page,
+            pageCount: nextPageCount,
+            totalRecords: resolvedTotalRecords
+        });
+    }, [isFirstControlled, onPage, resolvedTotalRecords]);
+    React.useEffect(() => {
+        if (safeFirst === currentFirst)
+            return;
+        commitPage(safeFirst, currentRows);
+    }, [safeFirst, currentFirst, commitPage, currentRows]);
+    const commitSort = React.useCallback((nextSortField, nextSortOrder) => {
+        if (!isSortFieldControlled)
+            setInternalSortField(nextSortField);
+        if (!isSortOrderControlled)
+            setInternalSortOrder(nextSortOrder);
+        onSort?.({ sortField: nextSortField, sortOrder: nextSortOrder });
+    }, [isSortFieldControlled, isSortOrderControlled, onSort]);
+    const commitSelection = React.useCallback((nextSelection) => {
+        if (!isSelectionControlled)
+            setInternalSelection(nextSelection);
+        onSelectionChange?.(nextSelection);
+    }, [isSelectionControlled, onSelectionChange]);
+    const commitFilters = React.useCallback((nextFilters, nextGlobalFilter) => {
+        if (!isFiltersControlled)
+            setInternalFilters(nextFilters);
+        if (!isGlobalFilterControlled)
+            setInternalGlobalFilter(nextGlobalFilter);
+        onGlobalFilterChange?.(nextGlobalFilter);
+        onFilter?.({ filters: nextFilters, globalFilter: nextGlobalFilter });
+        commitPage(0, currentRows);
+    }, [
+        isFiltersControlled,
+        isGlobalFilterControlled,
+        onGlobalFilterChange,
+        onFilter,
+        commitPage,
+        currentRows
+    ]);
+    const clearFilters = React.useCallback(() => {
+        commitFilters({}, "");
+    }, [commitFilters]);
+    const resetSort = React.useCallback(() => {
+        commitSort(null, 0);
+    }, [commitSort]);
+    const clearSelection = React.useCallback(() => {
+        if (selectionMode === "multiple") {
+            commitSelection([]);
+            return;
+        }
+        commitSelection(null);
+    }, [selectionMode, commitSelection]);
+    const goToPage = React.useCallback((page) => {
+        const normalizedPage = Math.max(1, Math.min(page, pageCount));
+        commitPage((normalizedPage - 1) * currentRows, currentRows);
+    }, [commitPage, currentRows, pageCount]);
+    React.useImperativeHandle(imperativeRef, () => ({
+        getProcessedRows: () => sortedRows,
+        getPagedRows: () => pagedRows,
+        clearFilters,
+        clearSelection,
+        resetSort,
+        resetPage: () => commitPage(0, currentRows),
+        goToPage
+    }), [sortedRows, pagedRows, clearFilters, clearSelection, resetSort, commitPage, currentRows, goToPage]);
+    const emptyLabel = emptyMessage ?? resolveMessage(t(i18n, "components.datatable.empty"), "components.datatable.empty", "No records found.");
+    const loadingLabel = resolveMessage(t(i18n, "components.datatable.loading"), "components.datatable.loading", "Loading data...");
+    const globalFilterLabel = globalFilterPlaceholder ?? resolveMessage(t(i18n, "components.datatable.globalFilterPlaceholder"), "components.datatable.globalFilterPlaceholder", "Search in all columns");
+    const clearFiltersLabel = resolveMessage(t(i18n, "components.datatable.clearFilters"), "components.datatable.clearFilters", "Clear filters");
+    const prevLabel = resolveMessage(t(i18n, "components.datatable.prev"), "components.datatable.prev", "Prev");
+    const nextLabel = resolveMessage(t(i18n, "components.datatable.next"), "components.datatable.next", "Next");
+    const rowsPerPageLabel = resolveMessage(t(i18n, "components.datatable.rowsPerPage"), "components.datatable.rowsPerPage", "Rows per page");
+    const pageReport = resolveMessage(t(i18n, "components.datatable.pageReport", {
+        first: resolvedTotalRecords === 0 ? 0 : safeFirst + 1,
+        last: Math.min(safeFirst + currentRows, resolvedTotalRecords),
+        total: resolvedTotalRecords
+    }), "components.datatable.pageReport", `${resolvedTotalRecords === 0 ? 0 : safeFirst + 1} - ${Math.min(safeFirst + currentRows, resolvedTotalRecords)} of ${resolvedTotalRecords}`);
+    const shouldShowToolbar = showGlobalFilter || showClearFiltersButton;
+    const shouldShowFiltersRow = showColumnFilters && visibleColumns.some((column) => column.filter);
+    const hasFooter = visibleColumns.some((column) => column.footer !== undefined);
+    const handleHeaderSort = (column) => {
+        if (!column.sortable)
+            return;
+        const nextSortField = column.sortField ?? column.field;
+        if (!nextSortField)
+            return;
+        if (currentSortField !== nextSortField) {
+            commitSort(nextSortField, 1);
+            return;
+        }
+        if (currentSortOrder === 1) {
+            commitSort(nextSortField, -1);
+            return;
+        }
+        if (currentSortOrder === -1) {
+            if (removableSort) {
+                commitSort(null, 0);
+            }
+            else {
+                commitSort(nextSortField, 1);
+            }
+            return;
+        }
+        commitSort(nextSortField, 1);
+    };
+    const isRowSelected = React.useCallback((rowData) => {
+        if (!selectionMode)
+            return false;
+        if (selectionMode === "single") {
+            return currentSelection !== null && !Array.isArray(currentSelection)
+                ? rowsAreEqual(currentSelection, rowData, dataKey)
+                : false;
+        }
+        const list = Array.isArray(currentSelection) ? currentSelection : [];
+        return list.some((entry) => rowsAreEqual(entry, rowData, dataKey));
+    }, [selectionMode, currentSelection, dataKey]);
+    const handleRowSelection = React.useCallback((rowData) => {
+        if (!selectionMode)
+            return;
+        if (selectionMode === "single") {
+            if (currentSelection !== null && !Array.isArray(currentSelection) && rowsAreEqual(currentSelection, rowData, dataKey)) {
+                commitSelection(null);
+            }
+            else {
+                commitSelection(rowData);
+            }
+            return;
+        }
+        const previous = Array.isArray(currentSelection) ? currentSelection : [];
+        const exists = previous.some((entry) => rowsAreEqual(entry, rowData, dataKey));
+        const next = exists
+            ? previous.filter((entry) => !rowsAreEqual(entry, rowData, dataKey))
+            : [...previous, rowData];
+        commitSelection(next);
+    }, [selectionMode, currentSelection, dataKey, commitSelection]);
+    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-white px-3 py-2 text-sm 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-white", 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 ?? `Filter ${String(column.header ?? "")}`, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-white px-2 py-1 text-xs 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) => {
+                                            const nextRows = Number(event.target.value) || currentRows;
+                                            commitPage(0, nextRows);
+                                        }, className: "rounded-md border border-[rgb(var(--sg-border))] bg-white px-2 py-1 text-xs", children: rowsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })) : null] })) : null] }) }) }));
+}
+export const SgDatatable = React.forwardRef(SgDatatableBase);

package/dist/inputs/{SgCurrencyEdit.d.ts → SgInputCurrency.d.ts}

@@ -1,7 +1,7 @@
 import React from "react";
 import type { FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
 import type { RhfFieldProps } from "../rhf";
-export type SgCurrencyEditProps = {
+export type SgInputCurrencyProps = {
     id: string;
     label?: string;
     labelText?: string;
@@ -52,5 +52,7 @@ export type SgCurrencyEditProps = {
     register?: UseFormRegister<FieldValues>;
     rules?: RegisterOptions<FieldValues>;
 } & RhfFieldProps;
-export declare function SgCurrencyEdit(props: SgCurrencyEditProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SgCurrencyEdit.d.ts.map
+export declare function SgInputCurrency(props: SgInputCurrencyProps): import("react/jsx-runtime").JSX.Element;
+export declare const SgCurrencyEdit: typeof SgInputCurrency;
+export type SgCurrencyEditProps = SgInputCurrencyProps;
+//# sourceMappingURL=SgInputCurrency.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputCurrency.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputCurrency.tsx"],"names":[],"mappings":"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"}

package/dist/inputs/{SgCurrencyEdit.js → SgInputCurrency.js}

@@ -149,7 +149,7 @@ function combineAffix(symbol, extra, placement) {
         return symbol;
     return placement === "prefix" ? `${symbol} ${extra}` : `${extra} ${symbol}`;
 }
-function SgCurrencyEditBase(props) {
+function SgInputCurrencyBase(props) {
     const i18n = useComponentsI18n();
     const allowNegative = props.allowNegative ?? true;
     const emptyValue = props.emptyValue ?? "zero";
@@ -467,11 +467,11 @@ function SgCurrencyEditBase(props) {
                             props.labelClassName ?? ""
                         ].join(" "), style: prefixPaddingStyle ? { left: prefixPaddingStyle } : undefined, children: [_jsx("span", { children: labelText }), props.required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] }), hasSuffix ? (_jsxs("span", { className: "absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1", style: clearRightStyle ? { right: clearRightStyle } : undefined, children: [canShowClear ? (_jsx("button", { type: "button", onClick: handleClear, className: "rounded px-1 text-xs text-foreground/60 hover:text-foreground", "aria-label": t(i18n, "components.actions.clear"), children: _jsx(X, { size: 16 }) })) : null, props.iconButtons?.map((node, index) => (_jsx("span", { children: node }, index)))] })) : null] }), _jsx("div", { className: "mt-1 flex items-center justify-between gap-2", children: _jsx(ErrorText, { message: props.error ?? internalError ?? undefined }) })] }));
 }
-export function SgCurrencyEdit(props) {
+export function SgInputCurrency(props) {
     const { control, name, register, rules, ...rest } = props;
     if (name && register) {
         const reg = register(name, rules);
-        return (_jsx(SgCurrencyEditBase, { ...rest, onExternalChange: (value) => {
+        return (_jsx(SgInputCurrencyBase, { ...rest, onExternalChange: (value) => {
                 reg.onChange({ target: { name, value } });
             }, inputProps: {
                 ...rest.inputProps,
@@ -484,7 +484,7 @@ export function SgCurrencyEdit(props) {
             } }));
     }
     if (control && name) {
-        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgCurrencyEditBase, { ...rest, externalValue: field.value, onExternalChange: (value) => field.onChange(value), error: rest.error ?? fieldState.error?.message, inputProps: {
+        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputCurrencyBase, { ...rest, externalValue: field.value, onExternalChange: (value) => field.onChange(value), error: rest.error ?? fieldState.error?.message, inputProps: {
                     ...rest.inputProps,
                     onBlur: (event) => {
                         field.onBlur();
@@ -492,5 +492,7 @@ export function SgCurrencyEdit(props) {
                     }
                 } })) }));
     }
-    return _jsx(SgCurrencyEditBase, { ...rest });
+    return _jsx(SgInputCurrencyBase, { ...rest });
 }
+// Backward compatibility aliases.
+export const SgCurrencyEdit = SgInputCurrency;

package/dist/inputs/SgOrderList.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { type SgGroupBoxProps } from "../layout/SgGroupBox";
+export interface SgOrderListItem {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    data?: unknown;
+}
+export type SgOrderListSelectionMode = "single" | "multiple";
+export type SgOrderListControlsPosition = "left" | "right";
+export type SgOrderListRef = {
+    getItems: () => SgOrderListItem[];
+    setItems: (items: SgOrderListItem[]) => void;
+    getSelection: () => (string | number)[];
+    setSelection: (values: (string | number)[]) => void;
+    moveTop: () => void;
+    moveUp: () => void;
+    moveDown: () => void;
+    moveBottom: () => void;
+    clearSelection: () => void;
+};
+export interface SgOrderListProps {
+    id?: string;
+    title?: string;
+    source: SgOrderListItem[];
+    value?: SgOrderListItem[];
+    onChange?: (items: SgOrderListItem[]) => void;
+    selectedValues?: (string | number)[];
+    onSelectionChange?: (values: (string | number)[]) => void;
+    selectionMode?: SgOrderListSelectionMode;
+    showControls?: boolean;
+    controlsPosition?: SgOrderListControlsPosition;
+    draggable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    emptyMessage?: string;
+    itemTemplate?: (item: SgOrderListItem, state: {
+        index: number;
+        selected: boolean;
+        disabled: boolean;
+    }) => React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    listClassName?: string;
+    itemClassName?: string;
+    groupBoxProps?: Omit<Partial<SgGroupBoxProps>, "children" | "title"> & {
+        title?: string;
+    };
+}
+export declare const SgOrderList: React.ForwardRefExoticComponent<SgOrderListProps & React.RefAttributes<SgOrderListRef>>;
+//# sourceMappingURL=SgOrderList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgOrderList.d.ts","sourceRoot":"","sources":["../../src/inputs/SgOrderList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGxE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,MAAM,eAAe,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACxC,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IACpD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACrC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,2BAA2B,CAAC;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CACb,IAAI,EAAE,eAAe,EACrB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAC3D,KAAK,CAAC,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3F;AAkhBD,eAAO,MAAM,WAAW,yFAEvB,CAAC"}