@hh.ru/magritte-ui-modal 10.1.35 → 11.0.0

package/internal/useModalTransition.js

@@ -0,0 +1,85 @@
+import './../index.css';
+import { useRef, useCallback, useEffect } from 'react';
+import { disableScroll } from '@hh.ru/magritte-common-modal-helper';
+import { Breakpoint, useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { useModalOrder } from './useModalOrder.js';
+import '@hh.ru/magritte-common-dom-storage';
+
+const INVISIBLE_FOR_BREAKPOINTS = [Breakpoint.XS, Breakpoint.S];
+/**
+ * Жизненный цикл модала вокруг `CSSTransition`: блокировка скролла страницы на время показа, возврат
+ * фокуса на активатор после закрытия, колбэки `onAppear/onBeforeExit/onAfterExit`, регистрация в стеке
+ * модалов (`useModalOrder`) и обработка смены брейкпоинта (на XS/S модал скрывается). Возвращает
+ * хендлеры для `CSSTransition` и флаг «скрыт на текущем брейкпоинте».
+ */
+const useModalTransition = ({ visible, isServerEnv, showOverlay, returnFocusOnClose, onAppear, onBeforeExit, onAfterExit, modalRef, animationTimeoutExit, }) => {
+    const enableScrollRef = useRef();
+    const onAfterExitRef = useRef(onAfterExit);
+    const onBeforeExitRef = useRef(onBeforeExit);
+    onAfterExitRef.current = onAfterExit;
+    onBeforeExitRef.current = onBeforeExit;
+    const animationTimeoutExitRef = useRef(animationTimeoutExit);
+    animationTimeoutExitRef.current = animationTimeoutExit;
+    const activatorRef = useRef(null);
+    const onEntering = useCallback(() => {
+        if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {
+            activatorRef.current = document.activeElement;
+        }
+        if (!enableScrollRef.current && showOverlay) {
+            enableScrollRef.current = disableScroll();
+        }
+        if (modalRef.current && !modalRef.current.contains(document.activeElement)) {
+            modalRef.current.focus();
+        }
+    }, [returnFocusOnClose, showOverlay, modalRef]);
+    const onEntered = useCallback(() => {
+        onAppear?.();
+    }, [onAppear]);
+    const onExit = useCallback(() => {
+        onBeforeExitRef.current?.();
+    }, []);
+    const onExited = useCallback(() => {
+        // оставляем обработку скрола еще и тут
+        // чтобы обработать историю со сменой breakpoint
+        enableScrollRef.current?.();
+        enableScrollRef.current = undefined;
+        onAfterExitRef.current?.();
+        if (activatorRef.current !== null && document.contains(activatorRef.current)) {
+            activatorRef.current?.focus();
+            activatorRef.current = null;
+        }
+    }, []);
+    useModalOrder(!!visible && !isServerEnv, modalRef);
+    const { breakpoint } = useBreakpoint();
+    useEffect(() => {
+        if (!visible) {
+            return;
+        }
+        const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);
+        if (!currentBreakpointVisible) {
+            onExit();
+            onExited();
+            return;
+        }
+        onEntering();
+        // visible не должно быть в зависимостях, т.к. этот эффект обрабатывает только изменение брейкпоинта
+        // visible обрабатывается CSSTransition
+        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
+    }, [breakpoint, onEntering, onExited, onExit]);
+    useEffect(() => {
+        return () => {
+            enableScrollRef.current?.(animationTimeoutExitRef.current);
+            enableScrollRef.current = undefined;
+        };
+    }, [visible, showOverlay]);
+    return {
+        onEntering,
+        onEntered,
+        onExit,
+        onExited,
+        isHiddenForBreakpoint: INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint),
+    };
+};
+
+export { useModalTransition };
+//# sourceMappingURL=useModalTransition.js.map

