@gravity-ui/navigation 0.19.0 → 0.20.0

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

@@ -13,6 +13,8 @@ export interface SettingsProps {
     loading?: boolean;
     view?: 'normal' | 'mobile';
     onClose?: () => void;
+    renderRightAdornment?: (item: Pick<SettingsItemProps, 'title'>) => React.ReactNode;
+    showRightAdornmentOnHover?: boolean;
 }
 export interface SettingsGroupProps {
     id?: string;
@@ -41,7 +43,10 @@ export interface SettingsItemProps {
     mode?: 'row';
     description?: string;
 }
-export declare function Settings({ loading, renderLoading, children, view, ...props }: SettingsProps): React.JSX.Element;
+export interface SettingsContextType extends Pick<SettingsProps, 'renderRightAdornment' | 'showRightAdornmentOnHover'> {
+}
+export declare const useSettingsContext: () => SettingsContextType;
+export declare function Settings({ loading, renderLoading, children, view, renderRightAdornment, showRightAdornmentOnHover, ...props }: SettingsProps): React.JSX.Element;
 export declare namespace Settings {
     var Group: ({ children }: SettingsGroupProps) => React.JSX.Element;
     var Page: ({ children }: SettingsPageProps) => React.JSX.Element;

package/build/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { Component, createElement, useState, useCallback, useEffect, useRef, useContext, Children, isValidElement, cloneElement, useMemo } from 'react';
-import { Portal, Icon, Popup, List, Tooltip, Button, useBodyScrollLock, Text, Hotkey, TextInput, Tabs, Loader, Sheet, eventBroker } from '@gravity-ui/uikit';
+import { Portal, Icon, Popup, List, Tooltip, Button, useBodyScrollLock, Text, Hotkey, TextInput, Tabs, Loader, Flex, Sheet, eventBroker } from '@gravity-ui/uikit';
 import { withNaming } from '@bem-react/classname';
 import { Ellipsis, Xmark } from '@gravity-ui/icons';
 import ReactDOM from 'react-dom';
@@ -5337,16 +5337,19 @@ 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__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_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');
+const SettingsContext = React__default.createContext({});
+const useSettingsContext = () => React__default.useContext(SettingsContext);
 function Settings(_a) {
-    var { loading, renderLoading, children, view = 'normal' } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view"]);
+    var { loading, renderLoading, children, view = 'normal', renderRightAdornment, showRightAdornmentOnHover = true } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view", "renderRightAdornment", "showRightAdornmentOnHover"]);
     if (loading) {
         return (React__default.createElement("div", { className: b$6({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default.createElement(Loader, { className: b$6('loader'), size: "m" }))));
     }
-    return (React__default.createElement(SettingsContent, Object.assign({ view: view }, props), children));
+    return (React__default.createElement(SettingsContext.Provider, { value: { renderRightAdornment, showRightAdornmentOnHover } },
+        React__default.createElement(SettingsContent, Object.assign({ view: view }, props), children)));
 }
 const getPageTitleById = (menu, activePage) => {
     for (const firstLevel of menu) {
@@ -5444,9 +5447,15 @@ Settings.Section = function SettingsSection({ children }) {
     return React__default.createElement(React__default.Fragment, null, children);
 };
 Settings.Item = function SettingsItem({ title, children, align = 'center', withBadge, renderTitleComponent = identity_1, mode, description, }) {
+    const { renderRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
+    const titleNode = (React__default.createElement("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(title)));
     return (React__default.createElement("div", { className: b$6('item', { align, mode }) },
         React__default.createElement("label", { className: b$6('item-heading') },
-            React__default.createElement("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(title)),
+            renderRightAdornment ? (React__default.createElement(Flex, { className: b$6('item-title-wrapper'), gap: 3 },
+                titleNode,
+                React__default.createElement("div", { className: b$6('item-right-adornment', {
+                        hidden: showRightAdornmentOnHover,
+                    }) }, renderRightAdornment({ title })))) : (titleNode),
             description ? React__default.createElement("span", { className: b$6('item-description') }, description) : null),
         React__default.createElement("div", { className: b$6('item-content') }, children)));
 };
@@ -5737,5 +5746,5 @@ const FooterItem = ({ icon, iconSize = MOBILE_HEADER_ICON_SIZE, className, modal
         React__default.createElement(Sheet, { id: modalItem.id, title: modalItem.title, visible: modalItem.visible, className: b('modal', modalItem.className), contentClassName: b('modal-content', modalItem.contentClassName), allowHideOnContentScroll: modalItem.modalAllowHideOnContentScroll, onClose: modalItem.onClose }, (_a = modalItem.renderContent) === null || _a === void 0 ? void 0 : _a.call(modalItem))));
 };
 
-export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, FooterItem as MobileHeaderFooterItem, Settings, Title, configure, useAsideHeaderContext };
+export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, FooterItem as MobileHeaderFooterItem, Settings, Title, configure, useAsideHeaderContext, useSettingsContext };
 //# sourceMappingURL=index.js.map