diff --git a/.eslintrc b/.eslintrc index 657a0ef25401..f07bb81fc113 100644 --- a/.eslintrc +++ b/.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, diff --git a/packages/story-editor/src/app/rightClickMenu/hooks/usePresetActions.js b/packages/story-editor/src/app/rightClickMenu/hooks/usePresetActions.js index 1664ebd9e6a5..e8b384dba76c 100644 --- a/packages/story-editor/src/app/rightClickMenu/hooks/usePresetActions.js +++ b/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. * diff --git a/packages/story-editor/src/components/floatingMenu/karma/utils.js b/packages/story-editor/src/components/floatingMenu/karma/utils.js index fd9562442629..b843a82d616e 100644 --- a/packages/story-editor/src/components/floatingMenu/karma/utils.js +++ b/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.'); } } diff --git a/packages/story-editor/src/components/footer/carousel/carouselContext/useCarouselScroll.ts b/packages/story-editor/src/components/footer/carousel/carouselContext/useCarouselScroll.ts index 0532be52a64b..a44fbc08ba30 100644 --- a/packages/story-editor/src/components/footer/carousel/carouselContext/useCarouselScroll.ts +++ b/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({ diff --git a/packages/story-editor/src/components/panels/design/animation/animation.js b/packages/story-editor/src/components/panels/design/animation/animation.js index b53334693368..9eaca9d8e6fc 100644 --- a/packages/story-editor/src/components/panels/design/animation/animation.js +++ b/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, [