pixelize-design-library 2.1.20 → 2.1.22

package/dist/Components/Table/Table.js

@@ -0,0 +1,129 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var react_3 = require("@chakra-ui/react");
+var Pagination_1 = __importDefault(require("./Components/Pagination"));
+var TableHeader_1 = __importDefault(require("./Components/TableHeader"));
+var TableBody_1 = __importDefault(require("./Components/TableBody"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var useTable_1 = __importDefault(require("./Components/useTable"));
+var table_1 = require("../../Utils/table");
+var usePreferences_1 = require("../../Hooks/usePreferences");
+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"));
+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.preferencesUrl, preferencesUrl = _m === void 0 ? "" : _m, _o = _a.preferencesKey, preferencesKey = _o === void 0 ? "" : _o, _p = _a.preferencesName, preferencesName = _p === void 0 ? "" : _p, _q = _a.preferencesPage, preferencesPage = _q === void 0 ? "" : _q, _r = _a.authToken, authToken = _r === void 0 ? "" : _r, _s = _a.paginationMode, paginationMode = _s === void 0 ? "client" : _s, _t = _a.noOfRowsPerPage, noOfRowsPerPage = _t === void 0 ? 50 : _t, _u = _a.totalRecords, totalRecords = _u === void 0 ? 0 : _u, onPagination = _a.onPagination, _v = _a.isTableSettings, isTableSettings = _v === void 0 ? false : _v, headerActions = _a.headerActions;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _w = (0, react_1.useState)({}), columnsSearch = _w[0], setColumnsSearch = _w[1];
+    var isServerPagination = paginationMode === "server";
+    var _x = (0, usePreferences_1.useGetPreferences)({
+        baseUrl: preferencesUrl,
+        page: preferencesPage,
+        key: preferencesKey,
+        name: preferencesName,
+        authToken: authToken,
+    }), preferences = _x.preferences, loading = _x.loading;
+    var savePreferences = (0, usePreferences_1.useSavePreferences)({
+        baseUrl: preferencesUrl,
+        page: preferencesPage,
+        key: preferencesKey,
+        name: preferencesName,
+        authToken: authToken,
+    }).savePreferences;
+    var isTableLoading = (0, react_1.useMemo)(function () {
+        return loading || isLoading;
+    }, [loading, isLoading]);
+    var tablePreferences = (0, react_1.useMemo)(function () {
+        if (preferences.length) {
+            return preferences[0].json;
+        }
+        return {};
+    }, [preferences]);
+    var _y = (0, useTable_1.default)({
+        tableBorderColor: tableBorderColor,
+        data: data,
+        isPagination: isPagination,
+        selections: selections,
+        columns: columns,
+        onSelection: onSelection,
+        tablePreferences: tablePreferences,
+        savePreferences: savePreferences,
+        noOfRowsPerPage: noOfRowsPerPage,
+        totalRecords: totalRecords,
+        isServerPagination: isServerPagination,
+    }), tableData = _y.tableData, isContent = _y.isContent, isLink = _y.isLink, headerRefs = _y.headerRefs, columnWidths = _y.columnWidths, handleSort = _y.handleSort, handleCheckbox = _y.handleCheckbox, filteredData = _y.filteredData, startRow = _y.startRow, endRow = _y.endRow, selection = _y.selection, columnsSort = _y.columnsSort, currentPage = _y.currentPage, pages = _y.pages, rowsPerPage = _y.rowsPerPage, handlePageSizeChange = _y.handlePageSizeChange, setCurrentPage = _y.setCurrentPage, columnsList = _y.columnsList, handleColumnPreferences = _y.handleColumnPreferences, handleGlobalSearch = _y.handleGlobalSearch;
+    var _filteredData = (0, react_1.useMemo)(function () {
+        return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
+    }, [columnsSearch, filteredData]);
+    (0, react_1.useEffect)(function () {
+        if (onPagination) {
+            onPagination(currentPage + 1, noOfRowsPerPage);
+        }
+    }, [currentPage, onPagination, noOfRowsPerPage]);
+    var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
+    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.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: 45, gap: 2 },
+            react_1.default.createElement(TableSearch_1.default, { onSearch: handleGlobalSearch }),
+            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); } }))),
+            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(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" },
+            react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper", sx: {
+                    width: "100%",
+                    borderCollapse: "collapse",
+                    "th .resize-handle": {
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        width: "8px",
+                        height: "100%",
+                        cursor: "col-resize",
+                        backgroundColor: "transparent",
+                        zIndex: 999,
+                    },
+                } },
+                react_1.default.createElement(react_3.Thead, { position: "sticky", top: -0.5, zIndex: 2 },
+                    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 : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.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 : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))));
+}
+exports.default = Table;

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

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/Table.stories.js

