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

package/DisabledWrapper.d.ts

@@ -0,0 +1,3 @@
+export declare const DisabledWrapper: React.FC<React.PropsWithChildren<{
+    disabled: boolean;
+}>>;

package/DisabledWrapper.js

@@ -0,0 +1,12 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { DisabledContext } from '@hh.ru/magritte-common-use-disabled';
+import { IconDynamic } from '@hh.ru/magritte-ui-icon';
+import { TextDynamic } from '@hh.ru/magritte-ui-typography';
+
+const DisabledWrapper = ({ children, disabled }) => {
+    return (jsx(DisabledContext.Provider, { value: disabled, children: jsx(IconDynamic, { style: { display: 'contents' }, children: jsx(TextDynamic, { style: { display: 'contents' }, children: children }) }) }));
+};
+
+export { DisabledWrapper };
+//# sourceMappingURL=DisabledWrapper.js.map

package/DisabledWrapper.js.map

@@ -0,0 +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":["_jsx"],"mappings":";;;;;AAIa,MAAA,eAAe,GAA6D,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAI;AAChH,IAAA,QACIA,GAAC,CAAA,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,EAAA,QAAA,EACrCA,IAAC,WAAW,EAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YACvCA,GAAC,CAAA,WAAW,EAAC,EAAA,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAG,QAAA,EAAA,QAAQ,GAAe,EAC3D,CAAA,EAAA,CACS,EAC7B;AACN;;;;"}

package/Item.d.ts

@@ -1,2 +1,2 @@
 import { type MenuItemProps } from '@hh.ru/magritte-ui-menu/types';
-export declare const MenuItem: React.FC<MenuItemProps>;
+export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/Item.js

@@ -1,19 +1,21 @@
 import './index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useContext, useRef, useState, isValidElement, cloneElement } from 'react';
+import { forwardRef, useContext, useRef, useState, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import classnames from 'classnames';
 import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
-import { DisabledContext } from '@hh.ru/magritte-common-use-disabled';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { Drop } from '@hh.ru/magritte-ui-drop';
-import { IconDynamic, IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';
+import { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';
 import { CheckOutlinedSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { DisabledWrapper } from './DisabledWrapper.js';
 import { DROP_PROPS } from './Drop.js';
 import { MenuContext } from './context.js';
 import { isSwitchComponent } from '@hh.ru/magritte-ui-switch';
-import { TextDynamic, Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './menu-DUjBkv3I.js';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { s as styles } from './menu-DKheRsOM.js';
+import '@hh.ru/magritte-common-use-disabled';
 
 const DEFAULT_ICON_PROPS = {
     neutral: {},
@@ -35,59 +37,58 @@ const SUBMENU_DROP_PLACEMENT = [
     'left-bottom',
     'left-center',
 ];
-const MenuItem = ({ children, className, disabled = false, icon, subitems, selected, style = 'neutral', rightContent, subtitle, tag, ...props }) => {
+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 [hasHover, setHover] = useState(false);
     const [submenuVisible, setSubmenuVisible] = useState(false);
     const hasSwitch = !selected && isSwitchComponent(rightContent);
-    const hasSubmenu = !selected && !isSwitchComponent(rightContent) && isValidElement(subitems) && submenuAllowed;
+    const hasSubmenu = !selected && !isSwitchComponent(rightContent) && submenuAllowed && subitems;
     const showSubmenu = (visible) => {
         setSubmenuVisible(visible);
         setMobileSubmenuVisible?.(visible);
     };
-    return (jsx(DisabledContext.Provider, { value: disabled, children: jsx(IconDynamic, { style: { display: 'contents' }, children: jsx(TextDynamic, { style: { display: 'contents' }, 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);
-                        }
-                    }, onKeyDown: (event) => {
-                        props.onKeyDown?.(event);
-                        if (keyboardMatches(event, [keyboardKeys.Enter, keyboardKeys.Space])) {
-                            event.preventDefault();
-                            if (hasSwitch) {
-                                rightContent.props.onClick?.();
-                            }
-                            else if (hasSubmenu) {
-                                showSubmenu(true);
-                            }
-                            else {
-                                event.target.click();
-                            }
-                        }
-                    }, onMouseEnter: (event) => {
-                        props.onMouseEnter?.(event);
-                        if (!isMobile) {
-                            setHover(true);
-                            if (hasSubmenu) {
-                                showSubmenu(true);
-                            }
-                        }
-                    }, onMouseLeave: (event) => {
-                        props.onMouseLeave?.(event);
-                        if (!isMobile) {
-                            setHover(false);
-                            showSubmenu(false); // TODO реализовать треугольную safe zone
-                        }
-                    }, ref: activatorRef, 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)] }))] }) }) }) }));
-};
+    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);
+                }
+            }, onKeyDown: (event) => {
+                props.onKeyDown?.(event);
+                if (keyboardMatches(event, [keyboardKeys.Enter, keyboardKeys.Space])) {
+                    event.preventDefault();
+                    if (hasSwitch) {
+                        rightContent.props.onClick?.();
+                    }
+                    else if (hasSubmenu) {
+                        showSubmenu(true);
+                    }
+                    else {
+                        event.target.click();
+                    }
+                }
+            }, onMouseEnter: (event) => {
+                props.onMouseEnter?.(event);
+                if (!isMobile) {
+                    setHover(true);
+                    if (hasSubmenu) {
+                        showSubmenu(true);
+                    }
+                }
+            }, onMouseLeave: (event) => {
+                props.onMouseLeave?.(event);
+                if (!isMobile) {
+                    setHover(false);
+                    showSubmenu(false); // TODO реализовать треугольную safe zone
+                }
+            }, 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)] }))] }) }));
+});
 MenuItem.displayName = 'Menu.Item';
 
 export { MenuItem };

