react-native-windows 0.70.9 → 0.71.0-preview.2

package/Libraries/Components/Button.windows.js

@@ -9,8 +9,14 @@
 
 'use strict';
 
-import * as React from 'react';
-import Platform from '../Utilities/Platform';
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {Button as ButtonType} from './Button.flow';
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  AccessibilityState,
+} from './View/ViewAccessibility';
+
 import StyleSheet, {type ColorValue} from '../StyleSheet/StyleSheet';
 import Text from '../Text/Text';
 // [Windows
@@ -18,16 +24,11 @@ import Text from '../Text/Text';
 // import TouchableOpacity from './Touchable/TouchableOpacity';
 import TouchableHighlight from './Touchable/TouchableHighlight';
 import {PlatformColor} from '../StyleSheet/PlatformColorValueTypes';
+import Platform from '../Utilities/Platform';
 // Windows]
 import View from './View/View';
 import invariant from 'invariant';
-
-import type {
-  AccessibilityState,
-  AccessibilityActionEvent,
-  AccessibilityActionInfo,
-} from './View/ViewAccessibility';
-import type {PressEvent} from '../Types/CoreEventTypes';
+import * as React from 'react';
 
 type ButtonProps = $ReadOnly<{|
   /**
@@ -127,7 +128,11 @@ type ButtonProps = $ReadOnly<{|
     Text to display for blindness accessibility features.
    */
   accessibilityLabel?: ?string,
-
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
   /**
     If `true`, disable all interactions for this component.
 
@@ -147,6 +152,22 @@ type ButtonProps = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
+
+  /**
+   * alias for accessibilityState
+   *
+   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   */
+  'aria-busy'?: ?boolean,
+  'aria-checked'?: ?boolean | 'mixed',
+  'aria-disabled'?: ?boolean,
+  'aria-expanded'?: ?boolean,
+  'aria-selected'?: ?boolean,
+
+  /**
+   * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
+   */
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
 
@@ -285,6 +306,14 @@ class Button extends React.Component<
   render(): React.Node {
     const {
       accessibilityLabel,
+      accessibilityState,
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-disabled': ariaDisabled,
+      'aria-expanded': ariaExpanded,
+      'aria-label': ariaLabel,
+      'aria-selected': ariaSelected,
+      importantForAccessibility,
       color,
       onPress,
       touchSoundDisabled,
@@ -313,15 +342,23 @@ class Button extends React.Component<
       }
     }
 
+    let _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+
     const disabled =
       this.props.disabled != null
         ? this.props.disabled
-        : this.props.accessibilityState?.disabled;
+        : _accessibilityState?.disabled;
 
-    const accessibilityState =
-      disabled !== this.props.accessibilityState?.disabled
-        ? {...this.props.accessibilityState, disabled}
-        : this.props.accessibilityState;
+    _accessibilityState =
+      disabled !== _accessibilityState?.disabled
+        ? {..._accessibilityState, disabled}
+        : _accessibilityState;
 
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
@@ -334,6 +371,13 @@ class Button extends React.Component<
     );
     const formattedTitle =
       Platform.OS === 'android' ? title.toUpperCase() : title;
+
+    // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
+    const _importantForAccessibility =
+      importantForAccessibility === 'no'
+        ? 'no-hide-descendants'
+        : importantForAccessibility;
+
     // [Windows - render a TouchableHighlight
     const Touchable = TouchableHighlight;
     //  Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
