"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ListSubheader } from "../list/ListSubheader.js";
import { MenuItemGroup } from "../menu/MenuItemGroup.js";
import { useEnsuredId } from "../useEnsuredId.js";
/**
 * **Client Component**
 *
 * This component is more of a "convenience component" to help enforce the
 * correct accessibility when creating an `<optgroup>` with the `Select`
 * component.
 *
 * @example Simple Example
 * ```tsx
 * import { Select } from "@react-md/core/form/Select";
 * import { OptGroup } from "@react-md/core/form/OptGroup";
 * import { Option } from "@react-md/core/form/Option";
 * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <Select label="Choose an animal">
 *       <OptGroup label="Land" labelProps={{ className: "custom-class-name" }}>
 *         <Option value={0}>Cat</Option>
 *         <Option value={1}>Dog</Option>
 *         <Option value={2}>Tiger</Option>
 *       </OptGroup>
 *       <OptGroup label="Water" labelProps={{ rightAddon: <FavoriteIcon /> }}>
 *         <Option value={3}>Dolphin</Option>
 *         <Option value={4}>Flounder</Option>
 *       </OptGroup>
 *     </Select>
 *
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/select | Select Demos}
 * @since 6.0.0
 */ export const OptGroup = /*#__PURE__*/ forwardRef(function OptGroup(props, ref) {
    const { children, label, labelProps, ...remaining } = props;
    const labelId = useEnsuredId(labelProps?.id, "optgroup");
    return /*#__PURE__*/ _jsxs(MenuItemGroup, {
        "aria-labelledby": labelId,
        ...remaining,
        ref: ref,
        children: [
            /*#__PURE__*/ _jsx(ListSubheader, {
                ...labelProps,
                id: labelId,
                children: label
            }),
            children
        ]
    });
});

//# sourceMappingURL=OptGroup.js.map