package/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["src/Item.tsx"],"sourcesContent":["import { cloneElement, isValidElement, 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 { DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { type DropProps, Drop } from '@hh.ru/magritte-ui-drop';\nimport { type IconProps, IconDefaultPropsContext, IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { CheckOutlinedSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\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, TextDynamic } 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: React.FC<MenuItemProps> = ({\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    const { isMobile } = useBreakpoint();\n    const contextValue = useContext(MenuContext);\n    const { mobileSubmenuContainer, mobileTitleContainer, setMobileSubmenuVisible, submenuAllowed } = contextValue;\n    const activatorRef = useRef(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) && isValidElement(subitems) && submenuAllowed;\n\n    const showSubmenu = (visible: boolean) => {\n        setSubmenuVisible(visible);\n        setMobileSubmenuVisible?.(visible);\n    };\n\n    return (\n        <DisabledContext.Provider value={disabled}>\n            <IconDynamic style={{ display: 'contents' }}>\n                <TextDynamic style={{ display: 'contents' }}>\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={activatorRef}\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\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 &&\n                                    mobileSubmenuContainer &&\n                                    createPortal(subitems, mobileSubmenuContainer)}\n                                {submenuVisible && mobileTitleContainer && createPortal(children, mobileTitleContainer)}\n                            </MenuContext.Provider>\n                        )}\n                    </div>\n                </TextDynamic>\n            </IconDynamic>\n        </DisabledContext.Provider>\n    );\n};\n\nMenuItem.displayName = 'Menu.Item';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"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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"}

package/Menu.d.ts

@@ -2,6 +2,8 @@ import { MenuBottomSheet } from '@hh.ru/magritte-ui-menu/BottomSheet';
 import { MenuDivider } from '@hh.ru/magritte-ui-menu/Divider';
 import { MenuDrop } from '@hh.ru/magritte-ui-menu/Drop';
 import { MenuItem } from '@hh.ru/magritte-ui-menu/Item';
+import { MenuQuickAction } from '@hh.ru/magritte-ui-menu/QuickAction';
+import { MenuQuickActions } from '@hh.ru/magritte-ui-menu/QuickActions';
 import { MenuSectionHeader } from '@hh.ru/magritte-ui-menu/SectionHeader';
 import { type MenuProps } from '@hh.ru/magritte-ui-menu/types';
 export declare const Menu: React.FC<MenuProps> & {
@@ -9,5 +11,7 @@ export declare const Menu: React.FC<MenuProps> & {
     Divider: typeof MenuDivider;
     Drop: typeof MenuDrop;
     Item: typeof MenuItem;
+    QuickAction: typeof MenuQuickAction;
+    QuickActions: typeof MenuQuickActions;
     SectionHeader: typeof MenuSectionHeader;
 };

package/Menu.js

@@ -8,19 +8,23 @@ import { MenuBottomSheet } from './BottomSheet.js';
 import { MenuDivider } from './Divider.js';
 import { MenuDrop } from './Drop.js';
 import { MenuItem } from './Item.js';
+import { MenuQuickAction } from './QuickAction.js';
+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-DUjBkv3I.js';
+import { s as styles } from './menu-DKheRsOM.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-keyboard';
-import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-icon';
-import '@hh.ru/magritte-ui-switch';
+import './DisabledWrapper.js';
+import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-switch';
 import '@hh.ru/magritte-ui-section-header';
 
 const Menu = ({ activatorRef, children, onClose, placement, visible, render }) => {
@@ -62,6 +66,8 @@ Menu.BottomSheet = MenuBottomSheet;
 Menu.Divider = MenuDivider;
 Menu.Drop = MenuDrop;
 Menu.Item = MenuItem;
+Menu.QuickAction = MenuQuickAction;
+Menu.QuickActions = MenuQuickActions;
 Menu.SectionHeader = MenuSectionHeader;
 
 export { Menu };

package/Menu.js.map

@@ -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 { 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    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.SectionHeader = MenuSectionHeader;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"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":"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"}

package/QuickAction.d.ts

@@ -0,0 +1,2 @@
+import { type MenuQuickActionProps } from '@hh.ru/magritte-ui-menu/types';
+export declare const MenuQuickAction: import("react").ForwardRefExoticComponent<MenuQuickActionProps & import("react").RefAttributes<HTMLButtonElement>>;

package/QuickAction.js

@@ -0,0 +1,17 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-icon';
+
+const MenuQuickAction = forwardRef(({ children, className, disabled = false, icon, ...props }, ref) => {
+    return (jsx(DisabledWrapper, { disabled: disabled, children: jsxs("button", { ...props, "aria-disabled": disabled, className: classnames(className, { [styles.disabled]: disabled }, styles.quickAction), disabled: disabled, ref: ref, role: "menuitem", tabIndex: disabled ? -1 : 0, type: "button", children: [icon, jsx("span", { className: styles.quickActionText, children: jsx(Text, { ellipsis: true, typography: "label-4-regular", children: children }) })] }) }));
+});
+MenuQuickAction.displayName = 'Menu.QuickAction';
+
+export { MenuQuickAction };
+//# sourceMappingURL=QuickAction.js.map

package/QuickAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickAction.js","sources":["src/QuickAction.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport { DisabledWrapper } from '@hh.ru/magritte-ui-menu/DisabledWrapper';\nimport { type MenuQuickActionProps } from '@hh.ru/magritte-ui-menu/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './menu.less';\n\nexport const MenuQuickAction = forwardRef<HTMLButtonElement, MenuQuickActionProps>(\n    ({ children, className, disabled = false, icon, ...props }, ref) => {\n        return (\n            <DisabledWrapper disabled={disabled}>\n                <button\n                    {...props}\n                    aria-disabled={disabled}\n                    className={classnames(className, { [styles.disabled]: disabled }, styles.quickAction)}\n                    disabled={disabled}\n                    ref={ref}\n                    role=\"menuitem\"\n                    tabIndex={disabled ? -1 : 0}\n                    type=\"button\"\n                >\n                    {icon}\n                    <span className={styles.quickActionText}>\n                        <Text ellipsis typography=\"label-4-regular\">\n                            {children}\n                        </Text>\n                    </span>\n                </button>\n            </DisabledWrapper>\n        );\n    }\n);\n\nMenuQuickAction.displayName = 'Menu.QuickAction';\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AASa,MAAA,eAAe,GAAG,UAAU,CACrC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC/D,IAAA,QACIA,GAAC,CAAA,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAC/B,QAAA,EAAAC,IAAA,CAAA,QAAA,EAAA,EAAA,GACQ,KAAK,EAAA,eAAA,EACM,QAAQ,EACvB,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,EAAE,EAAE,MAAM,CAAC,WAAW,CAAC,EACrF,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,IAAI,EAAC,QAAQ,EAAA,QAAA,EAAA,CAEZ,IAAI,EACLD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,eAAe,YACnCA,GAAC,CAAA,IAAI,IAAC,QAAQ,EAAA,IAAA,EAAC,UAAU,EAAC,iBAAiB,YACtC,QAAQ,EAAA,CACN,GACJ,CACF,EAAA,CAAA,EAAA,CACK,EACpB;AACN,CAAC,EACH;AAEF,eAAe,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/QuickActions.d.ts

@@ -0,0 +1,3 @@
+export declare const MenuQuickActions: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/QuickActions.js

@@ -0,0 +1,13 @@
+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';
+
+const MenuQuickActions = forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ...props, className: classnames(className, styles.quickActions), ref: ref, children: children }));
+});
+MenuQuickActions.displayName = 'Menu.QuickActions';
+
+export { MenuQuickActions };
+//# sourceMappingURL=QuickActions.js.map

