pixelize-design-library 2.2.197 → 2.3.1-beta.1

package/dist/Components/Table/hooks/useTable.js

@@ -0,0 +1,219 @@
+"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 __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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var table_1 = require("../../../Utils/table");
+var defaultPageSize = 20;
+var mergeColumnWithPreference = function (pref, originalCol) {
+    if (!pref || typeof pref !== "object") {
+        return __assign({}, originalCol);
+    }
+    var next = __assign({}, originalCol);
+    if (typeof pref.isHidden === "boolean") {
+        next.isHidden = pref.isHidden;
+    }
+    if (typeof pref.label === "string" || typeof pref.label === "number") {
+        next.label = pref.label;
+    }
+    return next;
+};
+var useTable = function (_a) {
+    var _b, _c;
+    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, defaultVisibleColumns = _a.defaultVisibleColumns;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var headerRefs = (0, react_1.useRef)([]);
+    var _d = (0, react_1.useState)([]), columnWidths = _d[0], setColumnWidths = _d[1];
+    var _e = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _e[0], setSelection = _e[1];
+    var _f = (0, react_1.useState)([]), columnsSort = _f[0], setColumnsSort = _f[1];
+    var _g = (0, react_1.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
+    var _h = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
+    var prevRowsPerPageProp = (0, react_1.useRef)(noOfRowsPerPage);
+    if (noOfRowsPerPage !== prevRowsPerPageProp.current) {
+        prevRowsPerPageProp.current = noOfRowsPerPage;
+        if (noOfRowsPerPage !== undefined && noOfRowsPerPage !== rowsPerPage) {
+            setRowsPerPage(noOfRowsPerPage);
+        }
+    }
+    var tableData = data;
+    var _j = (0, react_1.useState)(function () {
+        return columns.map(function (col, i) {
+            var _a;
+            return (__assign(__assign({}, col), { isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false) }));
+        });
+    }), columnsList = _j[0], setColumnsList = _j[1];
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
+        if (Array.isArray(columnPreference) && columnPreference.length > 0) {
+            var mergedColumns = columnPreference.map(function (originalCol) {
+                var prefCol = columns.find(function (c) { return c.id === originalCol.id; });
+                return prefCol
+                    ? mergeColumnWithPreference(originalCol, prefCol)
+                    : __assign({}, originalCol);
+            });
+            setColumnsList(mergedColumns);
+        }
+        else {
+            setColumnsList(columns.map(function (col, i) {
+                var _a;
+                return (__assign(__assign({}, col), { isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false) }));
+            }));
+        }
+    }, [tablePreferences, columns, defaultVisibleColumns]);
+    var tableContainerStyles = (0, react_1.useMemo)(function () {
+        var _a;
+        return ({
+            borderRadius: "10px 0 0 10px",
+            borderWidth: "0px 0px 0px 5px",
+            borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[500],
+            boxShadow: theme.shadows.lg,
+            maxHeight: "50vh",
+            overflowY: "auto",
+        });
+    }, [tableBorderColor, theme]);
+    var prevIsContent = (0, react_1.useRef)(false);
+    var prevIsLink = (0, react_1.useRef)(false);
+    var isContent = (0, react_1.useMemo)(function () {
+        var result = tableData.some(function (o) { return o.content; });
+        prevIsContent.current = result;
+        return result;
+    }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    var isLink = (0, react_1.useMemo)(function () {
+        var result = tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; });
+        prevIsLink.current = result;
+        return result;
+    }, [tableData.length === 0 ? 0 : (_c = tableData[0]) === null || _c === void 0 ? void 0 : _c.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    (0, react_1.useEffect)(function () {
+        var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
+        setColumnWidths(widths);
+    }, []);
+    var pages = (0, react_1.useMemo)(function () {
+        if (isServerPagination) {
+            return Math.ceil(totalRecords / (rowsPerPage || 1));
+        }
+        return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
+    }, [
+        isPagination,
+        rowsPerPage,
+        tableData.length,
+        totalRecords,
+        isServerPagination,
+    ]);
+    var startRow = (0, react_1.useMemo)(function () { return (!isPagination ? 0 : currentPage * rowsPerPage); }, [currentPage, isPagination, rowsPerPage]);
+    var endRow = (0, react_1.useMemo)(function () { return (!isPagination ? tableData.length : startRow + rowsPerPage); }, [isPagination, rowsPerPage, startRow, tableData.length]);
+    var filteredData = (0, react_1.useMemo)(function () {
+        if (isServerPagination) {
+            return tableData;
+        }
+        var sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
+        return sortedData.slice(startRow, endRow);
+    }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
+    var handlePageSizeChange = function (event) {
+        var value = Number(event.target.value);
+        setRowsPerPage(value !== 0 ? value : defaultPageSize);
+        if (onNoOfRowsPerPageChange) {
+            onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);
+        }
+        setCurrentPage(0);
+    };
+    var handleSort = (0, react_1.useCallback)(function (field, sort) {
+        if (!sort)
+            return;
+        setColumnsSort(function (prev) {
+            var newSortState = __spreadArray([], prev, true);
+            var existingIndex = newSortState.findIndex(function (s) { return s.column === field; });
+            if (existingIndex === -1) {
+                newSortState.push({
+                    column: field,
+                    direction: "asc",
+                });
+            }
+            else {
+                newSortState[existingIndex] = __assign(__assign({}, newSortState[existingIndex]), { direction: sort });
+            }
+            return newSortState;
+        });
+    }, []);
+    (0, react_1.useEffect)(function () {
+        setSelection(selections !== null && selections !== void 0 ? selections : []);
+    }, [selections]);
+    var _k = (0, react_1.useState)(false), isSelecting = _k[0], setIsSelecting = _k[1];
+    var selectionRef = (0, react_1.useRef)(selection);
+    selectionRef.current = selection;
+    var onSelectionRef = (0, react_1.useRef)(onSelection);
+    onSelectionRef.current = onSelection;
+    var handleCheckbox = (0, react_1.useCallback)(function (id) {
+        var _a;
+        var current = selectionRef.current;
+        if (id === 0) {
+            setIsSelecting(true);
+            setTimeout(function () {
+                var _a;
+                var selectedItems = current.length === tableData.length ? [] : tableData.map(function (item) { return item.id; });
+                setSelection(selectedItems);
+                (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
+                setIsSelecting(false);
+            }, 0);
+        }
+        else {
+            var selectedItems = void 0;
+            if (current.includes(id)) {
+                selectedItems = current.filter(function (item) { return item !== id; });
+            }
+            else {
+                selectedItems = __spreadArray(__spreadArray([], current, true), [id], false);
+            }
+            setSelection(selectedItems);
+            (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
+        }
+    }, [tableData]);
+    var handleColumnPreferences = function (columns) {
+        setColumnsList(columns);
+        savePreferences &&
+            savePreferences(__assign(__assign({}, tablePreferences), { columns: columns }));
+    };
+    return {
+        tableData: tableData,
+        tableContainerStyles: tableContainerStyles,
+        isContent: isContent,
+        isLink: isLink,
+        headerRefs: headerRefs,
+        columnWidths: columnWidths,
+        handleSort: handleSort,
+        handleCheckbox: handleCheckbox,
+        filteredData: filteredData,
+        startRow: startRow,
+        endRow: endRow,
+        selection: selection,
+        columnsSort: columnsSort,
+        handlePageSizeChange: handlePageSizeChange,
+        pages: pages,
+        currentPage: currentPage,
+        rowsPerPage: rowsPerPage,
+        setCurrentPage: setCurrentPage,
+        columnsList: columnsList,
+        handleColumnPreferences: handleColumnPreferences,
+        isSelecting: isSelecting,
+    };
+};
+exports.default = useTable;

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

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

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

@@ -0,0 +1,166 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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, items = _a.items, setItems = _a.setItems, childInputMethodsRef = _a.childInputMethodsRef;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _b = (0, react_1.useState)(""), searchTerm = _b[0], setSearchTerm = _b[1];
+    var _c = (0, react_1.useState)(null), draggedItemIndex = _c[0], setDraggedItemIndex = _c[1];
+    var _d = (0, react_1.useState)(null), error = _d[0], setError = _d[1];
+    var visibleCount = (0, react_1.useMemo)(function () { return items.filter(function (i) { return !i.isHidden; }).length; }, [items]);
+    (0, react_1.useEffect)(function () {
+        setItems(columns);
+    }, [columns]);
+    (0, react_1.useImperativeHandle)(childInputMethodsRef, function () { return ({ getManageColumnsData: function () { return items; } }); }, [items]);
+    var handleDragStart = function (index) { return 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 () { return setDraggedItemIndex(null); };
+    // Fix: use the item's actual index in `items`, not the filtered list index
+    var toggleCheckbox = function (itemId) {
+        var realIndex = items.findIndex(function (i) { return i.id === itemId; });
+        if (realIndex === -1)
+            return;
+        var currentVisibleCount = items.filter(function (i) { return !i.isHidden; }).length;
+        if (!items[realIndex].isHidden && currentVisibleCount === 2) {
+            setError("At least two columns must remain visible.");
+            return;
+        }
+        var newItems = __spreadArray([], items, true);
+        newItems[realIndex] = __assign(__assign({}, newItems[realIndex]), { isHidden: !newItems[realIndex].isHidden });
+        setItems(newItems);
+        setError(null);
+    };
+    var filteredItems = items.filter(function (item) {
+        return item.label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+    });
+    var allChecked = items.every(function (item) { return !item.isHidden; });
+    var someChecked = items.some(function (item) { return !item.isHidden; }) && !allChecked;
+    var handleSelectAll = function () {
+        if (allChecked) {
+            setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i >= 2 })); }));
+            setError("At least two columns must remain visible.");
+        }
+        else {
+            setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: false })); }));
+            setError(null);
+        }
+    };
+    return (react_1.default.createElement(react_2.Box, { mt: 2 },
+        error && (react_1.default.createElement(react_2.Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200] },
+            react_1.default.createElement(react_2.Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500 }, error))),
+        react_1.default.createElement(react_2.Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, size: "sm", borderRadius: "md" }),
+        !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md" },
+            react_1.default.createElement(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
+        react_1.default.createElement(react_2.List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: {
+                "&::-webkit-scrollbar": { width: "3px", height: "3px" },
+                "&::-webkit-scrollbar-track": {
+                    background: theme.colors.gray[100],
+                    borderRadius: "2px",
+                },
+                "&::-webkit-scrollbar-thumb": {
+                    background: theme.colors.gray[400],
+                    borderRadius: "2px",
+                },
+                "&::-webkit-scrollbar-thumb:hover": {
+                    background: theme.colors.gray[500],
+                },
+                scrollbarWidth: "thin",
+                scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
+            } }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) {
+            var isDraggingThisItem = draggedItemIndex === index;
+            var isDropZone = draggedItemIndex !== null && draggedItemIndex !== 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: isDraggingThisItem
+                    ? theme.colors.primary[100]
+                    : isDropZone
+                        ? theme.colors.primary[50]
+                        : "transparent", display: "flex", alignItems: "center", borderRadius: "sm", border: "1px solid", borderColor: isDraggingThisItem
+                    ? theme.colors.primary[400]
+                    : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
+                    bg: theme.colors.gray[50],
+                    borderColor: theme.colors.border[200],
+                }, _active: { cursor: "grabbing" } },
+                react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, { size: 14 }), variant: "ghost", size: "xs", cursor: "grab", mr: 1, minW: "auto", h: "auto", p: 0, 
+                    // color={theme.colors.gray[300]}
+                    _hover: { color: theme.colors.gray[500], bg: "transparent" } }),
+                react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(item.id); }, size: "sm", labelSx: {
+                        color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
+                    } }),
+                react_1.default.createElement(react_2.Text, { fontSize: "12px", color: theme.colors.gray[400], ml: 'auto' }, index + 1)));
+        })) : (react_1.default.createElement(react_2.Text, { color: "gray.400", textAlign: "center", fontSize: "sm", py: 6 }, "No columns found"))),
+        react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[400], mt: 2, textAlign: "right" },
+            visibleCount,
+            " / ",
+            items.length,
+            " visible")));
+};
+exports.default = ManageColumns;

