@patternfly/react-data-view 5.2.0 → 5.4.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 (66) hide show
  1. package/dist/cjs/DataView/DataView.d.ts +1 -1
  2. package/dist/cjs/DataViewTableBasic/DataViewTableBasic.d.ts +4 -2
  3. package/dist/cjs/DataViewTableBasic/DataViewTableBasic.js +24 -23
  4. package/dist/cjs/DataViewTableBasic/DataViewTableBasic.test.js +10 -5
  5. package/dist/cjs/{DataViewTableHeader/DataViewTableHeader.d.ts → DataViewTableHead/DataViewTableHead.d.ts} +3 -3
  6. package/dist/cjs/{DataViewTableHeader/DataViewTableHeader.js → DataViewTableHead/DataViewTableHead.js} +6 -6
  7. package/dist/cjs/{DataViewTableHeader/DataViewTableHeader.test.js → DataViewTableHead/DataViewTableHead.test.js} +5 -5
  8. package/dist/cjs/DataViewTableHead/index.d.ts +2 -0
  9. package/dist/cjs/{DataViewTableHeader → DataViewTableHead}/index.js +3 -3
  10. package/dist/cjs/DataViewTableTree/DataViewTableTree.d.ts +4 -2
  11. package/dist/cjs/DataViewTableTree/DataViewTableTree.js +6 -5
  12. package/dist/cjs/DataViewTableTree/DataViewTableTree.test.js +7 -2
  13. package/dist/cjs/DataViewToolbar/DataViewToolbar.js +2 -2
  14. package/dist/cjs/InternalContext/InternalContext.d.ts +9 -3
  15. package/dist/cjs/InternalContext/InternalContext.js +6 -2
  16. package/dist/cjs/index.d.ts +2 -2
  17. package/dist/cjs/index.js +4 -4
  18. package/dist/dynamic/DataViewTableHead/package.json +1 -0
  19. package/dist/esm/DataView/DataView.d.ts +1 -1
  20. package/dist/esm/DataViewTableBasic/DataViewTableBasic.d.ts +4 -2
  21. package/dist/esm/DataViewTableBasic/DataViewTableBasic.js +24 -23
  22. package/dist/esm/DataViewTableBasic/DataViewTableBasic.test.js +8 -3
  23. package/dist/esm/{DataViewTableHeader/DataViewTableHeader.d.ts → DataViewTableHead/DataViewTableHead.d.ts} +3 -3
  24. package/dist/esm/{DataViewTableHeader/DataViewTableHeader.js → DataViewTableHead/DataViewTableHead.js} +4 -4
  25. package/dist/esm/{DataViewTableHeader/DataViewTableHeader.test.js → DataViewTableHead/DataViewTableHead.test.js} +5 -5
  26. package/dist/esm/DataViewTableHead/index.d.ts +2 -0
  27. package/dist/esm/DataViewTableHead/index.js +2 -0
  28. package/dist/esm/DataViewTableTree/DataViewTableTree.d.ts +4 -2
  29. package/dist/esm/DataViewTableTree/DataViewTableTree.js +7 -6
  30. package/dist/esm/DataViewTableTree/DataViewTableTree.test.js +7 -2
  31. package/dist/esm/DataViewToolbar/DataViewToolbar.js +2 -2
  32. package/dist/esm/InternalContext/InternalContext.d.ts +9 -3
  33. package/dist/esm/InternalContext/InternalContext.js +7 -3
  34. package/dist/esm/index.d.ts +2 -2
  35. package/dist/esm/index.js +2 -2
  36. package/package.json +5 -5
  37. package/patternfly-docs/content/extensions/data-view/examples/Components/Components.md +26 -8
  38. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableEmptyExample.tsx +21 -14
  39. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableErrorExample.tsx +9 -2
  40. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableLoadingExample.tsx +27 -0
  41. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarActionsExample.tsx +27 -0
  42. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx +4 -4
  43. package/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md +1 -2
  44. package/src/DataView/DataView.tsx +1 -1
  45. package/src/DataViewTable/DataViewTable.tsx +1 -1
  46. package/src/DataViewTableBasic/DataViewTableBasic.test.tsx +12 -3
  47. package/src/DataViewTableBasic/DataViewTableBasic.tsx +46 -48
  48. package/src/DataViewTableBasic/__snapshots__/DataViewTableBasic.test.tsx.snap +71 -30
  49. package/src/{DataViewTableHeader/DataViewTableHeader.test.tsx → DataViewTableHead/DataViewTableHead.test.tsx} +5 -7
  50. package/src/{DataViewTableHeader/DataViewTableHeader.tsx → DataViewTableHead/DataViewTableHead.tsx} +6 -6
  51. package/src/{DataViewTableHeader/__snapshots__/DataViewTableHeader.test.tsx.snap → DataViewTableHead/__snapshots__/DataViewTableHead.test.tsx.snap} +4 -4
  52. package/src/DataViewTableHead/index.ts +2 -0
  53. package/src/DataViewTableTree/DataViewTableTree.test.tsx +11 -2
  54. package/src/DataViewTableTree/DataViewTableTree.tsx +12 -16
  55. package/src/DataViewTableTree/__snapshots__/DataViewTableTree.test.tsx.snap +71 -30
  56. package/src/DataViewToolbar/DataViewToolbar.tsx +7 -3
  57. package/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap +86 -84
  58. package/src/InternalContext/InternalContext.tsx +24 -12
  59. package/src/index.ts +2 -2
  60. package/dist/cjs/DataViewTableHeader/index.d.ts +0 -2
  61. package/dist/dynamic/DataViewTableHeader/package.json +0 -1
  62. package/dist/esm/DataViewTableHeader/index.d.ts +0 -2
  63. package/dist/esm/DataViewTableHeader/index.js +0 -2
  64. package/src/DataViewTableHeader/index.ts +0 -2
  65. /package/dist/cjs/{DataViewTableHeader/DataViewTableHeader.test.d.ts → DataViewTableHead/DataViewTableHead.test.d.ts} +0 -0
  66. /package/dist/esm/{DataViewTableHeader/DataViewTableHeader.test.d.ts → DataViewTableHead/DataViewTableHead.test.d.ts} +0 -0
