pixelize-design-library 2.3.1-beta.11 → 2.3.1-beta.13

package/dist/Components/LazyWrapper/LazyWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface LazyWrapperProps {
+    children: React.ReactNode;
+    /** Custom fallback node. Overrides the default spinner. */
+    fallback?: React.ReactNode;
+    /** Min height of the default fallback container. */
+    minHeight?: string;
+}
+declare const LazyWrapper: React.FC<LazyWrapperProps>;
+export default LazyWrapper;

package/dist/Components/LazyWrapper/LazyWrapper.js

@@ -0,0 +1,50 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var DefaultFallback = function (_a) {
+    var _b, _c;
+    var minHeight = _a.minHeight;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem" },
+        react_1.default.createElement(react_2.Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: (_c = (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[100]) !== null && _c !== void 0 ? _c : "#EDF2F7", color: theme.colors.primary[500] })));
+};
+var LazyWrapper = function (_a) {
+    var children = _a.children, fallback = _a.fallback, _b = _a.minHeight, minHeight = _b === void 0 ? "400px" : _b;
+    return (react_1.default.createElement(react_1.Suspense, { fallback: fallback !== null && fallback !== void 0 ? fallback : react_1.default.createElement(DefaultFallback, { minHeight: minHeight }) }, children));
+};
+exports.default = LazyWrapper;

package/dist/Components/MoreItems/MoreItems.d.ts

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

package/dist/Components/MoreItems/MoreItems.js

@@ -0,0 +1,35 @@
+"use strict";
+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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var MoreItems = function (_a) {
+    var _b, _c;
+    var items = _a.items, moreCount = _a.moreCount, triggerText = _a.triggerText, colorResolver = _a.colorResolver, _d = _a.hideDots, hideDots = _d === void 0 ? false : _d, _e = _a.columns, columns = _e === void 0 ? 2 : _e, _f = _a.minWidth, minWidth = _f === void 0 ? "260px" : _f, _g = _a.triggerMaxWidth, triggerMaxWidth = _g === void 0 ? "250px" : _g, _h = _a.trigger, trigger = _h === void 0 ? "hover" : _h, _j = _a.placement, placement = _j === void 0 ? "bottom-start" : _j;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
+    if (count <= 0)
+        return triggerText ? react_1.default.createElement(react_1.default.Fragment, null, triggerText) : null;
+    return (react_1.default.createElement(react_2.Popover, { trigger: trigger, placement: placement, isLazy: true },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer" },
+                triggerText !== undefined && (react_1.default.createElement(react_2.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, triggerText)),
+                react_1.default.createElement(react_2.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: (_b = theme.colors.primary[600]) !== null && _b !== void 0 ? _b : theme.colors.primary[500], bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: (_c = theme.colors.primary[100]) !== null && _c !== void 0 ? _c : theme.colors.primary[50] } },
+                    "+",
+                    count,
+                    " more"))),
+        react_1.default.createElement(react_2.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "12px", boxShadow: "0 8px 24px rgba(0,0,0,0.12)", _focus: { outline: "none", boxShadow: "0 8px 24px rgba(0,0,0,0.12)" } },
+            react_1.default.createElement(react_2.PopoverArrow, null),
+            react_1.default.createElement(react_2.PopoverBody, { p: 3 },
+                react_1.default.createElement(react_2.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2 }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    var color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : ((_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : "#A0AEC0");
+                    return (react_1.default.createElement(react_2.Box, { key: (_e = item.id) !== null && _e !== void 0 ? _e : index, display: "flex", alignItems: "center", gap: "8px", minW: 0 },
+                        !hideDots && (react_1.default.createElement(react_2.Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })),
+                        react_1.default.createElement(react_2.Text, { fontSize: "13px", color: (_g = (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[700]) !== null && _g !== void 0 ? _g : "#2D3748", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, item.label)));
+                }))))));
+};
+exports.default = MoreItems;

