@office-iss/react-native-win32 0.72.0-preview.3 → 0.72.0-preview.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.72.0-preview.3",
+  "version": "0.72.0-preview.5",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "repository": {
     "type": "git",
@@ -17,9 +17,8 @@
     "flow-check": "flow check",
     "lint:fix": "rnw-scripts lint:fix",
     "lint": "rnw-scripts lint",
-    "run-win32-dev-web": "npx @office-iss/rex-win32@0.68.33-devmain.16427.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain --useWebDebugger",
-    "run-win32-devmain": "npx @office-iss/rex-win32@0.68.33-devmain.16427.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain",
-    "run-win32": "npx @office-iss/rex-win32@0.68.33-devmain.16427.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useWebDebugger",
+    "run-win32-devmain": "npx @office-iss/rex-win32@0.71.15-devmain.16607.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain --useDirectDebugger --useFastRefresh",
+    "run-win32": "npx @office-iss/rex-win32@0.71.15-devmain.16607.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDirectDebugger --useFastRefresh",
     "start": "react-native start --projectRoot ../react-native-win32-tester",
     "test": "jest",
     "validate-overrides": "react-native-platform-override validate"
@@ -27,9 +26,9 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@jest/create-cache-key-function": "^29.2.1",
-    "@react-native-community/cli": "11.2.0",
-    "@react-native-community/cli-platform-android": "11.2.0",
-    "@react-native-community/cli-platform-ios": "11.2.0",
+    "@react-native-community/cli": "11.2.3",
+    "@react-native-community/cli-platform-android": "11.2.3",
+    "@react-native-community/cli-platform-ios": "11.2.3",
     "@react-native/assets": "1.0.0",
     "@react-native/assets-registry": "^0.72.0",
     "@react-native/codegen": "^0.72.3",
@@ -41,15 +40,15 @@
     "anser": "^1.4.9",
     "art": "^0.10.0",
     "base64-js": "^1.1.2",
-    "deprecated-react-native-prop-types": "^4.0.0",
+    "deprecated-react-native-prop-types": "^4.1.0",
     "event-target-shim": "^5.0.1",
     "flow-enums-runtime": "^0.0.5",
     "invariant": "^2.2.4",
     "jest-environment-node": "^29.2.1",
     "jsc-android": "^250231.0.0",
     "memoize-one": "^5.0.0",
-    "metro-runtime": "0.76.2",
-    "metro-source-map": "0.76.2",
+    "metro-runtime": "0.76.4",
+    "metro-source-map": "0.76.4",
     "mkdirp": "^0.5.1",
     "nullthrows": "^1.1.1",
     "pretty-format": "^26.5.2",
@@ -83,7 +82,7 @@
     "just-scripts": "^1.3.3",
     "prettier": "^2.4.1",
     "react": "18.2.0",
-    "react-native": "0.72.0-rc.1",
+    "react-native": "0.72.0-rc.3",
     "react-native-platform-override": "^1.9.4",
     "typescript": "^4.9.5"
   },

package/src/Libraries/Components/Button/ButtonWin32.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import RN = require('react-native');
-import type { IViewWin32Props } from '../View/ViewPropTypes.win32';
+import type { IViewWin32Props } from '../View/ViewPropTypes';
 import type { ITextWin32Props } from '../Text/TextWin32.Props';
 import type { IButtonWin32Props } from './ButtonWin32.Props';
 

package/src/Libraries/Components/Text/TextWin32.Props.ts

@@ -1,5 +1,5 @@
 import RN = require('react-native');
-import type { IKeyboardEvent, IHandledKeyboardEvent } from '../View/ViewPropTypes.win32';
+import type { IKeyboardEvent, IHandledKeyboardEvent } from '../View/ViewPropTypes';
 
 /**
  * Role-based text style names.

package/src/Libraries/Components/Touchable/Tests/TouchableWin32Test.tsx

@@ -5,7 +5,7 @@ import {NativeSyntheticEvent, StyleSheet, Text, ViewStyle } from 'react-native';
 import {Insets} from 'react-native/types/public/Insets';
 import { TextWin32 } from '../../Text/TextWin32';
 import { ViewWin32 } from '../../View/ViewWin32';
-import { IViewWin32Props, IKeyboardEvent } from '../../View/ViewPropTypes.win32';
+import { IViewWin32Props, IKeyboardEvent } from '../../View/ViewPropTypes';
 import { TouchableWin32 } from '../TouchableWin32';
 import { IPressEvent, IRenderChild } from '../TouchableWin32.Types';
 import { ITouchableWin32State } from '../TouchableWin32.Props';

package/src/Libraries/Components/Touchable/TouchableWin32.Props.tsx

@@ -2,7 +2,7 @@ import {ViewStyle} from 'react-native';
 import {Insets} from 'react-native/types/public/Insets';
 
 import { IPressEvent, IRenderChild, IRenderStyle } from './TouchableWin32.Types';
-import { IViewWin32Props, IKeyboardEvent } from '../View/ViewPropTypes.win32';
+import { IViewWin32Props, IKeyboardEvent } from '../View/ViewPropTypes';
 
 export interface ITouchableWin32State {
   isPressed: boolean;

package/src/Libraries/Components/Touchable/TouchableWin32.tsx

@@ -25,7 +25,7 @@ import {
   IStateConditions,
   ITransitions,
 } from './TouchableWin32.Types';
-import { IKeyboardEvent } from '../View/ViewPropTypes.win32';
+import { IKeyboardEvent } from '../View/ViewPropTypes';
 
 const BoundingDimensions = require('./BoundingDimensions');
 const Position = require('./Position');

package/{Libraries/Components/View/ViewPropTypes.win32.d.ts → src/Libraries/Components/View/ViewPropTypes.d.ts}

@@ -184,6 +184,13 @@ export type Cursor =
   | 'we-resize'
   | 'text';
 
+export namespace EventPhase {
+  export const None = 0;
+  export const Capturing = 1;
+  export const AtTarget = 2;
+  export const Bubbling = 3;
+}
+
 export interface INativeKeyboardEvent {
   altKey: boolean;
   ctrlKey: boolean;
@@ -203,7 +210,13 @@ type PartiallyRequired<T, Keys extends keyof T = keyof T> = Pick<
 export type IHandledKeyboardEvent = PartiallyRequired<
   INativeKeyboardEvent,
   'key'
->;
+> & {
+  eventPhase?:
+    | EventPhase.None
+    | EventPhase.Capturing
+    | EventPhase.AtTarget
+    | EventPhase.Bubbling;
+};
 // Win32]
 
 export interface ViewPropsWin32 {

package/src/Libraries/Components/View/ViewWin32.d.ts

@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from 'react-native/types/private/Utilities';
-import {ViewProps} from './ViewPropTypes.win32';
+import {ViewProps} from './ViewPropTypes';
 import {NativeMethods} from 'react-native/types/public/ReactNativeTypes';
 
 /**

package/src/Libraries/platform-types.d.ts

@@ -5,12 +5,12 @@
 *        need to also be added to index.win32.js
 */
 
