@vectara/vectara-ui 9.9.0 → 9.10.0

package/lib/components/index.d.ts

@@ -58,6 +58,7 @@ import { PROGRESS_BAR_COLOR, VuiProgressBar } from "./progressBar/ProgressBar";
 import { VuiPrompt } from "./prompt/Prompt";
 import { VuiScreenBlock } from "./screenBlock/ScreenBlock";
 import { VuiSearchInput } from "./searchInput/SearchInput";
+import { SearchSuggestion } from "./searchInput/types";
 import { SearchResult, VuiSearchResult } from "./searchResult/SearchResult";
 import { VuiSearchSelect } from "./searchSelect/SearchSelect";
 import { VuiSetting } from "./setting/Setting";
@@ -84,5 +85,5 @@ import { VuiToggle } from "./toggle/Toggle";
 import { VuiTooltip } from "./tooltip/Tooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
-export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CodeLanguage, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
+export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CodeLanguage, 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, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiHorizontalRule, VuiIcon, VuiInfoList, 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, VuiSpacer, VuiSpinner, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/searchInput/SearchInput.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, FormEventHandler } from "react";
+import { SearchSuggestion } from "./types";
 declare const SIZE: readonly ["m", "l"];
 type Props = {
     className?: string;
@@ -8,6 +9,7 @@ type Props = {
     placeholder?: string;
     autoFocus?: boolean;
     onSubmit?: FormEventHandler;
+    suggestions?: SearchSuggestion[];
 };
 type ClearableProps = {
     isClearable?: true;
@@ -16,5 +18,5 @@ type ClearableProps = {
     isClearable?: false;
     onClear?: never;
 };
-export declare const VuiSearchInput: ({ className, size, value, onChange, placeholder, autoFocus, onSubmit, isClearable, onClear, ...rest }: Props & ClearableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiSearchInput: ({ className, size, value, onChange, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, ...rest }: Props & ClearableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/searchInput/SearchInput.js

@@ -10,16 +10,127 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useMemo } from "react";
 import classNames from "classnames";
 import { VuiIconButton } from "../button/IconButton";
 import { BiX } from "react-icons/bi";
 import { VuiIcon } from "../icon/Icon";
+import { VuiSearchInputSuggestions } from "./SearchInputSuggestions";
+import { createId } from "../../utils/createId";
 const SIZE = ["m", "l"];
 export const VuiSearchInput = (_a) => {
-    var { className, size = "m", value, onChange, placeholder, autoFocus, onSubmit, isClearable, onClear } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "placeholder", "autoFocus", "onSubmit", "isClearable", "onClear"]);
+    var { className, size = "m", value, onChange, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "placeholder", "autoFocus", "onSubmit", "isClearable", "onClear", "suggestions"]);
     const classes = classNames("vuiSearchInput", `vuiSearchInput--${size}`, className);
-    return (_jsx("form", Object.assign({ onSubmit: onSubmit }, { children: _jsxs("div", Object.assign({ className: classes }, { children: [_jsx("input", Object.assign({ className: "vuiSearchInput__input", type: "text", autoComplete: "off", autoCapitalize: "off", spellCheck: "false", autoFocus: autoFocus, placeholder: placeholder, value: value, onChange: onChange }, rest)), isClearable && value && (_jsx(VuiIconButton, { "aria-label": "Clear input", className: "vuiSearchInput__clearButton", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: (e) => {
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const [areSuggestionsVisible, setAreSuggestionsVisible] = useState(true);
+    const suggestionRefs = useRef([]);
+    const suppressNextFocus = useRef(false);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setAreSuggestionsVisible(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    const handleInputFocus = () => {
+        // Don't show suggestions if focus was triggered by Escape key
+        if (suppressNextFocus.current) {
+            suppressNextFocus.current = false;
+            return;
+        }
+        // Show suggestions when input receives focus (if suggestions exist).
+        if (suggestions && suggestions.length > 0) {
+            setAreSuggestionsVisible(true);
+        }
+    };
+    const handleInputKeyDown = (e) => {
+        var _a, _b;
+        switch (e.key) {
+            case "ArrowDown": {
+                e.preventDefault();
+                // Show suggestions if hidden, or move to first suggestion.
+                if (suggestions && suggestions.length > 0) {
+                    if (!areSuggestionsVisible) {
+                        setAreSuggestionsVisible(true);
+                    }
+                    else {
+                        (_a = suggestionRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                }
+                break;
+            }
+            case "Escape": {
+                e.preventDefault();
+                setAreSuggestionsVisible(false);
+                suppressNextFocus.current = true;
+                (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            }
+            case "Tab": {
+                // Hide suggestions and allow default tab behavior.
+                setAreSuggestionsVisible(false);
+                break;
+            }
+        }
+    };
+    const handleSuggestionKeyDown = (e, index) => {
+        var _a, _b, _c, _d, _e;
+        switch (e.key) {
+            case "ArrowDown": {
+                e.preventDefault();
+                // Move to next suggestion, or wrap to first.
+                const nextIndex = index + 1;
+                if (nextIndex < suggestionRefs.current.length) {
+                    (_a = suggestionRefs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                else {
+                    (_b = suggestionRefs.current[0]) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                break;
+            }
+            case "ArrowUp": {
+                e.preventDefault();
+                if (index === 0) {
+                    // Move back to input.
+                    (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                }
+                else {
+                    // Move to previous suggestion.
+                    (_d = suggestionRefs.current[index - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+                }
+                break;
+            }
+            case "Escape": {
+                e.preventDefault();
+                setAreSuggestionsVisible(false);
+                suppressNextFocus.current = true;
+                (_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+                break;
+            }
+            case "Tab": {
+                // Hide suggestions and allow default tab behavior.
+                setAreSuggestionsVisible(false);
+                break;
+            }
+        }
+    };
+    // Reset suggestions visibility when suggestions change
+    const prevSuggestionsRef = useRef(suggestions);
+    if (prevSuggestionsRef.current !== suggestions) {
+        prevSuggestionsRef.current = suggestions;
+        if (suggestions && suggestions.length > 0) {
+            setAreSuggestionsVisible(true);
+        }
+    }
+    const hasSuggestions = suggestions && suggestions.length > 0 && areSuggestionsVisible;
+    const controlsId = useMemo(() => `searchSuggestions-${createId()}`, []);
+    return (_jsx("form", Object.assign({ onSubmit: onSubmit }, { children: _jsxs("div", Object.assign({ ref: containerRef, className: classes }, { children: [_jsx("input", Object.assign({ ref: inputRef, className: "vuiSearchInput__input", type: "text", autoComplete: "off", autoCapitalize: "off", spellCheck: "false", autoFocus: autoFocus, placeholder: placeholder, value: value, onChange: onChange, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, "aria-autocomplete": "list", "aria-controls": hasSuggestions ? controlsId : undefined }, rest)), isClearable && value && (_jsx(VuiIconButton, { "aria-label": "Clear input", className: "vuiSearchInput__clearButton", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: (e) => {
                         e.preventDefault();
                         onClear();
-                    } }))] })) })));
+                    } })), hasSuggestions && (_jsx(VuiSearchInputSuggestions, { id: controlsId, suggestions: suggestions, onSuggestionKeyDown: handleSuggestionKeyDown, suggestionRefs: suggestionRefs }))] })) })));
 };

package/lib/components/searchInput/SearchInputSuggestions.d.ts

@@ -0,0 +1,10 @@
+import { KeyboardEvent, MutableRefObject } from "react";
+import { SearchSuggestion } from "./types";
+type Props = {
+    id: string;
+    suggestions: SearchSuggestion[];
+    onSuggestionKeyDown: (e: KeyboardEvent<HTMLAnchorElement>, index: number) => void;
+    suggestionRefs: MutableRefObject<(HTMLAnchorElement | null)[]>;
+};
+export declare const VuiSearchInputSuggestions: ({ id, suggestions, onSuggestionKeyDown, suggestionRefs }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/searchInput/SearchInputSuggestions.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const VuiSearchInputSuggestions = ({ id, suggestions, onSuggestionKeyDown, suggestionRefs }) => {
+    return (_jsx("div", Object.assign({ id: id, className: "vuiSearchInputSuggestions", role: "listbox" }, { children: _jsx("div", Object.assign({ className: "vuiSearchInputSuggestions__suggestionsList" }, { children: suggestions.map((suggestion, index) => (_jsx("a", Object.assign({ href: suggestion.href, className: "vuiSearchInputSuggestions__suggestion", ref: (el) => (suggestionRefs.current[index] = el), onKeyDown: (e) => onSuggestionKeyDown(e, index), role: "option", "aria-selected": "false" }, { children: suggestion.label }), index))) })) })));
+};

package/lib/components/searchInput/_index.scss

@@ -61,3 +61,52 @@
     color: $colorAccent;
   }
 }
+
+.vuiSearchInputSuggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1;
+
+  // If this is at the bottom of the page we need to add some space
+  // at the bottom so the user can see the menu completely.
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: $sizeXl;
+    pointer-events: none;
+  }
+}
+
+.vuiSearchInputSuggestions__suggestionsList {
+  background-color: $colorEmptyShade;
+  border: 1px solid $colorMediumShade;
+  border-top: none;
+  border-radius: 0 0 $sizeM $sizeM;
+  box-shadow: $shadowLargeEnd;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.vuiSearchInputSuggestions__suggestion {
+  display: block;
+  background-color: $colorEmptyShade;
+  text-decoration: none;
+  padding: ($sizeXxs + 1px) $sizeS;
+  font-size: $fontSizeStandard;
+  color: $colorText;
+
+  &:focus-visible,
+  &:hover {
+    text-decoration: underline;
+    color: $colorPrimary;
+    background-color: $colorPrimaryLighterShade;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}

package/lib/components/searchInput/types.d.ts

@@ -0,0 +1,4 @@
+export type SearchSuggestion = {
+    label: string;
+    href: string;
+};

package/lib/components/searchInput/types.js

@@ -0,0 +1 @@
+export {};

package/lib/styles/index.css

@@ -3688,6 +3688,49 @@ h2.react-datepicker__current-month {
   color: #5f30c3;
 }
 
+.vuiSearchInputSuggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.vuiSearchInputSuggestions:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 32px;
+  pointer-events: none;
+}
+
+.vuiSearchInputSuggestions__suggestionsList {
+  background-color: #ffffff;
+  border: 1px solid #cbd1de;
+  border-top: none;
+  border-radius: 0 0 16px 16px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.vuiSearchInputSuggestions__suggestion {
+  display: block;
+  background-color: #ffffff;
+  text-decoration: none;
+  padding: 5px 12px;
+  font-size: 14px;
+  color: #1c1d22;
+}
+.vuiSearchInputSuggestions__suggestion:focus-visible, .vuiSearchInputSuggestions__suggestion:hover {
+  text-decoration: underline;
+  color: #045dda;
+  background-color: #f1f7ff;
+}
+.vuiSearchInputSuggestions__suggestion:focus-visible {
+  outline: none;
+}
+
 .vuiSearchResult {
   position: relative;
 }

package/package.json

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