@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
59 lines (58 loc) • 2.84 kB
TypeScript
import { JSX, ReactElement } from 'react';
import { SelectedAriaAttributes, Theme } from '../../types';
import { PaginationAlignment, PaginationAriaAttributes, PaginationLanguage, PaginationTranslations } from './Pagination.utils';
export interface PaginationLink {
/** The href for the link if no framework-specific link component wrapper is provided. */
href?: string;
/** The framework-specific link component wrapper, e.g., `Link` for `next` or `react-router-dom`. */
wrapper?: ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
}
export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
/** ARIA attributes to ensure accessibility. 'aria-label' OR 'aria-labelledby' is required.
*
* `{'aria-label'?: string;`
* `'aria-labelledby'?: string;}`
* */
aria: SelectedAriaAttributes<PaginationAriaAttributes>;
/** Sets the items per page used to derive the number of pages. */
itemsPerPage: number;
/** Sets the total amount of items in the dataset. */
totalItemsCount: number;
/** **Controlled** active page index (0-based).
* @default 0
*/
activePageIndex?: number;
/** Alignment of the DSPagination.
* @default 'right'
*/
alignment?: PaginationAlignment;
/** Sets language for screen reader messages and ICU plural rule resolution.
* Use `'de'` or `'en'` for preconfigured translations, or any
* [BCP 47 language tag](https://www.rfc-editor.org/info/bcp47) (e.g. `'fr'`, `'pl'`, `'en-GB'`)
* when providing a custom `translations` object.
* @default 'en'
*/
lang?: PaginationLanguage;
/** Pagination link array structure with optional and required parameters
*
* `{ href?: string;`
* `wrapper?: React.ReactElement<`
* ` React.AnchorHTMLAttributes<HTMLAnchorElement> &`
* ` React.RefAttributes<HTMLAnchorElement>>;}[]`
*/
links?: PaginationLink[];
/** Translations for the DSPagination. Use our [customization page](/?path=/story/components-pagination-translations--documentation) for creating custom translations. */
translations?: PaginationTranslations;
/** Defines the theme.
* @default 'light'
*/
theme?: Theme;
/** Callback when a new page is selected. */
onPageChange?: (nextPageIndex: number) => void;
}
/**
* A pagination component rendering navigation controls and page links with ellipsis overflow.
*
* Design in Figma: [Pagination](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26075-11456)
*/
export declare const DSPagination: ({ aria, activePageIndex, itemsPerPage, totalItemsCount, className, alignment, lang, links, theme, translations, onPageChange, ...rest }: PaginationProps) => JSX.Element;