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;