@office-iss/react-native-win32 0.0.0-canary.27 → 0.0.0-canary.271

package/Libraries/StyleSheet/__flowtests__/StyleSheet-flowtest.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -10,61 +10,37 @@
 
 'use strict';
 
-const StyleSheet = require('../StyleSheet');
-
 import type {ImageStyleProp, TextStyleProp} from '../StyleSheet';
+
+const StyleSheet = require('../StyleSheet');
 const imageStyle = {tintColor: 'rgb(0, 0, 0)'};
 const textStyle = {color: 'rgb(0, 0, 0)'};
 
 module.exports = {
   testGoodCompose() {
-    (StyleSheet.compose(
-      imageStyle,
-      imageStyle,
-    ): ImageStyleProp);
+    (StyleSheet.compose(imageStyle, imageStyle): ImageStyleProp);
 
-    (StyleSheet.compose(
-      textStyle,
-      textStyle,
-    ): TextStyleProp);
+    (StyleSheet.compose(textStyle, textStyle): TextStyleProp);
 
-    (StyleSheet.compose(
-      null,
-      null,
-    ): TextStyleProp);
+    (StyleSheet.compose(null, null): TextStyleProp);
 
-    (StyleSheet.compose(
-      textStyle,
-      null,
-    ): TextStyleProp);
+    (StyleSheet.compose(textStyle, null): TextStyleProp);
 
     (StyleSheet.compose(
       textStyle,
       Math.random() < 0.5 ? textStyle : null,
     ): TextStyleProp);
 
-    (StyleSheet.compose(
-      [textStyle],
-      null,
-    ): TextStyleProp);
+    (StyleSheet.compose([textStyle], null): TextStyleProp);
 
-    (StyleSheet.compose(
-      [textStyle],
-      null,
-    ): TextStyleProp);
+    (StyleSheet.compose([textStyle], null): TextStyleProp);
 
-    (StyleSheet.compose(
-      [textStyle],
-      [textStyle],
-    ): TextStyleProp);
+    (StyleSheet.compose([textStyle], [textStyle]): TextStyleProp);
   },
 
   testBadCompose() {
     // $FlowExpectedError - Incompatible type.
-    (StyleSheet.compose(
-      textStyle,
-      textStyle,
-    ): ImageStyleProp);
+    (StyleSheet.compose(textStyle, textStyle): ImageStyleProp);
 
     // $FlowExpectedError - Incompatible type.
     (StyleSheet.compose(

package/Libraries/StyleSheet/flattenStyle.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -10,31 +10,36 @@
 
 'use strict';
 
-import type {
-  DangerouslyImpreciseStyle,
-  DangerouslyImpreciseStyleProp,
-} from './StyleSheet';
+import type {DangerouslyImpreciseStyleProp} from './StyleSheet';
+import type {____FlattenStyleProp_Internal} from './StyleSheetTypes';
 
-function flattenStyle(
-  style: ?DangerouslyImpreciseStyleProp,
-): ?DangerouslyImpreciseStyle {
+function flattenStyle<TStyleProp: DangerouslyImpreciseStyleProp>(
+  style: ?TStyleProp,
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+): ?____FlattenStyleProp_Internal<TStyleProp> {
   if (style === null || typeof style !== 'object') {
     return undefined;
   }
 
   if (!Array.isArray(style)) {
+    // $FlowFixMe[incompatible-return]
     return style;
   }
 
-  const result = {};
+  const result: {[string]: $FlowFixMe} = {};
   for (let i = 0, styleLength = style.length; i < styleLength; ++i) {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     const computedStyle = flattenStyle(style[i]);
     if (computedStyle) {
+      // $FlowFixMe[invalid-in-rhs]
       for (const key in computedStyle) {
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[invalid-computed-prop]
         result[key] = computedStyle[key];
       }
     }
   }
+  // $FlowFixMe[incompatible-return]
   return result;
 }
 

package/Libraries/StyleSheet/normalizeColor.js

@@ -1,393 +1,34 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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
+ * @flow strict-local
  */
 
 /* eslint no-bitwise: 0 */
 
-'use strict';
-
-import type {ColorValue} from './StyleSheetTypes';
 import type {ProcessedColorValue} from './processColor';
+import type {ColorValue} from './StyleSheet';
+
+import _normalizeColor from '@react-native/normalize-colors';
 
 function normalizeColor(
   color: ?(ColorValue | ProcessedColorValue),
 ): ?ProcessedColorValue {
-  const matchers = getMatchers();
-  let match;
-
-  if (typeof color === 'number') {
-    if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) {
-      return color;
-    }
-    return null;
-  }
-
   if (typeof color === 'object' && color != null) {
-    const normalizeColorObject = require('./PlatformColorValueTypes')
-      .normalizeColorObject;
-
-    const normalizedColorObj = normalizeColorObject(color);
-
-    if (normalizedColorObj != null) {
-      return color;
+    const {normalizeColorObject} = require('./PlatformColorValueTypes');
+    const normalizedColor = normalizeColorObject(color);
+    if (normalizedColor != null) {
+      return normalizedColor;
     }
   }
 
-  if (typeof color !== 'string') {
-    return null;
-  }
-
-  // Ordered based on occurrences on Facebook codebase
-  if ((match = matchers.hex6.exec(color))) {
-    return parseInt(match[1] + 'ff', 16) >>> 0;
-  }
-
-  if (names.hasOwnProperty(color)) {
-    return names[color];
-  }
-
-  if ((match = matchers.rgb.exec(color))) {
-    return (
-      // b
-      ((parse255(match[1]) << 24) | // r
-      (parse255(match[2]) << 16) | // g
-        (parse255(match[3]) << 8) |
-        0x000000ff) >>> // a
-      0
-    );
-  }
-
-  if ((match = matchers.rgba.exec(color))) {
-    return (
-      // b
-      ((parse255(match[1]) << 24) | // r
-      (parse255(match[2]) << 16) | // g
-        (parse255(match[3]) << 8) |
-        parse1(match[4])) >>> // a
-      0
-    );
-  }
-
-  if ((match = matchers.hex3.exec(color))) {
-    return (
-      parseInt(
-        match[1] +
-        match[1] + // r
-        match[2] +
-        match[2] + // g
-        match[3] +
-        match[3] + // b
-          'ff', // a
-        16,
-      ) >>> 0
-    );
-  }
-
-  // https://drafts.csswg.org/css-color-4/#hex-notation
-  if ((match = matchers.hex8.exec(color))) {
-    return parseInt(match[1], 16) >>> 0;
-  }
-
-  if ((match = matchers.hex4.exec(color))) {
-    return (
-      parseInt(
-        match[1] +
-        match[1] + // r
-        match[2] +
-        match[2] + // g
-        match[3] +
-        match[3] + // b
-          match[4] +
-          match[4], // a
-        16,
-      ) >>> 0
-    );
-  }
-
-  if ((match = matchers.hsl.exec(color))) {
-    return (
-      (hslToRgb(
-        parse360(match[1]), // h
-        parsePercentage(match[2]), // s
-        parsePercentage(match[3]), // l
-      ) |
-        0x000000ff) >>> // a
-      0
-    );
-  }
-
-  if ((match = matchers.hsla.exec(color))) {
-    return (
-      (hslToRgb(
-        parse360(match[1]), // h
-        parsePercentage(match[2]), // s
-        parsePercentage(match[3]), // l
-      ) |
-        parse1(match[4])) >>> // a
-      0
-    );
-  }
-
-  return null;
-}
-
-function hue2rgb(p: number, q: number, t: number): number {
-  if (t < 0) {
-    t += 1;
-  }
-  if (t > 1) {
-    t -= 1;
-  }
-  if (t < 1 / 6) {
-    return p + (q - p) * 6 * t;
-  }
-  if (t < 1 / 2) {
-    return q;
-  }
-  if (t < 2 / 3) {
-    return p + (q - p) * (2 / 3 - t) * 6;
-  }
-  return p;
-}
-
-function hslToRgb(h: number, s: number, l: number): number {
-  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-  const p = 2 * l - q;
-  const r = hue2rgb(p, q, h + 1 / 3);
-  const g = hue2rgb(p, q, h);
-  const b = hue2rgb(p, q, h - 1 / 3);
-
-  return (
-    (Math.round(r * 255) << 24) |
-    (Math.round(g * 255) << 16) |
-    (Math.round(b * 255) << 8)
-  );
-}
-
-// var INTEGER = '[-+]?\\d+';
-const NUMBER = '[-+]?\\d*\\.?\\d+';
-const PERCENTAGE = NUMBER + '%';
-
-function call(...args) {
-  return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)';
-}
-
-let cachedMatchers;
-
-function getMatchers() {
-  if (cachedMatchers === undefined) {
-    cachedMatchers = {
-      rgb: new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER)),
-      rgba: new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER)),
-      hsl: new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE)),
-      hsla: new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)),
-      hex3: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-      hex4: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-      hex6: /^#([0-9a-fA-F]{6})$/,
-      hex8: /^#([0-9a-fA-F]{8})$/,
-    };
-  }
-  return cachedMatchers;
-}
-
-function parse255(str: string): number {
-  const int = parseInt(str, 10);
-  if (int < 0) {
-    return 0;
+  if (typeof color === 'string' || typeof color === 'number') {
+    return _normalizeColor(color);
   }
-  if (int > 255) {
-    return 255;
-  }
-  return int;
-}
-
-function parse360(str: string): number {
-  const int = parseFloat(str);
-  return (((int % 360) + 360) % 360) / 360;
 }
 
-function parse1(str: string): number {
-  const num = parseFloat(str);
-  if (num < 0) {
-    return 0;
-  }
-  if (num > 1) {
-    return 255;
-  }
-  return Math.round(num * 255);
-}
-
-function parsePercentage(str: string): number {
-  // parseFloat conveniently ignores the final %
-  const int = parseFloat(str);
-  if (int < 0) {
-    return 0;
-  }
-  if (int > 100) {
-    return 1;
-  }
-  return int / 100;
-}
-
-const names = {
-  transparent: 0x00000000,
-
-  // http://www.w3.org/TR/css3-color/#svg-color
-  aliceblue: 0xf0f8ffff,
-  antiquewhite: 0xfaebd7ff,
-  aqua: 0x00ffffff,
-  aquamarine: 0x7fffd4ff,
-  azure: 0xf0ffffff,
-  beige: 0xf5f5dcff,
-  bisque: 0xffe4c4ff,
-  black: 0x000000ff,
-  blanchedalmond: 0xffebcdff,
-  blue: 0x0000ffff,
-  blueviolet: 0x8a2be2ff,
-  brown: 0xa52a2aff,
-  burlywood: 0xdeb887ff,
-  burntsienna: 0xea7e5dff,
-  cadetblue: 0x5f9ea0ff,
-  chartreuse: 0x7fff00ff,
-  chocolate: 0xd2691eff,
-  coral: 0xff7f50ff,
-  cornflowerblue: 0x6495edff,
-  cornsilk: 0xfff8dcff,
-  crimson: 0xdc143cff,
-  cyan: 0x00ffffff,
-  darkblue: 0x00008bff,
-  darkcyan: 0x008b8bff,
-  darkgoldenrod: 0xb8860bff,
-  darkgray: 0xa9a9a9ff,
-  darkgreen: 0x006400ff,
-  darkgrey: 0xa9a9a9ff,
-  darkkhaki: 0xbdb76bff,
-  darkmagenta: 0x8b008bff,
-  darkolivegreen: 0x556b2fff,
-  darkorange: 0xff8c00ff,
-  darkorchid: 0x9932ccff,
-  darkred: 0x8b0000ff,
-  darksalmon: 0xe9967aff,
-  darkseagreen: 0x8fbc8fff,
-  darkslateblue: 0x483d8bff,
-  darkslategray: 0x2f4f4fff,
-  darkslategrey: 0x2f4f4fff,
-  darkturquoise: 0x00ced1ff,
-  darkviolet: 0x9400d3ff,
-  deeppink: 0xff1493ff,
-  deepskyblue: 0x00bfffff,
-  dimgray: 0x696969ff,
-  dimgrey: 0x696969ff,
-  dodgerblue: 0x1e90ffff,
-  firebrick: 0xb22222ff,
-  floralwhite: 0xfffaf0ff,
-  forestgreen: 0x228b22ff,
-  fuchsia: 0xff00ffff,
-  gainsboro: 0xdcdcdcff,
-  ghostwhite: 0xf8f8ffff,
-  gold: 0xffd700ff,
-  goldenrod: 0xdaa520ff,
-  gray: 0x808080ff,
-  green: 0x008000ff,
-  greenyellow: 0xadff2fff,
-  grey: 0x808080ff,
-  honeydew: 0xf0fff0ff,
-  hotpink: 0xff69b4ff,
-  indianred: 0xcd5c5cff,
-  indigo: 0x4b0082ff,
-  ivory: 0xfffff0ff,
-  khaki: 0xf0e68cff,
-  lavender: 0xe6e6faff,
-  lavenderblush: 0xfff0f5ff,
-  lawngreen: 0x7cfc00ff,
-  lemonchiffon: 0xfffacdff,
-  lightblue: 0xadd8e6ff,
-  lightcoral: 0xf08080ff,
-  lightcyan: 0xe0ffffff,
-  lightgoldenrodyellow: 0xfafad2ff,
-  lightgray: 0xd3d3d3ff,
-  lightgreen: 0x90ee90ff,
-  lightgrey: 0xd3d3d3ff,
-  lightpink: 0xffb6c1ff,
-  lightsalmon: 0xffa07aff,
-  lightseagreen: 0x20b2aaff,
-  lightskyblue: 0x87cefaff,
-  lightslategray: 0x778899ff,
-  lightslategrey: 0x778899ff,
-  lightsteelblue: 0xb0c4deff,
-  lightyellow: 0xffffe0ff,
-  lime: 0x00ff00ff,
-  limegreen: 0x32cd32ff,
-  linen: 0xfaf0e6ff,
-  magenta: 0xff00ffff,
-  maroon: 0x800000ff,
-  mediumaquamarine: 0x66cdaaff,
-  mediumblue: 0x0000cdff,
-  mediumorchid: 0xba55d3ff,
-  mediumpurple: 0x9370dbff,
-  mediumseagreen: 0x3cb371ff,
-  mediumslateblue: 0x7b68eeff,
-  mediumspringgreen: 0x00fa9aff,
-  mediumturquoise: 0x48d1ccff,
-  mediumvioletred: 0xc71585ff,
-  midnightblue: 0x191970ff,
-  mintcream: 0xf5fffaff,
-  mistyrose: 0xffe4e1ff,
-  moccasin: 0xffe4b5ff,
-  navajowhite: 0xffdeadff,
-  navy: 0x000080ff,
-  oldlace: 0xfdf5e6ff,
-  olive: 0x808000ff,
-  olivedrab: 0x6b8e23ff,
-  orange: 0xffa500ff,
-  orangered: 0xff4500ff,
-  orchid: 0xda70d6ff,
-  palegoldenrod: 0xeee8aaff,
-  palegreen: 0x98fb98ff,
-  paleturquoise: 0xafeeeeff,
-  palevioletred: 0xdb7093ff,
-  papayawhip: 0xffefd5ff,
-  peachpuff: 0xffdab9ff,
-  peru: 0xcd853fff,
-  pink: 0xffc0cbff,
-  plum: 0xdda0ddff,
-  powderblue: 0xb0e0e6ff,
-  purple: 0x800080ff,
-  rebeccapurple: 0x663399ff,
-  red: 0xff0000ff,
-  rosybrown: 0xbc8f8fff,
-  royalblue: 0x4169e1ff,
-  saddlebrown: 0x8b4513ff,
-  salmon: 0xfa8072ff,
-  sandybrown: 0xf4a460ff,
-  seagreen: 0x2e8b57ff,
-  seashell: 0xfff5eeff,
-  sienna: 0xa0522dff,
-  silver: 0xc0c0c0ff,
-  skyblue: 0x87ceebff,
-  slateblue: 0x6a5acdff,
-  slategray: 0x708090ff,
-  slategrey: 0x708090ff,
-  snow: 0xfffafaff,
-  springgreen: 0x00ff7fff,
-  steelblue: 0x4682b4ff,
-  tan: 0xd2b48cff,
-  teal: 0x008080ff,
-  thistle: 0xd8bfd8ff,
-  tomato: 0xff6347ff,
-  turquoise: 0x40e0d0ff,
-  violet: 0xee82eeff,
-  wheat: 0xf5deb3ff,
-  white: 0xffffffff,
-  whitesmoke: 0xf5f5f5ff,
-  yellow: 0xffff00ff,
-  yellowgreen: 0x9acd32ff,
-};
-
 module.exports = normalizeColor;

package/Libraries/StyleSheet/private/_StyleSheetTypesOverrides.js

@@ -0,0 +1,15 @@
+/**
+ * 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
+ * @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<{}>;

package/Libraries/StyleSheet/private/_TransformStyle.js

@@ -0,0 +1,69 @@
+/**
+ * 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
+ */
+
+import type AnimatedNode from '../../Animated/nodes/AnimatedNode';
+
+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
+   * transformation. Objects should not be combined. Use a single key/value pair
+   * per object.
+   *
+   * The rotate transformations require a string so that the transform may be
+   * expressed in degrees (deg) or radians (rad). For example:
+   *
+   * `transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }])`
+   *
+   * The skew transformations require a string so that the transform may be
+   * expressed in degrees (deg). For example:
+   *
+   * `transform([{ skewX: '45deg' }])`
+   */
+  transform?:
+    | $ReadOnlyArray<
+        | {|+perspective: number | AnimatedNode|}
+        | {|+rotate: string | AnimatedNode|}
+        | {|+rotateX: string | AnimatedNode|}
+        | {|+rotateY: string | AnimatedNode|}
+        | {|+rotateZ: string | AnimatedNode|}
+        | {|+scale: number | AnimatedNode|}
+        | {|+scaleX: number | AnimatedNode|}
+        | {|+scaleY: number | AnimatedNode|}
+        | {|+translateX: number | AnimatedNode|}
+        | {|+translateY: number | AnimatedNode|}
+        | {|
+            +translate:
+              | [number | AnimatedNode, number | AnimatedNode]
+              | AnimatedNode,
+          |}
+        | {|+skewX: string | AnimatedNode|}
+        | {|+skewY: string | AnimatedNode|}
+        // TODO: what is the actual type it expects?
+        | {|
+            +matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
+          |},
+      >
+    | string,
+  /**
+   * `transformOrigin` accepts an array with 3 elements - each element either being
+   * a number, or a string of a number ending with `%`. The last element cannot be
+   * a percentage, so must be a number.
+   *
+   * E.g. transformOrigin: ['30%', '80%', 15]
+   *
+   * Alternatively accepts a string of the CSS syntax. You must use `%` or `px`.
+   *
+   * E.g. transformOrigin: '30% 80% 15px'
+   */
+  transformOrigin?:
+    | [string | number, string | number, string | number]
+    | string,
+|}>;

