feat(react-list): add useListBase_unstable and useListItemBase_unstable hooks#35821
Draft
dmytrokirpa wants to merge 3 commits intomasterfrom
Draft
feat(react-list): add useListBase_unstable and useListItemBase_unstable hooks#35821dmytrokirpa wants to merge 3 commits intomasterfrom
dmytrokirpa wants to merge 3 commits intomasterfrom
Conversation
…le hooks Adds base types and hooks for both List and ListItem components: - ListBaseProps/ListBaseState: type aliases for ListProps/ListState (no design props to omit) - ListItemBaseProps/ListItemBaseState: type aliases for ListItemProps/ListItemState (no design props to omit) - useListBase_unstable: handles ARIA roles (aria-multiselectable), keyboard navigation (arrow keys), selection state (controlled/uncontrolled), validateListItem, and slot structure - useListItemBase_unstable: handles keyboard handling (Enter/Space/Arrow keys), selection, focus management (focusableGroup, arrowNavigation tabster), checkmark slot with onChange, and ARIA attributes - Refactors styled hooks to delegate to base hooks Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
dmytrokirpa
force-pushed
the
feat/react-list-base-hooks
branch
from
85e0559 to
5445c2e
Compare
dmytrokirpa
changed the base branch from
experimental/component-base-hooks
to
master
|
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/CalendarCompat 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png | 1236 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png | 1107 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png | 495 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png | 403 | Changed |
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 - RTL.default.chromium.png | 5570 | Changed |
| vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png | 7530 | Changed |
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png | 404 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 139 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 516 | Changed |
vr-tests-react-components/TagPicker 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - Dark Mode.chromium.png | 658 | Changed |
| vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png | 1319 | Changed |
| vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png | 635 | Changed |
There were 4 duplicate changes discarded. Check the build logs for more information.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
📊 Bundle size report
Unchanged fixtures
|
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
ListBaseProps/ListBaseStateas type aliases forListProps/ListState(List has no design-specific props to omit)ListItemBaseProps/ListItemBaseStateas type aliases forListItemProps/ListItemState(ListItem also has no design-specific props)useListBase_unstablehook containing the full List component logic:rolecalculation (list/listbox/grid based on navigation/selection mode),aria-multiselectableuseArrowNavigationGroupfor vertical arrow key navigationuseControllableState,useListSelectionvalidateListItemfor dev-mode checks on proper element types and rolesnavigationMode)useListItemBase_unstablehook containing the full ListItem component logic:useFocusableGroup,useArrowNavigationGroup(horizontal for composite mode)aria-selected,aria-disabled,tabIndex,rolepropagated from list contextcreateListItemActionEventdispatchinguseList_unstableanduseListItem_unstableto delegate directly to base hooksNote on design props
List and ListItem have no design-specific props (no
appearance,size, orshape). The base types are therefore equivalent to the full types. This follows the established pattern for consistency across the component library, enabling future styling customization.Test plan
useList_unstablestill works as before (behavior unchanged)useListItem_unstablestill works as before (behavior unchanged)useListBase_unstablehandles all selection modesuseListItemBase_unstablehandles all keyboard interactions🤖 Generated with Claude Code