@vectara/vectara-ui 15.7.1 → 15.8.0

package/lib/components/drawer/Drawer.js

@@ -44,8 +44,17 @@ export const VuiDrawer = (_a) => {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }, 0);
     };
+    // Handle outside clicks, but ignore clicks on notifications.
+    const handleClickOutside = (event) => {
+        const target = event.target;
+        // Check if the click is within a notification.
+        if (target.closest("[data-awareness='notification']")) {
+            return;
+        }
+        onCloseDelayed();
+    };
     const classes = classNames("vuiDrawer", `vuiDrawer--${color}`, className);
-    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
+    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: handleClickOutside, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,

package/lib/components/index.d.ts

@@ -88,8 +88,9 @@ import { TEXT_COLOR, TEXT_SIZE, TITLE_SIZE } from "./typography/types";
 import { VuiTitle } from "./typography/Title";
 import { VuiToggle } from "./toggle/Toggle";
 import { VuiTooltip } from "./tooltip/Tooltip";
+import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
 export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -81,7 +81,8 @@ import { TEXT_COLOR, TEXT_SIZE, TITLE_SIZE } from "./typography/types";
 import { VuiTitle } from "./typography/Title";
 import { VuiToggle } from "./toggle/Toggle";
 import { VuiTooltip } from "./tooltip/Tooltip";
+import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/notification/Notification.js

@@ -37,5 +37,7 @@ export const VuiNotification = ({ color, message, onDismiss, children, hasCopyBu
             icon = null;
     }
     const copyValue = code ? `${message}\n\n${code.content}` : message;
-    return (_jsx("div", Object.assign({ className: classes, "data-testid": `notification-${color}` }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "xs" }, { children: [icon, _jsxs("div", { children: [_jsx(VuiText, Object.assign({ preserveWhiteSpace: true }, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: message })) })), code && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCode, Object.assign({ language: code.language }, { children: code.content }))] })), hasCopyButton && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCopyButton, { value: copyValue, size: "s", label: "Copy notification" })] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), children] })), link && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiLink, Object.assign({}, link))] }))] })] })) })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { "aria-label": "Dismiss message", size: "xs", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: () => onDismiss(), "data-testid": `dismissNotificationButton-${color}` }) }))] })) })));
+    // data-awareness="notification" enables notifications to be closed when a drawer is open,
+    // without triggering the drawer to close.
+    return (_jsx("div", Object.assign({ className: classes, "data-testid": `notification-${color}`, "data-awareness": "notification" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "xs" }, { children: [icon, _jsxs("div", { children: [_jsx(VuiText, Object.assign({ preserveWhiteSpace: true }, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: message })) })), code && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCode, Object.assign({ language: code.language }, { children: code.content }))] })), hasCopyButton && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCopyButton, { value: copyValue, size: "s", label: "Copy notification" })] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), children] })), link && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiLink, Object.assign({}, link))] }))] })] })) })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { "aria-label": "Dismiss message", size: "xs", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: () => onDismiss(), "data-testid": `dismissNotificationButton-${color}` }) }))] })) })));
 };

package/lib/components/notification/Notifications.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toaster } from "sonner";
+import { VuiPortal } from "../portal/Portal";
 export const VuiNotifications = (props) => {
     const finalProps = Object.assign({ position: "top-right" }, props);
-    return _jsx(Toaster, Object.assign({}, finalProps));
+    // Render inside portal so notifications can appear above everything else, including drawers.
+    return (_jsx(VuiPortal, { children: _jsx(Toaster, Object.assign({}, finalProps)) }));
 };

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

@@ -0,0 +1,4 @@
+import { Props as TooltipProps } from "./Tooltip";
+type Props = Omit<TooltipProps, "children">;
+export declare const VuiInfoTooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/tooltip/InfoTooltip.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BiHelpCircle } from "react-icons/bi";
+import { VuiIcon } from "../icon/Icon";
+import { VuiTooltip } from "./Tooltip";
+export const VuiInfoTooltip = (props) => {
+    return (_jsx(VuiTooltip, Object.assign({}, props, { children: _jsx(VuiIcon, Object.assign({ color: "subdued", size: "s" }, { children: _jsx(BiHelpCircle, {}) })) })));
+};

