@@ -20,30 +20,39 @@ import {Orientation} from 'react-aria';
20
20
import React , { createContext , ForwardedRef , forwardRef , ReactElement , ReactNode } from 'react' ;
21
21
22
22
// TODO: Replace NavigationRenderProps with AriaNavigationProps, once it exists
23
- export interface NavigationProps extends NavigationRenderProps , /* RenderProps<NavigationRenderProps>, */ DOMProps , SlotProps {
23
+ export interface NavigationProps extends NavigationRenderProps , RenderProps < NavigationRenderProps > , DOMProps , SlotProps {
24
24
/** Whether the navigation is disabled. */
25
25
isDisabled ?: boolean ,
26
26
/** Handler that is called when a navigation item is clicked. */
27
27
onAction ?: ( key : Key ) => void
28
28
}
29
29
30
30
export interface NavigationRenderProps {
31
+ /**
32
+ * Whether the navigation is disabled.
33
+ * @selector [data-disabled]
34
+ */
35
+ isDisabled ?: boolean ,
31
36
/**
32
37
* The orientation of the navigation.
33
38
* @selector [data-orientation="horizontal | vertical"]
34
39
*/
35
40
orientation : Orientation
36
41
}
37
42
38
- export const NavigationContext = createContext < ContextValue < NavigationProps , HTMLUListElement > > ( null ) ;
43
+ // TODO: HTMLDivElement is the wrong type
44
+ export const NavigationContext = createContext < ContextValue < NavigationProps , HTMLDivElement > > ( null ) ;
39
45
40
46
function Navigation ( props : NavigationProps , ref : ForwardedRef < HTMLDivElement > ) {
41
47
[ props , ref ] = useContextProps ( props , ref , NavigationContext ) ;
42
48
43
49
let renderProps = useRenderProps ( {
44
50
...props ,
45
51
defaultClassName : 'react-aria-Navigation' ,
46
- values : { isDisabled : props . isDisabled }
52
+ values : {
53
+ isDisabled : props . isDisabled ,
54
+ orientation : props . orientation || 'horizontal'
55
+ }
47
56
} ) ;
48
57
49
58
let domProps = filterDOMProps ( props ) ;
@@ -56,11 +65,11 @@ function Navigation(props: NavigationProps, ref: ForwardedRef<HTMLDivElement>) {
56
65
ref = { ref }
57
66
data-disabled = { props . isDisabled || undefined } >
58
67
< NavigationContext . Provider value = { props } >
59
- < ul
68
+ < ol
60
69
className = "react-aria-NavigationList"
61
70
data-orientation = { props . orientation || 'horizontal' } >
62
71
{ renderProps . children }
63
- </ ul >
72
+ </ ol >
64
73
</ NavigationContext . Provider >
65
74
</ nav >
66
75
) ;
0 commit comments