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

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 (151) hide show
  1. package/dist/cjs/DataView/DataView.d.ts +12 -0
  2. package/dist/cjs/DataView/DataView.js +14 -3
  3. package/dist/cjs/DataViewEventsContext/DataViewEventsContext.d.ts +16 -0
  4. package/dist/cjs/DataViewEventsContext/DataViewEventsContext.js +62 -0
  5. package/dist/cjs/DataViewEventsContext/DataViewEventsContext.test.d.ts +1 -0
  6. package/dist/cjs/DataViewEventsContext/DataViewEventsContext.test.js +72 -0
  7. package/dist/cjs/DataViewEventsContext/index.d.ts +2 -0
  8. package/dist/cjs/DataViewEventsContext/index.js +23 -0
  9. package/dist/cjs/DataViewTable/DataViewTable.d.ts +41 -0
  10. package/dist/cjs/DataViewTable/DataViewTable.js +18 -0
  11. package/dist/cjs/DataViewTable/DataViewTable.test.d.ts +1 -0
  12. package/dist/cjs/DataViewTable/DataViewTable.test.js +57 -0
  13. package/dist/cjs/DataViewTable/index.d.ts +2 -0
  14. package/dist/cjs/DataViewTable/index.js +23 -0
  15. package/dist/cjs/DataViewTableBasic/DataViewTableBasic.d.ts +18 -0
  16. package/dist/cjs/DataViewTableBasic/DataViewTableBasic.js +71 -0
  17. package/dist/cjs/DataViewTableBasic/DataViewTableBasic.test.d.ts +1 -0
  18. package/dist/cjs/DataViewTableBasic/DataViewTableBasic.test.js +43 -0
  19. package/dist/cjs/DataViewTableBasic/index.d.ts +2 -0
  20. package/dist/cjs/DataViewTableBasic/index.js +23 -0
  21. package/dist/cjs/DataViewTableHead/DataViewTableHead.d.ts +13 -0
  22. package/dist/cjs/DataViewTableHead/DataViewTableHead.js +57 -0
  23. package/dist/cjs/DataViewTableHead/DataViewTableHead.test.d.ts +1 -0
  24. package/dist/cjs/DataViewTableHead/DataViewTableHead.test.js +36 -0
  25. package/dist/cjs/DataViewTableHead/index.d.ts +2 -0
  26. package/dist/cjs/DataViewTableHead/index.js +23 -0
  27. package/dist/cjs/DataViewTableTree/DataViewTableTree.d.ts +24 -0
  28. package/dist/cjs/DataViewTableTree/DataViewTableTree.js +132 -0
  29. package/dist/cjs/DataViewTableTree/DataViewTableTree.test.d.ts +1 -0
  30. package/dist/cjs/DataViewTableTree/DataViewTableTree.test.js +90 -0
  31. package/dist/cjs/DataViewTableTree/index.d.ts +2 -0
  32. package/dist/cjs/DataViewTableTree/index.js +23 -0
  33. package/dist/cjs/DataViewToolbar/DataViewToolbar.d.ts +2 -0
  34. package/dist/cjs/DataViewToolbar/DataViewToolbar.js +2 -1
  35. package/dist/cjs/Hooks/pagination.d.ts +13 -1
  36. package/dist/cjs/Hooks/pagination.js +36 -4
  37. package/dist/cjs/Hooks/pagination.test.js +1 -1
  38. package/dist/cjs/Hooks/selection.d.ts +3 -3
  39. package/dist/cjs/Hooks/selection.js +4 -6
  40. package/dist/cjs/Hooks/selection.test.js +4 -4
  41. package/dist/cjs/InternalContext/InternalContext.d.ts +25 -0
  42. package/dist/cjs/InternalContext/InternalContext.js +40 -0
  43. package/dist/cjs/InternalContext/InternalContext.test.d.ts +1 -0
  44. package/dist/cjs/InternalContext/InternalContext.test.js +56 -0
  45. package/dist/cjs/InternalContext/index.d.ts +2 -0
  46. package/dist/cjs/InternalContext/index.js +23 -0
  47. package/dist/cjs/index.d.ts +12 -0
  48. package/dist/cjs/index.js +20 -2
  49. package/dist/dynamic/DataViewEventsContext/package.json +1 -0
  50. package/dist/dynamic/DataViewTable/package.json +1 -0
  51. package/dist/dynamic/DataViewTableBasic/package.json +1 -0
  52. package/dist/dynamic/DataViewTableHead/package.json +1 -0
  53. package/dist/dynamic/DataViewTableTree/package.json +1 -0
  54. package/dist/dynamic/InternalContext/package.json +1 -0
  55. package/dist/esm/DataView/DataView.d.ts +12 -0
  56. package/dist/esm/DataView/DataView.js +13 -2
  57. package/dist/esm/DataViewEventsContext/DataViewEventsContext.d.ts +16 -0
  58. package/dist/esm/DataViewEventsContext/DataViewEventsContext.js +34 -0
  59. package/dist/esm/DataViewEventsContext/DataViewEventsContext.test.d.ts +1 -0
  60. package/dist/esm/DataViewEventsContext/DataViewEventsContext.test.js +67 -0
  61. package/dist/esm/DataViewEventsContext/index.d.ts +2 -0
  62. package/dist/esm/DataViewEventsContext/index.js +2 -0
  63. package/dist/esm/DataViewTable/DataViewTable.d.ts +41 -0
  64. package/dist/esm/DataViewTable/DataViewTable.js +8 -0
  65. package/dist/esm/DataViewTable/DataViewTable.test.d.ts +1 -0
  66. package/dist/esm/DataViewTable/DataViewTable.test.js +52 -0
  67. package/dist/esm/DataViewTable/index.d.ts +2 -0
  68. package/dist/esm/DataViewTable/index.js +2 -0
  69. package/dist/esm/DataViewTableBasic/DataViewTableBasic.d.ts +18 -0
  70. package/dist/esm/DataViewTableBasic/DataViewTableBasic.js +44 -0
  71. package/dist/esm/DataViewTableBasic/DataViewTableBasic.test.d.ts +1 -0
  72. package/dist/esm/DataViewTableBasic/DataViewTableBasic.test.js +38 -0
  73. package/dist/esm/DataViewTableBasic/index.d.ts +2 -0
  74. package/dist/esm/DataViewTableBasic/index.js +2 -0
  75. package/dist/esm/DataViewTableHead/DataViewTableHead.d.ts +13 -0
  76. package/dist/esm/DataViewTableHead/DataViewTableHead.js +30 -0
  77. package/dist/esm/DataViewTableHead/DataViewTableHead.test.d.ts +1 -0
  78. package/dist/esm/DataViewTableHead/DataViewTableHead.test.js +31 -0
  79. package/dist/esm/DataViewTableHead/index.d.ts +2 -0
  80. package/dist/esm/DataViewTableHead/index.js +2 -0
  81. package/dist/esm/DataViewTableTree/DataViewTableTree.d.ts +24 -0
  82. package/dist/esm/DataViewTableTree/DataViewTableTree.js +105 -0
  83. package/dist/esm/DataViewTableTree/DataViewTableTree.test.d.ts +1 -0
  84. package/dist/esm/DataViewTableTree/DataViewTableTree.test.js +85 -0
  85. package/dist/esm/DataViewTableTree/index.d.ts +2 -0
  86. package/dist/esm/DataViewTableTree/index.js +2 -0
  87. package/dist/esm/DataViewToolbar/DataViewToolbar.d.ts +2 -0
  88. package/dist/esm/DataViewToolbar/DataViewToolbar.js +2 -1
  89. package/dist/esm/Hooks/pagination.d.ts +13 -1
  90. package/dist/esm/Hooks/pagination.js +36 -4
  91. package/dist/esm/Hooks/pagination.test.js +1 -1
  92. package/dist/esm/Hooks/selection.d.ts +3 -3
  93. package/dist/esm/Hooks/selection.js +4 -6
  94. package/dist/esm/Hooks/selection.test.js +4 -4
  95. package/dist/esm/InternalContext/InternalContext.d.ts +25 -0
  96. package/dist/esm/InternalContext/InternalContext.js +12 -0
  97. package/dist/esm/InternalContext/InternalContext.test.d.ts +1 -0
  98. package/dist/esm/InternalContext/InternalContext.test.js +51 -0
  99. package/dist/esm/InternalContext/index.d.ts +2 -0
  100. package/dist/esm/InternalContext/index.js +2 -0
  101. package/dist/esm/index.d.ts +12 -0
  102. package/dist/esm/index.js +12 -0
  103. package/dist/tsconfig.tsbuildinfo +1 -0
  104. package/package.json +9 -9
  105. package/patternfly-docs/content/extensions/data-view/examples/Components/Components.md +80 -5
  106. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableEmptyExample.tsx +57 -0
  107. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableErrorExample.tsx +45 -0
  108. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableExample.tsx +67 -0
  109. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableLoadingExample.tsx +27 -0
  110. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableTreeExample.tsx +71 -0
  111. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarActionsExample.tsx +27 -0
  112. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx +4 -4
  113. package/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md +32 -0
  114. package/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx +108 -0
  115. package/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md +14 -6
  116. package/patternfly-docs/content/extensions/data-view/examples/Functionality/PaginationExample.tsx +28 -37
  117. package/patternfly-docs/content/extensions/data-view/examples/Functionality/SelectionExample.tsx +15 -46
  118. package/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md +2 -1
  119. package/patternfly-docs/content/extensions/data-view/examples/Layout/PredefinedLayoutExample.tsx +20 -51
  120. package/patternfly-docs/pages/index.js +1 -1
  121. package/src/DataView/DataView.tsx +25 -3
  122. package/src/DataView/__snapshots__/DataView.test.tsx.snap +2 -2
  123. package/src/DataViewEventsContext/DataViewEventsContext.test.tsx +105 -0
  124. package/src/DataViewEventsContext/DataViewEventsContext.tsx +70 -0
  125. package/src/DataViewEventsContext/index.ts +2 -0
  126. package/src/DataViewTable/DataViewTable.test.tsx +80 -0
  127. package/src/DataViewTable/DataViewTable.tsx +37 -0
  128. package/src/DataViewTable/__snapshots__/DataViewTable.test.tsx.snap +1042 -0
  129. package/src/DataViewTable/index.ts +2 -0
  130. package/src/DataViewTableBasic/DataViewTableBasic.test.tsx +65 -0
  131. package/src/DataViewTableBasic/DataViewTableBasic.tsx +82 -0
  132. package/src/DataViewTableBasic/__snapshots__/DataViewTableBasic.test.tsx.snap +555 -0
  133. package/src/DataViewTableBasic/index.ts +2 -0
  134. package/src/DataViewTableHead/DataViewTableHead.test.tsx +50 -0
  135. package/src/DataViewTableHead/DataViewTableHead.tsx +53 -0
  136. package/src/DataViewTableHead/__snapshots__/DataViewTableHead.test.tsx.snap +227 -0
  137. package/src/DataViewTableHead/index.ts +2 -0
  138. package/src/DataViewTableTree/DataViewTableTree.test.tsx +113 -0
  139. package/src/DataViewTableTree/DataViewTableTree.tsx +164 -0
  140. package/src/DataViewTableTree/__snapshots__/DataViewTableTree.test.tsx.snap +1200 -0
  141. package/src/DataViewTableTree/index.ts +2 -0
  142. package/src/DataViewToolbar/DataViewToolbar.tsx +9 -2
  143. package/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap +8 -8
  144. package/src/Hooks/pagination.test.tsx +1 -1
  145. package/src/Hooks/pagination.ts +68 -12
  146. package/src/Hooks/selection.test.tsx +5 -5
  147. package/src/Hooks/selection.ts +6 -7
  148. package/src/InternalContext/InternalContext.test.tsx +89 -0
  149. package/src/InternalContext/InternalContext.tsx +51 -0
  150. package/src/InternalContext/index.ts +2 -0
  151. package/src/index.ts +18 -0
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import { render } from '@testing-library/react';
3
+ import { Table } from '@patternfly/react-table';
4
+ import { DataViewTableHead } from './DataViewTableHead';
5
+ import { DataView } from '../DataView';
6
+ const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
7
+ const ouiaId = 'HeaderExample';
8
+ describe('DataViewTableHead component', () => {
9
+ const mockSelection = {
10
+ onSelect: jest.fn(),
11
+ isSelected: jest.fn(),
12
+ isSelectDisabled: jest.fn(),
13
+ };
14
+ test('should render correctly', () => {
15
+ const { container } = render(React.createElement(Table, null,
16
+ React.createElement(DataViewTableHead, { columns: columns, ouiaId: ouiaId })));
17
+ expect(container).toMatchSnapshot();
18
+ });
19
+ test('should render the tree table correctly when isTreeTable is true', () => {
20
+ const { container } = render(React.createElement(DataView, { selection: mockSelection },
21
+ React.createElement(Table, null,
22
+ React.createElement(DataViewTableHead, { isTreeTable: true, columns: columns, ouiaId: ouiaId }))));
23
+ expect(container).toMatchSnapshot();
24
+ });
25
+ test('should render selection column when selection is provided', () => {
26
+ const { container } = render(React.createElement(DataView, { selection: mockSelection },
27
+ React.createElement(Table, null,
28
+ React.createElement(DataViewTableHead, { columns: columns, ouiaId: ouiaId }))));
29
+ expect(container).toMatchSnapshot();
30
+ });
31
+ });
@@ -0,0 +1,2 @@
1
+ export { default } from './DataViewTableHead';
2
+ export * from './DataViewTableHead';
@@ -0,0 +1,2 @@
1
+ export { default } from './DataViewTableHead';
2
+ export * from './DataViewTableHead';
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { TableProps } from '@patternfly/react-table';
3
+ import { DataViewTh, DataViewTrTree } from '../DataViewTable';
4
+ import { DataViewState } from '../DataView/DataView';
5
+ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
6
+ /** Columns definition */
7
+ columns: DataViewTh[];
8
+ /** Current page rows */
9
+ rows: DataViewTrTree[];
10
+ /** Table head states to be displayed when active */
11
+ headStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
12
+ /** Table body states to be displayed when active */
13
+ bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
14
+ /** Optional icon for the leaf rows */
15
+ leafIcon?: React.ReactNode;
16
+ /** Optional icon for the expanded parent rows */
17
+ expandedIcon?: React.ReactNode;
18
+ /** Optional icon for the collapsed parent rows */
19
+ collapsedIcon?: React.ReactNode;
20
+ /** Custom OUIA ID */
21
+ ouiaId?: string;
22
+ }
23
+ export declare const DataViewTableTree: React.FC<DataViewTableTreeProps>;
24
+ export default DataViewTableTree;
@@ -0,0 +1,105 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React, { useMemo } from 'react';
13
+ import { Table, Tbody, Td, TreeRowWrapper, } from '@patternfly/react-table';
14
+ import { useInternalContext } from '../InternalContext';
15
+ import { DataViewTableHead } from '../DataViewTableHead';
16
+ import { isDataViewTdObject } from '../DataViewTable';
17
+ const getDescendants = (node) => (!node.children || !node.children.length) ? [node] : node.children.flatMap(getDescendants);
18
+ const isNodeChecked = (node, isSelected) => {
19
+ let allSelected = true;
20
+ let someSelected = false;
21
+ for (const descendant of getDescendants(node)) {
22
+ const selected = !!(isSelected === null || isSelected === void 0 ? void 0 : isSelected(descendant));
23
+ someSelected || (someSelected = selected);
24
+ allSelected && (allSelected = selected);
25
+ if (!allSelected && someSelected) {
26
+ return null;
27
+ }
28
+ }
29
+ return allSelected;
30
+ };
31
+ export const DataViewTableTree = (_a) => {
32
+ var { columns, rows, headStates, bodyStates, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "headStates", "bodyStates", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
33
+ const { selection, activeState } = useInternalContext();
34
+ const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
35
+ const [expandedNodeIds, setExpandedNodeIds] = React.useState([]);
36
+ const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = React.useState([]);
37
+ const activeHeadState = useMemo(() => activeState ? headStates === null || headStates === void 0 ? void 0 : headStates[activeState] : undefined, [activeState, headStates]);
38
+ const activeBodyState = useMemo(() => activeState ? bodyStates === null || bodyStates === void 0 ? void 0 : bodyStates[activeState] : undefined, [activeState, bodyStates]);
39
+ const nodes = useMemo(() => {
40
+ const renderRows = ([node, ...remainingNodes], level = 1, posinset = 1, rowIndex = 0, isHidden = false) => {
41
+ var _a, _b, _c, _d;
42
+ if (!node) {
43
+ return [];
44
+ }
45
+ const isExpanded = expandedNodeIds.includes(node.id);
46
+ const isDetailsExpanded = expandedDetailsNodeNames.includes(node.id);
47
+ const isChecked = isSelected && isNodeChecked(node, isSelected);
48
+ let icon = leafIcon;
49
+ if (node.children) {
50
+ icon = isExpanded ? expandedIcon : collapsedIcon;
51
+ }
52
+ const treeRow = {
53
+ onCollapse: () => setExpandedNodeIds(prevExpanded => {
54
+ const otherExpandedNodeIds = prevExpanded.filter(id => id !== node.id);
55
+ return isExpanded ? otherExpandedNodeIds : [...otherExpandedNodeIds, node.id];
56
+ }),
57
+ onToggleRowDetails: () => setExpandedDetailsNodeIds(prevDetailsExpanded => {
58
+ const otherDetailsExpandedNodeIds = prevDetailsExpanded.filter(id => id !== node.id);
59
+ return isDetailsExpanded ? otherDetailsExpandedNodeIds : [...otherDetailsExpandedNodeIds, node.id];
60
+ }),
61
+ onCheckChange: ((isSelectDisabled === null || isSelectDisabled === void 0 ? void 0 : isSelectDisabled(node)) || !onSelect) ? undefined : (_event, isChecking) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(isChecking, getDescendants(node)),
62
+ rowIndex,
63
+ props: {
64
+ isExpanded,
65
+ isDetailsExpanded,
66
+ isHidden,
67
+ 'aria-level': level,
68
+ 'aria-posinset': posinset,
69
+ 'aria-setsize': (_b = (_a = node.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
70
+ isChecked,
71
+ checkboxId: `checkbox_id_${(_c = node.id) === null || _c === void 0 ? void 0 : _c.toLowerCase().replace(/\s+/g, '_')}`,
72
+ icon,
73
+ },
74
+ };
75
+ const childRows = ((_d = node.children) === null || _d === void 0 ? void 0 : _d.length)
76
+ ? renderRows(node.children, level + 1, 1, rowIndex + 1, !isExpanded || isHidden)
77
+ : [];
78
+ return [
79
+ React.createElement(TreeRowWrapper, { key: node.id, row: { props: treeRow.props }, ouiaId: `${ouiaId}-tr-${rowIndex}` }, node.row.map((cell, colIndex) => {
80
+ var _a;
81
+ const cellIsObject = isDataViewTdObject(cell);
82
+ return (React.createElement(Td, Object.assign({ key: colIndex, treeRow: colIndex === 0 ? treeRow : undefined }, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}` }), cellIsObject ? cell.cell : cell));
83
+ })),
84
+ ...childRows,
85
+ ...renderRows(remainingNodes, level, posinset + 1, rowIndex + 1 + childRows.length, isHidden),
86
+ ];
87
+ };
88
+ return renderRows(rows);
89
+ }, [
90
+ rows,
91
+ expandedNodeIds,
92
+ expandedDetailsNodeNames,
93
+ leafIcon,
94
+ expandedIcon,
95
+ collapsedIcon,
96
+ isSelected,
97
+ onSelect,
98
+ isSelectDisabled,
99
+ ouiaId
100
+ ]);
101
+ return (React.createElement(Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props),
102
+ activeHeadState || React.createElement(DataViewTableHead, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
103
+ activeBodyState || React.createElement(Tbody, null, nodes)));
104
+ };
105
+ export default DataViewTableTree;
@@ -0,0 +1,85 @@
1
+ import React from 'react';
2
+ import { render } from '@testing-library/react';
3
+ import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
4
+ import { DataView } from '../DataView';
5
+ import { DataViewTable } from '../DataViewTable';
6
+ const repositories = [
7
+ {
8
+ name: 'Repository one',
9
+ branches: 'Branch one',
10
+ prs: 'Pull request one',
11
+ workspaces: 'Workspace one',
12
+ lastCommit: 'Timestamp one',
13
+ children: [
14
+ {
15
+ name: 'Repository two',
16
+ branches: 'Branch two',
17
+ prs: 'Pull request two',
18
+ workspaces: 'Workspace two',
19
+ lastCommit: 'Timestamp two',
20
+ },
21
+ {
22
+ name: 'Repository three',
23
+ branches: 'Branch three',
24
+ prs: 'Pull request three',
25
+ workspaces: 'Workspace three',
26
+ lastCommit: 'Timestamp three',
27
+ },
28
+ ],
29
+ },
30
+ {
31
+ name: 'Repository four',
32
+ branches: 'Branch four',
33
+ prs: 'Pull request four',
34
+ workspaces: 'Workspace four',
35
+ lastCommit: 'Timestamp four',
36
+ children: [
37
+ {
38
+ name: 'Repository five',
39
+ branches: 'Branch five',
40
+ prs: 'Pull request five',
41
+ workspaces: 'Workspace five',
42
+ lastCommit: 'Timestamp five',
43
+ },
44
+ ],
45
+ },
46
+ {
47
+ name: 'Repository six',
48
+ branches: 'Branch six',
49
+ prs: 'Pull request six',
50
+ workspaces: 'Workspace six',
51
+ lastCommit: 'Timestamp six',
52
+ },
53
+ ];
54
+ // Build rows for DataViewTable
55
+ const buildRows = (repositories) => repositories.map((repo) => (Object.assign({ row: [repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit], id: repo.name }, (repo.children ? { children: buildRows(repo.children) } : {}))));
56
+ const rows = buildRows(repositories);
57
+ const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
58
+ const ouiaId = 'TreeTableExample';
59
+ describe('DataViewTableTree component', () => {
60
+ const mockSelection = {
61
+ onSelect: jest.fn(),
62
+ isSelected: jest.fn(),
63
+ isSelectDisabled: jest.fn(),
64
+ };
65
+ test('should render the tree table correctly', () => {
66
+ const { container } = render(React.createElement(DataView, { selection: mockSelection },
67
+ React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows, leafIcon: React.createElement(LeafIcon, null), expandedIcon: React.createElement(FolderOpenIcon, { "aria-hidden": true }), collapsedIcon: React.createElement(FolderIcon, { "aria-hidden": true }) })));
68
+ expect(container).toMatchSnapshot();
69
+ });
70
+ test('should render tree table with an empty state', () => {
71
+ const { container } = render(React.createElement(DataView, { activeState: "empty" },
72
+ React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { empty: "No data found" }, rows: [] })));
73
+ expect(container).toMatchSnapshot();
74
+ });
75
+ test('should render tree table with an error state', () => {
76
+ const { container } = render(React.createElement(DataView, { activeState: "error" },
77
+ React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { error: "Some error" }, rows: [] })));
78
+ expect(container).toMatchSnapshot();
79
+ });
80
+ test('should render tree table with a loading state', () => {
81
+ const { container } = render(React.createElement(DataView, { activeState: "loading" },
82
+ React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] })));
83
+ expect(container).toMatchSnapshot();
84
+ });
85
+ });
@@ -0,0 +1,2 @@
1
+ export { default } from './DataViewTableTree';
2
+ export * from './DataViewTableTree';
@@ -0,0 +1,2 @@
1
+ export { default } from './DataViewTableTree';
2
+ export * from './DataViewTableTree';
@@ -8,6 +8,8 @@ export interface DataViewToolbarProps extends PropsWithChildren {
8
8
  bulkSelect?: React.ReactNode;
9
9
  /** React component to display pagination */
10
10
  pagination?: React.ReactNode;
11
+ /** React component to display actions */
12
+ actions?: React.ReactNode;
11
13
  }
12
14
  export declare const DataViewToolbar: React.FC<DataViewToolbarProps>;
13
15
  export default DataViewToolbar;
@@ -12,10 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import React from 'react';
13
13
  import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
14
14
  export const DataViewToolbar = (_a) => {
15
- var { className, ouiaId = 'DataViewToolbar', bulkSelect, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "pagination", "children"]);
15
+ var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "children"]);
16
16
  return (React.createElement(Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, props),
17
17
  React.createElement(ToolbarContent, null,
18
18
  bulkSelect && (React.createElement(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
19
+ actions && (React.createElement(ToolbarItem, null, actions)),
19
20
  pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
20
21
  children)));
21
22
  };
@@ -3,12 +3,24 @@ export interface UseDataViewPaginationProps {
3
3
  page?: number;
4
4
  /** Items per page */
5
5
  perPage: number;
6
+ /** Current search parameters as a string */
7
+ searchParams?: URLSearchParams;
8
+ /** Function to set search parameters */
9
+ setSearchParams?: (params: URLSearchParams) => void;
10
+ /** Custom URL parameter name for page */
11
+ pageParam?: string;
12
+ /** Custom URL parameter name for per page */
13
+ perPageParam?: string;
6
14
  }
7
15
  export interface DataViewPaginationProps extends UseDataViewPaginationProps {
8
16
  /** Current page number */
9
17
  page: number;
10
18
  }
11
- export declare const useDataViewPagination: ({ page, perPage }: UseDataViewPaginationProps) => {
19
+ export declare enum PaginationParams {
20
+ PAGE = "page",
21
+ PER_PAGE = "perPage"
22
+ }
23
+ export declare const useDataViewPagination: ({ page, perPage, searchParams, setSearchParams, pageParam, perPageParam, }: UseDataViewPaginationProps) => {
12
24
  onPerPageSelect: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => void;
13
25
  onSetPage: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => void;
14
26
  page: number;
@@ -1,10 +1,42 @@
1
- import { useState } from "react";
2
- export const useDataViewPagination = ({ page = 1, perPage }) => {
3
- const [state, setState] = useState({ page, perPage });
1
+ import { useEffect, useState } from "react";
2
+ export var PaginationParams;
3
+ (function (PaginationParams) {
4
+ PaginationParams["PAGE"] = "page";
5
+ PaginationParams["PER_PAGE"] = "perPage";
6
+ })(PaginationParams || (PaginationParams = {}));
7
+ export const useDataViewPagination = ({ page = 1, perPage, searchParams, setSearchParams, pageParam = PaginationParams.PAGE, perPageParam = PaginationParams.PER_PAGE, }) => {
8
+ const [state, setState] = useState({
9
+ page: parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(pageParam)) || `${page}`),
10
+ perPage: parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(perPageParam)) || `${perPage}`),
11
+ });
12
+ const updateSearchParams = (page, perPage) => {
13
+ if (searchParams && setSearchParams) {
14
+ const params = new URLSearchParams(searchParams);
15
+ params.set(pageParam, `${page}`);
16
+ params.set(perPageParam, `${perPage}`);
17
+ setSearchParams(params);
18
+ }
19
+ };
20
+ useEffect(() => {
21
+ // Make sure search params are loaded or set if not present on mount
22
+ updateSearchParams(state.page, state.perPage);
23
+ // eslint-disable-next-line react-hooks/exhaustive-deps
24
+ }, []);
25
+ useEffect(() => {
26
+ // Listen on URL params changes
27
+ const currentPage = parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(pageParam)) || `${state.page}`);
28
+ const currentPerPage = parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(perPageParam)) || `${state.perPage}`);
29
+ if (currentPage !== state.page || currentPerPage !== state.perPage) {
30
+ setState({ page: currentPage, perPage: currentPerPage });
31
+ }
32
+ // eslint-disable-next-line react-hooks/exhaustive-deps
33
+ }, [searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString()]);
4
34
  const onPerPageSelect = (_event, newPerPage) => {
5
- setState(prev => (Object.assign(Object.assign({}, prev), { perPage: newPerPage })));
35
+ updateSearchParams(1, newPerPage);
36
+ setState({ perPage: newPerPage, page: 1 });
6
37
  };
7
38
  const onSetPage = (_event, newPage) => {
39
+ updateSearchParams(newPage, state.perPage);
8
40
  setState(prev => (Object.assign(Object.assign({}, prev), { page: newPage })));
9
41
  };
10
42
  return Object.assign(Object.assign({}, state), { onPerPageSelect,
@@ -40,7 +40,7 @@ describe('useDataViewPagination', () => {
40
40
  expect(result.current).toEqual({
41
41
  onPerPageSelect: expect.any(Function),
42
42
  onSetPage: expect.any(Function),
43
- page: 3,
43
+ page: 1,
44
44
  perPage: 50
45
45
  });
46
46
  });
@@ -1,10 +1,10 @@
1
1
  export interface UseDataViewSelectionProps {
2
+ /** Function to compare items when checking if item is selected */
3
+ matchOption: (item: any, another: any) => boolean;
2
4
  /** Array of initially selected entries */
3
5
  initialSelected?: (any)[];
4
- /** Function to compare items when checking if entry is selected */
5
- matchOption?: (item: any, another: any) => boolean;
6
6
  }
7
- export declare const useDataViewSelection: (props: UseDataViewSelectionProps) => {
7
+ export declare const useDataViewSelection: ({ matchOption, initialSelected }: UseDataViewSelectionProps) => {
8
8
  selected: any[];
9
9
  onSelect: (isSelecting: boolean, items?: any[] | any) => void;
10
10
  isSelected: (item: any) => boolean;
@@ -1,11 +1,9 @@
1
1
  /* eslint-disable @typescript-eslint/no-explicit-any */
2
2
  import { useState } from "react";
3
- export const useDataViewSelection = (props) => {
4
- var _a;
5
- const [selected, setSelected] = useState((_a = props.initialSelected) !== null && _a !== void 0 ? _a : []);
6
- const matchOption = props.matchOption ? props.matchOption : (option, another) => (option === another);
3
+ export const useDataViewSelection = ({ matchOption, initialSelected = [] }) => {
4
+ const [selected, setSelected] = useState(initialSelected);
7
5
  const onSelect = (isSelecting, items) => {
8
- isSelecting ?
6
+ isSelecting && items ?
9
7
  setSelected(prev => {
10
8
  const newSelectedItems = [...prev];
11
9
  (Array.isArray(items) ? items : [items]).forEach(newItem => !prev.some(prevItem => matchOption(prevItem, newItem)) && newSelectedItems.push(newItem));
@@ -13,7 +11,7 @@ export const useDataViewSelection = (props) => {
13
11
  })
14
12
  : setSelected(items ? prev => prev.filter(prevSelected => !(Array.isArray(items) ? items : [items]).some(item => matchOption(item, prevSelected))) : []);
15
13
  };
16
- const isSelected = (item) => (props === null || props === void 0 ? void 0 : props.matchOption) ? Boolean(selected.find(selected => matchOption(selected, item))) : selected.includes(item);
14
+ const isSelected = (item) => Boolean(selected.find(selected => matchOption(selected, item)));
17
15
  return {
18
16
  selected,
19
17
  onSelect,
@@ -12,7 +12,7 @@ import { renderHook, act } from '@testing-library/react';
12
12
  import { useDataViewSelection } from './selection';
13
13
  describe('useDataViewSelection', () => {
14
14
  it('should get initial state correctly - no initialSelected', () => {
15
- const { result } = renderHook(() => useDataViewSelection({}));
15
+ const { result } = renderHook(() => useDataViewSelection({ matchOption: (a, b) => a.id === b.id }));
16
16
  expect(result.current).toEqual({
17
17
  selected: [],
18
18
  onSelect: expect.any(Function),
@@ -21,7 +21,7 @@ describe('useDataViewSelection', () => {
21
21
  });
22
22
  it('should get initial state correctly - with initialSelected', () => {
23
23
  const initialSelected = [{ id: 1, name: 'test1' }];
24
- const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
24
+ const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }));
25
25
  expect(result.current).toEqual({
26
26
  selected: initialSelected,
27
27
  onSelect: expect.any(Function),
@@ -30,7 +30,7 @@ describe('useDataViewSelection', () => {
30
30
  });
31
31
  it('should select items correctly - objects', () => __awaiter(void 0, void 0, void 0, function* () {
32
32
  const initialSelected = [{ id: 1, name: 'test1' }];
33
- const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
33
+ const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }));
34
34
  yield act(() => __awaiter(void 0, void 0, void 0, function* () {
35
35
  result.current.onSelect(true, { id: 2, name: 'test2' });
36
36
  }));
@@ -38,7 +38,7 @@ describe('useDataViewSelection', () => {
38
38
  }));
39
39
  it('should deselect items correctly - strings', () => __awaiter(void 0, void 0, void 0, function* () {
40
40
  const initialSelected = ['test1', 'test2'];
41
- const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
41
+ const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a === b }));
42
42
  yield act(() => __awaiter(void 0, void 0, void 0, function* () {
43
43
  result.current.onSelect(false, 'test2');
44
44
  }));
@@ -0,0 +1,25 @@
1
+ import React, { PropsWithChildren } from 'react';
2
+ import { DataViewState } from '../DataView';
3
+ export interface DataViewSelection {
4
+ /** Called when the selection of items changes */
5
+ onSelect: (isSelecting: boolean, items?: any[] | any) => void;
6
+ /** Checks if a specific item is currently selected */
7
+ isSelected: (item: any) => boolean;
8
+ /** Determines if selection is disabled for a given item */
9
+ isSelectDisabled?: (item: any) => boolean;
10
+ }
11
+ export interface InternalContextProps {
12
+ /** Data selection props */
13
+ selection?: DataViewSelection;
14
+ /** Currently active state */
15
+ activeState?: DataViewState | string;
16
+ }
17
+ export interface InternalContextValue extends InternalContextProps {
18
+ /** Flag indicating if data view is selectable (auto-calculated) */
19
+ isSelectable: boolean;
20
+ }
21
+ export declare const InternalContext: React.Context<InternalContextValue>;
22
+ export type InternalProviderProps = PropsWithChildren<InternalContextProps>;
23
+ export declare const InternalContextProvider: React.FC<InternalProviderProps>;
24
+ export declare const useInternalContext: () => InternalContextValue;
25
+ export default InternalContext;
@@ -0,0 +1,12 @@
1
+ import React, { createContext, useContext, useMemo } from 'react';
2
+ export const InternalContext = createContext({
3
+ selection: undefined,
4
+ activeState: undefined,
5
+ isSelectable: false,
6
+ });
7
+ export const InternalContextProvider = ({ children, selection, activeState }) => {
8
+ const isSelectable = useMemo(() => Boolean((selection === null || selection === void 0 ? void 0 : selection.onSelect) && (selection === null || selection === void 0 ? void 0 : selection.isSelected)), [selection === null || selection === void 0 ? void 0 : selection.onSelect, selection === null || selection === void 0 ? void 0 : selection.isSelected]);
9
+ return (React.createElement(InternalContext.Provider, { value: { selection, activeState, isSelectable } }, children));
10
+ };
11
+ export const useInternalContext = () => useContext(InternalContext);
12
+ export default InternalContext;
@@ -0,0 +1 @@
1
+ import '@testing-library/jest-dom';
@@ -0,0 +1,51 @@
1
+ import React from 'react';
2
+ import { render, fireEvent } from '@testing-library/react';
3
+ import '@testing-library/jest-dom';
4
+ import { useInternalContext } from './InternalContext';
5
+ import { DataView } from '../DataView';
6
+ describe('InternalContext', () => {
7
+ const mockSelection = {
8
+ onSelect: jest.fn(),
9
+ isSelected: jest.fn(),
10
+ isSelectDisabled: jest.fn(),
11
+ };
12
+ test('should provide context value and allow consuming it', () => {
13
+ const TestComponent = () => {
14
+ const { selection } = useInternalContext();
15
+ return (React.createElement("div", null,
16
+ React.createElement("button", { onClick: () => selection === null || selection === void 0 ? void 0 : selection.onSelect(true, ['item1']) }, "Select item"),
17
+ React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Selected' : 'Not selected')));
18
+ };
19
+ const { getByText } = render(React.createElement(DataView, { selection: mockSelection },
20
+ React.createElement(TestComponent, null)));
21
+ fireEvent.click(getByText('Select item'));
22
+ expect(mockSelection.onSelect).toHaveBeenCalledWith(true, ['item1']);
23
+ });
24
+ test('should handle selection state correctly', () => {
25
+ const mockSelectionState = Object.assign(Object.assign({}, mockSelection), { isSelected: jest.fn((item) => item === 'item1') });
26
+ const TestComponent = () => {
27
+ const { selection } = useInternalContext();
28
+ return (React.createElement("div", null,
29
+ React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Item 1 is selected' : 'Item 1 is not selected'),
30
+ React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item2')) ? 'Item 2 is selected' : 'Item 2 is not selected')));
31
+ };
32
+ const { getByText } = render(React.createElement(DataView, { selection: mockSelectionState },
33
+ React.createElement(TestComponent, null)));
34
+ expect(getByText('Item 1 is selected')).toBeInTheDocument();
35
+ expect(getByText('Item 2 is not selected')).toBeInTheDocument();
36
+ });
37
+ test('should handle selection disabled correctly', () => {
38
+ const mockSelectionWithDisabled = Object.assign(Object.assign({}, mockSelection), { isSelectDisabled: jest.fn((item) => item === 'item3') });
39
+ const TestComponent = () => {
40
+ var _a, _b;
41
+ const { selection } = useInternalContext();
42
+ return (React.createElement("div", null,
43
+ React.createElement("span", null, ((_a = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _a === void 0 ? void 0 : _a.call(selection, 'item3')) ? 'Item 3 is disabled' : 'Item 3 is enabled'),
44
+ React.createElement("span", null, ((_b = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _b === void 0 ? void 0 : _b.call(selection, 'item1')) ? 'Item 1 is disabled' : 'Item 1 is enabled')));
45
+ };
46
+ const { getByText } = render(React.createElement(DataView, { selection: mockSelectionWithDisabled },
47
+ React.createElement(TestComponent, null)));
48
+ expect(getByText('Item 3 is disabled')).toBeInTheDocument();
49
+ expect(getByText('Item 1 is enabled')).toBeInTheDocument();
50
+ });
51
+ });
@@ -0,0 +1,2 @@
1
+ export { default } from './InternalContext';
2
+ export * from './InternalContext';
@@ -0,0 +1,2 @@
1
+ export { default } from './InternalContext';
2
+ export * from './InternalContext';
@@ -1,5 +1,17 @@
1
+ export { default as InternalContext } from './InternalContext';
2
+ export * from './InternalContext';
1
3
  export * from './Hooks';
2
4
  export { default as DataViewToolbar } from './DataViewToolbar';
3
5
  export * from './DataViewToolbar';
6
+ export { default as DataViewTableTree } from './DataViewTableTree';
7
+ export * from './DataViewTableTree';
8
+ export { default as DataViewTableHead } from './DataViewTableHead';
9
+ export * from './DataViewTableHead';
10
+ export { default as DataViewTableBasic } from './DataViewTableBasic';
11
+ export * from './DataViewTableBasic';
12
+ export { default as DataViewTable } from './DataViewTable';
13
+ export * from './DataViewTable';
14
+ export { default as DataViewEventsContext } from './DataViewEventsContext';
15
+ export * from './DataViewEventsContext';
4
16
  export { default as DataView } from './DataView';
5
17
  export * from './DataView';
package/dist/esm/index.js CHANGED
@@ -1,6 +1,18 @@
1
1
  // this file is autogenerated by generate-index.js, modifying it manually will have no effect
2
+ export { default as InternalContext } from './InternalContext';
3
+ export * from './InternalContext';
2
4
  export * from './Hooks';
3
5
  export { default as DataViewToolbar } from './DataViewToolbar';
4
6
  export * from './DataViewToolbar';
7
+ export { default as DataViewTableTree } from './DataViewTableTree';
8
+ export * from './DataViewTableTree';
9
+ export { default as DataViewTableHead } from './DataViewTableHead';
10
+ export * from './DataViewTableHead';
11
+ export { default as DataViewTableBasic } from './DataViewTableBasic';
12
+ export * from './DataViewTableBasic';
13
+ export { default as DataViewTable } from './DataViewTable';
14
+ export * from './DataViewTable';
15
+ export { default as DataViewEventsContext } from './DataViewEventsContext';
16
+ export * from './DataViewEventsContext';
5
17
  export { default as DataView } from './DataView';
6
18
  export * from './DataView';
@@ -0,0 +1 @@
1
+ {"root":["../src/index.ts","../src/DataView/DataView.test.tsx","../src/DataView/DataView.tsx","../src/DataView/index.ts","../src/DataViewEventsContext/DataViewEventsContext.test.tsx","../src/DataViewEventsContext/DataViewEventsContext.tsx","../src/DataViewEventsContext/index.ts","../src/DataViewTable/DataViewTable.test.tsx","../src/DataViewTable/DataViewTable.tsx","../src/DataViewTable/index.ts","../src/DataViewTableBasic/DataViewTableBasic.test.tsx","../src/DataViewTableBasic/DataViewTableBasic.tsx","../src/DataViewTableBasic/index.ts","../src/DataViewTableHead/DataViewTableHead.test.tsx","../src/DataViewTableHead/DataViewTableHead.tsx","../src/DataViewTableHead/index.ts","../src/DataViewTableTree/DataViewTableTree.test.tsx","../src/DataViewTableTree/DataViewTableTree.tsx","../src/DataViewTableTree/index.ts","../src/DataViewToolbar/DataViewToolbar.test.tsx","../src/DataViewToolbar/DataViewToolbar.tsx","../src/DataViewToolbar/index.ts","../src/Hooks/index.ts","../src/Hooks/pagination.test.tsx","../src/Hooks/pagination.ts","../src/Hooks/selection.test.tsx","../src/Hooks/selection.ts","../src/InternalContext/InternalContext.test.tsx","../src/InternalContext/InternalContext.tsx","../src/InternalContext/index.ts"],"version":"5.6.3"}