npm - @hh.ru/magritte-ui-menu - Versions diffs - 1.0.3 → 1.0.5 - Mend

@hh.ru/magritte-ui-menu 1.0.3 → 1.0.5

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.

Files changed (19) hide show

package/Drop.js CHANGED Viewed

@@ -12,8 +12,8 @@ const DROP_PROPS = {
     role: 'menu',
 };
 const MenuDrop = (props) => {
-    const { activatorRef, onClose, placement, visible } = useContext(MenuContext);
-    return (jsx(Drop, { ...props, ...DROP_PROPS, activatorRef: activatorRef, onClose: onClose, placement: placement, visible: visible }));
+    const { activatorRef, onClose, placement, setDropContainer, visible } = useContext(MenuContext);
+    return (jsx(Drop, { ...props, ...DROP_PROPS, activatorRef: activatorRef, onClose: onClose, placement: placement, ref: setDropContainer, visible: visible }));
 };
 MenuDrop.displayName = 'Menu.Drop';

package/Drop.js.map CHANGED Viewed

	@@ -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, onClose, placement, visible } = useContext(MenuContext);\n\n return (\n <Drop\n {...props}\n {...DROP_PROPS}\n activatorRef={activatorRef}\n onClose={onClose}\n placement={placement}\n visible={visible}\n />\n );\n};\n\nMenuDrop.displayName = 'Menu.Drop';\n"],"names":["_jsx"],"mappings":";;;;;AAKa,MAAA,UAAU,GAAuB;AAC1C,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,aAAa,EAAE,EAAE;AACjB,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,IAAI,EAAE,MAAM;EACd;AAEW,MAAA,QAAQ,GAcjB,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;~~IAE9E~~,QACIA,~~GAAC~~,~~CAAA~~,IAAI,~~EACG~~,EAAA,~~GAAA~~,KAAK,~~KACL~~,UAAU,EACd,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,~~EAClB~~,~~CAAA~~,EACJ;AACN,EAAE;AAEF,QAAQ,CAAC,WAAW,GAAG,WAAW;;;;"}
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, onClose, placement, setDropContainer, visible } = useContext(MenuContext);\n\n return (\n <Drop\n {...props}\n {...DROP_PROPS}\n activatorRef={activatorRef}\n onClose={onClose}\n placement={placement}\n ref={setDropContainer}\n visible={visible}\n />\n );\n};\n\nMenuDrop.displayName = 'Menu.Drop';\n"],"names":["_jsx"],"mappings":";;;;;AAKa,MAAA,UAAU,GAAuB;AAC1C,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,aAAa,EAAE,EAAE;AACjB,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,IAAI,EAAE,MAAM;EACd;AAEW,MAAA,QAAQ,GAcjB,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAEhG,IAAA,QACIA,GAAA,CAAC,IAAI,EAAA,EAAA,GACG,KAAK,EAAA,GACL,UAAU,EACd,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,gBAAgB,EACrB,OAAO,EAAE,OAAO,EAAA,CAClB,EACJ;AACN,EAAE;AAEF,QAAQ,CAAC,WAAW,GAAG,WAAW;;;;"}

