@pallasoft/ps-table-components 1.24.0 → 1.25.0

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

@@ -201,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);

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

@@ -165,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);

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/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-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/package.json

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