react-native-windows 0.82.3 → 0.83.0-preview.1

package/Libraries/Renderer/shims/ReactNative.js

@@ -7,7 +7,9 @@
  * @noformat
  * @nolint
  * @flow
- * @generated SignedSource<<8f46fdc9267fcc4fdc9e76842fe24066>>
+ *
+ * This file is no longer sync'd from the facebook/react repository.
+ * The version compatability check is removed. Use at your own risk.
  */
 'use strict';
 

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<deb7924d11c790f99448a1c2f0edddb9>>
+ * @generated SignedSource<<c0e57723772ea5f1aa8c3c897ac3c216>>
  */
 
 import type {
@@ -135,6 +135,7 @@ export type RenderRootOptions = {
     error: mixed,
     errorInfo: {+componentStack?: ?string},
   ) => void,
+  onDefaultTransitionIndicator?: () => void | (() => void),
 };
 
 /**

package/Libraries/Renderer/shims/ReactNativeTypes.windows.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<deb7924d11c790f99448a1c2f0edddb9>>
+ * @generated SignedSource<<c0e57723772ea5f1aa8c3c897ac3c216>>
  */
 
 import type {
@@ -139,6 +139,7 @@ export type RenderRootOptions = {
     error: mixed,
     errorInfo: {+componentStack?: ?string},
   ) => void,
+  onDefaultTransitionIndicator?: () => void | (() => void),
 };
 
 /**

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -373,7 +373,7 @@ export type GradientValue = {
   direction?: string | undefined;
   colorStops: ReadonlyArray<{
     color: ColorValue | null;
-    positions?: ReadonlyArray<string[]> | undefined;
+    positions?: ReadonlyArray<string> | undefined;
   }>;
 };
 

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -779,6 +779,43 @@ type RadialGradientValue = {
 
 export type BackgroundImageValue = LinearGradientValue | RadialGradientValue;
 
+export type BackgroundSizeValue =
+  | {
+      x: string | number,
+      y: string | number,
+    }
+  | 'cover'
+  | 'contain';
+
+export type BackgroundRepeatKeyword =
+  | 'repeat'
+  | 'space'
+  | 'round'
+  | 'no-repeat';
+
+export type BackgroundPositionValue =
+  | {
+      top: number | string,
+      left: number | string,
+    }
+  | {
+      top: number | string,
+      right: number | string,
+    }
+  | {
+      bottom: number | string,
+      left: number | string,
+    }
+  | {
+      bottom: number | string,
+      right: number | string,
+    };
+
+export type BackgroundRepeatValue = {
+  x: BackgroundRepeatKeyword,
+  y: BackgroundRepeatKeyword,
+};
+
 export type BoxShadowValue = {
   offsetX: number | string,
   offsetY: number | string,
@@ -853,6 +890,13 @@ export type ____ViewStyle_InternalBase = $ReadOnly<{
   filter?: $ReadOnlyArray<FilterFunction> | string,
   mixBlendMode?: ____BlendMode_Internal,
   experimental_backgroundImage?: $ReadOnlyArray<BackgroundImageValue> | string,
+  experimental_backgroundSize?: $ReadOnlyArray<BackgroundSizeValue> | string,
+  experimental_backgroundPosition?:
+    | $ReadOnlyArray<BackgroundPositionValue>
+    | string,
+  experimental_backgroundRepeat?:
+    | $ReadOnlyArray<BackgroundRepeatValue>
+    | string,
   isolation?: 'auto' | 'isolate',
 }>;
 

package/Libraries/StyleSheet/processBackgroundPosition.js

@@ -0,0 +1,284 @@
+/**
+ * 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
+ */
+
+'use strict';
+import type {BackgroundPositionValue} from './StyleSheetTypes';
+
+export default function processBackgroundPosition(
+  backgroundPosition: ?($ReadOnlyArray<BackgroundPositionValue> | string),
+): $ReadOnlyArray<BackgroundPositionValue> {
+  let result: $ReadOnlyArray<BackgroundPositionValue> = [];
+
+  if (backgroundPosition == null) {
+    return [];
+  }
+  if (typeof backgroundPosition === 'string') {
+    result = parseBackgroundPositionCSSString(
+      backgroundPosition.replace(/\n/g, ' '),
+    );
+  } else if (Array.isArray(backgroundPosition)) {
+    result = backgroundPosition;
+  }
+
+  return result;
+}
+
+// https://www.w3.org/TR/css-backgrounds-3/#typedef-bg-position
+const parseBackgroundPositionCSSString = (
+  backgroundPosition: string,
+): $ReadOnlyArray<BackgroundPositionValue> => {
+  const result: Array<BackgroundPositionValue> = [];
+  const positions = backgroundPosition.split(',').map(s => s.trim());
+
+  for (const position of positions) {
+    let top: string | number;
+    let left: string | number;
+    let right: string | number;
+    let bottom: string | number;
+    const parts = position.split(/\s+/).filter(p => p.length > 0);
+    // 1. Single value syntax [ left | center | right | top | bottom | <length-percentage> ]
+    if (parts.length === 1) {
+      const t1 = parts[0];
+      if (t1 == null) {
+        return [];
+      }
+      const token1 = t1.toLowerCase().trim();
+      if (token1 === 'left') {
+        left = '0%';
+        top = '50%';
+      } else if (token1 === 'center') {
+        left = '50%';
+        top = '50%';
+      } else if (token1 === 'right') {
+        left = '100%';
+        top = '50%';
+      } else if (token1 === 'top') {
+        left = '50%';
+        top = '0%';
+      } else if (token1 === 'bottom') {
+        left = '50%';
+        top = '100%';
+      } else if (isValidPosition(token1)) {
+        const value = getPositionFromCSSValue(token1);
+        if (value == null) {
+          return [];
+        }
+        left = value;
+        top = '50%';
+      }
+    }
+
+    // 2. Two value syntax [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]
+    if (parts.length === 2) {
+      const t1 = parts[0];
+      const t2 = parts[1];
+      if (t1 == null || t2 == null) {
+        return [];
+      }
+      const token1 = t1.toLowerCase().trim();
+      if (token1 === 'left') {
+        left = '0%';
+      } else if (token1 === 'center') {
+        left = '50%';
+      } else if (token1 === 'right') {
+        left = '100%';
+      } else if (token1 === 'top') {
+        top = '0%';
+      } else if (token1 === 'bottom') {
+        top = '100%';
+      } else if (isValidPosition(token1)) {
+        const value = getPositionFromCSSValue(token1);
+        if (value == null) {
+          return [];
+        }
+        left = value;
+      }
+
+      const token2 = t2.toLowerCase().trim();
+      if (token2 === 'top') {
+        top = '0%';
+      } else if (token2 === 'center') {
+        top = '50%';
+      } else if (token2 === 'bottom') {
+        top = '100%';
+      } else if (token2 === 'left') {
+        left = '0%';
+      } else if (token2 === 'right') {
+        left = '100%';
+      } else if (isValidPosition(token2)) {
+        const value = getPositionFromCSSValue(token2);
+        if (value == null) {
+          return [];
+        }
+        top = value;
+      }
+    }
+
+    // 3. Three value syntax [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]
+    if (parts.length === 3) {
+      const t1 = parts[0];
+      const t2 = parts[1];
+      const t3 = parts[2];
+      if (t1 == null || t2 == null || t3 == null) {
+        return [];
+      }
+      const token1 = t1.toLowerCase().trim();
+      const token2 = t2.toLowerCase().trim();
+      const token3 = t3.toLowerCase().trim();
+      // e.g. center top 40%
+      if (token1 === 'center') {
+        left = '50%';
+        const value = getPositionFromCSSValue(token3);
+        if (value == null) {
+          return [];
+        }
+        if (token2 === 'top') {
+          top = value;
+        } else if (token2 === 'bottom') {
+          bottom = value;
+        } else {
+          return [];
+        }
+      }
+      // e.g. left 40% center
+      else if (token3 === 'center') {
+        top = '50%';
+        const value = getPositionFromCSSValue(token2);
+        if (value == null) {
+          return [];
+        }
+        if (token1 === 'left') {
+          left = value;
+        } else if (token1 === 'right') {
+          right = value;
+        } else {
+          return [];
+        }
+      }
+      // e.g. left 40% top, left top 10%
+      else {
+        const tokens = [token1, token2, token3];
+        for (let i = 0; i < tokens.length; i++) {
+          const token = tokens[i];
+          if (isValidPosition(token)) {
+            const value = getPositionFromCSSValue(token);
+            if (value == null) {
+              return [];
+            }
+            const previousToken = tokens[i - 1];
+            if (previousToken === 'left') {
+              left = value;
+            } else if (previousToken === 'right') {
+              right = value;
+            } else if (previousToken === 'top') {
+              top = value;
+            } else if (previousToken === 'bottom') {
+              bottom = value;
+            }
+          } else {
+            if (token === 'left') {
+              left = '0%';
+            } else if (token === 'right') {
+              right = '0%';
+            } else if (token === 'top') {
+              top = '0%';
+            } else if (token === 'bottom') {
+              bottom = '0%';
+            } else {
+              return [];
+            }
+          }
+        }
+      }
+    }
+
+    // 4. Four value syntax [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]
+    if (parts.length === 4) {
+      const t1 = parts.shift();
+      const t2 = parts.shift();
+      const t3 = parts.shift();
+      const t4 = parts.shift();
+      if (t1 == null || t2 == null || t3 == null || t4 == null) {
+        return [];
+      }
+      const token1 = t1.toLowerCase().trim();
+      const token2 = t2.toLowerCase().trim();
+      const token3 = t3.toLowerCase().trim();
+      const token4 = t4.toLowerCase().trim();
+      const keyword1 = token1;
+      const value1 = getPositionFromCSSValue(token2);
+      const keyword2 = token3;
+      const value2 = getPositionFromCSSValue(token4);
+      if (value1 == null || value2 == null) {
+        return [];
+      }
+      if (keyword1 === 'left') {
+        left = value1;
+      } else if (keyword1 === 'right') {
+        right = value1;
+      }
+
+      if (keyword2 === 'top') {
+        top = value2;
+      } else if (keyword2 === 'bottom') {
+        bottom = value2;
+      }
+    }
+
+    if (top != null && left != null) {
+      result.push({
+        top,
+        left,
+      });
+    } else if (bottom != null && right != null) {
+      result.push({
+        bottom,
+        right,
+      });
+    } else if (top != null && right != null) {
+      result.push({
+        top,
+        right,
+      });
+    } else if (bottom != null && left != null) {
+      result.push({
+        bottom,
+        left,
+      });
+    } else {
+      return [];
+    }
+  }
+
+  return result;
+};
+
+function getPositionFromCSSValue(position: string) {
+  if (position.endsWith('px')) {
+    return parseFloat(position);
+  }
+
+  if (position.endsWith('%')) {
+    return position;
+  }
+
+  // CSS length allows 0 as a valid value
+  if (position === '0') {
+    return 0;
+  }
+}
+
+function isValidPosition(position: string) {
+  if (position.endsWith('px') || position.endsWith('%') || position === '0') {
+    return true;
+  }
+
+  return false;
+}

