react-native-windows 0.73.11 → 0.74.0-preview.1

package/Libraries/Components/Button.windows.js

@@ -1,17 +1,17 @@
 /**
- * Copyright (c) Microsoft Corporation.
- * Licensed under the MIT License.
+ * 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.
  *
  * @format
  * @flow
- * @generate-docs
  */
 
 'use strict';
 
 import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {Button as ButtonType} from './Button.flow';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -25,8 +25,8 @@ import Text from '../Text/Text';
 // import TouchableOpacity from './Touchable/TouchableOpacity';
 import TouchableHighlight from './Touchable/TouchableHighlight';
 import {PlatformColor} from '../StyleSheet/PlatformColorValueTypes';
-import Platform from '../Utilities/Platform';
 // Windows]
+import Platform from '../Utilities/Platform';
 import View from './View/View';
 import invariant from 'invariant';
 import * as React from 'react';
@@ -171,7 +171,6 @@ type ButtonProps = $ReadOnly<{|
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
-
   // [Windows
   /**
     Set the order in which elements receive focus when the user navigates through them by pressing Tab.
@@ -291,224 +290,218 @@ type ButtonProps = $ReadOnly<{|
   ```
  */
 
-class Button extends React.Component<
+const Button: React.AbstractComponent<
   ButtonProps,
-  {hover: boolean, pressed: boolean},
-> {
+  React.ElementRef<typeof TouchableHighlight>,
+> = React.forwardRef((props: ButtonProps, ref) => {
+  // Windows
   // [Windows
-  constructor(props: Object) {
-    super(props);
-    this.state = {
-      hover: false,
-      pressed: false,
-    };
-  }
+  const [hover, setHover] = React.useState(false);
+  const [pressed, setPressed] = React.useState(false);
   // Windows]
-  render(): React.Node {
-    const {
-      accessibilityLabel,
-      accessibilityState,
-      'aria-busy': ariaBusy,
-      'aria-checked': ariaChecked,
-      'aria-disabled': ariaDisabled,
-      'aria-expanded': ariaExpanded,
-      'aria-label': ariaLabel,
-      'aria-selected': ariaSelected,
-      importantForAccessibility,
-      color,
-      onPress,
-      touchSoundDisabled,
-      title,
-      hasTVPreferredFocus,
-      nextFocusDown,
-      nextFocusForward,
-      nextFocusLeft,
-      nextFocusRight,
-      nextFocusUp,
-      testID,
-      accessible,
-      accessibilityActions,
-      accessibilityHint,
-      accessibilityLanguage,
-      onAccessibilityAction,
-      tabIndex,
-    } = this.props;
-    const buttonStyles: Array<ViewStyleProp> = [styles.button];
-    const textStyles: Array<TextStyleProp> = [styles.text];
-    if (color) {
-      if (Platform.OS === 'ios') {
-        textStyles.push({color: color});
-      } else {
-        buttonStyles.push({backgroundColor: color});
-      }
+  const {
+    accessibilityLabel,
+    accessibilityState,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
+    'aria-selected': ariaSelected,
+    importantForAccessibility,
+    color,
+    onPress,
+    touchSoundDisabled,
+    title,
+    hasTVPreferredFocus,
+    nextFocusDown,
+    nextFocusForward,
+    nextFocusLeft,
+    nextFocusRight,
+    nextFocusUp,
+    testID,
+    accessible,
+    accessibilityActions,
+    accessibilityHint,
+    accessibilityLanguage,
+    onAccessibilityAction,
+    tabIndex,
+  } = props;
+  const buttonStyles: Array<ViewStyleProp> = [styles.button];
+  const textStyles: Array<TextStyleProp> = [styles.text];
+  if (color) {
+    if (Platform.OS === 'ios') {
+      textStyles.push({color: color});
+    } else {
+      buttonStyles.push({backgroundColor: color});
     }
+  }
 
-    let _accessibilityState = {
-      busy: ariaBusy ?? accessibilityState?.busy,
-      checked: ariaChecked ?? accessibilityState?.checked,
-      disabled: ariaDisabled ?? accessibilityState?.disabled,
-      expanded: ariaExpanded ?? accessibilityState?.expanded,
-      selected: ariaSelected ?? accessibilityState?.selected,
-    };
-
-    const disabled =
-      this.props.disabled != null
-        ? this.props.disabled
-        : _accessibilityState?.disabled;
-
-    _accessibilityState =
-      disabled !== _accessibilityState?.disabled
-        ? {..._accessibilityState, disabled}
-        : _accessibilityState;
-
-    if (disabled) {
-      buttonStyles.push(styles.buttonDisabled);
-      textStyles.push(styles.textDisabled);
-    }
+  let _accessibilityState = {
+    busy: ariaBusy ?? accessibilityState?.busy,
+    checked: ariaChecked ?? accessibilityState?.checked,
+    disabled: ariaDisabled ?? accessibilityState?.disabled,
+    expanded: ariaExpanded ?? accessibilityState?.expanded,
+    selected: ariaSelected ?? accessibilityState?.selected,
+  };
+
+  const disabled =
+    props.disabled != null ? props.disabled : _accessibilityState?.disabled;
+
+  _accessibilityState =
+    disabled !== _accessibilityState?.disabled
+      ? {..._accessibilityState, disabled}
+      : _accessibilityState;
+
+  if (disabled) {
+    buttonStyles.push(styles.buttonDisabled);
+    textStyles.push(styles.textDisabled);
+  }
 
-    invariant(
-      typeof title === 'string',
-      'The title prop of a Button must be a string',
-    );
-    const formattedTitle =
-      Platform.OS === 'android' ? title.toUpperCase() : title;
-
-    // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
-    const _importantForAccessibility =
-      importantForAccessibility === 'no'
-        ? 'no-hide-descendants'
-        : importantForAccessibility;
-
-    // [Windows - render a TouchableHighlight
-    const Touchable = TouchableHighlight;
-    //  Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
-    // Windows]
-    // [Windows
-    if (Platform.OS === 'windows') {
-      return (
-        <Touchable
-          accessible={accessible}
-          accessibilityLabel={ariaLabel || accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          accessibilityLanguage={accessibilityLanguage}
-          accessibilityRole="button"
-          accessibilityState={_accessibilityState}
-          hasTVPreferredFocus={hasTVPreferredFocus}
-          nextFocusDown={nextFocusDown}
-          nextFocusForward={nextFocusForward}
-          nextFocusLeft={nextFocusLeft}
-          nextFocusRight={nextFocusRight}
-          nextFocusUp={nextFocusUp}
-          testID={testID}
-          disabled={disabled}
-          onPress={onPress}
-          tabIndex={tabIndex}
-          touchSoundDisabled={touchSoundDisabled}
-          underlayColor={
-            color
-              ? PlatformColor('SolidBackgroundFillColorBaseBrush')
-              : PlatformColor('ButtonBackgroundPressed')
-          }
-          onShowUnderlay={() => {
-            this.setState({pressed: true});
-          }}
-          onHideUnderlay={() => {
-            this.setState({pressed: false});
-          }}
+  invariant(
+    typeof title === 'string',
+    'The title prop of a Button must be a string',
+  );
+  const formattedTitle =
+    Platform.OS === 'android' ? title.toUpperCase() : title;
+  const Touchable = TouchableHighlight; // Windows
+  // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
+  const _importantForAccessibility =
+    importantForAccessibility === 'no'
+      ? 'no-hide-descendants'
+      : importantForAccessibility;
+  // [Windows
+  if (Platform.OS === 'windows') {
+    return (
+      <Touchable
+        accessible={accessible}
+        accessibilityLabel={ariaLabel || accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityLanguage={accessibilityLanguage}
+        accessibilityRole="button"
+        accessibilityState={_accessibilityState}
+        importantForAccessibility={_importantForAccessibility}
+        hasTVPreferredFocus={hasTVPreferredFocus}
+        nextFocusDown={nextFocusDown}
+        nextFocusForward={nextFocusForward}
+        nextFocusLeft={nextFocusLeft}
+        nextFocusRight={nextFocusRight}
+        nextFocusUp={nextFocusUp}
+        testID={testID}
+        disabled={disabled}
+        onPress={onPress}
+        tabIndex={tabIndex}
+        touchSoundDisabled={touchSoundDisabled}
+        underlayColor={
+          color
+            ? PlatformColor('SolidBackgroundFillColorBaseBrush')
+            : PlatformColor('ButtonBackgroundPressed')
+        }
+        onShowUnderlay={() => {
+          setPressed(true);
+        }}
+        onHideUnderlay={() => {
+          setPressed(false);
+        }}
+        style={
+          color
+            ? {borderRadius: 3}
+            : pressed
+            ? [buttonStyles, styles.buttonPressed]
+            : hover
+            ? [buttonStyles, styles.buttonHover]
+            : buttonStyles
+        }
+        onMouseEnter={() => {
+          if (!disabled) setHover(true);
+        }}
+        onMouseLeave={() => {
+          if (!disabled) setHover(false);
+        }}
+        ref={ref}>
+        <View
           style={
             color
-              ? {borderRadius: 3}
-              : this.state.pressed
-              ? [buttonStyles, styles.buttonPressed]
-              : this.state.hover
-              ? [buttonStyles, styles.buttonHover]
-              : buttonStyles
-          }
-          onMouseEnter={() => {
-            if (!disabled) this.setState({hover: true});
-          }}
-          onMouseLeave={() => {
-            if (!disabled) this.setState({hover: false});
-          }}>
+              ? pressed
+                ? [buttonStyles, styles.buttonPressed]
+                : buttonStyles
+              : {}
+          }>
           <View
             style={
               color
-                ? this.state.pressed
-                  ? [buttonStyles, styles.buttonPressed]
-                  : buttonStyles
+                ? hover
+                  ? [
+                      styles.buttonHover,
+                      {
+                        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                      },
+                    ]
+                  : {}
                 : {}
             }>
-            <View
+            <Text
               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 {
-      return (
-        <Touchable
-          accessible={accessible}
-          accessibilityActions={accessibilityActions}
-          onAccessibilityAction={onAccessibilityAction}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          accessibilityRole="button"
-          accessibilityState={accessibilityState}
-          hasTVPreferredFocus={hasTVPreferredFocus}
-          nextFocusDown={nextFocusDown}
-          nextFocusForward={nextFocusForward}
-          nextFocusLeft={nextFocusLeft}
-          nextFocusRight={nextFocusRight}
-          nextFocusUp={nextFocusUp}
-          testID={testID}
-          disabled={disabled}
-          onPress={onPress}
-          touchSoundDisabled={touchSoundDisabled}>
-          <View style={buttonStyles}>
-            <Text style={textStyles} disabled={disabled}>
+                  ? textStyles
+                  : pressed
+                  ? [
+                      textStyles,
+                      {
+                        color: PlatformColor('ButtonForegroundPressed'),
+                      },
+                    ]
+                  : hover
+                  ? [
+                      textStyles,
+                      {
+                        color: PlatformColor('ButtonForegroundPointerOver'),
+                      },
+                    ]
+                  : textStyles
+              }
+              disabled={disabled}>
               {formattedTitle}
             </Text>
           </View>
-        </Touchable>
-      );
-    }
-    // Windows]
+        </View>
+      </Touchable>
+    );
+  } else {
+    return (
+      <Touchable
+        accessible={accessible}
+        accessibilityActions={accessibilityActions}
+        onAccessibilityAction={onAccessibilityAction}
+        accessibilityLabel={ariaLabel || accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityLanguage={accessibilityLanguage}
+        accessibilityRole="button"
+        accessibilityState={_accessibilityState}
+        importantForAccessibility={_importantForAccessibility}
+        hasTVPreferredFocus={hasTVPreferredFocus}
+        nextFocusDown={nextFocusDown}
+        nextFocusForward={nextFocusForward}
+        nextFocusLeft={nextFocusLeft}
+        nextFocusRight={nextFocusRight}
+        nextFocusUp={nextFocusUp}
+        testID={testID}
+        disabled={disabled}
+        onPress={onPress}
+        touchSoundDisabled={touchSoundDisabled}
+        ref={ref}>
+        <View style={buttonStyles}>
+          <Text style={textStyles} disabled={disabled}>
+            {formattedTitle}
+          </Text>
+        </View>
+      </Touchable>
+    );
   }
-}
+  // Windows]
+});
+
+Button.displayName = 'Button';
 
 const styles = StyleSheet.create({
   button: Platform.select({
@@ -588,4 +581,4 @@ const styles = StyleSheet.create({
   // Windows]
 });
 
-module.exports = (Button: ButtonType);
+export default Button;

package/Libraries/Components/Clipboard/NativeClipboard.js

@@ -8,14 +8,6 @@
  * @format
  */
 
-import type {TurboModule} from '../../TurboModule/RCTExport';
-
-import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
-
-export interface Spec extends TurboModule {
-  +getConstants: () => {||};
-  +getString: () => Promise<string>;
-  +setString: (content: string) => void;
-}
-
-export default (TurboModuleRegistry.getEnforcing<Spec>('Clipboard'): Spec);
+export * from '../../../src/private/specs/modules/NativeClipboard';
+import NativeClipboard from '../../../src/private/specs/modules/NativeClipboard';
+export default NativeClipboard;

package/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js

@@ -8,117 +8,6 @@
  * @flow strict-local
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {
-  DirectEventHandler,
-  Float,
-  Int32,
-  WithDefault,
-} from '../../Types/CodegenTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
-
-import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
-import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-import * as React from 'react';
-
-type DrawerStateEvent = $ReadOnly<{|
-  drawerState: Int32,
-|}>;
-
-type DrawerSlideEvent = $ReadOnly<{|
-  offset: Float,
-|}>;
-
-type NativeProps = $ReadOnly<{|
-  ...ViewProps,
-  /**
-   * Determines whether the keyboard gets dismissed in response to a drag.
-   *   - 'none' (the default), drags do not dismiss the keyboard.
-   *   - 'on-drag', the keyboard is dismissed when a drag begins.
-   */
-  keyboardDismissMode?: WithDefault<'none' | 'on-drag', 'none'>,
-
-  /**
-   * Specifies the background color of the drawer. The default value is white.
-   * If you want to set the opacity of the drawer, use rgba. Example:
-   *
-   * ```
-   * return (
-   *   <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
-   *   </DrawerLayoutAndroid>
-   * );
-   * ```
-   */
-  drawerBackgroundColor: ColorValue,
-
-  /**
-   * Specifies the side of the screen from which the drawer will slide in.
-   */
-  drawerPosition?: WithDefault<'left' | 'right', 'left'>,
-
-  /**
-   * Specifies the width of the drawer, more precisely the width of the view that be pulled in
-   * from the edge of the window.
-   */
-
-  drawerWidth?: WithDefault<Float, null>,
-
-  /**
-   * Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
-   * - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-   * - locked-closed, meaning that the drawer will stay closed and not respond to gestures.
-   * - locked-open, meaning that the drawer will stay opened and not respond to gestures.
-   * The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
-   */
-  drawerLockMode?: WithDefault<
-    'unlocked' | 'locked-closed' | 'locked-open',
-    'unlocked',
-  >,
-
-  /**
-   * Function called whenever there is an interaction with the navigation view.
-   */
-  onDrawerSlide?: ?DirectEventHandler<DrawerSlideEvent>,
-
-  /**
-   * Function called when the drawer state has changed. The drawer can be in 3 states:
-   * - Idle, meaning there is no interaction with the navigation view happening at the time
-   * - Dragging, meaning there is currently an interaction with the navigation view
-   * - Settling, meaning that there was an interaction with the navigation view, and the
-   * navigation view is now finishing its closing or opening animation
-   */
-  onDrawerStateChanged?: ?DirectEventHandler<DrawerStateEvent>,
-
-  /**
-   * Function called whenever the navigation view has been opened.
-   */
-  onDrawerOpen?: ?DirectEventHandler<null>,
-
-  /**
-   * Function called whenever the navigation view has been closed.
-   */
-  onDrawerClose?: ?DirectEventHandler<null>,
-
-  /**
-   * Make the drawer take the entire screen and draw the background of the
-   * status bar to allow it to open over the status bar. It will only have an
-   * effect on API 21+.
-   */
-  statusBarBackgroundColor?: ?ColorValue,
-|}>;
-
-type NativeType = HostComponent<NativeProps>;
-
-interface NativeCommands {
-  +openDrawer: (viewRef: React.ElementRef<NativeType>) => void;
-  +closeDrawer: (viewRef: React.ElementRef<NativeType>) => void;
-}
-
-export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['openDrawer', 'closeDrawer'],
-});
-
-export default (codegenNativeComponent<NativeProps>(
-  'AndroidDrawerLayout',
-): NativeType);
+export * from '../../../src/private/specs/components/AndroidDrawerLayoutNativeComponent';
+import AndroidDrawerLayoutNativeComponent from '../../../src/private/specs/components/AndroidDrawerLayoutNativeComponent';
+export default AndroidDrawerLayoutNativeComponent;

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

@@ -19,7 +19,6 @@ import type {DirectEventHandler} from '../../Types/CodegenTypes';
 
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';
-import Platform from '../../Utilities/Platform';
 import StatusBar from '../StatusBar/StatusBar';
 import View from '../View/View';
 import AndroidDrawerLayoutNativeComponent, {
@@ -180,10 +179,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       onDrawerClose,
       ...props
     } = this.props;
-    const drawStatusBar =
-      Platform.OS === 'android' &&
-      Platform.Version >= 21 &&
-      this.props.statusBarBackgroundColor != null;
+    const drawStatusBar = this.props.statusBarBackgroundColor != null;
     const drawerViewWrapper = (
       <View
         style={[

package/Libraries/Components/Keyboard/KeyboardExt.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { IKeyboardProps } from './KeyboardExtProps';
-/**
- * @deprecated - Exported types should already have the keyboarding properties on them
- */
-export declare const supportKeyboard: <P extends Record<string, any>>(WrappedComponent: React.ComponentType<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & IKeyboardProps & {
-    children?: React.ReactNode;
-}> & React.RefAttributes<any>>;
+import React from 'react';
+import { IKeyboardProps } from './KeyboardExtProps';
+/**
+ * @deprecated - Exported types should already have the keyboarding properties on them
+ */
+export declare const supportKeyboard: <P extends Record<string, any>>(WrappedComponent: React.ComponentType<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & IKeyboardProps & {
+    children?: React.ReactNode;
+}> & React.RefAttributes<any>>;