@megha-ui/react 1.3.76 → 1.3.78

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 +12 -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
@@ -154,6 +154,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
154
154
  setUniqueSearch(_uniqueSeach);
155
155
  }
156
156
  onFilter(_uniqueSeach, columnKey);
157
+ setActiveSearchColumn((current) => current === columnKey ? null : current);
157
158
  };
158
159
  const menuOptions = [{ label: "Group by", groupBy: setGroupBy }];
159
160
  const searchOptions = [
@@ -570,10 +571,12 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
570
571
  }, children: _jsxs("div", { style: {
571
572
  display: "flex",
572
573
  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) ||
574
+ }, children: [_jsx(TextInput, { onFocus: () => {
575
+ var _a;
576
+ return setActiveSearchColumn(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "");
577
+ }, onChange: (e) => {
578
+ var _a, _b, _c;
579
+ 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
580
  defaultSearchOperation ||
578
581
  "contains";
579
582
  if (e.target.value.includes("to")) {
@@ -582,7 +585,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
582
585
  else if (searchType === "between") {
583
586
  searchType = "contains";
584
587
  }
585
- onSearch(((_d = headerColumns.find((column) => column.key === _groupBy)) === null || _d === void 0 ? void 0 : _d.key) || "", e.target.value, searchType);
588
+ onSearch(((_c = headerColumns.find((column) => column.key === _groupBy)) === null || _c === void 0 ? void 0 : _c.key) || "", e.target.value, searchType);
586
589
  }, placeholder: "Search", extraWrapperStyle: {
587
590
  background: ((_52 = headerColumns.find((column) => column.key === _groupBy)) === null || _52 === void 0 ? void 0 : _52.search)
588
591
  ? "var(--background)"
@@ -626,7 +629,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
626
629
  top: "calc(100% + 0.25rem)",
627
630
  left: 0,
628
631
  background: "var(--card-bg)",
629
- width: "100%",
632
+ width: "max-content",
630
633
  maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
631
634
  overflow: "auto",
632
635
  padding: "0.5rem 0.75rem",
@@ -894,9 +897,8 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
894
897
  }, children: _jsxs("div", { style: {
895
898
  display: "flex",
896
899
  alignItems: "center",
897
- }, children: [_jsx(TextInput, { onChange: (e) => {
900
+ }, children: [_jsx(TextInput, { onFocus: () => setActiveSearchColumn(column.key), onChange: (e) => {
898
901
  var _a;
899
- setActiveSearchColumn(column.key);
900
902
  let searchType = ((_a = searchQueries[column.key]) === null || _a === void 0 ? void 0 : _a.type) ||
901
903
  defaultSearchOperation ||
902
904
  "contains";
@@ -907,7 +909,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
907
909
  searchType = "contains";
908
910
  }
909
911
  onSearch(column.key, e.target.value, searchType);
910
- }, onBlur: () => setActiveSearchColumn(null), placeholder: "Search", extraWrapperStyle: {
912
+ }, placeholder: "Search", extraWrapperStyle: {
911
913
  background: column.search
912
914
  ? "var(--background)"
913
915
  : "var(--disabled-bg)",
@@ -943,7 +945,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
943
945
  top: "calc(100% + 0.25rem)",
944
946
  left: 0,
945
947
  background: "var(--card-bg)",
946
- width: "100%",
948
+ width: "max-content",
947
949
  maxHeight: activeSearchMaxHeight !== null && activeSearchMaxHeight !== void 0 ? activeSearchMaxHeight : 300,
948
950
  overflow: "auto",
949
951
  padding: "0.5rem 0.75rem",
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.76",
3
+ "version": "1.3.78",
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",