react-responsive-pagination - npm Package Compare versions

Comparing version 2.0.0-beta.3 to 2.0.0-beta.4

CHANGELOG.md

 # React Responsive Pagination Changelog
 
+# [2.0.0-beta.4](https://github.com/jonelantha/react-responsive-pagination/compare/v2.0.0-beta.3...v2.0.0-beta.4) (2023-03-14)
+
+
+### Features
+
+* Move v1 srOnly label behaviour into new LabelBehavior ([6baeb8e](https://github.com/jonelantha/react-responsive-pagination/commit/6baeb8e07c5275fe27c2789f1fac0fd79f9ebe0c))
+
+
+### BREAKING CHANGES
+
+* `srOnlyClassName` and `a11yActiveLabel` will require transition to srOnlySpanLabel
+
 # [2.0.0-beta.3](https://github.com/jonelantha/react-responsive-pagination/compare/v2.0.0-beta.2...v2.0.0-beta.3) (2023-03-11)
@@ -4,0 +16,0 @@

dist/hooks/usePaginationItems.d.ts

@@ -8,3 +8,2 @@ import { NarrowStrategy } from '../compositions/index.js';
     renderNav?: boolean;
-    a11yActiveLabel?: string;
     narrowStrategy?: NarrowStrategy | NarrowStrategy[];
@@ -11,0 +10,0 @@ }): {

dist/index.d.ts

 /// <reference types="react" />
-import PropTypes from 'prop-types';
 import { NarrowStrategy } from './compositions/index.js';
+import { PaginationItem } from './paginationItem.js';
 export declare const v1_bootstrap4PaginationPreset: {
     ariaCurrentAttr: boolean;
-    a11yActiveLabel: string;
-    srOnlyClassName: string;
+    labelBehaviour: (item: PaginationItem) => JSX.Element;
 };
 export declare const bootstrap4PaginationPreset: {};
 export declare const bootstrap5PaginationPreset: {};
-declare const _default: import("react").MemoExoticComponent<typeof ResponsivePagination>;
+declare const _default: import("react").MemoExoticComponent<typeof ResponsivePaginationDev>;
 export default _default;
-declare function ResponsivePagination({ current, total, onPageChange: handlePageChange, maxWidth, narrowStrategy, className, extraClassName, pageItemClassName, pageLinkClassName, activeItemClassName, disabledItemClassName, srOnlyClassName, previousLabel, nextLabel, ariaPreviousLabel, ariaNextLabel, renderNav, a11yActiveLabel, ariaCurrentAttr, linkHref, }: ResponsivePaginationProps): JSX.Element | null;
-declare namespace ResponsivePagination {
-    var propTypes: {
-        current: PropTypes.Validator<number>;
-        total: PropTypes.Validator<number>;
-        onPageChange: PropTypes.Validator<(...args: any[]) => any>;
-        maxWidth: PropTypes.Requireable<number>;
-        narrowStrategy: PropTypes.Requireable<NonNullable<string | string[] | null | undefined>>;
-        className: PropTypes.Requireable<string>;
-        extraClassName: PropTypes.Requireable<string>;
-        pageItemClassName: PropTypes.Requireable<string>;
-        pageLinkClassName: PropTypes.Requireable<string>;
-        activeItemClassName: PropTypes.Requireable<string>;
-        disabledItemClassName: PropTypes.Requireable<string>;
-        disabledLinkClassName: PropTypes.Requireable<string>;
-        srOnlyClassName: PropTypes.Requireable<string>;
-        previousLabel: PropTypes.Requireable<string>;
-        nextLabel: PropTypes.Requireable<string>;
-        ariaPreviousLabel: PropTypes.Requireable<string>;
-        ariaNextLabel: PropTypes.Requireable<string>;
-        renderNav: PropTypes.Requireable<boolean>;
-        a11yActiveLabel: PropTypes.Requireable<string>;
-        ariaCurrentAttr: PropTypes.Requireable<boolean>;
-        linkHref: PropTypes.Requireable<string>;
-    };
-}
+declare function ResponsivePaginationDev(props: ResponsivePaginationProps): JSX.Element | null;
 type ResponsivePaginationProps = {
@@ -52,3 +26,2 @@ current: number;
     disabledLinkClassName?: string;
-    srOnlyClassName?: string;
     previousLabel?: string;
@@ -59,5 +32,10 @@ nextLabel?: string;
     renderNav?: boolean;
-    a11yActiveLabel?: string;
     ariaCurrentAttr?: boolean;
     linkHref?: 'hash' | 'omit';
+    labelBehaviour?: LabelBehaviour;
 };
+type LabelBehaviour = (item: PaginationItem) => React.ReactNode;
+export declare function srOnlySpanLabel({ a11yActiveLabel, srOnlyClassName, }?: {
+    a11yActiveLabel?: string;
+    srOnlyClassName?: string;
+}): (item: PaginationItem) => JSX.Element;

dist/index.js

@@ -8,10 +8,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
     ariaCurrentAttr: false,
-    a11yActiveLabel: '(current)',
-    srOnlyClassName: 'sr-only',
+    labelBehaviour: srOnlySpanLabel(),
 };
 export const bootstrap4PaginationPreset = {};
 export const bootstrap5PaginationPreset = {};
