import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ShortenedText } from "../../../../ShortenedText/ShortenedText.js";
import { typedUiMenuContextStore } from "../../context.js";
import { e } from "../../menuBem.js";
/**
 * @internal
 */
export function DefaultUiMenuGroupItem({ item, }) {
    const { createSelector, useContextStore } = typedUiMenuContextStore();
    const selector = createSelector((ctx) => ({
        makeItemId: ctx.makeItemId,
        ItemComponent: ctx.ItemComponent,
    }));
    const { makeItemId, ItemComponent } = useContextStore(selector);
    const menuGroupItemId = makeItemId(item);
    return (_jsxs("ul", { className: e("group"), role: "group", "aria-labelledby": menuGroupItemId, children: [
            _jsx("li", { className: e("group-title-container"), role: "presentation", id: menuGroupItemId, children: _jsx(ShortenedText, { className: e("group-title"), ellipsisPosition: "end", children: item.stringTitle }) }), item.subItems.map((groupItem, index) => (_jsx(ItemComponent, { item: groupItem }, "id" in groupItem ? groupItem.id : index)))] }));
}
