@momentum-design/components 0.131.0 → 0.131.1

package/dist/components/popover/popover.component.d.ts

@@ -1,7 +1,8 @@
+import { OffsetOptions } from '@floating-ui/dom';
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import { DepthManager, StackChange } from '../../utils/controllers/DepthManager';
-import type { PopoverBoundaryRoot, PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from './popover.types';
+import { PopoverBoundaryRoot, PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from './popover.types';
 declare const Popover_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/focus/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
  * Popover is generic overlay which can be triggered by any actionable element.
@@ -134,9 +135,22 @@ declare class Popover extends Popover_base {
     visible: boolean;
     /**
      * The offset of the popover.
+     *
+     * By default, offset is just a number which represents the distance on the main axis in pixels
+     * between the reference element and the popover. Main axis is determined by the placement of the popover.
+     * For example, if the placement is top or bottom, the main axis is vertical, and
+     * if the placement is left or right, the main axis is horizontal.
+     *
+     * Alternatively the offset property accepts other values as well:
+     * - with an object value, `crossAxis` and `alignmentAxis` can be changed as well
+     * - with a function value, it provides the opportunity to fully control the offset logic
+     *
+     * Note: only the number value reflected in the `offset` attribute
+     *
      * @default 4
+     * @see [Floating UI - offset](https://floating-ui.com/docs/offset)
      */
-    offset: number;
+    offset: OffsetOptions;
     /**
      * This describes the clipping element(s) or area that overflow will be checked relative to.
      * The default is 'clippingAncestors', which are the overflow ancestors which will cause the
@@ -351,6 +365,7 @@ declare class Popover extends Popover_base {
      * @default null
      */
     elementIndexToReceiveFocus: number | null;
+    /** @internal */
     arrowElement: HTMLElement | null;
     /** @internal */
     private isHovered;

package/dist/components/popover/popover.component.js

@@ -184,7 +184,20 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
         this.visible = DEFAULTS.VISIBLE;
         /**
          * The offset of the popover.
+         *
+         * By default, offset is just a number which represents the distance on the main axis in pixels
+         * between the reference element and the popover. Main axis is determined by the placement of the popover.
+         * For example, if the placement is top or bottom, the main axis is vertical, and
+         * if the placement is left or right, the main axis is horizontal.
+         *
+         * Alternatively the offset property accepts other values as well:
+         * - with an object value, `crossAxis` and `alignmentAxis` can be changed as well
+         * - with a function value, it provides the opportunity to fully control the offset logic
+         *
+         * Note: only the number value reflected in the `offset` attribute
+         *
          * @default 4
+         * @see [Floating UI - offset](https://floating-ui.com/docs/offset)
          */
         this.offset = DEFAULTS.OFFSET;
         /**
@@ -367,6 +380,7 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
          * @default null
          */
         this.elementIndexToReceiveFocus = null;
+        /** @internal */
         this.arrowElement = null;
         /** @internal */
         this.isHovered = false;
@@ -653,7 +667,6 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
                     padding: this.boundaryPadding,
                 }),
             ];
-            let popoverOffset = this.offset;
             if (!this.disableFlip) {
                 middleware.push(flip({
                     boundary,
@@ -682,16 +695,16 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
                     padding: 50,
                 }));
             }
+            let arrowOffset = 0;
             if (this.showArrow) {
                 this.arrowElement = this.renderRoot.querySelector('div[part="popover-arrow"]');
                 if (this.arrowElement) {
                     const arrowLen = this.arrowElement.offsetHeight;
-                    const arrowOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
-                    popoverOffset += arrowOffset;
+                    arrowOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
                     middleware.push(arrow({ element: this.arrowElement, padding: 12 }));
                 }
             }
