Generate version 5.0.0

Author: krzysiu-w

README.txt

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

app/demo/App.tsx

@@ -1,39 +1,20 @@
 import React from "react";
-import { MDBBtn, MDBContainer, MDBIcon } from "mdb-react-ui-kit";
-function App() {
+import {
+  MDBDropdown,
+  MDBDropdownMenu,
+  MDBDropdownToggle,
+  MDBDropdownItem,
+} from "mdb-react-ui-kit";
+
+export default function App() {
   return (
-    <MDBContainer fluid>
-      <div
-        className="d-flex justify-content-center align-items-center"
-        style={{ height: "100vh" }}
-      >
-        <div className="text-center">
-          <img
-            className="mb-4"
-            src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
-            style={{ width: 250, height: 90 }}
-          />
-          <h5 className="mb-3">
-            Thank you for using our product. We're glad you're with us.
-          </h5>
-          <p className="mb-3">MDB Team</p>
-          <MDBBtn
-            tag="a"
-            href="https://mdbootstrap.com/docs/standard/getting-started/"
-            target="_blank"
-            role="button"
-          >
-            Start MDB tutorial
-          </MDBBtn>
-          <p className="mt-4">
-            <a href="https://mdbootstrap.com/sale/free/">
-              <MDBIcon far icon="surprise" size="lg" /> Free users buy cheaper
-              ..{" "}
-            </a>
-          </p>
-        </div>
-      </div>
-    </MDBContainer>
+    <MDBDropdown>
+      <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
+      <MDBDropdownMenu>
+        <MDBDropdownItem>Action</MDBDropdownItem>
+        <MDBDropdownItem>Another action</MDBDropdownItem>
+        <MDBDropdownItem>Something else here</MDBDropdownItem>
+      </MDBDropdownMenu>
+    </MDBDropdown>
   );
 }
-export default App;

app/package.json

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

app/src/components/Accordion/Accordion.tsx

@@ -4,8 +4,8 @@ import type { AccordionProps } from './types';
 import { AccordionContext } from './AccordionContext';
 
 const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollection, AccordionProps>(
-  ({ alwaysOpen, className, flush, initialActive, tag: Tag, children, onChange, ...props }, ref) => {
-    const classes = clsx('accordion', flush && 'accordion-flush', className);
+  ({ alwaysOpen, borderless, className, flush, initialActive, tag: Tag, children, onChange, ...props }, ref) => {
+    const classes = clsx('accordion', flush && 'accordion-flush', borderless && 'accordion-borderless', className);
 
     const [activeItem, setActiveItem] = useState(initialActive);
 

app/src/components/Accordion/types.tsx

@@ -3,6 +3,7 @@ import { BaseComponent } from "../../types/baseComponent";
 
 interface AccordionProps extends BaseComponent {
   alwaysOpen?: boolean;
+  borderless?: boolean;
   flush?: boolean;
   initialActive?: number;
   onChange?: (id: number) => void;

app/src/components/Badge/types.tsx

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

app/src/components/Button/types.tsx

@@ -18,8 +18,8 @@ interface ButtonProps extends Omit<joinedTypes, 'size' | 'color'> {
     | 'white'
     | 'info'
     | 'none'
-    | 'link';
-
+    | 'link'
+    | 'tertiary';
   floating?: boolean;
   noRipple?: boolean;
   outline?: boolean;

app/src/components/ButtonGroup/types.tsx

@@ -1,4 +1,5 @@
 import { BaseComponent } from "../../types/baseComponent";
+
 import { size } from "../../types/size";
 
 interface ButtonGroupProps extends BaseComponent {

app/src/components/Carousel/CarouselItem/CarouselItem.tsx

@@ -10,6 +10,7 @@ const MDBCarouselItem: React.FC<CarouselItemProps> = ({
   src,
   alt,
   itemId,
+  video,
   ...props
 }) => {
   const { active } = useContext(CarouselContext);
@@ -31,7 +32,13 @@ const MDBCarouselItem: React.FC<CarouselItemProps> = ({
 
   return (
     <div className='carousel-item' ref={itemRef}>
-      <img className={className} src={src} alt={alt} {...props} />
+      {video ? (
+        <video className={className} autoPlay loop muted {...props}>
+          <source src={src} type='video/mp4' />
+        </video>
+      ) : (
+        <img className={className} src={src} alt={alt} {...props} />
+      )}
       <div className={captionClasses}>{children}</div>
     </div>
   );

app/src/components/Carousel/CarouselItem/types.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { ImgHTMLAttributes, VideoHTMLAttributes } from 'react';
 
-type CarouselItemProps = {
-  className?: string;
-  interval?: number;
+type ImgVideo = ImgHTMLAttributes<HTMLImageElement> & VideoHTMLAttributes<HTMLVideoElement>;
+
+type CarouselItemProps = ImgVideo & {
+  captionClassName?: string;
   itemId: number;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
+  video?: boolean;
 };
 
 export { CarouselItemProps };