pixelize-design-library 1.1.60 → 1.1.62

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.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableProps } from "./TableProps";
 import "./Table.css";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -40,17 +40,17 @@ var usePreferences_1 = require("../../Hooks/usePreferences");
 var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
 function Table(_a) {
     var _b, _c, _d;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _e = _a.isCheckbox, isCheckbox = _e === void 0 ? false : _e, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _f = _a.noBorders, noBorders = _f === void 0 ? false : _f, _g = _a.isPagination, isPagination = _g === void 0 ? true : _g, onRowClick = _a.onRowClick, selections = _a.selections, _h = _a.isActionFreeze, isActionFreeze = _h === void 0 ? true : _h, _j = _a.preferencesUrl, preferencesUrl = _j === void 0 ? "" : _j, _k = _a.preferencesKey, preferencesKey = _k === void 0 ? "" : _k, _l = _a.preferencesName, preferencesName = _l === void 0 ? "" : _l, _m = _a.preferencesPage, preferencesPage = _m === void 0 ? "" : _m, _o = _a.authToken, authToken = _o === void 0 ? "" : _o, _p = _a.paginationMode, paginationMode = _p === void 0 ? "client" : _p, _q = _a.noOfRowsPerPage, noOfRowsPerPage = _q === void 0 ? 50 : _q, _r = _a.totalRecords, totalRecords = _r === void 0 ? 0 : _r, onPagination = _a.onPagination;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _e = _a.isCheckbox, isCheckbox = _e === void 0 ? false : _e, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _f = _a.noBorders, noBorders = _f === void 0 ? false : _f, _g = _a.isPagination, isPagination = _g === void 0 ? true : _g, onRowClick = _a.onRowClick, selections = _a.selections, _h = _a.isActionFreeze, isActionFreeze = _h === void 0 ? true : _h, _j = _a.preferencesUrl, preferencesUrl = _j === void 0 ? "" : _j, _k = _a.preferencesKey, preferencesKey = _k === void 0 ? "" : _k, _l = _a.preferencesName, preferencesName = _l === void 0 ? "" : _l, _m = _a.preferencesPage, preferencesPage = _m === void 0 ? "" : _m, _o = _a.authToken, authToken = _o === void 0 ? "" : _o, _p = _a.paginationMode, paginationMode = _p === void 0 ? "client" : _p, _q = _a.noOfRowsPerPage, noOfRowsPerPage = _q === void 0 ? 50 : _q, _r = _a.totalRecords, totalRecords = _r === void 0 ? 0 : _r, onPagination = _a.onPagination, _s = _a.isTableSettings, isTableSettings = _s === void 0 ? false : _s;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _s = (0, react_1.useState)({}), columnsSearch = _s[0], setColumnsSearch = _s[1];
+    var _t = (0, react_1.useState)({}), columnsSearch = _t[0], setColumnsSearch = _t[1];
     var isServerPagination = paginationMode === "server";
-    var _t = (0, usePreferences_1.useGetPreferences)({
+    var _u = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferencesUrl,
         page: preferencesPage,
         key: preferencesKey,
         name: preferencesName,
         authToken: authToken,
-    }), preferences = _t.preferences, loading = _t.loading;
+    }), preferences = _u.preferences, loading = _u.loading;
     var savePreferences = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferencesUrl,
         page: preferencesPage,
@@ -67,7 +67,7 @@ function Table(_a) {
         }
         return {};
     }, [preferences]);
-    var _u = (0, useTable_1.default)({
+    var _v = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
@@ -79,7 +79,7 @@ function Table(_a) {
         noOfRowsPerPage: noOfRowsPerPage,
         totalRecords: totalRecords,
         isServerPagination: isServerPagination,
-    }), tableData = _u.tableData, tableContainerStyles = _u.tableContainerStyles, isContent = _u.isContent, isLink = _u.isLink, headerRefs = _u.headerRefs, columnWidths = _u.columnWidths, handleSort = _u.handleSort, handleCheckbox = _u.handleCheckbox, filteredData = _u.filteredData, startRow = _u.startRow, endRow = _u.endRow, selection = _u.selection, columnsSort = _u.columnsSort, currentPage = _u.currentPage, pages = _u.pages, rowsPerPage = _u.rowsPerPage, handlePageSizeChange = _u.handlePageSizeChange, setCurrentPage = _u.setCurrentPage, columnsList = _u.columnsList, handleColumnPreferences = _u.handleColumnPreferences;
+    }), tableData = _v.tableData, tableContainerStyles = _v.tableContainerStyles, isContent = _v.isContent, isLink = _v.isLink, headerRefs = _v.headerRefs, columnWidths = _v.columnWidths, handleSort = _v.handleSort, handleCheckbox = _v.handleCheckbox, filteredData = _v.filteredData, startRow = _v.startRow, endRow = _v.endRow, selection = _v.selection, columnsSort = _v.columnsSort, currentPage = _v.currentPage, pages = _v.pages, rowsPerPage = _v.rowsPerPage, handlePageSizeChange = _v.handlePageSizeChange, setCurrentPage = _v.setCurrentPage, columnsList = _v.columnsList, handleColumnPreferences = _v.handleColumnPreferences;
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
@@ -89,10 +89,10 @@ function Table(_a) {
         }
     }, [currentPage, onPagination, noOfRowsPerPage]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); } }),
+        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/Components/Table/TableProps.d.ts

@@ -28,6 +28,7 @@ export type TableProps = {
     noOfRowsPerPage?: number;
     totalRecords?: number;
     onPagination?: (page: number, noOfRecords: number) => void;
+    isTableSettings?: boolean;
 };
 export type DataObject = {
     [key: string]: string | number | any;

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.60",
+  "version": "1.1.62",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",