@megha-ui/react 1.2.790 → 1.2.792

package/dist/components/dropdown/index.js

@@ -18,6 +18,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
     const wrapperRef = useRef(null);
     const clearIconRef = useRef(null);
     const searchInputRef = useRef(null);
+    const searchOptionRef = useRef(null);
     const optionRefs = useRef([]);
     const [highlightIndex, setHighlightIndex] = useState(0);
     const [intermediateValues, setIntermediateValues] = useState(selectedValues);
@@ -28,6 +29,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
     const [collapsed, setCollapsed] = useState("");
     const [height, setHeight] = useState(0);
     const getOverflowParentHeight = (element, fallback) => {
+        var _a, _b;
         if (!element)
             return fallback;
         let parent = element.parentElement;
@@ -41,7 +43,9 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                 overflow === "scroll") {
                 const parentRect = parent.getBoundingClientRect();
                 const elementRect = element.getBoundingClientRect();
-                return parentRect.height - elementRect.height;
+                const searchOptionRect = (_a = searchOptionRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                console.log(searchOptionRect);
+                return parentRect.height - elementRect.height - 4 - ((_b = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _b !== void 0 ? _b : 0);
             }
             console.log({ parent });
             parent = parent.parentElement;
@@ -320,10 +324,12 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
     };
     const handleClick = (e) => {
         const clearEle = document.getElementById(clearId || "");
-        const rect = e.currentTarget.getBoundingClientRect();
-        const viewportSpace = document.body.clientHeight - rect.bottom;
-        const overflowSpace = getOverflowParentHeight(wrapperRef.current, viewportSpace);
-        setHeight(overflowSpace);
+        setTimeout(() => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            const viewportSpace = document.body.clientHeight - rect.bottom;
+            const overflowSpace = getOverflowParentHeight(wrapperRef.current, viewportSpace);
+            setHeight(overflowSpace);
+        }, 500);
         if (clearEle === e.target) {
             e.preventDefault();
         }
@@ -393,7 +399,7 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                                 }, children: [isClear && (displayValue || selectedDisplay) && (_jsx("div", { style: { marginRight: "0.5rem" }, onClick: handleClear, id: clearId, title: "Click to clear the value", children: ClearIcon ? (ClearIcon) : (_jsx("span", { style: {
                                                 color: "var(--form-border-color, #dbdfe9)",
                                                 fontSize: "1rem",
-                                            }, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : (_jsx(HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), _jsxs("ul", { style: Object.assign(Object.assign({ width: isGrouping ? "max-content" : dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 0.75rem rgba(0, 0, 0, 0.1)", border: "1px solid var(--divider, #f5f5f5)", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && (_jsx("li", { style: { padding: "0.5rem" }, children: _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
+                                            }, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : (_jsx(HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), _jsxs("ul", { style: Object.assign(Object.assign({ width: isGrouping ? "max-content" : dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 0.75rem rgba(0, 0, 0, 0.1)", border: "1px solid var(--divider, #f5f5f5)", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && (_jsx("li", { style: { padding: "0.5rem" }, ref: searchOptionRef, children: _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
                                         width: "100%",
                                         padding: "0.5rem",
                                         boxSizing: "border-box",

package/package.json

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