@pallasoft/ps-table-components 1.22.1 → 1.23.0

package/dist/components/ps-data-table.d.ts

@@ -27,6 +27,7 @@ export interface PsDataTableProps<RowData> {
     onRowHover?: (row: RowData) => void;
     page?: number;
     pageSize?: number;
+    pinFirstColumn?: boolean;
     query?: PsTableQuery;
     renderExpandedRow?: (row: RowData) => ReactNode;
     reorder?: PsTableReorder<RowData>;
@@ -36,4 +37,4 @@ export interface PsDataTableProps<RowData> {
     toolbarActions?: ReactNode;
     totalRows?: number;
 }
-export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, isPending, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;
+export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, isPending, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, pinFirstColumn, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;

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

@@ -41,13 +41,17 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_input_components_1 = require("@pallasoft/ps-input-components");
 const ps_motion_components_1 = require("@pallasoft/ps-motion-components");
 const react_virtual_1 = require("@tanstack/react-virtual");
+const ps_table_control_classes_1 = require("../constants/ps-table-control-classes");
+const table_breakpoint_1 = require("../constants/table-breakpoint");
 const table_config_1 = require("../constants/table-config");
 const use_ps_incremental_count_1 = require("../hooks/use-ps-incremental-count");
 const use_ps_scroll_anchor_1 = require("../hooks/use-ps-scroll-anchor");
+const use_ps_table_overflow_1 = require("../hooks/use-ps-table-overflow");
 const use_ps_table_stream_status_1 = require("../hooks/use-ps-table-stream-status");
 const ps_table_cell_tooltip_service_1 = require("../services/ps-table-cell-tooltip-service");
 const ps_table_column_size_service_1 = require("../services/ps-table-column-size-service");
 const ps_table_group_service_1 = require("../services/ps-table-group-service");
+const ps_table_pin_service_1 = require("../services/ps-table-pin-service");
 const ps_table_query_service_1 = require("../services/ps-table-query-service");
 const ps_table_reorder_service_1 = require("../services/ps-table-reorder-service");
 const ps_table_scroll_service_1 = require("../services/ps-table-scroll-service");
@@ -80,7 +84,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-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 = table_config_1.PsTableConfig.searchingLabel, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
+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, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = table_config_1.PsTableConfig.searchingLabel, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [uncontrolledPage, setUncontrolledPage] = (0, react_1.useState)(1);
     const [uncontrolledQuery, setUncontrolledQuery] = (0, react_1.useState)(() => ps_table_query_service_1.PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -105,6 +109,9 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
     const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
     const isSelectable = Boolean(getBulkActions);
     const columnCount = visibleColumns.length + (isSelectable ? 1 : 0) + (reorder ? 1 : 0);
+    const pins = ps_table_pin_service_1.PsTablePinService.leading(pinFirstColumn, Boolean(reorder), isSelectable);
+    const placementOf = (column, columnIndex) => ps_design_system_1.PallasoftClassNameService.merge(column.hideBelow === undefined ? '' : table_breakpoint_1.PsTableHideBelowClasses[column.hideBelow], columnIndex === 0 ? pins.first : '', ps_table_pin_service_1.PsTablePinService.end(column.pinEnd === true));
+    const overflow = (0, use_ps_table_overflow_1.usePsTableOverflow)(`${visibleColumns.map((column) => column.id).join(',')}:${rows.length}`);
     const deferredSearch = (0, react_1.useDeferredValue)(search);
     const queriedRows = (0, react_1.useMemo)(() => isServerPaginated
         ? rows
@@ -174,23 +181,48 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
         safePage,
         toggledGroupKeys,
     ]);
+    const reorderKey = (0, react_1.useCallback)((row) => reorder && reorder.groupKey ? reorder.groupKey(row) : ps_table_reorder_service_1.PsTableReorderService.treeKey, [reorder]);
+    const nestingBinding = (0, react_1.useMemo)(() => {
+        if (reorder === undefined || reorder.nesting === undefined)
+            return undefined;
+        const { nesting } = reorder;
+        const find = (id) => visibleRows.find((candidate) => getRowId(candidate) === id);
+        return {
+            announcements: nesting.announcements,
+            canDrag: (id) => {
+                const row = find(id);
+                return row !== undefined && nesting.canDrag(row);
+            },
+            canDrop: (activeId, targetId, placement) => {
+                const active = find(activeId);
+                const target = find(targetId);
+                return (active !== undefined && target !== undefined && nesting.canDrop(active, target, placement));
+            },
+            onMove: (activeId, targetId, placement) => {
+                const active = find(activeId);
+                const target = find(targetId);
+                if (active !== undefined && target !== undefined)
+                    nesting.onMove(active, target, placement);
+            },
+        };
+    }, [getRowId, reorder, visibleRows]);
     const reorderItems = (0, react_1.useMemo)(() => reorder
         ? visibleRows.map((row) => {
             const rowId = getRowId(row);
             const label = getRowLabel ? getRowLabel(row) : rowId;
             return {
-                groupKey: reorder.groupKey(row),
+                groupKey: reorderKey(row),
                 handleLabel: reorder.getHandleLabel(label),
                 id: rowId,
                 label,
             };
         })
-        : [], [getRowId, getRowLabel, reorder, visibleRows]);
+        : [], [getRowId, getRowLabel, reorder, reorderKey, visibleRows]);
     const renderOverlayRow = (rowId) => {
         const row = visibleRows.find((candidate) => getRowId(candidate) === rowId);
         return row === undefined ? null : ((0, jsx_runtime_1.jsx)("table", { className: 'w-full table-fixed border-collapse bg-surface text-left', children: (0, jsx_runtime_1.jsx)("tbody", { children: renderRow(ps_table_reorder_service_1.PsTableReorderService.plain, row) }) }));
     };
