@office-iss/react-native-win32 0.0.0-canary.28 → 0.0.0-canary.281

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -8,9 +8,15 @@
  * @format
  */
 
-'use strict';
-
-import type {ViewProps} from '../View/ViewPropTypes';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
+import type {
+  ColorValue,
+  TextStyleProp,
+  ViewStyleProp,
+} from '../../StyleSheet/StyleSheet';
 import type {
   BubblingEventHandler,
   DirectEventHandler,
@@ -19,14 +25,11 @@ import type {
   Int32,
   WithDefault,
 } from '../../Types/CodegenTypes';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {TextStyleProp, ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
-import requireNativeComponent from '../../ReactNative/requireNativeComponent';
+import type {ViewProps} from '../View/ViewPropTypes';
+import type {TextInputNativeCommands} from './TextInputNativeCommands';
+
+import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
-import * as React from 'react';
-import AndroidTextInputViewConfig from './AndroidTextInputViewConfig';
-const ReactNativeViewConfigRegistry = require('../../Renderer/shims/ReactNativeViewConfigRegistry');
 
 export type KeyboardType =
   // Cross Platform
@@ -36,10 +39,10 @@ export type KeyboardType =
   | 'phone-pad'
   | 'number-pad'
   | 'decimal-pad'
+  | 'url'
   // iOS-only
   | 'ascii-capable'
   | 'numbers-and-punctuation'
-  | 'url'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search'
@@ -64,6 +67,8 @@ export type ReturnKeyType =
   | 'route'
   | 'yahoo';
 
+export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
+
 export type NativeProps = $ReadOnly<{|
   // This allows us to inherit everything from ViewProps except for style (see below)
   // This must be commented for Fabric codegen to work.
@@ -73,42 +78,90 @@ export type NativeProps = $ReadOnly<{|
    * Android props after this
    */
   /**
-   * Determines which content to suggest on auto complete, e.g.`username`.
-   * To disable auto complete, use `off`.
+   * Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content.
+   * To disable autocomplete, set `autoComplete` to `off`.
    *
    * *Android Only*
    *
-   * The following values work on Android only:
+   * Possible values for `autoComplete` are:
    *
-   * - `username`
-   * - `password`
-   * - `email`
-   * - `name`
-   * - `tel`
-   * - `street-address`
-   * - `postal-code`
-   * - `cc-number`
+   * - `birthdate-day`
+   * - `birthdate-full`
+   * - `birthdate-month`
+   * - `birthdate-year`
    * - `cc-csc`
    * - `cc-exp`
+   * - `cc-exp-day`
    * - `cc-exp-month`
    * - `cc-exp-year`
+   * - `cc-number`
+   * - `email`
+   * - `gender`
+   * - `name`
+   * - `name-family`
+   * - `name-given`
+   * - `name-middle`
+   * - `name-middle-initial`
+   * - `name-prefix`
+   * - `name-suffix`
+   * - `password`
+   * - `password-new`
+   * - `postal-address`
+   * - `postal-address-country`
+   * - `postal-address-extended`
+   * - `postal-address-extended-postal-code`
+   * - `postal-address-locality`
+   * - `postal-address-region`
+   * - `postal-code`
+   * - `street-address`
+   * - `sms-otp`
+   * - `tel`
+   * - `tel-country-code`
+   * - `tel-national`
+   * - `tel-device`
+   * - `username`
+   * - `username-new`
    * - `off`
    *
    * @platform android
    */
-  autoCompleteType?: WithDefault<
+  autoComplete?: WithDefault<
+    | 'birthdate-day'
+    | 'birthdate-full'
+    | 'birthdate-month'
+    | 'birthdate-year'
     | 'cc-csc'
     | 'cc-exp'
+    | 'cc-exp-day'
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
     | 'email'
+    | 'gender'
     | 'name'
+    | 'name-family'
+    | 'name-given'
+    | 'name-middle'
+    | 'name-middle-initial'
+    | 'name-prefix'
+    | 'name-suffix'
     | 'password'
+    | 'password-new'
+    | 'postal-address'
+    | 'postal-address-country'
+    | 'postal-address-extended'
+    | 'postal-address-extended-postal-code'
+    | 'postal-address-locality'
+    | 'postal-address-region'
     | 'postal-code'
     | 'street-address'
+    | 'sms-otp'
     | 'tel'
+    | 'tel-country-code'
+    | 'tel-national'
+    | 'tel-device'
     | 'username'
+    | 'username-new'
     | 'off',
     'off',
   >,
@@ -182,7 +235,6 @@ export type NativeProps = $ReadOnly<{|
   /**
    * When `false`, it will prevent the soft keyboard from showing when the field is focused.
    * Defaults to `true`.
-   * @platform android
    */
   showSoftInputOnFocus?: ?boolean,
 
@@ -244,6 +296,7 @@ export type NativeProps = $ReadOnly<{|
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *Android Only*
    *
@@ -332,15 +385,6 @@ export type NativeProps = $ReadOnly<{|
     |}>,
   >,
 
-  onTextInput?: ?BubblingEventHandler<
-    $ReadOnly<{|
-      target: Int32,
-      text: string,
-      previousText: string,
-      range: $ReadOnly<{|start: Double, end: Double|}>,
-    |}>,
-  >,
-
   /**
    * Callback that is called when text input ends.
    */
@@ -414,7 +458,7 @@ export type NativeProps = $ReadOnly<{|
   /**
    * The string that will be rendered before text input has been entered.
    */
-  placeholder?: ?string,
+  placeholder?: ?Stringish,
 
   /**
    * The text color of the placeholder string.
@@ -432,6 +476,11 @@ export type NativeProps = $ReadOnly<{|
    */
   selectionColor?: ?ColorValue,
 
+  /**
+   * The text selection handle color.
+   */
+  selectionHandleColor?: ?ColorValue,
+
   /**
    * The start and end of the text input's selection. Set start and end to
    * the same value to position the cursor.
@@ -470,9 +519,34 @@ export type NativeProps = $ReadOnly<{|
    * multiline fields. Note that for multiline fields, setting `blurOnSubmit`
    * to `true` means that pressing return will blur the field and trigger the
    * `onSubmitEditing` event instead of inserting a newline into the field.
+   *
+   * @deprecated
+   * Note that `submitBehavior` now takes the place of `blurOnSubmit` and will
+   * override any behavior defined by `blurOnSubmit`.
+   * @see submitBehavior
    */
   blurOnSubmit?: ?boolean,
 
+  /**
+   * When the return key is pressed,
+   *
+   * For single line inputs:
+   *
+   * - `'newline`' defaults to `'blurAndSubmit'`
+   * - `undefined` defaults to `'blurAndSubmit'`
+   *
+   * For multiline inputs:
+   *
+   * - `'newline'` adds a newline
+   * - `undefined` defaults to `'newline'`
+   *
+   * For both single line and multiline inputs:
+   *
+   * - `'submit'` will only send a submit event and not blur the input
+   * - `'blurAndSubmit`' will both blur the input and send a submit event
+   */
+  submitBehavior?: ?SubmitBehavior,
+
   /**
    * Note that not all Text styles are supported, an incomplete list of what is not supported includes:
    *
@@ -540,42 +614,138 @@ export type NativeProps = $ReadOnly<{|
 
 type NativeType = HostComponent<NativeProps>;
 
-interface NativeCommands {
-  +focus: (viewRef: React.ElementRef<NativeType>) => void;
-  +blur: (viewRef: React.ElementRef<NativeType>) => void;
-  +setMostRecentEventCount: (
-    viewRef: React.ElementRef<NativeType>,
-    eventCount: Int32,
-  ) => void;
-  +setTextAndSelection: (
-    viewRef: React.ElementRef<NativeType>,
-    mostRecentEventCount: Int32,
-    value: ?string, // in theory this is nullable
-    start: Int32,
-    end: Int32,
-  ) => void;
-}
+type NativeCommands = TextInputNativeCommands<NativeType>;
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: [
-    'focus',
-    'blur',
-    'setMostRecentEventCount',
-    'setTextAndSelection',
-  ],
+  supportedCommands: ['focus', 'blur', 'setTextAndSelection'],
 });
 
-let AndroidTextInputNativeComponent;
-if (global.RN$Bridgeless) {
-  ReactNativeViewConfigRegistry.register('AndroidTextInput', () => {
-    return AndroidTextInputViewConfig;
-  });
-  AndroidTextInputNativeComponent = 'AndroidTextInput';
-} else {
-  AndroidTextInputNativeComponent = requireNativeComponent<NativeProps>(
-    'AndroidTextInput',
-  );
-}
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
+  uiViewClassName: 'AndroidTextInput',
+  bubblingEventTypes: {
+    topBlur: {
+      phasedRegistrationNames: {
+        bubbled: 'onBlur',
+        captured: 'onBlurCapture',
+      },
+    },
+    topEndEditing: {
+      phasedRegistrationNames: {
+        bubbled: 'onEndEditing',
+        captured: 'onEndEditingCapture',
+      },
+    },
+    topFocus: {
+      phasedRegistrationNames: {
+        bubbled: 'onFocus',
+        captured: 'onFocusCapture',
+      },
+    },
+    topKeyPress: {
+      phasedRegistrationNames: {
+        bubbled: 'onKeyPress',
+        captured: 'onKeyPressCapture',
+      },
+    },
+    topSubmitEditing: {
+      phasedRegistrationNames: {
+        bubbled: 'onSubmitEditing',
+        captured: 'onSubmitEditingCapture',
+      },
+    },
+  },
+  directEventTypes: {
+    topScroll: {
+      registrationName: 'onScroll',
+    },
+  },
+  validAttributes: {
+    maxFontSizeMultiplier: true,
+    adjustsFontSizeToFit: true,
+    minimumFontScale: true,
+    autoFocus: true,
+    placeholder: true,
+    inlineImagePadding: true,
+    contextMenuHidden: true,
+    textShadowColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    maxLength: true,
+    selectTextOnFocus: true,
+    textShadowRadius: true,
+    underlineColorAndroid: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    textDecorationLine: true,
+    submitBehavior: true,
+    textAlignVertical: true,
+    fontStyle: true,
+    textShadowOffset: true,
+    selectionColor: {process: require('../../StyleSheet/processColor').default},
+    selectionHandleColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    placeholderTextColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    importantForAutofill: true,
+    lineHeight: true,
+    textTransform: true,
+    returnKeyType: true,
+    keyboardType: true,
+    multiline: true,
+    color: {process: require('../../StyleSheet/processColor').default},
+    autoComplete: true,
+    numberOfLines: true,
+    letterSpacing: true,
+    returnKeyLabel: true,
+    fontSize: true,
+    onKeyPress: true,
+    cursorColor: {process: require('../../StyleSheet/processColor').default},
+    text: true,
+    showSoftInputOnFocus: true,
+    textAlign: true,
+    autoCapitalize: true,
+    autoCorrect: true,
+    caretHidden: true,
+    secureTextEntry: true,
+    textBreakStrategy: true,
+    onScroll: true,
+    onContentSizeChange: true,
+    disableFullscreenUI: true,
+    includeFontPadding: true,
+    fontWeight: true,
+    fontFamily: true,
+    allowFontScaling: true,
+    onSelectionChange: true,
+    mostRecentEventCount: true,
+    inlineImageLeft: true,
+    editable: true,
+    fontVariant: true,
+    borderBottomRightRadius: true,
+    borderBottomColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    borderRadius: true,
+    borderRightColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    borderColor: {process: require('../../StyleSheet/processColor').default},
+    borderTopRightRadius: true,
+    borderStyle: true,
+    borderBottomLeftRadius: true,
+    borderLeftColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    borderTopLeftRadius: true,
+    borderTopColor: {process: require('../../StyleSheet/processColor').default},
+  },
+};
+
+let AndroidTextInputNativeComponent = NativeComponentRegistry.get<NativeProps>(
+  'AndroidTextInput',
+  () => __INTERNAL_VIEW_CONFIG,
+);
 
 // flowlint-next-line unclear-type:off
 export default ((AndroidTextInputNativeComponent: any): HostComponent<NativeProps>);

package/Libraries/Components/TextInput/InputAccessoryView.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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 {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
+import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
+
+/**
+ * A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is
+ * displayed above the keyboard whenever a TextInput has focus. This component can be used to create custom toolbars.
+ *
+ * To use this component wrap your custom toolbar with the InputAccessoryView component, and set a nativeID. Then, pass
+ * that nativeID as the inputAccessoryViewID of whatever TextInput you desire.
+ */
+export class InputAccessoryView extends React.Component<InputAccessoryViewProps> {}
+
+export interface InputAccessoryViewProps {
+  backgroundColor?: ColorValue | undefined;
+
+  children?: React.ReactNode | undefined;
+
+  /**
+   * An ID which is used to associate this InputAccessoryView to specified TextInput(s).
+   */
+  nativeID?: string | undefined;
+
+  style?: StyleProp<ViewStyle> | undefined;
+}

package/Libraries/Components/TextInput/InputAccessoryView.js

@@ -1,23 +1,22 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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
+ * @flow strict-local
  * @format
  */
 
-'use strict';
-
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
+import StyleSheet, {
+  type ColorValue,
+  type ViewStyleProp,
+} from '../../StyleSheet/StyleSheet';
+import Platform from '../../Utilities/Platform';
+import useWindowDimensions from '../../Utilities/useWindowDimensions';
 import RCTInputAccessoryViewNativeComponent from './RCTInputAccessoryViewNativeComponent';
-
-import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import * as React from 'react';
 
 /**
  * Note: iOS only
@@ -88,31 +87,37 @@ type Props = $ReadOnly<{|
   backgroundColor?: ?ColorValue,
 |}>;
 
-class InputAccessoryView extends React.Component<Props> {
-  render(): React.Node {
-    if (Platform.OS !== 'ios') {
-      console.warn('<InputAccessoryView> is only supported on iOS.');
-    }
+const InputAccessoryView: React.ComponentType<Props> = (props: Props) => {
+  const {width} = useWindowDimensions();
 
-    if (React.Children.count(this.props.children) === 0) {
+  if (Platform.OS === 'ios') {
+    if (React.Children.count(props.children) === 0) {
       return null;
     }
 
     return (
       <RCTInputAccessoryViewNativeComponent
-        style={[this.props.style, styles.container]}
-        nativeID={this.props.nativeID}
-        backgroundColor={this.props.backgroundColor}>
-        {this.props.children}
+        style={[props.style, styles.container]}
+        nativeID={props.nativeID}
+        backgroundColor={props.backgroundColor}>
+        <SafeAreaView style={[styles.safeAreaView, {width}]}>
+          {props.children}
+        </SafeAreaView>
       </RCTInputAccessoryViewNativeComponent>
     );
+  } else {
+    console.warn('<InputAccessoryView> is only supported on iOS.');
+    return null;
   }
-}
+};
 
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
   },
+  safeAreaView: {
+    flex: 1,
+  },
 });
 
-module.exports = InputAccessoryView;
+export default InputAccessoryView;

package/Libraries/Components/TextInput/RCTInputAccessoryViewNativeComponent.js

@@ -1,26 +1,13 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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
+ * @flow strict-local
  */
 
-'use strict';
-
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
-
-import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-
-type NativeProps = $ReadOnly<{|
-  ...ViewProps,
-  backgroundColor?: ?ColorValue,
-|}>;
-
-export default (codegenNativeComponent<NativeProps>(
-  'RCTInputAccessoryView',
-): HostComponent<NativeProps>);
+export * from '../../../src/private/specs/components/RCTInputAccessoryViewNativeComponent';
+import RCTInputAccessoryViewNativeComponent from '../../../src/private/specs/components/RCTInputAccessoryViewNativeComponent';
+export default RCTInputAccessoryViewNativeComponent;

package/Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -8,43 +8,38 @@
  * @format
  */
 
-'use strict';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
+import type {TextInputNativeCommands} from './TextInputNativeCommands';
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import requireNativeComponent from '../../ReactNative/requireNativeComponent';
+import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
-import type {Int32} from '../../Types/CodegenTypes';
-import * as React from 'react';
-
-type NativeType = HostComponent<mixed>;
-
-interface NativeCommands {
-  +focus: (viewRef: React.ElementRef<NativeType>) => void;
-  +blur: (viewRef: React.ElementRef<NativeType>) => void;
-  +setMostRecentEventCount: (
-    viewRef: React.ElementRef<NativeType>,
-    eventCount: Int32,
-  ) => void;
-  +setTextAndSelection: (
-    viewRef: React.ElementRef<NativeType>,
-    mostRecentEventCount: Int32,
-    value: ?string, // in theory this is nullable
-    start: Int32,
-    end: Int32,
-  ) => void;
-}
+import RCTTextInputViewConfig from './RCTTextInputViewConfig';
+
+type NativeType = HostComponent<{...}>;
+
+type NativeCommands = TextInputNativeCommands<NativeType>;
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: [
-    'focus',
-    'blur',
-    'setMostRecentEventCount',
-    'setTextAndSelection',
-  ],
+  supportedCommands: ['focus', 'blur', 'setTextAndSelection'],
 });
 
-const SinglelineTextInputNativeComponent: HostComponent<mixed> = requireNativeComponent<mixed>(
-  'RCTMultilineTextInputView',
-);
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
+  uiViewClassName: 'RCTMultilineTextInputView',
+  ...RCTTextInputViewConfig,
+  validAttributes: {
+    ...RCTTextInputViewConfig.validAttributes,
+    dataDetectorTypes: true,
+  },
+};
+
+const MultilineTextInputNativeComponent: HostComponent<{...}> =
+  NativeComponentRegistry.get<{...}>(
+    'RCTMultilineTextInputView',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
 
-export default SinglelineTextInputNativeComponent;
+// flowlint-next-line unclear-type:off
+export default ((MultilineTextInputNativeComponent: any): HostComponent<{...}>);