-import {IViewWin32Props as IViewWin32PropsOnly} from './Components/View/ViewPropTypes.win32';
-import { AccessibilityPropsWin32 } from '@office-iss/react-native-win32/Libraries/Components/View/ViewAccessibility.win32';
-export { AccessibilityPropsWin32 } from '@office-iss/react-native-win32/Libraries/Components/View/ViewAccessibility.win32';
+import {IViewWin32Props as IViewWin32PropsOnly} from './Components/View/ViewPropTypes';
+import { AccessibilityPropsWin32 } from '@office-iss/react-native-win32/Libraries/Components/View/ViewAccessibility';
+export { AccessibilityPropsWin32 } from '@office-iss/react-native-win32/Libraries/Components/View/ViewAccessibility';
 export type IViewWin32Props = IViewWin32PropsOnly & AccessibilityPropsWin32;
 export {ViewWin32} from './Components/View/ViewWin32';
-export {IKeyboardEvent, IHandledKeyboardEvent} from './Components/View/ViewPropTypes.win32';
+export {IKeyboardEvent, IHandledKeyboardEvent, EventPhase} from './Components/View/ViewPropTypes';
 import {ITextWin32Props as ITextWin32PropsOnly} from './Components/Text/TextWin32.Props';
 export type ITextWin32Props = ITextWin32PropsOnly & AccessibilityPropsWin32;
 export {TextWin32TextStyle } from './Components/Text/TextWin32.Props';
@@ -18,7 +18,7 @@ export {TextWin32} from './Components/Text/TextWin32';
 export {IButtonWin32Props, IButtonWin32Style} from './Components/Button/ButtonWin32.Props';
 export {ButtonWin32} from './Components/Button/ButtonWin32';
 export {GradientColorStop, GradientColorValueWin32, ColorGradientWin32} from './StyleSheet/PlatformColorValueTypesWin32';
-export {ITouchableWin32Props} from './Components/Touchable/TouchableWin32.Props';
+export {ITouchableWin32Props, ITouchableWin32State} from './Components/Touchable/TouchableWin32.Props';
 export * from './Components/Touchable/TouchableWin32.Types';
 export * from './Components/Touchable/TouchableWin32';
 export * from './PersonaCoin/PersonaCoin';

package/types/index.d.ts

@@ -147,6 +147,10 @@ export * from '../Libraries/Utilities/Platform';
 export * from '../Libraries/Vibration/Vibration';
 export * from '../Libraries/YellowBox/YellowBoxDeprecated';
 export * from '../Libraries/vendor/core/ErrorUtils';
+export {
+  EmitterSubscription,
+  EventSubscription,
+} from '../Libraries/vendor/emitter/EventEmitter';
 
 export * from './public/DeprecatedPropertiesAlias';
 export * from './public/Insets';

package/Libraries/Components/Text/Tests/TextWin32Test.d.ts

@@ -1,8 +0,0 @@
-export declare const title = "TextWin32";
-export declare const displayName = "TextWin32";
-export declare const description = "TextWin32 Examples and Tests";
-export declare const examples: {
-    title: string;
-    description: string;
-    render(): JSX.Element;
-}[];

package/Libraries/Components/Text/Tests/TextWin32Test.js

