@carbon/react 1.39.0-rc.0 → 1.39.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/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +809 -666
- package/es/components/CodeSnippet/CodeSnippet.js +2 -2
- package/es/components/MultiSelect/MultiSelect.d.ts +24 -0
- package/es/components/MultiSelect/MultiSelect.js +26 -0
- package/es/components/StructuredList/StructuredList.Skeleton.d.ts +32 -0
- package/es/components/StructuredList/StructuredList.Skeleton.js +16 -26
- package/es/components/StructuredList/StructuredList.d.ts +271 -0
- package/es/components/StructuredList/StructuredList.js +14 -33
- package/es/components/StructuredList/index.d.ts +8 -0
- package/es/components/UIShell/SideNavDivider.js +2 -2
- package/es/index.js +2 -2
- package/lib/components/CodeSnippet/CodeSnippet.js +2 -2
- package/lib/components/MultiSelect/MultiSelect.d.ts +24 -0
- package/lib/components/MultiSelect/MultiSelect.js +26 -0
- package/lib/components/StructuredList/StructuredList.Skeleton.d.ts +32 -0
- package/lib/components/StructuredList/StructuredList.Skeleton.js +16 -26
- package/lib/components/StructuredList/StructuredList.d.ts +271 -0
- package/lib/components/StructuredList/StructuredList.js +14 -33
- package/lib/components/StructuredList/index.d.ts +8 -0
- package/lib/components/UIShell/SideNavDivider.js +2 -2
- package/lib/index.js +9 -9
- package/package.json +5 -5
|
@@ -21,7 +21,31 @@ interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<
|
|
|
21
21
|
selectedItems: ItemType[];
|
|
22
22
|
}
|
|
23
23
|
interface MultiSelectSortingProps<ItemType> {
|
|
24
|
+
/**
|
|
25
|
+
* Provide a compare function that is used to determine the ordering of
|
|
26
|
+
* options. See 'sortItems' for more control.
|
|
27
|
+
*/
|
|
24
28
|
compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
|
|
29
|
+
/**
|
|
30
|
+
* Provide a method that sorts all options in the control. Overriding this
|
|
31
|
+
* prop means that you also have to handle the sort logic for selected versus
|
|
32
|
+
* un-selected items. If you just want to control ordering, consider the
|
|
33
|
+
* `compareItems` prop instead.
|
|
34
|
+
*
|
|
35
|
+
* The return value should be a number whose sign indicates the relative order
|
|
36
|
+
* of the two elements: negative if a is less than b, positive if a is greater
|
|
37
|
+
* than b, and zero if they are equal.
|
|
38
|
+
*
|
|
39
|
+
* sortItems :
|
|
40
|
+
* (items: Array<Item>, {
|
|
41
|
+
* selectedItems: Array<Item>,
|
|
42
|
+
* itemToString: Item => string,
|
|
43
|
+
* compareItems: (itemA: string, itemB: string, {
|
|
44
|
+
* locale: string
|
|
45
|
+
* }) => number,
|
|
46
|
+
* locale: string,
|
|
47
|
+
* }) => Array<Item>
|
|
48
|
+
*/
|
|
25
49
|
sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
|
|
26
50
|
}
|
|
27
51
|
export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
|
|
@@ -401,6 +401,11 @@ MultiSelect.propTypes = {
|
|
|
401
401
|
* Specify the text that should be read for screen readers to clear selection.
|
|
402
402
|
*/
|
|
403
403
|
clearSelectionText: PropTypes__default["default"].string,
|
|
404
|
+
/**
|
|
405
|
+
* Provide a compare function that is used to determine the ordering of
|
|
406
|
+
* options. See 'sortItems' for more control.
|
|
407
|
+
*/
|
|
408
|
+
compareItems: PropTypes__default["default"].func.isRequired,
|
|
404
409
|
/**
|
|
405
410
|
* Specify the direction of the multiselect dropdown. Can be either top or bottom.
|
|
406
411
|
*/
|
|
@@ -502,6 +507,27 @@ MultiSelect.propTypes = {
|
|
|
502
507
|
* Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
|
|
503
508
|
*/
|
|
504
509
|
size: ListBoxPropTypes.ListBoxSize,
|
|
510
|
+
/**
|
|
511
|
+
* Provide a method that sorts all options in the control. Overriding this
|
|
512
|
+
* prop means that you also have to handle the sort logic for selected versus
|
|
513
|
+
* un-selected items. If you just want to control ordering, consider the
|
|
514
|
+
* `compareItems` prop instead.
|
|
515
|
+
*
|
|
516
|
+
* The return value should be a number whose sign indicates the relative order
|
|
517
|
+
* of the two elements: negative if a is less than b, positive if a is greater
|
|
518
|
+
* than b, and zero if they are equal.
|
|
519
|
+
*
|
|
520
|
+
* sortItems :
|
|
521
|
+
* (items: Array<Item>, {
|
|
522
|
+
* selectedItems: Array<Item>,
|
|
523
|
+
* itemToString: Item => string,
|
|
524
|
+
* compareItems: (itemA: string, itemB: string, {
|
|
525
|
+
* locale: string
|
|
526
|
+
* }) => number,
|
|
527
|
+
* locale: string,
|
|
528
|
+
* }) => Array<Item>
|
|
529
|
+
*/
|
|
530
|
+
sortItems: PropTypes__default["default"].func.isRequired,
|
|
505
531
|
/**
|
|
506
532
|
* Provide text to be used in a `<label>` element that is tied to the
|
|
507
533
|
* multiselect via ARIA attributes.
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
export interface StructuredListSkeletonProps {
|
|
10
|
+
/**
|
|
11
|
+
* Specify an optional className to add.
|
|
12
|
+
*/
|
|
13
|
+
className?: string;
|
|
14
|
+
/**
|
|
15
|
+
* number of table rows
|
|
16
|
+
*/
|
|
17
|
+
rowCount?: number;
|
|
18
|
+
}
|
|
19
|
+
declare function StructuredListSkeleton({ rowCount, className, ...rest }: StructuredListSkeletonProps): JSX.Element;
|
|
20
|
+
declare namespace StructuredListSkeleton {
|
|
21
|
+
var propTypes: {
|
|
22
|
+
/**
|
|
23
|
+
* Specify an optional className to add.
|
|
24
|
+
*/
|
|
25
|
+
className: PropTypes.Requireable<string>;
|
|
26
|
+
/**
|
|
27
|
+
* number of table rows
|
|
28
|
+
*/
|
|
29
|
+
rowCount: PropTypes.Requireable<number>;
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
export default StructuredListSkeleton;
|
|
@@ -22,32 +22,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
22
22
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
23
23
|
|
|
24
24
|
var _span, _span2, _span3;
|
|
25
|
-
|
|
25
|
+
function StructuredListSkeleton(_ref) {
|
|
26
26
|
let {
|
|
27
|
-
rowCount,
|
|
27
|
+
rowCount = 5,
|
|
28
28
|
className,
|
|
29
29
|
...rest
|
|
30
30
|
} = _ref;
|
|
31
31
|
const prefix = usePrefix.usePrefix();
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
44
|
-
className: `${prefix}--structured-list-td`
|
|
45
|
-
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46
|
-
className: `${prefix}--structured-list-td`
|
|
47
|
-
})));
|
|
48
|
-
}
|
|
32
|
+
const classNames = cx__default["default"](`${prefix}--skeleton`, `${prefix}--structured-list`, className);
|
|
33
|
+
const rows = new Array(rowCount).fill(null).map((_, i) => /*#__PURE__*/React__default["default"].createElement("div", {
|
|
34
|
+
className: `${prefix}--structured-list-row`,
|
|
35
|
+
key: i
|
|
36
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
37
|
+
className: `${prefix}--structured-list-td`
|
|
38
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
39
|
+
className: `${prefix}--structured-list-td`
|
|
40
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
41
|
+
className: `${prefix}--structured-list-td`
|
|
42
|
+
})));
|
|
49
43
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
|
|
50
|
-
className:
|
|
44
|
+
className: classNames
|
|
51
45
|
}, rest), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
52
46
|
className: `${prefix}--structured-list-thead`
|
|
53
47
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -61,7 +55,7 @@ const StructuredListSkeleton = _ref => {
|
|
|
61
55
|
}, _span3 || (_span3 = /*#__PURE__*/React__default["default"].createElement("span", null))))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
62
56
|
className: `${prefix}--structured-list-tbody`
|
|
63
57
|
}, rows));
|
|
64
|
-
}
|
|
58
|
+
}
|
|
65
59
|
StructuredListSkeleton.propTypes = {
|
|
66
60
|
/**
|
|
67
61
|
* Specify an optional className to add.
|
|
@@ -72,9 +66,5 @@ StructuredListSkeleton.propTypes = {
|
|
|
72
66
|
*/
|
|
73
67
|
rowCount: PropTypes__default["default"].number
|
|
74
68
|
};
|
|
75
|
-
StructuredListSkeleton.defaultProps = {
|
|
76
|
-
rowCount: 5
|
|
77
|
-
};
|
|
78
|
-
var StructuredListSkeleton$1 = StructuredListSkeleton;
|
|
79
69
|
|
|
80
|
-
exports["default"] = StructuredListSkeleton
|
|
70
|
+
exports["default"] = StructuredListSkeleton;
|
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { type HTMLAttributes, type ReactNode, type KeyboardEvent, type ChangeEvent, type MouseEvent } from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
type DivAttrs = HTMLAttributes<HTMLDivElement>;
|
|
10
|
+
export interface StructuredListWrapperProps extends DivAttrs {
|
|
11
|
+
/**
|
|
12
|
+
* Specify a label to be read by screen readers on the container node
|
|
13
|
+
*/
|
|
14
|
+
'aria-label'?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Provide the contents of your StructuredListWrapper
|
|
17
|
+
*/
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Specify an optional className to be applied to the container node
|
|
21
|
+
*/
|
|
22
|
+
className?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Specify if structured list is condensed, default is false
|
|
25
|
+
*/
|
|
26
|
+
isCondensed?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Specify if structured list is flush, default is false
|
|
29
|
+
*/
|
|
30
|
+
isFlush?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Specify whether your StructuredListWrapper should have selections
|
|
33
|
+
*/
|
|
34
|
+
selection?: boolean;
|
|
35
|
+
}
|
|
36
|
+
export declare function StructuredListWrapper(props: StructuredListWrapperProps): JSX.Element;
|
|
37
|
+
export declare namespace StructuredListWrapper {
|
|
38
|
+
var propTypes: {
|
|
39
|
+
/**
|
|
40
|
+
* Specify a label to be read by screen readers on the container node
|
|
41
|
+
*/
|
|
42
|
+
"aria-label": PropTypes.Requireable<string>;
|
|
43
|
+
/**
|
|
44
|
+
* Deprecated, please use `aria-label` instead.
|
|
45
|
+
* Specify a label to be read by screen readers on the container note.
|
|
46
|
+
*/
|
|
47
|
+
ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
|
|
48
|
+
/**
|
|
49
|
+
* Provide the contents of your StructuredListWrapper
|
|
50
|
+
*/
|
|
51
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
52
|
+
/**
|
|
53
|
+
* Specify an optional className to be applied to the container node
|
|
54
|
+
*/
|
|
55
|
+
className: PropTypes.Requireable<string>;
|
|
56
|
+
/**
|
|
57
|
+
* Specify if structured list is condensed, default is false
|
|
58
|
+
*/
|
|
59
|
+
isCondensed: PropTypes.Requireable<boolean>;
|
|
60
|
+
/**
|
|
61
|
+
* Specify if structured list is flush, not valid for selection variant, default is false
|
|
62
|
+
*/
|
|
63
|
+
isFlush: PropTypes.Requireable<boolean>;
|
|
64
|
+
/**
|
|
65
|
+
* Specify whether your StructuredListWrapper should have selections
|
|
66
|
+
*/
|
|
67
|
+
selection: PropTypes.Requireable<boolean>;
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
export interface StructuredListHeadProps extends DivAttrs {
|
|
71
|
+
/**
|
|
72
|
+
* Provide the contents of your StructuredListHead
|
|
73
|
+
*/
|
|
74
|
+
children?: ReactNode;
|
|
75
|
+
/**
|
|
76
|
+
* Specify an optional className to be applied to the node
|
|
77
|
+
*/
|
|
78
|
+
className?: string;
|
|
79
|
+
}
|
|
80
|
+
export declare function StructuredListHead(props: any): JSX.Element;
|
|
81
|
+
export declare namespace StructuredListHead {
|
|
82
|
+
var propTypes: {
|
|
83
|
+
/**
|
|
84
|
+
* Provide the contents of your StructuredListHead
|
|
85
|
+
*/
|
|
86
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
87
|
+
/**
|
|
88
|
+
* Specify an optional className to be applied to the node
|
|
89
|
+
*/
|
|
90
|
+
className: PropTypes.Requireable<string>;
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
export interface StructuredListBodyProps extends DivAttrs {
|
|
94
|
+
/**
|
|
95
|
+
* Provide the contents of your StructuredListBody
|
|
96
|
+
*/
|
|
97
|
+
children?: ReactNode;
|
|
98
|
+
/**
|
|
99
|
+
* Specify an optional className to be applied to the container node
|
|
100
|
+
*/
|
|
101
|
+
className?: string;
|
|
102
|
+
head?: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Provide a handler that is invoked on the key down event for the control
|
|
105
|
+
*/
|
|
106
|
+
onKeyDown?(event: KeyboardEvent): void;
|
|
107
|
+
}
|
|
108
|
+
export declare function StructuredListBody(props: StructuredListBodyProps): JSX.Element;
|
|
109
|
+
export declare namespace StructuredListBody {
|
|
110
|
+
var propTypes: {
|
|
111
|
+
/**
|
|
112
|
+
* Provide the contents of your StructuredListBody
|
|
113
|
+
*/
|
|
114
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
115
|
+
/**
|
|
116
|
+
* Specify an optional className to be applied to the container node
|
|
117
|
+
*/
|
|
118
|
+
className: PropTypes.Requireable<string>;
|
|
119
|
+
head: PropTypes.Requireable<boolean>;
|
|
120
|
+
/**
|
|
121
|
+
* Provide a handler that is invoked on the key down event for the control
|
|
122
|
+
*/
|
|
123
|
+
onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
export interface StructuredListRowProps extends DivAttrs {
|
|
127
|
+
/**
|
|
128
|
+
* Provide the contents of your StructuredListRow
|
|
129
|
+
*/
|
|
130
|
+
children?: ReactNode;
|
|
131
|
+
/**
|
|
132
|
+
* Specify an optional className to be applied to the container node
|
|
133
|
+
*/
|
|
134
|
+
className?: string;
|
|
135
|
+
/**
|
|
136
|
+
* Specify whether your StructuredListRow should be used as a header row
|
|
137
|
+
*/
|
|
138
|
+
head?: boolean;
|
|
139
|
+
/**
|
|
140
|
+
* Provide a handler that is invoked on the click
|
|
141
|
+
*/
|
|
142
|
+
onClick?(event: MouseEvent): void;
|
|
143
|
+
/**
|
|
144
|
+
* Provide a handler that is invoked on the key down event for the control
|
|
145
|
+
*/
|
|
146
|
+
onKeyDown?(event: KeyboardEvent): void;
|
|
147
|
+
}
|
|
148
|
+
export declare function StructuredListRow(props: StructuredListRowProps): JSX.Element;
|
|
149
|
+
export declare namespace StructuredListRow {
|
|
150
|
+
var propTypes: {
|
|
151
|
+
/**
|
|
152
|
+
* Provide the contents of your StructuredListRow
|
|
153
|
+
*/
|
|
154
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
155
|
+
/**
|
|
156
|
+
* Specify an optional className to be applied to the container node
|
|
157
|
+
*/
|
|
158
|
+
className: PropTypes.Requireable<string>;
|
|
159
|
+
/**
|
|
160
|
+
* Specify whether your StructuredListRow should be used as a header row
|
|
161
|
+
*/
|
|
162
|
+
head: PropTypes.Requireable<boolean>;
|
|
163
|
+
/**
|
|
164
|
+
* Specify whether a `<label>` should be used
|
|
165
|
+
*/
|
|
166
|
+
label: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
|
|
167
|
+
/**
|
|
168
|
+
* Provide a handler that is invoked on the click
|
|
169
|
+
*/
|
|
170
|
+
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
171
|
+
/**
|
|
172
|
+
* Provide a handler that is invoked on the key down event for the control,
|
|
173
|
+
*/
|
|
174
|
+
onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
|
|
175
|
+
};
|
|
176
|
+
}
|
|
177
|
+
export interface StructuredListInputProps extends DivAttrs {
|
|
178
|
+
/**
|
|
179
|
+
* Specify an optional className to be applied to the input
|
|
180
|
+
*/
|
|
181
|
+
className?: string;
|
|
182
|
+
/**
|
|
183
|
+
* Specify a custom `id` for the input
|
|
184
|
+
*/
|
|
185
|
+
id?: string;
|
|
186
|
+
/**
|
|
187
|
+
* Provide a `name` for the input
|
|
188
|
+
*/
|
|
189
|
+
name?: string;
|
|
190
|
+
/**
|
|
191
|
+
* Provide an optional hook that is called each time the input is updated
|
|
192
|
+
*/
|
|
193
|
+
onChange?(event: ChangeEvent<HTMLInputElement>): void;
|
|
194
|
+
/**
|
|
195
|
+
* Provide a `title` for the input
|
|
196
|
+
*/
|
|
197
|
+
title?: string;
|
|
198
|
+
}
|
|
199
|
+
export declare function StructuredListInput(props: StructuredListInputProps): JSX.Element;
|
|
200
|
+
export declare namespace StructuredListInput {
|
|
201
|
+
var propTypes: {
|
|
202
|
+
/**
|
|
203
|
+
* Specify an optional className to be applied to the input
|
|
204
|
+
*/
|
|
205
|
+
className: PropTypes.Requireable<string>;
|
|
206
|
+
/**
|
|
207
|
+
* Specify whether the underlying input should be checked by default
|
|
208
|
+
*/
|
|
209
|
+
defaultChecked: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
|
|
210
|
+
/**
|
|
211
|
+
* Specify a custom `id` for the input
|
|
212
|
+
*/
|
|
213
|
+
id: PropTypes.Requireable<string>;
|
|
214
|
+
/**
|
|
215
|
+
* Provide a `name` for the input
|
|
216
|
+
*/
|
|
217
|
+
name: PropTypes.Requireable<string>;
|
|
218
|
+
/**
|
|
219
|
+
* Provide an optional hook that is called each time the input is updated
|
|
220
|
+
*/
|
|
221
|
+
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
222
|
+
/**
|
|
223
|
+
* Provide a `title` for the input
|
|
224
|
+
*/
|
|
225
|
+
title: PropTypes.Requireable<string>;
|
|
226
|
+
/**
|
|
227
|
+
* Specify the value of the input
|
|
228
|
+
*/
|
|
229
|
+
value: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
|
|
230
|
+
};
|
|
231
|
+
}
|
|
232
|
+
export interface StructuredListCellProps extends DivAttrs {
|
|
233
|
+
/**
|
|
234
|
+
* Provide the contents of your StructuredListCell
|
|
235
|
+
*/
|
|
236
|
+
children?: ReactNode;
|
|
237
|
+
/**
|
|
238
|
+
* Specify an optional className to be applied to the container node
|
|
239
|
+
*/
|
|
240
|
+
className?: string;
|
|
241
|
+
/**
|
|
242
|
+
* Specify whether your StructuredListCell should be used as a header cell
|
|
243
|
+
*/
|
|
244
|
+
head?: boolean;
|
|
245
|
+
/**
|
|
246
|
+
* Specify whether your StructuredListCell should have text wrapping
|
|
247
|
+
*/
|
|
248
|
+
noWrap?: boolean;
|
|
249
|
+
}
|
|
250
|
+
export declare function StructuredListCell(props: StructuredListCellProps): JSX.Element;
|
|
251
|
+
export declare namespace StructuredListCell {
|
|
252
|
+
var propTypes: {
|
|
253
|
+
/**
|
|
254
|
+
* Provide the contents of your StructuredListCell
|
|
255
|
+
*/
|
|
256
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
257
|
+
/**
|
|
258
|
+
* Specify an optional className to be applied to the container node
|
|
259
|
+
*/
|
|
260
|
+
className: PropTypes.Requireable<string>;
|
|
261
|
+
/**
|
|
262
|
+
* Specify whether your StructuredListCell should be used as a header cell
|
|
263
|
+
*/
|
|
264
|
+
head: PropTypes.Requireable<boolean>;
|
|
265
|
+
/**
|
|
266
|
+
* Specify whether your StructuredListCell should have text wrapping
|
|
267
|
+
*/
|
|
268
|
+
noWrap: PropTypes.Requireable<boolean>;
|
|
269
|
+
};
|
|
270
|
+
}
|
|
271
|
+
export {};
|
|
@@ -30,18 +30,19 @@ function StructuredListWrapper(props) {
|
|
|
30
30
|
children,
|
|
31
31
|
selection,
|
|
32
32
|
className,
|
|
33
|
-
['aria-label']: ariaLabel,
|
|
33
|
+
['aria-label']: ariaLabel = 'Structured list section',
|
|
34
|
+
// @ts-expect-error: Deprecated prop
|
|
34
35
|
ariaLabel: deprecatedAriaLabel,
|
|
35
36
|
isCondensed,
|
|
36
37
|
isFlush,
|
|
37
38
|
...other
|
|
38
39
|
} = props;
|
|
39
40
|
const prefix = usePrefix.usePrefix();
|
|
40
|
-
const classes = cx__default["default"](`${prefix}--structured-list`,
|
|
41
|
+
const classes = cx__default["default"](`${prefix}--structured-list`, {
|
|
41
42
|
[`${prefix}--structured-list--selection`]: selection,
|
|
42
43
|
[`${prefix}--structured-list--condensed`]: isCondensed,
|
|
43
44
|
[`${prefix}--structured-list--flush`]: isFlush && !selection
|
|
44
|
-
});
|
|
45
|
+
}, className);
|
|
45
46
|
const [selectedRow, setSelectedRow] = React__default["default"].useState(null);
|
|
46
47
|
return /*#__PURE__*/React__default["default"].createElement(GridSelectedRowStateContext.Provider, {
|
|
47
48
|
value: selectedRow
|
|
@@ -85,12 +86,6 @@ StructuredListWrapper.propTypes = {
|
|
|
85
86
|
*/
|
|
86
87
|
selection: PropTypes__default["default"].bool
|
|
87
88
|
};
|
|
88
|
-
StructuredListWrapper.defaultProps = {
|
|
89
|
-
selection: false,
|
|
90
|
-
isCondensed: false,
|
|
91
|
-
isFlush: false,
|
|
92
|
-
['aria-label']: 'Structured list section'
|
|
93
|
-
};
|
|
94
89
|
function StructuredListHead(props) {
|
|
95
90
|
const {
|
|
96
91
|
children,
|
|
@@ -142,9 +137,6 @@ StructuredListBody.propTypes = {
|
|
|
142
137
|
*/
|
|
143
138
|
onKeyDown: PropTypes__default["default"].func
|
|
144
139
|
};
|
|
145
|
-
StructuredListBody.defaultProps = {
|
|
146
|
-
onKeyDown: () => {}
|
|
147
|
-
};
|
|
148
140
|
const GridRowContext = /*#__PURE__*/React__default["default"].createContext(null);
|
|
149
141
|
function StructuredListRow(props) {
|
|
150
142
|
const {
|
|
@@ -163,11 +155,11 @@ function StructuredListRow(props) {
|
|
|
163
155
|
const value = {
|
|
164
156
|
id
|
|
165
157
|
};
|
|
166
|
-
const classes = cx__default["default"](`${prefix}--structured-list-row`,
|
|
158
|
+
const classes = cx__default["default"](`${prefix}--structured-list-row`, {
|
|
167
159
|
[`${prefix}--structured-list-row--header-row`]: head,
|
|
168
160
|
[`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
|
|
169
161
|
[`${prefix}--structured-list-row--selected`]: selectedRow === id
|
|
170
|
-
});
|
|
162
|
+
}, className);
|
|
171
163
|
return head ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
|
|
172
164
|
role: "row"
|
|
173
165
|
}, other, {
|
|
@@ -181,9 +173,9 @@ function StructuredListRow(props) {
|
|
|
181
173
|
}, other, {
|
|
182
174
|
role: "row",
|
|
183
175
|
className: classes,
|
|
184
|
-
onClick:
|
|
185
|
-
setSelectedRow(id);
|
|
186
|
-
onClick && onClick();
|
|
176
|
+
onClick: event => {
|
|
177
|
+
setSelectedRow?.(id);
|
|
178
|
+
onClick && onClick(event);
|
|
187
179
|
},
|
|
188
180
|
onFocus: () => {
|
|
189
181
|
setHasFocusWithin(true);
|
|
@@ -214,7 +206,7 @@ StructuredListRow.propTypes = {
|
|
|
214
206
|
*/
|
|
215
207
|
label: deprecate["default"](PropTypes__default["default"].bool, `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`),
|
|
216
208
|
/**
|
|
217
|
-
* Provide a handler that is invoked on the click
|
|
209
|
+
* Provide a handler that is invoked on the click
|
|
218
210
|
*/
|
|
219
211
|
onClick: PropTypes__default["default"].func,
|
|
220
212
|
/**
|
|
@@ -222,10 +214,6 @@ StructuredListRow.propTypes = {
|
|
|
222
214
|
*/
|
|
223
215
|
onKeyDown: PropTypes__default["default"].func
|
|
224
216
|
};
|
|
225
|
-
StructuredListRow.defaultProps = {
|
|
226
|
-
head: false,
|
|
227
|
-
onKeyDown: () => {}
|
|
228
|
-
};
|
|
229
217
|
function StructuredListInput(props) {
|
|
230
218
|
const defaultId = useId.useId('structureListInput');
|
|
231
219
|
const {
|
|
@@ -244,10 +232,10 @@ function StructuredListInput(props) {
|
|
|
244
232
|
return /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {
|
|
245
233
|
type: "radio",
|
|
246
234
|
tabIndex: 0,
|
|
247
|
-
checked: row && row.id === selectedRow,
|
|
235
|
+
checked: !!row && row.id === selectedRow,
|
|
248
236
|
value: row?.id ?? '',
|
|
249
237
|
onChange: event => {
|
|
250
|
-
setSelectedRow(event.target.value);
|
|
238
|
+
setSelectedRow?.(event.target.value);
|
|
251
239
|
onChange && onChange(event);
|
|
252
240
|
},
|
|
253
241
|
id: id ?? defaultId,
|
|
@@ -286,9 +274,6 @@ StructuredListInput.propTypes = {
|
|
|
286
274
|
*/
|
|
287
275
|
value: deprecate["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired, `\nThe prop \`value\` will be removed in the next major version of Carbon.`)
|
|
288
276
|
};
|
|
289
|
-
StructuredListInput.defaultProps = {
|
|
290
|
-
title: 'title'
|
|
291
|
-
};
|
|
292
277
|
function StructuredListCell(props) {
|
|
293
278
|
const {
|
|
294
279
|
children,
|
|
@@ -298,11 +283,11 @@ function StructuredListCell(props) {
|
|
|
298
283
|
...other
|
|
299
284
|
} = props;
|
|
300
285
|
const prefix = usePrefix.usePrefix();
|
|
301
|
-
const classes = cx__default["default"](
|
|
286
|
+
const classes = cx__default["default"]({
|
|
302
287
|
[`${prefix}--structured-list-th`]: head,
|
|
303
288
|
[`${prefix}--structured-list-td`]: !head,
|
|
304
289
|
[`${prefix}--structured-list-content--nowrap`]: noWrap
|
|
305
|
-
});
|
|
290
|
+
}, className);
|
|
306
291
|
if (head) {
|
|
307
292
|
return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
|
|
308
293
|
className: classes,
|
|
@@ -332,10 +317,6 @@ StructuredListCell.propTypes = {
|
|
|
332
317
|
*/
|
|
333
318
|
noWrap: PropTypes__default["default"].bool
|
|
334
319
|
};
|
|
335
|
-
StructuredListCell.defaultProps = {
|
|
336
|
-
head: false,
|
|
337
|
-
noWrap: false
|
|
338
|
-
};
|
|
339
320
|
|
|
340
321
|
exports.StructuredListBody = StructuredListBody;
|
|
341
322
|
exports.StructuredListCell = StructuredListCell;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export * from './StructuredList';
|
|
8
|
+
export { default as StructuredListSkeleton, type StructuredListSkeletonProps, } from './StructuredList.Skeleton';
|
|
@@ -20,6 +20,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
|
20
20
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
21
21
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
22
|
|
|
23
|
+
var _hr;
|
|
23
24
|
function SideNavDivider(_ref) {
|
|
24
25
|
let {
|
|
25
26
|
className
|
|
@@ -27,9 +28,8 @@ function SideNavDivider(_ref) {
|
|
|
27
28
|
const prefix = usePrefix.usePrefix();
|
|
28
29
|
const classNames = cx__default["default"](`${prefix}--side-nav__divider`, className);
|
|
29
30
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
30
|
-
role: "separator",
|
|
31
31
|
className: classNames
|
|
32
|
-
});
|
|
32
|
+
}, _hr || (_hr = /*#__PURE__*/React__default["default"].createElement("hr", null)));
|
|
33
33
|
}
|
|
34
34
|
SideNavDivider.propTypes = {
|
|
35
35
|
/**
|
package/lib/index.js
CHANGED
|
@@ -80,6 +80,8 @@ var SelectItemGroup = require('./components/SelectItemGroup/SelectItemGroup.js')
|
|
|
80
80
|
var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
|
|
81
81
|
var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
|
|
82
82
|
var index$9 = require('./components/Slider/index.js');
|
|
83
|
+
var StructuredList = require('./components/StructuredList/StructuredList.js');
|
|
84
|
+
var StructuredList_Skeleton = require('./components/StructuredList/StructuredList.Skeleton.js');
|
|
83
85
|
var Tabs = require('./components/Tabs/Tabs.js');
|
|
84
86
|
var TabContent = require('./components/TabContent/TabContent.js');
|
|
85
87
|
var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
|
|
@@ -219,8 +221,6 @@ var RadioTile = require('./components/RadioTile/RadioTile.js');
|
|
|
219
221
|
var SecondaryButton = require('./components/SecondaryButton/SecondaryButton.js');
|
|
220
222
|
var SkeletonIcon = require('./components/SkeletonIcon/SkeletonIcon.js');
|
|
221
223
|
var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
|
|
222
|
-
var StructuredList_Skeleton = require('./components/StructuredList/StructuredList.Skeleton.js');
|
|
223
|
-
var StructuredList = require('./components/StructuredList/StructuredList.js');
|
|
224
224
|
var Switch = require('./components/Switch/Switch.js');
|
|
225
225
|
var IconSwitch = require('./components/Switch/IconSwitch.js');
|
|
226
226
|
var Stack = require('./components/Stack/Stack.js');
|
|
@@ -305,6 +305,13 @@ exports.SelectItemGroup = SelectItemGroup["default"];
|
|
|
305
305
|
exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
|
|
306
306
|
exports.SkeletonText = SkeletonText["default"];
|
|
307
307
|
exports.Slider = index$9["default"];
|
|
308
|
+
exports.StructuredListBody = StructuredList.StructuredListBody;
|
|
309
|
+
exports.StructuredListCell = StructuredList.StructuredListCell;
|
|
310
|
+
exports.StructuredListHead = StructuredList.StructuredListHead;
|
|
311
|
+
exports.StructuredListInput = StructuredList.StructuredListInput;
|
|
312
|
+
exports.StructuredListRow = StructuredList.StructuredListRow;
|
|
313
|
+
exports.StructuredListWrapper = StructuredList.StructuredListWrapper;
|
|
314
|
+
exports.StructuredListSkeleton = StructuredList_Skeleton["default"];
|
|
308
315
|
exports.IconTab = Tabs.IconTab;
|
|
309
316
|
exports.Tab = Tabs.Tab;
|
|
310
317
|
exports.TabList = Tabs.TabList;
|
|
@@ -472,13 +479,6 @@ exports.RadioTile = RadioTile["default"];
|
|
|
472
479
|
exports.SecondaryButton = SecondaryButton["default"];
|
|
473
480
|
exports.SkeletonIcon = SkeletonIcon["default"];
|
|
474
481
|
exports.SliderSkeleton = Slider_Skeleton["default"];
|
|
475
|
-
exports.StructuredListSkeleton = StructuredList_Skeleton["default"];
|
|
476
|
-
exports.StructuredListBody = StructuredList.StructuredListBody;
|
|
477
|
-
exports.StructuredListCell = StructuredList.StructuredListCell;
|
|
478
|
-
exports.StructuredListHead = StructuredList.StructuredListHead;
|
|
479
|
-
exports.StructuredListInput = StructuredList.StructuredListInput;
|
|
480
|
-
exports.StructuredListRow = StructuredList.StructuredListRow;
|
|
481
|
-
exports.StructuredListWrapper = StructuredList.StructuredListWrapper;
|
|
482
482
|
exports.Switch = Switch["default"];
|
|
483
483
|
exports.IconSwitch = IconSwitch["default"];
|
|
484
484
|
exports.Stack = Stack.Stack;
|