-    const renderReorder = (children) => reorder === undefined ? (children(ps_table_reorder_service_1.PsTableReorderService.plain)) : ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: children(ps_table_reorder_service_1.PsTableReorderService.plain), children: (0, jsx_runtime_1.jsx)(LazyReorderFrame, { announcements: reorder.announcements, enabled: reorder.enabled, instructions: reorder.instructions, items: reorderItems, onReorder: reorder.onReorder, renderOverlay: renderOverlayRow, children: children }) }));
+    const renderReorder = (children) => reorder === undefined ? (children(ps_table_reorder_service_1.PsTableReorderService.plain)) : ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: children(ps_table_reorder_service_1.PsTableReorderService.plain), children: (0, jsx_runtime_1.jsx)(LazyReorderFrame, { announcements: reorder.announcements, enabled: reorder.enabled, instructions: reorder.instructions, items: reorderItems, nesting: nestingBinding, onReorder: reorder.onReorder, renderOverlay: renderOverlayRow, children: children }) }));
     const changePage = (next) => {
         if (onPageChange) {
             onPageChange(next);
@@ -274,7 +306,11 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
         const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
         const Row = api.Row;
         const rowExtras = api.isActive
-            ? { ...api.rowProps(rowId), measureRef: virtualItem ? virtualizer.measureElement : undefined }
+            ? {
+                ...api.rowProps(rowId),
+                handleCellClassName: pins.reorder,
+                measureRef: virtualItem ? virtualizer.measureElement : undefined,
+            }
             : { ref: virtualItem ? virtualizer.measureElement : undefined };
         return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Row, { ...rowExtras, "data-index": virtualItem ? virtualItem.index : undefined, "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: ps_design_system_1.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) => {
@@ -287,13 +323,13 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                         }
                         : undefined, style: motion && motion.delayMs !== undefined
                         ? { animationDelay: `${motion.delayMs}ms` }
-                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? (0, jsx_runtime_1.jsx)("td", { className: 'w-9 pl-3 pr-0' }) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.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 ? ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder) })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
                                 ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column) !== undefined
                                 ? 'truncate'
                                 : '', 'text-sm text-ink'), style: columnStyle(column), title: ps_table_cell_tooltip_service_1.PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded, children: (0, jsx_runtime_1.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
-        ? ps_table_reorder_service_1.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))))
+        ? ps_table_reorder_service_1.PsTableReorderService.runs(entries, (entry) => reorderKey(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 ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsSkeletonTable, { className: className, columns: visibleColumns.length, hasToolbar: hasToolbar, rows: table_config_1.PsTableConfig.skeletonRows }));
@@ -312,15 +348,15 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                                     ? grouping.renderGroupSummary(group.rows)
                                                     : undefined }), (0, jsx_runtime_1.jsx)(ps_motion_components_1.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 && isSearching ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: renderReorder((api) => ((0, jsx_runtime_1.jsxs)("table", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? ((0, jsx_runtime_1.jsx)("th", { className: 'w-9 pl-3 pr-0', scope: 'col', children: reorder.enabled ? ((0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? ((0, jsx_runtime_1.jsx)("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) })) : null })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.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 ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => ((0, jsx_runtime_1.jsxs)("table", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? ((0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? ((0, jsx_runtime_1.jsx)("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) })) : null })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column, columnIndex) => {
                                                 const align = column.align !== null && column.align !== undefined ? column.align : 'left';
                                                 const isSorted = sort !== null && sort.columnId === column.id;
                                                 return ((0, jsx_runtime_1.jsx)("th", { "aria-sort": isSorted
                                                         ? sort.direction
                                                         : column.sortValue && isQueryable
                                                             ? 'none'
-                                                            : undefined, className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? ((0, jsx_runtime_1.jsx)(ps_table_sort_header_1.PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
-                                            })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isSearching ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows }) }) })) : null, visibleRows.length === 0 && isQueried && !isSearching ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-ink/55', children: table_config_1.PsTableConfig.noMatchesDescription }), (0, jsx_runtime_1.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
+                                                            : undefined, className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], placementOf(column, columnIndex), 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? ((0, jsx_runtime_1.jsx)(ps_table_sort_header_1.PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
+                                            })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isSearching ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows }) }) })) : null, visibleRows.length === 0 && isQueried && !isSearching ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-ink/55', children: table_config_1.PsTableConfig.noMatchesDescription }), (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'mt-3 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 ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_table_group_header_1.PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
@@ -341,7 +377,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                                     }))),
                                                     (0, jsx_runtime_1.jsx)("tr", { "aria-hidden": 'true', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualBottom } }) }, 'virtual-bottom'),
                                                 ]
