@megha-ui/react 1.2.815 → 1.2.817

package/dist/components/grid/index.js

@@ -36,6 +36,7 @@ import { TbCopy, TbCopyOff } from "react-icons/tb";
 import { formatValue } from "../../services/commonService";
 import NewGridHeader from "./utils/newGridHeader";
 import NewGridRow from "./utils/newGridRow";
+import NewSummariseDetails from "./utils/newSummariseDetails";
 const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, defaultColumnsPerView = 200, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = "3rem", 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, isSummarise = false, isHideDups = false, isMultipleChips = false, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", ignoreClickKeys = "", 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) => {
@@ -1602,7 +1603,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                         }
                     }), extraRow && extraRow, tableData.length === 0 && typeof extraRow === "undefined" && (_jsx("div", { style: { gridColumn: 1 }, children: "No Data available" })), summariseAvailable &&
                         filteredData.length > 0 &&
-                        gridGroupBy === "" && (_jsx(SummariseDetails, { summariseKeys: summariseKeys, columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, actionsKey: actionsKey }))] }), paginate && gridGroupBy === "" && (_jsxs("div", { id: "pagination", style: {
+                        gridGroupBy === "" && (_jsx(NewSummariseDetails, { summariseKeys: summariseKeys, columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, actionsKey: actionsKey }))] }), paginate && gridGroupBy === "" && (_jsxs("div", { id: "pagination", style: {
                     display: "flex",
                     minHeight: "2rem",
                     alignItems: "center",

package/dist/components/grid/utils/newGroupedGridDetails.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { GroupedGridProps } from "../types/grid";
+declare const _default: React.NamedExoticComponent<GroupedGridProps>;
+export default _default;

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { memo, useEffect, useRef, useState } from "react";
+import GroupedRow from "./groupedRow";
+import NewSummariseDetails from "./newSummariseDetails";
+const GroupedGrid = ({ groupedData, rowOpened, startIndex, endIndex, alternateRowColor, updateRowOpened, columnWidths, columnHeights, 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, setColumnHeights, actionsKey, ignoreClickKeys, locale, formatOptions, }) => {
+    const groupedDiv = useRef(null);
+    const [renderedKeys, setRenderedKeys] = useState([]);
+    useEffect(() => {
+        var _a;
+        const groupedColumns = (_a = groupedDiv.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".group-column");
+        const _renderedKeys = [];
+        let newColumnWidths = columnWidths;
+        let newColumnHeights = columnHeights;
+        groupedColumns === null || groupedColumns === void 0 ? void 0 : groupedColumns.forEach((column) => {
+            var _a;
+            const key = (_a = column.className.split(" ")) === null || _a === void 0 ? void 0 : _a[1];
+            _renderedKeys.push(key);
+            newColumnWidths = Object.assign(Object.assign({}, newColumnWidths), { [key]: `${column.clientWidth}px` });
+            newColumnHeights = Object.assign(Object.assign({}, newColumnHeights), { [key]: `${column.clientHeight}px` });
+        });
+        if (renderedKeys.sort().toString() !== _renderedKeys.sort().toString()) {
+            setColumnWidths((prev) => (Object.assign(Object.assign({}, prev), newColumnWidths)));
+            setColumnHeights((prev) => (Object.assign(Object.assign({}, prev), newColumnHeights)));
+            setRenderedKeys(_renderedKeys);
+        }
+    }, [
+        groupedData.filter((item) => {
+            return item.type === "main" && item.level === 1
+                ? true
+                : rowOpened.includes(item.groupedValue
+                    .split(">")
+                    .filter((value, index) => index !== item.groupedValue.split(">").length - 1)
+                    .join(">"));
+        }),
+    ]);
+    return (_jsx(_Fragment, { children: groupedData
+            .filter((item) => {
+            return item.type === "main" && item.level === 1
+                ? true
+                : rowOpened.includes(item.groupedValue
+                    .split(">")
+                    .filter((value, index) => index !== item.groupedValue.split(">").length - 1)
+                    .join(">"));
+        })
+            .map((item, gIndex) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (gIndex >= startIndex && gIndex <= endIndex)
+                return item.type === "main" ? (_jsxs(React.Fragment, { children: [(_a = item.groupedKey) === null || _a === void 0 ? void 0 : _a.split(">").filter((key) => key !== item.key).map((columnKey) => {
+                            const column = gridColumns.find((column) => column.key === columnKey);
+                            if (column) {
+                                return (_jsx("div", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        padding: "0.5rem",
+                                    }, className: `column index-${columnKey}`, onClick: () => updateRowOpened(item.groupedValue), children: _jsx("div", { style: {
+                                            color: alternateRowColor && (gIndex + 1) % 2 === 0
+                                                ? "var(--row-header-bg)"
+                                                : "var(--row-bg)",
+                                        }, children: "--" }) }));
+                            }
+                            return null;
+                        }), _jsxs("div", { style: {
+                                display: "flex",
+                                alignItems: "center",
+                                fontSize: "inherit",
+                                background: "inherit",
+                                cursor: "pointer",
+                                padding: "0.5rem",
+                            }, className: `group-column ${item.key}`, onClick: () => updateRowOpened(item.groupedValue), children: [_jsx("span", { style: {
+                                        fontSize: "inherit",
+                                        marginRight: "0.5rem",
+                                        color: "var(--foreground)",
+                                        background: "var(--disabled-bg)",
+                                        width: "1rem",
+                                        height: "1rem",
+                                        flexGrow: 0,
+                                        flexShrink: 0,
+                                        borderRadius: 4,
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                    }, children: rowOpened.includes(item.groupedValue || "") ? "-" : "+" }), _jsxs("div", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        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 }))] }, String((_c = item.groupedValue) !== null && _c !== void 0 ? _c : gIndex))) : (_jsx(GroupedRow, { 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)
+                        ? selectedRowStyle
+                        : {})), cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, columns: gridColumns, widthMode: widthMode, rowKey: rowKey, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, hugColumnWidths: columnWidths, actionsKey: actionsKey, ignoreClickKeys: ignoreClickKeys }, String(((_g = (_f = item.rowData) === null || _f === void 0 ? void 0 : _f.id) === null || _g === void 0 ? void 0 : _g.value)
+                    ? `${item.groupedValue}-${(_j = (_h = item.rowData) === null || _h === void 0 ? void 0 : _h.id) === null || _j === void 0 ? void 0 : _j.value}`
+                    : gIndex)));
+        }) }));
+};
+export default memo(GroupedGrid);

