@vectara/vectara-ui 1.0.1 → 1.0.2

package/lib/components/index.d.ts

@@ -43,7 +43,7 @@ import { VuiOptionsButton } from "./optionsButton/OptionsButton";
 import { VuiOptionsList } from "./optionsList/OptionsList";
 import { VuiOptionsListItem } from "./optionsList/OptionsListItem";
 import { OptionListItem } from "./optionsList/types";
-import { VuiPopover } from "./popover/Popover";
+import { VuiPopover, AnchorSide } from "./popover/Popover";
 import { VuiPortal } from "./portal/Portal";
 import { PROGRESS_BAR_COLOR, VuiProgressBar } from "./progressBar/ProgressBar";
 import { VuiPrompt } from "./prompt/Prompt";
@@ -71,5 +71,5 @@ import { TEXT_COLOR, TEXT_SIZE, TITLE_SIZE } from "./typography/types";
 import { VuiTitle } from "./typography/Title";
 import { VuiToggle } from "./toggle/Toggle";
 import { VuiTopicButton } from "./topicButton/TopicButton";
-export type { AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CodeLanguage, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, Notification, OptionListItem, RadioButtonConfig, SearchResult, Sections, SectionItem, TabSize, Tree, TreeItem };
+export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CodeLanguage, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, Notification, OptionListItem, RadioButtonConfig, SearchResult, Sections, SectionItem, TabSize, Tree, TreeItem };
 export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, VuiAccordion, VuiAccountMenu, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDrawer, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiHorizontalRule, VuiIcon, VuiInfoTable, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStatList, VuiStatus, VuiSummary, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTitle, VuiToggle, VuiTopicButton };

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

@@ -1,4 +1,5 @@
 import React from "react";
+export type AnchorSide = "left" | "right";
 export type Props = {
     button: React.ReactElement;
     children?: React.ReactNode;
@@ -7,5 +8,6 @@ export type Props = {
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
     padding?: boolean;
+    anchorSide?: AnchorSide;
 };
-export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/popover/Popover.js

@@ -14,17 +14,20 @@ import { cloneElement, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { VuiPortal } from "../portal/Portal";
 import { FocusOn } from "react-focus-on";
-const getPosition = (button) => {
+const calculatePopoverPosition = (button, anchorSide) => {
     if (!button)
         return undefined;
-    const { bottom, right } = button.getBoundingClientRect();
-    return {
-        top: bottom + 2 + document.documentElement.scrollTop,
-        right: window.innerWidth - right
-    };
+    const buttonRect = button.getBoundingClientRect();
+    const top = buttonRect.bottom + 2 + document.documentElement.scrollTop;
+    const left = buttonRect.left;
+    if (anchorSide === "left") {
+        return { top: `${top}px`, left: `${left}px` };
+    }
+    const right = window.innerWidth - buttonRect.right;
+    return { top: `${top}px`, right: `${right}px` };
 };
 export const VuiPopover = (_a) => {
-    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding"]);
+    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide = "right" } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding", "anchorSide"]);
     const returnFocusElRef = useRef(null);
     const buttonRef = useRef(null);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -73,7 +76,7 @@ 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 = getPosition(buttonRef.current);
+    const position = calculatePopoverPosition(buttonRef.current, anchorSide);
     const classes = classNames("vuiPopover", className);
     const contentClasses = classNames("vuiPopoverContent", {
         "vuiPopoverContent--padding": padding
@@ -87,5 +90,5 @@ export const VuiPopover = (_a) => {
                     // Enable scrolling of the page.
                     scrollLock: false, 
                     // Enable scrolling of the page.
-                    preventScrollOnFocus: false }, { children: _jsxs("div", Object.assign({ className: classes, style: { top: `${position.top}px`, right: `${position.right}px` } }, rest, { children: [header && typeof header === "string" ? _jsx("div", Object.assign({ className: "vuiPopoverTitle" }, { children: header })) : header, children && _jsx("div", Object.assign({ className: contentClasses }, { children: children }))] })) }))) })] }));
+                    preventScrollOnFocus: false }, { children: _jsxs("div", Object.assign({ className: classes, style: position }, rest, { children: [header && typeof header === "string" ? _jsx("div", Object.assign({ className: "vuiPopoverTitle" }, { children: header })) : header, children && _jsx("div", Object.assign({ className: contentClasses }, { children: children }))] })) }))) })] }));
 };

package/lib/components/searchSelect/SearchSelect.js

@@ -44,13 +44,15 @@ export const VuiSearchSelect = ({ children, title, isOpen, setIsOpen, options, s
                 updatedSelectedOptions.splice(index, 1);
             }
             onSelect(updatedSelectedOptions);
-            return;
         }
-        // If the user can only select one option at a time,
-        // close the search select as soon as they make a choice.
-        onSelect([value]);
-        // Signal the popover to be closed.
-        setIsOpen(false);
+        else {
+            if (selectedOptions[0] === value) {
+                // If the user clicks on the selected option, deselect it.
+                onSelect([]);
+                return;
+            }
+            onSelect([value]);
+        }
     };
     // If onSearchChange is provided, we don't filter the options here because
     // we assume the consumer has already filtered them.

package/package.json

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