fix(LayoutProvider): work in scoped context

src/components/layout/LayoutProvider/LayoutProvider.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import {LayoutContext} from '../contexts/LayoutContext';
 import {useCurrentActiveMediaQuery} from '../hooks/useCurrentActiveMediaQuery';
 import type {LayoutTheme, MediaType, RecursivePartial} from '../types';
-import {makeLayoutDefaultTheme} from '../utils/makeLayoutDefaultTheme';
+import {overrideLayoutTheme} from '../utils/overrideLayoutTheme';
 
 export interface PrivateLayoutProviderProps {
     config?: RecursivePartial<LayoutTheme>;
@@ -20,19 +20,15 @@ export function PrivateLayoutProvider({
     config: override,
     initialMediaQuery,
 }: PrivateLayoutProviderProps) {
-    const theme = React.useMemo(() => makeLayoutDefaultTheme({override}), [override]);
+    const parentContext = React.useContext(LayoutContext);
+    const theme = React.useMemo(
+        () => overrideLayoutTheme({theme: parentContext.theme, override}),
+        [override, parentContext.theme],
+    );
     const activeMediaQuery = useCurrentActiveMediaQuery(theme.breakpoints, initialMediaQuery);
 
-    return (
-        <LayoutContext.Provider
-            value={{
-                activeMediaQuery,
-                theme,
-            }}
-        >
-            {children}
-        </LayoutContext.Provider>
-    );
+    const value = React.useMemo(() => ({activeMediaQuery, theme}), [activeMediaQuery, theme]);
+    return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
 }
 
 interface LayoutProviderProps {

src/components/layout/hooks/useCurrentActiveMediaQuery.tsx

@@ -25,12 +25,12 @@ export const makeCurrentActiveMediaExpressions = (
     xxxl: `(min-width: ${mediaToValue.xxxl}px)`,
 });
 
-const safeMatchMedia = (query: string | number): MediaQueryList => {
+const safeMatchMedia = (query: string): MediaQueryList => {
     if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
         return mockMediaQueryList;
     }
 
-    return window.matchMedia(String(query));
+    return window.matchMedia(query);
 };
 
 class Queries {
@@ -81,33 +81,20 @@ export const useCurrentActiveMediaQuery = (
     const [state, _setState] = React.useState<MediaType>(initialMediaQuery);
 
     React.useLayoutEffect(() => {
-        let mounted = true;
-
         const queries = new Queries(breakpointsMap);
 
         const setState = () => {
             _setState(queries.getCurrentActiveMedia());
         };
 
-        const onChange = () => {
-            if (!mounted) {
-                return;
-            }
-
-            setState();
-        };
-
-        queries.addListeners(onChange);
+        queries.addListeners(setState);
 
         setState();
 
         return () => {
-            mounted = false;
-            queries.removeListeners(onChange);
+            queries.removeListeners(setState);
         };
-        // don't support runtime breakpoint redefinition. Breakpoints defined only one at LayoutTheme
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [breakpointsMap]);
 
     return state;
 };

src/components/layout/utils/overrideLayoutTheme.ts

@@ -0,0 +1,16 @@
+/* eslint-disable valid-jsdoc */
+import merge from 'lodash/merge';
+
+import type {LayoutTheme, RecursivePartial} from '../types';
+
+interface OverrideLayoutThemeOptions {
+    theme: LayoutTheme;
+    override?: RecursivePartial<LayoutTheme>;
+}
+
+/**
+ * Use this function to override default `DEFAULT_LAYOUT_THEME`
+ */
+export function overrideLayoutTheme({theme, override}: OverrideLayoutThemeOptions): LayoutTheme {
+    return merge(theme, override);
+}