@office-iss/react-native-win32 0.70.2 → 0.71.0-preview.1

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -9,7 +9,10 @@
  */
 
 import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
+
+import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processColor from '../../StyleSheet/processColor';
+import processFontVariant from '../../StyleSheet/processFontVariant';
 import processTransform from '../../StyleSheet/processTransform';
 import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
@@ -22,13 +25,14 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   alignContent: true,
   alignItems: true,
   alignSelf: true,
-  aspectRatio: true,
+  aspectRatio: {process: processAspectRatio},
   borderBottomWidth: true,
   borderEndWidth: true,
   borderLeftWidth: true,
   borderRightWidth: true,
   borderStartWidth: true,
   borderTopWidth: true,
+  columnGap: true,
   borderWidth: true,
   bottom: true,
   direction: true,
@@ -40,6 +44,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   flexGrow: true,
   flexShrink: true,
   flexWrap: true,
+  gap: true,
   height: true,
   justifyContent: true,
   left: true,
@@ -68,6 +73,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   paddingVertical: true,
   position: true,
   right: true,
+  rowGap: true,
   start: true,
   top: true,
   width: true,
@@ -98,6 +104,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
   borderColor: colorAttributes,
+  borderCurve: true,
   borderEndColor: colorAttributes,
   borderLeftColor: colorAttributes,
   borderRadius: true,
@@ -110,6 +117,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   borderTopRightRadius: true,
   borderTopStartRadius: true,
   opacity: true,
+  pointerEvents: true,
 
   /**
    * Text
@@ -118,7 +126,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   fontFamily: true,
   fontSize: true,
   fontStyle: true,
-  fontVariant: true,
+  fontVariant: {process: processFontVariant},
   fontWeight: true,
   includeFontPadding: true,
   letterSpacing: true,
@@ -132,6 +140,8 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   textShadowOffset: true,
   textShadowRadius: true,
   textTransform: true,
+  userSelect: true,
+  verticalAlign: true,
   writingDirection: true,
 
   /**
@@ -140,6 +150,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   overlayColor: colorAttributes,
   resizeMode: true,
   tintColor: colorAttributes,
+  objectFit: true,
 };
 
 module.exports = ReactNativeStyleAttributes;

package/Libraries/Components/View/ReactNativeViewAttributes.win32.js

@@ -37,6 +37,7 @@ const UIView = {
   style: ReactNativeStyleAttributes,
   // [Windows
   accessibilityAccessKey: true,
+  alwaysShowToolTip: true,
   enableFocusRing: true,
   cursor: true,
   textStyle: true, // Once we flush out our JS theming story this property will no longer be needed

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

@@ -0,0 +1,29 @@
+/**
+ * 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 {ViewProps} from './ViewPropTypes';
+import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+
+/**
+ * The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling,
+ * and accessibility controls, and is designed to be nested inside other views and to have 0 to many children of any type.
+ * View maps directly to the native view equivalent on whatever platform React is running on,
+ * whether that is a UIView, <div>, android.view, etc.
+ */
+declare class ViewComponent extends React.Component<ViewProps> {}
+declare const ViewBase: Constructor<NativeMethods> & typeof ViewComponent;
+export class View extends ViewBase {
+  /**
+   * Is 3D Touch / Force Touch available (i.e. will touch events include `force`)
+   * @platform ios
+   */
+  static forceTouchAvailable: boolean;
+}

package/Libraries/Components/View/View.js

@@ -10,8 +10,10 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
-import ViewNativeComponent from './ViewNativeComponent';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
+import {getAccessibilityRoleFromRole} from '../../Utilities/AcessibilityMapping';
+import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
 
 export type Props = ViewProps;
@@ -26,13 +28,94 @@ export type Props = ViewProps;
 const View: React.AbstractComponent<
   ViewProps,
   React.ElementRef<typeof ViewNativeComponent>,
