@pallasoft/ps-table-components 1.28.0 → 1.28.2

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

@@ -99,7 +99,7 @@ const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPag
     const [seenClearKey, setSeenClearKey] = (0, react_1.useState)(clearSelectionKey);
     const stickyRegionRef = (0, react_1.useRef)(null);
     const stickySentinelRef = (0, react_1.useRef)(null);
-    const stickyBackdropRef = (0, react_1.useRef)(null);
+    const stickyCardRef = (0, react_1.useRef)(null);
     const stickyHeadRef = (0, react_1.useRef)(null);
     const currentQuery = query ? query : uncontrolledQuery;
     if (seenClearKey !== clearSelectionKey) {
@@ -129,7 +129,7 @@ const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPag
     const placementOf = (column, columnIndex) => ps_design_system_1.PallasoftClassNameService.merge(column.hideBelow === undefined ? '' : table_breakpoint_1.PsTableHideBelowClasses[column.hideBelow], columnIndex === 0 ? pins.first : '', ps_table_pin_service_1.PsTablePinService.end(column.pinEnd === true));
     const overflow = (0, use_ps_table_overflow_1.usePsTableOverflow)(`${visibleColumns.map((column) => column.id).join(',')}:${rows.length}`);
     const isStuck = (0, use_ps_sticky_head_1.usePsStickyHead)({
-        backdropRef: stickyBackdropRef,
+        cardRef: stickyCardRef,
         headRef: stickyHeadRef,
         layoutKey: `${visibleColumns.map((column) => column.id).join(',')}:${rows.length}:${isLoading}`,
         regionRef: stickyRegionRef,
@@ -396,7 +396,7 @@ const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPag
                     updateQuery({ search: next });
                     resetPage();
                 }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, banner] }));
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [stickyTop === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [stickyLeading, topContent] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: '-mb-3 h-0', ref: stickySentinelRef }), (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('sticky z-sticky flex flex-col gap-3', stickyClassName), "data-stuck": isStuck, ref: stickyRegionRef, style: { top: stickyTop }, children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass-strong pointer-events-none absolute -inset-x-3 -bottom-3 rounded-b-ps-card border-t-0 transition-opacity duration-150', isStuck ? 'opacity-100' : 'opacity-0'), ref: stickyBackdropRef, style: { top: `calc(-1 * ${stickyTop})` } }), (0, jsx_runtime_1.jsxs)("div", { className: 'relative flex flex-col gap-3', children: [stickyLeading, topContent] })] })] })), (0, jsx_runtime_1.jsxs)("div", { "aria-busy": isRefreshing, className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [showsPagination &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [stickyTop === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [stickyLeading, topContent] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: '-mb-3 h-0', ref: stickySentinelRef }), (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('sticky z-sticky flex flex-col gap-3', stickyClassName), "data-stuck": isStuck, ref: stickyRegionRef, style: { top: stickyTop }, children: [stickyLeading, topContent] })] })), (0, jsx_runtime_1.jsxs)("div", { "aria-busy": isRefreshing, className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', ref: stickyCardRef, children: [showsPagination &&
                         paginationPosition !== ps_table_pagination_position_1.PsTablePaginationPosition.bottom &&
                         rowCount > ps_table_pagination_config_1.PsTablePaginationConfig.topMinRows
                         ? renderPagination('border-b border-t-0')

package/dist/constants/ps-table-sticky-config.d.ts

@@ -0,0 +1,4 @@
+export declare const PsTableStickyConfig: {
+    readonly cardGapPx: 12;
+    readonly cardRadius: "1.25rem";
+};

package/dist/constants/ps-table-sticky-config.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableStickyConfig = void 0;
+exports.PsTableStickyConfig = {
+    cardGapPx: 12,
+    cardRadius: '1.25rem',
+};

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

@@ -63,7 +63,7 @@ export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cu
     const [seenClearKey, setSeenClearKey] = useState(clearSelectionKey);
     const stickyRegionRef = useRef(null);
     const stickySentinelRef = useRef(null);
-    const stickyBackdropRef = useRef(null);
+    const stickyCardRef = useRef(null);
     const stickyHeadRef = useRef(null);
     const currentQuery = query ? query : uncontrolledQuery;
     if (seenClearKey !== clearSelectionKey) {
@@ -93,7 +93,7 @@ export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cu
     const placementOf = (column, columnIndex) => PallasoftClassNameService.merge(column.hideBelow === undefined ? '' : PsTableHideBelowClasses[column.hideBelow], columnIndex === 0 ? pins.first : '', PsTablePinService.end(column.pinEnd === true));
     const overflow = usePsTableOverflow(`${visibleColumns.map((column) => column.id).join(',')}:${rows.length}`);
     const isStuck = usePsStickyHead({
-        backdropRef: stickyBackdropRef,
+        cardRef: stickyCardRef,
         headRef: stickyHeadRef,
         layoutKey: `${visibleColumns.map((column) => column.id).join(',')}:${rows.length}:${isLoading}`,
         regionRef: stickyRegionRef,
@@ -360,7 +360,7 @@ export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cu
                     updateQuery({ search: next });
                     resetPage();
                 }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, banner] }));
