@gravity-ui/navigation 3.11.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/navigation",
-  "version": "3.11.0",
+  "version": "4.0.0",
   "description": "Gravity UI Navigation components",
   "license": "MIT",
   "repository": {
@@ -12,15 +12,24 @@
   "types": "build/esm/index.d.ts",
   "sideEffects": [
     "*.css",
-    "*.scss"
+    "*.scss",
+    "**/*.css",
+    "**/*.scss"
   ],
   "files": [
-    "build"
+    "build",
+    "codemods/bin",
+    "codemods/transforms",
+    "!codemods/transforms/__tests__",
+    "!codemods/transforms/__testfixtures__"
   ],
+  "bin": {
+    "navigation-codemod": "./codemods/bin/cli.js"
+  },
   "scripts": {
     "prepare": "husky",
     "typecheck": "tsc --noEmit",
-    "test": "jest --passWithNoTests",
+    "test": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js --passWithNoTests",
     "test-storybook": "test-storybook --url ${PR_PREVIEW_URL:-http://localhost:7008}",
     "build": "rimraf build && rollup -c",
     "lint:js": "eslint src --ext .js,.jsx,.ts,.tsx",
@@ -29,7 +38,7 @@
     "lint": "run-p lint:*",
     "packages:check": "knip",
     "build-storybook": "storybook build",
-    "start": "TS_NODE_PROJECT=.storybook/tsconfig.json storybook dev -p 7008",
+    "start": "cross-env TS_NODE_PROJECT=.storybook/tsconfig.json storybook dev -p 7008",
     "prepublishOnly": "npm run build",
     "playwright:install": "playwright install --with-deps",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
@@ -37,11 +46,12 @@
     "playwright:clear-cache": "rm -rf ./playwright/.cache",
     "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
     "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
-    "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache"
+    "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache",
+    "codemod:test:transforms": "jest --config jest.codemods.config.js"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.4",
-    "react-transition-group": "^4.4.5",
+    "commander": "^11.0.0",
+    "jscodeshift": "^0.15.0",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
@@ -49,6 +59,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
+    "babel-jest": "^28.0.0",
     "@bem-react/classname": "^1.6.0",
     "@chromatic-com/storybook": "^3.2.4",
     "@commitlint/cli": "^19.6.1",
@@ -59,7 +70,8 @@
     "@gravity-ui/prettier-config": "^1.0.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^7.5.1",
+    "@gravity-ui/uikit": "^7.28.0",
+    "@jest/globals": "^30.0.5",
     "@playwright/experimental-ct-react": "^1.49.1",
     "@playwright/test": "^1.49.1",
     "@rollup/plugin-commonjs": "^28.0.2",
@@ -71,19 +83,21 @@
     "@storybook/addon-links": "^8.5.0",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
     "@storybook/manager-api": "^8.5.0",
-    "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^8.5.0",
     "@storybook/react-webpack5": "^8.5.0",
     "@storybook/test": "^8.5.0",
     "@storybook/test-runner": "^0.17.0",
     "@storybook/theming": "^8.5.0",
     "@svgr/rollup": "^8.1.0",
+    "@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",
+    "cross-env": "^10.0.0",
+    "css-loader": "^7.1.2",
     "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-testing-library": "^6.5.0",
@@ -100,10 +114,11 @@
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.83.4",
-    "sass-loader": "^10.5.2",
+    "sass": "^1.93.2",
+    "sass-loader": "^16.0.4",
     "storybook": "^8.5.0",
     "storybook-preset-inline-svg": "^1.0.1",
+    "style-loader": "^4.0.0",
     "stylelint": "^15.11.0",
     "svg-inline-loader": "^0.8.2",
     "ts-jest": "^28.0.0",

package/build/cjs/components/AllPagesPanel/constants.d.ts

@@ -1,3 +0,0 @@
-import { MenuItem } from '../types';
-export declare const ALL_PAGES_ID: "all-pages";
-export declare function getAllPagesMenuItem(): MenuItem;

package/build/cjs/components/AllPagesPanel/i18n/index.d.ts

@@ -1,6 +0,0 @@
-declare const _default: ((key: "menu-item.all-pages.title" | "all-panel.menu.category.allOther" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", params?: import("@gravity-ui/i18n").Params) => string) & {
-    keysetData: {
-        "gn-AllPagesPanel": Record<"menu-item.all-pages.title" | "all-panel.menu.category.allOther" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", import("@gravity-ui/i18n").KeyData>;
-    };
-};
-export default _default;

package/build/cjs/components/AllPagesPanel/useGroupedMenuItems.d.ts

@@ -1,4 +0,0 @@
-import { MenuItem } from '../types';
-export declare const useGroupedMenuItems: (items: MenuItem[]) => {
-    [key: string]: MenuItem[];
-};

package/build/cjs/components/AllPagesPanel/useVisibleMenuItems.d.ts

@@ -1,2 +0,0 @@
-import { MenuItem } from '../types';
-export declare const useVisibleMenuItems: () => MenuItem[];

package/build/cjs/components/CompositeBar/CompositeBar.d.ts

@@ -1,20 +0,0 @@
-import React, { FC } from 'react';
-import { MenuItem, SubheaderMenuItem } from '../types';
-import './CompositeBar.scss';
-export type CompositeBarItem = MenuItem | SubheaderMenuItem;
-type CompositeBarItems = {
-    type: 'menu';
-    items: MenuItem[];
-} | {
-    type: 'subheader';
-    items: SubheaderMenuItem[];
-};
-type CompositeBarProps = CompositeBarItems & {
-    onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    multipleTooltip?: boolean;
-    menuMoreTitle?: string;
-    onMoreClick?: () => void;
-    compositeId?: string;
-};
-export declare const CompositeBar: FC<CompositeBarProps>;
-export {};

package/build/cjs/components/CompositeBar/Item/Item.d.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-import { PopupProps } from '@gravity-ui/uikit';
-import { MenuItem } from '../../types';
-import './Item.scss';
-interface ItemPopup {
-    popupVisible?: PopupProps['open'];
-    /**
-     * floating element anchor ref object
-     *
-     * @deprecated Use `popupAnchorElement` instead
-     * */
-    popupAnchor?: PopupProps['anchorRef'];
-    popupAnchorElement?: PopupProps['anchorElement'];
-    popupPlacement?: PopupProps['placement'];
-    popupOffset?: PopupProps['offset'];
-    popupKeepMounted?: PopupProps['keepMounted'];
-    renderPopupContent?: () => React.ReactNode;
-    /**
-     * This callback will be called when Escape key pressed on keyboard, or click outside was made
-     * This behaviour could be disabled with `disableEscapeKeyDown`
-     * and `disableOutsideClick` options
-     *
-     * @deprecated Use `onOpenChangePopup` instead
-     */
-    onClosePopup?: () => void;
-    onOpenChangePopup?: PopupProps['onOpenChange'];
-}
-export interface ItemProps extends ItemPopup {
-    item: MenuItem;
-    enableTooltip?: boolean;
-    onItemClick?: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    onItemClickCapture?: (event: React.SyntheticEvent) => void;
-    onCollapseItemClick?: () => void;
-    bringForward?: boolean;
-}
-interface ItemInnerProps extends ItemProps {
-    className?: string;
-    collapseItems?: MenuItem[];
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-}
-export declare const Item: React.FC<ItemInnerProps>;
-export {};

package/build/cjs/components/CompositeBar/MultipleTooltip/MultipleTooltip.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { PopupProps } from '@gravity-ui/uikit';
-import { MenuItem } from '../../types';
-import './MultipleTooltip.scss';
-type MultipleTooltipProps = Pick<PopupProps, 'open' | 'anchorRef' | 'placement'> & {
-    items: MenuItem[];
-};
-export declare const MultipleTooltip: React.FC<MultipleTooltipProps>;
-export {};

package/build/cjs/components/CompositeBar/utils.d.ts

@@ -1,12 +0,0 @@
-import { CompositeBarItem } from '../CompositeBar/CompositeBar';
-import { MenuItem } from './../types';
-export declare function getItemHeight(item: CompositeBarItem): 40 | 50 | 15;
-export declare function getItemsHeight<T extends CompositeBarItem>(items: T[]): number;
-export declare function getSelectedItemIndex(items: MenuItem[]): number | undefined;
-export declare function getItemsMinHeight(items: MenuItem[]): number;
-export declare function getMoreButtonItem(menuMoreTitle?: string): MenuItem;
-export declare function getAutosizeListItems(items: MenuItem[], height: number, collapseItem: MenuItem): {
-    listItems: MenuItem[];
-    collapseItems: MenuItem[];
-};
-export declare function isMenuItem(item: CompositeBarItem): item is MenuItem;

package/build/cjs/components/Drawer/Drawer.d.ts

@@ -1,87 +0,0 @@
-import React from 'react';
-import { type DrawerDirection, type OnResizeContinueHandler, type OnResizeHandler } from './utils';
-import './Drawer.scss';
-export interface DrawerItemProps {
-    /** Unique identifier for the drawer item. */
-    id: string;
-    /**
-     * Content to be displayed within the drawer item.
-     * @deprecated Use `children` instead.
-     */
-    content?: React.ReactNode;
-    /** Content to be displayed within the drawer item, preferable over the deprecated `content`. */
-    children?: React.ReactNode;
-    /** Determines whether the drawer item is visible or hidden. */
-    visible: boolean;
-    /** Specifies the direction from which the drawer should slide in, `left` by default.
-     * @default left
-     */
-    direction?: DrawerDirection;
-    /** Additional custom class name applied to the drawer item. */
-    className?: string;
-    /** Determines whether the drawer item can be resized */
-    resizable?: boolean;
-    /**
-     * The width of the resizable drawer item.
-     * If not provided, the width will be stored internally.
-     */
-    width?: number;
-    /** Called at the start of resizing. */
-    onResizeStart?: VoidFunction;
-    /**
-     * Called at the end of resizing. Can be used to save the new width.
-     * @param width The new width of the drawer item
-     * @param event The original event
-     */
-    onResize?: OnResizeHandler;
-    /**
-     * Callback function called each time when the drawer item is resizing.
-     * Do not use it to store the new width for DrawerItem `width` prop. Use `onResize` instead.
-     * @param width The new width of the drawer item
-     */
-    onResizeContinue?: OnResizeContinueHandler;
-    /** The minimum width of the resizable drawer item */
-    minResizeWidth?: number;
-    /** The maximum width of the resizable drawer item */
-    maxResizeWidth?: number;
-    /**
-     * Keep child components mounted when closed, prioritized over Drawer.keepMounted property
-     * @default false
-     * */
-    keepMounted?: boolean;
-    /** Optional inline styles to be applied to the DrawerItem component. */
-    style?: React.CSSProperties;
-}
-export declare const DrawerItem: React.ForwardRefExoticComponent<DrawerItemProps & React.RefAttributes<HTMLDivElement>>;
-type DrawerChild = React.ReactElement<DrawerItemProps>;
-export interface DrawerProps {
-    /** Child components to be rendered within the drawer. This can be a single child or an array of children. */
-    children: DrawerChild | DrawerChild[];
-    /** Optional additional class names to style the drawer component. */
-    className?: string;
-    /** Optional inline styles to be applied to the drawer component. */
-    style?: React.CSSProperties;
-    /** Optional additional class names to style the background veil element. */
-    veilClassName?: string;
-    /** Optional callback function that is called when the veil (overlay) is clicked. */
-    onVeilClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    /** Optional callback function that is called when the escape key is pressed if the drawer is open. */
-    onEscape?: (event: KeyboardEvent) => void;
-    /** Optional flag to hide the background darkening */
-    hideVeil?: boolean;
-    /** Optional flag to doesn't use `Portal` for drawer */
-    disablePortal?: boolean;
-    /**
-     * Keep child components mounted when closed
-     * @default false
-     * */
-    keepMounted?: boolean;
-    /**
-     * Whether to lock page scroll when drawer is open.
-     * Applied only when hideVeil=true and disablePortal=false.
-     * @default false
-     */
-    scrollLock?: boolean;
-}
-export declare const Drawer: React.FC<DrawerProps>;
-export {};

package/build/cjs/components/Drawer/__stories__/DisablePortal.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import './DisablePortal.scss';
-export declare function DisablePortalShowcase(): React.JSX.Element;

package/build/cjs/components/Drawer/__stories__/Drawer.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Meta } from '@storybook/react';
-declare const _default: Meta;
-export default _default;
-export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
-export declare const ResizableItem: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
-export declare const DisablePortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
-export declare const HideVeil: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
-export declare const ScrollLock: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
-export declare const UsePortal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;

package/build/cjs/components/Drawer/__stories__/DrawerShowcase.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import './DrawerShowcase.scss';
-export declare function DrawerShowcase(): React.JSX.Element;

package/build/cjs/components/Drawer/__stories__/HideVeil.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import './HideVeil.scss';
-export declare function HideVeilShowcase(): React.JSX.Element;

package/build/cjs/components/Drawer/__stories__/ResizableItem.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import './ResizableItem.scss';
-export declare function ResizableItemShowcase(): React.JSX.Element;

package/build/cjs/components/Drawer/__stories__/ScrollLock.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import './ScrollLock.scss';
-export declare function ScrollLockShowcase(): React.JSX.Element;

package/build/cjs/components/Drawer/__stories__/UsePortal.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import './UsePortal.scss';
-export declare function UsePortalShowcase(): React.JSX.Element;

package/build/cjs/components/Drawer/__stories__/moc.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function PlaceholderText(): React.JSX.Element;

package/build/cjs/components/Drawer/__tests__/helpersPlaywright.d.ts

@@ -1,2 +0,0 @@
-import * as DefaultDrawerStories from '../__stories__/Drawer.stories';
-export declare const DrawerStories: Omit<import("@storybook/core/types").StoriesWithPartialProps<import("@storybook/react").ReactRenderer, typeof DefaultDrawerStories>, keyof import("@storybook/core/types").Store_CSFExports>;

package/build/cjs/components/Drawer/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Drawer';
-export type { DrawerDirection } from './utils';

package/build/cjs/components/Drawer/utils.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-export type DrawerDirection = 'right' | 'left' | 'top' | 'bottom';
-export type OnResizeHandler = (width: number, event: MouseEvent | TouchEvent) => void;
-export type OnResizeContinueHandler = (width: number) => void;
-export declare function useScrollLock(enabled: boolean): void;
-interface UseResizableDrawerItemParams {
-    direction?: DrawerDirection;
-    width?: number;
-    minResizeWidth?: number;
-    maxResizeWidth?: number;
-    onResizeStart?: VoidFunction;
-    onResize?: OnResizeHandler;
-    onResizeContinue?: OnResizeContinueHandler;
-}
-export declare function useResizableDrawerItem(params: UseResizableDrawerItemParams): {
-    resizedWidth: number;
-    resizerHandlers: {
-        onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
-        onTouchStart: (e: React.MouseEvent | React.TouchEvent) => void;
-    };
-    isResizing: boolean;
-};
-export {};

package/build/cjs/components/FooterItem/FooterItem.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { ItemProps } from '../CompositeBar/Item/Item';
-import './FooterItem.scss';
-export interface FooterItemProps extends Omit<ItemProps, 'onItemClick' | 'onItemClickCapture'> {
-    compact: boolean;
-}
-export declare const FooterItem: React.FC<FooterItemProps>;

package/build/cjs/index-B6LRu9Xk.js

@@ -1,76 +0,0 @@
-'use strict';
-
-var React = require('react');
-var uikit = require('@gravity-ui/uikit');
-var index = require('./index-BTP6Ci-f.js');
-require('@bem-react/classname');
-require('@gravity-ui/icons');
-require('@gravity-ui/uikit/i18n');
-require('react/jsx-runtime');
-require('react-dom');
-require('@gravity-ui/uikit/legacy');
-
-const G_ROOT_CLASS_NAME = 'g-root';
-const useTopAlertHeight = ({ alert }) => {
-    const alertRef = React.useRef(null);
-    const setAsideTopPanelHeight = React.useCallback((clientHeight) => {
-        const gRootElement = document
-            .getElementsByClassName(G_ROOT_CLASS_NAME)
-            .item(0);
-        gRootElement === null || gRootElement === undefined ? undefined : gRootElement.style.setProperty('--gn-top-alert-height', clientHeight + 'px');
-    }, []);
-    const updateTopSize = React.useCallback(() => {
-        var _a;
-        setAsideTopPanelHeight(((_a = alertRef.current) === null || _a === undefined ? undefined : _a.clientHeight) || 0);
-    }, [setAsideTopPanelHeight]);
-    React.useLayoutEffect(() => {
-        const updateTopSizeDebounce = index.debounceFn(updateTopSize, 200, { leading: true });
-        if (alert) {
-            window.addEventListener('resize', updateTopSizeDebounce);
-            updateTopSizeDebounce();
-        }
-        return () => {
-            window.removeEventListener('resize', updateTopSizeDebounce);
-            setAsideTopPanelHeight(0);
-        };
-    }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);
-    return {
-        alertRef,
-        updateTopSize,
-    };
-};
-
-var css_248z = ".g-root{--gn-top-alert-height:0px}.gn-top-alert_centered{display:flex;justify-content:space-around}.gn-top-alert_dense{padding-bottom:var(--g-spacing-2);padding-top:var(--g-spacing-2)}.gn-top-alert__wrapper_with-bottom-border:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));content:\"\";display:block;height:1px;margin-top:-1px}";
-index.styleInject(css_248z);
-
-const b = index.block('top-alert');
-const TopAlert = ({ alert, className, mobileView = false }) => {
-    const { alertRef, updateTopSize } = useTopAlertHeight({ alert });
-    const [opened, setOpened] = React.useState(true);
-    const handleClose = React.useCallback(() => {
-        var _a;
-        setOpened(false);
-        if (alert && 'onCloseTopAlert' in alert) {
-            (_a = alert.onCloseTopAlert) === null || _a === undefined ? undefined : _a.call(alert);
-        }
-    }, [alert]);
-    React.useEffect(() => {
-        if (!opened) {
-            updateTopSize();
-        }
-    }, [opened, updateTopSize]);
-    if (!alert) {
-        return null;
-    }
-    const { render } = alert;
-    if (typeof render === 'function') {
-        return (React.createElement("div", { ref: alertRef, className: b('wrapper', { 'with-bottom-border': !mobileView && opened }, className) }, opened && render({ handleClose })));
-    }
-    return (React.createElement("div", { ref: alertRef, className: b('wrapper', { 'with-bottom-border': !mobileView && opened }, className) }, opened && (React.createElement(uikit.Alert, { className: b('', {
-            centered: alert.centered,
-            dense: alert.dense,
-        }), corners: "square", layout: "horizontal", align: alert.align, theme: alert.theme || 'warning', view: alert.view, icon: alert.icon, title: alert.title, message: mobileView ? (React.createElement(uikit.Text, { ellipsisLines: 5, variant: "body-2" }, alert.message)) : (alert.message), actions: alert.actions, onClose: alert.closable ? handleClose : undefined }))));
-};
-
-exports.TopAlert = TopAlert;
-//# sourceMappingURL=index-B6LRu9Xk.js.map

package/build/cjs/index-B6LRu9Xk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-B6LRu9Xk.js","sources":["../../../src/components/TopAlert/useTopAlertHeight.ts","../../../src/components/TopAlert/TopAlert.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n    alertRef: React.RefObject<HTMLDivElement>;\n    updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n    const alertRef = React.useRef<HTMLDivElement>(null);\n\n    const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n        const gRootElement = document\n            .getElementsByClassName(G_ROOT_CLASS_NAME)\n            .item(0) as HTMLElement | null;\n        gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n    }, []);\n\n    const updateTopSize = React.useCallback(() => {\n        setAsideTopPanelHeight(alertRef.current?.clientHeight || 0);\n    }, [setAsideTopPanelHeight]);\n\n    React.useLayoutEffect(() => {\n        const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n        if (alert) {\n            window.addEventListener('resize', updateTopSizeDebounce);\n            updateTopSizeDebounce();\n        }\n        return () => {\n            window.removeEventListener('resize', updateTopSizeDebounce);\n            setAsideTopPanelHeight(0);\n        };\n    }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n    return {\n        alertRef,\n        updateTopSize,\n    };\n};\n","import React from 'react';\n\nimport {Alert, Text} from '@gravity-ui/uikit';\n\nimport {TopAlertProps} from '../types';\nimport {block} from '../utils/cn';\n\nimport {useTopAlertHeight} from './useTopAlertHeight';\n\nimport './TopAlert.scss';\n\nconst b = block('top-alert');\n\ntype Props = {\n    alert?: TopAlertProps;\n    className?: string;\n    mobileView?: boolean;\n};\n\nexport const TopAlert = ({alert, className, mobileView = false}: Props) => {\n    const {alertRef, updateTopSize} = useTopAlertHeight({alert});\n\n    const [opened, setOpened] = React.useState(true);\n\n    const handleClose = React.useCallback(() => {\n        setOpened(false);\n\n        if (alert && 'onCloseTopAlert' in alert) {\n            alert.onCloseTopAlert?.();\n        }\n    }, [alert]);\n\n    React.useEffect(() => {\n        if (!opened) {\n            updateTopSize();\n        }\n    }, [opened, updateTopSize]);\n\n    if (!alert) {\n        return null;\n    }\n\n    const {render} = alert;\n\n    if (typeof render === 'function') {\n        return (\n            <div\n                ref={alertRef}\n                className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n            >\n                {opened && render({handleClose})}\n            </div>\n        );\n    }\n\n    return (\n        <div\n            ref={alertRef}\n            className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n        >\n            {opened && (\n                <Alert\n                    className={b('', {\n                        centered: alert.centered,\n                        dense: alert.dense,\n                    })}\n                    corners=\"square\"\n                    layout=\"horizontal\"\n                    align={alert.align}\n                    theme={alert.theme || 'warning'}\n                    view={alert.view}\n                    icon={alert.icon}\n                    title={alert.title}\n                    message={\n                        mobileView ? (\n                            <Text ellipsisLines={5} variant=\"body-2\">\n                                {alert.message}\n                            </Text>\n                        ) : (\n                            alert.message\n                        )\n                    }\n                    actions={alert.actions}\n                    onClose={alert.closable ? handleClose : undefined}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["debounceFn","block","Alert","Text"],"mappings":"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"}