@office-iss/react-native-win32 0.0.0-canary.30 → 0.0.0-canary.301

package/Libraries/Components/StatusBar/StatusBar.js

@@ -1,24 +1,21 @@
 /**
- * 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.
  *
- * @format
  * @flow
+ * @format
  */
 
-'use strict';
-
-const Platform = require('../../Utilities/Platform');
-const React = require('react');
-
-const invariant = require('invariant');
-const processColor = require('../../StyleSheet/processColor');
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 
+import processColor from '../../StyleSheet/processColor';
+import Platform from '../../Utilities/Platform';
 import NativeStatusBarManagerAndroid from './NativeStatusBarManagerAndroid';
 import NativeStatusBarManagerIOS from './NativeStatusBarManagerIOS';
+import invariant from 'invariant';
+import * as React from 'react';
 
 /**
  * Status bar style
@@ -58,9 +55,12 @@ export type StatusBarAnimation = $Keys<{
   ...
 }>;
 
-type AndroidProps = $ReadOnly<{|
+export type StatusBarPropsAndroid = $ReadOnly<{
   /**
    * The background color of the status bar.
+   *
+   * Please note that this prop has no effect on Android 15+
+   *
    * @platform android
    */
   backgroundColor?: ?ColorValue,
@@ -69,12 +69,14 @@ type AndroidProps = $ReadOnly<{|
    * When translucent is set to true, the app will draw under the status bar.
    * This is useful when using a semi transparent status bar color.
    *
+   * Please note that this prop has no effect on Android 15+
+   *
    * @platform android
    */
   translucent?: ?boolean,
-|}>;
+}>;
 
-type IOSProps = $ReadOnly<{|
+export type StatusBarPropsIOS = $ReadOnly<{
   /**
    * If the network activity indicator should be visible.
    *
@@ -87,12 +89,10 @@ type IOSProps = $ReadOnly<{|
    *
    * @platform ios
    */
-  showHideTransition?: ?('fade' | 'slide'),
-|}>;
+  showHideTransition?: ?('fade' | 'slide' | 'none'),
+}>;
 
