@patternfly/react-data-view 6.0.0-prerelease.1 → 7.0.0-prerelease.1

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 (19) hide show
  1. package/dist/cjs/DataView/DataView.test.js +4 -3
  2. package/dist/cjs/Hooks/pagination.d.ts +9 -1
  3. package/dist/cjs/Hooks/pagination.js +36 -4
  4. package/dist/cjs/Hooks/pagination.test.js +53 -1
  5. package/dist/esm/DataView/DataView.test.js +4 -3
  6. package/dist/esm/Hooks/pagination.d.ts +9 -1
  7. package/dist/esm/Hooks/pagination.js +36 -4
  8. package/dist/esm/Hooks/pagination.test.js +53 -1
  9. package/package.json +8 -9
  10. package/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md +9 -2
  11. package/patternfly-docs/content/extensions/data-view/examples/Functionality/PaginationExample.tsx +12 -4
  12. package/patternfly-docs/content/extensions/data-view/examples/Layout/AbstractLayoutExample.tsx +4 -3
  13. package/patternfly-docs/pages/index.js +1 -1
  14. package/release.config.js +5 -1
  15. package/src/DataView/DataView.test.tsx +4 -3
  16. package/src/DataView/__snapshots__/DataView.test.tsx.snap +14 -14
  17. package/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap +150 -146
  18. package/src/Hooks/pagination.test.tsx +81 -1
  19. package/src/Hooks/pagination.ts +65 -15
package/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap CHANGED
@@ -6,32 +6,32 @@ exports[`DataViewToolbar component should render correctly 1`] = `
6
6
  "baseElement": <body>
7
7
  <div>
8
8
  <div
9
- class="pf-v6-c-toolbar"
9
+ class="pf-v5-c-toolbar"
10
10
  data-ouia-component-id="DataViewToolbar"
11
- data-ouia-component-type="PF6/Toolbar"
11
+ data-ouia-component-type="PF5/Toolbar"
12
12
  data-ouia-safe="true"
13
13
  id="pf-random-id-0"
14
14
  >
15
15
  <div
16
- class="pf-v6-c-toolbar__content"
16
+ class="pf-v5-c-toolbar__content"
17
17
  >
18
18
  <div
19
- class="pf-v6-c-toolbar__content-section"
19
+ class="pf-v5-c-toolbar__content-section"
20
20
  >
21
21
  <div
22
- class="pf-v6-c-toolbar__item pf-m-pagination"
22
+ class="pf-v5-c-toolbar__item pf-m-pagination"
23
23
  data-ouia-component-id="DataViewToolbar-pagination"
24
24
  >
25
25
  <div
26
- class="pf-v6-c-pagination"
26
+ class="pf-v5-c-pagination"
27
27
  data-ouia-component-id="OUIA-Generated-Pagination-top-1"
28
- data-ouia-component-type="PF6/Pagination"
28
+ data-ouia-component-type="PF5/Pagination"
29
29
  data-ouia-safe="true"
30
30
  id="options-menu-top-pagination"
31
- style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
31
+ style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
32
32
  >
33
33
  <div
34
- class="pf-v6-c-pagination__total-items"
34
+ class="pf-v5-c-pagination__total-items"
35
35
  >
36
36
  <b>
37
37
  1
@@ -46,72 +46,74 @@ exports[`DataViewToolbar component should render correctly 1`] = `
46
46
  </b>
47
47
 
48
48
  </div>
49
- <button
50
- aria-expanded="false"
51
- aria-haspopup="listbox"
52
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
53
- id="options-menu-top-toggle"
54
- type="button"
55
- >
56
- <span
57
- class="pf-v6-c-menu-toggle__text"
58
- >
59
- <b>
60
- 1
61
- -
62
- 10
63
- </b>
64
-
65
- of
66
-
67
- <b>
68
- 0
69
- </b>
70
-
71
- </span>
72
- <span
73
- class="pf-v6-c-menu-toggle__controls"
49
+ <div>
50
+ <button
51
+ aria-expanded="false"
52
+ aria-haspopup="listbox"
53
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
54
+ id="options-menu-top-toggle"
55
+ type="button"
74
56
  >
