@pallasoft/ps-table-components 1.22.2 → 1.23.0

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PsDragGrip } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsTableReorderHandle = ({ activatorRef, className, label, ...buttonProps }) => (_jsx("button", { ...buttonProps, "aria-label": label, className: PallasoftClassNameService.merge('ps-focus-ring flex h-7 w-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-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: _jsx(PsDragGrip, {}) }));
+export const PsTableReorderHandle = ({ activatorRef, className, label, ...buttonProps }) => (_jsx("button", { ...buttonProps, "aria-label": label, className: 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: _jsx(PsDragGrip, {}) }));

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

@@ -10,5 +10,5 @@ export const PsTableSortHeader = ({ align, columnId, label, onSort, sort, }) =>
             : PsIconKey.SortDescending;
     return (_jsxs("button", { className: 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: [_jsx("span", { children: label }), _jsx(PsIcon, { "aria-hidden": 'true', className: 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 })] }));
 };

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

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

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

@@ -0,0 +1,5 @@
+export const 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/esm/constants/ps-table-drop-placement.js

@@ -0,0 +1,5 @@
+export const PsTableDropPlacement = {
+    after: 'after',
+    before: 'before',
+    into: 'into',
+};

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

@@ -0,0 +1,16 @@
+export const 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/esm/constants/table-breakpoint.js

@@ -0,0 +1,10 @@
+export const PsTableBreakpoint = {
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl',
+};
+export const PsTableHideBelowClasses = {
+    md: 'hidden md:table-cell',
+    lg: 'hidden lg:table-cell',
+    xl: 'hidden xl:table-cell',
+};

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

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PsTableOverflowService } from '../services/ps-table-overflow-service';
+export const usePsTableOverflow = (layoutKey) => {
+    const ref = useRef(null);
+    const [edges, setEdges] = useState(PsTableOverflowService.none);
+    const update = useCallback(() => {
+        const element = ref.current;
+        if (element === null)
+            return;
+        const next = PsTableOverflowService.edges(element.scrollLeft, element.clientWidth, element.scrollWidth);
+        setEdges((current) => (PsTableOverflowService.isSame(current, next) ? current : next));
+    }, []);
+    useEffect(() => {
+        update();
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [layoutKey, update]);
+    return { edges, ref, update };
+};

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

@@ -1,9 +1,16 @@
-import { useMemo, useState } from 'react';
-import { closestCenter, } from '@dnd-kit/core';
+import { useMemo, useRef, useState } from 'react';
+import { closestCenter, pointerWithin, } from '@dnd-kit/core';
 import { usePsDragSensors } from '@pallasoft/ps-core-components';
+import { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
 import { PsTableReorderService } from '../services/ps-table-reorder-service';
-export const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, onReorder, }) => {
+const pointerThenCenter = (args) => {
+    const within = pointerWithin(args);
+    return within.length > 0 ? within : closestCenter(args);
+};
+export const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, nesting, onReorder, }) => {
     const [activeId, setActiveId] = useState(null);
+    const [drop, setDrop] = useState(null);
+    const dropRef = useRef(null);
     const sensors = usePsDragSensors();
     const runs = useMemo(() => enabled
         ? PsTableReorderService.runs(items, (item) => item.groupKey, (item) => item.id)
@@ -11,6 +18,7 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
     const placements = useMemo(() => PsTableReorderService.placements(runs, (item) => item.id), [runs]);
     const activePlacement = activeId === null ? undefined : placements.get(activeId);
     const itemById = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const indexById = useMemo(() => new Map(items.map((item, index) => [item.id, index])), [items]);
     const labelOf = (id) => {
         const item = itemById.get(id);
         return item === undefined ? id : item.label;
@@ -23,23 +31,83 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
         const placement = placements.get(id);
         return placement === undefined ? 0 : placement.size;
     };
+    const edgeFor = (activeKey, overId) => {
+        const activeIndex = indexById.get(activeKey);
+        const overIndex = indexById.get(overId);
+        return activeIndex !== undefined && overIndex !== undefined && activeIndex < overIndex
+            ? PsTableDropPlacement.after
+            : PsTableDropPlacement.before;
+    };
+    const resolveDrop = (event) => {
+        if (nesting === undefined || event.over === null || event.over.id === event.active.id)
+            return null;
+        const activeKey = String(event.active.id);
+        const overId = String(event.over.id);
+        const placement = PsTableReorderService.dropPlacement(PsTableReorderService.pointerY(event.activatorEvent, event.delta.y), event.over.rect, edgeFor(activeKey, overId), (candidate) => nesting.canDrop(activeKey, overId, candidate));
+        return placement === null ? null : { overId, placement };
+    };
+    const announcedDrop = (activeKey, overId) => {
+        if (nesting === undefined)
+            return null;
+        const known = dropRef.current;
+        if (known !== null && known.overId === overId)
+            return known;
+        const placement = edgeFor(activeKey, overId);
+        return nesting.canDrop(activeKey, overId, placement) ? { overId, placement } : null;
+    };
+    const describeDrop = (active, target) => nesting === undefined
+        ? undefined
+        : nesting.announcements[target.placement](labelOf(active), labelOf(target.overId));
     const announcements = {
         onDragCancel: ({ active }) => texts.cancelled(labelOf(String(active.id))),
-        onDragEnd: ({ active, over }) => over === null
-            ? texts.cancelled(labelOf(String(active.id)))
-            : texts.dropped(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id))),
-        onDragOver: ({ active, over }) => over === null
-            ? undefined
-            : texts.moved(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id))),
+        onDragEnd: ({ active, over }) => {
+            if (nesting !== undefined) {
+                const target = over === null ? null : announcedDrop(String(active.id), String(over.id));
+                return target === null
+                    ? texts.cancelled(labelOf(String(active.id)))
+                    : describeDrop(String(active.id), target);
+            }
+            return over === null
+                ? texts.cancelled(labelOf(String(active.id)))
+                : texts.dropped(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id)));
+        },
+        onDragOver: ({ active, over }) => {
+            if (over === null)
+                return undefined;
+            if (nesting !== undefined) {
+                const target = announcedDrop(String(active.id), String(over.id));
+                return target === null ? undefined : describeDrop(String(active.id), target);
+            }
+            return texts.moved(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id)));
+        },
         onDragStart: ({ active }) => texts.lifted(labelOf(String(active.id)), positionOf(String(active.id)), countOf(String(active.id))),
     };
