react-native-windows 0.80.1 → 0.81.0-preview.4

package/Libraries/Components/View/View.windows.js

@@ -4,22 +4,22 @@
  * 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 {ViewProps} from './ViewPropTypes';
 
-import TextAncestor from '../../Text/TextAncestor';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
+import TextAncestorContext from '../../Text/TextAncestorContext';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
+import {use} from 'react';
 import invariant from 'invariant'; // [Windows]
 // [Windows
 import type {KeyEvent} from '../../Types/CoreEventTypes';
 // Windows]
 
-export type Props = ViewProps;
-
 // [Windows
 // $FlowFixMe - children typing
 const childrenWithImportantForAccessibility = children => {
@@ -57,20 +57,23 @@ const childrenWithImportantForAccessibility = children => {
  *
  * @see https://reactnative.dev/docs/view
  */
-const View: component(
+export default component View(
   ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
   ...props: ViewProps
-) = React.forwardRef(
-  (
-    {
-      accessibilityElementsHidden,
-      accessibilityLabel,
-      accessibilityLabelledBy,
-      accessibilityLevel, // Windows
-      accessibilityDescription, //Windows
-      accessibilityLiveRegion,
-      accessibilityPosInSet, // Windows
-      accessibilitySetSize, // Windows
+) {
+  const hasTextAncestor = use(TextAncestorContext);
+
+  // Windows - Paper doesn't support Views in Text
+  if (global.RN$Bridgeless !== true) {
+    invariant(
+      !hasTextAncestor,
+      'Nesting of <View> within <Text> is not currently supported.',
+    );
+  }
+
+  let actualView;
+  if (ReactNativeFeatureFlags.reduceDefaultPropsInView()) {
+    const {
       accessibilityState,
       accessibilityValue,
       'aria-busy': ariaBusy,
@@ -93,21 +96,70 @@ const View: component(
       'aria-valuemin': ariaValueMin,
       'aria-valuenow': ariaValueNow,
       'aria-valuetext': ariaValueText,
-      focusable,
-      disabled,
       id,
-      importantForAccessibility,
-      nativeID,
       tabIndex,
       ...otherProps
-    }: ViewProps,
-    forwardedRef,
-  ) => {
-    const hasTextAncestor = React.useContext(TextAncestor);
-    const _accessibilityLabelledBy =
-      ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
+    } = props;
 
-    const _accessibilityState =
+    // Since we destructured props, we can now treat it as mutable
+    const processedProps = otherProps as {...ViewProps};
+
+    const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
+    if (parsedAriaLabelledBy !== undefined) {
+      processedProps.accessibilityLabelledBy = parsedAriaLabelledBy;
+    }
+
+    if (ariaLabel !== undefined) {
+      processedProps.accessibilityLabel = ariaLabel;
+    }
+
+    if (ariaLive !== undefined) {
+      processedProps.accessibilityLiveRegion =
+        ariaLive === 'off' ? 'none' : ariaLive;
+    }
+
+    if (ariaHidden !== undefined) {
+      processedProps.accessibilityElementsHidden = ariaHidden;
+      if (ariaHidden === true) {
+        processedProps.importantForAccessibility = 'no-hide-descendants';
+      }
+    }
+
+    // Windows accessibility properties
+    if (ariaLevel !== undefined) {
+      processedProps.accessibilityLevel = ariaLevel;
+    }
+
+    if (ariaDescription !== undefined) {
+      processedProps.accessibilityDescription = ariaDescription;
+    }
+
+    if (ariaPosinset !== undefined) {
+      processedProps.accessibilityPosInSet = ariaPosinset;
+    }
+
+    if (ariaSetsize !== undefined) {
+      processedProps.accessibilitySetSize = ariaSetsize;
+    }
+
+    // On paper we do some messy work to handle no-hide-descendants
+    if (global.RN$Bridgeless !== true) {
+      processedProps.children =
+        processedProps.importantForAccessibility === 'no-hide-descendants'
+          ? childrenWithImportantForAccessibility(otherProps.children)
+          : otherProps.children;
+    }
+    // Windows]
+
+    if (id !== undefined) {
+      processedProps.nativeID = id;
+    }
+
+    if (tabIndex !== undefined) {
+      processedProps.focusable = !tabIndex;
+    }
+
+    if (
       accessibilityState != null ||
       ariaBusy != null ||
       ariaChecked != null ||
@@ -117,240 +169,232 @@ const View: component(
       ariaReadOnly != null || // Windows
       ariaMultiselectable != null || // Windows
       ariaRequired != null // Windows
-        ? {
-            busy: ariaBusy ?? accessibilityState?.busy,
-            checked: ariaChecked ?? accessibilityState?.checked,
-            disabled: ariaDisabled ?? accessibilityState?.disabled,
-            expanded: ariaExpanded ?? accessibilityState?.expanded,
-            selected: ariaSelected ?? accessibilityState?.selected,
-            readOnly: ariaReadOnly ?? accessibilityState?.readOnly, // Windows
-            multiselectable:
-              ariaMultiselectable ?? accessibilityState?.multiselectable, // Windows
-            required: ariaRequired ?? accessibilityState?.required, // Windows
-          }
-        : undefined;
+    ) {
+      processedProps.accessibilityState = {
+        busy: ariaBusy ?? accessibilityState?.busy,
+        checked: ariaChecked ?? accessibilityState?.checked,
+        disabled: ariaDisabled ?? accessibilityState?.disabled,
+        expanded: ariaExpanded ?? accessibilityState?.expanded,
+        selected: ariaSelected ?? accessibilityState?.selected,
+        readOnly: ariaReadOnly ?? accessibilityState?.readOnly, // Windows
+        multiselectable:
+          ariaMultiselectable ?? accessibilityState?.multiselectable, // Windows
+        required: ariaRequired ?? accessibilityState?.required, // Windows
+      };
+    }
 
-    const _accessibilityValue =
+    if (
       accessibilityValue != null ||
       ariaValueMax != null ||
       ariaValueMin != null ||
       ariaValueNow != null ||
       ariaValueText != null
-        ? {
-            max: ariaValueMax ?? accessibilityValue?.max,
-            min: ariaValueMin ?? accessibilityValue?.min,
-            now: ariaValueNow ?? accessibilityValue?.now,
-            text: ariaValueText ?? accessibilityValue?.text,
-          }
-        : undefined;
+    ) {
+      processedProps.accessibilityValue = {
+        max: ariaValueMax ?? accessibilityValue?.max,
+        min: ariaValueMin ?? accessibilityValue?.min,
+        now: ariaValueNow ?? accessibilityValue?.now,
+        text: ariaValueText ?? accessibilityValue?.text,
+      };
+    }
 
-    const _keyDown =
-      otherProps.keyDownEvents || otherProps.onKeyDown
-        ? (event: KeyEvent) => {
+    // [Windows key event processing and accessible property
+    if (otherProps.keyDownEvents || otherProps.onKeyDown) {
+      const keydownLocal = otherProps.onKeyDown;
+      processedProps.onKeyDown = event => {
+        if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
+          // $FlowFixMe - keyDownEvents was already checked to not be undefined
+          for (const el of otherProps.keyDownEvents) {
             if (
-              otherProps.keyDownEvents &&
-              event.isPropagationStopped() !== true
+              event.nativeEvent.code === el.code &&
+              event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+              event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+              event.nativeEvent.altKey === Boolean(el.altKey) &&
+              event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+              el.handledEventPhase === 3
             ) {
-              // $FlowFixMe - keyDownEvents was already checked to not be undefined
-              for (const el of otherProps.keyDownEvents) {
-                if (
-                  event.nativeEvent.code === el.code &&
-                  el.handledEventPhase === 3
-                ) {
-                  event.stopPropagation();
-                }
-              }
+              event.stopPropagation();
             }
-            otherProps.onKeyDown && otherProps.onKeyDown(event);
           }
-        : undefined;
+        }
+        keydownLocal && keydownLocal(event);
+      };
+    }
 
-    const _keyUp =
-      otherProps.keyUpEvents || otherProps.onKeyUp
-        ? (event: KeyEvent) => {
+    if (otherProps.keyUpEvents || otherProps.onKeyUp) {
+      const keyupLocal = otherProps.onKeyUp;
+      processedProps.onKeyUp = event => {
+        if (otherProps.keyUpEvents && event.isPropagationStopped() !== true) {
+          // $FlowFixMe - keyUpEvents was already checked to not be undefined
+          for (const el of otherProps.keyUpEvents) {
             if (
-              otherProps.keyUpEvents &&
-              event.isPropagationStopped() !== true
+              event.nativeEvent.code === el.code &&
+              event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+              event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+              event.nativeEvent.altKey === Boolean(el.altKey) &&
+              event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+              el.handledEventPhase === 3
             ) {
-              // $FlowFixMe - keyUpEvents was already checked to not be undefined
-              for (const el of otherProps.keyUpEvents) {
-                if (
-                  event.nativeEvent.code === el.code &&
-                  el.handledEventPhase === 3
-                ) {
-                  event.stopPropagation();
-                }
-              }
+              event.stopPropagation();
             }
-            otherProps.onKeyUp && otherProps.onKeyUp(event);
           }
-        : undefined;
+        }
+        keyupLocal && keyupLocal(event);
+      };
+    }
 
-    const _keyDownCapture =
-      otherProps.keyDownEvents || otherProps.onKeyDownCapture
-        ? (event: KeyEvent) => {
+    if (otherProps.keyDownEvents || otherProps.onKeyDownCapture) {
+      const keydownCaptureLocal = otherProps.onKeyDownCapture;
+      processedProps.onKeyDownCapture = event => {
+        if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
+          // $FlowFixMe - keyDownEvents was already checked to not be undefined
+          for (const el of otherProps.keyDownEvents) {
             if (
-              otherProps.keyDownEvents &&
-              event.isPropagationStopped() !== true
+              event.nativeEvent.code === el.code &&
+              event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+              event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+              event.nativeEvent.altKey === Boolean(el.altKey) &&
+              event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+              el.handledEventPhase === 1
             ) {
-              // $FlowFixMe - keyDownEvents was already checked to not be undefined
-              for (const el of otherProps.keyDownEvents) {
-                if (
-                  event.nativeEvent.code === el.code &&
-                  el.handledEventPhase === 1
-                ) {
-                  event.stopPropagation();
-                }
-              }
+              event.stopPropagation();
             }
-            otherProps.onKeyDownCapture && otherProps.onKeyDownCapture(event);
           }
-        : undefined;
+        }
+        keydownCaptureLocal && keydownCaptureLocal(event);
+      };
+    }
 
-    const _keyUpCapture =
-      otherProps.keyUpEvents || otherProps.onKeyUpCapture
-        ? (event: KeyEvent) => {
+    if (otherProps.keyUpEvents || otherProps.onKeyUpCapture) {
+      const keyupCaptureLocal = otherProps.onKeyUpCapture;
+      processedProps.onKeyUpCapture = event => {
+        if (otherProps.keyUpEvents && event.isPropagationStopped() !== true) {
+          // $FlowFixMe - keyUpEvents was already checked to not be undefined
+          for (const el of otherProps.keyUpEvents) {
             if (
-              otherProps.keyUpEvents &&
-              event.isPropagationStopped() !== true
+              event.nativeEvent.code === el.code &&
+              event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+              event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+              event.nativeEvent.altKey === Boolean(el.altKey) &&
+              event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+              el.handledEventPhase === 1
             ) {
-              // $FlowFixMe - keyUpEvents was already checked to not be undefined
-              for (const el of otherProps.keyUpEvents) {
-                if (
-                  event.nativeEvent.code === el.code &&
-                  el.handledEventPhase === 1
-                ) {
-                  event.stopPropagation();
-                }
-              }
+              event.stopPropagation();
             }
-            otherProps.onKeyUpCapture && otherProps.onKeyUpCapture(event);
           }
-        : undefined;
+        }
+        keyupCaptureLocal && keyupCaptureLocal(event);
+      };
+    }
 
-    // [Windows
-    const _focusable = tabIndex !== undefined ? !tabIndex : focusable;
-    const _accessible =
-      importantForAccessibility === 'no-hide-descendants'
+    // Windows accessible property
+    const computedAccessible =
+      processedProps.importantForAccessibility === 'no-hide-descendants'
         ? false
         : otherProps.accessible;
+    if (computedAccessible !== undefined) {
+      processedProps.accessible = computedAccessible;
+    }
 
-    if (_focusable === true && _accessible === false) {
-      console.warn(
-        'All focusable views should report proper accessibility information. Views marked as focusable should always be accessible.',
+    actualView =
+      ref == null ? (
+        <ViewNativeComponent {...processedProps} />
+      ) : (
+        <ViewNativeComponent {...processedProps} ref={ref} />
       );
-    }
+  } else {
+    // Windows - Just skip updating this code path to reduce merge difficulty.
+    console.warn(
+      'Running with ReactNativeFeatureFlags.reduceDefaultPropsInView = false not supported',
+    );
+
+    const {
+      accessibilityElementsHidden,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityLiveRegion,
+      accessibilityState,
+      accessibilityValue,
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-disabled': ariaDisabled,
+      'aria-expanded': ariaExpanded,
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-live': ariaLive,
+      'aria-selected': ariaSelected,
+      'aria-valuemax': ariaValueMax,
+      'aria-valuemin': ariaValueMin,
+      'aria-valuenow': ariaValueNow,
+      'aria-valuetext': ariaValueText,
+      focusable,
+      id,
+      importantForAccessibility,
+      nativeID,
+      tabIndex,
+      ...otherProps
+    } = props;
+    const _accessibilityLabelledBy =
+      ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
+
+    const _accessibilityState =
+      accessibilityState != null ||
+      ariaBusy != null ||
+      ariaChecked != null ||
+      ariaDisabled != null ||
+      ariaExpanded != null ||
+      ariaSelected != null
+        ? {
+            busy: ariaBusy ?? accessibilityState?.busy,
+            checked: ariaChecked ?? accessibilityState?.checked,
+            disabled: ariaDisabled ?? accessibilityState?.disabled,
+            expanded: ariaExpanded ?? accessibilityState?.expanded,
+            selected: ariaSelected ?? accessibilityState?.selected,
+          }
+        : undefined;
 
-    const computedImportantForAccessibility =
-      ariaHidden === true ||
-      importantForAccessibility === 'no-hide-descendants' ||
-      accessibilityElementsHidden === true
-        ? 'no-hide-descendants'
-        : importantForAccessibility;
+    const _accessibilityValue =
+      accessibilityValue != null ||
+      ariaValueMax != null ||
+      ariaValueMin != null ||
+      ariaValueNow != null ||
+      ariaValueText != null
+        ? {
+            max: ariaValueMax ?? accessibilityValue?.max,
+            min: ariaValueMin ?? accessibilityValue?.min,
+            now: ariaValueNow ?? accessibilityValue?.now,
+            text: ariaValueText ?? accessibilityValue?.text,
+          }
+        : undefined;
 
-    const actualView = (
+    actualView = (
       <ViewNativeComponent
         {...otherProps}
         accessibilityLiveRegion={
           ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
         }
         accessibilityLabel={ariaLabel ?? accessibilityLabel}
-        accessibilityLevel={ariaLevel ?? accessibilityLevel}
-        accessibilityDescription={ariaDescription ?? accessibilityDescription}
-        accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet}
-        accessibilitySetSize={ariaSetsize ?? accessibilitySetSize}
-        focusable={_focusable}
-        disabled={disabled}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
         accessibilityState={_accessibilityState}
         accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden}
         accessibilityLabelledBy={_accessibilityLabelledBy}
         accessibilityValue={_accessibilityValue}
-        importantForAccessibility={computedImportantForAccessibility}
+        importantForAccessibility={
+          ariaHidden === true
+            ? 'no-hide-descendants'
+            : importantForAccessibility
+        }
         nativeID={id ?? nativeID}
-        ref={forwardedRef}
-        onKeyDown={_keyDown}
-        onKeyDownCapture={_keyDownCapture}
-        onKeyUp={_keyUp}
-        onKeyUpCapture={_keyUpCapture}
-        // [Windows
-        accessible={_accessible}
-        children={otherProps.children}
-        // Windows]
+        ref={ref}
       />
     );
+  }
 
-    // [Windows - Paper doesn't support Views in Text while Fabric does
-    if (global.RN$Bridgeless !== true) {
-      return (
-        // [Windows
-        // In core this is a TextAncestor.Provider value={false} See
-        // https://github.com/facebook/react-native/commit/66601e755fcad10698e61d20878d52194ad0e90c
-        // But since Views are not currently supported in Text, we do not need the extra provider
-        <TextAncestor.Consumer>
-          {consumerHasTextAncestor => {
-            invariant(
-              !consumerHasTextAncestor,
-              'Nesting of <View> within <Text> is not currently supported.',
-            );
-            return (
-              <ViewNativeComponent
-                {...otherProps}
-                accessibilityLiveRegion={
-                  ariaLive === 'off'
-                    ? 'none'
-                    : ariaLive ?? accessibilityLiveRegion
-                }
-                accessibilityLabel={ariaLabel ?? accessibilityLabel}
-                accessibilityLevel={ariaLevel ?? accessibilityLevel}
-                accessibilityDescription={
-                  ariaDescription ?? accessibilityDescription
-                }
-                accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet}
-                accessibilitySetSize={ariaSetsize ?? accessibilitySetSize}
-                focusable={_focusable}
-                disabled={disabled}
-                accessibilityState={_accessibilityState}
-                accessibilityElementsHidden={
-                  ariaHidden ?? accessibilityElementsHidden
-                }
-                accessibilityLabelledBy={_accessibilityLabelledBy}
-                accessibilityValue={_accessibilityValue}
-                importantForAccessibility={computedImportantForAccessibility}
-                nativeID={id ?? nativeID}
-                ref={forwardedRef}
-                onKeyDown={_keyDown}
-                onKeyDownCapture={_keyDownCapture}
-                onKeyUp={_keyUp}
-                onKeyUpCapture={_keyUpCapture}
-                // [Windows
-                accessible={_accessible}
-                children={
-                  computedImportantForAccessibility === 'no-hide-descendants'
-                    ? childrenWithImportantForAccessibility(otherProps.children)
-                    : otherProps.children
-                }
-                // Windows]
-              />
-            );
-          }}
-        </TextAncestor.Consumer>
-        // Windows]
-      );
-    } else {
-      if (hasTextAncestor) {
-        return (
-          <TextAncestor.Provider value={false}>
-            {actualView}
-          </TextAncestor.Provider>
-        );
-      }
-    }
-    // Windows]
-
-    return actualView;
-  },
-);
-
-View.displayName = 'View';
-
-export default View;
+  if (hasTextAncestor) {
+    return (
+      <TextAncestorContext value={false}>{actualView}</TextAncestorContext>
+    );
+  }
+  return actualView;
+}

package/Libraries/Components/View/ViewAccessibility.js

@@ -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';
@@ -374,13 +374,6 @@ export type AccessibilityProps = $ReadOnly<{
    */
   'aria-label'?: ?Stringish,
 
-  /**
-   * Defines the order in which descendant elements receive accessibility focus.
-   * The elements in the array represent nativeID values for the respective
-   * descendant elements.
-   */
-  experimental_accessibilityOrder?: ?Array<string>,
-
   /**
    * Indicates to accessibility services to treat UI component like a specific role.
    */

package/Libraries/Components/View/ViewAccessibility.windows.js

@@ -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';
@@ -410,13 +410,6 @@ export type AccessibilityProps = $ReadOnly<{
    */
   'aria-label'?: ?Stringish,
 
-  /**
-   * Defines the order in which descendant elements receive accessibility focus.
-   * The elements in the array represent nativeID values for the respective
-   * descendant elements.
-   */
-  experimental_accessibilityOrder?: ?Array<string>,
-
   /**
    * Indicates to accessibility services to treat UI component like a specific role.
    */

package/Libraries/Components/View/ViewPropTypes.d.ts

@@ -13,16 +13,21 @@ import {GestureResponderHandlers} from '../../../types/public/ReactNativeRendere
 import {StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
 import {
+  BlurEvent,
+  FocusEvent,
   LayoutChangeEvent,
+  PointerEvents,
   MouseEvent, // Windows
   NativeSyntheticEvent, // Windows
-  PointerEvents,
 } from 'react-native/Libraries/Types/CoreEventTypes';
 
 import {IKeyboardProps} from '../Keyboard/KeyboardExtProps'; // Windows
 import {Touchable} from '../Touchable/Touchable';
 import {AccessibilityProps} from './ViewAccessibility';
 
+/**
+ * @deprecated These properties are not implemented natively.
+ */
 export interface TVViewPropsIOS {
   /**
    * *(Apple TV only)* When set to true, this view will be focusable
@@ -36,6 +41,7 @@ export interface TVViewPropsIOS {
    * *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view.
    *
    * @platform ios
+   * @deprecated Use `focusable` instead
    */
   hasTVPreferredFocus?: boolean | undefined;
 
@@ -83,6 +89,20 @@ export interface ViewPropsIOS extends TVViewPropsIOS {
 }
 
 export interface ViewPropsAndroid {
+  /**
+   * Callback that is called when the view is blurred.
+   *
+   * Note: This will only be called if the view is focusable.
+   */
+  onBlur?: ((e: BlurEvent) => void) | null | undefined;
+
+  /**
+   * Callback that is called when the view is focused.
+   *
+   * Note: This will only be called if the view is focusable.
+   */
+  onFocus?: ((e: FocusEvent) => void) | null | undefined;
+
   /**
    * Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.
    *