pixelize-design-library 1.1.61 → 1.1.63

package/dist/Components/Table/Components/TableActions.js

@@ -10,7 +10,7 @@ var md_1 = require("react-icons/md");
 var icons_1 = require("@chakra-ui/icons");
 var TableActions = function (_a) {
     var row = _a.row;
-    return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start" },
+    return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", closeOnBlur: true },
         react_1.default.createElement(react_2.PopoverTrigger, null,
             react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(fa_1.FaEllipsisV, { fontSize: 12 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" } })),
         react_1.default.createElement(react_2.Portal, null,

package/dist/Components/Table/Components/TableBody.js

@@ -104,35 +104,20 @@ var TableBody = function (_a) {
                 isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!row.content })),
                 isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
                 columns.map(function (header, headerIndex) {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                    var _a, _b;
                     if (header.isHidden)
                         return null;
                     var isFrozen = header.isFreeze;
-                    var leftOffset = isFrozen
-                        ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
-                            (isCheckbox ? 50 : 0)
-                        : 0;
-                    var cellBgColor = undefined;
-                    var cellTextColor = undefined;
-                    if ((_a = row.cellStyle) === null || _a === void 0 ? void 0 : _a[header.id]) {
-                        cellBgColor =
-                            (_d = (_c = (_b = row.cellStyle) === null || _b === void 0 ? void 0 : _b[header.id]) === null || _c === void 0 ? void 0 : _c.bg) !== null && _d !== void 0 ? _d : theme.colors.backgroundColor.light;
-                        cellTextColor =
-                            (_g = (_f = (_e = row.cellStyle) === null || _e === void 0 ? void 0 : _e[header.id]) === null || _f === void 0 ? void 0 : _f.color) !== null && _g !== void 0 ? _g : undefined;
-                    }
-                    else if (isFrozen) {
-                        cellBgColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
-                        cellTextColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
-                    }
-                    else if (index % 2 === 1) {
-                        cellBgColor = theme.colors.backgroundColor.light;
-                    }
-                    var rowBgColor = undefined;
-                    var rowTextColor = undefined;
-                    if (row.rowStyle) {
-                        rowBgColor = (_h = row.rowStyle) === null || _h === void 0 ? void 0 : _h.bg;
-                        rowTextColor = (_j = row.rowStyle) === null || _j === void 0 ? void 0 : _j.color;
-                    }
+                    var _c = (0, table_1.TableCellCalculation)({
+                        isFrozen: isFrozen,
+                        columnWidths: columnWidths,
+                        headerIndex: headerIndex,
+                        isCheckbox: isCheckbox,
+                        header: header,
+                        row: row,
+                        freezedBgColor: freezedBgColor,
+                        index: index,
+                    }), leftOffset = _c.leftOffset, cellBgColor = _c.cellBgColor, rowBgColor = _c.rowBgColor, cellTextColor = _c.cellTextColor, rowTextColor = _c.rowTextColor;
                     return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, key: headerIndex + 1, onClick: function () {
                             return !header.node
                                 ? handleRowClick(row, {
@@ -142,12 +127,12 @@ var TableBody = function (_a) {
                                 : null;
                         }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: cellBgColor !== null && cellBgColor !== void 0 ? cellBgColor : rowBgColor, textOverflow: "ellipsis", border: noBorders
                             ? "none"
-                            : "1px solid ".concat((_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: cellTextColor !== null && cellTextColor !== void 0 ? cellTextColor : rowTextColor, _hover: ((_l = row.cellStyle) === null || _l === void 0 ? void 0 : _l[header.id]) || row.rowStyle
+                            : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: cellTextColor !== null && cellTextColor !== void 0 ? cellTextColor : rowTextColor, _hover: ((_b = row.cellStyle) === null || _b === void 0 ? void 0 : _b[header.id]) || row.rowStyle
                             ? {}
                             : {
                                 backgroundColor: theme.colors.gray[100],
                             } },
-                        react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id])));
+                        react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, header.node ? header.node(row) : row[header.id])));
                 }),
                 isLink && react_2.default.createElement(RenderView, { row: row, bgcolor: freezeViewColor })),
             row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,

package/dist/Components/Table/Components/TableHeader.js

