@megha-ui/react 1.2.200 → 1.2.202

package/dist/components/checkbox/index.d.ts

@@ -12,6 +12,7 @@ interface RadioInputProps {
     label?: string;
     value?: string;
     disabled?: boolean;
+    id?: string;
 }
 declare const Checkbox: React.FC<RadioInputProps>;
 export default Checkbox;

package/dist/components/checkbox/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-const Checkbox = ({ onChange, disabled, wrapperClass, name, width, noLabel, label, value, labelMargin, style, indeterminate, selected = false, }) => {
+const Checkbox = ({ onChange, disabled, wrapperClass, name, width, noLabel, label, value, labelMargin, style, indeterminate, selected = false, id }) => {
     const checkboxWrapper = useRef(null);
     useEffect(() => {
         let checkbox = null;
@@ -16,10 +16,10 @@ const Checkbox = ({ onChange, disabled, wrapperClass, name, width, noLabel, labe
     }, [indeterminate]);
     return (_jsx("div", { ref: checkboxWrapper, className: wrapperClass, style: style, children: _jsxs("label", { style: {
                 width: width,
-                display: "inline-flex",
+                display: "flex",
                 alignItems: "center",
                 margin: labelMargin,
-            }, children: [_jsx("input", { type: "checkbox", id: "checkbox", name: name, value: value, checked: selected, disabled: disabled, onChange: (event) => onChange(event.target.checked) }), _jsx("span", { style: {
+            }, children: [_jsx("input", { type: "checkbox", className: "checkbox", id: id, name: name, value: value, checked: selected, disabled: disabled, onChange: (event) => onChange(event.target.checked) }), _jsx("span", { style: {
                         marginRight: !noLabel ? "0.5rem" : "",
                         display: "flex",
                         alignItems: "center",

package/dist/components/dropdown/index.js

@@ -351,7 +351,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                                         if (!option.disabled) {
                                             setHighlightIndex(index);
                                         }
-                                    }, children: [isMultiple && (_jsx("div", { style: { marginLeft: "0.5rem" }, children: _jsx(Checkbox, { selected: intermediateValues.includes(option.value), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }) })), _jsxs("div", { style: {
+                                    }, children: [isMultiple && (_jsx("div", { style: { marginRight: "0.5rem" }, children: _jsx(Checkbox, { selected: intermediateValues.includes(option.value), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }) })), _jsxs("div", { style: {
                                                 display: "flex",
                                                 alignItems: "start",
                                                 width: "100%",

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, groupLevels, 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, 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, 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);
@@ -542,56 +542,40 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
             }
             return column;
         }));
-        // Prefer explicit composite groupLevels if provided; fallback to string groupBy
-        if (groupLevels && groupLevels.length > 0) {
-            const gb = groupLevels
-                .map((level) => level.filter(Boolean).join("+"))
-                .filter(Boolean)
-                .join(",");
-            setGridGroupBy(gb);
-        }
-        else if (groupBy) {
+        if (groupBy) {
             setGridGroupBy(groupBy);
         }
-    }, [gridColumns, groupBy, groupLevels]);
-    const parseGroupLevels = (gb) => gb
-        .split(",")
-        .filter((lvl) => lvl)
-        .map((lvl) => lvl.split("+").filter((k) => k));
-    const groupByCompositeLevels = (data, groupLevelsArr) => {
-        const groupData = (items, levels, level = 0) => {
-            if (level >= levels.length)
+    }, [gridColumns, groupBy]);
+    const groupByMultipleKeys = (data, groupByKeys) => {
+        const groupData = (items, keys, level = 0) => {
+            if (level >= keys.length)
                 return items;
             const groupedResult = [];
-            const levelKeys = levels[level];
-            const map = new Map();
+            const groupKey = keys[level];
             items.forEach((item) => {
-                const parts = levelKeys.map((k) => { var _a, _b; return ((_b = (_a = item[k]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "").toString(); });
-                const keyName = levelKeys.join("+");
-                const display = parts.join(" | ");
-                const compositeKey = parts.join("\u0001");
-                const existing = map.get(compositeKey);
-                if (existing) {
-                    existing.values.push(item);
+                var _a;
+                const groupValue = ((_a = item[groupKey]) === null || _a === void 0 ? void 0 : _a.value) || "";
+                let existingGroup = groupedResult.find((g) => g.value === groupValue);
+                if (existingGroup) {
+                    existingGroup.values.push(item);
                 }
                 else {
-                    map.set(compositeKey, {
-                        key: keyName,
-                        value: display,
+                    groupedResult.push({
+                        key: groupKey,
+                        value: groupValue,
                         count: 0,
                         subGroups: [],
                         values: [item],
                     });
                 }
             });
-            const result = Array.from(map.values());
-            result.forEach((group) => {
+            groupedResult.forEach((group) => {
                 group.count = group.values.length;
-                group.subGroups = groupData(group.values, levels, level + 1);
+                group.subGroups = groupData(group.values, keys, level + 1);
             });
-            return result;
+            return groupedResult;
         };
-        return groupData(data, groupLevelsArr);
+        return groupData(data, groupByKeys);
     };
     const flattenGroupedData = (groupedData, level, groupedValues = [], parentKeys = []) => {
         const flatArray = [];
@@ -631,8 +615,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
     };
     useEffect(() => {
         if (gridGroupBy && gridGroupBy !== "") {
-            const levels = parseGroupLevels(gridGroupBy);
-            const groupedArray = groupByCompositeLevels(sortedData, levels);
+            const groupedArray = groupByMultipleKeys(sortedData, gridGroupBy.split(","));
             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;
-    /** Optional composite grouping levels; each inner array is a same-level composite group */
-    groupLevels?: string[][];
     hlBorderColor?: string;
     selectedRow?: number;
     selectedRowStyle?: React.CSSProperties;
@@ -155,7 +153,7 @@ export interface OjasGridProps {
     updateFixedFilterValues?: (fixedFilterValues: {
         [key: string]: string[];
     }) => void;
-    locale: string;
+    locale?: string;
     formatOptions?: any;
     exportOptions?: any;
 }

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

@@ -130,20 +130,6 @@ const SummariseDetails = ({ columns, rowIndex, groupBy, sortable, cellStyle, col
                 .filter((item) => item && !removedKeys.includes(item))
                 .map((_groupBy) => {
                 var _a;
-                if (_groupBy.includes("+")) {
-                    const width = (() => {
-                        const keys = _groupBy.split("+");
-                        const sum = keys.reduce((acc, k) => {
-                            const col = columns.find((c) => c.key === k);
-                            const w = (col === null || col === void 0 ? void 0 : col.width)
-                                ? parseFloat(col.width.toString())
-                                : parseFloat((columnWidths[`column-${k}`] || "0").toString());
-                            return acc + (isNaN(w) ? 0 : w);
-                        }, 0);
-                        return `${sum}px`;
-                    })();
-                    return (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { position: "relative", width: widthMode === "auto" ? "auto" : width, padding: _groupBy ? "0.5rem" : 0 }), className: `column composite-${_groupBy}`, children: "--" }, `${groupedData}-${_groupBy}`));
-                }
                 const column = columns.find((column) => column.key === _groupBy);
                 const columnKey = groupedData
                     ? `${groupedData}-${column === null || column === void 0 ? void 0 : column.key}`

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

@@ -78,23 +78,11 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
                                 fontSize: "inherit",
                                 width: widthMode === "auto"
                                     ? "auto"
-                                    : item.key.includes("+")
-                                        ? (() => {
-                                            const keys = item.key.split("+");
-                                            const sum = keys.reduce((acc, k) => {
-                                                const col = gridColumns.find((c) => c.key === k);
-                                                const w = (col === null || col === void 0 ? void 0 : col.width)
-                                                    ? parseFloat(col.width.toString())
-                                                    : parseFloat((columnWidths[`column-${k}`] || "0").toString());
-                                                return acc + (isNaN(w) ? 0 : w);
-                                            }, 0);
-                                            return `calc(${sum}px + 25px)`;
-                                        })()
-                                        : ((_b = gridColumns.find((column) => column.key === item.key)) === null || _b === void 0 ? void 0 : _b.width)
-                                            ? `calc(${(_c = gridColumns.find((column) => column.key === item.key)) === null || _c === void 0 ? void 0 : _c.width} + 25px)`
-                                            : columnWidths[`column-${item.key}`]
-                                                ? `calc(${columnWidths[`column-${item.key}`]} + 25px)`
-                                                : "fit-content",
+                                    : ((_b = gridColumns.find((column) => column.key === item.key)) === null || _b === void 0 ? void 0 : _b.width)
+                                        ? `calc(${(_c = gridColumns.find((column) => column.key === item.key)) === null || _c === void 0 ? void 0 : _c.width} + 25px)`
+                                        : columnWidths[`column-${item.key}`]
+                                            ? `calc(${columnWidths[`column-${item.key}`]} + 25px)`
+                                            : "fit-content",
                                 background: "inherit",
                                 flexShrink: 0,
                                 flexGrow: 0,

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

@@ -35,23 +35,11 @@ const GroupedRow = ({ item, rowStyle, cellStyle, rowHeight, columns, widthMode,
                 return (_jsx("div", { style: {
                         width: widthMode === "auto"
                             ? "auto"
-                            : _groupBy.includes("+")
-                                ? (() => {
-                                    const keys = _groupBy.split("+");
-                                    const sum = keys.reduce((acc, k) => {
-                                        const col = columns.find((c) => c.key === k);
-                                        const w = (col === null || col === void 0 ? void 0 : col.width)
-                                            ? parseFloat(col.width.toString())
-                                            : parseFloat(((hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${k}`]) || "0").toString());
-                                        return acc + (isNaN(w) ? 0 : w);
-                                    }, 0);
-                                    return `calc(${sum}px + 25px)`;
-                                })()
-                                : ((_a = columns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.width)
-                                    ? `calc(${(_b = columns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.width} + 25px)`
-                                    : (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`])
-                                        ? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`]} + 25px)`
-                                        : "fit-content",
+                            : ((_a = columns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.width)
+                                ? `calc(${(_b = columns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.width} + 25px)`
+                                : (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`])
+                                    ? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`]} + 25px)`
+                                    : "fit-content",
                         padding: _groupBy ? "0.5rem" : 0,
                         backgroundColor: alternateRowColor && (index + 1) % 2 === 0
                             ? "var(--row-bg)"

package/package.json

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