@hh.ru/magritte-ui-alert 2.0.5 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/Alert.js +8 -2
  2. package/Alert.js.map +1 -1
  3. package/index.css +25 -25
  4. package/package.json +3 -3
package/Alert.js CHANGED
@@ -11,7 +11,7 @@ import { useSwipe } from '@hh.ru/magritte-common-use-swipe';
11
11
  import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
12
12
  import { Layer } from '@hh.ru/magritte-ui-layer';
13
13
 
14
- var styles = {"animation-timeout":"magritte-animation-timeout___cwIwT_2-0-5","animationTimeout":"magritte-animation-timeout___cwIwT_2-0-5","enter-animation-active":"magritte-enter-animation-active___Qti02_2-0-5","enterAnimationActive":"magritte-enter-animation-active___Qti02_2-0-5","exit-animation-active":"magritte-exit-animation-active___deHqY_2-0-5","exitAnimationActive":"magritte-exit-animation-active___deHqY_2-0-5","opacity-animation":"magritte-opacity-animation___m7RYi_2-0-5","opacityAnimation":"magritte-opacity-animation___m7RYi_2-0-5","enter-animation":"magritte-enter-animation___CbUHN_2-0-5","enterAnimation":"magritte-enter-animation___CbUHN_2-0-5","exit-animation":"magritte-exit-animation___d2AJ4_2-0-5","exitAnimation":"magritte-exit-animation___d2AJ4_2-0-5","overlay":"magritte-overlay___hMlKJ_2-0-5","mobile-container":"magritte-mobile-container___dQRCl_2-0-5","mobileContainer":"magritte-mobile-container___dQRCl_2-0-5","desktop-container":"magritte-desktop-container___26vkq_2-0-5","desktopContainer":"magritte-desktop-container___26vkq_2-0-5","main":"magritte-main___iCU-E_2-0-5","icon":"magritte-icon___fLpa-_2-0-5","icon_neutral":"magritte-icon_neutral___Jyl3l_2-0-5","iconNeutral":"magritte-icon_neutral___Jyl3l_2-0-5","icon_accent":"magritte-icon_accent___Nn-T1_2-0-5","iconAccent":"magritte-icon_accent___Nn-T1_2-0-5","icon_positive":"magritte-icon_positive___OU9Zu_2-0-5","iconPositive":"magritte-icon_positive___OU9Zu_2-0-5","icon_warning":"magritte-icon_warning___7BbUi_2-0-5","iconWarning":"magritte-icon_warning___7BbUi_2-0-5","icon_negative":"magritte-icon_negative___s0OA8_2-0-5","iconNegative":"magritte-icon_negative___s0OA8_2-0-5","title":"magritte-title___yG219_2-0-5","description":"magritte-description___KeNoT_2-0-5","buttons":"magritte-buttons___lyxBC_2-0-5","buttons_vertical":"magritte-buttons_vertical___8lPCo_2-0-5","buttonsVertical":"magritte-buttons_vertical___8lPCo_2-0-5"};
14
+ var styles = {"animation-timeout":"magritte-animation-timeout___cwIwT_2-0-6","animationTimeout":"magritte-animation-timeout___cwIwT_2-0-6","enter-animation-active":"magritte-enter-animation-active___Qti02_2-0-6","enterAnimationActive":"magritte-enter-animation-active___Qti02_2-0-6","exit-animation-active":"magritte-exit-animation-active___deHqY_2-0-6","exitAnimationActive":"magritte-exit-animation-active___deHqY_2-0-6","opacity-animation":"magritte-opacity-animation___m7RYi_2-0-6","opacityAnimation":"magritte-opacity-animation___m7RYi_2-0-6","enter-animation":"magritte-enter-animation___CbUHN_2-0-6","enterAnimation":"magritte-enter-animation___CbUHN_2-0-6","exit-animation":"magritte-exit-animation___d2AJ4_2-0-6","exitAnimation":"magritte-exit-animation___d2AJ4_2-0-6","overlay":"magritte-overlay___hMlKJ_2-0-6","mobile-container":"magritte-mobile-container___dQRCl_2-0-6","mobileContainer":"magritte-mobile-container___dQRCl_2-0-6","desktop-container":"magritte-desktop-container___26vkq_2-0-6","desktopContainer":"magritte-desktop-container___26vkq_2-0-6","main":"magritte-main___iCU-E_2-0-6","icon":"magritte-icon___fLpa-_2-0-6","icon_neutral":"magritte-icon_neutral___Jyl3l_2-0-6","iconNeutral":"magritte-icon_neutral___Jyl3l_2-0-6","icon_accent":"magritte-icon_accent___Nn-T1_2-0-6","iconAccent":"magritte-icon_accent___Nn-T1_2-0-6","icon_positive":"magritte-icon_positive___OU9Zu_2-0-6","iconPositive":"magritte-icon_positive___OU9Zu_2-0-6","icon_warning":"magritte-icon_warning___7BbUi_2-0-6","iconWarning":"magritte-icon_warning___7BbUi_2-0-6","icon_negative":"magritte-icon_negative___s0OA8_2-0-6","iconNegative":"magritte-icon_negative___s0OA8_2-0-6","title":"magritte-title___yG219_2-0-6","description":"magritte-description___KeNoT_2-0-6","buttons":"magritte-buttons___lyxBC_2-0-6","buttons_vertical":"magritte-buttons_vertical___8lPCo_2-0-6","buttonsVertical":"magritte-buttons_vertical___8lPCo_2-0-6"};
15
15
 
