react-native-windows 0.70.9 → 0.71.0-preview.2

package/Libraries/StyleSheet/PlatformColorValueTypes.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 {OpaqueColorValue} from './StyleSheet';
+
+/**
+ * Select native platform color
+ * The color must match the string that exists on the native platform
+ *
+ * @see https://reactnative.dev/docs/platformcolor#example
+ */
+export function PlatformColor(...colors: string[]): OpaqueColorValue;

package/Libraries/StyleSheet/PlatformColorValueTypes.ios.js

@@ -8,8 +8,8 @@
  * @flow strict-local
  */
 
-import type {ColorValue} from './StyleSheet';
 import type {ProcessedColorValue} from './processColor';
+import type {ColorValue} from './StyleSheet';
 
 export opaque type NativeColorValue = {
   semantic?: Array<string>,

package/Libraries/StyleSheet/PlatformColorValueTypesIOS.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 {ColorValue, OpaqueColorValue} from './StyleSheet';
+
+type DynamicColorIOSTuple = {
+  light: ColorValue;
+  dark: ColorValue;
+  highContrastLight?: ColorValue | undefined;
+  highContrastDark?: ColorValue | undefined;
+};
+
+/**
+ * Specify color to display depending on the current system appearance settings
+ *
+ * @param tuple Colors you want to use for "light mode" and "dark mode"
+ * @platform ios
+ */
+export function DynamicColorIOS(tuple: DynamicColorIOSTuple): OpaqueColorValue;

package/Libraries/StyleSheet/PlatformColorValueTypesIOS.ios.js

@@ -9,6 +9,7 @@
  */
 
 import type {ColorValue} from './StyleSheet';
+
 import {DynamicColorIOSPrivate} from './PlatformColorValueTypes';
 
 export type DynamicColorIOSTuple = {

package/Libraries/StyleSheet/StyleSheet.d.ts

@@ -0,0 +1,156 @@
+/**
+ * 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};
+
+  /**
+   * Creates a StyleSheet style reference from the given object.
+   */
+  export function create<T extends NamedStyles<T> | NamedStyles<any>>(
+    styles: T | NamedStyles<T>,
+  ): T;
+
+  /**
+   * 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:
+   * ```
+   * 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' }
+   * ```
+   * 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.
+   */
+  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>(
+    style1: StyleProp<T> | Array<StyleProp<T>>,
+    style2: StyleProp<T> | Array<StyleProp<T>>,
+  ): 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

@@ -10,24 +10,23 @@
 
 'use strict';
 
-const PixelRatio = require('../Utilities/PixelRatio');
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-
-const flatten = require('./flattenStyle');
-
 import type {
   ____ColorValue_Internal,
-  ____Styles_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';
 
+const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+const PixelRatio = require('../Utilities/PixelRatio');
+const flatten = require('./flattenStyle');
+
 /**
  * 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
@@ -347,7 +346,12 @@ module.exports = {
       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`);
     }
 

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -0,0 +1,332 @@
+/**
+ * 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 {ImageResizeMode} from '../Image/ImageResizeMode';
+import {ColorValue} from './StyleSheet';
+
+type FlexAlignType =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'stretch'
+  | 'baseline';
+
+/**
+ * Flex Prop Types
+ * @see https://reactnative.dev/docs/flexbox
+ * @see https://reactnative.dev/docs/layout-props
+ */
+export interface FlexStyle {
+  alignContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'stretch'
+    | 'space-between'
+    | 'space-around'
+    | undefined;
+  alignItems?: FlexAlignType | undefined;
+  alignSelf?: 'auto' | FlexAlignType | undefined;
+  aspectRatio?: number | string | undefined;
+  borderBottomWidth?: number | undefined;
+  borderEndWidth?: number | string | undefined;
+  borderLeftWidth?: number | undefined;
+  borderRightWidth?: number | undefined;
+  borderStartWidth?: number | string | undefined;
+  borderTopWidth?: number | undefined;
+  borderWidth?: number | undefined;
+  bottom?: number | string | undefined;
+  display?: 'none' | 'flex' | undefined;
+  end?: number | string | undefined;
+  flex?: number | undefined;
+  flexBasis?: number | string | undefined;
+  flexDirection?:
+    | 'row'
+    | 'column'
+    | 'row-reverse'
+    | 'column-reverse'
+    | undefined;
+  rowGap?: number | undefined;
+  gap?: number | undefined;
+  columnGap?: number | undefined;
+  flexGrow?: number | undefined;
+  flexShrink?: number | undefined;
+  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;
+  height?: number | string | undefined;
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly'
+    | undefined;
+  left?: number | string | undefined;
+  margin?: number | string | undefined;
+  marginBottom?: number | string | undefined;
+  marginEnd?: number | string | undefined;
+  marginHorizontal?: number | string | undefined;
+  marginLeft?: number | string | undefined;
+  marginRight?: number | string | undefined;
+  marginStart?: number | string | undefined;
+  marginTop?: number | string | undefined;
+  marginVertical?: number | string | undefined;
+  maxHeight?: number | string | undefined;
+  maxWidth?: number | string | undefined;
+  minHeight?: number | string | undefined;
+  minWidth?: number | string | undefined;
+  overflow?: 'visible' | 'hidden' | 'scroll' | undefined;
+  padding?: number | string | undefined;
+  paddingBottom?: number | string | undefined;
+  paddingEnd?: number | string | undefined;
+  paddingHorizontal?: number | string | undefined;
+  paddingLeft?: number | string | undefined;
+  paddingRight?: number | string | undefined;
+  paddingStart?: number | string | undefined;
+  paddingTop?: number | string | undefined;
+  paddingVertical?: number | string | undefined;
+  position?: 'absolute' | 'relative' | undefined;
+  right?: number | string | undefined;
+  start?: number | string | undefined;
+  top?: number | string | undefined;
+  width?: number | string | undefined;
+  zIndex?: number | undefined;
+
+  /**
+   * @platform ios
+   */
+  direction?: 'inherit' | 'ltr' | 'rtl' | undefined;
+}
+
+export interface ShadowStyleIOS {
+  shadowColor?: ColorValue | undefined;
+  shadowOffset?: {width: number; height: number} | undefined;
+  shadowOpacity?: number | undefined;
+  shadowRadius?: number | undefined;
+}
+
+interface PerpectiveTransform {
+  perspective: number;
+}
+
+interface RotateTransform {
+  rotate: string;
+}
+
+interface RotateXTransform {
+  rotateX: string;
+}
+
+interface RotateYTransform {
+  rotateY: string;
+}
+
+interface RotateZTransform {
+  rotateZ: string;
+}
+
+interface ScaleTransform {
+  scale: number;
+}
+
+interface ScaleXTransform {
+  scaleX: number;
+}
+
+interface ScaleYTransform {
+  scaleY: number;
+}
+
+interface TranslateXTransform {
+  translateX: number;
+}
+
+interface TranslateYTransform {
+  translateY: number;
+}
+
+interface SkewXTransform {
+  skewX: string;
+}
+
+interface SkewYTransform {
+  skewY: string;
+}
+
+interface MatrixTransform {
+  matrix: number[];
+}
+
+export interface TransformsStyle {
+  transform?:
+    | (
+        | PerpectiveTransform
+        | RotateTransform
+        | RotateXTransform
+        | RotateYTransform
+        | RotateZTransform
+        | ScaleTransform
+        | ScaleXTransform
+        | ScaleYTransform
+        | TranslateXTransform
+        | TranslateYTransform
+        | SkewXTransform
+        | SkewYTransform
+        | MatrixTransform
+      )[]
+    | undefined;
+  /**
+   * @deprecated Use matrix in transform prop instead.
+   */
+  transformMatrix?: Array<number> | undefined;
+  /**
+   * @deprecated Use rotate in transform prop instead.
+   */
+  rotation?: number | undefined;
+  /**
+   * @deprecated Use scaleX in transform prop instead.
+   */
+  scaleX?: number | undefined;
+  /**
+   * @deprecated Use scaleY in transform prop instead.
+   */
+  scaleY?: number | undefined;
+  /**
+   * @deprecated Use translateX in transform prop instead.
+   */
+  translateX?: number | undefined;
+  /**
+   * @deprecated Use translateY in transform prop instead.
+   */
+  translateY?: number | undefined;
+}
+
+/**
+ * @see https://reactnative.dev/docs/view#style
+ */
+export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
+  backfaceVisibility?: 'visible' | 'hidden' | undefined;
+  backgroundColor?: ColorValue | undefined;
+  borderBottomColor?: ColorValue | undefined;
+  borderBottomEndRadius?: number | undefined;
+  borderBottomLeftRadius?: number | undefined;
+  borderBottomRightRadius?: number | undefined;
+  borderBottomStartRadius?: number | undefined;
+  borderBottomWidth?: number | undefined;
+  borderColor?: ColorValue | undefined;
+  borderEndColor?: ColorValue | undefined;
+  borderLeftColor?: ColorValue | undefined;
+  borderLeftWidth?: number | undefined;
+  borderRadius?: number | undefined;
+  borderRightColor?: ColorValue | undefined;
+  borderRightWidth?: number | undefined;
+  borderStartColor?: ColorValue | undefined;
+  borderStyle?: 'solid' | 'dotted' | 'dashed' | undefined;
+  borderTopColor?: ColorValue | undefined;
+  borderTopEndRadius?: number | undefined;
+  borderTopLeftRadius?: number | undefined;
+  borderTopRightRadius?: number | undefined;
+  borderTopStartRadius?: number | undefined;
+  borderTopWidth?: number | undefined;
+  borderWidth?: number | undefined;
+  opacity?: number | undefined;
+  testID?: string | undefined;
+  /**
+   * Sets the elevation of a view, using Android's underlying
+   * [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation).
+   * This adds a drop shadow to the item and affects z-order for overlapping views.
+   * Only supported on Android 5.0+, has no effect on earlier versions.
+   *
+   * @platform android
+   */
+  elevation?: number | undefined;
+}
+
+export type FontVariant =
+  | 'small-caps'
+  | 'oldstyle-nums'
+  | 'lining-nums'
+  | 'tabular-nums'
+  | 'proportional-nums';
+export interface TextStyleIOS extends ViewStyle {
+  fontVariant?: FontVariant[] | undefined;
+  letterSpacing?: number | undefined;
+  textDecorationColor?: ColorValue | undefined;
+  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined;
+  writingDirection?: 'auto' | 'ltr' | 'rtl' | undefined;
+}
+
+export interface TextStyleAndroid extends ViewStyle {
+  textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center' | undefined;
+  verticalAlign?: 'auto' | 'top' | 'bottom' | 'middle' | undefined;
+  includeFontPadding?: boolean | undefined;
+}
+
+// @see https://reactnative.dev/docs/text#style
+export interface TextStyle extends TextStyleIOS, TextStyleAndroid, ViewStyle {
+  color?: ColorValue | undefined;
+  fontFamily?: string | undefined;
+  fontSize?: number | undefined;
+  fontStyle?: 'normal' | 'italic' | undefined;
+  /**
+   * Specifies font weight. The values 'normal' and 'bold' are supported
+   * for most fonts. Not all fonts have a variant for each of the numeric
+   * values, in that case the closest one is chosen.
+   */
+  fontWeight?:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | undefined;
+  letterSpacing?: number | undefined;
+  lineHeight?: number | undefined;
+  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;
+  textDecorationLine?:
+    | 'none'
+    | 'underline'
+    | 'line-through'
+    | 'underline line-through'
+    | undefined;
+  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined;
+  textDecorationColor?: ColorValue | undefined;
+  textShadowColor?: ColorValue | undefined;
+  textShadowOffset?: {width: number; height: number} | undefined;
+  textShadowRadius?: number | undefined;
+  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;
+  testID?: string | undefined;
+}
+
+/**
+ * Image style
+ * @see https://reactnative.dev/docs/image#style
+ */
+export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
+  resizeMode?: ImageResizeMode | undefined;
+  backfaceVisibility?: 'visible' | 'hidden' | undefined;
+  borderBottomLeftRadius?: number | undefined;
+  borderBottomRightRadius?: number | undefined;
+  backgroundColor?: ColorValue | undefined;
+  borderColor?: ColorValue | undefined;
+  borderWidth?: number | undefined;
+  borderRadius?: number | undefined;
+  borderTopLeftRadius?: number | undefined;
+  borderTopRightRadius?: number | undefined;
+  overflow?: 'visible' | 'hidden' | undefined;
+  overlayColor?: ColorValue | undefined;
+  tintColor?: ColorValue | undefined;
+  opacity?: number | undefined;
+}