@hh.ru/magritte-ui-snackbar 6.4.25 → 6.4.27

package/SnackbarRenderer.js

@@ -15,248 +15,318 @@ import { SnackbarTransitionName } from './types.js';
 import { useAriaSnackbar } from './useAriaSnackbar.js';
 import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
 import { useTimer, Timer } from '@hh.ru/magritte-ui-timer';
-import { s as styles } from './snackbar-ClWKT5ad.js';
+import { s as styles } from './snackbar-DxehbKoS.js';
 
 const OTHER_CLASS_NAMES = {
-    [SnackbarTransitionName.Hide]: {
-        exit: styles.exit,
-        exitActive: styles['exit-active'],
-        exitDone: styles['exit-done'],
-    },
-    [SnackbarTransitionName.Autohide]: {
-        exit: styles.exit,
-        exitActive: styles['exit-active_autohide'],
-        exitDone: styles['exit-done'],
-    },
-    [SnackbarTransitionName.RemoveImmediately]: {},
+  [SnackbarTransitionName.Hide]: {
+    exit: styles.exit,
+    exitActive: styles["exit-active"],
+    exitDone: styles["exit-done"]
+  },
+  [SnackbarTransitionName.Autohide]: {
+    exit: styles.exit,
+    exitActive: styles["exit-active_autohide"],
+    exitDone: styles["exit-done"]
+  },
+  [SnackbarTransitionName.RemoveImmediately]: {}
 };
 const OPEN_CLASS_NAMES = {
-    [SnackbarTransitionName.Show]: {
-        top: {
-            appear: styles.appearTop,
-            appearActive: styles['appear-active'],
-            appearDone: styles['appear-done'],
-        },
-        bottom: {
-            appear: styles.appearBottom,
-            appearActive: styles['appear-active'],
-            appearDone: styles['appear-done'],
-        },
+  [SnackbarTransitionName.Show]: {
+    top: {
+      appear: styles.appearTop,
+      appearActive: styles["appear-active"],
+      appearDone: styles["appear-done"]
     },
+    bottom: {
+      appear: styles.appearBottom,
+      appearActive: styles["appear-active"],
+      appearDone: styles["appear-done"]
+    }
+  }
 };
-const DEFAULT_AUTOHIDE_TIME_MS = 6000;
+const DEFAULT_AUTOHIDE_TIME_MS = 6e3;
 const BASE_VERTICAL_PADDING = 16;
 const VERTICAL_PADDING_BETWEEN_SNACKBAR = 8;
-const SnackbarRenderer = ({ actionLabel, addon, align = 'bottom', animateOut, autohideTime = DEFAULT_AUTOHIDE_TIME_MS, children, containerId, isShown, onAction, onClose, onShown, showClose, showTimer, timeout, transition, 'aria-label': ariaLabel, 'aria-label-close': ariaLabelClose, role = 'status', stretched = true, position, container, 'data-qa': dataQa, ...props }) => {
-    const actionFunc = useCallback(() => onAction?.(), [onAction]);
-    const [hasKeyboardFocus, setHasKeyboardFocus] = useState(false);
-    const [hasHover, setHasHover] = useState(false);
-    const [isTouched, setisTouched] = useState(false);
-    const hasTouchSupportRef = useRef(false);
-    const prevWidth = useRef(0);
-    const stretchedRef = useRef(stretched);
-    const closeReasonRef = useRef(null);
-    const autohideFunc = useCallback(() => {
-        closeReasonRef.current = 'timeout';
-        animateOut(SnackbarTransitionName.Autohide);
-    }, [animateOut]);
-    const closeFunc = useCallback(() => {
-        closeReasonRef.current = 'user';
-        animateOut(SnackbarTransitionName.Hide);
-    }, [animateOut]);
-    const ariaAttributes = useAriaSnackbar({ role, hasAction: !!actionLabel, 'aria-label': ariaLabel });
-    const visible = transition === SnackbarTransitionName.Show;
-    const maxDistanceSqRef = useRef({ nearestSide: Number.POSITIVE_INFINITY, farSide: Number.POSITIVE_INFINITY });
-    const swipeThresholdXRef = useRef(null);
-    const swipeThresholdYRef = useRef(null);
-    const isTimerPaused = hasKeyboardFocus || hasHover || isTouched;
-    const removeImmediately = useCallback(() => {
-        animateOut(SnackbarTransitionName.RemoveImmediately);
-        onClose?.({ reason: closeReasonRef.current });
-        closeReasonRef.current = null;
-    }, [animateOut, onClose]);
-    const snackbarRef = useRef(null);
-    const bindEscapeToClose = useEscapeToClose(closeFunc);
-    const snackbarRefMultiplexer = useMultipleRefs(snackbarRef, bindEscapeToClose);
-    useTimer(!!autohideTime && !showTimer ? autohideTime : -1, (callable) => {
-        const timeoutId = setTimeout(callable, 50);
-        return () => clearTimeout(timeoutId);
-    }, (remaining) => {
-        remaining < 0 && autohideFunc();
-    }, isTimerPaused);
-    useEffect(() => {
-        if (snackbarRef.current !== null) {
-            const maxDistanceX = snackbarRef.current.clientWidth * 0.66;
-            const maxDistanceNearestY = snackbarRef.current.clientHeight * 0.5;
-            const maxDistanceFarY = snackbarRef.current.clientHeight;
-            maxDistanceSqRef.current.nearestSide = Math.pow(maxDistanceX, 2) + Math.pow(maxDistanceNearestY, 2);
-            maxDistanceSqRef.current.farSide = Math.pow(maxDistanceX, 2) + Math.pow(maxDistanceFarY, 2);
-            swipeThresholdXRef.current = { minDelta: -maxDistanceX, maxDelta: maxDistanceX };
-            swipeThresholdYRef.current =
-                align === 'top'
-                    ? { minDelta: -maxDistanceNearestY, maxDelta: maxDistanceFarY }
-                    : { minDelta: -maxDistanceFarY, maxDelta: maxDistanceNearestY };
-        }
-    }, [align, visible]);
-    const handleSwipeMove = useCallback((event) => {
-        if (snackbarRef.current !== null) {
-            // насколько прозрачным нужно сделать снекбар с учетом расстояния от начальной позиции
-            let maxDistanceSq = maxDistanceSqRef.current.nearestSide;
-            // определяем был ли свайп в дальнюю сторону экрана по вертикали
-            if ((align === 'top' && event.distanceY > 0) || (align === 'bottom' && event.distanceY < 0)) {
-                maxDistanceSq = maxDistanceSqRef.current.farSide;
-            }
-            const fadeDistanceSq = Math.pow(event.distanceX, 2) + Math.pow(event.distanceY, 2);
-            snackbarRef.current.style.opacity = `${1 - fadeDistanceSq / maxDistanceSq}`;
-            snackbarRef.current.style.transform = `translate(${event.distanceX}px, ${event.distanceY}px)`;
-        }
-    }, [align]);
-    const handleSwipeEnd = useCallback(() => {
-        if (snackbarRef.current !== null) {
-            snackbarRef.current.style.opacity = `0`;
-        }
-        closeFunc();
-    }, [closeFunc]);
-    const handleSwipeCancel = useCallback(() => {
-        if (snackbarRef.current !== null) {
-            snackbarRef.current.style.removeProperty('opacity');
-            snackbarRef.current.style.removeProperty('transform');
-        }
-    }, []);
-    const swipeHandlers = useSwipeHandlers({
-        thresholdXRef: swipeThresholdXRef,
-        thresholdYRef: swipeThresholdYRef,
-        onSwipeMove: handleSwipeMove,
-        onSwipeEnd: handleSwipeEnd,
-        onSwipeCancel: handleSwipeCancel,
-    });
-    useEffect(() => {
-        const snackbar = snackbarRef.current;
-        if (!snackbar) {
-            return void 0;
-        }
-        const handleTouchStart = (event) => {
-            event.stopPropagation();
-            hasTouchSupportRef.current = true;
-            setisTouched(true);
-            swipeHandlers.onTouchStart(event);
-        };
-        const handleTouchMove = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            swipeHandlers.onTouchMove(event);
-        };
-        const handleTouchEnd = (event) => {
-            setisTouched(false);
-            swipeHandlers.onTouchEnd(event);
-        };
-        const handleTouchCancel = (event) => {
-            setisTouched(false);
-            swipeHandlers.onTouchCancel(event);
-        };
-        snackbar.addEventListener('touchstart', handleTouchStart);
-        snackbar.addEventListener('touchmove', handleTouchMove, { passive: false });
-        snackbar.addEventListener('touchend', handleTouchEnd);
-        snackbar.addEventListener('touchcancel', handleTouchCancel);
-        return () => {
-            snackbar.removeEventListener('touchstart', handleTouchStart);
-            snackbar.removeEventListener('touchmove', handleTouchMove);
-            snackbar.removeEventListener('touchend', handleTouchEnd);
-            snackbar.removeEventListener('touchcancel', handleTouchCancel);
-        };
-    }, [swipeHandlers]);
-    useEffect(() => {
-        const snackbar = snackbarRef.current;
-        if (!snackbar) {
-            return;
+const SnackbarRenderer = ({
+  actionLabel,
+  addon,
+  align = "bottom",
+  animateOut,
+  autohideTime = DEFAULT_AUTOHIDE_TIME_MS,
+  children,
+  containerId,
+  isShown,
+  onAction,
+  onClose,
+  onShown,
+  showClose,
+  showTimer,
+  timeout,
+  transition,
+  "aria-label": ariaLabel,
+  "aria-label-close": ariaLabelClose,
+  role = "status",
+  stretched = true,
+  position,
+  container,
+  "data-qa": dataQa,
+  ...props
+}) => {
+  const actionFunc = useCallback(() => onAction?.(), [onAction]);
+  const [hasKeyboardFocus, setHasKeyboardFocus] = useState(false);
+  const [hasHover, setHasHover] = useState(false);
+  const [isTouched, setisTouched] = useState(false);
+  const hasTouchSupportRef = useRef(false);
+  const prevWidth = useRef(0);
+  const stretchedRef = useRef(stretched);
+  const closeReasonRef = useRef(null);
+  const autohideFunc = useCallback(() => {
+    closeReasonRef.current = "timeout";
+    animateOut(SnackbarTransitionName.Autohide);
+  }, [animateOut]);
+  const closeFunc = useCallback(() => {
+    closeReasonRef.current = "user";
+    animateOut(SnackbarTransitionName.Hide);
+  }, [animateOut]);
+  const ariaAttributes = useAriaSnackbar({ role, hasAction: !!actionLabel, "aria-label": ariaLabel });
+  const visible = transition === SnackbarTransitionName.Show;
+  const maxDistanceSqRef = useRef({ nearestSide: Number.POSITIVE_INFINITY, farSide: Number.POSITIVE_INFINITY });
+  const swipeThresholdXRef = useRef(null);
+  const swipeThresholdYRef = useRef(null);
+  const isTimerPaused = hasKeyboardFocus || hasHover || isTouched;
+  const removeImmediately = useCallback(() => {
+    animateOut(SnackbarTransitionName.RemoveImmediately);
+    onClose?.({ reason: closeReasonRef.current });
+    closeReasonRef.current = null;
+  }, [animateOut, onClose]);
+  const snackbarRef = useRef(null);
+  const bindEscapeToClose = useEscapeToClose(closeFunc);
+  const snackbarRefMultiplexer = useMultipleRefs(snackbarRef, bindEscapeToClose);
+  useTimer(
+    !!autohideTime && !showTimer ? autohideTime : -1,
+    (callable) => {
+      const timeoutId = setTimeout(callable, 50);
+      return () => clearTimeout(timeoutId);
+    },
+    (remaining) => {
+      remaining < 0 && autohideFunc();
+    },
+    isTimerPaused
+  );
+  useEffect(() => {
+    if (snackbarRef.current !== null) {
+      const maxDistanceX = snackbarRef.current.clientWidth * 0.66;
+      const maxDistanceNearestY = snackbarRef.current.clientHeight * 0.5;
+      const maxDistanceFarY = snackbarRef.current.clientHeight;
+      maxDistanceSqRef.current.nearestSide = Math.pow(maxDistanceX, 2) + Math.pow(maxDistanceNearestY, 2);
+      maxDistanceSqRef.current.farSide = Math.pow(maxDistanceX, 2) + Math.pow(maxDistanceFarY, 2);
+      swipeThresholdXRef.current = { minDelta: -maxDistanceX, maxDelta: maxDistanceX };
+      swipeThresholdYRef.current = align === "top" ? { minDelta: -maxDistanceNearestY, maxDelta: maxDistanceFarY } : { minDelta: -maxDistanceFarY, maxDelta: maxDistanceNearestY };
+    }
+  }, [align, visible]);
+  const handleSwipeMove = useCallback(
+    (event) => {
+      if (snackbarRef.current !== null) {
+        let maxDistanceSq = maxDistanceSqRef.current.nearestSide;
+        if (align === "top" && event.distanceY > 0 || align === "bottom" && event.distanceY < 0) {
+          maxDistanceSq = maxDistanceSqRef.current.farSide;
         }
-        snackbar.style.setProperty('--snackbar-offset', `${snackbarRef.current.offsetHeight}px`);
-        prevWidth.current = snackbar.getBoundingClientRect().width;
-    }, []);
-    useEffect(() => {
-        const snackbar = snackbarRef.current;
-        if (!snackbar) {
-            return;
+        const fadeDistanceSq = Math.pow(event.distanceX, 2) + Math.pow(event.distanceY, 2);
+        snackbarRef.current.style.opacity = `${1 - fadeDistanceSq / maxDistanceSq}`;
+        snackbarRef.current.style.transform = `translate(${event.distanceX}px, ${event.distanceY}px)`;
+      }
+    },
+    [align]
+  );
+  const handleSwipeEnd = useCallback(() => {
+    if (snackbarRef.current !== null) {
+      snackbarRef.current.style.opacity = `0`;
+    }
+    closeFunc();
+  }, [closeFunc]);
+  const handleSwipeCancel = useCallback(() => {
+    if (snackbarRef.current !== null) {
+      snackbarRef.current.style.removeProperty("opacity");
+      snackbarRef.current.style.removeProperty("transform");
+    }
+  }, []);
+  const swipeHandlers = useSwipeHandlers({
+    thresholdXRef: swipeThresholdXRef,
+    thresholdYRef: swipeThresholdYRef,
+    onSwipeMove: handleSwipeMove,
+    onSwipeEnd: handleSwipeEnd,
+    onSwipeCancel: handleSwipeCancel
+  });
+  useEffect(() => {
+    const snackbar = snackbarRef.current;
+    if (!snackbar) {
+      return void 0;
+    }
+    const handleTouchStart = (event) => {
+      event.stopPropagation();
+      hasTouchSupportRef.current = true;
+      setisTouched(true);
+      swipeHandlers.onTouchStart(event);
+    };
+    const handleTouchMove = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      swipeHandlers.onTouchMove(event);
+    };
+    const handleTouchEnd = (event) => {
+      setisTouched(false);
+      swipeHandlers.onTouchEnd(event);
+    };
+    const handleTouchCancel = (event) => {
+      setisTouched(false);
+      swipeHandlers.onTouchCancel(event);
+    };
+    snackbar.addEventListener("touchstart", handleTouchStart);
+    snackbar.addEventListener("touchmove", handleTouchMove, { passive: false });
+    snackbar.addEventListener("touchend", handleTouchEnd);
+    snackbar.addEventListener("touchcancel", handleTouchCancel);
+    return () => {
+      snackbar.removeEventListener("touchstart", handleTouchStart);
+      snackbar.removeEventListener("touchmove", handleTouchMove);
+      snackbar.removeEventListener("touchend", handleTouchEnd);
+      snackbar.removeEventListener("touchcancel", handleTouchCancel);
+    };
+  }, [swipeHandlers]);
+  useEffect(() => {
+    const snackbar = snackbarRef.current;
+    if (!snackbar) {
+      return;
+    }
+    snackbar.style.setProperty("--snackbar-offset", `${snackbarRef.current.offsetHeight}px`);
+    prevWidth.current = snackbar.getBoundingClientRect().width;
+  }, []);
+  useEffect(() => {
+    const snackbar = snackbarRef.current;
+    if (!snackbar) {
+      return;
+    }
+    const snackbars = container.querySelectorAll('[data-magritte-snackbar="true"]');
+    let offset = 0;
+    let found = false;
+    for (const node of snackbars) {
+      if (found) {
+        offset += node.offsetHeight;
+      }
+      if (node === snackbar) {
+        found = true;
+      }
+    }
+    const value = `${offset + VERTICAL_PADDING_BETWEEN_SNACKBAR * position + BASE_VERTICAL_PADDING}px`;
+    if (align === "top") {
+      snackbar.style.top = value;
+      snackbar.style.removeProperty("bottom");
+      return;
+    }
+    snackbar.style.bottom = value;
+    snackbar.style.removeProperty("top");
+  }, [position, align, container]);
+  useLayoutEffect(() => {
+    const snackbar = snackbarRef.current;
+    if (!snackbar || stretched === stretchedRef.current) {
+      return void 0;
+    }
+    const width = snackbar.getBoundingClientRect().width;
+    if (Math.abs(width - prevWidth.current) < 1) {
+      return void 0;
+    }
+    snackbar.style.width = `${prevWidth.current}px`;
+    void snackbar.offsetWidth;
+    snackbar.style.width = `${width}px`;
+    const onEnd = (event) => {
+      if (event.propertyName !== "width") {
+        return;
+      }
+      snackbar.style.removeProperty("width");
+      snackbar.removeEventListener("transitionend", onEnd);
+    };
+    snackbar.addEventListener("transitionend", onEnd);
+    stretchedRef.current = stretched;
+    prevWidth.current = width;
+    return () => {
+      snackbar.removeEventListener("transitionend", onEnd);
+      snackbar.style.removeProperty("width");
+    };
+  }, [stretched]);
+  const showDivider = showClose || Boolean(actionLabel);
+  const classNames = transition === SnackbarTransitionName.Show ? OPEN_CLASS_NAMES[transition][align] : OTHER_CLASS_NAMES[transition];
+  return /* @__PURE__ */ jsx(
+    CSSTransition,
+    {
+      appear: true,
+      classNames,
+      in: visible,
+      nodeRef: snackbarRef,
+      onEnter: () => {
+        onShown();
+      },
+      onEntered: () => {
+        if (actionLabel) {
+          snackbarRef.current?.focus();
         }
-        // снекбары могут быть разные по высоте
-        // для расчета текущей позиции
-        // высоту каждого предыдущего надо учесть
-        const snackbars = container.querySelectorAll('[data-magritte-snackbar="true"]');
-        let offset = 0;
-        let found = false;
-        for (const node of snackbars) {
-            if (found) {
-                offset += node.offsetHeight;
+      },
+      onExited: removeImmediately,
+      timeout,
+      children: /* @__PURE__ */ jsx(ThemeWrapper, { children: (themeClass) => /* @__PURE__ */ jsx(Layer, { layer: "snackbar", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          ...ariaAttributes,
+          className: classnames(styles.snackbar, themeClass, {
+            [styles.snackbarStretched]: stretched,
+            [styles[`snackbar_align-${align}`]]: align,
+            [styles.snackbarInBody]: !containerId
+          }),
+          "data-qa": classnames(dataQa, dataQa !== "snackbar" && "snackbar"),
+          ref: snackbarRefMultiplexer,
+          onFocus: (event) => {
+            if (event.target !== snackbarRef.current && event.target.classList.contains("focus-visible")) {
+              setHasKeyboardFocus(true);
             }
-            if (node === snackbar) {
-                found = true;
-            }
-        }
-        const value = `${offset + VERTICAL_PADDING_BETWEEN_SNACKBAR * position + BASE_VERTICAL_PADDING}px`;
-        if (align === 'top') {
-            snackbar.style.top = value;
-            snackbar.style.removeProperty('bottom');
-            return;
+          },
+          onBlur: () => setHasKeyboardFocus(false),
+          onMouseEnter: () => !hasTouchSupportRef.current && setHasHover(true),
+          onMouseLeave: () => !hasTouchSupportRef.current && setHasHover(false),
+          "data-magritte-snackbar": true,
+          children: /* @__PURE__ */ jsxs("div", { className: styles.snackbarContent, children: [
+            !!addon && /* @__PURE__ */ jsx("div", { className: styles.snackbarAddon, "data-qa": "snackbar-addon", children: addon }),
+            !!autohideTime && showTimer && /* @__PURE__ */ jsx("div", { className: styles.snackbarAddon, "data-qa": "snackbar-timer", children: /* @__PURE__ */ jsx(Timer, { timeout: autohideTime, pause: isTimerPaused, callback: autohideFunc }) }),
+            /* @__PURE__ */ jsx("div", { className: styles.snackbarTextWrapper, children: /* @__PURE__ */ jsx("div", { className: styles.snackbarText, id: "dialog-description", children }) }),
+            showDivider && /* @__PURE__ */ jsx("div", { className: styles.divider, children: /* @__PURE__ */ jsx(Divider, { mode: "vertical" }) }),
+            !!actionLabel && /* @__PURE__ */ jsx("div", { className: styles.action, children: /* @__PURE__ */ jsx(
+              Link,
+              {
+                "data-qa": "snackbar-user-action",
+                "aria-label": actionLabel,
+                Element: "button",
+                type: "button",
+                onClick: actionFunc,
+                typography: "subtitle-1-semibold",
+                style: "constant",
+                children: actionLabel
+              }
+            ) }),
+            showClose && /* @__PURE__ */ jsx("div", { className: styles.snackbarClose, children: /* @__PURE__ */ jsx(
+              CrossOutlinedSize24,
+              {
+                padding: 8,
+                borderRadius: "halfHeight",
+                initialColor: "constant-secondary",
+                "data-qa": "snackbar-close-action",
+                tabIndex: actionLabel ? 0 : -1,
+                "aria-label": actionLabel && typeof ariaLabelClose === "string" ? ariaLabelClose : void 0,
+                onClick: closeFunc
+              }
+            ) })
+          ] })
         }
-        snackbar.style.bottom = value;
-        snackbar.style.removeProperty('top');
-    }, [position, align, container]);
-    useLayoutEffect(() => {
-        const snackbar = snackbarRef.current;
-        if (!snackbar || stretched === stretchedRef.current) {
-            return void 0;
-        }
-        const width = snackbar.getBoundingClientRect().width;
-        if (Math.abs(width - prevWidth.current) < 1) {
-            return void 0;
-        }
-        // width: auto не анимируется, поэтому
-        // зафиксировали ширину → анимировали → снял инлайн свойство
-        snackbar.style.width = `${prevWidth.current}px`;
-        void snackbar.offsetWidth; // force layout
-        snackbar.style.width = `${width}px`;
-        const onEnd = (event) => {
-            if (event.propertyName !== 'width') {
-                return;
-            }
-            snackbar.style.removeProperty('width');
-            snackbar.removeEventListener('transitionend', onEnd);
-        };
-        snackbar.addEventListener('transitionend', onEnd);
-        stretchedRef.current = stretched;
-        prevWidth.current = width;
-        return () => {
-            snackbar.removeEventListener('transitionend', onEnd);
-            snackbar.style.removeProperty('width');
-        };
-    }, [stretched]);
-    const showDivider = showClose || Boolean(actionLabel);
-    const classNames = transition === SnackbarTransitionName.Show
-        ? OPEN_CLASS_NAMES[transition][align]
-        : OTHER_CLASS_NAMES[transition];
-    return (jsx(CSSTransition, { appear: true, classNames: classNames, in: visible, nodeRef: snackbarRef, onEnter: () => {
-            onShown();
-        }, onEntered: () => {
-            if (actionLabel) {
-                snackbarRef.current?.focus();
-            }
-        }, onExited: removeImmediately, timeout: timeout, children: jsx(ThemeWrapper, { children: (themeClass) => (jsx(Layer, { layer: "snackbar", children: jsx("div", { ...props, ...ariaAttributes, className: classnames(styles.snackbar, themeClass, {
-                        [styles.snackbarStretched]: stretched,
-                        [styles[`snackbar_align-${align}`]]: align,
-                        [styles.snackbarInBody]: !containerId,
-                    }), "data-qa": classnames(dataQa, dataQa !== 'snackbar' && 'snackbar'), ref: snackbarRefMultiplexer, onFocus: (event) => {
-                        // полифилл `@hh.ru/magritte-common-focus-visible` вешает класс
-                        // только на клавиатурный фокус — по клику таймер не останавливаем
-                        if (event.target !== snackbarRef.current &&
-                            event.target.classList.contains('focus-visible')) {
-                            setHasKeyboardFocus(true);
-                        }
-                    }, onBlur: () => setHasKeyboardFocus(false), 
-                    // на тач-устройствах браузер эмулирует mouseenter после тапа
-                    // и «залипший» ховер останавливал бы таймер до следующего тапа
-                    onMouseEnter: () => !hasTouchSupportRef.current && setHasHover(true), onMouseLeave: () => !hasTouchSupportRef.current && setHasHover(false), "data-magritte-snackbar": true, children: jsxs("div", { className: styles.snackbarContent, children: [!!addon && (jsx("div", { className: styles.snackbarAddon, "data-qa": "snackbar-addon", children: addon })), !!autohideTime && showTimer && (jsx("div", { className: styles.snackbarAddon, "data-qa": "snackbar-timer", children: jsx(Timer, { timeout: autohideTime, pause: isTimerPaused, callback: autohideFunc }) })), jsx("div", { className: styles.snackbarTextWrapper, children: jsx("div", { className: styles.snackbarText, id: "dialog-description", children: children }) }), showDivider && (jsx("div", { className: styles.divider, children: jsx(Divider, { mode: "vertical" }) })), !!actionLabel && (jsx("div", { className: styles.action, children: jsx(Link, { "data-qa": "snackbar-user-action", "aria-label": actionLabel, Element: "button", type: "button", onClick: actionFunc, typography: "subtitle-1-semibold", style: "constant", children: actionLabel }) })), showClose && (jsx("div", { className: styles.snackbarClose, children: jsx(CrossOutlinedSize24, { padding: 8, borderRadius: "halfHeight", initialColor: "constant-secondary", "data-qa": "snackbar-close-action", tabIndex: actionLabel ? 0 : -1, "aria-label": actionLabel && typeof ariaLabelClose === 'string'
-                                        ? ariaLabelClose
-                                        : undefined, onClick: closeFunc }) }))] }) }) })) }) }));
+      ) }) })
+    }
+  );
 };
 
 export { SnackbarRenderer };