funda-ui 4.7.152 → 4.7.161

package/lib/esm/LiveSearch/index.scss

@@ -1,8 +1,12 @@
+
+
+
 /* ======================================================
     <!-- Live Search -->
 /* ====================================================== */
 
 .livesearch__wrapper {
+    position: relative;
 
     /*------ Search button ------*/
     .livesearch__wrapper-searchbtn {
@@ -14,6 +18,46 @@
         pointer-events: auto;
     }
 
+
+
+
+    /*------ Loader ------*/
+    .livesearch-loader {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        margin-top: -6px;
+        pointer-events: none;
+        pointer-events: none;
+        z-index: 5;
+        width: 12px;
+        height: 12px;
+        text-align: center;
+        transform-origin: center;
+        transform: translate(-5px, 0) rotate(0);
+        animation: 1s linear infinite livesearch__spinner;
+
+        &.pos-offset {
+            right: 2rem;
+        }
+
+        svg {
+            vertical-align: top;
+
+            path {
+                fill: var(--cus-sel-loader-color);
+            }
+        }
+    }
+
+    @keyframes livesearch__spinner {
+        to {
+            transform: translate(-5px, 0) rotate(-360deg);
+        }
+    }
+
+
+
 }
 
 
@@ -35,9 +79,12 @@
         display: block !important;
     }
 
+ 
+    /*------ Options ------*/
     .livesearch__options-contentlist {
         overflow: hidden;
         overflow-y: auto;
+        background-color: var(--bs-list-group-bg);
 
         &.noscroll {
             overflow-y: hidden;

package/lib/esm/LiveSearch/index.tsx

@@ -17,6 +17,7 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 export interface OptionConfig {
     disabled?: boolean;
     label: any;
@@ -39,6 +40,7 @@ export type LiveSearchProps = {
     appearance?: string;
     isSearchInput?: boolean;
     allowSpacingRetrive?: boolean;
+    loader?: React.ReactNode;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;
@@ -100,6 +102,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         appearance,
         isSearchInput,
         allowSpacingRetrive,
+        loader,
         readOnly,
         disabled,
         required,
@@ -128,7 +131,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         tabIndex,
         data,
         autoShowOptions,
-        fetchNoneInfo,
+        fetchNoneInfo = 'No match yet',
         fetchUpdate,
         fetchFuncAsync,
         fetchFuncMethod,
@@ -148,7 +151,9 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
     const DEPTH = depth || 1055;  // the default value same as bootstrap
     const POS_OFFSET = 0;
     const EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
-    const EMPTY_FOR_FETCH = typeof autoShowOptions === 'undefined' || autoShowOptions === false ? false : true;
+    const AUTO_SHOW_OPTIONS = typeof autoShowOptions !== 'undefined' && autoShowOptions === true ? true : false; 
+    const MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;  // Manual requests
+
     const NO_MATCH_POPUP = typeof noMatchPopup === 'undefined' ? true : noMatchPopup;
     const WIN_WIDTH = typeof winWidth === 'function' ? winWidth() : winWidth ? winWidth : 'auto';
     const uniqueID = useComId();
@@ -158,11 +163,13 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
     const listRef = useRef<any>(null);
     const listContentRef = useRef<any>(null);
     const optionsRes = options ? (isJSON(options) ? JSON.parse(options as string) : options) : [];
+    
 
     // return a array of options
     let staticOptionsData: OptionConfig[] = optionsRes;
 
     //
+    const [controlTempValue, setControlTempValue] = useState<string | null>(null); // Storage for temporary input
     const [firstFetch, setFirstFetch] = useState<boolean>(false);
     const [dataInit, setOrginalDataInit] = useState<any[]>(staticOptionsData);
     const [orginalData, setOrginalData] = useState<any[]>([]);
@@ -170,7 +177,13 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const [hasErr, setHasErr] = useState<boolean>(false);
     const [componentFirstLoad, setComponentFirstLoad] = useState<boolean>(false);
+    const [reqProgress, setReqProgress] = useState<boolean>(false);
+
 
+    // Mark whether it is out of focus
+    // Fixed the issue that caused the pop-up window to still display due to 
+    // the delayed close in handleBlur and the timing of the call to popwinPosInit
+    const isBlurringRef = useRef<boolean>(false);
 
     //performance
     const handleChangeFetchSafe = useDebounce((e: any) => {
@@ -183,9 +196,11 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         popupRef,
         () => ({
             close: () => {
-                setIsOpen(false);
                 cancel();
-            }
+            },
+            open: () => {
+                activate();
+            },
         }),
         [popupRef],
     );
@@ -200,6 +215,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
             getLatestVal: () => {
                 return changedVal || '';
             },
+            
             clear: (cb?: any) => {
                 setChangedVal('');
                 cb?.();
@@ -230,7 +246,6 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         },
         handle: (event: any) => {
             // cancel
-            setIsOpen(false);
             cancel();
         }
     }, [isOpen, rootRef, listRef]);
@@ -248,10 +263,14 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
     });
 
 
