pixelize-design-library 2.3.5 → 2.3.6

package/dist/Components/Table/Table.js

@@ -43,6 +43,42 @@ var __importStar = (this && this.__importStar) || (function () {
         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 __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)) {
@@ -79,6 +115,7 @@ var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 var lucide_react_1 = require("lucide-react");
 var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
 function Table(_a) {
+    var _this = this;
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
     var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _17 = _a.isCheckbox, isCheckbox = _17 === void 0 ? false : _17, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _18 = _a.noBorders, noBorders = _18 === void 0 ? false : _18, _19 = _a.isPagination, isPagination = _19 === void 0 ? true : _19, onRowClick = _a.onRowClick, selections = _a.selections, _20 = _a.isActionFreeze, isActionFreeze = _20 === void 0 ? true : _20, _21 = _a.preferences, preferences = _21 === void 0 ? {
         url: "",
@@ -111,16 +148,17 @@ function Table(_a) {
         authToken: preferences.token,
         orgId: preferences.orgId,
     }).savePreferences;
+    var _36 = (0, react_1.useState)(false), isRefreshing = _36[0], setIsRefreshing = _36[1];
     var isTableLoading = (0, react_1.useMemo)(function () {
-        return loading || isLoading;
-    }, [loading, isLoading]);
+        return loading || isLoading || isRefreshing;
+    }, [loading, isLoading, isRefreshing]);
     var tablePreferences = (0, react_1.useMemo)(function () {
         if (tablePreferencesData === null || tablePreferencesData === void 0 ? void 0 : tablePreferencesData.length) {
             return tablePreferencesData[0].json;
         }
         return {};
     }, [tablePreferencesData]);
-    var _36 = (0, useTable_1.default)({
+    var _37 = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
@@ -134,17 +172,17 @@ function Table(_a) {
         isServerPagination: isServerPagination,
         onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
         defaultVisibleColumns: defaultVisibleColumns,
-    }), tableData = _36.tableData, isContent = _36.isContent, isLink = _36.isLink, headerRefs = _36.headerRefs, columnWidths = _36.columnWidths, handleSort = _36.handleSort, handleCheckbox = _36.handleCheckbox, filteredData = _36.filteredData, startRow = _36.startRow, endRow = _36.endRow, selection = _36.selection, columnsSort = _36.columnsSort, currentPage = _36.currentPage, pages = _36.pages, rowsPerPage = _36.rowsPerPage, handlePageSizeChange = _36.handlePageSizeChange, setCurrentPage = _36.setCurrentPage, columnsList = _36.columnsList, handleColumnPreferences = _36.handleColumnPreferences, isSelecting = _36.isSelecting, selectAllRowsRef = _36.selectAllRowsRef;
+    }), tableData = _37.tableData, isContent = _37.isContent, isLink = _37.isLink, headerRefs = _37.headerRefs, columnWidths = _37.columnWidths, handleSort = _37.handleSort, handleCheckbox = _37.handleCheckbox, filteredData = _37.filteredData, startRow = _37.startRow, endRow = _37.endRow, selection = _37.selection, columnsSort = _37.columnsSort, currentPage = _37.currentPage, pages = _37.pages, rowsPerPage = _37.rowsPerPage, handlePageSizeChange = _37.handlePageSizeChange, setCurrentPage = _37.setCurrentPage, columnsList = _37.columnsList, handleColumnPreferences = _37.handleColumnPreferences, isSelecting = _37.isSelecting, selectAllRowsRef = _37.selectAllRowsRef;
     // Density + grouping are managed here so the Table Settings tabs can change +
     // persist them (seeded from the prop / saved preferences when they load).
-    var _37 = (0, react_1.useState)(density), densityState = _37[0], setDensityState = _37[1];
+    var _38 = (0, react_1.useState)(density), densityState = _38[0], setDensityState = _38[1];
     // Grouping is chosen by the user in Table Settings > Group and persisted to
     // preferences (`json.groupBy`); there is no `groupBy` prop.
-    var _38 = (0, react_1.useState)(undefined), groupByState = _38[0], setGroupByState = _38[1];
+    var _39 = (0, react_1.useState)(undefined), groupByState = _39[0], setGroupByState = _39[1];
     // Grouped "Load more" accumulates pages here so loading more ADDS rows to the
     // groups (server pagination replaces `data` each fetch). Reset on fresh loads
     // (search / filter / sort / page-size). Only used in grouped + groupLoadMore mode.
-    var _39 = (0, react_1.useState)([]), accumulatedRows = _39[0], setAccumulatedRows = _39[1];
+    var _40 = (0, react_1.useState)([]), accumulatedRows = _40[0], setAccumulatedRows = _40[1];
     var pendingLoadMoreRef = (0, react_1.useRef)(false);
     // Pages loaded so far (1 = the initial page). The next page is derived from this
     // counter — NOT from the deduped row count — so overlapping rows across pages
