react-responsive-pagination - npm Package Compare versions

Comparing version 1.10.0-beta.1 to 1.10.0-beta.2

CHANGELOG.md

 # React Responsive Pagination Changelog
 
+# [1.10.0-beta.2](https://github.com/jonelantha/react-responsive-pagination/compare/v1.10.0-beta.1...v1.10.0-beta.2) (2022-11-27)
+
+
+### Bug Fixes
+
+* Active page number for ARIA incorrectly being hidden ([f8e0315](https://github.com/jonelantha/react-responsive-pagination/commit/f8e03150c306443d594d3c4d4e4d6e2411b07ccc))
+
+
+### Features
+
+* ariaPreviousLabel and ariaNextLabel props ([5d5f133](https://github.com/jonelantha/react-responsive-pagination/commit/5d5f13383681406da6c703543c8bf23e010be64a))
+
 # [1.10.0-beta.1](https://github.com/jonelantha/react-responsive-pagination/compare/v1.9.0...v1.10.0-beta.1) (2022-11-25)
@@ -4,0 +16,0 @@

lib.cjs/hooks/usePaginationItems.d.ts

@@ -5,4 +5,6 @@ import { NarrowStrategy } from '../compositions';
     previousLabel?: string;
+    ariaNextLabel?: string;
+    ariaPreviousLabel?: string;
     renderNav?: boolean;
-    a11yActiveLabel: string;
+    a11yActiveLabel?: string;
     narrowStrategy?: NarrowStrategy | NarrowStrategy[];
@@ -9,0 +11,0 @@ }): {

lib.cjs/index.d.ts

@@ -12,3 +12,3 @@ import React from 'react';
 export default _default;
-declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, narrowStrategy, className, extraClassName, pageItemClassName, pageLinkClassName, activeItemClassName, disabledItemClassName, srOnlyClassName, previousLabel, nextLabel, renderNav, a11yActiveLabel, ariaCurrentAttr, linkHref, }: BootstrapPaginationProps): JSX.Element | null;
+declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, narrowStrategy, className, extraClassName, pageItemClassName, pageLinkClassName, activeItemClassName, disabledItemClassName, srOnlyClassName, previousLabel, nextLabel, ariaPreviousLabel, ariaNextLabel, renderNav, a11yActiveLabel, ariaCurrentAttr, linkHref, }: BootstrapPaginationProps): JSX.Element | null;
 declare namespace BootstrapPagination {
@@ -31,2 +31,4 @@ var propTypes: {
         nextLabel: PropTypes.Requireable<string>;
+        ariaPreviousLabel: PropTypes.Requireable<string>;
+        ariaNextLabel: PropTypes.Requireable<string>;
         renderNav: PropTypes.Requireable<boolean>;
@@ -54,2 +56,4 @@ a11yActiveLabel: PropTypes.Requireable<string>;
     nextLabel?: string;
+    ariaPreviousLabel?: string;
+    ariaNextLabel?: string;
     renderNav?: boolean;
@@ -56,0 +60,0 @@ a11yActiveLabel?: string;

lib.cjs/index.js

@@ -43,10 +43,12 @@ "use strict";
 function BootstrapPagination(_a) {
-    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, narrowStrategy = _a.narrowStrategy, className = _a.className, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b, _c = _a.pageItemClassName, pageItemClassName = _c === void 0 ? 'page-item' : _c, _d = _a.pageLinkClassName, pageLinkClassName = _d === void 0 ? 'page-link' : _d, _e = _a.activeItemClassName, activeItemClassName = _e === void 0 ? 'active' : _e, _f = _a.disabledItemClassName, disabledItemClassName = _f === void 0 ? 'disabled' : _f, _g = _a.srOnlyClassName, srOnlyClassName = _g === void 0 ? 'sr-only' : _g, previousLabel = _a.previousLabel, nextLabel = _a.nextLabel, _h = _a.renderNav, renderNav = _h === void 0 ? true : _h, _j = _a.a11yActiveLabel, a11yActiveLabel = _j === void 0 ? '(current)' : _j, ariaCurrentAttr = _a.ariaCurrentAttr, _k = _a.linkHref, linkHref = _k === void 0 ? 'hash' : _k;
-    var _l = (0, usePaginationItems_1.usePaginationItems)(current, total, maxWidth, {
+    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, narrowStrategy = _a.narrowStrategy, className = _a.className, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b, _c = _a.pageItemClassName, pageItemClassName = _c === void 0 ? 'page-item' : _c, _d = _a.pageLinkClassName, pageLinkClassName = _d === void 0 ? 'page-link' : _d, _e = _a.activeItemClassName, activeItemClassName = _e === void 0 ? 'active' : _e, _f = _a.disabledItemClassName, disabledItemClassName = _f === void 0 ? 'disabled' : _f, _g = _a.srOnlyClassName, srOnlyClassName = _g === void 0 ? 'sr-only' : _g, previousLabel = _a.previousLabel, nextLabel = _a.nextLabel, ariaPreviousLabel = _a.ariaPreviousLabel, ariaNextLabel = _a.ariaNextLabel, _h = _a.renderNav, renderNav = _h === void 0 ? true : _h, a11yActiveLabel = _a.a11yActiveLabel, ariaCurrentAttr = _a.ariaCurrentAttr, _j = _a.linkHref, linkHref = _j === void 0 ? 'hash' : _j;
+    var _k = (0, usePaginationItems_1.usePaginationItems)(current, total, maxWidth, {
         narrowStrategy: narrowStrategy,
         previousLabel: previousLabel,
+        nextLabel: nextLabel,
+        ariaPreviousLabel: ariaPreviousLabel,
+        ariaNextLabel: ariaNextLabel,
         renderNav: renderNav,
-        nextLabel: nextLabel,
         a11yActiveLabel: a11yActiveLabel,
-    }), items = _l.items, ref = _l.ref, clearCache = _l.clearCache;
+    }), items = _k.items, ref = _k.ref, clearCache = _k.clearCache;
     (0, react_1.useEffect)(function () {
@@ -78,13 +80,14 @@ return function () { return clearCache(); };
         return a11yLabel ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("span", { "aria-hidden": "true" }, label),
-            srOnlyClassName && react_1.default.createElement("span", { className: srOnlyClassName }, a11yLabel))) : (label);
+            a11yLabel.mode === 'replace' ? (react_1.default.createElement("span", { "aria-hidden": "true" }, label)) : (label + (srOnlyClassName ? ' ' : '')),
+            srOnlyClassName && (react_1.default.createElement("span", { className: srOnlyClassName }, a11yLabel.label)))) : (label);
     }
     return (react_1.default.createElement("ul", { className: getContainerClassName(), ref: ref }, items.map(function (item) {
+        var _a, _b;
         return item.gotoPage !== undefined ? (
         // item = ClickableItem
         react_1.default.createElement("li", { key: item.key, className: "".concat(pageItemClassName).concat(item.active && activeItemClassName ? ' ' + activeItemClassName : ''), "aria-current": item.active && ariaCurrentAttr ? 'page' : undefined },
-            react_1.default.createElement("a", { className: pageLinkClassName, href: linkHref === 'hash' ? '#' : undefined, onClick: (0, dom_1.preventDefault)(function () { return handlePageChange(item.gotoPage); }), "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel)))) : (
+            react_1.default.createElement("a", { className: pageLinkClassName, href: linkHref === 'hash' ? '#' : undefined, onClick: (0, dom_1.preventDefault)(function () { return handlePageChange(item.gotoPage); }), "aria-label": (_a = item.a11yLabel) === null || _a === void 0 ? void 0 : _a.label }, getLabel(item.label, item.a11yLabel)))) : (
         // item = NonClickableItem
         react_1.default.createElement("li", { key: item.key, className: "".concat(pageItemClassName, " ").concat(disabledItemClassName), "aria-hidden": item.a11yHidden },
-            react_1.default.createElement("span", { className: pageLinkClassName, "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel))));
+            react_1.default.createElement("span", { className: pageLinkClassName, "aria-label": (_b = item.a11yLabel) === null || _b === void 0 ? void 0 : _b.label }, getLabel(item.label, item.a11yLabel))));
     })));
@@ -111,2 +114,4 @@ }
     nextLabel: prop_types_1.default.string,
+    ariaPreviousLabel: prop_types_1.default.string,
+    ariaNextLabel: prop_types_1.default.string,
     renderNav: prop_types_1.default.bool,
@@ -113,0 +118,0 @@ a11yActiveLabel: prop_types_1.default.string,

lib.cjs/paginationItem.d.ts

@@ -6,3 +6,3 @@ import { CompositionItem } from './compositionItem';
     label: string;
-    a11yLabel?: string;
+    a11yLabel?: A11yLabel;
 };
@@ -31,7 +31,13 @@ declare type ClickableItem = BaseItem & {
 export declare type NavType = 'next' | 'previous';
+export declare type A11yLabel = {
+    label: string;
+    mode: 'replace' | 'additional';
+};
 export declare function compositionToPaginationItems(compositionItems: CompositionItem[], options?: {
+    previousLabel?: string;
     nextLabel?: string;
-    previousLabel?: string;
-    a11yActiveLabel: string;
+    ariaPreviousLabel?: string;
+    ariaNextLabel?: string;
+    a11yActiveLabel?: string;
 }): PaginationItem[];
 export {};

lib.cjs/paginationItem.js

@@ -5,2 +5,8 @@ "use strict";
 function compositionToPaginationItems(compositionItems, options) {
+    var _a;
+    var activeLabel = (_a = options === null || options === void 0 ? void 0 : options.a11yActiveLabel) !== null && _a !== void 0 ? _a : '(current)';
+    var previousLabel = (options === null || options === void 0 ? void 0 : options.previousLabel) || '«';
+    var a11yPreviousLabel = (options === null || options === void 0 ? void 0 : options.ariaPreviousLabel) || 'Previous';
+    var nextLabel = (options === null || options === void 0 ? void 0 : options.nextLabel) || '»';
+    var a11yNextLabel = (options === null || options === void 0 ? void 0 : options.ariaNextLabel) || 'Next';
     return compositionItems.map(function (_a) {
@@ -13,4 +19,6 @@ var type = _a.type, page = _a.page;
                     key: "previous".concat(page === undefined ? '_disabled' : ''),
-                    label: (options === null || options === void 0 ? void 0 : options.previousLabel) || '«',
-                    a11yLabel: 'Previous',
+                    label: previousLabel,
+                    a11yLabel: previousLabel === a11yPreviousLabel
+                        ? undefined
+                        : { label: a11yPreviousLabel, mode: 'replace' },
                     gotoPage: page,
@@ -22,4 +30,6 @@ };
                     key: "next".concat(page === undefined ? '_disabled' : ''),
-                    label: (options === null || options === void 0 ? void 0 : options.nextLabel) || '»',
-                    a11yLabel: 'Next',
+                    label: nextLabel,
+                    a11yLabel: nextLabel === a11yNextLabel
+                        ? undefined
+                        : { label: a11yNextLabel, mode: 'replace' },
                     gotoPage: page,
@@ -41,3 +51,5 @@ };
                     label: page.toString(),
-                    a11yLabel: (type === 'active' && (options === null || options === void 0 ? void 0 : options.a11yActiveLabel)) || undefined,
+                    a11yLabel: type === 'active' && activeLabel
+                        ? { label: activeLabel, mode: 'additional' }
+                        : undefined,
                     gotoPage: page,
@@ -44,0 +56,0 @@ active: type === 'active',

lib/hooks/usePaginationItems.d.ts

@@ -5,4 +5,6 @@ import { NarrowStrategy } from '../compositions';
     previousLabel?: string;
+    ariaNextLabel?: string;
+    ariaPreviousLabel?: string;
     renderNav?: boolean;
-    a11yActiveLabel: string;
+    a11yActiveLabel?: string;
     narrowStrategy?: NarrowStrategy | NarrowStrategy[];
@@ -9,0 +11,0 @@ }): {

lib/index.d.ts

@@ -12,3 +12,3 @@ import React from 'react';
 export default _default;
-declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, narrowStrategy, className, extraClassName, pageItemClassName, pageLinkClassName, activeItemClassName, disabledItemClassName, srOnlyClassName, previousLabel, nextLabel, renderNav, a11yActiveLabel, ariaCurrentAttr, linkHref, }: BootstrapPaginationProps): JSX.Element | null;
+declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, narrowStrategy, className, extraClassName, pageItemClassName, pageLinkClassName, activeItemClassName, disabledItemClassName, srOnlyClassName, previousLabel, nextLabel, ariaPreviousLabel, ariaNextLabel, renderNav, a11yActiveLabel, ariaCurrentAttr, linkHref, }: BootstrapPaginationProps): JSX.Element | null;
 declare namespace BootstrapPagination {
@@ -31,2 +31,4 @@ var propTypes: {
         nextLabel: PropTypes.Requireable<string>;
+        ariaPreviousLabel: PropTypes.Requireable<string>;
+        ariaNextLabel: PropTypes.Requireable<string>;
         renderNav: PropTypes.Requireable<boolean>;
@@ -54,2 +56,4 @@ a11yActiveLabel: PropTypes.Requireable<string>;
     nextLabel?: string;
+    ariaPreviousLabel?: string;
+    ariaNextLabel?: string;
     renderNav?: boolean;
@@ -56,0 +60,0 @@ a11yActiveLabel?: string;

lib/index.js

@@ -14,10 +14,12 @@ import React, { memo, useEffect } from 'react';
 function BootstrapPagination(_a) {
-    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, narrowStrategy = _a.narrowStrategy, className = _a.className, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b, _c = _a.pageItemClassName, pageItemClassName = _c === void 0 ? 'page-item' : _c, _d = _a.pageLinkClassName, pageLinkClassName = _d === void 0 ? 'page-link' : _d, _e = _a.activeItemClassName, activeItemClassName = _e === void 0 ? 'active' : _e, _f = _a.disabledItemClassName, disabledItemClassName = _f === void 0 ? 'disabled' : _f, _g = _a.srOnlyClassName, srOnlyClassName = _g === void 0 ? 'sr-only' : _g, previousLabel = _a.previousLabel, nextLabel = _a.nextLabel, _h = _a.renderNav, renderNav = _h === void 0 ? true : _h, _j = _a.a11yActiveLabel, a11yActiveLabel = _j === void 0 ? '(current)' : _j, ariaCurrentAttr = _a.ariaCurrentAttr, _k = _a.linkHref, linkHref = _k === void 0 ? 'hash' : _k;
-    var _l = usePaginationItems(current, total, maxWidth, {
+    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, narrowStrategy = _a.narrowStrategy, className = _a.className, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b, _c = _a.pageItemClassName, pageItemClassName = _c === void 0 ? 'page-item' : _c, _d = _a.pageLinkClassName, pageLinkClassName = _d === void 0 ? 'page-link' : _d, _e = _a.activeItemClassName, activeItemClassName = _e === void 0 ? 'active' : _e, _f = _a.disabledItemClassName, disabledItemClassName = _f === void 0 ? 'disabled' : _f, _g = _a.srOnlyClassName, srOnlyClassName = _g === void 0 ? 'sr-only' : _g, previousLabel = _a.previousLabel, nextLabel = _a.nextLabel, ariaPreviousLabel = _a.ariaPreviousLabel, ariaNextLabel = _a.ariaNextLabel, _h = _a.renderNav, renderNav = _h === void 0 ? true : _h, a11yActiveLabel = _a.a11yActiveLabel, ariaCurrentAttr = _a.ariaCurrentAttr, _j = _a.linkHref, linkHref = _j === void 0 ? 'hash' : _j;
+    var _k = usePaginationItems(current, total, maxWidth, {
         narrowStrategy: narrowStrategy,
         previousLabel: previousLabel,
+        nextLabel: nextLabel,
+        ariaPreviousLabel: ariaPreviousLabel,
+        ariaNextLabel: ariaNextLabel,
         renderNav: renderNav,
-        nextLabel: nextLabel,
         a11yActiveLabel: a11yActiveLabel,
-    }), items = _l.items, ref = _l.ref, clearCache = _l.clearCache;
+    }), items = _k.items, ref = _k.ref, clearCache = _k.clearCache;
     useEffect(function () {
@@ -49,13 +51,14 @@ return function () { return clearCache(); };
         return a11yLabel ? (React.createElement(React.Fragment, null,
-            React.createElement("span", { "aria-hidden": "true" }, label),
-            srOnlyClassName && React.createElement("span", { className: srOnlyClassName }, a11yLabel))) : (label);
+            a11yLabel.mode === 'replace' ? (React.createElement("span", { "aria-hidden": "true" }, label)) : (label + (srOnlyClassName ? ' ' : '')),
+            srOnlyClassName && (React.createElement("span", { className: srOnlyClassName }, a11yLabel.label)))) : (label);
     }
     return (React.createElement("ul", { className: getContainerClassName(), ref: ref }, items.map(function (item) {
+        var _a, _b;
         return item.gotoPage !== undefined ? (
         // item = ClickableItem
         React.createElement("li", { key: item.key, className: "".concat(pageItemClassName).concat(item.active && activeItemClassName ? ' ' + activeItemClassName : ''), "aria-current": item.active && ariaCurrentAttr ? 'page' : undefined },
-            React.createElement("a", { className: pageLinkClassName, href: linkHref === 'hash' ? '#' : undefined, onClick: preventDefault(function () { return handlePageChange(item.gotoPage); }), "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel)))) : (
+            React.createElement("a", { className: pageLinkClassName, href: linkHref === 'hash' ? '#' : undefined, onClick: preventDefault(function () { return handlePageChange(item.gotoPage); }), "aria-label": (_a = item.a11yLabel) === null || _a === void 0 ? void 0 : _a.label }, getLabel(item.label, item.a11yLabel)))) : (
         // item = NonClickableItem
         React.createElement("li", { key: item.key, className: "".concat(pageItemClassName, " ").concat(disabledItemClassName), "aria-hidden": item.a11yHidden },
-            React.createElement("span", { className: pageLinkClassName, "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel))));
+            React.createElement("span", { className: pageLinkClassName, "aria-label": (_b = item.a11yLabel) === null || _b === void 0 ? void 0 : _b.label }, getLabel(item.label, item.a11yLabel))));
     })));
@@ -82,2 +85,4 @@ }
     nextLabel: PropTypes.string,
+    ariaPreviousLabel: PropTypes.string,
+    ariaNextLabel: PropTypes.string,
     renderNav: PropTypes.bool,
@@ -84,0 +89,0 @@ a11yActiveLabel: PropTypes.string,

lib/paginationItem.d.ts

@@ -6,3 +6,3 @@ import { CompositionItem } from './compositionItem';
     label: string;
-    a11yLabel?: string;
+    a11yLabel?: A11yLabel;
 };
@@ -31,7 +31,13 @@ declare type ClickableItem = BaseItem & {
 export declare type NavType = 'next' | 'previous';
+export declare type A11yLabel = {
+    label: string;
+    mode: 'replace' | 'additional';
+};
 export declare function compositionToPaginationItems(compositionItems: CompositionItem[], options?: {
+    previousLabel?: string;
     nextLabel?: string;
-    previousLabel?: string;
-    a11yActiveLabel: string;
+    ariaPreviousLabel?: string;
+    ariaNextLabel?: string;
+    a11yActiveLabel?: string;
 }): PaginationItem[];
 export {};

lib/paginationItem.js

 export function compositionToPaginationItems(compositionItems, options) {
+    var _a;
+    var activeLabel = (_a = options === null || options === void 0 ? void 0 : options.a11yActiveLabel) !== null && _a !== void 0 ? _a : '(current)';
+    var previousLabel = (options === null || options === void 0 ? void 0 : options.previousLabel) || '«';
+    var a11yPreviousLabel = (options === null || options === void 0 ? void 0 : options.ariaPreviousLabel) || 'Previous';
+    var nextLabel = (options === null || options === void 0 ? void 0 : options.nextLabel) || '»';
+    var a11yNextLabel = (options === null || options === void 0 ? void 0 : options.ariaNextLabel) || 'Next';
     return compositionItems.map(function (_a) {
@@ -9,4 +15,6 @@ var type = _a.type, page = _a.page;
                     key: "previous".concat(page === undefined ? '_disabled' : ''),
-                    label: (options === null || options === void 0 ? void 0 : options.previousLabel) || '«',
-                    a11yLabel: 'Previous',
+                    label: previousLabel,
+                    a11yLabel: previousLabel === a11yPreviousLabel
+                        ? undefined
+                        : { label: a11yPreviousLabel, mode: 'replace' },
                     gotoPage: page,
@@ -18,4 +26,6 @@ };
                     key: "next".concat(page === undefined ? '_disabled' : ''),
-                    label: (options === null || options === void 0 ? void 0 : options.nextLabel) || '»',
-                    a11yLabel: 'Next',
+                    label: nextLabel,
+                    a11yLabel: nextLabel === a11yNextLabel
+                        ? undefined
+                        : { label: a11yNextLabel, mode: 'replace' },
                     gotoPage: page,
@@ -37,3 +47,5 @@ };
                     label: page.toString(),
-                    a11yLabel: (type === 'active' && (options === null || options === void 0 ? void 0 : options.a11yActiveLabel)) || undefined,
+                    a11yLabel: type === 'active' && activeLabel
+                        ? { label: activeLabel, mode: 'additional' }
+                        : undefined,
                     gotoPage: page,
@@ -40,0 +52,0 @@ active: type === 'active',

package.json

 {
   "name": "react-responsive-pagination",
-  "version": "1.10.0-beta.1",
+  "version": "1.10.0-beta.2",
   "description": "React component for responsive pagination",
@@ -5,0 +5,0 @@ "author": "jonelantha",

README.md

@@ -108,6 +108,8 @@ # React Responsive Pagination
 
-| Prop                                            | Description                                        |
-| ----------------------------------------------- | -------------------------------------------------- |
-| **previousLabel**<br />`string`<br />(optional) | The label for the previous button, defaults to `«` |
-| **nextLabel**<br />`string`<br />(optional)     | The label for the next button, defaults to `»`     |
+| Prop                                                | Description                                                                  |
+| --------------------------------------------------- | ---------------------------------------------------------------------------- |
+| **previousLabel**<br />`string`<br />(optional)     | The label for the previous button, defaults to `«`                           |
+| **nextLabel**<br />`string`<br />(optional)         | The label for the next button, defaults to `»`                               |
+| **ariaPreviousLabel**<br />`string`<br />(optional) | The accessibility ARIA label for the previous button, defaults to `Previous` |
+| **ariaNextLabel**<br />`string`<br />(optional)     | The accessibility ARIA label for the next button, defaults to `Next`         |
 
@@ -114,0 +116,0 @@ ### Misc Props

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

158877

increased by2.62%

Lines of code

3011

increased by2.03%

Number of lines in readme file

127

increased by1.6%

No dependency changes