-                                                : renderEntries(api, visibleRows.map((row) => ({ row })))] }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? (0, jsx_runtime_1.jsx)("td", {}) : null, isSelectable ? (0, jsx_runtime_1.jsx)("td", {}) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
+                                                : renderEntries(api, visibleRows.map((row) => ({ row })))] }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? (0, jsx_runtime_1.jsx)("td", { className: pins.reorder }) : null, isSelectable ? (0, jsx_runtime_1.jsx)("td", { className: pins.select }) : null, visibleColumns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined
                                                     ? column.align
                                                     : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }))) }), visibleRows.length > 0 && isSearching ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { className: 'border-t border-line py-3', label: searchingLabel })) : null, pageSize && (!grouping || isServerPaginated) ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
 };

package/dist/components/ps-table-bulk-bar.js

@@ -4,10 +4,11 @@ exports.PsTableBulkBar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_table_control_classes_1 = require("../constants/ps-table-control-classes");
 const PsTableBulkBar = ({ actions, onClear, selectedCount }) => {
     const safeActions = actions.filter((action) => !action.isDanger);
     const dangerActions = actions.filter((action) => action.isDanger);
-    const renderAction = (action) => ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring inline-flex min-h-9 shrink-0 items-center whitespace-nowrap rounded-full px-3 text-sm font-semibold transition-colors disabled:opacity-40', action.isDanger ? 'text-danger hover:bg-danger/10' : 'text-ink hover:bg-ink/5'), disabled: action.isDisabled, onClick: action.onSelect, type: 'button', children: action.label }, action.id));
-    return ((0, jsx_runtime_1.jsxs)("div", { "aria-live": 'polite', className: 'flex min-h-12 items-center gap-2 rounded-2xl border border-primary/30 bg-primary/10 py-1.5 pl-2 pr-1.5', children: [(0, jsx_runtime_1.jsxs)("span", { className: 'inline-flex min-h-9 shrink-0 items-center rounded-full bg-primary px-3 text-sm font-semibold tabular-nums text-white', children: [selectedCount, " selected"] }), (0, jsx_runtime_1.jsxs)("div", { className: 'ps-scrollbar-hidden flex min-w-0 flex-1 items-center gap-1 overflow-x-auto', children: [safeActions.map(renderAction), dangerActions.length > 0 && safeActions.length > 0 ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'mx-1 h-5 w-px shrink-0 bg-line' })) : null, dangerActions.map(renderAction)] }), (0, jsx_runtime_1.jsx)("button", { "aria-label": 'Clear selection', className: 'ps-focus-ring inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink/60 transition-colors hover:bg-ink/5 hover:text-ink', onClick: onClear, title: 'Clear selection', type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Close }) })] }));
+    const renderAction = (action) => ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.bulkAction, action.isDanger ? 'text-danger hover:bg-danger/10' : 'text-ink hover:bg-ink/5'), disabled: action.isDisabled, onClick: action.onSelect, type: 'button', children: action.label }, action.id));
+    return ((0, jsx_runtime_1.jsxs)("div", { "aria-live": 'polite', className: ps_table_control_classes_1.PsTableControlClasses.bulkBar, children: [(0, jsx_runtime_1.jsxs)("span", { className: ps_table_control_classes_1.PsTableControlClasses.bulkCount, children: [selectedCount, " selected"] }), (0, jsx_runtime_1.jsxs)("div", { className: 'ps-scrollbar-hidden flex min-w-0 flex-1 items-center gap-1 overflow-x-auto', children: [safeActions.map(renderAction), dangerActions.length > 0 && safeActions.length > 0 ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'mx-1 h-5 w-px shrink-0 bg-line' })) : null, dangerActions.map(renderAction)] }), (0, jsx_runtime_1.jsx)("button", { "aria-label": 'Clear selection', className: ps_table_control_classes_1.PsTableControlClasses.iconButton, onClick: onClear, title: 'Clear selection', type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'h-4 w-4', iconKey: ps_icons_1.PsIconKey.Close }) })] }));
 };
 exports.PsTableBulkBar = PsTableBulkBar;

