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

package/build/esm/components/Settings/SettingsMenu/SettingsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsMenu.js","sources":["../../../../../../src/components/Settings/SettingsMenu/SettingsMenu.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../utils/cn';\nimport {useCurrent, useStableCallback} from '../helpers';\nimport {Item, SettingsMenuProps} from '../types';\n\nimport styles from './SettingsMenu.module.scss';\n\nconst b = createBlock('settings-menu', styles);\n\nexport interface SettingsMenuInstance {\n    handleKeyDown(event: React.KeyboardEvent): boolean;\n    clearFocus(): void;\n}\n\nexport const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuProps>(\n    // eslint-disable-next-line prefer-arrow-callback\n    function SettingsMenu({items, onChange, activeItemId}, ref) {\n        const [focusItemId, setFocusId] = React.useState<string>();\n        const containerRef = React.useRef<HTMLDivElement>(null);\n        const handleChange = useStableCallback(onChange);\n        const getFocused = useCurrent(focusItemId);\n\n        React.useImperativeHandle(\n            ref,\n            () => ({\n                handleKeyDown(event) {\n                    if (!containerRef.current) {\n                        return false;\n                    }\n                    const focused = getFocused();\n                    if (focused && event.key === 'Enter') {\n                        handleChange(focused);\n                        return true;\n                    } else if (event.key === 'ArrowDown') {\n                        setFocusId(focusNext(containerRef.current, focused, 1));\n                        return true;\n                    } else if (event.key === 'ArrowUp') {\n                        setFocusId(focusNext(containerRef.current, focused, -1));\n                        return true;\n                    }\n                    return false;\n                },\n                clearFocus() {\n                    setFocusId(undefined);\n                },\n            }),\n            [getFocused, handleChange],\n        );\n\n        return (\n            <div ref={containerRef} className={b()}>\n                {items.map((firstLevelItem) => {\n                    if ('groupTitle' in firstLevelItem) {\n                        return (\n                            <div key={firstLevelItem.groupTitle} className={b('group')}>\n                                <span className={b('group-heading')}>\n                                    {firstLevelItem.groupTitle}\n                                </span>\n                                {firstLevelItem.items.map((item) => {\n                                    return renderMenuItem(\n                                        item,\n                                        onChange,\n                                        activeItemId,\n                                        focusItemId,\n                                    );\n                                })}\n                            </div>\n                        );\n                    }\n                    return renderMenuItem(firstLevelItem, onChange, activeItemId, focusItemId);\n                })}\n            </div>\n        );\n    },\n);\n\nfunction renderMenuItem(\n    item: Item,\n    onChange: (id: string) => void,\n    activeItemId: string | undefined,\n    focusItemId: string | undefined,\n) {\n    return (\n        <span\n            key={item.title}\n            className={b('item', {\n                selected: activeItemId === item.id,\n                disabled: item.disabled,\n                focused: focusItemId === item.id,\n                badge: item.withBadge,\n            })}\n            onClick={() => {\n                if (!item.disabled) {\n                    onChange(item.id);\n                }\n            }}\n            data-id={item.id}\n        >\n            {item.icon ? <Icon size={16} {...item.icon} className={b('item-icon')} /> : undefined}\n            <span>{item.title}</span>\n        </span>\n    );\n}\n\nfunction focusNext(container: HTMLElement, focused: string | undefined, direction: number) {\n    const elements = container.querySelectorAll(`.${b('item')}:not(.${b('item')}_disabled)`);\n    if (elements.length === 0) {\n        return undefined;\n    }\n\n    let currentIndex = direction > 0 ? -1 : 0;\n    if (focused) {\n        currentIndex = Array.prototype.findIndex.call(\n            elements,\n            (element) => element.getAttribute('data-id') === focused,\n        );\n    }\n\n    currentIndex = (elements.length + currentIndex + direction) % elements.length;\n    return elements[currentIndex].getAttribute('data-id') ?? undefined;\n}\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"SettingsMenu.js","sources":["../../../../../../src/components/Settings/SettingsMenu/SettingsMenu.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../utils/cn';\nimport {useCurrent, useStableCallback} from '../helpers';\nimport {Item, SettingsMenuProps} from '../types';\n\nimport styles from './SettingsMenu.module.scss';\n\nconst b = createBlock('settings-menu', styles);\n\nexport interface SettingsMenuInstance {\n    handleKeyDown(event: React.KeyboardEvent): boolean;\n    clearFocus(): void;\n}\n\nexport const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuProps>(\n    // eslint-disable-next-line prefer-arrow-callback\n    function SettingsMenu({items, onChange, activeItemId}, ref) {\n        const [focusItemId, setFocusId] = React.useState<string>();\n        const [scrolled, setScrolled] = React.useState(false);\n        const containerRef = React.useRef<HTMLDivElement>(null);\n        const handleChange = useStableCallback(onChange);\n        const getFocused = useCurrent(focusItemId);\n\n        const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {\n            setScrolled(event.currentTarget.scrollTop > 0);\n        }, []);\n\n        React.useImperativeHandle(\n            ref,\n            () => ({\n                handleKeyDown(event) {\n                    if (!containerRef.current) {\n                        return false;\n                    }\n                    const focused = getFocused();\n                    if (focused && event.key === 'Enter') {\n                        handleChange(focused);\n                        return true;\n                    } else if (event.key === 'ArrowDown') {\n                        setFocusId(focusNext(containerRef.current, focused, 1));\n                        return true;\n                    } else if (event.key === 'ArrowUp') {\n                        setFocusId(focusNext(containerRef.current, focused, -1));\n                        return true;\n                    }\n                    return false;\n                },\n                clearFocus() {\n                    setFocusId(undefined);\n                },\n            }),\n            [getFocused, handleChange],\n        );\n\n        return (\n            <div ref={containerRef} className={b({scrolled})} onScroll={handleScroll}>\n                {items.map((firstLevelItem) => {\n                    if ('groupTitle' in firstLevelItem) {\n                        return (\n                            <div key={firstLevelItem.groupTitle} className={b('group')}>\n                                <span className={b('group-heading')}>\n                                    {firstLevelItem.groupTitle}\n                                </span>\n                                {firstLevelItem.items.map((item) => {\n                                    return renderMenuItem(\n                                        item,\n                                        onChange,\n                                        activeItemId,\n                                        focusItemId,\n                                    );\n                                })}\n                            </div>\n                        );\n                    }\n                    return renderMenuItem(firstLevelItem, onChange, activeItemId, focusItemId);\n                })}\n            </div>\n        );\n    },\n);\n\nfunction renderMenuItem(\n    item: Item,\n    onChange: (id: string) => void,\n    activeItemId: string | undefined,\n    focusItemId: string | undefined,\n) {\n    return (\n        <span\n            key={item.title}\n            className={b('item', {\n                selected: activeItemId === item.id,\n                disabled: item.disabled,\n                focused: focusItemId === item.id,\n                badge: item.withBadge,\n            })}\n            onClick={() => {\n                if (!item.disabled) {\n                    onChange(item.id);\n                }\n            }}\n            data-id={item.id}\n        >\n            {item.icon ? <Icon size={16} {...item.icon} className={b('item-icon')} /> : undefined}\n            <span>{item.title}</span>\n        </span>\n    );\n}\n\nfunction focusNext(container: HTMLElement, focused: string | undefined, direction: number) {\n    const elements = container.querySelectorAll(`.${b('item')}:not(.${b('item')}_disabled)`);\n    if (elements.length === 0) {\n        return undefined;\n    }\n\n    let currentIndex = direction > 0 ? -1 : 0;\n    if (focused) {\n        currentIndex = Array.prototype.findIndex.call(\n            elements,\n            (element) => element.getAttribute('data-id') === focused,\n        );\n    }\n\n    currentIndex = (elements.length + currentIndex + direction) % elements.length;\n    return elements[currentIndex].getAttribute('data-id') ?? undefined;\n}\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/Settings/SettingsMenu/SettingsMenu.module.scss.js

@@ -1,4 +1,4 @@
-var styles = {"gn-settings-menu__group-heading":"SettingsMenu-module__gn-settings-menu__group-heading___b3rMA","gnSettingsMenuGroupHeading":"SettingsMenu-module__gn-settings-menu__group-heading___b3rMA","gn-settings-menu__group":"SettingsMenu-module__gn-settings-menu__group___zBrCj","gnSettingsMenuGroup":"SettingsMenu-module__gn-settings-menu__group___zBrCj","gn-settings-menu__item":"SettingsMenu-module__gn-settings-menu__item___QGz0Y","gnSettingsMenuItem":"SettingsMenu-module__gn-settings-menu__item___QGz0Y","gn-settings-menu__item-icon":"SettingsMenu-module__gn-settings-menu__item-icon___B-h-X","gnSettingsMenuItemIcon":"SettingsMenu-module__gn-settings-menu__item-icon___B-h-X","gn-settings-menu__item_focused":"SettingsMenu-module__gn-settings-menu__item_focused___pKQBC","gnSettingsMenuItemFocused":"SettingsMenu-module__gn-settings-menu__item_focused___pKQBC","gn-settings-menu__item_selected":"SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr","gnSettingsMenuItemSelected":"SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr","gn-settings-menu__item_disabled":"SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8","gnSettingsMenuItemDisabled":"SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8","gn-settings-menu__item_badge":"SettingsMenu-module__gn-settings-menu__item_badge___I-O-X","gnSettingsMenuItemBadge":"SettingsMenu-module__gn-settings-menu__item_badge___I-O-X"};
+var styles = {"gn-settings-menu":"SettingsMenu-module__gn-settings-menu___ChFyc","gnSettingsMenu":"SettingsMenu-module__gn-settings-menu___ChFyc","gn-settings-menu_scrolled":"SettingsMenu-module__gn-settings-menu_scrolled___QYbnX","gnSettingsMenuScrolled":"SettingsMenu-module__gn-settings-menu_scrolled___QYbnX","gn-settings-menu__group-heading":"SettingsMenu-module__gn-settings-menu__group-heading___b3rMA","gnSettingsMenuGroupHeading":"SettingsMenu-module__gn-settings-menu__group-heading___b3rMA","gn-settings-menu__group":"SettingsMenu-module__gn-settings-menu__group___zBrCj","gnSettingsMenuGroup":"SettingsMenu-module__gn-settings-menu__group___zBrCj","gn-settings-menu__item":"SettingsMenu-module__gn-settings-menu__item___QGz0Y","gnSettingsMenuItem":"SettingsMenu-module__gn-settings-menu__item___QGz0Y","gn-settings-menu__item-icon":"SettingsMenu-module__gn-settings-menu__item-icon___B-h-X","gnSettingsMenuItemIcon":"SettingsMenu-module__gn-settings-menu__item-icon___B-h-X","gn-settings-menu__item_focused":"SettingsMenu-module__gn-settings-menu__item_focused___pKQBC","gnSettingsMenuItemFocused":"SettingsMenu-module__gn-settings-menu__item_focused___pKQBC","gn-settings-menu__item_selected":"SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr","gnSettingsMenuItemSelected":"SettingsMenu-module__gn-settings-menu__item_selected___Og2Jr","gn-settings-menu__item_disabled":"SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8","gnSettingsMenuItemDisabled":"SettingsMenu-module__gn-settings-menu__item_disabled___xv9E8","gn-settings-menu__item_badge":"SettingsMenu-module__gn-settings-menu__item_badge___I-O-X","gnSettingsMenuItemBadge":"SettingsMenu-module__gn-settings-menu__item_badge___I-O-X"};
 
 export { styles as default };
 //# sourceMappingURL=SettingsMenu.module.scss.js.map

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

@@ -1,5 +1,11 @@
-export declare const ASIDE_HEADER_ICON_SIZE = 18;
-export declare const ASIDE_HEADER_COMPACT_WIDTH = 56;
-export declare const ASIDE_HEADER_EXPANDED_WIDTH = 236;
-export declare const ITEM_HEIGHT = 40;
+export declare const ASIDE_HEADER_ICON_SIZE = 16;
+export declare const ASIDE_HEADER_COLLAPSED_WIDTH = 56;
+export declare const ASIDE_HEADER_COLLAPSED_WIDTH_COMPACT_MODE = 40;
+export declare const ASIDE_HEADER_EXPANDED_WIDTH = 240;
+export declare const ITEM_HEIGHT = 36;
+export declare const ITEM_HEIGHT_COMPACT = 28;
 export declare const HEADER_DIVIDER_HEIGHT = 29;
+export declare const HEADER_DIVIDER_HEIGHT_COMPACT = 22;
+export declare const ASIDE_HEADER_EXPAND_TRANSITION_DELAY = 150;
+export declare const ASIDE_HEADER_EXPAND_DELAY = 250;
+export declare const ITEM_GAP = 2;

package/build/esm/components/constants.js

@@ -1,8 +1,14 @@
-const ASIDE_HEADER_ICON_SIZE = 18;
-const ASIDE_HEADER_COMPACT_WIDTH = 56;
-const ASIDE_HEADER_EXPANDED_WIDTH = 236;
-const ITEM_HEIGHT = 40;
+const ASIDE_HEADER_ICON_SIZE = 16;
+const ASIDE_HEADER_COLLAPSED_WIDTH = 56;
+const ASIDE_HEADER_COLLAPSED_WIDTH_COMPACT_MODE = 40;
+const ASIDE_HEADER_EXPANDED_WIDTH = 240;
+const ITEM_HEIGHT = 36;
+const ITEM_HEIGHT_COMPACT = 28;
 const HEADER_DIVIDER_HEIGHT = 29;
+const HEADER_DIVIDER_HEIGHT_COMPACT = 22;
+const ASIDE_HEADER_EXPAND_TRANSITION_DELAY = 150;
+const ASIDE_HEADER_EXPAND_DELAY = 250;
+const ITEM_GAP = 2;
 
-export { ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH, ASIDE_HEADER_ICON_SIZE, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT };
+export { ASIDE_HEADER_COLLAPSED_WIDTH, ASIDE_HEADER_COLLAPSED_WIDTH_COMPACT_MODE, ASIDE_HEADER_EXPANDED_WIDTH, ASIDE_HEADER_EXPAND_DELAY, ASIDE_HEADER_EXPAND_TRANSITION_DELAY, ASIDE_HEADER_ICON_SIZE, HEADER_DIVIDER_HEIGHT, HEADER_DIVIDER_HEIGHT_COMPACT, ITEM_GAP, ITEM_HEIGHT, ITEM_HEIGHT_COMPACT };
 //# sourceMappingURL=constants.js.map

package/build/esm/components/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/components/constants.ts"],"sourcesContent":["export const ASIDE_HEADER_ICON_SIZE = 18;\nexport const ASIDE_HEADER_COMPACT_WIDTH = 56;\nexport const ASIDE_HEADER_EXPANDED_WIDTH = 236;\nexport const ITEM_HEIGHT = 40;\nexport const HEADER_DIVIDER_HEIGHT = 29;\n"],"names":[],"mappings":"AAAO,MAAM,sBAAsB,GAAG;AAC/B,MAAM,0BAA0B,GAAG;AACnC,MAAM,2BAA2B,GAAG;AACpC,MAAM,WAAW,GAAG;AACpB,MAAM,qBAAqB,GAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../src/components/constants.ts"],"sourcesContent":["export const ASIDE_HEADER_ICON_SIZE = 16;\nexport const ASIDE_HEADER_COLLAPSED_WIDTH = 56;\nexport const ASIDE_HEADER_COLLAPSED_WIDTH_COMPACT_MODE = 40;\nexport const ASIDE_HEADER_EXPANDED_WIDTH = 240;\nexport const ITEM_HEIGHT = 36;\nexport const ITEM_HEIGHT_COMPACT = 28;\nexport const HEADER_DIVIDER_HEIGHT = 29;\nexport const HEADER_DIVIDER_HEIGHT_COMPACT = 22;\nexport const ASIDE_HEADER_EXPAND_TRANSITION_DELAY = 150;\nexport const ASIDE_HEADER_EXPAND_DELAY = 250;\nexport const ITEM_GAP = 2;\n"],"names":[],"mappings":"AAAO,MAAM,sBAAsB,GAAG;AAC/B,MAAM,4BAA4B,GAAG;AACrC,MAAM,yCAAyC,GAAG;AAClD,MAAM,2BAA2B,GAAG;AACpC,MAAM,WAAW,GAAG;AACpB,MAAM,mBAAmB,GAAG;AAC5B,MAAM,qBAAqB,GAAG;AAC9B,MAAM,6BAA6B,GAAG;AACtC,MAAM,oCAAoC,GAAG;AAC7C,MAAM,yBAAyB,GAAG;AAClC,MAAM,QAAQ,GAAG;;;;"}

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,33 +16,43 @@ export interface MenuItem extends QAProps {
     iconQa?: string;
     href?: string;
     current?: boolean;
-    pinned?: 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;
     type?: MenuItemType;
-    afterMoreButton?: boolean;
-    /**
-     * Order number. Used to determine the display order in the side menu
-     */
-    order?: number;
     /**
      * Visibility flag in the side menu
      */
     hidden?: boolean;
     /**
-     * The category to which the menu item belongs. Need for grouping in the display/editing mode of all pages
+     * The group ID to which the menu item belongs. Used for grouping menu items
      */
-    category?: string;
+    groupId?: string;
     className?: string;
 }
+export interface MenuGroup {
+    id: string;
+    title: string;
+    icon?: IconProps['data'];
+    /** Hide the group from display */
+    hidden?: boolean;
+    /** Allow collapsing the group via UI */
+    collapsible?: boolean;
+    /** Initial collapsed state when collapsible is true */
+    collapsedByDefault?: boolean;
+    /** Current collapsed state. When undefined, collapsedByDefault is used for display. */
+    collapsed?: boolean;
+}
 export interface LogoProps {
     text: (() => React.ReactNode) | string;
     className?: string;
@@ -52,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;
+}