pixelize-design-library 2.2.109 → 2.2.111

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ApexLineChartProps } from "./ApexLineChartProps";
-declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, variant, }: ApexLineChartProps) => React.JSX.Element;
+declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, compact, toolbarBreakpointPct, titleClampLines, showTitleEllipsis, showSeries, series: seriesNames, variant, }: ApexLineChartProps) => React.JSX.Element;
 export default ApexLineChart;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -37,34 +37,85 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 var ApexLineChart = function (_a) {
-    var data = _a.data, labels = _a.labels, title = _a.title, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 600 : _c, _d = _a.lineColors, lineColors = _d === void 0 ? ["#3182ce", "#e53e3e", "#38a169"] : _d, _e = _a.titlePosition, titlePosition = _e === void 0 ? "center" : _e, _f = _a.titleStyle, titleStyle = _f === void 0 ? {
+    var data = _a.data, labels = _a.labels, title = _a.title, height = _a.height, width = _a.width, _b = _a.lineColors, lineColors = _b === void 0 ? ["#3182ce", "#e53e3e", "#38a169"] : _b, _c = _a.titlePosition, titlePosition = _c === void 0 ? "center" : _c, _d = _a.titleStyle, titleStyle = _d === void 0 ? {
         color: "#3182ce",
         fontSize: "16px",
         fontWeight: 600,
         fontFamily: "Arial",
-    } : _f, _g = _a.variant, variant = _g === void 0 ? "basic" : _g;
-    var _h = (0, react_1.useState)([
+    } : _d, _e = _a.compact, compact = _e === void 0 ? false : _e, _f = _a.toolbarBreakpointPct, toolbarBreakpointPct = _f === void 0 ? 0.6 : _f, titleClampLines = _a.titleClampLines, _g = _a.showTitleEllipsis, showTitleEllipsis = _g === void 0 ? true : _g, _h = _a.showSeries, showSeries = _h === void 0 ? true : _h, seriesNames = _a.series, _j = _a.variant, variant = _j === void 0 ? "basic" : _j;
+    var initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
+    var _k = (0, react_1.useState)([
         {
-            name: "Series 1",
+            name: initialName,
             data: Array.isArray(data) ? data : [],
         },
-    ]), series = _h[0], setSeries = _h[1];
-    // 🔄 Handle realtime updates
+    ]), apexSeries = _k[0], setApexSeries = _k[1];
     (0, react_1.useEffect)(function () {
         if (variant === "realtime") {
             var interval_1 = setInterval(function () {
-                setSeries(function (prev) {
+                setApexSeries(function (prev) {
                     var newData = __spreadArray([], prev[0].data, true);
                     newData.push(Math.floor(Math.random() * 100) + 10); // simulate
                     if (newData.length > 20)
                         newData.shift(); // keep window size
-                    return [{ name: "Series 1", data: newData }];
+                    return [{ name: prev[0].name, data: newData }];
                 });
             }, 1000);
             return function () { return clearInterval(interval_1); };
         }
     }, [variant]);
+    var wrapperRef = (0, react_1.useRef)(null);
+    var _l = (0, react_1.useState)(0), containerW = _l[0], setContainerW = _l[1];
+    (0, react_1.useEffect)(function () {
+        if (!wrapperRef.current)
+            return;
+        var ro = new ResizeObserver(function (entries) {
+            var _a, _b;
+            var w = ((_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.width) || 0;
+            setContainerW(w);
+        });
+        ro.observe(wrapperRef.current);
+        return function () { return ro.disconnect(); };
+    }, []);
+    var parsePercent = function (v) {
+        var n = parseFloat(v.replace('%', ''));
+        return isNaN(n) ? 0 : n / 100;
+    };
+    var chartW = typeof width === "number"
+        ? width
+        : typeof width === "string" && width.trim().endsWith("%")
+            ? containerW * parsePercent(width.trim())
+            : containerW;
+    var hNum = typeof height === "number"
+        ? height
+        : 0;
+    var isSmall = compact || (chartW > 0 && chartW < 280) || (hNum > 0 && hNum < 220);
+    var computedFontSize = (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize) ||
+        (chartW
+            ? "".concat(Math.max(12, Math.min(18, Math.floor(chartW / 18))), "px")
+            : "14px");
+    var clampLines = titleClampLines !== null && titleClampLines !== void 0 ? titleClampLines : (isSmall ? 2 : 1);
+    var titleRef = (0, react_1.useRef)(null);
+    var _m = (0, react_1.useState)(false), isTruncated = _m[0], setIsTruncated = _m[1];
+    (0, react_1.useEffect)(function () {
+        var el = titleRef.current;
+        if (!el)
+            return;
+        if (clampLines > 1) {
+            setIsTruncated(el.scrollHeight > el.clientHeight);
+        }
+        else {
+            setIsTruncated(el.scrollWidth > el.clientWidth);
+        }
+    }, [title, chartW, width, clampLines]);
+    var ratio = containerW > 0
+        ? chartW / containerW
+        : typeof width === "string" && width.trim().endsWith("%")
+            ? parsePercent(width.trim())
+            : 1;
+    var showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
     var options = {
         chart: {
             type: "line",
@@ -76,7 +127,7 @@ var ApexLineChart = function (_a) {
                 }
                 : { enabled: false },
             zoom: { enabled: true },
-            toolbar: { show: true },
+            toolbar: { show: showToolbar },
         },
         stroke: { curve: "smooth" },
         colors: lineColors,
@@ -84,14 +135,42 @@ var ApexLineChart = function (_a) {
             ? { categories: labels }
             : { type: variant === "realtime" ? "numeric" : "category" },
         title: {
-            text: title,
+            text: isSmall ? undefined : title,
             align: titlePosition !== null && titlePosition !== void 0 ? titlePosition : "center",
             style: titleStyle,
         },
-        markers: { size: 4 },
+        tooltip: {
+            enabled: !!showSeries,
+            marker: { show: !!showSeries },
+        },
+        markers: { size: showSeries ? 4 : 0, hover: { size: showSeries ? 4 : 0 } },
         dataLabels: { enabled: false },
+        grid: { padding: { top: isSmall ? 6 : 16, right: 8, left: 8 } },
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "line", height: height, width: width })));
+    return (react_1.default.createElement("div", { ref: wrapperRef },
+        title && isSmall && (react_1.default.createElement(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", bg: "#4A5568", color: "#fff", isDisabled: !isTruncated },
+            react_1.default.createElement("div", { ref: titleRef, style: {
+                    textAlign: "left",
+                    color: titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.color,
+                    fontSize: computedFontSize,
+                    fontWeight: titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontWeight,
+                    fontFamily: titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontFamily,
+                    marginBottom: 4,
+                    width: typeof width === "string"
+                        ? width
+                        : typeof width === "number"
+                            ? "".concat(width, "px")
+                            : "100%",
+                    whiteSpace: clampLines > 1 ? "normal" : "nowrap",
+                    overflow: "hidden",
+                    textOverflow: showTitleEllipsis && clampLines === 1 ? "ellipsis" : "clip",
+                    display: clampLines > 1 ? "-webkit-box" : undefined,
+                    WebkitLineClamp: clampLines > 1 ? clampLines : undefined,
+                    WebkitBoxOrient: clampLines > 1 ? "vertical" : undefined,
+                    wordBreak: clampLines > 1 ? "break-word" : undefined,
+                    lineHeight: clampLines > 1 ? "1.2em" : undefined,
+                    maxHeight: clampLines > 1 ? "".concat(1.2 * clampLines, "em") : undefined,
+                } }, title))),
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: apexSeries, type: "line", height: height, width: width })));
 };
 exports.default = ApexLineChart;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts

