@office-iss/react-native-win32 0.66.4 → 0.67.0

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -4,25 +4,29 @@
  * 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
+ * @flow
  * @format
  */
 
-import type {LayoutEvent} from '../../Types/CoreEventTypes';
-import setAndForwardRef from 'react-native/Libraries/Utilities/setAndForwardRef';
-import Platform from '../../Utilities/Platform';
-import StyleSheet from '../../StyleSheet/StyleSheet';
-import Animated from '../../Animated/Animated';
+import AnimatedImplementation from '../../Animated/AnimatedImplementation';
+import AnimatedAddition from '../../Animated/nodes/AnimatedAddition';
+import AnimatedDiffClamp from '../../Animated/nodes/AnimatedDiffClamp';
+import AnimatedNode from '../../Animated/nodes/AnimatedNode';
+
 import * as React from 'react';
-import {useEffect, useMemo, useRef, useCallback} from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import View from '../View/View';
+import Platform from '../../Utilities/Platform';
+
+import type {LayoutEvent} from '../../Types/CoreEventTypes';
 
-const AnimatedView = Animated.View;
+const AnimatedView = AnimatedImplementation.createAnimatedComponent(View);
 
 export type Props = $ReadOnly<{
-  children?: React.Element<$FlowFixMe>,
+  children?: React.Element<any>,
   nextHeaderLayoutY: ?number,
   onLayout: (event: LayoutEvent) => void,
-  scrollAnimatedValue: Animated.Value,
+  scrollAnimatedValue: AnimatedImplementation.Value,
   // Will cause sticky headers to stick at the bottom of the ScrollView instead
   // of the top.
   inverted: ?boolean,
@@ -32,275 +36,287 @@ export type Props = $ReadOnly<{
   hiddenOnScroll?: ?boolean,
 }>;
 
-const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
-  Props,
-  $ReadOnly<{
-    setNextHeaderY: number => void,
-    ...$Exact<React.ElementRef<typeof AnimatedView>>,
-  }>,
-> = React.forwardRef(function ScrollViewStickyHeader(props, forwardedRef) {
-  const {
-    inverted,
-    scrollViewHeight,
-    hiddenOnScroll,
-    scrollAnimatedValue,
-    nextHeaderLayoutY: _nextHeaderLayoutY,
-  } = props;
+type State = {
+  measured: boolean,
+  layoutY: number,
+  layoutHeight: number,
+  nextHeaderLayoutY: ?number,
+  translateY: ?number,
+  ...
+};
 
-  const [measured, setMeasured] = React.useState<boolean>(false);
-  const [layoutY, setLayoutY] = React.useState<number>(0);
-  const [layoutHeight, setLayoutHeight] = React.useState<number>(0);
-  const [translateY, setTranslateY] = React.useState<?number>(null);
-  const [nextHeaderLayoutY, setNextHeaderLayoutY] = React.useState<?number>(
-    _nextHeaderLayoutY,
-  );
-  const [isFabric, setIsFabric] = React.useState<boolean>(false);
+class ScrollViewStickyHeader extends React.Component<Props, State> {
+  state: State = {
+    measured: false,
+    layoutY: 0,
+    layoutHeight: 0,
+    nextHeaderLayoutY: this.props.nextHeaderLayoutY,
+    translateY: null,
+  };
 
-  const componentRef = React.useRef<?React.ElementRef<typeof AnimatedView>>();
-  const _setNativeRef = setAndForwardRef({
-    getForwardedRef: () => forwardedRef,
-    setLocalRef: ref => {
-      componentRef.current = ref;
-      if (ref) {
-        ref.setNextHeaderY = value => {
-          setNextHeaderLayoutY(value);
-        };
-        setIsFabric(
-          !!(
-            // An internal transform mangles variables with leading "_" as private.
-            // eslint-disable-next-line dot-notation
-            ref['_internalInstanceHandle']?.stateNode?.canonical
-          ),
-        );
-      }
-    },
-  });
+  _translateY: ?AnimatedNode = null;
+  _shouldRecreateTranslateY: boolean = true;
+  _haveReceivedInitialZeroTranslateY: boolean = true;
+  _ref: any; // TODO T53738161: flow type this, and the whole file
 
-  const offset = useMemo(
-    () =>
-      hiddenOnScroll === true
-        ? Animated.diffClamp(
-            scrollAnimatedValue
-              .interpolate({
-                extrapolateLeft: 'clamp',
-                inputRange: [layoutY, layoutY + 1],
-                outputRange: ([0, 1]: Array<number>),
-              })
-              .interpolate({
-                inputRange: [0, 1],
-                outputRange: ([0, -1]: Array<number>),
-              }),
-            -layoutHeight,
-            0,
-          )
-        : null,
-    [scrollAnimatedValue, layoutHeight, layoutY, hiddenOnScroll],
-  );
+  // Fabric-only:
+  _timer: ?TimeoutID;
+  _animatedValueListenerId: string;
+  _animatedValueListener: (valueObject: $ReadOnly<{|value: number|}>) => void;
+  _debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
 
-  const [
-    animatedTranslateY,
-    setAnimatedTranslateY,
-  ] = React.useState<Animated.Node>(() => {
-    const inputRange: Array<number> = [-1, 0];
-    const outputRange: Array<number> = [0, 0];
-    const initialTranslateY: Animated.Interpolation = scrollAnimatedValue.interpolate(
-      {
-        inputRange,
-        outputRange,
-      },
-    );
+  setNextHeaderY: (y: number) => void = (y: number): void => {
+    this._shouldRecreateTranslateY = true;
+    this.setState({nextHeaderLayoutY: y});
+  };
 
-    if (offset != null) {
-      return Animated.add(initialTranslateY, offset);
+  componentWillUnmount() {
+    if (this._translateY != null && this._animatedValueListenerId != null) {
+      this._translateY.removeListener(this._animatedValueListenerId);
+    }
+    if (this._timer) {
+      clearTimeout(this._timer);
     }
-    return initialTranslateY;
-  });
+  }
 
-  const _haveReceivedInitialZeroTranslateY = useRef<boolean>(true);
-  const _timer = useRef<?TimeoutID>(null);
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+    if (
+      nextProps.scrollViewHeight !== this.props.scrollViewHeight ||
+      nextProps.scrollAnimatedValue !== this.props.scrollAnimatedValue ||
+      nextProps.inverted !== this.props.inverted
+    ) {
+      this._shouldRecreateTranslateY = true;
+    }
+  }
 
-  useEffect(() => {
-    if (translateY !== 0 && translateY != null) {
-      _haveReceivedInitialZeroTranslateY.current = false;
+  updateTranslateListener(
+    translateY: AnimatedImplementation.Interpolation,
+    isFabric: boolean,
+    offset: AnimatedDiffClamp | null,
+  ) {
+    if (this._translateY != null && this._animatedValueListenerId != null) {
+      this._translateY.removeListener(this._animatedValueListenerId);
     }
-  }, [translateY]);
+    offset
+      ? (this._translateY = new AnimatedAddition(translateY, offset))
+      : (this._translateY = translateY);
 
-  // This is called whenever the (Interpolated) Animated Value
-  // updates, which is several times per frame during scrolling.
-  // To ensure that the Fabric ShadowTree has the most recent
-  // translate style of this node, we debounce the value and then
-  // pass it through to the underlying node during render.
-  // This is:
-  // 1. Only an issue in Fabric.
-  // 2. Worse in Android than iOS. In Android, but not iOS, you
-  //    can touch and move your finger slightly and still trigger
-  //    a "tap" event. In iOS, moving will cancel the tap in
-  //    both Fabric and non-Fabric. On Android when you move
-  //    your finger, the hit-detection moves from the Android
-  //    platform to JS, so we need the ShadowTree to have knowledge
-  //    of the current position.
-  const animatedValueListener = useCallback(
-    ({value}) => {
-      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.
-      if (value === 0 && !_haveReceivedInitialZeroTranslateY.current) {
-        _haveReceivedInitialZeroTranslateY.current = true;
-        return;
-      }
-      if (_timer.current != null) {
-        clearTimeout(_timer.current);
-      }
-      _timer.current = setTimeout(() => {
-        if (value !== translateY) {
-          setTranslateY(value);
-        }
-      }, _debounceTimeout);
-    },
-    [translateY],
-  );
+    this._shouldRecreateTranslateY = false;
 
-  useEffect(() => {
-    const inputRange: Array<number> = [-1, 0];
-    const outputRange: Array<number> = [0, 0];
+    if (!isFabric) {
+      return;
+    }
 
-    if (measured) {
-      if (inverted === true) {
-        // The interpolation looks like:
-        // - Negative scroll: no translation
-        // - `stickStartPoint` is the point at which the header will start sticking.
-        //   It is calculated using the ScrollView viewport height so it is a the bottom.
-        // - Headers that are in the initial viewport will never stick, `stickStartPoint`
-        //   will be negative.
-        // - From 0 to `stickStartPoint` no translation. This will cause the header
-        //   to scroll normally until it reaches the top of the scroll view.
-        // - From `stickStartPoint` to when the next header y hits the bottom edge of the header: translate
-        //   equally to scroll. This will cause the header to stay at the top of the scroll view.
-        // - Past the collision with the next header y: no more translation. This will cause the
-        //   header to continue scrolling up and make room for the next sticky header.
-        //   In the case that there is no next header just translate equally to
-        //   scroll indefinitely.
-        if (scrollViewHeight != null) {
-          const stickStartPoint = layoutY + layoutHeight - scrollViewHeight;
-          if (stickStartPoint > 0) {
-            inputRange.push(stickStartPoint);
-            outputRange.push(0);
-            inputRange.push(stickStartPoint + 1);
-            outputRange.push(1);
-            // If the next sticky header has not loaded yet (probably windowing) or is the last
-            // we can just keep it sticked forever.
-            const collisionPoint =
-              (nextHeaderLayoutY || 0) - layoutHeight - scrollViewHeight;
-            if (collisionPoint > stickStartPoint) {
-              inputRange.push(collisionPoint, collisionPoint + 1);
-              outputRange.push(
-                collisionPoint - stickStartPoint,
-                collisionPoint - stickStartPoint,
-              );
-            }
-          }
+    if (!this._animatedValueListener) {
+      // This is called whenever the (Interpolated) Animated Value
+      // updates, which is several times per frame during scrolling.
+      // To ensure that the Fabric ShadowTree has the most recent
+      // translate style of this node, we debounce the value and then
+      // pass it through to the underlying node during render.
+      // This is:
+      // 1. Only an issue in Fabric.
+      // 2. Worse in Android than iOS. In Android, but not iOS, you
+      //    can touch and move your finger slightly and still trigger
+      //    a "tap" event. In iOS, moving will cancel the tap in
+      //    both Fabric and non-Fabric. On Android when you move
+      //    your finger, the hit-detection moves from the Android
+      //    platform to JS, so we need the ShadowTree to have knowledge
+      //    of the current position.
+      this._animatedValueListener = ({value}) => {
+        // When the AnimatedInterpolation is recreated, it always initializes
+        // to a value of zero and emits a value change of 0 to its listeners.
+        if (value === 0 && !this._haveReceivedInitialZeroTranslateY) {
+          this._haveReceivedInitialZeroTranslateY = true;
+          return;
         }
-      } else {
-        // The interpolation looks like:
-        // - Negative scroll: no translation
-        // - From 0 to the y of the header: no translation. This will cause the header
-        //   to scroll normally until it reaches the top of the scroll view.
-        // - From header y to when the next header y hits the bottom edge of the header: translate
-        //   equally to scroll. This will cause the header to stay at the top of the scroll view.
-        // - Past the collision with the next header y: no more translation. This will cause the
-        //   header to continue scrolling up and make room for the next sticky header.
-        //   In the case that there is no next header just translate equally to
-        //   scroll indefinitely.
-        inputRange.push(layoutY);
-        outputRange.push(0);
-        // If the next sticky header has not loaded yet (probably windowing) or is the last
-        // we can just keep it sticked forever.
-        const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
-        if (collisionPoint >= layoutY) {
-          inputRange.push(collisionPoint, collisionPoint + 1);
-          outputRange.push(collisionPoint - layoutY, collisionPoint - layoutY);
-        } else {
-          inputRange.push(layoutY + 1);
-          outputRange.push(1);
+        if (this._timer) {
+          clearTimeout(this._timer);
         }
-      }
-    }
-
-    let newAnimatedTranslateY: Animated.Node = scrollAnimatedValue.interpolate({
-      inputRange,
-      outputRange,
-    });
-
-    if (offset != null) {
-      newAnimatedTranslateY = Animated.add(newAnimatedTranslateY, offset);
+        this._timer = setTimeout(() => {
+          if (value !== this.state.translateY) {
+            this.setState({
+              translateY: value,
+            });
+          }
+        }, this._debounceTimeout);
+      };
     }
-
-    // add the event listener
-    let animatedListenerId;
-    if (isFabric) {
-      animatedListenerId = newAnimatedTranslateY.addListener(
-        animatedValueListener,
-      );
+    if (this.state.translateY !== 0 && this.state.translateY != null) {
+      this._haveReceivedInitialZeroTranslateY = false;
     }
+    this._animatedValueListenerId = translateY.addListener(
+      this._animatedValueListener,
+    );
+  }
 
-    setAnimatedTranslateY(newAnimatedTranslateY);
+  _onLayout = event => {
+    const layoutY = event.nativeEvent.layout.y;
+    const layoutHeight = event.nativeEvent.layout.height;
+    const measured = true;
 
-    // clean up the event listener and timer
-    return () => {
-      if (animatedListenerId) {
-        newAnimatedTranslateY.removeListener(animatedListenerId);
-      }
-      if (_timer.current != null) {
-        clearTimeout(_timer.current);
-      }
-    };
-  }, [nextHeaderLayoutY, measured, layoutHeight, layoutY, scrollViewHeight, scrollAnimatedValue, inverted, offset, animatedValueListener, isFabric]);
+    if (
+      layoutY !== this.state.layoutY ||
+      layoutHeight !== this.state.layoutHeight ||
+      measured !== this.state.measured
+    ) {
+      this._shouldRecreateTranslateY = true;
+    }
 
-  const _onLayout = (event: LayoutEvent) => {
-    setLayoutY(event.nativeEvent.layout.y);
-    setLayoutHeight(event.nativeEvent.layout.height);
-    setMeasured(true);
+    this.setState({
+      measured,
+      layoutY,
+      layoutHeight,
+    });
 
-    props.onLayout(event);
-    const child = React.Children.only(props.children);
+    this.props.onLayout(event);
+    const child = React.Children.only(this.props.children);
     if (child.props.onLayout) {
       child.props.onLayout(event);
     }
   };
 
-  const child = React.Children.only(props.children);
+  _setComponentRef = ref => {
+    this._ref = ref;
+  };
+
+  render(): React.Node {
+    // Fabric Detection
+    const isFabric = !!(
+      // An internal transform mangles variables with leading "_" as private.
+      // eslint-disable-next-line dot-notation
+      (this._ref && this._ref['_internalInstanceHandle']?.stateNode?.canonical)
+    );
+    // Initially and in the case of updated props or layout, we
+    // recreate this interpolated value. Otherwise, we do not recreate
+    // when there are state changes.
+    if (this._shouldRecreateTranslateY) {
+      const {inverted, scrollViewHeight} = this.props;
+      const {measured, layoutHeight, layoutY, nextHeaderLayoutY} = this.state;
+      const inputRange: Array<number> = [-1, 0];
+      const outputRange: Array<number> = [0, 0];
 
-  // TODO T68319535: remove this if NativeAnimated is rewritten for Fabric
-  const passthroughAnimatedPropExplicitValues =
-    isFabric && translateY != null
-      ? {
-          style: {transform: [{translateY: translateY}]},
+      if (measured) {
+        if (inverted) {
+          // The interpolation looks like:
+          // - Negative scroll: no translation
+          // - `stickStartPoint` is the point at which the header will start sticking.
+          //   It is calculated using the ScrollView viewport height so it is a the bottom.
+          // - Headers that are in the initial viewport will never stick, `stickStartPoint`
+          //   will be negative.
+          // - From 0 to `stickStartPoint` no translation. This will cause the header
+          //   to scroll normally until it reaches the top of the scroll view.
+          // - From `stickStartPoint` to when the next header y hits the bottom edge of the header: translate
+          //   equally to scroll. This will cause the header to stay at the top of the scroll view.
+          // - Past the collision with the next header y: no more translation. This will cause the
+          //   header to continue scrolling up and make room for the next sticky header.
+          //   In the case that there is no next header just translate equally to
+          //   scroll indefinitely.
+          if (scrollViewHeight != null) {
+            const stickStartPoint = layoutY + layoutHeight - scrollViewHeight;
+            if (stickStartPoint > 0) {
+              inputRange.push(stickStartPoint);
+              outputRange.push(0);
+              inputRange.push(stickStartPoint + 1);
+              outputRange.push(1);
+              // If the next sticky header has not loaded yet (probably windowing) or is the last
+              // we can just keep it sticked forever.
+              const collisionPoint =
+                (nextHeaderLayoutY || 0) - layoutHeight - scrollViewHeight;
+              if (collisionPoint > stickStartPoint) {
+                inputRange.push(collisionPoint, collisionPoint + 1);
+                outputRange.push(
+                  collisionPoint - stickStartPoint,
+                  collisionPoint - stickStartPoint,
+                );
+              }
+            }
+          }
+        } else {
+          // The interpolation looks like:
+          // - Negative scroll: no translation
+          // - From 0 to the y of the header: no translation. This will cause the header
+          //   to scroll normally until it reaches the top of the scroll view.
+          // - From header y to when the next header y hits the bottom edge of the header: translate
+          //   equally to scroll. This will cause the header to stay at the top of the scroll view.
+          // - Past the collision with the next header y: no more translation. This will cause the
+          //   header to continue scrolling up and make room for the next sticky header.
+          //   In the case that there is no next header just translate equally to
+          //   scroll indefinitely.
+          inputRange.push(layoutY);
+          outputRange.push(0);
+          // If the next sticky header has not loaded yet (probably windowing) or is the last
+          // we can just keep it sticked forever.
+          const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
+          if (collisionPoint >= layoutY) {
+            inputRange.push(collisionPoint, collisionPoint + 1);
+            outputRange.push(
+              collisionPoint - layoutY,
+              collisionPoint - layoutY,
+            );
+          } else {
+            inputRange.push(layoutY + 1);
+            outputRange.push(1);
+          }
         }
-      : null;
+      }
 
-  return (
-    /* $FlowFixMe[prop-missing] passthroughAnimatedPropExplicitValues isn't properly
-       included in the Animated.View flow type. */
-    <AnimatedView
-      collapsable={false}
-      nativeID={props.nativeID}
-      onLayout={_onLayout}
-      ref={_setNativeRef}
-      style={[
-        child.props.style,
-        styles.header,
-        {transform: [{translateY: animatedTranslateY}]},
-      ]}
-      passthroughAnimatedPropExplicitValues={
-        passthroughAnimatedPropExplicitValues
-      }>
-      {React.cloneElement(child, {
-        style: styles.fill, // We transfer the child style to the wrapper.
-        onLayout: undefined, // we call this manually through our this._onLayout
-      })}
-    </AnimatedView>
-  );
-});
+      this.updateTranslateListener(
+        this.props.scrollAnimatedValue.interpolate({
+          inputRange,
+          outputRange,
+        }),
+        isFabric,
+        this.props.hiddenOnScroll
+          ? new AnimatedDiffClamp(
+              this.props.scrollAnimatedValue
+                .interpolate({
+                  extrapolateLeft: 'clamp',
+                  inputRange: [layoutY, layoutY + 1],
+                  outputRange: ([0, 1]: Array<number>),
+                })
+                .interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ([0, -1]: Array<number>),
+                }),
+              -this.state.layoutHeight,
+              0,
+            )
+          : null,
+      );
+    }
+
+    const child = React.Children.only(this.props.children);
+
+    // TODO T68319535: remove this if NativeAnimated is rewritten for Fabric
+    const passthroughAnimatedPropExplicitValues =
+      isFabric && this.state.translateY != null
+        ? {
+            style: {transform: [{translateY: this.state.translateY}]},
+          }
+        : null;
+
+    return (
+      <AnimatedView
+        collapsable={false}
+        nativeID={this.props.nativeID}
+        onLayout={this._onLayout}
+        ref={this._setComponentRef}
+        style={[
+          child.props.style,
+          styles.header,
+          {transform: [{translateY: this._translateY}]},
+        ]}
+        passthroughAnimatedPropExplicitValues={
+          passthroughAnimatedPropExplicitValues
+        }>
+        {React.cloneElement(child, {
+          style: styles.fill, // We transfer the child style to the wrapper.
+          onLayout: undefined, // we call this manually through our this._onLayout
+        })}
+      </AnimatedView>
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   header: {
@@ -312,4 +328,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ScrollViewStickyHeaderWithForwardedRef;
+module.exports = ScrollViewStickyHeader;

package/Libraries/Components/Text/Tests/TextWin32Test.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const title = "TextWin32";
 export declare const displayName = "TextWin32";
 export declare const description = "TextWin32 Examples and Tests";

package/Libraries/Components/Text/TextWin32.Props.d.ts

@@ -8,7 +8,7 @@ export declare type SharedTextPropsAndroidandWin32 = {
 /**
  * Role-based text style names.
  */
-export declare type TextStyle = 'None' | 'SmallStandard' | 'SmallSecondary' | 'MediumStandard' | 'MediumSecondary' | 'MediumApp' | 'MediumBold' | 'MediumBoldApp' | 'LargeStandard' | 'LargePlusStandard' | 'ExtraLargeStandard' | 'HugeStandard';
+export declare type TextWin32TextStyle = 'None' | 'SmallStandard' | 'SmallSecondary' | 'MediumStandard' | 'MediumSecondary' | 'MediumApp' | 'MediumBold' | 'MediumBoldApp' | 'LargeStandard' | 'LargePlusStandard' | 'ExtraLargeStandard' | 'HugeStandard';
 export interface ITextWin32Props extends Omit<RN.TextProps, TextWin32OmitTypes>, BasePropsWin32 {
     onKeyDown?: (args: IKeyboardEvent) => void;
     onKeyDownCapture?: (args: IKeyboardEvent) => void;
@@ -62,7 +62,7 @@ export interface ITextWin32Props extends Omit<RN.TextProps, TextWin32OmitTypes>,
      *
      * @deprecated Use `style` instead.
      */
-    textStyle?: TextStyle;
+    textStyle?: TextWin32TextStyle;
     /** Tooltip displayed on mouse hover of this element */
     tooltip?: string;
 }

package/Libraries/Components/Text/TextWin32.Props.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextWin32.Props.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Text/TextWin32.Props.ts"],"names":[],"mappings":"","sourcesContent":["import RN = require('react-native');\nimport { SharedAccessibilityPropsIOSandWin32, OmittedAccessibilityPropsWin32, BasePropsWin32, IKeyboardEvent, IHandledKeyboardEvent } from '../View/ViewWin32.Props';\n\n// removes from interface T the members of interface K\ntype Omit<T, K> = Pick<T, Exclude<keyof T, keyof K>>;\n\nexport type TextWin32OmitTypes = Omit<RN.TextPropsAndroid, SharedTextPropsAndroidandWin32> &\n  RN.TextPropsIOS &\n  RN.AccessibilityPropsAndroid &\n  Omit<RN.AccessibilityPropsIOS, SharedAccessibilityPropsIOSandWin32> &\n  OmittedAccessibilityPropsWin32;\n\nexport type SharedTextPropsAndroidandWin32 = {\n  selectable?: boolean;\n};\n\n/**\n * Role-based text style names.\n */\nexport type TextStyle =\n  | 'None'\n  | 'SmallStandard'\n  | 'SmallSecondary'\n  | 'MediumStandard'\n  | 'MediumSecondary'\n  | 'MediumApp'\n  | 'MediumBold'\n  | 'MediumBoldApp'\n  | 'LargeStandard'\n  | 'LargePlusStandard'\n  | 'ExtraLargeStandard'\n  | 'HugeStandard';\n\nexport interface ITextWin32Props extends Omit<RN.TextProps, TextWin32OmitTypes>, BasePropsWin32 {\n  onKeyDown?: (args: IKeyboardEvent) => void;\n  onKeyDownCapture?: (args: IKeyboardEvent) => void;\n  onKeyUp?: (args: IKeyboardEvent) => void;\n  onKeyUpCapture?: (args: IKeyboardEvent) => void;\n\n  keyDownEvents?: IHandledKeyboardEvent[];\n  keyUpEvents?: IHandledKeyboardEvent[];\n\n  /** Enables a focusable label with copyability but without character selectability (property:selectable) */\n  focusable?: boolean;\n\n  /**\n   * The onBlur event occurs when an element loses focus.  The opposite of onBlur is onFocus.  Note that in React\n   * Native, unlike in the web, the onBlur event bubbles (similar to onFocusOut in the web).\n   *\n   * `ev.target === ev.currentTarget` when the focus is being lost from this component.\n   * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n   */\n  onBlur?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n  /**\n   * The onBlur event occurs when an element loses focus.  The opposite of onBlur is onFocus.  Note that in React\n   * Native, unlike in the web, the onBlur event bubbles (similar to onFocusOut in the web).\n   *\n   * `ev.target === ev.currentTarget` when the focus is being lost from this component.\n   * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n   */\n  onBlurCapture?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n  /**\n   * The onFocus event occurs when an element gets focus. The opposite of onFocus is onBlur.  Note that in React\n   * Native, unlike in the web, the onFocus event bubbles (similar to onFocusIn in the web).\n   *\n   * `ev.target === ev.currentTarget` when the focus is being lost from this component.\n   * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n   */\n  onFocus?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n  /**\n   * The onFocus event occurs when an element gets focus. The opposite of onFocus is onBlur.  Note that in React\n   * Native, unlike in the web, the onFocus event bubbles (similar to onFocusIn in the web).\n   *\n   * `ev.target === ev.currentTarget` when the focus is being lost from this component.\n   * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n   */\n  onFocusCapture?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n  \n  /**\n   * Role-based styling of the text control. The styles applied include\n   * font face, size, weight and color. These styles take precedence over\n   * the `style` property.\n   *\n   * @remarks\n   * The default value is `MediumStandard`.\n   *\n   * When set to `None`, role-based styling is disabled.\n   *\n   * @deprecated Use `style` instead.\n   */\n  textStyle?: TextStyle;\n\n  /** Tooltip displayed on mouse hover of this element */\n  tooltip?: string;\n}\n"]}
+{"version":3,"file":"TextWin32.Props.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Text/TextWin32.Props.ts"],"names":[],"mappings":"","sourcesContent":["import RN = require('react-native');\nimport { SharedAccessibilityPropsIOSandWin32, OmittedAccessibilityPropsWin32, BasePropsWin32, IKeyboardEvent, IHandledKeyboardEvent } from '../View/ViewWin32.Props';\n\n// removes from interface T the members of interface K\ntype Omit<T, K> = Pick<T, Exclude<keyof T, keyof K>>;\n\nexport type TextWin32OmitTypes = Omit<RN.TextPropsAndroid, SharedTextPropsAndroidandWin32> &\n  RN.TextPropsIOS &\n  RN.AccessibilityPropsAndroid &\n  Omit<RN.AccessibilityPropsIOS, SharedAccessibilityPropsIOSandWin32> &\n  OmittedAccessibilityPropsWin32;\n\nexport type SharedTextPropsAndroidandWin32 = {\n  selectable?: boolean;\n};\n\n/**\n * Role-based text style names.\n */\nexport type TextWin32TextStyle =\n  | 'None'\n  | 'SmallStandard'\n  | 'SmallSecondary'\n  | 'MediumStandard'\n  | 'MediumSecondary'\n  | 'MediumApp'\n  | 'MediumBold'\n  | 'MediumBoldApp'\n  | 'LargeStandard'\n  | 'LargePlusStandard'\n  | 'ExtraLargeStandard'\n  | 'HugeStandard';\n\nexport interface ITextWin32Props extends Omit<RN.TextProps, TextWin32OmitTypes>, BasePropsWin32 {\n  onKeyDown?: (args: IKeyboardEvent) => void;\n  onKeyDownCapture?: (args: IKeyboardEvent) => void;\n  onKeyUp?: (args: IKeyboardEvent) => void;\n  onKeyUpCapture?: (args: IKeyboardEvent) => void;\n\n  keyDownEvents?: IHandledKeyboardEvent[];\n  keyUpEvents?: IHandledKeyboardEvent[];\n\n  /** Enables a focusable label with copyability but without character selectability (property:selectable) */\n  focusable?: boolean;\n\n  /**\n   * The onBlur event occurs when an element loses focus.  The opposite of onBlur is onFocus.  Note that in React\n   * Native, unlike in the web, the onBlur event bubbles (similar to onFocusOut in the web).\n   *\n   * `ev.target === ev.currentTarget` when the focus is being lost from this component.\n   * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n   */\n  onBlur?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n  /**\n   * The onBlur event occurs when an element loses focus.  The opposite of onBlur is onFocus.  Note that in React\n   * Native, unlike in the web, the onBlur event bubbles (similar to onFocusOut in the web).\n   *\n   * `ev.target === ev.currentTarget` when the focus is being lost from this component.\n   * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n   */\n  onBlurCapture?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n  /**\n   * The onFocus event occurs when an element gets focus. The opposite of onFocus is onBlur.  Note that in React\n   * Native, unlike in the web, the onFocus event bubbles (similar to onFocusIn in the web).\n   *\n   * `ev.target === ev.currentTarget` when the focus is being lost from this component.\n   * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n   */\n  onFocus?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n  /**\n   * The onFocus event occurs when an element gets focus. The opposite of onFocus is onBlur.  Note that in React\n   * Native, unlike in the web, the onFocus event bubbles (similar to onFocusIn in the web).\n   *\n   * `ev.target === ev.currentTarget` when the focus is being lost from this component.\n   * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n   */\n  onFocusCapture?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n  \n  /**\n   * Role-based styling of the text control. The styles applied include\n   * font face, size, weight and color. These styles take precedence over\n   * the `style` property.\n   *\n   * @remarks\n   * The default value is `MediumStandard`.\n   *\n   * When set to `None`, role-based styling is disabled.\n   *\n   * @deprecated Use `style` instead.\n   */\n  textStyle?: TextWin32TextStyle;\n\n  /** Tooltip displayed on mouse hover of this element */\n  tooltip?: string;\n}\n"]}

package/Libraries/Components/Text/TextWin32.js

@@ -11,7 +11,7 @@ class TextWin32 extends react_1.default.Component {
         super(props);
     }
     render() {
-        return react_1.default.createElement(RN.Text, Object.assign({}, this.props));
+        return react_1.default.createElement(RN.Text, { ...this.props });
     }
 }
 exports.TextWin32 = TextWin32;

package/Libraries/Components/Text/TextWin32.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextWin32.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Text/TextWin32.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB,mCAAoC;AAWpC,MAAa,SAAU,SAAQ,eAAK,CAAC,SAA8B;IACjE,YAAY,KAAsB;QAChC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEM,MAAM;QACX,OAAO,8BAAC,EAAE,CAAC,IAAI,oBAAM,IAAI,CAAC,KAAwB,EAAI,CAAC;IACzD,CAAC;CACF;AARD,8BAQC","sourcesContent":["import React from 'react'\nimport RN = require('react-native');\nimport { ITextWin32Props } from './TextWin32.Props';\nimport { UseFrom } from '../View/ViewWin32.Props';\n\n/**\n * React-native <Text> control with additional Win32-specific functionality.\n */\n\ntype InnerViewProps = UseFrom<ITextWin32Props, RN.TextProps, 'accessibilityRole'> &\n  UseFrom<ITextWin32Props, RN.TextProps, 'accessibilityState'> &\n  UseFrom<ITextWin32Props, RN.TextProps, 'accessibilityActions'>;\nexport class TextWin32 extends React.Component<ITextWin32Props, {}> {\n  constructor(props: ITextWin32Props) {\n    super(props);\n  }\n\n  public render() {\n    return <RN.Text {...(this.props as InnerViewProps)} />;\n  }\n}\n"]}
+{"version":3,"file":"TextWin32.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Text/TextWin32.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB,mCAAoC;AAWpC,MAAa,SAAU,SAAQ,eAAK,CAAC,SAA8B;IACjE,YAAY,KAAsB;QAChC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEM,MAAM;QACX,OAAO,8BAAC,EAAE,CAAC,IAAI,OAAM,IAAI,CAAC,KAAwB,GAAI,CAAC;IACzD,CAAC;CACF;AARD,8BAQC","sourcesContent":["import React from 'react'\nimport RN = require('react-native');\nimport { ITextWin32Props } from './TextWin32.Props';\nimport { UseFrom } from '../View/ViewWin32.Props';\n\n/**\n * React-native <Text> control with additional Win32-specific functionality.\n */\n\ntype InnerViewProps = UseFrom<ITextWin32Props, RN.TextProps, 'accessibilityRole'> &\n  UseFrom<ITextWin32Props, RN.TextProps, 'accessibilityState'> &\n  UseFrom<ITextWin32Props, RN.TextProps, 'accessibilityActions'>;\nexport class TextWin32 extends React.Component<ITextWin32Props, {}> {\n  constructor(props: ITextWin32Props) {\n    super(props);\n  }\n\n  public render() {\n    return <RN.Text {...(this.props as InnerViewProps)} />;\n  }\n}\n"]}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const title = "TextInput";
 export declare const displayName = "TextInput";
 export declare const description = "TextInput Examples and Tests";