diff --git a/src/components/layout/LayoutProvider/LayoutProvider.tsx b/src/components/layout/LayoutProvider/LayoutProvider.tsx index 2df3977a0d..37cc58fa07 100644 --- a/src/components/layout/LayoutProvider/LayoutProvider.tsx +++ b/src/components/layout/LayoutProvider/LayoutProvider.tsx @@ -6,8 +6,8 @@ import {useCurrentActiveMediaQuery} from '../hooks/useCurrentActiveMediaQuery'; import type {LayoutTheme, MediaType, RecursivePartial} from '../types'; import {makeLayoutDefaultTheme} from '../utils/makeLayoutDefaultTheme'; -export interface LayoutProviderProps { - theme?: RecursivePartial; +export interface PrivateLayoutProviderProps { + config?: RecursivePartial; /** * During ssr you can override default (`s`) media screen size if needed */ @@ -17,9 +17,9 @@ export interface LayoutProviderProps { export function PrivateLayoutProvider({ children, - theme: override, + config: override, initialMediaQuery, -}: LayoutProviderProps) { +}: PrivateLayoutProviderProps) { const theme = React.useMemo(() => makeLayoutDefaultTheme({override}), [override]); const activeMediaQuery = useCurrentActiveMediaQuery(theme.breakpoints, initialMediaQuery); @@ -35,6 +35,15 @@ export function PrivateLayoutProvider({ ); } +interface LayoutProviderProps { + theme?: RecursivePartial; + /** + * During ssr you can override default (`s`) media screen size if needed + */ + initialMediaQuery?: MediaType; + children: React.ReactNode; +} + /** * @deprecated - already used as part of ThemeProvider. To override layout theme use `layout` prop * diff --git a/src/components/layout/demo/LayoutPresenter/LayoutPresenter.tsx b/src/components/layout/demo/LayoutPresenter/LayoutPresenter.tsx index 48f9c70944..d53ff07ee2 100644 --- a/src/components/layout/demo/LayoutPresenter/LayoutPresenter.tsx +++ b/src/components/layout/demo/LayoutPresenter/LayoutPresenter.tsx @@ -33,9 +33,9 @@ function Title({title}: {title?: string}) { ); } -export const LayoutPresenter = ({children, title, theme}: LayoutPresenterProps) => { +export const LayoutPresenter = ({children, title, theme: config}: LayoutPresenterProps) => { return ( - + <div style={{ diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx index 53ba935a54..c982e03c1c 100644 --- a/src/components/theme/ThemeProvider.tsx +++ b/src/components/theme/ThemeProvider.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {PrivateLayoutProvider} from '../layout/LayoutProvider/LayoutProvider'; -import type {LayoutProviderProps} from '../layout/LayoutProvider/LayoutProvider'; +import type {PrivateLayoutProviderProps} from '../layout/LayoutProvider/LayoutProvider'; import {block} from '../utils/cn'; import {ThemeContext} from './ThemeContext'; @@ -28,7 +28,7 @@ export interface ThemeProviderProps extends React.PropsWithChildren<{}> { nativeScrollbar?: boolean; scoped?: boolean; rootClassName?: string; - layout?: Omit<LayoutProviderProps, 'children'>; + layout?: Omit<PrivateLayoutProviderProps, 'children'>; } export function ThemeProvider({