package/dist/Components/Table/settings/ManageColumns.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/Table/settings/ManageColumns.test.js

@@ -0,0 +1,146 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var ManageColumns_1 = __importDefault(require("./ManageColumns"));
+jest.mock("../../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            gray: {
+                50: "#fafafa",
+                100: "#f5f5f5",
+                200: "#eee",
+                400: "#ccc",
+                500: "#999",
+                600: "#666",
+            },
+            primary: {
+                50: "#eef",
+                100: "#ddf",
+                300: "#99c",
+                400: "#66a",
+                500: "#338",
+            },
+            red: { 50: "#fee", 200: "#fcc", 600: "#c00" },
+            border: { 200: "#e2e8f0" },
+            white: "#fff",
+        },
+        shadows: { sm: "0 1px 2px rgba(0,0,0,0.05)" },
+    }); },
+}); });
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+function ManageColumnsHarness(_a) {
+    var columns = _a.columns, childRef = _a.childRef;
+    var _b = (0, react_1.useState)(columns), items = _b[0], setItems = _b[1];
+    return (react_1.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childRef }));
+}
+describe("ManageColumns", function () {
+    it("syncs local column state when the columns prop changes", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var childRef, columnsA, columnsB, rerender;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    childRef = (0, react_1.createRef)();
+                    columnsA = [
+                        { id: "a", label: "Alpha", isHidden: false },
+                        { id: "b", label: "Beta", isHidden: true },
+                    ];
+                    columnsB = [
+                        { id: "a", label: "Alpha", isHidden: true },
+                        { id: "b", label: "Beta", isHidden: false },
+                    ];
+                    rerender = renderWithChakra(react_1.default.createElement(ManageColumnsHarness, { columns: columnsA, childRef: childRef })).rerender;
+                    expect(react_2.screen.getByRole("checkbox", { name: "Alpha" })).toBeChecked();
+                    expect(react_2.screen.getByRole("checkbox", { name: "Beta" })).not.toBeChecked();
+                    expect((_a = childRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData()).toEqual(columnsA);
+                    rerender(react_1.default.createElement(react_3.ChakraProvider, null,
+                        react_1.default.createElement(ManageColumnsHarness, { columns: columnsB, childRef: childRef })));
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            expect(react_2.screen.getByRole("checkbox", { name: "Alpha" })).not.toBeChecked();
+                            expect(react_2.screen.getByRole("checkbox", { name: "Beta" })).toBeChecked();
+                        })];
+                case 1:
+                    _c.sent();
+                    expect((_b = childRef.current) === null || _b === void 0 ? void 0 : _b.getManageColumnsData()).toEqual(columnsB);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

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