@office-iss/react-native-win32 0.0.0-canary.258 → 0.0.0-canary.260

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -11,25 +11,6 @@ import {Animated} from '../Animated/Animated';
 import {ImageResizeMode} from '../Image/ImageResizeMode';
 import {ColorValue} from './StyleSheet';
 
-export type FilterPrimitive =
-  | {brightness: number | string}
-  | {blur: number | string}
-  | {contrast: number | string}
-  | {grayscale: number | string}
-  | {'hue-rotate': number | string}
-  | {invert: number | string}
-  | {opacity: number | string}
-  | {saturate: number | string}
-  | {sepia: number | string}
-  | {'drop-shadow': DropShadowPrimitive | string};
-
-export type DropShadowPrimitive = {
-  offsetX: number | string;
-  offsetY: number | string;
-  standardDeviation?: number | string | undefined;
-  color?: ColorValue | number | undefined;
-};
-
 type FlexAlignType =
   | 'flex-start'
   | 'flex-end'
@@ -246,6 +227,62 @@ export interface TransformsStyle {
   translateY?: AnimatableNumericValue | undefined;
 }
 
+export type FilterFunction =
+  | {brightness: number | string}
+  | {blur: number | string}
+  | {contrast: number | string}
+  | {grayscale: number | string}
+  | {hueRotate: number | string}
+  | {invert: number | string}
+  | {opacity: number | string}
+  | {saturate: number | string}
+  | {sepia: number | string}
+  | {dropShadow: DropShadowPrimitive | string};
+
+export type DropShadowPrimitive = {
+  offsetX: number | string;
+  offsetY: number | string;
+  standardDeviation?: number | string | undefined;
+  color?: ColorValue | number | undefined;
+};
+
+export type BoxShadowPrimitive = {
+  offsetX: number | string;
+  offsetY: number | string;
+  color?: string | undefined;
+  blurRadius?: ColorValue | number | undefined;
+  spreadDistance?: number | string | undefined;
+  inset?: boolean | undefined;
+};
+
+export type BlendMode =
+  | 'normal'
+  | 'multiply'
+  | 'screen'
+  | 'overlay'
+  | 'darken'
+  | 'lighten'
+  | 'color-dodge'
+  | 'color-burn'
+  | 'hard-light'
+  | 'soft-light'
+  | 'difference'
+  | 'exclusion'
+  | 'hue'
+  | 'saturation'
+  | 'color'
+  | 'luminosity';
+
+export type GradientValue = {
+  type: 'linearGradient';
+  // Angle or direction enums
+  direction: string | undefined;
+  colorStops: Array<{
+    color: ColorValue;
+    position: number | undefined;
+  }>;
+};
+
 /**
  * @see https://reactnative.dev/docs/view#style
  */
@@ -295,6 +332,7 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
    * Controls whether the View can be the target of touch events.
    */
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
+  isolation?: 'auto' | 'isolate' | undefined;
   cursor?: CursorValue | undefined;
 }
 

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -34,25 +34,6 @@ export type EdgeInsetsValue = {
   bottom: number,
 };
 
-export type FilterPrimitive =
-  | {brightness: number | string}
-  | {blur: number | string}
-  | {contrast: number | string}
-  | {grayscale: number | string}
-  | {'hue-rotate': number | string}
-  | {invert: number | string}
-  | {opacity: number | string}
-  | {saturate: number | string}
-  | {sepia: number | string}
-  | {'drop-shadow': DropShadowPrimitive | string};
-
-export type DropShadowPrimitive = {
-  offsetX: number | string,
-  offsetY: number | string,
-  standardDeviation?: number | string,
-  color?: ____ColorValue_Internal | number,
-};
-
 export type DimensionValue = number | string | 'auto' | AnimatedNode | null;
 export type AnimatableNumericValue = number | AnimatedNode;
 
@@ -709,15 +690,66 @@ export type ____ShadowStyle_Internal = $ReadOnly<{
   ...____ShadowStyle_InternalOverrides,
 }>;
 
