@office-iss/react-native-win32 0.71.5 → 0.72.0-preview.1

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -60,21 +60,31 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderRadius: true,
           nestedScrollEnabled: true,
           borderStyle: true,
-          borderRightColor: {process: require('../../StyleSheet/processColor')},
-          borderColor: {process: require('../../StyleSheet/processColor')},
+          borderRightColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           borderBottomColor: {
-            process: require('../../StyleSheet/processColor'),
+            process: require('../../StyleSheet/processColor').default,
           },
           persistentScrollbar: true,
-          endFillColor: {process: require('../../StyleSheet/processColor')},
+          endFillColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           fadingEdgeLength: true,
           overScrollMode: true,
           borderTopLeftRadius: true,
           scrollPerfTag: true,
-          borderTopColor: {process: require('../../StyleSheet/processColor')},
+          borderTopColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           removeClippedSubviews: true,
           borderTopRightRadius: true,
-          borderLeftColor: {process: require('../../StyleSheet/processColor')},
+          borderLeftColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           pointerEvents: true,
         },
       }

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -11,6 +11,7 @@
 import type {LayoutEvent} from '../../Types/CoreEventTypes';
 
 import Animated from '../../Animated/Animated';
+import {isPublicInstance as isFabricPublicInstance} from '../../Renderer/public/ReactFabricPublicInstanceUtils';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
@@ -64,10 +65,7 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
     ref.setNextHeaderY = value => {
       setNextHeaderLayoutY(value);
     };
-    // Avoid dot notation because at Meta, private properties are obfuscated.
-    // $FlowFixMe[prop-missing]
-    const _internalInstanceHandler = ref['_internalInstanceHandle']; // eslint-disable-line dot-notation
-    setIsFabric(Boolean(_internalInstanceHandler?.stateNode?.canonical));
+    setIsFabric(isFabricPublicInstance(ref));
   };
   const ref: (React.ElementRef<typeof Animated.View> | null) => void =
     // $FlowFixMe[incompatible-type] - Ref is mutated by `callbackRef`.
