@patternfly/react-core 4.251.4 → 4.252.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.
- package/CHANGELOG.md +11 -0
- package/dist/esm/components/DataList/DataListToggle.d.ts +3 -0
- package/dist/esm/components/DataList/DataListToggle.d.ts.map +1 -1
- package/dist/esm/components/DataList/DataListToggle.js +2 -2
- package/dist/esm/components/DataList/DataListToggle.js.map +1 -1
- package/dist/js/components/DataList/DataListToggle.d.ts +3 -0
- package/dist/js/components/DataList/DataListToggle.d.ts.map +1 -1
- package/dist/js/components/DataList/DataListToggle.js +2 -2
- package/dist/js/components/DataList/DataListToggle.js.map +1 -1
- package/dist/umd/react-core.min.css +642 -635
- package/dist/umd/react-core.min.js +2 -2
- package/package.json +6 -6
- package/src/components/DataList/DataListToggle.tsx +5 -1
- package/src/components/DataList/examples/DataList.md +5 -0
- package/src/components/DataList/examples/DataListMixedExpandable.tsx +234 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-core",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.252.0",
|
|
4
4
|
"description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -44,16 +44,16 @@
|
|
|
44
44
|
"generate": "node scripts/copyStyles.js"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@patternfly/react-icons": "^4.92.
|
|
48
|
-
"@patternfly/react-styles": "^4.91.
|
|
49
|
-
"@patternfly/react-tokens": "^4.93.
|
|
47
|
+
"@patternfly/react-icons": "^4.92.8",
|
|
48
|
+
"@patternfly/react-styles": "^4.91.8",
|
|
49
|
+
"@patternfly/react-tokens": "^4.93.8",
|
|
50
50
|
"focus-trap": "6.9.2",
|
|
51
51
|
"react-dropzone": "9.0.0",
|
|
52
52
|
"tippy.js": "5.1.2",
|
|
53
53
|
"tslib": "^2.0.0"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@patternfly/patternfly": "4.
|
|
56
|
+
"@patternfly/patternfly": "4.219.0",
|
|
57
57
|
"@rollup/plugin-commonjs": "^21.0.0",
|
|
58
58
|
"@rollup/plugin-node-resolve": "^13.0.0",
|
|
59
59
|
"@rollup/plugin-replace": "^3.0.0",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"react": "^16.8 || ^17 || ^18",
|
|
71
71
|
"react-dom": "^16.8 || ^17 || ^18"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "d68f302609a6abf8da34d1c33b153f604d6b329d"
|
|
74
74
|
}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { css } from '@patternfly/react-styles';
|
|
3
3
|
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
|
|
4
4
|
import styles from '@patternfly/react-styles/css/components/DataList/data-list';
|
|
5
|
-
import { Button, ButtonVariant } from '../Button';
|
|
5
|
+
import { Button, ButtonProps, ButtonVariant } from '../Button';
|
|
6
6
|
|
|
7
7
|
export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
|
|
8
8
|
/** Additional classes added to the DataList cell */
|
|
@@ -19,6 +19,8 @@ export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
|
|
|
19
19
|
'aria-label'?: string;
|
|
20
20
|
/** Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them. */
|
|
21
21
|
'aria-controls'?: string;
|
|
22
|
+
/** Additional properties spread to the toggle button */
|
|
23
|
+
buttonProps?: ButtonProps;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
|
|
@@ -28,6 +30,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
|
|
|
28
30
|
'aria-label': ariaLabel = 'Details',
|
|
29
31
|
rowid = '',
|
|
30
32
|
id,
|
|
33
|
+
buttonProps,
|
|
31
34
|
...props
|
|
32
35
|
}: DataListToggleProps) => (
|
|
33
36
|
<div className={css(styles.dataListItemControl, className)} {...props}>
|
|
@@ -39,6 +42,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
|
|
|
39
42
|
aria-label={ariaLabel}
|
|
40
43
|
aria-labelledby={ariaLabel !== 'Details' ? null : `${rowid} ${id}`}
|
|
41
44
|
aria-expanded={isExpanded}
|
|
45
|
+
{...buttonProps}
|
|
42
46
|
>
|
|
43
47
|
<div className={css(styles.dataListToggleIcon)}>
|
|
44
48
|
<AngleRightIcon />
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
DataList,
|
|
4
|
+
DataListItem,
|
|
5
|
+
DataListItemRow,
|
|
6
|
+
DataListCell,
|
|
7
|
+
DataListAction,
|
|
8
|
+
DataListToggle,
|
|
9
|
+
DataListContent,
|
|
10
|
+
DataListItemCells,
|
|
11
|
+
Dropdown,
|
|
12
|
+
DropdownItem,
|
|
13
|
+
DropdownPosition,
|
|
14
|
+
KebabToggle
|
|
15
|
+
} from '@patternfly/react-core';
|
|
16
|
+
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
|
|
17
|
+
|
|
18
|
+
export const DataListMixedExpandable: React.FunctionComponent = () => {
|
|
19
|
+
const [isOpen1, setIsOpen1] = React.useState(false);
|
|
20
|
+
const [isOpen2, setIsOpen2] = React.useState(false);
|
|
21
|
+
const [isOpen3, setIsOpen3] = React.useState(false);
|
|
22
|
+
const [expanded, setExpanded] = React.useState(['m-ex-toggle1', 'm-ex-toggle3']);
|
|
23
|
+
|
|
24
|
+
const onToggle1 = isOpen1 => {
|
|
25
|
+
setIsOpen1(isOpen1);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
const onSelect1 = () => {
|
|
29
|
+
setIsOpen1(!isOpen1);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const onToggle2 = isOpen2 => {
|
|
33
|
+
setIsOpen2(isOpen2);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const onSelect2 = () => {
|
|
37
|
+
setIsOpen2(!isOpen2);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const onToggle3 = isOpen3 => {
|
|
41
|
+
setIsOpen3(isOpen3);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const onSelect3 = () => {
|
|
45
|
+
setIsOpen3(!isOpen3);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const toggle = id => {
|
|
49
|
+
const index = expanded.indexOf(id);
|
|
50
|
+
const newExpanded =
|
|
51
|
+
index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
|
|
52
|
+
setExpanded(newExpanded);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
return (
|
|
56
|
+
<React.Fragment>
|
|
57
|
+
<DataList aria-label="Mixed expandable data list example">
|
|
58
|
+
<DataListItem aria-labelledby="m-ex-item1" isExpanded={expanded.includes('m-ex-toggle1')}>
|
|
59
|
+
<DataListItemRow>
|
|
60
|
+
<DataListToggle
|
|
61
|
+
onClick={() => toggle('m-ex-toggle1')}
|
|
62
|
+
isExpanded={expanded.includes('m-ex-toggle1')}
|
|
63
|
+
id="m-ex-toggle1"
|
|
64
|
+
aria-controls="m-ex-expand1"
|
|
65
|
+
/>
|
|
66
|
+
<DataListItemCells
|
|
67
|
+
dataListCells={[
|
|
68
|
+
<DataListCell isIcon key="icon">
|
|
69
|
+
<CodeBranchIcon />
|
|
70
|
+
</DataListCell>,
|
|
71
|
+
<DataListCell key="primary content">
|
|
72
|
+
<div id="m-ex-item1">Primary content</div>
|
|
73
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
74
|
+
<a href="#">link</a>
|
|
75
|
+
</DataListCell>,
|
|
76
|
+
<DataListCell key="secondary content">
|
|
77
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
78
|
+
</DataListCell>,
|
|
79
|
+
<DataListCell key="secondary content 2">
|
|
80
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
81
|
+
</DataListCell>
|
|
82
|
+
]}
|
|
83
|
+
/>
|
|
84
|
+
<DataListAction
|
|
85
|
+
aria-labelledby="m-ex-item1 m-ex-action1"
|
|
86
|
+
id="m-ex-action1"
|
|
87
|
+
aria-label="Actions"
|
|
88
|
+
isPlainButtonAction
|
|
89
|
+
>
|
|
90
|
+
<Dropdown
|
|
91
|
+
isPlain
|
|
92
|
+
position={DropdownPosition.right}
|
|
93
|
+
isOpen={isOpen1}
|
|
94
|
+
onSelect={onSelect1}
|
|
95
|
+
toggle={<KebabToggle onToggle={onToggle1} />}
|
|
96
|
+
dropdownItems={[
|
|
97
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
98
|
+
<DropdownItem key="action" component="button">
|
|
99
|
+
Action
|
|
100
|
+
</DropdownItem>,
|
|
101
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
102
|
+
Disabled Link
|
|
103
|
+
</DropdownItem>
|
|
104
|
+
]}
|
|
105
|
+
/>
|
|
106
|
+
</DataListAction>
|
|
107
|
+
</DataListItemRow>
|
|
108
|
+
<DataListContent
|
|
109
|
+
aria-label="First expandable content details"
|
|
110
|
+
id="m-ex-expand1"
|
|
111
|
+
isHidden={!expanded.includes('m-ex-toggle1')}
|
|
112
|
+
>
|
|
113
|
+
<p>
|
|
114
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
|
|
115
|
+
dolore magna aliqua.
|
|
116
|
+
</p>
|
|
117
|
+
</DataListContent>
|
|
118
|
+
</DataListItem>
|
|
119
|
+
<DataListItem aria-labelledby="m-ex-item2">
|
|
120
|
+
<DataListItemRow>
|
|
121
|
+
<DataListToggle
|
|
122
|
+
id="m-ex-toggle2"
|
|
123
|
+
buttonProps={{
|
|
124
|
+
disabled: true,
|
|
125
|
+
'aria-hidden': 'true',
|
|
126
|
+
style: { visibility: 'hidden' }
|
|
127
|
+
}}
|
|
128
|
+
/>
|
|
129
|
+
<DataListItemCells
|
|
130
|
+
dataListCells={[
|
|
131
|
+
<DataListCell isIcon key="icon">
|
|
132
|
+
<CodeBranchIcon />
|
|
133
|
+
</DataListCell>,
|
|
134
|
+
<DataListCell key="secondary content">
|
|
135
|
+
<div id="m-ex-item2">Secondary content</div>
|
|
136
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
137
|
+
</DataListCell>,
|
|
138
|
+
<DataListCell key="secondary content 2">
|
|
139
|
+
<span>Lorem ipsum dolor sit amet.</span>
|
|
140
|
+
</DataListCell>,
|
|
141
|
+
<DataListCell key="secondary content3">
|
|
142
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
143
|
+
</DataListCell>
|
|
144
|
+
]}
|
|
145
|
+
/>
|
|
146
|
+
<DataListAction
|
|
147
|
+
aria-labelledby="m-ex-item2 mex-action2"
|
|
148
|
+
id="m-ex-action2"
|
|
149
|
+
aria-label="Actions"
|
|
150
|
+
isPlainButtonAction
|
|
151
|
+
>
|
|
152
|
+
<Dropdown
|
|
153
|
+
isPlain
|
|
154
|
+
position={DropdownPosition.right}
|
|
155
|
+
isOpen={isOpen2}
|
|
156
|
+
onSelect={onSelect2}
|
|
157
|
+
toggle={<KebabToggle onToggle={onToggle2} />}
|
|
158
|
+
dropdownItems={[
|
|
159
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
160
|
+
<DropdownItem key="action" component="button">
|
|
161
|
+
Action
|
|
162
|
+
</DropdownItem>,
|
|
163
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
164
|
+
Disabled Link
|
|
165
|
+
</DropdownItem>
|
|
166
|
+
]}
|
|
167
|
+
/>
|
|
168
|
+
</DataListAction>
|
|
169
|
+
</DataListItemRow>
|
|
170
|
+
</DataListItem>
|
|
171
|
+
<DataListItem aria-labelledby="m-ex-item3" isExpanded={expanded.includes('m-ex-toggle3')}>
|
|
172
|
+
<DataListItemRow>
|
|
173
|
+
<DataListToggle
|
|
174
|
+
onClick={() => toggle('m-ex-toggle3')}
|
|
175
|
+
isExpanded={expanded.includes('m-ex-toggle3')}
|
|
176
|
+
id="m-ex-toggle3"
|
|
177
|
+
aria-controls="m-ex-expand3"
|
|
178
|
+
/>
|
|
179
|
+
<DataListItemCells
|
|
180
|
+
dataListCells={[
|
|
181
|
+
<DataListCell isIcon key="icon">
|
|
182
|
+
<CodeBranchIcon />
|
|
183
|
+
</DataListCell>,
|
|
184
|
+
<DataListCell key="tertiary content">
|
|
185
|
+
<div id="m-ex-item3">Tertiary content</div>
|
|
186
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
187
|
+
</DataListCell>,
|
|
188
|
+
<DataListCell key="secondary content">
|
|
189
|
+
<span>Lorem ipsum dolor sit amet.</span>
|
|
190
|
+
</DataListCell>,
|
|
191
|
+
<DataListCell key="secondary content 2">
|
|
192
|
+
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
193
|
+
</DataListCell>
|
|
194
|
+
]}
|
|
195
|
+
/>
|
|
196
|
+
<DataListAction
|
|
197
|
+
aria-labelledby="m-ex-item3 m-ex-action3"
|
|
198
|
+
id="m-ex-action3"
|
|
199
|
+
aria-label="Actions"
|
|
200
|
+
isPlainButtonAction
|
|
201
|
+
>
|
|
202
|
+
<Dropdown
|
|
203
|
+
isPlain
|
|
204
|
+
position={DropdownPosition.right}
|
|
205
|
+
isOpen={isOpen3}
|
|
206
|
+
onSelect={onSelect3}
|
|
207
|
+
toggle={<KebabToggle onToggle={onToggle3} />}
|
|
208
|
+
dropdownItems={[
|
|
209
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
210
|
+
<DropdownItem key="action" component="button">
|
|
211
|
+
Action
|
|
212
|
+
</DropdownItem>,
|
|
213
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
214
|
+
Disabled Link
|
|
215
|
+
</DropdownItem>
|
|
216
|
+
]}
|
|
217
|
+
/>
|
|
218
|
+
</DataListAction>
|
|
219
|
+
</DataListItemRow>
|
|
220
|
+
<DataListContent
|
|
221
|
+
aria-label="Third expandable content details"
|
|
222
|
+
id="m-ex-expand3"
|
|
223
|
+
isHidden={!expanded.includes('m-ex-toggle3')}
|
|
224
|
+
>
|
|
225
|
+
<p>
|
|
226
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
|
|
227
|
+
dolore magna aliqua.
|
|
228
|
+
</p>
|
|
229
|
+
</DataListContent>
|
|
230
|
+
</DataListItem>
|
|
231
|
+
</DataList>
|
|
232
|
+
</React.Fragment>
|
|
233
|
+
);
|
|
234
|
+
};
|