package/Item.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import './index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext, useRef, useState, cloneElement } from 'react';
+import { forwardRef, useContext, useRef, useState, useEffect, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import classnames from 'classnames';
+import { throttle } from '@hh.ru/magritte-common-func-utils';
 import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
@@ -14,7 +15,7 @@ import { DROP_PROPS } from './Drop.js';
 import { MenuContext } from './context.js';
 import { isSwitchComponent } from '@hh.ru/magritte-ui-switch';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './menu-DKheRsOM.js';
+import { s as styles } from './menu-ChEsgmKq.js';
 import '@hh.ru/magritte-common-use-disabled';
 const DEFAULT_ICON_PROPS = {
@@ -37,27 +38,120 @@ const SUBMENU_DROP_PLACEMENT = [
     'left-bottom',
     'left-center',
 ];
+const SUBMENU_CLOSE_DELAY_MS = 500;
+const MOUSE_MOVE_THROTTLE_MS = 50;
+const MIN_MOUSE_MOVE_SQUARED = 16;
+const sign = (P, A, B) => {
+    return (A.x - B.x) * (P.y - B.y) >= (P.x - B.x) * (A.y - B.y);
+};
+const isPointInsideTriangle = (P, A, B, C) => {
+    const values = [sign(P, A, B), sign(P, B, C), sign(P, C, A)];
+    return (values[0] && values[1] && values[2]) || (!values[0] && !values[1] && !values[2]);
+};
+const findNearestSubmenuEdge = (dropCoords, submenuCoords) => {
+    if (submenuCoords.right > dropCoords.right) {
+        return [
+            { x: submenuCoords.left, y: submenuCoords.top },
+            { x: submenuCoords.left, y: submenuCoords.bottom },
+        ];
+    }
+    return [
+        { x: submenuCoords.right, y: submenuCoords.top },
+        { x: submenuCoords.right, y: submenuCoords.bottom },
+    ];
+};
 const MenuItem = forwardRef(({ children, className, disabled = false, icon, subitems, selected, style = 'neutral', rightContent, subtitle, tag, ...props }, ref) => {
     const { isMobile } = useBreakpoint();
     const contextValue = useContext(MenuContext);
-    const { mobileSubmenuContainer, mobileTitleContainer, setMobileSubmenuVisible, submenuAllowed } = contextValue;
-    const activatorRef = useRef(null);
-    const refCallback = useMultipleRefs(activatorRef, ref);
+    const { dropContainer, itemWithVisibleSubmenu, mobileSubmenuContainer, mobileTitleContainer, setItemWithVisibleSubmenu, submenuAllowed, } = contextValue;
+    const itemRef = useRef(null);
+    const itemRefCallback = useMultipleRefs(itemRef, ref);
+    const submenuRef = useRef(null);
     const [hasHover, setHover] = useState(false);
     const [submenuVisible, setSubmenuVisible] = useState(false);
+    const submenuCloseTimeoutRef = useRef(null);
     const hasSwitch = !selected && isSwitchComponent(rightContent);
     const hasSubmenu = !selected && !isSwitchComponent(rightContent) && submenuAllowed && subitems;
-    const showSubmenu = (visible) => {
-        setSubmenuVisible(visible);
-        setMobileSubmenuVisible?.(visible);
+    const showSubmenu = () => {
+        if (submenuCloseTimeoutRef.current !== null) {
+            clearTimeout(submenuCloseTimeoutRef.current);
+            submenuCloseTimeoutRef.current = null;
+        }
+        setSubmenuVisible(true);
+        setItemWithVisibleSubmenu?.(itemRef.current);
     };
+    const stateRef = useRef({
+        dropCoords: null,
+        isMouseOutsideItem: null,
+        prevMouseCoords: null,
+        submenuCoords: null,
+    });
+    useEffect(() => {
+        if (itemWithVisibleSubmenu !== itemRef.current) {
+            if (submenuCloseTimeoutRef.current !== null) {
+                clearTimeout(submenuCloseTimeoutRef.current);
+                submenuCloseTimeoutRef.current = null;
+            }
+            setSubmenuVisible(false);
+        }
+    }, [itemWithVisibleSubmenu]);
+    useEffect(() => {
+        if (!dropContainer || !itemRef.current || !submenuVisible || !submenuRef.current) {
+            return void 0;
+        }
+        const checkIfMouseIsMovingTowardsSubmenu = throttle((event) => {
+            const currentMouseCoords = { x: event.clientX, y: event.clientY };
+            if (stateRef.current.dropCoords !== null &&
+                stateRef.current.isMouseOutsideItem &&
+                stateRef.current.prevMouseCoords !== null &&
+                stateRef.current.submenuCoords !== null) {
+                const deltaX = currentMouseCoords.x - stateRef.current.prevMouseCoords.x;
+                const deltaY = currentMouseCoords.y - stateRef.current.prevMouseCoords.y;
+                if (deltaX * deltaX + deltaY * deltaY < MIN_MOUSE_MOVE_SQUARED) {
+                    return;
+                }
+                const nearestSubmenuEdge = findNearestSubmenuEdge(stateRef.current.dropCoords, stateRef.current.submenuCoords);
+                const isMouseMovingTowardsSubmenu = isPointInsideTriangle(currentMouseCoords, stateRef.current.prevMouseCoords, nearestSubmenuEdge[0], nearestSubmenuEdge[1]);
+                if (isMouseMovingTowardsSubmenu && submenuCloseTimeoutRef.current !== null) {
+                    clearTimeout(submenuCloseTimeoutRef.current);
+                    submenuCloseTimeoutRef.current = null;
+                }
+                if (!isMouseMovingTowardsSubmenu && submenuCloseTimeoutRef.current === null) {
+                    submenuCloseTimeoutRef.current = setTimeout(() => {
+                        submenuCloseTimeoutRef.current = null;
+                        setSubmenuVisible(false);
+                    }, SUBMENU_CLOSE_DELAY_MS);
+                }
+            }
+            stateRef.current.prevMouseCoords = currentMouseCoords;
+        }, MOUSE_MOVE_THROTTLE_MS);
+        document.addEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);
+        dropContainer.addEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);
+        stateRef.current.dropCoords = dropContainer.getBoundingClientRect();
+        stateRef.current.submenuCoords = submenuRef.current.getBoundingClientRect();
+        return () => {
+            document.removeEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);
+            dropContainer.removeEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);
+            checkIfMouseIsMovingTowardsSubmenu.cancel();
+            if (submenuCloseTimeoutRef.current !== null) {
+                clearTimeout(submenuCloseTimeoutRef.current);
+                submenuCloseTimeoutRef.current = null;
+            }
+            stateRef.current = {
+                dropCoords: null,
+                isMouseOutsideItem: null,
+                prevMouseCoords: null,
+                submenuCoords: null,
+            };
+        };
+    }, [dropContainer, submenuVisible, setSubmenuVisible]);
     return (jsx(DisabledWrapper, { disabled: disabled, children: jsxs("div", { ...props, "aria-disabled": disabled, className: classnames(className, { [styles.disabled]: disabled }, styles.dropContentMargin, styles.item, styles[style]), onClick: (event) => {
                 props.onClick?.(event);
                 if (hasSwitch) {
                     rightContent.props.onClick?.();
                 }
                 if (hasSubmenu) {
-                    showSubmenu(true);
+                    showSubmenu();
                 }
             }, onKeyDown: (event) => {
                 props.onKeyDown?.(event);
@@ -67,7 +161,7 @@ const MenuItem = forwardRef(({ children, className, disabled = false, icon, subi
                         rightContent.props.onClick?.();
                     }
                     else if (hasSubmenu) {
-                        showSubmenu(true);
+                        showSubmenu();
                     }
                     else {
                         event.target.click();
@@ -77,17 +171,30 @@ const MenuItem = forwardRef(({ children, className, disabled = false, icon, subi
                 props.onMouseEnter?.(event);
                 if (!isMobile) {
                     setHover(true);
-                    if (hasSubmenu) {
-                        showSubmenu(true);
+                    if (hasSubmenu &&
+                        !(submenuVisible && submenuRef.current?.contains(event.target))) {
+                        showSubmenu();
+                        stateRef.current.isMouseOutsideItem = false;
                     }
                 }
             }, onMouseLeave: (event) => {
                 props.onMouseLeave?.(event);
                 if (!isMobile) {
                     setHover(false);
-                    showSubmenu(false); // TODO реализовать треугольную safe zone
+                    if (hasSubmenu) {
+                        stateRef.current.isMouseOutsideItem = true;
+                    }
+                }
+            }, onMouseMove: (event) => {
+                props.onMouseMove?.(event);
+                if (hasSubmenu &&
+                    !(submenuVisible && submenuRef.current?.contains(event.target))) {
+                    showSubmenu();
+                    stateRef.current.isMouseOutsideItem = false;
                 }
-            }, ref: refCallback, role: "menuitem", tabIndex: disabled ? -1 : 0, children: [icon && (jsx("div", { className: styles.itemIcon, children: jsx(IconDefaultPropsContext, { props: DEFAULT_ICON_PROPS[style], children: icon }) })), jsxs("div", { className: styles.itemText, children: [jsx(Text, { ellipsis: true, style: TEXT_STYLE[style], typography: isMobile ? 'label-2-regular' : 'label-3-regular', children: children }), subtitle && (jsx(Text, { ellipsis: true, style: SECONDARY_TEXT_STYLE[style], typography: "label-3-regular", children: subtitle }))] }), tag && (jsx("div", { className: styles.itemTag, children: cloneElement(tag, { onSurface: hasHover }) })), selected && (jsx("div", { className: styles.itemRightContent, children: jsx(CheckOutlinedSize24, { initialColor: "secondary" }) })), hasSwitch && (jsx("div", { className: styles.itemRightContent, onClick: (event) => event.stopPropagation(), children: rightContent })), hasSubmenu && (jsxs(MenuContext.Provider, { value: { ...contextValue, submenuAllowed: false }, children: [jsxs("div", { className: styles.itemRightContent, children: [jsx(Text, { ellipsis: true, style: SECONDARY_TEXT_STYLE[style], typography: "label-3-regular", children: rightContent }), jsx(ChevronRightOutlinedSize24, { initialColor: "secondary" })] }), jsx(Drop, { ...DROP_PROPS, activatorRef: activatorRef, onClose: () => setSubmenuVisible(false), placement: SUBMENU_DROP_PLACEMENT, visible: submenuVisible, children: subitems }), submenuVisible && mobileSubmenuContainer && createPortal(subitems, mobileSubmenuContainer), submenuVisible && mobileTitleContainer && createPortal(children, mobileTitleContainer)] }))] }) }));
+            }, ref: itemRefCallback, role: "menuitem", tabIndex: disabled ? -1 : 0, children: [icon && (jsx("div", { className: styles.itemIcon, children: jsx(IconDefaultPropsContext, { props: DEFAULT_ICON_PROPS[style], children: icon }) })), jsxs("div", { className: styles.itemText, children: [jsx(Text, { ellipsis: true, style: TEXT_STYLE[style], typography: isMobile ? 'label-2-regular' : 'label-3-regular', children: children }), subtitle && (jsx(Text, { ellipsis: true, style: SECONDARY_TEXT_STYLE[style], typography: "label-3-regular", children: subtitle }))] }), tag && (jsx("div", { className: styles.itemTag, children: cloneElement(tag, { onSurface: hasHover }) })), selected && (jsx("div", { className: styles.itemRightContent, children: jsx(CheckOutlinedSize24, { initialColor: "secondary" }) })), hasSwitch && (jsx("div", { className: styles.itemRightContent, onClick: (event) => event.stopPropagation(), children: rightContent })), hasSubmenu && (jsxs(MenuContext.Provider, { value: { ...contextValue, submenuAllowed: false }, children: [jsxs("div", { className: styles.itemRightContent, children: [jsx(Text, { ellipsis: true, style: SECONDARY_TEXT_STYLE[style], typography: "label-3-regular", children: rightContent }), jsx(ChevronRightOutlinedSize24, { initialColor: "secondary" })] }), jsx(Drop, { ...DROP_PROPS, activatorRef: itemRef, onClose: () => setSubmenuVisible(false), placement: SUBMENU_DROP_PLACEMENT, ref: submenuRef, visible: submenuVisible, children: subitems }), mobileSubmenuContainer &&
+                            createPortal(submenuVisible ? subitems : null, mobileSubmenuContainer), mobileTitleContainer &&
+                            createPortal(submenuVisible ? children : null, mobileTitleContainer)] }))] }) }));
 });
 MenuItem.displayName = 'Menu.Item';

