@hh.ru/magritte-ui-modal 4.0.2 → 4.0.4

package/Modal.js

@@ -15,7 +15,7 @@ import { Layer } from '@hh.ru/magritte-ui-layer';
 import { ModalContentWithHeader } from './ModalContentWithHeader.js';
 import { ModalFooter } from './ModalFooter.js';
 import { useModalOrder } from './useModalOrder.js';
-import { s as styles } from './modal-sPPpHqQi.js';
+import { s as styles } from './modal-qb74afY1.js';
 import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-ui-divider';
 import './ModalHeader.js';

package/ModalContentWithHeader.js

@@ -1,11 +1,11 @@
 import './index.css';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useLayoutEffect } from 'react';
+import { useRef, useLayoutEffect } from 'react';
 import classnames from 'classnames';
 import { requestAnimation } from '@hh.ru/magritte-common-func-utils';
 import { Divider } from '@hh.ru/magritte-ui-divider';
 import { ModalHeader } from './ModalHeader.js';
-import { s as styles } from './modal-sPPpHqQi.js';
+import { s as styles } from './modal-qb74afY1.js';
 import '@hh.ru/magritte-ui-title';
 
 const checkIsScrolledToBottom = (el) => {
@@ -13,12 +13,22 @@ const checkIsScrolledToBottom = (el) => {
 };
 const ModalContentWithHeader = ({ labelId, children, ...modalHeaderProps }) => {
     const { title, headerImage, actions, actionLink, options } = modalHeaderProps;
-    const [isDividerVisible, setDividerVisible] = useState(false);
-    const [isTopDividerVisible, setTopDividerVisible] = useState(false);
+    const topDividerVisibleRef = useRef(false);
+    const bottomDividerVisibleRef = useRef(false);
     const contentContainerRef = useRef(null);
+    /*
+     * Для управления отображением элементов и переключения стилизации используются рефы вместо стейта.
+     * Так сделано потому, что при изменении стилей контент внутри модала смещается. При этом внутри модала могут быть
+     * активаторы вызывающие показ дропов. Дропы обновляют свое позиционирование при скролле. Если обновлять стили
+     * с помощью изменения стейта, то новые стили будут применяться асинхронно, после вычисления дропом новой позиции.
+     * Это приведет к тому, что дропы будут позиционироваться не корректно в части случаев. Поэтому классы переключаются
+     * синхронно, а состояние сохраняется в рефы чтобы при ререндере стили были актуальными.
+     */
+    const bottomDividerContainerRef = useRef(null);
+    const topDividerContainerRef = useRef(null);
     const withoutHeader = !title && !headerImage && !actions && !actionLink && !options;
     const onlyActions = !title && !headerImage && !options && (actions || actionLink);
-    const showTopDivider = isTopDividerVisible && (options || !headerImage) && !onlyActions && !withoutHeader;
+    const isTopDividerVisible = () => topDividerVisibleRef.current && (options || !headerImage) && !onlyActions && !withoutHeader;
     useLayoutEffect(() => {
         if (contentContainerRef.current) {
             const observer = new ResizeObserver(requestAnimation(() => {
@@ -27,25 +37,33 @@ const ModalContentWithHeader = ({ labelId, children, ...modalHeaderProps }) => {
                 }
                 const isScrollable = contentContainerRef.current.scrollHeight > contentContainerRef.current.clientHeight;
                 const hasScroll = isScrollable && !checkIsScrolledToBottom(contentContainerRef.current);
-                setDividerVisible(hasScroll);
+                bottomDividerVisibleRef.current = hasScroll;
+                bottomDividerContainerRef.current?.classList.toggle(styles.dividerContainerHidden, !bottomDividerVisibleRef.current);
             }));
             observer.observe(contentContainerRef.current);
             return () => observer.disconnect();
         }
         return undefined;
-    }, [setDividerVisible]);
+    }, []);
     const handleScroll = () => {
         if (!contentContainerRef.current) {
             return;
         }
-        setTopDividerVisible(contentContainerRef.current.scrollTop !== 0);
-        setDividerVisible(!checkIsScrolledToBottom(contentContainerRef.current));
+        topDividerVisibleRef.current = contentContainerRef.current.scrollTop !== 0;
+        bottomDividerVisibleRef.current = !checkIsScrolledToBottom(contentContainerRef.current);
+        contentContainerRef.current.classList.toggle(styles.modalContentWithDivider, !!(topDividerVisibleRef.current && headerImage && !options));
+        bottomDividerContainerRef.current?.classList.toggle(styles.dividerContainerHidden, !bottomDividerVisibleRef.current);
+        topDividerContainerRef.current?.classList.toggle(styles.dividerContainerHidden, !isTopDividerVisible());
     };
     return (jsxs(Fragment, { children: [jsxs("div", { className: classnames(styles.modalContentWrapper, {
                     [styles.modalContentWrapperOneLine]: onlyActions,
-                }), children: [jsx(ModalHeader, { ...modalHeaderProps, labelId: labelId }), showTopDivider && (jsx("div", { className: styles.dividerContainer, children: jsx(Divider, {}) })), jsx("div", { className: classnames(styles.modalContent, {
-                            [styles.modalContentWithDivider]: isTopDividerVisible && headerImage && !options,
-                        }), ref: contentContainerRef, onScroll: handleScroll, children: children })] }), isDividerVisible && (jsx("div", { className: styles.dividerContainer, children: jsx(Divider, {}) }))] }));
+                }), children: [jsx(ModalHeader, { ...modalHeaderProps, labelId: labelId }), jsx("div", { className: classnames(styles.dividerContainer, {
+                            [styles.dividerContainerHidden]: !isTopDividerVisible(),
+                        }), ref: topDividerContainerRef, children: jsx(Divider, {}) }), jsx("div", { className: classnames(styles.modalContent, {
+                            [styles.modalContentWithDivider]: topDividerVisibleRef.current && headerImage && !options,
+                        }), ref: contentContainerRef, onScroll: handleScroll, children: children })] }), jsx("div", { className: classnames(styles.dividerContainer, {
+                    [styles.dividerContainerHidden]: !bottomDividerVisibleRef.current,
+                }), ref: bottomDividerContainerRef, children: jsx(Divider, {}) })] }));
 };
 
 export { ModalContentWithHeader };

