@vectara/vectara-ui 9.10.1 → 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);
@@ -132,7 +133,7 @@ export const VuiSearchInput = (_a) => {
     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 }, { 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)), isClearable && value && (_jsx(VuiIconButton, { "aria-label": "Clear input", className: "vuiSearchInput__clearButton", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: (e) => {
+    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/_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;
@@ -40,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;
   }
 }

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;
@@ -3670,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;
 }
 

package/package.json

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