@@ -2,21 +2,27 @@ export type ApexLineChartProps = {
     variant?: LineChartVariant;
     data: number[];
     labels?: string[];
+    series?: string[];
     title?: string;
-    height?: number;
-    width?: number;
+    height?: number | string;
+    width?: number | string;
     lineColors?: string[];
     titlePosition?: "left" | "center" | "right";
+    showSeries?: boolean;
     titleStyle?: {
         color?: string;
         fontSize?: string;
         fontWeight?: number | string;
         fontFamily?: string;
     };
+    compact?: boolean;
+    titleClampLines?: number;
+    showTitleEllipsis?: boolean;
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;
         position?: "top" | "right" | "bottom" | "left";
     };
+    toolbarBreakpointPct?: number;
 };
 export type LineChartVariant = "basic" | "realtime";

package/dist/Components/FilterSidebar/FilterSidebar.d.ts

@@ -34,6 +34,8 @@ export type FilterSidebarProps = {
     headerPadding?: number;
     panelPadding?: number;
     sliderMode?: "chakra" | "native";
+    clearAllButton?: boolean;
+    onClearAllHandler?: () => void;
 };
 declare const FilterSidebar: React.FC<FilterSidebarProps>;
 export default FilterSidebar;

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -44,13 +44,17 @@ var Accordion_1 = __importDefault(require("../Accordion/Accordion"));
 var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var FilterSidebar = function (_a) {
-    var sidebarOptions = _a.sidebarOptions, selected = _a.selected, onChange = _a.onChange, _b = _a.maxVisible, maxVisible = _b === void 0 ? 10 : _b, _c = _a.width, width = _c === void 0 ? 280 : _c, _d = _a.variant, variant = _d === void 0 ? "minimal" : _d, containerPadding = _a.containerPadding, containerHeight = _a.containerHeight, _e = _a.headerPadding, headerPadding = _e === void 0 ? 2 : _e, _f = _a.panelPadding, panelPadding = _f === void 0 ? 3 : _f, _g = _a.sliderMode, sliderMode = _g === void 0 ? "native" : _g;
+    var sidebarOptions = _a.sidebarOptions, selected = _a.selected, onChange = _a.onChange, _b = _a.maxVisible, maxVisible = _b === void 0 ? 10 : _b, _c = _a.width, width = _c === void 0 ? 280 : _c, _d = _a.variant, variant = _d === void 0 ? "minimal" : _d, containerPadding = _a.containerPadding, containerHeight = _a.containerHeight, 
+    // headerPadding = 2,
+    _e = _a.panelPadding, 
+    // headerPadding = 2,
+    panelPadding = _e === void 0 ? 3 : _e, _f = _a.clearAllButton, clearAllButton = _f === void 0 ? true : _f, onClearAllHandler = _a.onClearAllHandler;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _h = (0, react_1.useState)({}), openPrice = _h[0], setOpenPrice = _h[1];
+    var _g = (0, react_1.useState)({}), openPrice = _g[0], setOpenPrice = _g[1];
     // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
     var isControlled = selected !== undefined;
     // Local state for uncontrolled mode
-    var _j = (0, react_1.useState)(function () { return (__assign({}, (selected || {}))); }), localSelected = _j[0], setLocalSelected = _j[1];
+    var _h = (0, react_1.useState)(function () { return (__assign({}, (selected || {}))); }), localSelected = _h[0], setLocalSelected = _h[1];
     // Derived state: use prop if controlled, otherwise local state
     var internalSelected = (selected !== undefined ? selected : localSelected);
     // Wrapper for state updates to handle both modes
@@ -62,12 +66,12 @@ var FilterSidebar = function (_a) {
             setLocalSelected(next);
         }
     };
