pixelize-design-library 2.3.1-beta.9 → 2.3.3

package/dist/Components/StageProgress/StageProgress.js

@@ -0,0 +1,59 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var StageItem_1 = __importDefault(require("./StageItem"));
+var StepperStage_1 = __importDefault(require("./StepperStage"));
+var scrollSx = {
+    "&::-webkit-scrollbar": { height: "4px" },
+    "&::-webkit-scrollbar-thumb": {
+        borderRadius: "10px",
+        backgroundColor: "rgba(0,0,0,0.25)",
+    },
+    "&::-webkit-scrollbar-track": { background: "transparent" },
+};
+// Gap between items per variant (chevron interlocks via negative margin).
+var gapFor = {
+    chevron: "0",
+    bar: "4px",
+    pills: "8px",
+    stepper: "0",
+};
+var StageProgress = function (_a) {
+    var stages = _a.stages, _b = _a.variant, variant = _b === void 0 ? "chevron" : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.colorScheme, colorScheme = _d === void 0 ? "primary" : _d, _e = _a.markCompleted, markCompleted = _e === void 0 ? true : _e, _f = _a.showCheck, showCheck = _f === void 0 ? false : _f, _g = _a.isReadOnly, isReadOnly = _g === void 0 ? false : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, minStageWidth = _a.minStageWidth, _j = _a.scrollActiveIntoView, scrollActiveIntoView = _j === void 0 ? true : _j, _k = _a.tooltipThreshold, tooltipThreshold = _k === void 0 ? 20 : _k;
+    if (isLoading) {
+        var skeletonH_1 = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
+        return (react_1.default.createElement(react_2.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem" }, Array.from({ length: 6 }).map(function (_, i) { return (react_1.default.createElement(react_2.Skeleton, { key: i, height: skeletonH_1, minWidth: minStageWidth || "160px", borderRadius: "6px", flexShrink: 0 })); })));
+    }
+    var activeIndex = stages.findIndex(function (st) { return st.id === value; });
+    var stateFor = function (index) {
+        if (index === activeIndex)
+            return "active";
+        if (markCompleted && activeIndex > -1 && index < activeIndex)
+            return "completed";
+        return "upcoming";
+    };
+    var total = stages.length;
+    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "hidden", p: "0.1rem", sx: __assign({ "&:hover": { overflowX: "auto" } }, scrollSx) }, stages.map(function (stage, index) {
+        var state = stateFor(index);
+        if (variant === "stepper") {
+            return (react_1.default.createElement(StepperStage_1.default, { key: stage.id, label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index); } }));
+        }
+        return (react_1.default.createElement(StageItem_1.default, { key: stage.id, label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index); } }));
+    })));
+};
+exports.default = StageProgress;

package/dist/Components/StageProgress/StageProgressProps.d.ts

