pixelize-design-library 2.3.6 → 2.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/Components/Table/Table.js +137 -131
  2. package/package.json +1 -1
package/dist/Components/Table/Table.js CHANGED
@@ -434,137 +434,143 @@ function Table(_a) {
434
434
  return acc + (Array.isArray(items) ? items.length : 0);
435
435
  }, 0);
436
436
  }, [filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected]);
437
- return (react_1.default.createElement(react_2.Box, { bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], border: "0.063rem solid ".concat((_f = theme.colors.border) === null || _f === void 0 ? void 0 : _f[500]), borderRadius: 3 },
438
- filterSidebar && filterMode === "modal" && (react_1.default.createElement(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside" },
439
- react_1.default.createElement(react_2.ModalOverlay, null),
440
- react_1.default.createElement(react_2.ModalContent, { my: 0, top: "10%", position: "fixed", left: "auto", right: "auto" },
441
- react_1.default.createElement(react_2.ModalCloseButton, { size: "sm" }),
442
- react_1.default.createElement(react_2.ModalBody, { p: 0 },
443
- react_1.default.createElement(LeftFilterPane_1.default, { theme: theme, sections: (_g = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _g !== void 0 ? _g : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: function (sel) { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: function () { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }))))),
444
- react_1.default.createElement(react_2.Flex, { align: "start" },
445
- filterMode === "sidebar" && (react_1.default.createElement(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_h = theme.colors.border) === null || _h === void 0 ? void 0 : _h[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto" },
446
- react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_j = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _j !== void 0 ? _j : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }))),
447
- react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
448
- react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l[50], borderBottom: "0.063rem solid ".concat((_m = theme.colors.border) === null || _m === void 0 ? void 0 : _m[500]) },
449
- filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
450
- react_1.default.createElement(ToolTip_1.default, { label: "Filter", placement: "top" },
451
- react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
452
- react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[500] : (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.text) === null || _r === void 0 ? void 0 : _r[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
453
- color: (_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.primary) === null || _t === void 0 ? void 0 : _t[500],
454
- } }),
455
- sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.primary) === null || _v === void 0 ? void 0 : _v[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: function (e) {
456
- var _a;
457
- e.stopPropagation();
458
- if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
459
- filterSidebar.onClearAllHandler();
460
- }
461
- else {
462
- (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
463
- }
464
- }, _hover: { bg: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.red) === null || _x === void 0 ? void 0 : _x[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 },
465
- react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 }))))),
466
- react_1.default.createElement(Divider_1.default, null))),
467
- react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
468
- isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
469
- react_1.default.createElement(Divider_1.default, null),
470
- react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols, group) { return handleSettingsSave(cols, group); }, tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState }))),
471
- onRefresh && (react_1.default.createElement(react_1.default.Fragment, null,
472
- react_1.default.createElement(Divider_1.default, null),
473
- react_1.default.createElement(ToolTip_1.default, { label: "Refresh", placement: "top" },
474
- 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: {
475
- color: theme.colors.primary[500],
476
- transform: "scale(1.1)"
477
- }, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
478
- return __generator(this, function (_a) {
479
- switch (_a.label) {
480
- case 0:
481
- if (!!isRefreshing) return [3 /*break*/, 4];
482
- setIsRefreshing(true);
483
- _a.label = 1;
484
- case 1:
485
- _a.trys.push([1, , 3, 4]);
486
- return [4 /*yield*/, onRefresh()];
487
- case 2:
488
- _a.sent();
489
- return [3 /*break*/, 4];
490
- case 3:
491
- setIsRefreshing(false);
492
- return [7 /*endfinally*/];
493
- case 4: return [2 /*return*/];
494
- }
495
- });
496
- }); } },
497
- react_1.default.createElement(lucide_react_1.RefreshCw, { size: 16, className: isRefreshing ? "animate-spin" : "" }))))),
498
- headerActions && (react_1.default.createElement(react_1.default.Fragment, null,
499
- react_1.default.createElement(Divider_1.default, null),
500
- react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))),
501
- react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
502
- react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
503
- groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto" },
504
- groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_z = (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.text) === null || _z === void 0 ? void 0 : _z[500], whiteSpace: "nowrap" }, groupLoadMoreCaption)),
505
- canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))),
506
- (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (react_1.default.createElement("div", null,
507
- 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 }))),
508
- (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
509
- react_1.default.createElement(react_2.PopoverTrigger, null,
510
- react_1.default.createElement(ToolTip_1.default, { label: "Pagination", placement: "top" },
511
- 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: {
512
- color: (_3 = (_2 = theme.colors) === null || _2 === void 0 ? void 0 : _2.primary) === null || _3 === void 0 ? void 0 : _3[500]
513
- } }))),
514
- react_1.default.createElement(react_2.PopoverContent, { maxW: "22rem", p: 2, overflow: "hidden" },
515
- react_1.default.createElement(react_2.PopoverBody, { p: 0 },
516
- 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 }))))))),
517
- react_1.default.createElement(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
518
- '&::-webkit-scrollbar': {
519
- width: '6px',
520
- height: isCompactRows ? '0px' : '6px',
521
- },
522
- '&:hover::-webkit-scrollbar': {
523
- height: '6px',
524
- },
525
- '&::-webkit-scrollbar-track': {
526
- background: theme.colors.gray[100],
527
- borderRadius: '3px',
528
- },
529
- '&::-webkit-scrollbar-thumb': {
530
- background: theme.colors.gray[400],
531
- borderRadius: '3px',
532
- },
533
- '&::-webkit-scrollbar-thumb:hover': {
534
- background: theme.colors.gray[500],
535
- },
536
- scrollbarWidth: isCompactRows ? 'none' : 'thin',
537
- '&:hover': {
538
- scrollbarWidth: 'thin',
539
- },
540
- scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
541
- } },
542
- react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", minW: "100%", className: "table_wrapper", sx: {
543
- width: "100%",
544
- // `separate` (not `collapse`) so sticky header cells paint an opaque
545
- // background over their borders — collapsed borders bleed scrolling
546
- // content through the seams.
547
- borderCollapse: "separate",
548
- borderSpacing: 0,
549
- "th .resize-handle": {
550
- position: "absolute",
551
- top: 0,
552
- right: 0,
553
- width: "8px",
554
- height: "100%",
555
- cursor: "col-resize",
556
- backgroundColor: "transparent",
557
- zIndex: 999,
437
+ return (react_1.default.createElement(react_1.default.Fragment, null,
438
+ react_1.default.createElement("style", null, "\n @keyframes pixelize-table-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n "),
439
+ react_1.default.createElement(react_2.Box, { bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], border: "0.063rem solid ".concat((_f = theme.colors.border) === null || _f === void 0 ? void 0 : _f[500]), borderRadius: 3 },
440
+ filterSidebar && filterMode === "modal" && (react_1.default.createElement(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside" },
441
+ react_1.default.createElement(react_2.ModalOverlay, null),
442
+ react_1.default.createElement(react_2.ModalContent, { my: 0, top: "10%", position: "fixed", left: "auto", right: "auto" },
443
+ react_1.default.createElement(react_2.ModalCloseButton, { size: "sm" }),
444
+ react_1.default.createElement(react_2.ModalBody, { p: 0 },
445
+ react_1.default.createElement(LeftFilterPane_1.default, { theme: theme, sections: (_g = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _g !== void 0 ? _g : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: function (sel) { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: function () { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }))))),
446
+ react_1.default.createElement(react_2.Flex, { align: "start" },
447
+ filterMode === "sidebar" && (react_1.default.createElement(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_h = theme.colors.border) === null || _h === void 0 ? void 0 : _h[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto" },
448
+ react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_j = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _j !== void 0 ? _j : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }))),
449
+ react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
450
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l[50], borderBottom: "0.063rem solid ".concat((_m = theme.colors.border) === null || _m === void 0 ? void 0 : _m[500]) },
451
+ filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
452
+ react_1.default.createElement(ToolTip_1.default, { label: "Filter", placement: "top" },
453
+ react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
454
+ react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[500] : (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.text) === null || _r === void 0 ? void 0 : _r[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
455
+ color: (_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.primary) === null || _t === void 0 ? void 0 : _t[500],
456
+ } }),
457
+ sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.primary) === null || _v === void 0 ? void 0 : _v[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: function (e) {
458
+ var _a;
459
+ e.stopPropagation();
460
+ if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
461
+ filterSidebar.onClearAllHandler();
462
+ }
463
+ else {
464
+ (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
465
+ }
466
+ }, _hover: { bg: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.red) === null || _x === void 0 ? void 0 : _x[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 },
467
+ react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 }))))),
468
+ react_1.default.createElement(Divider_1.default, null))),
469
+ react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
470
+ isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
471
+ react_1.default.createElement(Divider_1.default, null),
472
+ react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols, group) { return handleSettingsSave(cols, group); }, tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState }))),
473
+ onRefresh && (react_1.default.createElement(react_1.default.Fragment, null,
474
+ react_1.default.createElement(Divider_1.default, null),
475
+ react_1.default.createElement(ToolTip_1.default, { label: "Refresh", placement: "top" },
476
+ 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: {
477
+ color: theme.colors.primary[500],
478
+ transform: "scale(1.1)"
479
+ }, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
480
+ return __generator(this, function (_a) {
481
+ switch (_a.label) {
482
+ case 0:
483
+ if (!!isRefreshing) return [3 /*break*/, 4];
484
+ setIsRefreshing(true);
485
+ _a.label = 1;
486
+ case 1:
487
+ _a.trys.push([1, , 3, 4]);
488
+ return [4 /*yield*/, onRefresh()];
489
+ case 2:
490
+ _a.sent();
491
+ return [3 /*break*/, 4];
492
+ case 3:
493
+ setIsRefreshing(false);
494
+ return [7 /*endfinally*/];
495
+ case 4: return [2 /*return*/];
496
+ }
497
+ });
498
+ }); }, style: {
499
+ animation: isRefreshing
500
+ ? "pixelize-table-spin 1s linear infinite"
501
+ : "none"
502
+ } },
503
+ react_1.default.createElement(lucide_react_1.RefreshCw, { size: 16 }))))),
504
+ headerActions && (react_1.default.createElement(react_1.default.Fragment, null,
505
+ react_1.default.createElement(Divider_1.default, null),
506
+ react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))),
507
+ react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
508
+ react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
509
+ groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto" },
510
+ groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_z = (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.text) === null || _z === void 0 ? void 0 : _z[500], whiteSpace: "nowrap" }, groupLoadMoreCaption)),
511
+ canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))),
512
+ (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (react_1.default.createElement("div", null,
513
+ 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 }))),
514
+ (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
515
+ react_1.default.createElement(react_2.PopoverTrigger, null,
516
+ react_1.default.createElement(ToolTip_1.default, { label: "Pagination", placement: "top" },
517
+ 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: {
518
+ color: (_3 = (_2 = theme.colors) === null || _2 === void 0 ? void 0 : _2.primary) === null || _3 === void 0 ? void 0 : _3[500]
519
+ } }))),
520
+ react_1.default.createElement(react_2.PopoverContent, { maxW: "22rem", p: 2, overflow: "hidden" },
521
+ react_1.default.createElement(react_2.PopoverBody, { p: 0 },
522
+ 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 }))))))),
523
+ react_1.default.createElement(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
524
+ '&::-webkit-scrollbar': {
525
+ width: '6px',
526
+ height: isCompactRows ? '0px' : '6px',
558
527
  },
528
+ '&:hover::-webkit-scrollbar': {
529
+ height: '6px',
530
+ },
531
+ '&::-webkit-scrollbar-track': {
532
+ background: theme.colors.gray[100],
533
+ borderRadius: '3px',
534
+ },
535
+ '&::-webkit-scrollbar-thumb': {
536
+ background: theme.colors.gray[400],
537
+ borderRadius: '3px',
538
+ },
539
+ '&::-webkit-scrollbar-thumb:hover': {
540
+ background: theme.colors.gray[500],
541
+ },
542
+ scrollbarWidth: isCompactRows ? 'none' : 'thin',
543
+ '&:hover': {
544
+ scrollbarWidth: 'thin',
545
+ },
546
+ scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
559
547
  } },
