@xsolla/xui-pagination 0.149.1 → 0.151.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +41 -119
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,127 +1,90 @@
1
1
  # Pagination
2
2
 
3
- A cross-platform React pagination component for navigating through paged content. Features adaptive page number display with ellipsis for large page counts.
3
+ A cross-platform React pagination component that adapts page-button display with ellipses for large page counts.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
8
  npm install @xsolla/xui-pagination
9
- # or
10
- yarn add @xsolla/xui-pagination
11
9
  ```
12
10
 
13
- ## Demo
14
-
15
- ### Basic Pagination
11
+ ## Imports
16
12
 
17
13
  ```tsx
18
- import * as React from 'react';
19
- import { Pagination } from '@xsolla/xui-pagination';
20
-
21
- export default function BasicPagination() {
22
- const [page, setPage] = React.useState(1);
23
-
24
- return (
25
- <Pagination
26
- currentPage={page}
27
- totalPages={10}
28
- onPageChange={setPage}
29
- />
30
- );
31
- }
14
+ import { Pagination, type PaginationProps, type PaginationSize } from '@xsolla/xui-pagination';
32
15
  ```
33
16
 
34
- ### Large Page Count
17
+ ## Quick start
35
18
 
36
19
  ```tsx
37
20
  import * as React from 'react';
38
21
  import { Pagination } from '@xsolla/xui-pagination';
39
22
 
