@megha-ui/react 1.3.77 → 1.3.79

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 (4) hide show
  1. package/dist/components/grid/utils/newGridHeader.js +15 -10
  2. package/dist/components/text-input/index.d.ts +1 -0
  3. package/dist/components/text-input/index.js +3 -2
  4. package/package.json +1 -1
package/dist/components/grid/utils/newGridHeader.js CHANGED
@@ -98,6 +98,9 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
98
98
  setDropdownVisible("");
99
99
  setMenuPosition(null);
100
100
  setSearchOpsPosition(null);
101
+ if (!target.closest(".column-search-outside-wrapper")) {
102
+ setActiveSearchColumn(null);
103
+ }
101
104
  };
102
105
  document.addEventListener("click", closeMenu);
103
106
  return () => {
@@ -154,6 +157,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
154
157
  setUniqueSearch(_uniqueSeach);
155
158
  }
156
159
  onFilter(_uniqueSeach, columnKey);
160
+ setActiveSearchColumn((current) => current === columnKey ? null : current);
157
161
  };
158
162
  const menuOptions = [{ label: "Group by", groupBy: setGroupBy }];
159
163
  const searchOptions = [
@@ -557,7 +561,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
557
561
  ? "var(--background)"
558
562
  : "var(--disabled-bg)",
559
563
  }, 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" }) }))) ||
