@vectara/vectara-ui 13.3.1 → 13.4.0

package/lib/components/button/IconButton.d.ts

@@ -21,6 +21,7 @@ type Props = {
     tooltip?: {
         darkTheme?: TooltipProps["darkTheme"];
         position?: TooltipProps["position"];
+        usePortal?: TooltipProps["usePortal"];
     };
 };
 export declare const VuiIconButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement | null>>;

package/lib/components/tooltip/Tooltip.d.ts

@@ -4,5 +4,6 @@ export type Props = {
     tip: React.ReactNode;
     darkTheme?: boolean;
     position?: TooltipRefProps["place"];
+    usePortal?: boolean;
 };
-export declare const VuiTooltip: ({ children, darkTheme, position, tip }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTooltip: ({ children, darkTheme, position, tip, usePortal }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/tooltip/Tooltip.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, cloneElement } from "react";
 import { Tooltip } from "react-tooltip";
 import { useVuiContext } from "../context/Context";
+import { VuiPortal } from "../portal/Portal";
 const generateTooltipId = () => {
     return `tooltip-${Math.random().toString(36).slice(2, 9)}`;
 };
-export const VuiTooltip = ({ children, darkTheme, position, tip }) => {
+export const VuiTooltip = ({ children, darkTheme, position, tip, usePortal }) => {
     const { getThemeStyle } = useVuiContext();
     const [id] = useState(generateTooltipId());
     const target = cloneElement(children, {
@@ -15,7 +16,8 @@ export const VuiTooltip = ({ children, darkTheme, position, tip }) => {
     // the light theme class in order to enable having a different theme than the
     // parent.
     const style = getThemeStyle(darkTheme ? "dark" : "light");
-    return (_jsxs(_Fragment, { children: [target, _jsx(Tooltip, Object.assign({ id: id, offset: 10, className: "vuiTooltip", style: style, opacity: 1, place: position }, { children: tip }))] }));
+    const tooltip = (_jsx(Tooltip, Object.assign({ id: id, offset: 10, className: "vuiTooltip", style: style, opacity: 1, place: position }, { children: tip })));
+    return (_jsxs(_Fragment, { children: [target, usePortal ? _jsx(VuiPortal, { children: tooltip }) : tooltip] }));
 };
 // This is a workaround for the issue with ResizeObserver in ReactTooltip.
 // Without this, uncaught runtime errors are thrown: "ResizeObserver loop

package/package.json

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