@hh.ru/magritte-ui-menu 1.0.47 → 1.0.48
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/BottomSheet.js +14 -5
- package/BottomSheet.js.map +1 -1
- package/DisabledWrapper.js +1 -1
- package/DisabledWrapper.js.map +1 -1
- package/Divider.js +1 -1
- package/Divider.js.map +1 -1
- package/Drop.js +22 -10
- package/Drop.js.map +1 -1
- package/Item.d.ts +1 -1
- package/Item.js +161 -88
- package/Item.js.map +1 -1
- package/Menu.d.ts +8 -8
- package/Menu.js +72 -45
- package/Menu.js.map +1 -1
- package/QuickAction.d.ts +1 -1
- package/QuickAction.js +23 -5
- package/QuickAction.js.map +1 -1
- package/QuickActions.js +3 -3
- package/QuickActions.js.map +1 -1
- package/SectionHeader.js +4 -4
- package/SectionHeader.js.map +1 -1
- package/context.js +5 -5
- package/context.js.map +1 -1
- package/index.css +71 -71
- package/index.d.ts +2 -2
- package/index.js +1 -1
- package/index.mock.d.ts +1 -1
- package/index.mock.js +15 -15
- package/index.mock.js.map +1 -1
- package/menu-C3Ujgi4a.js +5 -0
- package/menu-C3Ujgi4a.js.map +1 -0
- package/package.json +12 -12
- package/safeZone.js +20 -52
- package/safeZone.js.map +1 -1
- package/useSubmenuSafeZone.d.ts +1 -1
- package/useSubmenuSafeZone.js +91 -91
- package/useSubmenuSafeZone.js.map +1 -1
- package/menu-xdoMFXxx.js +0 -5
- package/menu-xdoMFXxx.js.map +0 -1
package/BottomSheet.js
CHANGED
|
@@ -5,11 +5,20 @@ import { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
|
|
|
5
5
|
import { MenuContext } from './context.js';
|
|
6
6
|
|
|
7
7
|
const MenuBottomSheet = (props) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
const { onAfterExit, onClose, visible } = useContext(MenuContext);
|
|
9
|
+
return /* @__PURE__ */ jsx(
|
|
10
|
+
BottomSheet,
|
|
11
|
+
{
|
|
12
|
+
...props,
|
|
13
|
+
onAfterExit: () => {
|
|
14
|
+
props.onAfterExit?.();
|
|
15
|
+
onAfterExit();
|
|
16
|
+
},
|
|
17
|
+
onClose,
|
|
18
|
+
visible,
|
|
19
|
+
withContentPaddings: "top"
|
|
20
|
+
}
|
|
21
|
+
);
|
|
13
22
|
};
|
|
14
23
|
|
|
15
24
|
export { MenuBottomSheet };
|
package/BottomSheet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.js","sources":["src/BottomSheet.tsx"],"sourcesContent":["import { useContext } from 'react';\n\nimport { type BottomSheetProps, BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { MenuContext } from '@hh.ru/magritte-ui-menu/context';\n\nexport const MenuBottomSheet: React.FC<Omit<BottomSheetProps, 'onClose' | 'visible' | 'withContentPaddings'>> = (\n props\n) => {\n const { onAfterExit, onClose, visible } = useContext(MenuContext);\n\n return (\n <BottomSheet\n {...props}\n onAfterExit={() => {\n props.onAfterExit?.();\n onAfterExit();\n }}\n onClose={onClose}\n visible={visible}\n withContentPaddings=\"top\"\n />\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"BottomSheet.js","sources":["src/BottomSheet.tsx"],"sourcesContent":["import { useContext } from 'react';\n\nimport { type BottomSheetProps, BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { MenuContext } from '@hh.ru/magritte-ui-menu/context';\n\nexport const MenuBottomSheet: React.FC<Omit<BottomSheetProps, 'onClose' | 'visible' | 'withContentPaddings'>> = (\n props\n) => {\n const { onAfterExit, onClose, visible } = useContext(MenuContext);\n\n return (\n <BottomSheet\n {...props}\n onAfterExit={() => {\n props.onAfterExit?.();\n onAfterExit();\n }}\n onClose={onClose}\n visible={visible}\n withContentPaddings=\"top\"\n />\n );\n};\n"],"names":[],"mappings":";;;;;AAKa,MAAA,eAAA,GAAmG,CAC5G,KACC,KAAA;AACD,EAAA,MAAM,EAAE,WAAa,EAAA,OAAA,EAAS,OAAQ,EAAA,GAAI,WAAW,WAAW,CAAA,CAAA;AAEhE,EACI,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACI,GAAG,KAAA;AAAA,MACJ,aAAa,MAAM;AACf,QAAA,KAAA,CAAM,WAAc,IAAA,CAAA;AACpB,QAAY,WAAA,EAAA,CAAA;AAAA,OAChB;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,mBAAoB,EAAA,KAAA;AAAA,KAAA;AAAA,GACxB,CAAA;AAER;;;;"}
|
package/DisabledWrapper.js
CHANGED
|
@@ -5,7 +5,7 @@ import { IconDynamic } from '@hh.ru/magritte-ui-icon';
|
|
|
5
5
|
import { TextDynamic } from '@hh.ru/magritte-ui-typography';
|
|
6
6
|
|
|
7
7
|
const DisabledWrapper = ({ children, disabled }) => {
|
|
8
|
-
|
|
8
|
+
return /* @__PURE__ */ jsx(DisabledContext.Provider, { value: disabled, children: /* @__PURE__ */ jsx(IconDynamic, { style: { display: "contents" }, children: /* @__PURE__ */ jsx(TextDynamic, { style: { display: "contents" }, children }) }) });
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { DisabledWrapper };
|
package/DisabledWrapper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DisabledWrapper.js","sources":["src/DisabledWrapper.tsx"],"sourcesContent":["import { DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { TextDynamic } from '@hh.ru/magritte-ui-typography';\n\nexport const DisabledWrapper: React.FC<React.PropsWithChildren<{ disabled: boolean }>> = ({ children, disabled }) => {\n return (\n <DisabledContext.Provider value={disabled}>\n <IconDynamic style={{ display: 'contents' }}>\n <TextDynamic style={{ display: 'contents' }}>{children}</TextDynamic>\n </IconDynamic>\n </DisabledContext.Provider>\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"DisabledWrapper.js","sources":["src/DisabledWrapper.tsx"],"sourcesContent":["import { DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { TextDynamic } from '@hh.ru/magritte-ui-typography';\n\nexport const DisabledWrapper: React.FC<React.PropsWithChildren<{ disabled: boolean }>> = ({ children, disabled }) => {\n return (\n <DisabledContext.Provider value={disabled}>\n <IconDynamic style={{ display: 'contents' }}>\n <TextDynamic style={{ display: 'contents' }}>{children}</TextDynamic>\n </IconDynamic>\n </DisabledContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;;AAIO,MAAM,eAA4E,GAAA,CAAC,EAAE,QAAA,EAAU,UAAe,KAAA;AACjH,EACI,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA,EAAyB,OAAO,QAC7B,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,KAAA,EAAO,EAAE,OAAA,EAAS,YAC3B,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAY,KAAO,EAAA,EAAE,SAAS,UAAW,EAAA,EAAI,QAAS,EAAA,CAAA,EAC3D,CACJ,EAAA,CAAA,CAAA;AAER;;;;"}
|
package/Divider.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { Divider } from '@hh.ru/magritte-ui-divider';
|
|
4
4
|
|
|
5
5
|
const MenuDivider = (props) => {
|
|
6
|
-
|
|
6
|
+
return /* @__PURE__ */ jsx(Divider, { marginTop: 4, marginBottom: 4, ...props });
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
export { MenuDivider };
|
package/Divider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.js","sources":["src/Divider.tsx"],"sourcesContent":["import { type DividerProps, Divider } from '@hh.ru/magritte-ui-divider';\n\nexport const MenuDivider: React.FC<Omit<DividerProps, 'marginTop' | 'marginBottom' | 'mode'>> = (props) => {\n return <Divider marginTop={4} marginBottom={4} {...props} />;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"Divider.js","sources":["src/Divider.tsx"],"sourcesContent":["import { type DividerProps, Divider } from '@hh.ru/magritte-ui-divider';\n\nexport const MenuDivider: React.FC<Omit<DividerProps, 'marginTop' | 'marginBottom' | 'mode'>> = (props) => {\n return <Divider marginTop={4} marginBottom={4} {...props} />;\n};\n"],"names":[],"mappings":";;;AAEa,MAAA,WAAA,GAAmF,CAAC,KAAU,KAAA;AACvG,EAAA,2BAAQ,OAAQ,EAAA,EAAA,SAAA,EAAW,GAAG,YAAc,EAAA,CAAA,EAAI,GAAG,KAAO,EAAA,CAAA,CAAA;AAC9D;;;;"}
|
package/Drop.js
CHANGED
|
@@ -5,18 +5,30 @@ import { Drop } from '@hh.ru/magritte-ui-drop';
|
|
|
5
5
|
import { MenuContext } from './context.js';
|
|
6
6
|
|
|
7
7
|
const DROP_PROPS = {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
paddingTop: 12,
|
|
9
|
+
paddingRight: 0,
|
|
10
|
+
paddingBottom: 12,
|
|
11
|
+
paddingLeft: 0,
|
|
12
|
+
role: "menu"
|
|
13
13
|
};
|
|
14
14
|
const MenuDrop = (props) => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
const { activatorRef, onAfterExit, onClose, placement, setDropContainer, visible } = useContext(MenuContext);
|
|
16
|
+
return /* @__PURE__ */ jsx(
|
|
17
|
+
Drop,
|
|
18
|
+
{
|
|
19
|
+
...props,
|
|
20
|
+
...DROP_PROPS,
|
|
21
|
+
activatorRef,
|
|
22
|
+
onAfterExit: () => {
|
|
23
|
+
props.onAfterExit?.();
|
|
24
|
+
onAfterExit();
|
|
25
|
+
},
|
|
26
|
+
onClose,
|
|
27
|
+
placement,
|
|
28
|
+
ref: setDropContainer,
|
|
29
|
+
visible
|
|
30
|
+
}
|
|
31
|
+
);
|
|
20
32
|
};
|
|
21
33
|
|
|
22
34
|
export { DROP_PROPS, MenuDrop };
|
package/Drop.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drop.js","sources":["src/Drop.tsx"],"sourcesContent":["import { useContext } from 'react';\n\nimport { type DropProps, Drop } from '@hh.ru/magritte-ui-drop';\nimport { MenuContext } from '@hh.ru/magritte-ui-menu/context';\n\nexport const DROP_PROPS: Partial<DropProps> = {\n paddingTop: 12,\n paddingRight: 0,\n paddingBottom: 12,\n paddingLeft: 0,\n role: 'menu',\n};\n\nexport const MenuDrop: React.FC<\n Omit<\n DropProps,\n | 'activatorRef'\n | 'onClose'\n | 'padding'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'placement'\n | 'role'\n | 'visible'\n >\n> = (props) => {\n const { activatorRef, onAfterExit, onClose, placement, setDropContainer, visible } = useContext(MenuContext);\n\n return (\n <Drop\n {...props}\n {...DROP_PROPS}\n activatorRef={activatorRef}\n onAfterExit={() => {\n props.onAfterExit?.();\n onAfterExit();\n }}\n onClose={onClose}\n placement={placement}\n ref={setDropContainer}\n visible={visible}\n />\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"Drop.js","sources":["src/Drop.tsx"],"sourcesContent":["import { useContext } from 'react';\n\nimport { type DropProps, Drop } from '@hh.ru/magritte-ui-drop';\nimport { MenuContext } from '@hh.ru/magritte-ui-menu/context';\n\nexport const DROP_PROPS: Partial<DropProps> = {\n paddingTop: 12,\n paddingRight: 0,\n paddingBottom: 12,\n paddingLeft: 0,\n role: 'menu',\n};\n\nexport const MenuDrop: React.FC<\n Omit<\n DropProps,\n | 'activatorRef'\n | 'onClose'\n | 'padding'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'placement'\n | 'role'\n | 'visible'\n >\n> = (props) => {\n const { activatorRef, onAfterExit, onClose, placement, setDropContainer, visible } = useContext(MenuContext);\n\n return (\n <Drop\n {...props}\n {...DROP_PROPS}\n activatorRef={activatorRef}\n onAfterExit={() => {\n props.onAfterExit?.();\n onAfterExit();\n }}\n onClose={onClose}\n placement={placement}\n ref={setDropContainer}\n visible={visible}\n />\n );\n};\n"],"names":[],"mappings":";;;;;AAKO,MAAM,UAAiC,GAAA;AAAA,EAC1C,UAAY,EAAA,EAAA;AAAA,EACZ,YAAc,EAAA,CAAA;AAAA,EACd,aAAe,EAAA,EAAA;AAAA,EACf,WAAa,EAAA,CAAA;AAAA,EACb,IAAM,EAAA,MAAA;AACV,EAAA;AAEa,MAAA,QAAA,GAcT,CAAC,KAAU,KAAA;AACX,EAAM,MAAA,EAAE,cAAc,WAAa,EAAA,OAAA,EAAS,WAAW,gBAAkB,EAAA,OAAA,EAAY,GAAA,UAAA,CAAW,WAAW,CAAA,CAAA;AAE3G,EACI,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACI,GAAG,KAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,YAAA;AAAA,MACA,aAAa,MAAM;AACf,QAAA,KAAA,CAAM,WAAc,IAAA,CAAA;AACpB,QAAY,WAAA,EAAA,CAAA;AAAA,OAChB;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAK,EAAA,gBAAA;AAAA,MACL,OAAA;AAAA,KAAA;AAAA,GACJ,CAAA;AAER;;;;"}
|
package/Item.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { type MenuItemProps } from '
|
|
1
|
+
import { type MenuItemProps } from './types';
|
|
2
2
|
export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
package/Item.js
CHANGED
|
@@ -15,35 +15,56 @@ import { MenuContext } from './context.js';
|
|
|
15
15
|
import { useSubmenuSafeZone } from './useSubmenuSafeZone.js';
|
|
16
16
|
import { isSwitchComponent } from '@hh.ru/magritte-ui-switch';
|
|
17
17
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
18
|
-
import { s as styles } from './menu-
|
|
18
|
+
import { s as styles } from './menu-C3Ujgi4a.js';
|
|
19
19
|
import '@hh.ru/magritte-common-use-disabled';
|
|
20
20
|
import '@hh.ru/magritte-common-func-utils';
|
|
21
21
|
import './safeZone.js';
|
|
22
22
|
|
|
23
23
|
const DEFAULT_ICON_PROPS = {
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
neutral: {},
|
|
25
|
+
negative: { initialColor: "negative" }
|
|
26
26
|
};
|
|
27
27
|
const TEXT_STYLE = {
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
neutral: "primary",
|
|
29
|
+
negative: "negative"
|
|
30
30
|
};
|
|
31
31
|
const SECONDARY_TEXT_STYLE = {
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
neutral: "secondary",
|
|
33
|
+
negative: "negative-secondary"
|
|
34
34
|
};
|
|
35
35
|
const SUBMENU_DROP_PLACEMENT = [
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
"right-top",
|
|
37
|
+
"right-bottom",
|
|
38
|
+
"right-center",
|
|
39
|
+
"left-top",
|
|
40
|
+
"left-bottom",
|
|
41
|
+
"left-center"
|
|
42
42
|
];
|
|
43
|
-
const MenuItem = forwardRef(
|
|
43
|
+
const MenuItem = forwardRef(
|
|
44
|
+
({
|
|
45
|
+
children,
|
|
46
|
+
className,
|
|
47
|
+
disabled = false,
|
|
48
|
+
icon,
|
|
49
|
+
subitems,
|
|
50
|
+
selected,
|
|
51
|
+
style = "neutral",
|
|
52
|
+
rightContent,
|
|
53
|
+
subtitle,
|
|
54
|
+
tag,
|
|
55
|
+
...props
|
|
56
|
+
}, ref) => {
|
|
44
57
|
const { isMobile } = useBreakpoint();
|
|
45
58
|
const contextValue = useContext(MenuContext);
|
|
46
|
-
const {
|
|
59
|
+
const {
|
|
60
|
+
dropContainer,
|
|
61
|
+
itemWithVisibleSubmenu,
|
|
62
|
+
mobileSubmenuContainer,
|
|
63
|
+
mobileTitleContainer,
|
|
64
|
+
setItemWithVisibleSubmenu,
|
|
65
|
+
submenuAllowed,
|
|
66
|
+
visible
|
|
67
|
+
} = contextValue;
|
|
47
68
|
const itemRef = useRef(null);
|
|
48
69
|
const itemRefCallback = useMultipleRefs(itemRef, ref);
|
|
49
70
|
const submenuRef = useRef(null);
|
|
@@ -52,84 +73,136 @@ const MenuItem = forwardRef(({ children, className, disabled = false, icon, subi
|
|
|
52
73
|
const hasSwitch = !selected && isSwitchComponent(rightContent);
|
|
53
74
|
const hasSubmenu = !selected && !isSwitchComponent(rightContent) && submenuAllowed && subitems;
|
|
54
75
|
const { trackPointer, cancelPendingClose } = useSubmenuSafeZone({
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
76
|
+
active: submenuVisible,
|
|
77
|
+
dropContainer: dropContainer ?? null,
|
|
78
|
+
itemRef,
|
|
79
|
+
submenuRef,
|
|
80
|
+
onClose: () => setSubmenuVisible(false)
|
|
60
81
|
});
|
|
61
82
|
const showSubmenu = () => {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
83
|
+
cancelPendingClose();
|
|
84
|
+
setSubmenuVisible(true);
|
|
85
|
+
setItemWithVisibleSubmenu?.(itemRef.current);
|
|
65
86
|
};
|
|
66
87
|
useEffect(() => {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
88
|
+
if (itemWithVisibleSubmenu !== itemRef.current) {
|
|
89
|
+
cancelPendingClose();
|
|
90
|
+
setSubmenuVisible(false);
|
|
91
|
+
}
|
|
71
92
|
}, [itemWithVisibleSubmenu, cancelPendingClose]);
|
|
72
|
-
return
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
|
|
93
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
94
|
+
/* @__PURE__ */ jsx(DisabledWrapper, { disabled, children: /* @__PURE__ */ jsxs(
|
|
95
|
+
"div",
|
|
96
|
+
{
|
|
97
|
+
...props,
|
|
98
|
+
"aria-disabled": disabled,
|
|
99
|
+
className: classnames(
|
|
100
|
+
className,
|
|
101
|
+
{ [styles.disabled]: disabled },
|
|
102
|
+
styles.dropContentMargin,
|
|
103
|
+
styles.item,
|
|
104
|
+
styles[style]
|
|
105
|
+
),
|
|
106
|
+
onClick: (event) => {
|
|
107
|
+
if (disabled) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
props.onClick?.(event);
|
|
111
|
+
if (hasSwitch) {
|
|
112
|
+
rightContent.props.onClick?.();
|
|
113
|
+
}
|
|
114
|
+
if (hasSubmenu) {
|
|
115
|
+
showSubmenu();
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
onKeyDown: (event) => {
|
|
119
|
+
if (disabled) {
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
props.onKeyDown?.(event);
|
|
123
|
+
if (keyboardMatches(event, [keyboardKeys.Enter, keyboardKeys.Space])) {
|
|
124
|
+
event.preventDefault();
|
|
125
|
+
if (hasSwitch) {
|
|
126
|
+
rightContent.props.onClick?.();
|
|
127
|
+
} else if (hasSubmenu) {
|
|
128
|
+
showSubmenu();
|
|
129
|
+
} else {
|
|
130
|
+
event.target.click();
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
onMouseEnter: (event) => {
|
|
135
|
+
if (!disabled) {
|
|
136
|
+
props.onMouseEnter?.(event);
|
|
137
|
+
if (!isMobile) {
|
|
138
|
+
setHover(true);
|
|
139
|
+
trackPointer({ x: event.clientX, y: event.clientY });
|
|
140
|
+
if (hasSubmenu && !submenuVisible) {
|
|
141
|
+
showSubmenu();
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
onMouseLeave: (event) => {
|
|
147
|
+
if (!disabled) {
|
|
148
|
+
props.onMouseLeave?.(event);
|
|
149
|
+
}
|
|
150
|
+
if (!isMobile) {
|
|
151
|
+
setHover(false);
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
onMouseMove: (event) => {
|
|
155
|
+
if (!disabled) {
|
|
156
|
+
props.onMouseMove?.(event);
|
|
157
|
+
if (!isMobile) {
|
|
158
|
+
setHover(true);
|
|
159
|
+
trackPointer({ x: event.clientX, y: event.clientY });
|
|
160
|
+
if (hasSubmenu && !submenuVisible) {
|
|
161
|
+
showSubmenu();
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
ref: itemRefCallback,
|
|
167
|
+
role: "menuitem",
|
|
168
|
+
tabIndex: disabled ? -1 : 0,
|
|
169
|
+
children: [
|
|
170
|
+
icon && /* @__PURE__ */ jsx("div", { className: styles.itemIcon, children: /* @__PURE__ */ jsx(IconDefaultPropsContext, { props: DEFAULT_ICON_PROPS[style], children: icon }) }),
|
|
171
|
+
/* @__PURE__ */ jsxs("div", { className: styles.itemText, children: [
|
|
172
|
+
/* @__PURE__ */ jsx(Text, { ellipsis: true, style: TEXT_STYLE[style], typography: "label-2-regular", children }),
|
|
173
|
+
subtitle && /* @__PURE__ */ jsx(Text, { ellipsis: true, style: SECONDARY_TEXT_STYLE[style], typography: "label-3-regular", children: subtitle })
|
|
174
|
+
] }),
|
|
175
|
+
tag && /* @__PURE__ */ jsx("div", { className: styles.itemTag, children: cloneElement(tag, { onSurface: hasHover }) }),
|
|
176
|
+
selected && /* @__PURE__ */ jsx("div", { className: styles.itemRightContent, children: /* @__PURE__ */ jsx(CheckOutlinedSize24, { initialColor: "secondary" }) }),
|
|
177
|
+
hasSwitch && /* @__PURE__ */ jsx("div", { className: styles.itemRightContent, onClick: (event) => event.stopPropagation(), children: rightContent }),
|
|
178
|
+
hasSubmenu && /* @__PURE__ */ jsxs("div", { className: styles.itemRightContent, children: [
|
|
179
|
+
/* @__PURE__ */ jsx(Text, { ellipsis: true, style: SECONDARY_TEXT_STYLE[style], typography: "label-3-regular", children: rightContent }),
|
|
180
|
+
/* @__PURE__ */ jsx(ChevronRightOutlinedSize24, { initialColor: "secondary" })
|
|
181
|
+
] })
|
|
182
|
+
]
|
|
183
|
+
}
|
|
184
|
+
) }),
|
|
185
|
+
hasSubmenu && /* @__PURE__ */ jsxs(MenuContext.Provider, { value: { ...contextValue, submenuAllowed: false }, children: [
|
|
186
|
+
/* @__PURE__ */ jsx(
|
|
187
|
+
Drop,
|
|
188
|
+
{
|
|
189
|
+
...DROP_PROPS,
|
|
190
|
+
activatorRef: itemRef,
|
|
191
|
+
lockPlacement: true,
|
|
192
|
+
onClose: () => setSubmenuVisible(false),
|
|
193
|
+
placement: SUBMENU_DROP_PLACEMENT,
|
|
194
|
+
ref: submenuRef,
|
|
195
|
+
visible: visible && submenuVisible,
|
|
196
|
+
children: subitems
|
|
197
|
+
}
|
|
198
|
+
),
|
|
199
|
+
mobileSubmenuContainer && createPortal(submenuVisible ? subitems : null, mobileSubmenuContainer),
|
|
200
|
+
mobileTitleContainer && createPortal(submenuVisible ? children : null, mobileTitleContainer)
|
|
201
|
+
] })
|
|
202
|
+
] });
|
|
203
|
+
}
|
|
204
|
+
);
|
|
205
|
+
MenuItem.displayName = "MenuItem";
|
|
133
206
|
|
|
134
207
|
export { MenuItem };
|
|
135
208
|
//# sourceMappingURL=Item.js.map
|
package/Item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.js","sources":["src/Item.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useContext, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { type DropProps, Drop } from '@hh.ru/magritte-ui-drop';\nimport { type IconProps, IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';\nimport { CheckOutlinedSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { DisabledWrapper } from '@hh.ru/magritte-ui-menu/DisabledWrapper';\nimport { DROP_PROPS } from '@hh.ru/magritte-ui-menu/Drop';\nimport { MenuContext } from '@hh.ru/magritte-ui-menu/context';\nimport { type MenuItemProps } from '@hh.ru/magritte-ui-menu/types';\nimport { useSubmenuSafeZone } from '@hh.ru/magritte-ui-menu/useSubmenuSafeZone';\nimport { isSwitchComponent } from '@hh.ru/magritte-ui-switch';\nimport { type TagProps } from '@hh.ru/magritte-ui-tag';\nimport { type TextStyle, Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './menu.less';\n\nconst DEFAULT_ICON_PROPS: Record<NonNullable<MenuItemProps['style']>, Partial<IconProps>> = {\n neutral: {},\n negative: { initialColor: 'negative' },\n};\n\nconst TEXT_STYLE: Record<NonNullable<MenuItemProps['style']>, TextStyle> = {\n neutral: 'primary',\n negative: 'negative',\n};\n\nconst SECONDARY_TEXT_STYLE: Record<NonNullable<MenuItemProps['style']>, TextStyle> = {\n neutral: 'secondary',\n negative: 'negative-secondary',\n};\n\nconst SUBMENU_DROP_PLACEMENT: DropProps['placement'] = [\n 'right-top',\n 'right-bottom',\n 'right-center',\n 'left-top',\n 'left-bottom',\n 'left-center',\n];\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n (\n {\n children,\n className,\n disabled = false,\n icon,\n subitems,\n selected,\n style = 'neutral',\n rightContent,\n subtitle,\n tag,\n ...props\n },\n ref\n ) => {\n const { isMobile } = useBreakpoint();\n const contextValue = useContext(MenuContext);\n const {\n dropContainer,\n itemWithVisibleSubmenu,\n mobileSubmenuContainer,\n mobileTitleContainer,\n setItemWithVisibleSubmenu,\n submenuAllowed,\n visible,\n } = contextValue;\n const itemRef = useRef<HTMLDivElement>(null);\n const itemRefCallback = useMultipleRefs(itemRef, ref);\n const submenuRef = useRef<HTMLDivElement>(null);\n const [hasHover, setHover] = useState(false);\n const [submenuVisible, setSubmenuVisible] = useState(false);\n\n const hasSwitch = !selected && isSwitchComponent(rightContent);\n const hasSubmenu = !selected && !isSwitchComponent(rightContent) && submenuAllowed && subitems;\n\n const { trackPointer, cancelPendingClose } = useSubmenuSafeZone({\n active: submenuVisible,\n dropContainer: dropContainer ?? null,\n itemRef,\n submenuRef,\n onClose: () => setSubmenuVisible(false),\n });\n\n const showSubmenu = () => {\n cancelPendingClose();\n setSubmenuVisible(true);\n setItemWithVisibleSubmenu?.(itemRef.current);\n };\n\n useEffect(() => {\n if (itemWithVisibleSubmenu !== itemRef.current) {\n cancelPendingClose();\n setSubmenuVisible(false);\n }\n }, [itemWithVisibleSubmenu, cancelPendingClose]);\n\n return (\n <>\n <DisabledWrapper disabled={disabled}>\n <div\n {...props}\n aria-disabled={disabled}\n className={classnames(\n className,\n { [styles.disabled]: disabled },\n styles.dropContentMargin,\n styles.item,\n styles[style]\n )}\n onClick={(event) => {\n if (disabled) {\n return;\n }\n props.onClick?.(event);\n if (hasSwitch) {\n rightContent.props.onClick?.();\n }\n if (hasSubmenu) {\n showSubmenu();\n }\n }}\n onKeyDown={(event) => {\n if (disabled) {\n return;\n }\n props.onKeyDown?.(event);\n if (keyboardMatches(event, [keyboardKeys.Enter, keyboardKeys.Space])) {\n event.preventDefault();\n if (hasSwitch) {\n rightContent.props.onClick?.();\n } else if (hasSubmenu) {\n showSubmenu();\n } else {\n (event.target as HTMLElement).click();\n }\n }\n }}\n onMouseEnter={(event) => {\n if (!disabled) {\n props.onMouseEnter?.(event);\n if (!isMobile) {\n setHover(true);\n trackPointer({ x: event.clientX, y: event.clientY });\n\n if (hasSubmenu && !submenuVisible) {\n showSubmenu();\n }\n }\n }\n }}\n onMouseLeave={(event) => {\n if (!disabled) {\n props.onMouseLeave?.(event);\n }\n if (!isMobile) {\n setHover(false);\n }\n }}\n onMouseMove={(event) => {\n if (!disabled) {\n props.onMouseMove?.(event);\n if (!isMobile) {\n setHover(true);\n trackPointer({ x: event.clientX, y: event.clientY });\n\n if (hasSubmenu && !submenuVisible) {\n showSubmenu();\n }\n }\n }\n }}\n ref={itemRefCallback}\n role=\"menuitem\"\n tabIndex={disabled ? -1 : 0}\n >\n {icon && (\n <div className={styles.itemIcon}>\n <IconDefaultPropsContext props={DEFAULT_ICON_PROPS[style]}>\n {icon}\n </IconDefaultPropsContext>\n </div>\n )}\n <div className={styles.itemText}>\n <Text ellipsis style={TEXT_STYLE[style]} typography=\"label-2-regular\">\n {children}\n </Text>\n {subtitle && (\n <Text ellipsis style={SECONDARY_TEXT_STYLE[style]} typography=\"label-3-regular\">\n {subtitle}\n </Text>\n )}\n </div>\n {tag && (\n <div className={styles.itemTag}>\n {cloneElement(tag as React.ReactElement<TagProps>, { onSurface: hasHover })}\n </div>\n )}\n {selected && (\n <div className={styles.itemRightContent}>\n <CheckOutlinedSize24 initialColor=\"secondary\" />\n </div>\n )}\n {hasSwitch && (\n <div className={styles.itemRightContent} onClick={(event) => event.stopPropagation()}>\n {rightContent}\n </div>\n )}\n {hasSubmenu && (\n <div className={styles.itemRightContent}>\n <Text ellipsis style={SECONDARY_TEXT_STYLE[style]} typography=\"label-3-regular\">\n {rightContent}\n </Text>\n <ChevronRightOutlinedSize24 initialColor=\"secondary\" />\n </div>\n )}\n </div>\n </DisabledWrapper>\n {hasSubmenu && (\n <MenuContext.Provider value={{ ...contextValue, submenuAllowed: false }}>\n <Drop\n {...DROP_PROPS}\n activatorRef={itemRef}\n lockPlacement\n onClose={() => setSubmenuVisible(false)}\n placement={SUBMENU_DROP_PLACEMENT}\n ref={submenuRef}\n visible={visible && submenuVisible}\n >\n {subitems}\n </Drop>\n {mobileSubmenuContainer &&\n createPortal(submenuVisible ? subitems : null, mobileSubmenuContainer)}\n {mobileTitleContainer && createPortal(submenuVisible ? children : null, mobileTitleContainer)}\n </MenuContext.Provider>\n )}\n </>\n );\n }\n);\n\nMenuItem.displayName = 'MenuItem';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Item.js","sources":["src/Item.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useContext, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { type DropProps, Drop } from '@hh.ru/magritte-ui-drop';\nimport { type IconProps, IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';\nimport { CheckOutlinedSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { DisabledWrapper } from '@hh.ru/magritte-ui-menu/DisabledWrapper';\nimport { DROP_PROPS } from '@hh.ru/magritte-ui-menu/Drop';\nimport { MenuContext } from '@hh.ru/magritte-ui-menu/context';\nimport { type MenuItemProps } from '@hh.ru/magritte-ui-menu/types';\nimport { useSubmenuSafeZone } from '@hh.ru/magritte-ui-menu/useSubmenuSafeZone';\nimport { isSwitchComponent } from '@hh.ru/magritte-ui-switch';\nimport { type TagProps } from '@hh.ru/magritte-ui-tag';\nimport { type TextStyle, Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './menu.less';\n\nconst DEFAULT_ICON_PROPS: Record<NonNullable<MenuItemProps['style']>, Partial<IconProps>> = {\n neutral: {},\n negative: { initialColor: 'negative' },\n};\n\nconst TEXT_STYLE: Record<NonNullable<MenuItemProps['style']>, TextStyle> = {\n neutral: 'primary',\n negative: 'negative',\n};\n\nconst SECONDARY_TEXT_STYLE: Record<NonNullable<MenuItemProps['style']>, TextStyle> = {\n neutral: 'secondary',\n negative: 'negative-secondary',\n};\n\nconst SUBMENU_DROP_PLACEMENT: DropProps['placement'] = [\n 'right-top',\n 'right-bottom',\n 'right-center',\n 'left-top',\n 'left-bottom',\n 'left-center',\n];\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n (\n {\n children,\n className,\n disabled = false,\n icon,\n subitems,\n selected,\n style = 'neutral',\n rightContent,\n subtitle,\n tag,\n ...props\n },\n ref\n ) => {\n const { isMobile } = useBreakpoint();\n const contextValue = useContext(MenuContext);\n const {\n dropContainer,\n itemWithVisibleSubmenu,\n mobileSubmenuContainer,\n mobileTitleContainer,\n setItemWithVisibleSubmenu,\n submenuAllowed,\n visible,\n } = contextValue;\n const itemRef = useRef<HTMLDivElement>(null);\n const itemRefCallback = useMultipleRefs(itemRef, ref);\n const submenuRef = useRef<HTMLDivElement>(null);\n const [hasHover, setHover] = useState(false);\n const [submenuVisible, setSubmenuVisible] = useState(false);\n\n const hasSwitch = !selected && isSwitchComponent(rightContent);\n const hasSubmenu = !selected && !isSwitchComponent(rightContent) && submenuAllowed && subitems;\n\n const { trackPointer, cancelPendingClose } = useSubmenuSafeZone({\n active: submenuVisible,\n dropContainer: dropContainer ?? null,\n itemRef,\n submenuRef,\n onClose: () => setSubmenuVisible(false),\n });\n\n const showSubmenu = () => {\n cancelPendingClose();\n setSubmenuVisible(true);\n setItemWithVisibleSubmenu?.(itemRef.current);\n };\n\n useEffect(() => {\n if (itemWithVisibleSubmenu !== itemRef.current) {\n cancelPendingClose();\n setSubmenuVisible(false);\n }\n }, [itemWithVisibleSubmenu, cancelPendingClose]);\n\n return (\n <>\n <DisabledWrapper disabled={disabled}>\n <div\n {...props}\n aria-disabled={disabled}\n className={classnames(\n className,\n { [styles.disabled]: disabled },\n styles.dropContentMargin,\n styles.item,\n styles[style]\n )}\n onClick={(event) => {\n if (disabled) {\n return;\n }\n props.onClick?.(event);\n if (hasSwitch) {\n rightContent.props.onClick?.();\n }\n if (hasSubmenu) {\n showSubmenu();\n }\n }}\n onKeyDown={(event) => {\n if (disabled) {\n return;\n }\n props.onKeyDown?.(event);\n if (keyboardMatches(event, [keyboardKeys.Enter, keyboardKeys.Space])) {\n event.preventDefault();\n if (hasSwitch) {\n rightContent.props.onClick?.();\n } else if (hasSubmenu) {\n showSubmenu();\n } else {\n (event.target as HTMLElement).click();\n }\n }\n }}\n onMouseEnter={(event) => {\n if (!disabled) {\n props.onMouseEnter?.(event);\n if (!isMobile) {\n setHover(true);\n trackPointer({ x: event.clientX, y: event.clientY });\n\n if (hasSubmenu && !submenuVisible) {\n showSubmenu();\n }\n }\n }\n }}\n onMouseLeave={(event) => {\n if (!disabled) {\n props.onMouseLeave?.(event);\n }\n if (!isMobile) {\n setHover(false);\n }\n }}\n onMouseMove={(event) => {\n if (!disabled) {\n props.onMouseMove?.(event);\n if (!isMobile) {\n setHover(true);\n trackPointer({ x: event.clientX, y: event.clientY });\n\n if (hasSubmenu && !submenuVisible) {\n showSubmenu();\n }\n }\n }\n }}\n ref={itemRefCallback}\n role=\"menuitem\"\n tabIndex={disabled ? -1 : 0}\n >\n {icon && (\n <div className={styles.itemIcon}>\n <IconDefaultPropsContext props={DEFAULT_ICON_PROPS[style]}>\n {icon}\n </IconDefaultPropsContext>\n </div>\n )}\n <div className={styles.itemText}>\n <Text ellipsis style={TEXT_STYLE[style]} typography=\"label-2-regular\">\n {children}\n </Text>\n {subtitle && (\n <Text ellipsis style={SECONDARY_TEXT_STYLE[style]} typography=\"label-3-regular\">\n {subtitle}\n </Text>\n )}\n </div>\n {tag && (\n <div className={styles.itemTag}>\n {cloneElement(tag as React.ReactElement<TagProps>, { onSurface: hasHover })}\n </div>\n )}\n {selected && (\n <div className={styles.itemRightContent}>\n <CheckOutlinedSize24 initialColor=\"secondary\" />\n </div>\n )}\n {hasSwitch && (\n <div className={styles.itemRightContent} onClick={(event) => event.stopPropagation()}>\n {rightContent}\n </div>\n )}\n {hasSubmenu && (\n <div className={styles.itemRightContent}>\n <Text ellipsis style={SECONDARY_TEXT_STYLE[style]} typography=\"label-3-regular\">\n {rightContent}\n </Text>\n <ChevronRightOutlinedSize24 initialColor=\"secondary\" />\n </div>\n )}\n </div>\n </DisabledWrapper>\n {hasSubmenu && (\n <MenuContext.Provider value={{ ...contextValue, submenuAllowed: false }}>\n <Drop\n {...DROP_PROPS}\n activatorRef={itemRef}\n lockPlacement\n onClose={() => setSubmenuVisible(false)}\n placement={SUBMENU_DROP_PLACEMENT}\n ref={submenuRef}\n visible={visible && submenuVisible}\n >\n {subitems}\n </Drop>\n {mobileSubmenuContainer &&\n createPortal(submenuVisible ? subitems : null, mobileSubmenuContainer)}\n {mobileTitleContainer && createPortal(submenuVisible ? children : null, mobileTitleContainer)}\n </MenuContext.Provider>\n )}\n </>\n );\n }\n);\n\nMenuItem.displayName = 'MenuItem';\n"],"names":[],"mappings":"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"}
|
package/Menu.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { MenuBottomSheet } from '
|
|
2
|
-
import { MenuDivider } from '
|
|
3
|
-
import { MenuDrop } from '
|
|
4
|
-
import { MenuItem } from '
|
|
5
|
-
import { MenuQuickAction } from '
|
|
6
|
-
import { MenuQuickActions } from '
|
|
7
|
-
import { MenuSectionHeader } from '
|
|
8
|
-
import { type MenuProps } from '
|
|
1
|
+
import { MenuBottomSheet } from './BottomSheet';
|
|
2
|
+
import { MenuDivider } from './Divider';
|
|
3
|
+
import { MenuDrop } from './Drop';
|
|
4
|
+
import { MenuItem } from './Item';
|
|
5
|
+
import { MenuQuickAction } from './QuickAction';
|
|
6
|
+
import { MenuQuickActions } from './QuickActions';
|
|
7
|
+
import { MenuSectionHeader } from './SectionHeader';
|
|
8
|
+
import { type MenuProps } from './types';
|
|
9
9
|
interface MenuComponents {
|
|
10
10
|
BottomSheet: typeof MenuBottomSheet;
|
|
11
11
|
Divider: typeof MenuDivider;
|