@vectara/vectara-ui 13.14.0 → 13.14.1

package/lib/components/popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export type AnchorSide = "left" | "right" | "rightUp";
+export type AnchorSide = "left" | "right" | "rightUp" | "leftUp" | "upLeft" | "upRight";
 export type Props = {
     button: React.ReactElement;
     children?: React.ReactNode;

package/lib/components/popover/Popover.js

@@ -26,6 +26,23 @@ const calculatePopoverPosition = (button, anchorSide) => {
         const adjustedLeft = left + width + 26;
         return { top: `${adjustedTop}px`, left: `${adjustedLeft}px` };
     }
+    if (anchorSide === "leftUp") {
+        // Anchor popover to the left side of the button, extending upwards.
+        const adjustedTop = top + height + document.documentElement.scrollTop;
+        const adjustedRight = document.documentElement.clientWidth - left + 26;
+        return { top: `${adjustedTop}px`, right: `${adjustedRight}px` };
+    }
+    if (anchorSide === "upLeft") {
+        // Anchor popover above the button, aligned to the left edge.
+        const adjustedBottom = document.documentElement.clientHeight - top + 2;
+        return { bottom: `${adjustedBottom}px`, left: `${left}px` };
+    }
+    if (anchorSide === "upRight") {
+        // Anchor popover above the button, aligned to the right edge.
+        const adjustedBottom = document.documentElement.clientHeight - top + 2;
+        const adjustedRight = document.documentElement.clientWidth - right;
+        return { bottom: `${adjustedBottom}px`, right: `${adjustedRight}px` };
+    }
     const adjustedTop = bottom + 2 + document.documentElement.scrollTop;
     if (anchorSide === "left") {
         return { top: `${adjustedTop}px`, left: `${left}px` };
@@ -115,7 +132,10 @@ export const VuiPopover = (_a) => {
     const position = calculatePopoverPosition(buttonRef.current, anchorSide);
     const classes = classNames("vuiPopover", className, {
         "vuiPopover-isLoaded": showTransition,
-        "vuiPopover--rightUp": anchorSide === "rightUp"
+        "vuiPopover--rightUp": anchorSide === "rightUp",
+        "vuiPopover--leftUp": anchorSide === "leftUp",
+        "vuiPopover--upLeft": anchorSide === "upLeft",
+        "vuiPopover--upRight": anchorSide === "upRight"
     });
     const contentClasses = classNames("vuiPopoverContent", {
         "vuiPopoverContent--padding": padding

package/lib/components/popover/_index.scss

@@ -16,10 +16,16 @@
   overflow: visible;
 }
 
-.vuiPopover--rightUp {
+.vuiPopover--rightUp,
+.vuiPopover--leftUp {
   transform: translateY(-100%) !important;
 }
 
+.vuiPopover--upLeft,
+.vuiPopover--upRight {
+  transform: translateY($sizeXs);
+}
+
 .vuiPopover-isLoaded {
   visibility: visible;
   opacity: 1;

package/lib/styles/index.css

@@ -4222,10 +4222,16 @@ h2.react-datepicker__current-month {
   overflow: visible;
 }
 
-.vuiPopover--rightUp {
+.vuiPopover--rightUp,
+.vuiPopover--leftUp {
   transform: translateY(-100%) !important;
 }
 
+.vuiPopover--upLeft,
+.vuiPopover--upRight {
+  transform: translateY(8px);
+}
+
 .vuiPopover-isLoaded {
   visibility: visible;
   opacity: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "13.14.0",
+  "version": "13.14.1",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",