diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js index 3b1f21ef686aa..e08b9ec50fe97 100644 --- a/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js +++ b/fixtures/dom/src/components/fixtures/fragment-refs/ScrollIntoViewCase.js @@ -55,11 +55,11 @@ export default function ScrollIntoViewCase() { const scrollContainerRef = useRef(null); const scrollVertical = () => { - fragmentRef.current.experimental_scrollIntoView(alignToTop); + fragmentRef.current.scrollIntoView(alignToTop); }; const scrollVerticalNoChildren = () => { - noChildRef.current.experimental_scrollIntoView(alignToTop); + noChildRef.current.scrollIntoView(alignToTop); }; useEffect(() => { diff --git a/fixtures/view-transition/src/components/App.js b/fixtures/view-transition/src/components/App.js index 6b41bdf4eac2a..80e0c45c91136 100644 --- a/fixtures/view-transition/src/components/App.js +++ b/fixtures/view-transition/src/components/App.js @@ -3,7 +3,7 @@ import React, { useLayoutEffect, useEffect, useState, - unstable_addTransitionType as addTransitionType, + addTransitionType, } from 'react'; import Chrome from './Chrome.js'; diff --git a/fixtures/view-transition/src/components/Page.js b/fixtures/view-transition/src/components/Page.js index d411bb2453069..fbaa9017171fa 100644 --- a/fixtures/view-transition/src/components/Page.js +++ b/fixtures/view-transition/src/components/Page.js @@ -1,6 +1,6 @@ import React, { - unstable_addTransitionType as addTransitionType, - unstable_ViewTransition as ViewTransition, + addTransitionType, + ViewTransition, Activity, useLayoutEffect, useEffect, diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js index b5cf97a4730a3..439315dc85836 100644 --- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js +++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js @@ -251,7 +251,8 @@ describe('Store component filters', () => { }); it('should filter ViewTransition', async () => { - const ViewTransition = React.unstable_ViewTransition; + const ViewTransition = + React.ViewTransition || React.unstable_ViewTransition; if (ViewTransition != null) { await actAsync(async () => diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 0f75d5f8cd78e..0af810924bbd7 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -3341,13 +3341,13 @@ function validateDocumentPositionWithFiberTree( if (enableFragmentRefsScrollIntoView) { // $FlowFixMe[prop-missing] - FragmentInstance.prototype.experimental_scrollIntoView = function ( + FragmentInstance.prototype.scrollIntoView = function ( this: FragmentInstanceType, alignToTop?: boolean, ): void { if (typeof alignToTop === 'object') { throw new Error( - 'FragmentInstance.experimental_scrollIntoView() does not support ' + + 'FragmentInstance.scrollIntoView() does not support ' + 'scrollIntoViewOptions. Use the alignToTop boolean instead.', ); } diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js index 6ca7cfd4dc094..ee87fdac9ce03 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js @@ -40,7 +40,7 @@ describe('ReactDOMFizzViewTransition', () => { Stream = require('stream'); Suspense = React.Suspense; - ViewTransition = React.unstable_ViewTransition; + ViewTransition = React.ViewTransition; // Test Environment const jsdom = new JSDOM( diff --git a/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js index 26de45076f359..90dfa9d2f307c 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js @@ -1960,9 +1960,9 @@ describe('FragmentRefs', () => { }); expect(() => { - fragmentRef.current.experimental_scrollIntoView({block: 'start'}); + fragmentRef.current.scrollIntoView({block: 'start'}); }).toThrowError( - 'FragmentInstance.experimental_scrollIntoView() does not support ' + + 'FragmentInstance.scrollIntoView() does not support ' + 'scrollIntoViewOptions. Use the alignToTop boolean instead.', ); }); @@ -1996,11 +1996,11 @@ describe('FragmentRefs', () => { }); // Default call - fragmentRef.current.experimental_scrollIntoView(); + fragmentRef.current.scrollIntoView(); expectLast(logs, 'childA'); logs = []; // alignToTop=true - fragmentRef.current.experimental_scrollIntoView(true); + fragmentRef.current.scrollIntoView(true); expectLast(logs, 'childA'); }); @@ -2027,7 +2027,7 @@ describe('FragmentRefs', () => { logs.push('childB'); }); - fragmentRef.current.experimental_scrollIntoView(false); + fragmentRef.current.scrollIntoView(false); expectLast(logs, 'childB'); }); @@ -2068,7 +2068,7 @@ describe('FragmentRefs', () => { }); // Default call - fragmentRef.current.experimental_scrollIntoView(); + fragmentRef.current.scrollIntoView(); expectLast(logs, 'childA'); }); @@ -2157,7 +2157,7 @@ describe('FragmentRefs', () => { }); // Default call - fragmentRef.current.experimental_scrollIntoView(); + fragmentRef.current.scrollIntoView(); expectLast(logs, 'header'); childARef.current.scrollIntoView.mockClear(); @@ -2167,7 +2167,7 @@ describe('FragmentRefs', () => { logs = []; // // alignToTop=false - fragmentRef.current.experimental_scrollIntoView(false); + fragmentRef.current.scrollIntoView(false); expectLast(logs, 'C'); }); }); @@ -2195,14 +2195,14 @@ describe('FragmentRefs', () => { siblingBRef.current.scrollIntoView = jest.fn(); // Default call - fragmentRef.current.experimental_scrollIntoView(); + fragmentRef.current.scrollIntoView(); expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0); expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1); siblingBRef.current.scrollIntoView.mockClear(); // alignToTop=true - fragmentRef.current.experimental_scrollIntoView(true); + fragmentRef.current.scrollIntoView(true); expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(0); expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(1); }); @@ -2239,7 +2239,7 @@ describe('FragmentRefs', () => { siblingBRef.current.scrollIntoView = jest.fn(); // alignToTop=false - fragmentRef.current.experimental_scrollIntoView(false); + fragmentRef.current.scrollIntoView(false); expect(siblingARef.current.scrollIntoView).toHaveBeenCalledTimes(1); expect(siblingBRef.current.scrollIntoView).toHaveBeenCalledTimes(0); }); @@ -2260,7 +2260,7 @@ describe('FragmentRefs', () => { }); parentRef.current.scrollIntoView = jest.fn(); - fragmentRef.current.experimental_scrollIntoView(); + fragmentRef.current.scrollIntoView(); expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1); }); }); diff --git a/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js b/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js index 5f74de7af0ffc..5b96ad1ee675a 100644 --- a/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js +++ b/packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js @@ -29,7 +29,7 @@ describe('ReactFragment', () => { React = require('react'); Suspense = React.Suspense; Activity = React.Activity; - ViewTransition = React.unstable_ViewTransition; + ViewTransition = React.ViewTransition; ReactNoop = require('react-noop-renderer'); const InternalTestUtils = require('internal-test-utils'); waitForAll = InternalTestUtils.waitForAll; diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js index ec88184d40a06..3afb0008ab58d 100644 --- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js @@ -941,7 +941,7 @@ describe('ReactLazy', () => { // @gate enableViewTransition it('throws with a useful error when wrapping ViewTransition with lazy()', async () => { - const BadLazy = lazy(() => fakeImport(React.unstable_ViewTransition)); + const BadLazy = lazy(() => fakeImport(React.ViewTransition)); const root = ReactTestRenderer.create( }> @@ -954,7 +954,7 @@ describe('ReactLazy', () => { await waitForAll(['Loading...']); - await resolveFakeImport(React.unstable_ViewTransition); + await resolveFakeImport(React.ViewTransition); root.update( }> diff --git a/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js b/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js index 8f1104a12833e..f6fa939e84465 100644 --- a/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js +++ b/packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js @@ -23,7 +23,7 @@ describe('ViewTransitionReactServer', () => { jest.resetModules(); jest.mock('react', () => require('react/react.react-server')); ReactServer = require('react'); - ViewTransition = ReactServer.unstable_ViewTransition; + ViewTransition = ReactServer.ViewTransition; ReactNoopFlightServer = require('react-noop-renderer/flight-server'); jest.resetModules(); diff --git a/packages/react/index.development.js b/packages/react/index.development.js index a2ec28574333b..ed4a5a325d956 100644 --- a/packages/react/index.development.js +++ b/packages/react/index.development.js @@ -45,6 +45,8 @@ export { startTransition, unstable_LegacyHidden, Activity, + ViewTransition, + addTransitionType, unstable_Scope, unstable_SuspenseList, unstable_TracingMarker, diff --git a/packages/react/index.experimental.development.js b/packages/react/index.experimental.development.js index 211f1c5dfb419..b237449307394 100644 --- a/packages/react/index.experimental.development.js +++ b/packages/react/index.experimental.development.js @@ -33,9 +33,9 @@ export { unstable_postpone, unstable_getCacheForType, unstable_SuspenseList, - unstable_ViewTransition, + ViewTransition, unstable_startGestureTransition, - unstable_addTransitionType, + addTransitionType, unstable_useCacheRefresh, useId, useCallback, diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js index 0330dde744ca0..37800ede07a6f 100644 --- a/packages/react/index.experimental.js +++ b/packages/react/index.experimental.js @@ -34,9 +34,9 @@ export { unstable_postpone, unstable_getCacheForType, unstable_SuspenseList, - unstable_ViewTransition, + ViewTransition, unstable_startGestureTransition, - unstable_addTransitionType, + addTransitionType, unstable_useCacheRefresh, useId, useCallback, diff --git a/packages/react/index.fb.js b/packages/react/index.fb.js index 10e2ca4b90c0c..d61af001a538e 100644 --- a/packages/react/index.fb.js +++ b/packages/react/index.fb.js @@ -39,9 +39,11 @@ export { unstable_LegacyHidden, unstable_Scope, unstable_SuspenseList, - unstable_ViewTransition, + ViewTransition, + ViewTransition as unstable_ViewTransition, unstable_TracingMarker, - unstable_addTransitionType, + addTransitionType, + addTransitionType as unstable_addTransitionType, unstable_useCacheRefresh, use, useActionState, diff --git a/packages/react/index.js b/packages/react/index.js index 804853b3319ba..78b11b809e752 100644 --- a/packages/react/index.js +++ b/packages/react/index.js @@ -48,8 +48,8 @@ export { unstable_Scope, unstable_SuspenseList, unstable_TracingMarker, - unstable_ViewTransition, - unstable_addTransitionType, + ViewTransition, + addTransitionType, unstable_getCacheForType, unstable_useCacheRefresh, useId, diff --git a/packages/react/index.stable.development.js b/packages/react/index.stable.development.js index 29df69ff3f863..5fd89390bcab6 100644 --- a/packages/react/index.stable.development.js +++ b/packages/react/index.stable.development.js @@ -18,6 +18,8 @@ export { PureComponent, StrictMode, Suspense, + ViewTransition, + addTransitionType, cloneElement, createContext, createElement, diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js index 76edd14e05be3..830a4e9bb5dd5 100644 --- a/packages/react/index.stable.js +++ b/packages/react/index.stable.js @@ -18,6 +18,8 @@ export { PureComponent, StrictMode, Suspense, + ViewTransition, + addTransitionType, cloneElement, createContext, createElement, diff --git a/packages/react/src/ReactClient.js b/packages/react/src/ReactClient.js index b505dc49fca40..9f7c5dce36d4b 100644 --- a/packages/react/src/ReactClient.js +++ b/packages/react/src/ReactClient.js @@ -125,8 +125,8 @@ export { // enableTransitionTracing REACT_TRACING_MARKER_TYPE as unstable_TracingMarker, // enableViewTransition - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, - addTransitionType as unstable_addTransitionType, + REACT_VIEW_TRANSITION_TYPE as ViewTransition, + addTransitionType as addTransitionType, // enableGestureTransition startGestureTransition as unstable_startGestureTransition, // DEV-only diff --git a/packages/react/src/ReactServer.experimental.development.js b/packages/react/src/ReactServer.experimental.development.js index 9e9417677bb46..df8b3d79b3ab7 100644 --- a/packages/react/src/ReactServer.experimental.development.js +++ b/packages/react/src/ReactServer.experimental.development.js @@ -63,6 +63,7 @@ export { REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, REACT_SUSPENSE_TYPE as Suspense, + REACT_VIEW_TRANSITION_TYPE as ViewTransition, cloneElement, createElement, createRef, @@ -83,6 +84,5 @@ export { version, // Experimental REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList, - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, captureOwnerStack, // DEV-only }; diff --git a/packages/react/src/ReactServer.experimental.js b/packages/react/src/ReactServer.experimental.js index e380789d71bf6..06c0a9bf896bf 100644 --- a/packages/react/src/ReactServer.experimental.js +++ b/packages/react/src/ReactServer.experimental.js @@ -62,6 +62,7 @@ export { REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, REACT_SUSPENSE_TYPE as Suspense, + REACT_VIEW_TRANSITION_TYPE as ViewTransition, cloneElement, createElement, createRef, @@ -82,5 +83,4 @@ export { version, // Experimental REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList, - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, }; diff --git a/packages/react/src/ReactServer.fb.js b/packages/react/src/ReactServer.fb.js index fe6089fc160a7..5a4ea8145d93e 100644 --- a/packages/react/src/ReactServer.fb.js +++ b/packages/react/src/ReactServer.fb.js @@ -53,6 +53,8 @@ export { REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, REACT_SUSPENSE_TYPE as Suspense, + REACT_VIEW_TRANSITION_TYPE as ViewTransition, + REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, cloneElement, createElement, createRef, @@ -71,5 +73,4 @@ export { captureOwnerStack, // DEV-only // Experimental REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList, - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition, }; diff --git a/packages/react/src/ReactServer.js b/packages/react/src/ReactServer.js index f218074deea41..81d83cbf45372 100644 --- a/packages/react/src/ReactServer.js +++ b/packages/react/src/ReactServer.js @@ -16,6 +16,7 @@ import { REACT_PROFILER_TYPE, REACT_STRICT_MODE_TYPE, REACT_SUSPENSE_TYPE, + REACT_VIEW_TRANSITION_TYPE, } from 'shared/ReactSymbols'; import { cloneElement, @@ -46,6 +47,7 @@ export { REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, REACT_SUSPENSE_TYPE as Suspense, + REACT_VIEW_TRANSITION_TYPE as ViewTransition, cloneElement, createElement, createRef, diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 89095e7318321..4e08b56d114a7 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -84,7 +84,7 @@ export const enablePostpone = __EXPERIMENTAL__; export const enableHalt: boolean = true; -export const enableViewTransition = __EXPERIMENTAL__; +export const enableViewTransition: boolean = true; export const enableGestureTransition = __EXPERIMENTAL__; @@ -145,8 +145,8 @@ export const transitionLaneExpirationMs = 5000; */ export const enableInfiniteRenderLoopDetection: boolean = false; -export const enableFragmentRefs = __EXPERIMENTAL__; -export const enableFragmentRefsScrollIntoView = __EXPERIMENTAL__; +export const enableFragmentRefs: boolean = true; +export const enableFragmentRefsScrollIntoView: boolean = true; // ----------------------------------------------------------------------------- // Ready for next major. diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 8335ca5857b2d..7cabeb526a2bc 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -62,7 +62,7 @@ export const enableHydrationLaneScheduling: boolean = true; export const enableYieldingBeforePassive: boolean = false; export const enableThrottledScheduling: boolean = false; -export const enableViewTransition: boolean = false; +export const enableViewTransition: boolean = true; export const enableGestureTransition: boolean = false; export const enableScrollEndPolyfill: boolean = true; export const enableSuspenseyImages: boolean = false; @@ -72,7 +72,7 @@ export const enableHydrationChangeEvent: boolean = false; export const enableDefaultTransitionIndicator: boolean = false; export const ownerStackLimit = 1e4; -export const enableFragmentRefs: boolean = false; +export const enableFragmentRefs: boolean = true; export const enableFragmentRefsScrollIntoView: boolean = false; // Profiling Only diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 865fa139afaf8..9d2e73024d1b6 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -73,8 +73,8 @@ export const enableHydrationChangeEvent: boolean = false; export const enableDefaultTransitionIndicator: boolean = false; export const ownerStackLimit = 1e4; -export const enableFragmentRefs: boolean = false; -export const enableFragmentRefsScrollIntoView: boolean = false; +export const enableFragmentRefs: boolean = true; +export const enableFragmentRefsScrollIntoView: boolean = true; // TODO: This must be in sync with the main ReactFeatureFlags file because // the Test Renderer's value must be the same as the one used by the diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index c19b95db788d3..e87d750ecaf8b 100644 --- a/scripts/error-codes/codes.json +++ b/scripts/error-codes/codes.json @@ -551,5 +551,5 @@ "563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.", "564": "Unknown command. The debugChannel was not wired up properly.", "565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.", - "566": "FragmentInstance.experimental_scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead." + "566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead." }