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

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent.js

@@ -10,11 +10,13 @@
 
 import type {
   HostInstance,
-  INativeMethods,
-  InternalInstanceHandle,
+  LegacyHostInstanceMethods,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
+} from '../../../src/private/types/HostInstance';
+import type {
+  InternalInstanceHandle,
   ViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';
 
@@ -38,7 +40,9 @@ const noop = () => {};
 /**
  * This is used for refs on host components.
  */
-export default class ReactFabricHostComponent implements INativeMethods {
+export default class ReactFabricHostComponent
+  implements LegacyHostInstanceMethods
+{
   // These need to be accessible from `ReactFabricPublicInstanceUtils`.
   __nativeTag: number;
   __internalInstanceHandle: InternalInstanceHandle;
@@ -56,12 +60,10 @@ export default class ReactFabricHostComponent implements INativeMethods {
   }
 
   blur() {
-    // $FlowFixMe[incompatible-exact] Migrate all usages of `NativeMethods` to an interface to fix this.
     TextInputState.blurTextInput(this);
   }
 
   focus() {
-    // $FlowFixMe[incompatible-exact] Migrate all usages of `NativeMethods` to an interface to fix this.
     TextInputState.focusTextInput(this);
   }
 

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js

@@ -71,10 +71,7 @@ function getReadOnlyTextClass(): Class<ReadOnlyTextT> {
 }
 
 export function createPublicRootInstance(rootTag: RootTag): PublicRootInstance {
-  if (
-    ReactNativeFeatureFlags.enableAccessToHostTreeInFabric() &&
-    ReactNativeFeatureFlags.enableDOMDocumentAPI()
-  ) {
+  if (ReactNativeFeatureFlags.enableAccessToHostTreeInFabric()) {
     const ReactNativeDocumentModule = getReactNativeDocumentModule();
 
     // $FlowExpectedError[incompatible-return]

package/Libraries/ReactNative/RendererImplementation.js

@@ -8,13 +8,11 @@
  * @flow strict-local
  */
 
+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {
-  HostComponent,
-  HostInstance,
   InternalInstanceHandle,
   Node,
 } from '../Renderer/shims/ReactNativeTypes';
-import type ReactFabricHostComponent from './ReactFabricPublicInstance/ReactFabricHostComponent';
 import type {ElementRef, ElementType} from 'react';
 
 import {
@@ -136,8 +134,8 @@ export function isProfilingRenderer(): boolean {
 }
 
 export function isChildPublicInstance(
-  parentInstance: ReactFabricHostComponent | HostComponent<empty>,
-  childInstance: ReactFabricHostComponent | HostComponent<empty>,
+  parentInstance: HostInstance,
+  childInstance: HostInstance,
 ): boolean {
   return require('../Renderer/shims/ReactNative').default.isChildPublicInstance(
     parentInstance,

package/Libraries/ReactNative/requireNativeComponent.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../src/private/types/HostComponent';
 
 const createReactNativeComponentClass =
   require('../Renderer/shims/createReactNativeComponentClass').default;

package/Libraries/ReactPrivate/ReactNativePrivateInterface.js

@@ -36,7 +36,19 @@ import typeof deepFreezeAndThrowOnMutationInDev from '../Utilities/deepFreezeAnd
 import typeof deepDiffer from '../Utilities/differ/deepDiffer';
 import typeof Platform from '../Utilities/Platform';
 
+// Expose these types to the React renderer
+export type {
+  HostInstance as PublicInstance,
+
+  // These types are only necessary for Paper
+  LegacyHostInstanceMethods as LegacyPublicInstance,
+  MeasureOnSuccessCallback,
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+} from '../../src/private/types/HostInstance';
+
 export type {PublicRootInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance';
+export type PublicTextInstance = ReturnType<createPublicTextInstance>;
 
 // flowlint unsafe-getters-setters:off
 module.exports = {

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,35 +7,25 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<c1ce40ef01008fe3cd38df1d9ff46f56>>
+ * @generated SignedSource<<5c76b092e0c981f96ca894e381ee593b>>
  */
 
-import type {ElementRef, ElementType, MixedElement} from 'react';
-// $FlowFixMe[nonstrict-import] TODO(@rubennorte)
-import {type PublicRootInstance} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
-
-export type MeasureOnSuccessCallback = (
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  pageX: number,
-  pageY: number,
-) => void;
-
-export type MeasureInWindowOnSuccessCallback = (
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-) => void;
-
-export type MeasureLayoutOnSuccessCallback = (
-  left: number,
-  top: number,
-  width: number,
-  height: number,
-) => void;
+import type {
+  Component as ReactComponent,
+  ElementRef,
+  ElementType,
+  MixedElement,
+} from 'react';
+import type {
+  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
+  MeasureOnSuccessCallback,
+  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
+  PublicInstance,
+  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
+  PublicRootInstance,
+  // $FlowFixMe[nonstrict-import] TODO(@rubennorte)
+  PublicTextInstance,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 export type AttributeType<T, V> =
   | true
@@ -101,45 +91,6 @@ export type PartialViewConfig = $ReadOnly<{
   validAttributes?: PartialAttributeConfiguration,
 }>;
 
-/**
- * Current usages should migrate to this definition
- */
-export interface INativeMethods {
-  blur(): void;
-  focus(): void;
-  measure(callback: MeasureOnSuccessCallback): void;
-  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
-  measureLayout(
-    relativeToNativeNode: number | HostInstance,
-    onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail?: () => void,
-  ): void;
-  setNativeProps(nativeProps: {...}): void;
-}
-
-export type NativeMethods = $ReadOnly<{
-  blur(): void,
-  focus(): void,
-  measure(callback: MeasureOnSuccessCallback): void,
-  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
-  measureLayout(
-    relativeToNativeNode: number | HostInstance,
-    onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail?: () => void,
-  ): void,
-  setNativeProps(nativeProps: {...}): void,
-}>;
-
-// This validates that INativeMethods and NativeMethods stay in sync using Flow!
-declare const ensureNativeMethodsAreSynced: NativeMethods;
-(ensureNativeMethodsAreSynced: INativeMethods);
-
-export type HostInstance = NativeMethods;
-export type HostComponent<Config: {...}> = component(
-  ref: React$RefSetter<HostInstance>,
-  ...Config
-);
-
 type InspectorDataProps = $ReadOnly<{
   [propName: string]: string,
   ...
@@ -165,18 +116,19 @@ export type InspectorData = $ReadOnly<{
   componentStack: string,
 }>;
 
-export type TouchedViewDataAtPoint = $ReadOnly<{
-  pointerY: number,
-  touchedViewTag?: number,
-  frame: $ReadOnly<{
-    top: number,
-    left: number,
-    width: number,
-    height: number,
-  }>,
-  closestPublicInstance?: PublicInstance,
-  ...InspectorData,
-}>;
+export type TouchedViewDataAtPoint = $ReadOnly<
+  {
+    pointerY: number,
+    touchedViewTag?: number,
+    frame: $ReadOnly<{
+      top: number,
+      left: number,
+      width: number,
+      height: number,
+    }>,
+    closestPublicInstance?: PublicInstance,
+  } & InspectorData,
+>;
 
 export type RenderRootOptions = {
   onUncaughtError?: (
@@ -188,7 +140,8 @@ export type RenderRootOptions = {
     errorInfo: {
       +componentStack?: ?string,
       // $FlowFixMe[unclear-type] unknown props and state.
-      +errorBoundary?: ?React$Component<any, any>,
+      // $FlowFixMe[value-as-type] Component in react repo is any-typed, but it will be well typed externally.
+      +errorBoundary?: ?ReactComponent<any, any>,
     },
   ) => void,
   onRecoverableError?: (
@@ -204,20 +157,17 @@ export type RenderRootOptions = {
 export type ReactNativeType = {
   findHostInstance_DEPRECATED<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
-  ): ?HostInstance,
+  ): ?PublicInstance,
   findNodeHandle<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?number,
-  isChildPublicInstance(
-    parent: PublicInstance | HostComponent<empty>,
-    child: PublicInstance | HostComponent<empty>,
-  ): boolean,
+  isChildPublicInstance(parent: PublicInstance, child: PublicInstance): boolean,
   dispatchCommand(
-    handle: HostInstance,
+    handle: PublicInstance,
     command: string,
     args: Array<mixed>,
   ): void,
-  sendAccessibilityEvent(handle: HostInstance, eventType: string): void,
+  sendAccessibilityEvent(handle: PublicInstance, eventType: string): void,
   render(
     element: MixedElement,
     containerTag: number,
@@ -232,23 +182,21 @@ export type ReactNativeType = {
 
 export opaque type Node = mixed;
 export opaque type InternalInstanceHandle = mixed;
-type PublicInstance = mixed;
-type PublicTextInstance = mixed;
 
 export type ReactFabricType = {
   findHostInstance_DEPRECATED<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
-  ): ?HostInstance,
+  ): ?PublicInstance,
   findNodeHandle<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?number,
   dispatchCommand(
-    handle: HostInstance,
+    handle: PublicInstance,
     command: string,
     args: Array<mixed>,
   ): void,
   isChildPublicInstance(parent: PublicInstance, child: PublicInstance): boolean,
-  sendAccessibilityEvent(handle: HostInstance, eventType: string): void,
+  sendAccessibilityEvent(handle: PublicInstance, eventType: string): void,
   render(
     element: MixedElement,
     containerTag: number,

package/Libraries/StyleSheet/PlatformColorValueTypes.js.flow

@@ -0,0 +1,22 @@
+/**
+ * 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
+ */
+
+import type {ProcessedColorValue} from './processColor';
+import type {ColorValue, NativeColorValue} from './StyleSheet';
+
+declare export function PlatformColor(...names: Array<string>): ColorValue;
+
+declare export function normalizeColorObject(
+  color: NativeColorValue,
+): ?ProcessedColorValue;
+
+declare export function processColorObject(
+  color: NativeColorValue,
+): ?NativeColorValue;

package/Libraries/StyleSheet/PlatformColorValueTypesIOS.js

@@ -17,6 +17,12 @@ export type DynamicColorIOSTuple = {
   highContrastDark?: ColorValue,
 };
 
+/**
+ * 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 const DynamicColorIOS = (tuple: DynamicColorIOSTuple): ColorValue => {
   throw new Error('DynamicColorIOS is not available on this platform.');
 };

package/Libraries/StyleSheet/StyleSheet.js

@@ -10,25 +10,21 @@
 
 'use strict';
 
+import typeof * as StyleSheetExports from './StyleSheetExports';
 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 composeStyles from '../../src/private/styles/composeStyles';
-import flatten from './flattenStyle';
-
-const ReactNativeStyleAttributes =
-  require('../Components/View/ReactNativeStyleAttributes').default;
-const PixelRatio = require('../Utilities/PixelRatio').default;
+const StyleSheet: StyleSheetExports = (
+  require('./StyleSheetExports') as $FlowFixMe
+).default;
 
 export type {NativeColorValue} from './StyleSheetTypes';
 
@@ -166,192 +162,4 @@ export type ImageStyle = ____ImageStyle_Internal;
  */
 export type DangerouslyImpreciseStyle = ____DangerouslyImpreciseStyle_Internal;
 
-let hairlineWidth: number = PixelRatio.roundToNearestPixel(0.4);
-if (hairlineWidth === 0) {
-  hairlineWidth = 1 / PixelRatio.get();
-}
-
-const absoluteFill: {
-  +bottom: 0,
-  +left: 0,
-  +position: 'absolute',
-  +right: 0,
-  +top: 0,
-} = {
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-};
-if (__DEV__) {
-  Object.freeze(absoluteFill);
-}
-
-/**
- * A StyleSheet is an abstraction similar to CSS StyleSheets
- *
- * Create a new StyleSheet:
- *
- * ```
- * const styles = StyleSheet.create({
- *   container: {
- *     borderRadius: 4,
- *     borderWidth: 0.5,
- *     borderColor: '#d6d7da',
- *   },
- *   title: {
- *     fontSize: 19,
- *     fontWeight: 'bold',
- *   },
- *   activeTitle: {
- *     color: 'red',
- *   },
- * });
- * ```
- *
- * Use a StyleSheet:
- *
- * ```
- * <View style={styles.container}>
- *   <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
- * </View>
- * ```
- *
- * Code quality:
- *
- *  - By moving styles away from the render function, you're making the code
- *    easier to understand.
- *  - Naming the styles is a good way to add meaning to the low level components
- *  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.
- *
- */
-export default {
-  /**
-   * 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.
-   *
-   * A line with hairline width may not be visible if your simulator is downscaled.
-   */
-  hairlineWidth,
-
-  /**
-   * 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.
-   */
-  absoluteFill: (absoluteFill: any), // TODO: This should be updated after we fix downstream Flow sites.
-
-  /**
-   * 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',
-   *     },
-   *   });
-   */
-  absoluteFillObject: absoluteFill,
-
-  /**
-   * 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.
-   */
-  compose: 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' }
-   * ```
-   */
-  flatten,
-
-  /**
-   * 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.
-   */
-  setStyleAttributePreprocessor(
-    property: string,
-    process: (nextProp: mixed) => mixed,
-  ) {
-    let value;
-
-    if (ReactNativeStyleAttributes[property] === true) {
-      value = {process};
-    } else if (typeof ReactNativeStyleAttributes[property] === 'object') {
-      value = {...ReactNativeStyleAttributes[property], process};
-    } else {
-      console.error(`${property} is not a valid style attribute`);
-      return;
-    }
-
-    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;
-  },
-
-  /**
-   * 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) {
-        if (obj[key]) {
-          Object.freeze(obj[key]);
-        }
-      }
-    }
-    return obj;
-  },
-};
+export default StyleSheet;