-
     function popwinPosInit(showAct: boolean = true) {
         if (listContentRef.current === null || inputRef.current === null) return;
 
+        // If it is out of focus, do not perform position initialization
+        if (isBlurringRef.current && !MANUAL_REQ) return;
+
+
+        //
         const contentHeightOffset = 80;
         let contentMaxHeight = 0;
 
@@ -447,9 +466,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
             });
         }
 
-
         if (query) {
-
             const _oparams: any[] = fetchFuncMethodParams || [];
             const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : val);
             const response: any = await fetchData((_params).join(','));
@@ -470,9 +487,12 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
 
         setChangedVal(val);
 
+        // update temporary value
+        setControlTempValue(val);
+
         //
-        if (!fetchTrigger) {
-            matchData(val, fetchUpdate, EMPTY_FOR_FETCH).then((response: any) => {
+        if (!MANUAL_REQ) {
+            matchData(val, fetchUpdate, AUTO_SHOW_OPTIONS).then((response: any) => {
 
                 setOrginalData(response);
 
@@ -508,13 +528,26 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
     }
 
     function cancel() {
+        // hide list
+        setIsOpen(false);
+
+
+        //
         setOrginalData([]);
         popwinPosHide();
+
+        // update temporary value
+        setControlTempValue(null);
+
     }
 
 
     async function fetchData(params: any) {
 
+        // update request process
+        setReqProgress(true);
+
+        //
         if (typeof fetchFuncAsync === 'object') {
 
             const response: any = await fetchFuncAsync[`${fetchFuncMethod}`](...params.split(','));
@@ -549,9 +582,15 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
                 }, 500);
             }
 
+            // update request process
+            setReqProgress(false);
 
             return _ORGIN_DATA;
         } else {
+
+            // update request process
+            setReqProgress(false);
+
             return [];
         }
 
@@ -572,13 +611,14 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
 
         } else {
             const _curData = typeof el.target !== 'undefined' ? el.target.dataset.itemdata : el.dataset.itemdata;
+            if (typeof _curData === 'undefined') return;
     
             const _data = JSON.parse(_curData);
 
             let res: any = [];
 
-            if (!EMPTY_FOR_FETCH) {
-                res = await matchData(inputRef.current.value, false, EMPTY_FOR_FETCH);
+            if (!AUTO_SHOW_OPTIONS) {
+                res = await matchData(inputRef.current.value, false, AUTO_SHOW_OPTIONS);
             } else {
                 res = dataInit;
             }
@@ -589,16 +629,15 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
 
 
         // cancel
-        setIsOpen(false);
         cancel();
     }
 
     async function handleFetch() {
-        if (fetchTrigger) {
-            const res: any = await matchData(changedVal, fetchUpdate, EMPTY_FOR_FETCH);
+        if (MANUAL_REQ) {
+            
+            const res: any = await matchData(changedVal, true, true);
             setOrginalData(res);
 
-
             //
             setIsOpen(res.length === 0 ? true : false);
 
@@ -610,53 +649,62 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         }
     }
 
-    function handleClick() {
+    function activate() {
+        if (AUTO_SHOW_OPTIONS) {
+            setOrginalData(dataInit);
+            setIsOpen(true);
+        }
 
-        if (!isOpen) {
-            if (EMPTY_FOR_FETCH) {
-                setOrginalData(dataInit);
-                setIsOpen(true);
-            }
+        // window position
+        setTimeout(() => {
+            popwinPosInit();
+        }, 0);
+    }
 
-            // window position
-            setTimeout(() => {
-                popwinPosInit();
-            }, 0);
+    function handleShowList() {
+
+        // Reset the out-of-focus marker
+        isBlurringRef.current = false;
+
+        if (!isOpen) {
+            activate();
         } else {
             // cancel
-            setIsOpen(false);
             cancel();
         }
 
 
-
+        // Every time the input changes or the search button is clicked, a data request will be triggered
+        if (
+            (!AUTO_SHOW_OPTIONS && (controlTempValue === '' || controlTempValue === null)) || 
+            MANUAL_REQ
+        ) {
+            setTimeout(() => {
+                popwinPosHide();
+            }, 0);
+        }
+        
+      
         onClick?.(inputRef.current, listRef.current)
     }
 
 
     function handleBlur(e: any) {
 
-        setIsOpen(false);
-        if (!fetchTrigger) {
-            setTimeout(() => {
-
-                //
-                onBlur?.(inputRef.current, listRef.current);
-
-                //
-                cancel();
+        // Set the out-of-focus marker
+        isBlurringRef.current = true;
 
-            }, 300);
-        }
+        setTimeout(() => {
+            // cancel
+            cancel(); // The delay is to avoid losing focus and not being able to click on the option
 
-    }
+            //
+            onBlur?.(inputRef.current, listRef.current);
+        }, 300);
 
-    function handleMouseLeaveTrigger() {
-        setIsOpen(false);
     }
 
 
-
     function optionFocus(type: string) {
 
         return new Promise(function (resolve) {
@@ -773,15 +821,17 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
 
         // data init
         //--------------
-        const _oparams: any[] = fetchFuncMethodParams || [];
-        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (fetchTrigger && !fetchUpdate) ? '' : (fetchUpdate ? QUERY_STRING_PLACEHOLDER : (fetchTrigger ? QUERY_STRING_PLACEHOLDER : '')));
-        if (!firstFetch) {
-            fetchData((_params).join(','));
-            setFirstFetch(true);  // avoid triggering two data requests if the input value has not changed
+        // If automatic request enabled, do not send them for the first time
+        if (AUTO_SHOW_OPTIONS) {
+            const _oparams: any[] = fetchFuncMethodParams || [];
+            const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (MANUAL_REQ && !fetchUpdate) ? '' : (fetchUpdate ? QUERY_STRING_PLACEHOLDER : (MANUAL_REQ ? QUERY_STRING_PLACEHOLDER : '')));
+            if (!firstFetch) {
+                fetchData((_params).join(','));
+                setFirstFetch(true);  // avoid triggering two data requests if the input value has not changed
+            }
         }
 
 
-
     }, [value, data]);
 
 
@@ -799,7 +849,6 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
                         'active': isOpen
                     }
                 )} 
-                onMouseLeave={handleMouseLeaveTrigger}
                 onKeyDown={handleKeyPressed}
             >
 
@@ -839,8 +888,8 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
                     }}
                     onBlur={handleBlur}
                     onSubmit={handleFetch}
-                    onClick={handleClick}
-                    icon={hideIcon ? '' : (!fetchTrigger ? '' : icon)}
+                    onClick={handleShowList}
+                    icon={hideIcon ? '' : (!MANUAL_REQ ? '' : icon)}
                     btnId={btnId}
                     autoComplete={typeof autoComplete === 'undefined' ? 'off' : autoComplete}
                     autoCapitalize={typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize}
@@ -878,12 +927,12 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
                                         'd-none': (orginalData && orginalData.length === 0) && !NO_MATCH_POPUP
                                     }
                                 )}