package/ModalContentWithHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContentWithHeader.js","sources":["../src/ModalContentWithHeader.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { requestAnimation } from '@hh.ru/magritte-common-func-utils';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport { ModalHeader } from '@hh.ru/magritte-ui-modal/ModalHeader';\nimport { ModalHeaderProps } from '@hh.ru/magritte-ui-modal/types';\n\nimport styles from './modal.less';\n\nconst checkIsScrolledToBottom = (el: HTMLElement) => {\n    return Math.abs(el.scrollHeight - el.scrollTop - el.clientHeight) < 1;\n};\n\nexport const ModalContentWithHeader: FC<PropsWithChildren<ModalHeaderProps & { labelId: string }>> = ({\n    labelId,\n    children,\n    ...modalHeaderProps\n}) => {\n    const { title, headerImage, actions, actionLink, options } = modalHeaderProps;\n    const [isDividerVisible, setDividerVisible] = useState(false);\n    const [isTopDividerVisible, setTopDividerVisible] = useState(false);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const withoutHeader = !title && !headerImage && !actions && !actionLink && !options;\n    const onlyActions = !title && !headerImage && !options && (actions || actionLink);\n    const showTopDivider = isTopDividerVisible && (options || !headerImage) && !onlyActions && !withoutHeader;\n\n    useLayoutEffect(() => {\n        if (contentContainerRef.current) {\n            const observer = new ResizeObserver(\n                requestAnimation(() => {\n                    if (!contentContainerRef.current) {\n                        return;\n                    }\n                    const isScrollable =\n                        contentContainerRef.current.scrollHeight > contentContainerRef.current.clientHeight;\n                    const hasScroll = isScrollable && !checkIsScrolledToBottom(contentContainerRef.current);\n                    setDividerVisible(hasScroll);\n                })\n            );\n            observer.observe(contentContainerRef.current);\n            return () => observer.disconnect();\n        }\n\n        return undefined;\n    }, [setDividerVisible]);\n\n    const handleScroll = () => {\n        if (!contentContainerRef.current) {\n            return;\n        }\n        setTopDividerVisible(contentContainerRef.current.scrollTop !== 0);\n        setDividerVisible(!checkIsScrolledToBottom(contentContainerRef.current));\n    };\n    return (\n        <>\n            <div\n                className={classnames(styles.modalContentWrapper, {\n                    [styles.modalContentWrapperOneLine]: onlyActions,\n                })}\n            >\n                <ModalHeader {...modalHeaderProps} labelId={labelId} />\n                {showTopDivider && (\n                    <div className={styles.dividerContainer}>\n                        <Divider />\n                    </div>\n                )}\n                <div\n                    className={classnames(styles.modalContent, {\n                        [styles.modalContentWithDivider]: isTopDividerVisible && headerImage && !options,\n                    })}\n                    ref={contentContainerRef}\n                    onScroll={handleScroll}\n                >\n                    {children}\n                </div>\n            </div>\n            {isDividerVisible && (\n                <div className={styles.dividerContainer}>\n                    <Divider />\n                </div>\n            )}\n        </>\n    );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"ModalContentWithHeader.js","sources":["../src/ModalContentWithHeader.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useLayoutEffect, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { requestAnimation } from '@hh.ru/magritte-common-func-utils';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport { ModalHeader } from '@hh.ru/magritte-ui-modal/ModalHeader';\nimport { ModalHeaderProps } from '@hh.ru/magritte-ui-modal/types';\n\nimport styles from './modal.less';\n\nconst checkIsScrolledToBottom = (el: HTMLElement) => {\n    return Math.abs(el.scrollHeight - el.scrollTop - el.clientHeight) < 1;\n};\n\nexport const ModalContentWithHeader: FC<PropsWithChildren<ModalHeaderProps & { labelId: string }>> = ({\n    labelId,\n    children,\n    ...modalHeaderProps\n}) => {\n    const { title, headerImage, actions, actionLink, options } = modalHeaderProps;\n    const topDividerVisibleRef = useRef(false);\n    const bottomDividerVisibleRef = useRef(false);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n\n    /*\n     * Для управления отображением элементов и переключения стилизации используются рефы вместо стейта.\n     * Так сделано потому, что при изменении стилей контент внутри модала смещается. При этом внутри модала могут быть\n     * активаторы вызывающие показ дропов. Дропы обновляют свое позиционирование при скролле. Если обновлять стили\n     * с помощью изменения стейта, то новые стили будут применяться асинхронно, после вычисления дропом новой позиции.\n     * Это приведет к тому, что дропы будут позиционироваться не корректно в части случаев. Поэтому классы переключаются\n     * синхронно, а состояние сохраняется в рефы чтобы при ререндере стили были актуальными.\n     */\n    const bottomDividerContainerRef = useRef<HTMLDivElement>(null);\n    const topDividerContainerRef = useRef<HTMLDivElement>(null);\n\n    const withoutHeader = !title && !headerImage && !actions && !actionLink && !options;\n    const onlyActions = !title && !headerImage && !options && (actions || actionLink);\n\n    const isTopDividerVisible = () =>\n        topDividerVisibleRef.current && (options || !headerImage) && !onlyActions && !withoutHeader;\n\n    useLayoutEffect(() => {\n        if (contentContainerRef.current) {\n            const observer = new ResizeObserver(\n                requestAnimation(() => {\n                    if (!contentContainerRef.current) {\n                        return;\n                    }\n                    const isScrollable =\n                        contentContainerRef.current.scrollHeight > contentContainerRef.current.clientHeight;\n                    const hasScroll = isScrollable && !checkIsScrolledToBottom(contentContainerRef.current);\n                    bottomDividerVisibleRef.current = hasScroll;\n                    bottomDividerContainerRef.current?.classList.toggle(\n                        styles.dividerContainerHidden,\n                        !bottomDividerVisibleRef.current\n                    );\n                })\n            );\n            observer.observe(contentContainerRef.current);\n            return () => observer.disconnect();\n        }\n\n        return undefined;\n    }, []);\n\n    const handleScroll = () => {\n        if (!contentContainerRef.current) {\n            return;\n        }\n        topDividerVisibleRef.current = contentContainerRef.current.scrollTop !== 0;\n        bottomDividerVisibleRef.current = !checkIsScrolledToBottom(contentContainerRef.current);\n        contentContainerRef.current.classList.toggle(\n            styles.modalContentWithDivider,\n            !!(topDividerVisibleRef.current && headerImage && !options)\n        );\n        bottomDividerContainerRef.current?.classList.toggle(\n            styles.dividerContainerHidden,\n            !bottomDividerVisibleRef.current\n        );\n        topDividerContainerRef.current?.classList.toggle(styles.dividerContainerHidden, !isTopDividerVisible());\n    };\n    return (\n        <>\n            <div\n                className={classnames(styles.modalContentWrapper, {\n                    [styles.modalContentWrapperOneLine]: onlyActions,\n                })}\n            >\n                <ModalHeader {...modalHeaderProps} labelId={labelId} />\n                <div\n                    className={classnames(styles.dividerContainer, {\n                        [styles.dividerContainerHidden]: !isTopDividerVisible(),\n                    })}\n                    ref={topDividerContainerRef}\n                >\n                    <Divider />\n                </div>\n                <div\n                    className={classnames(styles.modalContent, {\n                        [styles.modalContentWithDivider]: topDividerVisibleRef.current && headerImage && !options,\n                    })}\n                    ref={contentContainerRef}\n                    onScroll={handleScroll}\n                >\n                    {children}\n                </div>\n            </div>\n            <div\n                className={classnames(styles.dividerContainer, {\n                    [styles.dividerContainerHidden]: !bottomDividerVisibleRef.current,\n                })}\n                ref={bottomDividerContainerRef}\n            >\n                <Divider />\n            </div>\n        </>\n    );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/ModalFooter.js

@@ -1,6 +1,6 @@
 import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { s as styles } from './modal-sPPpHqQi.js';
+import { s as styles } from './modal-qb74afY1.js';
 
 const ModalFooter = ({ leftButtons, rightButtons }) => {
     if (!leftButtons && !rightButtons) {

package/ModalHeader.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { Title } from '@hh.ru/magritte-ui-title';
 
-var styles = {"wrapper":"magritte-wrapper___zH8vB_4-0-2","content":"magritte-content___o6ktq_4-0-2","options":"magritte-options___qfErQ_4-0-2","content-with-image":"magritte-content-with-image___YarBO_4-0-2","contentWithImage":"magritte-content-with-image___YarBO_4-0-2","actions":"magritte-actions___nQILV_4-0-2","actions-with-link":"magritte-actions-with-link___hnDux_4-0-2","actionsWithLink":"magritte-actions-with-link___hnDux_4-0-2","actions-single":"magritte-actions-single___usfKu_4-0-2","actionsSingle":"magritte-actions-single___usfKu_4-0-2"};
+var styles = {"wrapper":"magritte-wrapper___zH8vB_4-0-4","content":"magritte-content___o6ktq_4-0-4","options":"magritte-options___qfErQ_4-0-4","content-with-image":"magritte-content-with-image___YarBO_4-0-4","contentWithImage":"magritte-content-with-image___YarBO_4-0-4","actions":"magritte-actions___nQILV_4-0-4","actions-with-link":"magritte-actions-with-link___hnDux_4-0-4","actionsWithLink":"magritte-actions-with-link___hnDux_4-0-4","actions-single":"magritte-actions-single___usfKu_4-0-4","actionsSingle":"magritte-actions-single___usfKu_4-0-4"};
 
 const ModalHeader = ({ title, headerImage, headerHeight = 0, titleAlignment, titleElement, titleMaxLines, titleSize, titleDescription, titleDescriptionMaxLines, titleStyle, titleDescriptionStyle, options, actions: _actions, actionLink, labelId, }) => {
     const actions = Array.isArray(_actions) ? _actions.slice(0, 5) : _actions;

package/index.css

@@ -10,30 +10,30 @@
   --magritte-color-component-modal-background-action-v18-3-0:#20262b99;
   --magritte-gradient-component-modal-background-fade-v18-3-0:linear-gradient(180deg, #00000000 0%, #0000007a 100%);
 }
-.magritte-wrapper___zH8vB_4-0-2{
+.magritte-wrapper___zH8vB_4-0-4{
   margin-bottom:32px;
 }
-.magritte-content___o6ktq_4-0-2{
+.magritte-content___o6ktq_4-0-4{
   display:flex;
   align-items:flex-start;
 }
-.magritte-content___o6ktq_4-0-2 + .magritte-options___qfErQ_4-0-2{
+.magritte-content___o6ktq_4-0-4 + .magritte-options___qfErQ_4-0-4{
   margin-top:24px;
 }
-.magritte-content___o6ktq_4-0-2.magritte-content-with-image___YarBO_4-0-2 + .magritte-options___qfErQ_4-0-2{
+.magritte-content___o6ktq_4-0-4.magritte-content-with-image___YarBO_4-0-4 + .magritte-options___qfErQ_4-0-4{
   margin-top:32px;
 }
-.magritte-actions___nQILV_4-0-2{
+.magritte-actions___nQILV_4-0-4{
   display:flex;
   padding-left:16px;
   gap:4px;
   margin-left:auto;
   --magritte-ui-link-padding-override:9px;
 }
-.magritte-actions-with-link___hnDux_4-0-2{
+.magritte-actions-with-link___hnDux_4-0-4{
   padding:0 8px 0 28px;
 }
-.magritte-content-with-image___YarBO_4-0-2{
+.magritte-content-with-image___YarBO_4-0-4{
   flex-direction:column;
   justify-content:flex-end;
   margin:-20px -20px 0;
@@ -43,18 +43,18 @@
   padding:12px 24px 24px;
   box-sizing:border-box;
 }
-.magritte-content-with-image___YarBO_4-0-2 .magritte-actions___nQILV_4-0-2{
+.magritte-content-with-image___YarBO_4-0-4 .magritte-actions___nQILV_4-0-4{
   order:-1;
   gap:0;
   margin-right:-12px;
   margin-bottom:auto;
 }
-.magritte-content-with-image___YarBO_4-0-2 .magritte-actions___nQILV_4-0-2:not(.magritte-actions-with-link___hnDux_4-0-2){
+.magritte-content-with-image___YarBO_4-0-4 .magritte-actions___nQILV_4-0-4:not(.magritte-actions-with-link___hnDux_4-0-4){
   padding:0 4px;
   background-color:var(--magritte-color-component-modal-background-action-v18-3-0);
   border-radius:var(--magritte-static-border-radius-300-v18-3-0);
 }
-.magritte-content-with-image___YarBO_4-0-2 .magritte-actions___nQILV_4-0-2.magritte-actions-single___usfKu_4-0-2:not(.magritte-actions-with-link___hnDux_4-0-2){
+.magritte-content-with-image___YarBO_4-0-4 .magritte-actions___nQILV_4-0-4.magritte-actions-single___usfKu_4-0-4:not(.magritte-actions-with-link___hnDux_4-0-4){
   padding:0;
 }
 
@@ -73,7 +73,7 @@
   --magritte-color-background-overlay-v18-3-0:#20262b99;
   --magritte-color-component-modal-background-content-v18-3-0:#1B1B1B;
 }
-.magritte-modal-overlay___lK22l_4-0-2{
+.magritte-modal-overlay___lK22l_4-0-4{
   position:fixed;
   top:0;
   right:0;
@@ -86,7 +86,7 @@
   z-index:1;
   user-select:text;
 }
-.magritte-modal___RAW6S_4-0-2{
+.magritte-modal___RAW6S_4-0-4{
   display:flex;
   box-sizing:border-box;
   width:720px;
@@ -99,86 +99,89 @@
   border-radius:var(--magritte-static-border-radius-800-v18-3-0);
   overflow:hidden;
 }
-.magritte-modal-small___MMQT4_4-0-2{
+.magritte-modal-small___MMQT4_4-0-4{
   width:460px;
 }
-.magritte-modal-content___46QFS_4-0-2{
+.magritte-modal-content___46QFS_4-0-4{
   flex:1 1;
   overflow-y:auto;
   padding:0 5px;
   margin:0 -5px;
   overscroll-behavior:none;
 }
-.magritte-modal-content__with-divider___an3I5_4-0-2{
+.magritte-modal-content__with-divider___an3I5_4-0-4{
   margin-top:-16px;
 }
-.magritte-modal-content-wrapper___23XFT_4-0-2{
+.magritte-modal-content-wrapper___23XFT_4-0-4{
   display:flex;
   flex-direction:column;
   min-height:0;
   flex:1 1;
 }
-.magritte-modal-content-wrapper__one-line___tYg8d_4-0-2{
+.magritte-modal-content-wrapper__one-line___tYg8d_4-0-4{
   flex-direction:row-reverse;
 }
-.magritte-divider-container___qP3VK_4-0-2{
+.magritte-divider-container___qP3VK_4-0-4{
   margin:0 -32px;
 }
-.magritte-modal-footer___8xPqQ_4-0-2{
+.magritte-divider-container___qP3VK_4-0-4.magritte-divider-container-hidden___EIxB-_4-0-4{
+  display:none;
+}
+.magritte-modal-footer___8xPqQ_4-0-4{
   flex:0 0;
   padding-top:32px;
   display:flex;
   justify-content:space-between;
 }
-.magritte-modal-buttons-container___1O1Nr_4-0-2{
+.magritte-modal-buttons-container___1O1Nr_4-0-4{
   display:flex;
   gap:12px;
 }
-.magritte-animation-timeout___w-j7K_4-0-2,
-.magritte-modal-animation-enter-active___E8KLu_4-0-2,
-.magritte-modal-animation-exit-active___ERjKa_4-0-2{
+.magritte-animation-timeout___w-j7K_4-0-4,
+.magritte-modal-animation-enter-active___E8KLu_4-0-4,
+.magritte-modal-animation-exit-active___ERjKa_4-0-4{
   --enter-animation-duration:0;
   --exit-animation-duration:0;
 }
 @media (prefers-reduced-motion: no-preference){
-  .magritte-animation-timeout___w-j7K_4-0-2,
-  .magritte-modal-animation-enter-active___E8KLu_4-0-2,
-  .magritte-modal-animation-exit-active___ERjKa_4-0-2{
+  .magritte-animation-timeout___w-j7K_4-0-4,
+  .magritte-modal-animation-enter-active___E8KLu_4-0-4,
+  .magritte-modal-animation-exit-active___ERjKa_4-0-4{
     --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v18-3-0);
     --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-3-0);
   }
 }
-.magritte-modal-animation-enter___kruLO_4-0-2.magritte-modal-overlay___lK22l_4-0-2{
+.magritte-modal-animation-enter___kruLO_4-0-4.magritte-modal-overlay___lK22l_4-0-4{
   opacity:0;
 }
-.magritte-modal-animation-enter___kruLO_4-0-2 .magritte-modal___RAW6S_4-0-2{
+.magritte-modal-animation-enter___kruLO_4-0-4 .magritte-modal___RAW6S_4-0-4{
   opacity:0;
   transform:scale(0.96);
 }
-.magritte-modal-animation-enter-active___E8KLu_4-0-2 .magritte-modal___RAW6S_4-0-2,
-.magritte-modal-animation-enter-active___E8KLu_4-0-2.magritte-modal-overlay___lK22l_4-0-2{
+.magritte-modal-animation-enter-active___E8KLu_4-0-4 .magritte-modal___RAW6S_4-0-4,
+.magritte-modal-animation-enter-active___E8KLu_4-0-4.magritte-modal-overlay___lK22l_4-0-4{
   opacity:1;
   transform:scale(1);
   transition-property:opacity, transform;
   transition-duration:var(--enter-animation-duration);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-300-timing-function-v18-3-0);
 }
-.magritte-modal-animation-exit___0jNgl_4-0-2.magritte-modal-overlay___lK22l_4-0-2{
+.magritte-modal-animation-exit___0jNgl_4-0-4.magritte-modal-overlay___lK22l_4-0-4{
   opacity:1;
 }
-.magritte-modal-animation-exit___0jNgl_4-0-2 .magritte-modal___RAW6S_4-0-2{
+.magritte-modal-animation-exit___0jNgl_4-0-4 .magritte-modal___RAW6S_4-0-4{
   opacity:1;
   transform:scale(1);
 }
-.magritte-modal-animation-exit-active___ERjKa_4-0-2.magritte-modal-overlay___lK22l_4-0-2{
+.magritte-modal-animation-exit-active___ERjKa_4-0-4.magritte-modal-overlay___lK22l_4-0-4{
   opacity:0;
 }
-.magritte-modal-animation-exit-active___ERjKa_4-0-2 .magritte-modal___RAW6S_4-0-2{
+.magritte-modal-animation-exit-active___ERjKa_4-0-4 .magritte-modal___RAW6S_4-0-4{
   opacity:0;
   transform:scale(0.96);
 }
-.magritte-modal-animation-exit-active___ERjKa_4-0-2 .magritte-modal___RAW6S_4-0-2,
-.magritte-modal-animation-exit-active___ERjKa_4-0-2.magritte-modal-overlay___lK22l_4-0-2{
+.magritte-modal-animation-exit-active___ERjKa_4-0-4 .magritte-modal___RAW6S_4-0-4,
+.magritte-modal-animation-exit-active___ERjKa_4-0-4.magritte-modal-overlay___lK22l_4-0-4{
   transition-property:opacity, transform;
   transition-duration:var(--exit-animation-duration);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-3-0);

package/index.js

@@ -19,7 +19,7 @@ import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-ui-divider';
 import './ModalHeader.js';
 import '@hh.ru/magritte-ui-title';
-import './modal-sPPpHqQi.js';
+import './modal-qb74afY1.js';
 import './ModalFooter.js';
 import './useModalOrder.js';
 import '@hh.ru/magritte-common-dom-storage';

package/modal-qb74afY1.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"modal-overlay":"magritte-modal-overlay___lK22l_4-0-4","modalOverlay":"magritte-modal-overlay___lK22l_4-0-4","modal":"magritte-modal___RAW6S_4-0-4","modal-small":"magritte-modal-small___MMQT4_4-0-4","modalSmall":"magritte-modal-small___MMQT4_4-0-4","modal-content":"magritte-modal-content___46QFS_4-0-4","modalContent":"magritte-modal-content___46QFS_4-0-4","modal-content__with-divider":"magritte-modal-content__with-divider___an3I5_4-0-4","modalContentWithDivider":"magritte-modal-content__with-divider___an3I5_4-0-4","modal-content-wrapper":"magritte-modal-content-wrapper___23XFT_4-0-4","modalContentWrapper":"magritte-modal-content-wrapper___23XFT_4-0-4","modal-content-wrapper__one-line":"magritte-modal-content-wrapper__one-line___tYg8d_4-0-4","modalContentWrapperOneLine":"magritte-modal-content-wrapper__one-line___tYg8d_4-0-4","divider-container":"magritte-divider-container___qP3VK_4-0-4","dividerContainer":"magritte-divider-container___qP3VK_4-0-4","divider-container-hidden":"magritte-divider-container-hidden___EIxB-_4-0-4","dividerContainerHidden":"magritte-divider-container-hidden___EIxB-_4-0-4","modal-footer":"magritte-modal-footer___8xPqQ_4-0-4","modalFooter":"magritte-modal-footer___8xPqQ_4-0-4","modal-buttons-container":"magritte-modal-buttons-container___1O1Nr_4-0-4","modalButtonsContainer":"magritte-modal-buttons-container___1O1Nr_4-0-4","animation-timeout":"magritte-animation-timeout___w-j7K_4-0-4","animationTimeout":"magritte-animation-timeout___w-j7K_4-0-4","modal-animation-enter-active":"magritte-modal-animation-enter-active___E8KLu_4-0-4","modalAnimationEnterActive":"magritte-modal-animation-enter-active___E8KLu_4-0-4","modal-animation-exit-active":"magritte-modal-animation-exit-active___ERjKa_4-0-4","modalAnimationExitActive":"magritte-modal-animation-exit-active___ERjKa_4-0-4","modal-animation-enter":"magritte-modal-animation-enter___kruLO_4-0-4","modalAnimationEnter":"magritte-modal-animation-enter___kruLO_4-0-4","modal-animation-exit":"magritte-modal-animation-exit___0jNgl_4-0-4","modalAnimationExit":"magritte-modal-animation-exit___0jNgl_4-0-4"};
+
+export { styles as s };
+//# sourceMappingURL=modal-qb74afY1.js.map

package/modal-qb74afY1.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-modal",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -28,12 +28,12 @@
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
     "@hh.ru/magritte-common-use-no-bubbling": "1.0.1",
     "@hh.ru/magritte-design-tokens": "18.3.0",
-    "@hh.ru/magritte-internal-layer-name": "2.1.2",
-    "@hh.ru/magritte-ui-action": "4.3.16",
+    "@hh.ru/magritte-internal-layer-name": "2.2.0",
+    "@hh.ru/magritte-ui-action": "4.3.17",
     "@hh.ru/magritte-ui-breakpoint": "4.0.3",
     "@hh.ru/magritte-ui-divider": "1.1.30",
     "@hh.ru/magritte-ui-icon": "7.2.1",
-    "@hh.ru/magritte-ui-layer": "2.0.5",
+    "@hh.ru/magritte-ui-layer": "2.0.6",
     "@hh.ru/magritte-ui-mock-component": "1.0.11",
     "@hh.ru/magritte-ui-theme-provider": "1.1.26",
     "@hh.ru/magritte-ui-title": "5.0.4"
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "23a49dd5966b82e16231d34828bf2852ca211dcb"
+  "gitHead": "e7a6ffbcfdc2a1626062c73336e4d389433327d8"
 }

package/modal-sPPpHqQi.js

@@ -1,5 +0,0 @@
-import './index.css';
-var styles = {"modal-overlay":"magritte-modal-overlay___lK22l_4-0-2","modalOverlay":"magritte-modal-overlay___lK22l_4-0-2","modal":"magritte-modal___RAW6S_4-0-2","modal-small":"magritte-modal-small___MMQT4_4-0-2","modalSmall":"magritte-modal-small___MMQT4_4-0-2","modal-content":"magritte-modal-content___46QFS_4-0-2","modalContent":"magritte-modal-content___46QFS_4-0-2","modal-content__with-divider":"magritte-modal-content__with-divider___an3I5_4-0-2","modalContentWithDivider":"magritte-modal-content__with-divider___an3I5_4-0-2","modal-content-wrapper":"magritte-modal-content-wrapper___23XFT_4-0-2","modalContentWrapper":"magritte-modal-content-wrapper___23XFT_4-0-2","modal-content-wrapper__one-line":"magritte-modal-content-wrapper__one-line___tYg8d_4-0-2","modalContentWrapperOneLine":"magritte-modal-content-wrapper__one-line___tYg8d_4-0-2","divider-container":"magritte-divider-container___qP3VK_4-0-2","dividerContainer":"magritte-divider-container___qP3VK_4-0-2","modal-footer":"magritte-modal-footer___8xPqQ_4-0-2","modalFooter":"magritte-modal-footer___8xPqQ_4-0-2","modal-buttons-container":"magritte-modal-buttons-container___1O1Nr_4-0-2","modalButtonsContainer":"magritte-modal-buttons-container___1O1Nr_4-0-2","animation-timeout":"magritte-animation-timeout___w-j7K_4-0-2","animationTimeout":"magritte-animation-timeout___w-j7K_4-0-2","modal-animation-enter-active":"magritte-modal-animation-enter-active___E8KLu_4-0-2","modalAnimationEnterActive":"magritte-modal-animation-enter-active___E8KLu_4-0-2","modal-animation-exit-active":"magritte-modal-animation-exit-active___ERjKa_4-0-2","modalAnimationExitActive":"magritte-modal-animation-exit-active___ERjKa_4-0-2","modal-animation-enter":"magritte-modal-animation-enter___kruLO_4-0-2","modalAnimationEnter":"magritte-modal-animation-enter___kruLO_4-0-2","modal-animation-exit":"magritte-modal-animation-exit___0jNgl_4-0-2","modalAnimationExit":"magritte-modal-animation-exit___0jNgl_4-0-2"};
-
-export { styles as s };
-//# sourceMappingURL=modal-sPPpHqQi.js.map

package/modal-sPPpHqQi.js.map

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