funda-ui 1.1.144 → 1.1.147

package/EventCalendarTimeline/index.js

@@ -2465,7 +2465,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
         return _ref2.apply(this, arguments);
       };
     }()
-  }, modalContent)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, modalContent)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     ref: tableTooltipModalRef,
     id: "e-cal-tl-table__cell-tooltipwrapper-".concat(idRes),
     className: "e-cal-tl-table__cell-tooltipwrapper d-inline-block ".concat(isShowTableTooltip ? 'active' : ''),

package/LiveSearch/index.js

@@ -683,6 +683,10 @@ var LiveSearch = function LiveSearch(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     hasErr = _useState12[0],
     setHasErr = _useState12[1];
+  var _useState13 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    componentFirstLoad = _useState14[0],
+    setComponentFirstLoad = _useState14[1];
 
   //performance
   var handleChangeFetchSafe = utils_useDebounce(function (e) {
@@ -907,7 +911,7 @@ var LiveSearch = function LiveSearch(props) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
             if (!(_typeof(fetchFuncAsync) === 'object')) {
-              _context4.next = 12;
+              _context4.next = 13;
               break;
             }
             _context4.next = 3;
@@ -931,10 +935,18 @@ var LiveSearch = function LiveSearch(props) {
 
             //
             setDataInit(_ORGIN_DATA);
+
+            //
+            // window position
+            if (componentFirstLoad) {
+              setTimeout(function () {
+                getPlacement(listRef.current);
+              }, 500);
+            }
             return _context4.abrupt("return", _ORGIN_DATA);
-          case 12:
-            return _context4.abrupt("return", []);
           case 13:
+            return _context4.abrupt("return", []);
+          case 14:
           case "end":
             return _context4.stop();
         }
@@ -1072,6 +1084,12 @@ var LiveSearch = function LiveSearch(props) {
     });
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    // Component first load
+    //--------------
+    if (!componentFirstLoad) {
+      setComponentFirstLoad(true);
+    }
+
     // update default value
     //--------------
     setChangedVal(value || '');

package/MultiFuncSelect/index.js

@@ -863,20 +863,24 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     _useState18 = _slicedToArray(_useState17, 2),
     incomingData = _useState18[0],
     setIncomingData = _useState18[1];
+  var _useState19 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    componentFirstLoad = _useState20[0],
+    setComponentFirstLoad = _useState20[1];
 
   // Multiple selection
   var MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
-  var _useState19 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
+  var _useState21 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
       labels: [],
       values: []
     }),
-    _useState20 = _slicedToArray(_useState19, 2),
-    controlArr = _useState20[0],
-    setControlArr = _useState20[1];
-  var _useState21 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    itemSelectedAll = _useState22[0],
-    setItemSelectedAll = _useState22[1];
+    controlArr = _useState22[0],
+    setControlArr = _useState22[1];
+  var _useState23 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState24 = _slicedToArray(_useState23, 2),
+    itemSelectedAll = _useState24[0],
+    setItemSelectedAll = _useState24[1];
   var multiSelControlOptionExist = function multiSelControlOptionExist(arr, val) {
     return arr.map(function (v) {
       return v.toString();
@@ -1163,7 +1167,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
             incomingOptionsData = valueInputRef.current.dataset.options; // Determine whether the default value is user query input or default input
             defaultValue = init ? inputDefaultValue : '';
             if (!(_typeof(fetchFuncAsync) === 'object')) {
-              _context2.next = 22;
+              _context2.next = 23;
               break;
             }
             _context2.next = 6;
@@ -1294,9 +1298,18 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
             //
             onFetch === null || onFetch === void 0 ? void 0 : onFetch(selectInputRef.current, valueInputRef.current, defaultValue, _ORGIN_DATA, incomingData);
 
+            // STEP 7: ===========
+            //
+            // window position
+            if (componentFirstLoad) {
+              setTimeout(function () {
+                getPlacement(listRef.current);
+              }, 500);
+            }
+
             //
             return _context2.abrupt("return", _ORGIN_DATA);
-          case 22:
+          case 23:
             // STEP 1: ===========
             // get incoming options from `data-options` of component
             if (typeof incomingOptionsData !== 'undefined') {
@@ -1398,9 +1411,18 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
             //
             onFetch === null || onFetch === void 0 ? void 0 : onFetch(selectInputRef.current, valueInputRef.current, defaultValue, optionsDataInit, incomingData);
 
+            // STEP 7: ===========
+            //
+            // window position
+            if (componentFirstLoad) {
+              setTimeout(function () {
+                getPlacement(listRef.current);
+              }, 500);
+            }
+
             //
             return _context2.abrupt("return", optionsDataInit);
-          case 35:
+          case 37:
           case "end":
             return _context2.stop();
         }
@@ -1906,6 +1928,12 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     });
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    // Component first load
+    //--------------
+    if (!componentFirstLoad) {
+      setComponentFirstLoad(true);
+    }
+
     // Call a function when the component has been rendered completely
     //--------------
     onLoad === null || onLoad === void 0 ? void 0 : onLoad(selectInputRef.current, valueInputRef.current, value);

package/Tooltip/index.js

@@ -386,7 +386,7 @@ var Tooltip = function Tooltip(props) {
       (_document$querySelect = document.querySelector("#tooltip__wrapper-".concat(idRes))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.remove();
     };
   }, []);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     ref: modalRef,
     id: "tooltip__wrapper-".concat(idRes),
     className: "".concat(wrapperClassName || wrapperClassName === '' ? "tooltip__wrapper ".concat(wrapperClassName) : "tooltip__wrapper d-inline-block", " ").concat(isShow ? 'active' : ''),