package/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap CHANGED
@@ -46,53 +46,54 @@ exports[`DataViewToolbar component should render correctly 1`] = `
46
46
  </b>
47
47
 
48
48
  </div>
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"
49
+ <button
50
+ aria-expanded="false"
51
+ aria-haspopup="listbox"
52
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
53
+ data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
54
+ data-ouia-component-type="PF5/MenuToggle"
55
+ data-ouia-safe="true"
56
+ id="options-menu-top-toggle"
57
+ type="button"
58
+ >
59
+ <span
60
+ class="pf-v5-c-menu-toggle__text"
61
+ >
62
+ <b>
63
+ 1
64
+ -
65
+ 10
66
+ </b>
67
+
68
+ of
69
+
70
+ <b>
71
+ 0
72
+ </b>
73
+
74
+ </span>
75
+ <span
76
+ class="pf-v5-c-menu-toggle__controls"
56
77
  >
57
78
  <span
58
- class="pf-v5-c-menu-toggle__text"
59
- >
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"
79
+ class="pf-v5-c-menu-toggle__toggle-icon"
75
80
  >
76
- <span
77
- class="pf-v5-c-menu-toggle__toggle-icon"
81
+ <svg
82
+ aria-hidden="true"
83
+ class="pf-v5-svg"
84
+ fill="currentColor"
85
+ height="1em"
86
+ role="img"
87
+ viewBox="0 0 320 512"
88
+ width="1em"
78
89
  >
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>
90
+ <path
91
+ 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"
92
+ />
93
+ </svg>
93
94
  </span>
94
- </button>
95
- </div>
95
+ </span>
96
+ </button>
96
97
  <nav
97
98
  aria-label="Pagination"
98
99
  class="pf-v5-c-pagination__nav"
@@ -288,53 +289,54 @@ exports[`DataViewToolbar component should render correctly 1`] = `
288
289
  </b>
289
290
 
290
291
  </div>
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"
292
+ <button
293
+ aria-expanded="false"
294
+ aria-haspopup="listbox"
295
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
296
+ data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
297
+ data-ouia-component-type="PF5/MenuToggle"
298
+ data-ouia-safe="true"
299
+ id="options-menu-top-toggle"
300
+ type="button"
301
+ >
302
+ <span
303
+ class="pf-v5-c-menu-toggle__text"
304
+ >
305
+ <b>
306
+ 1
307
+ -
308
+ 10
309
+ </b>
310
+
311
+ of
312
+
313
+ <b>
314
+ 0
315
+ </b>
316
+
317
+ </span>
318
+ <span
319
+ class="pf-v5-c-menu-toggle__controls"
298
320
  >
299
321
  <span
