@megha-ui/react 1.3.91 → 1.3.93

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 (6) hide show
  1. package/dist/components/grid/utils/gridFilterDropdown.d.ts +24 -1
  2. package/dist/components/grid/utils/gridFilterDropdown.js +91 -3
  3. package/dist/components/grid/utils/newGridHeader.js +402 -707
  4. package/dist/components/grid/utils/textFilterDropdown.d.ts +17 -1
  5. package/dist/components/grid/utils/textFilterDropdown.js +30 -3
  6. package/package.json +1 -1
package/dist/components/grid/utils/newGridHeader.js CHANGED
@@ -1,14 +1,13 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import React, { useState, useEffect, useCallback, useMemo, useRef, } from "react";
2
+ import React, { useState, useEffect, useCallback, useMemo } from "react";
3
3
  import GridHeaderDropdown from "./gridHeaderDropdown";
4
4
  import { MdFilterList } from "react-icons/md";
5
5
  import GridFilterDropdown from "./gridFilterDropdown";
6
6
  import TextFilterDropdown from "./textFilterDropdown";
7
+ import DateInput from "../../date-input";
7
8
  import TextInput from "../../text-input";
8
9
  import Checkbox from "../../checkbox";
9
- import Dropdown from "../../dropdown";
10
10
  import { Tooltip } from "react-tooltip";
11
- import { formatValue } from "../../../services/commonService";
12
11
  export const getColumnData = (columnKey, gridData, type, combinedColumns) => {
13
12
  const returnedValue = [
14
13
  ...new Set(gridData
@@ -97,9 +96,6 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
97
96
  setDropdownVisible("");
98
97
  setMenuPosition(null);
99
98
  setSearchOpsPosition(null);
100
- if (!target.closest(".column-search-outside-wrapper")) {
101
- setActiveSearchColumn(null);
102
- }
103
99
  };
104
100
  document.addEventListener("click", closeMenu);
105
101
  return () => {
@@ -133,31 +129,6 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
133
129
  setSearchOpsPosition({ top, left });
134
130
  toggleDropdown(columnKey);
135
131
  };
136
- const handleSelect = (value, columnKey, columnData) => {
137
- var _a;
138
- let _uniqueSeach = {};
139
- if (value === "all") {
140
- if (((_a = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey]) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
141
- uniqueSearch[columnKey].every((item) => columnData.includes(item))) {
142
- _uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: [] });
143
- }
144
- else {
145
- _uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: columnData });
146
- }
147
- setUniqueSearch(_uniqueSeach);
148
- }
149
- else {
150
- const newValueArray = uniqueSearch[columnKey] && uniqueSearch[columnKey].includes(value)
151
- ? uniqueSearch[columnKey].filter((item) => item !== value)
152
- : uniqueSearch[columnKey]
153
- ? [...uniqueSearch[columnKey], value]
154
- : columnData.filter((item) => item !== value);
155
- _uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: newValueArray });
156
- setUniqueSearch(_uniqueSeach);
157
- }
158
- onFilter(_uniqueSeach, columnKey);
159
- setActiveSearchColumn((current) => current === columnKey ? null : current);
160
- };
161
132
  const menuOptions = [{ label: "Group by", groupBy: setGroupBy }];
162
133
  const searchOptions = [
163
134
  { label: "Contains", value: "contains", action: handleSearchOptionSelect },
@@ -242,9 +213,6 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
242
213
  }, [headerColumns, isFilterActive]);
243
214
  const [isResizing, setIsResizing] = useState(false);
244
215
  const [startX, setStartX] = useState(0); // Cursor position when resizing starts
245
- const [activeSearchColumn, setActiveSearchColumn] = useState(null);
246
- const [activeSearchMaxHeight, setActiveSearchMaxHeight] = useState(null);
247
- const activeSearchListRef = useRef(null);
248
216
  const handleMouseDown = (e, colIndex) => {
249
217
  if (!resizable)
250
218
  return;
@@ -278,62 +246,13 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
278
246
  setIsResizing(false);
279
247
  setResizeIndex(-1);
280
248
  };