-    return (_jsxs("div", { ref: containerRef, className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [stickyTop === undefined ? (_jsxs(_Fragment, { children: [stickyLeading, topContent] })) : (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: '-mb-3 h-0', ref: stickySentinelRef }), _jsxs("div", { className: PallasoftClassNameService.merge('sticky z-sticky flex flex-col gap-3', stickyClassName), "data-stuck": isStuck, ref: stickyRegionRef, style: { top: stickyTop }, children: [_jsx("div", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('ps-glass-strong pointer-events-none absolute -inset-x-3 -bottom-3 rounded-b-ps-card border-t-0 transition-opacity duration-150', isStuck ? 'opacity-100' : 'opacity-0'), ref: stickyBackdropRef, style: { top: `calc(-1 * ${stickyTop})` } }), _jsxs("div", { className: 'relative flex flex-col gap-3', children: [stickyLeading, topContent] })] })] })), _jsxs("div", { "aria-busy": isRefreshing, className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [showsPagination &&
+    return (_jsxs("div", { ref: containerRef, className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [stickyTop === undefined ? (_jsxs(_Fragment, { children: [stickyLeading, topContent] })) : (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: '-mb-3 h-0', ref: stickySentinelRef }), _jsxs("div", { className: PallasoftClassNameService.merge('sticky z-sticky flex flex-col gap-3', stickyClassName), "data-stuck": isStuck, ref: stickyRegionRef, style: { top: stickyTop }, children: [stickyLeading, topContent] })] })), _jsxs("div", { "aria-busy": isRefreshing, className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', ref: stickyCardRef, children: [showsPagination &&
                         paginationPosition !== PsTablePaginationPosition.bottom &&
                         rowCount > PsTablePaginationConfig.topMinRows
                         ? renderPagination('border-b border-t-0')

package/dist/esm/constants/ps-table-sticky-config.js

@@ -0,0 +1,4 @@
+export const PsTableStickyConfig = {
+    cardGapPx: 12,
+    cardRadius: '1.25rem',
+};

package/dist/esm/hooks/use-ps-sticky-head.js

@@ -1,49 +1,56 @@
 import { useLayoutEffect, useState } from 'react';
+import { PsTableStickyConfig } from '../constants/ps-table-sticky-config';
 import { PsTableScrollService } from '../services/ps-table-scroll-service';
 import { PsTableStickyHeadService } from '../services/ps-table-sticky-head-service';
-export const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }) => {
+export const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }) => {
     const [isStuck, setIsStuck] = useState(false);
     useLayoutEffect(() => {
         const region = regionRef.current;
         const sentinel = sentinelRef.current;
-        const backdrop = backdropRef.current;
+        const card = cardRef.current;
         const head = headRef.current;
         const table = head === null ? null : head.parentElement;
         if (stickyTop === undefined ||
             region === null ||
             sentinel === null ||
-            backdrop === null ||
+            card === null ||
             head === null ||
             table === null)
             return;
         const scroller = PsTableScrollService.parent(region);
         const Timeline = window.ScrollTimeline;
         const isDriven = scroller !== null && Timeline !== undefined;
-        let animation = null;
+        let animations = [];
         let frame = 0;
-        const maxShift = () => Math.max(table.offsetHeight - head.offsetHeight, 0);
+        const headTravel = () => Math.max(table.offsetHeight - head.offsetHeight, 0);
         const drive = () => {
             if (scroller === null || Timeline === undefined)
                 return;
-            const scrollerTop = scroller.getBoundingClientRect().top;
-            const regionTop = region.getBoundingClientRect().top;
-            const pinnedBottom = scrollerTop +
+            const pinnedLine = scroller.getBoundingClientRect().top +
                 Number.parseFloat(getComputedStyle(region).top) +
-                backdrop.getBoundingClientRect().bottom -
-                regionTop;
-            const pinScroll = table.getBoundingClientRect().top + scroller.scrollTop - pinnedBottom;
-            const keyframes = PsTableStickyHeadService.keyframes(pinScroll, maxShift(), scroller.scrollHeight - scroller.clientHeight);
-            if (animation !== null)
-                animation.cancel();
-            animation =
-                keyframes.length === 0
-                    ? null
-                    : head.animate(keyframes.map((keyframe) => ({
-                        offset: keyframe.offset,
-                        transform: `translateY(${keyframe.shift}px)`,
-                    })), { fill: 'both', timeline: new Timeline({ axis: 'block', source: scroller }) });
+                region.offsetHeight +
+                PsTableStickyConfig.cardGapPx;
+            const scrollRange = scroller.scrollHeight - scroller.clientHeight;
+            const timeline = new Timeline({ axis: 'block', source: scroller });
+            const headFrames = PsTableStickyHeadService.keyframes(table.getBoundingClientRect().top + scroller.scrollTop - pinnedLine, headTravel(), scrollRange);
+            const cardFrames = PsTableStickyHeadService.keyframes(card.getBoundingClientRect().top + scroller.scrollTop - pinnedLine, card.offsetHeight, scrollRange);
+            animations.forEach((animation) => animation.cancel());
+            animations = [
+                head.animate(headFrames.map((keyframe) => ({
+                    offset: keyframe.offset,
+                    transform: `translateY(${keyframe.shift}px)`,
+                })), { fill: 'both', timeline }),
+                card.animate(cardFrames.map((keyframe) => ({
+                    clipPath: PsTableStickyHeadService.clip(keyframe.shift),
+                    offset: keyframe.offset,
+                })), { fill: 'both', timeline }),
+            ];
+        };
+        const follow = () => {
+            const pinnedLine = region.getBoundingClientRect().bottom + PsTableStickyConfig.cardGapPx;
+            head.style.transform = `translateY(${PsTableStickyHeadService.offset(pinnedLine, table.getBoundingClientRect().top, table.offsetHeight, head.offsetHeight)}px)`;
+            card.style.clipPath = PsTableStickyHeadService.clip(PsTableStickyHeadService.offset(pinnedLine, card.getBoundingClientRect().top, card.offsetHeight, 0));
         };
-        const follow = () => (head.style.transform = `translateY(${PsTableStickyHeadService.offset(backdrop.getBoundingClientRect().bottom, table.getBoundingClientRect().top, table.offsetHeight, head.offsetHeight)}px)`);
         const check = () => {
             frame = 0;
             setIsStuck(sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1);
@@ -62,21 +69,21 @@ export const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, se
         const observer = new ResizeObserver(measure);
         measure();
         observer.observe(region);
-        observer.observe(table);
+        observer.observe(card);
         if (scroller !== null)
             Array.from(scroller.children).forEach((child) => observer.observe(child));
         window.addEventListener('scroll', schedule, { capture: true, passive: true });
         window.addEventListener('resize', measure);
         return () => {
             observer.disconnect();
-            if (animation !== null)
-                animation.cancel();
+            animations.forEach((animation) => animation.cancel());
             head.style.transform = '';
+            card.style.clipPath = '';
             window.removeEventListener('scroll', schedule, { capture: true });
             window.removeEventListener('resize', measure);
             if (frame !== 0)
                 window.cancelAnimationFrame(frame);
         };
-    }, [backdropRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop]);
+    }, [cardRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop]);
     return isStuck;
 };