-    const handleDragEnd = ({ active, over }) => {
+    const handleDragMove = (event) => {
+        const next = resolveDrop(event);
+        dropRef.current = next;
+        setDrop((current) => current !== null &&
+            next !== null &&
+            current.overId === next.overId &&
+            current.placement === next.placement
+            ? current
+            : next);
+    };
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        const target = resolveDrop(event);
         setActiveId(null);
-        if (over === null || active.id === over.id)
+        setDrop(null);
+        dropRef.current = null;
+        if (nesting !== undefined) {
+            if (target !== null)
+                nesting.onMove(String(active.id), target.overId, target.placement);
+            return;
+        }
+        if (over === null || active.id === over.id || onReorder === undefined)
             return;
         const placement = placements.get(String(active.id));
-        const target = placements.get(String(over.id));
-        if (placement === undefined || target === undefined || placement.runId !== target.runId)
+        const sibling = placements.get(String(over.id));
+        if (placement === undefined || sibling === undefined || placement.runId !== sibling.runId)
             return;
         const run = runs.find((candidate) => candidate.id === placement.runId);
         if (run === undefined)
@@ -51,13 +119,19 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
         activeRunId: activePlacement === undefined ? null : activePlacement.runId,
         contextProps: {
             accessibility: { announcements, screenReaderInstructions: { draggable: instructions } },
-            collisionDetection: closestCenter,
+            collisionDetection: nesting === undefined ? closestCenter : pointerThenCenter,
             modifiers: [PsTableReorderService.lockToVerticalAxis],
-            onDragCancel: () => setActiveId(null),
+            onDragCancel: () => {
+                setActiveId(null);
+                setDrop(null);
+                dropRef.current = null;
+            },
             onDragEnd: handleDragEnd,
+            onDragMove: nesting === undefined ? undefined : handleDragMove,
             onDragStart: ({ active }) => setActiveId(String(active.id)),
             sensors,
         },
+        drop,
         placements,
     };
 };