281
- const getLayoutBoundaryParent = (element) => {
282
- if (!element)
283
- return null;
284
- let parent = element.parentElement;
285
- while (parent) {
286
- const styles = window.getComputedStyle(parent);
287
- const overflowY = styles.overflowY;
288
- const overflow = styles.overflow;
289
- const hasClippingOverflow = [overflowY, overflow].some((value) => ["hidden", "clip", "auto", "scroll", "overlay"].includes(value));
290
- if (hasClippingOverflow) {
291
- return parent;
292
- }
293
- parent = parent.parentElement;
294
- }
295
- return null;
296
- };
297
- useEffect(() => {
298
- const updateActiveSearchMaxHeight = () => {
299
- var _a, _b;
300
- if (!activeSearchListRef.current)
301
- return;
302
- const element = activeSearchListRef.current;
303
- const rect = element.getBoundingClientRect();
304
- const boundaryParent = getLayoutBoundaryParent(element);
305
- const containerRect = boundaryParent === null || boundaryParent === void 0 ? void 0 : boundaryParent.getBoundingClientRect();
306
- const containerTop = (_a = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _a !== void 0 ? _a : 0;
307
- const containerBottom = (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _b !== void 0 ? _b : window.innerHeight;
308
- const viewportPadding = 8;
309
- const menuGap = 8;
310
- const preferredMaxHeight = 200;
311
- const rawSpaceBelow = containerBottom - rect.top - viewportPadding - menuGap;
312
- const rawSpaceAbove = rect.bottom - containerTop - viewportPadding - menuGap;
313
- const spaceBelow = Math.max(0, Math.floor(rawSpaceBelow));
314
- const spaceAbove = Math.max(0, Math.floor(rawSpaceAbove));
315
- const available = Math.max(spaceBelow, spaceAbove);
316
- // Use all available space when positive; only fall back to a
317
- // sensible default when the calculation yields no usable space.
318
- const resolvedMax = available > 0 ? available : preferredMaxHeight;
319
- setActiveSearchMaxHeight(resolvedMax);
320
- };
321
- if (activeSearchColumn) {
322
- updateActiveSearchMaxHeight();
323
- window.addEventListener("resize", updateActiveSearchMaxHeight);
324
- return () => window.removeEventListener("resize", updateActiveSearchMaxHeight);
325
- }
326
- else {
327
- setActiveSearchMaxHeight(null);
328
- }
329
- }, [activeSearchColumn]);
330
249
  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: {
331
250
  display: "flex",
332
251
  alignItems: "center",
333
252
  width: "100%",
334
253
  height: "100%",
335
254
  }, children: _jsx(Checkbox, { selected: allRowsSelected, onChange: () => toggleSelectAll(), noLabel: true, wrapperClass: checkboxWrapper }) }) })), groupByKeys.map((_groupBy) => {
336
- 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, _85, _86, _87, _88;
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
256
  return (_jsx(_Fragment, { children: headerColumns.find((column) => column.key === _groupBy) && (_jsxs("div", { className: `${sortable &&
338
257
  ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.sortable)
339
258
  ? "sortable"
@@ -385,386 +304,224 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
385
304
  : "var(--row-header-text)",
386
305
  } }), dropdownVisible ===
387
306
  ((_m = headerColumns.find((column) => column.key === _groupBy)) === null || _m === void 0 ? void 0 : _m.key) &&
388
- (((_o = headerColumns.find((column) => column.key === _groupBy)) === null || _o === void 0 ? void 0 : _o.uniqueDrop) ? (_jsx(GridFilterDropdown, { portalTarget: portalTarget, columnIndex: -1, headerDropdownIndex: headerDropdownIndex, searchOps: search && columnSearchOutside ? (_jsxs("div", { style: { position: "relative" }, className: "column-search-outside-wrapper", children: [_jsx("div", { style: {
389
- marginTop: "0.5rem",
390
- pointerEvents: search &&
391
- ((_p = headerColumns.find((column) => column.key === _groupBy)) === null || _p === void 0 ? void 0 : _p.search)
392
- ? "auto"
393
- : "none",
394
- cursor: search &&
395
- ((_q = headerColumns.find((column) => column.key === _groupBy)) === null || _q === void 0 ? void 0 : _q.search)
396
- ? "default"
397
- : "not-allowed",
398
- }, children: _jsxs("div", { style: {
399
- display: "flex",
400
- alignItems: "center",
401
- }, children: [_jsx(TextInput, { onFocus: () => {
402
- var _a;
403
- return setActiveSearchColumn(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
404
- }, onChange: (e) => {
405
- var _a, _b, _c;
406
- 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) ||
407
- defaultSearchOperation ||
408
- "contains";
409
- if (e.target.value.includes("to")) {
410
- searchType = "between";
411
- }
412
- else if (searchType === "between") {
413
- searchType = "contains";
414
- }
415
- onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
416
- }, placeholder: "Search", extraWrapperStyle: {
417
- background: ((_r = headerColumns.find((column) => column.key === _groupBy)) === null || _r === void 0 ? void 0 : _r.search)
418
- ? "var(--background)"
419
- : "var(--disabled-bg)",
420
- }, value: ((_t = searchQueries[((_s = headerColumns.find((column) => column.key === _groupBy)) === null || _s === void 0 ? void 0 : _s.key) || ""]) === null || _t === void 0 ? void 0 : _t.text) || "", disabled: !((_u = headerColumns.find((column) => column.key === _groupBy)) === null || _u === void 0 ? void 0 : _u.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => {
421
- var _a, _b, _c;
422
- return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number" ||
423
- ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "currency"
424
- ? numberTypeSearch.includes(item.value)
425
- : ((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) === "date"
426
- ? dateTypeSearch.includes(item.value)
427
- : textTypeSearch.includes(item.value);
428
- }), selectedValues: [
429
- ((_x = searchQueries[(_w = (_v = headerColumns.find((column) => column.key === _groupBy)) === null || _v === void 0 ? void 0 : _v.key) !== null && _w !== void 0 ? _w : ""]) === null || _x === void 0 ? void 0 : _x.type) ||
430
- defaultSearchOperation ||
431
- "contains",
432
- ], selectedDisplay: (_z = (_y = searchOptions
433
- .filter((item) => {
434
- var _a, _b, _c;
435
- return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number" ||
436
- ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "currency"
437
- ? numberTypeSearch.includes(item.value)
438
- : ((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) === "date"
439
- ? dateTypeSearch.includes(item.value)
440
- : textTypeSearch.includes(item.value);
441
- })
442
- .find((item) => {
443
- var _a, _b, _c;
444
- return item.value ===
445
- (((_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) ||
446
- defaultSearchOperation ||
447
- "contains");
448
- })) === null || _y === void 0 ? void 0 : _y.label) !== null && _z !== void 0 ? _z : "", withValue: true, onChange: (selected) => {
449
- var _a, _b, _c;
450
- const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
451
- handleSearchOptionSelect((_c = (_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : "", value);
452
- }, dropdownListWidth: "max-content", searchEnabled: false, className: "flex-1", isIcon: true })] }) }), getColumnData(((_0 = headerColumns.find((column) => column.key === _groupBy)) === null || _0 === void 0 ? void 0 : _0.key) || "", gridData, (_2 = (_1 = headerColumns.find((column) => column.key === _groupBy)) === null || _1 === void 0 ? void 0 : _1.dataType) !== null && _2 !== void 0 ? _2 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).length > 0 &&
453
- activeSearchColumn ===
454
- (((_3 = headerColumns.find((column) => column.key === _groupBy)) === null || _3 === void 0 ? void 0 : _3.key) || "") && (_jsx("div", { ref: activeSearchListRef, style: {
455
- position: "absolute",
456
- top: "calc(100% + 0.25rem)",
457
- left: 0,
458
- background: "var(--card-bg)",
459
- width: "max-content",
460
- maxWidth: "24rem",
461
- maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
462
- overflow: "auto",
463
- padding: "0.5rem 0.75rem",
464
- borderRadius: "0.5rem",
465
- boxShadow: "0 0.5rem 1rem rgba(0,0,0,0.15)",
466
- border: "1px solid var(--divider, #f5f5f5)",
467
- }, children: getColumnData(((_4 = headerColumns.find((column) => column.key === _groupBy)) === null || _4 === void 0 ? void 0 : _4.key) || "", gridData, (_6 = (_5 = headerColumns.find((column) => column.key === _groupBy)) === null || _5 === void 0 ? void 0 : _5.dataType) !== null && _6 !== void 0 ? _6 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
468
- cursor: "pointer",
469
- display: "flex",
470
- alignItems: "center",
471
- }, onClick: () => {
472
- var _a, _b, _c, _d;
473
- 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 : []));
474
- }, children: [_jsx(Checkbox, { id: CSS.escape(((_7 = headerColumns.find((column) => column.key === _groupBy)) === null || _7 === void 0 ? void 0 : _7.key) || ""), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_8 = headerColumns.find((column) => column.key === _groupBy)) === null || _8 === void 0 ? void 0 : _8.key) || ""]) !== "undefined"
475
- ? ((_10 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_9 = headerColumns.find((column) => column.key ===
476
- _groupBy)) === null || _9 === void 0 ? void 0 : _9.key) || ""]) === null || _10 === void 0 ? void 0 : _10.length) > 0 &&
477
- getColumnData(((_11 = headerColumns.find((column) => column.key ===
478
- _groupBy)) === null || _11 === void 0 ? void 0 : _11.key) || "", gridData, (_13 = (_12 = headerColumns.find((column) => column.key ===
479
- _groupBy)) === null || _12 === void 0 ? void 0 : _12.dataType) !== null && _13 !== void 0 ? _13 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).every((item) => {
480
- var _a;
481
- return uniqueSearch[((_a = headerColumns.find((column) => column.key ===
482
- _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
483
- })
484
- : true, indeterminate: ((_15 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_14 = headerColumns.find((column) => column.key === _groupBy)) === null || _14 === void 0 ? void 0 : _14.key) || ""]) === null || _15 === void 0 ? void 0 : _15.length) > 0 &&
485
- getColumnData(((_16 = headerColumns.find((column) => column.key === _groupBy)) === null || _16 === void 0 ? void 0 : _16.key) || "", gridData, (_18 = (_17 = headerColumns.find((column) => column.key === _groupBy)) === null || _17 === void 0 ? void 0 : _17.dataType) !== null && _18 !== void 0 ? _18 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).some((item) => {
486
- var _a;
487
- return uniqueSearch[((_a = headerColumns.find((column) => column.key ===
488
- _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
489
- }), onChange: () => { }, style: {
490
- pointerEvents: "none",
491
- }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: "All" })] }), getColumnData(((_19 = headerColumns.find((column) => column.key === _groupBy)) === null || _19 === void 0 ? void 0 : _19.key) || "", gridData, (_21 = (_20 = headerColumns.find((column) => column.key === _groupBy)) === null || _20 === void 0 ? void 0 : _20.dataType) !== null && _21 !== void 0 ? _21 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).map((item) => {
492
- var _a, _b, _c, _d, _e, _f, _g;
493
- return (_jsxs("div", { style: {
494
- cursor: "pointer",
495
- display: "flex",
496
- alignItems: "center",
497
- }, onClick: () => {
498
- var _a, _b, _c, _d;
499
- 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 ===
500
- _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || "", gridData, (_d = (_c = headerColumns.find((column) => column.key ===
501
- _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) !== null && _d !== void 0 ? _d : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []));
502
- }, children: [_jsx(Checkbox, { id: CSS.escape(`${((_a = headerColumns.find((column) => column.key ===
503
- _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 ===
504
- _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) !== "undefined"
505
- ? (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_c = headerColumns.find((column) => column.key ===
506
- _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || ""].length) > 0 &&
507
- ((_e = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_d = headerColumns.find((column) => column.key ===
508
- _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.includes(item))
509
- : true, onChange: () => { }, style: {
510
- pointerEvents: "none",
511
- }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: {
512
- marginLeft: "0.5rem",
513
- }, 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));
514
- })] })) }))] })) : null, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label !== "Group by"), onClose: () => setDropdownVisible(null), column: headerColumns.find((column) => column.key === _groupBy) }), position: searchOpsPosition || { top: 0, left: 0 } })) : (_jsx(TextFilterDropdown, { columnIndex: -1, headerDropdownIndex: headerDropdownIndex, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label !== "Group by"), onClose: () => setDropdownVisible(null), column: headerColumns.find((column) => column.key === _groupBy) }), searchOps: search && columnSearchOutside ? (_jsxs("div", { style: { position: "relative" }, className: "column-search-outside-wrapper", children: [_jsx("div", { style: {
515
- marginTop: "0.5rem",
516
- pointerEvents: search &&
517
- ((_22 = headerColumns.find((column) => column.key === _groupBy)) === null || _22 === void 0 ? void 0 : _22.search)
518
- ? "auto"
519
- : "none",
520
- cursor: search &&
521
- ((_23 = headerColumns.find((column) => column.key === _groupBy)) === null || _23 === void 0 ? void 0 : _23.search)
522
- ? "default"
523
- : "not-allowed",
524
- }, children: _jsxs("div", { style: {
525
- display: "flex",
526
- alignItems: "center",
527
- }, children: [_jsx(TextInput, { onFocus: () => {
528
- var _a;
529
- return setActiveSearchColumn(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
530
- }, onChange: (e) => {
531
- var _a, _b, _c;
532
- 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) ||
533
- defaultSearchOperation ||
534
- "contains";
535
- if (e.target.value.includes("to")) {
536
- searchType = "between";
537
- }
538
- else if (searchType === "between") {
539
- searchType = "contains";
540
- }
541
- onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
542
- }, placeholder: "Search", extraWrapperStyle: {
543
- background: ((_24 = headerColumns.find((column) => column.key === _groupBy)) === null || _24 === void 0 ? void 0 : _24.search)
544
- ? "var(--background)"
545
- : "var(--disabled-bg)",
546
- }, value: ((_26 = searchQueries[((_25 = headerColumns.find((column) => column.key === _groupBy)) === null || _25 === void 0 ? void 0 : _25.key) || ""]) === null || _26 === void 0 ? void 0 : _26.text) || "", disabled: !((_27 = headerColumns.find((column) => column.key === _groupBy)) === null || _27 === void 0 ? void 0 : _27.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => {
547
- var _a, _b, _c;
548
- return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number" ||
549
- ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "currency"
550
- ? numberTypeSearch.includes(item.value)
551
- : ((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) === "date"
552
- ? dateTypeSearch.includes(item.value)
553
- : textTypeSearch.includes(item.value);
554
- }), selectedValues: [
555
- ((_30 = searchQueries[(_29 = (_28 = headerColumns.find((column) => column.key === _groupBy)) === null || _28 === void 0 ? void 0 : _28.key) !== null && _29 !== void 0 ? _29 : ""]) === null || _30 === void 0 ? void 0 : _30.type) ||
556
- defaultSearchOperation ||
557
- "contains",
558
- ], selectedDisplay: (_32 = (_31 = searchOptions
559
- .filter((item) => {
560
- var _a, _b, _c;
561
- return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number" ||
562
- ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "currency"
563
- ? numberTypeSearch.includes(item.value)
564
- : ((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) === "date"
565
- ? dateTypeSearch.includes(item.value)
566
- : textTypeSearch.includes(item.value);
567
- })
568
- .find((item) => {
569
- var _a, _b, _c;
570
- return item.value ===
571
- (((_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) ||
572
- defaultSearchOperation ||
573
- "contains");
574
- })) === null || _31 === void 0 ? void 0 : _31.label) !== null && _32 !== void 0 ? _32 : "", withValue: true, onChange: (selected) => {
575
- var _a, _b, _c;
576
- const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
577
- handleSearchOptionSelect((_c = (_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : "", value);
578
- }, dropdownListWidth: "max-content", searchEnabled: false, className: "flex-1", isIcon: true })] }) }), getColumnData(((_33 = headerColumns.find((column) => column.key === _groupBy)) === null || _33 === void 0 ? void 0 : _33.key) || "", gridData, (_35 = (_34 = headerColumns.find((column) => column.key === _groupBy)) === null || _34 === void 0 ? void 0 : _34.dataType) !== null && _35 !== void 0 ? _35 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).length > 0 &&
579
- activeSearchColumn ===
580
- (((_36 = headerColumns.find((column) => column.key === _groupBy)) === null || _36 === void 0 ? void 0 : _36.key) || "") && (_jsx("div", { ref: activeSearchListRef, style: {
581
- position: "absolute",
582
- top: "calc(100% + 0.25rem)",
583
- left: 0,
584
- background: "var(--card-bg)",
585
- width: "max-content",
586
- maxWidth: "24rem",
587
- maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
588
- overflow: "auto",
589
- padding: "0.5rem 0.75rem",
590
- borderRadius: "0.5rem",
591
- boxShadow: "0 0.5rem 1rem rgba(0,0,0,0.15)",
592
- border: "1px solid var(--divider, #f5f5f5)",
593
- }, children: getColumnData(((_37 = headerColumns.find((column) => column.key === _groupBy)) === null || _37 === void 0 ? void 0 : _37.key) || "", gridData, (_39 = (_38 = headerColumns.find((column) => column.key === _groupBy)) === null || _38 === void 0 ? void 0 : _38.dataType) !== null && _39 !== void 0 ? _39 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
594
- cursor: "pointer",
595
- display: "flex",
596
- alignItems: "center",
597
- }, onClick: () => {
598
- var _a, _b, _c, _d;
599
- 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 : []));
600
- }, children: [_jsx(Checkbox, { id: CSS.escape(((_40 = headerColumns.find((column) => column.key === _groupBy)) === null || _40 === void 0 ? void 0 : _40.key) || ""), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_41 = headerColumns.find((column) => column.key === _groupBy)) === null || _41 === void 0 ? void 0 : _41.key) || ""]) !== "undefined"
601
- ? ((_43 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_42 = headerColumns.find((column) => column.key ===
602
- _groupBy)) === null || _42 === void 0 ? void 0 : _42.key) || ""]) === null || _43 === void 0 ? void 0 : _43.length) > 0 &&
603
- getColumnData(((_44 = headerColumns.find((column) => column.key ===
604
- _groupBy)) === null || _44 === void 0 ? void 0 : _44.key) || "", gridData, (_46 = (_45 = headerColumns.find((column) => column.key ===
605
- _groupBy)) === null || _45 === void 0 ? void 0 : _45.dataType) !== null && _46 !== void 0 ? _46 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).every((item) => {
606
- var _a;
607
- return uniqueSearch[((_a = headerColumns.find((column) => column.key ===
608
- _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
609
- })
610
- : true, indeterminate: ((_48 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_47 = headerColumns.find((column) => column.key === _groupBy)) === null || _47 === void 0 ? void 0 : _47.key) || ""]) === null || _48 === void 0 ? void 0 : _48.length) > 0 &&
611
- getColumnData(((_49 = headerColumns.find((column) => column.key === _groupBy)) === null || _49 === void 0 ? void 0 : _49.key) || "", gridData, (_51 = (_50 = headerColumns.find((column) => column.key === _groupBy)) === null || _50 === void 0 ? void 0 : _50.dataType) !== null && _51 !== void 0 ? _51 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).some((item) => {
612
- var _a;
613
- return uniqueSearch[((_a = headerColumns.find((column) => column.key ===
614
- _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
615
- }), onChange: () => { }, style: {
616
- pointerEvents: "none",
617
- }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: "All" })] }), getColumnData(((_52 = headerColumns.find((column) => column.key === _groupBy)) === null || _52 === void 0 ? void 0 : _52.key) || "", gridData, (_54 = (_53 = headerColumns.find((column) => column.key === _groupBy)) === null || _53 === void 0 ? void 0 : _53.dataType) !== null && _54 !== void 0 ? _54 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).map((item) => {
618
- var _a, _b, _c, _d, _e, _f, _g;
619
- return (_jsxs("div", { style: {
620
- cursor: "pointer",
621
- display: "flex",
622
- alignItems: "center",
623
- }, onClick: () => {
624
- var _a, _b, _c, _d;
625
- 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 ===
626
- _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || "", gridData, (_d = (_c = headerColumns.find((column) => column.key ===
627
- _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) !== null && _d !== void 0 ? _d : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []));
628
- }, children: [_jsx(Checkbox, { id: CSS.escape(`${((_a = headerColumns.find((column) => column.key ===
629
- _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 ===
630
- _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) !== "undefined"
631
- ? (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_c = headerColumns.find((column) => column.key ===
632
- _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || ""].length) > 0 &&
633
- ((_e = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_d = headerColumns.find((column) => column.key ===
634
- _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.includes(item))
635
- : true, onChange: () => { }, style: {
636
- pointerEvents: "none",
637
- }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: {
638
- marginLeft: "0.5rem",
639
- }, 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));
640
- })] })) }))] })) : null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, className: "column-search-outside-wrapper", children: [_jsx("div", { style: {
641
- marginTop: "0.5rem",
642
- pointerEvents: search &&
643
- ((_55 = headerColumns.find((column) => column.key === _groupBy)) === null || _55 === void 0 ? void 0 : _55.search)
644
- ? "auto"
645
- : "none",
646
- cursor: search &&
647
- ((_56 = headerColumns.find((column) => column.key === _groupBy)) === null || _56 === void 0 ? void 0 : _56.search)
648
- ? "default"
649
- : "not-allowed",
650
- }, children: _jsxs("div", { style: {
651
- display: "flex",
652
- alignItems: "center",
653
- }, children: [_jsx(TextInput, { onFocus: () => {
654
- var _a;
655
- return setActiveSearchColumn(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
656
- }, onChange: (e) => {
657
- var _a, _b, _c;
658
- 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) ||
659
- defaultSearchOperation ||
660
- "contains";
661
- if (e.target.value.includes("to")) {
662
- searchType = "between";
663
- }
664
- else if (searchType === "between") {
665
- searchType = "contains";
666
- }
667
- onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
668
- }, placeholder: "Search", extraWrapperStyle: {
669
- background: ((_57 = headerColumns.find((column) => column.key === _groupBy)) === null || _57 === void 0 ? void 0 : _57.search)
670
- ? "var(--background)"
671
- : "var(--disabled-bg)",
672
- }, value: ((_59 = searchQueries[((_58 = headerColumns.find((column) => column.key === _groupBy)) === null || _58 === void 0 ? void 0 : _58.key) || ""]) === null || _59 === void 0 ? void 0 : _59.text) || "", disabled: !((_60 = headerColumns.find((column) => column.key === _groupBy)) === null || _60 === void 0 ? void 0 : _60.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => {
673
- var _a, _b, _c;
674
- return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number" ||
675
- ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "currency"
676
- ? numberTypeSearch.includes(item.value)
677
- : ((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) === "date"
678
- ? dateTypeSearch.includes(item.value)
679
- : textTypeSearch.includes(item.value);
680
- }), selectedValues: [
681
- ((_63 = searchQueries[(_62 = (_61 = headerColumns.find((column) => column.key === _groupBy)) === null || _61 === void 0 ? void 0 : _61.key) !== null && _62 !== void 0 ? _62 : ""]) === null || _63 === void 0 ? void 0 : _63.type) ||
307
+ (((_o = headerColumns.find((column) => column.key === _groupBy)) === null || _o === void 0 ? void 0 : _o.uniqueDrop) ? (_jsx(GridFilterDropdown, { portalTarget: portalTarget, locale: locale, formatOptions: formatOptions, columnType: (_q = (_p = headerColumns.find((column) => column.key === _groupBy)) === null || _p === void 0 ? void 0 : _p.dataType) !== null && _q !== void 0 ? _q : "string", columnIndex: -1, searchable: ((_r = headerColumns.find((column) => column.key === _groupBy)) === null || _r === void 0 ? void 0 : _r.search) || false, headerDropdownIndex: headerDropdownIndex, searchInput: (search &&
308
+ ((_s = headerColumns.find((column) => column.key === _groupBy)) === null || _s === void 0 ? void 0 : _s.search) && (_jsx("div", { style: {
309
+ marginTop: "0.5rem",
310
+ padding: "0.5rem",
311
+ width: "100%",
312
+ pointerEvents: search &&
313
+ ((_t = headerColumns.find((column) => column.key === _groupBy)) === null || _t === void 0 ? void 0 : _t.search)
314
+ ? "auto"
315
+ : "none",
316
+ cursor: search &&
317
+ ((_u = headerColumns.find((column) => column.key === _groupBy)) === null || _u === void 0 ? void 0 : _u.search)
318
+ ? "default"
319
+ : "not-allowed",
320
+ }, children: _jsx(TextInput, { onChange: (e) => {
321
+ var _a, _b, _c;
322
+ 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) ||
323
+ defaultSearchOperation ||
324
+ "contains";
325
+ if (e.target.value.includes("to")) {
326
+ searchType = "between";
327
+ }
328
+ else if (searchType === "between") {
329
+ searchType = "contains";
330
+ }
331
+ onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
332
+ }, placeholder: "Search", extraWrapperStyle: {
333
+ background: ((_v = headerColumns.find((column) => column.key === _groupBy)) === null || _v === void 0 ? void 0 : _v.search)
334
+ ? "var(--background)"
335
+ : "var(--disabled-bg)",
336
+ }, value: ((_x = searchQueries[((_w = headerColumns.find((column) => column.key === _groupBy)) === null || _w === void 0 ? void 0 : _w.key) || ""]) === null || _x === void 0 ? void 0 : _x.text) || "", disabled: !((_y = headerColumns.find((column) => column.key === _groupBy)) === null || _y === void 0 ? void 0 : _y.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))) ||
337
+ null, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label !== "Group by"), onClose: () => setDropdownVisible(null), column: headerColumns.find((column) => column.key === _groupBy) }), searchOptions: searchOptions.filter((item) => {
338
+ var _a, _b;
339
+ return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number"
340
+ ? numberTypeSearch.includes(item.value)
341
+ : ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "date"
342
+ ? dateTypeSearch.includes(item.value)
343
+ : textTypeSearch.includes(item.value);
344
+ }), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: ((_z = headerColumns.find((column) => column.key === _groupBy)) === null || _z === void 0 ? void 0 : _z.key) || "", columnData: getColumnData(((_0 = headerColumns.find((column) => column.key === _groupBy)) === null || _0 === void 0 ? void 0 : _0.key) || "", gridData, (_2 = (_1 = headerColumns.find((column) => column.key === _groupBy)) === null || _1 === void 0 ? void 0 : _1.dataType) !== null && _2 !== void 0 ? _2 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []), searchElement: _jsx("div", { id: "search-input", children: ((_3 = headerColumns.find((column) => column.key === _groupBy)) === null || _3 === void 0 ? void 0 : _3.dataType) === "date" ? (((_5 = searchQueries[((_4 = headerColumns.find((column) => column.key === _groupBy)) === null || _4 === void 0 ? void 0 : _4.key) || ""]) === null || _5 === void 0 ? void 0 : _5.type) === "between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_7 = searchQueries[((_6 = headerColumns.find((column) => column.key === _groupBy)) === null || _6 === void 0 ? void 0 : _6.key) || ""]) === null || _7 === void 0 ? void 0 : _7.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
345
+ var _a, _b, _c, _d, _e;
346
+ return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", (_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.text.split("to").map((item, index) => {
347
+ if (index === 0) {
348
+ return value;
349
+ }
350
+ return item;
351
+ }).join("to"), ((_e = searchQueries[((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.type) ||
352
+ defaultSearchOperation ||
353
+ "contains");
354
+ } }), _jsx(DateInput, { value: (_9 = searchQueries[((_8 = headerColumns.find((column) => column.key === _groupBy)) === null || _8 === void 0 ? void 0 : _8.key) || ""]) === null || _9 === void 0 ? void 0 : _9.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
355
+ var _a, _b, _c, _d, _e;
356
+ return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", (_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.text.split("to").map((item, index) => {
357
+ if (index === 1) {
358
+ return value;
359
+ }
360
+ return item;
361
+ }).join("to"), ((_e = searchQueries[((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.type) ||
362
+ defaultSearchOperation ||
363
+ "contains");
364
+ } })] })) : (_jsx(DateInput, { value: (_11 = searchQueries[((_10 = headerColumns.find((column) => column.key === _groupBy)) === null || _10 === void 0 ? void 0 : _10.key) || ""]) === null || _11 === void 0 ? void 0 : _11.text.split("to")[0], placeholder: `asd Filter ${(_12 = headerColumns.find((column) => column.key === _groupBy)) === null || _12 === void 0 ? void 0 : _12.label}`, onChange: (value) => {
365
+ var _a, _b, _c;
366
+ return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", value, ((_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.type) ||
367
+ defaultSearchOperation ||
368
+ "contains");
369
+ } }))) : (_jsx(TextInput, { placeholder: `Filter ${(_13 = headerColumns.find((column) => column.key === _groupBy)) === null || _13 === void 0 ? void 0 : _13.label}`, onKeyDown: (e) => {
370
+ var _a;
371
+ if (e.key === "Enter") {
372
+ toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
373
+ }
374
+ }, onChange: (e) => {
375
+ var _a, _b, _c;
376
+ return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", e.target.value, ((_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.type) ||
377
+ defaultSearchOperation ||
378
+ "contains");
379
+ }, value: ((_15 = searchQueries[((_14 = headerColumns.find((column) => column.key === _groupBy)) === null || _14 === void 0 ? void 0 : _14.key) || ""]) === null || _15 === void 0 ? void 0 : _15.text) || "", extraWrapperStyle: {
380
+ visibility: ((_16 = headerColumns.find((column) => column.key === _groupBy)) === null || _16 === void 0 ? void 0 : _16.search)
381
+ ? "visible"
382
+ : "hidden",
383
+ }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_18 = searchQueries[((_17 = headerColumns.find((column) => column.key === _groupBy)) === null || _17 === void 0 ? void 0 : _17.key) || ""]) === null || _18 === void 0 ? void 0 : _18.type) ||
682
384
  defaultSearchOperation ||
683
- "contains",
684
- ], selectedDisplay: (_65 = (_64 = searchOptions
685
- .filter((item) => {
686
- var _a, _b, _c;
687
- return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number" ||
688
- ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "currency"
689
- ? numberTypeSearch.includes(item.value)
690
- : ((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.dataType) === "date"
691
- ? dateTypeSearch.includes(item.value)
692
- : textTypeSearch.includes(item.value);
693
- })
694
- .find((item) => {
695
- var _a, _b, _c;
696
- return item.value ===
697
- (((_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) ||
385
+ "contains", checkboxWrapper: checkboxWrapper })) : (_jsx(TextFilterDropdown, { columnIndex: -1, combined: false, headerDropdownIndex: headerDropdownIndex, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label !== "Group by"), onClose: () => setDropdownVisible(null), column: headerColumns.find((column) => column.key === _groupBy) }), searchOptions: searchOptions.filter((item) => {
386
+ var _a, _b;
387
+ return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number"
388
+ ? numberTypeSearch.includes(item.value)
389
+ : ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "date"
390
+ ? dateTypeSearch.includes(item.value)
391
+ : textTypeSearch.includes(item.value);
392
+ }), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: ((_19 = headerColumns.find((column) => column.key === _groupBy)) === null || _19 === void 0 ? void 0 : _19.key) || "", searchable: ((_20 = headerColumns.find((column) => column.key === _groupBy)) === null || _20 === void 0 ? void 0 : _20.search) || false, searchElement: _jsx("div", { id: "search-input", children: ((_21 = headerColumns.find((column) => column.key === _groupBy)) === null || _21 === void 0 ? void 0 : _21.dataType) === "date" ? (((_23 = searchQueries[((_22 = headerColumns.find((column) => column.key === _groupBy)) === null || _22 === void 0 ? void 0 : _22.key) || ""]) === null || _23 === void 0 ? void 0 : _23.type) === "between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_25 = searchQueries[((_24 = headerColumns.find((column) => column.key === _groupBy)) === null || _24 === void 0 ? void 0 : _24.key) || ""]) === null || _25 === void 0 ? void 0 : _25.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
393
+ var _a, _b, _c, _d, _e;
394
+ return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", (_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.text.split("to").map((item, index) => {
395
+ if (index === 0) {
396
+ return value;
397
+ }
398
+ return item;
399
+ }).join("to"), ((_e = searchQueries[((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.type) ||
400
+ defaultSearchOperation ||
401
+ "contains");
402
+ } }), _jsx("div", { style: { marginTop: "0.5rem" }, children: _jsx(DateInput, { value: (_27 = searchQueries[((_26 = headerColumns.find((column) => column.key === _groupBy)) === null || _26 === void 0 ? void 0 : _26.key) || ""]) === null || _27 === void 0 ? void 0 : _27.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
403
+ var _a, _b, _c, _d, _e;
404
+ return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", (_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.text.split("to").map((item, index) => {
405
+ if (index === 1) {
406
+ return value;
407
+ }
408
+ return item;
409
+ }).join("to"), ((_e = searchQueries[((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || ""]) === null || _e === void 0 ? void 0 : _e.type) ||
410
+ defaultSearchOperation ||
411
+ "contains");
412
+ } }) })] })) : [
413
+ "contains",
414
+ "doesNotContain",
415
+ "blank",
416
+ "notBlank",
417
+ ].includes(((_29 = searchQueries[((_28 = headerColumns.find((column) => column.key === _groupBy)) === null || _28 === void 0 ? void 0 : _28.key) || ""]) === null || _29 === void 0 ? void 0 : _29.type) ||
698
418
  defaultSearchOperation ||
699
- "contains");
700
- })) === null || _64 === void 0 ? void 0 : _64.label) !== null && _65 !== void 0 ? _65 : "", withValue: true, onChange: (selected) => {
701
- var _a, _b, _c;
702
- const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
703
- handleSearchOptionSelect((_c = (_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : "", value);
704
- }, dropdownListWidth: "max-content", searchEnabled: false, className: "flex-1", isIcon: true })] }) }), 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 &&
705
- activeSearchColumn ===
706
- (((_69 = headerColumns.find((column) => column.key === _groupBy)) === null || _69 === void 0 ? void 0 : _69.key) || "") && (_jsx("div", { ref: activeSearchListRef, style: {
707
- position: "absolute",
708
- top: "calc(100% + 0.25rem)",
709
- left: 0,
710
- background: "var(--card-bg)",
711
- width: "max-content",
712
- maxWidth: "24rem",
713
- maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
714
- overflow: "auto",
715
- padding: "0.5rem 0.75rem",
716
- borderRadius: "0.5rem",
717
- boxShadow: "0 0.5rem 1rem rgba(0,0,0,0.15)",
718
- border: "1px solid var(--divider, #f5f5f5)",
719
- }, children: getColumnData(((_70 = headerColumns.find((column) => column.key === _groupBy)) === null || _70 === void 0 ? void 0 : _70.key) || "", gridData, (_72 = (_71 = headerColumns.find((column) => column.key === _groupBy)) === null || _71 === void 0 ? void 0 : _71.dataType) !== null && _72 !== void 0 ? _72 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
720
- cursor: "pointer",
721
- display: "flex",
722
- alignItems: "center",
723
- }, onClick: () => {
724
- var _a, _b, _c, _d;
725
- 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 : []));
726
- }, children: [_jsx(Checkbox, { id: CSS.escape(((_73 = headerColumns.find((column) => column.key === _groupBy)) === null || _73 === void 0 ? void 0 : _73.key) || ""), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_74 = headerColumns.find((column) => column.key === _groupBy)) === null || _74 === void 0 ? void 0 : _74.key) || ""]) !== "undefined"
727
- ? ((_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 &&
728
- 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 : []).every((item) => {
729
- var _a;
730
- return uniqueSearch[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
731
- })
732
- : true, indeterminate: ((_81 = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[((_80 = headerColumns.find((column) => column.key === _groupBy)) === null || _80 === void 0 ? void 0 : _80.key) || ""]) === null || _81 === void 0 ? void 0 : _81.length) > 0 &&
733
- getColumnData(((_82 = headerColumns.find((column) => column.key === _groupBy)) === null || _82 === void 0 ? void 0 : _82.key) || "", gridData, (_84 = (_83 = headerColumns.find((column) => column.key === _groupBy)) === null || _83 === void 0 ? void 0 : _83.dataType) !== null && _84 !== void 0 ? _84 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).some((item) => {
419
+ "contains") ? (_jsx(TextInput, { placeholder: `Filter ${(_30 = headerColumns.find((column) => column.key === _groupBy)) === null || _30 === void 0 ? void 0 : _30.label}`, onKeyDown: (e) => {
734
420
  var _a;
735
- return uniqueSearch[((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || ""].includes(item);
736
- }), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: "All" })] }), getColumnData(((_85 = headerColumns.find((column) => column.key === _groupBy)) === null || _85 === void 0 ? void 0 : _85.key) || "", gridData, (_87 = (_86 = headerColumns.find((column) => column.key === _groupBy)) === null || _86 === void 0 ? void 0 : _86.dataType) !== null && _87 !== void 0 ? _87 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []).map((item) => {
737
- var _a, _b, _c, _d, _e, _f, _g;
738
- return (_jsxs("div", { style: {
739
- cursor: "pointer",
740
- display: "flex",
741
- alignItems: "center",
742
- }, onClick: () => {
743
- var _a, _b, _c, _d;
744
- 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 : []));
745
- }, 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"
746
- ? (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 &&
747
- ((_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))
748
- : 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));
749
- })] })) }))] }))] }, (_88 = headerColumns.find((column) => column.key === _groupBy)) === null || _88 === void 0 ? void 0 : _88.key)) }));
421
+ if (e.key === "Enter") {
422
+ toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
423
+ }
424
+ }, onChange: (e) => {
425
+ var _a, _b, _c;
426
+ return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", e.target.value, ((_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.type) ||
427
+ defaultSearchOperation ||
428
+ "contains");
429
+ }, value: ((_32 = searchQueries[((_31 = headerColumns.find((column) => column.key === _groupBy)) === null || _31 === void 0 ? void 0 : _31.key) || ""]) === null || _32 === void 0 ? void 0 : _32.text) || "", extraWrapperStyle: {
430
+ visibility: ((_33 = headerColumns.find((column) => column.key === _groupBy)) === null || _33 === void 0 ? void 0 : _33.search)
431
+ ? "visible"
432
+ : "hidden",
433
+ }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) : (_jsx(DateInput, { value: (_35 = searchQueries[((_34 = headerColumns.find((column) => column.key === _groupBy)) === null || _34 === void 0 ? void 0 : _34.key) || ""]) === null || _35 === void 0 ? void 0 : _35.text.split("to")[0], placeholder: `asd Filter ${(_36 = headerColumns.find((column) => column.key === _groupBy)) === null || _36 === void 0 ? void 0 : _36.label}`, onChange: (value) => {
434
+ var _a, _b, _c;
435
+ return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", value, ((_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.type) ||
436
+ defaultSearchOperation ||
437
+ "contains");
438
+ } }))) : (_jsx(TextInput, { placeholder: `Filter ${(_37 = headerColumns.find((column) => column.key === _groupBy)) === null || _37 === void 0 ? void 0 : _37.label}`, onKeyDown: (e) => {
439
+ var _a;
440
+ if (e.key === "Enter") {
441
+ toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
442
+ }
443
+ }, onChange: (e) => {
444
+ var _a, _b, _c;
445
+ return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", e.target.value, ((_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.type) ||
446
+ defaultSearchOperation ||
447
+ "contains");
448
+ }, value: ((_39 = searchQueries[((_38 = headerColumns.find((column) => column.key === _groupBy)) === null || _38 === void 0 ? void 0 : _38.key) || ""]) === null || _39 === void 0 ? void 0 : _39.text) || "", extraWrapperStyle: {
449
+ visibility: ((_40 = headerColumns.find((column) => column.key === _groupBy)) === null || _40 === void 0 ? void 0 : _40.search)
450
+ ? "visible"
451
+ : "hidden",
452
+ }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), activeSearchType: ((_42 = searchQueries[((_41 = headerColumns.find((column) => column.key === _groupBy)) === null || _41 === void 0 ? void 0 : _41.key) || ""]) === null || _42 === void 0 ? void 0 : _42.type) ||
453
+ defaultSearchOperation ||
454
+ "contains", searchInput: (search &&
455
+ ((_43 = headerColumns.find((column) => column.key === _groupBy)) === null || _43 === void 0 ? void 0 : _43.search) && (_jsx("div", { style: {
456
+ marginTop: "0.5rem",
457
+ padding: "0.5rem",
458
+ width: "100%",
459
+ pointerEvents: search &&
460
+ ((_44 = headerColumns.find((column) => column.key === _groupBy)) === null || _44 === void 0 ? void 0 : _44.search)
461
+ ? "auto"
462
+ : "none",
463
+ cursor: search &&
464
+ ((_45 = headerColumns.find((column) => column.key === _groupBy)) === null || _45 === void 0 ? void 0 : _45.search)
465
+ ? "default"
466
+ : "not-allowed",
467
+ }, children: _jsx(TextInput, { onChange: (e) => {
468
+ var _a, _b, _c;
469
+ 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) ||
470
+ defaultSearchOperation ||
471
+ "contains";
472
+ if (e.target.value.includes("to")) {
473
+ searchType = "between";
474
+ }
475
+ else if (searchType === "between") {
476
+ searchType = "contains";
477
+ }
478
+ onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
479
+ }, placeholder: "Search", extraWrapperStyle: {
480
+ background: ((_46 = headerColumns.find((column) => column.key === _groupBy)) === null || _46 === void 0 ? void 0 : _46.search)
481
+ ? "var(--background)"
482
+ : "var(--disabled-bg)",
483
+ }, 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)) }));
750
519
  }), headerColumns
751
520
  .filter((column) => !groupByKeys.includes(column.key))
752
521
  .map((column, colIndex) => {
753
522
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
754
523
  if (!column.hidden) {
755
524
  const columnData = getColumnData(column.key, gridData, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []);
756
- 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"
757
- ? numberTypeSearch.includes(item.value)
758
- : (column === null || column === void 0 ? void 0 : column.dataType) === "date"
759
- ? dateTypeSearch.includes(item.value)
760
- : textTypeSearch.includes(item.value));
761
- console.log(colSearchOptions.find((item) => {
762
- var _a, _b;
763
- return item.value ===
764
- (((_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) ||
765
- defaultSearchOperation ||
766
- "contains");
767
- }));
768
525
  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: {
769
526
  position: "absolute",
770
527
  width: "1px",
@@ -811,263 +568,201 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
811
568
  ? "#2377ba"
812
569
  : "var(--row-header-text)",
813
570
  } }), dropdownVisible === column.key &&
814
- (column.uniqueDrop ? (_jsx(GridFilterDropdown, { portalTarget: portalTarget, headerDropdownIndex: headerDropdownIndex, position: searchOpsPosition || { top: 0, left: 0 }, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label === "Group by"
571
+ (column.uniqueDrop ? (_jsx(GridFilterDropdown, { portalTarget: portalTarget, locale: locale, formatOptions: formatOptions, columnType: (_b = column.dataType) !== null && _b !== void 0 ? _b : "string", columnIndex: colIndex, searchable: (column === null || column === void 0 ? void 0 : column.search) || false, headerDropdownIndex: headerDropdownIndex, searchOptions: searchOptions.filter((item) => column.dataType === "number" ||
572
+ column.dataType === "currency"
573
+ ? numberTypeSearch.includes(item.value)
574
+ : column.dataType === "date"
575
+ ? dateTypeSearch.includes(item.value)
576
+ : textTypeSearch.includes(item.value)), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: column.key, columnData: columnData, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions.filter((item) => item.label === "Group by"
815
577
  ? !column.isArrayString
816
- : true), onClose: () => setDropdownVisible(null), column: column }), searchOps: search && !columnSearchOutside ? (_jsxs("div", { style: { position: "relative" }, className: "column-search-outside-wrapper", children: [_jsx("div", { style: {
817
- marginTop: "0.5rem",
818
- pointerEvents: search && column.search
819
- ? "auto"
820
- : "none",
821
- cursor: search && column.search
822
- ? "default"
823
- : "not-allowed",
824
- }, children: _jsxs("div", { style: {
825
- display: "flex",
826
- alignItems: "center",
827
- }, children: [_jsx(TextInput, { onFocus: () => setActiveSearchColumn(column.key), onChange: (e) => {
828
- var _a;
829
- let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
830
- defaultSearchOperation ||
831
- "contains";
832
- if (e.target.value.includes("to")) {
833
- searchType = "between";
834
- }
835
- else if (searchType === "between") {
836
- searchType = "contains";
837
- }
838
- onSearch(column.key, e.target.value, searchType);
839
- }, placeholder: "Search", extraWrapperStyle: {
840
- background: column.search
841
- ? "var(--background)"
842
- : "var(--disabled-bg)",
843
- }, value: ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.text) || "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => column.dataType ===
844
- "number" ||
845
- column.dataType === "currency"
846
- ? numberTypeSearch.includes(item.value)
847
- : column.dataType === "date"
848
- ? dateTypeSearch.includes(item.value)
849
- : textTypeSearch.includes(item.value)), selectedValues: [
850
- ((_c = searchQueries[column.key]) === null || _c === void 0 ? void 0 : _c.type) ||
851
- defaultSearchOperation ||
852
- "contains",
853
- ], onChange: (selected) => {
854
- var _a;
855
- const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
856
- handleSearchOptionSelect(column.key, value);
857
- }, selectedDisplay: (_e = (_d = colSearchOptions.find((item) => {
858
- var _a, _b;
859
- return item.value ===
860
- (((_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) ||
861
- defaultSearchOperation ||
862
- "contains");
863
- })) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : "", withValue: true, searchEnabled: false, className: "flex-1", dropdownListWidth: "max-content", isIcon: true })] }) }), columnData.length > 0 &&
864
- activeSearchColumn ===
865
- ((column === null || column === void 0 ? void 0 : column.key) || "") && (_jsxs("div", { ref: activeSearchListRef, style: {
866
- position: "absolute",
867
- top: "calc(100% + 0.25rem)",
868
- left: 0,
869
- background: "var(--card-bg)",
870
- width: "max-content",
871
- maxWidth: "24rem",
872
- maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
873
- overflow: "auto",
874
- padding: "0.5rem 0.75rem",
875
- borderRadius: "0.5rem",
876
- boxShadow: "0 0.5rem 1rem rgba(0,0,0,0.15)",
877
- border: "1px solid var(--divider, #f5f5f5)",
878
- }, children: [_jsxs("div", { style: {
879
- cursor: "pointer",
880
- display: "flex",
881
- alignItems: "center",
882
- }, 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) || ""]) !== "undefined"
883
- ? ((_f = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _f === void 0 ? void 0 : _f.length) > 0 &&
884
- columnData.every((item) => uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].includes(item))
885
- : true, indeterminate: ((_g = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _g === void 0 ? void 0 : _g.length) > 0 &&
886
- columnData.some((item) => uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].includes(item)), onChange: () => { }, style: {
887
- pointerEvents: "none",
888
- }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: {
889
- marginLeft: "0.5rem",
890
- }, children: "All" })] }), columnData.map((item) => {
578
+ : true), onClose: () => setDropdownVisible(null), column: column }), searchElement: _jsx("div", { id: "search-input", children: column.dataType === "date" ? (((_c = searchQueries[column.key]) === null || _c === void 0 ? void 0 : _c.type) ===
579
+ "between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_d = searchQueries[column.key]) === null || _d === void 0 ? void 0 : _d.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
891
580
  var _a, _b;
892
- return (_jsxs("div", { style: {
893
- cursor: "pointer",
894
- display: "flex",
895
- alignItems: "center",
896
- }, 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"
897
- ? (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].length) > 0 &&
898
- ((_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))
899
- : true, onChange: () => { }, style: {
900
- pointerEvents: "none",
901
- }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: {
902
- marginLeft: "0.5rem",
903
- }, children: formatValue(item, (_b = column === null || column === void 0 ? void 0 : column.dataType) !== null && _b !== void 0 ? _b : "", locale, formatOptions) })] }, item));
904
- })] }))] })) : null, columnIndex: colIndex })) : (_jsx(TextFilterDropdown, { columnIndex: colIndex, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions, onClose: () => setDropdownVisible(null), column: column }), searchOps: search && !columnSearchOutside ? (_jsxs("div", { style: { position: "relative" }, className: "column-search-outside-wrapper", children: [_jsx("div", { style: {
905
- marginTop: "0.5rem",
906
- pointerEvents: search && column.search
907
- ? "auto"
908
- : "none",
909
- cursor: search && column.search
910
- ? "default"
911
- : "not-allowed",
912
- }, children: _jsxs("div", { style: {
913
- display: "flex",
914
- alignItems: "center",
915
- }, children: [_jsx(TextInput, { onFocus: () => setActiveSearchColumn(column.key), onChange: (e) => {
916
- var _a;
917
- let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
918
- defaultSearchOperation ||
919
- "contains";
920
- if (e.target.value.includes("to")) {
921
- searchType = "between";
922
- }
923
- else if (searchType === "between") {
924
- searchType = "contains";
925
- }
926
- onSearch(column.key, e.target.value, searchType);
927
- }, placeholder: "Search", extraWrapperStyle: {
928
- background: column.search
929
- ? "var(--background)"
930
- : "var(--disabled-bg)",
931
- }, value: ((_h = searchQueries[column.key]) === null || _h === void 0 ? void 0 : _h.text) || "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => column.dataType ===
932
- "number" ||
933
- column.dataType === "currency"
934
- ? numberTypeSearch.includes(item.value)
935
- : column.dataType === "date"
936
- ? dateTypeSearch.includes(item.value)
937
- : textTypeSearch.includes(item.value)), selectedValues: [
938
- ((_j = searchQueries[column.key]) === null || _j === void 0 ? void 0 : _j.type) ||
939
- defaultSearchOperation ||
940
- "contains",
941
- ], onChange: (selected) => {
942
- var _a;
943
- const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
944
- handleSearchOptionSelect(column.key, value);
945
- }, selectedDisplay: (_l = (_k = colSearchOptions.find((item) => {
946
- var _a, _b;
947
- return item.value ===
948
- (((_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) ||
949
- defaultSearchOperation ||
950
- "contains");
951
- })) === null || _k === void 0 ? void 0 : _k.label) !== null && _l !== void 0 ? _l : "", withValue: true, searchEnabled: false, className: "flex-1", dropdownListWidth: "max-content", isIcon: true })] }) }), columnData.length > 0 &&
952
- activeSearchColumn ===
953
- ((column === null || column === void 0 ? void 0 : column.key) || "") && (_jsxs("div", { ref: activeSearchListRef, style: {
954
- position: "absolute",
955
- top: "calc(100% + 0.25rem)",
956
- left: 0,
957
- background: "var(--card-bg)",
958
- width: "max-content",
959
- maxWidth: "24rem",
960
- maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
961
- overflow: "auto",
962
- padding: "0.5rem 0.75rem",
963
- borderRadius: "0.5rem",
964
- boxShadow: "0 0.5rem 1rem rgba(0,0,0,0.15)",
965
- border: "1px solid var(--divider, #f5f5f5)",
966
- }, children: [_jsxs("div", { style: {
967
- cursor: "pointer",
968
- display: "flex",
969
- alignItems: "center",
970
- }, 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) || ""]) !== "undefined"
971
- ? ((_m = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _m === void 0 ? void 0 : _m.length) > 0 &&
972
- columnData.every((item) => uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].includes(item))
973
- : true, indeterminate: ((_o = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _o === void 0 ? void 0 : _o.length) > 0 &&
974
- columnData.some((item) => uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].includes(item)), onChange: () => { }, style: {
975
- pointerEvents: "none",
976
- }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: {
977
- marginLeft: "0.5rem",
978
- }, children: "All" })] }), columnData.map((item) => {
581
+ return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
582
+ if (index === 0) {
583
+ return value;
584
+ }
585
+ return item;
586
+ }).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
587
+ defaultSearchOperation ||
588
+ "contains");
589
+ } }), _jsx(DateInput, { value: (_e = searchQueries[column.key]) === null || _e === void 0 ? void 0 : _e.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
979
590
  var _a, _b;
980
- return (_jsxs("div", { style: {
981
- cursor: "pointer",
982
- display: "flex",
983
- alignItems: "center",
984
- }, 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"
985
- ? (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].length) > 0 &&
986
- ((_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))
987
- : true, onChange: () => { }, style: {
988
- pointerEvents: "none",
989
- }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: {
990
- marginLeft: "0.5rem",
991
- }, children: formatValue(item, (_b = column === null || column === void 0 ? void 0 : column.dataType) !== null && _b !== void 0 ? _b : "", locale, formatOptions) })] }, item));
992
- })] }))] })) : null, headerDropdownIndex: headerDropdownIndex })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, className: "column-search-outside-wrapper", children: [_jsx("div", { style: {
993
- marginTop: "0.5rem",
994
- pointerEvents: search && column.search ? "auto" : "none",
995
- cursor: search && column.search
996
- ? "default"
997
- : "not-allowed",
998
- }, children: _jsxs("div", { style: {
999
- display: "flex",
1000
- alignItems: "center",
1001
- }, children: [_jsx(TextInput, { onFocus: () => setActiveSearchColumn(column.key), onChange: (e) => {
1002
- var _a;
1003
- let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
1004
- defaultSearchOperation ||
1005
- "contains";
1006
- if (e.target.value.includes("to")) {
1007
- searchType = "between";
1008
- }
1009
- else if (searchType === "between") {
1010
- searchType = "contains";
1011
- }
1012
- onSearch(column.key, e.target.value, searchType);
1013
- }, placeholder: "Search", extraWrapperStyle: {
1014
- background: column.search
1015
- ? "var(--background)"
1016
- : "var(--disabled-bg)",
1017
- }, value: ((_p = searchQueries[column.key]) === null || _p === void 0 ? void 0 : _p.text) || "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => column.dataType === "number" ||
1018
- column.dataType === "currency"
1019
- ? numberTypeSearch.includes(item.value)
1020
- : column.dataType === "date"
1021
- ? dateTypeSearch.includes(item.value)
1022
- : textTypeSearch.includes(item.value)), selectedValues: [
1023
- ((_q = searchQueries[column.key]) === null || _q === void 0 ? void 0 : _q.type) ||
591
+ return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
592
+ if (index === 1) {
593
+ return value;
594
+ }
595
+ return item;
596
+ }).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
597
+ defaultSearchOperation ||
598
+ "contains");
599
+ } })] })) : (_jsx(DateInput, { value: (_f = searchQueries[column.key]) === null || _f === void 0 ? void 0 : _f.text.split("to")[0], placeholder: `asd Filter ${column.label}`, onChange: (value) => {
600
+ var _a;
601
+ return onSearch(column.key, value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
602
+ defaultSearchOperation ||
603
+ "contains");
604
+ } }))) : (_jsx(TextInput, { placeholder: `Filter ${column.label}`, onKeyDown: (e) => {
605
+ if (e.key === "Enter") {
606
+ toggleDropdown(column.key);
607
+ }
608
+ }, onChange: (e) => {
609
+ var _a;
610
+ return onSearch(column.key, e.target.value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
611
+ defaultSearchOperation ||
612
+ "contains");
613
+ }, value: ((_g = searchQueries[column.key]) === null || _g === void 0 ? void 0 : _g.text) ||
614
+ "", extraWrapperStyle: {
615
+ visibility: column.search
616
+ ? "visible"
617
+ : "hidden",
618
+ }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_h = searchQueries[column.key]) === null || _h === void 0 ? void 0 : _h.type) ||
1024
619
  defaultSearchOperation ||
1025
- "contains",
1026
- ], onChange: (selected) => {
1027
- var _a;
1028
- const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
1029
- handleSearchOptionSelect(column.key, value);
1030
- }, selectedDisplay: (_s = (_r = colSearchOptions.find((item) => {
1031
- var _a, _b;
1032
- return item.value ===
1033
- (((_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) ||
620
+ "contains", checkboxWrapper: checkboxWrapper, searchInput: search &&
621
+ column.search && (_jsx("div", { style: {
622
+ marginTop: "0.5rem",
623
+ padding: "0.5rem",
624
+ width: "100%",
625
+ pointerEvents: search && column.search
626
+ ? "auto"
627
+ : "none",
628
+ cursor: search && column.search
629
+ ? "default"
630
+ : "not-allowed",
631
+ }, children: _jsx(TextInput, { onChange: (e) => {
632
+ var _a;
633
+ let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
634
+ defaultSearchOperation ||
635
+ "contains";
636
+ if (e.target.value.includes("to")) {
637
+ searchType = "between";
638
+ }
639
+ else if (searchType === "between") {
640
+ searchType = "contains";
641
+ }
642
+ onSearch(column.key, e.target.value, searchType);
643
+ }, extraWrapperStyle: {
644
+ background: column.search
645
+ ? "var(--background)"
646
+ : "var(--disabled-bg)",
647
+ }, placeholder: "Search", value: ((_j = searchQueries[column.key]) === null || _j === void 0 ? void 0 : _j.text) ||
648
+ "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) })) })) : (_jsx(TextFilterDropdown, { combined: false, columnIndex: colIndex, searchable: (column === null || column === void 0 ? void 0 : column.search) || false, sortingOps: _jsx(GridHeaderDropdown, { options: menuOptions, onClose: () => setDropdownVisible(null), column: column }), headerDropdownIndex: headerDropdownIndex, searchOptions: searchOptions.filter((item) => column.dataType === "number" ||
649
+ column.dataType === "currency"
650
+ ? numberTypeSearch.includes(item.value)
651
+ : column.dataType === "date"
652
+ ? dateTypeSearch.includes(item.value)
653
+ : textTypeSearch.includes(item.value)), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: column.key, searchElement: _jsx("div", { id: "search-input", children: column.dataType === "date" ? (((_k = searchQueries[column.key]) === null || _k === void 0 ? void 0 : _k.type) ===
654
+ "between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_l = searchQueries[column.key]) === null || _l === void 0 ? void 0 : _l.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
655
+ var _a, _b;
656
+ return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
657
+ if (index === 0) {
658
+ return value;
659
+ }
660
+ return item;
661
+ }).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
662
+ defaultSearchOperation ||
663
+ "contains");
664
+ } }), _jsx("div", { style: { marginTop: "0.5rem" }, children: _jsx(DateInput, { value: (_m = searchQueries[column.key]) === null || _m === void 0 ? void 0 : _m.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
665
+ var _a, _b;
666
+ return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
667
+ if (index === 1) {
668
+ return value;
669
+ }
670
+ return item;
671
+ }).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
672
+ defaultSearchOperation ||
673
+ "contains");
674
+ } }) })] })) : [
675
+ "contains",
676
+ "doesNotContain",
677
+ "blank",
678
+ "notBlank",
679
+ ].includes(((_o = searchQueries[column.key]) === null || _o === void 0 ? void 0 : _o.type) ||
1034
680
  defaultSearchOperation ||
1035
- "contains");
1036
- })) === null || _r === void 0 ? void 0 : _r.label) !== null && _s !== void 0 ? _s : "", withValue: true, searchEnabled: false, className: "flex-1", dropdownListWidth: "max-content", isIcon: true })] }) }), columnData.length > 0 &&
1037
- activeSearchColumn === ((column === null || column === void 0 ? void 0 : column.key) || "") && (_jsxs("div", { ref: activeSearchListRef, style: {
1038
- position: "absolute",
1039
- top: "calc(100% + 0.25rem)",
1040
- left: 0,
1041
- background: "var(--card-bg)",
1042
- width: "max-content",
1043
- maxWidth: "24rem",
1044
- maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
1045
- overflow: "auto",
1046
- padding: "0.5rem 0.75rem",
1047
- borderRadius: "0.5rem",
1048
- boxShadow: "0 0.5rem 1rem rgba(0,0,0,0.15)",
1049
- border: "1px solid var(--divider, #f5f5f5)",
1050
- }, children: [_jsxs("div", { style: {
1051
- cursor: "pointer",
1052
- display: "flex",
1053
- alignItems: "center",
1054
- }, 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) || ""]) !==
1055
- "undefined"
1056
- ? ((_t = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _t === void 0 ? void 0 : _t.length) > 0 &&
1057
- columnData.every((item) => uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].includes(item))
1058
- : true, indeterminate: ((_u = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""]) === null || _u === void 0 ? void 0 : _u.length) >
1059
- 0 &&
1060
- 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) => {
1061
- var _a, _b;
1062
- return (_jsxs("div", { style: {
1063
- cursor: "pointer",
1064
- display: "flex",
1065
- alignItems: "center",
1066
- }, 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"
1067
- ? (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[(column === null || column === void 0 ? void 0 : column.key) || ""].length) > 0 &&
1068
- ((_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))
1069
- : 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));
1070
- })] }))] }))] })) }, column.key));
681
+ "contains") ? (_jsx(TextInput, { placeholder: `Filter ${column.label}`, onKeyDown: (e) => {
682
+ if (e.key === "Enter") {
683
+ toggleDropdown(column.key);
684
+ }
685
+ }, onChange: (e) => {
686
+ var _a;
687
+ return onSearch(column.key, e.target.value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
688
+ defaultSearchOperation ||
689
+ "contains");
690
+ }, value: ((_p = searchQueries[column.key]) === null || _p === void 0 ? void 0 : _p.text) ||
691
+ "", extraWrapperStyle: {
692
+ visibility: column.search
693
+ ? "visible"
694
+ : "hidden",
695
+ }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) : (_jsx(DateInput, { value: (_q = searchQueries[column.key]) === null || _q === void 0 ? void 0 : _q.text.split("to")[0], placeholder: `asd Filter ${column.label}`, onChange: (value) => {
696
+ var _a;
697
+ return onSearch(column.key, value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
698
+ defaultSearchOperation ||
699
+ "contains");
700
+ } }))) : (_jsx(TextInput, { placeholder: `Filter ${column.label}`, onKeyDown: (e) => {
701
+ if (e.key === "Enter") {
702
+ toggleDropdown(column.key);
703
+ }
704
+ }, onChange: (e) => {
705
+ var _a;
706
+ return onSearch(column.key, e.target.value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
707
+ defaultSearchOperation ||
708
+ "contains");
709
+ }, value: ((_r = searchQueries[column.key]) === null || _r === void 0 ? void 0 : _r.text) ||
710
+ "", extraWrapperStyle: {
711
+ visibility: column.search
712
+ ? "visible"
713
+ : "hidden",
714
+ }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), activeSearchType: ((_s = searchQueries[column.key]) === null || _s === void 0 ? void 0 : _s.type) ||
715
+ defaultSearchOperation ||
716
+ "contains", searchInput: (search && column.search && (_jsx("div", { style: {
717
+ padding: "0.5rem",
718
+ width: "100%",
719
+ pointerEvents: search && column.search
720
+ ? "auto"
721
+ : "none",
722
+ cursor: search && column.search
723
+ ? "default"
724
+ : "not-allowed",
725
+ }, children: _jsx(TextInput, { onChange: (e) => {
726
+ var _a;
727
+ let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
728
+ defaultSearchOperation ||
729
+ "contains";
730
+ if (e.target.value.includes("to")) {
731
+ searchType = "between";
732
+ }
733
+ else if (searchType === "between") {
734
+ searchType = "contains";
735
+ }
736
+ onSearch(column.key, e.target.value, searchType);
737
+ }, placeholder: "Search", extraWrapperStyle: {
738
+ background: column.search
739
+ ? "var(--background)"
740
+ : "var(--disabled-bg)",
741
+ }, value: ((_t = searchQueries[column.key]) === null || _t === void 0 ? void 0 : _t.text) ||
742
+ "", 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));
1071
766
  }
1072
767
  return null;
1073
768
  })] }));