@konce-pt/react 0.8.0

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

@@ -0,0 +1,453 @@
+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 { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptButton } from "../button/button.js";
+import { KptDatepicker } from "../datepicker/datepicker.js";
+import { KptDateRange } from "../date-range/date-range.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptInput } from "../input/input.js";
+import { KptInputNumber } from "../input-number/input-number.js";
+import { KptPaginator } from "../paginator/paginator.js";
+import { KptSelect } from "../select/select.js";
+import { KptSlider } from "../slider/slider.js";
+import { exportTableCsv } from "./export-csv.js";
+const REM_PX = 16;
+const CHECKBOX_FROZEN_W = 3; // rem
+const EXPANDER_FROZEN_W = 2.5; // rem
+const VIRTUAL_BUFFER = 6;
+/** Edytory z panelem w nakładce — otwierane od razu i zatwierdzane na zamknięciu panelu. */
+const OVERLAY_EDITORS = new Set(['date', 'select', 'multiselect']);
+/** Tablice (multiselect) porównujemy po zawartości, resztę po referencji. */
+function sameEditValue(a, b) {
+    if (a === b)
+        return true;
+    if (Array.isArray(a) && Array.isArray(b))
+        return a.length === b.length && a.every((v, i) => v === b[i]);
+    return false;
+}
+const EMPTY_ROWS = [];
+const EMPTY_FIELDS = [];
+/**
+ * Flagowa tabela danych: kolumny konfiguracją, sortowanie, filtr globalny i filtry kolumn,
+ * paginacja, zaznaczanie, kolumny zamrożone i przestawiane, edycja inline, wiersz podsumowania,
+ * rozwijane wiersze, wirtualizacja i eksport CSV.
+ *
+ * @example
+ * <KptDataTable columns={cols} data={rows} filterable pageSize={10} selectable="multiple" rowKey="id" />
+ */
+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 });
+    const [picked, setPicked] = useControllableState({
+        value: selection,
+        defaultValue: defaultSelection,
+        onChange: onSelectionChange,
+    });
+    const [expanded, setExpanded] = useControllableState({
+        value: expandedRows,
+        defaultValue: defaultExpandedRows,
+        onChange: onExpandedRowsChange,
+    });
+    const [hidden, setHidden] = useControllableState({
+        value: hiddenFields,
+        defaultValue: defaultHiddenFields,
+        onChange: onHiddenFieldsChange,
+    });
+    const [filterText, setFilterText] = useState('');
+    const [columnFilters, setColumnFilters] = useState({});
+    const [sortField, setSortField] = useState(null);
+    const [sortDir, setSortDir] = useState(null);
+    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ą.
+    const [order, setOrder] = useState(columns);
+    const columnsRef = useRef(columns);
+    if (columnsRef.current !== columns) {
+        columnsRef.current = columns;
+        if (order !== columns)
+            setOrder(columns);
+    }
+    const [dragField, setDragField] = useState(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [viewportHeight, setViewportHeight] = useState(400);
+    const [theadOffset, setTheadOffset] = useState(0);
+    const scrollRef = useRef(null);
+    const theadRef = useRef(null);
+    const editorHostRef = useRef(null);
+    const [editingCell, setEditingCell] = useState(null);
+    const [editingValue, setEditingValue] = useState(null);
+    const [editorPanelOpen, setEditorPanelOpen] = useState(false);
+    const visibleColumns = useMemo(() => order.filter((col) => !hidden.includes(col.field)), [order, hidden]);
+    const hasColumnFilters = columns.some((col) => col.filter);
+    const hasRowDetail = expandable && !!renderRowDetail;
+    const sameRow = (a, b) => rowKey ? a[rowKey] === b[rowKey] : a === b;
+    // ── Potok danych ──
+    const filtered = useMemo(() => {
+        const query = filterText.trim().toLowerCase();
+        let rows = data;
+        if (query) {
+            rows = rows.filter((row) => columns.some((col) => toText(row[col.field]).toLowerCase().includes(query)));
+        }
+        if (hasColumnFilters) {
+            rows = rows.filter((row) => columns.every((col) => {
+                if (!col.filter)
+                    return true;
+                const value = columnFilters[col.field];
+                if (isEmptyFilterValue(value))
+                    return true;
+                return matchesColumnFilter(col.filter, row[col.field], value);
+            }));
+        }
+        return rows;
+    }, [columnFilters, columns, data, filterText, hasColumnFilters]);
+    const sorted = useMemo(() => {
+        if (!sortField || !sortDir)
+            return filtered;
+        const sign = sortDir === 'asc' ? 1 : -1;
+        return [...filtered].sort((a, b) => {
+            const av = a[sortField];
+            const bv = 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]);
+    const paged = useMemo(() => {
+        if (lazy)
+            return data;
+        if (pageSize <= 0)
+            return sorted;
+        const start = pageIndex * pageSizeState;
+        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.
+    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
+    }, [lazy, pageIndex, pageSizeState, sortField, sortDir, filterText, columnFilters]);
+    // Offset sticky drugiego wiersza nagłówka = wysokość pierwszego.
+    useLayoutEffect(() => {
+        const first = theadRef.current?.rows?.[0];
+        if (first)
+            setTheadOffset(first.offsetHeight);
+    }, [filterRowPosition, hasColumnFilters, visibleColumns]);
+    useLayoutEffect(() => {
+        const el = scrollRef.current;
+        if (el)
+            setViewportHeight(el.clientHeight);
+    }, []);
+    // Wejście w edycję → fokus na kontrolce edytora.
+    useEffect(() => {
+        if (!editingCell)
+            return;
+        editorHostRef.current?.querySelector('input, .kpt-select, [tabindex]')?.focus();
+    }, [editingCell]);
+    // ── Wirtualizacja ──
+    const virtualStart = Math.max(0, Math.floor(scrollTop / rowHeight) - VIRTUAL_BUFFER);
+    const virtualEnd = Math.min(sorted.length, virtualStart + Math.ceil(viewportHeight / rowHeight) + VIRTUAL_BUFFER * 2);
+    const virtualRows = sorted.slice(virtualStart, virtualEnd);
+    const topPad = virtualStart * rowHeight;
+    const bottomPad = (sorted.length - virtualEnd) * rowHeight;
+    const onScroll = (event) => {
+        if (!virtualScroll)
+            return;
+        const el = event.currentTarget;
+        setScrollTop(el.scrollTop);
+        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(() => {
+        const map = new Map();
+        let acc = leadingStickyWidth;
+        for (const col of visibleColumns) {
+            if (!col.frozen)
+                break; // tylko wiodące, sąsiadujące
+            map.set(col.field, acc);
+            acc += parseWidthPx(col.width);
+        }
+        return map;
+    }, [leadingStickyWidth, visibleColumns]);
+    const hasFrozen = frozenOffsets.size > 0;
+    const frozenLeft = (field) => frozenOffsets.get(field);
+    const expanderStickyLeft = hasFrozen ? 0 : undefined;
+    const checkboxStickyLeft = hasFrozen ? (hasRowDetail ? EXPANDER_FROZEN_W * REM_PX : 0) : undefined;
+    // ── Przestawianie kolumn ──
+    const frozenLeadCount = (() => {
+        let n = 0;
+        for (const col of visibleColumns) {
+            if (col.frozen)
+                n++;
+            else
+                break;
+        }
+        return n;
+    })();
+    const isColDraggable = (col) => reorderable && !col.frozen;
+    const onColDrop = (field, event) => {
+        event.preventDefault();
+        if (dragField === null || dragField === field)
+            return;
+        const visIndex = visibleColumns.findIndex((col) => col.field === field);
+        if (visIndex < frozenLeadCount)
+            return; // nie wsuwaj przed kolumny zamrożone
+        const cols = [...order];
+        const fromIdx = cols.findIndex((col) => col.field === dragField);
+        const toIdx = cols.findIndex((col) => col.field === field);
+        if (fromIdx === -1 || toIdx === -1)
+            return;
+        const [moved] = cols.splice(fromIdx, 1);
+        cols.splice(toIdx, 0, moved);
+        setOrder(cols);
+        setDragField(null);
+    };
+    // ── Sortowanie ──
+    const toggleSort = (col) => {
+        if (!col.sortable)
+            return;
+        if (sortField !== col.field) {
+            setSortField(col.field);
+            setSortDir('asc');
+            return;
+        }
+        if (sortDir === 'asc')
+            setSortDir('desc');
+        else if (sortDir === 'desc') {
+            setSortField(null);
+            setSortDir(null);
+        }
+        else
+            setSortDir('asc');
+    };
+    const ariaSort = (col) => {
+        if (sortField !== col.field || !sortDir)
+            return 'none';
+        return sortDir === 'asc' ? 'ascending' : 'descending';
+    };
+    // ── Filtry kolumn ──
+    const setColumnFilter = (field, value) => {
+        setColumnFilters((current) => ({ ...current, [field]: value }));
+        setPageIndex(0);
+    };
+    const rangeVal = (field) => {
+        const value = columnFilters[field];
+        return { min: value?.min ?? '', max: value?.max ?? '' };
+    };
+    const sliderVal = (col) => {
+        const min = col.filter?.min ?? 0;
+        const max = col.filter?.max ?? 100;
+        return columnFilters[col.field] ?? [min, max];
+    };
+    // ── Zaznaczanie ──
+    const isSelected = (row) => picked.some((r) => sameRow(r, row));
+    const toggleRow = (row) => {
+        if (selectable === 'none')
+            return;
+        if (selectable === 'single') {
+            setPicked(isSelected(row) ? [] : [row]);
+            return;
+        }
+        setPicked(isSelected(row) ? picked.filter((r) => !sameRow(r, row)) : [...picked, row]);
+    };
+    const pageAllSelected = paged.length > 0 && paged.every((row) => isSelected(row));
+    const pageSomeSelected = paged.some((row) => isSelected(row)) && !pageAllSelected;
+    const toggleAllOnPage = () => {
+        if (pageAllSelected)
+            setPicked(picked.filter((r) => !paged.some((pr) => sameRow(pr, r))));
+        else
+            setPicked([...picked, ...paged.filter((row) => !isSelected(row))]);
+    };
+    // ── Rozwijane wiersze ──
+    const isExpanded = (row) => expanded.some((r) => sameRow(r, row));
+    const toggleExpand = (row) => {
+        if (isExpanded(row))
+            setExpanded(expanded.filter((r) => !sameRow(r, row)));
+        else
+            setExpanded(multiExpand ? [...expanded, row] : [row]);
+    };
+    // ── Edycja inline ──
+    const isEditable = (col) => !!col.edit || !!cellEditors?.[col.field];
+    const isEditingCell = (row, field) => !!editingCell && editingCell.field === field && sameRow(editingCell.row, row);
+    const startEdit = (row, col, event) => {
+        event.stopPropagation();
+        if (!isEditable(col) || isEditingCell(row, col.field))
+            return;
+        setEditingCell({ row, field: col.field });
+        setEditingValue(row[col.field]);
+        // Edytory z panelem otwieramy od razu: ich zamknięcie jest jedynym momentem, w którym
+        // wiadomo, że użytkownik skończył wybierać.
+        setEditorPanelOpen(!!col.edit && OVERLAY_EDITORS.has(col.edit.type));
+    };
+    const commitEdit = (value = editingValue) => {
+        if (!editingCell)
+            return;
+        const { row, field } = editingCell;
+        setEditingCell(null);
+        setEditorPanelOpen(false);
+        if (sameEditValue(value, row[field]))
+            return;
+        onCellEdit?.({ row, field, value, updatedRow: { ...row, [field]: value } });
+    };
+    const cancelEdit = () => {
+        setEditingCell(null);
+        setEditorPanelOpen(false);
+    };
+    /**
+     * Edytory bez panelu (text/number, własne) zatwierdza dopiero wyjście fokusu poza CAŁY edytor:
+     * `KptInputNumber` ma fokusowalne strzałki obok pola, więc reakcja na blur samej kontrolki
+     * zamykałaby edycję przy każdym kliknięciu w „+".
+     */
+    const onEditorFocusOut = (event) => {
+        if (editorPanelOpen)
+            return; // edytory z panelem zatwierdza jego zamknięcie
+        const host = editorHostRef.current;
+        const next = event.relatedTarget;
+        if (host && next && host.contains(next))
+            return; // fokus został w edytorze
+        commitEdit();
+    };
+    const onEditorPanelToggle = (open) => {
+        setEditorPanelOpen(open);
+        if (!open)
+            commitEdit();
+    };
+    // ── Wiersz podsumowania ──
+    const summarySource = lazy ? EMPTY_ROWS : filtered;
+    const overrides = summaryValues ?? {};
+    const summaryFields = visibleColumns
+        .filter((col) => col.summary || col.field in overrides)
+        .map((col) => col.field);
+    const hasSummary = summaryFields.length > 0;
+    const summaryStartIndex = summaryFields[0] === undefined ? -1 : visibleColumns.findIndex((col) => col.field === summaryFields[0]);
+    const summaryLabelSpan = leadingCells + summaryStartIndex;
+    const formatSummary = (raw, format) => format ? format(raw) : toText(raw);
+    const summaryText = (col) => {
+        if (col.field in overrides)
+            return formatSummary(overrides[col.field], col.summary?.format);
+        if (!col.summary)
+            return '';
+        const raw = typeof col.summary.fn === 'function'
+            ? col.summary.fn(summarySource)
+            : aggregate(summarySource, col.field, col.summary.fn);
+        return formatSummary(raw, col.summary.format);
+    };
+    const colspan = visibleColumns.length + leadingCells;
+    const displayCount = virtualScroll ? sorted.length : paged.length;
+    const rowsToRender = virtualScroll ? virtualRows : paged;
+    // ── Renderowanie ──
+    const filterCell = (col) => {
+        const filter = col.filter;
+        if (!filter)
+            return null;
+        const stop = (event) => event.stopPropagation();
+        switch (filter.type) {
+            case 'text':
+                return (_jsx("input", { className: "kpt-data-table__fcell", type: "search", placeholder: filter.placeholder || '', "aria-label": t('dataTable.filter', { column: col.header }), value: columnFilters[col.field] || '', onChange: (event) => setColumnFilter(col.field, event.target.value), onClick: stop }));
+            case 'number':
+                return (_jsx("input", { className: "kpt-data-table__fcell", type: "text", inputMode: "numeric", placeholder: filter.placeholder || '', "aria-label": t('dataTable.filter', { column: col.header }), value: columnFilters[col.field] || '', onChange: (event) => setColumnFilter(col.field, event.target.value.replace(/\D/g, '')), onClick: stop }));
+            case 'select':
+                return (_jsx(KptSelect, { options: filter.options ?? [], multiple: !!filter.multiple, filter: true, placeholder: filter.placeholder || t('dataTable.all'), value: columnFilters[col.field] ?? null, onValueChange: (value) => setColumnFilter(col.field, value) }));
+            case 'numberRange':
+                return (_jsxs("div", { className: "kpt-data-table__frange", children: [_jsx("input", { className: "kpt-data-table__fcell", type: "text", inputMode: "numeric", placeholder: t('dataTable.min'), "aria-label": t('dataTable.filterMin', { column: col.header }), value: rangeVal(col.field).min, onChange: (event) => setColumnFilter(col.field, { ...rangeVal(col.field), min: event.target.value.replace(/\D/g, '') }), onClick: stop }), _jsx("input", { className: "kpt-data-table__fcell", type: "text", inputMode: "numeric", placeholder: t('dataTable.max'), "aria-label": t('dataTable.filterMax', { column: col.header }), value: rangeVal(col.field).max, onChange: (event) => setColumnFilter(col.field, { ...rangeVal(col.field), max: event.target.value.replace(/\D/g, '') }), onClick: stop })] }));
+            case 'slider':
+                return (_jsx("div", { className: "kpt-data-table__fslider", onClick: stop, children: _jsx(KptSlider, { range: true, min: filter.min ?? 0, max: filter.max ?? 100, step: filter.step ?? 1, value: sliderVal(col), onValueChange: (value) => setColumnFilter(col.field, value), showValue: true }) }));
+            case 'dateRange':
+                return (_jsx(KptDateRange, { placeholder: filter.placeholder || t('dataTable.dateRange'), value: columnFilters[col.field] || { start: '', end: '' }, onValueChange: (value) => setColumnFilter(col.field, value) }));
+            default:
+                return null;
+        }
+    };
+    const filterRow = (_jsxs("tr", { className: "kpt-data-table__filter-row", children: [hasRowDetail ? (_jsx("th", { className: cn('kpt-data-table__expander', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: expanderStickyLeft } })) : null, selectable !== 'none' ? (_jsx("th", { className: cn('kpt-data-table__checkbox', hasFrozen && 'kpt-data-table__cell--frozen'), style: { left: checkboxStickyLeft } })) : null, visibleColumns.map((col) => (_jsx("th", { style: { width: col.width, left: frozenLeft(col.field) }, "data-align": col.align ?? 'start', className: cn(frozenOffsets.has(col.field) && 'kpt-data-table__cell--frozen'), children: filterCell(col) }, col.field)))] }));
+    const editor = (row, col) => {
+        const custom = cellEditors?.[col.field];
+        if (custom) {
+            const context = {
+                value: editingValue,
+                row,
+                commit: (value) => commitEdit(value),
+                cancel: cancelEdit,
+            };
+            return custom(context);
+        }
+        const edit = col.edit;
+        if (!edit)
+            return null;
+        switch (edit.type) {
+            case 'text':
+                return (_jsx(KptInput, { value: editingValue ?? '', placeholder: edit.placeholder ?? '', onValueChange: setEditingValue, onKeyDown: (event) => {
+                        if (event.key === 'Enter')
+                            commitEdit();
+                        if (event.key === 'Escape')
+                            cancelEdit();
+                    } }));
+            case 'number':
+                return (_jsx(KptInputNumber, { value: editingValue, min: edit.min, max: edit.max, step: edit.step ?? 1, onValueChange: setEditingValue, onKeyDown: (event) => {
+                        if (event.key === 'Enter')
+                            commitEdit();
+                        if (event.key === 'Escape')
+                            cancelEdit();
+                    } }));
+            case 'date':
+                return (_jsx(KptDatepicker, { value: editingValue ?? '', onValueChange: setEditingValue, open: editorPanelOpen, onOpenChange: onEditorPanelToggle }));
+            case 'select':
+            case 'multiselect':
+                return (_jsx(KptSelect, { multiple: edit.type === 'multiselect', filter: edit.type === 'multiselect', options: edit.options ?? [], placeholder: edit.placeholder ?? '', value: editingValue, onValueChange: setEditingValue, open: editorPanelOpen, onOpenChange: onEditorPanelToggle }));
+            default:
+                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) => {
+                                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) => {
+                        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) => {
+                                if (isEditable(col))
+                                    startEdit(row, col, event);
+                            }, onKeyDown: (event) => {
+                                if (event.key === 'Enter' && editable)
+                                    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, row[col.field])) : 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(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) => {
+                            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) => {
+                                                    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) => {
+                                                if (col.frozen)
+                                                    return;
+                                                setDragField(col.field);
+                                                event.dataTransfer.setData('text/plain', col.field);
+                                                event.dataTransfer.effectAllowed = 'move';
+                                            }, onDragOver: (event) => {
+                                                if (!reorderable)
+                                                    return;
+                                                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] }));
+}

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