-> = React.forwardRef((props: ViewProps, forwardedRef) => {
-  return (
-    <TextAncestor.Provider value={false}>
-      <ViewNativeComponent {...props} ref={forwardedRef} />
-    </TextAncestor.Provider>
-  );
-});
+> = React.forwardRef(
+  (
+    {
+      accessibilityElementsHidden,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityLiveRegion,
+      accessibilityRole,
+      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,
+      pointerEvents,
+      role,
+      style,
+      tabIndex,
+      ...otherProps
+    }: ViewProps,
+    forwardedRef,
+  ) => {
+    const _accessibilityLabelledBy =
+      ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
+
+    const _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+
+    const _accessibilityValue = {
+      max: ariaValueMax ?? accessibilityValue?.max,
+      min: ariaValueMin ?? accessibilityValue?.min,
+      now: ariaValueNow ?? accessibilityValue?.now,
+      text: ariaValueText ?? accessibilityValue?.text,
+    };
+
+    const flattenedStyle = flattenStyle(style);
+    const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
+
+    return (
+      <TextAncestor.Provider value={false}>
+        <ViewNativeComponent
+          {...otherProps}
+          accessibilityLiveRegion={
+            ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
+          }
+          accessibilityLabel={ariaLabel ?? accessibilityLabel}
+          focusable={tabIndex !== undefined ? !tabIndex : focusable}
+          accessibilityState={_accessibilityState}
+          accessibilityRole={
+            role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+          }
+          accessibilityElementsHidden={
+            ariaHidden ?? accessibilityElementsHidden
+          }
+          accessibilityLabelledBy={_accessibilityLabelledBy}
+          accessibilityValue={_accessibilityValue}
+          importantForAccessibility={
+            ariaHidden === true
+              ? 'no-hide-descendants'
+              : importantForAccessibility
+          }
+          nativeID={id ?? nativeID}
+          style={style}
+          pointerEvents={newPointerEvents}
+          ref={forwardedRef}
+        />
+      </TextAncestor.Provider>
+    );
+  },
+);
 
 View.displayName = 'View';
 

package/Libraries/Components/View/View.win32.js

@@ -10,8 +10,10 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
-import ViewNativeComponent from './ViewNativeComponent';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
+import {getAccessibilityRoleFromRole} from '../../Utilities/AcessibilityMapping';
+import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
 import invariant from 'invariant'; // [Windows]
 // [Windows
@@ -30,109 +32,194 @@ export type Props = ViewProps;
 const View: React.AbstractComponent<
   ViewProps,
   React.ElementRef<typeof ViewNativeComponent>,
-> = React.forwardRef((props: ViewProps, forwardedRef) => {
-  const _keyDown = (event: KeyEvent) => {
-    if (props.keyDownEvents && event.isPropagationStopped() !== true) {
-      for (const el of props.keyDownEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
-          event.stopPropagation();
-        }
-      }
-    }
-    props.onKeyDown && props.onKeyDown(event);
-  };
+> = React.forwardRef(
+  (
+    {
+      accessibilityElementsHidden,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityLiveRegion,
+      accessibilityRole,
+      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,
+      pointerEvents,
+      role,
+      style,
+      tabIndex,
+      ...otherProps
+    }: ViewProps,
+    forwardedRef,
+  ) => {
+    const _accessibilityLabelledBy =
+      ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
+
+    const _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
 
-  const _keyUp = (event: KeyEvent) => {
-    if (props.keyUpEvents && event.isPropagationStopped() !== true) {
-      for (const el of props.keyUpEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
-          event.stopPropagation();
+    const _accessibilityValue = {
+      max: ariaValueMax ?? accessibilityValue?.max,
+      min: ariaValueMin ?? accessibilityValue?.min,
+      now: ariaValueNow ?? accessibilityValue?.now,
+      text: ariaValueText ?? accessibilityValue?.text,
+    };
+
+    const flattenedStyle = flattenStyle(style);
+    const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
+
+    const _keyDown = (event: KeyEvent) => {
+      if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
+        // $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();
+          }
         }
       }
-    }
-    props.onKeyUp && props.onKeyUp(event);
-  };
+      otherProps.onKeyDown && otherProps.onKeyDown(event);
+    };
 
-  const _keyDownCapture = (event: KeyEvent) => {
-    if (props.keyDownEvents && event.isPropagationStopped() !== true) {
-      for (const el of props.keyDownEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
-          event.stopPropagation();
+    const _keyUp = (event: KeyEvent) => {
+      if (otherProps.keyUpEvents && event.isPropagationStopped() !== true) {
+        // $FlowFixMe - keyDownEvents was already checked to not be undefined
+        for (const el of otherProps.keyUpEvents) {
+          if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
+            event.stopPropagation();
+          }
         }
       }
-    }
-    props.onKeyDownCapture && props.onKeyDownCapture(event);
-  };
+      otherProps.onKeyUp && otherProps.onKeyUp(event);
+    };
 
-  const _keyUpCapture = (event: KeyEvent) => {
-    if (props.keyUpEvents && event.isPropagationStopped() !== true) {
-      for (const el of props.keyUpEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
-          event.stopPropagation();
+    const _keyDownCapture = (event: KeyEvent) => {
+      if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
+        // $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();
+          }
         }
       }
-    }
-    props.onKeyUpCapture && props.onKeyUpCapture(event);
-  };
+      otherProps.onKeyDownCapture && otherProps.onKeyDownCapture(event);
+    };
 
