@navikt/ds-react/esm/pagination/Pagination.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React from "react";
import { PaginationItemProps, PaginationItemType } from "./PaginationItem.js";
interface RenderItemProps extends Pick<PaginationItemProps, "className" | "disabled" | "selected" | "icon" | "iconPosition"> {
    children: React.ReactNode;
    onClick: React.MouseEventHandler<HTMLButtonElement>;
    page: number;
    size: Exclude<PaginationProps["size"], undefined>;
}
export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
    /**
     * Current page.
     *
     * Pagination indexing starts at 1.
     */
    page: number;
    /**
     * Number of always visible pages before and after the current page.
     * @default 1
     */
    siblingCount?: number;
    /**
     * Number of always visible pages at the beginning and end.
     * @default 1
     */
    boundaryCount?: number;
    /**
     * Callback when current page changes.
     */
    onPageChange?: (page: number) => void;
    /**
     * Total number of pages.
     */
    count: number;
    /**
     * Changes padding, height and font-size.
     * @default "medium"
     */
    size?: "medium" | "small" | "xsmall";
    /**
     * Display text alongside "previous" and "next" icons.
     * @default false
     */
    prevNextTexts?: boolean;
    /**
     * Override pagination item rendering.
     * @default PaginationItem
     */
    renderItem?: (item: RenderItemProps) => ReturnType<React.FC>;
    /**
     * Pagination heading. We recommend adding heading instead of `aria-label` to help assistive technologies with an extra navigation-stop.
     */
    srHeading?: {
        tag: "h2" | "h3" | "h4" | "h5" | "h6";
        text: string;
    };
}
interface PaginationType extends React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>> {
    Item: PaginationItemType;
}
export declare const getSteps: ({ page, count, boundaryCount, siblingCount, }: Pick<PaginationProps, "page" | "count" | "boundaryCount" | "siblingCount">) => (string | number)[];
/**
 * TODO: These classes can be removed in darkside update
 * - navds-pagination--prev-next--with-text
 * - navds-pagination__prev-next
 */
/**
 * A component that displays pagination controls.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/pagination)
 * @see 🏷️ {@link PaginationProps}
 *
 * @example
 * ```jsx
 * <Pagination
 *   page={pageState}
 *   onPageChange={setPageState}
 *   count={9}
 *   boundaryCount={1}
 *   siblingCount={1}
 * />
 * ```
 */
export declare const Pagination: PaginationType;
export default Pagination;