funda-ui 4.7.275 → 4.7.335

package/LiveSearch/index.d.ts

@@ -18,7 +18,6 @@ export declare type LiveSearchProps = {
     exceededSidePosOffset?: number;
     appearance?: string;
     isSearchInput?: boolean;
-    allowSpacingRetrive?: boolean;
     loader?: React.ReactNode;
     value?: string;
     label?: React.ReactNode | string;

package/LiveSearch/index.js

@@ -2802,7 +2802,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(188);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_9__);
-var _excluded = ["contentRef", "popupRef", "wrapperClassName", "controlClassName", "controlExClassName", "optionsExClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "exceededSidePosOffset", "appearance", "isSearchInput", "allowSpacingRetrive", "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", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "fetchCallback", "onClick", "onFetch", "onChange", "onKeyboardInput", "onBlur", "onPressEnter"];
+var _excluded = ["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", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "fetchCallback", "onClick", "onFetch", "onChange", "onKeyboardInput", "onBlur", "onPressEnter"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -2842,7 +2842,6 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     exceededSidePosOffset = props.exceededSidePosOffset,
     appearance = props.appearance,
     isSearchInput = props.isSearchInput,
-    allowSpacingRetrive = props.allowSpacingRetrive,
     loader = props.loader,
     readOnly = props.readOnly,
     disabled = props.disabled,
@@ -3002,6 +3001,11 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     }
   }, [isOpen, rootRef, listRef]);
 
+  // Only single symbols such as , #, and @ are allowed, and , a, a, , etc. are not allowed.
+  var isSingleSpecialChar = function isSingleSpecialChar(str) {
+    return typeof str === 'string' && /^[^\w\s]$/.test(str);
+  };
+
   // Add function to the element that should be used as the scrollable area.
   var _useWindowScroll = funda_utils_dist_cjs_useWindowScroll__WEBPACK_IMPORTED_MODULE_5___default()({
       performance: ['debounce', 500],
@@ -3173,12 +3177,29 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
                 // Avoid fatal errors causing page crashes
                 var _queryString = typeof item.queryString !== 'undefined' && item.queryString !== null ? item.queryString : '';
                 var _val = typeof val !== 'undefined' && val !== null ? val : '';
-                if (emptyValShowAll && val === '') {
+
+                // STEP 1
+                //========
+                if (emptyValShowAll && _val === '') {
                   return true;
                 }
-                if (allowSpacingRetrive && val == ' ') {
+
+                // 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(function (l) {
                   return l.charAt(0) === _val.toLowerCase();
                 }) || _queryString.split(',').some(function (l) {

package/Select/index.css

@@ -16,6 +16,7 @@
   --cus-sel-searchbtn-hover-fill: #333;
   --cus-sel-removebtn-fill: #000;
   --cus-sel-removebtn-hover-fill: #f00;
+  --cus-sel-selected-color:#b1d0ff;
   position: relative; /* Required */
   /*------ Placeholder for input ------*/
   /*------ Arrow ------*/
@@ -85,11 +86,15 @@
   display: inline-block;
   color: var(--cus-sel-placeholder-color);
   width: 100%;
+  /* Select all highlights (for "Single selection") */
   /* Text preview */
 }
 .custom-select__wrapper .custom-select-multi__control-blinking-cursor.animated {
   animation: 1s mf-sel-blink step-end infinite;
 }
+.custom-select__wrapper .custom-select-multi__control-blinking-cursor.selected > span {
+  background-color: var(--cus-sel-selected-color);
+}
 .custom-select__wrapper .custom-select-multi__control-blinking-cursor.control-placeholder {
   color: var(--cus-sel-input-placeholder-color);
 }

package/Select/index.js

@@ -3771,6 +3771,12 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     setBlinkingPosStart = _useState24[1];
   var blinkingPosFauxRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var blinkingCursorPosDivRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+
+  // Select All status (for "Single selection")
+  var _useState25 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    userInputboxIsAllSelected = _useState26[0],
+    setUserInputboxIsAllSelected = _useState26[1];
   var selectedSign = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
   var MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
   var MULTI_SEL_ENTIRE_AREA_TRIGGER = typeof multiSelectEntireAreaTrigger === 'undefined' ? true : multiSelectEntireAreaTrigger;
@@ -3781,16 +3787,21 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     allItemsLabel: 'All Content ({num})',
     noneLabel: 'No items selected'
   };
-  var _useState25 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
+  var _useState27 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
       labels: [],
       values: []
     }),