@@ -0,0 +1,85 @@
+import { CustomThemeProps } from "../../Theme/themeProps";
+export type StageSize = "sm" | "md" | "lg";
+export type StageColorScheme = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+export type StageState = "completed" | "active" | "upcoming";
+/** Visual style of the tracker. */
+export type StageVariant = "chevron" | "bar" | "pills" | "stepper";
+export interface Stage {
+    id: string | number;
+    label: string;
+    /** Disable selecting this stage individually. */
+    disabled?: boolean;
+}
+export interface StageProgressProps {
+    /** Ordered list of pipeline stages. */
+    stages: Stage[];
+    /** Visual style. Default "chevron". */
+    variant?: StageVariant;
+    /** id of the currently active stage. */
+    value?: string | number;
+    /** Fired when a stage is clicked (ignored when isReadOnly). */
+    onChange?: (id: string | number, stage: Stage, index: number) => void;
+    size?: StageSize;
+    colorScheme?: StageColorScheme;
+    /** Render stages before the active one in a distinct "done" style. Default true. */
+    markCompleted?: boolean;
+    /** Show a check icon on completed stages. Default false. */
+    showCheck?: boolean;
+    /** Render as a non-interactive indicator. */
+    isReadOnly?: boolean;
+    /** Show the loading skeleton row instead of stages. */
+    isLoading?: boolean;
+    /** Min width of each chevron. */
+    minStageWidth?: string;
+    /** Auto-scroll the active stage into view. Default true. */
+    scrollActiveIntoView?: boolean;
+    /** Label length beyond which a tooltip is shown. Default 20. */
+    tooltipThreshold?: number;
+}
+export interface StageItemProps {
+    label: string;
+    index: number;
+    total: number;
+    state: StageState;
+    /** "chevron" | "bar" | "pills" (stepper has its own renderer). */
+    variant?: Exclude<StageVariant, "stepper">;
+    size?: StageSize;
+    colorScheme?: StageColorScheme;
+    onClick?: () => void;
+    isReadOnly?: boolean;
+    disabled?: boolean;
+    showCheck?: boolean;
+    minWidth?: string;
+    scrollIntoViewWhenActive?: boolean;
+    tooltipThreshold?: number;
+}
+export interface StepperStageProps {
+    label: string;
+    /** 1-based step number shown inside the circle. */
+    number: number;
+    state: StageState;
+    size?: StageSize;
+    colorScheme?: StageColorScheme;
+    onClick?: () => void;
+    isReadOnly?: boolean;
+    disabled?: boolean;
+    showCheck?: boolean;
+    isFirst: boolean;
+    isLast: boolean;
+    /** Connector entering this node is part of a completed segment. */
+    leftDone: boolean;
+    /** Connector leaving this node is part of a completed segment. */
+    rightDone: boolean;
+    scrollIntoViewWhenActive?: boolean;
+}
+export interface StagePalette {
+    soft: string;
+    softText: string;
+    strong: string;
+    onStrong: string;
+    hover: string;
+    muted: string;
+    mutedText: string;
+}
+/** Resolve a chevron palette for a given color scheme from the theme. */
+export declare const resolveStagePalette: (theme: CustomThemeProps, colorScheme?: StageColorScheme) => StagePalette;

package/dist/Components/StageProgress/StageProgressProps.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveStagePalette = void 0;
+var SEMANTIC = ["success", "error", "warning", "info"];
+/** Resolve a chevron palette for a given color scheme from the theme. */
+var resolveStagePalette = function (theme, colorScheme) {
+    var _a;
+    if (colorScheme === void 0) { colorScheme = "primary"; }
+    var colors = theme.colors;
+    var scale = SEMANTIC.includes(colorScheme)
+        ? theme.colors.semantic[colorScheme]
+        : colors[colorScheme];
+    var gray = (_a = colors.gray) !== null && _a !== void 0 ? _a : {};
+    var get = function (s, k, fb) {
+        return (s && s[k]) || fb;
+    };
+    return {
+        soft: get(scale, 100, "#E6F0FF"),
+        softText: get(scale, 700, "#1D4ED8"),
+        strong: get(scale, 500, "#3B82F6"),
+        onStrong: theme.colors.white || "#FFFFFF",
+        hover: get(scale, 600, "#2563EB"),
+        muted: get(gray, 100, "#F1F5F9"),
+        mutedText: get(gray, 500, "#64748B"),
+    };
+};
+exports.resolveStagePalette = resolveStagePalette;

package/dist/Components/StageProgress/StepperStage.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { StepperStageProps } from "./StageProgressProps";
+declare const StepperStage: React.FC<StepperStageProps>;
+export default StepperStage;