@@ -51,7 +51,7 @@ var TableHeader = function (_a) {
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var RenderCheckbox = (0, react_2.useCallback)(function () {
         var _a;
-        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)", top: 0 },
+        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
             react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate", _hover: { transform: "scale(1.1)" } })));
     }, [
         checked,

package/dist/Components/Table/Table.js

@@ -92,7 +92,7 @@ function Table(_a) {
         isTableSettings && (react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); } })),
         react_1.default.createElement(react_2.TableContainer, { sx: tableContainerStyles },
             react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper" },
-                react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 2 },
+                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 : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.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

package/dist/Utils/table.d.ts

@@ -1,5 +1,5 @@
 import { KaTableProps } from "../Components/KaTable/KaTableProps";
-import { DataObject } from "../Components/Table/TableProps";
+import { DataObject, TableHeaderProps } from "../Components/Table/TableProps";
 export declare function SortMultiColumnData(data: Record<string, string | number>[], sortConfig: {
     column: string | number;
     direction: string;
@@ -10,3 +10,21 @@ export declare const calculateLeftOffset: (columns: number[], index: number) =>
 export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
 export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
 export declare const pageSizeCalculation: (records: number) => number[];
+type TableCellCalculationProps = {
+    isFrozen?: boolean;
+    columnWidths: number[];
+    headerIndex: number;
+    isCheckbox?: boolean;
+    header: TableHeaderProps;
+    row: DataObject;
+    freezedBgColor?: string;
+    index: number;
+};
+export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerIndex, isCheckbox, header, row, freezedBgColor, index, }: TableCellCalculationProps) => {
+    leftOffset: number;
+    cellBgColor: any;
+    rowBgColor: any;
+    cellTextColor: any;
+    rowTextColor: any;
+};
+export {};

package/dist/Utils/table.js

@@ -9,7 +9,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pageSizeCalculation = exports.debounce = exports.searchAndSortData = exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+exports.TableCellCalculation = exports.pageSizeCalculation = exports.debounce = exports.searchAndSortData = exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+var useCustomTheme_1 = require("../Theme/useCustomTheme");
 function SortMultiColumnData(data, sortConfig) {
     if (!sortConfig.length)
         return data;
@@ -107,3 +108,33 @@ var pageSizeCalculation = function (records) {
     return pageSize;
 };
 exports.pageSizeCalculation = pageSizeCalculation;
+var TableCellCalculation = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var isFrozen = _a.isFrozen, columnWidths = _a.columnWidths, headerIndex = _a.headerIndex, isCheckbox = _a.isCheckbox, header = _a.header, row = _a.row, freezedBgColor = _a.freezedBgColor, index = _a.index;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var leftOffset = isFrozen
+        ? (0, exports.calculateLeftOffset)(columnWidths, headerIndex) + (isCheckbox ? 50 : 0)
+        : 0;
+    var cellBgColor = undefined;
+    var cellTextColor = undefined;
+    if ((_b = row.cellStyle) === null || _b === void 0 ? void 0 : _b[header.id]) {
+        cellBgColor =
+            (_e = (_d = (_c = row.cellStyle) === null || _c === void 0 ? void 0 : _c[header.id]) === null || _d === void 0 ? void 0 : _d.bg) !== null && _e !== void 0 ? _e : theme.colors.backgroundColor.light;
+        cellTextColor = (_h = (_g = (_f = row.cellStyle) === null || _f === void 0 ? void 0 : _f[header.id]) === null || _g === void 0 ? void 0 : _g.color) !== null && _h !== void 0 ? _h : undefined;
+    }
+    else if (isFrozen) {
+        cellBgColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+        cellTextColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+    }
+    else if (index % 2 === 1) {
+        cellBgColor = theme.colors.backgroundColor.light;
+    }
+    var rowBgColor = undefined;
+    var rowTextColor = undefined;
+    if (row.rowStyle) {
+        rowBgColor = (_j = row.rowStyle) === null || _j === void 0 ? void 0 : _j.bg;
+        rowTextColor = (_k = row.rowStyle) === null || _k === void 0 ? void 0 : _k.color;
+    }
+    return { leftOffset: leftOffset, cellBgColor: cellBgColor, rowBgColor: rowBgColor, cellTextColor: cellTextColor, rowTextColor: rowTextColor };
+};
+exports.TableCellCalculation = TableCellCalculation;

package/package.json

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