@megha-ui/react 1.3.93 → 1.3.94

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 +279 -61
  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";
@@ -7,7 +7,9 @@ import TextFilterDropdown from "./textFilterDropdown";
7
7
  import DateInput from "../../date-input";
8
8
  import TextInput from "../../text-input";
9
9
  import Checkbox from "../../checkbox";
10
+ import Dropdown from "../../dropdown";
10
11
  import { Tooltip } from "react-tooltip";
12
+ import { formatValue } from "../../../services/commonService";
11
13
  export const getColumnData = (columnKey, gridData, type, combinedColumns) => {
12
14
  const returnedValue = [
13
15
  ...new Set(gridData
@@ -96,6 +98,9 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
96
98
  setDropdownVisible("");
97
99
  setMenuPosition(null);
98
100
  setSearchOpsPosition(null);
101
+ if (!target.closest(".column-search-outside-wrapper")) {
102
+ setActiveSearchColumn(null);
103
+ }
99
104
  };
100
105
  document.addEventListener("click", closeMenu);
101
106
  return () => {
@@ -129,6 +134,31 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
129
134
  setSearchOpsPosition({ top, left });
130
135
  toggleDropdown(columnKey);
131
136
  };
137
+ const handleSelect = (value, columnKey, columnData) => {
138
+ var _a;
139
+ let _uniqueSeach = {};
140
+ if (value === "all") {
141
+ if (((_a = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey]) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
142
+ uniqueSearch[columnKey].every((item) => columnData.includes(item))) {
143
+ _uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: [] });
144
+ }
145
+ else {
146
+ _uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: columnData });
147
+ }
148
+ setUniqueSearch(_uniqueSeach);
149
+ }
150
+ else {
151
+ const newValueArray = uniqueSearch[columnKey] && uniqueSearch[columnKey].includes(value)
152
+ ? uniqueSearch[columnKey].filter((item) => item !== value)
153
+ : uniqueSearch[columnKey]
154
+ ? [...uniqueSearch[columnKey], value]
155
+ : columnData.filter((item) => item !== value);
156
+ _uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: newValueArray });
157
+ setUniqueSearch(_uniqueSeach);
158
+ }
159
+ onFilter(_uniqueSeach, columnKey);
160
+ setActiveSearchColumn((current) => current === columnKey ? null : current);
161
+ };
132
162
  const menuOptions = [{ label: "Group by", groupBy: setGroupBy }];
133
163
  const searchOptions = [
134
164
  { label: "Contains", value: "contains", action: handleSearchOptionSelect },
@@ -213,6 +243,9 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
213
243
  }, [headerColumns, isFilterActive]);
214
244
  const [isResizing, setIsResizing] = useState(false);
215
245
  const [startX, setStartX] = useState(0); // Cursor position when resizing starts
246
+ const [activeSearchColumn, setActiveSearchColumn] = useState(null);
247
+ const [activeSearchMaxHeight, setActiveSearchMaxHeight] = useState(null);
248
+ const activeSearchListRef = useRef(null);
216
249
  const handleMouseDown = (e, colIndex) => {
217
250
  if (!resizable)
218
251
  return;
@@ -246,13 +279,62 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
246
279
  setIsResizing(false);
247
280
  setResizeIndex(-1);
248
281
  };
