react-headless-pagination - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

dist/react-headless-pagination.cjs.development.js

@@ -8,3 +8,3 @@ 'use strict';
 var React = _interopDefault(require('react'));
-var classNames = _interopDefault(require('classnames'));
+var clsx = _interopDefault(require('clsx'));
 
@@ -130,3 +130,3 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return React.createElement(as.type, Object.assign({}, buttonProps, as.props, {
-    className: classNames(className, as.props.className),
+    className: clsx(className, as.props.className),
     onClick: function onClick() {
@@ -167,3 +167,3 @@ return previous();
   return React.createElement(as.type, Object.assign({}, buttonProps, as.props, {
-    className: classNames(className, as.props.className),
+    className: clsx(className, as.props.className),
     onClick: function onClick() {
@@ -208,3 +208,3 @@ return next();
   var renderPageButton = function renderPageButton(page) {
-    var _classNames;
+    var _clsx;
 
@@ -214,3 +214,3 @@ return React.createElement("li", {
     }, React.createElement(as.type, Object.assign({
-      "data-testid": classNames((_classNames = {}, _classNames["" + dataTestIdActive] = dataTestIdActive && pagination.currentPage + 1 === page, _classNames[dataTestIdInactive + "-" + page] = dataTestIdActive && pagination.currentPage + 1 !== page, _classNames)) || undefined,
+      "data-testid": clsx((_clsx = {}, _clsx["" + dataTestIdActive] = dataTestIdActive && pagination.currentPage + 1 === page, _clsx[dataTestIdInactive + "-" + page] = dataTestIdActive && pagination.currentPage + 1 !== page, _clsx)) || undefined,
       tabIndex: 0,
@@ -225,3 +225,3 @@ onKeyPress: function onKeyPress(event) {
       },
-      className: classNames(className, pagination.currentPage + 1 === page ? activeClassName : inactiveClassName)
+      className: clsx(className, pagination.currentPage + 1 === page ? activeClassName : inactiveClassName)
     }, as.props), page));
@@ -228,0 +228,0 @@ };

dist/react-headless-pagination.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),n=e(require("classnames"));function a(e,t){if(null==e)return{};var n,a,r={},s=Object.keys(e);for(a=0;a<s.length;a++)t.indexOf(n=s[a])>=0||(r[n]=e[n]);return r}var r=function(e){var r,s=e.className,u=e.children,l=e.dataTestId,i=e.as,o=void 0===i?t.createElement("button",null):i,d=a(e,["className","children","dataTestId","as"]),g=t.useContext(c),P=function(){g.currentPage+1>1&&g.setCurrentPage(g.currentPage-1)},m=0===g.currentPage;return t.createElement(o.type,Object.assign({},d,o.props,{className:n(s,o.props.className),onClick:function(){return P()},tabIndex:m?"-1":0,disabled:m,"data-testid":l,onKeyPress:function(e){e.preventDefault(),"Enter"!==e.key||m||P()}}),null!=(r=o.props.children)?r:u)},s=function(e){var r,s=e.className,u=e.children,l=e.dataTestId,i=e.as,o=void 0===i?t.createElement("button",null):i,d=a(e,["className","children","dataTestId","as"]),g=t.useContext(c),P=function(){g.currentPage+1<g.pages.length&&g.setCurrentPage(g.currentPage+1)},m=g.currentPage===g.pages.length-1;return t.createElement(o.type,Object.assign({},d,o.props,{className:n(s,o.props.className),onClick:function(){return P()},tabIndex:m?"-1":0,disabled:m,"data-testid":l,onKeyPress:function(e){e.preventDefault(),"Enter"!==e.key||m||P()}}),null!=(r=o.props.children)?r:u)},u=function(e){var n=e.prev,a=t.useContext(c);return a.isPreviousTruncable&&!0===n||a.isNextTruncable&&!n?t.createElement("li",{className:a.truncableClassName||void 0},a.truncableText):null},l=function(e){var a=e.as,r=void 0===a?t.createElement("a",null):a,s=e.className,l=e.dataTestIdActive,i=e.dataTestIdInactive,o=e.activeClassName,d=e.inactiveClassName,g=t.useContext(c),P=function(e){var a;return t.createElement("li",{key:e},t.createElement(r.type,Object.assign({"data-testid":n((a={},a[""+l]=l&&g.currentPage+1===e,a[i+"-"+e]=l&&g.currentPage+1!==e,a))||void 0,tabIndex:0,onKeyPress:function(t){"Enter"===t.key&&g.setCurrentPage(e-1)},onClick:function(){return g.setCurrentPage(e-1)},className:n(s,g.currentPage+1===e?o:d)},r.props),e))};return t.createElement(t.Fragment,null,g.previousPages.map(P),t.createElement(u,{prev:!0}),g.middlePages.map(P),t.createElement(u,null),g.nextPages.map(P))},c=t.createContext({currentPage:0,setCurrentPage:function(){},truncableText:"...",truncableClassName:"",pages:[],hasPreviousPage:!1,hasNextPage:!1,previousPages:[],isPreviousTruncable:!1,middlePages:[],isNextTruncable:!1,nextPages:[]}),i=function(e){var n,r,s,u,l,i,o,d,g,P,m,p,v,f,b,x,N,C,h,T,E,y=e.dataTestId,I=a(e,["dataTestId"]),k=(r=(n=I).currentPage,s=n.setCurrentPage,l=void 0===(u=n.truncableText)?"...":u,o=void 0===(i=n.truncableClassName)?"":i,d=n.totalPages,g=n.edgePageCount,P=n.middlePagesSiblingCount,m=Array(d).fill(0).map((function(e,t){return t+1})),p=r>1,v=r<d,f=r<=P,b=r+P>=d,x=t.useMemo((function(){var e=2*P+1;return f?m.slice(0,e):b?m.slice(-e):m.slice(r-P,r+P+1)}),[r,m]),N=t.useMemo((function(){return f||m.slice(0,x[0]-1).length<1?[]:m.slice(0,g).filter((function(e){return!x.includes(e)}))}),[r,m]),C=t.useMemo((function(){return m.slice(x[x.length-1],m[m.length])}),[m,x]),h=t.useMemo((function(){return b||C.length<1?[]:m.slice(m.length-g,m.length).filter((function(e){return!x.includes(e)}))}),[x,m]),T=t.useMemo((function(){return x[0]>N[N.length-1]+1}),[N,x]),E=t.useMemo((function(){return x[x.length-1]+1<h[0]}),[h,x]),{currentPage:r,setCurrentPage:s,truncableText:l,truncableClassName:o,pages:m,hasPreviousPage:p,hasNextPage:v,previousPages:N,isPreviousTruncable:T,middlePages:x,isNextTruncable:E,nextPages:h});return t.createElement(c.Provider,{value:k},t.createElement("div",{className:I.className,"data-testid":y},I.children))};i.PrevButton=r,i.NextButton=s,i.PageButton=l,exports.NextButton=s,exports.PageButton=l,exports.Pagination=i,exports.PrevButton=r;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),n=e(require("clsx"));function a(e,t){if(null==e)return{};var n,a,r={},s=Object.keys(e);for(a=0;a<s.length;a++)t.indexOf(n=s[a])>=0||(r[n]=e[n]);return r}var r=function(e){var r,s=e.className,u=e.children,l=e.dataTestId,i=e.as,o=void 0===i?t.createElement("button",null):i,d=a(e,["className","children","dataTestId","as"]),g=t.useContext(c),P=function(){g.currentPage+1>1&&g.setCurrentPage(g.currentPage-1)},m=0===g.currentPage;return t.createElement(o.type,Object.assign({},d,o.props,{className:n(s,o.props.className),onClick:function(){return P()},tabIndex:m?"-1":0,disabled:m,"data-testid":l,onKeyPress:function(e){e.preventDefault(),"Enter"!==e.key||m||P()}}),null!=(r=o.props.children)?r:u)},s=function(e){var r,s=e.className,u=e.children,l=e.dataTestId,i=e.as,o=void 0===i?t.createElement("button",null):i,d=a(e,["className","children","dataTestId","as"]),g=t.useContext(c),P=function(){g.currentPage+1<g.pages.length&&g.setCurrentPage(g.currentPage+1)},m=g.currentPage===g.pages.length-1;return t.createElement(o.type,Object.assign({},d,o.props,{className:n(s,o.props.className),onClick:function(){return P()},tabIndex:m?"-1":0,disabled:m,"data-testid":l,onKeyPress:function(e){e.preventDefault(),"Enter"!==e.key||m||P()}}),null!=(r=o.props.children)?r:u)},u=function(e){var n=e.prev,a=t.useContext(c);return a.isPreviousTruncable&&!0===n||a.isNextTruncable&&!n?t.createElement("li",{className:a.truncableClassName||void 0},a.truncableText):null},l=function(e){var a=e.as,r=void 0===a?t.createElement("a",null):a,s=e.className,l=e.dataTestIdActive,i=e.dataTestIdInactive,o=e.activeClassName,d=e.inactiveClassName,g=t.useContext(c),P=function(e){var a;return t.createElement("li",{key:e},t.createElement(r.type,Object.assign({"data-testid":n((a={},a[""+l]=l&&g.currentPage+1===e,a[i+"-"+e]=l&&g.currentPage+1!==e,a))||void 0,tabIndex:0,onKeyPress:function(t){"Enter"===t.key&&g.setCurrentPage(e-1)},onClick:function(){return g.setCurrentPage(e-1)},className:n(s,g.currentPage+1===e?o:d)},r.props),e))};return t.createElement(t.Fragment,null,g.previousPages.map(P),t.createElement(u,{prev:!0}),g.middlePages.map(P),t.createElement(u,null),g.nextPages.map(P))},c=t.createContext({currentPage:0,setCurrentPage:function(){},truncableText:"...",truncableClassName:"",pages:[],hasPreviousPage:!1,hasNextPage:!1,previousPages:[],isPreviousTruncable:!1,middlePages:[],isNextTruncable:!1,nextPages:[]}),i=function(e){var n,r,s,u,l,i,o,d,g,P,m,p,v,f,x,b,N,C,h,T,E,y=e.dataTestId,I=a(e,["dataTestId"]),k=(r=(n=I).currentPage,s=n.setCurrentPage,l=void 0===(u=n.truncableText)?"...":u,o=void 0===(i=n.truncableClassName)?"":i,d=n.totalPages,g=n.edgePageCount,P=n.middlePagesSiblingCount,m=Array(d).fill(0).map((function(e,t){return t+1})),p=r>1,v=r<d,f=r<=P,x=r+P>=d,b=t.useMemo((function(){var e=2*P+1;return f?m.slice(0,e):x?m.slice(-e):m.slice(r-P,r+P+1)}),[r,m]),N=t.useMemo((function(){return f||m.slice(0,b[0]-1).length<1?[]:m.slice(0,g).filter((function(e){return!b.includes(e)}))}),[r,m]),C=t.useMemo((function(){return m.slice(b[b.length-1],m[m.length])}),[m,b]),h=t.useMemo((function(){return x||C.length<1?[]:m.slice(m.length-g,m.length).filter((function(e){return!b.includes(e)}))}),[b,m]),T=t.useMemo((function(){return b[0]>N[N.length-1]+1}),[N,b]),E=t.useMemo((function(){return b[b.length-1]+1<h[0]}),[h,b]),{currentPage:r,setCurrentPage:s,truncableText:l,truncableClassName:o,pages:m,hasPreviousPage:p,hasNextPage:v,previousPages:N,isPreviousTruncable:T,middlePages:b,isNextTruncable:E,nextPages:h});return t.createElement(c.Provider,{value:k},t.createElement("div",{className:I.className,"data-testid":y},I.children))};i.PrevButton=r,i.NextButton=s,i.PageButton=l,exports.NextButton=s,exports.PageButton=l,exports.Pagination=i,exports.PrevButton=r;
 //# sourceMappingURL=react-headless-pagination.cjs.production.min.js.map

dist/react-headless-pagination.esm.js

 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
@@ -123,3 +123,3 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return React.createElement(as.type, Object.assign({}, buttonProps, as.props, {
-    className: classNames(className, as.props.className),
+    className: clsx(className, as.props.className),
     onClick: function onClick() {
@@ -160,3 +160,3 @@ return previous();
   return React.createElement(as.type, Object.assign({}, buttonProps, as.props, {
-    className: classNames(className, as.props.className),
+    className: clsx(className, as.props.className),
     onClick: function onClick() {
@@ -201,3 +201,3 @@ return next();
   var renderPageButton = function renderPageButton(page) {
-    var _classNames;
+    var _clsx;
 
@@ -207,3 +207,3 @@ return React.createElement("li", {
     }, React.createElement(as.type, Object.assign({
-      "data-testid": classNames((_classNames = {}, _classNames["" + dataTestIdActive] = dataTestIdActive && pagination.currentPage + 1 === page, _classNames[dataTestIdInactive + "-" + page] = dataTestIdActive && pagination.currentPage + 1 !== page, _classNames)) || undefined,
+      "data-testid": clsx((_clsx = {}, _clsx["" + dataTestIdActive] = dataTestIdActive && pagination.currentPage + 1 === page, _clsx[dataTestIdInactive + "-" + page] = dataTestIdActive && pagination.currentPage + 1 !== page, _clsx)) || undefined,
       tabIndex: 0,
@@ -218,3 +218,3 @@ onKeyPress: function onKeyPress(event) {
       },
-      className: classNames(className, pagination.currentPage + 1 === page ? activeClassName : inactiveClassName)
+      className: clsx(className, pagination.currentPage + 1 === page ? activeClassName : inactiveClassName)
     }, as.props), page));
@@ -221,0 +221,0 @@ };

package.json

 {
   "name": "react-headless-pagination",
   "author": "Thijs Smudde",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "license": "MIT",
@@ -13,3 +13,3 @@ "main": "dist/index.js",
   "engines": {
-    "node": ">=12.13"
+    "node": ">=18.13"
   },
@@ -26,8 +26,9 @@ "scripts": {
     "analyze": "size-limit --why",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "build:css": "tailwindcss build -o storybook-static/tailwind.css --minify"
+    "build:css": "npx tailwindcss -i ./stories/tailwind.css -o storybook-static/tailwind.css --minify",
+    "watch:css": "npx tailwindcss -i ./stories/tailwind.css -o ./stories/tailwind_output.css --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
-    "classnames": "2.3.1"
+    "clsx": "^2.1.0"
   },
@@ -52,10 +53,10 @@ "peerDependencies": {
     "@size-limit/preset-small-lib": "4.9.2",
-    "@storybook/addon-a11y": "6.3.12",
-    "@storybook/addon-essentials": "6.3.12",
-    "@storybook/addon-info": "5.3.21",
-    "@storybook/addon-links": "6.3.12",
-    "@storybook/addons": "6.3.12",
-    "@storybook/react": "6.3.12",
-    "@tailwindcss/forms": "0.3.4",
-    "@tailwindcss/postcss7-compat": "2.0.3",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/test": "^7.6.7",
     "@testing-library/jest-dom": "5.11.9",
@@ -78,5 +79,4 @@ "@testing-library/react": "11.2.5",
     "size-limit": "4.9.2",
-    "storybook-addon-designs": "6.2.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "tailwindcss-breakpoints-inspector": "1.1.0",
+    "storybook": "^7.6.7",
+    "tailwindcss": "^3.4.1",
     "tsdx": "0.14.1",
@@ -83,0 +83,0 @@ "tslib": "2.1.0",

README.md

@@ -184,1 +184,21 @@ # React Headless Pagination
 Taken inspiration from [@makotot/paginated](https://github.com/makotot/GhostUI).
+
+## Contributing
+
+PR's are always welcomed.
+
+- Clone
+
+To contribute to this project, start by cloning the repository to your local machine.
+
+- Installation with Yarn
+
+Before getting started, ensure that you have Yarn installed on your system. If not, you can install it by following the instructions on the official Yarn website.
+
+- Run storybook: yarn storybook
+
+To visualize and test components, run Storybook using the following command:
+
+- Build tailwind: yarn watch:css
+
+For styling, the project uses Tailwind CSS. To build Tailwind, run the following command: This command will watch for changes in your CSS files and rebuild Tailwind accordingly. Make sure to run this during development to keep styles up-to-date.

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

77680

increased by0.63%

Dev dependency count

33

decreased by-2.94%

Number of lines in readme file

204

increased by10.87%

Dependency changes

• + Addedclsx@^2.1.0

• + Addedclsx@2.1.1(transitive)

• - Removedclassnames@2.3.1

• - Removedclassnames@2.3.1(transitive)