@megha-ui/react 1.2.238 → 1.2.240

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, updateGroupBy, compositeGroupBy = false, 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);
@@ -549,6 +549,38 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         }
     }, [gridColumns, groupBy]);
     const groupByMultipleKeys = (data, groupByKeys) => {
+        // When compositeGroupBy is enabled and multiple keys are selected,
+        // treat the selected keys as a single composite grouping (one level)
+        if (compositeGroupBy && groupByKeys.length > 1) {
+            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 key = compositeValue; // unique per composite
+                if (!groupsMap.has(key)) {
+                    groupsMap.set(key, {
+                        key: lastKey,
+                        value: compositeValue,
+                        count: 0,
+                        subGroups: [],
+                        values: [],
+                        allKeys: allKeys,
+                    });
+                }
+                const group = groupsMap.get(key);
+                group.values.push(item);
+            });
+            const groupedResult = Array.from(groupsMap.values());
+            groupedResult.forEach((group) => {
+                group.count = group.values.length;
+                // Put items as subGroups so the flattener emits the row items
+                group.subGroups = group.values;
+            });
+            return groupedResult;
+        }
+        // Default behavior: nested grouping by each key level-by-level
         const groupData = (items, keys, level = 0) => {
             if (level >= keys.length)
                 return items;
@@ -584,7 +616,11 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         if (groupedData) {
             groupedData.forEach((group) => {
                 const _groupedValues = [...groupedValues, group.value].map((item) => item ? item : "row");
-                const currentKeys = [...parentKeys, group.key].filter((item) => item);
+                // If composite grouping is used, the group may carry allKeys to
+                // indicate the full set of keys for width/alignment purposes
+                const currentKeys = (group.allKeys
+                    ? group.allKeys
+                    : [...parentKeys, group.key]).filter((item) => item);
                 const groupedValue = _groupedValues.join(">");
                 const groupedKey = currentKeys.join(">");
                 if (group.values) {
@@ -615,9 +651,50 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         }
         return flatArray;
     };
+    // Support grouping by comma-separated sets, where each set may contain
+    // multiple keys separated by "+" to indicate a composite group at that level.
+    const groupBySets = (data, groupSets) => {
+        const groupLevel = (items, level) => {
+            if (level >= groupSets.length)
+                return items;
+            const keys = groupSets[level];
+            const map = new Map();
+            const lastKey = keys[keys.length - 1];
+            items.forEach((item) => {
+                const values = keys.map((k) => { var _a, _b; return (_b = (_a = item[k]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; });
+                const composite = values.join(">");
+                if (!map.has(composite)) {
+                    map.set(composite, {
+                        key: lastKey,
+                        value: composite,
+                        count: 0,
+                        subGroups: [],
+                        values: [],
+                        allKeys: keys,
+                    });
+                }
+                const g = map.get(composite);
+                g.values.push(item);
+            });
+            const groups = Array.from(map.values());
+            groups.forEach((g) => {
+                g.count = g.values.length;
+                g.subGroups = groupLevel(g.values, level + 1);
+            });
+            return groups;
+        };
+        return groupLevel(data, 0);
+    };
     useEffect(() => {
         if (gridGroupBy && gridGroupBy !== "") {
-            const groupedArray = groupByMultipleKeys(sortedData, gridGroupBy.split(","));
+            const sets = gridGroupBy
+                .split(",")
+                .map((s) => s.trim())
+                .filter((s) => s)
+                .map((s) => s.split("+").map((k) => k.trim()).filter((k) => k));
+            const groupedArray = sets.length
+                ? groupBySets(sortedData, sets)
+                : [];
             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;
+    /** 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/gridHeader.js

@@ -46,6 +46,11 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
     const [searchOpsPosition, setSearchOpsPosition] = useState(null);
     const [headerColumns, setHeaderColumns] = useState([]);
     const [resizeIndex, setResizeIndex] = useState(-1);
+    // Support composite groupBy (e.g., "colA+colB,colC") by flattening to keys
+    const groupByKeys = useMemo(() => (groupBy || "")
+        .split(",")
+        .filter((g) => g)
+        .flatMap((g) => g.split("+").filter((k) => k)), [groupBy]);
     const handleMenuClick = (e, columnKey) => {
         e.stopPropagation();
         const rect = e.currentTarget.getBoundingClientRect();
@@ -230,10 +235,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
             position: "sticky",
             top: 0,
             zIndex: 1,
-        }, id: "header", children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { textTransform: "uppercase", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis" }), children: _jsx(Checkbox, { selected: allRowsSelected, onChange: () => toggleSelectAll(), noLabel: true, wrapperClass: checkboxWrapper }) })), groupBy
-                .split(",")
-                .filter((item) => item)
-                .map((_groupBy) => {
+        }, id: "header", children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { textTransform: "uppercase", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis" }), children: _jsx(Checkbox, { selected: allRowsSelected, onChange: () => toggleSelectAll(), noLabel: true, wrapperClass: checkboxWrapper }) })), groupByKeys.map((_groupBy) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62;
                 return (_jsx(_Fragment, { children: headerColumns.find((column) => column.key === _groupBy) && (_jsxs("div", { className: `${sortable &&
                             ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.sortable)
@@ -507,7 +509,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                             : "var(--disabled-bg)",
                                     }, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))] }, (_62 = headerColumns.find((column) => column.key === _groupBy)) === null || _62 === void 0 ? void 0 : _62.key)) }));
             }), headerColumns
-                .filter((column) => !groupBy.includes(column.key))
+                .filter((column) => !groupByKeys.includes(column.key))
                 .map((column, colIndex) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
                 if (!column.hidden) {

package/package.json

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