282
+ const getLayoutBoundaryParent = (element) => {
283
+ if (!element)
284
+ return null;
285
+ let parent = element.parentElement;
286
+ while (parent) {
287
+ const styles = window.getComputedStyle(parent);
288
+ const overflowY = styles.overflowY;
289
+ const overflow = styles.overflow;
290
+ const hasClippingOverflow = [overflowY, overflow].some((value) => ["hidden", "clip", "auto", "scroll", "overlay"].includes(value));
291
+ if (hasClippingOverflow) {
292
+ return parent;
293
+ }
294
+ parent = parent.parentElement;
295
+ }
296
+ return null;
297
+ };
298
+ useEffect(() => {
299
+ const updateActiveSearchMaxHeight = () => {
300
+ var _a, _b;
301
+ if (!activeSearchListRef.current)
302
+ return;
303
+ const element = activeSearchListRef.current;
304
+ const rect = element.getBoundingClientRect();
305
+ const boundaryParent = getLayoutBoundaryParent(element);
306
+ const containerRect = boundaryParent === null || boundaryParent === void 0 ? void 0 : boundaryParent.getBoundingClientRect();
307
+ const containerTop = (_a = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _a !== void 0 ? _a : 0;
308
+ const containerBottom = (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _b !== void 0 ? _b : window.innerHeight;
309
+ const viewportPadding = 8;
310
+ const menuGap = 8;
311
+ const preferredMaxHeight = 200;
312
+ const rawSpaceBelow = containerBottom - rect.top - viewportPadding - menuGap;
313
+ const rawSpaceAbove = rect.bottom - containerTop - viewportPadding - menuGap;
314
+ const spaceBelow = Math.max(0, Math.floor(rawSpaceBelow));
315
+ const spaceAbove = Math.max(0, Math.floor(rawSpaceAbove));
316
+ const available = Math.max(spaceBelow, spaceAbove);
317
+ // Use all available space when positive; only fall back to a
318
+ // sensible default when the calculation yields no usable space.
319
+ const resolvedMax = available > 0 ? available : preferredMaxHeight;
320
+ setActiveSearchMaxHeight(resolvedMax);
321
+ };
322
+ if (activeSearchColumn) {
323
+ updateActiveSearchMaxHeight();
324
+ window.addEventListener("resize", updateActiveSearchMaxHeight);
325
+ return () => window.removeEventListener("resize", updateActiveSearchMaxHeight);
326
+ }
327
+ else {
328
+ setActiveSearchMaxHeight(null);
329
+ }
330
+ }, [activeSearchColumn]);
249
331
  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: {
250
332
  display: "flex",
251
333
  alignItems: "center",
252
334
  width: "100%",
253
335
  height: "100%",
254
336
  }, children: _jsx(Checkbox, { selected: allRowsSelected, onChange: () => toggleSelectAll(), noLabel: true, wrapperClass: checkboxWrapper }) }) })), groupByKeys.map((_groupBy) => {
255
- 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;
337
+ 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;
256
338
  return (_jsx(_Fragment, { children: headerColumns.find((column) => column.key === _groupBy) && (_jsxs("div", { className: `${sortable &&
257
339
  ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.sortable)
258
340
  ? "sortable"
@@ -481,47 +563,127 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
481
563
  ? "var(--background)"
482
564
  : "var(--disabled-bg)",
483
565
  }, 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" }) }))) ||
484
- null })))] })) })] }), search && columnSearchOutside && (_jsx("div", { style: {
485
- marginTop: "0.5rem",
486
- width: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${(_50 = headerColumns.find((column) => column.key === _groupBy)) === null || _50 === void 0 ? void 0 : _50.key}`]) ||
487
- widthMode === "auto" ||
488
- ((_51 = headerColumns.find((column) => column.key === _groupBy)) === null || _51 === void 0 ? void 0 : _51.width)
489
- ? "100%"
490
- : "100px",
491
- pointerEvents: search &&
492
- ((_52 = headerColumns.find((column) => column.key === _groupBy)) === null || _52 === void 0 ? void 0 : _52.search)
493
- ? "auto"
494
- : "none",
495
- cursor: search &&
496
- ((_53 = headerColumns.find((column) => column.key === _groupBy)) === null || _53 === void 0 ? void 0 : _53.search)
497
- ? "default"
498
- : "not-allowed",
499
- }, children: _jsx(TextInput, { onKeyDown: (e) => {
500
- var _a;
501
- if (e.key === "Enter") {
502
- toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
503
- }
504
- }, onChange: (e) => {
505
- var _a;
506
- let searchType = "contains";
507
- if (e.target.value.includes("to")) {
508
- searchType = "between";
509
- }
510
- else if (searchType === "between") {
511
- searchType = "contains";
512
- }
513
- onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", e.target.value, searchType);
514
- }, value: ((_55 = searchQueries[((_54 = headerColumns.find((column) => column.key === _groupBy)) === null || _54 === void 0 ? void 0 : _54.key) || ""]) === null || _55 === void 0 ? void 0 : _55.text) || "", disabled: !((_56 = headerColumns.find((column) => column.key === _groupBy)) === null || _56 === void 0 ? void 0 : _56.search), extraWrapperStyle: {
515
- background: ((_57 = headerColumns.find((column) => column.key === _groupBy)) === null || _57 === void 0 ? void 0 : _57.search)
516
- ? "var(--background)"
517
- : "var(--disabled-bg)",
518
- }, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))] }, (_58 = headerColumns.find((column) => column.key === _groupBy)) === null || _58 === void 0 ? void 0 : _58.key)) }));
566
+ null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, className: "column-search-outside-wrapper", children: [_jsx("div", { style: {
567
+ marginTop: "0.5rem",
568
+ pointerEvents: search &&
569
+ ((_50 = headerColumns.find((column) => column.key === _groupBy)) === null || _50 === void 0 ? void 0 : _50.search)
570
+ ? "auto"
571
+ : "none",
572
+ cursor: search &&
573
+ ((_51 = headerColumns.find((column) => column.key === _groupBy)) === null || _51 === void 0 ? void 0 : _51.search)
574
+ ? "default"
575
+ : "not-allowed",
576
+ }, children: _jsxs("div", { style: {
577
+ display: "flex",
578
+ alignItems: "center",
579
+ }, children: [_jsx(TextInput, { onFocus: () => {
580
+ var _a;
581
+ return setActiveSearchColumn(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
582
+ }, onChange: (e) => {
583
+ var _a, _b, _c;
584
+ let searchType = ((_b = searchQueries[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""]) === null || _b === void 0 ? void 0 : _b.type) ||
585
+ defaultSearchOperation ||
586
+ "contains";
587
+ if (e.target.value.includes("to")) {
588
+ searchType = "between";
589
+ }
590
+ else if (searchType === "between") {
591
+ searchType = "contains";
592
+ }
593
+ onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
594
+ }, placeholder: "Search", extraWrapperStyle: {
595
+ background: ((_52 = headerColumns.find((column) => column.key === _groupBy)) === null || _52 === void 0 ? void 0 : _52.search)
596
+ ? "var(--background)"
597
+ : "var(--disabled-bg)",
598
+ }, value: ((_54 = searchQueries[((_53 = headerColumns.find((column) => column.key === _groupBy)) === null || _53 === void 0 ? void 0 : _53.key) || ""]) === null || _54 === void 0 ? void 0 : _54.text) || "", disabled: !((_55 = headerColumns.find((column) => column.key === _groupBy)) === null || _55 === void 0 ? void 0 : _55.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => {
599
+ var _a, _b, _c;
600
+ return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number" ||
601
+ ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "currency"
602
+ ? numberTypeSearch.includes(item.value)
603
+ : ((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) === "date"
604
+ ? dateTypeSearch.includes(item.value)
605
+ : textTypeSearch.includes(item.value);
606
+ }), selectedValues: [
607
+ ((_58 = searchQueries[(_57 = (_56 = headerColumns.find((column) => column.key === _groupBy)) === null || _56 === void 0 ? void 0 : _56.key) !== null && _57 !== void 0 ? _57 : ""]) === null || _58 === void 0 ? void 0 : _58.type) ||
608
+ defaultSearchOperation ||
609
+ "contains",
610
+ ], selectedDisplay: (_60 = (_59 = searchOptions
611
+ .filter((item) => {
612
+ var _a, _b, _c;
613
+ return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number" ||
614
+ ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "currency"
615
+ ? numberTypeSearch.includes(item.value)
616
+ : ((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) === "date"
617
+ ? dateTypeSearch.includes(item.value)
618
+ : textTypeSearch.includes(item.value);
619
+ })
620
+ .find((item) => {
621
+ var _a, _b, _c;
622
+ return item.value ===
623
+ (((_c = searchQueries[(_b = (_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : ""]) === null || _c === void 0 ? void 0 : _c.type) ||
624
+ defaultSearchOperation ||
625
+ "contains");
626
+ })) === null || _59 === void 0 ? void 0 : _59.label) !== null && _60 !== void 0 ? _60 : "", withValue: true, onChange: (selected) => {
627
+ var _a, _b, _c;
628
+ const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
629
+ handleSearchOptionSelect((_c = (_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : "", value);
630
+ }, dropdownListWidth: "max-content", 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 &&
631
+ activeSearchColumn ===
632
+ (((_64 = headerColumns.find((column) => column.key === _groupBy)) === null || _64 === void 0 ? void 0 : _64.key) || "") && (_jsx("div", { ref: activeSearchListRef, style: {
633
+ position: "absolute",
634
+ top: "calc(100% + 0.25rem)",
635
+ left: 0,
636
+ background: "var(--card-bg)",
637
+ width: "max-content",
638
+ maxWidth: "24rem",
639
+ maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
640
+ overflow: "auto",
641
+ padding: "0.5rem 0.75rem",
642
+ borderRadius: "0.5rem",
643
+ boxShadow: "0 0.5rem 1rem rgba(0,0,0,0.15)",
644
+ border: "1px solid var(--divider, #f5f5f5)",
645
+ }, 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: {
646
+ cursor: "pointer",
647
+ display: "flex",
648
+ alignItems: "center",
649
+ }, onClick: () => {
650
+ var _a, _b, _c, _d;
651
+ 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 : []));
652
+ }, 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"
653
+ ? ((_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 &&
654
+ 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) => {
655
+ var _a;
656
+ return uniqueSearch[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
657
+ })
658
+ : 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 &&
659
+ 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) => {
660
+ var _a;
661
+ return uniqueSearch[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
662
+ }), 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) => {
663
+ var _a, _b, _c, _d, _e, _f, _g;
664
+ return (_jsxs("div", { style: {
665
+ cursor: "pointer",
666
+ display: "flex",
667
+ alignItems: "center",
668
+ }, onClick: () => {
669
+ var _a, _b, _c, _d;
670
+ return handleSelect(item.toString(), ((_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 : []));
671
+ }, children: [_jsx(Checkbox, { id: CSS.escape(`${((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""}-${item}`), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) !== "undefined"
672
+ ? (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 &&
673
+ ((_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))
674
+ : 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));
675
+ })] })) }))] }))] }, (_83 = headerColumns.find((column) => column.key === _groupBy)) === null || _83 === void 0 ? void 0 : _83.key)) }));
519
676
  }), headerColumns
