@pallasoft/ps-table-components 1.28.0 → 1.28.1

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

@@ -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: [(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 &&
                         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,3 @@
+export declare const PsTableStickyConfig: {
+    readonly backdropFadePx: 16;
+};

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableStickyConfig = void 0;
+exports.PsTableStickyConfig = {
+    backdropFadePx: 16,
+};

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

@@ -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: [_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 &&
                         paginationPosition !== PsTablePaginationPosition.bottom &&
                         rowCount > PsTablePaginationConfig.topMinRows
                         ? renderPagination('border-b border-t-0')

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

@@ -0,0 +1,3 @@
+export const PsTableStickyConfig = {
+    backdropFadePx: 16,
+};

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

@@ -1,4 +1,5 @@
 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, }) => {
@@ -19,7 +20,7 @@ export const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, se
         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 drive = () => {
@@ -32,23 +33,38 @@ export const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, se
                 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 }) });
+            const barPinScroll = sentinel.getBoundingClientRect().top -
+                scrollerTop +
+                scroller.scrollTop -
+                Number.parseFloat(getComputedStyle(region).top);
+            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);
+            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 }),
+                    ];
         };
         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(sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1);
-            if (!isDriven)
-                follow();
+            setIsStuck(stuck);
+            if (isDriven)
+                return;
+            backdrop.style.opacity = stuck ? '1' : '0';
+            follow();
         };
         const schedule = () => {
             if (frame === 0)
@@ -69,9 +85,9 @@ export const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, se
         window.addEventListener('resize', measure);
         return () => {
             observer.disconnect();
-            if (animation !== null)
-                animation.cancel();
+            animations.forEach((animation) => animation.cancel());
             head.style.transform = '';
+            backdrop.style.opacity = '';
             window.removeEventListener('scroll', schedule, { capture: true });
             window.removeEventListener('resize', measure);
             if (frame !== 0)

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

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

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

@@ -6,12 +6,19 @@ 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 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 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.js

@@ -2,6 +2,7 @@
 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, }) => {
@@ -22,7 +23,7 @@ const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, sentinelR
         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 drive = () => {
@@ -35,23 +36,38 @@ const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, sentinelR
                 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 }) });
+            const barPinScroll = sentinel.getBoundingClientRect().top -
+                scrollerTop +
+                scroller.scrollTop -
+                Number.parseFloat(getComputedStyle(region).top);
+            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);
+            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 }),
+                    ];
         };
         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(sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1);
-            if (!isDriven)
-                follow();
+            setIsStuck(stuck);
+            if (isDriven)
+                return;
+            backdrop.style.opacity = stuck ? '1' : '0';
+            follow();
         };
         const schedule = () => {
             if (frame === 0)
@@ -72,9 +88,9 @@ const usePsStickyHead = ({ backdropRef, headRef, layoutKey, regionRef, sentinelR
         window.addEventListener('resize', measure);
         return () => {
             observer.disconnect();
-            if (animation !== null)
-                animation.cancel();
+            animations.forEach((animation) => animation.cancel());
             head.style.transform = '';
+            backdrop.style.opacity = '';
             window.removeEventListener('scroll', schedule, { capture: true });
             window.removeEventListener('resize', measure);
             if (frame !== 0)

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

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

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

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

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

@@ -1,5 +1,8 @@
+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[];
+    private static stops;
 }

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

@@ -9,13 +9,20 @@ 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 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 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.1",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",