@vectara/vectara-ui 13.16.2 → 13.16.3

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

@@ -10,5 +10,7 @@ export type Props = {
     onClickButton?: (e: React.MouseEvent<HTMLElement>) => void;
     padding?: boolean;
     anchorSide?: AnchorSide;
+    anchorOffsetX?: number;
+    anchorOffsetY?: number;
 };
-export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide, onClickButton, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide, anchorOffsetX, anchorOffsetY, onClickButton, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/popover/Popover.js

@@ -15,35 +15,35 @@ import classNames from "classnames";
 import { VuiPortal } from "../portal/Portal";
 import { FocusOn } from "react-focus-on";
 import { VuiItemsInput, VuiNumberInput, VuiTextInput } from "../form";
-const calculatePopoverPosition = (button, anchorSide) => {
+const calculatePopoverPosition = (button, anchorOptions) => {
     if (!button)
         return undefined;
+    const { anchorSide, offsetX, offsetY } = anchorOptions;
     const { left, right, width, height, top, bottom } = button.getBoundingClientRect();
     if (anchorSide === "rightUp") {
         // Anchor popover to the right side of the button, extending upwards.
         const adjustedTop = top + height + document.documentElement.scrollTop;
-        // TODO: Hardcoded offset is intended for use with VuiAppSideNav. Extract this into a configurable prop.
-        const adjustedLeft = left + width + 26;
+        const adjustedLeft = left + width + offsetX;
         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;
+        const adjustedRight = document.documentElement.clientWidth - left + offsetX;
         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;
+        const adjustedBottom = document.documentElement.clientHeight - top + offsetY;
         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 adjustedBottom = document.documentElement.clientHeight - top + offsetY;
         const adjustedRight = document.documentElement.clientWidth - right;
         return { bottom: `${adjustedBottom}px`, right: `${adjustedRight}px` };
     }
-    const adjustedTop = bottom + 2 + document.documentElement.scrollTop;
+    const adjustedTop = bottom + offsetY + document.documentElement.scrollTop;
     if (anchorSide === "left") {
         return { top: `${adjustedTop}px`, left: `${left}px` };
     }
@@ -52,7 +52,7 @@ const calculatePopoverPosition = (button, anchorSide) => {
     return { top: `${adjustedTop}px`, right: `${adjustedRight}px` };
 };
 export const VuiPopover = (_a) => {
-    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide = "right", onClickButton } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding", "anchorSide", "onClickButton"]);
+    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide = "right", anchorOffsetX = 2, anchorOffsetY = 2, onClickButton } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding", "anchorSide", "anchorOffsetX", "anchorOffsetY", "onClickButton"]);
     const returnFocusElRef = useRef(null);
     const buttonRef = useRef(null);
     const [, setPositionMarker] = useState(0);
@@ -129,7 +129,11 @@ export const VuiPopover = (_a) => {
     // Always keep menu position up to date. If we tried to cache this inside
     // a useEffect based on isOpen then there'd be a flicker if the width
     // of the button changes.
-    const position = calculatePopoverPosition(buttonRef.current, anchorSide);
+    const position = calculatePopoverPosition(buttonRef.current, {
+        anchorSide,
+        offsetX: anchorOffsetX,
+        offsetY: anchorOffsetY
+    });
     const classes = classNames("vuiPopover", className, {
         "vuiPopover-isLoaded": showTransition,
         "vuiPopover--rightUp": anchorSide === "rightUp",

package/package.json

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