@patternfly/react-data-view 6.4.0 → 6.5.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 (79) hide show
  1. package/dist/cjs/DataViewTable/DataViewTable.d.ts +2 -1
  2. package/dist/cjs/DataViewTableBasic/DataViewTableBasic.d.ts +11 -0
  3. package/dist/cjs/DataViewTableBasic/DataViewTableBasic.js +46 -6
  4. package/dist/cjs/DataViewTableBasic/DataViewTableBasic.test.js +47 -9
  5. package/dist/cjs/DataViewTextFilter/DataViewTextFilter.d.ts +2 -0
  6. package/dist/cjs/DataViewTextFilter/DataViewTextFilter.js +29 -1
  7. package/dist/cjs/DataViewTextFilter/DataViewTextFilter.test.d.ts +1 -1
  8. package/dist/cjs/DataViewTextFilter/DataViewTextFilter.test.js +83 -0
  9. package/dist/cjs/DataViewTh/DataViewTh.d.ts +4 -4
  10. package/dist/cjs/DataViewTh/DataViewTh.js +8 -1
  11. package/dist/cjs/DataViewTh/index.d.ts +2 -0
  12. package/dist/cjs/DataViewTh/index.js +23 -0
  13. package/dist/cjs/DataViewToolbar/DataViewToolbar.js +13 -1
  14. package/dist/cjs/DataViewTreeFilter/DataViewTreeFilter.d.ts +26 -0
  15. package/dist/cjs/DataViewTreeFilter/DataViewTreeFilter.js +229 -0
  16. package/dist/cjs/DataViewTreeFilter/DataViewTreeFilter.test.d.ts +1 -0
  17. package/dist/cjs/DataViewTreeFilter/DataViewTreeFilter.test.js +171 -0
  18. package/dist/cjs/DataViewTreeFilter/index.d.ts +2 -0
  19. package/dist/cjs/DataViewTreeFilter/index.js +23 -0
  20. package/dist/cjs/Hooks/selection.d.ts +8 -8
  21. package/dist/cjs/index.d.ts +6 -0
  22. package/dist/cjs/index.js +10 -1
  23. package/dist/dynamic/DataViewTh/package.json +1 -0
  24. package/dist/dynamic/DataViewTreeFilter/package.json +1 -0
  25. package/dist/dynamic-modules.json +62 -0
  26. package/dist/esm/DataViewTable/DataViewTable.d.ts +2 -1
  27. package/dist/esm/DataViewTableBasic/DataViewTableBasic.d.ts +11 -0
  28. package/dist/esm/DataViewTableBasic/DataViewTableBasic.js +48 -8
  29. package/dist/esm/DataViewTableBasic/DataViewTableBasic.test.js +45 -10
  30. package/dist/esm/DataViewTextFilter/DataViewTextFilter.d.ts +2 -0
  31. package/dist/esm/DataViewTextFilter/DataViewTextFilter.js +29 -1
  32. package/dist/esm/DataViewTextFilter/DataViewTextFilter.test.d.ts +1 -1
  33. package/dist/esm/DataViewTextFilter/DataViewTextFilter.test.js +84 -1
  34. package/dist/esm/DataViewTh/DataViewTh.d.ts +4 -4
  35. package/dist/esm/DataViewTh/DataViewTh.js +8 -1
  36. package/dist/esm/DataViewTh/index.d.ts +2 -0
  37. package/dist/esm/DataViewTh/index.js +2 -0
  38. package/dist/esm/DataViewToolbar/DataViewToolbar.js +13 -1
  39. package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.d.ts +26 -0
  40. package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.js +225 -0
  41. package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.test.d.ts +1 -0
  42. package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.test.js +166 -0
  43. package/dist/esm/DataViewTreeFilter/index.d.ts +2 -0
  44. package/dist/esm/DataViewTreeFilter/index.js +2 -0
  45. package/dist/esm/Hooks/selection.d.ts +8 -8
  46. package/dist/esm/index.d.ts +6 -0
  47. package/dist/esm/index.js +6 -0
  48. package/dist/tsconfig.tsbuildinfo +1 -1
  49. package/generate-fed-package-json.js +18 -0
  50. package/generate-index.js +2 -2
  51. package/package.json +6 -6
  52. package/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md +10 -4
  53. package/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx +2 -1
  54. package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableExpandableExample.tsx +108 -0
  55. package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableInteractiveExample.tsx +148 -0
  56. package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableStickyExample.tsx +90 -0
  57. package/patternfly-docs/content/extensions/data-view/examples/Table/Table.md +63 -2
  58. package/patternfly-docs/content/extensions/data-view/examples/Toolbar/FiltersExample.tsx +2 -1
  59. package/patternfly-docs/content/extensions/data-view/examples/Toolbar/PaginationExample.tsx +1 -1
  60. package/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md +9 -2
  61. package/patternfly-docs/content/extensions/data-view/examples/Toolbar/TreeFilterExample.tsx +248 -0
  62. package/patternfly-docs/patternfly-docs.config.js +4 -1
  63. package/src/DataViewTable/DataViewTable.tsx +3 -1
  64. package/src/DataViewTable/__snapshots__/DataViewTable.test.tsx.snap +7 -7
  65. package/src/DataViewTableBasic/DataViewTableBasic.test.tsx +54 -12
  66. package/src/DataViewTableBasic/DataViewTableBasic.tsx +101 -10
  67. package/src/DataViewTableBasic/__snapshots__/DataViewTableBasic.test.tsx.snap +10 -10
  68. package/src/DataViewTextFilter/DataViewTextFilter.test.tsx +129 -0
  69. package/src/DataViewTextFilter/DataViewTextFilter.tsx +58 -22
  70. package/src/DataViewTh/DataViewTh.tsx +15 -7
  71. package/src/DataViewTh/index.ts +2 -0
  72. package/src/DataViewToolbar/DataViewToolbar.tsx +17 -2
  73. package/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap +288 -280
  74. package/src/DataViewTreeFilter/DataViewTreeFilter.test.tsx +222 -0
  75. package/src/DataViewTreeFilter/DataViewTreeFilter.tsx +361 -0
  76. package/src/DataViewTreeFilter/__snapshots__/DataViewTreeFilter.test.tsx.snap +199 -0
  77. package/src/DataViewTreeFilter/index.ts +2 -0
  78. package/src/Hooks/selection.ts +8 -8
  79. package/src/index.ts +9 -0
