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

React component for responsive pagination

import type { AnchorHTMLAttributes } from 'react';
import type { ButtonHTMLAttributes } from 'react';
import type { FC } from 'react';
import type { HTMLAttributes } from 'react';
import type { ReactNode } from 'react';

declare type BaseItem = {
    type: string;
    key: string;
    label: string | ReactNode;
    a11yLabel?: string;
    active?: boolean | undefined;
    gotoPage?: number | undefined;
    listItemProps?: HTMLAttributes<HTMLLIElement> | undefined;
};

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

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

/**
 * 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<({
    type: "page";
    page: number;
} | {
    type: "active";
    page: number;
} | {
    type: "\u2026L" | "\u2026R";
    page: undefined;
})[] | ({
    type: "page";
    page: number;
} | {
    type: "active";
    page: number;
} | {
    type: "<";
    page: number | undefined;
} | {
    type: ">";
    page: number | undefined;
})[], 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<({
    type: "page";
    page: number;
} | {
    type: "active";
    page: number;
} | {
    type: "\u2026L" | "\u2026R";
    page: undefined;
})[], void, unknown>;

/**
 * @public
 */
export declare function dropNavThenEllipsis(initialComposition: ReadonlyArray<CompositionItem>): Generator<({
    type: "page";
    page: number;
} | {
    type: "active";
    page: number;
} | {
    type: "\u2026L" | "\u2026R";
    page: undefined;
})[], void, unknown>;

declare type EllipsisItem = BaseItem & {
    type: 'ellipsis';
    gotoPage?: undefined;
};

/**
 * @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 NavBase = BaseItem & {
    type: NavType;
    anchorProps: AnchorHTMLAttributes<HTMLAnchorElement>;
    buttonProps: ButtonHTMLAttributes<HTMLButtonElement>;
};

declare type NavDisabledItem = NavBase & {
    gotoPage?: undefined;
    spanAsAnchorProps: HTMLAttributes<HTMLSpanElement>;
};

declare type NavItem = NavBase & {
    gotoPage: number;
};

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

declare type PageItem = BaseItem & {
    type: 'page';
    gotoPage: number;
    active?: boolean;
    anchorProps: AnchorHTMLAttributes<HTMLAnchorElement>;
};

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;
    containerClassName?: string;
    extraClassName?: string;
    pageItemClassName?: string;
    pageLinkClassName?: string;
    activeItemClassName?: string;
    inactiveItemClassName?: string;
    disabledItemClassName?: string;
    disabledLinkClassName?: string;
    navClassName?: string;
    previousClassName?: string;
    nextClassName?: string;
    classMerge?: (classNames: string[]) => string;
    previousLabel?: string | ReactNode;
    nextLabel?: string | ReactNode;
    ariaPreviousLabel?: string;
    ariaNextLabel?: string;
    ariaPageLabel?: (page: number, active: boolean) => string | undefined;
    renderNav?: boolean | 'none' | 'anchor' | 'anchor-disabled-span' | 'button';
    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 { }