@@ -436,8 +474,27 @@ function Table(_a) {
                             react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
                                     color: theme.colors.primary[500],
                                     transform: "scale(1.1)"
-                                }, onClick: onRefresh },
-                                react_1.default.createElement(lucide_react_1.RefreshCw, { size: 16, className: isLoading ? "animate-spin" : "" }))))),
+                                }, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        switch (_a.label) {
+                                            case 0:
+                                                if (!!isRefreshing) return [3 /*break*/, 4];
+                                                setIsRefreshing(true);
+                                                _a.label = 1;
+                                            case 1:
+                                                _a.trys.push([1, , 3, 4]);
+                                                return [4 /*yield*/, onRefresh()];
+                                            case 2:
+                                                _a.sent();
+                                                return [3 /*break*/, 4];
+                                            case 3:
+                                                setIsRefreshing(false);
+                                                return [7 /*endfinally*/];
+                                            case 4: return [2 /*return*/];
+                                        }
+                                    });
+                                }); } },
+                                react_1.default.createElement(lucide_react_1.RefreshCw, { size: 16, className: isRefreshing ? "animate-spin" : "" }))))),
                     headerActions && (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 }))),
@@ -450,7 +507,7 @@ function Table(_a) {
                             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, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))),
                         (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
                             react_1.default.createElement(react_2.PopoverTrigger, null,
-                                react_1.default.createElement(ToolTip_1.default, { label: "Pagination", placement: "top", openDelay: 300 },
+                                react_1.default.createElement(ToolTip_1.default, { label: "Pagination", placement: "top" },
                                     react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18 }), color: (_1 = (_0 = theme.colors) === null || _0 === void 0 ? void 0 : _0.text) === null || _1 === void 0 ? void 0 : _1[500], _hover: {
                                             color: (_3 = (_2 = theme.colors) === null || _2 === void 0 ? void 0 : _2.primary) === null || _3 === void 0 ? void 0 : _3[500]
                                         } }))),

package/dist/Components/Table/components/Pagination.js

@@ -59,19 +59,19 @@ var Pagination = react_1.default.memo(function (_a) {
             !paginationSelectOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
             computedOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, String(size))); }))),
         dataLength > 0 && (react_1.default.createElement(react_2.Flex, { w: "100%" },
-            react_1.default.createElement(ToolTip_1.default, { label: "First", placement: "top", openDelay: 300 },
+            react_1.default.createElement(ToolTip_1.default, { label: "First", placement: "top" },
                 react_1.default.createElement(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); }, _hover: !isLeftDisabled ? { color: theme.colors.primary[500] } : {} },
                     react_1.default.createElement(lucide_react_1.ChevronsLeft, null))),
-            react_1.default.createElement(ToolTip_1.default, { label: "Previous", placement: "top", openDelay: 300 },
+            react_1.default.createElement(ToolTip_1.default, { label: "Previous", placement: "top" },
                 react_1.default.createElement(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); }, _hover: !isLeftDisabled ? { color: theme.colors.primary[500] } : {} },
                     react_1.default.createElement(lucide_react_1.ChevronLeft, null))),
             react_1.default.createElement(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500] }, paginationText),
-            react_1.default.createElement(ToolTip_1.default, { label: "Next", placement: "top", openDelay: 300 },
+            react_1.default.createElement(ToolTip_1.default, { label: "Next", placement: "top" },
                 react_1.default.createElement(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
                         return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
                     }, _hover: !isRightDisabled ? { color: theme.colors.primary[500] } : {} },
                     react_1.default.createElement(lucide_react_1.ChevronRight, null))),
-            react_1.default.createElement(ToolTip_1.default, { label: "Last", placement: "top", openDelay: 300 },
+            react_1.default.createElement(ToolTip_1.default, { label: "Last", placement: "top" },
                 react_1.default.createElement(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); }, _hover: !isRightDisabled ? { color: theme.colors.primary[500] } : {} },
                     react_1.default.createElement(lucide_react_1.ChevronsRight, null)))))));
 });

package/dist/Components/Table/components/TableSearch.js

@@ -65,7 +65,7 @@ var TableSearch = function (_a) {
         handleDebounce(value);
     };
     return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: "2" },
-        !showInput && (react_1.default.createElement(ToolTip_1.default, { label: "Search", placement: "top", openDelay: 300 },
+        !showInput && (react_1.default.createElement(ToolTip_1.default, { label: "Search", placement: "top" },
             react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 5, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], onClick: handleSearchClick, _hover: { color: (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500] } }))),
         showInput ? (react_1.default.createElement(react_2.InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease" },
             react_1.default.createElement(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500], _focus: { borderColor: (_e = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _e === void 0 ? void 0 : _e[500] }, autoFocus: true }),

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

@@ -104,7 +104,7 @@ var TableSettings = function (_a) {
         _hover: { color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[600] },
     };
     return (react_2.default.createElement(react_1.Box, null,
-        react_2.default.createElement(ToolTip_1.default, { label: "Table Settings", placement: "top", openDelay: 300 },
+        react_2.default.createElement(ToolTip_1.default, { label: "Table Settings", placement: "top" },
             react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.text) === null || _g === void 0 ? void 0 : _g[500], _hover: {
                     transform: "scale(1.1)",
                     color: (_j = (_h = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500]

package/package.json

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