carbon-react 111.0.2 → 111.0.3
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/esm/components/content/content.component.d.ts +13 -0
- package/esm/components/content/content.component.js +186 -46
- package/esm/components/content/content.style.d.ts +41 -0
- package/esm/components/content/index.d.ts +2 -2
- package/esm/components/content/index.js +1 -1
- package/esm/components/select/multi-select/multi-select.component.js +0 -1
- package/esm/components/select/option-row/option-row.component.js +7 -1
- package/esm/components/select/select-list/select-list.component.js +8 -2
- package/esm/components/typography/typography.component.js +1 -0
- package/lib/components/content/content.component.d.ts +13 -0
- package/lib/components/content/content.component.js +187 -50
- package/lib/components/content/content.style.d.ts +41 -0
- package/lib/components/content/index.d.ts +2 -2
- package/lib/components/content/index.js +2 -2
- package/lib/components/select/multi-select/multi-select.component.js +0 -1
- package/lib/components/select/option-row/option-row.component.js +7 -1
- package/lib/components/select/select-list/select-list.component.js +8 -2
- package/lib/components/typography/typography.component.js +1 -0
- package/package.json +1 -2
- package/esm/components/content/content.d.ts +0 -26
- package/lib/components/content/content.d.ts +0 -26
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StyledContentProps, StyledContentTitleProps, StyledContentBodyProps } from "./content.style";
|
|
3
|
+
export interface ContentProps extends StyledContentProps, StyledContentTitleProps, StyledContentBodyProps {
|
|
4
|
+
/** The body of the content component */
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
/** The title of the content component */
|
|
7
|
+
title?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare const Content: {
|
|
10
|
+
({ variant, children, title, inline, align, titleWidth, bodyFullWidth, ...rest }: ContentProps): JSX.Element;
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
13
|
+
export default Content;
|
|
@@ -2,10 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import PropTypes from "prop-types";
|
|
5
|
-
import
|
|
6
|
-
import { StyledContent, StyledContentTitle, StyledContentBody } from "./content.style.js";
|
|
7
|
-
import { filterStyledSystemMarginProps } from "../../style/utils";
|
|
8
|
-
const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
|
|
5
|
+
import { StyledContent, StyledContentTitle, StyledContentBody } from "./content.style";
|
|
9
6
|
|
|
10
7
|
const Content = ({
|
|
11
8
|
variant = "primary",
|
|
@@ -16,48 +13,191 @@ const Content = ({
|
|
|
16
13
|
titleWidth,
|
|
17
14
|
bodyFullWidth = false,
|
|
18
15
|
...rest
|
|
19
|
-
}) =>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
/** Applies a theme to the Content Value: primary, secondary */
|
|
42
|
-
variant: PropTypes.oneOf(["primary", "secondary"]),
|
|
43
|
-
|
|
44
|
-
/** The body of the content component */
|
|
45
|
-
children: PropTypes.node,
|
|
46
|
-
|
|
47
|
-
/** The title of the content component */
|
|
48
|
-
title: PropTypes.node,
|
|
49
|
-
|
|
50
|
-
/** Displays the content inline with the title */
|
|
51
|
-
inline: PropTypes.bool,
|
|
52
|
-
|
|
53
|
-
/** Aligns the content (left, center or right) */
|
|
54
|
-
align: PropTypes.oneOf(["left", "center", "right"]),
|
|
55
|
-
|
|
56
|
-
/** Sets a custom width for the title element */
|
|
57
|
-
titleWidth: PropTypes.string,
|
|
16
|
+
}) => {
|
|
17
|
+
return /*#__PURE__*/React.createElement(StyledContent, _extends({
|
|
18
|
+
align: align,
|
|
19
|
+
bodyFullWidth: bodyFullWidth
|
|
20
|
+
}, rest, {
|
|
21
|
+
"data-component": "content"
|
|
22
|
+
}), /*#__PURE__*/React.createElement(StyledContentTitle, {
|
|
23
|
+
variant: variant,
|
|
24
|
+
inline: inline,
|
|
25
|
+
"data-element": "content-title",
|
|
26
|
+
titleWidth: titleWidth,
|
|
27
|
+
align: align
|
|
28
|
+
}, title), /*#__PURE__*/React.createElement(StyledContentBody, {
|
|
29
|
+
variant: variant,
|
|
30
|
+
inline: inline,
|
|
31
|
+
"data-element": "content-body",
|
|
32
|
+
bodyFullWidth: bodyFullWidth,
|
|
33
|
+
titleWidth: titleWidth,
|
|
34
|
+
align: align
|
|
35
|
+
}, children));
|
|
36
|
+
};
|
|
58
37
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
bodyFullWidth: PropTypes.bool
|
|
38
|
+
Content.propTypes = {
|
|
39
|
+
"align": PropTypes.oneOf(["center", "left", "right"]),
|
|
40
|
+
"bodyFullWidth": PropTypes.bool,
|
|
41
|
+
"children": PropTypes.node,
|
|
42
|
+
"inline": PropTypes.bool,
|
|
43
|
+
"m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
44
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
45
|
+
"description": PropTypes.string,
|
|
46
|
+
"toString": PropTypes.func.isRequired,
|
|
47
|
+
"valueOf": PropTypes.func.isRequired
|
|
48
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
49
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
50
|
+
"description": PropTypes.string,
|
|
51
|
+
"toString": PropTypes.func.isRequired,
|
|
52
|
+
"valueOf": PropTypes.func.isRequired
|
|
53
|
+
}), PropTypes.string]),
|
|
54
|
+
"margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
55
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
56
|
+
"description": PropTypes.string,
|
|
57
|
+
"toString": PropTypes.func.isRequired,
|
|
58
|
+
"valueOf": PropTypes.func.isRequired
|
|
59
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
60
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
61
|
+
"description": PropTypes.string,
|
|
62
|
+
"toString": PropTypes.func.isRequired,
|
|
63
|
+
"valueOf": PropTypes.func.isRequired
|
|
64
|
+
}), PropTypes.string]),
|
|
65
|
+
"marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
66
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
67
|
+
"description": PropTypes.string,
|
|
68
|
+
"toString": PropTypes.func.isRequired,
|
|
69
|
+
"valueOf": PropTypes.func.isRequired
|
|
70
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
71
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
72
|
+
"description": PropTypes.string,
|
|
73
|
+
"toString": PropTypes.func.isRequired,
|
|
74
|
+
"valueOf": PropTypes.func.isRequired
|
|
75
|
+
}), PropTypes.string]),
|
|
76
|
+
"marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
77
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
78
|
+
"description": PropTypes.string,
|
|
79
|
+
"toString": PropTypes.func.isRequired,
|
|
80
|
+
"valueOf": PropTypes.func.isRequired
|
|
81
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
82
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
83
|
+
"description": PropTypes.string,
|
|
84
|
+
"toString": PropTypes.func.isRequired,
|
|
85
|
+
"valueOf": PropTypes.func.isRequired
|
|
86
|
+
}), PropTypes.string]),
|
|
87
|
+
"marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
88
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
89
|
+
"description": PropTypes.string,
|
|
90
|
+
"toString": PropTypes.func.isRequired,
|
|
91
|
+
"valueOf": PropTypes.func.isRequired
|
|
92
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
93
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
94
|
+
"description": PropTypes.string,
|
|
95
|
+
"toString": PropTypes.func.isRequired,
|
|
96
|
+
"valueOf": PropTypes.func.isRequired
|
|
97
|
+
}), PropTypes.string]),
|
|
98
|
+
"marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
99
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
100
|
+
"description": PropTypes.string,
|
|
101
|
+
"toString": PropTypes.func.isRequired,
|
|
102
|
+
"valueOf": PropTypes.func.isRequired
|
|
103
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
104
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
105
|
+
"description": PropTypes.string,
|
|
106
|
+
"toString": PropTypes.func.isRequired,
|
|
107
|
+
"valueOf": PropTypes.func.isRequired
|
|
108
|
+
}), PropTypes.string]),
|
|
109
|
+
"marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
110
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
111
|
+
"description": PropTypes.string,
|
|
112
|
+
"toString": PropTypes.func.isRequired,
|
|
113
|
+
"valueOf": PropTypes.func.isRequired
|
|
114
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
115
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
116
|
+
"description": PropTypes.string,
|
|
117
|
+
"toString": PropTypes.func.isRequired,
|
|
118
|
+
"valueOf": PropTypes.func.isRequired
|
|
119
|
+
}), PropTypes.string]),
|
|
120
|
+
"marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
121
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
122
|
+
"description": PropTypes.string,
|
|
123
|
+
"toString": PropTypes.func.isRequired,
|
|
124
|
+
"valueOf": PropTypes.func.isRequired
|
|
125
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
126
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
127
|
+
"description": PropTypes.string,
|
|
128
|
+
"toString": PropTypes.func.isRequired,
|
|
129
|
+
"valueOf": PropTypes.func.isRequired
|
|
130
|
+
}), PropTypes.string]),
|
|
131
|
+
"mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
132
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
133
|
+
"description": PropTypes.string,
|
|
134
|
+
"toString": PropTypes.func.isRequired,
|
|
135
|
+
"valueOf": PropTypes.func.isRequired
|
|
136
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
137
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
138
|
+
"description": PropTypes.string,
|
|
139
|
+
"toString": PropTypes.func.isRequired,
|
|
140
|
+
"valueOf": PropTypes.func.isRequired
|
|
141
|
+
}), PropTypes.string]),
|
|
142
|
+
"ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
143
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
144
|
+
"description": PropTypes.string,
|
|
145
|
+
"toString": PropTypes.func.isRequired,
|
|
146
|
+
"valueOf": PropTypes.func.isRequired
|
|
147
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
148
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
149
|
+
"description": PropTypes.string,
|
|
150
|
+
"toString": PropTypes.func.isRequired,
|
|
151
|
+
"valueOf": PropTypes.func.isRequired
|
|
152
|
+
}), PropTypes.string]),
|
|
153
|
+
"mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
154
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
155
|
+
"description": PropTypes.string,
|
|
156
|
+
"toString": PropTypes.func.isRequired,
|
|
157
|
+
"valueOf": PropTypes.func.isRequired
|
|
158
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
159
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
160
|
+
"description": PropTypes.string,
|
|
161
|
+
"toString": PropTypes.func.isRequired,
|
|
162
|
+
"valueOf": PropTypes.func.isRequired
|
|
163
|
+
}), PropTypes.string]),
|
|
164
|
+
"mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
165
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
166
|
+
"description": PropTypes.string,
|
|
167
|
+
"toString": PropTypes.func.isRequired,
|
|
168
|
+
"valueOf": PropTypes.func.isRequired
|
|
169
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
170
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
171
|
+
"description": PropTypes.string,
|
|
172
|
+
"toString": PropTypes.func.isRequired,
|
|
173
|
+
"valueOf": PropTypes.func.isRequired
|
|
174
|
+
}), PropTypes.string]),
|
|
175
|
+
"mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
176
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
177
|
+
"description": PropTypes.string,
|
|
178
|
+
"toString": PropTypes.func.isRequired,
|
|
179
|
+
"valueOf": PropTypes.func.isRequired
|
|
180
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
181
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
182
|
+
"description": PropTypes.string,
|
|
183
|
+
"toString": PropTypes.func.isRequired,
|
|
184
|
+
"valueOf": PropTypes.func.isRequired
|
|
185
|
+
}), PropTypes.string]),
|
|
186
|
+
"my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
187
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
188
|
+
"description": PropTypes.string,
|
|
189
|
+
"toString": PropTypes.func.isRequired,
|
|
190
|
+
"valueOf": PropTypes.func.isRequired
|
|
191
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
192
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
193
|
+
"description": PropTypes.string,
|
|
194
|
+
"toString": PropTypes.func.isRequired,
|
|
195
|
+
"valueOf": PropTypes.func.isRequired
|
|
196
|
+
}), PropTypes.string]),
|
|
197
|
+
"title": PropTypes.node,
|
|
198
|
+
"titleWidth": PropTypes.string,
|
|
199
|
+
"variant": PropTypes.oneOf(["primary", "secondary"])
|
|
62
200
|
};
|
|
201
|
+
export { Content };
|
|
202
|
+
Content.displayName = "Content";
|
|
63
203
|
export default Content;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { MarginProps } from "styled-system";
|
|
2
|
+
export declare type AlignOptions = "left" | "center" | "right";
|
|
3
|
+
export declare type VariantOptions = "primary" | "secondary";
|
|
4
|
+
export interface StyledContentProps extends MarginProps {
|
|
5
|
+
/** Aligns the content (left, center or right) */
|
|
6
|
+
align?: AlignOptions;
|
|
7
|
+
/**
|
|
8
|
+
* Over-rides the calculation of body width based on titleWidth.
|
|
9
|
+
* Sometimes we need the body to be full width while keeping a title width similar to other widths
|
|
10
|
+
*/
|
|
11
|
+
bodyFullWidth?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const StyledContent: import("styled-components").StyledComponent<"div", any, StyledContentProps, never>;
|
|
14
|
+
export interface StyledContentTitleProps {
|
|
15
|
+
/** Aligns the content (left, center or right) */
|
|
16
|
+
align?: AlignOptions;
|
|
17
|
+
/** Displays the content inline with the title */
|
|
18
|
+
inline?: boolean;
|
|
19
|
+
/** Sets a custom width for the title element */
|
|
20
|
+
titleWidth?: string;
|
|
21
|
+
/** Applies a theme to the Content Value: primary, secondary */
|
|
22
|
+
variant?: VariantOptions;
|
|
23
|
+
}
|
|
24
|
+
declare const StyledContentTitle: import("styled-components").StyledComponent<"div", any, StyledContentTitleProps, never>;
|
|
25
|
+
export interface StyledContentBodyProps {
|
|
26
|
+
/** Aligns the content (left, center or right) */
|
|
27
|
+
align?: AlignOptions;
|
|
28
|
+
/**
|
|
29
|
+
* Over-rides the calculation of body width based on titleWidth.
|
|
30
|
+
* Sometimes we need the body to be full width while keeping a title width similar to other widths
|
|
31
|
+
*/
|
|
32
|
+
bodyFullWidth?: boolean;
|
|
33
|
+
/** Displays the content inline with the title */
|
|
34
|
+
inline?: boolean;
|
|
35
|
+
/** Sets a custom width for the title element */
|
|
36
|
+
titleWidth?: string;
|
|
37
|
+
/** Applies a theme to the Content Value: primary, secondary */
|
|
38
|
+
variant?: VariantOptions;
|
|
39
|
+
}
|
|
40
|
+
declare const StyledContentBody: import("styled-components").StyledComponent<"div", any, StyledContentBodyProps, never>;
|
|
41
|
+
export { StyledContent, StyledContentTitle, StyledContentBody };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from "./content";
|
|
2
|
-
export
|
|
1
|
+
export { default } from "./content.component";
|
|
2
|
+
export type { ContentProps } from "./content.component";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from "./content.component
|
|
1
|
+
export { default } from "./content.component";
|
|
@@ -409,7 +409,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
409
409
|
|
|
410
410
|
const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
|
|
411
411
|
ref: listboxRef,
|
|
412
|
-
"aria-multiselectable": true,
|
|
413
412
|
id: selectListId.current,
|
|
414
413
|
labelId: labelId.current,
|
|
415
414
|
anchorElement: textboxRef && textboxRef.parentElement,
|
|
@@ -20,10 +20,16 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
const selectListContext = useContext(SelectListContext);
|
|
23
|
+
let isSelected = selectListContext.currentOptionsListIndex === index;
|
|
24
|
+
|
|
25
|
+
if (selectListContext.multiselectValues) {
|
|
26
|
+
isSelected = selectListContext.multiselectValues.includes(value);
|
|
27
|
+
}
|
|
28
|
+
|
|
23
29
|
return /*#__PURE__*/React.createElement(StyledOptionRow, {
|
|
24
30
|
id: id,
|
|
25
31
|
ref: ref,
|
|
26
|
-
"aria-selected":
|
|
32
|
+
"aria-selected": isSelected,
|
|
27
33
|
"data-component": "option-row",
|
|
28
34
|
onClick: handleClick,
|
|
29
35
|
isHighlighted: selectListContext.currentOptionsListIndex === index,
|
|
@@ -38,6 +38,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
|
|
|
38
38
|
listPlacement = "bottom",
|
|
39
39
|
flipEnabled = true,
|
|
40
40
|
isOpen,
|
|
41
|
+
multiselectValues,
|
|
41
42
|
...listProps
|
|
42
43
|
}, listContainerRef) => {
|
|
43
44
|
const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
|
|
@@ -320,7 +321,8 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
|
|
|
320
321
|
ref: listContainerRef
|
|
321
322
|
}, /*#__PURE__*/React.createElement(SelectListContext.Provider, {
|
|
322
323
|
value: {
|
|
323
|
-
currentOptionsListIndex
|
|
324
|
+
currentOptionsListIndex,
|
|
325
|
+
multiselectValues
|
|
324
326
|
}
|
|
325
327
|
}, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
|
|
326
328
|
"data-element": "select-list-wrapper"
|
|
@@ -330,6 +332,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
|
|
|
330
332
|
"aria-labelledby": labelId,
|
|
331
333
|
"data-element": "select-list",
|
|
332
334
|
role: "listbox",
|
|
335
|
+
"aria-multiselectable": multiselectValues ? true : undefined,
|
|
333
336
|
ref: listCallbackRef,
|
|
334
337
|
tabIndex: "-1",
|
|
335
338
|
isLoading: isLoading,
|
|
@@ -402,6 +405,9 @@ SelectList.propTypes = {
|
|
|
402
405
|
/** @private @ignore
|
|
403
406
|
* Hides the list (with CSS display: none) if not set
|
|
404
407
|
*/
|
|
405
|
-
isOpen: PropTypes.bool
|
|
408
|
+
isOpen: PropTypes.bool,
|
|
409
|
+
|
|
410
|
+
/** array of selected values, if rendered as part of a MultiSelect */
|
|
411
|
+
multiselectValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)])
|
|
406
412
|
};
|
|
407
413
|
export default SelectList;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StyledContentProps, StyledContentTitleProps, StyledContentBodyProps } from "./content.style";
|
|
3
|
+
export interface ContentProps extends StyledContentProps, StyledContentTitleProps, StyledContentBodyProps {
|
|
4
|
+
/** The body of the content component */
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
/** The title of the content component */
|
|
7
|
+
title?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare const Content: {
|
|
10
|
+
({ variant, children, title, inline, align, titleWidth, bodyFullWidth, ...rest }: ContentProps): JSX.Element;
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
13
|
+
export default Content;
|
|
@@ -3,24 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = void 0;
|
|
6
|
+
exports.default = exports.Content = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
var _contentStyle = require("./content.style.js");
|
|
15
|
-
|
|
16
|
-
var _utils = require("../../style/utils");
|
|
12
|
+
var _content = require("./content.style");
|
|
17
13
|
|
|
18
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
15
|
|
|
20
16
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
17
|
|
|
22
|
-
const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
|
|
23
|
-
|
|
24
18
|
const Content = ({
|
|
25
19
|
variant = "primary",
|
|
26
20
|
children,
|
|
@@ -30,49 +24,192 @@ const Content = ({
|
|
|
30
24
|
titleWidth,
|
|
31
25
|
bodyFullWidth = false,
|
|
32
26
|
...rest
|
|
33
|
-
}) =>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
/** Applies a theme to the Content Value: primary, secondary */
|
|
56
|
-
variant: _propTypes.default.oneOf(["primary", "secondary"]),
|
|
57
|
-
|
|
58
|
-
/** The body of the content component */
|
|
59
|
-
children: _propTypes.default.node,
|
|
60
|
-
|
|
61
|
-
/** The title of the content component */
|
|
62
|
-
title: _propTypes.default.node,
|
|
63
|
-
|
|
64
|
-
/** Displays the content inline with the title */
|
|
65
|
-
inline: _propTypes.default.bool,
|
|
66
|
-
|
|
67
|
-
/** Aligns the content (left, center or right) */
|
|
68
|
-
align: _propTypes.default.oneOf(["left", "center", "right"]),
|
|
69
|
-
|
|
70
|
-
/** Sets a custom width for the title element */
|
|
71
|
-
titleWidth: _propTypes.default.string,
|
|
27
|
+
}) => {
|
|
28
|
+
return /*#__PURE__*/_react.default.createElement(_content.StyledContent, _extends({
|
|
29
|
+
align: align,
|
|
30
|
+
bodyFullWidth: bodyFullWidth
|
|
31
|
+
}, rest, {
|
|
32
|
+
"data-component": "content"
|
|
33
|
+
}), /*#__PURE__*/_react.default.createElement(_content.StyledContentTitle, {
|
|
34
|
+
variant: variant,
|
|
35
|
+
inline: inline,
|
|
36
|
+
"data-element": "content-title",
|
|
37
|
+
titleWidth: titleWidth,
|
|
38
|
+
align: align
|
|
39
|
+
}, title), /*#__PURE__*/_react.default.createElement(_content.StyledContentBody, {
|
|
40
|
+
variant: variant,
|
|
41
|
+
inline: inline,
|
|
42
|
+
"data-element": "content-body",
|
|
43
|
+
bodyFullWidth: bodyFullWidth,
|
|
44
|
+
titleWidth: titleWidth,
|
|
45
|
+
align: align
|
|
46
|
+
}, children));
|
|
47
|
+
};
|
|
72
48
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
49
|
+
exports.Content = Content;
|
|
50
|
+
Content.propTypes = {
|
|
51
|
+
"align": _propTypes.default.oneOf(["center", "left", "right"]),
|
|
52
|
+
"bodyFullWidth": _propTypes.default.bool,
|
|
53
|
+
"children": _propTypes.default.node,
|
|
54
|
+
"inline": _propTypes.default.bool,
|
|
55
|
+
"m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
56
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
57
|
+
"description": _propTypes.default.string,
|
|
58
|
+
"toString": _propTypes.default.func.isRequired,
|
|
59
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
60
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
61
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
62
|
+
"description": _propTypes.default.string,
|
|
63
|
+
"toString": _propTypes.default.func.isRequired,
|
|
64
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
65
|
+
}), _propTypes.default.string]),
|
|
66
|
+
"margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
67
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
68
|
+
"description": _propTypes.default.string,
|
|
69
|
+
"toString": _propTypes.default.func.isRequired,
|
|
70
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
71
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
72
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
73
|
+
"description": _propTypes.default.string,
|
|
74
|
+
"toString": _propTypes.default.func.isRequired,
|
|
75
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
76
|
+
}), _propTypes.default.string]),
|
|
77
|
+
"marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
78
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
79
|
+
"description": _propTypes.default.string,
|
|
80
|
+
"toString": _propTypes.default.func.isRequired,
|
|
81
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
82
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
83
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
84
|
+
"description": _propTypes.default.string,
|
|
85
|
+
"toString": _propTypes.default.func.isRequired,
|
|
86
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
87
|
+
}), _propTypes.default.string]),
|
|
88
|
+
"marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
89
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
90
|
+
"description": _propTypes.default.string,
|
|
91
|
+
"toString": _propTypes.default.func.isRequired,
|
|
92
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
93
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
94
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
95
|
+
"description": _propTypes.default.string,
|
|
96
|
+
"toString": _propTypes.default.func.isRequired,
|
|
97
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
98
|
+
}), _propTypes.default.string]),
|
|
99
|
+
"marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
100
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
101
|
+
"description": _propTypes.default.string,
|
|
102
|
+
"toString": _propTypes.default.func.isRequired,
|
|
103
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
104
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
105
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
106
|
+
"description": _propTypes.default.string,
|
|
107
|
+
"toString": _propTypes.default.func.isRequired,
|
|
108
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
109
|
+
}), _propTypes.default.string]),
|
|
110
|
+
"marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
111
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
112
|
+
"description": _propTypes.default.string,
|
|
113
|
+
"toString": _propTypes.default.func.isRequired,
|
|
114
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
115
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
116
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
117
|
+
"description": _propTypes.default.string,
|
|
118
|
+
"toString": _propTypes.default.func.isRequired,
|
|
119
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
120
|
+
}), _propTypes.default.string]),
|
|
121
|
+
"marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
122
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
123
|
+
"description": _propTypes.default.string,
|
|
124
|
+
"toString": _propTypes.default.func.isRequired,
|
|
125
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
126
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
127
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
128
|
+
"description": _propTypes.default.string,
|
|
129
|
+
"toString": _propTypes.default.func.isRequired,
|
|
130
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
131
|
+
}), _propTypes.default.string]),
|
|
132
|
+
"marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
133
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
134
|
+
"description": _propTypes.default.string,
|
|
135
|
+
"toString": _propTypes.default.func.isRequired,
|
|
136
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
137
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
138
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
139
|
+
"description": _propTypes.default.string,
|
|
140
|
+
"toString": _propTypes.default.func.isRequired,
|
|
141
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
142
|
+
}), _propTypes.default.string]),
|
|
143
|
+
"mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
144
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
145
|
+
"description": _propTypes.default.string,
|
|
146
|
+
"toString": _propTypes.default.func.isRequired,
|
|
147
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
148
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
149
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
150
|
+
"description": _propTypes.default.string,
|
|
151
|
+
"toString": _propTypes.default.func.isRequired,
|
|
152
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
153
|
+
}), _propTypes.default.string]),
|
|
154
|
+
"ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
155
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
156
|
+
"description": _propTypes.default.string,
|
|
157
|
+
"toString": _propTypes.default.func.isRequired,
|
|
158
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
159
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
160
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
161
|
+
"description": _propTypes.default.string,
|
|
162
|
+
"toString": _propTypes.default.func.isRequired,
|
|
163
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
164
|
+
}), _propTypes.default.string]),
|
|
165
|
+
"mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
166
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
167
|
+
"description": _propTypes.default.string,
|
|
168
|
+
"toString": _propTypes.default.func.isRequired,
|
|
169
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
170
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
171
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
172
|
+
"description": _propTypes.default.string,
|
|
173
|
+
"toString": _propTypes.default.func.isRequired,
|
|
174
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
175
|
+
}), _propTypes.default.string]),
|
|
176
|
+
"mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
177
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
178
|
+
"description": _propTypes.default.string,
|
|
179
|
+
"toString": _propTypes.default.func.isRequired,
|
|
180
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
181
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
182
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
183
|
+
"description": _propTypes.default.string,
|
|
184
|
+
"toString": _propTypes.default.func.isRequired,
|
|
185
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
186
|
+
}), _propTypes.default.string]),
|
|
187
|
+
"mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
188
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
189
|
+
"description": _propTypes.default.string,
|
|
190
|
+
"toString": _propTypes.default.func.isRequired,
|
|
191
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
192
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
193
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
194
|
+
"description": _propTypes.default.string,
|
|
195
|
+
"toString": _propTypes.default.func.isRequired,
|
|
196
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
197
|
+
}), _propTypes.default.string]),
|
|
198
|
+
"my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
199
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
200
|
+
"description": _propTypes.default.string,
|
|
201
|
+
"toString": _propTypes.default.func.isRequired,
|
|
202
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
203
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
204
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
205
|
+
"description": _propTypes.default.string,
|
|
206
|
+
"toString": _propTypes.default.func.isRequired,
|
|
207
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
208
|
+
}), _propTypes.default.string]),
|
|
209
|
+
"title": _propTypes.default.node,
|
|
210
|
+
"titleWidth": _propTypes.default.string,
|
|
211
|
+
"variant": _propTypes.default.oneOf(["primary", "secondary"])
|
|
76
212
|
};
|
|
213
|
+
Content.displayName = "Content";
|
|
77
214
|
var _default = Content;
|
|
78
215
|
exports.default = _default;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { MarginProps } from "styled-system";
|
|
2
|
+
export declare type AlignOptions = "left" | "center" | "right";
|
|
3
|
+
export declare type VariantOptions = "primary" | "secondary";
|
|
4
|
+
export interface StyledContentProps extends MarginProps {
|
|
5
|
+
/** Aligns the content (left, center or right) */
|
|
6
|
+
align?: AlignOptions;
|
|
7
|
+
/**
|
|
8
|
+
* Over-rides the calculation of body width based on titleWidth.
|
|
9
|
+
* Sometimes we need the body to be full width while keeping a title width similar to other widths
|
|
10
|
+
*/
|
|
11
|
+
bodyFullWidth?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const StyledContent: import("styled-components").StyledComponent<"div", any, StyledContentProps, never>;
|
|
14
|
+
export interface StyledContentTitleProps {
|
|
15
|
+
/** Aligns the content (left, center or right) */
|
|
16
|
+
align?: AlignOptions;
|
|
17
|
+
/** Displays the content inline with the title */
|
|
18
|
+
inline?: boolean;
|
|
19
|
+
/** Sets a custom width for the title element */
|
|
20
|
+
titleWidth?: string;
|
|
21
|
+
/** Applies a theme to the Content Value: primary, secondary */
|
|
22
|
+
variant?: VariantOptions;
|
|
23
|
+
}
|
|
24
|
+
declare const StyledContentTitle: import("styled-components").StyledComponent<"div", any, StyledContentTitleProps, never>;
|
|
25
|
+
export interface StyledContentBodyProps {
|
|
26
|
+
/** Aligns the content (left, center or right) */
|
|
27
|
+
align?: AlignOptions;
|
|
28
|
+
/**
|
|
29
|
+
* Over-rides the calculation of body width based on titleWidth.
|
|
30
|
+
* Sometimes we need the body to be full width while keeping a title width similar to other widths
|
|
31
|
+
*/
|
|
32
|
+
bodyFullWidth?: boolean;
|
|
33
|
+
/** Displays the content inline with the title */
|
|
34
|
+
inline?: boolean;
|
|
35
|
+
/** Sets a custom width for the title element */
|
|
36
|
+
titleWidth?: string;
|
|
37
|
+
/** Applies a theme to the Content Value: primary, secondary */
|
|
38
|
+
variant?: VariantOptions;
|
|
39
|
+
}
|
|
40
|
+
declare const StyledContentBody: import("styled-components").StyledComponent<"div", any, StyledContentBodyProps, never>;
|
|
41
|
+
export { StyledContent, StyledContentTitle, StyledContentBody };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from "./content";
|
|
2
|
-
export
|
|
1
|
+
export { default } from "./content.component";
|
|
2
|
+
export type { ContentProps } from "./content.component";
|
|
@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
Object.defineProperty(exports, "default", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function () {
|
|
9
|
-
return
|
|
9
|
+
return _content.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var _content = _interopRequireDefault(require("./content.component"));
|
|
14
14
|
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -437,7 +437,6 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
437
437
|
|
|
438
438
|
const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
|
|
439
439
|
ref: listboxRef,
|
|
440
|
-
"aria-multiselectable": true,
|
|
441
440
|
id: selectListId.current,
|
|
442
441
|
labelId: labelId.current,
|
|
443
442
|
anchorElement: textboxRef && textboxRef.parentElement,
|
|
@@ -37,10 +37,16 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
37
37
|
};
|
|
38
38
|
|
|
39
39
|
const selectListContext = (0, _react.useContext)(_selectListContext.default);
|
|
40
|
+
let isSelected = selectListContext.currentOptionsListIndex === index;
|
|
41
|
+
|
|
42
|
+
if (selectListContext.multiselectValues) {
|
|
43
|
+
isSelected = selectListContext.multiselectValues.includes(value);
|
|
44
|
+
}
|
|
45
|
+
|
|
40
46
|
return /*#__PURE__*/_react.default.createElement(_optionRow.default, {
|
|
41
47
|
id: id,
|
|
42
48
|
ref: ref,
|
|
43
|
-
"aria-selected":
|
|
49
|
+
"aria-selected": isSelected,
|
|
44
50
|
"data-component": "option-row",
|
|
45
51
|
onClick: handleClick,
|
|
46
52
|
isHighlighted: selectListContext.currentOptionsListIndex === index,
|
|
@@ -68,6 +68,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
68
68
|
listPlacement = "bottom",
|
|
69
69
|
flipEnabled = true,
|
|
70
70
|
isOpen,
|
|
71
|
+
multiselectValues,
|
|
71
72
|
...listProps
|
|
72
73
|
}, listContainerRef) => {
|
|
73
74
|
const [currentOptionsListIndex, setCurrentOptionsListIndex] = (0, _react.useState)(-1);
|
|
@@ -350,7 +351,8 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
350
351
|
ref: listContainerRef
|
|
351
352
|
}, /*#__PURE__*/_react.default.createElement(_selectListContext.default.Provider, {
|
|
352
353
|
value: {
|
|
353
|
-
currentOptionsListIndex
|
|
354
|
+
currentOptionsListIndex,
|
|
355
|
+
multiselectValues
|
|
354
356
|
}
|
|
355
357
|
}, /*#__PURE__*/_react.default.createElement(_selectListContainer.default, _extends({
|
|
356
358
|
"data-element": "select-list-wrapper"
|
|
@@ -360,6 +362,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
360
362
|
"aria-labelledby": labelId,
|
|
361
363
|
"data-element": "select-list",
|
|
362
364
|
role: "listbox",
|
|
365
|
+
"aria-multiselectable": multiselectValues ? true : undefined,
|
|
363
366
|
ref: listCallbackRef,
|
|
364
367
|
tabIndex: "-1",
|
|
365
368
|
isLoading: isLoading,
|
|
@@ -433,7 +436,10 @@ SelectList.propTypes = {
|
|
|
433
436
|
/** @private @ignore
|
|
434
437
|
* Hides the list (with CSS display: none) if not set
|
|
435
438
|
*/
|
|
436
|
-
isOpen: _propTypes.default.bool
|
|
439
|
+
isOpen: _propTypes.default.bool,
|
|
440
|
+
|
|
441
|
+
/** array of selected values, if rendered as part of a MultiSelect */
|
|
442
|
+
multiselectValues: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.object)])
|
|
437
443
|
};
|
|
438
444
|
var _default = SelectList;
|
|
439
445
|
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "carbon-react",
|
|
3
|
-
"version": "111.0.
|
|
3
|
+
"version": "111.0.3",
|
|
4
4
|
"description": "A library of reusable React components for easily building user interfaces.",
|
|
5
5
|
"files": [
|
|
6
6
|
"lib",
|
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
"clean-lib": "rimraf ./lib && rimraf ./esm",
|
|
31
31
|
"commit": "git-cz",
|
|
32
32
|
"generate-metadata": "node ./scripts/generate_metadata/index.mjs",
|
|
33
|
-
"generate-proptypes": "ts-node ./scripts/generate_proptypes/index.ts",
|
|
34
33
|
"type-check": "tsc --noEmit",
|
|
35
34
|
"type-check:watch": "npm run type-check -- --watch",
|
|
36
35
|
"build:types": "tsc -p tsconfig-build.json --emitDeclarationOnly --outDir ./lib && tsc -p tsconfig-build.json --emitDeclarationOnly --outDir ./esm"
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { MarginProps } from "styled-system";
|
|
3
|
-
|
|
4
|
-
export interface ContentProps extends MarginProps {
|
|
5
|
-
/** Aligns the content (left, center or right) */
|
|
6
|
-
align?: "left" | "center" | "right";
|
|
7
|
-
/**
|
|
8
|
-
* Over-rides the calculation of body width based on titleWidth.
|
|
9
|
-
* Sometimes we need the body to be full width while keeping a title width similar to other widths
|
|
10
|
-
*/
|
|
11
|
-
bodyFullWidth?: boolean;
|
|
12
|
-
/** The body of the content component */
|
|
13
|
-
children?: React.ReactNode;
|
|
14
|
-
/** Displays the content inline with the title */
|
|
15
|
-
inline?: boolean;
|
|
16
|
-
/** The title of the content component */
|
|
17
|
-
title?: React.ReactNode;
|
|
18
|
-
/** Sets a custom width for the title element */
|
|
19
|
-
titleWidth?: string;
|
|
20
|
-
/** Applies a theme to the Content Value: primary, secondary */
|
|
21
|
-
variant?: "primary" | "secondary";
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
declare function Content(props: ContentProps): JSX.Element;
|
|
25
|
-
|
|
26
|
-
export default Content;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { MarginProps } from "styled-system";
|
|
3
|
-
|
|
4
|
-
export interface ContentProps extends MarginProps {
|
|
5
|
-
/** Aligns the content (left, center or right) */
|
|
6
|
-
align?: "left" | "center" | "right";
|
|
7
|
-
/**
|
|
8
|
-
* Over-rides the calculation of body width based on titleWidth.
|
|
9
|
-
* Sometimes we need the body to be full width while keeping a title width similar to other widths
|
|
10
|
-
*/
|
|
11
|
-
bodyFullWidth?: boolean;
|
|
12
|
-
/** The body of the content component */
|
|
13
|
-
children?: React.ReactNode;
|
|
14
|
-
/** Displays the content inline with the title */
|
|
15
|
-
inline?: boolean;
|
|
16
|
-
/** The title of the content component */
|
|
17
|
-
title?: React.ReactNode;
|
|
18
|
-
/** Sets a custom width for the title element */
|
|
19
|
-
titleWidth?: string;
|
|
20
|
-
/** Applies a theme to the Content Value: primary, secondary */
|
|
21
|
-
variant?: "primary" | "secondary";
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
declare function Content(props: ContentProps): JSX.Element;
|
|
25
|
-
|
|
26
|
-
export default Content;
|