@vkontakte/vkui 4.28.1 → 4.30.0

package/src/components/SplitLayout/SplitLayout.tsx

@@ -43,6 +43,7 @@ export const SplitLayout: React.FC<SplitLayoutProps> = ({
       <div
         {...restProps}
         ref={getRef}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames("SplitLayout__inner", {
           "SplitLayout__inner--header": !!header,
         })}

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -2,7 +2,8 @@ import * as React from "react";
 import { usePlatform } from "../../hooks/usePlatform";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import HorizontalScroll, {
+import {
+  HorizontalScroll,
   HorizontalScrollProps,
   ScrollPositionHandler,
 } from "../HorizontalScroll/HorizontalScroll";

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -7,7 +7,7 @@ import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { Icon16Dropdown } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Caption } from "../Typography/Caption/Caption";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import "./SubnavigationButton.css";
 
 export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
@@ -62,6 +62,7 @@ export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (
       {...restProps}
       hasActive={false}
       focusVisibleMode="outside"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("SubnavigationButton", platform),
         `SubnavigationButton--${size}`,

package/src/components/Switch/Readme.md

@@ -5,51 +5,27 @@
   <Panel id="switch">
     <PanelHeader>Switch</PanelHeader>
     <Group>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch aria-label="Комментарии к записям" />}
-      >
+      <SimpleCell Component="label" after={<Switch />}>
         Комментарии к записям
-      </Cell>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch defaultChecked aria-label="Ссылки" />}
-      >
+      </SimpleCell>
+      <SimpleCell Component="label" after={<Switch defaultChecked />}>
         Ссылки
-      </Cell>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch disabled aria-label="Фотоальбомы" />}
-      >
+      </SimpleCell>
+      <SimpleCell Component="label" disabled after={<Switch disabled />}>
         Фотоальбомы
-      </Cell>
+      </SimpleCell>
     </Group>
     <Group header={<Header mode="secondary">Компактный вид</Header>}>
       <AdaptivityProvider sizeY="compact">
-        <Cell
-          role={null}
-          disabled
-          after={<Switch aria-label="Комментарии к записям" />}
-        >
+        <SimpleCell Component="label" after={<Switch />}>
           Комментарии к записям
-        </Cell>
-        <Cell
-          role={null}
-          disabled
-          after={<Switch defaultChecked aria-label="Ссылки" />}
-        >
+        </SimpleCell>
+        <SimpleCell Component="label" after={<Switch defaultChecked />}>
           Ссылки
-        </Cell>
-        <Cell
-          role={null}
-          disabled
-          after={<Switch disabled aria-label="Фотоальбомы" />}
-        >
+        </SimpleCell>
+        <SimpleCell Component="label" disabled after={<Switch disabled />}>
           Фотоальбомы
-        </Cell>
+        </SimpleCell>
       </AdaptivityProvider>
     </Group>
   </Panel>

package/src/components/Switch/Switch.tsx

