@zohodesk/components 1.2.62 → 1.2.63
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/.cli/propValidation_report.html +1 -1
- package/README.md +5 -0
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +12 -4
- package/es/MultiSelect/AdvancedMultiSelect.js +12 -6
- package/es/MultiSelect/MultiSelect.js +10 -4
- package/es/MultiSelect/MultiSelectWithAvatar.js +4 -2
- package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +28 -0
- package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +390 -0
- package/es/MultiSelect/props/defaultProps.js +8 -4
- package/es/MultiSelect/props/propTypes.js +4 -2
- package/es/Select/GroupSelect.js +4 -2
- package/es/Select/Select.js +3 -1
- package/es/Select/SelectWithAvatar.js +4 -2
- package/es/Select/props/defaultProps.js +4 -2
- package/es/Select/props/propTypes.js +4 -2
- package/es/utils/dropDownUtils.js +10 -6
- package/lib/MultiSelect/AdvancedGroupMultiSelect.js +11 -5
- package/lib/MultiSelect/AdvancedMultiSelect.js +12 -6
- package/lib/MultiSelect/MultiSelect.js +8 -4
- package/lib/MultiSelect/MultiSelectWithAvatar.js +4 -2
- package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +28 -0
- package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +390 -0
- package/lib/MultiSelect/props/defaultProps.js +8 -4
- package/lib/MultiSelect/props/propTypes.js +3 -2
- package/lib/Select/GroupSelect.js +4 -2
- package/lib/Select/Select.js +3 -1
- package/lib/Select/SelectWithAvatar.js +4 -2
- package/lib/Select/props/defaultProps.js +4 -2
- package/lib/Select/props/propTypes.js +4 -2
- package/lib/utils/dropDownUtils.js +12 -6
- package/package.json +1 -1
- package/result.json +1 -1
|
@@ -121,12 +121,14 @@ class AdvancedGroupMultiSelect extends React.Component {
|
|
|
121
121
|
handleFormatSelectedOptions(selectedOptionDetails, props) {
|
|
122
122
|
let {
|
|
123
123
|
valueField,
|
|
124
|
-
textField
|
|
124
|
+
textField,
|
|
125
|
+
allowValueFallback
|
|
125
126
|
} = props;
|
|
126
127
|
return this.formatSelectedOptions({
|
|
127
128
|
options: selectedOptionDetails,
|
|
128
129
|
valueField,
|
|
129
|
-
textField
|
|
130
|
+
textField,
|
|
131
|
+
allowValueFallback
|
|
130
132
|
});
|
|
131
133
|
}
|
|
132
134
|
|
|
@@ -182,6 +184,9 @@ class AdvancedGroupMultiSelect extends React.Component {
|
|
|
182
184
|
}
|
|
183
185
|
|
|
184
186
|
handleSelectedOptionIdChange(selectedGroupOptions, normalizedFormatOptions, normalizedSelectedOptions) {
|
|
187
|
+
const {
|
|
188
|
+
allowValueFallback
|
|
189
|
+
} = this.props;
|
|
185
190
|
let newSelectedOptions = selectedGroupOptions.map(option => optionIdGrouping(option.id, option.groupId));
|
|
186
191
|
let selectedOptionsLength = newSelectedOptions.length;
|
|
187
192
|
let formatOptions = this.objectConcat({
|
|
@@ -191,7 +196,8 @@ class AdvancedGroupMultiSelect extends React.Component {
|
|
|
191
196
|
return this.getSelectedOptions({
|
|
192
197
|
selectedOptions: newSelectedOptions,
|
|
193
198
|
normalizedFormatOptions: formatOptions,
|
|
194
|
-
selectedOptionsLength
|
|
199
|
+
selectedOptionsLength,
|
|
200
|
+
allowValueFallback
|
|
195
201
|
});
|
|
196
202
|
}
|
|
197
203
|
|
|
@@ -238,10 +244,12 @@ class AdvancedGroupMultiSelect extends React.Component {
|
|
|
238
244
|
|
|
239
245
|
handleGetGroupSelectOptions(props) {
|
|
240
246
|
let {
|
|
247
|
+
allowValueFallback,
|
|
241
248
|
groupedOptions = []
|
|
242
249
|
} = props;
|
|
243
250
|
return this.getGroupSelectOptions({
|
|
244
|
-
groupedOptions
|
|
251
|
+
groupedOptions,
|
|
252
|
+
allowValueFallback
|
|
245
253
|
});
|
|
246
254
|
}
|
|
247
255
|
|
|
@@ -146,7 +146,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
|
|
|
146
146
|
iconSize,
|
|
147
147
|
prefixText,
|
|
148
148
|
optionType,
|
|
149
|
-
disabledOptions
|
|
149
|
+
disabledOptions,
|
|
150
|
+
allowValueFallback
|
|
150
151
|
} = props;
|
|
151
152
|
return this.formatOptions({
|
|
152
153
|
options,
|
|
@@ -157,7 +158,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
|
|
|
157
158
|
prefixText,
|
|
158
159
|
optionType,
|
|
159
160
|
iconSize,
|
|
160
|
-
disabledOptions
|
|
161
|
+
disabledOptions,
|
|
162
|
+
allowValueFallback
|
|
161
163
|
});
|
|
162
164
|
}
|
|
163
165
|
|
|
@@ -168,7 +170,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
|
|
|
168
170
|
} = this.state || {};
|
|
169
171
|
const {
|
|
170
172
|
selectedOptionsLimit,
|
|
171
|
-
selectedOptionDetails
|
|
173
|
+
selectedOptionDetails,
|
|
174
|
+
allowValueFallback
|
|
172
175
|
} = props;
|
|
173
176
|
showedSelectedOptionsCount = getIsEmptyValue(showedSelectedOptionsCount) ? selectedOptionsLimit : showedSelectedOptionsCount;
|
|
174
177
|
const {
|
|
@@ -181,7 +184,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
|
|
|
181
184
|
return this.getSelectedOptions({
|
|
182
185
|
selectedOptions,
|
|
183
186
|
normalizedFormatOptions: formatOptions,
|
|
184
|
-
selectedOptionsLength: showedSelectedOptionsCount
|
|
187
|
+
selectedOptionsLength: showedSelectedOptionsCount,
|
|
188
|
+
allowValueFallback: allowValueFallback
|
|
185
189
|
});
|
|
186
190
|
}
|
|
187
191
|
|
|
@@ -193,7 +197,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
|
|
|
193
197
|
optionType,
|
|
194
198
|
iconName,
|
|
195
199
|
iconSize,
|
|
196
|
-
disabledOptions
|
|
200
|
+
disabledOptions,
|
|
201
|
+
allowValueFallback
|
|
197
202
|
} = props;
|
|
198
203
|
return this.formatSelectedOptions({
|
|
199
204
|
options: selectedOptionDetails,
|
|
@@ -203,7 +208,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
|
|
|
203
208
|
optionType,
|
|
204
209
|
iconName,
|
|
205
210
|
iconSize,
|
|
206
|
-
disabledOptions
|
|
211
|
+
disabledOptions,
|
|
212
|
+
allowValueFallback
|
|
207
213
|
});
|
|
208
214
|
}
|
|
209
215
|
|
|
@@ -216,7 +216,8 @@ export class MultiSelectComponent extends React.Component {
|
|
|
216
216
|
valueField,
|
|
217
217
|
textField,
|
|
218
218
|
prefixText,
|
|
219
|
-
disabledOptions
|
|
219
|
+
disabledOptions,
|
|
220
|
+
allowValueFallback
|
|
220
221
|
} = props;
|
|
221
222
|
return this.formatOptions({
|
|
222
223
|
options,
|
|
@@ -224,14 +225,19 @@ export class MultiSelectComponent extends React.Component {
|
|
|
224
225
|
textField,
|
|
225
226
|
prefixText,
|
|
226
227
|
optionType: 'default',
|
|
227
|
-
disabledOptions
|
|
228
|
+
disabledOptions,
|
|
229
|
+
allowValueFallback
|
|
228
230
|
});
|
|
229
231
|
}
|
|
230
232
|
|
|
231
|
-
handleGetSelectedOptions(selectedOptions, normalizedFormatOptions) {
|
|
233
|
+
handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
|
|
234
|
+
const {
|
|
235
|
+
allowValueFallback
|
|
236
|
+
} = props;
|
|
232
237
|
return this.getSelectedOptions({
|
|
233
238
|
selectedOptions,
|
|
234
|
-
normalizedFormatOptions
|
|
239
|
+
normalizedFormatOptions,
|
|
240
|
+
allowValueFallback
|
|
235
241
|
});
|
|
236
242
|
}
|
|
237
243
|
|
|
@@ -41,7 +41,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
|
|
|
41
41
|
valueField,
|
|
42
42
|
textField,
|
|
43
43
|
imageField,
|
|
44
|
-
disabledOptions
|
|
44
|
+
disabledOptions,
|
|
45
|
+
allowValueFallback
|
|
45
46
|
} = props;
|
|
46
47
|
return this.formatOptions({
|
|
47
48
|
options,
|
|
@@ -49,7 +50,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
|
|
|
49
50
|
textField,
|
|
50
51
|
imageField,
|
|
51
52
|
optionType: 'avatar',
|
|
52
|
-
disabledOptions
|
|
53
|
+
disabledOptions,
|
|
54
|
+
allowValueFallback
|
|
53
55
|
});
|
|
54
56
|
}
|
|
55
57
|
|
|
@@ -9,4 +9,32 @@ describe('AdvancedMultiSelect', () => {
|
|
|
9
9
|
} = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, null));
|
|
10
10
|
expect(asFragment()).toMatchSnapshot();
|
|
11
11
|
});
|
|
12
|
+
const options = [{
|
|
13
|
+
id: 1,
|
|
14
|
+
text: 'Apple'
|
|
15
|
+
}, {
|
|
16
|
+
id: 2,
|
|
17
|
+
text: 'Orange'
|
|
18
|
+
}, 'string test'];
|
|
19
|
+
test('rendering the options array with objects and string', () => {
|
|
20
|
+
const {
|
|
21
|
+
asFragment
|
|
22
|
+
} = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
|
|
23
|
+
isPopupOpen: true,
|
|
24
|
+
isPopupReady: true,
|
|
25
|
+
options: options
|
|
26
|
+
}));
|
|
27
|
+
expect(asFragment()).toMatchSnapshot();
|
|
28
|
+
});
|
|
29
|
+
test('rendering the options array with only objects using allowValueFallback', () => {
|
|
30
|
+
const {
|
|
31
|
+
asFragment
|
|
32
|
+
} = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
|
|
33
|
+
isPopupOpen: true,
|
|
34
|
+
isPopupReady: true,
|
|
35
|
+
options: options,
|
|
36
|
+
allowValueFallback: false
|
|
37
|
+
}));
|
|
38
|
+
expect(asFragment()).toMatchSnapshot();
|
|
39
|
+
});
|
|
12
40
|
});
|
|
@@ -72,3 +72,393 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
|
|
|
72
72
|
</div>
|
|
73
73
|
</DocumentFragment>
|
|
74
74
|
`;
|
|
75
|
+
|
|
76
|
+
exports[`AdvancedMultiSelect rendering the options array with objects and string 1`] = `
|
|
77
|
+
<DocumentFragment>
|
|
78
|
+
<div
|
|
79
|
+
class="wrapper effect "
|
|
80
|
+
data-id="multiSelectComp"
|
|
81
|
+
data-selector-id="advancedMultiSelect"
|
|
82
|
+
data-test-id="multiSelectComp"
|
|
83
|
+
>
|
|
84
|
+
<div
|
|
85
|
+
class="container medium hasBorder borderColor_default flex cover rowdir wrap vCenter"
|
|
86
|
+
data-id="containerComponent"
|
|
87
|
+
data-selector-id="container"
|
|
88
|
+
data-test-id="containerComponent"
|
|
89
|
+
>
|
|
90
|
+
<div
|
|
91
|
+
class="wrapper grow basisAuto shrinkOn"
|
|
92
|
+
data-id="multiSelectComp_textBox"
|
|
93
|
+
data-selector-id="box"
|
|
94
|
+
data-test-id="multiSelectComp_textBox"
|
|
95
|
+
>
|
|
96
|
+
<span
|
|
97
|
+
class=" custmSpan custmSpanMedium
|
|
98
|
+
"
|
|
99
|
+
/>
|
|
100
|
+
<div
|
|
101
|
+
class="container effect custmInputWrapper flex rowdir"
|
|
102
|
+
data-id="containerComponent"
|
|
103
|
+
data-selector-id="textBoxIcon"
|
|
104
|
+
data-test-id="containerComponent"
|
|
105
|
+
>
|
|
106
|
+
<div
|
|
107
|
+
class="grow basis shrinkOff"
|
|
108
|
+
data-id="boxComponent"
|
|
109
|
+
data-selector-id="box"
|
|
110
|
+
data-test-id="boxComponent"
|
|
111
|
+
>
|
|
112
|
+
<input
|
|
113
|
+
aria-controls="1"
|
|
114
|
+
aria-describedby="2"
|
|
115
|
+
aria-expanded="true"
|
|
116
|
+
aria-haspopup="true"
|
|
117
|
+
aria-owns="1"
|
|
118
|
+
autocomplete="off"
|
|
119
|
+
class=" container medium default effect borderColor_default "
|
|
120
|
+
data-id="textBoxIcon"
|
|
121
|
+
data-selector-id="textBoxIcon"
|
|
122
|
+
data-test-id="textBoxIcon"
|
|
123
|
+
maxlength="250"
|
|
124
|
+
role="combobox"
|
|
125
|
+
type="text"
|
|
126
|
+
value=""
|
|
127
|
+
/>
|
|
128
|
+
</div>
|
|
129
|
+
<div
|
|
130
|
+
class="iconContainer shrinkOff"
|
|
131
|
+
data-id="boxComponent"
|
|
132
|
+
data-selector-id="box"
|
|
133
|
+
data-test-id="boxComponent"
|
|
134
|
+
>
|
|
135
|
+
<div
|
|
136
|
+
class="flex cover rowdir"
|
|
137
|
+
data-id="containerComponent"
|
|
138
|
+
data-selector-id="container"
|
|
139
|
+
data-test-id="containerComponent"
|
|
140
|
+
/>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
<div
|
|
146
|
+
aria-multiselectable="true"
|
|
147
|
+
class="main container bottomMid default"
|
|
148
|
+
data-a11y-focus-main-area="true"
|
|
149
|
+
data-arrow-position="mid"
|
|
150
|
+
data-box-direction="bottom"
|
|
151
|
+
data-id="multiSelectComp_dropbox"
|
|
152
|
+
data-position="bottomMid"
|
|
153
|
+
data-selector-id="dropBox"
|
|
154
|
+
data-test-id="multiSelectComp_dropbox"
|
|
155
|
+
dot-ui-element="dropbox"
|
|
156
|
+
id="1"
|
|
157
|
+
role="listbox"
|
|
158
|
+
style="z-index: 4;"
|
|
159
|
+
>
|
|
160
|
+
<div
|
|
161
|
+
class="subContainer shadow boxPadding radius bounce defaultPalette"
|
|
162
|
+
data-id="multiSelectComp_dropbox_subcontainer"
|
|
163
|
+
data-selector-id="dropBox_subcontainer"
|
|
164
|
+
data-test-id="multiSelectComp_dropbox_subcontainer"
|
|
165
|
+
tabindex="-1"
|
|
166
|
+
>
|
|
167
|
+
<div
|
|
168
|
+
class="flex rowdir"
|
|
169
|
+
data-id="containerComponent"
|
|
170
|
+
data-selector-id="container"
|
|
171
|
+
data-test-id="containerComponent"
|
|
172
|
+
>
|
|
173
|
+
<div
|
|
174
|
+
class="grow basis shrinkOff"
|
|
175
|
+
data-id="boxComponent"
|
|
176
|
+
data-selector-id="box"
|
|
177
|
+
data-test-id="boxComponent"
|
|
178
|
+
>
|
|
179
|
+
<div
|
|
180
|
+
class="box flex cover coldir"
|
|
181
|
+
data-id="containerComponent"
|
|
182
|
+
data-selector-id="container"
|
|
183
|
+
data-test-id="containerComponent"
|
|
184
|
+
>
|
|
185
|
+
<div
|
|
186
|
+
class="small grow basis shrinkOn scrolly"
|
|
187
|
+
data-id="CardContent"
|
|
188
|
+
data-selector-id="cardContent"
|
|
189
|
+
data-test-id="CardContent"
|
|
190
|
+
>
|
|
191
|
+
<div
|
|
192
|
+
class="flex coldir"
|
|
193
|
+
data-id="containerComponent"
|
|
194
|
+
data-selector-id="container"
|
|
195
|
+
data-test-id="containerComponent"
|
|
196
|
+
tabindex="0"
|
|
197
|
+
>
|
|
198
|
+
<div
|
|
199
|
+
class="shrinkOff"
|
|
200
|
+
data-id="multiSelectComp_Options"
|
|
201
|
+
data-selector-id="box"
|
|
202
|
+
data-test-id="multiSelectComp_Options"
|
|
203
|
+
>
|
|
204
|
+
<li
|
|
205
|
+
aria-label="Apple"
|
|
206
|
+
aria-selected="false"
|
|
207
|
+
class="list medium default defaultHover mediumwithTick withBorder flex rowdir vCenter"
|
|
208
|
+
data-a11y-inset-focus="true"
|
|
209
|
+
data-a11y-list-active="true"
|
|
210
|
+
data-id="Apple"
|
|
211
|
+
data-selector-id="listItem"
|
|
212
|
+
data-test-id="Apple"
|
|
213
|
+
data-title="Apple"
|
|
214
|
+
role="option"
|
|
215
|
+
tabindex="0"
|
|
216
|
+
>
|
|
217
|
+
<div
|
|
218
|
+
class="value basisAuto shrinkOn"
|
|
219
|
+
data-id="boxComponent"
|
|
220
|
+
data-selector-id="box"
|
|
221
|
+
data-test-id="boxComponent"
|
|
222
|
+
>
|
|
223
|
+
Apple
|
|
224
|
+
</div>
|
|
225
|
+
</li>
|
|
226
|
+
<li
|
|
227
|
+
aria-label="Orange"
|
|
228
|
+
aria-selected="false"
|
|
229
|
+
class="list medium default mediumwithTick withBorder flex rowdir vCenter"
|
|
230
|
+
data-a11y-inset-focus="true"
|
|
231
|
+
data-a11y-list-active="false"
|
|
232
|
+
data-id="Orange"
|
|
233
|
+
data-selector-id="listItem"
|
|
234
|
+
data-test-id="Orange"
|
|
235
|
+
data-title="Orange"
|
|
236
|
+
role="option"
|
|
237
|
+
tabindex="0"
|
|
238
|
+
>
|
|
239
|
+
<div
|
|
240
|
+
class="value basisAuto shrinkOn"
|
|
241
|
+
data-id="boxComponent"
|
|
242
|
+
data-selector-id="box"
|
|
243
|
+
data-test-id="boxComponent"
|
|
244
|
+
>
|
|
245
|
+
Orange
|
|
246
|
+
</div>
|
|
247
|
+
</li>
|
|
248
|
+
<li
|
|
249
|
+
aria-label="string test"
|
|
250
|
+
aria-selected="false"
|
|
251
|
+
class="list medium default mediumwithTick withBorder flex rowdir vCenter"
|
|
252
|
+
data-a11y-inset-focus="true"
|
|
253
|
+
data-a11y-list-active="false"
|
|
254
|
+
data-id="string test"
|
|
255
|
+
data-selector-id="listItem"
|
|
256
|
+
data-test-id="string test"
|
|
257
|
+
data-title="string test"
|
|
258
|
+
role="option"
|
|
259
|
+
tabindex="0"
|
|
260
|
+
>
|
|
261
|
+
<div
|
|
262
|
+
class="value basisAuto shrinkOn"
|
|
263
|
+
data-id="boxComponent"
|
|
264
|
+
data-selector-id="box"
|
|
265
|
+
data-test-id="boxComponent"
|
|
266
|
+
>
|
|
267
|
+
string test
|
|
268
|
+
</div>
|
|
269
|
+
</li>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
</DocumentFragment>
|
|
280
|
+
`;
|
|
281
|
+
|
|
282
|
+
exports[`AdvancedMultiSelect rendering the options array with only objects using allowValueFallback 1`] = `
|
|
283
|
+
<DocumentFragment>
|
|
284
|
+
<div
|
|
285
|
+
class="wrapper effect "
|
|
286
|
+
data-id="multiSelectComp"
|
|
287
|
+
data-selector-id="advancedMultiSelect"
|
|
288
|
+
data-test-id="multiSelectComp"
|
|
289
|
+
>
|
|
290
|
+
<div
|
|
291
|
+
class="container medium hasBorder borderColor_default flex cover rowdir wrap vCenter"
|
|
292
|
+
data-id="containerComponent"
|
|
293
|
+
data-selector-id="container"
|
|
294
|
+
data-test-id="containerComponent"
|
|
295
|
+
>
|
|
296
|
+
<div
|
|
297
|
+
class="wrapper grow basisAuto shrinkOn"
|
|
298
|
+
data-id="multiSelectComp_textBox"
|
|
299
|
+
data-selector-id="box"
|
|
300
|
+
data-test-id="multiSelectComp_textBox"
|
|
301
|
+
>
|
|
302
|
+
<span
|
|
303
|
+
class=" custmSpan custmSpanMedium
|
|
304
|
+
"
|
|
305
|
+
/>
|
|
306
|
+
<div
|
|
307
|
+
class="container effect custmInputWrapper flex rowdir"
|
|
308
|
+
data-id="containerComponent"
|
|
309
|
+
data-selector-id="textBoxIcon"
|
|
310
|
+
data-test-id="containerComponent"
|
|
311
|
+
>
|
|
312
|
+
<div
|
|
313
|
+
class="grow basis shrinkOff"
|
|
314
|
+
data-id="boxComponent"
|
|
315
|
+
data-selector-id="box"
|
|
316
|
+
data-test-id="boxComponent"
|
|
317
|
+
>
|
|
318
|
+
<input
|
|
319
|
+
aria-controls="1"
|
|
320
|
+
aria-describedby="2"
|
|
321
|
+
aria-expanded="true"
|
|
322
|
+
aria-haspopup="true"
|
|
323
|
+
aria-owns="1"
|
|
324
|
+
autocomplete="off"
|
|
325
|
+
class=" container medium default effect borderColor_default "
|
|
326
|
+
data-id="textBoxIcon"
|
|
327
|
+
data-selector-id="textBoxIcon"
|
|
328
|
+
data-test-id="textBoxIcon"
|
|
329
|
+
maxlength="250"
|
|
330
|
+
role="combobox"
|
|
331
|
+
type="text"
|
|
332
|
+
value=""
|
|
333
|
+
/>
|
|
334
|
+
</div>
|
|
335
|
+
<div
|
|
336
|
+
class="iconContainer shrinkOff"
|
|
337
|
+
data-id="boxComponent"
|
|
338
|
+
data-selector-id="box"
|
|
339
|
+
data-test-id="boxComponent"
|
|
340
|
+
>
|
|
341
|
+
<div
|
|
342
|
+
class="flex cover rowdir"
|
|
343
|
+
data-id="containerComponent"
|
|
344
|
+
data-selector-id="container"
|
|
345
|
+
data-test-id="containerComponent"
|
|
346
|
+
/>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
<div
|
|
352
|
+
aria-multiselectable="true"
|
|
353
|
+
class="main container bottomMid default"
|
|
354
|
+
data-a11y-focus-main-area="true"
|
|
355
|
+
data-arrow-position="mid"
|
|
356
|
+
data-box-direction="bottom"
|
|
357
|
+
data-id="multiSelectComp_dropbox"
|
|
358
|
+
data-position="bottomMid"
|
|
359
|
+
data-selector-id="dropBox"
|
|
360
|
+
data-test-id="multiSelectComp_dropbox"
|
|
361
|
+
dot-ui-element="dropbox"
|
|
362
|
+
id="1"
|
|
363
|
+
role="listbox"
|
|
364
|
+
style="z-index: 4;"
|
|
365
|
+
>
|
|
366
|
+
<div
|
|
367
|
+
class="subContainer shadow boxPadding radius bounce defaultPalette"
|
|
368
|
+
data-id="multiSelectComp_dropbox_subcontainer"
|
|
369
|
+
data-selector-id="dropBox_subcontainer"
|
|
370
|
+
data-test-id="multiSelectComp_dropbox_subcontainer"
|
|
371
|
+
tabindex="-1"
|
|
372
|
+
>
|
|
373
|
+
<div
|
|
374
|
+
class="flex rowdir"
|
|
375
|
+
data-id="containerComponent"
|
|
376
|
+
data-selector-id="container"
|
|
377
|
+
data-test-id="containerComponent"
|
|
378
|
+
>
|
|
379
|
+
<div
|
|
380
|
+
class="grow basis shrinkOff"
|
|
381
|
+
data-id="boxComponent"
|
|
382
|
+
data-selector-id="box"
|
|
383
|
+
data-test-id="boxComponent"
|
|
384
|
+
>
|
|
385
|
+
<div
|
|
386
|
+
class="box flex cover coldir"
|
|
387
|
+
data-id="containerComponent"
|
|
388
|
+
data-selector-id="container"
|
|
389
|
+
data-test-id="containerComponent"
|
|
390
|
+
>
|
|
391
|
+
<div
|
|
392
|
+
class="small grow basis shrinkOn scrolly"
|
|
393
|
+
data-id="CardContent"
|
|
394
|
+
data-selector-id="cardContent"
|
|
395
|
+
data-test-id="CardContent"
|
|
396
|
+
>
|
|
397
|
+
<div
|
|
398
|
+
class="flex coldir"
|
|
399
|
+
data-id="containerComponent"
|
|
400
|
+
data-selector-id="container"
|
|
401
|
+
data-test-id="containerComponent"
|
|
402
|
+
tabindex="0"
|
|
403
|
+
>
|
|
404
|
+
<div
|
|
405
|
+
class="shrinkOff"
|
|
406
|
+
data-id="multiSelectComp_Options"
|
|
407
|
+
data-selector-id="box"
|
|
408
|
+
data-test-id="multiSelectComp_Options"
|
|
409
|
+
>
|
|
410
|
+
<li
|
|
411
|
+
aria-label="Apple"
|
|
412
|
+
aria-selected="false"
|
|
413
|
+
class="list medium default defaultHover mediumwithTick withBorder flex rowdir vCenter"
|
|
414
|
+
data-a11y-inset-focus="true"
|
|
415
|
+
data-a11y-list-active="true"
|
|
416
|
+
data-id="Apple"
|
|
417
|
+
data-selector-id="listItem"
|
|
418
|
+
data-test-id="Apple"
|
|
419
|
+
data-title="Apple"
|
|
420
|
+
role="option"
|
|
421
|
+
tabindex="0"
|
|
422
|
+
>
|
|
423
|
+
<div
|
|
424
|
+
class="value basisAuto shrinkOn"
|
|
425
|
+
data-id="boxComponent"
|
|
426
|
+
data-selector-id="box"
|
|
427
|
+
data-test-id="boxComponent"
|
|
428
|
+
>
|
|
429
|
+
Apple
|
|
430
|
+
</div>
|
|
431
|
+
</li>
|
|
432
|
+
<li
|
|
433
|
+
aria-label="Orange"
|
|
434
|
+
aria-selected="false"
|
|
435
|
+
class="list medium default mediumwithTick withBorder flex rowdir vCenter"
|
|
436
|
+
data-a11y-inset-focus="true"
|
|
437
|
+
data-a11y-list-active="false"
|
|
438
|
+
data-id="Orange"
|
|
439
|
+
data-selector-id="listItem"
|
|
440
|
+
data-test-id="Orange"
|
|
441
|
+
data-title="Orange"
|
|
442
|
+
role="option"
|
|
443
|
+
tabindex="0"
|
|
444
|
+
>
|
|
445
|
+
<div
|
|
446
|
+
class="value basisAuto shrinkOn"
|
|
447
|
+
data-id="boxComponent"
|
|
448
|
+
data-selector-id="box"
|
|
449
|
+
data-test-id="boxComponent"
|
|
450
|
+
>
|
|
451
|
+
Orange
|
|
452
|
+
</div>
|
|
453
|
+
</li>
|
|
454
|
+
</div>
|
|
455
|
+
</div>
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
458
|
+
</div>
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
</div>
|
|
463
|
+
</DocumentFragment>
|
|
464
|
+
`;
|
|
@@ -37,7 +37,8 @@ export const AdvancedGroupMultiSelect_defaultProps = {
|
|
|
37
37
|
needEffect: true,
|
|
38
38
|
palette: 'default',
|
|
39
39
|
isLoading: false,
|
|
40
|
-
dataSelectorId: 'advancedGroupMultiSelect'
|
|
40
|
+
dataSelectorId: 'advancedGroupMultiSelect',
|
|
41
|
+
allowValueFallback: true
|
|
41
42
|
};
|
|
42
43
|
export const AdvancedMultiSelect_defaultProps = {
|
|
43
44
|
animationStyle: 'bounce',
|
|
@@ -71,7 +72,8 @@ export const AdvancedMultiSelect_defaultProps = {
|
|
|
71
72
|
dataSelectorId: 'advancedMultiSelect',
|
|
72
73
|
customClass: {},
|
|
73
74
|
isAbsolutePositioningNeeded: true,
|
|
74
|
-
isRestrictScroll: false
|
|
75
|
+
isRestrictScroll: false,
|
|
76
|
+
allowValueFallback: true
|
|
75
77
|
};
|
|
76
78
|
export const EmptyState_defaultProps = {
|
|
77
79
|
dataId: 'empty',
|
|
@@ -118,7 +120,8 @@ export const MultiSelect_defaultProps = {
|
|
|
118
120
|
selectedOptionsCount: 0,
|
|
119
121
|
cardHeaderName: '',
|
|
120
122
|
needResponsive: true,
|
|
121
|
-
customProps: {}
|
|
123
|
+
customProps: {},
|
|
124
|
+
allowValueFallback: true
|
|
122
125
|
};
|
|
123
126
|
export const MultiSelectHeader_defaultProps = {
|
|
124
127
|
dataId: 'MultiSelectHeader'
|
|
@@ -155,7 +158,8 @@ export const MultiSelectWithAvatar_defaultProps = {
|
|
|
155
158
|
dataSelectorId: 'multiSelectWithAvatar',
|
|
156
159
|
keepSelectedOptions: false,
|
|
157
160
|
customProps: {},
|
|
158
|
-
needResponsive: true
|
|
161
|
+
needResponsive: true,
|
|
162
|
+
allowValueFallback: true
|
|
159
163
|
};
|
|
160
164
|
export const SelectedOptions_defaultProps = {
|
|
161
165
|
size: 'medium',
|
|
@@ -112,7 +112,8 @@ export const MultiSelect_propTypes = {
|
|
|
112
112
|
customProps: PropTypes.shape({
|
|
113
113
|
TextBoxIconProps: PropTypes.object
|
|
114
114
|
}),
|
|
115
|
-
isFocus: PropTypes.bool
|
|
115
|
+
isFocus: PropTypes.bool,
|
|
116
|
+
allowValueFallback: PropTypes.bool
|
|
116
117
|
};
|
|
117
118
|
export const MultiSelectHeader_propTypes = {
|
|
118
119
|
dataId: PropTypes.string,
|
|
@@ -248,7 +249,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
|
|
|
248
249
|
searchStr: PropTypes.string,
|
|
249
250
|
children: PropTypes.node,
|
|
250
251
|
dataSelectorId: PropTypes.string,
|
|
251
|
-
isFocus: PropTypes.bool
|
|
252
|
+
isFocus: PropTypes.bool,
|
|
253
|
+
allowValueFallback: PropTypes.bool
|
|
252
254
|
};
|
|
253
255
|
export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
|
|
254
256
|
selectedOptionDetails: PropTypes.string,
|
package/es/Select/GroupSelect.js
CHANGED
|
@@ -170,10 +170,12 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
170
170
|
|
|
171
171
|
handleGetGroupSelectOptions(props) {
|
|
172
172
|
let {
|
|
173
|
-
groupedOptions
|
|
173
|
+
groupedOptions,
|
|
174
|
+
allowValueFallback
|
|
174
175
|
} = props;
|
|
175
176
|
return this.getGroupSelectOptions({
|
|
176
|
-
groupedOptions
|
|
177
|
+
groupedOptions,
|
|
178
|
+
allowValueFallback
|
|
177
179
|
});
|
|
178
180
|
}
|
|
179
181
|
|
package/es/Select/Select.js
CHANGED
|
@@ -250,6 +250,7 @@ export class SelectComponent extends Component {
|
|
|
250
250
|
options,
|
|
251
251
|
valueField,
|
|
252
252
|
textField,
|
|
253
|
+
allowValueFallback,
|
|
253
254
|
customProps = {}
|
|
254
255
|
} = props;
|
|
255
256
|
let {
|
|
@@ -259,7 +260,8 @@ export class SelectComponent extends Component {
|
|
|
259
260
|
options,
|
|
260
261
|
valueField,
|
|
261
262
|
textField,
|
|
262
|
-
listItemProps
|
|
263
|
+
listItemProps,
|
|
264
|
+
allowValueFallback
|
|
263
265
|
});
|
|
264
266
|
}
|
|
265
267
|
|