From 6811c38757bfefa7b13c5830f2fe953be8db232b Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 29 Aug 2019 19:21:56 +0300
Subject: [PATCH] Revert "focusable handled using custom hook instead of
 MutationObserver"

This reverts commit e6eb49fe7fd2ca985a6db7344eccc923441111c3.
---
 .../FocusableContext/FocusableProvider.js     | 33 ++++++++++---------
 src/router/Modal/Modal.js                     |  6 ++--
 .../ModalsContainerProvider.js                |  2 --
 src/router/Router/Route.js                    |  6 ++--
 .../RoutesContainerProvider.js                |  2 --
 src/router/useChildrenChangeEffect.js         | 14 --------
 6 files changed, 24 insertions(+), 39 deletions(-)
 delete mode 100644 src/router/useChildrenChangeEffect.js

diff --git a/src/router/FocusableContext/FocusableProvider.js b/src/router/FocusableContext/FocusableProvider.js
index 41679316d..398c1c106 100644
--- a/src/router/FocusableContext/FocusableProvider.js
+++ b/src/router/FocusableContext/FocusableProvider.js
@@ -4,32 +4,35 @@ const { useRoutesContainer } = require('../RoutesContainerContext');
 const { useModalsContainer } = require('../ModalsContainerContext');
 const FocusableContext = require('./FocusableContext');
 
