microsoft
diff --git a/‎change/@react-native-windows-codegen-8d6e2cd0-f94e-4aea-93b7-ac7b5edb0529.json
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions b/‎change/@react-native-windows-codegen-8d6e2cd0-f94e-4aea-93b7-ac7b5edb0529.json
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions
diff --git a/‎change/react-native-windows-53895955-fc85-4bdd-bf07-423af7773f83.json
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions b/‎change/react-native-windows-53895955-fc85-4bdd-bf07-423af7773f83.json
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions
diff --git a/‎packages/@react-native-windows/codegen/src/generators/GenerateComponentWindows.ts
Copy file name to clipboard
+5-6Lines changed: 5 additions & 6 deletions b/‎packages/@react-native-windows/codegen/src/generators/GenerateComponentWindows.ts
Copy file name to clipboard
+5-6Lines changed: 5 additions & 6 deletions
diff --git a/‎packages/sample-custom-component/codegen/react/components/SampleCustomComponent/MovingLight.g.h
Copy file name to clipboard
+5-6Lines changed: 5 additions & 6 deletions b/‎packages/sample-custom-component/codegen/react/components/SampleCustomComponent/MovingLight.g.h
Copy file name to clipboard
+5-6Lines changed: 5 additions & 6 deletions
diff --git a/‎vnext/Microsoft.ReactNative/ComponentView.idl
Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions b/‎vnext/Microsoft.ReactNative/ComponentView.idl
Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
diff --git a/‎vnext/Microsoft.ReactNative/Fabric/ComponentView.cpp
Copy file name to clipboard
+4-6Lines changed: 4 additions & 6 deletions b/‎vnext/Microsoft.ReactNative/Fabric/ComponentView.cpp
Copy file name to clipboard
+4-6Lines changed: 4 additions & 6 deletions
diff --git a/‎vnext/Microsoft.ReactNative/Fabric/ComponentView.h
Copy file name to clipboard
+1-3Lines changed: 1 addition & 3 deletions b/‎vnext/Microsoft.ReactNative/Fabric/ComponentView.h
Copy file name to clipboard
+1-3Lines changed: 1 addition & 3 deletions
diff --git a/‎vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp
Copy file name to clipboard
+10-7Lines changed: 10 additions & 7 deletions b/‎vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp
Copy file name to clipboard
+10-7Lines changed: 10 additions & 7 deletions
diff --git a/‎vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h
Copy file name to clipboard
+1-2Lines changed: 1 addition & 2 deletions b/‎vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h
Copy file name to clipboard
+1-2Lines changed: 1 addition & 2 deletions
diff --git a/‎vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp
Copy file name to clipboard
+8-6Lines changed: 8 additions & 6 deletions b/‎vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp
Copy file name to clipboard
+8-6Lines changed: 8 additions & 6 deletions
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Add FocusNavigationDirection and allow overriding of default command handling",
+  "packageName": "@react-native-windows/codegen",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Add FocusNavigationDirection and allow overriding of default command handling",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
@@ -334,28 +334,27 @@ export function createComponentGenerator({
         }).join('\n\n') : '';
 
 
