@office-iss/react-native-win32 0.76.1 → 0.77.0-preview.1

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -55,7 +55,8 @@ export interface FlexStyle {
   borderTopWidth?: number | undefined;
   borderWidth?: number | undefined;
   bottom?: DimensionValue | undefined;
-  display?: 'none' | 'flex' | undefined;
+  boxSizing?: 'border-box' | 'content-box' | undefined;
+  display?: 'none' | 'flex' | 'contents' | undefined;
   end?: DimensionValue | undefined;
   flex?: number | undefined;
   flexBasis?: DimensionValue | undefined;
@@ -411,6 +412,10 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   borderTopLeftRadius?: AnimatableNumericValue | string | undefined;
   borderTopRightRadius?: AnimatableNumericValue | string | undefined;
   borderTopStartRadius?: AnimatableNumericValue | string | undefined;
+  outlineColor?: ColorValue | undefined;
+  outlineOffset?: AnimatableNumericValue | undefined;
+  outlineStyle?: 'solid' | 'dotted' | 'dashed' | undefined;
+  outlineWidth?: AnimatableNumericValue | undefined;
   opacity?: AnimatableNumericValue | undefined;
   /**
    * Sets the elevation of a view, using Android's underlying
@@ -429,6 +434,12 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   cursor?: CursorValue | undefined;
   boxShadow?: ReadonlyArray<BoxShadowValue> | string | undefined;
   filter?: ReadonlyArray<FilterFunction> | string | undefined;
+
+  mixBlendMode?: BlendMode | undefined;
+  experimental_backgroundImage?:
+    | ReadonlyArray<GradientValue>
+    | string
+    | undefined;
 }
 
 export type FontVariant =
@@ -557,6 +568,6 @@ export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   overlayColor?: ColorValue | undefined;
   tintColor?: ColorValue | undefined;
   opacity?: AnimatableNumericValue | undefined;
-  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | undefined;
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none' | undefined;
   cursor?: CursorValue | undefined;
 }

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
+import type {ImageResizeMode} from './../Image/ImageResizeMode';
 import type {
   ____DangerouslyImpreciseStyle_InternalOverrides,
   ____ImageStyle_InternalOverrides,
@@ -58,7 +59,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    *  It works similarly to `display` in CSS, but only support 'flex' and 'none'.
    *  'flex' is the default.
    */
-  display?: 'none' | 'flex',
+  display?: 'none' | 'flex' | 'contents',
 
   /** `width` sets the width of this component.
    *
@@ -612,6 +613,19 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   aspectRatio?: number | string,
 
+  /**
+   * Box sizing controls whether certain size properties apply to the node's
+   * content box or border box. The size properties in question include `width`,
+   * `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`, and `flexBasis`.
+   *
+   * e.g: Say a node has 10px of padding and 10px of borders on all
+   * sides and a defined `width` and `height` of 100px and 50px. Then the total
+   * size of the node (content area + padding + border) would be 100px by 50px
+   * under `boxSizing: border-box` and 120px by 70px under
+   * `boxSizing: content-box`.
+   */
+  boxSizing?: 'border-box' | 'content-box',
+
   /** `zIndex` controls which components display on top of others.
    *  Normally, you don't use `zIndex`. Components render according to
    *  their order in the document tree, so later components draw over
@@ -785,12 +799,16 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   borderStartWidth?: AnimatableNumericValue,
   borderTopWidth?: AnimatableNumericValue,
   opacity?: AnimatableNumericValue,
+  outlineColor?: ____ColorValue_Internal,
+  outlineOffset?: AnimatableNumericValue,
+  outlineStyle?: 'solid' | 'dotted' | 'dashed',
+  outlineWidth?: AnimatableNumericValue,
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
   boxShadow?: $ReadOnlyArray<BoxShadowValue> | string,
   filter?: $ReadOnlyArray<FilterFunction> | string,
-  experimental_mixBlendMode?: ____BlendMode_Internal,
+  mixBlendMode?: ____BlendMode_Internal,
   experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
   isolation?: 'auto' | 'isolate',
 }>;
@@ -924,8 +942,8 @@ export type ____TextStyle_Internal = $ReadOnly<{
 
 export type ____ImageStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
-  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
-  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down',
+  resizeMode?: ImageResizeMode,
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
 }>;
@@ -937,8 +955,8 @@ export type ____ImageStyle_Internal = $ReadOnly<{
 
 export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   ...$Exact<____TextStyle_Internal>,
-  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
-  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down',
+  resizeMode?: ImageResizeMode,
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
 }>;

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -14,25 +14,28 @@ import type {ProcessedColorValue} from './processColor';
 import type {GradientValue} from './StyleSheetTypes';
 
 const processColor = require('./processColor').default;
-const DIRECTION_REGEX =
-  /^to\s+(?:top|bottom|left|right)(?:\s+(?:top|bottom|left|right))?/;
+const DIRECTION_KEYWORD_REGEX =
+  /^to\s+(?:top|bottom|left|right)(?:\s+(?:top|bottom|left|right))?/i;
 const ANGLE_UNIT_REGEX = /^([+-]?\d*\.?\d+)(deg|grad|rad|turn)$/i;
 
-const TO_BOTTOM_START_END_POINTS = {
-  start: {x: 0.5, y: 0},
-  end: {x: 0.5, y: 1},
-};
+type LinearGradientDirection =
+  | {type: 'angle', value: number}
+  | {type: 'keyword', value: string};
 
 type ParsedGradientValue = {
   type: 'linearGradient',
-  start: {x: number, y: number},
-  end: {x: number, y: number},
+  direction: LinearGradientDirection,
   colorStops: $ReadOnlyArray<{
     color: ProcessedColorValue,
     position: number,
   }>,
 };
 
+const DEFAULT_DIRECTION: LinearGradientDirection = {
+  type: 'angle',
+  value: 180,
+};
+
 export default function processBackgroundImage(
   backgroundImage: ?($ReadOnlyArray<GradientValue> | string),
 ): $ReadOnlyArray<ParsedGradientValue> {
@@ -76,37 +79,43 @@ export default function processBackgroundImage(
         }
       }
 
-      let points: {
-        start: ParsedGradientValue['start'],
-        end: ParsedGradientValue['end'],
-      } | null = null;
-
-      if (typeof bgImage.direction === 'undefined') {
-        points = TO_BOTTOM_START_END_POINTS;
-      } else if (ANGLE_UNIT_REGEX.test(bgImage.direction)) {
-        const angle = parseAngle(bgImage.direction);
-        if (angle != null) {
-          points = calculateStartEndPointsFromAngle(angle);
-        }
-      } else if (DIRECTION_REGEX.test(bgImage.direction)) {
-        const processedPoints = calculateStartEndPointsFromDirection(
-          bgImage.direction,
-        );
-        if (processedPoints != null) {
-          points = processedPoints;
+      let direction: LinearGradientDirection = DEFAULT_DIRECTION;
+      const bgDirection =
+        bgImage.direction != null ? bgImage.direction.toLowerCase() : null;
+
+      if (bgDirection != null) {
+        if (ANGLE_UNIT_REGEX.test(bgDirection)) {
+          const parsedAngle = getAngleInDegrees(bgDirection);
+          if (parsedAngle != null) {
+            direction = {
+              type: 'angle',
+              value: parsedAngle,
+            };
+          } else {
+            // If an angle is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+        } else if (DIRECTION_KEYWORD_REGEX.test(bgDirection)) {
+          const parsedDirection = getDirectionForKeyword(bgDirection);
+          if (parsedDirection != null) {
+            direction = parsedDirection;
+          } else {
+            // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+        } else {
+          // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
         }
       }
 
       const fixedColorStops = getFixedColorStops(processedColorStops);
 
-      if (points != null) {
-        result = result.concat({
-          type: 'linearGradient',
-          start: points.start,
-          end: points.end,
-          colorStops: fixedColorStops,
-        });
-      }
+      result = result.concat({
+        type: 'linearGradient',
+        direction,
+        colorStops: fixedColorStops,
+      });
     }
   }
 
@@ -118,30 +127,39 @@ function parseCSSLinearGradient(
 ): $ReadOnlyArray<ParsedGradientValue> {
   const gradients = [];
   let match;
+
+  // matches one or more linear-gradient functions in CSS
   const linearGradientRegex = /linear-gradient\s*\(((?:\([^)]*\)|[^())])*)\)/gi;
 
   while ((match = linearGradientRegex.exec(cssString))) {
     const gradientContent = match[1];
     const parts = gradientContent.split(',');
-    let points = TO_BOTTOM_START_END_POINTS;
+    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 angle = parseAngle(trimmedDirection);
-      if (angle != null) {
-        points = calculateStartEndPointsFromAngle(angle);
+      const parsedAngle = getAngleInDegrees(trimmedDirection);
+      if (parsedAngle != null) {
+        direction = {
+          type: 'angle',
+          value: parsedAngle,
+        };
         parts.shift();
       } else {
         // If an angle is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
-    } else if (DIRECTION_REGEX.test(trimmedDirection)) {
-      const parsedPoints =
-        calculateStartEndPointsFromDirection(trimmedDirection);
-      if (parsedPoints != null) {
-        points = parsedPoints;
+    } else if (DIRECTION_KEYWORD_REGEX.test(trimmedDirection)) {
+      const parsedDirection = getDirectionForKeyword(trimmedDirection);
+      if (parsedDirection != null) {
+        direction = parsedDirection;
         parts.shift();
       } else {
         // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
@@ -198,8 +216,7 @@ function parseCSSLinearGradient(
 
     gradients.push({
       type: 'linearGradient',
-      start: points.start,
-      end: points.end,
+      direction,
       colorStops: fixedColorStops,
     });
   }
@@ -207,83 +224,43 @@ function parseCSSLinearGradient(
   return gradients;
 }
 
-function calculateStartEndPointsFromDirection(direction: string): ?{
-  start: {x: number, y: number},
-  end: {x: number, y: number},
-} {
+function getDirectionForKeyword(direction?: string): ?LinearGradientDirection {
+  if (direction == null) {
+    return null;
+  }
   // Remove extra whitespace
-  const normalizedDirection = direction.replace(/\s+/g, ' ');
+  const normalized = direction.replace(/\s+/g, ' ').toLowerCase();
 
-  switch (normalizedDirection) {
+  switch (normalized) {
+    case 'to top':
+      return {type: 'angle', value: 0};
     case 'to right':
-      return {
-        start: {x: 0, y: 0.5},
-        end: {x: 1, y: 0.5},
-      };
-    case 'to left':
-      return {
-        start: {x: 1, y: 0.5},
-        end: {x: 0, y: 0.5},
-      };
+      return {type: 'angle', value: 90};
     case 'to bottom':
-      return TO_BOTTOM_START_END_POINTS;
-    case 'to top':
-      return {
-        start: {x: 0.5, y: 1},
-        end: {x: 0.5, y: 0},
-      };
+      return {type: 'angle', value: 180};
+    case 'to left':
+      return {type: 'angle', value: 270};
+    case 'to top right':
+    case 'to right top':
+      return {type: 'keyword', value: 'to top right'};
     case 'to bottom right':
     case 'to right bottom':
-      return {
-        start: {x: 0, y: 0},
-        end: {x: 1, y: 1},
-      };
+      return {type: 'keyword', value: 'to bottom right'};
     case 'to top left':
     case 'to left top':
-      return {
-        start: {x: 1, y: 1},
-        end: {x: 0, y: 0},
-      };
+      return {type: 'keyword', value: 'to top left'};
     case 'to bottom left':
     case 'to left bottom':
-      return {
-        start: {x: 1, y: 0},
-        end: {x: 0, y: 1},
-      };
-    case 'to top right':
-    case 'to right top':
-      return {
-        start: {x: 0, y: 1},
-        end: {x: 1, y: 0},
-      };
+      return {type: 'keyword', value: 'to bottom left'};
     default:
       return null;
   }
 }
 
-function calculateStartEndPointsFromAngle(angleRadians: number): {
-  start: {x: number, y: number},
-  end: {x: number, y: number},
-} {
-  // Normalize angle to be between 0 and 2π
-  let angleRadiansNormalized = angleRadians % (2 * Math.PI);
-  if (angleRadiansNormalized < 0) {
-    angleRadiansNormalized += 2 * Math.PI;
+function getAngleInDegrees(angle?: string): ?number {
+  if (angle == null) {
+    return null;
   }
-
-  const endX = 0.5 + 0.5 * Math.sin(angleRadiansNormalized);
-  const endY = 0.5 - 0.5 * Math.cos(angleRadiansNormalized);
-
-  const startX = 1 - endX;
-  const startY = 1 - endY;
-
-  return {
-    start: {x: startX, y: startY},
-    end: {x: endX, y: endY},
-  };
-}
-
-function parseAngle(angle: string): ?number {
   const match = angle.match(ANGLE_UNIT_REGEX);
   if (!match) {
     return null;
@@ -294,13 +271,13 @@ function parseAngle(angle: string): ?number {
   const numericValue = parseFloat(value);
   switch (unit) {
     case 'deg':
-      return (numericValue * Math.PI) / 180;
+      return numericValue;
     case 'grad':
-      return (numericValue * Math.PI) / 200;
+      return numericValue * 0.9; // 1 grad = 0.9 degrees
     case 'rad':
-      return numericValue;
+      return (numericValue * 180) / Math.PI;
     case 'turn':
-      return numericValue * 2 * Math.PI;
+      return numericValue * 360; // 1 turn = 360 degrees
     default:
       return null;
   }

package/Libraries/StyleSheet/processTransform.js

@@ -26,7 +26,7 @@ function processTransform(
 ): Array<Object> | Array<number> {
   if (typeof transform === 'string') {
     const regex = new RegExp(/(\w+)\(([^)]+)\)/g);
-    let transformArray: Array<Object> = [];
+    const transformArray: Array<Object> = [];
     let matches;
 
     while ((matches = regex.exec(transform))) {
@@ -50,23 +50,7 @@ function processTransform(
 }
 
 const _getKeyAndValueFromCSSTransform: (
-  key:
-    | string
-    | $TEMPORARY$string<'matrix'>
-    | $TEMPORARY$string<'perspective'>
-    | $TEMPORARY$string<'rotate'>
-    | $TEMPORARY$string<'rotateX'>
-    | $TEMPORARY$string<'rotateY'>
-    | $TEMPORARY$string<'rotateZ'>
-    | $TEMPORARY$string<'scale'>
-    | $TEMPORARY$string<'scaleX'>
-    | $TEMPORARY$string<'scaleY'>
-    | $TEMPORARY$string<'skewX'>
-    | $TEMPORARY$string<'skewY'>
-    | $TEMPORARY$string<'translate'>
-    | $TEMPORARY$string<'translate3d'>
-    | $TEMPORARY$string<'translateX'>
-    | $TEMPORARY$string<'translateY'>,
+  key: string,
   args: string,
 ) => {key: string, value?: Array<string | number> | number | string} = (
   key,
@@ -169,22 +153,7 @@ function _validateTransforms(transform: Array<Object>): void {
 }
 
 function _validateTransform(
-  key:
-    | string
-    | $TEMPORARY$string<'matrix'>
-    | $TEMPORARY$string<'perspective'>
-    | $TEMPORARY$string<'rotate'>
-    | $TEMPORARY$string<'rotateX'>
-    | $TEMPORARY$string<'rotateY'>
-    | $TEMPORARY$string<'rotateZ'>
-    | $TEMPORARY$string<'scale'>
-    | $TEMPORARY$string<'scaleX'>
-    | $TEMPORARY$string<'scaleY'>
-    | $TEMPORARY$string<'skewX'>
-    | $TEMPORARY$string<'skewY'>
-    | $TEMPORARY$string<'translate'>
-    | $TEMPORARY$string<'translateX'>
-    | $TEMPORARY$string<'translateY'>,
+  key: string,
   value: any | number | string,
   transformation: any,
 ) {