funda-ui 4.7.517 → 4.7.533

package/CascadingSelect/index.css

@@ -1,20 +1,20 @@
 /* ======================================================
     <!-- Cascading Select -->
 /* ====================================================== */
-.casc-select__wrapper {
-  --casc-select-arrow-fill: #a5a5a5;
-  --casc-select-result-arrow-fill: #a5a5a5;
-  --casc-select-result-font-size: 1rem;
-  --casc-select-result-padding-x: 0.75rem;
-  --casc-select-result-padding-y: 0.375rem;
-}
-.casc-select__wrapper .casc-select__result {
+.casc-menu__wrapper {
+  --casc-menu-arrow-fill: #a5a5a5;
+  --casc-menu-result-arrow-fill: #a5a5a5;
+  --casc-menu-result-font-size: 1rem;
+  --casc-menu-result-padding-x: 0.75rem;
+  --casc-menu-result-padding-y: 0.375rem;
+}
+.casc-menu__wrapper .casc-menu__result {
   position: absolute;
   left: auto;
   z-index: 1;
   top: 0;
-  padding: var(--casc-select-result-padding-y) var(--casc-select-result-padding-x);
-  font-size: var(--casc-select-result-font-size);
+  padding: var(--casc-menu-result-padding-y) var(--casc-menu-result-padding-x);
+  font-size: var(--casc-menu-result-font-size);
   font-weight: 400;
   line-height: 1.5;
   color: inherit;
@@ -26,20 +26,20 @@
   /* required */
   display: flex;
 }
-.casc-select__wrapper .casc-select__result div {
+.casc-menu__wrapper .casc-menu__result div {
   /* required */
   display: flex;
 }
-.casc-select__wrapper .casc-select__result span {
+.casc-menu__wrapper .casc-menu__result span {
   padding: 3px;
 }
-.casc-select__wrapper .casc-select__result svg {
+.casc-menu__wrapper .casc-menu__result svg {
   margin: 0 0.3rem;
 }
-.casc-select__wrapper .casc-select__result svg path {
-  fill: var(--casc-select-result-arrow-fill);
+.casc-menu__wrapper .casc-menu__result svg path {
+  fill: var(--casc-menu-result-arrow-fill);
 }
-.casc-select__wrapper .casc-select__closemask {
+.casc-menu__wrapper .casc-menu__closemask {
   position: absolute;
   z-index: 1;
   top: 0;
@@ -49,77 +49,81 @@
   background: rgba(0, 0, 0, 0);
   user-select: none;
 }
-.casc-select__wrapper .casc-select__trigger {
+.casc-menu__wrapper .casc-menu__trigger {
   position: relative;
   z-index: 0;
 }
-.casc-select__wrapper .casc-select__val {
+.casc-menu__wrapper .casc-menu__val {
   position: relative;
 }
-.casc-select__wrapper .casc-select__val:not(.inputable) input {
+.casc-menu__wrapper .casc-menu__val:not(.inputable) input {
   cursor: pointer;
   color: transparent !important;
 }
-.casc-select__wrapper .casc-select__val:not(.inputable) input:focus {
+.casc-menu__wrapper .casc-menu__val:not(.inputable) input:focus {
   color: transparent !important;
 }
-.casc-select__wrapper .casc-select__val .arrow {
+.casc-menu__wrapper .casc-menu__val .arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 0.5rem;
 }
-.casc-select__wrapper .casc-select__val .arrow svg .arrow-fill-g {
-  fill: var(--casc-select-arrow-fill);
+.casc-menu__wrapper .casc-menu__val .arrow svg .arrow-fill-g {
+  fill: var(--casc-menu-arrow-fill);
 }
 
 /*------ List ------*/
-.casc-select__items-wrapper {
-  --casc-select-opt-font-size: 0.875rem;
-  --casc-select-opt-padding-x: .4rem;
-  --casc-select-opt-padding-y: .3rem;
-  --casc-select-opt-header-border-color: rgba(1, 1, 1, .2);
-  --casc-select-opt-header-text-color: #999;
-  --casc-select-opt-hover-bg: #f7f7f7;
-  --casc-select-opt-active-bg: #eeeeee;
-  --casc-select-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
-  --casc-select-items-bg: #fff;
-  --casc-select-items-color: inherit;
-  --casc-select-items-border-color: rgba(0, 0, 0, .1);
-  --casc-select-items-li-border-color: #eee;
-  --casc-select-loader-color: #000000;
-  --casc-select-clean-btn-color: #b5b5b5;
-  --casc-select-searchbox-border-color: #ddd;
-  box-shadow: var(--casc-select-items-box-shadow);
+.casc-menu__items-wrapper {
+  --casc-menu-scrollbar-color: rgba(0, 0, 0, 0.2);
+  --casc-menu-scrollbar-track: rgba(0, 0, 0, 0);
+  --casc-menu-scrollbar-h: 3px;
+  --casc-menu-scrollbar-w: 3px;
+  --casc-menu-per-col-maxheight: 300px;
+  --casc-menu-opt-font-size: 0.875rem;
+  --casc-menu-opt-padding-x: .4rem;
+  --casc-menu-opt-padding-y: .3rem;
+  --casc-menu-opt-header-border-color: rgba(1, 1, 1, .2);
+  --casc-menu-opt-header-text-color: #999;
+  --casc-menu-opt-hover-bg: #f7f7f7;
+  --casc-menu-opt-active-bg: #eeeeee;
+  --casc-menu-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
+  --casc-menu-items-bg: #fff;
+  --casc-menu-items-color: inherit;
+  --casc-menu-items-border-color: rgba(0, 0, 0, .1);
+  --casc-menu-items-li-border-color: #eee;
+  --casc-menu-loader-color: #000000;
+  --casc-menu-clean-btn-color: #b5b5b5;
+  --casc-menu-searchbox-border-color: #ddd;
+  box-shadow: var(--casc-menu-items-box-shadow);
   position: absolute;
   left: auto;
-  max-height: 300px;
-  border: 1px solid var(--casc-select-items-border-color);
-  background: var(--casc-select-items-bg);
+  border: 1px solid var(--casc-menu-items-border-color);
+  background: var(--casc-menu-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-items-color);
+  color: var(--casc-menu-items-color);
   display: none;
   z-index: 1055; /* --bs-modal-zindex */
   /* each item */
+  /* Column */
   /* Searchbox */
   /* Options */
 }
-.casc-select__items-wrapper.active {
+.casc-menu__items-wrapper.active {
   display: block !important;
 }
-.casc-select__items-wrapper ul,
-.casc-select__items-wrapper li {
+.casc-menu__items-wrapper ul,
+.casc-menu__items-wrapper li {
   list-style: none;
   margin: 0;
   padding: 0;
 }
-.casc-select__items-wrapper .casc-select__items-loader {
+.casc-menu__items-wrapper .casc-menu__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__spinner;
+  animation: 1s linear infinite casc-menu__spinner;
 }
-.casc-select__items-wrapper .casc-select__items-loader svg {
+.casc-menu__items-wrapper .casc-menu__items-loader svg {
   vertical-align: top;
 }
-.casc-select__items-wrapper .casc-select__items-loader svg path {
-  fill: var(--casc-select-loader-color);
+.casc-menu__items-wrapper .casc-menu__items-loader svg path {
+  fill: var(--casc-menu-loader-color);
 }
-@keyframes casc-select__spinner {
+@keyframes casc-menu__spinner {
   to {
     transform: translate(2px, 5px) rotate(-360deg);
   }
 }
-.casc-select__items-wrapper .casc-select__close svg {
+.casc-menu__items-wrapper .casc-menu__close svg {
   opacity: 0.4;
 }
-.casc-select__items-wrapper .casc-select__close:hover svg {
+.casc-menu__items-wrapper .casc-menu__close:hover svg {
   transition: 0.2s ease-out;
   opacity: 0.7;
 }
-.casc-select__items-wrapper ul {
+.casc-menu__items-wrapper ul {
   transition: 0.2s ease-out;
   min-width: 8px;
   min-height: 9px;
 }
-.casc-select__items-wrapper ul > li {
+.casc-menu__items-wrapper ul > li {
   position: relative;
   cursor: pointer;
   float: left;
   padding: 0 10px;
   margin-right: 15px;
-  border-right: 1px dotted var(--casc-select-items-li-border-color);
+  border-right: 1px dotted var(--casc-menu-items-li-border-color);
   transition: 0.2s ease-out;
 }
-.casc-select__items-wrapper ul > li.hide-col {
+.casc-menu__items-wrapper ul > li.hide-col {
   display: none;
 }
-.casc-select__items-wrapper ul > li:last-child {
+.casc-menu__items-wrapper ul > li:last-child {
   margin-right: 0;
   border-right: none;
 }
-.casc-select__items-wrapper .casc-select__items-col-searchbox input {
-  border: 1px solid var(--casc-select-searchbox-border-color);
+.casc-menu__items-wrapper .casc-menu__items-col {
+  max-height: var(--casc-menu-per-col-maxheight);
+  overflow-y: auto;
+}
+.casc-menu__items-wrapper .casc-menu__items-col::-webkit-scrollbar {
+  width: var(--casc-menu-scrollbar-w);
+}
+.casc-menu__items-wrapper .casc-menu__items-col::-webkit-scrollbar-thumb {
+  background: var(--casc-menu-scrollbar-color);
+}
+.casc-menu__items-wrapper .casc-menu__items-col::-webkit-scrollbar-track {
+  background: var(--casc-menu-scrollbar-track);
+}
+.casc-menu__items-wrapper .casc-menu__items-col-searchbox input {
+  border: 1px solid var(--casc-menu-searchbox-border-color);
   border-radius: 0.15rem;
   width: 100%;
   background: transparent;
   font-size: 0.75rem;
 }
-.casc-select__items-wrapper .casc-select__opt {
-  padding: var(--casc-select-opt-padding-y) var(--casc-select-opt-padding-x);
-  font-size: var(--casc-select-opt-font-size);
+.casc-menu__items-wrapper .casc-menu__opt {
+  padding: var(--casc-menu-opt-padding-y) var(--casc-menu-opt-padding-x);
+  font-size: var(--casc-menu-opt-font-size);
   border-radius: 2px;
 }
-.casc-select__items-wrapper .casc-select__opt:hover {
-  background: var(--casc-select-opt-hover-bg);
+.casc-menu__items-wrapper .casc-menu__opt:hover {
+  background: var(--casc-menu-opt-hover-bg);
 }
-.casc-select__items-wrapper .casc-select__opt.active {
-  background: var(--casc-select-opt-active-bg);
+.casc-menu__items-wrapper .casc-menu__opt.active {
+  background: var(--casc-menu-opt-active-bg);
 }
-.casc-select__items-wrapper .casc-select__opt-header {
-  padding: var(--casc-select-opt-padding-y) var(--casc-select-opt-padding-x);
-  font-size: var(--casc-select-opt-font-size);
-  border-bottom: 1px dotted var(--casc-select-opt-header-border-color);
+.casc-menu__items-wrapper .casc-menu__opt-header {
+  padding: var(--casc-menu-opt-padding-y) var(--casc-menu-opt-padding-x);
+  font-size: var(--casc-menu-opt-font-size);
+  border-bottom: 1px dotted var(--casc-menu-opt-header-border-color);
   border-radius: 2px;
   position: sticky;
-  top: calc(var(--casc-select-opt-font-size) * -1);
-  background: var(--casc-select-items-bg);
-  color: var(--casc-select-opt-header-text-color);
+  top: 0;
+  background: var(--casc-menu-items-bg);
+  color: var(--casc-menu-opt-header-text-color);
   display: flex;
   align-items: center;
 }
-.casc-select__items-wrapper .casc-select__opt-header > span {
+.casc-menu__items-wrapper .casc-menu__opt-header > span {
   cursor: default;
 }
-.casc-select__items-wrapper .casc-select__opt-header:hover {
-  background: var(--casc-select-opt-hover-bg);
+.casc-menu__items-wrapper .casc-menu__opt-header:hover {
+  background: var(--casc-menu-opt-hover-bg);
 }
-.casc-select__items-wrapper .casc-select__opt-header.active {
-  background: var(--casc-select-opt-active-bg);
+.casc-menu__items-wrapper .casc-menu__opt-header.active {
+  background: var(--casc-menu-opt-active-bg);
 }
-.casc-select__items-wrapper .casc-select__opt-header .casc-select__opt-header__clean {
+.casc-menu__items-wrapper .casc-menu__opt-header .casc-menu__opt-header__clean {
   display: inline-block;
   margin-left: 0.2rem;
   padding: 0.1rem;
 }
-.casc-select__items-wrapper .casc-select__opt-header .casc-select__opt-header__clean:hover {
+.casc-menu__items-wrapper .casc-menu__opt-header .casc-menu__opt-header__clean:hover {
   transform: scale(1.1);
 }
-.casc-select__items-wrapper .casc-select__opt-header .casc-select__opt-header__clean svg {
-  border: 1px var(--casc-select-clean-btn-color) solid;
+.casc-menu__items-wrapper .casc-menu__opt-header .casc-menu__opt-header__clean svg {
+  border: 1px var(--casc-menu-clean-btn-color) solid;
   border-radius: 50%;
 }
-.casc-select__items-wrapper .casc-select__opt-header .casc-select__opt-header__clean svg path {
-  fill: var(--casc-select-clean-btn-color);
+.casc-menu__items-wrapper .casc-menu__opt-header .casc-menu__opt-header__clean svg path {
+  fill: var(--casc-menu-clean-btn-color);
 }

package/CascadingSelect/index.js

@@ -2183,7 +2183,7 @@ function Group(props) {
         "data-id": item.id,
         "data-value": JSON.stringify(item),
         "data-level": level,
-        className: (0,cls.combinedCls)('casc-select__opt', {
+        className: (0,cls.combinedCls)('casc-menu__opt', {
           'active': item.current
         }),
         dangerouslySetInnerHTML: {
@@ -2197,13 +2197,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__opt-header"
+        className: "casc-menu__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__opt-header__clean"
+        className: "casc-menu__opt-header__clean"
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
         tabIndex: -1,
         href: "#",
@@ -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)([]),
@@ -2416,7 +2417,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     if (rootRef.current === null || inputRef.current === null) return;
 
     // update modal position
-    var _modalRef = document.querySelector("#casc-select__items-wrapper-".concat(idRes));
+    var _modalRef = document.querySelector("#casc-menu__items-wrapper-".concat(idRes));
     var _triggerRef = inputRef.current;
 
     // console.log(getAbsolutePositionOfStage(_triggerRef));
@@ -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';
@@ -2488,7 +2489,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   }
 
   function popwinPosHide() {
-    var _modalRef = document.querySelector("#casc-select__items-wrapper-".concat(idRes));
+    var _modalRef = document.querySelector("#casc-menu__items-wrapper-".concat(idRes));
     if (_modalRef !== null) {
       // remove classnames and styles
       _modalRef.classList.remove('active');
@@ -2499,9 +2500,9 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     var level = arguments.length > 2 ? arguments[2] : undefined;
     if (listRef.current === null) return;
     var latestDisplayColIndex = 0;
-    var currentItemsInner = listRef.current.querySelector('.casc-select__items-inner');
+    var currentItemsInner = listRef.current.querySelector('.casc-menu__items-inner');
     if (currentItemsInner !== null) {
-      var colItemsWrapper = [].slice.call(currentItemsInner.querySelectorAll('.casc-select__items-col'));
+      var colItemsWrapper = [].slice.call(currentItemsInner.querySelectorAll('.casc-menu__items-col'));
       colItemsWrapper.forEach(function (perCol) {
         perCol.classList.remove('hide-col');
       });
@@ -2701,10 +2702,10 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
 
     // active current option with DOM
     //////////////////////////////////////////
-    var currentItemsInner = e.currentTarget.closest('.casc-select__items-inner');
+    var currentItemsInner = e.currentTarget.closest('.casc-menu__items-inner');
     if (currentItemsInner !== null) {
       curData.forEach(function (v, col) {
-        var colItemsWrapper = currentItemsInner.querySelectorAll('.casc-select__items-col');
+        var colItemsWrapper = currentItemsInner.querySelectorAll('.casc-menu__items-col');
         colItemsWrapper.forEach(function (perCol) {
           var _col = Number(perCol.dataset.col);
           if (_col >= level) {
@@ -3149,9 +3150,9 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     }
   }, [listData.current.length]);
   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__wrapper mb-3 position-relative', "casc-select__wrapper ".concat(wrapperClassName)),
+    className: (0,cls.clsWrite)(wrapperClassName, 'casc-menu__wrapper mb-3 position-relative', "casc-menu__wrapper ".concat(wrapperClassName)),
     ref: rootRef,
-    "data-overlay-id": "casc-select__items-wrapper-".concat(idRes)
+    "data-overlay-id": "casc-menu__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",
@@ -3162,23 +3163,23 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     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)(wrapperClassName, 'casc-select__trigger d-inline w-auto', "casc-select__trigger ".concat(triggerClassName)),
+    className: (0,cls.clsWrite)(wrapperClassName, 'casc-menu__trigger d-inline w-auto', "casc-menu__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: "CascadingSelect"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     ref: listRef,
-    id: "casc-select__items-wrapper-".concat(idRes),
-    className: "casc-select__items-wrapper position-absolute border shadow small",
+    id: "casc-menu__items-wrapper-".concat(idRes),
+    className: "casc-menu__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__items-inner"
+    className: "casc-menu__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__items-loader"
+    className: "casc-menu__items-loader"
   }, loader || /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
     height: "12px",
     width: "12px",
@@ -3214,7 +3215,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
       e.preventDefault();
       cancel();
     },
-    className: "casc-select__close position-absolute top-0 end-0 mt-0 mx-1"
+    className: "casc-menu__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",
@@ -3235,9 +3236,9 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("li", {
         key: level,
         "data-col": level,
-        className: "casc-select__items-col"
+        className: "casc-menu__items-col"
       }, searchable && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-        className: "casc-select__items-col-searchbox"
+        className: "casc-menu__items-col-searchbox"
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
         type: "text",
         placeholder: searchPlaceholder,
@@ -3263,7 +3264,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
       return null;
     }
   })))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: (0,cls.combinedCls)('casc-select__val', {
+    className: (0,cls.combinedCls)('casc-menu__val', {
       'inputable': inputable
     }),
     onClick: handleDisplayOptions
@@ -3286,7 +3287,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
       }
     },
     id: idRes,
-    "data-overlay-id": "casc-select__items-wrapper-".concat(idRes),
+    "data-overlay-id": "casc-menu__items-wrapper-".concat(idRes),
     name: name,
     className: (0,cls.combinedCls)((0,cls.clsWrite)(controlClassName, 'form-control'), controlExClassName, {
       'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units),
@@ -3335,7 +3336,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
       }
     } : undefined
   }, attributes)), !inputable ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: "casc-select__result"
+    className: "casc-menu__result"
   }, displayInfo()) : 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", {
@@ -3345,7 +3346,7 @@ var CascadingSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   }, 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__closemask",
+    className: "casc-menu__closemask",
     onClick: function onClick(e) {
       e.preventDefault();
       cancel();