diff --git a/change/@fluentui-react-tabster-b2d43df9-1387-475e-b4e3-a4204207aba2.json b/change/@fluentui-react-tabster-b2d43df9-1387-475e-b4e3-a4204207aba2.json new file mode 100644 index 00000000000000..b64644e6e8d8eb --- /dev/null +++ b/change/@fluentui-react-tabster-b2d43df9-1387-475e-b4e3-a4204207aba2.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Bump keyborg to 2.0.0 and tabster to 4.0.1", + "packageName": "@fluentui/react-tabster", + "email": "lingfangao@hotmail.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 a5bb20d7d6d516..a6063a42a23c05 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -68,8 +68,8 @@ export const useFocusFinders: () => { findAllFocusable: (container: HTMLElement, acceptCondition?: ((el: HTMLElement) => boolean) | undefined) => HTMLElement[]; findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined; findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined; - findNextFocusable: (currentElement: HTMLElement, options?: Pick) => HTMLElement | null | undefined; - findPrevFocusable: (currentElement: HTMLElement, options?: Pick) => HTMLElement | null | undefined; + findNextFocusable: (currentElement: HTMLElement, options?: Pick, 'container'>) => HTMLElement | null | undefined; + findPrevFocusable: (currentElement: HTMLElement, options?: Pick, 'container'>) => HTMLElement | null | undefined; }; // @public (undocumented) diff --git a/packages/react-components/react-tabster/package.json b/packages/react-components/react-tabster/package.json index 766a82bebafc93..a0bf88018710cc 100644 --- a/packages/react-components/react-tabster/package.json +++ b/packages/react-components/react-tabster/package.json @@ -34,8 +34,8 @@ "@fluentui/react-shared-contexts": "^9.2.0", "@fluentui/react-theme": "^9.1.5", "@fluentui/react-utilities": "^9.5.1", - "keyborg": "^1.2.1", - "tabster": "^3.0.6", + "keyborg": "^2.0.0", + "tabster": "^4.1.1", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts b/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts index 63763cc7039edd..132aa5d4d2fd68 100644 --- a/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts +++ b/packages/react-components/react-tabster/src/hooks/useFocusFinders.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { Types as TabsterTypes } from 'tabster'; +import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; import { useTabster } from './useTabster'; /** @@ -7,6 +8,7 @@ import { useTabster } from './useTabster'; */ export const useFocusFinders = () => { const tabster = useTabster(); + const { targetDocument } = useFluent(); // Narrow props for now and let need dictate additional props in the future const findAllFocusable = React.useCallback( @@ -25,15 +27,29 @@ export const useFocusFinders = () => { ]); const findNextFocusable = React.useCallback( - (currentElement: HTMLElement, options: Pick = {}) => - tabster?.focusable.findNext({ currentElement, ...options }), - [tabster], + (currentElement: HTMLElement, options: Pick, 'container'> = {}) => { + if (!tabster || !targetDocument) { + return null; + } + + const { container = targetDocument.body } = options; + + return tabster.focusable.findNext({ currentElement, container }); + }, + [tabster, targetDocument], ); const findPrevFocusable = React.useCallback( - (currentElement: HTMLElement, options: Pick = {}) => - tabster?.focusable.findPrev({ currentElement, ...options }), - [tabster], + (currentElement: HTMLElement, options: Pick, 'container'> = {}) => { + if (!tabster || !targetDocument) { + return null; + } + + const { container = targetDocument.body } = options; + + return tabster.focusable.findPrev({ currentElement, container }); + }, + [tabster, targetDocument], ); return { diff --git a/yarn.lock b/yarn.lock index 4de19f3f0304d2..a3a44a05986065 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17175,10 +17175,10 @@ karma@6.4.0: ua-parser-js "^0.7.30" yargs "^16.1.1" -keyborg@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/keyborg/-/keyborg-1.2.1.tgz#0503719c9b2791d8e4f1a00f7eae7e29327416fa" - integrity sha512-PXjcJb7d4ecncFnJgq1TzLBx38+LbTPDpbwNCXebMzp3xaZeG//7ydWpISouBVyjRtJFuIvpIryme4U2dYGUEg== +keyborg@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/keyborg/-/keyborg-2.0.0.tgz#937e0346bb4e438c0cf26ca6989c56820b4754f6" + integrity sha512-RWY8nWrzRkwTQLaKyDtbTu5SOb5L4B20UzAsBHlQDFZqVY/+Mid0bQ7MVTC8vbOTrWY2xkkzj8gZF9Ua7re4xA== keygrip@~1.1.0: version "1.1.0" @@ -24119,12 +24119,12 @@ table@^6.0.4, table@^6.0.7: string-width "^4.2.3" strip-ansi "^6.0.1" -tabster@^3.0.6: - version "3.0.6" - resolved "https://registry.yarnpkg.com/tabster/-/tabster-3.0.6.tgz#8aa00199e2fadb8de3af8d2f5e1b68d531022fda" - integrity sha512-KrzAMDfnYZWqGu/pPXzsBPEA5l2tBPi8z8newbBCPktHnjdsTB534xQQ+3eKItologlNCJg8ijScajdyWjGAYg== +tabster@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/tabster/-/tabster-4.1.1.tgz#4ba615098772cdfc568cca3d5440118f18b29580" + integrity sha512-kuO6cxHpDl889ZyY98Fx4Iofiu2U9z7ii2rvPOQgKH5CJMKJ4GddygaEygRETOQV0IDpg4TWJRiDLMAHeS+hDw== dependencies: - keyborg "^1.2.1" + keyborg "^2.0.0" tslib "^2.3.1" tachometer@0.7.0: