funda-ui 1.1.157 → 1.1.162

package/LiveSearch/index.js

@@ -804,11 +804,12 @@ var LiveSearch = function LiveSearch(props) {
               return data.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();
+                  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 l.replace(/ /g, '').indexOf(_val.toLowerCase()) >= 0;
+                }) || item.label.toLowerCase().indexOf(_val.toLowerCase()) >= 0) && _val != '') {
                   return true;
                 } else {
                   return false;

package/MultiFuncSelect/index.css

@@ -16,6 +16,7 @@
   --mf-sel-removebtn-hover-fill: #f00;
   /*------ Placeholder for input ------*/
   /*------ Arrow ------*/
+  /*------ Clean ------*/
   /*------ Input ------*/
   /*------ Blinking cursor ------*/
   /*------ Single selection ------*/
@@ -29,6 +30,9 @@
 .mf-select__wrapper .arrow svg .arrow-fill-g {
   fill: var(--mf-sel-arrow-fill);
 }
+.mf-select__wrapper .clean svg .clean-fill-g {
+  fill: var(--mf-sel-arrow-fill);
+}
 .mf-select__wrapper [data-select]:focus {
   box-shadow: none;
   border-color: transparent;
@@ -211,7 +215,8 @@
   display: none;
   min-width: var(--mf-sel-listgroup-popwin-min-width);
   z-index: 1055; /* --bs-modal-zindex */
-  /*------ Multiple selection ------*/
+  /*------ Extended buttons of Multiple selection ------*/
+  /*------ Extended buttons of Single selection ------*/
 }
 .mf-select__options-wrapper.active {
   display: block;
@@ -270,3 +275,10 @@
   font-size: 0.75rem;
   padding: 0.1rem 0.5rem;
 }
+.mf-select__options-wrapper .mf-select-multi__control-option-item--clean.hide {
+  display: none !important;
+}
+.mf-select__options-wrapper .mf-select-multi__control-option-item--clean .btn {
+  font-size: 0.75rem;
+  padding: 0.1rem 0.5rem;
+}

package/MultiFuncSelect/index.d.ts

@@ -13,6 +13,7 @@ interface MultiSelectDataConfig {
 interface OptionConfig {
     disabled?: boolean;
     label: any;
+    listItemLabel?: any;
     value: any;
     queryString: string | number;
 }
@@ -22,10 +23,15 @@ interface MultiSelectConfig {
     selectAllLabel?: string;
     data: MultiSelectDataConfig | null;
 }
+interface CleanTriggerConfig {
+    valid: boolean;
+    cleanValueLabel?: string;
+}
 declare type MultiFuncSelectProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     multiSelect?: MultiSelectConfig;
+    cleanTrigger?: CleanTriggerConfig;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;

package/MultiFuncSelect/index.js

@@ -876,7 +876,7 @@ var enableBodyScroll = function enableBodyScroll(targetElement) {
 // EXTERNAL MODULE: ./src/utils/tree.js
 var tree = __webpack_require__(602);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded = ["wrapperClassName", "controlClassName", "multiSelect", "disabled", "required", "value", "label", "name", "readOnly", "placeholder", "id", "options", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "fetchTrigger", "fetchTriggerForDefaultData", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "multiSelect", "disabled", "required", "value", "label", "name", "readOnly", "placeholder", "id", "options", "cleanTrigger", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "fetchTrigger", "fetchTriggerForDefaultData", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus"];
 function src_toConsumableArray(arr) { return src_arrayWithoutHoles(arr) || src_iterableToArray(arr) || src_unsupportedIterableToArray(arr) || src_nonIterableSpread(); }
 function src_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 src_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -922,6 +922,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     placeholder = props.placeholder,
     id = props.id,
     options = props.options,
+    cleanTrigger = props.cleanTrigger,
     lockBodyScroll = props.lockBodyScroll,
     hierarchical = props.hierarchical,
     indentation = props.indentation,
@@ -1005,10 +1006,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     _useState16 = _slicedToArray(_useState15, 2),
     incomingData = _useState16[0],
     setIncomingData = _useState16[1];
-
-  // Multiple selection
   var selectedSign = false;
   var MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
+  var MULTI_SEL_LABEL = multiSelect ? multiSelect.selectAllLabel : 'Select all options';
   var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
       labels: [],
       values: []
@@ -1022,6 +1022,10 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     }).includes(val.toString());
   };
 
+  // clean trigger
+  var CLEAN_TRIGGER_VALID = typeof cleanTrigger === 'undefined' ? false : cleanTrigger ? cleanTrigger.valid : false;
+  var CLEAN_TRIGGER_LABEL = cleanTrigger ? cleanTrigger.cleanValueLabel : 'Clean';
+
   //performance
   var handleChangeFetchSafe = utils_useDebounce(function (val) {
     var _orginalData = [];
@@ -1030,11 +1034,12 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         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();
+            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 l.replace(/ /g, '').indexOf(_val.toLowerCase()) >= 0;
+          }) || item.label.toLowerCase().indexOf(_val.toLowerCase()) >= 0) && _val != '') {
             return true;
           } else {
             return false;
@@ -1602,6 +1607,8 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         });
       }
     });