-    var _k = (0, react_1.useState)(function () {
+    var _j = (0, react_1.useState)(function () {
         var initial = {};
         sidebarOptions.forEach(function (s) { return (initial[s.id] = !!s.initiallyExpanded); });
         return initial;
-    }), expanded = _k[0], setExpanded = _k[1];
-    var _l = (0, react_1.useState)({}), searchTerms = _l[0], setSearchTerms = _l[1];
+    }), expanded = _j[0], setExpanded = _j[1];
+    var _k = (0, react_1.useState)({}), searchTerms = _k[0], setSearchTerms = _k[1];
     var activeCount = (0, react_1.useMemo)(function () {
         return Object.values(internalSelected).reduce(function (acc, v) { return acc + (Array.isArray(v) ? v.length : 0); }, 0);
     }, [internalSelected]);
@@ -99,6 +103,7 @@ var FilterSidebar = function (_a) {
         });
     };
     var clearAll = function () {
+        onClearAllHandler === null || onClearAllHandler === void 0 ? void 0 : onClearAllHandler();
         setInternalSelected(function () {
             var next = {};
             onChange === null || onChange === void 0 ? void 0 : onChange(next);
@@ -107,7 +112,8 @@ var FilterSidebar = function (_a) {
     };
     var items = sidebarOptions.map(function (section) { return ({
         header: (react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "center", w: "full", py: 1 },
-            react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.gray[700] }, section.label),
+            react_1.default.createElement(react_2.Tooltip, { label: section.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
+                react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.gray[700], textAlign: "left", isTruncated: true, flex: "1", minW: 0 }, section.label)),
             (function () {
                 var sel = internalSelected[section.id];
                 var hasValue = Array.isArray(sel) ? sel.length > 0 : !!sel;
@@ -115,7 +121,7 @@ var FilterSidebar = function (_a) {
             })() ? (react_1.default.createElement(react_2.Badge, { colorScheme: "red", variant: "solid", fontSize: "xs", cursor: "pointer", onClick: function (e) {
                     e.stopPropagation();
                     clearFilter(section.id);
-                }, borderRadius: "full", px: 2 }, "Clear")) : null)),
+                }, borderRadius: "full", px: 2 }, "Clear")) : react_1.default.createElement(lucide_react_1.ChevronDownIcon, { size: 10 }))),
         content: (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, py: 0 }, section.range ? ((function () {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             var range = section.range;
@@ -234,7 +240,7 @@ var FilterSidebar = function (_a) {
                                     currentMax === v ? (react_1.default.createElement(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center" },
                                         react_1.default.createElement(lucide_react_1.Check, { size: 9, color: theme.colors.red[600] }))) : null)); }))))))));
         })()) : (react_1.default.createElement(react_1.default.Fragment, null,
-            section.id === "rating" ? (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, w: "full" }, [4, 3, 2, 1].map(function (r) { return (react_1.default.createElement(react_2.Flex, { key: "rating-".concat(r), align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
+            section.id === "rating" ? (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, w: "full" }, [4, 3, 2, 1].map(function (r) { return (react_1.default.createElement(react_2.Flex, { key: "rating-".concat(r), align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? theme.colors.red[50] : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? "1px solid ".concat(theme.colors.red[200]) : "none", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
                     setInternalSelected(function (prev) {
                         var _a;
                         var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = String(r), _a));
@@ -245,8 +251,7 @@ var FilterSidebar = function (_a) {
                 react_1.default.createElement(react_2.HStack, { spacing: 2, align: "center" },
                     react_1.default.createElement(react_2.HStack, { spacing: 1 }, Array.from({ length: 5 }, function (_, i) { return (react_1.default.createElement(react_2.Box, { key: "star-".concat(r, "-").concat(i) },
                         react_1.default.createElement(lucide_react_1.Star, { size: 16, color: theme.colors.orange[500], fill: i < r ? theme.colors.orange[500] : "none" }))); })),
-                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700] }, "& Up")),
-                String(internalSelected[section.id] || "") === String(r) && (react_1.default.createElement(react_2.Badge, { fontSize: "xs", colorScheme: "red", borderRadius: "full", px: 2 }, "Selected")))); }))) : null,
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700] }, "& Up")))); }))) : null,
             section.searchable && (react_1.default.createElement(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: "Search ".concat(section.label, "..."), borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", borderColor: theme.colors.gray[200], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: function (e) {
                     var v = e.target.value;
                     setSearchTerms(function (prev) {
@@ -336,7 +341,8 @@ var FilterSidebar = function (_a) {
     return (react_1.default.createElement(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.white || "#fff" : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? "1px solid ".concat(theme.colors.gray[200]) : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible" },
         react_1.default.createElement(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100] },
             react_1.default.createElement(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.gray[800] }, "Filters"),
-            activeCount > 0 && (react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", leftIcon: react_1.default.createElement(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red" }, "Clear All"))),
+            activeCount > 0 && clearAllButton && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", leftIcon: react_1.default.createElement(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red" }, "Clear All")))),
         react_1.default.createElement(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map(function (_, i) { return i; }), items: items })));
 };
 exports.default = FilterSidebar;

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

