@vectara/vectara-ui 9.10.1 → 9.11.1

package/lib/components/button/BaseButton.d.ts

@@ -26,5 +26,5 @@ export type BaseButtonProps = {
     isLoading?: boolean;
 };
 export declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & {
-    spinnerColor?: "accent" | "primary" | "success" | "warning" | "danger" | "empty" | "dark" | undefined;
+    spinnerColor?: "accent" | "primary" | "success" | "warning" | "danger" | "subdued" | "empty" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLButtonElement | null>>;

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/components/spinner/Spinner.js

@@ -9,7 +9,7 @@ const sizeToClassNameMap = {
     xxl: "vuiSpinner--xxl",
     xxxl: "vuiSpinner--xxxl"
 };
-export const VuiSpinner = ({ color = "accent", size = "m" }) => {
+export const VuiSpinner = ({ color = "subdued", size = "m" }) => {
     const classes = classNames("vuiSpinner", sizeToClassNameMap[size], `vuiSpinner--${color}`);
     return (_jsx("span", Object.assign({ className: classes }, { children: _jsx("svg", Object.assign({ version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 50 50" }, { children: _jsx("path", Object.assign({ fill: "#000", d: "M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" }, { children: _jsx("animateTransform", { attributeType: "xml", attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "0.6s", repeatCount: "indefinite" }) })) })) })));
 };

package/lib/components/spinner/_index.scss

@@ -26,6 +26,9 @@ $color: (
   ),
   dark: (
     "color": $colorDarkerShade
+  ),
+  subdued: (
+    "color": $colorSubdued
   )
 );
 

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

@@ -1,3 +1,3 @@
-export declare const SPINNER_COLOR: readonly ["accent", "primary", "success", "danger", "warning", "empty", "dark"];
+export declare const SPINNER_COLOR: readonly ["accent", "primary", "success", "danger", "warning", "empty", "dark", "subdued"];
 export declare const SPINNER_SIZE: readonly ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];
 export type SpinnerColor = (typeof SPINNER_COLOR)[number];

package/lib/components/spinner/types.js

@@ -1,2 +1,2 @@
-export const SPINNER_COLOR = ["accent", "primary", "success", "danger", "warning", "empty", "dark"];
+export const SPINNER_COLOR = ["accent", "primary", "success", "danger", "warning", "empty", "dark", "subdued"];
 export const SPINNER_SIZE = ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];

package/lib/sassUtils/_colors.scss

@@ -21,6 +21,7 @@ $colorDangerLighterShade: #fff1f1 !default;
 
 // Special colors
 $colorPrimaryHighlight: #d9e2ff !default;
+$colorSubdued: #6d7686;
 
 // Neutral colors
 $colorEmptyShade: #ffffff !default;

package/lib/sassUtils/_typography.scss

@@ -9,7 +9,7 @@ $fontSizeXxLarge: 30px;
 $fontSizeXxxLarge: 40px;
 
 $colorText: $colorDarkerShade;
-$colorSubdued: #6d7686;
+$colorSubdued: $colorSubdued;
 
 $fontWeightLight: 300;
 $fontWeightNormal: 400;

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;
 }
 
@@ -3861,6 +3873,11 @@ h2.react-datepicker__current-month {
   fill: #1c1d22;
 }
 
+.vuiSpinner--subdued svg path,
+.vuiSpinner--subdued svg rect {
+  fill: #6d7686;
+}
+
 .vuiSpinner--xs {
   width: 14px;
   height: 14px;

package/package.json

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