funda-ui 4.7.152 → 4.7.161

package/lib/cjs/Select/index.js

@@ -171,7 +171,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         var RootPortal = function RootPortal(props) {
           var containerClassName = props.containerClassName,
             show = props.show,
-            children = props.children;
+            children = props.children,
+            _props$usePortal = props.usePortal,
+            usePortal = _props$usePortal === void 0 ? true : _props$usePortal;
           var containerRef = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
 
           // Move HTML templates to tag end body </body>
@@ -182,15 +184,20 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
 
           (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-            containerRef.current = document.createElement('div');
-            containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
-            document.body.appendChild(containerRef.current);
+            if (usePortal) {
+              containerRef.current = document.createElement('div');
+              containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
+              document.body.appendChild(containerRef.current);
+            }
             return function () {
-              if (containerRef.current) {
+              if (usePortal && containerRef.current) {
                 containerRef.current.remove();
               }
             };
-          }, []);
+          }, [usePortal]);
+          if (!usePortal) {
+            return show ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, children) : null;
+          }
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, containerRef.current && show && /*#__PURE__*/(0, react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, containerRef.current));
         };
         /* harmony default export */
@@ -3778,7 +3785,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     firstRequestAutoExec = props.firstRequestAutoExec,
     fetchTrigger = props.fetchTrigger,
     fetchTriggerForDefaultData = props.fetchTriggerForDefaultData,
-    fetchNoneInfo = props.fetchNoneInfo,
+    _props$fetchNoneInfo = props.fetchNoneInfo,
+    fetchNoneInfo = _props$fetchNoneInfo === void 0 ? 'No match yet' : _props$fetchNoneInfo,
     fetchUpdate = props.fetchUpdate,
     fetchFuncAsync = props.fetchFuncAsync,
     fetchFuncMethod = props.fetchFuncMethod,
@@ -3851,7 +3859,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   var _useState11 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(null),
     _useState12 = _slicedToArray(_useState11, 2),
     controlTempValue = _useState12[0],
-    setControlTempValue = _useState12[1];
+    setControlTempValue = _useState12[1]; // Storage for temporary input
   var _useState13 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState14 = _slicedToArray(_useState13, 2),
     isOpen = _useState14[0],
@@ -3869,6 +3877,11 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     handleFirstFetchCompleted = _useState20[0],
     setHandleFirstFetchCompleted = _useState20[1];
 
+  // Mark whether it is out of focus
+  // Fixed the issue that caused the pop-up window to still display due to 
+  // the delayed close in handleBlur and the timing of the call to popwinPosInit
+  var isBlurringRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
+
   // filter status
   var _useState21 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState22 = _slicedToArray(_useState21, 2),