package/dist/esm/services/ps-table-sticky-head-service.js

@@ -1,3 +1,4 @@
+import { PsTableStickyConfig } from '../constants/ps-table-sticky-config';
 export class PsTableStickyHeadService {
     static offset(pinnedBottom, tableTop, tableHeight, headHeight) {
         return Math.min(Math.max(pinnedBottom - tableTop, 0), Math.max(tableHeight - headHeight, 0));
@@ -6,12 +7,17 @@ export class PsTableStickyHeadService {
         if (scrollRange <= 0)
             return [];
         const shiftAt = (scroll) => Math.min(Math.max(scroll - pinScroll, 0), maxShift);
-        const stops = [0, pinScroll, pinScroll + maxShift, scrollRange].filter((scroll) => scroll >= 0 && scroll <= scrollRange);
-        return stops
-            .filter((scroll, index) => stops.indexOf(scroll) === index)
-            .map((scroll) => ({
+        return PsTableStickyHeadService.stops([0, pinScroll, pinScroll + maxShift, scrollRange], scrollRange).map((scroll) => ({
             offset: scroll / scrollRange,
             shift: shiftAt(scroll),
         }));
     }
+    static clip(shift) {
+        const radius = PsTableStickyConfig.cardRadius;
+        return `inset(${shift}px 0 0 0 round ${radius} ${radius} 0 0)`;
+    }
+    static stops(scrolls, scrollRange) {
+        const inside = scrolls.filter((scroll) => scroll >= 0 && scroll <= scrollRange);
+        return inside.filter((scroll, index) => inside.indexOf(scroll) === index);
+    }
 }

package/dist/hooks/use-ps-sticky-head.d.ts

@@ -1,2 +1,2 @@
 import type { PsStickyHeadRefs } from '../interfaces/ps-sticky-head-refs';
-export declare const usePsStickyHead: ({ backdropRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }: PsStickyHeadRefs) => boolean;
+export declare const usePsStickyHead: ({ cardRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }: PsStickyHeadRefs) => boolean;

package/dist/hooks/use-ps-sticky-head.js

@@ -2,51 +2,58 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePsStickyHead = void 0;
 const react_1 = require("react");
+const ps_table_sticky_config_1 = require("../constants/ps-table-sticky-config");
 const ps_table_scroll_service_1 = require("../services/ps-table-scroll-service");
 const ps_table_sticky_head_service_1 = require("../services/ps-table-sticky-head-service");
-const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }) => {
+const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }) => {
     const [isStuck, setIsStuck] = (0, react_1.useState)(false);
     (0, react_1.useLayoutEffect)(() => {
         const region = regionRef.current;
         const sentinel = sentinelRef.current;
-        const backdrop = backdropRef.current;
+        const card = cardRef.current;
         const head = headRef.current;
         const table = head === null ? null : head.parentElement;
         if (stickyTop === undefined ||
             region === null ||
             sentinel === null ||
-            backdrop === null ||
+            card === null ||
             head === null ||
             table === null)
             return;
         const scroller = ps_table_scroll_service_1.PsTableScrollService.parent(region);
         const Timeline = window.ScrollTimeline;
         const isDriven = scroller !== null && Timeline !== undefined;
-        let animation = null;
+        let animations = [];
         let frame = 0;
-        const maxShift = () => Math.max(table.offsetHeight - head.offsetHeight, 0);
+        const headTravel = () => Math.max(table.offsetHeight - head.offsetHeight, 0);
         const drive = () => {
             if (scroller === null || Timeline === undefined)
                 return;
-            const scrollerTop = scroller.getBoundingClientRect().top;
-            const regionTop = region.getBoundingClientRect().top;
-            const pinnedBottom = scrollerTop +
+            const pinnedLine = scroller.getBoundingClientRect().top +
                 Number.parseFloat(getComputedStyle(region).top) +
-                backdrop.getBoundingClientRect().bottom -
-                regionTop;
-            const pinScroll = table.getBoundingClientRect().top + scroller.scrollTop - pinnedBottom;
-            const keyframes = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(pinScroll, maxShift(), scroller.scrollHeight - scroller.clientHeight);
-            if (animation !== null)
-                animation.cancel();
-            animation =
-                keyframes.length === 0
-                    ? null
-                    : head.animate(keyframes.map((keyframe) => ({
-                        offset: keyframe.offset,
-                        transform: `translateY(${keyframe.shift}px)`,
-                    })), { fill: 'both', timeline: new Timeline({ axis: 'block', source: scroller }) });
+                region.offsetHeight +
+                ps_table_sticky_config_1.PsTableStickyConfig.cardGapPx;
+            const scrollRange = scroller.scrollHeight - scroller.clientHeight;
+            const timeline = new Timeline({ axis: 'block', source: scroller });
+            const headFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(table.getBoundingClientRect().top + scroller.scrollTop - pinnedLine, headTravel(), scrollRange);
+            const cardFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(card.getBoundingClientRect().top + scroller.scrollTop - pinnedLine, card.offsetHeight, scrollRange);
+            animations.forEach((animation) => animation.cancel());
+            animations = [
+                head.animate(headFrames.map((keyframe) => ({
+                    offset: keyframe.offset,
+                    transform: `translateY(${keyframe.shift}px)`,
+                })), { fill: 'both', timeline }),
+                card.animate(cardFrames.map((keyframe) => ({
+                    clipPath: ps_table_sticky_head_service_1.PsTableStickyHeadService.clip(keyframe.shift),
+                    offset: keyframe.offset,
+                })), { fill: 'both', timeline }),
+            ];
+        };
+        const follow = () => {
+            const pinnedLine = region.getBoundingClientRect().bottom + ps_table_sticky_config_1.PsTableStickyConfig.cardGapPx;
+            head.style.transform = `translateY(${ps_table_sticky_head_service_1.PsTableStickyHeadService.offset(pinnedLine, table.getBoundingClientRect().top, table.offsetHeight, head.offsetHeight)}px)`;
+            card.style.clipPath = ps_table_sticky_head_service_1.PsTableStickyHeadService.clip(ps_table_sticky_head_service_1.PsTableStickyHeadService.offset(pinnedLine, card.getBoundingClientRect().top, card.offsetHeight, 0));
         };
-        const follow = () => (head.style.transform = `translateY(${ps_table_sticky_head_service_1.PsTableStickyHeadService.offset(backdrop.getBoundingClientRect().bottom, table.getBoundingClientRect().top, table.offsetHeight, head.offsetHeight)}px)`);
         const check = () => {
             frame = 0;
             setIsStuck(sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1);
@@ -65,22 +72,22 @@ const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, sentinelR
         const observer = new ResizeObserver(measure);
         measure();
         observer.observe(region);
-        observer.observe(table);
+        observer.observe(card);
         if (scroller !== null)
             Array.from(scroller.children).forEach((child) => observer.observe(child));
         window.addEventListener('scroll', schedule, { capture: true, passive: true });
         window.addEventListener('resize', measure);
         return () => {
             observer.disconnect();
-            if (animation !== null)
-                animation.cancel();
+            animations.forEach((animation) => animation.cancel());
             head.style.transform = '';
+            card.style.clipPath = '';
             window.removeEventListener('scroll', schedule, { capture: true });
             window.removeEventListener('resize', measure);
             if (frame !== 0)
                 window.cancelAnimationFrame(frame);
         };
-    }, [backdropRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop]);
+    }, [cardRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop]);
     return isStuck;
 };
 exports.usePsStickyHead = usePsStickyHead;

