funda-ui 4.7.133 → 4.7.150

package/lib/esm/CascadingSelectE2E/index.tsx

@@ -20,9 +20,13 @@ import {
     addTreeDepth,
     addTreeIndent
 } from 'funda-utils/dist/cjs/tree';
+import {
+    htmlToPlain
+} from 'funda-utils/dist/cjs/format-string';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 import Group from './Group';
 
 
@@ -45,6 +49,8 @@ export type CascadingSelectE2EProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
     perColumnHeadersShow?: boolean;
     exceededSidePosOffset?: number;
     value?: string;
@@ -107,6 +113,8 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
         wrapperClassName,
         controlClassName,
         controlExClassName,
+        searchable = false,
+        searchPlaceholder = '',
         perColumnHeadersShow = true,
         exceededSidePosOffset,
         disabled,
@@ -151,6 +159,9 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
     const valRef = useRef<any>(null);
     const listRef = useRef<any>(null);
 
+    // searchable
+    const [columnSearchKeywords, setColumnSearchKeywords] = useState<string[]>([]);
+
 
     // exposes the following methods
     useImperativeHandle(
@@ -1337,6 +1348,17 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
 
     }, [value]);
 
+
+    // Automatically complete and truncate column Search Keywords each time the number of columns changes
+    useEffect(() => {
+        if (listData.current.length !== columnSearchKeywords.length) {
+            setColumnSearchKeywords(
+                Array(listData.current.length).fill('').map((v, i) => columnSearchKeywords[i] || '')
+            );
+        }
+    }, [listData.current.length]);
+
+
     return (
         <>
 
@@ -1372,13 +1394,43 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
                                 {listData.current.map((item: any, level: number) => {
 
                                     if (item.length > 0) {
+
+                                        // filter data
+                                        let filteredItem = item;
+                                        if (searchable && columnSearchKeywords[level]) {
+                                            const keyword = columnSearchKeywords[level].toLowerCase();
+                                            filteredItem = item.filter((opt: any) =>
+                                                (htmlToPlain(opt.name) || '').toLowerCase().includes(keyword)
+                                            );
+                                        }
+
+
                                         return (
                                             <li key={level} data-col={level} className="cas-select-e2e__items-col">
+
+                                 
+                                                {/* SEARCH BOX */}
+                                                {searchable && (
+                                                    <div className="cas-select-e2e__items-col-searchbox">
+                                                        <input
+                                                            type="text"
+                                                            placeholder={searchPlaceholder}
+                                                            value={columnSearchKeywords[level] || ''}
+                                                            onChange={e => {
+                                                                const newKeywords = [...columnSearchKeywords];
+                                                                newKeywords[level] = e.target.value;
+                                                                setColumnSearchKeywords(newKeywords);
+                                                            }}
+                                                        />
+                                                    </div>
+                                                )}
+                                                {/* /SEARCH BOX */}
+
                                                 <Group
                                                     perColumnHeadersShow={perColumnHeadersShow}
                                                     level={level}
                                                     columnTitle={columnTitleData}
-                                                    data={item}
+                                                    data={filteredItem}  // filter result
                                                     cleanNodeBtnClassName={cleanNodeBtnClassName}
                                                     cleanNodeBtnContent={cleanNodeBtnContent}
                                                     selectEv={(e, value, index) => handleClickItem(e, value, index, level, listData.current)}

package/lib/esm/Checkbox/index.tsx

@@ -58,7 +58,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
     const valRef = useRef<any>(null);
-    const [val, setVal] = useState<any>(null || false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
+    const [val, setVal] = useState<boolean>(false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
 
     // exposes the following methods
     useImperativeHandle(
@@ -78,7 +78,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
                     onChange(null, false);
                 }
             },
-            set: (value: string, cb?: any) => {
+            set: (value: boolean, cb?: any) => {
                 setVal(value);
                 cb?.();
 
@@ -133,7 +133,9 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
     useEffect(() => {
 
         // default value
-        setVal(checked);
+        if (typeof checked === 'boolean') {
+            setVal(checked);
+        }
 
         // Set a checkbox to indeterminate state
         if (typeof indeterminate !== 'undefined') {

package/lib/esm/LiveSearch/index.tsx

@@ -144,6 +144,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
     } = 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;
@@ -773,7 +774,7 @@ 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 ? '------' : (fetchTrigger ? '------' : '')));
+        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

package/lib/esm/Select/index.scss

@@ -17,9 +17,11 @@
     --cus-sel-removebtn-fill: #000;
     --cus-sel-removebtn-hover-fill: #f00;
 
+        
     position: relative; /* Required */
 
 
+    
 
     /*------ Placeholder for input ------*/
     input::placeholder {
@@ -33,7 +35,6 @@
             fill: var(--cus-sel-arrow-fill);
         }
     }
-        
     /*------ Clean ------*/
     .clean {
         svg .clean-fill-g {
@@ -71,6 +72,7 @@
     .custom-select-multi__control-blinking-cursor {
         display: inline-block;
         color: var(--cus-sel-placeholder-color);
+        width: 100%;
 
         &.animated {
             animation: 1s mf-sel-blink step-end infinite;
@@ -80,6 +82,15 @@
             color: var(--cus-sel-input-placeholder-color);
         }
 
+        /* Text preview */
+        > span {
+            display: inline-block;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: 100%;
+        }
+
 
     }
     .custom-select-multi__control-blinking-following-cursor {
@@ -383,7 +394,7 @@
     --cus-sel-listgroup-content-scrollbar-w: 10px;
     --cus-sel-listgroup-grouptitle-color: #a2a2a2;
     --cus-sel-listgroup-groupborder-color: #d8d8d8;
-
+    --cus-sel-loader-color: #000000;
 
 
 
@@ -391,11 +402,41 @@
     min-width: var(--cus-sel-listgroup-popwin-min-width);
     z-index: 1055;  /* --bs-modal-zindex */
 
+    
     &.active {
         display: block !important;
     }
 
+    
+
+    /*------ Loader ------*/
+    .cus-select-loader {
+        pointer-events: none;
+        z-index: 1;
+        width: 12px;
+        height: 12px;
+        text-align: center;
+        transform-origin: center;
+        transform: translate(-5px, 0) rotate(0);
+        animation: 1s linear infinite cus-select__spinner;
+
+        svg {
+            vertical-align: top;
+
+            path {
+                fill: var(--cus-sel-loader-color);
+            }
+        }
+    }
+
+    @keyframes cus-select__spinner {
+        to {
+            transform: translate(-5px, 0) rotate(-360deg);
+        }
+    }
 
+ 
+    /*------ Options ------*/
     .custom-select__options-contentlist {
         overflow: hidden;
         overflow-y: auto;

package/lib/esm/Select/index.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useState, useRef, KeyboardEvent, forwardRef, useImper
 import {
     formatIndentVal,
     unique,
-    stripHTML,
     removeItemOnce,
     optionsCustomSelectFlat,
     isObject
@@ -46,10 +45,12 @@ import {
     disableBodyScroll, 
     enableBodyScroll,
 } from 'funda-utils/dist/cjs/bodyScrollLock';
+import {
+    stripTagsAndContent
+} from 'funda-utils/dist/cjs/format-string';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
-
 export type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3: any) => void;
 
 export interface MultiSelectDataConfig {
@@ -120,6 +121,7 @@ export type SelectProps = {
     placeholder?: string;
     options?: OptionConfig[] | string;
     lockBodyScroll?: boolean;
+    loader?: React.ReactNode;
     hierarchical?: boolean;
     indentation?: string;
     doubleIndent?: boolean;
@@ -186,6 +188,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         spellCheck,
         options,
         cleanTrigger,
+        loader,
         lockBodyScroll,
         hierarchical,
         indentation,
@@ -217,6 +220,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     } = props;
 
 
+    const QUERY_STRING_PLACEHOLDER = '------';  // Invalid parameters for the first automatic request
     const DEPTH = depth || 1055;  // the default value same as bootstrap
     const MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;  // Manual requests
     const LIVE_SEARCH_DISABLED = !MANUAL_REQ && typeof window !== 'undefined' && typeof (window as any)['funda-ui__Select-disable-livesearch'] !== 'undefined' ? true : false; // Globally disable real-time search functionality (only valid for non-dynamic requests)
@@ -240,7 +244,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     const listRef = useRef<any>(null);
     const listContentRef = useRef<any>(null);
     const optionsRes = options ? (isJSON(options) ? JSON.parse(options as string) : options) : [];
-    const LIST_CONTAINER_MAX_HEIGHT = 350;
+    const LIST_CONTAINER_MAX_HEIGHT = 300;
 
     const keyboardSelectedItem = useRef<any>(null);
 
@@ -252,12 +256,20 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     const [orginalData, setOrginalData] = useState<OptionConfig[]>(staticOptionsData);
     const [optionsData, setOptionsData] = useState<OptionConfig[]>(staticOptionsData);
     const [hasErr, setHasErr] = useState<boolean>(false);
+
+    // Set the final result
     const [controlLabel, setControlLabel] = useState<string | undefined>('');
     const [controlValue, setControlValue] = useState<string | undefined>('');
+
+    //
     const [controlTempValue, setControlTempValue] = useState<string | null>(null);
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const [incomingData, setIncomingData] = useState<string | null | undefined>(null);
     const [firstRequestExecuted, setFirstRequestExecuted] = useState<boolean>(false);
+    const [handleFirstFetchCompleted, setHandleFirstFetchCompleted] = useState<boolean>(false);
+
+    // filter status
+    const [filterItemsHasNoMatchData, setFilterItemsHasNoMatchData] = useState<boolean>(false);
     
 
     // blinking cursor
@@ -458,6 +470,11 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
         if (fetchUpdate) {
 
+            // update filter status
+            setFilterItemsHasNoMatchData(false); 
+
+
+            // Make a request
             handleFetch(val).then((response: any) => {
                 _orginalData = response;
                 const _filterRes = update(_orginalData);
@@ -827,6 +844,8 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
     function adjustMultiControlContainerHeight(scrollbarInit: boolean = true) {
+        if (rootMultiRef.current === null) return;
+        
         setTimeout(() => {
 
 
@@ -904,7 +923,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
         // You need to wait for the height of the pop-up container to be set
         // Detect position、
-        if (window.innerHeight - _triggerBox.top > _contentOldHeight) {
+        if (window.innerHeight - _triggerBox.top > 100) {
             targetPos = 'bottom';
         } else {
             targetPos = 'top';
@@ -973,9 +992,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         }
 
 
-
-
-
         // STEP 4:
         //-----------
         // Adjust position
@@ -1067,9 +1083,9 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
             // nomatch & button of select all 
-            const _nodataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
+            const _noDataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
             const _btnSelectAll = listContentRef.current.querySelector('.custom-select-multi__control-option-item--select-all');
-            _nodataDiv.classList.add('hide');
+            _noDataDiv.classList.add('hide');
             if (_btnSelectAll !== null) _btnSelectAll.classList.remove('hide');
 
 
@@ -1083,6 +1099,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         if (listContentRef.current === null) return;
 
 
+        let invisibleItems: number = 0;
         [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item')).forEach((node: any) => {
 
             // Avoid fatal errors causing page crashes
@@ -1104,22 +1121,29 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
         });
 
+        // Determine if all options are hidden
+        const allHidden = [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item'))
+            .every((node: any) => node.classList.contains('hide'));
 
+   
         // no data label
         popwinNoMatchInit();
 
 
         // display all filtered items
         const _btnSelectAll = listContentRef.current.querySelector('.custom-select-multi__control-option-item--select-all');
-        const _nodataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
+        const _noDataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
         if ((val === null ? '' : val).replace(/\s/g, "") === '') {
             [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item')).forEach((node: any) => {
                 node.classList.remove('hide');
             });
-            _nodataDiv.classList.add('hide');
+            _noDataDiv.classList.add('hide');
             if (_btnSelectAll !== null) _btnSelectAll.classList.remove('hide');
         }
 
+        // filter status
+        setFilterItemsHasNoMatchData(allHidden);
+
 
         // Appropriate list container height
         popwinContainerHeightAdjust();
@@ -1154,7 +1178,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         if (listContentRef.current === null) return;
 
         const _btnSelectAll = listContentRef.current.querySelector('.custom-select-multi__control-option-item--select-all');
-        const _nodataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
+        const _noDataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
         const emptyFieldsCheck = [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item')).every((node: any) => {
             if (!node.classList.contains('hide')) {
                 return false;
@@ -1163,10 +1187,10 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         });
 
         if (emptyFieldsCheck) {
-            _nodataDiv.classList.remove('hide');
+            _noDataDiv.classList.remove('hide');
             if (_btnSelectAll !== null) _btnSelectAll.classList.add('hide');
         } else {
-            _nodataDiv.classList.add('hide');
+            _noDataDiv.classList.add('hide');
             if (_btnSelectAll !== null) _btnSelectAll.classList.remove('hide');
         }
 
@@ -1203,6 +1227,9 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         // update temporary value
         setControlTempValue(null);
 
+        // update filter status
+        setFilterItemsHasNoMatchData(false);
+
 
         // Unlocks the page
         if (LOCK_BODY_SCROLL) enableBodyScroll(document.querySelector('body'));
@@ -1221,8 +1248,14 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             handleFirstFetch(curValue).then((response: any) => {
                 if (response.length > 0) {
                     // nomatch
-                    const _nodataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
-                    _nodataDiv.classList.add('hide');
+                    const _noDataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
+                    _noDataDiv.classList.add('hide');
+
+                    // After the data is loaded, reinitialize the pop-up window position and height
+                    setTimeout(() => {
+                        popwinPosInit();
+                    }, 0);
+
                 }
             });
 
@@ -1748,6 +1781,9 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         // update temporary value
         setControlTempValue(null);
 
+        // update filter status
+        setFilterItemsHasNoMatchData(false); 
+
     }
 
 
@@ -1833,9 +1869,12 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
     async function handleFirstFetch(inputVal: any = null) {
         const _oparams: any[] = fetchFuncMethodParams || [];
-        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (MANUAL_REQ ? '------' : ''));
+        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (MANUAL_REQ ? QUERY_STRING_PLACEHOLDER : ''));
         const res = await fetchData((_params).join(','), finalRes(inputVal), inputVal);
 
+        // Set an identifier indicating that the first request has been completed
+        if (!handleFirstFetchCompleted) setHandleFirstFetchCompleted(true);
+
         return res;
     }
 
@@ -2077,8 +2116,16 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             handleFirstFetch(value);
         }
 
+        // Forced assignment does not depend on "fetch" or "firstRequestAutoExe"
+        // Don't use "value.value && value.label" directly, if it is empty, it will be treated as FALSE
+        if ( value && typeof value === 'object' ) {
+            if (typeof value.value !== 'undefined' && value.value !== null) setControlValue(value.value as string);
+            if (typeof value.label !== 'undefined' && value.label !== null) setControlLabel(formatIndentVal(value.label, INDENT_LAST_PLACEHOLDER));
+        }
 
 
+        //
+        //--------------
         return () => {
             if (LOCK_BODY_SCROLL) clearAllBodyScrollLocks();
         }
@@ -2122,6 +2169,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     }, [orginalData]); // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
 
 
+
     return (
         <>
 
@@ -2182,7 +2230,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                             disabled={disabled || null}
                             required={required || null}
                             readOnly={INPUT_READONLY}
-                            value={controlTempValue || controlTempValue === '' ? controlTempValue : (MULTI_SEL_VALID ? (VALUE_BY_BRACKETS ? convertArrToValByBrackets(formatIndentVal(controlArr.labels, INDENT_LAST_PLACEHOLDER).map((v: any) => stripHTML(v))) : formatIndentVal(controlArr.labels, INDENT_LAST_PLACEHOLDER).map((v: any) => stripHTML(v)).join(',')) : stripHTML(controlLabel as never))}  // do not use `defaultValue`
+                            value={controlTempValue || controlTempValue === '' ? controlTempValue : (MULTI_SEL_VALID ? (VALUE_BY_BRACKETS ? convertArrToValByBrackets(formatIndentVal(controlArr.labels, INDENT_LAST_PLACEHOLDER).map((v: any) => stripTagsAndContent(v))) : formatIndentVal(controlArr.labels, INDENT_LAST_PLACEHOLDER).map((v: any) => stripTagsAndContent(v)).join(',')) : stripTagsAndContent(controlLabel as never))}  // do not use `defaultValue`
       
                             style={{ 
                                 cursor: 'pointer', 
@@ -2261,7 +2309,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                                 'animated': generateInputFocusStr() === BLINKING_CURSOR_STR
                             }
                         )}>
-                            {controlTempValue || controlTempValue === '' ? (controlTempValue.length === 0 ? <span className={`${!hideBlinkingCursor() ? 'control-placeholder' : ''}`}>{generateInputFocusStr()}</span> : <span>{controlTempValue}</span>) : (stripHTML(controlLabel as never).length === 0 ? <span className={`${!hideBlinkingCursor() ? 'control-placeholder' : ''}`}>{generateInputFocusStr()}</span> : <span>{stripHTML(controlLabel as never)}</span>)}
+                            {controlTempValue || controlTempValue === '' ? (controlTempValue.length === 0 ? <span className={`${!hideBlinkingCursor() ? 'control-placeholder' : ''}`}>{generateInputFocusStr()}</span> : <span>{controlTempValue}</span>) : (stripTagsAndContent(controlLabel as never).length === 0 ? <span className={`${!hideBlinkingCursor() ? 'control-placeholder' : ''}`}>{generateInputFocusStr()}</span> : <span>{stripTagsAndContent(controlLabel as never)}</span>)}
                         </span>
 
                     </div>
@@ -2458,9 +2506,9 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                                                 key={'selected-item-' + index}
                                                 data-value={controlArr.values[index]}
                                                 data-label-full={item}
-                                                data-label-text={formatIndentVal(stripHTML(item), INDENT_LAST_PLACEHOLDER)}
+                                                data-label-text={formatIndentVal(stripTagsAndContent(item), INDENT_LAST_PLACEHOLDER)}
                                             >
-                                                {formatIndentVal(stripHTML(item), INDENT_LAST_PLACEHOLDER)}
+                                                {formatIndentVal(stripTagsAndContent(item), INDENT_LAST_PLACEHOLDER)}
 
                                                 <a 
                                                     href="#" 
@@ -2656,9 +2704,18 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                                     {/* /CLEAN BUTTON (Only Single selection) */}
 
 
-                                    {/* NO MATCH */}
-                                    <button tabIndex={-1} type="button" className="list-group-item list-group-item-action no-match border-0 custom-select-multi__control-option-item--nomatch hide" disabled>{fetchNoneInfo || 'No match yet'}</button>
-                                    {/* /NO MATCH */}
+                                    {/* NO MATCH & LOADER */}
+                                    <button tabIndex={-1} type="button" className="list-group-item list-group-item-action no-match border-0 custom-select-multi__control-option-item--nomatch hide" disabled>
+                                        {
+                                            // (1) Handling async data with the click event
+                                            (!FIRST_REQUEST_AUTO && !handleFirstFetchCompleted) ||
+
+                                            // (2) Every time the input changes or the search button is clicked, a data request will be triggered
+                                            (fetchUpdate && !filterItemsHasNoMatchData && controlTempValue !== '')
+                                        ? <><div className="cus-select-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></> : <>{fetchNoneInfo || 'No match yet'}</>}
+                                    </button>
+                                    {/* /NO MATCH & LOADER */}
+
 
 
                                     {/* OPTIONS LIST */}

package/lib/esm/Select/utils/func.ts

@@ -35,16 +35,6 @@ export function unique(arr: any[]) {
 }
 
 
-/**
- * Remove html tag content
- * @param {string | number} str 
- * @returns {string}
- */
-export function stripHTML(str: string | number) {
-    return String(str).replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
-}
-
-
 /**
  * Remove a specific item from an array
  * @param {array} arr 

package/lib/esm/Switch/index.tsx

@@ -52,7 +52,7 @@ const Switch = forwardRef((props: SwitchProps, externalRef: any) => {
     const uniqueID = useComId();
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
-    const [val, setVal] = useState<any>(null || false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
+    const [val, setVal] = useState<boolean>(false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
 
     function handleFocus(event: any) {
         rootRef.current?.classList.add('focus');
@@ -93,7 +93,9 @@ const Switch = forwardRef((props: SwitchProps, externalRef: any) => {
 
 
     useEffect(() => {
-        setVal(checked);
+        if (typeof checked === 'boolean') {
+            setVal(checked);
+        }
     }, [checked]);
 
 

package/lib/esm/Utils/hooks/useIsMobile.tsx

@@ -23,23 +23,20 @@ const App = () => {
  */
 import { useEffect, useState } from 'react';
 
-
-const useIsMobile = (breakpoint = 600) => {
-    const [isMobile, setIsMobile] = useState(false);
-    const [isMounted, setIsMounted] = useState(false);
-    
+const useIsMobile = (breakpoint: number = 600): boolean => {
+    const [isMobile, setIsMobile] = useState<boolean>(false);
+    const [isMounted, setIsMounted] = useState<boolean>(false);
 
     useEffect(() => {
         // Set the mounted state to true after the component has mounted
         setIsMounted(true);
 
         const handleResize = () => {
-            if (window) {
-
+            if (typeof window !== 'undefined') {
 
-                const detectDeviceType = () => {
+                const detectDeviceType = (): 'mobile' | 'tablet' | 'desktop' => {
                     // 1. First check if window and navigator are available (SSR compatibility)
-                    if (typeof window === 'undefined' || !navigator) {
+                    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
                         return 'desktop'; // Default to desktop
                     }
                 
@@ -47,10 +44,10 @@ const useIsMobile = (breakpoint = 600) => {
                     const ua = navigator.userAgent.toLowerCase();
                     
                     // 3. Get platform info
-                    const platform = navigator.platform.toLowerCase();
+                    const platform = navigator.platform ? navigator.platform.toLowerCase() : '';
                     
                     // 4. Check screen characteristics using window.matchMedia
-                    const isTouch = ('ontouchstart' in window) || navigator.maxTouchPoints > 0;
+                    const isTouch = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
                                    
                     const isPortrait = window.matchMedia('(orientation: portrait)').matches;
                     const isLandscape = window.matchMedia('(orientation: landscape)').matches;
@@ -139,4 +136,4 @@ const useIsMobile = (breakpoint = 600) => {
     return isMounted ? isMobile : false;
 };
 
-export default useIsMobile;
+export default useIsMobile;