funda-ui 1.2.117 → 1.2.120

package/EventCalendarTimeline/index.css

@@ -303,7 +303,8 @@
 }
 .e-cal-tl-table__timeline-table__wrapper .e-cal-tl-table__cell-cushion-title,
 .e-cal-tl-table__timeline-table__wrapper .e-cal-tl-table__cell-cushion-content {
-  word-break: break-all;
+  word-wrap: break-word;
+  word-break: break-word;
   max-width: var(--e-cal-tl-table-cell-max-w);
   /* If the maximum width is not increased and the screen becomes smaller, 
   the cell width of ".e-cal-tl-table__datagrid-header__content" may be 
@@ -318,7 +319,8 @@
 }
 .e-cal-tl-table__timeline-table__wrapper .e-cal-tl-table__cell-cushion-headertitle,
 .e-cal-tl-table__timeline-table__wrapper .e-cal-tl-table__cell-cushion-title {
-  word-break: break-all;
+  word-wrap: break-word;
+  word-break: break-word;
 }
 .e-cal-tl-table__timeline-table__wrapper .e-cal-tl-table__cell-cushion-headertitle {
   width: var(--e-cal-tl-table-header-w);

package/EventCalendarTimeline/index.js

@@ -1720,6 +1720,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
             return d > 0 && d <= days[month] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {
               className: "e-cal-tl-table__cell-cushion-content__container e-cal-tl-table__cell-tooltiptrigger ".concat(eventSourcesData && _currentData.length > 0 ? 'has-event' : '', " ").concat(d > 0 ? '' : 'empty', " ").concat(d === now.getDate() ? 'today' : '', " ").concat(d === day && tableRowNum === rowIndex ? 'selected' : '', " ").concat(isLastCol ? 'last-cell' : ''),
               key: "col" + i,
+              "data-overlay-id": "e-cal-tl-table__cell-tooltipwrapper-".concat(idRes),
               "data-index": colIndex - 1,
               colSpan: 1,
               "data-date": getCalendarDate(_dateShow),
@@ -1903,6 +1904,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
             return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {
               className: "e-cal-tl-table__cell-cushion-content__container e-cal-tl-table__cell-tooltiptrigger ".concat(_currentData.length > 0 ? 'has-event' : '', " ").concat(d > 0 ? '' : 'empty', " ").concat(d === now.getDate() ? 'today' : '', " ").concat(d === day && tableRowNum === rowIndex ? 'selected' : '', " ").concat(isLastCol ? 'last-cell' : ''),
               key: "col" + i,
+              "data-overlay-id": "e-cal-tl-table__cell-tooltipwrapper-".concat(idRes),
               "data-index": _colIndex - 1,
               colSpan: 1,
               "data-date": getCalendarDate(_dateShow),

package/MultiFuncSelect/index.js

@@ -1018,7 +1018,8 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     controlArr = _useState18[0],
     setControlArr = _useState18[1];
   var multiSelControlOptionExist = function multiSelControlOptionExist(arr, val) {
-    return arr.map(function (v) {
+    var _data = arr.filter(Boolean);
+    return _data.map(function (v) {
       return v.toString();
     }).includes(val.toString());
   };
@@ -1256,6 +1257,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
                 }];
               }
             } else {
+              // If the default value is label, match value
               filterResQueryValue = _ORGIN_DATA.filter(function (item) {
                 return item.value == defaultValue;
               });
@@ -1364,6 +1366,8 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
 
             // STEP 3: ===========
             // value & label must be initialized
+
+            // If the default value is label, match value
             _filterRes3 = [];
             _filterResQueryValue = optionsDataInit.filter(function (item) {
               return item.value == defaultValue;
@@ -2437,6 +2441,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
       __html: "".concat(label)
     }
   }))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    "data-overlay-id": "mf-select__options-wrapper-".concat(idRes),
     id: "mf-select__wrapper-".concat(idRes),
     className: "mf-select__wrapper ".concat(wrapperClassName || wrapperClassName === '' ? wrapperClassName : 'mb-3 position-relative', " ").concat(MULTI_SEL_VALID ? 'multiple-selection' : '', " ").concat(isOpen ? 'active focus' : ''),
     ref: rootRef
@@ -2454,6 +2459,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     },
     tabIndex: tabIndex || 0,
     type: "text",
+    "data-overlay-id": "mf-select__options-wrapper-".concat(idRes),
     id: "label-".concat(idRes)
 
     // Don't use "name", it's just a container to display the label

package/MultipleCheckboxes/index.js

@@ -739,9 +739,27 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
     } else {
       var _val = VALUE_BY_BRACKETS ? (0,_utils_extract__WEBPACK_IMPORTED_MODULE_2__.extractContentsOfBrackets)(defaultValue) : defaultValue.trim().replace(/^\,|\,$/g, '').split(',');
       if (Array.isArray(_val)) {
-        setValSelected(_val.filter(function (v) {
+        // If the default value is label, match value
+        var _realValue = _val.filter(function (v) {
           return v !== '';
-        }));
+        });
+        var filterRes = [];
+        var filterResQueryValue = optionsRes.filter(function (item) {
+          return _val.includes(item.value);
+        });
+        var filterResQueryLabel = optionsRes.filter(function (item) {
+          return _val.includes(item.label);
+        });
+        filterRes = filterResQueryValue;
+        if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+        if (filterRes.length > 0) _realValue = filterRes.filter(function (v) {
+          return v.value !== '';
+        }).map(function (k) {
+          return k.value;
+        });
+
+        //
+        setValSelected(_realValue);
       } else {
         setValSelected([]);
       }
@@ -786,6 +804,7 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
           "data-disabled": disabled || (typeof opt.disabled !== 'undefined' ? "".concat(opt.disabled) : 'false')
         }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_checkbox__WEBPACK_IMPORTED_MODULE_1___default()), _extends({
           wrapperClassName: "",
+          name: "".concat(name, "-checkbox-item"),
           "data-index": "".concat(index, "-").concat(optIndex),
           "data-label": opt.label,
           "data-list-item-label": "".concat(typeof opt.listItemLabel === 'undefined' ? '' : opt.listItemLabel),
@@ -837,6 +856,7 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
         "data-disabled": disabled || (typeof item.disabled !== 'undefined' ? "".concat(item.disabled) : 'false')
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_checkbox__WEBPACK_IMPORTED_MODULE_1___default()), _extends({
         wrapperClassName: "",
+        name: "".concat(name, "-checkbox-item"),
         "data-index": index,
         "data-label": item.label,
         "data-list-item-label": "".concat(typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel),

package/MultipleSelect/index.css

@@ -105,7 +105,8 @@
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  word-break: break-all;
+  word-wrap: break-word;
+  word-break: break-word;
 }
 .m-select__wrapper .m-select-inner li > strong {
   font-weight: normal;

package/MultipleSelect/index.js

@@ -472,7 +472,8 @@ var MultipleSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
     hasErr = _useState10[0],
     setHasErr = _useState10[1];
   var multiSelControlOptionExist = function multiSelControlOptionExist(arr, val) {
-    return arr.map(function (v) {
+    var _data = arr.filter(Boolean);
+    return _data.map(function (v) {
       return v.toString();
     }).includes(val.toString());
   };

package/Radio/index.js

@@ -166,7 +166,7 @@ var Radio = function Radio(props) {
   } // Determine whether it is in JSON format
   function _fetchData() {
     _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
-      var response, _ORGIN_DATA;
+      var response, _ORGIN_DATA, _realValue, filterRes, filterResQueryValue, filterResQueryLabel, _realValue2, _filterRes, _filterResQueryValue, _filterResQueryLabel;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -175,7 +175,7 @@ var Radio = function Radio(props) {
 
             //
             if (!(_typeof(fetchFuncAsync) === 'object')) {
-              _context.next = 14;
+              _context.next = 21;
               break;
             }
             _context.next = 4;
@@ -194,8 +194,21 @@ var Radio = function Radio(props) {
               _ORGIN_DATA = [];
             }
 
+            // If the default value is label, match value
+            _realValue = value;
+            filterRes = [];
+            filterResQueryValue = _ORGIN_DATA.filter(function (item) {
+              return item.value == value;
+            });
+            filterResQueryLabel = _ORGIN_DATA.filter(function (item) {
+              return item.label == value;
+            });
+            filterRes = filterResQueryValue;
+            if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+            if (filterRes.length > 0) _realValue = filterRes[0].value;
+
             //
-            setControlValue(value); // value must be initialized
+            setControlValue(_realValue); // value must be initialized
 
             //
             setDataInit(_ORGIN_DATA); // data must be initialized
@@ -203,9 +216,22 @@ var Radio = function Radio(props) {
             //
             onFetch === null || onFetch === void 0 ? void 0 : onFetch(_ORGIN_DATA);
             return _context.abrupt("return", _ORGIN_DATA);
-          case 14:
+          case 21:
+            // If the default value is label, match value
+            _realValue2 = value;
+            _filterRes = [];
+            _filterResQueryValue = optionsDataInit.filter(function (item) {
+              return item.value == value;
+            });
+            _filterResQueryLabel = optionsDataInit.filter(function (item) {
+              return item.label == value;
+            });
+            _filterRes = _filterResQueryValue;
+            if (_filterResQueryValue.length === 0) _filterRes = _filterResQueryLabel;
+            if (_filterRes.length > 0) _realValue2 = _filterRes[0].value;
+
             //
-            setControlValue(value); // value must be initialized
+            setControlValue(_realValue2); // value must be initialized
 
             //
             setDataInit(optionsDataInit); // data must be initialized
@@ -213,7 +239,7 @@ var Radio = function Radio(props) {
             //
             onFetch === null || onFetch === void 0 ? void 0 : onFetch(optionsDataInit);
             return _context.abrupt("return", optionsDataInit);
-          case 18:
+          case 32:
           case "end":
             return _context.stop();
         }

package/Table/index.js

@@ -1074,7 +1074,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           } // Determine whether it is in JSON format
           function _fetchData() {
             _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
-              var response, _ORGIN_DATA;
+              var response, _ORGIN_DATA, _realValue, filterRes, filterResQueryValue, filterResQueryLabel, _realValue2, _filterRes, _filterResQueryValue, _filterResQueryLabel;
               return _regeneratorRuntime().wrap(function _callee$(_context) {
                 while (1) switch (_context.prev = _context.next) {
                   case 0:
@@ -1083,7 +1083,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
                     //
                     if (!(_typeof(fetchFuncAsync) === 'object')) {
-                      _context.next = 14;
+                      _context.next = 21;
                       break;
                     }
                     _context.next = 4;
@@ -1102,8 +1102,21 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                       _ORGIN_DATA = [];
                     }
 
+                    // If the default value is label, match value
+                    _realValue = value;
+                    filterRes = [];
+                    filterResQueryValue = _ORGIN_DATA.filter(function (item) {
+                      return item.value == value;
+                    });
+                    filterResQueryLabel = _ORGIN_DATA.filter(function (item) {
+                      return item.label == value;
+                    });
+                    filterRes = filterResQueryValue;
+                    if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+                    if (filterRes.length > 0) _realValue = filterRes[0].value;
+
                     //
-                    setControlValue(value); // value must be initialized
+                    setControlValue(_realValue); // value must be initialized
 
                     //
                     setDataInit(_ORGIN_DATA); // data must be initialized
@@ -1111,9 +1124,22 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                     //
                     onFetch === null || onFetch === void 0 ? void 0 : onFetch(_ORGIN_DATA);
                     return _context.abrupt("return", _ORGIN_DATA);
-                  case 14:
+                  case 21:
+                    // If the default value is label, match value
+                    _realValue2 = value;
+                    _filterRes = [];
+                    _filterResQueryValue = optionsDataInit.filter(function (item) {
+                      return item.value == value;
+                    });
+                    _filterResQueryLabel = optionsDataInit.filter(function (item) {
+                      return item.label == value;
+                    });
+                    _filterRes = _filterResQueryValue;
+                    if (_filterResQueryValue.length === 0) _filterRes = _filterResQueryLabel;
+                    if (_filterRes.length > 0) _realValue2 = _filterRes[0].value;
+
                     //
-                    setControlValue(value); // value must be initialized
+                    setControlValue(_realValue2); // value must be initialized
 
                     //
                     setDataInit(optionsDataInit); // data must be initialized
@@ -1121,7 +1147,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                     //
                     onFetch === null || onFetch === void 0 ? void 0 : onFetch(optionsDataInit);
                     return _context.abrupt("return", optionsDataInit);
-                  case 18:
+                  case 32:
                   case "end":
                     return _context.stop();
                 }

package/Textarea/index.js

@@ -293,7 +293,15 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     // update default value
     //--------------
     if (typeof value !== 'undefined') {
-      setChangedVal("".concat(value)); // Avoid displaying the number 0
+      if (value.length > 0 && autoSize) {
+        // Recalculate height if default value exceeds initial height
+        setChangedVal('');
+        setTimeout(function () {
+          setChangedVal("".concat(value));
+        }, 0);
+      } else {
+        setChangedVal("".concat(value)); // Avoid displaying the number 0
+      }
     }
   }, [value]);
   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, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {

package/Tooltip/index.js

@@ -397,6 +397,7 @@ var Tooltip = function Tooltip(props) {
     className: "tooltip__content"
   }, content))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     ref: rootRef,
+    "data-overlay-id": "tooltip__wrapper-".concat(idRes),
     className: "tooltip__trigger d-inline-block",
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave

package/Tree/index.css

@@ -21,7 +21,8 @@
   justify-content: space-between;
   padding: 0.5rem 0;
   outline: none; /* When using "tabindex" please set */
-  word-break: break-all;
+  word-wrap: break-word;
+  word-break: break-word;
   /*------ line ------*/
   /*------ has checkbox  ------*/
   /*------ hide arrow  ------*/

package/lib/cjs/EventCalendarTimeline/index.js

@@ -1720,6 +1720,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
             return d > 0 && d <= days[month] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {
               className: "e-cal-tl-table__cell-cushion-content__container e-cal-tl-table__cell-tooltiptrigger ".concat(eventSourcesData && _currentData.length > 0 ? 'has-event' : '', " ").concat(d > 0 ? '' : 'empty', " ").concat(d === now.getDate() ? 'today' : '', " ").concat(d === day && tableRowNum === rowIndex ? 'selected' : '', " ").concat(isLastCol ? 'last-cell' : ''),
               key: "col" + i,
+              "data-overlay-id": "e-cal-tl-table__cell-tooltipwrapper-".concat(idRes),
               "data-index": colIndex - 1,
               colSpan: 1,
               "data-date": getCalendarDate(_dateShow),
@@ -1903,6 +1904,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
             return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {
               className: "e-cal-tl-table__cell-cushion-content__container e-cal-tl-table__cell-tooltiptrigger ".concat(_currentData.length > 0 ? 'has-event' : '', " ").concat(d > 0 ? '' : 'empty', " ").concat(d === now.getDate() ? 'today' : '', " ").concat(d === day && tableRowNum === rowIndex ? 'selected' : '', " ").concat(isLastCol ? 'last-cell' : ''),
               key: "col" + i,
+              "data-overlay-id": "e-cal-tl-table__cell-tooltipwrapper-".concat(idRes),
               "data-index": _colIndex - 1,
               colSpan: 1,
               "data-date": getCalendarDate(_dateShow),

package/lib/cjs/MultiFuncSelect/index.js

@@ -1018,7 +1018,8 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     controlArr = _useState18[0],
     setControlArr = _useState18[1];
   var multiSelControlOptionExist = function multiSelControlOptionExist(arr, val) {
-    return arr.map(function (v) {
+    var _data = arr.filter(Boolean);
+    return _data.map(function (v) {
       return v.toString();
     }).includes(val.toString());
   };
@@ -1256,6 +1257,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
                 }];
               }
             } else {
+              // If the default value is label, match value
               filterResQueryValue = _ORGIN_DATA.filter(function (item) {
                 return item.value == defaultValue;
               });
@@ -1364,6 +1366,8 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
 
             // STEP 3: ===========
             // value & label must be initialized
+
+            // If the default value is label, match value
             _filterRes3 = [];
             _filterResQueryValue = optionsDataInit.filter(function (item) {
               return item.value == defaultValue;
@@ -2437,6 +2441,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
       __html: "".concat(label)
     }
   }))) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    "data-overlay-id": "mf-select__options-wrapper-".concat(idRes),
     id: "mf-select__wrapper-".concat(idRes),
     className: "mf-select__wrapper ".concat(wrapperClassName || wrapperClassName === '' ? wrapperClassName : 'mb-3 position-relative', " ").concat(MULTI_SEL_VALID ? 'multiple-selection' : '', " ").concat(isOpen ? 'active focus' : ''),
     ref: rootRef
