@instructure/ui-menu 11.0.1-snapshot-0 → 11.0.1-snapshot-2

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 (4) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +16 -16
  3. package/src/Menu/README.md +58 -129
  4. package/tsconfig.build.tsbuildinfo +1 -1
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
- ## [11.0.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-0) (2025-10-07)
6
+ ## [11.0.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-2) (2025-10-10)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-menu
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-menu",
3
- "version": "11.0.1-snapshot-0",
3
+ "version": "11.0.1-snapshot-2",
4
4
  "description": "A dropdown menu component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,10 +23,10 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "11.0.1-snapshot-0",
27
- "@instructure/ui-babel-preset": "11.0.1-snapshot-0",
28
- "@instructure/ui-color-utils": "11.0.1-snapshot-0",
29
- "@instructure/ui-themes": "11.0.1-snapshot-0",
26
+ "@instructure/ui-axe-check": "11.0.1-snapshot-2",
27
+ "@instructure/ui-babel-preset": "11.0.1-snapshot-2",
28
+ "@instructure/ui-color-utils": "11.0.1-snapshot-2",
29
+ "@instructure/ui-themes": "11.0.1-snapshot-2",
30
30
  "@testing-library/jest-dom": "^6.6.3",
31
31
  "@testing-library/react": "15.0.7",
32
32
  "@testing-library/user-event": "^14.6.1",
@@ -34,17 +34,17 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@babel/runtime": "^7.27.6",
37
- "@instructure/console": "11.0.1-snapshot-0",
38
- "@instructure/emotion": "11.0.1-snapshot-0",
39
- "@instructure/shared-types": "11.0.1-snapshot-0",
40
- "@instructure/ui-a11y-utils": "11.0.1-snapshot-0",
41
- "@instructure/ui-dom-utils": "11.0.1-snapshot-0",
42
- "@instructure/ui-icons": "11.0.1-snapshot-0",
43
- "@instructure/ui-popover": "11.0.1-snapshot-0",
44
- "@instructure/ui-position": "11.0.1-snapshot-0",
45
- "@instructure/ui-react-utils": "11.0.1-snapshot-0",
46
- "@instructure/ui-utils": "11.0.1-snapshot-0",
47
- "@instructure/ui-view": "11.0.1-snapshot-0",
37
+ "@instructure/console": "11.0.1-snapshot-2",
38
+ "@instructure/emotion": "11.0.1-snapshot-2",
39
+ "@instructure/shared-types": "11.0.1-snapshot-2",
40
+ "@instructure/ui-a11y-utils": "11.0.1-snapshot-2",
41
+ "@instructure/ui-dom-utils": "11.0.1-snapshot-2",
42
+ "@instructure/ui-icons": "11.0.1-snapshot-2",
43
+ "@instructure/ui-popover": "11.0.1-snapshot-2",
44
+ "@instructure/ui-position": "11.0.1-snapshot-2",
45
+ "@instructure/ui-react-utils": "11.0.1-snapshot-2",
46
+ "@instructure/ui-utils": "11.0.1-snapshot-2",
47
+ "@instructure/ui-view": "11.0.1-snapshot-2",
48
48
  "keycode": "^2"
49
49
  },
