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 };

app/src/components/Carousel/types.tsx

@@ -1,17 +1,15 @@
-import React from 'react';
+import { BaseComponent } from "../../types/baseComponent";
 
-type CarouselProps = {
-  className?: string;
+interface CarouselProps extends BaseComponent {
+  dark?: boolean;
   fade?: boolean;
   interval?: number;
   keyboard?: boolean;
-  onSlide?: () => any;
+  onSlide?: () => void;
   pause?: boolean;
   showControls?: boolean;
   showIndicators?: boolean;
   touch?: boolean;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-};
+}
 
 export { CarouselProps };

app/src/components/Collapse/Collapse.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { CollapseProps } from './types';
 
 const MDBCollapse: React.FC<CollapseProps> = ({
@@ -10,64 +10,68 @@ const MDBCollapse: React.FC<CollapseProps> = ({
   navbar,
   tag: Tag,
   collapseRef,
+  style,
   ...props
 }): JSX.Element => {
-  const classes = clsx('collapse', navbar && 'navbar-collapse', className);
+  const [showCollapse, setShowCollapse] = useState<boolean | undefined>(false);
+  const [collapseHeight, setCollapseHeight] = useState<string | number | undefined>(undefined);
+  const [transition, setTransition] = useState(false);
+
+  const classes = clsx(
+    transition ? 'collapsing' : 'collapse',
+    !transition && showCollapse && 'show',
+    navbar && 'navbar-collapse',
+    className
+  );
   const collapseEl = useRef<HTMLElement>(null);
-
-  const isFirstRender = useRef(show);
-
   const refCollapse = collapseRef ?? collapseEl;
 
-  useEffect(() => {
-    if (isFirstRender.current && show) {
-      isFirstRender.current = false;
-      refCollapse?.current?.classList.add('show');
+  const handleResize = useCallback(() => {
+    if (showCollapse) {
+      setCollapseHeight(undefined);
+    }
+  }, [showCollapse]);
 
-      return;
+  useEffect(() => {
+    if (collapseHeight === undefined && showCollapse) {
+      setCollapseHeight(refCollapse?.current?.scrollHeight);
     }
-  }, [refCollapse, show]);
+  }, [collapseHeight, showCollapse, refCollapse]);
 
   useEffect(() => {
-    const collapseElement = refCollapse.current;
+    setShowCollapse(show);
 
-    if (!collapseElement || isFirstRender.current) {
-      return;
+    if (showCollapse) {
+      setTransition(true);
     }
 
-    const toggleCollapse = () => {
-      collapseElement.classList.toggle('collapsing');
-      collapseElement.classList.toggle('collapse');
-    };
-
-    if (show) {
-      toggleCollapse();
-      collapseElement.style.height = `${collapseElement.scrollHeight}px`;
+    const timer = setTimeout(() => {
+      setTransition(false);
+    }, 350);
 
-      setTimeout(() => {
-        toggleCollapse();
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [show, showCollapse]);
 
-        collapseElement.classList.toggle('show');
-        collapseElement.style.height = '';
-      }, 350);
+  useEffect(() => {
+    if (showCollapse) {
+      setCollapseHeight(refCollapse?.current?.scrollHeight);
     } else {
-      collapseElement.style.height = `${collapseElement.scrollHeight}px`;
-
-      setTimeout(() => {
-        toggleCollapse();
+      setCollapseHeight(0);
+    }
+  }, [showCollapse, refCollapse]);
 
-        collapseElement.style.height = '';
-        collapseElement.classList.toggle('show');
-      });
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
 
-      setTimeout(() => {
-        toggleCollapse();
-      }, 350);
-    }
-  }, [show, refCollapse]);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
 
   return (
-    <Tag id={id} className={classes} {...props} ref={refCollapse}>
+    <Tag style={{ height: collapseHeight, ...style }} id={id} className={classes} {...props} ref={refCollapse}>
       {children}
     </Tag>
   );

app/src/components/Dropdown/DropdownMenu/DropdownMenu.tsx

@@ -6,6 +6,8 @@ import { useKeyboard } from '../hooks/useKeyboard';
 import { useFade } from '../hooks/useFade';
 import type { DropdownMenuProps } from './types';
 import './style.css';
+import { usePopper } from 'react-popper';
+import { flip } from '@popperjs/core';
 
 const MDBDropdownMenu = ({
   className,
@@ -18,12 +20,47 @@ const MDBDropdownMenu = ({
   alwaysOpen,
   ...props
 }: DropdownMenuProps) => {
-  const { activeIndex, setPopperElement, isOpenState, animation, styles } = useDropdownContext();
+  const {
+    activeIndex,
+    setPopperElement,
+    isOpenState,
+    animation,
+    referenceElement,
+    popperElement,
+    options,
+    dropleft,
+    dropup,
+    dropright,
+  } = useDropdownContext();
 
   const { show, isFadeIn, isFadeOut } = useFade();
 
   useKeyboard(children);
 
+  const calculatePlacement = () => {
+    if (dropright) {
+      return 'right-start';
+    }
+
+    if (dropleft) {
+      return 'left-start';
+    }
+
+    const isEnd = popperElement && getComputedStyle(popperElement).getPropertyValue('--bs-position').trim() === 'end';
+
+    if (dropup) {
+      return isEnd ? 'top-end' : 'top-start';
+    }
+
+    return isEnd ? 'bottom-end' : 'bottom-start';
+  };
+
+  const { styles } = usePopper(referenceElement, popperElement, {
+    placement: calculatePlacement(),
+    modifiers: [flip],
+    ...options,
+  });
+
   const classes = clsx(
     'dropdown-menu',
     dark && 'dropdown-menu-dark',

app/src/components/Dropdown/ItemChild/ItemChild.tsx

@@ -38,5 +38,5 @@ export const ItemChild = ({
     return <h6 className='dropdown-header'>{children}</h6>;
   }
 
-  return null;
+  return <>{children}</>;
 };