@gravity-ui/navigation 0.19.0 → 0.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/Settings/Settings.d.ts +9 -2
- package/build/cjs/components/Settings/SettingsSearch/SettingsSearch.d.ts +2 -1
- package/build/cjs/index.js +28 -14
- package/build/cjs/index.js.map +1 -1
- package/build/esm/components/Settings/Settings.d.ts +9 -2
- package/build/esm/components/Settings/SettingsSearch/SettingsSearch.d.ts +2 -1
- package/build/esm/index.js +29 -16
- package/build/esm/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,12 +7,15 @@ export interface SettingsProps {
|
|
|
7
7
|
filterPlaceholder?: string;
|
|
8
8
|
emptyPlaceholder?: string;
|
|
9
9
|
initialPage?: string;
|
|
10
|
+
initialSearch?: string;
|
|
10
11
|
onPageChange?: (page: string | undefined) => void;
|
|
11
12
|
renderNotFound?: () => React.ReactNode;
|
|
12
13
|
renderLoading?: () => React.ReactNode;
|
|
13
14
|
loading?: boolean;
|
|
14
15
|
view?: 'normal' | 'mobile';
|
|
15
16
|
onClose?: () => void;
|
|
17
|
+
renderRightAdornment?: (item: Pick<SettingsItemProps, 'title'>) => React.ReactNode;
|
|
18
|
+
showRightAdornmentOnHover?: boolean;
|
|
16
19
|
}
|
|
17
20
|
export interface SettingsGroupProps {
|
|
18
21
|
id?: string;
|
|
@@ -34,6 +37,7 @@ export interface SettingsSectionProps {
|
|
|
34
37
|
}
|
|
35
38
|
export interface SettingsItemProps {
|
|
36
39
|
title: string;
|
|
40
|
+
highlightedTitle?: React.ReactNode | null;
|
|
37
41
|
renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
|
|
38
42
|
align?: 'top' | 'center';
|
|
39
43
|
children: React.ReactNode;
|
|
@@ -41,10 +45,13 @@ export interface SettingsItemProps {
|
|
|
41
45
|
mode?: 'row';
|
|
42
46
|
description?: string;
|
|
43
47
|
}
|
|
44
|
-
export
|
|
48
|
+
export interface SettingsContextType extends Pick<SettingsProps, 'renderRightAdornment' | 'showRightAdornmentOnHover'> {
|
|
49
|
+
}
|
|
50
|
+
export declare const useSettingsContext: () => SettingsContextType;
|
|
51
|
+
export declare function Settings({ loading, renderLoading, children, view, renderRightAdornment, showRightAdornmentOnHover, ...props }: SettingsProps): React.JSX.Element;
|
|
45
52
|
export declare namespace Settings {
|
|
46
53
|
var Group: ({ children }: SettingsGroupProps) => React.JSX.Element;
|
|
47
54
|
var Page: ({ children }: SettingsPageProps) => React.JSX.Element;
|
|
48
55
|
var Section: ({ children }: SettingsSectionProps) => React.JSX.Element;
|
|
49
|
-
var Item: ({ title, children, align, withBadge, renderTitleComponent, mode, description, }: SettingsItemProps) => React.JSX.Element;
|
|
56
|
+
var Item: ({ title, highlightedTitle, children, align, withBadge, renderTitleComponent, mode, description, }: SettingsItemProps) => React.JSX.Element;
|
|
50
57
|
}
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { TextInputSize } from '@gravity-ui/uikit';
|
|
3
3
|
interface SettingsSearchProps {
|
|
4
4
|
className?: string;
|
|
5
|
+
initialValue?: string;
|
|
5
6
|
onChange: (search: string) => void;
|
|
6
7
|
debounce?: number;
|
|
7
8
|
inputRef?: React.Ref<HTMLInputElement>;
|
|
@@ -9,5 +10,5 @@ interface SettingsSearchProps {
|
|
|
9
10
|
placeholder?: string;
|
|
10
11
|
autoFocus?: boolean;
|
|
11
12
|
}
|
|
12
|
-
export declare function SettingsSearch({ className, onChange, debounce, inputRef, inputSize, placeholder, autoFocus, }: SettingsSearchProps): React.JSX.Element;
|
|
13
|
+
export declare function SettingsSearch({ className, initialValue, onChange, debounce, inputRef, inputSize, placeholder, autoFocus, }: SettingsSearchProps): React.JSX.Element;
|
|
13
14
|
export {};
|
package/build/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { Component, createElement, useState, useCallback, useEffect, useRef, useContext, Children, isValidElement, cloneElement, useMemo } from 'react';
|
|
3
|
-
import { Portal, Icon, Popup, List, Tooltip, Button, useBodyScrollLock, Text, Hotkey, TextInput, Tabs, Loader, Sheet, eventBroker } from '@gravity-ui/uikit';
|
|
3
|
+
import { Portal, Icon, Popup, List, Tooltip, Button, useBodyScrollLock, Text, Hotkey, TextInput, Tabs, Loader, Flex, Sheet, eventBroker } from '@gravity-ui/uikit';
|
|
4
4
|
import { withNaming } from '@bem-react/classname';
|
|
5
5
|
import { Ellipsis, Xmark } from '@gravity-ui/icons';
|
|
6
6
|
import ReactDOM from 'react-dom';
|
|
@@ -5087,11 +5087,15 @@ function escapeStringForRegExp(input) {
|
|
|
5087
5087
|
}
|
|
5088
5088
|
|
|
5089
5089
|
const b$9 = block('settings-search');
|
|
5090
|
-
function SettingsSearch({ className, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
|
|
5091
|
-
const
|
|
5092
|
-
const
|
|
5090
|
+
function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
|
|
5091
|
+
const [value, setValue] = React__default.useState(initialValue !== null && initialValue !== void 0 ? initialValue : '');
|
|
5092
|
+
const onChangeDebounced = useStableCallback(debounce_1(onChange, debounce));
|
|
5093
|
+
const handleUpdate = useStableCallback((updated) => {
|
|
5094
|
+
setValue(updated);
|
|
5095
|
+
onChangeDebounced(updated);
|
|
5096
|
+
});
|
|
5093
5097
|
return (React__default.createElement("div", { className: b$9(null, className) },
|
|
5094
|
-
React__default.createElement(TextInput, { controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
|
|
5098
|
+
React__default.createElement(TextInput, { value: value, controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate })));
|
|
5095
5099
|
}
|
|
5096
5100
|
|
|
5097
5101
|
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}";
|
|
@@ -5337,16 +5341,19 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5337
5341
|
return { items, hidden };
|
|
5338
5342
|
}
|
|
5339
5343
|
|
|
5340
|
-
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}";
|
|
5344
|
+
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}";
|
|
5341
5345
|
styleInject(css_248z$6);
|
|
5342
5346
|
|
|
5343
5347
|
const b$6 = block('settings');
|
|
5348
|
+
const SettingsContext = React__default.createContext({});
|
|
5349
|
+
const useSettingsContext = () => React__default.useContext(SettingsContext);
|
|
5344
5350
|
function Settings(_a) {
|
|
5345
|
-
var { loading, renderLoading, children, view = 'normal' } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view"]);
|
|
5351
|
+
var { loading, renderLoading, children, view = 'normal', renderRightAdornment, showRightAdornmentOnHover = true } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view", "renderRightAdornment", "showRightAdornmentOnHover"]);
|
|
5346
5352
|
if (loading) {
|
|
5347
5353
|
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" }))));
|
|
5348
5354
|
}
|
|
5349
|
-
return (React__default.createElement(
|
|
5355
|
+
return (React__default.createElement(SettingsContext.Provider, { value: { renderRightAdornment, showRightAdornmentOnHover } },
|
|
5356
|
+
React__default.createElement(SettingsContent, Object.assign({ view: view }, props), children)));
|
|
5350
5357
|
}
|
|
5351
5358
|
const getPageTitleById = (menu, activePage) => {
|
|
5352
5359
|
for (const firstLevel of menu) {
|
|
@@ -5360,9 +5367,9 @@ const getPageTitleById = (menu, activePage) => {
|
|
|
5360
5367
|
}
|
|
5361
5368
|
return '';
|
|
5362
5369
|
};
|
|
5363
|
-
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, }) {
|
|
5370
|
+
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, }) {
|
|
5364
5371
|
var _a, _b;
|
|
5365
|
-
const [search, setSearch] = React__default.useState('');
|
|
5372
|
+
const [search, setSearch] = React__default.useState(initialSearch !== null && initialSearch !== void 0 ? initialSearch : '');
|
|
5366
5373
|
const { menu, pages } = getSettingsFromChildren(children, search);
|
|
5367
5374
|
const pageKeys = Object.keys(pages);
|
|
5368
5375
|
const [selectedPage, setCurrentPage] = React__default.useState(initialPage && pageKeys.includes(initialPage) ? initialPage : undefined);
|
|
@@ -5411,13 +5418,13 @@ function SettingsContent({ initialPage, children, renderNotFound, title = i18n$1
|
|
|
5411
5418
|
section.showTitle && (React__default.createElement("h3", { className: b$6('section-heading') }, section.title)),
|
|
5412
5419
|
section.header &&
|
|
5413
5420
|
(isMobile ? (React__default.createElement("div", { className: b$6('section-subheader') }, section.header)) : (section.header)),
|
|
5414
|
-
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), {
|
|
5421
|
+
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
|
|
5415
5422
|
? prepareTitle(title, search)
|
|
5416
5423
|
: title })))))))))));
|
|
5417
5424
|
};
|
|
5418
5425
|
return (React__default.createElement("div", { className: b$6({ view }) },
|
|
5419
5426
|
isMobile ? (React__default.createElement(React__default.Fragment, null,
|
|
5420
|
-
React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, autoFocus: false, inputSize: 'l' }),
|
|
5427
|
+
React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), initialValue: initialSearch, onChange: setSearch, autoFocus: false, inputSize: 'l' }),
|
|
5421
5428
|
React__default.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b$6('tabs') }))) : (React__default.createElement("div", { className: b$6('menu'), onClick: () => {
|
|
5422
5429
|
if (searchInputRef.current) {
|
|
5423
5430
|
searchInputRef.current.focus();
|
|
@@ -5430,7 +5437,7 @@ function SettingsContent({ initialPage, children, renderNotFound, title = i18n$1
|
|
|
5430
5437
|
}
|
|
5431
5438
|
} },
|
|
5432
5439
|
React__default.createElement(Title, null, title),
|
|
5433
|
-
React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
|
|
5440
|
+
React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$6('search'), initialValue: initialSearch, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
|
|
5434
5441
|
React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
|
|
5435
5442
|
React__default.createElement("div", { className: b$6('page') }, renderPageContent())));
|
|
5436
5443
|
}
|
|
@@ -5443,10 +5450,16 @@ Settings.Page = function SettingsPage({ children }) {
|
|
|
5443
5450
|
Settings.Section = function SettingsSection({ children }) {
|
|
5444
5451
|
return React__default.createElement(React__default.Fragment, null, children);
|
|
5445
5452
|
};
|
|
5446
|
-
Settings.Item = function SettingsItem({ title, children, align = 'center', withBadge, renderTitleComponent = identity_1, mode, description, }) {
|
|
5453
|
+
Settings.Item = function SettingsItem({ title, highlightedTitle, children, align = 'center', withBadge, renderTitleComponent = identity_1, mode, description, }) {
|
|
5454
|
+
const { renderRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
|
|
5455
|
+
const titleNode = (React__default.createElement("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(highlightedTitle)));
|
|
5447
5456
|
return (React__default.createElement("div", { className: b$6('item', { align, mode }) },
|
|
5448
5457
|
React__default.createElement("label", { className: b$6('item-heading') },
|
|
5449
|
-
React__default.createElement(
|
|
5458
|
+
renderRightAdornment ? (React__default.createElement(Flex, { className: b$6('item-title-wrapper'), gap: 3 },
|
|
5459
|
+
titleNode,
|
|
5460
|
+
React__default.createElement("div", { className: b$6('item-right-adornment', {
|
|
5461
|
+
hidden: showRightAdornmentOnHover,
|
|
5462
|
+
}) }, renderRightAdornment({ title })))) : (titleNode),
|
|
5450
5463
|
description ? React__default.createElement("span", { className: b$6('item-description') }, description) : null),
|
|
5451
5464
|
React__default.createElement("div", { className: b$6('item-content') }, children)));
|
|
5452
5465
|
};
|
|
@@ -5737,5 +5750,5 @@ const FooterItem = ({ icon, iconSize = MOBILE_HEADER_ICON_SIZE, className, modal
|
|
|
5737
5750
|
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))));
|
|
5738
5751
|
};
|
|
5739
5752
|
|
|
5740
|
-
export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, FooterItem as MobileHeaderFooterItem, Settings, Title, configure, useAsideHeaderContext };
|
|
5753
|
+
export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, FooterItem as MobileHeaderFooterItem, Settings, Title, configure, useAsideHeaderContext, useSettingsContext };
|
|
5741
5754
|
//# sourceMappingURL=index.js.map
|