@megha-ui/react 1.2.797 → 1.2.799

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 (5) hide show
  1. package/dist/components/dropdown/index.js +1 -1
  2. package/dist/components/grid/index.js +70 -47
  3. package/dist/components/grid/utils/newGridHeader.d.ts +73 -0
  4. package/dist/components/grid/utils/newGridHeader.js +782 -0
  5. package/package.json +1 -1
package/dist/components/dropdown/index.js CHANGED
@@ -44,7 +44,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
44
44
  const parentRect = parent.getBoundingClientRect();
45
45
  const elementRect = element.getBoundingClientRect();
46
46
  const searchOptionRect = (_a = searchOptionRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
47
- return parentRect.height - elementRect.height - 4 - ((_b = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _b !== void 0 ? _b : 0);
47
+ return parentRect.height - elementRect.height - 8 - ((_b = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _b !== void 0 ? _b : 0);
48
48
  }
49
49
  parent = parent.parentElement;
50
50
  console.log({ parent });
package/dist/components/grid/index.js CHANGED
@@ -34,6 +34,7 @@ import Card from "../card";
34
34
  import { TbAntennaBarsOff, TbCalculator, TbCalculatorFilled, TbCalculatorOff, } from "react-icons/tb";
35
35
  import { TbCopy, TbCopyOff } from "react-icons/tb";
36
36
  import { formatValue } from "../../services/commonService";
37
+ import NewGridHeader from "./utils/newGridHeader";
37
38
  const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, defaultColumnsPerView = 200, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = "3rem", onRowClick, rowCount = false, rowBorder = true, showMenu = false, search = false, defaultSearchOperation = "contains", gridBorder = false, isLoading = false, rowTopBorder, rowBottomBorder, rowLeftBorder, rowRightBorder, headerBackground = "var(--row-header-bg)", headerTopBorder = "none", headerBottomBorder = "none", SettingIcon, ExportIcon, ignoredExportItems = ["action", "actions"], borderColor = "#dbdfe9", updateColumns, showHideAvailable = false, columnSearchOutside = false, multiSorting = false, exportAvailable = false, exportableFileName = "", groupBy, updateGroupBy, rowKey = "id", hlBorderColor = "black", selectedRow, selectedRowStyle = {
38
39
  borderLeft: "0.5rem solid #d9d9d9",
39
40
  }, defaultSort, noKeyEvents = true, customOperation, hasCustomOperation, globalSearch, headerDropdownIndex, draggable = false, resizable = false, updateGridData, widthUnits, checkboxWrapper, ignoreHugContent = false, isSummarise = false, isHideDups = false, isMultipleChips = false, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", ignoreClickKeys = "", saveAsNewView = false, handleSaveAsView, saveAsViewIcon, filterData, chipColor = "#ccc", withAscii = false, propSummariseKeys, SummariseIcon, summarizeColor = "black", isExpandable = false, expandedRow, extraRow, selectedCheckBox, setSelectedCheckbox, ignoreRowSelect, setOpenedRows, openedRows, getLoadingState, globalSearchOpen = false, updateFixedFilterValues = (fixedFilterValues) => {
@@ -1517,14 +1518,74 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
1517
1518
  .filter((item) => item !== chip)
1518
1519
  .join(","));
1519
1520
  }, children: "\u00D7" })] }, chip));