+
+    // select all button
     var _btnSelectAll = listContentRef.current.querySelector('.mf-select-multi__control-option-item--select-all > span');
     if (_btnSelectAll !== null && typeof _btnSelectAll.dataset.ev === 'undefined') {
       _btnSelectAll.dataset.ev = 'true';
@@ -1609,17 +1616,27 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         handleSelectAll(e);
       });
     }
+
+    // clean button
+    var _btnClean = listContentRef.current.querySelector('.mf-select-multi__control-option-item--clean > span');
+    if (_btnClean !== null && typeof _btnClean.dataset.ev === 'undefined') {
+      _btnClean.dataset.ev = 'true';
+      _btnClean.addEventListener('pointerdown', function (e) {
+        handleCleanValue(e);
+      });
+    }
   }
   function popwinFilterItems(val) {
     if (listContentRef.current === null) return;
     [].slice.call(listContentRef.current.querySelectorAll('.mf-select-multi__control-option-item')).forEach(function (node) {
       // 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 : '';
       if ((_queryString.split(',').some(function (l) {
-        return l.charAt(0) === val.toLowerCase();
+        return l.charAt(0) === _val.toLowerCase();
       }) || _queryString.split(',').some(function (l) {
-        return l.replace(/ /g, '').indexOf(val.toLowerCase()) >= 0;
-      }) || node.dataset.label.toLowerCase().indexOf(val.toLowerCase()) >= 0) && val != '') {
+        return l.replace(/ /g, '').indexOf(_val.toLowerCase()) >= 0;
+      }) || node.dataset.label.toLowerCase().indexOf(_val.toLowerCase()) >= 0) && _val != '') {
         node.classList.remove('hide');
       } else {
         node.classList.add('hide');
@@ -1966,31 +1983,6 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   }
   function handleSelectAll(event) {
     event.preventDefault();
-    var onChangeSelectAll = function onChangeSelectAll(labelsArr, valuesArr) {
-      if (typeof onChange === 'function') {
-        onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, {
-          labels: labelsArr.map(function (v) {
-            return v.toString();
-          }),
-          values: valuesArr.map(function (v) {
-            return v.toString();
-          }),
-          labelsOfString: VALUE_BY_BRACKETS ? (0,convert.convertArrToValByBrackets)(labelsArr.map(function (v) {
-            return v.toString();
-          })) : labelsArr.map(function (v) {
-            return v.toString();
-          }).join(','),
-          valuesOfString: VALUE_BY_BRACKETS ? (0,convert.convertArrToValByBrackets)(valuesArr.map(function (v) {
-            return v.toString();
-          })) : valuesArr.map(function (v) {
-            return v.toString();
-          }).join(',')
-        });
-
-        //
-        selectInputRef.current.blur();
-      }
-    };
     var updateOptionCheckboxes = function updateOptionCheckboxes(type) {
       var _labels = [];
       var _values = [];
@@ -2039,6 +2031,23 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     }
     selectedSign = !selectedSign;
   }
