release: 7.2.0

README.txt

@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 7.1.0
+Version: FREE 7.2.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

app/demo/App.tsx

@@ -1,50 +1,25 @@
 import React from "react";
-import {
-  MDBDropdown,
-  MDBDropdownMenu,
-  MDBDropdownToggle,
-  MDBDropdownItem,
-} from "mdb-react-ui-kit";
+import { MDBBtn, MDBContainer } from "mdb-react-ui-kit";
 
-export default function App() {
+function App() {
   return (
-    <div className="container">
-      <div
-        className="d-flex justify-content-center align-items-center"
-        style={{ height: "100vh" }}
-      >
+    <MDBContainer fluid>
+      <div className="d-flex justify-content-center align-items-center" style={{ height: "100vh" }}>
         <div className="text-center">
           <img
             className="mb-4"
-            src="https://v1.mdbootstrap.com/wp-content/uploads/2022/11/mdb-sale.png"
+            src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
+            style={{ width: 250, height: 90 }}
           />
-          <h5 className="mb-4">
-            Only now, you can get all premium features & more with the best
-            discounts of the year.
-          </h5>
-          ​<p className="mb-4 fw-bold">All offers are LIMITED!</p>
-          <a
-            className="btn btn-lg btn-danger fw-bold mb-3"
-            style={{ backgroundColor: "#e70808" }}
-            href="https://mdbootstrap.com/sale/november/"
-            target="_blank"
-            role="button"
-          >
-            Check insane offers
-          </a>
-          <hr />
-          <p className="mt-4 lead fw-bold">
-            Publish your project with a single command.
-          </p>
-          <p className="mt-2">
-            Use{" "}
-            <a href="https://mdbgo.com/" className="fw-bold" target="_blank">
-              <u>MDB GO</u>
-            </a>{" "}
-            for a free hosting & deployment tool
-          </p>
+          <h5 className="mb-3">Thank you for using our product. We're glad you're with us.</h5>
+          <p className="mb-3">MDB Team</p>
+          <MDBBtn tag="a" href="https://mdbootstrap.com/docs/react/" target="_blank" role="button">
+            MDB REACT DOCS
+          </MDBBtn>
         </div>
       </div>
-    </div>
+    </MDBContainer>
   );
 }
+
+export default App;

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -31,15 +31,15 @@
     "css-loader": "5.0.1",
     "file-loader": "6.2.0",
     "html-loader": "^1.3.2",
-    "html-webpack-plugin": "4.5.0",
+    "html-webpack-plugin": "^5.1.0",
     "prettier": "^2.2.1",
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
     "style-loader": "2.0.0",
     "ts-loader": "^8.0.11",
     "typescript": "^4.1.3",
     "url-loader": "4.1.1",
-    "webpack": "5.1.0",
+    "webpack": "^5.20.0",
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.9.1"
   },

app/src/free/components/Dropdown/DropdownMenu/DropdownMenu.tsx

@@ -2,7 +2,7 @@
 
 import clsx from 'clsx';
 import React, { Children, cloneElement } from 'react';
-import { createPortal } from 'react-dom';
+import Portal from '../../../../utils/Portal';
 import { useDropdownContext } from '../hooks/useDropdownContext';
 import { useKeyboard } from '../hooks/useKeyboard';
 import { useFade } from '../hooks/useFade';
@@ -93,7 +93,7 @@ const MDBDropdownMenu = ({
     </Tag>
   );
 
-  return <>{appendToBody ? createPortal(menu, document.body) : menu}</>;
+  return <Portal disablePortal={!appendToBody}>{menu}</Portal>;
 };
 
 export default MDBDropdownMenu;

app/src/free/components/Popover/Popover.tsx

@@ -4,9 +4,9 @@ import clsx from 'clsx';
 import React, { useCallback, useEffect, useState } from 'react';
 import MDBBtn from '../Button/Button';
 import type { PopoverProps } from './types';