75
57
  <span
76
- class="pf-v6-c-menu-toggle__toggle-icon"
58
+ class="pf-v5-c-menu-toggle__text"
77
59
  >
78
- <svg
79
- aria-hidden="true"
80
- class="pf-v6-svg"
81
- fill="currentColor"
82
- height="1em"
83
- role="img"
84
- viewBox="0 0 320 512"
85
- width="1em"
60
+ <b>
61
+ 1
62
+ -
63
+ 10
64
+ </b>
65
+
66
+ of
67
+
68
+ <b>
69
+ 0
70
+ </b>
71
+
72
+ </span>
73
+ <span
74
+ class="pf-v5-c-menu-toggle__controls"
75
+ >
76
+ <span
77
+ class="pf-v5-c-menu-toggle__toggle-icon"
86
78
  >
87
- <path
88
- d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
89
- />
90
- </svg>
79
+ <svg
80
+ aria-hidden="true"
81
+ class="pf-v5-svg"
82
+ fill="currentColor"
83
+ height="1em"
84
+ role="img"
85
+ viewBox="0 0 320 512"
86
+ width="1em"
87
+ >
88
+ <path
89
+ d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
90
+ />
91
+ </svg>
92
+ </span>
91
93
  </span>
92
- </span>
93
- </button>
94
+ </button>
95
+ </div>
94
96
  <nav
95
97
  aria-label="Pagination"
96
- class="pf-v6-c-pagination__nav"
98
+ class="pf-v5-c-pagination__nav"
97
99
  >
98
100
  <div
99
- class="pf-v6-c-pagination__nav-control pf-m-first"
101
+ class="pf-v5-c-pagination__nav-control pf-m-first"
100
102
  >
101
103
  <button
102
- aria-disabled="false"
104
+ aria-disabled="true"
103
105
  aria-label="Go to first page"
104
- class="pf-v6-c-button pf-m-plain"
106
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
105
107
  data-action="first"
106
108
  data-ouia-component-id="OUIA-Generated-Button-plain-1"
107
- data-ouia-component-type="PF6/Button"
109
+ data-ouia-component-type="PF5/Button"
108
110
  data-ouia-safe="true"
109
111
  disabled=""
110
112
  type="button"
111
113
  >
112
114
  <svg
113
115
  aria-hidden="true"
114
- class="pf-v6-svg"
116
+ class="pf-v5-svg"
115
117
  fill="currentColor"
116
118
  height="1em"
117
119
  role="img"
@@ -125,22 +127,22 @@ exports[`DataViewToolbar component should render correctly 1`] = `
125
127
  </button>
126
128
  </div>
127
129
  <div
128
- class="pf-v6-c-pagination__nav-control"
130
+ class="pf-v5-c-pagination__nav-control"
129
131
  >
130
132
  <button
131
- aria-disabled="false"
133
+ aria-disabled="true"
132
134
  aria-label="Go to previous page"
133
- class="pf-v6-c-button pf-m-plain"
135
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
134
136
  data-action="previous"
135
137
  data-ouia-component-id="OUIA-Generated-Button-plain-2"
136
- data-ouia-component-type="PF6/Button"
138
+ data-ouia-component-type="PF5/Button"
137
139
  data-ouia-safe="true"
138
140
  disabled=""
139
141
  type="button"
140
142
  >
141
143
  <svg
142
144
  aria-hidden="true"
143
- class="pf-v6-svg"
145
+ class="pf-v5-svg"
144
146
  fill="currentColor"
145
147
  height="1em"
146
148
  role="img"
@@ -154,16 +156,16 @@ exports[`DataViewToolbar component should render correctly 1`] = `
154
156
  </button>
155
157
  </div>
156
158
  <div
157
- class="pf-v6-c-pagination__nav-page-select"
159
+ class="pf-v5-c-pagination__nav-page-select"
158
160
  >
159
161
  <span
