react-responsive-pagination - npm Package Compare versions

Comparing version 2.0.0-beta.6 to 2.0.0-beta.7

CHANGELOG.md

 # React Responsive Pagination Changelog
 
+# [2.0.0-beta.7](https://github.com/jonelantha/react-responsive-pagination/compare/v2.0.0-beta.6...v2.0.0-beta.7) (2023-03-21)
+
+
+### Features
+
+* Move presets/labelBehavior to sub-packages ([8aceb81](https://github.com/jonelantha/react-responsive-pagination/commit/8aceb81c237cc157cdc50cdadf6cb94bbaa8f214))
+
 # [2.0.0-beta.6](https://github.com/jonelantha/react-responsive-pagination/compare/v2.0.0-beta.5...v2.0.0-beta.6) (2023-03-17)
@@ -4,0 +11,0 @@

dist/index.d.ts

 /// <reference types="react" />
-import { PaginationItem } from './paginationItem.js';
 import { NarrowBehaviour } from './narrowBehaviour.js';
-export declare const v1_bootstrap4PaginationPreset: {
-    ariaCurrentAttr: boolean;
-    labelBehaviour: (item: PaginationItem) => JSX.Element;
-};
+import { LabelBehaviour } from './labelBehaviour.js';
 export declare const bootstrap4PaginationPreset: {};
@@ -13,3 +9,3 @@ export declare const bootstrap5PaginationPreset: {};
 declare function ResponsivePaginationDev(props: ResponsivePaginationProps): JSX.Element | null;
-type ResponsivePaginationProps = {
+export type ResponsivePaginationProps = {
     current: number;
@@ -36,6 +32,1 @@ total: number;
 };
-type LabelBehaviour = (item: PaginationItem) => React.ReactNode;
-export declare function srOnlySpanLabel({ a11yActiveLabel, srOnlyClassName, }?: {
-    a11yActiveLabel?: string;
-    srOnlyClassName?: string;
-}): (item: PaginationItem) => JSX.Element;

dist/index.js

@@ -1,2 +0,2 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect } from 'react';
@@ -6,6 +6,4 @@ import PropTypes from 'prop-types';
 import { preventDefault } from './helpers/dom.js';
-export const v1_bootstrap4PaginationPreset = {
-    ariaCurrentAttr: false,
-    labelBehaviour: srOnlySpanLabel(),
-};
+import { defaultLabelBehaviour } from './labelBehaviour.js';
+/* legacy - may be removed */
 export const bootstrap4PaginationPreset = {};
@@ -81,12 +79,2 @@ export const bootstrap5PaginationPreset = {};
 };
-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 = [];
@@ -101,3 +89,3 @@ function checkLegacyProps(props) {
             !legacyUsageWarnings.includes(legacyProp)) {
-            console.warn(`react-responsive-pagination: '${legacyProp}' prop no longer supported, please see migration guide`);
+            console.warn(`react-responsive-pagination: '${legacyProp}' prop no longer supported, please see migration guide: https://react-responsive-pagination.elantha.com/migration/`);
             legacyUsageWarnings.push(legacyProp);
@@ -104,0 +92,0 @@ }

package.json

 {
   "name": "react-responsive-pagination",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "description": "React component for responsive pagination",
@@ -13,3 +13,5 @@ "author": "jonelantha",
     ".": "./dist/index.js",
-    "./narrowBehaviour": "./dist/narrowBehaviour.js"
+    "./narrowBehaviour": "./dist/narrowBehaviour.js",
+    "./labelBehaviour": "./dist/labelBehaviour.js",
+    "./presets": "./dist/presets.js"
   },
@@ -22,2 +24,6 @@ "files": [
     "narrowBehaviour.js",
+    "labelBehaviour.d.ts",
+    "labelBehaviour.js",
+    "preset.d.ts",
+    "preset.js",
     "package.json",
@@ -24,0 +30,0 @@ "README.md"

README.md

@@ -16,12 +16,12 @@ # React Responsive Pagination
 
-### 📕 Visit [https://react-responsive-pagination.elantha.com](https://react-responsive-pagination.elantha.com) to get started 🚀
+## 📕 Visit [https://react-responsive-pagination.elantha.com](https://react-responsive-pagination.elantha.com) to get started 🚀
 
-## 🥾 Works out of the box with Bootstrap 4.x or 5.x
+## ⭐️ v1 user? See the [v1 migration guide](https://react-responsive-pagination.elantha.com/migration) to get started with v2 ⭐️
 
-Using Bootstrap? See the [Bootstrap Getting Started Guide](https://react-responsive-pagination.elantha.com/bootstrap-pagination/)
+## 🎨 Supports custom styling and also works out of the box with Bootstrap 4 or 5 🥾
 
-## 🎨 Supports custom styling
-
 Custom styles? No problem - see the [Custom Styles Guide](https://react-responsive-pagination.elantha.com/custom-styled-pagination/)
 
+Using Bootstrap? See the [Bootstrap Getting Started Guide](https://react-responsive-pagination.elantha.com/bootstrap-pagination/)
+
 ## ⏳ Quick Start
@@ -36,3 +36,4 @@
 import ResponsivePagination from 'react-responsive-pagination';
-// ... make sure appropriate css is included in the project (see guides above)
+// make sure appropriate css is included in the project:
+// see css sample below (or import Bootstrap styles)
 
@@ -53,2 +54,31 @@ function MyApp() {
 
+Basic css example, see [Custom Styles Guide](https://react-responsive-pagination.elantha.com/custom-styled-pagination/) for more examples or [use Bootstrap styles](https://react-responsive-pagination.elantha.com/)
+
+```css
+.pagination {
+  justify-content: center;
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+}
+
+.page-item .page-link {
+  position: relative;
+  display: block;
+  margin: 0 10px;
+  color: #007bff;
+  text-decoration: none;
+}
+
+.page-item.active .page-link {
+  font-weight: bold;
+}
+
+.page-item.disabled .page-link {
+  color: #6c757d;
+  pointer-events: none;
+  cursor: auto;
+}
+```
+
 ## ✔︎ Requirements / Compatibility
@@ -55,0 +85,0 @@

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

71039

increased by3%

Number of package files

66

increased by10%

Lines of code

997

increased by1.42%

Number of lines in readme file

131

increased by29.7%

No dependency changes