funda-ui 1.2.115 → 1.2.117

package/CascadingSelectE2E/index.js

@@ -610,22 +610,6 @@ var CascadingSelectE2E = function CascadingSelectE2E(props) {
     selectedDataByClick = _useState26[0],
     setSelectedDataByClick = _useState26[1];
 
-  /**
-   * Format indent value
-   * @param {String|Array} str 
-   * @returns {String|Array}
-   */
-  function formatIndentVal(str, indentLastPlaceholder) {
-    var reVar = new RegExp(indentLastPlaceholder, 'g');
-    if (Array.isArray(str)) {
-      return str.map(function (s) {
-        return s.replace(reVar, '').replace(/\ /ig, '');
-      });
-    } else {
-      return str.replace(reVar, '').replace(/\ /ig, '');
-    }
-  }
-
   /**
    * Check if an element is in the viewport
    * @param {HTMLElement} elem 

package/MultiFuncSelect/index.js

@@ -963,6 +963,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   var idRes = id || uniqueID;
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var rootSingleRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var rootMultiRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var selectInputRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var valueInputRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var listRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -1082,10 +1083,11 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     var reVar = new RegExp(INDENT_LAST_PLACEHOLDER, 'g');
     if (Array.isArray(inputData)) {
       return inputData.map(function (s) {
-        return s.replace(reVar, '').replace(/\ /ig, '');
+        return String(s).replace(reVar, '').replace(/\ /ig, '');
       });
     } else {
-      return inputData.replace(reVar, '').replace(/\ /ig, '');
+      var _txt = typeof inputData === 'string' ? inputData : inputData.toString();
+      return _txt.replace(reVar, '').replace(/\ /ig, '');
     }
   }
 
@@ -1100,11 +1102,11 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
 
   /**
    * Remove html tag content
-   * @param {string} str 
+   * @param {string | number} str 
    * @returns {string}
    */
   function stripHTML(str) {
-    return str.replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
+    return String(str).replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
   }
 
   /**
@@ -1321,6 +1323,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
                 });
               }
 
+              // Appropriate multi-item container height
+              adjustMultiControlContainerHeight();
+
               // hide disabled item
               _ORGIN_DATA = _ORGIN_DATA.filter(function (v) {
                 return typeof v.disabled !== 'undefined' && v.disabled == true ? false : true;
@@ -1426,6 +1431,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
                 });
               }
 
+              // Appropriate multi-item container height
+              adjustMultiControlContainerHeight();
+
               // hide disabled item
               optionsDataInit = optionsDataInit.filter(function (v) {
                 return typeof v.disabled !== 'undefined' && v.disabled == true ? false : true;
@@ -1453,6 +1461,21 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     }));
     return _fetchData.apply(this, arguments);
   }
+  function adjustMultiControlContainerHeight() {
+    setTimeout(function () {
+      // Sometimes you may get 0, you need to judge
+      if (rootMultiRef.current.clientHeight > 0) {
+        rootSingleRef.current.style.height = rootMultiRef.current.clientHeight + 'px';
+        selectInputRef.current.style.height = rootMultiRef.current.clientHeight + 'px';
+      }
+
+      // popwin position update
+      var _modalRef = document.querySelector("#mf-select__options-wrapper-".concat(idRes));
+      if (MULTI_SEL_VALID && _modalRef.classList.contains('active')) {
+        popwinPosInit();
+      }
+    }, 0);
+  }
   function popwinPosInit() {
     if (listContentRef.current === null || selectInputRef.current === null) return;
     var contentHeightOffset = 80;
@@ -1889,6 +1912,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
                   currentControlValueArr.push(_value);
                   currentControlLabelArr.push(_label);
                 }
+
+                // Appropriate multi-item container height
+                adjustMultiControlContainerHeight();
               }
 
               //
@@ -1977,6 +2003,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
                   _currentControlValueArr.push(_value2);
                   _currentControlLabelArr.push(_label2);
                 }
+
+                // Appropriate multi-item container height
+                adjustMultiControlContainerHeight();
               }
 
               //
@@ -2054,6 +2083,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         labels: _labels,
         values: _values
       });
+
+      // Appropriate multi-item container height
+      adjustMultiControlContainerHeight();
     };
     if (selectedSign) {
       updateOptionCheckboxes('remove');
@@ -2100,6 +2132,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     currentControlValueArr = removeItemOnce(currentControlValueArr, _value);
     currentControlLabelArr = removeItemOnce(currentControlLabelArr, formatIndentVal(_label));
 
+    // Appropriate multi-item container height
+    adjustMultiControlContainerHeight();
+
     //
     if (typeof onChange === 'function') {
       onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, {
@@ -2520,6 +2555,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     d: "M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z",
     fillRule: "evenodd"
   }))))) : null) : null, MULTI_SEL_VALID ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    ref: rootMultiRef,
     className: "mf-select-multi__inputplaceholder-wrapper"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "mf-select-multi__inputplaceholder-inner"

package/lib/cjs/CascadingSelectE2E/index.js

@@ -610,22 +610,6 @@ var CascadingSelectE2E = function CascadingSelectE2E(props) {
     selectedDataByClick = _useState26[0],
     setSelectedDataByClick = _useState26[1];
 
-  /**
-   * Format indent value
-   * @param {String|Array} str 
-   * @returns {String|Array}
-   */
-  function formatIndentVal(str, indentLastPlaceholder) {
-    var reVar = new RegExp(indentLastPlaceholder, 'g');
-    if (Array.isArray(str)) {
-      return str.map(function (s) {
-        return s.replace(reVar, '').replace(/\ /ig, '');
-      });
-    } else {
-      return str.replace(reVar, '').replace(/\ /ig, '');
-    }
-  }
-
   /**
    * Check if an element is in the viewport
    * @param {HTMLElement} elem 

package/lib/cjs/MultiFuncSelect/index.js

@@ -963,6 +963,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
   var idRes = id || uniqueID;
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var rootSingleRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var rootMultiRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var selectInputRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var valueInputRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var listRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -1082,10 +1083,11 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     var reVar = new RegExp(INDENT_LAST_PLACEHOLDER, 'g');
     if (Array.isArray(inputData)) {
       return inputData.map(function (s) {
-        return s.replace(reVar, '').replace(/\ /ig, '');
+        return String(s).replace(reVar, '').replace(/\ /ig, '');
       });
     } else {
-      return inputData.replace(reVar, '').replace(/\ /ig, '');
+      var _txt = typeof inputData === 'string' ? inputData : inputData.toString();
+      return _txt.replace(reVar, '').replace(/\ /ig, '');
     }
   }
 
@@ -1100,11 +1102,11 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
 
   /**
    * Remove html tag content
-   * @param {string} str 
+   * @param {string | number} str 
    * @returns {string}
    */
   function stripHTML(str) {
-    return str.replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
+    return String(str).replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
   }
 
   /**
@@ -1321,6 +1323,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
                 });
               }
 
+              // Appropriate multi-item container height
+              adjustMultiControlContainerHeight();
+
               // hide disabled item
               _ORGIN_DATA = _ORGIN_DATA.filter(function (v) {
                 return typeof v.disabled !== 'undefined' && v.disabled == true ? false : true;
@@ -1426,6 +1431,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
                 });
               }
 
+              // Appropriate multi-item container height
+              adjustMultiControlContainerHeight();
+
               // hide disabled item
               optionsDataInit = optionsDataInit.filter(function (v) {
                 return typeof v.disabled !== 'undefined' && v.disabled == true ? false : true;
@@ -1453,6 +1461,21 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     }));
     return _fetchData.apply(this, arguments);
   }
+  function adjustMultiControlContainerHeight() {
+    setTimeout(function () {
+      // Sometimes you may get 0, you need to judge
+      if (rootMultiRef.current.clientHeight > 0) {
+        rootSingleRef.current.style.height = rootMultiRef.current.clientHeight + 'px';
+        selectInputRef.current.style.height = rootMultiRef.current.clientHeight + 'px';
+      }
+
+      // popwin position update
+      var _modalRef = document.querySelector("#mf-select__options-wrapper-".concat(idRes));
+      if (MULTI_SEL_VALID && _modalRef.classList.contains('active')) {
+        popwinPosInit();
+      }
+    }, 0);
+  }
   function popwinPosInit() {
     if (listContentRef.current === null || selectInputRef.current === null) return;
     var contentHeightOffset = 80;
@@ -1889,6 +1912,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
                   currentControlValueArr.push(_value);
                   currentControlLabelArr.push(_label);
                 }
+
+                // Appropriate multi-item container height
+                adjustMultiControlContainerHeight();
               }
 
               //
@@ -1977,6 +2003,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
                   _currentControlValueArr.push(_value2);
                   _currentControlLabelArr.push(_label2);
                 }
+
+                // Appropriate multi-item container height
+                adjustMultiControlContainerHeight();
               }
 
               //
@@ -2054,6 +2083,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         labels: _labels,
         values: _values
       });
+
+      // Appropriate multi-item container height
+      adjustMultiControlContainerHeight();
     };
     if (selectedSign) {
       updateOptionCheckboxes('remove');
@@ -2100,6 +2132,9 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     currentControlValueArr = removeItemOnce(currentControlValueArr, _value);
     currentControlLabelArr = removeItemOnce(currentControlLabelArr, formatIndentVal(_label));
 
+    // Appropriate multi-item container height
+    adjustMultiControlContainerHeight();
+
     //
     if (typeof onChange === 'function') {
       onChange === null || onChange === void 0 ? void 0 : onChange(selectInputRef.current, valueInputRef.current, {
@@ -2520,6 +2555,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     d: "M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z",
     fillRule: "evenodd"
   }))))) : null) : null, MULTI_SEL_VALID ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    ref: rootMultiRef,
     className: "mf-select-multi__inputplaceholder-wrapper"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "mf-select-multi__inputplaceholder-inner"

package/lib/esm/CascadingSelectE2E/index.tsx

@@ -167,22 +167,6 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
         queryIds: []
     });
 
-    /**
-     * Format indent value
-     * @param {String|Array} str 
-     * @returns {String|Array}
-     */
-    function formatIndentVal(str: any, indentLastPlaceholder: string) {
-        const reVar = new RegExp(indentLastPlaceholder, 'g');
-        if (Array.isArray(str)) {
-            return str.map((s: string) => s.replace(reVar, '').replace(/\ /ig, ''));
-        } else {
-            return str.replace(reVar, '').replace(/\ /ig, '');
-        }
-
-    }
-
-
 
     /**
      * Check if an element is in the viewport

package/lib/esm/MultiFuncSelect/index.tsx

@@ -162,6 +162,7 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
     const rootSingleRef = useRef<any>(null);
+    const rootMultiRef = useRef<any>(null);
     const selectInputRef = useRef<any>(null);
     const valueInputRef = useRef<any>(null);
     const listRef = useRef<any>(null);
@@ -272,9 +273,10 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
     function formatIndentVal(inputData: any) {
         const reVar = new RegExp(INDENT_LAST_PLACEHOLDER, 'g');
         if (Array.isArray(inputData)) {
-            return inputData.map((s: string) => s.replace(reVar, '').replace(/\&nbsp;/ig, ''));
+            return inputData.map((s: any) => String(s).replace(reVar, '').replace(/\&nbsp;/ig, ''));
         } else {
-            return inputData.replace(reVar, '').replace(/\&nbsp;/ig, '');
+            const _txt: any = typeof inputData === 'string' ? inputData : inputData.toString();
+            return _txt.replace(reVar, '').replace(/\&nbsp;/ig, '');
         }
 
     }
@@ -292,11 +294,11 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
 
     /**
      * Remove html tag content
-     * @param {string} str 
+     * @param {string | number} str 
      * @returns {string}
      */
-    function stripHTML(str: string) {
-        return str.replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
+    function stripHTML(str: string | number) {
+        return String(str).replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
     }
 
 
@@ -533,11 +535,13 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
 
                 }
 
-
+                // Appropriate multi-item container height
+                adjustMultiControlContainerHeight();
 
                 // hide disabled item
                 _ORGIN_DATA = _ORGIN_DATA.filter((v: any) => typeof v.disabled !== 'undefined' && v.disabled == true ? false : true);
 
+                
 
 
             }
