@fluentui/react-menu 9.0.0-nightly.b5b7401007.0 → 9.0.0-rc.3

package/CHANGELOG.md

@@ -1,30 +1,128 @@
 # Change Log - @fluentui/react-menu
 
-This log was last generated on Tue, 26 Oct 2021 09:22:36 GMT and should not be manually modified.
+This log was last generated on Fri, 18 Feb 2022 13:33:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [9.0.0-nightly.b5b7401007.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-nightly.b5b7401007.0)
-
-Tue, 26 Oct 2021 09:22:36 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-beta.2..@fluentui/react-menu_v9.0.0-nightly.b5b7401007.0)
-
-### Changes
-
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by email not defined)
-- Simplify type for MenuOpenChangeData ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by olfedias@microsoft.com)
-- added styling of documentation ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by peter@draxler.ml)
-- Bump @fluentui/keyboard-keys to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
-- Bump @fluentui/react-context-selector to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
-- Bump @fluentui/react-make-styles to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
-- Bump @fluentui/react-portal to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
-- Bump @fluentui/react-positioning to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
-- Bump @fluentui/react-provider to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
-- Bump @fluentui/react-tabster to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
-- Bump @fluentui/react-utilities to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
-- Bump @fluentui/babel-make-styles to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
-- Bump @fluentui/jest-serializer-make-styles to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
-- Bump @fluentui/react-conformance-make-styles to v9.0.0-nightly.b5b7401007.0 ([commit](https://github.com/microsoft/fluentui/commit/0dfd7a724c42291a510e9bcfe4610aa1e268ffcc) by beachball)
+## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-rc.3)
+
+Fri, 18 Feb 2022 13:33:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-rc.1..@fluentui/react-menu_v9.0.0-rc.3)
+
+### Changes
+
+- fix: MenuItem is a submenu trigger if it is wrapped by a MenuTrigger and in a submenu ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by lingfangao@hotmail.com)
+- fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
+- Bump @fluentui/keyboard-keys to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-portal to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-positioning to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
+
+## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-rc.1)
+
+Thu, 10 Feb 2022 08:51:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-beta.5..@fluentui/react-menu_v9.0.0-rc.1)
+
+### Changes
+
+- fix: set `aria-expanded` and `aria-haspopup` values correctly ([PR #20957](https://github.com/microsoft/fluentui/pull/20957) by lingfangao@hotmail.com)
+- fix: Focus on first menu item on click ([PR #20955](https://github.com/microsoft/fluentui/pull/20955) by lingfangao@hotmail.com)
+- fix: MenuTrigger should work correctly when `aria-disabled="true"` ([PR #21349](https://github.com/microsoft/fluentui/pull/21349) by lingfangao@hotmail.com)
+- update @fluentui/react-icons package ([PR #21498](https://github.com/microsoft/fluentui/pull/21498) by olfedias@microsoft.com)
+- Allow `MenuTrigger` to be wrapped by another trigger ([PR #21225](https://github.com/microsoft/fluentui/pull/21225) by lingfangao@hotmail.com)
+- update types related to trigger (allow only React.ReactElement & null) ([PR #21609](https://github.com/microsoft/fluentui/pull/21609) by olfedias@microsoft.com)
+- BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
+- Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster. ([PR #21035](https://github.com/microsoft/fluentui/pull/21035) by Humberto.Morimoto@microsoft.com)
+- Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
+- update styles to not use CSS shorthands ([PR #20820](https://github.com/microsoft/fluentui/pull/20820) by olfedias@microsoft.com)
+- Refactor component Slot typings ([PR #21518](https://github.com/microsoft/fluentui/pull/21518) by behowell@microsoft.com)
+- fix: Call `useCheckmarkStyles` in `useMenuItemStyles` ([PR #20956](https://github.com/microsoft/fluentui/pull/20956) by lingfangao@hotmail.com)
+- Updating based on changes to composition types. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by Humberto.Morimoto@microsoft.com)
+- Updating based on removal of functions from makeStyles. ([PR #21239](https://github.com/microsoft/fluentui/pull/21239) by Humberto.Morimoto@microsoft.com)
+- Update MenuTrigger and Tooltip to work together ([PR #21495](https://github.com/microsoft/fluentui/pull/21495) by behowell@microsoft.com)
+- Bump Fluent UI packages to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
+- Replacing use of functions in makeStyles with direct use of tokens. ([PR #21048](https://github.com/microsoft/fluentui/pull/21048) by Humberto.Morimoto@microsoft.com)
+- use Griffel packages ([PR #21391](https://github.com/microsoft/fluentui/pull/21391) by olfedias@microsoft.com)
+- Apply fontSize styling to icon slot ([PR #21222](https://github.com/microsoft/fluentui/pull/21222) by behowell@microsoft.com)
+- Update react-icons usage to resizable icons ([PR #21074](https://github.com/microsoft/fluentui/pull/21074) by ololubek@microsoft.com)
+- feat: implement `MenuSplitGroup` component for split menu items ([PR #21095](https://github.com/microsoft/fluentui/pull/21095) by lingfangao@hotmail.com)
+- Updating use of tokens.fontWeight now that we don't need to use casting. ([PR #21217](https://github.com/microsoft/fluentui/pull/21217) by Humberto.Morimoto@microsoft.com)
+- (fix): Update react-icons dependency to latest version ([PR #20943](https://github.com/microsoft/fluentui/pull/20943) by ololubek@microsoft.com)
+- remove export of commons types ([PR #21660](https://github.com/microsoft/fluentui/pull/21660) by mgodbolt@microsoft.com)
+- breaking: MenuTrigger must be the first child of the `Menu` ([PR #21096](https://github.com/microsoft/fluentui/pull/21096) by lingfangao@hotmail.com)
+- Bump @fluentui/keyboard-keys to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-portal to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-positioning to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+
+## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-beta.5)
+
+Thu, 25 Nov 2021 08:34:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-beta.4..@fluentui/react-menu_v9.0.0-beta.5)
+
+### Changes
+
+- update react-icons dependency ([PR #20563](https://github.com/microsoft/fluentui/pull/20563) by ololubek@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-portal to v9.0.0-beta.5 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-positioning to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-beta.5 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+
+## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-beta.4)
+
+Fri, 12 Nov 2021 13:25:27 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-beta.3..@fluentui/react-menu_v9.0.0-beta.4)
+
+### Changes
+
+- Adds typings for `onCheckedValueChange` method ([PR #20493](https://github.com/microsoft/fluentui/pull/20493) by bsunderhus@microsoft.com)
+- use react-shared-contexts instead of react-provider ([PR #20578](https://github.com/microsoft/fluentui/pull/20578) by olfedias@microsoft.com)
+- export static classes for components ([PR #20450](https://github.com/microsoft/fluentui/pull/20450) by olfedias@microsoft.com)
+- Updated beta and RC components to ES2019 ([PR #20405](https://github.com/microsoft/fluentui/pull/20405) by gcox@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-portal to v9.0.0-beta.4 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-positioning to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-beta.4 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
+
+## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-beta.3)
+
+Wed, 27 Oct 2021 12:14:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu_v9.0.0-beta.2..@fluentui/react-menu_v9.0.0-beta.3)
+
+### Changes
+
+- Simplify type for MenuOpenChangeData ([PR #20096](https://github.com/microsoft/fluentui/pull/20096) by olfedias@microsoft.com)
+- added styling of documentation ([PR #20193](https://github.com/microsoft/fluentui/pull/20193) by peter@draxler.ml)
+- Bump @fluentui/react-context-selector to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-portal to v9.0.0-beta.3 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-positioning to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-provider to v9.0.0-beta.3 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-beta.3 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
 
 ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu_v9.0.0-beta.2)
 

package/Spec.md

@@ -619,7 +619,7 @@ const menu = (
 
 ```html
 <!-- expected DOM output  -->
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">Option 1</div>
   <div role="menuitem" tabindex="-1">Option 2</div>
@@ -644,7 +644,7 @@ const menu = (
 
 ```html
 <!-- expected DOM output  -->
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">
     <span role="presentation"><svg>FileIcon</svg></span>
@@ -682,7 +682,7 @@ const menu = (
 
 ```html
 <!-- expected DOM output  -->
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">Option 1</div>
   <div role="separator" aria-hidden="true"></div>
@@ -719,7 +719,7 @@ const menu = (
 
 ```html
 <!-- expected DOM output  -->
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">Option 1</div>
   <div role="separator" aria-hidden="true"></div>
@@ -758,10 +758,10 @@ const menu = (
 
 ```html
 <!-- expected DOM output  -->
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">Option 1</div>
-  <div role="menuitem" tabindex="-1" aria-haspopup="true" aria-expanded="false" id="submenu-trigger">Open submenu</div>
+  <div role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false" id="submenu-trigger">Open submenu</div>
 </div>
 
 <!-- expected DOM output for submenu  -->
@@ -843,7 +843,7 @@ const menuSelectableSections = (
 ```
 
 ```html
-<button aria-haspopup="true" aria-expanded="true" id="trigger">Open menu</button>
+<button aria-haspopup="menu" aria-expanded="true" id="trigger">Open menu</button>
 
 <!-- expected DOM output for basic checkbox  -->
 <div role="menu" aria-labelledby="trigger">
@@ -882,9 +882,12 @@ const menuSplitbutton= (
     <MenuList>
       <MenuItem>Option 1</MenuItem>
       <Menu>
-        <MenuTrigger>
-          <MenuItemSplit></MenuItemSplit>
-        </MenuTrigger>
+        <MenuSplitGroup>
+          <MenuItem>Main action</MenuItem>
+          <MenuTrigger>
+            <MenuItem />
+          </MenuTrigger>
+        </MenuSplitGroup>
         <MenuItem>Option 1</MenuItem>
         <MenuItem>Option 2</MenuItem>
         <MenuItem>Option 3</MenuItem>
@@ -897,7 +900,7 @@ const menuSplitbutton= (
 ```html
 <div role="menu" aria-labelledby="trigger">
   <div role="menuitem" tabindex="0">Option 1</div>
-  <div role="menuitem" tabindex="-1" aria-haspopup="true" aria-expanded="false" id="submenu-trigger">Open submenu</div>
+  <div role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false" id="submenu-trigger">Open submenu</div>
 </div>
 
 <!-- expected DOM output  -->
@@ -905,7 +908,7 @@ const menuSplitbutton= (
   <div role="menuitem" tabindex="0">Option 1</div>
   <div role="group">
     <div role="menuitem" tabindex="-1">content slot</div>
-    <div role="menuitem" tabindex="-1" aria-haspopup="true" aria-expanded="false" id="submenu-trgger">
+    <div role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false" id="submenu-trgger">
       <svg>indicator icon</svg>
     </div>
   </div>
@@ -958,11 +961,13 @@ Below is a set of diagrams that tries to illustrates all the interactions menus
 
 All of the above Mouse events seen previously should apply to the part of the split button that is intended to open a submenu.
 
-Once the submenu is open, the same behavior as in the [previous section](#submenu-trigger/navigation) applies with the exception of returning focus to the splitbutton, which is shown in the images below.
-
-![Using up/down arrow key](./etc/images/splitbutton-up-down.jpg)
+> TODO convert these diagrams to excalidraw or smth that is text format
+> TODO add extra descriptions to diagrams
 
-![Using left/right arrow key](./etc/images/splitbutton-left-right.jpg)
+<img src="./etc/images/menu-interactions/Slide19.PNG" width="700" />
+<img src="./etc/images/menu-interactions/Slide20.PNG" width="700" />
+<img src="./etc/images/menu-interactions/Slide21.PNG" width="700" />
+<img src="./etc/images/menu-interactions/Slide22.PNG" width="700" />
 
 ### MenuItem selection