@@ -0,0 +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
+ * — 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

@@ -0,0 +1,19 @@
+import { escapeCsvCell } 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
+ * — 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 url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+    URL.revokeObjectURL(url);
+}

package/dist/data-view/data-view.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export type KptDataViewLayout = 'list' | 'grid';
+export interface KptDataViewProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
+    items?: T[];
+    layout?: KptDataViewLayout;
+    defaultLayout?: KptDataViewLayout;
+    onLayoutChange?: (layout: KptDataViewLayout) => void;
+    /** Rozmiar strony; 0 wyłącza stronicowanie. */
+    pageSize?: number;
+    paginated?: boolean;
+    /** Szablon elementu — odpowiednik `<ng-template let-item>` z Angulara. */
+    renderItem: (item: T, index: number) => ReactNode;
+}
+/**
+ * DataView — lista elementów w układzie listy albo siatki, z opcjonalnym stronicowaniem.
+ *
+ * @example
+ * <KptDataView items={products} pageSize={6} renderItem={(p) => <div>{p.name}</div>} />
+ */
+export declare function KptDataView<T>({ items, layout, defaultLayout, onLayoutChange, pageSize, paginated, renderItem, locale, dictionary, className, ...rest }: Readonly<KptDataViewProps<T>>): import("react").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from "../internal/cn.js";
+import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
+import { KptPaginator } from "../paginator/paginator.js";
+/**
+ * DataView — lista elementów w układzie listy albo siatki, z opcjonalnym stronicowaniem.
+ *
+ * @example
+ * <KptDataView items={products} pageSize={6} renderItem={(p) => <div>{p.name}</div>} />
+ */
+export function KptDataView({ items = [], layout, defaultLayout = 'grid', onLayoutChange, pageSize = 0, paginated = true, renderItem, locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
+    const [currentLayout, setLayout] = useControllableState({
+        value: layout,
+        defaultValue: defaultLayout,
+        onChange: onLayoutChange,
+    });
+    const [pageIndex, setPageIndex] = useState(0);
+    const showPager = paginated && pageSize > 0 && items.length > pageSize;
+    const pageItems = !paginated || pageSize <= 0 ? items : items.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize);
+    return (_jsx("div", { className: cn('kpt-data-view-host', className), ...rest, children: _jsxs("div", { className: "kpt-data-view", children: [_jsxs("div", { className: "kpt-data-view__toolbar", children: [_jsx("div", { className: "kpt-data-view__count", children: t('dataView.count', { count: items.length }) }), _jsxs("div", { className: "kpt-data-view__switch", children: [_jsx("button", { type: "button", className: cn(currentLayout === 'list' && 'is-active'), "aria-label": t('dataView.list'), onClick: () => setLayout('list'), children: _jsx(KptIcon, { name: "list" }) }), _jsx("button", { type: "button", className: cn(currentLayout === 'grid' && 'is-active'), "aria-label": t('dataView.grid'), onClick: () => setLayout('grid'), children: _jsx(KptIcon, { name: "menu" }) })] })] }), _jsx("div", { className: "kpt-data-view__content", "data-layout": currentLayout, children: pageItems.length ? (pageItems.map((item, index) => (_jsx("div", { className: "kpt-data-view__item", children: renderItem(item, index) }, index)))) : (_jsx("div", { className: "kpt-data-view__empty", children: t('dataView.empty') })) }), showPager ? (_jsx(KptPaginator, { length: items.length, pageIndex: pageIndex, onPageIndexChange: setPageIndex, pageSize: pageSize, pageSizeOptions: [pageSize] })) : null] }) }));
+}

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

@@ -0,0 +1,30 @@
+import { type ComponentPropsWithRef } from 'react';
+import { 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 {
+    value?: KptDateRangeValue;
+    defaultValue?: KptDateRangeValue;
+    onValueChange?: (value: KptDateRangeValue) => void;
+    mode?: KptDateRangeMode;
+    /** Liczba miesięcy obok siebie (1–3). Ignorowana w trybie 'time'. */
+    visibleMonths?: number;
+    hourFormat?: 12 | 24;
+    minuteStep?: number;
+    placeholder?: string;
+    displayFormat?: 'pl' | 'iso';
+    disabled?: boolean;
+    invalid?: boolean;
+    touched?: boolean;
+    onTouch?: () => void;
+}
+/**
+ * Wybór zakresu dat (i godzin) z kalendarzem. Pierwszy klik ustawia początek, drugi koniec;
+ * `visibleMonths` pokazuje kilka miesięcy obok siebie, a zakres podświetla się ciągłym pasmem
+ * przez wszystkie panele.
+ *
+ * @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, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptDateRangeProps>): import("react").JSX.Element;