@@ -658,6 +662,9 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                     });
                 }
 
+                // Appropriate multi-item container height
+                adjustMultiControlContainerHeight();
+
 
                 // hide disabled item
                 optionsDataInit = optionsDataInit.filter((v: any) => typeof v.disabled !== 'undefined' && v.disabled == true ? false : true);
@@ -684,6 +691,28 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
 
     }
 
+
+
+    function adjustMultiControlContainerHeight() {
+        setTimeout(() => {
+            // Sometimes you may get 0, you need to judge
+            if (rootMultiRef.current.clientHeight > 0) {
+                rootSingleRef.current.style.height = rootMultiRef.current.clientHeight + 'px';
+                selectInputRef.current.style.height = rootMultiRef.current.clientHeight + 'px';
+            }
+
+            // popwin position update
+            const _modalRef: any = document.querySelector(`#mf-select__options-wrapper-${idRes}`);
+            if (MULTI_SEL_VALID && _modalRef.classList.contains('active')) {
+                popwinPosInit();
+            }
+            
+            
+        },0);              
+    }
+
+
+
     function popwinPosInit() {
         if (listContentRef.current === null || selectInputRef.current === null) return;
 
@@ -1224,6 +1253,8 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                 }
 
 
+                // Appropriate multi-item container height
+                adjustMultiControlContainerHeight();
 
 
             }
