@pallasoft/ps-table-components 1.28.1 → 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-glass-strong pointer-events-none absolute -inset-x-3 -bottom-3 rounded-b-ps-card border-t-0 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

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

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

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTableStickyConfig = void 0;
 exports.PsTableStickyConfig = {
-    backdropFadePx: 16,
+    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: 'ps-glass-strong pointer-events-none absolute -inset-x-3 -bottom-3 rounded-b-ps-card border-t-0 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

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

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

@@ -2,18 +2,18 @@ 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;
@@ -22,49 +22,40 @@ export const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, se
         const isDriven = scroller !== null && Timeline !== undefined;
         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 barPinScroll = sentinel.getBoundingClientRect().top -
-                scrollerTop +
-                scroller.scrollTop -
-                Number.parseFloat(getComputedStyle(region).top);
+                region.offsetHeight +
+                PsTableStickyConfig.cardGapPx;
             const scrollRange = scroller.scrollHeight - scroller.clientHeight;
             const timeline = new Timeline({ axis: 'block', source: scroller });
-            const headFrames = PsTableStickyHeadService.keyframes(pinScroll, maxShift(), scrollRange);
-            const backdropFrames = PsTableStickyHeadService.backdropKeyframes(barPinScroll, PsTableStickyConfig.backdropFadePx, scrollRange);
+            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 =
-                headFrames.length === 0
-                    ? []
-                    : [
-                        head.animate(headFrames.map((keyframe) => ({
-                            offset: keyframe.offset,
-                            transform: `translateY(${keyframe.shift}px)`,
-                        })), { fill: 'both', timeline }),
-                        backdrop.animate(backdropFrames.map((keyframe) => ({
-                            offset: keyframe.offset,
-                            opacity: keyframe.opacity,
-                        })), { fill: 'both', timeline }),
-                    ];
+            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 = () => {
-            const stuck = sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1;
             frame = 0;
-            setIsStuck(stuck);
-            if (isDriven)
-                return;
-            backdrop.style.opacity = stuck ? '1' : '0';
-            follow();
+            setIsStuck(sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1);
+            if (!isDriven)
+                follow();
         };
         const schedule = () => {
             if (frame === 0)
@@ -78,7 +69,7 @@ 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 });
@@ -87,12 +78,12 @@ export const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, se
             observer.disconnect();
             animations.forEach((animation) => animation.cancel());
             head.style.transform = '';
-            backdrop.style.opacity = '';
+            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));
@@ -11,11 +12,9 @@ export class PsTableStickyHeadService {
             shift: shiftAt(scroll),
         }));
     }
-    static backdropKeyframes(pinScroll, fade, scrollRange) {
-        if (scrollRange <= 0)
-            return [];
-        const opacityAt = (scroll) => Math.min(Math.max((scroll - pinScroll + fade) / fade, 0), 1);
-        return PsTableStickyHeadService.stops([0, pinScroll - fade, pinScroll, scrollRange], scrollRange).map((scroll) => ({ offset: scroll / scrollRange, opacity: opacityAt(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);

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

@@ -5,18 +5,18 @@ 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;
@@ -25,49 +25,40 @@ const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, sentinelR
         const isDriven = scroller !== null && Timeline !== undefined;
         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 barPinScroll = sentinel.getBoundingClientRect().top -
-                scrollerTop +
-                scroller.scrollTop -
-                Number.parseFloat(getComputedStyle(region).top);
+                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(pinScroll, maxShift(), scrollRange);
-            const backdropFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.backdropKeyframes(barPinScroll, ps_table_sticky_config_1.PsTableStickyConfig.backdropFadePx, scrollRange);
+            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 =
-                headFrames.length === 0
-                    ? []
-                    : [
-                        head.animate(headFrames.map((keyframe) => ({
-                            offset: keyframe.offset,
-                            transform: `translateY(${keyframe.shift}px)`,
-                        })), { fill: 'both', timeline }),
-                        backdrop.animate(backdropFrames.map((keyframe) => ({
-                            offset: keyframe.offset,
-                            opacity: keyframe.opacity,
-                        })), { fill: 'both', timeline }),
-                    ];
+            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 = () => {
-            const stuck = sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1;
             frame = 0;
-            setIsStuck(stuck);
-            if (isDriven)
-                return;
-            backdrop.style.opacity = stuck ? '1' : '0';
-            follow();
+            setIsStuck(sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1);
+            if (!isDriven)
+                follow();
         };
         const schedule = () => {
             if (frame === 0)
@@ -81,7 +72,7 @@ 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 });
@@ -90,13 +81,13 @@ const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, sentinelR
             observer.disconnect();
             animations.forEach((animation) => animation.cancel());
             head.style.transform = '';
-            backdrop.style.opacity = '';
+            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

@@ -1,8 +1,7 @@
-import type { PsTableStickyBackdropKeyframe } from '../interfaces/ps-table-sticky-backdrop-keyframe';
 import type { PsTableStickyHeadKeyframe } from '../interfaces/ps-table-sticky-head-keyframe';
 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 backdropKeyframes(pinScroll: number, fade: number, scrollRange: number): PsTableStickyBackdropKeyframe[];
+    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));
@@ -14,11 +15,9 @@ class PsTableStickyHeadService {
             shift: shiftAt(scroll),
         }));
     }
-    static backdropKeyframes(pinScroll, fade, scrollRange) {
-        if (scrollRange <= 0)
-            return [];
-        const opacityAt = (scroll) => Math.min(Math.max((scroll - pinScroll + fade) / fade, 0), 1);
-        return PsTableStickyHeadService.stops([0, pinScroll - fade, pinScroll, scrollRange], scrollRange).map((scroll) => ({ offset: scroll / scrollRange, opacity: opacityAt(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);

package/package.json

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

package/dist/esm/interfaces/ps-table-sticky-backdrop-keyframe.js

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

package/dist/interfaces/ps-table-sticky-backdrop-keyframe.d.ts

@@ -1,4 +0,0 @@
-export interface PsTableStickyBackdropKeyframe {
-    offset: number;
-    opacity: number;
-}

package/dist/interfaces/ps-table-sticky-backdrop-keyframe.js

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