From cad473af1edfbfa027629c9b53daa3ddf33e7b0f Mon Sep 17 00:00:00 2001
From: martyanov-av <martyanov-av@yandex-team.ru>
Date: Thu, 29 Feb 2024 20:28:00 +0300
Subject: [PATCH] fix: add ThemeProvider for navigation

---
 package-lock.json          | 14 +++---
 package.json               |  3 +-
 src/components/App/App.tsx | 96 ++++++++++++++++++++------------------
 3 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7e6aa7a..7200f63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2769,19 +2769,19 @@
       }
     },
     "node_modules/@gravity-ui/components": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/components/-/components-2.12.0.tgz",
-      "integrity": "sha512-T1TZS+/BfApcYwQXEhlzoabiww70zzigv8yI3S//gaQg0Esrbtas5kq5BYR+K2YWblf8ldZgzTJK5IbO9YTMsg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/components/-/components-3.0.0.tgz",
+      "integrity": "sha512-wl7mVXwpNxL5d0Yz0de3WgyQCSFZuZjuRHc+9jtUNSt/J/HWAkKkKAEUUEq+A5IVl5YgWUBkQopGgwKs38NRAg==",
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
-        "@gravity-ui/i18n": "^1.1.0",
-        "@gravity-ui/icons": "^2.4.0",
+        "@gravity-ui/i18n": "^1.2.0",
+        "@gravity-ui/icons": "^2.8.1",
         "lodash": "^4.17.21",
         "resize-observer-polyfill": "^1.5.1",
-        "universal-cookie": "^6.1.1"
+        "universal-cookie": "^6.1.3"
       },
       "peerDependencies": {
-        "@gravity-ui/uikit": "^5.12.0",
+        "@gravity-ui/uikit": "^6.0.0",
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
diff --git a/package.json b/package.json
index 7947d08..0e7ada7 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "webpack-manifest-plugin": "^5.0.0"
   },
   "overrides": {
-    "@gravity-ui/uikit": "6.0.0"
+    "@gravity-ui/uikit": "6.0.0",
+    "@gravity-ui/components": "3.0.0"
   }
 }
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 65019df..b01521f 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -67,19 +67,15 @@ function Runtime(props: RuntimeProps) {
 
 function Page(props: DocInnerProps) {
     const {data, ...pageProps} = props;
-    const {lang, theme} = pageProps;
-
     const Page = data.leading ? DocLeadingPage : DocPage;
 
     return (
-        <ThemeProvider theme={theme} direction={getDirection(lang)}>
-            <Layout>
-                <Layout.Content>
-                    {/*@ts-ignore*/}
-                    <Page {...data} {...pageProps} />
-                </Layout.Content>
-            </Layout>
-        </ThemeProvider>
+        <Layout>
+            <Layout.Content>
+                {/*@ts-ignore*/}
+                <Page {...data} {...pageProps} />
+            </Layout.Content>
+        </Layout>
     );
 }
 
@@ -127,6 +123,7 @@ export function App(props: DocInnerProps): ReactElement {
         fullScreen,
         onChangeFullScreen,
     };
+    const direction = getDirection(lang);
 
     useEffect(() => {
         updateRootClassName({
@@ -140,8 +137,10 @@ export function App(props: DocInnerProps): ReactElement {
     if (!navigation) {
         return (
             <div className="App">
-                <Page {...pageProps} {...settings} />
-                <Runtime theme={theme} />
+                <ThemeProvider theme={theme} direction={direction}>
+                    <Page {...pageProps} {...settings} />
+                    <Runtime theme={theme} />
+                </ThemeProvider>
             </div>
         );
     }
@@ -152,41 +151,46 @@ export function App(props: DocInnerProps): ReactElement {
 
     return (
         <div className="App">
-            <PageConstructorProvider theme={theme}>
-                <PageConstructor
-                    custom={{
-                        navigation: {
-                            controls: () => (
-                                <HeaderControls {...settings} mobileView={mobileView} />
-                            ),
-                        },
-                        blocks: {
-                            page: () => (
-                                <Page {...pageProps} {...(headerWithControls ? {} : settings)} />
-                            ),
-                        },
-                    }}
-                    content={{
-                        blocks: [
-                            {
-                                type: 'page',
+            <ThemeProvider theme={theme} direction={direction}>
+                <PageConstructorProvider theme={theme}>
+                    <PageConstructor
+                        custom={{
+                            navigation: {
+                                controls: () => (
+                                    <HeaderControls {...settings} mobileView={mobileView} />
+                                ),
+                            },
+                            blocks: {
+                                page: () => (
+                                    <Page
+                                        {...pageProps}
+                                        {...(headerWithControls ? {} : settings)}
+                                    />
+                                ),
                             },
-                        ],
-                    }}
-                    navigation={
-                        fullHeader
-                            ? {
-                                  header: {
-                                      withBorder: true,
-                                      leftItems: leftItems.map(rebaseNavItem),
-                                      rightItems: rightItems.map(rebaseNavItem),
-                                  },
-                                  logo,
-                              }
-                            : undefined
-                    }
-                />
-            </PageConstructorProvider>
+                        }}
+                        content={{
+                            blocks: [
+                                {
+                                    type: 'page',
+                                },
+                            ],
+                        }}
+                        navigation={
+                            fullHeader
+                                ? {
+                                      header: {
+                                          withBorder: true,
+                                          leftItems: leftItems.map(rebaseNavItem),
+                                          rightItems: rightItems.map(rebaseNavItem),
+                                      },
+                                      logo,
+                                  }
+                                : undefined
+                        }
+                    />
+                </PageConstructorProvider>
+            </ThemeProvider>
             <Runtime theme={theme} />
         </div>
     );