@gravity-ui/navigation 0.18.1 → 0.20.0

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconProps } from '@gravity-ui/uikit';
 import './Settings.scss';
-interface SettingsProps {
+export interface SettingsProps {
     children: React.ReactNode;
     title?: string;
     filterPlaceholder?: string;
@@ -13,26 +13,28 @@ interface SettingsProps {
     loading?: boolean;
     view?: 'normal' | 'mobile';
     onClose?: () => void;
+    renderRightAdornment?: (item: Pick<SettingsItemProps, 'title'>) => React.ReactNode;
+    showRightAdornmentOnHover?: boolean;
 }
-interface SettingsGroupProps {
+export interface SettingsGroupProps {
     id?: string;
     groupTitle: string;
     children: React.ReactNode;
 }
-interface SettingsPageProps {
+export interface SettingsPageProps {
     id?: string;
     title: string;
     icon?: IconProps;
     children: React.ReactNode;
 }
-interface SettingsSectionProps {
+export interface SettingsSectionProps {
     title: string;
     header?: React.ReactNode;
     children: React.ReactNode;
     withBadge?: boolean;
     showTitle?: boolean;
 }
-interface SettingsItemProps {
+export interface SettingsItemProps {
     title: string;
     renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
     align?: 'top' | 'center';
@@ -41,11 +43,13 @@ 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;
     var Section: ({ children }: SettingsSectionProps) => React.JSX.Element;
     var Item: ({ title, children, align, withBadge, renderTitleComponent, mode, description, }: SettingsItemProps) => React.JSX.Element;
 }
-export {};

package/build/cjs/index.js

@@ -5364,16 +5364,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["default"].createContext({});
+const useSettingsContext = () => React__default["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["default"].createElement("div", { className: b$6({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React__default["default"].createElement(uikit.Loader, { className: b$6('loader'), size: "m" }))));
     }
-    return (React__default["default"].createElement(SettingsContent, Object.assign({ view: view }, props), children));
+    return (React__default["default"].createElement(SettingsContext.Provider, { value: { renderRightAdornment, showRightAdornmentOnHover } },
+        React__default["default"].createElement(SettingsContent, Object.assign({ view: view }, props), children)));
 }
 const getPageTitleById = (menu, activePage) => {
     for (const firstLevel of menu) {
@@ -5471,9 +5474,15 @@ Settings.Section = function SettingsSection({ children }) {
     return React__default["default"].createElement(React__default["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["default"].createElement("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(title)));
     return (React__default["default"].createElement("div", { className: b$6('item', { align, mode }) },
         React__default["default"].createElement("label", { className: b$6('item-heading') },
-            React__default["default"].createElement("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(title)),
+            renderRightAdornment ? (React__default["default"].createElement(uikit.Flex, { className: b$6('item-title-wrapper'), gap: 3 },
+                titleNode,
+                React__default["default"].createElement("div", { className: b$6('item-right-adornment', {
+                        hidden: showRightAdornmentOnHover,
+                    }) }, renderRightAdornment({ title })))) : (titleNode),
             description ? React__default["default"].createElement("span", { className: b$6('item-description') }, description) : null),
         React__default["default"].createElement("div", { className: b$6('item-content') }, children)));
 };
@@ -5777,4 +5786,5 @@ exports.Settings = Settings;
 exports.Title = Title;
 exports.configure = configure;
 exports.useAsideHeaderContext = useAsideHeaderContext;
+exports.useSettingsContext = useSettingsContext;
 //# sourceMappingURL=index.js.map