160
- class="pf-v6-c-form-control"
162
+ class="pf-v5-c-form-control"
161
163
  >
162
164
  <input
163
165
  aria-invalid="false"
164
166
  aria-label="Current page"
165
167
  data-ouia-component-id="OUIA-Generated-TextInputBase-1"
166
- data-ouia-component-type="PF6/TextInput"
168
+ data-ouia-component-type="PF5/TextInput"
167
169
  data-ouia-safe="true"
168
170
  max="2"
169
171
  min="1"
@@ -173,21 +175,21 @@ exports[`DataViewToolbar component should render correctly 1`] = `
173
175
  </span>
174
176
  </div>
175
177
  <div
176
- class="pf-v6-c-pagination__nav-control"
178
+ class="pf-v5-c-pagination__nav-control"
177
179
  >
178
180
  <button
179
181
  aria-disabled="false"
180
182
  aria-label="Go to next page"
181
- class="pf-v6-c-button pf-m-plain"
183
+ class="pf-v5-c-button pf-m-plain"
182
184
  data-action="next"
183
185
  data-ouia-component-id="OUIA-Generated-Button-plain-3"
184
- data-ouia-component-type="PF6/Button"
186
+ data-ouia-component-type="PF5/Button"
185
187
  data-ouia-safe="true"
186
188
  type="button"
187
189
  >
188
190
  <svg
189
191
  aria-hidden="true"
190
- class="pf-v6-svg"
192
+ class="pf-v5-svg"
191
193
  fill="currentColor"
192
194
  height="1em"
193
195
  role="img"
@@ -201,21 +203,21 @@ exports[`DataViewToolbar component should render correctly 1`] = `
201
203
  </button>
202
204
  </div>
203
205
  <div
204
- class="pf-v6-c-pagination__nav-control pf-m-last"
206
+ class="pf-v5-c-pagination__nav-control pf-m-last"
205
207
  >
206
208
  <button
207
209
  aria-disabled="false"
208
210
  aria-label="Go to last page"
209
- class="pf-v6-c-button pf-m-plain"
211
+ class="pf-v5-c-button pf-m-plain"
210
212
  data-action="last"
211
213
  data-ouia-component-id="OUIA-Generated-Button-plain-4"
212
- data-ouia-component-type="PF6/Button"
214
+ data-ouia-component-type="PF5/Button"
213
215
  data-ouia-safe="true"
214
216
  type="button"
215
217
  >
216
218
  <svg
217
219
  aria-hidden="true"
218
- class="pf-v6-svg"
220
+ class="pf-v5-svg"
219
221
  fill="currentColor"
220
222
  height="1em"
221
223
  role="img"
@@ -234,11 +236,11 @@ exports[`DataViewToolbar component should render correctly 1`] = `
234
236
  </div>
235
237
  </div>
236
238
  <div
237
- class="pf-v6-c-toolbar__content pf-m-hidden"
239
+ class="pf-v5-c-toolbar__content pf-m-hidden"
238
240
  hidden=""
239
241
  >
240
242
  <div
241
- class="pf-v6-c-toolbar__group"
243
+ class="pf-v5-c-toolbar__group"
242
244
  />
243
245
  </div>
244
246
  </div>
@@ -246,32 +248,32 @@ exports[`DataViewToolbar component should render correctly 1`] = `
246
248
  </body>,
247
249
  "container": <div>
248
250
  <div
249
- class="pf-v6-c-toolbar"
251
+ class="pf-v5-c-toolbar"
250
252
  data-ouia-component-id="DataViewToolbar"
251
- data-ouia-component-type="PF6/Toolbar"
253
+ data-ouia-component-type="PF5/Toolbar"
252
254
  data-ouia-safe="true"
253
255
  id="pf-random-id-0"
254
256
  >
255
257
  <div
256
- class="pf-v6-c-toolbar__content"
258
+ class="pf-v5-c-toolbar__content"
257
259
  >
258
260
  <div
259
- class="pf-v6-c-toolbar__content-section"
261
+ class="pf-v5-c-toolbar__content-section"
260
262
  >
261
263
  <div
