react-native-windows 0.72.14 → 0.73.0-preview.1

package/Libraries/StyleSheet/processTransformOrigin.js

@@ -0,0 +1,136 @@
+/**
+ * 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
+ */
+
+import invariant from 'invariant';
+
+const INDEX_X = 0;
+const INDEX_Y = 1;
+const INDEX_Z = 2;
+
+/* eslint-disable no-labels */
+export default function processTransformOrigin(
+  transformOrigin: Array<string | number> | string,
+): Array<string | number> {
+  if (typeof transformOrigin === 'string') {
+    const transformOriginString = transformOrigin;
+    const regex = /(top|bottom|left|right|center|\d+(?:%|px)|0)/gi;
+    const transformOriginArray: Array<string | number> = ['50%', '50%', 0];
+
+    let index = INDEX_X;
+    let matches;
+    outer: while ((matches = regex.exec(transformOriginString))) {
+      let nextIndex = index + 1;
+
+      const value = matches[0];
+      const valueLower = value.toLowerCase();
+
+      switch (valueLower) {
+        case 'left':
+        case 'right': {
+          invariant(
+            index === INDEX_X,
+            'Transform-origin %s can only be used for x-position',
+            value,
+          );
+          transformOriginArray[INDEX_X] = valueLower === 'left' ? 0 : '100%';
+          break;
+        }
+        case 'top':
+        case 'bottom': {
+          invariant(
+            index !== INDEX_Z,
+            'Transform-origin %s can only be used for y-position',
+            value,
+          );
+          transformOriginArray[INDEX_Y] = valueLower === 'top' ? 0 : '100%';
+
+          // Handle [[ center | left | right ] && [ center | top | bottom ]] <length>?
+          if (index === INDEX_X) {
+            const horizontal = regex.exec(transformOriginString);
+            if (horizontal == null) {
+              break outer;
+            }
+
+            switch (horizontal[0].toLowerCase()) {
+              case 'left':
+                transformOriginArray[INDEX_X] = 0;
+                break;
+              case 'right':
+                transformOriginArray[INDEX_X] = '100%';
+                break;
+              case 'center':
+                transformOriginArray[INDEX_X] = '50%';
+                break;
+              default:
+                invariant(
+                  false,
+                  'Could not parse transform-origin: %s',
+                  transformOriginString,
+                );
+            }
+            nextIndex = INDEX_Z;
+          }
+
+          break;
+        }
+        case 'center': {
+          invariant(
+            index !== INDEX_Z,
+            'Transform-origin value %s cannot be used for z-position',
+            value,
+          );
+          transformOriginArray[index] = '50%';
+          break;
+        }
+        default: {
+          if (value.endsWith('%')) {
+            transformOriginArray[index] = value;
+          } else {
+            transformOriginArray[index] = parseFloat(value); // Remove `px`
+          }
+          break;
+        }
+      }
+
+      index = nextIndex;
+    }
+
+    transformOrigin = transformOriginArray;
+  }
+
+  if (__DEV__) {
+    _validateTransformOrigin(transformOrigin);
+  }
+
+  return transformOrigin;
+}
+
+function _validateTransformOrigin(transformOrigin: Array<string | number>) {
+  invariant(
+    transformOrigin.length === 3,
+    'Transform origin must have exactly 3 values.',
+  );
+  const [x, y, z] = transformOrigin;
+  invariant(
+    typeof x === 'number' || (typeof x === 'string' && x.endsWith('%')),
+    'Transform origin x-position must be a number. Passed value: %s.',
+    x,
+  );
+  invariant(
+    typeof y === 'number' || (typeof y === 'string' && y.endsWith('%')),
+    'Transform origin y-position must be a number. Passed value: %s.',
+    y,
+  );
+  invariant(
+    typeof z === 'number',
+    'Transform origin z-position must be a number. Passed value: %s.',
+    z,
+  );
+}

package/Libraries/StyleSheet/splitLayoutProps.js