package/Libraries/StyleSheet/processAspectRatio.js

@@ -0,0 +1,63 @@
+/**
+ * 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';
+
+const invariant = require('invariant');
+
+function processAspectRatio(aspectRatio?: number | string): ?number {
+  if (typeof aspectRatio === 'number') {
+    return aspectRatio;
+  }
+  if (typeof aspectRatio !== 'string') {
+    if (__DEV__) {
+      invariant(
+        !aspectRatio,
+        'aspectRatio must either be a number, a ratio string or `auto`. You passed: %s',
+        aspectRatio,
+      );
+    }
+    return;
+  }
+
+  const matches = aspectRatio.split('/').map(s => s.trim());
+
+  if (matches.includes('auto')) {
+    if (__DEV__) {
+      invariant(
+        matches.length,
+        'aspectRatio does not support `auto <ratio>`. You passed: %s',
+        aspectRatio,
+      );
+    }
+    return;
+  }
+
+  const hasNonNumericValues = matches.some(n => Number.isNaN(Number(n)));
+  if (__DEV__) {
+    invariant(
+      !hasNonNumericValues && (matches.length === 1 || matches.length === 2),
+      'aspectRatio must either be a number, a ratio string or `auto`. You passed: %s',
+      aspectRatio,
+    );
+  }
+
+  if (hasNonNumericValues) {
+    return;
+  }
+
+  if (matches.length === 2) {
+    return Number(matches[0]) / Number(matches[1]);
+  }
+
+  return Number(matches[0]);
+}
+
+module.exports = processAspectRatio;