560
- react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_6 = (_5 = (_4 = theme.colors.table) === null || _4 === void 0 ? void 0 : _4.hover) === null || _5 === void 0 ? void 0 : _5[200]) !== null && _6 !== void 0 ? _6 : (_7 = theme.colors.secondary) === null || _7 === void 0 ? void 0 : _7[50] },
561
- react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_8 = theme.colors) === null || _8 === void 0 ? void 0 : _8.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
562
- react_1.default.createElement(react_3.Tbody, null,
563
- react_1.default.createElement(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_9 = theme.colors) === null || _9 === void 0 ? void 0 : _9.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
564
- canInfinite && isLoadingMore && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2 },
565
- react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_11 = (_10 = theme.colors) === null || _10 === void 0 ? void 0 : _10.primary) === null || _11 === void 0 ? void 0 : _11[500] }),
566
- react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_13 = (_12 = theme.colors) === null || _12 === void 0 ? void 0 : _12.text) === null || _13 === void 0 ? void 0 : _13[500] }, "Loading more\u2026")))),
567
- groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: "0.063rem solid ".concat((_14 = theme.colors.border) === null || _14 === void 0 ? void 0 : _14[500]) },
568
- groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_16 = (_15 = theme.colors) === null || _15 === void 0 ? void 0 : _15.text) === null || _16 === void 0 ? void 0 : _16[500] }, groupLoadMoreCaption)),
569
- canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))))))));
548
+ react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", minW: "100%", className: "table_wrapper", sx: {
549
+ width: "100%",
550
+ // `separate` (not `collapse`) so sticky header cells paint an opaque
551
+ // background over their borders — collapsed borders bleed scrolling
552
+ // content through the seams.
553
+ borderCollapse: "separate",
554
+ borderSpacing: 0,
555
+ "th .resize-handle": {
556
+ position: "absolute",
557
+ top: 0,
558
+ right: 0,
559
+ width: "8px",
560
+ height: "100%",
561
+ cursor: "col-resize",
562
+ backgroundColor: "transparent",
563
+ zIndex: 999,
564
+ },
565
+ } },
566
+ react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_6 = (_5 = (_4 = theme.colors.table) === null || _4 === void 0 ? void 0 : _4.hover) === null || _5 === void 0 ? void 0 : _5[200]) !== null && _6 !== void 0 ? _6 : (_7 = theme.colors.secondary) === null || _7 === void 0 ? void 0 : _7[50] },
567
+ react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_8 = theme.colors) === null || _8 === void 0 ? void 0 : _8.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
568
+ react_1.default.createElement(react_3.Tbody, null,
569
+ react_1.default.createElement(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_9 = theme.colors) === null || _9 === void 0 ? void 0 : _9.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }))),
570
+ canInfinite && isLoadingMore && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2 },
571
+ react_1.default.createElement(react_2.Spinner, { size: "sm", color: (_11 = (_10 = theme.colors) === null || _10 === void 0 ? void 0 : _10.primary) === null || _11 === void 0 ? void 0 : _11[500] }),
572
+ react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_13 = (_12 = theme.colors) === null || _12 === void 0 ? void 0 : _12.text) === null || _13 === void 0 ? void 0 : _13[500] }, "Loading more\u2026")))),
573
+ groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: "0.063rem solid ".concat((_14 = theme.colors.border) === null || _14 === void 0 ? void 0 : _14[500]) },
574
+ groupLoadMoreCaption && (react_1.default.createElement(react_2.Box, { fontSize: "0.75rem", color: (_16 = (_15 = theme.colors) === null || _15 === void 0 ? void 0 : _15.text) === null || _16 === void 0 ? void 0 : _16[500] }, groupLoadMoreCaption)),
575
+ canGroupLoadMore && (react_1.default.createElement(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText })))))))));
570
576
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.3.6",
3
+ "version": "2.3.7",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",