@megha-ui/react 1.2.819 → 1.2.821

package/dist/components/grid/index.js

@@ -37,6 +37,7 @@ import { formatValue } from "../../services/commonService";
 import NewGridHeader from "./utils/newGridHeader";
 import NewGridRow from "./utils/newGridRow";
 import NewSummariseDetails from "./utils/newSummariseDetails";
+import NewGroupedGridDetails from "./utils/newGroupedGridDetails";
 const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, defaultColumnsPerView = 200, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = "3rem", onRowClick, rowCount = false, rowBorder = true, showMenu = false, search = false, defaultSearchOperation = "contains", gridBorder = false, isLoading = false, rowTopBorder, rowBottomBorder, rowLeftBorder, rowRightBorder, headerBackground = "var(--row-header-bg)", headerTopBorder = "none", headerBottomBorder = "none", SettingIcon, ExportIcon, ignoredExportItems = ["action", "actions"], borderColor = "#dbdfe9", updateColumns, showHideAvailable = false, columnSearchOutside = false, multiSorting = false, exportAvailable = false, exportableFileName = "", groupBy, updateGroupBy, rowKey = "id", hlBorderColor = "black", selectedRow, selectedRowStyle = {
     borderLeft: "0.5rem solid #d9d9d9",
 }, defaultSort, noKeyEvents = true, customOperation, hasCustomOperation, globalSearch, headerDropdownIndex, draggable = false, resizable = false, updateGridData, widthUnits, checkboxWrapper, ignoreHugContent = false, isSummarise = false, isHideDups = false, isMultipleChips = false, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", ignoreClickKeys = "", saveAsNewView = false, handleSaveAsView, saveAsViewIcon, filterData, chipColor = "#ccc", withAscii = false, propSummariseKeys, SummariseIcon, summarizeColor = "black", isExpandable = false, expandedRow, extraRow, selectedCheckBox, setSelectedCheckbox, ignoreRowSelect, setOpenedRows, openedRows, getLoadingState, globalSearchOpen = false, updateFixedFilterValues = (fixedFilterValues) => {
@@ -1593,7 +1594,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                                 : [..._gridGroupBy.split(",").filter((item) => item), value].join(",");
                             setGridGroupBy(_gridGroupBy);
                             updateGroupBy && updateGroupBy(_gridGroupBy);
-                        }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), tableData.map((item, index) => {
+                        }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), gridGroupBy !== "" ? (_jsx(NewGroupedGridDetails, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy, widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey })) : (tableData.map((item, index) => {
                         var _a, _b, _c, _d, _e, _f;
                         if (paginate) {
                             return (_jsx(NewGridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_a = item.id) === null || _a === void 0 ? void 0 : _a.value) ? selectedRowStyle : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_c = (_b = item.id) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : index)));
@@ -1601,7 +1602,13 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                         else if (index >= startIndex && index <= endIndex) {
                             return (_jsx(NewGridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_d = item.id) === null || _d === void 0 ? void 0 : _d.value) ? selectedRowStyle : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_f = (_e = item.id) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : index)));
                         }
