@base-ui-components/react/cjs/composite/root/useCompositeRoot.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import type { TextDirection } from '../../direction-provider/DirectionContext.js';
import { type Dimensions } from '../composite.js';
export interface UseCompositeRootParameters {
    orientation?: 'horizontal' | 'vertical' | 'both';
    cols?: number;
    loop?: boolean;
    highlightedIndex?: number;
    onHighlightedIndexChange?: (index: number) => void;
    dense?: boolean;
    direction?: TextDirection;
    itemSizes?: Array<Dimensions>;
    rootRef?: React.Ref<Element>;
    /**
     * When `true`, pressing the Home key moves focus to the first item,
     * and pressing the End key moves focus to the last item.
     * @default false
     */
    enableHomeAndEndKeys?: boolean;
    /**
     * When `true`, keypress events on Composite's navigation keys
     * be stopped with event.stopPropagation()
     * @default false
     */
    stopEventPropagation?: boolean;
}
/**
 * @ignore - internal hook.
 */
export declare function useCompositeRoot(params: UseCompositeRootParameters): {
    getRootProps: (externalProps?: {}) => import("../../utils/types.js").WithBaseUIEvent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
    highlightedIndex: number;
    onHighlightedIndexChange: (index: number) => void;
    elementsRef: React.RefObject<(HTMLDivElement | null)[]>;
};