@gravity-ui/navigation 0.23.0 → 0.23.2

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

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

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

@@ -3,11 +3,11 @@ import { PopupPlacement, PopupProps } from '@gravity-ui/uikit';
 import { MenuItem } from '../../types';
 import './Item.scss';
 interface ItemPopup {
-    popupVisible?: boolean;
-    popupAnchor?: React.RefObject<HTMLElement>;
-    popupPlacement?: PopupPlacement;
+    popupVisible?: PopupProps['open'];
+    popupAnchor?: PopupProps['anchorRef'];
+    popupPlacement?: PopupProps['placement'];
     popupOffset?: PopupProps['offset'];
-    popupKeepMounted?: boolean;
+    popupKeepMounted?: PopupProps['keepMounted'];
     renderPopupContent?: () => React.ReactNode;
     onClosePopup?: () => void;
 }

package/build/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { Component, createElement, useState, useMemo, useCallback, useEffect, useRef, useContext, Children, isValidElement, cloneElement } from 'react';
-import { Portal, Icon, Popup, List, Tooltip, Button, Flex, Text, useBodyScrollLock, Hotkey, TextInput, Tabs, Loader, Sheet, eventBroker } from '@gravity-ui/uikit';
+import { Portal, Icon, Popup, List, Tooltip, Button, Flex, Text, useBodyScrollLock, setRef, Hotkey, TextInput, Tabs, Loader, Sheet, eventBroker } from '@gravity-ui/uikit';
 import { withNaming } from '@bem-react/classname';
 import { Ellipsis, Pin, PinFill, Gear, Xmark } from '@gravity-ui/icons';
 import ReactDOM from 'react-dom';
@@ -5004,17 +5004,19 @@ 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]);
+    React__default.useEffect(() => {
+        setRef(ref, asideRef.current);
+    }, [ref]);
     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: popupAnchorRef }),
+            React__default.createElement("div", { className: b$m('aside-popup-anchor'), ref: asideRef }),
             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: popupAnchorRef,
+                    asideRef,
                 })),
                 React__default.createElement(CollapseButton, null))),
         React__default.createElement(Panels, null)));
@@ -5570,7 +5572,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');
@@ -5653,7 +5655,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();