@gravity-ui/navigation 6.2.0 → 6.3.1
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/README.md +4 -0
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.css +1 -1
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.js +1 -1
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.js.map +1 -1
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.module.scss.js +1 -1
- package/build/docs/INDEX.md +89 -0
- package/build/docs/components/ActionBar.md +152 -0
- package/build/docs/components/AsideHeader/components/AllPagesPanel.md +80 -0
- package/build/docs/components/AsideHeader.md +351 -0
- package/build/docs/components/Footer.md +114 -0
- package/build/docs/components/HotkeysPanel.md +46 -0
- package/build/docs/components/Logo.md +22 -0
- package/build/docs/components/MobileHeader.md +82 -0
- package/build/docs/components/Settings.md +113 -0
- package/build/docs/hooks/useOverflowingHorizontalListItems.md +16 -0
- package/build/esm/components/HotkeysPanel/HotkeysPanel.css +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.js +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.js.map +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.module.scss.js +1 -1
- package/package.json +4 -2
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# MobileHeader
|
|
2
|
+
|
|
3
|
+
Header for Mobile navigation. MobileHeader provides maintaining Panels except for Modals.
|
|
4
|
+
|
|
5
|
+
Includes auxiliary `MobileHeaderFooterItem` component.
|
|
6
|
+
|
|
7
|
+
## Properties
|
|
8
|
+
|
|
9
|
+
| Name | Description | Type |
|
|
10
|
+
| :-------------------- | :-------------------------------------------------------------- | :--------------------------------------------------------- |
|
|
11
|
+
| logo | Service logo properties | `LogoProps` |
|
|
12
|
+
| burgerMenu | Burger menu properties | `BurgerMenuProps` |
|
|
13
|
+
| overlapPanel | Overlap panel properties | `OverlapPanelProps` |
|
|
14
|
+
| burgerCloseTitle | Burger close button title (a11y) | `string` |
|
|
15
|
+
| burgerOpenTitle | Burger open button title (a11y) | `string` |
|
|
16
|
+
| panelItems | Custom panels rendered in the header | `PanelItemProps[]` |
|
|
17
|
+
| topAlert | Top alert properties | `TopAlertProps` |
|
|
18
|
+
| renderContent | Render function for the header content | `RenderContentType` |
|
|
19
|
+
| sideItemRenderContent | Render function for the side item content | `RenderContentType` |
|
|
20
|
+
| onEvent | Inner event handler — receives the item name and the event name | `(itemName: string, eventName: MobileHeaderEvent) => void` |
|
|
21
|
+
| onClosePanel | Close panel handler | `() => void` |
|
|
22
|
+
| className | Header class name | `string` |
|
|
23
|
+
| contentClassName | Header content class name | `string` |
|
|
24
|
+
|
|
25
|
+
### Usage
|
|
26
|
+
|
|
27
|
+
See storybook example `src/components/MobileHeader/__stories__/MobileHeaderShowcase`.
|
|
28
|
+
|
|
29
|
+
#### onEvent prop
|
|
30
|
+
|
|
31
|
+
[onEvent](https://github.com/gravity-ui/navigation/blob/32c6a6f58e0307745e92b041b3d96517e57589c1/src/components/MobileHeader/MobileHeader.tsx#L41) handles MobileHeader inner events.
|
|
32
|
+
|
|
33
|
+
**Custom events**
|
|
34
|
+
|
|
35
|
+
You can initiate the event via `CustomEvent`. Support values:
|
|
36
|
+
|
|
37
|
+
- `MOBILE_PANEL_TOGGLE`
|
|
38
|
+
- `MOBILE_PANEL_OPEN`
|
|
39
|
+
- `MOBILE_PANEL_CLOSE`
|
|
40
|
+
- `MOBILE_BURGER_OPEN`
|
|
41
|
+
- `MOBILE_BURGER_CLOSE`
|
|
42
|
+
|
|
43
|
+
Panel events in constant [MOBILE_HEADER_EVENT_NAMES](https://github.com/gravity-ui/navigation/blob/main/src/components/MobileHeader/constants.ts#L8-L12)
|
|
44
|
+
|
|
45
|
+
##### Examples
|
|
46
|
+
|
|
47
|
+
**Simple event, open burger**
|
|
48
|
+
|
|
49
|
+
```js
|
|
50
|
+
const customEvent = new CustomEvent('MOBILE_BURGER_OPEN');
|
|
51
|
+
const navRef = React.useRef < HTMLDivElement > null;
|
|
52
|
+
navRef?.current?.dispatchEvent(customEvent);
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
**Panel event, open custom panel**
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
import {getMobileHeaderCustomEvent, MOBILE_HEADER_EVENT_NAMES} from '@gravity-ui/navigation';
|
|
59
|
+
|
|
60
|
+
const customEvent = getMobileHeaderCustomEvent(MOBILE_HEADER_EVENT_NAMES.closeEvent, {
|
|
61
|
+
panelName: 'user',
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
const navRef = React.useRef < HTMLDivElement > null;
|
|
65
|
+
navRef?.current?.dispatchEvent(customEvent);
|
|
66
|
+
|
|
67
|
+
const customEvent2 = getMobileHeaderCustomEvent('MOBILE_PANEL_TOGGLE', {panelName: 'user'});
|
|
68
|
+
navRef?.current?.dispatchEvent(customEvent2);
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Available panelName
|
|
72
|
+
|
|
73
|
+
1. 'burger'
|
|
74
|
+
2. `id` of element [panelItems prop](https://github.com/gravity-ui/navigation/blob/main/src/components/MobileHeader/MobileHeader.tsx#L38C5-L38C15)
|
|
75
|
+
|
|
76
|
+
## MobileHeader vars
|
|
77
|
+
|
|
78
|
+
| Name | Description | Default |
|
|
79
|
+
| :--------------------------------- | :--------------------------------------------- | :-----: |
|
|
80
|
+
| z-indexes | | |
|
|
81
|
+
| `--gn-mobile-header-z-index` | Mobile header z-index | `100` |
|
|
82
|
+
| `--gn-mobile-header-panel-z-index` | Mobile header panel (Drawer component) z-index | `98` |
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
# Settings
|
|
2
|
+
|
|
3
|
+
The Settings component provides the layout for a settings panel with the following features.
|
|
4
|
+
|
|
5
|
+
- single-level and two-level grouping of items
|
|
6
|
+
- filtering of the panel's content by headers of items
|
|
7
|
+
- displaying of loading status and content
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
One-level settings example:
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
<Settings>
|
|
15
|
+
<Settings.Page title="Appearance">...</Settings.Page>
|
|
16
|
+
<Settings.Page title="Notifications">...</Settings.Page>
|
|
17
|
+
</Settings>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Two-level settings example:
|
|
21
|
+
_Note:_ `Settings` with `view=mobile` groups `Settings.Group` are ignored.
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
<Settings>
|
|
25
|
+
<Settings.Group groupTitle="My service">
|
|
26
|
+
<Settings.Page title="Appearance">...</Settings.Page>
|
|
27
|
+
<Settings.Page title="Notifications">...</Settings.Page>
|
|
28
|
+
</Settings.Group>
|
|
29
|
+
<Settings.Group groupTitle="General">
|
|
30
|
+
<Settings.Page title="Appearance">...</Settings.Page>
|
|
31
|
+
<Settings.Page title="Notifications">...</Settings.Page>
|
|
32
|
+
</Settings.Group>
|
|
33
|
+
</Settings>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Pages with sections example:
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
<Settings.Page title="Features" icon={'...'}>
|
|
40
|
+
<Settings.Section title="Common">
|
|
41
|
+
<Settings.Item title="Default VCS">...</Settings.Item>
|
|
42
|
+
<Settings.Item title="Search root">...</Settings.Item>
|
|
43
|
+
</Settings.Section>
|
|
44
|
+
<Settings.Section title="Beta functionality">...</Settings.Section>
|
|
45
|
+
</Settings.Page>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Properties
|
|
49
|
+
|
|
50
|
+
| Name | Description | Type | Default |
|
|
51
|
+
| :----------------------------- | :------------------------------------------------------------ | :--------------------------- | :----------------- |
|
|
52
|
+
| loading | Flag of loading status | `boolean` | |
|
|
53
|
+
| renderLoading | content for loading status | `() => React.ReactNode` | |
|
|
54
|
+
| renderNotFound | Empty panel content | `() => React.ReactNode` | |
|
|
55
|
+
| initialPage | Inititial page in `/groupId/pageId` format | `string` | |
|
|
56
|
+
| view | Change view for Mobile | `"normal"`, `"mobile"` | `"normal"` |
|
|
57
|
+
| onPageChange | Page change handler | `(newPage?: string) => void` | |
|
|
58
|
+
| onClose | Settings close handler | `() => void` | |
|
|
59
|
+
| title | Page title | `string` | 'Settings' |
|
|
60
|
+
| filterPlaceholder | Filter placeholder text | `string` | 'Search settings' |
|
|
61
|
+
| emptyPlaceholder | Filter empty text | `string` | 'No results found' |
|
|
62
|
+
| enableMobileSettingsTabsScroll | In mobile view tabs will overflow with scroll instead of wrap | `boolean` | |
|
|
63
|
+
|
|
64
|
+
## Settings.Group
|
|
65
|
+
|
|
66
|
+
Optional level for organizing related pages, e.g. "General" vs "Application specific".
|
|
67
|
+
|
|
68
|
+
### Properties
|
|
69
|
+
|
|
70
|
+
| Name | Description | Type | Default |
|
|
71
|
+
| :--------- | :----------------- | :------- | :------ |
|
|
72
|
+
| id | Unique id of group | `string` | |
|
|
73
|
+
| groupTitle | Header of group | `string` | |
|
|
74
|
+
|
|
75
|
+
## Settings.Page
|
|
76
|
+
|
|
77
|
+
Collection of related settings sections, e.g. "Appearance" in General group.
|
|
78
|
+
|
|
79
|
+
### Properties
|
|
80
|
+
|
|
81
|
+
| Name | Description | Type | Default |
|
|
82
|
+
| :---- | :--------------------------- | :------------------------------------------------------------------------------------------ | :------ |
|
|
83
|
+
| id | Unique id of page in a group | `string` | |
|
|
84
|
+
| title | Title of page | `string` | |
|
|
85
|
+
| icon | Properties of icon of page | [`IconProps`](https://github.com/gravity-ui/uikit/tree/main/src/components/Icon#properties) | |
|
|
86
|
+
|
|
87
|
+
## Settings.Section
|
|
88
|
+
|
|
89
|
+
Category of related settings, e.g. "Theme settings" in Appearance page.
|
|
90
|
+
|
|
91
|
+
### Properties
|
|
92
|
+
|
|
93
|
+
| Name | Description | Type | Default |
|
|
94
|
+
| :-------- | :---------------------------------------------------------------------------- | :---------------- | :------ |
|
|
95
|
+
| title | Title of section | `string` | |
|
|
96
|
+
| header | Header of section | `React.ReactNode` | |
|
|
97
|
+
| withBadge | Show badge on a section and menu | `boolean` | |
|
|
98
|
+
| hideTitle | Hide section title. Prop is needed to hide title in simple settings on Mobile | `boolean` | |
|
|
99
|
+
|
|
100
|
+
## Settings.Item
|
|
101
|
+
|
|
102
|
+
Individual setting with a title and control component.
|
|
103
|
+
⚠️ In case with only one `Settings.Item` in `Settings.Section` the title is not shown.
|
|
104
|
+
|
|
105
|
+
### Properties
|
|
106
|
+
|
|
107
|
+
| Name | Description | Type | Default |
|
|
108
|
+
| :------------------- | :--------------------------------------------------------- | :-------------------------------------------------------- | :--------- |
|
|
109
|
+
| title | Title of item | `string` | |
|
|
110
|
+
| renderTitleComponent | Cusomt header of | `(highlightedTitle?: React.ReactNode) => React.ReactNode` |
|
|
111
|
+
| align | Item alignment | `"top"`, `"center"` | `"center"` |
|
|
112
|
+
| mode | Layout for mobile. Title and control will be placed in row | `"row"` | |
|
|
113
|
+
| description | Description of item | `React.ReactNode` | |
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# useOverflowingHorizontalListItems
|
|
2
|
+
|
|
3
|
+
A hook for determining which horizontal list items stay visible and which collapse into an overflow "more" dropdown.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
import {useOverflowingHorizontalListItems} from '@gravity-ui/navigation';
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Properties
|
|
10
|
+
|
|
11
|
+
| Property | Type | Required | Default | Description |
|
|
12
|
+
| :-------------- | :----------------------- | :------: | :------ | :----------------------- |
|
|
13
|
+
| containerRef | `RefObject<HTMLElement>` | | | List container ref |
|
|
14
|
+
| items | `Array` | | | List items |
|
|
15
|
+
| itemSelector | `String` | | | List item selector |
|
|
16
|
+
| moreButtonWidth | `Number` | | | The width of more button |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.HotkeysPanel-module__gn-hotkeys-panel___Aab92{--hotkeys-panel-width:400px;--hotkeys-panel-vertical-padding:18px;--hotkeys-panel-horizontal-padding:var(--g-spacing-6);inset:0;position:fixed}.HotkeysPanel-module__gn-hotkeys-panel__drawer-item___T-3tZ{box-sizing:border-box;
|
|
1
|
+
.HotkeysPanel-module__gn-hotkeys-panel___Aab92{--hotkeys-panel-width:400px;--hotkeys-panel-vertical-padding:18px;--hotkeys-panel-horizontal-padding:var(--g-spacing-6);inset:0;position:fixed}.HotkeysPanel-module__gn-hotkeys-panel__drawer-item___T-3tZ{box-sizing:border-box;padding-top:var(--hotkeys-panel-vertical-padding);width:var(--hotkeys-panel-width)}.HotkeysPanel-module__gn-hotkeys-panel__drawer-content___P1nwO{display:flex;flex-direction:column;height:100%;min-height:0}.HotkeysPanel-module__gn-hotkeys-panel__title___dPviy{align-items:baseline;display:flex;gap:var(--g-spacing-2);justify-content:space-between;margin:0 var(--hotkeys-panel-horizontal-padding) var(--g-spacing-4) var(--hotkeys-panel-horizontal-padding)}.HotkeysPanel-module__gn-hotkeys-panel__search___olv3P{box-sizing:border-box;margin-bottom:var(--g-spacing-4);padding:0 var(--hotkeys-panel-horizontal-padding)}.HotkeysPanel-module__gn-hotkeys-panel__list___ToMip{flex:1;min-height:0;overflow-y:auto}.HotkeysPanel-module__gn-hotkeys-panel__list___ToMip:after{content:"";display:block;height:var(--hotkeys-panel-vertical-padding)}.HotkeysPanel-module__gn-hotkeys-panel__item___BKagb[class]{height:auto;margin:0 var(--hotkeys-panel-horizontal-padding);padding:var(--g-spacing-2) 0}.HotkeysPanel-module__gn-hotkeys-panel__item___BKagb[class].g-list__item_active, .HotkeysPanel-module__gn-hotkeys-panel__item___BKagb[class]:hover{background:inherit}.HotkeysPanel-module__gn-hotkeys-panel__item___BKagb[class]:not(:first-child):has(.HotkeysPanel-module__gn-hotkeys-panel__item-content_type_group___q8vt0){border-top:1px solid var(--g-color-line-generic);margin-top:var(--g-spacing-3);padding-top:var(--g-spacing-4)}.HotkeysPanel-module__gn-hotkeys-panel__item-content___Wqp2t{align-items:baseline;color:var(--g-color-text-primary);display:flex;justify-content:space-between;margin:0;width:100%}.HotkeysPanel-module__gn-hotkeys-panel__item-hint___QbgP4{margin-left:var(--g-spacing-1)}.HotkeysPanel-module__gn-hotkeys-panel__item-hint-tooltip___xdDtY{max-width:217px}.HotkeysPanel-module__gn-hotkeys-panel__hotkey___-LPxF{color:var(--g-color-text-complementary)}
|
|
@@ -23,7 +23,7 @@ function HotkeysPanel(_a) {
|
|
|
23
23
|
item.title,
|
|
24
24
|
item.hint && (React__default.createElement(HelpMark, { "aria-hidden": true, popoverProps: { className: b('item-hint-tooltip') }, className: b('item-hint') }, item.hint))),
|
|
25
25
|
item.value && (React__default.createElement(Hotkey, { className: b('hotkey'), value: item.value, platform: platform })))), [itemContentClassName, platform]);
|
|
26
|
-
const drawerItemContent = (React__default.createElement(
|
|
26
|
+
const drawerItemContent = (React__default.createElement("div", { className: b('drawer-content') },
|
|
27
27
|
React__default.createElement(Text, { variant: "subheader-3", as: 'h2', className: b('title', titleClassName) },
|
|
28
28
|
title,
|
|
29
29
|
togglePanelHotkey && React__default.createElement(Hotkey, { value: togglePanelHotkey, platform: platform })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HotkeysPanel.js","sources":["../../../../../src/components/HotkeysPanel/HotkeysPanel.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport type {ReactNode} from 'react';\n\nimport {Drawer, HelpMark, Hotkey, List, Text, TextInput} from '@gravity-ui/uikit';\nimport type {DrawerProps, HotkeyProps, ListProps} from '@gravity-ui/uikit';\n\nimport {useSafeAsideHeaderContext} from '../AsideHeader/AsideHeaderContext';\nimport {createBlock} from '../utils/cn';\n\nimport type {HotkeysGroup, HotkeysListItem} from './types';\nimport {filterHotkeys} from './utils/filterHotkeys';\nimport {flattenHotkeyGroups} from './utils/flattenHotkeyGroups';\n\nimport styles from './HotkeysPanel.module.scss';\n\nconst b = createBlock('hotkeys-panel', styles);\n\nexport type HotkeysPanelProps<T> = {\n hotkeys: HotkeysGroup<T>[];\n title?: ReactNode;\n togglePanelHotkey?: string;\n filterable?: boolean;\n filterPlaceholder?: string;\n emptyState?: ReactNode;\n open: boolean;\n onClose?: () => void;\n className?: string;\n drawerItemClassName?: string;\n filterClassName?: string;\n titleClassName?: string;\n itemContentClassName?: string;\n listClassName?: string;\n leftOffset?: number | string;\n topOffset?: number | string;\n style?: React.CSSProperties;\n platform?: HotkeyProps['platform'];\n drawerProps?: Omit<DrawerProps, 'style' | 'contentClassName' | 'open' | 'className'>;\n disableNavigationOffset?: boolean;\n} & Omit<\n ListProps<HotkeysListItem>,\n | 'items'\n | 'emptyPlaceholder'\n | 'className'\n | 'size'\n | 'renderItem'\n | 'filterable'\n | 'autoFocus'\n | 'filterPlaceholder'\n | 'filterClassName'\n | 'filter'\n | 'filterItem'\n | 'onFilterEnd'\n | 'onFilterUpdate'\n>;\n\nexport function HotkeysPanel<T = {}>({\n open,\n onClose,\n leftOffset,\n topOffset,\n className,\n drawerItemClassName,\n filterClassName,\n titleClassName,\n listClassName,\n itemContentClassName,\n hotkeys,\n itemClassName,\n filterable = true,\n filterPlaceholder,\n title,\n togglePanelHotkey,\n emptyState,\n platform,\n drawerProps,\n style: styleProp,\n disableNavigationOffset = false,\n ...listProps\n}: HotkeysPanelProps<T>) {\n const [filter, setFilter] = useState('');\n\n const {size} = useSafeAsideHeaderContext() ?? {size: 0};\n\n const hotkeysList = useMemo(() => {\n const filteredHotkeys = filterHotkeys(hotkeys, filter);\n return flattenHotkeyGroups(filteredHotkeys);\n }, [hotkeys, filter]);\n\n const renderItem = useCallback(\n (item: HotkeysListItem) => (\n <Text\n as={item.group ? ('h3' as const) : ('p' as const)}\n variant={item.group ? 'subheader-2' : 'body-1'}\n className={b(\n 'item-content',\n {type: item.group ? 'group' : 'item'},\n itemContentClassName,\n )}\n key={item.title}\n >\n <span>\n {item.title}\n {item.hint && (\n <HelpMark\n aria-hidden\n popoverProps={{className: b('item-hint-tooltip')}}\n className={b('item-hint')}\n >\n {item.hint}\n </HelpMark>\n )}\n </span>\n {item.value && (\n <Hotkey className={b('hotkey')} value={item.value} platform={platform} />\n )}\n </Text>\n ),\n [itemContentClassName, platform],\n );\n\n const drawerItemContent = (\n <
|
|
1
|
+
{"version":3,"file":"HotkeysPanel.js","sources":["../../../../../src/components/HotkeysPanel/HotkeysPanel.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport type {ReactNode} from 'react';\n\nimport {Drawer, HelpMark, Hotkey, List, Text, TextInput} from '@gravity-ui/uikit';\nimport type {DrawerProps, HotkeyProps, ListProps} from '@gravity-ui/uikit';\n\nimport {useSafeAsideHeaderContext} from '../AsideHeader/AsideHeaderContext';\nimport {createBlock} from '../utils/cn';\n\nimport type {HotkeysGroup, HotkeysListItem} from './types';\nimport {filterHotkeys} from './utils/filterHotkeys';\nimport {flattenHotkeyGroups} from './utils/flattenHotkeyGroups';\n\nimport styles from './HotkeysPanel.module.scss';\n\nconst b = createBlock('hotkeys-panel', styles);\n\nexport type HotkeysPanelProps<T> = {\n hotkeys: HotkeysGroup<T>[];\n title?: ReactNode;\n togglePanelHotkey?: string;\n filterable?: boolean;\n filterPlaceholder?: string;\n emptyState?: ReactNode;\n open: boolean;\n onClose?: () => void;\n className?: string;\n drawerItemClassName?: string;\n filterClassName?: string;\n titleClassName?: string;\n itemContentClassName?: string;\n listClassName?: string;\n leftOffset?: number | string;\n topOffset?: number | string;\n style?: React.CSSProperties;\n platform?: HotkeyProps['platform'];\n drawerProps?: Omit<DrawerProps, 'style' | 'contentClassName' | 'open' | 'className'>;\n disableNavigationOffset?: boolean;\n} & Omit<\n ListProps<HotkeysListItem>,\n | 'items'\n | 'emptyPlaceholder'\n | 'className'\n | 'size'\n | 'renderItem'\n | 'filterable'\n | 'autoFocus'\n | 'filterPlaceholder'\n | 'filterClassName'\n | 'filter'\n | 'filterItem'\n | 'onFilterEnd'\n | 'onFilterUpdate'\n>;\n\nexport function HotkeysPanel<T = {}>({\n open,\n onClose,\n leftOffset,\n topOffset,\n className,\n drawerItemClassName,\n filterClassName,\n titleClassName,\n listClassName,\n itemContentClassName,\n hotkeys,\n itemClassName,\n filterable = true,\n filterPlaceholder,\n title,\n togglePanelHotkey,\n emptyState,\n platform,\n drawerProps,\n style: styleProp,\n disableNavigationOffset = false,\n ...listProps\n}: HotkeysPanelProps<T>) {\n const [filter, setFilter] = useState('');\n\n const {size} = useSafeAsideHeaderContext() ?? {size: 0};\n\n const hotkeysList = useMemo(() => {\n const filteredHotkeys = filterHotkeys(hotkeys, filter);\n return flattenHotkeyGroups(filteredHotkeys);\n }, [hotkeys, filter]);\n\n const renderItem = useCallback(\n (item: HotkeysListItem) => (\n <Text\n as={item.group ? ('h3' as const) : ('p' as const)}\n variant={item.group ? 'subheader-2' : 'body-1'}\n className={b(\n 'item-content',\n {type: item.group ? 'group' : 'item'},\n itemContentClassName,\n )}\n key={item.title}\n >\n <span>\n {item.title}\n {item.hint && (\n <HelpMark\n aria-hidden\n popoverProps={{className: b('item-hint-tooltip')}}\n className={b('item-hint')}\n >\n {item.hint}\n </HelpMark>\n )}\n </span>\n {item.value && (\n <Hotkey className={b('hotkey')} value={item.value} platform={platform} />\n )}\n </Text>\n ),\n [itemContentClassName, platform],\n );\n\n const drawerItemContent = (\n <div className={b('drawer-content')}>\n <Text variant=\"subheader-3\" as={'h2' as const} className={b('title', titleClassName)}>\n {title}\n {togglePanelHotkey && <Hotkey value={togglePanelHotkey} platform={platform} />}\n </Text>\n {filterable && (\n <TextInput\n value={filter}\n onUpdate={setFilter}\n placeholder={filterPlaceholder}\n autoFocus\n className={b('search', filterClassName)}\n hasClear\n />\n )}\n <List<HotkeysListItem>\n className={b('list', listClassName)}\n virtualized={false}\n filterable={false}\n items={hotkeysList}\n renderItem={renderItem}\n itemClassName={b('item', itemClassName)}\n emptyPlaceholder={emptyState}\n {...listProps}\n />\n </div>\n );\n\n const onOpenChange = useCallback(\n (newOpen: boolean) => {\n if (!newOpen) {\n onClose?.();\n }\n\n drawerProps?.onOpenChange?.(newOpen);\n },\n [drawerProps, onClose],\n );\n\n const style = useMemo<React.CSSProperties>(\n () => ({\n position: 'fixed',\n left: disableNavigationOffset ? undefined : size,\n ...styleProp,\n ...(leftOffset !== undefined && {left: leftOffset}),\n ...(topOffset !== undefined && {top: topOffset}),\n }),\n [disableNavigationOffset, styleProp, leftOffset, size, topOffset],\n );\n\n return (\n <Drawer\n className={b(null, className)}\n open={open}\n onOpenChange={onOpenChange}\n style={style}\n contentClassName={b('drawer-item', drawerItemClassName)}\n {...drawerProps}\n >\n {drawerItemContent}\n </Drawer>\n );\n}\n"],"names":["React"],"mappings":";;;;;;;;;AAeA,MAAM,CAAC,GAAG,WAAW,CAAC,eAAe,EAAE,MAAM,CAAC;AAwCxC,SAAU,YAAY,CAAS,EAuBd,EAAA;;QAvBc,EACjC,IAAI,EACJ,OAAO,EACP,UAAU,EACV,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,OAAO,EACP,aAAa,EACb,UAAU,GAAG,IAAI,EACjB,iBAAiB,EACjB,KAAK,EACL,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,KAAK,EAAE,SAAS,EAChB,uBAAuB,GAAG,KAAK,OAEZ,EADhB,SAAS,GAtBqB,MAAA,CAAA,EAAA,EAAA,CAAA,MAAA,EAAA,SAAA,EAAA,YAAA,EAAA,WAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,SAAA,EAAA,eAAA,EAAA,YAAA,EAAA,mBAAA,EAAA,OAAA,EAAA,mBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,OAAA,EAAA,yBAAA,CAuBpC,CADe;IAEZ,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;AAExC,IAAA,MAAM,EAAC,IAAI,EAAC,GAAG,CAAA,EAAA,GAAA,yBAAyB,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,EAAC,IAAI,EAAE,CAAC,EAAC;AAEvD,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;QAC7B,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC;AACtD,QAAA,OAAO,mBAAmB,CAAC,eAAe,CAAC;AAC/C,KAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAErB,IAAA,MAAM,UAAU,GAAG,WAAW,CAC1B,CAAC,IAAqB,MAClBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,EAAE,EAAE,IAAI,CAAC,KAAK,GAAI,IAAc,GAAI,GAAa,EACjD,OAAO,EAAE,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,QAAQ,EAC9C,SAAS,EAAE,CAAC,CACR,cAAc,EACd,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,MAAM,EAAC,EACrC,oBAAoB,CACvB,EACD,GAAG,EAAE,IAAI,CAAC,KAAK,EAAA;AAEf,QAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACK,YAAA,IAAI,CAAC,KAAK;AACV,YAAA,IAAI,CAAC,IAAI,KACNA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAEL,EAAA,aAAA,EAAA,IAAA,EAAA,YAAY,EAAE,EAAC,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAAC,EACjD,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAA,EAExB,IAAI,CAAC,IAAI,CACH,CACd,CACE;AACN,QAAA,IAAI,CAAC,KAAK,KACPA,6BAAC,MAAM,EAAA,EAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC5E,CACE,CACV,EACD,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CACnC;IAED,MAAM,iBAAiB,IACnBA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAA;AAC/B,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAC,EAAE,EAAE,IAAa,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,cAAc,CAAC,EAAA;YAC/E,KAAK;AACL,YAAA,iBAAiB,IAAIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAA,CAAI,CAC3E;AACN,QAAA,UAAU,KACPA,cAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAA,IAAA,EACT,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,eAAe,CAAC,EACvC,QAAQ,SACV,CACL;QACDA,cAAC,CAAA,aAAA,CAAA,IAAI,kBACD,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,aAAa,CAAC,EACnC,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,WAAW,EAClB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,CAAC,CAAC,MAAM,EAAE,aAAa,CAAC,EACvC,gBAAgB,EAAE,UAAU,EAAA,EACxB,SAAS,CACf,CAAA,CACA,CACT;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,OAAgB,KAAI;;QACjB,IAAI,CAAC,OAAO,EAAE;AACV,YAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,EAAI;;QAGf,CAAA,EAAA,GAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,SAAA,GAAA,SAAA,GAAA,WAAW,CAAE,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,WAAA,EAAG,OAAO,CAAC;AACxC,KAAC,EACD,CAAC,WAAW,EAAE,OAAO,CAAC,CACzB;AAED,IAAA,MAAM,KAAK,GAAG,OAAO,CACjB,OAAM,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACF,QAAQ,EAAE,OAAO,EACjB,IAAI,EAAE,uBAAuB,GAAG,SAAS,GAAG,IAAI,EAAA,EAC7C,SAAS,CAAA,GACR,UAAU,KAAK,SAAS,IAAI,EAAC,IAAI,EAAE,UAAU,EAAC,EAC/C,GAAC,SAAS,KAAK,SAAS,IAAI,EAAC,GAAG,EAAE,SAAS,EAAC,EAAC,CAClD,EACF,CAAC,uBAAuB,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CACpE;AAED,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,MAAM,EACH,MAAA,CAAA,MAAA,CAAA,EAAA,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,CAAC,CAAC,aAAa,EAAE,mBAAmB,CAAC,EACnD,EAAA,WAAW,GAEd,iBAAiB,CACb;AAEjB;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var styles = {"gn-hotkeys-panel":"HotkeysPanel-module__gn-hotkeys-panel___Aab92","gnHotkeysPanel":"HotkeysPanel-module__gn-hotkeys-panel___Aab92","gn-hotkeys-panel__drawer-item":"HotkeysPanel-module__gn-hotkeys-panel__drawer-item___T-3tZ","gnHotkeysPanelDrawerItem":"HotkeysPanel-module__gn-hotkeys-panel__drawer-item___T-3tZ","gn-hotkeys-panel__title":"HotkeysPanel-module__gn-hotkeys-panel__title___dPviy","gnHotkeysPanelTitle":"HotkeysPanel-module__gn-hotkeys-panel__title___dPviy","gn-hotkeys-panel__search":"HotkeysPanel-module__gn-hotkeys-panel__search___olv3P","gnHotkeysPanelSearch":"HotkeysPanel-module__gn-hotkeys-panel__search___olv3P","gn-hotkeys-panel__list":"HotkeysPanel-module__gn-hotkeys-panel__list___ToMip","gnHotkeysPanelList":"HotkeysPanel-module__gn-hotkeys-panel__list___ToMip","gn-hotkeys-panel__item":"HotkeysPanel-module__gn-hotkeys-panel__item___BKagb","gnHotkeysPanelItem":"HotkeysPanel-module__gn-hotkeys-panel__item___BKagb","gn-hotkeys-panel__item-content_type_group":"HotkeysPanel-module__gn-hotkeys-panel__item-content_type_group___q8vt0","gnHotkeysPanelItemContentTypeGroup":"HotkeysPanel-module__gn-hotkeys-panel__item-content_type_group___q8vt0","gn-hotkeys-panel__item-content":"HotkeysPanel-module__gn-hotkeys-panel__item-content___Wqp2t","gnHotkeysPanelItemContent":"HotkeysPanel-module__gn-hotkeys-panel__item-content___Wqp2t","gn-hotkeys-panel__item-hint":"HotkeysPanel-module__gn-hotkeys-panel__item-hint___QbgP4","gnHotkeysPanelItemHint":"HotkeysPanel-module__gn-hotkeys-panel__item-hint___QbgP4","gn-hotkeys-panel__item-hint-tooltip":"HotkeysPanel-module__gn-hotkeys-panel__item-hint-tooltip___xdDtY","gnHotkeysPanelItemHintTooltip":"HotkeysPanel-module__gn-hotkeys-panel__item-hint-tooltip___xdDtY","gn-hotkeys-panel__hotkey":"HotkeysPanel-module__gn-hotkeys-panel__hotkey___-LPxF","gnHotkeysPanelHotkey":"HotkeysPanel-module__gn-hotkeys-panel__hotkey___-LPxF"};
|
|
1
|
+
var styles = {"gn-hotkeys-panel":"HotkeysPanel-module__gn-hotkeys-panel___Aab92","gnHotkeysPanel":"HotkeysPanel-module__gn-hotkeys-panel___Aab92","gn-hotkeys-panel__drawer-item":"HotkeysPanel-module__gn-hotkeys-panel__drawer-item___T-3tZ","gnHotkeysPanelDrawerItem":"HotkeysPanel-module__gn-hotkeys-panel__drawer-item___T-3tZ","gn-hotkeys-panel__drawer-content":"HotkeysPanel-module__gn-hotkeys-panel__drawer-content___P1nwO","gnHotkeysPanelDrawerContent":"HotkeysPanel-module__gn-hotkeys-panel__drawer-content___P1nwO","gn-hotkeys-panel__title":"HotkeysPanel-module__gn-hotkeys-panel__title___dPviy","gnHotkeysPanelTitle":"HotkeysPanel-module__gn-hotkeys-panel__title___dPviy","gn-hotkeys-panel__search":"HotkeysPanel-module__gn-hotkeys-panel__search___olv3P","gnHotkeysPanelSearch":"HotkeysPanel-module__gn-hotkeys-panel__search___olv3P","gn-hotkeys-panel__list":"HotkeysPanel-module__gn-hotkeys-panel__list___ToMip","gnHotkeysPanelList":"HotkeysPanel-module__gn-hotkeys-panel__list___ToMip","gn-hotkeys-panel__item":"HotkeysPanel-module__gn-hotkeys-panel__item___BKagb","gnHotkeysPanelItem":"HotkeysPanel-module__gn-hotkeys-panel__item___BKagb","gn-hotkeys-panel__item-content_type_group":"HotkeysPanel-module__gn-hotkeys-panel__item-content_type_group___q8vt0","gnHotkeysPanelItemContentTypeGroup":"HotkeysPanel-module__gn-hotkeys-panel__item-content_type_group___q8vt0","gn-hotkeys-panel__item-content":"HotkeysPanel-module__gn-hotkeys-panel__item-content___Wqp2t","gnHotkeysPanelItemContent":"HotkeysPanel-module__gn-hotkeys-panel__item-content___Wqp2t","gn-hotkeys-panel__item-hint":"HotkeysPanel-module__gn-hotkeys-panel__item-hint___QbgP4","gnHotkeysPanelItemHint":"HotkeysPanel-module__gn-hotkeys-panel__item-hint___QbgP4","gn-hotkeys-panel__item-hint-tooltip":"HotkeysPanel-module__gn-hotkeys-panel__item-hint-tooltip___xdDtY","gnHotkeysPanelItemHintTooltip":"HotkeysPanel-module__gn-hotkeys-panel__item-hint-tooltip___xdDtY","gn-hotkeys-panel__hotkey":"HotkeysPanel-module__gn-hotkeys-panel__hotkey___-LPxF","gnHotkeysPanelHotkey":"HotkeysPanel-module__gn-hotkeys-panel__hotkey___-LPxF"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
4
4
|
//# sourceMappingURL=HotkeysPanel.module.scss.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/navigation",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.1",
|
|
4
4
|
"description": "Gravity UI Navigation components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
"test": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js --passWithNoTests",
|
|
33
33
|
"test-storybook": "test-storybook --url ${PR_PREVIEW_URL:-http://localhost:7008}",
|
|
34
34
|
"build": "rimraf build && rollup -c",
|
|
35
|
+
"build:docs": "node scripts/build-docs.js",
|
|
35
36
|
"lint:js": "eslint src --ext .js,.jsx,.ts,.tsx",
|
|
36
37
|
"lint:styles": "stylelint '{styles,src}/**/*.scss'",
|
|
37
38
|
"lint:prettier": "prettier --check '**/*.md'",
|
|
@@ -39,7 +40,7 @@
|
|
|
39
40
|
"packages:check": "knip",
|
|
40
41
|
"build-storybook": "storybook build",
|
|
41
42
|
"start": "cross-env TS_NODE_PROJECT=.storybook/tsconfig.json storybook dev -p 7008",
|
|
42
|
-
"prepublishOnly": "npm run build",
|
|
43
|
+
"prepublishOnly": "npm run build && npm run build:docs",
|
|
43
44
|
"playwright:install": "playwright install --with-deps",
|
|
44
45
|
"playwright": "playwright test --config=playwright/playwright.config.ts",
|
|
45
46
|
"playwright:update": "npm run playwright -- -u",
|
|
@@ -67,6 +68,7 @@
|
|
|
67
68
|
"@commitlint/config-conventional": "^19.6.0",
|
|
68
69
|
"@doc-tools/transform": "^3.11.0",
|
|
69
70
|
"@gravity-ui/eslint-config": "^3.3.0",
|
|
71
|
+
"@gravity-ui/gulp-utils": "^1.1.1",
|
|
70
72
|
"@gravity-ui/icons": "^2.8.1",
|
|
71
73
|
"@gravity-ui/prettier-config": "^1.0.0",
|
|
72
74
|
"@gravity-ui/stylelint-config": "^4.0.1",
|