@1024pix/pix-ui 55.31.1 → 55.32.0

package/addon/components/pix-navigation.hbs

@@ -21,7 +21,7 @@
   </header>
   <nav
     class="pix-navigation__nav"
-    {{on "click" this.handleNavigationClick}}
+    {{on "click" this.closeNavigation}}
     aria-label={{@navigationAriaLabel}}
     id={{this.navigationId}}
   >

package/addon/components/pix-navigation.js

@@ -1,10 +1,13 @@
 import { warn } from '@ember/debug';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
+import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
 export default class PixMNavigation extends Component {
+  @service router;
+
   constructor(...args) {
     super(...args);
     this._navigationId = 'navigation-' + guidFor(this);
@@ -23,11 +26,18 @@ export default class PixMNavigation extends Component {
   @action
   toggleNavigationMenu() {
     this.navigationMenuOpened = !this.navigationMenuOpened;
+
+    if (this.navigationMenuOpened) {
+      this.router.on('routeDidChange', this.closeNavigation);
+    } else {
+      this.router.off('routeDidChange', this.closeNavigation);
+    }
   }
 
   @action
-  handleNavigationClick() {
+  closeNavigation() {
     this.navigationMenuOpened = false;
+    this.router.off('routeDidChange', this.closeNavigation);
   }
 
   get navigationId() {

package/addon/components/pix-structure-switcher.hbs

@@ -8,7 +8,6 @@
   ...attributes
 >
   <PopperJS @placement="right-end" as |reference popover|>
-
     <PixButton
       {{reference}}
       @size="small"
@@ -18,23 +17,25 @@
       @triggerAction={{this.toggleMenu}}
       aria-expanded={{this.isMenuOpen}}
     >{{@label}}</PixButton>
-    <div
-      {{popover}}
-      class="pix-select__dropdown {{unless this.isMenuOpen 'pix-select__dropdown--closed'}}"
-    >
-      <PixSelectList
-        aria-labelledby={{this.switcherId}}
-        {{on "transitionend" this.focus}}
-        @hideDefaultOption={{true}}
-        @listId={{this.listId}}
-        @selectId={{this.switcherId}}
-        @value={{@value}}
-        @onChange={{this.onSelectListChange}}
-        @defaultOption={{@defaultOption}}
-        @isExpanded={{this.isMenuOpen}}
-        @options={{@structures}}
-        @defaultOptionValue={{@label}}
-      />
-    </div>
+    {{#if this.isMenuOpen}}
+      <div
+        {{popover}}
+        class="pix-select__dropdown {{unless this.isMenuOpen 'pix-select__dropdown--closed'}}"
+      >
+        <PixSelectList
+          aria-labelledby={{this.switcherId}}
+          {{on "transitionend" this.focus}}
+          @hideDefaultOption={{true}}
+          @listId={{this.listId}}
+          @selectId={{this.switcherId}}
+          @value={{@value}}
+          @onChange={{this.onSelectListChange}}
+          @defaultOption={{@defaultOption}}
+          @isExpanded={{this.isMenuOpen}}
+          @options={{@structures}}
+          @defaultOptionValue={{@label}}
+        />
+      </div>
+    {{/if}}
   </PopperJS>
 </div>

package/addon/modifiers/on-arrow-down-up-action.js

@@ -1,8 +1,6 @@
 import { modifier } from 'ember-modifier';
 
 export default modifier((element, [elementId, callback, isExpanded]) => {
-  const elementToTarget = document.getElementById(elementId);
-
   element.addEventListener('keydown', handleKeyDown);
 
   return () => {
@@ -19,7 +17,10 @@ export default modifier((element, [elementId, callback, isExpanded]) => {
     event.preventDefault();
 
     const focusElement = () => {
-      const focusableElements = findFocusableElements(elementToTarget);
+      const targetElement = document.getElementById(elementId);
+      if (!targetElement) return;
+
+      const focusableElements = findFocusableElements(targetElement);
 
       const [firstFocusableElement] = focusableElements;
       const lastFocusableElement = focusableElements[focusableElements.length - 1];
@@ -60,15 +61,20 @@ export default modifier((element, [elementId, callback, isExpanded]) => {
     };
 
     if (!isExpanded) {
-      elementToTarget.addEventListener('transitionend', focusElement);
-
       callback(event);
 
-      return () => {
-        elementToTarget.removeEventListener('transitionend', focusElement);
+      const waitForElement = () => {
+        const targetElement = document.getElementById(elementId);
+        if (targetElement) {
+          targetElement.addEventListener('transitionend', focusElement, { once: true });
+        } else {
+          requestAnimationFrame(waitForElement);
+        }
       };
+
+      waitForElement();
     } else {
-      focusElement(elementToTarget);
+      focusElement();
     }
   }
 });

package/addon/styles/_pix-structure-switcher.scss

@@ -35,6 +35,9 @@
     margin-left: calc(-1 * var(--pix-spacing-4x)) !important;
     overflow-y: auto;
     border-radius: 8px;
+    opacity: 0;
+    animation: fade-in-dropdown 150ms ease-in-out forwards;
+    animation-delay: 50ms;
 
     @include breakpoints.device-is('mobile') {
       position: static !important;
@@ -100,3 +103,13 @@
     }
   }
 }
+
+@keyframes fade-in-dropdown {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "55.31.1",
+  "version": "55.32.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"