@@ -463,7 +463,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
463
463
) ;
464
464
} ) ;
465
465
466
- export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
466
+ export interface UNSTABLE_TreeLoadingIndicatorRenderProps extends Pick < TreeItemRenderProps , 'isFocused' | 'isFocusVisible' > {
467
467
/**
468
468
* What level the tree item has within the tree.
469
469
* @selector [data-level]
@@ -474,41 +474,47 @@ export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
474
474
export interface TreeLoaderProps extends RenderProps < UNSTABLE_TreeLoadingIndicatorRenderProps > , StyleRenderProps < UNSTABLE_TreeLoadingIndicatorRenderProps > { }
475
475
476
476
export const UNSTABLE_TreeLoadingIndicator = createLeafComponent ( 'loader' , function TreeLoader < T extends object > ( props : TreeLoaderProps , ref : ForwardedRef < HTMLDivElement > , item : Node < T > ) {
477
- let state = useContext ( TreeStateContext ) ;
478
- // This loader row is is non-interactable, but we want the same aria props calculated as a typical row
479
- // @ts -ignore
480
- let { rowProps} = useTreeItem ( { node : item } , state , ref ) ;
477
+ let state = useContext ( TreeStateContext ) ! ;
478
+ ref = useObjectRef < HTMLDivElement > ( ref ) ;
479
+ let { rowProps, gridCellProps, ...states } = useTreeItem ( { node : item } , state , ref ) ;
481
480
let level = rowProps [ 'aria-level' ] || 1 ;
482
481
482
+ // TODO: now that we are making the loading indicators focusable, guess we need to add all the styling props
483
+ // Prob just want Focus and focusVisible, maybe hover?
483
484
let ariaProps = {
485
+ role : 'row' ,
484
486
'aria-level' : rowProps [ 'aria-level' ] ,
485
487
'aria-posinset' : rowProps [ 'aria-posinset' ] ,
486
- 'aria-setsize' : rowProps [ 'aria-setsize' ]
488
+ 'aria-setsize' : rowProps [ 'aria-setsize' ] ,
489
+ tabIndex : rowProps . tabIndex
487
490
} ;
488
491
492
+ let { isFocusVisible, focusProps} = useFocusRing ( ) ;
493
+
489
494
let renderProps = useRenderProps ( {
490
495
...props ,
491
496
id : undefined ,
492
497
children : item . rendered ,
493
498
defaultClassName : 'react-aria-TreeLoader' ,
494
499
values : {
495
- level
500
+ level,
501
+ isFocused : states . isFocused ,
502
+ isFocusVisible
496
503
}
497
504
} ) ;
498
505
499
506
return (
500
- < >
501
- < div
502
- role = "row"
503
- ref = { ref }
504
- { ...mergeProps ( filterDOMProps ( props as any ) , ariaProps ) }
505
- { ...renderProps }
506
- data-level = { level } >
507
- < div role = "gridcell" aria-colindex = { 1 } >
508
- { renderProps . children }
509
- </ div >
507
+ < div
508
+ ref = { ref }
509
+ { ...mergeProps ( filterDOMProps ( props as any ) , ariaProps , focusProps ) }
510
+ { ...renderProps }
511
+ data-focused = { states . isFocused || undefined }
512
+ data-focus-visible = { isFocusVisible || undefined }
513
+ data-level = { level } >
514
+ < div { ...gridCellProps } >
515
+ { renderProps . children }
510
516
</ div >
511
- </ >
517
+ </ div >
512
518
) ;
513
519
} ) ;
514
520
0 commit comments