From 12ae73f8b33aa02b38b1f2c64c6f1208029055af Mon Sep 17 00:00:00 2001
From: Leonne Brito <britoleonne@gmail.com>
Date: Tue, 20 Jun 2023 22:07:39 -0300
Subject: [PATCH] feat: added the possibility to disable perPage select

---
 example/package-lock.json | 4 ++--
 example/pages/index.js    | 3 +++
 src/components/Select.tsx | 7 +++++--
 src/index.tsx             | 6 ++++++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/example/package-lock.json b/example/package-lock.json
index 76173a7..5000921 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -43,7 +43,7 @@
         "gh-pages": "^2.2.0",
         "microbundle-crl": "^0.13.8",
         "next": "^13.2.3",
-        "node-sass": "7.0.0",
+        "node-sass": "7.0.3",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.0.4",
         "react": "^18.2.0",
@@ -2896,7 +2896,7 @@
         "lodash": "4.17.21",
         "microbundle-crl": "^0.13.8",
         "next": "^13.2.3",
-        "node-sass": "7.0.0",
+        "node-sass": "7.0.3",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.0.4",
         "query-string": "6.12.1",
diff --git a/example/pages/index.js b/example/pages/index.js
index 73b1fae..092e3f5 100644
--- a/example/pages/index.js
+++ b/example/pages/index.js
@@ -56,6 +56,9 @@ export default function Home() {
         setPageSizeText='Establecer tamaño de página'
       />
 
+      <h2>Disable per page</h2>
+      <Pagination total={1000} disablePerPage={true} perPageText='por página' />
+
       <h2>Other examples</h2>
       <p>
         <Link href='[dynamic]' as='dynamic-test'>
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 35d6cb6..8995720 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -3,14 +3,17 @@ import PropTypes from 'prop-types'
 import Icon from './Icon'
 
 interface SelectProps {
+  disabled?: boolean
   children: React.ReactNode
   theme: { [key: string]: any }
   [key: string]: any
 }
 
-const Select = ({ children, theme, ...props }: SelectProps) => (
+const Select = ({ children, theme, disabled, ...props }: SelectProps) => (
   <div className={theme['next-pagination__select']}>
-    <select {...props}>{children}</select>
+    <select {...props} disabled={disabled}>
+      {children}
+    </select>
     <span className={theme['next-pagination__select-suffix']}>
       <Icon icon='expand-more' />
     </span>
diff --git a/src/index.tsx b/src/index.tsx
index b56fd39..46e76af 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -34,6 +34,10 @@ interface PaginationProps {
    * Label for the page size dropdown
    */
   perPageText?: string
+  /**
+   * The current page number of the pagination component
+   * */
+  disablePerPage?: boolean
   /**
    * Label for the invisible page size button
    */
@@ -49,6 +53,7 @@ const Pagination = ({
   theme,
   sizes,
   perPageText,
+  disablePerPage,
   setPageSizeText,
   linkProps
 }: PaginationProps) => {
@@ -176,6 +181,7 @@ const Pagination = ({
           name='size'
           id='next-pagination__size'
           defaultValue={pageSize}
+          disabled={disablePerPage}
           onChange={(event: Event) => {
             const url = `${router.pathname}?${queryString.stringify({
               ...query,