package/Item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Item.js","sources":["src/Item.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useContext, 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 { 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 { mobileSubmenuContainer, mobileTitleContainer, setMobileSubmenuVisible, submenuAllowed } = contextValue;\n const activatorRef = useRef(null);\n const refCallback = useMultipleRefs(activatorRef, ref);\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 showSubmenu = (visible: boolean) => {\n setSubmenuVisible(visible);\n setMobileSubmenuVisible?.(visible);\n };\n\n return (\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 props.onClick?.(event);\n if (hasSwitch) {\n rightContent.props.onClick?.();\n }\n if (hasSubmenu) {\n showSubmenu(true);\n }\n }}\n onKeyDown={(event) => {\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(true);\n } else {\n (event.target as HTMLElement).click();\n }\n }\n }}\n onMouseEnter={(event) => {\n props.onMouseEnter?.(event);\n if (!isMobile) {\n setHover(true);\n if (hasSubmenu) {\n showSubmenu(true);\n }\n }\n }}\n onMouseLeave={(event) => {\n props.onMouseLeave?.(event);\n if (!isMobile) {\n setHover(false);\n showSubmenu(false); // TODO реализовать треугольную safe zone\n }\n }}\n ref={refCallback}\n role=\"menuitem\"\n tabIndex={disabled ? -1 : 0}\n >\n {icon && (\n <div className={styles.itemIcon}>\n <IconDefaultPropsContext props={DEFAULT_ICON_PROPS[style]}>{icon}</IconDefaultPropsContext>\n </div>\n )}\n <div className={styles.itemText}>\n <Text\n ellipsis\n style={TEXT_STYLE[style]}\n typography={isMobile ? 'label-2-regular' : 'label-3-regular'}\n >\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 <MenuContext.Provider value={{ ...contextValue, submenuAllowed: false }}>\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 <Drop\n {...DROP_PROPS}\n activatorRef={activatorRef}\n onClose={() => setSubmenuVisible(false)}\n placement={SUBMENU_DROP_PLACEMENT}\n visible={submenuVisible}\n >\n {subitems}\n </Drop>\n {submenuVisible && mobileSubmenuContainer && createPortal(subitems, mobileSubmenuContainer)}\n {submenuVisible && mobileTitleContainer && createPortal(children, mobileTitleContainer)}\n </MenuContext.Provider>\n )}\n </div>\n </DisabledWrapper>\n );\n }\n);\n\nMenuItem.displayName = 'Menu.Item';\n"],"names":["_jsx","_jsxs"],"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 { throttle } from '@hh.ru/magritte-common-func-utils';\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 { 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\nconst SUBMENU_CLOSE_DELAY_MS = 500;\n\nconst MOUSE_MOVE_THROTTLE_MS = 50;\nconst MIN_MOUSE_MOVE_SQUARED = 16;\n\ntype Point = { x: number; y: number };\n\nconst sign = (P: Point, A: Point, B: Point): boolean => {\n return (A.x - B.x) * (P.y - B.y) >= (P.x - B.x) * (A.y - B.y);\n};\n\nconst isPointInsideTriangle = (P: Point, A: Point, B: Point, C: Point): boolean => {\n const values = [sign(P, A, B), sign(P, B, C), sign(P, C, A)];\n return (values[0] && values[1] && values[2]) \|\| (!values[0] && !values[1] && !values[2]);\n};\n\nconst findNearestSubmenuEdge = (dropCoords: DOMRect, submenuCoords: DOMRect): [Point, Point] => {\n if (submenuCoords.right > dropCoords.right) {\n return [\n { x: submenuCoords.left, y: submenuCoords.top },\n { x: submenuCoords.left, y: submenuCoords.bottom },\n ];\n }\n return [\n { x: submenuCoords.right, y: submenuCoords.top },\n { x: submenuCoords.right, y: submenuCoords.bottom },\n ];\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 } = 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 const submenuCloseTimeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const hasSwitch = !selected && isSwitchComponent(rightContent);\n const hasSubmenu = !selected && !isSwitchComponent(rightContent) && submenuAllowed && subitems;\n\n const showSubmenu = () => {\n if (submenuCloseTimeoutRef.current !== null) {\n clearTimeout(submenuCloseTimeoutRef.current);\n submenuCloseTimeoutRef.current = null;\n }\n setSubmenuVisible(true);\n setItemWithVisibleSubmenu?.(itemRef.current);\n };\n\n const stateRef = useRef<{\n dropCoords: DOMRect \| null;\n isMouseOutsideItem: boolean \| null;\n prevMouseCoords: Point \| null;\n submenuCoords: DOMRect \| null;\n }>({\n dropCoords: null,\n isMouseOutsideItem: null,\n prevMouseCoords: null,\n submenuCoords: null,\n });\n\n useEffect(() => {\n if (itemWithVisibleSubmenu !== itemRef.current) {\n if (submenuCloseTimeoutRef.current !== null) {\n clearTimeout(submenuCloseTimeoutRef.current);\n submenuCloseTimeoutRef.current = null;\n }\n setSubmenuVisible(false);\n }\n }, [itemWithVisibleSubmenu]);\n\n useEffect(() => {\n if (!dropContainer \|\| !itemRef.current \|\| !submenuVisible \|\| !submenuRef.current) {\n return void 0;\n }\n\n const checkIfMouseIsMovingTowardsSubmenu = throttle((event: MouseEvent) => {\n const currentMouseCoords: Point = { x: event.clientX, y: event.clientY };\n\n if (\n stateRef.current.dropCoords !== null &&\n stateRef.current.isMouseOutsideItem &&\n stateRef.current.prevMouseCoords !== null &&\n stateRef.current.submenuCoords !== null\n ) {\n const deltaX = currentMouseCoords.x - stateRef.current.prevMouseCoords.x;\n const deltaY = currentMouseCoords.y - stateRef.current.prevMouseCoords.y;\n if (deltaX * deltaX + deltaY * deltaY < MIN_MOUSE_MOVE_SQUARED) {\n return;\n }\n\n const nearestSubmenuEdge = findNearestSubmenuEdge(\n stateRef.current.dropCoords,\n stateRef.current.submenuCoords\n );\n\n const isMouseMovingTowardsSubmenu = isPointInsideTriangle(\n currentMouseCoords,\n stateRef.current.prevMouseCoords,\n nearestSubmenuEdge[0],\n nearestSubmenuEdge[1]\n );\n\n if (isMouseMovingTowardsSubmenu && submenuCloseTimeoutRef.current !== null) {\n clearTimeout(submenuCloseTimeoutRef.current);\n submenuCloseTimeoutRef.current = null;\n }\n\n if (!isMouseMovingTowardsSubmenu && submenuCloseTimeoutRef.current === null) {\n submenuCloseTimeoutRef.current = setTimeout(() => {\n submenuCloseTimeoutRef.current = null;\n setSubmenuVisible(false);\n }, SUBMENU_CLOSE_DELAY_MS);\n }\n }\n\n stateRef.current.prevMouseCoords = currentMouseCoords;\n }, MOUSE_MOVE_THROTTLE_MS);\n\n document.addEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);\n dropContainer.addEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);\n\n stateRef.current.dropCoords = dropContainer.getBoundingClientRect();\n stateRef.current.submenuCoords = submenuRef.current.getBoundingClientRect();\n\n return () => {\n document.removeEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);\n dropContainer.removeEventListener('mousemove', checkIfMouseIsMovingTowardsSubmenu);\n checkIfMouseIsMovingTowardsSubmenu.cancel();\n\n if (submenuCloseTimeoutRef.current !== null) {\n clearTimeout(submenuCloseTimeoutRef.current);\n submenuCloseTimeoutRef.current = null;\n }\n\n stateRef.current = {\n dropCoords: null,\n isMouseOutsideItem: null,\n prevMouseCoords: null,\n submenuCoords: null,\n };\n };\n }, [dropContainer, submenuVisible, setSubmenuVisible]);\n\n return (\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 props.onClick?.(event);\n if (hasSwitch) {\n rightContent.props.onClick?.();\n }\n if (hasSubmenu) {\n showSubmenu();\n }\n }}\n onKeyDown={(event) => {\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 props.onMouseEnter?.(event);\n if (!isMobile) {\n setHover(true);\n if (\n hasSubmenu &&\n !(submenuVisible && submenuRef.current?.contains(event.target as HTMLElement))\n ) {\n showSubmenu();\n stateRef.current.isMouseOutsideItem = false;\n }\n }\n }}\n onMouseLeave={(event) => {\n props.onMouseLeave?.(event);\n if (!isMobile) {\n setHover(false);\n if (hasSubmenu) {\n stateRef.current.isMouseOutsideItem = true;\n }\n }\n }}\n onMouseMove={(event) => {\n props.onMouseMove?.(event);\n if (\n hasSubmenu &&\n !(submenuVisible && submenuRef.current?.contains(event.target as HTMLElement))\n ) {\n showSubmenu();\n stateRef.current.isMouseOutsideItem = false;\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]}>{icon}</IconDefaultPropsContext>\n </div>\n )}\n <div className={styles.itemText}>\n <Text\n ellipsis\n style={TEXT_STYLE[style]}\n typography={isMobile ? 'label-2-regular' : 'label-3-regular'}\n >\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 <MenuContext.Provider value={{ ...contextValue, submenuAllowed: false }}>\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 <Drop\n {...DROP_PROPS}\n activatorRef={itemRef}\n onClose={() => setSubmenuVisible(false)}\n placement={SUBMENU_DROP_PLACEMENT}\n ref={submenuRef}\n visible={submenuVisible}\n >\n {subitems}\n </Drop>\n {mobileSubmenuContainer &&\n createPortal(submenuVisible ? subitems : null, mobileSubmenuContainer)}\n {mobileTitleContainer &&\n createPortal(submenuVisible ? children : null, mobileTitleContainer)}\n </MenuContext.Provider>\n )}\n </div>\n </DisabledWrapper>\n );\n }\n);\n\nMenuItem.displayName = 'Menu.Item';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/Menu.js CHANGED Viewed

@@ -13,11 +13,12 @@ import { MenuQuickActions } from './QuickActions.js';
 import { MenuSectionHeader } from './SectionHeader.js';
 import { MenuContext } from './context.js';
 import { NavBar } from '@hh.ru/magritte-ui-nav-bar';
-import { s as styles } from './menu-DKheRsOM.js';
+import { s as styles } from './menu-ChEsgmKq.js';
 import '@hh.ru/magritte-ui-bottom-sheet';
 import '@hh.ru/magritte-ui-divider';
 import '@hh.ru/magritte-ui-drop';
 import 'react-dom';
+import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-icon';
@@ -32,17 +33,21 @@ const Menu = ({ activatorRef, children, onClose, placement, visible, render }) =
     const mobileMenuContainerRef = useRef(null);
     const [mobileSubmenuContainer, setMobileSubmenuContainer] = useState(null);
     const [mobileTitleContainer, setMobileTitleContainer] = useState(null);
-    const [mobileSubmenuVisible, setMobileSubmenuVisible] = useState(false);
+    const [itemWithVisibleSubmenu, setItemWithVisibleSubmenu] = useState(null);
+    const [dropContainer, setDropContainer] = useState(null);
     const contextValue = {
         activatorRef,
+        dropContainer,
+        itemWithVisibleSubmenu,
         mobileSubmenuContainer,
         mobileTitleContainer,
         onClose: () => {
-            setMobileSubmenuVisible(false);
+            setItemWithVisibleSubmenu(null);
             onClose();
         },
         placement,
-        setMobileSubmenuVisible,
+        setDropContainer,
+        setItemWithVisibleSubmenu,
         submenuAllowed: true,
         visible,
     };
@@ -51,14 +56,19 @@ const Menu = ({ activatorRef, children, onClose, placement, visible, render }) =
         if (!mobileMenuContainer) {
             return;
         }
-        mobileMenuContainer.style.height = mobileSubmenuVisible ? `${mobileSubmenuContainer?.offsetHeight ?? 0}px` : '';
-    }, [mobileSubmenuVisible, mobileSubmenuContainer]);
+        mobileMenuContainer.style.height =
+            itemWithVisibleSubmenu !== null ? `${mobileSubmenuContainer?.offsetHeight ?? 0}px` : ``;
+    }, [itemWithVisibleSubmenu, mobileSubmenuContainer]);
     if (isMobile) {
         const mobileChildren = (jsxs("div", { className: classnames(styles.mobileMenuContainer, {
-                [styles.mobileMenuContainerSlide]: mobileSubmenuVisible,
+                [styles.mobileMenuContainerSlide]: itemWithVisibleSubmenu !== null,
             }), ref: mobileMenuContainerRef, children: [jsx("div", { className: styles.mobileMainMenuContainer, children: children }), jsx("div", { className: styles.mobileSubmenuContainer, ref: setMobileSubmenuContainer })] }));
-        const closeMobileSubmenu = () => setMobileSubmenuVisible(false);
-        return (jsx(MenuContext.Provider, { value: contextValue, children: render ? (render({ children: mobileChildren, closeMobileSubmenu, mobileSubmenuVisible })) : (jsx(Menu.BottomSheet, { header: mobileSubmenuVisible && (jsx(NavBar, { children: jsx(NavBar.Actions, { centered: true, left: jsx(ChevronLeftOutlinedSize24, { onClick: closeMobileSubmenu }), children: jsx(NavBar.TitleContainer, { centered: true, title: jsx("div", { ref: setMobileTitleContainer }) }) }) })), children: mobileChildren })) }));
+        const closeMobileSubmenu = () => setItemWithVisibleSubmenu(null);
+        return (jsx(MenuContext.Provider, { value: contextValue, children: render ? (render({
+                children: mobileChildren,
+                closeMobileSubmenu,
+                mobileSubmenuVisible: itemWithVisibleSubmenu !== null,
+            })) : (jsx(Menu.BottomSheet, { header: itemWithVisibleSubmenu !== null && (jsx(NavBar, { children: jsx(NavBar.Actions, { centered: true, left: jsx(ChevronLeftOutlinedSize24, { onClick: closeMobileSubmenu }), children: jsx(NavBar.TitleContainer, { centered: true, title: jsx("div", { ref: setMobileTitleContainer }) }) }) })), children: mobileChildren })) }));
     }
     return (jsx(MenuContext.Provider, { value: contextValue, children: render ? render({ children }) : jsx(Menu.Drop, { children: children }) }));
 };

