@megha-ui/react 1.2.239 → 1.2.241

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

@@ -1,6 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import CalculateDropdown from "./calculatedropdown";
 const SummariseDetails = ({ columns, rowIndex, groupBy, sortable, cellStyle, columnWidths, widthMode, summariseDetails, summariseKeys, activeCalculateColor, gridRef, setCalculatePosition, calculatePosition, calculatetextColor = "#aaa", setCalculateVisible, calculateVisible, summariseDisplay, recalculate, groupedData, removedKeys = [], actionsKey, }) => {
+    const groupByKeys = React.useMemo(() => (groupBy || "")
+        .split(",")
+        .filter((g) => g)
+        .flatMap((g) => g.split("+").filter((k) => k)), [groupBy]);
     const handleCalculateSelect = (_columnKey, type) => {
         let columnKey = _columnKey;
         if (columnKey.includes("-")) {
@@ -161,7 +166,7 @@ const SummariseDetails = ({ columns, rowIndex, groupBy, sortable, cellStyle, col
                                     ? dateTypeCalcOps.includes(item.value)
                                     : textTypeCalcOps.includes(item.value)), onClose: () => setCalculateVisible(""), columnKey: columnKey || "" }))] }, `${groupedData}-${_groupBy}`));
             }), columns
-                .filter((column) => !groupBy.includes(column.key))
+                .filter((column) => !groupByKeys.includes(column.key))
                 .map((column) => {
                 var _a;
                 const columnKey = groupedData

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/dist/components/grid/utils/gridRow.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import Shimmer from "./shimmer";
 import Checkbox from "../../checkbox";
 import { formatValue } from "../../../services/commonService";
@@ -22,6 +22,10 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const [itemsAlign, setItemsAlign] = useState("stretch");
     const [draggableIndex, setDraggableIndex] = useState(0);
+    const groupByKeys = useMemo(() => (groupBy || "")
+        .split(",")
+        .filter((g) => g)
+        .flatMap((g) => g.split("+").filter((k) => k)), [groupBy]);
     const handleRowClick = useCallback(() => {
         onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item);
     }, [onRowClick, item]);
@@ -77,7 +81,7 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
                                     : "";
                         const cellUrl = cellData === null || cellData === void 0 ? void 0 : cellData.url;
                         const isHidden = column.overflowHidden;
-                        if (!column.hidden && groupBy !== column.key) {
+                        if (!column.hidden && !groupByKeys.includes(column.key)) {
                             return (_jsxs("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", width: widthMode === "auto"
                                         ? "auto"
                                         : (column === null || column === void 0 ? void 0 : column.width)
@@ -127,7 +131,7 @@ const GridRow = ({ item, rowStyle, cellStyle, rowHeight, bulkSelect, selectedRow
                             : "";
                 const cellUrl = cellData === null || cellData === void 0 ? void 0 : cellData.url;
                 const isHidden = column.overflowHidden;
-                if (!column.hidden && groupBy !== column.key) {
+                if (!column.hidden && !groupByKeys.includes(column.key)) {
                     return (_jsxs("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", width: widthMode === "auto"
                                 ? "auto"
                                 : (column === null || column === void 0 ? void 0 : column.width)

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback } from "react";
+import { memo, useCallback, useMemo } from "react";
 import Shimmer from "./shimmer";
 const isUrl = (value) => {
     if (value) {
@@ -25,12 +25,13 @@ const GroupedRow = ({ item, rowStyle, cellStyle, rowHeight, columns, widthMode,
             classNames.push("cursor-pointer");
         return classNames.join(" ");
     }, [onRowClick]);
+    const groupByKeys = useMemo(() => (groupBy || "")
+        .split(",")
+        .filter((g) => g)
+        .flatMap((g) => g.split("+").filter((k) => k)), [groupBy]);
     return (_jsxs("div", { id: `${index}`, className: getRowClassNames(), style: Object.assign(Object.assign({}, rowStyle), { position: "relative", display: "flex", alignItems: "center", fontSize: "inherit", minHeight: rowHeight, height: "max-content", boxSizing: "border-box", backgroundColor: alternateRowColor && (index + 1) % 2 === 0
                 ? "var(--row-bg)"
-                : "var(--row-bg-even)" }), onClick: handleRowClick, children: [groupBy
-                .split(",")
-                .filter((item) => item)
-                .map((_groupBy) => {
+                : "var(--row-bg-even)" }), onClick: handleRowClick, children: [groupByKeys.map((_groupBy) => {
                 var _a, _b;
                 return (_jsx("div", { style: {
                         width: widthMode === "auto"
@@ -47,9 +48,9 @@ const GroupedRow = ({ item, rowStyle, cellStyle, rowHeight, columns, widthMode,
                         flex: widthMode === "auto" ? 1 : undefined,
                         flexGrow: widthMode === "auto" ? 1 : 0,
                         flexShrink: widthMode === "auto" ? 1 : 0,
-                    }, className: `column index-${groupBy}`, children: _jsx("div", {}) }));
+                    }, className: `column index-${_groupBy}`, children: _jsx("div", {}) }));
             }), columns
-                .filter((column) => !groupBy.includes(column.key))
+                .filter((column) => !groupByKeys.includes(column.key))
                 .map((column, colIndex) => {
                 var _a, _b;
                 const cellData = item[column.key];

package/package.json

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