560
- null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { style: {
564
+ null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, className: "column-search-outside-wrapper", children: [_jsx("div", { style: {
561
565
  marginTop: "0.5rem",
562
566
  pointerEvents: search &&
563
567
  ((_50 = headerColumns.find((column) => column.key === _groupBy)) === null || _50 === void 0 ? void 0 : _50.search)
@@ -570,10 +574,12 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
570
574
  }, children: _jsxs("div", { style: {
571
575
  display: "flex",
572
576
  alignItems: "center",
573
- }, children: [_jsx(TextInput, { onBlur: () => setActiveSearchColumn(null), onChange: (e) => {
574
- var _a, _b, _c, _d;
575
- setActiveSearchColumn(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
576
- let searchType = ((_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) ||
577
+ }, children: [_jsx(TextInput, { onFocus: () => {
578
+ var _a;
579
+ return setActiveSearchColumn(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
580
+ }, onChange: (e) => {
581
+ var _a, _b, _c;
582
+ 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) ||
577
583
  defaultSearchOperation ||
578
584
  "contains";
579
585
  if (e.target.value.includes("to")) {
@@ -582,7 +588,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
582
588
  else if (searchType === "between") {
583
589
  searchType = "contains";
584
590
  }
585
- onSearch(((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || "", e.target.value, searchType);
591
+ onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
586
592
  }, placeholder: "Search", extraWrapperStyle: {
587
593
  background: ((_52 = headerColumns.find((column) => column.key === _groupBy)) === null || _52 === void 0 ? void 0 : _52.search)
588
594
  ? "var(--background)"
@@ -885,7 +891,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
885
891
  : "var(--disabled-bg)",
886
892
  }, value: ((_t = searchQueries[column.key]) === null || _t === void 0 ? void 0 : _t.text) ||
887
893
  "", disabled: !column.search, height: 32, extraInputStyle: { minWidth: 10 }, className: "w-full", backgroundColor: "var(--background)" }) }))) ||
888
- null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { style: {
894
+ null })))] })) })] }), search && columnSearchOutside && (_jsxs("div", { style: { position: "relative" }, className: "column-search-outside-wrapper", children: [_jsx("div", { style: {
889
895
  marginTop: "0.5rem",
890
896
  pointerEvents: search && column.search ? "auto" : "none",
891
897
  cursor: search && column.search
@@ -894,9 +900,8 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
894
900
  }, children: _jsxs("div", { style: {
895
901
  display: "flex",
896
902
  alignItems: "center",
897
- }, children: [_jsx(TextInput, { onChange: (e) => {
903
+ }, children: [_jsx(TextInput, { onFocus: () => setActiveSearchColumn(column.key), onChange: (e) => {
898
904
  var _a;
899
- setActiveSearchColumn(column.key);
900
905
  let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
901
906
  defaultSearchOperation ||
902
907
  "contains";
@@ -907,7 +912,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
907
912
  searchType = "contains";
908
913
  }
909
914
  onSearch(column.key, e.target.value, searchType);
910
- }, onBlur: () => setActiveSearchColumn(null), placeholder: "Search", extraWrapperStyle: {
915
+ }, placeholder: "Search", extraWrapperStyle: {
911
916
  background: column.search
912
917
  ? "var(--background)"
913
918
  : "var(--disabled-bg)",
package/dist/components/text-input/index.d.ts CHANGED
@@ -6,6 +6,7 @@ interface TextInputProps {
6
6
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
7
7
  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
8
8
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
9
+ onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
9
10
  placeholder?: string;
10
11
  type?: "text" | "password" | "email" | "number";
11
12
  className?: string;
package/dist/components/text-input/index.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useEffect, useRef, useState } from "react";
3
3
  import { MdClose } from "react-icons/md";
4
4
  import { useDensity } from "../../context/DensityContext";
5
- const TextInput = ({ value = "", name, id, onChange = () => { }, onKeyDown = () => { }, onBlur = () => { }, placeholder = "", type = "text", className = "", disabled = false, width = "100%", padding = "0.5rem", borderRadius = 4, fontSize = "0.85rem", height = "2.5rem", autoComplete = "off", maxLength, readOnly = false, required, isNumber, marginTop, marginRight, marginBottom, marginLeft, label, border = "1px solid var(--form-border-color, #dbdfe9)", backgroundColor = "transparent", icon, iconPosition = "left", asteriskColor = "red", labelFontSize, labelFontWeight, labelMarginBottom, isValid, validationErrorColor = "red", validationSuccessColor = "green", extraWrapperStyle = {}, extraInputStyle = {}, onSubmit, timeBoundBlur, wrapperClass, isClear = true, compactDisplay = false, ultraCompactDisplay = false, clearIcon, clearId, }) => {
5
+ const TextInput = ({ value = "", name, id, onChange = () => { }, onKeyDown = () => { }, onBlur = () => { }, onFocus = () => { }, placeholder = "", type = "text", className = "", disabled = false, width = "100%", padding = "0.5rem", borderRadius = 4, fontSize = "0.85rem", height = "2.5rem", autoComplete = "off", maxLength, readOnly = false, required, isNumber, marginTop, marginRight, marginBottom, marginLeft, label, border = "1px solid var(--form-border-color, #dbdfe9)", backgroundColor = "transparent", icon, iconPosition = "left", asteriskColor = "red", labelFontSize, labelFontWeight, labelMarginBottom, isValid, validationErrorColor = "red", validationSuccessColor = "green", extraWrapperStyle = {}, extraInputStyle = {}, onSubmit, timeBoundBlur, wrapperClass, isClear = true, compactDisplay = false, ultraCompactDisplay = false, clearIcon, clearId, }) => {
6
6
  const { density } = useDensity();
7
7
  const [focused, setFocused] = useState(false);
8
8
  const [error, setError] = useState(null);
@@ -52,9 +52,10 @@ const TextInput = ({ value = "", name, id, onChange = () => { }, onKeyDown = ()
52
52
  }
53
53
  onBlur(e);
54
54
  };
55
- const handleFocus = () => {
55
+ const handleFocus = (e) => {
56
56
  setFocused(true);
57
57
  setError(null);
58
+ onFocus(e);
58
59
  };
59
60
  const handleSubmit = () => {
60
61
  if (required && !value.trim()) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megha-ui/react",
3
- "version": "1.3.77",
3
+ "version": "1.3.79",
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",