@hh.ru/magritte-ui-alert 3.2.6 → 4.0.0

package/Alert.js

@@ -12,9 +12,10 @@ import { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';
 import { useSwipe } from '@hh.ru/magritte-common-use-swipe';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { Layer } from '@hh.ru/magritte-ui-layer';
+import { Placeholder } from '@hh.ru/magritte-ui-placeholder';
 import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
 
-var styles = {"animation-timeout":"magritte-animation-timeout___cwIwT_3-2-6","animationTimeout":"magritte-animation-timeout___cwIwT_3-2-6","enter-animation-active":"magritte-enter-animation-active___Qti02_3-2-6","enterAnimationActive":"magritte-enter-animation-active___Qti02_3-2-6","exit-animation-active":"magritte-exit-animation-active___deHqY_3-2-6","exitAnimationActive":"magritte-exit-animation-active___deHqY_3-2-6","opacity-animation":"magritte-opacity-animation___m7RYi_3-2-6","opacityAnimation":"magritte-opacity-animation___m7RYi_3-2-6","enter-animation":"magritte-enter-animation___CbUHN_3-2-6","enterAnimation":"magritte-enter-animation___CbUHN_3-2-6","exit-animation":"magritte-exit-animation___d2AJ4_3-2-6","exitAnimation":"magritte-exit-animation___d2AJ4_3-2-6","overlay":"magritte-overlay___hMlKJ_3-2-6","mobile-container":"magritte-mobile-container___dQRCl_3-2-6","mobileContainer":"magritte-mobile-container___dQRCl_3-2-6","desktop-container":"magritte-desktop-container___26vkq_3-2-6","desktopContainer":"magritte-desktop-container___26vkq_3-2-6","main":"magritte-main___iCU-E_3-2-6","icon":"magritte-icon___fLpa-_3-2-6","icon_neutral":"magritte-icon_neutral___Jyl3l_3-2-6","iconNeutral":"magritte-icon_neutral___Jyl3l_3-2-6","icon_accent":"magritte-icon_accent___Nn-T1_3-2-6","iconAccent":"magritte-icon_accent___Nn-T1_3-2-6","icon_positive":"magritte-icon_positive___OU9Zu_3-2-6","iconPositive":"magritte-icon_positive___OU9Zu_3-2-6","icon_warning":"magritte-icon_warning___7BbUi_3-2-6","iconWarning":"magritte-icon_warning___7BbUi_3-2-6","icon_negative":"magritte-icon_negative___s0OA8_3-2-6","iconNegative":"magritte-icon_negative___s0OA8_3-2-6","title":"magritte-title___yG219_3-2-6","description":"magritte-description___KeNoT_3-2-6","buttons":"magritte-buttons___lyxBC_3-2-6","buttons_vertical":"magritte-buttons_vertical___8lPCo_3-2-6","buttonsVertical":"magritte-buttons_vertical___8lPCo_3-2-6"};
+var styles = {"animation-timeout":"magritte-animation-timeout___cwIwT_4-0-0","animationTimeout":"magritte-animation-timeout___cwIwT_4-0-0","enter-animation-active":"magritte-enter-animation-active___Qti02_4-0-0","enterAnimationActive":"magritte-enter-animation-active___Qti02_4-0-0","exit-animation-active":"magritte-exit-animation-active___deHqY_4-0-0","exitAnimationActive":"magritte-exit-animation-active___deHqY_4-0-0","opacity-animation":"magritte-opacity-animation___m7RYi_4-0-0","opacityAnimation":"magritte-opacity-animation___m7RYi_4-0-0","enter-animation":"magritte-enter-animation___CbUHN_4-0-0","enterAnimation":"magritte-enter-animation___CbUHN_4-0-0","exit-animation":"magritte-exit-animation___d2AJ4_4-0-0","exitAnimation":"magritte-exit-animation___d2AJ4_4-0-0","overlay":"magritte-overlay___hMlKJ_4-0-0","mobile-container":"magritte-mobile-container___dQRCl_4-0-0","mobileContainer":"magritte-mobile-container___dQRCl_4-0-0","desktop-container":"magritte-desktop-container___26vkq_4-0-0","desktopContainer":"magritte-desktop-container___26vkq_4-0-0","main":"magritte-main___iCU-E_4-0-0"};
 
 const OPACITY_ANIMATION_CLASSES = {
     enter: classnames(styles.opacityAnimation, styles.enterAnimation),
@@ -72,7 +73,7 @@ const TransformAnimation = ({ animationTimeout, visible, render, onClose, }) =>
     const eventHandlers = useNoBubbling(swipeHandlers);
     return (jsx(CSSTransition, { appear: true, classNames: TRANSFORM_ANIMATION_CLASSES, in: visible, mountOnEnter: true, nodeRef: animatedElementRef, onEnter: runTranslateYAnimation, onEntering: resetTranslateY, onExit: resetTranslateY, onExiting: runTranslateYAnimation, onExited: resetSwipeOffset, timeout: animationTimeout, unmountOnExit: true, children: render(animatedElementRef, eventHandlers) }));
 };
-const Alert = ({ iconStyle = 'neutral', layout, icon, title, description, buttons, visible, onClose, returnFocusOnClose = true, }) => {
+const Alert = ({ title, description, buttons, visible, onClose, returnFocusOnClose = true, titleProps, children, 'data-qa': dataQa, ...restProps }) => {
     const [animationTimeout, setAnimationTimeout] = useState(null);
     const animationTimeoutExitRef = useRef(animationTimeout?.exit || 0);
     animationTimeoutExitRef.current = animationTimeout?.exit || 0;
@@ -128,7 +129,13 @@ const Alert = ({ iconStyle = 'neutral', layout, icon, title, description, button
     if (!animationTimeout || isServerEnv) {
         return null;
     }
-    const content = (jsxs(Fragment, { children: [jsxs("div", { className: styles.main, "data-qa": "magritte-alert", children: [icon && (jsx("div", { className: classnames(styles.icon, { [styles[`icon_${iconStyle}`]]: iconStyle !== 'avatar' }), children: icon })), jsx("div", { className: styles.title, id: labelId, children: title }), description && jsx("div", { className: styles.description, children: description })] }), jsx("div", { className: classnames(styles.buttons, { [styles[`buttons_${layout}`]]: layout }), children: buttons })] }));
+    const content = (jsx(Fragment, { children: jsx("div", { className: styles.main, "data-qa": dataQa, children: jsx(Placeholder, { "data-qa": "magritte-alert", titleProps: {
+                    Element: 'h2',
+                    'data-qa': 'magritte-alert-title',
+                    ...titleProps,
+                    id: labelId,
+                    size: 'medium',
+                }, title: title, description: description, buttons: buttons, ...restProps, children: children }) }) }));
     if (isMobile) {
         return createPortal(jsxs(Fragment, { children: [jsx(OpacityAnimation, { animationTimeout: animationTimeout, visible: visible, render: (animatedElementRef) => (jsx(ThemeWrapper, { children: (themeClass) => (jsx(Layer, { layer: "bottom-sheet", children: jsx("div", { ...eventHandlers, className: classnames(styles.overlay, styles.animationTimeout, themeClass), onClick: onClose, ref: animatedElementRef }) })) })) }), jsx(TransformAnimation, { animationTimeout: animationTimeout, visible: visible, render: (animatedElementRef, eventHandlers) => (jsx(ThemeWrapper, { children: (themeClass) => (jsx(Layer, { layer: "bottom-sheet", children: jsx("div", { ...eventHandlers, className: classnames(styles.mobileContainer, styles.animationTimeout, themeClass), ref: animatedElementRef, children: content }) })) })), onClose: onClose })] }), document.body);
     }

package/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["src/Alert.tsx"],"sourcesContent":["import { FC, Fragment, ReactElement, RefObject, useEffect, useId, useRef, useState } 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 { disableScroll, TimeoutCallback } from '@hh.ru/magritte-common-modal-helper';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { SwipeEvent, useSwipe } from '@hh.ru/magritte-common-use-swipe';\nimport { AlertProps } from '@hh.ru/magritte-ui-alert/types';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\n\nimport styles from './alert.less';\n\ntype AnimationTimeout = { enter: number; exit: number };\n\ntype AnimationComponentProps = {\n    animationTimeout: AnimationTimeout;\n    visible: boolean;\n    render: (\n        animatedElementRef: RefObject<HTMLDivElement>,\n        eventHandlers?: JSX.IntrinsicElements['div']\n    ) => ReactElement;\n};\n\nconst OPACITY_ANIMATION_CLASSES = {\n    enter: classnames(styles.opacityAnimation, styles.enterAnimation),\n    enterActive: classnames(styles.enterAnimationActive, styles.opacityAnimation),\n    exit: classnames(styles.opacityAnimation, styles.exitAnimation),\n    exitActive: classnames(styles.exitAnimationActive, styles.opacityAnimation),\n};\n\nconst TRANSFORM_ANIMATION_CLASSES = {\n    enterActive: styles.enterAnimationActive,\n    exitActive: styles.exitAnimationActive,\n};\n\nconst VIEWPORT_HEIGHT = (typeof window !== 'undefined' ? window.visualViewport?.height : null) ?? 0;\nconst SWIPE_THRESHOLD_REF = { current: { max: Math.round(VIEWPORT_HEIGHT * 0.8) } };\n\nconst toInteger = (value: string) => {\n    const result = parseInt(value, 10);\n    return !Number.isNaN(result) ? result : 0;\n};\n\nexport const OpacityAnimation: FC<AnimationComponentProps> = ({ animationTimeout, visible, render }) => {\n    const animatedElementRef = useRef<HTMLDivElement | null>(null);\n\n    return (\n        <CSSTransition\n            appear\n            classNames={OPACITY_ANIMATION_CLASSES}\n            in={visible}\n            mountOnEnter\n            nodeRef={animatedElementRef}\n            timeout={animationTimeout}\n            unmountOnExit\n        >\n            {render(animatedElementRef)}\n        </CSSTransition>\n    );\n};\n\nexport const TransformAnimation: FC<AnimationComponentProps & { onClose: VoidFunction }> = ({\n    animationTimeout,\n    visible,\n    render,\n    onClose,\n}) => {\n    const animatedElementRef = useRef<HTMLDivElement | null>(null);\n    const swipeOffsetRef = useRef(0);\n\n    const runTranslateYAnimation = () => {\n        if (animatedElementRef.current !== null && visualViewport !== null) {\n            animatedElementRef.current.style.transform = `translateY(${\n                visualViewport.height + swipeOffsetRef.current - animatedElementRef.current.getBoundingClientRect().top\n            }px)`;\n        }\n    };\n\n    const resetTranslateY = () => {\n        if (animatedElementRef.current !== null) {\n            animatedElementRef.current.style.transform = `translateY(${swipeOffsetRef.current}px)`;\n        }\n    };\n\n    const resetSwipeOffset = () => {\n        swipeOffsetRef.current = 0;\n    };\n\n    const swipeHandlers = useSwipe({\n        thresholdYRef: SWIPE_THRESHOLD_REF,\n        onSwipeMove: (event: SwipeEvent) => {\n            if (animatedElementRef.current !== null) {\n                animatedElementRef.current.style.transform = `translateY(${Math.max(event.distanceY, 0)}px)`;\n            }\n        },\n        onSwipeEnd: (event: SwipeEvent) => {\n            swipeOffsetRef.current = event.distanceY;\n            onClose();\n        },\n        onSwipeCancel: () => {\n            if (animatedElementRef.current !== null) {\n                animatedElementRef.current.style.transform = `translateY(0px)`;\n            }\n        },\n    });\n\n    const eventHandlers = useNoBubbling(swipeHandlers);\n\n    return (\n        <CSSTransition\n            appear\n            classNames={TRANSFORM_ANIMATION_CLASSES}\n            in={visible}\n            mountOnEnter\n            nodeRef={animatedElementRef}\n            onEnter={runTranslateYAnimation}\n            onEntering={resetTranslateY}\n            onExit={resetTranslateY}\n            onExiting={runTranslateYAnimation}\n            onExited={resetSwipeOffset}\n            timeout={animationTimeout}\n            unmountOnExit\n        >\n            {render(animatedElementRef, eventHandlers)}\n        </CSSTransition>\n    );\n};\n\nexport const Alert: FC<AlertProps> = ({\n    iconStyle = 'neutral',\n    layout,\n    icon,\n    title,\n    description,\n    buttons,\n    visible,\n    onClose,\n    returnFocusOnClose = true,\n}) => {\n    const [animationTimeout, setAnimationTimeout] = useState<AnimationTimeout | null>(null);\n    const animationTimeoutExitRef = useRef(animationTimeout?.exit || 0);\n    animationTimeoutExitRef.current = animationTimeout?.exit || 0;\n    const isServerEnv = useServerEnv();\n    const desktopContainerRef = useRef<HTMLDivElement | null>(null);\n    const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });\n    const desktopContainerRefCallback = useMultipleRefs(desktopContainerRef, keyboardNavigationRef);\n    const { isMobile } = useBreakpoint();\n    const activatorRef = useRef<HTMLElement | null>(null);\n    const labelId = useId();\n\n    useEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.animationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const enter = toInteger(style.getPropertyValue('--enter-animation-duration'));\n        const exit = toInteger(style.getPropertyValue('--exit-animation-duration'));\n        setAnimationTimeout({ enter, exit });\n        document.body.removeChild(animationTimeoutElement);\n    }, [setAnimationTimeout]);\n\n    useEffect(() => {\n        if (visible) {\n            if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {\n                activatorRef.current = document.activeElement;\n            }\n\n            let enableScroll: TimeoutCallback | undefined = disableScroll();\n\n            if (desktopContainerRef.current && !desktopContainerRef.current.contains(document.activeElement)) {\n                desktopContainerRef.current.focus();\n            }\n\n            return () => {\n                enableScroll?.(animationTimeoutExitRef.current);\n                enableScroll = undefined;\n\n                if (activatorRef.current !== null && document.contains(activatorRef.current)) {\n                    activatorRef.current.focus();\n                    activatorRef.current = null;\n                }\n            };\n        }\n\n        return void 0;\n    }, [returnFocusOnClose, visible]);\n\n    const eventHandlers = useNoBubbling({\n        onKeyDown: (event) => {\n            if (keyboardMatch(event.nativeEvent as KeyboardEvent, keyboardKeys.Escape)) {\n                onClose();\n            }\n        },\n        onMouseDown: (event) => {\n            if (desktopContainerRef.current && !desktopContainerRef.current.contains(event.target as HTMLElement)) {\n                onClose();\n            }\n        },\n    });\n\n    if (!animationTimeout || isServerEnv) {\n        return null;\n    }\n\n    const content = (\n        <Fragment>\n            <div className={styles.main} data-qa=\"magritte-alert\">\n                {icon && (\n                    <div className={classnames(styles.icon, { [styles[`icon_${iconStyle}`]]: iconStyle !== 'avatar' })}>\n                        {icon}\n                    </div>\n                )}\n                <div className={styles.title} id={labelId}>\n                    {title}\n                </div>\n                {description && <div className={styles.description}>{description}</div>}\n            </div>\n            <div className={classnames(styles.buttons, { [styles[`buttons_${layout}`]]: layout })}>{buttons}</div>\n        </Fragment>\n    );\n\n    if (isMobile) {\n        return createPortal(\n            <Fragment>\n                <OpacityAnimation\n                    animationTimeout={animationTimeout}\n                    visible={visible}\n                    render={(animatedElementRef) => (\n                        <ThemeWrapper>\n                            {(themeClass) => (\n                                <Layer layer=\"bottom-sheet\">\n                                    <div\n                                        {...eventHandlers}\n                                        className={classnames(styles.overlay, styles.animationTimeout, themeClass)}\n                                        onClick={onClose}\n                                        ref={animatedElementRef}\n                                    />\n                                </Layer>\n                            )}\n                        </ThemeWrapper>\n                    )}\n                />\n                <TransformAnimation\n                    animationTimeout={animationTimeout}\n                    visible={visible}\n                    render={(animatedElementRef, eventHandlers) => (\n                        <ThemeWrapper>\n                            {(themeClass) => (\n                                <Layer layer=\"bottom-sheet\">\n                                    <div\n                                        {...eventHandlers}\n                                        className={classnames(\n                                            styles.mobileContainer,\n                                            styles.animationTimeout,\n                                            themeClass\n                                        )}\n                                        ref={animatedElementRef}\n                                    >\n                                        {content}\n                                    </div>\n                                </Layer>\n                            )}\n                        </ThemeWrapper>\n                    )}\n                    onClose={onClose}\n                />\n            </Fragment>,\n            document.body\n        );\n    }\n\n    return createPortal(\n        <OpacityAnimation\n            animationTimeout={animationTimeout}\n            visible={visible}\n            render={(animatedElementRef) => (\n                <ThemeWrapper>\n                    {(themeClass) => (\n                        <Layer layer=\"modal\">\n                            <div\n                                {...eventHandlers}\n                                className={classnames(styles.overlay, themeClass, styles.animationTimeout)}\n                                ref={animatedElementRef}\n                            >\n                                <div\n                                    aria-labelledby={labelId}\n                                    aria-modal={visible && !isServerEnv}\n                                    role=\"alertdialog\"\n                                    tabIndex={-1}\n                                    className={classnames(styles.desktopContainer)}\n                                    ref={desktopContainerRefCallback}\n                                >\n                                    {content}\n                                </div>\n                            </div>\n                        </Layer>\n                    )}\n                </ThemeWrapper>\n            )}\n        />,\n        document.body\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["src/Alert.tsx"],"sourcesContent":["import { FC, Fragment, ReactElement, RefObject, useEffect, useId, useRef, useState } 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 { disableScroll, TimeoutCallback } from '@hh.ru/magritte-common-modal-helper';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { SwipeEvent, useSwipe } from '@hh.ru/magritte-common-use-swipe';\nimport { AlertProps } from '@hh.ru/magritte-ui-alert/types';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { Placeholder } from '@hh.ru/magritte-ui-placeholder';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\n\nimport styles from './alert.less';\n\ntype AnimationTimeout = { enter: number; exit: number };\n\ntype AnimationComponentProps = {\n    animationTimeout: AnimationTimeout;\n    visible: boolean;\n    render: (\n        animatedElementRef: RefObject<HTMLDivElement>,\n        eventHandlers?: JSX.IntrinsicElements['div']\n    ) => ReactElement;\n};\n\nconst OPACITY_ANIMATION_CLASSES = {\n    enter: classnames(styles.opacityAnimation, styles.enterAnimation),\n    enterActive: classnames(styles.enterAnimationActive, styles.opacityAnimation),\n    exit: classnames(styles.opacityAnimation, styles.exitAnimation),\n    exitActive: classnames(styles.exitAnimationActive, styles.opacityAnimation),\n};\n\nconst TRANSFORM_ANIMATION_CLASSES = {\n    enterActive: styles.enterAnimationActive,\n    exitActive: styles.exitAnimationActive,\n};\n\nconst VIEWPORT_HEIGHT = (typeof window !== 'undefined' ? window.visualViewport?.height : null) ?? 0;\nconst SWIPE_THRESHOLD_REF = { current: { max: Math.round(VIEWPORT_HEIGHT * 0.8) } };\n\nconst toInteger = (value: string) => {\n    const result = parseInt(value, 10);\n    return !Number.isNaN(result) ? result : 0;\n};\n\nexport const OpacityAnimation: FC<AnimationComponentProps> = ({ animationTimeout, visible, render }) => {\n    const animatedElementRef = useRef<HTMLDivElement | null>(null);\n\n    return (\n        <CSSTransition\n            appear\n            classNames={OPACITY_ANIMATION_CLASSES}\n            in={visible}\n            mountOnEnter\n            nodeRef={animatedElementRef}\n            timeout={animationTimeout}\n            unmountOnExit\n        >\n            {render(animatedElementRef)}\n        </CSSTransition>\n    );\n};\n\nexport const TransformAnimation: FC<AnimationComponentProps & { onClose: VoidFunction }> = ({\n    animationTimeout,\n    visible,\n    render,\n    onClose,\n}) => {\n    const animatedElementRef = useRef<HTMLDivElement | null>(null);\n    const swipeOffsetRef = useRef(0);\n\n    const runTranslateYAnimation = () => {\n        if (animatedElementRef.current !== null && visualViewport !== null) {\n            animatedElementRef.current.style.transform = `translateY(${\n                visualViewport.height + swipeOffsetRef.current - animatedElementRef.current.getBoundingClientRect().top\n            }px)`;\n        }\n    };\n\n    const resetTranslateY = () => {\n        if (animatedElementRef.current !== null) {\n            animatedElementRef.current.style.transform = `translateY(${swipeOffsetRef.current}px)`;\n        }\n    };\n\n    const resetSwipeOffset = () => {\n        swipeOffsetRef.current = 0;\n    };\n\n    const swipeHandlers = useSwipe({\n        thresholdYRef: SWIPE_THRESHOLD_REF,\n        onSwipeMove: (event: SwipeEvent) => {\n            if (animatedElementRef.current !== null) {\n                animatedElementRef.current.style.transform = `translateY(${Math.max(event.distanceY, 0)}px)`;\n            }\n        },\n        onSwipeEnd: (event: SwipeEvent) => {\n            swipeOffsetRef.current = event.distanceY;\n            onClose();\n        },\n        onSwipeCancel: () => {\n            if (animatedElementRef.current !== null) {\n                animatedElementRef.current.style.transform = `translateY(0px)`;\n            }\n        },\n    });\n\n    const eventHandlers = useNoBubbling(swipeHandlers);\n\n    return (\n        <CSSTransition\n            appear\n            classNames={TRANSFORM_ANIMATION_CLASSES}\n            in={visible}\n            mountOnEnter\n            nodeRef={animatedElementRef}\n            onEnter={runTranslateYAnimation}\n            onEntering={resetTranslateY}\n            onExit={resetTranslateY}\n            onExiting={runTranslateYAnimation}\n            onExited={resetSwipeOffset}\n            timeout={animationTimeout}\n            unmountOnExit\n        >\n            {render(animatedElementRef, eventHandlers)}\n        </CSSTransition>\n    );\n};\n\nexport const Alert: FC<AlertProps> = ({\n    title,\n    description,\n    buttons,\n    visible,\n    onClose,\n    returnFocusOnClose = true,\n    titleProps,\n    children,\n    'data-qa': dataQa,\n    ...restProps\n}) => {\n    const [animationTimeout, setAnimationTimeout] = useState<AnimationTimeout | null>(null);\n    const animationTimeoutExitRef = useRef(animationTimeout?.exit || 0);\n    animationTimeoutExitRef.current = animationTimeout?.exit || 0;\n    const isServerEnv = useServerEnv();\n    const desktopContainerRef = useRef<HTMLDivElement | null>(null);\n    const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });\n    const desktopContainerRefCallback = useMultipleRefs(desktopContainerRef, keyboardNavigationRef);\n    const { isMobile } = useBreakpoint();\n    const activatorRef = useRef<HTMLElement | null>(null);\n    const labelId = useId();\n\n    useEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.animationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const enter = toInteger(style.getPropertyValue('--enter-animation-duration'));\n        const exit = toInteger(style.getPropertyValue('--exit-animation-duration'));\n        setAnimationTimeout({ enter, exit });\n        document.body.removeChild(animationTimeoutElement);\n    }, [setAnimationTimeout]);\n\n    useEffect(() => {\n        if (visible) {\n            if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {\n                activatorRef.current = document.activeElement;\n            }\n\n            let enableScroll: TimeoutCallback | undefined = disableScroll();\n\n            if (desktopContainerRef.current && !desktopContainerRef.current.contains(document.activeElement)) {\n                desktopContainerRef.current.focus();\n            }\n\n            return () => {\n                enableScroll?.(animationTimeoutExitRef.current);\n                enableScroll = undefined;\n\n                if (activatorRef.current !== null && document.contains(activatorRef.current)) {\n                    activatorRef.current.focus();\n                    activatorRef.current = null;\n                }\n            };\n        }\n\n        return void 0;\n    }, [returnFocusOnClose, visible]);\n\n    const eventHandlers = useNoBubbling({\n        onKeyDown: (event) => {\n            if (keyboardMatch(event.nativeEvent as KeyboardEvent, keyboardKeys.Escape)) {\n                onClose();\n            }\n        },\n        onMouseDown: (event) => {\n            if (desktopContainerRef.current && !desktopContainerRef.current.contains(event.target as HTMLElement)) {\n                onClose();\n            }\n        },\n    });\n\n    if (!animationTimeout || isServerEnv) {\n        return null;\n    }\n\n    const content = (\n        <Fragment>\n            <div className={styles.main} data-qa={dataQa}>\n                <Placeholder\n                    data-qa=\"magritte-alert\"\n                    titleProps={{\n                        Element: 'h2',\n                        'data-qa': 'magritte-alert-title',\n                        ...titleProps,\n                        id: labelId,\n                        size: 'medium',\n                    }}\n                    title={title}\n                    description={description}\n                    buttons={buttons}\n                    {...restProps}\n                >\n                    {children}\n                </Placeholder>\n            </div>\n        </Fragment>\n    );\n\n    if (isMobile) {\n        return createPortal(\n            <Fragment>\n                <OpacityAnimation\n                    animationTimeout={animationTimeout}\n                    visible={visible}\n                    render={(animatedElementRef) => (\n                        <ThemeWrapper>\n                            {(themeClass) => (\n                                <Layer layer=\"bottom-sheet\">\n                                    <div\n                                        {...eventHandlers}\n                                        className={classnames(styles.overlay, styles.animationTimeout, themeClass)}\n                                        onClick={onClose}\n                                        ref={animatedElementRef}\n                                    />\n                                </Layer>\n                            )}\n                        </ThemeWrapper>\n                    )}\n                />\n                <TransformAnimation\n                    animationTimeout={animationTimeout}\n                    visible={visible}\n                    render={(animatedElementRef, eventHandlers) => (\n                        <ThemeWrapper>\n                            {(themeClass) => (\n                                <Layer layer=\"bottom-sheet\">\n                                    <div\n                                        {...eventHandlers}\n                                        className={classnames(\n                                            styles.mobileContainer,\n                                            styles.animationTimeout,\n                                            themeClass\n                                        )}\n                                        ref={animatedElementRef}\n                                    >\n                                        {content}\n                                    </div>\n                                </Layer>\n                            )}\n                        </ThemeWrapper>\n                    )}\n                    onClose={onClose}\n                />\n            </Fragment>,\n            document.body\n        );\n    }\n\n    return createPortal(\n        <OpacityAnimation\n            animationTimeout={animationTimeout}\n            visible={visible}\n            render={(animatedElementRef) => (\n                <ThemeWrapper>\n                    {(themeClass) => (\n                        <Layer layer=\"modal\">\n                            <div\n                                {...eventHandlers}\n                                className={classnames(styles.overlay, themeClass, styles.animationTimeout)}\n                                ref={animatedElementRef}\n                            >\n                                <div\n                                    aria-labelledby={labelId}\n                                    aria-modal={visible && !isServerEnv}\n                                    role=\"alertdialog\"\n                                    tabIndex={-1}\n                                    className={classnames(styles.desktopContainer)}\n                                    ref={desktopContainerRefCallback}\n                                >\n                                    {content}\n                                </div>\n                            </div>\n                        </Layer>\n                    )}\n                </ThemeWrapper>\n            )}\n        />,\n        document.body\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/index.css

@@ -1,17 +1,5 @@
 :root{
   --magritte-color-background-primary-v24-5-0:#ffffff;
-  --magritte-color-background-secondary-v24-5-0:#F1F4F9;
-  --magritte-color-background-accent-secondary-v24-5-0:#EDF6FF;
-  --magritte-color-background-positive-secondary-v24-5-0:#E8F9EC;
-  --magritte-color-background-negative-secondary-v24-5-0:#FEF2EF;
-  --magritte-color-background-warning-secondary-v24-5-0:#FFF3E6;
-  --magritte-color-text-primary-v24-5-0:#000000;
-  --magritte-color-text-secondary-v24-5-0:#768694;
-  --magritte-color-icon-tertiary-v24-5-0:#AABBCA;
-  --magritte-color-icon-accent-v24-5-0:#0070ff;
-  --magritte-color-icon-positive-v24-5-0:#10b55f;
-  --magritte-color-icon-negative-v24-5-0:#ff4d3a;
-  --magritte-color-icon-warning-secondary-v24-5-0:#fdb972;
   --magritte-color-component-_overlay-background-content-v24-5-0:#20262b99;
 }
 
@@ -22,60 +10,44 @@
 
 .magritte-night-theme{
   --magritte-color-background-primary-v24-5-0:#1B1B1B;
-  --magritte-color-background-secondary-v24-5-0:#303030;
-  --magritte-color-background-accent-secondary-v24-5-0:#222D3D;
-  --magritte-color-background-positive-secondary-v24-5-0:#16321F;
-  --magritte-color-background-negative-secondary-v24-5-0:#3D2622;
-  --magritte-color-background-warning-secondary-v24-5-0:#3D270E;
-  --magritte-color-text-primary-v24-5-0:#ffffff;
-  --magritte-color-text-secondary-v24-5-0:#ABABAB;
-  --magritte-color-icon-tertiary-v24-5-0:#767676;
-  --magritte-color-icon-accent-v24-5-0:#5e9eff;
-  --magritte-color-icon-warning-secondary-v24-5-0:#9c5b03;
   --magritte-color-component-_overlay-background-content-v24-5-0:#26262699;
 }
-
-.magritte-zp-day-theme{
-  --magritte-color-background-accent-secondary-v24-5-0:#F1F4F7;
-  --magritte-color-icon-accent-v24-5-0:#7195AF;
-  --magritte-color-icon-positive-v24-5-0:#0dc267;
-}
-.magritte-animation-timeout___cwIwT_3-2-6{
+.magritte-animation-timeout___cwIwT_4-0-0{
   --enter-animation-duration:0ms;
   --exit-animation-duration:0ms;
 }
 @media (prefers-reduced-motion: no-preference){
-  .magritte-animation-timeout___cwIwT_3-2-6{
+  .magritte-animation-timeout___cwIwT_4-0-0{
     --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-5-0);
     --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-5-0);
   }
 }
-.magritte-enter-animation-active___Qti02_3-2-6{
+.magritte-enter-animation-active___Qti02_4-0-0{
   transition-property:transform, opacity;
   transition-duration:var(--enter-animation-duration);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v24-5-0);
 }
-.magritte-exit-animation-active___deHqY_3-2-6{
+.magritte-exit-animation-active___deHqY_4-0-0{
   transition-property:transform, opacity;
   transition-duration:var(--exit-animation-duration);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v24-5-0);
 }
-.magritte-opacity-animation___m7RYi_3-2-6{
+.magritte-opacity-animation___m7RYi_4-0-0{
   pointer-events:none;
 }
-.magritte-opacity-animation___m7RYi_3-2-6.magritte-enter-animation___CbUHN_3-2-6{
+.magritte-opacity-animation___m7RYi_4-0-0.magritte-enter-animation___CbUHN_4-0-0{
   opacity:0;
 }
-.magritte-opacity-animation___m7RYi_3-2-6.magritte-enter-animation-active___Qti02_3-2-6{
+.magritte-opacity-animation___m7RYi_4-0-0.magritte-enter-animation-active___Qti02_4-0-0{
   opacity:1;
 }
-.magritte-opacity-animation___m7RYi_3-2-6.magritte-exit-animation___d2AJ4_3-2-6{
+.magritte-opacity-animation___m7RYi_4-0-0.magritte-exit-animation___d2AJ4_4-0-0{
   opacity:1;
 }
-.magritte-opacity-animation___m7RYi_3-2-6.magritte-exit-animation-active___deHqY_3-2-6{
+.magritte-opacity-animation___m7RYi_4-0-0.magritte-exit-animation-active___deHqY_4-0-0{
   opacity:0;
 }
-.magritte-overlay___hMlKJ_3-2-6{
+.magritte-overlay___hMlKJ_4-0-0{
   display:flex;
   align-items:center;
   justify-content:center;
@@ -83,85 +55,20 @@
   inset:0;
   background-color:var(--magritte-color-component-_overlay-background-content-v24-5-0);
 }
-.magritte-mobile-container___dQRCl_3-2-6,
-.magritte-desktop-container___26vkq_3-2-6{
+.magritte-mobile-container___dQRCl_4-0-0,
+.magritte-desktop-container___26vkq_4-0-0{
   background-color:var(--magritte-color-background-primary-v24-5-0);
   border-radius:24px;
 }
-.magritte-mobile-container___dQRCl_3-2-6{
+.magritte-mobile-container___dQRCl_4-0-0{
   position:fixed;
   inset:auto 12px 16px;
   max-width:400px;
   margin:auto;
 }
-.magritte-desktop-container___26vkq_3-2-6{
+.magritte-desktop-container___26vkq_4-0-0{
   width:400px;
 }
-.magritte-main___iCU-E_3-2-6{
-  display:flex;
-  flex-direction:column;
-  align-items:center;
-  padding:32px 32px 12px;
-}
-.magritte-icon___fLpa-_3-2-6{
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  width:48px;
-  height:48px;
-  border-radius:50%;
-  margin-bottom:24px;
-}
-.magritte-icon_neutral___Jyl3l_3-2-6{
-  background-color:var(--magritte-color-background-secondary-v24-5-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-icon-tertiary-v24-5-0);
-}
-.magritte-icon_accent___Nn-T1_3-2-6{
-  background-color:var(--magritte-color-background-accent-secondary-v24-5-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-icon-accent-v24-5-0);
-}
-.magritte-icon_positive___OU9Zu_3-2-6{
-  background-color:var(--magritte-color-background-positive-secondary-v24-5-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-icon-positive-v24-5-0);
-}
-.magritte-icon_warning___7BbUi_3-2-6{
-  background-color:var(--magritte-color-background-warning-secondary-v24-5-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-icon-warning-secondary-v24-5-0);
-}
-.magritte-icon_negative___s0OA8_3-2-6{
-  background-color:var(--magritte-color-background-negative-secondary-v24-5-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-icon-negative-v24-5-0);
-}
-.magritte-title___yG219_3-2-6{
-  font-family:"hh sans";
-  font-weight:500;
-  line-height:32px;
-  font-size:22px;
-  letter-spacing:-0.0075em;
-  text-indent:0px;
-  text-transform:none;
-  text-decoration:none;
-  color:var(--magritte-color-text-primary-v24-5-0);
-  text-align:center;
-}
-.magritte-description___KeNoT_3-2-6{
-  font-family:"hh sans";
-  font-weight:400;
-  line-height:26px;
-  font-size:16px;
-  letter-spacing:0.005em;
-  text-indent:0px;
-  text-transform:none;
-  text-decoration:none;
-  color:var(--magritte-color-text-secondary-v24-5-0);
-  text-align:center;
-  margin-top:6px;
-}
-.magritte-buttons___lyxBC_3-2-6{
-  display:flex;
-  gap:12px;
-  padding:12px;
-}
-.magritte-buttons_vertical___8lPCo_3-2-6{
-  flex-direction:column;
+.magritte-main___iCU-E_4-0-0{
+  padding:32px 12px 12px;
 }

package/index.js

@@ -13,5 +13,6 @@ import '@hh.ru/magritte-common-use-no-bubbling';
 import '@hh.ru/magritte-common-use-swipe';
 import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-layer';
+import '@hh.ru/magritte-ui-placeholder';
 import '@hh.ru/magritte-ui-theme-wrapper';
 //# sourceMappingURL=index.js.map

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-alert",
-  "version": "3.2.6",
+  "version": "4.0.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -29,6 +29,7 @@
     "@hh.ru/magritte-internal-layer-name": "3.4.1",
     "@hh.ru/magritte-ui-breakpoint": "6.0.8",
     "@hh.ru/magritte-ui-layer": "3.2.2",
+    "@hh.ru/magritte-ui-placeholder": "11.1.0",
     "@hh.ru/magritte-ui-theme-wrapper": "1.1.14"
   },
   "peerDependencies": {
@@ -40,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0d147efb00e0803c03ee0ac99525211ce44788e1"
+  "gitHead": "47147a437821bf19ff08ca5392ff59ad7e2c579f"
 }

package/types.d.ts

@@ -1,21 +1,13 @@
 import { ReactNode } from 'react';
-export interface AlertProps {
-    /** Иконка размера 24px (будет отцентрирована на подложке 48x48px), Avatar либо другой компонент размера 48x48px */
-    icon?: ReactNode;
-    /** Стиль, определяющий цвет иконки и подложки */
-    iconStyle?: 'neutral' | 'accent' | 'positive' | 'warning' | 'negative' | 'avatar';
-    /** Лейаут блока кнопок */
-    layout: 'horizontal' | 'vertical';
-    /** Заголовок */
-    title: ReactNode;
-    /** Описание */
-    description?: ReactNode;
-    /** Кнопки */
-    buttons: ReactNode;
+import { PlaceholderProps } from '@hh.ru/magritte-ui-placeholder';
+export interface AlertProps extends Omit<PlaceholderProps, 'data-qa' | 'children'> {
     /** Флаг видимости */
     visible: boolean;
     /** Колбек закрытия алерта, должен устанавливать visible в false */
     onClose: VoidFunction;
     /** Возвращать ли фокус на активный элемент после закрытия модала с оверлеем, по умолчанию `true` */
     returnFocusOnClose?: boolean;
+    /** Слот для иконки или аватарки размера 48x48px */
+    children?: ReactNode;
+    'data-qa'?: string;
 }