@@ -49,6 +49,7 @@ export default function splitLayoutProps(props: ?____ViewStyle_Internal): {
         case 'bottom':
         case 'top':
         case 'transform':
+        case 'transformOrigin':
         case 'rowGap':
         case 'columnGap':
         case 'gap':

package/Libraries/Text/Text.d.ts

@@ -43,11 +43,6 @@ export interface TextPropsIOS {
     | 'largeTitle'
     | undefined;
 
-  /**
-   * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
-   */
-  minimumFontScale?: number | undefined;
-
   /**
    * When `true`, no visual change is made when text is pressed down. By
    * default, a gray oval highlights the text on press down.
@@ -209,6 +204,11 @@ export interface TextProps
    * - >= 1: sets the maxFontSizeMultiplier of this node to this value
    */
   maxFontSizeMultiplier?: number | null | undefined;
+
+  /**
+   * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
+   */
+  minimumFontScale?: number | undefined;
 }
 
 /**

package/Libraries/Text/Text.js

@@ -15,7 +15,6 @@ import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import processColor from '../StyleSheet/processColor';
-import {getAccessibilityRoleFromRole} from '../Utilities/AcessibilityMapping';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
@@ -34,7 +33,6 @@ const Text: React.AbstractComponent<
   const {
     accessible,
     accessibilityLabel,
-    accessibilityRole,
     accessibilityState,
     allowFontScaling,
     'aria-busy': ariaBusy,
@@ -57,7 +55,6 @@ const Text: React.AbstractComponent<
     onResponderTerminationRequest,
     onStartShouldSetResponder,
     pressRetentionOffset,
-    role,
     suppressHighlighting,
     ...restProps
   } = props;
@@ -108,7 +105,13 @@ const Text: React.AbstractComponent<
             onLongPress,
             onPress,
             onPressIn(event: PressEvent) {
-              setHighlighted(!suppressHighlighting);
+              // Updating isHighlighted causes unnecessary re-renders for platforms that don't use it
+              // in the best case, and cause issues with text selection in the worst case. Forcing
+              // the isHighlighted prop to false on all platforms except iOS.
+              setHighlighted(
+                (suppressHighlighting == null || !suppressHighlighting) &&
+                  Platform.OS === 'ios',
+              );
               onPressIn?.(event);
             },
             onPressOut(event: PressEvent) {
@@ -211,18 +214,28 @@ const Text: React.AbstractComponent<
   style = flattenStyle(style);
 
   if (typeof style?.fontWeight === 'number') {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
     style.fontWeight = style?.fontWeight.toString();
   }
 
   let _selectable = restProps.selectable;
   if (style?.userSelect != null) {
+    // $FlowFixMe[invalid-computed-prop]
     _selectable = userSelectToSelectableMap[style.userSelect];
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
     delete style.userSelect;
   }
 
   if (style?.verticalAlign != null) {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
     style.textAlignVertical =
+      // $FlowFixMe[invalid-computed-prop]
       verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
     delete style.verticalAlign;
   }
 
@@ -234,9 +247,6 @@ const Text: React.AbstractComponent<
       {...restProps}
       {...eventHandlersForText}
       accessibilityLabel={ariaLabel ?? accessibilityLabel}
-      accessibilityRole={
-        role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-      }
       accessibilityState={_accessibilityState}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
@@ -253,9 +263,6 @@ const Text: React.AbstractComponent<
         {...restProps}
         {...eventHandlersForText}
         accessibilityLabel={ariaLabel ?? accessibilityLabel}
-        accessibilityRole={
-          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-        }
         accessibilityState={nativeTextAccessibilityState}
         accessible={
           accessible == null && Platform.OS === 'android'

package/Libraries/Text/Text.windows.js

@@ -16,7 +16,6 @@ import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import processColor from '../StyleSheet/processColor';
-import {getAccessibilityRoleFromRole} from '../Utilities/AcessibilityMapping';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
@@ -38,7 +37,9 @@ const Text: React.AbstractComponent<
   const {
     accessible,
     accessibilityLabel,
-    accessibilityRole,
+    accessibilityLevel, // Windows
+    accessibilityPosInSet, // Windows
+    accessibilitySetSize, // Windows
     accessibilityState,
     allowFontScaling,
     'aria-busy': ariaBusy,
@@ -46,6 +47,9 @@ const Text: React.AbstractComponent<
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-label': ariaLabel,
+    'aria-level': ariaLevel, // Windows
+    'aria-posinset': ariaPosinset, // Windows
+    'aria-setsize': ariaSetsize, // Windows
     'aria-selected': ariaSelected,
     ellipsizeMode,
     id,
@@ -61,7 +65,6 @@ const Text: React.AbstractComponent<
     onResponderTerminationRequest,
     onStartShouldSetResponder,
     pressRetentionOffset,
-    role,
     suppressHighlighting,
     ...restProps
   } = props;
@@ -112,7 +115,13 @@ const Text: React.AbstractComponent<
             onLongPress,
             onPress,
             onPressIn(event: PressEvent) {
-              setHighlighted(!suppressHighlighting);
+              // Updating isHighlighted causes unnecessary re-renders for platforms that don't use it
+              // in the best case, and cause issues with text selection in the worst case. Forcing
+              // the isHighlighted prop to false on all platforms except iOS.
+              setHighlighted(
+                (suppressHighlighting == null || !suppressHighlighting) &&
+                  Platform.OS === 'ios',
+              );
               onPressIn?.(event);
             },
             onPressOut(event: PressEvent) {
@@ -216,18 +225,28 @@ const Text: React.AbstractComponent<
   style = flattenStyle(style);
 
   if (typeof style?.fontWeight === 'number') {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
     style.fontWeight = style?.fontWeight.toString();
   }
 
   let _selectable = restProps.selectable;
   if (style?.userSelect != null) {
+    // $FlowFixMe[invalid-computed-prop]
     _selectable = userSelectToSelectableMap[style.userSelect];
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
     delete style.userSelect;
   }
 
   if (style?.verticalAlign != null) {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
     style.textAlignVertical =
+      // $FlowFixMe[invalid-computed-prop]
       verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
     delete style.verticalAlign;
   }
 
@@ -240,21 +259,16 @@ const Text: React.AbstractComponent<
         {...restProps}
         {...eventHandlersForText}
         accessibilityLabel={ariaLabel ?? accessibilityLabel}
-        accessibilityRole={
-          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-        }
-        accessibilityState={nativeTextAccessibilityState}
-        accessible={
-          accessible == null && Platform.OS === 'android'
-            ? _hasOnPressOrOnLongPress
-            : _accessible
-        }
+        accessibilityLevel={ariaLevel ?? accessibilityLevel} // Windows
+        accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet} // Windows
+        accessibilitySetSize={ariaSetsize ?? accessibilitySetSize} // Windows
+        accessibilityState={_accessibilityState}
         allowFontScaling={allowFontScaling !== false}
         disabled={_disabled}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
-        nativeID={id ?? nativeID}
         isPressable={isPressable}
+        nativeID={id ?? nativeID}
         numberOfLines={numberOfLines}
         ref={forwardedRef}
         selectable={_selectable}
@@ -280,24 +294,43 @@ const Text: React.AbstractComponent<
           flattenStyle(styleProps)
         : styleProps;
       let {
+        // $FlowFixMe[prop-missing]
         margin,
+        // $FlowFixMe[prop-missing]
         marginBottom,
+        // $FlowFixMe[prop-missing]
         marginEnd,
+        // $FlowFixMe[prop-missing]
         marginHorizontal,
+        // $FlowFixMe[prop-missing]
         marginLeft,
+        // $FlowFixMe[prop-missing]
         marginRight,
+        // $FlowFixMe[prop-missing]
         marginStart,
+        // $FlowFixMe[prop-missing]
         marginTop,
+        // $FlowFixMe[prop-missing]
         marginVertical,
+        // $FlowFixMe[prop-missing]
         padding,
+        // $FlowFixMe[prop-missing]
         paddingBottom,
+        // $FlowFixMe[prop-missing]
         paddingEnd,
+        // $FlowFixMe[prop-missing]
         paddingHorizontal,
+        // $FlowFixMe[prop-missing]
         paddingLeft,
+        // $FlowFixMe[prop-missing]
         paddingRight,
+        // $FlowFixMe[prop-missing]
         paddingStart,
+        // $FlowFixMe[prop-missing]
         paddingTop,
+        // $FlowFixMe[prop-missing]
         paddingVertical,
+        // $FlowFixMe[not-an-object]
         ...rest
       } = textStyleProps != null ? textStyleProps : {};
 
@@ -309,9 +342,9 @@ const Text: React.AbstractComponent<
               {...textPropsLessStyle}
               {...eventHandlersForText}
               accessibilityLabel={ariaLabel ?? accessibilityLabel}
-              accessibilityRole={
-                role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-              }
+              accessibilityLevel={ariaLevel ?? accessibilityLevel} // Windows
+              accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet} // Windows
+              accessibilitySetSize={ariaSetsize ?? accessibilitySetSize} // Windows
               accessibilityState={nativeTextAccessibilityState}
               accessible={
                 accessible == null && Platform.OS === 'android'
@@ -339,9 +372,9 @@ const Text: React.AbstractComponent<
             {...restProps}
             {...eventHandlersForText}
             accessibilityLabel={ariaLabel ?? accessibilityLabel}
-            accessibilityRole={
-              role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-            }
+            accessibilityLevel={ariaLevel ?? accessibilityLevel} // Windows
+            accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet} // Windows
+            accessibilitySetSize={ariaSetsize ?? accessibilitySetSize} // Windows
             accessibilityState={nativeTextAccessibilityState}
             accessible={
               accessible == null && Platform.OS === 'android'