@stihl-design-system/components/components/Pagination/Pagination.utils.d.ts

Welcome to the STIHL Design System react component library.

import { DSLanguage } from '../../utils';
import { PaginationProps } from './Pagination';
export type PaginationAriaAttributes = 'aria-label' | 'aria-labelledby';
export type PaginationLanguage = DSLanguage;
export type PaginationTranslations = {
    /** Label for the "previous page" navigation button. */
    previousPage: string;
    /** Label for the "next page" navigation button. */
    nextPage: string;
    /**
     * Label for a specific page link.
     *
     * Placeholder: `{pageNumber}` = the page number.
     */
    page: string;
    /**
     * Announced to indicate the current page position.
     *
     * Placeholders: `{currentPage}` = current page number, `{totalPages}` = total number of pages.
     */
    pageOf: string;
};
export type PaginationAlignment = 'left' | 'center' | 'right';
export type PaginationVisiblePageCount = 5 | 7 | 9;
export type PaginationPageItem = {
    type: 'page';
    pageIndex: number;
} | {
    type: 'ellipsis';
    id: string;
};
export type PaginationRenderItem = PaginationPageItem | {
    type: 'divider';
    id: string;
};
export declare const DS_PAGINATION_MEDIA_QUERY_MEDIUM = "(max-width: 518px)";
export declare const DS_PAGINATION_MEDIA_QUERY_SMALL = "(max-width: 428px)";
export declare const getVisiblePageCount: () => PaginationVisiblePageCount;
/**
 * Generates an array of page items for the pagination component.
 * The function calculates which page numbers to display based on the total number of pages,
 * the currently active page, and the maximum number of visible page items allowed.
 * It also inserts ellipsis items where there are gaps in the page numbers to indicate undisplayed pages.
 *
 * @param totalPages - The total number of pages.
 * @param activePageIndex - The index of the currently active page.
 * @param pageItemCount - The number of visible page items.
 * @returns An array of page items including pages and ellipses.
 */
export declare const getPageItems: (totalPages: number, activePageIndex: number, pageItemCount: number) => PaginationPageItem[];
/**
 * Adds divider items to the pagination items array.
 * Dividers are added between page items and ellipsis items, but not between the first and last page
 * or between the previous/next buttons and the page items.
 * @param items - An array of pagination page items (pages and ellipses) to which dividers should be added.
 * @returns An array of pagination render items including dividers.
 */
export declare const addDividers: (items: PaginationPageItem[]) => PaginationRenderItem[];
/**
 * Generates the list of page items with dividers for the pagination component.
 * @param totalPages - The total number of pages.
 * @param activePageIndex - The index of the currently active page (0-based).
 * @param pageItemCount - The number of page items to display.
 * @returns An array of pagination render items including dividers.
 */
export declare const getPageItemsWithDividers: (totalPages: number, activePageIndex: number, pageItemCount: number) => PaginationRenderItem[];
export declare const DS_PAGINATION_TRANSLATIONS_EN: PaginationTranslations;
export declare const DS_PAGINATION_TRANSLATIONS_DE: PaginationTranslations;
export declare const DS_PAGINATION_TRANSLATIONS: Record<string, PaginationTranslations>;
type ValidatePaginationPropsParams = Pick<PaginationProps, 'activePageIndex' | 'aria' | 'itemsPerPage' | 'links' | 'totalItemsCount'>;
export declare const validatePaginationProps: ({ activePageIndex, aria, itemsPerPage, links, totalItemsCount, }: ValidatePaginationPropsParams) => void;
export {};