@pallasoft/ps-table-components 1.23.0 → 1.25.0

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

@@ -74,9 +74,9 @@ const densityClassNames = {
         head: 'px-5 py-3.5',
     },
 };
-const columnStyle = (column) => ({
-    maxWidth: ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column),
-    minWidth: ps_table_column_size_service_1.PsTableColumnSizeService.minWidthOf(column),
+const columnStyle = (column, fittedMinWidth) => ({
+    maxWidth: column.measure === undefined ? ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column) : undefined,
+    minWidth: fittedMinWidth === undefined ? ps_table_column_size_service_1.PsTableColumnSizeService.minWidthOf(column) : fittedMinWidth,
     width: column.width,
 });
 const alignClassNames = {
@@ -95,6 +95,9 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
     const currentQuery = query ? query : uncontrolledQuery;
     const { filters, hiddenColumnIds, search, sort } = currentQuery;
     const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
+    const fittedWidths = (0, react_1.useMemo)(() => new Map(columns
+        .filter((column) => column.measure !== undefined)
+        .map((column) => [column.id, ps_table_column_size_service_1.PsTableColumnSizeService.fittedMinWidthOf(column, rows)])), [columns, rows]);
     const updateQuery = (patch) => {
         const next = { ...currentQuery, ...patch };
         if (!query)
@@ -198,6 +201,15 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                 const target = find(targetId);
                 return (active !== undefined && target !== undefined && nesting.canDrop(active, target, placement));
             },
+            getBlockedReason: nesting.getBlockedReason === undefined
+                ? undefined
+                : (activeId, targetId) => {
+                    const active = find(activeId);
+                    const target = find(targetId);
+                    return active !== undefined && target !== undefined && nesting.getBlockedReason
+                        ? nesting.getBlockedReason(active, target)
+                        : null;
+                },
             onMove: (activeId, targetId, placement) => {
                 const active = find(activeId);
                 const target = find(targetId);
@@ -323,10 +335,11 @@ 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: 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
+                        : 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', column.measure === undefined &&
+                                ((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));
+                                : '', 'text-sm text-ink'), style: columnStyle(column, fittedWidths.get(column.id)), 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) => 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))))
@@ -355,7 +368,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                                         ? sort.direction
                                                         : column.sortValue && isQueryable
                                                             ? 'none'
-                                                            : 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));
+                                                            : undefined, className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], placementOf(column, columnIndex), 'whitespace-nowrap'), scope: 'col', style: columnStyle(column, fittedWidths.get(column.id)), 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);

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

@@ -9,7 +9,7 @@ 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, drop, placements } = (0, use_ps_table_reorder_1.usePsTableReorder)(input);
+    const { activeId, activeRunId, blockedReason, 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 = {
@@ -38,6 +38,6 @@ const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
         },
         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) })] }));
+    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { ...contextProps, children: [children(api), blockedReason === null ? null : ((0, jsx_runtime_1.jsx)("p", { className: 'pointer-events-none fixed bottom-6 left-1/2 z-50 max-w-sm -translate-x-1/2 rounded-ps-control bg-ink px-3 py-2 text-sm text-white shadow-lg', role: 'status', children: blockedReason })), (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) })] }));
 };
 exports.PsTableReorderFrame = PsTableReorderFrame;

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

@@ -38,9 +38,9 @@ const densityClassNames = {
         head: 'px-5 py-3.5',
     },
 };
