@office-iss/react-native-win32 0.78.2 → 0.79.0-preview.1

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -22,12 +22,17 @@ type LinearGradientDirection =
   | {type: 'angle', value: number}
   | {type: 'keyword', value: string};
 
+// null color indicate that the transition hint syntax is used. e.g. red, 20%, blue
+type ColorStopColor = ProcessedColorValue | null;
+// percentage or pixel value
+type ColorStopPosition = number | string | null;
+
 type ParsedGradientValue = {
   type: 'linearGradient',
   direction: LinearGradientDirection,
   colorStops: $ReadOnlyArray<{
-    color: ProcessedColorValue,
-    position: number,
+    color: ColorStopColor,
+    position: ColorStopPosition,
   }>,
 };
 
@@ -49,33 +54,58 @@ export default function processBackgroundImage(
   } else if (Array.isArray(backgroundImage)) {
     for (const bgImage of backgroundImage) {
       const processedColorStops: Array<{
-        color: ProcessedColorValue,
-        position: number | null,
+        color: ColorStopColor,
+        position: ColorStopPosition,
       }> = [];
       for (let index = 0; index < bgImage.colorStops.length; index++) {
         const colorStop = bgImage.colorStops[index];
-        const processedColor = processColor(colorStop.color);
-        if (processedColor == null) {
-          // If a color is invalid, return an empty array and do not apply gradient. Same as web.
-          return [];
-        }
-        if (colorStop.positions != null && colorStop.positions.length > 0) {
-          for (const position of colorStop.positions) {
-            if (position.endsWith('%')) {
-              processedColorStops.push({
-                color: processedColor,
-                position: parseFloat(position) / 100,
-              });
-            } else {
-              // If a position is invalid, return an empty array and do not apply gradient. Same as web.
-              return [];
-            }
+        const positions = colorStop.positions;
+        // Color transition hint syntax (red, 20%, blue)
+        if (
+          colorStop.color == null &&
+          Array.isArray(positions) &&
+          positions.length === 1
+        ) {
+          const position = positions[0];
+          if (
+            typeof position === 'number' ||
+            (typeof position === 'string' && position.endsWith('%'))
+          ) {
+            processedColorStops.push({
+              color: null,
+              position,
+            });
+          } else {
+            // If a position is invalid, return an empty array and do not apply gradient. Same as web.
+            return [];
           }
         } else {
-          processedColorStops.push({
-            color: processedColor,
-            position: null,
-          });
+          const processedColor = processColor(colorStop.color);
+          if (processedColor == null) {
+            // If a color is invalid, return an empty array and do not apply gradient. Same as web.
+            return [];
+          }
+          if (positions != null && positions.length > 0) {
+            for (const position of positions) {
+              if (
+                typeof position === 'number' ||
+                (typeof position === 'string' && position.endsWith('%'))
+              ) {
+                processedColorStops.push({
+                  color: processedColor,
+                  position,
+                });
+              } else {
+                // If a position is invalid, return an empty array and do not apply gradient. Same as web.
+                return [];
+              }
+            }
+          } else {
+            processedColorStops.push({
+              color: processedColor,
+              position: null,
+            });
+          }
         }
       }
 
@@ -109,12 +139,10 @@ export default function processBackgroundImage(
         }
       }
 
-      const fixedColorStops = getFixedColorStops(processedColorStops);
-
       result = result.concat({
         type: 'linearGradient',
         direction,
-        colorStops: fixedColorStops,
+        colorStops: processedColorStops,
       });
     }
   }
@@ -137,13 +165,6 @@ function parseCSSLinearGradient(
     let direction: LinearGradientDirection = DEFAULT_DIRECTION;
     const trimmedDirection = parts[0].trim().toLowerCase();
 
-    // matches individual color stops in a gradient function
-    // supports various color formats: named colors, hex colors, rgb(a), and hsl(a)
-    // e.g. "red 20%", "blue 50%", "rgba(0, 0, 0, 0.5) 30% 50%"
-    // TODO: does not support color hint syntax yet. It is WIP.
-    const colorStopRegex =
-      /\s*((?:(?:rgba?|hsla?)\s*\([^)]+\))|#[0-9a-fA-F]+|[a-zA-Z]+)(?:\s+(-?[0-9.]+%?)(?:\s+(-?[0-9.]+%?))?)?\s*/gi;
-
     if (ANGLE_UNIT_REGEX.test(trimmedDirection)) {
       const parsedAngle = getAngleInDegrees(trimmedDirection);
       if (parsedAngle != null) {
@@ -165,59 +186,107 @@ function parseCSSLinearGradient(
         // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
-    } else if (!colorStopRegex.test(trimmedDirection)) {
-      // If first part is not an angle/direction or a color stop, return an empty array and do not apply any gradient. Same as web.
-      return [];
     }
-    colorStopRegex.lastIndex = 0;
 
+    const colorStopsString = parts.join(',');
     const colorStops = [];
-    const fullColorStopsStr = parts.join(',');
-    let colorStopMatch;
-    while ((colorStopMatch = colorStopRegex.exec(fullColorStopsStr))) {
-      const [, color, position1, position2] = colorStopMatch;
-      const processedColor = processColor(color.trim().toLowerCase());
-      if (processedColor == null) {
-        // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+    // split by comma, but not if it's inside a parentheses. e.g. red, rgba(0, 0, 0, 0.5), green => ["red", "rgba(0, 0, 0, 0.5)", "green"]
+    const stops = colorStopsString.split(/,(?![^(]*\))/);
+    let prevStop = null;
+    for (let i = 0; i < stops.length; i++) {
+      const stop = stops[i];
+      const trimmedStop = stop.trim().toLowerCase();
+      // Match function like pattern or single words
+      const colorStopParts = trimmedStop.match(/\S+\([^)]*\)|\S+/g);
+      if (colorStopParts == null) {
+        // If a color stop is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
+      // Case 1: [color, position, position]
+      if (colorStopParts.length === 3) {
+        const color = colorStopParts[0];
+        const position1 = getPositionFromCSSValue(colorStopParts[1]);
+        const position2 = getPositionFromCSSValue(colorStopParts[2]);
+        const processedColor = processColor(color);
+        if (processedColor == null) {
+          // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
 
-      if (typeof position1 !== 'undefined') {
-        if (position1.endsWith('%')) {
-          colorStops.push({
-            color: processedColor,
-            position: parseFloat(position1) / 100,
-          });
-        } else {
+        if (position1 == null || position2 == null) {
           // If a position is invalid, return an empty array and do not apply any gradient. Same as web.
           return [];
         }
-      } else {
+
+        colorStops.push({
+          color: processedColor,
+          position: position1,
+        });
         colorStops.push({
           color: processedColor,
-          position: null,
+          position: position2,
         });
       }
-
-      if (typeof position2 !== 'undefined') {
-        if (position2.endsWith('%')) {
+      // Case 2: [color, position]
+      else if (colorStopParts.length === 2) {
+        const color = colorStopParts[0];
+        const position = getPositionFromCSSValue(colorStopParts[1]);
+        const processedColor = processColor(color);
+        if (processedColor == null) {
+          // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
+        if (position == null) {
+          // If a position is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
+        colorStops.push({
+          color: processedColor,
+          position,
+        });
+      }
+      // Case 3: [color]
+      // Case 4: [position] => transition hint syntax
+      else if (colorStopParts.length === 1) {
+        const position = getPositionFromCSSValue(colorStopParts[0]);
+        if (position != null) {
+          // handle invalid transition hint syntax. transition hint syntax must have color before and after the position. e.g. red, 20%, blue
+          if (
+            (prevStop != null &&
+              prevStop.length === 1 &&
+              getPositionFromCSSValue(prevStop[0]) != null) ||
+            i === stops.length - 1 ||
+            i === 0
+          ) {
+            // If the last stop is a transition hint syntax, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
           colorStops.push({
-            color: processedColor,
-            position: parseFloat(position2) / 100,
+            color: null,
+            position,
           });
         } else {
-          // If a position is invalid, return an empty array and do not apply any gradient. Same as web.
-          return [];
+          const processedColor = processColor(colorStopParts[0]);
+          if (processedColor == null) {
+            // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+          colorStops.push({
+            color: processedColor,
+            position: null,
+          });
         }
+      } else {
+        // If a color stop is invalid, return an empty array and do not apply any gradient. Same as web.
+        return [];
       }
+      prevStop = colorStopParts;
     }
 
-    const fixedColorStops = getFixedColorStops(colorStops);
-
     gradients.push({
       type: 'linearGradient',
       direction,
-      colorStops: fixedColorStops,
+      colorStops,
     });
   }
 
@@ -283,79 +352,12 @@ function getAngleInDegrees(angle?: string): ?number {
   }
 }
 
-// https://drafts.csswg.org/css-images-4/#color-stop-fixup
-function getFixedColorStops(
-  colorStops: $ReadOnlyArray<{
-    color: ProcessedColorValue,
-    position: number | null,
-  }>,
-): Array<{
-  color: ProcessedColorValue,
-  position: number,
-}> {
-  let fixedColorStops: Array<{
-    color: ProcessedColorValue,
-    position: number,
-  }> = [];
-  let hasNullPositions = false;
-  let maxPositionSoFar = colorStops[0].position ?? 0;
-  for (let i = 0; i < colorStops.length; i++) {
-    const colorStop = colorStops[i];
-    let newPosition = colorStop.position;
-    if (newPosition === null) {
-      // Step 1:
-      // If the first color stop does not have a position,
-      // set its position to 0%. If the last color stop does not have a position,
-      // set its position to 100%.
-      if (i === 0) {
-        newPosition = 0;
-      } else if (i === colorStops.length - 1) {
-        newPosition = 1;
-      }
-    }
-    // Step 2:
-    // If a color stop or transition hint has a position
-    // that is less than the specified position of any color stop or transition hint
-    // before it in the list, set its position to be equal to the
-    // largest specified position of any color stop or transition hint before it.
-    if (newPosition !== null) {
-      newPosition = Math.max(newPosition, maxPositionSoFar);
-      fixedColorStops[i] = {
-        color: colorStop.color,
-        position: newPosition,
-      };
-      maxPositionSoFar = newPosition;
-    } else {
-      hasNullPositions = true;
-    }
+function getPositionFromCSSValue(position: string) {
+  if (position.endsWith('px')) {
+    return parseFloat(position);
   }
 
-  // Step 3:
-  // If any color stop still does not have a position,
-  // then, for each run of adjacent color stops without positions,
-  // set their positions so that they are evenly spaced between the preceding and
-  // following color stops with positions.
-  if (hasNullPositions) {
-    let lastDefinedIndex = 0;
-    for (let i = 1; i < fixedColorStops.length; i++) {
-      if (fixedColorStops[i] !== undefined) {
-        const unpositionedStops = i - lastDefinedIndex - 1;
-        if (unpositionedStops > 0) {
-          const startPosition = fixedColorStops[lastDefinedIndex].position;
-          const endPosition = fixedColorStops[i].position;
-          const increment =
-            (endPosition - startPosition) / (unpositionedStops + 1);
-          for (let j = 1; j <= unpositionedStops; j++) {
-            fixedColorStops[lastDefinedIndex + j] = {
-              color: colorStops[lastDefinedIndex + j].color,
-              position: startPosition + increment * j,
-            };
-          }
-        }
-        lastDefinedIndex = i;
-      }
-    }
+  if (position.endsWith('%')) {
+    return position;
   }
-
-  return fixedColorStops;
 }

package/Libraries/StyleSheet/processBoxShadow.js

@@ -205,5 +205,9 @@ function parseLength(length: string): ?number {
     return null;
   }
 
+  if (match[3] == null && match[1] !== '0') {
+    return null;
+  }
+
   return Number(match[1]);
 }

package/Libraries/StyleSheet/processColor.js

@@ -12,8 +12,8 @@
 
 import type {ColorValue, NativeColorValue} from './StyleSheet';
 
-const Platform = require('../Utilities/Platform');
-const normalizeColor = require('./normalizeColor');
+const Platform = require('../Utilities/Platform').default;
+const normalizeColor = require('./normalizeColor').default;
 
 export type ProcessedColorValue = number | NativeColorValue;
 

package/Libraries/StyleSheet/processColorArray.js

@@ -32,4 +32,4 @@ function processColorElement(color: ColorValue): ProcessedColorValue {
   return value;
 }
 
-module.exports = processColorArray;
+export default processColorArray;

package/Libraries/StyleSheet/processFilter.js

@@ -317,5 +317,9 @@ function parseLength(length: string): ?number {
     return null;
   }
 
+  if (match[3] == null && match[1] !== '0') {
+    return null;
+  }
+
   return Number(match[1]);
 }

package/Libraries/StyleSheet/processFontVariant.js

@@ -27,4 +27,4 @@ function processFontVariant(
   return match;
 }
 
-module.exports = processFontVariant;
+export default processFontVariant;

package/Libraries/StyleSheet/processTransform.js

@@ -266,4 +266,4 @@ function _validateTransform(
   }
 }
 
-module.exports = processTransform;
+export default processTransform;

package/Libraries/StyleSheet/setNormalizedColorAlpha.js

@@ -28,4 +28,4 @@ function setNormalizedColorAlpha(input: number, alpha: number): number {
   return ((input & 0xffffff00) | alpha) >>> 0;
 }
 
-module.exports = setNormalizedColorAlpha;
+export default setNormalizedColorAlpha;

package/Libraries/Text/Text.d.ts

@@ -263,7 +263,7 @@ export interface TextProps
 
   /**
    * This function is called on long press.
-   * e.g., `onLongPress={this.increaseSize}>``
+   * e.g., `onLongPress={this.increaseSize}>`
    */
   onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
 

package/Libraries/Text/Text.js

@@ -10,7 +10,7 @@
 
 import type {TextStyleProp} from '../StyleSheet/StyleSheet';
 import type {____TextStyle_Internal as TextStyleInternal} from '../StyleSheet/StyleSheetTypes';
-import type {PressEvent} from '../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 import type {NativeTextProps} from './TextNativeComponent';
 import type {PressRetentionOffset, TextProps} from './TextProps';
 
@@ -24,6 +24,8 @@ import {NativeText, NativeVirtualText} from './TextNativeComponent';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
+export type {TextProps} from './TextProps';
+
 type TextForwardRef = React.ElementRef<
   typeof NativeText | typeof NativeVirtualText,
 >;
@@ -34,7 +36,7 @@ type TextForwardRef = React.ElementRef<
  * @see https://reactnative.dev/docs/text
  */
 const Text: component(
-  ref: React.RefSetter<TextForwardRef>,
+  ref?: React.RefSetter<TextForwardRef>,
   ...props: TextProps
 ) = React.forwardRef(
   (
@@ -331,14 +333,14 @@ const Text: component(
 Text.displayName = 'Text';
 
 type TextPressabilityProps = $ReadOnly<{
-  onLongPress?: ?(event: PressEvent) => mixed,
-  onPress?: ?(event: PressEvent) => mixed,
-  onPressIn?: ?(event: PressEvent) => mixed,
-  onPressOut?: ?(event: PressEvent) => mixed,
-  onResponderGrant?: ?(event: PressEvent) => void,
-  onResponderMove?: ?(event: PressEvent) => void,
-  onResponderRelease?: ?(event: PressEvent) => void,
-  onResponderTerminate?: ?(event: PressEvent) => void,
+  onLongPress?: ?(event: GestureResponderEvent) => mixed,
+  onPress?: ?(event: GestureResponderEvent) => mixed,
+  onPressIn?: ?(event: GestureResponderEvent) => mixed,
+  onPressOut?: ?(event: GestureResponderEvent) => mixed,
+  onResponderGrant?: ?(event: GestureResponderEvent) => void,
+  onResponderMove?: ?(event: GestureResponderEvent) => void,
+  onResponderRelease?: ?(event: GestureResponderEvent) => void,
+  onResponderTerminate?: ?(event: GestureResponderEvent) => void,
   onResponderTerminationRequest?: ?() => boolean,
   onStartShouldSetResponder?: ?() => boolean,
   pressRetentionOffset?: ?PressRetentionOffset,
@@ -375,12 +377,12 @@ function useTextPressability({
     // 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.
     if (Platform.OS === 'ios') {
-      _onPressIn = (event: PressEvent) => {
+      _onPressIn = (event: GestureResponderEvent) => {
         setHighlighted(suppressHighlighting == null || !suppressHighlighting);
         onPressIn?.(event);
       };
 
-      _onPressOut = (event: PressEvent) => {
+      _onPressOut = (event: GestureResponderEvent) => {
         setHighlighted(false);
         onPressOut?.(event);
       };
@@ -412,25 +414,25 @@ function useTextPressability({
       eventHandlers == null
         ? null
         : {
-            onResponderGrant(event: PressEvent) {
+            onResponderGrant(event: GestureResponderEvent) {
               eventHandlers.onResponderGrant(event);
               if (onResponderGrant != null) {
                 onResponderGrant(event);
               }
             },
-            onResponderMove(event: PressEvent) {
+            onResponderMove(event: GestureResponderEvent) {
               eventHandlers.onResponderMove(event);
               if (onResponderMove != null) {
                 onResponderMove(event);
               }
             },
-            onResponderRelease(event: PressEvent) {
+            onResponderRelease(event: GestureResponderEvent) {
               eventHandlers.onResponderRelease(event);
               if (onResponderRelease != null) {
                 onResponderRelease(event);
               }
             },
-            onResponderTerminate(event: PressEvent) {
+            onResponderTerminate(event: GestureResponderEvent) {
               eventHandlers.onResponderTerminate(event);
               if (onResponderTerminate != null) {
                 onResponderTerminate(event);
@@ -534,4 +536,4 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
-module.exports = Text;
+export default Text;

package/Libraries/Text/Text.win32.js

@@ -10,7 +10,7 @@
 
 import type {TextStyleProp} from '../StyleSheet/StyleSheet';
 import type {____TextStyle_Internal as TextStyleInternal} from '../StyleSheet/StyleSheetTypes';
-import type {PressEvent} from '../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 import type {NativeTextProps} from './TextNativeComponent';
 import type {PressRetentionOffset, TextProps} from './TextProps';
 
@@ -24,6 +24,8 @@ import {NativeText, NativeVirtualText} from './TextNativeComponent';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
+export type {TextProps} from './TextProps';
+
 type TextForwardRef = React.ElementRef<
   typeof NativeText | typeof NativeVirtualText,
 >;
@@ -34,7 +36,7 @@ type TextForwardRef = React.ElementRef<
  * @see https://reactnative.dev/docs/text
  */
 const Text: component(
-  ref: React.RefSetter<TextForwardRef>,
+  ref?: React.RefSetter<TextForwardRef>,
   ...props: TextProps
 ) = React.forwardRef(
   (
@@ -371,14 +373,14 @@ const Text: component(
 Text.displayName = 'Text';
 
 type TextPressabilityProps = $ReadOnly<{
-  onLongPress?: ?(event: PressEvent) => mixed,
-  onPress?: ?(event: PressEvent) => mixed,
-  onPressIn?: ?(event: PressEvent) => mixed,
-  onPressOut?: ?(event: PressEvent) => mixed,
-  onResponderGrant?: ?(event: PressEvent) => void,
-  onResponderMove?: ?(event: PressEvent) => void,
-  onResponderRelease?: ?(event: PressEvent) => void,
-  onResponderTerminate?: ?(event: PressEvent) => void,
+  onLongPress?: ?(event: GestureResponderEvent) => mixed,
+  onPress?: ?(event: GestureResponderEvent) => mixed,
+  onPressIn?: ?(event: GestureResponderEvent) => mixed,
+  onPressOut?: ?(event: GestureResponderEvent) => mixed,
+  onResponderGrant?: ?(event: GestureResponderEvent) => void,
+  onResponderMove?: ?(event: GestureResponderEvent) => void,
+  onResponderRelease?: ?(event: GestureResponderEvent) => void,
+  onResponderTerminate?: ?(event: GestureResponderEvent) => void,
   onResponderTerminationRequest?: ?() => boolean,
   onStartShouldSetResponder?: ?() => boolean,
   pressRetentionOffset?: ?PressRetentionOffset,
@@ -415,12 +417,12 @@ function useTextPressability({
     // 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.
     if (Platform.OS === 'ios') {
-      _onPressIn = (event: PressEvent) => {
+      _onPressIn = (event: GestureResponderEvent) => {
         setHighlighted(suppressHighlighting == null || !suppressHighlighting);
         onPressIn?.(event);
       };
 
-      _onPressOut = (event: PressEvent) => {
+      _onPressOut = (event: GestureResponderEvent) => {
         setHighlighted(false);
         onPressOut?.(event);
       };
@@ -452,25 +454,25 @@ function useTextPressability({
       eventHandlers == null
         ? null
         : {
-            onResponderGrant(event: PressEvent) {
+            onResponderGrant(event: GestureResponderEvent) {
               eventHandlers.onResponderGrant(event);
               if (onResponderGrant != null) {
                 onResponderGrant(event);
               }
             },
-            onResponderMove(event: PressEvent) {
+            onResponderMove(event: GestureResponderEvent) {
               eventHandlers.onResponderMove(event);
               if (onResponderMove != null) {
                 onResponderMove(event);
               }
             },
-            onResponderRelease(event: PressEvent) {
+            onResponderRelease(event: GestureResponderEvent) {
               eventHandlers.onResponderRelease(event);
               if (onResponderRelease != null) {
                 onResponderRelease(event);
               }
             },
-            onResponderTerminate(event: PressEvent) {
+            onResponderTerminate(event: GestureResponderEvent) {
               eventHandlers.onResponderTerminate(event);
               if (onResponderTerminate != null) {
                 onResponderTerminate(event);
@@ -574,4 +576,4 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
-module.exports = Text;
+export default Text;

package/Libraries/Text/TextAncestor.js

@@ -15,9 +15,8 @@ const React = require('react');
 /**
  * Whether the current element is the descendant of a <Text> element.
  */
-const TextAncestorContext: React$Context<$FlowFixMe> =
-  React.createContext(false);
+const TextAncestorContext: React.Context<boolean> = React.createContext(false);
 if (__DEV__) {
   TextAncestorContext.displayName = 'TextAncestorContext';
 }
-module.exports = TextAncestorContext;
+export default TextAncestorContext;

package/Libraries/Text/TextNativeComponent.js

@@ -8,9 +8,9 @@
  * @format
  */
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../src/private/types/HostComponent';
 import type {ProcessedColorValue} from '../StyleSheet/processColor';
-import type {PressEvent} from '../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 import type {TextProps} from './TextProps';
 
 import {createViewConfig} from '../NativeComponent/ViewConfig';
@@ -21,7 +21,7 @@ export type NativeTextProps = $ReadOnly<{
   ...TextProps,
   isHighlighted?: ?boolean,
   selectionColor?: ?ProcessedColorValue,
-  onClick?: ?(event: PressEvent) => mixed,
+  onClick?: ?(event: GestureResponderEvent) => mixed,
   // This is only needed for platforms that optimize text hit testing, e.g.,
   // react-native-windows. It can be used to only hit test virtual text spans
   // that have pressable events attached to them.