@megha-ui/react 1.3.73 → 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.
Files changed (2) hide show
  1. package/dist/components/grid/utils/newGridHeader.js +74 -17
  2. package/package.json +1 -1
package/dist/components/grid/utils/newGridHeader.js CHANGED
@@ -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, _84;
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"
@@ -508,7 +557,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
508
557
  ? "var(--background)"
509
558
  : "var(--disabled-bg)",
510
559
  }, value: ((_48 = searchQueries[((_47 = headerColumns.find((column) => column.key === _groupBy)) === null || _47 === void 0 ? void 0 : _47.key) || ""]) === null || _48 === void 0 ? void 0 : _48.text) || "", disabled: !((_49 = headerColumns.find((column) => column.key === _groupBy)) === null || _49 === void 0 ? void 0 : _49.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) }))) ||
511
- null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { children: [_jsx("div", { style: {
560
+ null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { style: {
512
561
  marginTop: "0.5rem",
513
562
  pointerEvents: search &&
514
563
  ((_50 = headerColumns.find((column) => column.key === _groupBy)) === null || _50 === void 0 ? void 0 : _50.search)
@@ -571,30 +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
- (((_65 = searchQueries[((_64 = headerColumns.find((column) => column.key === _groupBy)) === null || _64 === void 0 ? void 0 : _64.key) || ""]) === null || _65 === void 0 ? void 0 : _65.text) ||
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: {
625
+ position: "absolute",
626
+ top: "calc(100% + 0.25rem)",
627
+ left: 0,
628
+ background: "var(--card-bg)",
576
629
  width: "100%",
577
- maxHeight: 300,
630
+ maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
578
631
  overflow: "auto",
579
632
  padding: "0.5rem 0.75rem",
580
- }, children: getColumnData(((_66 = headerColumns.find((column) => column.key === _groupBy)) === null || _66 === void 0 ? void 0 : _66.key) || "", gridData, (_68 = (_67 = headerColumns.find((column) => column.key === _groupBy)) === null || _67 === void 0 ? void 0 : _67.dataType) !== null && _68 !== void 0 ? _68 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
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: {
581
634
  cursor: "pointer",
582
635
  display: "flex",
583
636
  alignItems: "center",
584
637
  }, onClick: () => {
585
638
  var _a, _b, _c, _d;
586
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 : []));
587
- }, children: [_jsx(Checkbox, { id: CSS.escape(((_69 = headerColumns.find((column) => column.key === _groupBy)) === null || _69 === void 0 ? void 0 : _69.key) || ""), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_70 = headerColumns.find((column) => column.key === _groupBy)) === null || _70 === void 0 ? void 0 : _70.key) || ""]) !== "undefined"
588
- ? ((_72 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_71 = headerColumns.find((column) => column.key === _groupBy)) === null || _71 === void 0 ? void 0 : _71.key) || ""]) === null || _72 === void 0 ? void 0 : _72.length) > 0 &&
589
- getColumnData(((_73 = headerColumns.find((column) => column.key === _groupBy)) === null || _73 === void 0 ? void 0 : _73.key) || "", gridData, (_75 = (_74 = headerColumns.find((column) => column.key === _groupBy)) === null || _74 === void 0 ? void 0 : _74.dataType) !== null && _75 !== void 0 ? _75 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).every((item) => {
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) => {
590
643
  var _a;
591
644
  return uniqueSearch[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
592
645
  })
593
- : true, indeterminate: ((_77 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_76 = headerColumns.find((column) => column.key === _groupBy)) === null || _76 === void 0 ? void 0 : _76.key) || ""]) === null || _77 === void 0 ? void 0 : _77.length) > 0 &&
594
- getColumnData(((_78 = headerColumns.find((column) => column.key === _groupBy)) === null || _78 === void 0 ? void 0 : _78.key) || "", gridData, (_80 = (_79 = headerColumns.find((column) => column.key === _groupBy)) === null || _79 === void 0 ? void 0 : _79.dataType) !== null && _80 !== void 0 ? _80 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).some((item) => {
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) => {
595
648
  var _a;
596
649
  return uniqueSearch[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
597
- }), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: "All" })] }), getColumnData(((_81 = headerColumns.find((column) => column.key === _groupBy)) === null || _81 === void 0 ? void 0 : _81.key) || "", gridData, (_83 = (_82 = headerColumns.find((column) => column.key === _groupBy)) === null || _82 === void 0 ? void 0 : _82.dataType) !== null && _83 !== void 0 ? _83 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).map((item) => {
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) => {
598
651
  var _a, _b, _c, _d, _e, _f, _g;
599
652
  return (_jsxs("div", { style: {
600
653
  cursor: "pointer",
@@ -607,7 +660,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
607
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 &&
608
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))
609
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));
610
- })] })) }))] }))] }, (_84 = headerColumns.find((column) => column.key === _groupBy)) === null || _84 === void 0 ? void 0 : _84.key)) }));
663
+ })] })) }))] }))] }, (_83 = headerColumns.find((column) => column.key === _groupBy)) === null || _83 === void 0 ? void 0 : _83.key)) }));
611
664
  }), headerColumns
612
665
  .filter((column) => !groupByKeys.includes(column.key))
613
666
  .map((column, colIndex) => {
@@ -832,7 +885,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
832
885
  : "var(--disabled-bg)",
833
886
  }, value: ((_t = searchQueries[column.key]) === null || _t === void 0 ? void 0 : _t.text) ||
834
887
  "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))) ||
835
- null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { children: [_jsx("div", { style: {
888
+ null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { style: {
836
889
  marginTop: "0.5rem",
837
890
  pointerEvents: search && column.search ? "auto" : "none",
838
891
  cursor: search && column.search
@@ -885,9 +938,13 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
885
938
  defaultSearchOperation ||
886
939
  "contains";
887
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 &&
888
- 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: {
942
+ position: "absolute",
943
+ top: "calc(100% + 0.25rem)",
944
+ left: 0,
945
+ background: "var(--card-bg)",
889
946
  width: "100%",
890
- maxHeight: 300,
947
+ maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
891
948
  overflow: "auto",
892
949
  padding: "0.5rem 0.75rem",
893
950
  }, children: [_jsxs("div", { style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megha-ui/react",
3
- "version": "1.3.73",
3
+ "version": "1.3.76",
4
4
  "description": "A collection of reusable UI components for React applications, built with TypeScript.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",