@gravity-ui/navigation 4.0.11 → 4.0.12
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/AsideHeader/AsideHeaderContext.d.ts +1 -0
- package/build/cjs/components/AsideHeader/AsideHeaderContext.js +5 -0
- package/build/cjs/components/AsideHeader/AsideHeaderContext.js.map +1 -1
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.d.ts +4 -2
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.js +13 -2
- package/build/cjs/components/HotkeysPanel/HotkeysPanel.js.map +1 -1
- package/build/esm/components/AsideHeader/AsideHeaderContext.d.ts +1 -0
- package/build/esm/components/AsideHeader/AsideHeaderContext.js +5 -1
- package/build/esm/components/AsideHeader/AsideHeaderContext.js.map +1 -1
- package/build/esm/components/HotkeysPanel/HotkeysPanel.d.ts +4 -2
- package/build/esm/components/HotkeysPanel/HotkeysPanel.js +13 -2
- package/build/esm/components/HotkeysPanel/HotkeysPanel.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,3 +14,4 @@ export interface AsideHeaderContextType {
|
|
|
14
14
|
}
|
|
15
15
|
export declare const AsideHeaderContextProvider: React.Provider<AsideHeaderContextType | undefined>;
|
|
16
16
|
export declare const useAsideHeaderContext: () => AsideHeaderContextType;
|
|
17
|
+
export declare const useSafeAsideHeaderContext: () => AsideHeaderContextType | undefined;
|
|
@@ -28,9 +28,14 @@ const useAsideHeaderContext = () => {
|
|
|
28
28
|
}
|
|
29
29
|
return contextValue;
|
|
30
30
|
};
|
|
31
|
+
const useSafeAsideHeaderContext = () => {
|
|
32
|
+
const contextValue = React.useContext(AsideHeaderContext);
|
|
33
|
+
return contextValue;
|
|
34
|
+
};
|
|
31
35
|
|
|
32
36
|
exports.AsideHeaderContextProvider = AsideHeaderContextProvider;
|
|
33
37
|
exports.AsideHeaderInnerContextProvider = AsideHeaderInnerContextProvider;
|
|
34
38
|
exports.useAsideHeaderContext = useAsideHeaderContext;
|
|
35
39
|
exports.useAsideHeaderInnerContext = useAsideHeaderInnerContext;
|
|
40
|
+
exports.useSafeAsideHeaderContext = useSafeAsideHeaderContext;
|
|
36
41
|
//# sourceMappingURL=AsideHeaderContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AsideHeaderContext.js","sources":["../../../../../src/components/AsideHeader/AsideHeaderContext.ts"],"sourcesContent":["import React from 'react';\n\nimport {AsideHeaderInnerProps, AsideHeaderItem} from './types';\n\nexport interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {\n menuItems: AsideHeaderItem[];\n defaultMenuItems?: AsideHeaderItem[];\n allPagesIsAvailable: boolean;\n onItemClick: (\n item: AsideHeaderItem,\n collapsed: boolean,\n event: React.MouseEvent<HTMLElement, MouseEvent>,\n ) => void;\n}\n\nconst AsideHeaderInnerContext = React.createContext<AsideHeaderInnerContextType | undefined>(\n undefined,\n);\nAsideHeaderInnerContext.displayName = 'AsideHeaderInnerContext';\n\nexport const AsideHeaderInnerContextProvider = AsideHeaderInnerContext.Provider;\n\nexport const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => {\n const contextValue = React.useContext(AsideHeaderInnerContext);\n if (contextValue === undefined) {\n throw new Error(`AsideHeaderInnerContext is not initialized.\n Please check if you wrapped your component with AsideHeaderInnerContext.Provider`);\n }\n return contextValue;\n};\n\nexport interface AsideHeaderContextType {\n compact: boolean;\n size: number;\n}\n\nconst AsideHeaderContext = React.createContext<AsideHeaderContextType | undefined>({\n compact: false,\n size: 0,\n});\n\nAsideHeaderContext.displayName = 'AsideHeaderContext';\n\nexport const AsideHeaderContextProvider = AsideHeaderContext.Provider;\n\nexport const useAsideHeaderContext = (): AsideHeaderContextType => {\n const contextValue = React.useContext(AsideHeaderContext);\n if (contextValue === undefined) {\n throw new Error(`AsideHeaderContext is not initialized.\n Please check if you wrapped your component with AsideHeader\n Context.Provider`);\n }\n return contextValue;\n};\n"],"names":[],"mappings":";;;;AAeA,MAAM,uBAAuB,GAAG,KAAK,CAAC,aAAa,CAC/C,SAAS,CACZ;AACD,uBAAuB,CAAC,WAAW,GAAG,yBAAyB;AAElD,MAAA,+BAA+B,GAAG,uBAAuB,CAAC;AAEhE,MAAM,0BAA0B,GAAG,MAAkC;IACxE,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC;AAC9D,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;AACiE,wFAAA,CAAA,CAAC;;AAEtF,IAAA,OAAO,YAAY;AACvB;AAOA,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAqC;AAC/E,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,IAAI,EAAE,CAAC;AACV,CAAA,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;AAExC,MAAA,0BAA0B,GAAG,kBAAkB,CAAC;AAEtD,MAAM,qBAAqB,GAAG,MAA6B;IAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC;AACzD,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;;AAEC,wBAAA,CAAA,CAAC;;AAEtB,IAAA,OAAO,YAAY;AACvB
|
|
1
|
+
{"version":3,"file":"AsideHeaderContext.js","sources":["../../../../../src/components/AsideHeader/AsideHeaderContext.ts"],"sourcesContent":["import React from 'react';\n\nimport {AsideHeaderInnerProps, AsideHeaderItem} from './types';\n\nexport interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {\n menuItems: AsideHeaderItem[];\n defaultMenuItems?: AsideHeaderItem[];\n allPagesIsAvailable: boolean;\n onItemClick: (\n item: AsideHeaderItem,\n collapsed: boolean,\n event: React.MouseEvent<HTMLElement, MouseEvent>,\n ) => void;\n}\n\nconst AsideHeaderInnerContext = React.createContext<AsideHeaderInnerContextType | undefined>(\n undefined,\n);\nAsideHeaderInnerContext.displayName = 'AsideHeaderInnerContext';\n\nexport const AsideHeaderInnerContextProvider = AsideHeaderInnerContext.Provider;\n\nexport const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => {\n const contextValue = React.useContext(AsideHeaderInnerContext);\n if (contextValue === undefined) {\n throw new Error(`AsideHeaderInnerContext is not initialized.\n Please check if you wrapped your component with AsideHeaderInnerContext.Provider`);\n }\n return contextValue;\n};\n\nexport interface AsideHeaderContextType {\n compact: boolean;\n size: number;\n}\n\nconst AsideHeaderContext = React.createContext<AsideHeaderContextType | undefined>({\n compact: false,\n size: 0,\n});\n\nAsideHeaderContext.displayName = 'AsideHeaderContext';\n\nexport const AsideHeaderContextProvider = AsideHeaderContext.Provider;\n\nexport const useAsideHeaderContext = (): AsideHeaderContextType => {\n const contextValue = React.useContext(AsideHeaderContext);\n if (contextValue === undefined) {\n throw new Error(`AsideHeaderContext is not initialized.\n Please check if you wrapped your component with AsideHeader\n Context.Provider`);\n }\n return contextValue;\n};\n\nexport const useSafeAsideHeaderContext = (): AsideHeaderContextType | undefined => {\n const contextValue = React.useContext(AsideHeaderContext);\n\n return contextValue;\n};\n"],"names":[],"mappings":";;;;AAeA,MAAM,uBAAuB,GAAG,KAAK,CAAC,aAAa,CAC/C,SAAS,CACZ;AACD,uBAAuB,CAAC,WAAW,GAAG,yBAAyB;AAElD,MAAA,+BAA+B,GAAG,uBAAuB,CAAC;AAEhE,MAAM,0BAA0B,GAAG,MAAkC;IACxE,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC;AAC9D,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;AACiE,wFAAA,CAAA,CAAC;;AAEtF,IAAA,OAAO,YAAY;AACvB;AAOA,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAqC;AAC/E,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,IAAI,EAAE,CAAC;AACV,CAAA,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;AAExC,MAAA,0BAA0B,GAAG,kBAAkB,CAAC;AAEtD,MAAM,qBAAqB,GAAG,MAA6B;IAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC;AACzD,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;;AAEC,wBAAA,CAAA,CAAC;;AAEtB,IAAA,OAAO,YAAY;AACvB;AAEO,MAAM,yBAAyB,GAAG,MAAyC;IAC9E,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC;AAEzD,IAAA,OAAO,YAAY;AACvB;;;;;;;;"}
|
|
@@ -21,5 +21,7 @@ export type HotkeysPanelProps<T> = {
|
|
|
21
21
|
topOffset?: number | string;
|
|
22
22
|
style?: React.CSSProperties;
|
|
23
23
|
platform?: HotkeyProps['platform'];
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
drawerProps?: Omit<DrawerProps, 'style' | 'contentClassName' | 'open' | 'className'>;
|
|
25
|
+
disableNavigationOffset?: boolean;
|
|
26
|
+
} & Omit<ListProps<HotkeysListItem>, 'items' | 'emptyPlaceholder' | 'className' | 'size' | 'renderItem' | 'filterable' | 'autoFocus' | 'filterPlaceholder' | 'filterClassName' | 'filter' | 'filterItem' | 'onFilterEnd' | 'onFilterUpdate'>;
|
|
27
|
+
export declare function HotkeysPanel<T = {}>({ open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable, filterPlaceholder, title, togglePanelHotkey, emptyState, platform, drawerProps, style: styleProp, disableNavigationOffset, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;
|
|
@@ -4,6 +4,7 @@ import './HotkeysPanel.css';
|
|
|
4
4
|
var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var uikit = require('@gravity-ui/uikit');
|
|
7
|
+
var AsideHeaderContext = require('../AsideHeader/AsideHeaderContext.js');
|
|
7
8
|
var cn = require('../utils/cn.js');
|
|
8
9
|
var filterHotkeys = require('./utils/filterHotkeys.js');
|
|
9
10
|
var flattenHotkeyGroups = require('./utils/flattenHotkeyGroups.js');
|
|
@@ -11,8 +12,10 @@ var HotkeysPanel_module = require('./HotkeysPanel.module.scss.js');
|
|
|
11
12
|
|
|
12
13
|
const b = cn.createBlock('hotkeys-panel', HotkeysPanel_module.default);
|
|
13
14
|
function HotkeysPanel(_a) {
|
|
14
|
-
var
|
|
15
|
+
var _b;
|
|
16
|
+
var { open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable = true, filterPlaceholder, title, togglePanelHotkey, emptyState, platform, drawerProps, style: styleProp, disableNavigationOffset = false } = _a, listProps = tslib_es6.__rest(_a, ["open", "onClose", "leftOffset", "topOffset", "className", "drawerItemClassName", "filterClassName", "titleClassName", "listClassName", "itemContentClassName", "hotkeys", "itemClassName", "filterable", "filterPlaceholder", "title", "togglePanelHotkey", "emptyState", "platform", "drawerProps", "style", "disableNavigationOffset"]);
|
|
15
17
|
const [filter, setFilter] = React.useState('');
|
|
18
|
+
const { size } = (_b = AsideHeaderContext.useSafeAsideHeaderContext()) !== null && _b !== undefined ? _b : { size: 0 };
|
|
16
19
|
const hotkeysList = React.useMemo(() => {
|
|
17
20
|
const filteredHotkeys = filterHotkeys.filterHotkeys(hotkeys, filter);
|
|
18
21
|
return flattenHotkeyGroups.flattenHotkeyGroups(filteredHotkeys);
|
|
@@ -28,7 +31,15 @@ function HotkeysPanel(_a) {
|
|
|
28
31
|
togglePanelHotkey && React.createElement(uikit.Hotkey, { value: togglePanelHotkey, platform: platform })),
|
|
29
32
|
filterable && (React.createElement(uikit.TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b('search', filterClassName), hasClear: true })),
|
|
30
33
|
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
|
-
|
|
34
|
+
const onOpenChange = React.useCallback((newOpen) => {
|
|
35
|
+
var _a;
|
|
36
|
+
if (!newOpen) {
|
|
37
|
+
onClose === null || onClose === undefined ? undefined : onClose();
|
|
38
|
+
}
|
|
39
|
+
(_a = drawerProps === null || drawerProps === undefined ? undefined : drawerProps.onOpenChange) === null || _a === undefined ? undefined : _a.call(drawerProps, newOpen);
|
|
40
|
+
}, [drawerProps, onClose]);
|
|
41
|
+
const style = React.useMemo(() => (Object.assign(Object.assign(Object.assign({ position: 'fixed', left: disableNavigationOffset ? undefined : size }, styleProp), (leftOffset !== undefined && { left: leftOffset })), (topOffset !== undefined && { top: topOffset }))), [disableNavigationOffset, styleProp, leftOffset, size, topOffset]);
|
|
42
|
+
return (React.createElement(uikit.Drawer, Object.assign({ className: b(null, className), open: open, onOpenChange: onOpenChange, style: style, contentClassName: b('drawer-item', drawerItemClassName) }, drawerProps), drawerItemContent));
|
|
32
43
|
}
|
|
33
44
|
|
|
34
45
|
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 {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
|
|
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 <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 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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"}
|
|
@@ -14,3 +14,4 @@ export interface AsideHeaderContextType {
|
|
|
14
14
|
}
|
|
15
15
|
export declare const AsideHeaderContextProvider: React.Provider<AsideHeaderContextType | undefined>;
|
|
16
16
|
export declare const useAsideHeaderContext: () => AsideHeaderContextType;
|
|
17
|
+
export declare const useSafeAsideHeaderContext: () => AsideHeaderContextType | undefined;
|
|
@@ -26,6 +26,10 @@ const useAsideHeaderContext = () => {
|
|
|
26
26
|
}
|
|
27
27
|
return contextValue;
|
|
28
28
|
};
|
|
29
|
+
const useSafeAsideHeaderContext = () => {
|
|
30
|
+
const contextValue = React__default.useContext(AsideHeaderContext);
|
|
31
|
+
return contextValue;
|
|
32
|
+
};
|
|
29
33
|
|
|
30
|
-
export { AsideHeaderContextProvider, AsideHeaderInnerContextProvider, useAsideHeaderContext, useAsideHeaderInnerContext };
|
|
34
|
+
export { AsideHeaderContextProvider, AsideHeaderInnerContextProvider, useAsideHeaderContext, useAsideHeaderInnerContext, useSafeAsideHeaderContext };
|
|
31
35
|
//# sourceMappingURL=AsideHeaderContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AsideHeaderContext.js","sources":["../../../../../src/components/AsideHeader/AsideHeaderContext.ts"],"sourcesContent":["import React from 'react';\n\nimport {AsideHeaderInnerProps, AsideHeaderItem} from './types';\n\nexport interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {\n menuItems: AsideHeaderItem[];\n defaultMenuItems?: AsideHeaderItem[];\n allPagesIsAvailable: boolean;\n onItemClick: (\n item: AsideHeaderItem,\n collapsed: boolean,\n event: React.MouseEvent<HTMLElement, MouseEvent>,\n ) => void;\n}\n\nconst AsideHeaderInnerContext = React.createContext<AsideHeaderInnerContextType | undefined>(\n undefined,\n);\nAsideHeaderInnerContext.displayName = 'AsideHeaderInnerContext';\n\nexport const AsideHeaderInnerContextProvider = AsideHeaderInnerContext.Provider;\n\nexport const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => {\n const contextValue = React.useContext(AsideHeaderInnerContext);\n if (contextValue === undefined) {\n throw new Error(`AsideHeaderInnerContext is not initialized.\n Please check if you wrapped your component with AsideHeaderInnerContext.Provider`);\n }\n return contextValue;\n};\n\nexport interface AsideHeaderContextType {\n compact: boolean;\n size: number;\n}\n\nconst AsideHeaderContext = React.createContext<AsideHeaderContextType | undefined>({\n compact: false,\n size: 0,\n});\n\nAsideHeaderContext.displayName = 'AsideHeaderContext';\n\nexport const AsideHeaderContextProvider = AsideHeaderContext.Provider;\n\nexport const useAsideHeaderContext = (): AsideHeaderContextType => {\n const contextValue = React.useContext(AsideHeaderContext);\n if (contextValue === undefined) {\n throw new Error(`AsideHeaderContext is not initialized.\n Please check if you wrapped your component with AsideHeader\n Context.Provider`);\n }\n return contextValue;\n};\n"],"names":["React"],"mappings":";;AAeA,MAAM,uBAAuB,GAAGA,cAAK,CAAC,aAAa,CAC/C,SAAS,CACZ;AACD,uBAAuB,CAAC,WAAW,GAAG,yBAAyB;AAElD,MAAA,+BAA+B,GAAG,uBAAuB,CAAC;AAEhE,MAAM,0BAA0B,GAAG,MAAkC;IACxE,MAAM,YAAY,GAAGA,cAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC;AAC9D,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;AACiE,wFAAA,CAAA,CAAC;;AAEtF,IAAA,OAAO,YAAY;AACvB;AAOA,MAAM,kBAAkB,GAAGA,cAAK,CAAC,aAAa,CAAqC;AAC/E,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,IAAI,EAAE,CAAC;AACV,CAAA,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;AAExC,MAAA,0BAA0B,GAAG,kBAAkB,CAAC;AAEtD,MAAM,qBAAqB,GAAG,MAA6B;IAC9D,MAAM,YAAY,GAAGA,cAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC;AACzD,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;;AAEC,wBAAA,CAAA,CAAC;;AAEtB,IAAA,OAAO,YAAY;AACvB;;;;"}
|
|
1
|
+
{"version":3,"file":"AsideHeaderContext.js","sources":["../../../../../src/components/AsideHeader/AsideHeaderContext.ts"],"sourcesContent":["import React from 'react';\n\nimport {AsideHeaderInnerProps, AsideHeaderItem} from './types';\n\nexport interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {\n menuItems: AsideHeaderItem[];\n defaultMenuItems?: AsideHeaderItem[];\n allPagesIsAvailable: boolean;\n onItemClick: (\n item: AsideHeaderItem,\n collapsed: boolean,\n event: React.MouseEvent<HTMLElement, MouseEvent>,\n ) => void;\n}\n\nconst AsideHeaderInnerContext = React.createContext<AsideHeaderInnerContextType | undefined>(\n undefined,\n);\nAsideHeaderInnerContext.displayName = 'AsideHeaderInnerContext';\n\nexport const AsideHeaderInnerContextProvider = AsideHeaderInnerContext.Provider;\n\nexport const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => {\n const contextValue = React.useContext(AsideHeaderInnerContext);\n if (contextValue === undefined) {\n throw new Error(`AsideHeaderInnerContext is not initialized.\n Please check if you wrapped your component with AsideHeaderInnerContext.Provider`);\n }\n return contextValue;\n};\n\nexport interface AsideHeaderContextType {\n compact: boolean;\n size: number;\n}\n\nconst AsideHeaderContext = React.createContext<AsideHeaderContextType | undefined>({\n compact: false,\n size: 0,\n});\n\nAsideHeaderContext.displayName = 'AsideHeaderContext';\n\nexport const AsideHeaderContextProvider = AsideHeaderContext.Provider;\n\nexport const useAsideHeaderContext = (): AsideHeaderContextType => {\n const contextValue = React.useContext(AsideHeaderContext);\n if (contextValue === undefined) {\n throw new Error(`AsideHeaderContext is not initialized.\n Please check if you wrapped your component with AsideHeader\n Context.Provider`);\n }\n return contextValue;\n};\n\nexport const useSafeAsideHeaderContext = (): AsideHeaderContextType | undefined => {\n const contextValue = React.useContext(AsideHeaderContext);\n\n return contextValue;\n};\n"],"names":["React"],"mappings":";;AAeA,MAAM,uBAAuB,GAAGA,cAAK,CAAC,aAAa,CAC/C,SAAS,CACZ;AACD,uBAAuB,CAAC,WAAW,GAAG,yBAAyB;AAElD,MAAA,+BAA+B,GAAG,uBAAuB,CAAC;AAEhE,MAAM,0BAA0B,GAAG,MAAkC;IACxE,MAAM,YAAY,GAAGA,cAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC;AAC9D,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;AACiE,wFAAA,CAAA,CAAC;;AAEtF,IAAA,OAAO,YAAY;AACvB;AAOA,MAAM,kBAAkB,GAAGA,cAAK,CAAC,aAAa,CAAqC;AAC/E,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,IAAI,EAAE,CAAC;AACV,CAAA,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;AAExC,MAAA,0BAA0B,GAAG,kBAAkB,CAAC;AAEtD,MAAM,qBAAqB,GAAG,MAA6B;IAC9D,MAAM,YAAY,GAAGA,cAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC;AACzD,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;;AAEC,wBAAA,CAAA,CAAC;;AAEtB,IAAA,OAAO,YAAY;AACvB;AAEO,MAAM,yBAAyB,GAAG,MAAyC;IAC9E,MAAM,YAAY,GAAGA,cAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC;AAEzD,IAAA,OAAO,YAAY;AACvB;;;;"}
|
|
@@ -21,5 +21,7 @@ export type HotkeysPanelProps<T> = {
|
|
|
21
21
|
topOffset?: number | string;
|
|
22
22
|
style?: React.CSSProperties;
|
|
23
23
|
platform?: HotkeyProps['platform'];
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
drawerProps?: Omit<DrawerProps, 'style' | 'contentClassName' | 'open' | 'className'>;
|
|
25
|
+
disableNavigationOffset?: boolean;
|
|
26
|
+
} & Omit<ListProps<HotkeysListItem>, 'items' | 'emptyPlaceholder' | 'className' | 'size' | 'renderItem' | 'filterable' | 'autoFocus' | 'filterPlaceholder' | 'filterClassName' | 'filter' | 'filterItem' | 'onFilterEnd' | 'onFilterUpdate'>;
|
|
27
|
+
export declare function HotkeysPanel<T = {}>({ open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable, filterPlaceholder, title, togglePanelHotkey, emptyState, platform, drawerProps, style: styleProp, disableNavigationOffset, ...listProps }: HotkeysPanelProps<T>): React.JSX.Element;
|
|
@@ -2,6 +2,7 @@ import './HotkeysPanel.css';
|
|
|
2
2
|
import { __rest } from '../../node_modules/tslib/tslib.es6.js';
|
|
3
3
|
import React__default, { useState, useMemo, useCallback } from 'react';
|
|
4
4
|
import { Text, HelpMark, Hotkey, TextInput, List, Drawer } from '@gravity-ui/uikit';
|
|
5
|
+
import { useSafeAsideHeaderContext } from '../AsideHeader/AsideHeaderContext.js';
|
|
5
6
|
import { createBlock } from '../utils/cn.js';
|
|
6
7
|
import { filterHotkeys } from './utils/filterHotkeys.js';
|
|
7
8
|
import { flattenHotkeyGroups } from './utils/flattenHotkeyGroups.js';
|
|
@@ -9,8 +10,10 @@ import styles from './HotkeysPanel.module.scss.js';
|
|
|
9
10
|
|
|
10
11
|
const b = createBlock('hotkeys-panel', styles);
|
|
11
12
|
function HotkeysPanel(_a) {
|
|
12
|
-
var
|
|
13
|
+
var _b;
|
|
14
|
+
var { open, onClose, leftOffset, topOffset, className, drawerItemClassName, filterClassName, titleClassName, listClassName, itemContentClassName, hotkeys, itemClassName, filterable = true, filterPlaceholder, title, togglePanelHotkey, emptyState, platform, drawerProps, style: styleProp, disableNavigationOffset = false } = _a, listProps = __rest(_a, ["open", "onClose", "leftOffset", "topOffset", "className", "drawerItemClassName", "filterClassName", "titleClassName", "listClassName", "itemContentClassName", "hotkeys", "itemClassName", "filterable", "filterPlaceholder", "title", "togglePanelHotkey", "emptyState", "platform", "drawerProps", "style", "disableNavigationOffset"]);
|
|
13
15
|
const [filter, setFilter] = useState('');
|
|
16
|
+
const { size } = (_b = useSafeAsideHeaderContext()) !== null && _b !== undefined ? _b : { size: 0 };
|
|
14
17
|
const hotkeysList = useMemo(() => {
|
|
15
18
|
const filteredHotkeys = filterHotkeys(hotkeys, filter);
|
|
16
19
|
return flattenHotkeyGroups(filteredHotkeys);
|
|
@@ -26,7 +29,15 @@ function HotkeysPanel(_a) {
|
|
|
26
29
|
togglePanelHotkey && React__default.createElement(Hotkey, { value: togglePanelHotkey, platform: platform })),
|
|
27
30
|
filterable && (React__default.createElement(TextInput, { value: filter, onUpdate: setFilter, placeholder: filterPlaceholder, autoFocus: true, className: b('search', filterClassName), hasClear: true })),
|
|
28
31
|
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
|
-
|
|
32
|
+
const onOpenChange = useCallback((newOpen) => {
|
|
33
|
+
var _a;
|
|
34
|
+
if (!newOpen) {
|
|
35
|
+
onClose === null || onClose === undefined ? undefined : onClose();
|
|
36
|
+
}
|
|
37
|
+
(_a = drawerProps === null || drawerProps === undefined ? undefined : drawerProps.onOpenChange) === null || _a === undefined ? undefined : _a.call(drawerProps, newOpen);
|
|
38
|
+
}, [drawerProps, onClose]);
|
|
39
|
+
const style = useMemo(() => (Object.assign(Object.assign(Object.assign({ position: 'fixed', left: disableNavigationOffset ? undefined : size }, styleProp), (leftOffset !== undefined && { left: leftOffset })), (topOffset !== undefined && { top: topOffset }))), [disableNavigationOffset, styleProp, leftOffset, size, topOffset]);
|
|
40
|
+
return (React__default.createElement(Drawer, Object.assign({ className: b(null, className), open: open, onOpenChange: onOpenChange, style: style, contentClassName: b('drawer-item', drawerItemClassName) }, drawerProps), drawerItemContent));
|
|
30
41
|
}
|
|
31
42
|
|
|
32
43
|
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 {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
|
|
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 <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 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":"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"}
|