From f705e582f9d83ff16ff80036efc41765eb9fb2e2 Mon Sep 17 00:00:00 2001
From: 4eb0da <4eb0da@yandex-team.com>
Date: Wed, 25 Mar 2026 12:29:10 +0300
Subject: [PATCH] Visibility fix
 commit_hash:bd2e4a148860b4ca897035a5ae32e659659e96ef

---
 .mapping.json                                 |  1 +
 client/web/divkit/src/components/Root.svelte  |  5 ++
 .../src/components/utilities/Outer.svelte     | 81 ++++++++++++-------
 client/web/divkit/src/context/visibility.ts   |  7 ++
 4 files changed, 65 insertions(+), 29 deletions(-)
 create mode 100644 client/web/divkit/src/context/visibility.ts

diff --git a/.mapping.json b/.mapping.json
index b7352a0a0..813b56705 100644
--- a/.mapping.json
+++ b/.mapping.json
@@ -21964,6 +21964,7 @@
   "client/web/divkit/src/context/enabled.ts":"divkit/public/client/web/divkit/src/context/enabled.ts",
   "client/web/divkit/src/context/root.ts":"divkit/public/client/web/divkit/src/context/root.ts",
   "client/web/divkit/src/context/state.ts":"divkit/public/client/web/divkit/src/context/state.ts",
+  "client/web/divkit/src/context/visibility.ts":"divkit/public/client/web/divkit/src/context/visibility.ts",
   "client/web/divkit/src/dev.ts":"divkit/public/client/web/divkit/src/dev.ts",
   "client/web/divkit/src/devCustomComponents.ts":"divkit/public/client/web/divkit/src/devCustomComponents.ts",
   "client/web/divkit/src/devMarkdown.module.css":"divkit/public/client/web/divkit/src/devMarkdown.module.css",
diff --git a/client/web/divkit/src/components/Root.svelte b/client/web/divkit/src/components/Root.svelte
index 86d2aedd4..079817672 100644
--- a/client/web/divkit/src/components/Root.svelte
+++ b/client/web/divkit/src/components/Root.svelte
@@ -94,6 +94,7 @@
     import { getStateContext, getTooltipContext } from '../utils/componentUtils';
     import { checkSubmitAction } from '../utils/checkSubmitAction';
     import { updateStructure } from '../actions/updateStructure';
+    import { VISIBILITY_CTX, type VisibilityCtxValue } from '../context/visibility';
     import TooltipView from './tooltip/Tooltip.svelte';
     import Menu from './menu/Menu.svelte';
 
@@ -2298,6 +2299,10 @@
         }
     });
 
