Visibility fix

commit_hash:bd2e4a148860b4ca897035a5ae32e659659e96ef

.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",

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,

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;

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>;
+}