diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx index 5229595ea62..27fe122a818 100644 --- a/packages/react-aria-components/src/GridList.tsx +++ b/packages/react-aria-components/src/GridList.tsx @@ -21,7 +21,6 @@ import {DraggableCollectionState, DroppableCollectionState, Collection as IColle import {FieldInputContext, SelectableCollectionContext} from './context'; import {filterDOMProps, inertValue, LoadMoreSentinelProps, useLoadMoreSentinel, useObjectRef} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared'; -import {HeaderContext} from './Header'; import {ListStateContext} from './ListBox'; import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react'; import {SelectionIndicatorContext} from './SelectionIndicator'; @@ -585,11 +584,11 @@ export interface GridListSectionProps extends SectionProps {} /** * A GridListSection represents a section within a GridList. */ -export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode, (props: GridListSectionProps, ref: ForwardedRef, item: Node) => { +export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode, (props: GridListSectionProps, ref: ForwardedRef, item: Node) => { let state = useContext(ListStateContext)!; let {CollectionBranch} = useContext(CollectionRendererContext); let headingRef = useRef(null); - ref = useObjectRef(ref); + ref = useObjectRef(ref); let {rowHeaderProps, rowProps, rowGroupProps} = useGridListSection({ 'aria-label': props['aria-label'] ?? undefined }, state, ref); @@ -604,33 +603,34 @@ export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode, delete DOMProps.id; return ( -
-
+ ); }); -const GridListHeaderContext = createContext | null>(null); +export const GridListHeaderContext = createContext, HTMLDivElement>>({}); +const GridListHeaderInnerContext = createContext | null>(null); -export const GridListHeader = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: HTMLAttributes, ref: ForwardedRef) { - [props, ref] = useContextProps(props, ref, HeaderContext); - let rowHeaderProps = useContext(GridListHeaderContext); +export const GridListHeader = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(props: HTMLAttributes, ref: ForwardedRef) { + [props, ref] = useContextProps(props, ref, GridListHeaderContext); + let rowHeaderProps = useContext(GridListHeaderInnerContext); return ( -
+
{props.children}
-
+ ); }); diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts index a76ea9c6e8c..58db6254251 100644 --- a/packages/react-aria-components/src/index.ts +++ b/packages/react-aria-components/src/index.ts @@ -39,7 +39,7 @@ export {DropZone, DropZoneContext} from './DropZone'; export {FieldError, FieldErrorContext} from './FieldError'; export {FileTrigger} from './FileTrigger'; export {Form, FormContext} from './Form'; -export {GridListLoadMoreItem, GridList, GridListItem, GridListContext, GridListHeader, GridListSection} from './GridList'; +export {GridListLoadMoreItem, GridList, GridListItem, GridListContext, GridListHeader, GridListHeaderContext, GridListSection} from './GridList'; export {Group, GroupContext} from './Group'; export {Header, HeaderContext} from './Header'; export {Heading} from './Heading';