npm - @office-iss/react-native-win32 - Versions diffs - 0.80.0-preview.1 → 0.81.0-preview.1 - Mend

@office-iss/react-native-win32 0.80.0-preview.1 → 0.81.0-preview.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (513) hide show

package/Libraries/Components/Button.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 'use strict';
@@ -63,6 +63,7 @@ export type ButtonProps = $ReadOnly<{
     @platform tv
     @default false
+    @deprecated Use `focusable` instead
    */
   hasTVPreferredFocus?: ?boolean,
@@ -280,15 +281,17 @@ export type ButtonProps = $ReadOnly<{
   ```
  */
-const Touchable: typeof TouchableNativeFeedback | typeof TouchableOpacity =
+const NativeTouchable:
+  | typeof TouchableNativeFeedback
+  | typeof TouchableOpacity =
   Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
-type ButtonRef = React.ElementRef<typeof Touchable>;
+type ButtonRef = React.ElementRef<typeof NativeTouchable>;
 const Button: component(
   ref?: React.RefSetter<ButtonRef>,
   ...props: ButtonProps
-) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
+) = ({ref, ...props}: {ref?: React.RefSetter<ButtonRef>, ...ButtonProps}) => {
   const {
     accessibilityLabel,
     accessibilityState,
@@ -361,7 +364,7 @@ const Button: component(
       : importantForAccessibility;
   return (
-    <Touchable
+    <NativeTouchable
       accessible={accessible}
       accessibilityActions={accessibilityActions}
       onAccessibilityAction={onAccessibilityAction}
@@ -390,9 +393,9 @@ const Button: component(
           {formattedTitle}
         </Text>
       </View>
-    </Touchable>
+    </NativeTouchable>
   );
-});
+};
 Button.displayName = 'Button';

package/Libraries/Components/Button.win32.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 'use strict';
@@ -64,6 +64,7 @@ export type ButtonProps = $ReadOnly<{
     @platform tv
     @default false
+    @deprecated Use `focusable` instead
    */
   hasTVPreferredFocus?: ?boolean,
@@ -283,15 +284,17 @@ export type ButtonProps = $ReadOnly<{
   ```
  */
-const Touchable: typeof TouchableNativeFeedback | typeof TouchableOpacity =
+const NativeTouchable:
+  | typeof TouchableNativeFeedback
+  | typeof TouchableOpacity =
   Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
-type ButtonRef = React.ElementRef<typeof Touchable>;
+type ButtonRef = React.ElementRef<typeof NativeTouchable>;
 const Button: component(
   ref?: React.RefSetter<ButtonRef>,
   ...props: ButtonProps
-) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
+) = ({ref, ...props}: {ref?: React.RefSetter<ButtonRef>, ...ButtonProps}) => {
   // Win32
   const {
     accessibilityLabel,
@@ -369,7 +372,7 @@ const Button: component(
       : importantForAccessibility;
   return (
-    <Touchable
+    <NativeTouchable
       accessible={accessible}
       accessibilityActions={accessibilityActions}
       onAccessibilityAction={onAccessibilityAction}
@@ -398,9 +401,9 @@ const Button: component(
           {formattedTitle}
         </Text>
       </View>
-    </Touchable>
+    </NativeTouchable>
   );
-});
+};
 Button.displayName = 'Button';

package/Libraries/Components/Clipboard/Clipboard.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 import NativeClipboard from './NativeClipboard';

package/Libraries/Components/Clipboard/NativeClipboard.js CHANGED Viewed

@@ -9,5 +9,4 @@
  */
 export * from '../../../src/private/specs_DEPRECATED/modules/NativeClipboard';
-import NativeClipboard from '../../../src/private/specs_DEPRECATED/modules/NativeClipboard';
-export default NativeClipboard;
+export {default} from '../../../src/private/specs_DEPRECATED/modules/NativeClipboard';

package/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js CHANGED Viewed

@@ -4,10 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 export * from '../../../src/private/specs_DEPRECATED/components/AndroidDrawerLayoutNativeComponent';
-import AndroidDrawerLayoutNativeComponent from '../../../src/private/specs_DEPRECATED/components/AndroidDrawerLayoutNativeComponent';
-export default AndroidDrawerLayoutNativeComponent;
+export {default} from '../../../src/private/specs_DEPRECATED/components/AndroidDrawerLayoutNativeComponent';

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

@@ -28,8 +28,9 @@ import AndroidDrawerLayoutNativeComponent, {
 } from './AndroidDrawerLayoutNativeComponent';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
+import {createRef} from 'react';
-const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
+const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'] as const;
 /**
  * React component that wraps the platform `DrawerLayout` (Android only). The
@@ -76,9 +77,7 @@ class DrawerLayoutAndroid
   // $FlowFixMe[missing-local-annot]
   _nativeRef =
-    React.createRef<
-      React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
-    >();
+    createRef<React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>>();
   state: DrawerLayoutAndroidState = {
     drawerOpened: false,

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.ios.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 'use strict';

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 // NOTE: This file supports backwards compatibility of subpath (deep) imports

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js.flow CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 import DrawerLayoutAndroid from './DrawerLayoutAndroidFallback';

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroidFallback.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 'use strict';

package/Libraries/Components/Keyboard/Keyboard.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
@@ -24,6 +24,7 @@ import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo';
 import View from '../View/View';
 import Keyboard from './Keyboard';
 import * as React from 'react';
+import {createRef} from 'react';
 export type KeyboardAvoidingViewProps = $ReadOnly<{
   ...ViewProps,
@@ -73,7 +74,7 @@ class KeyboardAvoidingView extends React.Component<
   constructor(props: KeyboardAvoidingViewProps) {
     super(props);
     this.state = {bottom: 0};
-    this.viewRef = React.createRef();
+    this.viewRef = createRef();
   }
   async _relativeKeyboardHeight(

package/Libraries/Components/Keyboard/NativeKeyboardObserver.js CHANGED Viewed

@@ -9,5 +9,4 @@
  */
 export * from '../../../src/private/specs_DEPRECATED/modules/NativeKeyboardObserver';
-import NativeKeyboardObserver from '../../../src/private/specs_DEPRECATED/modules/NativeKeyboardObserver';
-export default NativeKeyboardObserver;
+export {default} from '../../../src/private/specs_DEPRECATED/modules/NativeKeyboardObserver';

package/Libraries/Components/LayoutConformance/LayoutConformance.js CHANGED Viewed

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 import StyleSheet from '../../StyleSheet/StyleSheet';

package/Libraries/Components/Pressable/Pressable.js CHANGED Viewed

@@ -8,6 +8,7 @@
  * @format
  */
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
   GestureResponderEvent,
   LayoutChangeEvent,
@@ -24,9 +25,7 @@ import useAndroidRippleForView, {
   type PressableAndroidRippleConfig,
 } from './useAndroidRippleForView';
 import * as React from 'react';
-import {useMemo, useRef, useState} from 'react';
-type ViewStyleProp = React.ElementConfig<typeof View>['style'];
+import {memo, useMemo, useRef, useState} from 'react';
 export type {PressableAndroidRippleConfig};
@@ -165,10 +164,13 @@ type Instance = React.ElementRef<typeof View>;
  * Component used to build display components that should respond to whether the
  * component is currently pressed or not.
  */
-function Pressable(
-  props: PressableProps,
-  forwardedRef: React.RefSetter<Instance>,
-): React.Node {
+function Pressable({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<Instance>,
+  ...PressableProps,
+}): React.Node {
   const {
     accessible,
     accessibilityState,
@@ -189,6 +191,8 @@ function Pressable(
     disabled,
     focusable,
     hitSlop,
+    onBlur,
+    onFocus,
     onHoverIn,
     onHoverOut,
     onLongPress,
@@ -260,6 +264,8 @@ function Pressable(
       delayHoverOut,
       delayLongPress,
       delayPressIn: unstable_pressDelay,
+      onBlur,
+      onFocus,
       onHoverIn,
       onHoverOut,
       onLongPress,
@@ -298,6 +304,8 @@ function Pressable(
       delayLongPress,
       disabled,
       hitSlop,
+      onBlur,
+      onFocus,
       onHoverIn,
       onHoverOut,
       onLongPress,
@@ -311,6 +319,7 @@ function Pressable(
       unstable_pressDelay,
     ],
   );
   const eventHandlers = usePressability(config);
   return (
@@ -331,7 +340,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
   return [pressed || forcePressed, setPressed];
 }
-const MemoedPressable = React.memo(React.forwardRef(Pressable));
+const MemoedPressable = memo(Pressable);
 MemoedPressable.displayName = 'Pressable';
 export default (MemoedPressable: component(

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

@@ -8,6 +8,7 @@
  * @format
  */
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
   GestureResponderEvent,
   LayoutChangeEvent,
@@ -28,12 +29,10 @@ import useAndroidRippleForView, {
   type PressableAndroidRippleConfig,
 } from './useAndroidRippleForView';
 import * as React from 'react';
-import {useMemo, useRef, useState} from 'react';
+import {memo, useMemo, useRef, useState} from 'react';
 import type {HandledKeyboardEvent} from '../../Components/View/ViewPropTypes';
 import View from '../View/View';
-type ViewStyleProp = React.ElementConfig<typeof View>['style'];
 export type {PressableAndroidRippleConfig};
 export type PressableStateCallbackType = $ReadOnly<{
@@ -211,10 +210,13 @@ type Instance = React.ElementRef<typeof View>;
  * Component used to build display components that should respond to whether the
  * component is currently pressed or not.
  */
-function Pressable(
-  props: PressableProps,
-  forwardedRef: React.RefSetter<Instance>,
-): React.Node {
+function Pressable({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<Instance>,
+  ...PressableProps,
+}): React.Node {
   const {
     accessible,
     accessibilityState,
@@ -237,6 +239,8 @@ function Pressable(
     disabled,
     focusable,
     hitSlop,
+    onBlur,
+    onFocus,
     onHoverIn,
     onHoverOut,
     onLongPress,
@@ -245,8 +249,6 @@ function Pressable(
     onPressMove,
     onPressOut,
     // [Windows
-    onBlur,
-    onFocus,
     onKeyDown,
     onKeyUp,
     // Windows]
@@ -316,6 +318,8 @@ function Pressable(
       delayHoverOut,
       delayLongPress,
       delayPressIn: unstable_pressDelay,
+      onBlur,
+      onFocus,
       onHoverIn,
       onHoverOut,
       onLongPress,
@@ -345,8 +349,6 @@ function Pressable(
         }
       },
       // [Windows
-      onBlur,
-      onFocus,
       onKeyDown,
       onKeyUp,
       // Windows]
@@ -360,6 +362,8 @@ function Pressable(
       delayLongPress,
       disabled,
       hitSlop,
+      onBlur,
+      onFocus,
       onHoverIn,
       onHoverOut,
       onLongPress,
@@ -368,8 +372,6 @@ function Pressable(
       onPressMove,
       onPressOut,
       // [Windows
-      onBlur,
-      onFocus,
       onKeyDown,
       onKeyUp,
       // Windows]
@@ -379,6 +381,7 @@ function Pressable(
       unstable_pressDelay,
     ],
   );
   const eventHandlers = usePressability(config);
   return (
@@ -398,7 +401,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
   return [pressed || forcePressed, setPressed];
 }
-const MemoedPressable = React.memo(React.forwardRef(Pressable));
+const MemoedPressable = memo(Pressable);
 MemoedPressable.displayName = 'Pressable';
 export default (MemoedPressable: component(

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js CHANGED Viewed

@@ -39,23 +39,24 @@ export type {ProgressBarAndroidProps};
  * },
  * ```
  */
-const ProgressBarAndroidWithForwardedRef: component(
+const ProgressBarAndroid: component(
   ref?: React.RefSetter<
     React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
   >,
   ...props: ProgressBarAndroidProps
-) = React.forwardRef(function ProgressBarAndroid(
-  {
-    // $FlowFixMe[incompatible-type]
-    styleAttr = 'Normal',
-    indeterminate = true,
-    animating = true,
-    ...restProps
-  }: ProgressBarAndroidProps,
-  forwardedRef: ?React.RefSetter<
+) = function ProgressBarAndroid({
+  ref: forwardedRef,
+  // $FlowFixMe[incompatible-type]
+  styleAttr = 'Normal',
+  indeterminate = true,
+  animating = true,
+  ...restProps
+}: {
+  ref?: React.RefSetter<
     React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
   >,
-) {
+  ...ProgressBarAndroidProps,
+}) {
   return (
     <ProgressBarAndroidNativeComponent
       styleAttr={styleAttr}
@@ -65,6 +66,6 @@ const ProgressBarAndroidWithForwardedRef: component(
       ref={forwardedRef}
     />
   );
-});
+};
-export default ProgressBarAndroidWithForwardedRef;
+export default ProgressBarAndroid;

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js CHANGED Viewed

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroidNativeComponent.js CHANGED Viewed

@@ -4,10 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 export * from '../../../src/private/specs_DEPRECATED/components/ProgressBarAndroidNativeComponent';
-import ProgressBarAndroidNativeComponent from '../../../src/private/specs_DEPRECATED/components/ProgressBarAndroidNativeComponent';
-export default ProgressBarAndroidNativeComponent;
+export {default} from '../../../src/private/specs_DEPRECATED/components/ProgressBarAndroidNativeComponent';

package/Libraries/Components/RefreshControl/AndroidSwipeRefreshLayoutNativeComponent.js CHANGED Viewed

@@ -4,10 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 export * from '../../../src/private/specs_DEPRECATED/components/AndroidSwipeRefreshLayoutNativeComponent';
-import AndroidSwipeRefreshLayoutNativeComponent from '../../../src/private/specs_DEPRECATED/components/AndroidSwipeRefreshLayoutNativeComponent';
-export default AndroidSwipeRefreshLayoutNativeComponent;
+export {default} from '../../../src/private/specs_DEPRECATED/components/AndroidSwipeRefreshLayoutNativeComponent';

package/Libraries/Components/RefreshControl/PullToRefreshViewNativeComponent.js CHANGED Viewed

@@ -4,10 +4,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 export * from '../../../src/private/specs_DEPRECATED/components/PullToRefreshViewNativeComponent';
 import PullToRefreshViewNativeComponent from '../../../src/private/specs_DEPRECATED/components/PullToRefreshViewNativeComponent';
 export default PullToRefreshViewNativeComponent;

package/Libraries/Components/RefreshControl/RefreshControl.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 import type {ColorValue} from '../../StyleSheet/StyleSheet';

package/Libraries/Components/SafeAreaView/RCTSafeAreaViewNativeComponent.js CHANGED Viewed

@@ -4,10 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 export * from '../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent';
-import RCTSafeAreaViewNativeComponent from '../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent';
-export default RCTSafeAreaViewNativeComponent;
+export {default} from '../../../src/private/specs_DEPRECATED/components/RCTSafeAreaViewNativeComponent';

package/Libraries/Components/SafeAreaView/SafeAreaView.d.ts CHANGED Viewed

@@ -13,12 +13,21 @@ import {NativeMethods} from '../../../types/public/ReactNativeTypes';
 import {ViewProps} from '../View/ViewPropTypes';
 /**
+ * @deprecated
+ * Use `react-native-safe-area-context` instead. This component is deprecated and will be removed in a future release.
+ *
  * Renders nested content and automatically applies paddings reflect the portion of the view
  * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
  * Moreover, and most importantly, Safe Area's paddings reflect physical limitation of the screen,
  * such as rounded corners or camera notches (aka sensor housing area on iPhone X).
  */
 declare class SafeAreaViewComponent extends React.Component<ViewProps> {}
 declare const SafeAreaViewBase: Constructor<NativeMethods> &
   typeof SafeAreaViewComponent;
+/**
+ * @deprecated
+ * Use `react-native-safe-area-context` instead. This component is deprecated and will be removed in a future release.
+ */
 export class SafeAreaView extends SafeAreaViewBase {}

package/Libraries/Components/SafeAreaView/SafeAreaView.js CHANGED Viewed

@@ -22,8 +22,9 @@ import * as React from 'react';
  * Moreover, and most importantly, Safe Area's paddings reflect physical
  * limitation of the screen, such as rounded corners or camera notches (aka
  * sensor housing area on iPhone X).
+ * @deprecated Use `react-native-safe-area-context` instead. This component will be removed in a future release.
  */
-const exported: component(
+const SafeAreaView: component(
   ref?: React.RefSetter<React.ElementRef<typeof View>>,
   ...props: ViewProps
 ) = Platform.select({
@@ -31,4 +32,4 @@ const exported: component(
   default: View,
 });
-export default exported;
+export default SafeAreaView;

package/Libraries/Components/SafeAreaView/SafeAreaView.win32.js CHANGED Viewed

@@ -22,8 +22,9 @@ import * as React from 'react';
  * Moreover, and most importantly, Safe Area's paddings reflect physical
  * limitation of the screen, such as rounded corners or camera notches (aka
  * sensor housing area on iPhone X).
+ * @deprecated Use `react-native-safe-area-context` instead. This component will be removed in a future release.
  */
-const exported: component(
+const SafeAreaView: component(
   ref?: React.RefSetter<React.ElementRef<typeof View>>,
   ...props: ViewProps
 ) = Platform.select({
@@ -31,4 +32,4 @@ const exported: component(
   default: View,
 });
-export default exported;
+export default SafeAreaView;

package/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js CHANGED Viewed

@@ -4,10 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 export * from '../../../src/private/specs_DEPRECATED/components/AndroidHorizontalScrollContentViewNativeComponent';
-import AndroidHorizontalScrollContentViewNativeComponent from '../../../src/private/specs_DEPRECATED/components/AndroidHorizontalScrollContentViewNativeComponent';
-export default AndroidHorizontalScrollContentViewNativeComponent;
+export {default} from '../../../src/private/specs_DEPRECATED/components/AndroidHorizontalScrollContentViewNativeComponent';

package/Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js CHANGED Viewed

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 import type {HostComponent} from '../../../src/private/types/HostComponent';