From 65b289ef0e47b684365058f16b50587a5fae8633 Mon Sep 17 00:00:00 2001
From: chajun <86579954+chpalac@users.noreply.github.com>
Date: Tue, 8 Nov 2022 11:48:33 -0300
Subject: [PATCH] chore: add both options to useArrowNavigationGroup (#25568)

* chore: add both options to useArrowNavigationGroup

* chore: add changes

* chore: update api
---
 ...react-tabster-caace24f-01b0-4a75-b0c1-286a6698b7ae.json | 7 +++++++
 .../react-tabster/etc/react-tabster.api.md                 | 2 +-
 .../react-tabster/src/hooks/useArrowNavigationGroup.ts     | 4 +++-
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-tabster-caace24f-01b0-4a75-b0c1-286a6698b7ae.json

diff --git a/change/@fluentui-react-tabster-caace24f-01b0-4a75-b0c1-286a6698b7ae.json b/change/@fluentui-react-tabster-caace24f-01b0-4a75-b0c1-286a6698b7ae.json
new file mode 100644
index 0000000000000..fb0a90ba8e503
--- /dev/null
+++ b/change/@fluentui-react-tabster-caace24f-01b0-4a75-b0c1-286a6698b7ae.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add both options to axis config",
+  "packageName": "@fluentui/react-tabster",
+  "email": "chassunc@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tabster/etc/react-tabster.api.md b/packages/react-components/react-tabster/etc/react-tabster.api.md
index 6cd1a8a36a220..af80d9164e99d 100644
--- a/packages/react-components/react-tabster/etc/react-tabster.api.md
+++ b/packages/react-components/react-tabster/etc/react-tabster.api.md
@@ -47,7 +47,7 @@ export const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions)
 
 // @public (undocumented)
 export interface UseArrowNavigationGroupOptions {
-    axis?: 'vertical' | 'horizontal' | 'grid';
+    axis?: 'vertical' | 'horizontal' | 'grid' | 'both';
     circular?: boolean;
     ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];
     memorizeCurrent?: boolean;
diff --git a/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts b/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts
index 7d89faec820a1..993b86f242730 100644
--- a/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts
+++ b/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts
@@ -7,7 +7,7 @@ export interface UseArrowNavigationGroupOptions {
    * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally
    * @defaultValue vertical
    */
-  axis?: 'vertical' | 'horizontal' | 'grid';
+  axis?: 'vertical' | 'horizontal' | 'grid' | 'both';
   /**
    * Focus will cycle to the first/last elements of the group without stopping
    */
@@ -60,6 +60,8 @@ function axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Typ
       return Types.MoverDirections.Horizontal;
     case 'grid':
       return Types.MoverDirections.Grid;
+    case 'both':
+      return Types.MoverDirections.Both;
 
     case 'vertical':
     default: