funda-ui 4.7.515 → 4.7.525

package/lib/esm/CascadingSelectE2E/index.scss

@@ -2,23 +2,23 @@
     <!-- Cascading Select End-to-end -->
 /* ====================================================== */
 
-.casc-select-e2e__wrapper {
+.casc-menu-e2e__wrapper {
 
-    --casc-select-e2e-arrow-fill: #a5a5a5;
-    --casc-select-e2e-result-arrow-fill: #a5a5a5;
+    --casc-menu-e2e-arrow-fill: #a5a5a5;
+    --casc-menu-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-menu-e2e-result-font-size: 1rem;
+    --casc-menu-e2e-result-padding-x: 0.75rem;
+    --casc-menu-e2e-result-padding-y: 0.375rem;
 
 
-    .casc-select-e2e__result {
+    .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;
@@ -45,7 +45,7 @@
             margin: 0 0.3rem;
 
             path {
-                fill: var(--casc-select-e2e-result-arrow-fill);
+                fill: var(--casc-menu-e2e-result-arrow-fill);
             }
 
         }
@@ -53,7 +53,7 @@
     }
 
 
-    .casc-select-e2e__closemask {
+    .casc-menu-e2e__closemask {
         position: absolute;
         z-index: 1;
         top: 0;
@@ -65,13 +65,13 @@
     }
 
 
-    .casc-select-e2e__trigger {
+    .casc-menu-e2e__trigger {
         position: relative;
         z-index: 0;
     }
 
 
-    .casc-select-e2e__val {
+    .casc-menu-e2e__val {
         position: relative;
 
 
@@ -95,7 +95,7 @@
 
             svg {
                 .arrow-fill-g {
-                    fill: var(--casc-select-e2e-arrow-fill);
+                    fill: var(--casc-menu-e2e-arrow-fill);
                 }
             }
         }
@@ -106,45 +106,47 @@
 }
 
 /*------ List ------*/
-.casc-select-e2e__items-wrapper {
+.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-select-e2e-opt-font-size: 0.875rem;
-    --casc-select-e2e-opt-padding-x: .4rem;
-    --casc-select-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-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-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-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-menu-e2e-loader-color: #000000;
+    --casc-menu-e2e-clean-btn-color: #b5b5b5;
     
-    --casc-select-e2e-searchbox-border-color: #ddd;
+    --casc-menu-e2e-searchbox-border-color: #ddd;
 
-    box-shadow: var(--casc-select-e2e-items-box-shadow);
+    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;
@@ -164,7 +166,7 @@
     }
 
 
-    .casc-select-e2e__items-loader {
+    .casc-menu-e2e__items-loader {
         position: absolute;
         pointer-events: none;
         left: 0;
@@ -176,30 +178,30 @@
         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;
 
         svg {
             vertical-align: top;
             
             path {
-                fill: var(--casc-select-e2e-loader-color);
+                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__close {
+    .casc-menu-e2e__close {
         svg {
             opacity: .4;
         }
     }
 
-    .casc-select-e2e__close:hover {
+    .casc-menu-e2e__close:hover {
         svg {
             transition: .2s ease-out;
             opacity: .7;
@@ -218,7 +220,7 @@
             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: .2s ease-out;
 
             &.hide-col {
@@ -233,12 +235,30 @@
         }
     }
 
+    /* Column */
+    .casc-menu-e2e__items-col {
+        max-height: var(--casc-menu-e2e-per-col-maxheight);
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+            width: var(--casc-menu-e2e-scrollbar-w);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: var(--casc-menu-e2e-scrollbar-color);
+        }
+
+        &::-webkit-scrollbar-track {
+            background: var(--casc-menu-e2e-scrollbar-track);
+        }
+
+    }
 
 
     /* Searchbox */
-    .casc-select-e2e__items-col-searchbox {
+    .casc-menu-e2e__items-col-searchbox {
         input {
-            border: 1px solid var(--casc-select-e2e-searchbox-border-color);
+            border: 1px solid var(--casc-menu-e2e-searchbox-border-color);
             border-radius: 0.15rem;
             width: 100%;
             background: transparent;
@@ -248,29 +268,29 @@
     
 
     /* Options */
-    .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__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;
 
         &:hover {
-            background: var(--casc-select-e2e-opt-hover-bg);
+            background: var(--casc-menu-e2e-opt-hover-bg);
         }
 
         &.active {
-            background: var(--casc-select-e2e-opt-active-bg);
+            background: var(--casc-menu-e2e-opt-active-bg);
         }
     }
 
-    .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__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;
 
@@ -280,14 +300,14 @@
   
 
         &:hover {
-            background: var(--casc-select-e2e-opt-hover-bg);
+            background: var(--casc-menu-e2e-opt-hover-bg);
         }
 
         &.active {
-            background: var(--casc-select-e2e-opt-active-bg);
+            background: var(--casc-menu-e2e-opt-active-bg);
         }
 
-        .casc-select-e2e__opt-header__clean {
+        .casc-menu-e2e__opt-header__clean {
             display: inline-block;
             margin-left: .2rem;
             padding: .1rem;
@@ -298,11 +318,11 @@
 
             svg {
 
-                border: 1px var(--casc-select-e2e-clean-btn-color) solid;
+                border: 1px var(--casc-menu-e2e-clean-btn-color) solid;
                 border-radius: 50%;
 
                 path {
-                    fill: var(--casc-select-e2e-clean-btn-color);
+                    fill: var(--casc-menu-e2e-clean-btn-color);
                 }
             }
         }

package/lib/esm/CascadingSelectE2E/index.tsx

@@ -28,6 +28,7 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 import Group from './Group';
 
 
@@ -295,7 +296,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
 
 
         // update modal position
-        const _modalRef: any = document.querySelector(`#casc-select-e2e__items-wrapper-${idRes}`);
+        const _modalRef: any = document.querySelector(`#casc-menu-e2e__items-wrapper-${idRes}`);
         const _triggerRef: any = inputRef.current;
 
         
@@ -380,7 +381,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
 
     function popwinPosHide() {
 
-        const _modalRef: any = document.querySelector(`#casc-select-e2e__items-wrapper-${idRes}`);
+        const _modalRef: any = document.querySelector(`#casc-menu-e2e__items-wrapper-${idRes}`);
 
         if (_modalRef !== null) {
             // remove classnames and styles
@@ -396,9 +397,9 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
         if (listRef.current === null) return;
 
         let latestDisplayColIndex: number = 0;
-        const currentItemsInner: any = listRef.current.querySelector('.casc-select-e2e__items-inner');
+        const currentItemsInner: any = listRef.current.querySelector('.casc-menu-e2e__items-inner');
         if (currentItemsInner !== null) {
-            const colItemsWrapper = [].slice.call(currentItemsInner.querySelectorAll('.casc-select-e2e__items-col'));
+            const colItemsWrapper = [].slice.call(currentItemsInner.querySelectorAll('.casc-menu-e2e__items-col'));
             colItemsWrapper.forEach((perCol: any) => {
                 perCol.classList.remove('hide-col');
             });
@@ -756,10 +757,10 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
 
         // active current option with DOM
         //////////////////////////////////////////
-        const currentItemsInner: any = e.currentTarget.closest('.casc-select-e2e__items-inner');
+        const currentItemsInner: any = e.currentTarget.closest('.casc-menu-e2e__items-inner');
         if (currentItemsInner !== null) {
             curData.forEach((v: any, col: number) => {
-                const colItemsWrapper = currentItemsInner.querySelectorAll('.casc-select-e2e__items-col');
+                const colItemsWrapper = currentItemsInner.querySelectorAll('.casc-menu-e2e__items-col');
                 colItemsWrapper.forEach((perCol: HTMLUListElement) => {
                     const _col = Number(perCol.dataset.col);
 
@@ -1423,14 +1424,14 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
         <>
 
             <div
-                className={clsWrite(wrapperClassName, 'casc-select-e2e__wrapper mb-3 position-relative', `casc-select-e2e__wrapper ${wrapperClassName}`)}
+                className={clsWrite(wrapperClassName, 'casc-menu-e2e__wrapper mb-3 position-relative', `casc-menu-e2e__wrapper ${wrapperClassName}`)}
                 ref={rootRef}
-                data-overlay-id={`casc-select-e2e__items-wrapper-${idRes}`}
+                data-overlay-id={`casc-menu-e2e__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(triggerClassName, 'casc-select-e2e__trigger d-inline w-auto', `casc-select-e2e__trigger ${triggerClassName}`)} onClick={handleDisplayOptions}>{triggerContent}</div>
+                    <div className={clsWrite(triggerClassName, 'casc-menu-e2e__trigger d-inline w-auto', `casc-menu-e2e__trigger ${triggerClassName}`)} onClick={handleDisplayOptions}>{triggerContent}</div>
                 </> : null}
 
 
@@ -1438,16 +1439,16 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
                     <RootPortal show={true} containerClassName="CascadingSelectE2E">
                         <div
                             ref={listRef}
-                            id={`casc-select-e2e__items-wrapper-${idRes}`}
-                            className="casc-select-e2e__items-wrapper position-absolute border shadow small"
+                            id={`casc-menu-e2e__items-wrapper-${idRes}`}
+                            className="casc-menu-e2e__items-wrapper position-absolute border shadow small"
                             style={{ zIndex: DEPTH, display: 'none' }}
                         >
-                            <ul className="casc-select-e2e__items-inner">
-                                {loading ? <><div className="casc-select-e2e__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-e2e__items-inner">
+                                {loading ? <><div className="casc-menu-e2e__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-e2e__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-e2e__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}
 
 
 
@@ -1466,12 +1467,12 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
 
 
                                         return (
-                                            <li key={level} data-col={level} className="casc-select-e2e__items-col">
+                                            <li key={level} data-col={level} className="casc-menu-e2e__items-col">
 
                                  
                                                 {/* SEARCH BOX */}
                                                 {searchable && (
-                                                    <div className="casc-select-e2e__items-col-searchbox">
+                                                    <div className="casc-menu-e2e__items-col-searchbox">
                                                         <input
                                                             type="text"
                                                             placeholder={searchPlaceholder}
@@ -1513,7 +1514,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
 
 
                 <div className={combinedCls(
-                        'casc-select-e2e__val',
+                        'casc-menu-e2e__val',
                         {
                             'inputable': inputable,
                         }
@@ -1547,7 +1548,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
                                     }
                                 }}
                                 id={idRes}
-                                data-overlay-id={`casc-select-e2e__items-wrapper-${idRes}`}
+                                data-overlay-id={`casc-menu-e2e__items-wrapper-${idRes}`}
                                 name={name}
                                 className={combinedCls(
                                     clsWrite(controlClassName, 'form-control'),
@@ -1626,9 +1627,9 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
 
                             {/** REVIEW RESULT */}
                             {destroyParentIdMatch ? <>
-                                {!inputable ? <div className="casc-select-e2e__result">{displayInfo(true)}</div> : null}
+                                {!inputable ? <div className="casc-menu-e2e__result">{displayInfo(true)}</div> : null}
                             </> : <>
-                                {!inputable ? <div className="casc-select-e2e__result">{displayInfo(false)}</div> : null}
+                                {!inputable ? <div className="casc-menu-e2e__result">{displayInfo(false)}</div> : null}
                             </>}
 
 
@@ -1646,7 +1647,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
                  
 
                     {isShow ? <div
-                        className="casc-select-e2e__closemask"
+                        className="casc-menu-e2e__closemask"
                         onClick={(e) => {
                             e.preventDefault();
                             cancel();