package/dist/components/ps-table-column-picker.js

@@ -7,10 +7,11 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const ps_input_components_1 = require("@pallasoft/ps-input-components");
 const react_aria_components_1 = require("react-aria-components");
+const ps_table_control_classes_1 = require("../constants/ps-table-control-classes");
 const PsTableColumnPicker = ({ columns, hiddenColumnIds, onChange, }) => {
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const visibleCount = columns.filter((column) => !hiddenColumnIds.includes(column.id)).length;
-    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: 'ps-input-control ps-control-trigger ps-focus-ring ps-control ps-control-padding inline-flex min-w-11 items-center justify-center gap-2 rounded-ps-control text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 sm:hidden', iconKey: ps_icons_1.PsIconKey.Columns }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Columns" }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'hidden h-4 w-4 sm:block', iconKey: ps_icons_1.PsIconKey.Chevron })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-60 outline-none', offset: 6, placement: 'bottom end', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Columns', className: 'flex flex-col gap-0.5 p-1.5 outline-none', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: columns.map((column) => {
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_table_control_classes_1.PsTableControlClasses.toolbarButton, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 sm:hidden', iconKey: ps_icons_1.PsIconKey.Columns }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Columns" }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'hidden h-4 w-4 sm:block', iconKey: ps_icons_1.PsIconKey.Chevron })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-60 outline-none', offset: 6, placement: 'bottom end', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Columns', className: 'flex flex-col gap-0.5 p-1.5 outline-none', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: columns.map((column) => {
                             const isVisible = !hiddenColumnIds.includes(column.id);
                             return ((0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { className: 'ps-floating-option w-full', isDisabled: isVisible && visibleCount <= 1, isSelected: isVisible, label: column.label, onChange: () => onChange(isVisible
                                     ? [...hiddenColumnIds, column.id]

package/dist/components/ps-table-export-button.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTableExportButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_icons_1 = require("@pallasoft/ps-icons");
-const PsTableExportButton = ({ label, onExport }) => ((0, jsx_runtime_1.jsxs)("button", { className: 'ps-focus-ring ps-liquid ps-liquid-control inline-flex min-h-10 min-w-10 items-center justify-center gap-2 rounded-full px-3 text-sm font-semibold text-ink transition-colors hover:border-primary/40 sm:px-4', onClick: onExport, type: 'button', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Download }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: label })] }));
+const PsTableExportButton = ({ label, onExport }) => ((0, jsx_runtime_1.jsxs)("button", { className: 'ps-focus-ring ps-liquid ps-liquid-control ps-control ps-control-padding inline-flex min-w-ps-control items-center justify-center gap-2 rounded-ps-control border border-ps-control text-sm font-semibold text-ink transition-colors hover:border-primary/40', onClick: onExport, type: 'button', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Download }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: label })] }));
 exports.PsTableExportButton = PsTableExportButton;

package/dist/components/ps-table-group-header.js

