@payfit/unity-components/dist/esm/components/menu/parts/MenuSection.d.ts

import { MenuSectionProps as AriaMenuSectionProps } from 'react-aria-components/Menu';
interface MenuSectionProps<TItemType extends object> extends AriaMenuSectionProps<TItemType> {
    /**
     * The label rendered above the section's items.
     * Always present in the DOM for accessibility; use `isTitleHidden` to hide it visually.
     */
    title: string;
    /**
     * When `true`, hides the section title visually while keeping it accessible to screen readers.
     * @default false
     */
    isTitleHidden?: boolean;
    className?: string;
}
/**
 * `MenuSection` groups related menu items under a labelled heading inside a `MenuContent` panel.
 * The section title provides both visual context and an accessible label for assistive technologies.
 * Use multiple `MenuSection` blocks separated by `MenuSeparator` to divide a menu into distinct
 * named categories.
 *
 * For collection-based rendering pass an `items` array and a render function as children.
 * For static content pass `RawMenuItem` elements directly as children.
 * @template TItemType - The shape of each item object when using collection-based rendering via the `items` prop.
 * @param {MenuSectionProps<TItemType>} props - The component props
 * @example
 * ```tsx
 * import { Menu, MenuContent, MenuSection, MenuTrigger, RawMenuItem } from '@payfit/unity-components'
 *
 * function ActionsMenu() {
 *   return (
 *     <Menu>
 *       <MenuTrigger>Actions</MenuTrigger>
 *       <MenuContent>
 *         <MenuSection title="File">
 *           <RawMenuItem>New</RawMenuItem>
 *           <RawMenuItem>Open</RawMenuItem>
 *         </MenuSection>
 *         <MenuSeparator />
 *         <MenuSection title="Edit">
 *           <RawMenuItem>Cut</RawMenuItem>
 *           <RawMenuItem>Copy</RawMenuItem>
 *         </MenuSection>
 *       </MenuContent>
 *     </Menu>
 *   )
 * }
 * ```
 * @example
 * ```tsx
 * // Collection-based rendering with items prop
 * import { Menu, MenuContent, MenuSection, MenuTrigger, RawMenuItem } from '@payfit/unity-components'
 *
 * const items = [
 *   { id: '1', label: 'New' },
 *   { id: '2', label: 'Open' },
 * ]
 *
 * function ActionsMenu() {
 *   return (
 *     <Menu>
 *       <MenuTrigger>Actions</MenuTrigger>
 *       <MenuContent>
 *         <MenuSection title="File" items={items}>
 *           {(item) => <RawMenuItem key={item.id}>{item.label}</RawMenuItem>}
 *         </MenuSection>
 *       </MenuContent>
 *     </Menu>
 *   )
 * }
 * ```
 * @remarks
 * - The `title` is always rendered in the DOM. Set `isTitleHidden` to `true` to visually hide it
 *   while preserving screen reader accessibility — useful when the grouping is implied by context
 * - Wrap multiple sections in a `MenuContent` and separate them with `MenuSeparator` to create
 *   visually distinct groups within a single menu
 * @see {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/menu/parts/MenuSection.tsx Source code on GitHub}
 */
export declare function MenuSection<TItemType extends object>({ children, items, className, title, isTitleHidden, ...rest }: MenuSectionProps<TItemType>): import("react/jsx-runtime").JSX.Element;
export declare namespace MenuSection {
    var displayName: string;
}
export {};