react-responsive-pagination - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0-beta.1

CHANGELOG.md

 # React Responsive Pagination Changelog
 
+# [1.7.0-beta.1](https://github.com/jonelantha/react-responsive-pagination/compare/v1.6.0...v1.7.0-beta.1) (2022-09-06)
+
+
+### Bug Fixes
+
+* Added missing aria-label for disabled elements ([e1d2cc1](https://github.com/jonelantha/react-responsive-pagination/commit/e1d2cc140d892f8a21aeeefb42769f2fda2f2fa0))
+* Non-docs package updates ([2ec3686](https://github.com/jonelantha/react-responsive-pagination/commit/2ec3686f7fdf022ae5c7d03bec91ef45fe9751aa))
+
+
+### Features
+
+* Add ariaCurrentAttr for including aria-current attribute on active page ([1c4e185](https://github.com/jonelantha/react-responsive-pagination/commit/1c4e185835f34e839d07ad4653018d57bdc1be3d))
+* Added a11yActiveLabel prop for controlling a11y label on active link ([ae7ea23](https://github.com/jonelantha/react-responsive-pagination/commit/ae7ea23700361e88c26d4b6aa96e92e0a42bc5f7))
+* srOnlyClassName='' hides .sr-only elements ([5af0c41](https://github.com/jonelantha/react-responsive-pagination/commit/5af0c418764d1cef53c459ede875d46ff022ba75))
+
 # [1.6.0](https://github.com/jonelantha/react-responsive-pagination/compare/v1.5.0...v1.6.0) (2022-07-17)
@@ -4,0 +19,0 @@

lib.cjs/compositions/ranges.d.ts

@@ -1,2 +0,1 @@
-export { narrowToWidePaginationItemRanges as narrowToWideRanges };
 declare function narrowToWidePaginationItemRanges(start: number, end: number, collapsePos: 'L' | 'R'): Generator<({
@@ -9,1 +8,2 @@ type: "page";
 })[], void, unknown>;
+export { narrowToWidePaginationItemRanges as narrowToWideRanges };

lib.cjs/hooks/usePaginationItems.d.ts

@@ -5,2 +5,3 @@ import { NarrowStrategy } from '../compositions';
     previousLabel?: string;
+    a11yActiveLabel: string;
     narrowStrategy?: NarrowStrategy | NarrowStrategy[];
@@ -7,0 +8,0 @@ }): {

lib.cjs/index.d.ts

@@ -6,3 +6,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, }: BootstrapPaginationProps): JSX.Element | null;
+declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, narrowStrategy, className, extraClassName, pageItemClassName, pageLinkClassName, activeItemClassName, disabledItemClassName, srOnlyClassName, previousLabel, nextLabel, a11yActiveLabel, ariaCurrentAttr, }: BootstrapPaginationProps): JSX.Element | null;
 declare namespace BootstrapPagination {
@@ -14,3 +14,3 @@ var propTypes: {
         maxWidth: PropTypes.Requireable<number>;
-        narrowStrategy: PropTypes.Requireable<string | string[]>;
+        narrowStrategy: PropTypes.Requireable<NonNullable<string | string[] | null | undefined>>;
         className: PropTypes.Requireable<string>;
@@ -26,2 +26,4 @@ extraClassName: PropTypes.Requireable<string>;
         nextLabel: PropTypes.Requireable<string>;
+        a11yActiveLabel: PropTypes.Requireable<string>;
+        ariaCurrentAttr: PropTypes.Requireable<boolean>;
     };
@@ -45,2 +47,4 @@ }
     nextLabel?: string;
+    a11yActiveLabel?: string;
+    ariaCurrentAttr?: boolean;
 };

lib.cjs/index.js

@@ -36,8 +36,9 @@ "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;
-    var _h = (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, _h = _a.a11yActiveLabel, a11yActiveLabel = _h === void 0 ? '(current)' : _h, ariaCurrentAttr = _a.ariaCurrentAttr;
+    var _j = (0, usePaginationItems_1.usePaginationItems)(current, total, maxWidth, {
         narrowStrategy: narrowStrategy,
         previousLabel: previousLabel,
         nextLabel: nextLabel,
-    }), items = _h.items, ref = _h.ref, clearCache = _h.clearCache;
+        a11yActiveLabel: a11yActiveLabel,
+    }), items = _j.items, ref = _j.ref, clearCache = _j.clearCache;
     (0, react_1.useEffect)(function () {
@@ -70,3 +71,3 @@ return function () { return clearCache(); };
             react_1.default.createElement("span", { "aria-hidden": "true" }, label),
-            react_1.default.createElement("span", { className: srOnlyClassName }, a11yLabel))) : (label);
+            srOnlyClassName && react_1.default.createElement("span", { className: srOnlyClassName }, a11yLabel))) : (label);
     }
