@office-iss/react-native-win32 0.70.2 → 0.71.0-preview.1

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.win32.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>,

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.d.ts

@@ -0,0 +1,141 @@
+/**
+ * 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 {ColorValue} from '../../StyleSheet/StyleSheet';
+import {
+  NativeSyntheticEvent,
+  NativeTouchEvent,
+} from '../../Types/CoreEventTypes';
+import {ViewProps} from '../View/ViewPropTypes';
+
+export interface DrawerSlideEvent
+  extends NativeSyntheticEvent<NativeTouchEvent> {}
+
+/**
+ * @see DrawerLayoutAndroid.android.js
+ */
+export interface DrawerLayoutAndroidProps extends ViewProps {
+  /**
+   * Specifies the background color of the drawer. The default value
+   * is white. If you want to set the opacity of the drawer, use rgba.
+   * Example:
+   * return (
+   *   <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
+   *   </DrawerLayoutAndroid>
+   *);
+   */
+  drawerBackgroundColor?: ColorValue | undefined;
+
+  /**
+   * Specifies the lock mode of the drawer. The drawer can be locked
+   * in 3 states:
+   *
+   * - unlocked (default), meaning that the drawer will respond
+   *   (open/close) to touch gestures.
+   *
+   * - locked-closed, meaning that the drawer will stay closed and not
+   *   respond to gestures.
+   *
+   * - locked-open, meaning that the drawer will stay opened and
+   *   not respond to gestures. The drawer may still be opened and
+   *   closed programmatically (openDrawer/closeDrawer).
+   */
+  drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open' | undefined;
+
+  /**
+   * Specifies the side of the screen from which the drawer will slide in.
+   * - 'left' (the default)
+   * - 'right'
+   */
+  drawerPosition?: 'left' | 'right' | undefined;
+
+  /**
+   * Specifies the width of the drawer, more precisely the width of the
+   * view that be pulled in from the edge of the window.
+   */
+  drawerWidth?: number | undefined;
+
+  /**
+   * Determines whether the keyboard gets dismissed in response to a drag.
+   * - 'none' (the default), drags do not dismiss the keyboard.
+   * - 'on-drag', the keyboard is dismissed when a drag begins.
+   */
+  keyboardDismissMode?: 'none' | 'on-drag' | undefined;
+
+  /**
+   * Function called whenever the navigation view has been closed.
+   */
+  onDrawerClose?: (() => void) | undefined;
+
+  /**
+   * Function called whenever the navigation view has been opened.
+   */
+  onDrawerOpen?: (() => void) | undefined;
+
+  /**
+   * Function called whenever there is an interaction with the navigation view.
+   */
+  onDrawerSlide?: ((event: DrawerSlideEvent) => void) | undefined;
+
+  /**
+   * Function called when the drawer state has changed.
+   * The drawer can be in 3 states:
+   * - idle, meaning there is no interaction with the navigation
+   *   view happening at the time
+   * - dragging, meaning there is currently an interaction with the
+   *   navigation view
+   * - settling, meaning that there was an interaction with the
+   *   navigation view, and the navigation view is now finishing
+   *   it's closing or opening animation
+   */
+  onDrawerStateChanged?:
+    | ((event: 'Idle' | 'Dragging' | 'Settling') => void)
+    | undefined;
+
+  /**
+   * The navigation view that will be rendered to the side of the
+   * screen and can be pulled in.
+   */
+  renderNavigationView: () => JSX.Element;
+
+  /**
+   * Make the drawer take the entire screen and draw the background of
+   * the status bar to allow it to open over the status bar. It will
+   * only have an effect on API 21+.
+   */
+  statusBarBackgroundColor?: ColorValue | undefined;
+}
+
+interface DrawerPosition {
+  Left: number;
+  Right: number;
+}
+
+declare class DrawerLayoutAndroidComponent extends React.Component<DrawerLayoutAndroidProps> {}
+declare const DrawerLayoutAndroidBase: Constructor<NativeMethods> &
+  typeof DrawerLayoutAndroidComponent;
+export class DrawerLayoutAndroid extends DrawerLayoutAndroidBase {
+  /**
+   * drawer's positions.
+   */
+  positions: DrawerPosition;
+
+  /**
+   * Opens the drawer.
+   */
+  openDrawer(): void;
+
+  /**
+   * Closes the drawer.
+   */
+  closeDrawer(): void;
+}

package/Libraries/Components/Keyboard/Keyboard.d.ts

@@ -0,0 +1,109 @@
+/**
+ * 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 {NativeEventEmitter} from '../../EventEmitter/NativeEventEmitter';
+import {EmitterSubscription} from '../../vendor/emitter/EventEmitter';
+
+export type KeyboardEventName =
+  | 'keyboardWillShow'
+  | 'keyboardDidShow'
+  | 'keyboardWillHide'
+  | 'keyboardDidHide'
+  | 'keyboardWillChangeFrame'
+  | 'keyboardDidChangeFrame';
+
+export type KeyboardEventEasing =
+  | 'easeIn'
+  | 'easeInEaseOut'
+  | 'easeOut'
+  | 'linear'
+  | 'keyboard';
+
+type KeyboardMetrics = {
+  screenX: number;
+  screenY: number;
+  width: number;
+  height: number;
+};
+
+interface KeyboardEventIOS {
+  /**
+   * @platform ios
+   */
+  startCoordinates: KeyboardMetrics;
+  /**
+   * @platform ios
+   */
+  isEventFromThisApp: boolean;
+}
+
+export interface KeyboardEvent extends Partial<KeyboardEventIOS> {
+  /**
+   * Always set to 0 on Android.
+   */
+  duration: number;
+  /**
+   * Always set to "keyboard" on Android.
+   */
+  easing: KeyboardEventEasing;
+  endCoordinates: KeyboardMetrics;
+}
+
+type KeyboardEventListener = (event: KeyboardEvent) => void;
+
+export interface KeyboardStatic extends NativeEventEmitter {
+  /**
+   * Dismisses the active keyboard and removes focus.
+   */
+  dismiss: () => void;
+  /**
+   * The `addListener` function connects a JavaScript function to an identified native
+   * keyboard notification event.
+   *
+   * This function then returns the reference to the listener.
+   *
+   * {string} eventName The `nativeEvent` is the string that identifies the event you're listening for.  This
+   *can be any of the following:
+   *
+   * - `keyboardWillShow`
+   * - `keyboardDidShow`
+   * - `keyboardWillHide`
+   * - `keyboardDidHide`
+   * - `keyboardWillChangeFrame`
+   * - `keyboardDidChangeFrame`
+   *
+   * Note that if you set `android:windowSoftInputMode` to `adjustResize`  or `adjustNothing`,
+   * only `keyboardDidShow` and `keyboardDidHide` events will be available on Android.
+   * `keyboardWillShow` as well as `keyboardWillHide` are generally not available on Android
+   * since there is no native corresponding event.
+   *
+   * {function} callback function to be called when the event fires.
+   */
+  addListener: (
+    eventType: KeyboardEventName,
+    listener: KeyboardEventListener,
+  ) => EmitterSubscription;
+  /**
+   * Useful for syncing TextInput (or other keyboard accessory view) size of
+   * position changes with keyboard movements.
+   */
+  scheduleLayoutAnimation: (event: KeyboardEvent) => void;
+
+  /**
+   * Whether the keyboard is last known to be visible.
+   */
+  isVisible(): boolean;
+
+  /**
+   * Return the metrics of the soft-keyboard if visible.
+   */
+  metrics(): KeyboardMetrics | undefined;
+}
+
+export const Keyboard: KeyboardStatic;