262
- class="pf-v6-c-toolbar__item pf-m-pagination"
264
+ class="pf-v5-c-toolbar__item pf-m-pagination"
263
265
  data-ouia-component-id="DataViewToolbar-pagination"
264
266
  >
265
267
  <div
266
- class="pf-v6-c-pagination"
268
+ class="pf-v5-c-pagination"
267
269
  data-ouia-component-id="OUIA-Generated-Pagination-top-1"
268
- data-ouia-component-type="PF6/Pagination"
270
+ data-ouia-component-type="PF5/Pagination"
269
271
  data-ouia-safe="true"
270
272
  id="options-menu-top-pagination"
271
- style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
273
+ style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
272
274
  >
273
275
  <div
274
- class="pf-v6-c-pagination__total-items"
276
+ class="pf-v5-c-pagination__total-items"
275
277
  >
276
278
  <b>
277
279
  1
@@ -286,72 +288,74 @@ exports[`DataViewToolbar component should render correctly 1`] = `
286
288
  </b>
287
289
 
288
290
  </div>
289
- <button
290
- aria-expanded="false"
291
- aria-haspopup="listbox"
292
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
293
- id="options-menu-top-toggle"
294
- type="button"
295
- >
296
- <span
297
- class="pf-v6-c-menu-toggle__text"
298
- >
299
- <b>
300
- 1
301
- -
302
- 10
303
- </b>
304
-
305
- of
306
-
307
- <b>
308
- 0
309
- </b>
310
-
311
- </span>
312
- <span
313
- class="pf-v6-c-menu-toggle__controls"
291
+ <div>
292
+ <button
293
+ aria-expanded="false"
294
+ aria-haspopup="listbox"
295
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
296
+ id="options-menu-top-toggle"
297
+ type="button"
314
298
  >
315
299
  <span
316
- class="pf-v6-c-menu-toggle__toggle-icon"
300
+ class="pf-v5-c-menu-toggle__text"
317
301
  >
318
- <svg
319
- aria-hidden="true"
320
- class="pf-v6-svg"
321
- fill="currentColor"
322
- height="1em"
323
- role="img"
324
- viewBox="0 0 320 512"
325
- width="1em"
302
+ <b>
303
+ 1
304
+ -
305
+ 10
306
+ </b>
307
+
308
+ of
309
+
310
+ <b>
311
+ 0
312
+ </b>
313
+
314
+ </span>
315
+ <span
316
+ class="pf-v5-c-menu-toggle__controls"
317
+ >
318
+ <span
319
+ class="pf-v5-c-menu-toggle__toggle-icon"
326
320
  >
327
- <path
328
- d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
329
- />
330
- </svg>
321
+ <svg
322
+ aria-hidden="true"
323
+ class="pf-v5-svg"
324
+ fill="currentColor"
325
+ height="1em"
326
+ role="img"
327
+ viewBox="0 0 320 512"
328
+ width="1em"
329
+ >
330
+ <path
331
+ d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
332
+ />
333
+ </svg>
334
+ </span>
331
335
  </span>
332
- </span>
333
- </button>
336
+ </button>
337
+ </div>
334
338
  <nav
335
339
  aria-label="Pagination"
336
- class="pf-v6-c-pagination__nav"
340
+ class="pf-v5-c-pagination__nav"
337
341
  >
338
342
  <div
339
- class="pf-v6-c-pagination__nav-control pf-m-first"
343
+ class="pf-v5-c-pagination__nav-control pf-m-first"
340
344
  >
341
345
  <button
342
- aria-disabled="false"
346
+ aria-disabled="true"
343
347
  aria-label="Go to first page"
344
- class="pf-v6-c-button pf-m-plain"
348
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
345
349
  data-action="first"
346
350
  data-ouia-component-id="OUIA-Generated-Button-plain-1"
347
- data-ouia-component-type="PF6/Button"
351
+ data-ouia-component-type="PF5/Button"
348
352
  data-ouia-safe="true"
349
353
  disabled=""
350
354
  type="button"
351
355
  >
352
356
  <svg
353
357
  aria-hidden="true"
354
- class="pf-v6-svg"
358
+ class="pf-v5-svg"
355
359
  fill="currentColor"
356
360
  height="1em"
357
361
  role="img"
@@ -365,22 +369,22 @@ exports[`DataViewToolbar component should render correctly 1`] = `
365
369
  </button>
