release: 6.3.0

README.txt

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

app/package.json

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

app/src/components/Accordion/Accordion.tsx

@@ -1,26 +1,34 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import type { AccordionProps } from './types';
 import { AccordionContext } from './AccordionContext';
 
 const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollection, AccordionProps>(
   (
-    { alwaysOpen, borderless, className, flush, initialActive = 0, tag: Tag = 'div', children, onChange, ...props },
+    {
+      alwaysOpen,
+      borderless,
+      className,
+      flush,
+      active,
+      initialActive = 0,
+      tag: Tag = 'div',
+      children,
+      onChange,
+      ...props
+    },
     ref
   ) => {
+    const isControlled = useMemo(() => typeof active !== 'undefined', [active]);
     const classes = clsx('accordion', flush && 'accordion-flush', borderless && 'accordion-borderless', className);
 
     const [activeItem, setActiveItem] = useState(initialActive);
 
-    useEffect(() => {
-      if (!activeItem) return;
-
-      onChange && onChange(activeItem);
-    }, [onChange, activeItem]);
-
     return (
       <Tag className={classes} ref={ref} {...props}>
-        <AccordionContext.Provider value={{ activeItem, setActiveItem, alwaysOpen, initialActive }}>
+        <AccordionContext.Provider
+          value={{ activeItem: isControlled ? active : activeItem, setActiveItem, alwaysOpen, initialActive, onChange }}
+        >
           {children}
         </AccordionContext.Provider>
       </Tag>

app/src/components/Accordion/AccordionContext.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
 interface AccordionProps {
-  activeItem?: number;
+  activeItem?: number | number[];
   setActiveItem: React.SetStateAction<any>;
   alwaysOpen?: boolean;
-  initialActive?: number;
+  initialActive?: number | number[];
+  onChange?: (id: number | number[]) => void;
 }
 
 const AccordionContext = React.createContext<AccordionProps>({

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useMemo, useCallback } from 'react';
 import { AccordionContext } from '../AccordionContext';
 import type { AccordionItemProps } from './types';
 import MDBCollapse from '../../Collapse/Collapse';
@@ -21,26 +21,42 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
     },
     ref
   ) => {
-    const { activeItem, setActiveItem, alwaysOpen, initialActive } = useContext(AccordionContext);
+    const { activeItem, setActiveItem, alwaysOpen, onChange } = useContext(AccordionContext);
 
-    const [openState, setOpenState] = useState(initialActive);
+    const isCollapsed: boolean = useMemo(() => {
+      const isArray = Array.isArray(activeItem);
+      if (isArray) {
+        return activeItem.includes(collapseId);
+      }
+      return activeItem === collapseId;
+    }, [activeItem, collapseId]);
 
     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',
-      btnClassName
-    );
+    const buttonClasses = clsx('accordion-button', !isCollapsed && 'collapsed', btnClassName);
 
-    const toggleAccordion = (value: number) => {
-      if (alwaysOpen) {
-        value !== openState ? setOpenState(value) : setOpenState(0);
-      } else {
-        value !== activeItem ? setActiveItem(value) : setActiveItem(0);
-      }
-    };
+    const toggleAccordion = useCallback(
+      (itemId: number) => {
+        let newValue: number | number[] = itemId;
+        const isArray = Array.isArray(activeItem);
+
+        if (isArray) {
+          activeItem.includes(itemId)
+            ? (newValue = activeItem.filter((item) => item !== itemId))
+            : (newValue = alwaysOpen ? [...activeItem, itemId] : [itemId]);
+        } else {
+          newValue = activeItem === itemId ? 0 : itemId;
+
+          // if alwaysOpen is true, we must convert newValue to array
+          alwaysOpen && (newValue = [newValue]);
+        }
+
+        onChange?.(newValue);
+        setActiveItem(newValue);
+      },
+      [onChange, activeItem, setActiveItem, alwaysOpen]
+    );
 
     return (
       <Tag className={classes} ref={ref} {...props}>
@@ -49,10 +65,7 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
             {headerTitle}
           </button>
         </h2>
-        <MDBCollapse
-          id={collapseId.toString()}
-          show={alwaysOpen ? openState === collapseId : activeItem === collapseId}
-        >
+        <MDBCollapse id={collapseId.toString()} show={isCollapsed}>
           <div className={bodyClasses} style={bodyStyle}>
             {children}
           </div>

app/src/components/Accordion/types.tsx

@@ -5,8 +5,9 @@ interface AccordionProps extends BaseComponent {
   alwaysOpen?: boolean;
   borderless?: boolean;
   flush?: boolean;
-  initialActive?: number;
-  onChange?: (id: number) => void;
+  active?: number | number[];
+  initialActive?: number | number[];
+  onChange?: (id: number | number[]) => void;
   ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;
 }

app/src/forms/Validation/Validation.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import type { ValidationProps } from './types';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 const MDBValidation: React.FC<ValidationProps> = React.forwardRef<HTMLFormElement, ValidationProps>(
-  ({ className, children, isValidated, onReset, onSubmit, noValidate = true, ...props }, ref) => {
+  ({ className, children, isValidated = false, onReset, onSubmit, noValidate = true, ...props }, ref) => {
     const [validated, setValidated] = useState(isValidated);
 
     const classes = clsx('needs-validation', validated && 'was-validated', className);
@@ -22,6 +22,10 @@ const MDBValidation: React.FC<ValidationProps> = React.forwardRef<HTMLFormElemen
       onReset && onReset(e);
     };
 
+    useEffect(() => {
+      setValidated(isValidated);
+    }, [isValidated]);
+
     return (
       <form
         className={classes}

app/src/utils/hooks.tsx

@@ -17,4 +17,15 @@ const useOnScreen = (ref: RefObject<HTMLElement>) => {
   return isIntersecting;
 };
 
-export { useOnScreen };
+const useOpenStatus = (openState: boolean, openProp?: boolean) => {
+  const isOpen = useMemo(() => {
+    if (openProp !== undefined) {
+      return openProp;
+    }
+    return openState;
+  }, [openProp, openState]);
+
+  return isOpen;
+};
+
+export { useOnScreen, useOpenStatus };