chore(sandbox): upgrade sandbox packages

next.config.js

@@ -83,7 +83,7 @@
                 });
 
                 if (!options.isServer) {
                     config.resolve.fallback.fs = false;
                 }
 
                 if (process.env.ANALYZE_BUNDLE) {
@@ -133,7 +133,6 @@
         ],
         experimental: {
             esmExternals: 'loose',
-            optimizePackageImports: ['@gravity-ui/uikit'],
         },
         typescript: {
             ignoreBuildErrors: true,

package.json

@@ -12,13 +12,13 @@
     "@gravity-ui/aikit": "^1.1.0",
     "@gravity-ui/chartkit": "^6.1.1",
     "@gravity-ui/charts": "^0.8.0",
-    "@gravity-ui/components": "^4.16.0",
+    "@gravity-ui/components": "^4.17.0",
     "@gravity-ui/date-components": "^3.4.1",
     "@gravity-ui/date-utils": "^2.6.0",
     "@gravity-ui/graph": "^1.0.0",
     "@gravity-ui/icons": "^2.16.0",
     "@gravity-ui/markdown-editor": "^15.1.0",
-    "@gravity-ui/navigation": "^3.11.0",
+    "@gravity-ui/navigation": "^4.0.3",
     "@gravity-ui/page-constructor": "^6.0.0-beta.6",
     "@gravity-ui/timeline": "^1.26.1",
     "@gravity-ui/uikit": "^7.29.0",

src/components/UISamples/DashboardPreview2/DashboardPreview2.tsx

@@ -21,22 +21,8 @@ const logo: AsideHeaderProps['logo'] = {
 
 const renderFooter: AsideHeaderProps['renderFooter'] = ({compact}) => (
     <Fragment>
-        <FooterItem
-            compact={compact}
-            item={{
-                id: 'feedback',
-                title: 'Feedback',
-                icon: Feedback,
-            }}
-        />
-        <FooterItem
-            item={{
-                id: 'settings',
-                icon: Gear,
-                title: 'Settings',
-            }}
-            compact={compact}
-        />
+        <FooterItem compact={compact} id="feedback" title="Feedback" icon={Feedback} />
+        <FooterItem id="settings" title="Feedback" icon={Gear} compact={compact} />
     </Fragment>
 );
 

src/components/UISamples/PreviewLayout/PreviewLayout.tsx

@@ -183,23 +183,18 @@ export const PreviewLayout = ({
                     renderFooter={({compact}) => (
                         <React.Fragment>
                             <FooterItem
-                                item={{
-                                    id: 'user-settings',
-                                    icon: Gear,
-                                    title: 'User Settings',
-                                    tooltipText: 'User Settings',
-                                    onItemClick: () => {},
-                                }}
+                                id="user-settings"
+                                icon={Gear}
+                                title="User Settings"
+                                tooltipText="User Settings"
+                                onItemClick={() => {}}
                                 compact={compact}
                             />
                             <FooterItem
+                                id="user-account"
+                                title="User"
+                                itemWrapper={(p, makeItem) => makeItem({...p, icon: <Person />})}
                                 compact={compact}
-                                item={{
-                                    id: 'user-account',
-                                    title: 'User',
-                                    itemWrapper: (p, makeItem) =>
-                                        makeItem({...p, icon: <Person />}),
-                                }}
                             />
                         </React.Fragment>
                     )}

src/content/components/navigation/AsideHeader/AsideHeaderComponent.tsx

@@ -1,5 +1,5 @@
 import {Aperture, Gear, Magnifier, Star} from '@gravity-ui/icons';
-import {AsideHeader, AsideHeaderProps, FooterItem, SubheaderMenuItem} from '@gravity-ui/navigation';
+import {AsideHeader, AsideHeaderItem, AsideHeaderProps, FooterItem} from '@gravity-ui/navigation';
 import {TextInput} from '@gravity-ui/uikit';
 import React from 'react';
 
@@ -24,16 +24,14 @@ export const AsideHeaderComponent = ({
     const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
     const [compact, setCompact] = React.useState(false);
 
-    const subheaderItems: SubheaderMenuItem[] = [
+    const subheaderItems: AsideHeaderItem[] = [
         {
-            item: {
-                id: 'search',
-                title: 'Search',
-                icon: Magnifier,
-                current: visiblePanel === Panel.Search,
-                onItemClick: () =>
-                    setVisiblePanel(visiblePanel === Panel.Search ? undefined : Panel.Search),
-            },
+            id: 'search',
+            title: 'Search',
+            icon: Magnifier,
+            current: visiblePanel === Panel.Search,
+            onItemClick: () =>
+                setVisiblePanel(visiblePanel === Panel.Search ? undefined : Panel.Search),
         },
     ];
 
@@ -47,53 +45,49 @@ export const AsideHeaderComponent = ({
             panelItems={[
                 {
                     id: 'search',
-                    content: (
+                    children: (
                         <div style={panelStyle}>
                             <TextInput placeholder="Search by ID" hasClear />
                         </div>
                     ),
-                    visible: visiblePanel === Panel.Search,
+                    open: visiblePanel === Panel.Search,
                 },
                 {
                     id: 'settings',
-                    content: <div style={panelStyle}> Settigs panel</div>,
-                    visible: visiblePanel === Panel.Settings,
+                    children: <div style={panelStyle}>Settings panel</div>,
+                    open: visiblePanel === Panel.Settings,
                 },
                 {
                     id: 'favorites',
-                    content: <div style={panelStyle}>Favorites panel</div>,
-                    visible: visiblePanel === Panel.Favorites,
+                    children: <div style={panelStyle}>Favorites panel</div>,
+                    open: visiblePanel === Panel.Favorites,
                 },
             ]}
             renderFooter={({compact}) => (
                 <React.Fragment>
                     <FooterItem
-                        item={{
-                            id: 'favorites',
-                            title: 'Favorites',
-                            tooltipText: 'Favorites with panel',
-                            current: visiblePanel === Panel.Favorites,
-                            icon: Star,
-                            onItemClick: () => {
-                                setVisiblePanel(
-                                    visiblePanel === Panel.Favorites ? undefined : Panel.Favorites,
-                                );
-                            },
+                        id="favorites"
+                        title="Favorites"
+                        tooltipText="Favorites with panel"
+                        current={visiblePanel === Panel.Favorites}
+                        icon={Star}
+                        onItemClick={() => {
+                            setVisiblePanel(
+                                visiblePanel === Panel.Favorites ? undefined : Panel.Favorites,
+                            );
                         }}
                         compact={compact}
                     />
                     <FooterItem
-                        item={{
-                            id: 'settings',
-                            title: 'Settings',
-                            tooltipText: 'Settings with panel',
-                            current: visiblePanel === Panel.Settings,
-                            icon: Gear,
-                            onItemClick: () => {
-                                setVisiblePanel(
-                                    visiblePanel === Panel.Settings ? undefined : Panel.Settings,
-                                );
-                            },
+                        id="settings"
+                        title="Settings"
+                        tooltipText="Settings with panel"
+                        current={visiblePanel === Panel.Settings}
+                        icon={Gear}
+                        onItemClick={() => {
+                            setVisiblePanel(
+                                visiblePanel === Panel.Settings ? undefined : Panel.Settings,
+                            );
                         }}
                         compact={compact}
                     />

src/content/components/navigation/HotkeysPanel/HotkeysPanelComponent.tsx

@@ -23,7 +23,7 @@ export function HotkeysPanelComponent({
     return (
         <HotkeysPanel
             hotkeys={hotkeys}
-            visible={visible}
+            open={visible}
             filterable={filterable}
             title={
                 <span className={b('title')}>