release: 6.2.0

mdbootstrap · Aug 7, 2023 · 173315a · 173315a
1 parent da743a6
commit 173315a
Show file tree

Hide file tree

Showing 72 changed files with 1,485 additions and 1,595 deletions.
diff --git a/README.txt b/README.txt
@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 6.1.0
+Version: FREE 6.2.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "main": "index.js",
   "repository": {
     "type": "git",

diff --git a/app/src/components/Accordion/Accordion.tsx b/app/src/components/Accordion/Accordion.tsx
@@ -4,7 +4,10 @@ import type { AccordionProps } from './types';
 import { AccordionContext } from './AccordionContext';
 
 const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollection, AccordionProps>(
-  ({ alwaysOpen, borderless, className, flush, initialActive, tag: Tag, children, onChange, ...props }, ref) => {
+  (
+    { alwaysOpen, borderless, className, flush, initialActive = 0, tag: Tag = 'div', children, onChange, ...props },
+    ref
+  ) => {
     const classes = clsx('accordion', flush && 'accordion-flush', borderless && 'accordion-borderless', className);
 
     const [activeItem, setActiveItem] = useState(initialActive);
@@ -25,6 +28,4 @@ const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollectio
   }
 );
 
-MDBAccordion.defaultProps = { tag: 'div', initialActive: 0 };
-
 export default MDBAccordion;
diff --git a/app/src/components/Accordion/AccordionItem/AccordionItem.tsx b/app/src/components/Accordion/AccordionItem/AccordionItem.tsx
@@ -15,7 +15,7 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
       headerTitle,
       headerStyle,
       btnClassName,
-      tag: Tag,
+      tag: Tag = 'div',
       children,
       ...props
     },
@@ -62,6 +62,4 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
   }
 );
 
-MDBAccordionItem.defaultProps = { tag: 'div' };
-
 export default MDBAccordionItem;