+  function handleCleanValue(event) {
+    event.preventDefault();
+
+    // It is valid when a single selection
+    var emptyValue = {
+      label: '',
+      value: '',
+      queryString: ''
+    };
+    handleSelect(null, JSON.stringify(emptyValue), [], []);
+    if (typeof onChange === 'function') {
+      onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, emptyValue);
+    }
+
+    // update temporary value
+    setControlTempValue('');
+  }
   function handleMultiControlItemRemove(event) {
     event.preventDefault();
     var valueToRemove = String(event.currentTarget.dataset.item);
@@ -2580,9 +2589,19 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     tabIndex: -1,
     className: "btn btn-secondary",
     dangerouslySetInnerHTML: {
-      __html: "".concat((multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.selectAllLabel) || 'Select all options')
+      __html: "".concat(MULTI_SEL_LABEL)
+    }
+  }))) : null, !MULTI_SEL_VALID ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, CLEAN_TRIGGER_VALID ? /*#__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("span", {
+    tabIndex: -1,
+    className: "list-group-item list-group-item-action border-start-0 border-end-0 text-secondary bg-light mf-select-multi__control-option-item--clean",
+    role: "tab"
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+    tabIndex: -1,
+    className: "btn btn-secondary",
+    dangerouslySetInnerHTML: {
+      __html: "".concat(CLEAN_TRIGGER_LABEL)
     }
-  }))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
+  }))) : null) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
     tabIndex: -1,
     type: "button",
     className: "list-group-item list-group-item-action no-match border-0 mf-select-multi__control-option-item--nomatch hide",
@@ -2606,7 +2625,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         "data-itemdata": JSON.stringify(item),
         role: "tab",
         dangerouslySetInnerHTML: {
-          __html: item.label
+          __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
         }
       });
     } else {
@@ -2646,7 +2665,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         d: "M4 7.2002V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2842 19.7822 18.9079C20 18.4805 20 17.9215 20 16.8036V7.19691C20 6.07899 20 5.5192 19.7822 5.0918C19.5905 4.71547 19.2837 4.40973 18.9074 4.21799C18.4796 4 17.9203 4 16.8002 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002Z"
       }))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
         dangerouslySetInnerHTML: {
-          __html: item.label
+          __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
         }
       }));
     }

package/lib/cjs/LiveSearch/index.js

@@ -804,11 +804,12 @@ var LiveSearch = function LiveSearch(props) {
               return data.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();
+                  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 l.replace(/ /g, '').indexOf(_val.toLowerCase()) >= 0;
+                }) || item.label.toLowerCase().indexOf(_val.toLowerCase()) >= 0) && _val != '') {
                   return true;
                 } else {
                   return false;

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

@@ -13,6 +13,7 @@ interface MultiSelectDataConfig {
 interface OptionConfig {
     disabled?: boolean;
     label: any;
+    listItemLabel?: any;
     value: any;
     queryString: string | number;
 }
@@ -22,10 +23,15 @@ interface MultiSelectConfig {
     selectAllLabel?: string;
     data: MultiSelectDataConfig | null;
 }
+interface CleanTriggerConfig {
+    valid: boolean;
+    cleanValueLabel?: string;
+}
 declare type MultiFuncSelectProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     multiSelect?: MultiSelectConfig;
+    cleanTrigger?: CleanTriggerConfig;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;

package/lib/cjs/MultiFuncSelect/index.js

@@ -876,7 +876,7 @@ var enableBodyScroll = function enableBodyScroll(targetElement) {
 // EXTERNAL MODULE: ./src/utils/tree.js
 var tree = __webpack_require__(602);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded = ["wrapperClassName", "controlClassName", "multiSelect", "disabled", "required", "value", "label", "name", "readOnly", "placeholder", "id", "options", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "fetchTrigger", "fetchTriggerForDefaultData", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "multiSelect", "disabled", "required", "value", "label", "name", "readOnly", "placeholder", "id", "options", "cleanTrigger", "lockBodyScroll", "hierarchical", "indentation", "doubleIndent", "style", "depth", "controlArrow", "winWidth", "tabIndex", "fetchTrigger", "fetchTriggerForDefaultData", "fetchNoneInfo", "fetchUpdate", "fetchFuncAsync", "fetchFuncMethod", "fetchFuncMethodParams", "data", "extractValueByBrackets", "fetchCallback", "onFetch", "onLoad", "onSelect", "onChange", "onBlur", "onFocus"];
 function src_toConsumableArray(arr) { return src_arrayWithoutHoles(arr) || src_iterableToArray(arr) || src_unsupportedIterableToArray(arr) || src_nonIterableSpread(); }
 function src_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 src_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -922,6 +922,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     placeholder = props.placeholder,
     id = props.id,
     options = props.options,
+    cleanTrigger = props.cleanTrigger,
     lockBodyScroll = props.lockBodyScroll,
     hierarchical = props.hierarchical,
     indentation = props.indentation,
@@ -1005,10 +1006,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     _useState16 = _slicedToArray(_useState15, 2),
     incomingData = _useState16[0],
     setIncomingData = _useState16[1];
-
-  // Multiple selection
   var selectedSign = false;
   var MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
+  var MULTI_SEL_LABEL = multiSelect ? multiSelect.selectAllLabel : 'Select all options';
   var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
       labels: [],
       values: []
@@ -1022,6 +1022,10 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     }).includes(val.toString());
   };
 
+  // clean trigger
+  var CLEAN_TRIGGER_VALID = typeof cleanTrigger === 'undefined' ? false : cleanTrigger ? cleanTrigger.valid : false;
+  var CLEAN_TRIGGER_LABEL = cleanTrigger ? cleanTrigger.cleanValueLabel : 'Clean';
+
   //performance
   var handleChangeFetchSafe = utils_useDebounce(function (val) {
     var _orginalData = [];
@@ -1030,11 +1034,12 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         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();
+            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 l.replace(/ /g, '').indexOf(_val.toLowerCase()) >= 0;
+          }) || item.label.toLowerCase().indexOf(_val.toLowerCase()) >= 0) && _val != '') {
             return true;
           } else {
             return false;
@@ -1602,6 +1607,8 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         });
       }
     });
+
+    // select all button
     var _btnSelectAll = listContentRef.current.querySelector('.mf-select-multi__control-option-item--select-all > span');
     if (_btnSelectAll !== null && typeof _btnSelectAll.dataset.ev === 'undefined') {
       _btnSelectAll.dataset.ev = 'true';
@@ -1609,17 +1616,27 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         handleSelectAll(e);
       });
     }
+
+    // clean button
+    var _btnClean = listContentRef.current.querySelector('.mf-select-multi__control-option-item--clean > span');
+    if (_btnClean !== null && typeof _btnClean.dataset.ev === 'undefined') {
+      _btnClean.dataset.ev = 'true';
+      _btnClean.addEventListener('pointerdown', function (e) {
+        handleCleanValue(e);
+      });
+    }
   }
   function popwinFilterItems(val) {
     if (listContentRef.current === null) return;
     [].slice.call(listContentRef.current.querySelectorAll('.mf-select-multi__control-option-item')).forEach(function (node) {
       // 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 : '';
       if ((_queryString.split(',').some(function (l) {
-        return l.charAt(0) === val.toLowerCase();
+        return l.charAt(0) === _val.toLowerCase();
       }) || _queryString.split(',').some(function (l) {
-        return l.replace(/ /g, '').indexOf(val.toLowerCase()) >= 0;
-      }) || node.dataset.label.toLowerCase().indexOf(val.toLowerCase()) >= 0) && val != '') {
+        return l.replace(/ /g, '').indexOf(_val.toLowerCase()) >= 0;
+      }) || node.dataset.label.toLowerCase().indexOf(_val.toLowerCase()) >= 0) && _val != '') {
         node.classList.remove('hide');
       } else {
         node.classList.add('hide');
@@ -1966,31 +1983,6 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   }
   function handleSelectAll(event) {
     event.preventDefault();
-    var onChangeSelectAll = function onChangeSelectAll(labelsArr, valuesArr) {
-      if (typeof onChange === 'function') {
-        onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, {
-          labels: labelsArr.map(function (v) {
-            return v.toString();
-          }),
-          values: valuesArr.map(function (v) {
-            return v.toString();
-          }),
-          labelsOfString: VALUE_BY_BRACKETS ? (0,convert.convertArrToValByBrackets)(labelsArr.map(function (v) {
-            return v.toString();
-          })) : labelsArr.map(function (v) {
-            return v.toString();
-          }).join(','),
-          valuesOfString: VALUE_BY_BRACKETS ? (0,convert.convertArrToValByBrackets)(valuesArr.map(function (v) {
-            return v.toString();
-          })) : valuesArr.map(function (v) {
-            return v.toString();
-          }).join(',')
-        });
-
-        //
-        selectInputRef.current.blur();
-      }
-    };
     var updateOptionCheckboxes = function updateOptionCheckboxes(type) {
       var _labels = [];
       var _values = [];
@@ -2039,6 +2031,23 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     }
     selectedSign = !selectedSign;
   }
+  function handleCleanValue(event) {
+    event.preventDefault();
+
+    // It is valid when a single selection
+    var emptyValue = {
+      label: '',
+      value: '',
+      queryString: ''
+    };
+    handleSelect(null, JSON.stringify(emptyValue), [], []);
+    if (typeof onChange === 'function') {
+      onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, emptyValue);
+    }
+
+    // update temporary value
+    setControlTempValue('');
+  }
   function handleMultiControlItemRemove(event) {
     event.preventDefault();
     var valueToRemove = String(event.currentTarget.dataset.item);
@@ -2580,9 +2589,19 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     tabIndex: -1,
     className: "btn btn-secondary",
     dangerouslySetInnerHTML: {
-      __html: "".concat((multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.selectAllLabel) || 'Select all options')
+      __html: "".concat(MULTI_SEL_LABEL)
+    }
+  }))) : null, !MULTI_SEL_VALID ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, CLEAN_TRIGGER_VALID ? /*#__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("span", {
+    tabIndex: -1,
+    className: "list-group-item list-group-item-action border-start-0 border-end-0 text-secondary bg-light mf-select-multi__control-option-item--clean",
+    role: "tab"
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+    tabIndex: -1,
+    className: "btn btn-secondary",
+    dangerouslySetInnerHTML: {
+      __html: "".concat(CLEAN_TRIGGER_LABEL)
     }
-  }))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
+  }))) : null) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
     tabIndex: -1,
     type: "button",
     className: "list-group-item list-group-item-action no-match border-0 mf-select-multi__control-option-item--nomatch hide",
@@ -2606,7 +2625,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         "data-itemdata": JSON.stringify(item),
         role: "tab",
         dangerouslySetInnerHTML: {
-          __html: item.label
+          __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
         }
       });
     } else {
@@ -2646,7 +2665,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         d: "M4 7.2002V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2842 19.7822 18.9079C20 18.4805 20 17.9215 20 16.8036V7.19691C20 6.07899 20 5.5192 19.7822 5.0918C19.5905 4.71547 19.2837 4.40973 18.9074 4.21799C18.4796 4 17.9203 4 16.8002 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002Z"
       }))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
         dangerouslySetInnerHTML: {
-          __html: item.label
+          __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
         }
       }));
     }

package/lib/css/MultiFuncSelect/index.css

@@ -16,6 +16,7 @@
   --mf-sel-removebtn-hover-fill: #f00;
   /*------ Placeholder for input ------*/
   /*------ Arrow ------*/
