funda-ui 4.7.517 → 4.7.533

package/lib/esm/CascadingSelect/index.scss

@@ -2,23 +2,23 @@
     <!-- Cascading Select -->
 /* ====================================================== */
 
-.casc-select__wrapper {
+.casc-menu__wrapper {
 
-    --casc-select-arrow-fill: #a5a5a5;
-    --casc-select-result-arrow-fill: #a5a5a5;
+    --casc-menu-arrow-fill: #a5a5a5;
+    --casc-menu-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-menu-result-font-size: 1rem;
+    --casc-menu-result-padding-x: 0.75rem;
+    --casc-menu-result-padding-y: 0.375rem;
 
 
-    .casc-select__result {
+    .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;
@@ -45,7 +45,7 @@
             margin: 0 0.3rem;
 
             path {
-                fill: var(--casc-select-result-arrow-fill);
+                fill: var(--casc-menu-result-arrow-fill);
             }
 
         }
@@ -53,7 +53,7 @@
     }
 
 
-    .casc-select__closemask {
+    .casc-menu__closemask {
         position: absolute;
         z-index: 1;
         top: 0;
@@ -65,13 +65,13 @@
     }
 
 
-    .casc-select__trigger {
+    .casc-menu__trigger {
         position: relative;
         z-index: 0;
     }
 
 
-    .casc-select__val {
+    .casc-menu__val {
         position: relative;
 
 
@@ -94,7 +94,7 @@
 
             svg {
                 .arrow-fill-g {
-                    fill: var(--casc-select-arrow-fill);
+                    fill: var(--casc-menu-arrow-fill);
                 }
             }
         }
@@ -105,45 +105,47 @@
 }
 
 /*------ 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-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-select-searchbox-border-color: #ddd;
+    --casc-menu-searchbox-border-color: #ddd;
     
 
-    box-shadow: var(--casc-select-items-box-shadow);
+    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;
@@ -162,7 +164,7 @@
         padding: 0;
     }
 
-    .casc-select__items-loader {
+    .casc-menu__items-loader {
         position: absolute;
         pointer-events: none;
         left: 0;
@@ -174,30 +176,30 @@
         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;
 
         svg {
             vertical-align: top;
             
             path {
-                fill: var(--casc-select-loader-color);
+                fill: var(--casc-menu-loader-color);
             }
         }
     }
 
-    @keyframes casc-select__spinner {
+    @keyframes casc-menu__spinner {
         to {
             transform: translate(2px, 5px) rotate(-360deg);
         }
     }
 
-    .casc-select__close {
+    .casc-menu__close {
         svg {
             opacity: .4;
         }
     }
 
-    .casc-select__close:hover {
+    .casc-menu__close:hover {
         svg {
             transition: .2s ease-out;
             opacity: .7;
@@ -216,7 +218,7 @@
             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: .2s ease-out;
 
             &.hide-col {
@@ -231,11 +233,30 @@
         }
     }
 
+    /* Column */
+    .casc-menu__items-col {
+        max-height: var(--casc-menu-per-col-maxheight);
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+            width: var(--casc-menu-scrollbar-w);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: var(--casc-menu-scrollbar-color);
+        }
+
+        &::-webkit-scrollbar-track {
+            background: var(--casc-menu-scrollbar-track);
+        }
+
+    }
+
 
     /* Searchbox */
-    .casc-select__items-col-searchbox {
+    .casc-menu__items-col-searchbox {
         input {
-            border: 1px solid var(--casc-select-searchbox-border-color);
+            border: 1px solid var(--casc-menu-searchbox-border-color);
             border-radius: 0.15rem;
             width: 100%;
             background: transparent;
@@ -244,29 +265,29 @@
     }
     
     /* Options */
-    .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__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;
 
         &:hover {
-            background: var(--casc-select-opt-hover-bg);
+            background: var(--casc-menu-opt-hover-bg);
         }
 
         &.active {
-            background: var(--casc-select-opt-active-bg);
+            background: var(--casc-menu-opt-active-bg);
         }
     }
 
-    .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__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;
 
@@ -276,14 +297,14 @@
   
 
         &:hover {
-            background: var(--casc-select-opt-hover-bg);
+            background: var(--casc-menu-opt-hover-bg);
         }
 
         &.active {
-            background: var(--casc-select-opt-active-bg);
+            background: var(--casc-menu-opt-active-bg);
         }
 
-        .casc-select__opt-header__clean {
+        .casc-menu__opt-header__clean {
             display: inline-block;
             margin-left: .2rem;
             padding: .1rem;
@@ -294,11 +315,11 @@
 
             svg {
 
-                border: 1px var(--casc-select-clean-btn-color) solid;
+                border: 1px var(--casc-menu-clean-btn-color) solid;
                 border-radius: 50%;
 
                 path {
-                    fill: var(--casc-select-clean-btn-color);
+                    fill: var(--casc-menu-clean-btn-color);
                 }
             }
         }

package/lib/esm/CascadingSelect/index.tsx

@@ -23,6 +23,7 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 import Group from './Group';
 
 
@@ -167,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[]>([]);
@@ -260,7 +262,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
         if (rootRef.current === null || inputRef.current === null) return
 
         // update modal position
-        const _modalRef: any = document.querySelector(`#casc-select__items-wrapper-${idRes}`);
+        const _modalRef: any = document.querySelector(`#casc-menu__items-wrapper-${idRes}`);
         const _triggerRef: any = inputRef.current;
 
         // console.log(getAbsolutePositionOfStage(_triggerRef));
@@ -281,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';
@@ -343,7 +345,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
 
     function popwinPosHide() {
 
-        const _modalRef: any = document.querySelector(`#casc-select__items-wrapper-${idRes}`);
+        const _modalRef: any = document.querySelector(`#casc-menu__items-wrapper-${idRes}`);
 
         if (_modalRef !== null) {
             // remove classnames and styles
@@ -357,9 +359,9 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
         if (listRef.current === null) return;
 
         let latestDisplayColIndex: number = 0;
-        const currentItemsInner: any = listRef.current.querySelector('.casc-select__items-inner');
+        const currentItemsInner: any = listRef.current.querySelector('.casc-menu__items-inner');
         if (currentItemsInner !== null) {
-            const colItemsWrapper = [].slice.call(currentItemsInner.querySelectorAll('.casc-select__items-col'));
+            const colItemsWrapper = [].slice.call(currentItemsInner.querySelectorAll('.casc-menu__items-col'));
             colItemsWrapper.forEach((perCol: any) => {
                 perCol.classList.remove('hide-col');
             });
@@ -595,10 +597,10 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
 
         // active current option with DOM
         //////////////////////////////////////////
-        const currentItemsInner: any = e.currentTarget.closest('.casc-select__items-inner');
+        const currentItemsInner: any = e.currentTarget.closest('.casc-menu__items-inner');
         if (currentItemsInner !== null) {
             curData.forEach((v: any, col: number) => {
-                const colItemsWrapper = currentItemsInner.querySelectorAll('.casc-select__items-col');
+                const colItemsWrapper = currentItemsInner.querySelectorAll('.casc-menu__items-col');
                 colItemsWrapper.forEach((perCol: HTMLUListElement) => {
                     const _col = Number(perCol.dataset.col);
 
@@ -1155,14 +1157,14 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
         <>
 
             <div
-                className={clsWrite(wrapperClassName, 'casc-select__wrapper mb-3 position-relative', `casc-select__wrapper ${wrapperClassName}`)}
+                className={clsWrite(wrapperClassName, 'casc-menu__wrapper mb-3 position-relative', `casc-menu__wrapper ${wrapperClassName}`)}
                 ref={rootRef}
-                data-overlay-id={`casc-select__items-wrapper-${idRes}`}
+                data-overlay-id={`casc-menu__items-wrapper-${idRes}`}
             >
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label" >{label}</label>}</> : null}
 
                 {triggerContent ? <>
-                    <div className={clsWrite(wrapperClassName, 'casc-select__trigger d-inline w-auto', `casc-select__trigger ${triggerClassName}`)} onClick={handleDisplayOptions}>{triggerContent}</div>
+                    <div className={clsWrite(wrapperClassName, 'casc-menu__trigger d-inline w-auto', `casc-menu__trigger ${triggerClassName}`)} onClick={handleDisplayOptions}>{triggerContent}</div>
                 </> : null}
 
 
@@ -1171,16 +1173,16 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
 
                         <div
                             ref={listRef}
-                            id={`casc-select__items-wrapper-${idRes}`}
-                            className="casc-select__items-wrapper position-absolute border shadow small"
+                            id={`casc-menu__items-wrapper-${idRes}`}
+                            className="casc-menu__items-wrapper position-absolute border shadow small"
                             style={{ zIndex: DEPTH, display: 'none' }}
                         >
-                            <ul className="casc-select__items-inner">
-                                {loading ? <><div className="casc-select__items-loader">{loader || <svg height="12px" width="12px" viewBox="0 0 512 512"><g><path fill="inherit" d="M256,0c-23.357,0-42.297,18.932-42.297,42.288c0,23.358,18.94,42.288,42.297,42.288c23.357,0,42.279-18.93,42.279-42.288C298.279,18.932,279.357,0,256,0z" /><path fill="inherit" d="M256,427.424c-23.357,0-42.297,18.931-42.297,42.288C213.703,493.07,232.643,512,256,512c23.357,0,42.279-18.93,42.279-42.288C298.279,446.355,279.357,427.424,256,427.424z" /><path fill="inherit" d="M74.974,74.983c-16.52,16.511-16.52,43.286,0,59.806c16.52,16.52,43.287,16.52,59.806,0c16.52-16.511,16.52-43.286,0-59.806C118.261,58.463,91.494,58.463,74.974,74.983z" /><path fill="inherit" d="M377.203,377.211c-16.503,16.52-16.503,43.296,0,59.815c16.519,16.52,43.304,16.52,59.806,0c16.52-16.51,16.52-43.295,0-59.815C420.489,360.692,393.722,360.7,377.203,377.211z" /><path fill="inherit" d="M84.567,256c0.018-23.348-18.922-42.279-42.279-42.279c-23.357-0.009-42.297,18.932-42.279,42.288c-0.018,23.348,18.904,42.279,42.279,42.279C65.645,298.288,84.567,279.358,84.567,256z" /><path fill="inherit" d="M469.712,213.712c-23.357,0-42.279,18.941-42.297,42.288c0,23.358,18.94,42.288,42.297,42.297c23.357,0,42.297-18.94,42.279-42.297C512.009,232.652,493.069,213.712,469.712,213.712z" /><path fill="inherit" d="M74.991,377.22c-16.519,16.511-16.519,43.296,0,59.806c16.503,16.52,43.27,16.52,59.789,0c16.52-16.519,16.52-43.295,0-59.815C118.278,360.692,91.511,360.692,74.991,377.22z" /><path fill="inherit" d="M437.026,134.798c16.52-16.52,16.52-43.304,0-59.824c-16.519-16.511-43.304-16.52-59.823,0c-16.52,16.52-16.503,43.295,0,59.815C393.722,151.309,420.507,151.309,437.026,134.798z" /></g></svg>}</div></> : null}
+                            <ul className="casc-menu__items-inner">
+                                {loading ? <><div className="casc-menu__items-loader">{loader || <svg height="12px" width="12px" viewBox="0 0 512 512"><g><path fill="inherit" d="M256,0c-23.357,0-42.297,18.932-42.297,42.288c0,23.358,18.94,42.288,42.297,42.288c23.357,0,42.279-18.93,42.279-42.288C298.279,18.932,279.357,0,256,0z" /><path fill="inherit" d="M256,427.424c-23.357,0-42.297,18.931-42.297,42.288C213.703,493.07,232.643,512,256,512c23.357,0,42.279-18.93,42.279-42.288C298.279,446.355,279.357,427.424,256,427.424z" /><path fill="inherit" d="M74.974,74.983c-16.52,16.511-16.52,43.286,0,59.806c16.52,16.52,43.287,16.52,59.806,0c16.52-16.511,16.52-43.286,0-59.806C118.261,58.463,91.494,58.463,74.974,74.983z" /><path fill="inherit" d="M377.203,377.211c-16.503,16.52-16.503,43.296,0,59.815c16.519,16.52,43.304,16.52,59.806,0c16.52-16.51,16.52-43.295,0-59.815C420.489,360.692,393.722,360.7,377.203,377.211z" /><path fill="inherit" d="M84.567,256c0.018-23.348-18.922-42.279-42.279-42.279c-23.357-0.009-42.297,18.932-42.279,42.288c-0.018,23.348,18.904,42.279,42.279,42.279C65.645,298.288,84.567,279.358,84.567,256z" /><path fill="inherit" d="M469.712,213.712c-23.357,0-42.279,18.941-42.297,42.288c0,23.358,18.94,42.288,42.297,42.297c23.357,0,42.297-18.94,42.279-42.297C512.009,232.652,493.069,213.712,469.712,213.712z" /><path fill="inherit" d="M74.991,377.22c-16.519,16.511-16.519,43.296,0,59.806c16.503,16.52,43.27,16.52,59.789,0c16.52-16.519,16.52-43.295,0-59.815C118.278,360.692,91.511,360.692,74.991,377.22z" /><path fill="inherit" d="M437.026,134.798c16.52-16.52,16.52-43.304,0-59.824c-16.519-16.511-43.304-16.52-59.823,0c-16.52,16.52-16.503,43.295,0,59.815C393.722,151.309,420.507,151.309,437.026,134.798z" /></g></svg>}</div></> : null}
                                 {showCloseBtn ? <a href="#" tabIndex={-1} onClick={(e) => {
                                     e.preventDefault();
                                     cancel();
-                                }} className="casc-select__close position-absolute top-0 end-0 mt-0 mx-1"><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a> : null}
+                                }} className="casc-menu__close position-absolute top-0 end-0 mt-0 mx-1"><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a> : null}
 
 
 
@@ -1199,11 +1201,11 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
 
 
                                         return (
-                                            <li key={level} data-col={level} className="casc-select__items-col">
+                                            <li key={level} data-col={level} className="casc-menu__items-col">
                
                                                 {/* SEARCH BOX */}
                                                 {searchable && (
-                                                    <div className="casc-select__items-col-searchbox">
+                                                    <div className="casc-menu__items-col-searchbox">
                                                         <input
                                                             type="text"
                                                             placeholder={searchPlaceholder}
@@ -1243,7 +1245,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
 
 
                 <div className={combinedCls(
-                        'casc-select__val',
+                        'casc-menu__val',
                         {
                             'inputable': inputable,
                         }
@@ -1277,7 +1279,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
                                     }
                                 }}
                                 id={idRes}
-                                data-overlay-id={`casc-select__items-wrapper-${idRes}`}
+                                data-overlay-id={`casc-menu__items-wrapper-${idRes}`}
                                 name={name}
                                 className={combinedCls(
                                     clsWrite(controlClassName, 'form-control'),
@@ -1342,7 +1344,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
 
 
                             {/** REVIEW RESULT */}
-                            {!inputable ? <div className="casc-select__result">{displayInfo()}</div> : null}
+                            {!inputable ? <div className="casc-menu__result">{displayInfo()}</div> : null}
 
 
                             {/* Required marking */}
@@ -1359,7 +1361,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
                  
 
                     {isShow ? <div
-                        className="casc-select__closemask"
+                        className="casc-menu__closemask"
                         onClick={(e) => {
                             e.preventDefault();
                             cancel();

package/lib/esm/CascadingSelectE2E/Group.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 export type GroupFnType = (arg1: any, arg2: any, arg3: number) => void;
 
 export type GroupProps = {
@@ -40,7 +41,7 @@ export default function Group(props: GroupProps) {
                         data-level={level}
                         data-query={item.queryId} 
                         className={combinedCls(
-                            'casc-select-e2e__opt',
+                            'casc-menu-e2e__opt',
                             {
                                 'active': item.current
                             }
@@ -53,12 +54,12 @@ export default function Group(props: GroupProps) {
                 } else {
                     return columnTitle[level] === '' || perColumnHeadersShow === false ? null : <h3 
                     key={index} 
-                    className="casc-select-e2e__opt-header"
+                    className="casc-menu-e2e__opt-header"
                     >
                         <span dangerouslySetInnerHTML={{
                         __html: columnTitle[level]
                     }}></span>
-                        <div className="casc-select-e2e__opt-header__clean">
+                        <div className="casc-menu-e2e__opt-header__clean">
                             <a 
                                 tabIndex={-1} 
                                 href="#"