npm - pixelize-design-library - Versions diffs - 2.2.93 → 2.2.95 - Mend

pixelize-design-library 2.2.93 → 2.2.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/Components/Header/components/mobileMenu.js CHANGED Viewed

@@ -26,7 +26,7 @@ var MobileMenu = function (_a) {
                                 : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (react_2.default.createElement(lucide_react_1.ChevronDown, { size: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { size: 16 })), px: 2 },
                             react_2.default.createElement(react_1.HStack, { w: "full", justify: "space-between", align: "center" },
                                 react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                                    item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, item.badge.label)),
+                                    item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", borderRadius: "full", px: 2, py: 0.5 }, item.badge.label)),
                                     react_2.default.createElement(react_1.Text, { fontWeight: "bold" }, item.label)))),
                         react_2.default.createElement(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true },
                             react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1, spacing: 1 }, item.children.map(function (subItem) {
@@ -37,10 +37,10 @@ var MobileMenu = function (_a) {
                                         onClose === null || onClose === void 0 ? void 0 : onClose();
                                     }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
                                     react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
-                                        subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
+                                        subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", borderRadius: "full", px: 2, py: 0.5 }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
                                         react_2.default.createElement(react_1.HStack, { spacing: 2, align: "center" },
                                             react_2.default.createElement(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }),
-                                            react_2.default.createElement(react_1.Text, { fontSize: "xs" }, subItem.label)))));
+                                            react_2.default.createElement(react_1.Text, { fontSize: "sm" }, subItem.label)))));
                             }))))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: function () { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
                         react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
                             item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.6em" }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),

package/dist/Components/ProductCard/ProductReview.js CHANGED Viewed

@@ -10,10 +10,20 @@ var ProductReview = function (_a) {
     var rating = _a.rating, reviewCount = _a.reviewCount, _b = _a.mb, mb = _b === void 0 ? 0 : _b;
     var hasRating = rating !== undefined && rating !== null;
     var hasReviewCount = reviewCount !== undefined && reviewCount !== null;
+    // Get colors from theme
+    var yellow400 = (0, react_2.useToken)('colors', ['yellow.400'])[0];
+    // Convert rating to number and ensure it's between 0 and 5
+    // Calculate fill percentage: (rating / 5) * 100%
+    var numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
+    var fillPercentage = (numericRating / 6) * 100;
     return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: mb },
-        hasRating && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "1", bg: "teal.900", color: "white", px: 2, borderRadius: "md", fontSize: "sm", fontWeight: "bold" },
-            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Star, boxSize: 3.5, color: "yellow.400", fill: "yellow.400" }),
-            react_1.default.createElement(react_2.Text, null, rating))),
+        hasRating && (react_1.default.createElement(react_2.Flex, { align: "center", gap: 1, bg: "teal.900", color: "white", px: 2, borderRadius: "md" },
+            react_1.default.createElement(react_2.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0 },
+                react_1.default.createElement(react_2.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px" },
+                    react_1.default.createElement(lucide_react_1.Star, { size: 14, color: "white", fill: "none", stroke: "white", strokeWidth: 1.5 })),
+                fillPercentage > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: 0, left: 0, width: "".concat(fillPercentage, "%"), height: "100%", overflow: "hidden" },
+                    react_1.default.createElement(lucide_react_1.Star, { size: 14, color: yellow400, fill: yellow400 })))),
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "white" }, numericRating))),
         hasRating && hasReviewCount && react_1.default.createElement(react_2.Box, { h: "4", w: "0.063rem", bg: "gray.400" }),
         hasReviewCount && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "1" },
             react_1.default.createElement(react_2.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }),