@@ -0,0 +1,9 @@
+"use strict";
+// // Import React and the Table component
+// import React from 'react';
+// import Table from './Table';
+// import { TableProps } from './TableProps';
+// // Import Storybook's required modules
+// import { StoryFn, Meta } from '@storybook/react';
+// import { fn } from '@storybook/test';
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,112 @@
+import { Dispatch, MutableRefObject, SetStateAction } from "react";
+export type TableProps = {
+    data: DataObject[];
+    columns: TableHeaderProps[];
+    handleExportChange?: (value: string) => void | undefined;
+    exportOptions?: ExportOption[];
+    exportLabel?: string;
+    isLoading?: boolean;
+    isVisiblity?: boolean;
+    isCheckbox?: boolean;
+    headerBgColor?: string;
+    freezedBgColor?: string;
+    headerTextColor?: string;
+    freezedTextColor?: string;
+    tableBorderColor?: string;
+    noBorders?: boolean;
+    onSelection?: (selected: (string | number)[]) => void;
+    isPagination?: boolean;
+    selections?: (string | number)[];
+    onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
+    isActionFreeze?: boolean;
+    preferencesUrl?: string;
+    preferencesKey?: string;
+    preferencesName?: string;
+    preferencesPage?: string;
+    authToken?: string;
+    paginationMode?: "client" | "server";
+    noOfRowsPerPage?: number;
+    totalRecords?: number;
+    onPagination?: (page: number, noOfRecords: number) => void;
+    isTableSettings?: boolean;
+    headerActions?: HeaderActionsProps;
+};
+export type HeaderActionsProps = {
+    isDelete?: {
+        enabled?: boolean;
+        onClick?: (selection: (string | number)[]) => void;
+    };
+    isUpdate?: {
+        enabled?: boolean;
+        onClick?: (selection: (string | number)[]) => void;
+    };
+    items?: {
+        icon: React.ReactElement;
+        name: string;
+        onClick?: (selection: (string | number)[]) => void;
+    }[];
+};
+export type DataObject = {
+    [key: string]: string | number | any;
+};
+export type TableHeaderProps = {
+    label: string | number;
+    id: string | number;
+    isSort?: boolean;
+    isSearch?: boolean;
+    isFreeze?: boolean;
+    isHidden?: boolean;
+    node?: (data: DataObject) => JSX.Element | string | number | undefined;
+};
+export type ExportOption = {
+    label: string;
+    id: string;
+};
+export type ColumnSortingProps = {
+    column: string | number;
+    direction: "asc" | "desc" | "none";
+};
+export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
+    handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
+    activeHeader?: string | null;
+    isPopoverOpen?: boolean;
+    closePopover?: () => void;
+    searchFeatures?: (header: string) => React.ReactNode;
+    handleHeaderClick?: (header: string, search: boolean) => void;
+    headerRefs: React.MutableRefObject<(HTMLTableCellElement | null)[]>;
+    columnWidths: number[];
+    columnsSort: ColumnSortingProps[];
+    handleCheckbox: (selection: string | number) => void;
+    checked: boolean | "indeterminate";
+    isContent: boolean;
+    isLink: boolean;
+    setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+    columnsSearch: Record<string, string>;
+};
+export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick" | "isActionFreeze"> & {
+    startRow: number;
+    endRow: number;
+    columnWidths: number[];
+    handleCheckbox: (selection: string | number) => void;
+    selections: (string | number)[];
+    isContent: boolean;
+    isLink: boolean;
+};
+export type TableFiltersProps = {
+    header: DataObject;
+    setColumnsSearch: (searchVal: string) => void;
+    columnsSearch: string;
+    onClose: () => void;
+};
+export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
+    header: TableHeaderProps;
+    index: number;
+    columnWidths: number[];
+    headerRefs: MutableRefObject<(HTMLTableCellElement | null)[]>;
+    columnsSearch: Record<string, string>;
+    setColumnsSearch: Dispatch<SetStateAction<Record<string, string>>>;
+};
+export type SortingProps = {
+    isSorting: ColumnSortingProps | undefined;
+    header: TableHeaderProps;
+};