@@ -76,7 +77,7 @@ return (react_1.default.createElement("ul", { className: getContainerClassName(), ref: ref }, items.map(function (item) {
         // item = ClickableItem
-        react_1.default.createElement("li", { key: item.key, className: "".concat(pageItemClassName).concat(item.active && activeItemClassName ? ' ' + activeItemClassName : '') },
+        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: "#", onClick: (0, dom_1.preventDefault)(function () { return handlePageChange(item.gotoPage); }), "aria-label": item.a11yLabel }, 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 }, getLabel(item.label, item.a11yLabel))));
+            react_1.default.createElement("span", { className: pageLinkClassName, "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel))));
     })));
@@ -103,2 +104,4 @@ }
     nextLabel: prop_types_1.default.string,
+    a11yActiveLabel: prop_types_1.default.string,
+    ariaCurrentAttr: prop_types_1.default.bool,
 };

lib.cjs/paginationItem.d.ts

@@ -33,3 +33,4 @@ import { CompositionItem } from './compositionItem';
     previousLabel?: string;
+    a11yActiveLabel: string;
 }): PaginationItem[];
 export {};

lib.cjs/paginationItem.js

@@ -38,3 +38,3 @@ "use strict";
                     label: page.toString(),
-                    a11yLabel: type === 'active' ? '(current)' : undefined,
+                    a11yLabel: (type === 'active' && (options === null || options === void 0 ? void 0 : options.a11yActiveLabel)) || undefined,
                     gotoPage: page,
@@ -41,0 +41,0 @@ active: type === 'active',

lib/compositions/ranges.d.ts

@@ -1,2 +0,1 @@
-export { narrowToWidePaginationItemRanges as narrowToWideRanges };
 declare function narrowToWidePaginationItemRanges(start: number, end: number, collapsePos: 'L' | 'R'): Generator<({
@@ -9,1 +8,2 @@ type: "page";
 })[], void, unknown>;
+export { narrowToWidePaginationItemRanges as narrowToWideRanges };

lib/compositions/ranges.js

@@ -65,3 +65,2 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { createEllipsis, createPage } from '../compositionItem';
-export { narrowToWidePaginationItemRanges as narrowToWideRanges };
 function narrowToWidePaginationItemRanges(start, end, collapsePos) {
@@ -103,2 +102,3 @@ var _a, _b, range, e_1_1;
 }
+export { narrowToWidePaginationItemRanges as narrowToWideRanges };
 function narrowToWideNumberRanges(first, last, collapsePos) {
@@ -105,0 +105,0 @@ var fullWidth, iterationWidth, range;

lib/hooks/usePaginationItems.d.ts

@@ -5,2 +5,3 @@ import { NarrowStrategy } from '../compositions';
     previousLabel?: string;
+    a11yActiveLabel: string;
     narrowStrategy?: NarrowStrategy | NarrowStrategy[];
@@ -7,0 +8,0 @@ }): {

lib/index.d.ts

@@ -6,3 +6,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, }: BootstrapPaginationProps): JSX.Element | null;
+declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, narrowStrategy, className, extraClassName, pageItemClassName, pageLinkClassName, activeItemClassName, disabledItemClassName, srOnlyClassName, previousLabel, nextLabel, a11yActiveLabel, ariaCurrentAttr, }: BootstrapPaginationProps): JSX.Element | null;
 declare namespace BootstrapPagination {
@@ -14,3 +14,3 @@ var propTypes: {
         maxWidth: PropTypes.Requireable<number>;
-        narrowStrategy: PropTypes.Requireable<string | string[]>;
+        narrowStrategy: PropTypes.Requireable<NonNullable<string | string[] | null | undefined>>;
         className: PropTypes.Requireable<string>;
@@ -26,2 +26,4 @@ extraClassName: PropTypes.Requireable<string>;
         nextLabel: PropTypes.Requireable<string>;
+        a11yActiveLabel: PropTypes.Requireable<string>;
+        ariaCurrentAttr: PropTypes.Requireable<boolean>;
     };
@@ -45,2 +47,4 @@ }
     nextLabel?: string;
