1.0.0

README.txt

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

app/package.json

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

app/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+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, ...props }, ref) => {
+    const classes = clsx('accordion', flush && 'accordion-flush', className);
+
+    const [activeItem, setActiveItem] = useState(initialActive);
+
+    return (
+      <AccordionContext.Provider value={{ activeItem, setActiveItem, alwaysOpen, initialActive }}>
+        <Tag className={classes} ref={ref} {...props}>
+          {children}
+        </Tag>
+      </AccordionContext.Provider>
+    );
+  }
+);
+
+MDBAccordion.defaultProps = { tag: 'div', initialActive: '' };
+
+export default MDBAccordion;

app/src/components/Accordion/AccordionContext.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface AccordionProps {
+  activeItem: string | undefined;
+  setActiveItem: React.SetStateAction<any>;
+  alwaysOpen: boolean | undefined;
+  initialActive: string | undefined;
+}
+
+const AccordionContext = React.createContext<AccordionProps>({
+  activeItem: '',
+  setActiveItem: null,
+  alwaysOpen: false,
+  initialActive: '',
+});
+
+export { AccordionContext };

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

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+import React, { useContext, useState } from 'react';
+import { AccordionContext } from '../AccordionContext';
+import type { AccordionItemProps } from './types';
+import MDBCollapse from '../../Collapse/Collapse';
+
+const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllCollection, AccordionItemProps>(
+  ({ className, bodyClassName, headerClassName, collapseId, headerTitle, tag: Tag, children, ...props }, ref) => {
+    const { activeItem, setActiveItem, alwaysOpen, initialActive } = useContext(AccordionContext);
+
+    const [openState, setOpenState] = useState(initialActive);
+
+    const classes = clsx('accordion-item', className);
+    const headerClasses = clsx('accordion-header', headerClassName);
+    const bodyClasses = clsx('accordion-body', bodyClassName);
+    const buttonClasses = clsx(
+      'accordion-button',
+      alwaysOpen ? collapseId !== openState && 'collapsed' : collapseId !== activeItem && 'collapsed'
+    );
+
+    const toggleAccordion = (value: string) => {
+      if (alwaysOpen) {
+        value !== openState ? setOpenState(value) : setOpenState('');
+      } else {
+        value !== activeItem ? setActiveItem(value) : setActiveItem('');
+      }
+    };
+
+    return (
+      <Tag className={classes} ref={ref} {...props}>
+        <h2 className={headerClasses}>
+          <button onClick={() => toggleAccordion(collapseId)} className={buttonClasses} type='button'>
+            {headerTitle}
+          </button>
+        </h2>
+        <MDBCollapse id={collapseId} show={alwaysOpen ? openState : activeItem}>
+          <div className={bodyClasses}>{children}</div>
+        </MDBCollapse>
+      </Tag>
+    );
+  }
+);
+
+MDBAccordionItem.defaultProps = { tag: 'div' };
+
+export default MDBAccordionItem;

app/src/components/Accordion/AccordionItem/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+declare const MDBAccordionItem: React.FunctionComponent<{
+  className?: string;
+  bodyClassName?: string;
+  headerClassName?: string;
+  collapseId: string;
+  headerTitle?: string;
+  tag?: React.ComponentProps<any>;
+  [rest: string]: any;
+}>;
+
+export default MDBAccordionItem;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type AccordionItemProps = {
+  className?: string;
+  bodyClassName?: string;
+  headerClassName?: string;
+  collapseId: string;
+  headerTitle?: string;
+  tag?: React.ComponentProps<any>;
+  [rest: string]: any;
+};
+
+export { AccordionItemProps };

app/src/components/Accordion/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+declare const MDBAccordion: React.FunctionComponent<{
+  alwaysOpen?: boolean;
+  className?: string;
+  flush?: boolean;
+  initialActive?: string;
+  tag?: React.ComponentProps<any>;
+  [rest: string]: any;
+}>;
+
+export default MDBAccordion;

app/src/components/Accordion/types.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+type AccordionProps = {
+  alwaysOpen?: boolean;
+  className?: string;
+  flush?: boolean;
+  initialActive?: string;
+  tag?: React.ComponentProps<any>;
+  [rest: string]: any;
+};
+
+export { AccordionProps };

app/src/components/Collapse/Collapse.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { CollapseProps } from './types';
 
 const MDBCollapse: React.FC<CollapseProps> = ({
@@ -28,6 +28,18 @@ const MDBCollapse: React.FC<CollapseProps> = ({
   );
   const refCollapse = useRef<HTMLElement>(null);
 
+  const handleResize = useCallback(() => {
+    if (showCollapse || statement) {
+      setCollapseHeight(undefined);
+    }
+  }, [showCollapse, statement]);
+
+  useEffect(() => {
+    if (collapseHeight === undefined && (showCollapse || statement)) {
+      setCollapseHeight(refCollapse?.current?.scrollHeight);
+    }
+  }, [collapseHeight, showCollapse, statement]);
+
   useEffect(() => {
     if (typeof show === 'string') {
       setShowCollapseString(show);
@@ -47,7 +59,7 @@ const MDBCollapse: React.FC<CollapseProps> = ({
     return () => {
       clearTimeout(timer);
     };
-  }, [collapseHeight, show, showCollapse, id, showCollapseString, statement]);
+  }, [show, showCollapse, id, showCollapseString, statement]);
 
   useEffect(() => {
     if (showCollapse || statement) {
@@ -57,6 +69,14 @@ const MDBCollapse: React.FC<CollapseProps> = ({
     }
   }, [showCollapse, statement]);
 
+  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}