}
role="button"
- id={ id }
+ id={ generateItemWrapperCompositeId( idPrefix ) }
aria-pressed={ isSelected }
aria-labelledby={ labelId }
aria-describedby={ descriptionId }
@@ -210,65 +272,20 @@ function ListItem< Item >( {
width: 'auto',
} }
>
- { primaryAction && 'RenderModal' in primaryAction && (
-
-
- setIsModalOpen( true )
- }
- />
- }
- >
- { isModalOpen && (
-
- action={ primaryAction }
- items={ [ item ] }
- closeModal={ () =>
- setIsModalOpen( false )
- }
- />
- ) }
-
-
+ { primaryAction && (
+
) }
- { primaryAction &&
- ! ( 'RenderModal' in primaryAction ) && (
-
- {
- primaryAction.callback(
- [ item ],
- { registry }
- );
- } }
- />
- }
- />
-
- ) }
( {
label={ __( 'Actions' ) }
accessibleWhenDisabled
disabled={ ! actions.length }
- onKeyDown={ ( event: {
- key: string;
- preventDefault: () => void;
- } ) => {
- if (
- event.key ===
- 'ArrowDown'
- ) {
- // Prevent the default behaviour (open dropdown menu) and go down.
- event.preventDefault();
- store.move(
- store.down()
- );
- }
- if (
- event.key === 'ArrowUp'
- ) {
- // Prevent the default behavior (open dropdown menu) and go up.
- event.preventDefault();
- store.move(
- store.up()
- );
- }
- } }
+ onKeyDown={
+ onDropdownTriggerKeyDown
+ }
/>
}
/>
@@ -331,6 +327,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
view,
} = props;
const baseId = useInstanceId( ViewList, 'view-list' );
+
const selectedItem = data?.findLast( ( item ) =>
selection.includes( getItemId( item ) )
);
@@ -353,34 +350,108 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
const onSelect = ( item: Item ) =>
onChangeSelection( [ getItemId( item ) ] );
- const getItemDomId = useCallback(
- ( item?: Item ) =>
- item ? `${ baseId }-${ getItemId( item ) }` : undefined,
+ const generateCompositeItemIdPrefix = useCallback(
+ ( item: Item ) => `${ baseId }-${ getItemId( item ) }`,
[ baseId, getItemId ]
);
- const store = useCompositeStore( {
- defaultActiveId: getItemDomId( selectedItem ),
- } ) as CompositeStore; // TODO, remove once composite APIs are public
+ const isActiveCompositeItem = useCallback(
+ ( item: Item, idToCheck: string ) => {
+ // All composite items use the same prefix in their IDs.
+ return idToCheck.startsWith(
+ generateCompositeItemIdPrefix( item )
+ );
+ },
+ [ generateCompositeItemIdPrefix ]
+ );
- // Manage focused item, when the active one is removed from the list.
- const isActiveIdInList = useStoreState(
- store,
- ( state: { items: any[]; activeId: any } ) =>
- state.items.some(
- ( item: { id: any } ) => item.id === state.activeId
- )
+ // Controlled state for the active composite item.
+ const [ activeCompositeId, setActiveCompositeId ] = useState<
+ string | null | undefined
+ >( undefined );
+
+ // Update the active composite item when the selected item changes.
+ useEffect( () => {
+ if ( selectedItem ) {
+ setActiveCompositeId(
+ generateItemWrapperCompositeId(
+ generateCompositeItemIdPrefix( selectedItem )
+ )
+ );
+ }
+ }, [ selectedItem, generateCompositeItemIdPrefix ] );
+
+ const activeItemIndex = data.findIndex( ( item ) =>
+ isActiveCompositeItem( item, activeCompositeId ?? '' )
);
+ const previousActiveItemIndex = usePrevious( activeItemIndex );
+ const isActiveIdInList = activeItemIndex !== -1;
+
+ const selectCompositeItem = useCallback(
+ (
+ targetIndex: number,
+ // Allows invokers to specify a custom function to generate the
+ // target composite item ID
+ generateCompositeId: ( idPrefix: string ) => string
+ ) => {
+ // Clamping between 0 and data.length - 1 to avoid out of bounds.
+ const clampedIndex = Math.min(
+ data.length - 1,
+ Math.max( 0, targetIndex )
+ );
+ const itemIdPrefix = generateCompositeItemIdPrefix(
+ data[ clampedIndex ]
+ );
+ const targetCompositeItemId = generateCompositeId( itemIdPrefix );
+
+ setActiveCompositeId( targetCompositeItemId );
+ document.getElementById( targetCompositeItemId )?.focus();
+ },
+ [ data, generateCompositeItemIdPrefix ]
+ );
+
+ // Select a new active composite item when the current active item
+ // is removed from the list.
useEffect( () => {
- if ( ! isActiveIdInList ) {
- // Prefer going down, except if there is no item below (last item), then go up (last item in list).
- if ( store.down() ) {
- store.move( store.down() );
- } else if ( store.up() ) {
- store.move( store.up() );
- }
+ const wasActiveIdInList =
+ previousActiveItemIndex !== undefined &&
+ previousActiveItemIndex !== -1;
+ if ( ! isActiveIdInList && wasActiveIdInList ) {
+ // By picking `previousActiveItemIndex` as the next item index, we are
+ // basically picking the item that would have been after the deleted one.
+ // If the previously active (and removed) item was the last of the list,
+ // we will select the item before it — which is the new last item.
+ selectCompositeItem(
+ previousActiveItemIndex,
+ generateItemWrapperCompositeId
+ );
}
- }, [ isActiveIdInList ] );
+ }, [ isActiveIdInList, selectCompositeItem, previousActiveItemIndex ] );
+
+ // Prevent the default behavior (open dropdown menu) and instead select the
+ // dropdown menu trigger on the previous/next row.
+ // https://github.com/ariakit/ariakit/issues/3768
+ const onDropdownTriggerKeyDown = useCallback(
+ ( event: React.KeyboardEvent< HTMLButtonElement > ) => {
+ if ( event.key === 'ArrowDown' ) {
+ // Select the dropdown menu trigger item in the next row.
+ event.preventDefault();
+ selectCompositeItem(
+ activeItemIndex + 1,
+ generateDropdownTriggerCompositeId
+ );
+ }
+ if ( event.key === 'ArrowUp' ) {
+ // Select the dropdown menu trigger item in the previous row.
+ event.preventDefault();
+ selectCompositeItem(
+ activeItemIndex - 1,
+ generateDropdownTriggerCompositeId
+ );
+ }
+ },
+ [ selectCompositeItem, activeItemIndex ]
+ );
const hasData = data?.length;
if ( ! hasData ) {
@@ -404,22 +475,23 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
render={ }
className="dataviews-view-list"
role="grid"
- store={ store }
+ activeId={ activeCompositeId }
+ setActiveId={ setActiveCompositeId }
>
{ data.map( ( item ) => {
- const id = getItemDomId( item );
+ const id = generateCompositeItemIdPrefix( item );
return (
);
} ) }