@vectara/vectara-ui 9.10.0 → 9.11.0

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

@@ -10,6 +10,7 @@ type Props = {
     autoFocus?: boolean;
     onSubmit?: FormEventHandler;
     suggestions?: SearchSuggestion[];
+    isLoading?: boolean;
 };
 type ClearableProps = {
     isClearable?: true;
@@ -18,5 +19,5 @@ type ClearableProps = {
     isClearable?: false;
     onClear?: never;
 };
-export declare const VuiSearchInput: ({ className, size, value, onChange, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, ...rest }: Props & ClearableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiSearchInput: ({ className, size, value, onChange, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading, ...rest }: Props & ClearableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/searchInput/SearchInput.js

@@ -13,13 +13,14 @@ 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 { BiSearch, BiX } from "react-icons/bi";
 import { VuiIcon } from "../icon/Icon";
 import { VuiSearchInputSuggestions } from "./SearchInputSuggestions";
 import { createId } from "../../utils/createId";
+import { VuiSpinner } from "../spinner/Spinner";
 const SIZE = ["m", "l"];
 export const VuiSearchInput = (_a) => {
-    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"]);
+    var { className, size = "m", value, onChange, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "placeholder", "autoFocus", "onSubmit", "isClearable", "onClear", "suggestions", "isLoading"]);
     const classes = classNames("vuiSearchInput", `vuiSearchInput--${size}`, className);
     const inputRef = useRef(null);
     const containerRef = useRef(null);
@@ -129,7 +130,10 @@ export const VuiSearchInput = (_a) => {
     }
     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) => {
+    const inputClasses = classNames("vuiSearchInput__input", {
+        "vuiSearchInput__input--hasSuggestions": hasSuggestions
+    });
+    return (_jsx("form", Object.assign({ onSubmit: onSubmit }, { children: _jsxs("div", Object.assign({ ref: containerRef, className: classes, "aria-live": "polite", "aria-atomic": "true", "aria-busy": isLoading ? "true" : "false" }, { children: [_jsx("input", Object.assign({ ref: inputRef, className: inputClasses, 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)), _jsx("div", Object.assign({ className: "vuiSearchInput__icon" }, { children: isLoading ? (_jsx(VuiSpinner, { size: size === "m" ? "s" : "m" })) : (_jsx(VuiIcon, Object.assign({ color: "subdued", size: size === "m" ? "s" : "m" }, { children: _jsx(BiSearch, {}) }))) })), 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.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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))) })) })));
+    return (_jsxs("div", Object.assign({ className: "vuiSearchInputSuggestionsContainer" }, { children: [_jsx("div", Object.assign({ className: "vuiSearchInputSuggestions" }, { children: _jsx("div", Object.assign({ id: id, className: "vuiSearchInputSuggestions__suggestionsList", role: "listbox" }, { 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))) })) })), _jsx("div", { className: "vuiSearchInputSuggestions__bottomSpacer" })] })));
 };

package/lib/components/searchInput/_index.scss

@@ -4,6 +4,12 @@
   align-items: center;
 }
 
+.vuiSearchInput__icon {
+  position: absolute;
+  left: $sizeM;
+  pointer-events: none;
+}
+
 .vuiSearchInput__input {
   flex-grow: 1;
   background-color: $colorEmptyShade;
@@ -22,6 +28,11 @@
   }
 }
 
+.vuiSearchInput__input--hasSuggestions {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .vuiSearchInput__submitButton {
   position: absolute;
   right: $sizeS;
@@ -35,15 +46,23 @@
 }
 
 .vuiSearchInput--m {
+  .vuiSearchInput__icon {
+    top: $sizeXs + 1px;
+  }
+
   .vuiSearchInput__input {
-    padding: $sizeXs $sizeM;
+    padding: $sizeXs $sizeM $sizeXs $sizeXl + $sizeXs;
     font-size: $fontSizeStandard;
   }
 }
 
 .vuiSearchInput--l {
+  .vuiSearchInput__icon {
+    top: $sizeS + 1px;
+  }
+
   .vuiSearchInput__input {
-    padding: $sizeS $sizeM;
+    padding: $sizeS $sizeM $sizeS $sizeXl + $sizeS;
     font-size: $fontSizeLarge;
   }
 }
@@ -61,32 +80,30 @@
     color: $colorAccent;
   }
 }
