@megha-ui/react 1.2.199 → 1.2.200

package/dist/components/grid/index.js

@@ -22,7 +22,7 @@ import Button from "../button";
 import { TbAntennaBarsOff, TbCalculator, TbCalculatorFilled, TbCalculatorOff, } from "react-icons/tb";
 import { TbCopy, TbCopyOff } from "react-icons/tb";
 import { formatValue } from "../../services/commonService";
-const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = 38, 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 = {
+const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = 38, 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, groupLevels, 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, setRendered, isSummarise = true, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", 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) => {
     console.log("Update fixed filter values not implemented", fixedFilterValues);
@@ -542,40 +542,56 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
             }
             return column;
         }));
-        if (groupBy) {
+        // Prefer explicit composite groupLevels if provided; fallback to string groupBy
+        if (groupLevels && groupLevels.length > 0) {
+            const gb = groupLevels
+                .map((level) => level.filter(Boolean).join("+"))
+                .filter(Boolean)
+                .join(",");
+            setGridGroupBy(gb);
+        }
+        else if (groupBy) {
             setGridGroupBy(groupBy);
         }
-    }, [gridColumns, groupBy]);
-    const groupByMultipleKeys = (data, groupByKeys) => {
-        const groupData = (items, keys, level = 0) => {
-            if (level >= keys.length)
+    }, [gridColumns, groupBy, groupLevels]);
+    const parseGroupLevels = (gb) => gb
+        .split(",")
+        .filter((lvl) => lvl)
+        .map((lvl) => lvl.split("+").filter((k) => k));
+    const groupByCompositeLevels = (data, groupLevelsArr) => {
+        const groupData = (items, levels, level = 0) => {
+            if (level >= levels.length)
                 return items;
             const groupedResult = [];
-            const groupKey = keys[level];
+            const levelKeys = levels[level];
+            const map = new Map();
             items.forEach((item) => {
-                var _a;
-                const groupValue = ((_a = item[groupKey]) === null || _a === void 0 ? void 0 : _a.value) || "";
-                let existingGroup = groupedResult.find((g) => g.value === groupValue);
-                if (existingGroup) {
-                    existingGroup.values.push(item);
+                const parts = levelKeys.map((k) => { var _a, _b; return ((_b = (_a = item[k]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "").toString(); });
+                const keyName = levelKeys.join("+");
+                const display = parts.join(" | ");
+                const compositeKey = parts.join("\u0001");
+                const existing = map.get(compositeKey);
+                if (existing) {
+                    existing.values.push(item);
                 }
                 else {
-                    groupedResult.push({
-                        key: groupKey,
-                        value: groupValue,
+                    map.set(compositeKey, {
+                        key: keyName,
+                        value: display,
                         count: 0,
                         subGroups: [],
                         values: [item],
                     });
                 }
             });
-            groupedResult.forEach((group) => {
+            const result = Array.from(map.values());
+            result.forEach((group) => {
                 group.count = group.values.length;
-                group.subGroups = groupData(group.values, keys, level + 1);
+                group.subGroups = groupData(group.values, levels, level + 1);
             });
-            return groupedResult;
+            return result;
         };
-        return groupData(data, groupByKeys);
+        return groupData(data, groupLevelsArr);
     };
     const flattenGroupedData = (groupedData, level, groupedValues = [], parentKeys = []) => {
         const flatArray = [];
@@ -615,7 +631,8 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
     };
     useEffect(() => {
         if (gridGroupBy && gridGroupBy !== "") {
-            const groupedArray = groupByMultipleKeys(sortedData, gridGroupBy.split(","));
+            const levels = parseGroupLevels(gridGroupBy);
+            const groupedArray = groupByCompositeLevels(sortedData, levels);
             const flatGroupedArray = flattenGroupedData(groupedArray, 1);
             setGroupedData(flatGroupedArray);
             const grouped = flatGroupedArray

package/dist/components/grid/types/grid.d.ts

@@ -104,6 +104,8 @@ export interface OjasGridProps {
     exportableFileName?: string;
     groupBy?: string;
     updateGroupBy?: (value: string) => void;
+    /** Optional composite grouping levels; each inner array is a same-level composite group */
+    groupLevels?: string[][];
     hlBorderColor?: string;
     selectedRow?: number;
     selectedRowStyle?: React.CSSProperties;

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

@@ -130,6 +130,20 @@ const SummariseDetails = ({ columns, rowIndex, groupBy, sortable, cellStyle, col
                 .filter((item) => item && !removedKeys.includes(item))
                 .map((_groupBy) => {
                 var _a;
+                if (_groupBy.includes("+")) {
+                    const width = (() => {
+                        const keys = _groupBy.split("+");
+                        const sum = keys.reduce((acc, k) => {
+                            const col = columns.find((c) => c.key === k);
+                            const w = (col === null || col === void 0 ? void 0 : col.width)
+                                ? parseFloat(col.width.toString())
+                                : parseFloat((columnWidths[`column-${k}`] || "0").toString());
+                            return acc + (isNaN(w) ? 0 : w);
+                        }, 0);
+                        return `${sum}px`;
+                    })();
+                    return (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { position: "relative", width: widthMode === "auto" ? "auto" : width, padding: _groupBy ? "0.5rem" : 0 }), className: `column composite-${_groupBy}`, children: "--" }, `${groupedData}-${_groupBy}`));
+                }
                 const column = columns.find((column) => column.key === _groupBy);
                 const columnKey = groupedData
                     ? `${groupedData}-${column === null || column === void 0 ? void 0 : column.key}`

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

@@ -78,11 +78,23 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
                                 fontSize: "inherit",
                                 width: widthMode === "auto"
                                     ? "auto"
-                                    : ((_b = gridColumns.find((column) => column.key === item.key)) === null || _b === void 0 ? void 0 : _b.width)
-                                        ? `calc(${(_c = gridColumns.find((column) => column.key === item.key)) === null || _c === void 0 ? void 0 : _c.width} + 25px)`
-                                        : columnWidths[`column-${item.key}`]
-                                            ? `calc(${columnWidths[`column-${item.key}`]} + 25px)`
-                                            : "fit-content",
+                                    : item.key.includes("+")
+                                        ? (() => {
+                                            const keys = item.key.split("+");
+                                            const sum = keys.reduce((acc, k) => {
+                                                const col = gridColumns.find((c) => c.key === k);
+                                                const w = (col === null || col === void 0 ? void 0 : col.width)
+                                                    ? parseFloat(col.width.toString())
+                                                    : parseFloat((columnWidths[`column-${k}`] || "0").toString());
+                                                return acc + (isNaN(w) ? 0 : w);
+                                            }, 0);
+                                            return `calc(${sum}px + 25px)`;
+                                        })()
+                                        : ((_b = gridColumns.find((column) => column.key === item.key)) === null || _b === void 0 ? void 0 : _b.width)
+                                            ? `calc(${(_c = gridColumns.find((column) => column.key === item.key)) === null || _c === void 0 ? void 0 : _c.width} + 25px)`
+                                            : columnWidths[`column-${item.key}`]
+                                                ? `calc(${columnWidths[`column-${item.key}`]} + 25px)`
+                                                : "fit-content",
                                 background: "inherit",
                                 flexShrink: 0,
                                 flexGrow: 0,

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

@@ -35,11 +35,23 @@ const GroupedRow = ({ item, rowStyle, cellStyle, rowHeight, columns, widthMode,
                 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} + 25px)`
-                                : (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`])
-                                    ? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`]} + 25px)`
-                                    : "fit-content",
+                            : _groupBy.includes("+")
+                                ? (() => {
+                                    const keys = _groupBy.split("+");
+                                    const sum = keys.reduce((acc, k) => {
+                                        const col = columns.find((c) => c.key === k);
+                                        const w = (col === null || col === void 0 ? void 0 : col.width)
+                                            ? parseFloat(col.width.toString())
+                                            : parseFloat(((hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${k}`]) || "0").toString());
+                                        return acc + (isNaN(w) ? 0 : w);
+                                    }, 0);
+                                    return `calc(${sum}px + 25px)`;
+                                })()
+                                : ((_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} + 25px)`
+                                    : (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`])
+                                        ? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`]} + 25px)`
+                                        : "fit-content",
                         padding: _groupBy ? "0.5rem" : 0,
                         backgroundColor: alternateRowColor && (index + 1) % 2 === 0
                             ? "var(--row-bg)"

package/package.json

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