react-responsive-pagination/dist/index.d.ts

React component for responsive pagination

import type { FC } from 'react';
import type { ReactNode } from 'react';

declare type BaseItem = {
    type: string;
    key: string;
    label: string | ReactNode;
    a11yLabel?: string;
};

/**
 * legacy - may be removed
 * @public
 */
export declare const bootstrap4PaginationPreset: {};

/**
 * legacy - may be removed
 * @public
 */
export declare const bootstrap5PaginationPreset: {};

declare type ClickableItem = BaseItem & {
    gotoPage: number;
    active?: boolean;
};

/**
 * Combine two or more narrowBehaviours
 * @public
 */
export declare const combine: (...behaviours: ReadonlyArray<NarrowBehaviour>) => NarrowBehaviour;

declare type CompositionActivePage = {
    type: 'active';
    page: number;
};

declare type CompositionEllipsis = {
    type: '…L' | '…R';
    page: undefined;
};

declare type CompositionItem = CompositionPage | CompositionActivePage | CompositionEllipsis | CompositionPrevious | CompositionNext;

declare type CompositionNext = {
    type: '>';
    page: number | undefined;
};

declare type CompositionPage = {
    type: 'page';
    page: number;
};

declare type CompositionPrevious = {
    type: '<';
    page: number | undefined;
};

/**
 * @public
 */
export declare function defaultLabelBehaviour({ a11yLabel, label, }: PaginationItem): ReactNode;

/**
 * @public
 */
export declare function dropEllipsis(initialComposition: ReadonlyArray<CompositionItem>, metaData?: NarrowBehaviourMetaData): Generator<CompositionItem[], void, unknown>;

/**
 * @public
 */
export declare function dropEllipsisThenNav(initialComposition: ReadonlyArray<CompositionItem>): Generator<CompositionItem[], void, unknown>;

/**
 * @public
 */
export declare function dropFirstAndLast(initialComposition: ReadonlyArray<CompositionItem>, metaData?: NarrowBehaviourMetaData): Generator<CompositionItem[], void, unknown>;

/**
 * @public
 */
export declare function dropNav(initialComposition: ReadonlyArray<CompositionItem>): Generator<CompositionItem[], void, unknown>;

/**
 * @public
 */
export declare function dropNavThenEllipsis(initialComposition: ReadonlyArray<CompositionItem>): Generator<CompositionItem[], void, unknown>;

declare type EllipsisItem = NonClickableItem & {
    type: 'ellipsis';
};

/**
 * @public
 */
export declare type LabelBehaviour = (item: PaginationItem) => ReactNode;

/**
 * NarrowBehaviours will yield their narrowest composition first and then
 * yield a less narrow composition
 * They should not yield the initialComposition
 * @public
 */
export declare type NarrowBehaviour = (composition: ReadonlyArray<CompositionItem>, metaData?: NarrowBehaviourMetaData) => Generator<CompositionItem[]>;

declare type NarrowBehaviourMetaData = {
    appliedBehaviours?: NarrowBehaviour[];
};

declare type NavDisabledItem = NonClickableItem & {
    type: NavType;
};

declare type NavItem = ClickableItem & {
    type: NavType;
};

declare type NavType = 'next' | 'previous';

declare type NonClickableItem = BaseItem & {
    gotoPage: undefined;
    a11yHidden?: boolean;
};

declare type PageItem = ClickableItem & {
    type: 'page';
};

declare type PaginationItem = NavItem | NavDisabledItem | EllipsisItem | PageItem;

/**
 * @public
 */
declare const ResponsivePaginationComponent: FC<ResponsivePaginationProps>;
export default ResponsivePaginationComponent;

/**
 * @public
 */
export declare type ResponsivePaginationProps = {
    current: number;
    total: number;
    onPageChange: (page: number) => void;
    maxWidth?: number;
    narrowBehaviour?: NarrowBehaviour;
    className?: string;
    extraClassName?: string;
    pageItemClassName?: string;
    pageLinkClassName?: string;
    activeItemClassName?: string;
    disabledItemClassName?: string;
    disabledLinkClassName?: string;
    navClassName?: string;
    previousClassName?: string;
    nextClassName?: string;
    previousLabel?: string | ReactNode;
    nextLabel?: string | ReactNode;
    ariaPreviousLabel?: string;
    ariaNextLabel?: string;
    renderNav?: boolean;
    ariaCurrentAttr?: boolean;
    linkHref?: ((page: number) => string) | 'hash' | 'omit';
    labelBehaviour?: LabelBehaviour;
};

/**
 * @public
 */
export declare function srOnlySpanLabel({ a11yActiveLabel, srOnlyClassName, }?: {
    a11yActiveLabel?: string;
    srOnlyClassName?: string;
}): (item: PaginationItem) => ReactNode;

/**
 * @public
 */
export declare const v1_bootstrap4PaginationPreset: {
    ariaCurrentAttr: false;
    labelBehaviour: LabelBehaviour;
};

export { }