@@ -4,5 +4,5 @@ exports.PsTableGroupHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
-const PsTableGroupHeader = ({ count, isExpanded, label, onToggle, summary, }) => ((0, jsx_runtime_1.jsxs)("button", { "aria-expanded": isExpanded, className: 'ps-focus-ring flex w-full flex-wrap items-center gap-x-3 gap-y-2 bg-mist/60 px-4 py-3 text-left transition-colors hover:bg-mist', onClick: onToggle, type: 'button', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('h-4 w-4 shrink-0 text-ink/50 transition-transform duration-200', isExpanded ? '' : '-rotate-90'), iconKey: ps_icons_1.PsIconKey.Chevron }), (0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-semibold text-ink', children: label }), (0, jsx_runtime_1.jsx)("span", { className: 'rounded-full bg-surface px-2 py-0.5 text-xs font-semibold tabular-nums text-ink/60', children: count }), summary ? ((0, jsx_runtime_1.jsx)("span", { className: 'ml-auto flex flex-wrap items-center justify-end gap-2', children: summary })) : null] }));
+const PsTableGroupHeader = ({ count, isExpanded, label, onToggle, summary, }) => ((0, jsx_runtime_1.jsxs)("button", { "aria-expanded": isExpanded, className: 'ps-focus-ring flex w-full flex-wrap items-center gap-x-3 gap-y-2 bg-mist/60 px-4 py-3 text-left transition-colors hover:bg-mist', onClick: onToggle, type: 'button', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('h-4 w-4 shrink-0 text-ink/50 transition-transform duration-200', isExpanded ? '' : '-rotate-90'), iconKey: ps_icons_1.PsIconKey.Chevron }), (0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-semibold text-ink', children: label }), (0, jsx_runtime_1.jsx)("span", { className: 'rounded-ps-control bg-surface px-2 py-0.5 text-xs font-semibold tabular-nums text-ink/60', children: count }), summary ? ((0, jsx_runtime_1.jsx)("span", { className: 'ml-auto flex flex-wrap items-center justify-end gap-2', children: summary })) : null] }));
 exports.PsTableGroupHeader = PsTableGroupHeader;

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTablePagination = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_table_control_classes_1 = require("../constants/ps-table-control-classes");
 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 ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": 'Pagination', className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/55', children: totalRows === 0
                     ? 'No rows'
-                    : `${firstRow}–${lastRow} of ${totalRows}${isPartial ? '+' : ''}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [(0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), (0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page >=
+                    : `${firstRow}–${lastRow} of ${totalRows}${isPartial ? '+' : ''}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [(0, jsx_runtime_1.jsx)("button", { className: ps_table_control_classes_1.PsTableControlClasses.paginationButton, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), (0, jsx_runtime_1.jsx)("button", { className: ps_table_control_classes_1.PsTableControlClasses.paginationButton, disabled: page >=
                             (loadedPageCount === undefined ? pageCount : Math.min(loadedPageCount, pageCount)), onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
 };
 exports.PsTablePagination = PsTablePagination;

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

@@ -6,24 +6,37 @@ const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const use_ps_table_reorder_1 = require("../hooks/use-ps-table-reorder");
+const ps_table_reorder_service_1 = require("../services/ps-table-reorder-service");
 const ps_table_sortable_row_1 = require("./ps-table-sortable-row");
 const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
-    const { activeId, activeRunId, contextProps, placements } = (0, use_ps_table_reorder_1.usePsTableReorder)(input);
+    const { activeId, activeRunId, contextProps, drop, placements } = (0, use_ps_table_reorder_1.usePsTableReorder)(input);
     const itemById = new Map(input.items.map((item) => [item.id, item]));
+    const { nesting } = input;
     const api = {
         isActive: true,
         Row: ps_table_sortable_row_1.PsTableSortableRow,
         rowProps: (rowId) => {
             const item = itemById.get(rowId);
             const placement = placements.get(rowId);
+            if (nesting !== undefined)
+                return {
+                    dropPlacement: drop !== null && drop.overId === rowId ? drop.placement : null,
+                    handleLabel: item === undefined ? '' : item.handleLabel,
+                    hasHandle: item !== undefined && input.enabled && nesting.canDrag(rowId),
+                    isDisabled: !input.enabled,
+                    isDropTarget: item !== undefined,
+                    rowId,
+                };
             return {
+                dropPlacement: null,
                 handleLabel: item === undefined ? '' : item.handleLabel,
                 hasHandle: item !== undefined && input.enabled && placement !== undefined && placement.size > 1,
                 isDisabled: activeRunId !== null && (placement === undefined || placement.runId !== activeRunId),
+                isDropTarget: false,
                 rowId,
             };
         },
-        run: (runId, ids, runChildren) => ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: ids, strategy: sortable_1.verticalListSortingStrategy, children: runChildren }, runId)),
+        run: (runId, ids, runChildren) => ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: ids, strategy: nesting === undefined ? sortable_1.verticalListSortingStrategy : ps_table_reorder_service_1.PsTableReorderService.still, children: runChildren }, runId)),
     };
     return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { ...contextProps, children: [children(api), (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragOverlay, { className: ps_core_components_1.PsDragClasses.lifted, frames: ps_core_components_1.PsDragListLiftFrames, children: activeId === null ? null : renderOverlay(activeId) })] }));
 };

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

@@ -4,5 +4,5 @@ exports.PsTableReorderHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsTableReorderHandle = ({ activatorRef, className, label, ...buttonProps }) => ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, "aria-label": label, className: ps_design_system_1.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: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) }));
+const PsTableReorderHandle = ({ activatorRef, className, label, ...buttonProps }) => ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, "aria-label": label, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring ps-touch-target relative flex h-7 w-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control 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: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) }));
 exports.PsTableReorderHandle = PsTableReorderHandle;