+    a11yActiveLabel?: string;
+    ariaCurrentAttr?: boolean;
 };

lib/index.js

@@ -8,8 +8,9 @@ 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;
-    var _h = 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, _h = _a.a11yActiveLabel, a11yActiveLabel = _h === void 0 ? '(current)' : _h, ariaCurrentAttr = _a.ariaCurrentAttr;
+    var _j = usePaginationItems(current, total, maxWidth, {
         narrowStrategy: narrowStrategy,
         previousLabel: previousLabel,
         nextLabel: nextLabel,
-    }), items = _h.items, ref = _h.ref, clearCache = _h.clearCache;
+        a11yActiveLabel: a11yActiveLabel,
+    }), items = _j.items, ref = _j.ref, clearCache = _j.clearCache;
     useEffect(function () {
@@ -42,3 +43,3 @@ return function () { return clearCache(); };
             React.createElement("span", { "aria-hidden": "true" }, label),
-            React.createElement("span", { className: srOnlyClassName }, a11yLabel))) : (label);
+            srOnlyClassName && React.createElement("span", { className: srOnlyClassName }, a11yLabel))) : (label);
     }
@@ -48,7 +49,7 @@ return (React.createElement("ul", { className: getContainerClassName(), ref: ref }, items.map(function (item) {
         // item = ClickableItem
-        React.createElement("li", { key: item.key, className: "".concat(pageItemClassName).concat(item.active && activeItemClassName ? ' ' + activeItemClassName : '') },
+        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: "#", onClick: preventDefault(function () { return handlePageChange(item.gotoPage); }), "aria-label": item.a11yLabel }, 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 }, getLabel(item.label, item.a11yLabel))));
+            React.createElement("span", { className: pageLinkClassName, "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel))));
     })));
@@ -75,2 +76,4 @@ }
     nextLabel: PropTypes.string,
+    a11yActiveLabel: PropTypes.string,
+    ariaCurrentAttr: PropTypes.bool,
 };

lib/paginationItem.d.ts

@@ -33,3 +33,4 @@ import { CompositionItem } from './compositionItem';
     previousLabel?: string;
+    a11yActiveLabel: string;
 }): PaginationItem[];
 export {};

lib/paginationItem.js

@@ -35,3 +35,3 @@ export function compositionToPaginationItems(compositionItems, options) {
                     label: page.toString(),
-                    a11yLabel: type === 'active' ? '(current)' : undefined,
+                    a11yLabel: (type === 'active' && (options === null || options === void 0 ? void 0 : options.a11yActiveLabel)) || undefined,
                     gotoPage: page,
@@ -38,0 +38,0 @@ active: type === 'active',

package.json

 {
   "name": "react-responsive-pagination",
-  "version": "1.6.0",
+  "version": "1.7.0-beta.1",
   "description": "React component for responsive pagination",
@@ -48,24 +48,24 @@ "author": "jonelantha",
     "@semantic-release/git": "^10.0.1",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^29.0.0",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.0.15",
+    "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.30.6",
-    "@typescript-eslint/parser": "^5.30.6",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.20.0",
+    "eslint": "^8.23.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.7",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "27.5.1",
+    "jest": "29.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "semantic-release": "^19.0.3",
-    "ts-jest": "27.1.5",
-    "typescript": "^4.7.4"
+    "semantic-release": "^19.0.5",
+    "ts-jest": "28.0.8",
+    "typescript": "^4.8.2"
   }
 }

README.md

@@ -74,11 +74,11 @@ # React Responsive Pagination
 
