Function ListBoxSectionInner

packages/react-aria-components/src/ListBox.tsx:453–489

(
  props: ListBoxSectionProps<T>,
  ref: ForwardedRef<HTMLElement>,
  section: Node<T>,
  className = 'react-aria-ListBoxSection'
)

}

function ListBoxSectionInner<T>(
  props: ListBoxSectionProps<T>,
  ref: ForwardedRef<HTMLElement>,
  section: Node<T>,
  className = 'react-aria-ListBoxSection'
) {
  let state = useContext(ListStateContext)!;
  let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
  let {CollectionBranch} = useContext(CollectionRendererContext);
  let [headingRef, heading] = useSlot();
  let {headingProps, groupProps} = useListBoxSection({
    heading,
    'aria-label': props['aria-label'] ?? undefined
  });
  let renderProps = useRenderProps({
    ...props,
    id: undefined,
    children: undefined,
    defaultClassName: className,
    values: undefined
  });

  let DOMProps = filterDOMProps(props as any, {global: true});
  delete DOMProps.id;

  return (
    <dom.section {...mergeProps(DOMProps, renderProps, groupProps)} ref={ref}>
      <HeaderContext.Provider value={{...headingProps, ref: headingRef}}>
        <CollectionBranch
          collection={state.collection}
          parent={section}
          renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)}
        />
      </HeaderContext.Provider>
    </dom.section>
  );
}

/**
 * A ListBoxSection represents a section within a ListBox.