-        const commandHandler = hasAnyCommands ? `void HandleCommand(const winrt::Microsoft::ReactNative::ComponentView &view, winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
-    args;
+        const commandHandler = hasAnyCommands ? `void HandleCommand(const winrt::Microsoft::ReactNative::ComponentView &view, const winrt::Microsoft::ReactNative::HandleCommandArgs& args) noexcept {
     auto userData = view.UserData().as<TUserData>();
+    auto commandName = args.CommandName();
 ${componentShape.commands.map(command => {
       const commaSeparatedCommandArgs = command.typeAnnotation.params.map(param => param.name).join(', ');
       return `    if (commandName == L"${command.name}") {
 ${command.typeAnnotation.params.length !== 0 ? `      ${command.typeAnnotation.params.map(param => {
             const commandArgType = translateCommandParamType(param.typeAnnotation, commandAliases, `${componentName}_${command.name}`, cppCodegenOptions);
             return `${(param.optional && !commandArgType.alreadySupportsOptionalOrHasDefault) ? `std::optional<${commandArgType.type}>` : commandArgType.type} ${param.name};`;
       }).join('\n')}
-      winrt::Microsoft::ReactNative::ReadArgs(args, ${commaSeparatedCommandArgs});` : ''}
+      winrt::Microsoft::ReactNative::ReadArgs(args.CommandArgs(), ${commaSeparatedCommandArgs});` : ''}
       userData->Handle${capitalizeFirstLetter(command.name)}Command(${commaSeparatedCommandArgs});
       return;
     }`
     }).join('\n\n')}
   }` : '';
 
       const registerCommandHandler = hasAnyCommands ? `        builder.SetCustomCommandHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
-                                          winrt::hstring commandName,
-                                          const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+                                          const winrt::Microsoft::ReactNative::HandleCommandArgs& args) noexcept {
           auto userData = view.UserData().as<TUserData>();
-          userData->HandleCommand(view, commandName, args);
+          userData->HandleCommand(view, args);
         });` : '';
 
         const baseType = baseStructTemplate
 
@@ -115,12 +115,12 @@ struct BaseMovingLight {
   // You must provide an implementation of this method to handle the "setLightOn" command
   virtual void HandleSetLightOnCommand(bool value) noexcept = 0;
 
-  void HandleCommand(const winrt::Microsoft::ReactNative::ComponentView &view, winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
-    args;
+  void HandleCommand(const winrt::Microsoft::ReactNative::ComponentView &view, const winrt::Microsoft::ReactNative::HandleCommandArgs& args) noexcept {
     auto userData = view.UserData().as<TUserData>();
+    auto commandName = args.CommandName();
     if (commandName == L"setLightOn") {
       bool value;
-      winrt::Microsoft::ReactNative::ReadArgs(args, value);
+      winrt::Microsoft::ReactNative::ReadArgs(args.CommandArgs(), value);
       userData->HandleSetLightOnCommand(value);
       return;
     }
@@ -175,10 +175,9 @@ void RegisterMovingLightNativeComponent(
         }
 
         builder.SetCustomCommandHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
-                                          winrt::hstring commandName,
-                                          const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+                                          const winrt::Microsoft::ReactNative::HandleCommandArgs& args) noexcept {
           auto userData = view.UserData().as<TUserData>();
-          userData->HandleCommand(view, commandName, args);
+          userData->HandleCommand(view, args);
         });
 
         if constexpr (&TUserData::MountChildComponentView != &BaseMovingLight<TUserData>::MountChildComponentView) {
 
@@ -34,6 +34,15 @@ namespace Microsoft.ReactNative
     All           = 0x0000000F,
   };
 
+  enum FocusNavigationDirection
+  {
+    None,
+    Next,
+    Previous,
+    First,
+    Last,
+  };
+
   [webhosthidden]
   [experimental]
   interface IComponentState 
@@ -46,6 +55,7 @@ namespace Microsoft.ReactNative
   [experimental]
   [webhosthidden]
   runtimeclass LosingFocusEventArgs : Microsoft.ReactNative.Composition.Input.RoutedEventArgs {
+    FocusNavigationDirection Direction { get; };
     Microsoft.ReactNative.ComponentView NewFocusedComponent { get; };
     Microsoft.ReactNative.ComponentView OldFocusedComponent { get; };
 
@@ -56,6 +66,7 @@ namespace Microsoft.ReactNative
   [experimental]
   [webhosthidden]
   runtimeclass GettingFocusEventArgs : Microsoft.ReactNative.Composition.Input.RoutedEventArgs {
+    FocusNavigationDirection Direction { get; };
     Microsoft.ReactNative.ComponentView NewFocusedComponent { get; };
     Microsoft.ReactNative.ComponentView OldFocusedComponent { get; };
 
 
@@ -256,11 +256,9 @@ void ComponentView::CustomCommandHandler(const HandleCommandDelegate &handler) n
   m_customCommandHandler = handler;
 }
 
-void ComponentView::HandleCommand(
-    winrt::hstring commandName,
-    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+void ComponentView::HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {
   if (m_customCommandHandler) {
-    m_customCommandHandler(*this, commandName, args);
+    m_customCommandHandler(*this, args);
   }
 }
 
@@ -285,7 +283,7 @@ void ComponentView::parent(const winrt::Microsoft::ReactNative::ComponentView &p
     m_parent = parent;
     if (!parent) {
       if (oldRootView && oldRootView->GetFocusedComponent() == *this) {
-        oldRootView->TrySetFocusedComponent(oldParent);
+        oldRootView->TrySetFocusedComponent(oldParent, winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
       }
     }
     if (parent) {
@@ -424,7 +422,7 @@ void ComponentView::GotFocus(winrt::event_token const &token) noexcept {
 
 bool ComponentView::TryFocus() noexcept {
   if (auto root = rootComponentView()) {
-    return root->TrySetFocusedComponent(*get_strong());
+    return root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
   }
 
   return false;
 
@@ -228,9 +228,7 @@ struct ComponentView : public ComponentViewT<ComponentView> {
   virtual void UnmountChildComponentView(
       const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
       uint32_t index) noexcept;
-  virtual void HandleCommand(
-      winrt::hstring commandName,
-      const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept;
+  virtual void HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept;
   virtual void FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept;
   virtual void OnPointerEntered(
       const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept;
 
@@ -248,23 +248,26 @@ void ComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared con
   base_type::updateEventEmitter(eventEmitter);
 }
 
-void ComponentView::HandleCommand(
-    winrt::hstring commandName,
-    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+void ComponentView::HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {
+  base_type::HandleCommand(args);
+  if (args.Handled())
+    return;
+
+  auto commandName = args.CommandName();
   if (commandName == L"focus") {
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(*get_strong());
+      root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
     }
     return;
   }
   if (commandName == L"blur") {
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(nullptr); // Todo store this component as previously focused element
+      root->TrySetFocusedComponent(
+          nullptr, winrt::Microsoft::ReactNative::FocusNavigationDirection::None); // Todo store this component as
+                                                                                   // previously focused element
     }
     return;
   }
-
-  base_type::HandleCommand(commandName, args);
 }
 
 bool ComponentView::CapturePointer(const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer) noexcept {
 
@@ -38,8 +38,7 @@ struct ComponentView : public ComponentViewT<
   virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual OuterVisual() const noexcept;
   void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
   const facebook::react::SharedViewEventEmitter &GetEventEmitter() const noexcept;
-  void HandleCommand(winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept
-      override;
+  void HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept override;
   facebook::react::Props::Shared props() noexcept override;
   virtual const facebook::react::SharedViewProps &viewProps() const noexcept {
     static facebook::react::SharedViewProps emptyProps;
 
@@ -67,17 +67,21 @@ struct TraceUpdate {
 };
 
 void DebuggingOverlayComponentView::HandleCommand(
-    winrt::hstring commandName,
-    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+    const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {
+  base_type::HandleCommand(args);
+  if (args.Handled())
+    return;
+
+  auto commandName = args.CommandName();
   if (commandName == L"highlightTraceUpdates") {
     std::vector<TraceUpdate> updates;
-    winrt::Microsoft::ReactNative::ReadArgs(args, updates);
+    winrt::Microsoft::ReactNative::ReadArgs(args.CommandArgs(), updates);
     // TODO should create visuals that get removed after 2 seconds
     return;
   }
   if (commandName == L"highlightElements") {
     std::vector<ElementRectangle> elements;
-    winrt::Microsoft::ReactNative::ReadArgs(args, elements);
+    winrt::Microsoft::ReactNative::ReadArgs(args.CommandArgs(), elements);
 
     if (auto root = rootComponentView()) {
       auto rootVisual = root->OuterVisual();
@@ -106,8 +110,6 @@ void DebuggingOverlayComponentView::HandleCommand(
     }
     return;
   }
-
-  base_type::HandleCommand(commandName, args);
 }
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation
Original file line number	Diff line number	Diff line change
`@@ -256,11 +256,9 @@ void ComponentView::CustomCommandHandler(const HandleCommandDelegate &handler) n`
`256`	`256`	`m_customCommandHandler = handler;`
`257`	`257`	`}`
`258`	`258`
`259`		`-void ComponentView::HandleCommand(`
`260`		`- winrt::hstring commandName,`
`261`		`- const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {`
	`259`	`+void ComponentView::HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {`
`262`	`260`	`if (m_customCommandHandler) {`
`263`		`- m_customCommandHandler(*this, commandName, args);`
	`261`	`+ m_customCommandHandler(*this, args);`
`264`	`262`	`}`
`265`	`263`	`}`
`266`	`264`
`@@ -285,7 +283,7 @@ void ComponentView::parent(const winrt::Microsoft::ReactNative::ComponentView &p`
`285`	`283`	`m_parent = parent;`
`286`	`284`	`if (!parent) {`
`287`	`285`	`if (oldRootView && oldRootView->GetFocusedComponent() == *this) {`
`288`		`- oldRootView->TrySetFocusedComponent(oldParent);`
	`286`	`+ oldRootView->TrySetFocusedComponent(oldParent, winrt::Microsoft::ReactNative::FocusNavigationDirection::None);`
`289`	`287`	`}`
`290`	`288`	`}`
`291`	`289`	`if (parent) {`
`@@ -424,7 +422,7 @@ void ComponentView::GotFocus(winrt::event_token const &token) noexcept {`
`424`	`422`
`425`	`423`	`bool ComponentView::TryFocus() noexcept {`
`426`	`424`	`if (auto root = rootComponentView()) {`
`427`		`- return root->TrySetFocusedComponent(*get_strong());`
	`425`	`+ return root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);`
`428`	`426`	`}`
`429`	`427`
`430`	`428`	`return false;`
Original file line number	Diff line number	Diff line change
`@@ -248,23 +248,26 @@ void ComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared con`
`248`	`248`	`base_type::updateEventEmitter(eventEmitter);`
`249`	`249`	`}`
`250`	`250`
`251`		`-void ComponentView::HandleCommand(`
`252`		`- winrt::hstring commandName,`
`253`		`- const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {`
	`251`	`+void ComponentView::HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {`
	`252`	`+ base_type::HandleCommand(args);`
	`253`	`+ if (args.Handled())`
	`254`	`+ return;`
	`255`	`+`
	`256`	`+ auto commandName = args.CommandName();`
`254`	`257`	`if (commandName == L"focus") {`
`255`	`258`	`if (auto root = rootComponentView()) {`
`256`		`- root->TrySetFocusedComponent(*get_strong());`
	`259`	`+ root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);`
`257`	`260`	`}`
`258`	`261`	`return;`
`259`	`262`	`}`
`260`	`263`	`if (commandName == L"blur") {`
`261`	`264`	`if (auto root = rootComponentView()) {`
`262`		`- root->TrySetFocusedComponent(nullptr); // Todo store this component as previously focused element`
	`265`	`+ root->TrySetFocusedComponent(`
	`266`	`+ nullptr, winrt::Microsoft::ReactNative::FocusNavigationDirection::None); // Todo store this component as`
	`267`	`+ // previously focused element`
`263`	`268`	`}`
`264`	`269`	`return;`
`265`	`270`	`}`
`266`		`-`
`267`		`- base_type::HandleCommand(commandName, args);`
`268`	`271`	`}`
`269`	`272`
`270`	`273`	`bool ComponentView::CapturePointer(const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer) noexcept {`