@gravity-ui/navigation 4.0.10 → 4.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.d.ts +5 -3
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.js +4 -7
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.js.map +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.d.ts +5 -3
- package/build/esm/components/HotkeysPanel/HotkeysPanel.js +4 -7
- package/build/esm/components/HotkeysPanel/HotkeysPanel.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ReactNode } from 'react';
|
|
3
|
-
import type { ListProps } from '@gravity-ui/uikit';
|
|
3
|
+
import type { DrawerProps, HotkeyProps, ListProps } from '@gravity-ui/uikit';
|
|
4
4
|
import type { HotkeysGroup, HotkeysListItem } from './types';
|
|
5
5
|
export type HotkeysPanelProps<T> = {
|
|
6
6
|
hotkeys: HotkeysGroup<T>[];
|
|
@@ -19,5 +19,7 @@ export type HotkeysPanelProps<T> = {
|
|
|
19
19
|
listClassName?: string;
|
|
20
20
|
leftOffset?: number | string;
|
|
21
21
|
topOffset?: number | string;
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
style?: React.CSSProperties;
|
|
23
|
+
platform?: HotkeyProps['platform'];
|
|
24
|
+
} & Omit<ListProps<HotkeysListItem>, 'items' | 'emptyPlaceholder' | 'className' | 'size' | 'renderItem' | 'filterable' | 'autoFocus' | 'filterPlaceholder' | 'filterClassName' | 'filter' | 'filterItem' | 'onFilterEnd' | 'onFilterUpdate'> & Pick<DrawerProps, 'container' | 'hideVeil'>;
|
|
25
|
+
export declare function HotkeysPanel<T = {}>({ open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable, filterPlaceholder, title, togglePanelHotkey, emptyState, style, container, hideVeil, platform, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;
|
|
@@ -11,7 +11,7 @@ var HotkeysPanel_module = require('./HotkeysPanel.module.scss.js');
|
|
|
11
11
|
|
|
12
12
|
const b = cn.createBlock('hotkeys-panel', HotkeysPanel_module.default);
|
|
13
13
|
function HotkeysPanel(_a) {
|
|
14
|
-
var { open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable = true, filterPlaceholder, title, togglePanelHotkey, emptyState } = _a, listProps = tslib_es6.__rest(_a, ["open", "onClose", "leftOffset", "topOffset", "className", "drawerItemClassName", "filterClassName", "titleClassName", "listClassName", "itemContentClassName", "hotkeys", "itemClassName", "filterable", "filterPlaceholder", "title", "togglePanelHotkey", "emptyState"]);
|
|
14
|
+
var { open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable = true, filterPlaceholder, title, togglePanelHotkey, emptyState, style, container, hideVeil, platform } = _a, listProps = tslib_es6.__rest(_a, ["open", "onClose", "leftOffset", "topOffset", "className", "drawerItemClassName", "filterClassName", "titleClassName", "listClassName", "itemContentClassName", "hotkeys", "itemClassName", "filterable", "filterPlaceholder", "title", "togglePanelHotkey", "emptyState", "style", "container", "hideVeil", "platform"]);
|
|
15
15
|
const [filter, setFilter] = React.useState('');
|
|
16
16
|
const hotkeysList = React.useMemo(() => {
|
|
17
17
|
const filteredHotkeys = filterHotkeys.filterHotkeys(hotkeys, filter);
|
|
@@ -21,17 +21,14 @@ function HotkeysPanel(_a) {
|
|
|
21
21
|
React.createElement("span", null,
|
|
22
22
|
item.title,
|
|
23
23
|
item.hint && (React.createElement(uikit.HelpMark, { "aria-hidden": true, popoverProps: { className: b('item-hint-tooltip') }, className: b('item-hint') }, item.hint))),
|
|
24
|
-
item.value && React.createElement(uikit.Hotkey, { className: b('hotkey'), value: item.value }))), [itemContentClassName]);
|
|
24
|
+
item.value && (React.createElement(uikit.Hotkey, { className: b('hotkey'), value: item.value, platform: platform })))), [itemContentClassName, platform]);
|
|
25
25
|
const drawerItemContent = (React.createElement(React.Fragment, null,
|
|
26
26
|
React.createElement(uikit.Text, { variant: "subheader-3", as: 'h2', className: b('title', titleClassName) },
|
|
27
27
|
title,
|
|
28
|
-
togglePanelHotkey && React.createElement(uikit.Hotkey, { value: togglePanelHotkey })),
|
|
28
|
+
togglePanelHotkey && React.createElement(uikit.Hotkey, { value: togglePanelHotkey, platform: platform })),
|
|
29
29
|
filterable && (React.createElement(uikit.TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b('search', filterClassName), hasClear: true })),
|
|
30
30
|
React.createElement(uikit.List, Object.assign({ className: b('list', listClassName), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
|
|
31
|
-
return (React.createElement(uikit.Drawer, { className: b(null, className), open: open, onOpenChange: (open) => !open && (onClose === null || onClose === undefined ? undefined : onClose()), style: {
|
|
32
|
-
left: leftOffset,
|
|
33
|
-
top: topOffset,
|
|
34
|
-
}, contentClassName: b('drawer-item', drawerItemClassName) }, drawerItemContent));
|
|
31
|
+
return (React.createElement(uikit.Drawer, { container: container, hideVeil: hideVeil, className: b(null, className), open: open, onOpenChange: (open) => !open && (onClose === null || onClose === undefined ? undefined : onClose()), style: Object.assign(Object.assign(Object.assign({ position: 'absolute' }, style), (leftOffset !== undefined && { left: leftOffset })), (topOffset !== undefined && { top: topOffset })), contentClassName: b('drawer-item', drawerItemClassName) }, drawerItemContent));
|
|
35
32
|
}
|
|
36
33
|
|
|
37
34
|
exports.HotkeysPanel = HotkeysPanel;
|
|
@@ -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 {ListProps} from '@gravity-ui/uikit';\n\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} & 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 ...listProps\n}: HotkeysPanelProps<T>) {\n const [filter, setFilter] = useState('');\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 && <Hotkey className={b('hotkey')} value={item.value}
|
|
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 {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} & 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 Pick<DrawerProps, 'container' | 'hideVeil'>;\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 style,\n container,\n hideVeil,\n platform,\n ...listProps\n}: HotkeysPanelProps<T>) {\n const [filter, setFilter] = useState('');\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 <React.Fragment>\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 </React.Fragment>\n );\n\n return (\n <Drawer\n container={container}\n hideVeil={hideVeil}\n className={b(null, className)}\n open={open}\n onOpenChange={(open) => !open && onClose?.()}\n style={{\n position: 'absolute',\n ...style,\n ...(leftOffset !== undefined && {left: leftOffset}),\n ...(topOffset !== undefined && {top: topOffset}),\n }}\n contentClassName={b('drawer-item', drawerItemClassName)}\n >\n {drawerItemContent}\n </Drawer>\n );\n}\n"],"names":["createBlock","styles","__rest","useState","useMemo","filterHotkeys","flattenHotkeyGroups","useCallback","Text","HelpMark","Hotkey","TextInput","List","Drawer"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ReactNode } from 'react';
|
|
3
|
-
import type { ListProps } from '@gravity-ui/uikit';
|
|
3
|
+
import type { DrawerProps, HotkeyProps, ListProps } from '@gravity-ui/uikit';
|
|
4
4
|
import type { HotkeysGroup, HotkeysListItem } from './types';
|
|
5
5
|
export type HotkeysPanelProps<T> = {
|
|
6
6
|
hotkeys: HotkeysGroup<T>[];
|
|
@@ -19,5 +19,7 @@ export type HotkeysPanelProps<T> = {
|
|
|
19
19
|
listClassName?: string;
|
|
20
20
|
leftOffset?: number | string;
|
|
21
21
|
topOffset?: number | string;
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
style?: React.CSSProperties;
|
|
23
|
+
platform?: HotkeyProps['platform'];
|
|
24
|
+
} & Omit<ListProps<HotkeysListItem>, 'items' | 'emptyPlaceholder' | 'className' | 'size' | 'renderItem' | 'filterable' | 'autoFocus' | 'filterPlaceholder' | 'filterClassName' | 'filter' | 'filterItem' | 'onFilterEnd' | 'onFilterUpdate'> & Pick<DrawerProps, 'container' | 'hideVeil'>;
|
|
25
|
+
export declare function HotkeysPanel<T = {}>({ open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable, filterPlaceholder, title, togglePanelHotkey, emptyState, style, container, hideVeil, platform, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;
|
|
@@ -9,7 +9,7 @@ import styles from './HotkeysPanel.module.scss.js';
|
|
|
9
9
|
|
|
10
10
|
const b = createBlock('hotkeys-panel', styles);
|
|
11
11
|
function HotkeysPanel(_a) {
|
|
12
|
-
var { open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable = true, filterPlaceholder, title, togglePanelHotkey, emptyState } = _a, listProps = __rest(_a, ["open", "onClose", "leftOffset", "topOffset", "className", "drawerItemClassName", "filterClassName", "titleClassName", "listClassName", "itemContentClassName", "hotkeys", "itemClassName", "filterable", "filterPlaceholder", "title", "togglePanelHotkey", "emptyState"]);
|
|
12
|
+
var { open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable = true, filterPlaceholder, title, togglePanelHotkey, emptyState, style, container, hideVeil, platform } = _a, listProps = __rest(_a, ["open", "onClose", "leftOffset", "topOffset", "className", "drawerItemClassName", "filterClassName", "titleClassName", "listClassName", "itemContentClassName", "hotkeys", "itemClassName", "filterable", "filterPlaceholder", "title", "togglePanelHotkey", "emptyState", "style", "container", "hideVeil", "platform"]);
|
|
13
13
|
const [filter, setFilter] = useState('');
|
|
14
14
|
const hotkeysList = useMemo(() => {
|
|
15
15
|
const filteredHotkeys = filterHotkeys(hotkeys, filter);
|
|
@@ -19,17 +19,14 @@ function HotkeysPanel(_a) {
|
|
|
19
19
|
React__default.createElement("span", null,
|
|
20
20
|
item.title,
|
|
21
21
|
item.hint && (React__default.createElement(HelpMark, { "aria-hidden": true, popoverProps: { className: b('item-hint-tooltip') }, className: b('item-hint') }, item.hint))),
|
|
22
|
-
item.value && React__default.createElement(Hotkey, { className: b('hotkey'), value: item.value }))), [itemContentClassName]);
|
|
22
|
+
item.value && (React__default.createElement(Hotkey, { className: b('hotkey'), value: item.value, platform: platform })))), [itemContentClassName, platform]);
|
|
23
23
|
const drawerItemContent = (React__default.createElement(React__default.Fragment, null,
|
|
24
24
|
React__default.createElement(Text, { variant: "subheader-3", as: 'h2', className: b('title', titleClassName) },
|
|
25
25
|
title,
|
|
26
|
-
togglePanelHotkey && React__default.createElement(Hotkey, { value: togglePanelHotkey })),
|
|
26
|
+
togglePanelHotkey && React__default.createElement(Hotkey, { value: togglePanelHotkey, platform: platform })),
|
|
27
27
|
filterable && (React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b('search', filterClassName), hasClear: true })),
|
|
28
28
|
React__default.createElement(List, Object.assign({ className: b('list', listClassName), virtualized: false, filterable: false, items: hotkeysList, renderItem: renderItem, itemClassName: b('item', itemClassName), emptyPlaceholder: emptyState }, listProps))));
|
|
29
|
-
return (React__default.createElement(Drawer, { className: b(null, className), open: open, onOpenChange: (open) => !open && (onClose === null || onClose === undefined ? undefined : onClose()), style: {
|
|
30
|
-
left: leftOffset,
|
|
31
|
-
top: topOffset,
|
|
32
|
-
}, contentClassName: b('drawer-item', drawerItemClassName) }, drawerItemContent));
|
|
29
|
+
return (React__default.createElement(Drawer, { container: container, hideVeil: hideVeil, className: b(null, className), open: open, onOpenChange: (open) => !open && (onClose === null || onClose === undefined ? undefined : onClose()), style: Object.assign(Object.assign(Object.assign({ position: 'absolute' }, style), (leftOffset !== undefined && { left: leftOffset })), (topOffset !== undefined && { top: topOffset })), contentClassName: b('drawer-item', drawerItemClassName) }, drawerItemContent));
|
|
33
30
|
}
|
|
34
31
|
|
|
35
32
|
export { HotkeysPanel };
|
|
@@ -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 {ListProps} from '@gravity-ui/uikit';\n\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} & 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 ...listProps\n}: HotkeysPanelProps<T>) {\n const [filter, setFilter] = useState('');\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 && <Hotkey className={b('hotkey')} value={item.value}
|
|
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 {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} & 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 Pick<DrawerProps, 'container' | 'hideVeil'>;\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 style,\n container,\n hideVeil,\n platform,\n ...listProps\n}: HotkeysPanelProps<T>) {\n const [filter, setFilter] = useState('');\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 <React.Fragment>\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 </React.Fragment>\n );\n\n return (\n <Drawer\n container={container}\n hideVeil={hideVeil}\n className={b(null, className)}\n open={open}\n onOpenChange={(open) => !open && onClose?.()}\n style={{\n position: 'absolute',\n ...style,\n ...(leftOffset !== undefined && {left: leftOffset}),\n ...(topOffset !== undefined && {top: topOffset}),\n }}\n contentClassName={b('drawer-item', drawerItemClassName)}\n >\n {drawerItemContent}\n </Drawer>\n );\n}\n"],"names":["React"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/navigation",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.11",
|
|
4
4
|
"description": "Gravity UI Navigation components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@gravity-ui/prettier-config": "^1.0.0",
|
|
71
71
|
"@gravity-ui/stylelint-config": "^4.0.1",
|
|
72
72
|
"@gravity-ui/tsconfig": "^1.0.0",
|
|
73
|
-
"@gravity-ui/uikit": "^7.
|
|
73
|
+
"@gravity-ui/uikit": "^7.31.0",
|
|
74
74
|
"@jest/globals": "^30.0.5",
|
|
75
75
|
"@playwright/experimental-ct-react": "^1.49.1",
|
|
76
76
|
"@playwright/test": "^1.49.1",
|