diff --git a/change/@fluentui-react-tabster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json b/change/@fluentui-react-tabster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json new file mode 100644 index 00000000000000..e7fd20458e4791 --- /dev/null +++ b/change/@fluentui-react-tabster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add `unstable_hasDefault` option in `useArrowNavigationGroup` that specifies the arrow navigation group has default focusable item", + "packageName": "@fluentui/react-tabster", + "email": "yuanboxue@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 a6063a42a23c05..e7a5482fe9ed45 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -53,6 +53,7 @@ export interface UseArrowNavigationGroupOptions { ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown']; memorizeCurrent?: boolean; tabbable?: boolean; + unstable_hasDefault?: boolean; } // @public diff --git a/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts b/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts index 993b86f2427303..f9aca20f45e4af 100644 --- a/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts +++ b/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts @@ -25,6 +25,13 @@ export interface UseArrowNavigationGroupOptions { * Tabster should ignore default handling of keydown events */ ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown']; + /** + * The default focusable item in the group will be an element with Focusable.isDefault property. + * Note that there is no way in \@fluentui/react-tabster to set default focusable element, + * and this option is currently for internal testing purposes only. + */ + // eslint-disable-next-line @typescript-eslint/naming-convention + unstable_hasDefault?: boolean; } /** @@ -32,7 +39,15 @@ export interface UseArrowNavigationGroupOptions { * @param options - Options to configure keyboard navigation */ export const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => { - const { circular, axis, memorizeCurrent, tabbable, ignoreDefaultKeydown } = options; + const { + circular, + axis, + memorizeCurrent, + tabbable, + ignoreDefaultKeydown, + // eslint-disable-next-line @typescript-eslint/naming-convention + unstable_hasDefault, + } = options; const tabster = useTabster(); if (tabster) { @@ -43,8 +58,9 @@ export const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions mover: { cyclic: !!circular, direction: axisToMoverDirection(axis ?? 'vertical'), - memorizeCurrent: memorizeCurrent, - tabbable: tabbable, + memorizeCurrent, + tabbable, + hasDefault: unstable_hasDefault, }, ...(ignoreDefaultKeydown && { focusable: {