@@ -2454,6 +2459,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     },
     tabIndex: tabIndex || 0,
     type: "text",
+    "data-overlay-id": "mf-select__options-wrapper-".concat(idRes),
     id: "label-".concat(idRes)
 
     // Don't use "name", it's just a container to display the label

package/lib/cjs/MultipleCheckboxes/index.js

@@ -739,9 +739,27 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
     } else {
       var _val = VALUE_BY_BRACKETS ? (0,_utils_extract__WEBPACK_IMPORTED_MODULE_2__.extractContentsOfBrackets)(defaultValue) : defaultValue.trim().replace(/^\,|\,$/g, '').split(',');
       if (Array.isArray(_val)) {
-        setValSelected(_val.filter(function (v) {
+        // If the default value is label, match value
+        var _realValue = _val.filter(function (v) {
           return v !== '';
-        }));
+        });
+        var filterRes = [];
+        var filterResQueryValue = optionsRes.filter(function (item) {
+          return _val.includes(item.value);
+        });
+        var filterResQueryLabel = optionsRes.filter(function (item) {
+          return _val.includes(item.label);
+        });
+        filterRes = filterResQueryValue;
+        if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+        if (filterRes.length > 0) _realValue = filterRes.filter(function (v) {
+          return v.value !== '';
+        }).map(function (k) {
+          return k.value;
+        });
+
+        //
+        setValSelected(_realValue);
       } else {
         setValSelected([]);
       }
@@ -786,6 +804,7 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
           "data-disabled": disabled || (typeof opt.disabled !== 'undefined' ? "".concat(opt.disabled) : 'false')
         }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_checkbox__WEBPACK_IMPORTED_MODULE_1___default()), _extends({
           wrapperClassName: "",
+          name: "".concat(name, "-checkbox-item"),
           "data-index": "".concat(index, "-").concat(optIndex),
           "data-label": opt.label,
           "data-list-item-label": "".concat(typeof opt.listItemLabel === 'undefined' ? '' : opt.listItemLabel),
@@ -837,6 +856,7 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
         "data-disabled": disabled || (typeof item.disabled !== 'undefined' ? "".concat(item.disabled) : 'false')
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_checkbox__WEBPACK_IMPORTED_MODULE_1___default()), _extends({
         wrapperClassName: "",
+        name: "".concat(name, "-checkbox-item"),
         "data-index": index,
         "data-label": item.label,
         "data-list-item-label": "".concat(typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel),

package/lib/cjs/MultipleSelect/index.js

@@ -472,7 +472,8 @@ var MultipleSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
     hasErr = _useState10[0],
     setHasErr = _useState10[1];
   var multiSelControlOptionExist = function multiSelControlOptionExist(arr, val) {
-    return arr.map(function (v) {
+    var _data = arr.filter(Boolean);
+    return _data.map(function (v) {
       return v.toString();
     }).includes(val.toString());
   };

package/lib/cjs/Radio/index.js

@@ -166,7 +166,7 @@ var Radio = function Radio(props) {
   } // Determine whether it is in JSON format
   function _fetchData() {
     _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
-      var response, _ORGIN_DATA;
+      var response, _ORGIN_DATA, _realValue, filterRes, filterResQueryValue, filterResQueryLabel, _realValue2, _filterRes, _filterResQueryValue, _filterResQueryLabel;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -175,7 +175,7 @@ var Radio = function Radio(props) {
 
             //
             if (!(_typeof(fetchFuncAsync) === 'object')) {
-              _context.next = 14;
+              _context.next = 21;
               break;
             }
             _context.next = 4;
@@ -194,8 +194,21 @@ var Radio = function Radio(props) {
               _ORGIN_DATA = [];
             }
 
+            // If the default value is label, match value
+            _realValue = value;
+            filterRes = [];
+            filterResQueryValue = _ORGIN_DATA.filter(function (item) {
+              return item.value == value;
+            });
+            filterResQueryLabel = _ORGIN_DATA.filter(function (item) {
+              return item.label == value;
+            });
+            filterRes = filterResQueryValue;
+            if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+            if (filterRes.length > 0) _realValue = filterRes[0].value;
+
             //
-            setControlValue(value); // value must be initialized
+            setControlValue(_realValue); // value must be initialized
 
             //
             setDataInit(_ORGIN_DATA); // data must be initialized
@@ -203,9 +216,22 @@ var Radio = function Radio(props) {
             //
             onFetch === null || onFetch === void 0 ? void 0 : onFetch(_ORGIN_DATA);
             return _context.abrupt("return", _ORGIN_DATA);
-          case 14:
+          case 21:
+            // If the default value is label, match value
+            _realValue2 = value;
+            _filterRes = [];
+            _filterResQueryValue = optionsDataInit.filter(function (item) {
+              return item.value == value;
+            });
+            _filterResQueryLabel = optionsDataInit.filter(function (item) {
+              return item.label == value;
+            });
+            _filterRes = _filterResQueryValue;
+            if (_filterResQueryValue.length === 0) _filterRes = _filterResQueryLabel;
+            if (_filterRes.length > 0) _realValue2 = _filterRes[0].value;
+
             //
-            setControlValue(value); // value must be initialized
+            setControlValue(_realValue2); // value must be initialized
 
             //
             setDataInit(optionsDataInit); // data must be initialized
@@ -213,7 +239,7 @@ var Radio = function Radio(props) {
             //
             onFetch === null || onFetch === void 0 ? void 0 : onFetch(optionsDataInit);
             return _context.abrupt("return", optionsDataInit);
-          case 18:
+          case 32:
           case "end":
             return _context.stop();
         }

package/lib/cjs/Table/index.js

@@ -1074,7 +1074,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           } // Determine whether it is in JSON format
           function _fetchData() {
             _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
-              var response, _ORGIN_DATA;
+              var response, _ORGIN_DATA, _realValue, filterRes, filterResQueryValue, filterResQueryLabel, _realValue2, _filterRes, _filterResQueryValue, _filterResQueryLabel;
               return _regeneratorRuntime().wrap(function _callee$(_context) {
                 while (1) switch (_context.prev = _context.next) {
                   case 0:
@@ -1083,7 +1083,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
                     //
                     if (!(_typeof(fetchFuncAsync) === 'object')) {
-                      _context.next = 14;
+                      _context.next = 21;
                       break;
                     }
                     _context.next = 4;
@@ -1102,8 +1102,21 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                       _ORGIN_DATA = [];
                     }
 
+                    // If the default value is label, match value
+                    _realValue = value;
+                    filterRes = [];
+                    filterResQueryValue = _ORGIN_DATA.filter(function (item) {
+                      return item.value == value;
+                    });
+                    filterResQueryLabel = _ORGIN_DATA.filter(function (item) {
+                      return item.label == value;
+                    });
+                    filterRes = filterResQueryValue;
+                    if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+                    if (filterRes.length > 0) _realValue = filterRes[0].value;
+
                     //
-                    setControlValue(value); // value must be initialized
+                    setControlValue(_realValue); // value must be initialized
 
                     //
                     setDataInit(_ORGIN_DATA); // data must be initialized
@@ -1111,9 +1124,22 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                     //
                     onFetch === null || onFetch === void 0 ? void 0 : onFetch(_ORGIN_DATA);
                     return _context.abrupt("return", _ORGIN_DATA);
-                  case 14:
+                  case 21:
+                    // If the default value is label, match value
+                    _realValue2 = value;
+                    _filterRes = [];
+                    _filterResQueryValue = optionsDataInit.filter(function (item) {
+                      return item.value == value;
+                    });
+                    _filterResQueryLabel = optionsDataInit.filter(function (item) {
+                      return item.label == value;
+                    });
+                    _filterRes = _filterResQueryValue;
+                    if (_filterResQueryValue.length === 0) _filterRes = _filterResQueryLabel;
+                    if (_filterRes.length > 0) _realValue2 = _filterRes[0].value;
+
                     //
-                    setControlValue(value); // value must be initialized
+                    setControlValue(_realValue2); // value must be initialized
 
                     //
                     setDataInit(optionsDataInit); // data must be initialized
@@ -1121,7 +1147,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                     //
                     onFetch === null || onFetch === void 0 ? void 0 : onFetch(optionsDataInit);
                     return _context.abrupt("return", optionsDataInit);
-                  case 18:
+                  case 32:
                   case "end":
                     return _context.stop();
                 }

package/lib/cjs/Textarea/index.js

@@ -293,7 +293,15 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     // update default value
     //--------------
     if (typeof value !== 'undefined') {
-      setChangedVal("".concat(value)); // Avoid displaying the number 0
+      if (value.length > 0 && autoSize) {
+        // Recalculate height if default value exceeds initial height
+        setChangedVal('');
+        setTimeout(function () {
+          setChangedVal("".concat(value));
+        }, 0);
+      } else {
+        setChangedVal("".concat(value)); // Avoid displaying the number 0
+      }
     }
   }, [value]);
   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, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {

package/lib/cjs/Tooltip/index.js

@@ -397,6 +397,7 @@ var Tooltip = function Tooltip(props) {
     className: "tooltip__content"
   }, content))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     ref: rootRef,
+    "data-overlay-id": "tooltip__wrapper-".concat(idRes),
     className: "tooltip__trigger d-inline-block",
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave

package/lib/css/EventCalendarTimeline/index.css

@@ -303,7 +303,8 @@
 }
 .e-cal-tl-table__timeline-table__wrapper .e-cal-tl-table__cell-cushion-title,
 .e-cal-tl-table__timeline-table__wrapper .e-cal-tl-table__cell-cushion-content {
-  word-break: break-all;
+  word-wrap: break-word;
+  word-break: break-word;
   max-width: var(--e-cal-tl-table-cell-max-w);
   /* If the maximum width is not increased and the screen becomes smaller, 
   the cell width of ".e-cal-tl-table__datagrid-header__content" may be 
@@ -318,7 +319,8 @@
 }
 .e-cal-tl-table__timeline-table__wrapper .e-cal-tl-table__cell-cushion-headertitle,
 .e-cal-tl-table__timeline-table__wrapper .e-cal-tl-table__cell-cushion-title {
-  word-break: break-all;
+  word-wrap: break-word;
+  word-break: break-word;
 }
 .e-cal-tl-table__timeline-table__wrapper .e-cal-tl-table__cell-cushion-headertitle {
   width: var(--e-cal-tl-table-header-w);

package/lib/css/MultipleSelect/index.css

@@ -105,7 +105,8 @@
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  word-break: break-all;
+  word-wrap: break-word;
+  word-break: break-word;
 }
 .m-select__wrapper .m-select-inner li > strong {
   font-weight: normal;

package/lib/css/Tree/index.css

@@ -21,7 +21,8 @@
   justify-content: space-between;
   padding: 0.5rem 0;
   outline: none; /* When using "tabindex" please set */
-  word-break: break-all;
+  word-wrap: break-word;
+  word-break: break-word;
   /*------ line ------*/
   /*------ has checkbox  ------*/
   /*------ hide arrow  ------*/

package/lib/esm/EventCalendarTimeline/index.scss

@@ -374,7 +374,8 @@
     /* cell */
     .e-cal-tl-table__cell-cushion-title,
     .e-cal-tl-table__cell-cushion-content {
-        word-break: break-all;
+        word-wrap: break-word;
+        word-break: break-word;
         max-width: var(--e-cal-tl-table-cell-max-w);
 
         /* If the maximum width is not increased and the screen becomes smaller, 
@@ -393,7 +394,8 @@
 
     .e-cal-tl-table__cell-cushion-headertitle,
     .e-cal-tl-table__cell-cushion-title {
-        word-break: break-all;
+        word-wrap: break-word;
+        word-break: break-word;
     }
 
     /* header */

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -737,6 +737,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                             <td
                                 className={`e-cal-tl-table__cell-cushion-content__container e-cal-tl-table__cell-tooltiptrigger ${eventSourcesData && _currentData.length > 0 ? 'has-event' : ''} ${d > 0 ? '' : 'empty'} ${d === now.getDate() ? 'today' : ''} ${d === day && tableRowNum === rowIndex ? 'selected' : ''} ${isLastCol ? 'last-cell' : ''}`}
                                 key={"col" + i}
+                                data-overlay-id={`e-cal-tl-table__cell-tooltipwrapper-${idRes}`}
                                 data-index={colIndex-1}
                                 colSpan={1}
                                 data-date={getCalendarDate(_dateShow)}
@@ -970,6 +971,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                             <td
                                 className={`e-cal-tl-table__cell-cushion-content__container e-cal-tl-table__cell-tooltiptrigger ${_currentData.length > 0 ? 'has-event' : ''} ${d > 0 ? '' : 'empty'} ${d === now.getDate() ? 'today' : ''} ${d === day && tableRowNum === rowIndex ? 'selected' : ''} ${isLastCol ? 'last-cell' : ''}`}
                                 key={"col" + i}
+                                data-overlay-id={`e-cal-tl-table__cell-tooltipwrapper-${idRes}`}
                                 data-index={colIndex-1}
                                 colSpan={1}
                                 data-date={getCalendarDate(_dateShow)}

package/lib/esm/MultiFuncSelect/index.tsx

@@ -194,8 +194,11 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
         labels: [],
         values: []
     });
-    const multiSelControlOptionExist = (arr: any[], val: any) => arr.map((v: any) => v.toString()).includes(val.toString());
-
+    const multiSelControlOptionExist = (arr: any[], val: any) => {
+        const _data = arr.filter(Boolean);
+        return _data.map((v: any) => v.toString()).includes(val.toString());
+    };
+    
 
     // clean trigger
     const CLEAN_TRIGGER_VALID = typeof cleanTrigger === 'undefined' ? false : (cleanTrigger ? cleanTrigger.valid : false);
@@ -458,6 +461,8 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                 }
 
             } else {
+
+                // If the default value is label, match value
                 const filterResQueryValue = _ORGIN_DATA.filter((item: any) => item.value == defaultValue);
                 const filterResQueryLabel = _ORGIN_DATA.filter((item: any) => item.label == defaultValue);
 
@@ -589,6 +594,8 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
 
             // STEP 3: ===========
             // value & label must be initialized
+
+            // If the default value is label, match value
             let filterRes: any = [];
             const filterResQueryValue = optionsDataInit.filter((item: any) => item.value == defaultValue);
             const filterResQueryLabel = optionsDataInit.filter((item: any) => item.label == defaultValue);
@@ -1840,7 +1847,13 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
 
             {label ? <><div className="mf-select__label"><label htmlFor={`label-${idRes}`} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label></div></> : null}
 
-            <div id={`mf-select__wrapper-${idRes}`} className={`mf-select__wrapper ${wrapperClassName || wrapperClassName === '' ? wrapperClassName : 'mb-3 position-relative'} ${MULTI_SEL_VALID ? 'multiple-selection' : ''} ${isOpen ? 'active focus' : ''}`} ref={rootRef}>
+            <div 
+                data-overlay-id={`mf-select__options-wrapper-${idRes}`}
+                id={`mf-select__wrapper-${idRes}`} 
+                className={`mf-select__wrapper ${wrapperClassName || wrapperClassName === '' ? wrapperClassName : 'mb-3 position-relative'} ${MULTI_SEL_VALID ? 'multiple-selection' : ''} ${isOpen ? 'active focus' : ''}`} 
+                ref={rootRef}
+
+            >
 
 
                 {/* RESULT CONTAINER */}
@@ -1856,6 +1869,7 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                         }}
                         tabIndex={tabIndex || 0}
                         type="text"
+                        data-overlay-id={`mf-select__options-wrapper-${idRes}`}
                         id={`label-${idRes}`}
 
                         // Don't use "name", it's just a container to display the label

package/lib/esm/MultipleCheckboxes/index.tsx

@@ -112,7 +112,19 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, ref: any)
 
             const _val = VALUE_BY_BRACKETS ? extractContentsOfBrackets(defaultValue) : defaultValue.trim().replace(/^\,|\,$/g, '').split(',');
             if (Array.isArray(_val)) {
-                setValSelected(_val.filter((v: any) => v !== ''));
+             
+                // If the default value is label, match value
+                let _realValue: any[] = _val.filter((v: any) => v !== '');
+                let filterRes: any = [];
+                const filterResQueryValue = optionsRes.filter((item: any) => _val.includes(item.value));
+                const filterResQueryLabel = optionsRes.filter((item: any) => _val.includes(item.label));
+
+                filterRes = filterResQueryValue;
+                if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+                if (filterRes.length > 0) _realValue = filterRes.filter((v: any) => v.value !== '').map((k: any) => k.value);
+
+                //
+                setValSelected(_realValue);
             } else {
                 setValSelected([]);
             }
@@ -169,6 +181,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, ref: any)
                                                 >
                                                     <Checkbox
                                                         wrapperClassName=""
