@pallasoft/ps-table-components 1.20.0 → 1.22.0

package/dist/esm/components/ps-data-table.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useDeferredValue, useEffect, useMemo, useRef, useState, } from 'react';
-import { PsSkeletonTable } from '@pallasoft/ps-core-components';
+import { Fragment, Suspense, lazy, useDeferredValue, useEffect, useMemo, useRef, useState, } from 'react';
+import { PsDragGrip, PsSkeletonTable } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsCheckbox } from '@pallasoft/ps-input-components';
 import { PsCollapse } from '@pallasoft/ps-motion-components';
@@ -13,14 +13,17 @@ import { PsTableCellTooltipService } from '../services/ps-table-cell-tooltip-ser
 import { PsTableColumnSizeService } from '../services/ps-table-column-size-service';
 import { PsTableGroupService } from '../services/ps-table-group-service';
 import { PsTableQueryService } from '../services/ps-table-query-service';
+import { PsTableReorderService } from '../services/ps-table-reorder-service';
 import { PsTableScrollService } from '../services/ps-table-scroll-service';
 import { PsTableBulkBar } from './ps-table-bulk-bar';
 import { PsTableCardList } from './ps-table-card-list';
 import { PsTableColumnPicker } from './ps-table-column-picker';
 import { PsTableGroupHeader } from './ps-table-group-header';
 import { PsTablePagination } from './ps-table-pagination';
+import { PsTableSearchingState } from './ps-table-searching-state';
 import { PsTableSortHeader } from './ps-table-sort-header';
 import { PsTableToolbar } from './ps-table-toolbar';
