@patternfly/react-data-view 5.2.0 → 5.3.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 (9) hide show
  1. package/dist/cjs/DataViewToolbar/DataViewToolbar.js +2 -2
  2. package/dist/esm/DataViewToolbar/DataViewToolbar.js +2 -2
  3. package/package.json +5 -5
  4. package/patternfly-docs/content/extensions/data-view/examples/Components/Components.md +13 -2
  5. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarActionsExample.tsx +27 -0
  6. package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx +4 -4
  7. package/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md +1 -2
  8. package/src/DataViewToolbar/DataViewToolbar.tsx +7 -3
  9. package/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap +86 -84
package/dist/cjs/DataViewToolbar/DataViewToolbar.js CHANGED
@@ -18,11 +18,11 @@ exports.DataViewToolbar = void 0;
18
18
  const react_1 = __importDefault(require("react"));
19
19
  const react_core_1 = require("@patternfly/react-core");
20
20
  const DataViewToolbar = (_a) => {
21
- var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions = null, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "children"]);
21
+ var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "children"]);
22
22
  return (react_1.default.createElement(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, props),
23
23
  react_1.default.createElement(react_core_1.ToolbarContent, null,
24
24
  bulkSelect && (react_1.default.createElement(react_core_1.ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
25
- actions,
25
+ actions && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant['overflow-menu'] }, actions)),
26
26
  pagination && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
27
27
  children)));
28
28
  };
package/dist/esm/DataViewToolbar/DataViewToolbar.js CHANGED
@@ -12,11 +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, actions = null, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "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,
19
+ actions && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant['overflow-menu'] }, actions)),
20
20
  pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
21
21
  children)));
22
22
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-data-view",
3
- "version": "5.2.0",
3
+ "version": "5.3.0",
4
4
  "description": "Data view used for Red Hat projects.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -30,10 +30,10 @@
30
30
  "access": "public"
31
31
  },
32
32
  "dependencies": {
33
- "@patternfly/react-core": "^5.3.3",
34
- "@patternfly/react-icons": "^5.3.1",
35
- "@patternfly/react-table": "^5.3.3",
36
- "@patternfly/react-component-groups": "^5.3.0-prerelease.2",
33
+ "@patternfly/react-core": "^5.4.1",
34
+ "@patternfly/react-icons": "^5.4.0",
35
+ "@patternfly/react-table": "^5.4.1",
36
+ "@patternfly/react-component-groups": "^5.5.2",
37
37
  "react-jss": "^10.10.0",
38
38
  "clsx": "^2.1.1"
39
39
  },
package/patternfly-docs/content/extensions/data-view/examples/Components/Components.md CHANGED
@@ -16,7 +16,7 @@ sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/mod
16
16
  ---
17
17
  import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
18
18
  import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