@@ -1,120 +0,0 @@
-'use strict';
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.examples = exports.description = exports.displayName = exports.title = void 0;
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const TextWin32_1 = require("../../Text/TextWin32");
-const ViewWin32_1 = require("../../View/ViewWin32");
-// Disabling no-jsx-lambda so functional components are more convenient to use
-const TextRunsTest = () => {
-    return (react_1.default.createElement(react_native_1.View, { focusable: true },
-        react_1.default.createElement(TextWin32_1.TextWin32, null,
-            react_1.default.createElement(TextWin32_1.TextWin32, null, "Text With "),
-            react_1.default.createElement(TextWin32_1.TextWin32, null, "Multiple Text "),
-            react_1.default.createElement(TextWin32_1.TextWin32, null, "Children [Runs]"))));
-};
-const FocusableTextTest = () => {
-    return (react_1.default.createElement(ViewWin32_1.ViewWin32, null,
-        react_1.default.createElement(TextWin32_1.TextWin32, { focusable: true }, "This TextWin32 demonstrates focusable")));
-};
-const SelectableTextTest = () => {
-    return (react_1.default.createElement(ViewWin32_1.ViewWin32, null,
-        react_1.default.createElement(TextWin32_1.TextWin32, { selectable: true }, "This TextWin32 demonstrates selectable")));
-};
-const TextStyleTest = () => {
-    return (react_1.default.createElement(ViewWin32_1.ViewWin32, null,
-        react_1.default.createElement(TextWin32_1.TextWin32, { textStyle: 'MediumBold' }, "Normal Text Display")));
-};
-const TooltipTextTest = () => {
-    return (react_1.default.createElement(ViewWin32_1.ViewWin32, null,
-        react_1.default.createElement(TextWin32_1.TextWin32, { tooltip: "Example Tooltip" }, "This TextWin32 demonstrates a tooltip")));
-};
-const TextPromotionTest = () => {
-    let FocusabilityState;
-    (function (FocusabilityState) {
-        FocusabilityState[FocusabilityState["NoFocus"] = 0] = "NoFocus";
-        FocusabilityState[FocusabilityState["Focusable"] = 1] = "Focusable";
-        FocusabilityState[FocusabilityState["Selectable"] = 2] = "Selectable";
-    })(FocusabilityState || (FocusabilityState = {}));
-    const [focusabilityState, setFocusabilityState] = react_1.default.useState(FocusabilityState.NoFocus);
-    return (react_1.default.createElement(ViewWin32_1.ViewWin32, null,
-        react_1.default.createElement(react_native_1.Button, { title: "Click to Promote Focusability", onPress: () => {
-                if (focusabilityState === FocusabilityState.NoFocus) {
-                    setFocusabilityState(FocusabilityState.Focusable);
-                }
-                else if (focusabilityState === FocusabilityState.Focusable) {
-                    setFocusabilityState(FocusabilityState.Selectable);
-                }
-            } }),
-        react_1.default.createElement(TextWin32_1.TextWin32, { focusable: focusabilityState === FocusabilityState.Focusable, selectable: focusabilityState === FocusabilityState.Selectable }, "This text is currently..."),
-        react_1.default.createElement(TextWin32_1.TextWin32, null, (focusabilityState === FocusabilityState.NoFocus) ? 'No Focusability' :
-            (focusabilityState === FocusabilityState.Focusable) ? 'Focusable' :
-                'Selectable')));
-};
-const BlurringAndFocusingTextTest = () => {
-    const [isFocusableFocused, setIsFocusableFocused] = react_1.default.useState(false);
-    const [isSelectableFocused, setIsSelectableFocused] = react_1.default.useState(false);
-    return (react_1.default.createElement(react_native_1.View, null,
-        react_1.default.createElement(TextWin32_1.TextWin32, { focusable: true, onBlur: () => setIsFocusableFocused(false), onFocus: () => setIsFocusableFocused(true) }, "Focusable text is focused:"),
-        react_1.default.createElement(TextWin32_1.TextWin32, { textStyle: isFocusableFocused ? 'MediumBold' : 'MediumStandard' }, isFocusableFocused ? 'true' : 'false'),
-        react_1.default.createElement(TextWin32_1.TextWin32, { selectable: true, onBlur: () => setIsSelectableFocused(false), onFocus: () => setIsSelectableFocused(true) }, "Selectable text is focused:"),
-        react_1.default.createElement(TextWin32_1.TextWin32, { textStyle: isSelectableFocused ? 'MediumBold' : 'MediumStandard' }, isSelectableFocused ? 'true' : 'false')));
-};
-exports.title = 'TextWin32';
-exports.displayName = 'TextWin32';
-exports.description = 'TextWin32 Examples and Tests';
-exports.examples = [
-    {
-        title: 'Text Runs Example',
-        description: 'text runs in action',
-        render() {
-            return (react_1.default.createElement(TextRunsTest, null));
-        },
-    },
-    {
-        title: 'Focusable Example',
-        description: 'focusable in action',
-        render() {
-            return (react_1.default.createElement(FocusableTextTest, null));
-        },
-    },
-    {
-        title: 'Selectable Example',
-        description: 'selectable in action',
-        render() {
-            return (react_1.default.createElement(SelectableTextTest, null));
-        },
-    },
-    {
-        title: 'TextStyle Example',
-        description: 'TextStyles in action',
-        render() {
-            return (react_1.default.createElement(TextStyleTest, null));
-        },
-    },
-    {
-        title: 'Tooltip Example',
-        description: 'tooltips in action',
-        render() {
-            return (react_1.default.createElement(TooltipTextTest, null));
-        },
-    },
-    {
-        title: 'TextPromotion Example',
-        description: 'dynamic increases in focusability in action',
-        render() {
-            return (react_1.default.createElement(TextPromotionTest, null));
-        },
-    },
-    {
-        title: 'Focus and Blur Example',
-        description: 'onFocus/onBlur in action',
-        render() {
-            return (react_1.default.createElement(BlurringAndFocusingTextTest, null));
-        },
-    },
-];
-//# sourceMappingURL=TextWin32Test.js.map

package/Libraries/Components/Text/Tests/TextWin32Test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextWin32Test.js","sourceRoot":"","sources":["../../../../src/Libraries/Components/Text/Tests/TextWin32Test.tsx"],"names":[],"mappings":"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","sourcesContent":["'use strict';\nimport React from 'react'\nimport { Button, View } from 'react-native';\nimport { TextWin32 } from '../../Text/TextWin32';\nimport { ViewWin32 } from '../../View/ViewWin32';\n\n// Disabling no-jsx-lambda so functional components are more convenient to use\n\nconst TextRunsTest: React.FC<{}> = () => {\n  return (\n    <View focusable>\n      <TextWin32>\n        <TextWin32>Text With </TextWin32>\n        <TextWin32>Multiple Text </TextWin32>\n        <TextWin32>Children [Runs]</TextWin32>\n      </TextWin32>\n    </View>\n  );\n};\n\nconst FocusableTextTest: React.FC<{}> = () => {\n  return (\n    <ViewWin32>\n      <TextWin32 focusable>This TextWin32 demonstrates focusable</TextWin32>\n    </ViewWin32>\n  );\n};\n\nconst SelectableTextTest: React.FC<{}> = () => {\n  return (\n    <ViewWin32>\n      <TextWin32 selectable>This TextWin32 demonstrates selectable</TextWin32>\n    </ViewWin32>\n  );\n};\n\nconst TextStyleTest: React.FC<{}> = () => {\n  return (\n    <ViewWin32>\n      <TextWin32 textStyle={'MediumBold'}>Normal Text Display</TextWin32>\n    </ViewWin32>\n  );\n};\n\nconst TooltipTextTest: React.FC<{}> = () => {\n  return (\n    <ViewWin32>\n      <TextWin32 tooltip=\"Example Tooltip\">This TextWin32 demonstrates a tooltip</TextWin32>\n    </ViewWin32>\n  );\n};\n\nconst TextPromotionTest: React.FC<{}> = () => {\n  enum FocusabilityState {\n    NoFocus,\n    Focusable,\n    Selectable,\n  }\n  const [focusabilityState, setFocusabilityState] = React.useState(FocusabilityState.NoFocus);\n  return (\n    <ViewWin32>\n      <Button\n      title=\"Click to Promote Focusability\"\n      onPress={() => \n        {\n          if (focusabilityState === FocusabilityState.NoFocus)\n          {\n            setFocusabilityState(FocusabilityState.Focusable);\n          }\n          else if (focusabilityState === FocusabilityState.Focusable)\n          {\n            setFocusabilityState(FocusabilityState.Selectable);\n          }\n        }}  />\n      <TextWin32\n        focusable={focusabilityState === FocusabilityState.Focusable}\n        selectable={focusabilityState === FocusabilityState.Selectable}\n      >\n        This text is currently...\n      </TextWin32>\n      <TextWin32>\n        {(focusabilityState === FocusabilityState.NoFocus) ? 'No Focusability' : \n         (focusabilityState === FocusabilityState.Focusable) ? 'Focusable' :\n         'Selectable'}\n      </TextWin32>\n    </ViewWin32>\n  );\n};\n\nconst BlurringAndFocusingTextTest: React.FC<{}> = () => {\n  const [isFocusableFocused, setIsFocusableFocused] = React.useState(false);\n  const [isSelectableFocused, setIsSelectableFocused] = React.useState(false);\n  return (\n    <View>\n      <TextWin32\n        focusable\n        onBlur={() => setIsFocusableFocused(false)}\n        onFocus={() => setIsFocusableFocused(true)}>Focusable text is focused:</TextWin32>\n        <TextWin32\n        textStyle={isFocusableFocused ? 'MediumBold' : 'MediumStandard'}>{isFocusableFocused ? 'true' : 'false'}</TextWin32>\n      <TextWin32\n        selectable\n        onBlur={() => setIsSelectableFocused(false)}\n        onFocus={() => setIsSelectableFocused(true)}>Selectable text is focused:</TextWin32>\n        <TextWin32\n        textStyle={isSelectableFocused ? 'MediumBold' : 'MediumStandard'}>{isSelectableFocused ? 'true' : 'false'}</TextWin32>\n    </View>\n  );\n};\n\nexport const title = 'TextWin32';\nexport const displayName = 'TextWin32';\nexport const description = 'TextWin32 Examples and Tests';\nexport const examples = [\n    {\n      title: 'Text Runs Example',\n      description: 'text runs in action',\n      render(): JSX.Element {\n        return (<TextRunsTest />);\n      },\n    },\n    {\n      title: 'Focusable Example',\n      description: 'focusable in action',\n      render(): JSX.Element {\n        return (<FocusableTextTest />);\n      },\n    },\n    {\n      title: 'Selectable Example',\n      description: 'selectable in action',\n      render(): JSX.Element {\n        return (<SelectableTextTest />);\n      },\n    },\n    {\n      title: 'TextStyle Example',\n      description: 'TextStyles in action',\n      render(): JSX.Element {\n        return (<TextStyleTest />);\n      },\n    },\n    {\n      title: 'Tooltip Example',\n      description: 'tooltips in action',\n      render(): JSX.Element {\n        return (<TooltipTextTest />);\n      },\n    },\n    {\n      title: 'TextPromotion Example',\n      description: 'dynamic increases in focusability in action',\n      render(): JSX.Element {\n        return (<TextPromotionTest />);\n      },\n    },\n    {\n      title: 'Focus and Blur Example',\n      description: 'onFocus/onBlur in action',\n      render(): JSX.Element {\n        return (<BlurringAndFocusingTextTest />);\n      },\n    },\n  ];"]}

