@nanoporetech-digital/components 2.4.0 → 2.5.0

package/dist/esm/{popover-46b5193d.js → popover-7639005b.js}

@@ -1841,8 +1841,11 @@ class Popover {
     if (this.popper) {
       this.popper.destroy();
     }
+    const safePlacement = this.options.placement.includes('center')
+      ? 'top'
+      : this.options.placement;
     this.popper = createPopper(this.anchor, this.popover, {
-      placement: this.options.placement,
+      placement: safePlacement,
       strategy: this.options.strategy,
       modifiers: [
         {
@@ -1864,7 +1867,16 @@ class Popover {
           name: 'offset',
           options: {
             padding: 5,
-            offset: [this.options.skidding, this.options.distance],
+            offset: ({ reference, placement, popper }) => {
+              if (this.options.placement !== 'center')
+                return [this.options.skidding, this.options.distance];
+              return [
+                this.options.skidding,
+                ['top', 'bottom'].includes(placement)
+                  ? -reference.height - (popper.height - reference.height) / 2
+                  : -reference.width - (popper.width - reference.width) / 2,
+              ];
+            },
           },
         },
       ],
@@ -1883,10 +1895,13 @@ class Popover {
     this.isVisible
       ? this.popover.classList.add(this.options.visibleClass)
       : this.popover.classList.remove(this.options.visibleClass);
+    const safePlacement = this.options.placement.includes('center')
+      ? 'top'
+      : this.options.placement;
     // Update popper options
     if (this.popper) {
       this.popper.setOptions({
-        placement: this.options.placement,
+        placement: safePlacement,
         strategy: this.options.strategy,
       });
       requestAnimationFrame(() => this.popper.update());
@@ -1896,4 +1911,4 @@ class Popover {
 
 export { Popover as P };
 
-//# sourceMappingURL=popover-46b5193d.js.map
+//# sourceMappingURL=popover-7639005b.js.map