package/Libraries/StyleSheet/processBackgroundRepeat.js

@@ -0,0 +1,105 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {
+  BackgroundRepeatKeyword,
+  BackgroundRepeatValue,
+} from './StyleSheetTypes';
+
+function isBackgroundRepeatKeyword(
+  value: string,
+): value is BackgroundRepeatKeyword {
+  return (
+    value === 'repeat' ||
+    value === 'space' ||
+    value === 'round' ||
+    value === 'no-repeat'
+  );
+}
+
+export default function processBackgroundRepeat(
+  backgroundRepeat: ?($ReadOnlyArray<BackgroundRepeatValue> | string),
+): $ReadOnlyArray<BackgroundRepeatValue> {
+  let result: $ReadOnlyArray<BackgroundRepeatValue> = [];
+  if (backgroundRepeat == null) {
+    return [];
+  }
+
+  if (Array.isArray(backgroundRepeat)) {
+    return backgroundRepeat;
+  }
+
+  if (typeof backgroundRepeat === 'string') {
+    result = parseBackgroundRepeatCSSString(
+      backgroundRepeat.replace(/\n/g, ' '),
+    );
+  }
+
+  return result;
+}
+
+// https://www.w3.org/TR/css-backgrounds-3/#typedef-repeat-style
+function parseBackgroundRepeatCSSString(
+  backgroundRepeat: string,
+): $ReadOnlyArray<BackgroundRepeatValue> {
+  const result: Array<BackgroundRepeatValue> = [];
+  const bgRepeatArray = backgroundRepeat.split(',').map(s => s.trim());
+
+  for (const bgRepeat of bgRepeatArray) {
+    if (bgRepeat.length === 0) {
+      return [];
+    }
+
+    const parts = bgRepeat.split(/\s+/).filter(p => p.length > 0);
+    if (parts.length === 1) {
+      const part1 = parts[0];
+      if (part1 == null) {
+        return [];
+      }
+      const token1 = part1.toLowerCase();
+      if (token1 === 'repeat-x') {
+        result.push({x: 'repeat', y: 'no-repeat'});
+      } else if (token1 === 'repeat-y') {
+        result.push({x: 'no-repeat', y: 'repeat'});
+      } else if (token1 === 'repeat') {
+        result.push({x: 'repeat', y: 'repeat'});
+      } else if (token1 === 'space') {
+        result.push({x: 'space', y: 'space'});
+      } else if (token1 === 'round') {
+        result.push({x: 'round', y: 'round'});
+      } else if (token1 === 'no-repeat') {
+        result.push({x: 'no-repeat', y: 'no-repeat'});
+      } else {
+        return [];
+      }
+    } else if (parts.length === 2) {
+      const part1 = parts[0];
+      const part2 = parts[1];
+      if (part1 == null || part2 == null) {
+        return [];
+      }
+      const token1 = part1.toLowerCase();
+      const token2 = part2.toLowerCase();
+
+      if (
+        isBackgroundRepeatKeyword(token1) &&
+        isBackgroundRepeatKeyword(token2)
+      ) {
+        result.push({x: token1, y: token2});
+      } else {
+        return [];
+      }
+    }
+  }
+
+  return result;
+}