package/dist/Components/StageProgress/StepperStage.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var StageProgressProps_1 = require("./StageProgressProps");
+var sizeMap = {
+    sm: { circle: "24px", font: "0.7rem", label: "0.7rem", icon: 12, minW: "84px" },
+    md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
+    lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
+};
+var StepperStage = function (_a) {
+    var label = _a.label, number = _a.number, state = _a.state, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.colorScheme, colorScheme = _c === void 0 ? "primary" : _c, onClick = _a.onClick, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showCheck, showCheck = _f === void 0 ? true : _f, isFirst = _a.isFirst, isLast = _a.isLast, leftDone = _a.leftDone, rightDone = _a.rightDone, _g = _a.scrollIntoViewWhenActive, scrollIntoViewWhenActive = _g === void 0 ? true : _g;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
+    var ref = (0, react_1.useRef)(null);
+    var s = sizeMap[size];
+    var interactive = !isReadOnly && !disabled;
+    (0, react_1.useEffect)(function () {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                inline: "center",
+                block: "nearest",
+            });
+        }
+    }, [state, scrollIntoViewWhenActive]);
+    var filled = state === "active" || state === "completed";
+    var circleBg = filled ? palette.strong : theme.colors.white;
+    var circleColor = filled ? palette.onStrong : palette.mutedText;
+    var circleBorder = filled ? palette.strong : palette.muted;
+    var line = function (done, hidden) { return (react_1.default.createElement(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" })); };
+    return (react_1.default.createElement(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, role: "group", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined },
+        react_1.default.createElement(react_2.Flex, { align: "center", width: "100%" },
+            line(leftDone, isFirst),
+            react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+                    ? { boxShadow: "0 0 0 4px ".concat(palette.soft) }
+                    : undefined, _groupHover: interactive
+                    ? { borderColor: palette.strong, color: filled ? palette.onStrong : palette.strong }
+                    : undefined }, showCheck && state === "completed" ? react_1.default.createElement(lucide_react_1.Check, { size: s.icon }) : number),
+            line(rightDone, isLast)),
+        react_1.default.createElement(react_2.Text, { mt: 2, px: 1, fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, _groupHover: interactive ? { color: palette.strong } : undefined }, label)));
+};
+exports.default = StepperStage;

package/dist/Components/Table/Table.js

@@ -78,30 +78,30 @@ var Button_1 = __importDefault(require("../Button/Button"));
 var lucide_react_1 = require("lucide-react");
 var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
 function Table(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _14 = _a.isCheckbox, isCheckbox = _14 === void 0 ? false : _14, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _15 = _a.noBorders, noBorders = _15 === void 0 ? false : _15, _16 = _a.isPagination, isPagination = _16 === void 0 ? true : _16, onRowClick = _a.onRowClick, selections = _a.selections, _17 = _a.isActionFreeze, isActionFreeze = _17 === void 0 ? true : _17, _18 = _a.preferences, preferences = _18 === void 0 ? {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _13 = _a.isCheckbox, isCheckbox = _13 === void 0 ? false : _13, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _14 = _a.noBorders, noBorders = _14 === void 0 ? false : _14, _15 = _a.isPagination, isPagination = _15 === void 0 ? true : _15, onRowClick = _a.onRowClick, selections = _a.selections, _16 = _a.isActionFreeze, isActionFreeze = _16 === void 0 ? true : _16, _17 = _a.preferences, preferences = _17 === void 0 ? {
         url: "",
         token: "",
         key: "",
         name: "",
         page: "",
         orgId: "",
-    } : _18, _19 = _a.paginationMode, paginationMode = _19 === void 0 ? "client" : _19, _20 = _a.infiniteScroll, infiniteScroll = _20 === void 0 ? false : _20, hasMore = _a.hasMore, _21 = _a.isLoadingMore, isLoadingMore = _21 === void 0 ? false : _21, _22 = _a.groupLoadMore, groupLoadMore = _22 === void 0 ? false : _22, _23 = _a.loadMoreText, loadMoreText = _23 === void 0 ? "Load more" : _23, _24 = _a.loadMorePosition, loadMorePosition = _24 === void 0 ? "top" : _24, loadMoreChunkSize = _a.loadMoreChunkSize, _25 = _a.noOfRowsPerPage, noOfRowsPerPage = _25 === void 0 ? 50 : _25, _26 = _a.totalRecords, totalRecords = _26 === void 0 ? 0 : _26, onPagination = _a.onPagination, _27 = _a.isTableSettings, isTableSettings = _27 === void 0 ? false : _27, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows, defaultVisibleColumns = _a.defaultVisibleColumns, _28 = _a.density, density = _28 === void 0 ? "normal" : _28, stripe = _a.stripe, groupColors = _a.groupColors, onAddItem = _a.onAddItem, emptyState = _a.emptyState;
+    } : _17, _18 = _a.paginationMode, paginationMode = _18 === void 0 ? "client" : _18, _19 = _a.infiniteScroll, infiniteScroll = _19 === void 0 ? false : _19, hasMore = _a.hasMore, _20 = _a.isLoadingMore, isLoadingMore = _20 === void 0 ? false : _20, _21 = _a.groupLoadMore, groupLoadMore = _21 === void 0 ? false : _21, _22 = _a.loadMoreText, loadMoreText = _22 === void 0 ? "Load more" : _22, _23 = _a.loadMorePosition, loadMorePosition = _23 === void 0 ? "top" : _23, loadMoreChunkSize = _a.loadMoreChunkSize, _24 = _a.noOfRowsPerPage, noOfRowsPerPage = _24 === void 0 ? 50 : _24, _25 = _a.totalRecords, totalRecords = _25 === void 0 ? 0 : _25, onPagination = _a.onPagination, _26 = _a.isTableSettings, isTableSettings = _26 === void 0 ? false : _26, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows, defaultVisibleColumns = _a.defaultVisibleColumns, _27 = _a.density, density = _27 === void 0 ? "normal" : _27, stripe = _a.stripe, groupColors = _a.groupColors, onAddItem = _a.onAddItem, emptyState = _a.emptyState;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _29 = (0, react_1.useState)({}), columnsSearch = _29[0], setColumnsSearch = _29[1];
+    var _28 = (0, react_1.useState)({}), columnsSearch = _28[0], setColumnsSearch = _28[1];
     var tableContainerRef = (0, react_1.useRef)(null);
-    var _30 = (0, react_2.useDisclosure)(), isFilterModalOpen = _30.isOpen, onFilterModalOpen = _30.onOpen, onFilterModalClose = _30.onClose;
+    var _29 = (0, react_2.useDisclosure)(), isFilterModalOpen = _29.isOpen, onFilterModalOpen = _29.onOpen, onFilterModalClose = _29.onClose;
     var filterMode = (_b = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterMode) !== null && _b !== void 0 ? _b : "sidebar";
-    var _31 = (0, react_1.useState)(500), viewportAvailableH = _31[0], setViewportAvailableH = _31[1];
+    var _30 = (0, react_1.useState)(500), viewportAvailableH = _30[0], setViewportAvailableH = _30[1];
     var isServerPagination = paginationMode === "server";
-    var _32 = (0, usePreferences_1.useGetPreferences)({
+    var _31 = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }), tablePreferencesData = _32.preferences, loading = _32.loading;
+    }), tablePreferencesData = _31.preferences, loading = _31.loading;
     var savePreferences = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
