@gravity-ui/navigation 0.22.1 → 0.23.0

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

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

package/build/esm/components/AllPagesPanel/index.d.ts

@@ -1,3 +1,3 @@
 export { AllPagesPanel } from './AllPagesPanel';
-export { ALL_PAGES_MENU_ITEM, ALL_PAGES_ID } from './constants';
+export { getAllPagesMenuItem, ALL_PAGES_ID } from './constants';
 export { useVisibleMenuItems } from './useVisibleMenuItems';

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { AsideHeaderProps } from './types';
 import './AsideHeader.scss';
-export declare const AsideHeader: (props: AsideHeaderProps) => React.JSX.Element;
+export declare const AsideHeader: React.ForwardRefExoticComponent<AsideHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/build/esm/components/AsideHeader/components/FirstPanel.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const FirstPanel: () => React.JSX.Element;
+export declare const FirstPanel: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;

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

@@ -14,7 +14,7 @@ export interface AsideHeaderGeneralProps {
     renderFooter?: (data: {
         size: number;
         compact: boolean;
-        asideRef: React.RefObject<HTMLDivElement>;
+        asideRef: React.ForwardedRef<HTMLDivElement>;
     }) => React.ReactNode;
     onClosePanel?: () => void;
     onChangeCompact?: (compact: boolean) => void;

package/build/esm/index.js

@@ -1673,12 +1673,14 @@ const COMPONENT$4 = 'AllPagesPanel';
 var i18n$4 = registerKeyset({ en: en$4, ru: ru$4 }, COMPONENT$4);
 
 const ALL_PAGES_ID = 'all-pages';
-const ALL_PAGES_MENU_ITEM = {
-    id: ALL_PAGES_ID,
-    title: i18n$4('menu-item.all-pages.title'),
-    tooltipText: i18n$4('menu-item.all-pages.title'),
-    icon: Ellipsis,
-};
+function getAllPagesMenuItem() {
+    return {
+        id: ALL_PAGES_ID,
+        title: i18n$4('menu-item.all-pages.title'),
+        tooltipText: i18n$4('menu-item.all-pages.title'),
+        icon: Ellipsis,
+    };
+}
 
 const useGroupedMenuItems = (items) => {
     const allPagesMenuItems = useMemo(() => {
@@ -4998,24 +5000,25 @@ const Panels = () => {
     return panelItems ? (React__default.createElement(Drawer, { className: b$m('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default.createElement(DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
 };
 
-const FirstPanel = () => {
+const FirstPanel = React__default.forwardRef((_props, ref) => {
     const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, renderFooter, compact, } = useAsideHeaderInnerContext();
     const visibleMenuItems = useVisibleMenuItems();
     const asideRef = useRef(null);
+    const popupAnchorRef = useMemo(() => ref || asideRef, [ref, asideRef]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: b$m('aside'), style: { width: size } },
-            React__default.createElement("div", { className: b$m('aside-popup-anchor'), ref: asideRef }),
+            React__default.createElement("div", { className: b$m('aside-popup-anchor'), ref: popupAnchorRef }),
             React__default.createElement("div", { className: b$m('aside-content', { ['with-decoration']: headerDecoration }) },
                 React__default.createElement(Header, null),
                 (visibleMenuItems === null || visibleMenuItems === void 0 ? void 0 : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n$3('label_more'), onItemClick: onItemClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b$m('menu-items') })),
                 React__default.createElement("div", { className: b$m('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
                     size,
                     compact: Boolean(compact),
-                    asideRef,
+                    asideRef: popupAnchorRef,
                 })),
                 React__default.createElement(CollapseButton, null))),
         React__default.createElement(Panels, null)));
-};
+});
 
 var css_248z$h = ".g-root {\n  --gn-aside-header-background-color: var(--g-color-base-warning-light);\n  --gn-aside-header-collapse-button-divider-line-color: var(\n      --gn-aside-header-subheader-divider-line-color\n  );\n  --gn-aside-header-footer-item-icon-color: var(--g-color-text-primary);\n  --gn-aside-header-subheader-item-icon-color: var(--g-color-text-primary);\n  --gn-aside-header-item-icon-background-size: 38px;\n}\n\n.g-root_theme_light,\n.g-root_theme_light-hc {\n  --gn-aside-header-divider-line-color: transparent;\n  --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic);\n}\n\n.g-root_theme_dark,\n.g-root_theme_dark-hc {\n  --gn-aside-header-divider-line-color: var(--g-color-line-generic-solid);\n  --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic-solid);\n}\n\n.gn-aside-header {\n  --gn-aside-header-min-width: 56px;\n  height: 100%;\n  width: 100%;\n  position: relative;\n  background-color: var(--g-color-base-background);\n}\n.gn-aside-header__aside {\n  position: sticky;\n  top: 0;\n  left: 0;\n  height: 100vh;\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--g-color-base-background);\n  z-index: 100;\n  box-sizing: border-box;\n}\n.gn-aside-header__aside::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  width: 1px;\n  height: 100%;\n  content: \"\";\n  background-color: var(--gn-aside-header-divider-line-color);\n}\n.gn-aside-header__aside-popup-anchor {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n}\n.gn-aside-header__aside-content {\n  --gradient-height: 334px;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n  width: inherit;\n  height: inherit;\n  position: relative;\n  z-index: 2;\n  user-select: none;\n}\n.gn-aside-header__aside-content::after {\n  position: absolute;\n  top: 0;\n  right: -100px;\n  bottom: 0;\n  width: 100px;\n  content: \"\";\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.gn-aside-header__aside-content > .gn-aside-header-logo {\n  margin: 8px 0;\n}\n.gn-aside-header__aside-content_with-decoration {\n  background: linear-gradient(180deg, var(--gn-aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.gn-aside-header_compact .gn-aside-header__aside-content {\n  background: transparent;\n}\n.gn-aside-header__header {\n  --gn-aside-header-header-divider-height: 29px;\n  position: relative;\n  z-index: 1;\n  flex: none;\n  box-sizing: border-box;\n  width: 100%;\n  padding-top: 8px;\n  padding-bottom: 22px;\n}\n.gn-aside-header__header .gn-aside-header__header-divider {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  color: var(--gn-aside-header-background-color);\n}\n.gn-aside-header__header_with-decoration::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -2;\n  display: none;\n  width: 100%;\n  height: calc(100% - var(--gn-aside-header-header-divider-height));\n  content: \"\";\n  background-color: var(--gn-aside-header-background-color);\n}\n.gn-aside-header__header::after {\n  position: absolute;\n  bottom: 12px;\n  left: 0;\n  z-index: -2;\n  width: 100%;\n  height: 1px;\n  content: \"\";\n  background-color: var(--gn-aside-header-subheader-divider-line-color);\n}\n.gn-aside-header_compact .gn-aside-header__header::before {\n  display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider {\n  display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration::after {\n  display: none;\n}\n.gn-aside-header__menu-items {\n  flex-grow: 1;\n}\n.gn-aside-header__footer {\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n}\n.gn-aside-header__panels {\n  z-index: 98;\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  overflow: auto;\n}\n.gn-aside-header__panel {\n  height: 100%;\n}\n.gn-aside-header__pane-container {\n  display: flex;\n  outline: none;\n  overflow: visible;\n  user-select: text;\n  flex-direction: row;\n}\n.gn-aside-header__content {\n  width: calc(100% - var(--gn-aside-header-size));\n  z-index: 95;\n}\n.gn-aside-header__collapse-button {\n  --yc-button-background-color-hover: transparent;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex: none;\n  width: 100%;\n  height: 20px;\n  border-top: 1px solid var(--gn-aside-header-collapse-button-divider-line-color);\n  margin-top: auto;\n}\n.gn-aside-header__collapse-button > .yc-button__text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n}\n.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon {\n  transform: rotate(180deg);\n}\n.gn-aside-header__collapse-button .gn-aside-header__collapse-icon {\n  color: var(--g-color-text-secondary);\n}\n.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon {\n  color: var(--g-color-text-primary);\n}";
 styleInject(css_248z$h);
@@ -5029,6 +5032,9 @@ const EMPTY_MENU_ITEMS = [];
 const useAsideHeaderInnerContextValue = (props) => {
     const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged } = props;
     const [innerVisiblePanel, setInnerVisiblePanel] = useState();
+    const ALL_PAGES_MENU_ITEM = React__default.useMemo(() => {
+        return getAllPagesMenuItem();
+    }, []);
     const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0);
     useEffect(() => {
         // If any user panel became visible we need to switch off all inner panels
@@ -5049,13 +5055,13 @@ const useAsideHeaderInnerContextValue = (props) => {
             innerOnClosePanel();
         }
         (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, collapsed, event);
-    }, [innerOnClosePanel]);
+    }, [innerOnClosePanel, ALL_PAGES_MENU_ITEM]);
     const innerMenuItems = useMemo(() => allPagesIsAvailable
         ? [
             ...(menuItems || EMPTY_MENU_ITEMS),
             Object.assign(Object.assign({}, ALL_PAGES_MENU_ITEM), { current: innerVisiblePanel === InnerPanels.AllPages }),
         ]
-        : menuItems || EMPTY_MENU_ITEMS, [allPagesIsAvailable, menuItems, innerVisiblePanel]);
+        : menuItems || EMPTY_MENU_ITEMS, [allPagesIsAvailable, menuItems, innerVisiblePanel, ALL_PAGES_MENU_ITEM]);
     const innerPanelItems = useMemo(() => {
         if (!allPagesIsAvailable) {
             return panelItems;
@@ -5073,7 +5079,7 @@ const useAsideHeaderInnerContextValue = (props) => {
         onItemClick });
 };
 
-const AsideHeader = (props) => {
+const AsideHeader = React__default.forwardRef((props, ref) => {
     const { className, compact } = props;
     const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
     const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
@@ -5082,9 +5088,9 @@ const AsideHeader = (props) => {
         React__default.createElement(AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
             React__default.createElement("div", { className: b$m({ compact }, className) },
                 React__default.createElement("div", { className: b$m('pane-container') },
-                    React__default.createElement(FirstPanel, null),
+                    React__default.createElement(FirstPanel, { ref: ref }),
                     React__default.createElement(Content, { size: size, renderContent: props.renderContent, className: b$m('content') }))))));
-};
+});
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.