-
-.vuiSearchInputSuggestions {
+.vuiSearchInputSuggestionsContainer {
   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;
-  }
+  display: flex;
+  flex-direction: column;
 }
 
-.vuiSearchInputSuggestions__suggestionsList {
+.vuiSearchInputSuggestions {
+  // position: absolute;
+  // top: 100%;
+  // left: 0;
+  // right: 0;
+  overflow: hidden;
   background-color: $colorEmptyShade;
   border: 1px solid $colorMediumShade;
   border-top: none;
-  border-radius: 0 0 $sizeM $sizeM;
+  border-radius: 0 0 $sizeXs $sizeXs;
   box-shadow: $shadowLargeEnd;
+}
+
+.vuiSearchInputSuggestions__suggestionsList {
   max-height: 220px;
   overflow-y: auto;
 }
@@ -110,3 +127,10 @@
     outline: none;
   }
 }
+
+// If at the bottom of the window, add some space
+// so the user can comfortably see the complete suggestion list.
+.vuiSearchInputSuggestions__bottomSpacer {
+  height: $sizeXl;
+  pointer-events: none;
+}

package/lib/styles/index.css

@@ -3637,6 +3637,12 @@ h2.react-datepicker__current-month {
   align-items: center;
 }
 
+.vuiSearchInput__icon {
+  position: absolute;
+  left: 16px;
+  pointer-events: none;
+}
+
 .vuiSearchInput__input {
   flex-grow: 1;
   background-color: #ffffff;
@@ -3654,6 +3660,11 @@ h2.react-datepicker__current-month {
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 }
 
+.vuiSearchInput__input--hasSuggestions {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .vuiSearchInput__submitButton {
   position: absolute;
   right: 12px;
@@ -3665,13 +3676,19 @@ h2.react-datepicker__current-month {
   color: #5f30c3;
 }
 
+.vuiSearchInput--m .vuiSearchInput__icon {
+  top: 9px;
+}
 .vuiSearchInput--m .vuiSearchInput__input {
-  padding: 8px 16px;
+  padding: 8px 16px 8px 40px;
   font-size: 14px;
 }
 
+.vuiSearchInput--l .vuiSearchInput__icon {
+  top: 13px;
+}
 .vuiSearchInput--l .vuiSearchInput__input {
-  padding: 12px 16px;
+  padding: 12px 16px 12px 44px;
   font-size: 18px;
 }
 
@@ -3688,28 +3705,26 @@ h2.react-datepicker__current-month {
   color: #5f30c3;
 }
 
-.vuiSearchInputSuggestions {
+.vuiSearchInputSuggestionsContainer {
   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;
+  display: flex;
+  flex-direction: column;
 }
 
-.vuiSearchInputSuggestions__suggestionsList {
+.vuiSearchInputSuggestions {
+  overflow: hidden;
   background-color: #ffffff;
   border: 1px solid #cbd1de;
   border-top: none;
-  border-radius: 0 0 16px 16px;
+  border-radius: 0 0 8px 8px;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+}
+
+.vuiSearchInputSuggestions__suggestionsList {
   max-height: 220px;
   overflow-y: auto;
 }
@@ -3731,6 +3746,11 @@ h2.react-datepicker__current-month {
   outline: none;
 }
 
+.vuiSearchInputSuggestions__bottomSpacer {
+  height: 32px;
+  pointer-events: none;
+}
+
 .vuiSearchResult {
   position: relative;
 }

package/package.json

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