-type ____FilterStyle_Internal = $ReadOnly<{
-  experimental_filter?: $ReadOnlyArray<FilterPrimitive>,
-}>;
+export type FilterFunction =
+  | {brightness: number | string}
+  | {blur: number | string}
+  | {contrast: number | string}
+  | {grayscale: number | string}
+  | {hueRotate: number | string}
+  | {invert: number | string}
+  | {opacity: number | string}
+  | {saturate: number | string}
+  | {sepia: number | string}
+  | {dropShadow: DropShadowPrimitive | string};
+
+export type DropShadowPrimitive = {
+  offsetX: number | string,
+  offsetY: number | string,
+  standardDeviation?: number | string,
+  color?: ____ColorValue_Internal,
+};
+
+export type GradientValue = {
+  type: 'linearGradient',
+  // Angle or direction enums
+  direction?: string,
+  colorStops: $ReadOnlyArray<{
+    color: ____ColorValue_Internal,
+    position?: string,
+  }>,
+};
+
+export type BoxShadowPrimitive = {
+  offsetX: number | string,
+  offsetY: number | string,
+  color?: ____ColorValue_Internal,
+  blurRadius?: number | string,
+  spreadDistance?: number | string,
+  inset?: boolean,
+};
+
+type ____BlendMode_Internal =
+  | 'normal'
+  | 'multiply'
+  | 'screen'
+  | 'overlay'
+  | 'darken'
+  | 'lighten'
+  | 'color-dodge'
+  | 'color-burn'
+  | 'hard-light'
+  | 'soft-light'
+  | 'difference'
+  | 'exclusion'
+  | 'hue'
+  | 'saturation'
+  | 'color'
+  | 'luminosity';
 
 export type ____ViewStyle_InternalCore = $ReadOnly<{
   ...$Exact<____LayoutStyle_Internal>,
   ...$Exact<____ShadowStyle_Internal>,
   ...$Exact<____TransformStyle_Internal>,
-  ...____FilterStyle_Internal,
   backfaceVisibility?: 'visible' | 'hidden',
   backgroundColor?: ____ColorValue_Internal,
   borderColor?: ____ColorValue_Internal,
@@ -756,6 +788,11 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
+  experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
+  experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
+  experimental_mixBlendMode?: ____BlendMode_Internal,
+  experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
+  isolation?: 'auto' | 'isolate',
 }>;
 
 export type ____ViewStyle_Internal = $ReadOnly<{

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -0,0 +1,286 @@
+/**
+ * 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 strict-local
+ */
+
+'use strict';
+
+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 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 ParsedGradientValue = {
+  type: 'linearGradient',
+  start: {x: number, y: number},
+  end: {x: number, y: number},
+  colorStops: $ReadOnlyArray<{
+    color: ProcessedColorValue,
+    position: number,
+  }>,
+};
+
+export default function processBackgroundImage(
+  backgroundImage: ?($ReadOnlyArray<GradientValue> | string),
+): $ReadOnlyArray<ParsedGradientValue> {
+  let result: $ReadOnlyArray<ParsedGradientValue> = [];
+  if (backgroundImage == null) {
+    return result;
+  }
+
+  if (typeof backgroundImage === 'string') {
+    result = parseCSSLinearGradient(backgroundImage);
+  } else if (Array.isArray(backgroundImage)) {
+    for (const bgImage of backgroundImage) {
+      const processedColorStops = [];
+      for (let index = 0; index < bgImage.colorStops.length; index++) {
+        const stop = bgImage.colorStops[index];
+        const processedColor = processColor(stop.color);
+        let processedPosition: number | null = null;
+
+        // Currently we only support percentage and undefined value for color stop position.
+        if (typeof stop.position === 'undefined') {
+          processedPosition =
+            bgImage.colorStops.length === 1
+              ? 1
+              : index / (bgImage.colorStops.length - 1);
+        } else if (stop.position.endsWith('%')) {
+          processedPosition = parseFloat(stop.position) / 100;
+        } else {
+          // If a color stop position is invalid, return an empty array and do not apply gradient. Same as web.
+          return [];
+        }
+
+        if (processedColor != null) {
+          processedColorStops.push({
+            color: processedColor,
+            position: processedPosition,
+          });
+        } else {
+          // If a color is invalid, return an empty array and do not apply gradient. Same as web.
+          return [];
+        }
+      }
+
+      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;
+        }
+      }
+
+      if (points != null) {
+        result = result.concat({
+          type: 'linearGradient',
+          start: points.start,
+          end: points.end,
+          colorStops: processedColorStops,
+        });
+      }
+    }
+  }
+
+  return result;
+}
+
+function parseCSSLinearGradient(
+  cssString: string,
+): $ReadOnlyArray<ParsedGradientValue> {
+  const gradients = [];
+  let match;
+  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;
+    const trimmedDirection = parts[0].trim().toLowerCase();
+    const colorStopRegex =
+      /\s*((?:(?:rgba?|hsla?)\s*\([^)]+\))|#[0-9a-fA-F]+|[a-zA-Z]+)(?:\s+([0-9.]+%?))?\s*/gi;
+
+    if (ANGLE_UNIT_REGEX.test(trimmedDirection)) {
+      const angle = parseAngle(trimmedDirection);
+      if (angle != null) {
+        points = calculateStartEndPointsFromAngle(angle);
+        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;
+        parts.shift();
+      } else {
+        // 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 colorStops = [];
+    const fullColorStopsStr = parts.join(',');
+    let colorStopMatch;
+    while ((colorStopMatch = colorStopRegex.exec(fullColorStopsStr))) {
+      const [, color, position] = colorStopMatch;
+      const processedColor = processColor(color.trim().toLowerCase());
+      if (
+        processedColor != null &&
+        (typeof position === 'undefined' || position.endsWith('%'))
+      ) {
+        colorStops.push({
+          color: processedColor,
+          position: position ? parseFloat(position) / 100 : null,
+        });
+      } else {
+        // If a color or position is invalid, return an empty array and do not apply any gradient. Same as web.
+        return [];
+      }
+    }
+
+    gradients.push({
+      type: 'linearGradient',
+      start: points.start,
+      end: points.end,
+      colorStops: colorStops.map((stop, index, array) => ({
+        color: stop.color,
+        position:
+          stop.position ??
+          (array.length === 1 ? 1 : index / (array.length - 1)),
+      })),
+    });
+  }
+
+  return gradients;
+}
+
+function calculateStartEndPointsFromDirection(direction: string): ?{
+  start: {x: number, y: number},
+  end: {x: number, y: number},
+} {
+  // Remove extra whitespace
+  const normalizedDirection = direction.replace(/\s+/g, ' ');
+
+  switch (normalizedDirection) {
+    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},
+      };
+    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},
+      };
+    case 'to bottom right':
+    case 'to right bottom':
+      return {
+        start: {x: 0, y: 0},
+        end: {x: 1, y: 1},
+      };
+    case 'to top left':
+    case 'to left top':
+      return {
+        start: {x: 1, y: 1},
+        end: {x: 0, y: 0},
+      };
+    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},
+      };
+    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;
+  }
+
+  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;
+  }
+
+  const [, value, unit] = match;
+
+  const numericValue = parseFloat(value);
+  switch (unit) {
+    case 'deg':
+      return (numericValue * Math.PI) / 180;
+    case 'grad':
+      return (numericValue * Math.PI) / 200;
+    case 'rad':
+      return numericValue;
+    case 'turn':
+      return numericValue * 2 * Math.PI;
+    default:
+      return null;
+  }
+}

