diff --git a/apps/builder/app/builder/features/navigator/navigator-tree.tsx b/apps/builder/app/builder/features/navigator/navigator-tree.tsx index 0dd8d960e652..0770d982bd87 100644 --- a/apps/builder/app/builder/features/navigator/navigator-tree.tsx +++ b/apps/builder/app/builder/features/navigator/navigator-tree.tsx @@ -20,10 +20,7 @@ import { TreeSortableItem, type TreeDropTarget, } from "@webstudio-is/design-system"; -import { - animationCanPlayOnCanvasAttribute, - showAttribute, -} from "@webstudio-is/react-sdk"; +import { showAttribute } from "@webstudio-is/react-sdk"; import { ROOT_INSTANCE_ID, collectionComponent, @@ -34,6 +31,7 @@ import { type Instance, type WsComponentMeta, } from "@webstudio-is/sdk"; +import { animationCanPlayOnCanvasProperty } from "@webstudio-is/sdk/runtime"; import { EyeClosedIcon, EyeOpenIcon, @@ -675,7 +673,7 @@ export const NavigatorTree = () => { // Hook memory prop const isAnimationSelected = - propValues?.get(animationCanPlayOnCanvasAttribute) === true; + propValues?.get(animationCanPlayOnCanvasProperty) === true; const props = propsByInstanceId.get(item.instance.id); const actionProp = props?.find( diff --git a/packages/react-sdk/src/props.ts b/packages/react-sdk/src/props.ts index a9de2e6aa594..bafaf8924eb1 100644 --- a/packages/react-sdk/src/props.ts +++ b/packages/react-sdk/src/props.ts @@ -128,8 +128,6 @@ export const componentAttribute = "data-ws-component" as const; export const showAttribute = "data-ws-show" as const; export const collapsedAttribute = "data-ws-collapsed" as const; export const textContentAttribute = "data-ws-text-content" as const; -export const animationCanPlayOnCanvasAttribute = - "data-ws-animation-can-play-on-canvas"; /** * Copyright (c) Meta Platforms, Inc. and affiliates. diff --git a/packages/sdk-components-animation/private-src b/packages/sdk-components-animation/private-src index b1951061c7f7..3cb7601c98c7 160000 --- a/packages/sdk-components-animation/private-src +++ b/packages/sdk-components-animation/private-src @@ -1 +1 @@ -Subproject commit b1951061c7f792bc01cfb6ed96ecb3aa5893c711 +Subproject commit 3cb7601c98c79bee062c68af377ea2430363c84f diff --git a/packages/sdk-components-animation/src/animate-children.tsx b/packages/sdk-components-animation/src/animate-children.tsx index 34e09ad32596..d4513ac395ef 100644 --- a/packages/sdk-components-animation/src/animate-children.tsx +++ b/packages/sdk-components-animation/src/animate-children.tsx @@ -1,9 +1,7 @@ -import { - animationCanPlayOnCanvasAttribute, - type Hook, -} from "@webstudio-is/react-sdk"; -import type { AnimationAction } from "@webstudio-is/sdk"; import { forwardRef, type ElementRef } from "react"; +import type { Hook } from "@webstudio-is/react-sdk"; +import type { AnimationAction } from "@webstudio-is/sdk"; +import { animationCanPlayOnCanvasProperty } from "@webstudio-is/sdk/runtime"; type ScrollProps = { debug?: boolean; @@ -30,7 +28,7 @@ export const hooksAnimateChildren: Hook = { ) { context.setMemoryProp( event.instancePath[0], - animationCanPlayOnCanvasAttribute, + animationCanPlayOnCanvasProperty, undefined ); } @@ -42,7 +40,7 @@ export const hooksAnimateChildren: Hook = { ) { context.setMemoryProp( event.instancePath[0], - animationCanPlayOnCanvasAttribute, + animationCanPlayOnCanvasProperty, true ); } diff --git a/packages/sdk/src/runtime.ts b/packages/sdk/src/runtime.ts index bb6b751488bf..87ee4b9f12ca 100644 --- a/packages/sdk/src/runtime.ts +++ b/packages/sdk/src/runtime.ts @@ -10,10 +10,13 @@ export const getTagFromProps = ( return props[tagProperty] as string | undefined; }; -export const indexProperty = "data-ws-index" as const; +export const indexProperty = "data-ws-index"; export const getIndexWithinAncestorFromProps = ( props: Record ) => { return props[indexProperty] as string | undefined; }; + +export const animationCanPlayOnCanvasProperty = + "data-ws-animation-can-play-on-canvas";