@office-iss/react-native-win32 0.0.0-canary.287 → 0.0.0-canary.289

package/Libraries/StyleSheet/StyleSheet.js.flow

@@ -0,0 +1,166 @@
+/**
+ * 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
+ */
+
+export * as default from './StyleSheetExports';
+
+import type {
+  ____ColorValue_Internal,
+  ____DangerouslyImpreciseStyle_Internal,
+  ____DangerouslyImpreciseStyleProp_Internal,
+  ____ImageStyle_Internal,
+  ____ImageStyleProp_Internal,
+  ____TextStyle_Internal,
+  ____TextStyleProp_Internal,
+  ____ViewStyle_Internal,
+  ____ViewStyleProp_Internal,
+} from './StyleSheetTypes';
+
+export type {StyleProp} from './StyleSheetTypes';
+
+export type StyleSheetProperties = {
+  hairlineWidth: number,
+  flatten<T: string>(style: T): T,
+};
+
+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;

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,110 @@
+/**
+ * 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) => $ReadOnly<S>;

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -760,10 +760,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,
@@ -813,6 +810,13 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   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,
@@ -903,8 +907,7 @@ export type ____FontVariantArray_Internal = $ReadOnlyArray<
   | 'stylistic-twenty',
 >;
 
-export type ____TextStyle_InternalCore = $ReadOnly<{
-  ...$Exact<____ViewStyle_Internal>,
+type ____TextStyle_InternalBase = $ReadOnly<{
   color?: ____ColorValue_Internal,
   fontFamily?: string,
   fontSize?: number,
@@ -935,6 +938,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,
@@ -967,24 +975,24 @@ 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 ____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 +1003,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/Text/Text.d.ts

@@ -263,7 +263,7 @@ export interface TextProps
 
   /**
    * This function is called on long press.
-   * e.g., `onLongPress={this.increaseSize}>``
+   * e.g., `onLongPress={this.increaseSize}>`
    */
   onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
 

package/Libraries/Text/Text.js

@@ -24,6 +24,8 @@ import {NativeText, NativeVirtualText} from './TextNativeComponent';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
+export type {TextProps} from './TextProps';
+
 type TextForwardRef = React.ElementRef<
   typeof NativeText | typeof NativeVirtualText,
 >;
@@ -34,7 +36,7 @@ type TextForwardRef = React.ElementRef<
  * @see https://reactnative.dev/docs/text
  */
 const Text: component(
-  ref: React.RefSetter<TextForwardRef>,
+  ref?: React.RefSetter<TextForwardRef>,
   ...props: TextProps
 ) = React.forwardRef(
   (

package/Libraries/Text/Text.win32.js

@@ -24,6 +24,8 @@ import {NativeText, NativeVirtualText} from './TextNativeComponent';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
+export type {TextProps} from './TextProps';
+
 type TextForwardRef = React.ElementRef<
   typeof NativeText | typeof NativeVirtualText,
 >;
@@ -34,7 +36,7 @@ type TextForwardRef = React.ElementRef<
  * @see https://reactnative.dev/docs/text
  */
 const Text: component(
-  ref: React.RefSetter<TextForwardRef>,
+  ref?: React.RefSetter<TextForwardRef>,
   ...props: TextProps
 ) = React.forwardRef(
   (

package/Libraries/Text/TextNativeComponent.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../src/private/types/HostComponent';
 import type {ProcessedColorValue} from '../StyleSheet/processColor';
 import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 import type {TextProps} from './TextProps';

package/Libraries/Text/TextNativeComponent.win32.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../src/private/types/HostComponent';
 import type {ProcessedColorValue} from '../StyleSheet/processColor';
 import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 import type {TextProps} from './TextProps';