package/dist/esm/index.js

@@ -3,7 +3,9 @@ export * from './components/ps-streamed-rows';
 export * from './components/ps-table-stream-status';
 export * from './components/ps-table-group-header';
 export * from './components/ps-table-pagination';
+export * from './constants/table-breakpoint';
 export * from './constants/table-card-role';
+export * from './constants/ps-table-pin-classes';
 export * from './constants/table-column-size';
 export * from './constants/table-filter-kind';
 export * from './interfaces/table-column';
@@ -27,6 +29,11 @@ export * from './services/ps-table-group-service';
 export * from './services/ps-table-query-service';
 export * from './services/ps-table-search-service';
 export * from './services/ps-table-scroll-service';
+export * from './services/ps-table-pin-service';
+export * from './services/ps-table-overflow-service';
+export * from './hooks/use-ps-table-overflow';
+export * from './interfaces/table-pin-classes';
+export * from './interfaces/table-overflow-edges';
 export * from './services/ps-table-stream-service';
 export * from './components/ps-table-export-button';
 export * from './constants/ps-table-download-config';
@@ -36,4 +43,7 @@ export * from './hooks/use-ps-table-page';
 export * from './interfaces/ps-table-page-state';
 export * from './interfaces/table-reorder';
 export * from './interfaces/table-reorder-announcements';
+export * from './interfaces/table-reorder-nesting';
+export * from './interfaces/table-nesting-announcements';
+export * from './constants/ps-table-drop-placement';
 export * from './services/ps-table-reorder-service';

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

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

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

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

package/dist/esm/interfaces/table-overflow-edges.js

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

package/dist/esm/interfaces/table-pin-classes.js

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+export class PsTableOverflowService {
+    static edges(scrollLeft, clientWidth, scrollWidth) {
+        const start = Math.abs(scrollLeft) > 0.5;
+        const end = scrollWidth - clientWidth - Math.abs(scrollLeft) > 0.5;
+        return { end, start };
+    }
+    static isSame(current, next) {
+        return current.end === next.end && current.start === next.start;
+    }
+}
+PsTableOverflowService.none = { end: false, start: false };

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

@@ -0,0 +1,22 @@
+import { PsTablePinClasses } from '../constants/ps-table-pin-classes';
+export class PsTablePinService {
+    static leading(isPinned, hasReorder, isSelectable) {
+        if (!isPinned)
+            return { first: '', reorder: '', select: '' };
+        const firstOffset = hasReorder && isSelectable
+            ? PsTablePinClasses.first.both
+            : hasReorder
+                ? PsTablePinClasses.first.reorder
+                : isSelectable
+                    ? PsTablePinClasses.first.select
+                    : PsTablePinClasses.first.none;
+        return {
+            first: `${PsTablePinClasses.cell} ${PsTablePinClasses.edge} ${firstOffset}`,
+            reorder: `${PsTablePinClasses.cell} ${PsTablePinClasses.reorder}`,
+            select: `${PsTablePinClasses.cell} ${hasReorder ? PsTablePinClasses.select.withReorder : PsTablePinClasses.select.alone}`,
+        };
+    }
+    static end(isPinned) {
+        return isPinned ? PsTablePinClasses.end : '';
+    }
+}

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

