funda-ui 4.7.525 → 4.7.545

package/CascadingSelect/index.js

@@ -2322,6 +2322,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var inputRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var listRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
   // searchable
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
@@ -2439,7 +2440,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     // STEP 2:
     //-----------
     // Detect position
-    if (window.innerHeight - _triggerBox.top > 100) {
+    if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';

package/CascadingSelectE2E/index.js

@@ -2679,6 +2679,7 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var inputRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var listRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
   // searchable
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
@@ -2821,7 +2822,7 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
     // STEP 2:
     //-----------
     // Detect position
-    if (window.innerHeight - _triggerBox.top > 100) {
+    if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';

package/Date/index.js

@@ -5034,6 +5034,8 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     langToday = props.langToday,
     attributes = _objectWithoutProperties(props, _excluded);
   var DEPTH = depth || 1055; // the default value same as bootstrap
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
   var defaultValueIsEmpty = function defaultValueIsEmpty(s) {
     return typeof s === 'undefined' || s === null || s === 'null' || s === '';
   };
@@ -5328,7 +5330,7 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     // STEP 1:
     //-----------
     // Detect position
-    if (window.innerHeight - _triggerBox.top > 100) {
+    if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';

package/DropdownMenu/index.js

@@ -1285,6 +1285,8 @@ var DropdownMenu = function DropdownMenu(props) {
     selected = _useState4[0],
     setSelected = _useState4[1];
   var _hoverDelay = !isNaN(hoverDelay) && typeof hoverDelay !== 'undefined' ? hoverDelay : 150;
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
   var defaultLabel = triggerContent === undefined ? '' : triggerContent;
   var selectedLabel = triggerSwitchActive ? selected ? selected.label : defaultLabel : defaultLabel;
   var selectOptionsListPresentation = options === null || options === void 0 ? void 0 : options.map(function (selectOption, index) {
@@ -1375,7 +1377,7 @@ var DropdownMenu = function DropdownMenu(props) {
       // STEP 2:
       //-----------
       // Detect position
-      if (window.innerHeight - _triggerBox.top > 100) {
+      if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
         targetPos = 'bottom';
       } else {
         targetPos = 'top';

package/LiveSearch/index.js

@@ -2892,6 +2892,7 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
   var EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
   var AUTO_SHOW_OPTIONS = typeof autoShowOptions !== 'undefined' && autoShowOptions === true ? true : false;
   var MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false; // Manual requests
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
   var NO_MATCH_POPUP = typeof noMatchPopup === 'undefined' ? true : noMatchPopup;
   var WIN_WIDTH = typeof winWidth === 'function' ? winWidth() : winWidth ? winWidth : 'auto';
@@ -3025,7 +3026,6 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     if (isBlurringRef.current && !MANUAL_REQ) return;
 
     //
-    var contentHeightOffset = 80;
     var contentMaxHeight = 0;
 
     // update modal position
@@ -3052,7 +3052,7 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     // STEP 2:
     //-----------
     // Detect position
-    if (window.innerHeight - _triggerBox.top > 100) {
+    if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';
@@ -3066,6 +3066,11 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     var _contentActualHeight = listContentRef.current.querySelector('.livesearch__options-contentlist-inner').clientHeight;
     if (targetPos === 'top') {
       contentMaxHeight = _triggerBox.top;
+
+      // Calculate the final height with minimum height protection
+      var contentHeightOffset = 0;
+      var finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
+
       if (_contentBox.height > _contentActualHeight) {
         if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
       } else {
@@ -3073,11 +3078,16 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
 
         // recalculate the height
         _contentBox = listContentRef.current.getBoundingClientRect();
-        if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
+        if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = finalHeight + 'px';
       }
     }
     if (targetPos === 'bottom') {
       contentMaxHeight = window.innerHeight - _triggerBox.bottom;
+
+      // Calculate the final height with minimum height protection
+      var _contentHeightOffset = 10;
+      var _finalHeight = Math.max(contentMaxHeight - _contentHeightOffset, 150); // Ensure minimum height of 150px
+
       if (_contentBox.height > _contentActualHeight) {
         if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
       } else {
@@ -3085,7 +3095,7 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
 
         // recalculate the height
         _contentBox = listContentRef.current.getBoundingClientRect();
-        if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
+        if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = _finalHeight + 'px';
       }
     }
 
@@ -3094,17 +3104,16 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     // Adjust position
     if (targetPos === 'top') {
       _modalRef.style.left = x + 'px';
-      //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
-      _modalRef.style.top = 'auto';
-      _modalRef.style.bottom = window.innerHeight - _triggerBox.top + POS_OFFSET + 2 + 'px';
-      _modalRef.style.setProperty('position', 'fixed', 'important');
+      _modalRef.style.bottom = 'auto';
+      // Position the popup above the trigger without overlapping
+      var topPosition = y - POS_OFFSET - listContentRef.current.clientHeight - 2;
+      _modalRef.style.top = topPosition + 'px';
       _modalRef.classList.add('pos-top');
     }
     if (targetPos === 'bottom') {
       _modalRef.style.left = x + 'px';
       _modalRef.style.bottom = 'auto';
       _modalRef.style.top = y + height + POS_OFFSET + 'px';
-      _modalRef.style.setProperty('position', 'absolute', 'important');
       _modalRef.classList.remove('pos-top');
     }
 

package/Select/index.d.ts

@@ -47,6 +47,7 @@ export declare type SelectProps = {
     controlClassName?: string;
     controlExClassName?: string;
     optionsExClassName?: string;
+    customScrollContainer?: string | HTMLElement | React.RefObject<HTMLElement>;
     exceededSidePosOffset?: number;
     clearIcon?: boolean;
     renderOption?: (optionData: OptionConfig, index: number) => React.ReactNode;

package/Select/index.js

@@ -3578,7 +3578,7 @@ var format_string = __webpack_require__(933);
 // EXTERNAL MODULE: ../Utils/dist/cjs/cls.js
 var cls = __webpack_require__(188);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded = ["contentRef", "popupRef", "wrapperClassName", "controlClassName", "controlExClassName", "optionsExClassName", "exceededSidePosOffset", "clearIcon", "renderOption", "multiSelect", "multiSelectEntireAreaTrigger", "multiSelectSelectedItemOnlyStatus", "renderSelectedValue", "disabled", "required", "defaultValue", "value", "label", "name", "readOnly", "placeholder", "id", "autoComplete", "autoCapitalize", "spellCheck", "options", "clearTrigger", "loader", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "firstRequestAutoExec", "fetchTrigger", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus", "onKeyPressed"];
+var _excluded = ["contentRef", "popupRef", "wrapperClassName", "controlClassName", "controlExClassName", "optionsExClassName", "customScrollContainer", "exceededSidePosOffset", "clearIcon", "renderOption", "multiSelect", "multiSelectEntireAreaTrigger", "multiSelectSelectedItemOnlyStatus", "renderSelectedValue", "disabled", "required", "defaultValue", "value", "label", "name", "readOnly", "placeholder", "id", "autoComplete", "autoCapitalize", "spellCheck", "options", "clearTrigger", "loader", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "firstRequestAutoExec", "fetchTrigger", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus", "onKeyPressed"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -3626,6 +3626,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     controlClassName = props.controlClassName,
     controlExClassName = props.controlExClassName,
     optionsExClassName = props.optionsExClassName,
+    customScrollContainer = props.customScrollContainer,
     exceededSidePosOffset = props.exceededSidePosOffset,
     clearIcon = props.clearIcon,
     renderOption = props.renderOption,
@@ -3701,6 +3702,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   var listContentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var optionsRes = options ? (0,validate.isJSON)(options) ? JSON.parse(options) : options : [];
   var LIST_CONTAINER_MAX_HEIGHT = 300;
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
   var keyboardSelectedItem = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
 
   // loading
@@ -4286,7 +4289,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     if (isBlurringRef.current) return;
 
     //
-    var contentHeightOffset = 80;
     var contentMaxHeight = 0;
 
     // update modal position
@@ -4321,8 +4323,36 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     _contentOldHeight = listContainerHeightLimit(_contentOldHeight);
 
     // You need to wait for the height of the pop-up container to be set
-    // Detect position、
-    if (window.innerHeight - _triggerBox.top > 100) {
+    // Detect position
+    var containerHeight = window.innerHeight;
+    var containerTop = 0;
+
+    // If custom scroll container is specified, use it instead of window
+    if (customScrollContainer) {
+      var customContainer = null;
+      if (typeof customScrollContainer === 'string') {
+        // Handle selector string
+        customContainer = document.querySelector(customScrollContainer);
+      } else if (customScrollContainer instanceof HTMLElement) {
+        // Handle DOM element directly
+        customContainer = customScrollContainer;
+      } else if (customScrollContainer && 'current' in customScrollContainer) {
+        // Handle React ref
+        customContainer = customScrollContainer.current;
+      }
+      if (customContainer) {
+        var containerRect = customContainer.getBoundingClientRect();
+        containerHeight = containerRect.height;
+        containerTop = containerRect.top;
+      }
+    }
+
+    // Calculate available space below the trigger
+    var availableSpaceBelow = containerHeight - (_triggerBox.top - containerTop);
+
+    // Use a more reasonable threshold for position decision
+    // Consider the minimum space needed for a usable dropdown
+    if (availableSpaceBelow > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';
@@ -4333,13 +4363,20 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     //-----------
     // Set the pop-up height
     if (targetPos === 'top') {
-      contentMaxHeight = _triggerBox.top;
+      // Calculate available space above the trigger
+      var availableSpaceAbove = _triggerBox.top - containerTop;
+      contentMaxHeight = availableSpaceAbove;
 
       // height restrictions
       contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
+
+      // Calculate the final height with minimum height protection
+      var contentHeightOffset = 0;
+      var finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
+
       if (_contentBox.height > contentMaxHeight) {
-        listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
-        if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - contentHeightOffset;
+        listContentRef.current.style.height = finalHeight + 'px';
+        if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = finalHeight;
 
         // has scrollbar
         listContentRef.current.dataset.hasScrollbar = 'true';
@@ -4354,13 +4391,20 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       }
     }
     if (targetPos === 'bottom') {
-      contentMaxHeight = window.innerHeight - _triggerBox.bottom;
+      // Calculate available space below the trigger
+      var _availableSpaceBelow = containerHeight - (_triggerBox.bottom - containerTop);
+      contentMaxHeight = _availableSpaceBelow;
 
       // height restrictions
       contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
+
+      // Calculate the final height with minimum height protection
+      var _contentHeightOffset = 10;
+      var _finalHeight = Math.max(contentMaxHeight - _contentHeightOffset, 150); // Ensure minimum height of 150px
+
       if (_contentBox.height > contentMaxHeight) {
-        listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
-        if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - 10;
+        listContentRef.current.style.height = _finalHeight + 'px';
+        if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = _finalHeight;
 
         // has scrollbar
         listContentRef.current.dataset.hasScrollbar = 'true';
@@ -4380,17 +4424,16 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     // Adjust position
     if (targetPos === 'top') {
       _modalRef.style.left = x + 'px';
-      //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
-      _modalRef.style.top = 'auto';
-      _modalRef.style.bottom = window.innerHeight - _triggerBox.top + POS_OFFSET + 2 + 'px';
-      _modalRef.style.setProperty('position', 'fixed', 'important');
+      _modalRef.style.bottom = 'auto';
+      // Position the popup above the trigger without overlapping
+      var topPosition = y - POS_OFFSET - listContentRef.current.clientHeight - 2;
+      _modalRef.style.top = topPosition + 'px';
       _modalRef.classList.add('pos-top');
     }
     if (targetPos === 'bottom') {
       _modalRef.style.left = x + 'px';
       _modalRef.style.bottom = 'auto';
       _modalRef.style.top = y + height + POS_OFFSET + 'px';
-      _modalRef.style.setProperty('position', 'absolute', 'important');
       _modalRef.classList.remove('pos-top');
     }
 
@@ -4400,16 +4443,38 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     var _modalContent = _modalRef;
     var _modalBox = _modalContent.getBoundingClientRect();
     if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
+      // Get container width for boundary checking
+      var containerWidth = window.innerWidth;
+      var containerLeft = 0;
+      if (customScrollContainer) {
+        var _customContainer = null;
+        if (typeof customScrollContainer === 'string') {
+          // Handle selector string
+          _customContainer = document.querySelector(customScrollContainer);
+        } else if (customScrollContainer instanceof HTMLElement) {
+          // Handle DOM element directly
+          _customContainer = customScrollContainer;
+        } else if (customScrollContainer && 'current' in customScrollContainer) {
+          // Handle React ref
+          _customContainer = customScrollContainer.current;
+        }
+        if (_customContainer) {
+          var _containerRect = _customContainer.getBoundingClientRect();
+          containerWidth = _containerRect.width;
+          containerLeft = _containerRect.left;
+        }
+      }
+
       // 10 pixels is used to account for some bias in mobile devices
-      if (_modalBox.right + 10 > window.innerWidth) {
-        var _modalOffsetPosition = _modalBox.right - window.innerWidth + EXCEEDED_SIDE_POS_OFFSET;
+      if (_modalBox.right + 10 > containerLeft + containerWidth) {
+        var _modalOffsetPosition = _modalBox.right - (containerLeft + containerWidth) + EXCEEDED_SIDE_POS_OFFSET;
         _modalContent.dataset.offset = _modalOffsetPosition;
         _modalContent.style.marginLeft = "-".concat(_modalOffsetPosition, "px");
         // console.log('_modalPosition: ', _modalOffsetPosition)
       }
 
-      if (_modalBox.left - 10 < 0) {
-        var _modalOffsetPosition2 = Math.abs(_modalBox.left) + EXCEEDED_SIDE_POS_OFFSET;
+      if (_modalBox.left - 10 < containerLeft) {
+        var _modalOffsetPosition2 = Math.abs(_modalBox.left - containerLeft) + EXCEEDED_SIDE_POS_OFFSET;
         _modalContent.dataset.offset = _modalOffsetPosition2;
         _modalContent.style.marginLeft = "".concat(_modalOffsetPosition2, "px");
         // console.log('_modalPosition: ', _modalOffsetPosition)

package/lib/cjs/CascadingSelect/index.js

@@ -2322,6 +2322,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var inputRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var listRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
   // searchable
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
@@ -2439,7 +2440,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     // STEP 2:
     //-----------
     // Detect position
-    if (window.innerHeight - _triggerBox.top > 100) {
+    if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';

package/lib/cjs/CascadingSelectE2E/index.js

@@ -2679,6 +2679,7 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var inputRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var listRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
   // searchable
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
@@ -2821,7 +2822,7 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
     // STEP 2:
     //-----------
     // Detect position
-    if (window.innerHeight - _triggerBox.top > 100) {
+    if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';

package/lib/cjs/Date/index.js

@@ -5034,6 +5034,8 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     langToday = props.langToday,
     attributes = _objectWithoutProperties(props, _excluded);
   var DEPTH = depth || 1055; // the default value same as bootstrap
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
   var defaultValueIsEmpty = function defaultValueIsEmpty(s) {
     return typeof s === 'undefined' || s === null || s === 'null' || s === '';
   };
@@ -5328,7 +5330,7 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     // STEP 1:
     //-----------
     // Detect position
-    if (window.innerHeight - _triggerBox.top > 100) {
+    if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';

package/lib/cjs/DropdownMenu/index.js

@@ -1285,6 +1285,8 @@ var DropdownMenu = function DropdownMenu(props) {
     selected = _useState4[0],
     setSelected = _useState4[1];
   var _hoverDelay = !isNaN(hoverDelay) && typeof hoverDelay !== 'undefined' ? hoverDelay : 150;
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
   var defaultLabel = triggerContent === undefined ? '' : triggerContent;
   var selectedLabel = triggerSwitchActive ? selected ? selected.label : defaultLabel : defaultLabel;
   var selectOptionsListPresentation = options === null || options === void 0 ? void 0 : options.map(function (selectOption, index) {
@@ -1375,7 +1377,7 @@ var DropdownMenu = function DropdownMenu(props) {
       // STEP 2:
       //-----------
       // Detect position
-      if (window.innerHeight - _triggerBox.top > 100) {
+      if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
         targetPos = 'bottom';
       } else {
         targetPos = 'top';

package/lib/cjs/LiveSearch/index.js

@@ -2892,6 +2892,7 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
   var EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
   var AUTO_SHOW_OPTIONS = typeof autoShowOptions !== 'undefined' && autoShowOptions === true ? true : false;
   var MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false; // Manual requests
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
   var NO_MATCH_POPUP = typeof noMatchPopup === 'undefined' ? true : noMatchPopup;
   var WIN_WIDTH = typeof winWidth === 'function' ? winWidth() : winWidth ? winWidth : 'auto';
@@ -3025,7 +3026,6 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     if (isBlurringRef.current && !MANUAL_REQ) return;
 
     //
-    var contentHeightOffset = 80;
     var contentMaxHeight = 0;
 
     // update modal position
@@ -3052,7 +3052,7 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     // STEP 2:
     //-----------
     // Detect position
-    if (window.innerHeight - _triggerBox.top > 100) {
+    if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';
@@ -3066,6 +3066,11 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     var _contentActualHeight = listContentRef.current.querySelector('.livesearch__options-contentlist-inner').clientHeight;
     if (targetPos === 'top') {
       contentMaxHeight = _triggerBox.top;
+
+      // Calculate the final height with minimum height protection
+      var contentHeightOffset = 0;
+      var finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
+
       if (_contentBox.height > _contentActualHeight) {
         if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
       } else {
@@ -3073,11 +3078,16 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
 
         // recalculate the height
         _contentBox = listContentRef.current.getBoundingClientRect();
-        if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
+        if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = finalHeight + 'px';
       }
     }
     if (targetPos === 'bottom') {
       contentMaxHeight = window.innerHeight - _triggerBox.bottom;
+
+      // Calculate the final height with minimum height protection
+      var _contentHeightOffset = 10;
+      var _finalHeight = Math.max(contentMaxHeight - _contentHeightOffset, 150); // Ensure minimum height of 150px
+
       if (_contentBox.height > _contentActualHeight) {
         if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
       } else {
@@ -3085,7 +3095,7 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
 
         // recalculate the height
         _contentBox = listContentRef.current.getBoundingClientRect();
-        if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
+        if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = _finalHeight + 'px';
       }
     }
 
@@ -3094,17 +3104,16 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     // Adjust position
     if (targetPos === 'top') {
       _modalRef.style.left = x + 'px';
-      //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
-      _modalRef.style.top = 'auto';
-      _modalRef.style.bottom = window.innerHeight - _triggerBox.top + POS_OFFSET + 2 + 'px';
-      _modalRef.style.setProperty('position', 'fixed', 'important');
+      _modalRef.style.bottom = 'auto';
+      // Position the popup above the trigger without overlapping
+      var topPosition = y - POS_OFFSET - listContentRef.current.clientHeight - 2;
+      _modalRef.style.top = topPosition + 'px';
       _modalRef.classList.add('pos-top');
     }
     if (targetPos === 'bottom') {
       _modalRef.style.left = x + 'px';
       _modalRef.style.bottom = 'auto';
       _modalRef.style.top = y + height + POS_OFFSET + 'px';
-      _modalRef.style.setProperty('position', 'absolute', 'important');
       _modalRef.classList.remove('pos-top');
     }
 

package/lib/cjs/Select/index.d.ts

@@ -47,6 +47,7 @@ export declare type SelectProps = {
     controlClassName?: string;
     controlExClassName?: string;
     optionsExClassName?: string;
+    customScrollContainer?: string | HTMLElement | React.RefObject<HTMLElement>;
     exceededSidePosOffset?: number;
     clearIcon?: boolean;
     renderOption?: (optionData: OptionConfig, index: number) => React.ReactNode;

package/lib/cjs/Select/index.js

@@ -3578,7 +3578,7 @@ var format_string = __webpack_require__(933);
 // EXTERNAL MODULE: ../Utils/dist/cjs/cls.js
 var cls = __webpack_require__(188);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded = ["contentRef", "popupRef", "wrapperClassName", "controlClassName", "controlExClassName", "optionsExClassName", "exceededSidePosOffset", "clearIcon", "renderOption", "multiSelect", "multiSelectEntireAreaTrigger", "multiSelectSelectedItemOnlyStatus", "renderSelectedValue", "disabled", "required", "defaultValue", "value", "label", "name", "readOnly", "placeholder", "id", "autoComplete", "autoCapitalize", "spellCheck", "options", "clearTrigger", "loader", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "firstRequestAutoExec", "fetchTrigger", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus", "onKeyPressed"];
+var _excluded = ["contentRef", "popupRef", "wrapperClassName", "controlClassName", "controlExClassName", "optionsExClassName", "customScrollContainer", "exceededSidePosOffset", "clearIcon", "renderOption", "multiSelect", "multiSelectEntireAreaTrigger", "multiSelectSelectedItemOnlyStatus", "renderSelectedValue", "disabled", "required", "defaultValue", "value", "label", "name", "readOnly", "placeholder", "id", "autoComplete", "autoCapitalize", "spellCheck", "options", "clearTrigger", "loader", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "firstRequestAutoExec", "fetchTrigger", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus", "onKeyPressed"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -3626,6 +3626,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     controlClassName = props.controlClassName,
     controlExClassName = props.controlExClassName,
     optionsExClassName = props.optionsExClassName,
+    customScrollContainer = props.customScrollContainer,
     exceededSidePosOffset = props.exceededSidePosOffset,
     clearIcon = props.clearIcon,
     renderOption = props.renderOption,
@@ -3701,6 +3702,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   var listContentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var optionsRes = options ? (0,validate.isJSON)(options) ? JSON.parse(options) : options : [];
   var LIST_CONTAINER_MAX_HEIGHT = 300;
+  var MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
   var keyboardSelectedItem = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
 
   // loading
@@ -4286,7 +4289,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     if (isBlurringRef.current) return;
 
     //
-    var contentHeightOffset = 80;
     var contentMaxHeight = 0;
 
     // update modal position
@@ -4321,8 +4323,36 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     _contentOldHeight = listContainerHeightLimit(_contentOldHeight);
 
     // You need to wait for the height of the pop-up container to be set
-    // Detect position、
-    if (window.innerHeight - _triggerBox.top > 100) {
+    // Detect position
+    var containerHeight = window.innerHeight;
+    var containerTop = 0;
+
+    // If custom scroll container is specified, use it instead of window
+    if (customScrollContainer) {
+      var customContainer = null;
+      if (typeof customScrollContainer === 'string') {
+        // Handle selector string
+        customContainer = document.querySelector(customScrollContainer);
+      } else if (customScrollContainer instanceof HTMLElement) {
+        // Handle DOM element directly
+        customContainer = customScrollContainer;
+      } else if (customScrollContainer && 'current' in customScrollContainer) {
+        // Handle React ref
+        customContainer = customScrollContainer.current;
+      }
+      if (customContainer) {
+        var containerRect = customContainer.getBoundingClientRect();
+        containerHeight = containerRect.height;
+        containerTop = containerRect.top;
+      }
+    }
+
+    // Calculate available space below the trigger
+    var availableSpaceBelow = containerHeight - (_triggerBox.top - containerTop);
+
+    // Use a more reasonable threshold for position decision
+    // Consider the minimum space needed for a usable dropdown
+    if (availableSpaceBelow > MIN_SPACE_FOR_DROPDOWN) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';
@@ -4333,13 +4363,20 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     //-----------
     // Set the pop-up height
     if (targetPos === 'top') {
-      contentMaxHeight = _triggerBox.top;
+      // Calculate available space above the trigger
+      var availableSpaceAbove = _triggerBox.top - containerTop;
+      contentMaxHeight = availableSpaceAbove;
 
       // height restrictions
       contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
+
+      // Calculate the final height with minimum height protection
+      var contentHeightOffset = 0;
+      var finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
+
       if (_contentBox.height > contentMaxHeight) {
-        listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
-        if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - contentHeightOffset;
+        listContentRef.current.style.height = finalHeight + 'px';
+        if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = finalHeight;
 
         // has scrollbar
         listContentRef.current.dataset.hasScrollbar = 'true';
@@ -4354,13 +4391,20 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       }
     }
     if (targetPos === 'bottom') {
-      contentMaxHeight = window.innerHeight - _triggerBox.bottom;
+      // Calculate available space below the trigger
+      var _availableSpaceBelow = containerHeight - (_triggerBox.bottom - containerTop);
+      contentMaxHeight = _availableSpaceBelow;
 
       // height restrictions
       contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
+
+      // Calculate the final height with minimum height protection
+      var _contentHeightOffset = 10;
+      var _finalHeight = Math.max(contentMaxHeight - _contentHeightOffset, 150); // Ensure minimum height of 150px
+
       if (_contentBox.height > contentMaxHeight) {
-        listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
-        if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - 10;
+        listContentRef.current.style.height = _finalHeight + 'px';
+        if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = _finalHeight;
 
         // has scrollbar
         listContentRef.current.dataset.hasScrollbar = 'true';
@@ -4380,17 +4424,16 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     // Adjust position
     if (targetPos === 'top') {
       _modalRef.style.left = x + 'px';
-      //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
-      _modalRef.style.top = 'auto';
-      _modalRef.style.bottom = window.innerHeight - _triggerBox.top + POS_OFFSET + 2 + 'px';
-      _modalRef.style.setProperty('position', 'fixed', 'important');
+      _modalRef.style.bottom = 'auto';
+      // Position the popup above the trigger without overlapping
+      var topPosition = y - POS_OFFSET - listContentRef.current.clientHeight - 2;
+      _modalRef.style.top = topPosition + 'px';
       _modalRef.classList.add('pos-top');
     }
     if (targetPos === 'bottom') {
       _modalRef.style.left = x + 'px';
       _modalRef.style.bottom = 'auto';
       _modalRef.style.top = y + height + POS_OFFSET + 'px';
-      _modalRef.style.setProperty('position', 'absolute', 'important');
       _modalRef.classList.remove('pos-top');
     }
 
@@ -4400,16 +4443,38 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     var _modalContent = _modalRef;
     var _modalBox = _modalContent.getBoundingClientRect();
     if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
+      // Get container width for boundary checking
+      var containerWidth = window.innerWidth;
+      var containerLeft = 0;
+      if (customScrollContainer) {
+        var _customContainer = null;
+        if (typeof customScrollContainer === 'string') {
+          // Handle selector string
+          _customContainer = document.querySelector(customScrollContainer);
+        } else if (customScrollContainer instanceof HTMLElement) {
+          // Handle DOM element directly
+          _customContainer = customScrollContainer;
+        } else if (customScrollContainer && 'current' in customScrollContainer) {
+          // Handle React ref
+          _customContainer = customScrollContainer.current;
+        }
+        if (_customContainer) {
+          var _containerRect = _customContainer.getBoundingClientRect();
+          containerWidth = _containerRect.width;
+          containerLeft = _containerRect.left;
+        }
+      }
+
       // 10 pixels is used to account for some bias in mobile devices
-      if (_modalBox.right + 10 > window.innerWidth) {
-        var _modalOffsetPosition = _modalBox.right - window.innerWidth + EXCEEDED_SIDE_POS_OFFSET;
+      if (_modalBox.right + 10 > containerLeft + containerWidth) {
+        var _modalOffsetPosition = _modalBox.right - (containerLeft + containerWidth) + EXCEEDED_SIDE_POS_OFFSET;
         _modalContent.dataset.offset = _modalOffsetPosition;
         _modalContent.style.marginLeft = "-".concat(_modalOffsetPosition, "px");
         // console.log('_modalPosition: ', _modalOffsetPosition)
       }
 
-      if (_modalBox.left - 10 < 0) {
-        var _modalOffsetPosition2 = Math.abs(_modalBox.left) + EXCEEDED_SIDE_POS_OFFSET;
+      if (_modalBox.left - 10 < containerLeft) {
+        var _modalOffsetPosition2 = Math.abs(_modalBox.left - containerLeft) + EXCEEDED_SIDE_POS_OFFSET;
         _modalContent.dataset.offset = _modalOffsetPosition2;
         _modalContent.style.marginLeft = "".concat(_modalOffsetPosition2, "px");
         // console.log('_modalPosition: ', _modalOffsetPosition)

package/lib/esm/CascadingSelect/index.tsx

@@ -168,6 +168,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
     const rootRef = useRef<any>(null);
     const inputRef = useRef<any>(null);
     const listRef = useRef<any>(null);
+    const MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
     // searchable
     const [columnSearchKeywords, setColumnSearchKeywords] = useState<string[]>([]);
@@ -282,7 +283,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
         // STEP 2:
         //-----------
         // Detect position
-        if (window.innerHeight - _triggerBox.top > 100) {
+        if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
             targetPos = 'bottom';
         } else {
             targetPos = 'top';

package/lib/esm/CascadingSelectE2E/index.tsx

@@ -184,6 +184,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
     const rootRef = useRef<any>(null);
     const inputRef = useRef<any>(null);
     const listRef = useRef<any>(null);
+    const MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
     // searchable
     const [columnSearchKeywords, setColumnSearchKeywords] = useState<string[]>([]);
@@ -318,7 +319,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
         // STEP 2:
         //-----------
         // Detect position
-        if (window.innerHeight - _triggerBox.top > 100) {
+        if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
             targetPos = 'bottom';
         } else {
             targetPos = 'top';

package/lib/esm/Date/index.tsx

@@ -193,6 +193,9 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
 
 
     const DEPTH = depth || 1055;  // the default value same as bootstrap
+    const MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
+
     const defaultValueIsEmpty = (s: any) => {
         return typeof s === 'undefined' || s === null || s === 'null' || s === '';
     };
@@ -521,7 +524,7 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
         // STEP 1:
         //-----------
         // Detect position
-        if (window.innerHeight - _triggerBox.top > 100) {
+        if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
             targetPos = 'bottom';
         } else {
             targetPos = 'top';

package/lib/esm/DropdownMenu/index.tsx

@@ -88,6 +88,7 @@ const DropdownMenu = (props: DropdownMenuProps) => {
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const [selected, setSelected] = useState<any>(null);
     const _hoverDelay = !isNaN(hoverDelay as never) && typeof hoverDelay !== 'undefined' ? hoverDelay : 150;
+        const MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
    
     const defaultLabel = triggerContent === undefined ? '' : triggerContent;
@@ -207,7 +208,7 @@ const DropdownMenu = (props: DropdownMenuProps) => {
             // STEP 2:
             //-----------
             // Detect position
-            if (window.innerHeight - _triggerBox.top > 100) {
+            if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
                 targetPos = 'bottom';
             } else {
                 targetPos = 'top';

package/lib/esm/LiveSearch/index.tsx

@@ -153,6 +153,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
     const EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
     const AUTO_SHOW_OPTIONS = typeof autoShowOptions !== 'undefined' && autoShowOptions === true ? true : false; 
     const MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;  // Manual requests
+    const MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
     const NO_MATCH_POPUP = typeof noMatchPopup === 'undefined' ? true : noMatchPopup;
     const WIN_WIDTH = typeof winWidth === 'function' ? winWidth() : winWidth ? winWidth : 'auto';
@@ -275,7 +276,6 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
 
 
         //
-        const contentHeightOffset = 80;
         let contentMaxHeight = 0;
 
         // update modal position
@@ -300,7 +300,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         // STEP 2:
         //-----------
         // Detect position
-        if (window.innerHeight - _triggerBox.top > 100) {
+        if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
             targetPos = 'bottom';
         } else {
             targetPos = 'top';
@@ -320,6 +320,10 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         if (targetPos === 'top') {
             contentMaxHeight = _triggerBox.top;
 
+            // Calculate the final height with minimum height protection
+            const contentHeightOffset = 0;
+            const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
+
             if (_contentBox.height > _contentActualHeight) {
                 if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
             } else {
@@ -327,7 +331,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
 
                 // recalculate the height
                 _contentBox = listContentRef.current.getBoundingClientRect();
-                if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
+                if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = finalHeight + 'px';
 
             }
         }
@@ -335,6 +339,10 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         if (targetPos === 'bottom') {
             contentMaxHeight = window.innerHeight - _triggerBox.bottom;
 
+            // Calculate the final height with minimum height protection
+            const contentHeightOffset = 10;
+            const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
+
             if (_contentBox.height > _contentActualHeight) {
                 if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
             } else {
@@ -342,7 +350,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
 
                 // recalculate the height
                 _contentBox = listContentRef.current.getBoundingClientRect();
-                if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
+                if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = finalHeight + 'px';
             }
 
         }
@@ -354,25 +362,22 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         // Adjust position
         if (targetPos === 'top') {
             _modalRef.style.left = x + 'px';
-            //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
-            _modalRef.style.top = 'auto';
-            _modalRef.style.bottom = (window.innerHeight - _triggerBox.top) + POS_OFFSET + 2 + 'px';
-            _modalRef.style.setProperty('position', 'fixed', 'important');
+            _modalRef.style.bottom = 'auto';
+            // Position the popup above the trigger without overlapping
+            const topPosition = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2;
+            _modalRef.style.top = topPosition + 'px';
             _modalRef.classList.add('pos-top');
+
         }
 
         if (targetPos === 'bottom') {
             _modalRef.style.left = x + 'px';
             _modalRef.style.bottom = 'auto';
             _modalRef.style.top = y + height + POS_OFFSET + 'px';
-            _modalRef.style.setProperty('position', 'absolute', 'important');
             _modalRef.classList.remove('pos-top');
         }
 
 
-
-
-
         // STEP 5:
         //-----------
         // Determine whether it exceeds the far right or left side of the screen

package/lib/esm/Select/index.tsx

@@ -109,6 +109,7 @@ export type SelectProps = {
     controlClassName?: string;
     controlExClassName?: string;
     optionsExClassName?: string;
+    customScrollContainer?: string | HTMLElement | React.RefObject<HTMLElement>;
     exceededSidePosOffset?: number;
     clearIcon?: boolean; 
     renderOption?: (optionData: OptionConfig, index: number) => React.ReactNode;
@@ -188,6 +189,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         controlClassName,
         controlExClassName,
         optionsExClassName,
+        customScrollContainer,
         exceededSidePosOffset,
         clearIcon,
         renderOption,
@@ -265,6 +267,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     const listContentRef = useRef<any>(null);
     const optionsRes = options ? (isJSON(options) ? JSON.parse(options as string) : options) : [];
     const LIST_CONTAINER_MAX_HEIGHT = 300;
+    const MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
 
     const keyboardSelectedItem = useRef<any>(null);
 
@@ -813,7 +816,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         if (isBlurringRef.current) return;
 
         //
-        const contentHeightOffset = 80;
         let contentMaxHeight = 0;
 
         // update modal position
@@ -850,8 +852,38 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         _contentOldHeight = listContainerHeightLimit(_contentOldHeight);
 
         // You need to wait for the height of the pop-up container to be set
-        // Detect position、
-        if (window.innerHeight - _triggerBox.top > 100) {
+        // Detect position
+        let containerHeight = window.innerHeight;
+        let containerTop = 0;
+        
+        // If custom scroll container is specified, use it instead of window
+        if (customScrollContainer) {
+            let customContainer: HTMLElement | null = null;
+            
+            if (typeof customScrollContainer === 'string') {
+                // Handle selector string
+                customContainer = document.querySelector(customScrollContainer);
+            } else if (customScrollContainer instanceof HTMLElement) {
+                // Handle DOM element directly
+                customContainer = customScrollContainer;
+            } else if (customScrollContainer && 'current' in customScrollContainer) {
+                // Handle React ref
+                customContainer = customScrollContainer.current;
+            }
+            
+            if (customContainer) {
+                const containerRect = customContainer.getBoundingClientRect();
+                containerHeight = containerRect.height;
+                containerTop = containerRect.top;
+            }
+        }
+        
+        // Calculate available space below the trigger
+        const availableSpaceBelow = containerHeight - (_triggerBox.top - containerTop);
+        
+        // Use a more reasonable threshold for position decision
+        // Consider the minimum space needed for a usable dropdown
+        if (availableSpaceBelow > MIN_SPACE_FOR_DROPDOWN) {
             targetPos = 'bottom';
         } else {
             targetPos = 'top';
@@ -865,15 +897,20 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         //-----------
         // Set the pop-up height
         if (targetPos === 'top') {
-            contentMaxHeight = _triggerBox.top;
+            // Calculate available space above the trigger
+            const availableSpaceAbove = _triggerBox.top - containerTop;
+            contentMaxHeight = availableSpaceAbove;
 
             // height restrictions
             contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
 
+            // Calculate the final height with minimum height protection
+            const contentHeightOffset = 0;
+            const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
 
             if (_contentBox.height > contentMaxHeight) {
-                listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
-                if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - contentHeightOffset;
+                listContentRef.current.style.height = finalHeight + 'px';
+                if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = finalHeight;
 
                 // has scrollbar
                 listContentRef.current.dataset.hasScrollbar = 'true';
@@ -892,16 +929,20 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         }
 
         if (targetPos === 'bottom') {
-            contentMaxHeight = window.innerHeight - _triggerBox.bottom;
-
+            // Calculate available space below the trigger
+            const availableSpaceBelow = containerHeight - (_triggerBox.bottom - containerTop);
+            contentMaxHeight = availableSpaceBelow;
 
             // height restrictions
             contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
 
+            // Calculate the final height with minimum height protection
+            const contentHeightOffset = 10;
+            const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
 
             if (_contentBox.height > contentMaxHeight) {
-                listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
-                if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - 10;
+                listContentRef.current.style.height = finalHeight + 'px';
+                if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = finalHeight;
 
                 // has scrollbar
                 listContentRef.current.dataset.hasScrollbar = 'true';
@@ -925,18 +966,18 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         // Adjust position
         if (targetPos === 'top') {
             _modalRef.style.left = x + 'px';
-            //_modalRef.style.top = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2 + 'px';
-            _modalRef.style.top = 'auto';
-            _modalRef.style.bottom = (window.innerHeight - _triggerBox.top) + POS_OFFSET + 2 + 'px';
-            _modalRef.style.setProperty('position', 'fixed', 'important');
+            _modalRef.style.bottom = 'auto';
+            // Position the popup above the trigger without overlapping
+            const topPosition = y - POS_OFFSET - (listContentRef.current.clientHeight) - 2;
+            _modalRef.style.top = topPosition + 'px';
             _modalRef.classList.add('pos-top');
+
         }
 
         if (targetPos === 'bottom') {
             _modalRef.style.left = x + 'px';
             _modalRef.style.bottom = 'auto';
             _modalRef.style.top = y + height + POS_OFFSET + 'px';
-            _modalRef.style.setProperty('position', 'absolute', 'important');
             _modalRef.classList.remove('pos-top');
         }
 
@@ -949,23 +990,46 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         const _modalBox = _modalContent.getBoundingClientRect();
         if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
 
+            // Get container width for boundary checking
+            let containerWidth = window.innerWidth;
+            let containerLeft = 0;
+            
+            if (customScrollContainer) {
+                let customContainer: HTMLElement | null = null;
+                
+                if (typeof customScrollContainer === 'string') {
+                    // Handle selector string
+                    customContainer = document.querySelector(customScrollContainer);
+                } else if (customScrollContainer instanceof HTMLElement) {
+                    // Handle DOM element directly
+                    customContainer = customScrollContainer;
+                } else if (customScrollContainer && 'current' in customScrollContainer) {
+                    // Handle React ref
+                    customContainer = customScrollContainer.current;
+                }
+                
+                if (customContainer) {
+                    const containerRect = customContainer.getBoundingClientRect();
+                    containerWidth = containerRect.width;
+                    containerLeft = containerRect.left;
+                }
+            }
+
             // 10 pixels is used to account for some bias in mobile devices
-            if ((_modalBox.right + 10) > window.innerWidth) {
-                const _modalOffsetPosition = _modalBox.right - window.innerWidth + EXCEEDED_SIDE_POS_OFFSET;
+            if ((_modalBox.right + 10) > (containerLeft + containerWidth)) {
+                const _modalOffsetPosition = _modalBox.right - (containerLeft + containerWidth) + EXCEEDED_SIDE_POS_OFFSET;
                 _modalContent.dataset.offset = _modalOffsetPosition;
                 _modalContent.style.marginLeft = `-${_modalOffsetPosition}px`;
                 // console.log('_modalPosition: ', _modalOffsetPosition)
             }
 
-
-            if ((_modalBox.left - 10) < 0) {
-                const _modalOffsetPosition = Math.abs(_modalBox.left) + EXCEEDED_SIDE_POS_OFFSET;
+            if ((_modalBox.left - 10) < containerLeft) {
+                const _modalOffsetPosition = Math.abs(_modalBox.left - containerLeft) + EXCEEDED_SIDE_POS_OFFSET;
                 _modalContent.dataset.offset = _modalOffsetPosition;
                 _modalContent.style.marginLeft = `${_modalOffsetPosition}px`;
                 // console.log('_modalPosition: ', _modalOffsetPosition)
             }
 
-
         }
 
 

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.7.525",
+  "version": "4.7.545",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",