package/internal/useModalTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalTransition.js","sources":["src/internal/useModalTransition.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from 'react';\n\nimport { disableScroll, type TimeoutCallback } from '@hh.ru/magritte-common-modal-helper';\nimport { Breakpoint, useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { useModalOrder } from '@hh.ru/magritte-ui-modal/internal/useModalOrder';\n\nconst INVISIBLE_FOR_BREAKPOINTS = [Breakpoint.XS, Breakpoint.S];\n\ninterface UseModalTransitionParams {\n    visible: boolean | undefined;\n    isServerEnv: boolean;\n    showOverlay: boolean;\n    returnFocusOnClose: boolean | undefined;\n    onAppear?: VoidFunction;\n    onBeforeExit?: VoidFunction;\n    onAfterExit?: VoidFunction;\n    modalRef: RefObject<HTMLDivElement>;\n    /** Длительность анимации закрытия (мс) — с ней разблокируется скролл при размонтировании. */\n    animationTimeoutExit: number;\n}\n\ninterface UseModalTransitionResult {\n    onEntering: VoidFunction;\n    onEntered: VoidFunction;\n    onExit: VoidFunction;\n    onExited: VoidFunction;\n    /** Текущий брейкпоинт входит в число тех, на которых модал не рендерится (XS/S). */\n    isHiddenForBreakpoint: boolean;\n}\n\n/**\n * Жизненный цикл модала вокруг `CSSTransition`: блокировка скролла страницы на время показа, возврат\n * фокуса на активатор после закрытия, колбэки `onAppear/onBeforeExit/onAfterExit`, регистрация в стеке\n * модалов (`useModalOrder`) и обработка смены брейкпоинта (на XS/S модал скрывается). Возвращает\n * хендлеры для `CSSTransition` и флаг «скрыт на текущем брейкпоинте».\n */\nexport const useModalTransition = ({\n    visible,\n    isServerEnv,\n    showOverlay,\n    returnFocusOnClose,\n    onAppear,\n    onBeforeExit,\n    onAfterExit,\n    modalRef,\n    animationTimeoutExit,\n}: UseModalTransitionParams): UseModalTransitionResult => {\n    const enableScrollRef = useRef<TimeoutCallback>();\n    const onAfterExitRef = useRef(onAfterExit);\n    const onBeforeExitRef = useRef(onBeforeExit);\n    onAfterExitRef.current = onAfterExit;\n    onBeforeExitRef.current = onBeforeExit;\n    const animationTimeoutExitRef = useRef(animationTimeoutExit);\n    animationTimeoutExitRef.current = animationTimeoutExit;\n\n    const activatorRef = useRef<HTMLElement | null>(null);\n\n    const onEntering = useCallback(() => {\n        if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {\n            activatorRef.current = document.activeElement;\n        }\n        if (!enableScrollRef.current && showOverlay) {\n            enableScrollRef.current = disableScroll();\n        }\n        if (modalRef.current && !modalRef.current.contains(document.activeElement)) {\n            modalRef.current.focus();\n        }\n    }, [returnFocusOnClose, showOverlay, modalRef]);\n\n    const onEntered = useCallback(() => {\n        onAppear?.();\n    }, [onAppear]);\n\n    const onExit = useCallback(() => {\n        onBeforeExitRef.current?.();\n    }, []);\n\n    const onExited = useCallback(() => {\n        // оставляем обработку скрола еще и тут\n        // чтобы обработать историю со сменой breakpoint\n        enableScrollRef.current?.();\n        enableScrollRef.current = undefined;\n\n        onAfterExitRef.current?.();\n\n        if (activatorRef.current !== null && document.contains(activatorRef.current)) {\n            activatorRef.current?.focus();\n            activatorRef.current = null;\n        }\n    }, []);\n\n    useModalOrder(!!visible && !isServerEnv, modalRef);\n\n    const { breakpoint } = useBreakpoint();\n    useEffect(() => {\n        if (!visible) {\n            return;\n        }\n\n        const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);\n        if (!currentBreakpointVisible) {\n            onExit();\n            onExited();\n            return;\n        }\n\n        onEntering();\n        // visible не должно быть в зависимостях, т.к. этот эффект обрабатывает только изменение брейкпоинта\n        // visible обрабатывается CSSTransition\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [breakpoint, onEntering, onExited, onExit]);\n\n    useEffect(() => {\n        return () => {\n            enableScrollRef.current?.(animationTimeoutExitRef.current);\n            enableScrollRef.current = undefined;\n        };\n    }, [visible, showOverlay]);\n\n    return {\n        onEntering,\n        onEntered,\n        onExit,\n        onExited,\n        isHiddenForBreakpoint: INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint),\n    };\n};\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,yBAAyB,GAAG,CAAC,UAAU,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;AAwBhE;;;;;AAKG;AACU,MAAA,kBAAkB,GAAG,CAAC,EAC/B,OAAO,EACP,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,oBAAoB,GACG,KAA8B;AACrD,IAAA,MAAM,eAAe,GAAG,MAAM,EAAmB,CAAC;AAClD,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AAC3C,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;AAC7C,IAAA,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;AACrC,IAAA,eAAe,CAAC,OAAO,GAAG,YAAY,CAAC;AACvC,IAAA,MAAM,uBAAuB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;AAC7D,IAAA,uBAAuB,CAAC,OAAO,GAAG,oBAAoB,CAAC;AAEvD,IAAA,MAAM,YAAY,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;AAEtD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;QAChC,IAAI,kBAAkB,IAAI,QAAQ,CAAC,aAAa,YAAY,WAAW,EAAE;AACrE,YAAA,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC;SACjD;AACD,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,IAAI,WAAW,EAAE;AACzC,YAAA,eAAe,CAAC,OAAO,GAAG,aAAa,EAAE,CAAC;SAC7C;AACD,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;AACxE,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC5B;KACJ,EAAE,CAAC,kBAAkB,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;AAEhD,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,MAAK;QAC/B,QAAQ,IAAI,CAAC;AACjB,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,MAAM,GAAG,WAAW,CAAC,MAAK;AAC5B,QAAA,eAAe,CAAC,OAAO,IAAI,CAAC;KAC/B,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;;;AAG9B,QAAA,eAAe,CAAC,OAAO,IAAI,CAAC;AAC5B,QAAA,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;AAEpC,QAAA,cAAc,CAAC,OAAO,IAAI,CAAC;AAE3B,QAAA,IAAI,YAAY,CAAC,OAAO,KAAK,IAAI,IAAI,QAAQ,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE;AAC1E,YAAA,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;AAC9B,YAAA,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;SAC/B;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,aAAa,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAEnD,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IACvC,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,OAAO,EAAE;YACV,OAAO;SACV;QAED,MAAM,wBAAwB,GAAG,CAAC,yBAAyB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QACjF,IAAI,CAAC,wBAAwB,EAAE;AAC3B,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,QAAQ,EAAE,CAAC;YACX,OAAO;SACV;AAED,QAAA,UAAU,EAAE,CAAC;;;;KAIhB,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAE/C,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;YACR,eAAe,CAAC,OAAO,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC;AAC3D,YAAA,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;AACxC,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3B,OAAO;QACH,UAAU;QACV,SAAS;QACT,MAAM;QACN,QAAQ;AACR,QAAA,qBAAqB,EAAE,yBAAyB,CAAC,QAAQ,CAAC,UAAU,CAAC;KACxE,CAAC;AACN;;;;"}

package/internal/usePageHeaderScrollAnimation.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from 'react';
+interface UsePageHeaderScrollAnimationParams {
+    overlayRef: RefObject<HTMLDivElement>;
+    showOverlay: boolean;
+    pageHeaderPadding: number;
+    visible: boolean | undefined;
+}
+/**
+ * Анимирует `top` оверлея при скролле страницы (только для `position=left|right` без оверлея): по мере
+ * прокрутки на `pageHeaderPadding` оверлей «подъезжает» под page-header от `pageHeaderPadding` к `0`.
+ * Использует `ScrollTimeline`, где доступен, иначе — ручную привязку к событию `scroll`.
+ */
+export declare const usePageHeaderScrollAnimation: ({ overlayRef, showOverlay, pageHeaderPadding, visible, }: UsePageHeaderScrollAnimationParams) => void;
+export {};

package/internal/usePageHeaderScrollAnimation.js

@@ -0,0 +1,48 @@
+import './../index.css';
+import { useEffect } from 'react';
+
+/**
+ * Анимирует `top` оверлея при скролле страницы (только для `position=left|right` без оверлея): по мере
+ * прокрутки на `pageHeaderPadding` оверлей «подъезжает» под page-header от `pageHeaderPadding` к `0`.
+ * Использует `ScrollTimeline`, где доступен, иначе — ручную привязку к событию `scroll`.
+ */
+const usePageHeaderScrollAnimation = ({ overlayRef, showOverlay, pageHeaderPadding, visible, }) => {
+    useEffect(() => {
+        if (showOverlay || !pageHeaderPadding || !visible) {
+            return void 0;
+        }
+        const hasScrollTimeline = 'ScrollTimeline' in window;
+        const overlay = overlayRef.current;
+        if (!overlay) {
+            return void 0;
+        }
+        let animation;
+        const abortController = new AbortController();
+        const keyframes = { top: [`${pageHeaderPadding}px`, '0px'] };
+        if (hasScrollTimeline) {
+            const timeline = new ScrollTimeline({ source: document.documentElement, axis: 'y' });
+            animation = overlay.animate(keyframes, {
+                timeline,
+                rangeStart: '0px',
+                // calc нужен для устранения бага https://issues.chromium.org/issues/40929569
+                rangeEnd: `calc(0% + ${pageHeaderPadding}px)`,
+            });
+        }
+        else {
+            animation = overlay.animate(keyframes, { duration: 1000, fill: 'forwards' });
+            animation.pause();
+            const { signal } = abortController;
+            window.addEventListener('scroll', () => {
+                animation.currentTime =
+                    (Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) * 1000;
+            }, { signal });
+        }
+        return () => {
+            abortController.abort();
+            animation.cancel();
+        };
+    }, [overlayRef, showOverlay, pageHeaderPadding, visible]);
+};
+
+export { usePageHeaderScrollAnimation };
+//# sourceMappingURL=usePageHeaderScrollAnimation.js.map

package/internal/usePageHeaderScrollAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageHeaderScrollAnimation.js","sources":["src/internal/usePageHeaderScrollAnimation.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ninterface UsePageHeaderScrollAnimationParams {\n    overlayRef: RefObject<HTMLDivElement>;\n    showOverlay: boolean;\n    pageHeaderPadding: number;\n    visible: boolean | undefined;\n}\n\n/**\n * Анимирует `top` оверлея при скролле страницы (только для `position=left|right` без оверлея): по мере\n * прокрутки на `pageHeaderPadding` оверлей «подъезжает» под page-header от `pageHeaderPadding` к `0`.\n * Использует `ScrollTimeline`, где доступен, иначе — ручную привязку к событию `scroll`.\n */\nexport const usePageHeaderScrollAnimation = ({\n    overlayRef,\n    showOverlay,\n    pageHeaderPadding,\n    visible,\n}: UsePageHeaderScrollAnimationParams): void => {\n    useEffect(() => {\n        if (showOverlay || !pageHeaderPadding || !visible) {\n            return void 0;\n        }\n\n        const hasScrollTimeline = 'ScrollTimeline' in window;\n        const overlay = overlayRef.current;\n\n        if (!overlay) {\n            return void 0;\n        }\n\n        let animation: Animation;\n        const abortController = new AbortController();\n        const keyframes = { top: [`${pageHeaderPadding}px`, '0px'] };\n        if (hasScrollTimeline) {\n            const timeline = new ScrollTimeline({ source: document.documentElement, axis: 'y' });\n            animation = overlay.animate(keyframes, {\n                timeline,\n                rangeStart: '0px',\n                // calc нужен для устранения бага https://issues.chromium.org/issues/40929569\n                rangeEnd: `calc(0% + ${pageHeaderPadding}px)`,\n            } as KeyframeAnimationOptions);\n        } else {\n            animation = overlay.animate(keyframes, { duration: 1000, fill: 'forwards' });\n            animation.pause();\n\n            const { signal } = abortController;\n            window.addEventListener(\n                'scroll',\n                () => {\n                    animation.currentTime =\n                        (Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) * 1000;\n                },\n                { signal }\n            );\n        }\n\n        return () => {\n            abortController.abort();\n            animation.cancel();\n        };\n    }, [overlayRef, showOverlay, pageHeaderPadding, visible]);\n};\n"],"names":[],"mappings":";;AASA;;;;AAIG;AACI,MAAM,4BAA4B,GAAG,CAAC,EACzC,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,OAAO,GAC0B,KAAU;IAC3C,SAAS,CAAC,MAAK;QACX,IAAI,WAAW,IAAI,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE;YAC/C,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,MAAM,iBAAiB,GAAG,gBAAgB,IAAI,MAAM,CAAC;AACrD,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QAEnC,IAAI,CAAC,OAAO,EAAE;YACV,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,IAAI,SAAoB,CAAC;AACzB,QAAA,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAC;AAC9C,QAAA,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC,CAAG,EAAA,iBAAiB,CAAI,EAAA,CAAA,EAAE,KAAK,CAAC,EAAE,CAAC;QAC7D,IAAI,iBAAiB,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,eAAe,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AACrF,YAAA,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE;gBACnC,QAAQ;AACR,gBAAA,UAAU,EAAE,KAAK;;gBAEjB,QAAQ,EAAE,CAAa,UAAA,EAAA,iBAAiB,CAAK,GAAA,CAAA;AACpB,aAAA,CAAC,CAAC;SAClC;aAAM;AACH,YAAA,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;YAC7E,SAAS,CAAC,KAAK,EAAE,CAAC;AAElB,YAAA,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC;AACnC,YAAA,MAAM,CAAC,gBAAgB,CACnB,QAAQ,EACR,MAAK;AACD,gBAAA,SAAS,CAAC,WAAW;AACjB,oBAAA,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,EAAE,iBAAiB,CAAC,GAAG,iBAAiB,IAAI,IAAI,CAAC;AACrG,aAAC,EACD,EAAE,MAAM,EAAE,CACb,CAAC;SACL;AAED,QAAA,OAAO,MAAK;YACR,eAAe,CAAC,KAAK,EAAE,CAAC;YACxB,SAAS,CAAC,MAAM,EAAE,CAAC;AACvB,SAAC,CAAC;KACL,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC;AAC9D;;;;"}

package/modal-Bf_KXESS.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"sticky-header":"magritte-sticky-header___TPafy_11-0-0","stickyHeader":"magritte-sticky-header___TPafy_11-0-0","sticky-header-inner":"magritte-sticky-header-inner___u5p8h_11-0-0","stickyHeaderInner":"magritte-sticky-header-inner___u5p8h_11-0-0","modal-media":"magritte-modal-media___UqHGM_11-0-0","modalMedia":"magritte-modal-media___UqHGM_11-0-0","fixed-height":"magritte-fixed-height___wyJ7-_11-0-0","fixedHeight":"magritte-fixed-height___wyJ7-_11-0-0","contain":"magritte-contain___3QD0Z_11-0-0","cover":"magritte-cover___nry9O_11-0-0","content-overlay-top":"magritte-content-overlay-top___6snWk_11-0-0","contentOverlayTop":"magritte-content-overlay-top___6snWk_11-0-0","grow-limiter":"magritte-grow-limiter___GmpBj_11-0-0","growLimiter":"magritte-grow-limiter___GmpBj_11-0-0","modal-overlay":"magritte-modal-overlay___WwfCg_11-0-0","modalOverlay":"magritte-modal-overlay___WwfCg_11-0-0","modal-overlay-with-background":"magritte-modal-overlay-with-background___DDxJn_11-0-0","modalOverlayWithBackground":"magritte-modal-overlay-with-background___DDxJn_11-0-0","modal":"magritte-modal___C4o5U_11-0-0","modal-overlay-left":"magritte-modal-overlay-left___agPyC_11-0-0","modalOverlayLeft":"magritte-modal-overlay-left___agPyC_11-0-0","modal-overlay-right":"magritte-modal-overlay-right___-XDAx_11-0-0","modalOverlayRight":"magritte-modal-overlay-right___-XDAx_11-0-0","size-small":"magritte-size-small___cI-Ql_11-0-0","sizeSmall":"magritte-size-small___cI-Ql_11-0-0","size-medium":"magritte-size-medium___jnqfu_11-0-0","sizeMedium":"magritte-size-medium___jnqfu_11-0-0","no-vertical-paddings":"magritte-no-vertical-paddings___dxyot_11-0-0","noVerticalPaddings":"magritte-no-vertical-paddings___dxyot_11-0-0","no-horizontal-paddings":"magritte-no-horizontal-paddings___Q-i-5_11-0-0","noHorizontalPaddings":"magritte-no-horizontal-paddings___Q-i-5_11-0-0","modal-full-height":"magritte-modal-full-height___Aew5F_11-0-0","modalFullHeight":"magritte-modal-full-height___Aew5F_11-0-0","modal-with-border":"magritte-modal-with-border___KSnhf_11-0-0","modalWithBorder":"magritte-modal-with-border___KSnhf_11-0-0","modal-content-wrapper":"magritte-modal-content-wrapper___VzoTN_11-0-0","modalContentWrapper":"magritte-modal-content-wrapper___VzoTN_11-0-0","modal-footer":"magritte-modal-footer___Ha-sZ_11-0-0","modalFooter":"magritte-modal-footer___Ha-sZ_11-0-0","modal-footer-empty":"magritte-modal-footer-empty___tmH-x_11-0-0","modalFooterEmpty":"magritte-modal-footer-empty___tmH-x_11-0-0","animation-timeout":"magritte-animation-timeout___G4Hl1_11-0-0","animationTimeout":"magritte-animation-timeout___G4Hl1_11-0-0","animation-enter-center":"magritte-animation-enter-center___sq8j7_11-0-0","animationEnterCenter":"magritte-animation-enter-center___sq8j7_11-0-0","animation-enter-center-active":"magritte-animation-enter-center-active___ORYEh_11-0-0","animationEnterCenterActive":"magritte-animation-enter-center-active___ORYEh_11-0-0","animation-exit-center":"magritte-animation-exit-center___lLCX1_11-0-0","animationExitCenter":"magritte-animation-exit-center___lLCX1_11-0-0","animation-exit-center-active":"magritte-animation-exit-center-active___Ik2Yl_11-0-0","animationExitCenterActive":"magritte-animation-exit-center-active___Ik2Yl_11-0-0","animation-enter-left":"magritte-animation-enter-left___jJDlv_11-0-0","animationEnterLeft":"magritte-animation-enter-left___jJDlv_11-0-0","animation-enter-left-active":"magritte-animation-enter-left-active___-kFij_11-0-0","animationEnterLeftActive":"magritte-animation-enter-left-active___-kFij_11-0-0","animation-exit-left":"magritte-animation-exit-left___G2Plq_11-0-0","animationExitLeft":"magritte-animation-exit-left___G2Plq_11-0-0","animation-exit-left-active":"magritte-animation-exit-left-active___XW2K4_11-0-0","animationExitLeftActive":"magritte-animation-exit-left-active___XW2K4_11-0-0","animation-enter-right":"magritte-animation-enter-right___rrMS0_11-0-0","animationEnterRight":"magritte-animation-enter-right___rrMS0_11-0-0","animation-enter-right-active":"magritte-animation-enter-right-active___p7rg-_11-0-0","animationEnterRightActive":"magritte-animation-enter-right-active___p7rg-_11-0-0","animation-exit-right":"magritte-animation-exit-right___f3qIC_11-0-0","animationExitRight":"magritte-animation-exit-right___f3qIC_11-0-0","animation-exit-right-active":"magritte-animation-exit-right-active___-sG1k_11-0-0","animationExitRightActive":"magritte-animation-exit-right-active___-sG1k_11-0-0","tree-selector-container":"magritte-tree-selector-container___4cdf5_11-0-0","treeSelectorContainer":"magritte-tree-selector-container___4cdf5_11-0-0","modal-scroll-container":"magritte-modal-scroll-container___hOCdh_11-0-0","modalScrollContainer":"magritte-modal-scroll-container___hOCdh_11-0-0","nav-bar":"magritte-nav-bar___CL7d-_11-0-0","navBar":"magritte-nav-bar___CL7d-_11-0-0","header":"magritte-header___pufwA_11-0-0","static":"magritte-static___3B6cn_11-0-0","content-overlay-bottom":"magritte-content-overlay-bottom___bDuPC_11-0-0","contentOverlayBottom":"magritte-content-overlay-bottom___bDuPC_11-0-0"};
+
+export { styles as s };
+//# sourceMappingURL=modal-Bf_KXESS.js.map

package/modal-Bf_KXESS.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-modal",
-  "version": "10.1.35",
+  "version": "11.0.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -28,20 +28,24 @@
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
     "@hh.ru/magritte-common-use-no-bubbling": "1.0.8",
     "@hh.ru/magritte-design-tokens": "24.7.2",
+    "@hh.ru/magritte-internal-accessible-region": "1.0.3",
     "@hh.ru/magritte-internal-layer-name": "3.4.1",
-    "@hh.ru/magritte-ui-action-bar": "5.3.32",
+    "@hh.ru/magritte-internal-slot-registry": "1.1.0",
+    "@hh.ru/magritte-ui-action-bar": "5.4.0",
     "@hh.ru/magritte-ui-breakpoint": "6.1.1",
-    "@hh.ru/magritte-ui-content-overlay": "1.2.0",
+    "@hh.ru/magritte-ui-content-overlay": "1.2.1",
     "@hh.ru/magritte-ui-divider": "3.2.1",
     "@hh.ru/magritte-ui-icon": "14.2.12",
-    "@hh.ru/magritte-ui-layer": "3.2.5",
+    "@hh.ru/magritte-ui-layer": "3.2.6",
+    "@hh.ru/magritte-ui-layout": "2.0.3",
     "@hh.ru/magritte-ui-mock-component": "1.1.7",
+    "@hh.ru/magritte-ui-nav-bar": "2.0.0",
     "@hh.ru/magritte-ui-progress-bar": "5.0.26",
     "@hh.ru/magritte-ui-scrollbar": "1.0.28",
     "@hh.ru/magritte-ui-textarea": "3.3.31",
-    "@hh.ru/magritte-ui-theme-wrapper": "1.1.18",
-    "@hh.ru/magritte-ui-title": "8.3.2",
-    "@hh.ru/magritte-ui-tree-selector": "5.5.47"
+    "@hh.ru/magritte-ui-theme-wrapper": "1.1.19",
+    "@hh.ru/magritte-ui-title": "8.3.3",
+    "@hh.ru/magritte-ui-tree-selector": "5.5.48"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -52,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "31b8343d575729be9878df6f3d156992168a97b0"
+  "gitHead": "c04d157907ffbb3a873f8cd98fb63c4034f93f69"
 }

package/public/Modal.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes, type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from 'react';
+import { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';
+import { type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';
+import { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';
+type ModalRootProps = ModalProps & ExplicitRegionProps & Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabIndex' | 'className'>;
+interface ModalCompound {
+    Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;
+}
+export declare const Modal: ForwardRefExoticComponent<PropsWithoutRef<ModalRootProps> & RefAttributes<HTMLDivElement>> & ModalCompound;
+export {};

package/public/Modal.js

@@ -0,0 +1,105 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import classnames from 'classnames';
+import { useServerEnv } from '@hh.ru/magritte-common-is-server-env';
+import { useKeyboardNavigation, keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { CloseByClickOutsideContext } from '@hh.ru/magritte-common-mouse/useCloseByClickOutside';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';
+import { AccessibleRegionProvider } from '@hh.ru/magritte-internal-accessible-region';
+import { Layer } from '@hh.ru/magritte-ui-layer';
+import { ModalContent } from '../internal/ModalContent.js';
+import { ModalInner } from '../internal/ModalInner.js';
+import { ModalSlotsProvider } from '../internal/ModalSlotsContext.js';
+import { getAnimationTimeout, CSS_CLASSES, noop, DEFAULT_PAGE_HEADER_PADDING } from '../internal/constants.js';
+import { isTreeSelectorChild } from '../internal/isTreeSelectorChild.js';
+import { useModalTransition } from '../internal/useModalTransition.js';
+import { usePageHeaderScrollAnimation } from '../internal/usePageHeaderScrollAnimation.js';
+import { ModalMedia } from './ModalMedia.js';
+import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
+import { s as styles } from '../modal-Bf_KXESS.js';
+import '@hh.ru/magritte-ui-textarea';
+import '@hh.ru/magritte-ui-action-bar';
+import '../internal/ModalBody.js';
+import '@hh.ru/magritte-ui-content-overlay';
+import '../internal/ModalStickyHeader.js';
+import '@hh.ru/magritte-ui-nav-bar';
+import '@hh.ru/magritte-ui-scrollbar';
+import '@hh.ru/magritte-internal-slot-registry';
+import '@hh.ru/magritte-design-tokens/core-tokens';
+import '@hh.ru/magritte-ui-tree-selector';
+import '@hh.ru/magritte-common-modal-helper';
+import '@hh.ru/magritte-ui-breakpoint';
+import '../internal/useModalOrder.js';
+import '@hh.ru/magritte-common-dom-storage';
+
+const Modal = forwardRef(({ visible, size = 'medium', header, footer, children, onClose = noop, host, disableVerticalPaddings = false, disableHorizontalPaddings = false, closeByClickOutside = true, onAppear, onBeforeExit, onAfterExit, position = 'center', height = position === 'center' ? 'content' : 'full-screen', minHeight, showOverlay: _showOverlay = true, pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING, returnFocusOnClose, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-description': ariaDescription, ...rest }, ref) => {
+    const isServerEnv = useServerEnv();
+    const [animationTimeout] = useState(getAnimationTimeout);
+    const modalRef = useRef(null);
+    const overlayRef = useRef(null);
+    const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });
+    const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);
+    const showOverlay = position === 'center' || _showOverlay;
+    // TreeSelector сам управляет своим скроллом и должен занимать всю высоту модала.
+    const resolvedHeight = isTreeSelectorChild(children) ? 'full-screen' : height;
+    const { onEntering, onEntered, onExit, onExited, isHiddenForBreakpoint } = useModalTransition({
+        visible,
+        isServerEnv,
+        showOverlay,
+        returnFocusOnClose,
+        onAppear,
+        onBeforeExit,
+        onAfterExit,
+        modalRef,
+        animationTimeoutExit: animationTimeout.exit,
+    });
+    usePageHeaderScrollAnimation({
+        overlayRef,
+        showOverlay,
+        pageHeaderPadding,
+        visible: visible && !isHiddenForBreakpoint,
+    });
+    const overlayEventHandlers = useNoBubbling({
+        onKeyDown: (event) => {
+            if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
+                onClose(event);
+            }
+        },
+        onMouseDown: (event) => {
+            if (closeByClickOutside && !modalRef.current?.contains(event.target)) {
+                onClose(event);
+            }
+        },
+    });
+    const overlayProps = showOverlay
+        ? overlayEventHandlers
+        : {
+            onKeyDown: (event) => {
+                if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
+                    onClose(event);
+                }
+            },
+        };
+    if (isHiddenForBreakpoint || isServerEnv) {
+        return null;
+    }
+    return createPortal(jsx(CSSTransition, { appear: true, in: visible && !isServerEnv, nodeRef: overlayRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExited: onExited, classNames: CSS_CLASSES[position], timeout: animationTimeout, unmountOnExit: true, children: jsx(ThemeWrapper, { children: (themeClass) => (jsx(Layer, { layer: "modal", children: jsx("div", { ...overlayProps, ref: overlayRef, className: classnames(styles.modalOverlay, themeClass, {
+                        [styles.modalOverlayWithBackground]: showOverlay,
+                        [styles.modalOverlayLeft]: position === 'left',
+                        [styles.modalOverlayRight]: position === 'right',
+                    }), "data-qa": "modal-overlay", children: jsx(CloseByClickOutsideContext.Provider, { value: overlayRef, children: jsx(AccessibleRegionProvider, { children: jsx(ModalSlotsProvider, { children: jsx(ModalInner, { ...rest, explicitAria: {
+                                        'aria-label': ariaLabel,
+                                        'aria-labelledby': ariaLabelledby,
+                                        'aria-describedby': ariaDescribedby,
+                                        'aria-description': ariaDescription,
+                                    }, ariaModal: visible && showOverlay && !isServerEnv, refCallback: modalRefCallback, size: size, height: resolvedHeight, minHeight: minHeight, disableVerticalPaddings: disableVerticalPaddings, disableHorizontalPaddings: disableHorizontalPaddings, showOverlay: showOverlay, header: header, footer: footer, children: jsx(ModalContent, { children: children }) }) }) }) }) }) })) }) }), host || document.body);
+});
+Modal.displayName = 'Modal';
+Modal.Media = ModalMedia;
+
+export { Modal };
+//# sourceMappingURL=Modal.js.map

package/public/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["src/public/Modal.tsx"],"sourcesContent":["import {\n    forwardRef,\n    type HTMLAttributes,\n    useRef,\n    useState,\n    type ForwardRefExoticComponent,\n    type PropsWithoutRef,\n    type RefAttributes,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { keyboardMatch, keyboardKeys, useKeyboardNavigation } from '@hh.ru/magritte-common-keyboard';\nimport { CloseByClickOutsideContext } from '@hh.ru/magritte-common-mouse/useCloseByClickOutside';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { AccessibleRegionProvider, type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ModalContent } from '@hh.ru/magritte-ui-modal/internal/ModalContent';\nimport { ModalInner } from '@hh.ru/magritte-ui-modal/internal/ModalInner';\nimport { ModalSlotsProvider } from '@hh.ru/magritte-ui-modal/internal/ModalSlotsContext';\nimport {\n    CSS_CLASSES,\n    DEFAULT_PAGE_HEADER_PADDING,\n    getAnimationTimeout,\n    noop,\n} from '@hh.ru/magritte-ui-modal/internal/constants';\nimport { isTreeSelectorChild } from '@hh.ru/magritte-ui-modal/internal/isTreeSelectorChild';\nimport { useModalTransition } from '@hh.ru/magritte-ui-modal/internal/useModalTransition';\nimport { usePageHeaderScrollAnimation } from '@hh.ru/magritte-ui-modal/internal/usePageHeaderScrollAnimation';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\n\nimport styles from '../internal/modal.less';\n\ntype ModalRootProps = ModalProps &\n    ExplicitRegionProps &\n    Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalCompound {\n    Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalRootProps>(\n    (\n        {\n            visible,\n            size = 'medium',\n            header,\n            footer,\n            children,\n            onClose = noop,\n            host,\n            disableVerticalPaddings = false,\n            disableHorizontalPaddings = false,\n            closeByClickOutside = true,\n            onAppear,\n            onBeforeExit,\n            onAfterExit,\n            position = 'center',\n            height = position === 'center' ? 'content' : 'full-screen',\n            minHeight,\n            showOverlay: _showOverlay = true,\n            pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING,\n            returnFocusOnClose,\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledby,\n            'aria-describedby': ariaDescribedby,\n            'aria-description': ariaDescription,\n            ...rest\n        },\n        ref\n    ) => {\n        const isServerEnv = useServerEnv();\n        const [animationTimeout] = useState(getAnimationTimeout);\n\n        const modalRef = useRef<HTMLDivElement>(null);\n        const overlayRef = useRef<HTMLDivElement>(null);\n        const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });\n        const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);\n\n        const showOverlay = position === 'center' || _showOverlay;\n\n        // TreeSelector сам управляет своим скроллом и должен занимать всю высоту модала.\n        const resolvedHeight = isTreeSelectorChild(children) ? 'full-screen' : height;\n\n        const { onEntering, onEntered, onExit, onExited, isHiddenForBreakpoint } = useModalTransition({\n            visible,\n            isServerEnv,\n            showOverlay,\n            returnFocusOnClose,\n            onAppear,\n            onBeforeExit,\n            onAfterExit,\n            modalRef,\n            animationTimeoutExit: animationTimeout.exit,\n        });\n\n        usePageHeaderScrollAnimation({\n            overlayRef,\n            showOverlay,\n            pageHeaderPadding,\n            visible: visible && !isHiddenForBreakpoint,\n        });\n\n        const overlayEventHandlers = useNoBubbling({\n            onKeyDown: (event) => {\n                if (keyboardMatch(event.nativeEvent as KeyboardEvent, keyboardKeys.Escape)) {\n                    onClose(event);\n                }\n            },\n            onMouseDown: (event) => {\n                if (closeByClickOutside && !modalRef.current?.contains(event.target as HTMLElement)) {\n                    onClose(event);\n                }\n            },\n        });\n        const overlayProps = showOverlay\n            ? overlayEventHandlers\n            : {\n                  onKeyDown: (event: React.KeyboardEvent) => {\n                      if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n                          onClose(event);\n                      }\n                  },\n              };\n\n        if (isHiddenForBreakpoint || isServerEnv) {\n            return null;\n        }\n\n        return createPortal(\n            <CSSTransition\n                appear\n                in={visible && !isServerEnv}\n                nodeRef={overlayRef}\n                onEntering={onEntering}\n                onEntered={onEntered}\n                onExit={onExit}\n                onExited={onExited}\n                classNames={CSS_CLASSES[position]}\n                timeout={animationTimeout}\n                unmountOnExit\n            >\n                <ThemeWrapper>\n                    {(themeClass) => (\n                        <Layer layer=\"modal\">\n                            <div\n                                {...overlayProps}\n                                ref={overlayRef}\n                                className={classnames(styles.modalOverlay, themeClass, {\n                                    [styles.modalOverlayWithBackground]: showOverlay,\n                                    [styles.modalOverlayLeft]: position === 'left',\n                                    [styles.modalOverlayRight]: position === 'right',\n                                })}\n                                data-qa=\"modal-overlay\"\n                            >\n                                <CloseByClickOutsideContext.Provider value={overlayRef}>\n                                    <AccessibleRegionProvider>\n                                        <ModalSlotsProvider>\n                                            <ModalInner\n                                                {...rest}\n                                                explicitAria={{\n                                                    'aria-label': ariaLabel,\n                                                    'aria-labelledby': ariaLabelledby,\n                                                    'aria-describedby': ariaDescribedby,\n                                                    'aria-description': ariaDescription,\n                                                }}\n                                                ariaModal={visible && showOverlay && !isServerEnv}\n                                                refCallback={modalRefCallback}\n                                                size={size}\n                                                height={resolvedHeight}\n                                                minHeight={minHeight}\n                                                disableVerticalPaddings={disableVerticalPaddings}\n                                                disableHorizontalPaddings={disableHorizontalPaddings}\n                                                showOverlay={showOverlay}\n                                                header={header}\n                                                footer={footer}\n                                            >\n                                                <ModalContent>{children}</ModalContent>\n                                            </ModalInner>\n                                        </ModalSlotsProvider>\n                                    </AccessibleRegionProvider>\n                                </CloseByClickOutsideContext.Provider>\n                            </div>\n                        </Layer>\n                    )}\n                </ThemeWrapper>\n            </CSSTransition>,\n            host || document.body\n        );\n    }\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalRootProps> & RefAttributes<HTMLDivElement>> & ModalCompound;\n\nModal.displayName = 'Modal';\nModal.Media = ModalMedia;\n"],"names":["_jsx"],"mappings":"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"}

package/public/ModalMedia.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface ModalMediaProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+    /** Соотношение сторон блока (ширина / высота). Игнорируется, если задан `height`. По умолчанию `1.9`, либо `auto` при наличии `children` */
+    ratio?: number;
+    /** Фиксированная высота в пикселях. Имеет приоритет перед `ratio` */
+    height?: number;
+    /** URL фонового изображения */
+    backgroundUrl?: string;
+    /**
+     * Способ вписывания фонового изображения в блок
+     * @default cover
+     */
+    imageSize?: 'cover' | 'contain';
+}
+export declare const ModalMedia: import("react").ForwardRefExoticComponent<ModalMediaProps & import("react").RefAttributes<HTMLDivElement>>;

package/public/ModalMedia.js

@@ -0,0 +1,23 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import classnames from 'classnames';
+import { s as styles } from '../modal-Bf_KXESS.js';
+
+const ModalMedia = forwardRef(({ ratio, height, backgroundUrl, className, style, children, imageSize = 'cover', ...rest }, ref) => {
+    const defaultRatio = children ? 'auto' : 1.9;
+    return (jsx("div", { ...rest, ref: ref, className: classnames(className, styles.modalMedia, {
+            [styles.fixedHeight]: !!height,
+            [styles.cover]: imageSize === 'cover',
+            [styles.contain]: imageSize === 'contain',
+        }), style: {
+            ...style,
+            '--ratio': ratio ?? defaultRatio,
+            '--img-url': backgroundUrl ? `url(${backgroundUrl})` : 'none',
+            '--height': height ? `${height}px` : 'auto',
+        }, children: children }));
+});
+ModalMedia.displayName = 'ModalMedia';
+
+export { ModalMedia };
+//# sourceMappingURL=ModalMedia.js.map

package/public/ModalMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalMedia.js","sources":["src/public/ModalMedia.tsx"],"sourcesContent":["import { type CSSProperties, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport styles from '../internal/modal.less';\n\nexport interface ModalMediaProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {\n    /** Соотношение сторон блока (ширина / высота). Игнорируется, если задан `height`. По умолчанию `1.9`, либо `auto` при наличии `children` */\n    ratio?: number;\n    /** Фиксированная высота в пикселях. Имеет приоритет перед `ratio` */\n    height?: number;\n    /** URL фонового изображения */\n    backgroundUrl?: string;\n    /**\n     * Способ вписывания фонового изображения в блок\n     * @default cover\n     */\n    imageSize?: 'cover' | 'contain';\n}\n\nexport const ModalMedia = forwardRef<HTMLDivElement, ModalMediaProps>(\n    ({ ratio, height, backgroundUrl, className, style, children, imageSize = 'cover', ...rest }, ref) => {\n        const defaultRatio = children ? 'auto' : 1.9;\n\n        return (\n            <div\n                {...rest}\n                ref={ref}\n                className={classNames(className, styles.modalMedia, {\n                    [styles.fixedHeight]: !!height,\n                    [styles.cover]: imageSize === 'cover',\n                    [styles.contain]: imageSize === 'contain',\n                })}\n                style={\n                    {\n                        ...style,\n                        '--ratio': ratio ?? defaultRatio,\n                        '--img-url': backgroundUrl ? `url(${backgroundUrl})` : 'none',\n                        '--height': height ? `${height}px` : 'auto',\n                    } as CSSProperties\n                }\n            >\n                {children}\n            </div>\n        );\n    }\n);\n\nModalMedia.displayName = 'ModalMedia';\n"],"names":["_jsx","classNames"],"mappings":";;;;;AAmBO,MAAM,UAAU,GAAG,UAAU,CAChC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,GAAG,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAChG,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,GAAG,CAAC;AAE7C,IAAA,QACIA,GACQ,CAAA,KAAA,EAAA,EAAA,GAAA,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE;AAChD,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM;AAC9B,YAAA,CAAC,MAAM,CAAC,KAAK,GAAG,SAAS,KAAK,OAAO;AACrC,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS,KAAK,SAAS;SAC5C,CAAC,EACF,KAAK,EACD;AACI,YAAA,GAAG,KAAK;YACR,SAAS,EAAE,KAAK,IAAI,YAAY;YAChC,WAAW,EAAE,aAAa,GAAG,CAAO,IAAA,EAAA,aAAa,CAAG,CAAA,CAAA,GAAG,MAAM;YAC7D,UAAU,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAI,EAAA,CAAA,GAAG,MAAM;SAC7B,EAGrB,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC,EACH;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/public/ModalWithImage.d.ts

@@ -0,0 +1,16 @@
+import { type ForwardRefExoticComponent, type HTMLAttributes, type PropsWithoutRef, type ReactNode, type RefAttributes } from 'react';
+import { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';
+import { type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';
+import { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';
+export interface ModalWithImageProps extends ModalProps {
+    /** Изображение (медиа), располагается над контентом */
+    image?: ReactNode;
+    /** Заголовок, располагается над контентом */
+    title?: ReactNode;
+}
+type ModalWithImageRootProps = ModalWithImageProps & ExplicitRegionProps & Omit<HTMLAttributes<HTMLDivElement>, keyof ModalWithImageProps | 'role' | 'tabIndex' | 'className'>;
+interface ModalWithImageCompound {
+    Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;
+}
+export declare const ModalWithImage: ForwardRefExoticComponent<PropsWithoutRef<ModalWithImageRootProps> & RefAttributes<HTMLDivElement>> & ModalWithImageCompound;
+export {};

package/public/ModalWithImage.js

@@ -0,0 +1,56 @@
+import './../index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '@hh.ru/magritte-ui-layout';
+import { Modal } from './Modal.js';
+import { ModalMedia } from './ModalMedia.js';
+import { NavBarDefaultPropsContext } from '@hh.ru/magritte-ui-nav-bar';
+import { TitleDefaultPropsContext } from '@hh.ru/magritte-ui-title';
+import 'react-dom';
+import 'react-transition-group';
+import 'classnames';
+import '@hh.ru/magritte-common-is-server-env';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-mouse/useCloseByClickOutside';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-common-use-no-bubbling';
+import '@hh.ru/magritte-internal-accessible-region';
+import '@hh.ru/magritte-ui-layer';
+import '../internal/ModalContent.js';
+import '../internal/isTreeSelectorChild.js';
+import '@hh.ru/magritte-ui-tree-selector';
+import '@hh.ru/magritte-ui-textarea';
+import '../modal-Bf_KXESS.js';
+import '../internal/ModalInner.js';
+import '@hh.ru/magritte-ui-action-bar';
+import '../internal/ModalBody.js';
+import '@hh.ru/magritte-ui-content-overlay';
+import '../internal/ModalSlotsContext.js';
+import '@hh.ru/magritte-internal-slot-registry';
+import '../internal/ModalStickyHeader.js';
+import '@hh.ru/magritte-ui-scrollbar';
+import '../internal/constants.js';
+import '@hh.ru/magritte-design-tokens/core-tokens';
+import '../internal/useModalTransition.js';
+import '@hh.ru/magritte-common-modal-helper';
+import '@hh.ru/magritte-ui-breakpoint';
+import '../internal/useModalOrder.js';
+import '@hh.ru/magritte-common-dom-storage';
+import '../internal/usePageHeaderScrollAnimation.js';
+import '@hh.ru/magritte-ui-theme-wrapper';
+
+const NAV_BAR_DEFAULT_PROPS = {
+    overlay: true,
+    snapScroll: false,
+    transparent: 'start',
+};
+const TITLE_DEFAULT_PROPS = {
+    size: 'medium',
+    alignment: 'center',
+};
+const ModalWithImage = forwardRef(({ image, title, children, ...rest }, ref) => (jsx(NavBarDefaultPropsContext, { rootProps: NAV_BAR_DEFAULT_PROPS, children: jsxs(Modal, { ...rest, ref: ref, children: [image, (!!title || !!children) && (jsxs(Flex, { gap: 24, direction: "column", my: 24, children: [!!title && (jsx("div", { children: jsx(TitleDefaultPropsContext, { props: TITLE_DEFAULT_PROPS, children: title }) })), !!children && jsx("div", { children: children })] }))] }) })));
+ModalWithImage.displayName = 'ModalWithImage';
+ModalWithImage.Media = ModalMedia;
+
+export { ModalWithImage };
+//# sourceMappingURL=ModalWithImage.js.map

package/public/ModalWithImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalWithImage.js","sources":["src/public/ModalWithImage.tsx"],"sourcesContent":["import {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLAttributes,\n    type PropsWithoutRef,\n    type ReactNode,\n    type RefAttributes,\n} from 'react';\n\nimport { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Flex } from '@hh.ru/magritte-ui-layout';\nimport { Modal } from '@hh.ru/magritte-ui-modal/public/Modal';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { NavBarDefaultPropsContext } from '@hh.ru/magritte-ui-nav-bar';\nimport { TitleDefaultPropsContext } from '@hh.ru/magritte-ui-title';\n\nexport interface ModalWithImageProps extends ModalProps {\n    /** Изображение (медиа), располагается над контентом */\n    image?: ReactNode;\n    /** Заголовок, располагается над контентом */\n    title?: ReactNode;\n}\n\nconst NAV_BAR_DEFAULT_PROPS = {\n    overlay: true,\n    snapScroll: false,\n    transparent: 'start',\n} as const;\n\nconst TITLE_DEFAULT_PROPS = {\n    size: 'medium',\n    alignment: 'center',\n} as const;\n\ntype ModalWithImageRootProps = ModalWithImageProps &\n    ExplicitRegionProps &\n    Omit<HTMLAttributes<HTMLDivElement>, keyof ModalWithImageProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalWithImageCompound {\n    Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const ModalWithImage = forwardRef<HTMLDivElement, ModalWithImageRootProps>(\n    ({ image, title, children, ...rest }, ref) => (\n        <NavBarDefaultPropsContext rootProps={NAV_BAR_DEFAULT_PROPS}>\n            <Modal {...rest} ref={ref}>\n                {image}\n                {(!!title || !!children) && (\n                    <Flex gap={24} direction=\"column\" my={24}>\n                        {!!title && (\n                            <div>\n                                <TitleDefaultPropsContext props={TITLE_DEFAULT_PROPS}>{title}</TitleDefaultPropsContext>\n                            </div>\n                        )}\n                        {!!children && <div>{children}</div>}\n                    </Flex>\n                )}\n            </Modal>\n        </NavBarDefaultPropsContext>\n    )\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalWithImageRootProps> & RefAttributes<HTMLDivElement>> &\n    ModalWithImageCompound;\n\nModalWithImage.displayName = 'ModalWithImage';\nModalWithImage.Media = ModalMedia;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,qBAAqB,GAAG;AAC1B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,WAAW,EAAE,OAAO;CACd,CAAC;AAEX,MAAM,mBAAmB,GAAG;AACxB,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,SAAS,EAAE,QAAQ;CACb,CAAC;MAUE,cAAc,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACrCA,IAAC,yBAAyB,EAAA,EAAC,SAAS,EAAE,qBAAqB,YACvDC,IAAC,CAAA,KAAK,EAAK,EAAA,GAAA,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CACpB,KAAK,EACL,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,QAAQ,MACnBA,KAAC,IAAI,EAAA,EAAC,GAAG,EAAE,EAAE,EAAE,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,EAAA,QAAA,EAAA,CACnC,CAAC,CAAC,KAAK,KACJD,GACI,CAAA,KAAA,EAAA,EAAA,QAAA,EAAAA,GAAA,CAAC,wBAAwB,EAAC,EAAA,KAAK,EAAE,mBAAmB,EAAA,QAAA,EAAG,KAAK,EAA4B,CAAA,EAAA,CACtF,CACT,EACA,CAAC,CAAC,QAAQ,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,QAAQ,EAAO,CAAA,CAAA,EAAA,CACjC,CACV,CACG,EAAA,CAAA,EAAA,CACgB,CAC/B,EAEsB;AAE3B,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAC9C,cAAc,CAAC,KAAK,GAAG,UAAU;;;;"}

package/public/types.d.ts

@@ -0,0 +1,40 @@
+import { PropsWithChildren, ReactNode, SyntheticEvent } from 'react';
+export type ModalHeight = 'content' | 'full-screen' | number;
+export interface ModalProps extends PropsWithChildren {
+    /** Шапка модала (обычно `NavBar`). Рендерится sticky-хедером, прижатым к верху */
+    header?: ReactNode;
+    /** Футер модала (обычно `ActionBar`). Рендерится прижатым к низу вне скролл-зоны */
+    footer?: ReactNode;
+    /** Обработчик нажатия на кнопку закрытия */
+    onClose?: (event?: SyntheticEvent) => void;
+    /** Флаг управляющий видимостью модала */
+    visible?: boolean;
+    /** Размер */
+    size?: 'large' | 'medium' | 'small';
+    /** Хост для отрисовки модала */
+    host?: HTMLElement;
+    /** Флаг, отключающий верхний и нижний паддинги контента */
+    disableVerticalPaddings?: boolean;
+    /** Флаг, отключающий левый и правый паддинги контента */
+    disableHorizontalPaddings?: boolean;
+    /** Флаг управляющий закрытием при клике вне Modal */
+    closeByClickOutside?: boolean;
+    /** Колбек, который будет вызван после завершения анимации открытия */
+    onAppear?: VoidFunction;
+    /** Колбек, который будет вызван перед началом анимации закрытия */
+    onBeforeExit?: VoidFunction;
+    /** Колбек, который будет вызван после анимации закрытия */
+    onAfterExit?: VoidFunction;
+    /** Высота (по контенту, во весь экран или фиксированная в пикселях) */
+    height?: ModalHeight;
+    /** Минимальная высота в пикселях. Имеет приоритет перед height. */
+    minHeight?: number;
+    /** Положение компонента на экране, определяет дефолтное значение пропа height */
+    position?: 'center' | 'left' | 'right';
+    /** Показывать ли оверлей, применяется только если position=left|right */
+    showOverlay?: boolean;
+    /** Отступ от верхнего края экрана под навигацию, применяется только если position=left|right и showOverlay=false */
+    pageHeaderPadding?: number;
+    /** Возвращать ли фокус на активный элемент после закрытия модала, по умолчанию `true` */
+    returnFocusOnClose?: boolean;
+}

package/{types.js → public/types.js}

@@ -1,3 +1,3 @@
-import './index.css';
+import './../index.css';
 
 //# sourceMappingURL=types.js.map

package/Modal.d.ts

@@ -1,3 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { ModalHeaderProps } from '@hh.ru/magritte-ui-modal/types';
-export declare const Modal: import("react").ForwardRefExoticComponent<import("@hh.ru/magritte-ui-modal/types").ModalBaseProps & ModalHeaderProps & Omit<HTMLAttributes<HTMLDivElement>, keyof ModalHeaderProps | "className" | "role" | keyof import("@hh.ru/magritte-ui-modal/types").ModalBaseProps | "tabindex" | "aria-labeledby"> & import("react").RefAttributes<HTMLDivElement>>;