@megha-ui/react 1.2.784 → 1.2.786

package/dist/components/dropdown/index.js

@@ -8,7 +8,7 @@ import Text from "../text";
 import Button from "../button";
 import { HiChevronDown } from "react-icons/hi";
 import { FaChevronDown, FaChevronUp } from "react-icons/fa";
-const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelAlignment = "vertical", labelFontSize, labelFontWeight, labelMarginBottom, labelClass, asteriskColor, label, disabled = false, width, searchEnabled = true, dropdownListWidth, marginBottom, marginTop, marginRight, marginLeft, required, dropdownListBG, searchBorderColor = "#2377ba", maxDropdownHeight = "12rem", border = "1px solid #dbdfe9", selectedCharLength = 0, menuFrom = "left", Tooltip, DropDownIcon, onMenuClose, onMenuOpen, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = false, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, isIcon = false, withValue = false, closeOnSelect = true, }) => {
+const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelAlignment = "vertical", labelFontSize, labelFontWeight, labelMarginBottom, labelClass, asteriskColor, label, disabled = false, width, searchEnabled = true, dropdownListWidth, marginBottom, marginTop, marginRight, marginLeft, required, dropdownListBG, searchBorderColor = "#2377ba", maxDropdownHeight, border = "1px solid #dbdfe9", selectedCharLength = 0, menuFrom = "left", Tooltip, DropDownIcon, onMenuClose, onMenuOpen, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = false, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, isIcon = false, withValue = false, closeOnSelect = true, }) => {
     var _a, _b;
     const { density } = useDensity();
     const [isOpen, setIsOpen] = useState(false);
@@ -27,6 +27,26 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
     });
     const [collapsed, setCollapsed] = useState("");
     const [height, setHeight] = useState(0);
+    const getOverflowParentHeight = (element, fallback) => {
+        if (!element)
+            return fallback;
+        let parent = element.parentElement;
+        while (parent) {
+            const style = window.getComputedStyle(parent);
+            const overflowY = style.overflowY;
+            const overflow = style.overflow;
+            if (overflowY === "auto" ||
+                overflowY === "scroll" ||
+                overflow === "auto" ||
+                overflow === "scroll") {
+                const parentRect = parent.getBoundingClientRect();
+                const elementRect = element.getBoundingClientRect();
+                return parentRect.bottom - elementRect.bottom;
+            }
+            parent = parent.parentElement;
+        }
+        return fallback;
+    };
     const calculateAutoPosition = () => {
         if (!wrapperRef.current)
             return;
@@ -298,9 +318,10 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
     };
     const handleClick = (e) => {
         const clearEle = document.getElementById(clearId || "");
-        const screen = document.body.clientHeight;
         const rect = e.currentTarget.getBoundingClientRect();
-        setHeight(screen - rect.bottom);
+        const viewportSpace = document.body.clientHeight - rect.bottom;
+        const overflowSpace = getOverflowParentHeight(wrapperRef.current, viewportSpace);
+        setHeight(overflowSpace);
         if (clearEle === e.target) {
             e.preventDefault();
         }

package/package.json

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