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

Sign up to get free protection for your applications and to get access to all the features.
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