@megha-ui/react 1.3.48 → 1.3.50

package/dist/components/dropdown/index.js

@@ -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 {
@@ -84,8 +97,14 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
                     rect.bottom -
                     viewportPadding -
                     menuGap -
-                    searchHeight - applyBtnHeight;
-                const rawSpaceAbove = rect.top - containerTop - viewportPadding - menuGap - searchHeight - applyBtnHeight;
+                    searchHeight -
+                    applyBtnHeight;
+                const rawSpaceAbove = rect.top -
+                    containerTop -
+                    viewportPadding -
+                    menuGap -
+                    searchHeight -
+                    applyBtnHeight;
                 const spaceBelow = Math.max(0, Math.floor(rawSpaceBelow));
                 const spaceAbove = Math.max(0, Math.floor(rawSpaceAbove));
                 const opensUpwards = typeof clickStyle.bottom !== "undefined";

package/dist/components/grid/utils/newSummariseDetails.js

@@ -163,7 +163,7 @@ const NewSummariseDetails = ({ columns, rowIndex, groupBy, sortable, cellStyle,
                     ? `${groupedData}>>${column.key}`
                     : column.key;
                 if (!column.hidden) {
-                    return (_jsxs("div", { className: `${sortable && column.sortable ? "sortable" : ""} ${column.showMenu ? "menu-true" : "menu-false"} ${`column-${column.key}`} ${columnKey}-${(_a = summariseDetails[columnKey]) === null || _a === void 0 ? void 0 : _a.type}`, style: Object.assign(Object.assign({}, cellStyle), { position: "relative", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, background: "var(--row-header-bg)" }), children: [summariseDetails[columnKey] &&
+                    return (_jsxs("div", { className: `${sortable && column.sortable ? "sortable" : ""} ${column.showMenu ? "menu-true" : "menu-false"} ${`column-${column.key}`} ${columnKey}-${(_a = summariseDetails[columnKey]) === null || _a === void 0 ? void 0 : _a.type}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, cellStyle), { position: groupBy !== "" ? "relative" : "sticky" }), (groupBy !== "" ? {} : { top: 0 })), { padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", flex: widthMode === "auto" ? 1 : undefined, flexGrow: widthMode === "auto" ? 1 : 0, flexShrink: widthMode === "auto" ? 1 : 0, background: "var(--row-header-bg)" }), children: [summariseDetails[columnKey] &&
                                 summariseDetails[columnKey].type ? (_jsxs("div", { style: {
                                     display: "flex",
                                     alignItems: "center",

package/package.json

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