@office-iss/react-native-win32 0.66.2 → 0.67.0-preview.3

package/Libraries/Animated/components/AnimatedText.js

@@ -15,9 +15,9 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent((Text: $FlowFixMe), {
-  collapsable: false,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(
+  (Text: $FlowFixMe),
+): AnimatedComponentType<
   React.ElementConfig<typeof Text>,
   React.ElementRef<typeof Text>,
 >);

package/Libraries/Animated/components/AnimatedView.js

@@ -15,9 +15,7 @@ const createAnimatedComponent = require('../createAnimatedComponent');
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-module.exports = (createAnimatedComponent(View, {
-  collapsable: true,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(View): AnimatedComponentType<
   React.ElementConfig<typeof View>,
   React.ElementRef<typeof View>,
 >);

package/Libraries/Animated/createAnimatedComponent.js

@@ -39,13 +39,8 @@ export type AnimatedComponentType<
   Instance,
 >;
 
-type AnimatedComponentOptions = {
-  collapsable?: boolean,
-};
-
 function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
   Component: React.AbstractComponent<Props, Instance>,
-  options?: AnimatedComponentOptions,
 ): AnimatedComponentType<Props, Instance> {
   invariant(
     typeof Component !== 'function' ||
@@ -210,39 +205,13 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
         this.props.passthroughAnimatedPropExplicitValues || {};
       const mergedStyle = {...style, ...passthruStyle};
 
-      // On Fabric, we always want to ensure the container Animated View is *not*
-      // flattened.
-      // Because we do not get a host component ref immediately and thus cannot
-      // do a proper Fabric vs non-Fabric detection immediately, we default to assuming
-      // that Fabric *is* enabled until we know otherwise.
-      // Thus, in Fabric, this view will never be flattened. In non-Fabric, the view will
-      // not be flattened during the initial render but may be flattened in the second render
-      // and onwards.
-      const forceNativeIdFabric =
-        (this._component == null &&
-          (options?.collapsable === false || props.collapsable !== true)) ||
-        this._isFabric();
-
-      const forceNativeId =
-        props.collapsable ??
-        (this._propsAnimated.__isNative ||
-          forceNativeIdFabric ||
-          options?.collapsable === false);
-      // The native driver updates views directly through the UI thread so we
-      // have to make sure the view doesn't get optimized away because it cannot
-      // go through the NativeViewHierarchyManager since it operates on the shadow
-      // thread. TODO: T68258846
-      const collapsableProps = forceNativeId
-        ? {
-            nativeID: props.nativeID ?? 'animatedComponent',
-            collapsable: false,
-          }
-        : {};
+      // Force `collapsable` to be false so that native view is not flattened.
+      // Flattened views cannot be accurately referenced by a native driver.
       return (
         <Component
           {...props}
           {...passthruProps}
-          {...collapsableProps}
+          collapsable={false}
           style={mergedStyle}
           ref={this._setComponentRef}
         />

package/Libraries/Components/Button/ButtonWin32.js

@@ -76,8 +76,8 @@ class ButtonWin32 extends react_1.default.Component {
         if (this.props.color) {
             textProps.style = { color: this.props.color };
         }
-        return (react_1.default.createElement(ViewWin32_1.ViewWin32, Object.assign({}, viewProps),
-            react_1.default.createElement(TextWin32_1.TextWin32, Object.assign({}, textProps), this.props.title)));
+        return (react_1.default.createElement(ViewWin32_1.ViewWin32, { ...viewProps },
+            react_1.default.createElement(TextWin32_1.TextWin32, { ...textProps }, this.props.title)));
     }
 }
 exports.ButtonWin32 = ButtonWin32;

package/Libraries/Components/Button/ButtonWin32.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonWin32.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Button/ButtonWin32.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport RN = require('react-native');\nimport { ViewWin32 } from '../View/ViewWin32';\nimport { IViewWin32Props } from '../View/ViewWin32.Props';\nimport { TextWin32 } from '../Text/TextWin32';\nimport { ITextWin32Props } from '../Text/TextWin32.Props';\nimport { IButtonWin32Props } from './ButtonWin32.Props';\n\nconst enum SelectState {\n  NotSelected,\n  Selected\n}\n\ninterface IButtonWin32State {\n  accessibilityState: RN.AccessibilityState;\n}\n\n/**\n * React-native <Button> control with additional Win32-specific functionality.\n */\nexport class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32State> {\n  constructor(props: IButtonWin32Props) {\n    super(props);\n    this.state = this._makeState(SelectState.NotSelected);\n  }\n\n  public render() {\n    const viewProps: IViewWin32Props = {\n      accessible: true,\n      accessibilityLabel: this.props.accessibilityLabel || this.props.title,\n      accessibilityRole: 'button',\n      accessibilityState: this.state.accessibilityState,\n      focusable: true,\n      onFocus: this._onFocus,\n      onBlur: this._onBlur,\n      onMouseEnter: this.props.onMouseEnter,\n      onMouseLeave: this.props.onMouseLeave,\n      onTouchStart: this.props.onTouchStart,\n      onTouchEnd: this._onTouchEnd,\n      testID: this.props.testID,\n      style: this.props.style as RN.StyleProp<RN.ViewStyle>,\n    };\n\n    const textProps: ITextWin32Props = {\n      textStyle: 'None',\n    };\n    if (this.props.color) {\n      textProps.style = { color: this.props.color };\n    }\n\n    return (\n      <ViewWin32 {...viewProps}>\n        <TextWin32 {...textProps}>{this.props.title}</TextWin32>\n      </ViewWin32>\n    );\n  }\n\n  private readonly _makeState = (select: SelectState): IButtonWin32State => {\n    return {\n      accessibilityState: {\n        disabled: this.props.disabled,\n        selected: select === SelectState.Selected,\n      },\n    };\n  };\n\n  private readonly _setState = (select: SelectState): void => {\n    const state = this._makeState(select);\n    this.setState(state);\n  };\n\n  private readonly _onFocus = (): void => {\n    this._setState(SelectState.Selected);\n    if (this.props.onFocus) {\n      this.props.onFocus();\n    }\n  };\n\n  private readonly _onBlur = (): void => {\n    this._setState(SelectState.NotSelected);\n    if (this.props.onBlur) {\n      this.props.onBlur();\n    }\n  };\n\n  private readonly _onTouchEnd = (event: RN.GestureResponderEvent): void => {\n    if (!this.props.disabled) {\n      if (this.props.onPress) {\n        this.props.onPress(event);\n      }\n    }\n    if (this.props.onTouchEnd) {\n      this.props.onTouchEnd(event);\n    }\n  };\n}\n"]}
+{"version":3,"file":"ButtonWin32.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Button/ButtonWin32.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport RN = require('react-native');\nimport { ViewWin32 } from '../View/ViewWin32';\nimport { IViewWin32Props } from '../View/ViewWin32.Props';\nimport { TextWin32 } from '../Text/TextWin32';\nimport { ITextWin32Props } from '../Text/TextWin32.Props';\nimport { IButtonWin32Props } from './ButtonWin32.Props';\n\nconst enum SelectState {\n  NotSelected,\n  Selected\n}\n\ninterface IButtonWin32State {\n  accessibilityState: RN.AccessibilityState;\n}\n\n/**\n * React-native <Button> control with additional Win32-specific functionality.\n */\nexport class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32State> {\n  constructor(props: IButtonWin32Props) {\n    super(props);\n    this.state = this._makeState(SelectState.NotSelected);\n  }\n\n  public render() {\n    const viewProps: IViewWin32Props = {\n      accessible: true,\n      accessibilityLabel: this.props.accessibilityLabel || this.props.title,\n      accessibilityRole: 'button',\n      accessibilityState: this.state.accessibilityState,\n      focusable: true,\n      onFocus: this._onFocus,\n      onBlur: this._onBlur,\n      onMouseEnter: this.props.onMouseEnter,\n      onMouseLeave: this.props.onMouseLeave,\n      onTouchStart: this.props.onTouchStart,\n      onTouchEnd: this._onTouchEnd,\n      testID: this.props.testID,\n      style: this.props.style as RN.StyleProp<RN.ViewStyle>,\n    };\n\n    const textProps: ITextWin32Props = {\n      textStyle: 'None',\n    };\n    if (this.props.color) {\n      textProps.style = { color: this.props.color };\n    }\n\n    return (\n      <ViewWin32 {...viewProps}>\n        <TextWin32 {...textProps}>{this.props.title}</TextWin32>\n      </ViewWin32>\n    );\n  }\n\n  private readonly _makeState = (select: SelectState): IButtonWin32State => {\n    return {\n      accessibilityState: {\n        disabled: this.props.disabled,\n        selected: select === SelectState.Selected,\n      },\n    };\n  };\n\n  private readonly _setState = (select: SelectState): void => {\n    const state = this._makeState(select);\n    this.setState(state);\n  };\n\n  private readonly _onFocus = (): void => {\n    this._setState(SelectState.Selected);\n    if (this.props.onFocus) {\n      this.props.onFocus();\n    }\n  };\n\n  private readonly _onBlur = (): void => {\n    this._setState(SelectState.NotSelected);\n    if (this.props.onBlur) {\n      this.props.onBlur();\n    }\n  };\n\n  private readonly _onTouchEnd = (event: RN.GestureResponderEvent): void => {\n    if (!this.props.disabled) {\n      if (this.props.onPress) {\n        this.props.onPress(event);\n      }\n    }\n    if (this.props.onTouchEnd) {\n      this.props.onTouchEnd(event);\n    }\n  };\n}\n"]}

package/Libraries/Components/Button.js

@@ -145,6 +145,7 @@ type ButtonProps = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
+  accessibilityHint?: ?string,
 |}>;
 
 /**
@@ -275,6 +276,7 @@ class Button extends React.Component<ButtonProps> {
       testID,
       accessible,
       accessibilityActions,
+      accessibilityHint,
       onAccessibilityAction,
     } = this.props;
     const buttonStyles = [styles.button];
@@ -317,6 +319,7 @@ class Button extends React.Component<ButtonProps> {
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
         accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
         hasTVPreferredFocus={hasTVPreferredFocus}

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

@@ -117,10 +117,6 @@ type Props = $ReadOnly<{|
  * source of truth.
  */
 class DatePickerIOS extends React.Component<Props> {
-  static DefaultProps: {|mode: $TEMPORARY$string<'datetime'>|} = {
-    mode: 'datetime',
-  };
-
   _picker: ?React.ElementRef<typeof RCTDatePickerNativeComponent> = null;
 
   componentDidUpdate() {
@@ -142,6 +138,7 @@ class DatePickerIOS extends React.Component<Props> {
 
   render(): React.Node {
     const props = this.props;
+    const mode = props.mode ?? 'datetime';
     invariant(
       props.date || props.initialDate,
       'A selected date or initial date should be specified.',
@@ -153,7 +150,7 @@ class DatePickerIOS extends React.Component<Props> {
           ref={picker => {
             this._picker = picker;
           }}
-          style={getHeight(props.pickerStyle, props.mode)}
+          style={getHeight(props.pickerStyle, mode)}
           date={
             props.date
               ? props.date.getTime()
@@ -172,7 +169,7 @@ class DatePickerIOS extends React.Component<Props> {
           minimumDate={
             props.minimumDate ? props.minimumDate.getTime() : undefined
           }
-          mode={props.mode}
+          mode={mode}
           minuteInterval={props.minuteInterval}
           timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
           onChange={this._onChange}

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

@@ -56,7 +56,7 @@ type Props = $ReadOnly<{|
    * );
    * ```
    */
-  drawerBackgroundColor: ColorValue,
+  drawerBackgroundColor?: ?ColorValue,
 
   /**
    * Specifies the side of the screen from which the drawer will slide in.
@@ -161,11 +161,6 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
 
     return {Left: 'left', Right: 'right'};
   }
-  static defaultProps: {|
-    drawerBackgroundColor: 'white',
-  |} = {
-    drawerBackgroundColor: 'white',
-  };
 
   _nativeRef = React.createRef<
     React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
@@ -175,6 +170,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
 
   render(): React.Node {
     const {
+      drawerBackgroundColor = 'white',
       onDrawerStateChanged,
       renderNavigationView,
       onDrawerOpen,
@@ -189,7 +185,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
           styles.drawerSubview,
           {
             width: this.props.drawerWidth,
-            backgroundColor: this.props.drawerBackgroundColor,
+            backgroundColor: drawerBackgroundColor,
           },
         ]}
         collapsable={false}>
@@ -220,6 +216,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       <AndroidDrawerLayoutNativeComponent
         {...props}
         ref={this._nativeRef}
+        drawerBackgroundColor={drawerBackgroundColor}
         drawerWidth={this.props.drawerWidth}
         drawerPosition={this.props.drawerPosition}
         drawerLockMode={this.props.drawerLockMode}

package/Libraries/Components/EnterString.win32.js

@@ -11,7 +11,7 @@ const react_1 = __importDefault(require("react"));
 const PropTypes = require("prop-types");
 class EnterStringNative extends react_1.default.Component {
     render() {
-        return react_1.default.createElement(RCTEnterString, Object.assign({}, this.props));
+        return react_1.default.createElement(RCTEnterString, { ...this.props });
     }
 }
 // mixins: [NativeMethodsMixin],
@@ -57,14 +57,14 @@ EnterStringNative.DefaultProps = {
     label: '',
     onChanged: null,
 };
-const RCTEnterString = react_native_1.requireNativeComponent('RCTEnterString');
+const RCTEnterString = (0, react_native_1.requireNativeComponent)('RCTEnterString');
 class EnterString extends react_1.default.Component {
     render() {
         const args = { ...this.props };
         if (args.onChanged) {
             args.onChanged = this._onChangedNative.bind(this);
         } // TODO how should this work without the cast
-        return react_1.default.createElement(EnterStringNative, Object.assign({}, args));
+        return react_1.default.createElement(EnterStringNative, { ...args });
     }
     _onChangedNative(event) {
         if (this.props.onChanged) {

package/Libraries/Components/EnterString.win32.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnterString.win32.js","sourceRoot":"","sources":["../../src/Libraries/Components/EnterString.win32.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,CAAC;;;;;AAEb,+CAA4E;AAC5E,kDAAyB;AACzB,wCAAyC;AAuBzC,MAAM,iBAAkB,SAAQ,eAAK,CAAC,SAAsC;IAmDnE,MAAM;QACX,OAAO,8BAAC,cAAc,oBAAK,IAAI,CAAC,KAAK,EAAI,CAAC;IAC5C,CAAC;;AApDD,gCAAgC;AAEhC;;;GAGG;AACH;;;;;;;;;;EAUE;AAEH,8CAA8C;AAC/B,2BAAS,GAAQ;IAC7B,mDAAmD;IACnD,qBAAqB;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM;IAEvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,IAAI;IAExB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM;IAEvB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,IAAI;CAC1B,CAAC;AAEY,8BAAY,GAA4B;IACpD,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC;AAOJ,MAAM,cAAc,GAAG,qCAAsB,CAAC,gBAAgB,CAAC,CAAC;AAEhE,MAAqB,WAAY,SAAQ,eAAK,CAAC,SAAgC;IAQtE,MAAM;QACX,MAAM,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnD,CAAC,6CAA6C;QAE/C,OAAO,8BAAC,iBAAiB,oBAAM,IAAuC,EAAI,CAAC;IAAE,CAAC;IAExE,gBAAgB,CAAC,KAAsD;QAC7E,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YACxB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAC9C;IACH,CAAC;;AApBH,8BAqBC;AApBe,wBAAY,GAAsB;IAC9C,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["/**\n * @providesModule EnterString\n */\n'use strict';\n\nimport { requireNativeComponent, NativeSyntheticEvent } from 'react-native';\nimport React from 'react'\nimport PropTypes = require('prop-types');\n\nexport interface IEnterStringProps /*extends React.ClassAttributes<React.View>*/ {\n  // ViewProperties {\n  disabled?: boolean;\n  value?: string;\n  label?: string;\n  onChanged?: (newValue: string) => void;\n}\n\ninterface INativeOnChangedEventArgs {\n  text: string;\n}\n\n// Same as EnterStringProps, but the event args are objects\ninterface IEnterStringNativeProps /*extends React.ClassAttributes<React.View>*/ {\n  // ViewProperties {\n  disabled?: boolean;\n  value?: string;\n  label?: string;\n  onChanged?: (event: NativeSyntheticEvent<INativeOnChangedEventArgs>) => void;\n}\n\nclass EnterStringNative extends React.Component<IEnterStringNativeProps, {}> {\n  // mixins: [NativeMethodsMixin],\n\n  /**\n   * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We\n   * make `this` look like an actual native component class.\n   */\n  /*\n  viewConfig: {\n    uiViewClassName: 'RCTEnterString',\n    validAttributes: {\n        ...ReactNativeViewAttributes.RCTView,\n        text: true,\n        disabled: true,\n        label: true,\n    },\n  },\n  */\n\n // TODO figure out how to get a real type here\n  public static propTypes: any = {\n    // React.ValidationMap<IEnterStringNativeProps> = {\n    // ...View.propTypes,\n    /**\n     * Text to display inside the EnterString\n     */\n    value: PropTypes.string,\n\n    /**\n     * If true, disable all interactions for this component.\n     */\n    disabled: PropTypes.bool,\n\n    /**\n     * Label\n     */\n    label: PropTypes.string,\n\n    /**\n     * Callback when text is changed\n     */\n    onChanged: PropTypes.func,\n  };\n\n  public static DefaultProps: IEnterStringNativeProps = {\n    disabled: false,\n    value: '',\n    label: '',\n    onChanged: null,\n  };\n\n  public render() {\n    return <RCTEnterString {...this.props} />;\n  }\n}\n\nconst RCTEnterString = requireNativeComponent('RCTEnterString');\n\nexport default class EnterString extends React.Component<IEnterStringProps, {}> {\n  public static DefaultProps: IEnterStringProps = {\n    disabled: false,\n    value: '',\n    label: '',\n    onChanged: null,\n  };\n\n  public render() {\n    const args = { ...this.props };\n    if (args.onChanged) {\n      args.onChanged = this._onChangedNative.bind(this);\n    } // TODO how should this work without the cast\n\n    return <EnterStringNative {...(args as any) as IEnterStringNativeProps} />;  }\n\n  private _onChangedNative(event: NativeSyntheticEvent<INativeOnChangedEventArgs>) {\n    if (this.props.onChanged) {\n      this.props.onChanged(event.nativeEvent.text);\n    }\n  }\n}\n"]}
+{"version":3,"file":"EnterString.win32.js","sourceRoot":"","sources":["../../src/Libraries/Components/EnterString.win32.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,CAAC;;;;;AAEb,+CAA4E;AAC5E,kDAAyB;AACzB,wCAAyC;AAuBzC,MAAM,iBAAkB,SAAQ,eAAK,CAAC,SAAsC;IAmDnE,MAAM;QACX,OAAO,8BAAC,cAAc,OAAK,IAAI,CAAC,KAAK,GAAI,CAAC;IAC5C,CAAC;;AApDD,gCAAgC;AAEhC;;;GAGG;AACH;;;;;;;;;;EAUE;AAEH,8CAA8C;AAC/B,2BAAS,GAAQ;IAC7B,mDAAmD;IACnD,qBAAqB;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM;IAEvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,IAAI;IAExB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM;IAEvB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,IAAI;CAC1B,CAAC;AAEY,8BAAY,GAA4B;IACpD,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC;AAOJ,MAAM,cAAc,GAAG,IAAA,qCAAsB,EAAC,gBAAgB,CAAC,CAAC;AAEhE,MAAqB,WAAY,SAAQ,eAAK,CAAC,SAAgC;IAQtE,MAAM;QACX,MAAM,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnD,CAAC,6CAA6C;QAE/C,OAAO,8BAAC,iBAAiB,OAAM,IAAuC,GAAI,CAAC;IAAE,CAAC;IAExE,gBAAgB,CAAC,KAAsD;QAC7E,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YACxB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAC9C;IACH,CAAC;;AApBH,8BAqBC;AApBe,wBAAY,GAAsB;IAC9C,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["/**\n * @providesModule EnterString\n */\n'use strict';\n\nimport { requireNativeComponent, NativeSyntheticEvent } from 'react-native';\nimport React from 'react'\nimport PropTypes = require('prop-types');\n\nexport interface IEnterStringProps /*extends React.ClassAttributes<React.View>*/ {\n  // ViewProperties {\n  disabled?: boolean;\n  value?: string;\n  label?: string;\n  onChanged?: (newValue: string) => void;\n}\n\ninterface INativeOnChangedEventArgs {\n  text: string;\n}\n\n// Same as EnterStringProps, but the event args are objects\ninterface IEnterStringNativeProps /*extends React.ClassAttributes<React.View>*/ {\n  // ViewProperties {\n  disabled?: boolean;\n  value?: string;\n  label?: string;\n  onChanged?: (event: NativeSyntheticEvent<INativeOnChangedEventArgs>) => void;\n}\n\nclass EnterStringNative extends React.Component<IEnterStringNativeProps, {}> {\n  // mixins: [NativeMethodsMixin],\n\n  /**\n   * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We\n   * make `this` look like an actual native component class.\n   */\n  /*\n  viewConfig: {\n    uiViewClassName: 'RCTEnterString',\n    validAttributes: {\n        ...ReactNativeViewAttributes.RCTView,\n        text: true,\n        disabled: true,\n        label: true,\n    },\n  },\n  */\n\n // TODO figure out how to get a real type here\n  public static propTypes: any = {\n    // React.ValidationMap<IEnterStringNativeProps> = {\n    // ...View.propTypes,\n    /**\n     * Text to display inside the EnterString\n     */\n    value: PropTypes.string,\n\n    /**\n     * If true, disable all interactions for this component.\n     */\n    disabled: PropTypes.bool,\n\n    /**\n     * Label\n     */\n    label: PropTypes.string,\n\n    /**\n     * Callback when text is changed\n     */\n    onChanged: PropTypes.func,\n  };\n\n  public static DefaultProps: IEnterStringNativeProps = {\n    disabled: false,\n    value: '',\n    label: '',\n    onChanged: null,\n  };\n\n  public render() {\n    return <RCTEnterString {...this.props} />;\n  }\n}\n\nconst RCTEnterString = requireNativeComponent('RCTEnterString');\n\nexport default class EnterString extends React.Component<IEnterStringProps, {}> {\n  public static DefaultProps: IEnterStringProps = {\n    disabled: false,\n    value: '',\n    label: '',\n    onChanged: null,\n  };\n\n  public render() {\n    const args = { ...this.props };\n    if (args.onChanged) {\n      args.onChanged = this._onChangedNative.bind(this);\n    } // TODO how should this work without the cast\n\n    return <EnterStringNative {...(args as any) as IEnterStringNativeProps} />;  }\n\n  private _onChangedNative(event: NativeSyntheticEvent<INativeOnChangedEventArgs>) {\n    if (this.props.onChanged) {\n      this.props.onChanged(event.nativeEvent.text);\n    }\n  }\n}\n"]}

package/Libraries/Components/Pressable/Pressable.win32.js

@@ -0,0 +1,384 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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
+ */
+
+import * as React from 'react';
+import {useMemo, useState, useRef, useImperativeHandle} from 'react';
+import useAndroidRippleForView, {
+  type RippleConfig,
+} from './useAndroidRippleForView';
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  AccessibilityRole,
+  AccessibilityState,
+  AccessibilityValue,
+} from '../View/ViewAccessibility';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import usePressability from '../../Pressability/usePressability';
+import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
+import type {
+  LayoutEvent,
+  MouseEvent,
+  PressEvent,
+  // [Windows
+  BlurEvent,
+  FocusEvent,
+  KeyEvent, // Windows]
+} from '../../Types/CoreEventTypes';
+import type {HandledKeyboardEvent} from '../../Components/View/ViewPropTypes';
+import View from '../View/View';
+import TextInputState from '../TextInput/TextInputState';
+
+type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
+
+export type StateCallbackType = $ReadOnly<{|
+  pressed: boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+  /**
+   * Accessibility.
+   */
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  accessibilityElementsHidden?: ?boolean,
+  accessibilityHint?: ?Stringish,
+  accessibilityIgnoresInvertColors?: ?boolean,
+  accessibilityLabel?: ?Stringish,
+  accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
+  accessibilityRole?: ?AccessibilityRole,
+  accessibilityState?: ?AccessibilityState,
+  accessibilityValue?: ?AccessibilityValue,
+  accessibilityViewIsModal?: ?boolean,
+  accessible?: ?boolean,
+  focusable?: ?boolean,
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+
+  /**
+   * Whether a press gesture can be interrupted by a parent gesture such as a
+   * scroll event. Defaults to true.
+   */
+  cancelable?: ?boolean,
+
+  /**
+   * Either children or a render prop that receives a boolean reflecting whether
+   * the component is currently pressed.
+   */
+  children: React.Node | ((state: StateCallbackType) => React.Node),
+
+  /**
+   * Duration to wait after hover in before calling `onHoverIn`.
+   */
+  delayHoverIn?: ?number,
+
+  /**
+   * Duration to wait after hover out before calling `onHoverOut`.
+   */
+  delayHoverOut?: ?number,
+
+  /**
+   * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+   */
+  delayLongPress?: ?number,
+
+  /**
+   * Whether the press behavior is disabled.
+   */
+  disabled?: ?boolean,
+
+  /**
+   * Additional distance outside of this view in which a press is detected.
+   */
+  hitSlop?: ?RectOrSize,
+
+  /**
+   * Additional distance outside of this view in which a touch is considered a
+   * press before `onPressOut` is triggered.
+   */
+  pressRetentionOffset?: ?RectOrSize,
+
+  /**
+   * Called when this view's layout changes.
+   */
+  onLayout?: ?(event: LayoutEvent) => mixed,
+
+  /**
+   * Called when the hover is activated to provide visual feedback.
+   */
+  onHoverIn?: ?(event: MouseEvent) => mixed,
+
+  /**
+   * Called when the hover is deactivated to undo visual feedback.
+   */
+  onHoverOut?: ?(event: MouseEvent) => mixed,
+
+  /**
+   * Called when a long-tap gesture is detected.
+   */
+  onLongPress?: ?(event: PressEvent) => mixed,
+
+  /**
+   * Called when a single tap gesture is detected.
+   */
+  onPress?: ?(event: PressEvent) => mixed,
+
+  /**
+   * Called when a touch is engaged before `onPress`.
+   */
+  onPressIn?: ?(event: PressEvent) => mixed,
+
+  /**
+   * Called when a touch is released before `onPress`.
+   */
+  onPressOut?: ?(event: PressEvent) => mixed,
+
+  /**
+   * Called after the element loses focus.
+   */
+  onBlur?: ?(event: BlurEvent) => mixed,
+
+  /**
+   * Called after the element is focused.
+   */
+  onFocus?: ?(event: FocusEvent) => mixed,
+
+  /*
+   * Called after a key down event is detected.
+   */
+  onKeyDown?: ?(event: KeyEvent) => mixed,
+
+  /*
+   * Called after a key up event is detected.
+   */
+  onKeyUp?: ?(event: KeyEvent) => mixed,
+
+  /*
+   * List of keys handled only by JS.
+   */
+  keyDownEvents?: ?$ReadOnlyArray<HandledKeyboardEvent>,
+
+  /*
+   * List of keys to be handled only by JS.
+   */
+  keyUpEvents?: ?$ReadOnlyArray<HandledKeyboardEvent>,
+
+  /*
+   * Called in the tunneling phase after a key up event is detected.
+   */
+  onKeyDownCapture?: ?(event: KeyEvent) => void,
+
+  /*
+   * Called in the tunneling phase after a key up event is detected.
+   */
+  onKeyUpCapture?: ?(event: KeyEvent) => void,
+
+  /**
+   * Either view styles or a function that receives a boolean reflecting whether
+   * the component is currently pressed and returns view styles.
+   */
+  style?: ViewStyleProp | ((state: StateCallbackType) => ViewStyleProp),
+
+  /**
+   * Identifier used to find this view in tests.
+   */
+  testID?: ?string,
+
+  /**
+   * If true, doesn't play system sound on touch.
+   */
+  android_disableSound?: ?boolean,
+
+  /**
+   * Enables the Android ripple effect and configures its color.
+   */
+  android_ripple?: ?RippleConfig,
+
+  /**
+   * Used only for documentation or testing (e.g. snapshot testing).
+   */
+  testOnly_pressed?: ?boolean,
+
+  /**
+   * Duration to wait after press down before calling `onPressIn`.
+   */
+  unstable_pressDelay?: ?number,
+|}>;
+
+/**
+ * Component used to build display components that should respond to whether the
+ * component is currently pressed or not.
+ */
+function Pressable(props: Props, forwardedRef): React.Node {
+  const {
+    accessible,
+    android_disableSound,
+    android_ripple,
+    cancelable,
+    children,
+    delayHoverIn,
+    delayHoverOut,
+    delayLongPress,
+    disabled,
+    focusable,
+    onHoverIn,
+    onHoverOut,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    // [Windows
+    onBlur,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    // Windows]
+    pressRetentionOffset,
+    style,
+    testOnly_pressed,
+    unstable_pressDelay,
+    ...restProps
+  } = props;
+
+  const viewRef = useRef<React.ElementRef<typeof View> | null>(null);
+  useImperativeHandle(forwardedRef, () => viewRef.current);
+
+  // [Windows
+  const _onBlur = (event: BlurEvent) => {
+    TextInputState.blurInput(viewRef.current);
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+  };
+
+  const _onFocus = (event: FocusEvent) => {
+    TextInputState.focusInput(viewRef.current);
+    if (props.onFocus) {
+      props.onFocus(event);
+    }
+  };
+  // Windows]
+
+  const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
+
+  const [pressed, setPressed] = usePressState(testOnly_pressed === true);
+
+  const hitSlop = normalizeRect(props.hitSlop);
+
+  const accessibilityState =
+    disabled != null
+      ? {...props.accessibilityState, disabled}
+      : props.accessibilityState;
+
+  const restPropsWithDefaults: React.ElementConfig<typeof View> = {
+    ...restProps,
+    ...android_rippleConfig?.viewProps,
+    accessible: accessible !== false,
+    accessibilityState,
+    focusable: focusable !== false,
+    hitSlop,
+  };
+
+  const config = useMemo(
+    () => ({
+      cancelable,
+      disabled,
+      hitSlop,
+      pressRectOffset: pressRetentionOffset,
+      android_disableSound,
+      delayHoverIn,
+      delayHoverOut,
+      delayLongPress,
+      delayPressIn: unstable_pressDelay,
+      onHoverIn,
+      onHoverOut,
+      onLongPress,
+      onPress,
+      onPressIn(event: PressEvent): void {
+        if (android_rippleConfig != null) {
+          android_rippleConfig.onPressIn(event);
+        }
+        setPressed(true);
+        if (onPressIn != null) {
+          onPressIn(event);
+        }
+      },
+      onPressMove: android_rippleConfig?.onPressMove,
+      onPressOut(event: PressEvent): void {
+        if (android_rippleConfig != null) {
+          android_rippleConfig.onPressOut(event);
+        }
+        setPressed(false);
+        if (onPressOut != null) {
+          onPressOut(event);
+        }
+      },
+      // [Windows
+      onBlur,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      // Windows]
+    }),
+    [
+      android_disableSound,
+      android_rippleConfig,
+      cancelable,
+      delayHoverIn,
+      delayHoverOut,
+      delayLongPress,
+      disabled,
+      hitSlop,
+      onHoverIn,
+      onHoverOut,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      // [Windows
+      onBlur,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      // Windows]
+      pressRetentionOffset,
+      setPressed,
+      unstable_pressDelay,
+    ],
+  );
+  const eventHandlers = usePressability(config);
+
+  return (
+    <View
+      {...restPropsWithDefaults}
+      {...eventHandlers}
+      // [Windows
+      onBlur={_onBlur}
+      onFocus={_onFocus}
+      // Windows]
+      ref={viewRef}
+      style={typeof style === 'function' ? style({pressed}) : style}>
+      {typeof children === 'function' ? children({pressed}) : children}
+      {__DEV__ ? <PressabilityDebugView color="red" hitSlop={hitSlop} /> : null}
+    </View>
+  );
+}
+
+function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
+  const [pressed, setPressed] = useState(false);
+  return [pressed || forcePressed, setPressed];
+}
+
+const MemoedPressable = React.memo(React.forwardRef(Pressable));
+MemoedPressable.displayName = 'Pressable';
+
+export default (MemoedPressable: React.AbstractComponent<
+  Props,
+  React.ElementRef<typeof View>,
+>);

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -31,6 +31,7 @@ const AndroidHorizontalScrollViewNativeComponent: HostComponent<Props> = NativeC
       scrollPerfTag: true,
       sendMomentumEvents: true,
       showsHorizontalScrollIndicator: true,
+      snapToAlignment: true,
       snapToEnd: true,
       snapToInterval: true,
       snapToStart: true,