@nectary/components 5.1.1 → 5.1.2

package/bundle.js

@@ -5731,6 +5731,8 @@ const orientationValues = [
   "top-right",
   "bottom-left",
   "bottom-right",
+  "left",
+  "right",
   "bottom",
   "top"
 ];
@@ -5741,9 +5743,15 @@ const getPopOrientation = (orientation) => {
   if (orientation === "bottom") {
     return "bottom-stretch";
   }
+  if (orientation === "left") {
+    return "center-left";
+  }
+  if (orientation === "right") {
+    return "center-right";
+  }
   return orientation;
 };
-const templateHTML$K = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
+const templateHTML$K = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation=left]) #content-wrapper{padding-top:0;padding-right:4px}:host([orientation=right]) #content-wrapper{padding-top:0;padding-left:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}:host([orientation=left][tip]) #content-wrapper{padding-top:0;padding-right:12px}:host([orientation=right][tip]) #content-wrapper{padding-top:0;padding-left:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(-90deg);top:calc(50%);left:calc(100% - 13px)}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:calc(50%);left:13px}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 const TIP_SIZE = 16;
 const template$K = document.createElement("template");
 template$K.innerHTML = templateHTML$K;
@@ -5912,16 +5920,23 @@ class Popover extends NectaryElement {
     const orientation = this.orientation;
     const targetRect = this.#$pop.footprintRect;
     const contentRect = this.#$content.getBoundingClientRect();
-    const diffX = targetRect.x - contentRect.x;
-    let desiredX = diffX + targetRect.width / 2;
-    if (orientation === "bottom-left" || orientation === "top-left") {
-      desiredX = Math.max(desiredX, contentRect.width * 0.75);
-    }
-    if (orientation === "bottom-right" || orientation === "top-right") {
-      desiredX = Math.min(desiredX, contentRect.width * 0.25);
+    if (orientation.startsWith("top") || orientation.startsWith("bottom")) {
+      const diffX = targetRect.x - contentRect.x;
+      let desiredX = diffX + targetRect.width / 2;
+      if (orientation === "bottom-left" || orientation === "top-left") {
+        desiredX = Math.max(desiredX, contentRect.width * 0.75);
+      }
+      if (orientation === "bottom-right" || orientation === "top-right") {
+        desiredX = Math.min(desiredX, contentRect.width * 0.25);
+      }
+      const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
+      this.#$tip.style.left = `${xPos}px`;
+    } else if (orientation.startsWith("left") || orientation.startsWith("right")) {
+      const diffY = targetRect.y - contentRect.y;
+      const desiredY = diffY + targetRect.height / 2;
+      const yPos = Math.max(TIP_SIZE, Math.min(desiredY, contentRect.height - TIP_SIZE));
+      this.#$tip.style.top = `${yPos}px`;
     }
-    const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
-    this.#$tip.style.left = `${xPos}px`;
     setClass(this.#$tip, "hidden", rectOverlap(targetRect, contentRect));
   };
   // Prevent content from overflowing the viewport

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/popover/index.js

@@ -5,7 +5,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { rectOverlap } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getPopOrientation, orientationValues } from "./utils.js";
-const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation=left]) #content-wrapper{padding-top:0;padding-right:4px}:host([orientation=right]) #content-wrapper{padding-top:0;padding-left:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}:host([orientation=left][tip]) #content-wrapper{padding-top:0;padding-right:12px}:host([orientation=right][tip]) #content-wrapper{padding-top:0;padding-left:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(-90deg);top:calc(50%);left:calc(100% - 13px)}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:calc(50%);left:13px}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 const TIP_SIZE = 16;
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
@@ -174,16 +174,23 @@ class Popover extends NectaryElement {
     const orientation = this.orientation;
     const targetRect = this.#$pop.footprintRect;
     const contentRect = this.#$content.getBoundingClientRect();
-    const diffX = targetRect.x - contentRect.x;
-    let desiredX = diffX + targetRect.width / 2;
-    if (orientation === "bottom-left" || orientation === "top-left") {
-      desiredX = Math.max(desiredX, contentRect.width * 0.75);
-    }
-    if (orientation === "bottom-right" || orientation === "top-right") {
-      desiredX = Math.min(desiredX, contentRect.width * 0.25);
+    if (orientation.startsWith("top") || orientation.startsWith("bottom")) {
+      const diffX = targetRect.x - contentRect.x;
+      let desiredX = diffX + targetRect.width / 2;
+      if (orientation === "bottom-left" || orientation === "top-left") {
+        desiredX = Math.max(desiredX, contentRect.width * 0.75);
+      }
+      if (orientation === "bottom-right" || orientation === "top-right") {
+        desiredX = Math.min(desiredX, contentRect.width * 0.25);
+      }
+      const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
+      this.#$tip.style.left = `${xPos}px`;
+    } else if (orientation.startsWith("left") || orientation.startsWith("right")) {
+      const diffY = targetRect.y - contentRect.y;
+      const desiredY = diffY + targetRect.height / 2;
+      const yPos = Math.max(TIP_SIZE, Math.min(desiredY, contentRect.height - TIP_SIZE));
+      this.#$tip.style.top = `${yPos}px`;
     }
-    const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
-    this.#$tip.style.left = `${xPos}px`;
     setClass(this.#$tip, "hidden", rectOverlap(targetRect, contentRect));
   };
   // Prevent content from overflowing the viewport

package/popover/types.d.ts

@@ -1,5 +1,5 @@
 import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
-export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
+export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top' | 'left' | 'right';
 export type TSinchPopoverProps = {
     /** Open/close state */
     open: boolean;

package/popover/utils.js

@@ -3,6 +3,8 @@ const orientationValues = [
   "top-right",
   "bottom-left",
   "bottom-right",
+  "left",
+  "right",
   "bottom",
   "top"
 ];
@@ -13,6 +15,12 @@ const getPopOrientation = (orientation) => {
   if (orientation === "bottom") {
     return "bottom-stretch";
   }
+  if (orientation === "left") {
+    return "center-left";
+  }
+  if (orientation === "right") {
+    return "center-right";
+  }
   return orientation;
 };
 export {