focusable handled using custom hook instead of MutationObserver

src/router/FocusableContext/FocusableProvider.js

@@ -4,35 +4,32 @@ const { useRoutesContainer } = require('../RoutesContainerContext');
 const { useModalsContainer } = require('../ModalsContainerContext');
 const FocusableContext = require('./FocusableContext');
 
-const FocusableProvider = ({ children, onRoutesContainerDomTreeChange, onModalsContainerDomTreeChange }) => {
+const FocusableProvider = ({ children, onRoutesContainerChildrenChange, onModalsContainerChildrenChange }) => {
     const routesContainer = useRoutesContainer();
     const modalsContainer = useModalsContainer();
     const contentContainerRef = React.useRef(null);
-    const [focusable, setFocusable] = React.useState(false);
+    const [focusable, setFocusable] = React.useState(true);
     React.useEffect(() => {
-        const onDomTreeChange = () => {
-            const focusable =
-                onRoutesContainerDomTreeChange({
+        const onContainersChildrenChange = () => {
+            setFocusable(
+                onRoutesContainerChildrenChange({
                     routesContainer: routesContainer,
                     contentContainer: contentContainerRef.current
                 })
                 &&
-                onModalsContainerDomTreeChange({
+                onModalsContainerChildrenChange({
                     modalsContainer: modalsContainer,
                     contentContainer: contentContainerRef.current
-                });
-            setFocusable(focusable);
+                })
+            );
         };
-        const routesContainerDomTreeObserver = new MutationObserver(onDomTreeChange);
-        const modalsContainerDomTreeObserver = new MutationObserver(onDomTreeChange);
-        routesContainerDomTreeObserver.observe(routesContainer, { childList: true });
-        modalsContainerDomTreeObserver.observe(modalsContainer, { childList: true });
-        onDomTreeChange();
+        routesContainer.addEventListener('childrenchange', onContainersChildrenChange);
+        modalsContainer.addEventListener('childrenchange', onContainersChildrenChange);
         return () => {
-            routesContainerDomTreeObserver.disconnect();
-            modalsContainerDomTreeObserver.disconnect();
+            routesContainer.removeEventListener('childrenchange', onContainersChildrenChange);
+            modalsContainer.removeEventListener('childrenchange', onContainersChildrenChange);
         };
-    }, [routesContainer, modalsContainer, onRoutesContainerDomTreeChange, onModalsContainerDomTreeChange]);
+    }, [routesContainer, modalsContainer, onRoutesContainerChildrenChange, onModalsContainerChildrenChange]);
     React.useEffect(() => {
         if (focusable && !contentContainerRef.current.contains(document.activeElement)) {
             contentContainerRef.current.focus();
@@ -50,8 +47,8 @@ const FocusableProvider = ({ children, onRoutesContainerDomTreeChange, onModalsC
 
 FocusableProvider.propTypes = {
     children: PropTypes.node.isRequired,
-    onModalsContainerDomTreeChange: PropTypes.func.isRequired,
-    onRoutesContainerDomTreeChange: PropTypes.func.isRequired
+    onModalsContainerChildrenChange: PropTypes.func.isRequired,
+    onRoutesContainerChildrenChange: PropTypes.func.isRequired
 };
 
 module.exports = FocusableProvider;

src/router/Modal/Modal.js

@@ -7,14 +7,14 @@ const { useModalsContainer } = require('../ModalsContainerContext');
 
 const Modal = ({ className, children }) => {
     const modalsContainer = useModalsContainer();
-    const onRoutesContainerDomTreeChange = React.useCallback(({ routesContainer, contentContainer }) => {
+    const onRoutesContainerChildrenChange = React.useCallback(({ routesContainer, contentContainer }) => {
         return routesContainer.lastElementChild === contentContainer.parentElement.parentElement;
     }, []);
-    const onModalsContainerDomTreeChange = React.useCallback(({ modalsContainer, contentContainer }) => {
+    const onModalsContainerChildrenChange = React.useCallback(({ modalsContainer, contentContainer }) => {
         return modalsContainer.lastElementChild === contentContainer;
     }, []);
     return ReactDOM.createPortal(
-        <FocusableProvider onRoutesContainerDomTreeChange={onRoutesContainerDomTreeChange} onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
+        <FocusableProvider onRoutesContainerChildrenChange={onRoutesContainerChildrenChange} onModalsContainerChildrenChange={onModalsContainerChildrenChange}>
             <div className={classnames(className, 'modal-container')}>{children}</div>
         </FocusableProvider>,
         modalsContainer

src/router/ModalsContainerContext/ModalsContainerProvider.js

@@ -1,9 +1,11 @@
 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}

src/router/Router/Route.js

@@ -4,16 +4,16 @@ const { FocusableProvider } = require('../FocusableContext');
 const { ModalsContainerProvider } = require('../ModalsContainerContext');
 
 const Route = ({ children }) => {
-    const onRoutesContainerDomTreeChange = React.useCallback(({ routesContainer, contentContainer }) => {
+    const onRoutesContainerChildrenChange = React.useCallback(({ routesContainer, contentContainer }) => {
         return routesContainer.lastElementChild === contentContainer.parentElement;
     }, []);
-    const onModalsContainerDomTreeChange = React.useCallback(({ modalsContainer }) => {
+    const onModalsContainerChildrenChange = React.useCallback(({ modalsContainer }) => {
         return modalsContainer.childElementCount === 0;
     }, []);
     return (
         <div className={'route-container'}>
             <ModalsContainerProvider>
-                <FocusableProvider onRoutesContainerDomTreeChange={onRoutesContainerDomTreeChange} onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
+                <FocusableProvider onRoutesContainerChildrenChange={onRoutesContainerChildrenChange} onModalsContainerChildrenChange={onModalsContainerChildrenChange}>
                     <div className={'route-content'}>{children}</div>
                 </FocusableProvider>
             </ModalsContainerProvider>

src/router/RoutesContainerContext/RoutesContainerProvider.js

@@ -1,9 +1,11 @@
 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'}>

src/router/useChildrenChangeEffect.js

@@ -0,0 +1,14 @@
+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;