40
- export default function LargePagination() {
23
+ export default function QuickStart() {
41
24
  const [page, setPage] = React.useState(1);
42
-
43
- return (
44
- <Pagination
45
- currentPage={page}
46
- totalPages={100}
47
- onPageChange={setPage}
48
- siblingCount={1}
49
- />
50
- );
25
+ return <Pagination currentPage={page} totalPages={10} onPageChange={setPage} />;
51
26
  }
52
27
  ```
53
28
 
54
- ### Stretched Layout
29
+ ## API Reference
55
30
 
56
- ```tsx
57
- import * as React from 'react';
58
- import { Pagination } from '@xsolla/xui-pagination';
31
+ ### `<Pagination>`
59
32
 
60
- export default function StretchedPagination() {
61
- const [page, setPage] = React.useState(5);
33
+ | Prop | Type | Default | Description |
34
+ | --- | --- | --- | --- |
35
+ | `currentPage` | `number` | `1` | Current active page (1-indexed). |
36
+ | `totalPages` | `number` | `1` | Total number of pages. |
37
+ | `onPageChange` | `(page: number) => void` | — | Callback fired when a page is clicked. |
38
+ | `siblingCount` | `number` | `1` | Sibling buttons rendered on each side of the current page. |
39
+ | `showNavigation` | `boolean` | `true` | Show previous/next chevron buttons. |
40
+ | `stretched` | `boolean` | `false` | Stretch the container to full width and centre items. |
41
+ | `disabled` | `boolean` | `false` | Disable all interactions. |
42
+ | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Item size and typography. |
43
+ | `backgroundColor` | `string` | — | Custom background colour for the container. |
44
+ | `testID` | `string` | — | Test identifier. |
62
45
 
63
- return (
64
- <div style={{ width: '100%' }}>
65
- <Pagination
66
- currentPage={page}
67
- totalPages={20}
68
- onPageChange={setPage}
69
- stretched={true}
70
- />
71
- </div>
72
- );
73
- }
74
- ```
46
+ *Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).*
75
47
 
76
- ## Anatomy
48
+ ### Page-number display
77
49
 
78
- ```jsx
79
- import { Pagination } from '@xsolla/xui-pagination';
50
+ With `siblingCount=1` and `totalPages=20`:
80
51
 
81
- <Pagination
82
- currentPage={1} // Current active page
83
- totalPages={10} // Total number of pages
84
- onPageChange={setPage} // Page change handler
85
- siblingCount={1} // Pages shown on each side
86
- showNavigation={true} // Show prev/next arrows
87
- stretched={false} // Center and stretch
88
- disabled={false} // Disabled state
89
- size="md" // Size variant
90
- />
91
- ```
52
+ - Page 1 → `1 2 3 4 5 … 20`
53
+ - Page 10 → `1 … 9 10 11 … 20`
54
+ - Page 20 → `1 … 16 17 18 19 20`
92
55
 
93
56
  ## Examples
94
57
 
95
- ### Pagination Sizes
58
+ ### Sizes
96
59
 
97
60
  ```tsx
98
61
  import * as React from 'react';
99
62
  import { Pagination } from '@xsolla/xui-pagination';
100
63
 
101
64
  export default function PaginationSizes() {
65
+ const [page, setPage] = React.useState(3);
102
66
  return (
103
67
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
104
- <Pagination size="sm" currentPage={3} totalPages={10} />
105
- <Pagination size="md" currentPage={3} totalPages={10} />
106
- <Pagination size="lg" currentPage={3} totalPages={10} />
68
+ <Pagination size="sm" currentPage={page} totalPages={10} onPageChange={setPage} />
69
+ <Pagination size="md" currentPage={page} totalPages={10} onPageChange={setPage} />
70
+ <Pagination size="lg" currentPage={page} totalPages={10} onPageChange={setPage} />
107
71
  </div>
108
72
  );
109
73
  }
110
74
  ```
111
75
 
112
- ### Without Navigation Arrows
76
+ ### Without navigation
113
77
 
114
78
  ```tsx
115
79
  import * as React from 'react';
116
80
  import { Pagination } from '@xsolla/xui-pagination';
117
81
 
118
- export default function NoArrowsPagination() {
82
+ export default function NoNavigation() {
119
83
  const [page, setPage] = React.useState(1);
120
-
121
84
  return (
122
85
  <Pagination
123
86
  currentPage={page}
124
- totalPages={10}
87
+ totalPages={8}
125
88
  onPageChange={setPage}
126
89
  showNavigation={false}
127
90
  />
@@ -129,15 +92,14 @@ export default function NoArrowsPagination() {
129
92
  }
130
93
  ```
131
94
 
132
- ### More Sibling Pages
95
+ ### More sibling pages
133
96
 
134
97
  ```tsx
135
98
  import * as React from 'react';
136
99
  import { Pagination } from '@xsolla/xui-pagination';
137
100
 
138
- export default function MoreSiblingsPagination() {
101
+ export default function MoreSiblings() {
139
102
  const [page, setPage] = React.useState(10);
140
-
141
103
  return (
142
104
  <Pagination
143
105
  currentPage={page}
@@ -149,59 +111,19 @@ export default function MoreSiblingsPagination() {
149
111
  }
150
112
  ```
151
113
 
152
- ### Disabled Pagination
114
+ ### Disabled
153
115
 
154
116
  ```tsx
155
117
  import * as React from 'react';
156
118
  import { Pagination } from '@xsolla/xui-pagination';
157
119
 
158
120
  export default function DisabledPagination() {
159
- return (
160
- <Pagination
161
- currentPage={5}
162
- totalPages={10}
163
- disabled={true}
164
- />
165
- );
121
+ return <Pagination currentPage={5} totalPages={10} disabled />;
166
122
  }
167
123
  ```
168
124
 
169
- ## API Reference
170
-
171
- ### Pagination
172
-
173
- **Pagination Props:**
174
-
175
- | Prop | Type | Default | Description |
176
- | :--- | :--- | :------ | :---------- |
177
- | currentPage | `number` | `1` | Current active page (1-indexed). |
178
- | totalPages | `number` | `1` | Total number of pages. |
179
- | onPageChange | `(page: number) => void` | - | Page change handler. |
180
- | siblingCount | `number` | `1` | Number of pages shown on each side of current. |
181
- | showNavigation | `boolean` | `true` | Show previous/next arrow buttons. |
182
- | stretched | `boolean` | `false` | Center content and stretch to full width. |
183
- | disabled | `boolean` | `false` | Disabled state. |
184
- | size | `"sm" \| "md" \| "lg"` | `"md"` | Size variant. |
185
- | backgroundColor | `string` | - | Background color. |
186
- | testID | `string` | - | Test identifier. |
187
-
188
- ## Behavior
189
-
190
- - Ellipsis appears when page count exceeds visible slots
191
- - First and last pages always shown when ellipsis present
192
- - Navigation arrows disabled at first/last page
193
- - Active page is visually highlighted
194
-
195
- ## Page Number Display Logic
196
-
197
- Given `siblingCount=1` and `totalPages=20`:
198
- - Page 1: `1 2 3 4 5 ... 20`
199
- - Page 10: `1 ... 9 10 11 ... 20`
200
- - Page 20: `1 ... 16 17 18 19 20`
201
-
202
125
  ## Accessibility
203
126
 
204
- - Page buttons have `aria-label` describing page number
205
- - Current page has `aria-current="page"`
206
- - Navigation buttons have descriptive `aria-label`
207
- - All buttons have `role="button"`
127
+ - Page buttons have `aria-label="Go to page N"` and the active page sets `aria-current="page"`.
128
+ - Previous/next buttons use `aria-label="Previous page"` and `aria-label="Next page"`.
129
+ - All clickable items have `role="button"`; disabled or boundary states show a `not-allowed` cursor and reduced opacity.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-pagination",
3
- "version": "0.149.1",
3
+ "version": "0.151.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.149.1",
14
- "@xsolla/xui-primitives-core": "0.149.1"
13
+ "@xsolla/xui-core": "0.151.0",
14
+ "@xsolla/xui-primitives-core": "0.151.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0"