Generate version 2.3.0

Author: Krzysztof Wilk

README.txt

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

app/package.json

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

app/src/components/Dropdown/DropdownLink/DropdownLink.tsx

@@ -8,9 +8,10 @@ const MDBDropdownLink: React.FC<DropdownLinkProps> = ({
   className,
   tag: Tag,
   children,
+  disableClass,
   ...props
 }): JSX.Element => {
-  const classes = clsx('dropdown-item', className);
+  const classes = clsx(!disableClass && 'dropdown-item', className);
 
   const { handleClose } = useContext(DropdownContext);
 

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

@@ -61,17 +61,19 @@ const MDBDropdownMenu: React.FC<DropdownMenuProps> = ({
 
   const handleDown = useCallback(
     (e: any) => {
-      e.preventDefault();
-
       if (attachELements) {
         if (e.key === 'ArrowUp') {
+          e.preventDefault();
+
           setCount(count - 1);
 
           if (count <= 0) {
             setCount(childrenLength - 1);
           }
         }
         if (e.key === 'ArrowDown') {
+          e.preventDefault();
+
           setCount(count + 1);
 
           if (count === childrenLength - 1) {

app/src/components/Modal/Modal.tsx

@@ -22,6 +22,7 @@ const MDBModal: React.FC<ModalProps> = ({
   const [isOpenModal, setIsOpenModal] = useState(show);
   const [innerShow, setInnerShow] = useState(show);
   const [staticModal, setStaticModal] = useState(false);
+  const [focusedElement, setFocusedElement] = useState(0);
 
   const modalInnerRef = useRef<HTMLElement>(null);
   const modalReference = modalRef ? modalRef : modalInnerRef;
@@ -66,6 +67,12 @@ const MDBModal: React.FC<ModalProps> = ({
 
   const handleKeydown = useCallback(
     (event: KeyboardEvent) => {
+      if (isOpenModal && event.key === 'Tab') {
+        event.preventDefault();
+
+        setFocusedElement(focusedElement + 1);
+      }
+
       if (closeOnEsc) {
         if (isOpenModal && event.key === 'Escape') {
           if (!staticBackdrop) {
@@ -79,9 +86,24 @@ const MDBModal: React.FC<ModalProps> = ({
         }
       }
     },
-    [closeModal, isOpenModal, staticBackdrop, closeOnEsc]
+    [closeModal, isOpenModal, staticBackdrop, closeOnEsc, focusedElement]
   );
 
+  useEffect(() => {
+    const focusableElements = modalReference.current?.querySelectorAll(
+      'button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    if (focusableElements && focusableElements.length > 0) {
+      if (focusedElement === focusableElements.length) {
+        (focusableElements[0] as HTMLElement).focus();
+        setFocusedElement(0);
+      } else {
+        (focusableElements[focusedElement] as HTMLElement).focus();
+      }
+    }
+  }, [focusedElement, modalReference]);
+
   useEffect(() => {
     const getScrollbarWidth = () => {
       const documentWidth = document.documentElement.clientWidth;

dist/mdb-react-ui-kit.esm.js

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "main": "./dist/mdb-react-ui-kit.js",
   "module": "./dist/mdb-react-ui-kit.esm.js",
   "types": "./dist/index.d.ts",