@megha-ui/react 1.3.75 → 1.3.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
2
|
+
import React, { useState, useEffect, useCallback, useMemo, useRef, } from "react";
|
|
3
3
|
import GridHeaderDropdown from "./gridHeaderDropdown";
|
|
4
4
|
import { MdFilterList } from "react-icons/md";
|
|
5
5
|
import GridFilterDropdown from "./gridFilterDropdown";
|
|
@@ -240,6 +240,8 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
240
240
|
const [isResizing, setIsResizing] = useState(false);
|
|
241
241
|
const [startX, setStartX] = useState(0); // Cursor position when resizing starts
|
|
242
242
|
const [activeSearchColumn, setActiveSearchColumn] = useState(null);
|
|
243
|
+
const [activeSearchMaxHeight, setActiveSearchMaxHeight] = useState(null);
|
|
244
|
+
const activeSearchListRef = useRef(null);
|
|
243
245
|
const handleMouseDown = (e, colIndex) => {
|
|
244
246
|
if (!resizable)
|
|
245
247
|
return;
|
|
@@ -273,13 +275,60 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
273
275
|
setIsResizing(false);
|
|
274
276
|
setResizeIndex(-1);
|
|
275
277
|
};
|
|
278
|
+
const getLayoutBoundaryParent = (element) => {
|
|
279
|
+
if (!element)
|
|
280
|
+
return null;
|
|
281
|
+
let parent = element.parentElement;
|
|
282
|
+
while (parent) {
|
|
283
|
+
const styles = window.getComputedStyle(parent);
|
|
284
|
+
const overflowY = styles.overflowY;
|
|
285
|
+
const overflow = styles.overflow;
|
|
286
|
+
const hasClippingOverflow = [overflowY, overflow].some((value) => ["hidden", "clip", "auto", "scroll", "overlay"].includes(value));
|
|
287
|
+
if (hasClippingOverflow) {
|
|
288
|
+
return parent;
|
|
289
|
+
}
|
|
290
|
+
parent = parent.parentElement;
|
|
291
|
+
}
|
|
292
|
+
return null;
|
|
293
|
+
};
|
|
294
|
+
useEffect(() => {
|
|
295
|
+
const updateActiveSearchMaxHeight = () => {
|
|
296
|
+
var _a, _b;
|
|
297
|
+
if (!activeSearchListRef.current)
|
|
298
|
+
return;
|
|
299
|
+
const element = activeSearchListRef.current;
|
|
300
|
+
const rect = element.getBoundingClientRect();
|
|
301
|
+
const boundaryParent = getLayoutBoundaryParent(element);
|
|
302
|
+
const containerRect = boundaryParent === null || boundaryParent === void 0 ? void 0 : boundaryParent.getBoundingClientRect();
|
|
303
|
+
const containerTop = (_a = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _a !== void 0 ? _a : 0;
|
|
304
|
+
const containerBottom = (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _b !== void 0 ? _b : window.innerHeight;
|
|
305
|
+
const viewportPadding = 8;
|
|
306
|
+
const menuGap = 8;
|
|
307
|
+
const preferredMaxHeight = 200;
|
|
308
|
+
const rawSpaceBelow = containerBottom - rect.top - viewportPadding - menuGap;
|
|
309
|
+
const rawSpaceAbove = rect.bottom - containerTop - viewportPadding - menuGap;
|
|
310
|
+
const spaceBelow = Math.max(0, Math.floor(rawSpaceBelow));
|
|
311
|
+
const spaceAbove = Math.max(0, Math.floor(rawSpaceAbove));
|
|
312
|
+
const available = Math.max(spaceBelow, spaceAbove);
|
|
313
|
+
const resolvedMax = Math.min(available, preferredMaxHeight);
|
|
314
|
+
setActiveSearchMaxHeight(resolvedMax);
|
|
315
|
+
};
|
|
316
|
+
if (activeSearchColumn) {
|
|
317
|
+
updateActiveSearchMaxHeight();
|
|
318
|
+
window.addEventListener("resize", updateActiveSearchMaxHeight);
|
|
319
|
+
return () => window.removeEventListener("resize", updateActiveSearchMaxHeight);
|
|
320
|
+
}
|
|
321
|
+
else {
|
|
322
|
+
setActiveSearchMaxHeight(null);
|
|
323
|
+
}
|
|
324
|
+
}, [activeSearchColumn]);
|
|
276
325
|
return (_jsxs(_Fragment, { children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { textTransform: "uppercase", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", position: "sticky", top: 0, zIndex: 1, backgroundColor: "var(--row-header-bg)" }), children: _jsx("div", { style: {
|
|
277
326
|
display: "flex",
|
|
278
327
|
alignItems: "center",
|
|
279
328
|
width: "100%",
|
|
280
329
|
height: "100%",
|
|
281
330
|
}, children: _jsx(Checkbox, { selected: allRowsSelected, onChange: () => toggleSelectAll(), noLabel: true, wrapperClass: checkboxWrapper }) }) })), groupByKeys.map((_groupBy) => {
|
|
282
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83
|
|
331
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83;
|
|
283
332
|
return (_jsx(_Fragment, { children: headerColumns.find((column) => column.key === _groupBy) && (_jsxs("div", { className: `${sortable &&
|
|
284
333
|
((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.sortable)
|
|
285
334
|
? "sortable"
|
|
@@ -571,34 +620,34 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
571
620
|
const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
|
|
572
621
|
handleSearchOptionSelect((_c = (_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : "", value);
|
|
573
622
|
}, searchEnabled: false, className: "flex-1", isIcon: true })] }) }), getColumnData(((_61 = headerColumns.find((column) => column.key === _groupBy)) === null || _61 === void 0 ? void 0 : _61.key) || "", gridData, (_63 = (_62 = headerColumns.find((column) => column.key === _groupBy)) === null || _62 === void 0 ? void 0 : _62.dataType) !== null && _63 !== void 0 ? _63 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).length > 0 &&
|
|
574
|
-
|
|
575
|
-
"") && (_jsx("div", { style: {
|
|
623
|
+
activeSearchColumn ===
|
|
624
|
+
(((_64 = headerColumns.find((column) => column.key === _groupBy)) === null || _64 === void 0 ? void 0 : _64.key) || "") && (_jsx("div", { ref: activeSearchListRef, style: {
|
|
576
625
|
position: "absolute",
|
|
577
626
|
top: "calc(100% + 0.25rem)",
|
|
578
627
|
left: 0,
|
|
579
628
|
background: "var(--card-bg)",
|
|
580
629
|
width: "100%",
|
|
581
|
-
maxHeight: 300,
|
|
630
|
+
maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
|
|
582
631
|
overflow: "auto",
|
|
583
632
|
padding: "0.5rem 0.75rem",
|
|
584
|
-
}, children: getColumnData(((
|
|
633
|
+
}, children: getColumnData(((_65 = headerColumns.find((column) => column.key === _groupBy)) === null || _65 === void 0 ? void 0 : _65.key) || "", gridData, (_67 = (_66 = headerColumns.find((column) => column.key === _groupBy)) === null || _66 === void 0 ? void 0 : _66.dataType) !== null && _67 !== void 0 ? _67 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
|
|
585
634
|
cursor: "pointer",
|
|
586
635
|
display: "flex",
|
|
587
636
|
alignItems: "center",
|
|
588
637
|
}, onClick: () => {
|
|
589
638
|
var _a, _b, _c, _d;
|
|
590
639
|
return handleSelect("all", ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", getColumnData(((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || "", gridData, (_d = (_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) !== null && _d !== void 0 ? _d : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []));
|
|
591
|
-
}, children: [_jsx(Checkbox, { id: CSS.escape(((
|
|
592
|
-
? ((
|
|
593
|
-
getColumnData(((
|
|
640
|
+
}, children: [_jsx(Checkbox, { id: CSS.escape(((_68 = headerColumns.find((column) => column.key === _groupBy)) === null || _68 === void 0 ? void 0 : _68.key) || ""), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_69 = headerColumns.find((column) => column.key === _groupBy)) === null || _69 === void 0 ? void 0 : _69.key) || ""]) !== "undefined"
|
|
641
|
+
? ((_71 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_70 = headerColumns.find((column) => column.key === _groupBy)) === null || _70 === void 0 ? void 0 : _70.key) || ""]) === null || _71 === void 0 ? void 0 : _71.length) > 0 &&
|
|
642
|
+
getColumnData(((_72 = headerColumns.find((column) => column.key === _groupBy)) === null || _72 === void 0 ? void 0 : _72.key) || "", gridData, (_74 = (_73 = headerColumns.find((column) => column.key === _groupBy)) === null || _73 === void 0 ? void 0 : _73.dataType) !== null && _74 !== void 0 ? _74 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).every((item) => {
|
|
594
643
|
var _a;
|
|
595
644
|
return uniqueSearch[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
|
|
596
645
|
})
|
|
597
|
-
: true, indeterminate: ((
|
|
598
|
-
getColumnData(((
|
|
646
|
+
: true, indeterminate: ((_76 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_75 = headerColumns.find((column) => column.key === _groupBy)) === null || _75 === void 0 ? void 0 : _75.key) || ""]) === null || _76 === void 0 ? void 0 : _76.length) > 0 &&
|
|
647
|
+
getColumnData(((_77 = headerColumns.find((column) => column.key === _groupBy)) === null || _77 === void 0 ? void 0 : _77.key) || "", gridData, (_79 = (_78 = headerColumns.find((column) => column.key === _groupBy)) === null || _78 === void 0 ? void 0 : _78.dataType) !== null && _79 !== void 0 ? _79 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).some((item) => {
|
|
599
648
|
var _a;
|
|
600
649
|
return uniqueSearch[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
|
|
601
|
-
}), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: "All" })] }), getColumnData(((
|
|
650
|
+
}), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: "All" })] }), getColumnData(((_80 = headerColumns.find((column) => column.key === _groupBy)) === null || _80 === void 0 ? void 0 : _80.key) || "", gridData, (_82 = (_81 = headerColumns.find((column) => column.key === _groupBy)) === null || _81 === void 0 ? void 0 : _81.dataType) !== null && _82 !== void 0 ? _82 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).map((item) => {
|
|
602
651
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
603
652
|
return (_jsxs("div", { style: {
|
|
604
653
|
cursor: "pointer",
|
|
@@ -611,7 +660,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
611
660
|
? (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || ""].length) > 0 &&
|
|
612
661
|
((_e = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.includes(item))
|
|
613
662
|
: true, onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: formatValue(item, (_g = (_f = headerColumns.find((column) => column.key === _groupBy)) === null || _f === void 0 ? void 0 : _f.dataType) !== null && _g !== void 0 ? _g : "", locale, formatOptions) })] }, item));
|
|
614
|
-
})] })) }))] }))] }, (
|
|
663
|
+
})] })) }))] }))] }, (_83 = headerColumns.find((column) => column.key === _groupBy)) === null || _83 === void 0 ? void 0 : _83.key)) }));
|
|
615
664
|
}), headerColumns
|
|
616
665
|
.filter((column) => !groupByKeys.includes(column.key))
|
|
617
666
|
.map((column, colIndex) => {
|
|
@@ -889,13 +938,13 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
|
|
|
889
938
|
defaultSearchOperation ||
|
|
890
939
|
"contains";
|
|
891
940
|
})) === null || _w === void 0 ? void 0 : _w.label) !== null && _x !== void 0 ? _x : "", withValue: true, searchEnabled: false, className: "flex-1", isIcon: true })] }) }), columnData.length > 0 &&
|
|
892
|
-
activeSearchColumn === ((column === null || column === void 0 ? void 0 : column.key) || "") && (_jsxs("div", { style: {
|
|
941
|
+
activeSearchColumn === ((column === null || column === void 0 ? void 0 : column.key) || "") && (_jsxs("div", { ref: activeSearchListRef, style: {
|
|
893
942
|
position: "absolute",
|
|
894
943
|
top: "calc(100% + 0.25rem)",
|
|
895
944
|
left: 0,
|
|
896
945
|
background: "var(--card-bg)",
|
|
897
946
|
width: "100%",
|
|
898
|
-
maxHeight: 300,
|
|
947
|
+
maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
|
|
899
948
|
overflow: "auto",
|
|
900
949
|
padding: "0.5rem 0.75rem",
|
|
901
950
|
}, children: [_jsxs("div", { style: {
|
package/package.json
CHANGED