-                    }), extraRow && extraRow, tableData.length === 0 && typeof extraRow === "undefined" && (_jsx("div", { style: { gridColumn: 1 }, children: "No Data available" })), summariseAvailable &&
+                    })), extraRow && extraRow, tableData.length === 0 && typeof extraRow === "undefined" && (_jsx("div", { style: {
+                            gridColumn: 1 / -1,
+                            display: "flex",
+                            alignItems: "center",
+                            padding: "1rem 0",
+                            justifyContent: "center",
+                        }, children: "No Data available" })), summariseAvailable &&
                         filteredData.length > 0 &&
                         gridGroupBy === "" && (_jsx(NewSummariseDetails, { summariseKeys: summariseKeys, columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, actionsKey: actionsKey }))] }), paginate && gridGroupBy === "" && (_jsxs("div", { id: "pagination", style: {
                     display: "flex",

package/dist/components/grid/utils/newGroupedGridDetails.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { memo, useEffect, useRef, useState } from "react";
-import GroupedRow from "./groupedRow";
 import NewSummariseDetails from "./newSummariseDetails";
+import NewGroupedRow from "./newGroupedRow";
 const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRowColor, updateRowOpened, columnWidths, columnHeights, groupBy, widthMode, rowKey, rowHeight, headerBackground, isSummarise, gridGroupBy, rowStyle, sortable, cellStyle, summariseKeys, summariseDetails, activeCalculateColor, gridRef, setCalculatePosition, calculatePosition, calculatetextColor, setCalculateVisible, calculateVisible, summariseDisplay, recalculate, selectedRowStyle, isLoading, selectedRow, onRowClick, gridColumns, bulkSelect, selectedRows, toggleRowSelection, hasVerticalScroll, setColumnWidths, setColumnHeights, actionsKey, ignoreClickKeys, locale, formatOptions, }) => {
     const groupedDiv = useRef(null);
     const [renderedKeys, setRenderedKeys] = useState([]);
@@ -85,7 +85,7 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
                                         alignItems: "center",
                                         flexWrap: "wrap",
                                     }, children: [_jsx("span", { style: { marginRight: "0.5rem" }, children: item.html ? _jsx(_Fragment, { children: item.html }) : item.value }), _jsx("span", { children: `(${item === null || item === void 0 ? void 0 : item.count})` })] })] }), isSummarise &&
-                            parseInt(((_b = item === null || item === void 0 ? void 0 : item.count) === null || _b === void 0 ? void 0 : _b.toString()) || "0") > 0 && (_jsx(NewSummariseDetails, { rowIndex: gIndex, removedKeys: item.groupedKey.split(">"), columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, groupedData: item.groupedValue, actionsKey: actionsKey }))] }, String((_c = item.groupedValue) !== null && _c !== void 0 ? _c : gIndex))) : (_jsx(GroupedRow, { item: item.rowData, index: gIndex, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_e = (_d = item.rowData) === null || _d === void 0 ? void 0 : _d.id) === null || _e === void 0 ? void 0 : _e.value)
+                            parseInt(((_b = item === null || item === void 0 ? void 0 : item.count) === null || _b === void 0 ? void 0 : _b.toString()) || "0") > 0 && (_jsx(NewSummariseDetails, { rowIndex: gIndex, removedKeys: item.groupedKey.split(">"), columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, groupedData: item.groupedValue, actionsKey: actionsKey }))] }, String((_c = item.groupedValue) !== null && _c !== void 0 ? _c : gIndex))) : (_jsx(NewGroupedRow, { item: item.rowData, index: gIndex, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_e = (_d = item.rowData) === null || _d === void 0 ? void 0 : _d.id) === null || _e === void 0 ? void 0 : _e.value)
                         ? selectedRowStyle
                         : {})), cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, columns: gridColumns, widthMode: widthMode, rowKey: rowKey, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, hugColumnWidths: columnWidths, actionsKey: actionsKey, ignoreClickKeys: ignoreClickKeys }, String(((_g = (_f = item.rowData) === null || _f === void 0 ? void 0 : _f.id) === null || _g === void 0 ? void 0 : _g.value)
                     ? `${item.groupedValue}-${(_j = (_h = item.rowData) === null || _h === void 0 ? void 0 : _h.id) === null || _j === void 0 ? void 0 : _j.value}`

package/dist/components/grid/utils/newGroupedRow.js

@@ -55,25 +55,15 @@ const GroupedRow = ({ item, rowStyle, cellStyle, rowHeight, columns, widthMode,
             }
         }, 50);
     };