+  /*------ Clean ------*/
   /*------ Input ------*/
   /*------ Blinking cursor ------*/
   /*------ Single selection ------*/
@@ -29,6 +30,9 @@
 .mf-select__wrapper .arrow svg .arrow-fill-g {
   fill: var(--mf-sel-arrow-fill);
 }
+.mf-select__wrapper .clean svg .clean-fill-g {
+  fill: var(--mf-sel-arrow-fill);
+}
 .mf-select__wrapper [data-select]:focus {
   box-shadow: none;
   border-color: transparent;
@@ -211,7 +215,8 @@
   display: none;
   min-width: var(--mf-sel-listgroup-popwin-min-width);
   z-index: 1055; /* --bs-modal-zindex */
-  /*------ Multiple selection ------*/
+  /*------ Extended buttons of Multiple selection ------*/
+  /*------ Extended buttons of Single selection ------*/
 }
 .mf-select__options-wrapper.active {
   display: block;
@@ -270,3 +275,10 @@
   font-size: 0.75rem;
   padding: 0.1rem 0.5rem;
 }
+.mf-select__options-wrapper .mf-select-multi__control-option-item--clean.hide {
+  display: none !important;
+}
+.mf-select__options-wrapper .mf-select-multi__control-option-item--clean .btn {
+  font-size: 0.75rem;
+  padding: 0.1rem 0.5rem;
+}

package/lib/esm/LiveSearch/index.tsx

@@ -229,14 +229,15 @@ const LiveSearch = (props: LiveSearchProps) => {
 
                 // 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
+                        _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 != ''
+                    _val != ''
                 ) {
                     return true;
                 } else {

package/lib/esm/MultiFuncSelect/index.scss

@@ -33,6 +33,14 @@
         }
     }
         
+    /*------ Clean ------*/
+    .clean {
+        svg .clean-fill-g {
+            fill: var(--mf-sel-arrow-fill);
+        }
+    }
+        
+
 
     /*------ Input ------*/
     [data-select]:focus {
@@ -398,7 +406,7 @@
 
 
 
-    /*------ Multiple selection ------*/
+    /*------ Extended buttons of Multiple selection ------*/
     .mf-select-multi__control-option-item--select-all {
 
         &.hide {
@@ -411,6 +419,20 @@
         }
     }
 
+    /*------ Extended buttons of Single selection ------*/
+    .mf-select-multi__control-option-item--clean {
+
+        &.hide {
+            display: none !important;
+        }
+
+        .btn {
+            font-size: 0.75rem;
+            padding: 0.1rem 0.5rem;
+        }
+    }
+
+    
 
 }