release: 6.1.0

Author: mako3577

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;
 }