366
370
  </div>
367
371
  <div
368
- class="pf-v6-c-pagination__nav-control"
372
+ class="pf-v5-c-pagination__nav-control"
369
373
  >
370
374
  <button
371
- aria-disabled="false"
375
+ aria-disabled="true"
372
376
  aria-label="Go to previous page"
373
- class="pf-v6-c-button pf-m-plain"
377
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
374
378
  data-action="previous"
375
379
  data-ouia-component-id="OUIA-Generated-Button-plain-2"
376
- data-ouia-component-type="PF6/Button"
380
+ data-ouia-component-type="PF5/Button"
377
381
  data-ouia-safe="true"
378
382
  disabled=""
379
383
  type="button"
380
384
  >
381
385
  <svg
382
386
  aria-hidden="true"
383
- class="pf-v6-svg"
387
+ class="pf-v5-svg"
384
388
  fill="currentColor"
385
389
  height="1em"
386
390
  role="img"
@@ -394,16 +398,16 @@ exports[`DataViewToolbar component should render correctly 1`] = `
394
398
  </button>
395
399
  </div>
396
400
  <div
397
- class="pf-v6-c-pagination__nav-page-select"
401
+ class="pf-v5-c-pagination__nav-page-select"
398
402
  >
399
403
  <span
400
- class="pf-v6-c-form-control"
404
+ class="pf-v5-c-form-control"
401
405
  >
402
406
  <input
403
407
  aria-invalid="false"
404
408
  aria-label="Current page"
405
409
  data-ouia-component-id="OUIA-Generated-TextInputBase-1"
406
- data-ouia-component-type="PF6/TextInput"
410
+ data-ouia-component-type="PF5/TextInput"
407
411
  data-ouia-safe="true"
408
412
  max="2"
409
413
  min="1"
@@ -413,21 +417,21 @@ exports[`DataViewToolbar component should render correctly 1`] = `
413
417
  </span>
414
418
  </div>
415
419
  <div
416
- class="pf-v6-c-pagination__nav-control"
420
+ class="pf-v5-c-pagination__nav-control"
417
421
  >
418
422
  <button
419
423
  aria-disabled="false"
420
424
  aria-label="Go to next page"
421
- class="pf-v6-c-button pf-m-plain"
425
+ class="pf-v5-c-button pf-m-plain"
422
426
  data-action="next"
423
427
  data-ouia-component-id="OUIA-Generated-Button-plain-3"
424
- data-ouia-component-type="PF6/Button"
428
+ data-ouia-component-type="PF5/Button"
425
429
  data-ouia-safe="true"
426
430
  type="button"
427
431
  >
428
432
  <svg
429
433
  aria-hidden="true"
430
- class="pf-v6-svg"
434
+ class="pf-v5-svg"
431
435
  fill="currentColor"
432
436
  height="1em"
433
437
  role="img"
@@ -441,21 +445,21 @@ exports[`DataViewToolbar component should render correctly 1`] = `
441
445
  </button>
442
446
  </div>
443
447
  <div
444
- class="pf-v6-c-pagination__nav-control pf-m-last"
448
+ class="pf-v5-c-pagination__nav-control pf-m-last"
445
449
  >
446
450
  <button
447
451
  aria-disabled="false"
448
452
  aria-label="Go to last page"
449
- class="pf-v6-c-button pf-m-plain"
453
+ class="pf-v5-c-button pf-m-plain"
450
454
  data-action="last"
451
455
  data-ouia-component-id="OUIA-Generated-Button-plain-4"
452
- data-ouia-component-type="PF6/Button"
456
+ data-ouia-component-type="PF5/Button"
453
457
  data-ouia-safe="true"
454
458
  type="button"
455
459
  >
456
460
  <svg
457
461
  aria-hidden="true"
458
- class="pf-v6-svg"
462
+ class="pf-v5-svg"
459
463
  fill="currentColor"
460
464
  height="1em"
461
465
  role="img"
@@ -474,11 +478,11 @@ exports[`DataViewToolbar component should render correctly 1`] = `
474
478
  </div>