-| Prop                                                    | Description                                                                                                                                                                                                                                                                                                                                     |
-| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **className**<br />`string`<br />(optional)             | Class name for the top level **<ul\>** container<br />Defaults to `pagination`, overrides **extraClassName** prop (below)                                                                                                                                                                                                                       |
-| **extraClassName**<br />`string`<br />(optional)        | Useful when using Bootstrap styles, extra classNames to be added to the top level **<ul\>** container. Use this prop to override the default justify value - for example to align elements to the start of the page use: `justify-content-start`<br />Defaults to `justify-content-center`, not applicable if **className** prop (above) is set |
-| **pageItemClassName**<br />`string`<br />(optional)     | Class name for all the **<li\>** elements<br />Defaults to `page-item`                                                                                                                                                                                                                                                                          |
-| **pageLinkClassName**<br />`string`<br />(optional)     | Class name for **<a\>** or **<span\>** child elements within an **<li\>** element: <br />`<li ...><a class='page-link'>1</a></li>`<br />Defaults to `page-link`                                                                                                                                                                                 |
-| **activeItemClassName**<br />`string`<br />(optional)   | Appended to **<li\>** class name for the active element:<br />`<li class='page-item active'><a class='page-link'>1</a></li>`<br />Defaults to `active`                                                                                                                                                                                          |
-| **disabledItemClassName**<br />`string`<br />(optional) | Appended to **<li\>** class name for non-clickable elements (disabled nav buttons and the break/ellipsis):<br />`<li class='page-item disabled'><span class='page-link'>...</span></li>`<br />Defaults to `disabled`                                                                                                                            |
-| **srOnlyClassName**<br />`string`<br />(optional)       | Class for screen reader only content (which should be visually hidden) - see [an example of typical css](https://react-responsive-pagination.elantha.com/custom-styled-pagination/#screen-reader-only-sr-only-styles) for this purpose<br />Defaults to `sr-only`                                                                               |
+| Prop                                                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **className**<br />`string`<br />(optional)             | Class name for the top level **<ul\>** container<br />Defaults to `pagination`, overrides **extraClassName** prop (below)                                                                                                                                                                                                                                                                                                                |
+| **extraClassName**<br />`string`<br />(optional)        | Useful when using Bootstrap styles, extra classNames to be added to the top level **<ul\>** container. Use this prop to override the default justify value - for example to align elements to the start of the page use: `justify-content-start`<br />Defaults to `justify-content-center`, not applicable if **className** prop (above) is set                                                                                          |
+| **pageItemClassName**<br />`string`<br />(optional)     | Class name for all the **<li\>** elements<br />Defaults to `page-item`                                                                                                                                                                                                                                                                                                                                                                   |
+| **pageLinkClassName**<br />`string`<br />(optional)     | Class name for **<a\>** or **<span\>** child elements within an **<li\>** element: <br />`<li ...><a class='page-link'>1</a></li>`<br />Defaults to `page-link`                                                                                                                                                                                                                                                                          |
+| **activeItemClassName**<br />`string`<br />(optional)   | Appended to **<li\>** class name for the active element:<br />`<li class='page-item active'><a class='page-link'>1</a></li>`<br />Defaults to `active`                                                                                                                                                                                                                                                                                   |
+| **disabledItemClassName**<br />`string`<br />(optional) | Appended to **<li\>** class name for non-clickable elements (disabled nav buttons and the break/ellipsis):<br />`<li class='page-item disabled'><span class='page-link'>...</span></li>`<br />Defaults to `disabled`                                                                                                                                                                                                                     |
+| **srOnlyClassName**<br />`string`<br />(optional)       | Class for screen reader only content (which should be visually hidden) - see [an example of typical css](https://react-responsive-pagination.elantha.com/custom-styled-pagination/#screen-reader-only-sr-only-styles) for this purpose<br />Setting this prop to `''` will turn off all the **<span\>** based screen reader labels (however, `aria-label` attributes will still be output for screen readers)<br />Defaults to `sr-only` |
 
@@ -85,0 +85,0 @@ ### Label 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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

146592

increased by2.29%

Lines of code

2827

increased by0.64%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes