release: 6.2.0

Author: mako3577

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/

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",

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;

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;

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;

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;

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;

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;

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;

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;