package/dist/components/ps-table-sort-header.js

@@ -11,8 +11,8 @@ const PsTableSortHeader = ({ align, columnId, label, onSort, sort, }) => {
         : sort.direction === 'ascending'
             ? ps_icons_1.PsIconKey.SortAscending
             : ps_icons_1.PsIconKey.SortDescending;
-    return ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring group inline-flex items-center gap-1 rounded-md uppercase tracking-[0.18em] transition-colors hover:text-ink', align === 'right' ? 'flex-row-reverse' : '', isSorted ? 'text-ink' : ''), onClick: () => onSort(columnId), type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { children: label }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('block h-3.5 w-3.5 shrink-0', isSorted
+    return ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring group inline-flex items-center gap-1 rounded-ps-control uppercase tracking-[0.18em] transition-colors hover:text-ink', align === 'right' ? 'flex-row-reverse' : '', isSorted ? 'text-ink' : ''), onClick: () => onSort(columnId), type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { children: label }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('block h-3.5 w-3.5 shrink-0', isSorted
                     ? 'text-primary'
-                    : 'opacity-0 group-hover:opacity-60 group-focus-visible:opacity-60'), iconKey: iconKey })] }));
+                    : 'opacity-0 group-hover:opacity-60 group-focus-visible:opacity-60 [@media(hover:none)]:opacity-40'), iconKey: iconKey })] }));
 };
 exports.PsTableSortHeader = PsTableSortHeader;

package/dist/components/ps-table-sortable-row.d.ts

@@ -1,9 +1,13 @@
 import type { ComponentProps } from 'react';
