@office-iss/react-native-win32 0.79.0-preview.2 → 0.80.0-preview.1

package/Libraries/StyleSheet/{StyleSheet.win32.js → StyleSheetExports.js}

@@ -10,18 +10,7 @@
 
 'use strict';
 
-import type {
-  ____ColorValue_Internal,
-  ____DangerouslyImpreciseStyle_Internal,
-  ____DangerouslyImpreciseStyleProp_Internal,
-  ____ImageStyle_Internal,
-  ____ImageStyleProp_Internal,
-  ____Styles_Internal,
-  ____TextStyle_Internal,
-  ____TextStyleProp_Internal,
-  ____ViewStyle_Internal,
-  ____ViewStyleProp_Internal,
-} from './StyleSheetTypes';
+import type {____Styles_Internal} from './StyleSheetTypes';
 
 import composeStyles from '../../src/private/styles/composeStyles';
 import flatten from './flattenStyle';
@@ -29,146 +18,8 @@ import flatten from './flattenStyle';
 const ReactNativeStyleAttributes =
   require('../Components/View/ReactNativeStyleAttributes').default;
 const PixelRatio = require('../Utilities/PixelRatio').default;
-const Platform = require('../Utilities/Platform').default; // [Win32]
 
-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
- * can't pass styles that View doesn't support such as `fontSize`.`
- *
- * type Props = {style: ViewStyleProp}
- * const MyComponent = (props: Props) => <View style={props.style} />
- */
-export type ViewStyleProp = ____ViewStyleProp_Internal;
-
-/**
- * This type should be used as the type for a prop that is passed through
- * to a <Text>'s `style` prop. This ensures call sites of the component
- * can't pass styles that Text doesn't support such as `resizeMode`.`
- *
- * type Props = {style: TextStyleProp}
- * const MyComponent = (props: Props) => <Text style={props.style} />
- */
-export type TextStyleProp = ____TextStyleProp_Internal;
-
-/**
- * This type should be used as the type for a prop that is passed through
- * to an <Image>'s `style` prop. This ensures call sites of the component
- * can't pass styles that Image doesn't support such as `fontSize`.`
- *
- * type Props = {style: ImageStyleProp}
- * const MyComponent = (props: Props) => <Image style={props.style} />
- */
-export type ImageStyleProp = ____ImageStyleProp_Internal;
-
-/**
- * WARNING: You probably shouldn't be using this type. This type
- * is similar to the ones above except it allows styles that are accepted
- * by all of View, Text, or Image. It is therefore very unsafe to pass this
- * 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;
-
-/**
- * Utility type for getting the values for specific style keys.
- *
- * The following is bad because position is more restrictive than 'string':
- * ```
- * type Props = {position: string};
- * ```
- *
- * You should use the following instead:
- *
- * ```
- * type Props = {position: TypeForStyleKey<'position'>};
- * ```
- *
- * This will correctly give you the type 'absolute' | 'relative'
- */
-export type TypeForStyleKey<
-  +key: $Keys<____DangerouslyImpreciseStyle_Internal>,
-> = $ElementType<____DangerouslyImpreciseStyle_Internal, key>;
-
-/**
- * This type is an object of the different possible style
- * properties that can be specified for View.
- *
- * Note that this isn't a safe way to type a style prop for a component as
- * results from StyleSheet.create return an internal identifier, not
- * an object of styles.
- *
- * If you want to type the style prop of a function,
- * consider using ViewStyleProp.
- *
- * A reasonable usage of this type is for helper functions that return an
- * object of styles to pass to a View that can't be precomputed with
- * StyleSheet.create.
- */
-export type ViewStyle = ____ViewStyle_Internal;
-
-/**
- * This type is an object of the different possible style
- * properties that can be specified for Text.
- *
- * Note that this isn't a safe way to type a style prop for a component as
- * results from StyleSheet.create return an internal identifier, not
- * an object of styles.
- *
- * If you want to type the style prop of a function,
- * consider using TextStyleProp.
- *
- * A reasonable usage of this type is for helper functions that return an
- * object of styles to pass to a Text that can't be precomputed with
- * StyleSheet.create.
- */
-export type TextStyle = ____TextStyle_Internal;
-
-/**
- * This type is an object of the different possible style
- * properties that can be specified for Image.
- *
- * Note that this isn't a safe way to type a style prop for a component as
- * results from StyleSheet.create return an internal identifier, not
- * an object of styles.
- *
- * If you want to type the style prop of a function,
- * consider using ImageStyleProp.
- *
- * A reasonable usage of this type is for helper functions that return an
- * object of styles to pass to an Image that can't be precomputed with
- * StyleSheet.create.
- */
-export type ImageStyle = ____ImageStyle_Internal;
-
-/**
- * WARNING: You probably shouldn't be using this type. This type is an object
- * with all possible style keys and their values. Note that this isn't
- * a safe way to type a style prop for a component as results from
- * StyleSheet.create return an internal identifier, not an object of styles.
- *
- * If you want to type the style prop of a function, consider using
- * ViewStyleProp, TextStyleProp, or ImageStyleProp.
- *
- * This should only be used by very core utilities that operate on an object
- * containing any possible style value.
- */
-export type DangerouslyImpreciseStyle = ____DangerouslyImpreciseStyle_Internal;
-
-let hairlineWidth: number =
-  Platform.OS === 'win32' ? 0.5 : PixelRatio.roundToNearestPixel(0.4); // TODO(windows ISS) - Avoid calls to PixelRatio - needs multi window support
+let hairlineWidth: number = PixelRatio.roundToNearestPixel(0.4);
 if (hairlineWidth === 0) {
   hairlineWidth = 1 / PixelRatio.get();
 }

