react-native-windows 0.66.3 → 0.67.0-preview.3

package/Libraries/Animated/AnimatedEvent.js

@@ -11,6 +11,7 @@
 'use strict';
 
 const AnimatedValue = require('./nodes/AnimatedValue');
+const AnimatedValueXY = require('./nodes/AnimatedValueXY');
 const NativeAnimatedHelper = require('./NativeAnimatedHelper');
 const ReactNative = require('../Renderer/shims/ReactNative');
 
@@ -18,7 +19,10 @@ const invariant = require('invariant');
 
 const {shouldUseNativeDriver} = require('./NativeAnimatedHelper');
 
-export type Mapping = {[key: string]: Mapping, ...} | AnimatedValue;
+export type Mapping =
+  | {[key: string]: Mapping, ...}
+  | AnimatedValue
+  | AnimatedValueXY;
 export type EventConfig = {
   listener?: ?Function,
   useNativeDriver: boolean,
@@ -41,6 +45,9 @@ function attachNativeEvent(
         nativeEventPath: path,
         animatedValueTag: value.__getNativeTag(),
       });
+    } else if (value instanceof AnimatedValueXY) {
+      traverse(value.x, path.concat('x'));
+      traverse(value.y, path.concat('y'));
     } else if (typeof value === 'object') {
       for (const key in value) {
         traverse(value[key], path.concat(key));
@@ -95,6 +102,13 @@ function validateMapping(argMapping, args) {
       );
       return;
     }
+    if (recMapping instanceof AnimatedValueXY) {
+      invariant(
+        typeof recEvt.x === 'number' && typeof recEvt.y === 'number',
+        'Bad mapping of event key ' + key + ', should be XY but got ' + recEvt,
+      );
+      return;
+    }
     if (typeof recEvt === 'number') {
       invariant(
         recMapping instanceof AnimatedValue,
@@ -204,22 +218,27 @@ class AnimatedEvent {
         validatedMapping = true;
       }
 
-      const traverse = (recMapping, recEvt, key) => {
+      const traverse = (recMapping, recEvt) => {
         if (recMapping instanceof AnimatedValue) {
           if (typeof recEvt === 'number') {
             recMapping.setValue(recEvt);
           }
+        } else if (recMapping instanceof AnimatedValueXY) {
+          if (typeof recEvt === 'object') {
+            traverse(recMapping.x, recEvt.x);
+            traverse(recMapping.y, recEvt.y);
+          }
         } else if (typeof recMapping === 'object') {
           for (const mappingKey in recMapping) {
             /* $FlowFixMe[prop-missing] (>=0.120.0) This comment suppresses an
              * error found when Flow v0.120 was deployed. To see the error,
              * delete this comment and run Flow. */
-            traverse(recMapping[mappingKey], recEvt[mappingKey], mappingKey);
+            traverse(recMapping[mappingKey], recEvt[mappingKey]);
           }
         }
       };
       this._argMapping.forEach((mapping, idx) => {
-        traverse(mapping, args[idx], 'arg' + idx);
+        traverse(mapping, args[idx]);
       });
 
       this._callListeners(...args);

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -24,7 +24,7 @@ import invariant from 'invariant';
 
 // TODO T69437152 @petetheheat - Delete this fork when Fabric ships to 100%.
 const NativeAnimatedModule =
-  Platform.OS === 'ios' && global.RN$Bridgeless
+  Platform.OS === 'ios' && global.RN$Bridgeless === true
     ? NativeAnimatedTurboModule
     : NativeAnimatedNonTurboModule;
 
@@ -355,7 +355,7 @@ function shouldUseNativeDriver(
           'animated module is missing. Falling back to JS-based animation. To ' +
           'resolve this, add `RCTAnimation` module to this app, or remove ' +
           '`useNativeDriver`. ' +
-          'Make sure to run `pod install` first. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md',
+          'Make sure to run `bundle exec pod install` first. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md',
       );
       _warnedMissingNativeAnimated = true;
     }

package/Libraries/Animated/components/AnimatedImage.js

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

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -22,9 +22,9 @@ const ScrollViewWithEventThrottle = React.forwardRef((props, ref) => (
   <ScrollView scrollEventThrottle={0.0001} {...props} ref={ref} />
 ));
 
-module.exports = (createAnimatedComponent(ScrollViewWithEventThrottle, {
-  collapsable: false,
-}): AnimatedComponentType<
+module.exports = (createAnimatedComponent(
+  ScrollViewWithEventThrottle,
+): AnimatedComponentType<
   React.ElementConfig<typeof ScrollView>,
   React.ElementRef<typeof ScrollView>,
 >);

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.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/Button.windows.js

@@ -147,6 +147,7 @@ type ButtonProps = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
+  accessibilityHint?: ?string,
 
   // [Windows
   /**
@@ -296,6 +297,7 @@ class Button extends React.Component<
       testID,
       accessible,
       accessibilityActions,
+      accessibilityHint,
       onAccessibilityAction,
       tabIndex,
     } = this.props;
@@ -339,6 +341,7 @@ class Button extends React.Component<
       return (
         <Touchable
           accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
           accessibilityRole="button"
           accessibilityState={accessibilityState}
           hasTVPreferredFocus={hasTVPreferredFocus}
@@ -352,7 +355,11 @@ class Button extends React.Component<
           onPress={onPress}
           tabIndex={tabIndex}
           touchSoundDisabled={touchSoundDisabled}
-          underlayColor={PlatformColor('ButtonBackgroundPressed')}
+          underlayColor={
+            color
+              ? PlatformColor('SolidBackgroundFillColorBaseBrush')
+              : PlatformColor('ButtonBackgroundPressed')
+          }
           onShowUnderlay={() => {
             this.setState({pressed: true});
           }}
@@ -360,24 +367,12 @@ class Button extends React.Component<
             this.setState({pressed: false});
           }}
           style={
-            this.state.pressed
-              ? [
-                  buttonStyles,
-                  {
-                    borderColor: PlatformColor('ButtonBorderBrushPressed'),
-                    borderBottomWidth: 1,
-                  },
-                ]
+            color
+              ? {borderRadius: 3}
+              : this.state.pressed
+              ? [buttonStyles, styles.buttonPressed]
               : this.state.hover
-              ? [
-                  buttonStyles,
-                  {
-                    backgroundColor: PlatformColor(
-                      'ButtonBackgroundPointerOver',
-                    ),
-                    borderColor: PlatformColor('ButtonBorderBrushPointerOver'),
-                  },
-                ]
+              ? [buttonStyles, styles.buttonHover]
               : buttonStyles
           }
           onMouseEnter={() => {
@@ -386,27 +381,52 @@ class Button extends React.Component<
           onMouseLeave={() => {
             if (!disabled) this.setState({hover: false});
           }}>
-          <Text
+          <View
             style={
-              this.state.pressed
-                ? [
-                    textStyles,
-                    {
-                      color: PlatformColor('ButtonForegroundPressed'),
-                    },
-                  ]
-                : this.state.hover
-                ? [
-                    textStyles,
-                    {
-                      color: PlatformColor('ButtonForegroundPointerOver'),
-                    },
-                  ]
-                : textStyles
-            }
-            disabled={disabled}>
-            {formattedTitle}
-          </Text>
+              color
+                ? this.state.pressed
+                  ? [buttonStyles, styles.buttonPressed]
+                  : buttonStyles
+                : {}
+            }>
+            <View
+              style={
+                color
+                  ? this.state.hover
+                    ? [
+                        styles.buttonHover,
+                        {
+                          backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                        },
+                      ]
+                    : {}
+                  : {}
+              }>
+              <Text
+                style={
+                  color
+                    ? textStyles
+                    : this.state.pressed
+                    ? [
+                        textStyles,
+                        {
+                          color: PlatformColor('ButtonForegroundPressed'),
+                        },
+                      ]
+                    : this.state.hover
+                    ? [
+                        textStyles,
+                        {
+                          color: PlatformColor('ButtonForegroundPointerOver'),
+                        },
+                      ]
+                    : textStyles
+                }
+                disabled={disabled}>
+                {formattedTitle}
+              </Text>
+            </View>
+          </View>
         </Touchable>
       );
     } else {
@@ -416,6 +436,7 @@ class Button extends React.Component<
           accessibilityActions={accessibilityActions}
           onAccessibilityAction={onAccessibilityAction}
           accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
           accessibilityRole="button"
           accessibilityState={accessibilityState}
           hasTVPreferredFocus={hasTVPreferredFocus}
@@ -505,6 +526,17 @@ const styles = StyleSheet.create({
     },
     // Windows]
   }),
+  // [Windows
+  buttonHover: {
+    backgroundColor: PlatformColor('ButtonBackgroundPointerOver'),
+    borderColor: PlatformColor('ButtonBorderBrushPointerOver'),
+    borderRadius: 3,
+  },
+  buttonPressed: {
+    borderColor: PlatformColor('ButtonBorderBrushPressed'),
+    borderBottomWidth: 1,
+  },
+  // Windows]
 });
 
 module.exports = Button;

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/Flyout/Flyout.js

@@ -16,7 +16,7 @@ const styles = react_native_1.StyleSheet.create({
         position: 'absolute',
     },
 });
-const RCTFlyout = react_native_1.requireNativeComponent('RCTFlyout');
+const RCTFlyout = (0, react_native_1.requireNativeComponent)('RCTFlyout');
 /**
  * Renders a flyout component.
  *
@@ -30,7 +30,7 @@ class Flyout extends react_1.default.Component {
         // Check if we're given a new target property; we need to resolve it to a node handle before render
         if (prevState.targetRef !== nextProps.target) {
             // Map the 'target' property to a node tag to use in the native layer
-            const newtarget = react_native_1.findNodeHandle(nextProps.target);
+            const newtarget = (0, react_native_1.findNodeHandle)(nextProps.target);
             return {
                 target: newtarget,
                 targetRef: nextProps.target,
@@ -44,7 +44,7 @@ class Flyout extends react_1.default.Component {
     }
     render() {
         const props = { ...this.props };
-        return (react_1.default.createElement(RCTFlyout, Object.assign({}, props, { target: this.state.target, style: [styles.rctFlyout, this.props.style] })));
+        return (react_1.default.createElement(RCTFlyout, { ...props, target: this.state.target, style: [styles.rctFlyout, this.props.style] }));
     }
 }
 exports.Flyout = Flyout;

package/Libraries/Components/Flyout/Flyout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flyout.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Flyout/Flyout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAC1B,+CAAgF;AAGhF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAOH,MAAM,SAAS,GAAG,qCAAsB,CAAe,WAAW,CAAC,CAAC;AAEpE;;;;;;;GAOG;AACH,MAAa,MAAO,SAAQ,eAAK,CAAC,SAA2C;IACpE,MAAM,CAAC,wBAAwB,CACpC,SAAuB,EACvB,SAA6B;QAE7B,mGAAmG;QACnG,IAAI,SAAS,CAAC,SAAS,KAAK,SAAS,CAAC,MAAM,EAAE;YAC5C,qEAAqE;YACrE,MAAM,SAAS,GAAkB,6BAAc,CAC7C,SAAS,CAAC,MAIsB,CACjC,CAAC;YAEF,OAAO;gBACL,MAAM,EAAE,SAAS;gBACjB,SAAS,EAAE,SAAS,CAAC,MAAM;aAC5B,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,YAAY,KAAmB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;IACpD,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,EAAC,CAAC;QAE9B,OAAO,CACL,8BAAC,SAAS,oBACJ,KAAK,IACT,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAC3C,CACH,CAAC;IACJ,CAAC;CACF;AAzCD,wBAyCC","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport React from 'react';\nimport {findNodeHandle, requireNativeComponent, StyleSheet} from 'react-native';\nimport {IFlyoutProps} from './FlyoutProps';\n\nconst styles = StyleSheet.create({\n  rctFlyout: {\n    position: 'absolute',\n  },\n});\n\nexport interface IFlyoutTargetState {\n  target?: number | null;\n  targetRef?: React.ReactNode;\n}\n\nconst RCTFlyout = requireNativeComponent<IFlyoutProps>('RCTFlyout');\n\n/**\n * Renders a flyout component.\n *\n * This is a controlled component that requires an `onDismiss` callback that\n * updates the `isOpen` prop in order for the component to reflect user actions.\n *\n * @keyword flyout\n */\nexport class Flyout extends React.Component<IFlyoutProps, IFlyoutTargetState> {\n  public static getDerivedStateFromProps(\n    nextProps: IFlyoutProps,\n    prevState: IFlyoutTargetState,\n  ): IFlyoutTargetState {\n    // Check if we're given a new target property; we need to resolve it to a node handle before render\n    if (prevState.targetRef !== nextProps.target) {\n      // Map the 'target' property to a node tag to use in the native layer\n      const newtarget: number | null = findNodeHandle(\n        nextProps.target as\n          | null\n          | number\n          | React.Component<IFlyoutProps, IFlyoutTargetState>\n          | React.ComponentClass<Flyout>,\n      );\n\n      return {\n        target: newtarget,\n        targetRef: nextProps.target,\n      };\n    }\n\n    return prevState;\n  }\n\n  constructor(props: IFlyoutProps) {\n    super(props);\n    this.state = {target: undefined, targetRef: null};\n  }\n\n  public render(): JSX.Element {\n    const props = {...this.props};\n\n    return (\n      <RCTFlyout\n        {...props}\n        target={this.state.target}\n        style={[styles.rctFlyout, this.props.style]}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"Flyout.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Flyout/Flyout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAC1B,+CAAgF;AAGhF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAOH,MAAM,SAAS,GAAG,IAAA,qCAAsB,EAAe,WAAW,CAAC,CAAC;AAEpE;;;;;;;GAOG;AACH,MAAa,MAAO,SAAQ,eAAK,CAAC,SAA2C;IACpE,MAAM,CAAC,wBAAwB,CACpC,SAAuB,EACvB,SAA6B;QAE7B,mGAAmG;QACnG,IAAI,SAAS,CAAC,SAAS,KAAK,SAAS,CAAC,MAAM,EAAE;YAC5C,qEAAqE;YACrE,MAAM,SAAS,GAAkB,IAAA,6BAAc,EAC7C,SAAS,CAAC,MAIsB,CACjC,CAAC;YAEF,OAAO;gBACL,MAAM,EAAE,SAAS;gBACjB,SAAS,EAAE,SAAS,CAAC,MAAM;aAC5B,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,YAAY,KAAmB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;IACpD,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,EAAC,CAAC;QAE9B,OAAO,CACL,8BAAC,SAAS,OACJ,KAAK,EACT,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAC3C,CACH,CAAC;IACJ,CAAC;CACF;AAzCD,wBAyCC","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport React from 'react';\nimport {findNodeHandle, requireNativeComponent, StyleSheet} from 'react-native';\nimport {IFlyoutProps} from './FlyoutProps';\n\nconst styles = StyleSheet.create({\n  rctFlyout: {\n    position: 'absolute',\n  },\n});\n\nexport interface IFlyoutTargetState {\n  target?: number | null;\n  targetRef?: React.ReactNode;\n}\n\nconst RCTFlyout = requireNativeComponent<IFlyoutProps>('RCTFlyout');\n\n/**\n * Renders a flyout component.\n *\n * This is a controlled component that requires an `onDismiss` callback that\n * updates the `isOpen` prop in order for the component to reflect user actions.\n *\n * @keyword flyout\n */\nexport class Flyout extends React.Component<IFlyoutProps, IFlyoutTargetState> {\n  public static getDerivedStateFromProps(\n    nextProps: IFlyoutProps,\n    prevState: IFlyoutTargetState,\n  ): IFlyoutTargetState {\n    // Check if we're given a new target property; we need to resolve it to a node handle before render\n    if (prevState.targetRef !== nextProps.target) {\n      // Map the 'target' property to a node tag to use in the native layer\n      const newtarget: number | null = findNodeHandle(\n        nextProps.target as\n          | null\n          | number\n          | React.Component<IFlyoutProps, IFlyoutTargetState>\n          | React.ComponentClass<Flyout>,\n      );\n\n      return {\n        target: newtarget,\n        targetRef: nextProps.target,\n      };\n    }\n\n    return prevState;\n  }\n\n  constructor(props: IFlyoutProps) {\n    super(props);\n    this.state = {target: undefined, targetRef: null};\n  }\n\n  public render(): JSX.Element {\n    const props = {...this.props};\n\n    return (\n      <RCTFlyout\n        {...props}\n        target={this.state.target}\n        style={[styles.rctFlyout, this.props.style]}\n      />\n    );\n  }\n}\n"]}

package/Libraries/Components/Flyout/FlyoutProps.d.ts

@@ -6,9 +6,12 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
 export declare type Placement = 'top' | 'bottom' | 'left' | 'right' | 'full' | 'top-edge-aligned-left' | 'top-edge-aligned-right' | 'bottom-edge-aligned-left' | 'bottom-edge-aligned-right' | 'left-edge-aligned-top' | 'right-edge-aligned-top' | 'left-edge-aligned-bottom' | 'right-edge-aligned-bottom';
+export declare type ShowMode = 'auto' | 'standard' | 'transient' | 'transient-with-dismiss-on-pointer-move-away';
 export interface IFlyoutProps extends ViewProps {
     horizontalOffset?: number;
     isLightDismissEnabled?: boolean;
+    autoFocus?: boolean;
+    shouldConstrainToRootBounds?: boolean;
     /**
      * Specifies whether the area outside the flyout is darkened
      */
@@ -16,6 +19,7 @@ export interface IFlyoutProps extends ViewProps {
     isOpen?: boolean;
     onDismiss?: (isOpen: boolean) => void;
     placement?: Placement;
+    showMode?: ShowMode;
     target?: React.ReactNode;
     verticalOffset?: number;
 }

package/Libraries/Components/Flyout/FlyoutProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlyoutProps.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Flyout/FlyoutProps.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\nimport React from 'react';\nimport {ViewProps} from 'react-native';\n\nexport type Placement =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'full'\n  | 'top-edge-aligned-left'\n  | 'top-edge-aligned-right'\n  | 'bottom-edge-aligned-left'\n  | 'bottom-edge-aligned-right'\n  | 'left-edge-aligned-top'\n  | 'right-edge-aligned-top'\n  | 'left-edge-aligned-bottom'\n  | 'right-edge-aligned-bottom';\n\nexport interface IFlyoutProps extends ViewProps {\n  horizontalOffset?: number;\n  isLightDismissEnabled?: boolean;\n\n  /**\n   * Specifies whether the area outside the flyout is darkened\n   */\n  isOverlayEnabled?: boolean;\n\n  isOpen?: boolean;\n  onDismiss?: (isOpen: boolean) => void;\n  placement?: Placement;\n  target?: React.ReactNode;\n  verticalOffset?: number;\n}\n"]}
+{"version":3,"file":"FlyoutProps.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Flyout/FlyoutProps.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\nimport React from 'react';\nimport {ViewProps} from 'react-native';\n\nexport type Placement =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'full'\n  | 'top-edge-aligned-left'\n  | 'top-edge-aligned-right'\n  | 'bottom-edge-aligned-left'\n  | 'bottom-edge-aligned-right'\n  | 'left-edge-aligned-top'\n  | 'right-edge-aligned-top'\n  | 'left-edge-aligned-bottom'\n  | 'right-edge-aligned-bottom';\n\nexport type ShowMode =\n  | 'auto'\n  | 'standard'\n  | 'transient'\n  | 'transient-with-dismiss-on-pointer-move-away';\n\nexport interface IFlyoutProps extends ViewProps {\n  horizontalOffset?: number;\n  isLightDismissEnabled?: boolean;\n  autoFocus?: boolean;\n  shouldConstrainToRootBounds?: boolean;\n\n  /**\n   * Specifies whether the area outside the flyout is darkened\n   */\n  isOverlayEnabled?: boolean;\n\n  isOpen?: boolean;\n  onDismiss?: (isOpen: boolean) => void;\n  placement?: Placement;\n  showMode?: ShowMode;\n  target?: React.ReactNode;\n  verticalOffset?: number;\n}\n"]}

package/Libraries/Components/Glyph/Glyph.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Glyph = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
-const RCTGlyph = react_native_1.requireNativeComponent('PLYIcon');
+const RCTGlyph = (0, react_native_1.requireNativeComponent)('PLYIcon');
 /**
  * Glyph is a wrapper for the Xaml Glyph control
  *
@@ -23,7 +23,7 @@ class Glyph extends react_1.default.PureComponent {
     render() {
         const props = { ...this.props };
         props.style = this.props.style;
-        return react_1.default.createElement(RCTGlyph, Object.assign({}, props));
+        return react_1.default.createElement(RCTGlyph, { ...props });
     }
 }
 exports.Glyph = Glyph;

package/Libraries/Components/Glyph/Glyph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Glyph.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Glyph/Glyph.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAC1B,+CAAoD;AAGpD,MAAM,QAAQ,GAAG,qCAAsB,CAAC,SAAS,CAAC,CAAC;AAEnD;;;;;;GAMG;AACH,MAAa,KAAM,SAAQ,eAAK,CAAC,aAAyB;IACjD,MAAM;QACX,MAAM,KAAK,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,EAAC,CAAC;QAC9B,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAE/B,OAAO,8BAAC,QAAQ,oBAAK,KAAK,EAAI,CAAC;IACjC,CAAC;CACF;AAPD,sBAOC","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport React from 'react';\nimport {requireNativeComponent} from 'react-native';\nimport {GlyphProps} from './GlyphProps';\n\nconst RCTGlyph = requireNativeComponent('PLYIcon');\n\n/**\n * Glyph is a wrapper for the Xaml Glyph control\n *\n * This control is used to render Glyphs from a Font file, which might be\n * used similar to SVG to have vector based images that also have the\n * ability to be rendered with a specific color\n */\nexport class Glyph extends React.PureComponent<GlyphProps> {\n  public render(): JSX.Element {\n    const props = {...this.props};\n    props.style = this.props.style;\n\n    return <RCTGlyph {...props} />;\n  }\n}\n"]}
+{"version":3,"file":"Glyph.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Glyph/Glyph.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAC1B,+CAAoD;AAGpD,MAAM,QAAQ,GAAG,IAAA,qCAAsB,EAAC,SAAS,CAAC,CAAC;AAEnD;;;;;;GAMG;AACH,MAAa,KAAM,SAAQ,eAAK,CAAC,aAAyB;IACjD,MAAM;QACX,MAAM,KAAK,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,EAAC,CAAC;QAC9B,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAE/B,OAAO,8BAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;IACjC,CAAC;CACF;AAPD,sBAOC","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport React from 'react';\nimport {requireNativeComponent} from 'react-native';\nimport {GlyphProps} from './GlyphProps';\n\nconst RCTGlyph = requireNativeComponent('PLYIcon');\n\n/**\n * Glyph is a wrapper for the Xaml Glyph control\n *\n * This control is used to render Glyphs from a Font file, which might be\n * used similar to SVG to have vector based images that also have the\n * ability to be rendered with a specific color\n */\nexport class Glyph extends React.PureComponent<GlyphProps> {\n  public render(): JSX.Element {\n    const props = {...this.props};\n    props.style = this.props.style;\n\n    return <RCTGlyph {...props} />;\n  }\n}\n"]}

package/Libraries/Components/Keyboard/KeyboardExt.js

@@ -10,15 +10,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.supportKeyboard = void 0;
 const react_1 = __importDefault(require("react"));
-exports.supportKeyboard = (WrappedComponent) => {
+const supportKeyboard = (WrappedComponent) => {
     class SupportKeyboard extends react_1.default.Component {
         render() {
             const { forwardedRef, ...rest } = this.props;
-            return react_1.default.createElement(WrappedComponent, Object.assign({ ref: forwardedRef }, rest));
+            return react_1.default.createElement(WrappedComponent, { ref: forwardedRef, ...rest });
         }
     }
     return react_1.default.forwardRef((props, ref) => {
-        return react_1.default.createElement(SupportKeyboard, Object.assign({}, props, { forwardedRef: ref }));
+        return react_1.default.createElement(SupportKeyboard, { ...props, forwardedRef: ref });
     });
 };
+exports.supportKeyboard = supportKeyboard;
 //# sourceMappingURL=KeyboardExt.js.map

package/Libraries/Components/Keyboard/KeyboardExt.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardExt.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Keyboard/KeyboardExt.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAGb,QAAA,eAAe,GAAG,CAC7B,gBAAwC,EACxC,EAAE;IAUF,MAAM,eAAgB,SAAQ,eAAK,CAAC,SAAgC;QAC3D,MAAM;YACX,MAAM,EAAC,YAAY,EAAE,GAAG,IAAI,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YAC3C,OAAO,8BAAC,gBAAgB,kBAAC,GAAG,EAAE,YAAY,IAAO,IAAU,EAAI,CAAC;QAClE,CAAC;KACF;IAED,OAAO,eAAK,CAAC,UAAU,CACrB,CAAC,KAA+B,EAAE,GAAmB,EAAE,EAAE;QACvD,OAAO,8BAAC,eAAe,oBAAK,KAAK,IAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC3D,CAAC,CACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport React from 'react';\nimport {IKeyboardProps} from './KeyboardExtProps';\n\nexport const supportKeyboard = <P extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<P>,\n) => {\n  interface IForwardRefProps {\n    forwardedRef: React.Ref<any>;\n  }\n\n  // children is used to avoid error: Property 'children' does not exist on type 'IntrinsicAttributes & ViewProps &\n  // IKeyboardProps & RefAttributes<any>\n  type PropsWithoutForwardedRef = P & IKeyboardProps & {children?: any};\n  type PropsWithForwardedRef = PropsWithoutForwardedRef & IForwardRefProps;\n\n  class SupportKeyboard extends React.Component<PropsWithForwardedRef> {\n    public render(): JSX.Element {\n      const {forwardedRef, ...rest} = this.props;\n      return <WrappedComponent ref={forwardedRef} {...(rest as P)} />;\n    }\n  }\n\n  return React.forwardRef(\n    (props: PropsWithoutForwardedRef, ref: React.Ref<any>) => {\n      return <SupportKeyboard {...props} forwardedRef={ref} />;\n    },\n  );\n};\n"]}
+{"version":3,"file":"KeyboardExt.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Keyboard/KeyboardExt.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAGnB,MAAM,eAAe,GAAG,CAC7B,gBAAwC,EACxC,EAAE;IAUF,MAAM,eAAgB,SAAQ,eAAK,CAAC,SAAgC;QAC3D,MAAM;YACX,MAAM,EAAC,YAAY,EAAE,GAAG,IAAI,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;YAC3C,OAAO,8BAAC,gBAAgB,IAAC,GAAG,EAAE,YAAY,KAAO,IAAU,GAAI,CAAC;QAClE,CAAC;KACF;IAED,OAAO,eAAK,CAAC,UAAU,CACrB,CAAC,KAA+B,EAAE,GAAmB,EAAE,EAAE;QACvD,OAAO,8BAAC,eAAe,OAAK,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,CAAC;IAC3D,CAAC,CACF,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,eAAe,mBAwB1B","sourcesContent":["/**\n * Copyright (c) Microsoft Corporation.\n * Licensed under the MIT License.\n * @format\n */\n'use strict';\n\nimport React from 'react';\nimport {IKeyboardProps} from './KeyboardExtProps';\n\nexport const supportKeyboard = <P extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<P>,\n) => {\n  interface IForwardRefProps {\n    forwardedRef: React.Ref<any>;\n  }\n\n  // children is used to avoid error: Property 'children' does not exist on type 'IntrinsicAttributes & ViewProps &\n  // IKeyboardProps & RefAttributes<any>\n  type PropsWithoutForwardedRef = P & IKeyboardProps & {children?: any};\n  type PropsWithForwardedRef = PropsWithoutForwardedRef & IForwardRefProps;\n\n  class SupportKeyboard extends React.Component<PropsWithForwardedRef> {\n    public render(): JSX.Element {\n      const {forwardedRef, ...rest} = this.props;\n      return <WrappedComponent ref={forwardedRef} {...(rest as P)} />;\n    }\n  }\n\n  return React.forwardRef(\n    (props: PropsWithoutForwardedRef, ref: React.Ref<any>) => {\n      return <SupportKeyboard {...props} forwardedRef={ref} />;\n    },\n  );\n};\n"]}

package/Libraries/Components/Popup/Popup.js

@@ -16,7 +16,7 @@ const styles = react_native_1.StyleSheet.create({
         position: 'absolute',
     },
 });
-const RCTPopup = react_native_1.requireNativeComponent('RCTPopup');
+const RCTPopup = (0, react_native_1.requireNativeComponent)('RCTPopup');
 /**
  * Renders a popup component.
  *
@@ -30,7 +30,7 @@ class Popup extends react_1.default.Component {
         // Check if we're given a new target property; we need to resolve it to a node handle before render
         if (prevState.targetRef !== nextProps.target) {
             // Map the 'target' property to a node tag to use in the native layer
-            const newTarget = react_native_1.findNodeHandle(nextProps.target);
+            const newTarget = (0, react_native_1.findNodeHandle)(nextProps.target);
             return {
                 target: newTarget,
                 targetRef: nextProps.target,
@@ -45,7 +45,7 @@ class Popup extends react_1.default.Component {
     render() {
         const props = { ...this.props };
         props.style = [styles.rctPopup, this.props.style];
-        return react_1.default.createElement(RCTPopup, Object.assign({}, props, { target: this.state.target }));
+        return react_1.default.createElement(RCTPopup, { ...props, target: this.state.target });
     }
 }
 exports.Popup = Popup;