@pallasoft/ps-table-components 1.22.2 → 1.24.0

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';

package/dist/index.js

@@ -19,7 +19,9 @@ __exportStar(require("./components/ps-streamed-rows"), exports);
 __exportStar(require("./components/ps-table-stream-status"), exports);
 __exportStar(require("./components/ps-table-group-header"), exports);
 __exportStar(require("./components/ps-table-pagination"), exports);
+__exportStar(require("./constants/table-breakpoint"), exports);
 __exportStar(require("./constants/table-card-role"), exports);
+__exportStar(require("./constants/ps-table-pin-classes"), exports);
 __exportStar(require("./constants/table-column-size"), exports);
 __exportStar(require("./constants/table-filter-kind"), exports);
 __exportStar(require("./interfaces/table-column"), exports);
@@ -43,6 +45,11 @@ __exportStar(require("./services/ps-table-group-service"), exports);
 __exportStar(require("./services/ps-table-query-service"), exports);
 __exportStar(require("./services/ps-table-search-service"), exports);
 __exportStar(require("./services/ps-table-scroll-service"), exports);
+__exportStar(require("./services/ps-table-pin-service"), exports);
+__exportStar(require("./services/ps-table-overflow-service"), exports);
+__exportStar(require("./hooks/use-ps-table-overflow"), exports);
+__exportStar(require("./interfaces/table-pin-classes"), exports);
+__exportStar(require("./interfaces/table-overflow-edges"), exports);
 __exportStar(require("./services/ps-table-stream-service"), exports);
 __exportStar(require("./components/ps-table-export-button"), exports);
 __exportStar(require("./constants/ps-table-download-config"), exports);
@@ -52,4 +59,7 @@ __exportStar(require("./hooks/use-ps-table-page"), exports);
 __exportStar(require("./interfaces/ps-table-page-state"), exports);
 __exportStar(require("./interfaces/table-reorder"), exports);
 __exportStar(require("./interfaces/table-reorder-announcements"), exports);
+__exportStar(require("./interfaces/table-reorder-nesting"), exports);
+__exportStar(require("./interfaces/table-nesting-announcements"), exports);
+__exportStar(require("./constants/ps-table-drop-placement"), exports);
 __exportStar(require("./services/ps-table-reorder-service"), exports);

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { PsTableBreakpoint } from '../constants/table-breakpoint';
 import type { PsTableCardRole } from '../constants/table-card-role';
 import type { PsTableColumnSize } from '../constants/table-column-size';
 import type { PsTableColumnFilter } from './table-column-filter';