package/dist/Components/Table/TableProps.js

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { TableProps } from "../TableProps";
+type ManageColumnsMethods = {
+    getManageColumnsData: () => TableProps["columns"];
+};
+declare const ManageColumns: ({ columns, childInputMethodsRef, }: {
+    columns: TableProps["columns"];
+    childInputMethodsRef: React.Ref<ManageColumnsMethods>;
+}) => React.JSX.Element;
+export default ManageColumns;

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

@@ -0,0 +1,107 @@
+"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 __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 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
+var ManageColumns = function (_a) {
+    var columns = _a.columns, childInputMethodsRef = _a.childInputMethodsRef;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _b = (0, react_1.useState)(columns.map(function (o) { return (__assign(__assign({}, o), { isHidden: !o.isHidden })); })), items = _b[0], setItems = _b[1];
+    var _c = (0, react_1.useState)(""), searchTerm = _c[0], setSearchTerm = _c[1];
+    var _d = (0, react_1.useState)(null), draggedItemIndex = _d[0], setDraggedItemIndex = _d[1];
+    (0, react_1.useImperativeHandle)(childInputMethodsRef, function () {
+        return {
+            getManageColumnsData: function () {
+                return items.map(function (o) { return (__assign(__assign({}, o), { isHidden: !o.isHidden })); });
+            },
+        };
+    }, [items]);
+    var handleDragStart = function (index) {
+        setDraggedItemIndex(index);
+    };
+    var handleDragOver = function (e, index) {
+        e.preventDefault();
+        if (draggedItemIndex === null || draggedItemIndex === index)
+            return;
+        var newItems = __spreadArray([], items, true);
+        var draggedItem = newItems[draggedItemIndex];
+        newItems.splice(draggedItemIndex, 1);
+        newItems.splice(index, 0, draggedItem);
+        setDraggedItemIndex(index);
+        setItems(newItems);
+    };
+    var handleDragEnd = function () {
+        setDraggedItemIndex(null);
+    };
+    var toggleCheckbox = function (index) {
+        var newItems = __spreadArray([], items, true);
+        newItems[index].isHidden = !newItems[index].isHidden;
+        setItems(newItems);
+    };
+    var filteredItems = items.filter(function (item) {
+        return item.label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+    });
+    return (react_1.default.createElement(react_2.Box, { mt: "5" },
+        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, { isChecked: items.every(function (item) { return item.isHidden; }), onChange: function () {
+                    var allChecked = items.every(function (item) { return item.isHidden; });
+                    setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: !allChecked })); }));
+                } }),
+            react_1.default.createElement(react_2.Text, { ml: "2", fontSize: 14 }, "Select all"))),
+        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", justifyContent: "space-between", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14 },
+            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, onChange: function () { return toggleCheckbox(index); }, sx: {
+                    marginRight: "4",
+                } }),
+            react_1.default.createElement(react_2.Text, { flex: "1" }, item.label))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found")))));
+};
+exports.default = ManageColumns;

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

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

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

@@ -0,0 +1,73 @@
+"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 __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 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 TableSettings = function (_a) {
+    var _b, _c;
+    var columns = _a.columns, onSave = _a.onSave;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var childInputMethodsRef = (0, react_2.useRef)({});
+    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];
+    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] })),
+        react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
+            react_2.default.createElement(react_1.ModalOverlay, null),
+            react_2.default.createElement(react_1.ModalContent, { minW: "700px", minH: "600px" },
+                react_2.default.createElement(react_1.ModalHeader, null, "Table Settings"),
+                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: {
+                                    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.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);
+                        } }))))));
+};
+exports.default = TableSettings;

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const searchFeatures: (header: string) => React.JSX.Element;