react-native-windows 0.79.2 → 0.80.0-preview.1

package/Libraries/Blob/FileReader.js

@@ -8,13 +8,224 @@
  * @format
  */
 
-import typeof FileReader from './FileReader_old';
+import type {EventCallback} from '../../src/private/webapis/dom/events/EventTarget';
+import type Blob from './Blob';
 
-// Use a global instead of a flag from ReactNativeFeatureFlags because this will
-// be read before apps have a chance to set overrides.
-const useBuiltInEventTarget = global.RN$useBuiltInEventTarget?.();
+import Event from '../../src/private/webapis/dom/events/Event';
+import {
+  getEventHandlerAttribute,
+  setEventHandlerAttribute,
+} from '../../src/private/webapis/dom/events/EventHandlerAttributes';
+import EventTarget from '../../src/private/webapis/dom/events/EventTarget';
+import NativeFileReaderModule from './NativeFileReaderModule';
+import {toByteArray} from 'base64-js';
 
-export default (useBuiltInEventTarget
-  ? // $FlowExpectedError[incompatible-cast]
-    require('./FileReader_new').default
-  : require('./FileReader_old').default) as FileReader;
+type ReadyState =
+  | 0 // EMPTY
+  | 1 // LOADING
+  | 2; // DONE
+
+type ReaderResult = string | ArrayBuffer;
+
+const EMPTY = 0;
+const LOADING = 1;
+const DONE = 2;
+
+class FileReader extends EventTarget {
+  static EMPTY: number = EMPTY;
+  static LOADING: number = LOADING;
+  static DONE: number = DONE;
+
+  EMPTY: number = EMPTY;
+  LOADING: number = LOADING;
+  DONE: number = DONE;
+
+  _readyState: ReadyState;
+  _error: ?Error;
+  _result: ?ReaderResult;
+  _aborted: boolean = false;
+
+  constructor() {
+    super();
+    this._reset();
+  }
+
+  _reset(): void {
+    this._readyState = EMPTY;
+    this._error = null;
+    this._result = null;
+  }
+
+  _setReadyState(newState: ReadyState) {
+    this._readyState = newState;
+    this.dispatchEvent(new Event('readystatechange'));
+    if (newState === DONE) {
+      if (this._aborted) {
+        this.dispatchEvent(new Event('abort'));
+      } else if (this._error) {
+        this.dispatchEvent(new Event('error'));
+      } else {
+        this.dispatchEvent(new Event('load'));
+      }
+      this.dispatchEvent(new Event('loadend'));
+    }
+  }
+
+  readAsArrayBuffer(blob: ?Blob): void {
+    this._aborted = false;
+
+    if (blob == null) {
+      throw new TypeError(
+        "Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'",
+      );
+    }
+
+    NativeFileReaderModule.readAsDataURL(blob.data).then(
+      (text: string) => {
+        if (this._aborted) {
+          return;
+        }
+
+        const base64 = text.split(',')[1];
+        const typedArray = toByteArray(base64);
+
+        this._result = typedArray.buffer;
+        this._setReadyState(DONE);
+      },
+      error => {
+        if (this._aborted) {
+          return;
+        }
+        this._error = error;
+        this._setReadyState(DONE);
+      },
+    );
+  }
+
+  readAsDataURL(blob: ?Blob): void {
+    this._aborted = false;
+
+    if (blob == null) {
+      throw new TypeError(
+        "Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'",
+      );
+    }
+
+    NativeFileReaderModule.readAsDataURL(blob.data).then(
+      (text: string) => {
+        if (this._aborted) {
+          return;
+        }
+        this._result = text;
+        this._setReadyState(DONE);
+      },
+      error => {
+        if (this._aborted) {
+          return;
+        }
+        this._error = error;
+        this._setReadyState(DONE);
+      },
+    );
+  }
+
+  readAsText(blob: ?Blob, encoding: string = 'UTF-8'): void {
+    this._aborted = false;
+
+    if (blob == null) {
+      throw new TypeError(
+        "Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'",
+      );
+    }
+
+    NativeFileReaderModule.readAsText(blob.data, encoding).then(
+      (text: string) => {
+        if (this._aborted) {
+          return;
+        }
+        this._result = text;
+        this._setReadyState(DONE);
+      },
+      error => {
+        if (this._aborted) {
+          return;
+        }
+        this._error = error;
+        this._setReadyState(DONE);
+      },
+    );
+  }
+
+  abort() {
+    this._aborted = true;
+    // only call onreadystatechange if there is something to abort, as per spec
+    if (this._readyState !== EMPTY && this._readyState !== DONE) {
+      this._reset();
+      this._setReadyState(DONE);
+    }
+    // Reset again after, in case modified in handler
+    this._reset();
+  }
+
+  get readyState(): ReadyState {
+    return this._readyState;
+  }
+
+  get error(): ?Error {
+    return this._error;
+  }
+
+  get result(): ?ReaderResult {
+    return this._result;
+  }
+
+  get onabort(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'abort');
+  }
+
+  set onabort(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'abort', listener);
+  }
+
+  get onerror(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'error');
+  }
+
+  set onerror(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'error', listener);
+  }
+
+  get onload(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'load');
+  }
+
+  set onload(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'load', listener);
+  }
+
+  get onloadstart(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'loadstart');
+  }
+
+  set onloadstart(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'loadstart', listener);
+  }
+
+  get onloadend(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'loadend');
+  }
+
+  set onloadend(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'loadend', listener);
+  }
+
+  get onprogress(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'progress');
+  }
+
+  set onprogress(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'progress', listener);
+  }
+}
+
+export default FileReader;

