@gravity-ui/navigation 5.0.0-beta.3 → 5.0.0

package/build/esm/components/types.d.ts

@@ -1,5 +1,6 @@
 import React, { HTMLAttributeAnchorTarget } from 'react';
 import { AlertProps, IconProps, QAProps } from '@gravity-ui/uikit';
+import { SetCollapseBlocker } from './AsideHeader/types';
 export type MenuItemType = 'regular' | 'action' | 'divider';
 export type OpenModalSubscriber = (open: boolean) => void;
 export interface MakeItemParams {
@@ -15,13 +16,16 @@ export interface MenuItem extends QAProps {
     iconQa?: string;
     href?: string;
     current?: boolean;
-    onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>, options: {
+        setCollapseBlocker: SetCollapseBlocker | undefined;
+    }) => void;
     onItemClickCapture?: (event: React.SyntheticEvent) => void;
     itemWrapper?: (p: MakeItemParams, makeItem: (p: MakeItemParams) => React.ReactNode, opts: {
-        collapsed: boolean;
-        compact: boolean;
+        isExpanded: boolean;
         item: MenuItem;
         ref: React.RefObject<HTMLElement>;
+        /** Call with `true` when a popup opens, `false` when it closes, to block sidebar collapse while open. */
+        setCollapseBlocker: SetCollapseBlocker | undefined;
     }) => React.ReactNode;
     preventUserRemoving?: boolean;
     rightAdornment?: React.ReactNode;
@@ -46,8 +50,8 @@ export interface MenuGroup {
     collapsible?: boolean;
     /** Initial collapsed state when collapsible is true */
     collapsedByDefault?: boolean;
-    /** Current collapsed state */
-    collapsed: boolean;
+    /** Current collapsed state. When undefined, collapsedByDefault is used for display. */
+    collapsed?: boolean;
 }
 export interface LogoProps {
     text: (() => React.ReactNode) | string;
@@ -59,7 +63,8 @@ export interface LogoProps {
     textSize?: number;
     href?: string;
     target?: HTMLAttributeAnchorTarget;
-    wrapper?: (node: React.ReactNode, compact: boolean) => React.ReactNode;
+    /** Wrapper function for the logo. The `isExpanded` parameter indicates if the navigation is expanded. */
+    wrapper?: (node: React.ReactNode, isExpanded: boolean) => React.ReactNode;
     onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     'aria-label'?: string;
     'aria-labelledby'?: string;

package/build/esm/components/utils/getCollapsedWidth.d.ts

@@ -0,0 +1 @@
+export declare function getCollapsedWidth(isCompactMode?: boolean): number;

package/build/esm/components/utils/getCollapsedWidth.js

@@ -0,0 +1,8 @@
+import { ASIDE_HEADER_COLLAPSED_WIDTH_COMPACT_MODE, ASIDE_HEADER_COLLAPSED_WIDTH } from '../constants.js';
+
+function getCollapsedWidth(isCompactMode) {
+    return isCompactMode ? ASIDE_HEADER_COLLAPSED_WIDTH_COMPACT_MODE : ASIDE_HEADER_COLLAPSED_WIDTH;
+}
+
+export { getCollapsedWidth };
+//# sourceMappingURL=getCollapsedWidth.js.map

package/build/esm/components/utils/getCollapsedWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCollapsedWidth.js","sources":["../../../../../src/components/utils/getCollapsedWidth.ts"],"sourcesContent":["import {\n    ASIDE_HEADER_COLLAPSED_WIDTH,\n    ASIDE_HEADER_COLLAPSED_WIDTH_COMPACT_MODE,\n} from '../constants';\n\nexport function getCollapsedWidth(isCompactMode?: boolean): number {\n    return isCompactMode ? ASIDE_HEADER_COLLAPSED_WIDTH_COMPACT_MODE : ASIDE_HEADER_COLLAPSED_WIDTH;\n}\n"],"names":[],"mappings":";;AAKM,SAAU,iBAAiB,CAAC,aAAuB,EAAA;IACrD,OAAO,aAAa,GAAG,yCAAyC,GAAG,4BAA4B;AACnG;;;;"}

package/build/esm/index.js

@@ -1,9 +1,10 @@
 export { AsideHeader } from './components/AsideHeader/AsideHeader.js';
-export { AsideHeaderContextProvider, useAsideHeaderContext } from './components/AsideHeader/AsideHeaderContext.js';
+export { AsideHeaderContextProvider, useAsideHeaderContext, useAsideHeaderContextOptional } from './components/AsideHeader/AsideHeaderContext.js';
 export { FooterItem } from './components/AsideHeader/components/FooterItem/FooterItem.js';
 export { PageLayout } from './components/AsideHeader/components/PageLayout/PageLayout.js';
 export { PageLayoutAside } from './components/AsideHeader/components/PageLayout/PageLayoutAside.js';
 export { AsideFallback } from './components/AsideHeader/components/PageLayout/AsideFallback.js';
+export { FooterLayoutContext, useFooterLayout } from './components/AsideHeader/FooterLayoutContext.js';
 export { ActionBar } from './components/ActionBar/ActionBar.js';
 export { Title } from './components/Title/Title.js';
 export { HotkeysPanel } from './components/HotkeysPanel/HotkeysPanel.js';

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/codemods/bin/cli.js

@@ -9,7 +9,7 @@ const {program} = require('commander');
 const PACKAGE_DIR = path.dirname(__dirname);
 const TRANSFORMS_DIR = path.join(PACKAGE_DIR, 'transforms');
 
-const AVAILABLE_TRANSFORMS = ['v4'];
+const AVAILABLE_TRANSFORMS = ['v4', 'v5'];
 
 // Get available transforms
 const availableTransforms = fs
@@ -114,18 +114,30 @@ program
         });
     });
 
