@gravity-ui/navigation 0.18.1 → 0.20.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IconProps } from '@gravity-ui/uikit';
|
|
3
3
|
import './Settings.scss';
|
|
4
|
-
interface SettingsProps {
|
|
4
|
+
export interface SettingsProps {
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
title?: string;
|
|
7
7
|
filterPlaceholder?: string;
|
|
@@ -13,26 +13,28 @@ interface SettingsProps {
|
|
|
13
13
|
loading?: boolean;
|
|
14
14
|
view?: 'normal' | 'mobile';
|
|
15
15
|
onClose?: () => void;
|
|
16
|
+
renderRightAdornment?: (item: Pick<SettingsItemProps, 'title'>) => React.ReactNode;
|
|
17
|
+
showRightAdornmentOnHover?: boolean;
|
|
16
18
|
}
|
|
17
|
-
interface SettingsGroupProps {
|
|
19
|
+
export interface SettingsGroupProps {
|
|
18
20
|
id?: string;
|
|
19
21
|
groupTitle: string;
|
|
20
22
|
children: React.ReactNode;
|
|
21
23
|
}
|
|
22
|
-
interface SettingsPageProps {
|
|
24
|
+
export interface SettingsPageProps {
|
|
23
25
|
id?: string;
|
|
24
26
|
title: string;
|
|
25
27
|
icon?: IconProps;
|
|
26
28
|
children: React.ReactNode;
|
|
27
29
|
}
|
|
28
|
-
interface SettingsSectionProps {
|
|
30
|
+
export interface SettingsSectionProps {
|
|
29
31
|
title: string;
|
|
30
32
|
header?: React.ReactNode;
|
|
31
33
|
children: React.ReactNode;
|
|
32
34
|
withBadge?: boolean;
|
|
33
35
|
showTitle?: boolean;
|
|
34
36
|
}
|
|
35
|
-
interface SettingsItemProps {
|
|
37
|
+
export interface SettingsItemProps {
|
|
36
38
|
title: string;
|
|
37
39
|
renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
|
|
38
40
|
align?: 'top' | 'center';
|
|
@@ -41,11 +43,13 @@ interface SettingsItemProps {
|
|
|
41
43
|
mode?: 'row';
|
|
42
44
|
description?: string;
|
|
43
45
|
}
|
|
44
|
-
export
|
|
46
|
+
export interface SettingsContextType extends Pick<SettingsProps, 'renderRightAdornment' | 'showRightAdornmentOnHover'> {
|
|
47
|
+
}
|
|
48
|
+
export declare const useSettingsContext: () => SettingsContextType;
|
|
49
|
+
export declare function Settings({ loading, renderLoading, children, view, renderRightAdornment, showRightAdornmentOnHover, ...props }: SettingsProps): React.JSX.Element;
|
|
45
50
|
export declare namespace Settings {
|
|
46
51
|
var Group: ({ children }: SettingsGroupProps) => React.JSX.Element;
|
|
47
52
|
var Page: ({ children }: SettingsPageProps) => React.JSX.Element;
|
|
48
53
|
var Section: ({ children }: SettingsSectionProps) => React.JSX.Element;
|
|
49
54
|
var Item: ({ title, children, align, withBadge, renderTitleComponent, mode, description, }: SettingsItemProps) => React.JSX.Element;
|
|
50
55
|
}
|
|
51
|
-
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';
|
|
@@ -5337,16 +5337,19 @@ function getSettingsItemsFromChildren(children, filterRe) {
|
|
|
5337
5337
|
return { items, hidden };
|
|
5338
5338
|
}
|
|
5339
5339
|
|
|
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}";
|
|
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__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
5341
|
styleInject(css_248z$6);
|
|
5342
5342
|
|
|
5343
5343
|
const b$6 = block('settings');
|
|
5344
|
+
const SettingsContext = React__default.createContext({});
|
|
5345
|
+
const useSettingsContext = () => React__default.useContext(SettingsContext);
|
|
5344
5346
|
function Settings(_a) {
|
|
5345
|
-
var { loading, renderLoading, children, view = 'normal' } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view"]);
|
|
5347
|
+
var { loading, renderLoading, children, view = 'normal', renderRightAdornment, showRightAdornmentOnHover = true } = _a, props = __rest(_a, ["loading", "renderLoading", "children", "view", "renderRightAdornment", "showRightAdornmentOnHover"]);
|
|
5346
5348
|
if (loading) {
|
|
5347
5349
|
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
5350
|
}
|
|
5349
|
-
return (React__default.createElement(
|
|
5351
|
+
return (React__default.createElement(SettingsContext.Provider, { value: { renderRightAdornment, showRightAdornmentOnHover } },
|
|
5352
|
+
React__default.createElement(SettingsContent, Object.assign({ view: view }, props), children)));
|
|
5350
5353
|
}
|
|
5351
5354
|
const getPageTitleById = (menu, activePage) => {
|
|
5352
5355
|
for (const firstLevel of menu) {
|
|
@@ -5444,9 +5447,15 @@ Settings.Section = function SettingsSection({ children }) {
|
|
|
5444
5447
|
return React__default.createElement(React__default.Fragment, null, children);
|
|
5445
5448
|
};
|
|
5446
5449
|
Settings.Item = function SettingsItem({ title, children, align = 'center', withBadge, renderTitleComponent = identity_1, mode, description, }) {
|
|
5450
|
+
const { renderRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
|
|
5451
|
+
const titleNode = (React__default.createElement("span", { className: b$6('item-title', { badge: withBadge }) }, renderTitleComponent(title)));
|
|
5447
5452
|
return (React__default.createElement("div", { className: b$6('item', { align, mode }) },
|
|
5448
5453
|
React__default.createElement("label", { className: b$6('item-heading') },
|
|
5449
|
-
React__default.createElement(
|
|
5454
|
+
renderRightAdornment ? (React__default.createElement(Flex, { className: b$6('item-title-wrapper'), gap: 3 },
|
|
5455
|
+
titleNode,
|
|
5456
|
+
React__default.createElement("div", { className: b$6('item-right-adornment', {
|
|
5457
|
+
hidden: showRightAdornmentOnHover,
|
|
5458
|
+
}) }, renderRightAdornment({ title })))) : (titleNode),
|
|
5450
5459
|
description ? React__default.createElement("span", { className: b$6('item-description') }, description) : null),
|
|
5451
5460
|
React__default.createElement("div", { className: b$6('item-content') }, children)));
|
|
5452
5461
|
};
|
|
@@ -5737,5 +5746,5 @@ const FooterItem = ({ icon, iconSize = MOBILE_HEADER_ICON_SIZE, className, modal
|
|
|
5737
5746
|
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
5747
|
};
|
|
5739
5748
|
|
|
5740
|
-
export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, FooterItem as MobileHeaderFooterItem, Settings, Title, configure, useAsideHeaderContext };
|
|
5749
|
+
export { PublicActionBar as ActionBar, AsideHeader, AsideHeaderContextProvider, Drawer, DrawerItem, FooterItem$1 as FooterItem, HotkeysPanel, Lang, MobileHeader, FooterItem as MobileHeaderFooterItem, Settings, Title, configure, useAsideHeaderContext, useSettingsContext };
|
|
5741
5750
|
//# sourceMappingURL=index.js.map
|