@office-iss/react-native-win32 0.0.0-canary.288 → 0.0.0-canary.289

package/Libraries/Components/TextInput/TextInput.js

@@ -18,7 +18,6 @@ import type {
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {TextInputInstance, TextInputType} from './TextInput.flow';
 
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import usePressability from '../../Pressability/usePressability';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import StyleSheet, {
@@ -58,6 +57,9 @@ if (Platform.OS === 'android') {
     require('./RCTMultilineTextInputNativeComponent').Commands;
 }
 
+/**
+ * @see TextInputProps.onChange
+ */
 export type TextInputChangeEventData = $ReadOnly<{
   eventCount: number,
   target: number,
@@ -80,6 +82,9 @@ export type TextInputEvent = NativeSyntheticEvent<
   }>,
 >;
 
+/**
+ * @see TextInputProps.onContentSizeChange
+ */
 export type TextInputContentSizeChangeEventData = $ReadOnly<{
   target: number,
   contentSize: $ReadOnly<{
@@ -95,16 +100,29 @@ export type TargetEvent = $ReadOnly<{
   target: number,
 }>;
 
+/**
+ * @see TextInputProps.onFocus
+ */
 export type TextInputFocusEventData = TargetEvent;
 
 export type TextInputBlurEvent = NativeSyntheticEvent<TextInputFocusEventData>;
 export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
 
+/**
+ * @see TextInputProps.onScroll
+ */
+export type TextInputScrollEventData = {
+  contentOffset: {x: number, y: number},
+};
+
 type Selection = $ReadOnly<{
   start: number,
   end: number,
 }>;
 
+/**
+ * @see TextInputProps.onSelectionChange
+ */
 export type TextInputSelectionChangeEventData = $ReadOnly<{
   ...TargetEvent,
   selection: Selection,
@@ -113,7 +131,10 @@ export type TextInputSelectionChangeEventData = $ReadOnly<{
 export type TextInputSelectionChangeEvent =
   NativeSyntheticEvent<TextInputSelectionChangeEventData>;
 
-type TextInputKeyPressEventData = $ReadOnly<{
+/**
+ * @see TextInputProps.onKeyPress
+ */
+export type TextInputKeyPressEventData = $ReadOnly<{
   ...TargetEvent,
   key: string,
   target?: ?number,
@@ -123,12 +144,30 @@ type TextInputKeyPressEventData = $ReadOnly<{
 export type TextInputKeyPressEvent =
   NativeSyntheticEvent<TextInputKeyPressEventData>;
 
+/**
+ * @see TextInputProps.onEndEditing
+ */
 export type TextInputEndEditingEventData = $ReadOnly<{
   ...TargetEvent,
   eventCount: number,
   text: string,
 }>;
 
+export type TextInputEndEditingEvent =
+  NativeSyntheticEvent<TextInputEndEditingEventData>;
+
+/**
+ * @see TextInputProps.onSubmitEditing
+ */
+export type TextInputSubmitEditingEventData = $ReadOnly<{
+  ...TargetEvent,
+  eventCount: number,
+  text: string,
+}>;
+
+export type TextInputSubmitEditingEvent =
+  NativeSyntheticEvent<TextInputSubmitEditingEventData>;
+
 export type TextInputEditingEvent =
   NativeSyntheticEvent<TextInputEndEditingEventData>;
 
@@ -419,6 +458,21 @@ export type TextInputAndroidProps = $ReadOnly<{
    */
   disableFullscreenUI?: ?boolean,
 
+  /**
+   * Determines whether the individual fields in your app should be included in a
+   * view structure for autofill purposes on Android API Level 26+. Defaults to auto.
+   * To disable auto complete, use `off`.
+   *
+   * *Android Only*
+   *
+   * The following values work on Android only:
+   *
+   * - `auto` - let Android decide
+   * - `no` - not important for autofill
+   * - `noExcludeDescendants` - this view and its children aren't important for autofill
+   * - `yes` - is important for autofill
+   * - `yesExcludeDescendants` - this view is important for autofill but its children aren't
+   */
   importantForAutofill?: ?(
     | 'auto'
     | 'no'
@@ -486,11 +540,7 @@ export type TextInputAndroidProps = $ReadOnly<{
   underlineColorAndroid?: ?ColorValue,
 }>;
 
-export type TextInputProps = $ReadOnly<{
-  ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
-  ...TextInputIOSProps,
-  ...TextInputAndroidProps,
-
+type TextInputBaseProps = $ReadOnly<{
   /**
    * Can tell `TextInput` to automatically capitalize certain characters.
    *
@@ -792,7 +842,7 @@ export type TextInputProps = $ReadOnly<{
   /**
    * Callback that is called when text input ends.
    */
-  onEndEditing?: ?(e: TextInputEditingEvent) => mixed,
+  onEndEditing?: ?(e: TextInputEndEditingEvent) => mixed,
 
   /**
    * Callback that is called when the text input is focused.
@@ -834,7 +884,7 @@ export type TextInputProps = $ReadOnly<{
    * Callback that is called when the text input's submit button is pressed.
    * Invalid if `multiline={true}` is specified.
    */
-  onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed,
+  onSubmitEditing?: ?(e: TextInputSubmitEditingEvent) => mixed,
 
   /**
    * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
@@ -915,7 +965,9 @@ export type TextInputProps = $ReadOnly<{
   selectionColor?: ?ColorValue,
 
   /**
-   * The text selection handle color.
+   * When provided it will set the color of the selection handles when highlighting text.
+   * Unlike the behavior of `selectionColor` the handle color will be set independently
+   * from the color of the text selection box.
    * @platform android
    */
   selectionHandleColor?: ?ColorValue,
@@ -990,6 +1042,42 @@ export type TextInputProps = $ReadOnly<{
   value?: ?Stringish,
 }>;
 
+export type TextInputProps = $ReadOnly<{
+  ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
+  ...TextInputIOSProps,
+  ...TextInputAndroidProps,
+  ...TextInputBaseProps,
+}>;
+
+type TextInputStateType = $ReadOnly<{
+  /**
+   * @deprecated Use currentlyFocusedInput
+   * Returns the ID of the currently focused text field, if one exists
+   * If no text field is focused it returns null
+   */
+  currentlyFocusedField: () => ?number,
+
+  /**
+   * Returns the ref of the currently focused text field, if one exists
+   * If no text field is focused it returns null
+   */
+  currentlyFocusedInput: () => ?HostInstance,
+
+  /**
+   * @param textField ref of the text field to focus
+   * Focuses the specified text field
+   * noop if the text field was already focused
+   */
+  focusTextInput: (textField: ?HostInstance) => void,
+
+  /**
+   * @param textField ref of the text field to focus
+   * Unfocuses the specified text field
+   * noop if it wasn't focused
+   */
+  blurTextInput: (textField: ?HostInstance) => void,
+}>;
+
 type ViewCommands = $NonMaybeType<
   | typeof AndroidTextInputCommands
   | typeof RCTMultilineTextInputNativeCommands
@@ -1008,7 +1096,7 @@ const emptyFunctionThatReturnsTrue = () => true;
  * in native and in JavaScript. This is necessary due to the asynchronous nature
  * of text input events.
  */
-function useTextInputStateSynchronization_STATE({
+function useTextInputStateSynchronization({
   props,
   mostRecentEventCount,
   selection,
@@ -1084,94 +1172,6 @@ function useTextInputStateSynchronization_STATE({
   return {setLastNativeText, setLastNativeSelection};
 }
 
-/**
- * This hook handles the synchronization between the state of the text input
- * in native and in JavaScript. This is necessary due to the asynchronous nature
- * of text input events.
- */
-function useTextInputStateSynchronization_REFS({
-  props,
-  mostRecentEventCount,
-  selection,
-  inputRef,
-  text,
-  viewCommands,
-}: {
-  props: TextInputProps,
-  mostRecentEventCount: number,
-  selection: ?Selection,
-  inputRef: React.RefObject<null | TextInputInstance>,
-  text?: string,
-  viewCommands: ViewCommands,
-}): {
-  setLastNativeText: string => void,
-  setLastNativeSelection: LastNativeSelection => void,
-} {
-  const lastNativeTextRef = useRef<?Stringish>(props.value);
-  const lastNativeSelectionRef = useRef<LastNativeSelection>({
-    selection: {start: -1, end: -1},
-    mostRecentEventCount: mostRecentEventCount,
-  });
-
-  // This is necessary in case native updates the text and JS decides
-  // that the update should be ignored and we should stick with the value
-  // that we have in JS.
-  useLayoutEffect(() => {
-    const nativeUpdate: {text?: string, selection?: Selection} = {};
-
-    const lastNativeSelection = lastNativeSelectionRef.current.selection;
-
-    if (
-      lastNativeTextRef.current !== props.value &&
-      typeof props.value === 'string'
-    ) {
-      nativeUpdate.text = props.value;
-      lastNativeTextRef.current = props.value;
-    }
-
-    if (
-      selection &&
-      lastNativeSelection &&
-      (lastNativeSelection.start !== selection.start ||
-        lastNativeSelection.end !== selection.end)
-    ) {
-      nativeUpdate.selection = selection;
-      lastNativeSelectionRef.current = {selection, mostRecentEventCount};
-    }
-
-    if (Object.keys(nativeUpdate).length === 0) {
-      return;
-    }
-
-    if (inputRef.current != null) {
-      viewCommands.setTextAndSelection(
-        inputRef.current,
-        mostRecentEventCount,
-        text,
-        selection?.start ?? -1,
-        selection?.end ?? -1,
-      );
-    }
-  }, [
-    mostRecentEventCount,
-    inputRef,
-    props.value,
-    props.defaultValue,
-    selection,
-    text,
-    viewCommands,
-  ]);
-
-  return {
-    setLastNativeText: lastNativeText => {
-      lastNativeTextRef.current = lastNativeText;
-    },
-    setLastNativeSelection: lastNativeSelection => {
-      lastNativeSelectionRef.current = lastNativeSelection;
-    },
-  };
-}
-
 /**
  * A foundational component for inputting text into the app via a
  * keyboard. Props provide configurability for several features, such as
@@ -1324,10 +1324,6 @@ function InternalTextInput(props: TextInputProps): React.Node {
       : RCTSinglelineTextInputNativeCommands);
 
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-  const useTextInputStateSynchronization =
-    ReactNativeFeatureFlags.useRefsForTextInputState()
-      ? useTextInputStateSynchronization_REFS
-      : useTextInputStateSynchronization_STATE;
   const {setLastNativeText, setLastNativeSelection} =
     useTextInputStateSynchronization({
       props,
@@ -1806,7 +1802,7 @@ const autoCompleteWebToTextContentTypeMap = {
 };
 
 const ExportedForwardRef: component(
-  ref: React.RefSetter<TextInputInstance>,
+  ref?: React.RefSetter<TextInputInstance>,
   ...props: React.ElementConfig<typeof InternalTextInput>
 ) = React.forwardRef(function TextInput(
   {
@@ -1878,12 +1874,7 @@ ExportedForwardRef.State = {
 };
 
 export type TextInputComponentStatics = $ReadOnly<{
-  State: $ReadOnly<{
-    currentlyFocusedInput: typeof TextInputState.currentlyFocusedInput,
-    currentlyFocusedField: typeof TextInputState.currentlyFocusedField,
-    focusTextInput: typeof TextInputState.focusTextInput,
-    blurTextInput: typeof TextInputState.blurTextInput,
-  }>,
+  State: TextInputStateType,
 }>;
 
 const styles = StyleSheet.create({

package/Libraries/Components/TextInput/TextInput.win32.js

@@ -18,7 +18,6 @@ import type {
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {TextInputInstance, TextInputType} from './TextInput.flow';
 
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import usePressability from '../../Pressability/usePressability';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import StyleSheet, {
@@ -69,6 +68,9 @@ else if (Platform.OS === 'win32') {
 }
 // Windows]
 
+/**
+ * @see TextInputProps.onChange
+ */
 export type TextInputChangeEventData = $ReadOnly<{
   eventCount: number,
   target: number,
@@ -91,6 +93,9 @@ export type TextInputEvent = NativeSyntheticEvent<
   }>,
 >;
 
+/**
+ * @see TextInputProps.onContentSizeChange
+ */
 export type TextInputContentSizeChangeEventData = $ReadOnly<{
   target: number,
   contentSize: $ReadOnly<{
@@ -106,16 +111,29 @@ export type TargetEvent = $ReadOnly<{
   target: number,
 }>;
 
+/**
+ * @see TextInputProps.onFocus
+ */
 export type TextInputFocusEventData = TargetEvent;
 
 export type TextInputBlurEvent = NativeSyntheticEvent<TextInputFocusEventData>;
 export type TextInputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
 
+/**
+ * @see TextInputProps.onScroll
+ */
+export type TextInputScrollEventData = {
+  contentOffset: {x: number, y: number},
+};
+
 type Selection = $ReadOnly<{
   start: number,
   end: number,
 }>;
 
+/**
+ * @see TextInputProps.onSelectionChange
+ */
 export type TextInputSelectionChangeEventData = $ReadOnly<{
   ...TargetEvent,
   selection: Selection,
@@ -124,7 +142,10 @@ export type TextInputSelectionChangeEventData = $ReadOnly<{
 export type TextInputSelectionChangeEvent =
   NativeSyntheticEvent<TextInputSelectionChangeEventData>;
 
-type TextInputKeyPressEventData = $ReadOnly<{
+/**
+ * @see TextInputProps.onKeyPress
+ */
+export type TextInputKeyPressEventData = $ReadOnly<{
   ...TargetEvent,
   key: string,
   target?: ?number,
@@ -134,12 +155,30 @@ type TextInputKeyPressEventData = $ReadOnly<{
 export type TextInputKeyPressEvent =
   NativeSyntheticEvent<TextInputKeyPressEventData>;
 
+/**
+ * @see TextInputProps.onEndEditing
+ */
 export type TextInputEndEditingEventData = $ReadOnly<{
   ...TargetEvent,
   eventCount: number,
   text: string,
 }>;
 
+export type TextInputEndEditingEvent =
+  NativeSyntheticEvent<TextInputEndEditingEventData>;
+
+/**
+ * @see TextInputProps.onSubmitEditing
+ */
+export type TextInputSubmitEditingEventData = $ReadOnly<{
+  ...TargetEvent,
+  eventCount: number,
+  text: string,
+}>;
+
+export type TextInputSubmitEditingEvent =
+  NativeSyntheticEvent<TextInputSubmitEditingEventData>;
+
 export type TextInputEditingEvent =
   NativeSyntheticEvent<TextInputEndEditingEventData>;
 
@@ -427,6 +466,21 @@ export type TextInputAndroidProps = $ReadOnly<{
    */
   disableFullscreenUI?: ?boolean,
 
+  /**
+   * Determines whether the individual fields in your app should be included in a
+   * view structure for autofill purposes on Android API Level 26+. Defaults to auto.
+   * To disable auto complete, use `off`.
+   *
+   * *Android Only*
+   *
+   * The following values work on Android only:
+   *
+   * - `auto` - let Android decide
+   * - `no` - not important for autofill
+   * - `noExcludeDescendants` - this view and its children aren't important for autofill
+   * - `yes` - is important for autofill
+   * - `yesExcludeDescendants` - this view is important for autofill but its children aren't
+   */
   importantForAutofill?: ?(
     | 'auto'
     | 'no'
@@ -520,12 +574,7 @@ type TextInputWindowsProps = $ReadOnly<{|
 
 // Windows]
 
-export type TextInputProps = $ReadOnly<{
-  ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
-  ...TextInputIOSProps,
-  ...TextInputAndroidProps,
-  ...TextInputWindowsProps, // [Windows]
-
+type TextInputBaseProps = $ReadOnly<{
   /**
    * String to be read by screenreaders to indicate an error state. The acceptable parameters
    * of accessibilityErrorMessage is a string. Setting accessibilityInvalid to true activates
@@ -835,7 +884,7 @@ export type TextInputProps = $ReadOnly<{
   /**
    * Callback that is called when text input ends.
    */
-  onEndEditing?: ?(e: TextInputEditingEvent) => mixed,
+  onEndEditing?: ?(e: TextInputEndEditingEvent) => mixed,
 
   /**
    * Callback that is called when the text input is focused.
@@ -877,7 +926,7 @@ export type TextInputProps = $ReadOnly<{
    * Callback that is called when the text input's submit button is pressed.
    * Invalid if `multiline={true}` is specified.
    */
-  onSubmitEditing?: ?(e: TextInputEditingEvent) => mixed,
+  onSubmitEditing?: ?(e: TextInputSubmitEditingEvent) => mixed,
 
   /**
    * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
@@ -958,7 +1007,9 @@ export type TextInputProps = $ReadOnly<{
   selectionColor?: ?ColorValue,
 
   /**
-   * The text selection handle color.
+   * When provided it will set the color of the selection handles when highlighting text.
+   * Unlike the behavior of `selectionColor` the handle color will be set independently
+   * from the color of the text selection box.
    * @platform android
    */
   selectionHandleColor?: ?ColorValue,
@@ -1033,6 +1084,43 @@ export type TextInputProps = $ReadOnly<{
   value?: ?Stringish,
 }>;
 
+export type TextInputProps = $ReadOnly<{
+  ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
+  ...TextInputIOSProps,
+  ...TextInputAndroidProps,
+  ...TextInputBaseProps,
+  ...TextInputWindowsProps, // [Windows]
+}>;
+
+type TextInputStateType = $ReadOnly<{
+  /**
+   * @deprecated Use currentlyFocusedInput
+   * Returns the ID of the currently focused text field, if one exists
+   * If no text field is focused it returns null
+   */
+  currentlyFocusedField: () => ?number,
+
+  /**
+   * Returns the ref of the currently focused text field, if one exists
+   * If no text field is focused it returns null
+   */
+  currentlyFocusedInput: () => ?HostInstance,
+
+  /**
+   * @param textField ref of the text field to focus
+   * Focuses the specified text field
+   * noop if the text field was already focused
+   */
+  focusTextInput: (textField: ?HostInstance) => void,
+
+  /**
+   * @param textField ref of the text field to focus
+   * Unfocuses the specified text field
+   * noop if it wasn't focused
+   */
+  blurTextInput: (textField: ?HostInstance) => void,
+}>;
+
 type ViewCommands = $NonMaybeType<
   | typeof AndroidTextInputCommands
   | typeof RCTMultilineTextInputNativeCommands
@@ -1051,7 +1139,7 @@ const emptyFunctionThatReturnsTrue = () => true;
  * in native and in JavaScript. This is necessary due to the asynchronous nature
  * of text input events.
  */
-function useTextInputStateSynchronization_STATE({
+function useTextInputStateSynchronization({
   props,
   mostRecentEventCount,
   selection,
@@ -1127,94 +1215,6 @@ function useTextInputStateSynchronization_STATE({
   return {setLastNativeText, setLastNativeSelection};
 }
 
-/**
- * This hook handles the synchronization between the state of the text input
- * in native and in JavaScript. This is necessary due to the asynchronous nature
- * of text input events.
- */
-function useTextInputStateSynchronization_REFS({
-  props,
-  mostRecentEventCount,
-  selection,
-  inputRef,
-  text,
-  viewCommands,
-}: {
-  props: TextInputProps,
-  mostRecentEventCount: number,
-  selection: ?Selection,
-  inputRef: React.RefObject<null | TextInputInstance>,
-  text?: string,
-  viewCommands: ViewCommands,
-}): {
-  setLastNativeText: string => void,
-  setLastNativeSelection: LastNativeSelection => void,
-} {
-  const lastNativeTextRef = useRef<?Stringish>(props.value);
-  const lastNativeSelectionRef = useRef<LastNativeSelection>({
-    selection: {start: -1, end: -1},
-    mostRecentEventCount: mostRecentEventCount,
-  });
-
-  // This is necessary in case native updates the text and JS decides
-  // that the update should be ignored and we should stick with the value
-  // that we have in JS.
-  useLayoutEffect(() => {
-    const nativeUpdate: {text?: string, selection?: Selection} = {};
-
-    const lastNativeSelection = lastNativeSelectionRef.current.selection;
-
-    if (
-      lastNativeTextRef.current !== props.value &&
-      typeof props.value === 'string'
-    ) {
-      nativeUpdate.text = props.value;
-      lastNativeTextRef.current = props.value;
-    }
-
-    if (
-      selection &&
-      lastNativeSelection &&
-      (lastNativeSelection.start !== selection.start ||
-        lastNativeSelection.end !== selection.end)
-    ) {
-      nativeUpdate.selection = selection;
-      lastNativeSelectionRef.current = {selection, mostRecentEventCount};
-    }
-
-    if (Object.keys(nativeUpdate).length === 0) {
-      return;
-    }
-
-    if (inputRef.current != null) {
-      viewCommands.setTextAndSelection(
-        inputRef.current,
-        mostRecentEventCount,
-        text,
-        selection?.start ?? -1,
-        selection?.end ?? -1,
-      );
-    }
-  }, [
-    mostRecentEventCount,
-    inputRef,
-    props.value,
-    props.defaultValue,
-    selection,
-    text,
-    viewCommands,
-  ]);
-
-  return {
-    setLastNativeText: lastNativeText => {
-      lastNativeTextRef.current = lastNativeText;
-    },
-    setLastNativeSelection: lastNativeSelection => {
-      lastNativeSelectionRef.current = lastNativeSelection;
-    },
-  };
-}
-
 /**
  * A foundational component for inputting text into the app via a
  * keyboard. Props provide configurability for several features, such as
@@ -1370,10 +1370,6 @@ function InternalTextInput(props: TextInputProps): React.Node {
       : RCTSinglelineTextInputNativeCommands);
 
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-  const useTextInputStateSynchronization =
-    ReactNativeFeatureFlags.useRefsForTextInputState()
-      ? useTextInputStateSynchronization_REFS
-      : useTextInputStateSynchronization_STATE;
   const {setLastNativeText, setLastNativeSelection} =
     useTextInputStateSynchronization({
       props,
@@ -1947,7 +1943,7 @@ const autoCompleteWebToTextContentTypeMap = {
 };
 
 const ExportedForwardRef: component(
-  ref: React.RefSetter<TextInputInstance>,
+  ref?: React.RefSetter<TextInputInstance>,
   ...props: React.ElementConfig<typeof InternalTextInput>
 ) = React.forwardRef(function TextInput(
   {
@@ -2018,12 +2014,7 @@ ExportedForwardRef.State = {
 };
 
 export type TextInputComponentStatics = $ReadOnly<{
-  State: $ReadOnly<{
-    currentlyFocusedInput: typeof TextInputState.currentlyFocusedInput,
-    currentlyFocusedField: typeof TextInputState.currentlyFocusedField,
-    focusTextInput: typeof TextInputState.focusTextInput,
-    blurTextInput: typeof TextInputState.blurTextInput,
-  }>,
+  State: TextInputStateType,
 }>;
 
 const styles = StyleSheet.create({

package/Libraries/Components/Touchable/Tests/TouchableWin32Test.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 export declare const displayName = "TouchableWin32 Examples";
 export declare const title = "TouchableWin32";
 export declare const description = "Demonstration of touchable + focus + hover behavior all in one component";
 export declare const examples: {
     title: string;
     description: string;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }[];