package/lib/cjs/EventCalendarTimeline/index.js

@@ -2465,7 +2465,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
         return _ref2.apply(this, arguments);
       };
     }()
-  }, modalContent)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, modalContent)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     ref: tableTooltipModalRef,
     id: "e-cal-tl-table__cell-tooltipwrapper-".concat(idRes),
     className: "e-cal-tl-table__cell-tooltipwrapper d-inline-block ".concat(isShowTableTooltip ? 'active' : ''),

package/lib/cjs/LiveSearch/index.js

@@ -683,6 +683,10 @@ var LiveSearch = function LiveSearch(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     hasErr = _useState12[0],
     setHasErr = _useState12[1];
+  var _useState13 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    componentFirstLoad = _useState14[0],
+    setComponentFirstLoad = _useState14[1];
 
   //performance
   var handleChangeFetchSafe = utils_useDebounce(function (e) {
@@ -907,7 +911,7 @@ var LiveSearch = function LiveSearch(props) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
             if (!(_typeof(fetchFuncAsync) === 'object')) {
-              _context4.next = 12;
+              _context4.next = 13;
               break;
             }
             _context4.next = 3;
@@ -931,10 +935,18 @@ var LiveSearch = function LiveSearch(props) {
 
             //
             setDataInit(_ORGIN_DATA);
+
+            //
+            // window position
+            if (componentFirstLoad) {
+              setTimeout(function () {
+                getPlacement(listRef.current);
+              }, 500);
+            }
             return _context4.abrupt("return", _ORGIN_DATA);
-          case 12:
-            return _context4.abrupt("return", []);
           case 13:
+            return _context4.abrupt("return", []);
+          case 14:
           case "end":
             return _context4.stop();
         }
@@ -1072,6 +1084,12 @@ var LiveSearch = function LiveSearch(props) {
     });
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    // Component first load
+    //--------------
+    if (!componentFirstLoad) {
+      setComponentFirstLoad(true);
+    }
+
     // update default value
     //--------------
     setChangedVal(value || '');

package/lib/cjs/MultiFuncSelect/index.js

@@ -863,20 +863,24 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     _useState18 = _slicedToArray(_useState17, 2),
     incomingData = _useState18[0],
     setIncomingData = _useState18[1];
+  var _useState19 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    componentFirstLoad = _useState20[0],
+    setComponentFirstLoad = _useState20[1];
 
   // Multiple selection
   var MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
-  var _useState19 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
+  var _useState21 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
       labels: [],
       values: []
     }),
-    _useState20 = _slicedToArray(_useState19, 2),
-    controlArr = _useState20[0],
-    setControlArr = _useState20[1];
-  var _useState21 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    itemSelectedAll = _useState22[0],
-    setItemSelectedAll = _useState22[1];
+    controlArr = _useState22[0],
+    setControlArr = _useState22[1];
+  var _useState23 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState24 = _slicedToArray(_useState23, 2),
+    itemSelectedAll = _useState24[0],
+    setItemSelectedAll = _useState24[1];
   var multiSelControlOptionExist = function multiSelControlOptionExist(arr, val) {
     return arr.map(function (v) {
       return v.toString();
@@ -1163,7 +1167,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
             incomingOptionsData = valueInputRef.current.dataset.options; // Determine whether the default value is user query input or default input
             defaultValue = init ? inputDefaultValue : '';
             if (!(_typeof(fetchFuncAsync) === 'object')) {
-              _context2.next = 22;
+              _context2.next = 23;
               break;
             }
             _context2.next = 6;
@@ -1294,9 +1298,18 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
             //
             onFetch === null || onFetch === void 0 ? void 0 : onFetch(selectInputRef.current, valueInputRef.current, defaultValue, _ORGIN_DATA, incomingData);
 
+            // STEP 7: ===========
+            //
+            // window position
+            if (componentFirstLoad) {
+              setTimeout(function () {
+                getPlacement(listRef.current);
+              }, 500);
+            }
+
             //
             return _context2.abrupt("return", _ORGIN_DATA);
-          case 22:
+          case 23:
             // STEP 1: ===========
             // get incoming options from `data-options` of component
             if (typeof incomingOptionsData !== 'undefined') {
@@ -1398,9 +1411,18 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
             //
             onFetch === null || onFetch === void 0 ? void 0 : onFetch(selectInputRef.current, valueInputRef.current, defaultValue, optionsDataInit, incomingData);
 
+            // STEP 7: ===========
+            //
+            // window position
+            if (componentFirstLoad) {
+              setTimeout(function () {
+                getPlacement(listRef.current);
+              }, 500);
+            }
+
             //
             return _context2.abrupt("return", optionsDataInit);
-          case 35:
+          case 37:
           case "end":
             return _context2.stop();
         }
@@ -1906,6 +1928,12 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     });
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    // Component first load
+    //--------------
+    if (!componentFirstLoad) {
+      setComponentFirstLoad(true);
+    }
+
     // Call a function when the component has been rendered completely
     //--------------
     onLoad === null || onLoad === void 0 ? void 0 : onLoad(selectInputRef.current, valueInputRef.current, value);

package/lib/cjs/Tooltip/index.js

@@ -386,7 +386,7 @@ var Tooltip = function Tooltip(props) {
       (_document$querySelect = document.querySelector("#tooltip__wrapper-".concat(idRes))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.remove();
     };
   }, []);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     ref: modalRef,
     id: "tooltip__wrapper-".concat(idRes),
     className: "".concat(wrapperClassName || wrapperClassName === '' ? "tooltip__wrapper ".concat(wrapperClassName) : "tooltip__wrapper d-inline-block", " ").concat(isShow ? 'active' : ''),

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -1694,7 +1694,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             {/*//////////////////// Table Grid Tooltip //////////////////// */}
             {/*////////////////////////////////////////////////// */}
             {/* FIX: "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node" when using remove() */}