+const LazyReorderFrame = lazy(() => import('./ps-table-reorder-frame').then((module) => ({ default: module.PsTableReorderFrame })));
 const densityClassNames = {
     compact: {
         cell: 'px-3 py-1.5 text-[0.8125rem] leading-5',
@@ -41,7 +44,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-export const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder = PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
+export const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, reorder, rows, searchingLabel = PsTableConfig.searchingLabel, searchPlaceholder = PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
     const containerRef = useRef(null);
     const [uncontrolledPage, setUncontrolledPage] = useState(1);
     const [uncontrolledQuery, setUncontrolledQuery] = useState(() => PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -65,7 +68,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     const hasFilters = columns.some((column) => column.filter) && isQueryable;
     const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
     const isSelectable = Boolean(getBulkActions);
-    const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
+    const columnCount = visibleColumns.length + (isSelectable ? 1 : 0) + (reorder ? 1 : 0);
     const deferredSearch = useDeferredValue(search);
     const queriedRows = useMemo(() => isServerPaginated
         ? rows
@@ -73,6 +76,8 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     const streamStatus = usePsTableStreamStatus();
     const isQueried = search.trim() !== '' ||
         Object.values(filters).some((value) => PsTableQueryService.isActive(value));
+    const isPartial = streamStatus !== null && !isServerPaginated && isQueried;
+    const isSearching = isPartial || isPending;
     const currentPage = page !== null && page !== undefined ? page : uncontrolledPage;
     const loadedRowCount = isServerPaginated ? totalRows : queriedRows.length;
     const rowCount = streamStatus !== null && !isServerPaginated && !isQueried
@@ -133,6 +138,23 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
         safePage,
         toggledGroupKeys,
     ]);
+    const reorderItems = useMemo(() => reorder
+        ? visibleRows.map((row) => {
+            const rowId = getRowId(row);
+            const label = getRowLabel ? getRowLabel(row) : rowId;
+            return {
+                groupKey: reorder.groupKey(row),
+                handleLabel: reorder.getHandleLabel(label),
+                id: rowId,
+                label,
+            };
+        })
+        : [], [getRowId, getRowLabel, reorder, visibleRows]);
+    const renderOverlayRow = (rowId) => {
+        const row = visibleRows.find((candidate) => getRowId(candidate) === rowId);
+        return row === undefined ? null : (_jsx("table", { className: 'w-full table-fixed border-collapse bg-surface text-left', children: _jsx("tbody", { children: renderRow(PsTableReorderService.plain, row) }) }));
+    };
+    const renderReorder = (children) => reorder === undefined ? (children(PsTableReorderService.plain)) : (_jsx(Suspense, { fallback: children(PsTableReorderService.plain), children: _jsx(LazyReorderFrame, { announcements: reorder.announcements, enabled: reorder.enabled, instructions: reorder.instructions, items: reorderItems, onReorder: reorder.onReorder, renderOverlay: renderOverlayRow, children: children }) }));
     const changePage = (next) => {
         if (onPageChange) {
             onPageChange(next);
@@ -210,11 +232,15 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     }, [shouldVirtualize, visibleRows.length]);
     const toggleRow = (rowId) => setSelectedIds((current) => current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId]);
     const renderCardList = (cardRows, emptyContent) => (_jsx(PsTableCardList, { columns: visibleColumns, emptyContent: emptyContent, expandedRowIds: expandedRowIds, footerColumns: hasFooter ? visibleColumns.filter((column) => column.footer !== undefined) : [], getRowId: getRowId, getRowLabel: (row) => (getRowLabel ? getRowLabel(row) : getRowId(row)), isSelectable: isSelectable, onRowClick: onRowClick, onRowHover: onRowHover, onToggleRow: toggleRow, renderExpandedRow: renderExpandedRow, rows: cardRows, selectedIds: selectedIds }));
-    const renderRow = (row, motion, virtualItem) => {
+    const renderRow = (api, row, motion, virtualItem) => {
         const rowId = getRowId(row);
         const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
         const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
-        return (_jsxs(Fragment, { children: [_jsxs("tr", { "data-index": virtualItem ? virtualItem.index : undefined, ref: virtualItem ? virtualizer.measureElement : undefined, "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: PallasoftClassNameService.merge('align-middle transition-colors', motion ? motion.className : '', onRowClick ? 'ps-focus-ring cursor-pointer hover:bg-mist/60' : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
+        const Row = api.Row;
+        const rowExtras = api.isActive
+            ? { ...api.rowProps(rowId), measureRef: virtualItem ? virtualizer.measureElement : undefined }
+            : { ref: virtualItem ? virtualizer.measureElement : undefined };
+        return (_jsxs(Fragment, { children: [_jsxs(Row, { ...rowExtras, "data-index": virtualItem ? virtualItem.index : undefined, "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: PallasoftClassNameService.merge('align-middle transition-colors', motion ? motion.className : '', onRowClick ? 'ps-focus-ring cursor-pointer hover:bg-mist/60' : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
                         ? (event) => {
                             if (event.target !== event.currentTarget)
                                 return;
@@ -225,11 +251,14 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                         }
                         : undefined, style: motion && motion.delayMs !== undefined
                         ? { animationDelay: `${motion.delayMs}ms` }
-                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? (_jsx("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
+                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? _jsx("td", { className: 'w-9 pl-3 pr-0' }) : null, isSelectable ? (_jsx("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
                                 PsTableColumnSizeService.maxWidthOf(column) !== undefined
                                 ? 'truncate'
                                 : '', 'text-sm text-ink'), style: columnStyle(column), title: PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? (_jsx("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsCollapse, { isOpen: isExpanded, children: _jsx("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
     };
+    const renderEntries = (api, entries) => reorder
+        ? PsTableReorderService.runs(entries, (entry) => reorder.groupKey(entry.row), (entry) => getRowId(entry.row)).map((run) => api.run(run.id, run.items.map((entry) => getRowId(entry.row)), run.items.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem))))
+        : entries.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem));
     if (isLoading)
         return (_jsx(PsSkeletonTable, { className: className, columns: visibleColumns.length, hasToolbar: hasToolbar, rows: PsTableConfig.skeletonRows }));
     return (_jsxs("div", { ref: containerRef, className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [isSelectable && selectedRows.length > 0 && getBulkActions ? (_jsx(PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: () => setSelectedIds([]), selectedCount: selectedRows.length })) : hasToolbar || columns.some((column) => column.canHide) ? (_jsx(PsTableToolbar, { actions: _jsxs(_Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? (_jsx(PsTableColumnPicker, { columns: columns
@@ -240,14 +269,14 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                 }, onSearchChange: (next) => {
                     updateQuery({ search: next });
                     resetPage();
-                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, _jsxs("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? (_jsxs("div", { className: 'sm:hidden', children: [grouping
+                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, _jsxs("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? (_jsxs("div", { className: 'sm:hidden', children: [reorder && reorder.cardsReason ? (_jsx("p", { className: 'border-b border-line px-4 py-2 text-xs text-ink/55', children: reorder.cardsReason })) : null, grouping
                                 ? groups.map((group, groupIndex) => {
                                     const isExpanded = isGroupExpanded(group.key, groupIndex);
                                     return (_jsxs("div", { className: 'border-b border-line last:border-b-0', children: [_jsx(PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
                                                     ? grouping.renderGroupSummary(group.rows)
                                                     : undefined }), _jsx(PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
                                 })
-                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? (_jsx("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: _jsxs("table", { className: PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: _jsxs("tr", { children: [isSelectable ? (_jsx("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
+                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? (_jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? (_jsx("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: renderReorder((api) => (_jsxs("table", { className: PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: _jsxs("tr", { children: [reorder ? (_jsx("th", { className: 'w-9 pl-3 pr-0', scope: 'col', children: reorder.enabled ? (_jsx("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? (_jsx("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: _jsx(PsDragGrip, {}) })) : null })) : null, isSelectable ? (_jsx("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
                                                 const align = column.align !== null && column.align !== undefined ? column.align : 'left';
                                                 const isSorted = sort !== null && sort.columnId === column.id;
                                                 return (_jsx("th", { "aria-sort": isSorted
@@ -255,22 +284,28 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                                                         : column.sortValue && isQueryable
                                                             ? 'none'
                                                             : undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
-                                            })] }) }), _jsxs("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isQueried ? (_jsx("tr", { children: _jsxs("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("p", { className: 'mt-1 text-sm text-ink/55', children: PsTableConfig.noMatchesDescription }), _jsx("button", { className: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
+                                            })] }) }), _jsxs("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isSearching ? (_jsx("tr", { children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows }) }) })) : null, visibleRows.length === 0 && isQueried && !isSearching ? (_jsx("tr", { children: _jsxs("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("p", { className: 'mt-1 text-sm text-ink/55', children: PsTableConfig.noMatchesDescription }), _jsx("button", { className: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
                                             ? groups.map((group, groupIndex) => {
                                                 const isExpanded = isGroupExpanded(group.key, groupIndex);
                                                 return (_jsxs(Fragment, { children: [_jsx("tr", { children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
                                                                         ? grouping.renderGroupSummary(group.rows)
                                                                         : undefined }) }) }), isExpanded
-                                                            ? group.rows.map((row, rowIndex) => renderRow(row, groupRowMotion(group.key, rowIndex)))
+                                                            ? renderEntries(api, group.rows.map((row, rowIndex) => ({
+                                                                motion: groupRowMotion(group.key, rowIndex),
+                                                                row,
+                                                            })))
                                                             : null] }, `group-${group.key}`));
                                             })
                                             : shouldVirtualize
                                                 ? [
                                                     _jsx("tr", { "aria-hidden": 'true', children: _jsx("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualTop } }) }, 'virtual-top'),
-                                                    ...virtualItems.map((item) => renderRow(visibleRows[item.index], undefined, item)),
+                                                    ...renderEntries(api, virtualItems.map((item) => ({
+                                                        row: visibleRows[item.index],
+                                                        virtualItem: item,
+                                                    }))),
                                                     _jsx("tr", { "aria-hidden": 'true', children: _jsx("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualBottom } }) }, 'virtual-bottom'),
                                                 ]
-                                                : visibleRows.map((row) => renderRow(row))] }), hasFooter ? (_jsx("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: _jsxs("tr", { children: [isSelectable ? _jsx("td", {}) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
+                                                : renderEntries(api, visibleRows.map((row) => ({ row })))] }), hasFooter ? (_jsx("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: _jsxs("tr", { children: [reorder ? _jsx("td", {}) : null, isSelectable ? _jsx("td", {}) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
                                                     ? column.align
-                                                    : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && (!grouping || isServerPaginated) ? (_jsx(PsTablePagination, { loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
+                                                    : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }))) }), visibleRows.length > 0 && isSearching ? (_jsx(PsTableSearchingState, { className: 'border-t border-line py-3', label: searchingLabel })) : null, pageSize && (!grouping || isServerPaginated) ? (_jsx(PsTablePagination, { isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
 };

package/dist/esm/components/ps-table-pagination.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsTablePagination = ({ className, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
+export const PsTablePagination = ({ className, isPartial = false, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
     const firstRow = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
     const lastRow = Math.min(page * pageSize, totalRows);
     const buttonClassName = 'ps-focus-ring inline-flex min-h-9 items-center rounded-full border border-line px-3.5 text-sm font-semibold text-ink transition-colors disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40';
-    return (_jsxs("nav", { "aria-label": 'Pagination', className: PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [_jsx("p", { className: 'text-sm text-ink/55', children: totalRows === 0 ? 'No rows' : `${firstRow}–${lastRow} of ${totalRows}` }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), _jsxs("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), _jsx("button", { className: buttonClassName, disabled: page >=
+    return (_jsxs("nav", { "aria-label": 'Pagination', className: PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [_jsx("p", { className: 'text-sm text-ink/55', children: totalRows === 0
+                    ? 'No rows'
+                    : `${firstRow}–${lastRow} of ${totalRows}${isPartial ? '+' : ''}` }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), _jsxs("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), _jsx("button", { className: buttonClassName, disabled: page >=
                             (loadedPageCount === undefined ? pageCount : Math.min(loadedPageCount, pageCount)), onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
 };

package/dist/esm/components/ps-table-reorder-frame.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { PsDragClasses, PsDragListLiftFrames, PsDragOverlay } from '@pallasoft/ps-core-components';
+import { usePsTableReorder } from '../hooks/use-ps-table-reorder';
+import { PsTableSortableRow } from './ps-table-sortable-row';
+export const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
+    const { activeId, activeRunId, contextProps, placements } = usePsTableReorder(input);
+    const itemById = new Map(input.items.map((item) => [item.id, item]));
+    const api = {
+        isActive: true,
+        Row: PsTableSortableRow,
+        rowProps: (rowId) => {
+            const item = itemById.get(rowId);
+            const placement = placements.get(rowId);
+            return {
+                handleLabel: item === undefined ? '' : item.handleLabel,
+                hasHandle: item !== undefined && input.enabled && placement !== undefined && placement.size > 1,
+                isDisabled: activeRunId !== null && (placement === undefined || placement.runId !== activeRunId),
+                rowId,
+            };
+        },
+        run: (runId, ids, runChildren) => (_jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: runChildren }, runId)),
+    };
+    return (_jsxs(DndContext, { ...contextProps, children: [children(api), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragListLiftFrames, children: activeId === null ? null : renderOverlay(activeId) })] }));
+};

package/dist/esm/components/ps-table-reorder-handle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsDragGrip } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsTableReorderHandle = ({ activatorRef, className, label, ...buttonProps }) => (_jsx("button", { ...buttonProps, "aria-label": label, className: PallasoftClassNameService.merge('ps-focus-ring flex h-7 w-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-ink/40 transition-colors hover:bg-mist hover:text-ink active:cursor-grabbing', className), onClick: (event) => event.stopPropagation(), ref: activatorRef, title: label, type: 'button', children: _jsx(PsDragGrip, {}) }));

package/dist/esm/components/ps-table-searching-state.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsTableSearchingState = ({ className, label, skeletonRows = 0, }) => (_jsxs("div", { "aria-live": 'polite', className: PallasoftClassNameService.merge('flex flex-col gap-3 px-4 py-4', className), role: 'status', children: [Array.from({ length: skeletonRows }).map((_, index) => (_jsx("div", { className: 'h-4 w-full animate-pulse rounded-full bg-mist' }, index))), _jsx("p", { className: 'text-sm text-ink/55', children: label })] }));

package/dist/esm/components/ps-table-sortable-row.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { PsDragConfig } from '@pallasoft/ps-core-components';
+import { PsTableReorderHandle } from './ps-table-reorder-handle';
+export const PsTableSortableRow = ({ children, className, handleLabel, hasHandle, isDisabled, measureRef, rowId, style, ...rowProps }) => {
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ disabled: isDisabled || !hasHandle, id: rowId });
+    return (_jsxs("tr", { ...rowProps, className: className, ref: (element) => {
+            setNodeRef(element);
+            if (measureRef)
+                measureRef(element);
+        }, style: {
+            ...style,
+            opacity: isDragging ? PsDragConfig.placeholderOpacity : style?.opacity,
+            transform: CSS.Translate.toString(transform),
+            transition,
+        }, children: [_jsx("td", { className: 'w-9 pl-3 pr-0', onClick: (event) => event.stopPropagation(), children: hasHandle ? (_jsx(PsTableReorderHandle, { ...attributes, ...listeners, activatorRef: setActivatorNodeRef, label: handleLabel })) : null }), children] }));
+};

package/dist/esm/constants/table-config.js

@@ -4,6 +4,8 @@ export const PsTableConfig = {
     groupOpenMs: 280,
     groupRowStaggerMs: 16,
     groupStaggerLimit: 12,
+    searchingLabel: 'Searching all rows…',
+    searchingSkeletonRows: 3,
     noMatchesDescription: 'Try a different search or clear the filters.',
     noMatchesTitle: 'Nothing matches',
     rowEstimatePx: { compact: 37, normal: 57 },

package/dist/esm/hooks/use-ps-table-page.js

@@ -0,0 +1,5 @@
+import { useState } from 'react';
+export const usePsTablePage = () => {
+    const [page, setPage] = useState(1);
+    return { onPageChange: setPage, page };
+};

package/dist/esm/hooks/use-ps-table-reorder.js

@@ -0,0 +1,63 @@
+import { useMemo, useState } from 'react';
+import { closestCenter, } from '@dnd-kit/core';
+import { usePsDragSensors } from '@pallasoft/ps-core-components';
+import { PsTableReorderService } from '../services/ps-table-reorder-service';
+export const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, onReorder, }) => {
+    const [activeId, setActiveId] = useState(null);
+    const sensors = usePsDragSensors();
+    const runs = useMemo(() => enabled
+        ? PsTableReorderService.runs(items, (item) => item.groupKey, (item) => item.id)
+        : [], [enabled, items]);
+    const placements = useMemo(() => PsTableReorderService.placements(runs, (item) => item.id), [runs]);
+    const activePlacement = activeId === null ? undefined : placements.get(activeId);
+    const itemById = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const labelOf = (id) => {
+        const item = itemById.get(id);
+        return item === undefined ? id : item.label;
+    };
+    const positionOf = (id) => {
+        const placement = placements.get(id);
+        return placement === undefined ? 0 : placement.index + 1;
+    };
+    const countOf = (id) => {
+        const placement = placements.get(id);
+        return placement === undefined ? 0 : placement.size;
+    };
+    const announcements = {
+        onDragCancel: ({ active }) => texts.cancelled(labelOf(String(active.id))),
+        onDragEnd: ({ active, over }) => over === null
+            ? texts.cancelled(labelOf(String(active.id)))
+            : texts.dropped(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id))),
+        onDragOver: ({ active, over }) => over === null
+            ? undefined
+            : texts.moved(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id))),
+        onDragStart: ({ active }) => texts.lifted(labelOf(String(active.id)), positionOf(String(active.id)), countOf(String(active.id))),
+    };
+    const handleDragEnd = ({ active, over }) => {
+        setActiveId(null);
+        if (over === null || active.id === over.id)
+            return;
+        const placement = placements.get(String(active.id));
+        const target = placements.get(String(over.id));
+        if (placement === undefined || target === undefined || placement.runId !== target.runId)
+            return;
+        const run = runs.find((candidate) => candidate.id === placement.runId);
+        if (run === undefined)
+            return;
+        onReorder(run.groupKey, PsTableReorderService.move(run.items.map((item) => item.id), String(active.id), String(over.id)));
+    };
+    return {
+        activeId,
+        activeRunId: activePlacement === undefined ? null : activePlacement.runId,
+        contextProps: {
+            accessibility: { announcements, screenReaderInstructions: { draggable: instructions } },
+            collisionDetection: closestCenter,
+            modifiers: [PsTableReorderService.lockToVerticalAxis],
+            onDragCancel: () => setActiveId(null),
+            onDragEnd: handleDragEnd,
+            onDragStart: ({ active }) => setActiveId(String(active.id)),
+            sensors,
+        },
+        placements,
+    };
+};

package/dist/esm/index.js

@@ -32,3 +32,8 @@ export * from './components/ps-table-export-button';
 export * from './constants/ps-table-download-config';
 export * from './services/ps-table-download-service';
 export * from './services/ps-table-scroll-anchor-service';
+export * from './hooks/use-ps-table-page';
+export * from './interfaces/ps-table-page-state';
+export * from './interfaces/table-reorder';
+export * from './interfaces/table-reorder-announcements';
+export * from './services/ps-table-reorder-service';

package/dist/esm/interfaces/ps-table-page-state.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-reorder-announcements.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-reorder-api.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-reorder-item.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-reorder-placement.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-reorder-row-props.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-reorder-run.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-reorder.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-row-entry.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/ps-table-reorder-service.js

@@ -0,0 +1,42 @@
+export class PsTableReorderService {
+    static runs(items, getKey, getId) {
+        const runs = [];
+        for (const item of items) {
+            const groupKey = getKey(item);
+            const last = runs[runs.length - 1];
+            if (last !== undefined && last.groupKey === groupKey)
+                last.items.push(item);
+            else
+                runs.push({ groupKey, id: `${groupKey}:${getId(item)}`, items: [item] });
+        }
+        return runs;
+    }
+    static placements(runs, getId) {
+        const placements = new Map();
+        for (const run of runs)
+            run.items.forEach((item, index) => placements.set(getId(item), {
+                groupKey: run.groupKey,
+                index,
+                runId: run.id,
+                size: run.items.length,
+            }));
+        return placements;
+    }
+    static move(ids, activeId, overId) {
+        const from = ids.indexOf(activeId);
+        const to = ids.indexOf(overId);
+        if (from < 0 || to < 0 || from === to)
+            return ids;
+        const next = [...ids];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        return next;
+    }
+}
+PsTableReorderService.plain = {
+    Row: 'tr',
+    isActive: false,
+    rowProps: (rowId) => ({ handleLabel: '', hasHandle: false, isDisabled: true, rowId }),
+    run: (_runId, _ids, children) => children,
+};
+PsTableReorderService.lockToVerticalAxis = ({ transform }) => ({ ...transform, x: 0 });

package/dist/hooks/use-ps-table-page.d.ts

@@ -0,0 +1,2 @@
+import type { PsTablePageState } from '../interfaces/ps-table-page-state';
+export declare const usePsTablePage: () => PsTablePageState;

package/dist/hooks/use-ps-table-page.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsTablePage = void 0;
+const react_1 = require("react");
+const usePsTablePage = () => {
+    const [page, setPage] = (0, react_1.useState)(1);
+    return { onPageChange: setPage, page };
+};
+exports.usePsTablePage = usePsTablePage;

package/dist/hooks/use-ps-table-reorder.d.ts

@@ -0,0 +1,18 @@
+import { type DndContextProps } from '@dnd-kit/core';
+import type { PsTableReorderAnnouncements } from '../interfaces/table-reorder-announcements';
+import type { PsTableReorderItem } from '../interfaces/table-reorder-item';
+import type { PsTableReorderPlacement } from '../interfaces/table-reorder-placement';
+export interface UsePsTableReorderInput {
+    announcements: PsTableReorderAnnouncements;
+    enabled: boolean;
+    instructions: string;
+    items: PsTableReorderItem[];
+    onReorder: (groupKey: string, orderedIds: string[]) => void;
+}
+export interface PsTableReorderState {
+    activeId: string | null;
+    activeRunId: string | null;
+    contextProps: Omit<DndContextProps, 'children'>;
+    placements: Map<string, PsTableReorderPlacement>;
+}
+export declare const usePsTableReorder: ({ announcements: texts, enabled, instructions, items, onReorder, }: UsePsTableReorderInput) => PsTableReorderState;

package/dist/hooks/use-ps-table-reorder.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsTableReorder = void 0;
+const react_1 = require("react");
+const core_1 = require("@dnd-kit/core");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_table_reorder_service_1 = require("../services/ps-table-reorder-service");
+const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, onReorder, }) => {
+    const [activeId, setActiveId] = (0, react_1.useState)(null);
+    const sensors = (0, ps_core_components_1.usePsDragSensors)();
+    const runs = (0, react_1.useMemo)(() => enabled
+        ? ps_table_reorder_service_1.PsTableReorderService.runs(items, (item) => item.groupKey, (item) => item.id)
+        : [], [enabled, items]);
+    const placements = (0, react_1.useMemo)(() => ps_table_reorder_service_1.PsTableReorderService.placements(runs, (item) => item.id), [runs]);
+    const activePlacement = activeId === null ? undefined : placements.get(activeId);
+    const itemById = (0, react_1.useMemo)(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const labelOf = (id) => {
+        const item = itemById.get(id);
+        return item === undefined ? id : item.label;
+    };
+    const positionOf = (id) => {
+        const placement = placements.get(id);
+        return placement === undefined ? 0 : placement.index + 1;
+    };
+    const countOf = (id) => {
+        const placement = placements.get(id);
+        return placement === undefined ? 0 : placement.size;
+    };
+    const announcements = {
+        onDragCancel: ({ active }) => texts.cancelled(labelOf(String(active.id))),
+        onDragEnd: ({ active, over }) => over === null
+            ? texts.cancelled(labelOf(String(active.id)))
+            : texts.dropped(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id))),
+        onDragOver: ({ active, over }) => over === null
+            ? undefined
+            : texts.moved(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id))),
+        onDragStart: ({ active }) => texts.lifted(labelOf(String(active.id)), positionOf(String(active.id)), countOf(String(active.id))),
+    };
+    const handleDragEnd = ({ active, over }) => {
+        setActiveId(null);
+        if (over === null || active.id === over.id)
+            return;
+        const placement = placements.get(String(active.id));
+        const target = placements.get(String(over.id));
+        if (placement === undefined || target === undefined || placement.runId !== target.runId)
+            return;
+        const run = runs.find((candidate) => candidate.id === placement.runId);
+        if (run === undefined)
+            return;
+        onReorder(run.groupKey, ps_table_reorder_service_1.PsTableReorderService.move(run.items.map((item) => item.id), String(active.id), String(over.id)));
+    };
+    return {
+        activeId,
+        activeRunId: activePlacement === undefined ? null : activePlacement.runId,
+        contextProps: {
+            accessibility: { announcements, screenReaderInstructions: { draggable: instructions } },
+            collisionDetection: core_1.closestCenter,
+            modifiers: [ps_table_reorder_service_1.PsTableReorderService.lockToVerticalAxis],
+            onDragCancel: () => setActiveId(null),
+            onDragEnd: handleDragEnd,
+            onDragStart: ({ active }) => setActiveId(String(active.id)),
+            sensors,
+        },
+        placements,
+    };
+};
+exports.usePsTableReorder = usePsTableReorder;

package/dist/index.d.ts

@@ -32,3 +32,8 @@ export * from './components/ps-table-export-button';
 export * from './constants/ps-table-download-config';
 export * from './services/ps-table-download-service';
 export * from './services/ps-table-scroll-anchor-service';
+export * from './hooks/use-ps-table-page';
+export * from './interfaces/ps-table-page-state';
+export * from './interfaces/table-reorder';
+export * from './interfaces/table-reorder-announcements';
+export * from './services/ps-table-reorder-service';

package/dist/index.js

@@ -48,3 +48,8 @@ __exportStar(require("./components/ps-table-export-button"), exports);
 __exportStar(require("./constants/ps-table-download-config"), exports);
 __exportStar(require("./services/ps-table-download-service"), exports);
 __exportStar(require("./services/ps-table-scroll-anchor-service"), exports);
+__exportStar(require("./hooks/use-ps-table-page"), exports);
+__exportStar(require("./interfaces/ps-table-page-state"), exports);
+__exportStar(require("./interfaces/table-reorder"), exports);
+__exportStar(require("./interfaces/table-reorder-announcements"), exports);
+__exportStar(require("./services/ps-table-reorder-service"), exports);

package/dist/interfaces/ps-table-page-state.d.ts

@@ -0,0 +1,4 @@
+export interface PsTablePageState {
+    onPageChange: (page: number) => void;
+    page: number;
+}

package/dist/interfaces/ps-table-page-state.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-reorder-announcements.d.ts

@@ -0,0 +1,6 @@
+export interface PsTableReorderAnnouncements {
+    cancelled: (rowLabel: string) => string;
+    dropped: (rowLabel: string, position: number, count: number) => string;
+    lifted: (rowLabel: string, position: number, count: number) => string;
+    moved: (rowLabel: string, position: number, count: number) => string;
+}

package/dist/interfaces/table-reorder-announcements.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-reorder-api.d.ts

@@ -0,0 +1,8 @@
+import type { ElementType, ReactNode } from 'react';
+import type { PsTableReorderRowProps } from './table-reorder-row-props';
+export interface PsTableReorderApi {
+    isActive: boolean;
+    Row: ElementType;
+    rowProps: (rowId: string) => PsTableReorderRowProps;
+    run: (runId: string, ids: string[], children: ReactNode) => ReactNode;
+}

package/dist/interfaces/table-reorder-api.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-reorder-item.d.ts

@@ -0,0 +1,6 @@
+export interface PsTableReorderItem {
+    groupKey: string;
+    handleLabel: string;
+    id: string;
+    label: string;
+}

package/dist/interfaces/table-reorder-item.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-reorder-placement.d.ts

@@ -0,0 +1,6 @@
+export interface PsTableReorderPlacement {
+    groupKey: string;
+    index: number;
+    runId: string;
+    size: number;
+}

package/dist/interfaces/table-reorder-placement.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });