Fix type errors

Author: istarkov

packages/sdk-components-animation/src/scroll.stories.tsx

@@ -75,6 +75,7 @@ const Story = {
               padding: 0,
               "&:hover": {
                 color: "red",
+                transform: "scale(1.1)",
               },
             }}
           >
@@ -83,8 +84,7 @@ const Story = {
         </Scroll>
         <Box css={{ height: "200px", backgroundColor: "#eee", p: 4 }}>
           Start scrolling, and when the current box scrolls out, the “HELLO
-          WORLD” header will fly in and become hoverable. (During the animation,
-          it won’t be hoverable.)
+          WORLD” header will finish animation
         </Box>
         <Box css={{ height: "200vh" }}></Box>
         <Box css={{ height: "200px", backgroundColor: "#eee", p: 4 }}>

packages/sdk-components-animation/src/scroll.tsx

@@ -1,4 +1,10 @@
-import { Suspense, useId, useLayoutEffect } from "react";
+import {
+  forwardRef,
+  Suspense,
+  useId,
+  useLayoutEffect,
+  type ElementRef,
+} from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { ClientOnly } from "./shared/client-only";
 import { PolyfillLoader } from "./shared/scroll-polyfill";
@@ -165,29 +171,35 @@ type ScrollProps = {
   action: AnimationAction;
 };
 
-export const Scroll = ({ debug = false, children, action }: ScrollProps) => {
-  const nakedId = useId();
-  const id = escapeCssSpecifier(nakedId);
-
-  return (
-    <>
-      <ClientOnly fallback={<StylesBeforeAnimate id={id} action={action} />}>
-        <Suspense fallback={<StylesBeforeAnimate id={id} action={action} />}>
-          <ErrorBoundary
-            fallback={null}
-            onError={(error) => {
-              console.error(`Polyfill loading error`, error);
-            }}
-          >
-            <PolyfillLoader />
-            {debug && <DebugDelayLoader />}
-          </ErrorBoundary>
-          <Animate id={id} action={action} />
-        </Suspense>
-      </ClientOnly>
-      <div {...{ [componentAttributeId]: id }} style={{ display: "contents" }}>
-        {children}
-      </div>
-    </>
-  );
-};
+export const Scroll = forwardRef<ElementRef<"div">, ScrollProps>(
+  ({ debug = false, children, action }, ref) => {
+    const nakedId = useId();
+    const id = escapeCssSpecifier(nakedId);
+
+    return (
+      <>
+        <ClientOnly fallback={<StylesBeforeAnimate id={id} action={action} />}>
+          <Suspense fallback={<StylesBeforeAnimate id={id} action={action} />}>
+            <ErrorBoundary
+              fallback={null}
+              onError={(error) => {
+                console.error(`Polyfill loading error`, error);
+              }}
+            >
+              <PolyfillLoader />
+              {debug && <DebugDelayLoader />}
+            </ErrorBoundary>
+            <Animate id={id} action={action} />
+          </Suspense>
+        </ClientOnly>
+        <div
+          ref={ref}
+          {...{ [componentAttributeId]: id }}
+          style={{ display: "contents" }}
+        >
+          {children}
+        </div>
+      </>
+    );
+  }
+);

packages/sdk-components-animation/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@webstudio-is/tsconfig/base.json",
+  "include": ["src", "types"],
   "compilerOptions": {
-    "types": ["react/experimental", "react-dom/experimental"]
+    "types": ["react/experimental", "react-dom/experimental", "@types/node"]
   }
 }