pixelize-design-library 2.2.46 → 2.2.47

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, }: 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, tableSettings, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -49,7 +49,7 @@ function Table(_a) {
         name: "",
         page: "",
         orgId: "",
-    } : _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;
+    } : _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(() => {
@@ -110,7 +110,7 @@ function Table(_a) {
             react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
             isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(Divider_1.default, null),
-                react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); } }))),
+                react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings }))),
             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,

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

@@ -23,10 +23,15 @@ export type TableProps = {
     noOfRowsPerPage?: number;
     totalRecords?: number;
     onPagination?: (page: number, noOfRecords: number) => void;
-    isTableSettings?: boolean;
     headerActions?: HeaderActionsProps;
     onGlobalSearch?: (searchVal: string) => void;
     onColumnFilter?: (filters: Record<string, any>) => void;
+    isTableSettings?: boolean;
+    tableSettings?: {
+        filters?: string[];
+        filterSelected?: string[];
+        onFilterSelection?: (filters: string[]) => void;
+    };
     preferences?: {
         url: string;
         token: string;

package/dist/Components/Table/TableSettings/ManageColumns.js

@@ -113,7 +113,7 @@ var ManageColumns = function (_a) {
         react_1.default.createElement(react_2.Input, { placeholder: "Search", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); } }),
         !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "2" },
             react_1.default.createElement(Checkbox_1.default, { label: "Select all", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
-        react_1.default.createElement(react_2.List, { spacing: "2" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: item.id, draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14, px: "2", py: "1" },
+        react_1.default.createElement(react_2.List, { spacing: "2", maxH: "300px", overflowY: "auto" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: "".concat(item.id, "-").concat(index), draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14, px: "2", py: "1" },
             react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "1" }),
             react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: { marginRight: "4" } }))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found"))),
         error && (react_1.default.createElement(react_2.Text, { color: "red.500", mt: "3", fontSize: "sm" }, error))));

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

@@ -0,0 +1,10 @@
+import React from "react";
+type TableFiltersMethods = {
+    getSelectedFilters: () => string[];
+};
+declare const TableFilters: ({ filters, childFilterMethodsRef, filterSelected }: {
+    filters?: string[] | undefined;
+    childFilterMethodsRef?: React.Ref<TableFiltersMethods> | undefined;
+    filterSelected?: string[] | undefined;
+}) => React.JSX.Element | null;
+export default TableFilters;

package/dist/Components/Table/TableSettings/TableFilters.js