package/QuickActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickActions.js","sources":["src/QuickActions.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport styles from './menu.less';\n\nexport const MenuQuickActions = forwardRef<\n    HTMLDivElement,\n    React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>\n>(({ children, className, ...props }, ref) => {\n    return (\n        <div {...props} className={classnames(className, styles.quickActions)} ref={ref}>\n            {children}\n        </div>\n    );\n});\n\nMenuQuickActions.displayName = 'Menu.QuickActions';\n"],"names":["_jsx"],"mappings":";;;;;AAKa,MAAA,gBAAgB,GAAG,UAAU,CAGxC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACzC,QACIA,gBAAS,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,GAAG,EAC1E,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC,EAAE;AAEH,gBAAgB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/SectionHeader.d.ts

@@ -1,2 +1,2 @@
 import { type SectionHeaderProps } from '@hh.ru/magritte-ui-section-header';
-export declare const MenuSectionHeader: React.FC<Partial<SectionHeaderProps>>;
+export declare const MenuSectionHeader: import("react").ForwardRefExoticComponent<Partial<SectionHeaderProps> & import("react").RefAttributes<HTMLDivElement>>;

package/SectionHeader.js

@@ -1,13 +1,14 @@
 import './index.css';
 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-DUjBkv3I.js';
+import { s as styles } from './menu-DKheRsOM.js';
 
