@office-iss/react-native-win32 0.72.6 → 0.73.0-preview.1

package/Libraries/DOM/Nodes/ReadOnlyElement.js

@@ -5,85 +5,273 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow strict
+ * @flow strict-local
  */
 
 // flowlint unsafe-getters-setters:off
 
 import type HTMLCollection from '../OldStyleCollections/HTMLCollection';
 
-import ReadOnlyNode from './ReadOnlyNode';
+import {getFabricUIManager} from '../../ReactNative/FabricUIManager';
+import DOMRect from '../Geometry/DOMRect';
+import {createHTMLCollection} from '../OldStyleCollections/HTMLCollection';
+import ReadOnlyNode, {
+  getChildNodes,
+  getInstanceHandle,
+  getShadowNode,
+} from './ReadOnlyNode';
+import {getElementSibling} from './Utilities/Traversal';
+import nullthrows from 'nullthrows';
 
 export default class ReadOnlyElement extends ReadOnlyNode {
   get childElementCount(): number {
-    throw new TypeError('Unimplemented');
+    return getChildElements(this).length;
   }
 
   get children(): HTMLCollection<ReadOnlyElement> {
-    throw new TypeError('Unimplemented');
+    return createHTMLCollection(getChildElements(this));
   }
 
   get clientHeight(): number {
-    throw new TypeError('Unimplemented');
+    const node = getShadowNode(this);
+
+    if (node != null) {
+      const innerSize = nullthrows(getFabricUIManager()).getInnerSize(node);
+      if (innerSize != null) {
+        return innerSize[1];
+      }
+    }
+
+    return 0;
   }
 
   get clientLeft(): number {
-    throw new TypeError('Unimplemented');
+    const node = getShadowNode(this);
+
+    if (node != null) {
+      const borderSize = nullthrows(getFabricUIManager()).getBorderSize(node);
+      if (borderSize != null) {
+        return borderSize[3];
+      }
+    }
+
+    return 0;
   }
 
   get clientTop(): number {
-    throw new TypeError('Unimplemented');
+    const node = getShadowNode(this);
+
+    if (node != null) {
+      const borderSize = nullthrows(getFabricUIManager()).getBorderSize(node);
+      if (borderSize != null) {
+        return borderSize[0];
+      }
+    }
+
+    return 0;
   }
 
   get clientWidth(): number {
-    throw new TypeError('Unimplemented');
+    const node = getShadowNode(this);
+
+    if (node != null) {
+      const innerSize = nullthrows(getFabricUIManager()).getInnerSize(node);
+      if (innerSize != null) {
+        return innerSize[0];
+      }
+    }
+
+    return 0;
   }
 
   get firstElementChild(): ReadOnlyElement | null {
-    throw new TypeError('Unimplemented');
+    const childElements = getChildElements(this);
+
+    if (childElements.length === 0) {
+      return null;
+    }
+
+    return childElements[0];
   }
 
   get id(): string {
-    throw new TypeError('Unimplemented');
+    const instanceHandle = getInstanceHandle(this);
+    // TODO: migrate off this private React API
+    // $FlowExpectedError[incompatible-use]
+    const props = instanceHandle?.stateNode?.canonical?.currentProps;
+    return props?.id ?? props?.nativeID ?? '';
   }
 
   get lastElementChild(): ReadOnlyElement | null {
-    throw new TypeError('Unimplemented');
+    const childElements = getChildElements(this);
+
+    if (childElements.length === 0) {
+      return null;
+    }
+
+    return childElements[childElements.length - 1];
   }
 
   get nextElementSibling(): ReadOnlyElement | null {
-    throw new TypeError('Unimplemented');
+    return getElementSibling(this, 'next');
   }
 
+  get nodeName(): string {
+    return this.tagName;
+  }
+
+  get nodeType(): number {
+    return ReadOnlyNode.ELEMENT_NODE;
+  }
+
+  get nodeValue(): string | null {
+    return null;
+  }
+
+  set nodeValue(value: string): void {}
+
   get previousElementSibling(): ReadOnlyElement | null {
-    throw new TypeError('Unimplemented');
+    return getElementSibling(this, 'previous');
   }
 
   get scrollHeight(): number {
-    throw new TypeError('Unimplemented');
+    const node = getShadowNode(this);
+
+    if (node != null) {
+      const scrollSize = nullthrows(getFabricUIManager()).getScrollSize(node);
+      if (scrollSize != null) {
+        return scrollSize[1];
+      }
+    }
+
+    return 0;
   }
 
   get scrollLeft(): number {
-    throw new TypeError('Unimplemented');
+    const node = getShadowNode(this);
+
+    if (node != null) {
+      const scrollPosition = nullthrows(getFabricUIManager()).getScrollPosition(
+        node,
+      );
+      if (scrollPosition != null) {
+        return scrollPosition[0];
+      }
+    }
+
+    return 0;
   }
 
   get scrollTop(): number {
-    throw new TypeError('Unimplemented');
+    const node = getShadowNode(this);
+
+    if (node != null) {
+      const scrollPosition = nullthrows(getFabricUIManager()).getScrollPosition(
+        node,
+      );
+      if (scrollPosition != null) {
+        return scrollPosition[1];
+      }
+    }
+
+    return 0;
   }
 
   get scrollWidth(): number {
-    throw new TypeError('Unimplemented');
+    const node = getShadowNode(this);
+
+    if (node != null) {
+      const scrollSize = nullthrows(getFabricUIManager()).getScrollSize(node);
+      if (scrollSize != null) {
+        return scrollSize[0];
+      }
+    }
+
+    return 0;
   }
 
   get tagName(): string {
-    throw new TypeError('Unimplemented');
+    const node = getShadowNode(this);
+
+    if (node != null) {
+      return nullthrows(getFabricUIManager()).getTagName(node);
+    }
+
+    return '';
+  }
+
+  get textContent(): string | null {
+    const shadowNode = getShadowNode(this);
+
+    if (shadowNode != null) {
+      return nullthrows(getFabricUIManager()).getTextContent(shadowNode);
+    }
+
+    return '';
   }
 
   getBoundingClientRect(): DOMRect {
-    throw new TypeError('Unimplemented');
+    return getBoundingClientRect(this, {includeTransform: true});
   }
 
-  getClientRects(): DOMRectList {
-    throw new TypeError('Unimplemented');
+  /**
+   * Pointer Capture APIs
+   */
+  hasPointerCapture(pointerId: number): boolean {
+    const node = getShadowNode(this);
+    if (node != null) {
+      return nullthrows(getFabricUIManager()).hasPointerCapture(
+        node,
+        pointerId,
+      );
+    }
+    return false;
   }
+
+  setPointerCapture(pointerId: number): void {
+    const node = getShadowNode(this);
+    if (node != null) {
+      nullthrows(getFabricUIManager()).setPointerCapture(node, pointerId);
+    }
+  }
+
+  releasePointerCapture(pointerId: number): void {
+    const node = getShadowNode(this);
+    if (node != null) {
+      nullthrows(getFabricUIManager()).releasePointerCapture(node, pointerId);
+    }
+  }
+}
+
+function getChildElements(node: ReadOnlyNode): $ReadOnlyArray<ReadOnlyElement> {
+  // $FlowIssue[incompatible-call]
+  return getChildNodes(node).filter(
+    childNode => childNode instanceof ReadOnlyElement,
+  );
+}
+
+/**
+ * The public API for `getBoundingClientRect` always includes transform,
+ * so we use this internal version to get the data without transform to
+ * implement methods like `offsetWidth` and `offsetHeight`.
+ */
+export function getBoundingClientRect(
+  node: ReadOnlyElement,
+  {includeTransform}: {includeTransform: boolean},
+): DOMRect {
+  const shadowNode = getShadowNode(node);
+
+  if (shadowNode != null) {
+    const rect = nullthrows(getFabricUIManager()).getBoundingClientRect(
+      shadowNode,
+      includeTransform,
+    );
+
+    if (rect) {
+      return new DOMRect(rect[0], rect[1], rect[2], rect[3]);
+    }
+  }
+
+  // Empty rect if any of the above failed
+  return new DOMRect(0, 0, 0, 0);
 }

package/Libraries/DOM/Nodes/ReadOnlyNode.js

@@ -5,77 +5,202 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow strict
+ * @flow strict-local
  */
 
 // flowlint unsafe-getters-setters:off
 
+import type {
+  InternalInstanceHandle,
+  Node as ShadowNode,
+} from '../../Renderer/shims/ReactNativeTypes';
 import type NodeList from '../OldStyleCollections/NodeList';
 import type ReadOnlyElement from './ReadOnlyElement';
 
+import {getFabricUIManager} from '../../ReactNative/FabricUIManager';
+import ReactFabric from '../../Renderer/shims/ReactFabric';
+import {createNodeList} from '../OldStyleCollections/NodeList';
+import nullthrows from 'nullthrows';
+
+// We initialize this lazily to avoid a require cycle
+// (`ReadOnlyElement` also depends on `ReadOnlyNode`).
+let ReadOnlyElementClass: Class<ReadOnlyElement>;
+
 export default class ReadOnlyNode {
+  constructor(internalInstanceHandle: InternalInstanceHandle) {
+    setInstanceHandle(this, internalInstanceHandle);
+  }
+
   get childNodes(): NodeList<ReadOnlyNode> {
-    throw new TypeError('Unimplemented');
+    const childNodes = getChildNodes(this);
+    return createNodeList(childNodes);
   }
 
   get firstChild(): ReadOnlyNode | null {
-    throw new TypeError('Unimplemented');
+    const childNodes = getChildNodes(this);
+
+    if (childNodes.length === 0) {
+      return null;
+    }
+
+    return childNodes[0];
   }
 
   get isConnected(): boolean {
-    throw new TypeError('Unimplemented');
+    const shadowNode = getShadowNode(this);
+
+    if (shadowNode == null) {
+      return false;
+    }
+
+    return nullthrows(getFabricUIManager()).isConnected(shadowNode);
   }
 
   get lastChild(): ReadOnlyNode | null {
-    throw new TypeError('Unimplemented');
+    const childNodes = getChildNodes(this);
+
+    if (childNodes.length === 0) {
+      return null;
+    }
+
+    return childNodes[childNodes.length - 1];
   }
 
   get nextSibling(): ReadOnlyNode | null {
-    throw new TypeError('Unimplemented');
+    const [siblings, position] = getNodeSiblingsAndPosition(this);
+
+    if (position === siblings.length - 1) {
+      // this node is the last child of its parent, so there is no next sibling.
+      return null;
+    }
+
+    return siblings[position + 1];
   }
 
+  /**
+   * @abstract
+   */
   get nodeName(): string {
-    throw new TypeError('Unimplemented');
+    throw new TypeError(
+      '`nodeName` is abstract and must be implemented in a subclass of `ReadOnlyNode`',
+    );
   }
 
+  /**
+   * @abstract
+   */
   get nodeType(): number {
-    throw new TypeError('Unimplemented');
+    throw new TypeError(
+      '`nodeType` is abstract and must be implemented in a subclass of `ReadOnlyNode`',
+    );
   }
 
+  /**
+   * @abstract
+   */
   get nodeValue(): string | null {
-    throw new TypeError('Unimplemented');
+    throw new TypeError(
+      '`nodeValue` is abstract and must be implemented in a subclass of `ReadOnlyNode`',
+    );
   }
 
   get parentElement(): ReadOnlyElement | null {
-    throw new TypeError('Unimplemented');
+    const parentNode = this.parentNode;
+
+    if (ReadOnlyElementClass == null) {
+      // We initialize this lazily to avoid a require cycle.
+      ReadOnlyElementClass = require('./ReadOnlyElement').default;
+    }
+
+    if (parentNode instanceof ReadOnlyElementClass) {
+      return parentNode;
+    }
+
+    return null;
   }
 
   get parentNode(): ReadOnlyNode | null {
-    throw new TypeError('Unimplemented');
+    const shadowNode = getShadowNode(this);
+
+    if (shadowNode == null) {
+      return null;
+    }
+
+    const parentInstanceHandle = nullthrows(getFabricUIManager()).getParentNode(
+      shadowNode,
+    );
+
+    if (parentInstanceHandle == null) {
+      return null;
+    }
+
+    return getPublicInstanceFromInternalInstanceHandle(parentInstanceHandle);
   }
 
   get previousSibling(): ReadOnlyNode | null {
-    throw new TypeError('Unimplemented');
+    const [siblings, position] = getNodeSiblingsAndPosition(this);
+
+    if (position === 0) {
+      // this node is the first child of its parent, so there is no previous sibling.
+      return null;
+    }
+
+    return siblings[position - 1];
   }
 
+  /**
+   * @abstract
+   */
   get textContent(): string | null {
-    throw new TypeError('Unimplemented');
+    throw new TypeError(
+      '`textContent` is abstract and must be implemented in a subclass of `ReadOnlyNode`',
+    );
   }
 
   compareDocumentPosition(otherNode: ReadOnlyNode): number {
-    throw new TypeError('Unimplemented');
+    // Quick check to avoid having to call into Fabric if the nodes are the same.
+    if (otherNode === this) {
+      return 0;
+    }
+
+    const shadowNode = getShadowNode(this);
+    const otherShadowNode = getShadowNode(otherNode);
+
+    if (shadowNode == null || otherShadowNode == null) {
+      return ReadOnlyNode.DOCUMENT_POSITION_DISCONNECTED;
+    }
+
+    return nullthrows(getFabricUIManager()).compareDocumentPosition(
+      shadowNode,
+      otherShadowNode,
+    );
   }
 
   contains(otherNode: ReadOnlyNode): boolean {
-    throw new TypeError('Unimplemented');
+    if (otherNode === this) {
+      return true;
+    }
+
+    const position = this.compareDocumentPosition(otherNode);
+    // eslint-disable-next-line no-bitwise
+    return (position & ReadOnlyNode.DOCUMENT_POSITION_CONTAINED_BY) !== 0;
   }
 
   getRootNode(): ReadOnlyNode {
-    throw new TypeError('Unimplemented');
+    // eslint-disable-next-line consistent-this
+    let lastKnownParent: ReadOnlyNode = this;
+    let nextPossibleParent: ?ReadOnlyNode = this.parentNode;
+
+    while (nextPossibleParent != null) {
+      lastKnownParent = nextPossibleParent;
+      nextPossibleParent = nextPossibleParent.parentNode;
+    }
+
+    return lastKnownParent;
   }
 
   hasChildNodes(): boolean {
-    throw new TypeError('Unimplemented');
+    return getChildNodes(this).length > 0;
   }
 
   /*
@@ -165,3 +290,67 @@ export default class ReadOnlyNode {
    */
   static DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number = 32;
 }
+
+const INSTANCE_HANDLE_KEY = Symbol('internalInstanceHandle');
+
+export function getInstanceHandle(node: ReadOnlyNode): InternalInstanceHandle {
+  // $FlowExpectedError[prop-missing]
+  return node[INSTANCE_HANDLE_KEY];
+}
+
+function setInstanceHandle(
+  node: ReadOnlyNode,
+  instanceHandle: InternalInstanceHandle,
+): void {
+  // $FlowExpectedError[prop-missing]
+  node[INSTANCE_HANDLE_KEY] = instanceHandle;
+}
+
+export function getShadowNode(node: ReadOnlyNode): ?ShadowNode {
+  return ReactFabric.getNodeFromInternalInstanceHandle(getInstanceHandle(node));
+}
+
+export function getChildNodes(
+  node: ReadOnlyNode,
+): $ReadOnlyArray<ReadOnlyNode> {
+  const shadowNode = getShadowNode(node);
+
+  if (shadowNode == null) {
+    return [];
+  }
+
+  const childNodeInstanceHandles = nullthrows(
+    getFabricUIManager(),
+  ).getChildNodes(shadowNode);
+  return childNodeInstanceHandles.map(instanceHandle =>
+    getPublicInstanceFromInternalInstanceHandle(instanceHandle),
+  );
+}
+
+function getNodeSiblingsAndPosition(
+  node: ReadOnlyNode,
+): [$ReadOnlyArray<ReadOnlyNode>, number] {
+  const parent = node.parentNode;
+  if (parent == null) {
+    // This node is the root or it's disconnected.
+    return [[node], 0];
+  }
+
+  const siblings = getChildNodes(parent);
+  const position = siblings.indexOf(node);
+
+  if (position === -1) {
+    throw new TypeError("Missing node in parent's child node list");
+  }
+
+  return [siblings, position];
+}
+
+export function getPublicInstanceFromInternalInstanceHandle(
+  instanceHandle: InternalInstanceHandle,
+): ReadOnlyNode {
+  const mixedPublicInstance =
+    ReactFabric.getPublicInstanceFromInternalInstanceHandle(instanceHandle);
+  // $FlowExpectedError[incompatible-return] React defines public instances as "mixed" because it can't access the definition from React Native.
+  return mixedPublicInstance;
+}

package/Libraries/DOM/Nodes/ReadOnlyText.js

@@ -0,0 +1,30 @@
+/**
+ * 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
+ */
+
+// flowlint unsafe-getters-setters:off
+
+import ReadOnlyCharacterData from './ReadOnlyCharacterData';
+import ReadOnlyNode from './ReadOnlyNode';
+
+export default class ReadOnlyText extends ReadOnlyCharacterData {
+  /**
+   * @override
+   */
+  get nodeName(): string {
+    return '#text';
+  }
+
+  /**
+   * @override
+   */
+  get nodeType(): number {
+    return ReadOnlyNode.TEXT_NODE;
+  }
+}

package/Libraries/DOM/Nodes/Utilities/Traversal.js

@@ -0,0 +1,54 @@
+/**
+ * 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 ReadOnlyElement from '../ReadOnlyElement';
+import type ReadOnlyNode from '../ReadOnlyNode';
+
+import {getChildNodes} from '../ReadOnlyNode';
+
+// We initialize this lazily to avoid a require cycle
+// (`ReadOnlyElement` also depends on `Traversal`).
+let ReadOnlyElementClass: Class<ReadOnlyElement>;
+
+export function getElementSibling(
+  node: ReadOnlyNode,
+  direction: 'next' | 'previous',
+): ReadOnlyElement | null {
+  const parent = node.parentNode;
+  if (parent == null) {
+    // This node is the root or it's disconnected.
+    return null;
+  }
+
+  const childNodes = getChildNodes(parent);
+
+  const startPosition = childNodes.indexOf(node);
+  if (startPosition === -1) {
+    return null;
+  }
+
+  const increment = direction === 'next' ? 1 : -1;
+
+  let position = startPosition + increment;
+
+  if (ReadOnlyElementClass == null) {
+    // We initialize this lazily to avoid a require cycle.
+    ReadOnlyElementClass = require('../ReadOnlyElement').default;
+  }
+
+  while (
+    childNodes[position] != null &&
+    !(childNodes[position] instanceof ReadOnlyElementClass)
+  ) {
+    position = position + increment;
+  }
+
+  return childNodes[position] ?? null;
+}

package/Libraries/EventEmitter/NativeEventEmitter.d.ts

@@ -60,10 +60,4 @@ declare class NativeEventEmitter extends EventEmitter {
    * @param eventType  name of the event whose registered listeners to remove
    */
   removeAllListeners(eventType: string): void;
-
-  /**
-   * Removes a subscription created by the addListener, the EventSubscription#remove()
-   * function actually calls through to this.
-   */
-  removeSubscription(subscription: EmitterSubscription): void;
 }