@@ -132,8 +132,20 @@ export type CollectionNodeClass<T> = {
132
132
readonly type : string
133
133
} ;
134
134
135
- // TODO: discuss the former Type arg, renamed to CollectionNodeClass
136
- function useSSRCollectionNode < T extends Element > ( CollectionNodeClass : CollectionNodeClass < T > , props : object , ref : ForwardedRef < T > , rendered ?: any , children ?: ReactNode , render ?: ( node : Node < any > ) => ReactElement ) {
135
+ function createCollectionNodeClass ( type : string ) : CollectionNodeClass < any > {
136
+ let NodeClass = function ( key : Key ) {
137
+ return new CollectionNode ( type , key ) ;
138
+ } as any ;
139
+ NodeClass . type = type ;
140
+ return NodeClass ;
141
+ }
142
+
143
+ function useSSRCollectionNode < T extends Element > ( CollectionNodeClass : CollectionNodeClass < T > | string , props : object , ref : ForwardedRef < T > , rendered ?: any , children ?: ReactNode , render ?: ( node : Node < any > ) => ReactElement ) {
144
+ // To prevent breaking change, if CollectionNodeClass is a string, create a CollectionNodeClass using the string as the type
145
+ if ( typeof CollectionNodeClass === 'string' ) {
146
+ CollectionNodeClass = createCollectionNodeClass ( CollectionNodeClass ) ;
147
+ }
148
+
137
149
// During SSR, portals are not supported, so the collection children will be wrapped in an SSRContext.
138
150
// Since SSR occurs only once, we assume that the elements are rendered in order and never re-render.
139
151
// Therefore we can create elements in our collection document during render so that they are in the
@@ -164,11 +176,9 @@ function useSSRCollectionNode<T extends Element>(CollectionNodeClass: Collection
164
176
return < CollectionNodeClass . type ref = { itemRef } > { children } </ CollectionNodeClass . type > ;
165
177
}
166
178
167
- // TODO: have it still accept a string along side a collectionNodeClass, just have it default to a base node class if so
168
- // TODO: check the signature of the CollectionNodeClass here and other places (aka useSSRCollectionNode and branchCompoennt). If I use the generic it complains. Perhaps it should be unknown? Or maybe the definitions in Listbox and stuff shouldn't use a generic?
169
- export function createLeafComponent < T extends object , P extends object , E extends Element > ( CollectionNodeClass : CollectionNodeClass < any > , render : ( props : P , ref : ForwardedRef < E > ) => ReactElement | null ) : ( props : P & React . RefAttributes < T > ) => ReactElement | null ;
170
- export function createLeafComponent < T extends object , P extends object , E extends Element > ( CollectionNodeClass : CollectionNodeClass < any > , render : ( props : P , ref : ForwardedRef < E > , node : Node < T > ) => ReactElement | null ) : ( props : P & React . RefAttributes < T > ) => ReactElement | null ;
171
- export function createLeafComponent < P extends object , E extends Element > ( CollectionNodeClass : CollectionNodeClass < any > , render : ( props : P , ref : ForwardedRef < E > , node ?: any ) => ReactElement | null ) : ( props : P & React . RefAttributes < any > ) => ReactElement | null {
179
+ export function createLeafComponent < T extends object , P extends object , E extends Element > ( CollectionNodeClass : CollectionNodeClass < any > | string , render : ( props : P , ref : ForwardedRef < E > ) => ReactElement | null ) : ( props : P & React . RefAttributes < T > ) => ReactElement | null ;
180
+ export function createLeafComponent < T extends object , P extends object , E extends Element > ( CollectionNodeClass : CollectionNodeClass < any > | string , render : ( props : P , ref : ForwardedRef < E > , node : Node < T > ) => ReactElement | null ) : ( props : P & React . RefAttributes < T > ) => ReactElement | null ;
181
+ export function createLeafComponent < P extends object , E extends Element > ( CollectionNodeClass : CollectionNodeClass < any > | string , render : ( props : P , ref : ForwardedRef < E > , node ?: any ) => ReactElement | null ) : ( props : P & React . RefAttributes < any > ) => ReactElement | null {
172
182
let Component = ( { node} ) => render ( node . props , node . props . ref , node ) ;
173
183
let Result = ( forwardRef as forwardRefType ) ( ( props : P , ref : ForwardedRef < E > ) => {
174
184
let focusableProps = useContext ( FocusableContext ) ;
@@ -199,7 +209,7 @@ export function createLeafComponent<P extends object, E extends Element>(Collect
199
209
return Result ;
200
210
}
201
211
202
- export function createBranchComponent < T extends object , P extends { children ?: any } , E extends Element > ( CollectionNodeClass : CollectionNodeClass < any > , render : ( props : P , ref : ForwardedRef < E > , node : Node < T > ) => ReactElement | null , useChildren : ( props : P ) => ReactNode = useCollectionChildren ) : ( props : P & React . RefAttributes < E > ) => ReactElement | null {
212
+ export function createBranchComponent < T extends object , P extends { children ?: any } , E extends Element > ( CollectionNodeClass : CollectionNodeClass < any > | string , render : ( props : P , ref : ForwardedRef < E > , node : Node < T > ) => ReactElement | null , useChildren : ( props : P ) => ReactNode = useCollectionChildren ) : ( props : P & React . RefAttributes < E > ) => ReactElement | null {
203
213
let Component = ( { node} ) => render ( node . props , node . props . ref , node ) ;
204
214
let Result = ( forwardRef as forwardRefType ) ( ( props : P , ref : ForwardedRef < E > ) => {
205
215
let children = useChildren ( props ) ;
0 commit comments