@megha-ui/react 1.2.284 → 1.2.286

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, compositeGroupBy = false, 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, 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, isHideDups = false, 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);
@@ -568,14 +568,17 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
             setGridGroupBy(groupBy);
         }
     }, [gridColumns, groupBy]);
-    const groupByMultipleKeys = (data, groupByKeys, compositeGroupBy = false) => {
-        if (compositeGroupBy && groupByKeys.length > 1) {
+    const groupByMultipleKeys = (data, groupByKeys) => {
+        // Backward compatibility: if compositeGroupBy is true and no '+' is used,
+        // and more than one key is provided, group all keys into a single composite bucket.
+        const hasPlus = groupByKeys.some((k) => k === null || k === void 0 ? void 0 : k.includes("+"));
+        if (groupByKeys.length > 1 && !hasPlus) {
             const groupsMap = new Map();
             const allKeys = groupByKeys.filter((k) => k);
             const lastKey = allKeys[allKeys.length - 1];
             data.forEach((item) => {
                 const values = allKeys.map((k) => { var _a, _b; return (_b = (_a = item[k]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; });
-                const compositeValue = values.join(">");
+                const compositeValue = values.join("+");
                 const key = compositeValue;
                 if (!groupsMap.has(key)) {
                     groupsMap.set(key, {
@@ -597,26 +600,51 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
             });
             return groupedResult;
         }
+        // Parse keys into levels, where each level can be a composite (split by '+')
+        const parsedKeys = groupByKeys
+            .map((k) => (k !== null && k !== void 0 ? k : "").trim())
+            .filter((k) => k)
+            .map((k) => k.includes("+")
+            ? k
+                .split("+")
+                .map((s) => s.trim())
+                .filter(Boolean)
+            : [k]);
         const groupData = (items, keys, level = 0) => {
             if (level >= keys.length)
                 return items;
             const groupedResult = [];
-            const groupKey = keys[level];
+            const levelKeys = keys[level]; // one or more keys for this level
             items.forEach((item) => {
                 var _a;
-                const groupValue = ((_a = item[groupKey]) === null || _a === void 0 ? void 0 : _a.value) || "";
+                let groupValue = "";
+                let groupKeyLabel = levelKeys[levelKeys.length - 1] || "";
+                let allKeysForLevel = undefined;
+                if (levelKeys.length > 1) {
+                    const values = levelKeys.map((k) => { var _a, _b; return (_b = (_a = item[k]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; });
+                    groupValue = values.join(">");
+                    allKeysForLevel = levelKeys;
+                }
+                else {
+                    const k = levelKeys[0];
+                    groupValue = ((_a = item[k]) === null || _a === void 0 ? void 0 : _a.value) || "";
+                }
                 let existingGroup = groupedResult.find((g) => g.value === groupValue);
                 if (existingGroup) {
                     existingGroup.values.push(item);
                 }
                 else {
-                    groupedResult.push({
-                        key: groupKey,
+                    const base = {
+                        key: groupKeyLabel,
                         value: groupValue,
                         count: 0,
                         subGroups: [],
                         values: [item],
-                    });
+                    };
+                    if (allKeysForLevel) {
+                        base.allKeys = allKeysForLevel;
+                    }
+                    groupedResult.push(base);
                 }
             });
             groupedResult.forEach((group) => {
@@ -625,14 +653,16 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
             });
             return groupedResult;
         };
-        return groupData(data, groupByKeys);
+        return groupData(data, parsedKeys);
     };
     const flattenGroupedData = (groupedData, level, groupedValues = [], parentKeys = []) => {
         const flatArray = [];
         if (groupedData) {
             groupedData.forEach((group) => {
                 const _groupedValues = [...groupedValues, group.value].map((item) => item ? item : "row");
-                const currentKeys = (group.allKeys ? group.allKeys : [...parentKeys, group.key]).filter((item) => item);
+                const currentKeys = (group.allKeys
+                    ? [...parentKeys, ...group.allKeys]
+                    : [...parentKeys, group.key]).filter((item) => item);
                 const groupedValue = _groupedValues.join(">");
                 const groupedColumns = currentKeys.join(">");
                 if (group.values) {
@@ -672,7 +702,10 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                 .split(",")
                 .map((s) => s.trim())
                 .filter((s) => s);
-            const groupedArray = sets.length ? groupByMultipleKeys(sortedData, sets, compositeGroupBy) : [];
+            const groupedArray = sets.length
+                ? groupByMultipleKeys(sortedData, sets)
+                : [];
+            console.log({ groupedArray });
             const flatGroupedArray = flattenGroupedData(groupedArray, 1);
             setGroupedData(flatGroupedArray);
             const grouped = flatGroupedArray

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

@@ -104,8 +104,6 @@ export interface OjasGridProps {
     exportableFileName?: string;
     groupBy?: string;
     updateGroupBy?: (value: string) => void;
-    /** When multiple keys are chosen for groupBy, treat them as a single composite group instead of nested groups */
-    compositeGroupBy?: boolean;
     hlBorderColor?: string;
     selectedRow?: number;
     selectedRowStyle?: React.CSSProperties;

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

@@ -55,7 +55,6 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
                         backgroundColor: "var(--summary-bg)",
                     }, children: [(_a = item.groupedKey) === null || _a === void 0 ? void 0 : _a.split(">").filter((key) => key !== item.key).map((columnKey) => {
                             const column = gridColumns.find((column) => column.key === columnKey);
-                            console.log({ columnKey });
                             if (column) {
                                 return (_jsx("div", { style: {
                                         width: widthMode === "auto"

package/package.json

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