-            <div>
+            <span>
                 <div
                     ref={tableTooltipModalRef}
                     id={`e-cal-tl-table__cell-tooltipwrapper-${idRes}`}
@@ -1708,7 +1708,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                     </div>
                 </div>
 
-            </div>
+            </span>
 
 
 

package/lib/esm/LiveSearch/index.tsx

@@ -98,6 +98,7 @@ const LiveSearch = (props: LiveSearchProps) => {
     const [changedVal, setChangedVal] = useState<string>(value || '');
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const [hasErr, setHasErr] = useState<boolean>(false);
+    const [componentFirstLoad, setComponentFirstLoad] = useState<boolean>(false);
  
 
    //performance
@@ -345,6 +346,16 @@ const LiveSearch = (props: LiveSearchProps) => {
             
             //
             setDataInit(_ORGIN_DATA);
+
+
+            //
+            // window position
+            if (componentFirstLoad) {
+                setTimeout( ()=> {
+                    getPlacement(listRef.current);
+                }, 500 );  
+            } 
+
     
             return _ORGIN_DATA;
         } else {
@@ -486,6 +497,13 @@ const LiveSearch = (props: LiveSearchProps) => {
 
     useEffect(() => {
 
+        // Component first load
+        //--------------
+        if (!componentFirstLoad) {
+            setComponentFirstLoad(true);
+        }
+        
+
         // update default value
         //--------------
         setChangedVal(value || '');

package/lib/esm/MultiFuncSelect/index.tsx

@@ -169,6 +169,7 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const [listContentHeight, setListContentHeight] = useState<number>(0);
     const [incomingData, setIncomingData] = useState<string | null | undefined>(null);
+    const [componentFirstLoad, setComponentFirstLoad] = useState<boolean>(false);
 
 
     // Multiple selection
@@ -675,7 +676,18 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
             //
             onFetch?.(selectInputRef.current, valueInputRef.current, defaultValue, _ORGIN_DATA, incomingData);
 
-        
+
+            // STEP 7: ===========
+            //
+            // window position
+            if (componentFirstLoad) {
+                setTimeout( ()=> {
+                    getPlacement(listRef.current);
+                }, 500 );  
+            }
+
+
+
             //
             return _ORGIN_DATA;
 
@@ -797,6 +809,15 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
             //
             onFetch?.(selectInputRef.current, valueInputRef.current, defaultValue, optionsDataInit, incomingData);
 
+            // STEP 7: ===========
+            //
+            // window position
+            if (componentFirstLoad) {
+                setTimeout( ()=> {
+                    getPlacement(listRef.current);
+                }, 500 );  
+            }
+
             //
             return optionsDataInit;
         }
@@ -1346,6 +1367,12 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
 
     useEffect(() => {
 
+        
+        // Component first load
+        //--------------
+        if (!componentFirstLoad) {
+            setComponentFirstLoad(true);
+        }
 
         // Call a function when the component has been rendered completely
         //--------------

package/lib/esm/Tooltip/index.tsx

@@ -200,7 +200,7 @@ const Tooltip = (props: TooltipProps) => {
         <>
 
             {/* FIX: "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node" when using remove() */}
-            <div>
+            <span>
                 <div
                     ref={modalRef}
                     id={`tooltip__wrapper-${idRes}`}
@@ -211,7 +211,7 @@ const Tooltip = (props: TooltipProps) => {
                 >
                     <div className="tooltip__content">{content}</div>
                 </div>
-            </div>
+            </span>
 
 
             <div

package/package.json

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