@megha-ui/react 1.3.89 → 1.3.92

package/dist/components/grid/index.js

@@ -1581,7 +1581,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                                 : [..._gridGroupBy.split(",").filter((item) => item), value].join(",");
                             setGridGroupBy(_gridGroupBy);
                             updateGroupBy && updateGroupBy(_gridGroupBy);
-                        }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), gridGroupBy !== "" ? (_jsx(NewGroupedGridDetails, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy, widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey })) : (tableData.map((item, index) => {
+                        }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), gridGroupBy !== "" ? (_jsx(NewGroupedGridDetails, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy !== null && groupBy !== void 0 ? groupBy : "", widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey })) : (tableData.map((item, index) => {
                         var _a, _b, _c, _d;
                         if (paginate) {
                             return (_jsx(NewGridRow, { item: item, index: index, rowStyle: Object.assign({}, rowStyle), selectedRow: selectedRow !== null && selectedRow !== void 0 ? selectedRow : "", selectedRowStyle: selectedRowStyle, handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_b = (_a = item.id) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : index)));

package/dist/components/grid/types/grid.d.ts

@@ -235,7 +235,7 @@ export interface GroupedGridProps {
     updateRowOpened: (key: string) => void;
     columnWidths: any;
     columnHeights: any;
-    groupBy: any;
+    groupBy: string;
     widthMode: any;
     rowHeight: any;
     headerBackground: any;

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

@@ -1,12 +1,24 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactDOM from "react-dom";
 const GridFilterDropdown = ({ headerDropdownIndex, position, sortingOps, searchOps, columnIndex, portalTarget, }) => {
-    const dropdownContent = (_jsxs("div", { style: Object.assign(Object.assign({ position: position ? "absolute" : "absolute" }, (position
+    const dropdownContent = (_jsx("div", { style: Object.assign(Object.assign({ position: position ? "absolute" : "absolute" }, (position
             ? {
                 top: position.top,
                 left: position.left,
             }
-            : Object.assign({ top: "calc(100% + 5px)" }, (columnIndex > 1 ? { right: 0 } : { left: 0 })))), { zIndex: headerDropdownIndex ? headerDropdownIndex : 1000, backgroundColor: "var(--background)", color: "var(--foreground)", boxShadow: "0px 0.5rem 1rem 0px rgba(0,0,0,0.2)", listStyleType: "none", padding: "0.35rem 0", width: "max-content", maxWidth: "500px", borderRadius: "0.5rem", margin: 0 }), onClick: (e) => e.stopPropagation(), children: [sortingOps, searchOps] }));
+            : Object.assign({ top: "calc(100% + 5px)" }, (columnIndex > 1 ? { right: 0 } : { left: 0 })))), { zIndex: headerDropdownIndex ? headerDropdownIndex : 1000, backgroundColor: "var(--card-bg, var(--background))", color: "var(--foreground)", boxShadow: "0px 0.5rem 1rem 0px rgba(0,0,0,0.2)", border: "1px solid var(--divider, #eceff4)", listStyleType: "none", padding: "0.35rem 0.35rem", width: "max-content", maxWidth: "500px", borderRadius: "0.5rem", margin: 0 }), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.25rem",
+                minWidth: "12rem",
+            }, children: [sortingOps && (_jsx("div", { style: {
+                        padding: "0.35rem 0.5rem 0.25rem",
+                        borderBottom: searchOps
+                            ? "1px solid var(--divider, #eceff4)"
+                            : "none",
+                    }, children: sortingOps })), searchOps && (_jsx("div", { style: {
+                        padding: "0.25rem 0.5rem 0.35rem",
+                    }, children: searchOps }))] }) }));
     // Render in a portal so the dropdown is not occluded
     // by sticky header cells or other stacking contexts.
     return ReactDOM.createPortal(dropdownContent, portalTarget || document.body);

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

@@ -3,6 +3,10 @@ import React, { memo } from "react";
 import NewSummariseDetails from "./newSummariseDetails";
 import NewGroupedRow from "./newGroupedRow";
 const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRowColor, updateRowOpened, columnWidths, groupBy, widthMode, rowKey, rowHeight, headerBackground, isSummarise, gridGroupBy, rowStyle, sortable, cellStyle, summariseKeys, summariseDetails, activeCalculateColor, gridRef, setCalculatePosition, calculatePosition, calculatetextColor, setCalculateVisible, calculateVisible, summariseDisplay, recalculate, selectedRowStyle, isLoading, selectedRow, onRowClick, gridColumns, bulkSelect, selectedRows, toggleRowSelection, hasVerticalScroll, setColumnWidths, actionsKey, ignoreClickKeys, locale, formatOptions, }) => {
+    const groupByKeys = React.useMemo(() => (groupBy || "")
+        .split(",")
+        .filter((g) => g)
+        .flatMap((g) => g.split("+").filter((k) => k)), [groupBy]);
     return (_jsx(_Fragment, { children: groupedData
             .filter((item) => {
             return item.type === "main" && item.level === 1
@@ -53,7 +57,7 @@ const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRo
                                         flexWrap: "wrap",
                                     }, children: [_jsx("span", { style: { marginRight: "0.5rem" }, children: item.html ? _jsx(_Fragment, { children: item.html }) : item.value }), _jsx("span", { children: `(${item === null || item === void 0 ? void 0 : item.count})` })] })] }), isSummarise &&
                             parseInt(((_b = item === null || item === void 0 ? void 0 : item.count) === null || _b === void 0 ? void 0 : _b.toString()) || "0") > 0 && (_jsx(NewSummariseDetails, { rowIndex: gIndex, removedKeys: item.groupedKey.split(">"), columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, groupedData: item.groupedValue, actionsKey: actionsKey })), !isSummarise && (_jsx("div", { className: "column group-summary-placeholder", style: {
-                                gridColumn: "1 / -1",
+                                gridColumn: `span ${gridColumns.filter((column) => !groupByKeys.includes(column.key)).length - 1} / span ${gridColumns.filter((column) => !groupByKeys.includes(column.key)).length - 1}`,
                                 padding: "0.5rem",
                                 backgroundColor: "var(--summary-bg)",
                             } }))] }, String((_c = item.groupedValue) !== null && _c !== void 0 ? _c : gIndex))) : (_jsx(NewGroupedRow, { item: item.rowData, index: gIndex, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_e = (_d = item.rowData) === null || _d === void 0 ? void 0 : _d.id) === null || _e === void 0 ? void 0 : _e.value)

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

@@ -1,5 +1,16 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TextFilterDropdown = ({ headerDropdownIndex, sortingOps, searchOps, columnIndex, }) => {
-    return (_jsxs("div", { style: Object.assign(Object.assign({ position: "absolute", top: "calc(100% + 5px)" }, (columnIndex > 1 ? { right: 0 } : { left: 0 })), { zIndex: headerDropdownIndex ? headerDropdownIndex : 1000, backgroundColor: "var(--background)", color: "var(--foreground)", boxShadow: "0px 0.5rem 1rem 0px rgba(0,0,0,0.2)", listStyleType: "none", padding: "0.25rem 0", width: 230, borderRadius: "0.5rem", margin: 0 }), id: "grid-dropdown", onClick: (e) => e.stopPropagation(), children: [sortingOps && sortingOps, searchOps && searchOps] }));
+    return (_jsx("div", { style: Object.assign(Object.assign({ position: "absolute", top: "calc(100% + 5px)" }, (columnIndex > 1 ? { right: 0 } : { left: 0 })), { zIndex: headerDropdownIndex ? headerDropdownIndex : 1000, backgroundColor: "var(--card-bg, var(--background))", color: "var(--foreground)", boxShadow: "0px 0.5rem 1rem 0px rgba(0,0,0,0.2)", border: "1px solid var(--divider, #eceff4)", listStyleType: "none", padding: "0.25rem 0.35rem", width: 230, borderRadius: "0.5rem", margin: 0 }), id: "grid-dropdown", onClick: (e) => e.stopPropagation(), children: _jsxs("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.25rem",
+            }, children: [sortingOps && (_jsx("div", { style: {
+                        padding: "0.35rem 0.5rem 0.25rem",
+                        borderBottom: searchOps
+                            ? "1px solid var(--divider, #eceff4)"
+                            : "none",
+                    }, children: sortingOps })), searchOps && (_jsx("div", { style: {
+                        padding: "0.25rem 0.5rem 0.35rem",
+                    }, children: searchOps }))] }) }));
 };
 export default TextFilterDropdown;

package/package.json

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