danielgm-ui 0.4.0 → 0.4.1

package/dist/data-table.d.ts

@@ -10,7 +10,8 @@ export interface DataColumn<T extends object> {
     sortable?: boolean;
     /** Participa en el buscador global. @defaultValue true */
     searchable?: boolean;
-    align?: 'start' | 'end';
+    /** Alineación compartida por cabecera y celdas. @defaultValue 'start' */
+    align?: 'start' | 'center' | 'end';
     /** Ancho estable CSS (px si es número); las columnas sin ancho reparten el espacio restante. */
     width?: CSSProperties['width'];
 }
@@ -27,7 +28,12 @@ export interface DataTableProps<T extends object> {
     caption: string;
     /** Orden controlado. Usa [] para quitarlo. */
     sorting?: DataTableSort[];
+    /** Orden base: conserva aria-sort pero no muestra flecha. */
     defaultSorting?: DataTableSort[];
+    /** Habilita las cabeceras ordenables; cada columna puede desactivarlas. @defaultValue true */
+    sortable?: boolean;
+    /** Delega la ordenación al consumidor sin reordenar data. @defaultValue false */
+    manualSorting?: boolean;
     onSortingChange?: (sorting: DataTableSort[]) => void;
     /** Buscador de todas las columnas habilitadas. @defaultValue true */
     searchable?: boolean;
@@ -50,4 +56,4 @@ export interface DataTableProps<T extends object> {
     className?: string;
 }
 /** Paginación y selección conservan IDs reales. El filtrado devuelve a la primera página. */
-export declare function DataTable<T extends object>({ data, columns, getRowId, caption, sorting, defaultSorting, onSortingChange, searchable, searchPlaceholder, pageSize, page, onPageChange, selectable, selection, defaultSelection, onSelectionChange, loading, emptyMessage, locale, className, }: DataTableProps<T>): ReactElement;
+export declare function DataTable<T extends object>({ data, columns, getRowId, caption, sorting, sortable, manualSorting, defaultSorting, onSortingChange, searchable, searchPlaceholder, pageSize, page, onPageChange, selectable, selection, defaultSelection, onSelectionChange, loading, emptyMessage, locale, className, }: DataTableProps<T>): ReactElement;

package/dist/data-table.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Tabla HTML con operaciones locales. TanStack calcula filas filtradas y ordenadas sin mutar data. */
-import { ArrowUpIcon, ArrowDownIcon, SortIcon } from './internal/icons.js';
+import { ArrowUpIcon, ArrowDownIcon } from './internal/icons.js';
 import { useEffect, useMemo, useRef, useState, } from 'react';
 import { useTable, tableFeatures, rowSortingFeature, columnFilteringFeature, globalFilteringFeature, createSortedRowModel, createFilteredRowModel, filterFn_includesString, functionalUpdate, } from '@tanstack/react-table';
 import { Button } from './button.js';
@@ -20,7 +20,7 @@ const features = tableFeatures({
     filterFns: { includesString: filterFn_includesString },
 });
 /** Paginación y selección conservan IDs reales. El filtrado devuelve a la primera página. */
-export function DataTable({ data, columns, getRowId, caption, sorting, defaultSorting = [], onSortingChange, searchable = true, searchPlaceholder, pageSize = 10, page, onPageChange, selectable = false, selection, defaultSelection = [], onSelectionChange, loading = false, emptyMessage, locale = 'en', className, }) {
+export function DataTable({ data, columns, getRowId, caption, sorting, sortable = true, manualSorting = false, defaultSorting = [], onSortingChange, searchable = true, searchPlaceholder, pageSize = 10, page, onPageChange, selectable = false, selection, defaultSelection = [], onSelectionChange, loading = false, emptyMessage, locale = 'en', className, }) {
     const [sort, changeSort] = useControllable(sorting, defaultSorting, onSortingChange);
     const [currentPage, changePage] = useControllable(page, 1, onPageChange);
     const [selected, changeSelection] = useControllable(selection, defaultSelection, onSelectionChange ? (next) => onSelectionChange([...next]) : undefined);
@@ -55,6 +55,7 @@ export function DataTable({ data, columns, getRowId, caption, sorting, defaultSo
             changeSort(functionalUpdate(updater, sort));
             changePage(1);
         },
+        manualSorting,
         globalFilterFn: 'includesString',
         enableMultiSort: false,
     });
@@ -89,11 +90,27 @@ export function DataTable({ data, columns, getRowId, caption, sorting, defaultSo
                                             } }) })), columns.map((column) => {
                                         const instance = table.getColumn(column.id);
                                         const direction = instance.getIsSorted();
-                                        return (_jsx("th", { scope: "col", style: { textAlign: column.align ?? 'start' }, "aria-sort": direction === 'asc'
+                                        const baseline = defaultSorting.find((item) => item.id === column.id);
+                                        const showArrow = Boolean(direction && !(baseline && baseline.desc === (direction === 'desc')));
+                                        return (_jsx("th", { scope: "col", "data-align": column.align ?? 'start', style: { textAlign: column.align ?? 'start' }, "aria-sort": direction === 'asc'
                                                 ? 'ascending'
                                                 : direction === 'desc'
                                                     ? 'descending'
-                                                    : undefined, children: column.sortable !== false ? (_jsxs(Button, { variant: "ghost", size: "sm", disabled: loading, onClick: instance.getToggleSortingHandler(), children: [column.header, _jsx("span", { "aria-hidden": "true", children: direction === 'asc' ? (_jsx(ArrowUpIcon, {})) : direction === 'desc' ? (_jsx(ArrowDownIcon, {})) : (_jsx(SortIcon, {})) })] })) : (column.header) }, column.id));
+                                                    : undefined, children: sortable && instance.getCanSort() ? (_jsxs(Button, { variant: "ghost", size: "sm", className: "dgm-table-sort", "data-sorted": showArrow || undefined, disabled: loading, onClick: () => {
+                                                    // El orden base alterna siempre con su inverso, también en números.
+                                                    if (baseline) {
+                                                        changeSort([
+                                                            {
+                                                                id: column.id,
+                                                                desc: direction ? direction !== 'desc' : !baseline.desc,
+                                                            },
+                                                        ]);
+                                                        changePage(1);
+                                                    }
+                                                    else {
+                                                        instance.toggleSorting();
+                                                    }
+                                                }, children: [_jsx("span", { className: "dgm-table-sort-label", children: column.header }), _jsx("span", { className: "dgm-table-sort-icon", "aria-hidden": "true", children: direction === 'desc' ? _jsx(ArrowDownIcon, {}) : _jsx(ArrowUpIcon, {}) })] })) : (column.header) }, column.id));
                                     })] }) }), _jsx("tbody", { children: loading ? (Array.from({ length: Math.min(size, 5) }, (_, index) => (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), children: _jsx(Skeleton, { height: "1.5rem" }) }) }, index)))) : visible.length ? (visible.map((row) => (_jsxs("tr", { "data-selected": selectedIds.has(row.id) || undefined, children: [selectable && (_jsx("td", { children: _jsx(Checkbox, { checked: selectedIds.has(row.id), label: _jsxs("span", { className: "dgm-visually-hidden", children: [es ? 'Seleccionar fila' : 'Select row', " ", row.id] }), onChange: (event) => changeSelection(event.target.checked
                                                 ? [...new Set([...selected, row.id])]
                                                 : selected.filter((id) => id !== row.id)) }) })), columns.map((column) => (_jsx("td", { style: { textAlign: column.align ?? 'start' }, children: column.cell ? column.cell(row.original) : column.accessor(row.original) }, column.id)))] }, row.id)))) : (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "dgm-table-empty", children: emptyMessage ?? (es ? 'No hay resultados.' : 'No results.') }) })) })] }) }), _jsxs("div", { className: "dgm-table-footer", children: [_jsx("p", { role: "status", children: loading

package/dist/styles.css

@@ -2759,8 +2759,63 @@ button.dgm-step:hover:not(:disabled),
   font-weight: var(--dgm-font-weight-semibold);
   background: var(--dgm-subtle);
 }
-.dgm-data-table th .dgm-button {
-  padding-inline: 0;
+.dgm-data-table th .dgm-table-sort {
+  --dgm-table-sort-space: 1.125rem;
+  display: inline-block;
+  position: relative;
+  max-width: 100%;
+  padding-inline: var(--dgm-table-sort-space);
+  text-align: inherit;
+  white-space: normal;
+}
+.dgm-table-sort-label {
+  position: relative;
+  display: inline-block;
+  transition: transform 240ms ease;
+}
+.dgm-table-sort-icon {
+  position: absolute;
+  inset-inline-end: 0;
+  top: 50%;
+  width: 0.875rem;
+  height: 0.875rem;
+  opacity: 0;
+  transform: translateY(-50%) scale(0.5);
+  transition:
+    opacity 240ms ease,
+    transform 240ms ease;
+}
+.dgm-table-sort-icon svg {
+  width: 100%;
+  height: 100%;
+}
+.dgm-table-sort[data-sorted] .dgm-table-sort-icon {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+.dgm-data-table th[data-align='center'] .dgm-table-sort[data-sorted] .dgm-table-sort-label,
+.dgm-data-table th[data-align='end'] .dgm-table-sort[data-sorted] .dgm-table-sort-label {
+  transform: translateX(-0.5625rem);
+}
+.dgm-data-table th[data-align='center'] .dgm-table-sort-icon,
+.dgm-data-table th[data-align='end'] .dgm-table-sort-icon {
+  inset-inline-end: 0.5625rem;
+}
+.dgm-data-table th[data-align='start'] .dgm-table-sort {
+  margin-inline-start: calc(-1 * var(--dgm-table-sort-space));
+}
+[dir='rtl']
+  .dgm-data-table
+  th:not([data-align='start'])
+  .dgm-table-sort[data-sorted]
+  .dgm-table-sort-label {
+  transform: translateX(0.5625rem);
+}
+@media (prefers-reduced-motion: reduce) {
+  .dgm-table-sort-label,
+  .dgm-table-sort-icon {
+    transition: none;
+  }
 }
 .dgm-data-table tr[data-selected] {
   background: var(--dgm-subtle);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danielgm-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Accessible React components for Next.js and the web.",
   "repository": {
     "type": "git",