package/dist/Components/ProductCard/ProductTags.js CHANGED Viewed

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 var ProductTags = function (_a) {
     var tags = _a.tags, className = _a.className, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
     var getRows = function (tags) {
@@ -30,6 +31,20 @@ var Tag = function (_a) {
         md: { fontSize: '0.875rem', px: '0.75rem', py: '0.3rem' },
         lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
     };
-    return (react_1.default.createElement(react_2.Box, { flex: fullWidth ? '1' : '1', border: "0.063rem solid #f9aaa4", color: "black", fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap" }, children));
+    var ref = react_1.default.useRef(null);
+    var _d = react_1.default.useState(false), truncated = _d[0], setTruncated = _d[1];
+    react_1.default.useEffect(function () {
+        var el = ref.current;
+        if (!el)
+            return;
+        var check = function () { return setTruncated(el.scrollWidth > el.clientWidth); };
+        check();
+        window.addEventListener('resize', check);
+        return function () {
+            window.removeEventListener('resize', check);
+        };
+    }, [children]);
+    var content = (react_1.default.createElement(react_2.Box, { ref: ref, flex: fullWidth ? '1' : '1', border: "0.063rem solid #f9aaa4", color: "black", fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children));
+    return truncated ? (react_1.default.createElement(ToolTip_1.default, { label: String(children), hasArrow: true, openDelay: 300, placement: 'bottom' }, content)) : (content);
 };
 exports.default = ProductTags;

package/dist/Components/Table/Components/ActiveFilters.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import React from "react";
+import { TableHeaderProps } from "../TableProps";
+interface ActiveFiltersProps {
+    columns: TableHeaderProps[];
+    columnsSearch: Record<string, string>;
+    setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}
+declare const ActiveFilters: React.FC<ActiveFiltersProps>;
+export default ActiveFilters;

package/dist/Components/Table/Components/ActiveFilters.js ADDED Viewed

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var Divider_1 = __importDefault(require("../../Divider/Divider"));
+var ActiveFilters = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var columns = _a.columns, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    // Get active filters (columns that have a search value)
+    var activeFilters = Object.entries(columnsSearch)
+        .filter(function (_a) {
+        var _ = _a[0], value = _a[1];
+        return value && value.trim() !== "";
+    })
+        .map(function (_a) {
+        var columnId = _a[0], value = _a[1];
+        var column = columns.find(function (col) { return col.id === columnId; });
+        return {
+            columnId: columnId,
+            label: (column === null || column === void 0 ? void 0 : column.label) || columnId,
+            value: value.trim(),
+        };
+    });
+    if (activeFilters.length === 0) {
+        return null;
+    }
+    var handleRemoveFilter = function (columnId) {
+        setColumnsSearch(function (prev) {
+            var newSearch = __assign({}, prev);
+            delete newSearch[columnId];
+            return newSearch;
+        });
+    };
+    var handleClearAll = function () {
+        setColumnsSearch({});
+    };
+    return (react_1.default.createElement(react_2.Box, { px: 2, py: 1, bg: ((_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[100]) || ((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[50]), overflowX: "auto", sx: {
+            '&::-webkit-scrollbar': {
+                height: '6px',
+            },
+            '&::-webkit-scrollbar-track': {
+                background: theme.colors.gray[100],
+                borderRadius: '3px',
+            },
+            '&::-webkit-scrollbar-thumb': {
+                background: theme.colors.gray[400],
+                borderRadius: '3px',
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+                background: theme.colors.gray[500],
+            },
+            scrollbarWidth: 'thin',
+            scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
+        } },
+        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content" },
+            activeFilters.length > 0 && react_1.default.createElement(Divider_1.default, null),
+            activeFilters.map(function (filter) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                return (react_1.default.createElement(react_2.Flex, { key: filter.columnId, alignItems: "center", gap: 1, px: 2, py: 1, bg: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.blue) === null || _b === void 0 ? void 0 : _b[50]) || ((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[50]), borderRadius: "md", border: "0.063rem solid ".concat(((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blue) === null || _f === void 0 ? void 0 : _f[200]) || ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[200])), flexShrink: 0 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[700], whiteSpace: "nowrap" },
+                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: 600 },
+                            filter.label,
+                            ":"),
+                        " ",
+                        filter.value),
+                    react_1.default.createElement(react_2.IconButton, { "aria-label": "Remove filter for ".concat(filter.label), icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", onClick: function () { return handleRemoveFilter(filter.columnId); }, _hover: {
+                            bg: ((_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.blue) === null || _m === void 0 ? void 0 : _m[100]) || ((_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[100]),
+                        }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })));
+            }),
+            activeFilters.length > 1 && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: ((_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.blue) === null || _g === void 0 ? void 0 : _g[600]) || ((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[600]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+                    textDecoration: "underline",
+                }, flexShrink: 0, whiteSpace: "nowrap" }, "Clear all")))));
+};
+exports.default = ActiveFilters;

package/dist/Components/Table/Components/TableFilters.d.ts CHANGED Viewed

@@ -1,4 +1,7 @@
 import React from "react";
 import { TableFiltersProps } from "../TableProps";
-declare const TableFilters: React.MemoExoticComponent<({ header, setColumnsSearch, columnsSearch, onClose }: TableFiltersProps) => React.JSX.Element>;
+declare const TableFilters: React.MemoExoticComponent<({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }: TableFiltersProps & {
+    isOpen?: boolean | undefined;
+    onOpen?: (() => void) | undefined;
+}) => React.JSX.Element>;
 export default TableFilters;

package/dist/Components/Table/Components/TableFilters.js CHANGED Viewed