+import type { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
 export interface PsTableSortableRowProps extends Omit<ComponentProps<'tr'>, 'ref'> {
+    dropPlacement?: PsTableDropPlacement | null;
+    handleCellClassName?: string;
     handleLabel: string;
     hasHandle: boolean;
     isDisabled: boolean;
+    isDropTarget?: boolean;
     measureRef?: (element: HTMLTableRowElement | null) => void;
     rowId: string;
 }
-export declare const PsTableSortableRow: ({ children, className, handleLabel, hasHandle, isDisabled, measureRef, rowId, style, ...rowProps }: PsTableSortableRowProps) => import("react").JSX.Element;
+export declare const PsTableSortableRow: ({ children, className, dropPlacement, handleCellClassName, handleLabel, hasHandle, isDisabled, isDropTarget, measureRef, rowId, style, ...rowProps }: PsTableSortableRowProps) => import("react").JSX.Element;

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

@@ -5,10 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_table_drop_classes_1 = require("../constants/ps-table-drop-classes");
 const ps_table_reorder_handle_1 = require("./ps-table-reorder-handle");
-const PsTableSortableRow = ({ children, className, handleLabel, hasHandle, isDisabled, measureRef, rowId, style, ...rowProps }) => {
-    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ disabled: isDisabled || !hasHandle, id: rowId });
-    return ((0, jsx_runtime_1.jsxs)("tr", { ...rowProps, className: className, ref: (element) => {
+const PsTableSortableRow = ({ children, className, dropPlacement = null, handleCellClassName, handleLabel, hasHandle, isDisabled, isDropTarget = false, measureRef, rowId, style, ...rowProps }) => {
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({
+        disabled: {
+            draggable: isDisabled || !hasHandle,
+            droppable: isDisabled || (!hasHandle && !isDropTarget),
+        },
+        id: rowId,
+    });
+    return ((0, jsx_runtime_1.jsxs)("tr", { ...rowProps, className: ps_design_system_1.PallasoftClassNameService.merge(className, dropPlacement === null ? '' : ps_table_drop_classes_1.PsTableDropClasses[dropPlacement]), ref: (element) => {
             setNodeRef(element);
             if (measureRef)
                 measureRef(element);
@@ -17,6 +25,6 @@ const PsTableSortableRow = ({ children, className, handleLabel, hasHandle, isDis
             opacity: isDragging ? ps_core_components_1.PsDragConfig.placeholderOpacity : style?.opacity,
             transform: utilities_1.CSS.Translate.toString(transform),
             transition,
-        }, children: [(0, jsx_runtime_1.jsx)("td", { className: 'w-9 pl-3 pr-0', onClick: (event) => event.stopPropagation(), children: hasHandle ? ((0, jsx_runtime_1.jsx)(ps_table_reorder_handle_1.PsTableReorderHandle, { ...attributes, ...listeners, activatorRef: setActivatorNodeRef, label: handleLabel })) : null }), children] }));
+        }, children: [(0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', handleCellClassName), onClick: (event) => event.stopPropagation(), children: hasHandle ? ((0, jsx_runtime_1.jsx)(ps_table_reorder_handle_1.PsTableReorderHandle, { ...attributes, ...listeners, activatorRef: setActivatorNodeRef, label: handleLabel })) : null }), children] }));
 };
 exports.PsTableSortableRow = PsTableSortableRow;

package/dist/components/ps-table-toolbar.js

@@ -6,13 +6,13 @@ const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
 const react_aria_components_1 = require("react-aria-components");
+const ps_table_control_classes_1 = require("../constants/ps-table-control-classes");
 const ps_table_query_service_1 = require("../services/ps-table-query-service");
 const ps_table_filter_field_1 = require("./ps-table-filter-field");
-const toolbarButtonClassName = 'ps-input-control ps-control-trigger ps-focus-ring ps-control ps-control-padding inline-flex min-w-11 items-center justify-center gap-2 rounded-ps-control text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40';
 const PsTableToolbar = ({ actions, columns, filters, isSearchable, onClearFilters, onFilterChange, onSearchChange, rows, search, searchPlaceholder, }) => {
     const filterableColumns = columns.filter((column) => column.filter);
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const activeCount = filterableColumns.filter((column) => ps_table_query_service_1.PsTableQueryService.isActive(filters[column.id])).length;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? ((0, jsx_runtime_1.jsxs)("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring ps-control rounded-ps-control pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'ps-scrollbar-hidden flex w-full min-w-0 flex-1 items-center gap-2 overflow-x-auto sm:w-auto', children: [filterableColumns.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: toolbarButtonClassName, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Filter }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: (0, jsx_runtime_1.jsxs)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => ((0, jsx_runtime_1.jsx)(ps_table_filter_field_1.PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: ps_table_query_service_1.PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end border-t border-line pt-3', children: (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring rounded-lg px-2 py-1 text-sm font-semibold text-ink/65 hover:text-ink disabled:opacity-40', disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring rounded-full px-3 py-2 text-sm font-semibold text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? (0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex shrink-0 items-center gap-2', children: actions }) : null] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? ((0, jsx_runtime_1.jsxs)("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring ps-control rounded-ps-control pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'ps-scrollbar-hidden flex w-full min-w-0 flex-1 items-center gap-2 overflow-x-auto sm:w-auto', children: [filterableColumns.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_table_control_classes_1.PsTableControlClasses.toolbarButton, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Filter }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: (0, jsx_runtime_1.jsxs)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => ((0, jsx_runtime_1.jsx)(ps_table_filter_field_1.PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: ps_table_query_service_1.PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end border-t border-line pt-3', children: (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'text-ink/65 hover:text-ink disabled:opacity-40'), disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? (0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex shrink-0 items-center gap-2', children: actions }) : null] })] }));
 };
 exports.PsTableToolbar = PsTableToolbar;

package/dist/constants/ps-table-control-classes.d.ts

@@ -0,0 +1,9 @@
+export declare const PsTableControlClasses: {
+    readonly bulkAction: "ps-focus-ring ps-control-compact ps-control-padding-compact inline-flex shrink-0 items-center whitespace-nowrap rounded-ps-control text-sm font-semibold transition-colors disabled:opacity-40";
+    readonly bulkBar: "ps-control-large flex items-center gap-2 rounded-ps-control border border-primary/30 bg-primary/10 py-1 pl-1 pr-1";
+    readonly bulkCount: "ps-control-compact ps-control-padding-compact inline-flex shrink-0 items-center rounded-ps-control bg-primary text-sm font-semibold tabular-nums text-white";
+    readonly iconButton: "ps-focus-ring ps-control-square ps-control-compact inline-flex shrink-0 items-center justify-center rounded-ps-control text-ink/60 transition-colors hover:bg-ink/5 hover:text-ink";
+    readonly paginationButton: "ps-focus-ring ps-control-compact ps-control-padding-compact inline-flex items-center rounded-ps-control border border-ps-control border-line text-sm font-semibold text-ink transition-colors disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40";
+    readonly textButton: "ps-focus-ring ps-control-compact ps-control-padding-compact inline-flex items-center rounded-ps-control text-sm font-semibold";
+    readonly toolbarButton: "ps-input-control ps-control-trigger ps-focus-ring ps-control ps-control-padding inline-flex min-w-ps-control items-center justify-center gap-2 rounded-ps-control text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40";
+};

package/dist/constants/ps-table-control-classes.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableControlClasses = void 0;
+exports.PsTableControlClasses = {
+    bulkAction: 'ps-focus-ring ps-control-compact ps-control-padding-compact inline-flex shrink-0 items-center whitespace-nowrap rounded-ps-control text-sm font-semibold transition-colors disabled:opacity-40',
+    bulkBar: 'ps-control-large flex items-center gap-2 rounded-ps-control border border-primary/30 bg-primary/10 py-1 pl-1 pr-1',
+    bulkCount: 'ps-control-compact ps-control-padding-compact inline-flex shrink-0 items-center rounded-ps-control bg-primary text-sm font-semibold tabular-nums text-white',
+    iconButton: 'ps-focus-ring ps-control-square ps-control-compact inline-flex shrink-0 items-center justify-center rounded-ps-control text-ink/60 transition-colors hover:bg-ink/5 hover:text-ink',
+    paginationButton: 'ps-focus-ring ps-control-compact ps-control-padding-compact inline-flex items-center rounded-ps-control border border-ps-control border-line text-sm font-semibold text-ink transition-colors disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40',
+    textButton: 'ps-focus-ring ps-control-compact ps-control-padding-compact inline-flex items-center rounded-ps-control text-sm font-semibold',
+    toolbarButton: 'ps-input-control ps-control-trigger ps-focus-ring ps-control ps-control-padding inline-flex min-w-ps-control items-center justify-center gap-2 rounded-ps-control text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40',
+};

package/dist/constants/ps-table-drop-classes.d.ts

@@ -0,0 +1,2 @@
+import { PsTableDropPlacement } from './ps-table-drop-placement';
+export declare const PsTableDropClasses: Record<PsTableDropPlacement, string>;

package/dist/constants/ps-table-drop-classes.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableDropClasses = void 0;
+exports.PsTableDropClasses = {
+    after: '[&>td]:shadow-[inset_0_-2px_0_0_rgb(var(--ps-color-primary-rgb))]',
+    before: '[&>td]:shadow-[inset_0_2px_0_0_rgb(var(--ps-color-primary-rgb))]',
+    into: 'bg-primary/10 [&>td]:shadow-[inset_0_0_0_2px_rgb(var(--ps-color-primary-rgb)/0.5)]',
+};

package/dist/constants/ps-table-drop-placement.d.ts

@@ -0,0 +1,6 @@
+export declare const PsTableDropPlacement: {
+    readonly after: "after";
+    readonly before: "before";
+    readonly into: "into";
+};
+export type PsTableDropPlacement = (typeof PsTableDropPlacement)[keyof typeof PsTableDropPlacement];

package/dist/constants/ps-table-drop-placement.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableDropPlacement = void 0;
+exports.PsTableDropPlacement = {
+    after: 'after',
+    before: 'before',
+    into: 'into',
+};

package/dist/constants/ps-table-pin-classes.d.ts

@@ -0,0 +1,16 @@
+export declare const PsTablePinClasses: {
+    readonly cell: "ps-table-pin";
+    readonly edge: "ps-table-pin-start-edge";
+    readonly end: "ps-table-pin ps-table-pin-end right-0";
+    readonly first: {
+        readonly both: "left-[4.75rem]";
+        readonly none: "left-0";
+        readonly reorder: "left-9";
+        readonly select: "left-10";
+    };
+    readonly reorder: "left-0";
+    readonly select: {
+        readonly alone: "left-0";
+        readonly withReorder: "left-9";
+    };
+};

package/dist/constants/ps-table-pin-classes.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTablePinClasses = void 0;
+exports.PsTablePinClasses = {
+    cell: 'ps-table-pin',
+    edge: 'ps-table-pin-start-edge',
+    end: 'ps-table-pin ps-table-pin-end right-0',
+    first: {
+        both: 'left-[4.75rem]',
+        none: 'left-0',
+        reorder: 'left-9',
+        select: 'left-10',
+    },
+    reorder: 'left-0',
+    select: {
+        alone: 'left-0',
+        withReorder: 'left-9',
+    },
+};

package/dist/constants/table-breakpoint.d.ts

@@ -0,0 +1,7 @@
+export declare const PsTableBreakpoint: {
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly xl: "xl";
+};
+export type PsTableBreakpoint = (typeof PsTableBreakpoint)[keyof typeof PsTableBreakpoint];
+export declare const PsTableHideBelowClasses: Record<PsTableBreakpoint, string>;

package/dist/constants/table-breakpoint.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableHideBelowClasses = exports.PsTableBreakpoint = void 0;
+exports.PsTableBreakpoint = {
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl',
+};
+exports.PsTableHideBelowClasses = {
+    md: 'hidden md:table-cell',
+    lg: 'hidden lg:table-cell',
+    xl: 'hidden xl:table-cell',
+};