diff --git a/packages/react/kibana_context/render/render_provider.tsx b/packages/react/kibana_context/render/render_provider.tsx index fee5ec67d7583..e5a3b4415bb37 100644 --- a/packages/react/kibana_context/render/render_provider.tsx +++ b/packages/react/kibana_context/render/render_provider.tsx @@ -8,18 +8,13 @@ import React, { FC } from 'react'; -import { EuiErrorBoundary } from '@elastic/eui'; -import type { I18nStart } from '@kbn/core-i18n-browser'; import { - KibanaThemeProvider, - type KibanaThemeProviderProps, -} from '@kbn/react-kibana-context-theme'; + KibanaRootContextProvider, + type KibanaRootContextProviderProps, +} from '@kbn/react-kibana-context-root'; /** Props for the KibanaContextProvider */ -export interface KibanaRenderContextProviderProps extends KibanaThemeProviderProps { - /** The `I18nStart` API from `CoreStart`. */ - i18n: I18nStart; -} +export type KibanaRenderContextProviderProps = Omit; /** * The `KibanaRenderContextProvider` provides the necessary context for an out-of-current @@ -27,14 +22,11 @@ export interface KibanaRenderContextProviderProps extends KibanaThemeProviderPro */ export const KibanaRenderContextProvider: FC = ({ children, - i18n, ...props }) => { return ( - - - {children} - - + + {children} + ); }; diff --git a/packages/react/kibana_context/render/tsconfig.json b/packages/react/kibana_context/render/tsconfig.json index 3f6bbca86bd5a..61642a72eaec5 100644 --- a/packages/react/kibana_context/render/tsconfig.json +++ b/packages/react/kibana_context/render/tsconfig.json @@ -16,7 +16,6 @@ "target/**/*" ], "kbn_references": [ - "@kbn/core-i18n-browser", - "@kbn/react-kibana-context-theme", + "@kbn/react-kibana-context-root", ] } diff --git a/packages/react/kibana_context/root/eui_provider.tsx b/packages/react/kibana_context/root/eui_provider.tsx index 54f2b8a99bffb..6884e8cf53f97 100644 --- a/packages/react/kibana_context/root/eui_provider.tsx +++ b/packages/react/kibana_context/root/eui_provider.tsx @@ -48,7 +48,8 @@ utilitiesCache.compat = true; const cache = { default: emotionCache, global: globalCache, utility: utilitiesCache }; /** - * Prepares and returns a configured `EuiProvider` for use in Kibana roots. + * Prepares and returns a configured `EuiProvider` for use in Kibana roots. In most cases, this utility context + * should not be used. Instead, refer to `KibanaRootContextProvider` to set up the root of Kibana. */ export const KibanaEuiProvider: FC = ({ theme: { theme$ }, diff --git a/packages/react/kibana_context/root/index.ts b/packages/react/kibana_context/root/index.ts index 9ed9baa1f63bb..026302c8d2e1d 100644 --- a/packages/react/kibana_context/root/index.ts +++ b/packages/react/kibana_context/root/index.ts @@ -7,3 +7,4 @@ */ export { KibanaRootContextProvider, type KibanaRootContextProviderProps } from './root_provider'; +export { KibanaEuiProvider, type KibanaEuiProviderProps } from './eui_provider'; diff --git a/packages/react/kibana_context/theme/theme_provider.tsx b/packages/react/kibana_context/theme/theme_provider.tsx index f355d82d7f533..1a3bd0f8c1ce2 100644 --- a/packages/react/kibana_context/theme/theme_provider.tsx +++ b/packages/react/kibana_context/theme/theme_provider.tsx @@ -10,12 +10,13 @@ import React, { useMemo } from 'react'; import useObservable from 'react-use/lib/useObservable'; import { EuiThemeProvider, EuiThemeProviderProps } from '@elastic/eui'; + // @ts-ignore EUI exports this component internally, but Kibana isn't picking it up its types import { useIsNestedEuiProvider } from '@elastic/eui/lib/components/provider/nested'; // @ts-ignore EUI exports this component internally, but Kibana isn't picking it up its types import { emitEuiProviderWarning } from '@elastic/eui/lib/services/theme/warning'; -import { KibanaEuiProvider } from '@kbn/react-kibana-context-root/eui_provider'; +import { KibanaEuiProvider } from '@kbn/react-kibana-context-root'; import { getColorMode, @@ -46,7 +47,7 @@ export interface KibanaThemeProviderProps extends EuiProps { * TODO: Restore this to the main `KibanaThemeProvider` once all theme providers can be guaranteed * to have a parent `EuiProvider` */ -export const KibanaThemeProviderOnly = ({ +const KibanaThemeProviderOnly = ({ theme: { theme$ }, euiTheme: theme, children, @@ -62,11 +63,11 @@ export const KibanaThemeProviderOnly = ({ * Unfortunately, a lot of plugins are using `KibanaThemeProvider` without a parent * `EuiProvider` which provides very necessary setup (e.g. Emotion cache, breakpoints). * - * If so, we need to render an EuiProvider first (but without global styles, since those - * are already handled by `KibanaRootContextProvider`) + * If a render call is using the deprecated context, we need to render an EuiProvider first + * (but without global styles, since those are already handled by `KibanaRootContextProvider`) * - * TODO: We can hopefully remove this and revert to only exporting the above component once - * all plugins are on `KibanaRootContextProvider`? + * TODO: clintandrewhall - We can remove this and revert to only exporting the above component + * once all out-of-band renders are using `KibanaRenderContextProvider`. */ const KibanaThemeProviderCheck = ({ theme, children, ...props }: KibanaThemeProviderProps) => { const hasEuiProvider = useIsNestedEuiProvider(); @@ -79,7 +80,7 @@ const KibanaThemeProviderCheck = ({ theme, children, ...props }: KibanaThemeProv ); } else { emitEuiProviderWarning( - 'Your plugin used an KibanaThemeProvider without a required parent KibanaRootContextProvider.' + 'KibanaThemeProvider requires a parent KibanaRenderContextProvider. Check your React tree and ensure that they are wrapped in a KibanaRenderContextProvider.' ); return (