react-native-windows 0.0.0-canary.821 → 0.0.0-canary.823

package/.flowconfig

@@ -90,7 +90,6 @@ flow/
 ../node_modules/.flow/flow-typed/
 
 [options]
-experimental.global_find_ref=true
 enums=true
 casting_syntax=both
 
@@ -147,4 +146,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.235.1
+^0.236.0

package/Folly/TEMP_UntilFollyUpdate/ConstexprMath.h

@@ -257,7 +257,8 @@ constexpr auto& constexpr_iterated_squares_desc_2_v =
 template <typename T, typename... Ts>
 constexpr T constexpr_max(T a, Ts... ts) {
   T list[] = {ts..., a}; // 0-length arrays are illegal
-  for (auto i = 0u; i < sizeof...(Ts); ++i) {
+  // [Windows #12703 - Fix folly CodeQL issues]
+  for (size_t i = 0; i < sizeof...(Ts); ++i) {
     a = list[i] < a ? a : list[i];
   }
   return a;
@@ -268,7 +269,8 @@ constexpr T constexpr_max(T a, Ts... ts) {
 template <typename T, typename... Ts>
 constexpr T constexpr_min(T a, Ts... ts) {
   T list[] = {ts..., a}; // 0-length arrays are illegal
-  for (auto i = 0u; i < sizeof...(Ts); ++i) {
+  // [Windows #12703 - Fix folly CodeQL issues]
+  for (size_t i = 0; i < sizeof...(Ts); ++i) {
     a = list[i] < a ? list[i] : a;
   }
   return a;

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -31,6 +31,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     pagingEnabled: true,
     persistentScrollbar: true,
     horizontal: true,
+    enableSyncOnScroll: true,
     scrollEnabled: true,
     scrollEventThrottle: true,
     scrollPerfTag: true,

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -45,6 +45,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             diff: require('../../Utilities/differ/pointsDiffer'),
           },
           decelerationRate: true,
+          enableSyncOnScroll: true, // Fabric only.
           disableIntervalMomentum: true,
           maintainVisibleContentPosition: true,
           pagingEnabled: true,
@@ -134,7 +135,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           contentInsetAdjustmentBehavior: true,
           decelerationRate: true,
           endDraggingSensitivityMultiplier: true,
-          enableSyncOnScroll: true, // iOS-Fabric only.
+          enableSyncOnScroll: true, // Fabric only.
           directionalLockEnabled: true,
           disableIntervalMomentum: true,
           indicatorStyle: true,

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.windows.js

@@ -45,6 +45,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             diff: require('../../Utilities/differ/pointsDiffer'),
           },
           decelerationRate: true,
+          enableSyncOnScroll: true, // Fabric only.
           disableIntervalMomentum: true,
           maintainVisibleContentPosition: true,
           pagingEnabled: true,
@@ -134,7 +135,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           contentInsetAdjustmentBehavior: true,
           decelerationRate: true,
           endDraggingSensitivityMultiplier: true,
-          enableSyncOnScroll: true, // iOS-Fabric only.
+          enableSyncOnScroll: true, // Fabric only.
           directionalLockEnabled: true,
           disableIntervalMomentum: true,
           indicatorStyle: true,

package/Libraries/Components/StatusBar/StatusBar.js

@@ -163,29 +163,9 @@ function createStackEntry(props: any): any {
 /**
  * Component to control the app status bar.
  *
- * ### Usage with Navigator
- *
  * It is possible to have multiple `StatusBar` components mounted at the same
  * time. The props will be merged in the order the `StatusBar` components were
- * mounted. One use case is to specify status bar styles per route using `Navigator`.
- *
- * ```
- *  <View>
- *    <StatusBar
- *      backgroundColor="blue"
- *      barStyle="light-content"
- *    />
- *    <Navigator
- *      initialRoute={{statusBarHidden: true}}
- *      renderScene={(route, navigator) =>
- *        <View>
- *          <StatusBar hidden={route.statusBarHidden} />
- *          ...
- *        </View>
- *      }
- *    />
- *  </View>
- * ```
+ * mounted.
  *
  * ### Imperative API
  *

package/Libraries/Components/TextInput/TextInput.js

@@ -1099,12 +1099,14 @@ function InternalTextInput(props: Props): React.Node {
         };
 
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-
   const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
   const [lastNativeSelectionState, setLastNativeSelection] = useState<{|
-    selection: ?Selection,
+    selection: Selection,
     mostRecentEventCount: number,
-  |}>({selection, mostRecentEventCount});
+  |}>({
+    selection: {start: -1, end: -1},
+    mostRecentEventCount: mostRecentEventCount,
+  });
 
   const lastNativeSelection = lastNativeSelectionState.selection;
 
@@ -1442,6 +1444,7 @@ function InternalTextInput(props: Props): React.Node {
         onSelectionChange={_onSelectionChange}
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
         selection={selection}
+        selectionColor={selectionColor}
         style={StyleSheet.compose(
           useMultilineDefaultStyle ? styles.multilineDefault : null,
           style,

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -1176,12 +1176,14 @@ function InternalTextInput(props: Props): React.Node {
         };
 
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-
   const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
   const [lastNativeSelectionState, setLastNativeSelection] = useState<{|
-    selection: ?Selection,
+    selection: Selection,
     mostRecentEventCount: number,
-  |}>({selection, mostRecentEventCount});
+  |}>({
+    selection: {start: -1, end: -1},
+    mostRecentEventCount: mostRecentEventCount,
+  });
 
   const lastNativeSelection = lastNativeSelectionState.selection;
 
@@ -1589,6 +1591,7 @@ function InternalTextInput(props: Props): React.Node {
         onSelectionChange={_onSelectionChange}
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
         selection={selection}
+        selectionColor={selectionColor}
         style={StyleSheet.compose(
           useMultilineDefaultStyle ? styles.multilineDefault : null,
           style,

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -12,6 +12,7 @@ import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processColor from '../../StyleSheet/processColor';
+import processFilter from '../../StyleSheet/processFilter';
 import processFontVariant from '../../StyleSheet/processFontVariant';
 import processTransform from '../../StyleSheet/processTransform';
 import processTransformOrigin from '../../StyleSheet/processTransformOrigin';
@@ -114,6 +115,11 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   transform: {process: processTransform},
   transformOrigin: {process: processTransformOrigin},
 
+  /**
+   * Filter
+   */
+  experimental_filter: {process: processFilter},
+
   /**
    * View
    */

package/Libraries/Core/Devtools/loadBundleFromServer.windows.js

@@ -0,0 +1,153 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+import Networking from '../../Network/RCTNetworking';
+import DevLoadingView from '../../Utilities/DevLoadingView';
+import HMRClient from '../../Utilities/HMRClient';
+import getDevServer from './getDevServer';
+
+declare var global: {globalEvalWithSourceUrl?: (string, string) => mixed, ...};
+
+let pendingRequests = 0;
+
+const cachedPromisesByUrl = new Map<string, Promise<void>>();
+
+function asyncRequest(
+  url: string,
+): Promise<{body: string, headers: {[string]: string}}> {
+  let id = null;
+  let responseText = null;
+  let headers = null;
+  let dataListener;
+  let completeListener;
+  let responseListener;
+  let incrementalDataListener;
+  return new Promise<{body: string, headers: {[string]: string}}>(
+    (resolve, reject) => {
+      dataListener = Networking.addListener(
+        'didReceiveNetworkData',
+        ([requestId, response]) => {
+          if (requestId === id) {
+            responseText = response;
+          }
+        },
+      );
+      incrementalDataListener = Networking.addListener(
+        'didReceiveNetworkIncrementalData',
+        ([requestId, data]) => {
+          if (requestId === id) {
+            if (responseText != null) {
+              responseText += data;
+            } else {
+              responseText = data;
+            }
+          }
+        },
+      );
+      responseListener = Networking.addListener(
+        'didReceiveNetworkResponse',
+        ([requestId, status, responseHeaders]) => {
+          if (requestId === id) {
+            headers = responseHeaders;
+          }
+        },
+      );
+      completeListener = Networking.addListener(
+        'didCompleteNetworkResponse',
+        ([requestId, error]) => {
+          if (requestId === id) {
+            if (error) {
+              reject(error);
+            } else {
+              //$FlowFixMe[incompatible-call]
+              resolve({body: responseText, headers});
+            }
+          }
+        },
+      );
+      Networking.sendRequest(
+        'GET',
+        'asyncRequest',
+        url,
+        {},
+        '',
+        'text',
+        true,
+        0,
+        requestId => {
+          id = requestId;
+        },
+        true,
+      );
+    },
+  ).finally(() => {
+    dataListener?.remove();
+    completeListener?.remove();
+    responseListener?.remove();
+    incrementalDataListener?.remove();
+  });
+}
+
+function buildUrlForBundle(bundlePathAndQuery: string) {
+  const {url: serverUrl} = getDevServer();
+  return (
+    serverUrl.replace(/\/+$/, '') + '/' + bundlePathAndQuery.replace(/^\/+/, '')
+  );
+}
+
+module.exports = function (bundlePathAndQuery: string): Promise<void> {
+  const requestUrl = buildUrlForBundle(bundlePathAndQuery);
+  let loadPromise = cachedPromisesByUrl.get(requestUrl);
+
+  if (loadPromise) {
+    return loadPromise;
+  }
+  DevLoadingView.showMessage('Downloading...', 'load');
+  ++pendingRequests;
+
+  loadPromise = asyncRequest(requestUrl)
+    .then<void>(({body, headers}) => {
+      if (
+        headers['Content-Type'] != null &&
+        headers['Content-Type'].indexOf('application/json') >= 0
+      ) {
+        // Errors are returned as JSON.
+        throw new Error(
+          JSON.parse(body).message ||
+            `Unknown error fetching '${bundlePathAndQuery}'`,
+        );
+      }
+
+      HMRClient.registerBundle(requestUrl);
+
+      // Some engines do not support `sourceURL` as a comment. We expose a
+      // `globalEvalWithSourceUrl` function to handle updates in that case.
+      if (global.globalEvalWithSourceUrl) {
+        global.globalEvalWithSourceUrl(body, requestUrl);
+      } else {
+        // [Windows #12704 - CodeQL patch]
+        // eslint-disable-next-line no-eval
+        eval(body); // CodeQL [js/eval-usage] Debug only. Developer inner loop.
+      }
+    })
+    .catch<void>(e => {
+      cachedPromisesByUrl.delete(requestUrl);
+      throw e;
+    })
+    .finally(() => {
+      if (!--pendingRequests) {
+        DevLoadingView.hide();
+      }
+    });
+
+  cachedPromisesByUrl.set(requestUrl, loadPromise);
+  return loadPromise;
+};

package/Libraries/Core/ReactNativeVersion.js

@@ -17,7 +17,7 @@ const version: $ReadOnly<{
   major: 0,
   minor: 75,
   patch: 0,
-  prerelease: 'nightly-20240502-88de74b2d',
+  prerelease: 'nightly-20240518-93c079b92',
 };
 
 module.exports = {version};

package/Libraries/Core/setUpPerformance.js

@@ -19,11 +19,13 @@ if (NativePerformance) {
 } else {
   if (!global.performance) {
     // $FlowExpectedError[cannot-write]
-    global.performance = ({
-      now: function () {
+    global.performance = {
+      mark: () => {},
+      measure: () => {},
+      now: () => {
         const performanceNow = global.nativePerformanceNow || Date.now;
         return performanceNow();
       },
-    }: {now?: () => number});
+    };
   }
 }

package/Libraries/IntersectionObserver/IntersectionObserverManager.js

@@ -67,19 +67,11 @@ function setTargetForInstanceHandle(
   instanceHandleToTargetMap.set(key, target);
 }
 
-function unsetTargetForInstanceHandle(instanceHandle: mixed): void {
-  // $FlowExpectedError[incompatible-type] instanceHandle is typed as mixed but we know it's an object and we need it to be to use it as a key in a WeakMap.
-  const key: interface {} = instanceHandle;
-  instanceHandleToTargetMap.delete(key);
-}
-
 // The mapping between ReactNativeElement and their corresponding shadow node
 // also needs to be kept here because React removes the link when unmounting.
-// We also keep the instance handle so we don't have to retrieve it again
-// from the target to unobserve.
-const targetToShadowNodeAndInstanceHandleMap: WeakMap<
+const targetToShadowNodeMap: WeakMap<
   ReactNativeElement,
-  [ReturnType<typeof getShadowNode>, mixed],
+  ReturnType<typeof getShadowNode>,
 > = new WeakMap();
 
 /**
@@ -163,12 +155,8 @@ export function observe({
   // access it even after the instance handle has been unmounted.
   setTargetForInstanceHandle(instanceHandle, target);
 
-  // Same for the mapping between the target and its shadow node
-  // and instance handle.
-  targetToShadowNodeAndInstanceHandleMap.set(target, [
-    targetShadowNode,
-    instanceHandle,
-  ]);
+  // Same for the mapping between the target and its shadow node.
+  targetToShadowNodeMap.set(target, targetShadowNode);
 
   if (!isConnected) {
     NativeIntersectionObserver.connect(notifyIntersectionObservers);
@@ -201,26 +189,18 @@ export function unobserve(
     return;
   }
 
-  const targetShadowNodeAndInstanceHandle =
-    targetToShadowNodeAndInstanceHandleMap.get(target);
-  if (targetShadowNodeAndInstanceHandle == null) {
+  const targetShadowNode = targetToShadowNodeMap.get(target);
+  if (targetShadowNode == null) {
     console.error(
       'IntersectionObserverManager: could not find registration data for target',
     );
     return;
   }
 
-  const [targetShadowNode, instanceHandle] = targetShadowNodeAndInstanceHandle;
-
   NativeIntersectionObserver.unobserve(
     intersectionObserverId,
     targetShadowNode,
   );
-
-  // We can guarantee we won't receive any more entries for this target,
-  // so we don't need to keep the mappings anymore.
-  unsetTargetForInstanceHandle(instanceHandle);
-  targetToShadowNodeAndInstanceHandleMap.delete(target);
 }
 
 /**

package/Libraries/LogBox/Data/LogBoxData.js

@@ -449,31 +449,6 @@ export function withSubscription(
         this._subscription.unsubscribe();
       }
     }
-
-    _handleDismiss = (): void => {
-      // Here we handle the cases when the log is dismissed and it
-      // was either the last log, or when the current index
-      // is now outside the bounds of the log array.
-      const {selectedLogIndex, logs: stateLogs} = this.state;
-      const logsArray = Array.from(stateLogs);
-      if (selectedLogIndex != null) {
-        if (logsArray.length - 1 <= 0) {
-          setSelectedLog(-1);
-        } else if (selectedLogIndex >= logsArray.length - 1) {
-          setSelectedLog(selectedLogIndex - 1);
-        }
-
-        dismiss(logsArray[selectedLogIndex]);
-      }
-    };
-
-    _handleMinimize = (): void => {
-      setSelectedLog(-1);
-    };
-
-    _handleSetSelectedLog = (index: number): void => {
-      setSelectedLog(index);
-    };
   }
 
   return LogBoxStateSubscription;

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},

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -220,6 +220,9 @@ const validAttributesForNonEventProps = {
   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},

package/Libraries/NativeComponent/BaseViewConfig.windows.js

@@ -240,6 +240,9 @@ const validAttributesForNonEventProps = {
   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},

package/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -14,6 +14,7 @@ const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleA
 const resolveAssetSource = require('../Image/resolveAssetSource');
 const processColor = require('../StyleSheet/processColor').default;
 const processColorArray = require('../StyleSheet/processColorArray');
+const processFilter = require('../StyleSheet/processFilter').default;
 const insetsDiffer = require('../Utilities/differ/insetsDiffer');
 const matricesDiffer = require('../Utilities/differ/matricesDiffer');
 const pointsDiffer = require('../Utilities/differ/pointsDiffer');
@@ -188,6 +189,8 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any {
       return processColor;
     case 'ColorArray':
       return processColorArray;
+    case 'Filter':
+      return processFilter;
     case 'ImageSource':
       return resolveAssetSource;
   }

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
+import type {FilterPrimitive} from '../StyleSheet/processFilter';
 import type {
   ____DangerouslyImpreciseStyle_InternalOverrides,
   ____ImageStyle_InternalOverrides,
@@ -690,10 +691,15 @@ export type ____ShadowStyle_Internal = $ReadOnly<{
   ...____ShadowStyle_InternalOverrides,
 }>;
 
+type ____FilterStyle_Internal = $ReadOnly<{
+  experimental_filter?: $ReadOnlyArray<FilterPrimitive>,
+}>;
+
 export type ____ViewStyle_InternalCore = $ReadOnly<{
   ...$Exact<____LayoutStyle_Internal>,
   ...$Exact<____ShadowStyle_Internal>,
   ...$Exact<____TransformStyle_Internal>,
+  ...____FilterStyle_Internal,
   backfaceVisibility?: 'visible' | 'hidden',
   backgroundColor?: ____ColorValue_Internal,
   borderColor?: ____ColorValue_Internal,

package/Libraries/StyleSheet/processFilter.js

@@ -0,0 +1,132 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+export type FilterPrimitive =
+  | {brightness: number | string}
+  | {blur: number | string}
+  | {contrast: number | string}
+  | {grayscale: number | string}
+  | {hueRotate: number | string}
+  | {invert: number | string}
+  | {opacity: number | string}
+  | {saturate: number | string}
+  | {sepia: number | string};
+
+export default function processFilter(
+  filter: $ReadOnlyArray<FilterPrimitive> | string,
+): $ReadOnlyArray<FilterPrimitive> {
+  let result: Array<FilterPrimitive> = [];
+  if (typeof filter === 'string') {
+    // matches on functions with args like "brightness(1.5)"
+    const regex = new RegExp(/(\w+)\(([^)]+)\)/g);
+    let matches;
+
+    while ((matches = regex.exec(filter))) {
+      const amount = _getFilterAmount(matches[1], matches[2]);
+
+      if (amount != null) {
+        const filterPrimitive = {};
+        // $FlowFixMe The key will be the correct one but flow can't see that.
+        filterPrimitive[matches[1]] = amount;
+        // $FlowFixMe The key will be the correct one but flow can't see that.
+        result.push(filterPrimitive);
+      } else {
+        // If any primitive is invalid then apply none of the filters. This is how
+        // web works and makes it clear that something is wrong becuase no
+        // graphical effects are happening.
+        return [];
+      }
+    }
+  } else {
+    for (const filterPrimitive of filter) {
+      const [filterName, filterValue] = Object.entries(filterPrimitive)[0];
+      const amount = _getFilterAmount(filterName, filterValue);
+
+      if (amount != null) {
+        const resultObject = {};
+        // $FlowFixMe
+        resultObject[filterName] = amount;
+        // $FlowFixMe
+        result.push(resultObject);
+      } else {
+        // If any primitive is invalid then apply none of the filters. This is how
+        // web works and makes it clear that something is wrong becuase no
+        // graphical effects are happening.
+        return [];
+      }
+    }
+  }
+
+  return result;
+}
+
+function _getFilterAmount(filterName: string, filterArgs: mixed): ?number {
+  let filterArgAsNumber: number;
+  let unit: string;
+  if (typeof filterArgs === 'string') {
+    // matches on args with units like "1.5 5% -80deg"
+    const argsWithUnitsRegex = new RegExp(/([+-]?\d*(\.\d+)?)([a-zA-Z%]+)?/g);
+    const match = argsWithUnitsRegex.exec(filterArgs);
+
+    if (!match || isNaN(Number(match[1]))) {
+      return undefined;
+    }
+
+    filterArgAsNumber = Number(match[1]);
+    unit = match[3];
+  } else if (typeof filterArgs === 'number') {
+    filterArgAsNumber = filterArgs;
+  } else {
+    return undefined;
+  }
+
+  switch (filterName) {
+    // Hue rotate takes some angle that can have a unit and can be
+    // negative. Additionally, 0 with no unit is allowed.
+    case 'hueRotate':
+      if (filterArgAsNumber === 0) {
+        return 0;
+      }
+      if (unit !== 'deg' && unit !== 'rad') {
+        return undefined;
+      }
+      return unit === 'rad'
+        ? (180 * filterArgAsNumber) / Math.PI
+        : filterArgAsNumber;
+    // blur takes any positive CSS length that is not a percent. In RN
+    // we currently only have DIPs, so we are not parsing units here.
+    case 'blur':
+      if ((unit && unit !== 'px') || filterArgAsNumber < 0) {
+        return undefined;
+      }
+      return filterArgAsNumber;
+    // All other filters except take a non negative number or percentage. There
+    // are no units associated with this value and percentage numbers map 1-to-1
+    // to a non-percentage number (e.g. 50% == 0.5).
+    case 'brightness':
+    case 'contrast':
+    case 'grayscale':
+    case 'invert':
+    case 'opacity':
+    case 'saturate':
+    case 'sepia':
+      if ((unit && unit !== '%' && unit !== 'px') || filterArgAsNumber < 0) {
+        return undefined;
+      }
+      if (unit === '%') {
+        filterArgAsNumber /= 100;
+      }
+      return filterArgAsNumber;
+    default:
+      return undefined;
+  }
+}