@atlaskit/react-select 1.0.5 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/components/menu.js +10 -14
- package/dist/cjs/components/option.js +0 -1
- package/dist/cjs/select.js +17 -20
- package/dist/cjs/use-creatable.js +5 -10
- package/dist/es2019/components/menu.js +11 -15
- package/dist/es2019/components/option.js +0 -1
- package/dist/es2019/select.js +17 -20
- package/dist/es2019/use-creatable.js +2 -7
- package/dist/esm/components/menu.js +10 -14
- package/dist/esm/components/option.js +0 -1
- package/dist/esm/select.js +17 -20
- package/dist/esm/use-creatable.js +5 -10
- package/dist/types/components/indicators.d.ts +4 -0
- package/dist/types/components/menu.d.ts +1 -1
- package/dist/types/select.d.ts +6 -2
- package/dist/types-ts4.5/components/indicators.d.ts +4 -0
- package/dist/types-ts4.5/components/menu.d.ts +1 -1
- package/dist/types-ts4.5/select.d.ts +6 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/react-select
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#156026](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156026)
|
|
8
|
+
[`709b9c76673df`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/709b9c76673df) -
|
|
9
|
+
add clearControlLabel prop to pass aria-label to clear icon button
|
|
10
|
+
|
|
11
|
+
## 1.0.6
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#154659](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154659)
|
|
16
|
+
[`110ee6d55bdb1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/110ee6d55bdb1) -
|
|
17
|
+
Remove ts-ignore comments
|
|
18
|
+
|
|
3
19
|
## 1.0.5
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -310,7 +310,6 @@ var MenuList = exports.MenuList = function MenuList(props) {
|
|
|
310
310
|
'menu-list': true,
|
|
311
311
|
'menu-list--is-multi': isMulti
|
|
312
312
|
}), {
|
|
313
|
-
//@ts-ignore
|
|
314
313
|
ref: innerRef
|
|
315
314
|
}, innerProps), children);
|
|
316
315
|
};
|
|
@@ -338,19 +337,16 @@ var NoOptionsMessage = exports.NoOptionsMessage = function NoOptionsMessage(_ref
|
|
|
338
337
|
children = _ref6$children === void 0 ? 'No options' : _ref6$children,
|
|
339
338
|
innerProps = _ref6.innerProps,
|
|
340
339
|
restProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
|
|
341
|
-
return (
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
role: "option"
|
|
352
|
-
}, innerProps), children)
|
|
353
|
-
);
|
|
340
|
+
return (0, _react2.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(_objectSpread(_objectSpread({}, restProps), {}, {
|
|
341
|
+
children: children,
|
|
342
|
+
innerProps: innerProps
|
|
343
|
+
}), 'noOptionsMessage', {
|
|
344
|
+
'menu-notice': true,
|
|
345
|
+
'menu-notice--no-options': true
|
|
346
|
+
}), {
|
|
347
|
+
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
|
|
348
|
+
role: "option"
|
|
349
|
+
}, innerProps), children);
|
|
354
350
|
};
|
|
355
351
|
|
|
356
352
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
package/dist/cjs/select.js
CHANGED
|
@@ -822,7 +822,6 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
822
822
|
event.preventDefault();
|
|
823
823
|
});
|
|
824
824
|
_this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
|
|
825
|
-
//@ts-ignore
|
|
826
825
|
_this.state.selectValue = (0, _utils.cleanValue)(_props.value);
|
|
827
826
|
// Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
|
|
828
827
|
if (_props.menuIsOpen && _this.state.selectValue.length) {
|
|
@@ -1260,7 +1259,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
1260
1259
|
'aria-labelledby': this.props['aria-labelledby'] || labelId,
|
|
1261
1260
|
'aria-required': required || isRequired,
|
|
1262
1261
|
role: 'combobox',
|
|
1263
|
-
'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId
|
|
1262
|
+
'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId ? this.state.focusedOptionId : undefined
|
|
1264
1263
|
}, menuIsOpen && {
|
|
1265
1264
|
'aria-controls': this.getElementId('listbox')
|
|
1266
1265
|
}), !isSearchable && {
|
|
@@ -1272,22 +1271,18 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
1272
1271
|
});
|
|
1273
1272
|
if (!isSearchable) {
|
|
1274
1273
|
// use a dummy input to maintain focus/blur functionality
|
|
1275
|
-
return (
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
form: form,
|
|
1288
|
-
value: ""
|
|
1289
|
-
}, ariaAttributes))
|
|
1290
|
-
);
|
|
1274
|
+
return /*#__PURE__*/_react.default.createElement(_internal.DummyInput, (0, _extends2.default)({
|
|
1275
|
+
id: id,
|
|
1276
|
+
innerRef: this.getInputRef,
|
|
1277
|
+
onBlur: this.onInputBlur,
|
|
1278
|
+
onChange: _utils.noop,
|
|
1279
|
+
onFocus: this.onInputFocus,
|
|
1280
|
+
disabled: isDisabled,
|
|
1281
|
+
tabIndex: tabIndex,
|
|
1282
|
+
inputMode: "none",
|
|
1283
|
+
form: form,
|
|
1284
|
+
value: ""
|
|
1285
|
+
}, ariaAttributes));
|
|
1291
1286
|
}
|
|
1292
1287
|
return /*#__PURE__*/_react.default.createElement(Input, (0, _extends2.default)({}, commonProps, {
|
|
1293
1288
|
autoCapitalize: "none",
|
|
@@ -1384,6 +1379,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
1384
1379
|
ClearIndicator = _this$getComponents3.ClearIndicator;
|
|
1385
1380
|
var commonProps = this.commonProps;
|
|
1386
1381
|
var _this$props10 = this.props,
|
|
1382
|
+
clearControlLabel = _this$props10.clearControlLabel,
|
|
1387
1383
|
isDisabled = _this$props10.isDisabled,
|
|
1388
1384
|
isLoading = _this$props10.isLoading;
|
|
1389
1385
|
var isFocused = this.state.isFocused;
|
|
@@ -1395,7 +1391,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
1395
1391
|
onTouchEnd: this.onClearIndicatorTouchEnd,
|
|
1396
1392
|
'aria-hidden': 'true'
|
|
1397
1393
|
};
|
|
1398
|
-
return /*#__PURE__*/_react.default.createElement(ClearIndicator, (0, _extends2.default)({
|
|
1394
|
+
return /*#__PURE__*/_react.default.createElement(ClearIndicator, (0, _extends2.default)({
|
|
1395
|
+
clearControlLabel: clearControlLabel
|
|
1396
|
+
}, commonProps, {
|
|
1399
1397
|
innerProps: innerProps,
|
|
1400
1398
|
isFocused: isFocused
|
|
1401
1399
|
}));
|
|
@@ -1762,7 +1760,6 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
1762
1760
|
menuIsOpen = props.menuIsOpen,
|
|
1763
1761
|
inputValue = props.inputValue,
|
|
1764
1762
|
isMulti = props.isMulti;
|
|
1765
|
-
//@ts-ignore
|
|
1766
1763
|
var selectValue = (0, _utils.cleanValue)(value);
|
|
1767
1764
|
var newMenuOptionsState = {};
|
|
1768
1765
|
if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
|
|
@@ -73,13 +73,10 @@ function useCreatable(_ref) {
|
|
|
73
73
|
value = restSelectProps.value,
|
|
74
74
|
name = restSelectProps.name;
|
|
75
75
|
var newOption = (0, _react.useMemo)(function () {
|
|
76
|
-
return (
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
getOptionLabel: getOptionLabel
|
|
81
|
-
}) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined
|
|
82
|
-
);
|
|
76
|
+
return isValidNewOption(inputValue, (0, _utils.cleanValue)(value), propsOptions, {
|
|
77
|
+
getOptionValue: getOptionValue,
|
|
78
|
+
getOptionLabel: getOptionLabel
|
|
79
|
+
}) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined;
|
|
83
80
|
}, [formatCreateLabel, getNewOptionData, getOptionLabel, getOptionValue, inputValue, isValidNewOption, propsOptions, value]);
|
|
84
81
|
var options = (0, _react.useMemo)(function () {
|
|
85
82
|
return (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat((0, _toConsumableArray2.default)(propsOptions)) : [].concat((0, _toConsumableArray2.default)(propsOptions), [newOption]) : propsOptions;
|
|
@@ -99,9 +96,7 @@ function useCreatable(_ref) {
|
|
|
99
96
|
name: name,
|
|
100
97
|
option: newOptionData
|
|
101
98
|
};
|
|
102
|
-
propsOnChange(
|
|
103
|
-
//@ts-ignore
|
|
104
|
-
(0, _utils.valueTernary)(isMulti, [].concat((0, _toConsumableArray2.default)((0, _utils.cleanValue)(value)), [newOptionData]), newOptionData), newActionMeta);
|
|
99
|
+
propsOnChange((0, _utils.valueTernary)(isMulti, [].concat((0, _toConsumableArray2.default)((0, _utils.cleanValue)(value)), [newOptionData]), newOptionData), newActionMeta);
|
|
105
100
|
}
|
|
106
101
|
return;
|
|
107
102
|
}
|
|
@@ -313,7 +313,6 @@ export const MenuList = props => {
|
|
|
313
313
|
'menu-list': true,
|
|
314
314
|
'menu-list--is-multi': isMulti
|
|
315
315
|
}), {
|
|
316
|
-
//@ts-ignore
|
|
317
316
|
ref: innerRef
|
|
318
317
|
}, innerProps), children);
|
|
319
318
|
};
|
|
@@ -344,20 +343,17 @@ export const NoOptionsMessage = ({
|
|
|
344
343
|
innerProps,
|
|
345
344
|
...restProps
|
|
346
345
|
}) => {
|
|
347
|
-
return (
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
role: "option"
|
|
359
|
-
}, innerProps), children)
|
|
360
|
-
);
|
|
346
|
+
return jsx("div", _extends({}, getStyleProps({
|
|
347
|
+
...restProps,
|
|
348
|
+
children,
|
|
349
|
+
innerProps
|
|
350
|
+
}, 'noOptionsMessage', {
|
|
351
|
+
'menu-notice': true,
|
|
352
|
+
'menu-notice--no-options': true
|
|
353
|
+
}), {
|
|
354
|
+
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
|
|
355
|
+
role: "option"
|
|
356
|
+
}, innerProps), children);
|
|
361
357
|
};
|
|
362
358
|
|
|
363
359
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
package/dist/es2019/select.js
CHANGED
|
@@ -797,7 +797,6 @@ export default class Select extends Component {
|
|
|
797
797
|
event.preventDefault();
|
|
798
798
|
});
|
|
799
799
|
this.state.instancePrefix = 'react-select-' + (this.props.instanceId || ++instanceId);
|
|
800
|
-
//@ts-ignore
|
|
801
800
|
this.state.selectValue = cleanValue(_props.value);
|
|
802
801
|
// Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
|
|
803
802
|
if (_props.menuIsOpen && this.state.selectValue.length) {
|
|
@@ -826,7 +825,6 @@ export default class Select extends Component {
|
|
|
826
825
|
inputValue,
|
|
827
826
|
isMulti
|
|
828
827
|
} = props;
|
|
829
|
-
//@ts-ignore
|
|
830
828
|
const selectValue = cleanValue(value);
|
|
831
829
|
let newMenuOptionsState = {};
|
|
832
830
|
if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
|
|
@@ -1270,7 +1268,7 @@ export default class Select extends Component {
|
|
|
1270
1268
|
'aria-labelledby': this.props['aria-labelledby'] || labelId,
|
|
1271
1269
|
'aria-required': required || isRequired,
|
|
1272
1270
|
role: 'combobox',
|
|
1273
|
-
'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId,
|
|
1271
|
+
'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId ? this.state.focusedOptionId : undefined,
|
|
1274
1272
|
...(menuIsOpen && {
|
|
1275
1273
|
'aria-controls': this.getElementId('listbox')
|
|
1276
1274
|
}),
|
|
@@ -1285,22 +1283,18 @@ export default class Select extends Component {
|
|
|
1285
1283
|
};
|
|
1286
1284
|
if (!isSearchable) {
|
|
1287
1285
|
// use a dummy input to maintain focus/blur functionality
|
|
1288
|
-
return (
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
form: form,
|
|
1301
|
-
value: ""
|
|
1302
|
-
}, ariaAttributes))
|
|
1303
|
-
);
|
|
1286
|
+
return /*#__PURE__*/React.createElement(DummyInput, _extends({
|
|
1287
|
+
id: id,
|
|
1288
|
+
innerRef: this.getInputRef,
|
|
1289
|
+
onBlur: this.onInputBlur,
|
|
1290
|
+
onChange: noop,
|
|
1291
|
+
onFocus: this.onInputFocus,
|
|
1292
|
+
disabled: isDisabled,
|
|
1293
|
+
tabIndex: tabIndex,
|
|
1294
|
+
inputMode: "none",
|
|
1295
|
+
form: form,
|
|
1296
|
+
value: ""
|
|
1297
|
+
}, ariaAttributes));
|
|
1304
1298
|
}
|
|
1305
1299
|
return /*#__PURE__*/React.createElement(Input, _extends({}, commonProps, {
|
|
1306
1300
|
autoCapitalize: "none",
|
|
@@ -1396,6 +1390,7 @@ export default class Select extends Component {
|
|
|
1396
1390
|
commonProps
|
|
1397
1391
|
} = this;
|
|
1398
1392
|
const {
|
|
1393
|
+
clearControlLabel,
|
|
1399
1394
|
isDisabled,
|
|
1400
1395
|
isLoading
|
|
1401
1396
|
} = this.props;
|
|
@@ -1410,7 +1405,9 @@ export default class Select extends Component {
|
|
|
1410
1405
|
onTouchEnd: this.onClearIndicatorTouchEnd,
|
|
1411
1406
|
'aria-hidden': 'true'
|
|
1412
1407
|
};
|
|
1413
|
-
return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
|
|
1408
|
+
return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
|
|
1409
|
+
clearControlLabel: clearControlLabel
|
|
1410
|
+
}, commonProps, {
|
|
1414
1411
|
innerProps: innerProps,
|
|
1415
1412
|
isFocused: isFocused
|
|
1416
1413
|
}));
|
|
@@ -25,7 +25,6 @@ export default function useCreatable({
|
|
|
25
25
|
allowCreateWhileLoading = false,
|
|
26
26
|
createOptionPosition = 'last',
|
|
27
27
|
formatCreateLabel = builtins.formatCreateLabel,
|
|
28
|
-
//@ts-ignore
|
|
29
28
|
isValidNewOption = builtins.isValidNewOption,
|
|
30
29
|
//@ts-ignore
|
|
31
30
|
getNewOptionData = builtins.getNewOptionData,
|
|
@@ -43,9 +42,7 @@ export default function useCreatable({
|
|
|
43
42
|
value,
|
|
44
43
|
name
|
|
45
44
|
} = restSelectProps;
|
|
46
|
-
const newOption = useMemo(() =>
|
|
47
|
-
//@ts-ignore
|
|
48
|
-
isValidNewOption(inputValue, cleanValue(value), propsOptions, {
|
|
45
|
+
const newOption = useMemo(() => isValidNewOption(inputValue, cleanValue(value), propsOptions, {
|
|
49
46
|
getOptionValue,
|
|
50
47
|
getOptionLabel
|
|
51
48
|
}) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined, [formatCreateLabel, getNewOptionData, getOptionLabel, getOptionValue, inputValue, isValidNewOption, propsOptions, value]);
|
|
@@ -65,9 +62,7 @@ export default function useCreatable({
|
|
|
65
62
|
name,
|
|
66
63
|
option: newOptionData
|
|
67
64
|
};
|
|
68
|
-
propsOnChange(
|
|
69
|
-
//@ts-ignore
|
|
70
|
-
valueTernary(isMulti, [...cleanValue(value), newOptionData], newOptionData), newActionMeta);
|
|
65
|
+
propsOnChange(valueTernary(isMulti, [...cleanValue(value), newOptionData], newOptionData), newActionMeta);
|
|
71
66
|
}
|
|
72
67
|
return;
|
|
73
68
|
}
|
|
@@ -306,7 +306,6 @@ export var MenuList = function MenuList(props) {
|
|
|
306
306
|
'menu-list': true,
|
|
307
307
|
'menu-list--is-multi': isMulti
|
|
308
308
|
}), {
|
|
309
|
-
//@ts-ignore
|
|
310
309
|
ref: innerRef
|
|
311
310
|
}, innerProps), children);
|
|
312
311
|
};
|
|
@@ -334,19 +333,16 @@ export var NoOptionsMessage = function NoOptionsMessage(_ref6) {
|
|
|
334
333
|
children = _ref6$children === void 0 ? 'No options' : _ref6$children,
|
|
335
334
|
innerProps = _ref6.innerProps,
|
|
336
335
|
restProps = _objectWithoutProperties(_ref6, _excluded);
|
|
337
|
-
return (
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
role: "option"
|
|
348
|
-
}, innerProps), children)
|
|
349
|
-
);
|
|
336
|
+
return jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
|
|
337
|
+
children: children,
|
|
338
|
+
innerProps: innerProps
|
|
339
|
+
}), 'noOptionsMessage', {
|
|
340
|
+
'menu-notice': true,
|
|
341
|
+
'menu-notice--no-options': true
|
|
342
|
+
}), {
|
|
343
|
+
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
|
|
344
|
+
role: "option"
|
|
345
|
+
}, innerProps), children);
|
|
350
346
|
};
|
|
351
347
|
|
|
352
348
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
package/dist/esm/select.js
CHANGED
|
@@ -812,7 +812,6 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
812
812
|
event.preventDefault();
|
|
813
813
|
});
|
|
814
814
|
_this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
|
|
815
|
-
//@ts-ignore
|
|
816
815
|
_this.state.selectValue = cleanValue(_props.value);
|
|
817
816
|
// Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
|
|
818
817
|
if (_props.menuIsOpen && _this.state.selectValue.length) {
|
|
@@ -1250,7 +1249,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1250
1249
|
'aria-labelledby': this.props['aria-labelledby'] || labelId,
|
|
1251
1250
|
'aria-required': required || isRequired,
|
|
1252
1251
|
role: 'combobox',
|
|
1253
|
-
'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId
|
|
1252
|
+
'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId ? this.state.focusedOptionId : undefined
|
|
1254
1253
|
}, menuIsOpen && {
|
|
1255
1254
|
'aria-controls': this.getElementId('listbox')
|
|
1256
1255
|
}), !isSearchable && {
|
|
@@ -1262,22 +1261,18 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1262
1261
|
});
|
|
1263
1262
|
if (!isSearchable) {
|
|
1264
1263
|
// use a dummy input to maintain focus/blur functionality
|
|
1265
|
-
return (
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
form: form,
|
|
1278
|
-
value: ""
|
|
1279
|
-
}, ariaAttributes))
|
|
1280
|
-
);
|
|
1264
|
+
return /*#__PURE__*/React.createElement(DummyInput, _extends({
|
|
1265
|
+
id: id,
|
|
1266
|
+
innerRef: this.getInputRef,
|
|
1267
|
+
onBlur: this.onInputBlur,
|
|
1268
|
+
onChange: noop,
|
|
1269
|
+
onFocus: this.onInputFocus,
|
|
1270
|
+
disabled: isDisabled,
|
|
1271
|
+
tabIndex: tabIndex,
|
|
1272
|
+
inputMode: "none",
|
|
1273
|
+
form: form,
|
|
1274
|
+
value: ""
|
|
1275
|
+
}, ariaAttributes));
|
|
1281
1276
|
}
|
|
1282
1277
|
return /*#__PURE__*/React.createElement(Input, _extends({}, commonProps, {
|
|
1283
1278
|
autoCapitalize: "none",
|
|
@@ -1374,6 +1369,7 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1374
1369
|
ClearIndicator = _this$getComponents3.ClearIndicator;
|
|
1375
1370
|
var commonProps = this.commonProps;
|
|
1376
1371
|
var _this$props10 = this.props,
|
|
1372
|
+
clearControlLabel = _this$props10.clearControlLabel,
|
|
1377
1373
|
isDisabled = _this$props10.isDisabled,
|
|
1378
1374
|
isLoading = _this$props10.isLoading;
|
|
1379
1375
|
var isFocused = this.state.isFocused;
|
|
@@ -1385,7 +1381,9 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1385
1381
|
onTouchEnd: this.onClearIndicatorTouchEnd,
|
|
1386
1382
|
'aria-hidden': 'true'
|
|
1387
1383
|
};
|
|
1388
|
-
return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
|
|
1384
|
+
return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
|
|
1385
|
+
clearControlLabel: clearControlLabel
|
|
1386
|
+
}, commonProps, {
|
|
1389
1387
|
innerProps: innerProps,
|
|
1390
1388
|
isFocused: isFocused
|
|
1391
1389
|
}));
|
|
@@ -1752,7 +1750,6 @@ var Select = /*#__PURE__*/function (_Component) {
|
|
|
1752
1750
|
menuIsOpen = props.menuIsOpen,
|
|
1753
1751
|
inputValue = props.inputValue,
|
|
1754
1752
|
isMulti = props.isMulti;
|
|
1755
|
-
//@ts-ignore
|
|
1756
1753
|
var selectValue = cleanValue(value);
|
|
1757
1754
|
var newMenuOptionsState = {};
|
|
1758
1755
|
if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
|
|
@@ -66,13 +66,10 @@ export default function useCreatable(_ref) {
|
|
|
66
66
|
value = restSelectProps.value,
|
|
67
67
|
name = restSelectProps.name;
|
|
68
68
|
var newOption = useMemo(function () {
|
|
69
|
-
return (
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
getOptionLabel: getOptionLabel
|
|
74
|
-
}) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined
|
|
75
|
-
);
|
|
69
|
+
return isValidNewOption(inputValue, cleanValue(value), propsOptions, {
|
|
70
|
+
getOptionValue: getOptionValue,
|
|
71
|
+
getOptionLabel: getOptionLabel
|
|
72
|
+
}) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined;
|
|
76
73
|
}, [formatCreateLabel, getNewOptionData, getOptionLabel, getOptionValue, inputValue, isValidNewOption, propsOptions, value]);
|
|
77
74
|
var options = useMemo(function () {
|
|
78
75
|
return (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(propsOptions)) : [].concat(_toConsumableArray(propsOptions), [newOption]) : propsOptions;
|
|
@@ -92,9 +89,7 @@ export default function useCreatable(_ref) {
|
|
|
92
89
|
name: name,
|
|
93
90
|
option: newOptionData
|
|
94
91
|
};
|
|
95
|
-
propsOnChange(
|
|
96
|
-
//@ts-ignore
|
|
97
|
-
valueTernary(isMulti, [].concat(_toConsumableArray(cleanValue(value)), [newOptionData]), newOptionData), newActionMeta);
|
|
92
|
+
propsOnChange(valueTernary(isMulti, [].concat(_toConsumableArray(cleanValue(value)), [newOptionData]), newOptionData), newActionMeta);
|
|
98
93
|
}
|
|
99
94
|
return;
|
|
100
95
|
}
|
|
@@ -35,6 +35,10 @@ export interface ClearIndicatorProps<Option = unknown, IsMulti extends boolean =
|
|
|
35
35
|
* The children to be rendered inside the indicator.
|
|
36
36
|
*/
|
|
37
37
|
children?: ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* Sets the `aria-label` for the clear icon button
|
|
40
|
+
*/
|
|
41
|
+
clearControlLabel?: string;
|
|
38
42
|
/**
|
|
39
43
|
* Props that will be passed on to the children.
|
|
40
44
|
*/
|
package/dist/types/select.d.ts
CHANGED
|
@@ -94,6 +94,10 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
|
|
|
94
94
|
* Provide classNames based on state for each inner component
|
|
95
95
|
*/
|
|
96
96
|
classNames: ClassNamesConfig<Option, IsMulti, Group>;
|
|
97
|
+
/**
|
|
98
|
+
* Set the `aria-label` for the clear icon button.
|
|
99
|
+
*/
|
|
100
|
+
clearControlLabel?: string;
|
|
97
101
|
/**
|
|
98
102
|
* Close the select menu when the user selects an option
|
|
99
103
|
*/
|
|
@@ -543,8 +547,8 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
|
|
|
543
547
|
getControlRef: RefCallback<HTMLDivElement>;
|
|
544
548
|
focusedOptionRef: HTMLDivElement | null;
|
|
545
549
|
getFocusedOptionRef: RefCallback<HTMLDivElement>;
|
|
546
|
-
menuListRef:
|
|
547
|
-
getMenuListRef: RefCallback<
|
|
550
|
+
menuListRef: HTMLDivElement | null;
|
|
551
|
+
getMenuListRef: RefCallback<HTMLDivElement>;
|
|
548
552
|
inputRef: HTMLInputElement | null;
|
|
549
553
|
getInputRef: RefCallback<HTMLInputElement>;
|
|
550
554
|
constructor(props: SelectProps<Option, IsMulti, Group>);
|
|
@@ -35,6 +35,10 @@ export interface ClearIndicatorProps<Option = unknown, IsMulti extends boolean =
|
|
|
35
35
|
* The children to be rendered inside the indicator.
|
|
36
36
|
*/
|
|
37
37
|
children?: ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* Sets the `aria-label` for the clear icon button
|
|
40
|
+
*/
|
|
41
|
+
clearControlLabel?: string;
|
|
38
42
|
/**
|
|
39
43
|
* Props that will be passed on to the children.
|
|
40
44
|
*/
|
|
@@ -94,6 +94,10 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
|
|
|
94
94
|
* Provide classNames based on state for each inner component
|
|
95
95
|
*/
|
|
96
96
|
classNames: ClassNamesConfig<Option, IsMulti, Group>;
|
|
97
|
+
/**
|
|
98
|
+
* Set the `aria-label` for the clear icon button.
|
|
99
|
+
*/
|
|
100
|
+
clearControlLabel?: string;
|
|
97
101
|
/**
|
|
98
102
|
* Close the select menu when the user selects an option
|
|
99
103
|
*/
|
|
@@ -543,8 +547,8 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
|
|
|
543
547
|
getControlRef: RefCallback<HTMLDivElement>;
|
|
544
548
|
focusedOptionRef: HTMLDivElement | null;
|
|
545
549
|
getFocusedOptionRef: RefCallback<HTMLDivElement>;
|
|
546
|
-
menuListRef:
|
|
547
|
-
getMenuListRef: RefCallback<
|
|
550
|
+
menuListRef: HTMLDivElement | null;
|
|
551
|
+
getMenuListRef: RefCallback<HTMLDivElement>;
|
|
548
552
|
inputRef: HTMLInputElement | null;
|
|
549
553
|
getInputRef: RefCallback<HTMLInputElement>;
|
|
550
554
|
constructor(props: SelectProps<Option, IsMulti, Group>);
|