package/dist/Components/MoreItems/MoreItemsProps.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+export interface MoreItem {
+    id: string | number;
+    label: string;
+    /** Optional leading dot color. Falls back to colorResolver or a neutral gray. */
+    color?: string;
+}
+export interface MoreItemsProps {
+    /** Items shown inside the popover. */
+    items: MoreItem[];
+    /** Number rendered in the "+N more" trigger. Defaults to items.length. */
+    moreCount?: number;
+    /** Text shown before the "+N more" pill (e.g. the first visible value). */
+    triggerText?: ReactNode;
+    /** Derive a dot color per item; takes precedence is given to item.color. */
+    colorResolver?: (item: MoreItem) => string | undefined;
+    /** Hide the colored leading dot entirely. */
+    hideDots?: boolean;
+    /** Columns inside the popover grid. */
+    columns?: number;
+    /** Min width of the popover panel. */
+    minWidth?: string;
+    /** Max width of the trigger before truncation. */
+    triggerMaxWidth?: string;
+    /** Open on "hover" (default) or "click". */
+    trigger?: "hover" | "click";
+    /** Popover placement. */
+    placement?: "bottom-start" | "bottom-end" | "bottom" | "top" | "right" | "left";
+}

package/dist/Components/MoreItems/MoreItemsProps.js

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

package/dist/Components/PdfViewer/PdfViewer.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface PdfViewerProps {
+    /** URL of the PDF to embed. */
+    pdfUrl: string;
+    /** File name shown in the toolbar. */
+    fileName?: string;
+    /** Height of the embed. */
+    height?: string;
+    /** Show the toolbar (name + open + download). */
+    showToolbar?: boolean;
+    /** Border radius of the frame. */
+    borderRadius?: string;
+}
+declare const PdfViewer: React.FC<PdfViewerProps>;
+export default PdfViewer;

package/dist/Components/PdfViewer/PdfViewer.js

@@ -0,0 +1,29 @@
+"use strict";
+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 lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var PdfViewer = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var pdfUrl = _a.pdfUrl, _p = _a.fileName, fileName = _p === void 0 ? "Document.pdf" : _p, _q = _a.height, height = _q === void 0 ? "480px" : _q, _r = _a.showToolbar, showToolbar = _r === void 0 ? true : _r, _s = _a.borderRadius, borderRadius = _s === void 0 ? "12px" : _s;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Box, { border: "1px solid", borderColor: (_c = (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : "#E2E8F0", borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.white },
+        showToolbar && (react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: (_e = (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[100]) !== null && _e !== void 0 ? _e : "#EDF2F7", bg: (_g = (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : "#F8FAFC" },
+            react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
+                react_1.default.createElement(lucide_react_1.FileText, { size: 18, color: theme.colors.primary[500] }),
+                react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: 500, color: (_j = (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[700]) !== null && _j !== void 0 ? _j : "#2D3748", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, fileName)),
+            react_1.default.createElement(react_2.Flex, { align: "center", gap: 1 },
+                react_1.default.createElement(ToolTip_1.default, { label: "Open in new tab", placement: "top" },
+                    react_1.default.createElement(react_2.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "8px", color: (_l = (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : "#4A5568", _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] } },
+                        react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16 }))),
+                react_1.default.createElement(ToolTip_1.default, { label: "Download", placement: "top" },
+                    react_1.default.createElement(react_2.Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "8px", color: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[600]) !== null && _o !== void 0 ? _o : "#4A5568", _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] } },
+                        react_1.default.createElement(lucide_react_1.Download, { size: 16 })))))),
+        react_1.default.createElement(react_2.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })));
+};
+exports.default = PdfViewer;

package/dist/Components/ScrollToTop/ScrollToTop.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface ScrollToTopProps {
+    /** Content to wrap. The button watches the nearest scrollable ancestor. */
+    children: React.ReactNode;
+    /** Tooltip label on the button. */
+    tooltipLabel?: string;
+    /** Scroll distance (px) after which the button appears. */
+    threshold?: number;
+    /** Smooth-scroll duration in ms. */
+    duration?: number;
+    /** Pin to a window-level scroll instead of the wrapped parent. */
+    useWindow?: boolean;
+    /** Distance from the bottom edge. */
+    bottom?: string;
+    /** Distance from the right edge. */
+    right?: string;
+}
+declare const ScrollToTop: React.FC<ScrollToTopProps>;
+export default ScrollToTop;