@@ -0,0 +1,15 @@
+import React from "react";
+export type Options = {
+    id: string | number;
+    label: string;
+};
+type Props = {
+    options: Options[];
+    value?: Options;
+    placeholder?: string;
+    height?: string | number;
+    onSelect?: (option: Options) => void;
+    size?: "xs" | "sm";
+};
+declare const CompactSelect: React.FC<Props>;
+export default CompactSelect;

package/dist/Components/Table/CompactSelect.js

@@ -0,0 +1,58 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 CompactSelect = function (_a) {
+    var options = _a.options, value = _a.value, _b = _a.placeholder, placeholder = _b === void 0 ? "Select" : _b, _c = _a.height, height = _c === void 0 ? "22px" : _c, onSelect = _a.onSelect, _d = _a.size, size = _d === void 0 ? "xs" : _d;
+    var _e = (0, react_1.useState)(false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = (0, react_1.useState)(""), query = _f[0], setQuery = _f[1];
+    var filtered = (0, react_1.useMemo)(function () {
+        var q = query.trim().toLowerCase();
+        if (!q)
+            return options;
+        return options.filter(function (o) { return (o.label || "").toLowerCase().includes(q); });
+    }, [query, options]);
+    return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, placement: "bottom-start" },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? "".concat(height, "px") : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: "gray.300", bg: "white", borderRadius: "0.25rem", onClick: function () { return setIsOpen(function (prev) { return !prev; }); } },
+                react_1.default.createElement(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: "gray.800", noOfLines: 1, textAlign: "left" }, (value === null || value === void 0 ? void 0 : value.label) || placeholder),
+                isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 12 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 12 }))),
+        react_1.default.createElement(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0 },
+            react_1.default.createElement(react_2.PopoverBody, { p: 2 },
+                react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" },
+                    react_1.default.createElement(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: function (e) { return setQuery(e.target.value); }, sx: { fontSize: "0.75rem", height: "22px" } }),
+                    react_1.default.createElement(react_2.Box, { maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100" },
+                        filtered.map(function (opt) { return (react_1.default.createElement(react_2.Box, { key: opt.id, px: 2, py: 1, cursor: "pointer", _hover: { bg: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: function () {
+                                onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
+                                setIsOpen(false);
+                                setQuery("");
+                            } },
+                            react_1.default.createElement(react_2.Text, { fontSize: "0.75rem" }, opt.label))); }),
+                        filtered.length === 0 && (react_1.default.createElement(react_2.Box, { px: 2, py: 2 },
+                            react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: "gray.500" }, "No results")))))))));
+};
+exports.default = CompactSelect;

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

@@ -16,7 +16,7 @@ var Pagination = function (_a) {
     // const isRightDisabled = currentPage >= pages - 1;
     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" },
+    return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", minW: 0, overflow: "hidden", flexWrap: "nowrap" },
         !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
             !pageSizeOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
             computedOptions.map(function (size, index) {

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

@@ -80,12 +80,13 @@ var TableHeader = function (_a) {
 };
 exports.default = (0, react_2.memo)(TableHeader);
 var SortingIcon = (0, react_2.memo)(function (_a) {
+    var _b;
     var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", ml: 2, onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
-        sortState === "none" && react_2.default.createElement(lucide_react_1.ChevronsUpDown, { color: "black", size: 14 }),
-        sortState === "asc" && react_2.default.createElement(lucide_react_1.ChevronUp, { color: "black", size: 14 }),
-        sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { color: "black", size: 14 })));
+    return (react_2.default.createElement(react_1.Box, { display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, onClick: handleSortClick, transition: "color 0.2s ease-in-out", color: theme.colors.gray[600], _hover: { color: (_b = theme.colors.secondary) === null || _b === void 0 ? void 0 : _b[500] } },
+        sortState === "none" && react_2.default.createElement(lucide_react_1.ChevronsUpDown, { size: 14 }),
+        sortState === "asc" && react_2.default.createElement(lucide_react_1.ChevronUp, { size: 14 }),
+        sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 })));
 });
 var ColumnHeader = (0, react_2.memo)(function (_a) {
     var _b, _c, _d, _e, _f, _g;
@@ -133,10 +134,10 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
     }, [handleSort]);
     var isFiltersEnabled = (isHovered && header.isSort) ||
         ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