-            middleware.push(offset(popoverOffset));
+            middleware.push(offset(typeof this.offset === 'number' ? this.offset + arrowOffset : this.offset));
             this.floatingUICleanupFunction = autoUpdate(triggerElement, this, async () => {
                 const { triggerElement } = this;
                 if (!triggerElement)
@@ -1017,8 +1030,16 @@ __decorate([
     __metadata("design:type", Boolean)
 ], Popover.prototype, "visible", void 0);
 __decorate([
-    property({ type: Number, reflect: true }),
-    __metadata("design:type", Number)
+    property({
+        type: Number,
+        reflect: true,
+        converter: {
+            toAttribute(value) {
+                return typeof value === 'number' ? value.toString() : '';
+            },
+        },
+    }),
+    __metadata("design:type", Object)
 ], Popover.prototype, "offset", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'boundary' }),

package/dist/components/popover/popover.utils.js

@@ -53,32 +53,46 @@ export class PopoverUtils {
             right: '',
             bottom: '',
         });
-        const bridgeSize = `calc(${this.popover.showArrow ? '0.75rem + ' : ''}${this.popover.offset + 1}px)`;
-        const popoverHeight = this.popover.offsetHeight || 0;
-        const popoverWidth = this.popover.offsetWidth || 0;
-        if (hoverBridge) {
+        const triggerEl = this.popover.triggerElement;
+        if (hoverBridge && triggerEl) {
+            const popoverBBox = this.popover.getBoundingClientRect();
+            const triggerBBox = triggerEl.getBoundingClientRect();
+            let bridgeSize = 0;
+            if (!triggerBBox)
+                return;
+            const popoverHeight = this.popover.offsetHeight || 0;
+            const popoverWidth = this.popover.offsetWidth || 0;
             const side = placement.split('-')[0];
+            // bridgeSize calculated here because, floating UI might flip side on the main axis, also it can be negative if the trigger and popover are overlapping
+            if (side === 'top' || side === 'bottom') {
+                bridgeSize = Math.max(0, Math.max(popoverBBox.top - triggerBBox.bottom, triggerBBox.top - popoverBBox.bottom));
+            }
+            else if (side === 'left' || side === 'right') {
+                bridgeSize = Math.max(0, Math.max(triggerBBox.left - popoverBBox.right, popoverBBox.left - triggerBBox.right));
+            }
+            // ensure bridge overlap
+            bridgeSize += 1;
             switch (side) {
                 case 'top':
-                    hoverBridge.style.height = bridgeSize;
-                    hoverBridge.style.bottom = `calc(-1 * (${bridgeSize}))`;
+                    hoverBridge.style.height = `${bridgeSize}px`;
+                    hoverBridge.style.bottom = `calc(-1 * (${bridgeSize}px))`;
                     hoverBridge.style.left = '50%';
                     hoverBridge.style.width = `${popoverWidth}px`;
                     break;
                 case 'left':
                     hoverBridge.style.height = `${popoverHeight}px`;
-                    hoverBridge.style.width = bridgeSize;
-                    hoverBridge.style.right = `calc(-1.5 * (${bridgeSize}))`;
+                    hoverBridge.style.width = `${bridgeSize}px`;
+                    hoverBridge.style.right = `calc(-1.5 * (${bridgeSize}px))`;
                     break;
                 case 'right':
                     hoverBridge.style.height = `${popoverHeight}px`;
-                    hoverBridge.style.width = bridgeSize;
-                    hoverBridge.style.left = `calc(-0.5 * (${bridgeSize}))`;
+                    hoverBridge.style.width = `${bridgeSize}px`;
+                    hoverBridge.style.left = `calc(-0.5 * (${bridgeSize}px))`;
                     break;
                 case 'bottom':
                 default:
-                    hoverBridge.style.height = bridgeSize;
-                    hoverBridge.style.top = `calc(-1 * (${bridgeSize}))`;
+                    hoverBridge.style.height = `${bridgeSize}px`;
+                    hoverBridge.style.top = `calc(-1 * (${bridgeSize}px))`;
                     hoverBridge.style.left = '50%';
                     hoverBridge.style.width = `${popoverWidth}px`;
                     break;

package/dist/custom-elements.json

@@ -11664,19 +11664,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "arrowElement",
-              "type": {
-                "text": "HTMLElement | null"
-              },
-              "privacy": "public",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "backdrop",
@@ -12062,9 +12049,9 @@
               "kind": "field",
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "OffsetOptions"
               },
-              "description": "The offset of the popover.",
+              "description": "The offset of the popover.\n\nBy default, offset is just a number which represents the distance on the main axis in pixels\nbetween the reference element and the popover. Main axis is determined by the placement of the popover.\nFor example, if the placement is top or bottom, the main axis is vertical, and\nif the placement is left or right, the main axis is horizontal.\n\nAlternatively the offset property accepts other values as well:\n- with an object value, `crossAxis` and `alignmentAxis` can be changed as well\n- with a function value, it provides the opportunity to fully control the offset logic\n\nNote: only the number value reflected in the `offset` attribute",
               "default": "4",
               "attribute": "offset",
               "reflects": true,
@@ -12440,9 +12427,9 @@
             {
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "OffsetOptions"
               },
-              "description": "The offset of the popover.",
+              "description": "The offset of the popover.\n\nBy default, offset is just a number which represents the distance on the main axis in pixels\nbetween the reference element and the popover. Main axis is determined by the placement of the popover.\nFor example, if the placement is top or bottom, the main axis is vertical, and\nif the placement is left or right, the main axis is horizontal.\n\nAlternatively the offset property accepts other values as well:\n- with an object value, `crossAxis` and `alignmentAxis` can be changed as well\n- with a function value, it provides the opportunity to fully control the offset logic\n\nNote: only the number value reflected in the `offset` attribute",
               "default": "4",
               "fieldName": "offset",
               "inheritedFrom": {
@@ -25494,19 +25481,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "arrowElement",
-              "type": {
-                "text": "HTMLElement | null"
-              },
-              "privacy": "public",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "backdrop",
@@ -26058,9 +26032,9 @@
               "kind": "field",
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "OffsetOptions"
               },
-              "description": "The offset of the popover.",
+              "description": "The offset of the popover.\n\nBy default, offset is just a number which represents the distance on the main axis in pixels\nbetween the reference element and the popover. Main axis is determined by the placement of the popover.\nFor example, if the placement is top or bottom, the main axis is vertical, and\nif the placement is left or right, the main axis is horizontal.\n\nAlternatively the offset property accepts other values as well:\n- with an object value, `crossAxis` and `alignmentAxis` can be changed as well\n- with a function value, it provides the opportunity to fully control the offset logic\n\nNote: only the number value reflected in the `offset` attribute",
               "default": "4",
               "attribute": "offset",
               "reflects": true,
@@ -26470,9 +26444,9 @@
             {
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "OffsetOptions"
               },
-              "description": "The offset of the popover.",
+              "description": "The offset of the popover.\n\nBy default, offset is just a number which represents the distance on the main axis in pixels\nbetween the reference element and the popover. Main axis is determined by the placement of the popover.\nFor example, if the placement is top or bottom, the main axis is vertical, and\nif the placement is left or right, the main axis is horizontal.\n\nAlternatively the offset property accepts other values as well:\n- with an object value, `crossAxis` and `alignmentAxis` can be changed as well\n- with a function value, it provides the opportunity to fully control the offset logic\n\nNote: only the number value reflected in the `offset` attribute",
               "default": "4",
               "fieldName": "offset",
               "inheritedFrom": {
@@ -31365,15 +31339,6 @@
               "attribute": "aria-labelledby",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "arrowElement",
-              "type": {
-                "text": "HTMLElement | null"
-              },
-              "privacy": "public",
-              "default": "null"
-            },
             {
               "kind": "field",
               "name": "backdrop",
@@ -31663,9 +31628,9 @@
               "kind": "field",
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "OffsetOptions"
               },
-              "description": "The offset of the popover.",
+              "description": "The offset of the popover.\n\nBy default, offset is just a number which represents the distance on the main axis in pixels\nbetween the reference element and the popover. Main axis is determined by the placement of the popover.\nFor example, if the placement is top or bottom, the main axis is vertical, and\nif the placement is left or right, the main axis is horizontal.\n\nAlternatively the offset property accepts other values as well:\n- with an object value, `crossAxis` and `alignmentAxis` can be changed as well\n- with a function value, it provides the opportunity to fully control the offset logic\n\nNote: only the number value reflected in the `offset` attribute",
               "default": "4",
               "attribute": "offset",
               "reflects": true
@@ -31902,9 +31867,9 @@
             {
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "OffsetOptions"
               },
-              "description": "The offset of the popover.",
+              "description": "The offset of the popover.\n\nBy default, offset is just a number which represents the distance on the main axis in pixels\nbetween the reference element and the popover. Main axis is determined by the placement of the popover.\nFor example, if the placement is top or bottom, the main axis is vertical, and\nif the placement is left or right, the main axis is horizontal.\n\nAlternatively the offset property accepts other values as well:\n- with an object value, `crossAxis` and `alignmentAxis` can be changed as well\n- with a function value, it provides the opportunity to fully control the offset logic\n\nNote: only the number value reflected in the `offset` attribute",
               "default": "4",
               "fieldName": "offset"
             },
@@ -48057,19 +48022,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "arrowElement",
-              "type": {
-                "text": "HTMLElement | null"
-              },
-              "privacy": "public",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "backdrop",
@@ -48473,9 +48425,9 @@
               "kind": "field",
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "OffsetOptions"
               },