package/Libraries/StyleSheet/processBackgroundSize.js

@@ -0,0 +1,104 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {BackgroundSizeValue} from './StyleSheetTypes';
+
+export default function processBackgroundSize(
+  backgroundSize: ?($ReadOnlyArray<BackgroundSizeValue> | string),
+): $ReadOnlyArray<BackgroundSizeValue> {
+  let result: $ReadOnlyArray<BackgroundSizeValue> = [];
+
+  if (backgroundSize == null) {
+    // If the size is invalid, return an empty array and do not apply any background size. Same as web.
+    return [];
+  }
+
+  if (typeof backgroundSize === 'string') {
+    result = parseBackgroundSizeCSSString(backgroundSize.replace(/\n/g, ' '));
+  } else if (Array.isArray(backgroundSize)) {
+    result = backgroundSize;
+  }
+
+  return result;
+}
+// https://www.w3.org/TR/css-backgrounds-3/#typedef-bg-size
+// <bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain
+function parseBackgroundSizeCSSString(
+  backgroundSize: string,
+): $ReadOnlyArray<BackgroundSizeValue> {
+  const result: Array<BackgroundSizeValue> = [];
+  const sizes = backgroundSize.split(',').map(s => s.trim());
+
+  for (const size of sizes) {
+    if (size.length === 0) {
+      return [];
+    }
+
+    const parts = size.split(/\s+/).filter(p => p.length > 0);
+
+    if (parts.length === 2) {
+      const x = getValidLengthPercentageSizeOrNull(parts[0].toLowerCase());
+      const y = getValidLengthPercentageSizeOrNull(parts[1].toLowerCase());
+      if (x != null && y != null) {
+        result.push({
+          x,
+          y,
+        });
+      } else {
+        return [];
+      }
+    } else if (parts.length === 1) {
+      const part = parts[0].toLowerCase();
+      if (part === 'cover' || part === 'contain') {
+        result.push(part);
+      } else {
+        const x = getValidLengthPercentageSizeOrNull(parts[0].toLowerCase());
+        if (x != null) {
+          result.push({
+            x,
+            y: 'auto',
+          });
+        } else {
+          return [];
+        }
+      }
+    }
+  }
+
+  return result;
+}
+
+// [ <length-percentage [0,∞]> | auto ]
+function getValidLengthPercentageSizeOrNull(size: ?string) {
+  if (size == null) {
+    return null;
+  }
+
+  if (size.endsWith('px')) {
+    const num = parseFloat(size);
+    if (!Number.isNaN(num) && num >= 0) {
+      return num;
+    }
+  }
+
+  if (size.endsWith('%')) {
+    if (parseFloat(size) >= 0) {
+      return size;
+    }
+  }
+
+  if (size === 'auto') {
+    return size;
+  }
+
+  return null;
+}

