@office-iss/react-native-win32 0.0.0-canary.274 → 0.0.0-canary.276

package/Libraries/Renderer/shims/ReactFabric.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow
- * @generated SignedSource<<bb39e39880fecbf572b5f8e7c2a95c5d>>
+ * @generated SignedSource<<cf323fc5ca893bab5669c7d321660412>>
  */
 
 'use strict';
@@ -16,7 +16,7 @@ import {BatchedBridge} from 'react-native/Libraries/ReactPrivate/ReactNativePriv
 
 import type {ReactFabricType} from './ReactNativeTypes';
 
-let ReactFabric;
+let ReactFabric: ReactFabricType;
 
 if (__DEV__) {
   ReactFabric = require('../implementations/ReactFabric-dev');
@@ -30,4 +30,4 @@ if (global.RN$Bridgeless !== true) {
   BatchedBridge.registerCallableModule('ReactFabric', ReactFabric);
 }
 
-module.exports = (ReactFabric: ReactFabricType);
+export default ReactFabric;

package/Libraries/Renderer/shims/ReactFeatureFlags.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict-local
- * @generated SignedSource<<b1b5e34e426103a69612278fd5c9f77c>>
+ * @generated SignedSource<<908f5fb85384725318e261f40e49d9a6>>
  */
 
 'use strict';
@@ -16,4 +16,4 @@ const ReactFeatureFlags = {
   debugRenderPhaseSideEffects: false,
 };
 
-module.exports = ReactFeatureFlags;
+export default ReactFeatureFlags;

package/Libraries/Renderer/shims/ReactNative.js

@@ -7,13 +7,13 @@
  * @noformat
  * @nolint
  * @flow
- * @generated SignedSource<<475c7d864efc2948c6125ddb8a38a4fc>>
+ * @generated SignedSource<<8f46fdc9267fcc4fdc9e76842fe24066>>
  */
 'use strict';
 
 import type {ReactNativeType} from './ReactNativeTypes';
 
-let ReactNative;
+let ReactNative: ReactNativeType;
 
 if (__DEV__) {
   ReactNative = require('../implementations/ReactNativeRenderer-dev');
@@ -21,4 +21,4 @@ if (__DEV__) {
   ReactNative = require('../implementations/ReactNativeRenderer-prod');
 }
 
-module.exports = (ReactNative: ReactNativeType);
+export default ReactNative;

package/Libraries/Renderer/shims/createReactNativeComponentClass.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict-local
- * @generated SignedSource<<62e766b69d440dab0a2d249f0cea38e0>>
+ * @generated SignedSource<<52163887de05f1cff05388145cf85b3b>>
  */
 
 'use strict';
@@ -32,4 +32,4 @@ const createReactNativeComponentClass = function (
   return register(name, callback);
 };
 
-module.exports = createReactNativeComponentClass;
+export default createReactNativeComponentClass;

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -434,6 +434,12 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   cursor?: CursorValue | undefined;
   boxShadow?: ReadonlyArray<BoxShadowValue> | string | undefined;
   filter?: ReadonlyArray<FilterFunction> | string | undefined;
+
+  mixBlendMode?: BlendMode | undefined;
+  experimental_backgroundImage?:
+    | ReadonlyArray<GradientValue>
+    | string
+    | undefined;
 }
 
 export type FontVariant =
@@ -562,6 +568,6 @@ export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   overlayColor?: ColorValue | undefined;
   tintColor?: ColorValue | undefined;
   opacity?: AnimatableNumericValue | undefined;
-  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | undefined;
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none' | undefined;
   cursor?: CursorValue | undefined;
 }

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
+import type {ImageResizeMode} from './../Image/ImageResizeMode';
 import type {
   ____DangerouslyImpreciseStyle_InternalOverrides,
   ____ImageStyle_InternalOverrides,
@@ -941,8 +942,8 @@ export type ____TextStyle_Internal = $ReadOnly<{
 
 export type ____ImageStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
-  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
-  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down',
+  resizeMode?: ImageResizeMode,
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
 }>;
@@ -954,8 +955,8 @@ export type ____ImageStyle_Internal = $ReadOnly<{
 
 export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   ...$Exact<____TextStyle_Internal>,
-  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
-  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down',
+  resizeMode?: ImageResizeMode,
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
 }>;

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -14,25 +14,28 @@ import type {ProcessedColorValue} from './processColor';
 import type {GradientValue} from './StyleSheetTypes';
 
 const processColor = require('./processColor').default;
-const DIRECTION_REGEX =
-  /^to\s+(?:top|bottom|left|right)(?:\s+(?:top|bottom|left|right))?/;
+const DIRECTION_KEYWORD_REGEX =
+  /^to\s+(?:top|bottom|left|right)(?:\s+(?:top|bottom|left|right))?/i;
 const ANGLE_UNIT_REGEX = /^([+-]?\d*\.?\d+)(deg|grad|rad|turn)$/i;
 
-const TO_BOTTOM_START_END_POINTS = {
-  start: {x: 0.5, y: 0},
-  end: {x: 0.5, y: 1},
-};
+type LinearGradientDirection =
+  | {type: 'angle', value: number}
+  | {type: 'keyword', value: string};
 
 type ParsedGradientValue = {
   type: 'linearGradient',
-  start: {x: number, y: number},
-  end: {x: number, y: number},
+  direction: LinearGradientDirection,
   colorStops: $ReadOnlyArray<{
     color: ProcessedColorValue,
     position: number,
   }>,
 };
 
+const DEFAULT_DIRECTION: LinearGradientDirection = {
+  type: 'angle',
+  value: 180,
+};
+
 export default function processBackgroundImage(
   backgroundImage: ?($ReadOnlyArray<GradientValue> | string),
 ): $ReadOnlyArray<ParsedGradientValue> {
@@ -76,37 +79,43 @@ export default function processBackgroundImage(
         }
       }
 
-      let points: {
-        start: ParsedGradientValue['start'],
-        end: ParsedGradientValue['end'],
-      } | null = null;
-
-      if (typeof bgImage.direction === 'undefined') {
-        points = TO_BOTTOM_START_END_POINTS;
-      } else if (ANGLE_UNIT_REGEX.test(bgImage.direction)) {
-        const angle = parseAngle(bgImage.direction);
-        if (angle != null) {
-          points = calculateStartEndPointsFromAngle(angle);
-        }
-      } else if (DIRECTION_REGEX.test(bgImage.direction)) {
-        const processedPoints = calculateStartEndPointsFromDirection(
-          bgImage.direction,
-        );
-        if (processedPoints != null) {
-          points = processedPoints;
+      let direction: LinearGradientDirection = DEFAULT_DIRECTION;
+      const bgDirection =
+        bgImage.direction != null ? bgImage.direction.toLowerCase() : null;
+
+      if (bgDirection != null) {
+        if (ANGLE_UNIT_REGEX.test(bgDirection)) {
+          const parsedAngle = getAngleInDegrees(bgDirection);
+          if (parsedAngle != null) {
+            direction = {
+              type: 'angle',
+              value: parsedAngle,
+            };
+          } else {
+            // If an angle is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+        } else if (DIRECTION_KEYWORD_REGEX.test(bgDirection)) {
+          const parsedDirection = getDirectionForKeyword(bgDirection);
+          if (parsedDirection != null) {
+            direction = parsedDirection;
+          } else {
+            // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+        } else {
+          // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
         }
       }
 
       const fixedColorStops = getFixedColorStops(processedColorStops);
 
-      if (points != null) {
-        result = result.concat({
-          type: 'linearGradient',
-          start: points.start,
-          end: points.end,
-          colorStops: fixedColorStops,
-        });
-      }
+      result = result.concat({
+        type: 'linearGradient',
+        direction,
+        colorStops: fixedColorStops,
+      });
     }
   }
 
@@ -118,30 +127,39 @@ function parseCSSLinearGradient(
 ): $ReadOnlyArray<ParsedGradientValue> {
   const gradients = [];
   let match;
+
+  // matches one or more linear-gradient functions in CSS
   const linearGradientRegex = /linear-gradient\s*\(((?:\([^)]*\)|[^())])*)\)/gi;
 
   while ((match = linearGradientRegex.exec(cssString))) {
     const gradientContent = match[1];
     const parts = gradientContent.split(',');
-    let points = TO_BOTTOM_START_END_POINTS;
+    let direction: LinearGradientDirection = DEFAULT_DIRECTION;
     const trimmedDirection = parts[0].trim().toLowerCase();
+
+    // matches individual color stops in a gradient function
+    // supports various color formats: named colors, hex colors, rgb(a), and hsl(a)
+    // e.g. "red 20%", "blue 50%", "rgba(0, 0, 0, 0.5) 30% 50%"
+    // TODO: does not support color hint syntax yet. It is WIP.
     const colorStopRegex =
       /\s*((?:(?:rgba?|hsla?)\s*\([^)]+\))|#[0-9a-fA-F]+|[a-zA-Z]+)(?:\s+(-?[0-9.]+%?)(?:\s+(-?[0-9.]+%?))?)?\s*/gi;
 
     if (ANGLE_UNIT_REGEX.test(trimmedDirection)) {
-      const angle = parseAngle(trimmedDirection);
-      if (angle != null) {
-        points = calculateStartEndPointsFromAngle(angle);
+      const parsedAngle = getAngleInDegrees(trimmedDirection);
+      if (parsedAngle != null) {
+        direction = {
+          type: 'angle',
+          value: parsedAngle,
+        };
         parts.shift();
       } else {
         // If an angle is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
-    } else if (DIRECTION_REGEX.test(trimmedDirection)) {
-      const parsedPoints =
-        calculateStartEndPointsFromDirection(trimmedDirection);
-      if (parsedPoints != null) {
-        points = parsedPoints;
+    } else if (DIRECTION_KEYWORD_REGEX.test(trimmedDirection)) {
+      const parsedDirection = getDirectionForKeyword(trimmedDirection);
+      if (parsedDirection != null) {
+        direction = parsedDirection;
         parts.shift();
       } else {
         // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
@@ -198,8 +216,7 @@ function parseCSSLinearGradient(
 
     gradients.push({
       type: 'linearGradient',
-      start: points.start,
-      end: points.end,
+      direction,
       colorStops: fixedColorStops,
     });
   }
@@ -207,83 +224,43 @@ function parseCSSLinearGradient(
   return gradients;
 }
 
-function calculateStartEndPointsFromDirection(direction: string): ?{
-  start: {x: number, y: number},
-  end: {x: number, y: number},
-} {
+function getDirectionForKeyword(direction?: string): ?LinearGradientDirection {
+  if (direction == null) {
+    return null;
+  }
   // Remove extra whitespace
-  const normalizedDirection = direction.replace(/\s+/g, ' ');
+  const normalized = direction.replace(/\s+/g, ' ').toLowerCase();
 
-  switch (normalizedDirection) {
+  switch (normalized) {
+    case 'to top':
+      return {type: 'angle', value: 0};
     case 'to right':
-      return {
-        start: {x: 0, y: 0.5},
-        end: {x: 1, y: 0.5},
-      };
-    case 'to left':
-      return {
-        start: {x: 1, y: 0.5},
-        end: {x: 0, y: 0.5},
-      };
+      return {type: 'angle', value: 90};
     case 'to bottom':
-      return TO_BOTTOM_START_END_POINTS;
-    case 'to top':
-      return {
-        start: {x: 0.5, y: 1},
-        end: {x: 0.5, y: 0},
-      };
+      return {type: 'angle', value: 180};
+    case 'to left':
+      return {type: 'angle', value: 270};
+    case 'to top right':
+    case 'to right top':
+      return {type: 'keyword', value: 'to top right'};
     case 'to bottom right':
     case 'to right bottom':
-      return {
-        start: {x: 0, y: 0},
-        end: {x: 1, y: 1},
-      };
+      return {type: 'keyword', value: 'to bottom right'};
     case 'to top left':
     case 'to left top':
-      return {
-        start: {x: 1, y: 1},
-        end: {x: 0, y: 0},
-      };
+      return {type: 'keyword', value: 'to top left'};
     case 'to bottom left':
     case 'to left bottom':
-      return {
-        start: {x: 1, y: 0},
-        end: {x: 0, y: 1},
-      };
-    case 'to top right':
-    case 'to right top':
-      return {
-        start: {x: 0, y: 1},
-        end: {x: 1, y: 0},
-      };
+      return {type: 'keyword', value: 'to bottom left'};
     default:
       return null;
   }
 }
 
-function calculateStartEndPointsFromAngle(angleRadians: number): {
-  start: {x: number, y: number},
-  end: {x: number, y: number},
-} {
-  // Normalize angle to be between 0 and 2π
-  let angleRadiansNormalized = angleRadians % (2 * Math.PI);
-  if (angleRadiansNormalized < 0) {
-    angleRadiansNormalized += 2 * Math.PI;
+function getAngleInDegrees(angle?: string): ?number {
+  if (angle == null) {
+    return null;
   }
-
-  const endX = 0.5 + 0.5 * Math.sin(angleRadiansNormalized);
-  const endY = 0.5 - 0.5 * Math.cos(angleRadiansNormalized);
-
-  const startX = 1 - endX;
-  const startY = 1 - endY;
-
-  return {
-    start: {x: startX, y: startY},
-    end: {x: endX, y: endY},
-  };
-}
-
-function parseAngle(angle: string): ?number {
   const match = angle.match(ANGLE_UNIT_REGEX);
   if (!match) {
     return null;
@@ -294,13 +271,13 @@ function parseAngle(angle: string): ?number {
   const numericValue = parseFloat(value);
   switch (unit) {
     case 'deg':
-      return (numericValue * Math.PI) / 180;
+      return numericValue;
     case 'grad':
-      return (numericValue * Math.PI) / 200;
+      return numericValue * 0.9; // 1 grad = 0.9 degrees
     case 'rad':
-      return numericValue;
+      return (numericValue * 180) / Math.PI;
     case 'turn':
-      return numericValue * 2 * Math.PI;
+      return numericValue * 360; // 1 turn = 360 degrees
     default:
       return null;
   }

package/Libraries/TurboModule/TurboModuleRegistry.js

@@ -16,9 +16,6 @@ const NativeModules = require('../BatchedBridge/NativeModules');
 
 const turboModuleProxy = global.__turboModuleProxy;
 
-const useLegacyNativeModuleInterop =
-  global.RN$Bridgeless !== true || global.RN$TurboInterop === true;
-
 function requireModule<T: TurboModule>(name: string): ?T {
   if (turboModuleProxy != null) {
     const module: ?T = turboModuleProxy(name);
@@ -27,8 +24,11 @@ function requireModule<T: TurboModule>(name: string): ?T {
     }
   }
 
-  if (useLegacyNativeModuleInterop) {
-    // Backward compatibility layer during migration.
+  if (
+    global.RN$Bridgeless !== true ||
+    global.RN$TurboInterop === true ||
+    global.RN$UnifiedNativeModuleProxy === true
+  ) {
     const legacyModule: ?T = NativeModules[name];
     if (legacyModule != null) {
       return legacyModule;

package/Libraries/Utilities/Appearance.js

@@ -105,7 +105,9 @@ export function setColorScheme(colorScheme: ?ColorSchemeName): void {
   const {NativeAppearance} = state;
   if (NativeAppearance != null) {
     NativeAppearance.setColorScheme(colorScheme ?? 'unspecified');
-    state.appearance = {colorScheme};
+    state.appearance = {
+      colorScheme: toColorScheme(NativeAppearance.getColorScheme()),
+    };
   }
 }
 

package/Libraries/Utilities/BackHandler.android.js

@@ -59,10 +59,6 @@ type TBackHandler = {|
     eventName: BackPressEventName,
     handler: () => ?boolean,
   ) => {remove: () => void, ...},
-  +removeEventListener: (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ) => void,
 |};
 const BackHandler: TBackHandler = {
   exitApp: function (): void {
@@ -86,22 +82,14 @@ const BackHandler: TBackHandler = {
       _backPressSubscriptions.push(handler);
     }
     return {
-      remove: (): void => BackHandler.removeEventListener(eventName, handler),
+      remove: (): void => {
+        const index = _backPressSubscriptions.indexOf(handler);
+        if (index !== -1) {
+          _backPressSubscriptions.splice(index, 1);
+        }
+      },
     };
   },
-
-  /**
-   * Removes the event handler.
-   */
-  removeEventListener: function (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ): void {
-    const index = _backPressSubscriptions.indexOf(handler);
-    if (index !== -1) {
-      _backPressSubscriptions.splice(index, 1);
-    }
-  },
 };
 
 module.exports = BackHandler;

package/Libraries/Utilities/BackHandler.d.ts

@@ -28,10 +28,6 @@ export interface BackHandlerStatic {
     eventName: BackPressEventName,
     handler: () => boolean | null | undefined,
   ): NativeEventSubscription;
-  removeEventListener(
-    eventName: BackPressEventName,
-    handler: () => boolean | null | undefined,
-  ): void;
 }
 
 export const BackHandler: BackHandlerStatic;

package/Libraries/Utilities/BackHandler.ios.js

@@ -10,8 +10,6 @@
 
 'use strict';
 
-module.exports = require('../Components/UnimplementedViews/UnimplementedView');
-
 type BackPressEventName = 'backPress' | 'hardwareBackPress';
 
 function emptyFunction(): void {}
@@ -22,10 +20,6 @@ type TBackHandler = {|
     eventName: BackPressEventName,
     handler: () => ?boolean,
   ) => {remove: () => void, ...},
-  +removeEventListener: (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ) => void,
 |};
 
 let BackHandler: TBackHandler = {
@@ -35,7 +29,6 @@ let BackHandler: TBackHandler = {
       remove: emptyFunction,
     };
   },
-  removeEventListener(_eventName: BackPressEventName, _handler: Function) {},
 };
 
 module.exports = BackHandler;

package/Libraries/Utilities/BackHandler.win32.js

@@ -59,10 +59,6 @@ type TBackHandler = {|
     eventName: BackPressEventName,
     handler: () => ?boolean,
   ) => {remove: () => void, ...},
-  +removeEventListener: (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ) => void,
 |};
 const BackHandler: TBackHandler = {
   exitApp: function (): void {
@@ -86,22 +82,14 @@ const BackHandler: TBackHandler = {
       _backPressSubscriptions.push(handler);
     }
     return {
-      remove: (): void => BackHandler.removeEventListener(eventName, handler),
+      remove: (): void => {
+        const index = _backPressSubscriptions.indexOf(handler);
+        if (index !== -1) {
+          _backPressSubscriptions.splice(index, 1);
+        }
+      },
     };
   },
-
-  /**
-   * Removes the event handler.
-   */
-  removeEventListener: function (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ): void {
-    const index = _backPressSubscriptions.indexOf(handler);
-    if (index !== -1) {
-      _backPressSubscriptions.splice(index, 1);
-    }
-  },
 };
 
 module.exports = BackHandler;

package/Libraries/Utilities/__mocks__/BackHandler.js

@@ -20,17 +20,12 @@ const BackHandler = {
   ): {remove: () => void} {
     _backPressSubscriptions.add(handler);
     return {
-      remove: () => BackHandler.removeEventListener(eventName, handler),
+      remove: () => {
+        _backPressSubscriptions.delete(handler);
+      },
     };
   },
 
-  removeEventListener: function (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ): void {
-    _backPressSubscriptions.delete(handler);
-  },
-
   mockPressBack: function () {
     let invokeDefault = true;
     const subscriptions = [..._backPressSubscriptions].reverse();

package/jest/setup.js

@@ -448,4 +448,8 @@ jest
     return jest.requireActual(
       '../Libraries/ReactNative/RendererImplementation',
     );
-  });
+  })
+  .mock('../Libraries/Utilities/useColorScheme', () => ({
+    __esModule: true,
+    default: jest.fn().mockReturnValue('light'),
+  }));