package/Libraries/Blob/URL.js

@@ -81,7 +81,19 @@ export class URL {
     let baseUrl = null;
     if (!base || validateBaseUrl(url)) {
       this._url = url;
-      if (!this._url.endsWith('/')) {
+      if (this._url.includes('#')) {
+        const split = this._url.split('#');
+        const beforeHash = split[0];
+        const website = beforeHash.split('://')[1];
+        if (!website.includes('/')) {
+          this._url = split.join('/#');
+        }
+      }
+
+      if (
+        !this._url.endsWith('/') &&
+        !(this._url.includes('?') || this._url.includes('#'))
+      ) {
         this._url += '/';
       }
     } else {
@@ -107,15 +119,21 @@ export class URL {
   }
 
   get hash(): string {
-    throw new Error('URL.hash is not implemented');
+    const hashMatch = this._url.match(/#([^/]*)/);
+    return hashMatch ? `#${hashMatch[1]}` : '';
   }
 
   get host(): string {
-    throw new Error('URL.host is not implemented');
+    const hostMatch = this._url.match(/^https?:\/\/(?:[^@]+@)?([^:/?#]+)/);
+    const portMatch = this._url.match(/:(\d+)(?=[/?#]|$)/);
+    return hostMatch
+      ? hostMatch[1] + (portMatch ? `:${portMatch[1]}` : '')
+      : '';
   }
 
   get hostname(): string {
-    throw new Error('URL.hostname is not implemented');
+    const hostnameMatch = this._url.match(/^https?:\/\/(?:[^@]+@)?([^:/?#]+)/);
+    return hostnameMatch ? hostnameMatch[1] : '';
   }
 
   get href(): string {
@@ -123,32 +141,38 @@ export class URL {
   }
 
   get origin(): string {
-    throw new Error('URL.origin is not implemented');
+    const matches = this._url.match(/^(https?:\/\/[^/]+)/);
+    return matches ? matches[1] : '';
   }
 
   get password(): string {
-    throw new Error('URL.password is not implemented');
+    const passwordMatch = this._url.match(/https?:\/\/.*:(.*)@/);
+    return passwordMatch ? passwordMatch[1] : '';
   }
 
   get pathname(): string {
-    throw new Error('URL.pathname not implemented');
+    const pathMatch = this._url.match(/https?:\/\/[^/]+(\/[^?#]*)?/);
+    return pathMatch ? pathMatch[1] || '/' : '/';
   }
 
   get port(): string {
-    throw new Error('URL.port is not implemented');
+    const portMatch = this._url.match(/:(\d+)(?=[/?#]|$)/);
+    return portMatch ? portMatch[1] : '';
   }
 
   get protocol(): string {
-    throw new Error('URL.protocol is not implemented');
+    const protocolMatch = this._url.match(/^([a-zA-Z][a-zA-Z\d+\-.]*):/);
+    return protocolMatch ? protocolMatch[1] + ':' : '';
   }
 
   get search(): string {
-    throw new Error('URL.search is not implemented');
+    const searchMatch = this._url.match(/\?([^#]*)/);
+    return searchMatch ? `?${searchMatch[1]}` : '';
   }
 
   get searchParams(): URLSearchParams {
     if (this._searchParamsInstance == null) {
-      this._searchParamsInstance = new URLSearchParams();
+      this._searchParamsInstance = new URLSearchParams(this.search);
     }
     return this._searchParamsInstance;
   }
@@ -168,6 +192,7 @@ export class URL {
   }
 
   get username(): string {
-    throw new Error('URL.username is not implemented');
+    const usernameMatch = this._url.match(/^https?:\/\/([^:@]+)(?::[^@]*)?@/);
+    return usernameMatch ? usernameMatch[1] : '';
   }
 }

package/Libraries/Blob/URLSearchParams.js

@@ -11,60 +11,135 @@
 // Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/src
 // The reference code bloat comes from Unicode issues with URLs, so those won't work here.
 export class URLSearchParams {
-  _searchParams: Array<[string, string]> = [];
+  _searchParams: Map<string, string[]> = new Map();
 
-  constructor(params?: Record<string, string>) {
-    if (typeof params === 'object') {
-      Object.keys(params).forEach(key => this.append(key, params[key]));
+  constructor(params?: Record<string, string> | string | [string, string][]) {
+    if (params === null) {
+      return;
+    }
+
+    if (typeof params === 'string') {
+      // URLSearchParams("key1=value1&key2=value2");
+      params
+        .replace(/^\?/, '')
+        .split('&')
+        .forEach(pair => {
+          if (!pair) {
+            return;
+          }
+          const [key, value] = pair
+            .split('=')
+            .map(part => decodeURIComponent(part.replace(/\+/g, ' ')));
+          this.append(key, value);
+        });
+    } else if (Array.isArray(params)) {
+      //URLSearchParams([["key1", "value1"], ["key2", "value2"]]);
+      params.forEach(([key, value]) => this.append(key, value));
+    } else if (typeof params === 'object') {
+      //URLSearchParams({ key1: "value1", key2: "value2" });
+      Object.entries(params).forEach(([key, value]) => this.append(key, value));
     }
   }
 
   append(key: string, value: string): void {
-    this._searchParams.push([key, value]);
+    if (!this._searchParams.has(key)) {
+      this._searchParams.set(key, [value]); // Initialize with an array if key is missing
+    } else {
+      this._searchParams.get(key)?.push(value); // Else push the value to the array
+    }
+  }
+
+  delete(name: string): void {
+    this._searchParams.delete(name);
   }
 
-  delete(name: string): empty {
-    throw new Error('URLSearchParams.delete is not implemented');
+  get(name: string): string | null {
+    const values = this._searchParams.get(name);
+    return values ? values[0] : null;
   }
 
-  get(name: string): empty {
-    throw new Error('URLSearchParams.get is not implemented');
+  getAll(name: string): string[] {
+    return this._searchParams.get(name) ?? [];
   }
 
-  getAll(name: string): empty {
-    throw new Error('URLSearchParams.getAll is not implemented');
+  has(name: string): boolean {
+    return this._searchParams.has(name);
   }
 
-  has(name: string): empty {
-    throw new Error('URLSearchParams.has is not implemented');
+  set(name: string, value: string): void {
+    this._searchParams.set(name, [value]);
   }
 
-  set(name: string, value: string): empty {
-    throw new Error('URLSearchParams.set is not implemented');
+  keys(): Iterator<string> {
+    return this._searchParams.keys();
   }
 
-  sort(): empty {
-    throw new Error('URLSearchParams.sort is not implemented');
+  values(): Iterator<string> {
+    function* generateValues(params: Map<string, string[]>): Iterator<string> {
+      for (const valueArray of params.values()) {
+        for (const value of valueArray) {
+          yield value;
+        }
+      }
+    }
+    return generateValues(this._searchParams);
+  }
+
+  entries(): Iterator<[string, string]> {
+    function* generateEntries(
+      params: Map<string, string[]>,
+    ): Iterator<[string, string]> {
+      for (const [key, values] of params) {
+        for (const value of values) {
+          yield [key, value];
+        }
+      }
+    }
+
+    return generateEntries(this._searchParams);
+  }
+
+  forEach(
+    callback: (value: string, key: string, searchParams: this) => void,
+  ): void {
+    for (const [key, values] of this._searchParams) {
+      for (const value of values) {
+        callback(value, key, this);
+      }
+    }
+  }
+
+  sort(): void {
+    this._searchParams = new Map(
+      [...this._searchParams.entries()].sort(([a], [b]) => a.localeCompare(b)),
+    );
   }
 
   // $FlowFixMe[unsupported-syntax]
   [Symbol.iterator](): Iterator<[string, string]> {
-    return this._searchParams[Symbol.iterator]();
+    const entries: [string, string][] = [];
+
+    for (const [key, values] of this._searchParams) {
+      for (const value of values) {
+        entries.push([key, value]);
+      }
+    }
+
+    return entries[Symbol.iterator]();
   }
 
   toString(): string {
-    if (this._searchParams.length === 0) {
-      return '';
-    }
-    const last = this._searchParams.length - 1;
-    return this._searchParams.reduce((acc, curr, index) => {
-      return (
-        acc +
-        encodeURIComponent(curr[0]) +
-        '=' +
-        encodeURIComponent(curr[1]) +
-        (index === last ? '' : '&')
-      );
-    }, '');
+    return Array.from(this._searchParams.entries())
+      .map(([key, values]) =>
+        values
+          .map(
+            value =>
+              `${encodeURIComponent(key).replace(/%20/g, '+')}=${encodeURIComponent(
+                value,
+              ).replace(/%20/g, '+')}`, // Convert only spaces to '+'
+          )
+          .join('&'),
+      )
+      .join('&');
   }
 }

package/Libraries/Blob/URLSearchParams.js.flow

@@ -10,14 +10,19 @@
 
 declare export class URLSearchParams {
   _searchParams: Array<[string, string]>;
-  constructor(params?: Record<string, string>): void;
+  constructor(
+    params?: Record<string, string> | string | Array<[string, string]>,
+  ): void;
   append(key: string, value: string): void;
-  delete(name: string): empty;
-  get(name: string): empty;
-  getAll(name: string): empty;
-  has(name: string): empty;
-  set(name: string, value: string): empty;
-  sort(): empty;
+  delete(name: string): void;
+  get(name: string): string;
+  getAll(name: string): Array<string>;
+  has(name: string): boolean;
+  set(name: string, value: string): void;
+  sort(): void;
   @@iterator(): Iterator<[string, string]>;
   toString(): string;
+  keys(): Iterator<string>;
+  values(): Iterator<string>;
+  entries(): Iterator<[string, string]>;
 }

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -397,7 +397,7 @@ const AccessibilityInfo = {
   addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
     eventName: K,
     // $FlowIssue[incompatible-type] - Flow bug with unions and generics (T128099423)
-    handler: (...$ElementType<AccessibilityEventDefinitions, K>) => void,
+    handler: (...AccessibilityEventDefinitions[K]) => void,
   ): EventSubscription {
     const deviceEventName = EventNames.get(eventName);
     return deviceEventName == null

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.windows.js

@@ -408,7 +408,7 @@ const AccessibilityInfo = {
   addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
     eventName: K,
     // $FlowIssue[incompatible-type] - Flow bug with unions and generics (T128099423)
-    handler: (...$ElementType<AccessibilityEventDefinitions, K>) => void,
+    handler: (...AccessibilityEventDefinitions[K]) => void,
   ): EventSubscription {
     const deviceEventName = EventNames.get(eventName);
     return deviceEventName == null

package/Libraries/Components/AccessibilityInfo/legacySendAccessibilityEvent.js

@@ -0,0 +1,17 @@
+/**
+ * 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
+ */
+
+// NOTE: This file supports backwards compatibility of subpath (deep) imports
+// from 'react-native' with platform-specific extensions. It can be deleted
+// once we remove the "./*" mapping from package.json "exports".
+
+import legacySendAccessibilityEvent from './legacySendAccessibilityEvent';
+
+export default legacySendAccessibilityEvent;

package/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -110,6 +110,7 @@ const ActivityIndicator = (
       style={StyleSheet.compose(styles.container, style)}>
       {Platform.OS === 'android' ? (
         // $FlowFixMe[prop-missing] Flow doesn't know when this is the android component
+        // $FlowFixMe[incompatible-type]
         <PlatformActivityIndicator {...nativeProps} {...androidProps} />
       ) : (
         /* $FlowFixMe[incompatible-type] (>=0.106.0 site=react_native_android_fb) This comment

package/Libraries/Components/Button.d.ts

@@ -17,6 +17,7 @@ export interface ButtonProps
     TouchableNativeFeedbackProps & TouchableOpacityProps,
     | 'accessibilityLabel'
     | 'accessibilityState'
+    | 'accessibilityValue' // Windows
     | 'hasTVPreferredFocus'
     | 'nextFocusDown'
     | 'nextFocusForward'
@@ -37,6 +38,8 @@ export interface ButtonProps
    * Color of the text (iOS), or background color of the button (Android).
    */
   color?: ColorValue | undefined;
+
+  onAccessibilityTap?: () => void; // Windows
 }
 
 export class Button extends React.Component<ButtonProps> {}

package/Libraries/Components/Button.js

@@ -38,7 +38,7 @@ export type ButtonProps = $ReadOnly<{
     Handler to be called when the user taps the button. The first function
     argument is an event in form of [GestureResponderEvent](pressevent).
    */
-  onPress: (event?: GestureResponderEvent) => mixed,
+  onPress?: (event?: GestureResponderEvent) => mixed,
 
   /**
     If `true`, doesn't play system sound on touch.

package/Libraries/Components/Button.windows.js

@@ -16,6 +16,7 @@ import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
   AccessibilityState,
+  AccessibilityValue, // Windows
 } from './View/ViewAccessibility';
 
 import StyleSheet, {type ColorValue} from '../StyleSheet/StyleSheet';
@@ -42,7 +43,7 @@ export type ButtonProps = $ReadOnly<{
     Handler to be called when the user taps the button. The first function
     argument is an event in form of [GestureResponderEvent](pressevent).
    */
-  onPress: (event?: GestureResponderEvent) => mixed,
+  onPress?: (event?: GestureResponderEvent) => mixed,
 
   /**
     If `true`, doesn't play system sound on touch.
@@ -154,6 +155,7 @@ export type ButtonProps = $ReadOnly<{
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   onAccessibilityTap?: ?() => void, // Windows
   accessibilityState?: ?AccessibilityState,
+  accessibilityValue?: ?AccessibilityValue, // Windows
 
   /**
    * alias for accessibilityState
@@ -169,6 +171,15 @@ export type ButtonProps = $ReadOnly<{
   'aria-multiselectable'?: ?boolean, // Windows
   'aria-required'?: ?boolean, // Windows
 
+  /**
+   * alias for accessibilityValue
+   * It represents textual description of a component's value, or for range-based components, such as sliders and progress bars.
+   */
+  'aria-valuemax'?: ?AccessibilityValue['max'],
+  'aria-valuemin'?: ?AccessibilityValue['min'],
+  'aria-valuenow'?: ?AccessibilityValue['now'],
+  'aria-valuetext'?: ?AccessibilityValue['text'],
+
   /**
    * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
    */
@@ -308,6 +319,7 @@ const Button: component(
   const {
     accessibilityLabel,
     accessibilityState,
+    accessibilityValue, // Windows
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
@@ -317,6 +329,10 @@ const Button: component(
     'aria-readonly': ariaReadOnly, // Windows
     'aria-multiselectable': ariaMultiselectable, // Windows
     'aria-required': ariaRequired, // Windows
+    'aria-valuemax': ariaValueMax, // Windows
+    'aria-valuemin': ariaValueMin, // Windows
+    'aria-valuenow': ariaValueNow, // Windows
+    'aria-valuetext': ariaValueText, // Windows
     importantForAccessibility,
     color,
     onPress,
@@ -366,6 +382,15 @@ const Button: component(
       ? {..._accessibilityState, disabled}
       : _accessibilityState;
 
+  // [Windows
+  let _accessibilityValue = {
+    max: ariaValueMax ?? accessibilityValue?.max,
+    min: ariaValueMin ?? accessibilityValue?.min,
+    now: ariaValueNow ?? accessibilityValue?.now,
+    text: ariaValueText ?? accessibilityValue?.text,
+  };
+  // Windows]
+
   if (disabled) {
     buttonStyles.push(styles.buttonDisabled);
     textStyles.push(styles.textDisabled);
@@ -393,6 +418,7 @@ const Button: component(
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
         accessibilityState={_accessibilityState}
+        accessibilityValue={_accessibilityValue} // Windows
         onAccessibilityTap={onAccessibilityTap} // Windows
         importantForAccessibility={_importantForAccessibility}
         hasTVPreferredFocus={hasTVPreferredFocus}