-export default memo(ResponsivePagination);
+// check dev tools
+export default process.env.NODE_ENV !== 'production'
+    ? memo(ResponsivePaginationDev)
+    : memo(ResponsivePagination);
+function ResponsivePaginationDev(props) {
+    checkLegacyProps(props);
+    return ResponsivePagination(props);
+}
 /* eslint-disable jsx-a11y/anchor-is-valid */
-function ResponsivePagination({ current, total, onPageChange: handlePageChange, maxWidth, narrowStrategy, className, extraClassName = 'justify-content-center', pageItemClassName = 'page-item', pageLinkClassName = 'page-link', activeItemClassName = 'active', disabledItemClassName = 'disabled', srOnlyClassName, previousLabel, nextLabel, ariaPreviousLabel, ariaNextLabel, renderNav = true, a11yActiveLabel, ariaCurrentAttr = true, linkHref = 'hash', }) {
+function ResponsivePagination({ current, total, onPageChange: handlePageChange, maxWidth, narrowStrategy, className, extraClassName = 'justify-content-center', pageItemClassName = 'page-item', pageLinkClassName = 'page-link', activeItemClassName = 'active', disabledItemClassName = 'disabled', previousLabel, nextLabel, ariaPreviousLabel, ariaNextLabel, renderNav = true, ariaCurrentAttr = true, linkHref = 'hash', labelBehaviour: getLabel = defaultLabelBehaviour, }) {
     const { items, ref, clearCache } = usePaginationItems(current, total, maxWidth, {
@@ -24,3 +30,2 @@ narrowStrategy,
         renderNav,
-        a11yActiveLabel,
     });
@@ -36,3 +41,2 @@ useEffect(() => {
         disabledItemClassName,
-        srOnlyClassName,
     ]);
@@ -52,10 +56,7 @@ if (items.length === 0)
     }
-    function getLabel(label, a11yLabel) {
-        return (_jsxs(_Fragment, { children: [!a11yLabel || a11yLabel.mode === 'additional' ? (label) : (_jsx("span", { "aria-hidden": "true", children: label })), a11yLabel && srOnlyClassName && (_jsx("span", { className: srOnlyClassName, children: `${a11yLabel.mode === 'additional' ? ' ' : ''}${a11yLabel.label}` }))] }));
-    }
     return (_jsx("ul", { className: getContainerClassName(), ref: ref, children: items.map(item => item.gotoPage !== undefined ? (
         // item = ClickableItem
-        _jsx("li", { className: `${pageItemClassName}${item.active && activeItemClassName ? ' ' + activeItemClassName : ''}`, "aria-current": item.active && ariaCurrentAttr ? 'page' : undefined, children: _jsx("a", { className: pageLinkClassName, href: linkHref === 'hash' ? '#' : undefined, onClick: preventDefault(() => handlePageChange(item.gotoPage)), "aria-label": item.a11yLabel?.mode === 'replace' ? item.a11yLabel.label : undefined, children: getLabel(item.label, item.a11yLabel) }) }, item.key)) : (
+        _jsx("li", { className: `${pageItemClassName}${item.active && activeItemClassName ? ' ' + activeItemClassName : ''}`, "aria-current": item.active && ariaCurrentAttr ? 'page' : undefined, children: _jsx("a", { className: pageLinkClassName, href: linkHref === 'hash' ? '#' : undefined, onClick: preventDefault(() => handlePageChange(item.gotoPage)), "aria-label": item.a11yLabel, children: getLabel(item) }) }, item.key)) : (
         // item = NonClickableItem
-        _jsx("li", { className: `${pageItemClassName} ${disabledItemClassName}`, "aria-hidden": item.a11yHidden, children: _jsx("span", { className: pageLinkClassName, "aria-label": item.a11yLabel?.mode === 'replace' ? item.a11yLabel.label : undefined, children: getLabel(item.label, item.a11yLabel) }) }, item.key))) }));
+        _jsx("li", { className: `${pageItemClassName} ${disabledItemClassName}`, "aria-hidden": item.a11yHidden, children: _jsx("span", { className: pageLinkClassName, "aria-label": item.a11yLabel, children: getLabel(item) }) }, item.key))) }));
 }
