refactor: Paginator

tugcekucukoglu · tugcekucukoglu · commit 1f50a25b6806 · 2026-03-17T14:09:04.000+03:00
diff --git a/packages/@primereact/headless/src/paginator/usePaginator.ts b/packages/@primereact/headless/src/paginator/usePaginator.ts
@@ -10,10 +10,28 @@ const range = (start: number, end: number) => {
 
 const ELLIPSIS = { type: 'ellipsis' as const };
 
+const primereact = {
+    config: {
+        locale: {
+            aria: {
+                pageLabel: 'Page {page}',
+                firstPageLabel: 'First Page',
+                lastPageLabel: 'Last Page',
+                nextPageLabel: 'Next Page',
+                prevPageLabel: 'Previous Page'
+            }
+        }
+    }
+};
+
 export const usePaginator = withHeadless({
     name: 'usePaginator',
     defaultProps,
     setup({ props }) {
+        const getAriaLabel = (labelType: string) => {
+            return primereact?.config?.locale?.aria ? (primereact.config.locale.aria as Record<string, string>)[labelType] : undefined;
+        };
+
         const { edges = 1, siblings = 1, showEllipsis = true } = props;
         const [activePage, setActivePage] = React.useState(props.defaultPage ?? props.page ?? 1);
 
@@ -86,6 +104,7 @@ export const usePaginator = withHeadless({
         const firstProps = {
             'data-scope': 'paginator',
             'data-part': 'first',
+            'aria-label': getAriaLabel('firstPageLabel'),
             onClick: first,
             disabled: !canPrev || props.disabled,
             ...(!canPrev || props.disabled ? { 'data-disabled': '' } : {})
@@ -94,6 +113,7 @@ export const usePaginator = withHeadless({
         const prevProps = {
             'data-scope': 'paginator',
             'data-part': 'prev',
+            'aria-label': getAriaLabel('prevPageLabel'),
             onClick: prev,
             disabled: !canPrev || props.disabled,
             ...(!canPrev || props.disabled ? { 'data-disabled': '' } : {})
@@ -102,6 +122,7 @@ export const usePaginator = withHeadless({
         const nextProps = {
             'data-scope': 'paginator',
             'data-part': 'next',
+            'aria-label': getAriaLabel('nextPageLabel'),
             onClick: next,
             disabled: !canNext || props.disabled,
             ...(!canNext || props.disabled ? { 'data-disabled': '' } : {})
@@ -110,17 +131,27 @@ export const usePaginator = withHeadless({
         const lastProps = {
             'data-scope': 'paginator',
             'data-part': 'last',
+            'aria-label': getAriaLabel('lastPageLabel'),
             onClick: last,
             disabled: !canNext || props.disabled,
             ...(!canNext || props.disabled ? { 'data-disabled': '' } : {})
         };
 
+        const pagesProps = {
+            'data-scope': 'paginator' as const,
+            'data-part': 'pages' as const,
+            'aria-label': getAriaLabel('pageLabel')
+        };
+
         const getPageProps = (value: number) => {
             const handleClick = () => handlePage(value);
+            const pageLabel = getAriaLabel('pageLabel');
+            const ariaLabel = pageLabel ? pageLabel.replace(/{page}/g, String(value)) : undefined;
 
             return {
                 'data-scope': 'paginator',
                 'data-part': 'page',
+                'aria-label': ariaLabel,
                 onClick: handleClick,
                 disabled: props.disabled,
                 'aria-current': (activePage === value ? 'page' : undefined) as 'page' | undefined,
@@ -143,8 +174,10 @@ export const usePaginator = withHeadless({
             prevProps,
             nextProps,
             lastProps,
+            pagesProps,
             getPageProps,
             // methods
+            getAriaLabel,
             prev,
             next,
             first,
diff --git a/packages/@primereact/types/src/headless/paginator/usePaginator.types.ts b/packages/@primereact/types/src/headless/paginator/usePaginator.types.ts
@@ -122,12 +122,28 @@ export interface usePaginatorNavProps {
      * Whether the button is disabled.
      */
     disabled: boolean | undefined;
+    /**
+     * Accessible label for the navigation button.
+     */
+    'aria-label'?: string;
     /**
      * Data attribute for disabled state.
      */
     'data-disabled'?: string;
 }
 
+/**
+ * Pre-built props for the pages container element.
+ */
+export interface usePaginatorPagesProps {
+    'data-scope': 'paginator';
+    'data-part': 'pages';
+    /**
+     * Accessible label for the pages container.
+     */
+    'aria-label'?: string;
+}
+
 /**
  * Pre-built props for a paginator page button.
  */
@@ -140,6 +156,10 @@ export interface usePaginatorPageProps {
      * Whether the button is disabled.
      */
     disabled: boolean | undefined;
+    /**
+     * Accessible label for the page button.
+     */
+    'aria-label'?: string;
     /**
      * ARIA current page indicator.
      */
@@ -158,6 +178,12 @@ export interface usePaginatorPageProps {
  * Defines the return type of usePaginator.
  */
 export interface usePaginatorExposes {
+    /**
+     * Returns the aria label for the given label type from locale config.
+     * @param {string} labelType - The label type key.
+     * @returns {string | undefined} The aria label string.
+     */
+    getAriaLabel: (labelType: string) => string | undefined;
     /**
      * Go to previous page.
      */
@@ -198,6 +224,10 @@ export interface usePaginatorExposes {
      * Pre-built props for the last page button.
      */
     lastProps: usePaginatorNavProps;
+    /**
+     * Pre-built props for the pages container.
+     */
+    pagesProps: usePaginatorPagesProps;
     /**
      * Returns pre-built props for a specific page button.
      */
diff --git a/packages/@primereact/types/src/primitive/paginator/PaginatorRoot.types.ts b/packages/@primereact/types/src/primitive/paginator/PaginatorRoot.types.ts
@@ -9,8 +9,8 @@
  *
  */
 import type { ComponentInstance } from '@primereact/types/core';
-import type { BaseComponentProps, PassThroughType } from '../..';
 import type { usePaginatorChangeEvent, usePaginatorExposes, usePaginatorProps, usePaginatorState } from '@primereact/types/headless/paginator';
+import type { BaseComponentProps, PassThroughType } from '../..';
 
 /**
  * Defines passthrough(pt) options type in Paginator component.
@@ -62,14 +62,7 @@ export interface PaginatorRootState extends usePaginatorState {}
  * Defines the methods and properties exposed by Paginator component.
  * @extends usePaginatorExposes
  */
-export interface PaginatorRootExposes extends usePaginatorExposes {
-    /**
-     * Get the aria label for the given label type.
-     * @param labelType - The type of label to get.
-     * @returns The aria label for the given label type.
-     */
-    getAriaLabel: (labelType: string) => string;
-}
+export interface PaginatorRootExposes extends usePaginatorExposes {}
 
 /**
  * Event fired when the paginator's page changes.
diff --git a/packages/primereact/src/paginator/content/PaginatorContent.tsx b/packages/primereact/src/paginator/content/PaginatorContent.tsx
@@ -14,11 +14,10 @@ export const PaginatorContent = withComponent({
         return { paginator };
     },
     render(instance) {
-        const { id, props, ptmi, paginator } = instance;
+        const { props, ptmi, paginator } = instance;
 
         const rootProps = mergeProps(
             {
-                id,
                 className: paginator?.cx('content')
             },
             paginator?.ptmi('content'),
diff --git a/packages/primereact/src/paginator/ellipsis/PaginatorEllipsis.tsx b/packages/primereact/src/paginator/ellipsis/PaginatorEllipsis.tsx
@@ -14,11 +14,10 @@ export const PaginatorEllipsis = withComponent({
         return { paginator };
     },
     render(instance) {
-        const { id, props, ptmi, paginator } = instance;
+        const { props, ptmi, paginator } = instance;
 
         const rootProps = mergeProps(
             {
-                id,
                 className: paginator?.cx('ellipsis')
             },
             paginator?.ptmi('ellipsis'),
diff --git a/packages/primereact/src/paginator/first/PaginatorFirst.tsx b/packages/primereact/src/paginator/first/PaginatorFirst.tsx
@@ -8,30 +8,18 @@ import { defaultFirstProps } from './PaginatorFirst.props';
 export const PaginatorFirst = withComponent({
     name: 'Paginator.First',
     defaultProps: defaultFirstProps,
-    setup() {
+    setup({ props }) {
         const paginator = usePaginatorContext();
+        const disabled = paginator?.firstProps?.disabled || props.disabled;
 
-        const disabled = paginator?.firstProps?.disabled;
-
-        const firstProps = {
-            ...paginator?.firstProps,
-            'aria-label': paginator?.getAriaLabel('firstPageLabel'),
-            disabled
-        };
-
-        const disabledAttrs = disabled ? { 'data-disabled': '' as const } : {};
-
-        return { paginator, firstProps, disabledAttrs };
+        return { paginator, disabled };
     },
     render(instance) {
-        const { id, props, ptmi, paginator, firstProps, disabledAttrs } = instance;
+        const { props, ptmi, paginator, disabled } = instance;
 
-        const disabled = firstProps?.disabled || props.disabled;
         const rootProps = mergeProps(
-            firstProps,
-            disabledAttrs,
+            paginator?.firstProps,
             {
-                id,
                 className: paginator?.cx('first', { disabled }),
                 disabled
             },
diff --git a/packages/primereact/src/paginator/last/PaginatorLast.tsx b/packages/primereact/src/paginator/last/PaginatorLast.tsx
@@ -8,30 +8,18 @@ import { defaultLastProps } from './PaginatorLast.props';
 export const PaginatorLast = withComponent({
     name: 'Paginator.Last',
     defaultProps: defaultLastProps,
-    setup() {
+    setup({ props }) {
         const paginator = usePaginatorContext();
+        const disabled = paginator?.lastProps?.disabled || props.disabled;
 
-        const disabled = paginator?.lastProps?.disabled;
-
-        const lastProps = {
-            ...paginator?.lastProps,
-            'aria-label': paginator?.getAriaLabel('lastPageLabel'),
-            disabled
-        };
-
-        const disabledAttrs = disabled ? { 'data-disabled': '' as const } : {};
-
-        return { paginator, lastProps, disabledAttrs };
+        return { paginator, disabled };
     },
     render(instance) {
-        const { id, props, ptmi, paginator, lastProps, disabledAttrs } = instance;
+        const { props, ptmi, paginator, disabled } = instance;
 
-        const disabled = lastProps?.disabled || props.disabled;
         const rootProps = mergeProps(
-            lastProps,
-            disabledAttrs,
+            paginator?.lastProps,
             {
-                id,
                 className: paginator?.cx('last', { disabled }),
                 disabled
             },
diff --git a/packages/primereact/src/paginator/next/PaginatorNext.tsx b/packages/primereact/src/paginator/next/PaginatorNext.tsx
@@ -8,28 +8,17 @@ import { defaultNextProps } from './PaginatorNext.props';
 export const PaginatorNext = withComponent({
     name: 'Paginator.Next',
     defaultProps: defaultNextProps,
-    setup() {
+    setup({ props }) {
         const paginator = usePaginatorContext();
+        const disabled = paginator?.nextProps?.disabled || props.disabled;
 
-        const disabled = paginator?.nextProps?.disabled;
-
-        const nextProps = {
-            ...paginator?.nextProps,
-            'aria-label': paginator?.getAriaLabel('nextPageLabel'),
-            disabled
-        };
-
-        const disabledAttrs = disabled ? { 'data-disabled': '' as const } : {};
-
-        return { paginator, nextProps, disabledAttrs };
+        return { paginator, disabled };
     },
     render(instance) {
-        const { id, props, ptmi, paginator, nextProps, disabledAttrs } = instance;
+        const { id, props, ptmi, paginator, disabled } = instance;
 
-        const disabled = nextProps?.disabled || props.disabled;
         const rootProps = mergeProps(
-            nextProps,
-            disabledAttrs,
+            paginator?.nextProps,
             {
                 id,
                 className: paginator?.cx('next', { disabled }),
diff --git a/packages/primereact/src/paginator/page/PaginatorPage.tsx b/packages/primereact/src/paginator/page/PaginatorPage.tsx
@@ -8,35 +8,19 @@ import { defaultPageProps } from './PaginatorPage.props';
 export const PaginatorPage = withComponent({
     name: 'Paginator.Page',
     defaultProps: defaultPageProps,
-    setup(instance) {
-        const { props, $primereact } = instance;
+    setup({ props }) {
         const paginator = usePaginatorContext();
-
         const pageProps = props.value != null ? paginator?.getPageProps?.(props.value) : undefined;
         const disabled = pageProps?.disabled || props.disabled;
 
-        // @ts-expect-error - locale is not typed yet
-        const ariaLabel = $primereact.config?.locale?.aria ? $primereact.config.locale.aria.pageLabel.replace(/{page}/g, props.value) : undefined;
-
-        const computedPageProps = {
-            ...pageProps,
-            'aria-label': ariaLabel,
-            disabled
-        };
-
-        const disabledAttrs = disabled ? { 'data-disabled': '' as const } : {};
-
-        return { paginator, computedPageProps, disabledAttrs };
+        return { paginator, pageProps, disabled };
     },
     render(instance) {
-        const { id, props, ptmi, paginator, computedPageProps, disabledAttrs } = instance;
+        const { props, ptmi, paginator, pageProps, disabled } = instance;
 
-        const disabled = computedPageProps?.disabled || props.disabled;
         const rootProps = mergeProps(
-            computedPageProps,
-            disabledAttrs,
+            pageProps,
             {
-                id,
                 className: paginator?.cx('page', { selected: paginator?.state.activePage === props.value, disabled }),
                 disabled
             },
diff --git a/packages/primereact/src/paginator/pages/PaginatorPages.tsx b/packages/primereact/src/paginator/pages/PaginatorPages.tsx
@@ -11,21 +11,14 @@ export const PaginatorPages = withComponent({
     setup() {
         const paginator = usePaginatorContext();
 
-        const pagesProps = {
-            'data-scope': 'paginator' as const,
-            'data-part': 'pages' as const,
-            'aria-label': paginator?.getAriaLabel('pageLabel')
-        };
-
-        return { paginator, pagesProps };
+        return { paginator };
     },
     render(instance) {
-        const { id, props, paginator, pagesProps, ptmi } = instance;
+        const { props, paginator, ptmi } = instance;
 
         const rootProps = mergeProps(
-            pagesProps,
+            paginator?.pagesProps,
             {
-                id,
                 className: paginator?.cx('pages')
             },
             paginator?.ptmi('pages'),
diff --git a/packages/primereact/src/paginator/prev/PaginatorPrev.tsx b/packages/primereact/src/paginator/prev/PaginatorPrev.tsx
diff --git a/packages/primereact/src/paginator/root/PaginatorRoot.tsx b/packages/primereact/src/paginator/root/PaginatorRoot.tsx