@@ -9,10 +10,14 @@ export interface PsTableColumn<RowData> {
     cardRole?: PsTableCardRole;
     filter?: PsTableColumnFilter<RowData>;
     footer?: ReactNode;
+    hideBelow?: PsTableBreakpoint;
     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;
     size?: PsTableColumnSize;
     sortValue?: (row: RowData) => string | number | null;

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

@@ -0,0 +1,5 @@
+import type { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
+export interface PsTableDrop {
+    overId: string;
+    placement: PsTableDropPlacement;
+}

package/dist/interfaces/table-drop.js

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

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

@@ -0,0 +1,5 @@
+export interface PsTableNestingAnnouncements {
+    after: (rowLabel: string, targetLabel: string) => string;
+    before: (rowLabel: string, targetLabel: string) => string;
+    into: (rowLabel: string, targetLabel: string) => string;
+}

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

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

package/dist/interfaces/table-overflow-edges.d.ts

@@ -0,0 +1,4 @@
+export interface PsTableOverflowEdges {
+    end: boolean;
+    start: boolean;
+}

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

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

package/dist/interfaces/table-pin-classes.d.ts

@@ -0,0 +1,5 @@
+export interface PsTableLeadingPinClasses {
+    first: string;
+    reorder: string;
+    select: string;
+}

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

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

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

@@ -0,0 +1,8 @@
+import type { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
+import type { PsTableNestingAnnouncements } from './table-nesting-announcements';
+export interface PsTableReorderNestingBinding {
+    announcements: PsTableNestingAnnouncements;
+    canDrag: (id: string) => boolean;
+    canDrop: (activeId: string, targetId: string, placement: PsTableDropPlacement) => boolean;
+    onMove: (activeId: string, targetId: string, placement: PsTableDropPlacement) => void;
+}

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

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

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

@@ -0,0 +1,8 @@
+import type { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
+import type { PsTableNestingAnnouncements } from './table-nesting-announcements';
+export interface PsTableReorderNesting<RowData> {
+    announcements: PsTableNestingAnnouncements;
+    canDrag: (row: RowData) => boolean;
+    canDrop: (active: RowData, target: RowData, placement: PsTableDropPlacement) => boolean;
+    onMove: (active: RowData, target: RowData, placement: PsTableDropPlacement) => void;
+}

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

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

package/dist/interfaces/table-reorder-row-props.d.ts

@@ -1,6 +1,9 @@
+import type { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
 export interface PsTableReorderRowProps {
+    dropPlacement: PsTableDropPlacement | null;
     handleLabel: string;
     hasHandle: boolean;
     isDisabled: boolean;
+    isDropTarget: boolean;
     rowId: string;
 }

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

@@ -1,4 +1,5 @@
 import type { PsTableReorderAnnouncements } from './table-reorder-announcements';
+import type { PsTableReorderNesting } from './table-reorder-nesting';
 export interface PsTableReorder<RowData> {
     announcements: PsTableReorderAnnouncements;
     cardsReason?: string;
@@ -6,7 +7,8 @@ export interface PsTableReorder<RowData> {
     disabledReason?: string;
     enabled: boolean;
     getHandleLabel: (rowLabel: string) => string;
-    groupKey: (row: RowData) => string;
+    groupKey?: (row: RowData) => string;
     instructions: string;
-    onReorder: (groupKey: string, orderedIds: string[]) => void;
+    nesting?: PsTableReorderNesting<RowData>;
+    onReorder?: (groupKey: string, orderedIds: string[]) => 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/dist/services/ps-table-overflow-service.d.ts

@@ -0,0 +1,6 @@
+import type { PsTableOverflowEdges } from '../interfaces/table-overflow-edges';
+export declare class PsTableOverflowService {
+    static readonly none: PsTableOverflowEdges;
+    static edges(scrollLeft: number, clientWidth: number, scrollWidth: number): PsTableOverflowEdges;
+    static isSame(current: PsTableOverflowEdges, next: PsTableOverflowEdges): boolean;
+}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableOverflowService = void 0;
+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;
+    }
+}
+exports.PsTableOverflowService = PsTableOverflowService;
+PsTableOverflowService.none = { end: false, start: false };

package/dist/services/ps-table-pin-service.d.ts

@@ -0,0 +1,5 @@
+import type { PsTableLeadingPinClasses } from '../interfaces/table-pin-classes';
+export declare class PsTablePinService {
+    static leading(isPinned: boolean, hasReorder: boolean, isSelectable: boolean): PsTableLeadingPinClasses;
+    static end(isPinned: boolean): string;
+}

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTablePinService = void 0;
+const ps_table_pin_classes_1 = require("../constants/ps-table-pin-classes");
+class PsTablePinService {
+    static leading(isPinned, hasReorder, isSelectable) {
+        if (!isPinned)
+            return { first: '', reorder: '', select: '' };
+        const firstOffset = hasReorder && isSelectable
+            ? ps_table_pin_classes_1.PsTablePinClasses.first.both
+            : hasReorder
+                ? ps_table_pin_classes_1.PsTablePinClasses.first.reorder
+                : isSelectable
+                    ? ps_table_pin_classes_1.PsTablePinClasses.first.select
+                    : ps_table_pin_classes_1.PsTablePinClasses.first.none;
+        return {
+            first: `${ps_table_pin_classes_1.PsTablePinClasses.cell} ${ps_table_pin_classes_1.PsTablePinClasses.edge} ${firstOffset}`,
+            reorder: `${ps_table_pin_classes_1.PsTablePinClasses.cell} ${ps_table_pin_classes_1.PsTablePinClasses.reorder}`,
+            select: `${ps_table_pin_classes_1.PsTablePinClasses.cell} ${hasReorder ? ps_table_pin_classes_1.PsTablePinClasses.select.withReorder : ps_table_pin_classes_1.PsTablePinClasses.select.alone}`,
+        };
+    }
+    static end(isPinned) {
+        return isPinned ? ps_table_pin_classes_1.PsTablePinClasses.end : '';
+    }
+}
+exports.PsTablePinService = PsTablePinService;

package/dist/services/ps-table-reorder-service.d.ts

@@ -1,11 +1,22 @@
 import type { Modifier } from '@dnd-kit/core';
+import type { SortingStrategy } from '@dnd-kit/sortable';
+import { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
 import type { PsTableReorderApi } from '../interfaces/table-reorder-api';
 import type { PsTableReorderPlacement } from '../interfaces/table-reorder-placement';
 import type { PsTableReorderRun } from '../interfaces/table-reorder-run';
 export declare class PsTableReorderService {
+    static readonly edgeRatio = 0.25;
+    static readonly treeKey = "tree";
     static readonly plain: PsTableReorderApi;
     static runs<Item>(items: Item[], getKey: (item: Item) => string, getId: (item: Item) => string): PsTableReorderRun<Item>[];
     static placements<Item>(runs: PsTableReorderRun<Item>[], getId: (item: Item) => string): Map<string, PsTableReorderPlacement>;
     static move(ids: string[], activeId: string, overId: string): string[];
+    static pointerY(event: Event | null, deltaY: number): number | null;
+    static dropPlacement(pointerY: number | null, rect: {
+        height: number;
+        top: number;
+    }, fallback: PsTableDropPlacement, isAllowed: (placement: PsTableDropPlacement) => boolean): PsTableDropPlacement | null;
+    private static candidates;
+    static readonly still: SortingStrategy;
     static readonly lockToVerticalAxis: Modifier;
 }

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTableReorderService = void 0;
+const ps_table_drop_placement_1 = require("../constants/ps-table-drop-placement");
 class PsTableReorderService {
     static runs(items, getKey, getId) {
         const runs = [];
@@ -35,12 +36,48 @@ 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 [ps_table_drop_placement_1.PsTableDropPlacement.before, ps_table_drop_placement_1.PsTableDropPlacement.into];
+        if (ratio > 1 - PsTableReorderService.edgeRatio)
+            return [ps_table_drop_placement_1.PsTableDropPlacement.after, ps_table_drop_placement_1.PsTableDropPlacement.into];
+        return [
+            ps_table_drop_placement_1.PsTableDropPlacement.into,
+            ratio < 0.5 ? ps_table_drop_placement_1.PsTableDropPlacement.before : ps_table_drop_placement_1.PsTableDropPlacement.after,
+        ];
+    }
 }
 exports.PsTableReorderService = PsTableReorderService;
+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/package.json

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