pixelize-design-library 2.2.94 → 2.2.95

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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