release: 8.0.0

Author: mako3577

LICENSE

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

README.txt

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

app/package.json

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from '../../../../types/baseComponent';
 
 type CarouselCaptionProps = BaseComponent & {
   className?: string;

app/src/free/components/Carousel/CarouselCaption/types.tsx

@@ -1,4 +1,4 @@
-import { BaseComponent } from 'src/types/baseComponent';
+import { BaseComponent } from '../../../../types/baseComponent';
 
 type CarouselItemProps = BaseComponent & {
   itemId: number;

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

@@ -3,6 +3,7 @@
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { CollapseProps } from './types';
+import useHeight from './hooks/useHeight';
 
 const MDBCollapse: React.FC<CollapseProps> = ({
   className,
@@ -18,7 +19,7 @@ const MDBCollapse: React.FC<CollapseProps> = ({
   ...props
 }): JSX.Element => {
   const [showCollapse, setShowCollapse] = useState<boolean | undefined>(false);
-  const [collapseHeight, setCollapseHeight] = useState<string | number | undefined>(undefined);
+  const [collapseHeight, setCollapseHeight] = useState<string | undefined>(undefined);
   const [transition, setTransition] = useState(false);
 
   const classes = clsx(
@@ -29,6 +30,7 @@ const MDBCollapse: React.FC<CollapseProps> = ({
   );
   const collapseEl = useRef<HTMLElement>(null);
   const refCollapse = collapseRef ?? collapseEl;
+  const contentRef = useRef<HTMLDivElement>(null);
 
   const handleResize = useCallback(() => {
     if (showCollapse) {
@@ -37,10 +39,14 @@ const MDBCollapse: React.FC<CollapseProps> = ({
   }, [showCollapse]);
 
   useEffect(() => {
-    if (collapseHeight === undefined && showCollapse) {
-      setCollapseHeight(refCollapse?.current?.scrollHeight);
-    }
-  }, [collapseHeight, showCollapse, refCollapse]);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+
+  useHeight({ showCollapse, setCollapseHeight, refCollapse, contentRef });
 
   useEffect(() => {
     if (showCollapse !== open) {
@@ -61,25 +67,11 @@ const MDBCollapse: React.FC<CollapseProps> = ({
     };
   }, [open, showCollapse, onOpen, onClose]);
 
-  useEffect(() => {
-    if (showCollapse) {
-      setCollapseHeight(refCollapse?.current?.scrollHeight);
-    } else {
-      setCollapseHeight(0);
-    }
-  }, [showCollapse, refCollapse, children]);
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [handleResize]);
-
   return (
     <Tag style={{ height: collapseHeight, ...style }} id={id} className={classes} {...props} ref={refCollapse}>
-      {children}
+      <div ref={contentRef} className='collapse-content'>
+        {children}
+      </div>
     </Tag>
   );
 };

app/src/free/components/Collapse/Collapse.tsx

@@ -0,0 +1,49 @@
+import { useEffect, Dispatch } from 'react';
+
+type useHeightType = {
+  showCollapse?: boolean;
+  setCollapseHeight: Dispatch<React.SetStateAction<string | undefined>>;
+  refCollapse: React.RefObject<HTMLElement>;
+  contentRef: React.RefObject<HTMLElement>;
+};
+export default function useHeight({ showCollapse, setCollapseHeight, refCollapse, contentRef }: useHeightType) {
+  useEffect(() => {
+    if (!showCollapse) {
+      setCollapseHeight('0px');
+    }
+    // eslint-disable-next-line
+  }, [showCollapse]);
+
+  useEffect(() => {
+    const collapseEl = refCollapse.current;
+    const handleResize = (content: ResizeObserverEntry) => {
+      if (!collapseEl) {
+        return;
+      }
+
+      const contentHeight = content.contentRect.height;
+      const computed = window.getComputedStyle(collapseEl);
+
+      const offsetY =
+        parseFloat(computed.paddingTop) +
+        parseFloat(computed.paddingBottom) +
+        parseFloat(computed.marginBottom) +
+        parseFloat(computed.marginTop);
+
+      const height = `${contentHeight + offsetY}px`;
+
+      setCollapseHeight(height);
+    };
+
+    const observer = new ResizeObserver(([content]) => {
+      handleResize(content);
+    });
+
+    observer.observe(contentRef.current as Element);
+
+    return () => {
+      observer.disconnect();
+    };
+    // eslint-disable-next-line
+  }, []);
+}

app/src/free/components/Collapse/hooks/useHeight.tsx

@@ -4,7 +4,6 @@ import React, { MouseEvent } from 'react';
 import { useDropdownContext } from '../hooks/useDropdownContext';
 import { ItemChild } from '../ItemChild/ItemChild';
 import type { DropdownItemProps } from './types';
-import './style.css';
 
 const MDBDropdownItem = ({
   onClick,

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

@@ -7,7 +7,6 @@ import { useDropdownContext } from '../hooks/useDropdownContext';
 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';