package/dist/interfaces/ps-sticky-head-refs.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 export interface PsStickyHeadRefs {
-    backdropRef: RefObject<HTMLDivElement | null>;
+    cardRef: RefObject<HTMLDivElement | null>;
     headRef: RefObject<HTMLTableSectionElement | null>;
     layoutKey: string;
     regionRef: RefObject<HTMLDivElement | null>;

package/dist/services/ps-table-sticky-head-service.d.ts

@@ -2,4 +2,6 @@ import type { PsTableStickyHeadKeyframe } from '../interfaces/ps-table-sticky-he
 export declare class PsTableStickyHeadService {
     static offset(pinnedBottom: number, tableTop: number, tableHeight: number, headHeight: number): number;
     static keyframes(pinScroll: number, maxShift: number, scrollRange: number): PsTableStickyHeadKeyframe[];
+    static clip(shift: number): string;
+    private static stops;
 }

package/dist/services/ps-table-sticky-head-service.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTableStickyHeadService = void 0;
+const ps_table_sticky_config_1 = require("../constants/ps-table-sticky-config");
 class PsTableStickyHeadService {
     static offset(pinnedBottom, tableTop, tableHeight, headHeight) {
         return Math.min(Math.max(pinnedBottom - tableTop, 0), Math.max(tableHeight - headHeight, 0));
@@ -9,13 +10,18 @@ class PsTableStickyHeadService {
         if (scrollRange <= 0)
             return [];
         const shiftAt = (scroll) => Math.min(Math.max(scroll - pinScroll, 0), maxShift);
-        const stops = [0, pinScroll, pinScroll + maxShift, scrollRange].filter((scroll) => scroll >= 0 && scroll <= scrollRange);
-        return stops
-            .filter((scroll, index) => stops.indexOf(scroll) === index)
-            .map((scroll) => ({
+        return PsTableStickyHeadService.stops([0, pinScroll, pinScroll + maxShift, scrollRange], scrollRange).map((scroll) => ({
             offset: scroll / scrollRange,
             shift: shiftAt(scroll),
         }));
     }
+    static clip(shift) {
+        const radius = ps_table_sticky_config_1.PsTableStickyConfig.cardRadius;
+        return `inset(${shift}px 0 0 0 round ${radius} ${radius} 0 0)`;
+    }
+    static stops(scrolls, scrollRange) {
+        const inside = scrolls.filter((scroll) => scroll >= 0 && scroll <= scrollRange);
+        return inside.filter((scroll, index) => inside.indexOf(scroll) === index);
+    }
 }
 exports.PsTableStickyHeadService = PsTableStickyHeadService;

package/package.json

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