@@ -29,6 +29,7 @@ export const Switch: React.FC<SwitchProps> = ({
 
   return (
     <label
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Switch", platform),
         `Switch--sizeY-${sizeY}`,

package/src/components/Tabbar/Tabbar.tsx

@@ -28,6 +28,7 @@ const Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Tabbar", platform),
         `Tabbar--l-${getItemsLayout()}`,

package/src/components/TabbarItem/TabbarItem.css

@@ -35,6 +35,7 @@
   justify-content: center;
   pointer-events: none;
   height: 100%;
+  width: 100%;
   overflow: hidden;
 }
 

package/src/components/TabbarItem/TabbarItem.tsx

@@ -16,7 +16,7 @@ export interface TabbarItemProps
     HasComponent {
   selected?: boolean;
   /**
-   * Тест рядом с иконкой
+   * Текст рядом с иконкой
    */
   text?: React.ReactNode;
   /**
@@ -54,6 +54,7 @@ const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
       {...restProps}
       disabled={disabled}
       href={href}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("TabbarItem", platform), {
         "TabbarItem--selected": selected,
         "TabbarItem--text": !!text,

package/src/components/Tabs/Readme.md

@@ -7,7 +7,7 @@ class Example extends React.Component {
       activePanel: "panel1",
       contextOpened: false,
       mode: "all",
-      activeTab1: "recomendations",
+      activeTab1: "recommendations",
       activeTab2: "music",
       activeTab3: "news",
       activeTab4: "all",
@@ -63,11 +63,11 @@ class Example extends React.Component {
               <TabsItem
                 onClick={() => {
                   this.setState({
-                    activeTab1: "recomendations",
+                    activeTab1: "recommendations",
                     contextOpened: false,
                   });
                 }}
-                selected={this.state.activeTab1 === "recomendations"}
+                selected={this.state.activeTab1 === "recommendations"}
               >
                 Интересное
               </TabsItem>
@@ -134,8 +134,8 @@ class Example extends React.Component {
                 Моя музыка
               </TabsItem>
               <TabsItem
-                onClick={() => this.setState({ activeTab2: "recomendations" })}
-                selected={this.state.activeTab2 === "recomendations"}
+                onClick={() => this.setState({ activeTab2: "recommendations" })}
+                selected={this.state.activeTab2 === "recommendations"}
               >
                 Рекомендации
               </TabsItem>
@@ -169,9 +169,9 @@ class Example extends React.Component {
                 </TabsItem>
                 <TabsItem
                   onClick={() =>
-                    this.setState({ activeTab3: "recomendations" })
+                    this.setState({ activeTab3: "recommendations" })
                   }
-                  selected={this.state.activeTab3 === "recomendations"}
+                  selected={this.state.activeTab3 === "recommendations"}
                 >
                   Рекомендации
                 </TabsItem>

package/src/components/TabsItem/TabsItem.tsx

@@ -7,7 +7,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { TabsProps, TabsModeContext } from "../Tabs/Tabs";
 import Headline from "../Typography/Headline/Headline";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import Text from "../Typography/Text/Text";
 import "./TabsItem.css";
 
@@ -35,6 +35,7 @@ const TabsItem: React.FC<TabsItemProps> = ({
   return (
     <Tappable
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("TabsItem", platform), {
         "TabsItem--selected": selected,
       })}

package/src/components/Tappable/Tappable.css

@@ -1,5 +1,10 @@
 .Tappable {
   position: relative;
+  cursor: default;
+}
+
+.Tappable--hasHover,
+.Tappable--hasActive {
   cursor: pointer;
 }
 

package/src/components/Tappable/Tappable.tsx

@@ -257,13 +257,16 @@ const Tappable: React.FC<TappableProps> = ({
     }
 
     // отключить без задержки при длинном тапе
-    const activeDuraion = duration - ACTIVE_DELAY;
-    stop(activeDuraion >= 100 ? 0 : activeEffectDelay - activeDuraion);
+    const activeDuration = duration - ACTIVE_DELAY;
+    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
   }
 
+  // eslint-disable-next-line vkui/no-object-expression-in-arguments
   const classes = classNames(
     getClassName("Tappable", platform),
     `Tappable--sizeX-${sizeX}`,
+    hasHover && `Tappable--hasHover`,
+    hasActive && `Tappable--hasActive`,
     hasHover && hovered && !isPresetHoverMode && hoverMode,
     hasActive && active && !isPresetActiveMode && activeMode,
     focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,

package/src/components/TextTooltip/TextTooltip.tsx

@@ -3,7 +3,7 @@ import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { prefixClass } from "../../lib/prefixClass";
 import "./TextTooltip.css";
 

package/src/components/Tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { useNavTransition } from "../NavTransitionContext/NavTransitionContext";
 import { Modifier, usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
@@ -179,12 +179,13 @@ const Tooltip: React.FC<TooltipProps> = ({
     (multiChildren || primitiveChild) &&
       warn(
         [
-          "children must be a single React element, got",
-          multiChildren && "multiple",
+          "children должен быть одним React элементом, получено",
+          multiChildren && "несколько",
           primitiveChild && JSON.stringify(children),
         ]
           .filter(Boolean)
-          .join(" ")
+          .join(" "),
+        "error"
       );
   }
 
@@ -207,7 +208,7 @@ const Tooltip: React.FC<TooltipProps> = ({
     );
   }
 
-  const arrowOffsetModiifer = React.useMemo<ArrowOffsetModifier>(() => {
+  const arrowOffsetModifier = React.useMemo<ArrowOffsetModifier>(() => {
     return {
       name: "arrowOffset",
       enabled: true,
@@ -261,7 +262,7 @@ const Tooltip: React.FC<TooltipProps> = ({
       {
         name: "flip",
       },
-      arrowOffsetModiifer,
+      arrowOffsetModifier,
     ],
   });
 

package/src/components/Touch/Touch.tsx

@@ -91,10 +91,10 @@ export const Touch: React.FC<TouchProps> = ({
   const gesture = React.useRef<Partial<Gesture> | null>(null);
   const handle = (
     e: VKUITouchEvent,
-    handers: Array<TouchEventHandler | undefined | false>
+    handlers: Array<TouchEventHandler | undefined | false>
   ) => {
     stopPropagation && e.stopPropagation();
-    handers.forEach((cb) => {
+    handlers.forEach((cb) => {
       const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);
       cb && cb({ ...(gesture.current as Gesture), duration, originalEvent: e });
     });
@@ -209,7 +209,7 @@ export const Touch: React.FC<TouchProps> = ({
     if (touchEnabled()) {
       onLeave && onLeave(e);
     }
-    subscribe(null);
+    unsubscribe();
   }
 
   const listenerParams = { capture: useCapture, passive: false };
@@ -223,6 +223,9 @@ export const Touch: React.FC<TouchProps> = ({
       listeners.forEach((l) => l.add(el));
     }
   }
+  function unsubscribe() {
+    listeners.forEach((l) => l.remove());
+  }
 
   /**
    * Обработчик событий dragstart

package/src/components/Touch/TouchContext.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 
 /**
  * Контекст для компонентов, использующих Touch в качестве корневой обёртки,
- * и для которых важно не предотвращать вспылие тач-событий от дочерних компонентов
+ * и для которых важно не предотвращать всплытие тач-событий от дочерних компонентов
  */
 const TouchRootContext: React.Context<boolean> =
   React.createContext<boolean>(false);

package/src/components/Typography/Caption/Caption.css

@@ -62,17 +62,17 @@
 }
 
 .Caption.Caption--w-1 {
-  /* Мы утяжеляем селеткор, чтобы перебить селекторы .Caption--caps */
+  /* Мы утяжеляем селектор, чтобы перебить селекторы .Caption--caps */
   font-weight: var(--vkui--font_weight_accent1);
 }
 
 .Caption.Caption--w-2 {
-  /* Мы утяжеляем селеткор, чтобы перебить селекторы .Caption--caps */
+  /* Мы утяжеляем селектор, чтобы перебить селекторы .Caption--caps */
   font-weight: var(--vkui--font_weight_accent2);
 }
 
 .Caption.Caption--w-3 {
-  /* Мы утяжеляем селеткор, чтобы перебить селекторы .Caption--caps */
+  /* Мы утяжеляем селектор, чтобы перебить селекторы .Caption--caps */
   font-weight: var(--vkui--font_weight_accent3);
 }
 

package/src/components/Typography/Paragraph/Paragraph.css

@@ -0,0 +1,17 @@
+.Paragraph {
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+  font-weight: var(--vkui--font_paragraph--font_weight--regular);
+}
+
+.Paragraph--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Paragraph--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Paragraph--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
+}

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { classNames } from "../../../lib/classNames";
+import { warnOnce } from "../../../lib/warnOnce";
+import { HasComponent, HasRootRef } from "../../../types";
+import "./Paragraph.css";
+
+export interface ParagraphProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent {
+  /**
+   * Задаёт начертание шрифта, отличное от стандартного.
+   */
+  weight?: "1" | "2" | "3";
+}
+
+const warn = warnOnce("Paragraph");
+export const Paragraph: React.FC<ParagraphProps> = ({
+  Component = "span",
+  getRootRef,
+  weight,
+  children,
+  ...restProps
+}) => {
+  if (
+    process.env.NODE_ENV === "development" &&
+    typeof Component !== "string" &&
+    getRootRef
+  ) {
+    warn("getRootRef может использоваться только с элементами DOM", "error");
+  }
+
+  return (
+    <Component
+      {...restProps}
+      ref={getRootRef}
+      vkuiClass={classNames("Paragraph", weight && `Paragraph--w-${weight}`)}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/Typography/Paragraph/Readme.md

@@ -0,0 +1,19 @@
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Paragraph>Paragraph</Paragraph>
+</div>
+```
+
+## Кастомизация
+
+Есть возможность переопределить жирность.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Paragraph weight="1">Paragraph weight 1</Paragraph>
+  <Spacing size={16} />
+  <Paragraph weight="2">Paragraph weight 2</Paragraph>
+  <Spacing size={16} />
+  <Paragraph weight="3">Paragraph weight 3</Paragraph>
+</div>
+```

package/src/components/Typography/Subhead/Subhead.tsx

@@ -17,13 +17,12 @@ export interface SubheadProps
 }
 
 const warn = warnOnce("Subhead");
-
-const Subhead: React.FC<SubheadProps> = ({
+export const Subhead: React.FC<SubheadProps> = ({
   children,
   weight,
   Component = "h5",
   ...restProps
-}: SubheadProps) => {
+}) => {
   const { sizeY } = useAdaptivity();
 
   if (process.env.NODE_ENV === "development") {
@@ -42,13 +41,10 @@ const Subhead: React.FC<SubheadProps> = ({
       vkuiClass={classNames(
         "Subhead",
         `Subhead--sizeY-${sizeY}`,
-        `Subhead--w-${weight}`
+        weight && `Subhead--w-${weight}`
       )}
     >
       {children}
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Subhead;

package/src/components/Typography/Text/Text.tsx

@@ -28,7 +28,10 @@ const Text: React.FC<TextProps> = ({
     typeof Component !== "string" &&
     getRootRef
   ) {
-    warn("getRootRef can only be used with DOM components");
+    warn(
+      `Свойство "getRootRef" может использоваться только с компонентами DOM`,
+      "error"
+    );
   }
 
   return (

package/src/components/Typography/Title/Title.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { HasComponent } from "../../../types";
 import { classNames } from "../../../lib/classNames";
 import { warnOnce } from "../../../lib/warnOnce";
-import { resolveWeight } from "../../../helpers/typography";
 import "./Title.css";
 
 export interface TitleProps
@@ -26,14 +25,13 @@ export interface TitleProps
 }
 
 const warn = warnOnce("Title");
-
-const Title: React.FC<TitleProps> = ({
+export const Title: React.FC<TitleProps> = ({
   children,
   weight,
   level = "1",
   Component,
   ...restProps
-}: TitleProps) => {
+}) => {
   if (!Component) {
     Component = ("h" + level) as React.ElementType;
   }
@@ -51,14 +49,13 @@ const Title: React.FC<TitleProps> = ({
   return (
     <Component
       {...restProps}
-      vkuiClass={classNames("Title", `Title--l-${level}`, {
-        [`Title--w-${resolveWeight(weight)}`]: !!weight,
-      })}
+      vkuiClass={classNames(
+        "Title",
+        `Title--l-${level}`,
+        weight && `Title--w-${weight}`
+      )}
     >
       {children}
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Title;

package/src/components/UsersStack/UsersStack.tsx

@@ -5,7 +5,7 @@ import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { Caption } from "../Typography/Caption/Caption";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { createMasks } from "./masks";
 import { useDOM } from "../../lib/dom";
 import "./UsersStack.css";
@@ -54,6 +54,7 @@ const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("UsersStack", platform),
         `UsersStack--size-${size}`,

package/src/components/View/Readme.md

@@ -48,7 +48,7 @@ const [activePanel, setActivePanel] = useState("panel1");
 
 - Передать во `View` коллбек `onSwipeBack` — он сработает при завершении анимации свайпа. Поменяйте в нем `activePanel` и обновите `history`.
 - Передать во `View` проп `history` — массив из id панелей в порядке открытия. Например, если пользователь из `main` перешел в `profile`, а оттуда попал в `education`, то `history=['main', 'profile', 'education']`.
-- Обернуть ваше приложение в `ConfigProvider` — он определит, открыто приложение в webview клиента VK или в браузере (там есть свой swipe back, который будет конфликтовать с нашим). Для проверки в браузере форсируйте определение webview: `<СonfigProvider isWebView>`.
+- Обернуть ваше приложение в `ConfigProvider` — он определит, открыто приложение в webview клиента VK или в браузере (там есть свой swipe back, который будет конфликтовать с нашим). Для проверки в браузере форсируйте определение webview: `<ConfigProvider isWebView>`.
 - На первой панели должен включаться свайпбек нативного клиента, чтобы пользователь смог выйти из приложения — для этого используют `vk-bridge`. **Если вы не из ВК,** при переходах отправляйте [событие `VKWebAppSetSwipeSettings`](https://dev.vk.com/bridge/VKWebAppSetSwipeSettings) с `history: true` на первой панели или `history: false` на других. **Если вы из ВК,** при переходе на первую панель отправляйте событие `VKWebAppEnableSwipeBack`, на любую другую — `VKWebAppDisableSwipeBack`.
 - Компоненты, которые сами обрабатывают жесты (например, карта), могут конфликтовать со свайпбеком — повесьте на них свойство `data-vkui-swipe-back={false}`
 

package/src/components/View/View.css

@@ -89,7 +89,7 @@
  * Panel transition
  */
 .View__panel--next ~ .View__panel--prev {
-  animation: vkui-animation-view-prev-back 0.3s var(--android-easing);
+  animation: vkui-animation-view-prev-back 0.3s var(--android-easing) forwards;
 }
 
 .View__panel--prev ~ .View__panel--next {

package/src/components/View/View.tsx

@@ -171,6 +171,9 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     if (id) {
       scrollsCache[id] = this.scrolls;
     }
+    if (this.animationFinishTimeout) {
+      clearTimeout(this.animationFinishTimeout);
+    }
   }
 
   componentDidUpdate(prevProps: ViewProps, prevState: ViewState) {
@@ -606,6 +609,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
 
             return (
               <div
+                // eslint-disable-next-line vkui/no-object-expression-in-arguments
                 vkuiClass={classNames("View__panel", {
                   "View__panel--active": panelId === activePanel,
                   "View__panel--prev": panelId === prevPanel,

package/src/components/View/ViewIOS.css

@@ -54,7 +54,7 @@
 }
 
 .View--ios .View__panel--next ~ .View__panel--prev {
-  animation: vkui-animation-ios-prev-back 0.6s var(--ios-easing);
+  animation: vkui-animation-ios-prev-back 0.6s var(--ios-easing) forwards;
 }
 
 .View--ios .View__panel--prev .Panel__fade,
@@ -74,7 +74,7 @@
 }
 
 .View--ios .View__panel--next .Panel__fade {
-  animation: vkui-animation-ios-fade-out 0.6s var(--ios-easing);
+  animation: vkui-animation-ios-fade-out 0.6s var(--ios-easing) forwards;
 }
 
 .View--ios .View__panel--prev ~ .View__panel--next .Panel__fade,

package/src/components/View/ViewInfinite.tsx

@@ -154,6 +154,9 @@ class ViewInfiniteComponent extends React.Component<
     if (id) {
       scrollsCache[id] = this.scrolls;
     }
+    if (this.animationFinishTimeout) {
+      clearTimeout(this.animationFinishTimeout);
+    }
   }
 
   componentDidUpdate(
@@ -669,6 +672,7 @@ class ViewInfiniteComponent extends React.Component<
 
             return (
               <div
+                // eslint-disable-next-line vkui/no-object-expression-in-arguments
                 vkuiClass={classNames("View__panel", {
                   "View__panel--active": panelId === activePanel,
                   "View__panel--prev": panelId === prevPanel,

package/src/components/View/utils.ts

@@ -5,5 +5,6 @@ const swipeBackExcludedSelector =
 
 export function swipeBackExcluded(e: TouchEvent) {
   const target = e.originalEvent.target as HTMLElement;
-  return Boolean(target?.closest(swipeBackExcludedSelector));
+  // eslint-disable-next-line no-restricted-properties
+  return Boolean(target?.closest?.(swipeBackExcludedSelector));
 }