package/Libraries/Text/Text.d.ts

@@ -10,7 +10,7 @@
 import type * as React from 'react';
 import {Constructor} from '../../types/private/Utilities';
 import {AccessibilityProps} from '../Components/View/ViewAccessibility';
-import {NativeMethods} from '../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet';
 import {TextStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes';
 import {
@@ -234,5 +234,5 @@ export interface TextProps
  * A React component for displaying text which supports nesting, styling, and touch handling.
  */
 declare class TextComponent extends React.Component<TextProps> {}
-declare const TextBase: Constructor<NativeMethods> & typeof TextComponent;
+declare const TextBase: Constructor<HostInstance> & typeof TextComponent;
 export class Text extends TextBase {}

package/Libraries/Text/TextNativeComponent.js

@@ -65,6 +65,16 @@ const virtualTextViewConfig = {
   uiViewClassName: 'RCTVirtualText',
 };
 
+/**
+ * `NativeText` is an internal React Native host component, and is exported to
+ * provide lower-level access for libraries.
+ *
+ * @warning `<unstable_NativeText>` provides no semver guarantees and is not
+ *   intended to be used in app code. Please use
+ *   [`<Text>`](https://reactnative.dev/docs/text) instead.
+ */
+// Additional note: Our long term plan is to reduce the overhead of the <Text>
+// and <View> wrappers so that we no longer have any reason to export these APIs.
 export const NativeText: HostComponent<NativeTextProps> =
   (createReactNativeComponentClass('RCTText', () =>
     /* $FlowFixMe[incompatible-type] Natural Inference rollout. See

package/Libraries/TurboModule/TurboModuleRegistry.js

@@ -24,15 +24,9 @@ function requireModule<T: TurboModule>(name: string): ?T {
     }
   }
 
-  if (
-    global.RN$Bridgeless !== true ||
-    global.RN$TurboInterop === true ||
-    global.RN$UnifiedNativeModuleProxy === true
-  ) {
-    const legacyModule: ?T = NativeModules[name];
-    if (legacyModule != null) {
-      return legacyModule;
-    }
+  const legacyModule: ?T = NativeModules[name];
+  if (legacyModule != null) {
+    return legacyModule;
   }
 
   return null;