@@ -119,7 +119,7 @@ function Table(_a) {
         }
         return {};
     }, [tablePreferencesData]);
-    var _33 = (0, useTable_1.default)({
+    var _32 = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
@@ -133,17 +133,17 @@ function Table(_a) {
         isServerPagination: isServerPagination,
         onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
         defaultVisibleColumns: defaultVisibleColumns,
-    }), tableData = _33.tableData, isContent = _33.isContent, isLink = _33.isLink, headerRefs = _33.headerRefs, columnWidths = _33.columnWidths, handleSort = _33.handleSort, handleCheckbox = _33.handleCheckbox, filteredData = _33.filteredData, startRow = _33.startRow, endRow = _33.endRow, selection = _33.selection, columnsSort = _33.columnsSort, currentPage = _33.currentPage, pages = _33.pages, rowsPerPage = _33.rowsPerPage, handlePageSizeChange = _33.handlePageSizeChange, setCurrentPage = _33.setCurrentPage, columnsList = _33.columnsList, handleColumnPreferences = _33.handleColumnPreferences, isSelecting = _33.isSelecting;
+    }), tableData = _32.tableData, isContent = _32.isContent, isLink = _32.isLink, headerRefs = _32.headerRefs, columnWidths = _32.columnWidths, handleSort = _32.handleSort, handleCheckbox = _32.handleCheckbox, filteredData = _32.filteredData, startRow = _32.startRow, endRow = _32.endRow, selection = _32.selection, columnsSort = _32.columnsSort, currentPage = _32.currentPage, pages = _32.pages, rowsPerPage = _32.rowsPerPage, handlePageSizeChange = _32.handlePageSizeChange, setCurrentPage = _32.setCurrentPage, columnsList = _32.columnsList, handleColumnPreferences = _32.handleColumnPreferences, isSelecting = _32.isSelecting, selectAllRowsRef = _32.selectAllRowsRef;
     // Density + grouping are managed here so the Table Settings tabs can change +
     // persist them (seeded from the prop / saved preferences when they load).
