@gravity-ui/navigation 0.19.0 → 0.21.0

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

@@ -7,12 +7,15 @@ export interface SettingsProps {
     filterPlaceholder?: string;
     emptyPlaceholder?: string;
     initialPage?: string;
+    initialSearch?: string;
     onPageChange?: (page: string | undefined) => void;
     renderNotFound?: () => React.ReactNode;
     renderLoading?: () => React.ReactNode;
     loading?: boolean;
     view?: 'normal' | 'mobile';
     onClose?: () => void;
+    renderRightAdornment?: (item: Pick<SettingsItemProps, 'title'>) => React.ReactNode;
+    showRightAdornmentOnHover?: boolean;
 }
 export interface SettingsGroupProps {
     id?: string;
@@ -34,6 +37,7 @@ export interface SettingsSectionProps {
 }
 export interface SettingsItemProps {
     title: string;
+    highlightedTitle?: React.ReactNode | null;
     renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
     align?: 'top' | 'center';
     children: React.ReactNode;
@@ -41,10 +45,13 @@ 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;
     var Section: ({ children }: SettingsSectionProps) => React.JSX.Element;
-    var Item: ({ title, children, align, withBadge, renderTitleComponent, mode, description, }: SettingsItemProps) => React.JSX.Element;
+    var Item: ({ title, highlightedTitle, children, align, withBadge, renderTitleComponent, mode, description, }: SettingsItemProps) => React.JSX.Element;
 }

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { TextInputSize } from '@gravity-ui/uikit';
 interface SettingsSearchProps {
     className?: string;
+    initialValue?: string;
     onChange: (search: string) => void;
     debounce?: number;
     inputRef?: React.Ref<HTMLInputElement>;
@@ -9,5 +10,5 @@ interface SettingsSearchProps {
     placeholder?: string;
     autoFocus?: boolean;
 }
-export declare function SettingsSearch({ className, onChange, debounce, inputRef, inputSize, placeholder, autoFocus, }: SettingsSearchProps): React.JSX.Element;
+export declare function SettingsSearch({ className, initialValue, onChange, debounce, inputRef, inputSize, placeholder, autoFocus, }: SettingsSearchProps): React.JSX.Element;
 export {};

package/build/cjs/index.js

@@ -5114,11 +5114,15 @@ function escapeStringForRegExp(input) {
 }
 
 const b$9 = block('settings-search');
-function SettingsSearch({ className, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
-    const onChangeStable = useStableCallback(onChange);
-    const handleUpdate = React__default["default"].useCallback(debounce_1(onChangeStable, debounce), [debounce]);
+function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
+    const [value, setValue] = React__default["default"].useState(initialValue !== null && initialValue !== void 0 ? initialValue : '');
+    const onChangeDebounced = useStableCallback(debounce_1(onChange, debounce));
+    const handleUpdate = useStableCallback((updated) => {
+        setValue(updated);
+        onChangeDebounced(updated);
+    });
     return (React__default["default"].createElement("div", { className: b$9(null, className) },
-        React__default["default"].createElement(uikit.TextInput, { controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
+        React__default["default"].createElement(uikit.TextInput, { value: value, controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
 }
 
 var css_248z$8 = ".gn-settings-menu__group-heading {\n  font-weight: var(--g-text-accent-font-weight);\n  display: inline-block;\n  padding: 0 20px;\n  margin-bottom: 12px;\n  line-height: 18px;\n}\n.gn-settings-menu__group + .gn-settings-menu__group {\n  margin-top: 24px;\n}\n.gn-settings-menu__item {\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 20px;\n  cursor: pointer;\n  color: var(--g-color-text-primary);\n}\n.gn-settings-menu__item-icon {\n  color: var(--g-color-text-misc);\n  margin-right: 5px;\n}\n.gn-settings-menu__item:hover, .gn-settings-menu__item_focused {\n  background: var(--g-color-base-simple-hover);\n}\n.gn-settings-menu__item_selected {\n  background: var(--g-color-base-selection);\n}\n.gn-settings-menu__item_selected:hover, .gn-settings-menu__item_selected.gn-settings-menu__item_focused {\n  background: var(--g-color-base-selection-hover);\n}\n.gn-settings-menu__item_disabled {\n  color: var(--g-color-text-secondary);\n  cursor: auto;\n}\n.gn-settings-menu__item_disabled:hover {\n  background: none;\n}\n.gn-settings-menu__item_disabled .gn-settings-menu__item-icon {\n  color: var(--g-color-base-misc-heavy);\n}\n.gn-settings-menu__item_badge {\n  position: relative;\n}\n.gn-settings-menu__item_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: 9px;\n  top: calc(50% - 3px);\n}";
@@ -5364,16 +5368,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) {
@@ -5387,9 +5394,9 @@ const getPageTitleById = (menu, activePage) => {
     }
     return '';
 };
-function SettingsContent({ initialPage, children, renderNotFound, title = i18n$1('label_title'), filterPlaceholder = i18n$1('label_filter-placeholder'), emptyPlaceholder = i18n$1('label_empty-placeholder'), view, onPageChange, onClose, }) {
+function SettingsContent({ initialPage, initialSearch, children, renderNotFound, title = i18n$1('label_title'), filterPlaceholder = i18n$1('label_filter-placeholder'), emptyPlaceholder = i18n$1('label_empty-placeholder'), view, onPageChange, onClose, }) {
     var _a, _b;
-    const [search, setSearch] = React__default["default"].useState('');
+    const [search, setSearch] = React__default["default"].useState(initialSearch !== null && initialSearch !== void 0 ? initialSearch : '');
     const { menu, pages } = getSettingsFromChildren(children, search);
     const pageKeys = Object.keys(pages);
     const [selectedPage, setCurrentPage] = React__default["default"].useState(initialPage && pageKeys.includes(initialPage) ? initialPage : undefined);
@@ -5438,13 +5445,13 @@ function SettingsContent({ initialPage, children, renderNotFound, title = i18n$1
                 section.showTitle && (React__default["default"].createElement("h3", { className: b$6('section-heading') }, section.title)),
                 section.header &&
                     (isMobile ? (React__default["default"].createElement("div", { className: b$6('section-subheader') }, section.header)) : (section.header)),
-                section.items.map(({ hidden, title, element }) => hidden ? null : (React__default["default"].createElement("div", { key: title, className: b$6('section-item') }, React__default["default"].cloneElement(element, Object.assign(Object.assign({}, element.props), { title: search && title
+                section.items.map(({ hidden, title, element }) => hidden ? null : (React__default["default"].createElement("div", { key: title, className: b$6('section-item') }, React__default["default"].cloneElement(element, Object.assign(Object.assign({}, element.props), { highlightedTitle: search && title
                         ? prepareTitle(title, search)
                         : title })))))))))));
     };
     return (React__default["default"].createElement("div", { className: b$6({ view }) },
         isMobile ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, autoFocus: false, inputSize: 'l' }),
+            React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), initialValue: initialSearch, onChange: setSearch, autoFocus: false, inputSize: 'l' }),
             React__default["default"].createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b$6('tabs') }))) : (React__default["default"].createElement("div", { className: b$6('menu'), onClick: () => {
                 if (searchInputRef.current) {
                     searchInputRef.current.focus();
@@ -5457,7 +5464,7 @@ function SettingsContent({ initialPage, children, renderNotFound, title = i18n$1
                 }
             } },
             React__default["default"].createElement(Title, null, title),
-            React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
+            React__default["default"].createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), initialValue: initialSearch, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
             React__default["default"].createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
         React__default["default"].createElement("div", { className: b$6('page') }, renderPageContent())));
 }
@@ -5470,10 +5477,16 @@ Settings.Page = function SettingsPage({ children }) {
 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, }) {
+Settings.Item = function SettingsItem({ title, highlightedTitle, 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(highlightedTitle)));
     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 +5790,5 @@ exports.Settings = Settings;
 exports.Title = Title;
 exports.configure = configure;
 exports.useAsideHeaderContext = useAsideHeaderContext;
+exports.useSettingsContext = useSettingsContext;
 //# sourceMappingURL=index.js.map