myoperator-mcp 0.2.375 → 0.2.377

package/dist/index.js

@@ -6780,6 +6780,14 @@ const MENU_MIN_HEIGHT = 120;
  */
 const SCROLL_END_THRESHOLD_PX = 48;
 
+/**
+ * How long to wait after a page lands before re-measuring the list. React has
+ * committed the new rows by the time the effect runs, but the browser has not
+ * necessarily laid them out, so \`scrollHeight\` can still read the pre-growth
+ * value. One frame is usually enough; 50ms is a cheap margin.
+ */
+const POST_FETCH_MEASURE_DELAY_MS = 50;
+
 /**
  * MultiSelect trigger variants matching TextField styling
  */
@@ -6853,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
@@ -6945,6 +6965,8 @@ const MultiSelect = React.forwardRef(
       options,
       searchable,
       searchPlaceholder = "Search...",
+      searchQuery: searchQueryProp,
+      onSearchQueryChange,
       selectAllLabel,
       summaryLabel,
       maxSelections,
@@ -6970,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.
@@ -7091,11 +7125,32 @@ const MultiSelect = React.forwardRef(
     const listRef = React.useRef<HTMLDivElement | null>(null);
     /**
      * True once \`onScrollEnd\` has fired for the current visit to the bottom.
-     * Cleared only when the user scrolls back out of the threshold zone, so
-     * trackpad inertia \u2014 which keeps firing \`scroll\` for hundreds of ms after
-     * the finger lifts \u2014 cannot re-trigger the callback.
+     * Cleared when the user scrolls back out of the threshold zone, or when a
+     * landed page pushes the bottom back out of reach, so trackpad inertia \u2014
+     * which keeps firing \`scroll\` for hundreds of ms after the finger lifts \u2014
+     * cannot re-trigger the callback.
      */
     const isLatchedRef = React.useRef(false);
+    /** Previous \`loadingMore\`, so the re-measure knows a page just landed. */
+    const wasLoadingMoreRef = React.useRef(false);
+    /** Pending \`requestAnimationFrame\` id for the coalesced scroll handler. */
+    const scrollFrameRef = React.useRef<number | null>(null);
+    /**
+     * \`onScrollEnd\` read from a timer rather than from the closure, so an
+     * inline arrow from the consumer cannot restart the post-fetch timer on
+     * every render.
+     */
+    const onScrollEndRef = React.useRef(onScrollEnd);
+    React.useEffect(() => {
+      onScrollEndRef.current = onScrollEnd;
+    }, [onScrollEnd]);
+
+    /** Distance in px from the current scroll position to the list bottom. */
+    const distanceToBottom = () => {
+      const node = listRef.current;
+      if (!node) return null;
+      return node.scrollHeight - node.scrollTop - node.clientHeight;
+    };
 
     /**
      * Deliberately a plain function, not a \`useCallback\` \u2014 it must read the
@@ -7103,14 +7158,10 @@ const MultiSelect = React.forwardRef(
      * handler would need a props ref (writing refs during render is banned).
      */
     const maybeLoadMore = () => {
-      const node = listRef.current;
-      if (!node) return;
+      const distance = distanceToBottom();
+      if (distance === null) return;
 
-      const isNearBottom =
-        node.scrollHeight - node.scrollTop - node.clientHeight <
-        SCROLL_END_THRESHOLD_PX;
-
-      if (!isNearBottom) {
+      if (distance >= SCROLL_END_THRESHOLD_PX) {
         // Only an explicit scroll away from the boundary re-arms the latch.
         isLatchedRef.current = false;
         return;
@@ -7122,25 +7173,71 @@ const MultiSelect = React.forwardRef(
       onScrollEnd();
     };
 
+    /**
+     * \`scroll\` fires far more often than the browser paints, so a fast flick
+     * delivers a burst of events whose geometry is mid-flight. Coalescing to
+     * one \`requestAnimationFrame\` per burst measures once per frame, after
+     * layout has settled, and still sees the final resting position.
+     */
+    const handleListScroll = () => {
+      if (scrollFrameRef.current !== null) return;
+      scrollFrameRef.current = requestAnimationFrame(() => {
+        scrollFrameRef.current = null;
+        maybeLoadMore();
+      });
+    };
+
     // A closed menu or a new search starts from a clean latch.
     React.useEffect(() => {
       isLatchedRef.current = false;
     }, [isOpen, searchQuery]);
 
+    React.useEffect(
+      () => () => {
+        if (scrollFrameRef.current !== null) {
+          cancelAnimationFrame(scrollFrameRef.current);
+        }
+      },
+      []
+    );
+
     /**
-     * A page can arrive without making the list taller than its max-height
-     * (few results, or a short viewport). No further \`scroll\` event would ever
-     * fire, so pagination would stall silently \u2014 re-check whenever the rendered
-     * options or the fetch state change.
+     * Re-measure once a page has landed. Content growth emits no \`scroll\`
+     * event, so without this the latch set on the way down would never clear
+     * and pagination would stall permanently after a fast flick to the bottom.
+     * It also covers the case where the page does not make the list taller
+     * than its max-height (few results, or a short viewport), where no further
+     * \`scroll\` event would ever fire either.
+     *
+     * The latch is cleared only once the bottom is genuinely out of reach \u2014
+     * while the user is still pinned at distance ~0, it stays armed and the
+     * next page is chained explicitly, so inertia cannot fan out into
+     * duplicate requests.
      */
     React.useEffect(() => {
-      if (!isOpen || !hasMore || loadingMore) return;
-      const node = listRef.current;
-      if (!node || node.scrollHeight > node.clientHeight) return;
-      if (isLatchedRef.current) return;
-      isLatchedRef.current = true;
-      onScrollEnd?.();
-    }, [isOpen, portalTarget, hasMore, loadingMore, options, onScrollEnd]);
+      const pageJustLanded = wasLoadingMoreRef.current && !loadingMore;
+      wasLoadingMoreRef.current = loadingMore;
+      if (!isOpen || loadingMore) return;
+
+      const timeoutId = window.setTimeout(() => {
+        const distance = distanceToBottom();
+        if (distance === null) return;
+
+        if (distance >= SCROLL_END_THRESHOLD_PX) {
+          isLatchedRef.current = false;
+          return;
+        }
+        if (!hasMore || !onScrollEndRef.current) return;
+        // Still latched and nothing landed: the scroll handler's request is
+        // in flight (or the consumer never set \`loadingMore\`) \u2014 don't refire.
+        if (isLatchedRef.current && !pageJustLanded) return;
+
+        isLatchedRef.current = true;
+        onScrollEndRef.current();
+      }, POST_FETCH_MEASURE_DELAY_MS);
+
+      return () => window.clearTimeout(timeoutId);
+    }, [isOpen, portalTarget, hasMore, loadingMore, options.length]);
 
     const flatOptions = React.useMemo(
       () => flattenMultiSelectOptions(options),
@@ -7186,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) => {
@@ -7198,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 }
@@ -7316,7 +7416,7 @@ const MultiSelect = React.forwardRef(
           return;
         }
         setIsOpen(false);
-        setSearchQuery("");
+        updateSearchQuery("");
       };
 
       const timeoutId = window.setTimeout(() => {
@@ -7327,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();
@@ -7536,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()}
                   />
@@ -7572,7 +7672,7 @@ const MultiSelect = React.forwardRef(
               {/* Options */}
               <div
                 ref={listRef}
-                onScroll={maybeLoadMore}
+                onScroll={handleListScroll}
                 className="overflow-auto overscroll-contain p-1"
                 style={{
                   maxHeight:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.375",
+  "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",