@gravity-ui/navigation 2.33.0 → 3.0.0-beta-lunory.0

package/build/esm/index-DruPZQaT.js

@@ -0,0 +1,67 @@
+import React__default from 'react';
+import { Alert, Text } from '@gravity-ui/uikit';
+import { d as debounceFn, s as styleInject, b as block } from './index-C7O46WxY.js';
+import '@bem-react/classname';
+import '@gravity-ui/icons';
+import '@gravity-ui/uikit/i18n';
+import 'react-dom';
+import '@gravity-ui/uikit/legacy';
+
+const G_ROOT_CLASS_NAME = 'g-root';
+const useTopAlertHeight = ({ alert }) => {
+    const alertRef = React__default.useRef(null);
+    const setAsideTopPanelHeight = React__default.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__default.useCallback(() => {
+        var _a;
+        setAsideTopPanelHeight(((_a = alertRef.current) === null || _a === undefined ? undefined : _a.clientHeight) || 0);
+    }, [setAsideTopPanelHeight]);
+    React__default.useLayoutEffect(() => {
+        const updateTopSizeDebounce = 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}";
+styleInject(css_248z);
+
+const b = block('top-alert');
+const TopAlert = ({ alert, className, mobileView = false }) => {
+    const { alertRef, updateTopSize } = useTopAlertHeight({ alert });
+    const [opened, setOpened] = React__default.useState(true);
+    const handleClose = React__default.useCallback(() => {
+        var _a;
+        setOpened(false);
+        (_a = alert === null || alert === undefined ? undefined : alert.onCloseTopAlert) === null || _a === undefined ? undefined : _a.call(alert);
+    }, [alert]);
+    React__default.useEffect(() => {
+        if (!opened) {
+            updateTopSize();
+        }
+    }, [opened, updateTopSize]);
+    if (!alert || !alert.message) {
+        return null;
+    }
+    return (React__default.createElement("div", { ref: alertRef, className: b('wrapper', { 'with-bottom-border': !mobileView && opened }, className) }, opened && (React__default.createElement(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__default.createElement(Text, { ellipsisLines: 5, variant: "body-2" }, alert.message)) : (alert.message), actions: alert.actions, onClose: alert.closable ? handleClose : undefined }))));
+};
+
+export { TopAlert };
+//# sourceMappingURL=index-DruPZQaT.js.map