@@ -343,11 +387,11 @@ class Button extends React.Component<
       return (
         <Touchable
           accessible={accessible}
-          accessibilityLabel={accessibilityLabel}
+          accessibilityLabel={ariaLabel || accessibilityLabel}
           accessibilityHint={accessibilityHint}
           accessibilityLanguage={accessibilityLanguage}
           accessibilityRole="button"
-          accessibilityState={accessibilityState}
+          accessibilityState={_accessibilityState}
           hasTVPreferredFocus={hasTVPreferredFocus}
           nextFocusDown={nextFocusDown}
           nextFocusForward={nextFocusForward}
@@ -543,4 +587,4 @@ const styles = StyleSheet.create({
   // Windows]
 });
 
-module.exports = Button;
+module.exports = (Button: ButtonType);

package/Libraries/Components/Clipboard/Clipboard.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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
+ */
+
+export interface ClipboardStatic {
+  getString(): Promise<string>;
+  setString(content: string): void;
+}
+
+/**
+ * Clipboard has been extracted from react-native core and will be removed in a future release.
+ * It can now be installed and imported from `@react-native-community/clipboard` instead of 'react-native'.
+ * @see https://github.com/react-native-community/clipboard
+ * @deprecated
+ */
+export const Clipboard: ClipboardStatic;
+/**
+ * Clipboard has been extracted from react-native core and will be removed in a future release.
+ * It can now be installed and imported from `@react-native-community/clipboard` instead of 'react-native'.
+ * @see https://github.com/react-native-community/clipboard
+ * @deprecated
+ */
+export type Clipboard = ClipboardStatic;

package/Libraries/Components/Clipboard/NativeClipboard.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Components/DatePicker/DatePickerIOS.android.js

@@ -8,10 +8,12 @@
  */
 
 'use strict';
-import * as React from 'react';
+import type {DatePickerIOSType} from './DatePickerIOS.flow';
+
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import View from '../View/View';
+import * as React from 'react';
 
 class DummyDatePickerIOS extends React.Component {
   render() {
@@ -42,4 +44,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = DummyDatePickerIOS;
+module.exports = (DummyDatePickerIOS: DatePickerIOSType);

package/Libraries/Components/DatePicker/DatePickerIOS.d.ts

@@ -0,0 +1,92 @@
+/**
+ * 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
+ */
+
+import type * as React from 'react';
+import {Constructor} from '../../../types/private/Utilities';
+import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {ViewProps} from '../View/ViewPropTypes';
+
+export interface DatePickerIOSProps extends ViewProps {
+  /**
+   * The currently selected date.
+   */
+  date?: Date | null | undefined;
+
+  /**
+   * Provides an initial value that will change when the user starts selecting
+   * a date. It is useful for simple use-cases where you do not want to deal
+   * with listening to events and updating the date prop to keep the
+   * controlled state in sync. The controlled state has known bugs which
+   * causes it to go out of sync with native. The initialDate prop is intended
+   * to allow you to have native be source of truth.
+   */
+  initialDate?: Date | null | undefined;
+
+  /**
+   * The date picker locale.
+   */
+  locale?: string | undefined;
+
+  /**
+   * Maximum date.
+   * Restricts the range of possible date/time values.
+   */
+  maximumDate?: Date | undefined;
+
+  /**
+   * Maximum date.
+   * Restricts the range of possible date/time values.
+   */
+  minimumDate?: Date | undefined;
+
+  /**
+   *  enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)
+   *  The interval at which minutes can be selected.
+   */
+  minuteInterval?: 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30 | undefined;
+
+  /**
+   *  enum('date', 'time', 'datetime')
+   *  The date picker mode.
+   */
+  mode?: 'date' | 'time' | 'datetime' | undefined;
+
+  /**
+   * Date change handler.
+   * This is called when the user changes the date or time in the UI.
+   * The first and only argument is a Date object representing the new date and time.
+   */
+  onDateChange: (newDate: Date) => void;
+
+  /**
+   * Timezone offset in minutes.
+   * By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset.
+   * For instance, to show times in Pacific Standard Time, pass -7 * 60.
+   */
+  timeZoneOffsetInMinutes?: number | undefined;
+
+  /**
+   * The date picker style
+   * This is only available on devices with iOS 14.0 and later.
+   * 'spinner' is the default style if this prop isn't set.
+   */
+  pickerStyle?: 'compact' | 'spinner' | 'inline' | undefined;
+}
+
+declare class DatePickerIOSComponent extends React.Component<DatePickerIOSProps> {}
+declare const DatePickerIOSBase: Constructor<NativeMethods> &
+  typeof DatePickerIOSComponent;
+
+/**
+ * DatePickerIOS has been merged with DatePickerAndroid and will be removed in a future release.
+ * It can now be installed and imported from `@react-native-community/datetimepicker` instead of 'react-native'.
+ * @see https://github.com/react-native-community/datetimepicker
+ * @deprecated
+ */
+export class DatePickerIOS extends DatePickerIOSBase {}

package/Libraries/Components/{MaskedView/MaskedViewIOS.android.js → DatePicker/DatePickerIOS.flow.android.js}

@@ -4,10 +4,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ * @flow strict
  * @format
- * @flow strict-local
  */
 
 'use strict';
+import * as React from 'react';
 
-module.exports = require('../UnimplementedViews/UnimplementedView');
+export type DatePickerIOSType = React.ComponentType<>;

package/Libraries/Components/DatePicker/DatePickerIOS.flow.ios.js

@@ -0,0 +1,113 @@
+/**
+ * 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 strict-local
+ */
+
+// This is a controlled component version of RCTDatePickerIOS.
+
+import type {SyntheticEvent} from '../../Types/CoreEventTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+import * as React from 'react';
+
+type Event = SyntheticEvent<
+  $ReadOnly<{|
+    timestamp: number,
+  |}>,
+>;
+
+type Props = $ReadOnly<{|
+  ...ViewProps,
+
+  /**
+   * The currently selected date.
+   */
+  date?: ?Date,
+
+  /**
+   * Provides an initial value that will change when the user starts selecting
+   * a date. It is useful for simple use-cases where you do not want to deal
+   * with listening to events and updating the date prop to keep the
+   * controlled state in sync. The controlled state has known bugs which
+   * causes it to go out of sync with native. The initialDate prop is intended
+   * to allow you to have native be source of truth.
+   */
+  initialDate?: ?Date,
+
+  /**
+   * The date picker locale.
+   */
+  locale?: ?string,
+
+  /**
+   * Maximum date.
+   *
+   * Restricts the range of possible date/time values.
+   */
+  maximumDate?: ?Date,
+
+  /**
+   * Minimum date.
+   *
+   * Restricts the range of possible date/time values.
+   */
+  minimumDate?: ?Date,
+
+  /**
+   * The interval at which minutes can be selected.
+   */
+  minuteInterval?: ?(1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30),
+
+  /**
+   * The date picker mode.
+   */
+  mode?: ?('date' | 'time' | 'datetime'),
+
+  /**
+   * Date change handler.
+   *
+   * This is called when the user changes the date or time in the UI.
+   * The first and only argument is an Event. For getting the date the picker
+   * was changed to, use onDateChange instead.
+   */
+  onChange?: ?(event: Event) => void,
+
+  /**
+   * Date change handler.
+   *
+   * This is called when the user changes the date or time in the UI.
+   * The first and only argument is a Date object representing the new
+   * date and time.
+   */
+  onDateChange: (date: Date) => void,
+
+  /**
+   * Timezone offset in minutes.
+   *
+   * By default, the date picker will use the device's timezone. With this
+   * parameter, it is possible to force a certain timezone offset. For
+   * instance, to show times in Pacific Standard Time, pass -7 * 60.
+   */
+  timeZoneOffsetInMinutes?: ?number,
+
+  /**
+   * The date picker style
+   * This is only available on devices with iOS 14.0 and later.
+   * 'spinner' is the default style if this prop isn't set.
+   */
+  pickerStyle?: ?('compact' | 'spinner' | 'inline'),
+|}>;
+
+/**
+ * Use `DatePickerIOS` to render a date/time picker (selector) on iOS.  This is
+ * a controlled component, so you must hook in to the `onDateChange` callback
+ * and update the `date` prop in order for the component to update, otherwise
+ * the user's change will be reverted immediately to reflect `props.date` as the
+ * source of truth.
+ */
+export type DatePickerIOSType = React.ComponentType<Props>;

package/Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -10,16 +10,17 @@
 
 // This is a controlled component version of RCTDatePickerIOS.
 
-import * as React from 'react';
+import type {SyntheticEvent} from '../../Types/CoreEventTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+import type {DatePickerIOSType} from './DatePickerIOS.flow';
+
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
 import RCTDatePickerNativeComponent, {
   Commands as DatePickerCommands,
 } from './RCTDatePickerNativeComponent';
-import StyleSheet from '../../StyleSheet/StyleSheet';
-import View from '../View/View';
 import invariant from 'invariant';
-
-import type {SyntheticEvent} from '../../Types/CoreEventTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
+import * as React from 'react';
 
 type Event = SyntheticEvent<
   $ReadOnly<{|
@@ -238,4 +239,4 @@ function getHeight(
   return styles.datePickerIOS;
 }
 
-module.exports = DatePickerIOS;
+module.exports = (DatePickerIOS: DatePickerIOSType);

package/Libraries/Components/DatePicker/DatePickerIOS.windows.js

@@ -8,10 +8,12 @@
  */
 
 'use strict';
-import * as React from 'react';
+import type {DatePickerIOSType} from './DatePickerIOS.flow';
+
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import View from '../View/View';
+import * as React from 'react';
 
 class DummyDatePickerIOS extends React.Component {
   render() {
@@ -42,4 +44,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = DummyDatePickerIOS;
+module.exports = (DummyDatePickerIOS: DatePickerIOSType);

package/Libraries/Components/DatePicker/RCTDatePickerNativeComponent.js

@@ -9,15 +9,16 @@
  */
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import * as React from 'react';
 import type {
+  BubblingEventHandler,
   Float,
   WithDefault,
-  BubblingEventHandler,
-} from 'react-native/Libraries/Types/CodegenTypes';
+} from '../../Types/CodegenTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
+import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
+import * as React from 'react';
 
 type Event = $ReadOnly<{|
   timestamp: Float,

package/Libraries/Components/DatePickerAndroid/NativeDatePickerAndroid.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
 /**

package/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js

@@ -8,17 +8,18 @@
  * @flow strict-local
  */
 
-import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {
-  WithDefault,
   DirectEventHandler,
-  Int32,
   Float,
-} from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+  Int32,
+  WithDefault,
+} from '../../Types/CodegenTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
+import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
 import * as React from 'react';
 
 type DrawerStateEvent = $ReadOnly<{|

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -8,29 +8,27 @@
  * @format
  */
 
+import type {
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+  MeasureOnSuccessCallback,
+} from '../../Renderer/shims/ReactNativeTypes';
+import type {ColorValue, ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import type {DirectEventHandler} from '../../Types/CodegenTypes';
+
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
-import * as React from 'react';
 import StatusBar from '../StatusBar/StatusBar';
-import StyleSheet from '../../StyleSheet/StyleSheet';
 import View from '../View/View';
-
-import dismissKeyboard from '../../Utilities/dismissKeyboard';
-import nullthrows from 'nullthrows';
-
 import AndroidDrawerLayoutNativeComponent, {
   Commands,
 } from './AndroidDrawerLayoutNativeComponent';
+import nullthrows from 'nullthrows';
+import * as React from 'react';
 
 const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
 
-import type {ColorValue, ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {DirectEventHandler} from '../../Types/CodegenTypes';
-import type {
-  MeasureOnSuccessCallback,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-} from '../../Renderer/shims/ReactNativeTypes';
-
 type DrawerStates = 'Idle' | 'Dragging' | 'Settling';
 
 type DrawerSlideEvent = $ReadOnly<{|
@@ -162,6 +160,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
     return {Left: 'left', Right: 'right'};
   }
 
+  // $FlowFixMe[missing-local-annot]
   _nativeRef =
     React.createRef<
       React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,