@office-iss/react-native-win32 0.0.0-canary.30 → 0.0.0-canary.301

package/Libraries/Components/View/ViewWin32.js

@@ -1,80 +1,130 @@
-"use strict";
-/**
- * Copyright: Microsoft 2015
- *
- * RN-specific implementation of the cross-platform View abstraction.
- */
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewWin32 = void 0;
-var React = require("react");
-var react_native_1 = require("react-native");
-var setAndForwardRef = require('../../Utilities/setAndForwardRef');
-exports.ViewWin32 = React.forwardRef(function (props, ref) {
-    /**
-     * Check for raw text in the DOM.
-     */
-    if (__DEV__) {
-        React.Children.toArray(props.children).forEach(function (item) {
-            if (typeof item === 'string') {
-                console.error("Unexpected text node: " + item + ". A text node cannot be a child of a <View>.");
-            }
-        });
-    }
-    /**
-     * Process accessibility refs into node handles after initial DOM render, before sent across the bridge.
-     * useLayoutEffect will invalidate the render to assess the ref-based accessibility properties.
-     */
-    var _a = React.useState(null), labeledByTarget = _a[0], setLabeledByTarget = _a[1];
-    var _b = React.useState(null), describedByTarget = _b[0], setDescribedByTarget = _b[1];
-    var accessibilityLabeledBy = props.accessibilityLabeledBy, accessibilityDescribedBy = props.accessibilityDescribedBy, rest = __rest(props, ["accessibilityLabeledBy", "accessibilityDescribedBy"]);
-    React.useLayoutEffect(function () {
-        if (accessibilityLabeledBy !== undefined && (accessibilityLabeledBy === null || accessibilityLabeledBy === void 0 ? void 0 : accessibilityLabeledBy.current) !== null) {
-            setLabeledByTarget(react_native_1.findNodeHandle(accessibilityLabeledBy.current));
-        }
-        if (accessibilityDescribedBy !== undefined && (accessibilityDescribedBy === null || accessibilityDescribedBy === void 0 ? void 0 : accessibilityDescribedBy.current) !== null) {
-            setDescribedByTarget(react_native_1.findNodeHandle(accessibilityDescribedBy.current));
-        }
-    }, [accessibilityLabeledBy, accessibilityDescribedBy]);
-    /**
-     * Set up the forwarding ref to enable adding the focus method.
-     */
-    var focusRef = React.useRef();
-    var _setNativeRef = setAndForwardRef({
-        getForwardedRef: function () { return ref; },
-        setLocalRef: function (localRef) {
-            focusRef.current = localRef;
-            /**
-             * Add focus() as a callable function to the forwarded reference.
-             */
-            if (localRef) {
-                localRef.focus = function () {
-                    react_native_1.NativeModules.UIManager.dispatchViewManagerCommand(react_native_1.findNodeHandle(localRef), react_native_1.NativeModules.UIManager.getViewManagerConfig('RCTView').Commands.focus, null);
-                };
-            }
-        },
-    });
-    return React.createElement(react_native_1.View, __assign({ ref: _setNativeRef }, rest, ((labeledByTarget !== null) ? { accessibilityLabeledBy: labeledByTarget } : {}), ((describedByTarget !== null) ? { accessibilityDescribedBy: describedByTarget } : {})));
-});
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlld1dpbjMyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL0xpYnJhcmllcy9Db21wb25lbnRzL1ZpZXcvVmlld1dpbjMyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUE7Ozs7R0FJRzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUVILDZCQUErQjtBQUUvQiw2Q0FBbUU7QUFFbkUsSUFBTSxnQkFBZ0IsR0FBRyxPQUFPLENBQUMsa0NBQWtDLENBQUMsQ0FBQztBQWdCeEQsUUFBQSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDdkMsVUFBQyxLQUFzQixFQUFFLEdBQW1CO0lBRTFDOztPQUVHO0lBQ0gsSUFBSSxPQUFPLEVBQUU7UUFDWCxLQUFLLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUMsT0FBTyxDQUFDLFVBQUEsSUFBSTtZQUNqRCxJQUFJLE9BQU8sSUFBSSxLQUFLLFFBQVEsRUFBRTtnQkFDNUIsT0FBTyxDQUFDLEtBQUssQ0FBQywyQkFBeUIsSUFBSSxpREFBOEMsQ0FBQyxDQUFDO2FBQzVGO1FBQ0gsQ0FBQyxDQUFDLENBQUM7S0FDSjtJQUVEOzs7T0FHRztJQUVHLElBQUEsS0FBd0MsS0FBSyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBM0QsZUFBZSxRQUFBLEVBQUUsa0JBQWtCLFFBQXdCLENBQUM7SUFDN0QsSUFBQSxLQUE0QyxLQUFLLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUEvRCxpQkFBaUIsUUFBQSxFQUFFLG9CQUFvQixRQUF3QixDQUFDO0lBQ2hFLElBQUEsc0JBQXNCLEdBQXVDLEtBQUssdUJBQTVDLEVBQUUsd0JBQXdCLEdBQWEsS0FBSyx5QkFBbEIsRUFBSyxJQUFJLFVBQUksS0FBSyxFQUFuRSxzREFBMkQsQ0FBRCxDQUFVO0lBQzFFLEtBQUssQ0FBQyxlQUFlLENBQUM7UUFDcEIsSUFBSSxzQkFBc0IsS0FBSyxTQUFTLElBQUksQ0FBQSxzQkFBc0IsYUFBdEIsc0JBQXNCLHVCQUF0QixzQkFBc0IsQ0FBRSxPQUFPLE1BQUssSUFBSSxFQUNwRjtZQUNFLGtCQUFrQixDQUFDLDZCQUFjLENBQUMsc0JBQXNCLENBQUMsT0FJdkIsQ0FBQyxDQUFDLENBQUM7U0FDdEM7UUFFRCxJQUFJLHdCQUF3QixLQUFLLFNBQVMsSUFBSSxDQUFBLHdCQUF3QixhQUF4Qix3QkFBd0IsdUJBQXhCLHdCQUF3QixDQUFFLE9BQU8sTUFBSyxJQUFJLEVBQ3hGO1lBQ0Usb0JBQW9CLENBQUMsNkJBQWMsQ0FBQyx3QkFBd0IsQ0FBQyxPQUkzQixDQUFDLENBQUMsQ0FBQztTQUN0QztJQUNILENBQUMsRUFBRSxDQUFDLHNCQUFzQixFQUFFLHdCQUF3QixDQUFDLENBQUMsQ0FBQztJQUV2RDs7T0FFRztJQUNILElBQUksUUFBUSxHQUFHLEtBQUssQ0FBQyxNQUFNLEVBQWEsQ0FBQztJQUV6QyxJQUFNLGFBQWEsR0FBRyxnQkFBZ0IsQ0FBQztRQUNyQyxlQUFlLEVBQUUsY0FBTSxPQUFBLEdBQUcsRUFBSCxDQUFHO1FBQzFCLFdBQVcsRUFBRSxVQUFBLFFBQVE7WUFDbkIsUUFBUSxDQUFDLE9BQU8sR0FBRyxRQUFRLENBQUM7WUFFNUI7O2VBRUc7WUFDSCxJQUFJLFFBQVEsRUFDWjtnQkFDRSxRQUFRLENBQUMsS0FBSyxHQUFHO29CQUNmLDRCQUFhLENBQUMsU0FBUyxDQUFDLDBCQUEwQixDQUNoRCw2QkFBYyxDQUFDLFFBQVEsQ0FBQyxFQUN4Qiw0QkFBYSxDQUFDLFNBQVMsQ0FBQyxvQkFBb0IsQ0FBQyxTQUFTLENBQUMsQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUN0RSxJQUFJLENBQ0gsQ0FBQztnQkFDTixDQUFDLENBQUM7YUFDSDtRQUNILENBQUM7S0FDRixDQUFDLENBQUM7SUFFSCxPQUFPLG9CQUFDLG1CQUFJLGFBQUMsR0FBRyxFQUFFLGFBQWEsSUFDMUIsSUFBNEIsRUFDN0IsQ0FBQyxDQUFDLGVBQWUsS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBQyxzQkFBc0IsRUFBQyxlQUFlLEVBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQzVFLENBQUMsQ0FBQyxpQkFBaUIsS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBQyx3QkFBd0IsRUFBQyxpQkFBaUIsRUFBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFDcEYsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQ6IE1pY3Jvc29mdCAyMDE1XG4gKlxuICogUk4tc3BlY2lmaWMgaW1wbGVtZW50YXRpb24gb2YgdGhlIGNyb3NzLXBsYXRmb3JtIFZpZXcgYWJzdHJhY3Rpb24uXG4gKi9cblxuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IFJOID0gcmVxdWlyZSgncmVhY3QtbmF0aXZlJyk7XG5pbXBvcnQgeyBWaWV3LCBmaW5kTm9kZUhhbmRsZSwgTmF0aXZlTW9kdWxlcyB9IGZyb20gJ3JlYWN0LW5hdGl2ZSc7XG5pbXBvcnQgeyBJVmlld1dpbjMyUHJvcHMsIFVzZUZyb20gfSBmcm9tICcuL1ZpZXdXaW4zMi5Qcm9wcyc7XG5jb25zdCBzZXRBbmRGb3J3YXJkUmVmID0gcmVxdWlyZSgnLi4vLi4vVXRpbGl0aWVzL3NldEFuZEZvcndhcmRSZWYnKTtcblxuLyoqXG4gKiBCYXNpYyBWaWV3IGNvbXBvbmVudCB3aXRoIGFkZGl0aW9uYWwgV2luMzIgc3BlY2lmaWMgZnVuY3Rpb25hbGl0eVxuICovXG5cbnR5cGUgSW5uZXJWaWV3V2luMzJQcm9wcyA9IFVzZUZyb208SVZpZXdXaW4zMlByb3BzLCBSTi5WaWV3UHJvcHMsICdhY2Nlc3NpYmlsaXR5Um9sZSc+ICZcbiAgVXNlRnJvbTxJVmlld1dpbjMyUHJvcHMsIFJOLlZpZXdQcm9wcywgJ2FjY2Vzc2liaWxpdHlTdGF0ZSc+ICZcbiAgVXNlRnJvbTxJVmlld1dpbjMyUHJvcHMsIFJOLlZpZXdQcm9wcywgJ2FjY2Vzc2liaWxpdHlBY3Rpb25zJz4gJlxuICBVc2VGcm9tPElWaWV3V2luMzJQcm9wcywgUk4uVmlld1Byb3BzLCAnb25BY2Nlc3NpYmlsaXR5QWN0aW9uJz47XG5cbnR5cGUgVmlld1dpbjMyVHlwZSA9IFJlYWN0LkZvcndhcmRSZWZFeG90aWNDb21wb25lbnQ8XG5JVmlld1dpbjMyUHJvcHMgJiBSZWFjdC5SZWZBdHRyaWJ1dGVzPFZpZXc+XG4+ICZcbiAgVmlldztcblxuZXhwb3J0IGNvbnN0IFZpZXdXaW4zMiA9IFJlYWN0LmZvcndhcmRSZWYoXG4gIChwcm9wczogSVZpZXdXaW4zMlByb3BzLCByZWY6IFJlYWN0LlJlZjxhbnk+KSA9PiB7XG5cbiAgICAvKipcbiAgICAgKiBDaGVjayBmb3IgcmF3IHRleHQgaW4gdGhlIERPTS5cbiAgICAgKi9cbiAgICBpZiAoX19ERVZfXykge1xuICAgICAgUmVhY3QuQ2hpbGRyZW4udG9BcnJheShwcm9wcy5jaGlsZHJlbikuZm9yRWFjaChpdGVtID0+IHtcbiAgICAgICAgaWYgKHR5cGVvZiBpdGVtID09PSAnc3RyaW5nJykge1xuICAgICAgICAgIGNvbnNvbGUuZXJyb3IoYFVuZXhwZWN0ZWQgdGV4dCBub2RlOiAke2l0ZW19LiBBIHRleHQgbm9kZSBjYW5ub3QgYmUgYSBjaGlsZCBvZiBhIDxWaWV3Pi5gKTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogUHJvY2VzcyBhY2Nlc3NpYmlsaXR5IHJlZnMgaW50byBub2RlIGhhbmRsZXMgYWZ0ZXIgaW5pdGlhbCBET00gcmVuZGVyLCBiZWZvcmUgc2VudCBhY3Jvc3MgdGhlIGJyaWRnZS5cbiAgICAgKiB1c2VMYXlvdXRFZmZlY3Qgd2lsbCBpbnZhbGlkYXRlIHRoZSByZW5kZXIgdG8gYXNzZXNzIHRoZSByZWYtYmFzZWQgYWNjZXNzaWJpbGl0eSBwcm9wZXJ0aWVzLlxuICAgICAqL1xuXG4gICAgY29uc3QgW2xhYmVsZWRCeVRhcmdldCwgc2V0TGFiZWxlZEJ5VGFyZ2V0XSA9IFJlYWN0LnVzZVN0YXRlKG51bGwpO1xuICAgIGNvbnN0IFtkZXNjcmliZWRCeVRhcmdldCwgc2V0RGVzY3JpYmVkQnlUYXJnZXRdID0gUmVhY3QudXNlU3RhdGUobnVsbCk7XG4gICAgY29uc3Qge2FjY2Vzc2liaWxpdHlMYWJlbGVkQnksIGFjY2Vzc2liaWxpdHlEZXNjcmliZWRCeSwgLi4ucmVzdH0gPSBwcm9wcztcbiAgICBSZWFjdC51c2VMYXlvdXRFZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKGFjY2Vzc2liaWxpdHlMYWJlbGVkQnkgIT09IHVuZGVmaW5lZCAmJiBhY2Nlc3NpYmlsaXR5TGFiZWxlZEJ5Py5jdXJyZW50ICE9PSBudWxsKVxuICAgICAge1xuICAgICAgICBzZXRMYWJlbGVkQnlUYXJnZXQoZmluZE5vZGVIYW5kbGUoYWNjZXNzaWJpbGl0eUxhYmVsZWRCeS5jdXJyZW50IGFzXG4gICAgICAgICAgfCBudWxsXG4gICAgICAgICAgfCBudW1iZXJcbiAgICAgICAgICB8IFJlYWN0LkNvbXBvbmVudDxhbnksIGFueSwgYW55PlxuICAgICAgICAgIHwgUmVhY3QuQ29tcG9uZW50Q2xhc3M8YW55LCBhbnk+KSk7XG4gICAgICB9XG5cbiAgICAgIGlmIChhY2Nlc3NpYmlsaXR5RGVzY3JpYmVkQnkgIT09IHVuZGVmaW5lZCAmJiBhY2Nlc3NpYmlsaXR5RGVzY3JpYmVkQnk/LmN1cnJlbnQgIT09IG51bGwpXG4gICAgICB7XG4gICAgICAgIHNldERlc2NyaWJlZEJ5VGFyZ2V0KGZpbmROb2RlSGFuZGxlKGFjY2Vzc2liaWxpdHlEZXNjcmliZWRCeS5jdXJyZW50IGFzXG4gICAgICAgICAgfCBudWxsXG4gICAgICAgICAgfCBudW1iZXJcbiAgICAgICAgICB8IFJlYWN0LkNvbXBvbmVudDxhbnksIGFueSwgYW55PlxuICAgICAgICAgIHwgUmVhY3QuQ29tcG9uZW50Q2xhc3M8YW55LCBhbnk+KSk7XG4gICAgICB9XG4gICAgfSwgW2FjY2Vzc2liaWxpdHlMYWJlbGVkQnksIGFjY2Vzc2liaWxpdHlEZXNjcmliZWRCeV0pO1xuXG4gICAgLyoqXG4gICAgICogU2V0IHVwIHRoZSBmb3J3YXJkaW5nIHJlZiB0byBlbmFibGUgYWRkaW5nIHRoZSBmb2N1cyBtZXRob2QuXG4gICAgICovXG4gICAgbGV0IGZvY3VzUmVmID0gUmVhY3QudXNlUmVmPFZpZXdXaW4zMj4oKTtcblxuICAgIGNvbnN0IF9zZXROYXRpdmVSZWYgPSBzZXRBbmRGb3J3YXJkUmVmKHtcbiAgICAgIGdldEZvcndhcmRlZFJlZjogKCkgPT4gcmVmLFxuICAgICAgc2V0TG9jYWxSZWY6IGxvY2FsUmVmID0+IHtcbiAgICAgICAgZm9jdXNSZWYuY3VycmVudCA9IGxvY2FsUmVmO1xuXG4gICAgICAgIC8qKlxuICAgICAgICAgKiBBZGQgZm9jdXMoKSBhcyBhIGNhbGxhYmxlIGZ1bmN0aW9uIHRvIHRoZSBmb3J3YXJkZWQgcmVmZXJlbmNlLlxuICAgICAgICAgKi9cbiAgICAgICAgaWYgKGxvY2FsUmVmKVxuICAgICAgICB7XG4gICAgICAgICAgbG9jYWxSZWYuZm9jdXMgPSAoKSA9PiB7XG4gICAgICAgICAgICBOYXRpdmVNb2R1bGVzLlVJTWFuYWdlci5kaXNwYXRjaFZpZXdNYW5hZ2VyQ29tbWFuZChcbiAgICAgICAgICAgICAgZmluZE5vZGVIYW5kbGUobG9jYWxSZWYpLFxuICAgICAgICAgICAgICBOYXRpdmVNb2R1bGVzLlVJTWFuYWdlci5nZXRWaWV3TWFuYWdlckNvbmZpZygnUkNUVmlldycpLkNvbW1hbmRzLmZvY3VzLFxuICAgICAgICAgICAgICBudWxsXG4gICAgICAgICAgICAgICk7XG4gICAgICAgICAgfTtcbiAgICAgICAgfVxuICAgICAgfSxcbiAgICB9KTtcblxuICAgIHJldHVybiA8VmlldyByZWY9e19zZXROYXRpdmVSZWZ9XG4gICAgey4uLihyZXN0IGFzIElubmVyVmlld1dpbjMyUHJvcHMpfVxuICAgIHsuLi4oKGxhYmVsZWRCeVRhcmdldCAhPT0gbnVsbCkgPyB7YWNjZXNzaWJpbGl0eUxhYmVsZWRCeTpsYWJlbGVkQnlUYXJnZXR9IDoge30pfVxuICAgIHsuLi4oKGRlc2NyaWJlZEJ5VGFyZ2V0ICE9PSBudWxsKSA/IHthY2Nlc3NpYmlsaXR5RGVzY3JpYmVkQnk6ZGVzY3JpYmVkQnlUYXJnZXR9IDoge30pfVxuICAgIC8+O1xuICB9KTtcblxuZXhwb3J0IHR5cGUgVmlld1dpbjMyID0gVmlld1dpbjMyVHlwZTtcbiJdfQ==
+/**
+ * Copyright: Microsoft 2015
+ *
+ * RN-specific implementation of the cross-platform View abstraction.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import * as React from 'react';
+import {useLayoutEffect} from 'react';
+import type {ViewProps} from './ViewPropTypes';
+
+import View from './View';
+import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import warnOnce from '../../Utilities/warnOnce';
+
+/**
+ * Basic View component with additional Win32 specific functionality
+ */
+
+// $FlowFixMe[prop-missing]
+const ViewWin32: React.AbstractComponent<
+  ViewProps,
+  React.ElementRef<typeof View>,
+> = React.forwardRef(
+  (
+    {
+      accessibilityLabeledBy,
+      accessibilityDescribedBy,
+      accessibilityControls,
+      ...rest
+    }: ViewProps,
+    forwardedRef,
+  ) => {
+    /**
+     * Process accessibility refs into node handles after initial DOM render, before sent across the bridge.
+     * useLayoutEffect will invalidate the render to assess the ref-based accessibility properties.
+     *
+     * RN core moved these properties to use NativeID instead of Refs, so this is only kept for back compat
+     */
+
+    const [labeledByTarget, setLabeledByTarget] = React.useState<
+      number | null | void,
+    >(null);
+    const [describedByTarget, setDescribedByTarget] = React.useState<
+      number | null | void,
+    >(null);
+    const [controlsTarget, setControlsTarget] = React.useState<
+      number | null | void,
+    >(null);
+
+    useLayoutEffect(() => {
+      if (
+        accessibilityLabeledBy !== undefined &&
+        accessibilityLabeledBy.current !== null
+      ) {
+        warnOnce(
+          'accessibilityLabeledByAsRef',
+          'accessibilityLabeledBy has been deprecated.  Instead use accessibilityLabelledBy (double L), and specify it as a string matching the nativeID of the target component.  Support of specifying accessibilityLabeledBy will be removed in a future release',
+        );
+        setLabeledByTarget(findNodeHandle(accessibilityLabeledBy.current));
+      }
+    }, [accessibilityLabeledBy]);
+
+    useLayoutEffect(() => {
+      if (
+        typeof accessibilityDescribedBy !== 'string' &&
+        accessibilityDescribedBy !== undefined &&
+        // $FlowFixMe[incompatible-use] - Using accessibilityDescribedBy as Ref for backcompat, not typed
+        // $FlowFixMe[prop-missing]
+        accessibilityDescribedBy.current !== null
+      ) {
+        warnOnce(
+          'accessibilityDescribedByRef',
+          'accessibilityDescribedBy should be specified as a string matching the nativeID of the target component.  Support of specifying accessibilityDescribedBy using a ref is deprecated and will be removed in a future release',
+        );
+        // $FlowFixMe[incompatible-use] - Using accessibilityDescribedBy as Ref for backcompat, not typed
+        // $FlowFixMe[prop-missing]
+        setDescribedByTarget(findNodeHandle(accessibilityDescribedBy.current));
+      }
+    }, [accessibilityDescribedBy]);
+
+    useLayoutEffect(() => {
+      if (
+        typeof accessibilityControls !== 'string' &&
+        accessibilityControls !== undefined &&
+        // $FlowFixMe[incompatible-use] - Using accessibilityControls as Ref for backcompat, not typed
+        // $FlowFixMe[prop-missing]
+        accessibilityControls.current !== null
+      ) {
+        warnOnce(
+          'accessibilityControlsRef',
+          'accessibilityControls should be specified as a string matching the nativeID of the target component.  Support of specifying accessibilityControls using a ref is deprecated and will be removed in a future release',
+        );
+        // $FlowFixMe[incompatible-use] - Using accessibilityControls as Ref for backcompat, not typed
+        // $FlowFixMe[prop-missing]
+        setControlsTarget(findNodeHandle(accessibilityControls.current));
+      }
+    }, [accessibilityControls]);
+
+    return (
+      <View
+        ref={forwardedRef}
+        {...rest}
+        {...(controlsTarget !== null
+          ? {accessibilityControls: controlsTarget}
+          : {})}
+        {...(labeledByTarget !== null
+          ? {accessibilityLabeledBy: labeledByTarget}
+          : {})}
+        // $FlowFixMe[exponential-spread]
+        {...(describedByTarget !== null
+          ? // $FlowFixMe[exponential-spread]
+            {accessibilityDescribedBy: describedByTarget}
+          : // $FlowFixMe[exponential-spread]
+            typeof accessibilityDescribedBy === 'string'
+            ? {accessibilityDescribedBy}
+            : {})}
+        {...(typeof accessibilityControls === 'string'
+          ? {accessibilityControls}
+          : {})}
+      />
+    );
+  },
+);
+
+ViewWin32.displayName = 'ViewWin32';
+
+module.exports = ViewWin32;

