@instructure/ui-simple-select 10.11.1-snapshot-17 → 10.12.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 +5 -2
- package/es/SimpleSelect/__examples__/SimpleSelect.examples.js +1 -0
- package/es/SimpleSelect/index.js +4 -2
- package/es/SimpleSelect/props.js +2 -1
- package/lib/SimpleSelect/__examples__/SimpleSelect.examples.js +1 -0
- package/lib/SimpleSelect/index.js +4 -2
- package/lib/SimpleSelect/props.js +2 -1
- package/package.json +15 -15
- package/src/SimpleSelect/__examples__/SimpleSelect.examples.tsx +1 -0
- package/src/SimpleSelect/index.tsx +3 -1
- package/src/SimpleSelect/props.ts +16 -1
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/SimpleSelect/__examples__/SimpleSelect.examples.d.ts.map +1 -1
- package/types/SimpleSelect/index.d.ts +3 -0
- package/types/SimpleSelect/index.d.ts.map +1 -1
- package/types/SimpleSelect/props.d.ts +14 -0
- package/types/SimpleSelect/props.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
@@ -3,9 +3,12 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
-
|
6
|
+
# [10.12.0](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.12.0) (2025-02-24)
|
7
7
|
|
8
|
-
|
8
|
+
|
9
|
+
### Features
|
10
|
+
|
11
|
+
* **ui-select,ui-simple-select:** add support for rendering selected option's before and after content in Select and SimpleSelect input ([87dc52d](https://github.com/instructure/instructure-ui/commit/87dc52dcd2a23acfe50856c05b8ff28c1046f85a))
|
9
12
|
|
10
13
|
|
11
14
|
|
package/es/SimpleSelect/index.js
CHANGED
@@ -369,7 +369,8 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
|
|
369
369
|
onRequestShowOptions: this.handleShowOptions,
|
370
370
|
onRequestHideOptions: this.handleHideOptions,
|
371
371
|
onRequestHighlightOption: this.handleHighlightOption,
|
372
|
-
onRequestSelectOption: this.handleSelectOption
|
372
|
+
onRequestSelectOption: this.handleSelectOption,
|
373
|
+
isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput
|
373
374
|
}, passthroughProps(rest)), this.renderChildren());
|
374
375
|
}
|
375
376
|
}, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = Option, _SimpleSelect.Group = Group, _SimpleSelect.allowedProps = allowedProps, _SimpleSelect.propTypes = propTypes, _SimpleSelect.defaultProps = {
|
@@ -379,7 +380,8 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
|
|
379
380
|
visibleOptionsCount: 8,
|
380
381
|
placement: 'bottom stretch',
|
381
382
|
constrain: 'window',
|
382
|
-
renderEmptyOption: '---'
|
383
|
+
renderEmptyOption: '---',
|
384
|
+
isOptionContentAppliedToInput: false
|
383
385
|
}, _SimpleSelect)) || _class) || _class);
|
384
386
|
export { SimpleSelect };
|
385
387
|
export default SimpleSelect;
|
package/es/SimpleSelect/props.js
CHANGED
@@ -58,7 +58,8 @@ const propTypes = {
|
|
58
58
|
renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
59
59
|
renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
60
60
|
renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
61
|
-
children: ChildrenPropTypes.oneOf([Group, Option])
|
61
|
+
children: ChildrenPropTypes.oneOf([Group, Option]),
|
62
|
+
isOptionContentAppliedToInput: PropTypes.bool
|
62
63
|
};
|
63
64
|
const allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children'];
|
64
65
|
export { propTypes, allowedProps };
|
@@ -380,7 +380,8 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
|
|
380
380
|
onRequestShowOptions: this.handleShowOptions,
|
381
381
|
onRequestHideOptions: this.handleHideOptions,
|
382
382
|
onRequestHighlightOption: this.handleHighlightOption,
|
383
|
-
onRequestSelectOption: this.handleSelectOption
|
383
|
+
onRequestSelectOption: this.handleSelectOption,
|
384
|
+
isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput
|
384
385
|
}, (0, _passthroughProps.passthroughProps)(rest)), this.renderChildren());
|
385
386
|
}
|
386
387
|
}, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = _Option.Option, _SimpleSelect.Group = _Group.Group, _SimpleSelect.allowedProps = _props.allowedProps, _SimpleSelect.propTypes = _props.propTypes, _SimpleSelect.defaultProps = {
|
@@ -390,6 +391,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
|
|
390
391
|
visibleOptionsCount: 8,
|
391
392
|
placement: 'bottom stretch',
|
392
393
|
constrain: 'window',
|
393
|
-
renderEmptyOption: '---'
|
394
|
+
renderEmptyOption: '---',
|
395
|
+
isOptionContentAppliedToInput: false
|
394
396
|
}, _SimpleSelect)) || _class) || _class);
|
395
397
|
var _default = exports.default = SimpleSelect;
|
@@ -65,6 +65,7 @@ const propTypes = exports.propTypes = {
|
|
65
65
|
renderEmptyOption: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
66
66
|
renderBeforeInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
67
67
|
renderAfterInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
68
|
-
children: _Children.Children.oneOf([_Group.Group, _Option.Option])
|
68
|
+
children: _Children.Children.oneOf([_Group.Group, _Option.Option]),
|
69
|
+
isOptionContentAppliedToInput: _propTypes.default.bool
|
69
70
|
};
|
70
71
|
const allowedProps = exports.allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children'];
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@instructure/ui-simple-select",
|
3
|
-
"version": "10.
|
3
|
+
"version": "10.12.0",
|
4
4
|
"description": "A component for standard select element behavior.",
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
6
6
|
"module": "./es/index.js",
|
@@ -24,23 +24,23 @@
|
|
24
24
|
"license": "MIT",
|
25
25
|
"dependencies": {
|
26
26
|
"@babel/runtime": "^7.26.0",
|
27
|
-
"@instructure/console": "10.
|
28
|
-
"@instructure/shared-types": "10.
|
29
|
-
"@instructure/ui-form-field": "10.
|
30
|
-
"@instructure/ui-position": "10.
|
31
|
-
"@instructure/ui-prop-types": "10.
|
32
|
-
"@instructure/ui-react-utils": "10.
|
33
|
-
"@instructure/ui-select": "10.
|
34
|
-
"@instructure/ui-testable": "10.
|
27
|
+
"@instructure/console": "10.12.0",
|
28
|
+
"@instructure/shared-types": "10.12.0",
|
29
|
+
"@instructure/ui-form-field": "10.12.0",
|
30
|
+
"@instructure/ui-position": "10.12.0",
|
31
|
+
"@instructure/ui-prop-types": "10.12.0",
|
32
|
+
"@instructure/ui-react-utils": "10.12.0",
|
33
|
+
"@instructure/ui-select": "10.12.0",
|
34
|
+
"@instructure/ui-testable": "10.12.0",
|
35
35
|
"prop-types": "^15.8.1"
|
36
36
|
},
|
37
37
|
"devDependencies": {
|
38
|
-
"@instructure/ui-axe-check": "10.
|
39
|
-
"@instructure/ui-babel-preset": "10.
|
40
|
-
"@instructure/ui-color-utils": "10.
|
41
|
-
"@instructure/ui-icons": "10.
|
42
|
-
"@instructure/ui-test-utils": "10.
|
43
|
-
"@instructure/ui-utils": "10.
|
38
|
+
"@instructure/ui-axe-check": "10.12.0",
|
39
|
+
"@instructure/ui-babel-preset": "10.12.0",
|
40
|
+
"@instructure/ui-color-utils": "10.12.0",
|
41
|
+
"@instructure/ui-icons": "10.12.0",
|
42
|
+
"@instructure/ui-test-utils": "10.12.0",
|
43
|
+
"@instructure/ui-utils": "10.12.0",
|
44
44
|
"@testing-library/jest-dom": "^6.6.3",
|
45
45
|
"@testing-library/react": "^16.0.1",
|
46
46
|
"@testing-library/user-event": "^14.5.2",
|
@@ -80,7 +80,8 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
|
|
80
80
|
visibleOptionsCount: 8,
|
81
81
|
placement: 'bottom stretch',
|
82
82
|
constrain: 'window',
|
83
|
-
renderEmptyOption: '---'
|
83
|
+
renderEmptyOption: '---',
|
84
|
+
isOptionContentAppliedToInput: false
|
84
85
|
}
|
85
86
|
|
86
87
|
ref: Select | null = null
|
@@ -479,6 +480,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
|
|
479
480
|
onRequestHideOptions={this.handleHideOptions}
|
480
481
|
onRequestHighlightOption={this.handleHighlightOption}
|
481
482
|
onRequestSelectOption={this.handleSelectOption}
|
483
|
+
isOptionContentAppliedToInput={this.props.isOptionContentAppliedToInput}
|
482
484
|
{...passthroughProps(rest)}
|
483
485
|
>
|
484
486
|
{this.renderChildren()}
|
@@ -218,6 +218,20 @@ type PropsPassedToSelect = {
|
|
218
218
|
* Callback fired when text input loses focus.
|
219
219
|
*/
|
220
220
|
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
|
221
|
+
/**
|
222
|
+
* Whether or not the content of the selected `SimpleSelect.Option`'s `renderBeforeLabel` and `renderAfterLabel` appear in the input field.
|
223
|
+
*
|
224
|
+
* If the selected `SimpleSelect.Option` has both `renderBeforeLabel` and `renderAfterLabel` content, both will be displayed in the input field.
|
225
|
+
*
|
226
|
+
* `SimpleSelect.Option`'s `renderBeforeLabel` and `renderAfterLabel` content will not be displayed, if `SimpleSelect`'s `inputValue` is an empty value, null or undefined.
|
227
|
+
*
|
228
|
+
* If `true` and the selected `SimpleSelect.Option` has a `renderAfterLabel` value, it will replace the default arrow icon.
|
229
|
+
*
|
230
|
+
* If `true` and `SimpleSelect`'s `renderBeforeInput` or `renderAfterInput` prop is set, it will display the selected `SimpleSelect.Option`'s `renderBeforeLabel` and `renderAfterLabel` instead of `SimpleSelect`'s `renderBeforeInput` or `renderAfterInput` value.
|
231
|
+
*
|
232
|
+
* If the selected `SimpleSelect.Option`'s `renderAfterLabel` value is empty, default arrow icon will be rendered.
|
233
|
+
*/
|
234
|
+
isOptionContentAppliedToInput?: boolean
|
221
235
|
}
|
222
236
|
|
223
237
|
type PropKeys = keyof SimpleSelectOwnProps
|
@@ -279,7 +293,8 @@ const propTypes: PropValidators<PropKeys> = {
|
|
279
293
|
renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
280
294
|
renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
281
295
|
renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
282
|
-
children: ChildrenPropTypes.oneOf([Group, Option])
|
296
|
+
children: ChildrenPropTypes.oneOf([Group, Option]),
|
297
|
+
isOptionContentAppliedToInput: PropTypes.bool
|
283
298
|
}
|
284
299
|
|
285
300
|
const allowedProps: AllowedPropKeys = [
|