package/build/esm/index-DruPZQaT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DruPZQaT.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        alert?.onCloseTopAlert?.();\n    }, [alert]);\n\n    React.useEffect(() => {\n        if (!opened) {\n            updateTopSize();\n        }\n    }, [opened, updateTopSize]);\n\n    if (!alert || !alert.message) {\n        return null;\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":["React"],"mappings":"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"}

package/build/esm/index.js

@@ -1,170 +1,9 @@
-export { AsideHeader } from './AsideHeader.js';
-export { AsideHeaderContextProvider, useAsideHeaderContext } from './AsideHeaderContext.js';
-export { FooterItem } from './FooterItem.js';
-export { PageLayout } from './PageLayout.js';
-import { L as Logo } from './PageLayoutAside-edd59955.js';
-export { L as Logo, P as PageLayoutAside } from './PageLayoutAside-edd59955.js';
-export { AsideFallback } from './AsideFallback.js';
-export { Drawer, DrawerItem } from './Drawer.js';
-export { M as MOBILE_HEADER_EVENT_NAMES, a as MobileHeader, F as MobileHeaderFooterItem, b as MobileLogo, g as getMobileHeaderCustomEvent } from './FooterItem-af3c4fa3.js';
-import React__default, { useState, useLayoutEffect, useMemo, useRef, useCallback } from 'react';
-import { Menu, DropdownMenu, Button, Icon, Sheet } from '@gravity-ui/uikit';
-import { d as debounce_1 } from './debounce-64cd2b4c.js';
-import { b as block } from './cn-ffe5e9f5.js';
-import { _ as __rest } from './tslib.es6-3cd4e99f.js';
-import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import { Ellipsis } from '@gravity-ui/icons';
-export { P as ActionBar } from './ActionBar-834b178a.js';
-export { T as Title } from './Title-03b4255a.js';
-export { H as HotkeysPanel } from './HotkeysPanel-c7bf8466.js';
-export { S as Settings, a as useSettingsContext, u as useSettingsSelectionContext } from './Settings-e660a4c5.js';
-import './Item-55899ec8.js';
-import './constants-b1604ff5.js';
-import './Content-f94ba85d.js';
-import './utils-117463a5.js';
+export { g as ActionBar, e as AsideFallback, A as AsideHeader, a as AsideHeaderContextProvider, f as Drawer, D as DrawerItem, n as Footer, F as FooterItem, H as HotkeysPanel, L as Logo, M as MOBILE_HEADER_EVENT_NAMES, o as MobileFooter, l as MobileHeader, j as MobileHeaderFooterItem, m as MobileLogo, P as PageLayout, c as PageLayoutAside, S as Settings, T as Title, k as getMobileHeaderCustomEvent, u as useAsideHeaderContext, i as useSettingsContext, h as useSettingsSelectionContext } from './index-C7O46WxY.js';
+import 'react';
+import '@bem-react/classname';
+import '@gravity-ui/uikit';
+import '@gravity-ui/icons';
 import '@gravity-ui/uikit/i18n';
-import './divider-collapsed-a0ef54c3.js';
 import 'react-dom';
-import '@bem-react/classname';
-
-function useOverflowingHorizontalListItems({ containerRef, items, itemSelector, moreButtonWidth = 0, }) {
-    const [containerWidth, setContainerWidth] = useState(0);
-    const [itemWidths, setItemWidths] = useState([]);
-    useLayoutEffect(() => {
-        if (!containerRef.current) {
-            return;
-        }
-        const measureItemSizes = () => {
-            var _a, _b;
-            const itemElements = Array.from((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(itemSelector)) !== null && _b !== void 0 ? _b : []);
-            setItemWidths(itemElements.map((item) => item.clientWidth));
-        };
-        measureItemSizes();
-    }, [containerRef, itemSelector]);
-    useLayoutEffect(() => {
-        const footerMenu = containerRef.current;
-        if (!footerMenu) {
-            return;
-        }
-        const updateContainerSize = (entries) => {
-            if (entries.length > 0 && footerMenu) {
-                setContainerWidth(entries[0].contentRect.width);
-            }
-        };
-        const updateContainerSizeDebounced = debounce_1(updateContainerSize, 100);
-        const footerMenuResizeObserver = new ResizeObserver(updateContainerSizeDebounced);
-        footerMenuResizeObserver.observe(footerMenu);
-    }, [containerRef]);
-    const isMeasured = containerWidth > 0;
-    const { visibleItems, hiddenItems } = useMemo(() => {
-        var _a, _b;
-        if (!isMeasured) {
-            return {
-                visibleItems: items !== null && items !== void 0 ? items : [],
-                hiddenItems: [],
-            };
-        }
-        const itemsCount = itemWidths.length;
-        let visibleItemsCount = 0;
-        let remainingContainerWidth = containerWidth;
-        for (const width of itemWidths) {
-            remainingContainerWidth -= width;
-            if (remainingContainerWidth < moreButtonWidth) {
-                const isMoreThanOneItemLeft = itemsCount !== visibleItemsCount + 1;
-                const hasNoSpaceForTheLastItem = remainingContainerWidth < 0;
-                if (isMoreThanOneItemLeft || hasNoSpaceForTheLastItem) {
-                    break;
-                }
-            }
-            visibleItemsCount++;
-        }
-        return {
-            visibleItems: (_a = items === null || items === void 0 ? void 0 : items.slice(0, visibleItemsCount)) !== null && _a !== void 0 ? _a : [],
-            hiddenItems: (_b = items === null || items === void 0 ? void 0 : items.slice(visibleItemsCount)) !== null && _b !== void 0 ? _b : [],
-        };
-    }, [containerWidth, isMeasured, itemWidths, items, moreButtonWidth]);
-    return { visibleItems, hiddenItems, measured: isMeasured };
-}
-
-var css_248z$2 = ".gn-footer-menu-item{align-items:center;align-self:stretch;display:flex;height:100%;justify-content:center}.gn-footer-menu-item .g-menu__item-content{color:var(--g-color-text-secondary);font-size:var(--g-text-body-1-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-1-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gn-footer-menu-item[class]:hover{background-color:inherit}.gn-footer-menu-item[class]:hover[href] .g-menu__item-content{color:var(--g-color-text-link-hover)}";
-styleInject(css_248z$2);
-
-const b$2 = block('footer-menu-item');
-const MenuItem = (_a) => {
-    var { text, className } = _a, menuItemProps = __rest(_a, ["text", "className"]);
-    return (React__default.createElement(Menu.Item, Object.assign({ className: b$2(null, className) }, menuItemProps), text));
-};
-
-const moreItemsPopupProps = {
-    placement: 'top-start',
-};
-
-var css_248z$1 = ".gn-footer_desktop{align-items:center;background:var(--g-color-base-background);display:flex;gap:var(--g-spacing-6);height:40px;justify-content:flex-end;padding:0 var(--g-spacing-6) 0 var(--g-spacing-3)}.gn-footer_desktop .gn-footer__menu{align-items:center;align-self:stretch;display:flex;flex:1;min-width:0;visibility:hidden}.gn-footer_desktop .gn-footer__menu_measured{visibility:visible}.gn-footer_desktop .gn-footer__list[class]{background-color:inherit;display:flex;height:100%;padding:0}.gn-footer_desktop .gn-footer__more-button svg{color:var(--g-color-text-secondary)}.gn-footer_desktop .gn-footer__right{align-items:center;display:flex;gap:var(--g-spacing-5)}.gn-footer_desktop .gn-footer__copyright{color:var(--g-color-text-secondary);font-size:var(--g-text-body-1-font-size);font-weight:var(--g-text-body-font-weight);line-height:var(--g-text-body-1-line-height);white-space:nowrap}.gn-footer_desktop .gn-footer__copyright_small{font-size:var(--g-text-caption-2-font-size);font-weight:var(--g-text-caption-font-weight);line-height:var(--g-text-caption-2-line-height)}.gn-footer_with-divider{border-top:1px solid var(--g-color-line-generic)}.gn-footer_view_clear{background:transparent;z-index:-1}";
-styleInject(css_248z$1);
-
-const b$1 = block('footer');
-const Footer = ({ className, menuItems: providedMenuItems, withDivider, moreButtonTitle, onMoreButtonClick, view = 'normal', logo, logoWrapperClassName, copyright, }) => {
-    var _a;
-    const menuContainerRef = useRef(null);
-    const menuItems = view === 'clear' ? undefined : providedMenuItems;
-    const { visibleItems, hiddenItems, measured } = useOverflowingHorizontalListItems({
-        containerRef: menuContainerRef,
-        items: menuItems,
-        itemSelector: `.${b$1('menu-item')}`,
-        moreButtonWidth: 28,
-    });
-    const moreButtonProps = useMemo(() => ({
-        title: moreButtonTitle,
-    }), [moreButtonTitle]);
-    const dropdownMenuItems = useMemo(() => hiddenItems.map((item) => (Object.assign(Object.assign({}, item), { action: item.onClick }))), [hiddenItems]);
-    const shouldRenderLogo = view !== 'clear' && Boolean(logo);
-    const shouldRenderMenu = ((_a = menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) !== null && _a !== void 0 ? _a : 0) > 0;
-    return (React__default.createElement("footer", { className: b$1({ desktop: true, 'with-divider': withDivider, view }, className) },
-        shouldRenderMenu && (React__default.createElement("div", { className: b$1('menu', { measured }), ref: menuContainerRef },
-            visibleItems.length > 0 && (React__default.createElement(Menu, { className: b$1('list') }, visibleItems.map((item, index) => (React__default.createElement(MenuItem, Object.assign({ key: index }, item, { className: b$1('menu-item', item.className) })))))),
-            dropdownMenuItems.length > 0 && (React__default.createElement(DropdownMenu, { items: dropdownMenuItems, switcherWrapperClassName: b$1('more-button'), popupProps: moreItemsPopupProps, defaultSwitcherProps: moreButtonProps, onSwitcherClick: onMoreButtonClick })))),
-        React__default.createElement("div", { className: b$1('right') },
-            React__default.createElement("small", { className: b$1('copyright', { small: !(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) }) }, copyright),
-            shouldRenderLogo && (React__default.createElement("div", { className: logoWrapperClassName },
-                React__default.createElement(Logo, Object.assign({}, logo)))))));
-};
-
-var css_248z = ".gn-footer_mobile{background:var(--g-color-base-background);display:flex;flex-direction:column;padding:var(--g-spacing-1) var(--g-spacing-6) var(--g-spacing-3) var(--g-spacing-3)}.gn-footer_mobile .gn-footer_with-divider{border-top:1px solid var(--g-color-line-generic)}.gn-footer_mobile .gn-footer__menu{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--g-spacing-1);visibility:hidden}.gn-footer_mobile .gn-footer__menu_measured{visibility:visible}.gn-footer_mobile .gn-footer__list[class]{background-color:inherit;display:flex;padding:0}.gn-footer_mobile .gn-footer__menu-item{box-sizing:border-box;padding:var(--g-spacing-2) var(--g-spacing-3)}.gn-footer_mobile .gn-footer__bottom-row{align-items:center;display:flex;justify-content:space-between}.gn-footer_mobile .gn-footer__copyright{color:var(--g-color-text-secondary);font-size:var(--g-text-caption-2-font-size);font-weight:var(--g-text-caption-font-weight);line-height:var(--g-text-caption-2-line-height);padding:0 var(--g-spacing-3);white-space:nowrap}.gn-footer__modal .gn-footer__menu-item{color:var(--g-color-text-primary);font-size:var(--g-text-body-2-font-size);font-weight:var(--g-text-body-font-weight);height:48px;line-height:var(--g-text-body-2-line-height)}.gn-footer_view_clear{background:transparent;z-index:-1}.gn-footer_view_clear .gn-footer__bottom-row{justify-content:flex-end}";
-styleInject(css_248z);
-
-const b = block('footer');
-const modalId = 'footer-more-items';
-const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, moreButtonTitle, onMoreButtonClick, view = 'normal', logo, logoWrapperClassName, copyright, }) => {
-    const [moreItemsMenuVisible, setMoreItemsMenuVisible] = useState(false);
-    const menuContainerRef = useRef(null);
-    const handleOpenMoreItemsMenu = useCallback((event) => {
-        setMoreItemsMenuVisible(true);
-        onMoreButtonClick === null || onMoreButtonClick === void 0 ? void 0 : onMoreButtonClick(event);
-    }, [onMoreButtonClick]);
-    const handleCloseMoreItemsMenu = useCallback(() => {
-        setMoreItemsMenuVisible(false);
-    }, []);
-    const menuItems = view === 'clear' ? undefined : providedMenuItems;
-    const { visibleItems, hiddenItems, measured } = useOverflowingHorizontalListItems({
-        containerRef: menuContainerRef,
-        items: menuItems,
-        itemSelector: `.${b('menu-item')}`,
-        moreButtonWidth: 28,
-    });
-    const renderMenu = (items) => (React__default.createElement(Menu, { className: b('list') }, items.map((item, index) => (React__default.createElement(MenuItem, Object.assign({ key: index }, item, { className: b('menu-item', item.className) }))))));
-    const shouldRenderLogo = view !== 'clear' && Boolean(logo);
-    return (React__default.createElement("footer", { className: b({ mobile: true, 'with-divider': withDivider, view }, className) },
-        React__default.createElement("div", { className: b('menu', { measured }), ref: menuContainerRef },
-            visibleItems.length > 0 && renderMenu(visibleItems),
-            hiddenItems.length > 0 && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Button, { view: "flat-secondary", size: "l", onClick: handleOpenMoreItemsMenu, title: moreButtonTitle },
-                    React__default.createElement(Icon, { data: Ellipsis, size: 16 })),
-                React__default.createElement(Sheet, { id: modalId, visible: moreItemsMenuVisible, className: b('modal'), contentClassName: b('modal-content'), onClose: handleCloseMoreItemsMenu }, renderMenu(hiddenItems))))),
-        React__default.createElement("div", { className: b('bottom-row') },
-            React__default.createElement("small", { className: b('copyright') }, copyright),
-            shouldRenderLogo && (React__default.createElement("div", { className: logoWrapperClassName },
-                React__default.createElement(Logo, Object.assign({}, logo)))))));
-};
-
-export { Footer, MobileFooter };
+import '@gravity-ui/uikit/legacy';
 //# sourceMappingURL=index.js.map

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.ts","../../../src/components/Footer/MenuItem/MenuItem.tsx","../../../src/components/Footer/desktop/constants/moreItemsPopupProps.ts","../../../src/components/Footer/desktop/Footer.tsx","../../../src/components/Footer/mobile/Footer.tsx"],"sourcesContent":["import {useLayoutEffect, useMemo, useState} from 'react';\nimport type {RefObject} from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nexport type UseOverflowingContainerListItemsProps<ItemType extends unknown> = {\n    containerRef: RefObject<HTMLElement>;\n    items?: ItemType[];\n    itemSelector: string;\n    moreButtonWidth?: number;\n};\n\nexport function useOverflowingHorizontalListItems<ItemType>({\n    containerRef,\n    items,\n    itemSelector,\n    moreButtonWidth = 0,\n}: UseOverflowingContainerListItemsProps<ItemType>) {\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [itemWidths, setItemWidths] = useState<number[]>([]);\n\n    useLayoutEffect(() => {\n        if (!containerRef.current) {\n            return;\n        }\n\n        const measureItemSizes = () => {\n            const itemElements = Array.from(\n                containerRef.current?.querySelectorAll(itemSelector) ?? [],\n            );\n            setItemWidths(itemElements.map((item) => item.clientWidth));\n        };\n\n        measureItemSizes();\n    }, [containerRef, itemSelector]);\n\n    useLayoutEffect(() => {\n        const footerMenu = containerRef.current;\n        if (!footerMenu) {\n            return;\n        }\n\n        const updateContainerSize = (entries: ResizeObserverEntry[]) => {\n            if (entries.length > 0 && footerMenu) {\n                setContainerWidth(entries[0].contentRect.width);\n            }\n        };\n\n        const updateContainerSizeDebounced = debounceFn(updateContainerSize, 100);\n        const footerMenuResizeObserver = new ResizeObserver(updateContainerSizeDebounced);\n\n        footerMenuResizeObserver.observe(footerMenu);\n    }, [containerRef]);\n\n    const isMeasured = containerWidth > 0;\n\n    const {visibleItems, hiddenItems} = useMemo(() => {\n        if (!isMeasured) {\n            return {\n                visibleItems: items ?? [],\n                hiddenItems: [],\n            };\n        }\n\n        const itemsCount = itemWidths.length;\n        let visibleItemsCount = 0;\n        let remainingContainerWidth = containerWidth;\n        for (const width of itemWidths) {\n            remainingContainerWidth -= width;\n            if (remainingContainerWidth < moreButtonWidth) {\n                const isMoreThanOneItemLeft = itemsCount !== visibleItemsCount + 1;\n                const hasNoSpaceForTheLastItem = remainingContainerWidth < 0;\n                if (isMoreThanOneItemLeft || hasNoSpaceForTheLastItem) {\n                    break;\n                }\n            }\n\n            visibleItemsCount++;\n        }\n\n        return {\n            visibleItems: items?.slice(0, visibleItemsCount) ?? [],\n            hiddenItems: items?.slice(visibleItemsCount) ?? [],\n        };\n    }, [containerWidth, isMeasured, itemWidths, items, moreButtonWidth]);\n\n    return {visibleItems, hiddenItems, measured: isMeasured};\n}\n","import React from 'react';\nimport type {FC} from 'react';\n\nimport {Menu} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {FooterMenuItem} from '../types';\n\nimport './MenuItem.scss';\n\nconst b = block('footer-menu-item');\n\nexport type MenuItemProps = FooterMenuItem;\n\nexport const MenuItem: FC<MenuItemProps> = ({text, className, ...menuItemProps}) => {\n    return (\n        <Menu.Item className={b(null, className)} {...menuItemProps}>\n            {text}\n        </Menu.Item>\n    );\n};\n","import {PopupProps} from '@gravity-ui/uikit';\n\nexport const moreItemsPopupProps: PopupProps = {\n    placement: 'top-start',\n};\n","import React, {useMemo, useRef} from 'react';\nimport type {FC} from 'react';\n\nimport {DropdownMenu, Menu} from '@gravity-ui/uikit';\nimport type {DropdownMenuItem} from '@gravity-ui/uikit';\n\nimport {useOverflowingHorizontalListItems} from '../../../hooks/useOverflowingHorizontalListItems';\nimport {Logo} from '../../Logo';\nimport {block} from '../../utils/cn';\nimport {MenuItem} from '../MenuItem/MenuItem';\nimport {FooterProps} from '../types';\n\nimport {moreItemsPopupProps} from './constants/moreItemsPopupProps';\n\nimport './Footer.scss';\n\nconst b = block('footer');\n\nexport const Footer: FC<FooterProps> = ({\n    className,\n    menuItems: providedMenuItems,\n    withDivider,\n    moreButtonTitle,\n    onMoreButtonClick,\n    view = 'normal',\n    logo,\n    logoWrapperClassName,\n    copyright,\n}) => {\n    const menuContainerRef = useRef<HTMLDivElement>(null);\n\n    const menuItems = view === 'clear' ? undefined : providedMenuItems;\n\n    const {visibleItems, hiddenItems, measured} = useOverflowingHorizontalListItems({\n        containerRef: menuContainerRef,\n        items: menuItems,\n        itemSelector: `.${b('menu-item')}`,\n        moreButtonWidth: 28,\n    });\n\n    const moreButtonProps = useMemo(\n        () => ({\n            title: moreButtonTitle,\n        }),\n        [moreButtonTitle],\n    );\n\n    const dropdownMenuItems = useMemo(\n        () =>\n            hiddenItems.map(\n                (item) =>\n                    ({\n                        ...item,\n                        action: item.onClick,\n                    }) as DropdownMenuItem,\n            ),\n        [hiddenItems],\n    );\n\n    const shouldRenderLogo = view !== 'clear' && Boolean(logo);\n    const shouldRenderMenu = (menuItems?.length ?? 0) > 0;\n\n    return (\n        <footer className={b({desktop: true, 'with-divider': withDivider, view}, className)}>\n            {shouldRenderMenu && (\n                <div className={b('menu', {measured})} ref={menuContainerRef}>\n                    {visibleItems.length > 0 && (\n                        <Menu className={b('list')}>\n                            {visibleItems.map((item, index) => (\n                                <MenuItem\n                                    key={index}\n                                    {...item}\n                                    className={b('menu-item', item.className)}\n                                />\n                            ))}\n                        </Menu>\n                    )}\n                    {dropdownMenuItems.length > 0 && (\n                        <DropdownMenu\n                            items={dropdownMenuItems}\n                            switcherWrapperClassName={b('more-button')}\n                            popupProps={moreItemsPopupProps}\n                            defaultSwitcherProps={moreButtonProps}\n                            onSwitcherClick={onMoreButtonClick}\n                        />\n                    )}\n                </div>\n            )}\n            <div className={b('right')}>\n                <small className={b('copyright', {small: !menuItems?.length})}>{copyright}</small>\n                {shouldRenderLogo && (\n                    <div className={logoWrapperClassName}>\n                        <Logo {...logo!} />\n                    </div>\n                )}\n            </div>\n        </footer>\n    );\n};\n","import React, {useCallback, useRef, useState} from 'react';\nimport type {FC} from 'react';\n\nimport {Ellipsis} from '@gravity-ui/icons';\nimport {Button, Icon, Menu, Sheet} from '@gravity-ui/uikit';\n\nimport {useOverflowingHorizontalListItems} from '../../../hooks/useOverflowingHorizontalListItems';\nimport {Logo} from '../../Logo';\nimport {block} from '../../utils/cn';\nimport {MenuItem} from '../MenuItem/MenuItem';\nimport {FooterMenuItem, FooterProps} from '../types';\n\nimport './Footer.scss';\n\nconst b = block('footer');\n\nconst modalId = 'footer-more-items';\n\nexport const MobileFooter: FC<FooterProps> = ({\n    className,\n    menuItems: providedMenuItems,\n    withDivider,\n    moreButtonTitle,\n    onMoreButtonClick,\n    view = 'normal',\n    logo,\n    logoWrapperClassName,\n    copyright,\n}) => {\n    const [moreItemsMenuVisible, setMoreItemsMenuVisible] = useState(false);\n    const menuContainerRef = useRef<HTMLDivElement>(null);\n\n    const handleOpenMoreItemsMenu = useCallback(\n        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            setMoreItemsMenuVisible(true);\n            onMoreButtonClick?.(event);\n        },\n        [onMoreButtonClick],\n    );\n\n    const handleCloseMoreItemsMenu = useCallback(() => {\n        setMoreItemsMenuVisible(false);\n    }, []);\n\n    const menuItems = view === 'clear' ? undefined : providedMenuItems;\n\n    const {visibleItems, hiddenItems, measured} = useOverflowingHorizontalListItems({\n        containerRef: menuContainerRef,\n        items: menuItems,\n        itemSelector: `.${b('menu-item')}`,\n        moreButtonWidth: 28,\n    });\n\n    const renderMenu = (items: FooterMenuItem[]) => (\n        <Menu className={b('list')}>\n            {items.map((item, index) => (\n                <MenuItem key={index} {...item} className={b('menu-item', item.className)} />\n            ))}\n        </Menu>\n    );\n\n    const shouldRenderLogo = view !== 'clear' && Boolean(logo);\n\n    return (\n        <footer className={b({mobile: true, 'with-divider': withDivider, view}, className)}>\n            <div className={b('menu', {measured})} ref={menuContainerRef}>\n                {visibleItems.length > 0 && renderMenu(visibleItems)}\n                {hiddenItems.length > 0 && (\n                    <>\n                        <Button\n                            view=\"flat-secondary\"\n                            size=\"l\"\n                            onClick={handleOpenMoreItemsMenu}\n                            title={moreButtonTitle}\n                        >\n                            <Icon data={Ellipsis} size={16} />\n                        </Button>\n                        <Sheet\n                            id={modalId}\n                            visible={moreItemsMenuVisible}\n                            className={b('modal')}\n                            contentClassName={b('modal-content')}\n                            onClose={handleCloseMoreItemsMenu}\n                        >\n                            {renderMenu(hiddenItems)}\n                        </Sheet>\n                    </>\n                )}\n            </div>\n            <div className={b('bottom-row')}>\n                <small className={b('copyright')}>{copyright}</small>\n                {shouldRenderLogo && (\n                    <div className={logoWrapperClassName}>\n                        <Logo {...logo!} />\n                    </div>\n                )}\n            </div>\n        </footer>\n    );\n};\n"],"names":["debounceFn","b","React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/navigation",
-  "version": "2.33.0",
+  "version": "3.0.0-beta-lunory.0",
   "description": "Gravity UI Navigation components",
   "license": "MIT",
   "repository": {
@@ -39,77 +39,80 @@
     "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache"
   },
   "dependencies": {
-    "react-transition-group": "^4.4.1",
-    "tslib": "^2.4.0"
+    "react-transition-group": "^4.4.5",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@bem-react/classname": "^1.6.0",
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
     "@doc-tools/transform": "^3.11.0",
-    "@gravity-ui/components": "^3.0.0",
-    "@gravity-ui/eslint-config": "^3.1.1",
+    "@gravity-ui/components": "^4.0.1",
+    "@gravity-ui/eslint-config": "^3.3.0",
     "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/prettier-config": "^1.0.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.15.0",
-    "@playwright/experimental-ct-react": "^1.45.3",
-    "@playwright/test": "^1.45.3",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
-    "@storybook/addon-a11y": "^7.6.18",
-    "@storybook/addon-actions": "^7.6.13",
-    "@storybook/addon-essentials": "^7.6.13",
-    "@storybook/addon-interactions": "^7.6.13",
-    "@storybook/addon-links": "^7.6.13",
+    "@gravity-ui/uikit": "^7.0.1",
+    "@playwright/experimental-ct-react": "^1.49.1",
+    "@playwright/test": "^1.49.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-a11y": "^8.5.0",
+    "@storybook/addon-actions": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.6.13",
-    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-webpack5": "^8.5.0",
+    "@storybook/test": "^8.5.0",
     "@storybook/test-runner": "^0.17.0",
-    "@storybook/testing-library": "0.2.0",
-    "@svgr/rollup": "^6.4.0",
-    "@types/lodash": "^4.14.202",
-    "@types/react": "^18.3.3",
-    "@types/react-transition-group": "^4.4.10",
+    "@storybook/theming": "^8.5.0",
+    "@svgr/rollup": "^8.1.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.1",
-    "axe-playwright": "^2.0.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "husky": "^9.0.9",
+    "@vitejs/plugin-react": "^4.3.4",
+    "axe-playwright": "^2.0.3",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^6.5.0",
+    "husky": "^9.1.7",
     "jest": "^28.0.0",
     "nano-staged": "^0.6.0",
     "npm-run-all": "^4.0.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.75.7",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.31.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.49.7",
-    "sass-loader": "^10.2.1",
-    "storybook": "^7.6.13",
+    "sass": "^1.83.4",
+    "sass-loader": "^10.5.2",
+    "storybook": "^8.5.0",
     "storybook-preset-inline-svg": "^1.0.1",
     "stylelint": "^15.11.0",
     "svg-inline-loader": "^0.8.2",
     "ts-jest": "^28.0.0",
-    "typescript": "^4.5.5",
-    "vite-plugin-svgr": "^4.2.0"
+    "typescript": "^5.7.3",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "peerDependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/components": "^3.0.0",
+    "@gravity-ui/components": "^4.0.1",
     "@gravity-ui/icons": "^2.2.0",
-    "@gravity-ui/uikit": "^6.15.0",
+    "@gravity-ui/uikit": "^7.0.1",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },

package/build/cjs/ActionBar-3c6cdf57.js

@@ -1,63 +0,0 @@
-'use strict';
-
-var React = require('react');
-var cn = require('./cn-9933321a.js');
-var styleInject_es = require('./style-inject.es-dcee06b6.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var css_248z$4 = ".gn-action-bar-group{align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;margin:0;padding:0}.gn-action-bar-group_pull_left{margin-left:0;margin-right:auto}.gn-action-bar-group_pull_right{margin-left:auto;margin-right:0}.gn-action-bar-group_pull_center{margin-left:auto;margin-right:auto}";
-styleInject_es.styleInject(css_248z$4);
-
-const b$4 = cn.block('action-bar-group');
-const ActionBarGroup = ({ children, className, pull }) => {
-    return (React__default["default"].createElement("ul", { className: b$4({ pull }, className), role: "group" }, children));
-};
-ActionBarGroup.displayName = 'ActionBar.Group';
-
-var css_248z$3 = ".gn-action-bar-item{list-style:none;margin:0;padding:0}.gn-action-bar-item_pull_left{margin-left:0;margin-right:auto}.gn-action-bar-item_pull_right{margin-left:auto;margin-right:0}.gn-action-bar-item_pull_center{margin-left:auto;margin-right:auto}.gn-action-bar-item+.gn-action-bar-item_spacing{margin-left:8px}";
-styleInject_es.styleInject(css_248z$3);
-
-const b$3 = cn.block('action-bar-item');
-const ActionBarItem = ({ children, className, pull, spacing = true }) => {
-    return (React__default["default"].createElement("li", { className: b$3({ pull, spacing }, className), role: "menuitem" }, children));
-};
-ActionBarItem.displayName = 'ActionBar.Item';
-
-var css_248z$2 = ".gn-action-bar-section{align-items:stretch;display:flex;flex-flow:row nowrap;justify-content:flex-start}.gn-action-bar-section+.gn-action-bar-section{border-left:1px solid var(--g-color-line-generic)}.gn-action-bar-section_type_primary{flex:1 1 auto;padding-left:20px;padding-right:20px}.gn-action-bar-section_type_secondary{padding-left:6px;padding-right:6px}";
-styleInject_es.styleInject(css_248z$2);
-
-const b$2 = cn.block('action-bar-section');
-const ActionBarSection = ({ children, type = 'primary' }) => {
-    return (React__default["default"].createElement("div", { className: b$2({ type }), role: "menu" }, children));
-};
-ActionBarSection.displayName = 'ActionBar.Section';
-
-var css_248z$1 = ".gn-action-bar-separator{border-right:1px solid var(--g-color-line-generic);height:40px;list-style:none;margin:0 6px;padding:0}";
-styleInject_es.styleInject(css_248z$1);
-
-const b$1 = cn.block('action-bar-separator');
-const ActionBarSeparator = () => {
-    return React__default["default"].createElement("li", { role: "separator", className: b$1(), "aria-hidden": true });
-};
-ActionBarSeparator.displayName = 'ActionBar.Separator';
-
-var css_248z = ".gn-action-bar{align-items:stretch;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;flex-flow:row nowrap;height:40px;justify-content:flex-start}";
-styleInject_es.styleInject(css_248z);
-
-const b = cn.block('action-bar');
-const ActionBar = ({ children, className, 'aria-label': ariaLabel }) => {
-    return (React__default["default"].createElement("section", { className: b(null, className), "aria-label": ariaLabel }, children));
-};
-ActionBar.displayName = 'ActionBar';
-const PublicActionBar = Object.assign(ActionBar, {
-    Section: ActionBarSection,
-    Group: ActionBarGroup,
-    Item: ActionBarItem,
-    Separator: ActionBarSeparator,
-});
-
-exports.PublicActionBar = PublicActionBar;
-//# sourceMappingURL=ActionBar-3c6cdf57.js.map

package/build/cjs/ActionBar-3c6cdf57.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ActionBar-3c6cdf57.js","sources":["../../../src/components/ActionBar/Group/ActionBarGroup.tsx","../../../src/components/ActionBar/Item/ActionBarItem.tsx","../../../src/components/ActionBar/Section/ActionBarSection.tsx","../../../src/components/ActionBar/Separator/ActionBarSeparator.tsx","../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../../utils/cn';\nimport {PropsWithPull} from '../types';\n\nimport './ActionBarGroup.scss';\n\nexport type Props = PropsWithChildren<\n    PropsWithPull<{\n        className?: string;\n    }>\n>;\n\nconst b = block('action-bar-group');\n\nexport const ActionBarGroup = ({children, className, pull}: Props) => {\n    return (\n        <ul className={b({pull}, className)} role=\"group\">\n            {children}\n        </ul>\n    );\n};\n\nActionBarGroup.displayName = 'ActionBar.Group';\n","import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../../utils/cn';\nimport {PropsWithPull} from '../types';\n\nimport './ActionBarItem.scss';\n\nexport type Props = PropsWithChildren<\n    PropsWithPull<{\n        spacing?: boolean;\n        className?: string;\n    }>\n>;\n\nconst b = block('action-bar-item');\n\nexport const ActionBarItem = ({children, className, pull, spacing = true}: Props) => {\n    return (\n        <li className={b({pull, spacing}, className)} role=\"menuitem\">\n            {children}\n        </li>\n    );\n};\n\nActionBarItem.displayName = 'ActionBar.Item';\n","import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../../utils/cn';\n\nimport './ActionBarSection.scss';\n\nexport type Props = PropsWithChildren<{type?: 'primary' | 'secondary'}>;\n\nconst b = block('action-bar-section');\n\nexport const ActionBarSection = ({children, type = 'primary'}: Props) => {\n    return (\n        <div className={b({type})} role=\"menu\">\n            {children}\n        </div>\n    );\n};\n\nActionBarSection.displayName = 'ActionBar.Section';\n","import React from 'react';\n\nimport {block} from '../../utils/cn';\n\nimport './ActionBarSeparator.scss';\n\nconst b = block('action-bar-separator');\n\nexport const ActionBarSeparator = () => {\n    return <li role=\"separator\" className={b()} aria-hidden />;\n};\n\nActionBarSeparator.displayName = 'ActionBar.Separator';\n","import React, {PropsWithChildren} from 'react';\n\nimport {block} from '../utils/cn';\n\nimport {ActionBarGroup} from './Group/ActionBarGroup';\nimport {ActionBarItem} from './Item/ActionBarItem';\nimport {ActionBarSection} from './Section/ActionBarSection';\nimport {ActionBarSeparator} from './Separator/ActionBarSeparator';\n\nimport './ActionBar.scss';\n\nexport type Props = PropsWithChildren<{\n    'aria-label'?: string;\n    className?: string;\n}>;\n\nconst b = block('action-bar');\n\nconst ActionBar = ({children, className, 'aria-label': ariaLabel}: Props) => {\n    return (\n        <section className={b(null, className)} aria-label={ariaLabel}>\n            {children}\n        </section>\n    );\n};\n\nActionBar.displayName = 'ActionBar';\n\nconst PublicActionBar = Object.assign(ActionBar, {\n    Section: ActionBarSection,\n    Group: ActionBarGroup,\n    Item: ActionBarItem,\n    Separator: ActionBarSeparator,\n});\n\nexport {PublicActionBar as ActionBar};\n"],"names":["b","block","React"],"mappings":";;;;;;;;;;;;;AAaA,MAAMA,GAAC,GAAGC,QAAK,CAAC,kBAAkB,CAAC,CAAC;AAE7B,MAAM,cAAc,GAAG,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAQ,KAAI;IACjE,QACIC,gDAAI,SAAS,EAAEF,GAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,IAC5C,QAAQ,CACR,EACP;AACN,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,iBAAiB;;;;;ACT9C,MAAMA,GAAC,GAAGC,QAAK,CAAC,iBAAiB,CAAC,CAAC;AAE5B,MAAM,aAAa,GAAG,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAQ,KAAI;IAChF,QACIC,gDAAI,SAAS,EAAEF,GAAC,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,UAAU,EACxD,EAAA,QAAQ,CACR,EACP;AACN,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,gBAAgB;;;;;AChB5C,MAAMA,GAAC,GAAGC,QAAK,CAAC,oBAAoB,CAAC,CAAC;AAE/B,MAAM,gBAAgB,GAAG,CAAC,EAAC,QAAQ,EAAE,IAAI,GAAG,SAAS,EAAQ,KAAI;AACpE,IAAA,QACIC,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEF,GAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAE,IAAI,EAAC,MAAM,IACjC,QAAQ,CACP,EACR;AACN,CAAC,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,mBAAmB;;;;;ACZlD,MAAMA,GAAC,GAAGC,QAAK,CAAC,sBAAsB,CAAC,CAAC;AAEjC,MAAM,kBAAkB,GAAG,MAAK;IACnC,OAAOC,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,IAAI,EAAC,WAAW,EAAC,SAAS,EAAEF,GAAC,EAAE,EAAA,aAAA,EAAA,IAAA,EAAA,CAAgB,CAAC;AAC/D,CAAC,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,qBAAqB;;;;;ACItD,MAAM,CAAC,GAAGC,QAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,SAAS,GAAG,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAQ,KAAI;AACxE,IAAA,QACIC,yBAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,gBAAc,SAAS,EAAA,EACxD,QAAQ,CACH,EACZ;AACN,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;AAC7C,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,KAAK,EAAE,cAAc;AACrB,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,SAAS,EAAE,kBAAkB;AAChC,CAAA;;;;"}

package/build/cjs/AsideFallback.js

@@ -1,31 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var uikit = require('@gravity-ui/uikit');
-var constants = require('./constants-d81c3867.js');
-var AsideHeaderContext = require('./AsideHeaderContext.js');
-var utils = require('./utils-db3e03c2.js');
-var dividerCollapsed = require('./divider-collapsed-b743122e.js');
-require('./cn-9933321a.js');
-require('@bem-react/classname');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
-    const { compact } = AsideHeaderContext.useAsideHeaderContext();
-    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
-    const subheaderHeight = (1 + subheaderItemsCount) * constants.ITEM_HEIGHT;
-    return (React__default["default"].createElement("div", { className: utils.b('aside'), style: { width: `var(${widthVar})` }, "data-qa": qa },
-        React__default["default"].createElement("div", { className: utils.b('aside-content', { 'with-decoration': headerDecoration }) },
-            React__default["default"].createElement("div", { className: utils.b('header', { 'with-decoration': headerDecoration }) },
-                React__default["default"].createElement("div", { style: { height: subheaderHeight } }),
-                compact && headerDecoration ? (React__default["default"].createElement(uikit.Icon, { data: dividerCollapsed.headerDividerCollapsedIcon, className: utils.b('header-divider'), width: constants.ASIDE_HEADER_COMPACT_WIDTH, height: constants.HEADER_DIVIDER_HEIGHT })) : null),
-            React__default["default"].createElement("div", { style: { flex: 1 } }))));
-};
-
-exports.AsideFallback = AsideFallback;
-//# sourceMappingURL=AsideFallback.js.map

package/build/cjs/AsideFallback.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AsideFallback.js","sources":["../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon, QAProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {b} from '../../utils';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\nexport interface Props extends QAProps {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {\n    const {compact} = useAsideHeaderContext();\n\n    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;\n\n    return (\n        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {compact && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COMPACT_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["useAsideHeaderContext","ITEM_HEIGHT","React","b","Icon","headerDividerCollapsedIcon","ASIDE_HEADER_COMPACT_WIDTH","HEADER_DIVIDER_HEIGHT"],"mappings":";;;;;;;;;;;;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,OAAO,EAAC,GAAGA,wCAAqB,EAAE,CAAC;IAE1C,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB,CAAC;IAEpF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAIC,qBAAW,CAAC;AAEhE,IAAA,QACIC,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvED,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrED,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,OAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAAD,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,OAAO,IAAI,gBAAgB,IACxBA,yBAAA,CAAA,aAAA,CAACE,UAAI,EAAA,EACD,IAAI,EAAEC,2CAA0B,EAChC,SAAS,EAAEF,OAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAEG,oCAA0B,EACjC,MAAM,EAAEC,+BAAqB,GAC/B,IACF,IAAI,CACN;YACNL,yBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ,EACR;AACN;;;;"}

package/build/cjs/AsideHeader.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('./tslib.es6-705c6589.js');
-var React = require('react');
-var PageLayout = require('./PageLayout.js');
-var PageLayoutAside = require('./PageLayoutAside-56a441a9.js');
-require('./Content-64d5738a.js');
-require('./constants-d81c3867.js');
-require('./AsideHeaderContext.js');
-require('./utils-db3e03c2.js');
-require('./cn-9933321a.js');
-require('@bem-react/classname');
-require('./style-inject.es-dcee06b6.js');
-require('@gravity-ui/uikit');
-require('@gravity-ui/icons');
-require('@gravity-ui/uikit/i18n');
-require('./Item-ff6bc440.js');
-require('./debounce-8772fd80.js');
-require('./divider-collapsed-b743122e.js');
-require('./Drawer.js');
-require('react-dom');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const AsideHeader = React__default["default"].forwardRef((_a, ref) => {
-    var { compact, className, topAlert } = _a, props = tslib_es6.__rest(_a, ["compact", "className", "topAlert"]);
-    return (React__default["default"].createElement(PageLayout.PageLayout, { compact: compact, className: className, topAlert: topAlert },
-        React__default["default"].createElement(PageLayoutAside.PageLayoutAside, Object.assign({ ref: ref }, props)),
-        React__default["default"].createElement(PageLayout.PageLayout.Content, { renderContent: props.renderContent })));
-});
-AsideHeader.displayName = 'AsideHeader';
-
-exports.AsideHeader = AsideHeader;
-//# sourceMappingURL=AsideHeader.js.map

package/build/cjs/AsideHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AsideHeader.js","sources":["../../../src/components/AsideHeader/AsideHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport {PageLayout} from './components/PageLayout/PageLayout';\nimport {PageLayoutAside} from './components/PageLayout/PageLayoutAside';\nimport {AsideHeaderProps} from './types';\n\nexport const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(\n    ({compact, className, topAlert, ...props}, ref) => {\n        return (\n            <PageLayout compact={compact} className={className} topAlert={topAlert}>\n                <PageLayoutAside ref={ref} {...props} />\n                <PageLayout.Content renderContent={props.renderContent} />\n            </PageLayout>\n        );\n    },\n);\n\nAsideHeader.displayName = 'AsideHeader';\n"],"names":["React","__rest","PageLayout","PageLayoutAside"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,WAAW,GAAGA,yBAAK,CAAC,UAAU,CACvC,CAAC,EAAwC,EAAE,GAAG,KAAI;QAAjD,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,KAAK,GAAvCC,gBAAA,CAAA,EAAA,EAAA,CAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAwC,CAAD,CAAA;AACpC,IAAA,QACID,yBAAA,CAAA,aAAA,CAACE,qBAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAClE,QAAAF,yBAAA,CAAA,aAAA,CAACG,+BAAe,EAAC,MAAA,CAAA,MAAA,CAAA,EAAA,GAAG,EAAE,GAAG,EAAA,EAAM,KAAK,CAAI,CAAA;AACxC,QAAAH,yBAAA,CAAA,aAAA,CAACE,qBAAU,CAAC,OAAO,EAAA,EAAC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAA,CAAI,CACjD,EACf;AACN,CAAC,EACH;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}