import { DropdownMenuOption } from './DropdownMenuOption';
// from react-stately
import { useListBoxSection } from '../react-aria'; // from react-aria
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export function DropdownMenuSection(_ref) {
  let {
    componentClass,
    section,
    state,
    rootId
  } = _ref;
  const {
    itemProps,
    headingProps,
    groupProps
  } = useListBoxSection({
    heading: section.rendered,
    'aria-label': section['aria-label']
  });
  const headingId = section.props.id ?? `${rootId}__group--${section.index}`;
  const sharedProps = {
    state,
    rootId,
    componentClass
  };
  return /*#__PURE__*/_jsx(_Fragment, {
    children: /*#__PURE__*/_jsxs("li", {
      ...itemProps,
      className: `${componentClass}__menu-item-group`,
      children: [section.rendered && /*#__PURE__*/_jsx("div", {
        ...section.props,
        ...headingProps,
        id: headingId,
        className: `${componentClass}__menu-item-group-label`,
        children: section.rendered
      }), /*#__PURE__*/_jsx("ul", {
        ...groupProps,
        "aria-labelledby": headingId,
        children: [...section.childNodes].map(node => /*#__PURE__*/_jsx(DropdownMenuOption, {
          item: node,
          ...sharedProps
        }, node.key))
      })]
    })
  });
}
export default DropdownMenuSection;