package/dist/Components/ScrollToTop/ScrollToTop.js

@@ -0,0 +1,104 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var ScrollToTop = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.tooltipLabel, tooltipLabel = _c === void 0 ? "Scroll to top" : _c, _d = _a.threshold, threshold = _d === void 0 ? 300 : _d, _e = _a.duration, duration = _e === void 0 ? 600 : _e, _f = _a.useWindow, useWindow = _f === void 0 ? false : _f, _g = _a.bottom, bottom = _g === void 0 ? "2rem" : _g, _h = _a.right, right = _h === void 0 ? "2rem" : _h;
+    var _j = (0, react_1.useState)(false), visible = _j[0], setVisible = _j[1];
+    var anchorRef = (0, react_1.useRef)(null);
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var getScroller = function () {
+        var _a, _b;
+        if (useWindow)
+            return window;
+        return (_b = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null;
+    };
+    var handleScroll = function () {
+        var _a;
+        var scroller = getScroller();
+        var top = scroller === window
+            ? window.scrollY
+            : (_a = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTop) !== null && _a !== void 0 ? _a : 0;
+        setVisible(top >= threshold);
+    };
+    var scrollToTop = function () {
+        var scroller = getScroller();
+        if (!scroller)
+            return;
+        var start = scroller === window ? window.scrollY : scroller.scrollTop;
+        var startTime = performance.now();
+        var step = function (now) {
+            var progress = Math.min((now - startTime) / duration, 1);
+            var eased = progress < 0.5
+                ? 2 * progress * progress
+                : -1 + (4 - 2 * progress) * progress;
+            var next = start * (1 - eased);
+            if (scroller === window)
+                window.scrollTo(0, next);
+            else
+                scroller.scrollTop = next;
+            if (progress < 1)
+                requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    };
+    (0, react_1.useEffect)(function () {
+        var scroller = getScroller();
+        if (!scroller)
+            return;
+        scroller.addEventListener("scroll", handleScroll);
+        handleScroll();
+        return function () { return scroller.removeEventListener("scroll", handleScroll); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [useWindow, threshold]);
+    return (react_1.default.createElement(react_2.Box, { ref: anchorRef, position: "relative" },
+        children,
+        react_1.default.createElement(ToolTip_1.default, { label: tooltipLabel, placement: "left" },
+            react_1.default.createElement(react_2.Box, { onClick: scrollToTop, role: "button", "aria-label": tooltipLabel, position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[500], color: theme.colors.white, boxShadow: "0 4px 14px rgba(0,0,0,0.25)", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
+                    bg: (_b = theme.colors.primary[600]) !== null && _b !== void 0 ? _b : theme.colors.primary[500],
+                    transform: "translateY(-2px) scale(1.05)",
+                    boxShadow: "0 6px 20px rgba(0,0,0,0.3)",
+                }, _active: { transform: "scale(0.95)" } },
+                react_1.default.createElement(lucide_react_1.ChevronUp, { size: 24, strokeWidth: 2.5 })))));
+};
+exports.default = ScrollToTop;

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, selectAllRowsRef = _33.selectAllRowsRef;
+    }), 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
@@ -486,13 +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: headerChecked, 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")))),
-                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((_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(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

@@ -123,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;
@@ -172,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/TableHeader.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableHeaderPageProps } from "../TableProps";
-declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => React.JSX.Element>;
 export default _default;

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

@@ -55,12 +55,12 @@ var TableFilters_1 = __importDefault(require("../filters/TableFilters"));
 var lucide_react_1 = require("lucide-react");
 var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableHeader = function (_a) {
-    var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, isSelecting = _a.isSelecting;
+    var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, isSelecting = _a.isSelecting;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
     var RenderCheckbox = (0, react_2.useCallback)(function () {
-        var _a, _b, _c, _d, _e;
-        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]) }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]) }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
     }, [
         checked,
         freezedTextColor,
@@ -71,12 +71,12 @@ var TableHeader = function (_a) {
         theme.colors,
     ]);
     var RenderConent = (0, react_2.useCallback)(function () {
-        var _a, _b, _c;
-        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1 }));
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors]);
     var RenderView = (0, react_2.useCallback)(function () {
-        var _a, _b, _c;
-        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors, isActionFreeze]);
     return (react_2.default.createElement(react_1.Tr, { pr: 0 },
         isContent && react_2.default.createElement(RenderConent, null),
@@ -84,7 +84,7 @@ var TableHeader = function (_a) {
         columns.map(function (header, index) {
             if (header === null || header === void 0 ? void 0 : header.isHidden)
                 return null;
-            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, headerTextColor: headerTextColor, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }));
+            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, freezedBgColor: freezedBgColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }));
         }),
         isLink && react_2.default.createElement(RenderView, null)));
 };
