myoperator-mcp 0.2.376 → 0.2.377

package/dist/index.js

@@ -6861,6 +6861,18 @@ export interface MultiSelectProps extends VariantProps<
   searchable?: boolean;
   /** Search placeholder text */
   searchPlaceholder?: string;
+  /**
+   * Controlled search value. Pair with \`onSearchQueryChange\` when filtering
+   * happens server-side (e.g. alongside \`onScrollEnd\` pagination, where each
+   * page only has a slice of the full result set \u2014 client-side filtering
+   * would search just that slice and show false "No results found" states).
+   * When provided, the component stops managing its own search state and
+   * stops filtering \`options\` itself; the caller is expected to pass already
+   * filtered \`options\` for the current \`searchQuery\`.
+   */
+  searchQuery?: string;
+  /** Fires on every search input change. Required to pair with \`searchQuery\`. */
+  onSearchQueryChange?: (query: string) => void;
   /**
    * When set, the trigger shows a single compact summary (e.g. "3 lines
    * selected") instead of one chip per selection; hovering it reveals the full
@@ -6953,6 +6965,8 @@ const MultiSelect = React.forwardRef(
       options,
       searchable,
       searchPlaceholder = "Search...",
+      searchQuery: searchQueryProp,
+      onSearchQueryChange,
       selectAllLabel,
       summaryLabel,
       maxSelections,
@@ -6978,8 +6992,20 @@ const MultiSelect = React.forwardRef(
       React.useState<string[]>(defaultValue);
     // Dropdown open state
     const [isOpen, setIsOpen] = React.useState(false);
-    // Search query
-    const [searchQuery, setSearchQuery] = React.useState("");
+    // Search query \u2014 controlled when the caller passes \`searchQuery\` (server-side
+    // filtering), uncontrolled otherwise.
+    const [internalSearchQuery, setInternalSearchQuery] = React.useState("");
+    const isSearchControlled = searchQueryProp !== undefined;
+    const searchQuery = isSearchControlled ? searchQueryProp : internalSearchQuery;
+    const updateSearchQuery = React.useCallback(
+      (next: string) => {
+        if (!isSearchControlled) {
+          setInternalSearchQuery(next);
+        }
+        onSearchQueryChange?.(next);
+      },
+      [isSearchControlled, onSearchQueryChange]
+    );
 
     // \`detailed\` rows are a single-line design, so they truncate unless the
     // caller opts out; \`simple\` rows wrap the full label unless asked not to.
@@ -7257,8 +7283,11 @@ const MultiSelect = React.forwardRef(
     // Determine aria-describedby
     const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined;
 
-    // Filter options by search query
+    // Filter options by search query. Skipped when \`searchQuery\` is
+    // controlled \u2014 the caller owns filtering then (typically server-side, so
+    // \`options\` is already the filtered slice for the current query).
     const filteredOptions = React.useMemo(() => {
+      if (isSearchControlled) return flatOptions;
       if (!searchable || !searchQuery.trim()) return flatOptions;
       const q = searchQuery.toLowerCase();
       return flatOptions.filter((option) => {
@@ -7269,7 +7298,7 @@ const MultiSelect = React.forwardRef(
           (option.group?.toLowerCase().includes(q) ?? false)
         );
       });
-    }, [flatOptions, searchable, searchQuery]);
+    }, [flatOptions, searchable, searchQuery, isSearchControlled]);
 
     type DisplayItem =
       | { type: "option"; option: MultiSelectOption }
@@ -7387,7 +7416,7 @@ const MultiSelect = React.forwardRef(
           return;
         }
         setIsOpen(false);
-        setSearchQuery("");
+        updateSearchQuery("");
       };
 
       const timeoutId = window.setTimeout(() => {
@@ -7398,13 +7427,13 @@ const MultiSelect = React.forwardRef(
         window.clearTimeout(timeoutId);
         document.removeEventListener("mousedown", handleClickOutside);
       };
-    }, [isOpen, refs.floating]);
+    }, [isOpen, refs.floating, updateSearchQuery]);
 
     // Handle keyboard navigation
     const handleKeyDown = (e: React.KeyboardEvent) => {
       if (e.key === "Escape" && closeOnEscape) {
         setIsOpen(false);
-        setSearchQuery("");
+        updateSearchQuery("");
       } else if (e.key === "Enter" || e.key === " ") {
         if (!isOpen) {
           e.preventDefault();
@@ -7607,7 +7636,7 @@ const MultiSelect = React.forwardRef(
                     type="text"
                     placeholder={searchPlaceholder}
                     value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
+                    onChange={(e) => updateSearchQuery(e.target.value)}
                     className="w-full h-[42px] px-3 text-base text-semantic-text-primary border border-solid border-semantic-border-input rounded bg-semantic-bg-primary placeholder:text-semantic-text-placeholder focus:outline-none focus:border-semantic-border-input-focus/50"
                     onClick={(e) => e.stopPropagation()}
                   />
@@ -9580,11 +9609,32 @@ const SearchFilter = React.forwardRef<HTMLDivElement, SearchFilterProps>(
       [disabled]
     );
 
+    /**
+     * The pending focus frame has to be cancellable. Opening the menu schedules
+     * a frame that refocuses the input, and the input's \`onFocus\` reopens the
+     * menu. If that frame lands AFTER an option has been picked, it reopens the
+     * dropdown that \`selectOption\` just closed \u2014 so selecting an option looks
+     * like it does nothing. Whether the frame lands before or after the click is
+     * pure timing, which is why the bug comes and goes.
+     */
+    const focusFrameRef = React.useRef<number | null>(null);
+
+    const cancelPendingFocus = React.useCallback(() => {
+      if (focusFrameRef.current === null) return;
+      window.cancelAnimationFrame(focusFrameRef.current);
+      focusFrameRef.current = null;
+    }, []);
+
     const focusSearchInput = React.useCallback(() => {
-      window.requestAnimationFrame(() => {
+      cancelPendingFocus();
+      focusFrameRef.current = window.requestAnimationFrame(() => {
+        focusFrameRef.current = null;
         searchInputRef.current?.focus();
       });
-    }, []);
+    }, [cancelPendingFocus]);
+
+    // Never let a queued frame fire into an unmounted component.
+    React.useEffect(() => cancelPendingFocus, [cancelPendingFocus]);
 
     const setRootRef = React.useCallback(
       (node: HTMLDivElement | null) => {
@@ -9663,9 +9713,12 @@ const SearchFilter = React.forwardRef<HTMLDivElement, SearchFilterProps>(
         onValueChange?.(option.value);
         onOptionSelect?.(option);
         onSearchChange?.(option.label);
+        // Drop any queued refocus first, or it reopens what we are closing.
+        cancelPendingFocus();
         setOpen(false);
       },
       [
+        cancelPendingFocus,
         disabled,
         onSearchChange,
         onOptionSelect,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.376",
+  "version": "0.2.377",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",