package/lib/components/tooltip/Tooltip.js

@@ -6,12 +6,30 @@ import { VuiPortal } from "../portal/Portal";
 const generateTooltipId = () => {
     return `tooltip-${Math.random().toString(36).slice(2, 9)}`;
 };
+// Naturally focusable elements that don't need tabIndex.
+const FOCUSABLE_ELEMENTS = ["a", "button", "input", "select", "textarea"];
+// Determine if the element needs tabIndex to be keyboard accessible.
+const needsTabIndex = (element) => {
+    var _a;
+    if (!element || typeof element !== "object" || !("type" in element)) {
+        return false;
+    }
+    const child = element;
+    const elementType = typeof child.type === "string" ? child.type.toLowerCase() : "";
+    // Don't add tabIndex if element is naturally focusable.
+    if (FOCUSABLE_ELEMENTS.includes(elementType)) {
+        return false;
+    }
+    // Don't add tabIndex if it already has one.
+    if (((_a = child.props) === null || _a === void 0 ? void 0 : _a.tabIndex) !== undefined) {
+        return false;
+    }
+    return true;
+};
 export const VuiTooltip = ({ children, darkTheme, position, tip, usePortal }) => {
     const { getThemeStyle } = useVuiContext();
     const [id] = useState(generateTooltipId());
-    const target = cloneElement(children, {
-        "data-tooltip-id": id
-    });
+    const target = cloneElement(children, Object.assign({ "data-tooltip-id": id }, (needsTabIndex(children) && { tabIndex: 0 })));
     // Tooltips can be used in a dark-themed component, so we need to explicitly set
     // the light theme class in order to enable having a different theme than the
     // parent.

package/package.json

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

package/src/docs/pages/drawer/PrimaryDrawer.tsx

@@ -1,9 +1,11 @@
 import { useState } from "react";
 import {
+  addNotification,
   VuiButtonPrimary,
   VuiButtonSecondary,
   VuiDrawer,
   VuiFlexContainer,
+  VuiNotifications,
   VuiSpacer,
   VuiText,
   VuiToggle
@@ -51,6 +53,20 @@ export const PrimaryDrawer = () => {
           )
         }
       >
+        <VuiButtonSecondary
+          color="primary"
+          onClick={() => {
+            addNotification({
+              color: "primary",
+              message: "Just some information, FYI"
+            });
+          }}
+        >
+          Add notification
+        </VuiButtonSecondary>
+
+        <VuiSpacer size="m" />
+
         <VuiText>
           <p>I just thought you should know that your drawer is showing.</p>
         </VuiText>
@@ -186,6 +202,8 @@ export const PrimaryDrawer = () => {
         <FormGroup />
         <VuiSpacer size="l" />
       </VuiDrawer>
+
+      <VuiNotifications />
     </>
   );
 };

package/src/docs/pages/tooltip/InfoTooltip.tsx

@@ -0,0 +1,5 @@
+import { VuiInfoTooltip } from "../../../lib";
+
+export const InfoTooltip = () => {
+  return <VuiInfoTooltip tip="This explains a term or feature." />;
+};

package/src/docs/pages/tooltip/index.tsx

@@ -1,6 +1,8 @@
 import { Tooltip } from "./Tooltip";
+import { InfoTooltip } from "./InfoTooltip";
 
 const TooltipSource = require("!!raw-loader!./Tooltip");
+const InfoTooltipSource = require("!!raw-loader!./InfoTooltip");
 
 export const tooltip = {
   name: "Tooltip",
@@ -10,6 +12,11 @@ export const tooltip = {
       name: "Tooltip",
       component: <Tooltip />,
       source: TooltipSource.default.toString()
+    },
+    {
+      name: "Info Tooltip",
+      component: <InfoTooltip />,
+      source: InfoTooltipSource.default.toString()
     }
   ]
 };