-    return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", fontSize: 16, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[600], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, borderY: noBorders ? "none" : "0.063rem solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.border[500]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 45, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+    return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", fontSize: 16, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[600], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderY: noBorders ? "none" : "0.063rem solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.border[500]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 45, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
         react_2.default.createElement(react_1.Box, { display: "flex", color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.secondary) === null || _g === void 0 ? void 0 : _g[500], lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative" },
-            react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
-            react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center" },
+            react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden" }, header.label),
+            react_2.default.createElement(react_1.Box, { display: "inline-flex", alignItems: "center" },
                 isFiltersEnabled && (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })),
                 react_2.default.createElement(TableFilters_1.default, { header: header, setColumnsSearch: function (searchVal) {
                         return setColumnsSearch(function (prev) {

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

@@ -2,7 +2,11 @@ import React from "react";
 export type FilterItem = {
     id: string;
     label: string;
-    type?: "text";
+    type?: "text" | "select";
+    option?: {
+        id: string;
+        label: string;
+    }[];
 };
 export type FilterSection = {
     id: string;
@@ -15,7 +19,7 @@ export type LeftFilterPaneProps = {
     title?: string;
     height?: number | string;
     sections: FilterSection[];
-    onApply?: (selected: Record<string, string[]>) => void;
+    onApply?: (selected: any) => void;
     onClear?: () => void;
     theme: any;
 };

package/dist/Components/Table/LeftFilterPane.js

@@ -45,6 +45,8 @@ var react_3 = require("@chakra-ui/react");
 var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
 var RadioButton_1 = require("../RadioButton/RadioButton");
 var TextOperationControls_1 = require("./TextOperationControls");
+var SelectOperationControls_1 = require("./SelectOperationControls");
+var CompactSelect_1 = __importDefault(require("./CompactSelect"));
 var LeftFilterPane = function (_a) {
     var _b, _c;
     var _d = _a.title, title = _d === void 0 ? "Filter" : _d, _e = _a.height, height = _e === void 0 ? 500 : _e, sections = _a.sections, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme;
@@ -52,6 +54,7 @@ var LeftFilterPane = function (_a) {
     var _g = (0, react_1.useState)(false), isSearching = _g[0], setIsSearching = _g[1];
     var _h = (0, react_1.useState)({}), selected = _h[0], setSelected = _h[1];
     var _j = (0, react_1.useState)({}), textFilters = _j[0], setTextFilters = _j[1];
+    var _k = (0, react_1.useState)({}), userSelects = _k[0], setUserSelects = _k[1];
     var searchRef = (0, react_1.useRef)(null);
     var setTextOperator = function (itemId, operator) {
         setTextFilters(function (prev) {
@@ -114,7 +117,40 @@ var LeftFilterPane = function (_a) {
             return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = Array.from(cur), _a));
         });
     };
-    var handleApply = function () { return onApply === null || onApply === void 0 ? void 0 : onApply(selected); };
+    var handleApply = function () {
+        var embeddedSelected = {};
+        sections.forEach(function (sec) {
+            var picked = selected[sec.id] || [];
+            if (!picked.length)
+                return;
+            var list = [];
+            picked.forEach(function (itemId) {
+                var _a, _b;
+                var def = (sec.items || []).find(function (i) { return i.id === itemId; });
+                var entry = { id: itemId };
+                if ((def === null || def === void 0 ? void 0 : def.type) === "text") {
+                    var tf = textFilters[itemId];
+                    if (tf && String(tf.value || "").length > 0) {
+                        entry.condition = tf.operator || "contains";
+                        entry.value = String(tf.value);
+                    }
+                }
+                else if ((def === null || def === void 0 ? void 0 : def.type) === "select") {
+                    var tf = textFilters[itemId];
+                    var op = (tf === null || tf === void 0 ? void 0 : tf.operator) || "is";
+                    var sel = (_b = (_a = userSelects[itemId]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : tf === null || tf === void 0 ? void 0 : tf.value;
+                    if (sel !== undefined && sel !== null && String(sel).length > 0) {
+                        entry.condition = op;
+                        entry.value = String(sel);
+                    }
+                }
+                list.push(entry);
+            });
+            embeddedSelected[sec.id] = list;
+        });
+        var payload = { selected: embeddedSelected };
+        onApply === null || onApply === void 0 ? void 0 : onApply(payload);
+    };
     var handleClear = function () {
         setSelected({});
         onClear === null || onClear === void 0 ? void 0 : onClear();
@@ -160,11 +196,32 @@ var LeftFilterPane = function (_a) {
                                 label: it.label,
                                 id: it.id,
                             }); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
-                        ((((_a = (sec.items || []).find(function (i) { return i.id === ((selected[sec.id] && selected[sec.id][0]) || ""); })) === null || _a === void 0 ? void 0 : _a.type) === "text")) && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_b = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _b === void 0 ? void 0 : _b.operator) || "contains", value: ((_c = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _c === void 0 ? void 0 : _c.value) || "", onOperatorChange: function (op) { return setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), op); }, onValueChange: function (val) { return setTextValue(((selected[sec.id] && selected[sec.id][0]) || ""), val); } })))) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
-                        var _a, _b;
+                        ((((_a = (sec.items || []).find(function (i) { return i.id === ((selected[sec.id] && selected[sec.id][0]) || ""); })) === null || _a === void 0 ? void 0 : _a.type) === "text")) && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_b = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _b === void 0 ? void 0 : _b.operator) || "contains", value: ((_c = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _c === void 0 ? void 0 : _c.value) || "", onOperatorChange: function (op) { return setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), op); }, onValueChange: function (val) { return setTextValue(((selected[sec.id] && selected[sec.id][0]) || ""), val); } })),
+                        (function () {
+                            var _a;
+                            var curr = (sec.items || []).find(function (i) { return i.id === ((selected[sec.id] && selected[sec.id][0]) || ""); });
+                            if ((curr === null || curr === void 0 ? void 0 : curr.type) !== "select")
+                                return null;
+                            var opts = curr.selectOption || curr.option || [];
+                            return (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: ((_a = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _a === void 0 ? void 0 : _a.operator) || "is", onOperatorChange: function (op) { return setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), op); }, size: "xs", ml: "1.25rem", mt: 2 }),
+                                react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
+                                    react_1.default.createElement(CompactSelect_1.default, { placeholder: curr.label, size: "xs", height: "22px", options: opts, value: userSelects[((selected[sec.id] && selected[sec.id][0]) || "")], onSelect: function (option) {
+                                            var _a;
+                                            setUserSelects(function (prev) {
+                                                var _a;
+                                                return (__assign(__assign({}, prev), (_a = {}, _a[((selected[sec.id] && selected[sec.id][0]) || "")] = option, _a)));
+                                            });
+                                            if (option) {
+                                                setTextValue(((selected[sec.id] && selected[sec.id][0]) || ""), String(option.id));
+                                                setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), ((_a = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _a === void 0 ? void 0 : _a.operator) || "is");
+                                            }
+                                        } }))));
+                        })())) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
+                        var _a, _b, _c;
                         var checked = (selected[sec.id] || []).includes(it.id);
