@fluentui/react/lib/utilities/ButtonGrid/ButtonGrid.types.d.ts

Reusable React components for building web experiences.

import * as React from 'react';
import type { IStyle, ITheme } from '../../Styling';
import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
export interface IButtonGrid {
}
export interface IButtonGridProps extends React.TableHTMLAttributes<HTMLTableElement>, React.RefAttributes<HTMLElement> {
    /**
     * Gets the component ref.
     */
    componentRef?: IRefObject<IButtonGrid>;
    /**
     * Items to display in a ButtonGrid with the specified number of columns
     */
    items: any[];
    /**
     * The number of columns
     */
    columnCount: number;
    /**
     * Custom renderer for the individual items
     */
    onRenderItem: (item: any, index: number) => JSX.Element;
    /**
     * Whether focus should cycle back to the beginning once the user navigates past the end (and vice versa).
     * Only relevant if `doNotContainWithinFocusZone` is not true.
     */
    shouldFocusCircularNavigate?: boolean;
    /**
     * If false (the default), the ButtonGrid is contained inside a FocusZone.
     * If true, a FocusZone is not used.
     * @default false
     */
    doNotContainWithinFocusZone?: boolean;
    /**
     * Class name for the FocusZone container for the ButtonGrid.
     * @deprecated Use `styles.focusedContainer` to define styling for the focus zone container
     */
    containerClassName?: string;
    /**
     * Handler for when focus leaves the ButtonGrid.
     */
    onBlur?: () => void;
    /**
     * If true, uses radiogroup semantics for the ButtonGrid.
     * This should be set to true for single-row grids, for two reasons:
     *   1. Radios are a more simple and understandable control,
     *      and a better fit for a single-dimensional selection control
     *   2. Multiple browsers use heuristics to strip table and grid roles from single-row tables with no column headers.
     */
    isSemanticRadio?: boolean;
    /**
     * Position this ButtonGrid is in the parent set (index in a parent menu, for example)
     */
    ariaPosInSet?: number;
    /**
     * @deprecated Use `ariaPosInSet`
     */
    positionInSet?: number;
    /**
     * Size of the parent set (size of parent menu, for example)
     */
    ariaSetSize?: number;
    /**
     * @deprecated Use `ariaSetSize`
     */
    setSize?: number;
    /**
     * Theme to apply to the component.
     */
    theme?: ITheme;
    /**
     * Optional styles for the component.
     */
    styles?: IStyleFunctionOrObject<IButtonGridStyleProps, IButtonGridStyles>;
}
/**
 * Properties required to build the styles for the ButtonGrid component.
 */
export interface IButtonGridStyleProps {
    /**
     * Theme to apply to the ButtonGrid
     */
    theme: ITheme;
}
/**
 * Styles for the ButtonGrid Component.
 */
export interface IButtonGridStyles {
    /**
     * Style for the table container of a ButtonGrid.
     */
    root: IStyle;
    /**
     * Style for the table cells of the ButtonGrid.
     */
    tableCell: IStyle;
    /**
     * Style for the FocusZone container for the ButtonGrid.
     */
    focusedContainer?: IStyle;
}