@pallasoft/ps-table-components 1.27.1 → 1.28.0

package/dist/components/ps-data-table.d.ts

@@ -43,8 +43,9 @@ export interface PsDataTableProps<RowData> {
     searchPlaceholder?: string;
     selectAllMatching?: PsTableSelectAllMatching;
     stickyClassName?: string;
+    stickyLeading?: ReactNode;
     stickyTop?: string;
     toolbarActions?: ReactNode;
     totalRows?: number;
 }
-export declare const PsDataTable: <RowData>({ caption, className, clearSelectionKey, columns, cursorPaging, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, isPending, isRefreshing, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition, pinFirstColumn, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, selectAllMatching, stickyClassName, stickyTop, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;
+export declare const PsDataTable: <RowData>({ caption, className, clearSelectionKey, columns, cursorPaging, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, isPending, isRefreshing, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition, pinFirstColumn, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, selectAllMatching, stickyClassName, stickyLeading, stickyTop, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;

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

@@ -48,6 +48,7 @@ const table_breakpoint_1 = require("../constants/table-breakpoint");
 const table_config_1 = require("../constants/table-config");
 const use_ps_incremental_count_1 = require("../hooks/use-ps-incremental-count");
 const use_ps_scroll_anchor_1 = require("../hooks/use-ps-scroll-anchor");
+const use_ps_sticky_head_1 = require("../hooks/use-ps-sticky-head");
 const use_ps_table_overflow_1 = require("../hooks/use-ps-table-overflow");
 const use_ps_table_stream_status_1 = require("../hooks/use-ps-table-stream-status");
 const ps_table_cell_tooltip_service_1 = require("../services/ps-table-cell-tooltip-service");
@@ -87,7 +88,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPaging, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, isRefreshing = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition = ps_table_pagination_position_1.PsTablePaginationPosition.bottom, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = table_config_1.PsTableConfig.searchingLabel, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, selectAllMatching, stickyClassName, stickyTop, toolbarActions, totalRows, }) => {
+const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPaging, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, isRefreshing = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition = ps_table_pagination_position_1.PsTablePaginationPosition.bottom, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = table_config_1.PsTableConfig.searchingLabel, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, selectAllMatching, stickyClassName, stickyLeading, stickyTop, toolbarActions, totalRows, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [uncontrolledPage, setUncontrolledPage] = (0, react_1.useState)(1);
     const [uncontrolledQuery, setUncontrolledQuery] = (0, react_1.useState)(() => ps_table_query_service_1.PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -98,47 +99,13 @@ 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 [stickyHeight, setStickyHeight] = (0, react_1.useState)(0);
-    const [isStuck, setIsStuck] = (0, react_1.useState)(false);
+    const stickyBackdropRef = (0, react_1.useRef)(null);
+    const stickyHeadRef = (0, react_1.useRef)(null);
     const currentQuery = query ? query : uncontrolledQuery;
     if (seenClearKey !== clearSelectionKey) {
         setSeenClearKey(clearSelectionKey);
         setSelectedIds([]);
     }
-    (0, react_1.useLayoutEffect)(() => {
-        const region = stickyRegionRef.current;
-        if (stickyTop === undefined || region === null)
-            return;
-        const measure = () => setStickyHeight(region.offsetHeight);
-        const observer = new ResizeObserver(measure);
-        measure();
-        observer.observe(region);
-        return () => observer.disconnect();
-    }, [stickyTop]);
-    (0, react_1.useEffect)(() => {
-        const region = stickyRegionRef.current;
-        const sentinel = stickySentinelRef.current;
-        if (stickyTop === undefined || region === null || sentinel === null)
-            return;
-        let frame = 0;
-        const check = () => {
-            frame = 0;
-            setIsStuck(sentinel.getBoundingClientRect().top < Number.parseFloat(getComputedStyle(region).top));
-        };
-        const schedule = () => {
-            if (frame === 0)
-                frame = window.requestAnimationFrame(check);
-        };
-        check();
-        window.addEventListener('scroll', schedule, { capture: true, passive: true });
-        window.addEventListener('resize', schedule);
-        return () => {
-            window.removeEventListener('scroll', schedule, { capture: true });
-            window.removeEventListener('resize', schedule);
-            if (frame !== 0)
-                window.cancelAnimationFrame(frame);
-        };
-    }, [stickyTop]);
     const { filters, hiddenColumnIds, search, sort } = currentQuery;
     const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
     const fittedWidths = (0, react_1.useMemo)(() => new Map(columns
@@ -161,6 +128,14 @@ const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPag
     const pins = ps_table_pin_service_1.PsTablePinService.leading(pinFirstColumn, Boolean(reorder), isSelectable);
     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,
+        headRef: stickyHeadRef,
+        layoutKey: `${visibleColumns.map((column) => column.id).join(',')}:${rows.length}:${isLoading}`,
+        regionRef: stickyRegionRef,
+        sentinelRef: stickySentinelRef,
+        stickyTop,
+    });
     const deferredSearch = (0, react_1.useDeferredValue)(search);
     const queriedRows = (0, react_1.useMemo)(() => isServerPaginated
         ? rows
@@ -421,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 ? (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.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('sticky z-sticky -mx-1 flex flex-col gap-3 px-1 pb-2 pt-1 transition-shadow', stickyClassName === undefined ? 'bg-canvas' : stickyClassName, isStuck ? 'shadow-[0_8px_8px_-8px_rgb(var(--ps-color-ink-rgb,15_23_42)/0.18)]' : ''), ref: stickyRegionRef, style: { top: stickyTop }, children: topContent })] })), (0, jsx_runtime_1.jsxs)("div", { "aria-busy": isRefreshing, className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 rounded-[1.25rem] border border-line bg-surface', stickyTop === undefined ? 'overflow-hidden' : 'overflow-clip'), 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_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 &&
                         paginationPosition !== ps_table_pagination_position_1.PsTablePaginationPosition.bottom &&
                         rowCount > ps_table_pagination_config_1.PsTablePaginationConfig.topMinRows
                         ? renderPagination('border-b border-t-0')
@@ -432,13 +407,9 @@ const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPag
                                                     ? grouping.renderGroupSummary(group.rows)
                                                     : undefined }), (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
                                 })