-const columnStyle = (column) => ({
-    maxWidth: PsTableColumnSizeService.maxWidthOf(column),
-    minWidth: PsTableColumnSizeService.minWidthOf(column),
+const columnStyle = (column, fittedMinWidth) => ({
+    maxWidth: column.measure === undefined ? PsTableColumnSizeService.maxWidthOf(column) : undefined,
+    minWidth: fittedMinWidth === undefined ? PsTableColumnSizeService.minWidthOf(column) : fittedMinWidth,
     width: column.width,
 });
 const alignClassNames = {
@@ -59,6 +59,9 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     const currentQuery = query ? query : uncontrolledQuery;
     const { filters, hiddenColumnIds, search, sort } = currentQuery;
     const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
+    const fittedWidths = useMemo(() => new Map(columns
+        .filter((column) => column.measure !== undefined)
+        .map((column) => [column.id, PsTableColumnSizeService.fittedMinWidthOf(column, rows)])), [columns, rows]);
     const updateQuery = (patch) => {
         const next = { ...currentQuery, ...patch };
         if (!query)
@@ -162,6 +165,15 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                 const target = find(targetId);
                 return (active !== undefined && target !== undefined && nesting.canDrop(active, target, placement));
             },
+            getBlockedReason: nesting.getBlockedReason === undefined
+                ? undefined
+                : (activeId, targetId) => {
+                    const active = find(activeId);
+                    const target = find(targetId);
+                    return active !== undefined && target !== undefined && nesting.getBlockedReason
+                        ? nesting.getBlockedReason(active, target)
+                        : null;
+                },
             onMove: (activeId, targetId, placement) => {
                 const active = find(activeId);
                 const target = find(targetId);
@@ -287,10 +299,11 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                         }
                         : undefined, style: motion && motion.delayMs !== undefined
                         ? { animationDelay: `${motion.delayMs}ms` }
-                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? (_jsx("td", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder) })) : null, isSelectable ? (_jsx("td", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), 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, columnIndex) => (_jsx("td", { className: 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) ||
-                                PsTableColumnSizeService.maxWidthOf(column) !== undefined
+                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? (_jsx("td", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder) })) : null, isSelectable ? (_jsx("td", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), 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, columnIndex) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', column.measure === undefined &&
+                                ((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));
+                                : '', 'text-sm text-ink'), style: columnStyle(column, fittedWidths.get(column.id)), 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) => 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))))
@@ -319,7 +332,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                                                         ? sort.direction
                                                         : column.sortValue && isQueryable
                                                             ? 'none'
-                                                            : undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], placementOf(column, columnIndex), '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));
+                                                            : undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], placementOf(column, columnIndex), 'whitespace-nowrap'), scope: 'col', style: columnStyle(column, fittedWidths.get(column.id)), 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 && 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: PallasoftClassNameService.merge(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);

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

@@ -6,7 +6,7 @@ import { usePsTableReorder } from '../hooks/use-ps-table-reorder';
 import { PsTableReorderService } from '../services/ps-table-reorder-service';
 import { PsTableSortableRow } from './ps-table-sortable-row';
 export const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
-    const { activeId, activeRunId, contextProps, drop, placements } = usePsTableReorder(input);
+    const { activeId, activeRunId, blockedReason, contextProps, drop, placements } = usePsTableReorder(input);
     const itemById = new Map(input.items.map((item) => [item.id, item]));
     const { nesting } = input;
     const api = {
@@ -35,5 +35,5 @@ export const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
         },
         run: (runId, ids, runChildren) => (_jsx(SortableContext, { items: ids, strategy: nesting === undefined ? verticalListSortingStrategy : PsTableReorderService.still, children: runChildren }, runId)),
     };
-    return (_jsxs(DndContext, { ...contextProps, children: [children(api), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragListLiftFrames, children: activeId === null ? null : renderOverlay(activeId) })] }));
+    return (_jsxs(DndContext, { ...contextProps, children: [children(api), blockedReason === null ? null : (_jsx("p", { className: 'pointer-events-none fixed bottom-6 left-1/2 z-50 max-w-sm -translate-x-1/2 rounded-ps-control bg-ink px-3 py-2 text-sm text-white shadow-lg', role: 'status', children: blockedReason })), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragListLiftFrames, children: activeId === null ? null : renderOverlay(activeId) })] }));
 };

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

