@vectara/vectara-ui 12.0.0 → 12.0.2

package/lib/components/app/appSideNav/AppSideNavLink.d.ts

@@ -1,4 +1,4 @@
 import { TreeItem } from "../types";
-export declare const VuiAppSideNavLink: import("react").ForwardRefExoticComponent<Pick<TreeItem, "className" | "name" | "path" | "isSelected" | "iconBefore" | "iconAfter"> & {
+export declare const VuiAppSideNavLink: import("react").ForwardRefExoticComponent<Pick<TreeItem, "className" | "path" | "name" | "isSelected" | "iconBefore" | "iconAfter"> & {
     onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement | null>>;

package/lib/components/context/Context.d.ts

@@ -8,6 +8,7 @@ interface VuiContextType {
     getPath: PathProvider;
     DrawerTitle: keyof JSX.IntrinsicElements;
     getThemeStyle: (theme: "dark" | "light") => Record<string, string>;
+    portalContainer?: HTMLElement;
 }
 type Props = {
     children: ReactNode;
@@ -16,7 +17,8 @@ type Props = {
     drawerTitle?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     theme?: Theme;
     isThemeIsolated?: boolean;
+    portalContainer?: HTMLElement;
 };
-export declare const VuiContextProvider: ({ children, linkProvider, pathProvider, drawerTitle, theme, isThemeIsolated }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiContextProvider: ({ children, linkProvider, pathProvider, drawerTitle, theme, portalContainer, isThemeIsolated }: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const useVuiContext: () => VuiContextType;
 export {};

package/lib/components/context/Context.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useEffect } from "react";
 import { LIGHT_THEME, DARK_THEME, toStyle } from "./Theme";
 const VuiContext = createContext(undefined);
-export const VuiContextProvider = ({ children, linkProvider, pathProvider, drawerTitle = "h2", theme = LIGHT_THEME, isThemeIsolated }) => {
+export const VuiContextProvider = ({ children, linkProvider, pathProvider, drawerTitle = "h2", theme = LIGHT_THEME, portalContainer = document.body, isThemeIsolated }) => {
     const createLink = (linkConfig) => {
         if (linkProvider)
             return linkProvider(linkConfig);
@@ -44,7 +44,7 @@ export const VuiContextProvider = ({ children, linkProvider, pathProvider, drawe
         return toStyle(LIGHT_THEME);
     };
     const themedChildren = isThemeIsolated ? _jsx("div", Object.assign({ style: cssVariables }, { children: children })) : children;
-    return (_jsx(VuiContext.Provider, Object.assign({ value: { createLink, getPath, DrawerTitle, getThemeStyle } }, { children: themedChildren })));
+    return (_jsx(VuiContext.Provider, Object.assign({ value: { createLink, getPath, DrawerTitle, getThemeStyle, portalContainer } }, { children: themedChildren })));
 };
 export const useVuiContext = () => {
     const context = useContext(VuiContext);

package/lib/components/portal/Portal.js

@@ -1,15 +1,19 @@
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
+import { useVuiContext } from "../context/Context";
 export const VuiPortal = ({ children }) => {
     // Initialize ref synchronously during the first render, ensuring portalRef.current
     // is immediately available for createPortal.
     const portalRef = useRef(document.createElement("div"));
+    const { portalContainer } = useVuiContext();
     useEffect(() => {
-        document.body.appendChild(portalRef.current);
+        if (!portalContainer)
+            return;
+        portalContainer.appendChild(portalRef.current);
         return () => {
             var _a;
             (_a = portalRef.current.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(portalRef.current);
         };
-    }, []);
+    }, [portalContainer]);
     return createPortal(children, portalRef.current);
 };

package/lib/components/tabs/_index.scss

@@ -65,7 +65,7 @@
   white-space: nowrap;
   flex-grow: 0;
   flex-shrink: 0;
-  color: var(--vui-color-subdued);
+  color: var(--vui-color-subdued-shade);
   text-decoration: none;
   cursor: pointer;
 

package/lib/components/typography/_textColor.scss

@@ -4,7 +4,7 @@ $color: (
   success: var(--vui-color-success-shade),
   warning: var(--vui-color-warning-shade),
   danger: var(--vui-color-danger-shade),
-  subdued: var(--vui-color-subdued),
+  subdued: var(--vui-color-subdued-shade),
   neutral: var(--vui-color-text),
   empty: var(--vui-color-empty-shade)
 );

package/lib/styles/index.css

@@ -5111,7 +5111,7 @@ h2.react-datepicker__current-month {
   white-space: nowrap;
   flex-grow: 0;
   flex-shrink: 0;
-  color: var(--vui-color-subdued);
+  color: var(--vui-color-subdued-shade);
   text-decoration: none;
   cursor: pointer;
 }
@@ -5664,7 +5664,7 @@ h2.react-datepicker__current-month {
 }
 
 .vuiTextColor--subdued {
-  color: var(--vui-color-subdued) !important;
+  color: var(--vui-color-subdued-shade) !important;
 }
 
 .vuiTextColor--neutral {

package/package.json

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