@@ -100,7 +100,7 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
 });
 var ColumnHeader = (0, react_2.memo)(function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort, openFilterId = _a.openFilterId, setOpenFilterId = _a.setOpenFilterId;
+    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort, openFilterId = _a.openFilterId, setOpenFilterId = _a.setOpenFilterId;
     var _v = (0, react_2.useState)(false), isHovered = _v[0], setIsHovered = _v[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isFrozen = header.isFreeze;

package/dist/index.d.ts

@@ -60,5 +60,13 @@ import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
 import Notification from "./Components/Notification/Notification";
 import DatePicker from "./Components/DatePicker/ThemeDatePicker";
 import FilterSidebar from "./Components/FilterSidebar/FilterSidebar";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FilterSidebar, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+import EmptyState from "./Components/EmptyState/EmptyState";
+import MoreItems from "./Components/MoreItems/MoreItems";
+import ScrollToTop from "./Components/ScrollToTop/ScrollToTop";
+import CopyButton from "./Components/CopyButton/CopyButton";
+import FieldSelectModal from "./Components/FieldSelectModal/FieldSelectModal";
+import PdfViewer from "./Components/PdfViewer/PdfViewer";
+import LazyWrapper from "./Components/LazyWrapper/LazyWrapper";
+import FilePreview, { FilePreviewTrigger } from "./Components/FilePreview/FilePreview";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -37,8 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = void 0;
+exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -174,4 +174,21 @@ var ThemeDatePicker_1 = __importDefault(require("./Components/DatePicker/ThemeDa
 exports.DatePicker = ThemeDatePicker_1.default;
 var FilterSidebar_1 = __importDefault(require("./Components/FilterSidebar/FilterSidebar"));
 exports.FilterSidebar = FilterSidebar_1.default;
+var EmptyState_1 = __importDefault(require("./Components/EmptyState/EmptyState"));
+exports.EmptyState = EmptyState_1.default;
+var MoreItems_1 = __importDefault(require("./Components/MoreItems/MoreItems"));
+exports.MoreItems = MoreItems_1.default;
+var ScrollToTop_1 = __importDefault(require("./Components/ScrollToTop/ScrollToTop"));
+exports.ScrollToTop = ScrollToTop_1.default;
+var CopyButton_1 = __importDefault(require("./Components/CopyButton/CopyButton"));
+exports.CopyButton = CopyButton_1.default;
+var FieldSelectModal_1 = __importDefault(require("./Components/FieldSelectModal/FieldSelectModal"));
+exports.FieldSelectModal = FieldSelectModal_1.default;
+var PdfViewer_1 = __importDefault(require("./Components/PdfViewer/PdfViewer"));
+exports.PdfViewer = PdfViewer_1.default;
+var LazyWrapper_1 = __importDefault(require("./Components/LazyWrapper/LazyWrapper"));
+exports.LazyWrapper = LazyWrapper_1.default;
+var FilePreview_1 = __importStar(require("./Components/FilePreview/FilePreview"));
+exports.FilePreview = FilePreview_1.default;
+Object.defineProperty(exports, "FilePreviewTrigger", { enumerable: true, get: function () { return FilePreview_1.FilePreviewTrigger; } });
 exports.default = withTheme_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.3.1-beta.11",
+  "version": "2.3.1-beta.13",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",