release: 6.1.0

README.txt

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

app/package.json

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

app/src/components/Collapse/Collapse.tsx

@@ -5,12 +5,14 @@ import type { CollapseProps } from './types';
 const MDBCollapse: React.FC<CollapseProps> = ({
   className,
   children,
-  show,
+  show = false,
   id,
   navbar,
   tag: Tag,
   collapseRef,
   style,
+  onShow,
+  onHide,
   ...props
 }): JSX.Element => {
   const [showCollapse, setShowCollapse] = useState<boolean | undefined>(false);
@@ -39,7 +41,10 @@ const MDBCollapse: React.FC<CollapseProps> = ({
   }, [collapseHeight, showCollapse, refCollapse]);
 
   useEffect(() => {
-    setShowCollapse(show);
+    if (showCollapse !== show) {
+      show ? onShow?.() : onHide?.();
+      setShowCollapse(show);
+    }
 
     if (showCollapse) {
       setTransition(true);
@@ -52,7 +57,7 @@ const MDBCollapse: React.FC<CollapseProps> = ({
     return () => {
       clearTimeout(timer);
     };
-  }, [show, showCollapse]);
+  }, [show, showCollapse, onShow, onHide]);
 
   useEffect(() => {
     if (showCollapse) {

app/src/components/Dropdown/DropdownItem/DropdownItem.tsx

@@ -18,14 +18,17 @@ const MDBDropdownItem = ({
   preventCloseOnClick,
   ...props
 }: DropdownItemProps) => {
-  const { setIsOpenState, onHide } = useDropdownContext();
+  const { setIsOpenState, onHide, setActiveIndex } = useDropdownContext();
 
   const handleClose = (e: MouseEvent<HTMLElement>) => {
-    if (disabled || preventCloseOnClick) return;
+    onHide?.(e);
+    onClick?.(e);
+    if (disabled || preventCloseOnClick || e.defaultPrevented) {
+      return;
+    }
 
-    onHide?.();
+    setTimeout(() => setActiveIndex(-1), 300);
     setIsOpenState(false);
-    onClick?.(e);
   };
 
   return (

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

@@ -46,7 +46,7 @@ const MDBDropdownMenu = ({
       return 'left-start';
     }
 
-    const isEnd = popperElement && getComputedStyle(popperElement).getPropertyValue('--bs-position').trim() === 'end';
+    const isEnd = popperElement && getComputedStyle(popperElement).getPropertyValue('--mdb-position').trim() === 'end';
 
     if (dropup) {
       return isEnd ? 'top-end' : 'top-start';

app/src/components/Dropdown/DropdownToggle/DropdownToggle.tsx

@@ -17,10 +17,13 @@ const MDBDropdownToggle = ({
   const classes = clsx('dropdown-toggle', split && 'dropdown-toggle-split', className);
 
   const handleOpenToggle = (e: MouseEvent<HTMLElement>) => {
-    isOpenState ? onHide?.() : onShow?.();
+    onClick?.(e);
+    isOpenState ? onHide?.(e) : onShow?.(e);
 
+    if (e.defaultPrevented) {
+      return;
+    }
     setIsOpenState((prev) => !prev);
-    onClick?.(e);
 
     setTimeout(() => setActiveIndex(-1), 300);
   };

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

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, ReactNode } from 'react';
+import { Dispatch, SetStateAction, ReactNode, SyntheticEvent } from 'react';
 
 export interface Dropdown {
   activeIndex: number;
@@ -10,8 +10,8 @@ export interface Dropdown {
   setActiveIndex: Dispatch<SetStateAction<number>>;
   setPopperElement: Dispatch<SetStateAction<HTMLElement | null>>;
   setReferenceElement: Dispatch<SetStateAction<HTMLElement | null>>;
-  onHide?: () => any;
-  onShow?: () => any;
+  onHide?: (e: MouseEvent | SyntheticEvent | KeyboardEvent) => any;
+  onShow?: (e: MouseEvent | SyntheticEvent | KeyboardEvent) => any;
   dropup?: boolean;
   dropright?: boolean;
   dropleft?: boolean;
@@ -26,6 +26,6 @@ export interface DropdownProviderProps {
   dropup?: boolean;
   dropright?: boolean;
   dropleft?: boolean;
-  onHide?: () => any;
-  onShow?: () => any;
+  onHide?: (e: MouseEvent | SyntheticEvent | KeyboardEvent) => any;
+  onShow?: (e: MouseEvent | SyntheticEvent | KeyboardEvent) => any;
 }

app/src/components/Dropdown/hooks/useClickOutside.tsx

@@ -1,22 +1,24 @@
-import { useCallback, useEffect } from 'react';
+import { ReactPropTypes, SyntheticEvent, useCallback, useEffect } from 'react';
 import { isNode } from '../helpers/typeguards';
 import { useDropdownContext } from './useDropdownContext';
 
 export const useClickOutside = () => {
   const { isOpenState, setIsOpenState, setActiveIndex, popperElement, referenceElement, onHide } = useDropdownContext();
 
   const handleClickOutside = useCallback(
-    ({ target }: MouseEvent) => {
+    (e: MouseEvent | SyntheticEvent) => {
+      onHide?.(e);
       if (
         !isOpenState ||
-        !isNode(target) ||
-        (popperElement && popperElement.contains(target)) ||
-        (referenceElement && referenceElement.contains(target))
-      )
+        !isNode(e.target) ||
+        (popperElement && popperElement.contains(e.target)) ||
+        (referenceElement && referenceElement.contains(e.target)) ||
+        e.defaultPrevented
+      ) {
         return;
-
+      }
       setIsOpenState(false);
-      onHide?.();
+
       setTimeout(() => setActiveIndex(-1), 300);
     },
     [isOpenState, setIsOpenState, setActiveIndex, popperElement, referenceElement, onHide]

app/src/components/Dropdown/hooks/useKeyboard.tsx

@@ -50,16 +50,27 @@ export const useKeyboard = (children: ReactElement[] | ReactElement) => {
       if (e.key === 'Enter') {
         const el: HTMLElement | null = document.querySelector('[data-active="true"]');
         const child = el?.firstElementChild as HTMLElement | null | undefined;
-        child?.click();
 
+        if (child) {
+          return child.click();
+        }
+
+        onHide?.(e);
+
+        if (e.defaultPrevented) {
+          return;
+        }
         setIsOpenState(false);
         setTimeout(() => setActiveIndex(-1), 300);
       }
 
       if (e.key === 'Escape') {
-        setIsOpenState(false);
-        onHide?.();
+        onHide?.(e);
+        if (e.defaultPrevented) {
+          return;
+        }
 
+        setIsOpenState(false);
         setTimeout(() => setActiveIndex(-1), 300);
       }
     },

app/src/components/Dropdown/types.tsx

@@ -1,5 +1,5 @@
 import { BaseComponent } from '../../types/baseComponent';
-import { ReactNode, ComponentProps } from 'react';
+import { ReactNode, ComponentProps, SyntheticEvent } from 'react';
 
 export interface DropdownProps extends BaseComponent {
   animation?: boolean;
@@ -11,6 +11,6 @@ export interface DropdownProps extends BaseComponent {
   dropleft?: boolean;
   children?: ReactNode;
   tag?: ComponentProps<any>;
-  onHide?: () => any;
-  onShow?: () => any;
+  onHide?: (e: MouseEvent | SyntheticEvent | KeyboardEvent) => any;
+  onShow?: (e: MouseEvent | SyntheticEvent | KeyboardEvent) => any;
 }

app/src/components/Modal/Modal.tsx

@@ -31,7 +31,6 @@ const MDBModal: React.FC<ModalProps> = ({
 
   const modalInnerRef = useRef<HTMLElement>(null);
   const modalReference = modalRef ? modalRef : modalInnerRef;
-
   const classes = clsx(
     'modal',
     staticModal && 'modal-static',
@@ -44,8 +43,10 @@ const MDBModal: React.FC<ModalProps> = ({
   const backdropClasses = clsx('modal-backdrop', 'fade', isOpenBackdrop && 'show');
 
   const closeModal = useCallback(() => {
-    setIsOpenModal(false);
-    isOpenModal && onHide?.();
+    setIsOpenModal((isCurrentlyShown) => {
+      isCurrentlyShown && onHide?.();
+      return false;
+    });
 
     setTimeout(() => {
       setIsOpenBackrop(false);
@@ -59,6 +60,10 @@ const MDBModal: React.FC<ModalProps> = ({
 
   const handleClickOutside = useCallback(
     (event: MouseEvent) => {
+      if (nonInvasive) {
+        return;
+      }
+
       if (isOpenModal && event.target === modalReference.current) {
         if (!staticBackdrop) {
           closeModal();
@@ -71,7 +76,7 @@ const MDBModal: React.FC<ModalProps> = ({
         }
       }
     },
-    [isOpenModal, modalReference, staticBackdrop, closeModal, onHidePrevented]
+    [isOpenModal, modalReference, staticBackdrop, closeModal, onHidePrevented, nonInvasive]
   );
 
   const handleKeydown = useCallback(
@@ -177,16 +182,19 @@ const MDBModal: React.FC<ModalProps> = ({
   }, [show, closeModal, setShow, onShow]);
 
   useEffect(() => {
-    if (!nonInvasive) {
-      window.addEventListener('click', handleClickOutside);
-      window.addEventListener('keydown', handleKeydown);
-    }
+    const addMouseUpListener = (e: MouseEvent) => {
+      if (!(e.target as HTMLElement).closest('.modal-dialog')) {
+        window.addEventListener('mouseup', handleClickOutside, { once: true });
+      }
+    };
+    window.addEventListener('mousedown', addMouseUpListener);
+    window.addEventListener('keydown', handleKeydown);
 
     return () => {
-      window.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('mousedown', addMouseUpListener);
       window.removeEventListener('keydown', handleKeydown);
     };
-  }, [handleKeydown, handleClickOutside, nonInvasive]);
+  }, [handleKeydown, handleClickOutside]);
 
   const appendToBodyTemplate = (
     <>
@@ -224,7 +232,7 @@ const MDBModal: React.FC<ModalProps> = ({
             {children}
           </Tag>
           {ReactDOM.createPortal(
-            backdrop && innerShow && !nonInvasive && <div className={backdropClasses}></div>,
+            backdrop && innerShow && !nonInvasive && <div onClick={closeModal} className={backdropClasses}></div>,
             document.body
           )}
         </>

app/src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, SyntheticEvent } from 'react';
 import ReactDOM from 'react-dom';
 import clsx from 'clsx';
 import { usePopper } from 'react-popper';
@@ -58,16 +58,16 @@ const MDBTooltip: React.FC<TooltipProps> = ({
     };
   }, [isOpenState, isClicked]);
 
-  const handleOnMouseEnter = (e: any) => {
-    setIsOpenState(true);
-    onShow?.();
-    onMouseEnter && onMouseEnter(e);
+  const handleOnMouseEnter = (e: SyntheticEvent) => {
+    onShow?.(e);
+    !e.defaultPrevented && setIsOpenState(true);
+    onMouseEnter?.(e);
   };
 
-  const handleOnMouseLeave = (e: any) => {
-    setIsOpenState(false);
-    onHide?.();
-    onMouseLeave && onMouseLeave(e);
+  const handleOnMouseLeave = (e: SyntheticEvent) => {
+    onHide?.(e);
+    !e.defaultPrevented && setIsOpenState(false);
+    onMouseLeave?.(e);
   };
 
   const handleClick = useCallback(

app/src/components/Tooltip/types.tsx

@@ -1,3 +1,4 @@
+import { MouseEventHandler, SyntheticEvent } from 'react';
 import { BaseComponent } from '../../types/baseComponent';
 import { placement } from '../../types/placement';
 
@@ -10,8 +11,10 @@ interface TooltipProps extends BaseComponent {
   title?: React.ReactNode;
   wrapperProps?: Record<string, unknown>;
   wrapperClass?: string;
-  onShow?: () => any;
-  onHide?: () => any;
+  onShow?: (e: SyntheticEvent) => any;
+  onHide?: (e: SyntheticEvent) => any;
+  onMouseEnter?: (e: SyntheticEvent) => any;
+  onMouseLeave?: (e: SyntheticEvent) => any;
 }
 
 export { TooltipProps };

app/src/forms/Input/Input.tsx

@@ -54,17 +54,17 @@ const MDBInput: React.FC<InputProps> = React.forwardRef<HTMLInputElement, InputP
 
       const { value } = innerRef.current;
 
-      value.length > 0 ? setActive(true) : setActive(false);
+      value != '' ? setActive(true) : setActive(false);
     }, [innerRef.current?.value]);
 
     useEffect(() => {
       if (value === undefined) return;
-      value.toString().length > 0 ? setActive(true) : setActive(false);
+      value != '' ? setActive(true) : setActive(false);
     }, [value]);
 
     useEffect(() => {
       if (defaultValue === undefined) return;
-      defaultValue.toString().length > 0 ? setActive(true) : setActive(false);
+      defaultValue != '' ? setActive(true) : setActive(false);
     }, [defaultValue]);
 
     const setWidth = useCallback(() => {
@@ -87,9 +87,9 @@ const MDBInput: React.FC<InputProps> = React.forwardRef<HTMLInputElement, InputP
         if (!innerRef.current) return;
 
         if (
-          (newValue !== undefined && newValue.toString().length > 0) ||
-          (value !== undefined && value.toString().length > 0) ||
-          innerRef.current.value.length > 0
+          (newValue !== undefined && newValue != '') ||
+          (value !== undefined && value != '') ||
+          innerRef.current.value != ''
         ) {
           setActive(true);
         } else {