19
- import { BulkSelect, ErrorState } from '@patternfly/react-component-groups';
19
+ import { BulkSelect, ErrorState, ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups';
20
20
  import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
21
21
  import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
22
22
  import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
@@ -26,7 +26,7 @@ import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynami
26
26
 
27
27
  The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section.
28
28
 
29
- Data view toolbar can contain a `pagination`, `bulkSelect` or any other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
29
+ Data view toolbar can contain a `pagination`, `bulkSelect`, `actions` or other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
30
30
 
31
31
  ### Basic toolbar example
32
32
 
@@ -34,6 +34,17 @@ Data view toolbar can contain a `pagination`, `bulkSelect` or any other children
34
34
 
35
35
  ```
36
36
 
37
+ # Toolbar actions
38
+ Data view toolbar can display actions using the `actions` property accepting a React node. You can make use of a predefined [responsive actions](/extensions/component-groups/responsive-actions) component from the [component groups](/extensions/component-groups/about-component-groups) extension.
39
+
40
+ ### Actions configuration
41
+
42
+ ### Actions example
43
+
44
+ ```js file="./DataViewToolbarActionsExample.tsx"
45
+
46
+ ```
47
+
37
48
  ## Data view table
38
49
 
39
50
  The **data view table** component renders your columns and rows definition into a [table](/components/table) component.
package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarActionsExample.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import React from 'react';
2
+ import { Pagination } from '@patternfly/react-core';
3
+ import { BulkSelect, ResponsiveAction, ResponsiveActions } from '@patternfly/react-component-groups';
4
+ import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
5
+
6
+ export const BasicExample: React.FunctionComponent = () => (
7
+ <DataViewToolbar
8
+ bulkSelect={
9
+ <BulkSelect
10
+ selectedCount={0}
11
+ pageCount={5}
12
+ onSelect={() => null}
13
+ />
14
+ }
15
+ actions={
16
+ <ResponsiveActions breakpoint="lg" ouiaId="example-actions">
17
+ <ResponsiveAction isPersistent variant="primary">Persistent</ResponsiveAction>
18
+ <ResponsiveAction isPinned variant="secondary">Pinned</ResponsiveAction>
19
+ <ResponsiveAction>Action three</ResponsiveAction>
20
+ <ResponsiveAction>Action four</ResponsiveAction>
21
+ </ResponsiveActions>
22
+ }
23
+ pagination={
24
+ <Pagination page={1} perPage={10} />
25
+ }
26
+ />
27
+ )
package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewToolbarExample.tsx CHANGED
@@ -6,15 +6,15 @@ import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewTo
6
6
 
7
7
  export const BasicExample: React.FunctionComponent = () => (
8
8
  <DataViewToolbar
9
- pagination={
10
- <Pagination page={1} perPage={10} />
11
- }
12
9
  bulkSelect={
13
10
  <BulkSelect
14
11
  selectedCount={0}
15
12
  pageCount={5}
16
13
  onSelect={() => null}
17
14
  />
18
- }
15
+ }
16
+ pagination={
17
+ <Pagination page={1} perPage={10} />
18
+ }
19
19
  />
20
20
  )
package/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md CHANGED
@@ -62,7 +62,7 @@ This example uses the URL for persisting the pagination state.
62
62
  Allows to select data records inside the data view and show the selection state.
63
63
 
64
64
  ### Toolbar usage
65
- Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) from the [component groups](/extensions/component-groups/about-component-groups) extension.
65
+ Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) component from the [component groups](/extensions/component-groups/about-component-groups) extension.
66
66
 
67
67
  ### Selection state
68
68
 
@@ -84,4 +84,3 @@ The `useDataViewSelection` hook manages the selection state of the data view.
84
84
  ```js file="./SelectionExample.tsx"
85
85
 
86
86
  ```
87
-
package/src/DataViewToolbar/DataViewToolbar.tsx CHANGED
@@ -14,7 +14,7 @@ export interface DataViewToolbarProps extends PropsWithChildren {
14
14
  actions?: React.ReactNode;
15
15
  }
16
16
 
17
- export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions = null, pagination, children, ...props }: DataViewToolbarProps) => (
17
+ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, children, ...props }: DataViewToolbarProps) => (
18
18
  <Toolbar ouiaId={ouiaId} className={className} {...props}>
19
19
  <ToolbarContent>
20
20
  {bulkSelect && (
@@ -22,7 +22,11 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
22
22
  {bulkSelect}
23
23
  </ToolbarItem>
24
24
  )}
25
- {actions}
25
+ {actions && (
26
+ <ToolbarItem variant={ToolbarItemVariant['overflow-menu']}>
27
+ {actions}
28
+ </ToolbarItem>
29
+ )}
26
30
  {pagination && (
27
31
  <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
28
32
  {pagination}
@@ -31,7 +35,7 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
31
35
  {children}
32
36
  </ToolbarContent>
33
37
  </Toolbar>
34
- );
38
+ )
35
39
 
36
40
  export default DataViewToolbar;
37
41
 
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"