-                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge(stickyTop === undefined
-                            ? 'ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain'
-                            : 'overflow-x-clip', 'transition-opacity duration-150', isRefreshing ? 'opacity-60' : '', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => ((0, jsx_runtime_1.jsxs)("table", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: ps_design_system_1.PallasoftClassNameService.merge('bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', stickyTop === undefined
+                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain', 'transition-opacity duration-150', isRefreshing ? 'opacity-60' : '', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => ((0, jsx_runtime_1.jsxs)("table", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: ps_design_system_1.PallasoftClassNameService.merge('bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', stickyTop === undefined
                                         ? ''
-                                        : 'sticky z-docked bg-surface [&_th]:border-b [&_th]:border-line [&>tr]:bg-mist/70'), style: stickyTop === undefined
-                                        ? undefined
-                                        : { top: `calc(${stickyTop} + ${stickyHeight}px)` }, children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? ((0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? ((0, jsx_runtime_1.jsx)("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) })) : null })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column, columnIndex) => {
+                                        : 'relative z-docked bg-surface will-change-transform [&_th]:border-b [&_th]:border-line [&>tr]:bg-mist/70'), ref: stickyHeadRef, children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? ((0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? ((0, jsx_runtime_1.jsx)("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) })) : null })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column, columnIndex) => {
                                                 const align = column.align !== null && column.align !== undefined ? column.align : 'left';
                                                 const isSorted = sort !== null && sort.columnId === column.id;
                                                 return ((0, jsx_runtime_1.jsx)("th", { "aria-sort": isSorted

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

@@ -13,6 +13,6 @@ const PsTableToolbar = ({ actions, columns, filters, isSearchable, onClearFilter
     const filterableColumns = columns.filter((column) => column.filter);
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const activeCount = filterableColumns.filter((column) => ps_table_query_service_1.PsTableQueryService.isActive(filters[column.id])).length;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? ((0, jsx_runtime_1.jsxs)("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring ps-control rounded-ps-control pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'ps-scrollbar-hidden flex w-full min-w-0 flex-1 items-center gap-2 overflow-x-auto sm:w-auto', children: [filterableColumns.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_table_control_classes_1.PsTableControlClasses.toolbarButton, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Filter }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: (0, jsx_runtime_1.jsxs)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => ((0, jsx_runtime_1.jsx)(ps_table_filter_field_1.PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: ps_table_query_service_1.PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end border-t border-line pt-3', children: (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'text-ink/65 hover:text-ink disabled:opacity-40'), disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? (0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex shrink-0 items-center gap-2', children: actions }) : null] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? ((0, jsx_runtime_1.jsxs)("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring ps-control rounded-ps-control pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'flex max-w-full shrink-0 grow flex-wrap items-center gap-2', children: [filterableColumns.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: ps_table_control_classes_1.PsTableControlClasses.toolbarButton, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Filter }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: (0, jsx_runtime_1.jsxs)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => ((0, jsx_runtime_1.jsx)(ps_table_filter_field_1.PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: ps_table_query_service_1.PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end border-t border-line pt-3', children: (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'text-ink/65 hover:text-ink disabled:opacity-40'), disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? (0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex shrink-0 items-center gap-2', children: actions }) : null] })] }));
 };
 exports.PsTableToolbar = PsTableToolbar;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, Suspense, lazy, useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Fragment, Suspense, lazy, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState, } from 'react';
 import { PsDragGrip, PsSkeletonTable } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsCheckbox } from '@pallasoft/ps-input-components';
@@ -12,6 +12,7 @@ import { PsTableHideBelowClasses } from '../constants/table-breakpoint';
 import { PsTableConfig } from '../constants/table-config';
 import { usePsIncrementalCount } from '../hooks/use-ps-incremental-count';
 import { usePsScrollAnchor } from '../hooks/use-ps-scroll-anchor';
+import { usePsStickyHead } from '../hooks/use-ps-sticky-head';
 import { usePsTableOverflow } from '../hooks/use-ps-table-overflow';
 import { usePsTableStreamStatus } from '../hooks/use-ps-table-stream-status';
 import { PsTableCellTooltipService } from '../services/ps-table-cell-tooltip-service';
@@ -51,7 +52,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPaging, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, isRefreshing = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition = PsTablePaginationPosition.bottom, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = PsTableConfig.searchingLabel, searchPlaceholder = PsTableConfig.searchPlaceholder, selectAllMatching, stickyClassName, stickyTop, toolbarActions, totalRows, }) => {
+export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPaging, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, isRefreshing = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition = PsTablePaginationPosition.bottom, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = PsTableConfig.searchingLabel, searchPlaceholder = PsTableConfig.searchPlaceholder, selectAllMatching, stickyClassName, stickyLeading, stickyTop, toolbarActions, totalRows, }) => {
     const containerRef = useRef(null);
     const [uncontrolledPage, setUncontrolledPage] = useState(1);
     const [uncontrolledQuery, setUncontrolledQuery] = useState(() => PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -62,47 +63,13 @@ export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cu
     const [seenClearKey, setSeenClearKey] = useState(clearSelectionKey);
     const stickyRegionRef = useRef(null);
     const stickySentinelRef = useRef(null);
-    const [stickyHeight, setStickyHeight] = useState(0);
-    const [isStuck, setIsStuck] = useState(false);
+    const stickyBackdropRef = useRef(null);
+    const stickyHeadRef = useRef(null);
     const currentQuery = query ? query : uncontrolledQuery;
     if (seenClearKey !== clearSelectionKey) {
         setSeenClearKey(clearSelectionKey);
         setSelectedIds([]);
     }
-    useLayoutEffect(() => {
-        const region = stickyRegionRef.current;
-        if (stickyTop === undefined || region === null)
-            return;
-        const measure = () => setStickyHeight(region.offsetHeight);
-        const observer = new ResizeObserver(measure);
-        measure();
-        observer.observe(region);
-        return () => observer.disconnect();
-    }, [stickyTop]);
-    useEffect(() => {
-        const region = stickyRegionRef.current;
-        const sentinel = stickySentinelRef.current;
-        if (stickyTop === undefined || region === null || sentinel === null)
-            return;
-        let frame = 0;
-        const check = () => {
-            frame = 0;
-            setIsStuck(sentinel.getBoundingClientRect().top < Number.parseFloat(getComputedStyle(region).top));
-        };
-        const schedule = () => {
-            if (frame === 0)
-                frame = window.requestAnimationFrame(check);
-        };
-        check();
-        window.addEventListener('scroll', schedule, { capture: true, passive: true });
-        window.addEventListener('resize', schedule);
-        return () => {
-            window.removeEventListener('scroll', schedule, { capture: true });
-            window.removeEventListener('resize', schedule);
-            if (frame !== 0)
-                window.cancelAnimationFrame(frame);
-        };
-    }, [stickyTop]);
     const { filters, hiddenColumnIds, search, sort } = currentQuery;
     const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
     const fittedWidths = useMemo(() => new Map(columns
@@ -125,6 +92,14 @@ export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cu
     const pins = PsTablePinService.leading(pinFirstColumn, Boolean(reorder), isSelectable);
     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,
+        headRef: stickyHeadRef,
+        layoutKey: `${visibleColumns.map((column) => column.id).join(',')}:${rows.length}:${isLoading}`,
+        regionRef: stickyRegionRef,
+        sentinelRef: stickySentinelRef,
+        stickyTop,
+    });
     const deferredSearch = useDeferredValue(search);
     const queriedRows = useMemo(() => isServerPaginated
         ? rows
@@ -385,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 ? (topContent) : (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: '-mb-3 h-0', ref: stickySentinelRef }), _jsx("div", { className: PallasoftClassNameService.merge('sticky z-sticky -mx-1 flex flex-col gap-3 px-1 pb-2 pt-1 transition-shadow', stickyClassName === undefined ? 'bg-canvas' : stickyClassName, isStuck ? 'shadow-[0_8px_8px_-8px_rgb(var(--ps-color-ink-rgb,15_23_42)/0.18)]' : ''), ref: stickyRegionRef, style: { top: stickyTop }, children: topContent })] })), _jsxs("div", { "aria-busy": isRefreshing, className: PallasoftClassNameService.merge('min-w-0 rounded-[1.25rem] border border-line bg-surface', stickyTop === undefined ? 'overflow-hidden' : 'overflow-clip'), 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: 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 &&
                         paginationPosition !== PsTablePaginationPosition.bottom &&
                         rowCount > PsTablePaginationConfig.topMinRows
                         ? renderPagination('border-b border-t-0')
@@ -396,13 +371,9 @@ export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cu
                                                     ? grouping.renderGroupSummary(group.rows)
                                                     : undefined }), _jsx(PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
                                 })
-                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? (_jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? (_jsx("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, _jsx("div", { className: PallasoftClassNameService.merge(stickyTop === undefined
-                            ? 'ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain'
-                            : 'overflow-x-clip', 'transition-opacity duration-150', isRefreshing ? 'opacity-60' : '', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => (_jsxs("table", { className: PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: PallasoftClassNameService.merge('bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', stickyTop === undefined
+                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? (_jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? (_jsx("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain', 'transition-opacity duration-150', isRefreshing ? 'opacity-60' : '', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => (_jsxs("table", { className: PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: PallasoftClassNameService.merge('bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', stickyTop === undefined
                                         ? ''
-                                        : 'sticky z-docked bg-surface [&_th]:border-b [&_th]:border-line [&>tr]:bg-mist/70'), style: stickyTop === undefined
-                                        ? undefined
-                                        : { top: `calc(${stickyTop} + ${stickyHeight}px)` }, children: _jsxs("tr", { children: [reorder ? (_jsx("th", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? (_jsx("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? (_jsx("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: _jsx(PsDragGrip, {}) })) : null })) : null, isSelectable ? (_jsx("th", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column, columnIndex) => {
+                                        : 'relative z-docked bg-surface will-change-transform [&_th]:border-b [&_th]:border-line [&>tr]:bg-mist/70'), ref: stickyHeadRef, children: _jsxs("tr", { children: [reorder ? (_jsx("th", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? (_jsx("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? (_jsx("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: _jsx(PsDragGrip, {}) })) : null })) : null, isSelectable ? (_jsx("th", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column, columnIndex) => {
                                                 const align = column.align !== null && column.align !== undefined ? column.align : 'left';
                                                 const isSorted = sort !== null && sort.columnId === column.id;
                                                 return (_jsx("th", { "aria-sort": isSorted

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

@@ -10,5 +10,5 @@ export const PsTableToolbar = ({ actions, columns, filters, isSearchable, onClea
     const filterableColumns = columns.filter((column) => column.filter);
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
     const activeCount = filterableColumns.filter((column) => PsTableQueryService.isActive(filters[column.id])).length;
-    return (_jsxs("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? (_jsxs("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [_jsx("span", { className: 'sr-only', children: searchPlaceholder }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: PsIconKey.Search }), _jsx("input", { className: 'ps-input-control ps-focus-ring ps-control rounded-ps-control pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, _jsxs("div", { className: 'ps-scrollbar-hidden flex w-full min-w-0 flex-1 items-center gap-2 overflow-x-auto sm:w-auto', children: [filterableColumns.length > 0 ? (_jsxs(DialogTrigger, { children: [_jsxs(Button, { className: PsTableControlClasses.toolbarButton, children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.Filter }), _jsx("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? (_jsx("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), _jsx(Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: _jsxs(PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => (_jsx(PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), _jsx("div", { className: 'flex justify-end border-t border-line pt-3', children: _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'text-ink/65 hover:text-ink disabled:opacity-40'), disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? (_jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? _jsx("div", { className: 'ml-auto flex shrink-0 items-center gap-2', children: actions }) : null] })] }));
+    return (_jsxs("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? (_jsxs("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [_jsx("span", { className: 'sr-only', children: searchPlaceholder }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: PsIconKey.Search }), _jsx("input", { className: 'ps-input-control ps-focus-ring ps-control rounded-ps-control pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, _jsxs("div", { className: 'flex max-w-full shrink-0 grow flex-wrap items-center gap-2', children: [filterableColumns.length > 0 ? (_jsxs(DialogTrigger, { children: [_jsxs(Button, { className: PsTableControlClasses.toolbarButton, children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.Filter }), _jsx("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? (_jsx("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), _jsx(Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: _jsxs(PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => (_jsx(PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), _jsx("div", { className: 'flex justify-end border-t border-line pt-3', children: _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'text-ink/65 hover:text-ink disabled:opacity-40'), disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? (_jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? _jsx("div", { className: 'ml-auto flex shrink-0 items-center gap-2', children: actions }) : null] })] }));
 };

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

@@ -0,0 +1,82 @@
+import { useLayoutEffect, useState } from 'react';
+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, }) => {
+    const [isStuck, setIsStuck] = useState(false);
+    useLayoutEffect(() => {
+        const region = regionRef.current;
+        const sentinel = sentinelRef.current;
+        const backdrop = backdropRef.current;
+        const head = headRef.current;
+        const table = head === null ? null : head.parentElement;
+        if (stickyTop === undefined ||
+            region === null ||
+            sentinel === null ||
+            backdrop === 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 frame = 0;
+        const maxShift = () => 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 +
+                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 }) });
+        };
+        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);
+            if (!isDriven)
+                follow();
+        };
+        const schedule = () => {
+            if (frame === 0)
+                frame = window.requestAnimationFrame(check);
+        };
+        const measure = () => {
+            if (isDriven)
+                drive();
+            schedule();
+        };
+        const observer = new ResizeObserver(measure);
+        measure();
+        observer.observe(region);
+        observer.observe(table);
+        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();
+            head.style.transform = '';
+            window.removeEventListener('scroll', schedule, { capture: true });
+            window.removeEventListener('resize', measure);
+            if (frame !== 0)
+                window.cancelAnimationFrame(frame);
+        };
+    }, [backdropRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop]);
+    return isStuck;
+};

package/dist/esm/index.js

@@ -29,9 +29,13 @@ 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-sticky-head-service';
 export * from './services/ps-table-pin-service';
 export * from './services/ps-table-overflow-service';
 export * from './hooks/use-ps-table-overflow';
+export * from './hooks/use-ps-sticky-head';
+export * from './interfaces/ps-sticky-head-refs';
+export * from './interfaces/ps-table-sticky-head-keyframe';
 export * from './interfaces/table-pin-classes';
 export * from './interfaces/table-overflow-edges';
 export * from './services/ps-table-stream-service';

package/dist/esm/interfaces/ps-scroll-timeline-options.js

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

package/dist/esm/interfaces/ps-scroll-timeline-window.js

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

package/dist/esm/interfaces/ps-sticky-head-refs.js

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

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

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

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

@@ -0,0 +1,17 @@
+export class PsTableStickyHeadService {
+    static offset(pinnedBottom, tableTop, tableHeight, headHeight) {
+        return Math.min(Math.max(pinnedBottom - tableTop, 0), Math.max(tableHeight - headHeight, 0));
+    }
+    static keyframes(pinScroll, maxShift, scrollRange) {
+        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) => ({
+            offset: scroll / scrollRange,
+            shift: shiftAt(scroll),
+        }));
+    }
+}

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

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

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

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsStickyHead = void 0;
+const react_1 = require("react");
+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 [isStuck, setIsStuck] = (0, react_1.useState)(false);
+    (0, react_1.useLayoutEffect)(() => {
+        const region = regionRef.current;
+        const sentinel = sentinelRef.current;
+        const backdrop = backdropRef.current;
+        const head = headRef.current;
+        const table = head === null ? null : head.parentElement;
+        if (stickyTop === undefined ||
+            region === null ||
+            sentinel === null ||
+            backdrop === 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 frame = 0;
+        const maxShift = () => 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 +
+                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 }) });
+        };
+        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);
+            if (!isDriven)
+                follow();
+        };
+        const schedule = () => {
+            if (frame === 0)
+                frame = window.requestAnimationFrame(check);
+        };
+        const measure = () => {
+            if (isDriven)
+                drive();
+            schedule();
+        };
+        const observer = new ResizeObserver(measure);
+        measure();
+        observer.observe(region);
+        observer.observe(table);
+        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();
+            head.style.transform = '';
+            window.removeEventListener('scroll', schedule, { capture: true });
+            window.removeEventListener('resize', measure);
+            if (frame !== 0)
+                window.cancelAnimationFrame(frame);
+        };
+    }, [backdropRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop]);
+    return isStuck;
+};
+exports.usePsStickyHead = usePsStickyHead;

package/dist/index.d.ts

@@ -29,9 +29,13 @@ 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-sticky-head-service';
 export * from './services/ps-table-pin-service';
 export * from './services/ps-table-overflow-service';
 export * from './hooks/use-ps-table-overflow';
+export * from './hooks/use-ps-sticky-head';
+export * from './interfaces/ps-sticky-head-refs';
+export * from './interfaces/ps-table-sticky-head-keyframe';
 export * from './interfaces/table-pin-classes';
 export * from './interfaces/table-overflow-edges';
 export * from './services/ps-table-stream-service';

package/dist/index.js

@@ -45,9 +45,13 @@ __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-sticky-head-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("./hooks/use-ps-sticky-head"), exports);
+__exportStar(require("./interfaces/ps-sticky-head-refs"), exports);
+__exportStar(require("./interfaces/ps-table-sticky-head-keyframe"), exports);
 __exportStar(require("./interfaces/table-pin-classes"), exports);
 __exportStar(require("./interfaces/table-overflow-edges"), exports);
 __exportStar(require("./services/ps-table-stream-service"), exports);

package/dist/interfaces/ps-scroll-timeline-options.d.ts

@@ -0,0 +1,4 @@
+export interface PsScrollTimelineOptions {
+    axis: 'block';
+    source: Element;
+}

package/dist/interfaces/ps-scroll-timeline-options.js

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

package/dist/interfaces/ps-scroll-timeline-window.d.ts

@@ -0,0 +1,4 @@
+import type { PsScrollTimelineOptions } from './ps-scroll-timeline-options';
+export interface PsScrollTimelineWindow {
+    ScrollTimeline?: new (options: PsScrollTimelineOptions) => AnimationTimeline;
+}

package/dist/interfaces/ps-scroll-timeline-window.js

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

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

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

package/dist/interfaces/ps-sticky-head-refs.js

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

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

@@ -0,0 +1,4 @@
+export interface PsTableStickyHeadKeyframe {
+    offset: number;
+    shift: number;
+}

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

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

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

@@ -0,0 +1,5 @@
+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[];
+}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableStickyHeadService = void 0;
+class PsTableStickyHeadService {
+    static offset(pinnedBottom, tableTop, tableHeight, headHeight) {
+        return Math.min(Math.max(pinnedBottom - tableTop, 0), Math.max(tableHeight - headHeight, 0));
+    }
+    static keyframes(pinScroll, maxShift, scrollRange) {
+        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) => ({
+            offset: scroll / scrollRange,
+            shift: shiftAt(scroll),
+        }));
+    }
+}
+exports.PsTableStickyHeadService = PsTableStickyHeadService;

package/package.json

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