-                        return (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(Checkbox_1.default, { key: it.id, label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > 18, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: function (e) { return toggleItem(sec.id, it.id, e.target.checked); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
+                        return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
+                            react_1.default.createElement(Checkbox_1.default, { label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > 18, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: function (e) { return toggleItem(sec.id, it.id, e.target.checked); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
                                     '.chakra-checkbox__control': {
                                         width: '12px',
                                         height: '12px',
@@ -176,7 +233,21 @@ var LeftFilterPane = function (_a) {
                                         wordBreak: 'break-word',
                                     },
                                 } }),
-                            checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_a = textFilters[it.id]) === null || _a === void 0 ? void 0 : _a.operator) || "contains", value: ((_b = textFilters[it.id]) === null || _b === void 0 ? void 0 : _b.value) || "", onOperatorChange: function (op) { return setTextOperator(it.id, op); }, onValueChange: function (val) { return setTextValue(it.id, val); } }))));
+                            checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_a = textFilters[it.id]) === null || _a === void 0 ? void 0 : _a.operator) || "contains", value: ((_b = textFilters[it.id]) === null || _b === void 0 ? void 0 : _b.value) || "", onOperatorChange: function (op) { return setTextOperator(it.id, op); }, onValueChange: function (val) { return setTextValue(it.id, val); } })),
+                            checked && it.type === "select" && (react_1.default.createElement(react_2.Box, { mt: 2 },
+                                react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: ((_c = textFilters[it.id]) === null || _c === void 0 ? void 0 : _c.operator) || "is", onOperatorChange: function (op) { return setTextOperator(it.id, op); }, size: "xs", ml: "1.25rem", mt: 2 }),
+                                react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
+                                    react_1.default.createElement(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "22px", options: it.selectOption || it.option || [], value: userSelects[it.id], onSelect: function (option) {
+                                            var _a;
+                                            setUserSelects(function (prev) {
+                                                var _a;
+                                                return (__assign(__assign({}, prev), (_a = {}, _a[it.id] = option, _a)));
+                                            });
+                                            if (option) {
+                                                setTextValue(it.id, String(option.id));
+                                                setTextOperator(it.id, ((_a = textFilters[it.id]) === null || _a === void 0 ? void 0 : _a.operator) || "is");
+                                            }
+                                        } }))))));
                     }))))));
             }))) : (filteredSections.map(function (sec) {
                 var _a, _b, _c;

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

@@ -0,0 +1,8 @@
+import React from "react";
+export declare function SelectOperationControls({ operator, onOperatorChange, size, ml, mt, }: {
+    operator: string;
+    onOperatorChange: (op: string) => void;
+    size?: "xs" | "sm";
+    ml?: string | number;
+    mt?: string | number;
+}): React.JSX.Element;

package/dist/Components/Table/SelectOperationControls.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectOperationControls = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+function SelectOperationControls(_a) {
+    var operator = _a.operator, onOperatorChange = _a.onOperatorChange, _b = _a.size, size = _b === void 0 ? "xs" : _b, _c = _a.ml, ml = _c === void 0 ? "1.25rem" : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d;
+    return (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml },
+        react_1.default.createElement(react_2.Select, { size: size, value: operator, onChange: function (e) { return onOperatorChange(e.target.value); }, sx: { fontSize: "0.75rem", height: "24px" }, width: "90px" },
+            react_1.default.createElement("option", { value: "is" }, "is"),
+            react_1.default.createElement("option", { value: "is not" }, "is not"))));
+}
+exports.SelectOperationControls = SelectOperationControls;

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

@@ -1,3 +1,3 @@
 import React from "react";
 import { TableProps } from "./TableProps";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, tableSettings, filterSidebar }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -46,28 +46,30 @@ var ActiveFilters_1 = __importDefault(require("./Components/ActiveFilters"));
 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;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _q = _a.isCheckbox, isCheckbox = _q === void 0 ? false : _q, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _r = _a.noBorders, noBorders = _r === void 0 ? false : _r, _s = _a.isPagination, isPagination = _s === void 0 ? true : _s, onRowClick = _a.onRowClick, selections = _a.selections, _t = _a.isActionFreeze, isActionFreeze = _t === void 0 ? true : _t, _u = _a.preferences, preferences = _u === void 0 ? {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _s = _a.isCheckbox, isCheckbox = _s === void 0 ? false : _s, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _t = _a.noBorders, noBorders = _t === void 0 ? false : _t, _u = _a.isPagination, isPagination = _u === void 0 ? true : _u, onRowClick = _a.onRowClick, selections = _a.selections, _v = _a.isActionFreeze, isActionFreeze = _v === void 0 ? true : _v, _w = _a.preferences, preferences = _w === void 0 ? {
         url: "",
         token: "",
         key: "",
         name: "",
         page: "",
         orgId: "",
-    } : _u, _v = _a.paginationMode, paginationMode = _v === void 0 ? "client" : _v, _w = _a.noOfRowsPerPage, noOfRowsPerPage = _w === void 0 ? 50 : _w, _x = _a.totalRecords, totalRecords = _x === void 0 ? 0 : _x, onPagination = _a.onPagination, _y = _a.isTableSettings, isTableSettings = _y === void 0 ? false : _y, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar
+    } : _w, _x = _a.paginationMode, paginationMode = _x === void 0 ? "client" : _x, _y = _a.noOfRowsPerPage, noOfRowsPerPage = _y === void 0 ? 50 : _y, _z = _a.totalRecords, totalRecords = _z === void 0 ? 0 : _z, onPagination = _a.onPagination, _0 = _a.isTableSettings, isTableSettings = _0 === void 0 ? false : _0, 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
     // onColumnFilter
     ;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _z = (0, react_1.useState)({}), columnsSearch = _z[0], setColumnsSearch = _z[1];
