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

package/QuickActions.js.map

@@ -1 +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;;;;"}
+{"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 = 'MenuQuickActions';\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,kBAAkB;;;;"}

package/SectionHeader.d.ts

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

package/SectionHeader.js

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

package/SectionHeader.js.map

@@ -1 +1 @@
-{"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;;;;"}
+{"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, Omit<SectionHeaderProps, 'padding'>>((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 = 'MenuSectionHeader';\n"],"names":["_jsx"],"mappings":";;;;;;AAOa,MAAA,iBAAiB,GAAG,UAAU,CAAsD,CAAC,KAAK,EAAE,GAAG,KAAI;AAC5G,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,mBAAmB;;;;"}

package/context.d.ts

@@ -5,6 +5,7 @@ export interface MenuContextProps {
     itemWithVisibleSubmenu?: HTMLDivElement | null;
     mobileSubmenuContainer?: HTMLDivElement | null;
     mobileTitleContainer?: HTMLDivElement | null;
+    onAfterExit: VoidFunction;
     onClose: VoidFunction;
     placement: DropProps['placement'];
     setDropContainer?: React.RefCallback<HTMLDivElement | null>;

package/context.js

@@ -3,6 +3,7 @@ import { createContext } from 'react';
 
 const MenuContext = createContext({
     activatorRef: { current: null },
+    onAfterExit: () => void 0,
     onClose: () => void 0,
     placement: [],
     visible: false,

package/context.js.map

@@ -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    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;;;;"}
+{"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    onAfterExit: VoidFunction;\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    onAfterExit: () => void 0,\n    onClose: () => void 0,\n    placement: [],\n    visible: false,\n});\n"],"names":[],"mappings":";;AAmBO,MAAM,WAAW,GAAG,aAAa,CAAmB;AACvD,IAAA,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,IAAA,WAAW,EAAE,MAAM,KAAK,CAAC;AACzB,IAAA,OAAO,EAAE,MAAM,KAAK,CAAC;AACrB,IAAA,SAAS,EAAE,EAAE;AACb,IAAA,OAAO,EAAE,KAAK;AACjB,CAAA;;;;"}

package/index.css

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

package/index.js

@@ -14,15 +14,17 @@ 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';
 import './DisabledWrapper.js';
 import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-ui-typography';
+import './useSubmenuSafeZone.js';
+import '@hh.ru/magritte-common-func-utils';
+import './safeZone.js';
 import '@hh.ru/magritte-ui-switch';
-import './menu-ChEsgmKq.js';
+import './menu-DKXKF84l.js';
 import './QuickAction.js';
 import './QuickActions.js';
 import './SectionHeader.js';

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/menu-DKXKF84l.js

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

package/menu-DKXKF84l.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-menu",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -27,11 +27,11 @@
     "@hh.ru/magritte-ui-bottom-sheet": "9.4.11",
     "@hh.ru/magritte-ui-breakpoint": "6.1.1",
     "@hh.ru/magritte-ui-divider": "3.2.2",
-    "@hh.ru/magritte-ui-drop": "12.3.35",
+    "@hh.ru/magritte-ui-drop": "12.3.36",
     "@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.2",
-    "@hh.ru/magritte-ui-section-header": "1.1.1",
+    "@hh.ru/magritte-ui-section-header": "1.1.2",
     "@hh.ru/magritte-ui-switch": "3.1.26",
     "@hh.ru/magritte-ui-tag": "5.3.14",
     "@hh.ru/magritte-ui-typography": "5.3.7"
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4f03f111922951e25dcee7e5ce8ea032a5a91b4a"
+  "gitHead": "adc83fc2c408e1d347e82ccd5973c0cb8840fdba"
 }

package/safeZone.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Геометрия «безопасного треугольника» (подменю с учётом направления курсора).
+ *
+ * Пока подменю открыто и курсор уходит с родительского пункта, подменю должно
+ * оставаться открытым, если курсор движется в его сторону. «Движение в сторону»
+ * моделируется треугольником: его вершина — предыдущая позиция курсора, а
+ * основание — ближайшая к родительскому меню грань подменю. Если текущая позиция
+ * курсора попадает внутрь этого треугольника, считаем, что курсор движется
+ * к подменю.
+ *
+ * Эти хелперы намеренно чистые (без DOM и без React), чтобы их можно было
+ * тестировать изолированно. У аргументов типа `DOMRect` читаются только
+ * `left`/`right`/`top`/`bottom`, поэтому подойдёт любой похожий на прямоугольник
+ * объект.
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+/** Минимальный квадрат смещения курсора, при котором пересчитываем направление (4px). */
+export declare const MIN_MOUSE_MOVE_SQUARED = 16;
+/**
+ * Знак векторного произведения (A - B) и (P - B): показывает, с какой стороны
+ * от прямой B → A лежит точка P. Условие `>= 0` относит точку на прямой к «плюсу».
+ */
+export declare const pointSignRelativeToEdge: (P: Point, A: Point, B: Point) => boolean;
+/** Лежит ли точка P внутри треугольника A, B, C (включая границу). */
+export declare const isPointInsideTriangle: (P: Point, A: Point, B: Point, C: Point) => boolean;
+/**
+ * Вертикальная грань подменю, обращённая к родительскому меню. Если подменю
+ * открыто вправо (его правая грань выходит за правую грань дропа), ближайшая
+ * грань — левая сторона подменю; иначе подменю открыто влево, и ближайшая
+ * грань — правая сторона подменю.
+ */
+export declare const findNearestSubmenuEdge: (dropCoords: DOMRect, submenuCoords: DOMRect) => [Point, Point];
+/** Сместился ли курсор с прошлой выборки достаточно, чтобы пересчитать направление. */
+export declare const hasMovedEnough: (prev: Point, current: Point) => boolean;
+/**
+ * Движется ли курсор, переместившись из `prev` в `current`, в сторону подменю,
+ * заданного `submenuCoords` (относительно родительского `dropCoords`).
+ */
+export declare const isMovingTowardsSubmenu: (prev: Point, current: Point, dropCoords: DOMRect, submenuCoords: DOMRect) => boolean;

package/safeZone.js

@@ -0,0 +1,69 @@
+import './index.css';
+/**
+ * Геометрия «безопасного треугольника» (подменю с учётом направления курсора).
+ *
+ * Пока подменю открыто и курсор уходит с родительского пункта, подменю должно
+ * оставаться открытым, если курсор движется в его сторону. «Движение в сторону»
+ * моделируется треугольником: его вершина — предыдущая позиция курсора, а
+ * основание — ближайшая к родительскому меню грань подменю. Если текущая позиция
+ * курсора попадает внутрь этого треугольника, считаем, что курсор движется
+ * к подменю.
+ *
+ * Эти хелперы намеренно чистые (без DOM и без React), чтобы их можно было
+ * тестировать изолированно. У аргументов типа `DOMRect` читаются только
+ * `left`/`right`/`top`/`bottom`, поэтому подойдёт любой похожий на прямоугольник
+ * объект.
+ */
+/** Минимальный квадрат смещения курсора, при котором пересчитываем направление (4px). */
+const MIN_MOUSE_MOVE_SQUARED = 16;
+/**
+ * Знак векторного произведения (A - B) и (P - B): показывает, с какой стороны
+ * от прямой B → A лежит точка P. Условие `>= 0` относит точку на прямой к «плюсу».
+ */
+const pointSignRelativeToEdge = (P, A, B) => {
+    return (A.x - B.x) * (P.y - B.y) >= (P.x - B.x) * (A.y - B.y);
+};
+/** Лежит ли точка P внутри треугольника A, B, C (включая границу). */
+const isPointInsideTriangle = (P, A, B, C) => {
+    const values = [
+        pointSignRelativeToEdge(P, A, B),
+        pointSignRelativeToEdge(P, B, C),
+        pointSignRelativeToEdge(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 hasMovedEnough = (prev, current) => {
+    const deltaX = current.x - prev.x;
+    const deltaY = current.y - prev.y;
+    return deltaX * deltaX + deltaY * deltaY >= MIN_MOUSE_MOVE_SQUARED;
+};
+/**
+ * Движется ли курсор, переместившись из `prev` в `current`, в сторону подменю,
+ * заданного `submenuCoords` (относительно родительского `dropCoords`).
+ */
+const isMovingTowardsSubmenu = (prev, current, dropCoords, submenuCoords) => {
+    const [edgeStart, edgeEnd] = findNearestSubmenuEdge(dropCoords, submenuCoords);
+    return isPointInsideTriangle(current, prev, edgeStart, edgeEnd);
+};
+
+export { MIN_MOUSE_MOVE_SQUARED, findNearestSubmenuEdge, hasMovedEnough, isMovingTowardsSubmenu, isPointInsideTriangle, pointSignRelativeToEdge };
+//# sourceMappingURL=safeZone.js.map

package/safeZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safeZone.js","sources":["src/safeZone.ts"],"sourcesContent":["/**\n * Геометрия «безопасного треугольника» (подменю с учётом направления курсора).\n *\n * Пока подменю открыто и курсор уходит с родительского пункта, подменю должно\n * оставаться открытым, если курсор движется в его сторону. «Движение в сторону»\n * моделируется треугольником: его вершина — предыдущая позиция курсора, а\n * основание — ближайшая к родительскому меню грань подменю. Если текущая позиция\n * курсора попадает внутрь этого треугольника, считаем, что курсор движется\n * к подменю.\n *\n * Эти хелперы намеренно чистые (без DOM и без React), чтобы их можно было\n * тестировать изолированно. У аргументов типа `DOMRect` читаются только\n * `left`/`right`/`top`/`bottom`, поэтому подойдёт любой похожий на прямоугольник\n * объект.\n */\n\nexport interface Point {\n    x: number;\n    y: number;\n}\n\n/** Минимальный квадрат смещения курсора, при котором пересчитываем направление (4px). */\nexport const MIN_MOUSE_MOVE_SQUARED = 16;\n\n/**\n * Знак векторного произведения (A - B) и (P - B): показывает, с какой стороны\n * от прямой B → A лежит точка P. Условие `>= 0` относит точку на прямой к «плюсу».\n */\nexport const pointSignRelativeToEdge = (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\n/** Лежит ли точка P внутри треугольника A, B, C (включая границу). */\nexport const isPointInsideTriangle = (P: Point, A: Point, B: Point, C: Point): boolean => {\n    const values = [\n        pointSignRelativeToEdge(P, A, B),\n        pointSignRelativeToEdge(P, B, C),\n        pointSignRelativeToEdge(P, C, A),\n    ];\n    return (values[0] && values[1] && values[2]) || (!values[0] && !values[1] && !values[2]);\n};\n\n/**\n * Вертикальная грань подменю, обращённая к родительскому меню. Если подменю\n * открыто вправо (его правая грань выходит за правую грань дропа), ближайшая\n * грань — левая сторона подменю; иначе подменю открыто влево, и ближайшая\n * грань — правая сторона подменю.\n */\nexport const 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\n/** Сместился ли курсор с прошлой выборки достаточно, чтобы пересчитать направление. */\nexport const hasMovedEnough = (prev: Point, current: Point): boolean => {\n    const deltaX = current.x - prev.x;\n    const deltaY = current.y - prev.y;\n    return deltaX * deltaX + deltaY * deltaY >= MIN_MOUSE_MOVE_SQUARED;\n};\n\n/**\n * Движется ли курсор, переместившись из `prev` в `current`, в сторону подменю,\n * заданного `submenuCoords` (относительно родительского `dropCoords`).\n */\nexport const isMovingTowardsSubmenu = (\n    prev: Point,\n    current: Point,\n    dropCoords: DOMRect,\n    submenuCoords: DOMRect\n): boolean => {\n    const [edgeStart, edgeEnd] = findNearestSubmenuEdge(dropCoords, submenuCoords);\n    return isPointInsideTriangle(current, prev, edgeStart, edgeEnd);\n};\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;AAcG;AAOH;AACO,MAAM,sBAAsB,GAAG,GAAG;AAEzC;;;AAGG;AACU,MAAA,uBAAuB,GAAG,CAAC,CAAQ,EAAE,CAAQ,EAAE,CAAQ,KAAa;AAC7E,IAAA,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,EAAE;AAEF;AACO,MAAM,qBAAqB,GAAG,CAAC,CAAQ,EAAE,CAAQ,EAAE,CAAQ,EAAE,CAAQ,KAAa;AACrF,IAAA,MAAM,MAAM,GAAG;AACX,QAAA,uBAAuB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAChC,QAAA,uBAAuB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAChC,QAAA,uBAAuB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;KACnC,CAAC;AACF,IAAA,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7F,EAAE;AAEF;;;;;AAKG;MACU,sBAAsB,GAAG,CAAC,UAAmB,EAAE,aAAsB,KAAoB;IAClG,IAAI,aAAa,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,EAAE;QACxC,OAAO;YACH,EAAE,CAAC,EAAE,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,aAAa,CAAC,GAAG,EAAE;YAC/C,EAAE,CAAC,EAAE,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE;SACrD,CAAC;KACL;IACD,OAAO;QACH,EAAE,CAAC,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE,aAAa,CAAC,GAAG,EAAE;QAChD,EAAE,CAAC,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE;KACtD,CAAC;AACN,EAAE;AAEF;MACa,cAAc,GAAG,CAAC,IAAW,EAAE,OAAc,KAAa;IACnE,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;IAClC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;IAClC,OAAO,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI,sBAAsB,CAAC;AACvE,EAAE;AAEF;;;AAGG;AACI,MAAM,sBAAsB,GAAG,CAClC,IAAW,EACX,OAAc,EACd,UAAmB,EACnB,aAAsB,KACb;AACT,IAAA,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,sBAAsB,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;IAC/E,OAAO,qBAAqB,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;AACpE;;;;"}

package/types.d.ts

@@ -29,9 +29,9 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     subitems?: React.ReactNode;
     /** Подзаголовок */
     subtitle?: React.ReactNode;
-    /** Компонент <Tag /> */
+    /** Компонент `<Tag />` */
     tag?: React.ReactNode;
-    /** Компонент <Switch /> либо текст. Не будет отображаться, если selected=true. */
+    /** Компонент `<Switch />` либо текст. Текст будет отображаться только если айтем имеет сабменю. Не будет отображаться, если selected=true. */
     rightContent?: React.ReactNode;
 }
 export interface MenuQuickActionProps extends React.HTMLAttributes<HTMLButtonElement>, React.PropsWithChildren {

package/useSubmenuSafeZone.d.ts

@@ -0,0 +1,31 @@
+import { type RefObject } from 'react';
+import { type Point } from '@hh.ru/magritte-ui-menu/safeZone';
+export declare const MOUSE_MOVE_THROTTLE_MS = 50;
+export declare const SCROLL_THROTTLE_MS = 300;
+export declare const SUBMENU_CLOSE_DELAY_MS = 300;
+interface UseSubmenuSafeZoneParams {
+    /** Активно ли отслеживание безопасной зоны (подменю открыто). */
+    active: boolean;
+    /** Скролл-контейнер, в котором рендерится родительское меню. */
+    dropContainer: HTMLElement | null;
+    /** Элемент родительского пункта меню. */
+    itemRef: RefObject<HTMLElement | null>;
+    /** Элемент дропа подменю. */
+    submenuRef: RefObject<HTMLElement | null>;
+    /** Вызывается, когда безопасная зона решает, что подменю нужно закрыть. */
+    onClose: () => void;
+}
+interface UseSubmenuSafeZoneResult {
+    /** Запоминает последнюю позицию курсора (вызывать из обработчиков указателя пункта). */
+    trackPointer: (point: Point) => void;
+    /** Отменяет запланированное закрытие (вызывать при (пере)открытии подменю). */
+    cancelPendingClose: () => void;
+}
+/**
+ * Держит подменю открытым, пока курсор движется в его сторону, иначе планирует
+ * отложенное закрытие. Инкапсулирует подписку на DOM-события, кэширование
+ * координат, троттлинг и учёт таймера закрытия, чтобы это поведение можно было
+ * проверять независимо от компонента `MenuItem`.
+ */
+export declare const useSubmenuSafeZone: ({ active, dropContainer, itemRef, submenuRef, onClose, }: UseSubmenuSafeZoneParams) => UseSubmenuSafeZoneResult;
+export {};