-const MenuSectionHeader = (props) => {
+const MenuSectionHeader = forwardRef((props, ref) => {
     const { isMobile } = useBreakpoint();
-    return (jsx("div", { className: styles.dropContentMargin, children: jsx(SectionHeader, { padding: isMobile ? 16 : 12, ...props }) }));
-};
+    return (jsx("div", { className: styles.dropContentMargin, children: jsx(SectionHeader, { padding: isMobile ? 16 : 12, ref: ref, ...props }) }));
+});
 MenuSectionHeader.displayName = 'Menu.SectionHeader';
 
 export { MenuSectionHeader };

package/SectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.js","sources":["src/SectionHeader.tsx"],"sourcesContent":["import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { type SectionHeaderProps, SectionHeader } from '@hh.ru/magritte-ui-section-header';\n\nimport styles from './menu.less';\n\nexport const MenuSectionHeader: React.FC<Partial<SectionHeaderProps>> = (props) => {\n    const { isMobile } = useBreakpoint();\n\n    return (\n        <div className={styles.dropContentMargin}>\n            <SectionHeader padding={isMobile ? 16 : 12} {...props} />\n        </div>\n    );\n};\n\nMenuSectionHeader.displayName = 'Menu.SectionHeader';\n"],"names":["_jsx"],"mappings":";;;;;AAKa,MAAA,iBAAiB,GAA0C,CAAC,KAAK,KAAI;AAC9E,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IAErC,QACIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACpC,QAAA,EAAAA,GAAA,CAAC,aAAa,EAAA,EAAC,OAAO,EAAE,QAAQ,GAAG,EAAE,GAAG,EAAE,EAAA,GAAM,KAAK,EAAA,CAAI,EACvD,CAAA,EACR;AACN,EAAE;AAEF,iBAAiB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
+{"version":3,"file":"SectionHeader.js","sources":["src/SectionHeader.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { type SectionHeaderProps, SectionHeader } from '@hh.ru/magritte-ui-section-header';\n\nimport styles from './menu.less';\n\nexport const MenuSectionHeader = forwardRef<HTMLDivElement, Partial<SectionHeaderProps>>((props, ref) => {\n    const { isMobile } = useBreakpoint();\n\n    return (\n        <div className={styles.dropContentMargin}>\n            <SectionHeader padding={isMobile ? 16 : 12} ref={ref} {...props} />\n        </div>\n    );\n});\n\nMenuSectionHeader.displayName = 'Menu.SectionHeader';\n"],"names":["_jsx"],"mappings":";;;;;;AAOa,MAAA,iBAAiB,GAAG,UAAU,CAA8C,CAAC,KAAK,EAAE,GAAG,KAAI;AACpG,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;AAErC,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA,QAAA,EACpCA,GAAC,CAAA,aAAa,EAAC,EAAA,OAAO,EAAE,QAAQ,GAAG,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,EAAM,GAAA,KAAK,EAAI,CAAA,EAAA,CACjE,EACR;AACN,CAAC,EAAE;AAEH,iBAAiB,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/index.css

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

package/index.js

@@ -15,11 +15,15 @@ import '@hh.ru/magritte-ui-drop';
 import './Item.js';
 import 'react-dom';
 import '@hh.ru/magritte-common-keyboard';
-import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-icon';
-import '@hh.ru/magritte-ui-switch';
+import './DisabledWrapper.js';
+import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-ui-typography';
-import './menu-DUjBkv3I.js';
+import '@hh.ru/magritte-ui-switch';
+import './menu-DKheRsOM.js';
+import './QuickAction.js';
+import './QuickActions.js';
 import './SectionHeader.js';
 import '@hh.ru/magritte-ui-section-header';
 import '@hh.ru/magritte-ui-nav-bar';

package/index.js.map

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

package/index.mock.d.ts

@@ -4,5 +4,7 @@ export declare const Menu: import("react").ForwardRefExoticComponent<Record<stri
     Divider: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
     Drop: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
     Item: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
+    QuickAction: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
+    QuickActions: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
     SectionHeader: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
 };