520
677
  .filter((column) => !groupByKeys.includes(column.key))
521
678
  .map((column, colIndex) => {
522
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
679
+ 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;
523
680
  if (!column.hidden) {
524
681
  const columnData = getColumnData(column.key, gridData, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []);
682
+ const colSearchOptions = searchOptions.filter((item) => (column === null || column === void 0 ? void 0 : column.dataType) === "number" || (column === null || column === void 0 ? void 0 : column.dataType) === "currency"
683
+ ? numberTypeSearch.includes(item.value)
684
+ : (column === null || column === void 0 ? void 0 : column.dataType) === "date"
685
+ ? dateTypeSearch.includes(item.value)
686
+ : textTypeSearch.includes(item.value));
525
687
  return (_jsx("div", { className: `${sortable && column.sortable ? "sortable" : ""} ${column.showMenu ? "menu-true" : "menu-false"} column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", wordBreak: widthMode === "auto" ? "break-all" : "unset", backgroundColor: "var(--row-header-bg)", borderTop: headerTopBorder, borderBottom: headerBottomBorder, flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, position: "sticky", top: 0, zIndex: 1 }), onMouseMove: (e) => handleMouseMove(e), onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: !actionsKey.split(",").includes(column.key) && (_jsxs(_Fragment, { children: [resizable && (_jsx("div", { style: {
526
688
  position: "absolute",
527
689
  width: "1px",
@@ -740,29 +902,85 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
740
902
  : "var(--disabled-bg)",
741
903
  }, value: ((_t = searchQueries[column.key]) === null || _t === void 0 ? void 0 : _t.text) ||
742
904
  "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))) ||
743
- null })))] })) })] }), search && columnSearchOutside && (_jsx("div", { style: {
744
- marginTop: "0.5rem",
745
- width: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]) ||
746
- widthMode === "auto" ||
747
- column.width
748
- ? "100%"
749
- : "100px",
750
- pointerEvents: search && column.search ? "auto" : "none",
751
- cursor: search && column.search ? "default" : "not-allowed",
752
- }, children: _jsx(TextInput, { onChange: (e) => {
753
- let searchType = "contains";
754
- if (e.target.value.includes("to")) {
755
- searchType = "between";
756
- }
757
- else if (searchType === "between") {
758
- searchType = "contains";
759
- }
760
- onSearch(column.key, e.target.value, searchType);
761
- }, placeholder: "Search", extraWrapperStyle: {
762
- background: column.search
763
- ? "var(--background)"
764
- : "var(--disabled-bg)",
765
- }, value: ((_u = searchQueries[column.key]) === null || _u === void 0 ? void 0 : _u.text) || "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) }))] })) }, column.key));
905
+ null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, className: "column-search-outside-wrapper", children: [_jsx("div", { style: {
906
+ marginTop: "0.5rem",
907
+ pointerEvents: search && column.search ? "auto" : "none",
908
+ cursor: search && column.search
909
+ ? "default"
910
+ : "not-allowed",
911
+ }, children: _jsxs("div", { style: {
912
+ display: "flex",
913
+ alignItems: "center",
914
+ }, children: [_jsx(TextInput, { onFocus: () => setActiveSearchColumn(column.key), onChange: (e) => {
915
+ var _a;
916
+ let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
917
+ defaultSearchOperation ||
918
+ "contains";
919
+ if (e.target.value.includes("to")) {
920
+ searchType = "between";
921
+ }
922
+ else if (searchType === "between") {
923
+ searchType = "contains";
924
+ }
925
+ onSearch(column.key, e.target.value, searchType);
926
+ }, placeholder: "Search", extraWrapperStyle: {
927
+ background: column.search
928
+ ? "var(--background)"
929
+ : "var(--disabled-bg)",
930
+ }, value: ((_u = searchQueries[column.key]) === null || _u === void 0 ? void 0 : _u.text) || "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => column.dataType === "number" ||
931
+ column.dataType === "currency"
932
+ ? numberTypeSearch.includes(item.value)
933
+ : column.dataType === "date"
934
+ ? dateTypeSearch.includes(item.value)
935
+ : textTypeSearch.includes(item.value)), selectedValues: [
936
+ ((_v = searchQueries[column.key]) === null || _v === void 0 ? void 0 : _v.type) ||
937
+ defaultSearchOperation ||
938
+ "contains",
939
+ ], onChange: (selected) => {
940
+ var _a;
941
+ const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
942
+ handleSearchOptionSelect(column.key, value);
943
+ }, selectedDisplay: (_x = (_w = colSearchOptions.find((item) => {
944
+ var _a, _b;
945
+ return item.value ===
946
+ (((_b = searchQueries[(_a = column === null || column === void 0 ? void 0 : column.key) !== null && _a !== void 0 ? _a : ""]) === null || _b === void 0 ? void 0 : _b.type) ||
947
+ defaultSearchOperation ||
948
+ "contains");
949
+ })) === null || _w === void 0 ? void 0 : _w.label) !== null && _x !== void 0 ? _x : "", withValue: true, searchEnabled: false, className: "flex-1", dropdownListWidth: "max-content", isIcon: true })] }) }), columnData.length > 0 &&
950
+ activeSearchColumn === ((column === null || column === void 0 ? void 0 : column.key) || "") && (_jsxs("div", { ref: activeSearchListRef, style: {
951
+ position: "absolute",
952
+ top: "calc(100% + 0.25rem)",
953
+ left: 0,
954
+ background: "var(--card-bg)",
955
+ width: "max-content",
956
+ maxWidth: "24rem",
957
+ maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
958
+ overflow: "auto",
959
+ padding: "0.5rem 0.75rem",
960
+ borderRadius: "0.5rem",
961
+ boxShadow: "0 0.5rem 1rem rgba(0,0,0,0.15)",
962
+ border: "1px solid var(--divider, #f5f5f5)",
963
+ }, children: [_jsxs("div", { style: {
964
+ cursor: "pointer",
965
+ display: "flex",
966
+ alignItems: "center",
967
+ }, onClick: () => handleSelect("all", (column === null || column === void 0 ? void 0 : column.key) || "", columnData), children: [_jsx(Checkbox, { id: CSS.escape((column === null || column === void 0 ? void 0 : column.key) || ""), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) !==
968
+ "undefined"
969
+ ? ((_y = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _y === void 0 ? void 0 : _y.length) > 0 &&
970
+ columnData.every((item) => uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].includes(item))
971
+ : true, indeterminate: ((_z = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _z === void 0 ? void 0 : _z.length) >
972
+ 0 &&
973
+ columnData.some((item) => uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].includes(item)), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: "All" })] }), columnData.map((item) => {
974
+ var _a, _b;
975
+ return (_jsxs("div", { style: {
976
+ cursor: "pointer",
977
+ display: "flex",
978
+ alignItems: "center",
979
+ }, onClick: () => handleSelect(item.toString(), (column === null || column === void 0 ? void 0 : column.key) || "", columnData), children: [_jsx(Checkbox, { id: CSS.escape(`${(column === null || column === void 0 ? void 0 : column.key) || ""}-${item}`), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) !== "undefined"
980
+ ? (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].length) > 0 &&
981
+ ((_a = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _a === void 0 ? void 0 : _a.includes(item))
982
+ : true, onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: formatValue(item, (_b = column === null || column === void 0 ? void 0 : column.dataType) !== null && _b !== void 0 ? _b : "", locale, formatOptions) })] }, item));
983
+ })] }))] }))] })) }, column.key));
766
984
  }
767
985
  return null;
768
986
  })] }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megha-ui/react",
3
- "version": "1.3.93",
3
+ "version": "1.3.94",
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",