+    var _1 = (0, react_1.useState)({}), columnsSearch = _1[0], setColumnsSearch = _1[1];
+    var tableContainerRef = (0, react_1.useRef)(null);
+    var _2 = (0, react_1.useState)(500), viewportAvailableH = _2[0], setViewportAvailableH = _2[1];
     var isServerPagination = paginationMode === "server";
-    var _0 = (0, usePreferences_1.useGetPreferences)({
+    var _3 = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }), tablePreferencesData = _0.preferences, loading = _0.loading;
+    }), tablePreferencesData = _3.preferences, loading = _3.loading;
     var savePreferences = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
@@ -85,7 +87,7 @@ function Table(_a) {
         }
         return {};
     }, [tablePreferencesData]);
-    var _1 = (0, useTable_1.default)({
+    var _4 = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
@@ -98,7 +100,7 @@ function Table(_a) {
         totalRecords: totalRecords,
         isServerPagination: isServerPagination,
         onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
-    }), tableData = _1.tableData, isContent = _1.isContent, isLink = _1.isLink, headerRefs = _1.headerRefs, columnWidths = _1.columnWidths, handleSort = _1.handleSort, handleCheckbox = _1.handleCheckbox, filteredData = _1.filteredData, startRow = _1.startRow, endRow = _1.endRow, selection = _1.selection, columnsSort = _1.columnsSort, currentPage = _1.currentPage, pages = _1.pages, rowsPerPage = _1.rowsPerPage, handlePageSizeChange = _1.handlePageSizeChange, setCurrentPage = _1.setCurrentPage, columnsList = _1.columnsList, handleColumnPreferences = _1.handleColumnPreferences;
+    }), tableData = _4.tableData, isContent = _4.isContent, isLink = _4.isLink, headerRefs = _4.headerRefs, columnWidths = _4.columnWidths, handleSort = _4.handleSort, handleCheckbox = _4.handleCheckbox, filteredData = _4.filteredData, startRow = _4.startRow, endRow = _4.endRow, selection = _4.selection, columnsSort = _4.columnsSort, currentPage = _4.currentPage, pages = _4.pages, rowsPerPage = _4.rowsPerPage, handlePageSizeChange = _4.handlePageSizeChange, setCurrentPage = _4.setCurrentPage, columnsList = _4.columnsList, handleColumnPreferences = _4.handleColumnPreferences;
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
@@ -114,14 +116,31 @@ function Table(_a) {
     var minRows = typeof minVisibleRows === "number" ? Math.max(0, minVisibleRows) : 5;
     var maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : 10;
     var visibleRowsCount = Math.max(minRows, Math.min(actualRows, maxRows));
-    var dynamicMaxH = Math.min(500, (visibleRowsCount * estimatedRowHeight) + estimatedRowHeight);
-    var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : dynamicMaxH;
+    (0, react_1.useEffect)(function () {
+        if (!autoFitViewport)
+            return;
+        var compute = function () {
+            if (tableContainerRef.current) {
+                var rect = tableContainerRef.current.getBoundingClientRect();
+                var available = Math.max(200, window.innerHeight - rect.top - 16);
+                setViewportAvailableH(available);
+            }
+        };
+        compute();
+        window.addEventListener("resize", compute);
+        return function () { return window.removeEventListener("resize", compute); };
+    }, [autoFitViewport]);
+    var rowsHeight = (visibleRowsCount * estimatedRowHeight) + estimatedRowHeight;
+    var dynamicMaxH = Math.min(500, rowsHeight);
+    var fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
+    var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : fittedMaxH;
+    var isCompactHeader = (0, react_2.useBreakpointValue)({ base: true, md: true, lg: false });
     return (react_1.default.createElement(react_2.Box, { bg: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], border: "0.063rem solid ".concat((_d = theme.colors.border) === null || _d === void 0 ? void 0 : _d[500]), borderRadius: 3 },
         react_1.default.createElement(react_2.Flex, { align: "start" },
             react_1.default.createElement(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.25 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500], style: { height: controlsHeight + tableMaxH } },
                 react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_f = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _f !== void 0 ? _f : [], onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onChange })),
             react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 2, bg: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[50], borderBottom: "0.063rem solid ".concat((_j = theme.colors.border) === null || _j === void 0 ? void 0 : _j[500]) },
