@instructure/ui-pagination 11.0.1-snapshot-1 → 11.0.1-snapshot-2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.0.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-1) (2025-10-08)
+## [11.0.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-2) (2025-10-10)
 
 **Note:** Version bump only for package @instructure/ui-pagination
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pagination",
-  "version": "11.0.1-snapshot-1",
+  "version": "11.0.1-snapshot-2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "11.0.1-snapshot-1",
-    "@instructure/ui-babel-preset": "11.0.1-snapshot-1",
+    "@instructure/ui-axe-check": "11.0.1-snapshot-2",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
@@ -32,21 +32,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.0.1-snapshot-1",
-    "@instructure/shared-types": "11.0.1-snapshot-1",
-    "@instructure/ui-a11y-content": "11.0.1-snapshot-1",
-    "@instructure/ui-a11y-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-buttons": "11.0.1-snapshot-1",
-    "@instructure/ui-dom-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-icons": "11.0.1-snapshot-1",
-    "@instructure/ui-number-input": "11.0.1-snapshot-1",
-    "@instructure/ui-portal": "11.0.1-snapshot-1",
-    "@instructure/ui-react-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-themes": "11.0.1-snapshot-1",
-    "@instructure/ui-tooltip": "11.0.1-snapshot-1",
-    "@instructure/ui-utils": "11.0.1-snapshot-1",
-    "@instructure/ui-view": "11.0.1-snapshot-1",
-    "@instructure/uid": "11.0.1-snapshot-1"
+    "@instructure/emotion": "11.0.1-snapshot-2",
+    "@instructure/shared-types": "11.0.1-snapshot-2",
+    "@instructure/ui-a11y-content": "11.0.1-snapshot-2",
+    "@instructure/ui-a11y-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-buttons": "11.0.1-snapshot-2",
+    "@instructure/ui-dom-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-icons": "11.0.1-snapshot-2",
+    "@instructure/ui-number-input": "11.0.1-snapshot-2",
+    "@instructure/ui-portal": "11.0.1-snapshot-2",
+    "@instructure/ui-react-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-themes": "11.0.1-snapshot-2",
+    "@instructure/ui-tooltip": "11.0.1-snapshot-2",
+    "@instructure/ui-utils": "11.0.1-snapshot-2",
+    "@instructure/ui-view": "11.0.1-snapshot-2",
+    "@instructure/uid": "11.0.1-snapshot-2"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Pagination/README.md

@@ -16,273 +16,146 @@ One of the biggest improvement is that pagination now can handle large page numb
 
 The pagination component provides props to handle most of the pagination use-cases. These following examples are the same as the "old" examples in behaviour, but with the "new" API
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = { currentPage: 1 }
-    }
-
-    render() {
-      return (
-        <Pagination
-          as="nav"
-          margin="small"
-          variant="compact"
-          labelNext="Next Page"
-          labelPrev="Previous Page"
-          currentPage={this.state.currentPage}
-          totalPageNumber={9}
-          onPageChange={(nextPage) => this.setState({ currentPage: nextPage })}
-        />
-      )
-    }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [currentPage, setCurrentPage] = useState(1)
-
-    return (
-      <Pagination
-        as="nav"
-        margin="small"
-        variant="compact"
-        labelNext="Next Page"
-        labelPrev="Previous Page"
-        currentPage={currentPage}
-        totalPageNumber={9}
-        onPageChange={(nextPage) => setCurrentPage(nextPage)}
-      />
-    )
-  }
+```js
+---
+type: example
+---
+const Example = () => {
+  const [currentPage, setCurrentPage] = useState(1)
+
+  return (
+    <Pagination
+      as="nav"
+      margin="small"
+      variant="compact"
+      labelNext="Next Page"
+      labelPrev="Previous Page"
+      currentPage={currentPage}
+      totalPageNumber={9}
+      onPageChange={(nextPage) => setCurrentPage(nextPage)}
+    />
+  )
+}
 
-  render(<Example />)
-  ```
+render(<Example />)
+```
 
 You can set any `totalPageNumber`, the component can handle it easily.\
 Furthermore, you can set `siblingCount`, which indicates how many pages are visible on either side of the `currentPage` and the
 `boundaryCount`, which indicates how many pages are visible in the beginning and end.\
 Also, you can set `screenReaderLabelPageButton` to customize what a screenreader will announce when the button receives focus.
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = { currentPage: 1 }
-    }
-
-    render() {
-      return (
-        <Pagination
-          as="nav"
-          margin="small"
-          variant="compact"
-          labelNext="Next Page"
-          labelPrev="Previous Page"
-          currentPage={this.state.currentPage}
-          totalPageNumber={100000}
-          onPageChange={(nextPage) => this.setState({ currentPage: nextPage })}
-          siblingCount={3}
-          boundaryCount={2}
-          screenReaderLabelPageButton={(currentPage, totalPageNumber) =>
-            `Page ${currentPage} of ${totalPageNumber}`
-          }
-        />
-      )
-    }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [currentPage, setCurrentPage] = useState(1)
-    return (
-      <Pagination
-        as="nav"
-        margin="small"
-        variant="compact"
-        labelNext="Next Page"
-        labelPrev="Previous Page"
-        currentPage={currentPage}
-        totalPageNumber={100000}
-        onPageChange={(nextPage) => setCurrentPage(nextPage)}
-        siblingCount={3}
-        boundaryCount={2}
-        screenReaderLabelPageButton={(currentPage, totalPageNumber) =>
-          `Page ${currentPage} of ${totalPageNumber}`
-        }
-      />
-    )
-  }
+```js
+---
+type: example
+---
+const Example = () => {
+  const [currentPage, setCurrentPage] = useState(1)
+  return (
+    <Pagination
+      as="nav"
+      margin="small"
+      variant="compact"
+      labelNext="Next Page"
+      labelPrev="Previous Page"
+      currentPage={currentPage}
+      totalPageNumber={100000}
+      onPageChange={(nextPage) => setCurrentPage(nextPage)}
+      siblingCount={3}
+      boundaryCount={2}
+      screenReaderLabelPageButton={(currentPage, totalPageNumber) =>
+        `Page ${currentPage} of ${totalPageNumber}`
+      }
+    />
+  )
+}
 