-import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import { useOpenStatus } from '../../../utils/hooks';
+import Portal from '../../../../src/utils/Portal';
 
 const MDBPopover: React.FC<PopoverProps> = ({
   className,
@@ -23,6 +23,7 @@ const MDBPopover: React.FC<PopoverProps> = ({
   options,
   poperStyle,
   onClick,
+  disablePortal = false,
   ...props
 }): JSX.Element => {
   const [referenceElement, setReferenceElement] = useState<HTMLElement>();
@@ -92,18 +93,18 @@ const MDBPopover: React.FC<PopoverProps> = ({
         {btnChildren}
       </Tag>
 
-      {(attachELements || isOpen) &&
-        ReactDOM.createPortal(
+      {(attachELements || isOpen) && (
+        <Portal disablePortal={disablePortal}>
           <PopperTag
             className={classes}
             ref={setPopperElement}
             style={{ ...styles.popper, ...poperStyle }}
             {...attributes.popper}
           >
             {children}
-          </PopperTag>,
-          document.body
-        )}
+          </PopperTag>
+        </Portal>
+      )}
     </>
   );
 };

app/src/free/components/Popover/types.tsx

@@ -11,6 +11,7 @@ interface PopoverProps extends ButtonProps {
   poperStyle?: React.CSSProperties;
   popperTag?: React.ComponentProps<any>;
   tag?: React.ComponentProps<any>;
+  disablePortal?: boolean;
   onOpen?: () => void;
   onClose?: () => void;
 }

app/src/free/components/Tooltip/Tooltip.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import React, { useState, useEffect, useCallback, SyntheticEvent } from 'react';
-import ReactDOM from 'react-dom';
 import clsx from 'clsx';
 import { usePopper } from 'react-popper';
 import type { TooltipProps } from './types';
 import MDBBtn from '../Button/Button';
+import Portal from '../../../utils/Portal';
 
 const MDBTooltip: React.FC<TooltipProps> = ({
   className,
@@ -22,6 +22,7 @@ const MDBTooltip: React.FC<TooltipProps> = ({
   onClose,
   onMouseEnter,
   onMouseLeave,
+  type,
   ...props
 }) => {
   const [referenceElement, setReferenceElement] = useState(null);
@@ -91,7 +92,6 @@ const MDBTooltip: React.FC<TooltipProps> = ({
       };
     }
   }, [handleClick, disableMouseDown]);
-
   return (
     <>
       <Tag
@@ -100,12 +100,13 @@ const MDBTooltip: React.FC<TooltipProps> = ({
         onMouseLeave={handleOnMouseLeave}
         ref={setReferenceElement}
         {...wrapperProps}
+        type={type}
       >
         {children}
       </Tag>
 
-      {isReadyToHide &&
-        ReactDOM.createPortal(
+      {isReadyToHide && (
+        <Portal>
           <TooltipTag
             ref={setPopperElement}
             className={classes}
@@ -115,9 +116,9 @@ const MDBTooltip: React.FC<TooltipProps> = ({
             {...props}
           >
             <div className='tooltip-inner'>{title}</div>
-          </TooltipTag>,
-          document.body
-        )}
+          </TooltipTag>
+        </Portal>
+      )}
     </>
   );
 };

app/src/utils/Portal.tsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect, RefObject } from 'react';
+import { createPortal } from 'react-dom';
+
+type PortalTypes = {
+  children: React.ReactNode;
+  /**
+   * The reference to the container element where the elements will be rendered. If not specified the element will be rendered in the document body.
+   * */
+  containerRef?: RefObject<HTMLElement>;
+  /**
+   * When `true` children will be rendered in normal DOM hierarchy.
+   * @default false
+   * */
+  disablePortal?: boolean;
+};
+
+/**
+ * Renders elements outside the component's normal DOM hierarchy.
+ */
+const Portal = ({ children, containerRef, disablePortal }: PortalTypes) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    !disablePortal && setMounted(true);
+  }, [disablePortal]);
+
+  if (disablePortal) {
+    return <>{children}</>;
+  }
+
+  return mounted ? createPortal(<>{children}</>, containerRef?.current || document.body) : null;
+};
+
+export default Portal;

app/src/utils/hooks.tsx

@@ -2,14 +2,25 @@ import { useEffect, useState, useMemo, RefObject } from 'react';
 
 const useOnScreen = (ref: RefObject<HTMLElement>) => {
   const [isIntersecting, setIntersecting] = useState(false);
+  const [observer, setObserver] = useState<any>(null);
 
   // prettier-ignore
-  const observer = useMemo(() => new IntersectionObserver(([entry]) => {
-    setIntersecting(entry.isIntersecting)
-  }), []);
+  // const observer = useMemo(() => {
+  //   return new IntersectionObserver(([entry]) => {
+  //   setIntersecting(entry.isIntersecting)
+  // });
+  // }, []);
 
   useEffect(() => {
-    if (!ref.current) return;
+    setObserver(() => {
+      return new IntersectionObserver(([entry]) => {
+        setIntersecting(entry.isIntersecting);
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!ref.current || !observer) return;
     observer.observe(ref.current);
     return () => observer.disconnect();
   }, [observer, ref]);