-                                style={{ backgroundColor: 'var(--bs-list-group-bg)' }}
                                 ref={listContentRef}
                             >
                                 <div className="livesearch__options-contentlist-inner">
 
 
+
                                     {/* NO MATCH */}
                                     {orginalData && orginalData.length === 0 ? <>
                                         <button
@@ -891,7 +940,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
                                             type="button"
                                             className="list-group-item list-group-item-action border-top-0 border-bottom-0 no-match livesearch__control-option-item--nomatch"
                                             disabled
-                                        >{fetchNoneInfo || 'No match yet'}</button>
+                                        >{fetchNoneInfo}</button>
                                     </> : null}
                                     {/* /NO MATCH */}
 
@@ -940,17 +989,24 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
                 </> : null}
 
 
+                {/* LOADER */}
+                {reqProgress ? <><div className={`livesearch-loader ${!hideIcon ? 'pos-offset' : ''}`}>{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}
+                {/* /LOADER */}
+
+
                 {hideIcon ? null : <>
-                    {!fetchTrigger ? <>
-                        <span className="livesearch__wrapper-searchbtn">
-                            <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" style={{ pointerEvents: 'none' }}>
-                                <svg width="1em" height="1em" fill="#a5a5a5" viewBox="0 0 16 16">
-                                    <path d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z" fillRule="evenodd" />
-                                </svg>
-                            </button>
-
-                        </span>
-                    </> : null}
+                    <span className="livesearch__wrapper-searchbtn">
+                        <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" style={MANUAL_REQ ? undefined :{pointerEvents: 'none'}} onClick={(e: React.MouseEvent) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleFetch();
+                        }}>
+                            <svg width="1em" height="1em" fill="#a5a5a5" viewBox="0 0 16 16">
+                                <path d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z" fillRule="evenodd" />
+                            </svg>
+                        </button>
+
+                    </span>
                 </>}
 
 

