[Bug]: Tab Component skips animation for falsy values

[mathis-m]

Library

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

System Info

"@fluentui/react-components": "^9.54.7",

Are you reporting an Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/syg2df?file=src%2Fexample.tsx

Bug Description

Actual Behavior

Any falsy value is treaded as if there was no selection before

1. Tab 1(value 0) is selected
2. Select any other tab
3. Observe that no animation is happening

Expected Behavior

1. Tab 1(value 0) is selected
2. Select any other tab
3. Animation / Transition will be visible

Why

It is a common use case to have a enum to to determine the current view.
By default the first defined enum value is handled as number 0.

The logic inside:

https://github.com/microsoft/fluentui/blob/95285c315e0461daa35d22c8974e061943bb268e/packages/react-components/react-tabs/library/src/components/Tab/useTabAnimatedIndicator.styles.ts#L81-L112

Has multiple checks that just does an implicit casting of the value meaning it will not play the animation.

Instead it should be checked for null || undefined explicitly.

Logs

n/a

Requested priority

Low

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

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