-    var _34 = (0, react_1.useState)(density), densityState = _34[0], setDensityState = _34[1];
+    var _33 = (0, react_1.useState)(density), densityState = _33[0], setDensityState = _33[1];
     // Grouping is chosen by the user in Table Settings > Group and persisted to
     // preferences (`json.groupBy`); there is no `groupBy` prop.
-    var _35 = (0, react_1.useState)(undefined), groupByState = _35[0], setGroupByState = _35[1];
+    var _34 = (0, react_1.useState)(undefined), groupByState = _34[0], setGroupByState = _34[1];
     // Grouped "Load more" accumulates pages here so loading more ADDS rows to the
     // groups (server pagination replaces `data` each fetch). Reset on fresh loads
     // (search / filter / sort / page-size). Only used in grouped + groupLoadMore mode.
-    var _36 = (0, react_1.useState)([]), accumulatedRows = _36[0], setAccumulatedRows = _36[1];
+    var _35 = (0, react_1.useState)([]), accumulatedRows = _35[0], setAccumulatedRows = _35[1];
     var pendingLoadMoreRef = (0, react_1.useRef)(false);
     // Pages loaded so far (1 = the initial page). The next page is derived from this
     // counter — NOT from the deduped row count — so overlapping rows across pages
@@ -152,15 +152,6 @@ function Table(_a) {
     (0, react_1.useEffect)(function () {
         if (!groupLoadMore)
             return;
-        // eslint-disable-next-line no-console
-        console.log("[Table][loadMore] data change", {
-            incoming: tableData.length,
-            incomingIds: tableData.slice(0, 50).map(function (r) { return r.id; }),
-            accumulated: accumulatedRows.length,
-            newRows: tableData.filter(function (r) { return !new Set(accumulatedRows.map(function (a) { return a.id; })).has(r.id); }).length,
-            pending: pendingLoadMoreRef.current,
-            loadedPages: loadedPagesRef.current,
-        });
         setAccumulatedRows(function (prev) {
             if (prev.length === 0) {
                 loadedPagesRef.current = 1;
@@ -188,6 +179,19 @@ function Table(_a) {
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tableData, groupLoadMore]);
+    // Page-size change restarts the accumulation (the page boundaries change), so the
+    // next "Load more" requests page 2 of the NEW size, not a stale page index.
+    var rowsPerPageMountedRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        if (!rowsPerPageMountedRef.current) {
+            rowsPerPageMountedRef.current = true;
+            return;
+        }
+        pendingLoadMoreRef.current = false;
+        loadedPagesRef.current = 1;
+        setAccumulatedRows(tableData); // current page at the new size (not empty)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rowsPerPage]);
     (0, react_1.useEffect)(function () {
         if (tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.density)
             setDensityState(tablePreferences.density);
@@ -226,7 +230,10 @@ function Table(_a) {
         : isServerPagination
             ? loadMoreBase.length < totalRecords
             : false;
-    var canGroupLoadMore = isGrouped && groupLoadMore && hasMoreEffective;
+    var groupLoadMoreActive = isGrouped && groupLoadMore;
+    // Keep the button while a load is in flight (so a transient empty `data` during
+    // fetching doesn't make it flicker); hide it once loading settles with no more.
+    var canGroupLoadMore = groupLoadMoreActive && (hasMoreEffective || isLoadingMore);
     var groupPalette = (0, react_1.useMemo)(function () { return (0, table_1.buildTablePalette)(theme); }, [theme]);
     var groupedSource = (0, react_1.useMemo)(function () {
         if (!isGrouped)
@@ -239,6 +246,18 @@ function Table(_a) {
             return undefined;
         return (0, table_1.groupRows)(groupedSource, groupByState).map(function (g) { return (__assign(__assign({}, g), { color: (0, table_1.pickTableColor)(g.value, groupPalette, groupColors === null || groupColors === void 0 ? void 0 : groupColors[g.value]) })); });
     }, [isGrouped, groupedSource, groupByState, groupPalette, groupColors]);
+    // "Select all" + header checkbox operate on the rows actually rendered: the
+    // accumulated grouped source when grouped, otherwise the table data.
+    var selectAllRows = isGrouped ? groupedSource : tableData;
+    selectAllRowsRef.current = isGrouped ? groupedSource : null;
+    var headerChecked = (0, react_1.useMemo)(function () {
+        if (selection.length === 0)
+            return false;
+        if (selectAllRows.length === 0)
+            return false;
+        var sel = new Set(selection);
+        return selectAllRows.every(function (r) { return sel.has(r.id); }) ? true : "indeterminate";
+    }, [selection, selectAllRows]);
     var onPaginationRef = (0, react_1.useRef)(onPagination);
     onPaginationRef.current = onPagination;
     var prevPageRef = (0, react_1.useRef)(currentPage);
@@ -271,23 +290,29 @@ function Table(_a) {
         var _a;
         if (isLoadingMore || isTableLoading || !hasMoreEffective)
             return;
-        var chunk = loadMoreChunkSize !== null && loadMoreChunkSize !== void 0 ? loadMoreChunkSize : rowsPerPage;
+        // Must request the SAME page size the data was loaded with — a page-count model
+        // breaks if pages have different sizes (e.g. page size 100 but a 20-row chunk
+        // re-requests already-loaded records). `loadMoreChunkSize` is only a last-resort
+        // fallback and is otherwise ignored.
+        var chunk = rowsPerPage || loadMoreChunkSize || 20;
         // Advance by page COUNT (not by deduped row count) so overlapping/pinned rows
         // across pages don't keep us stuck on the same page.
         var nextPage = loadedPagesRef.current + 1;
         loadedPagesRef.current = nextPage;
         var lastRecord = loadMoreBase.length > 0 ? loadMoreBase[loadMoreBase.length - 1] : undefined;
         pendingLoadMoreRef.current = true;
-        // eslint-disable-next-line no-console
-        console.log("[Table][loadMore] click → request page", nextPage, {
-            chunk: chunk,
-            accumulated: loadMoreBase.length,
-            totalRecords: totalRecords,
-            hasMore: hasMoreEffective,
-        });
         (_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, nextPage, chunk, lastRecord, "next");
     };
-    var groupLoadMoreCaption = totalRecords > 0 ? "Showing ".concat(loadMoreBase.length, " of ").concat(totalRecords) : undefined;
+    // While more can load → live count; once everything's loaded → "Showing all
+    // records" (the running total isn't shown because de-duped/server totals can
+    // disagree, e.g. "250 of 250" would be misleading).
+    var groupLoadMoreCaption = !groupLoadMoreActive || isTableLoading || loadMoreBase.length === 0
+        ? undefined
+        : canGroupLoadMore
+            ? totalRecords > 0
+                ? "Showing ".concat(loadMoreBase.length, " of ").concat(totalRecords)
+                : "Showing ".concat(loadMoreBase.length)
+            : "Showing all records";
     var tablePaginationText = (0, react_1.useMemo)(function () { return isServerPagination
         ? "".concat(startRow + 1, " - ").concat(Math.min(startRow + rowsPerPage, totalRecords), " of ").concat(totalRecords)
         : "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(tableData.length); }, [startRow, rowsPerPage, totalRecords, endRow, tableData.length]);
@@ -406,9 +431,9 @@ function Table(_a) {
                         react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))),
                     react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
                     react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
-                        canGroupLoadMore && loadMorePosition === "top" && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto" },
+                        groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto" },
                             groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[500], whiteSpace: "nowrap" }, groupLoadMoreCaption)),
-                            react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))),
+                            canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))),
                         (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 0 auto" },
                             react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))),
                         (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
@@ -461,17 +486,13 @@ function Table(_a) {
                             },
                         } },
                         react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_2 = (_1 = (_0 = theme.colors.table) === null || _0 === void 0 ? void 0 : _0.hover) === null || _1 === void 0 ? void 0 : _1[200]) !== null && _2 !== void 0 ? _2 : (_3 = theme.colors.secondary) === null || _3 === void 0 ? void 0 : _3[50] },
-                            react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
-                                    ? true
-                                    : selection.length === 0
-                                        ? false
-                                        : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
+                            react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
                         react_1.default.createElement(react_3.Tbody, null,
-                            react_1.default.createElement(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_6 = theme.colors) === null || _6 === void 0 ? void 0 : _6.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
+                            react_1.default.createElement(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
                     canInfinite && isLoadingMore && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2 },
-                        react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_8 = (_7 = theme.colors) === null || _7 === void 0 ? void 0 : _7.primary) === null || _8 === void 0 ? void 0 : _8[500] }),
-                        react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_10 = (_9 = theme.colors) === null || _9 === void 0 ? void 0 : _9.text) === null || _10 === void 0 ? void 0 : _10[500] }, "Loading more\u2026")))),
-                canGroupLoadMore && loadMorePosition === "bottom" && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: "0.063rem solid ".concat((_11 = theme.colors.border) === null || _11 === void 0 ? void 0 : _11[500]) },
-                    groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_13 = (_12 = theme.colors) === null || _12 === void 0 ? void 0 : _12.text) === null || _13 === void 0 ? void 0 : _13[500] }, groupLoadMoreCaption)),
-                    react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))))));
+                        react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_7 = (_6 = theme.colors) === null || _6 === void 0 ? void 0 : _6.primary) === null || _7 === void 0 ? void 0 : _7[500] }),
+                        react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_9 = (_8 = theme.colors) === null || _8 === void 0 ? void 0 : _8.text) === null || _9 === void 0 ? void 0 : _9[500] }, "Loading more\u2026")))),
+                groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: "0.063rem solid ".concat((_10 = theme.colors.border) === null || _10 === void 0 ? void 0 : _10[500]) },
+                    groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_12 = (_11 = theme.colors) === null || _11 === void 0 ? void 0 : _11.text) === null || _12 === void 0 ? void 0 : _12[500] }, groupLoadMoreCaption)),
+                    canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))))))));
 }

