[Bug]: createFocusOutlineStyle "focus-within" does not work after upgrade from v9.1.1 to v9.2.0

[flora8984461]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 17.96 GB / 31.91 GB
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.41)
    Internet Explorer: 11.0.19041.1566

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/thirsty-moon-p01443?file=/index.tsx

Bug Description

Actual Behavior

If change the @fluentui/react-components version to v9.2.0, build and run, tab to focus the link, cannot see the outline style

Expected Behavior

If change the @fluentui/react-components version to v9.1.1, build and run, tab to focus the link, can see the outline style

From version 9.1.1 to 9.2, I notice the @fluentui/react-tabster version goes from v9.0.3 to v9.1.0. Maybe some changes in @fluentui/react-tabster or its dependency tabster?

(Note: it does not matter if I use li or div as parent)

Any help is really appreciated.

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[ling1726]

The problem here is that the focus-within ponyfill changed. While any focus outline style will work correctly for focus-visible or focus while inside a FluentProvider, extra work is needed for focus-within. This was changed in #24154

We should export the useFocusWithin hook

fluentui/packages/react-components/react-tabster/src/hooks/useFocusWithin.ts

Lines 5 to 10 in 64090fd

	/**
	* A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
	* like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
	* @returns ref to the element that uses `:focus-within` styles
	*/
	export function useFocusWithin<TElement extends HTMLElement = HTMLElement>() {

[flora8984461]

@ling1726 thank you for your quick response on this issue. I should pay more attention to the changelogs / release notes Lol.

I notice that '"@fluentui/react-components"' has no exported member 'useFocusWithin'.ts, I have to export from "@fluentui/react-tabster", is this by design?

Also, will there be any plan to add those APIs in doc page?

Thank you ^_^

[ling1726]

yeah, the fact that it is not exported is a bug and I'll keep this issue open until we fix that :)

[layershifter]

FYI: I created a PR to re-export useFocusWithIn() hook (#26533).