package/Libraries/Components/View/Tests/ViewWin32Test.d.ts

@@ -1,8 +0,0 @@
-export declare const title = "ViewWin32";
-export declare const displayName = "ViewWin32 Example";
-export declare const description = "All the stock View props plus Win32 specific ones";
-export declare const examples: {
-    title: string;
-    description: string;
-    render(): JSX.Element;
-}[];

package/Libraries/Components/View/Tests/ViewWin32Test.js

@@ -1,233 +0,0 @@
-'use strict';
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.examples = exports.description = exports.displayName = exports.title = void 0;
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const react_native_win32_1 = require("@office-iss/react-native-win32");
-const styles = react_native_1.StyleSheet.create({
-    border: {
-        borderStyle: 'dotted',
-        borderColor: 'black',
-    },
-    keyComponentRoot: {
-        borderWidth: 2,
-        flexDirection: 'row',
-        marginVertical: 5,
-        backgroundColor: 'whitesmoke',
-        justifyContent: 'space-around',
-    },
-    keyEnterVisualizer: {
-        margin: 5,
-        alignItems: 'center',
-        minWidth: 100,
-        minHeight: 30,
-    },
-    blackbox: { height: 30, width: 30, borderColor: 'black', borderWidth: 3 },
-});
-function FocusMoverTestComponent() {
-    const [hasFocus, setHasFocus] = react_1.default.useState(false);
-    const labelId = react_1.default.useId();
-    const ref = react_1.default.useRef(null);
-    const onBtnPress = () => {
-        if (ref.current) {
-            ref.current.focus();
-        }
-    };
-    return (react_1.default.createElement(react_native_win32_1.ViewWin32, null,
-        react_1.default.createElement(react_native_win32_1.ViewWin32, { nativeID: labelId, accessibilityLabel: "separate label for test", accessibilityItemType: "Comment" }),
-        react_1.default.createElement(react_native_win32_1.ViewWin32, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 } },
-            react_1.default.createElement(react_native_1.TouchableHighlight, { onPress: onBtnPress },
-                react_1.default.createElement(react_native_win32_1.ViewWin32, { accessibilityLabelledBy: labelId, style: styles.blackbox })),
-            react_1.default.createElement(react_native_win32_1.ViewWin32, { ref: ref, focusable: true, style: hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), enableFocusRing: false },
-                react_1.default.createElement(react_native_1.Text, null, hasFocus ? 'Focus: Yes' : 'Focus: No')))));
-}
-const handledNativeKeyboardEvents = [
-    { key: 'ArrowDown' },
-    { key: 'ArrowUp' },
-    { key: 'ArrowLeft' },
-    { key: 'ArrowRight' },
-    { key: 'Tab' },
-];
-class KeyboardTestComponent extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this._onFocus = () => {
-            this.setState({
-                hasFocus: true,
-            });
-        };
-        this._onBlur = () => {
-            this.setState({
-                hasFocus: false,
-            });
-        };
-        this._onKeyUp = (ev) => {
-            this.setState({ lastKeyUp: ev.nativeEvent.key, lastKeyDown: null });
-        };
-        this._onKeyDown = (ev) => {
-            this.setState({ lastKeyDown: ev.nativeEvent.key, lastKeyUp: null });
-        };
-        this.state = {
-            hasFocus: false,
-            lastKeyDown: null,
-            lastKeyUp: null,
-        };
-    }
-    render() {
-        return (react_1.default.createElement(react_native_win32_1.ViewWin32, { keyDownEvents: handledNativeKeyboardEvents, keyUpEvents: handledNativeKeyboardEvents },
-            react_1.default.createElement(react_native_win32_1.ViewWin32, { style: this.state.hasFocus ? [styles.keyComponentRoot, styles.border] : styles.keyComponentRoot, focusable: true, onKeyUp: this._onKeyUp, onKeyDown: this._onKeyDown, onFocus: this._onFocus, onBlur: this._onBlur, enableFocusRing: false },
-                react_1.default.createElement(react_native_win32_1.ViewWin32, { style: styles.keyEnterVisualizer },
-                    react_1.default.createElement(react_native_1.Text, null, "OnKeyDown"),
-                    react_1.default.createElement(react_native_1.Text, null, "----"),
-                    react_1.default.createElement(react_native_1.Text, null, this.state.lastKeyDown !== null ? this.state.lastKeyDown : ' ')),
-                react_1.default.createElement(react_native_win32_1.ViewWin32, { style: styles.keyEnterVisualizer },
-                    react_1.default.createElement(react_native_1.Text, null, "OnKeyUp"),
-                    react_1.default.createElement(react_native_1.Text, null, "----"),
-                    react_1.default.createElement(react_native_1.Text, null, this.state.lastKeyUp !== null ? this.state.lastKeyUp : ' ')))));
-    }
-}
-class HoverTestComponent extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this._onMouseLeave = () => {
-            this.setState({ hasFocus: false });
-        };
-        this._onMouseEnter = () => {
-            this.setState({ hasFocus: true });
-        };
-        this.state = {
-            hasFocus: false,
-        };
-    }
-    render() {
-        return (react_1.default.createElement(react_native_win32_1.ViewWin32, { onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, style: this.state.hasFocus ? [styles.blackbox, { backgroundColor: this.props.color }] : styles.blackbox }));
-    }
-}
-class HoverExample extends react_1.default.Component {
-    render() {
-        return (react_1.default.createElement(react_native_win32_1.ViewWin32, { style: { flexDirection: 'row', marginHorizontal: 75, justifyContent: 'space-around' } },
-            react_1.default.createElement(HoverTestComponent, { color: "red" }),
-            react_1.default.createElement(HoverTestComponent, { color: "orange" }),
-            react_1.default.createElement(HoverTestComponent, { color: "yellow" }),
-            react_1.default.createElement(HoverTestComponent, { color: "green" }),
-            react_1.default.createElement(HoverTestComponent, { color: "blue" }),
-            react_1.default.createElement(HoverTestComponent, { color: "indigo" }),
-            react_1.default.createElement(HoverTestComponent, { color: "violet" })));
-    }
-}
-const ToolTipExample = () => {
-    return (react_1.default.createElement(react_native_win32_1.ViewWin32, { style: {
-            backgroundColor: 'red',
-            height: 100,
-            width: 100,
-        }, tooltip: "Example tooltip", cursor: "pointer" }));
-};
-const CursorTestComponent = (props) => {
-    return (react_1.default.createElement(react_native_win32_1.ViewWin32, { style: { flexDirection: 'column' } },
-        react_1.default.createElement(react_native_1.Text, null, props.cursor),
-        react_1.default.createElement(react_native_win32_1.ViewWin32, { cursor: props.cursor, style: styles.blackbox })));
-};
-const CursorExample = () => {
-    return (react_1.default.createElement(react_native_win32_1.ViewWin32, { style: { flexDirection: 'row', justifyContent: 'space-around' } },
-        react_1.default.createElement(CursorTestComponent, { cursor: 'auto' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'default' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'help' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'nesw-resize' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'not-allowed' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'ns-resize' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'nwse-resize' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'pointer' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'wait' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'move' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'text' }),
-        react_1.default.createElement(CursorTestComponent, { cursor: 'we-resize' })));
-};
-class EnableFocusRingExample extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this._onFocus = () => {
-            this.setState({
-                hasFocus: true,
-            });
-        };
-        this._onBlur = () => {
-            this.setState({
-                hasFocus: false,
-            });
-        };
-        this.state = {
-            hasFocus: false,
-        };
-    }
-    render() {
-        return (react_1.default.createElement(react_native_win32_1.ViewWin32, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 } },
-            react_1.default.createElement(react_native_win32_1.ViewWin32, { style: {
-                    backgroundColor: 'pink',
-                    height: 100,
-                    width: 100,
-                }, enableFocusRing: true, focusable: true },
-                react_1.default.createElement(react_native_1.Text, null, "enableFocusRing set to true")),
-            react_1.default.createElement(react_native_win32_1.ViewWin32, { style: {
-                    backgroundColor: 'pink',
-                    height: 100,
-                    width: 100,
-                }, enableFocusRing: false, focusable: true, onFocus: this._onFocus, onBlur: this._onBlur },
-                react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(react_native_1.Text, null, "enableFocusRing set to false"),
-                    react_1.default.createElement(react_native_1.Text, null, this.state.hasFocus ? 'Focus: Yes' : 'Focus: No')))));
-    }
-}
-exports.title = 'ViewWin32';
-exports.displayName = 'ViewWin32 Example';
-exports.description = 'All the stock View props plus Win32 specific ones';
-exports.examples = [
-    {
-        title: 'focus() method example',
-        description: 'Each of these black boxes moves focus to the ViewWin32 on the right',
-        render() {
-            return (react_1.default.createElement(react_native_win32_1.ViewWin32, null,
-                react_1.default.createElement(FocusMoverTestComponent, null),
-                react_1.default.createElement(FocusMoverTestComponent, null),
-                react_1.default.createElement(FocusMoverTestComponent, null)));
-        },
-    },
-    {
-        title: 'KeyboardEvents example',
-        description: 'Native keyboarding has been prevented',
-        render() {
-            return react_1.default.createElement(KeyboardTestComponent, null);
-        },
-    },
-    {
-        title: 'Hover example',
-        description: 'Hover a rainbow',
-        render() {
-            return react_1.default.createElement(HoverExample, null);
-        },
-    },
-    {
-        title: 'Tooltip example',
-        description: 'Displays a tooltip on hover',
-        render() {
-            return react_1.default.createElement(ToolTipExample, null);
-        },
-    },
-    {
-        title: 'Cursor example',
-        description: 'Each of these boxes should display a different cursor',
-        render() {
-            return react_1.default.createElement(CursorExample, null);
-        },
-    },
-    {
-        title: 'EnableFocusRing example',
-        description: 'Displays focus visuals that are driven by native',
-        render() {
-            return react_1.default.createElement(EnableFocusRingExample, null);
-        },
-    },
-];
-//# sourceMappingURL=ViewWin32Test.js.map

