@mantine/core/lib/components/OverflowList/OverflowList.d.ts

React components library focused on usability, accessibility and developer experience

import { Ref } from 'react';
import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
export type OverflowListStylesNames = 'root';
export type OverflowListCssVariables = {
    root: '--ol-gap';
};
export interface OverflowListProps<T = any> extends BoxProps, StylesApiProps<OverflowListFactory>, ElementProps<'div', 'children'> {
    /** Array of items to display */
    data: T[];
    /** Function to render item */
    renderItem: (item: T, index: number) => React.ReactNode;
    /** Function to render hidden items */
    renderOverflow: (items: T[]) => React.ReactNode;
    /** Number of rows to display @default 1 */
    maxRows?: number;
    /** Maximum number of visible items @default Infinity */
    maxVisibleItems?: number;
    /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'xs' */
    gap?: MantineSpacing;
    ref?: Ref<HTMLDivElement>;
}
export type OverflowListFactory = Factory<{
    props: OverflowListProps<any>;
    ref: HTMLDivElement;
    stylesNames: OverflowListStylesNames;
    vars: OverflowListCssVariables;
    signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;
}>;
export declare const OverflowList: (<T = any>(props: OverflowListProps<T>) => React.JSX.Element) & import("../..").ThemeExtend<{
    props: OverflowListProps<any>;
    ref: HTMLDivElement;
    stylesNames: OverflowListStylesNames;
    vars: OverflowListCssVariables;
    signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;
}> & import("../..").ComponentClasses<{
    props: OverflowListProps<any>;
    ref: HTMLDivElement;
    stylesNames: OverflowListStylesNames;
    vars: OverflowListCssVariables;
    signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;
}> & Record<string, never> & {
    varsResolver: import("../..").VarsResolver<{
        props: OverflowListProps<any>;
        ref: HTMLDivElement;
        stylesNames: OverflowListStylesNames;
        vars: OverflowListCssVariables;
        signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;
    }>;
} & import("../..").FactoryComponentWithProps<{
    props: OverflowListProps<any>;
    ref: HTMLDivElement;
    stylesNames: OverflowListStylesNames;
    vars: OverflowListCssVariables;
    signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;
}> & {
    displayName?: string;
};