WIP: dropdown menu

Co-authored-by: Laura Bergoens <laura.bergoens@pix.fr>
Co-authored-by: Jérémie Jadé <jeremie.jade@pix.fr>

pix-editor/app/components/challenges-production/localized-challenges-production.gjs

@@ -12,6 +12,7 @@ import dayjs from 'ember-dayjs/helpers/dayjs-format';
 import Challenge from 'pixeditor/models/challenge';
 import LocalizedChallenge from 'pixeditor/models/localized-challenge';
 
+import DropdownMenu from '../dropdown-menu';
 import ChallengesProductionHeader from './challenges-production-header';
 
 const PRIMARY_IN_LOCALE_STATUS = 'PRIMARY_IN_LOCALE';
@@ -175,6 +176,14 @@ export default class LocalizedChallengesProduction extends Component {
             </PixTableColumn>
             <PixTableColumn @context={{context}}>
               <:cell>
+                <DropdownMenu @ariaLabel="test" @iconName="extension">
+                  <li>a</li>
+                  <li>a</li>
+                  <li>a</li>
+                  <li>a</li>
+                  <li>a</li>
+                  <li>a</li>
+                </DropdownMenu>
                 {{#if localizedChallengeData.translationsUrl}}
                   <a class="ui button item" href={{localizedChallengeData.translationsUrl}} target="_blank" rel="noopener noreferrer" aria-label={{concat "traduction de l'épreuve de version " localizedChallengeData.version}}>
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">

pix-editor/app/components/dropdown-menu.gjs

@@ -0,0 +1,84 @@
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { next } from '@ember/runloop';
+import Component from '@glimmer/component';
+import PixIconButton from "@1024pix/pix-ui/components/pix-icon-button";
+
+export default class DropdownMenu extends Component {
+  @service router;
+
+  @tracked isMenuDisplayed = false;
+  randomMenuId = `menu-id-${window.crypto.randomUUID()}`;
+  randomButtonId = `button-id-${window.crypto.randomUUID()}`;
+
+  getOverflowHiddenParent(node) {
+    const parentNode = node.parent;
+    if(parentNode.style.overflow === 'hidden') {
+      return parentNode;
+    }
+    return this.getOverflowHiddenParent(parentNode);
+  }
+
+  displayMenuManager() {
+    const menu = document.querySelector(`#${this.randomMenuId}`);
+    const menuRect = menu.getBoundingClientRect();
+    const parent = this.getOverflowHiddenParent(menu)
+    if(parent) {
+      // todo: vérifier la position par rapport a window
+      // si pas d'overlape avec la window -> verifier par rapport au parent qui a overflow hidden
+    }
+    if(menuRect.bottom > window.innerHeight) {
+      menu.style.bottom = '100%';
+      menu.style.top = null
+    } else {
+      menu.style.top = '100%';
+      menu.style.bottom = null
+    }
+    menu.focus()
+  }
+
+  @action
+  onTrigger() {
+    this.isMenuDisplayed = !this.isMenuDisplayed;
+    if(this.isMenuDisplayed) {
+      next(this, this.displayMenuManager)
+    }
+  }
+
+  @action
+  onHide(event) {
+    if (document.querySelector(`#${this.randomMenuId}`).contains(event.relatedTarget)) return;
+    this.isMenuDisplayed = false;
+  }
+
+
+  <template>
+    <div class="dropdown">
+      <PixIconButton
+        id={{this.randomButtonId}}
+        @ariaLabel={{@ariaLabel}}
+        @iconName={{@iconName}}
+        @plainIcon={{@plainIcon}}
+        @triggerAction={{this.onTrigger}}
+        @withBackground={{@withBackground}}
+        @size={{@size}}
+        aria-haspopup="true"
+        aria-controls={{this.randomMenuId}}
+        aria-expanded="{{this.isMenuDisplayed}}"
+      />
+      <ul
+        id={{this.randomMenuId}}
+        tabindex="-1"
+        class="dropdown-menu{{if this.isMenuDisplayed "" "--hidden"}}"
+        {{on 'focusout' this.onHide}}
+        aria-labelledby={{this.randomButtonId}}
+        role="menu"
+      >
+        {{yield}}
+      </ul>
+    </div>
+  </template>
+}
+

pix-editor/app/styles/app.scss

@@ -40,6 +40,7 @@
 @use 'components/#-form';
 @use 'components/field';
 @use 'components/field/quality';
+@use 'components/dropdown-menu';
 @use 'globals/global' as globals-global;
 @use 'globals/notification';
 @use 'globals/page';

pix-editor/app/styles/components/dropdown-menu.scss

@@ -0,0 +1,18 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+
+  &-menu {
+    position: absolute;
+    right: 0;
+    top: 100%;
+    z-index: 10;
+    background: var(--pix-neutral-20);
+    border-radius: var(--pix-spacing-2x);
+    padding: var(--pix-spacing-2x);
+
+    &--hidden {
+      display: none;
+    }
+  }
+}