475
479
  </div>
476
480
  <div
477
- class="pf-v6-c-toolbar__content pf-m-hidden"
481
+ class="pf-v5-c-toolbar__content pf-m-hidden"
478
482
  hidden=""
479
483
  >
480
484
  <div
481
- class="pf-v6-c-toolbar__group"
485
+ class="pf-v5-c-toolbar__group"
482
486
  />
483
487
  </div>
484
488
  </div>
package/src/Hooks/pagination.test.tsx CHANGED
@@ -49,9 +49,89 @@ describe('useDataViewPagination', () => {
49
49
  expect(result.current).toEqual({
50
50
  onPerPageSelect: expect.any(Function),
51
51
  onSetPage: expect.any(Function),
52
- page: 3,
52
+ page: 1,
53
53
  perPage: 50
54
54
  })
55
55
  });
56
56
 
57
+ it('should read pagination state from URL', () => {
58
+ const mockSearchParams = new URLSearchParams('page=2&perPage=10');
59
+ const { result } = renderHook(() =>
60
+ useDataViewPagination({
61
+ searchParams: mockSearchParams,
62
+ setSearchParams: jest.fn(),
63
+ page: 1,
64
+ perPage: 5,
65
+ })
66
+ );
67
+
68
+ expect(result.current).toEqual({
69
+ onPerPageSelect: expect.any(Function),
70
+ onSetPage: expect.any(Function),
71
+ page: 2,
72
+ perPage: 10,
73
+ });
74
+ });
75
+
76
+ it('should set pagination state in URL when page changes', () => {
77
+ const mockSetSearchParams = jest.fn();
78
+ const { result } = renderHook(() =>
79
+ useDataViewPagination({
80
+ searchParams: new URLSearchParams(),
81
+ setSearchParams: mockSetSearchParams,
82
+ page: 1,
83
+ perPage: 5,
84
+ })
85
+ );
86
+
87
+ expect(mockSetSearchParams).toHaveBeenNthCalledWith(
88
+ 1,
89
+ new URLSearchParams('page=1&perPage=5')
90
+ );
91
+
92
+ act(() => {
93
+ result.current.onSetPage(undefined, 4);
94
+ });
95
+
96
+ expect(mockSetSearchParams).toHaveBeenNthCalledWith(
97
+ 2,
98
+ new URLSearchParams('page=4&perPage=5')
99
+ );
100
+ });
101
+
102
+ it('should set pagination state in URL when perPage changes', () => {
103
+ const mockSetSearchParams = jest.fn();
104
+ const { result } = renderHook(() =>
105
+ useDataViewPagination({
106
+ searchParams: new URLSearchParams('page=2'),
107
+ setSearchParams: mockSetSearchParams,
108
+ page: 1,
109
+ perPage: 5,
110
+ })
111
+ );
112
+
113
+ act(() => {
114
+ result.current.onPerPageSelect(undefined, 20);
115
+ });
116
+
117
+ expect(mockSetSearchParams).toHaveBeenCalledWith(
118
+ new URLSearchParams('page=1&perPage=20')
119
+ );
120
+ });
121
+
122
+ it('should initialize URL with default values if not present', () => {
123
+ const mockSetSearchParams = jest.fn();
124
+ renderHook(() =>
125
+ useDataViewPagination({
126
+ searchParams: new URLSearchParams(),
127
+ setSearchParams: mockSetSearchParams,
128
+ page: 1,
129
+ perPage: 5,
130
+ })
131
+ );
132
+
133
+ expect(mockSetSearchParams).toHaveBeenCalledWith(
134
+ new URLSearchParams('page=1&perPage=5')
135
+ );
136
+ });
57
137
  });