funda-ui 4.7.624 → 4.7.625

package/publish/lib/esm/LiveSearch/index.tsx

@@ -1,1058 +0,0 @@
-import React, { forwardRef, useEffect, useState, useRef, KeyboardEvent, useImperativeHandle } from 'react';
-
-
-import RootPortal from 'funda-root-portal';
-import SearchBar from 'funda-searchbar';
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import {
-    isJSON
-} from 'funda-utils/dist/cjs/validate';
-import useWindowScroll from 'funda-utils/dist/cjs/useWindowScroll';
-import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
-import useDebounce from 'funda-utils/dist/cjs/useDebounce';
-import {
-    getAbsolutePositionOfStage
-} from 'funda-utils/dist/cjs/getElementProperty';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-
-export interface OptionConfig {
-    disabled?: boolean;
-    label: any;
-    listItemLabel?: any;
-    value: any;
-    queryString: string | number;
-}
-
-
-export type LiveSearchProps = {
-    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
-    popupRef?: React.ForwardedRef<any>; // could use "Array" on popupRef.current, such as popupRef.current[0], popupRef.current[1]
-    wrapperClassName?: string;
-    controlClassName?: string;
-    controlExClassName?: string;
-    optionsExClassName?: string;
-    controlGroupWrapperClassName?: string;
-    controlGroupTextClassName?: string;
-    exceededSidePosOffset?: number;
-    appearance?: string;
-    isSearchInput?: boolean;
-    loader?: React.ReactNode;
-    value?: string;
-    label?: React.ReactNode | string;
-    name?: string;
-    units?: React.ReactNode | string;
-    iconLeft?: React.ReactNode | string;
-    iconRight?: React.ReactNode | string;
-    minLength?: any;
-    maxLength?: any;
-    readOnly?: any;
-    disabled?: any;
-    required?: any;
-    placeholder?: string;
-    noMatchPopup?: boolean;
-    options?: OptionConfig[] | string;
-    winWidth?: string | Function;
-    icon?: React.ReactNode | string;
-    btnId?: string;
-    fetchTrigger?: boolean;
-    hideIcon?: boolean;
-    renderOption?: (optionData: OptionConfig, index: number) => React.ReactNode;
-    /** Set the depth value of the control to control the display of the pop-up layer appear above.
-     * Please set it when multiple controls are used at the same time. */
-    depth?: number;
-    /** Incoming data, you can set the third parameter of `onFetch` */
-    data?: any;
-    /** -- */
-    id?: string;
-    autoComplete?: string;
-    autoCapitalize?: string;
-    spellCheck?: boolean;
-    style?: React.CSSProperties;
-    tabIndex?: number;
-    [key: `data-${string}`]: string | undefined;
-    autoShowOptions?: boolean;
-    fetchNoneInfo?: string;
-    fetchUpdate?: boolean;
-    fetchFuncAsync?: any;
-    fetchFuncMethod?: string;
-    fetchFuncMethodParams?: any[];
-    fetchCallback?: (data: any) => void;
-    onFetch?: (data: any) => void;
-    onClick?: (inputEl: any, popupEl: any) => void;
-    onChange?: (inputEl: any, data: any, selectedData: any, popupEl: any) => void;
-    onKeyboardInput?: (e: any, inputEl: any, popupEl: any) => void;
-    onBlur?: (inputEl: any, popupEl: any) => void;
-    onPressEnter?: (inputEl: any, popupEl: any) => void;
-};
-
-const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
-    const {
-        contentRef,
-        popupRef,
-        wrapperClassName,
-        controlClassName,
-        controlExClassName,
-        optionsExClassName,
-        controlGroupWrapperClassName,
-        controlGroupTextClassName,
-        exceededSidePosOffset,
-        appearance,
-        isSearchInput,
-        loader,
-        readOnly,
-        disabled,
-        required,
-        placeholder,
-        noMatchPopup,
-        options,
-        value,
-        label,
-        name,
-        units,
-        iconLeft,
-        iconRight,
-        minLength,
-        maxLength,
-        id,
-        autoComplete,
-        autoCapitalize,
-        spellCheck,
-        icon,
-        btnId,
-        fetchTrigger,
-        hideIcon,
-        renderOption,
-        depth,
-        style,
-        winWidth,
-        tabIndex,
-        data,
-        autoShowOptions,
-        fetchNoneInfo = 'No match yet',
-        fetchUpdate,
-        fetchFuncAsync,
-        fetchFuncMethod,
-        fetchFuncMethodParams,
-        fetchCallback,
-        onClick,
-        onFetch,
-        onChange,
-        onKeyboardInput,
-        onBlur,
-        onPressEnter,
-        ...attributes
-    } = props;
-
-
-    const QUERY_STRING_PLACEHOLDER = '------';  // Invalid parameters for the first automatic request
-    const DEPTH = depth || 1055;  // the default value same as bootstrap
-    const POS_OFFSET = 0;
-    const EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
-    const AUTO_SHOW_OPTIONS = typeof autoShowOptions !== 'undefined' && autoShowOptions === true ? true : false; 
-    const MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;  // Manual requests
-    const MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
-
-    const NO_MATCH_POPUP = typeof noMatchPopup === 'undefined' ? true : noMatchPopup;
-    const WIN_WIDTH = typeof winWidth === 'function' ? winWidth() : winWidth ? winWidth : 'auto';
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-    const inputRef = useRef<any>(null);
-    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[]>([]);
-    const [changedVal, setChangedVal] = useState<string>(value || '');
-    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) => {
-        handleChange(e);
-    }, 350, [dataInit]);
-
-
-    // exposes the following methods
-    useImperativeHandle(
-        popupRef,
-        () => ({
-            close: () => {
-                cancel();
-            },
-            open: () => {
-                activate();
-            },
-        }),
-        [popupRef],
-    );
-
-    // exposes the following methods
-    useImperativeHandle(
-        contentRef,
-        () => ({
-            control: () => {
-                return inputRef.current;
-            },
-            getLatestVal: () => {
-                return changedVal || '';
-            },
-            
-            clear: (cb?: any) => {
-                setChangedVal('');
-                cb?.();
-
-                onChange?.(inputRef.current, [], '', listRef.current);
-            },
-            set: (value: string, cb?: any) => {
-                setChangedVal(`${value}`);
-                cb?.();
-
-                onChange?.(inputRef.current, [], '', listRef.current);
-            }
-        }),
-        [contentRef],
-    );
-
-    // click outside
-    useClickOutside({
-        enabled: isOpen && rootRef.current && listRef.current,
-        isOutside: (event: any) => {
-
-            // close dropdown when other dropdown is opened
-            return (
-                (rootRef.current !== event.target && !rootRef.current.contains(event.target as HTMLElement)) &&
-                listRef.current !== event.target && !listRef.current.contains(event.target as HTMLElement)
-            )
-              
-        },
-        handle: (event: any) => {
-            // cancel
-            cancel();
-        }
-    }, [isOpen, rootRef, listRef]);
-
-
-
-    // Only single symbols such as , #, and @ are allowed, and , a, a, , etc. are not allowed.
-    const isSingleSpecialChar = (str: string) => {
-        return typeof str === 'string' && /^[^\w\s]$/.test(str);
-    };
-
-
-    // Add function to the element that should be used as the scrollable area.
-    const [scrollData, windowScrollUpdate] = useWindowScroll({
-        performance: ['debounce', 500],   // "['debounce', 500]" or "['throttle', 500]"
-        handle: (scrollData: any) => {
-            popwinPosInit(false);
-        }
-    });
-
-
-    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;
-
-
-        //
-        let contentMaxHeight = 0;
-
-        // update modal position
-        const _modalRef: any = document.querySelector(`#livesearch__options-wrapper-${idRes}`);
-        const _triggerRef: any = inputRef.current;
-
-        // console.log(getAbsolutePositionOfStage(_triggerRef));
-
-        if (_modalRef === null) return;
-
-        const { x } = getAbsolutePositionOfStage(_triggerRef);
-        const { y, width, height } = getAbsolutePositionOfStage(_triggerRef);
-        const _triggerBox = _triggerRef.getBoundingClientRect();
-        let targetPos = '';
-
-        // STEP 1:
-        //-----------
-        // display wrapper
-        if (showAct) _modalRef.classList.add('active');
-
-
-        // STEP 2:
-        //-----------
-        // Detect position
-        if (window.innerHeight - _triggerBox.top > MIN_SPACE_FOR_DROPDOWN) {
-            targetPos = 'bottom';
-        } else {
-            targetPos = 'top';
-        }
-
-        if (typeof listContentRef.current.dataset.pos === 'undefined') listContentRef.current.dataset.pos = targetPos;
-
-
-
-        // STEP 3:
-        //-----------
-        // Detect content MAX HEIGHT and ACTUAL HEIGHT
-        let _contentBox = listContentRef.current.getBoundingClientRect();
-        const _contentActualHeight = listContentRef.current.querySelector('.livesearch__options-contentlist-inner').clientHeight;
-
-
-        if (targetPos === 'top') {
-            contentMaxHeight = _triggerBox.top;
-
-            // Calculate the final height with minimum height protection
-            const contentHeightOffset = 0;
-            const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
-
-            if (_contentBox.height > _contentActualHeight) {
-                if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
-            } else {
-                if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
-
-                // recalculate the height
-                _contentBox = listContentRef.current.getBoundingClientRect();
-                if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = finalHeight + 'px';
-
-            }
-        }
-
-        if (targetPos === 'bottom') {
-            contentMaxHeight = window.innerHeight - _triggerBox.bottom;
-
-            // Calculate the final height with minimum height protection
-            const contentHeightOffset = 10;
-            const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
-
-            if (_contentBox.height > _contentActualHeight) {
-                if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
-            } else {
-                if (_contentActualHeight > 0) listContentRef.current.style.height = _contentActualHeight + 'px';
-
-                // recalculate the height
-                _contentBox = listContentRef.current.getBoundingClientRect();
-                if (_contentBox.height > contentMaxHeight) listContentRef.current.style.height = finalHeight + 'px';
-            }
-
-        }
-
-
-
-        // STEP 4:
-        //-----------
-        // Adjust position
-        if (targetPos === 'top') {
-            _modalRef.style.left = x + 'px';
-            //_modalRef.style.top = y - POS_OFFSET - (listRef.current.clientHeight) - 2 + 'px';
-            _modalRef.style.top = 'auto';
-            _modalRef.style.bottom = (window.innerHeight - _triggerBox.top) + POS_OFFSET + 2 + 'px';
-            _modalRef.style.setProperty('position', 'fixed', 'important');
-            _modalRef.classList.add('pos-top');
-
-        }
-
-        if (targetPos === 'bottom') {
-            _modalRef.style.left = x + 'px';
-            _modalRef.style.bottom = 'auto';
-            _modalRef.style.top = y + height + POS_OFFSET + 'px';
-            _modalRef.style.setProperty('position', 'absolute', 'important');
-            _modalRef.classList.remove('pos-top');
-        }
-
-
-        // STEP 5:
-        //-----------
-        // Determine whether it exceeds the far right or left side of the screen
-        const _modalContent = _modalRef;
-        const _modalBox = _modalContent.getBoundingClientRect();
-        if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
-
-            // 10 pixels is used to account for some bias in mobile devices
-            if ((_modalBox.right + 10) > window.innerWidth) {
-                const _modalOffsetPosition = _modalBox.right - window.innerWidth + EXCEEDED_SIDE_POS_OFFSET;
-                _modalContent.dataset.offset = _modalOffsetPosition;
-                _modalContent.style.marginLeft = `-${_modalOffsetPosition}px`;
-                // console.log('_modalPosition: ', _modalOffsetPosition)
-            }
-
-
-            if ((_modalBox.left - 10) < 0) {
-                const _modalOffsetPosition = Math.abs(_modalBox.left) + EXCEEDED_SIDE_POS_OFFSET;
-                _modalContent.dataset.offset = _modalOffsetPosition;
-                _modalContent.style.marginLeft = `${_modalOffsetPosition}px`;
-                // console.log('_modalPosition: ', _modalOffsetPosition)
-            }
-
-
-        }
-
-
-
-    }
-
-
-
-
-    function popwinPosHide() {
-
-        const _modalRef: any = document.querySelector(`#livesearch__options-wrapper-${idRes}`);
-
-        if (_modalRef !== null && listContentRef.current !== null) {
-
-
-            // remove classnames and styles
-            _modalRef.classList.remove('active');
-            listContentRef.current.style.removeProperty('height');
-
-            // remove data-* attibutes
-            popwinContainerHeightReset();
-
-        }
-
-
-    }
-
-
-    function popwinContainerHeightReset() {
-        if (listContentRef.current === null) return;
-
-        // remove data-* attibutes
-        listContentRef.current.removeAttribute('data-height');
-        listContentRef.current.removeAttribute('data-pos');
-
-    }
-
-    //
-    async function matchData(val: string = '', query: boolean = false, emptyValShowAll: boolean = false) {
-
-
-        let res: any[] = [];
-        let filterRes = (data: any[]) => {
-            return data.filter((item: any) => {
-
-                // Avoid fatal errors causing page crashes
-                const _queryString = typeof item.queryString !== 'undefined' && item.queryString !== null ? item.queryString : '';
-                const _val = typeof val !== 'undefined' && val !== null ? val : '';
-
-                // STEP 1
-                //========
-                if (emptyValShowAll && _val === '') {
-                    return true;
-                }
-
-
-                // STEP 2
-                //========
-                // @@@ This code is triggered only if a custom request is used to update "options" @@@
-                if (query && _val == ' ') {
-                    return true;
-                }
-
-
-                // STEP 3
-                //========
-                // @@@ This code is triggered only if a custom request is used to update "options" @@@
-                if (query && _val != '' && isSingleSpecialChar(_val)) {
-                    return true;
-                }
-
-
-                // STEP 4
-                //========
-                if (
-                    (
-                        _queryString.split(',').some((l: any) => l.charAt(0) === _val.toLowerCase()) ||
-                        _queryString.split(',').some((l: any) => l.replace(/ /g, '').indexOf(_val.toLowerCase()) >= 0) ||
-                        item.label.toLowerCase().indexOf(_val.toLowerCase()) >= 0
-                    ) &&
-                    _val != ''
-                ) {
-                    return true;
-                } else {
-                    return false;
-                }
-            });
-        }
-
-        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(','));
-            res = filterRes(response) as never;
-            return res;
-        } else {
-            res = filterRes(dataInit) as never;
-            return res;
-        }
-
-
-    }
-
-
-
-    function handleChange(e: any) {
-        const val = e.target.value;
-
-        setChangedVal(val);
-
-        // update temporary value
-        setControlTempValue(val);
-
-        //
-        if (!MANUAL_REQ) {
-            matchData(val, fetchUpdate, AUTO_SHOW_OPTIONS).then((response: any) => {
-
-                setOrginalData(response);
-
-
-                //
-                onChange?.(inputRef.current, response, '', listRef.current);
-
-                //
-                setIsOpen(true);
-
-                // window position
-                setTimeout(() => {
-                    popwinPosInit();
-                }, 0);
-
-
-
-            });
-        } else {
-
-            //
-            onChange?.(inputRef.current, orginalData, '', listRef.current);
-
-            // window position
-            setTimeout(() => {
-                popwinPosInit();
-            }, 0);
-
-        }
-
-
-
-    }
-
-    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(','));
-            let _ORGIN_DATA = response.data;
-
-            // reset data structure
-            if (typeof (fetchCallback) === 'function') {
-                _ORGIN_DATA = fetchCallback(_ORGIN_DATA);
-            }
-
-            // Determine whether the data structure matches
-            if (_ORGIN_DATA.length > 0 && typeof _ORGIN_DATA[0].value === 'undefined') {
-                console.warn('The data structure does not match, please refer to the example in the component documentation.');
-                setHasErr(true);
-                _ORGIN_DATA = [];
-            }
-
-
-            //
-            onFetch?.(_ORGIN_DATA);
-
-            //
-            setOrginalDataInit(_ORGIN_DATA);
-
-
-            //
-            // window position
-            if (componentFirstLoad) {
-
-                setTimeout(() => {
-                    popwinPosInit();
-                }, 500);
-            }
-
-            // update request process
-            setReqProgress(false);
-
-            return _ORGIN_DATA;
-        } else {
-
-            // update request process
-            setReqProgress(false);
-
-            return [];
-        }
-
-
-    }
-
-    async function handleSelect(el: any, dataInput: any = false) {
-
-        if (typeof el === 'undefined') return;
-
-
-        // update value
-        if (dataInput) {
-            const _data = JSON.parse(dataInput);
-
-            onChange?.(inputRef.current, orginalData, _data, listRef.current);
-            setChangedVal(_data.label);
-
-        } else {
-            const _curData = typeof el.currentTarget !== 'undefined' ? el.currentTarget.dataset.itemdata : el.dataset.itemdata;
-            if (typeof _curData === 'undefined') return;
-    
-            const _data = JSON.parse(_curData);
-
-            let res: any = [];
-
-            if (!AUTO_SHOW_OPTIONS) {
-                res = await matchData(inputRef.current.value, false, AUTO_SHOW_OPTIONS);
-            } else {
-                res = dataInit;
-            }
-
-            onChange?.(inputRef.current, res, _data, listRef.current);
-            setChangedVal(_data.label);
-        }
-
-
-        // cancel
-        cancel();
-    }
-
-    async function handleFetch() {
-        if (MANUAL_REQ) {
-            
-            const res: any = await matchData(changedVal, true, true);
-            setOrginalData(res);
-
-            //
-            setIsOpen(res.length === 0 ? true : false);
-
-            // window position
-            setTimeout(() => {
-                popwinPosInit();
-            }, 0);
-
-        }
-    }
-
-    function activate() {
-        if (AUTO_SHOW_OPTIONS) {
-            setOrginalData(dataInit);
-            setIsOpen(true);
-        }
-
-        // window position
-        setTimeout(() => {
-            popwinPosInit();
-        }, 0);
-    }
-
-    function handleShowList() {
-
-        // Reset the out-of-focus marker
-        isBlurringRef.current = false;
-
-        if (!isOpen) {
-            activate();
-        } else {
-            // cancel
-            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) {
-
-        // Set the out-of-focus marker
-        isBlurringRef.current = true;
-
-        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 optionFocus(type: string) {
-
-        return new Promise(function (resolve) {
-
-            // Determine the "active" class name to avoid listening to other unused components of the same type
-            if (listRef.current === null || !rootRef.current.classList.contains('active')) return;
-
-
-            let options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide)'));
-            // Avoid selecting options that are disabled
-            options = options.filter((options: HTMLElement) => !options.classList.contains('disabled'));
-
-            const currentIndex = options.findIndex((e) => e === listRef.current.querySelector('.list-group-item.active'));
-
-
-            // get the next element in the list, "%" will loop around to 0
-            let nextIndex;
-            if (type === 'increase') {
-                nextIndex = currentIndex + 1 % options.length;
-            } else {
-                nextIndex = (currentIndex < 0 ? options.length : currentIndex) - 1 % options.length;
-            }
-
-
-
-            //only one
-            if (options.length === 1) nextIndex = 0;
-
-
-            if (!isNaN(nextIndex)) {
-                options.forEach((node: any, index: number) => {
-                    node?.classList.remove('active');
-                });
-
-                const targetOption = options[nextIndex] as HTMLElement;
-                if (typeof targetOption !== 'undefined' && !targetOption.classList.contains('no-match')) {
-                    targetOption.classList.add('active');
-                    resolve(targetOption);
-                }
-
-            }
-        });
-
-
-    }
-
-    async function handleKeyPressed(event: KeyboardEvent<HTMLDivElement>) {
-        const key = event.code;
-
-        if (!isOpen) return;
-
-        let res: any = null;
-
-        if (key === 'Enter' || key === 'NumpadEnter') {
-            event.preventDefault();
-
-            // Determine the "active" class name to avoid listening to other unused components of the same type
-            if (listRef.current === null || !rootRef.current.classList.contains('active')) return;
-
-
-            if (listRef.current !== null) {
-                const currentData = listRef.current.dataset.data;
-
-                if (typeof currentData !== 'undefined') {
-                    handleSelect(null, currentData);
-
-                    //
-                    const options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.no-match)'));
-                    options.forEach((node: any) => {
-                        node.classList.remove('active');
-                    });
-
-
-                    //
-                    onChange?.(inputRef.current, options.map((node: HTMLElement) => JSON.parse(node.dataset.itemdata as any)), JSON.parse(currentData), listRef.current);
-
-                }
-            }
-
-        }
-
-        if (key === 'ArrowUp') {
-            res = await optionFocus('decrease');
-
-        }
-
-        if (key === 'ArrowDown') {
-            res = await optionFocus('increase');
-        }
-
-        // temporary data
-        if (res !== null) listRef.current.dataset.data = JSON.stringify({
-            value: res.dataset.value,
-            label: res.dataset.label,
-            queryString: res.dataset.querystring
-        });
-    }
-    
-
-    useEffect(() => {
-
-
-        // Component first load
-        //--------------
-        if (!componentFirstLoad) {
-            setComponentFirstLoad(true);
-        }
-
-
-        // update default value
-        //--------------
-        setChangedVal(value || '');
-
-
-        // data init
-        //--------------
-        // 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]);
-
-
-    return (
-        <>
-
-            {label ? <><div className="livesearch__wrapper__label">{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={`label-${idRes}`} className="form-label">{label}</label>}</div></> : null}
-
-            <div 
-                ref={rootRef} 
-                className={combinedCls(
-                    'livesearch__wrapper',
-                    clsWrite(wrapperClassName, 'mb-3 position-relative'),
-                    {
-                        'active': isOpen
-                    }
-                )} 
-                onKeyDown={handleKeyPressed}
-            >
-
-       
-                <SearchBar
-                    wrapperClassName=""
-                    controlClassName={controlClassName}
-                    controlExClassName={controlExClassName}
-                    controlGroupWrapperClassName={controlGroupWrapperClassName}
-                    controlGroupTextClassName={controlGroupTextClassName}  
-                    ref={(node) => {
-                        inputRef.current = node;
-                        if (typeof externalRef === 'function') {
-                            externalRef(node);
-                        } else if (externalRef) {
-                            externalRef.current = node;
-                        }
-                    }}
-                    value={changedVal}
-                    label=""
-                    tabIndex={tabIndex}
-                    id={idRes}
-                    name={name}
-                    placeholder={placeholder}
-                    units={units}
-                    iconLeft={iconLeft}
-                    iconRight={iconRight}
-                    minLength={minLength}
-                    maxLength={maxLength}
-                    disabled={disabled}
-                    required={required}
-                    readOnly={readOnly}
-                    style={style}
-                    appearance={appearance}
-                    onChange={(e: any) => {
-                        handleChangeFetchSafe(e);
-                    }}
-                    onBlur={handleBlur}
-                    onSubmit={handleFetch}
-                    onClick={handleShowList}
-                    icon={hideIcon ? '' : (!MANUAL_REQ ? '' : icon)}
-                    btnId={btnId}
-                    autoComplete={typeof autoComplete === 'undefined' ? 'off' : autoComplete}
-                    autoCapitalize={typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize}
-                    spellCheck={typeof spellCheck === 'undefined' ? false : spellCheck}
-                    isSearchInput={isSearchInput}
-                    onKeyPressedCallback={(e: KeyboardEvent<any>) => {
-                        onKeyboardInput?.(e, inputRef.current, listRef.current);
-                    }}
-                    onPressEnter={(event: any, onComposition: any) => {
-                        onPressEnter?.(event, onComposition);
-                    }}
-                    {...attributes}
-                />
-
-
-                {orginalData && !hasErr ? <>
-                    <RootPortal show={true} containerClassName="LiveSearch">
-                        <div
-                            ref={listRef}
-                            id={`livesearch__options-wrapper-${idRes}`}
-                            className={combinedCls(
-                                'livesearch__options-wrapper list-group position-absolute border shadow small',
-                                optionsExClassName,
-                                {
-                                    'shadow-none border-0': (orginalData && orginalData.length === 0) && !NO_MATCH_POPUP
-                                }
-                            )}
-                            style={{ zIndex: DEPTH, width: WIN_WIDTH, display: 'none' }}
-                            role="tablist"
-                        >
-                            <div
-                                className={combinedCls(
-                                    'livesearch__options-contentlist rounded',
-                                    {
-                                        'd-none': (orginalData && orginalData.length === 0) && !NO_MATCH_POPUP
-                                    }
-                                )}
-                                ref={listContentRef}
-                            >
-                                <div className="livesearch__options-contentlist-inner">
-
-
-
-                                    {/* NO MATCH */}
-                                    {orginalData && orginalData.length === 0 ? <>
-                                        <button
-                                            tabIndex={-1}
-                                            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}</button>
-                                    </> : null}
-                                    {/* /NO MATCH */}
-
-
-                                    {orginalData ? orginalData.map((item, index) => {
-                                        const startItemBorder = index === 0 ? 'border-top-0' : '';
-                                        const endItemBorder = index === orginalData.length - 1 ? 'border-bottom-0' : '';
-
-                                        return <button
-                                            tabIndex={-1}
-                                            type="button"
-                                            data-index={index}
-                                            key={index}
-                                            className={combinedCls(
-                                                'list-group-item list-group-item-action border-start-0 border-end-0 border-top-0 border-bottom-0 livesearch__control-option-item',
-                                                startItemBorder,
-                                                endItemBorder,
-                                                {
-                                                    'disabled': item.disabled
-                                                }
-
-                                            )}
-                                            data-value={`${item.value}`}
-                                            data-label={`${item.label}`}
-                                            data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`}
-                                            data-itemdata={JSON.stringify(item)}
-                                            data-list-item-label={`${typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel}`}
-                                            role="tab"
-                                            onClick={handleSelect}
-                                        >
-
-                                            {typeof renderOption === 'function' ? <>
-                                                {renderOption(item, index)}
-                                            </> : <>
-                                                <span dangerouslySetInnerHTML={{
-                                                    __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
-                                                }}></span>
-                                            </>}
-
-                                        </button>
-                                    }) : null}
-
-                                </div>
-
-                            </div>
-
-
-                        </div>
-
-
-                    </RootPortal>
-
-                </> : 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 : <>
-                    <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>
-                </>}
-
-
-
-
-
-
-            </div>
-
-        </>
-    )
-});
-
-
-export default LiveSearch;