+                                                        name={`${name}-checkbox-item`}
                                                         data-index={`${index}-${optIndex}`}
                                                         data-label={opt.label}
                                                         data-list-item-label={`${typeof opt.listItemLabel === 'undefined' ? '' : opt.listItemLabel}`} 
@@ -228,6 +241,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, ref: any)
                                     >
                                         <Checkbox
                                             wrapperClassName=""
+                                            name={`${name}-checkbox-item`}
                                             data-index={index}
                                             data-label={item.label}
                                             data-list-item-label={`${typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel}`} 

package/lib/esm/MultipleSelect/index.scss

@@ -125,7 +125,8 @@
                 max-width: 100%;
                 overflow: hidden;
                 text-overflow: ellipsis;
-                word-break: break-all;
+                word-wrap: break-word;
+                word-break: break-word;
             }
 
             > strong {

package/lib/esm/MultipleSelect/index.tsx

@@ -113,7 +113,11 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, ref: any) => {
     const [hasErr, setHasErr] = useState<boolean>(false);
 
 
-    const multiSelControlOptionExist = (arr: any[], val: any) => arr.map((v: any) => v.toString()).includes(val.toString());
+    const multiSelControlOptionExist = (arr: any[], val: any) => {
+        const _data = arr.filter(Boolean);
+        return _data.map((v: any) => v.toString()).includes(val.toString());
+    };
+    
 
     async function fetchData(params: any) {
         

package/lib/esm/Radio/index.tsx

@@ -113,8 +113,21 @@ const Radio = (props: RadioProps) => {
                 _ORGIN_DATA = [];
             }
 
+
+                  
+            // If the default value is label, match value
+            let _realValue = value;
+            let filterRes: any = [];
+            const filterResQueryValue = _ORGIN_DATA.filter((item: any) => item.value == value);
+            const filterResQueryLabel = _ORGIN_DATA.filter((item: any) => item.label == value);
+
+            filterRes = filterResQueryValue;
+            if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+            if (filterRes.length > 0) _realValue = filterRes[0].value;
+            
+
             //
-            setControlValue(value); // value must be initialized
+            setControlValue(_realValue); // value must be initialized
 
 
             //
@@ -126,8 +139,22 @@ const Radio = (props: RadioProps) => {
             return _ORGIN_DATA;
         } else {
 
+
+                  
+            // If the default value is label, match value
+            let _realValue = value;
+            let filterRes: any = [];
+            const filterResQueryValue = optionsDataInit.filter((item: any) => item.value == value);
+            const filterResQueryLabel = optionsDataInit.filter((item: any) => item.label == value);
+
+            filterRes = filterResQueryValue;
+            if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+            if (filterRes.length > 0) _realValue = filterRes[0].value;
+
+
+
             //
-            setControlValue(value); // value must be initialized
+            setControlValue(_realValue); // value must be initialized
 
             //
             setDataInit(optionsDataInit); // data must be initialized

package/lib/esm/Textarea/index.tsx

@@ -140,7 +140,18 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
         // update default value
         //--------------
         if (typeof value !== 'undefined') {
-            setChangedVal(`${value}`);   // Avoid displaying the number 0
+            
+
+            if (value.length > 0 && autoSize) {
+                // Recalculate height if default value exceeds initial height
+                setChangedVal('');
+                setTimeout(() => {
+                    setChangedVal(`${value}`);
+                }, 0);
+            } else {
+                setChangedVal(`${value}`);   // Avoid displaying the number 0
+            }
+
         }
 
     }, [value]);    

package/lib/esm/Tooltip/index.tsx

@@ -157,6 +157,8 @@ const Tooltip = (props: TooltipProps) => {
         stopTimerHover();
         stopTimerMouseout();
         startTimerMouseout();
+
+        
     }
 
 
@@ -216,6 +218,7 @@ const Tooltip = (props: TooltipProps) => {
 
             <div
                 ref={rootRef}
+                data-overlay-id={`tooltip__wrapper-${idRes}`}
                 className="tooltip__trigger d-inline-block"
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}

package/lib/esm/Tree/index.scss

@@ -25,7 +25,8 @@
     justify-content: space-between;
     padding: 0.5rem 0;
     outline: none; /* When using "tabindex" please set */
-    word-break: break-all;
+    word-wrap: break-word;
+    word-break: break-word;
 
     ul, li {
         list-style: none;

package/package.json

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