@gravity-ui/navigation 6.0.0-beta.2 → 6.0.0-beta.4
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/components/CompositeBar/CompositeBar.js +6 -3
- package/build/cjs/components/AsideHeader/components/CompositeBar/CompositeBar.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.css +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.js +47 -26
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.js.map +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.module.scss.js +1 -1
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/Item.types.d.ts +5 -3
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.d.ts +1 -0
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js +21 -7
- package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.js +6 -3
- package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.css +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.js +47 -26
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.js.map +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.module.scss.js +1 -1
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/Item.types.d.ts +5 -3
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopup.d.ts +1 -0
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js +21 -7
- package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,10 +7,18 @@ import { ItemPopupNestContext } from './ItemPopupNestContext.js';
|
|
|
7
7
|
import styles from './Item.module.scss.js';
|
|
8
8
|
|
|
9
9
|
const b = createBlock('composite-bar-item', styles);
|
|
10
|
-
const
|
|
10
|
+
const POPUP_MAIN_AXIS_OFFSET = 14;
|
|
11
|
+
const POPUP_CROSS_AXIS_OFFSET_WITH_TITLE = -30;
|
|
12
|
+
const POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE = 0;
|
|
11
13
|
const DEFAULT_POPUP_DELAY = 100;
|
|
12
|
-
const ItemPopup = ({ items, itemClassName, title, open, disabled, type, collapsed = false, hideIcon = false, children, onItemClick, onOpenChange, }) => {
|
|
14
|
+
const ItemPopup = ({ items, itemClassName, title, open, disabled, type, collapsed = false, hideIcon = false, children, onPopupItemClick, onItemClick, onOpenChange, }) => {
|
|
13
15
|
const nestedOpenCountRef = React__default.useRef(0);
|
|
16
|
+
const popoverOffset = React__default.useMemo(() => ({
|
|
17
|
+
mainAxis: POPUP_MAIN_AXIS_OFFSET,
|
|
18
|
+
crossAxis: title
|
|
19
|
+
? POPUP_CROSS_AXIS_OFFSET_WITH_TITLE
|
|
20
|
+
: POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE,
|
|
21
|
+
}), [title]);
|
|
14
22
|
const registerNestedOpen = React__default.useCallback((delta) => {
|
|
15
23
|
nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);
|
|
16
24
|
}, []);
|
|
@@ -21,21 +29,27 @@ const ItemPopup = ({ items, itemClassName, title, open, disabled, type, collapse
|
|
|
21
29
|
}
|
|
22
30
|
onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(next);
|
|
23
31
|
}, [onOpenChange]);
|
|
32
|
+
const handlePopupContentClick = React__default.useCallback((event) => {
|
|
33
|
+
event.stopPropagation();
|
|
34
|
+
}, []);
|
|
24
35
|
if (!items.length) {
|
|
25
36
|
return children;
|
|
26
37
|
}
|
|
27
38
|
const content = (React__default.createElement(ItemPopupNestContext.Provider, { value: nestContextValue },
|
|
28
|
-
React__default.createElement("div", { className: b('popup-content', { collapsed }) },
|
|
39
|
+
React__default.createElement("div", { className: b('popup-content', { collapsed }), onClick: handlePopupContentClick },
|
|
29
40
|
title && React__default.createElement("div", { className: b('popup-title') }, title),
|
|
30
|
-
React__default.createElement(List, { items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getPopupItemHeight, itemsHeight: getPopupItemsHeight, itemClassName: b('root-menu-item', itemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, Object.assign({}, item, { qa: undefined, compact: false, className: b('popup-item'), hideIcon: hideIcon, stopClickPropagation:
|
|
31
|
-
|
|
32
|
-
|
|
41
|
+
React__default.createElement(List, { items: items, selectedItemIndex: getSelectedItemIndex(items), itemHeight: getPopupItemHeight, itemsHeight: getPopupItemsHeight, itemClassName: b('root-menu-item', itemClassName), virtualized: false, filterable: false, sortable: false, renderItem: (item) => (React__default.createElement(Item, Object.assign({}, item, { qa: undefined, compact: false, className: b('popup-item'), hideIcon: hideIcon, stopClickPropagation: !item.itemWrapper, enableTooltip: false, bringForward: false, popupVisible: false, renderPopupContent: undefined, onOpenChangePopup: undefined, popupRef: undefined, onItemClick: (_innerItem, _innerCollapsed, event) => {
|
|
42
|
+
var _a;
|
|
43
|
+
if (!item.current) {
|
|
44
|
+
onOpenChange === null || onOpenChange === undefined ? undefined : onOpenChange(false);
|
|
45
|
+
}
|
|
46
|
+
(_a = (onPopupItemClick !== null && onPopupItemClick !== undefined ? onPopupItemClick : onItemClick)) === null || _a === undefined ? undefined : _a(item, collapsed, event);
|
|
33
47
|
} }))) }))));
|
|
34
48
|
return (React__default.createElement(Popover, { disabled: disabled, open: open, onOpenChange: (nextOpen) => {
|
|
35
49
|
if (nextOpen && disabled)
|
|
36
50
|
return;
|
|
37
51
|
wrappedOnOpenChange(nextOpen);
|
|
38
|
-
}, placement: "right-start", strategy: "fixed", openDelay: DEFAULT_POPUP_DELAY, closeDelay: DEFAULT_POPUP_DELAY, offset:
|
|
52
|
+
}, placement: "right-start", strategy: "fixed", openDelay: DEFAULT_POPUP_DELAY, closeDelay: DEFAULT_POPUP_DELAY, offset: popoverOffset, enableSafePolygon: true, className: b('icon-popover', { 'item-type': type }), content: content }, children));
|
|
39
53
|
};
|
|
40
54
|
ItemPopup.displayName = 'ItemPopup';
|
|
41
55
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem} from '../../../types';\nimport {getPopupItemHeight, getPopupItemsHeight, getSelectedItemIndex} from '../utils';\n\nimport {Item} from './Item';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst
|
|
1
|
+
{"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem} from '../../../types';\nimport {getPopupItemHeight, getPopupItemsHeight, getSelectedItemIndex} from '../utils';\n\nimport {Item} from './Item';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst POPUP_MAIN_AXIS_OFFSET = 14;\nconst POPUP_CROSS_AXIS_OFFSET_WITH_TITLE = -30;\nconst POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE = 0;\n\nconst DEFAULT_POPUP_DELAY = 100;\n\ninterface Props {\n items: AsideHeaderItem[];\n /** Optional title rendered at the top of the popup. */\n title?: string;\n open?: boolean;\n disabled?: boolean;\n type?: string;\n collapsed?: boolean;\n hideIcon?: boolean;\n itemClassName?: string;\n children: React.ReactElement;\n onOpenChange?: (open: boolean) => void;\n onPopupItemClick?: AsideHeaderItem['onItemClick'];\n onItemClick?: AsideHeaderItem['onItemClick'];\n}\n\nexport const ItemPopup: React.FC<Props> = ({\n items,\n itemClassName,\n title,\n open,\n disabled,\n type,\n collapsed = false,\n hideIcon = false,\n children,\n onPopupItemClick,\n onItemClick,\n onOpenChange,\n}) => {\n const nestedOpenCountRef = React.useRef(0);\n\n const popoverOffset = React.useMemo<NonNullable<PopupProps['offset']>>(\n () => ({\n mainAxis: POPUP_MAIN_AXIS_OFFSET,\n crossAxis: title\n ? POPUP_CROSS_AXIS_OFFSET_WITH_TITLE\n : POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE,\n }),\n [title],\n );\n\n const registerNestedOpen = React.useCallback((delta: number) => {\n nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);\n }, []);\n\n const nestContextValue = React.useMemo(() => ({registerNestedOpen}), [registerNestedOpen]);\n\n const wrappedOnOpenChange = React.useCallback(\n (next: boolean) => {\n if (!next && nestedOpenCountRef.current > 0) {\n return;\n }\n\n onOpenChange?.(next);\n },\n [onOpenChange],\n );\n\n const handlePopupContentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n event.stopPropagation();\n }, []);\n\n if (!items.length) {\n return children;\n }\n\n const content = (\n <ItemPopupNestContext.Provider value={nestContextValue}>\n <div className={b('popup-content', {collapsed})} onClick={handlePopupContentClick}>\n {title && <div className={b('popup-title')}>{title}</div>}\n <List\n items={items}\n selectedItemIndex={getSelectedItemIndex(items)}\n itemHeight={getPopupItemHeight}\n itemsHeight={getPopupItemsHeight}\n itemClassName={b('root-menu-item', itemClassName)}\n virtualized={false}\n filterable={false}\n sortable={false}\n renderItem={(item) => (\n <Item\n {...item}\n qa={undefined}\n compact={false}\n className={b('popup-item')}\n hideIcon={hideIcon}\n stopClickPropagation={!item.itemWrapper}\n enableTooltip={false}\n bringForward={false}\n popupVisible={false}\n renderPopupContent={undefined}\n onOpenChangePopup={undefined}\n popupRef={undefined}\n onItemClick={(_innerItem, _innerCollapsed, event) => {\n if (!item.current) {\n onOpenChange?.(false);\n }\n\n (onPopupItemClick ?? onItemClick)?.(item, collapsed, event);\n }}\n />\n )}\n />\n </div>\n </ItemPopupNestContext.Provider>\n );\n\n return (\n <Popover\n disabled={disabled}\n open={open}\n onOpenChange={(nextOpen) => {\n if (nextOpen && disabled) return;\n wrappedOnOpenChange(nextOpen);\n }}\n placement=\"right-start\"\n strategy=\"fixed\"\n openDelay={DEFAULT_POPUP_DELAY}\n closeDelay={DEFAULT_POPUP_DELAY}\n offset={popoverOffset}\n enableSafePolygon\n className={b('icon-popover', {'item-type': type})}\n content={content}\n >\n {children}\n </Popover>\n );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["React"],"mappings":"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"}
|