@pallasoft/ps-table-components 1.22.2 → 1.23.0

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,12 @@ export interface PsTableColumn<RowData> {
     cardRole?: PsTableCardRole;
     filter?: PsTableColumnFilter<RowData>;
     footer?: ReactNode;
+    hideBelow?: PsTableBreakpoint;
     hideOnCards?: boolean;
     id: string;
     label: 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-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.23.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",