npm - @office-iss/react-native-win32 - Versions diffs - 0.67.0-preview.1 → 0.67.0-preview.2 - Mend

@office-iss/react-native-win32 0.67.0-preview.1 → 0.67.0-preview.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -1,6 +1,42 @@
 {
   "name": "@office-iss/react-native-win32",
   "entries": [
+    {
+      "date": "Mon, 15 Nov 2021 16:09:34 GMT",
+      "tag": "@office-iss/react-native-win32_v0.67.0-preview.2",
+      "version": "0.67.0-preview.2",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "ruaraki@microsoft.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "6a7a95e90c7f7a3a86efac63b24092232380ba1b",
+            "comment": "Add enableFocusRing prop for View and test"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 25 Oct 2021 15:07:48 GMT",
+      "tag": "@office-iss/react-native-win32_v0.67.0-preview.1",
+      "version": "0.67.0-preview.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "ngerlem@microsoft.com",
+            "package": "@office-iss/react-native-win32",
+            "commit": "not available",
+            "comment": "Promote 0.67 to preview"
+          },
+          {
+            "author": "beachball",
+            "package": "@office-iss/react-native-win32",
+            "comment": "Bump @react-native-windows/virtualized-list to v0.67.0-preview.1",
+            "commit": "666510e980ced292bffd23a44982e8a800f91444"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 25 Oct 2021 15:07:19 GMT",
       "tag": "@office-iss/react-native-win32_v0.67.0-preview.1",

package/CHANGELOG.md CHANGED Viewed

@@ -1,18 +1,35 @@
 # Change Log - @office-iss/react-native-win32
-This log was last generated on Mon, 25 Oct 2021 15:07:19 GMT and should not be manually modified.
+This log was last generated on Mon, 15 Nov 2021 16:09:34 GMT and should not be manually modified.
 <!-- Start content -->
-## 0.67.0-preview.1
+## 0.67.0-preview.2
-Mon, 25 Oct 2021 15:07:19 GMT
+Mon, 15 Nov 2021 16:09:34 GMT
 ### Changes
-- Promote 0.67 to preview (ngerlem@microsoft.com)
-- Bump @react-native-windows/virtualized-list to v0.67.0-preview.1
+- Add enableFocusRing prop for View and test (ruaraki@microsoft.com)
+## 0.67.0-preview.1
+Mon, 25 Oct 2021 15:07:48 GMT
+### Changes
+- Promote 0.67 to preview (ngerlem@microsoft.com)
+- Bump @react-native-windows/virtualized-list to v0.67.0-preview.1
+## 0.67.0-preview.1
+Mon, 25 Oct 2021 15:07:19 GMT
+### Changes
+- Promote 0.67 to preview (ngerlem@microsoft.com)
+- Bump @react-native-windows/virtualized-list to v0.67.0-preview.1
 ## 0.0.0-canary.117
 Thu, 21 Oct 2021 05:08:01 GMT

package/Libraries/Components/View/ReactNativeViewViewConfig.win32.js CHANGED Viewed

@@ -382,6 +382,7 @@ const ReactNativeViewConfig: ViewConfig = {
     accessibilityDescription: true,
     accessibilityControls: true,
     accessibilityItemType: true,
+    enableFocusRing: true,
     // Windows]
   },
 };

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

@@ -60,7 +60,7 @@ class FocusMoverTestComponent extends react_1.default.Component {
             react_1.default.createElement(ViewWin32_1.ViewWin32, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 } },
                 react_1.default.createElement(react_native_1.TouchableHighlight, { onPress: this._onPress },
                     react_1.default.createElement(ViewWin32_1.ViewWin32, { accessibilityLabeledBy: this._labeledBy, style: styles.blackbox })),
-                react_1.default.createElement(ViewWin32_1.ViewWin32, { ref: this._setRef, focusable: true, style: this.state.hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }, onFocus: this._onFocus, onBlur: this._onBlur },
+                react_1.default.createElement(ViewWin32_1.ViewWin32, { ref: this._setRef, focusable: true, style: this.state.hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }, onFocus: this._onFocus, onBlur: this._onBlur, enableFocusRing: false },
                     react_1.default.createElement(react_native_1.Text, null, this.state.hasFocus ? 'Focus: Yes' : 'Focus: No')))));
     }
 }