1520
- })] }))] }), _jsxs("div", { id: `grid-content`, style: {
1521
- display: "block",
1522
- border: gridBorder ? "1px solid #f0f0f0" : "none",
1523
- overflow: calculateVisible && gridGroupBy ? "visible" : "auto",
1524
- whiteSpace: "nowrap",
1525
- height: `calc(100% - ${removalHeight})`,
1526
- position: "relative",
1527
- }, onScroll: onScroll, ref: gridRef, children: [_jsx(GridHeader, { columns: gridColumns, headerRef: headerRef, resizable: resizable, sortable: sortable, search: search, combinedColumns: combinedColumns, defaultSearchOperation: defaultSearchOperation, showMenu: showMenu, sortQueries: sortQueries, onSort: handleSort, bulkSelect: bulkSelect, cellStyle: cellStyle, widthMode: widthMode, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, toggleSelectAll: () => toggleSelectAll(paginate ? paginatedData : sortedData, allRowsSelected), onSearch: handleSearch, searchQueries: searchQueries, headerBackground: headerBackground, headerTopBorder: headerTopBorder, headerBottomBorder: headerBottomBorder, groupBy: gridGroupBy, setGroupBy: (value) => {
1521
+ })] }))] }), _jsxs("div", { id: `grid-content`,
1522
+ // style={{
1523
+ // display: "block",
1524
+ // border: gridBorder ? "1px solid #f0f0f0" : "none",
1525
+ // overflow: calculateVisible && gridGroupBy ? "visible" : "auto",
1526
+ // whiteSpace: "nowrap",
1527
+ // height: `calc(100% - ${removalHeight})`,
1528
+ // position: "relative",
1529
+ // }}
1530
+ onScroll: onScroll, ref: gridRef, style: {
1531
+ display: "grid",
1532
+ gridTemplateColumns: gridColumns
1533
+ .map((_, index) => index > gridColumns.length - 2
1534
+ ? "minmax(max-content, 1fr)"
1535
+ : "max-content")
1536
+ .join(" "),
1537
+ }, children: [_jsxs("div", { className: "hidden", children: [_jsx(GridHeader, { columns: gridColumns, headerRef: headerRef, resizable: resizable, sortable: sortable, search: search, combinedColumns: combinedColumns, defaultSearchOperation: defaultSearchOperation, showMenu: showMenu, sortQueries: sortQueries, onSort: handleSort, bulkSelect: bulkSelect, cellStyle: cellStyle, widthMode: widthMode, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, toggleSelectAll: () => toggleSelectAll(paginate ? paginatedData : sortedData, allRowsSelected), onSearch: handleSearch, searchQueries: searchQueries, headerBackground: headerBackground, headerTopBorder: headerTopBorder, headerBottomBorder: headerBottomBorder, groupBy: gridGroupBy, setGroupBy: (value) => {
1538
+ let _gridGroupBy = gridGroupBy;
1539
+ _gridGroupBy = _gridGroupBy.split(",").includes(value)
1540
+ ? _gridGroupBy
1541
+ .split(",")
1542
+ .filter((item) => item && item !== value)
1543
+ .join(",")
1544
+ : [
1545
+ ..._gridGroupBy.split(",").filter((item) => item),
1546
+ value,
1547
+ ].join(",");
1548
+ setGridGroupBy(_gridGroupBy);
1549
+ updateGroupBy && updateGroupBy(_gridGroupBy);
1550
+ }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), hugLoading && (_jsx("div", { style: {
1551
+ position: "sticky",
1552
+ width: "100%",
1553
+ height: `calc(100% - ${(_a = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight}px)`,
1554
+ top: ((_b = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
1555
+ ? (_c = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight
1556
+ : 0,
1557
+ zIndex: 1,
1558
+ left: 0,
1559
+ display: "flex",
1560
+ alignItems: "center",
1561
+ justifyContent: "center",
1562
+ background: "var(--background)",
1563
+ }, children: _jsx(Loader, { size: 32 }) })), _jsx("div", { id: "table-body", children: gridGroupBy !== "" ? (_jsx(GroupedGridDetails, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy, widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey })) : (_jsxs(_Fragment, { children: [tableData.map((item, index) => {
1564
+ var _a, _b, _c, _d, _e, _f;
1565
+ if (paginate) {
1566
+ return (_jsx(GridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_a = item.id) === null || _a === void 0 ? void 0 : _a.value)
1567
+ ? selectedRowStyle
1568
+ : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_c = (_b = item.id) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : index)));
1569
+ }
1570
+ else if (index >= startIndex && index <= endIndex) {
1571
+ return (_jsx(GridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_d = item.id) === null || _d === void 0 ? void 0 : _d.value)
1572
+ ? selectedRowStyle
1573
+ : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_f = (_e = item.id) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : index)));
1574
+ }
1575
+ }), extraRow && extraRow, tableData.length === 0 && typeof extraRow === "undefined" && (_jsx("div", { style: {
1576
+ width: "100%",
1577
+ height: `calc(100% - ${(_d = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight}px)`,
1578
+ display: "flex",
1579
+ alignItems: "center",
1580
+ padding: "1rem 0",
1581
+ justifyContent: "center",
1582
+ }, children: "No Data available" }))] })) }), (rowCount || paginate || summariseAvailable) && (_jsx("div", { id: "table-footer", style: {
1583
+ position: "sticky",
1584
+ bottom: 0,
1585
+ background: "var(--row-header-bg)",
1586
+ }, children: summariseAvailable &&
1587
+ filteredData.length > 0 &&
1588
+ gridGroupBy === "" && (_jsx(SummariseDetails, { summariseKeys: summariseKeys, columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, actionsKey: actionsKey })) }))] }), _jsx(NewGridHeader, { columns: gridColumns, headerRef: headerRef, resizable: resizable, sortable: sortable, search: search, combinedColumns: combinedColumns, defaultSearchOperation: defaultSearchOperation, showMenu: showMenu, sortQueries: sortQueries, onSort: handleSort, bulkSelect: bulkSelect, cellStyle: cellStyle, widthMode: widthMode, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, toggleSelectAll: () => toggleSelectAll(paginate ? paginatedData : sortedData, allRowsSelected), onSearch: handleSearch, searchQueries: searchQueries, headerBackground: headerBackground, headerTopBorder: headerTopBorder, headerBottomBorder: headerBottomBorder, groupBy: gridGroupBy, setGroupBy: (value) => {
1528
1589
  let _gridGroupBy = gridGroupBy;
1529
1590
  _gridGroupBy = _gridGroupBy.split(",").includes(value)
1530
1591
  ? _gridGroupBy
@@ -1534,45 +1595,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
1534
1595
  : [..._gridGroupBy.split(",").filter((item) => item), value].join(",");
1535
1596
  setGridGroupBy(_gridGroupBy);
1536
1597
  updateGroupBy && updateGroupBy(_gridGroupBy);
1537
- }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), hugLoading && (_jsx("div", { style: {
1538
- position: "sticky",
1539
- width: "100%",
1540
- height: `calc(100% - ${(_a = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight}px)`,
1541
- top: ((_b = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
1542
- ? (_c = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight
1543
- : 0,
1544
- zIndex: 1,
1545
- left: 0,
1546
- display: "flex",
1547
- alignItems: "center",
1548
- justifyContent: "center",
1549
- background: "var(--background)",
1550
- }, children: _jsx(Loader, { size: 32 }) })), _jsx("div", { id: "table-body", children: gridGroupBy !== "" ? (_jsx(GroupedGridDetails, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy, widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey })) : (_jsxs(_Fragment, { children: [tableData.map((item, index) => {
1551
- var _a, _b, _c, _d, _e, _f;
1552
- if (paginate) {
1553
- return (_jsx(GridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_a = item.id) === null || _a === void 0 ? void 0 : _a.value)
1554
- ? selectedRowStyle
1555
- : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_c = (_b = item.id) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : index)));
1556
- }
1557
- else if (index >= startIndex && index <= endIndex) {
1558
- return (_jsx(GridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_d = item.id) === null || _d === void 0 ? void 0 : _d.value)
1559
- ? selectedRowStyle
1560
- : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_f = (_e = item.id) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : index)));
1561
- }
1562
- }), extraRow && extraRow, tableData.length === 0 && typeof extraRow === "undefined" && (_jsx("div", { style: {
1563
- width: "100%",
1564
- height: `calc(100% - ${(_d = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight}px)`,
1565
- display: "flex",
1566
- alignItems: "center",
1567
- padding: "1rem 0",
1568
- justifyContent: "center",
1569
- }, children: "No Data available" }))] })) }), (rowCount || paginate || summariseAvailable) && (_jsx("div", { id: "table-footer", style: {
1570
- position: "sticky",
1571
- bottom: 0,
1572
- background: "var(--row-header-bg)",
1573
- }, children: summariseAvailable &&
1574
- filteredData.length > 0 &&
1575
- gridGroupBy === "" && (_jsx(SummariseDetails, { summariseKeys: summariseKeys, columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, actionsKey: actionsKey })) }))] }), paginate && gridGroupBy === "" && (_jsxs("div", { id: "pagination", style: {
1598
+ }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions })] }), paginate && gridGroupBy === "" && (_jsxs("div", { id: "pagination", style: {
1576
1599
  display: "flex",
1577
1600
  minHeight: "2rem",
1578
1601
  alignItems: "center",
package/dist/components/grid/utils/newGridHeader.d.ts ADDED
@@ -0,0 +1,73 @@
1
+ import React from "react";
2
+ import { Column, DataRow } from "../types/grid";
3
+ interface GridHeaderProps {
4
+ columns: Column[];
5
+ sortable: boolean;
6
+ search?: boolean;
7
+ resizable?: boolean;
8
+ defaultSearchOperation?: string;
9
+ sortQueries: {
10
+ [key: string]: "asc" | "desc";
11
+ };
12
+ onSort: (column: Column | null, order?: "asc" | "desc") => void;
13
+ bulkSelect?: boolean;
14
+ allRowsSelected: boolean;
15
+ someRowsSelected: boolean;
16
+ toggleSelectAll: () => void;
17
+ cellStyle: React.CSSProperties;
18
+ widthMode: "auto" | "custom";
19
+ rowHeight?: number;
20
+ headerRef: React.RefObject<HTMLDivElement>;
21
+ showMenu: boolean;
22
+ searchQueries: Record<string, {
23
+ text: string;
24
+ type: string;
25
+ }>;
26
+ onSearch: (key: string, value: string, type: string) => void;
27
+ headerBackground?: string;
28
+ headerTopBorder?: string;
29
+ headerBottomBorder?: string;
30
+ groupBy: string;
31
+ updateGridColumns?: (data: Column[]) => void;
32
+ setGridColumns?: (data: Column[]) => void;
33
+ setGroupBy: (value: string) => void;
34
+ headerDropdownIndex?: number;
35
+ widthUnits?: string;
36
+ textFilterLabel?: string;
37
+ gridData: DataRow[];
38
+ checkboxWrapper?: string;
39
+ onFilter: (data: {
40
+ [key: string]: string[];
41
+ }, key: string) => void;
42
+ setUniqueSearch: any;
43
+ uniqueSearch: {
44
+ [key: string]: (string | number)[];
45
+ };
46
+ hugColumnWidths: {
47
+ [key: string]: string;
48
+ };
49
+ menuVisible: string;
50
+ setMenuVisible: any;
51
+ dropdownVisible: string;
52
+ setDropdownVisible: any;
53
+ actionsKey?: string;
54
+ columnSearchOutside: boolean;
55
+ locale?: string;
56
+ formatOptions?: any;
57
+ combinedColumns?: {
58
+ name: string;
59
+ key: string;
60
+ separator: string;
61
+ columns: string[];
62
+ sortOn: string[];
63
+ }[];
64
+ }
65
+ export declare const getColumnData: (columnKey: string, gridData: DataRow[], type: string, combinedColumns: {
66
+ name: string;
67
+ key: string;
68
+ separator: string;
69
+ columns: string[];
70
+ sortOn: string[];
71
+ }[]) => (string | number)[];
72
+ declare const _default: React.NamedExoticComponent<GridHeaderProps>;
73
+ export default _default;
package/dist/components/grid/utils/newGridHeader.js ADDED
@@ -0,0 +1,782 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import React, { useState, useEffect, useCallback, useMemo } from "react";
3
+ import GridHeaderDropdown from "./gridHeaderDropdown";
4
+ import { MdFilterList } from "react-icons/md";
5
+ import GridFilterDropdown from "./gridFilterDropdown";
6
+ import TextFilterDropdown from "./textFilterDropdown";
7
+ import DateInput from "../../date-input";
8
+ import TextInput from "../../text-input";
9
+ import Checkbox from "../../checkbox";
10
+ import { Tooltip } from "react-tooltip";
11
+ export const getColumnData = (columnKey, gridData, type, combinedColumns) => {
12
+ const returnedValue = [
13
+ ...new Set(gridData
14
+ .filter((item) => item[columnKey] && typeof item[columnKey].value !== "undefined")
15
+ .map((data) => data[columnKey] &&
16
+ data[columnKey].value &&
17
+ typeof data[columnKey].value === "string"
18
+ ? /^[-+]?\d*\.?\d+$/.test(data[columnKey].value.trim())
19
+ ? parseInt(data[columnKey].value)
20
+ : data[columnKey].value
21
+ : data[columnKey].value)),
22
+ ];
23
+ return returnedValue.sort((a, b) => {
24
+ let aValue = a
25
+ ? type === "number" || type === "currency"
26
+ ? parseFloat(a === null || a === void 0 ? void 0 : a.toString())
27
+ : a === null || a === void 0 ? void 0 : a.toString().toUpperCase()
28
+ : type === "number" || type === "currency"
29
+ ? 0
30
+ : "";
31
+ let bValue = b
32
+ ? type === "number" || type === "currency"
33
+ ? parseFloat(b === null || b === void 0 ? void 0 : b.toString())
34
+ : b === null || b === void 0 ? void 0 : b.toString().toUpperCase()
35
+ : type === "number" || type === "currency"
36
+ ? 0
37
+ : "";
38
+ if (combinedColumns && (combinedColumns === null || combinedColumns === void 0 ? void 0 : combinedColumns.length) > 0) {
39
+ const combinedColumn = combinedColumns.find((col) => col.key === columnKey);
40
+ if (combinedColumn) {
41
+ const { columns: combinedCols, separator, sortOn } = combinedColumn;
42
+ if (sortOn) {
43
+ const index = combinedCols.findIndex((colKey) => colKey === sortOn[0]);
44
+ const aVals = ((aValue === null || aValue === void 0 ? void 0 : aValue.toString()) || "").split(separator);
45
+ const bVals = ((bValue === null || bValue === void 0 ? void 0 : bValue.toString()) || "").split(separator);
46
+ aValue = aVals[index] || "";
47
+ bValue = bVals[index] || "";
48
+ if (parseFloat(aValue).toString() !== "NaN" &&
49
+ parseFloat(bValue).toString() !== "NaN") {
50
+ aValue = parseFloat(aValue);
51
+ bValue = parseFloat(bValue);
52
+ }
53
+ }
54
+ }
55
+ }
56
+ else if (columnKey !== "id" &&
57
+ aValue.toString().includes("-") &&
58
+ bValue.toString().includes("-")) {
59
+ aValue = aValue.toString().split("-")[0];
60
+ bValue = bValue.toString().split("-")[0];
61
+ aValue = isNaN(parseFloat(aValue)) ? aValue : parseFloat(aValue);
62
+ bValue = isNaN(parseFloat(bValue)) ? bValue : parseFloat(bValue);
63
+ }
64
+ if (aValue < bValue)
65
+ return -1;
66
+ if (aValue > bValue)
67
+ return 1;
68
+ return 0;
69
+ });
70
+ };
71
+ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resizable = false, defaultSearchOperation, sortQueries, onSort, bulkSelect, allRowsSelected, someRowsSelected, toggleSelectAll, cellStyle, widthMode, rowHeight, headerRef, showMenu, headerBackground, headerTopBorder, headerBottomBorder, groupBy, setGroupBy, updateGridColumns, setGridColumns, headerDropdownIndex, widthUnits, textFilterLabel = "Text Filter", gridData, checkboxWrapper, onFilter, setUniqueSearch, uniqueSearch, hugColumnWidths, menuVisible, setMenuVisible, dropdownVisible, setDropdownVisible, actionsKey = "actions", columnSearchOutside, locale, formatOptions, combinedColumns, }) => {
72
+ const [menuPosition, setMenuPosition] = useState(null);
73
+ const [searchOpsPosition, setSearchOpsPosition] = useState(null);
74
+ const [headerColumns, setHeaderColumns] = useState([]);
75
+ const [resizeIndex, setResizeIndex] = useState(-1);
76
+ // Support composite groupBy (e.g., "colA+colB,colC") by flattening to keys
77
+ const groupByKeys = useMemo(() => (groupBy || "")
78
+ .split(",")
79
+ .filter((g) => g)
80
+ .flatMap((g) => g.split("+").filter((k) => k)), [groupBy]);
81
+ const handleMenuClick = (e, columnKey) => {
82
+ e.stopPropagation();
83
+ const rect = e.currentTarget.getBoundingClientRect();
84
+ const top = rect.bottom + window.scrollY;
85
+ const left = rect.left + window.scrollX;
86
+ setMenuPosition({ top, left });
87
+ setMenuVisible((prev) => prev === columnKey ? "" : columnKey);
88
+ };
89
+ useEffect(() => {
90
+ const closeMenu = (e) => {
91
+ const target = e.target;
92
+ if (target.closest(".filter-icon")) {
93
+ return;
94
+ }
95
+ setMenuVisible("");
96
+ setDropdownVisible("");
97
+ setMenuPosition(null);
98
+ setSearchOpsPosition(null);
99
+ };
100
+ document.addEventListener("click", closeMenu);
101
+ return () => {
102
+ document.removeEventListener("click", closeMenu);
103
+ };
104
+ }, []);
105
+ useEffect(() => {
106
+ setHeaderColumns(columns);
107
+ }, [columns]);
108
+ const toggleDropdown = (columnKey) => {
109
+ setDropdownVisible((prev) => (prev === columnKey ? "" : columnKey));
110
+ };
111
+ const handleSearchOptionSelect = (columnKey, optionValue) => {
112
+ var _a;
113
+ const column = columns.find((item) => item.key === columnKey);
114
+ let currentQuery = (_a = searchQueries[columnKey]) === null || _a === void 0 ? void 0 : _a.text;
115
+ if (column && column.dataType === "date") {
116
+ if (optionValue === "between") {
117
+ currentQuery = "to";
118
+ }
119
+ else {
120
+ currentQuery = "";
121
+ }
122
+ }
123
+ onSearch(columnKey, currentQuery || "", optionValue);
124
+ };
125
+ const handleFilterIconClick = (e, columnKey) => {
126
+ const rect = e.currentTarget.getBoundingClientRect();
127
+ const top = rect.bottom + window.scrollY;
128
+ const left = rect.left + window.scrollX;
129
+ setSearchOpsPosition({ top, left });
130
+ toggleDropdown(columnKey);
131
+ };
132
+ const menuOptions = [{ label: "Group by", groupBy: setGroupBy }];
133
+ const searchOptions = [
134
+ { label: "Contains", value: "contains", action: handleSearchOptionSelect },
135
+ {
136
+ label: "Does Not Contain",
137
+ value: "doesNotContain",
138
+ action: handleSearchOptionSelect,
139
+ },
140
+ { label: "Equals", value: "equals", action: handleSearchOptionSelect },
141
+ {
142
+ label: "Does Not Equal",
143
+ value: "doesNotEqual",
144
+ action: handleSearchOptionSelect,
145
+ },
146
+ { label: "After", value: "after", action: handleSearchOptionSelect },
147
+ { label: "Before", value: "before", action: handleSearchOptionSelect },
148
+ { label: "Greater than", value: "gt", action: handleSearchOptionSelect },
149
+ {
150
+ label: "Greater than or equal to",
151
+ value: "gte",
152
+ action: handleSearchOptionSelect,
153
+ },
154
+ { label: "Lesser than", value: "lt", action: handleSearchOptionSelect },
155
+ {
156
+ label: "Lesser than or equals to",
157
+ value: "lte",
158
+ action: handleSearchOptionSelect,
159
+ },
160
+ { label: "Between", value: "between", action: handleSearchOptionSelect },
161
+ {
162
+ label: "Starts With",
163
+ value: "startsWith",
164
+ action: handleSearchOptionSelect,
165
+ },
166
+ { label: "Ends With", value: "endsWith", action: handleSearchOptionSelect },
167
+ { label: "Blank", value: "blank", action: handleSearchOptionSelect },
168
+ { label: "Not Blank", value: "notBlank", action: handleSearchOptionSelect },
169
+ ];
170
+ const textTypeSearch = [
171
+ "contains",
172
+ "doesNotContain",
173
+ "doesNotEqual",
174
+ "equals",
175
+ "startsWith",
176
+ "endsWith",
177
+ "blank",
178
+ "notBlank",
179
+ ];
180
+ const dateTypeSearch = [
181
+ "contains",
182
+ "doesNotContain",
183
+ "doesNotEqual",
184
+ "equals",
185
+ "after",
186
+ "before",
187
+ "between",
188
+ "blank",
189
+ "notBlank",
190
+ ];
191
+ const numberTypeSearch = [
192
+ "contains",
193
+ "doesNotContain",
194
+ "doesNotEqual",
195
+ "equals",
196
+ "gt",
197
+ "lt",
198
+ "gte",
199
+ "lte",
200
+ "between",
201
+ "blank",
202
+ "notBlank",
203
+ ];
204
+ const isFilterActive = useCallback((columnKey) => {
205
+ const query = searchQueries[columnKey];
206
+ return (query && (query.text !== "" || query.type !== defaultSearchOperation));
207
+ }, [searchQueries]);
208
+ const activeFilters = useMemo(() => {
209
+ return headerColumns.reduce((acc, column) => {
210
+ acc[column.key] = isFilterActive(column.key);
211
+ return acc;
212
+ }, {});
213
+ }, [headerColumns, isFilterActive]);
214
+ const [isResizing, setIsResizing] = useState(false);
215
+ const [startX, setStartX] = useState(0); // Cursor position when resizing starts
216
+ const handleMouseDown = (e, colIndex) => {
217
+ if (!resizable)
218
+ return;
219
+ setIsResizing(true);
220
+ setStartX(e.clientX); // Store the initial cursor position
221
+ setResizeIndex(colIndex);
222
+ };
223
+ const handleMouseMove = (e) => {
224
+ if (!isResizing)
225
+ return;
226
+ const delta = e.clientX - startX; // Difference between current and starting cursor position
227
+ const updatedColumns = headerColumns.map((col, index) => {
228
+ var _a;
229
+ if (index === resizeIndex) {
230
+ const newCol = Object.assign({}, col);
231
+ if (widthUnits === "percentage") {
232
+ }
233
+ else {
234
+ newCol.width = (newCol === null || newCol === void 0 ? void 0 : newCol.width)
235
+ ? `${Math.max(parseFloat((_a = newCol === null || newCol === void 0 ? void 0 : newCol.width) === null || _a === void 0 ? void 0 : _a.toString()) + delta, 50)}px`
236
+ : `${Math.max(parseFloat(hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${resizeIndex}`]) + delta, 50)}px`;
237
+ }
238
+ return newCol;
239
+ }
240
+ return col;
241
+ });
242
+ setGridColumns && setGridColumns(updatedColumns);
243
+ setStartX(e.clientX); // Update the starting position for the next movement
244
+ };
245
+ const handleMouseUp = () => {
246
+ setIsResizing(false);
247
+ setResizeIndex(-1);
248
+ };
249
+ return (_jsxs(_Fragment, { children: [bulkSelect && (_jsx("div", { style: Object.assign(Object.assign({}, cellStyle), { textTransform: "uppercase", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis" }), children: _jsx(Checkbox, { selected: allRowsSelected, onChange: () => toggleSelectAll(), noLabel: true, wrapperClass: checkboxWrapper }) })), groupByKeys.map((_groupBy) => {
250
+ 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;
251
+ return (_jsx(_Fragment, { children: headerColumns.find((column) => column.key === _groupBy) && (_jsxs("div", { className: `${sortable &&
252
+ ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.sortable)
253
+ ? "sortable"
254
+ : ""} ${((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.showMenu)
255
+ ? "menu-true"
256
+ : "menu-false"} column index-${(_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key}`, style: Object.assign(Object.assign({}, cellStyle), { position: "relative", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", width: widthMode === "auto"
257
+ ? "auto"
258
+ : ((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.width)
259
+ ? `calc(${(_e = headerColumns.find((column) => column.key === _groupBy)) === null || _e === void 0 ? void 0 : _e.width} + 4rem)`
260
+ : (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${(_f = headerColumns.find((column) => column.key === _groupBy)) === null || _f === void 0 ? void 0 : _f.key}`])
261
+ ? `calc(${hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${(_g = headerColumns.find((column) => column.key === _groupBy)) === null || _g === void 0 ? void 0 : _g.key}`]} + 4rem)`
262
+ : "fit-content", 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 }), onMouseMove: (e) => handleMouseMove(e), onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: [_jsxs("div", { style: {
263
+ display: "flex",
264
+ alignItems: "center",
265
+ padding: "0 0.3rem",
266
+ justifyContent: "space-between",
267
+ cursor: ((_h = headerColumns.find((column) => column.key === _groupBy)) === null || _h === void 0 ? void 0 : _h.sortable)
268
+ ? "pointer"
269
+ : "",
270
+ }, onClick: () => {
271
+ var _a;
272
+ return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.sortable) &&
273
+ onSort(headerColumns.find((column) => column.key === _groupBy) ||
274
+ null);
275
+ }, children: [_jsxs("div", { style: {
276
+ display: "flex",
277
+ alignItems: "center",
278
+ }, children: [_jsx("span", { children: (_j = headerColumns.find((column) => column.key === _groupBy)) === null || _j === void 0 ? void 0 : _j.label }), sortable &&
279
+ ((_k = headerColumns.find((column) => column.key === _groupBy)) === null || _k === void 0 ? void 0 : _k.sortable) && (_jsx("span", { style: {
280
+ visibility: Object.keys(sortQueries).includes(((_l = headerColumns.find((column) => column.key === _groupBy)) === null || _l === void 0 ? void 0 : _l.key) || "")
281
+ ? "visible"
282
+ : "hidden",
283
+ }, children: sortQueries[((_m = headerColumns.find((column) => column.key === _groupBy)) === null || _m === void 0 ? void 0 : _m.key) || ""] === "asc"
284
+ ? " ↑"
285
+ : " ↓" }))] }), _jsx("div", { style: { display: "flex", alignItems: "center" }, children: ((_o = headerColumns.find((column) => column.key === _groupBy)) === null || _o === void 0 ? void 0 : _o.filter) && (_jsxs("div", { style: {
286
+ alignItems: "center",
287
+ marginLeft: 6,
288
+ position: "relative",
289
+ cursor: "pointer",
290
+ }, className: "filter-icon", onClick: (e) => {
291
+ var _a;
292
+ e.preventDefault();
293
+ e.stopPropagation();
294
+ handleFilterIconClick(e, ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
295
+ }, children: [activeFilters[((_p = headerColumns.find((column) => column.key === _groupBy)) === null || _p === void 0 ? void 0 : _p.key) || ""] && (_jsx("span", { style: {
296
+ backgroundColor: "#2377ba",
297
+ width: "0.5rem",
298
+ height: "0.5rem",
299
+ position: "absolute",
300
+ right: 0,
301
+ display: "inline-block",
302
+ } })), _jsx(MdFilterList, { size: 18, style: {
303
+ color: activeFilters[((_q = headerColumns.find((column) => column.key === _groupBy)) === null || _q === void 0 ? void 0 : _q.key) || ""]
304
+ ? "#2377ba"
305
+ : "var(--row-header-text)",
306
+ } }), dropdownVisible ===
307
+ ((_r = headerColumns.find((column) => column.key === _groupBy)) === null || _r === void 0 ? void 0 : _r.key) &&
308
+ (((_s = headerColumns.find((column) => column.key === _groupBy)) === null || _s === void 0 ? void 0 : _s.uniqueDrop) ? (_jsx(GridFilterDropdown, { locale: locale, formatOptions: formatOptions, columnType: (_u = (_t = headerColumns.find((column) => column.key === _groupBy)) === null || _t === void 0 ? void 0 : _t.dataType) !== null && _u !== void 0 ? _u : "string", columnIndex: -1, searchable: ((_v = headerColumns.find((column) => column.key === _groupBy)) === null || _v === void 0 ? void 0 : _v.search) || false, headerDropdownIndex: headerDropdownIndex, searchInput: (search &&
309
+ ((_w = headerColumns.find((column) => column.key === _groupBy)) === null || _w === void 0 ? void 0 : _w.search) && (_jsx("div", { style: {
310
+ marginTop: "0.5rem",
311
+ padding: "0.5rem",
312
+ width: "100%",
313
+ pointerEvents: search &&
314
+ ((_x = headerColumns.find((column) => column.key === _groupBy)) === null || _x === void 0 ? void 0 : _x.search)
315
+ ? "auto"
316
+ : "none",
317
+ cursor: search &&
318
+ ((_y = headerColumns.find((column) => column.key === _groupBy)) === null || _y === void 0 ? void 0 : _y.search)
319
+ ? "default"
320
+ : "not-allowed",
321
+ }, children: _jsx(TextInput, { onChange: (e) => {
322
+ var _a, _b, _c;
323
+ 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) ||
324
+ defaultSearchOperation ||
325
+ "contains";
326
+ if (e.target.value.includes("to")) {
327
+ searchType = "between";
328
+ }
329
+ else if (searchType === "between") {
330
+ searchType = "contains";
331
+ }
332
+ onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
333
+ }, placeholder: "Search", extraWrapperStyle: {
334
+ background: ((_z = headerColumns.find((column) => column.key === _groupBy)) === null || _z === void 0 ? void 0 : _z.search)
335
+ ? "var(--background)"
336
+ : "var(--disabled-bg)",
337
+ }, value: ((_1 = searchQueries[((_0 = headerColumns.find((column) => column.key === _groupBy)) === null || _0 === void 0 ? void 0 : _0.key) || ""]) === null || _1 === void 0 ? void 0 : _1.text) || "", disabled: !((_2 = headerColumns.find((column) => column.key === _groupBy)) === null || _2 === void 0 ? void 0 : _2.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))) ||
338
+ 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) => {
339
+ var _a, _b;
340
+ return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number"
341
+ ? numberTypeSearch.includes(item.value)
342
+ : ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "date"
343
+ ? dateTypeSearch.includes(item.value)
344
+ : textTypeSearch.includes(item.value);
345
+ }), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: ((_3 = headerColumns.find((column) => column.key === _groupBy)) === null || _3 === void 0 ? void 0 : _3.key) || "", columnData: 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 : []), searchElement: _jsx("div", { id: "search-input", children: ((_7 = headerColumns.find((column) => column.key === _groupBy)) === null || _7 === void 0 ? void 0 : _7.dataType) === "date" ? (((_9 = searchQueries[((_8 = headerColumns.find((column) => column.key === _groupBy)) === null || _8 === void 0 ? void 0 : _8.key) || ""]) === null || _9 === void 0 ? void 0 : _9.type) === "between" ? (_jsxs(_Fragment, { children: [_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: `From date`, onChange: (value) => {
346
+ var _a, _b, _c, _d, _e;
347
+ 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) => {
348
+ if (index === 0) {
349
+ return value;
350
+ }
351
+ return item;
352
+ }).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) ||
353
+ defaultSearchOperation ||
354
+ "contains");
355
+ } }), _jsx(DateInput, { value: (_13 = searchQueries[((_12 = headerColumns.find((column) => column.key === _groupBy)) === null || _12 === void 0 ? void 0 : _12.key) || ""]) === null || _13 === void 0 ? void 0 : _13.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
356
+ var _a, _b, _c, _d, _e;
357
+ 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) => {
358
+ if (index === 1) {
359
+ return value;
360
+ }
361
+ return item;
362
+ }).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) ||
363
+ defaultSearchOperation ||
364
+ "contains");
365
+ } })] })) : (_jsx(DateInput, { 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.split("to")[0], placeholder: `asd Filter ${(_16 = headerColumns.find((column) => column.key === _groupBy)) === null || _16 === void 0 ? void 0 : _16.label}`, onChange: (value) => {
366
+ var _a, _b, _c;
367
+ 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) ||
368
+ defaultSearchOperation ||
369
+ "contains");
370
+ } }))) : (_jsx(TextInput, { placeholder: `Filter ${(_17 = headerColumns.find((column) => column.key === _groupBy)) === null || _17 === void 0 ? void 0 : _17.label}`, onKeyDown: (e) => {
371
+ var _a;
372
+ if (e.key === "Enter") {
373
+ toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
374
+ }
375
+ }, onChange: (e) => {
376
+ var _a, _b, _c;
377
+ 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) ||
378
+ defaultSearchOperation ||
379
+ "contains");
380
+ }, value: ((_19 = searchQueries[((_18 = headerColumns.find((column) => column.key === _groupBy)) === null || _18 === void 0 ? void 0 : _18.key) || ""]) === null || _19 === void 0 ? void 0 : _19.text) || "", extraWrapperStyle: {
381
+ visibility: ((_20 = headerColumns.find((column) => column.key === _groupBy)) === null || _20 === void 0 ? void 0 : _20.search)
382
+ ? "visible"
383
+ : "hidden",
384
+ }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, textFilterLabel: textFilterLabel, activeSearchType: ((_22 = searchQueries[((_21 = headerColumns.find((column) => column.key === _groupBy)) === null || _21 === void 0 ? void 0 : _21.key) || ""]) === null || _22 === void 0 ? void 0 : _22.type) ||
385
+ defaultSearchOperation ||
386
+ "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) => {
387
+ var _a, _b;
388
+ return ((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.dataType) === "number"
389
+ ? numberTypeSearch.includes(item.value)
390
+ : ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "date"
391
+ ? dateTypeSearch.includes(item.value)
392
+ : textTypeSearch.includes(item.value);
393
+ }), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: ((_23 = headerColumns.find((column) => column.key === _groupBy)) === null || _23 === void 0 ? void 0 : _23.key) || "", searchable: ((_24 = headerColumns.find((column) => column.key === _groupBy)) === null || _24 === void 0 ? void 0 : _24.search) || false, searchElement: _jsx("div", { id: "search-input", children: ((_25 = headerColumns.find((column) => column.key === _groupBy)) === null || _25 === void 0 ? void 0 : _25.dataType) === "date" ? (((_27 = searchQueries[((_26 = headerColumns.find((column) => column.key === _groupBy)) === null || _26 === void 0 ? void 0 : _26.key) || ""]) === null || _27 === void 0 ? void 0 : _27.type) === "between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_29 = searchQueries[((_28 = headerColumns.find((column) => column.key === _groupBy)) === null || _28 === void 0 ? void 0 : _28.key) || ""]) === null || _29 === void 0 ? void 0 : _29.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
394
+ var _a, _b, _c, _d, _e;
395
+ 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) => {
396
+ if (index === 0) {
397
+ return value;
398
+ }
399
+ return item;
400
+ }).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) ||
401
+ defaultSearchOperation ||
402
+ "contains");
403
+ } }), _jsx("div", { style: { marginTop: "0.5rem" }, children: _jsx(DateInput, { value: (_31 = searchQueries[((_30 = headerColumns.find((column) => column.key === _groupBy)) === null || _30 === void 0 ? void 0 : _30.key) || ""]) === null || _31 === void 0 ? void 0 : _31.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
404
+ var _a, _b, _c, _d, _e;
405
+ 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) => {
406
+ if (index === 1) {
407
+ return value;
408
+ }
409
+ return item;
410
+ }).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) ||
411
+ defaultSearchOperation ||
412
+ "contains");
413
+ } }) })] })) : [
414
+ "contains",
415
+ "doesNotContain",
416
+ "blank",
417
+ "notBlank",
418
+ ].includes(((_33 = searchQueries[((_32 = headerColumns.find((column) => column.key === _groupBy)) === null || _32 === void 0 ? void 0 : _32.key) || ""]) === null || _33 === void 0 ? void 0 : _33.type) ||
419
+ defaultSearchOperation ||
420
+ "contains") ? (_jsx(TextInput, { placeholder: `Filter ${(_34 = headerColumns.find((column) => column.key === _groupBy)) === null || _34 === void 0 ? void 0 : _34.label}`, onKeyDown: (e) => {
421
+ var _a;
422
+ if (e.key === "Enter") {
423
+ toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
424
+ }
425
+ }, onChange: (e) => {
426
+ var _a, _b, _c;
427
+ 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) ||
428
+ defaultSearchOperation ||
429
+ "contains");
430
+ }, value: ((_36 = searchQueries[((_35 = headerColumns.find((column) => column.key === _groupBy)) === null || _35 === void 0 ? void 0 : _35.key) || ""]) === null || _36 === void 0 ? void 0 : _36.text) || "", extraWrapperStyle: {
431
+ visibility: ((_37 = headerColumns.find((column) => column.key === _groupBy)) === null || _37 === void 0 ? void 0 : _37.search)
432
+ ? "visible"
433
+ : "hidden",
434
+ }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) : (_jsx(DateInput, { 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.split("to")[0], placeholder: `asd Filter ${(_40 = headerColumns.find((column) => column.key === _groupBy)) === null || _40 === void 0 ? void 0 : _40.label}`, onChange: (value) => {
435
+ var _a, _b, _c;
436
+ 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) ||
437
+ defaultSearchOperation ||
438
+ "contains");
439
+ } }))) : (_jsx(TextInput, { placeholder: `Filter ${(_41 = headerColumns.find((column) => column.key === _groupBy)) === null || _41 === void 0 ? void 0 : _41.label}`, onKeyDown: (e) => {
440
+ var _a;
441
+ if (e.key === "Enter") {
442
+ toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
443
+ }
444
+ }, onChange: (e) => {
445
+ var _a, _b, _c;
446
+ 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) ||
447
+ defaultSearchOperation ||
448
+ "contains");
449
+ }, value: ((_43 = searchQueries[((_42 = headerColumns.find((column) => column.key === _groupBy)) === null || _42 === void 0 ? void 0 : _42.key) || ""]) === null || _43 === void 0 ? void 0 : _43.text) || "", extraWrapperStyle: {
450
+ visibility: ((_44 = headerColumns.find((column) => column.key === _groupBy)) === null || _44 === void 0 ? void 0 : _44.search)
451
+ ? "visible"
452
+ : "hidden",
453
+ }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), activeSearchType: ((_46 = searchQueries[((_45 = headerColumns.find((column) => column.key === _groupBy)) === null || _45 === void 0 ? void 0 : _45.key) || ""]) === null || _46 === void 0 ? void 0 : _46.type) ||
454
+ defaultSearchOperation ||
455
+ "contains", searchInput: (search &&
456
+ ((_47 = headerColumns.find((column) => column.key === _groupBy)) === null || _47 === void 0 ? void 0 : _47.search) && (_jsx("div", { style: {
457
+ marginTop: "0.5rem",
458
+ padding: "0.5rem",
459
+ width: "100%",
460
+ pointerEvents: search &&
461
+ ((_48 = headerColumns.find((column) => column.key === _groupBy)) === null || _48 === void 0 ? void 0 : _48.search)
462
+ ? "auto"
463
+ : "none",
464
+ cursor: search &&
465
+ ((_49 = headerColumns.find((column) => column.key === _groupBy)) === null || _49 === void 0 ? void 0 : _49.search)
466
+ ? "default"
467
+ : "not-allowed",
468
+ }, children: _jsx(TextInput, { onChange: (e) => {
469
+ var _a, _b, _c;
470
+ 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) ||
471
+ defaultSearchOperation ||
472
+ "contains";
473
+ if (e.target.value.includes("to")) {
474
+ searchType = "between";
475
+ }
476
+ else if (searchType === "between") {
477
+ searchType = "contains";
478
+ }
479
+ onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
480
+ }, placeholder: "Search", extraWrapperStyle: {
481
+ background: ((_50 = headerColumns.find((column) => column.key === _groupBy)) === null || _50 === void 0 ? void 0 : _50.search)
482
+ ? "var(--background)"
483
+ : "var(--disabled-bg)",
484
+ }, value: ((_52 = searchQueries[((_51 = headerColumns.find((column) => column.key === _groupBy)) === null || _51 === void 0 ? void 0 : _51.key) || ""]) === null || _52 === void 0 ? void 0 : _52.text) || "", disabled: !((_53 = headerColumns.find((column) => column.key === _groupBy)) === null || _53 === void 0 ? void 0 : _53.search), height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }) }))) ||
485
+ null })))] })) })] }), search && columnSearchOutside && (_jsx("div", { style: {
486
+ marginTop: "0.5rem",
487
+ width: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${(_54 = headerColumns.find((column) => column.key === _groupBy)) === null || _54 === void 0 ? void 0 : _54.key}`]) ||
488
+ widthMode === "auto" ||
489
+ ((_55 = headerColumns.find((column) => column.key === _groupBy)) === null || _55 === void 0 ? void 0 : _55.width)
490
+ ? "100%"
491
+ : "100px",
492
+ pointerEvents: search &&
493
+ ((_56 = headerColumns.find((column) => column.key === _groupBy)) === null || _56 === void 0 ? void 0 : _56.search)
494
+ ? "auto"
495
+ : "none",
496
+ cursor: search &&
497
+ ((_57 = headerColumns.find((column) => column.key === _groupBy)) === null || _57 === void 0 ? void 0 : _57.search)
498
+ ? "default"
499
+ : "not-allowed",
500
+ }, children: _jsx(TextInput, { onKeyDown: (e) => {
501
+ var _a;
502
+ if (e.key === "Enter") {
503
+ toggleDropdown(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
504
+ }
505
+ }, onChange: (e) => {
506
+ var _a, _b, _c;
507
+ 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) ||
508
+ defaultSearchOperation ||
509
+ "contains";
510
+ if (e.target.value.includes("to")) {
511
+ searchType = "between";
512
+ }
513
+ else if (searchType === "between") {
514
+ searchType = "contains";
515
+ }
516
+ onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
517
+ }, 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), extraWrapperStyle: {
518
+ background: ((_61 = headerColumns.find((column) => column.key === _groupBy)) === null || _61 === void 0 ? void 0 : _61.search)
519
+ ? "var(--background)"
520
+ : "var(--disabled-bg)",
521
+ }, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))] }, (_62 = headerColumns.find((column) => column.key === _groupBy)) === null || _62 === void 0 ? void 0 : _62.key)) }));
522
+ }), headerColumns
523
+ .filter((column) => !groupByKeys.includes(column.key))
524
+ .map((column, colIndex) => {
525
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
526
+ if (!column.hidden) {
527
+ const columnData = getColumnData(column.key, gridData, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []);
528
+ return (_jsx("div", { className: `${sortable && column.sortable ? "sortable" : ""} ${column.showMenu ? "menu-true" : "menu-false"} column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { position: "relative", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", width: widthMode === "auto"
529
+ ? "auto"
530
+ : column.width
531
+ ? column.width
532
+ : (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`])
533
+ ? hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]
534
+ : "fit-content", 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 }), onMouseMove: (e) => handleMouseMove(e), onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: !actionsKey.split(",").includes(column.key) && (_jsxs(_Fragment, { children: [resizable && (_jsx("div", { style: {
535
+ position: "absolute",
536
+ width: "1px",
537
+ height: "100%",
538
+ background: "#ccc",
539
+ cursor: "ew-resize", // Horizontal resize cursor
540
+ top: 0,
541
+ right: 0,
542
+ }, className: "drag-icon", onMouseDown: (e) => handleMouseDown(e, colIndex) })), _jsxs("div", { style: {
543
+ display: "flex",
544
+ alignItems: "center",
545
+ padding: "0 0.25rem",
546
+ justifyContent: "space-between",
547
+ cursor: column.sortable ? "pointer" : "",
548
+ }, onClick: () => column.sortable && onSort(column), children: [_jsxs("div", { style: {
549
+ display: "flex",
550
+ alignItems: "center",
551
+ }, children: [column.isFallBack && _jsx(Tooltip, { id: column.key }), _jsx("span", { "data-tooltip-id": column.key, "data-tooltip-content": "translations is missing for the display name", className: column.isFallBack ? "unknown-value" : "", children: column.label }), sortable && column.sortable && (_jsx("span", { style: {
552
+ visibility: Object.keys(sortQueries).includes(column.key)
553
+ ? "visible"
554
+ : "hidden",
555
+ }, children: sortQueries[column.key] === "asc" ? " ↑" : " ↓" }))] }), _jsx("div", { style: {
556
+ display: "flex",
557
+ alignItems: "center",
558
+ position: "relative",
559
+ }, children: column.filter && (_jsxs("div", { style: {
560
+ alignItems: "center",
561
+ marginLeft: 6,
562
+ position: "relative",
563
+ cursor: "pointer",
564
+ }, onClick: (e) => {
565
+ e.preventDefault();
566
+ e.stopPropagation();
567
+ handleFilterIconClick(e, column.key);
568
+ }, className: "filter-icon", children: [activeFilters[column.key] && (_jsx("span", { style: {
569
+ backgroundColor: "#2377ba",
570
+ width: "0.5rem",
571
+ height: "0.5rem",
572
+ position: "absolute",
573
+ right: 0,
574
+ display: "inline-block",
575
+ } })), _jsx(MdFilterList, { size: 18, style: {
576
+ color: activeFilters[column.key]
577
+ ? "#2377ba"
578
+ : "var(--row-header-text)",
579
+ } }), dropdownVisible === column.key &&
580
+ (column.uniqueDrop ? (_jsx(GridFilterDropdown, { 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" ||
581
+ column.dataType === "currency"
582
+ ? numberTypeSearch.includes(item.value)
583
+ : column.dataType === "date"
584
+ ? dateTypeSearch.includes(item.value)
585
+ : 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"
586
+ ? !column.isArrayString
587
+ : 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) ===
588
+ "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) => {
589
+ var _a, _b;
590
+ return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
591
+ if (index === 0) {
592
+ return value;
593
+ }
594
+ return item;
595
+ }).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
596
+ defaultSearchOperation ||
597
+ "contains");
598
+ } }), _jsx(DateInput, { value: (_e = searchQueries[column.key]) === null || _e === void 0 ? void 0 : _e.text.split("to")[1], placeholder: `To date`, onChange: (value) => {
599
+ var _a, _b;
600
+ return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
601
+ if (index === 1) {
602
+ return value;
603
+ }
604
+ return item;
605
+ }).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
606
+ defaultSearchOperation ||
607
+ "contains");
608
+ } })] })) : (_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) => {
609
+ var _a;
610
+ return onSearch(column.key, value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
611
+ defaultSearchOperation ||
612
+ "contains");
613
+ } }))) : (_jsx(TextInput, { placeholder: `Filter ${column.label}`, onKeyDown: (e) => {
614
+ if (e.key === "Enter") {
615
+ toggleDropdown(column.key);
616
+ }
617
+ }, onChange: (e) => {
618
+ var _a;
619
+ return onSearch(column.key, e.target.value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
620
+ defaultSearchOperation ||
621
+ "contains");
622
+ }, value: ((_g = searchQueries[column.key]) === null || _g === void 0 ? void 0 : _g.text) ||
623
+ "", extraWrapperStyle: {
624
+ visibility: column.search
625
+ ? "visible"
626
+ : "hidden",
627
+ }, 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) ||
628
+ defaultSearchOperation ||
629
+ "contains", checkboxWrapper: checkboxWrapper, searchInput: search &&
630
+ column.search && (_jsx("div", { style: {
631
+ marginTop: "0.5rem",
632
+ padding: "0.5rem",
633
+ width: "100%",
634
+ pointerEvents: search && column.search
635
+ ? "auto"
636
+ : "none",
637
+ cursor: search && column.search
638
+ ? "default"
639
+ : "not-allowed",
640
+ }, children: _jsx(TextInput, { onChange: (e) => {
641
+ var _a;
642
+ let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
643
+ defaultSearchOperation ||
644
+ "contains";
645
+ if (e.target.value.includes("to")) {
646
+ searchType = "between";
647
+ }
648
+ else if (searchType === "between") {
649
+ searchType = "contains";
650
+ }
651
+ onSearch(column.key, e.target.value, searchType);
652
+ }, extraWrapperStyle: {
653
+ background: column.search
654
+ ? "var(--background)"
655
+ : "var(--disabled-bg)",
656
+ }, placeholder: "Search", value: ((_j = searchQueries[column.key]) === null || _j === void 0 ? void 0 : _j.text) ||
657
+ "", 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" ||
658
+ column.dataType === "currency"
659
+ ? numberTypeSearch.includes(item.value)
660
+ : column.dataType === "date"
661
+ ? dateTypeSearch.includes(item.value)
662
+ : 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) ===
663
+ "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) => {
664
+ var _a, _b;
665
+ return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
666
+ if (index === 0) {
667
+ return value;
668
+ }
669
+ return item;
670
+ }).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
671
+ defaultSearchOperation ||
672
+ "contains");
673
+ } }), _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) => {
674
+ var _a, _b;
675
+ return onSearch(column.key, (_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.text.split("to").map((item, index) => {
676
+ if (index === 1) {
677
+ return value;
678
+ }
679
+ return item;
680
+ }).join("to"), ((_b = searchQueries[column.key]) === null || _b === void 0 ? void 0 : _b.type) ||
681
+ defaultSearchOperation ||
682
+ "contains");
683
+ } }) })] })) : [
684
+ "contains",
685
+ "doesNotContain",
686
+ "blank",
687
+ "notBlank",
688
+ ].includes(((_o = searchQueries[column.key]) === null || _o === void 0 ? void 0 : _o.type) ||
689
+ defaultSearchOperation ||
690
+ "contains") ? (_jsx(TextInput, { placeholder: `Filter ${column.label}`, onKeyDown: (e) => {
691
+ if (e.key === "Enter") {
692
+ toggleDropdown(column.key);
693
+ }
694
+ }, onChange: (e) => {
695
+ var _a;
696
+ return onSearch(column.key, e.target.value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
697
+ defaultSearchOperation ||
698
+ "contains");
699
+ }, value: ((_p = searchQueries[column.key]) === null || _p === void 0 ? void 0 : _p.text) ||
700
+ "", extraWrapperStyle: {
701
+ visibility: column.search
702
+ ? "visible"
703
+ : "hidden",
704
+ }, 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) => {
705
+ var _a;
706
+ return onSearch(column.key, value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
707
+ defaultSearchOperation ||
708
+ "contains");
709
+ } }))) : (_jsx(TextInput, { placeholder: `Filter ${column.label}`, onKeyDown: (e) => {
710
+ if (e.key === "Enter") {
711
+ toggleDropdown(column.key);
712
+ }
713
+ }, onChange: (e) => {
714
+ var _a;
715
+ return onSearch(column.key, e.target.value, ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
716
+ defaultSearchOperation ||
717
+ "contains");
718
+ }, value: ((_r = searchQueries[column.key]) === null || _r === void 0 ? void 0 : _r.text) ||
719
+ "", extraWrapperStyle: {
720
+ visibility: column.search
721
+ ? "visible"
722
+ : "hidden",
723
+ }, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" })) }), activeSearchType: ((_s = searchQueries[column.key]) === null || _s === void 0 ? void 0 : _s.type) ||
724
+ defaultSearchOperation ||
725
+ "contains", searchInput: (search && column.search && (_jsx("div", { style: {
726
+ padding: "0.5rem",
727
+ width: "100%",
728
+ pointerEvents: search && column.search
729
+ ? "auto"
730
+ : "none",
731
+ cursor: search && column.search
732
+ ? "default"
733
+ : "not-allowed",
734
+ }, children: _jsx(TextInput, { onChange: (e) => {
735
+ var _a;
736
+ let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
737
+ defaultSearchOperation ||
738
+ "contains";
739
+ if (e.target.value.includes("to")) {
740
+ searchType = "between";
741
+ }
742
+ else if (searchType === "between") {
743
+ searchType = "contains";
744
+ }
745
+ onSearch(column.key, e.target.value, searchType);
746
+ }, placeholder: "Search", extraWrapperStyle: {
747
+ background: column.search
748
+ ? "var(--background)"
749
+ : "var(--disabled-bg)",
750
+ }, value: ((_t = searchQueries[column.key]) === null || _t === void 0 ? void 0 : _t.text) ||
751
+ "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))) ||
752
+ null })))] })) })] }), search && columnSearchOutside && (_jsx("div", { style: {
753
+ marginTop: "0.5rem",
754
+ width: (hugColumnWidths === null || hugColumnWidths === void 0 ? void 0 : hugColumnWidths[`column-${column.key}`]) ||
755
+ widthMode === "auto" ||
756
+ column.width
757
+ ? "100%"
758
+ : "100px",
759
+ pointerEvents: search && column.search ? "auto" : "none",
760
+ cursor: search && column.search ? "default" : "not-allowed",
761
+ }, children: _jsx(TextInput, { onChange: (e) => {
762
+ var _a;
763
+ let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
764
+ defaultSearchOperation ||
765
+ "contains";
766
+ if (e.target.value.includes("to")) {
767
+ searchType = "between";
768
+ }
769
+ else if (searchType === "between") {
770
+ searchType = "contains";
771
+ }
772
+ onSearch(column.key, e.target.value, searchType);
773
+ }, placeholder: "Search", extraWrapperStyle: {
774
+ background: column.search
775
+ ? "var(--background)"
776
+ : "var(--disabled-bg)",
777
+ }, 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));
778
+ }
779
+ return null;
780
+ })] }));
781
+ };
782
+ export default React.memo(GridHeader);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megha-ui/react",
3
- "version": "1.2.797",
3
+ "version": "1.2.799",
4
4
  "description": "A collection of reusable UI components for React applications, built with TypeScript.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",