Merge branch 'necolas:master' into master

package.json

@@ -36,7 +36,7 @@
     "@babel/preset-react": "^7.18.6",
     "@testing-library/react": "^13.3.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^28.1.2",
+    "babel-jest": "^29.7.0",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "caniuse-api": "^3.0.0",
@@ -53,8 +53,8 @@
     "glob": "^8.0.3",
     "husky": "^8.0.0",
     "inline-style-prefixer": "^6.0.0",
-    "jest": "^28.1.2",
-    "jest-environment-jsdom": "^28.1.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^13.0.3",
     "minimist": "^1.2.6",
     "npm-run-all": "^4.1.3",

packages/babel-plugin-react-native-web/package.json

@@ -3,7 +3,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "name": "babel-plugin-react-native-web",
-  "version": "0.19.12",
+  "version": "0.19.13",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {

packages/react-native-web-docs/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-native-web-docs",
-  "version": "0.19.12",
+  "version": "0.19.13",
   "description": "Documentation website for React Native for Web",
   "scripts": {
     "dev": "eleventy --serve",

packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md

@@ -20,7 +20,7 @@ Accessibility in {{ site.name }} combines several separate web APIs into a cohes
 
 ## Accessibility Props API
 
-{{ site.name }} includes APIs for making accessible apps. (Note that the React Native-specific `accessibility*` props are deprecated in favor of `aria-*` props).
+{{ site.name }} includes APIs for making accessible apps. (Note that for compatibility with existing React Native code, the React Native-specific `accessibility*` props are also supported.)
 
 {% call macro.prop('aria-activedescendant', '?string') %}
 Equivalent to [aria-activedescendant](https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant).

packages/react-native-web-examples/package.json

@@ -1,18 +1,18 @@
 {
   "private": true,
   "name": "react-native-web-examples",
-  "version": "0.19.12",
+  "version": "0.19.13",
   "scripts": {
     "build": "next build",
     "dev": "next",
     "start": "next start"
   },
   "dependencies": {
-    "babel-plugin-react-native-web": "0.19.12",
+    "babel-plugin-react-native-web": "0.19.13",
     "next": "^12.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-native-web": "0.19.12"
+    "react-native-web": "0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",

packages/react-native-web/package.json

@@ -3,7 +3,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "name": "react-native-web",
-  "version": "0.19.12",
+  "version": "0.19.13",
   "description": "React Native for Web",
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",

packages/react-native-web/src/exports/AccessibilityInfo/index.js

@@ -6,6 +6,9 @@
  *
  * @flow
  */
+
+'use client';
+
 import canUseDOM from '../../modules/canUseDom';
 
 function isScreenReaderEnabled(): Promise<*> {

packages/react-native-web/src/exports/ActivityIndicator/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ViewProps } from '../View';
 
 import * as React from 'react';

packages/react-native-web/src/exports/Animated/index.js

@@ -7,5 +7,7 @@
  * @flow
  */
 
+'use client';
+
 import Animated from '../../vendor/react-native/Animated/Animated';
 export default Animated;

packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppRegistry runApplication styles roots in different documents 1`] = `
+[
+  "[stylesheet-group="0"] {}",
+  "body {margin: 0;}",
+  "button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}",
+  "html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}",
+  "input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}",
+  "[stylesheet-group="1"] {}",
+  ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
+  "[stylesheet-group="2"] {}",
+  ".r-display-xoduu5 {display: inline-flex;}",
+  ".r-flex-13awgt0 {flex: 1;}",
+  "[stylesheet-group="3"] {}",
+  ".r-bottom-1p0dtai {bottom: 0px;}",
+  ".r-left-1d2f490 {left: 0px;}",
+  ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
+  ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
+  ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
+  ".r-pointerEvents-633pao {pointer-events: none !important;}",
+  ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
+  ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
+  ".r-position-u8s1d {position: absolute;}",
+  ".r-right-zchlnj {right: 0px;}",
+  ".r-top-ipm5af {top: 0px;}",
+]
+`;
+
+exports[`AppRegistry runApplication styles roots in different documents 2`] = `
+[
+  "[stylesheet-group="0"] {}",
+  "body {margin: 0;}",
+  "button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}",
+  "html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}",
+  "input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}",
+  "[stylesheet-group="1"] {}",
+  ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
+  "[stylesheet-group="2"] {}",
+  ".r-display-xoduu5 {display: inline-flex;}",
+  ".r-flex-13awgt0 {flex: 1;}",
+  "[stylesheet-group="3"] {}",
+  ".r-bottom-1p0dtai {bottom: 0px;}",
+  ".r-left-1d2f490 {left: 0px;}",
+  ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
+  ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
+  ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
+  ".r-pointerEvents-633pao {pointer-events: none !important;}",
+  ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
+  ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
+  ".r-position-u8s1d {position: absolute;}",
+  ".r-right-zchlnj {right: 0px;}",
+  ".r-top-ipm5af {top: 0px;}",
+]
+`;

packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js

@@ -101,32 +101,7 @@ describe.each([['concurrent'], ['legacy']])('AppRegistry', (mode) => {
         )
         .map((cssRule) => cssRule.cssText);
 
-      expect(cssText).toMatchInlineSnapshot(`
-        [
-          "[stylesheet-group=\\"0\\"] {}",
-          "body {margin: 0;}",
-          "button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}",
-          "html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}",
-          "input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}",
-          "[stylesheet-group=\\"1\\"] {}",
-          ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
-          "[stylesheet-group=\\"2\\"] {}",
-          ".r-display-xoduu5 {display: inline-flex;}",
-          ".r-flex-13awgt0 {flex: 1;}",
-          "[stylesheet-group=\\"3\\"] {}",
-          ".r-bottom-1p0dtai {bottom: 0px;}",
-          ".r-left-1d2f490 {left: 0px;}",
-          ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",
-          ".r-pointerEvents-12vffkv>* {pointer-events: auto;}",
-          ".r-pointerEvents-12vffkv {pointer-events: none !important;}",
-          ".r-pointerEvents-633pao {pointer-events: none !important;}",
-          ".r-pointerEvents-ah5dr5>* {pointer-events: none;}",
-          ".r-pointerEvents-ah5dr5 {pointer-events: auto !important;}",
-          ".r-position-u8s1d {position: absolute;}",
-          ".r-right-zchlnj {right: 0px;}",
-          ".r-top-ipm5af {top: 0px;}",
-        ]
-      `);
+      expect(cssText).toMatchSnapshot();
     });
   });
 });

packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js

@@ -39,21 +39,21 @@ describe('AppRegistry', () => {
         </AppContainer>
       `);
       expect(styleElement).toMatchInlineSnapshot(`
-        "<style id=\\"react-native-stylesheet\\">[stylesheet-group=\\"0\\"]{}
+        "<style id="react-native-stylesheet">[stylesheet-group="0"]{}
         body{margin:0;}
         button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
         html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
         input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-        [stylesheet-group=\\"1\\"]{}
-        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
+        [stylesheet-group="1"]{}
+        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
         .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
         .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
-        [stylesheet-group=\\"2\\"]{}
+        [stylesheet-group="2"]{}
         .r-display-krxsd3{display:-webkit-box;}
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
         .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
-        [stylesheet-group=\\"3\\"]{}
+        [stylesheet-group="3"]{}
         .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
         .r-bottom-1p0dtai{bottom:0px;}
         .r-cursor-1loqt21{cursor:pointer;}
@@ -96,21 +96,21 @@ describe('AppRegistry', () => {
       AppRegistry.registerComponent('App', () => RootComponent);
       const first = getApplicationStyles('App');
       expect(first).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
+        "[stylesheet-group="0"]{}
         body{margin:0;}
         button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
         html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
         input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-        [stylesheet-group=\\"1\\"]{}
-        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
+        [stylesheet-group="1"]{}
+        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
         .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
         .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
-        [stylesheet-group=\\"2\\"]{}
+        [stylesheet-group="2"]{}
         .r-display-krxsd3{display:-webkit-box;}
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
         .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
-        [stylesheet-group=\\"3\\"]{}
+        [stylesheet-group="3"]{}
         .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
         .r-bottom-1p0dtai{bottom:0px;}
         .r-cursor-1loqt21{cursor:pointer;}
@@ -144,22 +144,22 @@ describe('AppRegistry', () => {
       );
       const second = getApplicationStyles('AlternativeApp');
       expect(second).toMatchInlineSnapshot(`
-        "[stylesheet-group=\\"0\\"]{}
+        "[stylesheet-group="0"]{}
         body{margin:0;}
         button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
         html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
         input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
-        [stylesheet-group=\\"1\\"]{}
-        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
+        [stylesheet-group="1"]{}
+        .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
         .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
         .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
-        [stylesheet-group=\\"2\\"]{}
+        [stylesheet-group="2"]{}
         .r-borderWidth-1bee2fs{border-bottom-width:1234px;border-left-width:1234px;border-right-width:1234px;border-top-width:1234px;}
         .r-display-krxsd3{display:-webkit-box;}
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
         .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
-        [stylesheet-group=\\"3\\"]{}
+        [stylesheet-group="3"]{}
         .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
         .r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00);}
         .r-bottom-1p0dtai{bottom:0px;}

packages/react-native-web/src/exports/AppRegistry/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { Application } from './renderApplication';
 import type { ComponentType, Node } from 'react';
 

packages/react-native-web/src/exports/AppState/index.js

@@ -8,6 +8,8 @@
  * @noflow
  */
 
+'use client';
+
 import invariant from 'fbjs/lib/invariant';
 import EventEmitter from '../../vendor/react-native/vendor/emitter/EventEmitter';
 import canUseDOM from '../../modules/canUseDom';
@@ -34,7 +36,7 @@ const AppStates = {
 let changeEmitter = null;
 
 export default class AppState {
-  static isAvailable = canUseDOM && document[VISIBILITY_STATE_PROPERTY];
+  static isAvailable = canUseDOM && !!document[VISIBILITY_STATE_PROPERTY];
 
   static get currentState() {
     if (!AppState.isAvailable) {

packages/react-native-web/src/exports/Appearance/index.js

@@ -7,6 +7,9 @@
  *
  * @flow
  */
+
+'use client';
+
 import canUseDOM from '../../modules/canUseDom';
 
 export type ColorSchemeName = 'light' | 'dark';

packages/react-native-web/src/exports/Button/index.js

@@ -12,7 +12,7 @@ import * as React from 'react';
 import StyleSheet from '../StyleSheet';
 import TouchableOpacity from '../TouchableOpacity';
 import Text from '../Text';
-import { warnOnce } from '../../modules/warnOnce';
+//import { warnOnce } from '../../modules/warnOnce';
 
 type ButtonProps = {|
   accessibilityLabel?: ?string,
@@ -27,7 +27,7 @@ const Button: React.AbstractComponent<
   ButtonProps,
   React.ElementRef<typeof TouchableOpacity>
 > = React.forwardRef((props, forwardedRef) => {
-  warnOnce('Button', 'Button is deprecated. Please use Pressable.');
+  // warnOnce('Button', 'Button is deprecated. Please use Pressable.');
 
   const { accessibilityLabel, color, disabled, onPress, testID, title } = props;
 

packages/react-native-web/src/exports/CheckBox/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { ColorValue } from '../../types';
 import type { ViewProps } from '../View';
 

packages/react-native-web/src/exports/Clipboard/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 let clipboardAvailable;
 
 export default class Clipboard {

packages/react-native-web/src/exports/Dimensions/index.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+'use client';
+
 import type { EventSubscription } from '../../vendor/react-native/vendor/emitter/EventEmitter';
 import invariant from 'fbjs/lib/invariant';
 import canUseDOM from '../../modules/canUseDom';

packages/react-native-web/src/exports/FlatList/index.js

@@ -8,5 +8,7 @@
  * @flow
  */
 
+'use client';
+
 import FlatList from '../../vendor/react-native/FlatList';
 export default FlatList;

packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap

@@ -343,7 +343,7 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
         />
         <fecomposite
           in2="SourceAlpha"
-          operator="atop"
+          operator="in"
         />
       </filter>
     </defs>
@@ -410,7 +410,7 @@ exports[`components/Image prop "tintColor" convert to filter 1`] = `
         />
         <fecomposite
           in2="SourceAlpha"
-          operator="atop"
+          operator="in"
         />
       </filter>
     </defs>