-              "description": "The offset of the popover.",
+              "description": "The offset of the popover.\n\nBy default, offset is just a number which represents the distance on the main axis in pixels\nbetween the reference element and the popover. Main axis is determined by the placement of the popover.\nFor example, if the placement is top or bottom, the main axis is vertical, and\nif the placement is left or right, the main axis is horizontal.\n\nAlternatively the offset property accepts other values as well:\n- with an object value, `crossAxis` and `alignmentAxis` can be changed as well\n- with a function value, it provides the opportunity to fully control the offset logic\n\nNote: only the number value reflected in the `offset` attribute",
               "default": "4",
               "attribute": "offset",
               "reflects": true,
@@ -48841,9 +48793,9 @@
             {
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "OffsetOptions"
               },
-              "description": "The offset of the popover.",
+              "description": "The offset of the popover.\n\nBy default, offset is just a number which represents the distance on the main axis in pixels\nbetween the reference element and the popover. Main axis is determined by the placement of the popover.\nFor example, if the placement is top or bottom, the main axis is vertical, and\nif the placement is left or right, the main axis is horizontal.\n\nAlternatively the offset property accepts other values as well:\n- with an object value, `crossAxis` and `alignmentAxis` can be changed as well\n- with a function value, it provides the opportunity to fully control the offset logic\n\nNote: only the number value reflected in the `offset` attribute",
               "default": "4",
               "fieldName": "offset",
               "inheritedFrom": {
@@ -49474,19 +49426,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "arrowElement",
-              "type": {
-                "text": "HTMLElement | null"
-              },
-              "privacy": "public",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "backdrop",
@@ -49870,9 +49809,9 @@
               "kind": "field",
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "OffsetOptions"
               },