-    _useState26 = _slicedToArray(_useState25, 2),
-    controlArr = _useState26[0],
-    setControlArr = _useState26[1];
-  function chkValueExist(v) {
+    _useState28 = _slicedToArray(_useState27, 2),
+    controlArr = _useState28[0],
+    setControlArr = _useState28[1];
+
+  // Only single symbols such as , #, and @ are allowed, and , a, a, , etc. are not allowed.
+  var isSingleSpecialChar = function isSingleSpecialChar(str) {
+    return typeof str === 'string' && /^[^\w\s]$/.test(str);
+  };
+  var chkValueExist = function chkValueExist(v) {
     return typeof v !== 'undefined' && v !== '';
-  }
+  };
   var listContainerHeightLimit = function listContainerHeightLimit(num) {
     var res = num;
     if (res > LIST_CONTAINER_MAX_HEIGHT) res = LIST_CONTAINER_MAX_HEIGHT;
@@ -3835,19 +3846,22 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(contentRef, function () {
     return {
       active: function active() {
+        var _selectInputRef$curre;
         handleShowList();
-        selectInputRef.current.select();
+        (_selectInputRef$curre = selectInputRef.current) === null || _selectInputRef$curre === void 0 ? void 0 : _selectInputRef$curre.select();
       },
       focus: function focus() {
-        selectInputRef.current.select();
+        var _selectInputRef$curre2;
+        (_selectInputRef$curre2 = selectInputRef.current) === null || _selectInputRef$curre2 === void 0 ? void 0 : _selectInputRef$curre2.select();
       },
       clear: function clear(cb) {
+        var _selectInputRef$curre3;
         if (MULTI_SEL_VALID) {
           updateOptionCheckboxes('remove');
         } else {
           handleClearValue();
         }
-        selectInputRef.current.blur();
+        (_selectInputRef$curre3 = selectInputRef.current) === null || _selectInputRef$curre3 === void 0 ? void 0 : _selectInputRef$curre3.blur();
         cb === null || cb === void 0 ? void 0 : cb();
       },
       /*
@@ -3870,7 +3884,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         cb === null || cb === void 0 ? void 0 : cb();
       }
     };
-  }, [contentRef]);
+  }, [contentRef, selectInputRef]);
 
   // click outside
   useClickOutside_default()({
@@ -3929,35 +3943,12 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
   //performance
   var handleChangeFetchSafe = useDebounce_default()(function (val) {
-    var _orginalData = [];
-    var update = function update(inputData) {
-      var filterRes = function filterRes() {
-        return inputData.filter(function (item) {
-          // Avoid fatal errors causing page crashes
-          var _queryString = typeof item.queryString !== 'undefined' && item.queryString !== null ? item.queryString : '';
-          var _val = typeof val !== 'undefined' && val !== null ? val : '';
-          if ((_queryString.split(',').some(function (l) {
-            return l.charAt(0) === _val.toLowerCase();
-          }) || _queryString.split(',').some(function (l) {
-            return l.replace(/ /g, '').indexOf(_val.toLowerCase()) >= 0;
-          }) || item.label.toLowerCase().indexOf(_val.toLowerCase()) >= 0) && _val != '') {
-            return true;
-          } else {
-            return false;
-          }
-        });
-      };
-      return filterRes();
-    };
     if (fetchUpdate) {
       // update filter status
       setFilterItemsHasNoMatchData(false);
 
       // Make a request
       handleFetch(val).then(function (response) {
-        _orginalData = response;
-        var _filterRes = update(_orginalData);
-
         // pop win initalization
         setTimeout(function () {
           popwinPosInit();
@@ -3965,9 +3956,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         }, 0);
       });
     } else {
-      _orginalData = orginalData;
-      var _filterRes = update(_orginalData);
-
       // pop win initalization
       setTimeout(function () {
         popwinPosInit();
@@ -3990,7 +3978,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         _currentData,
         _defaultValues,
         _defaultLabels,
-        _filterRes2,
+        _filterRes,
         _filterResQueryValue,
         _filterResQueryLabel,
         _currentData2,
@@ -4132,19 +4120,19 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
             // STEP 3: ===========
             // If the default value is label, match value
-            _filterRes2 = [];
+            _filterRes = [];
             _filterResQueryValue = staticOptionsData.filter(function (item) {
               return item.value == defaultValue;
             });
             _filterResQueryLabel = staticOptionsData.filter(function (item) {
               return item.label == defaultValue;
             });
-            _filterRes2 = _filterResQueryValue;
-            if (_filterResQueryValue.length === 0) _filterRes2 = _filterResQueryLabel;
+            _filterRes = _filterResQueryValue;
+            if (_filterResQueryValue.length === 0) _filterRes = _filterResQueryLabel;
 
             // if the default value is Object
-            if (isObject(inputDefault) && _filterRes2.length === 0) {
-              _filterRes2 = [inputDefault];
+            if (isObject(inputDefault) && _filterRes.length === 0) {
+              _filterRes = [inputDefault];
             }
 
             // STEP 4: ===========
@@ -4156,9 +4144,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
               setControlValue('');
               setControlLabel('');
             } else {
-              if (_filterRes2.length > 0) {
-                setControlValue(_filterRes2[0].value);
-                setControlLabel(formatIndentVal(_filterRes2[0].label, INDENT_LAST_PLACEHOLDER));
+              if (_filterRes.length > 0) {
+                setControlValue(_filterRes[0].value);
+                setControlLabel(formatIndentVal(_filterRes[0].label, INDENT_LAST_PLACEHOLDER));
               }
             }
 
@@ -4426,6 +4414,25 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       // Avoid fatal errors causing page crashes
       var _queryString = typeof node.dataset.querystring !== 'undefined' && node.dataset.querystring !== null ? node.dataset.querystring : '';
       var _val = typeof val !== 'undefined' && val !== null ? val : '';
+
+      // STEP 1
+      //========
+      // @@@ This code is triggered only if a custom request is used to update "options" @@@
+      // If the condition is true, skip the loop and move on to the next node.
+      if (fetchUpdate && _val == ' ') {
+        return;
+      }
+
+      // STEP 2
+      //========
+      // @@@ This code is triggered only if a custom request is used to update "options" @@@
+      // If the condition is true, skip the loop and move on to the next node.
+      if (fetchUpdate && _val != '' && isSingleSpecialChar(_val)) {
+        return;
+      }
+
+      // STEP 3
+      //========
       if ((_queryString.split(',').some(function (l) {
         return l.charAt(0) === _val.toLowerCase();
       }) || _queryString.split(',').some(function (l) {
@@ -4523,6 +4530,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     // update filter status
     setFilterItemsHasNoMatchData(false);
 
+    // reset Select All status (for "Single selection")
+    setUserInputboxIsAllSelected(false);
+
     // Unlocks the page
     if (LOCK_BODY_SCROLL) (0,bodyScrollLock.enableBodyScroll)(document.querySelector('body'));
   }
@@ -4621,6 +4631,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         $el,
         _selected,
         _selectedVal,
+        _selectInputRef$curre4,
         _curItem$callback,
         _value2,
         _label2,
@@ -4629,6 +4640,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         _$el,
         _selected2,
         _selectedVal2,
+        _selectInputRef$curre5,
         _args3 = arguments;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
@@ -4769,7 +4781,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             return onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, !MULTI_SEL_VALID ? curItem : multipleSelectionCallback(currentControlValueArr, currentControlLabelArr));
           case 25:
             //
-            selectInputRef.current.blur();
+            (_selectInputRef$curre4 = selectInputRef.current) === null || _selectInputRef$curre4 === void 0 ? void 0 : _selectInputRef$curre4.blur();
           case 26:
             _context3.next = 42;
             break;
@@ -4877,7 +4889,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             return onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, !MULTI_SEL_VALID ? curItem : multipleSelectionCallback(_currentControlValueArr, _currentControlLabelArr));
           case 41:
             //
-            selectInputRef.current.blur();
+            (_selectInputRef$curre5 = selectInputRef.current) === null || _selectInputRef$curre5 === void 0 ? void 0 : _selectInputRef$curre5.blur();
           case 42:
             // Fixed an out-of-focus issue
             fixFocusStatus();
@@ -5013,7 +5025,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   }
   function _handleMultiControlItemRemove() {
     _handleMultiControlItemRemove = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(event) {
-      var valueToRemove, getCurrentIndex, currentControlValueArr, currentControlLabelArr, _value, _label;
+      var valueToRemove, getCurrentIndex, currentControlValueArr, currentControlLabelArr, _value, _label, _selectInputRef$curre6;
       return _regeneratorRuntime().wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
@@ -5050,7 +5062,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             return onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, multipleSelectionCallback(currentControlValueArr, currentControlLabelArr));
           case 15:
             //
-            selectInputRef.current.blur();
+            (_selectInputRef$curre6 = selectInputRef.current) === null || _selectInputRef$curre6 === void 0 ? void 0 : _selectInputRef$curre6.blur();
           case 16:
           case "end":
             return _context5.stop();
@@ -5239,7 +5251,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   }
   function _handleKeyPressed() {
     _handleKeyPressed = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(event) {
-      var key, res, currentIndex, currentData, currentControlValueArr, currentControlLabelArr, htmlOptions;
+      var key, res, currentIndex, currentData, currentControlValueArr, currentControlLabelArr, htmlOptions, _selectInputRef$curre7;
       return _regeneratorRuntime().wrap(function _callee8$(_context8) {
         while (1) switch (_context8.prev = _context8.next) {
           case 0:
@@ -5307,7 +5319,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             return onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, !MULTI_SEL_VALID ? currentData : multipleSelectionCallback(currentControlValueArr, currentControlLabelArr));
           case 25:
             //
-            selectInputRef.current.blur();
+            (_selectInputRef$curre7 = selectInputRef.current) === null || _selectInputRef$curre7 === void 0 ? void 0 : _selectInputRef$curre7.blur();
           case 26:
             if (!(key === 'ArrowUp')) {
               _context8.next = 30;
@@ -5498,6 +5510,15 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     };
   }, [orginalData]); // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
 
+  // Select all detection functions in the input box (for "Single selection")
+  function checkUserInputboxIsAllSelected(e) {
+    var input = e.target;
+    if (input && typeof input.selectionStart === 'number' && typeof input.selectionEnd === 'number') {
+      setUserInputboxIsAllSelected(input.selectionStart === 0 && input.selectionEnd === input.value.length && input.value.length > 0);
+    } else {
+      setUserInputboxIsAllSelected(false);
+    }
+  }
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, label ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "custom-select__label"
   }, typeof label === 'string' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("label", {
@@ -5612,7 +5633,18 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     autoComplete: typeof autoComplete === 'undefined' ? 'off' : autoComplete,
     autoCapitalize: typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize,
     spellCheck: typeof spellCheck === 'undefined' ? false : spellCheck
-  }, attributes)))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
+  }, attributes, {
+    // Select all detection (for "Single selection")
+    onSelect: function onSelect(e) {
+      checkUserInputboxIsAllSelected(e);
+    },
+    onKeyUp: function onKeyUp(e) {
+      checkUserInputboxIsAllSelected(e);
+    },
+    onMouseUp: function onMouseUp(e) {
+      checkUserInputboxIsAllSelected(e);
+    }
+  })))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
     ref: valueInputRef,
     tabIndex: -1,
     type: "hidden",
@@ -5642,7 +5674,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     ref: blinkingCursorPosDivRef,
     className: (0,cls.combinedCls)('custom-select-multi__control-blinking-cursor', {
-      'animated': generateInputFocusStr() === BLINKING_CURSOR_STR
+      'animated': generateInputFocusStr() === BLINKING_CURSOR_STR,
+      // Select all highlights (for "Single selection")
+      'selected': userInputboxIsAllSelected
     })
   }, controlTempValue || controlTempValue === '' ? controlTempValue.length === 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "".concat(!hideBlinkingCursor() ? 'control-placeholder' : '')

package/lib/cjs/LiveSearch/index.d.ts

@@ -18,7 +18,6 @@ export declare type LiveSearchProps = {
     exceededSidePosOffset?: number;
     appearance?: string;
     isSearchInput?: boolean;
-    allowSpacingRetrive?: boolean;
     loader?: React.ReactNode;
     value?: string;
     label?: React.ReactNode | string;

package/lib/cjs/LiveSearch/index.js

@@ -2802,7 +2802,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(188);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_9__);
-var _excluded = ["contentRef", "popupRef", "wrapperClassName", "controlClassName", "controlExClassName", "optionsExClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "exceededSidePosOffset", "appearance", "isSearchInput", "allowSpacingRetrive", "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", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "fetchCallback", "onClick", "onFetch", "onChange", "onKeyboardInput", "onBlur", "onPressEnter"];
+var _excluded = ["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", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "fetchCallback", "onClick", "onFetch", "onChange", "onKeyboardInput", "onBlur", "onPressEnter"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -2842,7 +2842,6 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     exceededSidePosOffset = props.exceededSidePosOffset,
     appearance = props.appearance,
     isSearchInput = props.isSearchInput,
-    allowSpacingRetrive = props.allowSpacingRetrive,
     loader = props.loader,
     readOnly = props.readOnly,
     disabled = props.disabled,
@@ -3002,6 +3001,11 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     }
   }, [isOpen, rootRef, listRef]);
 
+  // Only single symbols such as , #, and @ are allowed, and , a, a, , etc. are not allowed.
+  var isSingleSpecialChar = function isSingleSpecialChar(str) {
+    return typeof str === 'string' && /^[^\w\s]$/.test(str);
+  };
+
   // Add function to the element that should be used as the scrollable area.
   var _useWindowScroll = funda_utils_dist_cjs_useWindowScroll__WEBPACK_IMPORTED_MODULE_5___default()({
       performance: ['debounce', 500],
@@ -3173,12 +3177,29 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
                 // Avoid fatal errors causing page crashes
                 var _queryString = typeof item.queryString !== 'undefined' && item.queryString !== null ? item.queryString : '';
                 var _val = typeof val !== 'undefined' && val !== null ? val : '';
-                if (emptyValShowAll && val === '') {
+
+                // STEP 1
+                //========
+                if (emptyValShowAll && _val === '') {
                   return true;
                 }
-                if (allowSpacingRetrive && val == ' ') {
+
+                // 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(function (l) {
                   return l.charAt(0) === _val.toLowerCase();
                 }) || _queryString.split(',').some(function (l) {

package/lib/cjs/Select/index.js

@@ -3771,6 +3771,12 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     setBlinkingPosStart = _useState24[1];
   var blinkingPosFauxRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var blinkingCursorPosDivRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+
+  // Select All status (for "Single selection")
+  var _useState25 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    userInputboxIsAllSelected = _useState26[0],
+    setUserInputboxIsAllSelected = _useState26[1];
   var selectedSign = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
   var MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
   var MULTI_SEL_ENTIRE_AREA_TRIGGER = typeof multiSelectEntireAreaTrigger === 'undefined' ? true : multiSelectEntireAreaTrigger;
@@ -3781,16 +3787,21 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     allItemsLabel: 'All Content ({num})',
     noneLabel: 'No items selected'
   };
-  var _useState25 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
+  var _useState27 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
       labels: [],
       values: []
     }),
-    _useState26 = _slicedToArray(_useState25, 2),
-    controlArr = _useState26[0],
-    setControlArr = _useState26[1];
-  function chkValueExist(v) {
+    _useState28 = _slicedToArray(_useState27, 2),
+    controlArr = _useState28[0],
+    setControlArr = _useState28[1];
+
+  // Only single symbols such as , #, and @ are allowed, and , a, a, , etc. are not allowed.
+  var isSingleSpecialChar = function isSingleSpecialChar(str) {
+    return typeof str === 'string' && /^[^\w\s]$/.test(str);
+  };
+  var chkValueExist = function chkValueExist(v) {
     return typeof v !== 'undefined' && v !== '';
-  }
+  };
   var listContainerHeightLimit = function listContainerHeightLimit(num) {
     var res = num;
     if (res > LIST_CONTAINER_MAX_HEIGHT) res = LIST_CONTAINER_MAX_HEIGHT;
@@ -3835,19 +3846,22 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(contentRef, function () {
     return {
       active: function active() {
+        var _selectInputRef$curre;
         handleShowList();
-        selectInputRef.current.select();
+        (_selectInputRef$curre = selectInputRef.current) === null || _selectInputRef$curre === void 0 ? void 0 : _selectInputRef$curre.select();
       },
       focus: function focus() {
-        selectInputRef.current.select();
+        var _selectInputRef$curre2;
+        (_selectInputRef$curre2 = selectInputRef.current) === null || _selectInputRef$curre2 === void 0 ? void 0 : _selectInputRef$curre2.select();
       },
       clear: function clear(cb) {
+        var _selectInputRef$curre3;
         if (MULTI_SEL_VALID) {
           updateOptionCheckboxes('remove');
         } else {
           handleClearValue();
         }
-        selectInputRef.current.blur();
+        (_selectInputRef$curre3 = selectInputRef.current) === null || _selectInputRef$curre3 === void 0 ? void 0 : _selectInputRef$curre3.blur();
         cb === null || cb === void 0 ? void 0 : cb();
       },
       /*
@@ -3870,7 +3884,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         cb === null || cb === void 0 ? void 0 : cb();
       }
     };
-  }, [contentRef]);
+  }, [contentRef, selectInputRef]);
 
   // click outside
   useClickOutside_default()({
@@ -3929,35 +3943,12 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
   //performance
   var handleChangeFetchSafe = useDebounce_default()(function (val) {
-    var _orginalData = [];
-    var update = function update(inputData) {
-      var filterRes = function filterRes() {
-        return inputData.filter(function (item) {
-          // Avoid fatal errors causing page crashes
-          var _queryString = typeof item.queryString !== 'undefined' && item.queryString !== null ? item.queryString : '';
-          var _val = typeof val !== 'undefined' && val !== null ? val : '';
-          if ((_queryString.split(',').some(function (l) {
-            return l.charAt(0) === _val.toLowerCase();
-          }) || _queryString.split(',').some(function (l) {
-            return l.replace(/ /g, '').indexOf(_val.toLowerCase()) >= 0;
-          }) || item.label.toLowerCase().indexOf(_val.toLowerCase()) >= 0) && _val != '') {
-            return true;
-          } else {
-            return false;
-          }
-        });
-      };
-      return filterRes();
-    };
     if (fetchUpdate) {
       // update filter status
       setFilterItemsHasNoMatchData(false);
 
       // Make a request
       handleFetch(val).then(function (response) {
-        _orginalData = response;
-        var _filterRes = update(_orginalData);
-
         // pop win initalization
         setTimeout(function () {
           popwinPosInit();
@@ -3965,9 +3956,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         }, 0);
       });
     } else {
-      _orginalData = orginalData;
-      var _filterRes = update(_orginalData);
-
       // pop win initalization
       setTimeout(function () {
         popwinPosInit();
@@ -3990,7 +3978,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         _currentData,
         _defaultValues,
         _defaultLabels,
-        _filterRes2,
+        _filterRes,
         _filterResQueryValue,
         _filterResQueryLabel,
         _currentData2,
@@ -4132,19 +4120,19 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
             // STEP 3: ===========
             // If the default value is label, match value
-            _filterRes2 = [];
+            _filterRes = [];
             _filterResQueryValue = staticOptionsData.filter(function (item) {
               return item.value == defaultValue;
             });
             _filterResQueryLabel = staticOptionsData.filter(function (item) {
               return item.label == defaultValue;
             });
-            _filterRes2 = _filterResQueryValue;
-            if (_filterResQueryValue.length === 0) _filterRes2 = _filterResQueryLabel;
+            _filterRes = _filterResQueryValue;
+            if (_filterResQueryValue.length === 0) _filterRes = _filterResQueryLabel;
 
             // if the default value is Object
-            if (isObject(inputDefault) && _filterRes2.length === 0) {
-              _filterRes2 = [inputDefault];
+            if (isObject(inputDefault) && _filterRes.length === 0) {
+              _filterRes = [inputDefault];
             }
 
             // STEP 4: ===========
@@ -4156,9 +4144,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
               setControlValue('');
               setControlLabel('');
             } else {
-              if (_filterRes2.length > 0) {
-                setControlValue(_filterRes2[0].value);
-                setControlLabel(formatIndentVal(_filterRes2[0].label, INDENT_LAST_PLACEHOLDER));
+              if (_filterRes.length > 0) {
+                setControlValue(_filterRes[0].value);
+                setControlLabel(formatIndentVal(_filterRes[0].label, INDENT_LAST_PLACEHOLDER));
               }
             }
 
@@ -4426,6 +4414,25 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       // Avoid fatal errors causing page crashes
       var _queryString = typeof node.dataset.querystring !== 'undefined' && node.dataset.querystring !== null ? node.dataset.querystring : '';
       var _val = typeof val !== 'undefined' && val !== null ? val : '';
+
+      // STEP 1
+      //========
+      // @@@ This code is triggered only if a custom request is used to update "options" @@@
+      // If the condition is true, skip the loop and move on to the next node.
+      if (fetchUpdate && _val == ' ') {
+        return;
+      }
+
+      // STEP 2
+      //========
+      // @@@ This code is triggered only if a custom request is used to update "options" @@@
+      // If the condition is true, skip the loop and move on to the next node.
+      if (fetchUpdate && _val != '' && isSingleSpecialChar(_val)) {
+        return;
+      }
+
+      // STEP 3
+      //========
       if ((_queryString.split(',').some(function (l) {
         return l.charAt(0) === _val.toLowerCase();
       }) || _queryString.split(',').some(function (l) {
@@ -4523,6 +4530,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     // update filter status
     setFilterItemsHasNoMatchData(false);
 
+    // reset Select All status (for "Single selection")
+    setUserInputboxIsAllSelected(false);
+
     // Unlocks the page
     if (LOCK_BODY_SCROLL) (0,bodyScrollLock.enableBodyScroll)(document.querySelector('body'));
   }
@@ -4621,6 +4631,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         $el,
         _selected,
         _selectedVal,
+        _selectInputRef$curre4,
         _curItem$callback,
         _value2,
         _label2,
@@ -4629,6 +4640,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         _$el,
         _selected2,
         _selectedVal2,
+        _selectInputRef$curre5,
         _args3 = arguments;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
@@ -4769,7 +4781,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             return onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, !MULTI_SEL_VALID ? curItem : multipleSelectionCallback(currentControlValueArr, currentControlLabelArr));
           case 25:
             //
-            selectInputRef.current.blur();
+            (_selectInputRef$curre4 = selectInputRef.current) === null || _selectInputRef$curre4 === void 0 ? void 0 : _selectInputRef$curre4.blur();
           case 26:
             _context3.next = 42;
             break;
@@ -4877,7 +4889,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             return onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, !MULTI_SEL_VALID ? curItem : multipleSelectionCallback(_currentControlValueArr, _currentControlLabelArr));
           case 41:
             //
-            selectInputRef.current.blur();
+            (_selectInputRef$curre5 = selectInputRef.current) === null || _selectInputRef$curre5 === void 0 ? void 0 : _selectInputRef$curre5.blur();
           case 42:
             // Fixed an out-of-focus issue
             fixFocusStatus();
@@ -5013,7 +5025,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   }
   function _handleMultiControlItemRemove() {
     _handleMultiControlItemRemove = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(event) {
-      var valueToRemove, getCurrentIndex, currentControlValueArr, currentControlLabelArr, _value, _label;
+      var valueToRemove, getCurrentIndex, currentControlValueArr, currentControlLabelArr, _value, _label, _selectInputRef$curre6;
       return _regeneratorRuntime().wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
@@ -5050,7 +5062,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             return onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, multipleSelectionCallback(currentControlValueArr, currentControlLabelArr));
           case 15:
             //
-            selectInputRef.current.blur();
+            (_selectInputRef$curre6 = selectInputRef.current) === null || _selectInputRef$curre6 === void 0 ? void 0 : _selectInputRef$curre6.blur();
           case 16:
           case "end":
             return _context5.stop();
@@ -5239,7 +5251,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   }
   function _handleKeyPressed() {
     _handleKeyPressed = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(event) {
-      var key, res, currentIndex, currentData, currentControlValueArr, currentControlLabelArr, htmlOptions;
+      var key, res, currentIndex, currentData, currentControlValueArr, currentControlLabelArr, htmlOptions, _selectInputRef$curre7;
       return _regeneratorRuntime().wrap(function _callee8$(_context8) {
         while (1) switch (_context8.prev = _context8.next) {
           case 0:
@@ -5307,7 +5319,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             return onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, !MULTI_SEL_VALID ? currentData : multipleSelectionCallback(currentControlValueArr, currentControlLabelArr));
           case 25:
             //
-            selectInputRef.current.blur();
+            (_selectInputRef$curre7 = selectInputRef.current) === null || _selectInputRef$curre7 === void 0 ? void 0 : _selectInputRef$curre7.blur();
           case 26:
             if (!(key === 'ArrowUp')) {
               _context8.next = 30;
@@ -5498,6 +5510,15 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     };
   }, [orginalData]); // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
 
+  // Select all detection functions in the input box (for "Single selection")
+  function checkUserInputboxIsAllSelected(e) {
+    var input = e.target;
+    if (input && typeof input.selectionStart === 'number' && typeof input.selectionEnd === 'number') {
+      setUserInputboxIsAllSelected(input.selectionStart === 0 && input.selectionEnd === input.value.length && input.value.length > 0);
+    } else {
+      setUserInputboxIsAllSelected(false);
+    }
+  }
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, label ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "custom-select__label"
   }, typeof label === 'string' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("label", {
@@ -5612,7 +5633,18 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     autoComplete: typeof autoComplete === 'undefined' ? 'off' : autoComplete,
     autoCapitalize: typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize,
     spellCheck: typeof spellCheck === 'undefined' ? false : spellCheck
-  }, attributes)))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
+  }, attributes, {
+    // Select all detection (for "Single selection")
+    onSelect: function onSelect(e) {
+      checkUserInputboxIsAllSelected(e);
+    },
+    onKeyUp: function onKeyUp(e) {
+      checkUserInputboxIsAllSelected(e);
+    },
+    onMouseUp: function onMouseUp(e) {
+      checkUserInputboxIsAllSelected(e);
+    }
+  })))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
     ref: valueInputRef,
     tabIndex: -1,
     type: "hidden",
@@ -5642,7 +5674,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     ref: blinkingCursorPosDivRef,
     className: (0,cls.combinedCls)('custom-select-multi__control-blinking-cursor', {
-      'animated': generateInputFocusStr() === BLINKING_CURSOR_STR
+      'animated': generateInputFocusStr() === BLINKING_CURSOR_STR,
+      // Select all highlights (for "Single selection")
+      'selected': userInputboxIsAllSelected
     })
   }, controlTempValue || controlTempValue === '' ? controlTempValue.length === 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "".concat(!hideBlinkingCursor() ? 'control-placeholder' : '')

package/lib/css/Select/index.css

@@ -16,6 +16,7 @@
   --cus-sel-searchbtn-hover-fill: #333;
   --cus-sel-removebtn-fill: #000;
   --cus-sel-removebtn-hover-fill: #f00;
+  --cus-sel-selected-color:#b1d0ff;
   position: relative; /* Required */
   /*------ Placeholder for input ------*/
   /*------ Arrow ------*/
@@ -85,11 +86,15 @@
   display: inline-block;
   color: var(--cus-sel-placeholder-color);
   width: 100%;
+  /* Select all highlights (for "Single selection") */
   /* Text preview */
 }
 .custom-select__wrapper .custom-select-multi__control-blinking-cursor.animated {
   animation: 1s mf-sel-blink step-end infinite;
 }
+.custom-select__wrapper .custom-select-multi__control-blinking-cursor.selected > span {
+  background-color: var(--cus-sel-selected-color);
+}
 .custom-select__wrapper .custom-select-multi__control-blinking-cursor.control-placeholder {
   color: var(--cus-sel-input-placeholder-color);
 }

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;
@@ -38,7 +39,6 @@ export type LiveSearchProps = {
     exceededSidePosOffset?: number;
     appearance?: string;
     isSearchInput?: boolean;
-    allowSpacingRetrive?: boolean;
     loader?: React.ReactNode;
     value?: string;
     label?: React.ReactNode | string;
@@ -101,7 +101,6 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         exceededSidePosOffset,
         appearance,
         isSearchInput,
-        allowSpacingRetrive,
         loader,
         readOnly,
         disabled,
@@ -253,6 +252,10 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
 
 
 
+    // 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.
@@ -435,6 +438,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
     //
     async function matchData(val: string = '', query: boolean = false, emptyValShowAll: boolean = false) {
 
+
         let res: any[] = [];
         let filterRes = (data: any[]) => {
             return data.filter((item: any) => {
@@ -443,15 +447,31 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
                 const _queryString = typeof item.queryString !== 'undefined' && item.queryString !== null ? item.queryString : '';
                 const _val = typeof val !== 'undefined' && val !== null ? val : '';
 
-         
-                if (emptyValShowAll && val === '') {
+                // STEP 1
+                //========
+                if (emptyValShowAll && _val === '') {
                     return true;
                 }
 
-                if (allowSpacingRetrive && val == ' ') {
+
+                // 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()) ||

package/lib/esm/SearchBar/index.tsx

@@ -3,8 +3,6 @@ import React, { useState, useEffect, useRef, ChangeEvent, MouseEvent, Compositio
 import useComId from 'funda-utils/dist/cjs/useComId';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
-
-
 export type SearchBarProps = {
     wrapperClassName?: string;
     controlClassName?: string;

package/lib/esm/Select/index.scss

@@ -18,6 +18,7 @@
     --cus-sel-searchbtn-hover-fill: #333;
     --cus-sel-removebtn-fill: #000;
     --cus-sel-removebtn-hover-fill: #f00;
+    --cus-sel-selected-color:#b1d0ff;
 
         
     position: relative; /* Required */
@@ -115,6 +116,13 @@
             animation: 1s mf-sel-blink step-end infinite;
         }
 
+
+        /* Select all highlights (for "Single selection") */
+        &.selected > span {
+           background-color: var(--cus-sel-selected-color);
+        }
+  
+
         &.control-placeholder {
             color: var(--cus-sel-input-placeholder-color);
         }

package/lib/esm/Select/index.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState, useRef, KeyboardEvent, forwardRef, useImper
 
 import {
     formatIndentVal,
-    unique,
     removeItemOnce,
     optionsCustomSelectFlat,
     isObject
@@ -19,9 +18,6 @@ import {
 import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
 import useWindowScroll from 'funda-utils/dist/cjs/useWindowScroll';
-import {
-    extractContentsOfBrackets
-} from 'funda-utils/dist/cjs/extract';
 import {
     convertArrToValByBrackets
 } from 'funda-utils/dist/cjs/convert';
@@ -52,7 +48,6 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 
-
 export interface MultiSelectValue {
     items: { label: string; value: string }[];
     labels: string[];
@@ -308,6 +303,9 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     const blinkingPosFauxRef = useRef<any>(null);
     const blinkingCursorPosDivRef = useRef<any>(null);
 
+    // Select All status (for "Single selection")
+    const [userInputboxIsAllSelected, setUserInputboxIsAllSelected] = useState(false);
+
 
 
     const selectedSign = useRef<boolean>(false);
@@ -326,9 +324,17 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         values: []
     });
 
-    function chkValueExist(v: any) {
+
+
+    // 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);
+    };
+
+
+    const chkValueExist = (v: any) => {
         return typeof v !== 'undefined' && v !== '';
-    }
+    };
 
 
     const listContainerHeightLimit = (num: number) => {
@@ -385,11 +391,11 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         () => ({
             active: () => {
                 handleShowList();
-                selectInputRef.current.select();
+                selectInputRef.current?.select();
             },
             
             focus: () => {
-                selectInputRef.current.select();
+                selectInputRef.current?.select();
             },
             clear: (cb?: any) => {
 
@@ -399,7 +405,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                     handleClearValue();
                 }
 
-                selectInputRef.current.blur();
+                selectInputRef.current?.blur();
 
                 cb?.();
             },
@@ -422,7 +428,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                 cb?.();
             }
         }),
-        [contentRef],
+        [contentRef, selectInputRef],
     );
 
 
@@ -475,34 +481,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     //performance
     const handleChangeFetchSafe = useDebounce((val: any) => {
 
-        let _orginalData: OptionConfig[] = [];
-        const update = (inputData: any) => {
-            const filterRes = () => {
-
-                return inputData.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 : '';
-
-                    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;
-                    }
-                });
-            }
-
-            return filterRes();
-        };
-
         if (fetchUpdate) {
 
             // update filter status
@@ -511,9 +489,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
             // Make a request
             handleFetch(val).then((response: any) => {
-                _orginalData = response;
-                const _filterRes = update(_orginalData);
-
+      
                 // pop win initalization
                 setTimeout(() => {
                     popwinPosInit();
@@ -521,9 +497,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                 }, 0);
             });
         } else {
-            _orginalData = orginalData;
-            const _filterRes = update(_orginalData);
-
+   
             // pop win initalization
             setTimeout(() => {
                 popwinPosInit();
@@ -1048,6 +1022,27 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             const _queryString = typeof node.dataset.querystring !== 'undefined' && node.dataset.querystring !== null ? node.dataset.querystring : '';
             const _val = typeof val !== 'undefined' && val !== null ? val : '';
 
+
+            // STEP 1
+            //========
+            // @@@ This code is triggered only if a custom request is used to update "options" @@@
+            // If the condition is true, skip the loop and move on to the next node.
+            if (fetchUpdate && _val == ' ') {
+                return;
+            }
+
+
+            // STEP 2
+            //========
+            // @@@ This code is triggered only if a custom request is used to update "options" @@@
+            // If the condition is true, skip the loop and move on to the next node.
+            if (fetchUpdate && _val != '' && isSingleSpecialChar(_val)) {
+                return;
+            }
+
+
+            // STEP 3
+            //========
             if (
                 (
                     _queryString.split(',').some((l: any) => l.charAt(0) === _val.toLowerCase()) ||
@@ -1173,6 +1168,10 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         setFilterItemsHasNoMatchData(false);
 
 
+        // reset Select All status (for "Single selection")
+        setUserInputboxIsAllSelected(false);
+
+
         // Unlocks the page
         if (LOCK_BODY_SCROLL) enableBodyScroll(document.querySelector('body'));
     }
@@ -1271,7 +1270,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
         if (typeof el === 'undefined') return;
 
-
         const curItem: any = el === null ? (isObject(dataInput) ? dataInput : JSON.parse(dataInput)) : optionsData[Number(el.currentTarget.dataset.index)];
         
 
@@ -1437,7 +1435,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
                 //
-                selectInputRef.current.blur();
+                selectInputRef.current?.blur();
             }
 
 
@@ -1582,7 +1580,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
                 //
-                selectInputRef.current.blur();
+                selectInputRef.current?.blur();
             }
         }
 
@@ -1767,7 +1765,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
             //
-            selectInputRef.current.blur();
+            selectInputRef.current?.blur();
         }
 
     }
@@ -2006,7 +2004,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
                         //
-                        selectInputRef.current.blur();
+                        selectInputRef.current?.blur();
                     }
 
                 }
@@ -2207,6 +2205,16 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     }, [orginalData]); // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
 
 
+    // Select all detection functions in the input box (for "Single selection")
+    function checkUserInputboxIsAllSelected(e: any) {
+        const input = e.target;
+        if (input && typeof input.selectionStart === 'number' && typeof input.selectionEnd === 'number') {
+            setUserInputboxIsAllSelected(input.selectionStart === 0 && input.selectionEnd === input.value.length && input.value.length > 0);
+        } else {
+            setUserInputboxIsAllSelected(false);
+        }
+    }
+
 
     return (
         <>
@@ -2316,6 +2324,11 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                             autoCapitalize={typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize}
                             spellCheck={typeof spellCheck === 'undefined' ? false : spellCheck}
                             {...attributes}
+                   
+                            // Select all detection (for "Single selection")
+                            onSelect={(e) => { checkUserInputboxIsAllSelected(e); }}
+                            onKeyUp={(e) => { checkUserInputboxIsAllSelected(e); }}
+                            onMouseUp={(e) => { checkUserInputboxIsAllSelected(e); }}
                         />
 
                     </div>
@@ -2377,7 +2390,10 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                         <span ref={blinkingCursorPosDivRef} className={combinedCls(
                             'custom-select-multi__control-blinking-cursor',
                             {
-                                'animated': generateInputFocusStr() === BLINKING_CURSOR_STR
+                                'animated': generateInputFocusStr() === BLINKING_CURSOR_STR,
+
+                                // Select all highlights (for "Single selection")
+                                'selected': userInputboxIsAllSelected
                             }
                         )}>
                             {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>)}

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.7.275",
+  "version": "4.7.335",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",