-  // [Windows
-  const childrenWithImportantForAccessibility = children => {
-    return React.Children.map(children, child => {
-      if (React.isValidElement(child)) {
-        if (child.props.children) {
-          return React.cloneElement(child, {
-            accessible: false,
-            children: childrenWithImportantForAccessibility(
-              child.props.children,
-            ),
-          });
-        } else {
-          return React.cloneElement(child, {accessible: false});
+    const _keyUpCapture = (event: KeyEvent) => {
+      if (otherProps.keyUpEvents && event.isPropagationStopped() !== true) {
+        // $FlowFixMe - keyDownEvents was already checked to not be undefined
+        for (const el of otherProps.keyUpEvents) {
+          if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
+            event.stopPropagation();
+          }
         }
       }
-      return child;
-    });
-  };
-  // Windows]
+      otherProps.onKeyUpCapture && otherProps.onKeyUpCapture(event);
+    };
 
-  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>
-      {hasTextAncestor => {
-        invariant(
-          !hasTextAncestor,
-          'Nesting of <View> within <Text> is not currently supported.',
-        );
-        return (
-          <ViewNativeComponent
-            {...props}
-            ref={forwardedRef}
-            onKeyDown={_keyDown}
-            onKeyDownCapture={_keyDownCapture}
-            onKeyUp={_keyUp}
-            onKeyUpCapture={_keyUpCapture}
-            // [Windows
-            accessible={
-              props.importantForAccessibility === 'no-hide-descendants'
-                ? false
-                : props.accessible
-            }
-            children={
-              props.importantForAccessibility === 'no-hide-descendants'
-                ? childrenWithImportantForAccessibility(props.children)
-                : props.children
-            }
-            // Windows]
-          />
-        );
-      }}
-    </TextAncestor.Consumer>
+    // $FlowFixMe - children typing
+    const childrenWithImportantForAccessibility = children => {
+      return React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+          if (child.props.children) {
+            return React.cloneElement(child, {
+              accessible: false,
+              children: childrenWithImportantForAccessibility(
+                child.props.children,
+              ),
+            });
+          } else {
+            return React.cloneElement(child, {accessible: false});
+          }
+        }
+        return child;
+      });
+    };
     // Windows]
-  );
-});
+
+    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>
+        {hasTextAncestor => {
+          invariant(
+            !hasTextAncestor,
+            'Nesting of <View> within <Text> is not currently supported.',
+          );
+          return (
+            <ViewNativeComponent
+              {...otherProps}
+              accessibilityLiveRegion={
+                ariaLive === 'off'
+                  ? 'none'
+                  : ariaLive ?? accessibilityLiveRegion
+              }
+              accessibilityLabel={ariaLabel ?? accessibilityLabel}
+              focusable={tabIndex !== undefined ? !tabIndex : focusable}
+              accessibilityState={_accessibilityState}
+              accessibilityRole={
+                role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+              }
+              accessibilityElementsHidden={
+                ariaHidden ?? accessibilityElementsHidden
+              }
+              accessibilityLabelledBy={_accessibilityLabelledBy}
+              accessibilityValue={_accessibilityValue}
+              importantForAccessibility={
+                ariaHidden === true
+                  ? 'no-hide-descendants'
+                  : importantForAccessibility
+              }
+              nativeID={id ?? nativeID}
+              style={style}
+              pointerEvents={newPointerEvents}
+              ref={forwardedRef}
+              onKeyDown={_keyDown}
+              onKeyDownCapture={_keyDownCapture}
+              onKeyUp={_keyUp}
+              onKeyUpCapture={_keyUpCapture}
+              // [Windows
+              accessible={
+                importantForAccessibility === 'no-hide-descendants'
+                  ? false
+                  : otherProps.accessible
+              }
+              children={
+                importantForAccessibility === 'no-hide-descendants'
+                  ? childrenWithImportantForAccessibility(otherProps.children)
+                  : otherProps.children
+              }
+              // Windows]
+            />
+          );
+        }}
+      </TextAncestor.Consumer>
+      // Windows]
+    );
+  },
+);
 
 View.displayName = 'View';