@gravity-ui/navigation 0.22.2 → 0.23.1

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

@@ -5000,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);
@@ -5078,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]);
@@ -5087,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.
@@ -5569,7 +5570,7 @@ function getSettingsItemsFromChildren(children, filterRe) {
     return { items, hidden };
 }
 
-var css_248z$6 = ".gn-settings {\n  display: grid;\n  grid-template-columns: 216px 1fr;\n  width: 834px;\n  height: 100%;\n}\n.gn-settings_view_mobile {\n  display: block;\n  width: auto;\n  height: calc(80vh - 56px);\n  overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n  .gn-settings_view_mobile {\n    /* stylelint-disable-next-line */\n    height: calc(90dvh - 56px);\n  }\n}\n.gn-settings_view_mobile.gn-settings_loading {\n  text-align: center;\n}\n.gn-settings_view_mobile .gn-settings__loader {\n  margin-top: 20px;\n}\n.gn-settings_view_mobile .gn-settings__search {\n  padding: 0 20px;\n  margin: 4px 0 16px;\n}\n.gn-settings_view_mobile .gn-settings__page {\n  overflow-y: visible;\n}\n.gn-settings_view_mobile .gn-settings__tabs .yc-tabs__item:first-child {\n  margin-left: 20px;\n}\n.gn-settings_view_mobile .gn-settings__tabs .yc-tabs__item:last-child {\n  margin-right: 20px;\n}\n.gn-settings_view_mobile .gn-settings__section-heading {\n  font-size: var(--g-text-subheader-3-font-size);\n  line-height: var(--g-text-subheader-3-line-height);\n  font-weight: var(--g-text-subheader-font-weight);\n}\n.gn-settings_view_mobile .gn-settings__section-subheader {\n  color: var(--g-color-text-secondary);\n}\n.gn-settings_view_mobile .gn-settings__section-heading + .gn-settings-subheader {\n  margin-top: 8px;\n}\n.gn-settings_view_mobile .gn-settings__section-item {\n  margin-top: 0;\n}\n.gn-settings_view_mobile .gn-settings__section-heading + .gn-settings__section-item, .gn-settings_view_mobile .gn-settings__section-subheader + .gn-settings__section-item {\n  margin-top: 30px;\n}\n.gn-settings_view_mobile .gn-settings__section-item + .gn-settings__section-item {\n  margin-top: 22px;\n}\n.gn-settings_view_mobile .gn-settings__item:not(.gn-settings_view_mobile .gn-settings__item_mode_row) {\n  grid-template-columns: 1fr;\n  gap: 8px;\n}\n.gn-settings_view_mobile .gn-settings__item-heading {\n  font-size: var(--g-text-body-2-font-size);\n  line-height: var(--g-text-body-2-line-height);\n  font-weight: var(--g-text-body-font-weight);\n}\n.gn-settings_view_mobile .gn-settings__item-description {\n  font-size: var(--g-text-body-1-font-size);\n  line-height: var(--g-text-body-1-line-height);\n  font-weight: var(--g-text-body-font-weight);\n}\n.gn-settings_view_mobile .gn-settings__item_mode_row {\n  grid-template-columns: 1fr auto;\n}\n.gn-settings_view_mobile .gn-settings__item_mode_row .gn-settings__item-heading {\n  padding-right: 20px;\n}\n.gn-settings_view_mobile .gn-settings__item-content {\n  width: 100%;\n}\n.gn-settings_loading {\n  grid-template-columns: auto;\n}\n.gn-settings__loader {\n  align-self: center;\n  justify-self: center;\n}\n.gn-settings__not-found {\n  display: grid;\n  align-items: center;\n  justify-items: center;\n  height: 100%;\n}\n.gn-settings__menu {\n  border-right: 1px solid var(--g-color-line-generic);\n}\n.gn-settings__heading {\n  font-size: var(--g-text-subheader-2-font-size);\n  line-height: var(--g-text-subheader-2-line-height);\n  font-weight: var(--g-text-subheader-font-weight);\n  margin: 20px 20px 0;\n}\n.gn-settings__search {\n  margin: 0 20px 16px;\n}\n.gn-settings__page {\n  overflow-y: auto;\n}\n.gn-settings__content {\n  padding: 20px;\n}\n.gn-settings__section-heading {\n  font-size: var(--g-text-subheader-2-font-size);\n  line-height: var(--g-text-subheader-2-line-height);\n  font-weight: var(--g-text-subheader-font-weight);\n  margin: 0;\n}\n.gn-settings__section-item {\n  margin-top: 24px;\n}\n.gn-settings__section + .gn-settings__section {\n  margin-top: 32px;\n}\n.gn-settings__item {\n  display: grid;\n  grid-template-columns: 216px 1fr;\n  justify-items: start;\n}\n.gn-settings__item_align_top {\n  align-items: start;\n}\n.gn-settings__item_align_center {\n  align-items: center;\n}\n.gn-settings__item-title_badge {\n  position: relative;\n}\n.gn-settings__item-title_badge::after {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--g-color-text-danger);\n  position: absolute;\n  right: -8px;\n  top: 1px;\n}\n.gn-settings__item-description {\n  font-size: var(--g-text-caption-2-font-size);\n  line-height: var(--g-text-caption-2-line-height);\n  font-weight: var(--g-text-caption-font-weight);\n  display: block;\n  margin-top: 2px;\n  padding-right: 20px;\n  color: var(--g-color-text-secondary);\n}\n.gn-settings__item-right-adornment_hidden {\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n.gn-settings__item:hover .gn-settings__item-right-adornment_hidden {\n  opacity: 1;\n}\n.gn-settings__found {\n  font-weight: var(--g-text-accent-font-weight);\n  background: var(--g-color-base-selection);\n}";
+var css_248z$6 = ".gn-settings {\n  display: grid;\n  grid-template-columns: 216px 1fr;\n  width: 834px;\n  height: 100%;\n}\n.gn-settings_view_mobile {\n  display: block;\n  width: auto;\n  height: calc(80vh - 56px);\n  overflow-x: hidden;\n}\n@supports (height: 90dvh) {\n  .gn-settings_view_mobile {\n    /* stylelint-disable-next-line */\n    height: calc(90dvh - 56px);\n  }\n}\n.gn-settings_view_mobile.gn-settings_loading {\n  text-align: center;\n}\n.gn-settings_view_mobile .gn-settings__loader {\n  margin-top: 20px;\n}\n.gn-settings_view_mobile .gn-settings__search {\n  padding: 0 20px;\n  margin: 4px 0 16px;\n}\n.gn-settings_view_mobile .gn-settings__page {\n  overflow-y: visible;\n}\n.gn-settings_view_mobile .gn-settings__tabs .yc-tabs__item:first-child {\n  margin-left: 20px;\n}\n.gn-settings_view_mobile .gn-settings__tabs .yc-tabs__item:last-child {\n  margin-right: 20px;\n}\n.gn-settings_view_mobile .gn-settings__section-heading {\n  font-size: var(--g-text-subheader-3-font-size);\n  line-height: var(--g-text-subheader-3-line-height);\n  font-weight: var(--g-text-subheader-font-weight);\n}\n.gn-settings_view_mobile .gn-settings__section-subheader {\n  color: var(--g-color-text-secondary);\n}\n.gn-settings_view_mobile .gn-settings__section-heading + .gn-settings-subheader {\n  margin-top: 8px;\n}\n.gn-settings_view_mobile .gn-settings__section-item {\n  margin-top: 0;\n}\n.gn-settings_view_mobile .gn-settings__section-heading + .gn-settings__section-item, .gn-settings_view_mobile .gn-settings__section-subheader + .gn-settings__section-item {\n  margin-top: 30px;\n}\n.gn-settings_view_mobile .gn-settings__section-item + .gn-settings__section-item {\n  margin-top: 22px;\n}\n.gn-settings_view_mobile .gn-settings__item:not(.gn-settings_view_mobile .gn-settings__item_mode_row) {\n  grid-template-columns: 1fr;\n  gap: 8px;\n}\n.gn-settings_view_mobile .gn-settings__item-heading {\n  font-size: var(--g-text-body-2-font-size);\n  line-height: var(--g-text-body-2-line-height);\n  font-weight: var(--g-text-body-font-weight);\n}\n.gn-settings_view_mobile .gn-settings__item-description {\n  font-size: var(--g-text-body-1-font-size);\n  line-height: var(--g-text-body-1-line-height);\n  font-weight: var(--g-text-body-font-weight);\n}\n.gn-settings_view_mobile .gn-settings__item_mode_row {\n  grid-template-columns: 1fr auto;\n}\n.gn-settings_view_mobile .gn-settings__item_mode_row .gn-settings__item-heading {\n  padding-right: 20px;\n}\n.gn-settings_view_mobile .gn-settings__item-content {\n  width: 100%;\n}\n.gn-settings_view_mobile .gn-settings__not-found {\n  font-size: var(--g-text-body-2-font-size);\n  line-height: var(--g-text-body-2-line-height);\n  font-weight: var(--g-text-body-font-weight);\n  justify-items: start;\n  color: var(--g-color-text-hint);\n  margin: 20px 0 0 20px;\n}\n.gn-settings_loading {\n  grid-template-columns: auto;\n}\n.gn-settings__loader {\n  align-self: center;\n  justify-self: center;\n}\n.gn-settings__not-found {\n  display: grid;\n  align-items: center;\n  justify-items: center;\n  height: 100%;\n}\n.gn-settings__menu {\n  border-right: 1px solid var(--g-color-line-generic);\n}\n.gn-settings__heading {\n  font-size: var(--g-text-subheader-2-font-size);\n  line-height: var(--g-text-subheader-2-line-height);\n  font-weight: var(--g-text-subheader-font-weight);\n  margin: 20px 20px 0;\n}\n.gn-settings__search {\n  margin: 0 20px 16px;\n}\n.gn-settings__page {\n  overflow-y: auto;\n}\n.gn-settings__content {\n  padding: 20px;\n}\n.gn-settings__section-heading {\n  font-size: var(--g-text-subheader-2-font-size);\n  line-height: var(--g-text-subheader-2-line-height);\n  font-weight: var(--g-text-subheader-font-weight);\n  margin: 0;\n}\n.gn-settings__section-item {\n  margin-top: 24px;\n}\n.gn-settings__section + .gn-settings__section {\n  margin-top: 32px;\n}\n.gn-settings__item {\n  display: grid;\n  grid-template-columns: 216px 1fr;\n  justify-items: start;\n}\n.gn-settings__item_align_top {\n  align-items: start;\n}\n.gn-settings__item_align_center {\n  align-items: center;\n}\n.gn-settings__item-title_badge {\n  position: relative;\n}\n.gn-settings__item-title_badge::after {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--g-color-text-danger);\n  position: absolute;\n  right: -8px;\n  top: 1px;\n}\n.gn-settings__item-description {\n  font-size: var(--g-text-caption-2-font-size);\n  line-height: var(--g-text-caption-2-line-height);\n  font-weight: var(--g-text-caption-font-weight);\n  display: block;\n  margin-top: 2px;\n  padding-right: 20px;\n  color: var(--g-color-text-secondary);\n}\n.gn-settings__item-right-adornment_hidden {\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n.gn-settings__item:hover .gn-settings__item-right-adornment_hidden {\n  opacity: 1;\n}\n.gn-settings__found {\n  font-weight: var(--g-text-accent-font-weight);\n  background: var(--g-color-base-selection);\n}";
 styleInject(css_248z$6);
 
 const b$6 = block('settings');
@@ -5652,7 +5653,7 @@ function SettingsContent({ initialPage, initialSearch, children, renderNotFound,
     };
     return (React__default.createElement("div", { className: b$6({ view }) },
         isMobile ? (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), initialValue: initialSearch, onChange: setSearch, autoFocus: false, inputSize: 'l' }),
+            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), initialValue: initialSearch, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
             React__default.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b$6('tabs') }))) : (React__default.createElement("div", { className: b$6('menu'), onClick: () => {
                 if (searchInputRef.current) {
                     searchInputRef.current.focus();