+    setContext<VisibilityCtxValue>(VISIBILITY_CTX, {
+        visible: constStore(true)
+    });
+
     setContext<StateCtxValue>(STATE_CTX, {
         runVisibilityTransition(
             _json: DivBaseData,
diff --git a/client/web/divkit/src/components/utilities/Outer.svelte b/client/web/divkit/src/components/utilities/Outer.svelte
index 6adfadb2b..fe79f71fe 100644
--- a/client/web/divkit/src/components/utilities/Outer.svelte
+++ b/client/web/divkit/src/components/utilities/Outer.svelte
@@ -27,8 +27,8 @@
 </script>
 
 <script lang="ts">
-    import { afterUpdate, getContext, onDestroy, tick } from 'svelte';
-    import { get } from 'svelte/store';
+    import { afterUpdate, getContext, onDestroy, setContext, tick } from 'svelte';
+    import { get, writable } from 'svelte/store';
 
     import css from './Outer.module.css';
 
@@ -80,6 +80,7 @@
     import { composeAccessibilityDescription } from '../../utils/composeAccessibilityDescription';
     import { componentFakePagerDuplicate } from '../../utils/componentContext';
     import { transformationsToTransform } from '../../utils/transformationsToTransform';
+    import { VISIBILITY_CTX, type VisibilityCtxValue } from '../../context/visibility';
     import Actionable from './Actionable.svelte';
     import OuterBackground from './OuterBackground.svelte';
 
@@ -105,6 +106,7 @@
     const rootCtx = getContext<RootCtxValue>(ROOT_CTX);
     const stateCtx = getContext<StateCtxValue>(STATE_CTX);
     const { isEnabled } = getContext<EnabledCtxValue>(ENABLED_CTX);
+    const visibilityCtx = getContext<VisibilityCtxValue>(VISIBILITY_CTX);
     const direction = rootCtx.direction;
 
     let currentNode: HTMLElement;
@@ -201,6 +203,10 @@
     let dev: DevtoolResult | null = null;
     let idUnregister: (() => void) | undefined;
 
+    let visAction: {
+        destroy(): void;
+    } | undefined;
+
     $: origJson = componentContext.origJson;
 
     function rebind(): void {
@@ -861,6 +867,18 @@
         }
     }
 
+    const parentVisibilityStore = visibilityCtx.visible;
+    $: isVisible = $parentVisibilityStore && visibility !== 'gone' && visibility !== 'invisible';
+    const selfVisibilityStore = writable(isVisible);
+
+    $: {
+        selfVisibilityStore.set(isVisible);
+    }
+
+    setContext<VisibilityCtxValue>(VISIBILITY_CTX, {
+        visible: selfVisibilityStore
+    });
+
     async function onVisibilityChange(nextVisibility: Visibility) {
         visibility = nextVisibility;
 
@@ -1079,33 +1097,6 @@
             });
         }
 
-        const isVisibilityActionsEnabled = !componentContext.fakeElement ||
-            componentContext.fakeElement === componentFakePagerDuplicate;
-
-        const visibilityActions = isVisibilityActionsEnabled ?
-            (
-                componentContext.json.visibility_actions ||
-                componentContext.json.visibility_action && [componentContext.json.visibility_action]
-            ) :
-            [];
-
-        const disappearActions = isVisibilityActionsEnabled ? componentContext.json.disappear_actions : [];
-
-        let visAction: {
-            destroy(): void;
-        } | undefined;
-        if (
-            Array.isArray(visibilityActions) && visibilityActions.length ||
-            Array.isArray(disappearActions) && disappearActions.length
-        ) {
-            visAction = visibilityAction(node, {
-                visibilityActions,
-                disappearActions,
-                rootCtx,
-                componentContext
-            });
-        }
-
         const id = componentContext.id;
         if (id) {
             idUnregister?.();
@@ -1156,6 +1147,38 @@
         return registred;
     }
 
+    $: if (currentNode && isVisible) {
+        visAction?.destroy();
+
+        const isVisibilityActionsEnabled = (
+            !componentContext.fakeElement ||
+            componentContext.fakeElement === componentFakePagerDuplicate
+        );
+
+        const visibilityActions = isVisibilityActionsEnabled ?
+            (
+                componentContext.json.visibility_actions ||
+                componentContext.json.visibility_action && [componentContext.json.visibility_action]
+            ) :
+            [];
+
+        const disappearActions = isVisibilityActionsEnabled ? componentContext.json.disappear_actions : [];
+
+        if (
+            Array.isArray(visibilityActions) && visibilityActions.length ||
+            Array.isArray(disappearActions) && disappearActions.length
+        ) {
+            visAction = visibilityAction(currentNode, {
+                visibilityActions,
+                disappearActions,
+                rootCtx,
+                componentContext
+            });
+        } else {
+            visAction = undefined;
+        }
+    }
+
     function focusHandler() {
         if (!componentContext.json.focus) {
             return;
diff --git a/client/web/divkit/src/context/visibility.ts b/client/web/divkit/src/context/visibility.ts
new file mode 100644
index 000000000..a4c5a34c4
--- /dev/null
+++ b/client/web/divkit/src/context/visibility.ts
@@ -0,0 +1,7 @@
+import type { Readable } from 'svelte/store';
+
+export const VISIBILITY_CTX = Symbol('visibility');
+
+export interface VisibilityCtxValue {
+    visible: Readable<boolean>;
+}