@@ -134,7 +132,7 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
   //    platform to JS, so we need the ShadowTree to have knowledge
   //    of the current position.
   const animatedValueListener = useCallback(
-    ({value}) => {
+    ({value}: $FlowFixMe) => {
       const _debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
       // When the AnimatedInterpolation is recreated, it always initializes
       // to a value of zero and emits a value change of 0 to its listeners.
@@ -256,13 +254,13 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
     setMeasured(true);
 
     props.onLayout(event);
-    const child = React.Children.only(props.children);
+    const child = React.Children.only<$FlowFixMe>(props.children);
     if (child.props.onLayout) {
       child.props.onLayout(event);
     }
   };
 
-  const child = React.Children.only(props.children);
+  const child = React.Children.only<$FlowFixMe>(props.children);
 
   // TODO T68319535: remove this if NativeAnimated is rewritten for Fabric
   const passthroughAnimatedPropExplicitValues =

package/Libraries/Components/ScrollView/ScrollViewViewConfig.js

@@ -41,7 +41,7 @@ const ScrollViewViewConfig = {
     directionalLockEnabled: true,
     disableIntervalMomentum: true,
     endFillColor: {
-      process: require('../../StyleSheet/processColor'),
+      process: require('../../StyleSheet/processColor').default,
     },
     fadingEdgeLength: true,
     indicatorStyle: true,

package/Libraries/Components/StatusBar/StatusBar.js

@@ -238,9 +238,11 @@ class StatusBar extends React.Component<Props> {
   });
 
   // Timer for updating the native module values at the end of the frame.
+  // $FlowFixMe[missing-local-annot]
   static _updateImmediate = null;
 
   // The current merged values from the props stack.
+  // $FlowFixMe[missing-local-annot]
   static _currentValues = null;
 
   // TODO(janic): Provide a real API to deal with status bar height. See the
@@ -387,6 +389,7 @@ class StatusBar extends React.Component<Props> {
     return newEntry;
   }
 
+  // $FlowFixMe[missing-local-annot]
   _stackEntry = null;
 
   componentDidMount() {

package/Libraries/Components/Switch/Switch.js

@@ -157,10 +157,12 @@ const SwitchWithForwardedRef: React.AbstractComponent<
 
   const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
 
-  const [native, setNative] = React.useState({value: null});
+  const [native, setNative] = React.useState({value: (null: ?boolean)});
 
   const handleChange = (event: SwitchChangeEvent) => {
+    // $FlowFixMe[unused-promise]
     onChange?.(event);
+    // $FlowFixMe[unused-promise]
     onValueChange?.(event.nativeEvent.value);
     setNative({value: event.nativeEvent.value});
   };

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -677,35 +677,39 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     placeholder: true,
     inlineImagePadding: true,
     contextMenuHidden: true,
-    textShadowColor: {process: require('../../StyleSheet/processColor')},
+    textShadowColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     maxLength: true,
     selectTextOnFocus: true,
     textShadowRadius: true,
     underlineColorAndroid: {
-      process: require('../../StyleSheet/processColor'),
+      process: require('../../StyleSheet/processColor').default,
     },
     textDecorationLine: true,
     submitBehavior: true,
     textAlignVertical: true,
     fontStyle: true,
     textShadowOffset: true,
-    selectionColor: {process: require('../../StyleSheet/processColor')},
+    selectionColor: {process: require('../../StyleSheet/processColor').default},
     selection: true,
-    placeholderTextColor: {process: require('../../StyleSheet/processColor')},
+    placeholderTextColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     importantForAutofill: true,
     lineHeight: true,
     textTransform: true,
     returnKeyType: true,
     keyboardType: true,
     multiline: true,
-    color: {process: require('../../StyleSheet/processColor')},
+    color: {process: require('../../StyleSheet/processColor').default},
     autoComplete: true,
     numberOfLines: true,
     letterSpacing: true,
     returnKeyLabel: true,
     fontSize: true,
     onKeyPress: true,
-    cursorColor: {process: require('../../StyleSheet/processColor')},
+    cursorColor: {process: require('../../StyleSheet/processColor').default},
     text: true,
     showSoftInputOnFocus: true,
     textAlign: true,
@@ -727,16 +731,22 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     editable: true,
     fontVariant: true,
     borderBottomRightRadius: true,
-    borderBottomColor: {process: require('../../StyleSheet/processColor')},
+    borderBottomColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     borderRadius: true,
-    borderRightColor: {process: require('../../StyleSheet/processColor')},
-    borderColor: {process: require('../../StyleSheet/processColor')},
+    borderRightColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    borderColor: {process: require('../../StyleSheet/processColor').default},
     borderTopRightRadius: true,
     borderStyle: true,
     borderBottomLeftRadius: true,
-    borderLeftColor: {process: require('../../StyleSheet/processColor')},
+    borderLeftColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     borderTopLeftRadius: true,
-    borderTopColor: {process: require('../../StyleSheet/processColor')},
+    borderTopColor: {process: require('../../StyleSheet/processColor').default},
   },
 };
 

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

@@ -23,7 +23,7 @@ export class InputAccessoryView extends React.Component<InputAccessoryViewProps>
 export interface InputAccessoryViewProps {
   backgroundColor?: ColorValue | undefined;
 
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
 
   /**
    * An ID which is used to associate this InputAccessoryView to specified TextInput(s).

package/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -116,15 +116,21 @@ const RCTTextInputViewConfig = {
     textShadowRadius: true,
     letterSpacing: true,
     textDecorationStyle: true,
-    textDecorationColor: {process: require('../../StyleSheet/processColor')},
-    color: {process: require('../../StyleSheet/processColor')},
+    textDecorationColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    color: {process: require('../../StyleSheet/processColor').default},
     maxFontSizeMultiplier: true,
-    textShadowColor: {process: require('../../StyleSheet/processColor')},
+    textShadowColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     editable: true,
     inputAccessoryViewID: true,
     caretHidden: true,
     enablesReturnKeyAutomatically: true,
-    placeholderTextColor: {process: require('../../StyleSheet/processColor')},
+    placeholderTextColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     clearButtonMode: true,
     keyboardType: true,
     selection: true,
@@ -132,7 +138,7 @@ const RCTTextInputViewConfig = {
     submitBehavior: true,
     mostRecentEventCount: true,
     scrollEnabled: true,
-    selectionColor: {process: require('../../StyleSheet/processColor')},
+    selectionColor: {process: require('../../StyleSheet/processColor').default},
     contextMenuHidden: true,
     secureTextEntry: true,
     placeholder: true,

package/Libraries/Components/TextInput/TextInput.Types.win32.d.ts

@@ -0,0 +1,51 @@
+import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
+interface IChangePayload {
+    eventCount: number;
+    target: number;
+    text: string;
+}
+export type IChangeEvent = NativeSyntheticEvent<Readonly<IChangePayload>>;
+interface IRange {
+    start: number;
+    end: number;
+}
+interface ITextInputPayload {
+    eventCount: number;
+    previousText: string;
+    range: Readonly<IRange>;
+    target: number;
+    text: number;
+}
+export type ITextInputevent = NativeSyntheticEvent<Readonly<ITextInputPayload>>;
+interface IContentSize {
+    width: number;
+    height: number;
+}
+interface IContentSizeChangePayload {
+    target: number;
+    contentSize: Readonly<IContentSize>;
+}
+export type IContentSizeChangeEvent = NativeSyntheticEvent<Readonly<IContentSizeChangePayload>>;
+export type IBlurEvent = NativeSyntheticEvent<Readonly<TextInputFocusEventData>>;
+export type IFocusEvent = NativeSyntheticEvent<Readonly<TextInputFocusEventData>>;
+export interface ISelection extends IRange {
+}
+interface ISelectionPayload {
+    selection: ISelection;
+    target: number;
+}
+export type ISelectionChangeEvent = NativeSyntheticEvent<Readonly<ISelectionPayload>>;
+interface IKeyPressPayload {
+    key: string;
+    target?: number;
+    eventCount?: number;
+}
+export type IKeyPressEvent = NativeSyntheticEvent<Readonly<IKeyPressPayload>>;
+interface IEditingPayload {
+    eventCount: number;
+    text: string;
+    target: number;
+}
+export type IEditingEvent = NativeSyntheticEvent<Readonly<IEditingPayload>>;
+export type IPasswordRules = string;
+export {};

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TextInput.Types.win32.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.Types.win32.js","sourceRoot":"","sources":["../../../src/Libraries/Components/TextInput/TextInput.Types.win32.ts"],"names":[],"mappings":"","sourcesContent":["import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\n\n// TODO: How do we keep in sync with synthetic events\n\ninterface IChangePayload {\n  eventCount: number;\n  target: number;\n  text: string;\n}\nexport type IChangeEvent = NativeSyntheticEvent<Readonly<IChangePayload>>;\n\ninterface IRange {\n  start: number;\n  end: number;\n}\ninterface ITextInputPayload {\n  eventCount: number;\n  previousText: string;\n  range: Readonly<IRange>;\n  target: number;\n  text: number;\n}\nexport type ITextInputevent = NativeSyntheticEvent<Readonly<ITextInputPayload>>;\n\ninterface IContentSize {\n  width: number;\n  height: number;\n}\ninterface IContentSizeChangePayload {\n  target: number;\n  contentSize: Readonly<IContentSize>;\n}\nexport type IContentSizeChangeEvent = NativeSyntheticEvent<Readonly<IContentSizeChangePayload>>;\n\n// TODO: Why doesn't this guy work\n// interface ITargetPayload {\n//   target: number;\n// }\n\n// type ITargetEvent = NativeSyntheticEvent<Readonly<ITargetPayload>>;\n\nexport type IBlurEvent = NativeSyntheticEvent<Readonly<TextInputFocusEventData>>;\nexport type IFocusEvent = NativeSyntheticEvent<Readonly<TextInputFocusEventData>>;\n\nexport interface ISelection extends IRange { }\ninterface ISelectionPayload {\n  selection: ISelection;\n  target: number;\n}\nexport type ISelectionChangeEvent = NativeSyntheticEvent<Readonly<ISelectionPayload>>;\n\n// TODO: Why is this one diffferent?\ninterface IKeyPressPayload {\n  key: string;\n  target?: number;\n  eventCount?: number;\n}\nexport type IKeyPressEvent = NativeSyntheticEvent<Readonly<IKeyPressPayload>>;\n\ninterface IEditingPayload {\n  eventCount: number;\n  text: string;\n  target: number;\n}\nexport type IEditingEvent = NativeSyntheticEvent<Readonly<IEditingPayload>>;\n\n// TODO: Why do I need this one\nexport type IPasswordRules = string;\n"]}

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

@@ -21,21 +21,21 @@ import {
   NativeTouchEvent,
   TargetedEvent,
 } from '../../Types/CoreEventTypes';
-import {EventEmitter} from '../../vendor/emitter/EventEmitter';
+import EventEmitter from '../../vendor/emitter/EventEmitter';
 import {AccessibilityProps} from '../View/ViewAccessibility';
 import {ViewProps} from '../View/ViewPropTypes';
 
 export type KeyboardType =
   | 'default'
-  | 'email-address'
+  | 'number-pad'
+  | 'decimal-pad'
   | 'numeric'
+  | 'email-address'
   | 'phone-pad'
-  | 'number-pad'
-  | 'decimal-pad';
+  | 'url';
 export type KeyboardTypeIOS =
   | 'ascii-capable'
   | 'numbers-and-punctuation'
-  | 'url'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search';
@@ -272,6 +272,16 @@ export interface TextInputIOSProps {
    * If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true}
    */
   scrollEnabled?: boolean | undefined;
+
+  /**
+   * Set line break strategy on iOS.
+   */
+  lineBreakStrategyIOS?:
+    | 'none'
+    | 'standard'
+    | 'hangul-word'
+    | 'push-out'
+    | undefined;
 }
 
 /**

package/Libraries/Components/TextInput/TextInput.flow.js

@@ -556,7 +556,7 @@ export type Props = $ReadOnly<{|
    * On Android devices manufactured by Xiaomi with Android Q,
    * when keyboardType equals 'email-address'this will be set
    * in native to 'true' to prevent a system related crash. This
-   * will cause cursor to be diabled as a side-effect.
+   * will cause cursor to be disabled as a side-effect.
    *
    */
   caretHidden?: ?boolean,