refactor(react-card): make base hooks tabster-free#36004
Open
dmytrokirpa wants to merge 2 commits intomicrosoft:masterfrom
Open
refactor(react-card): make base hooks tabster-free#36004dmytrokirpa wants to merge 2 commits intomicrosoft:masterfrom
dmytrokirpa wants to merge 2 commits intomicrosoft:masterfrom
Conversation
Move @fluentui/react-tabster usage out of useCardBase_unstable and useCardSelectable into useCard_unstable. The base hooks no longer manage focusable-group attributes or the focus-aware selection restriction predicate. useCardSelectable now reads an optional shouldRestrictTriggerAction predicate from CardBaseProps; useCard_unstable provides one based on useFocusFinders + useFocusWithin to preserve existing behavior. This lets headless component packages consume the base hooks without pulling in @fluentui/react-tabster.
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Charts-DonutChart 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png | 5581 | Changed |
| vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png | 7530 | Changed |
| vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png | 5570 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 880 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 129 | Changed |
vr-tests-react-components/ProgressBar converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 59 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 27 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 114 | Changed |
vr-tests-react-components/TagPicker 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png | 658 | Changed |
| vr-tests-react-components/TagPicker.disabled - RTL.chromium.png | 635 | Changed |
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
There were 3 duplicate changes discarded. Check the build logs for more information.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Move
@fluentui/react-tabsterusage out ofuseCardBase_unstableanduseCardSelectableintouseCard_unstable. The base hooks no longer manage focusable-group attributes or the focus-aware selection-restriction predicate, so they can be consumed by headless component packages without pulling in@fluentui/react-tabster.Changes
useCardBase_unstableno longer callsuseFocusWithin/useFocusableGroup. It computesinteractivepurely from the presence of pointer/mouse event props.useCardSelectableno longer callsuseFocusFindersand no longer requires a card ref. It reads an optionalshouldRestrictTriggerActionpredicate fromCardBaseProps. Events that target the auto-rendered checkbox / floating-action slot are always allowed (the predicate isn't called for them).useCard_unstablenow owns all focus management: it sets upuseFocusWithin(merged with the user ref), builds a focus-aware restriction predicate viauseFocusFinders, computes focusable-group attributes viauseFocusableGroup, and applies them tostate.rootwhen the card isn't selectable/disabled andfocusMode !== 'off'.CardBasePropsexposes a new optionalshouldRestrictTriggerActionfield so consumers of the base hook can opt in to focus-aware restriction without a tabster dependency.API change
Verification
yarn nx run react-card:test— 88/88 pass, snapshots unchanged.Cardis preserved (focusable-group attributes, focus-within outline, focus-aware restriction).Why
Prerequisite for adding a headless
Cardcomponent to@fluentui/react-headless-components-preview(follow-up PR) that should not depend on@fluentui/react-tabster.