@@ -4090,7 +4103,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   function _fetchData() {
     _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params, valueToInputDefault, inputDefault) {
       var init,
-        incomingOptionsData,
         defaultValue,
         response,
         _ORGIN_DATA,
@@ -4109,17 +4121,15 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         while (1) switch (_context.prev = _context.next) {
           case 0:
             init = _args.length > 3 && _args[3] !== undefined ? _args[3] : true;
-            // get incoming options from `data-options` of component
-            // It is usually used for complex cascading `<Select />` components
-            incomingOptionsData = valueInputRef.current.dataset.options; // Determine whether the default value is user query input or default input
+            // Determine whether the default value is user query input or default input
             defaultValue = init ? valueToInputDefault : '';
             if (!(_typeof(fetchFuncAsync) === 'object')) {
-              _context.next = 25;
+              _context.next = 23;
               break;
             }
-            _context.next = 6;
+            _context.next = 5;
             return fetchFuncAsync["".concat(fetchFuncMethod)].apply(fetchFuncAsync, _toConsumableArray(params.split(',')));
-          case 6:
+          case 5:
             response = _context.sent;
             _ORGIN_DATA = response.data; // reset data structure
             if (typeof fetchCallback === 'function') {
@@ -4134,26 +4144,17 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             }
 
             // STEP 1: ===========
-            // get incoming options from `data-options` of component
-            if (typeof incomingOptionsData !== 'undefined') {
-              _ORGIN_DATA = JSON.parse(incomingOptionsData);
-
-              // set value if the attribute `data-options` of component exists, only valid for single selection (it may be an empty array)
-              if (typeof defaultValue !== 'undefined' && defaultValue !== '') valueInputRef.current.dataset.value = defaultValue;
-            }
-
-            // STEP 2: ===========
             // Set hierarchical categories ( with sub-categories )
             if (hierarchical) {
               _ORGIN_DATA = (0,tree.addTreeDepth)(_ORGIN_DATA);
               (0,tree.addTreeIndent)(_ORGIN_DATA, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
             }
 
-            // STEP 3: ===========
+            // STEP 2: ===========
             // Flatten the group
             _ORGIN_DATA = optionsCustomSelectFlat(_ORGIN_DATA);
 
-            // STEP 4: ===========
+            // STEP 3: ===========
             // value & label must be initialized
             filterRes = [];
             if (MANUAL_REQ) {
@@ -4182,7 +4183,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
               }
             }
 
-            // STEP 5: ===========
+            // STEP 4: ===========
             // ++++++++++++++++++++
             // Single selection
             // ++++++++++++++++++++
@@ -4250,7 +4251,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
               });
             }
 
-            // STEP 6: ===========
+            // STEP 5: ===========
             //
             // remove Duplicate objects from JSON Array
             optionsFormatGroupOpt(_ORGIN_DATA); // prevent the value from being filtered out
@@ -4260,34 +4261,25 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             //
             setOrginalData(_ORGIN_DATA);
 
-            // STEP 7: ===========
+            // STEP 6: ===========
             //
             onFetch === null || onFetch === void 0 ? void 0 : onFetch(selectInputRef.current, valueInputRef.current, defaultValue, _ORGIN_DATA, incomingData);
 
             //
             return _context.abrupt("return", _ORGIN_DATA);
-          case 25:
+          case 23:
             // STEP 1: ===========
-            // get incoming options from `data-options` of component
-            if (typeof incomingOptionsData !== 'undefined') {
-              staticOptionsData = JSON.parse(incomingOptionsData);
-
-              // set value if the attribute `data-options` of component exists, only valid for single selection (it may be an empty array)
-              if (typeof defaultValue !== 'undefined' && defaultValue !== '') valueInputRef.current.dataset.value = defaultValue;
-            }
-
-            // STEP 2: ===========
             // Set hierarchical categories ( with sub-categories )
             if (hierarchical) {
               staticOptionsData = (0,tree.addTreeDepth)(staticOptionsData);
               (0,tree.addTreeIndent)(staticOptionsData, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
             }
 
-            // STEP 3: ===========
+            // STEP 2: ===========
             // Flatten the group
             staticOptionsData = optionsCustomSelectFlat(staticOptionsData);
 
-            // STEP 4: ===========
+            // STEP 3: ===========
             // value & label must be initialized
 
             // If the default value is label, match value
@@ -4306,7 +4298,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
               _filterRes3 = [inputDefault];
             }
 
-            // STEP 5: ===========
+            // STEP 4: ===========
             // ++++++++++++++++++++
             // Single selection
             // ++++++++++++++++++++
@@ -4374,7 +4366,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
               });
             }
 
-            // STEP 6: ===========
+            // STEP 5: ===========
             //
             // remove Duplicate objects from JSON Array
             optionsFormatGroupOpt(staticOptionsData); // prevent the value from being filtered out
@@ -4384,13 +4376,13 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             //
             setOrginalData(staticOptionsData);
 
-            // STEP 7: ===========
+            // STEP 6: ===========
             //
             onFetch === null || onFetch === void 0 ? void 0 : onFetch(selectInputRef.current, valueInputRef.current, defaultValue, staticOptionsData, incomingData);
 
             //
             return _context.abrupt("return", staticOptionsData);