-type Props = $ReadOnly<{|
-  ...AndroidProps,
-  ...IOSProps,
+type StatusBarBaseProps = $ReadOnly<{
   /**
    * If the status bar is hidden.
    */
@@ -106,7 +106,31 @@ type Props = $ReadOnly<{|
    * Sets the color of the status bar text.
    */
   barStyle?: ?('default' | 'light-content' | 'dark-content'),
-|}>;
+}>;
+
+export type StatusBarProps = $ReadOnly<{
+  ...StatusBarPropsAndroid,
+  ...StatusBarPropsIOS,
+  ...StatusBarBaseProps,
+}>;
+
+type StackProps = {
+  backgroundColor: ?{
+    value: StatusBarProps['backgroundColor'],
+    animated: boolean,
+  },
+  barStyle: ?{
+    value: StatusBarProps['barStyle'],
+    animated: boolean,
+  },
+  translucent: StatusBarProps['translucent'],
+  hidden: ?{
+    value: boolean,
+    animated: boolean,
+    transition: StatusBarProps['showHideTransition'],
+  },
+  networkActivityIndicatorVisible: StatusBarProps['networkActivityIndicatorVisible'],
+};
 
 /**
  * Merges the prop stack with the default values.
@@ -115,34 +139,39 @@ function mergePropsStack(
   propsStack: Array<Object>,
   defaultValues: Object,
 ): Object {
-  return propsStack.reduce((prev, cur) => {
-    for (const prop in cur) {
-      if (cur[prop] != null) {
-        prev[prop] = cur[prop];
+  return propsStack.reduce(
+    (prev, cur) => {
+      for (const prop in cur) {
+        if (cur[prop] != null) {
+          prev[prop] = cur[prop];
+        }
       }
-    }
-    return prev;
-  }, Object.assign({}, defaultValues));
+      return prev;
+    },
+    {...defaultValues},
+  );
 }
 
 /**
  * Returns an object to insert in the props stack from the props
  * and the transition/animation info.
  */
-function createStackEntry(props: any): any {
+function createStackEntry(props: StatusBarProps): StackProps {
+  const animated = props.animated ?? false;
+  const showHideTransition = props.showHideTransition ?? 'fade';
   return {
     backgroundColor:
       props.backgroundColor != null
         ? {
             value: props.backgroundColor,
-            animated: props.animated,
+            animated,
           }
         : null,
     barStyle:
       props.barStyle != null
         ? {
             value: props.barStyle,
-            animated: props.animated,
+            animated,
           }
         : null,
     translucent: props.translucent,
@@ -150,8 +179,8 @@ function createStackEntry(props: any): any {
       props.hidden != null
         ? {
             value: props.hidden,
-            animated: props.animated,
-            transition: props.showHideTransition,
+            animated,
+            transition: showHideTransition,
           }
         : null,
     networkActivityIndicatorVisible: props.networkActivityIndicatorVisible,
@@ -161,29 +190,9 @@ function createStackEntry(props: any): any {
 /**
  * Component to control the app status bar.
  *
- * ### Usage with Navigator
- *
  * It is possible to have multiple `StatusBar` components mounted at the same
  * time. The props will be merged in the order the `StatusBar` components were
- * mounted. One use case is to specify status bar styles per route using `Navigator`.
- *
- * ```
- *  <View>
- *    <StatusBar
- *      backgroundColor="blue"
- *      barStyle="light-content"
- *    />
- *    <Navigator
- *      initialRoute={{statusBarHidden: true}}
- *      renderScene={(route, navigator) =>
- *        <View>
- *          <StatusBar hidden={route.statusBarHidden} />
- *          ...
- *        </View>
- *      }
- *    />
- *  </View>
- * ```
+ * mounted.
  *
  * ### Imperative API
  *
@@ -220,16 +229,14 @@ function createStackEntry(props: any): any {
  *
  * `currentHeight` (Android only) The height of the status bar.
  */
-class StatusBar extends React.Component<Props> {
-  static _propsStack = [];
+class StatusBar extends React.Component<StatusBarProps> {
+  static _propsStack: Array<StackProps> = [];
 
-  static _defaultProps = createStackEntry({
-    animated: false,
-    showHideTransition: 'fade',
+  static _defaultProps: any = createStackEntry({
     backgroundColor:
       Platform.OS === 'android'
-        ? NativeStatusBarManagerAndroid.getConstants()
-            .DEFAULT_BACKGROUND_COLOR ?? 'black'
+        ? (NativeStatusBarManagerAndroid.getConstants()
+            .DEFAULT_BACKGROUND_COLOR ?? 'black')
         : 'black',
     barStyle: 'default',
     translucent: false,
@@ -238,10 +245,10 @@ class StatusBar extends React.Component<Props> {
   });
 
   // Timer for updating the native module values at the end of the frame.
-  static _updateImmediate = null;
+  static _updateImmediate: ?number = null;
 
   // The current merged values from the props stack.
-  static _currentValues = null;
+  static _currentValues: ?StackProps = null;
 
   // TODO(janic): Provide a real API to deal with status bar height. See the
   // discussion in #6195.
@@ -290,8 +297,10 @@ class StatusBar extends React.Component<Props> {
   }
 
   /**
-   * Control the visibility of the network activity indicator
+   * DEPRECATED - The status bar network activity indicator is not supported in iOS 13 and later. This will be removed in a future release.
    * @param visible Show the indicator.
+   *
+   * @deprecated
    */
   static setNetworkActivityIndicatorVisible(visible: boolean) {
     if (Platform.OS !== 'ios') {
@@ -309,7 +318,7 @@ class StatusBar extends React.Component<Props> {
    * @param color Background color.
    * @param animated Animate the style change.
    */
-  static setBackgroundColor(color: string, animated?: boolean) {
+  static setBackgroundColor(color: ColorValue, animated?: boolean): void {
     if (Platform.OS !== 'android') {
       console.warn('`setBackgroundColor` is only available on Android');
       return;
@@ -320,7 +329,7 @@ class StatusBar extends React.Component<Props> {
     const processedColor = processColor(color);
     if (processedColor == null) {
       console.warn(
-        `\`StatusBar.setBackgroundColor\`: Color ${color} parsed to null or undefined`,
+        `\`StatusBar.setBackgroundColor\`: Color ${String(color)} parsed to null or undefined`,
       );
       return;
     }
@@ -351,7 +360,7 @@ class StatusBar extends React.Component<Props> {
    *
    * @param props Object containing the StatusBar props to use in the stack entry.
    */
-  static pushStackEntry(props: any): any {
+  static pushStackEntry(props: StatusBarProps): StackProps {
     const entry = createStackEntry(props);
     StatusBar._propsStack.push(entry);
     StatusBar._updatePropsStack();
@@ -363,7 +372,7 @@ class StatusBar extends React.Component<Props> {
    *
    * @param entry Entry returned from `pushStackEntry`.
    */
-  static popStackEntry(entry: any) {
+  static popStackEntry(entry: StackProps) {
     const index = StatusBar._propsStack.indexOf(entry);
     if (index !== -1) {
       StatusBar._propsStack.splice(index, 1);
@@ -377,7 +386,10 @@ class StatusBar extends React.Component<Props> {
    * @param entry Entry returned from `pushStackEntry` to replace.
    * @param props Object containing the StatusBar props to use in the replacement stack entry.
    */
-  static replaceStackEntry(entry: any, props: any): any {
+  static replaceStackEntry(
+    entry: StackProps,
+    props: StatusBarProps,
+  ): StackProps {
     const newEntry = createStackEntry(props);
     const index = StatusBar._propsStack.indexOf(entry);
     if (index !== -1) {
@@ -387,15 +399,7 @@ class StatusBar extends React.Component<Props> {
     return newEntry;
   }
 
-  static defaultProps: {|
-    animated: boolean,
-    showHideTransition: $TEMPORARY$string<'fade'>,
-  |} = {
-    animated: false,
-    showHideTransition: 'fade',
-  };
-
-  _stackEntry = null;
+  _stackEntry: ?StackProps = null;
 
   componentDidMount() {
     // Every time a StatusBar component is mounted, we push it's prop to a stack
@@ -408,14 +412,18 @@ class StatusBar extends React.Component<Props> {
   componentWillUnmount() {
     // When a StatusBar is unmounted, remove itself from the stack and update
     // the native bar with the next props.
-    StatusBar.popStackEntry(this._stackEntry);
+    if (this._stackEntry != null) {
+      StatusBar.popStackEntry(this._stackEntry);
+    }
   }
 
   componentDidUpdate() {
-    this._stackEntry = StatusBar.replaceStackEntry(
-      this._stackEntry,
-      this.props,
-    );
+    if (this._stackEntry != null) {
+      this._stackEntry = StatusBar.replaceStackEntry(
+        this._stackEntry,
+        this.props,
+      );
+    }
   }
 
   /**
@@ -435,14 +443,14 @@ class StatusBar extends React.Component<Props> {
       if (Platform.OS === 'ios') {
         if (
           !oldProps ||
-          oldProps.barStyle.value !== mergedProps.barStyle.value
+          oldProps.barStyle?.value !== mergedProps.barStyle.value
         ) {
           NativeStatusBarManagerIOS.setStyle(
             mergedProps.barStyle.value,
             mergedProps.barStyle.animated || false,
           );
         }
-        if (!oldProps || oldProps.hidden.value !== mergedProps.hidden.value) {
+        if (!oldProps || oldProps.hidden?.value !== mergedProps.hidden.value) {
           NativeStatusBarManagerIOS.setHidden(
             mergedProps.hidden.value,
             mergedProps.hidden.animated
@@ -467,9 +475,7 @@ class StatusBar extends React.Component<Props> {
         const processedColor = processColor(mergedProps.backgroundColor.value);
         if (processedColor == null) {
           console.warn(
-            `\`StatusBar._updatePropsStack\`: Color ${
-              mergedProps.backgroundColor.value
-            } parsed to null or undefined`,
+            `\`StatusBar._updatePropsStack\`: Color ${mergedProps.backgroundColor.value} parsed to null or undefined`,
           );
         } else {
           invariant(
@@ -481,10 +487,15 @@ class StatusBar extends React.Component<Props> {
             mergedProps.backgroundColor.animated,
           );
         }
-        if (!oldProps || oldProps.hidden.value !== mergedProps.hidden.value) {
+        if (!oldProps || oldProps.hidden?.value !== mergedProps.hidden.value) {
           NativeStatusBarManagerAndroid.setHidden(mergedProps.hidden.value);
         }
-        if (!oldProps || oldProps.translucent !== mergedProps.translucent) {
+        // Activities are not translucent by default, so always set if true.
+        if (
+          !oldProps ||
+          oldProps.translucent !== mergedProps.translucent ||
+          mergedProps.translucent
+        ) {
           NativeStatusBarManagerAndroid.setTranslucent(mergedProps.translucent);
         }
       }
@@ -498,4 +509,4 @@ class StatusBar extends React.Component<Props> {
   }
 }
 
-module.exports = StatusBar;
+export default StatusBar;

package/Libraries/Components/Switch/AndroidSwitchNativeComponent.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.
@@ -8,57 +8,5 @@
  * @format
  */
 
-'use strict';
-
-import * as React from 'react';
-
-import type {
-  WithDefault,
-  BubblingEventHandler,
-} from 'react-native/Libraries/Types/CodegenTypes';
-
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
-
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
-
-type SwitchChangeEvent = $ReadOnly<{|
-  value: boolean,
-|}>;
-
-type NativeProps = $ReadOnly<{|
-  ...ViewProps,
-
-  // Props
-  disabled?: WithDefault<boolean, false>,
-  enabled?: WithDefault<boolean, true>,
-  thumbColor?: ?ColorValue,
-  trackColorForFalse?: ?ColorValue,
-  trackColorForTrue?: ?ColorValue,
-  value?: WithDefault<boolean, false>,
-  on?: WithDefault<boolean, false>,
-  thumbTintColor?: ?ColorValue,
-  trackTintColor?: ?ColorValue,
-
-  // Events
-  onChange?: BubblingEventHandler<SwitchChangeEvent>,
-|}>;
-
-type NativeType = HostComponent<NativeProps>;
-
-interface NativeCommands {
-  +setNativeValue: (
-    viewRef: React.ElementRef<NativeType>,
-    value: boolean,
-  ) => void;
-}
-
-export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['setNativeValue'],
-});
-
-export default (codegenNativeComponent<NativeProps>('AndroidSwitch', {
-  interfaceOnly: true,
-}): NativeType);
+export * from '../../../src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent';
+export {default} from '../../../src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent';

package/Libraries/Components/Switch/Switch.d.ts

@@ -0,0 +1,118 @@
+/**
+ * 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
+ */
+
+import type * as React from 'react';
+import {Constructor} from '../../../types/private/Utilities';
+import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
+import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
+import {ViewProps} from '../View/ViewPropTypes';
+import {NativeSyntheticEvent, TargetedEvent} from '../../Types/CoreEventTypes';
+
+export interface SwitchPropsIOS extends ViewProps {
+  /**
+   * Background color when the switch is turned on.
+   *
+   * @deprecated use trackColor instead
+   */
+  onTintColor?: ColorValue | undefined;
+
+  /**
+   * Color of the foreground switch grip.
+   *
+   * @deprecated use thumbColor instead
+   */
+  thumbTintColor?: ColorValue | undefined;
+
+  /**
+   * Background color when the switch is turned off.
+   *
+   * @deprecated use trackColor instead
+   */
+  tintColor?: ColorValue | undefined;
+}
+
+/**
+ * @deprecated Use `SwitchChangeEvent` instead.
+ */
+export interface SwitchChangeEventData extends TargetedEvent {
+  value: boolean;
+}
+
+export interface SwitchChangeEvent
+  extends NativeSyntheticEvent<SwitchChangeEventData> {}
+
+export interface SwitchProps extends SwitchPropsIOS {
+  /**
+   * Color of the foreground switch grip.
+   */
+  thumbColor?: ColorValue | undefined;
+
+  /**
+   * Custom colors for the switch track
+   *
+   * Color when false and color when true
+   */
+  trackColor?:
+    | {
+        false?: ColorValue | null | undefined;
+        true?: ColorValue | null | undefined;
+      }
+    | undefined;
+
+  /**
+   * If true the user won't be able to toggle the switch.
+   * Default value is false.
+   */
+  disabled?: boolean | undefined;
+
+  /**
+   * Invoked with the change event as an argument when the value changes.
+   */
+  onChange?:
+    | ((event: SwitchChangeEvent) => Promise<void> | void)
+    | null
+    | undefined;
+
+  /**
+   * Invoked with the new value when the value changes.
+   */
+  onValueChange?: ((value: boolean) => Promise<void> | void) | null | undefined;
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: string | undefined;
+
+  /**
+   * The value of the switch. If true the switch will be turned on.
+   * Default value is false.
+   */
+  value?: boolean | undefined;
+
+  /**
+   * On iOS, custom color for the background.
+   * Can be seen when the switch value is false or when the switch is disabled.
+   */
+  ios_backgroundColor?: ColorValue | undefined;
+
+  style?: StyleProp<ViewStyle> | undefined;
+}
+
+/**
+ * Renders a boolean input.
+ *
+ * This is a controlled component that requires an `onValueChange` callback that
+ * updates the `value` prop in order for the component to reflect user actions.
+ * If the `value` prop is not updated, the component will continue to render
+ * the supplied `value` prop instead of the expected result of any user actions.
+ */
+declare class SwitchComponent extends React.Component<SwitchProps> {}
+declare const SwitchBase: Constructor<NativeMethods> & typeof SwitchComponent;
+export class Switch extends SwitchBase {}