package/Libraries/StyleSheet/processBoxShadow.js

@@ -0,0 +1,211 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react-native
+ */
+
+import type {ProcessedColorValue} from './processColor';
+import type {BoxShadowPrimitive} from './StyleSheetTypes';
+
+import processColor from './processColor';
+
+export type ParsedBoxShadow = {
+  offsetX: number,
+  offsetY: number,
+  color?: ProcessedColorValue,
+  blurRadius?: number,
+  spreadDistance?: number,
+  inset?: boolean,
+};
+
+export default function processBoxShadow(
+  rawBoxShadows: ?($ReadOnlyArray<BoxShadowPrimitive> | string),
+): Array<ParsedBoxShadow> {
+  const result: Array<ParsedBoxShadow> = [];
+  if (rawBoxShadows == null) {
+    return result;
+  }
+
+  const boxShadowList =
+    typeof rawBoxShadows === 'string'
+      ? parseBoxShadowString(rawBoxShadows)
+      : rawBoxShadows;
+
+  for (const rawBoxShadow of boxShadowList) {
+    const parsedBoxShadow: ParsedBoxShadow = {
+      offsetX: 0,
+      offsetY: 0,
+    };
+
+    let value;
+    for (const arg in rawBoxShadow) {
+      switch (arg) {
+        case 'offsetX':
+          value =
+            typeof rawBoxShadow.offsetX === 'string'
+              ? parseLength(rawBoxShadow.offsetX)
+              : rawBoxShadow.offsetX;
+          if (value == null) {
+            return [];
+          }
+
+          parsedBoxShadow.offsetX = value;
+          break;
+        case 'offsetY':
+          value =
+            typeof rawBoxShadow.offsetY === 'string'
+              ? parseLength(rawBoxShadow.offsetY)
+              : rawBoxShadow.offsetY;
+          if (value == null) {
+            return [];
+          }
+
+          parsedBoxShadow.offsetY = value;
+          break;
+        case 'spreadDistance':
+          value =
+            typeof rawBoxShadow.spreadDistance === 'string'
+              ? parseLength(rawBoxShadow.spreadDistance)
+              : rawBoxShadow.spreadDistance;
+          if (value == null) {
+            return [];
+          }
+
+          parsedBoxShadow.spreadDistance = value;
+          break;
+        case 'blurRadius':
+          value =
+            typeof rawBoxShadow.blurRadius === 'string'
+              ? parseLength(rawBoxShadow.blurRadius)
+              : rawBoxShadow.blurRadius;
+          if (value == null || value < 0) {
+            return [];
+          }
+
+          parsedBoxShadow.blurRadius = value;
+          break;
+        case 'color':
+          const color = processColor(rawBoxShadow.color);
+          if (color == null) {
+            return [];
+          }
+
+          parsedBoxShadow.color = color;
+          break;
+        case 'inset':
+          parsedBoxShadow.inset = rawBoxShadow.inset;
+      }
+    }
+    result.push(parsedBoxShadow);
+  }
+  return result;
+}
+
+function parseBoxShadowString(
+  rawBoxShadows: string,
+): Array<BoxShadowPrimitive> {
+  let result: Array<BoxShadowPrimitive> = [];
+
+  for (const rawBoxShadow of rawBoxShadows
+    .split(/,(?![^()]*\))/) // split by comma that is not in parenthesis
+    .map(bS => bS.trim())
+    .filter(bS => bS !== '')) {
+    const boxShadow: BoxShadowPrimitive = {
+      offsetX: 0,
+      offsetY: 0,
+    };
+    let offsetX: number | string;
+    let offsetY: number | string;
+    let keywordDetectedAfterLength = false;
+
+    let lengthCount = 0;
+
+    // split rawBoxShadow string by all whitespaces that are not in parenthesis
+    const args = rawBoxShadow.split(/\s+(?![^(]*\))/);
+    for (const arg of args) {
+      const processedColor = processColor(arg);
+      if (processedColor != null) {
+        if (boxShadow.color != null) {
+          return [];
+        }
+        if (offsetX != null) {
+          keywordDetectedAfterLength = true;
+        }
+        boxShadow.color = arg;
+        continue;
+      }
+
+      if (arg === 'inset') {
+        if (boxShadow.inset != null) {
+          return [];
+        }
+        if (offsetX != null) {
+          keywordDetectedAfterLength = true;
+        }
+        boxShadow.inset = true;
+        continue;
+      }
+
+      switch (lengthCount) {
+        case 0:
+          offsetX = arg;
+          lengthCount++;
+          break;
+        case 1:
+          if (keywordDetectedAfterLength) {
+            return [];
+          }
+          offsetY = arg;
+          lengthCount++;
+          break;
+        case 2:
+          if (keywordDetectedAfterLength) {
+            return [];
+          }
+          boxShadow.blurRadius = arg;
+          lengthCount++;
+          break;
+        case 3:
+          if (keywordDetectedAfterLength) {
+            return [];
+          }
+          boxShadow.spreadDistance = arg;
+          lengthCount++;
+          break;
+        default:
+          return [];
+      }
+    }
+
+    if (offsetX == null || offsetY == null) {
+      return [];
+    }
+
+    boxShadow.offsetX = offsetX;
+    boxShadow.offsetY = offsetY;
+
+    result.push(boxShadow);
+  }
+  return result;
+}
+
+function parseLength(length: string): ?number {
+  // matches on args with units like "1.5 5% -80deg"
+  const argsWithUnitsRegex = /([+-]?\d*(\.\d+)?)([\w\W]+)?/g;
+  const match = argsWithUnitsRegex.exec(length);
+
+  if (!match || Number.isNaN(match[1])) {
+    return null;
+  }
+
+  if (match[3] != null && match[3] !== 'px') {
+    return null;
+  }
+
+  return Number(match[1]);
+}