-          case 42:
+          case 39:
           case "end":
             return _context.stop();
         }
@@ -4428,6 +4420,11 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   function popwinPosInit() {
     var scrollbarInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     if (listContentRef.current === null || rootRef.current === null || selectInputRef.current === null) return;
+
+    // If it is out of focus, do not perform position initialization
+    if (isBlurringRef.current) return;
+
+    //
     var contentHeightOffset = 80;
     var contentMaxHeight = 0;
 
@@ -4593,7 +4590,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   }
   function popwinFilterItems(val) {
     if (listContentRef.current === null) return;
-    var invisibleItems = 0;
     [].slice.call(listContentRef.current.querySelectorAll('.custom-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 : '';
@@ -4750,6 +4746,13 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       selectInputRef.current.select();
     }
 
+    // Every time the input changes or the search button is clicked, a data request will be triggered
+    if (MANUAL_REQ && (controlTempValue === '' || controlTempValue === null)) {
+      setTimeout(function () {
+        popwinPosHide();
+      }, 0);
+    }
+
     // update temporary value
     setControlTempValue('');
 
@@ -4773,7 +4776,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         valueArr,
         labelArr,
         curItem,
-        incominggetOptionsData,
         options,
         curBtn,
         noCallback,
@@ -4808,9 +4810,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
             }
             return _context2.abrupt("return");
           case 5:
-            curItem = el === null ? isObject(dataInput) ? dataInput : JSON.parse(dataInput) : optionsData[Number(el.currentTarget.dataset.index)]; // get incoming options from `data-options` of component
-            // It is usually used for complex cascading `<Select />` components
-            incominggetOptionsData = valueInputRef.current.dataset.options; // get options
+            curItem = el === null ? isObject(dataInput) ? dataInput : JSON.parse(dataInput) : optionsData[Number(el.currentTarget.dataset.index)]; // get options
             options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide):not(.no-match)')); // current control of some option
             curBtn = options.filter(function (node) {
               return node.dataset.itemdata == JSON.stringify(curItem);
@@ -4864,11 +4864,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
               setControlValue(_value);
               setControlLabel(formatIndentVal(_label, INDENT_LAST_PLACEHOLDER));
 
-              // set value if the attribute `data-options` of component exists, only valid for single selection (it may be an empty array)
-              if (typeof incominggetOptionsData !== 'undefined') {
-                valueInputRef.current.dataset.value = _value;
-              }
-
               // ++++++++++++++++++++
               // Multiple selection
               // ++++++++++++++++++++
@@ -4970,11 +4965,6 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
               setControlValue(_value2);
               setControlLabel(formatIndentVal(_label2, INDENT_LAST_PLACEHOLDER));
 
-              // set value if the attribute `data-options` of component exists, only valid for single selection (it may be an empty array)
-              if (typeof incominggetOptionsData !== 'undefined') {
-                valueInputRef.current.dataset.value = _value2;
-              }
-
               // ++++++++++++++++++++
               // Multiple selection
               // ++++++++++++++++++++
@@ -5048,7 +5038,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
             // Fixed an out-of-focus issue
             fixFocusStatus();
-          case 13:
+          case 12:
           case "end":
             return _context2.stop();
         }
@@ -5199,6 +5189,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     }
   }
   function handleShowList() {
+    // Reset the out-of-focus marker
+    isBlurringRef.current = false;
+
     //
     if (!isOpen) {
       activate();
@@ -5255,18 +5248,25 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
             inputVal = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : null;
+            if (!MANUAL_REQ) {
+              _context4.next = 3;
+              break;
+            }
+            return _context4.abrupt("return", []);
+          case 3:
+            //
             _oparams = fetchFuncMethodParams || [];
             _params = _oparams.map(function (item) {
               return item !== '$QUERY_STRING' ? item : MANUAL_REQ ? QUERY_STRING_PLACEHOLDER : '';
             });
-            _context4.next = 5;
+            _context4.next = 7;
             return fetchData(_params.join(','), finalRes(inputVal), inputVal);
-          case 5:
+          case 7:
             res = _context4.sent;
             // Set an identifier indicating that the first request has been completed
             if (!handleFirstFetchCompleted) setHandleFirstFetchCompleted(true);
             return _context4.abrupt("return", res);
-          case 8:
+          case 10:
           case "end":
             return _context4.stop();
         }
@@ -5294,6 +5294,11 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
     // Fixed an out-of-focus issue
     fixFocusStatus();
+
+    // Every time the input changes or the search button is clicked, a data request will be triggered
+    if (MANUAL_REQ && val !== '') {
+      popwinPosInit();
+    }
   }
 
   //