package/Menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.js","sources":["src/Menu.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { ChevronLeftOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { MenuBottomSheet } from '@hh.ru/magritte-ui-menu/BottomSheet';\nimport { MenuDivider } from '@hh.ru/magritte-ui-menu/Divider';\nimport { MenuDrop } from '@hh.ru/magritte-ui-menu/Drop';\nimport { MenuItem } from '@hh.ru/magritte-ui-menu/Item';\nimport { MenuQuickAction } from '@hh.ru/magritte-ui-menu/QuickAction';\nimport { MenuQuickActions } from '@hh.ru/magritte-ui-menu/QuickActions';\nimport { MenuSectionHeader } from '@hh.ru/magritte-ui-menu/SectionHeader';\nimport { MenuContext } from '@hh.ru/magritte-ui-menu/context';\nimport { type MenuProps } from '@hh.ru/magritte-ui-menu/types';\nimport { NavBar } from '@hh.ru/magritte-ui-nav-bar';\n\nimport styles from './menu.less';\n\nexport const Menu: React.FC<MenuProps> & {\n BottomSheet: typeof MenuBottomSheet;\n Divider: typeof MenuDivider;\n Drop: typeof MenuDrop;\n Item: typeof MenuItem;\n QuickAction: typeof MenuQuickAction;\n QuickActions: typeof MenuQuickActions;\n SectionHeader: typeof MenuSectionHeader;\n} = ({ activatorRef, children, onClose, placement, visible, render }) => {\n const { isMobile } = useBreakpoint();\n const mobileMenuContainerRef = useRef<HTMLDivElement>(null);\n const [mobileSubmenuContainer, setMobileSubmenuContainer] = useState<HTMLDivElement \| null>(null);\n const [mobileTitleContainer, setMobileTitleContainer] = useState<HTMLDivElement \| null>(null);\n const [~~mobileSubmenuVisible~~, ~~setMobileSubmenuVisible~~] = useState(~~false~~);\n\n const contextValue = {\n activatorRef,\n mobileSubmenuContainer,\n mobileTitleContainer,\n onClose: () => {\n ~~setMobileSubmenuVisible~~(~~false~~);\n onClose();\n },\n placement,\n ~~setMobileSubmenuVisible~~,\n submenuAllowed: true,\n visible,\n };\n\n useLayoutEffect(() => {\n const mobileMenuContainer = mobileMenuContainerRef.current;\n if (!mobileMenuContainer) {\n return;\n }\n mobileMenuContainer.style.height = ~~mobileSubmenuVisible~~ ? `${mobileSubmenuContainer?.offsetHeight ?? 0}px` : ~~'';\~~n }, [~~mobileSubmenuVisible~~, mobileSubmenuContainer]);\n\n if (isMobile) {\n const mobileChildren = (\n <div\n className={classnames(styles.mobileMenuContainer, {\n [styles.mobileMenuContainerSlide]: ~~mobileSubmenuVisible~~,\n })}\n ref={mobileMenuContainerRef}\n >\n <div className={styles.mobileMainMenuContainer}>{children}</div>\n <div className={styles.mobileSubmenuContainer} ref={setMobileSubmenuContainer} />\n </div>\n );\n\n const closeMobileSubmenu = () => ~~setMobileSubmenuVisible~~(~~false~~);\n\n return (\n <MenuContext.Provider value={contextValue}>\n {render ? (\n render({ children: mobileChildren, closeMobileSubmenu, mobileSubmenuVisible })\n ) : (\n <Menu.BottomSheet\n header={\n ~~mobileSubmenuVisible~~ && (\n <NavBar>\n <NavBar.Actions\n centered\n left={<ChevronLeftOutlinedSize24 onClick={closeMobileSubmenu} />}\n >\n <NavBar.TitleContainer centered title={<div ref={setMobileTitleContainer} />} />\n </NavBar.Actions>\n </NavBar>\n )\n }\n >\n {mobileChildren}\n </Menu.BottomSheet>\n )}\n </MenuContext.Provider>\n );\n }\n\n return (\n <MenuContext.Provider value={contextValue}>\n {render ? render({ children }) : <Menu.Drop>{children}</Menu.Drop>}\n </MenuContext.Provider>\n );\n};\n\nMenu.BottomSheet = MenuBottomSheet;\nMenu.Divider = MenuDivider;\nMenu.Drop = MenuDrop;\nMenu.Item = MenuItem;\nMenu.QuickAction = MenuQuickAction;\nMenu.QuickActions = MenuQuickActions;\nMenu.SectionHeader = MenuSectionHeader;\n"],"names":["_jsxs","_jsx"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAkBa,MAAA,IAAI,GAQb,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,KAAI;AACpE,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;AACrC,IAAA,MAAM,sBAAsB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC5D,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAClG,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC9F,MAAM,CAAC,~~oBAAoB~~,EAAE,~~uBAAuB~~,CAAC,GAAG,QAAQ,CAAC,~~KAAK~~,CAAC,CAAC;~~AAExE~~,IAAA,MAAM,YAAY,~~GAAG~~;~~QACjB~~,YAAY;QACZ,sBAAsB;QACtB,oBAAoB;QACpB,OAAO,EAAE,MAAK;YACV,~~uBAAuB~~,CAAC,~~KAAK~~,CAAC,CAAC;~~AAC/B~~,YAAA,OAAO,EAAE,CAAC;SACb;QACD,SAAS;QACT,~~uBAAuB~~;~~AACvB~~,QAAA,cAAc,EAAE,IAAI;QACpB,OAAO;KACV,CAAC;IAEF,eAAe,CAAC,MAAK;AACjB,QAAA,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,OAAO,CAAC;QAC3D,IAAI,CAAC,mBAAmB,EAAE;YACtB,OAAO;SACV;~~QACD~~,mBAAmB,CAAC,KAAK,CAAC,MAAM,~~GAAG~~,~~oBAAoB~~,GAAG,~~CAAA~~,~~EAAG,~~sBAAsB,EAAE,YAAY,IAAI,CAAC,~~CAAA~~,EAAA,~~CAAI~~,GAAG,EAAE,CAAC;~~AACpH~~,KAAC,EAAE,CAAC,~~oBAAoB~~,EAAE,sBAAsB,CAAC,CAAC,CAAC;~~IAEnD~~,IAAI,QAAQ,EAAE;QACV,MAAM,cAAc,IAChBA,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,mBAAmB,EAAE;AAC9C,gBAAA,CAAC,MAAM,CAAC,wBAAwB,GAAG,~~oBAAoB~~;~~AAC1D~~,aAAA,CAAC,EACF,GAAG,EAAE,sBAAsB,EAE3B,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,EAChEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,EAAE,GAAG,EAAE,yBAAyB,EAAA,CAAI,CAC/E,EAAA,CAAA,CACT,CAAC;QAEF,MAAM,kBAAkB,GAAG,MAAM,~~uBAAuB~~,CAAC,~~KAAK~~,CAAC,CAAC;~~AAEhE~~,QAAA,QACIA,GAAC,CAAA,WAAW,CAAC,QAAQ,~~EAAA~~,~~EAAC,~~KAAK,EAAE,YAAY,~~EACpC~~,QAAA,~~EAAA~~,MAAM,IACH,MAAM,CAAC,~~EAAE~~,QAAQ,EAAE,cAAc,~~EAAE,~~kBAAkB,~~EAAE,~~oBAAoB,EAAE,CAAC,~~KAE9EA~~,~~GAAC~~,~~CAAA~~,IAAI,CAAC,WAAW,EAAA,EACb,MAAM,EACF,~~oBAAoB~~,~~KAChBA~~,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EACHA,~~IAAC~~,MAAM,CAAC,OAAO,EACX,EAAA,QAAQ,~~QACR~~,IAAI,EAAEA,~~GAAC~~,~~CAAA~~,yBAAyB,~~IAAC~~,OAAO,EAAE,kBAAkB,~~EAAI~~,~~CAAA~~,~~EAAA~~,QAAA,~~EAEhEA~~,~~IAAC~~,MAAM,CAAC,cAAc,EAAA,EAAC,QAAQ,~~EAAC~~,IAAA,~~EAAA~~,KAAK,EAAEA,GAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,uBAAuB,EAAA,CAAI,~~GAAI,~~EACnE,CAAA,EAAA,CACZ,CACZ,~~EAGJ~~,QAAA,~~EAAA~~,cAAc,~~GACA~~,CACtB,EAAA,CACkB,EACzB;KACL;AAED,IAAA,QACIA,GAAA,CAAC,WAAW,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EACpC,QAAA,EAAA,MAAM,GAAG,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAGA,GAAC,CAAA,IAAI,CAAC,IAAI,EAAE,EAAA,QAAA,EAAA,QAAQ,EAAa,CAAA,EAAA,CAC/C,EACzB;AACN,EAAE;AAEF,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;AACnC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;AAC3B,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;AACrB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;AACrB,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;AACnC,IAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrC,IAAI,CAAC,aAAa,GAAG,iBAAiB;;;;"}
1	+ {"version":3,"file":"Menu.js","sources":["src/Menu.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { ChevronLeftOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { MenuBottomSheet } from '@hh.ru/magritte-ui-menu/BottomSheet';\nimport { MenuDivider } from '@hh.ru/magritte-ui-menu/Divider';\nimport { MenuDrop } from '@hh.ru/magritte-ui-menu/Drop';\nimport { MenuItem } from '@hh.ru/magritte-ui-menu/Item';\nimport { MenuQuickAction } from '@hh.ru/magritte-ui-menu/QuickAction';\nimport { MenuQuickActions } from '@hh.ru/magritte-ui-menu/QuickActions';\nimport { MenuSectionHeader } from '@hh.ru/magritte-ui-menu/SectionHeader';\nimport { type MenuContextProps, MenuContext } from '@hh.ru/magritte-ui-menu/context';\nimport { type MenuProps } from '@hh.ru/magritte-ui-menu/types';\nimport { NavBar } from '@hh.ru/magritte-ui-nav-bar';\n\nimport styles from './menu.less';\n\nexport const Menu: React.FC<MenuProps> & {\n BottomSheet: typeof MenuBottomSheet;\n Divider: typeof MenuDivider;\n Drop: typeof MenuDrop;\n Item: typeof MenuItem;\n QuickAction: typeof MenuQuickAction;\n QuickActions: typeof MenuQuickActions;\n SectionHeader: typeof MenuSectionHeader;\n} = ({ activatorRef, children, onClose, placement, visible, render }) => {\n const { isMobile } = useBreakpoint();\n const mobileMenuContainerRef = useRef<HTMLDivElement>(null);\n const [mobileSubmenuContainer, setMobileSubmenuContainer] = useState<HTMLDivElement \| null>(null);\n const [mobileTitleContainer, setMobileTitleContainer] = useState<HTMLDivElement \| null>(null);\n const [itemWithVisibleSubmenu, setItemWithVisibleSubmenu] = useState<HTMLDivElement \| null>(null);\n const [dropContainer, setDropContainer] = useState<HTMLDivElement \| null>(null);\n\n const contextValue: MenuContextProps = {\n activatorRef,\n dropContainer,\n itemWithVisibleSubmenu,\n mobileSubmenuContainer,\n mobileTitleContainer,\n onClose: () => {\n setItemWithVisibleSubmenu(null);\n onClose();\n },\n placement,\n setDropContainer,\n setItemWithVisibleSubmenu,\n submenuAllowed: true,\n visible,\n };\n\n useLayoutEffect(() => {\n const mobileMenuContainer = mobileMenuContainerRef.current;\n if (!mobileMenuContainer) {\n return;\n }\n\n mobileMenuContainer.style.height =\n itemWithVisibleSubmenu !== null ? `${mobileSubmenuContainer?.offsetHeight ?? 0}px` : ``;\n }, [itemWithVisibleSubmenu, mobileSubmenuContainer]);\n\n if (isMobile) {\n const mobileChildren = (\n <div\n className={classnames(styles.mobileMenuContainer, {\n [styles.mobileMenuContainerSlide]: itemWithVisibleSubmenu !== null,\n })}\n ref={mobileMenuContainerRef}\n >\n <div className={styles.mobileMainMenuContainer}>{children}</div>\n <div className={styles.mobileSubmenuContainer} ref={setMobileSubmenuContainer} />\n </div>\n );\n\n const closeMobileSubmenu = () => setItemWithVisibleSubmenu(null);\n\n return (\n <MenuContext.Provider value={contextValue}>\n {render ? (\n render({\n children: mobileChildren,\n closeMobileSubmenu,\n mobileSubmenuVisible: itemWithVisibleSubmenu !== null,\n })\n ) : (\n <Menu.BottomSheet\n header={\n itemWithVisibleSubmenu !== null && (\n <NavBar>\n <NavBar.Actions\n centered\n left={<ChevronLeftOutlinedSize24 onClick={closeMobileSubmenu} />}\n >\n <NavBar.TitleContainer centered title={<div ref={setMobileTitleContainer} />} />\n </NavBar.Actions>\n </NavBar>\n )\n }\n >\n {mobileChildren}\n </Menu.BottomSheet>\n )}\n </MenuContext.Provider>\n );\n }\n\n return (\n <MenuContext.Provider value={contextValue}>\n {render ? render({ children }) : <Menu.Drop>{children}</Menu.Drop>}\n </MenuContext.Provider>\n );\n};\n\nMenu.BottomSheet = MenuBottomSheet;\nMenu.Divider = MenuDivider;\nMenu.Drop = MenuDrop;\nMenu.Item = MenuItem;\nMenu.QuickAction = MenuQuickAction;\nMenu.QuickActions = MenuQuickActions;\nMenu.SectionHeader = MenuSectionHeader;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/QuickAction.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import classnames from 'classnames';
 import { DisabledWrapper } from './DisabledWrapper.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './menu-DKheRsOM.js';
+import { s as styles } from './menu-ChEsgmKq.js';
 import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-ui-icon';

package/QuickActions.js CHANGED Viewed

@@ -2,7 +2,7 @@ import './index.css';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import classnames from 'classnames';
-import { s as styles } from './menu-DKheRsOM.js';
+import { s as styles } from './menu-ChEsgmKq.js';
 const MenuQuickActions = forwardRef(({ children, className, ...props }, ref) => {
     return (jsx("div", { ...props, className: classnames(className, styles.quickActions), ref: ref, children: children }));

package/SectionHeader.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { SectionHeader } from '@hh.ru/magritte-ui-section-header';
-import { s as styles } from './menu-DKheRsOM.js';
+import { s as styles } from './menu-ChEsgmKq.js';
 const MenuSectionHeader = forwardRef((props, ref) => {
     const { isMobile } = useBreakpoint();

package/context.d.ts CHANGED Viewed

@@ -1,11 +1,14 @@
 import { type DropProps } from '@hh.ru/magritte-ui-drop';
 export interface MenuContextProps {
     activatorRef: DropProps['activatorRef'];
+    dropContainer?: HTMLDivElement | null;
+    itemWithVisibleSubmenu?: HTMLDivElement | null;
     mobileSubmenuContainer?: HTMLDivElement | null;
     mobileTitleContainer?: HTMLDivElement | null;
     onClose: VoidFunction;
     placement: DropProps['placement'];
-    setMobileSubmenuVisible?: (visible: boolean) => void;
+    setDropContainer?: React.RefCallback<HTMLDivElement | null>;
+    setItemWithVisibleSubmenu?: React.RefCallback<HTMLDivElement | null>;
     submenuAllowed?: boolean;
     visible: boolean;
 }

package/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","sources":["src/context.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { type DropProps } from '@hh.ru/magritte-ui-drop';\n\nexport interface MenuContextProps {\n activatorRef: DropProps['activatorRef'];\n mobileSubmenuContainer?: HTMLDivElement \| null;\n mobileTitleContainer?: HTMLDivElement \| null;\n onClose: VoidFunction;\n placement: DropProps['placement'];\n ~~setMobileSubmenuVisible~~?: ~~(visible:~~ ~~boolean)~~ => ~~void;\~~n submenuAllowed?: boolean;\n visible: boolean;\n}\n\nexport const MenuContext = createContext<MenuContextProps>({\n activatorRef: { current: null },\n onClose: () => void 0,\n placement: [],\n visible: false,\n});\n"],"names":[],"mappings":";;~~AAeO~~,MAAM,WAAW,GAAG,aAAa,CAAmB;AACvD,IAAA,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,IAAA,OAAO,EAAE,MAAM,KAAK,CAAC;AACrB,IAAA,SAAS,EAAE,EAAE;AACb,IAAA,OAAO,EAAE,KAAK;AACjB,CAAA;;;;"}
1	+ {"version":3,"file":"context.js","sources":["src/context.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { type DropProps } from '@hh.ru/magritte-ui-drop';\n\nexport interface MenuContextProps {\n activatorRef: DropProps['activatorRef'];\n dropContainer?: HTMLDivElement \| null;\n itemWithVisibleSubmenu?: HTMLDivElement \| null;\n mobileSubmenuContainer?: HTMLDivElement \| null;\n mobileTitleContainer?: HTMLDivElement \| null;\n onClose: VoidFunction;\n placement: DropProps['placement'];\n setDropContainer?: React.RefCallback<HTMLDivElement \| null>;\n setItemWithVisibleSubmenu?: React.RefCallback<HTMLDivElement \| null>;\n submenuAllowed?: boolean;\n visible: boolean;\n}\n\nexport const MenuContext = createContext<MenuContextProps>({\n activatorRef: { current: null },\n onClose: () => void 0,\n placement: [],\n visible: false,\n});\n"],"names":[],"mappings":";;AAkBO,MAAM,WAAW,GAAG,aAAa,CAAmB;AACvD,IAAA,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,IAAA,OAAO,EAAE,MAAM,KAAK,CAAC;AACrB,IAAA,SAAS,EAAE,EAAE;AACb,IAAA,OAAO,EAAE,KAAK;AACjB,CAAA;;;;"}

package/index.css CHANGED Viewed

@@ -19,159 +19,159 @@
   --magritte-color-background-state-negative-secondary-hovered-v24-7-3:#3D2622;
   --magritte-color-background-state-negative-secondary-pressed-v24-7-3:#3D2622;
 }
-.magritte-disabled___ZuG-J_1-0-3{
+.magritte-disabled___ZuG-J_1-0-5{
   pointer-events:none;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-drop-content-margin___q01ll_1-0-3{
+  body.magritte-old-layout .magritte-drop-content-margin___q01ll_1-0-5{
     margin:0 12px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-drop-content-margin___q01ll_1-0-3{
+  body:not(.magritte-old-layout) .magritte-drop-content-margin___q01ll_1-0-5{
     margin:0 12px;
   }
 }
-.magritte-item___HyDAw_1-0-3{
+.magritte-item___HyDAw_1-0-5{
   display:flex;
   gap:12px;
   align-items:center;
   padding:12px 16px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-item___HyDAw_1-0-3{
+  body.magritte-old-layout .magritte-item___HyDAw_1-0-5{
     cursor:pointer;
     border-radius:12px;
     padding:10px 12px;
   }
-  body.magritte-old-layout .magritte-item___HyDAw_1-0-3.focus-visible{
+  body.magritte-old-layout .magritte-item___HyDAw_1-0-5.focus-visible{
     outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v24-7-3);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-item___HyDAw_1-0-3{
+  body:not(.magritte-old-layout) .magritte-item___HyDAw_1-0-5{
     cursor:pointer;
     border-radius:12px;
     padding:10px 12px;
   }
-  body:not(.magritte-old-layout) .magritte-item___HyDAw_1-0-3.focus-visible{
+  body:not(.magritte-old-layout) .magritte-item___HyDAw_1-0-5.focus-visible{
     outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v24-7-3);
   }
 }
-.magritte-neutral___WyGeQ_1-0-3:active{
+.magritte-neutral___WyGeQ_1-0-5:active{
   background-color:var(--magritte-color-background-state-secondary-pressed-v24-7-3);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-neutral___WyGeQ_1-0-3:hover:not(:active){
+  body.magritte-old-layout .magritte-neutral___WyGeQ_1-0-5:hover:not(:active){
     background-color:var(--magritte-color-background-state-secondary-hovered-v24-7-3);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-neutral___WyGeQ_1-0-3:hover:not(:active){
+  body:not(.magritte-old-layout) .magritte-neutral___WyGeQ_1-0-5:hover:not(:active){
     background-color:var(--magritte-color-background-state-secondary-hovered-v24-7-3);
   }
 }
-.magritte-negative___F7a0c_1-0-3:active{
+.magritte-negative___F7a0c_1-0-5:active{
   background-color:var(--magritte-color-background-state-negative-secondary-pressed-v24-7-3);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-negative___F7a0c_1-0-3:hover:not(:active){
+  body.magritte-old-layout .magritte-negative___F7a0c_1-0-5:hover:not(:active){
     background-color:var(--magritte-color-background-state-negative-secondary-hovered-v24-7-3);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-negative___F7a0c_1-0-3:hover:not(:active){
+  body:not(.magritte-old-layout) .magritte-negative___F7a0c_1-0-5:hover:not(:active){
     background-color:var(--magritte-color-background-state-negative-secondary-hovered-v24-7-3);
   }
 }
-.magritte-item-icon___yCv9l_1-0-3{
+.magritte-item-icon___yCv9l_1-0-5{
   flex:0 0 auto;
   padding:4px 0;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-item-icon___yCv9l_1-0-3{
+  body.magritte-old-layout .magritte-item-icon___yCv9l_1-0-5{
     padding:0;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-item-icon___yCv9l_1-0-3{
+  body:not(.magritte-old-layout) .magritte-item-icon___yCv9l_1-0-5{
     padding:0;
   }
 }
-.magritte-item-text___GL3A5_1-0-3{
+.magritte-item-text___GL3A5_1-0-5{
   flex:1 1 auto;
   min-width:0;
   padding:4px 0;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-item-text___GL3A5_1-0-3{
+  body.magritte-old-layout .magritte-item-text___GL3A5_1-0-5{
     padding:0;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-item-text___GL3A5_1-0-3{
+  body:not(.magritte-old-layout) .magritte-item-text___GL3A5_1-0-5{
     padding:0;
   }
 }
-.magritte-item-tag___KX5wL_1-0-3{
+.magritte-item-tag___KX5wL_1-0-5{
   flex:0 1 auto;
   min-width:0;
   padding:4px 0;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-item-tag___KX5wL_1-0-3{
+  body.magritte-old-layout .magritte-item-tag___KX5wL_1-0-5{
     padding:0;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-item-tag___KX5wL_1-0-3{
+  body:not(.magritte-old-layout) .magritte-item-tag___KX5wL_1-0-5{
     padding:0;
   }
 }
-.magritte-item-right-content___U2hc1_1-0-3{
+.magritte-item-right-content___U2hc1_1-0-5{
   flex:0 1 auto;
   min-width:0;
   display:flex;
   align-items:center;
   gap:8px;
 }
-.magritte-mobile-menu-container___zlY08_1-0-3{
+.magritte-mobile-menu-container___zlY08_1-0-5{
   position:relative;
   overflow:hidden;
 }
-.magritte-mobile-main-menu-container___fOW3d_1-0-3{
+.magritte-mobile-main-menu-container___fOW3d_1-0-5{
   position:relative;
 }
-.magritte-mobile-submenu-container___od1Ev_1-0-3{
+.magritte-mobile-submenu-container___od1Ev_1-0-5{
   position:absolute;
   inset:0 -100% auto 100%;
 }
 @media (prefers-reduced-motion: no-preference){
-  .magritte-mobile-main-menu-container___fOW3d_1-0-3,
-  .magritte-mobile-submenu-container___od1Ev_1-0-3{
+  .magritte-mobile-main-menu-container___fOW3d_1-0-5,
+  .magritte-mobile-submenu-container___od1Ev_1-0-5{
     transition:transform var(--magritte-semantic-animation-time-m-duration-v24-7-3) var(--magritte-semantic-animation-ease-base-timing-function-v24-7-3);
   }
 }
-.magritte-mobile-menu-container-slide___HXiEx_1-0-3 .magritte-mobile-main-menu-container___fOW3d_1-0-3,
-.magritte-mobile-menu-container-slide___HXiEx_1-0-3 .magritte-mobile-submenu-container___od1Ev_1-0-3{
+.magritte-mobile-menu-container-slide___HXiEx_1-0-5 .magritte-mobile-main-menu-container___fOW3d_1-0-5,
+.magritte-mobile-menu-container-slide___HXiEx_1-0-5 .magritte-mobile-submenu-container___od1Ev_1-0-5{
   transform:translateX(-100%);
 }
-.magritte-quick-actions___HvUJ3_1-0-3{
+.magritte-quick-actions___HvUJ3_1-0-5{
   display:flex;
   gap:4px;
   margin:0 16px 4px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-quick-actions___HvUJ3_1-0-3{
+  body.magritte-old-layout .magritte-quick-actions___HvUJ3_1-0-5{
     margin:0 12px 4px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-quick-actions___HvUJ3_1-0-3{
+  body:not(.magritte-old-layout) .magritte-quick-actions___HvUJ3_1-0-5{
     margin:0 12px 4px;
   }
 }
-.magritte-quick-action___1K5Ip_1-0-3{
+.magritte-quick-action___1K5Ip_1-0-5{
   display:flex;
   flex-direction:column;
   align-items:center;
@@ -182,31 +182,31 @@
   min-width:0;
   padding:14px 12px;
 }
-.magritte-quick-action___1K5Ip_1-0-3:active{
+.magritte-quick-action___1K5Ip_1-0-5:active{
   background-color:var(--magritte-color-background-state-secondary-pressed-v24-7-3);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-quick-action___1K5Ip_1-0-3{
+  body.magritte-old-layout .magritte-quick-action___1K5Ip_1-0-5{
     cursor:pointer;
   }
-  body.magritte-old-layout .magritte-quick-action___1K5Ip_1-0-3:hover:not(:active){
+  body.magritte-old-layout .magritte-quick-action___1K5Ip_1-0-5:hover:not(:active){
     background-color:var(--magritte-color-background-state-secondary-hovered-v24-7-3);
   }
-  body.magritte-old-layout .magritte-quick-action___1K5Ip_1-0-3.focus-visible{
+  body.magritte-old-layout .magritte-quick-action___1K5Ip_1-0-5.focus-visible{
     outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v24-7-3);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-quick-action___1K5Ip_1-0-3{
+  body:not(.magritte-old-layout) .magritte-quick-action___1K5Ip_1-0-5{
     cursor:pointer;
   }
-  body:not(.magritte-old-layout) .magritte-quick-action___1K5Ip_1-0-3:hover:not(:active){
+  body:not(.magritte-old-layout) .magritte-quick-action___1K5Ip_1-0-5:hover:not(:active){
     background-color:var(--magritte-color-background-state-secondary-hovered-v24-7-3);
   }
-  body:not(.magritte-old-layout) .magritte-quick-action___1K5Ip_1-0-3.focus-visible{
+  body:not(.magritte-old-layout) .magritte-quick-action___1K5Ip_1-0-5.focus-visible{
     outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v24-7-3);
   }
 }
-.magritte-quick-action-text___diFW5_1-0-3{
+.magritte-quick-action-text___diFW5_1-0-5{
   max-width:100%;
 }

package/index.js CHANGED Viewed

@@ -14,6 +14,7 @@ import './Drop.js';
 import '@hh.ru/magritte-ui-drop';
 import './Item.js';
 import 'react-dom';
+import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-icon';
@@ -21,7 +22,7 @@ import './DisabledWrapper.js';
 import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-ui-typography';
 import '@hh.ru/magritte-ui-switch';
-import './menu-DKheRsOM.js';
+import './menu-ChEsgmKq.js';
 import './QuickAction.js';
 import './QuickActions.js';
 import './SectionHeader.js';

package/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/menu-ChEsgmKq.js ADDED Viewed

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"disabled":"magritte-disabled___ZuG-J_1-0-5","drop-content-margin":"magritte-drop-content-margin___q01ll_1-0-5","dropContentMargin":"magritte-drop-content-margin___q01ll_1-0-5","item":"magritte-item___HyDAw_1-0-5","neutral":"magritte-neutral___WyGeQ_1-0-5","negative":"magritte-negative___F7a0c_1-0-5","item-icon":"magritte-item-icon___yCv9l_1-0-5","itemIcon":"magritte-item-icon___yCv9l_1-0-5","item-text":"magritte-item-text___GL3A5_1-0-5","itemText":"magritte-item-text___GL3A5_1-0-5","item-tag":"magritte-item-tag___KX5wL_1-0-5","itemTag":"magritte-item-tag___KX5wL_1-0-5","item-right-content":"magritte-item-right-content___U2hc1_1-0-5","itemRightContent":"magritte-item-right-content___U2hc1_1-0-5","mobile-menu-container":"magritte-mobile-menu-container___zlY08_1-0-5","mobileMenuContainer":"magritte-mobile-menu-container___zlY08_1-0-5","mobile-main-menu-container":"magritte-mobile-main-menu-container___fOW3d_1-0-5","mobileMainMenuContainer":"magritte-mobile-main-menu-container___fOW3d_1-0-5","mobile-submenu-container":"magritte-mobile-submenu-container___od1Ev_1-0-5","mobileSubmenuContainer":"magritte-mobile-submenu-container___od1Ev_1-0-5","mobile-menu-container-slide":"magritte-mobile-menu-container-slide___HXiEx_1-0-5","mobileMenuContainerSlide":"magritte-mobile-menu-container-slide___HXiEx_1-0-5","quick-actions":"magritte-quick-actions___HvUJ3_1-0-5","quickActions":"magritte-quick-actions___HvUJ3_1-0-5","quick-action":"magritte-quick-action___1K5Ip_1-0-5","quickAction":"magritte-quick-action___1K5Ip_1-0-5","quick-action-text":"magritte-quick-action-text___diFW5_1-0-5","quickActionText":"magritte-quick-action-text___diFW5_1-0-5"};
+export { styles as s };
+//# sourceMappingURL=menu-ChEsgmKq.js.map

package/menu-ChEsgmKq.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"menu-ChEsgmKq.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-menu",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -19,6 +19,7 @@
     "watch": "yarn root:watch $(pwd)"
   },
   "dependencies": {
+    "@hh.ru/magritte-common-func-utils": "1.3.15",
     "@hh.ru/magritte-common-keyboard": "4.3.4",
     "@hh.ru/magritte-common-use-disabled": "1.0.15",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
@@ -43,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "70ac6d4c2faa2fe631fae008bb817f6cb21f6520"
+  "gitHead": "4f03f111922951e25dcee7e5ce8ea032a5a91b4a"
 }

package/menu-DKheRsOM.js DELETED Viewed

@@ -1,5 +0,0 @@
-import './index.css';
-var styles = {"disabled":"magritte-disabled___ZuG-J_1-0-3","drop-content-margin":"magritte-drop-content-margin___q01ll_1-0-3","dropContentMargin":"magritte-drop-content-margin___q01ll_1-0-3","item":"magritte-item___HyDAw_1-0-3","neutral":"magritte-neutral___WyGeQ_1-0-3","negative":"magritte-negative___F7a0c_1-0-3","item-icon":"magritte-item-icon___yCv9l_1-0-3","itemIcon":"magritte-item-icon___yCv9l_1-0-3","item-text":"magritte-item-text___GL3A5_1-0-3","itemText":"magritte-item-text___GL3A5_1-0-3","item-tag":"magritte-item-tag___KX5wL_1-0-3","itemTag":"magritte-item-tag___KX5wL_1-0-3","item-right-content":"magritte-item-right-content___U2hc1_1-0-3","itemRightContent":"magritte-item-right-content___U2hc1_1-0-3","mobile-menu-container":"magritte-mobile-menu-container___zlY08_1-0-3","mobileMenuContainer":"magritte-mobile-menu-container___zlY08_1-0-3","mobile-main-menu-container":"magritte-mobile-main-menu-container___fOW3d_1-0-3","mobileMainMenuContainer":"magritte-mobile-main-menu-container___fOW3d_1-0-3","mobile-submenu-container":"magritte-mobile-submenu-container___od1Ev_1-0-3","mobileSubmenuContainer":"magritte-mobile-submenu-container___od1Ev_1-0-3","mobile-menu-container-slide":"magritte-mobile-menu-container-slide___HXiEx_1-0-3","mobileMenuContainerSlide":"magritte-mobile-menu-container-slide___HXiEx_1-0-3","quick-actions":"magritte-quick-actions___HvUJ3_1-0-3","quickActions":"magritte-quick-actions___HvUJ3_1-0-3","quick-action":"magritte-quick-action___1K5Ip_1-0-3","quickAction":"magritte-quick-action___1K5Ip_1-0-3","quick-action-text":"magritte-quick-action-text___diFW5_1-0-3","quickActionText":"magritte-quick-action-text___diFW5_1-0-3"};
-export { styles as s };
-//# sourceMappingURL=menu-DKheRsOM.js.map

package/menu-DKheRsOM.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"menu-DKheRsOM.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}