300
- class="pf-v5-c-menu-toggle__text"
301
- >
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"
322
+ class="pf-v5-c-menu-toggle__toggle-icon"
317
323
  >
318
- <span
319
- class="pf-v5-c-menu-toggle__toggle-icon"
324
+ <svg
325
+ aria-hidden="true"
326
+ class="pf-v5-svg"
327
+ fill="currentColor"
328
+ height="1em"
329
+ role="img"
330
+ viewBox="0 0 320 512"
331
+ width="1em"
320
332
  >
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>
333
+ <path
334
+ 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"
335
+ />
336
+ </svg>
335
337
  </span>
336
- </button>
337
- </div>
338
+ </span>
339
+ </button>
338
340
  <nav
339
341
  aria-label="Pagination"
340
342
  class="pf-v5-c-pagination__nav"
package/src/InternalContext/InternalContext.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { createContext, PropsWithChildren, useContext } from 'react';
1
+ import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react';
2
2
  import { DataViewState } from '../DataView';
3
3
 
4
4
  export interface DataViewSelection {
@@ -10,29 +10,41 @@ export interface DataViewSelection {
10
10
  isSelectDisabled?: (item: any) => boolean; // eslint-disable-line @typescript-eslint/no-explicit-any
11
11
  }
12
12
 
13
- export interface InternalContextValue {
13
+ export interface InternalContextProps {
14
+ /** Data selection props */
14
15
  selection?: DataViewSelection;
15
- activeState?: DataViewState;
16
+ /** Currently active state */
17
+ activeState?: DataViewState | string;
18
+ }
19
+
20
+ export interface InternalContextValue extends InternalContextProps {
21
+ /** Flag indicating if data view is selectable (auto-calculated) */
22
+ isSelectable: boolean;
16
23
  }
17
24
 
18
25
  export const InternalContext = createContext<InternalContextValue>({
19
26
  selection: undefined,
20
- activeState: undefined
27
+ activeState: undefined,
28
+ isSelectable: false,
21
29
  });
22
30
 
23
- export type InternalProviderProps = PropsWithChildren<InternalContextValue>
31
+ export type InternalProviderProps = PropsWithChildren<InternalContextProps>
24
32
 
25
33
  export const InternalContextProvider: React.FC<InternalProviderProps> = ({
26
34
  children,
27
35
  selection,
28
36
  activeState
29
- }) => (
30
- <InternalContext.Provider
31
- value={{ selection, activeState }}
32
- >
33
- {children}
34
- </InternalContext.Provider>
35
- );
37
+ }) => {
38
+ const isSelectable = useMemo(() => Boolean(selection?.onSelect && selection?.isSelected), [ selection?.onSelect, selection?.isSelected ]);
39
+
40
+ return (
41
+ <InternalContext.Provider
42
+ value={{ selection, activeState, isSelectable }}
43
+ >
44
+ {children}
45
+ </InternalContext.Provider>
46
+ );
47
+ }
36
48
 
37
49
  export const useInternalContext = () => useContext(InternalContext);
38
50
 
package/src/index.ts CHANGED
@@ -10,8 +10,8 @@ export * from './DataViewToolbar';
10
10
  export { default as DataViewTableTree } from './DataViewTableTree';
11
11
  export * from './DataViewTableTree';
12
12
 
13
- export { default as DataViewTableHeader } from './DataViewTableHeader';
14
- export * from './DataViewTableHeader';
13
+ export { default as DataViewTableHead } from './DataViewTableHead';
14
+ export * from './DataViewTableHead';
15
15
 
16
16
  export { default as DataViewTableBasic } from './DataViewTableBasic';
17
17
  export * from './DataViewTableBasic';
package/dist/cjs/DataViewTableHeader/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from './DataViewTableHeader';
2
- export * from './DataViewTableHeader';
package/dist/dynamic/DataViewTableHeader/package.json DELETED
@@ -1 +0,0 @@
1
- {"main":"../../cjs/DataViewTableHeader/index.js","module":"../../esm/DataViewTableHeader/index.js","typings":"../../esm/DataViewTableHeader/index.d.ts"}
package/dist/esm/DataViewTableHeader/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from './DataViewTableHeader';
2
- export * from './DataViewTableHeader';
package/dist/esm/DataViewTableHeader/index.js DELETED
@@ -1,2 +0,0 @@
1
- export { default } from './DataViewTableHeader';
2
- export * from './DataViewTableHeader';
package/src/DataViewTableHeader/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from './DataViewTableHeader';
2
- export * from './DataViewTableHeader';