-  render(<Example />)
-  ```
+render(<Example />)
+```
 
 You can only display 1000 pages at once.
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = { currentPage: 1 }
-    }
-
-    render() {
-      return (
-        <Pagination
-          as="nav"
-          margin="small"
-          variant="full"
-          labelNext="Next Page"
-          labelPrev="Previous Page"
-          currentPage={this.state.currentPage}
-          totalPageNumber={100000}
-          onPageChange={(nextPage) => this.setState({ currentPage: nextPage })}
-          siblingCount={3}
-          boundaryCount={2}
-        />
-      )
-    }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [currentPage, setCurrentPage] = useState(1)
-    return (
-      <Pagination
-        as="nav"
-        margin="small"
-        variant="full"
-        labelNext="Next Page"
-        labelPrev="Previous Page"
-        currentPage={currentPage}
-        totalPageNumber={100000}
-        onPageChange={(nextPage) => setCurrentPage(nextPage)}
-        siblingCount={3}
-        boundaryCount={2}
-      />
-    )
-  }
+```js
+---
+type: example
+---
+const Example = () => {
+  const [currentPage, setCurrentPage] = useState(1)
+  return (
+    <Pagination
+      as="nav"
+      margin="small"
+      variant="full"
+      labelNext="Next Page"
+      labelPrev="Previous Page"
+      currentPage={currentPage}
+      totalPageNumber={100000}
+      onPageChange={(nextPage) => setCurrentPage(nextPage)}
+      siblingCount={3}
+      boundaryCount={2}
+    />
+  )
+}
 
-  render(<Example />)
-  ```
+render(<Example />)
+```
 
 You can override the default page rendering with `renderPageIndicator`.
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = { currentPage: 1 }
-    }
-
-    pageMap = ['A-G', 'H-J', 'K-M', 'N-Q', 'R-Z']
-
-    render() {
-      return (
-        <Pagination
-          as="nav"
-          margin="small"
-          variant="full"
-          labelNext="Next Page"
-          labelPrev="Previous Page"
-          currentPage={this.state.currentPage}
-          totalPageNumber={5}
-          onPageChange={(nextPage) => this.setState({ currentPage: nextPage })}
-          siblingCount={5}
-          boundaryCount={0}
-          renderPageIndicator={(page) => this.pageMap[page - 1]}
-        />
-      )
-    }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [currentPage, setCurrentPage] = useState(1)
-
-    const pageMap = ['A-G', 'H-J', 'K-M', 'N-Q', 'R-Z']
-
-    return (
-      <Pagination
-        as="nav"
-        margin="small"
-        variant="full"
-        labelNext="Next Page"
-        labelPrev="Previous Page"
-        currentPage={currentPage}
-        totalPageNumber={5}
-        onPageChange={(nextPage) => setCurrentPage(nextPage)}
-        siblingCount={5}
-        boundaryCount={0}
-        renderPageIndicator={(page) => pageMap[page - 1]}
-      />
-    )
-  }
+```js
+---
+type: example
+---
+const Example = () => {
+  const [currentPage, setCurrentPage] = useState(1)
+
+  const pageMap = ['A-G', 'H-J', 'K-M', 'N-Q', 'R-Z']
+
+  return (
+    <Pagination
+      as="nav"
+      margin="small"
+      variant="full"
+      labelNext="Next Page"
+      labelPrev="Previous Page"
+      currentPage={currentPage}
+      totalPageNumber={5}
+      onPageChange={(nextPage) => setCurrentPage(nextPage)}
+      siblingCount={5}
+      boundaryCount={0}
+      renderPageIndicator={(page) => pageMap[page - 1]}
+    />
+  )
+}
 
-  render(<Example />)
-  ```
+render(<Example />)
+```
 
 The `variant="input"` prop will render Pagination with a NumberInput and all the arrow buttons.
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = { currentPage: 1 }
-    }
-
-    render() {
-      return (
-        <Pagination
-          as="nav"
-          margin="small"
-          variant="input"
-          labelNext="Next Page"
-          labelPrev="Previous Page"
-          currentPage={this.state.currentPage}
-          totalPageNumber={9}
-          onPageChange={(nextPage) => this.setState({ currentPage: nextPage })}
-        />
-      )
-    }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [currentPage, setCurrentPage] = useState(1)
-
-    return (
-      <Pagination
-        as="nav"
-        margin="small"
-        variant="input"
-        labelNext="Next Page"
-        labelPrev="Previous Page"
-        currentPage={currentPage}
-        totalPageNumber={9}
-        onPageChange={(nextPage) => setCurrentPage(nextPage)}
-      />
-    )
-  }
+```js
+---
+type: example
+---
+const Example = () => {
+  const [currentPage, setCurrentPage] = useState(1)
+
+  return (
+    <Pagination
+      as="nav"
+      margin="small"
+      variant="input"
+      labelNext="Next Page"
+      labelPrev="Previous Page"
+      currentPage={currentPage}
+      totalPageNumber={9}
+      onPageChange={(nextPage) => setCurrentPage(nextPage)}
+    />
+  )
+}
 
-  render(<Example />)
-  ```
+render(<Example />)
+```
 
 ### Legacy examples