package/dist/components/grid/utils/newGroupedRow.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { GroupedRowProps } from "../types/grid";
+declare const _default: React.NamedExoticComponent<GroupedRowProps>;
+export default _default;

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

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from "react";
+import Shimmer from "./shimmer";
+import { Tooltip } from "react-tooltip";
+const isUrl = (value) => {
+    if (value) {
+        const urlPattern = new RegExp("^(https?:\\/\\/)?" +
+            "((([a-zA-Z0-9\\-]+\\.)+[a-zA-Z]{2,})|" +
+            "localhost|" +
+            "\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}|" +
+            "\\[?[a-fA-F0-9]*:[a-fA-F0-9:]+\\]?)" +
+            "(\\:\\d+)?(\\/[-a-zA-Z0-9@:%._\\+~#=]*)*" +
+            "(\\?[;&a-zA-Z0-9%_.~+=-]*)?" +
+            "(\\#[-a-zA-Z0-9_]*)?$", "i");
+        return !!urlPattern.test(value);
+    }
+    return false;
+};
+const GroupedRow = ({ item, rowStyle, cellStyle, rowHeight, columns, widthMode, index, rowKey, onRowClick, loading, groupBy, hugColumnWidths, alternateRowColor, actionsKey, ignoreClickKeys, }) => {
+    const handleRowClick = useCallback((column) => {
+        if ((actionsKey === null || actionsKey === void 0 ? void 0 : actionsKey.split(",").includes(column.key)) ||
+            (ignoreClickKeys === null || ignoreClickKeys === void 0 ? void 0 : ignoreClickKeys.split(",").includes(column.key)))
+            return;
+        onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item);
+    }, [onRowClick, item]);
+    const getRowClassNames = useCallback(() => {
+        let classNames = ["row"];
+        if (onRowClick)
+            classNames.push("cursor-pointer");
+        return classNames.join(" ");
+    }, [onRowClick]);
+    const groupByKeys = useMemo(() => (groupBy || "")
+        .split(",")
+        .filter((g) => g)
+        .flatMap((g) => g.split("+").filter((k) => k)), [groupBy]);
+    const checkAvailableForTooltip = (id) => {
+        setTimeout(() => {
+            var _a;
+            const tooltips = document.querySelectorAll(".react-tooltip");
+            let currentTooltip = [];
+            tooltips.forEach((value) => {
+                if (value.id === id && Array.isArray(currentTooltip)) {
+                    currentTooltip.push(value);
+                }
+            });
+            currentTooltip = currentTooltip[0];
+            if (currentTooltip) {
+                const gridContent = document.querySelector("#grid-content");
+                const { height } = (_a = gridContent === null || gridContent === void 0 ? void 0 : gridContent.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
+                if (height) {
+                    const availableHeight = height - 50;
+                    const styles = currentTooltip.getAttribute("style");
+                    currentTooltip.setAttribute("style", `${styles} height: max-content; max-height: ${availableHeight}px; overflow: hidden auto;`);
+                }
+            }
+        }, 50);
+    };
+    return (_jsxs(_Fragment, { children: [groupByKeys.map((_groupBy) => {
+                var _a, _b;
+                return (_jsx("div", { style: {
+                        width: widthMode === "auto"
+                            ? "auto"
+                            : ((_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} + 4rem)`
+                                : (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`])
+                                    ? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${_groupBy}`]} + 4rem)`
+                                    : "fit-content",
+                        padding: _groupBy ? "0.5rem" : 0,
+                        backgroundColor: alternateRowColor && (index + 1) % 2 === 0
+                            ? "var(--row-bg)"
+                            : "var(--row-bg-even)",
+                        flex: widthMode === "auto" ? 1 : undefined,
+                        flexGrow: widthMode === "auto" ? 1 : 0,
+                        flexShrink: widthMode === "auto" ? 1 : 0,
+                    }, className: `column index-${_groupBy}`, children: _jsx("div", {}) }));
+            }), columns
+                .filter((column) => !groupByKeys.includes(column.key))
+                .map((column, colIndex) => {
+                var _a, _b, _c, _d, _e;
+                const cellData = item[column.key];
+                const cellValue = cellData && cellData.isArrayString ? (_jsx("div", { children: cellData.value.toString().split(">>").length > 1 ? (_jsx(_Fragment, { children: column.isArrayString ? (_jsxs("div", { className: "flex items-center gap-2", children: [cellData.value
+                                    .toString()
+                                    .split(">>")
+                                    .slice(0, 3)
+                                    .map((item) => (_jsx("div", { className: "flex-grow-0 flex-shrink-0 rounded-full", style: {
+                                        background: "var(--standard)",
+                                        color: "var(--foreground)",
+                                        border: "1px solid var(--standard)",
+                                        padding: "0.25rem 0.5rem",
+                                    }, children: item }))), cellData.value.toString().split(">>").slice(3).length >
+                                    0 && (_jsxs("div", { className: "flex-grow-0 flex-shrink-0", "data-tooltip-id": (_a = item.id.value.toString()) !== null && _a !== void 0 ? _a : colIndex.toString(), "data-tooltip-html": `<div class="flex flex-col">${cellData.value
+                                        .toString()
+                                        .split(">>")
+                                        .slice(3)
+                                        .map((item) => `<div>${item}</div>`)
+                                        .join("")}</div>`, onMouseEnter: () => {
+                                        var _a;
+                                        return checkAvailableForTooltip((_a = item.id.value.toString()) !== null && _a !== void 0 ? _a : colIndex.toString());
+                                    }, children: ["+", " ", cellData.value.toString().split(">>").slice(3)
+                                            .length, " ", "more", _jsx(Tooltip, { className: "custom-tooltip", clickable: true, id: (_b = item.id.value.toString()) !== null && _b !== void 0 ? _b : colIndex.toString(), place: "top" })] }))] })) : (_jsx("span", { children: `${cellData.value.toString().split(">>").join(", ")}` })) })) : (_jsx("span", { children: cellData.value })) })) : column.isArrayString ? (_jsx("span", { className: "flex-grow-0 flex-shrink-0 rounded-full", style: (cellData === null || cellData === void 0 ? void 0 : cellData.value)
+                        ? {
+                            background: "var(--standard)",
+                            color: "var(--foreground)",
+                            border: "1px solid var(--standard)",
+                            padding: "0.25rem 0.5rem",
+                        }
+                        : {}, children: (_c = cellData === null || cellData === void 0 ? void 0 : cellData.value) !== null && _c !== void 0 ? _c : "" })) : cellData && Object.keys(cellData).includes("html") ? (cellData === null || cellData === void 0 ? void 0 : cellData.html) : cellData && Object.keys(cellData).includes("value") ? (cellData === null || cellData === void 0 ? void 0 : cellData.value) : cellData ? (cellData) : ("");
+                const cellUrl = cellData === null || cellData === void 0 ? void 0 : cellData.url;
+                const isHidden = column.overflowHidden;
+                if (!column.hidden) {
+                    return (_jsx("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", height: "100%", width: widthMode === "auto"
+                                ? "auto"
+                                : (column === null || column === void 0 ? void 0 : column.width)
+                                    ? column === null || column === void 0 ? void 0 : column.width
+                                    : (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`])
+                                        ? hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]
+                                        : "fit-content", flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, boxSizing: "border-box", 
+                            // marginTop:
+                            //   rowIndex === index && rowIndex > -1 && rowIndex < 2
+                            //     ? rowHeight
+                            //     : "",
+                            backgroundColor: alternateRowColor && (index + 1) % 2 === 0
+                                ? "var(--row-bg)"
+                                : "var(--row-bg-even)" }), onClick: () => handleRowClick(column), children: loading ? (_jsx("div", { style: { width: column.width, height: rowHeight }, children: _jsx(Shimmer, { height: 32, width: column.width }) })) : (_jsx("div", { className: (cellData === null || cellData === void 0 ? void 0 : cellData.className) || "", style: {
+                                display: "flex",
+                                alignItems: "center", // Vertically center content within the cell
+                                width: "100%",
+                                justifyContent: column.alignment
+                                    ? column.alignment
+                                    : column.dataType === "number" ||
+                                        column.dataType === "currency"
+                                        ? "end"
+                                        : "start",
+                            }, children: isUrl(cellUrl) ? (_jsx("a", { href: cellUrl, target: "_blank", rel: "noopener noreferrer", children: cellValue })) : column.render ? (column.render(cellValue)) : (cellValue) })) }, `${column.key}-${(_e = (_d = item.id) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : index}`));
+                }
+                return null;
+            })] }));
+};
+export default memo(GroupedRow);

package/dist/components/grid/utils/newSummariseDetails.d.ts

@@ -31,5 +31,5 @@ interface SummariseDetailsProps {
     groupedData?: string;
     actionsKey: string;
 }
-declare const SummariseDetails: React.FC<SummariseDetailsProps>;
-export default SummariseDetails;
+declare const NewSummariseDetails: React.FC<SummariseDetailsProps>;
+export default NewSummariseDetails;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 NewSummariseDetails = ({ 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)
@@ -189,4 +189,4 @@ const SummariseDetails = ({ columns, rowIndex, groupBy, sortable, cellStyle, col
                 }
             })] }));
 };
-export default SummariseDetails;
+export default NewSummariseDetails;

package/package.json

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