@gravity-ui/navigation 0.20.0 → 0.21.1

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

@@ -7,6 +7,7 @@ export interface SettingsProps {
     filterPlaceholder?: string;
     emptyPlaceholder?: string;
     initialPage?: string;
+    initialSearch?: string;
     onPageChange?: (page: string | undefined) => void;
     renderNotFound?: () => React.ReactNode;
     renderLoading?: () => React.ReactNode;
@@ -36,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;
@@ -51,5 +53,5 @@ 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/esm/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/esm/index.js

@@ -1177,29 +1177,30 @@ const Item$1 = (props) => {
             React__default.createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$n('btn-icon') }, iconEl))) : (iconEl);
     };
     const makeNode = ({ icon: iconEl, title: titleEl }) => {
-        const createdNode = (React__default.createElement("div", { className: b$n({ type, current, compact }, className), ref: ref, onClick: (event) => {
-                if (collapsedItem) {
-                    /**
-                     * If we call onItemClick for collapsedItem then:
-                     * - User get unexpected item in onItemClick callback
-                     * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
-                     */
-                    toggleOpen(!open);
-                }
-                else {
-                    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
-                }
-            }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
-                if (!compact) {
-                    onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
-                }
-            }, onMouseLeave: () => {
-                if (!compact) {
-                    onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
-                }
-            } },
-            React__default.createElement("div", { className: b$n('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
-            React__default.createElement("div", { className: b$n('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
+        const createdNode = (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: b$n({ type, current, compact }, className), ref: ref, onClick: (event) => {
+                    if (collapsedItem) {
+                        /**
+                         * If we call onItemClick for collapsedItem then:
+                         * - User get unexpected item in onItemClick callback
+                         * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
+                         */
+                        toggleOpen(!open);
+                    }
+                    else {
+                        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
+                    }
+                }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
+                    if (!compact) {
+                        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
+                    }
+                }, onMouseLeave: () => {
+                    if (!compact) {
+                        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+                    }
+                } },
+                React__default.createElement("div", { className: b$n('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
+                React__default.createElement("div", { className: b$n('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)),
             renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default.createElement(Popup, { contentClassName: b$n('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
         return item.link ? (React__default.createElement("a", { href: item.link, className: b$n('link') }, createdNode)) : (createdNode);
     };
@@ -5087,11 +5088,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.useCallback(debounce_1(onChangeStable, debounce), [debounce]);
+function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
+    const [value, setValue] = React__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.createElement("div", { className: b$9(null, className) },
-        React__default.createElement(TextInput, { controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
+        React__default.createElement(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}";
@@ -5363,9 +5368,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.useState('');
+    const [search, setSearch] = React__default.useState(initialSearch !== null && initialSearch !== void 0 ? initialSearch : '');
     const { menu, pages } = getSettingsFromChildren(children, search);
     const pageKeys = Object.keys(pages);
     const [selectedPage, setCurrentPage] = React__default.useState(initialPage && pageKeys.includes(initialPage) ? initialPage : undefined);
@@ -5414,13 +5419,13 @@ function SettingsContent({ initialPage, children, renderNotFound, title = i18n$1
                 section.showTitle && (React__default.createElement("h3", { className: b$6('section-heading') }, section.title)),
                 section.header &&
                     (isMobile ? (React__default.createElement("div", { className: b$6('section-subheader') }, section.header)) : (section.header)),
-                section.items.map(({ hidden, title, element }) => hidden ? null : (React__default.createElement("div", { key: title, className: b$6('section-item') }, React__default.cloneElement(element, Object.assign(Object.assign({}, element.props), { title: search && title
+                section.items.map(({ hidden, title, element }) => hidden ? null : (React__default.createElement("div", { key: title, className: b$6('section-item') }, React__default.cloneElement(element, Object.assign(Object.assign({}, element.props), { highlightedTitle: search && title
                         ? prepareTitle(title, search)
                         : title })))))))))));
     };
     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'), onChange: setSearch, autoFocus: false, inputSize: 'l' }),
+            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), initialValue: initialSearch, onChange: setSearch, autoFocus: false, inputSize: 'l' }),
             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();
@@ -5433,7 +5438,7 @@ function SettingsContent({ initialPage, children, renderNotFound, title = i18n$1
                 }
             } },
             React__default.createElement(Title, null, title),
-            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
+            React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), initialValue: initialSearch, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
             React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
         React__default.createElement("div", { className: b$6('page') }, renderPageContent())));
 }
@@ -5446,9 +5451,9 @@ Settings.Page = function SettingsPage({ children }) {
 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, }) {
+Settings.Item = function SettingsItem({ title, highlightedTitle, 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)));
+    const titleNode = (React__default.createElement("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(highlightedTitle)));
     return (React__default.createElement("div", { className: b$6('item', { align, mode }) },
         React__default.createElement("label", { className: b$6('item-heading') },
             renderRightAdornment ? (React__default.createElement(Flex, { className: b$6('item-title-wrapper'), gap: 3 },