@@ -78,3 +79,2 @@ ResponsivePagination.propTypes = {
     disabledLinkClassName: PropTypes.string,
-    srOnlyClassName: PropTypes.string,
     previousLabel: PropTypes.string,
@@ -85,5 +85,25 @@ nextLabel: PropTypes.string,
     renderNav: PropTypes.bool,
-    a11yActiveLabel: PropTypes.string,
     ariaCurrentAttr: PropTypes.bool,
     linkHref: PropTypes.oneOf(['hash', 'omit']),
+    labelBehaviour: PropTypes.func,
 };
+function defaultLabelBehaviour({ a11yLabel, label }) {
+    return !a11yLabel ? label : _jsx("span", { "aria-hidden": "true", children: label });
+}
+export function srOnlySpanLabel({ a11yActiveLabel = '(current)', srOnlyClassName = 'sr-only', } = {}) {
+    return (item) => {
+        const activePage = item.gotoPage !== undefined && item.active;
+        const srOnlyLabel = activePage && a11yActiveLabel ? ` ${a11yActiveLabel}` : item.a11yLabel;
+        return (_jsxs(_Fragment, { children: [!item.a11yLabel ? item.label : _jsx("span", { "aria-hidden": "true", children: item.label }), srOnlyLabel && _jsx("span", { className: srOnlyClassName, children: srOnlyLabel })] }));
+    };
+}
+const legacyUsageWarnings = [];
+function checkLegacyProps(props) {
+    for (const legacyProp of ['srOnlyClassName', 'a11yActiveLabel']) {
+        if (props[legacyProp] !== undefined &&
+            !legacyUsageWarnings.includes(legacyProp)) {
+            console.warn(`react-responsive-pagination: '${legacyProp}' prop no longer supported, please see migration guide`);
+            legacyUsageWarnings.push(legacyProp);
+        }
+    }
+}

dist/paginationItem.d.ts

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

dist/paginationItem.js

 export function compositionToPaginationItems(compositionItems, options) {
-    const activeLabel = options?.a11yActiveLabel;
     const previousLabel = options?.previousLabel || '«';
@@ -14,5 +13,3 @@ const a11yPreviousLabel = options?.ariaPreviousLabel || 'Previous';
                     label: previousLabel,
-                    a11yLabel: previousLabel === a11yPreviousLabel
-                        ? undefined
-                        : { label: a11yPreviousLabel, mode: 'replace' },
+                    a11yLabel: previousLabel === a11yPreviousLabel ? undefined : a11yPreviousLabel,
                     gotoPage: page,
@@ -25,5 +22,3 @@ };
                     label: nextLabel,
-                    a11yLabel: nextLabel === a11yNextLabel
-                        ? undefined
-                        : { label: a11yNextLabel, mode: 'replace' },
+                    a11yLabel: nextLabel === a11yNextLabel ? undefined : a11yNextLabel,
                     gotoPage: page,
@@ -45,5 +40,2 @@ };
                     label: page.toString(),
-                    a11yLabel: type === 'active' && activeLabel
-                        ? { label: activeLabel, mode: 'additional' }
-                        : undefined,
                     gotoPage: page,
@@ -50,0 +42,0 @@ active: type === 'active',

package.json

 {
   "name": "react-responsive-pagination",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "description": "React component for responsive pagination",
@@ -5,0 +5,0 @@ "author": "jonelantha",

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

Worsened metrics

Total package byte prevSize

68702

decreased by-1.03%

Lines of code

1037

decreased by-1.8%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes