@megha-ui/react 1.3.49 → 1.3.51

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, 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 = true, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, isIcon = false, withValue = false, closeOnSelect = true, }) => {
     var _a, _b;
     const { density } = useDensity();
     const [isOpen, setIsOpen] = useState(false);
@@ -46,15 +46,28 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
         return null;
     };
     const calculateAutoPosition = () => {
+        var _a, _b;
         if (!wrapperRef.current)
             return;
         const rect = wrapperRef.current.getBoundingClientRect();
-        const bottomSpace = window.innerHeight - rect.bottom;
-        const topSpace = rect.top;
-        const heightNum = typeof maxDropdownHeight === "number"
+        const boundaryParent = getLayoutBoundaryParent(wrapperRef.current);
+        const containerRect = boundaryParent === null || boundaryParent === void 0 ? void 0 : boundaryParent.getBoundingClientRect();
+        const containerTop = (_a = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _a !== void 0 ? _a : 0;
+        const containerBottom = (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _b !== void 0 ? _b : window.innerHeight;
+        const viewportPadding = 8;
+        const menuGap = 8;
+        const minUsefulHeight = 180;
+        const preferredMaxHeight = typeof maxDropdownHeight === "number"
             ? maxDropdownHeight
             : parseInt(`${maxDropdownHeight}`, 10) || 200;
-        if (bottomSpace < heightNum && topSpace > bottomSpace) {
+        const rawSpaceBelow = containerBottom - rect.bottom - viewportPadding - menuGap;
+        const rawSpaceAbove = rect.top - containerTop - viewportPadding - menuGap;
+        const spaceBelow = Math.max(0, Math.floor(rawSpaceBelow));
+        const spaceAbove = Math.max(0, Math.floor(rawSpaceAbove));
+        const shouldOpenTop = spaceBelow < minUsefulHeight && spaceAbove > spaceBelow;
+        const available = shouldOpenTop ? spaceAbove : spaceBelow;
+        const resolvedMax = Math.min(available, preferredMaxHeight);
+        if (shouldOpenTop) {
             setClickStyle({ left: 0, bottom: "100%" });
         }
         else {

package/package.json

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