@office-iss/react-native-win32 0.0.0-canary.28 → 0.0.0-canary.281

package/Libraries/StyleSheet/PlatformColorValueTypesIOS.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.
@@ -8,13 +8,13 @@
  * @flow strict-local
  */
 
-'use strict';
-
-import type {ColorValue} from './StyleSheetTypes';
+import type {ColorValue} from './StyleSheet';
 
 export type DynamicColorIOSTuple = {
   light: ColorValue,
   dark: ColorValue,
+  highContrastLight?: ColorValue,
+  highContrastDark?: ColorValue,
 };
 
 export const DynamicColorIOS = (tuple: DynamicColorIOSTuple): ColorValue => {

package/Libraries/StyleSheet/PlatformColorValueTypesWin32.d.ts

@@ -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.
@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 // Use ColorValue typings when available in 0.63
 // import {ColorValue} from 'react-native';
 
@@ -32,7 +30,7 @@ export type GradientColorValueWin32 = {
 };
 
 /**
- * Creates a color value that renders using a grandient brush.
+ * Creates a color value that renders using a gradient brush.
  * This can be used to provide a value to most components that take a standard color value.
  */
 export declare const ColorGradientWin32: (

package/Libraries/StyleSheet/PlatformColorValueTypesWin32.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,7 +10,7 @@
 
 'use strict';
 
-import type {ColorValue} from './StyleSheetTypes';
+import type {ColorValue} from './StyleSheet';
 import type {GradientColorValueWin32} from './PlatformColorValueTypes';
 import {ColorGradientWin32Private} from './PlatformColorValueTypes';
 

package/Libraries/StyleSheet/PointPropType.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.

package/Libraries/StyleSheet/Rect.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.
@@ -8,8 +8,6 @@
  * @flow strict
  */
 
-'use strict';
-
 export type Rect = $ReadOnly<{|
   bottom?: ?number,
   left?: ?number,

package/Libraries/StyleSheet/StyleSheet.d.ts

@@ -0,0 +1,150 @@
+/**
+ * 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
+ */
+
+import {ImageStyle, TextStyle, ViewStyle} from './StyleSheetTypes';
+
+export interface StyleSheetProperties {
+  hairlineWidth: number;
+  flatten<T extends string>(style: T): T;
+}
+
+type Falsy = undefined | null | false | '';
+interface RecursiveArray<T>
+  extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
+/** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle<T>` and return `T`. */
+type RegisteredStyle<T> = number & {__registeredStyleBrand: T};
+export type StyleProp<T> =
+  | T
+  | RegisteredStyle<T>
+  | RecursiveArray<T | RegisteredStyle<T> | Falsy>
+  | Falsy;
+
+type OpaqueColorValue = symbol & {__TYPE__: 'Color'};
+export type ColorValue = string | OpaqueColorValue;
+
+export namespace StyleSheet {
+  type NamedStyles<T> = {[P in keyof T]: ViewStyle | TextStyle | ImageStyle};
+
+  /**
+   * An identity function for creating style sheets.
+   */
+  export function create<T extends NamedStyles<T> | NamedStyles<any>>(
+    // The extra & NamedStyles<any> here helps Typescript catch typos: e.g.,
+    // the following code would not error with `styles: T | NamedStyles<T>`,
+    // but would error with `styles: T & NamedStyles<any>`
+    //
+    // ```ts
+    // StyleSheet.create({
+    //   someComponent: { marginLeft: 1, magrinRight: 1 },
+    // });
+    // ```
+    styles: T & NamedStyles<any>,
+  ): T;
+
+  /**
+   * Flattens an array of style objects, into one aggregated style object.
+   *
+   * Example:
+   * ```
+   * const styles = StyleSheet.create({
+   *   listItem: {
+   *     flex: 1,
+   *     fontSize: 16,
+   *     color: 'white'
+   *   },
+   *   selectedListItem: {
+   *     color: 'green'
+   *   }
+   * });
+   *
+   * StyleSheet.flatten([styles.listItem, styles.selectedListItem])
+   * // returns { flex: 1, fontSize: 16, color: 'green' }
+   * ```
+   */
+  export function flatten<T>(
+    style?: StyleProp<T>,
+  ): T extends (infer U)[] ? U : T;
+
+  /**
+   * Combines two styles such that style2 will override any styles in style1.
+   * If either style is falsy, the other one is returned without allocating
+   * an array, saving allocations and maintaining reference equality for
+   * PureComponent checks.
+   */
+  export function compose<
+    T extends ViewStyle | TextStyle | ImageStyle,
+    U extends T,
+    V extends T,
+  >(
+    style1: StyleProp<U> | Array<StyleProp<U>>,
+    style2: StyleProp<V> | Array<StyleProp<V>>,
+  ): StyleProp<T>;
+
+  /**
+   * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
+   * not be reliably announced. The whole thing might be deleted, who knows? Use
+   * at your own risk.
+   *
+   * Sets a function to use to pre-process a style property value. This is used
+   * internally to process color and transform values. You should not use this
+   * unless you really know what you are doing and have exhausted other options.
+   */
+  export function setStyleAttributePreprocessor(
+    property: string,
+    process: (nextProp: any) => any,
+  ): void;
+
+  /**
+   * This is defined as the width of a thin line on the platform. It can be
+   * used as the thickness of a border or division between two elements.
+   * Example:
+   * ```
+   *   {
+   *     borderBottomColor: '#bbb',
+   *     borderBottomWidth: StyleSheet.hairlineWidth
+   *   }
+   * ```
+   *
+   * This constant will always be a round number of pixels (so a line defined
+   * by it look crisp) and will try to match the standard width of a thin line
+   * on the underlying platform. However, you should not rely on it being a
+   * constant size, because on different platforms and screen densities its
+   * value may be calculated differently.
+   */
+  export const hairlineWidth: number;
+
+  interface AbsoluteFillStyle {
+    position: 'absolute';
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  /**
+   * Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
+   * used to create a customized entry in a `StyleSheet`, e.g.:
+   *
+   *   const styles = StyleSheet.create({
+   *     wrapper: {
+   *       ...StyleSheet.absoluteFillObject,
+   *       top: 10,
+   *       backgroundColor: 'transparent',
+   *     },
+   *   });
+   */
+  export const absoluteFillObject: AbsoluteFillStyle;
+
+  /**
+   * A very common pattern is to create overlays with position absolute and zero positioning,
+   * so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
+   * styles.
+   */
+  export const absoluteFill: RegisteredStyle<AbsoluteFillStyle>;
+}

package/Libraries/StyleSheet/StyleSheet.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,24 +10,36 @@
 
 'use strict';
 
-const PixelRatio = require('../Utilities/PixelRatio');
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-const StyleSheetValidation = require('./StyleSheetValidation');
-
-const flatten = require('./flattenStyle');
-
 import type {
-  ____Styles_Internal,
+  ____ColorValue_Internal,
   ____DangerouslyImpreciseStyle_Internal,
   ____DangerouslyImpreciseStyleProp_Internal,
-  ____ViewStyle_Internal,
-  ____ViewStyleProp_Internal,
-  ____TextStyle_Internal,
-  ____TextStyleProp_Internal,
   ____ImageStyle_Internal,
   ____ImageStyleProp_Internal,
+  ____Styles_Internal,
+  ____TextStyle_Internal,
+  ____TextStyleProp_Internal,
+  ____ViewStyle_Internal,
+  ____ViewStyleProp_Internal,
 } from './StyleSheetTypes';
 
+import composeStyles from '../../src/private/styles/composeStyles';
+
+const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+const PixelRatio = require('../Utilities/PixelRatio').default;
+const flatten = require('./flattenStyle');
+
+export type {NativeColorValue} from './StyleSheetTypes';
+
+/**
+ * This type should be used as the type for anything that is a color. It is
+ * most useful when using DynamicColorIOS which can be a string or a dynamic
+ * color object.
+ *
+ * type props = {backgroundColor: ColorValue};
+ */
+export type ColorValue = ____ColorValue_Internal;
+
 /**
  * This type should be used as the type for a prop that is passed through
  * to a <View>'s `style` prop. This ensures call sites of the component
@@ -65,7 +77,8 @@ export type ImageStyleProp = ____ImageStyleProp_Internal;
  * through to an underlying component. Using this is almost always a mistake
  * and using one of the other more restrictive types is likely the right choice.
  */
-export type DangerouslyImpreciseStyleProp = ____DangerouslyImpreciseStyleProp_Internal;
+export type DangerouslyImpreciseStyleProp =
+  ____DangerouslyImpreciseStyleProp_Internal;
 
 /**
  * Utility type for getting the values for specific style keys.
@@ -157,7 +170,13 @@ if (hairlineWidth === 0) {
   hairlineWidth = 1 / PixelRatio.get();
 }
 
-const absoluteFill = {
+const absoluteFill: {
+  +bottom: 0,
+  +left: 0,
+  +position: 'absolute',
+  +right: 0,
+  +top: 0,
+} = {
   position: 'absolute',
   left: 0,
   right: 0,
@@ -201,16 +220,12 @@ if (__DEV__) {
  * Code quality:
  *
  *  - By moving styles away from the render function, you're making the code
- *  easier to understand.
+ *    easier to understand.
  *  - Naming the styles is a good way to add meaning to the low level components
- *  in the render function.
+ *  in the render function, and encourage reuse.
+ *  - In most IDEs, using `StyleSheet.create()` will offer static type checking
+ *  and suggestions to help you write valid styles.
  *
- * Performance:
- *
- *  - Making a stylesheet from a style object makes it possible to refer to it
- * by ID instead of creating a new style object every time.
- *  - It also allows to send the style only once through the bridge. All
- * subsequent uses are going to refer an id (not implemented yet).
  */
 module.exports = {
   /**
@@ -261,27 +276,10 @@ module.exports = {
    * array, saving allocations and maintaining reference equality for
    * PureComponent checks.
    */
-  compose<T: DangerouslyImpreciseStyleProp>(
-    style1: ?T,
-    style2: ?T,
-  ): ?T | $ReadOnlyArray<T> {
-    if (style1 != null && style2 != null) {
-      return ([style1, style2]: $ReadOnlyArray<T>);
-    } else {
-      return style1 != null ? style1 : style2;
-    }
-  },
+  compose: composeStyles,
 
   /**
    * Flattens an array of style objects, into one aggregated style object.
-   * Alternatively, this method can be used to lookup IDs, returned by
-   * StyleSheet.register.
-   *
-   * > **NOTE**: Exercise caution as abusing this can tax you in terms of
-   * > optimizations.
-   * >
-   * > IDs enable optimizations through the bridge and memory in general. Referring
-   * > to style objects directly will deprive you of these optimizations.
    *
    * Example:
    * ```
@@ -299,17 +297,6 @@ module.exports = {
    * StyleSheet.flatten([styles.listItem, styles.selectedListItem])
    * // returns { flex: 1, fontSize: 16, color: 'green' }
    * ```
-   * Alternative use:
-   * ```
-   * StyleSheet.flatten(styles.listItem);
-   * // return { flex: 1, fontSize: 16, color: 'white' }
-   * // Simply styles.listItem would return its ID (number)
-   * ```
-   * This method internally uses `StyleSheetRegistry.getStyleByID(style)`
-   * to resolve style objects represented by IDs. Thus, an array of style
-   * objects (instances of StyleSheet.create), are individually resolved to,
-   * their respective objects, merged as one and then returned. This also explains
-   * the alternative use.
    */
   flatten,
 
@@ -329,31 +316,36 @@ module.exports = {
     let value;
 
     if (ReactNativeStyleAttributes[property] === true) {
-      value = {};
+      value = {process};
     } else if (typeof ReactNativeStyleAttributes[property] === 'object') {
-      value = ReactNativeStyleAttributes[property];
+      value = {...ReactNativeStyleAttributes[property], process};
     } else {
       console.error(`${property} is not a valid style attribute`);
       return;
     }
 
-    if (__DEV__ && typeof value.process === 'function') {
+    if (
+      __DEV__ &&
+      typeof value.process === 'function' &&
+      typeof ReactNativeStyleAttributes[property]?.process === 'function' &&
+      value.process !== ReactNativeStyleAttributes[property]?.process
+    ) {
       console.warn(`Overwriting ${property} style attribute preprocessor`);
     }
 
-    ReactNativeStyleAttributes[property] = {...value, process};
+    ReactNativeStyleAttributes[property] = value;
   },
 
   /**
-   * Creates a StyleSheet style reference from the given object.
+   * An identity function for creating style sheets.
    */
+  // $FlowFixMe[unsupported-variance-annotation]
   create<+S: ____Styles_Internal>(obj: S): $ReadOnly<S> {
     // TODO: This should return S as the return type. But first,
     // we need to codemod all the callsites that are typing this
     // return value as a number (even though it was opaque).
     if (__DEV__) {
       for (const key in obj) {
-        StyleSheetValidation.validateStyle(key, obj);
         if (obj[key]) {
           Object.freeze(obj[key]);
         }

package/Libraries/StyleSheet/StyleSheet.win32.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,25 +10,37 @@
 
 'use strict';
 
-const PixelRatio = require('../Utilities/PixelRatio');
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-const StyleSheetValidation = require('./StyleSheetValidation');
-const Platform = require('../Utilities/Platform'); // [Win32]
-
-const flatten = require('./flattenStyle');
-
 import type {
-  ____Styles_Internal,
+  ____ColorValue_Internal,
   ____DangerouslyImpreciseStyle_Internal,
   ____DangerouslyImpreciseStyleProp_Internal,
-  ____ViewStyle_Internal,
-  ____ViewStyleProp_Internal,
-  ____TextStyle_Internal,
-  ____TextStyleProp_Internal,
   ____ImageStyle_Internal,
   ____ImageStyleProp_Internal,
+  ____Styles_Internal,
+  ____TextStyle_Internal,
+  ____TextStyleProp_Internal,
+  ____ViewStyle_Internal,
+  ____ViewStyleProp_Internal,
 } from './StyleSheetTypes';
 
+import composeStyles from '../../src/private/styles/composeStyles';
+
+const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+const PixelRatio = require('../Utilities/PixelRatio').default;
+const Platform = require('../Utilities/Platform'); // [Win32]
+const flatten = require('./flattenStyle');
+
+export type {NativeColorValue} from './StyleSheetTypes';
+
+/**
+ * This type should be used as the type for anything that is a color. It is
+ * most useful when using DynamicColorIOS which can be a string or a dynamic
+ * color object.
+ *
+ * type props = {backgroundColor: ColorValue};
+ */
+export type ColorValue = ____ColorValue_Internal;
+
 /**
  * This type should be used as the type for a prop that is passed through
  * to a <View>'s `style` prop. This ensures call sites of the component
@@ -66,7 +78,8 @@ export type ImageStyleProp = ____ImageStyleProp_Internal;
  * through to an underlying component. Using this is almost always a mistake
  * and using one of the other more restrictive types is likely the right choice.
  */
-export type DangerouslyImpreciseStyleProp = ____DangerouslyImpreciseStyleProp_Internal;
+export type DangerouslyImpreciseStyleProp =
+  ____DangerouslyImpreciseStyleProp_Internal;
 
 /**
  * Utility type for getting the values for specific style keys.
@@ -159,7 +172,13 @@ if (hairlineWidth === 0) {
   hairlineWidth = 1 / PixelRatio.get();
 }
 
-const absoluteFill = {
+const absoluteFill: {
+  +bottom: 0,
+  +left: 0,
+  +position: 'absolute',
+  +right: 0,
+  +top: 0,
+} = {
   position: 'absolute',
   left: 0,
   right: 0,
@@ -203,16 +222,12 @@ if (__DEV__) {
  * Code quality:
  *
  *  - By moving styles away from the render function, you're making the code
- *  easier to understand.
+ *    easier to understand.
  *  - Naming the styles is a good way to add meaning to the low level components
- *  in the render function.
- *
- * Performance:
+ *  in the render function, and encourage reuse.
+ *  - In most IDEs, using `StyleSheet.create()` will offer static type checking
+ *  and suggestions to help you write valid styles.
  *
- *  - Making a stylesheet from a style object makes it possible to refer to it
- * by ID instead of creating a new style object every time.
- *  - It also allows to send the style only once through the bridge. All
- * subsequent uses are going to refer an id (not implemented yet).
  */
 module.exports = {
   /**
@@ -263,27 +278,10 @@ module.exports = {
    * array, saving allocations and maintaining reference equality for
    * PureComponent checks.
    */
-  compose<T: DangerouslyImpreciseStyleProp>(
-    style1: ?T,
-    style2: ?T,
-  ): ?T | $ReadOnlyArray<T> {
-    if (style1 != null && style2 != null) {
-      return ([style1, style2]: $ReadOnlyArray<T>);
-    } else {
-      return style1 != null ? style1 : style2;
-    }
-  },
+  compose: composeStyles,
 
   /**
    * Flattens an array of style objects, into one aggregated style object.
-   * Alternatively, this method can be used to lookup IDs, returned by
-   * StyleSheet.register.
-   *
-   * > **NOTE**: Exercise caution as abusing this can tax you in terms of
-   * > optimizations.
-   * >
-   * > IDs enable optimizations through the bridge and memory in general. Referring
-   * > to style objects directly will deprive you of these optimizations.
    *
    * Example:
    * ```
@@ -301,17 +299,6 @@ module.exports = {
    * StyleSheet.flatten([styles.listItem, styles.selectedListItem])
    * // returns { flex: 1, fontSize: 16, color: 'green' }
    * ```
-   * Alternative use:
-   * ```
-   * StyleSheet.flatten(styles.listItem);
-   * // return { flex: 1, fontSize: 16, color: 'white' }
-   * // Simply styles.listItem would return its ID (number)
-   * ```
-   * This method internally uses `StyleSheetRegistry.getStyleByID(style)`
-   * to resolve style objects represented by IDs. Thus, an array of style
-   * objects (instances of StyleSheet.create), are individually resolved to,
-   * their respective objects, merged as one and then returned. This also explains
-   * the alternative use.
    */
   flatten,
 
@@ -331,31 +318,36 @@ module.exports = {
     let value;
 
     if (ReactNativeStyleAttributes[property] === true) {
-      value = {};
+      value = {process};
     } else if (typeof ReactNativeStyleAttributes[property] === 'object') {
-      value = ReactNativeStyleAttributes[property];
+      value = {...ReactNativeStyleAttributes[property], process};
     } else {
       console.error(`${property} is not a valid style attribute`);
       return;
     }
 
-    if (__DEV__ && typeof value.process === 'function') {
+    if (
+      __DEV__ &&
+      typeof value.process === 'function' &&
+      typeof ReactNativeStyleAttributes[property]?.process === 'function' &&
+      value.process !== ReactNativeStyleAttributes[property]?.process
+    ) {
       console.warn(`Overwriting ${property} style attribute preprocessor`);
     }
 
-    ReactNativeStyleAttributes[property] = {...value, process};
+    ReactNativeStyleAttributes[property] = value;
   },
 
   /**
-   * Creates a StyleSheet style reference from the given object.
+   * An identity function for creating style sheets.
    */
+  // $FlowFixMe[unsupported-variance-annotation]
   create<+S: ____Styles_Internal>(obj: S): $ReadOnly<S> {
     // TODO: This should return S as the return type. But first,
     // we need to codemod all the callsites that are typing this
     // return value as a number (even though it was opaque).
     if (__DEV__) {
       for (const key in obj) {
-        StyleSheetValidation.validateStyle(key, obj);
         if (obj[key]) {
           Object.freeze(obj[key]);
         }