@konce-pt/react 0.11.1 → 0.12.0

package/dist/data-table/data-table.js

@@ -1,6 +1,7 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { aggregate, isEmptyFilterValue, matchesColumnFilter, toText, } from '@konce-pt/table';
+import { useEffect, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { aggregate, createRowComparator, cssLengthToPx, isEmptyFilterValue, matchesColumnFilter, matchesGlobalFilter, toText, } from '@konce-pt/table';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -46,8 +47,14 @@ const EMPTY_FIELDS = [];
 function getValue(row, field) {
     return row[field];
 }
-export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, filterRowPosition = 'bottom', pageSize = 0, pageSizeOptions = [5, 10, 20, 50], selectable = 'none', loading = false, emptyMessage, rowKey = null, scrollHeight = null, virtualScroll = false, rowHeight = 41, reorderable = false, exportable = false, exportFilename = 'export.csv', lazy = false, totalRecords = null, expandable = false, multiExpand = true, summaryLabel, summaryValues = null, selection, defaultSelection = EMPTY_ROWS, onSelectionChange, expandedRows, defaultExpandedRows = EMPTY_ROWS, onExpandedRowsChange, hiddenFields, defaultHiddenFields = EMPTY_FIELDS, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }) {
-    const { t } = useKptMessages({ locale, dictionary });
+export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, filterRowPosition = 'bottom', pageSize = 0, pageSizeOptions = [5, 10, 20, 50], selectable = 'none', loading = false, ariaLabel = null, caption = null, clickableRows, emptyMessage, rowKey = null, scrollHeight = null, virtualScroll = false, rowHeight = 41, reorderable = false, exportable = false, exportFilename = 'export.csv', lazy = false, totalRecords = null, expandable = false, multiExpand = true, summaryLabel, summaryValues = null, selection, defaultSelection = EMPTY_ROWS, onSelectionChange, expandedRows, defaultExpandedRows = EMPTY_ROWS, onExpandedRowsChange, hiddenFields, defaultHiddenFields = EMPTY_FIELDS, onHiddenFieldsChange, onRowClick, onLazyLoad, onCellEdit, cells, cellEditors, renderRowDetail, paginatorActions, locale, dictionary, className, style, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
+    const uid = useId();
+    const rowsClickable = clickableRows ?? onRowClick !== undefined;
+    /** Ogłoszenie po przestawieniu kolumny z klawiatury. */
+    const [moveAnnouncement, setMoveAnnouncement] = useState('');
+    /** Pole kolumny, której uchwyt ma dostać fokus po przerysowaniu (ustawiane w zdarzeniu, czytane w efekcie). */
+    const focusGrip = useRef(null);
     const [picked, setPicked] = useControllableState({
         value: selection,
         defaultValue: defaultSelection,
@@ -58,7 +65,7 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         defaultValue: defaultExpandedRows,
         onChange: onExpandedRowsChange,
     });
-    const [hidden, setHidden] = useControllableState({
+    const [hidden] = useControllableState({
         value: hiddenFields,
         defaultValue: defaultHiddenFields,
         onChange: onHiddenFieldsChange,
@@ -70,13 +77,16 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
     const [pageIndex, setPageIndex] = useState(0);
     const [pageSizeState, setPageSizeState] = useState(pageSize || 10);
     // Kolejność kolumn żyje w stanie (przestawianie), ale nowe `columns` z zewnątrz ją zastępują.
+    // Poprzednie `columns` trzymamy w stanie, nie w refie — wzorzec „zmiana propsa resetuje stan”
+    // z react.dev; ref zależałby od tego, czy React nie wyrzucił renderu (StrictMode, concurrent).
     const [order, setOrder] = useState(columns);
-    const columnsRef = useRef(columns);
-    if (columnsRef.current !== columns) {
-        columnsRef.current = columns;
-        if (order !== columns)
-            setOrder(columns);
+    const [seenColumns, setSeenColumns] = useState(columns);
+    if (seenColumns !== columns) {
+        setSeenColumns(columns);
+        setOrder(columns);
     }
+    /** Zmierzone szerokości kolumn zamrożonych bez szerokości liczalnej z jednostki (`%`, `ch`). */
+    const [measuredWidths, setMeasuredWidths] = useState(() => new Map());
     const [dragField, setDragField] = useState(null);
     const [scrollTop, setScrollTop] = useState(0);
     const [viewportHeight, setViewportHeight] = useState(400);
@@ -93,10 +103,11 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
     const sameRow = (a, b) => rowKey ? getValue(a, rowKey) === getValue(b, rowKey) : a === b;
     // ── Potok danych ──
     const filtered = useMemo(() => {
-        const query = filterText.trim().toLowerCase();
+        const fields = columns.map((col) => col.field);
         let rows = data;
-        if (query) {
-            rows = rows.filter((row) => columns.some((col) => toText(getValue(row, col.field)).toLowerCase().includes(query)));
+        if (filterText.trim()) {
+            // Bez diakrytyków i wielkości liter — „lodz” znajduje „Łódź” (`@konce-pt/table`).
+            rows = rows.filter((row) => matchesGlobalFilter(row, fields, filterText));
         }
         if (hasColumnFilters) {
             rows = rows.filter((row) => columns.every((col) => {
@@ -113,20 +124,10 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
     const sorted = useMemo(() => {
         if (!sortField || !sortDir)
             return filtered;
-        const sign = sortDir === 'asc' ? 1 : -1;
-        return [...filtered].sort((a, b) => {
-            const av = getValue(a, sortField);
-            const bv = getValue(b, sortField);
-            // Puste komórki lądują na końcu niezależnie od kierunku — sortowanie ma pokazywać dane.
-            if (av == null)
-                return 1;
-            if (bv == null)
-                return -1;
-            if (typeof av === 'number' && typeof bv === 'number')
-                return (av - bv) * sign;
-            return toText(av).localeCompare(toText(bv)) * sign;
-        });
-    }, [filtered, sortDir, sortField]);
+        // Kolator dla aktywnego języka, tworzony raz na sortowanie; puste komórki na końcu.
+        const compare = createRowComparator(sortField, sortDir, activeLocale);
+        return [...filtered].sort((a, b) => compare(a, b));
+    }, [activeLocale, filtered, sortDir, sortField]);
     const paged = useMemo(() => {
         if (lazy)
             return data;
@@ -136,14 +137,14 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         return sorted.slice(start, start + pageSizeState);
     }, [data, lazy, pageIndex, pageSize, pageSizeState, sorted]);
     const filteredCount = lazy ? (totalRecords ?? data.length) : filtered.length;
-    // Tryb lazy: każda zmiana stanu to prośba do rodzica o dane.
+    // Tryb lazy: każda zmiana stanu to prośba do rodzica o dane. `onLazyLoad` czytamy przez
+    // `useEffectEvent`: nowa referencja funkcji przy każdym renderze rodzica nie może restartować
+    // efektu, bo wywołałaby pętlę żądań.
+    const requestLazyLoad = useEffectEvent((state) => onLazyLoad?.(state));
     useEffect(() => {
         if (!lazy)
             return;
-        onLazyLoad?.({ pageIndex, pageSize: pageSizeState, sortField, sortDir, filter: filterText, columnFilters });
-        // `onLazyLoad` celowo poza zależnościami: nowa referencja funkcji przy każdym renderze
-        // rodzica wywołałaby pętlę żądań.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        requestLazyLoad({ pageIndex, pageSize: pageSizeState, sortField, sortDir, filter: filterText, columnFilters });
     }, [lazy, pageIndex, pageSizeState, sortField, sortDir, filterText, columnFilters]);
     // Offset sticky drugiego wiersza nagłówka = wysokość pierwszego.
     useLayoutEffect(() => {
@@ -151,11 +152,46 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         if (first)
             setTheadOffset(first.offsetHeight);
     }, [filterRowPosition, hasColumnFilters, visibleColumns]);
+    // Wysokość viewportu dla wirtualizacji — także po zmianie rozmiaru kontenera bez przewinięcia.
     useLayoutEffect(() => {
         const el = scrollRef.current;
-        if (el)
-            setViewportHeight(el.clientHeight);
+        if (!el)
+            return;
+        setViewportHeight(el.clientHeight);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(() => setViewportHeight(el.clientHeight));
+        observer.observe(el);
+        return () => observer.disconnect();
     }, []);
+    // Szerokości kolumn zamrożonych, których nie da się policzyć z jednostki — mierzone z nagłówków.
+    // Stan zmienia się tylko przy innej wartości, więc pomiar nie zapętla renderu.
+    useLayoutEffect(() => {
+        const head = theadRef.current;
+        if (!head)
+            return;
+        const next = new Map();
+        for (const col of visibleColumns) {
+            if (!col.frozen)
+                break;
+            if (cssLengthToPx(col.width, REM_PX) !== null)
+                continue;
+            const th = head.querySelector(`th[data-field="${CSS.escape(col.field)}"]`);
+            if (th)
+                next.set(col.field, th.offsetWidth);
+        }
+        setMeasuredWidths((prev) => prev.size === next.size && [...next].every(([key, value]) => prev.get(key) === value) ? prev : next);
+    }, [visibleColumns]);
+    // Po przestawieniu kolumny z klawiatury uchwyt jest przerysowany w nowym miejscu — fokus idzie za nim.
+    useLayoutEffect(() => {
+        const field = focusGrip.current;
+        if (field === null)
+            return;
+        focusGrip.current = null;
+        theadRef.current
+            ?.querySelector(`th[data-field="${CSS.escape(field)}"] .kpt-data-table__grip`)
+            ?.focus();
+    }, [order]);
     // Wejście w edycję → fokus na kontrolce edytora.
     useEffect(() => {
         if (!editingCell)
@@ -176,14 +212,6 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         setViewportHeight(el.clientHeight);
     };
     // ── Kolumny zamrożone ──
-    const parseWidthPx = (width) => {
-        if (!width)
-            return 8 * REM_PX;
-        const n = Number.parseFloat(width);
-        if (Number.isNaN(n))
-            return 8 * REM_PX;
-        return width.trim().endsWith('px') ? n : n * REM_PX;
-    };
     const leadingCells = (selectable !== 'none' ? 1 : 0) + (hasRowDetail ? 1 : 0);
     const leadingStickyWidth = (hasRowDetail ? EXPANDER_FROZEN_W * REM_PX : 0) + (selectable !== 'none' ? CHECKBOX_FROZEN_W * REM_PX : 0);
     const frozenOffsets = useMemo(() => {
@@ -193,10 +221,11 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
             if (!col.frozen)
                 break; // tylko wiodące, sąsiadujące
             map.set(col.field, acc);
-            acc += parseWidthPx(col.width);
+            // Z jednostki, potem z pomiaru, a do pierwszego pomiaru 8 rem.
+            acc += cssLengthToPx(col.width, REM_PX) ?? measuredWidths.get(col.field) ?? 8 * REM_PX;
         }
         return map;
-    }, [leadingStickyWidth, visibleColumns]);
+    }, [leadingStickyWidth, measuredWidths, visibleColumns]);
     const hasFrozen = frozenOffsets.size > 0;
     const frozenLeft = (field) => frozenOffsets.get(field);
     const expanderStickyLeft = hasFrozen ? 0 : undefined;
@@ -230,6 +259,26 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
         setOrder(cols);
         setDragField(null);
     };
+    /** Strzałki na uchwycie przestawiają kolumnę o jedno miejsce — alternatywa dla przeciągania. */
+    const onGripKeyDown = (field, event) => {
+        const delta = event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0;
+        if (!delta)
+            return;
+        event.preventDefault();
+        const from = visibleColumns.findIndex((col) => col.field === field);
+        const to = from + delta;
+        // Kolumny zamrożone zostają wiodące — nie wolno ich minąć ani wyjechać poza tabelę.
+        if (from === -1 || to < frozenLeadCount || to >= visibleColumns.length)
+            return;
+        const cols = [...order];
+        const fromIdx = cols.findIndex((col) => col.field === field);
+        const toIdx = cols.findIndex((col) => col.field === visibleColumns[to].field);
+        const [moved] = cols.splice(fromIdx, 1);
+        cols.splice(toIdx, 0, moved);
+        setOrder(cols);
+        setMoveAnnouncement(t('dataTable.columnMoved', { column: moved.header, position: to + 1, count: visibleColumns.length }));
+        focusGrip.current = field;
+    };
     // ── Sortowanie ──
     const toggleSort = (col) => {
         if (!col.sortable)
@@ -425,13 +474,26 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
                 return null;
         }
     };
-    const renderRow = (row, index) => (_jsxs("tbody", { style: { display: 'contents' }, children: [_jsxs("tr", { className: cn(isSelected(row) && 'kpt-data-table__row--selected', hasRowDetail && isExpanded(row) && 'kpt-data-table__row--expanded'), style: { height: virtualScroll ? rowHeight : undefined }, onClick: () => onRowClick?.(row), children: [hasRowDetail ? (_jsx("td", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft }, children: _jsx("button", { type: "button", className: cn('kpt-data-table__expander-btn', isExpanded(row) && 'kpt-data-table__expander-btn--open'), "aria-expanded": isExpanded(row), "aria-label": t('dataTable.expandRow'), onClick: (event) => {
+    const renderRow = (row, index) => (_jsxs("tbody", { style: { display: 'contents' }, children: [_jsxs("tr", { className: cn(isSelected(row) && 'kpt-data-table__row--selected', hasRowDetail && isExpanded(row) && 'kpt-data-table__row--expanded', rowsClickable && 'kpt-data-table__row--clickable'), style: { height: virtualScroll ? rowHeight : undefined }, tabIndex: rowsClickable ? 0 : undefined, onClick: () => onRowClick?.(row), onKeyDown: rowsClickable
+                    ? (event) => {
+                        // Tylko na samym wierszu — Enter w kontrolce komórki należy do niej.
+                        if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' '))
+                            return;
+                        event.preventDefault();
+                        onRowClick?.(row);
+                    }
+                    : undefined, children: [hasRowDetail ? (_jsx("td", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft }, children: _jsx("button", { type: "button", className: cn('kpt-data-table__expander-btn', isExpanded(row) && 'kpt-data-table__expander-btn--open'), "aria-expanded": isExpanded(row), "aria-label": t('dataTable.expandRow'), onClick: (event) => {
                                 event.stopPropagation();
                                 toggleExpand(row);
-                            }, children: _jsx(KptIcon, { name: "chevron-right" }) }) })) : null, selectable !== 'none' ? (_jsx("td", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft }, children: _jsx("input", { type: "checkbox", checked: isSelected(row), "aria-label": t('dataTable.selectRow'), onClick: (event) => event.stopPropagation(), onChange: () => toggleRow(row) }) })) : null, visibleColumns.map((col) => {
+                            }, children: _jsx(KptIcon, { name: "chevron-right" }) }) })) : null, selectable !== 'none' ? (_jsx("td", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft }, children: _jsx("input", { type: selectable === 'single' ? 'radio' : 'checkbox', name: selectable === 'single' ? `${uid}-select` : undefined, checked: isSelected(row), "aria-label": t('dataTable.selectRow'), onClick: (event) => {
+                                event.stopPropagation();
+                                toggleRow(row);
+                            }, onChange: () => {
+                                // Zmianę obsługuje `onClick` (radio nie zgłasza `change` przy odznaczaniu).
+                            } }) })) : null, visibleColumns.map((col, colIndex) => {
                         const editing = isEditingCell(row, col.field);
                         const editable = isEditable(col) && !editing;
-                        return (_jsx("td", { "data-align": col.align ?? 'start', style: { left: frozenLeft(col.field) }, className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen', editable && 'kpt-data-table__cell--editable'), tabIndex: editable ? 0 : undefined, "aria-label": editable ? t('dataTable.editCell', { column: col.header }) : undefined, onClick: (event) => {
+                        return (_jsx("td", { "data-align": col.align ?? 'start', style: { left: frozenLeft(col.field) }, className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen', editable && 'kpt-data-table__cell--editable'), tabIndex: editable ? 0 : undefined, "aria-describedby": editable ? `${uid}-edit-${colIndex}` : undefined, onClick: (event) => {
                                 if (isEditable(col))
                                     startEdit(row, col, event);
                             }, onKeyDown: (event) => {
@@ -439,13 +501,13 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
                                     startEdit(row, col, event);
                             }, children: editing ? (_jsx("div", { ref: editorHostRef, className: "kpt-data-table__editor", onClick: (event) => event.stopPropagation(), onBlur: onEditorFocusOut, children: editor(row, col) })) : cells?.[col.field] ? (cells[col.field](row, getValue(row, col.field))) : getValue(row, col.field) }, col.field));
                     })] }), hasRowDetail && isExpanded(row) && !virtualScroll ? (_jsx("tr", { className: "kpt-data-table__detail-row", children: _jsx("td", { className: "kpt-data-table__detail", colSpan: colspan, children: renderRowDetail?.(row) }) })) : null] }, rowKey ? String(getValue(row, rowKey)) : index));
-    return (_jsxs("div", { className: cn('kpt-data-table', className), style: { ['--kpt-thead-offset']: `${theadOffset}px`, ...style }, ...rest, children: [filterable || exportable ? (_jsxs("div", { className: "kpt-data-table__toolbar", children: [filterable ? (_jsx("input", { className: "kpt-data-table__filter", type: "search", placeholder: t('dataTable.search'), value: filterText, onChange: (event) => {
+    return (_jsxs("div", { className: cn('kpt-data-table', className), style: { ['--kpt-thead-offset']: `${theadOffset}px`, ...style }, ...rest, children: [filterable || exportable ? (_jsxs("div", { className: "kpt-data-table__toolbar", children: [filterable ? (_jsx("input", { className: "kpt-data-table__filter", type: "search", placeholder: t('dataTable.search'), "aria-label": t('dataTable.search'), value: filterText, onChange: (event) => {
                             setFilterText(event.target.value);
                             setPageIndex(0);
-                        } })) : null, exportable ? (_jsx(KptButton, { variant: "outline", size: "sm", onClick: () => exportTableCsv(visibleColumns, (lazy ? data : sorted), exportFilename), children: t('dataTable.exportCsv') })) : null] })) : null, _jsx("div", { ref: scrollRef, className: "kpt-data-table__scroll", style: { maxHeight: scrollHeight ?? undefined }, onScroll: onScroll, children: _jsxs("table", { className: cn('kpt-data-table__table', hasFrozen && 'kpt-data-table__table--frozen', virtualScroll && 'kpt-data-table__table--virtual'), children: [_jsxs("thead", { ref: theadRef, children: [hasColumnFilters && filterRowPosition === 'top' ? filterRow : null, _jsxs("tr", { children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable === 'multiple' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft }, children: _jsx("input", { type: "checkbox", checked: pageAllSelected, ref: (el) => {
+                        } })) : null, exportable ? (_jsx(KptButton, { variant: "outline", size: "sm", onClick: () => exportTableCsv(visibleColumns, (lazy ? data : sorted), exportFilename), children: t('dataTable.exportCsv') })) : null] })) : null, _jsx("div", { ref: scrollRef, className: "kpt-data-table__scroll", style: { maxHeight: scrollHeight ?? undefined }, onScroll: onScroll, children: _jsxs("table", { className: cn('kpt-data-table__table', hasFrozen && 'kpt-data-table__table--frozen', virtualScroll && 'kpt-data-table__table--virtual'), "aria-label": ariaLabel ?? undefined, "aria-busy": loading || undefined, children: [caption ? _jsx("caption", { className: "kpt-data-table__caption", children: caption }) : null, _jsxs("thead", { ref: theadRef, children: [hasColumnFilters && filterRowPosition === 'top' ? filterRow : null, _jsxs("tr", { children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable === 'multiple' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft }, children: _jsx("input", { type: "checkbox", checked: pageAllSelected, ref: (el) => {
                                                     if (el)
                                                         el.indeterminate = pageSomeSelected;
-                                                }, "aria-label": t('dataTable.selectAll'), onChange: toggleAllOnPage }) })) : selectable === 'single' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft } })) : null, visibleColumns.map((col) => (_jsxs("th", { draggable: isColDraggable(col) || undefined, style: { width: col.width, left: frozenLeft(col.field) }, "data-align": col.align ?? 'start', className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen', col.sortable && 'kpt-data-table__th--sortable', isColDraggable(col) && 'kpt-data-table__th--draggable', dragField !== null && dragField !== col.field && !col.frozen && 'kpt-data-table__th--dragover'), "aria-sort": ariaSort(col), onClick: () => toggleSort(col), onDragStart: (event) => {
+                                                }, "aria-label": t('dataTable.selectAll'), onChange: toggleAllOnPage }) })) : selectable === 'single' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft } })) : null, visibleColumns.map((col) => (_jsxs("th", { draggable: isColDraggable(col) || undefined, style: { width: col.width, left: frozenLeft(col.field) }, "data-align": col.align ?? 'start', className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen', col.sortable && 'kpt-data-table__th--sortable', isColDraggable(col) && 'kpt-data-table__th--draggable', dragField !== null && dragField !== col.field && !col.frozen && 'kpt-data-table__th--dragover'), "data-field": col.field, "aria-sort": col.sortable ? ariaSort(col) : undefined, onDragStart: (event) => {
                                                 if (col.frozen)
                                                     return;
                                                 setDragField(col.field);
@@ -457,5 +519,5 @@ export function KptDataTable({ columns, data = EMPTY_ROWS, filterable = false, f
                                                 const visIndex = visibleColumns.findIndex((c) => c.field === col.field);
                                                 if (dragField !== null && visIndex >= frozenLeadCount)
                                                     event.preventDefault();
-                                            }, onDrop: (event) => reorderable && onColDrop(col.field, event), onDragEnd: () => setDragField(null), children: [isColDraggable(col) ? (_jsx(KptIcon, { className: "kpt-data-table__grip", name: "grip-vertical" })) : null, _jsx("span", { children: col.header }), col.sortable ? (_jsx(KptIcon, { className: cn('kpt-data-table__sort', ariaSort(col) !== 'none' && 'kpt-data-table__sort--active'), name: sortField === col.field && sortDir === 'asc' ? 'chevron-up' : 'chevron-down' })) : null] }, col.field)))] }), hasColumnFilters && filterRowPosition === 'bottom' ? filterRow : null] }), loading ? (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "kpt-data-table__state", colSpan: colspan, children: t('dataTable.loading') }) }) })) : displayCount === 0 ? (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "kpt-data-table__state", colSpan: colspan, children: emptyMessage ?? t('dataTable.empty') }) }) })) : (_jsxs(_Fragment, { children: [virtualScroll && topPad > 0 ? (_jsx("tbody", { children: _jsx("tr", { className: "kpt-data-table__spacer", "aria-hidden": "true", children: _jsx("td", { colSpan: colspan, style: { height: topPad } }) }) })) : null, rowsToRender.map((row, index) => renderRow(row, index)), virtualScroll && bottomPad > 0 ? (_jsx("tbody", { children: _jsx("tr", { className: "kpt-data-table__spacer", "aria-hidden": "true", children: _jsx("td", { colSpan: colspan, style: { height: bottomPad } }) }) })) : null] })), hasSummary && !loading && displayCount > 0 ? (_jsx("tfoot", { children: _jsxs("tr", { className: "kpt-data-table__summary", children: [summaryLabelSpan > 0 ? (_jsx("th", { className: cn('kpt-data-table__summary-label', hasFrozen && 'kpt-data-table__cell--frozen'), colSpan: summaryLabelSpan, style: { left: hasFrozen ? 0 : undefined }, children: summaryLabel ?? t('dataTable.total') })) : null, visibleColumns.map((col, index) => index >= summaryStartIndex ? (_jsx("td", { "data-align": col.align ?? 'end', style: { width: col.width, left: frozenLeft(col.field) }, className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen'), children: summaryText(col) }, col.field)) : null)] }) })) : null] }) }), pageSize > 0 && !virtualScroll ? (_jsxs("div", { className: "kpt-data-table__pager", children: [paginatorActions, _jsx(KptPaginator, { length: filteredCount, pageIndex: pageIndex, onPageIndexChange: setPageIndex, pageSize: pageSizeState, onPageSizeChange: setPageSizeState, pageSizeOptions: pageSizeOptions })] })) : null] }));
+                                            }, onDrop: (event) => reorderable && onColDrop(col.field, event), onDragEnd: () => setDragField(null), children: [isColDraggable(col) ? (_jsx("button", { type: "button", className: "kpt-data-table__grip", "aria-label": t('dataTable.moveColumn', { column: col.header }), "aria-keyshortcuts": "ArrowLeft ArrowRight", onKeyDown: (event) => onGripKeyDown(col.field, event), children: _jsx(KptIcon, { name: "grip-vertical" }) })) : null, col.sortable ? (_jsxs("button", { type: "button", className: "kpt-data-table__sort-btn", onClick: () => toggleSort(col), children: [_jsx("span", { children: col.header }), _jsx(KptIcon, { className: cn('kpt-data-table__sort', ariaSort(col) !== 'none' && 'kpt-data-table__sort--active'), name: sortField !== col.field || !sortDir ? 'selector' : sortDir === 'asc' ? 'chevron-up' : 'chevron-down' })] })) : (_jsx("span", { children: col.header }))] }, col.field)))] }), hasColumnFilters && filterRowPosition === 'bottom' ? filterRow : null] }), loading ? (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "kpt-data-table__state", colSpan: colspan, children: t('dataTable.loading') }) }) })) : displayCount === 0 ? (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "kpt-data-table__state", colSpan: colspan, children: emptyMessage ?? t('dataTable.empty') }) }) })) : (_jsxs(_Fragment, { children: [virtualScroll && topPad > 0 ? (_jsx("tbody", { children: _jsx("tr", { className: "kpt-data-table__spacer", "aria-hidden": "true", children: _jsx("td", { colSpan: colspan, style: { height: topPad } }) }) })) : null, rowsToRender.map((row, index) => renderRow(row, index)), virtualScroll && bottomPad > 0 ? (_jsx("tbody", { children: _jsx("tr", { className: "kpt-data-table__spacer", "aria-hidden": "true", children: _jsx("td", { colSpan: colspan, style: { height: bottomPad } }) }) })) : null] })), hasSummary && !loading && displayCount > 0 ? (_jsx("tfoot", { children: _jsxs("tr", { className: "kpt-data-table__summary", children: [summaryLabelSpan > 0 ? (_jsx("th", { className: cn('kpt-data-table__summary-label', hasFrozen && 'kpt-data-table__cell--frozen'), colSpan: summaryLabelSpan, style: { left: hasFrozen ? 0 : undefined }, children: summaryLabel ?? t('dataTable.total') })) : null, visibleColumns.map((col, index) => index >= summaryStartIndex ? (_jsx("td", { "data-align": col.align ?? 'end', style: { width: col.width, left: frozenLeft(col.field) }, className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen'), children: summaryText(col) }, col.field)) : null)] }) })) : null] }) }), _jsx("div", { className: "kpt-data-table__live", "aria-live": "polite", children: moveAnnouncement }), _jsx("div", { hidden: true, children: visibleColumns.map((col, colIndex) => isEditable(col) ? (_jsx("span", { id: `${uid}-edit-${colIndex}`, children: t('dataTable.editCell', { column: col.header }) }, col.field)) : null) }), pageSize > 0 && !virtualScroll ? (_jsxs("div", { className: "kpt-data-table__pager", children: [paginatorActions, _jsx(KptPaginator, { length: filteredCount, pageIndex: pageIndex, onPageIndexChange: setPageIndex, pageSize: pageSizeState, onPageSizeChange: setPageSizeState, pageSizeOptions: pageSizeOptions })] })) : null] }));
 }

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

@@ -1,7 +1,7 @@
 import type { KptColumn } from './data-table-types.ts';
 /**
- * Zrzuca wiersze do pliku CSV (separator `;`). Tabela woła to samo z przycisku „Eksport CSV";
- * funkcja jest wyeksportowana, bo w Reakcie nie ma odpowiednika metody publicznej komponentu
+ * Zrzuca wiersze do pliku CSV (separator `;`, końce wierszy CRLF, BOM — patrz `buildCsv`).
+ * Tabela woła to samo z przycisku „Eksport CSV"; funkcja jest wyeksportowana, bo w Reakcie nie ma odpowiednika metody publicznej komponentu
  * — eksport z kodu aplikacji wywołuje się właśnie tak.
  */
 export declare function exportTableCsv(columns: readonly KptColumn[], rows: readonly Record<string, unknown>[], filename?: string): void;

package/dist/data-table/export-csv.js

@@ -1,19 +1,17 @@
-import { escapeCsvCell } from '@konce-pt/table';
+import { buildCsv } from '@konce-pt/table';
 /**
- * Zrzuca wiersze do pliku CSV (separator `;`). Tabela woła to samo z przycisku „Eksport CSV";
- * funkcja jest wyeksportowana, bo w Reakcie nie ma odpowiednika metody publicznej komponentu
+ * Zrzuca wiersze do pliku CSV (separator `;`, końce wierszy CRLF, BOM — patrz `buildCsv`).
+ * Tabela woła to samo z przycisku „Eksport CSV"; funkcja jest wyeksportowana, bo w Reakcie nie ma odpowiednika metody publicznej komponentu
  * — eksport z kodu aplikacji wywołuje się właśnie tak.
  */
 export function exportTableCsv(columns, rows, filename = 'export.csv') {
-    const header = columns.map((col) => escapeCsvCell(col.header)).join(';');
-    const body = rows.map((row) => columns.map((col) => escapeCsvCell(row[col.field])).join(';')).join('\n');
-    // BOM — bez niego Excel czyta UTF-8 jako stronę kodową systemu i psuje polskie znaki.
-    const csv = `${header}\n${body}`;
-    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const blob = new Blob([buildCsv(columns, rows)], { type: 'text/csv;charset=utf-8;' });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
     link.href = url;
     link.download = filename;
     link.click();
-    URL.revokeObjectURL(url);
+    // Część przeglądarek zaczyna pobieranie asynchronicznie — natychmiastowe unieważnienie
+    // adresu potrafi je przerwać.
+    setTimeout(() => URL.revokeObjectURL(url), 0);
 }

package/dist/data-table/llms.txt

@@ -7,7 +7,9 @@ Import: `import { KptDataTable, type KptColumn } from '@konce-pt/react';`
 
 ## The column model (KptColumn)
 `{ field, header, sortable?, align?, width?, frozen?, filter?, edit?, summary? }`
-`frozen` columns (leading, adjacent) stick during horizontal scrolling — they require `width`.
+`frozen` columns (leading, adjacent) stick during horizontal scrolling. Their offsets come from `width`:
+`px`/`rem`/`em` are computed up front, other units (`%`, `ch`) and a missing width are measured from the
+rendered header.
 
 - `filter`: `KptColumnFilter` from `@konce-pt/table` — `text`, `number`, `select` (with `multiple`),
   `numberRange`, `slider`, `dateRange`. Any column with a `filter` renders the filter row.
@@ -21,9 +23,19 @@ Import: `import { KptDataTable, type KptColumn } from '@konce-pt/react';`
   `rowKey`, `scrollHeight`, `virtualScroll`, `rowHeight` (41), `reorderable`, `exportable`,
   `exportFilename`, `lazy`, `totalRecords`, `expandable`, `multiExpand`, `summaryLabel`,
   `summaryValues`
+- `ariaLabel` (the table's name without a visible caption), `caption` (a visible `<caption>`),
+  `clickableRows` (rows focusable and activated with Enter/Space; on by default when `onRowClick` is set)
 - Controllable state: `selection`, `expandedRows`, `hiddenFields` (each with `default*` and
   `on*Change`)
-- Events: `onRowClick`, `onLazyLoad`, `onCellEdit`
+- Events: `onRowClick`, `onLazyLoad` (also once on start, for the first page), `onCellEdit`
+
+## Keyboard
+- A sortable header is a button: Tab to it, Enter/Space cycles asc → desc → none; `aria-sort` is on the `<th>`.
+- With `reorderable` the grip is a button: `←`/`→` move the column by one place; the new position is
+  announced and focus follows the grip.
+- An editable cell is reachable with Tab and opens with Enter; its name stays its value and
+  "Edit: {column}" is its description.
+- `selectable="single"` renders radios (one group per table).
 
 ## Templates are render props
 - `cells`: `Record<field, (row, value) => ReactNode>` — the equivalent of `kptCell`
@@ -33,7 +45,9 @@ Import: `import { KptDataTable, type KptColumn } from '@konce-pt/react';`
 - `paginatorActions` — the slot to the left of the paginator (a column-toggle button, say)
 
 ## The logic lives in a package
-Filter matching, aggregations, CSV escaping and cell-to-text come from `@konce-pt/table` — pure
+Filter matching (the global filter and the text filter ignore case and diacritics: "lodz" finds
+"Łódź"), sorting (`Intl.Collator` for the active language, natural numbers, empty cells last),
+aggregations, the CSV file (`;`, CRLF, BOM) and cell-to-text come from `@konce-pt/table` — pure
 functions with `node --test` coverage, shared with the Angular port. What stays here is the state
 and the markup.
 
@@ -68,7 +82,8 @@ them while the search box does. With `lazy` the table only holds one page, so it
 ## i18n
 The toolbar, the states and the filter labels come from the `dataTable` namespace (`search`,
 `exportCsv`, `loading`, `empty`, `total`, `selectAll`, `selectRow`, `expandRow`, `editCell`,
-`filter` / `filterMin` / `filterMax` with `{column}`, `all`, `min`, `max`, `dateRange`).
+`filter` / `filterMin` / `filterMax` with `{column}`, `all`, `min`, `max`, `dateRange`, `moveColumn`,
+`columnMoved`).
 
 ## Tokens
 `--kpt-table-{bg,fg,border,radius,header-bg,header-fg,row-hover,row-selected,cell-padding}`,

package/dist/data-view/data-view.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from "../internal/cn.js";

package/dist/date-range/date-range.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithRef } from 'react';
-import { type KptDateRangeMode, type KptDateRangeValue } from '@konce-pt/datetime';
+import { type KptDateDisplayFormat, type KptFirstDayOfWeek, type KptDateRangeMode, type KptDateRangeValue } from '@konce-pt/datetime';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export type { KptDateRangeMode, KptDateRangeValue };
 export interface KptDateRangeProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, KptI18nOverrides {
@@ -12,7 +12,13 @@ export interface KptDateRangeProps extends Omit<ComponentPropsWithRef<'div'>, 'o
     hourFormat?: 12 | 24;
     minuteStep?: number;
     placeholder?: string;
-    displayFormat?: 'pl' | 'iso';
+    /** Zapis dat: `'pl'` (domyślnie), `'iso'` albo `'locale'` (`Intl` dla aktywnego języka). */
+    displayFormat?: KptDateDisplayFormat;
+    /** Pierwszy dzień tygodnia (1 = poniedziałek … 7 = niedziela); `null` = wg aktywnego języka. */
+    firstDayOfWeek?: KptFirstDayOfWeek | null;
+    /** Stan panelu — pozwala otworzyć go z zewnątrz i wiedzieć, kiedy wybór się skończył. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     /** Najwcześniejsza dozwolona data 'RRRR-MM-DD' (włącznie). */
     minDate?: string | null;
     /** Najpóźniejsza dozwolona data 'RRRR-MM-DD' (włącznie). */
@@ -22,6 +28,10 @@ export interface KptDateRangeProps extends Omit<ComponentPropsWithRef<'div'>, 'o
     /** Id pola (nie hosta); bez niego generowane, w `KptFormField` — z wrappera. */
     id?: string;
     disabled?: boolean;
+    /** Tylko do odczytu — wartość widać, panel się nie otwiera (`aria-readonly`). */
+    readOnly?: boolean;
+    /** Pole wymagane — `aria-required`. */
+    required?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -34,10 +44,12 @@ export interface KptDateRangeProps extends Omit<ComponentPropsWithRef<'div'>, 'o
  * Klawiatura jak w `KptDatepicker`: `Enter`/`Spacja`/`↓` otwierają panel z fokusem na początku
  * zakresu (albo dziś), strzałki, `Home`/`End` i `PageUp`/`PageDown` (z `Shift` — rok) chodzą po
  * dniach przez wszystkie panele, `Tab` krąży w panelu, `Escape` i wybór końca oddają fokus polu.
- * Krańce i środek zakresu są w nazwie dnia („…, początek zakresu”), a wybór ogłasza region `polite`.
+ * Krańce i środek zakresu są w nazwie dnia („…, początek zakresu”), a wybór i przewinięcie miesiąca
+ * ogłasza region `polite`. Pole to `role="combobox"` z `aria-haspopup="dialog"`, więc niesie
+ * `aria-required`, `aria-readonly` i `aria-invalid`. Tydzień zaczyna się wg aktywnego języka.
  *
  * @example
  * <KptDateRange value={period} onValueChange={setPeriod} visibleMonths={2} />
  * <KptDateRange mode="datetime" hourFormat={12} value={span} onValueChange={setSpan} />
  */
-export declare function KptDateRange({ value, defaultValue, onValueChange, mode, visibleMonths, hourFormat, minuteStep, placeholder, displayFormat, minDate, maxDate, ariaLabel, id, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptDateRangeProps>): import("react").JSX.Element;
+export declare function KptDateRange({ value, defaultValue, onValueChange, mode, visibleMonths, hourFormat, minuteStep, placeholder, displayFormat, firstDayOfWeek, open, onOpenChange, minDate, maxDate, ariaLabel, id, disabled, readOnly, required, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptDateRangeProps>): import("react").JSX.Element;