package/Libraries/StyleSheet/StyleSheetExports.js.flow

@@ -0,0 +1,112 @@
+/**
+ * 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
+ * @format
+ */
+
+import type {____Styles_Internal} from './StyleSheetTypes';
+
+import composeStyles from '../../src/private/styles/composeStyles';
+import flattenStyle from './flattenStyle';
+
+/**
+ * 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.
+ */
+declare export const hairlineWidth: number;
+
+/**
+ * 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.
+ */
+declare export const absoluteFill: any;
+
+/**
+ * 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',
+ *     },
+ *   });
+ */
+declare export const absoluteFillObject: {
+  +bottom: 0,
+  +left: 0,
+  +position: 'absolute',
+  +right: 0,
+  +top: 0,
+};
+
+/**
+ * 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.
+ */
+declare export const compose: typeof composeStyles;
+
+/**
+ * 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' }
+ * ```
+ */
+declare export const flatten: typeof flattenStyle;
+
+/**
+ * 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.
+ */
+declare export const setStyleAttributePreprocessor: (
+  property: string,
+  process: (nextProp: any) => any,
+) => void;
+
+/**
+ * An identity function for creating style sheets.
+ */
+// $FlowFixMe[unsupported-variance-annotation]
+declare export const create: <+S: ____Styles_Internal>(
+  obj: S & ____Styles_Internal,
+) => $ReadOnly<S>;

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -368,7 +368,7 @@ export type BlendMode =
   | 'luminosity';
 
 export type GradientValue = {
-  type: 'linearGradient';
+  type: 'linear-gradient';
   // Angle or direction enums
   direction?: string | undefined;
   colorStops: ReadonlyArray<{

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+import type {WithAnimatedValue} from '../Animated/createAnimatedComponent';
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
 import type {ImageResizeMode} from './../Image/ImageResizeMode';
 import type {
@@ -20,6 +21,9 @@ import type {
   ____ViewStyle_InternalOverrides,
 } from './private/_StyleSheetTypesOverrides';
 import type {____TransformStyle_Internal} from './private/_TransformStyle';
+import type {ColorValue} from './StyleSheet';
+
+export type {____TransformStyle_Internal};
 
 declare export opaque type NativeColorValue;
 export type ____ColorValue_Internal = null | string | number | NativeColorValue;
@@ -35,8 +39,7 @@ export type EdgeInsetsValue = {
   bottom: number,
 };
 
-export type DimensionValue = number | string | 'auto' | AnimatedNode | null;
-export type AnimatableNumericValue = number | AnimatedNode;
+export type DimensionValue = number | string | 'auto' | null;
 
 export type CursorValue = 'auto' | 'pointer';
 
@@ -691,7 +694,7 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{
    * Sets the drop shadow opacity (multiplied by the color's alpha component)
    * @platform ios
    */
-  shadowOpacity?: AnimatableNumericValue,
+  shadowOpacity?: number,
   /**
    * Sets the drop shadow blur radius
    * @platform ios
@@ -723,8 +726,8 @@ export type DropShadowValue = {
   color?: ____ColorValue_Internal,
 };
 
-export type GradientValue = {
-  type: 'linearGradient',
+type LinearGradientValue = {
+  type: 'linear-gradient',
   // Angle or direction enums
   direction?: string,
   colorStops: $ReadOnlyArray<{
@@ -733,6 +736,50 @@ export type GradientValue = {
   }>,
 };
 
+type RadialExtent =
+  | 'closest-corner'
+  | 'closest-side'
+  | 'farthest-corner'
+  | 'farthest-side';
+export type RadialGradientPosition =
+  | {
+      top: number | string,
+      left: number | string,
+    }
+  | {
+      top: number | string,
+      right: number | string,
+    }
+  | {
+      bottom: number | string,
+      left: number | string,
+    }
+  | {
+      bottom: number | string,
+      right: number | string,
+    };
+
+export type RadialGradientShape = 'circle' | 'ellipse';
+export type RadialGradientSize =
+  | RadialExtent
+  | {
+      x: string | number,
+      y: string | number,
+    };
+
+type RadialGradientValue = {
+  type: 'radial-gradient',
+  shape: RadialGradientShape,
+  size: RadialGradientSize,
+  position: RadialGradientPosition,
+  colorStops: $ReadOnlyArray<{
+    color: ____ColorValue_Internal,
+    positions?: $ReadOnlyArray<string>,
+  }>,
+};
+
+export type BackgroundImageValue = LinearGradientValue | RadialGradientValue;
+
 export type BoxShadowValue = {
   offsetX: number | string,
   offsetY: number | string,
@@ -760,10 +807,7 @@ type ____BlendMode_Internal =
   | 'color'
   | 'luminosity';
 
-export type ____ViewStyle_InternalCore = $ReadOnly<{
-  ...$Exact<____LayoutStyle_Internal>,
-  ...$Exact<____ShadowStyle_Internal>,
-  ...$Exact<____TransformStyle_Internal>,
+export type ____ViewStyle_InternalBase = $ReadOnly<{
   backfaceVisibility?: 'visible' | 'hidden',
   backgroundColor?: ____ColorValue_Internal,
   borderColor?: ____ColorValue_Internal,
@@ -777,42 +821,49 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   borderBlockColor?: ____ColorValue_Internal,
   borderBlockEndColor?: ____ColorValue_Internal,
   borderBlockStartColor?: ____ColorValue_Internal,
-  borderRadius?: AnimatableNumericValue | string,
-  borderBottomEndRadius?: AnimatableNumericValue | string,
-  borderBottomLeftRadius?: AnimatableNumericValue | string,
-  borderBottomRightRadius?: AnimatableNumericValue | string,
-  borderBottomStartRadius?: AnimatableNumericValue | string,
-  borderEndEndRadius?: AnimatableNumericValue | string,
-  borderEndStartRadius?: AnimatableNumericValue | string,
-  borderStartEndRadius?: AnimatableNumericValue | string,
-  borderStartStartRadius?: AnimatableNumericValue | string,
-  borderTopEndRadius?: AnimatableNumericValue | string,
-  borderTopLeftRadius?: AnimatableNumericValue | string,
-  borderTopRightRadius?: AnimatableNumericValue | string,
-  borderTopStartRadius?: AnimatableNumericValue | string,
+  borderRadius?: number | string,
+  borderBottomEndRadius?: number | string,
+  borderBottomLeftRadius?: number | string,
+  borderBottomRightRadius?: number | string,
+  borderBottomStartRadius?: number | string,
+  borderEndEndRadius?: number | string,
+  borderEndStartRadius?: number | string,
+  borderStartEndRadius?: number | string,
+  borderStartStartRadius?: number | string,
+  borderTopEndRadius?: number | string,
+  borderTopLeftRadius?: number | string,
+  borderTopRightRadius?: number | string,
+  borderTopStartRadius?: number | string,
   borderStyle?: 'solid' | 'dotted' | 'dashed',
-  borderWidth?: AnimatableNumericValue,
-  borderBottomWidth?: AnimatableNumericValue,
-  borderEndWidth?: AnimatableNumericValue,
-  borderLeftWidth?: AnimatableNumericValue,
-  borderRightWidth?: AnimatableNumericValue,
-  borderStartWidth?: AnimatableNumericValue,
-  borderTopWidth?: AnimatableNumericValue,
-  opacity?: AnimatableNumericValue,
+  borderWidth?: number,
+  borderBottomWidth?: number,
+  borderEndWidth?: number,
+  borderLeftWidth?: number,
+  borderRightWidth?: number,
+  borderStartWidth?: number,
+  borderTopWidth?: number,
+  opacity?: number,
   outlineColor?: ____ColorValue_Internal,
-  outlineOffset?: AnimatableNumericValue,
+  outlineOffset?: number,
   outlineStyle?: 'solid' | 'dotted' | 'dashed',
-  outlineWidth?: AnimatableNumericValue,
+  outlineWidth?: number,
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
   boxShadow?: $ReadOnlyArray<BoxShadowValue> | string,
   filter?: $ReadOnlyArray<FilterFunction> | string,
   mixBlendMode?: ____BlendMode_Internal,
-  experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
+  experimental_backgroundImage?: $ReadOnlyArray<BackgroundImageValue> | string,
   isolation?: 'auto' | 'isolate',
 }>;
 
+export type ____ViewStyle_InternalCore = $ReadOnly<{
+  ...$Exact<____LayoutStyle_Internal>,
+  ...$Exact<____ShadowStyle_Internal>,
+  ...$Exact<____TransformStyle_Internal>,
+  ...____ViewStyle_InternalBase,
+}>;
+
 export type ____ViewStyle_Internal = $ReadOnly<{
   ...____ViewStyle_InternalCore,
   ...____ViewStyle_InternalOverrides,
@@ -867,7 +918,7 @@ export type ____FontWeight_Internal =
   | 'heavy'
   | 'black';
 
-export type ____FontVariantArray_Internal = $ReadOnlyArray<
+export type ____FontVariant_Internal =
   | 'small-caps'
   | 'oldstyle-nums'
   | 'lining-nums'
@@ -900,11 +951,12 @@ export type ____FontVariantArray_Internal = $ReadOnlyArray<
   | 'stylistic-seventeen'
   | 'stylistic-eighteen'
   | 'stylistic-nineteen'
-  | 'stylistic-twenty',
->;
+  | 'stylistic-twenty';
 
-export type ____TextStyle_InternalCore = $ReadOnly<{
-  ...$Exact<____ViewStyle_Internal>,
+export type ____FontVariantArray_Internal =
+  $ReadOnlyArray<____FontVariant_Internal>;
+
+type ____TextStyle_InternalBase = $ReadOnly<{
   color?: ____ColorValue_Internal,
   fontFamily?: string,
   fontSize?: number,
@@ -935,6 +987,11 @@ export type ____TextStyle_InternalCore = $ReadOnly<{
   writingDirection?: 'auto' | 'ltr' | 'rtl',
 }>;
 
+export type ____TextStyle_InternalCore = $ReadOnly<{
+  ...$Exact<____ViewStyle_Internal>,
+  ...____TextStyle_InternalBase,
+}>;
+
 export type ____TextStyle_Internal = $ReadOnly<{
   ...____TextStyle_InternalCore,
   ...____TextStyle_InternalOverrides,
@@ -945,7 +1002,8 @@ export type ____ImageStyle_InternalCore = $ReadOnly<{
   resizeMode?: ImageResizeMode,
   objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
-  overlayColor?: string,
+  overlayColor?: ColorValue,
+  overflow?: 'visible' | 'hidden',
 }>;
 
 export type ____ImageStyle_Internal = $ReadOnly<{
@@ -958,7 +1016,7 @@ export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   resizeMode?: ImageResizeMode,
   objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
-  overlayColor?: string,
+  overlayColor?: ColorValue,
 }>;
 
 export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{
@@ -967,24 +1025,28 @@ export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{
   ...
 }>;
 
-type GenericStyleProp<+T> =
+export type StyleProp<+T> =
   | null
   | void
   | T
   | false
   | ''
-  | $ReadOnlyArray<GenericStyleProp<T>>;
+  | $ReadOnlyArray<StyleProp<T>>;
 
-export type ____DangerouslyImpreciseStyleProp_Internal = GenericStyleProp<
+export type ____DangerouslyImpreciseStyleProp_Internal = StyleProp<
   Partial<____DangerouslyImpreciseStyle_Internal>,
 >;
-export type ____ViewStyleProp_Internal = GenericStyleProp<
+
+export type ____DangerouslyImpreciseAnimatedStyleProp_Internal =
+  WithAnimatedValue<StyleProp<Partial<____DangerouslyImpreciseStyle_Internal>>>;
+
+export type ____ViewStyleProp_Internal = StyleProp<
   $ReadOnly<Partial<____ViewStyle_Internal>>,
 >;
-export type ____TextStyleProp_Internal = GenericStyleProp<
+export type ____TextStyleProp_Internal = StyleProp<
   $ReadOnly<Partial<____TextStyle_Internal>>,
 >;
-export type ____ImageStyleProp_Internal = GenericStyleProp<
+export type ____ImageStyleProp_Internal = StyleProp<
   $ReadOnly<Partial<____ImageStyle_Internal>>,
 >;
 
@@ -995,10 +1057,26 @@ export type ____Styles_Internal = {
   ...
 };
 
-export type ____FlattenStyleProp_Internal<
-  +TStyleProp: GenericStyleProp<mixed>,
-> = TStyleProp extends null | void | false | ''
+// A depth limiter, to avoid TS2589 in TypeScript. This and
+// ____FlattenStyleProp_Helper should be considered internal.
+type FlattenDepthLimiter = [void, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+type ____FlattenStyleProp_Helper<
+  +TStyleProp: StyleProp<mixed>,
+  Depth: $Values<FlattenDepthLimiter> = 9,
+> = Depth extends 0
   ? empty
-  : TStyleProp extends $ReadOnlyArray<infer V>
-    ? ____FlattenStyleProp_Internal<V>
-    : TStyleProp;
+  : TStyleProp extends null | void | false | ''
+    ? empty
+    : // When TStyleProp is an array, recurse with decremented Depth
+      TStyleProp extends $ReadOnlyArray<infer V>
+      ? ____FlattenStyleProp_Helper<
+          V,
+          Depth extends number ? FlattenDepthLimiter[Depth] : 0,
+        >
+      : TStyleProp;
+
+export type ____FlattenStyleProp_Internal<+TStyleProp: StyleProp<mixed>> =
+  ____FlattenStyleProp_Helper<TStyleProp> extends empty
+    ? // $FlowFixMe[unclear-type]
+      any
+    : ____FlattenStyleProp_Helper<TStyleProp>;

package/Libraries/StyleSheet/flattenStyle.js

@@ -10,13 +10,22 @@
 
 'use strict';
 
-import type {DangerouslyImpreciseStyleProp} from './StyleSheet';
-import type {____FlattenStyleProp_Internal} from './StyleSheetTypes';
+import type AnimatedNode from '../Animated/nodes/AnimatedNode';
+import type {
+  ____DangerouslyImpreciseAnimatedStyleProp_Internal,
+  ____FlattenStyleProp_Internal,
+} from './StyleSheetTypes';
 
-function flattenStyle<TStyleProp: DangerouslyImpreciseStyleProp>(
+type NonAnimatedNodeObject<TStyleProp> = TStyleProp extends AnimatedNode
+  ? empty
+  : TStyleProp;
+
+function flattenStyle<
+  TStyleProp: ____DangerouslyImpreciseAnimatedStyleProp_Internal,
+>(
   style: ?TStyleProp,
   // $FlowFixMe[underconstrained-implicit-instantiation]
-): ?____FlattenStyleProp_Internal<TStyleProp> {
+): ?NonAnimatedNodeObject<____FlattenStyleProp_Internal<TStyleProp>> {
   if (style === null || typeof style !== 'object') {
     return undefined;
   }
@@ -35,6 +44,7 @@ function flattenStyle<TStyleProp: DangerouslyImpreciseStyleProp>(
       for (const key in computedStyle) {
         // $FlowFixMe[incompatible-use]
         // $FlowFixMe[invalid-computed-prop]
+        // $FlowFixMe[prop-missing]
         result[key] = computedStyle[key];
       }
     }