@instructure/ui-simple-select 10.20.2-snapshot-8 → 10.20.2-snapshot-10
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/index.js +3 -1
- package/es/SimpleSelect/props.js +3 -2
- package/lib/SimpleSelect/index.js +3 -1
- package/lib/SimpleSelect/props.js +3 -2
- package/package.json +14 -14
- package/src/SimpleSelect/index.tsx +2 -0
- package/src/SimpleSelect/props.ts +13 -2
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/SimpleSelect/index.d.ts +2 -0
- package/types/SimpleSelect/index.d.ts.map +1 -1
- package/types/SimpleSelect/props.d.ts +8 -1
- 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
|
-
## [10.20.2-snapshot-
|
6
|
+
## [10.20.2-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-10) (2025-06-24)
|
7
7
|
|
8
|
-
|
8
|
+
|
9
|
+
### Features
|
10
|
+
|
11
|
+
* **ui-simple-select,ui-select:** add layout prop to Select and SimpleSelect ([94f0a6f](https://github.com/instructure/instructure-ui/commit/94f0a6f99f9e813fe44e6c3111fdb4e5f3708b76))
|
9
12
|
|
10
13
|
|
11
14
|
|
package/es/SimpleSelect/index.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
2
2
|
const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterLabel"],
|
3
3
|
_excluded2 = ["id", "renderLabel", "children"],
|
4
|
-
_excluded3 = ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "optionsMaxHeight", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children"];
|
4
|
+
_excluded3 = ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "optionsMaxHeight", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children", "layout"];
|
5
5
|
var _dec, _dec2, _class, _SimpleSelect;
|
6
6
|
/*
|
7
7
|
* The MIT License (MIT)
|
@@ -388,6 +388,7 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
|
|
388
388
|
onShowOptions = _this$props.onShowOptions,
|
389
389
|
onHideOptions = _this$props.onHideOptions,
|
390
390
|
children = _this$props.children,
|
391
|
+
layout = _this$props.layout,
|
391
392
|
rest = _objectWithoutProperties(_this$props, _excluded3);
|
392
393
|
return _jsx(Select, {
|
393
394
|
renderLabel: renderLabel,
|
@@ -420,6 +421,7 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
|
|
420
421
|
onRequestHighlightOption: this.handleHighlightOption,
|
421
422
|
onRequestSelectOption: this.handleSelectOption,
|
422
423
|
isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
|
424
|
+
layout: layout,
|
423
425
|
...passthroughProps(rest),
|
424
426
|
children: this.renderChildren()
|
425
427
|
});
|
package/es/SimpleSelect/props.js
CHANGED
@@ -59,7 +59,8 @@ const propTypes = {
|
|
59
59
|
renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
60
60
|
renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
61
61
|
children: ChildrenPropTypes.oneOf([Group, Option]),
|
62
|
-
isOptionContentAppliedToInput: PropTypes.bool
|
62
|
+
isOptionContentAppliedToInput: PropTypes.bool,
|
63
|
+
layout: PropTypes.oneOf(['stacked', 'inline'])
|
63
64
|
};
|
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'];
|
65
|
+
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', 'layout'];
|
65
66
|
export { propTypes, allowedProps };
|
@@ -22,7 +22,7 @@ var _props = require("./props");
|
|
22
22
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
23
23
|
const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterLabel"],
|
24
24
|
_excluded2 = ["id", "renderLabel", "children"],
|
25
|
-
_excluded3 = ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "optionsMaxHeight", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children"];
|
25
|
+
_excluded3 = ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "optionsMaxHeight", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children", "layout"];
|
26
26
|
var _dec, _dec2, _class, _SimpleSelect;
|
27
27
|
/*
|
28
28
|
* The MIT License (MIT)
|
@@ -399,6 +399,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
|
|
399
399
|
onShowOptions = _this$props.onShowOptions,
|
400
400
|
onHideOptions = _this$props.onHideOptions,
|
401
401
|
children = _this$props.children,
|
402
|
+
layout = _this$props.layout,
|
402
403
|
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded3);
|
403
404
|
return (0, _jsxRuntime.jsx)(_Select.Select, {
|
404
405
|
renderLabel: renderLabel,
|
@@ -431,6 +432,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
|
|
431
432
|
onRequestHighlightOption: this.handleHighlightOption,
|
432
433
|
onRequestSelectOption: this.handleSelectOption,
|
433
434
|
isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
|
435
|
+
layout: layout,
|
434
436
|
...(0, _passthroughProps.passthroughProps)(rest),
|
435
437
|
children: this.renderChildren()
|
436
438
|
});
|
@@ -66,6 +66,7 @@ const propTypes = exports.propTypes = {
|
|
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
68
|
children: _Children.Children.oneOf([_Group.Group, _Option.Option]),
|
69
|
-
isOptionContentAppliedToInput: _propTypes.default.bool
|
69
|
+
isOptionContentAppliedToInput: _propTypes.default.bool,
|
70
|
+
layout: _propTypes.default.oneOf(['stacked', 'inline'])
|
70
71
|
};
|
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'];
|
72
|
+
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', 'layout'];
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@instructure/ui-simple-select",
|
3
|
-
"version": "10.20.2-snapshot-
|
3
|
+
"version": "10.20.2-snapshot-10",
|
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,22 +24,22 @@
|
|
24
24
|
"license": "MIT",
|
25
25
|
"dependencies": {
|
26
26
|
"@babel/runtime": "^7.27.6",
|
27
|
-
"@instructure/console": "10.20.2-snapshot-
|
28
|
-
"@instructure/shared-types": "10.20.2-snapshot-
|
29
|
-
"@instructure/ui-form-field": "10.20.2-snapshot-
|
30
|
-
"@instructure/ui-position": "10.20.2-snapshot-
|
31
|
-
"@instructure/ui-prop-types": "10.20.2-snapshot-
|
32
|
-
"@instructure/ui-react-utils": "10.20.2-snapshot-
|
33
|
-
"@instructure/ui-select": "10.20.2-snapshot-
|
34
|
-
"@instructure/ui-testable": "10.20.2-snapshot-
|
27
|
+
"@instructure/console": "10.20.2-snapshot-10",
|
28
|
+
"@instructure/shared-types": "10.20.2-snapshot-10",
|
29
|
+
"@instructure/ui-form-field": "10.20.2-snapshot-10",
|
30
|
+
"@instructure/ui-position": "10.20.2-snapshot-10",
|
31
|
+
"@instructure/ui-prop-types": "10.20.2-snapshot-10",
|
32
|
+
"@instructure/ui-react-utils": "10.20.2-snapshot-10",
|
33
|
+
"@instructure/ui-select": "10.20.2-snapshot-10",
|
34
|
+
"@instructure/ui-testable": "10.20.2-snapshot-10",
|
35
35
|
"prop-types": "^15.8.1"
|
36
36
|
},
|
37
37
|
"devDependencies": {
|
38
|
-
"@instructure/ui-babel-preset": "10.20.2-snapshot-
|
39
|
-
"@instructure/ui-color-utils": "10.20.2-snapshot-
|
40
|
-
"@instructure/ui-icons": "10.20.2-snapshot-
|
41
|
-
"@instructure/ui-test-utils": "10.20.2-snapshot-
|
42
|
-
"@instructure/ui-utils": "10.20.2-snapshot-
|
38
|
+
"@instructure/ui-babel-preset": "10.20.2-snapshot-10",
|
39
|
+
"@instructure/ui-color-utils": "10.20.2-snapshot-10",
|
40
|
+
"@instructure/ui-icons": "10.20.2-snapshot-10",
|
41
|
+
"@instructure/ui-test-utils": "10.20.2-snapshot-10",
|
42
|
+
"@instructure/ui-utils": "10.20.2-snapshot-10",
|
43
43
|
"@testing-library/jest-dom": "^6.6.3",
|
44
44
|
"@testing-library/react": "^16.0.1",
|
45
45
|
"@testing-library/user-event": "^14.6.1",
|
@@ -503,6 +503,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
|
|
503
503
|
onShowOptions,
|
504
504
|
onHideOptions,
|
505
505
|
children,
|
506
|
+
layout,
|
506
507
|
...rest
|
507
508
|
} = this.props
|
508
509
|
|
@@ -538,6 +539,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
|
|
538
539
|
onRequestHighlightOption={this.handleHighlightOption}
|
539
540
|
onRequestSelectOption={this.handleSelectOption}
|
540
541
|
isOptionContentAppliedToInput={this.props.isOptionContentAppliedToInput}
|
542
|
+
layout={layout}
|
541
543
|
{...passthroughProps(rest)}
|
542
544
|
>
|
543
545
|
{this.renderChildren()}
|
@@ -232,6 +232,14 @@ type PropsPassedToSelect = {
|
|
232
232
|
* If the selected `SimpleSelect.Option`'s `renderAfterLabel` value is empty, default arrow icon will be rendered.
|
233
233
|
*/
|
234
234
|
isOptionContentAppliedToInput?: boolean
|
235
|
+
|
236
|
+
/**
|
237
|
+
* In `stacked` mode the input is below the label.
|
238
|
+
*
|
239
|
+
* In `inline` mode the input is to the right/left (depending on text direction) of the label,
|
240
|
+
* and the layout will look like `stacked` for small screens.
|
241
|
+
*/
|
242
|
+
layout?: 'stacked' | 'inline'
|
235
243
|
}
|
236
244
|
|
237
245
|
type PropKeys = keyof SimpleSelectOwnProps
|
@@ -248,6 +256,7 @@ type SimpleSelectProps = PickPropsWithExceptions<
|
|
248
256
|
| 'onRequestSelectOption'
|
249
257
|
| 'inputValue'
|
250
258
|
| 'isShowingOptions'
|
259
|
+
| 'layout'
|
251
260
|
> &
|
252
261
|
SimpleSelectOwnProps &
|
253
262
|
OtherHTMLAttributes<
|
@@ -294,7 +303,8 @@ const propTypes: PropValidators<PropKeys> = {
|
|
294
303
|
renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
295
304
|
renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
296
305
|
children: ChildrenPropTypes.oneOf([Group, Option]),
|
297
|
-
isOptionContentAppliedToInput: PropTypes.bool
|
306
|
+
isOptionContentAppliedToInput: PropTypes.bool,
|
307
|
+
layout: PropTypes.oneOf(['stacked', 'inline'])
|
298
308
|
}
|
299
309
|
|
300
310
|
const allowedProps: AllowedPropKeys = [
|
@@ -326,7 +336,8 @@ const allowedProps: AllowedPropKeys = [
|
|
326
336
|
'renderEmptyOption',
|
327
337
|
'renderBeforeInput',
|
328
338
|
'renderAfterInput',
|
329
|
-
'children'
|
339
|
+
'children',
|
340
|
+
'layout'
|
330
341
|
]
|
331
342
|
|
332
343
|
export type { SimpleSelectProps, SimpleSelectState }
|