From 9057764705846a783db89274cd01cc5cc1d7adcc Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 7 Feb 2023 10:31:03 +0100 Subject: [PATCH 1/6] hasDefault --- ...-tabster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json | 7 +++++++ .../react-tabster/etc/react-tabster.api.md | 1 + .../src/hooks/useArrowNavigationGroup.ts | 11 ++++++++--- 3 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 change/@fluentui-react-tabster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json 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..b8c230ff231013 --- /dev/null +++ b/change/@fluentui-react-tabster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add `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..acc575692ef786 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -50,6 +50,7 @@ export const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions) export interface UseArrowNavigationGroupOptions { axis?: 'vertical' | 'horizontal' | 'grid' | 'both'; circular?: boolean; + hasDefault?: boolean; ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown']; memorizeCurrent?: boolean; tabbable?: boolean; diff --git a/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts b/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts index 993b86f2427303..a25732c347f93b 100644 --- a/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts +++ b/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts @@ -25,6 +25,10 @@ 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 + */ + hasDefault?: boolean; } /** @@ -32,7 +36,7 @@ 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, hasDefault } = options; const tabster = useTabster(); if (tabster) { @@ -43,8 +47,9 @@ export const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions mover: { cyclic: !!circular, direction: axisToMoverDirection(axis ?? 'vertical'), - memorizeCurrent: memorizeCurrent, - tabbable: tabbable, + memorizeCurrent, + tabbable, + hasDefault: !!hasDefault, }, ...(ignoreDefaultKeydown && { focusable: { From 6961b42dcfd8293f78c359f5b80c6cf3dcab3495 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 7 Feb 2023 13:10:43 +0100 Subject: [PATCH 2/6] unstable --- ...ster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json | 2 +- .../react-tabster/etc/react-tabster.api.md | 2 +- .../src/hooks/useArrowNavigationGroup.ts | 15 ++++++++++++--- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/change/@fluentui-react-tabster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json b/change/@fluentui-react-tabster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json index b8c230ff231013..e7fd20458e4791 100644 --- a/change/@fluentui-react-tabster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json +++ b/change/@fluentui-react-tabster-8a739d1e-a76c-4604-90e3-5ddb2d3da5fa.json @@ -1,6 +1,6 @@ { "type": "minor", - "comment": "feat: add `hasDefault` option in `useArrowNavigationGroup` that specifies the arrow navigation group has default focusable item", + "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 acc575692ef786..e7a5482fe9ed45 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -50,10 +50,10 @@ export const useArrowNavigationGroup: (options?: UseArrowNavigationGroupOptions) export interface UseArrowNavigationGroupOptions { axis?: 'vertical' | 'horizontal' | 'grid' | 'both'; circular?: boolean; - hasDefault?: boolean; 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 a25732c347f93b..35ed8dfee1aaf3 100644 --- a/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts +++ b/packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts @@ -28,7 +28,8 @@ export interface UseArrowNavigationGroupOptions { /** * The default focusable item in the group will be an element with Focusable.isDefault property */ - hasDefault?: boolean; + // eslint-disable-next-line @typescript-eslint/naming-convention + unstable_hasDefault?: boolean; } /** @@ -36,7 +37,15 @@ export interface UseArrowNavigationGroupOptions { * @param options - Options to configure keyboard navigation */ export const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => { - const { circular, axis, memorizeCurrent, tabbable, ignoreDefaultKeydown, hasDefault } = options; + const { + circular, + axis, + memorizeCurrent, + tabbable, + ignoreDefaultKeydown, + // eslint-disable-next-line @typescript-eslint/naming-convention + unstable_hasDefault, + } = options; const tabster = useTabster(); if (tabster) { @@ -49,7 +58,7 @@ export const useArrowNavigationGroup = (options: UseArrowNavigationGroupOptions direction: axisToMoverDirection(axis ?? 'vertical'), memorizeCurrent, tabbable, - hasDefault: !!hasDefault, + hasDefault: !!unstable_hasDefault, }, ...(ignoreDefaultKeydown && { focusable: { From a2a1aee5f2d0cea83a5f770d96b272523afe1221 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 7 Feb 2023 13:29:13 +0100 Subject: [PATCH 3/6] test --- .../TabList/__snapshots__/TabList.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap b/packages/react-components/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap index 23713405d80eb6..dcc5b23bc18516 100644 --- a/packages/react-components/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap +++ b/packages/react-components/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap @@ -4,7 +4,7 @@ exports[`TabList renders tabs when disabled 1`] = `