-// Default command to run v4 transforms
+// Command to run v4 transforms
 program
     .command('v4 <path>')
-    .description('Run all transforms in sequence')
+    .description('Run v4 migration transforms')
     .option('-d, --dry', 'Dry run (no changes will be made)')
     .option('-v, --verbose', 'Verbose output')
     .option('--ignore-pattern <pattern>', 'Ignore files matching this pattern')
     .action((targetPath, options) => {
-        console.log('Running all transforms in sequence...');
+        console.log('Running v4 migration transforms...');
         runTransform('v4', targetPath, options);
     });
 
+// Command to run v5 transforms
+program
+    .command('v5 <path>')
+    .description('Run v5 migration transforms (compact → isExpanded)')
+    .option('-d, --dry', 'Dry run (no changes will be made)')
+    .option('-v, --verbose', 'Verbose output')
+    .option('--ignore-pattern <pattern>', 'Ignore files matching this pattern')
+    .action((targetPath, options) => {
+        console.log('Running v5 migration transforms...');
+        runTransform('v5', targetPath, options);
+    });
+
 // Help command
 program
     .command('help')
@@ -138,8 +150,9 @@ program
 program.on('--help', () => {
     console.log('');
     console.log('Examples:');
-    console.log('  $ navigation-codemod transform v4 ./src');
-    console.log('  $ navigation-codemod transform v4 ./src --dry');
+    console.log('  $ navigation-codemod v4 ./src');
+    console.log('  $ navigation-codemod v5 ./src');
+    console.log('  $ navigation-codemod v5 ./src --dry');
     console.log('  $ navigation-codemod list');
     console.log('');
     console.log('Available transforms:');

package/codemods/transforms/compactToIsExpanded.ts

@@ -0,0 +1,345 @@
+/* eslint-disable no-param-reassign */
+import {execSync} from 'child_process';
+
+import type {
+    API,
+    ASTPath,
+    ArrowFunctionExpression,
+    Collection,
+    FileInfo,
+    FunctionExpression,
+    JSCodeshift,
+    JSXAttribute,
+    JSXIdentifier,
+    ObjectPattern,
+    ObjectProperty,
+} from 'jscodeshift';
+
+/**
+ * Codemod to transform `compact` prop to `isExpanded` with inverted boolean logic.
+ *
+ * Transformations:
+ * - compact={true} → isExpanded={false}
+ * - compact={false} → isExpanded={true}
+ * - compact (shorthand) → isExpanded={false}
+ * - compact={someVar} → isExpanded={!someVar}
+ * - compact={!someVar} → isExpanded={someVar}
+ * - compact={expression} → isExpanded={!(expression)}
+ *
+ * Special case for destructured parameters:
+ * - renderFooter={({ compact }) => <FooterItem compact={compact} />}
+ * - → renderFooter={({ isExpanded }) => <FooterItem isExpanded={isExpanded} />}
+ * - (No inversion when the value is the renamed destructured parameter)
+ *
+ * Also handles:
+ * - Function parameter destructuring: ({ compact }) => → ({ isExpanded }) =>
+ * - Callback second parameter: (node, compact) => → (node, isExpanded) =>
+ */
+
+const TARGET_JSX_COMPONENTS = new Set(['FooterItem', 'MobileLogo', 'Item']);
+
+const RENDER_CALLBACK_PROPS = new Set(['renderFooter', 'collapseButtonWrapper']);
+
+export default function transformer(file: FileInfo, api: API) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+
+    // First pass: rename destructuring parameters and callback params
+    const hasDestructuringUpdate = updateDestructuringParams(root, j);
+    const hasCallbackParamUpdate = updateCallbackSecondParam(root, j);
+
+    // Second pass: update JSX props with awareness of renamed identifiers
+    const hasJsxPropsUpdate = updateJsxProps(root, j);
+
+    if (!hasJsxPropsUpdate && !hasDestructuringUpdate && !hasCallbackParamUpdate) {
+        return null;
+    }
+
+    const output = root.toSource();
+
+    // Format with Prettier to ensure consistent output
+    // Uses project's prettier config if available (searches from cwd)
+    // Falls back to unformatted output if Prettier is not installed or fails
+    try {
+        const formatted = execSync('prettier --parser typescript', {
+            input: output,
+            encoding: 'utf-8',
+            maxBuffer: 10 * 1024 * 1024,
+            stdio: ['pipe', 'pipe', 'pipe'],
+        });
+        return formatted;
+    } catch {
+        // Prettier not installed or failed - return unformatted output
+        // User can run their own formatter afterwards
+        return output;
+    }
+}
+
+/**
+ * Inverts a JSX expression value.
+ * - true → false
+ * - false → true
+ * - someVar → !someVar
+ * - !someVar → someVar
+ * - (expression) → !(expression)
+ */
+function invertExpression(j: JSCodeshift, expr: any): any {
+    // Handle literal booleans - modify in place to preserve formatting
+    if (j.BooleanLiteral.check(expr) || j.Literal.check(expr)) {
+        const value = expr.value;
+        if (typeof value === 'boolean') {
+            expr.value = !value;
+            return expr;
+        }
+    }
+
+    // Handle unary negation: !something → something
+    if (j.UnaryExpression.check(expr) && expr.operator === '!') {
+        return expr.argument;
+    }
+
+    // Handle identifiers and other expressions: something → !something
+    return j.unaryExpression('!', expr);
+}
+
+/**
+ * Update JSX props: compact → isExpanded with inverted value
+ * Special handling: if value is an identifier that was renamed from destructuring,
+ * just rename it without inversion.
+ */
+function updateJsxProps(root: Collection, j: JSCodeshift): boolean {
+    let hasChanges = false;
+
+    root.find(j.JSXAttribute, {
+        name: {type: 'JSXIdentifier', name: 'compact'},
+    }).forEach((path: ASTPath<JSXAttribute>) => {
+        const jsxElement = path.parentPath.parentPath;
+
+        // Check if this is on a target component
+        if (jsxElement && j.JSXOpeningElement.check(jsxElement.node)) {
+            const elementName = jsxElement.node.name;
+            let componentName: string | null = null;
+
+            if (j.JSXIdentifier.check(elementName)) {
+                componentName = elementName.name;
+            }
+
+            // Only transform if it's a target component or if we can't determine
+            if (componentName && !TARGET_JSX_COMPONENTS.has(componentName)) {
+                return;
+            }
+        }
+
+        const attrNode = path.node;
+        const attrValue = attrNode.value;
+
+        // Rename compact → isExpanded
+        (attrNode.name as JSXIdentifier).name = 'isExpanded';
+
+        if (attrValue === null) {
+            // Shorthand: compact → isExpanded={false}
+            attrNode.value = j.jsxExpressionContainer(j.booleanLiteral(false));
+            hasChanges = true;
+        } else if (j.JSXExpressionContainer.check(attrValue)) {
+            const expr = attrValue.expression;
+
+            if (!j.JSXEmptyExpression.check(expr)) {
+                // Check if this is a simple identifier named 'compact'
+                // that might be from a renamed destructuring parameter
+                if (j.Identifier.check(expr) && expr.name === 'compact') {
+                    // Just rename it to isExpanded in place (no inversion)
+                    // This handles the case: compact={compact} → isExpanded={isExpanded}
+                    expr.name = 'isExpanded';
+                } else if (j.Identifier.check(expr) && expr.name === 'isExpanded') {
+                    // Already renamed by destructuring pass, leave as is
+                } else {
+                    // Invert the expression
+                    attrValue.expression = invertExpression(j, expr);
+                }
+            }
+            hasChanges = true;
+        } else if (j.StringLiteral.check(attrValue)) {
+            // Edge case: compact="true" or compact="false" (unusual but handle it)
+            const strValue = attrValue.value;
+            if (strValue === 'true') {
+                attrNode.value = j.jsxExpressionContainer(j.booleanLiteral(false));
+                hasChanges = true;
+            } else if (strValue === 'false') {
+                attrNode.value = j.jsxExpressionContainer(j.booleanLiteral(true));
+                hasChanges = true;
+            }
+        }
+    });
+
+    return hasChanges;
+}
+
+/**
+ * Update destructuring parameters in render callbacks:
+ * renderFooter={({ compact }) => ...} → renderFooter={({ isExpanded }) => ...}
+ */
+function updateDestructuringParams(root: Collection, j: JSCodeshift): boolean {
+    let hasChanges = false;
+
+    // Find JSX attributes that are render callbacks
+    root.find(j.JSXAttribute).forEach((attrPath: ASTPath<JSXAttribute>) => {
+        const attrName = attrPath.node.name;
+        if (!j.JSXIdentifier.check(attrName)) return;
+
+        if (!RENDER_CALLBACK_PROPS.has(attrName.name)) return;
+
+        const attrValue = attrPath.node.value;
+        if (!j.JSXExpressionContainer.check(attrValue)) return;
+
+        const expr = attrValue.expression;
+        if (!j.ArrowFunctionExpression.check(expr) && !j.FunctionExpression.check(expr)) return;
+
+        const funcExpr = expr as ArrowFunctionExpression | FunctionExpression;
+        const params = funcExpr.params;
+
+        // Look for destructuring pattern with 'compact'
+        params.forEach((param) => {
+            if (j.ObjectPattern.check(param)) {
+                const objPattern = param as ObjectPattern;
+                objPattern.properties.forEach((prop) => {
+                    if (j.ObjectProperty.check(prop) || j.Property.check(prop)) {
+                        const key = (prop as ObjectProperty).key;
+                        if (j.Identifier.check(key) && key.name === 'compact') {
+                            key.name = 'isExpanded';
+                            hasChanges = true;
+
+                            // Also update the value if it's a shorthand (compact → isExpanded)
+                            const value = (prop as ObjectProperty).value;
+                            if (j.Identifier.check(value) && value.name === 'compact') {
+                                value.name = 'isExpanded';
+
+                                // Rename all references to 'compact' in the function body to 'isExpanded'
+                                // and invert ternary expressions where compact is the test
+                                j(funcExpr)
+                                    .find(j.Identifier, {name: 'compact'})
+                                    .forEach((identPath) => {
+                                        // Skip if this is the parameter itself
+                                        if (identPath.value !== value) {
+                                            identPath.value.name = 'isExpanded';
+
+                                            // Check if this identifier is the test of a conditional expression
+                                            if (
+                                                identPath.parent &&
+                                                j.ConditionalExpression.check(
+                                                    identPath.parent.value,
+                                                ) &&
+                                                identPath.parent.value.test === identPath.value
+                                            ) {
+                                                // Swap consequent and alternate to invert the logic
+                                                const temp = identPath.parent.value.consequent;
+                                                identPath.parent.value.consequent =
+                                                    identPath.parent.value.alternate;
+                                                identPath.parent.value.alternate = temp;
+                                            }
+                                        }
+                                    });
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    });
+
+    // Also find object properties that are render callbacks
+    root.find(j.ObjectProperty).forEach((propPath: ASTPath<ObjectProperty>) => {
+        const propKey = propPath.node.key;
+        if (!j.Identifier.check(propKey)) return;
+
+        if (!RENDER_CALLBACK_PROPS.has(propKey.name) && propKey.name !== 'wrapper') return;
+
+        const propValue = propPath.node.value;
+        if (!j.ArrowFunctionExpression.check(propValue) && !j.FunctionExpression.check(propValue))
+            return;
+
+        const funcExpr = propValue as ArrowFunctionExpression | FunctionExpression;
+        const params = funcExpr.params;
+
+        // Look for destructuring pattern with 'compact'
+        params.forEach((param) => {
+            if (j.ObjectPattern.check(param)) {
+                const objPattern = param as ObjectPattern;
+                objPattern.properties.forEach((prop) => {
+                    if (j.ObjectProperty.check(prop) || j.Property.check(prop)) {
+                        const key = (prop as ObjectProperty).key;
+                        if (j.Identifier.check(key) && key.name === 'compact') {
+                            key.name = 'isExpanded';
+                            hasChanges = true;
+
+                            const value = (prop as ObjectProperty).value;
+                            if (j.Identifier.check(value) && value.name === 'compact') {
+                                value.name = 'isExpanded';
+
+                                // Rename all references to 'compact' in the function body to 'isExpanded'
+                                // and invert ternary expressions where compact is the test
+                                j(funcExpr)
+                                    .find(j.Identifier, {name: 'compact'})
+                                    .forEach((identPath) => {
+                                        // Skip if this is the parameter itself
+                                        if (identPath.value !== value) {
+                                            identPath.value.name = 'isExpanded';
+
+                                            // Check if this identifier is the test of a conditional expression
+                                            if (
+                                                identPath.parent &&
+                                                j.ConditionalExpression.check(
+                                                    identPath.parent.value,
+                                                ) &&
+                                                identPath.parent.value.test === identPath.value
+                                            ) {
+                                                // Swap consequent and alternate to invert the logic
+                                                const temp = identPath.parent.value.consequent;
+                                                identPath.parent.value.consequent =
+                                                    identPath.parent.value.alternate;
+                                                identPath.parent.value.alternate = temp;
+                                            }
+                                        }
+                                    });
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    });
+
+    return hasChanges;
+}
+
+/**
+ * Update callback second parameter:
+ * wrapper: (node, compact) => ... → wrapper: (node, isExpanded) => ...
+ */
+function updateCallbackSecondParam(root: Collection, j: JSCodeshift): boolean {
+    let hasChanges = false;
+
+    // Find 'wrapper' property in objects (e.g., logo={{ wrapper: (node, compact) => ... }})
+    root.find(j.ObjectProperty, {
+        key: {type: 'Identifier', name: 'wrapper'},
+    }).forEach((propPath: ASTPath<ObjectProperty>) => {
+        const propValue = propPath.node.value;
+
+        if (!j.ArrowFunctionExpression.check(propValue) && !j.FunctionExpression.check(propValue)) {
+            return;
+        }
+
+        const funcExpr = propValue as ArrowFunctionExpression | FunctionExpression;
+        const params = funcExpr.params;
+
+        // Check if second parameter is 'compact'
+        if (params.length >= 2) {
+            const secondParam = params[1];
+            if (j.Identifier.check(secondParam) && secondParam.name === 'compact') {
+                secondParam.name = 'isExpanded';
+                hasChanges = true;
+            }
+        }
+    });
+
+    return hasChanges;
+}

package/codemods/transforms/compactToPinned.ts

@@ -0,0 +1,135 @@
+/* eslint-disable no-param-reassign */
+import {execSync} from 'child_process';
+
+import type {
+    API,
+    ASTPath,
+    Collection,
+    FileInfo,
+    JSCodeshift,
+    JSXAttribute,
+    JSXIdentifier,
+} from 'jscodeshift';
+
+/**
+ * Codemod to transform AsideHeader/PageLayout `compact` → `pinned` and `onChangeCompact` → `onChangePinned`.
+ *
+ * Only applies to JSX elements: AsideHeader, PageLayout.
+ *
+ * Transformations:
+ * - compact={true} → pinned={false}
+ * - compact={false} → pinned={true}
+ * - compact (shorthand) → pinned={false}
+ * - compact={someVar} → pinned={!someVar}
+ * - onChangeCompact={fn} → onChangePinned={fn} (rename only, callback now receives pinned)
+ */
+
+const LAYOUT_JSX_COMPONENTS = new Set(['AsideHeader', 'PageLayout']);
+
+function isLayoutComponent(path: ASTPath<JSXAttribute>, j: JSCodeshift): boolean {
+    const openingElement = path.parentPath?.node;
+    if (!openingElement || !j.JSXOpeningElement.check(openingElement)) {
+        return false;
+    }
+    const name = openingElement.name;
+    if (!j.JSXIdentifier.check(name)) {
+        return false;
+    }
+    return LAYOUT_JSX_COMPONENTS.has(name.name);
+}
+
+/**
+ * Inverts a JSX expression value.
+ */
+function invertExpression(j: JSCodeshift, expr: any): any {
+    if (j.BooleanLiteral.check(expr) || j.Literal.check(expr)) {
+        const value = expr.value;
+        if (typeof value === 'boolean') {
+            expr.value = !value;
+            return expr;
+        }
+    }
+    if (j.UnaryExpression.check(expr) && expr.operator === '!') {
+        return expr.argument;
+    }
+    return j.unaryExpression('!', expr);
+}
+
+function updateCompactToPinned(root: Collection, j: JSCodeshift): boolean {
+    let hasChanges = false;
+
+    root.find(j.JSXAttribute, {name: {type: 'JSXIdentifier', name: 'compact'}}).forEach(
+        (path: ASTPath<JSXAttribute>) => {
+            if (!isLayoutComponent(path, j)) {
+                return;
+            }
+
+            const attrNode = path.node;
+            const attrValue = attrNode.value;
+
+            (attrNode.name as JSXIdentifier).name = 'pinned';
+
+            if (attrValue === null) {
+                attrNode.value = j.jsxExpressionContainer(j.booleanLiteral(false));
+                hasChanges = true;
+            } else if (j.JSXExpressionContainer.check(attrValue)) {
+                const expr = attrValue.expression;
+                if (!j.JSXEmptyExpression.check(expr)) {
+                    attrValue.expression = invertExpression(j, expr);
+                }
+                hasChanges = true;
+            } else if (j.StringLiteral.check(attrValue)) {
+                if (attrValue.value === 'true') {
+                    attrNode.value = j.jsxExpressionContainer(j.booleanLiteral(false));
+                } else if (attrValue.value === 'false') {
+                    attrNode.value = j.jsxExpressionContainer(j.booleanLiteral(true));
+                }
+                hasChanges = true;
+            }
+        },
+    );
+
+    return hasChanges;
+}
+
+function updateOnChangeCompactToOnChangePinned(root: Collection, j: JSCodeshift): boolean {
+    let hasChanges = false;
+
+    root.find(j.JSXAttribute, {
+        name: {type: 'JSXIdentifier', name: 'onChangeCompact'},
+    }).forEach((path: ASTPath<JSXAttribute>) => {
+        if (!isLayoutComponent(path, j)) {
+            return;
+        }
+        (path.node.name as JSXIdentifier).name = 'onChangePinned';
+        hasChanges = true;
+    });
+
+    return hasChanges;
+}
+
+export default function transformer(file: FileInfo, api: API) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+
+    const hasCompactUpdate = updateCompactToPinned(root, j);
+    const hasOnChangeUpdate = updateOnChangeCompactToOnChangePinned(root, j);
+
+    if (!hasCompactUpdate && !hasOnChangeUpdate) {
+        return null;
+    }
+
+    const output = root.toSource();
+
+    try {
+        const formatted = execSync('prettier --parser typescript', {
+            input: output,
+            encoding: 'utf-8',
+            maxBuffer: 10 * 1024 * 1024,
+            stdio: ['pipe', 'pipe', 'pipe'],
+        });
+        return formatted;
+    } catch {
+        return output;
+    }
+}

package/codemods/transforms/v5.ts

@@ -0,0 +1,36 @@
+import type {API, FileInfo, Options} from 'jscodeshift';
+
+import compactToIsExpanded from './compactToIsExpanded';
+import compactToPinned from './compactToPinned';
+
+export default function transform(file: FileInfo, api: API, options: Options) {
+    let source = file.source;
+    let hasChanges = false;
+
+    const transforms = [
+        {name: 'compact-to-is-expanded', transform: compactToIsExpanded},
+        {name: 'compact-to-pinned', transform: compactToPinned},
+    ];
+
+    for (const {name, transform: transformFn} of transforms) {
+        try {
+            const result = transformFn({source, path: file.path}, api);
+            if (result && result !== source) {
+                source = result;
+                hasChanges = true;
+
+                if (options && options.verbose) {
+                    console.log(`✓ Applied ${name}`);
+                }
+            }
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            console.error(`Error applying ${name}:`, errorMessage);
+            if (options && options.verbose && error instanceof Error) {
+                console.error(error.stack);
+            }
+        }
+    }
+
+    return hasChanges ? source : null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/navigation",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0",
   "description": "Gravity UI Navigation components",
   "license": "MIT",
   "repository": {
@@ -70,7 +70,7 @@
     "@gravity-ui/prettier-config": "^1.0.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^7.28.0",
+    "@gravity-ui/uikit": "^7.31.0",
     "@jest/globals": "^30.0.5",
     "@playwright/experimental-ct-react": "^1.49.1",
     "@playwright/test": "^1.49.1",