@@ -98,7 +98,7 @@ class KeyboardTestComponent extends react_1.default.Component {
     }
     render() {
         return (react_1.default.createElement(ViewWin32_1.ViewWin32, { keyDownEvents: handledNativeKeyboardEvents, keyUpEvents: handledNativeKeyboardEvents },
-            react_1.default.createElement(ViewWin32_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 },
+            react_1.default.createElement(ViewWin32_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(ViewWin32_1.ViewWin32, { style: styles.keyEnterVisualizer },
                     react_1.default.createElement(react_native_1.Text, null, "OnKeyDown"),
                     react_1.default.createElement(react_native_1.Text, null, "----"),
@@ -165,6 +165,41 @@ const CursorExample = () => {
         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(ViewWin32_1.ViewWin32, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 } },
+            react_1.default.createElement(ViewWin32_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(ViewWin32_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';
@@ -207,5 +242,12 @@ exports.examples = [
             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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 { ViewWin32 } from '../ViewWin32';\nimport { Cursor, IKeyboardEvent, IHandledKeyboardEvent } from '../ViewWin32.Props';\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\nclass FocusMoverTestComponent extends React.Component<{}, IFocusableComponentState> {\n private _focusTarget: ViewWin32 = null;\n private readonly _labeledBy: React.RefObject<ViewWin32>;\n\n public constructor(props) {\n super(props);\n this.state = {\n hasFocus: false,\n };\n this._labeledBy = React.createRef<ViewWin32>();\n }\n public render() {\n return (\n <ViewWin32>\n <ViewWin32 ref={this._labeledBy} accessibilityLabel=\"separate label for test\" accessibilityItemType=\"Comment\" />\n <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>\n <TouchableHighlight onPress={this._onPress}>\n <ViewWin32 accessibilityLabeledBy={this._labeledBy} style={styles.blackbox} />\n </TouchableHighlight>\n <ViewWin32\n ref={this._setRef}\n focusable\n style={this.state.hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }}\n onFocus={this._onFocus}\n onBlur={this._onBlur}\n >\n <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>\n </ViewWin32>\n </ViewWin32>\n </ViewWin32>\n );\n }\n\n private readonly _setRef = (ref: ViewWin32) => {\n this._focusTarget = ref;\n };\n\n private readonly _onPress = () => {\n if (this._focusTarget !== undefined) {\n this._focusTarget.focus();\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\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 >\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}\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"]}
1	+ {"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 { ViewWin32 } from '../ViewWin32';\nimport { Cursor, IKeyboardEvent, IHandledKeyboardEvent } from '../ViewWin32.Props';\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\nclass FocusMoverTestComponent extends React.Component<{}, IFocusableComponentState> {\n private _focusTarget: ViewWin32 = null;\n private readonly _labeledBy: React.RefObject<ViewWin32>;\n\n public constructor(props) {\n super(props);\n this.state = {\n hasFocus: false,\n };\n this._labeledBy = React.createRef<ViewWin32>();\n }\n public render() {\n return (\n <ViewWin32>\n <ViewWin32 ref={this._labeledBy} accessibilityLabel=\"separate label for test\" accessibilityItemType=\"Comment\" />\n <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>\n <TouchableHighlight onPress={this._onPress}>\n <ViewWin32 accessibilityLabeledBy={this._labeledBy} style={styles.blackbox} />\n </TouchableHighlight>\n <ViewWin32\n ref={this._setRef}\n focusable\n style={this.state.hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }}\n onFocus={this._onFocus}\n onBlur={this._onBlur}\n enableFocusRing={false}\n >\n <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>\n </ViewWin32>\n </ViewWin32>\n </ViewWin32>\n );\n }\n\n private readonly _setRef = (ref: ViewWin32) => {\n this._focusTarget = ref;\n };\n\n private readonly _onPress = () => {\n if (this._focusTarget !== undefined) {\n this._focusTarget.focus();\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\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"]}

package/Libraries/Components/View/ViewWin32.Props.d.ts CHANGED Viewed

@@ -114,6 +114,7 @@ export interface IViewWin32Props extends Omit<RN.ViewProps, ViewWin32OmitTypes>,
     accessibilitySetSize?: number;
     animationClass?: string;
     focusable?: boolean;
+    enableFocusRing?: boolean;
     /**
      * The onBlur event occurs when an element loses focus.  The opposite of onBlur is onFocus.  Note that in React
      * Native, unlike in the web, the onBlur event bubbles (similar to onFocusOut in the web).

package/Libraries/Components/View/ViewWin32.Props.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ViewWin32.Props.js","sourceRoot":"","sources":["../../../src/Libraries/Components/View/ViewWin32.Props.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAeb,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,2CAAI,CAAA;IACJ,qDAAS,CAAA;IACT,mDAAQ,CAAA;IACR,mDAAQ,CAAA;AACV,CAAC,EALW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAKrB","sourcesContent":["'use strict';\nimport React from 'react'\nimport RN = require('react-native');\n\n// removes from interface T the members of interface K\ntype Omit<T, K> = Pick<T, Exclude<keyof T, keyof K>>;\n\n// All of T becomes optional except for Keys\ntype PartiallyRequired<T, Keys extends keyof T = keyof T> = Pick<Partial<T>, Exclude<keyof T, Keys>> & Pick<T, Keys>;\n\n/*\n All of TOrigin except Key from TUse\n /\nexport type UseFrom<TOrigin, TUse, Key extends keyof TUse> = Pick<TOrigin, Exclude<keyof TOrigin, Key>> & Pick<TUse, Key>;\n\nexport enum EventPhase {\n None,\n Capturing,\n AtTarget,\n Bubbling\n}\n\nexport interface INativeKeyboardEvent {\n altKey: boolean;\n ctrlKey: boolean;\n metaKey: boolean;\n shiftKey: boolean;\n key: string;\n eventPhase: EventPhase;\n}\nexport type IKeyboardEvent = RN.NativeSyntheticEvent<INativeKeyboardEvent>;\nexport type IHandledKeyboardEvent = PartiallyRequired<INativeKeyboardEvent, 'key'>;\n\nexport interface IViewWin32 {\n focus: () => void;\n}\n\nexport type ARIARole =\n \| 'alert'\n \| 'alertdialog'\n \| 'application'\n \| 'button'\n \| 'checkbox'\n \| 'combobox'\n \| 'dialog'\n \| 'group'\n \| 'link'\n \| 'menu'\n \| 'menubar'\n \| 'menuitem'\n \| 'none'\n \| 'presentation'\n \| 'progressbar'\n \| 'radio'\n \| 'radiogroup'\n \| 'scrollbar'\n \| 'search'\n \| 'spinbutton'\n \| 'switch'\n \| 'tab'\n \| 'tablist'\n \| 'tabpanel'\n \| 'textbox'\n \| 'timer'\n \| 'toolbar'\n \| 'tree'\n \| 'treeitem';\n\nexport type AnnotationType =\n \| 'AdvanceProofingIssue'\n \| 'Author'\n \| 'CircularReferenceError'\n \| 'Comment'\n \| 'ConflictingChange'\n \| 'DataValidationError'\n \| 'DeletionChange'\n \| 'EditingLockedChange'\n \| 'Endnote'\n \| 'ExternalChange'\n \| 'Footer'\n \| 'Footnote'\n \| 'FormatChange'\n \| 'FormulaError'\n \| 'GrammarError'\n \| 'Header'\n \| 'Highlighted'\n \| 'InsertionChange'\n \| 'Mathematics'\n \| 'MoveChange'\n \| 'SpellingError'\n \| 'TrackChanges'\n \| 'Unknown'\n \| 'UnsyncedChange';\n\nexport type AccessibilityAnnotationInfo = Readonly<{\n typeID: AnnotationType;\n typeName?: string;\n author?: string;\n dateTime?: string;\n target?: string;\n}>;\n\nexport type AccessibilityActionName =\n \| RN.AccessibilityActionName\n \| 'AddToSelection'\n \| 'RemoveFromSelection'\n \| 'Select'\n \| 'Expand'\n \| 'Collapse';\n\nexport type Cursor =\n \| 'auto'\n \| 'default'\n \| 'pointer'\n \| 'help'\n \| 'not-allowed'\n \| 'wait'\n \| 'move'\n \| 'nesw-resize'\n \| 'ns-resize'\n \| 'nwse-resize'\n \| 'we-resize'\n \| 'text'\n\nexport type AccessibilityActionInfo = Readonly<{\n name: AccessibilityActionName;\n label?: string;\n}>;\n\nexport type AccessibilityState = RN.AccessibilityState & { multiselectable?: boolean, required?: boolean };\n\nexport type SharedAccessibilityPropsIOSandWin32 = {\n onAccessibilityTap?: () => void;\n};\n\nexport type OmittedAccessibilityPropsWin32 = {\n accessibilityActions?: ReadonlyArray<RN.AccessibilityActionInfo>;\n accessibilityRole?: RN.AccessibilityRole;\n accessibilityState?: RN.AccessibilityState;\n};\n\nexport type BasePropsWin32 = {\n /\n Tells a person using a screen reader the type of element they are focused on.\n \n Overrides the `accessibilityRole` prop on React Native to accept a subset of ARIA roles.\n \n Possible values for ARIARole are: alert, alertdialog, application, button, checkbox,\n * comobox, dialog, group, link, menu, menubar, menuitem, none, presentation, progressbar,\n * radio, radiogroup, scrollbar, search, spinbutton, switch, tab, tablist, tabpanel, textbox,\n * timer, toolbar, tree, and treeitem.\n /\n accessibilityRole?: RN.AccessibilityRole \| ARIARole;\n accessibilityState?: AccessibilityState;\n accessibilityActions?: ReadonlyArray<AccessibilityActionInfo>;\n\n /\n Windows Accessibility extensions for allowing other DOM elements to label or describe a given element.\n \n Defined as a reference to another DOM element inheriting from the primary base classes of React-Native elements.\n * The reference will be converted to a native reference (tag) before passing to the native platform.\n /\n accessibilityDescribedBy?: React.RefObject<any>;\n accessibilityLabeledBy?: React.RefObject<any>;\n\n /\n Identifies the element whose contents or presence are controlled by another element. \n * \n * This is mainly used for a Textbox with a Dropdown PeoplePicker-type list. This allows an \n * accessibility tool to query those other providers for properties and listen to their events.\n /\n accessibilityControls?: React.RefObject<any>; \n\n /\n Identifies the ItemType property, which is a text string describing the type of the automation element.\n * ItemType is used to obtain information about items in a list, tree view, or data grid. For example, an item in a file directory view might be a \"Document File\" or a \"Folder\".\n /\n accessibilityItemType?: string;\n};\n\nexport type ViewWin32OmitTypes = RN.ViewPropsAndroid &\n RN.ViewPropsIOS &\n RN.AccessibilityPropsAndroid &\n Omit<RN.AccessibilityPropsIOS, SharedAccessibilityPropsIOSandWin32> &\n OmittedAccessibilityPropsWin32;\n\n/\n Properties for ViewWin32 component\n /\nexport interface IViewWin32Props extends Omit<RN.ViewProps, ViewWin32OmitTypes>, BasePropsWin32 {\n type?: React.ElementType;\n children?: React.ReactNode;\n accessibilityActions?: ReadonlyArray<AccessibilityActionInfo>;\n /\n Tells a person using a screen reader what kind of annotation they\n * have selected. If available, it will also tell a person the author of the annotation and\n * the date and time the annotation was posted.\n \n Note: If typeID is 'Unknown', a typeName must be provided.\n /\n accessibilityAnnotation?: AccessibilityAnnotationInfo;\n /\n accessibilityDescription provides more detailed information specific to the element (i.e. last edit date, full location for a file)\n * while accessibilityHint provides infomation on what will happen when they perform an action.\n \n /\n accessibilityDescription?: string;\n accessibilityLevel?: number;\n accessibilityPositionInSet?: number;\n\n accessibilitySetSize?: number;\n animationClass?: string;\n focusable?: boolean;\n\n /*\n The onBlur event occurs when an element loses focus. The opposite of onBlur is onFocus. Note that in React\n * Native, unlike in the web, the onBlur event bubbles (similar to onFocusOut in the web).\n \n `ev.target === ev.currentTarget` when the focus is being lost from this component.\n * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n /\n onBlur?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n /\n The onBlur event occurs when an element loses focus. The opposite of onBlur is onFocus. Note that in React\n * Native, unlike in the web, the onBlur event bubbles (similar to onFocusOut in the web).\n \n `ev.target === ev.currentTarget` when the focus is being lost from this component.\n * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n /\n onBlurCapture?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n /\n The onFocus event occurs when an element gets focus. The opposite of onFocus is onBlur. Note that in React\n * Native, unlike in the web, the onFocus event bubbles (similar to onFocusIn in the web).\n \n `ev.target === ev.currentTarget` when the focus is being lost from this component.\n * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n /\n onFocus?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n /\n The onFocus event occurs when an element gets focus. The opposite of onFocus is onBlur. Note that in React\n * Native, unlike in the web, the onFocus event bubbles (similar to onFocusIn in the web).\n \n `ev.target === ev.currentTarget` when the focus is being lost from this component.\n * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n /\n onFocusCapture?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n\n onKeyDown?: (args: IKeyboardEvent) => void;\n onKeyDownCapture?: (args: IKeyboardEvent) => void;\n onKeyUp?: (args: IKeyboardEvent) => void;\n onKeyUpCapture?: (args: IKeyboardEvent) => void;\n\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n\n keyDownEvents?: IHandledKeyboardEvent[];\n keyUpEvents?: IHandledKeyboardEvent[];\n\n /\n Provides a screentip to be used on hover of the view\n */\n tooltip?: string;\n cursor?: Cursor;\n}\n"]}
1	+ {"version":3,"file":"ViewWin32.Props.js","sourceRoot":"","sources":["../../../src/Libraries/Components/View/ViewWin32.Props.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAeb,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,2CAAI,CAAA;IACJ,qDAAS,CAAA;IACT,mDAAQ,CAAA;IACR,mDAAQ,CAAA;AACV,CAAC,EALW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAKrB","sourcesContent":["'use strict';\nimport React from 'react'\nimport RN = require('react-native');\n\n// removes from interface T the members of interface K\ntype Omit<T, K> = Pick<T, Exclude<keyof T, keyof K>>;\n\n// All of T becomes optional except for Keys\ntype PartiallyRequired<T, Keys extends keyof T = keyof T> = Pick<Partial<T>, Exclude<keyof T, Keys>> & Pick<T, Keys>;\n\n/*\n All of TOrigin except Key from TUse\n /\nexport type UseFrom<TOrigin, TUse, Key extends keyof TUse> = Pick<TOrigin, Exclude<keyof TOrigin, Key>> & Pick<TUse, Key>;\n\nexport enum EventPhase {\n None,\n Capturing,\n AtTarget,\n Bubbling\n}\n\nexport interface INativeKeyboardEvent {\n altKey: boolean;\n ctrlKey: boolean;\n metaKey: boolean;\n shiftKey: boolean;\n key: string;\n eventPhase: EventPhase;\n}\nexport type IKeyboardEvent = RN.NativeSyntheticEvent<INativeKeyboardEvent>;\nexport type IHandledKeyboardEvent = PartiallyRequired<INativeKeyboardEvent, 'key'>;\n\nexport interface IViewWin32 {\n focus: () => void;\n}\n\nexport type ARIARole =\n \| 'alert'\n \| 'alertdialog'\n \| 'application'\n \| 'button'\n \| 'checkbox'\n \| 'combobox'\n \| 'dialog'\n \| 'group'\n \| 'link'\n \| 'menu'\n \| 'menubar'\n \| 'menuitem'\n \| 'none'\n \| 'presentation'\n \| 'progressbar'\n \| 'radio'\n \| 'radiogroup'\n \| 'scrollbar'\n \| 'search'\n \| 'spinbutton'\n \| 'switch'\n \| 'tab'\n \| 'tablist'\n \| 'tabpanel'\n \| 'textbox'\n \| 'timer'\n \| 'toolbar'\n \| 'tree'\n \| 'treeitem';\n\nexport type AnnotationType =\n \| 'AdvanceProofingIssue'\n \| 'Author'\n \| 'CircularReferenceError'\n \| 'Comment'\n \| 'ConflictingChange'\n \| 'DataValidationError'\n \| 'DeletionChange'\n \| 'EditingLockedChange'\n \| 'Endnote'\n \| 'ExternalChange'\n \| 'Footer'\n \| 'Footnote'\n \| 'FormatChange'\n \| 'FormulaError'\n \| 'GrammarError'\n \| 'Header'\n \| 'Highlighted'\n \| 'InsertionChange'\n \| 'Mathematics'\n \| 'MoveChange'\n \| 'SpellingError'\n \| 'TrackChanges'\n \| 'Unknown'\n \| 'UnsyncedChange';\n\nexport type AccessibilityAnnotationInfo = Readonly<{\n typeID: AnnotationType;\n typeName?: string;\n author?: string;\n dateTime?: string;\n target?: string;\n}>;\n\nexport type AccessibilityActionName =\n \| RN.AccessibilityActionName\n \| 'AddToSelection'\n \| 'RemoveFromSelection'\n \| 'Select'\n \| 'Expand'\n \| 'Collapse';\n\nexport type Cursor =\n \| 'auto'\n \| 'default'\n \| 'pointer'\n \| 'help'\n \| 'not-allowed'\n \| 'wait'\n \| 'move'\n \| 'nesw-resize'\n \| 'ns-resize'\n \| 'nwse-resize'\n \| 'we-resize'\n \| 'text'\n\nexport type AccessibilityActionInfo = Readonly<{\n name: AccessibilityActionName;\n label?: string;\n}>;\n\nexport type AccessibilityState = RN.AccessibilityState & { multiselectable?: boolean, required?: boolean };\n\nexport type SharedAccessibilityPropsIOSandWin32 = {\n onAccessibilityTap?: () => void;\n};\n\nexport type OmittedAccessibilityPropsWin32 = {\n accessibilityActions?: ReadonlyArray<RN.AccessibilityActionInfo>;\n accessibilityRole?: RN.AccessibilityRole;\n accessibilityState?: RN.AccessibilityState;\n};\n\nexport type BasePropsWin32 = {\n /\n Tells a person using a screen reader the type of element they are focused on.\n \n Overrides the `accessibilityRole` prop on React Native to accept a subset of ARIA roles.\n \n Possible values for ARIARole are: alert, alertdialog, application, button, checkbox,\n * comobox, dialog, group, link, menu, menubar, menuitem, none, presentation, progressbar,\n * radio, radiogroup, scrollbar, search, spinbutton, switch, tab, tablist, tabpanel, textbox,\n * timer, toolbar, tree, and treeitem.\n /\n accessibilityRole?: RN.AccessibilityRole \| ARIARole;\n accessibilityState?: AccessibilityState;\n accessibilityActions?: ReadonlyArray<AccessibilityActionInfo>;\n\n /\n Windows Accessibility extensions for allowing other DOM elements to label or describe a given element.\n \n Defined as a reference to another DOM element inheriting from the primary base classes of React-Native elements.\n * The reference will be converted to a native reference (tag) before passing to the native platform.\n /\n accessibilityDescribedBy?: React.RefObject<any>;\n accessibilityLabeledBy?: React.RefObject<any>;\n\n /\n Identifies the element whose contents or presence are controlled by another element. \n * \n * This is mainly used for a Textbox with a Dropdown PeoplePicker-type list. This allows an \n * accessibility tool to query those other providers for properties and listen to their events.\n /\n accessibilityControls?: React.RefObject<any>; \n\n /\n Identifies the ItemType property, which is a text string describing the type of the automation element.\n * ItemType is used to obtain information about items in a list, tree view, or data grid. For example, an item in a file directory view might be a \"Document File\" or a \"Folder\".\n /\n accessibilityItemType?: string;\n};\n\nexport type ViewWin32OmitTypes = RN.ViewPropsAndroid &\n RN.ViewPropsIOS &\n RN.AccessibilityPropsAndroid &\n Omit<RN.AccessibilityPropsIOS, SharedAccessibilityPropsIOSandWin32> &\n OmittedAccessibilityPropsWin32;\n\n/\n Properties for ViewWin32 component\n /\nexport interface IViewWin32Props extends Omit<RN.ViewProps, ViewWin32OmitTypes>, BasePropsWin32 {\n type?: React.ElementType;\n children?: React.ReactNode;\n accessibilityActions?: ReadonlyArray<AccessibilityActionInfo>;\n /\n Tells a person using a screen reader what kind of annotation they\n * have selected. If available, it will also tell a person the author of the annotation and\n * the date and time the annotation was posted.\n \n Note: If typeID is 'Unknown', a typeName must be provided.\n /\n accessibilityAnnotation?: AccessibilityAnnotationInfo;\n /\n accessibilityDescription provides more detailed information specific to the element (i.e. last edit date, full location for a file)\n * while accessibilityHint provides infomation on what will happen when they perform an action.\n \n /\n accessibilityDescription?: string;\n accessibilityLevel?: number;\n accessibilityPositionInSet?: number;\n\n accessibilitySetSize?: number;\n animationClass?: string;\n focusable?: boolean;\n enableFocusRing?: boolean;\n\n /*\n The onBlur event occurs when an element loses focus. The opposite of onBlur is onFocus. Note that in React\n * Native, unlike in the web, the onBlur event bubbles (similar to onFocusOut in the web).\n \n `ev.target === ev.currentTarget` when the focus is being lost from this component.\n * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n /\n onBlur?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n /\n The onBlur event occurs when an element loses focus. The opposite of onBlur is onFocus. Note that in React\n * Native, unlike in the web, the onBlur event bubbles (similar to onFocusOut in the web).\n \n `ev.target === ev.currentTarget` when the focus is being lost from this component.\n * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n /\n onBlurCapture?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n /\n The onFocus event occurs when an element gets focus. The opposite of onFocus is onBlur. Note that in React\n * Native, unlike in the web, the onFocus event bubbles (similar to onFocusIn in the web).\n \n `ev.target === ev.currentTarget` when the focus is being lost from this component.\n * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n /\n onFocus?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n /\n The onFocus event occurs when an element gets focus. The opposite of onFocus is onBlur. Note that in React\n * Native, unlike in the web, the onFocus event bubbles (similar to onFocusIn in the web).\n \n `ev.target === ev.currentTarget` when the focus is being lost from this component.\n * `ev.target !== ev.currentTarget` when the focus is being lost from a descendant.\n /\n onFocusCapture?: (ev: RN.NativeSyntheticEvent<{}>) => void;\n\n onKeyDown?: (args: IKeyboardEvent) => void;\n onKeyDownCapture?: (args: IKeyboardEvent) => void;\n onKeyUp?: (args: IKeyboardEvent) => void;\n onKeyUpCapture?: (args: IKeyboardEvent) => void;\n\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n\n keyDownEvents?: IHandledKeyboardEvent[];\n keyUpEvents?: IHandledKeyboardEvent[];\n\n /\n Provides a screentip to be used on hover of the view\n */\n tooltip?: string;\n cursor?: Cursor;\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.67.0-preview.1",
+  "version": "0.67.0-preview.2",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "license": "MIT",
   "main": "./index.win32.js",

package/src/Libraries/Components/View/Tests/ViewWin32Test.tsx CHANGED Viewed

@@ -54,6 +54,7 @@ class FocusMoverTestComponent extends React.Component<{}, IFocusableComponentSta
           style={this.state.hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }}
           onFocus={this._onFocus}
           onBlur={this._onBlur}
+          enableFocusRing={false}
         >
           <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
         </ViewWin32>
@@ -118,6 +119,7 @@ class KeyboardTestComponent extends React.Component<{}, IFocusableComponentState
           onKeyDown={this._onKeyDown}
           onFocus={this._onFocus}
           onBlur={this._onBlur}
+          enableFocusRing={false}
         >
           <ViewWin32 style={styles.keyEnterVisualizer}>
             <Text>OnKeyDown</Text>
@@ -244,6 +246,61 @@ const CursorExample: React.FunctionComponent = () => {
     </ViewWin32>
   );
 }
+class EnableFocusRingExample extends React.Component<{}, IFocusableComponentState> {
+  public constructor(props) {
+    super(props);
+    this.state = {
+      hasFocus: false,
+    };
+  }
+  public render() {
+    return (
+      <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>
+        <ViewWin32
+          style={{
+            backgroundColor: 'pink',
+            height: 100,
+            width: 100,
+          }}
+          enableFocusRing={true}
+          focusable
+        >
+          <Text>enableFocusRing set to true</Text>
+        </ViewWin32>
+        <ViewWin32
+          style={{
+            backgroundColor: 'pink',
+            height: 100,
+            width: 100,
+          }}
+          enableFocusRing={false}
+          focusable
+          onFocus={this._onFocus}
+          onBlur={this._onBlur}
+        >
+          <>
+            <Text>enableFocusRing set to false</Text>
+            <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
+          </>
+        </ViewWin32>
+      </ViewWin32>
+    );
+  }
+  private readonly _onFocus = () => {
+    this.setState({
+      hasFocus: true,
+    });
+  };
+  private readonly _onBlur = () => {
+    this.setState({
+      hasFocus: false,
+    });
+  };
+}
 export const title = 'ViewWin32';
 export const displayName = 'ViewWin32 Example';
@@ -290,4 +347,11 @@ export const examples = [
       return <CursorExample />;
     },
   },
+  {
+    title: 'EnableFocusRing example',
+    description: 'Displays focus visuals that are driven by native',
+    render(): JSX.Element {
+      return <EnableFocusRingExample />;
+    },
+  },
 ];

package/src/Libraries/Components/View/ViewWin32.Props.ts CHANGED Viewed

@@ -211,6 +211,7 @@ export interface IViewWin32Props extends Omit<RN.ViewProps, ViewWin32OmitTypes>,
   accessibilitySetSize?: number;
   animationClass?: string;
   focusable?: boolean;
+  enableFocusRing?: boolean;
   /**
    * The onBlur event occurs when an element loses focus.  The opposite of onBlur is onFocus.  Note that in React