@@ -5301,14 +5306,14 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     var _rootRef$current;
     (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
 
-    // update temporary value
-    setControlTempValue('');
-
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(selectInputRef.current);
   }
   function handleBlur(event) {
     var _rootRef$current2;
+    // Set the out-of-focus marker
+    isBlurringRef.current = true;
+
     // Fix the focus issue with using the "Tabs" and "Enter" keys
     //
     //
@@ -5667,6 +5672,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     type: "button",
     className: "btn border-end-0 rounded-pill",
     onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
       handleFetch().then(function (response) {
         // pop win initalization
         setTimeout(function () {
@@ -5693,10 +5700,10 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       pointerEvents: 'auto',
       cursor: 'pointer'
     } : undefined,
-    onClick: MULTI_SEL_ENTIRE_AREA_TRIGGER ? typeof readOnly === 'undefined' || !readOnly ? handleShowList : function () {
-      return void 0;
-    } : function () {
-      return void 0;
+    onClick: function onClick(e) {
+      if (MULTI_SEL_ENTIRE_AREA_TRIGGER) {
+        if (typeof readOnly === 'undefined' || !readOnly) handleShowList();
+      }
     }
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("ul", {
     className: "custom-select-multi__list"
@@ -5790,6 +5797,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     type: "button",
     className: "btn border-end-0 rounded-pill",
     onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
       handleFetch().then(function (response) {
         // pop win initalization
         setTimeout(function () {
@@ -5894,7 +5903,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
     fill: "inherit",
     d: "M437.026,134.798c16.52-16.52,16.52-43.304,0-59.824c-16.519-16.511-43.304-16.52-59.823,0c-16.52,16.52-16.503,43.295,0,59.815C393.722,151.309,420.507,151.309,437.026,134.798z"
-  }))))) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, fetchNoneInfo || 'No match yet')), optionsData ? optionsData.map(function (item, index) {
+  }))))) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, fetchNoneInfo)), optionsData ? optionsData.map(function (item, index) {
     var startItemBorder = index === 0 ? 'border-top-0' : '';
     var endItemBorder = index === optionsData.length - 1 ? 'border-bottom-0' : '';
 

package/lib/cjs/Toast/index.js

@@ -171,7 +171,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         var RootPortal = function RootPortal(props) {
           var containerClassName = props.containerClassName,
             show = props.show,
-            children = props.children;
+            children = props.children,
+            _props$usePortal = props.usePortal,
+            usePortal = _props$usePortal === void 0 ? true : _props$usePortal;
           var containerRef = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
 
           // Move HTML templates to tag end body </body>
@@ -182,15 +184,20 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
 
           (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-            containerRef.current = document.createElement('div');
-            containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
-            document.body.appendChild(containerRef.current);
+            if (usePortal) {
+              containerRef.current = document.createElement('div');
+              containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
+              document.body.appendChild(containerRef.current);
+            }
             return function () {
-              if (containerRef.current) {
+              if (usePortal && containerRef.current) {
                 containerRef.current.remove();
               }
             };
-          }, []);
+          }, [usePortal]);
+          if (!usePortal) {
+            return show ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, children) : null;
+          }
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, containerRef.current && show && /*#__PURE__*/(0, react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, containerRef.current));
         };
         /* harmony default export */