50
50
  "peerDependencies": {
package/src/Menu/README.md CHANGED
@@ -16,144 +16,73 @@ the [Menu](#Menu) in a [Popover](#Popover).
16
16
  Note: `<Menu/>` cannot contain content that is not a `<Menu.Item/>` (links or buttons). If
17
17
  you need to include more complex content, take a look at [Popover](#Popover).
18
18
 
19
- - ```js
20
- class Example extends React.Component {
21
- constructor(props) {
22
- super(props)
23
-
24
- this.state = {
25
- singleSelection: ['itemOne'],
26
- multipleSelection: ['optionOne', 'optionThree']
27
- }
28
- }
29
-
30
- handleSingleSelect = (e, newSelected) => {
31
- this.setState({
32
- singleSelection: newSelected
33
- })
34
- }
35
-
36
- handleMultipleSelect = (e, newSelected) => {
37
- this.setState({
38
- multipleSelection: newSelected
39
- })
40
- }
41
-
42
- render() {
43
- return (
44
- <View padding="medium" textAlign="center">
45
- <Menu
46
- placement="bottom"
47
- trigger={<Button>Menu</Button>}
48
- mountNode={() => document.getElementById('main')}
49
- >
50
- <Menu.Item value="mastery">Learning Mastery</Menu.Item>
51
- <Menu.Item
52
- href="https://instructure.github.io/instructure-ui/"
53
- target="_blank"
54
- >
55
- Default (Grid view)
56
- </Menu.Item>
57
- <Menu.Item disabled>Individual (List view)</Menu.Item>
58
- <Menu label="More Options">
59
- <Menu.Group
60
- allowMultiple
61
- label="Select Many"
62
- selected={this.state.multipleSelection}
63
- onSelect={this.handleMultipleSelect}
64
- >
65
- <Menu.Item value="optionOne">Option 1</Menu.Item>
66
- <Menu.Item value="optionTwo">Option 2</Menu.Item>
67
- <Menu.Item value="optionThree">Option 3</Menu.Item>
68
- </Menu.Group>
69
- <Menu.Separator />
70
- <Menu.Item value="navigation">Navigation</Menu.Item>
71
- <Menu.Item value="set">Set as default</Menu.Item>
72
- </Menu>
73
- <Menu.Separator />
74
- <Menu.Group
75
- label="Select One"
76
- selected={this.state.singleSelection}
77
- onSelect={this.handleSingleSelect}
78
- >
79
- <Menu.Item value="itemOne">Item 1</Menu.Item>
80
- <Menu.Item value="itemTwo">Item 2</Menu.Item>
81
- </Menu.Group>
82
- <Menu.Separator />
83
- <Menu.Item value="baz">Open grading history...</Menu.Item>
84
- </Menu>
85
- </View>
86
- )
87
- }
19
+ ```js
20
+ ---
21
+ type: example
22
+ ---
23
+ const Example = () => {
24
+ const [singleSelection, setSingleSelection] = useState(['itemOne'])
25
+ const [multipleSelection, setMultipleSelection] = useState([
26
+ 'optionOne',
27
+ 'optionThree'
28
+ ])
29
+
30
+ const handleSingleSelect = (e, newSelected) => {
31
+ setSingleSelection(newSelected)
88
32
  }
89
33
 
90
- render(<Example />)
91
- ```
92
-
93
- - ```js
94
- const Example = () => {
95
- const [singleSelection, setSingleSelection] = useState(['itemOne'])
96
- const [multipleSelection, setMultipleSelection] = useState([
97
- 'optionOne',
98
- 'optionThree'
99
- ])
100
-
101
- const handleSingleSelect = (e, newSelected) => {
102
- setSingleSelection(newSelected)
103
- }
104
-
105
- const handleMultipleSelect = (e, newSelected) => {
106
- setMultipleSelection(newSelected)
107
- }
34
+ const handleMultipleSelect = (e, newSelected) => {
35
+ setMultipleSelection(newSelected)
36
+ }
108
37
 
109
- return (
110
- <View padding="medium" textAlign="center">
111
- <Menu
112
- placement="bottom"
113
- trigger={<Button>Menu</Button>}
114
- mountNode={() => document.getElementById('main')}
38
+ return (
39
+ <View padding="medium" textAlign="center">
40
+ <Menu
41
+ placement="bottom"
42
+ trigger={<Button>Menu</Button>}
43
+ mountNode={() => document.getElementById('main')}
44
+ >
45
+ <Menu.Item value="mastery">Learning Mastery</Menu.Item>
46
+ <Menu.Item
47
+ href="https://instructure.github.io/instructure-ui/"
48
+ target="_blank"
115
49
  >
116
- <Menu.Item value="mastery">Learning Mastery</Menu.Item>
117
- <Menu.Item
118
- href="https://instructure.github.io/instructure-ui/"
119
- target="_blank"
120
- >
121
- Default (Grid view)
122
- </Menu.Item>
123
- <Menu.Item disabled>Individual (List view)</Menu.Item>
124
- <Menu label="More Options">
125
- <Menu.Group
126
- allowMultiple
127
- label="Select Many"
128
- selected={multipleSelection}
129
- onSelect={handleMultipleSelect}
130
- >
131
- <Menu.Item value="optionOne">Option 1</Menu.Item>
132
- <Menu.Item value="optionTwo">Option 2</Menu.Item>
133
- <Menu.Item value="optionThree">Option 3</Menu.Item>
134
- </Menu.Group>
135
- <Menu.Separator />
136
- <Menu.Item value="navigation">Navigation</Menu.Item>
137
- <Menu.Item value="set">Set as default</Menu.Item>
138
- </Menu>
139
- <Menu.Separator />
50
+ Default (Grid view)
51
+ </Menu.Item>
52
+ <Menu.Item disabled>Individual (List view)</Menu.Item>
53
+ <Menu label="More Options">
140
54
  <Menu.Group
141
- label="Select One"
142
- selected={singleSelection}
143
- onSelect={handleSingleSelect}
55
+ allowMultiple
56
+ label="Select Many"
57
+ selected={multipleSelection}
58
+ onSelect={handleMultipleSelect}
144
59
  >
145
- <Menu.Item value="itemOne">Item 1</Menu.Item>
146
- <Menu.Item value="itemTwo">Item 2</Menu.Item>
60
+ <Menu.Item value="optionOne">Option 1</Menu.Item>
61
+ <Menu.Item value="optionTwo">Option 2</Menu.Item>
62
+ <Menu.Item value="optionThree">Option 3</Menu.Item>
147
63
  </Menu.Group>
148
64
  <Menu.Separator />
149
- <Menu.Item value="baz">Open grading history...</Menu.Item>
65
+ <Menu.Item value="navigation">Navigation</Menu.Item>
66
+ <Menu.Item value="set">Set as default</Menu.Item>
150
67
  </Menu>
151
- </View>
152
- )
153
- }
154
-
155
- render(<Example />)
156
- ```
68
+ <Menu.Separator />
69
+ <Menu.Group
70
+ label="Select One"
71
+ selected={singleSelection}
72
+ onSelect={handleSingleSelect}
73
+ >
74
+ <Menu.Item value="itemOne">Item 1</Menu.Item>
75
+ <Menu.Item value="itemTwo">Item 2</Menu.Item>
76
+ </Menu.Group>
77
+ <Menu.Separator />
78
+ <Menu.Item value="baz">Open grading history...</Menu.Item>
79
+ </Menu>
80
+ </View>
81
+ )
82
+ }
83
+
84
+ render(<Example />)
85
+ ```
157
86
 
158
87
  ### Guidelines
159
88