@megha-ui/react 1.3.93 → 1.3.96

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 +1 -24
  2. package/dist/components/grid/utils/gridFilterDropdown.js +16 -92
  3. package/dist/components/grid/utils/newGridHeader.js +707 -402
  4. package/dist/components/grid/utils/textFilterDropdown.d.ts +1 -17
  5. package/dist/components/grid/utils/textFilterDropdown.js +13 -29
  6. package/package.json +1 -1
package/dist/components/grid/utils/newGridHeader.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import React, { useState, useEffect, useCallback, useMemo } from "react";
2
+ import React, { useState, useEffect, useCallback, useMemo, useRef, } from "react";
3
3
  import GridHeaderDropdown from "./gridHeaderDropdown";
4
4
  import { MdFilterList } from "react-icons/md";
5
5
  import GridFilterDropdown from "./gridFilterDropdown";
6
6
  import TextFilterDropdown from "./textFilterDropdown";
7
- import DateInput from "../../date-input";
8
7
  import TextInput from "../../text-input";
9
8
  import Checkbox from "../../checkbox";
9
+ import Dropdown from "../../dropdown";
10
10
  import { Tooltip } from "react-tooltip";
11
+ import { formatValue } from "../../../services/commonService";
11
12
  export const getColumnData = (columnKey, gridData, type, combinedColumns) => {
12
13
  const returnedValue = [
13
14
  ...new Set(gridData
@@ -96,6 +97,9 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
96
97
  setDropdownVisible("");
97
98
  setMenuPosition(null);
98
99
  setSearchOpsPosition(null);
100
+ if (!target.closest(".column-search-outside-wrapper")) {
101
+ setActiveSearchColumn(null);
102
+ }
99
103
  };
100
104
  document.addEventListener("click", closeMenu);
101
105
  return () => {
@@ -129,6 +133,31 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
129
133
  setSearchOpsPosition({ top, left });
130
134
  toggleDropdown(columnKey);
131
135
  };
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
+ };
132
161
  const menuOptions = [{ label: "Group by", groupBy: setGroupBy }];
133
162
  const searchOptions = [
134
163
  { label: "Contains", value: "contains", action: handleSearchOptionSelect },
@@ -213,6 +242,9 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
213
242
  }, [headerColumns, isFilterActive]);
214
243
  const [isResizing, setIsResizing] = useState(false);
215
244
  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);
216
248
  const handleMouseDown = (e, colIndex) => {
217
249
  if (!resizable)
218
250
  return;
@@ -246,13 +278,62 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
246
278
  setIsResizing(false);
247
279
  setResizeIndex(-1);
248
280
  };
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]);
249
330
  return (_jsxs(_Fragment, { children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { textTransform: "uppercase", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", position: "sticky", top: 0, zIndex: 1, backgroundColor: "var(--row-header-bg)" }), children: _jsx("div", { style: {
250
331
  display: "flex",
251
332
  alignItems: "center",
252
333
  width: "100%",
253
334
  height: "100%",
254
335
  }, children: _jsx(Checkbox, { selected: allRowsSelected, onChange: () => toggleSelectAll(), noLabel: true, wrapperClass: checkboxWrapper }) }) })), groupByKeys.map((_groupBy) => {
255
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58;
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;
256
337
  return (_jsx(_Fragment, { children: headerColumns.find((column) => column.key === _groupBy) && (_jsxs("div", { className: `${sortable &&
257
338
  ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.sortable)
258
339
  ? "sortable"
@@ -304,224 +385,386 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
304
385
  : "var(--row-header-text)",
305
386
  } }), dropdownVisible ===
306
387
  ((_m = headerColumns.find((column) => column.key === _groupBy)) === null || _m === void 0 ? void 0 : _m.key) &&
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) ||
384
- defaultSearchOperation ||
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;
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";
407
411
  }
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) ||
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) ||
682
+ 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) ||
418
698
  defaultSearchOperation ||
419
- "contains") ? (_jsx(TextInput, { placeholder: `Filter ${(_30 = headerColumns.find((column) => column.key === _groupBy)) === null || _30 === void 0 ? void 0 : _30.label}`, onKeyDown: (e) => {
420
- var _a;
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) => {
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) => {
439
734
  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)) }));
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)) }));
519
750
  }), headerColumns
520
751
  .filter((column) => !groupByKeys.includes(column.key))
521
752
  .map((column, colIndex) => {
522
753
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
523
754
  if (!column.hidden) {
524
755
  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
+ }));
525
768
  return (_jsx("div", { className: `${sortable && column.sortable ? "sortable" : ""} ${column.showMenu ? "menu-true" : "menu-false"} column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", wordBreak: widthMode === "auto" ? "break-all" : "unset", backgroundColor: "var(--row-header-bg)", borderTop: headerTopBorder, borderBottom: headerBottomBorder, flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, position: "sticky", top: 0, zIndex: 1 }), onMouseMove: (e) => handleMouseMove(e), onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: !actionsKey.split(",").includes(column.key) && (_jsxs(_Fragment, { children: [resizable && (_jsx("div", { style: {
526
769
  position: "absolute",
527
770
  width: "1px",
@@ -568,201 +811,263 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
568
811
  ? "#2377ba"
569
812
  : "var(--row-header-text)",
570
813
  } }), dropdownVisible === column.key &&
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"
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"
577
815
  ? !column.isArrayString
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) => {
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) => {
580
891
  var _a, _b;
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) => {
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) => {
590
979
  var _a, _b;
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) ||
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) ||
619
1004
  defaultSearchOperation ||
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) ||
680
- defaultSearchOperation ||
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) ||
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) ||
715
1024
  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));
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) ||
1034
+ 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));
766
1071
  }
767
1072
  return null;
768
1073
  })] }));