@1024pix/pix-ui 55.31.0 → 55.31.2

package/addon/components/pix-navigation.js

@@ -26,10 +26,8 @@ export default class PixMNavigation extends Component {
   }
 
   @action
-  handleNavigationClick(event) {
-    if (event.target.nodeName === 'A') {
-      this.navigationMenuOpened = false;
-    }
+  handleNavigationClick() {
+    this.navigationMenuOpened = false;
   }
 
   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-navigation.scss

@@ -91,6 +91,10 @@
         &:active {
           background-color: rgb(var(--pix-neutral-800-inline), 30%);
         }
+
+        .pix-button__icon--before {
+          margin-right: 0;
+        }
       }
     }
   }

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.0",
+  "version": "55.31.2",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"