React Compiler follow-up (#13936)

.eslintrc

@@ -216,7 +216,7 @@
     "react/react-in-jsx-scope": "off",
     "react/self-closing-comp": "error",
     "react-compiler/react-compiler": [
-      "error",
+      "warn",
       {
         "environment": {
           "enableTreatRefLikeIdentifiersAsRefs": true,

packages/story-editor/src/app/rightClickMenu/hooks/usePresetActions.js

@@ -18,7 +18,7 @@
  */
 import { useSnackbar } from '@googleforcreators/design-system';
 import { __ } from '@googleforcreators/i18n';
-import { useCallback, useRef } from '@googleforcreators/react';
+import { useCallback } from '@googleforcreators/react';
 import { trackEvent } from '@googleforcreators/tracking';
 
 /**
@@ -29,7 +29,7 @@ import useDeleteColor from '../../../components/colorPicker/useDeleteColor';
 import useDeleteStyle from '../../../components/styleManager/useDeleteStyle';
 import useAddPreset from '../../../utils/useAddPreset';
 import { noop } from '../../../utils/noop';
-import { useHistory, useStory } from '../..';
+import { useStory } from '../..';
 import { UNDO_HELP_TEXT } from './constants';
 
 /**
@@ -54,12 +54,6 @@ const usePresetActions = () => {
 
   const showSnackbar = useSnackbar((value) => value.showSnackbar);
 
-  const undo = useHistory(({ actions }) => actions.undo);
-
-  // Needed to not pass stale refs of `undo` to snackbar
-  const undoRef = useRef(undo);
-  undoRef.current = undo;
-
   /**
    * Add text styles to global presets.
    *

packages/story-editor/src/components/floatingMenu/karma/utils.js

@@ -21,7 +21,7 @@ export async function tabToCanvasFocusContainer(focusContainer, fixture) {
 
   // tab until focus reaches the canvas container
   let count = 0;
-  while (count < 20) {
+  while (count < 25) {
     // eslint-disable-next-line no-await-in-loop -- need to await key press
     await fixture.events.keyboard.press('tab');
 
@@ -32,7 +32,7 @@ export async function tabToCanvasFocusContainer(focusContainer, fixture) {
     count++;
   }
 
-  if (count >= 20) {
+  if (count >= 25) {
     throw new Error('Could not find focus container.');
   }
 }

packages/story-editor/src/components/footer/carousel/carouselContext/useCarouselScroll.ts

@@ -71,11 +71,6 @@ function useCarouselScroll({
         offset *= -1;
       }
 
-      if (!listElement.scrollBy) {
-        listElement.scrollLeft += offset;
-        return;
-      }
-
       listElement.scrollBy({
         left: offset,
         behavior: 'smooth',
@@ -123,12 +118,12 @@ function useCarouselScroll({
   );
 
   // Is this the first scroll (which will be instant rather than animated)?
-  const firstScroll = useRef(true);
+  const firstScrollRef = useRef(true);
 
   // If the carousel drawer is collapsed, reset first scroll to true
   useEffect(() => {
     if (carouselState === CarouselState.Closed) {
-      firstScroll.current = true;
+      firstScrollRef.current = true;
     }
   }, [carouselState]);
 
@@ -171,8 +166,8 @@ function useCarouselScroll({
       }
 
       // If this is the first scroll, jump instantly to the target offset
-      const scrollBehavior = firstScroll.current ? 'auto' : 'smooth';
-      firstScroll.current = false;
+      const scrollBehavior = firstScrollRef.current ? 'auto' : 'smooth';
+      firstScrollRef.current = false;
 
       // Otherwise, do scroll and cancel interval
       listElement.scrollTo({

packages/story-editor/src/components/panels/design/animation/animation.js

@@ -87,7 +87,7 @@ function AnimationPanel({
   const isFirstPage = useStory(
     ({ state: { currentPageNumber } }) => currentPageNumber === 1
   );
-  const playUpdatedAnimation = useRef(false);
+  const playUpdatedAnimationRef = useRef(false);
 
   const { highlight, resetHighlight } = useHighlights((state) => ({
     highlight: state[states.Animation],
@@ -120,7 +120,7 @@ function AnimationPanel({
         animationState: StoryAnimationState.Reset,
       });
       pushUpdateForObject(ANIMATION_PROPERTY, animation, null, submitArg);
-      playUpdatedAnimation.current = true;
+      playUpdatedAnimationRef.current = true;
     },
     [pushUpdateForObject, updatedAnimations, updateAnimationState]
   );
@@ -156,7 +156,7 @@ function AnimationPanel({
 
       // There's nothing unique to the animation data to signify that it
       // was changed by the effect chooser, so we track it here.
-      playUpdatedAnimation.current = true;
+      playUpdatedAnimationRef.current = true;
     },
     [selectedElementAnimations, pushUpdateForObject]
   );
@@ -170,11 +170,11 @@ function AnimationPanel({
   // overriding this play call.
   const activeElement = document.activeElement;
   const debouncedUpdateAnimationState = useDebouncedCallback(() => {
-    if (playUpdatedAnimation.current) {
+    if (playUpdatedAnimationRef.current) {
       updateAnimationState({
         animationState: StoryAnimationState.PlayingSelected,
       });
-      playUpdatedAnimation.current = false;
+      playUpdatedAnimationRef.current = false;
     }
   }, 300);
   useEffect(debouncedUpdateAnimationState, [