Generate v. 5.1.0

README.txt

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

app/package.json

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

app/src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -14,6 +14,7 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
       collapseId,
       headerTitle,
       headerStyle,
+      btnClassName,
       tag: Tag,
       children,
       ...props
@@ -29,7 +30,8 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
     const bodyClasses = clsx('accordion-body', bodyClassName);
     const buttonClasses = clsx(
       'accordion-button',
-      alwaysOpen ? collapseId !== openState && 'collapsed' : collapseId !== activeItem && 'collapsed'
+      alwaysOpen ? collapseId !== openState && 'collapsed' : collapseId !== activeItem && 'collapsed',
+      btnClassName
     );
 
     const toggleAccordion = (value: number) => {

app/src/components/Accordion/AccordionItem/types.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { BaseComponent } from "../../../types/baseComponent";
+import React from 'react';
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface AccordionItemProps extends BaseComponent {
   bodyClassName?: string;
@@ -8,6 +8,7 @@ interface AccordionItemProps extends BaseComponent {
   headerClassName?: string;
   headerStyle?: React.CSSProperties;
   headerTitle?: React.ReactNode;
+  btnClassName?: React.ReactNode;
   ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;
 }

app/src/components/Accordion/types.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { BaseComponent } from "../../types/baseComponent";
+import React from 'react';
+import { BaseComponent } from '../../types/baseComponent';
 
 interface AccordionProps extends BaseComponent {
   alwaysOpen?: boolean;

app/src/components/Badge/types.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import { BaseComponent } from "../../types/baseComponent";
-
-import { backgroundColor } from "../../types/colors";
+import React from 'react';
+import { BaseComponent } from '../../types/baseComponent';
+import { backgroundColor } from '../../types/colors';
 
 interface BadgeProps extends BaseComponent {
   color?: backgroundColor;

app/src/components/ButtonGroup/types.tsx

@@ -1,11 +1,10 @@
-import { BaseComponent } from "../../types/baseComponent";
-
-import { size } from "../../types/size";
+import { BaseComponent } from '../../types/baseComponent';
+import { size } from '../../types/size';
 
 interface ButtonGroupProps extends BaseComponent {
   ref?: React.ForwardedRef<HTMLAllCollection>;
   size?: size;
-  shadow?: "0" | "1" | "2" | "3" | "4" | "5";
+  shadow?: '0' | '1' | '2' | '3' | '4' | '5';
   toolbar?: boolean;
   vertical?: boolean;
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardBody/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface CardBodyProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardFooter/types.tsx

@@ -1,5 +1,5 @@
-import { BaseComponent } from "../../../types/baseComponent";
-import { backgroundColor } from "../../../types/colors";
+import { BaseComponent } from '../../../types/baseComponent';
+import { backgroundColor } from '../../../types/colors';
 
 interface CardFooterProps extends BaseComponent {
   border?: string;

app/src/components/Card/CardGroup/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface CardGroupProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardHeader/types.tsx

@@ -1,5 +1,5 @@
-import { BaseComponent } from "../../../types/baseComponent";
-import { backgroundColor } from "../../../types/colors";
+import { BaseComponent } from '../../../types/baseComponent';
+import { backgroundColor } from '../../../types/colors';
 
 interface CardHeaderProps extends BaseComponent {
   border?: string;

app/src/components/Card/CardOverlay/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface CardOverlayProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardSubTitle/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface CardSubTitleProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardText/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface CardTextProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/CardTitle/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface CardTitleProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Card/types.tsx

@@ -1,11 +1,11 @@
-import { backgroundColor } from "../../types/colors";
-import { BaseComponent } from "../../types/baseComponent";
+import { backgroundColor } from '../../types/colors';
+import { BaseComponent } from '../../types/baseComponent';
 
 interface CardProps extends BaseComponent {
   alignment?: string;
   border?: string;
   background?: backgroundColor;
-  shadow?: "0" | "1" | "2" | "3" | "4" | "5";
+  shadow?: '0' | '1' | '2' | '3' | '4' | '5';
   ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;
 }

app/src/components/Carousel/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../types/baseComponent";
+import { BaseComponent } from '../../types/baseComponent';
 
 interface CarouselProps extends BaseComponent {
   dark?: boolean;

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

@@ -15,12 +15,13 @@ const MDBDropdownItem = ({
   header,
   disabled,
   href,
+  preventCloseOnClick,
   ...props
 }: DropdownItemProps) => {
   const { setIsOpenState, onHide } = useDropdownContext();
 
   const handleClose = (e: MouseEvent<HTMLElement>) => {
-    if (disabled) return;
+    if (disabled || preventCloseOnClick) return;
 
     onHide?.();
     setIsOpenState(false);

app/src/components/Dropdown/DropdownItem/types.ts

@@ -1,5 +1,5 @@
-import { BaseComponent } from "../../../../src/types/baseComponent";
-import { ReactNode, ComponentProps } from "react";
+import { BaseComponent } from '../../../../src/types/baseComponent';
+import { ReactNode, ComponentProps } from 'react';
 
 export interface DropdownItemProps extends BaseComponent {
   tag?: ComponentProps<any>;
@@ -11,4 +11,5 @@ export interface DropdownItemProps extends BaseComponent {
   href?: string;
   disabled?: boolean;
   className?: string;
+  preventCloseOnClick?: boolean;
 }

app/src/components/Dropdown/DropdownMenu/types.ts

@@ -1,23 +1,23 @@
-import { BaseComponent } from "../../../types/baseComponent";
-import { ReactElement, ComponentProps } from "react";
+import { BaseComponent } from '../../../types/baseComponent';
+import { ReactElement, ComponentProps } from 'react';
 
 export interface DropdownMenuProps extends BaseComponent {
   appendToBody?: boolean;
   dark?: boolean;
   responsive?:
-    | ""
-    | "start"
-    | "end"
-    | "sm-start"
-    | "md-start"
-    | "lg-start"
-    | "xl-start"
-    | "xxl-start"
-    | "sm-end"
-    | "md-end"
-    | "lg-end"
-    | "xl-end"
-    | "xxl-end";
+    | ''
+    | 'start'
+    | 'end'
+    | 'sm-start'
+    | 'md-start'
+    | 'lg-start'
+    | 'xl-start'
+    | 'xxl-start'
+    | 'sm-end'
+    | 'md-end'
+    | 'lg-end'
+    | 'xl-end'
+    | 'xxl-end';
   tag?: ComponentProps<any>;
   children: ReactElement[] | ReactElement;
   alwaysOpen?: boolean;

app/src/components/Dropdown/DropdownToggle/types.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
-import { BaseComponent } from "../../../../src/types/baseComponent";
+import { ComponentProps } from 'react';
+import { BaseComponent } from '../../../../src/types/baseComponent';
 
 export interface DropdownToggleProps extends BaseComponent {
   split?: boolean;

app/src/components/Dropdown/types.ts

@@ -1,6 +1,5 @@
-import { BaseComponent } from "../../types/baseComponent";
-
-import { ReactNode, ComponentProps } from "react";
+import { BaseComponent } from '../../types/baseComponent';
+import { ReactNode, ComponentProps } from 'react';
 
 export interface DropdownProps extends BaseComponent {
   animation?: boolean;

app/src/components/ListGroup/ListGroupItem/types.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { backgroundColor } from "../../../types/colors";
-import { BaseComponent } from "../../../types/baseComponent";
+import React from 'react';
+import { backgroundColor } from '../../../types/colors';
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface ListGroupItemProps extends BaseComponent {
   action?: boolean;

app/src/components/ListGroup/types.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { BaseComponent } from "../../types/baseComponent";
+import React from 'react';
+import { BaseComponent } from '../../types/baseComponent';
 
 interface ListGroupProps extends BaseComponent {
   horizontal?: boolean;

app/src/components/Modal/ModalBody/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface ModalBodyProps extends BaseComponent {
   ref?: React.ForwardedRef<HTMLAllCollection>;

app/src/components/Modal/ModalContent/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface ModalContentProps extends BaseComponent {
   ref?: React.ForwardedRef<HTMLAllCollection>;

app/src/components/Modal/ModalDialog/types.tsx

@@ -1,17 +1,17 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface ModalDialogProps extends BaseComponent {
   centered?: boolean;
   size?:
-    | "sm"
-    | "lg"
-    | "xl"
-    | "fullscreen"
-    | "fullscreen-sm-down"
-    | "fullscreen-md-down"
-    | "fullscreen-lg-down"
-    | "fullscreen-xl-down"
-    | "fullscreen-xxl-down";
+    | 'sm'
+    | 'lg'
+    | 'xl'
+    | 'fullscreen'
+    | 'fullscreen-sm-down'
+    | 'fullscreen-md-down'
+    | 'fullscreen-lg-down'
+    | 'fullscreen-xl-down'
+    | 'fullscreen-xxl-down';
   scrollable?: boolean;
   ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;

app/src/components/Modal/ModalFooter/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface ModalFooterProps extends BaseComponent {
   ref?: React.ForwardedRef<HTMLAllCollection>;

app/src/components/Modal/ModalHeader/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface ModalHeaderProps extends BaseComponent {
   ref?: React.ForwardedRef<HTMLAllCollection>;

app/src/components/Modal/ModalTitle/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface ModalTitleProps extends BaseComponent {
   ref?: React.ForwardedRef<HTMLAllCollection>;

app/src/components/Modal/types.tsx

@@ -1,7 +1,7 @@
-import { BaseComponent } from "../../types/baseComponent";
+import { BaseComponent } from '../../types/baseComponent';
 
 interface ModalProps extends BaseComponent {
-  animationDirection?: "top" | "bottom" | "right" | "left";
+  animationDirection?: 'top' | 'bottom' | 'right' | 'left';
   appendToBody?: boolean;
   backdrop?: boolean;
   closeOnEsc?: boolean;

app/src/components/Popover/PopoverBody/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../../types/baseComponent";
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface PopoverBodyProps extends BaseComponent {
   tag?: React.ComponentProps<any>;

app/src/components/Popover/types.tsx

@@ -1,5 +1,5 @@
-import { placement } from "../../types/placement";
-import { ButtonProps } from "../Button/types";
+import { placement } from '../../types/placement';
+import { ButtonProps } from '../Button/types';
 
 interface PopoverProps extends ButtonProps {
   btnChildren?: React.ReactNode;

app/src/components/Progress/ProgressBar/types.tsx

@@ -1,5 +1,5 @@
-import { BaseComponent } from "../../../types/baseComponent";
-import { backgroundColor } from "../../../types/colors";
+import { BaseComponent } from '../../../types/baseComponent';
+import { backgroundColor } from '../../../types/colors';
 
 interface ProgressBarProps extends BaseComponent {
   animated?: boolean;

app/src/components/Progress/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from "../../types/baseComponent";
+import { BaseComponent } from '../../types/baseComponent';
 
 interface ProgressProps extends BaseComponent {
   height?: number | string;

app/src/components/Spinner/types.tsx

@@ -1,7 +1,6 @@
-import { BaseComponent } from "../../types/baseComponent";
-
-import { textColor } from "../../types/colors";
-import { size } from "../../types/size";
+import { BaseComponent } from '../../types/baseComponent';
+import { textColor } from '../../types/colors';
+import { size } from '../../types/size';
 
 interface SpinnerProps extends BaseComponent {
   color?: textColor;

app/src/components/Tooltip/types.tsx

@@ -1,6 +1,5 @@
-import { BaseComponent } from "../../types/baseComponent";
-
-import { placement } from "../../types/placement";
+import { BaseComponent } from '../../types/baseComponent';
+import { placement } from '../../types/placement';
 
 interface TooltipProps extends BaseComponent {
   disableMouseDown?: boolean;

app/src/data/Tables/types.tsx

@@ -1,8 +1,7 @@
-import { backgroundColor, textColor } from "../../types/colors";
+import { backgroundColor, textColor } from '../../types/colors';
 
-interface TableProps
-  extends Omit<React.TableHTMLAttributes<HTMLTableElement>, "align"> {
-  align?: "top" | "middle" | "bottom";
+interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'align'> {
+  align?: 'top' | 'middle' | 'bottom';
   borderColor?: textColor;
   color?: backgroundColor;
   bordered?: boolean;