@gravity-ui/navigation 5.0.0 → 5.0.1

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

@@ -10,7 +10,7 @@ export interface ModalItem {
     onClose?: () => void;
 }
 type MobileMenuItemType = 'regular' | 'divider';
-export interface MobileMenuItem extends Omit<MenuItem, 'tooltipText' | 'rightAdornment' | 'itemWrapper' | 'onItemClick' | 'href'> {
+export interface MobileMenuItem extends Omit<MenuItem, 'tooltipText' | 'pinned' | 'rightAdornment' | 'afterMoreButton' | 'itemWrapper' | 'onItemClick' | 'href'> {
     type?: MobileMenuItemType;
     closeMenuOnClick?: boolean;
     link?: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LogoProps } from '../types';
 export interface MobileLogoProps extends LogoProps {
-    isExpanded: boolean;
+    compact: boolean;
 }
 export declare const MobileLogo: React.FC<MobileLogoProps>;

package/build/esm/components/MobileLogo/MobileLogo.js

@@ -5,7 +5,7 @@ import { createBlock } from '../utils/cn.js';
 import styles from './MobileLogo.module.scss.js';
 
 const b = createBlock('mobile-logo', styles);
-const MobileLogo = ({ text, isExpanded, icon, iconSrc, iconClassName, iconSize = 32, textSize = 20, href = '/', target = '_self', wrapper, onClick, className, }) => {
+const MobileLogo = ({ text, compact, icon, iconSrc, iconClassName, iconSize = 32, textSize = 20, href = '/', target = '_self', wrapper, onClick, className, }) => {
     const hasWrapper = typeof wrapper === 'function';
     let logoIcon;
     if (iconSrc) {
@@ -24,7 +24,7 @@ const MobileLogo = ({ text, isExpanded, icon, iconSrc, iconClassName, iconSize =
     const logo = (React__default.createElement(React__default.Fragment, null,
         logoIcon,
         logoTitle));
-    return hasWrapper ? (React__default.createElement("div", { className: b(null, className), onClick: onClick }, wrapper(logo, isExpanded))) : (React__default.createElement("a", { href: href, target: target, ref: target === '_self' ? undefined : 'noreferrer', className: b(null, className), onClick: onClick }, logo));
+    return hasWrapper ? (React__default.createElement("div", { className: b(null, className), onClick: onClick }, wrapper(logo, compact))) : (React__default.createElement("a", { href: href, target: target, ref: target === '_self' ? undefined : 'noreferrer', className: b(null, className), onClick: onClick }, logo));
 };
 
 export { MobileLogo };

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

@@ -1 +1 @@
-{"version":3,"file":"MobileLogo.js","sources":["../../../../../src/components/MobileLogo/MobileLogo.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {LogoProps} from '../types';\nimport {createBlock} from '../utils/cn';\n\nimport styles from './MobileLogo.module.scss';\n\nconst b = createBlock('mobile-logo', styles);\n\nexport interface MobileLogoProps extends LogoProps {\n    isExpanded: boolean;\n}\n\nexport const MobileLogo: React.FC<MobileLogoProps> = ({\n    text,\n    isExpanded,\n    icon,\n    iconSrc,\n    iconClassName,\n    iconSize = 32,\n    textSize = 20,\n    href = '/',\n    target = '_self',\n    wrapper,\n    onClick,\n    className,\n}) => {\n    const hasWrapper = typeof wrapper === 'function';\n\n    let logoIcon;\n\n    if (iconSrc) {\n        logoIcon = (\n            <img\n                alt=\"logo icon\"\n                src={iconSrc}\n                width={iconSize}\n                height={iconSize}\n                className={iconClassName}\n            />\n        );\n    } else if (icon) {\n        logoIcon = <Icon data={icon} size={iconSize} className={b('icon', iconClassName)} />;\n    }\n\n    let logoTitle: React.ReactNode;\n\n    if (typeof text === 'function') {\n        logoTitle = text();\n    } else {\n        logoTitle = (\n            <span className={b('title')} style={{fontSize: textSize}}>\n                {text}\n            </span>\n        );\n    }\n\n    const logo = (\n        <React.Fragment>\n            {logoIcon}\n            {logoTitle}\n        </React.Fragment>\n    );\n\n    return hasWrapper ? (\n        <div className={b(null, className)} onClick={onClick}>\n            {wrapper(logo, isExpanded)}\n        </div>\n    ) : (\n        <a\n            href={href}\n            target={target}\n            ref={target === '_self' ? undefined : 'noreferrer'}\n            className={b(null, className)}\n            onClick={onClick}\n        >\n            {logo}\n        </a>\n    );\n};\n"],"names":["React"],"mappings":";;;;;AASA,MAAM,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC;AAM/B,MAAA,UAAU,GAA8B,CAAC,EAClD,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,OAAO,EACP,aAAa,EACb,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,OAAO,EAChB,OAAO,EACP,OAAO,EACP,SAAS,GACZ,KAAI;AACD,IAAA,MAAM,UAAU,GAAG,OAAO,OAAO,KAAK,UAAU;AAEhD,IAAA,IAAI,QAAQ;IAEZ,IAAI,OAAO,EAAE;QACT,QAAQ,IACJA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAC,WAAW,EACf,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,QAAQ,EAChB,SAAS,EAAE,aAAa,EAC1B,CAAA,CACL;;SACE,IAAI,IAAI,EAAE;QACb,QAAQ,GAAGA,6BAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,aAAa,CAAC,EAAA,CAAI;;AAGxF,IAAA,IAAI,SAA0B;AAE9B,IAAA,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;QAC5B,SAAS,GAAG,IAAI,EAAE;;SACf;QACH,SAAS,IACLA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAC,EACnD,EAAA,IAAI,CACF,CACV;;AAGL,IAAA,MAAM,IAAI,IACNA,cAAC,CAAA,aAAA,CAAAA,cAAK,CAAC,QAAQ,EAAA,IAAA;QACV,QAAQ;QACR,SAAS,CACG,CACpB;AAED,IAAA,OAAO,UAAU,IACbA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAC/C,EAAA,OAAO,CAAC,IAAI,EAAE,UAAU,CAAC,CACxB,KAENA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACI,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,KAAK,OAAO,GAAG,SAAS,GAAG,YAAY,EAClD,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,OAAO,EAAE,OAAO,EAAA,EAEf,IAAI,CACL,CACP;AACL;;;;"}
+{"version":3,"file":"MobileLogo.js","sources":["../../../../../src/components/MobileLogo/MobileLogo.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {LogoProps} from '../types';\nimport {createBlock} from '../utils/cn';\n\nimport styles from './MobileLogo.module.scss';\n\nconst b = createBlock('mobile-logo', styles);\n\nexport interface MobileLogoProps extends LogoProps {\n    compact: boolean;\n}\n\nexport const MobileLogo: React.FC<MobileLogoProps> = ({\n    text,\n    compact,\n    icon,\n    iconSrc,\n    iconClassName,\n    iconSize = 32,\n    textSize = 20,\n    href = '/',\n    target = '_self',\n    wrapper,\n    onClick,\n    className,\n}) => {\n    const hasWrapper = typeof wrapper === 'function';\n\n    let logoIcon;\n\n    if (iconSrc) {\n        logoIcon = (\n            <img\n                alt=\"logo icon\"\n                src={iconSrc}\n                width={iconSize}\n                height={iconSize}\n                className={iconClassName}\n            />\n        );\n    } else if (icon) {\n        logoIcon = <Icon data={icon} size={iconSize} className={b('icon', iconClassName)} />;\n    }\n\n    let logoTitle: React.ReactNode;\n\n    if (typeof text === 'function') {\n        logoTitle = text();\n    } else {\n        logoTitle = (\n            <span className={b('title')} style={{fontSize: textSize}}>\n                {text}\n            </span>\n        );\n    }\n\n    const logo = (\n        <React.Fragment>\n            {logoIcon}\n            {logoTitle}\n        </React.Fragment>\n    );\n\n    return hasWrapper ? (\n        <div className={b(null, className)} onClick={onClick}>\n            {wrapper(logo, compact)}\n        </div>\n    ) : (\n        <a\n            href={href}\n            target={target}\n            ref={target === '_self' ? undefined : 'noreferrer'}\n            className={b(null, className)}\n            onClick={onClick}\n        >\n            {logo}\n        </a>\n    );\n};\n"],"names":["React"],"mappings":";;;;;AASA,MAAM,CAAC,GAAG,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC;AAM/B,MAAA,UAAU,GAA8B,CAAC,EAClD,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,OAAO,EACP,aAAa,EACb,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,OAAO,EAChB,OAAO,EACP,OAAO,EACP,SAAS,GACZ,KAAI;AACD,IAAA,MAAM,UAAU,GAAG,OAAO,OAAO,KAAK,UAAU;AAEhD,IAAA,IAAI,QAAQ;IAEZ,IAAI,OAAO,EAAE;QACT,QAAQ,IACJA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAC,WAAW,EACf,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,QAAQ,EAChB,SAAS,EAAE,aAAa,EAC1B,CAAA,CACL;;SACE,IAAI,IAAI,EAAE;QACb,QAAQ,GAAGA,6BAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,aAAa,CAAC,EAAA,CAAI;;AAGxF,IAAA,IAAI,SAA0B;AAE9B,IAAA,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;QAC5B,SAAS,GAAG,IAAI,EAAE;;SACf;QACH,SAAS,IACLA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAC,EACnD,EAAA,IAAI,CACF,CACV;;AAGL,IAAA,MAAM,IAAI,IACNA,cAAC,CAAA,aAAA,CAAAA,cAAK,CAAC,QAAQ,EAAA,IAAA;QACV,QAAQ;QACR,SAAS,CACG,CACpB;AAED,IAAA,OAAO,UAAU,IACbA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAC/C,EAAA,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CACrB,KAENA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACI,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,KAAK,OAAO,GAAG,SAAS,GAAG,YAAY,EAClD,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,OAAO,EAAE,OAAO,EAAA,EAEf,IAAI,CACL,CACP;AACL;;;;"}

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

@@ -1,8 +1,8 @@
 import './Settings.css';
-import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { __rest } from 'tslib';
 import React__default from 'react';
 import { Loader, Flex } from '@gravity-ui/uikit';
-import identity from '../../_virtual/identity.js';
+import identity from 'lodash/identity';
 import { Title } from '../Title/Title.js';
 import { useSettingsSelectionProviderValue, SettingsSelectionContextProvider, useSettingsSelectionContext } from './Selection/context.js';
 import { SettingsContext } from './SettingsContext/SettingsContext.js';

package/build/esm/components/Settings/SettingsSearch/AllResultsPage.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import { ListUl } from '@gravity-ui/icons';
-import last from '../../../_virtual/last.js';
+import last from 'lodash/last';
 import i18n from '../i18n/index.js';
 
 const allSearchResultsId = 'allSearchResults';

package/build/esm/components/Settings/SettingsSearch/SettingsSearch.js

@@ -1,6 +1,6 @@
 import React__default, { useEffect } from 'react';
 import { TextInput } from '@gravity-ui/uikit';
-import debounceFn from '../../../_virtual/debounce.js';
+import debounceFn from 'lodash/debounce';
 import { cn } from '../../utils/cn.js';
 import { useStableCallback } from '../helpers.js';
 import i18n from '../i18n/index.js';

package/build/esm/components/Settings/SettingsSection.js

@@ -1,4 +1,4 @@
-import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { __rest } from 'tslib';
 import React__default from 'react';
 import { Flex } from '@gravity-ui/uikit';
 import { useSettingsContext } from './SettingsContext/useSettingsContext.js';

package/build/esm/components/TopAlert/useTopAlertHeight.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import debounceFn from '../../_virtual/debounce.js';
+import debounceFn from 'lodash/debounce';
 
 const G_ROOT_CLASS_NAME = 'g-root';
 const useTopAlertHeight = ({ alert }) => {

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

@@ -1,11 +1,5 @@
-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 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 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,14 +1,8 @@
-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 ASIDE_HEADER_ICON_SIZE = 18;
+const ASIDE_HEADER_COMPACT_WIDTH = 56;
+const ASIDE_HEADER_EXPANDED_WIDTH = 236;
+const ITEM_HEIGHT = 40;
 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_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 };
+export { ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH, ASIDE_HEADER_ICON_SIZE, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT };
 //# 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 = 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;;;;"}
+{"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;;;;"}

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

@@ -1,6 +1,5 @@
 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 {
@@ -16,43 +15,33 @@ export interface MenuItem extends QAProps {
     iconQa?: string;
     href?: string;
     current?: boolean;
-    onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>, options: {
-        setCollapseBlocker: SetCollapseBlocker | undefined;
-    }) => void;
+    pinned?: boolean;
+    onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     onItemClickCapture?: (event: React.SyntheticEvent) => void;
     itemWrapper?: (p: MakeItemParams, makeItem: (p: MakeItemParams) => React.ReactNode, opts: {
-        isExpanded: boolean;
+        collapsed: boolean;
+        compact: 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 group ID to which the menu item belongs. Used for grouping menu items
+     * The category to which the menu item belongs. Need for grouping in the display/editing mode of all pages
      */
-    groupId?: string;
+    category?: 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;
@@ -63,8 +52,7 @@ export interface LogoProps {
     textSize?: number;
     href?: string;
     target?: HTMLAttributeAnchorTarget;
-    /** Wrapper function for the logo. The `isExpanded` parameter indicates if the navigation is expanded. */
-    wrapper?: (node: React.ReactNode, isExpanded: boolean) => React.ReactNode;
+    wrapper?: (node: React.ReactNode, compact: boolean) => React.ReactNode;
     onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     'aria-label'?: string;
     'aria-labelledby'?: string;

package/build/esm/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.js

@@ -1,5 +1,5 @@
 import { useState, useLayoutEffect, useMemo } from 'react';
-import debounceFn from '../../_virtual/debounce.js';
+import debounceFn from 'lodash/debounce';
 
 function useOverflowingHorizontalListItems({ containerRef, items, itemSelector, moreButtonWidth = 0, }) {
     const [containerWidth, setContainerWidth] = useState(0);

package/build/esm/index.js

@@ -1,10 +1,9 @@
 export { AsideHeader } from './components/AsideHeader/AsideHeader.js';
-export { AsideHeaderContextProvider, useAsideHeaderContext, useAsideHeaderContextOptional } from './components/AsideHeader/AsideHeaderContext.js';
+export { AsideHeaderContextProvider, useAsideHeaderContext } 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', 'v5'];
+const AVAILABLE_TRANSFORMS = ['v4'];
 
 // Get available transforms
 const availableTransforms = fs
@@ -114,30 +114,18 @@ program
         });
     });
 
-// Command to run v4 transforms
+// Default command to run v4 transforms
 program
     .command('v4 <path>')
-    .description('Run v4 migration transforms')
+    .description('Run all transforms in sequence')
     .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 v4 migration transforms...');
+        console.log('Running all transforms in sequence...');
         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')
@@ -150,9 +138,8 @@ program
 program.on('--help', () => {
     console.log('');
     console.log('Examples:');
-    console.log('  $ navigation-codemod v4 ./src');
-    console.log('  $ navigation-codemod v5 ./src');
-    console.log('  $ navigation-codemod v5 ./src --dry');
+    console.log('  $ navigation-codemod transform v4 ./src');
+    console.log('  $ navigation-codemod transform v4 ./src --dry');
     console.log('  $ navigation-codemod list');
     console.log('');
     console.log('Available transforms:');

package/codemods/transforms/unifyInterfaces.ts

@@ -129,7 +129,6 @@ function updateImports(root: Collection, j: JSCodeshift): boolean {
             });
 
             if (hasBeenModified) {
-                // eslint-disable-next-line no-param-reassign
                 path.node.specifiers = newSpecifiers;
                 hasChanges = true;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/navigation",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Gravity UI Navigation components",
   "license": "MIT",
   "repository": {
@@ -52,8 +52,9 @@
   "dependencies": {
     "commander": "^11.0.0",
     "jscodeshift": "^0.15.0",
-    "react-transition-group": "^4.4.5",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "lodash": "^4.17.21",
+    "react-virtualized-auto-sizer": "^1.0.20"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -89,11 +90,12 @@
     "@storybook/test-runner": "^0.17.0",
     "@storybook/theming": "^8.5.0",
     "@svgr/rollup": "^8.1.0",
+    "@testing-library/react": "^16.3.2",
     "@types/jest": "^28.1.0",
     "@types/jscodeshift": "^0.12.0",
     "@types/lodash": "^4.17.14",
     "@types/react": "^18.3.18",
-    "@types/react-transition-group": "^4.4.12",
+    "@types/react-virtualized-auto-sizer": "^1.0.4",
     "@vitejs/plugin-react": "^4.3.4",
     "axe-playwright": "^2.0.3",
     "babel-jest": "^28.0.0",
@@ -104,6 +106,7 @@
     "eslint-plugin-testing-library": "^6.5.0",
     "husky": "^9.1.7",
     "jest": "^28.0.0",
+    "jest-environment-jsdom": "^30.3.0",
     "knip": "^5.66.4",
     "nano-staged": "^0.6.0",
     "npm-run-all": "^4.0.0",

package/build/cjs/_virtual/_commonjsHelpers.js

@@ -1,11 +0,0 @@
-'use strict';
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-exports.commonjsGlobal = commonjsGlobal;
-exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
-//# sourceMappingURL=_commonjsHelpers.js.map

package/build/cjs/_virtual/_commonjsHelpers.js.map

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

package/build/cjs/_virtual/debounce.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _commonjsHelpers = require('./_commonjsHelpers.js');
-var debounce = require('../node_modules/lodash/debounce.js');
-
-var debounceExports = debounce.__require();
-var debounceFn = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(debounceExports);
-
-exports.default = debounceFn;
-//# sourceMappingURL=debounce.js.map

package/build/cjs/_virtual/debounce.js.map

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

package/build/cjs/_virtual/identity.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _commonjsHelpers = require('./_commonjsHelpers.js');
-var identity$1 = require('../node_modules/lodash/identity.js');
-
-var identityExports = identity$1.__require();
-var identity = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(identityExports);
-
-exports.default = identity;
-//# sourceMappingURL=identity.js.map

package/build/cjs/_virtual/identity.js.map

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

package/build/cjs/_virtual/last.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _commonjsHelpers = require('./_commonjsHelpers.js');
-var last$1 = require('../node_modules/lodash/last.js');
-
-var lastExports = last$1.__require();
-var last = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lastExports);
-
-exports.default = last;
-//# sourceMappingURL=last.js.map

package/build/cjs/_virtual/last.js.map

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

package/build/cjs/assets/icons/divider-collapsed-compact.svg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"divider-collapsed-compact.svg.js","sources":["../../../../assets/icons/divider-collapsed-compact.svg"],"sourcesContent":["<svg width=\"40\" height=\"22\" viewBox=\"0 0 40 22\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M40 0v22c-.6-.8-5-4.6-12.6-6.4L9.3 11.9A11.4 11.4 0 0 1 0 0Z\"/></svg>\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAI,KAAK;AACT,SAAS,QAAQ,GAAG,EAAE,OAAO,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAE/Q,IAAC,0BAA0B,GAAG,SAAS,0BAA0B,CAAC,KAAK,EAAE;AAC5E,EAAE,oBAAoBA,gBAAK,CAAC,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;AAC1D,IAAI,KAAK,EAAE,4BAA4B;AACvC,IAAI,KAAK,EAAE,EAAE;AACb,IAAI,MAAM,EAAE,EAAE;AACd,IAAI,IAAI,EAAE,cAAc;AACxB,IAAI,OAAO,EAAE;AACb,GAAG,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,KAAK,gBAAgBA,gBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACxE,IAAI,CAAC,EAAE;AACP,GAAG,CAAC,CAAC,CAAC;AACN;;;;"}

package/build/cjs/components/AsideHeader/FooterLayoutContext.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export interface FooterLayoutContextValue {
-    layout: 'horizontal' | 'vertical';
-    isExpanded: boolean;
-}
-export declare const FooterLayoutContext: React.Context<FooterLayoutContextValue | undefined>;
-export declare const useFooterLayout: () => FooterLayoutContextValue | undefined;

package/build/cjs/components/AsideHeader/FooterLayoutContext.js

@@ -1,10 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const FooterLayoutContext = React.createContext(undefined);
-const useFooterLayout = () => React.useContext(FooterLayoutContext);
-
-exports.FooterLayoutContext = FooterLayoutContext;
-exports.useFooterLayout = useFooterLayout;
-//# sourceMappingURL=FooterLayoutContext.js.map

package/build/cjs/components/AsideHeader/FooterLayoutContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FooterLayoutContext.js","sources":["../../../../../src/components/AsideHeader/FooterLayoutContext.ts"],"sourcesContent":["import React from 'react';\n\nexport interface FooterLayoutContextValue {\n    layout: 'horizontal' | 'vertical';\n    isExpanded: boolean;\n}\n\nexport const FooterLayoutContext = React.createContext<FooterLayoutContextValue | undefined>(\n    undefined,\n);\n\nexport const useFooterLayout = (): FooterLayoutContextValue | undefined =>\n    React.useContext(FooterLayoutContext);\n"],"names":[],"mappings":";;;;AAOa,MAAA,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAClD,SAAS;AAGN,MAAM,eAAe,GAAG,MAC3B,KAAK,CAAC,UAAU,CAAC,mBAAmB;;;;;"}

package/build/cjs/components/AsideHeader/components/AllPagesPanel/utils/buildExpandedFromFlatList.d.ts

@@ -1,3 +0,0 @@
-import { MenuItem } from '../../../../types';
-import { MenuItemsWithGroups } from '../../../types';
-export declare function buildExpandedFromFlatList(flatList: MenuItemsWithGroups[]): MenuItem[];

package/build/cjs/components/AsideHeader/components/AllPagesPanel/utils/buildExpandedFromFlatList.js

@@ -1,17 +0,0 @@
-'use strict';
-
-function buildExpandedFromFlatList(flatList) {
-    const expanded = [];
-    flatList.forEach((item) => {
-        if ('items' in item && item.items && item.items.length > 0) {
-            expanded.push(...item.items);
-        }
-        else {
-            expanded.push(item);
-        }
-    });
-    return expanded;
-}
-
-exports.buildExpandedFromFlatList = buildExpandedFromFlatList;
-//# sourceMappingURL=buildExpandedFromFlatList.js.map

package/build/cjs/components/AsideHeader/components/AllPagesPanel/utils/buildExpandedFromFlatList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buildExpandedFromFlatList.js","sources":["../../../../../../../../src/components/AsideHeader/components/AllPagesPanel/utils/buildExpandedFromFlatList.ts"],"sourcesContent":["import {MenuItem} from '../../../../types';\nimport {MenuItemsWithGroups} from '../../../types';\n\nexport function buildExpandedFromFlatList(flatList: MenuItemsWithGroups[]): MenuItem[] {\n    const expanded: MenuItem[] = [];\n\n    flatList.forEach((item) => {\n        if ('items' in item && item.items && item.items.length > 0) {\n            expanded.push(...item.items);\n        } else {\n            expanded.push(item);\n        }\n    });\n\n    return expanded;\n}\n"],"names":[],"mappings":";;AAGM,SAAU,yBAAyB,CAAC,QAA+B,EAAA;IACrE,MAAM,QAAQ,GAAe,EAAE;AAE/B,IAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACtB,QAAA,IAAI,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACxD,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;;aACzB;AACH,YAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;AAE3B,KAAC,CAAC;AAEF,IAAA,OAAO,QAAQ;AACnB;;;;"}

package/build/cjs/components/AsideHeader/components/AllPagesPanel/utils/getExpandedIndexForSortableIndex.d.ts

@@ -1,9 +0,0 @@
-import { MenuItemsWithGroups } from '../../../types';
-/**
- * Returns index in expanded list for the sortableIndex-th sortable item in flatList.
- *
- * @param sortableIndex - Index in the list of sortable (non-divider) items.
- * @param flatList - Flat list with groups and dividers.
- * @returns Index in the expanded (flattened) menu list.
- */
-export declare function getExpandedIndexForSortableIndex(sortableIndex: number, flatList: MenuItemsWithGroups[]): number;

package/build/cjs/components/AsideHeader/components/AllPagesPanel/utils/getExpandedIndexForSortableIndex.js

@@ -1,27 +0,0 @@
-'use strict';
-
-var getIsMenuItem = require('./getIsMenuItem.js');
-var getRealIndexInGroup = require('./getRealIndexInGroup.js');
-
-/**
- * Returns index in expanded list for the sortableIndex-th sortable item in flatList.
- *
- * @param sortableIndex - Index in the list of sortable (non-divider) items.
- * @param flatList - Flat list with groups and dividers.
- * @returns Index in the expanded (flattened) menu list.
- */
-function getExpandedIndexForSortableIndex(sortableIndex, flatList) {
-    let sortableCount = 0;
-    for (let i = 0; i < flatList.length; i++) {
-        if (getIsMenuItem.getIsMenuItem(flatList[i])) {
-            if (sortableCount === sortableIndex) {
-                return getRealIndexInGroup.getRealIndexInExpandedMenu(i, flatList);
-            }
-            sortableCount++;
-        }
-    }
-    return 0;
-}
-
-exports.getExpandedIndexForSortableIndex = getExpandedIndexForSortableIndex;
-//# sourceMappingURL=getExpandedIndexForSortableIndex.js.map

package/build/cjs/components/AsideHeader/components/AllPagesPanel/utils/getExpandedIndexForSortableIndex.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getExpandedIndexForSortableIndex.js","sources":["../../../../../../../../src/components/AsideHeader/components/AllPagesPanel/utils/getExpandedIndexForSortableIndex.ts"],"sourcesContent":["import {MenuItemsWithGroups} from '../../../types';\n\nimport {getIsMenuItem} from './getIsMenuItem';\nimport {getRealIndexInExpandedMenu} from './getRealIndexInGroup';\n\n/**\n * Returns index in expanded list for the sortableIndex-th sortable item in flatList.\n *\n * @param sortableIndex - Index in the list of sortable (non-divider) items.\n * @param flatList - Flat list with groups and dividers.\n * @returns Index in the expanded (flattened) menu list.\n */\nexport function getExpandedIndexForSortableIndex(\n    sortableIndex: number,\n    flatList: MenuItemsWithGroups[],\n): number {\n    let sortableCount = 0;\n    for (let i = 0; i < flatList.length; i++) {\n        if (getIsMenuItem(flatList[i])) {\n            if (sortableCount === sortableIndex) {\n                return getRealIndexInExpandedMenu(i, flatList);\n            }\n            sortableCount++;\n        }\n    }\n    return 0;\n}\n"],"names":["getIsMenuItem","getRealIndexInExpandedMenu"],"mappings":";;;;;AAKA;;;;;;AAMG;AACa,SAAA,gCAAgC,CAC5C,aAAqB,EACrB,QAA+B,EAAA;IAE/B,IAAI,aAAa,GAAG,CAAC;AACrB,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACtC,IAAIA,2BAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;AAC5B,YAAA,IAAI,aAAa,KAAK,aAAa,EAAE;AACjC,gBAAA,OAAOC,8CAA0B,CAAC,CAAC,EAAE,QAAQ,CAAC;;AAElD,YAAA,aAAa,EAAE;;;AAGvB,IAAA,OAAO,CAAC;AACZ;;;;"}

package/build/cjs/components/AsideHeader/components/AllPagesPanel/utils/getIsMenuItem.d.ts

@@ -1,2 +0,0 @@
-import { MenuItemsWithGroups } from 'src/components/AsideHeader/types';
-export declare function getIsMenuItem(item: MenuItemsWithGroups): boolean;

package/build/cjs/components/AsideHeader/components/AllPagesPanel/utils/getIsMenuItem.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var constants = require('../constants.js');
-
-function getIsMenuItem(item) {
-    const isDivider = item.type === 'divider';
-    const isAction = item.type === 'action';
-    const isAllPages = item.id === constants.ALL_PAGES_ID;
-    return !isDivider && !isAction && !isAllPages;
-}
-
-exports.getIsMenuItem = getIsMenuItem;
-//# sourceMappingURL=getIsMenuItem.js.map

package/build/cjs/components/AsideHeader/components/AllPagesPanel/utils/getIsMenuItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getIsMenuItem.js","sources":["../../../../../../../../src/components/AsideHeader/components/AllPagesPanel/utils/getIsMenuItem.ts"],"sourcesContent":["import {MenuItemsWithGroups} from 'src/components/AsideHeader/types';\n\nimport {ALL_PAGES_ID} from '../constants';\n\nexport function getIsMenuItem(item: MenuItemsWithGroups): boolean {\n    const isDivider = item.type === 'divider';\n    const isAction = item.type === 'action';\n    const isAllPages = item.id === ALL_PAGES_ID;\n\n    return !isDivider && !isAction && !isAllPages;\n}\n"],"names":["ALL_PAGES_ID"],"mappings":";;;;AAIM,SAAU,aAAa,CAAC,IAAyB,EAAA;AACnD,IAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;AACvC,IAAA,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,KAAKA,sBAAY;IAE3C,OAAO,CAAC,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU;AACjD;;;;"}