package/Libraries/Components/View/Tests/ViewWin32Test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ViewWin32Test.js","sourceRoot":"","sources":["../../../../src/Libraries/Components/View/Tests/ViewWin32Test.tsx"],"names":[],"mappings":"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","sourcesContent":["'use strict';\nimport React from 'react'\nimport { StyleSheet, Text, TouchableHighlight } from 'react-native';\nimport { Cursor, IKeyboardEvent, IHandledKeyboardEvent, ViewWin32 } from '@office-iss/react-native-win32';\n\nconst styles = StyleSheet.create({\n  border: {\n    borderStyle: 'dotted',\n    borderColor: 'black',\n  },\n  keyComponentRoot: {\n    borderWidth: 2,\n    flexDirection: 'row',\n    marginVertical: 5,\n    backgroundColor: 'whitesmoke',\n    justifyContent: 'space-around',\n  },\n  keyEnterVisualizer: {\n    margin: 5,\n    alignItems: 'center',\n    minWidth: 100,\n    minHeight: 30,\n  },\n  blackbox: { height: 30, width: 30, borderColor: 'black', borderWidth: 3 },\n});\n\ninterface IFocusableComponentState {\n  hasFocus: boolean;\n}\n\nfunction FocusMoverTestComponent() {\n  const [hasFocus, setHasFocus] = React.useState<boolean>(false);\n\n  const labelId = React.useId();\n\n  const ref = React.useRef<ViewWin32>(null);\n  const onBtnPress = () => {\n    if (ref.current) {\n      ref.current.focus();\n    }\n  };\n\n  return (\n    <ViewWin32>\n      <ViewWin32 nativeID={labelId} accessibilityLabel=\"separate label for test\" accessibilityItemType=\"Comment\" />\n    <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>\n      <TouchableHighlight onPress={onBtnPress}>\n        <ViewWin32 accessibilityLabelledBy={labelId} style={styles.blackbox} />\n      </TouchableHighlight>\n      <ViewWin32\n        ref={ref}\n        focusable\n        style={hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }}\n        onFocus={() => setHasFocus(true)}\n        onBlur={() => setHasFocus(false)}\n        enableFocusRing={false}\n      >\n        <Text>{hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>\n      </ViewWin32>\n    </ViewWin32>\n    </ViewWin32>\n  );\n}\n\ninterface IKeyboardableComponentState {\n  lastKeyDown: string;\n  lastKeyUp: string;\n}\n\nconst handledNativeKeyboardEvents: IHandledKeyboardEvent[] = [\n  { key: 'ArrowDown' },\n  { key: 'ArrowUp' },\n  { key: 'ArrowLeft' },\n  { key: 'ArrowRight' },\n  { key: 'Tab' },\n];\n\nclass KeyboardTestComponent extends React.Component<{}, IFocusableComponentState & IKeyboardableComponentState> {\n  public constructor(props) {\n    super(props);\n    this.state = {\n      hasFocus: false,\n      lastKeyDown: null,\n      lastKeyUp: null,\n    };\n  }\n\n  public render() {\n    return (\n      <ViewWin32 keyDownEvents={handledNativeKeyboardEvents} keyUpEvents={handledNativeKeyboardEvents}>\n        <ViewWin32\n          style={this.state.hasFocus ? [styles.keyComponentRoot, styles.border] : styles.keyComponentRoot}\n          focusable\n          onKeyUp={this._onKeyUp}\n          onKeyDown={this._onKeyDown}\n          onFocus={this._onFocus}\n          onBlur={this._onBlur}\n          enableFocusRing={false}\n        >\n          <ViewWin32 style={styles.keyEnterVisualizer}>\n            <Text>OnKeyDown</Text>\n            <Text>----</Text>\n            <Text>{this.state.lastKeyDown !== null ? this.state.lastKeyDown : ' '}</Text>\n          </ViewWin32>\n          <ViewWin32 style={styles.keyEnterVisualizer}>\n            <Text>OnKeyUp</Text>\n            <Text>----</Text>\n            <Text>{this.state.lastKeyUp !== null ? this.state.lastKeyUp : ' '}</Text>\n          </ViewWin32>\n        </ViewWin32>\n      </ViewWin32>\n    );\n  }\n\n  private readonly _onFocus = () => {\n    this.setState({\n      hasFocus: true,\n    });\n  };\n\n  private readonly _onBlur = () => {\n    this.setState({\n      hasFocus: false,\n    });\n  };\n\n  private readonly _onKeyUp = (ev: IKeyboardEvent) => {\n    this.setState({ lastKeyUp: ev.nativeEvent.key, lastKeyDown: null });\n  };\n\n  private readonly _onKeyDown = (ev: IKeyboardEvent) => {\n    this.setState({ lastKeyDown: ev.nativeEvent.key, lastKeyUp: null });\n  };\n}\n\ninterface IHoverComponentProps {\n  color: string;\n}\nclass HoverTestComponent extends React.Component<IHoverComponentProps, IFocusableComponentState> {\n  public constructor(props) {\n    super(props);\n    this.state = {\n      hasFocus: false,\n    };\n  }\n\n  public render() {\n    return (\n      <ViewWin32\n        onMouseEnter={this._onMouseEnter}\n        onMouseLeave={this._onMouseLeave}\n        style={this.state.hasFocus ? [styles.blackbox, { backgroundColor: this.props.color }] : styles.blackbox}\n      />\n    );\n  }\n  private readonly _onMouseLeave = () => {\n    this.setState({ hasFocus: false });\n  };\n  private readonly _onMouseEnter = () => {\n    this.setState({ hasFocus: true });\n  };\n}\n\nclass HoverExample extends React.Component {\n  public render() {\n    return (\n      <ViewWin32 style={{ flexDirection: 'row', marginHorizontal: 75, justifyContent: 'space-around' }}>\n        <HoverTestComponent color=\"red\" />\n        <HoverTestComponent color=\"orange\" />\n        <HoverTestComponent color=\"yellow\" />\n        <HoverTestComponent color=\"green\" />\n        <HoverTestComponent color=\"blue\" />\n        <HoverTestComponent color=\"indigo\" />\n        <HoverTestComponent color=\"violet\" />\n      </ViewWin32>\n    );\n  }\n}\n\nconst ToolTipExample: React.FunctionComponent<{}> = () => {\n  return (\n    <ViewWin32\n      style={{\n        backgroundColor: 'red',\n        height: 100,\n        width: 100,\n      }}\n      tooltip=\"Example tooltip\"\n      cursor=\"pointer\"\n    />\n  );\n};\n\ninterface ICursorTestComponentProps {\n  cursor: Cursor\n}\n\nconst CursorTestComponent: React.FunctionComponent<ICursorTestComponentProps> = (props) => {\n  return (\n    <ViewWin32 style={{flexDirection: 'column'}}>\n      <Text>{props.cursor}</Text>\n      <ViewWin32 cursor={props.cursor} style={styles.blackbox} />\n    </ViewWin32>\n  )\n}\n\nconst CursorExample: React.FunctionComponent = () => {\n  return (\n    <ViewWin32 style={{ flexDirection: 'row', justifyContent: 'space-around' }}>\n      <CursorTestComponent cursor='auto' />\n      <CursorTestComponent cursor='default' />\n      <CursorTestComponent cursor='help' />\n      <CursorTestComponent cursor='nesw-resize' />\n      <CursorTestComponent cursor='not-allowed' />\n      <CursorTestComponent cursor='ns-resize' />\n      <CursorTestComponent cursor='nwse-resize' />\n      <CursorTestComponent cursor='pointer' />\n      <CursorTestComponent cursor='wait' />\n      <CursorTestComponent cursor='move' />\n      <CursorTestComponent cursor='text' />\n      <CursorTestComponent cursor='we-resize' />\n    </ViewWin32>\n  );\n}\nclass EnableFocusRingExample extends React.Component<{}, IFocusableComponentState> {\n  public constructor(props) {\n    super(props);\n    this.state = {\n      hasFocus: false,\n    };\n  }\n  \n  public render() {\n    return (\n      <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>\n        <ViewWin32\n          style={{\n            backgroundColor: 'pink',\n            height: 100,\n            width: 100,\n          }}\n          enableFocusRing={true}\n          focusable\n        >\n          <Text>enableFocusRing set to true</Text>\n        </ViewWin32>\n        <ViewWin32\n          style={{\n            backgroundColor: 'pink',\n            height: 100,\n            width: 100,\n          }}\n          enableFocusRing={false}\n          focusable\n          onFocus={this._onFocus}\n          onBlur={this._onBlur}\n        >\n          <>\n            <Text>enableFocusRing set to false</Text>\n            <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>\n          </>\n        </ViewWin32>\n      </ViewWin32>\n    );\n  }\n\n  private readonly _onFocus = () => {\n    this.setState({\n      hasFocus: true,\n    });\n  };\n\n  private readonly _onBlur = () => {\n    this.setState({\n      hasFocus: false,\n    });\n  };\n}\n\n\nexport const title = 'ViewWin32';\nexport const displayName = 'ViewWin32 Example';\nexport const description = 'All the stock View props plus Win32 specific ones';\nexport const examples = [\n  {\n    title: 'focus() method example',\n    description: 'Each of these black boxes moves focus to the ViewWin32 on the right',\n    render(): JSX.Element {\n      return (\n        <ViewWin32>\n          <FocusMoverTestComponent />\n          <FocusMoverTestComponent />\n          <FocusMoverTestComponent />\n        </ViewWin32>\n      );\n    },\n  },\n  {\n    title: 'KeyboardEvents example',\n    description: 'Native keyboarding has been prevented',\n    render(): JSX.Element {\n      return <KeyboardTestComponent />;\n    },\n  },\n  {\n    title: 'Hover example',\n    description: 'Hover a rainbow',\n    render(): JSX.Element {\n      return <HoverExample />;\n    },\n  },\n  {\n    title: 'Tooltip example',\n    description: 'Displays a tooltip on hover',\n    render(): JSX.Element {\n      return <ToolTipExample />;\n    },\n  },\n  {\n    title: 'Cursor example',\n    description: 'Each of these boxes should display a different cursor',\n    render(): JSX.Element {\n      return <CursorExample />;\n    },\n  },\n  {\n    title: 'EnableFocusRing example',\n    description: 'Displays focus visuals that are driven by native',\n    render(): JSX.Element {\n      return <EnableFocusRingExample />;\n    },\n  },\n];\n"]}