@instructure/ui-simple-select 10.2.3-snapshot-3 → 10.2.3-snapshot-5

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +15 -15
  3. package/src/SimpleSelect/README.md +86 -45
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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.2.3-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-3) (2024-09-20)
6
+ ## [10.2.3-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-5) (2024-09-24)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-simple-select
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-simple-select",
3
- "version": "10.2.3-snapshot-3",
3
+ "version": "10.2.3-snapshot-5",
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.24.5",
27
- "@instructure/console": "10.2.3-snapshot-3",
28
- "@instructure/shared-types": "10.2.3-snapshot-3",
29
- "@instructure/ui-form-field": "10.2.3-snapshot-3",
30
- "@instructure/ui-position": "10.2.3-snapshot-3",
31
- "@instructure/ui-prop-types": "10.2.3-snapshot-3",
32
- "@instructure/ui-react-utils": "10.2.3-snapshot-3",
33
- "@instructure/ui-select": "10.2.3-snapshot-3",
34
- "@instructure/ui-testable": "10.2.3-snapshot-3",
27
+ "@instructure/console": "10.2.3-snapshot-5",
28
+ "@instructure/shared-types": "10.2.3-snapshot-5",
29
+ "@instructure/ui-form-field": "10.2.3-snapshot-5",
30
+ "@instructure/ui-position": "10.2.3-snapshot-5",
31
+ "@instructure/ui-prop-types": "10.2.3-snapshot-5",
32
+ "@instructure/ui-react-utils": "10.2.3-snapshot-5",
33
+ "@instructure/ui-select": "10.2.3-snapshot-5",
34
+ "@instructure/ui-testable": "10.2.3-snapshot-5",
35
35
  "prop-types": "^15.8.1"
36
36
  },
37
37
  "devDependencies": {
38
- "@instructure/ui-babel-preset": "10.2.3-snapshot-3",
39
- "@instructure/ui-color-utils": "10.2.3-snapshot-3",
40
- "@instructure/ui-icons": "10.2.3-snapshot-3",
41
- "@instructure/ui-test-locator": "10.2.3-snapshot-3",
42
- "@instructure/ui-test-utils": "10.2.3-snapshot-3",
43
- "@instructure/ui-utils": "10.2.3-snapshot-3",
38
+ "@instructure/ui-babel-preset": "10.2.3-snapshot-5",
39
+ "@instructure/ui-color-utils": "10.2.3-snapshot-5",
40
+ "@instructure/ui-icons": "10.2.3-snapshot-5",
41
+ "@instructure/ui-test-locator": "10.2.3-snapshot-5",
42
+ "@instructure/ui-test-utils": "10.2.3-snapshot-5",
43
+ "@instructure/ui-utils": "10.2.3-snapshot-5",
44
44
  "@testing-library/jest-dom": "^6.4.6",
45
45
  "@testing-library/react": "^15.0.7",
46
46
  "vitest": "^2.0.2"
package/src/SimpleSelect/README.md CHANGED
@@ -33,64 +33,105 @@ type: example
33
33
 
34
34
  To use `SimpleSelect` controlled, simply provide the `value` prop the string that corresponds to the selected option's `value` prop. The `onChange` callback can be used to update the value stored in state.
35
35
 
36
- ```javascript
37
- ---
38
- type: example
39
- ---
40
- class Example extends React.Component {
41
- state = {
42
- value: 'Alaska'
36
+ - ```javascript
37
+ class Example extends React.Component {
38
+ state = {
39
+ value: 'Alaska'
40
+ }
41
+
42
+ handleSelect = (e, { id, value }) => {
43
+ this.setState({ value })
44
+ }
45
+
46
+ render() {
47
+ return (
48
+ <SimpleSelect
49
+ renderLabel="Controlled Select"
50
+ assistiveText="Use arrow keys to navigate options."
51
+ value={this.state.value}
52
+ onChange={this.handleSelect}
53
+ >
54
+ {this.props.options.map((opt, index) => (
55
+ <SimpleSelect.Option key={index} id={`opt-${index}`} value={opt}>
56
+ {opt}
57
+ </SimpleSelect.Option>
58
+ ))}
59
+ </SimpleSelect>
60
+ )
61
+ }
43
62
  }
44
63
 
45
- handleSelect = (e, { id, value }) => {
46
- this.setState({ value })
47
- }
64
+ render(
65
+ <Example
66
+ options={[
67
+ 'Alaska',
68
+ 'American Samoa',
69
+ 'Arizona',
70
+ 'Arkansas',
71
+ 'California',
72
+ 'Colorado',
73
+ 'Connecticut',
74
+ 'Delaware',
75
+ 'District Of Columbia',
76
+ 'Federated States Of Micronesia',
77
+ 'Florida',
78
+ 'Georgia',
79
+ 'Guam',
80
+ 'Hawaii',
81
+ 'Idaho',
82
+ 'Illinois'
83
+ ]}
84
+ />
85
+ )
86
+ ```
87
+
88
+ - ```javascript
89
+ const Example = ({ options }) => {
90
+ const [value, setValue] = useState('Alaska')
91
+
92
+ const handleSelect = (e, { id, value }) => {
93
+ setValue(value)
94
+ }
48
95
 
49
- render () {
50
96
  return (
51
97
  <SimpleSelect
52
98
  renderLabel="Controlled Select"
53
99
  assistiveText="Use arrow keys to navigate options."
54
- value={this.state.value}
55
- onChange={this.handleSelect}
100
+ value={value}
101
+ onChange={handleSelect}
56
102
  >
57
- {this.props.options.map((opt, index) => (
58
- <SimpleSelect.Option
59
- key={index}
60
- id={`opt-${index}`}
61
- value={opt}
62
- >
63
- { opt }
103
+ {options.map((opt, index) => (
104
+ <SimpleSelect.Option key={index} id={`opt-${index}`} value={opt}>
105
+ {opt}
64
106
  </SimpleSelect.Option>
65
107
  ))}
66
-
67
108
  </SimpleSelect>
68
109
  )
69
110
  }
70
- }
71
- render(
72
- <Example
73
- options={[
74
- 'Alaska',
75
- 'American Samoa',
76
- 'Arizona',
77
- 'Arkansas',
78
- 'California',
79
- 'Colorado',
80
- 'Connecticut',
81
- 'Delaware',
82
- 'District Of Columbia',
83
- 'Federated States Of Micronesia',
84
- 'Florida',
85
- 'Georgia',
86
- 'Guam',
87
- 'Hawaii',
88
- 'Idaho',
89
- 'Illinois'
90
- ]}
91
- />
92
- )
93
- ```
111
+
112
+ render(
113
+ <Example
114
+ options={[
115
+ 'Alaska',
116
+ 'American Samoa',
117
+ 'Arizona',
118
+ 'Arkansas',
119
+ 'California',
120
+ 'Colorado',
121
+ 'Connecticut',
122
+ 'Delaware',
123
+ 'District Of Columbia',
124
+ 'Federated States Of Micronesia',
125
+ 'Florida',
126
+ 'Georgia',
127
+ 'Guam',
128
+ 'Hawaii',
129
+ 'Idaho',
130
+ 'Illinois'
131
+ ]}
132
+ />
133
+ )
134
+ ```
94
135
 
95
136
  ### Groups
96
137