package/Libraries/Core/Devtools/getDevServer.js

@@ -1,22 +1,22 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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 strict
  * @format
- * @flow
  */
 
-'use strict';
-
 import NativeSourceCode from '../../NativeModules/specs/NativeSourceCode';
 
 let _cachedDevServerURL: ?string;
+let _cachedFullBundleURL: ?string;
 const FALLBACK = 'http://localhost:8081/';
 
 type DevServerInfo = {
   url: string,
+  fullBundleUrl: ?string,
   bundleLoadedFromServer: boolean,
   ...
 };
@@ -25,18 +25,17 @@ type DevServerInfo = {
  * Many RN development tools rely on the development server (packager) running
  * @return URL to packager with trailing slash
  */
-function getDevServer(): DevServerInfo {
+export default function getDevServer(): DevServerInfo {
   if (_cachedDevServerURL === undefined) {
-    const match = NativeSourceCode.getConstants().scriptURL.match(
-      /^https?:\/\/.*?\//,
-    );
+    const scriptUrl = NativeSourceCode.getConstants().scriptURL;
+    const match = scriptUrl.match(/^https?:\/\/.*?\//);
     _cachedDevServerURL = match ? match[0] : null;
+    _cachedFullBundleURL = match ? scriptUrl : null;
   }
 
   return {
-    url: _cachedDevServerURL || FALLBACK,
+    url: _cachedDevServerURL ?? FALLBACK,
+    fullBundleUrl: _cachedFullBundleURL,
     bundleLoadedFromServer: _cachedDevServerURL !== null,
   };
 }
-
-module.exports = getDevServer;

package/Libraries/Core/Devtools/loadBundleFromServer.js

@@ -0,0 +1,196 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+import Networking from '../../Network/RCTNetworking';
+import DevLoadingView from '../../Utilities/DevLoadingView';
+import HMRClient from '../../Utilities/HMRClient';
+import getDevServer from './getDevServer';
+
+declare var global: {globalEvalWithSourceUrl?: (string, string) => mixed, ...};
+
+let pendingRequests = 0;
+
+const cachedPromisesByUrl = new Map<string, Promise<void>>();
+
+export class LoadBundleFromServerError extends Error {
+  url: string;
+  isTimeout: boolean;
+  constructor(
+    message: string,
+    url: string,
+    isTimeout: boolean,
+    options?: {cause: mixed, ...},
+  ): void {
+    super(message, options);
+    this.url = url;
+    this.isTimeout = isTimeout;
+    this.name = 'LoadBundleFromServerError';
+  }
+}
+
+export class LoadBundleFromServerRequestError extends LoadBundleFromServerError {
+  constructor(
+    message: string,
+    url: string,
+    isTimeout: boolean,
+    options?: {cause: mixed, ...},
+  ): void {
+    super(message, url, isTimeout, options);
+    this.name = 'LoadBundleFromServerRequestError';
+  }
+}
+
+function asyncRequest(
+  url: string,
+): Promise<{body: string, headers: {[string]: string}}> {
+  let id = null;
+  let responseText = null;
+  let headers = null;
+  let dataListener;
+  let completeListener;
+  let responseListener;
+  let incrementalDataListener;
+  return new Promise<{body: string, headers: {[string]: string}}>(
+    (resolve, reject) => {
+      dataListener = Networking.addListener(
+        'didReceiveNetworkData',
+        ([requestId, response]) => {
+          if (requestId === id) {
+            responseText = response;
+          }
+        },
+      );
+      incrementalDataListener = Networking.addListener(
+        'didReceiveNetworkIncrementalData',
+        ([requestId, data]) => {
+          if (requestId === id) {
+            if (responseText != null) {
+              responseText += data;
+            } else {
+              responseText = data;
+            }
+          }
+        },
+      );
+      responseListener = Networking.addListener(
+        'didReceiveNetworkResponse',
+        ([requestId, status, responseHeaders]) => {
+          if (requestId === id) {
+            headers = responseHeaders;
+          }
+        },
+      );
+      completeListener = Networking.addListener(
+        'didCompleteNetworkResponse',
+        ([requestId, errorMessage, isTimeout]) => {
+          if (requestId === id) {
+            if (errorMessage) {
+              reject(
+                new LoadBundleFromServerRequestError(
+                  'Could not load bundle',
+                  url,
+                  isTimeout,
+                  {
+                    cause: errorMessage,
+                  },
+                ),
+              );
+            } else {
+              //$FlowFixMe[incompatible-call]
+              resolve({body: responseText, headers});
+            }
+          }
+        },
+      );
+      Networking.sendRequest(
+        'GET',
+        'asyncRequest',
+        url,
+        {},
+        '',
+        'text',
+        true,
+        0,
+        requestId => {
+          id = requestId;
+        },
+        true,
+      );
+    },
+  ).finally(() => {
+    dataListener?.remove();
+    completeListener?.remove();
+    responseListener?.remove();
+    incrementalDataListener?.remove();
+  });
+}
+
+function buildUrlForBundle(bundlePathAndQuery: string) {
+  const {url: serverUrl} = getDevServer();
+  return (
+    serverUrl.replace(/\/+$/, '') + '/' + bundlePathAndQuery.replace(/^\/+/, '')
+  );
+}
+
+export default function loadBundleFromServer(
+  bundlePathAndQuery: string,
+): Promise<void> {
+  const requestUrl = buildUrlForBundle(bundlePathAndQuery);
+  let loadPromise = cachedPromisesByUrl.get(requestUrl);
+
+  if (loadPromise) {
+    return loadPromise;
+  }
+  DevLoadingView.showMessage('Downloading...', 'load');
+  ++pendingRequests;
+
+  loadPromise = asyncRequest(requestUrl)
+    .then<void>(({body, headers}) => {
+      if (
+        headers['Content-Type'] != null &&
+        headers['Content-Type'].indexOf('application/json') >= 0
+      ) {
+        // Errors are returned as JSON.
+        throw new LoadBundleFromServerError(
+          'Could not load bundle',
+          bundlePathAndQuery,
+          false, // isTimeout
+          {
+            cause:
+              JSON.parse(body).message ||
+              `Unknown error fetching '${bundlePathAndQuery}'`,
+          },
+        );
+      }
+
+      HMRClient.registerBundle(requestUrl);
+
+      // Some engines do not support `sourceURL` as a comment. We expose a
+      // `globalEvalWithSourceUrl` function to handle updates in that case.
+      if (global.globalEvalWithSourceUrl) {
+        global.globalEvalWithSourceUrl(body, requestUrl);
+      } else {
+        // eslint-disable-next-line no-eval
+        eval(body);
+      }
+    })
+    .catch<void>(e => {
+      cachedPromisesByUrl.delete(requestUrl);
+      throw e;
+    })
+    .finally(() => {
+      if (!--pendingRequests) {
+        DevLoadingView.hide();
+      }
+    });
+
+  cachedPromisesByUrl.set(requestUrl, loadPromise);
+  return loadPromise;
+}

package/Libraries/Core/Devtools/loadBundleFromServer.win32.js

@@ -0,0 +1,197 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+import Networking from '../../Network/RCTNetworking';
+import DevLoadingView from '../../Utilities/DevLoadingView';
+import HMRClient from '../../Utilities/HMRClient';
+import getDevServer from './getDevServer';
+
+declare var global: {globalEvalWithSourceUrl?: (string, string) => mixed, ...};
+
+let pendingRequests = 0;
+
+const cachedPromisesByUrl = new Map<string, Promise<void>>();
+
+export class LoadBundleFromServerError extends Error {
+  url: string;
+  isTimeout: boolean;
+  constructor(
+    message: string,
+    url: string,
+    isTimeout: boolean,
+    options?: {cause: mixed, ...},
+  ): void {
+    super(message, options);
+    this.url = url;
+    this.isTimeout = isTimeout;
+    this.name = 'LoadBundleFromServerError';
+  }
+}
+
+export class LoadBundleFromServerRequestError extends LoadBundleFromServerError {
+  constructor(
+    message: string,
+    url: string,
+    isTimeout: boolean,
+    options?: {cause: mixed, ...},
+  ): void {
+    super(message, url, isTimeout, options);
+    this.name = 'LoadBundleFromServerRequestError';
+  }
+}
+
+function asyncRequest(
+  url: string,
+): Promise<{body: string, headers: {[string]: string}}> {
+  let id = null;
+  let responseText = null;
+  let headers = null;
+  let dataListener;
+  let completeListener;
+  let responseListener;
+  let incrementalDataListener;
+  return new Promise<{body: string, headers: {[string]: string}}>(
+    (resolve, reject) => {
+      dataListener = Networking.addListener(
+        'didReceiveNetworkData',
+        ([requestId, response]) => {
+          if (requestId === id) {
+            responseText = response;
+          }
+        },
+      );
+      incrementalDataListener = Networking.addListener(
+        'didReceiveNetworkIncrementalData',
+        ([requestId, data]) => {
+          if (requestId === id) {
+            if (responseText != null) {
+              responseText += data;
+            } else {
+              responseText = data;
+            }
+          }
+        },
+      );
+      responseListener = Networking.addListener(
+        'didReceiveNetworkResponse',
+        ([requestId, status, responseHeaders]) => {
+          if (requestId === id) {
+            headers = responseHeaders;
+          }
+        },
+      );
+      completeListener = Networking.addListener(
+        'didCompleteNetworkResponse',
+        ([requestId, errorMessage, isTimeout]) => {
+          if (requestId === id) {
+            if (errorMessage) {
+              reject(
+                new LoadBundleFromServerRequestError(
+                  'Could not load bundle',
+                  url,
+                  isTimeout,
+                  {
+                    cause: errorMessage,
+                  },
+                ),
+              );
+            } else {
+              //$FlowFixMe[incompatible-call]
+              resolve({body: responseText, headers});
+            }
+          }
+        },
+      );
+      Networking.sendRequest(
+        'GET',
+        'asyncRequest',
+        url,
+        {},
+        '',
+        'text',
+        true,
+        0,
+        requestId => {
+          id = requestId;
+        },
+        true,
+      );
+    },
+  ).finally(() => {
+    dataListener?.remove();
+    completeListener?.remove();
+    responseListener?.remove();
+    incrementalDataListener?.remove();
+  });
+}
+
+function buildUrlForBundle(bundlePathAndQuery: string) {
+  const {url: serverUrl} = getDevServer();
+  return (
+    serverUrl.replace(/\/+$/, '') + '/' + bundlePathAndQuery.replace(/^\/+/, '')
+  );
+}
+
+export default function loadBundleFromServer(
+  bundlePathAndQuery: string,
+): Promise<void> {
+  const requestUrl = buildUrlForBundle(bundlePathAndQuery);
+  let loadPromise = cachedPromisesByUrl.get(requestUrl);
+
+  if (loadPromise) {
+    return loadPromise;
+  }
+  DevLoadingView.showMessage('Downloading...', 'load');
+  ++pendingRequests;
+
+  loadPromise = asyncRequest(requestUrl)
+    .then<void>(({body, headers}) => {
+      if (
+        headers['Content-Type'] != null &&
+        headers['Content-Type'].indexOf('application/json') >= 0
+      ) {
+        // Errors are returned as JSON.
+        throw new LoadBundleFromServerError(
+          'Could not load bundle',
+          bundlePathAndQuery,
+          false, // isTimeout
+          {
+            cause:
+              JSON.parse(body).message ||
+              `Unknown error fetching '${bundlePathAndQuery}'`,
+          },
+        );
+      }
+
+      HMRClient.registerBundle(requestUrl);
+
+      // Some engines do not support `sourceURL` as a comment. We expose a
+      // `globalEvalWithSourceUrl` function to handle updates in that case.
+      if (global.globalEvalWithSourceUrl) {
+        global.globalEvalWithSourceUrl(body, requestUrl);
+      } else {
+        // [Windows #12704 - CodeQL patch]
+        // eslint-disable-next-line no-eval
+        eval(body); // CodeQL [js/eval-usage] Debug only. Developer inner loop.
+      }
+    })
+    .catch<void>(e => {
+      cachedPromisesByUrl.delete(requestUrl);
+      throw e;
+    })
+    .finally(() => {
+      if (!--pendingRequests) {
+        DevLoadingView.hide();
+      }
+    });
+
+  cachedPromisesByUrl.set(requestUrl, loadPromise);
+  return loadPromise;
+}