-const FocusableProvider = ({ children, onRoutesContainerChildrenChange, onModalsContainerChildrenChange }) => {
+const FocusableProvider = ({ children, onRoutesContainerDomTreeChange, onModalsContainerDomTreeChange }) => {
     const routesContainer = useRoutesContainer();
     const modalsContainer = useModalsContainer();
     const contentContainerRef = React.useRef(null);
-    const [focusable, setFocusable] = React.useState(true);
+    const [focusable, setFocusable] = React.useState(false);
     React.useEffect(() => {
-        const onContainersChildrenChange = () => {
-            setFocusable(
-                onRoutesContainerChildrenChange({
+        const onDomTreeChange = () => {
+            const focusable =
+                onRoutesContainerDomTreeChange({
                     routesContainer: routesContainer,
                     contentContainer: contentContainerRef.current
                 })
                 &&
-                onModalsContainerChildrenChange({
+                onModalsContainerDomTreeChange({
                     modalsContainer: modalsContainer,
                     contentContainer: contentContainerRef.current
-                })
-            );
+                });
+            setFocusable(focusable);
         };
-        routesContainer.addEventListener('childrenchange', onContainersChildrenChange);
-        modalsContainer.addEventListener('childrenchange', onContainersChildrenChange);
+        const routesContainerDomTreeObserver = new MutationObserver(onDomTreeChange);
+        const modalsContainerDomTreeObserver = new MutationObserver(onDomTreeChange);
+        routesContainerDomTreeObserver.observe(routesContainer, { childList: true });
+        modalsContainerDomTreeObserver.observe(modalsContainer, { childList: true });
+        onDomTreeChange();
         return () => {
-            routesContainer.removeEventListener('childrenchange', onContainersChildrenChange);
-            modalsContainer.removeEventListener('childrenchange', onContainersChildrenChange);
+            routesContainerDomTreeObserver.disconnect();
+            modalsContainerDomTreeObserver.disconnect();
         };
-    }, [routesContainer, modalsContainer, onRoutesContainerChildrenChange, onModalsContainerChildrenChange]);
+    }, [routesContainer, modalsContainer, onRoutesContainerDomTreeChange, onModalsContainerDomTreeChange]);
     React.useEffect(() => {
         if (focusable && !contentContainerRef.current.contains(document.activeElement)) {
             contentContainerRef.current.focus();
@@ -47,8 +50,8 @@ const FocusableProvider = ({ children, onRoutesContainerChildrenChange, onModals
 
 FocusableProvider.propTypes = {
     children: PropTypes.node.isRequired,
-    onModalsContainerChildrenChange: PropTypes.func.isRequired,
-    onRoutesContainerChildrenChange: PropTypes.func.isRequired
+    onModalsContainerDomTreeChange: PropTypes.func.isRequired,
+    onRoutesContainerDomTreeChange: PropTypes.func.isRequired
 };
 
 module.exports = FocusableProvider;
diff --git a/src/router/Modal/Modal.js b/src/router/Modal/Modal.js
index 314ffe120..5f69afbec 100644
--- a/src/router/Modal/Modal.js
+++ b/src/router/Modal/Modal.js
@@ -7,14 +7,14 @@ const { useModalsContainer } = require('../ModalsContainerContext');
 
 const Modal = ({ className, children }) => {
     const modalsContainer = useModalsContainer();
-    const onRoutesContainerChildrenChange = React.useCallback(({ routesContainer, contentContainer }) => {
+    const onRoutesContainerDomTreeChange = React.useCallback(({ routesContainer, contentContainer }) => {
         return routesContainer.lastElementChild === contentContainer.parentElement.parentElement;
     }, []);
-    const onModalsContainerChildrenChange = React.useCallback(({ modalsContainer, contentContainer }) => {
+    const onModalsContainerDomTreeChange = React.useCallback(({ modalsContainer, contentContainer }) => {
         return modalsContainer.lastElementChild === contentContainer;
     }, []);
     return ReactDOM.createPortal(
-        <FocusableProvider onRoutesContainerChildrenChange={onRoutesContainerChildrenChange} onModalsContainerChildrenChange={onModalsContainerChildrenChange}>
+        <FocusableProvider onRoutesContainerDomTreeChange={onRoutesContainerDomTreeChange} onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
             <div className={classnames(className, 'modal-container')}>{children}</div>
         </FocusableProvider>,
         modalsContainer
diff --git a/src/router/ModalsContainerContext/ModalsContainerProvider.js b/src/router/ModalsContainerContext/ModalsContainerProvider.js
index d61a6d578..00e9c6928 100644
--- a/src/router/ModalsContainerContext/ModalsContainerProvider.js
+++ b/src/router/ModalsContainerContext/ModalsContainerProvider.js
@@ -1,11 +1,9 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-const useChildrenChangeEffect = require('../useChildrenChangeEffect');
 const ModalsContainerContext = require('./ModalsContainerContext');
 
 const ModalsContainerProvider = ({ children }) => {
     const [container, setContainer] = React.useState(null);
-    useChildrenChangeEffect(container, children);
     return (
         <ModalsContainerContext.Provider value={container}>
             {container instanceof HTMLElement ? children : null}
diff --git a/src/router/Router/Route.js b/src/router/Router/Route.js
index d2e76f5fa..5156b113c 100644
--- a/src/router/Router/Route.js
+++ b/src/router/Router/Route.js
@@ -4,16 +4,16 @@ const { FocusableProvider } = require('../FocusableContext');
 const { ModalsContainerProvider } = require('../ModalsContainerContext');
 
 const Route = ({ children }) => {
-    const onRoutesContainerChildrenChange = React.useCallback(({ routesContainer, contentContainer }) => {
+    const onRoutesContainerDomTreeChange = React.useCallback(({ routesContainer, contentContainer }) => {
         return routesContainer.lastElementChild === contentContainer.parentElement;
     }, []);
-    const onModalsContainerChildrenChange = React.useCallback(({ modalsContainer }) => {
+    const onModalsContainerDomTreeChange = React.useCallback(({ modalsContainer }) => {
         return modalsContainer.childElementCount === 0;
     }, []);
     return (
         <div className={'route-container'}>
             <ModalsContainerProvider>
-                <FocusableProvider onRoutesContainerChildrenChange={onRoutesContainerChildrenChange} onModalsContainerChildrenChange={onModalsContainerChildrenChange}>
+                <FocusableProvider onRoutesContainerDomTreeChange={onRoutesContainerDomTreeChange} onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
                     <div className={'route-content'}>{children}</div>
                 </FocusableProvider>
             </ModalsContainerProvider>
diff --git a/src/router/RoutesContainerContext/RoutesContainerProvider.js b/src/router/RoutesContainerContext/RoutesContainerProvider.js
index f0bdfbb65..390445d6f 100644
--- a/src/router/RoutesContainerContext/RoutesContainerProvider.js
+++ b/src/router/RoutesContainerContext/RoutesContainerProvider.js
@@ -1,11 +1,9 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-const useChildrenChangeEffect = require('../useChildrenChangeEffect');
 const RoutesContainerContext = require('./RoutesContainerContext');
 
 const RoutesContainerProvider = ({ children }) => {
     const [container, setContainer] = React.useState(null);
-    useChildrenChangeEffect(container, children);
     return (
         <RoutesContainerContext.Provider value={container}>
             <div ref={setContainer} className={'routes-container'}>
diff --git a/src/router/useChildrenChangeEffect.js b/src/router/useChildrenChangeEffect.js
deleted file mode 100644
index 39f0d75dc..000000000
--- a/src/router/useChildrenChangeEffect.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const React = require('react');
-
-const useChildrenChangeEffect = (parent, children) => {
-    React.useEffect(() => {
-        if (parent instanceof HTMLElement) {
-            parent.dispatchEvent(new CustomEvent('childrenchange', {
-                bubbles: false,
-                cancelable: false
-            }));
-        }
-    }, [parent, children]);
-};
-
-module.exports = useChildrenChangeEffect;