1.0.0-alpha4

README.txt

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

app/demo/App.tsx

@@ -1,31 +1,91 @@
-import React from 'react';
-import { MDBBtn, MDBContainer } from 'mdb-react-ui-kit';
+import React from "react";
+import { MDBBtn, MDBContainer, MDBTooltip, MDBIcon } from "mdb-react-ui-kit";
 
 function App() {
+  function Clipboard_CopyTo(value: any) {
+    var tempInput = document.createElement("input");
+    tempInput.value = value;
+    document.body.appendChild(tempInput);
+    tempInput.select();
+    document.execCommand("copy");
+    document.body.removeChild(tempInput);
+  }
+
+  const handleClick = () => {
+    Clipboard_CopyTo("T9TTVSQB");
+    var div = document.getElementById("code-success");
+    if (div) {
+      div.style.display = "block";
+    }
+    setTimeout(function () {
+      // @ts-ignore
+      document.getElementById("code-success").style.display = "none";
+    }, 900);
+  };
   return (
     <MDBContainer fluid>
       <div
-        className='d-flex justify-content-center align-items-center'
-        style={{ height: '100vh' }}
+        className="d-flex justify-content-center align-items-center"
+        style={{ height: "100vh" }}
       >
-        <div className='text-center'>
-          <img
-            className='mb-4'
-            src='https://mdbootstrap.com/img/logo/mdb-transparent-250px.png'
-            style={{ width: 250, height: 90 }}
-          />
-          <h5 className='mb-3'>
-            Thank you for using our product. We're glad you're with us.
+        <div className="text-center">
+          <h2>Release surprise!</h2>
+          <p className="h4 fw-bold">50% OFF MDB PRO</p>
+          <div className="row justify-content-center">
+            <div className="col-md-6">
+              <img
+                src="https://mdbootstrap.com/img/Marketing/campaigns/50off-SJARV.png"
+                className="img-fluid"
+                alt=""
+              />
+            </div>
+          </div>
+
+          <h5 className="mb-3">
+            Use this coupon code before it expires and claim the reward
           </h5>
-          <p className='mb-3'>MDB Team</p>
-          <MDBBtn
-            tag='a'
-            href='https://mdbootstrap.com/docs/standard/getting-started/'
-            target='_blank'
-            role='button'
+          <p className="mb-3">
+            The coupon code will be valid until the end of the week
+          </p>
+
+          <div className="mt-2">
+            <code className="h2 border rounded py-1 px-5 flex-item me-2">
+              T9TTVSQB
+            </code>
+            <br />
+
+            <MDBBtn
+              className="me-2"
+              id="disc-50"
+              href="#"
+              size="lg"
+              color="info"
+              style={{ backgroundColor: "#009fe7" }}
+              onClick={handleClick}
+            >
+              COPY TO CLIPBOARD <MDBIcon far icon="copy" />
+            </MDBBtn>
+            <MDBBtn
+              outline
+              className="mt-3"
+              href="https://mdbootstrap.com/docs/standard/getting-started/"
+              size="lg"
+              target="_blank"
+              style={{ borderColor: "#009fe7", color: "#009fe7" }}
+            >
+              MDB tutorial
+            </MDBBtn>
+          </div>
+          <p>
+            See <a href="https://mdbootstrap.com/pro/">prices</a>
+          </p>
+          <div
+            className="my-2 me-2 alert alert-success"
+            id="code-success"
+            style={{ display: "none", position: 'fixed', width: '300px', top: '0', right: '0' }}
           >
-            Start MDB tutorial
-          </MDBBtn>
+            Copied
+          </div>
         </div>
       </div>
     </MDBContainer>

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "1.0.0-alpha3",
+  "version": "1.0.0-alpha4",
   "main": "index.js",
   "repository": {
     "type": "git",

app/src/components/Card/Card.tsx

@@ -14,7 +14,7 @@ const MDBCard: React.FC<CardProps> = React.forwardRef<HTMLAllCollection, CardPro
     );
 
     return (
-      <Tag className={classes} {...props}>
+      <Tag className={classes} ref={ref} {...props}>
         {children}
       </Tag>
     );

app/src/components/Collapse/Collapse.tsx

@@ -7,27 +7,36 @@ const MDBCollapse: React.FC<CollapseProps> = ({
   center,
   children,
   show,
+  id,
   navbar,
+  tag: Tag,
   style,
   ...props
 }): JSX.Element => {
   const [showCollapse, setShowCollapse] = useState<boolean | undefined>(false);
+  const [showCollapseString, setShowCollapseString] = useState<string | undefined>('');
+  const [statement, setStatement] = useState(false);
   const [collapseHeight, setCollapseHeight] = useState<string | number | undefined>(undefined);
   const [transition, setTransition] = useState(false);
 
   const classes = clsx(
     transition ? 'collapsing' : 'collapse',
-    !transition && showCollapse && 'show',
+    !transition && (showCollapse || statement) && 'show',
     navbar && 'navbar-collapse',
     center && 'justify-content-center',
     className
   );
-  const refCollapse = useRef<HTMLDivElement>(null);
+  const refCollapse = useRef<HTMLElement>(null);
 
   useEffect(() => {
-    setShowCollapse(show);
+    if (typeof show === 'string') {
+      setShowCollapseString(show);
+      setStatement(showCollapseString === id);
+    } else {
+      setShowCollapse(show);
+    }
 
-    if (showCollapse) {
+    if (statement || showCollapse) {
       setTransition(true);
     }
 
@@ -38,21 +47,23 @@ const MDBCollapse: React.FC<CollapseProps> = ({
     return () => {
       clearTimeout(timer);
     };
-  }, [collapseHeight, show, showCollapse]);
+  }, [collapseHeight, show, showCollapse, id, showCollapseString, statement]);
 
   useEffect(() => {
-    if (showCollapse) {
+    if (showCollapse || statement) {
       setCollapseHeight(refCollapse?.current?.scrollHeight);
     } else {
       setCollapseHeight(0);
     }
-  }, [showCollapse]);
+  }, [showCollapse, statement]);
 
   return (
-    <div style={{ height: collapseHeight, ...style }} className={classes} {...props} ref={refCollapse}>
+    <Tag style={{ height: collapseHeight, ...style }} id={id} className={classes} {...props} ref={refCollapse}>
       {children}
-    </div>
+    </Tag>
   );
 };
 
+MDBCollapse.defaultProps = { tag: 'div' };
+
 export default MDBCollapse;

app/src/components/Collapse/index.d.ts

@@ -3,9 +3,10 @@ import * as React from 'react';
 declare const MDBCollapse: React.FunctionComponent<{
   className?: string;
   navbar?: boolean;
-  show?: boolean;
+  show?: boolean | string;
   center?: boolean;
   style?: Record<string, unknown>;
+  tag?: React.ComponentProps<any>;
   [rest: string]: any;
 }>;
 

app/src/components/Collapse/types.tsx

@@ -1,9 +1,10 @@
 type CollapseProps = {
   className?: string;
   navbar?: boolean;
-  show?: boolean;
+  show?: boolean | string;
   center?: boolean;
   style?: Record<string, unknown>;
+  tag?: React.ComponentProps<any>;
   [rest: string]: any;
 };
 

app/src/components/Dropdown/Dropdown.tsx

@@ -1,8 +1,9 @@
 import clsx from 'clsx';
-import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import type { DropdownProps } from './types';
 import { DropdownContext } from './context';
 import { usePopper } from 'react-popper';
+import { flip } from '@popperjs/core';
 
 const MDBDropdown: React.FC<DropdownProps> = ({
   className,
@@ -42,6 +43,7 @@ const MDBDropdown: React.FC<DropdownProps> = ({
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: isPlacement,
+    modifiers: [flip],
     ...options,
   });
 
@@ -68,6 +70,11 @@ const MDBDropdown: React.FC<DropdownProps> = ({
     [isOpenState, popperElement, referenceElement]
   );
 
+  useEffect(() => {
+    const wo = document.body.scrollTop;
+    console.log(wo);
+  });
+
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
@@ -81,7 +88,7 @@ const MDBDropdown: React.FC<DropdownProps> = ({
     }
   }, [countLength, isOpenState]);
 
-  useMemo(() => {
+  useEffect(() => {
     let timer: ReturnType<typeof setTimeout>;
     let secondTimer: ReturnType<typeof setTimeout>;
 

app/src/components/Dropdown/DropdownLink/DropdownLink.tsx

@@ -14,8 +14,9 @@ const MDBDropdownLink: React.FC<DropdownLinkProps> = ({
 
   const { handleClose } = useContext(DropdownContext);
 
-  const handleClickItem = (e: React.MouseEvent) => {
+  const handleClickItem = (e: React.MouseEvent<HTMLAnchorElement>) => {
     handleClose();
+
     onClick && onClick(e);
   };
 

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

@@ -25,6 +25,7 @@ const MDBDropdownMenu: React.FC<DropdownMenuProps> = ({
     animatedFadeOut,
     animation,
     getCount,
+    handleOpenClose,
   } = useContext(DropdownContext);
 
   const classes = clsx(
@@ -77,9 +78,13 @@ const MDBDropdownMenu: React.FC<DropdownMenuProps> = ({
             setCount(0);
           }
         }
+        if (e.key === 'Escape' || e.key === 'Enter') {
+          setAttachELements(false);
+          handleOpenClose();
+        }
       }
     },
-    [attachELements, childrenLength, count]
+    [attachELements, childrenLength, handleOpenClose, count]
   );
 
   useEffect(() => {

app/src/components/Dropdown/DropdownMenu/style.css

@@ -15,3 +15,7 @@
   color: #fff;
   background-color: #1266f1;
 }
+
+.btn-group.dropstart > .dropdown-menu {
+  right: 0 !important;
+}