@office-iss/react-native-win32 0.67.0-preview.2 → 0.68.0-preview.2

package/Libraries/Components/DatePickerAndroid/NativeDatePickerAndroid.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -92,12 +92,12 @@ type NativeProps = $ReadOnly<{|
   /**
    * Function called whenever the navigation view has been opened.
    */
-  onDrawerOpen?: ?DirectEventHandler<null, 'topDrawerOpened'>,
+  onDrawerOpen?: ?DirectEventHandler<null>,
 
   /**
    * Function called whenever the navigation view has been closed.
    */
-  onDrawerClose?: ?DirectEventHandler<null, 'topDrawerClosed'>,
+  onDrawerClose?: ?DirectEventHandler<null>,
 
   /**
    * Make the drawer take the entire screen and draw the background of the

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -162,9 +162,10 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
     return {Left: 'left', Right: 'right'};
   }
 
-  _nativeRef = React.createRef<
-    React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
-  >();
+  _nativeRef =
+    React.createRef<
+      React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
+    >();
 
   state: State = {statusBarBackgroundColor: null};
 

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/Keyboard/Keyboard.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -103,11 +103,12 @@ type KeyboardEventDefinitions = {
  */
 
 class Keyboard {
-  _emitter: NativeEventEmitter<KeyboardEventDefinitions> = new NativeEventEmitter(
-    // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
-    // If you want to use the native module on other platforms, please remove this condition and test its behavior
-    Platform.OS !== 'ios' ? null : NativeKeyboardObserver,
-  );
+  _emitter: NativeEventEmitter<KeyboardEventDefinitions> =
+    new NativeEventEmitter(
+      // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+      // If you want to use the native module on other platforms, please remove this condition and test its behavior
+      Platform.OS !== 'ios' ? null : NativeKeyboardObserver,
+    );
 
   /**
    * The `addListener` function connects a JavaScript function to an identified native
@@ -141,9 +142,9 @@ class Keyboard {
   }
 
   /**
-   * @deprecated Use `remove` on the EventSubscription from `addEventListener`.
+   * @deprecated Use `remove` on the EventSubscription from `addListener`.
    */
-  removeEventListener<K: $Keys<KeyboardEventDefinitions>>(
+  removeListener<K: $Keys<KeyboardEventDefinitions>>(
     eventType: K,
     listener: (...$ElementType<KeyboardEventDefinitions, K>) => mixed,
   ): void {

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,7 +22,7 @@ import type {
   ViewLayout,
   ViewLayoutEvent,
 } from '../View/ViewPropTypes';
-import type {KeyboardEvent} from './Keyboard';
+import type {KeyboardEvent, KeyboardEventCoordinates} from './Keyboard';
 
 type Props = $ReadOnly<{|
   ...ViewProps,
@@ -71,7 +71,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     this.viewRef = React.createRef();
   }
 
-  _relativeKeyboardHeight(keyboardFrame): number {
+  _relativeKeyboardHeight(keyboardFrame: KeyboardEventCoordinates): number {
     const frame = this._frame;
     if (!frame || !keyboardFrame) {
       return 0;
@@ -87,7 +87,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
 
   _onKeyboardChange = (event: ?KeyboardEvent) => {
     this._keyboardEvent = event;
-    this._updateBottomIfNecesarry();
+    this._updateBottomIfNecessary();
   };
 
   _onLayout = (event: ViewLayoutEvent) => {
@@ -99,11 +99,15 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     }
 
     if (wasFrameNull) {
-      this._updateBottomIfNecesarry();
+      this._updateBottomIfNecessary();
+    }
+
+    if (this.props.onLayout) {
+      this.props.onLayout(event);
     }
   };
 
-  _updateBottomIfNecesarry = () => {
+  _updateBottomIfNecessary = () => {
     if (this._keyboardEvent == null) {
       this.setState({bottom: 0});
       return;
@@ -157,6 +161,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
       // eslint-disable-next-line no-unused-vars
       keyboardVerticalOffset = 0,
       style,
+      onLayout,
       ...props
     } = this.props;
     const bottomHeight = enabled === true ? this.state.bottom : 0;

package/Libraries/Components/Keyboard/NativeKeyboardObserver.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/MaskedView/MaskedViewIOS.android.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/MaskedView/MaskedViewIOS.ios.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/MaskedView/MaskedViewIOS.win32.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/MaskedView/RCTMaskedViewNativeComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/Pressable/Pressable.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -23,7 +23,11 @@ import type {
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
 import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
-import type {LayoutEvent, PressEvent} from '../../Types/CoreEventTypes';
+import type {
+  LayoutEvent,
+  MouseEvent,
+  PressEvent,
+} from '../../Types/CoreEventTypes';
 import View from '../View/View';
 
 type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
@@ -63,6 +67,16 @@ type Props = $ReadOnly<{|
    */
   children: React.Node | ((state: StateCallbackType) => React.Node),
 
+  /**
+   * Duration to wait after hover in before calling `onHoverIn`.
+   */
+  delayHoverIn?: ?number,
+
+  /**
+   * Duration to wait after hover out before calling `onHoverOut`.
+   */
+  delayHoverOut?: ?number,
+
   /**
    * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
    */
@@ -89,6 +103,16 @@ type Props = $ReadOnly<{|
    */
   onLayout?: ?(event: LayoutEvent) => mixed,
 
+  /**
+   * Called when the hover is activated to provide visual feedback.
+   */
+  onHoverIn?: ?(event: MouseEvent) => mixed,
+
+  /**
+   * Called when the hover is deactivated to undo visual feedback.
+   */
+  onHoverOut?: ?(event: MouseEvent) => mixed,
+
   /**
    * Called when a long-tap gesture is detected.
    */
@@ -152,9 +176,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
     android_ripple,
     cancelable,
     children,
+    delayHoverIn,
+    delayHoverOut,
     delayLongPress,
     disabled,
     focusable,
+    onHoverIn,
+    onHoverOut,
     onLongPress,
     onPress,
     onPressIn,
@@ -196,8 +224,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
       hitSlop,
       pressRectOffset: pressRetentionOffset,
       android_disableSound,
+      delayHoverIn,
+      delayHoverOut,
       delayLongPress,
       delayPressIn: unstable_pressDelay,
+      onHoverIn,
+      onHoverOut,
       onLongPress,
       onPress,
       onPressIn(event: PressEvent): void {
@@ -224,9 +256,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
       android_disableSound,
       android_rippleConfig,
       cancelable,
+      delayHoverIn,
+      delayHoverOut,
       delayLongPress,
       disabled,
       hitSlop,
+      onHoverIn,
+      onHoverOut,
       onLongPress,
       onPress,
       onPressIn,

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

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

package/Libraries/Components/Pressable/useAndroidRippleForView.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.