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

React components library focused on usability, accessibility and developer experience

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;
    /** Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items @default 'end' */
    collapseFrom?: 'start' | 'end';
    /** A function to resolve a unique key for each item. Used to detect when the contents of `data`
     * change (for example when items are reordered while the length stays the same) so the
     * visible/overflow split can be recomputed. Required to detect reordering when `data` contains
     * objects; for primitive items (strings, numbers) the item value is used by default. */
    getItemKey?: (item: T, index: number) => React.Key;
}
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;
};
export declare namespace OverflowList {
    type Props = OverflowListProps;
    type Factory = OverflowListFactory;
    type StylesNames = OverflowListStylesNames;
    type CssVariables = OverflowListCssVariables;
}