package/lib/cjs/Tooltip/index.js

@@ -171,7 +171,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         var RootPortal = function RootPortal(props) {
           var containerClassName = props.containerClassName,
             show = props.show,
-            children = props.children;
+            children = props.children,
+            _props$usePortal = props.usePortal,
+            usePortal = _props$usePortal === void 0 ? true : _props$usePortal;
           var containerRef = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
 
           // Move HTML templates to tag end body </body>
@@ -182,15 +184,20 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
 
           (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-            containerRef.current = document.createElement('div');
-            containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
-            document.body.appendChild(containerRef.current);
+            if (usePortal) {
+              containerRef.current = document.createElement('div');
+              containerRef.current.className = "root-portal-container ".concat(containerClassName || '');
+              document.body.appendChild(containerRef.current);
+            }
             return function () {
-              if (containerRef.current) {
+              if (usePortal && containerRef.current) {
                 containerRef.current.remove();
               }
             };
-          }, []);
+          }, [usePortal]);
+          if (!usePortal) {
+            return show ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, children) : null;
+          }
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, containerRef.current && show && /*#__PURE__*/(0, react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(children, containerRef.current));
         };
         /* harmony default export */

package/lib/css/Chatbox/index.css

@@ -154,6 +154,7 @@
   right: 0;
   z-index: 1031;
   height: var(--custom-chatbox-h);
+  /* disable popup */
   /* message list */
   /* dot loading */
   /* control area */
@@ -164,6 +165,12 @@
   /* default questions */
   /* Tooltip */
 }