package/dist/Components/Table/TableProps.d.ts

@@ -38,6 +38,8 @@ export type TableProps = {
     groupLoadMore?: boolean;
     loadMoreText?: string;
     loadMorePosition?: "top" | "bottom";
+    /** @deprecated Ignored — load more always uses the current page size (`noOfRowsPerPage`)
+     *  so page boundaries stay consistent. Kept only for backward compatibility. */
     loadMoreChunkSize?: number;
     noOfRowsPerPage?: number;
     totalRecords?: number;
@@ -121,7 +123,7 @@ export type ColumnSortingProps = {
     column: string | number;
     direction: "asc" | "desc" | "none";
 };
-export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
+export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
     handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
     isPopoverOpen?: boolean;
@@ -170,7 +172,7 @@ export type TableFiltersProps = {
     columnsSearch: string;
     onClose: () => void;
 };
-export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
+export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "freezedBgColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
     header: TableHeaderProps;
     index: number;
     columnWidths: number[];

package/dist/Components/Table/components/Pagination.js

@@ -49,7 +49,7 @@ var Pagination = react_1.default.memo(function (_a) {
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
     var isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
     return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap" },
-        (!isServerPagination || paginationSelectOptions) && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
+        (!isServerPagination || paginationSelectOptions) && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: "auto", minW: "4.5rem", isDisabled: dataLength === 0 },
             !paginationSelectOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
             computedOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, String(size))); }))),
         dataLength > 0 && (react_1.default.createElement(react_2.Flex, { w: "100%" },

package/dist/Components/Table/components/TableBody.js

@@ -62,14 +62,14 @@ var StatusCell = function (_a) {
 var EMPTY_SX = {};
 var EMPTY_HOVER = {};
 var TableRow = react_2.default.memo(function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     var row = _a.row, rowIndex = _a.rowIndex, index = _a.index, isChecked = _a.isChecked, isExpanded = _a.isExpanded, isContent = _a.isContent, isLink = _a.isLink, isCheckbox = _a.isCheckbox, isLoading = _a.isLoading, isActionFreeze = _a.isActionFreeze, columns = _a.columns, leftOffsets = _a.leftOffsets, noBorders = _a.noBorders, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, theme = _a.theme, borderStyle = _a.borderStyle, hoverStyle = _a.hoverStyle, rowHeight = _a.rowHeight, cellPy = _a.cellPy, palette = _a.palette, accentColor = _a.accentColor, handleCheckbox = _a.handleCheckbox, onRowClick = _a.onRowClick, toggleRowExpansion = _a.toggleRowExpansion, onMeasure = _a.onMeasure;
-    var checkedSx = (0, react_2.useMemo)(function () {
-        var _a, _b, _c;
-        return isChecked ? {
-            "& td": { backgroundColor: (_c = (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[16]) !== null && _c !== void 0 ? _c : theme.colors.disabled[100] },
-        } : EMPTY_SX;
-    }, [isChecked, (_b = theme.colors.primary) === null || _b === void 0 ? void 0 : _b.opacity, theme.colors.disabled]);
+    // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
+    // cells keep their solid color + white text instead of white-on-tint.
+    var selectedBg = (_d = (_c = (_b = theme.colors.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[16]) !== null && _d !== void 0 ? _d : (_e = theme.colors.disabled) === null || _e === void 0 ? void 0 : _e[100];
+    // Sticky/frozen cells overlay scrolling content, so their selected background
+    // must be OPAQUE — paint the (translucent) tint over an opaque base.
+    var selectedFrozenBg = "linear-gradient(0deg, ".concat(selectedBg, ", ").concat(selectedBg, "), ").concat((_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#fff");
     // Measured-height virtualization: report this row's real height (main + any
     // expanded panel) so the windower can place variable/expandable rows exactly.
     var mainRowRef = (0, react_2.useRef)(null);
@@ -108,10 +108,13 @@ var TableRow = react_2.default.memo(function (_a) {
     }, [row, onRowClick]);
     var firstDataColIndex = columns.findIndex(function (c) { return !c.isHidden; });
     var accentSx = accentColor ? "inset 3px 0 0 ".concat(accentColor) : undefined;
+    // Pinned/frozen columns get a tinted, opaque background so the frozen pane reads
+    // as one piece with its header (and so sticky cells cover scrolling content).
+    var frozenCellBg = (_m = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_l = (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.table) === null || _k === void 0 ? void 0 : _k.hover) === null || _l === void 0 ? void 0 : _l[100]) !== null && _m !== void 0 ? _m : (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.background) === null || _p === void 0 ? void 0 : _p[100];
     return (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.Tr, { ref: mainRowRef, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: checkedSx },
-            isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, !!(row === null || row === void 0 ? void 0 : row.content) && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" })))),
-            isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50], textTransform: "capitalize", backgroundColor: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j[50], position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
+        react_2.default.createElement(react_1.Tr, { ref: mainRowRef, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s" },
+            isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, !!(row === null || row === void 0 ? void 0 : row.content) && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" })))),
+            isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.background) === null || _s === void 0 ? void 0 : _s[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
                 react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked }))),
             columns.map(function (header, headerIndex) {
                 var _a, _b, _c, _d, _e, _f, _g;
@@ -124,7 +127,7 @@ var TableRow = react_2.default.memo(function (_a) {
                 var statusColor = isStatus
                     ? (0, table_1.pickTableColor)(rawStatus, palette, (_b = header.statusColors) === null || _b === void 0 ? void 0 : _b[rawStatus])
                     : null;
-                return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: "".concat(rowHeight, "px"), py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, key: headerIndex + 1, onClick: function () { return handleCellClick(header); }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: isStatus && statusColor ? statusColor.solid : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
+                return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: "".concat(rowHeight, "px"), py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, key: headerIndex + 1, onClick: function () { return handleCellClick(header); }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
                         ? "none"
                         : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isStatus && statusColor ? "white" : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: isStatus && statusColor
                         ? EMPTY_HOVER
@@ -132,7 +135,7 @@ var TableRow = react_2.default.memo(function (_a) {
                             ? EMPTY_HOVER
                             : hoverStyle }, isStatus && statusColor ? (react_2.default.createElement(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]) })) : (react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id])))));
             }),
-            isLink && (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: (_l = (_k = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))))),
+            isLink && (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : (_u = (_t = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))))),
         row.content && isExpanded && (react_2.default.createElement(react_1.Tr, { ref: expandedRowRef },
             react_2.default.createElement(react_1.Td, { colSpan: columns.length +
                     (isCheckbox ? 1 : 0) +