@vectara/vectara-ui 15.0.1 → 15.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeEventHandler, FormEventHandler } from "react";
|
|
1
|
+
import { ChangeEventHandler, FormEventHandler, KeyboardEventHandler } from "react";
|
|
2
2
|
import { SearchSuggestion } from "./types";
|
|
3
3
|
declare const SIZE: readonly ["m", "l"];
|
|
4
4
|
type Props = {
|
|
@@ -6,6 +6,7 @@ type Props = {
|
|
|
6
6
|
value?: string;
|
|
7
7
|
size?: (typeof SIZE)[number];
|
|
8
8
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
9
|
+
onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
|
|
9
10
|
placeholder?: string;
|
|
10
11
|
autoFocus?: boolean;
|
|
11
12
|
onSubmit?: FormEventHandler;
|
|
@@ -19,5 +20,5 @@ type ClearableProps = {
|
|
|
19
20
|
isClearable?: false;
|
|
20
21
|
onClear?: never;
|
|
21
22
|
};
|
|
22
|
-
export declare const VuiSearchInput: ({ className, size, value, onChange, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading, ...rest }: Props & ClearableProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare const VuiSearchInput: ({ className, size, value, onChange, onKeyDown, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading, ...rest }: Props & ClearableProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
24
|
export {};
|
|
@@ -20,7 +20,7 @@ import { createId } from "../../utils/createId";
|
|
|
20
20
|
import { VuiSpinner } from "../spinner/Spinner";
|
|
21
21
|
const SIZE = ["m", "l"];
|
|
22
22
|
export const VuiSearchInput = (_a) => {
|
|
23
|
-
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"]);
|
|
23
|
+
var { className, size = "m", value, onChange, onKeyDown, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "onKeyDown", "placeholder", "autoFocus", "onSubmit", "isClearable", "onClear", "suggestions", "isLoading"]);
|
|
24
24
|
const classes = classNames("vuiSearchInput", `vuiSearchInput--${size}`, className);
|
|
25
25
|
const inputRef = useRef(null);
|
|
26
26
|
const containerRef = useRef(null);
|
|
@@ -139,7 +139,10 @@ export const VuiSearchInput = (_a) => {
|
|
|
139
139
|
const inputClasses = classNames("vuiSearchInput__input", {
|
|
140
140
|
"vuiSearchInput__input--hasSuggestions": hasSuggestions
|
|
141
141
|
});
|
|
142
|
-
return (_jsx("form", Object.assign({ onSubmit: onSubmit, role: "search" }, { 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:
|
|
142
|
+
return (_jsx("form", Object.assign({ onSubmit: onSubmit, role: "search" }, { 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: (e) => {
|
|
143
|
+
handleInputKeyDown(e);
|
|
144
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
|
|
145
|
+
}, "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) => {
|
|
143
146
|
e.preventDefault();
|
|
144
147
|
onClear();
|
|
145
148
|
} })), hasSuggestions && (_jsx(VuiSearchInputSuggestions, { id: controlsId, suggestions: suggestions, onSuggestionKeyDown: handleSuggestionKeyDown, suggestionRefs: suggestionRefs }))] })) })));
|