+                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 2, flexWrap: "nowrap", bg: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[50], borderBottom: "0.063rem solid ".concat((_j = theme.colors.border) === null || _j === void 0 ? void 0 : _j[500]) },
                     filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.text) === null || _l === void 0 ? void 0 : _l[500], onClick: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
                         react_1.default.createElement(Divider_1.default, null))),
@@ -133,9 +152,16 @@ function Table(_a) {
                         react_1.default.createElement(Divider_1.default, null),
                         react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
                     react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
-                    (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto", minW: 310 },
-                        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, pageSizeOptions: paginationSelectOptions, isVisiblity: true })))),
-                react_1.default.createElement(react_2.TableContainer, { position: "relative", maxH: tableMaxH, overflowY: "auto", overflowX: "auto", sx: {
+                    react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
+                        (isPagination || isServerPagination) && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 1 280px", minW: 0, overflow: "hidden" },
+                            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, pageSizeOptions: paginationSelectOptions, isVisiblity: true }))),
+                        (isPagination || isServerPagination) && isCompactHeader && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
+                            react_1.default.createElement(react_2.PopoverTrigger, null,
+                                react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.text) === null || _o === void 0 ? void 0 : _o[500] }) })),
+                            react_1.default.createElement(react_2.PopoverContent, { maxW: "18rem", p: 2, overflow: "hidden" },
+                                react_1.default.createElement(react_2.PopoverBody, { p: 0 },
+                                    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, pageSizeOptions: paginationSelectOptions, isVisiblity: true }))))))),
+                react_1.default.createElement(react_2.TableContainer, { ref: tableContainerRef, position: "relative", maxH: tableMaxH, overflowY: "auto", overflowX: "auto", sx: {
                         '&::-webkit-scrollbar': {
                             width: '6px',
                             height: '6px',
@@ -169,12 +195,12 @@ function Table(_a) {
                             },
                         } },
                         react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4 },
-                            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 : (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
+                            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 : (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.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 })),
                         react_1.default.createElement(react_3.Tbody, null,
-                            react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
+                            react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
 }
 exports.default = Table;

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

@@ -29,6 +29,7 @@ export type TableProps = {
     tableMaxHeight?: number;
     minVisibleRows?: number;
     maxVisibleRows?: number;
+    autoFitViewport?: boolean;
     headerActions?: HeaderActionsProps;
     onGlobalSearch?: (searchVal: string) => void;
     onColumnFilter?: (filters: Record<string, any>) => void;

package/dist/Components/Table/TextOperationControls.js

@@ -8,9 +8,9 @@ var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 exports.TEXT_OPERATORS = [
     "is",
-    "isn't",
+    "is not",
     "contains",
-    "doesn't contain",
+    "does not contain",
     "starts with",
     "ends with",
     "is empty",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.109",
+  "version": "2.2.111",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/Assets/defaultLogo.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useCustomTheme } from "../Theme/useCustomTheme";
-
-const DefaultLogo = () => {
-  const theme = useCustomTheme();
-  return (
-    <svg
-      width="12.09"
-      height="15.95"
-      viewBox="0 0 31 29"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
-        fill={theme.colors.black}
-      />
-      <path
-        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
-        fill={theme.colors.black}
-      />
-      <path
-        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
-        fill={theme.colors.black}
-      />
-    </svg>
-
-  )
-};
-
-export default DefaultLogo;