package/lib/esm/RootPortal/index.tsx

@@ -6,13 +6,15 @@ export type RootPortalProps = {
     containerClassName?: string;
     children?: React.ReactNode;
     show?: boolean;
+    usePortal?: boolean;
 };
 
 const RootPortal = (props: RootPortalProps) => {
     const {
         containerClassName,
         show,
-        children
+        children,
+        usePortal = true
     } = props;
 
     const containerRef = useRef<HTMLElement>();
@@ -25,19 +27,23 @@ const RootPortal = (props: RootPortalProps) => {
     // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
 
     useEffect(() => {
-
-        containerRef.current = document.createElement('div');
-        containerRef.current.className = `root-portal-container ${containerClassName || ''}`;
-        document.body.appendChild(containerRef.current);
-        
+        if (usePortal) {
+            containerRef.current = document.createElement('div');
+            containerRef.current.className = `root-portal-container ${containerClassName || ''}`;
+            document.body.appendChild(containerRef.current);
+        }
 
         return () => {
-            if (containerRef.current) {
+            if (usePortal && containerRef.current) {
                 containerRef.current.remove();
             }
         };
-    }, []);
+    }, [usePortal]);
 
+    if (!usePortal) {
+        return show ? <>{children}</> : null;
+    }
+    
     return (
         <>
             {containerRef.current && show && createPortal(

package/lib/esm/SearchBar/index.tsx

@@ -4,6 +4,7 @@ import useComId from 'funda-utils/dist/cjs/useComId';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 export type SearchBarProps = {
     wrapperClassName?: string;
     controlClassName?: string;