-    return (_jsxs(_Fragment, { children: [groupByKeys.map((_groupBy) => {
-                var _a, _b;
-                return (_jsx("div", { style: {
-                        width: widthMode === "auto"
-                            ? "auto"
-                            : ((_a = columns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.width)
-                                ? `calc(${(_b = columns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.width} + 4rem)`
-                                : (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`])
-                                    ? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`]} + 4rem)`
-                                    : "fit-content",
-                        padding: _groupBy ? "0.5rem" : 0,
-                        backgroundColor: alternateRowColor && (index + 1) % 2 === 0
-                            ? "var(--row-bg)"
-                            : "var(--row-bg-even)",
-                        flex: widthMode === "auto" ? 1 : undefined,
-                        flexGrow: widthMode === "auto" ? 1 : 0,
-                        flexShrink: widthMode === "auto" ? 1 : 0,
-                    }, className: `column index-${_groupBy}`, children: _jsx("div", {}) }));
-            }), columns
+    return (_jsxs(_Fragment, { children: [groupByKeys.map((_groupBy) => (_jsx("div", { style: {
+                    padding: _groupBy ? "0.5rem" : 0,
+                    backgroundColor: alternateRowColor && (index + 1) % 2 === 0
+                        ? "var(--row-bg)"
+                        : "var(--row-bg-even)",
+                    flex: widthMode === "auto" ? 1 : undefined,
+                    flexGrow: widthMode === "auto" ? 1 : 0,
+                    flexShrink: widthMode === "auto" ? 1 : 0,
+                }, className: `column index-${_groupBy}`, children: _jsx("div", {}) }))), columns
                 .filter((column) => !groupByKeys.includes(column.key))
                 .map((column, colIndex) => {
                 var _a, _b, _c, _d, _e;
@@ -108,20 +98,9 @@ const GroupedRow = ({ item, rowStyle, cellStyle, rowHeight, columns, widthMode,
                 const cellUrl = cellData === null || cellData === void 0 ? void 0 : cellData.url;
                 const isHidden = column.overflowHidden;
                 if (!column.hidden) {
-                    return (_jsx("div", { id: `column-${index}-${colIndex}`, className: `column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { padding: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-start", overflow: isHidden ? "hidden" : "visible", textOverflow: isHidden ? "ellipsis" : "clip", whiteSpace: isHidden ? "nowrap" : "normal", height: "100%", width: widthMode === "auto"
-                                ? "auto"
-                                : (column === null || column === void 0 ? void 0 : column.width)
-                                    ? column === null || column === void 0 ? void 0 : column.width
-                                    : (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`])
-                                        ? hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]
-                                        : "fit-content", flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, boxSizing: "border-box", 
-                            // marginTop:
-                            //   rowIndex === index && rowIndex > -1 && rowIndex < 2
-                            //     ? rowHeight
-                            //     : "",
-                            backgroundColor: alternateRowColor && (index + 1) % 2 === 0
+                    return (_jsx("div", { id: `column-${index}-${colIndex}`, className: `column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { padding: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-start", overflow: isHidden ? "hidden" : "visible", textOverflow: isHidden ? "ellipsis" : "clip", whiteSpace: isHidden ? "nowrap" : "normal", height: "100%", flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, boxSizing: "border-box", backgroundColor: alternateRowColor && (index + 1) % 2 === 0
                                 ? "var(--row-bg)"
-                                : "var(--row-bg-even)" }), onClick: () => handleRowClick(column), children: loading ? (_jsx("div", { style: { width: column.width, height: rowHeight }, children: _jsx(Shimmer, { height: 32, width: column.width }) })) : (_jsx("div", { className: (cellData === null || cellData === void 0 ? void 0 : cellData.className) || "", style: {
+                                : "var(--row-bg-even)" }), onClick: () => handleRowClick(column), children: loading ? (_jsx("div", { style: { height: rowHeight }, children: _jsx(Shimmer, { height: 32, width: column.width }) })) : (_jsx("div", { className: (cellData === null || cellData === void 0 ? void 0 : cellData.className) || "", style: {
                                 display: "flex",
                                 alignItems: "center", // Vertically center content within the cell
                                 width: "100%",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megha-ui/react",
-  "version": "1.2.819",
+  "version": "1.2.821",
   "description": "A collection of reusable UI components for React applications, built with TypeScript.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",