vira 26.5.0 → 26.5.2

package/dist/elements/pop-up/vira-menu-item.element.js

@@ -1,4 +1,4 @@
-import { classMap, css, html, renderIf } from 'element-vir';
+import { css, html } from 'element-vir';
 import { Check24Icon } from '../../icons/icon-svgs/check-24.icon.js';
 import { noUserSelect } from '../../styles/index.js';
 import { defineViraElement } from '../define-vira-element.js';
@@ -12,27 +12,33 @@ import { ViraIcon } from '../vira-icon.element.js';
 export const ViraMenuItem = defineViraElement()({
     tagName: 'vira-menu-item',
     hostClasses: {
-        'vira-menu-item-selected': ({ inputs }) => inputs.selected,
+        'vira-menu-item-selected': ({ inputs }) => !inputs.hideCheckIcon && inputs.selected,
     },
     styles: ({ hostClasses }) => css `
         :host {
             display: flex;
             ${noUserSelect};
+            box-sizing: border-box;
+            max-width: 100%;
+            overflow: hidden;
         }
 
         .item {
             pointer-events: none;
             min-height: 24px;
             display: flex;
+            max-width: 100%;
             align-items: center;
             padding: 8px;
             padding-right: 24px;
             padding-left: 0;
             text-align: left;
+            box-sizing: border-box;
         }
 
         ${hostClasses['vira-menu-item-selected'].selector} ${ViraIcon} {
             opacity: 1;
+            visibility: hidden;
         }
 
         /*
@@ -45,18 +51,11 @@ export const ViraMenuItem = defineViraElement()({
             margin-right: -2px;
             margin-left: 2px;
         }
-
-        .include-left-spacing {
-            padding-left: 12px;
-            padding-right: 12px;
-        }
     `,
     render({ inputs }) {
         return html `
-            <div class="item ${classMap({ 'include-left-spacing': !!inputs.hideCheckIcon })}">
-                ${renderIf(!inputs.hideCheckIcon, html `
-                        <${ViraIcon.assign({ icon: Check24Icon })}></${ViraIcon}>
-                    `)}
+            <div class="item">
+                <${ViraIcon.assign({ icon: Check24Icon })}></${ViraIcon}>
                 <slot>${inputs.label}</slot>
             </div>
         `;

package/dist/elements/pop-up/vira-menu-trigger.element.js

@@ -31,6 +31,10 @@ export const ViraMenuTrigger = defineViraElement()({
         ${ViraPopUpTrigger} {
             width: 100%;
         }
+
+        .full-width-menu {
+            width: 100%;
+        }
     `,
     events: {
         itemActivate: defineElementEvent(),
@@ -96,6 +100,9 @@ export const ViraMenuTrigger = defineViraElement()({
                 cornerStyle: inputs.menuCornerStyle,
             })}
                               slot=${ViraPopUpTrigger.slotNames.popUp}
+                              class=${classMap({
+                'full-width-menu': inputs.horizontalAnchor === HorizontalAnchor.Both,
+            })}
                           >
                               <${ViraMenu.assign({
                 items: inputs.items,

package/dist/elements/pop-up/vira-menu.element.js

@@ -39,6 +39,7 @@ export const ViraMenu = defineViraElement()({
             flex-direction: column;
 
             width: 100%;
+            max-width: 100%;
             max-height: 100%;
             overflow-y: auto;
             z-index: 100;

package/dist/elements/pop-up/vira-pop-up-menu.element.js

@@ -43,8 +43,7 @@ export const ViraPopUpMenu = defineViraElement()({
     styles: ({ hostClasses }) => css `
         :host {
             display: flex;
-
-            width: 100%;
+            max-width: 100%;
             max-height: 100%;
             overflow-y: auto;
             z-index: 99;

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -96,12 +96,19 @@ export const ViraPopUpTrigger = defineViraElement()({
             pointer-events: none;
             display: flex;
             flex-direction: column;
+            align-items: flex-start;
+            overflow: hidden;
 
             /* highest possible z-index */
             z-index: 2147483647;
 
             & > * {
                 pointer-events: auto;
+                max-width: 100%;
+            }
+
+            &.right-aligned {
+                align-items: flex-end;
             }
         }
 
@@ -188,24 +195,24 @@ export const ViraPopUpTrigger = defineViraElement()({
                 triggerPopUp({ emitEvent: false, open: true }, undefined);
             }
         }
-        const horizontalPositionStyle = state.showPopUpResult
+        const leftCss = inputs.horizontalAnchor === HorizontalAnchor.Right && state.showPopUpResult
+            ? css `
+                      left: -${state.showPopUpResult.positions.diff.left}px;
+                  `
+            : css `
+                      left: ${inputs.popUpOffset?.left || 0}px;
+                  `;
+        const rightCss = state.showPopUpResult && inputs.horizontalAnchor === HorizontalAnchor.Left
             ? css `
-                  ${inputs.horizontalAnchor === HorizontalAnchor.Right
-                ? css `
-                            left: -${state.showPopUpResult.positions.diff.left}px;
-                        `
-                : css `
-                            left: ${inputs.popUpOffset?.left || 0}px;
-                        `}
-                  ${inputs.horizontalAnchor === HorizontalAnchor.Left
-                ? css `
-                            right: -${state.showPopUpResult.positions.diff.right}px;
-                        `
-                : css `
-                            right: ${inputs.popUpOffset?.right || 0}px;
-                        `}
-              `
-            : css ``;
+                      right: -${state.showPopUpResult.positions.diff.right}px;
+                  `
+            : css `
+                      right: ${inputs.popUpOffset?.right || 0}px;
+                  `;
+        const horizontalPositionStyle = css `
+            ${leftCss}
+            ${rightCss}
+        `;
         /**
          * These styles do _not_ account for window resizing while the menu is open. I decided this
          * was not a major enough problem to tackle. If it becomes major enough in the future,
@@ -260,7 +267,12 @@ export const ViraPopUpTrigger = defineViraElement()({
                 <div class="dropdown-trigger">
                     <slot name=${slotNames.trigger}></slot>
                 </div>
-                <div class="pop-up-positioner" style=${positionerStyles}>
+                <div
+                    class="pop-up-positioner ${classMap({
+            'right-aligned': inputs.horizontalAnchor === HorizontalAnchor.Right,
+        })}"
+                    style=${positionerStyles}
+                >
                     ${renderIf(!!state.showPopUpResult, html `
                             <slot name=${slotNames.popUp}></slot>
                         `)}

package/dist/util/pop-up-manager.js

@@ -49,8 +49,21 @@ export class PopUpManager {
         this.navController = navController;
         this.options = { ...this.options, ...options };
     }
-    attachGlobalListeners() {
+    attachGlobalListeners(container) {
+        let firstFired = false;
+        const resizeObserver = new ResizeObserver(() => {
+            if (firstFired) {
+                this.removePopUp();
+            }
+            else {
+                firstFired = true;
+            }
+        });
+        resizeObserver.observe(container);
         this.cleanupCallbacks = [
+            () => {
+                resizeObserver.disconnect();
+            },
             listenToPageActivation(false, (isPageActive) => {
                 if (!isPageActive) {
                     this.removePopUp();
@@ -167,7 +180,7 @@ export class PopUpManager {
         });
         const useUp = diff.top > diff.bottom + currentOptions.verticalDiffThreshold &&
             diff.bottom < currentOptions.minDownSpace;
-        this.attachGlobalListeners();
+        this.attachGlobalListeners(container);
         return {
             popDown: !useUp,
             positions: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "26.5.0",
+    "version": "26.5.2",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -67,7 +67,7 @@
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^26.5.0"
+        "element-vir": "^26.5.2"
     },
     "engines": {
         "node": ">=22"