@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.
@@ -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 declare function Settings({ loading, renderLoading, children, view, ...props }: SettingsProps): React.JSX.Element;
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 {};
@@ -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 onChangeStable = useStableCallback(onChange);
5092
- const handleUpdate = React__default.useCallback(debounce_1(onChangeStable, debounce), [debounce]);
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(SettingsContent, Object.assign({ view: view }, props), children));
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), { title: search && title
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("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(title)),
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