+.custom-chatbox-container.popup-none {
+  position: relative;
+  bottom: auto;
+  right: auto;
+  box-shadow: none;
+}
 .custom-chatbox-container details {
   font-style: italic;
   margin: 0;
@@ -375,6 +382,7 @@
   border: 1px solid var(--custom-chatbox-gray-color);
   border-radius: 0.35rem;
   transition: all 0.3s ease;
+  background: var(--custom-chatbox-input-bg);
 }
 .custom-chatbox-container .msgcontrol img, .custom-chatbox-container .msgcontrol svg, .custom-chatbox-container .msgcontrol video, .custom-chatbox-container .msgcontrol canvas, .custom-chatbox-container .msgcontrol audio, .custom-chatbox-container .msgcontrol iframe, .custom-chatbox-container .msgcontrol embed, .custom-chatbox-container .msgcontrol object {
   display: inline;

package/lib/css/LiveSearch/index.css

@@ -2,7 +2,9 @@
     <!-- Live Search -->
 /* ====================================================== */
 .livesearch__wrapper {
+  position: relative;
   /*------ Search button ------*/
+  /*------ Loader ------*/
 }
 .livesearch__wrapper .livesearch__wrapper-searchbtn {
   position: absolute;
@@ -12,6 +14,35 @@
   z-index: 5;
   pointer-events: auto;
 }
+.livesearch__wrapper .livesearch-loader {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  margin-top: -6px;
+  pointer-events: none;
+  pointer-events: none;
+  z-index: 5;
+  width: 12px;
+  height: 12px;
+  text-align: center;
+  transform-origin: center;
+  transform: translate(-5px, 0) rotate(0);
+  animation: 1s linear infinite livesearch__spinner;
+}
+.livesearch__wrapper .livesearch-loader.pos-offset {
+  right: 2rem;
+}
+.livesearch__wrapper .livesearch-loader svg {
+  vertical-align: top;
+}
+.livesearch__wrapper .livesearch-loader svg path {
+  fill: var(--cus-sel-loader-color);
+}
+@keyframes livesearch__spinner {
+  to {
+    transform: translate(-5px, 0) rotate(-360deg);
+  }
+}
 
 /*------ List ------*/
 .livesearch__options-wrapper {
@@ -23,6 +54,7 @@
   display: none;
   min-width: var(--livesearch-listgroup-popwin-min-width);
   z-index: 1055; /* --bs-modal-zindex */
+  /*------ Options ------*/
 }
 .livesearch__options-wrapper.active {
   display: block !important;
@@ -30,6 +62,7 @@
 .livesearch__options-wrapper .livesearch__options-contentlist {
   overflow: hidden;
   overflow-y: auto;
+  background-color: var(--bs-list-group-bg);
 }
 .livesearch__options-wrapper .livesearch__options-contentlist.noscroll {
   overflow-y: hidden;

package/lib/esm/Chatbox/index.scss

@@ -189,6 +189,14 @@
     z-index: 1031;
     height: var(--custom-chatbox-h);
 
+    /* disable popup */
+    &.popup-none {
+        position: relative;
+        bottom: auto;
+        right: auto;
+        box-shadow: none;
+    }
+
     details {
         font-style: italic;
         margin: 0;
@@ -449,6 +457,7 @@
         border: 1px solid var(--custom-chatbox-gray-color);
         border-radius: 0.35rem;
         transition: all 0.3s ease;
+        background: var(--custom-chatbox-input-bg);
 
         img, svg, video, canvas, audio, iframe, embed, object {
             display: inline;

package/lib/esm/Chatbox/index.tsx

@@ -12,7 +12,6 @@ import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
 import { htmlEncode } from 'funda-utils/dist/cjs/sanitize';
 
 
-
 // loader
 import PureLoader from './PureLoader';
 import TypingEffect from "./TypingEffect";
@@ -129,6 +128,7 @@ export type ChatboxProps = {
     defaultQuestions?: QuestionData;
     showCopyBtn?: boolean;  // Whether to show copy button for each reply
     autoCopyReply?: boolean;  // Whether to automatically copy reply to clipboard
+    usePopUp?: boolean;
     customRequest?: CustomRequestFunction;
     renderParser?: (input: string) => Promise<string>;
     requestBodyFormatter?: (body: any, contextData: Record<string, any>, conversationHistory: MessageDetail[]) => Promise<Record<string, any>>;
@@ -319,6 +319,7 @@ const Chatbox = (props: ChatboxProps) => {
             toolkitButtons,
             newChatButton,
             maxHistoryLength,
+            usePopUp,
             customRequest,
             onQuestionClick,
             onCopyCallback,
@@ -399,6 +400,7 @@ const Chatbox = (props: ChatboxProps) => {
             maxHistoryLength,
             toolkitButtons,
             newChatButton,
+            usePopUp,
             customRequest,
             onQuestionClick,
             onCopyCallback,
@@ -1330,7 +1332,7 @@ const Chatbox = (props: ChatboxProps) => {
     return (
         <>
 
-        <RootPortal show={true} containerClassName="Chatbox">
+        <RootPortal show={true} usePortal={args().usePopUp} containerClassName="Chatbox">
 
             {/**------------- BUBBLE -------------*/}
             {args().bubble ? <>
@@ -1353,7 +1355,7 @@ const Chatbox = (props: ChatboxProps) => {
             {/**------------- CLOSE BUTTON------------- */}
 
 
-            <div style={{ display: show ? 'block' : 'none' }} className={`${args().prefix || 'custom-'}chatbox-container`} ref={rootRef}>
+            <div style={{ display: show ? 'block' : 'none' }} className={`${args().prefix || 'custom-'}chatbox-container ${typeof args().usePopUp !== 'undefined' && args().usePopUp === false ? 'popup-none' : ''}`} ref={rootRef}>
 
                 {/**------------- NO DATA -------------*/}
                 {msgList.length === 0 ? <>
@@ -1393,7 +1395,8 @@ const Chatbox = (props: ChatboxProps) => {
           
 
                 {/**------------- MESSAGES LIST -------------*/}
-                <div className="messages" ref={msgContainerRef}>
+                {/** Prevent excessive height overflow */}
+                <div className={`messages ${msgList.length === 0 ? 'd-none' : ''}`} ref={msgContainerRef}>
 
                     {msgList.map((msg, index) => {