@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 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-8](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-8) (2025-06-24)
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
- **Note:** Version bump only for package @instructure/ui-simple-select
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
 
@@ -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
  });
@@ -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-8",
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-8",
28
- "@instructure/shared-types": "10.20.2-snapshot-8",
29
- "@instructure/ui-form-field": "10.20.2-snapshot-8",
30
- "@instructure/ui-position": "10.20.2-snapshot-8",
31
- "@instructure/ui-prop-types": "10.20.2-snapshot-8",
32
- "@instructure/ui-react-utils": "10.20.2-snapshot-8",
33
- "@instructure/ui-select": "10.20.2-snapshot-8",
34
- "@instructure/ui-testable": "10.20.2-snapshot-8",
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-8",
39
- "@instructure/ui-color-utils": "10.20.2-snapshot-8",
40
- "@instructure/ui-icons": "10.20.2-snapshot-8",
41
- "@instructure/ui-test-utils": "10.20.2-snapshot-8",
42
- "@instructure/ui-utils": "10.20.2-snapshot-8",
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 }