@@ -10,6 +10,7 @@ const pointerThenCenter = (args) => {
 export const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, nesting, onReorder, }) => {
     const [activeId, setActiveId] = useState(null);
     const [drop, setDrop] = useState(null);
+    const [blockedReason, setBlockedReason] = useState(null);
     const dropRef = useRef(null);
     const sensors = usePsDragSensors();
     const runs = useMemo(() => enabled
@@ -85,6 +86,10 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
     const handleDragMove = (event) => {
         const next = resolveDrop(event);
         dropRef.current = next;
+        const blocked = next === null && nesting !== undefined && nesting.getBlockedReason && event.over !== null
+            ? nesting.getBlockedReason(String(event.active.id), String(event.over.id))
+            : null;
+        setBlockedReason(blocked);
         setDrop((current) => current !== null &&
             next !== null &&
             current.overId === next.overId &&
@@ -97,6 +102,7 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
         const target = resolveDrop(event);
         setActiveId(null);
         setDrop(null);
+        setBlockedReason(null);
         dropRef.current = null;
         if (nesting !== undefined) {
             if (target !== null)
@@ -116,6 +122,7 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
     };
     return {
         activeId,
+        blockedReason,
         activeRunId: activePlacement === undefined ? null : activePlacement.runId,
         contextProps: {
             accessibility: { announcements, screenReaderInstructions: { draggable: instructions } },
@@ -124,6 +131,7 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
             onDragCancel: () => {
                 setActiveId(null);
                 setDrop(null);
+                setBlockedReason(null);
                 dropRef.current = null;
             },
             onDragEnd: handleDragEnd,

package/dist/esm/services/ps-table-column-size-service.js

@@ -1,6 +1,13 @@
 import { PsTableColumnMaxWidths, PsTableColumnSize, PsTableColumnWidths, } from '../constants/table-column-size';
 import { PsTableFilterKind } from '../constants/table-filter-kind';
 export class PsTableColumnSizeService {
+    static fittedMinWidthOf(column, rows) {
+        const measure = column.measure;
+        if (measure === undefined)
+            return undefined;
+        const longest = rows.reduce((length, row) => Math.max(length, measure(row).length), 0);
+        return `max(${PsTableColumnSizeService.minWidthOf(column)}, calc(${(longest * 1.1).toFixed(1)}ch + 3rem))`;
+    }
     static sizeOf(column) {
         if (column.size !== undefined)
             return column.size;

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

@@ -16,6 +16,7 @@ export interface PsTableReorderState {
     activeId: string | null;
     activeRunId: string | null;
     contextProps: Omit<DndContextProps, 'children'>;
+    blockedReason: string | null;
     drop: PsTableDrop | null;
     placements: Map<string, PsTableReorderPlacement>;
 }

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

@@ -13,6 +13,7 @@ const pointerThenCenter = (args) => {
 const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, nesting, onReorder, }) => {
     const [activeId, setActiveId] = (0, react_1.useState)(null);
     const [drop, setDrop] = (0, react_1.useState)(null);
+    const [blockedReason, setBlockedReason] = (0, react_1.useState)(null);
     const dropRef = (0, react_1.useRef)(null);
     const sensors = (0, ps_core_components_1.usePsDragSensors)();
     const runs = (0, react_1.useMemo)(() => enabled
@@ -88,6 +89,10 @@ const usePsTableReorder = ({ announcements: texts, enabled, instructions, items,
     const handleDragMove = (event) => {
         const next = resolveDrop(event);
         dropRef.current = next;
+        const blocked = next === null && nesting !== undefined && nesting.getBlockedReason && event.over !== null
+            ? nesting.getBlockedReason(String(event.active.id), String(event.over.id))
+            : null;
+        setBlockedReason(blocked);
         setDrop((current) => current !== null &&
             next !== null &&
             current.overId === next.overId &&
@@ -100,6 +105,7 @@ const usePsTableReorder = ({ announcements: texts, enabled, instructions, items,
         const target = resolveDrop(event);
         setActiveId(null);
         setDrop(null);
+        setBlockedReason(null);
         dropRef.current = null;
         if (nesting !== undefined) {
             if (target !== null)
@@ -119,6 +125,7 @@ const usePsTableReorder = ({ announcements: texts, enabled, instructions, items,
     };
     return {
         activeId,
+        blockedReason,
         activeRunId: activePlacement === undefined ? null : activePlacement.runId,
         contextProps: {
             accessibility: { announcements, screenReaderInstructions: { draggable: instructions } },
@@ -127,6 +134,7 @@ const usePsTableReorder = ({ announcements: texts, enabled, instructions, items,
             onDragCancel: () => {
                 setActiveId(null);
                 setDrop(null);
+                setBlockedReason(null);
                 dropRef.current = null;
             },
             onDragEnd: handleDragEnd,

package/dist/interfaces/table-column.d.ts

@@ -14,6 +14,8 @@ export interface PsTableColumn<RowData> {
     hideOnCards?: boolean;
     id: string;
     label: string;
+    /** Formatted text of the cell (for example the money string). The column is widened to fit the longest value, so numbers never truncate. */
+    measure?: (row: RowData) => string;
     minWidth?: string;
     pinEnd?: boolean;
     render: (row: RowData) => ReactNode;

package/dist/interfaces/table-reorder-nesting-binding.d.ts

@@ -3,6 +3,7 @@ import type { PsTableNestingAnnouncements } from './table-nesting-announcements'
 export interface PsTableReorderNestingBinding {
     announcements: PsTableNestingAnnouncements;
     canDrag: (id: string) => boolean;
+    getBlockedReason?: (activeId: string, targetId: string) => string | null;
     canDrop: (activeId: string, targetId: string, placement: PsTableDropPlacement) => boolean;
     onMove: (activeId: string, targetId: string, placement: PsTableDropPlacement) => void;
 }

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

@@ -3,6 +3,7 @@ import type { PsTableNestingAnnouncements } from './table-nesting-announcements'
 export interface PsTableReorderNesting<RowData> {
     announcements: PsTableNestingAnnouncements;
     canDrag: (row: RowData) => boolean;
+    getBlockedReason?: (active: RowData, target: RowData) => string | null;
     canDrop: (active: RowData, target: RowData, placement: PsTableDropPlacement) => boolean;
     onMove: (active: RowData, target: RowData, placement: PsTableDropPlacement) => void;
 }

package/dist/services/ps-table-column-size-service.d.ts

@@ -1,6 +1,7 @@
 import { PsTableColumnSize } from '../constants/table-column-size';
 import type { PsTableColumn } from '../interfaces/table-column';
 export declare class PsTableColumnSizeService {
+    static fittedMinWidthOf<RowData>(column: PsTableColumn<RowData>, rows: RowData[]): string | undefined;
     static sizeOf<RowData>(column: PsTableColumn<RowData>): PsTableColumnSize;
     static minWidthOf<RowData>(column: PsTableColumn<RowData>): string;
     static maxWidthOf<RowData>(column: PsTableColumn<RowData>): string | undefined;

package/dist/services/ps-table-column-size-service.js

@@ -4,6 +4,13 @@ exports.PsTableColumnSizeService = void 0;
 const table_column_size_1 = require("../constants/table-column-size");
 const table_filter_kind_1 = require("../constants/table-filter-kind");
 class PsTableColumnSizeService {
+    static fittedMinWidthOf(column, rows) {
+        const measure = column.measure;
+        if (measure === undefined)
+            return undefined;
+        const longest = rows.reduce((length, row) => Math.max(length, measure(row).length), 0);
+        return `max(${PsTableColumnSizeService.minWidthOf(column)}, calc(${(longest * 1.1).toFixed(1)}ch + 3rem))`;
+    }
     static sizeOf(column) {
         if (column.size !== undefined)
             return column.size;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.23.0",
+	"version": "1.25.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",