@megha-ui/react 1.2.237 → 1.2.239

package/dist/components/dropdown/index.js

@@ -230,7 +230,11 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
     const handleClear = () => {
         if (!isClear)
             return;
-        onApplyChange ? onApplyChange([]) : onChange([]);
+        onApplyChange
+            ? onApplyChange([])
+            : onSelectChange
+                ? onSelectChange([])
+                : onChange([]);
     };
     useEffect(() => {
         if (!isMultiple && intermediateValues.length > 0) {
@@ -362,7 +366,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                                                 width: "100%",
                                             }, children: _jsxs("span", { style: { marginLeft: "0.5rem" }, children: ["+ Create ", searchTerm] }) })] }, String(searchTerm))) : groupedOptions.length > 0 ? (groupedOptions.map((groupOption, gIndex) => (_jsxs("div", { children: [_jsx("div", { style: {
                                                 padding: "0.25rem 0 0.25rem 1rem",
-                                                backgroundColor: "#dddddd"
+                                                backgroundColor: "#dddddd",
                                             }, children: groupOption.groupedValue }), groupOption.options.map((option, index) => {
                                             let prevOptions = groupedOptions.filter((item, index) => index < gIndex);
                                             prevOptions = [

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/package.json

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