package/index.mock.js

@@ -5,12 +5,16 @@ const BottomSheet = mockComponent('Menu.BottomSheet', undefined, { withChildren:
 const Divider = mockComponent('Menu.Divider', undefined);
 const Drop = mockComponent('Menu.Drop', undefined, { withChildren: true });
 const Item = mockComponent('Menu.Item', undefined, { withChildren: true });
+const QuickAction = mockComponent('Menu.QuickAction', undefined, { withChildren: true });
+const QuickActions = mockComponent('Menu.QuickActions', undefined, { withChildren: true });
 const SectionHeader = mockComponent('Menu.SectionHeader', undefined, { withChildren: true });
 const Menu = Object.assign(mockComponent('Menu', undefined, { withChildren: true }), {
     BottomSheet,
     Divider,
     Drop,
     Item,
+    QuickAction,
+    QuickActions,
     SectionHeader,
 });
 

package/index.mock.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.mock.js","sources":["src/index.mock.ts"],"sourcesContent":["import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport * from '@hh.ru/magritte-ui-menu/types';\n\nconst BottomSheet = mockComponent('Menu.BottomSheet', undefined, { withChildren: true });\n\nconst Divider = mockComponent('Menu.Divider', undefined);\n\nconst Drop = mockComponent('Menu.Drop', undefined, { withChildren: true });\n\nconst Item = mockComponent('Menu.Item', undefined, { withChildren: true });\n\nconst SectionHeader = mockComponent('Menu.SectionHeader', undefined, { withChildren: true });\n\nexport const Menu = Object.assign(mockComponent('Menu', undefined, { withChildren: true }), {\n    BottomSheet,\n    Divider,\n    Drop,\n    Item,\n    SectionHeader,\n});\n"],"names":[],"mappings":";;AAIA,MAAM,WAAW,GAAG,aAAa,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAEzF,MAAM,OAAO,GAAG,aAAa,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;AAEzD,MAAM,IAAI,GAAG,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAE3E,MAAM,IAAI,GAAG,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAE3E,MAAM,aAAa,GAAG,aAAa,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;MAEhF,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE;IACxF,WAAW;IACX,OAAO;IACP,IAAI;IACJ,IAAI;IACJ,aAAa;AAChB,CAAA;;;;"}
+{"version":3,"file":"index.mock.js","sources":["src/index.mock.ts"],"sourcesContent":["import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport * from '@hh.ru/magritte-ui-menu/types';\n\nconst BottomSheet = mockComponent('Menu.BottomSheet', undefined, { withChildren: true });\n\nconst Divider = mockComponent('Menu.Divider', undefined);\n\nconst Drop = mockComponent('Menu.Drop', undefined, { withChildren: true });\n\nconst Item = mockComponent('Menu.Item', undefined, { withChildren: true });\n\nconst QuickAction = mockComponent('Menu.QuickAction', undefined, { withChildren: true });\n\nconst QuickActions = mockComponent('Menu.QuickActions', undefined, { withChildren: true });\n\nconst SectionHeader = mockComponent('Menu.SectionHeader', undefined, { withChildren: true });\n\nexport const Menu = Object.assign(mockComponent('Menu', undefined, { withChildren: true }), {\n    BottomSheet,\n    Divider,\n    Drop,\n    Item,\n    QuickAction,\n    QuickActions,\n    SectionHeader,\n});\n"],"names":[],"mappings":";;AAIA,MAAM,WAAW,GAAG,aAAa,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAEzF,MAAM,OAAO,GAAG,aAAa,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;AAEzD,MAAM,IAAI,GAAG,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAE3E,MAAM,IAAI,GAAG,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAE3E,MAAM,WAAW,GAAG,aAAa,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAEzF,MAAM,YAAY,GAAG,aAAa,CAAC,mBAAmB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAE3F,MAAM,aAAa,GAAG,aAAa,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;MAEhF,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE;IACxF,WAAW;IACX,OAAO;IACP,IAAI;IACJ,IAAI;IACJ,WAAW;IACX,YAAY;IACZ,aAAa;AAChB,CAAA;;;;"}

package/menu-DKheRsOM.js

@@ -0,0 +1,5 @@
+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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-menu",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -21,18 +21,19 @@
   "dependencies": {
     "@hh.ru/magritte-common-keyboard": "4.3.4",
     "@hh.ru/magritte-common-use-disabled": "1.0.15",
-    "@hh.ru/magritte-design-tokens": "24.7.2",
-    "@hh.ru/magritte-ui-bottom-sheet": "9.4.9",
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
+    "@hh.ru/magritte-design-tokens": "24.7.3",
+    "@hh.ru/magritte-ui-bottom-sheet": "9.4.11",
     "@hh.ru/magritte-ui-breakpoint": "6.1.1",
-    "@hh.ru/magritte-ui-divider": "3.2.1",
-    "@hh.ru/magritte-ui-drop": "12.3.34",
-    "@hh.ru/magritte-ui-icon": "14.2.13",
+    "@hh.ru/magritte-ui-divider": "3.2.2",
+    "@hh.ru/magritte-ui-drop": "12.3.35",
+    "@hh.ru/magritte-ui-icon": "14.2.14",
     "@hh.ru/magritte-ui-mock-component": "1.1.7",
-    "@hh.ru/magritte-ui-nav-bar": "2.0.1",
-    "@hh.ru/magritte-ui-section-header": "1.1.0",
-    "@hh.ru/magritte-ui-switch": "3.1.25",
-    "@hh.ru/magritte-ui-tag": "5.3.13",
-    "@hh.ru/magritte-ui-typography": "5.3.6"
+    "@hh.ru/magritte-ui-nav-bar": "2.0.2",
+    "@hh.ru/magritte-ui-section-header": "1.1.1",
+    "@hh.ru/magritte-ui-switch": "3.1.26",
+    "@hh.ru/magritte-ui-tag": "5.3.14",
+    "@hh.ru/magritte-ui-typography": "5.3.7"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -42,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2d1368843f436bae7ed053430de10909840d8cc4"
+  "gitHead": "70ac6d4c2faa2fe631fae008bb817f6cb21f6520"
 }

package/types.d.ts

@@ -1,9 +1,14 @@
 import { type DropProps } from '@hh.ru/magritte-ui-drop';
 export interface MenuProps extends React.PropsWithChildren {
+    /** Активатор, относительно которого показывается Drop */
     activatorRef: DropProps['activatorRef'];
+    /** Колбек onClose для BottomSheet и Drop */
     onClose: VoidFunction;
+    /** Направление размещения Drop относительно активатора */
     placement: DropProps['placement'];
+    /** Флаг видимости для BottomSheet и Drop */
     visible: boolean;
+    /** Кастомная рендер-функция для передачи параметров и добавления произвольного контента в BottomSheet и Drop */
     render?: (props: MenuRenderFuncProps) => React.ReactElement;
 }
 export interface MenuRenderFuncProps extends React.PropsWithChildren {
@@ -29,3 +34,8 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** Компонент <Switch /> либо текст. Не будет отображаться, если selected=true. */
     rightContent?: React.ReactNode;
 }
+export interface MenuQuickActionProps extends React.HTMLAttributes<HTMLButtonElement>, React.PropsWithChildren {
+    disabled?: boolean;
+    /** Иконка размера 24px */
+    icon: React.ReactNode;
+}

package/menu-DUjBkv3I.js

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

package/menu-DUjBkv3I.js.map

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