funda-ui 4.7.517 → 4.7.533

package/CascadingSelectE2E/index.css

@@ -1,20 +1,20 @@
 /* ======================================================
     <!-- Cascading Select End-to-end -->
 /* ====================================================== */
-.casc-select-e2e__wrapper {
-  --casc-select-e2e-arrow-fill: #a5a5a5;
-  --casc-select-e2e-result-arrow-fill: #a5a5a5;
-  --casc-select-e2e-result-font-size: 1rem;
-  --casc-select-e2e-result-padding-x: 0.75rem;
-  --casc-select-e2e-result-padding-y: 0.375rem;
-}
-.casc-select-e2e__wrapper .casc-select-e2e__result {
+.casc-menu-e2e__wrapper {
+  --casc-menu-e2e-arrow-fill: #a5a5a5;
+  --casc-menu-e2e-result-arrow-fill: #a5a5a5;
+  --casc-menu-e2e-result-font-size: 1rem;
+  --casc-menu-e2e-result-padding-x: 0.75rem;
+  --casc-menu-e2e-result-padding-y: 0.375rem;
+}
+.casc-menu-e2e__wrapper .casc-menu-e2e__result {
   position: absolute;
   left: auto;
   z-index: 1;
   top: 0;
-  padding: var(--casc-select-e2e-result-padding-y) var(--casc-select-e2e-result-padding-x);
-  font-size: var(--casc-select-e2e-result-font-size);
+  padding: var(--casc-menu-e2e-result-padding-y) var(--casc-menu-e2e-result-padding-x);
+  font-size: var(--casc-menu-e2e-result-font-size);
   font-weight: 400;
   line-height: 1.5;
   color: inherit;
@@ -26,20 +26,20 @@
   /* required */
   display: flex;
 }
-.casc-select-e2e__wrapper .casc-select-e2e__result div {
+.casc-menu-e2e__wrapper .casc-menu-e2e__result div {
   /* required */
   display: flex;
 }
-.casc-select-e2e__wrapper .casc-select-e2e__result span {
+.casc-menu-e2e__wrapper .casc-menu-e2e__result span {
   padding: 3px;
 }
-.casc-select-e2e__wrapper .casc-select-e2e__result svg {
+.casc-menu-e2e__wrapper .casc-menu-e2e__result svg {
   margin: 0 0.3rem;
 }
-.casc-select-e2e__wrapper .casc-select-e2e__result svg path {
-  fill: var(--casc-select-e2e-result-arrow-fill);
+.casc-menu-e2e__wrapper .casc-menu-e2e__result svg path {
+  fill: var(--casc-menu-e2e-result-arrow-fill);
 }
-.casc-select-e2e__wrapper .casc-select-e2e__closemask {
+.casc-menu-e2e__wrapper .casc-menu-e2e__closemask {
   position: absolute;
   z-index: 1;
   top: 0;
@@ -49,77 +49,81 @@
   background: rgba(0, 0, 0, 0);
   user-select: none;
 }
-.casc-select-e2e__wrapper .casc-select-e2e__trigger {
+.casc-menu-e2e__wrapper .casc-menu-e2e__trigger {
   position: relative;
   z-index: 0;
 }
-.casc-select-e2e__wrapper .casc-select-e2e__val {
+.casc-menu-e2e__wrapper .casc-menu-e2e__val {
   position: relative;
 }
-.casc-select-e2e__wrapper .casc-select-e2e__val:not(.inputable) input {
+.casc-menu-e2e__wrapper .casc-menu-e2e__val:not(.inputable) input {
   cursor: pointer;
   color: transparent !important;
 }
-.casc-select-e2e__wrapper .casc-select-e2e__val:not(.inputable) input:focus {
+.casc-menu-e2e__wrapper .casc-menu-e2e__val:not(.inputable) input:focus {
   color: transparent !important;
 }
-.casc-select-e2e__wrapper .casc-select-e2e__val .arrow {
+.casc-menu-e2e__wrapper .casc-menu-e2e__val .arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 0.5rem;
 }
-.casc-select-e2e__wrapper .casc-select-e2e__val .arrow svg .arrow-fill-g {
-  fill: var(--casc-select-e2e-arrow-fill);
+.casc-menu-e2e__wrapper .casc-menu-e2e__val .arrow svg .arrow-fill-g {
+  fill: var(--casc-menu-e2e-arrow-fill);
 }
 
 /*------ List ------*/
-.casc-select-e2e__items-wrapper {
-  --casc-select-e2e-opt-font-size: 0.875rem;
-  --casc-select-e2e-opt-padding-x: .4rem;
-  --casc-select-e2e-opt-padding-y: .3rem;
-  --casc-select-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
-  --casc-select-e2e-opt-header-text-color: #999;
-  --casc-select-e2e-opt-hover-bg: #f7f7f7;
-  --casc-select-e2e-opt-active-bg: #eeeeee;
-  --casc-select-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
-  --casc-select-e2e-items-bg: #fff;
-  --casc-select-e2e-items-color: inherit;
-  --casc-select-e2e-items-border-color: rgba(0, 0, 0, .1);
-  --casc-select-e2e-items-li-border-color: #eee;
-  --casc-select-e2e-loader-color: #000000;
-  --casc-select-e2e-clean-btn-color: #b5b5b5;
-  --casc-select-e2e-searchbox-border-color: #ddd;
-  box-shadow: var(--casc-select-e2e-items-box-shadow);
+.casc-menu-e2e__items-wrapper {
+  --casc-menu-e2e-scrollbar-color: rgba(0, 0, 0, 0.2);
+  --casc-menu-e2e-scrollbar-track: rgba(0, 0, 0, 0);
+  --casc-menu-e2e-scrollbar-h: 3px;
+  --casc-menu-e2e-scrollbar-w: 3px;
+  --casc-menu-e2e-per-col-maxheight: 300px;
+  --casc-menu-e2e-opt-font-size: 0.875rem;
+  --casc-menu-e2e-opt-padding-x: .4rem;
+  --casc-menu-e2e-opt-padding-y: .3rem;
+  --casc-menu-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
+  --casc-menu-e2e-opt-header-text-color: #999;
+  --casc-menu-e2e-opt-hover-bg: #f7f7f7;
+  --casc-menu-e2e-opt-active-bg: #eeeeee;
+  --casc-menu-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
+  --casc-menu-e2e-items-bg: #fff;
+  --casc-menu-e2e-items-color: inherit;
+  --casc-menu-e2e-items-border-color: rgba(0, 0, 0, .1);
+  --casc-menu-e2e-items-li-border-color: #eee;
+  --casc-menu-e2e-loader-color: #000000;
+  --casc-menu-e2e-clean-btn-color: #b5b5b5;
+  --casc-menu-e2e-searchbox-border-color: #ddd;
+  box-shadow: var(--casc-menu-e2e-items-box-shadow);
   position: absolute;
   left: auto;
-  max-height: 300px;
-  border: 1px solid var(--casc-select-e2e-items-border-color);
-  background: var(--casc-select-e2e-items-bg);
+  border: 1px solid var(--casc-menu-e2e-items-border-color);
+  background: var(--casc-menu-e2e-items-bg);
   padding: 10px;
-  overflow-y: auto;
   box-sizing: border-box;
   top: 2.3rem;
   border-radius: 5px;
   width: max-content;
   /* required -> the content will not wrap at all even if it causes overflows*/
-  color: var(--casc-select-e2e-items-color);
+  color: var(--casc-menu-e2e-items-color);
   display: none;
   z-index: 1055; /* --bs-modal-zindex */
   /* each item */
+  /* Column */
   /* Searchbox */
   /* Options */
 }
-.casc-select-e2e__items-wrapper.active {
+.casc-menu-e2e__items-wrapper.active {
   display: block !important;
 }
-.casc-select-e2e__items-wrapper ul,
-.casc-select-e2e__items-wrapper li {
+.casc-menu-e2e__items-wrapper ul,
+.casc-menu-e2e__items-wrapper li {
   list-style: none;
   margin: 0;
   padding: 0;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__items-loader {
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__items-loader {
   position: absolute;
   pointer-events: none;
   left: 0;
@@ -131,98 +135,111 @@
   text-align: center;
   transform-origin: center;
   transform: translate(2px, 5px) rotate(0);
-  animation: 1s linear infinite casc-select-e2e__spinner;
+  animation: 1s linear infinite casc-menu-e2e__spinner;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__items-loader svg {
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__items-loader svg {
   vertical-align: top;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__items-loader svg path {
-  fill: var(--casc-select-e2e-loader-color);
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__items-loader svg path {
+  fill: var(--casc-menu-e2e-loader-color);
 }
-@keyframes casc-select-e2e__spinner {
+@keyframes casc-menu-e2e__spinner {
   to {
     transform: translate(2px, 5px) rotate(-360deg);
   }
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__close svg {
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__close svg {
   opacity: 0.4;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__close:hover svg {
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__close:hover svg {
   transition: 0.2s ease-out;
   opacity: 0.7;
 }
-.casc-select-e2e__items-wrapper ul {
+.casc-menu-e2e__items-wrapper ul {
   transition: 0.2s ease-out;
   min-width: 8px;
   min-height: 9px;
 }
-.casc-select-e2e__items-wrapper ul > li {
+.casc-menu-e2e__items-wrapper ul > li {
   position: relative;
   cursor: pointer;
   float: left;
   padding: 0 10px;
   margin-right: 15px;
-  border-right: 1px dotted var(--casc-select-e2e-items-li-border-color);
+  border-right: 1px dotted var(--casc-menu-e2e-items-li-border-color);
   transition: 0.2s ease-out;
 }
-.casc-select-e2e__items-wrapper ul > li.hide-col {
+.casc-menu-e2e__items-wrapper ul > li.hide-col {
   display: none;
 }
-.casc-select-e2e__items-wrapper ul > li:last-child {
+.casc-menu-e2e__items-wrapper ul > li:last-child {
   margin-right: 0;
   border-right: none;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__items-col-searchbox input {
-  border: 1px solid var(--casc-select-e2e-searchbox-border-color);
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__items-col {
+  max-height: var(--casc-menu-e2e-per-col-maxheight);
+  overflow-y: auto;
+}
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__items-col::-webkit-scrollbar {
+  width: var(--casc-menu-e2e-scrollbar-w);
+}
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__items-col::-webkit-scrollbar-thumb {
+  background: var(--casc-menu-e2e-scrollbar-color);
+}
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__items-col::-webkit-scrollbar-track {
+  background: var(--casc-menu-e2e-scrollbar-track);
+}
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__items-col-searchbox input {
+  border: 1px solid var(--casc-menu-e2e-searchbox-border-color);
   border-radius: 0.15rem;
   width: 100%;
   background: transparent;
   font-size: 0.75rem;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt {
-  padding: var(--casc-select-e2e-opt-padding-y) var(--casc-select-e2e-opt-padding-x);
-  font-size: var(--casc-select-e2e-opt-font-size);
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt {
+  padding: var(--casc-menu-e2e-opt-padding-y) var(--casc-menu-e2e-opt-padding-x);
+  font-size: var(--casc-menu-e2e-opt-font-size);
   border-radius: 2px;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt:hover {
-  background: var(--casc-select-e2e-opt-hover-bg);
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt:hover {
+  background: var(--casc-menu-e2e-opt-hover-bg);
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt.active {
-  background: var(--casc-select-e2e-opt-active-bg);
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt.active {
+  background: var(--casc-menu-e2e-opt-active-bg);
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt-header {
-  padding: var(--casc-select-e2e-opt-padding-y) var(--casc-select-e2e-opt-padding-x);
-  font-size: var(--casc-select-e2e-opt-font-size);
-  border-bottom: 1px dotted var(--casc-select-e2e-opt-header-border-color);
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header {
+  padding: var(--casc-menu-e2e-opt-padding-y) var(--casc-menu-e2e-opt-padding-x);
+  font-size: var(--casc-menu-e2e-opt-font-size);
+  border-bottom: 1px dotted var(--casc-menu-e2e-opt-header-border-color);
   border-radius: 2px;
   position: sticky;
-  top: calc(var(--casc-select-e2e-opt-font-size) * -1);
-  background: var(--casc-select-e2e-items-bg);
-  color: var(--casc-select-e2e-opt-header-text-color);
+  top: 0;
+  background: var(--casc-menu-e2e-items-bg);
+  color: var(--casc-menu-e2e-opt-header-text-color);
   display: flex;
   align-items: center;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt-header > span {
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header > span {
   cursor: default;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt-header:hover {
-  background: var(--casc-select-e2e-opt-hover-bg);
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header:hover {
+  background: var(--casc-menu-e2e-opt-hover-bg);
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt-header.active {
-  background: var(--casc-select-e2e-opt-active-bg);
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header.active {
+  background: var(--casc-menu-e2e-opt-active-bg);
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean {
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header .casc-menu-e2e__opt-header__clean {
   display: inline-block;
   margin-left: 0.2rem;
   padding: 0.1rem;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean:hover {
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header .casc-menu-e2e__opt-header__clean:hover {
   transform: scale(1.1);
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean svg {
-  border: 1px var(--casc-select-e2e-clean-btn-color) solid;
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header .casc-menu-e2e__opt-header__clean svg {
+  border: 1px var(--casc-menu-e2e-clean-btn-color) solid;
   border-radius: 50%;
 }
-.casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean svg path {
-  fill: var(--casc-select-e2e-clean-btn-color);
+.casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header .casc-menu-e2e__opt-header__clean svg path {
+  fill: var(--casc-menu-e2e-clean-btn-color);
 }

package/CascadingSelectE2E/index.js

@@ -2540,7 +2540,7 @@ function Group(props) {
         "data-value": JSON.stringify(item),
         "data-level": level,
         "data-query": item.queryId,
-        className: (0,cls.combinedCls)('casc-select-e2e__opt', {
+        className: (0,cls.combinedCls)('casc-menu-e2e__opt', {
           'active': item.current
         }),
         dangerouslySetInnerHTML: {
@@ -2554,13 +2554,13 @@ function Group(props) {
     } else {
       return columnTitle[level] === '' || perColumnHeadersShow === false ? null : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("h3", {
         key: index,
-        className: "casc-select-e2e__opt-header"
+        className: "casc-menu-e2e__opt-header"
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
         dangerouslySetInnerHTML: {
           __html: columnTitle[level]
         }
       }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-        className: "casc-select-e2e__opt-header__clean"
+        className: "casc-menu-e2e__opt-header__clean"
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
         tabIndex: -1,
         href: "#",
@@ -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)([]),
@@ -2798,7 +2799,7 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
     if (rootRef.current === null || inputRef.current === null) return;
 
     // update modal position
-    var _modalRef = document.querySelector("#casc-select-e2e__items-wrapper-".concat(idRes));
+    var _modalRef = document.querySelector("#casc-menu-e2e__items-wrapper-".concat(idRes));
     var _triggerRef = inputRef.current;
 
     // console.log(getAbsolutePositionOfStage(_triggerRef));
@@ -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';
@@ -2870,7 +2871,7 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
   }
 
   function popwinPosHide() {
-    var _modalRef = document.querySelector("#casc-select-e2e__items-wrapper-".concat(idRes));
+    var _modalRef = document.querySelector("#casc-menu-e2e__items-wrapper-".concat(idRes));
     if (_modalRef !== null) {
       // remove classnames and styles
       _modalRef.classList.remove('active');
@@ -2881,9 +2882,9 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
     var level = arguments.length > 2 ? arguments[2] : undefined;
     if (listRef.current === null) return;
     var latestDisplayColIndex = 0;
-    var currentItemsInner = listRef.current.querySelector('.casc-select-e2e__items-inner');
+    var currentItemsInner = listRef.current.querySelector('.casc-menu-e2e__items-inner');
     if (currentItemsInner !== null) {
-      var colItemsWrapper = [].slice.call(currentItemsInner.querySelectorAll('.casc-select-e2e__items-col'));
+      var colItemsWrapper = [].slice.call(currentItemsInner.querySelectorAll('.casc-menu-e2e__items-col'));
       colItemsWrapper.forEach(function (perCol) {
         perCol.classList.remove('hide-col');
       });
@@ -3204,10 +3205,10 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
 
     // active current option with DOM
     //////////////////////////////////////////
-    var currentItemsInner = e.currentTarget.closest('.casc-select-e2e__items-inner');
+    var currentItemsInner = e.currentTarget.closest('.casc-menu-e2e__items-inner');
     if (currentItemsInner !== null) {
       curData.forEach(function (v, col) {
-        var colItemsWrapper = currentItemsInner.querySelectorAll('.casc-select-e2e__items-col');
+        var colItemsWrapper = currentItemsInner.querySelectorAll('.casc-menu-e2e__items-col');
         colItemsWrapper.forEach(function (perCol) {
           var _col = Number(perCol.dataset.col);
           if (_col >= level) {
@@ -3743,9 +3744,9 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
     };
   }, []);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: (0,cls.clsWrite)(wrapperClassName, 'casc-select-e2e__wrapper mb-3 position-relative', "casc-select-e2e__wrapper ".concat(wrapperClassName)),
+    className: (0,cls.clsWrite)(wrapperClassName, 'casc-menu-e2e__wrapper mb-3 position-relative', "casc-menu-e2e__wrapper ".concat(wrapperClassName)),
     ref: rootRef,
-    "data-overlay-id": "casc-select-e2e__items-wrapper-".concat(idRes)
+    "data-overlay-id": "casc-menu-e2e__items-wrapper-".concat(idRes)
   }, label ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, typeof label === 'string' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("label", {
     htmlFor: idRes,
     className: "form-label",
@@ -3756,23 +3757,23 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
     htmlFor: idRes,
     className: "form-label"
   }, label)) : null, triggerContent ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: (0,cls.clsWrite)(triggerClassName, 'casc-select-e2e__trigger d-inline w-auto', "casc-select-e2e__trigger ".concat(triggerClassName)),
+    className: (0,cls.clsWrite)(triggerClassName, 'casc-menu-e2e__trigger d-inline w-auto', "casc-menu-e2e__trigger ".concat(triggerClassName)),
     onClick: handleDisplayOptions
   }, triggerContent)) : null, !hasErr ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
     show: true,
     containerClassName: "CascadingSelectE2E"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     ref: listRef,
-    id: "casc-select-e2e__items-wrapper-".concat(idRes),
-    className: "casc-select-e2e__items-wrapper position-absolute border shadow small",
+    id: "casc-menu-e2e__items-wrapper-".concat(idRes),
+    className: "casc-menu-e2e__items-wrapper position-absolute border shadow small",
     style: {
       zIndex: DEPTH,
       display: 'none'
     }
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("ul", {
-    className: "casc-select-e2e__items-inner"
+    className: "casc-menu-e2e__items-inner"
   }, loading ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: "casc-select-e2e__items-loader"
+    className: "casc-menu-e2e__items-loader"
   }, loader || /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
     height: "12px",
     width: "12px",
@@ -3808,7 +3809,7 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
       e.preventDefault();
       cancel();
     },
-    className: "casc-select-e2e__close position-absolute top-0 end-0 mt-0 mx-1"
+    className: "casc-menu-e2e__close position-absolute top-0 end-0 mt-0 mx-1"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
     width: "10px",
     height: "10px",
@@ -3829,9 +3830,9 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("li", {
         key: level,
         "data-col": level,
-        className: "casc-select-e2e__items-col"
+        className: "casc-menu-e2e__items-col"
       }, searchable && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-        className: "casc-select-e2e__items-col-searchbox"
+        className: "casc-menu-e2e__items-col-searchbox"
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
         type: "text",
         placeholder: searchPlaceholder,
@@ -3857,7 +3858,7 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
       return null;
     }
   })))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: (0,cls.combinedCls)('casc-select-e2e__val', {
+    className: (0,cls.combinedCls)('casc-menu-e2e__val', {
       'inputable': inputable
     }),
     onClick: handleDisplayOptions
@@ -3880,7 +3881,7 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
       }
     },
     id: idRes,
-    "data-overlay-id": "casc-select-e2e__items-wrapper-".concat(idRes),
+    "data-overlay-id": "casc-menu-e2e__items-wrapper-".concat(idRes),
     name: name,
     className: (0,cls.combinedCls)((0,cls.clsWrite)(controlClassName, 'form-control'), controlExClassName, {
       'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units),
@@ -3938,9 +3939,9 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
       }
     } : undefined
   }, attributes)), destroyParentIdMatch ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, !inputable ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: "casc-select-e2e__result"
+    className: "casc-menu-e2e__result"
   }, displayInfo(true)) : null) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, !inputable ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: "casc-select-e2e__result"
+    className: "casc-menu-e2e__result"
   }, displayInfo(false)) : null), required ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, requiredLabel || requiredLabel === '' ? requiredLabel : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "position-absolute end-0 top-0 my-2 mx-2 pe-3"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
@@ -3950,7 +3951,7 @@ var CascadingSelectE2E = /*#__PURE__*/(0,external_root_React_commonjs2_react_com
   }, units)) : null, propExist(iconRight) ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: (0,cls.clsWrite)(controlGroupTextClassName, 'input-group-text')
   }, iconRight)) : null), isShow ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: "casc-select-e2e__closemask",
+    className: "casc-menu-e2e__closemask",
     onClick: function onClick(e) {
       e.preventDefault();
       cancel();

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';
@@ -3052,7 +3053,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';

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;