package/src/DataViewTh/DataViewTh.tsx CHANGED
@@ -58,13 +58,13 @@ export interface DataViewThResizableProps {
58
58
  id: string | number | undefined,
59
59
  width: number
60
60
  ) => void;
61
- /** Width of the column */
61
+ /** Starting width in pixels of the column */
62
62
  width?: number;
63
- /** Minimum width of the column */
63
+ /** Minimum resize width in pixels of the column */
64
64
  minWidth?: number;
65
- /** Increment for keyboard navigation */
65
+ /** Increment in pixels for keyboard navigation */
66
66
  increment?: number;
67
- /** Increment for keyboard navigation while shift is held */
67
+ /** Increment in pixels for keyboard navigation while shift is held */
68
68
  shiftIncrement?: number;
69
69
  /** Provides an accessible name for the resizable column via a human readable string. */
70
70
  resizeButtonAriaLabel?: string;
@@ -324,14 +324,22 @@ export const DataViewTh: FC<DataViewThProps> = ({
324
324
  </Fragment>
325
325
  );
326
326
 
327
+ const classNames: string[] = [];
328
+ if (thProps?.className) {
329
+ classNames.push(thProps.className);
330
+ }
331
+ if (dataViewThClassName) {
332
+ classNames.push(dataViewThClassName);
333
+ }
334
+
327
335
  return (
328
336
  <Th
337
+ modifier="truncate"
329
338
  {...thProps}
330
339
  {...props}
331
- style={width > 0 ? { minWidth: width } : undefined}
332
340
  ref={thRef}
333
- modifier="truncate"
334
- className={dataViewThClassName}
341
+ style={width > 0 ? { ...thProps?.style, minWidth: width } : thProps?.style}
342
+ className={classNames.length > 0 ? classNames.join(' ') : undefined}
335
343
  {...(isResizable && { additionalContent: resizableContent })}
336
344
  >
337
345
  {content}
package/src/DataViewTh/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default } from './DataViewTh';
2
+ export * from './DataViewTh';
package/src/DataViewToolbar/DataViewToolbar.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import { FC, PropsWithChildren, useRef } from 'react';
2
2
  import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant, ToolbarProps } from '@patternfly/react-core';
3
+ import { createUseStyles } from 'react-jss';
3
4
 
4
5
  /** extends ToolbarProps */
5
6
  export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProps>, 'ref'> {
@@ -21,7 +22,19 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
21
22
  customLabelGroupContent?: React.ReactNode;
22
23
  }