16
16
  const OPACITY_ANIMATION_CLASSES = {
17
17
  enter: classnames(styles.opacityAnimation, styles.enterAnimation),
@@ -80,6 +80,8 @@ const TransformAnimation = ({ animationTimeout, visible, render, onClose, }) =>
80
80
  };
81
81
  const Alert = ({ iconStyle = 'neutral', layout, icon, title, description, buttons, visible, onClose, }) => {
82
82
  const [animationTimeout, setAnimationTimeout] = useState(null);
83
+ const animationTimeoutExitRef = useRef(animationTimeout?.exit || 0);
84
+ animationTimeoutExitRef.current = animationTimeout?.exit || 0;
83
85
  const clickElementRef = useRef(null);
84
86
  const { isMobile } = useBreakpoint();
85
87
  const isServerEnv = useServerEnv();
@@ -95,7 +97,11 @@ const Alert = ({ iconStyle = 'neutral', layout, icon, title, description, button
95
97
  }, [setAnimationTimeout]);
96
98
  useEffect(() => {
97
99
  if (visible) {
98
- return disableScroll();
100
+ let enableScroll = disableScroll();
101
+ return () => {
102
+ enableScroll?.(animationTimeoutExitRef.current);
103
+ enableScroll = undefined;
104
+ };
99
105
  }
100
106
  return void 0;
101
107
  }, [visible]);
package/Alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.js","sources":["../src/Alert.tsx"],"sourcesContent":["import { FC, Fragment, ReactElement, RefObject, TouchEventHandler, useEffect, 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 { disableScroll } from '@hh.ru/magritte-common-modal-helper';\nimport { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';\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';\n\nimport styles from './alert.less';\n\ntype AnimationTimeout = { enter: number; exit: number };\n\ntype AnimationComponentProps = {\n animationTimeout: AnimationTimeout;\n visible: boolean;\n render: (animatedElementRef: RefObject<HTMLDivElement>, props?: JSX.IntrinsicElements['div']) => 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\nconst withStopPropagation = (handler?: TouchEventHandler): TouchEventHandler => {\n return (event) => {\n event.stopPropagation();\n handler?.(event);\n };\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 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, {\n ...swipeHandlers,\n onTouchStart: withStopPropagation(swipeHandlers.onTouchStart),\n onTouchMove: withStopPropagation(swipeHandlers.onTouchMove),\n })}\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}) => {\n const [animationTimeout, setAnimationTimeout] = useState<AnimationTimeout | null>(null);\n const clickElementRef = useRef<HTMLDivElement | null>(null);\n const { isMobile } = useBreakpoint();\n const isServerEnv = useServerEnv();\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 return disableScroll();\n }\n\n return void 0;\n }, [visible]);\n\n useCloseByClickOutside(clickElementRef, onClose, visible);\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 })}>{icon}</div>\n )}\n <div className={styles.title}>{title}</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 <Layer layer=\"bottom-sheet\">\n <div\n className={classnames(styles.overlay, styles.animationTimeout)}\n onClick={onClose}\n ref={animatedElementRef}\n />\n </Layer>\n )}\n />\n <TransformAnimation\n animationTimeout={animationTimeout}\n visible={visible}\n render={(animatedElementRef, props) => (\n <Layer layer=\"bottom-sheet\">\n <div\n {...props}\n className={classnames(styles.mobileContainer, styles.animationTimeout)}\n ref={animatedElementRef}\n >\n {content}\n </div>\n </Layer>\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 <Layer layer=\"modal\">\n <div className={classnames(styles.overlay, styles.animationTimeout)} ref={animatedElementRef}>\n <div className={classnames(styles.desktopContainer)} ref={clickElementRef}>\n {content}\n </div>\n </div>\n </Layer>\n )}\n />,\n document.body\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"Alert.js","sources":["../src/Alert.tsx"],"sourcesContent":["import { FC, Fragment, ReactElement, RefObject, TouchEventHandler, useEffect, 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 { disableScroll, TimeoutCallback } from '@hh.ru/magritte-common-modal-helper';\nimport { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';\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';\n\nimport styles from './alert.less';\n\ntype AnimationTimeout = { enter: number; exit: number };\n\ntype AnimationComponentProps = {\n animationTimeout: AnimationTimeout;\n visible: boolean;\n render: (animatedElementRef: RefObject<HTMLDivElement>, props?: JSX.IntrinsicElements['div']) => 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\nconst withStopPropagation = (handler?: TouchEventHandler): TouchEventHandler => {\n return (event) => {\n event.stopPropagation();\n handler?.(event);\n };\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 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, {\n ...swipeHandlers,\n onTouchStart: withStopPropagation(swipeHandlers.onTouchStart),\n onTouchMove: withStopPropagation(swipeHandlers.onTouchMove),\n })}\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}) => {\n const [animationTimeout, setAnimationTimeout] = useState<AnimationTimeout | null>(null);\n const animationTimeoutExitRef = useRef(animationTimeout?.exit || 0);\n animationTimeoutExitRef.current = animationTimeout?.exit || 0;\n const clickElementRef = useRef<HTMLDivElement | null>(null);\n const { isMobile } = useBreakpoint();\n const isServerEnv = useServerEnv();\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 let enableScroll: TimeoutCallback | undefined = disableScroll();\n return () => {\n enableScroll?.(animationTimeoutExitRef.current);\n enableScroll = undefined;\n };\n }\n\n return void 0;\n }, [visible]);\n\n useCloseByClickOutside(clickElementRef, onClose, visible);\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 })}>{icon}</div>\n )}\n <div className={styles.title}>{title}</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 <Layer layer=\"bottom-sheet\">\n <div\n className={classnames(styles.overlay, styles.animationTimeout)}\n onClick={onClose}\n ref={animatedElementRef}\n />\n </Layer>\n )}\n />\n <TransformAnimation\n animationTimeout={animationTimeout}\n visible={visible}\n render={(animatedElementRef, props) => (\n <Layer layer=\"bottom-sheet\">\n <div\n {...props}\n className={classnames(styles.mobileContainer, styles.animationTimeout)}\n ref={animatedElementRef}\n >\n {content}\n </div>\n </Layer>\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 <Layer layer=\"modal\">\n <div className={classnames(styles.overlay, styles.animationTimeout)} ref={animatedElementRef}>\n <div className={classnames(styles.desktopContainer)} ref={clickElementRef}>\n {content}\n </div>\n </div>\n </Layer>\n )}\n />,\n document.body\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,yBAAyB,GAAG;IAC9B,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,cAAc,CAAC;IACjE,WAAW,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,gBAAgB,CAAC;IAC7E,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,aAAa,CAAC;IAC/D,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,CAAC;CAC9E,CAAC;AAEF,MAAM,2BAA2B,GAAG;IAChC,WAAW,EAAE,MAAM,CAAC,oBAAoB;IACxC,UAAU,EAAE,MAAM,CAAC,mBAAmB;CACzC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,CAAC,CAAC;AACpG,MAAM,mBAAmB,GAAG,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,EAAE,EAAE,CAAC;AAEpF,MAAM,SAAS,GAAG,CAAC,KAAa,KAAI;IAChC,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AACnC,IAAA,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,OAA2B,KAAuB;IAC3E,OAAO,CAAC,KAAK,KAAI;QACb,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,QAAA,OAAO,GAAG,KAAK,CAAC,CAAC;AACrB,KAAC,CAAC;AACN,CAAC,CAAC;AAEK,MAAM,gBAAgB,GAAgC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,KAAI;AACnG,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;AAE/D,IAAA,QACIA,GAAA,CAAC,aAAa,EAAA,EACV,MAAM,EACN,IAAA,EAAA,UAAU,EAAE,yBAAyB,EACrC,EAAE,EAAE,OAAO,EACX,YAAY,EAAA,IAAA,EACZ,OAAO,EAAE,kBAAkB,EAC3B,OAAO,EAAE,gBAAgB,EACzB,aAAa,EAEZ,IAAA,EAAA,QAAA,EAAA,MAAM,CAAC,kBAAkB,CAAC,EAAA,CACf,EAClB;AACN,EAAE;AAEK,MAAM,kBAAkB,GAA4D,CAAC,EACxF,gBAAgB,EAChB,OAAO,EACP,MAAM,EACN,OAAO,GACV,KAAI;AACD,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;AAC/D,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAEjC,MAAM,sBAAsB,GAAG,MAAK;QAChC,IAAI,kBAAkB,CAAC,OAAO,KAAK,IAAI,IAAI,cAAc,KAAK,IAAI,EAAE;YAChE,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EACzC,cAAc,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GACxG,CAAA,GAAA,CAAK,CAAC;SACT;AACL,KAAC,CAAC;IAEF,MAAM,eAAe,GAAG,MAAK;AACzB,QAAA,IAAI,kBAAkB,CAAC,OAAO,KAAK,IAAI,EAAE;AACrC,YAAA,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,cAAc,CAAC,OAAO,CAAA,GAAA,CAAK,CAAC;SAC1F;AACL,KAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAK;AAC1B,QAAA,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;AAC/B,KAAC,CAAC;IAEF,MAAM,aAAa,GAAG,QAAQ,CAAC;AAC3B,QAAA,aAAa,EAAE,mBAAmB;AAClC,QAAA,WAAW,EAAE,CAAC,KAAiB,KAAI;AAC/B,YAAA,IAAI,kBAAkB,CAAC,OAAO,KAAK,IAAI,EAAE;AACrC,gBAAA,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAc,WAAA,EAAA,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC;aAChG;SACJ;AACD,QAAA,UAAU,EAAE,CAAC,KAAiB,KAAI;AAC9B,YAAA,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;AACzC,YAAA,OAAO,EAAE,CAAC;SACb;QACD,aAAa,EAAE,MAAK;AAChB,YAAA,IAAI,kBAAkB,CAAC,OAAO,KAAK,IAAI,EAAE;gBACrC,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,iBAAiB,CAAC;aAClE;SACJ;AACJ,KAAA,CAAC,CAAC;IAEH,QACIA,IAAC,aAAa,EAAA,EACV,MAAM,EACN,IAAA,EAAA,UAAU,EAAE,2BAA2B,EACvC,EAAE,EAAE,OAAO,EACX,YAAY,EACZ,IAAA,EAAA,OAAO,EAAE,kBAAkB,EAC3B,OAAO,EAAE,sBAAsB,EAC/B,UAAU,EAAE,eAAe,EAC3B,MAAM,EAAE,eAAe,EACvB,SAAS,EAAE,sBAAsB,EACjC,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EAAE,gBAAgB,EACzB,aAAa,EAEZ,IAAA,EAAA,QAAA,EAAA,MAAM,CAAC,kBAAkB,EAAE;AACxB,YAAA,GAAG,aAAa;AAChB,YAAA,YAAY,EAAE,mBAAmB,CAAC,aAAa,CAAC,YAAY,CAAC;AAC7D,YAAA,WAAW,EAAE,mBAAmB,CAAC,aAAa,CAAC,WAAW,CAAC;SAC9D,CAAC,EAAA,CACU,EAClB;AACN,EAAE;AAEW,MAAA,KAAK,GAAmB,CAAC,EAClC,SAAS,GAAG,SAAS,EACrB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,OAAO,GACV,KAAI;IACD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IACxF,MAAM,uBAAuB,GAAG,MAAM,CAAC,gBAAgB,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC;IACpE,uBAAuB,CAAC,OAAO,GAAG,gBAAgB,EAAE,IAAI,IAAI,CAAC,CAAC;AAC9D,IAAA,MAAM,eAAe,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;AAC5D,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;AACrC,IAAA,MAAM,WAAW,GAAG,YAAY,EAAE,CAAC;IAEnC,SAAS,CAAC,MAAK;QACX,MAAM,uBAAuB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9D,uBAAuB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAC/D,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QACnD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;QAC/D,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,CAAC;QAC9E,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CAAC,CAAC;AAC5E,QAAA,mBAAmB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AACrC,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;AACvD,KAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,SAAS,CAAC,MAAK;QACX,IAAI,OAAO,EAAE;AACT,YAAA,IAAI,YAAY,GAAgC,aAAa,EAAE,CAAC;AAChE,YAAA,OAAO,MAAK;AACR,gBAAA,YAAY,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC;gBAChD,YAAY,GAAG,SAAS,CAAC;AAC7B,aAAC,CAAC;SACL;QAED,OAAO,KAAK,CAAC,CAAC;AAClB,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAEd,IAAA,sBAAsB,CAAC,eAAe,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAE1D,IAAA,IAAI,CAAC,gBAAgB,IAAI,WAAW,EAAE;AAClC,QAAA,OAAO,IAAI,CAAC;KACf;IAED,MAAM,OAAO,IACTC,IAAA,CAAC,QAAQ,EACL,EAAA,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,SAAA,EAAU,gBAAgB,EAChD,QAAA,EAAA,CAAA,IAAI,KACDD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,SAAS,CAAA,CAAE,CAAC,GAAG,SAAS,EAAE,CAAC,YAAG,IAAI,EAAA,CAAO,CACtG,EACDA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,KAAK,EAAG,QAAA,EAAA,KAAK,GAAO,EAC1C,WAAW,IAAIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAG,QAAA,EAAA,WAAW,GAAO,CACrE,EAAA,CAAA,EACNA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,MAAM,CAAA,CAAE,CAAC,GAAG,MAAM,EAAE,CAAC,YAAG,OAAO,EAAA,CAAO,CAC/F,EAAA,CAAA,CACd,CAAC;IAEF,IAAI,QAAQ,EAAE;QACV,OAAO,YAAY,CACfC,IAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACLD,GAAC,CAAA,gBAAgB,EACb,EAAA,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,CAAC,kBAAkB,MACvBA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,cAAc,EACvB,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAC9D,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,kBAAkB,EACzB,CAAA,EAAA,CACE,CACX,EAAA,CACH,EACFA,GAAA,CAAC,kBAAkB,EAAA,EACf,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,CAAC,kBAAkB,EAAE,KAAK,MAC9BA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,cAAc,EAAA,QAAA,EACvBA,GACQ,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACtE,GAAG,EAAE,kBAAkB,EAEtB,QAAA,EAAA,OAAO,EACN,CAAA,EAAA,CACF,CACX,EACD,OAAO,EAAE,OAAO,EAAA,CAClB,CACK,EAAA,CAAA,EACX,QAAQ,CAAC,IAAI,CAChB,CAAC;KACL;AAED,IAAA,OAAO,YAAY,CACfA,GAAC,CAAA,gBAAgB,IACb,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,CAAC,kBAAkB,MACvBA,GAAA,CAAC,KAAK,EAAC,EAAA,KAAK,EAAC,OAAO,YAChBA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAAE,GAAG,EAAE,kBAAkB,EAAA,QAAA,EACxFA,aAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,GAAG,EAAE,eAAe,EAAA,QAAA,EACpE,OAAO,EACN,CAAA,EAAA,CACJ,EACF,CAAA,CACX,GACH,EACF,QAAQ,CAAC,IAAI,CAChB,CAAC;AACN;;;;"}
package/index.css CHANGED
@@ -51,42 +51,42 @@
51
51
  --magritte-color-icon-warning-secondary-v21-4-0:#9c5b03;