-              "description": "The offset of the popover.",
+              "description": "The offset of the popover.\n\nBy default, offset is just a number which represents the distance on the main axis in pixels\nbetween the reference element and the popover. Main axis is determined by the placement of the popover.\nFor example, if the placement is top or bottom, the main axis is vertical, and\nif the placement is left or right, the main axis is horizontal.\n\nAlternatively the offset property accepts other values as well:\n- with an object value, `crossAxis` and `alignmentAxis` can be changed as well\n- with a function value, it provides the opportunity to fully control the offset logic\n\nNote: only the number value reflected in the `offset` attribute",
               "default": "4",
               "attribute": "offset",
               "reflects": true,
@@ -50311,9 +50250,9 @@
             {
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "OffsetOptions"
               },
-              "description": "The offset of the popover.",
+              "description": "The offset of the popover.\n\nBy default, offset is just a number which represents the distance on the main axis in pixels\nbetween the reference element and the popover. Main axis is determined by the placement of the popover.\nFor example, if the placement is top or bottom, the main axis is vertical, and\nif the placement is left or right, the main axis is horizontal.\n\nAlternatively the offset property accepts other values as well:\n- with an object value, `crossAxis` and `alignmentAxis` can be changed as well\n- with a function value, it provides the opportunity to fully control the offset logic\n\nNote: only the number value reflected in the `offset` attribute",
               "default": "4",
               "fieldName": "offset",
               "inheritedFrom": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.131.0",
+  "version": "0.131.1",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"