@vention/machine-ui 5.18.0 → 5.18.2

package/index.esm.js

@@ -12605,6 +12605,7 @@ function getMatchingTagOptions(availableOptions, query, createOption) {
 const VentionTagsInput = ({
   value,
   onChange,
+  onQueryChange,
   suggestions: _suggestions = EMPTY_TAGS,
   label,
   placeholder: _placeholder = "Type or select tags",
@@ -12620,6 +12621,7 @@ const VentionTagsInput = ({
   inputDataTestId
 }) => {
   const [inputValue, setInputValue] = useState("");
+  const reportedQuery = useRef("");
   const theme = useTheme();
   const {
     classes
@@ -12630,39 +12632,43 @@ const VentionTagsInput = ({
   const options = useMemo(() => collectNormalizedTags(selectedTags, collectNormalizedTags(_suggestions, [])), [selectedTags, _suggestions]);
   const query = normalizeTag(inputValue);
   const createOption = query.length > 0 && !options.includes(query) ? query : null;
+  function updateInputValue(nextInputValue) {
+    setInputValue(nextInputValue);
+    const nextQuery = normalizeTag(nextInputValue);
+    if (nextQuery !== reportedQuery.current) {
+      reportedQuery.current = nextQuery;
+      onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange(nextQuery);
+    }
+  }
   function filterTagOptions(availableOptions) {
     return getMatchingTagOptions(availableOptions, query, createOption);
   }
   function groupOptionsBySuggestionsTitle() {
     return _suggestionsTitle;
   }
-  function handleChange(_event, newValue) {
+  function handleChange(_event, newValue, reason) {
     const nextTags = collectNormalizedTags(newValue, []);
     onChange(nextTags);
-    if (nextTags[nextTags.length - 1] === createOption) {
-      setInputValue("");
+    if (reason === "clear" || nextTags[nextTags.length - 1] === createOption) {
+      updateInputValue("");
     }
   }
   function handleBlur() {
-    setInputValue("");
+    updateInputValue("");
   }
   function handleInputChange(_event, newInputValue, reason) {
-    if (reason === "clear") {
-      setInputValue("");
-      return;
-    }
     if (reason !== "input") {
       return;
     }
     if (!newInputValue.includes(",")) {
-      setInputValue(toDisplayedInputValue(newInputValue));
+      updateInputValue(toDisplayedInputValue(newInputValue));
       return;
     }
     const committed = splitTagsAtLastComma(newInputValue, selectedTags);
-    setInputValue(committed.inputValue);
     if (committed.tags.length > selectedTags.length) {
       onChange(committed.tags);
     }
+    updateInputValue(committed.inputValue);
   }
   function renderTagPills(tags, getTagProps) {
     const pills = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "5.18.0",
+  "version": "5.18.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/lib/components/vention-tags-input/vention-tags-input.d.ts

@@ -3,7 +3,8 @@ export type { VentionTagsInputSizes };
 export interface VentionTagsInputProps {
     value: string[];
     onChange: (tags: string[]) => void;
-    suggestions?: string[];
+    onQueryChange?: (query: string) => void;
+    suggestions?: readonly string[];
     label?: string;
     placeholder?: string;
     suggestionsTitle?: string;
@@ -17,4 +18,4 @@ export interface VentionTagsInputProps {
     className?: string;
     inputDataTestId?: string;
 }
-export declare const VentionTagsInput: ({ value, onChange, suggestions, label, placeholder, suggestionsTitle, createOptionLabel, noOptionsMessage, removeTagLabel, disabled, size, autoFocus, maxVisibleOptions, className, inputDataTestId, }: VentionTagsInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VentionTagsInput: ({ value, onChange, onQueryChange, suggestions, label, placeholder, suggestionsTitle, createOptionLabel, noOptionsMessage, removeTagLabel, disabled, size, autoFocus, maxVisibleOptions, className, inputDataTestId, }: VentionTagsInputProps) => import("react/jsx-runtime").JSX.Element;