52
52
  --magritte-color-component-_overlay-background-content-v21-4-0:#26262699;
53
53
  }
54
- .magritte-animation-timeout___cwIwT_2-0-5{
54
+ .magritte-animation-timeout___cwIwT_2-0-6{
55
55
  --enter-animation-duration:0ms;
56
56
  --exit-animation-duration:0ms;
57
57
  }
58
58
  @media (prefers-reduced-motion: no-preference){
59
- .magritte-animation-timeout___cwIwT_2-0-5{
59
+ .magritte-animation-timeout___cwIwT_2-0-6{
60
60
  --enter-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v21-4-0);
61
61
  --exit-animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v21-4-0);
62
62
  }
63
63
  }
64
- .magritte-enter-animation-active___Qti02_2-0-5{
64
+ .magritte-enter-animation-active___Qti02_2-0-6{
65
65
  transition-property:transform, opacity;
66
66
  transition-duration:var(--enter-animation-duration);
67
67
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v21-4-0);
68
68
  }
69
- .magritte-exit-animation-active___deHqY_2-0-5{
69
+ .magritte-exit-animation-active___deHqY_2-0-6{
70
70
  transition-property:transform, opacity;
71
71
  transition-duration:var(--exit-animation-duration);
72
72
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v21-4-0);
73
73
  }
