@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
package/README.md
CHANGED
|
@@ -114,3 +114,7 @@ Application-shell navigation components for Gravity UI apps — the collapsible
|
|
|
114
114
|
- **Peer dependencies are required.** `@gravity-ui/uikit`, `@gravity-ui/icons`, and `@bem-react/classname` must be installed alongside `react`/`react-dom`.
|
|
115
115
|
- **Needs uikit setup.** Render inside `ThemeProvider` and import `@gravity-ui/uikit/styles/styles.css`, or the shell renders unstyled.
|
|
116
116
|
- **Page content goes through `renderContent`.** Render your routed content via the `renderContent` prop / `PageLayout`, not as `children`.
|
|
117
|
+
|
|
118
|
+
## Documentation for AI agents
|
|
119
|
+
|
|
120
|
+
Agent-readable documentation for the installed version is located in `node_modules/@gravity-ui/navigation/build/docs/INDEX.md`.
|
|
@@ -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)}
|
|
@@ -25,7 +25,7 @@ function HotkeysPanel(_a) {
|
|
|
25
25
|
item.title,
|
|
26
26
|
item.hint && (React.createElement(uikit.HelpMark, { "aria-hidden": true, popoverProps: { className: b('item-hint-tooltip') }, className: b('item-hint') }, item.hint))),
|
|
27
27
|
item.value && (React.createElement(uikit.Hotkey, { className: b('hotkey'), value: item.value, platform: platform })))), [itemContentClassName, platform]);
|
|
28
|
-
const drawerItemContent = (React.createElement(
|
|
28
|
+
const drawerItemContent = (React.createElement("div", { className: b('drawer-content') },
|
|
29
29
|
React.createElement(uikit.Text, { variant: "subheader-3", as: 'h2', className: b('title', titleClassName) },
|
|
30
30
|
title,
|
|
31
31
|
togglePanelHotkey && React.createElement(uikit.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":["createBlock","styles","__rest","useState","useSafeAsideHeaderContext","useMemo","filterHotkeys","flattenHotkeyGroups","useCallback","Text","HelpMark","Hotkey","TextInput","List","Drawer"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
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"};
|
|
5
|
+
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"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=HotkeysPanel.module.scss.js.map
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# @gravity-ui/navigation documentation
|
|
2
|
+
|
|
3
|
+
Documentation for the **installed** version of `@gravity-ui/navigation`.
|
|
4
|
+
Your training data may be outdated — these files are the source of truth.
|
|
5
|
+
|
|
6
|
+
Paths are relative to this file (`node_modules/@gravity-ui/navigation/build/docs/`).
|
|
7
|
+
|
|
8
|
+
## For AI agents
|
|
9
|
+
|
|
10
|
+
Application-shell navigation components for Gravity UI apps — the collapsible `AsideHeader` sidebar plus footers, drawers, logo, hotkeys and settings panels that frame a whole page.
|
|
11
|
+
|
|
12
|
+
### When to use
|
|
13
|
+
|
|
14
|
+
- The app's primary navigation frame: `AsideHeader` (collapsible side navigation) with `menuItems`, subheader, and footer sections.
|
|
15
|
+
- Supporting shell UI: `Drawer`/`DrawerItem`, `Footer`/`MobileFooter`, `MobileHeader`, `HotkeysPanel`, `Settings`, `ActionBar`, `Logo`.
|
|
16
|
+
- Laying out page content inside the navigation frame via `renderContent` / `PageLayout`.
|
|
17
|
+
|
|
18
|
+
### When not to use
|
|
19
|
+
|
|
20
|
+
- Generic in-page controls (buttons, tabs, menus, breadcrumbs) — use [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit); this package is the outer app chrome, not general components.
|
|
21
|
+
- Rendering the page body itself from config — use [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor).
|
|
22
|
+
- Client-side routing — this provides the navigation UI only; wire clicks to your own router.
|
|
23
|
+
|
|
24
|
+
### Common pitfalls
|
|
25
|
+
|
|
26
|
+
- **`AsideHeader` is controlled.** You must own the collapsed state with `compact` and update it in `onChangeCompact`; passing `compact` without the handler freezes the sidebar.
|
|
27
|
+
- **Menu items are `menuItems`, keyed by `id`.** Each item is `{id, title, icon, current, onItemClick}`; `icon` takes an icon component (e.g. from `@gravity-ui/icons`), not a string name.
|
|
28
|
+
- **Peer dependencies are required.** `@gravity-ui/uikit`, `@gravity-ui/icons`, and `@bem-react/classname` must be installed alongside `react`/`react-dom`.
|
|
29
|
+
- **Needs uikit setup.** Render inside `ThemeProvider` and import `@gravity-ui/uikit/styles/styles.css`, or the shell renders unstyled.
|
|
30
|
+
- **Page content goes through `renderContent`.** Render your routed content via the `renderContent` prop / `PageLayout`, not as `children`.
|
|
31
|
+
|
|
32
|
+
## Install
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install @gravity-ui/navigation
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Ensure that peer dependencies are installed in your project
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/classname@^1.6.0 react@^19.0.0 react-dom@^19.0.0
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Usage
|
|
45
|
+
|
|
46
|
+
Render `AsideHeader` as the app shell. It is a controlled component — you own the collapsed state via `compact`/`onChangeCompact` — and your page content goes through `renderContent`. Set up `@gravity-ui/uikit` styles and `ThemeProvider` first (see the [uikit styles guide](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)).
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import React from 'react';
|
|
50
|
+
import {AsideHeader} from '@gravity-ui/navigation';
|
|
51
|
+
import {Gear, House} from '@gravity-ui/icons';
|
|
52
|
+
import {ThemeProvider} from '@gravity-ui/uikit';
|
|
53
|
+
|
|
54
|
+
import '@gravity-ui/uikit/styles/styles.css';
|
|
55
|
+
|
|
56
|
+
export function App() {
|
|
57
|
+
const [compact, setCompact] = React.useState(false);
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<ThemeProvider theme="light">
|
|
61
|
+
<AsideHeader
|
|
62
|
+
logo={{text: 'My App', href: '/'}}
|
|
63
|
+
compact={compact}
|
|
64
|
+
onChangeCompact={setCompact}
|
|
65
|
+
menuItems={[
|
|
66
|
+
{id: 'home', title: 'Home', icon: House, current: true},
|
|
67
|
+
{id: 'settings', title: 'Settings', icon: Gear},
|
|
68
|
+
]}
|
|
69
|
+
renderContent={() => <main>Page content</main>}
|
|
70
|
+
/>
|
|
71
|
+
</ThemeProvider>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Components
|
|
77
|
+
|
|
78
|
+
- [ActionBar](./components/ActionBar.md) — The component is a flexible horizontal bar that provides a standardized layout for arranging navigation elements, actions, and informational content within an application. It serves as a container for organizing UI elements like breadcrumbs, buttons, and dropdown menus into defined sections and groups.
|
|
79
|
+
- [AsideHeader](./components/AsideHeader.md) — AsideHeader is provided a flexible and customizable navigation experience within your application. Users can easily customize the appearance of the sidebar to match their branding colors also to add personalized links, icons that cater specifically to their application's functionality.
|
|
80
|
+
- [AsideHeader/components/AllPagesPanel](./components/AsideHeader/components/AllPagesPanel.md) — A navigation panel for managing and organizing application pages in the middle (menuItems) section of AsideHeader component. Panel provides drag-and-drop reordering, visibility toggles, pin/unpin and category grouping of menu items.
|
|
81
|
+
- [Footer](./components/Footer.md) — The page footer components. Use Footer for the desktop version and MobileFooter for the mobile version. Both components have the same properties.
|
|
82
|
+
- [HotkeysPanel](./components/HotkeysPanel.md) — A navigation panel for hotkeys documentation. The panel displays a set of hotkeys for your application with a description of their purpose.
|
|
83
|
+
- [Logo](./components/Logo.md) — Logo icon is wrapped in UIKit Button, text is wrapped in HTML tag a or div, when passing hasWrapper prop.
|
|
84
|
+
- [MobileHeader](./components/MobileHeader.md) — Header for Mobile navigation. MobileHeader provides maintaining Panels except for Modals.
|
|
85
|
+
- [Settings](./components/Settings.md) — The Settings component provides the layout for a settings panel with the following features.
|
|
86
|
+
|
|
87
|
+
## Hooks
|
|
88
|
+
|
|
89
|
+
- [useOverflowingHorizontalListItems](./hooks/useOverflowingHorizontalListItems.md) — A hook for determining which horizontal list items stay visible and which collapse into an overflow "more" dropdown.
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
# ActionBar
|
|
2
|
+
|
|
3
|
+
The component is a flexible horizontal bar that provides a standardized layout for arranging navigation elements, actions, and informational content within an application. It serves as a container for organizing UI elements like breadcrumbs, buttons, and dropdown menus into defined sections and groups.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```typescript jsx
|
|
8
|
+
import {Button} from '@gravity-ui/uikit';
|
|
9
|
+
import {Breadcrumbs as LegacyBreadcrumbs} from '@gravity-ui/uikit/legacy';
|
|
10
|
+
import {ActionBar} from '@gravity-ui/navigation';
|
|
11
|
+
|
|
12
|
+
function Page() {
|
|
13
|
+
return (
|
|
14
|
+
<ActionBar aria-label="Actions bar">
|
|
15
|
+
<ActionBar.Section>
|
|
16
|
+
<ActionBar.Group>
|
|
17
|
+
<ActionBar.Item>
|
|
18
|
+
<LegacyBreadcrumbs
|
|
19
|
+
lastDisplayedItemsCount={1}
|
|
20
|
+
firstDisplayedItemsCount={1}
|
|
21
|
+
items={[{text: 'Root Item', action() {}}]}
|
|
22
|
+
/>
|
|
23
|
+
</ActionBar.Item>
|
|
24
|
+
</ActionBar.Group>
|
|
25
|
+
|
|
26
|
+
<ActionBar.Group pull="right">
|
|
27
|
+
<ActionBar.Item>
|
|
28
|
+
<Button>Do something</Button>
|
|
29
|
+
</ActionBar.Item>
|
|
30
|
+
</ActionBar.Group>
|
|
31
|
+
</ActionBar.Section>
|
|
32
|
+
</ActionBar>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
The `ActionBar` provides several nested components that work together to create a structured layout: `ActionBar.Section`, `ActionBar.Group`, `ActionBar.Item`, `ActionBar.Separator`.
|
|
38
|
+
|
|
39
|
+
## Properties
|
|
40
|
+
|
|
41
|
+
| Name | Description | Type | Default |
|
|
42
|
+
| :--------- | :----------------------------------------- | :-------------------: | :-----: |
|
|
43
|
+
| aria-label | HTML `aria-label` attribute | `string` | |
|
|
44
|
+
| className | HTML `class` attribute | `string` | |
|
|
45
|
+
| style | HTML `style` attribute | `React.CSSProperties` | |
|
|
46
|
+
| qa | `data-qa` HTML attribute, used for testing | `string` | |
|
|
47
|
+
|
|
48
|
+
## ActionBar.Section
|
|
49
|
+
|
|
50
|
+
Decorative component to visually separate different kinds of navigation.
|
|
51
|
+
There is two kinds of sections presented — `primary` and `secondary`. We recommend an app to have at least `primary`
|
|
52
|
+
section. `secondary` could be used for app specific controls, that should be accented with smaller paddings and
|
|
53
|
+
horizontal separator from `primary` section.
|
|
54
|
+
|
|
55
|
+
### Properties
|
|
56
|
+
|
|
57
|
+
| Name | Description | Type | Default |
|
|
58
|
+
| :-------- | :----------------------------------------------- | :------------------------: | :---------: |
|
|
59
|
+
| type | Type specifies the visual styling of the section | `"primary"`, `"secondary"` | `"primary"` |
|
|
60
|
+
| className | HTML `class` attribute | `string` | |
|
|
61
|
+
| style | HTML `style` attribute | `React.CSSProperties` | |
|
|
62
|
+
| qa | `data-qa` HTML attribute, used for testing | `string` | |
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import {Button} from '@gravity-ui/uikit';
|
|
66
|
+
import {Breadcrumbs as LegacyBreadcrumbs} from '@gravity-ui/uikit/legacy';
|
|
67
|
+
import {ActionBar} from '@gravity-ui/navigation';
|
|
68
|
+
|
|
69
|
+
<ActionBar aria-label="Actions bar">
|
|
70
|
+
<ActionBar.Section type="secondary">
|
|
71
|
+
<ActionBar.Group>
|
|
72
|
+
<ActionBar.Item>
|
|
73
|
+
<Button>Toggle Article TOC</Button>
|
|
74
|
+
</ActionBar.Item>
|
|
75
|
+
</ActionBar.Group>
|
|
76
|
+
</ActionBar.Section>
|
|
77
|
+
|
|
78
|
+
<ActionBar.Section type="primary">
|
|
79
|
+
<ActionBar.Group>
|
|
80
|
+
<ActionBar.Item>
|
|
81
|
+
<LegacyBreadcrumbs
|
|
82
|
+
lastDisplayedItemsCount={1}
|
|
83
|
+
firstDisplayedItemsCount={1}
|
|
84
|
+
items={[
|
|
85
|
+
{text: 'Wiki Main Page', action() {}},
|
|
86
|
+
{text: 'Wiki Article', action() {}},
|
|
87
|
+
]}
|
|
88
|
+
/>
|
|
89
|
+
</ActionBar.Item>
|
|
90
|
+
</ActionBar.Group>
|
|
91
|
+
</ActionBar.Section>
|
|
92
|
+
</ActionBar>;
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## ActionBar.Group
|
|
96
|
+
|
|
97
|
+
Groups organize `ActionBar.Item` within a section and control their alignment.
|
|
98
|
+
|
|
99
|
+
### Properties
|
|
100
|
+
|
|
101
|
+
| Name | Description | Type | Default |
|
|
102
|
+
| :--------------- | :---------------------------------------------------------------- | :-----------------------------------------------------------------------------: | :-----: |
|
|
103
|
+
| pull | Controls the alignment of the group | `"left"`, `"left-grow"`, `"right"`, `"right-grow"`, `"center"`, `"center-grow"` | |
|
|
104
|
+
| stretchContainer | Set `flex-grow: 1` for Group. Need to support UIKit@7 Breadcrumbs | `boolean` | |
|
|
105
|
+
| className | HTML `class` attribute | `string` | |
|
|
106
|
+
| style | HTML `style` attribute | `React.CSSProperties` | |
|
|
107
|
+
| qa | `data-qa` HTML attribute, used for testing | `string` | |
|
|
108
|
+
|
|
109
|
+
## ActionBar.Item
|
|
110
|
+
|
|
111
|
+
Container for UI elements like buttons, breadcrumbs or other components must be in `ActionBar.Group`. The component adds margins between items.
|
|
112
|
+
|
|
113
|
+
### Properties
|
|
114
|
+
|
|
115
|
+
| Name | Description | Type | Default |
|
|
116
|
+
| :-------- | :----------------------------------------- | :-------------------: | :-----: |
|
|
117
|
+
| spacing | Enable spacing with previous item | `boolean` | `true` |
|
|
118
|
+
| className | HTML `class` attribute | `string` | |
|
|
119
|
+
| style | HTML `style` attribute | `React.CSSProperties` | |
|
|
120
|
+
| qa | `data-qa` HTML attribute, used for testing | `string` | |
|
|
121
|
+
|
|
122
|
+
## ActionBar.Separator
|
|
123
|
+
|
|
124
|
+
Visual divider that can be placed between items in a group to separate them visually.
|
|
125
|
+
|
|
126
|
+
### Example
|
|
127
|
+
|
|
128
|
+
```typescript jsx
|
|
129
|
+
import {Button} from '@gravity-ui/uikit';
|
|
130
|
+
import {Breadcrumbs as LegacyBreadcrumbs} from '@gravity-ui/uikit/legacy';
|
|
131
|
+
import {ActionBar} from '@gravity-ui/navigation';
|
|
132
|
+
|
|
133
|
+
function Page() {
|
|
134
|
+
return (
|
|
135
|
+
<ActionBar aria-label="Actions bar">
|
|
136
|
+
<ActionBar.Section>
|
|
137
|
+
<ActionBar.Group pull="right">
|
|
138
|
+
<ActionBar.Item>
|
|
139
|
+
<Button>Do something</Button>
|
|
140
|
+
</ActionBar.Item>
|
|
141
|
+
|
|
142
|
+
<ActionBar.Separator />
|
|
143
|
+
|
|
144
|
+
<ActionBar.Item>
|
|
145
|
+
<Button>Do something</Button>
|
|
146
|
+
</ActionBar.Item>
|
|
147
|
+
</ActionBar.Group>
|
|
148
|
+
</ActionBar.Section>
|
|
149
|
+
</ActionBar>
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
```
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# AllPagesPanel
|
|
2
|
+
|
|
3
|
+
A navigation panel for managing and organizing application pages in the middle (menuItems) section of `AsideHeader` component. Panel provides drag-and-drop reordering, visibility toggles, pin/unpin and category grouping of menu items.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import {AsideHeader, type AsideHeaderProps} from '@gravity-ui/navigation';
|
|
10
|
+
|
|
11
|
+
const DEFAULT_MENU_ITEMS: AsideHeaderProps['menuItems'] = [
|
|
12
|
+
{item: {id: 'home', title: 'Home', icon: 'home'}},
|
|
13
|
+
{item: {id: 'analytics', title: 'Analytics', icon: 'chart'}},
|
|
14
|
+
{item: {id: 'settings', title: 'Settings', icon: 'gear'}},
|
|
15
|
+
];
|
|
16
|
+
|
|
17
|
+
const Navigation: React.FC<React.PropsWithChildren> = ({children}) => {
|
|
18
|
+
const {defaultMenuItems, menuItems, setMenuItems} = useMenuItems();
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<AsideHeader
|
|
22
|
+
className={b()}
|
|
23
|
+
logo={{
|
|
24
|
+
icon: GravityLogo,
|
|
25
|
+
iconSize: 30,
|
|
26
|
+
text: 'Gravity App',
|
|
27
|
+
href: '#',
|
|
28
|
+
}}
|
|
29
|
+
menuItems={menuItems}
|
|
30
|
+
compact={compact}
|
|
31
|
+
onChangeCompact={setCompact}
|
|
32
|
+
renderContent={() => children}
|
|
33
|
+
// All pages
|
|
34
|
+
defaultMenuItems={defaultMenuItems}
|
|
35
|
+
editMenuProps={{enableSorting: true}}
|
|
36
|
+
onMenuItemsChanged={setMenuItems}
|
|
37
|
+
/>
|
|
38
|
+
);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const useMenuItems = () => {
|
|
42
|
+
const location = useLocation();
|
|
43
|
+
|
|
44
|
+
const [menuItems, setMenuItems] = React.useState(DEFAULT_MENU_ITEMS);
|
|
45
|
+
|
|
46
|
+
const currentMenuItems = menuItems.map<AsideHeaderItem>((item, index) => {
|
|
47
|
+
if ('type' in item || index > 5) {
|
|
48
|
+
return item;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return {
|
|
52
|
+
...item,
|
|
53
|
+
current: (item.href || '') === location.pathname,
|
|
54
|
+
};
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
return {defaultMenuItems: DEFAULT_MENU_ITEMS, menuItems: currentMenuItems, setMenuItems};
|
|
58
|
+
};
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Properties
|
|
62
|
+
|
|
63
|
+
| Name | Description | Type | Default |
|
|
64
|
+
| :----------------- | :----------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------: | :-----: |
|
|
65
|
+
| defaultMenuItems | Default items in the navigation middle section | [`Array<AsideHeaderItem>`](https://github.com/gravity-ui/navigation/blob/main/src/components/AsideHeader/README.md#menuitem) | `[]` |
|
|
66
|
+
| menuItems | Modifying items in the navigation middle section | [`Array<AsideHeaderItem>`](https://github.com/gravity-ui/navigation/blob/main/src/components/AsideHeader/README.md#menuitem) | `[]` |
|
|
67
|
+
| editMenuProps | desc | `type` | |
|
|
68
|
+
| onMenuItemsChanged | Callback will be called when updating list of the menuItems in `AllPagesPanel` | `(items: Array<AsideHeaderItem>) => void` | |
|
|
69
|
+
|
|
70
|
+
### `EditMenuProps`
|
|
71
|
+
|
|
72
|
+
Provides settings and callbacks for managing panel and menu items in the `AsideHeader`. Callbacks are optional, you can managing with `AsideHeader.onMenuItemsChanged` prop.
|
|
73
|
+
|
|
74
|
+
| Name | Description | Type | Default |
|
|
75
|
+
| :----------------------- | :------------------------------------------------------- | :---------------------------------------------------------------------------: | :-----: |
|
|
76
|
+
| enableSorting | Enable sorting functionality in the panel | `boolean` | |
|
|
77
|
+
| onOpenEditMode | Callback triggered when the edit mode is enabled | `() => void` | |
|
|
78
|
+
| onToggleMenuItem | Callback triggered when the menu item visible is toggled | `(changedItem: AsideHeaderItem) => void` | |
|
|
79
|
+
| onResetSettingsToDefault | Callback triggered when settings are reset to default | `() => void` | |
|
|
80
|
+
| onChangeItemsOrder | Callback triggered when the order of items is changed | `(changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;` | |
|