@office-iss/react-native-win32 0.74.4 → 0.75.0-preview.2

package/Libraries/LogBox/UI/LogBoxInspectorHeaderButton.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ImageSource} from '../../Image/ImageSource';
+import type {LogLevel} from '../Data/LogBoxLog';
+
+import Image from '../../Image/Image';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+const backgroundForLevel = (level: LogLevel) =>
+  ({
+    warn: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getWarningDarkColor(),
+    },
+    error: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getErrorDarkColor(),
+    },
+    fatal: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+    syntax: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+  })[level];
+
+export default function LogBoxInspectorHeaderButton(
+  props: $ReadOnly<{
+    disabled: boolean,
+    image: ImageSource,
+    level: LogLevel,
+    onPress?: ?() => void,
+  }>,
+): React.Node {
+  return (
+    <LogBoxButton
+      backgroundColor={backgroundForLevel(props.level)}
+      onPress={props.disabled ? null : props.onPress}
+      style={styles.button}>
+      {props.disabled ? null : (
+        <Image source={props.image} style={styles.buttonImage} />
+      )}
+    </LogBoxButton>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    aspectRatio: 1,
+    justifyContent: 'center',
+    marginTop: 5,
+    marginRight: 6,
+    marginLeft: 6,
+    marginBottom: -8,
+    borderRadius: 3,
+  },
+  buttonImage: {
+    height: 14,
+    width: 8,
+    tintColor: LogBoxStyle.getTextColor(),
+  },
+});

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -50,24 +50,27 @@ function getPrettyFileName(path: string) {
 }
 function LogBoxInspectorReactFrames(props: Props): React.Node {
   const [collapsed, setCollapsed] = React.useState(true);
-  if (props.log.componentStack == null || props.log.componentStack.length < 1) {
+  if (
+    props.log.getAvailableComponentStack() == null ||
+    props.log.getAvailableComponentStack().length < 1
+  ) {
     return null;
   }
 
   function getStackList() {
     if (collapsed) {
-      return props.log.componentStack.slice(0, 3);
+      return props.log.getAvailableComponentStack().slice(0, 3);
     } else {
-      return props.log.componentStack;
+      return props.log.getAvailableComponentStack();
     }
   }
 
   function getCollapseMessage() {
-    if (props.log.componentStack.length <= 3) {
+    if (props.log.getAvailableComponentStack().length <= 3) {
       return;
     }
 
-    const count = props.log.componentStack.length - 3;
+    const count = props.log.getAvailableComponentStack().length - 3;
     if (collapsed) {
       return `See ${count} more components`;
     } else {

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js

@@ -50,24 +50,27 @@ function getPrettyFileName(path: string) {
 }
 function LogBoxInspectorReactFrames(props: Props): React.Node {
   const [collapsed, setCollapsed] = React.useState(true);
-  if (props.log.componentStack == null || props.log.componentStack.length < 1) {
+  if (
+    props.log.getAvailableComponentStack() == null ||
+    props.log.getAvailableComponentStack().length < 1
+  ) {
     return null;
   }
 
   function getStackList() {
     if (collapsed) {
-      return props.log.componentStack.slice(0, 3);
+      return props.log.getAvailableComponentStack().slice(0, 3);
     } else {
-      return props.log.componentStack;
+      return props.log.getAvailableComponentStack();
     }
   }
 
   function getCollapseMessage() {
-    if (props.log.componentStack.length <= 3) {
+    if (props.log.getAvailableComponentStack().length <= 3) {
       return;
     }
 
-    const count = props.log.componentStack.length - 3;
+    const count = props.log.getAvailableComponentStack().length - 3;
     if (collapsed) {
       return `See ${count} more components`;
     } else {

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -8,18 +8,17 @@
  * @format
  */
 
-import type {Message as MessageType} from '../Data/parseLogBoxLog';
-
 import View from '../../Components/View/View';
-import Image from '../../Image/Image';
 import StyleSheet from '../../StyleSheet/StyleSheet';
-import Text from '../../Text/Text';
 import * as LogBoxData from '../Data/LogBoxData';
 import LogBoxLog from '../Data/LogBoxLog';
 import LogBoxButton from './LogBoxButton';
-import LogBoxMessage from './LogBoxMessage';
+import LogBoxNotificationCountBadge from './LogBoxNotificationCountBadge';
+import LogBoxNotificationDismissButton from './LogBoxNotificationDismissButton';
+import LogBoxNotificationMessage from './LogBoxNotificationMessage';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useEffect} from 'react';
 
 type Props = $ReadOnly<{
   log: LogBoxLog,
@@ -29,170 +28,34 @@ type Props = $ReadOnly<{
   onPressDismiss: () => void,
 }>;
 
-function LogBoxLogNotification(props: Props): React.Node {
+export default function LogBoxNotification(props: Props): React.Node {
   const {totalLogCount, level, log} = props;
 
   // Eagerly symbolicate so the stack is available when pressing to inspect.
-  React.useEffect(() => {
+  useEffect(() => {
     LogBoxData.symbolicateLogLazy(log);
   }, [log]);
 
   return (
-    <View style={toastStyles.container}>
+    <View style={styles.container}>
       <LogBoxButton
         onPress={props.onPressOpen}
-        style={toastStyles.press}
+        style={styles.press}
         backgroundColor={{
           default: LogBoxStyle.getBackgroundColor(1),
           pressed: LogBoxStyle.getBackgroundColor(0.9),
         }}>
-        <View style={toastStyles.content}>
-          <CountBadge count={totalLogCount} level={level} />
-          <Message message={log.message} />
-          <DismissButton onPress={props.onPressDismiss} />
+        <View style={styles.content}>
+          <LogBoxNotificationCountBadge count={totalLogCount} level={level} />
+          <LogBoxNotificationMessage message={log.message} />
+          <LogBoxNotificationDismissButton onPress={props.onPressDismiss} />
         </View>
       </LogBoxButton>
     </View>
   );
 }
 
-function CountBadge(props: {count: number, level: 'error' | 'warn'}) {
-  return (
-    <View style={countStyles.outside}>
-      {/* $FlowFixMe[incompatible-type] (>=0.114.0) This suppression was added
-       * when fixing the type of `StyleSheet.create`. Remove this comment to
-       * see the error. */}
-      <View style={[countStyles.inside, countStyles[props.level]]}>
-        <Text style={countStyles.text}>
-          {props.count <= 1 ? '!' : props.count}
-        </Text>
-      </View>
-    </View>
-  );
-}
-
-function Message(props: {message: MessageType}) {
-  return (
-    <View style={messageStyles.container}>
-      <Text numberOfLines={1} style={messageStyles.text}>
-        {props.message && (
-          <LogBoxMessage
-            plaintext
-            message={props.message}
-            style={messageStyles.substitutionText}
-          />
-        )}
-      </Text>
-    </View>
-  );
-}
-
-function DismissButton(props: {onPress: () => void}) {
-  return (
-    <View style={dismissStyles.container}>
-      <LogBoxButton
-        backgroundColor={{
-          default: LogBoxStyle.getTextColor(0.3),
-          pressed: LogBoxStyle.getTextColor(0.5),
-        }}
-        hitSlop={{
-          top: 12,
-          right: 10,
-          bottom: 12,
-          left: 10,
-        }}
-        onPress={props.onPress}
-        style={dismissStyles.press}>
-        <Image
-          source={require('./LogBoxImages/close.png')}
-          style={dismissStyles.image}
-        />
-      </LogBoxButton>
-    </View>
-  );
-}
-
-const countStyles = StyleSheet.create({
-  warn: {
-    backgroundColor: LogBoxStyle.getWarningColor(1),
-  },
-  error: {
-    backgroundColor: LogBoxStyle.getErrorColor(1),
-  },
-  log: {
-    backgroundColor: LogBoxStyle.getLogColor(1),
-  },
-  outside: {
-    padding: 2,
-    borderRadius: 25,
-    backgroundColor: '#fff',
-    marginRight: 8,
-  },
-  inside: {
-    minWidth: 18,
-    paddingLeft: 4,
-    paddingRight: 4,
-    borderRadius: 25,
-    fontWeight: '600',
-  },
-  text: {
-    color: LogBoxStyle.getTextColor(1),
-    fontSize: 14,
-    lineHeight: 18,
-    textAlign: 'center',
-    fontWeight: '600',
-    textShadowColor: LogBoxStyle.getBackgroundColor(0.4),
-    textShadowOffset: {width: 0, height: 0},
-    textShadowRadius: 3,
-  },
-});
-
-const messageStyles = StyleSheet.create({
-  container: {
-    alignSelf: 'stretch',
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 'auto',
-    borderLeftColor: LogBoxStyle.getTextColor(0.2),
-    borderLeftWidth: 1,
-    paddingLeft: 8,
-  },
-  text: {
-    color: LogBoxStyle.getTextColor(1),
-    flex: 1,
-    fontSize: 14,
-    lineHeight: 22,
-  },
-  substitutionText: {
-    color: LogBoxStyle.getTextColor(0.6),
-  },
-});
-
-const dismissStyles = StyleSheet.create({
-  container: {
-    alignSelf: 'center',
-    flexDirection: 'row',
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    marginLeft: 5,
-  },
-  press: {
-    height: 20,
-    width: 20,
-    borderRadius: 25,
-    alignSelf: 'flex-end',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  image: {
-    height: 8,
-    width: 8,
-    tintColor: LogBoxStyle.getBackgroundColor(1),
-  },
-});
-
-const toastStyles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     height: 48,
     position: 'relative',
@@ -218,5 +81,3 @@ const toastStyles = StyleSheet.create({
     flexBasis: 'auto',
   },
 });
-
-export default LogBoxLogNotification;

package/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+export default function LogBoxNotificationCountBadge(props: {
+  count: number,
+  level: 'error' | 'warn',
+}): React.Node {
+  return (
+    <View style={styles.outside}>
+      {/* $FlowFixMe[incompatible-type] (>=0.114.0) This suppression was added
+       * when fixing the type of `StyleSheet.create`. Remove this comment to
+       * see the error. */}
+      <View style={[styles.inside, styles[props.level]]}>
+        <Text style={styles.text}>{props.count <= 1 ? '!' : props.count}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  warn: {
+    backgroundColor: LogBoxStyle.getWarningColor(1),
+  },
+  error: {
+    backgroundColor: LogBoxStyle.getErrorColor(1),
+  },
+  outside: {
+    padding: 2,
+    borderRadius: 25,
+    backgroundColor: '#fff',
+    marginRight: 8,
+  },
+  inside: {
+    minWidth: 18,
+    paddingLeft: 4,
+    paddingRight: 4,
+    borderRadius: 25,
+    fontWeight: '600',
+  },
+  text: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    lineHeight: 18,
+    textAlign: 'center',
+    fontWeight: '600',
+    textShadowColor: LogBoxStyle.getBackgroundColor(0.4),
+    textShadowOffset: {width: 0, height: 0},
+    textShadowRadius: 3,
+  },
+});

package/Libraries/LogBox/UI/LogBoxNotificationDismissButton.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import View from '../../Components/View/View';
+import Image from '../../Image/Image';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+export default function LogBoxNotificationDismissButton(props: {
+  onPress: () => void,
+}): React.Node {
+  return (
+    <View style={styles.container}>
+      <LogBoxButton
+        backgroundColor={{
+          default: LogBoxStyle.getTextColor(0.3),
+          pressed: LogBoxStyle.getTextColor(0.5),
+        }}
+        hitSlop={{
+          top: 12,
+          right: 10,
+          bottom: 12,
+          left: 10,
+        }}
+        onPress={props.onPress}
+        style={styles.press}>
+        <Image
+          source={require('./LogBoxImages/close.png')}
+          style={styles.image}
+        />
+      </LogBoxButton>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    marginLeft: 5,
+  },
+  press: {
+    height: 20,
+    width: 20,
+    borderRadius: 25,
+    alignSelf: 'flex-end',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    height: 8,
+    width: 8,
+    tintColor: LogBoxStyle.getBackgroundColor(1),
+  },
+});

package/Libraries/LogBox/UI/LogBoxNotificationMessage.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {Message as MessageType} from '../Data/parseLogBoxLog';
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxMessage from './LogBoxMessage';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+export default function LogBoxNotificationMessage(props: {
+  message: MessageType,
+}): React.Node {
+  return (
+    <View style={styles.container}>
+      <Text numberOfLines={1} style={styles.text}>
+        {props.message && (
+          <LogBoxMessage
+            plaintext
+            message={props.message}
+            style={styles.substitutionText}
+          />
+        )}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'stretch',
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 'auto',
+    borderLeftColor: LogBoxStyle.getTextColor(0.2),
+    borderLeftWidth: 1,
+    paddingLeft: 8,
+  },
+  text: {
+    color: LogBoxStyle.getTextColor(1),
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  substitutionText: {
+    color: LogBoxStyle.getTextColor(0.6),
+  },
+});

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -166,6 +166,9 @@ const validAttributesForNonEventProps = {
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   transformOrigin: true,
+  experimental_filter: {
+    process: require('../StyleSheet/processFilter').default,
+  },
   opacity: true,
   elevation: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},
@@ -195,6 +198,7 @@ const validAttributesForNonEventProps = {
   width: true,
   minWidth: true,
   collapsable: true,
+  collapsableChildren: true,
   maxWidth: true,
   height: true,
   minHeight: true,
@@ -305,6 +309,7 @@ const validAttributesForEventProps = {
 
   // Pointer events
   onClick: true,
+  onClickCapture: true,
   onPointerEnter: true,
   onPointerEnterCapture: true,
   onPointerLeave: true,

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -219,6 +219,10 @@ const validAttributesForNonEventProps = {
   borderStyle: true,
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
   collapsable: true,
+  collapsableChildren: true,
+  experimental_filter: {
+    process: require('../StyleSheet/processFilter').default,
+  },
 
   borderTopWidth: true,
   borderTopColor: {process: require('../StyleSheet/processColor').default},
@@ -373,6 +377,7 @@ const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
 
   // Pointer events
   onClick: true,
+  onClickCapture: true,
   onPointerUp: true,
   onPointerDown: true,
   onPointerCancel: true,

package/Libraries/NativeComponent/BaseViewConfig.win32.js

@@ -219,6 +219,10 @@ const validAttributesForNonEventProps = {
   borderStyle: true,
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
   collapsable: true,
+  collapsableChildren: true,
+  experimental_filter: {
+    process: require('../StyleSheet/processFilter').default,
+  },
 
   borderTopWidth: true,
   borderTopColor: {process: require('../StyleSheet/processColor').default},
@@ -373,6 +377,7 @@ const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
 
   // Pointer events
   onClick: true,
+  onClickCapture: true,
   onPointerUp: true,
   onPointerDown: true,
   onPointerCancel: true,

package/Libraries/NativeComponent/NativeComponentRegistry.js

@@ -62,14 +62,21 @@ export function get<Config>(
 
     let viewConfig;
     if (native) {
-      viewConfig = getNativeComponentAttributes(name);
+      viewConfig =
+        getNativeComponentAttributes(name) ??
+        createViewConfig(viewConfigProvider());
     } else {
-      viewConfig = createViewConfig(viewConfigProvider());
-      if (viewConfig == null) {
-        viewConfig = getNativeComponentAttributes(name);
-      }
+      viewConfig =
+        createViewConfig(viewConfigProvider()) ??
+        getNativeComponentAttributes(name);
     }
 
+    invariant(
+      viewConfig != null,
+      'NativeComponentRegistry.get: both static and native view config are missing for native component "%s".',
+      name,
+    );
+
     if (verify) {
       const nativeViewConfig = native
         ? viewConfig

package/Libraries/NativeComponent/StaticViewConfigValidator.js

@@ -105,6 +105,7 @@ function accumulateDifferences(
   staticObject: {...},
 ): void {
   for (const nativeKey in nativeObject) {
+    // $FlowFixMe[invalid-computed-prop]
     const nativeValue = nativeObject[nativeKey];
 
     if (!staticObject.hasOwnProperty(nativeKey)) {
@@ -116,6 +117,7 @@ function accumulateDifferences(
       continue;
     }
 
+    // $FlowFixMe[invalid-computed-prop]
     const staticValue = staticObject[nativeKey];
 
     const nativeValueIfObject = ifObject(nativeValue);
@@ -147,6 +149,7 @@ function accumulateDifferences(
   for (const staticKey in staticObject) {
     if (
       !nativeObject.hasOwnProperty(staticKey) &&
+      // $FlowFixMe[invalid-computed-prop]
       !isIgnored(staticObject[staticKey])
     ) {
       differences.push({

package/Libraries/Network/XMLHttpRequest.js

@@ -248,7 +248,10 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
         } else if (this._response === '') {
           this._cachedResponse = BlobManager.createFromParts([]);
         } else {
-          throw new Error(`Invalid response for blob: ${this._response}`);
+          throw new Error(
+            'Invalid response for blob - expecting object, was ' +
+              `${typeof this._response}: ${this._response.trim()}`,
+          );
         }
         break;
 
@@ -627,6 +630,7 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
     this._lowerCaseResponseHeaders = Object.keys(headers).reduce<{
       [string]: any,
     }>((lcaseHeaders, headerName) => {
+      // $FlowFixMe[invalid-computed-prop]
       lcaseHeaders[headerName.toLowerCase()] = headers[headerName];
       return lcaseHeaders;
     }, {});

package/Libraries/NewAppScreen/components/LearnMoreLinks.js

@@ -74,10 +74,10 @@ const links = [
   },
   {
     id: 9,
-    title: 'Follow us on Twitter',
-    link: 'https://twitter.com/reactnative',
+    title: 'Follow us',
+    link: 'https://x.com/reactnative',
     description:
-      'Stay in touch with the community, join in on Q&As and more by following React Native on Twitter.',
+      'Stay in touch with the community, join in on Q&As and more by following React Native on X.',
   },
 ];