74
- .magritte-opacity-animation___m7RYi_2-0-5{
74
+ .magritte-opacity-animation___m7RYi_2-0-6{
75
75
  pointer-events:none;
76
76
  }
77
- .magritte-opacity-animation___m7RYi_2-0-5.magritte-enter-animation___CbUHN_2-0-5{
77
+ .magritte-opacity-animation___m7RYi_2-0-6.magritte-enter-animation___CbUHN_2-0-6{
78
78
  opacity:0;
79
79
  }
80
- .magritte-opacity-animation___m7RYi_2-0-5.magritte-enter-animation-active___Qti02_2-0-5{
80
+ .magritte-opacity-animation___m7RYi_2-0-6.magritte-enter-animation-active___Qti02_2-0-6{
81
81
  opacity:1;
82
82
  }
83
- .magritte-opacity-animation___m7RYi_2-0-5.magritte-exit-animation___d2AJ4_2-0-5{
83
+ .magritte-opacity-animation___m7RYi_2-0-6.magritte-exit-animation___d2AJ4_2-0-6{
84
84
  opacity:1;
85
85
  }
86
- .magritte-opacity-animation___m7RYi_2-0-5.magritte-exit-animation-active___deHqY_2-0-5{
86
+ .magritte-opacity-animation___m7RYi_2-0-6.magritte-exit-animation-active___deHqY_2-0-6{
87
87
  opacity:0;
88
88
  }
89
- .magritte-overlay___hMlKJ_2-0-5{
89
+ .magritte-overlay___hMlKJ_2-0-6{
90
90
  display:flex;
91
91
  align-items:center;
92
92
  justify-content:center;
@@ -94,27 +94,27 @@
94
94
  inset:0;
95
95
  background-color:var(--magritte-color-component-_overlay-background-content-v21-4-0);
96
96
  }
97
- .magritte-mobile-container___dQRCl_2-0-5,
98
- .magritte-desktop-container___26vkq_2-0-5{
97
+ .magritte-mobile-container___dQRCl_2-0-6,
98
+ .magritte-desktop-container___26vkq_2-0-6{
99
99
  background-color:var(--magritte-color-background-primary-v21-4-0);
100
100
  border-radius:var(--magritte-static-border-radius-600-v21-4-0);
101
101
  }
102
- .magritte-mobile-container___dQRCl_2-0-5{
102
+ .magritte-mobile-container___dQRCl_2-0-6{
103
103
  position:fixed;
104
104
  inset:auto 12px 16px;
105
105
  max-width:400px;
106
106
  margin:auto;
107
107
  }
108
- .magritte-desktop-container___26vkq_2-0-5{
108
+ .magritte-desktop-container___26vkq_2-0-6{
109
109
  width:400px;
110
110
  }
111
- .magritte-main___iCU-E_2-0-5{
111
+ .magritte-main___iCU-E_2-0-6{
112
112
  display:flex;
113
113
  flex-direction:column;
114
114
  align-items:center;
115
115
  padding:32px 32px 12px;
116
116
  }
117
- .magritte-icon___fLpa-_2-0-5{
117
+ .magritte-icon___fLpa-_2-0-6{
118
118
  display:flex;
119
119
  align-items:center;
120
120
  justify-content:center;
@@ -123,27 +123,27 @@
123
123
  border-radius:50%;
124
124
  margin-bottom:24px;
125
125
  }
126
- .magritte-icon_neutral___Jyl3l_2-0-5{
126
+ .magritte-icon_neutral___Jyl3l_2-0-6{
127
127
  background-color:var(--magritte-color-background-secondary-v21-4-0);
128
128
  --magritte-ui-icon-color-override:var(--magritte-color-icon-tertiary-v21-4-0);
129
129
  }
130
- .magritte-icon_accent___Nn-T1_2-0-5{
130
+ .magritte-icon_accent___Nn-T1_2-0-6{
131
131
  background-color:var(--magritte-color-background-accent-secondary-v21-4-0);
132
132
  --magritte-ui-icon-color-override:var(--magritte-color-icon-accent-v21-4-0);
133
133
  }
134
- .magritte-icon_positive___OU9Zu_2-0-5{
134
+ .magritte-icon_positive___OU9Zu_2-0-6{
135
135
  background-color:var(--magritte-color-background-positive-secondary-v21-4-0);
136
136
  --magritte-ui-icon-color-override:var(--magritte-color-icon-positive-v21-4-0);
137
137
  }
138
- .magritte-icon_warning___7BbUi_2-0-5{
138
+ .magritte-icon_warning___7BbUi_2-0-6{
139
139
  background-color:var(--magritte-color-background-warning-secondary-v21-4-0);
140
140
  --magritte-ui-icon-color-override:var(--magritte-color-icon-warning-secondary-v21-4-0);
141
141
  }
142
- .magritte-icon_negative___s0OA8_2-0-5{
142
+ .magritte-icon_negative___s0OA8_2-0-6{
143
143
  background-color:var(--magritte-color-background-negative-secondary-v21-4-0);
144
144
  --magritte-ui-icon-color-override:var(--magritte-color-icon-negative-v21-4-0);
145
145
  }
146
- .magritte-title___yG219_2-0-5{
146
+ .magritte-title___yG219_2-0-6{
147
147
  font-family:var(--magritte-typography-title-4-semibold-font-family-v21-4-0);
148
148
  font-weight:var(--magritte-typography-title-4-semibold-font-weight-v21-4-0);
149
149
  line-height:var(--magritte-typography-title-4-semibold-line-height-v21-4-0);
@@ -155,7 +155,7 @@
155
155
  color:var(--magritte-color-text-primary-v21-4-0);
156
156
  text-align:center;
157
157
  }
158
- .magritte-description___KeNoT_2-0-5{
158
+ .magritte-description___KeNoT_2-0-6{
159
159
  font-family:var(--magritte-typography-paragraph-2-regular-font-family-v21-4-0);
160
160
  font-weight:var(--magritte-typography-paragraph-2-regular-font-weight-v21-4-0);
161
161
  line-height:var(--magritte-typography-paragraph-2-regular-line-height-v21-4-0);
@@ -168,11 +168,11 @@
168
168
  text-align:center;
169
169
  margin-top:6px;
170
170
  }
171
- .magritte-buttons___lyxBC_2-0-5{
171
+ .magritte-buttons___lyxBC_2-0-6{
172
172
  display:flex;
173
173
  gap:12px;
174
174
  padding:12px;
175
175
  }
176
- .magritte-buttons_vertical___8lPCo_2-0-5{
176
+ .magritte-buttons_vertical___8lPCo_2-0-6{
177
177
  flex-direction:column;
178
178
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-alert",
3
- "version": "2.0.5",
3
+ "version": "2.0.6",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@hh.ru/magritte-common-is-server-env": "1.0.5",
24
- "@hh.ru/magritte-common-modal-helper": "1.2.7",
24
+ "@hh.ru/magritte-common-modal-helper": "1.2.8",
25
25
  "@hh.ru/magritte-common-mouse": "1.1.13",
26
26
  "@hh.ru/magritte-common-use-swipe": "3.1.3",
27
27
  "@hh.ru/magritte-design-tokens": "21.4.0",
@@ -39,5 +39,5 @@
39
39
  "publishConfig": {
40
40
  "access": "public"
41
41
  },
42
- "gitHead": "7ba02d5feb5c5dc67ba5aef9f921c5cf104fb698"
42
+ "gitHead": "c66644cd062ffaa453391d3eb98b50c3cb5058e7"
43
43
  }