@@ -1,3 +1,4 @@
+import { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
 export class PsTableReorderService {
     static runs(items, getKey, getId) {
         const runs = [];
@@ -32,11 +33,47 @@ export class PsTableReorderService {
         next.splice(to, 0, moved);
         return next;
     }
+    static pointerY(event, deltaY) {
+        if (event instanceof MouseEvent)
+            return event.clientY + deltaY;
+        if (typeof TouchEvent !== 'undefined' &&
+            event instanceof TouchEvent &&
+            event.touches.length > 0)
+            return event.touches[0].clientY + deltaY;
+        return null;
+    }
+    static dropPlacement(pointerY, rect, fallback, isAllowed) {
+        const allowed = PsTableReorderService.candidates(pointerY, rect, fallback).find(isAllowed);
+        return allowed === undefined ? null : allowed;
+    }
+    static candidates(pointerY, rect, fallback) {
+        if (pointerY === null || rect.height <= 0)
+            return [fallback];
+        const ratio = (pointerY - rect.top) / rect.height;
+        if (ratio < PsTableReorderService.edgeRatio)
+            return [PsTableDropPlacement.before, PsTableDropPlacement.into];
+        if (ratio > 1 - PsTableReorderService.edgeRatio)
+            return [PsTableDropPlacement.after, PsTableDropPlacement.into];
+        return [
+            PsTableDropPlacement.into,
+            ratio < 0.5 ? PsTableDropPlacement.before : PsTableDropPlacement.after,
+        ];
+    }
 }
+PsTableReorderService.edgeRatio = 0.25;
+PsTableReorderService.treeKey = 'tree';
 PsTableReorderService.plain = {
     Row: 'tr',
     isActive: false,
-    rowProps: (rowId) => ({ handleLabel: '', hasHandle: false, isDisabled: true, rowId }),
+    rowProps: (rowId) => ({
+        dropPlacement: null,
+        handleLabel: '',
+        hasHandle: false,
+        isDisabled: true,
+        isDropTarget: false,
+        rowId,
+    }),
     run: (_runId, _ids, children) => children,
 };
+PsTableReorderService.still = () => null;
 PsTableReorderService.lockToVerticalAxis = ({ transform }) => ({ ...transform, x: 0 });

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

@@ -0,0 +1,6 @@
+import type { PsTableOverflowEdges } from '../interfaces/table-overflow-edges';
+export declare const usePsTableOverflow: (layoutKey: string) => {
+    edges: PsTableOverflowEdges;
+    ref: import("react").RefObject<HTMLDivElement>;
+    update: () => void;
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsTableOverflow = void 0;
+const react_1 = require("react");
+const ps_table_overflow_service_1 = require("../services/ps-table-overflow-service");
+const usePsTableOverflow = (layoutKey) => {
+    const ref = (0, react_1.useRef)(null);
+    const [edges, setEdges] = (0, react_1.useState)(ps_table_overflow_service_1.PsTableOverflowService.none);
+    const update = (0, react_1.useCallback)(() => {
+        const element = ref.current;
+        if (element === null)
+            return;
+        const next = ps_table_overflow_service_1.PsTableOverflowService.edges(element.scrollLeft, element.clientWidth, element.scrollWidth);
+        setEdges((current) => (ps_table_overflow_service_1.PsTableOverflowService.isSame(current, next) ? current : next));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        update();
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [layoutKey, update]);
+    return { edges, ref, update };
+};
+exports.usePsTableOverflow = usePsTableOverflow;

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

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

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

@@ -4,9 +4,16 @@ exports.usePsTableReorder = void 0;
 const react_1 = require("react");
 const core_1 = require("@dnd-kit/core");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_table_drop_placement_1 = require("../constants/ps-table-drop-placement");
 const ps_table_reorder_service_1 = require("../services/ps-table-reorder-service");
-const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, onReorder, }) => {
+const pointerThenCenter = (args) => {
+    const within = (0, core_1.pointerWithin)(args);
+    return within.length > 0 ? within : (0, core_1.closestCenter)(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 dropRef = (0, react_1.useRef)(null);
     const sensors = (0, ps_core_components_1.usePsDragSensors)();
     const runs = (0, react_1.useMemo)(() => enabled
         ? ps_table_reorder_service_1.PsTableReorderService.runs(items, (item) => item.groupKey, (item) => item.id)
@@ -14,6 +21,7 @@ const usePsTableReorder = ({ announcements: texts, enabled, instructions, items,
     const placements = (0, react_1.useMemo)(() => ps_table_reorder_service_1.PsTableReorderService.placements(runs, (item) => item.id), [runs]);
     const activePlacement = activeId === null ? undefined : placements.get(activeId);
     const itemById = (0, react_1.useMemo)(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const indexById = (0, react_1.useMemo)(() => new Map(items.map((item, index) => [item.id, index])), [items]);
     const labelOf = (id) => {
         const item = itemById.get(id);
         return item === undefined ? id : item.label;
@@ -26,23 +34,83 @@ const usePsTableReorder = ({ announcements: texts, enabled, instructions, items,
         const placement = placements.get(id);
         return placement === undefined ? 0 : placement.size;
     };
+    const edgeFor = (activeKey, overId) => {
+        const activeIndex = indexById.get(activeKey);
+        const overIndex = indexById.get(overId);
+        return activeIndex !== undefined && overIndex !== undefined && activeIndex < overIndex
+            ? ps_table_drop_placement_1.PsTableDropPlacement.after
+            : ps_table_drop_placement_1.PsTableDropPlacement.before;
+    };
+    const resolveDrop = (event) => {
+        if (nesting === undefined || event.over === null || event.over.id === event.active.id)
+            return null;
+        const activeKey = String(event.active.id);
+        const overId = String(event.over.id);
+        const placement = ps_table_reorder_service_1.PsTableReorderService.dropPlacement(ps_table_reorder_service_1.PsTableReorderService.pointerY(event.activatorEvent, event.delta.y), event.over.rect, edgeFor(activeKey, overId), (candidate) => nesting.canDrop(activeKey, overId, candidate));
+        return placement === null ? null : { overId, placement };
+    };
+    const announcedDrop = (activeKey, overId) => {
+        if (nesting === undefined)
+            return null;
+        const known = dropRef.current;
+        if (known !== null && known.overId === overId)
+            return known;
+        const placement = edgeFor(activeKey, overId);
+        return nesting.canDrop(activeKey, overId, placement) ? { overId, placement } : null;
+    };
+    const describeDrop = (active, target) => nesting === undefined
+        ? undefined
+        : nesting.announcements[target.placement](labelOf(active), labelOf(target.overId));
     const announcements = {
         onDragCancel: ({ active }) => texts.cancelled(labelOf(String(active.id))),
-        onDragEnd: ({ active, over }) => over === null
-            ? texts.cancelled(labelOf(String(active.id)))
-            : texts.dropped(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id))),
-        onDragOver: ({ active, over }) => over === null
-            ? undefined
-            : texts.moved(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id))),
+        onDragEnd: ({ active, over }) => {
+            if (nesting !== undefined) {
+                const target = over === null ? null : announcedDrop(String(active.id), String(over.id));
+                return target === null
+                    ? texts.cancelled(labelOf(String(active.id)))
+                    : describeDrop(String(active.id), target);
+            }
+            return over === null
+                ? texts.cancelled(labelOf(String(active.id)))
+                : texts.dropped(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id)));
+        },
+        onDragOver: ({ active, over }) => {
+            if (over === null)
+                return undefined;
+            if (nesting !== undefined) {
+                const target = announcedDrop(String(active.id), String(over.id));
+                return target === null ? undefined : describeDrop(String(active.id), target);
+            }
+            return texts.moved(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id)));
+        },
         onDragStart: ({ active }) => texts.lifted(labelOf(String(active.id)), positionOf(String(active.id)), countOf(String(active.id))),
     };
-    const handleDragEnd = ({ active, over }) => {
+    const handleDragMove = (event) => {
+        const next = resolveDrop(event);
+        dropRef.current = next;
+        setDrop((current) => current !== null &&
+            next !== null &&
+            current.overId === next.overId &&
+            current.placement === next.placement
+            ? current
+            : next);
+    };
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        const target = resolveDrop(event);
         setActiveId(null);
-        if (over === null || active.id === over.id)
+        setDrop(null);
+        dropRef.current = null;
+        if (nesting !== undefined) {
+            if (target !== null)
+                nesting.onMove(String(active.id), target.overId, target.placement);
+            return;
+        }
+        if (over === null || active.id === over.id || onReorder === undefined)
             return;
         const placement = placements.get(String(active.id));
-        const target = placements.get(String(over.id));
-        if (placement === undefined || target === undefined || placement.runId !== target.runId)
+        const sibling = placements.get(String(over.id));
+        if (placement === undefined || sibling === undefined || placement.runId !== sibling.runId)
             return;
         const run = runs.find((candidate) => candidate.id === placement.runId);
         if (run === undefined)
@@ -54,13 +122,19 @@ const usePsTableReorder = ({ announcements: texts, enabled, instructions, items,
         activeRunId: activePlacement === undefined ? null : activePlacement.runId,
         contextProps: {
             accessibility: { announcements, screenReaderInstructions: { draggable: instructions } },
-            collisionDetection: core_1.closestCenter,
+            collisionDetection: nesting === undefined ? core_1.closestCenter : pointerThenCenter,
             modifiers: [ps_table_reorder_service_1.PsTableReorderService.lockToVerticalAxis],
-            onDragCancel: () => setActiveId(null),
+            onDragCancel: () => {
+                setActiveId(null);
+                setDrop(null);
+                dropRef.current = null;
+            },
             onDragEnd: handleDragEnd,
+            onDragMove: nesting === undefined ? undefined : handleDragMove,
             onDragStart: ({ active }) => setActiveId(String(active.id)),
             sensors,
         },
+        drop,
         placements,
     };
 };

package/dist/index.d.ts

@@ -3,7 +3,9 @@ export * from './components/ps-streamed-rows';
 export * from './components/ps-table-stream-status';
 export * from './components/ps-table-group-header';
 export * from './components/ps-table-pagination';
+export * from './constants/table-breakpoint';
 export * from './constants/table-card-role';
+export * from './constants/ps-table-pin-classes';
 export * from './constants/table-column-size';
 export * from './constants/table-filter-kind';
 export * from './interfaces/table-column';
@@ -27,6 +29,11 @@ export * from './services/ps-table-group-service';
 export * from './services/ps-table-query-service';
 export * from './services/ps-table-search-service';
 export * from './services/ps-table-scroll-service';
+export * from './services/ps-table-pin-service';
+export * from './services/ps-table-overflow-service';
+export * from './hooks/use-ps-table-overflow';
+export * from './interfaces/table-pin-classes';
+export * from './interfaces/table-overflow-edges';
 export * from './services/ps-table-stream-service';
 export * from './components/ps-table-export-button';
 export * from './constants/ps-table-download-config';
@@ -36,4 +43,7 @@ export * from './hooks/use-ps-table-page';
 export * from './interfaces/ps-table-page-state';
 export * from './interfaces/table-reorder';
 export * from './interfaces/table-reorder-announcements';
+export * from './interfaces/table-reorder-nesting';
+export * from './interfaces/table-nesting-announcements';
+export * from './constants/ps-table-drop-placement';
 export * from './services/ps-table-reorder-service';