diff --git a/app/src/components/Badge/Badge.tsx b/app/src/components/Badge/Badge.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type { BadgeProps } from './types';
 
 const MDBBadge: React.FC<BadgeProps> = React.forwardRef<HTMLAllCollection, BadgeProps>(
-  ({ className, color, pill, light, dot, tag: Tag, children, notification, ...props }, ref) => {
+  ({ className, color = 'primary', pill, light, dot, tag: Tag = 'span', children, notification, ...props }, ref) => {
     const classes = clsx(
       'badge',
       light ? color && `badge-${color}` : color && `bg-${color}`,
@@ -21,6 +21,4 @@ const MDBBadge: React.FC<BadgeProps> = React.forwardRef<HTMLAllCollection, Badge
   }
 );
 
-MDBBadge.defaultProps = { tag: 'span', color: 'primary' };
-
 export default MDBBadge;
diff --git a/app/src/components/Button/Button.tsx b/app/src/components/Button/Button.tsx
@@ -7,7 +7,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
   (
     {
       className,
-      color,
+      color = 'primary',
       outline,
       children,
       rounded,
@@ -19,7 +19,8 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
       active,
       toggle,
       noRipple,
-      tag: Tag,
+      tag: Tag = 'button',
+      role = 'button',
       ...props
     },
     ref
@@ -74,6 +75,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
         disabled={disabled && Tag === 'button' ? true : undefined}
         href={href}
         ref={ref}
+        role={role}
         {...props}
       >
         {children}
@@ -93,6 +95,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
         disabled={disabled && Tag === 'button' ? true : undefined}
         href={href}
         ref={ref}
+        role={role}
         {...props}
       >
         {children}
@@ -101,6 +104,4 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
   }
 );
 
-MDBBtn.defaultProps = { tag: 'button', role: 'button', color: 'primary' };
-
 export default MDBBtn;
diff --git a/app/src/components/ButtonGroup/ButtonGroup.tsx b/app/src/components/ButtonGroup/ButtonGroup.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import type { ButtonGroupProps } from './types';
 
 const MDBBtnGroup: React.FC<ButtonGroupProps> = React.forwardRef<HTMLAllCollection, ButtonGroupProps>(
-  ({ className, children, shadow, toolbar, size, vertical, tag: Tag, ...props }, ref) => {
+  ({ className, children, shadow, toolbar, size, vertical, tag: Tag = 'div', role = 'group', ...props }, ref) => {
     let type;
 
     if (toolbar) {
@@ -16,13 +16,11 @@ const MDBBtnGroup: React.FC<ButtonGroupProps> = React.forwardRef<HTMLAllCollecti
     const classes = clsx(type, shadow && `shadow-${shadow}`, size && `btn-group-${size}`, className);
 
     return (
-      <Tag className={classes} ref={ref} {...props}>
+      <Tag className={classes} ref={ref} role={role} {...props}>
         {children}
       </Tag>
     );
   }
 );
 
-MDBBtnGroup.defaultProps = { tag: 'div', role: 'group' };
-
 export default MDBBtnGroup;
diff --git a/app/src/components/Card/Card.tsx b/app/src/components/Card/Card.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import type { CardProps } from './types';
 
 const MDBCard: React.FC<CardProps> = React.forwardRef<HTMLAllCollection, CardProps>(
-  ({ className, children, border, background, tag: Tag, shadow, alignment, ...props }, ref) => {
+  ({ className, children, border, background, tag: Tag = 'div', shadow, alignment, ...props }, ref) => {
     const classes = clsx(
       'card',
       border && `border border-${border}`,
@@ -21,6 +21,4 @@ const MDBCard: React.FC<CardProps> = React.forwardRef<HTMLAllCollection, CardPro
   }
 );
 
-MDBCard.defaultProps = { tag: 'div' };
-
 export default MDBCard;
diff --git a/app/src/components/Card/CardBody/CardBody.tsx b/app/src/components/Card/CardBody/CardBody.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import type { CardBodyProps } from './types';
 
 const MDBCardBody: React.FC<CardBodyProps> = React.forwardRef<HTMLAllCollection, CardBodyProps>(
-  ({ className, children, tag: Tag, ...props }, ref) => {
+  ({ className, children, tag: Tag = 'div', ...props }, ref) => {
     const classes = clsx('card-body', className);
 
     return (
@@ -14,6 +14,4 @@ const MDBCardBody: React.FC<CardBodyProps> = React.forwardRef<HTMLAllCollection,
   }
 );
 
-MDBCardBody.defaultProps = { tag: 'div' };
-
 export default MDBCardBody;
diff --git a/app/src/components/Card/CardFooter/CardFooter.tsx b/app/src/components/Card/CardFooter/CardFooter.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import type { CardFooterProps } from './types';
 
 const MDBCardFooter: React.FC<CardFooterProps> = React.forwardRef<HTMLAllCollection, CardFooterProps>(
-  ({ className, children, border, background, tag: Tag, ...props }, ref) => {
+  ({ className, children, border, background, tag: Tag = 'div', ...props }, ref) => {
     const classes = clsx('card-footer', border && `border-${border}`, background && `bg-${background}`, className);
 
     return (
@@ -14,6 +14,4 @@ const MDBCardFooter: React.FC<CardFooterProps> = React.forwardRef<HTMLAllCollect
   }
 );
 
-MDBCardFooter.defaultProps = { tag: 'div' };
-
 export default MDBCardFooter;
diff --git a/app/src/components/Card/CardGroup/CardGroup.tsx b/app/src/components/Card/CardGroup/CardGroup.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import type { CardGroupProps } from './types';
 
 const MDBCardGroup: React.FC<CardGroupProps> = React.forwardRef<HTMLAllCollection, CardGroupProps>(
-  ({ className, children, tag: Tag, ...props }, ref) => {
+  ({ className, children, tag: Tag = 'div', ...props }, ref) => {
     const classes = clsx('card-group', className);
 
     return (
@@ -14,6 +14,4 @@ const MDBCardGroup: React.FC<CardGroupProps> = React.forwardRef<HTMLAllCollectio
   }
 );
 
-MDBCardGroup.defaultProps = { tag: 'div' };
-
 export default MDBCardGroup;
diff --git a/app/src/components/Card/CardHeader/CardHeader.tsx b/app/src/components/Card/CardHeader/CardHeader.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import type { CardHeaderProps } from './types';
 
 const MDBCardHeader: React.FC<CardHeaderProps> = React.forwardRef<HTMLAllCollection, CardHeaderProps>(
-  ({ className, children, border, background, tag: Tag, ...props }, ref) => {
+  ({ className, children, border, background, tag: Tag = 'div', ...props }, ref) => {
     const classes = clsx('card-header', border && `border-${border}`, background && `bg-${background}`, className);
 
     return (
@@ -14,6 +14,4 @@ const MDBCardHeader: React.FC<CardHeaderProps> = React.forwardRef<HTMLAllCollect
   }
 );
 
-MDBCardHeader.defaultProps = { tag: 'div' };
-
 export default MDBCardHeader;
diff --git a/app/src/components/Card/CardOverlay/CardOverlay.tsx b/app/src/components/Card/CardOverlay/CardOverlay.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import type { CardOverlayProps } from './types';
 
 const MDBCardOverlay: React.FC<CardOverlayProps> = React.forwardRef<HTMLAllCollection, CardOverlayProps>(
-  ({ className, children, tag: Tag, ...props }, ref) => {
+  ({ className, children, tag: Tag = 'div', ...props }, ref) => {
     const classes = clsx('card-img-overlay', className);
 
     return (
@@ -14,6 +14,4 @@ const MDBCardOverlay: React.FC<CardOverlayProps> = React.forwardRef<HTMLAllColle
   }
 );
 
-MDBCardOverlay.defaultProps = { tag: 'div' };
-
 export default MDBCardOverlay;
diff --git a/app/src/components/Card/CardSubTitle/CardSubTitle.tsx b/app/src/components/Card/CardSubTitle/CardSubTitle.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import type { CardSubTitleProps } from './types';
 
 const MDBCardSubTitle: React.FC<CardSubTitleProps> = React.forwardRef<HTMLAllCollection, CardSubTitleProps>(
-  ({ className, children, tag: Tag, ...props }, ref) => {
+  ({ className, children, tag: Tag = 'p', ...props }, ref) => {
     const classes = clsx('card-subtitle', className);
 
     return (
@@ -14,6 +14,4 @@ const MDBCardSubTitle: React.FC<CardSubTitleProps> = React.forwardRef<HTMLAllCol
   }
 );
 
-MDBCardSubTitle.defaultProps = { tag: 'p' };
-
 export default MDBCardSubTitle;
diff --git a/app/src/components/Card/CardText/CardText.tsx b/app/src/components/Card/CardText/CardText.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import type { CardTextProps } from './types';
 
 const MDBCardText: React.FC<CardTextProps> = React.forwardRef<HTMLAllCollection, CardTextProps>(
-  ({ className, children, tag: Tag, ...props }, ref) => {
+  ({ className, children, tag: Tag = 'p', ...props }, ref) => {
     const classes = clsx('card-text', className);
 
     return (
@@ -14,6 +14,4 @@ const MDBCardText: React.FC<CardTextProps> = React.forwardRef<HTMLAllCollection,
   }
 );
 
-MDBCardText.defaultProps = { tag: 'p' };
-
 export default MDBCardText;
diff --git a/app/src/components/Card/CardTitle/CardTitle.tsx b/app/src/components/Card/CardTitle/CardTitle.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import type { CardTitleProps } from './types';
 
 const MDBCardTitle: React.FC<CardTitleProps> = React.forwardRef<HTMLAllCollection, CardTitleProps>(
-  ({ className, children, tag: Tag, ...props }, ref) => {
+  ({ className, children, tag: Tag = 'h5', ...props }, ref) => {
     const classes = clsx('card-title', className);
 
     return (
@@ -14,6 +14,4 @@ const MDBCardTitle: React.FC<CardTitleProps> = React.forwardRef<HTMLAllCollectio
   }
 );
 
-MDBCardTitle.defaultProps = { tag: 'h5' };
-
 export default MDBCardTitle;
diff --git a/app/src/components/Carousel/Carousel.tsx b/app/src/components/Carousel/Carousel.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import type { CarouselProps } from './types';
 
 import CarouselIndicators from './CarouselIndicators/CarouselIndicators';
@@ -8,13 +8,14 @@ import { CarouselContext } from './utils/CarouselContext';
 import { getCarouselItems, isVisible, queueCallback, reflow } from './utils/utils';
 
 const MDBCarousel: React.FC<CarouselProps> = ({
-  fade,
+  fade = false,
   className,
+  carouselInnerClassName,
   dark,
   children,
-  interval,
-  keyboard,
-  touch,
+  interval = 5000,
+  keyboard = false,
+  touch = true,
   showControls,
   showIndicators,
   onSlide,
@@ -34,14 +35,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
   const carouselRef = useRef<HTMLDivElement>(null);
 
   const classes = clsx('carousel', 'slide', fade && 'carousel-fade', dark && 'carousel-dark', className);
-
-  const pauseInterval = () => {
-    if (carouselInterval.current) {
-      clearInterval(carouselInterval.current);
-
-      carouselInterval.current = null;
-    }
-  };
+  const carouselInnerClasses = clsx('carousel-inner', carouselInnerClassName);
 
   const setElementActive = useCallback(
     (direction: string, newIndex?: number) => {
@@ -59,8 +53,17 @@ const MDBCarousel: React.FC<CarouselProps> = ({
     [active, itemsLength]
   );
 
+  const pauseInterval = useCallback(() => {
+    if (carouselInterval.current) {
+      clearInterval(carouselInterval.current);
+
+      carouselInterval.current = null;
+    }
+  }, []);
+
   const slide = useCallback(
     (direction: string, nextElement: HTMLDivElement, index?: number) => {
+      if (!items.current || items.current.length < 2) return;
       setIsTransitioning(true);
       const carouselElements = items.current as HTMLDivElement[];
       const activeElement = carouselElements[active];
@@ -114,7 +117,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
       }
     },
 
-    [carouselRef, active, setElementActive]
+    [carouselRef, active, setElementActive, pauseInterval]
   );
 
   const block = (timer: number) => {
@@ -194,14 +197,15 @@ const MDBCarousel: React.FC<CarouselProps> = ({
   }, [carouselRef, changeStep]);
 
   const startInterval = useCallback(() => {
+    const individualInterval = (children as ReactElement[])?.[active]?.props?.interval;
     if (carouselInterval.current) {
       clearInterval(carouselInterval.current);
 
       carouselInterval.current = null;
     }
 
-    carouselInterval.current = setInterval(changeNext, interval);
-  }, [changeNext, interval]);
+    carouselInterval.current = setInterval(changeNext, individualInterval || interval);
+  }, [changeNext, interval, children, active]);
 
   const startTouch = (e: React.TouchEvent<HTMLDivElement>) => {
     if (!touch) return;
@@ -277,12 +281,16 @@ const MDBCarousel: React.FC<CarouselProps> = ({
   }, [carouselRef]);
 
   useEffect(() => {
-    onSlide?.();
+    isTransitioning && onSlide?.();
   }, [isTransitioning, onSlide]);
 
   useEffect(() => {
     startInterval();
-  }, [startInterval]);
+
+    return () => {
+      pauseInterval();
+    };
+  }, [startInterval, pauseInterval]);
 
   return (
     <div
@@ -295,7 +303,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
       ref={carouselRef}
       {...props}
     >
-      <div className='carousel-inner'>
+      <div className={carouselInnerClasses}>
         <CarouselContext.Provider value={{ active }}>
           {showIndicators && <CarouselIndicators to={changeTo} imagesCount={itemsLength} />}
           {children}
@@ -306,6 +314,4 @@ const MDBCarousel: React.FC<CarouselProps> = ({
   );
 };
 
-MDBCarousel.defaultProps = { fade: false, interval: 5000, touch: true, keyboard: false };
-
 export default MDBCarousel;