@@ -1334,6 +1365,9 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                 }
 
 
+                // Appropriate multi-item container height
+                adjustMultiControlContainerHeight();
+
 
             }
 
@@ -1411,6 +1445,12 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                 values: _values
             });
 
+
+
+            // Appropriate multi-item container height
+            adjustMultiControlContainerHeight();
+
+
         };
 
 
@@ -1475,6 +1515,9 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
         currentControlLabelArr = removeItemOnce(currentControlLabelArr, formatIndentVal(_label));
 
 
+        // Appropriate multi-item container height
+        adjustMultiControlContainerHeight();
+
 
         //
         if (typeof (onChange) === 'function') {
@@ -1485,7 +1528,7 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                 {
                     labels: currentControlLabelArr.map((v: any) => v.toString()),
                     values: currentControlValueArr.map((v: any) => v.toString()),
-                    labelsOfString: VALUE_BY_BRACKETS ? convertArrToValByBrackets(currentControlLabelArr.map((v: any) => v.toString())) : currentControlLabelArr.map((v: any) => v.toString()).join(','),
+                    labelsOfString: VALUE_BY_BRACKETS ? convertArrToValByBrackets(currentControlLabelArr.map((v: any) => v.toString())) : currentControlLabelArr.map((v: any) =>     v.toString()).join(','),
                     valuesOfString: VALUE_BY_BRACKETS ? convertArrToValByBrackets(currentControlValueArr.map((v: any) => v.toString())) : currentControlValueArr.map((v: any) => v.toString()).join(',')
                 }
             );
@@ -1931,7 +1974,7 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                 // Multiple selection Control
                 // ++++++++++++++++++++
                 */}
-                {MULTI_SEL_VALID ? <div className="mf-select-multi__inputplaceholder-wrapper">
+                {MULTI_SEL_VALID ? <div ref={rootMultiRef} className="mf-select-multi__inputplaceholder-wrapper">
 
 
                     {/* PLACEHOLDER */}

package/package.json

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