@office-iss/react-native-win32 0.72.0-preview.4 → 0.72.0-preview.6

package/types/experimental.d.ts

@@ -0,0 +1,101 @@
+/**
+ * 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
+ */
+
+/**
+ * These are types for things that are present for New Architecture enabled apps
+ * which is currently considered experimental.
+ *
+ * To load the types declared here in an actual project, there are three ways.
+ *
+ * 1. If your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
+ * is to add `"react-native/types/experimental"` to the `"types"` array.
+ *
+ * 2. Alternatively, a specific import syntax can to be used from a typescript file.
+ * This module does not exist in reality, which is why the {} is important:
+ *
+ * ```ts
+ * import {} from 'react-native/types/experimental'
+ * ```
+ *
+ * 3. It is also possible to include it through a triple-slash reference:
+ *
+ * ```ts
+ * /// <reference types="react-native/types/experimental" />
+ * ```
+ *
+ * Either the import or the reference only needs to appear once, anywhere in the project.
+ */
+
+import {DimensionValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+
+export {};
+
+declare module '.' {
+  export interface FlexStyle {
+    /**
+     * Equivalent to `marginVertical`
+     */
+    marginBlock?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginBottom`
+     */
+    marginBlockEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginTop`
+     */
+    marginBlockStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginHorizontal`
+     */
+    marginInline?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginEnd`
+     */
+    marginInlineEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginStart`
+     */
+    marginInlineStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingVertical`
+     */
+    paddingBlock?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingBottom`
+     */
+    paddingBlockEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingTop`
+     */
+    paddingBlockStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingHorizontal`
+     */
+    paddingInline?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingEnd`
+     */
+    paddingInlineEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingStart`
+     */
+    paddingInlineStart?: DimensionValue | undefined;
+  }
+}

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":"AAAA,YAAY,CAAC;;;;;;AACb,kDAAyB;AACzB,+CAA4C;AAC5C,oDAAiD;AACjD,oDAAiD;AAEjD,8EAA8E;AAE9E,MAAM,YAAY,GAAiB,GAAG,EAAE;IACtC,OAAO,CACL,8BAAC,mBAAI,IAAC,SAAS;QACb,8BAAC,qBAAS;YACR,8BAAC,qBAAS,qBAAuB;YACjC,8BAAC,qBAAS,yBAA2B;YACrC,8BAAC,qBAAS,0BAA4B,CAC5B,CACP,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAiB,GAAG,EAAE;IAC3C,OAAO,CACL,8BAAC,qBAAS;QACR,8BAAC,qBAAS,IAAC,SAAS,kDAAkD,CAC5D,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAiB,GAAG,EAAE;IAC5C,OAAO,CACL,8BAAC,qBAAS;QACR,8BAAC,qBAAS,IAAC,UAAU,mDAAmD,CAC9D,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAAiB,GAAG,EAAE;IACvC,OAAO,CACL,8BAAC,qBAAS;QACR,8BAAC,qBAAS,IAAC,SAAS,EAAE,YAAY,0BAAiC,CACzD,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAiB,GAAG,EAAE;IACzC,OAAO,CACL,8BAAC,qBAAS;QACR,8BAAC,qBAAS,IAAC,OAAO,EAAC,iBAAiB,4CAAkD,CAC5E,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAiB,GAAG,EAAE;IAC3C,IAAK,iBAIJ;IAJD,WAAK,iBAAiB;QACpB,+DAAO,CAAA;QACP,mEAAS,CAAA;QACT,qEAAU,CAAA;IACZ,CAAC,EAJI,iBAAiB,KAAjB,iBAAiB,QAIrB;IACD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC5F,OAAO,CACL,8BAAC,qBAAS;QACR,8BAAC,qBAAM,IACP,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAE,GAAG,EAAE;gBAEV,IAAI,iBAAiB,KAAK,iBAAiB,CAAC,OAAO,EACnD;oBACE,oBAAoB,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;iBACnD;qBACI,IAAI,iBAAiB,KAAK,iBAAiB,CAAC,SAAS,EAC1D;oBACE,oBAAoB,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;iBACpD;YACH,CAAC,GAAK;QACR,8BAAC,qBAAS,IACR,SAAS,EAAE,iBAAiB,KAAK,iBAAiB,CAAC,SAAS,EAC5D,UAAU,EAAE,iBAAiB,KAAK,iBAAiB,CAAC,UAAU,gCAGpD;QACZ,8BAAC,qBAAS,QACP,CAAC,iBAAiB,KAAK,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;YACvE,CAAC,iBAAiB,KAAK,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;gBACnE,YAAY,CACH,CACF,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAiB,GAAG,EAAE;IACrD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1E,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5E,OAAO,CACL,8BAAC,mBAAI;QACH,8BAAC,qBAAS,IACR,SAAS,QACT,MAAM,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAC1C,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,iCAAwC;QAClF,8BAAC,qBAAS,IACV,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,IAAG,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAa;QACtH,8BAAC,qBAAS,IACR,UAAU,QACV,MAAM,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,IAAI,CAAC,kCAAyC;QACpF,8BAAC,qBAAS,IACV,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,IAAG,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAa,CACnH,CACR,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,WAAW,CAAC;AACpB,QAAA,WAAW,GAAG,WAAW,CAAC;AAC1B,QAAA,WAAW,GAAG,8BAA8B,CAAC;AAC7C,QAAA,QAAQ,GAAG;IACpB;QACE,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,qBAAqB;QAClC,MAAM;YACJ,OAAO,CAAC,8BAAC,YAAY,OAAG,CAAC,CAAC;QAC5B,CAAC;KACF;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,qBAAqB;QAClC,MAAM;YACJ,OAAO,CAAC,8BAAC,iBAAiB,OAAG,CAAC,CAAC;QACjC,CAAC;KACF;IACD;QACE,KAAK,EAAE,oBAAoB;QAC3B,WAAW,EAAE,sBAAsB;QACnC,MAAM;YACJ,OAAO,CAAC,8BAAC,kBAAkB,OAAG,CAAC,CAAC;QAClC,CAAC;KACF;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,sBAAsB;QACnC,MAAM;YACJ,OAAO,CAAC,8BAAC,aAAa,OAAG,CAAC,CAAC;QAC7B,CAAC;KACF;IACD;QACE,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,oBAAoB;QACjC,MAAM;YACJ,OAAO,CAAC,8BAAC,eAAe,OAAG,CAAC,CAAC;QAC/B,CAAC;KACF;IACD;QACE,KAAK,EAAE,uBAAuB;QAC9B,WAAW,EAAE,6CAA6C;QAC1D,MAAM;YACJ,OAAO,CAAC,8BAAC,iBAAiB,OAAG,CAAC,CAAC;QACjC,CAAC;KACF;IACD;QACE,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,0BAA0B;QACvC,MAAM;YACJ,OAAO,CAAC,8BAAC,2BAA2B,OAAG,CAAC,CAAC;QAC3C,CAAC;KACF;CACF,CAAC","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"]}