funda-ui 4.7.152 → 4.7.155

package/lib/cjs/LiveSearch/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/ModalDialog/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/RootPortal/index.d.ts

@@ -3,6 +3,7 @@ export declare type RootPortalProps = {
     containerClassName?: string;
     children?: React.ReactNode;
     show?: boolean;
+    usePortal?: boolean;
 };
-declare const RootPortal: (props: RootPortalProps) => JSX.Element;
+declare const RootPortal: (props: RootPortalProps) => JSX.Element | null;
 export default RootPortal;

package/lib/cjs/RootPortal/index.js

@@ -110,7 +110,9 @@ __webpack_require__.r(__webpack_exports__);
 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>
@@ -121,15 +123,20 @@ var RootPortal = function RootPortal(props) {
   // 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 */ const __WEBPACK_DEFAULT_EXPORT__ = (RootPortal);

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 */

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/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) => {
 

package/lib/esm/RootPortal/index.tsx

@@ -6,13 +6,15 @@ export type RootPortalProps = {
     containerClassName?: string;
     children?: React.ReactNode;
     show?: boolean;
+    usePortal?: boolean;
 };
 
 const RootPortal = (props: RootPortalProps) => {
     const {
         containerClassName,
         show,
-        children
+        children,
+        usePortal = true
     } = props;
 
     const containerRef = useRef<HTMLElement>();
@@ -25,19 +27,23 @@ const RootPortal = (props: RootPortalProps) => {
     // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
 
     useEffect(() => {
-
-        containerRef.current = document.createElement('div');
-        containerRef.current.className = `root-portal-container ${containerClassName || ''}`;
-        document.body.appendChild(containerRef.current);
-        
+        if (usePortal) {
+            containerRef.current = document.createElement('div');
+            containerRef.current.className = `root-portal-container ${containerClassName || ''}`;
+            document.body.appendChild(containerRef.current);
+        }
 
         return () => {
-            if (containerRef.current) {
+            if (usePortal && containerRef.current) {
                 containerRef.current.remove();
             }
         };
-    }, []);
+    }, [usePortal]);
 
+    if (!usePortal) {
+        return show ? <>{children}</> : null;
+    }
+    
     return (
         <>
             {containerRef.current && show && createPortal(

package/lib/esm/Textarea/index.tsx

@@ -7,6 +7,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import { actualPropertyValue, getTextTop } from 'funda-utils/dist/cjs/inputsCalculation';
 import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 
+
 export type TextareaProps = {
     contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
     wrapperClassName?: string;

package/package.json

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