Generate version 4.1.0

Author: Krzysztof Wilk

README.txt

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

app/package.json

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

app/src/components/Accordion/AccordionItem/types.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { BaseComponent } from 'src/types/baseComponent';
+import React from "react";
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface AccordionItemProps extends BaseComponent {
   bodyClassName?: string;

app/src/components/Accordion/types.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { BaseComponent } from 'src/types/baseComponent';
+import React from "react";
+import { BaseComponent } from "../../types/baseComponent";
 
 interface AccordionProps extends BaseComponent {
   alwaysOpen?: boolean;

app/src/components/Badge/types.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { BaseComponent } from 'src/types/baseComponent';
-import { backgroundColor } from 'src/types/colors';
+import React from "react";
+import { BaseComponent } from "../../types/baseComponent";
+import { backgroundColor } from "../../types/colors";
 
 interface BadgeProps extends BaseComponent {
   color?: backgroundColor;

app/src/components/ButtonGroup/types.tsx

@@ -1,10 +1,10 @@
-import { BaseComponent } from 'src/types/baseComponent';
-import { size } from 'src/types/size';
+import { BaseComponent } from "../../types/baseComponent";
+import { size } from "../../types/size";
 
 interface ButtonGroupProps extends BaseComponent {
   ref?: React.ForwardedRef<HTMLAllCollection>;
   size?: size;
-  shadow?: '0' | '1' | '2' | '3' | '4' | '5';
+  shadow?: "0" | "1" | "2" | "3" | "4" | "5";
   toolbar?: boolean;
   vertical?: boolean;
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardBody/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface CardBodyProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardFooter/types.tsx

@@ -1,5 +1,5 @@
-import { BaseComponent } from 'src/types/baseComponent';
-import { backgroundColor } from 'src/types/colors';
+import { BaseComponent } from "../../../types/baseComponent";
+import { backgroundColor } from "../../../types/colors";
 
 interface CardFooterProps extends BaseComponent {
   border?: string;

app/src/components/Card/CardGroup/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface CardGroupProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardHeader/types.tsx

@@ -1,5 +1,5 @@
-import { BaseComponent } from 'src/types/baseComponent';
-import { backgroundColor } from 'src/types/colors';
+import { BaseComponent } from "../../../types/baseComponent";
+import { backgroundColor } from "../../../types/colors";
 
 interface CardHeaderProps extends BaseComponent {
   border?: string;

app/src/components/Card/CardOverlay/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface CardOverlayProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardSubTitle/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface CardSubTitleProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardText/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface CardTextProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardTitle/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface CardTitleProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/types.tsx

@@ -1,11 +1,11 @@
-import { backgroundColor } from 'src/types/colors';
-import { BaseComponent } from 'src/types/baseComponent';
+import { backgroundColor } from "../../types/colors";
+import { BaseComponent } from "../../types/baseComponent";
 
 interface CardProps extends BaseComponent {
   alignment?: string;
   border?: string;
   background?: backgroundColor;
-  shadow?: '0' | '1' | '2' | '3' | '4' | '5';
+  shadow?: "0" | "1" | "2" | "3" | "4" | "5";
   ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;
 }

app/src/components/Carousel/Carousel.tsx

@@ -32,7 +32,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
   const [active, setActive] = useState(0);
   const [imagesCount, setImagesCount] = useState(0);
   const [clientTouch, setClientTouch] = useState({ initialX: 0, initialY: 0 });
-  const [isTransitioning, setIsTransitioning] = useState(false)
+  const [isTransitioning, setIsTransitioning] = useState(false);
 
   const carouselInnerRef = useRef<HTMLElement>(null);
   const carouselReference = carouselRef ? carouselRef : carouselInnerRef;
@@ -162,7 +162,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
         nextElement.classList.add(directionalClassName);
 
         const completeCallBack = () => {
-          setIsTransitioning(false)
+          setIsTransitioning(false);
           nextElement.classList.remove(directionalClassName, orderClassName);
           nextElement.classList.add('active');
 
@@ -286,9 +286,9 @@ const MDBCarousel: React.FC<CarouselProps> = ({
     setImagesCount(imgLength);
   }, [carouselReference]);
 
-  useEffect(()=>{
-    onSlide?.()
-  },[isTransitioning, onSlide])
+  useEffect(() => {
+    onSlide?.();
+  }, [isTransitioning, onSlide]);
 
   useEffect(() => {
     if (keyboard) {

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

@@ -6,7 +6,7 @@ declare const MDBCarousel: React.FunctionComponent<{
   className?: string;
   fade?: boolean;
   keyboard?: boolean;
-  onSlide?: ()=>any;
+  onSlide?: () => any;
   pause?: boolean;
   showControls?: boolean;
   showIndicators?: boolean;

app/src/components/Dropdown/DropdownDivider/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface DropdownDividerProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

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

@@ -1,21 +1,21 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface DropdownMenuProps extends BaseComponent {
   dark?: boolean;
   responsive?:
-    | ''
-    | 'start'
-    | 'end'
-    | 'sm-start'
-    | 'md-start'
-    | 'lg-start'
-    | 'xl-start'
-    | 'xxl-start'
-    | 'sm-end'
-    | 'md-end'
-    | 'lg-end'
-    | 'xl-end'
-    | 'xxl-end';
+    | ""
+    | "start"
+    | "end"
+    | "sm-start"
+    | "md-start"
+    | "lg-start"
+    | "xl-start"
+    | "xxl-start"
+    | "sm-end"
+    | "md-end"
+    | "lg-end"
+    | "xl-end"
+    | "xxl-end";
   tag?: React.ComponentProps<any>;
 }
 

app/src/components/Dropdown/types.tsx

@@ -1,5 +1,5 @@
-import { placement } from 'src/types/placement';
-import { BaseComponent } from 'src/types/baseComponent';
+import { placement } from "../../types/placement";
+import { BaseComponent } from "../../types/baseComponent";
 
 interface DropdownProps extends BaseComponent {
   animation?: boolean;

app/src/components/ListGroup/ListGroupItem/types.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { backgroundColor } from 'src/types/colors';
-import { BaseComponent } from 'src/types/baseComponent';
+import React from "react";
+import { backgroundColor } from "../../../types/colors";
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface ListGroupItemProps extends BaseComponent {
   action?: boolean;

app/src/components/ListGroup/types.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { BaseComponent } from 'src/types/baseComponent';
+import React from "react";
+import { BaseComponent } from "../../types/baseComponent";
 
 interface ListGroupProps extends BaseComponent {
   horizontal?: boolean;

app/src/components/Modal/Modal.tsx

@@ -6,19 +6,20 @@ import ReactDOM from 'react-dom';
 const MDBModal: React.FC<ModalProps> = ({
   animationDirection,
   appendToBody,
-  backdrop,
+  backdrop = true,
   children,
   className,
-  closeOnEsc,
+  closeOnEsc = true,
   setShow,
-  leaveHiddenModal,
+  leaveHiddenModal = true,
   modalRef,
   onHide,
   onHidePrevented,
   onShow,
   show,
   staticBackdrop,
-  tag: Tag,
+  nonInvasive = false,
+  tag: Tag = 'div',
   ...props
 }) => {
   const [isOpenBackdrop, setIsOpenBackrop] = useState(show);
@@ -37,6 +38,7 @@ const MDBModal: React.FC<ModalProps> = ({
     animationDirection,
     'fade',
     isOpenModal && 'show',
+    isOpenBackdrop && nonInvasive && 'modal-non-invasive-show',
     className
   );
   const backdropClasses = clsx('modal-backdrop', 'fade', isOpenBackdrop && 'show');
@@ -47,7 +49,7 @@ const MDBModal: React.FC<ModalProps> = ({
 
     setTimeout(() => {
       setIsOpenBackrop(false);
-      setShow && setShow(false);
+      setShow?.(false);
     }, 150);
     setTimeout(() => {
       setInnerShow(false);
@@ -56,7 +58,7 @@ const MDBModal: React.FC<ModalProps> = ({
   }, [onHide, setShow]);
 
   const handleClickOutside = useCallback(
-    (event: any) => {
+    (event: MouseEvent) => {
       if (isOpenModal && event.target === modalReference.current) {
         if (!staticBackdrop) {
           closeModal();
@@ -100,10 +102,10 @@ const MDBModal: React.FC<ModalProps> = ({
   useEffect(() => {
     const focusable = modalReference.current?.querySelectorAll(
       'button, a, input, select, textarea, [tabindex]'
-    ) as any as Array<HTMLElement>;
+    ) as NodeListOf<HTMLElement>;
 
     const filtered = Array.from(focusable)
-      .filter((el: any) => el.tabIndex !== -1)
+      .filter((el) => el.tabIndex !== -1)
       .sort((a, b) => {
         if (a.tabIndex === b.tabIndex) {
           return 0;
@@ -140,7 +142,7 @@ const MDBModal: React.FC<ModalProps> = ({
 
     const hasVScroll = window.innerWidth > document.documentElement.clientWidth && window.innerWidth >= 576;
 
-    if (innerShow && hasVScroll) {
+    if (innerShow && hasVScroll && !nonInvasive) {
       const scrollbarWidth = getScrollbarWidth();
       document.body.classList.add('modal-open');
       document.body.style.overflow = 'hidden';
@@ -156,7 +158,7 @@ const MDBModal: React.FC<ModalProps> = ({
       document.body.style.overflow = '';
       document.body.style.paddingRight = '';
     };
-  }, [innerShow]);
+  }, [innerShow, nonInvasive]);
 
   useEffect(() => {
     if (show) {
@@ -167,22 +169,24 @@ const MDBModal: React.FC<ModalProps> = ({
       }, 0);
       setTimeout(() => {
         setIsOpenModal(true);
-        setShow && setShow(true);
+        setShow?.(true);
       }, 150);
     } else {
       closeModal();
     }
   }, [show, closeModal, setShow, onShow]);
 
   useEffect(() => {
-    window.addEventListener('click', handleClickOutside);
-    window.addEventListener('keydown', handleKeydown);
+    if (!nonInvasive) {
+      window.addEventListener('click', handleClickOutside);
+      window.addEventListener('keydown', handleKeydown);
+    }
 
     return () => {
       window.removeEventListener('click', handleClickOutside);
       window.removeEventListener('keydown', handleKeydown);
     };
-  }, [handleKeydown, handleClickOutside]);
+  }, [handleKeydown, handleClickOutside, nonInvasive]);
 
   const appendToBodyTemplate = (
     <>
@@ -192,12 +196,15 @@ const MDBModal: React.FC<ModalProps> = ({
             <Tag
               className={classes}
               ref={modalReference}
-              style={{ display: innerShow || show ? 'block' : 'none' }}
+              style={{ display: innerShow || show ? 'block' : 'none', pointerEvents: nonInvasive ? 'none' : 'initial' }}
               {...props}
             >
               {children}
             </Tag>
-            {ReactDOM.createPortal(backdrop && innerShow && <div className={backdropClasses}></div>, document.body)}
+            {ReactDOM.createPortal(
+              backdrop && innerShow && !nonInvasive && <div className={backdropClasses}></div>,
+              document.body
+            )}
           </>,
           document.body
         )}
@@ -211,18 +218,21 @@ const MDBModal: React.FC<ModalProps> = ({
           <Tag
             className={classes}
             ref={modalReference}
-            style={{ display: innerShow || show ? 'block' : 'none' }}
+            style={{ display: innerShow || show ? 'block' : 'none', pointerEvents: nonInvasive ? 'none' : 'initial' }}
             {...props}
           >
             {children}
           </Tag>
-          {ReactDOM.createPortal(backdrop && innerShow && <div className={backdropClasses}></div>, document.body)}
+          {ReactDOM.createPortal(
+            backdrop && innerShow && !nonInvasive && <div className={backdropClasses}></div>,
+            document.body
+          )}
         </>
       )}
     </>
   );
 
   return <>{appendToBody ? appendToBodyTemplate : modalTemplate}</>;
 };
-MDBModal.defaultProps = { tag: 'div', backdrop: true, closeOnEsc: true, leaveHiddenModal: true };
+
 export default MDBModal;

app/src/components/Modal/ModalBody/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface ModalBodyProps extends BaseComponent {
   ref?: React.ForwardedRef<HTMLAllCollection>;

app/src/components/Modal/ModalContent/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from "../../../types/baseComponent";
 
 interface ModalContentProps extends BaseComponent {
   ref?: React.ForwardedRef<HTMLAllCollection>;