23
24
 
25
+ const useStyles = createUseStyles({
26
+ dataViewToolbarPagination: {
27
+ flexBasis: '100%',
28
+ width: '100%'
29
+ },
30
+ dataViewToolbarPaginationWrapper: {
31
+ flexBasis: '100%',
32
+ width: '100%'
33
+ }
34
+ });
35
+
24
36
  export const DataViewToolbar: FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
37
+ const classes = useStyles();
25
38
  const defaultClearFilters = useRef(
26
39
  <ToolbarItem>
27
40
  <Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>
@@ -53,8 +66,10 @@ export const DataViewToolbar: FC<DataViewToolbarProps> = ({ className, ouiaId =
53
66
  </ToolbarItem>
54
67
  )}
55
68
  {pagination && (
56
- <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
57
- {pagination}
69
+ <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`} className={classes.dataViewToolbarPagination}>
70
+ <div className={classes.dataViewToolbarPaginationWrapper}>
71
+ {pagination}
72
+ </div>
58
73
  </ToolbarItem>
59
74
  )}
60
75
  {children}
package/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap CHANGED
@@ -19,8 +19,295 @@ exports[`DataViewToolbar component should render correctly 1`] = `
19
19
  class="pf-v6-c-toolbar__content-section"
20
20
  >
21
21
  <div
22
- class="pf-v6-c-toolbar__item pf-m-pagination"
22
+ class="pf-v6-c-toolbar__item pf-m-pagination dataViewToolbarPagination-0-2-1"
23
23
  data-ouia-component-id="DataViewToolbar-pagination"
24
+ >
25
+ <div
26
+ class="dataViewToolbarPaginationWrapper-0-2-2"
27
+ >
28
+ <div
29
+ class="pf-v6-c-pagination"
30
+ data-ouia-component-id="OUIA-Generated-Pagination-top-1"
31
+ data-ouia-component-type="PF6/Pagination"
32
+ data-ouia-safe="true"
33
+ id="options-menu-top-pagination"
34
+ style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
35
+ >
36
+ <div
37
+ class="pf-v6-c-pagination__total-items"
38
+ >
39
+ <b>
40
+ 1
41
+ -
42
+ 10
43
+ </b>
44
+
45
+ of
46
+
47
+ <b>
48
+ 0
49
+ </b>
50
+
51
+ </div>
52
+ <div
53
+ class="pf-v6-c-pagination__page-menu"
54
+ >
55
+ <button
56
+ aria-expanded="false"
57
+ aria-haspopup="listbox"
58
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
59
+ data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
60
+ data-ouia-component-type="PF6/MenuToggle"
61
+ data-ouia-safe="true"
62
+ id="options-menu-top-toggle"
63
+ type="button"
64
+ >
65
+ <span
66
+ class="pf-v6-c-menu-toggle__text"
67
+ >
68
+ <b>
69
+ 1
70
+ -
71
+ 10
72
+ </b>
73
+
74
+ of
75
+
76
+ <b>
77
+ 0
78
+ </b>
79
+
80
+ </span>
81
+ <span
82
+ class="pf-v6-c-menu-toggle__controls"
83
+ >
84
+ <span
85
+ class="pf-v6-c-menu-toggle__toggle-icon"
86
+ >
87
+ <svg
88
+ aria-hidden="true"
89
+ class="pf-v6-svg"
90
+ fill="currentColor"
91
+ height="1em"
92
+ role="img"
93
+ viewBox="0 0 320 512"
94
+ width="1em"
95
+ >
96
+ <path
97
+ 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"
98
+ />
99
+ </svg>
100
+ </span>
101
+ </span>
102
+ </button>
103
+ </div>
104
+ <nav
105
+ aria-label="Pagination"
106
+ class="pf-v6-c-pagination__nav"
107
+ >
108
+ <div
109
+ class="pf-v6-c-pagination__nav-control pf-m-first"
110
+ >
111
+ <button
112
+ aria-label="Go to first page"
113
+ class="pf-v6-c-button pf-m-plain"
114
+ data-action="first"
115
+ data-ouia-component-id="OUIA-Generated-Button-plain-1"
116
+ data-ouia-component-type="PF6/Button"
117
+ data-ouia-safe="true"
118
+ disabled=""
119
+ type="button"
120
+ >
121
+ <span
122
+ class="pf-v6-c-button__icon"
123
+ >
124
+ <svg
125
+ aria-hidden="true"
126
+ class="pf-v6-svg"
127
+ fill="currentColor"
128
+ height="1em"
129
+ role="img"
130
+ viewBox="0 0 448 512"
131
+ width="1em"
132
+ >
133
+ <path
134
+ d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
135
+ />
136
+ </svg>
137
+ </span>
138
+ </button>
139
+ </div>
140
+ <div
141
+ class="pf-v6-c-pagination__nav-control"
142
+ >
143
+ <button
144
+ aria-label="Go to previous page"
145
+ class="pf-v6-c-button pf-m-plain"
146
+ data-action="previous"
147
+ data-ouia-component-id="OUIA-Generated-Button-plain-2"
148
+ data-ouia-component-type="PF6/Button"
149
+ data-ouia-safe="true"
150
+ disabled=""
151
+ type="button"
152
+ >
153
+ <span
154
+ class="pf-v6-c-button__icon"
155
+ >
156
+ <svg
157
+ aria-hidden="true"
158
+ class="pf-v6-svg"
159
+ fill="currentColor"
160
+ height="1em"
161
+ role="img"
162
+ viewBox="0 0 256 512"
163
+ width="1em"
164
+ >
165
+ <path
166
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
167
+ />
168
+ </svg>
169
+ </span>
170
+ </button>
171
+ </div>
172
+ <div
173
+ class="pf-v6-c-pagination__nav-page-select"
174
+ >
175
+ <span
176
+ class="pf-v6-c-form-control"
177
+ >
178
+ <input
179
+ aria-invalid="false"
180
+ aria-label="Current page"
181
+ data-ouia-component-id="OUIA-Generated-TextInputBase-1"
182
+ data-ouia-component-type="PF6/TextInput"
183
+ data-ouia-safe="true"
184
+ max="2"
185
+ min="1"
186
+ type="number"
187
+ value="1"
188
+ />
189
+ </span>
190
+ </div>
191
+ <div
192
+ class="pf-v6-c-pagination__nav-control"
193
+ >
194
+ <button
195
+ aria-label="Go to next page"
196
+ class="pf-v6-c-button pf-m-plain"
197
+ data-action="next"
198
+ data-ouia-component-id="OUIA-Generated-Button-plain-3"
199
+ data-ouia-component-type="PF6/Button"
200
+ data-ouia-safe="true"
201
+ type="button"
202
+ >
203
+ <span
204
+ class="pf-v6-c-button__icon"
205
+ >
206
+ <svg
207
+ aria-hidden="true"
208
+ class="pf-v6-svg"
209
+ fill="currentColor"
210
+ height="1em"
211
+ role="img"
212
+ viewBox="0 0 256 512"
213
+ width="1em"
214
+ >
215
+ <path
216
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
217
+ />
218
+ </svg>
219
+ </span>
220
+ </button>
221
+ </div>
222
+ <div
223
+ class="pf-v6-c-pagination__nav-control pf-m-last"
224
+ >
225
+ <button
226
+ aria-label="Go to last page"
227
+ class="pf-v6-c-button pf-m-plain"
228
+ data-action="last"
229
+ data-ouia-component-id="OUIA-Generated-Button-plain-4"
230
+ data-ouia-component-type="PF6/Button"
231
+ data-ouia-safe="true"
232
+ type="button"
233
+ >
234
+ <span
235
+ class="pf-v6-c-button__icon"
236
+ >
237
+ <svg
238
+ aria-hidden="true"
239
+ class="pf-v6-svg"
240
+ fill="currentColor"
241
+ height="1em"
242
+ role="img"
243
+ viewBox="0 0 448 512"
244
+ width="1em"
245
+ >
246
+ <path
247
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
248
+ />
249
+ </svg>
250
+ </span>
251
+ </button>
252
+ </div>
253
+ </nav>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ <div
260
+ class="pf-v6-c-toolbar__content pf-m-hidden"
261
+ hidden=""
262
+ >
263
+ <div
264
+ class="pf-v6-c-toolbar__group"
265
+ />
266
+ <div
267
+ class="pf-v6-c-toolbar__group pf-m-action-group-inline"
268
+ >
269
+ <div
270
+ class="pf-v6-c-toolbar__item"
271
+ >
272
+ <button
273
+ class="pf-v6-c-button pf-m-link pf-m-inline"
274
+ data-ouia-component-id="DataViewToolbar-clear-all-filters"
275
+ data-ouia-component-type="PF6/Button"
276
+ data-ouia-safe="true"
277
+ type="button"
278
+ >
279
+ <span
280
+ class="pf-v6-c-button__text"
281
+ >
282
+ Clear filters
283
+ </span>
284
+ </button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </body>,
291
+ "container": <div>
292
+ <div
293
+ class="pf-v6-c-toolbar"
294
+ data-ouia-component-id="DataViewToolbar"
295
+ data-ouia-component-type="PF6/Toolbar"
296
+ data-ouia-safe="true"
297
+ id="pf-random-id-0"
298
+ >
299
+ <div
300
+ class="pf-v6-c-toolbar__content"
301
+ >
302
+ <div
303
+ class="pf-v6-c-toolbar__content-section"
304
+ >
305
+ <div
306
+ class="pf-v6-c-toolbar__item pf-m-pagination dataViewToolbarPagination-0-2-1"
307
+ data-ouia-component-id="DataViewToolbar-pagination"
308
+ >
309
+ <div
310
+ class="dataViewToolbarPaginationWrapper-0-2-2"
24
311
  >
25
312
  <div
26
313
  class="pf-v6-c-pagination"
@@ -252,285 +539,6 @@ exports[`DataViewToolbar component should render correctly 1`] = `
252
539
  </div>
253
540
  </div>
254
541
  </div>
255
- <div
256
- class="pf-v6-c-toolbar__content pf-m-hidden"
257
- hidden=""
258
- >
259
- <div
260
- class="pf-v6-c-toolbar__group"
261
- />
262
- <div
263
- class="pf-v6-c-toolbar__group pf-m-action-group-inline"
264
- >
265
- <div
266
- class="pf-v6-c-toolbar__item"
267
- >
268
- <button
269
- class="pf-v6-c-button pf-m-link pf-m-inline"
270
- data-ouia-component-id="DataViewToolbar-clear-all-filters"
271
- data-ouia-component-type="PF6/Button"
272
- data-ouia-safe="true"
273
- type="button"
274
- >
275
- <span
276
- class="pf-v6-c-button__text"
277
- >
278
- Clear filters
279
- </span>
280
- </button>
281
- </div>
282
- </div>
283
- </div>
284
- </div>
285
- </div>
286
- </body>,
287
- "container": <div>
288
- <div
289
- class="pf-v6-c-toolbar"
290
- data-ouia-component-id="DataViewToolbar"
291
- data-ouia-component-type="PF6/Toolbar"
292
- data-ouia-safe="true"
293
- id="pf-random-id-0"
294
- >
295
- <div
296
- class="pf-v6-c-toolbar__content"
297
- >
298
- <div
299
- class="pf-v6-c-toolbar__content-section"
300
- >
301
- <div
302
- class="pf-v6-c-toolbar__item pf-m-pagination"
303
- data-ouia-component-id="DataViewToolbar-pagination"
304
- >
305
- <div
306
- class="pf-v6-c-pagination"
307
- data-ouia-component-id="OUIA-Generated-Pagination-top-1"
308
- data-ouia-component-type="PF6/Pagination"
309
- data-ouia-safe="true"
310
- id="options-menu-top-pagination"
311
- style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
312
- >
313
- <div
314
- class="pf-v6-c-pagination__total-items"
315
- >
316
- <b>
317
- 1
318
- -
319
- 10
320
- </b>
321
-
322
- of
323
-
324
- <b>
325
- 0
326
- </b>
327
-
328
- </div>
329
- <div
330
- class="pf-v6-c-pagination__page-menu"
331
- >
332
- <button
333
- aria-expanded="false"
334
- aria-haspopup="listbox"
335
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
336
- data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
337
- data-ouia-component-type="PF6/MenuToggle"
338
- data-ouia-safe="true"
339
- id="options-menu-top-toggle"
340
- type="button"
341
- >
342
- <span
343
- class="pf-v6-c-menu-toggle__text"
344
- >
345
- <b>
346
- 1
347
- -
348
- 10
349
- </b>
350
-
351
- of
352
-
353
- <b>
354
- 0
355
- </b>
356
-
357
- </span>
358
- <span
359
- class="pf-v6-c-menu-toggle__controls"
360
- >
361
- <span
362
- class="pf-v6-c-menu-toggle__toggle-icon"
363
- >
364
- <svg
365
- aria-hidden="true"
366
- class="pf-v6-svg"
367
- fill="currentColor"
368
- height="1em"
369
- role="img"
370
- viewBox="0 0 320 512"
371
- width="1em"
372
- >
373
- <path
374
- 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"
375
- />
376
- </svg>
377
- </span>
378
- </span>
379
- </button>
380
- </div>
381
- <nav
382
- aria-label="Pagination"
383
- class="pf-v6-c-pagination__nav"
384
- >
385
- <div
386
- class="pf-v6-c-pagination__nav-control pf-m-first"
387
- >
388
- <button
389
- aria-label="Go to first page"
390
- class="pf-v6-c-button pf-m-plain"
391
- data-action="first"
392
- data-ouia-component-id="OUIA-Generated-Button-plain-1"
393
- data-ouia-component-type="PF6/Button"
394
- data-ouia-safe="true"
395
- disabled=""
396
- type="button"
397
- >
398
- <span
399
- class="pf-v6-c-button__icon"
400
- >
401
- <svg
402
- aria-hidden="true"
403
- class="pf-v6-svg"
404
- fill="currentColor"
405
- height="1em"
406
- role="img"
407
- viewBox="0 0 448 512"
408
- width="1em"
409
- >
410
- <path
411
- d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
412
- />
413
- </svg>
414
- </span>
415
- </button>
416
- </div>
417
- <div
418
- class="pf-v6-c-pagination__nav-control"
419
- >
420
- <button
421
- aria-label="Go to previous page"
422
- class="pf-v6-c-button pf-m-plain"
423
- data-action="previous"
424
- data-ouia-component-id="OUIA-Generated-Button-plain-2"
425
- data-ouia-component-type="PF6/Button"
426
- data-ouia-safe="true"
427
- disabled=""
428
- type="button"
429
- >
430
- <span
431
- class="pf-v6-c-button__icon"
432
- >
433
- <svg
434
- aria-hidden="true"
435
- class="pf-v6-svg"
436
- fill="currentColor"
437
- height="1em"
438
- role="img"
439
- viewBox="0 0 256 512"
440
- width="1em"
441
- >
442
- <path
443
- d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
444
- />
445
- </svg>
446
- </span>
447
- </button>
448
- </div>
449
- <div
450
- class="pf-v6-c-pagination__nav-page-select"
451
- >
452
- <span
453
- class="pf-v6-c-form-control"
454
- >
455
- <input
456
- aria-invalid="false"
457
- aria-label="Current page"
458
- data-ouia-component-id="OUIA-Generated-TextInputBase-1"
459
- data-ouia-component-type="PF6/TextInput"
460
- data-ouia-safe="true"
461
- max="2"
462
- min="1"
463
- type="number"
464
- value="1"
465
- />
466
- </span>
467
- </div>
468
- <div
469
- class="pf-v6-c-pagination__nav-control"
470
- >
471
- <button
472
- aria-label="Go to next page"
473
- class="pf-v6-c-button pf-m-plain"
474
- data-action="next"
475
- data-ouia-component-id="OUIA-Generated-Button-plain-3"
476
- data-ouia-component-type="PF6/Button"
477
- data-ouia-safe="true"
478
- type="button"
479
- >
480
- <span
481
- class="pf-v6-c-button__icon"
482
- >
483
- <svg
484
- aria-hidden="true"
485
- class="pf-v6-svg"
486
- fill="currentColor"
487
- height="1em"
488
- role="img"
489
- viewBox="0 0 256 512"
490
- width="1em"
491
- >
492
- <path
493
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
494
- />
495
- </svg>
496
- </span>
497
- </button>
498
- </div>
499
- <div
500
- class="pf-v6-c-pagination__nav-control pf-m-last"
501
- >
502
- <button
503
- aria-label="Go to last page"
504
- class="pf-v6-c-button pf-m-plain"
505
- data-action="last"
506
- data-ouia-component-id="OUIA-Generated-Button-plain-4"
507
- data-ouia-component-type="PF6/Button"
508
- data-ouia-safe="true"
509
- type="button"
510
- >
511
- <span
512
- class="pf-v6-c-button__icon"
513
- >
514
- <svg
515
- aria-hidden="true"
516
- class="pf-v6-svg"
517
- fill="currentColor"
518
- height="1em"
519
- role="img"
520
- viewBox="0 0 448 512"
521
- width="1em"
522
- >
523
- <path
524
- d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
525
- />
526
- </svg>
527
- </span>
528
- </button>
529
- </div>
530
- </nav>
531
- </div>
532
- </div>
533
- </div>
534
542
  </div>
535
543
  <div
536
544
  class="pf-v6-c-toolbar__content pf-m-hidden"