@@ -0,0 +1,66 @@
+"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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+var TableFilters = function (_a) {
+    var filters = _a.filters, childFilterMethodsRef = _a.childFilterMethodsRef, filterSelected = _a.filterSelected;
+    var _b = (0, react_2.useState)(filterSelected !== null && filterSelected !== void 0 ? filterSelected : []), selectedFilters = _b[0], setSelectedFilters = _b[1];
+    (0, react_2.useImperativeHandle)(childFilterMethodsRef, function () {
+        return {
+            getSelectedFilters: function () {
+                return selectedFilters;
+            },
+        };
+    }, [selectedFilters]);
+    if (!filters)
+        return null;
+    return (react_2.default.createElement(react_1.Box, { display: "flex", flexDirection: "column", gap: "0.75rem" }, Object.entries(filters !== null && filters !== void 0 ? filters : {}).map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return (react_2.default.createElement(react_1.Box, { key: key },
+            react_2.default.createElement(Checkbox_1.default, { value: value, isChecked: selectedFilters.includes(value), onChange: function (e) {
+                    if (e.target.checked) {
+                        setSelectedFilters(__spreadArray(__spreadArray([], selectedFilters, true), [value], false));
+                    }
+                    else {
+                        setSelectedFilters(selectedFilters.filter(function (filter) { return filter !== value; }));
+                    }
+                }, label: value })));
+    })));
+};
+exports.default = TableFilters;

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { TableProps } from "../TableProps";
-declare const TableSettings: ({ columns, onSave, }: {
+declare const TableSettings: ({ columns, onSave, tableSettings, }: {
     columns: TableProps["columns"];
     onSave: (updatedColumns: TableProps["columns"]) => void;
+    tableSettings?: TableProps["tableSettings"];
 }) => React.JSX.Element;
 export default TableSettings;

package/dist/Components/Table/TableSettings/TableSettings.js

@@ -32,13 +32,25 @@ var ManageColumns_1 = __importDefault(require("./ManageColumns"));
 var Button_1 = __importDefault(require("../../Button/Button"));
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
+var TableFilters_1 = __importDefault(require("./TableFilters"));
 var TableSettings = function (_a) {
     var _b, _c;
-    var columns = _a.columns, onSave = _a.onSave;
+    var columns = _a.columns, onSave = _a.onSave, tableSettings = _a.tableSettings;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var childInputMethodsRef = (0, react_2.useRef)({});
+    var childFilterMethodsRef = (0, react_2.useRef)(null);
     var _d = (0, react_2.useState)(false), settingsOpen = _d[0], setSettingsOpen = _d[1];
     var _e = (0, react_2.useState)(0), selectedIndex = _e[0], setSelectedIndex = _e[1];
+    var filters = (0, react_2.useMemo)(function () {
+        var _a;
+        return (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters) !== null && _a !== void 0 ? _a : [];
+    }, [tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters]);
+    var handleSave = (0, react_2.useCallback)(function () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        onSave((_c = (_b = (_a = childInputMethodsRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : []);
+        (_d = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.onFilterSelection) === null || _d === void 0 ? void 0 : _d.call(tableSettings, (_g = (_f = (_e = childFilterMethodsRef.current) === null || _e === void 0 ? void 0 : _e.getSelectedFilters) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : []);
+        setSettingsOpen(false);
+    }, [onSave, tableSettings]);
     return (react_2.default.createElement(react_1.Box, null,
         react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer" },
             react_2.default.createElement(lucide_react_1.Settings, { onClick: function () { return setSettingsOpen(true); }, size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] })),
@@ -49,25 +61,20 @@ var TableSettings = function (_a) {
                 react_2.default.createElement(react_1.ModalCloseButton, null),
                 react_2.default.createElement(react_1.ModalBody, null,
                     react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, orientation: "vertical", variant: "unstyled" },
-                        react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content" },
-                            react_2.default.createElement(react_1.Tab, { _selected: {
+                        react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content", borderRight: "1px solid", borderColor: "gray.200" },
+                            filters && filters.length > 0 && (react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
+                                    borderLeft: "2px solid ".concat(theme.colors.primary[600]),
+                                }, fontSize: "14px", justifyContent: "flex-start" }, "Filters")),
+                            react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
                                     borderLeft: "2px solid ".concat(theme.colors.primary[600]),
                                 }, fontSize: "14px", justifyContent: "flex-start" }, "Manage columns")),
-                        react_2.default.createElement(react_1.TabPanels, null,
-                            react_2.default.createElement(react_1.TabPanel, null,
-                                react_2.default.createElement(ManageColumns_1.default, { columns: columns, childInputMethodsRef: childInputMethodsRef })),
-                            react_2.default.createElement(react_1.TabPanel, null,
-                                react_2.default.createElement(react_1.Text, null, "Font size settings")),
-                            react_2.default.createElement(react_1.TabPanel, null,
-                                react_2.default.createElement(react_1.Text, null, "Density settings")),
+                        react_2.default.createElement(react_1.TabPanels, { pl: 4, maxH: "450px", overflowY: "auto", backgroundColor: theme.colors.gray[50] },
+                            filters.length > 0 && (react_2.default.createElement(react_1.TabPanel, null,
+                                react_2.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childFilterMethodsRef, filterSelected: tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filterSelected }))),
                             react_2.default.createElement(react_1.TabPanel, null,
-                                react_2.default.createElement(react_1.Text, null, "Scrollbar settings"))))),
-                react_2.default.createElement(react_1.ModalFooter, null,
-                    react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, sx: { marginRight: "0.5rem" } }),
-                    react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: function () {
-                            var _a, _b, _c;
-                            onSave((_c = (_b = (_a = childInputMethodsRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : []);
-                            setSettingsOpen(false);
-                        } }))))));
+                                react_2.default.createElement(ManageColumns_1.default, { columns: columns, childInputMethodsRef: childInputMethodsRef }))))),
+                react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem" },
+                    react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "gray" }),
+                    react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
 };
 exports.default = TableSettings;

package/package.json

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