fix(LayoutProvider): layoutProvider merged with ThemeProvider

gravity-ui · Apr 19, 2024 · 80c8cda · 80c8cda
1 parent bf3bed8
commit 80c8cda
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 58 deletions.
diff --git a/src/components/layout/LayoutProvider/LayoutProvider.tsx b/src/components/layout/LayoutProvider/LayoutProvider.tsx
@@ -6,7 +6,7 @@ import {useCurrentActiveMediaQuery} from '../hooks/useCurrentActiveMediaQuery';
 import type {LayoutTheme, MediaType, RecursivePartial} from '../types';
 import {makeLayoutDefaultTheme} from '../utils/makeLayoutDefaultTheme';
 
-interface LayoutProviderProps {
+export interface LayoutProviderProps {
     theme?: RecursivePartial<LayoutTheme>;
     /**
      * During ssr you can override default (`s`) media screen size if needed
@@ -15,14 +15,7 @@ interface LayoutProviderProps {
     children: React.ReactNode;
 }
 
-/**
- * @deprecated - pass theme directly to `ThemeProvider`
- *
- * Provide context for layout components and current media queries.
- * ---
- * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#layoutprovider-and-layouttheme
- */
-export function LayoutProvider({
+export function PrivateLayoutProvider({
     children,
     theme: override,
     initialMediaQuery,
@@ -41,3 +34,14 @@ export function LayoutProvider({
         </LayoutContext.Provider>
     );
 }
+
+/**
+ * @deprecated - already used as part of ThemeProvider. To override layout theme use `layout` prop
+ *
+ * Provide context for layout components and current media queries.
+ * ---
+ * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#layoutprovider-and-layouttheme
+ */
+export function LayoutProvider({children}: LayoutProviderProps) {
+    return children;
+}
diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts
@@ -4,7 +4,7 @@ export * from './Row/Row';
 export * from './Flex/Flex';
 export * from './Box/Box';
 export * from './Container/Container';
-export * from './LayoutProvider/LayoutProvider';
+export {LayoutProvider} from './LayoutProvider/LayoutProvider';
 export * from './spacing/spacing';
 
 export * from './hooks/useLayoutContext';

diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import {LayoutProvider} from '../layout';
-import type {LayoutTheme} from '../layout';
-import type {MediaType, RecursivePartial} from '../layout/types';
+import {PrivateLayoutProvider} from '../layout/LayoutProvider/LayoutProvider';
+import type {LayoutProviderProps} from '../layout/LayoutProvider/LayoutProvider';
 import {block} from '../utils/cn';
 
 import {ThemeContext} from './ThemeContext';
@@ -29,14 +28,7 @@ export interface ThemeProviderProps extends React.PropsWithChildren<{}> {
     nativeScrollbar?: boolean;
     scoped?: boolean;
     rootClassName?: string;
-    /**
-     * Pass theme to override default breakpoint or spacing
-     */
-    layoutTheme?: RecursivePartial<LayoutTheme>;
-    /**
-     * During ssr you can override default (`s`) media screen size if needed
-     */
-    initialMediaQuery?: MediaType;
+    layout?: Omit<LayoutProviderProps, 'children'>;
 }
 
 export function ThemeProvider({
@@ -48,8 +40,7 @@ export function ThemeProvider({
     scoped: scopedProp = false,
     rootClassName = '',
     children,
-    layoutTheme,
-    initialMediaQuery,
+    layout,
 }: ThemeProviderProps) {
     const parentThemeState = React.useContext(ThemeContext);
     const systemThemeState = React.useContext(ThemeSettingsContext);
@@ -98,42 +89,34 @@ export function ThemeProvider({
         [systemLightTheme, systemDarkTheme],
     );
 
-    let node = (
-        <ThemeContext.Provider value={contextValue}>
-            <ThemeSettingsContext.Provider value={themeSettingsContext}>
-                {scoped ? (
-                    <div
-                        className={b(
-                            {
-                                theme: themeValue,
-                                'native-scrollbar': nativeScrollbar !== false,
-                            },
-                            rootClassName,
-                        )}
-                        dir={
-                            hasParentProvider && direction === parentDirection
-                                ? undefined
-                                : direction
-                        }
-                    >
-                        {children}
-                    </div>
-                ) : (
-                    children
-                )}
-            </ThemeSettingsContext.Provider>
-        </ThemeContext.Provider>
+    return (
+        <PrivateLayoutProvider {...layout}>
+            <ThemeContext.Provider value={contextValue}>
+                <ThemeSettingsContext.Provider value={themeSettingsContext}>
+                    {scoped ? (
+                        <div
+                            className={b(
+                                {
+                                    theme: themeValue,
+                                    'native-scrollbar': nativeScrollbar !== false,
+                                },
+                                rootClassName,
+                            )}
+                            dir={
+                                hasParentProvider && direction === parentDirection
+                                    ? undefined
+                                    : direction
+                            }
+                        >
+                            {children}
+                        </div>
+                    ) : (
+                        children
+                    )}
+                </ThemeSettingsContext.Provider>
+            </ThemeContext.Provider>
+        </PrivateLayoutProvider>
     );
-
-    if (layoutTheme || initialMediaQuery) {
-        node = (
-            <LayoutProvider theme={layoutTheme} initialMediaQuery={initialMediaQuery}>
-                {node}
-            </LayoutProvider>
-        );
-    }
-
-    return node;
 }
 
 ThemeProvider.displayName = 'ThemeProvider';