@@ -28,7 +28,7 @@ var react_2 = require("@chakra-ui/react");
 var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
 var TableFilters = (0, react_1.memo)(function (_a) {
-    var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose;
+    var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose, isOpen = _a.isOpen, onOpen = _a.onOpen;
     var searchRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)(false), refreshDataOnOpen = _b[0], setRefreshDataOnOpen = _b[1];
     var debounceRef = (0, table_1.debounce)(function (value) {
@@ -40,9 +40,21 @@ var TableFilters = (0, react_1.memo)(function (_a) {
         }
         /* eslint-disable */
     }, [refreshDataOnOpen]);
-    return (react_1.default.createElement(react_2.Popover, { onClose: onClose, onOpen: function () {
-            setRefreshDataOnOpen(function (prev) { return !prev; });
-        } },
+    // Auto-focus input when popover opens
+    (0, react_1.useEffect)(function () {
+        if (isOpen && searchRef.current) {
+            // Small delay to ensure popover is fully rendered
+            setTimeout(function () {
+                var _a;
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
+    }, [isOpen]);
+    var handleOpen = function () {
+        setRefreshDataOnOpen(function (prev) { return !prev; });
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    };
+    return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen },
         react_1.default.createElement(react_2.PopoverTrigger, null,
             react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
         react_1.default.createElement(react_2.Portal, null,
@@ -50,7 +62,7 @@ var TableFilters = (0, react_1.memo)(function (_a) {
                 react_1.default.createElement(react_2.PopoverBody, { p: 2 },
                     react_1.default.createElement(react_2.InputGroup, { flex: "1", size: "xs" },
                         react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
-                            react_1.default.createElement(lucide_react_1.Search, { color: "gray.300" })),
+                            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, color: "gray.400", boxSize: 4 })),
                         react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
                                 e.stopPropagation();
                                 debounceRef(e.target.value);

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

@@ -47,6 +47,7 @@ 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;
     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;
         return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_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[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
@@ -73,7 +74,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 }));
+            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 }));
         }),
         isLink && react_2.default.createElement(RenderView, null)));
 };
@@ -88,7 +89,7 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
 });
 var ColumnHeader = (0, react_2.memo)(function (_a) {
     var _b, _c, _d, _e, _f, _g;
-    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;
+    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 _h = (0, react_2.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isFrozen = header.isFreeze;
@@ -142,6 +143,9 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
                             var _a;
                             return (__assign(__assign({}, prev), (_a = {}, _a[header.id] = searchVal, _a)));
                         });
-                    }, columnsSearch: columnsSearch[header.id] || "", onClose: function () { return setIsHovered(false); } })),
+                    }, columnsSearch: columnsSearch[header.id] || "", onClose: function () {
+                        setIsHovered(false);
+                        setOpenFilterId(null);
+                    }, isOpen: openFilterId === header.id, onOpen: function () { return setOpenFilterId(header.id); } })),
             react_2.default.createElement("div", { className: "resize-handle", onMouseDown: handleMouseDown }))));
 });

package/dist/Components/Table/Table.js CHANGED Viewed

@@ -40,6 +40,7 @@ var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
 var HeaderActions_1 = __importDefault(require("./Components/HeaderActions"));
 var Divider_1 = __importDefault(require("../Divider/Divider"));
 var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
+var ActiveFilters_1 = __importDefault(require("./Components/ActiveFilters"));
 function Table(_a) {
     var _b, _c, _d, _e, _f, _g;
     var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _h = _a.isCheckbox, isCheckbox = _h === void 0 ? false : _h, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _j = _a.noBorders, noBorders = _j === void 0 ? false : _j, _k = _a.isPagination, isPagination = _k === void 0 ? true : _k, onRowClick = _a.onRowClick, selections = _a.selections, _l = _a.isActionFreeze, isActionFreeze = _l === void 0 ? true : _l, _m = _a.preferences, preferences = _m === void 0 ? {
@@ -52,11 +53,6 @@ function Table(_a) {
     } : _m, _o = _a.paginationMode, paginationMode = _o === void 0 ? "client" : _o, _p = _a.noOfRowsPerPage, noOfRowsPerPage = _p === void 0 ? 50 : _p, _q = _a.totalRecords, totalRecords = _q === void 0 ? 0 : _q, onPagination = _a.onPagination, _r = _a.isTableSettings, isTableSettings = _r === void 0 ? false : _r, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, tableSettings = _a.tableSettings;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _s = (0, react_1.useState)({}), columnsSearch = _s[0], setColumnsSearch = _s[1];
-    //   useEffect(() => {
-    //   if (onColumnFilter) {
-    //     onColumnFilter(columnsSearch);
-    //   }
-    // }, [columnsSearch, onColumnFilter]);
     var isServerPagination = paginationMode === "server";
     var _t = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferences.url,
@@ -114,7 +110,8 @@ function Table(_a) {
             selection.length ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(Divider_1.default, null),
                 react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
-            (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto" },
+            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, isVisiblity: true })))),
         react_1.default.createElement(react_2.TableContainer, { maxH: 500, overflowY: "auto", sx: {
                 '&::-webkit-scrollbar': {

package/package.json CHANGED Viewed

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