edits

Author: Saadnajmi

docsite/api/intro.md

@@ -7,11 +7,4 @@ slug: /
 
 Welcome to the React Native macOS API reference documentation. This section covers macOS-specific props and events that extend the standard React Native components.
 
-## View Component Extensions
-
-React Native macOS extends the standard View component with additional props and events designed specifically for macOS:
-
-- **[View Props](./view-props.md)** - macOS-specific properties for customizing view behavior
-- **[View Events](./view-events.md)** - macOS-specific events for handling user interactions
-
-These extensions allow you to build truly native macOS experiences while leveraging the React Native framework.
+Most of the additional functionality out of React Native macOS directly is in the form of additional props and callback events implemented on `<View>`, to provide macOS and desktop specific behavior

docsite/api/view-events.md

@@ -1,115 +1,30 @@
 ---
-sidebar_label: 'View Events (macOS)'
+sidebar_label: 'Events'
 sidebar_position: 2
 ---
 
-# View Events (macOS)
+# Events
 
 React Native macOS extends the standard React Native View component with additional events that are specific to macOS. These events allow you to respond to macOS-specific user interactions such as keyboard input, mouse movements, drag and drop operations, and more.
 
-## Events
+## Focus
 
-### `onBlur`
-
-Fired when the view loses focus.
-
-**Event Data:** Standard focus event
-
-This event is useful for implementing custom focus management and validation logic when a view loses keyboard focus.
-
----
-
-### `onDoubleClick`
-
-Fired when the user double-clicks on the view.
-
-**Event Data:** Mouse event with the following properties:
-- `clientX`: Horizontal position in the target view
-- `clientY`: Vertical position in the target view
-- `screenX`: Horizontal position in the window
-- `screenY`: Vertical position in the window
-- `altKey`: Whether Alt/Option key is pressed
-- `ctrlKey`: Whether Control key is pressed
-- `shiftKey`: Whether Shift key is pressed
-- `metaKey`: Whether Command key is pressed
-
-Example:
-```javascript
-<View onDoubleClick={(event) => {
-  console.log('Double clicked at', event.nativeEvent.clientX, event.nativeEvent.clientY);
-}}>
-  <Text>Double click me</Text>
-</View>
-```
-
----
-
-### `onDragEnter`
-
-Fired when a drag operation enters the view's bounds.
-
-**Event Data:** Drag event with mouse position and data transfer information
-
-This event is fired when the user drags content over the view. Use this to provide visual feedback that the view can accept the dragged content.
-
----
-
-### `onDragLeave`
-
-Fired when a drag operation leaves the view's bounds.
+This event is useful for implementing custom focus management and showing focus-specific UI elements. For these to fire, the prop [focusable](view-props#focusable) must be set.
 
-**Event Data:** Drag event with mouse position and data transfer information
+### `onFocus`
 
-This event is fired when the user drags content away from the view. Use this to remove any visual feedback shown during drag enter.
+Fired when the view receives focus.
 
 ---
 
-### `onDrop`
-
-Fired when the user drops content onto the view.
-
-**Event Data:** Drag event with the following properties:
-- Mouse position (`clientX`, `clientY`, `screenX`, `screenY`)
-- Modifier keys (`altKey`, `ctrlKey`, `shiftKey`, `metaKey`)
-- `dataTransfer`: Object containing:
-  - `files`: Array of dropped files, each with:
-    - `name`: File name
-    - `type`: MIME type
-    - `uri`: File URI
-    - `size`: File size (optional)
-    - `width`: Image width (optional, for images)
-    - `height`: Image height (optional, for images)
-  - `items`: Array of data transfer items, each with:
-    - `kind`: Item kind (e.g., 'file', 'string')
-    - `type`: MIME type
-  - `types`: Array of available data types
+### `onBlur`
 
-Example:
-```javascript
-<View
-  draggedTypes={['public.file-url']}
-  onDrop={(event) => {
-    const files = event.nativeEvent.dataTransfer.files;
-    files.forEach(file => {
-      console.log('Dropped file:', file.name, file.uri);
-    });
-  }}
->
-  <Text>Drop files here</Text>
-</View>
-```
+Fired when the view loses focus. This is supported for all Views
 
 ---
 
-### `onFocus`
-
-Fired when the view receives focus.
-
-**Event Data:** Standard focus event
-
-This event is useful for implementing custom focus management and showing focus-specific UI elements.
 
----
+## Keyboard
 
 ### `onKeyDown`
 
@@ -134,10 +49,10 @@ Example:
 ```javascript
 <View
   focusable={true}
-  keyDownEvents={[
+  keyDownEvents=[
     { key: 'Enter' },
     { key: 's', metaKey: true }
-  ]}
+  ]
   onKeyDown={(event) => {
     const { key, metaKey } = event.nativeEvent;
     if (key === 'Enter') {
@@ -165,6 +80,8 @@ To receive key events, the view must have `focusable={true}` set, and you should
 
 ---
 
+## Mouse
+
 ### `onMouseEnter`
 
 Fired when the mouse cursor enters the view's bounds.
@@ -209,6 +126,88 @@ Example:
 
 ---
 
+### `onDoubleClick`
+
+Fired when the user double-clicks on the view.
+
+**Event Data:** Mouse event with the following properties:
+- `clientX`: Horizontal position in the target view
+- `clientY`: Vertical position in the target view
+- `screenX`: Horizontal position in the window
+- `screenY`: Vertical position in the window
+- `altKey`: Whether Alt/Option key is pressed
+- `ctrlKey`: Whether Control key is pressed
+- `shiftKey`: Whether Shift key is pressed
+- `metaKey`: Whether Command key is pressed
+
+Example:
+```javascript
+<View onDoubleClick={(event) => {
+  console.log('Double clicked at', event.nativeEvent.clientX, event.nativeEvent.clientY);
+}}>
+  <Text>Double click me</Text>
+</View>
+```
+
+---
+
+### `onDragEnter`
+
+Fired when a drag operation enters the view's bounds.
+
+**Event Data:** Drag event with mouse position and data transfer information
+
+This event is fired when the user drags content over the view. Use this to provide visual feedback that the view can accept the dragged content.
+
+---
+
+### `onDragLeave`
+
+Fired when a drag operation leaves the view's bounds.
+
+**Event Data:** Drag event with mouse position and data transfer information
+
+This event is fired when the user drags content away from the view. Use this to remove any visual feedback shown during drag enter.
+
+---
+
+### `onDrop`
+
+Fired when the user drops content onto the view.
+
+**Event Data:** Drag event with the following properties:
+- Mouse position (`clientX`, `clientY`, `screenX`, `screenY`)
+- Modifier keys (`altKey`, `ctrlKey`, `shiftKey`, `metaKey`)
+- `dataTransfer`: Object containing:
+  - `files`: Array of dropped files, each with:
+    - `name`: File name
+    - `type`: MIME type
+    - `uri`: File URI
+    - `size`: File size (optional)
+    - `width`: Image width (optional, for images)
+    - `height`: Image height (optional, for images)
+  - `items`: Array of data transfer items, each with:
+    - `kind`: Item kind (e.g., 'file', 'string')
+    - `type`: MIME type
+  - `types`: Array of available data types
+
+Example:
+```javascript
+<View
+  draggedTypes={['public.file-url']}
+  onDrop={(event) => {
+    const files = event.nativeEvent.dataTransfer.files;
+    files.forEach(file => {
+      console.log('Dropped file:', file.name, file.uri);
+    });
+  }}
+>
+  <Text>Drop files here</Text>
+</View>
+```
+
+---
+
 ## Complete Example
 
 Here's a comprehensive example showing multiple macOS-specific events:
@@ -262,14 +261,7 @@ function MacOSEventsExample() {
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  interactiveView: {
-    width: 300,
+
     height: 200,
     backgroundColor: 'white',
     borderWidth: 2,
@@ -287,8 +279,3 @@ const styles = StyleSheet.create({
 
 export default MacOSEventsExample;
 ```
-
-## See Also
-
-- [View Props (macOS)](./view-props.md) - macOS-specific props for View components
-- [React Native View Component](https://reactnative.dev/docs/view) - Base View component documentation

docsite/api/view-props.md

@@ -1,11 +1,11 @@
 ---
-sidebar_label: 'View Props (macOS)'
+sidebar_label: 'Props'
 sidebar_position: 1
 ---
 
-# View Props (macOS)
+# Props
 
-React Native macOS extends the standard React Native View component with additional props that are specific to macOS. These props allow you to customize the behavior and appearance of views to take advantage of macOS-specific features.
+React Native macOS extends the standard React Native `<View>` component with additional props that are specific to macOS. These props allow you to customize the behavior and appearance of views to take advantage of macOS-specific features.
 
 ## Props
 
@@ -29,7 +29,7 @@ Enables the vibrancy effect for the view, allowing it to blend with the content
 | ---- | ------- |
 | bool | `false` |
 
-When `true`, the view will use macOS vibrancy effects, creating a translucent appearance that adapts to the content behind the window.
+When `true`, the view will use macOS vibrancy effects, creating a translucent appearance that adapts to the content behind the window. This makes a difference when content is placed on top of a native [NSVisualEffectView](https://developer.apple.com/documentation/appkit/nsvisualeffectview), such as with the native module [VibrancyView](https://github.com/microsoft/fluentui-react-native/tree/main/packages/experimental/VibrancyView)
 
 ---
 
@@ -41,7 +41,7 @@ Specifies the mouse cursor to display when hovering over the view.
 | ------ |
 | string |
 
-Sets the cursor style. Common values include `'pointer'`, `'default'`, `'text'`, etc.
+Sets the cursor style. This extends the React Native prop to support a larger range of the W3C cursor types supported on web.
 
 ---
 
@@ -53,7 +53,7 @@ Specifies the types of dragged content that the view accepts for drag and drop o
 | --------------- |
 | array of string |
 
-An array of UTI (Uniform Type Identifier) strings that the view will accept. For example: `['public.file-url', 'public.text']`.
+An array of UTI (Uniform Type Identifier) strings that the view will accept. Currently supported: `['fileUrl', 'image', 'string']`.
 
 ---
 
@@ -71,7 +71,7 @@ When `true`, macOS will draw the standard focus ring around the view when it rec
 
 ### `focusable`
 
-Determines whether the view can receive keyboard focus.
+Determines whether the view can receive keyboard focus. This prop has been extended from React Native Core to support all views.
 
 | Type | Default |
 | ---- | ------- |