@megha-ui/react 1.3.58 → 1.3.60

package/dist/components/dropdown/index.js

@@ -377,7 +377,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
             display: "flex",
             flexDirection: labelAlignment === "horizontal" ? "row" : "column",
             alignItems: labelAlignment === "horizontal" ? "center" : "",
-        }, children: [label && (_jsxs("p", { style: labelStyle, className: labelClass, children: [label, required && _jsx("span", { style: asteriskStyle, children: " *" })] })), _jsxs("div", { ref: wrapperRef, className: `${className}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ border, borderRadius: 4 }, (isIcon ? {} : { padding: "0 0.5rem" })), { alignItems: "center", display: "flex", flexDirection: autoPosition ? "row" : "column", height: autoPosition
+        }, children: [label && (_jsxs("p", { style: labelStyle, className: labelClass, children: [label, required && _jsx("span", { style: asteriskStyle, children: " *" })] })), _jsxs("div", { ref: wrapperRef, className: `${className}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (isIcon ? {} : { padding: "0 0.5rem" })), { alignItems: "center", display: "flex", flexDirection: autoPosition ? "row" : "column", height: autoPosition
                         ? `var(--control-min-height, ${ultraCompactDisplay
                             ? "1.5rem"
                             : compactDisplay
@@ -400,6 +400,8 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                                         ? "2rem"
                                         : "2.5rem"})`,
                     })), { position: "relative" }), style), children: [_jsxs("div", { style: {
+                            border,
+                            borderRadius: 4,
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "space-between",

package/dist/components/grid/utils/newGridHeader.js

@@ -7,6 +7,7 @@ import TextFilterDropdown from "./textFilterDropdown";
 import DateInput from "../../date-input";
 import TextInput from "../../text-input";
 import Checkbox from "../../checkbox";
+import Dropdown from "../../dropdown";
 import { Tooltip } from "react-tooltip";
 export const getColumnData = (columnKey, gridData, type, combinedColumns) => {
     const returnedValue = [
@@ -519,7 +520,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
             }), headerColumns
                 .filter((column) => !groupByKeys.includes(column.key))
                 .map((column, colIndex) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
                 if (!column.hidden) {
                     const columnData = getColumnData(column.key, gridData, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []);
                     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: {
@@ -749,20 +750,40 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                             : "100px",
                                         pointerEvents: search && column.search ? "auto" : "none",
                                         cursor: search && column.search ? "default" : "not-allowed",
-                                    }, children: _jsx(TextInput, { onChange: (e) => {
-                                            let searchType = "contains";
-                                            if (e.target.value.includes("to")) {
-                                                searchType = "between";
-                                            }
-                                            else if (searchType === "between") {
-                                                searchType = "contains";
-                                            }
-                                            onSearch(column.key, e.target.value, searchType);
-                                        }, placeholder: "Search", extraWrapperStyle: {
-                                            background: column.search
-                                                ? "var(--background)"
-                                                : "var(--disabled-bg)",
-                                        }, 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));
+                                    }, children: _jsxs("div", { style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "0.5rem",
+                                        }, children: [_jsx(TextInput, { onChange: (e) => {
+                                                    var _a;
+                                                    let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
+                                                        defaultSearchOperation ||
+                                                        "contains";
+                                                    if (e.target.value.includes("to")) {
+                                                        searchType = "between";
+                                                    }
+                                                    else if (searchType === "between") {
+                                                        searchType = "contains";
+                                                    }
+                                                    onSearch(column.key, e.target.value, searchType);
+                                                }, placeholder: "Search", extraWrapperStyle: {
+                                                    background: column.search
+                                                        ? "var(--background)"
+                                                        : "var(--disabled-bg)",
+                                                }, value: ((_u = searchQueries[column.key]) === null || _u === void 0 ? void 0 : _u.text) || "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "#fff" }), _jsx(Dropdown, { options: searchOptions.filter((item) => column.dataType === "number" ||
+                                                    column.dataType === "currency"
+                                                    ? numberTypeSearch.includes(item.value)
+                                                    : column.dataType === "date"
+                                                        ? dateTypeSearch.includes(item.value)
+                                                        : textTypeSearch.includes(item.value)), selectedValues: [
+                                                    ((_v = searchQueries[column.key]) === null || _v === void 0 ? void 0 : _v.type) ||
+                                                        defaultSearchOperation ||
+                                                        "contains",
+                                                ], onChange: (selected) => {
+                                                    var _a;
+                                                    const value = ((_a = selected[0]) === null || _a === void 0 ? void 0 : _a.toString()) || "";
+                                                    handleSearchOptionSelect(column.key, value);
+                                                }, searchEnabled: false, width: 130 })] }) }))] })) }, column.key));
                 }
                 return null;
             })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megha-ui/react",
-  "version": "1.3.58",
+  "version": "1.3.60",
   "description": "A collection of reusable UI components for React applications, built with TypeScript.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",