@megha-ui/react 1.2.240 → 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/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.240",
+  "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",