fix(menu): prevent overflow (#21006)

* fix(menu): prevent menu overflow

This uses the correct menu html element for checking the size of the menu to
correctly compute the position to avoid overflow.

* docs(menu): add context menu example to storybook

This adds an example of a context menu to the menu story to show correct
automatic positioning of the menu and submenus to avoid overflows.

* Update packages/web-components/src/components/menu/menu.stories.ts

---------

Co-authored-by: Mahmoud <132728978+maradwan26@users.noreply.github.com>
Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>

Author: 3 people

packages/web-components/src/components/menu/__tests__/menu-test.js

@@ -90,4 +90,24 @@ describe('cds-menu', () => {
       expect(el.context.isRoot).to.be.false;
     });
   });
+
+  describe('positioning', () => {
+    it('should adjust position when the menu cannot open to the bottom right', async () => {
+      const nearMaxX = window.innerWidth - 10;
+      const nearMaxY = window.innerHeight - 10;
+
+      const el = await fixture(html`
+        <cds-menu .x=${nearMaxX} .y=${nearMaxY} open>
+          <cds-menu-item label="Item 1"></cds-menu-item>
+        </cds-menu>
+      `);
+
+      await el.updateComplete;
+
+      expect(el.position[0]).to.be.a('number');
+      expect(el.position[1]).to.be.a('number');
+      expect(el.position[0]).to.be.lessThan(nearMaxX);
+      expect(el.position[1]).to.be.lessThan(nearMaxY);
+    });
+  });
 });

packages/web-components/src/components/menu/menu.ts

@@ -313,7 +313,8 @@ class CDSMenu extends HostListenerMixin(LitElement) {
     const { isRoot } = this.context;
 
     // const isRoot =  false
-    const { width, height } = this.getBoundingClientRect();
+    const menuElement = this.shadowRoot?.querySelector(`.${prefix}--menu`);
+    const { width, height } = (menuElement ?? this).getBoundingClientRect();
     const alignment = isRoot ? 'vertical' : 'horizontal';
     const axes = {
       x: {