@office-iss/react-native-win32 0.84.0-preview.2 → 0.85.0-preview.1

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -26,7 +26,7 @@ export type {____TransformStyle_Internal};
 
 declare export opaque type NativeColorValue;
 export type ____ColorValue_Internal = null | string | number | NativeColorValue;
-export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>;
+export type ColorArrayValue = null | ReadonlyArray<____ColorValue_Internal>;
 export type PointValue = {
   x: number,
   y: number,
@@ -55,7 +55,7 @@ export type CursorValue = 'auto' | 'pointer';
  * These properties are a subset of our styles that are consumed by the layout
  * algorithm and affect the positioning and sizing of views.
  */
-type ____LayoutStyle_Internal = $ReadOnly<{
+type ____LayoutStyle_Internal = Readonly<{
   /** `display` sets the display type of this component.
    *
    *  It works similarly to `display` in CSS, but only support 'flex' and 'none'.
@@ -675,7 +675,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{
  * To add a drop shadow to a view use the [`elevation` property](docs/viewstyleproptypes.html#elevation) (Android 5.0+).
  * To customize the color use the [`shadowColor` property](docs/shadow-props.html#shadowColor) (Android 9.0+).
  */
-export type ____ShadowStyle_InternalCore = $ReadOnly<{
+export type ____ShadowStyle_InternalCore = Readonly<{
   /**
    * Sets the drop shadow color
    * @platform ios
@@ -685,7 +685,7 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{
    * Sets the drop shadow offset
    * @platform ios
    */
-  shadowOffset?: $ReadOnly<{
+  shadowOffset?: Readonly<{
     width?: number,
     height?: number,
   }>,
@@ -701,7 +701,7 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{
   shadowRadius?: number,
 }>;
 
-export type ____ShadowStyle_Internal = $ReadOnly<{
+export type ____ShadowStyle_Internal = Readonly<{
   ...____ShadowStyle_InternalCore,
   ...____ShadowStyle_InternalOverrides,
 }>;
@@ -729,9 +729,9 @@ type LinearGradientValue = {
   type: 'linear-gradient',
   // Angle or direction enums
   direction?: string,
-  colorStops: $ReadOnlyArray<{
+  colorStops: ReadonlyArray<{
     color: ____ColorValue_Internal,
-    positions?: $ReadOnlyArray<string>,
+    positions?: ReadonlyArray<string>,
   }>,
 };
 
@@ -771,9 +771,9 @@ type RadialGradientValue = {
   shape: RadialGradientShape,
   size: RadialGradientSize,
   position: RadialGradientPosition,
-  colorStops: $ReadOnlyArray<{
+  colorStops: ReadonlyArray<{
     color: ____ColorValue_Internal,
-    positions?: $ReadOnlyArray<string>,
+    positions?: ReadonlyArray<string>,
   }>,
 };
 
@@ -843,7 +843,7 @@ type ____BlendMode_Internal =
   | 'color'
   | 'luminosity';
 
-export type ____ViewStyle_InternalBase = $ReadOnly<{
+export type ____ViewStyle_InternalBase = Readonly<{
   backfaceVisibility?: 'visible' | 'hidden',
   backgroundColor?: ____ColorValue_Internal,
   borderColor?: ____ColorValue_Internal,
@@ -886,28 +886,26 @@ export type ____ViewStyle_InternalBase = $ReadOnly<{
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
-  boxShadow?: $ReadOnlyArray<BoxShadowValue> | string,
-  filter?: $ReadOnlyArray<FilterFunction> | string,
+  boxShadow?: ReadonlyArray<BoxShadowValue> | string,
+  filter?: ReadonlyArray<FilterFunction> | string,
   mixBlendMode?: ____BlendMode_Internal,
-  experimental_backgroundImage?: $ReadOnlyArray<BackgroundImageValue> | string,
-  experimental_backgroundSize?: $ReadOnlyArray<BackgroundSizeValue> | string,
+  experimental_backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
+  experimental_backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string,
   experimental_backgroundPosition?:
-    | $ReadOnlyArray<BackgroundPositionValue>
-    | string,
-  experimental_backgroundRepeat?:
-    | $ReadOnlyArray<BackgroundRepeatValue>
+    | ReadonlyArray<BackgroundPositionValue>
     | string,
+  experimental_backgroundRepeat?: ReadonlyArray<BackgroundRepeatValue> | string,
   isolation?: 'auto' | 'isolate',
 }>;
 
-export type ____ViewStyle_InternalCore = $ReadOnly<{
+export type ____ViewStyle_InternalCore = Readonly<{
   ...$Exact<____LayoutStyle_Internal>,
   ...$Exact<____ShadowStyle_Internal>,
   ...$Exact<____TransformStyle_Internal>,
   ...____ViewStyle_InternalBase,
 }>;
 
-export type ____ViewStyle_Internal = $ReadOnly<{
+export type ____ViewStyle_Internal = Readonly<{
   ...____ViewStyle_InternalCore,
   ...____ViewStyle_InternalOverrides,
 }>;
@@ -997,16 +995,16 @@ export type ____FontVariant_Internal =
   | 'stylistic-twenty';
 
 export type ____FontVariantArray_Internal =
-  $ReadOnlyArray<____FontVariant_Internal>;
+  ReadonlyArray<____FontVariant_Internal>;
 
-type ____TextStyle_InternalBase = $ReadOnly<{
+type ____TextStyle_InternalBase = Readonly<{
   color?: ____ColorValue_Internal,
   fontFamily?: string,
   fontSize?: number,
   fontStyle?: 'normal' | 'italic',
   fontWeight?: ____FontWeight_Internal,
   fontVariant?: ____FontVariantArray_Internal | string,
-  textShadowOffset?: $ReadOnly<{
+  textShadowOffset?: Readonly<{
     width: number,
     height: number,
   }>,
@@ -1030,17 +1028,17 @@ type ____TextStyle_InternalBase = $ReadOnly<{
   writingDirection?: 'auto' | 'ltr' | 'rtl',
 }>;
 
-export type ____TextStyle_InternalCore = $ReadOnly<{
+export type ____TextStyle_InternalCore = Readonly<{
   ...$Exact<____ViewStyle_Internal>,
   ...____TextStyle_InternalBase,
 }>;
 
-export type ____TextStyle_Internal = $ReadOnly<{
+export type ____TextStyle_Internal = Readonly<{
   ...____TextStyle_InternalCore,
   ...____TextStyle_InternalOverrides,
 }>;
 
-export type ____ImageStyle_InternalCore = $ReadOnly<{
+export type ____ImageStyle_InternalCore = Readonly<{
   ...$Exact<____ViewStyle_Internal>,
   resizeMode?: ImageResizeMode,
   objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
@@ -1049,12 +1047,12 @@ export type ____ImageStyle_InternalCore = $ReadOnly<{
   overflow?: 'visible' | 'hidden',
 }>;
 
-export type ____ImageStyle_Internal = $ReadOnly<{
+export type ____ImageStyle_Internal = Readonly<{
   ...____ImageStyle_InternalCore,
   ...____ImageStyle_InternalOverrides,
 }>;
 
-export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
+export type ____DangerouslyImpreciseStyle_InternalCore = Readonly<{
   ...$Exact<____TextStyle_Internal>,
   resizeMode?: ImageResizeMode,
   objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
@@ -1062,7 +1060,7 @@ export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   overlayColor?: ColorValue,
 }>;
 
-export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{
+export type ____DangerouslyImpreciseStyle_Internal = Readonly<{
   ...____DangerouslyImpreciseStyle_InternalCore,
   ...____DangerouslyImpreciseStyle_InternalOverrides,
   ...
@@ -1074,7 +1072,7 @@ export type StyleProp<+T> =
   | T
   | false
   | ''
-  | $ReadOnlyArray<StyleProp<T>>;
+  | ReadonlyArray<StyleProp<T>>;
 
 export type ____DangerouslyImpreciseStyleProp_Internal = StyleProp<
   Partial<____DangerouslyImpreciseStyle_Internal>,
@@ -1084,13 +1082,13 @@ export type ____DangerouslyImpreciseAnimatedStyleProp_Internal =
   WithAnimatedValue<StyleProp<Partial<____DangerouslyImpreciseStyle_Internal>>>;
 
 export type ____ViewStyleProp_Internal = StyleProp<
-  $ReadOnly<Partial<____ViewStyle_Internal>>,
+  Readonly<Partial<____ViewStyle_Internal>>,
 >;
 export type ____TextStyleProp_Internal = StyleProp<
-  $ReadOnly<Partial<____TextStyle_Internal>>,
+  Readonly<Partial<____TextStyle_Internal>>,
 >;
 export type ____ImageStyleProp_Internal = StyleProp<
-  $ReadOnly<Partial<____ImageStyle_Internal>>,
+  Readonly<Partial<____ImageStyle_Internal>>,
 >;
 
 export type ____Styles_Internal = {
@@ -1105,12 +1103,12 @@ export type ____Styles_Internal = {
 type FlattenDepthLimiter = [void, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 type ____FlattenStyleProp_Helper<
   +TStyleProp: StyleProp<unknown>,
-  Depth: $Values<FlattenDepthLimiter> = 9,
+  Depth: Values<FlattenDepthLimiter> = 9,
 > = Depth extends 0
   ? empty
   : TStyleProp extends null | void | false | ''
     ? empty // When TStyleProp is an array, recurse with decremented Depth
-    : TStyleProp extends $ReadOnlyArray<infer V>
+    : TStyleProp extends ReadonlyArray<infer V>
       ? ____FlattenStyleProp_Helper<
           V,
           Depth extends number ? FlattenDepthLimiter[Depth] : 0,

package/Libraries/StyleSheet/private/_StyleSheetTypesOverrides.js

@@ -8,8 +8,8 @@
  * @format
  */
 
-export type ____DangerouslyImpreciseStyle_InternalOverrides = $ReadOnly<{}>;
-export type ____ImageStyle_InternalOverrides = $ReadOnly<{}>;
-export type ____ShadowStyle_InternalOverrides = $ReadOnly<{}>;
-export type ____TextStyle_InternalOverrides = $ReadOnly<{}>;
-export type ____ViewStyle_InternalOverrides = $ReadOnly<{}>;
+export type ____DangerouslyImpreciseStyle_InternalOverrides = Readonly<{}>;
+export type ____ImageStyle_InternalOverrides = Readonly<{}>;
+export type ____ShadowStyle_InternalOverrides = Readonly<{}>;
+export type ____TextStyle_InternalOverrides = Readonly<{}>;
+export type ____ViewStyle_InternalOverrides = Readonly<{}>;

package/Libraries/StyleSheet/private/_TransformStyle.js

@@ -13,23 +13,23 @@ import type AnimatedNode from '../../Animated/nodes/AnimatedNode';
 // Helper types to enforce that a single key is used in a transform object
 // after generating a TypeScript definition file from the Flow types.
 // $FlowExpectedError[unclear-type]
-type KeysOfUnion<T> = T extends any ? $Keys<T> : empty;
+type KeysOfUnion<T> = T extends any ? keyof T : empty;
 // $FlowExpectedError[unclear-type]
 type ValueOfUnion<T, K> = T extends any
-  ? K extends $Keys<T>
+  ? K extends keyof T
     ? T[K]
     : empty
   : empty;
 type MergeUnion<T> = {
   [K in KeysOfUnion<T>]?: ValueOfUnion<T, K>,
 };
-type MaximumOneOf<T: {...}> = $Values<{
+type MaximumOneOf<T: {...}> = Values<{
   [K in keyof T]: $Exact<{
     [P in keyof T]?: P extends K ? T[P] : empty,
   }>,
 }>;
 
-export type ____TransformStyle_Internal = $ReadOnly<{
+export type ____TransformStyle_Internal = Readonly<{
   /**
    * `transform` accepts an array of transformation objects. Each object specifies
    * the property that will be transformed as the key, and the value to use in the
@@ -47,8 +47,8 @@ export type ____TransformStyle_Internal = $ReadOnly<{
    * `transform([{ skewX: '45deg' }])`
    */
   transform?:
-    | $ReadOnlyArray<
-        $ReadOnly<
+    | ReadonlyArray<
+        Readonly<
           MaximumOneOf<
             MergeUnion<
               | {+perspective: number | AnimatedNode}
@@ -73,7 +73,7 @@ export type ____TransformStyle_Internal = $ReadOnly<{
               | {+skewY: string | AnimatedNode}
               // TODO: what is the actual type it expects?
               | {
-                  +matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
+                  +matrix: ReadonlyArray<number | AnimatedNode> | AnimatedNode,
                 },
             >,
           >,

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -37,7 +37,7 @@ type LinearGradientDirection =
 type LinearGradientBackgroundImage = {
   type: 'linear-gradient',
   direction: LinearGradientDirection,
-  colorStops: $ReadOnlyArray<{
+  colorStops: ReadonlyArray<{
     color: ColorStopColor,
     position: ColorStopPosition,
   }>,
@@ -57,7 +57,7 @@ type RadialGradientBackgroundImage = {
   shape: RadialGradientShape,
   size: RadialGradientSize,
   position: RadialGradientPosition,
-  colorStops: $ReadOnlyArray<{
+  colorStops: ReadonlyArray<{
     color: ColorStopColor,
     position: ColorStopPosition,
   }>,
@@ -73,9 +73,9 @@ type ParsedBackgroundImageValue =
   | RadialGradientBackgroundImage;
 
 export default function processBackgroundImage(
-  backgroundImage: ?($ReadOnlyArray<BackgroundImageValue> | string),
-): $ReadOnlyArray<ParsedBackgroundImageValue> {
-  let result: $ReadOnlyArray<ParsedBackgroundImageValue> = [];
+  backgroundImage: ?(ReadonlyArray<BackgroundImageValue> | string),
+): ReadonlyArray<ParsedBackgroundImageValue> {
+  let result: ReadonlyArray<ParsedBackgroundImageValue> = [];
   if (backgroundImage == null) {
     return result;
   }
@@ -183,7 +183,7 @@ export default function processBackgroundImage(
   return result;
 }
 
-function processColorStops(bgImage: BackgroundImageValue): $ReadOnlyArray<{
+function processColorStops(bgImage: BackgroundImageValue): ReadonlyArray<{
   color: ColorStopColor,
   position: ColorStopPosition,
 }> | null {
@@ -249,7 +249,7 @@ function processColorStops(bgImage: BackgroundImageValue): $ReadOnlyArray<{
 
 function parseBackgroundImageCSSString(
   cssString: string,
-): $ReadOnlyArray<ParsedBackgroundImageValue> {
+): ReadonlyArray<ParsedBackgroundImageValue> {
   const gradients = [];
   const bgImageStrings = splitGradients(cssString);
 

package/Libraries/StyleSheet/processBackgroundPosition.js

@@ -12,9 +12,9 @@
 import type {BackgroundPositionValue} from './StyleSheetTypes';
 
 export default function processBackgroundPosition(
-  backgroundPosition: ?($ReadOnlyArray<BackgroundPositionValue> | string),
-): $ReadOnlyArray<BackgroundPositionValue> {
-  let result: $ReadOnlyArray<BackgroundPositionValue> = [];
+  backgroundPosition: ?(ReadonlyArray<BackgroundPositionValue> | string),
+): ReadonlyArray<BackgroundPositionValue> {
+  let result: ReadonlyArray<BackgroundPositionValue> = [];
 
   if (backgroundPosition == null) {
     return [];
@@ -33,7 +33,7 @@ export default function processBackgroundPosition(
 // https://www.w3.org/TR/css-backgrounds-3/#typedef-bg-position
 const parseBackgroundPositionCSSString = (
   backgroundPosition: string,
-): $ReadOnlyArray<BackgroundPositionValue> => {
+): ReadonlyArray<BackgroundPositionValue> => {
   const result: Array<BackgroundPositionValue> = [];
   const positions = backgroundPosition.split(',').map(s => s.trim());
 

package/Libraries/StyleSheet/processBackgroundRepeat.js

@@ -27,9 +27,9 @@ function isBackgroundRepeatKeyword(
 }
 
 export default function processBackgroundRepeat(
-  backgroundRepeat: ?($ReadOnlyArray<BackgroundRepeatValue> | string),
-): $ReadOnlyArray<BackgroundRepeatValue> {
-  let result: $ReadOnlyArray<BackgroundRepeatValue> = [];
+  backgroundRepeat: ?(ReadonlyArray<BackgroundRepeatValue> | string),
+): ReadonlyArray<BackgroundRepeatValue> {
+  let result: ReadonlyArray<BackgroundRepeatValue> = [];
   if (backgroundRepeat == null) {
     return [];
   }
@@ -50,7 +50,7 @@ export default function processBackgroundRepeat(
 // https://www.w3.org/TR/css-backgrounds-3/#typedef-repeat-style
 function parseBackgroundRepeatCSSString(
   backgroundRepeat: string,
-): $ReadOnlyArray<BackgroundRepeatValue> {
+): ReadonlyArray<BackgroundRepeatValue> {
   const result: Array<BackgroundRepeatValue> = [];
   const bgRepeatArray = backgroundRepeat.split(',').map(s => s.trim());
 

package/Libraries/StyleSheet/processBackgroundSize.js

@@ -13,9 +13,9 @@
 import type {BackgroundSizeValue} from './StyleSheetTypes';
 
 export default function processBackgroundSize(
-  backgroundSize: ?($ReadOnlyArray<BackgroundSizeValue> | string),
-): $ReadOnlyArray<BackgroundSizeValue> {
-  let result: $ReadOnlyArray<BackgroundSizeValue> = [];
+  backgroundSize: ?(ReadonlyArray<BackgroundSizeValue> | string),
+): ReadonlyArray<BackgroundSizeValue> {
+  let result: ReadonlyArray<BackgroundSizeValue> = [];
 
   if (backgroundSize == null) {
     // If the size is invalid, return an empty array and do not apply any background size. Same as web.
@@ -34,7 +34,7 @@ export default function processBackgroundSize(
 // <bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain
 function parseBackgroundSizeCSSString(
   backgroundSize: string,
-): $ReadOnlyArray<BackgroundSizeValue> {
+): ReadonlyArray<BackgroundSizeValue> {
   const result: Array<BackgroundSizeValue> = [];
   const sizes = backgroundSize.split(',').map(s => s.trim());
 

package/Libraries/StyleSheet/processBoxShadow.js

@@ -11,8 +11,15 @@
 import type {ProcessedColorValue} from './processColor';
 import type {BoxShadowValue} from './StyleSheetTypes';
 
+import {enableOptimizedBoxShadowParsing} from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import processColor from './processColor';
 
+// Pre-compiled regex patterns for performance - avoids regex compilation on each call
+const COMMA_SPLIT_REGEX = /,(?![^()]*\))/;
+const WHITESPACE_SPLIT_REGEX = /\s+(?![^(]*\))/;
+const LENGTH_PARSE_REGEX = /^([+-]?\d*\.?\d+)(px)?$/;
+const NEWLINE_REGEX = /\n/g;
+
 export type ParsedBoxShadow = {
   offsetX: number,
   offsetY: number,
@@ -23,7 +30,7 @@ export type ParsedBoxShadow = {
 };
 
 export default function processBoxShadow(
-  rawBoxShadows: ?($ReadOnlyArray<BoxShadowValue> | string),
+  rawBoxShadows: ?(ReadonlyArray<BoxShadowValue> | string),
 ): Array<ParsedBoxShadow> {
   const result: Array<ParsedBoxShadow> = [];
   if (rawBoxShadows == null) {
@@ -32,7 +39,12 @@ export default function processBoxShadow(
 
   const boxShadowList =
     typeof rawBoxShadows === 'string'
-      ? parseBoxShadowString(rawBoxShadows.replace(/\n/g, ' '))
+      ? parseBoxShadowString(
+          rawBoxShadows.replace(
+            enableOptimizedBoxShadowParsing() ? NEWLINE_REGEX : /\n/g,
+            ' ',
+          ),
+        )
       : rawBoxShadows;
 
   for (const rawBoxShadow of boxShadowList) {
@@ -109,7 +121,9 @@ function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
   let result: Array<BoxShadowValue> = [];
 
   for (const rawBoxShadow of rawBoxShadows
-    .split(/,(?![^()]*\))/) // split by comma that is not in parenthesis
+    .split(
+      enableOptimizedBoxShadowParsing() ? COMMA_SPLIT_REGEX : /,(?![^()]*\))/,
+    ) // split by comma that is not in parenthesis
     .map(bS => bS.trim())
     .filter(bS => bS !== '')) {
     const boxShadow: BoxShadowValue = {
@@ -123,7 +137,11 @@ function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
     let lengthCount = 0;
 
     // split rawBoxShadow string by all whitespaces that are not in parenthesis
-    const args = rawBoxShadow.split(/\s+(?![^(]*\))/);
+    const args = rawBoxShadow.split(
+      enableOptimizedBoxShadowParsing()
+        ? WHITESPACE_SPLIT_REGEX
+        : /\s+(?![^(]*\))/,
+    );
     for (const arg of args) {
       const processedColor = processColor(arg);
       if (processedColor != null) {
@@ -192,6 +210,28 @@ function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
 }
 
 function parseLength(length: string): ?number {
+  if (enableOptimizedBoxShadowParsing()) {
+    // Use pre-compiled regex for performance
+    const match = LENGTH_PARSE_REGEX.exec(length);
+
+    if (!match) {
+      return null;
+    }
+
+    const value = parseFloat(match[1]);
+    if (Number.isNaN(value)) {
+      return null;
+    }
+
+    // match[2] is 'px' or undefined
+    // If no unit and value is not 0, return null
+    if (match[2] == null && value !== 0) {
+      return null;
+    }
+
+    return value;
+  }
+
   // matches on args with units like "1.5 5% -80deg"
   const argsWithUnitsRegex = /([+-]?\d*(\.\d+)?)([\w\W]+)?/g;
   const match = argsWithUnitsRegex.exec(length);

package/Libraries/StyleSheet/processColorArray.js

@@ -17,8 +17,8 @@ import processColor, {type ProcessedColorValue} from './processColor';
 const TRANSPARENT = 0; // rgba(0, 0, 0, 0)
 
 function processColorArray(
-  colors: ?$ReadOnlyArray<ColorValue>,
-): ?$ReadOnlyArray<ProcessedColorValue> {
+  colors: ?ReadonlyArray<ColorValue>,
+): ?ReadonlyArray<ProcessedColorValue> {
   return colors == null ? null : colors.map(processColorElement);
 }
 

package/Libraries/StyleSheet/processFilter.js

@@ -35,8 +35,8 @@ type ParsedDropShadow = {
 };
 
 export default function processFilter(
-  filter: ?($ReadOnlyArray<FilterFunction> | string),
-): $ReadOnlyArray<ParsedFilter> {
+  filter: ?(ReadonlyArray<FilterFunction> | string),
+): ReadonlyArray<ParsedFilter> {
   let result: Array<ParsedFilter> = [];
   if (filter == null) {
     return result;