myoperator-mcp 0.2.294 → 0.2.296

package/dist/index.js

@@ -5593,6 +5593,22 @@ export interface SelectFieldProps {
   searchable?: boolean;
   /** Search placeholder text */
   searchPlaceholder?: string;
+  /**
+   * Controlled search value. When provided, internal search state is
+   * ignored and the consumer owns the value \u2014 typically used to drive
+   * server-side filtering against a paginated API. The client-side
+   * \`option.label\` filter is also skipped, since the consumer is expected
+   * to have already filtered the options upstream.
+   *
+   * Pair with \`onSearchChange\`. Leave both undefined for the default
+   * uncontrolled, client-side filtering behavior.
+   */
+  searchValue?: string;
+  /**
+   * Fires on every keystroke in the search input. Also fires with \`""\`
+   * when the dropdown closes (so consumers can reset their query state).
+   */
+  onSearchChange?: (value: string) => void;
   /** Additional class for wrapper */
   wrapperClassName?: string;
   /** Additional class for trigger */
@@ -5691,6 +5707,8 @@ const SelectField = React.forwardRef(
       options,
       searchable,
       searchPlaceholder = "Search...",
+      searchValue,
+      onSearchChange,
       wrapperClassName,
       triggerClassName,
       labelClassName,
@@ -5702,8 +5720,11 @@ const SelectField = React.forwardRef(
     }: SelectFieldProps,
     ref: React.Ref<HTMLButtonElement>
   ) => {
-    // Internal state for search
+    // Internal state for uncontrolled mode. When \`searchValue\` is provided,
+    // the consumer owns the value and this state is unused.
     const [searchQuery, setSearchQuery] = React.useState("");
+    const isSearchControlled = searchValue !== undefined;
+    const effectiveSearchQuery = isSearchControlled ? searchValue : searchQuery;
 
     // Combined value change handler that also fires onSelect with full option object.
     // When interceptValue returns false, onValueChange is skipped (only onSelect fires).
@@ -5756,11 +5777,16 @@ const SelectField = React.forwardRef(
       const ungrouped: SelectOption[] = [];
 
       options.forEach((option) => {
-        // Filter by search query if searchable
-        if (searchable && searchQuery) {
-          if (!option.label.toLowerCase().includes(searchQuery.toLowerCase())) {
-            return;
-          }
+        // Client-side filter only in uncontrolled mode. In controlled mode
+        // the consumer has already filtered server-side; re-filtering here
+        // would mask items their API returned.
+        if (
+          searchable &&
+          !isSearchControlled &&
+          searchQuery &&
+          !option.label.toLowerCase().includes(searchQuery.toLowerCase())
+        ) {
+          return;
         }
 
         if (option.group) {
@@ -5774,7 +5800,7 @@ const SelectField = React.forwardRef(
       });
 
       return { groups, ungrouped };
-    }, [options, searchable, searchQuery]);
+    }, [options, searchable, isSearchControlled, searchQuery]);
 
     const hasGroups = Object.keys(groupedOptions.groups).length > 0;
 
@@ -5789,13 +5815,23 @@ const SelectField = React.forwardRef(
 
     // Handle search input change
     const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      setSearchQuery(e.target.value);
+      const next = e.target.value;
+      if (!isSearchControlled) {
+        setSearchQuery(next);
+      }
+      onSearchChange?.(next);
     };
 
-    // Reset search when dropdown closes
+    // Reset search when dropdown closes. In controlled mode we notify the
+    // consumer so they can reset their state; in uncontrolled mode we clear
+    // our own state directly.
     const handleOpenChange = (open: boolean) => {
       if (!open) {
-        setSearchQuery("");
+        if (isSearchControlled) {
+          onSearchChange?.("");
+        } else {
+          setSearchQuery("");
+        }
       }
     };
 
@@ -5849,7 +5885,7 @@ const SelectField = React.forwardRef(
                 <input
                   type="text"
                   placeholder={searchPlaceholder}
-                  value={searchQuery}
+                  value={effectiveSearchQuery}
                   onChange={handleSearchChange}
                   className="w-full h-8 text-sm bg-transparent placeholder:text-semantic-text-muted focus:outline-none"
                   // Prevent closing dropdown when clicking input
@@ -5893,7 +5929,7 @@ const SelectField = React.forwardRef(
 
             {/* No results message */}
             {searchable &&
-              searchQuery &&
+              effectiveSearchQuery &&
               groupedOptions.ungrouped.length === 0 &&
               Object.keys(groupedOptions.groups).length === 0 && (
                 <div className="py-6 text-center text-sm text-semantic-text-muted">
@@ -6085,12 +6121,23 @@ export type SelectContentProps = React.ComponentPropsWithoutRef<
   typeof SelectPrimitive.Content
 > & {
   /**
-   * Fires on the scrollable list viewport when scrolling completes (\`scrollend\`).
-   * Use with paginated option lists (e.g. load the next page when the user reaches the bottom).
+   * Fires on the scrollable list viewport when the user reaches the bottom.
+   * React 18 has no synthetic event for \`scrollend\`, so the listener is
+   * attached imperatively to the viewport DOM node. On browsers that
+   * support the native \`scrollend\` event (Chrome/Edge 114+, Firefox 109+,
+   * Safari 17.4+) we use it directly; on older Safari we fall back to a
+   * debounced \`scroll\` listener with a 24px bottom threshold.
+   *
+   * The handler receives a native Event typed as React.UIEvent for
+   * back-compat \u2014 \`event.currentTarget\` is the viewport div, so consumers
+   * can still read scrollTop/scrollHeight/clientHeight from it.
    */
   onViewportScrollEnd?: (event: React.UIEvent<HTMLDivElement>) => void;
 };
 
+const BOTTOM_THRESHOLD_PX = 24;
+const SCROLL_DEBOUNCE_MS = 150;
+
 const SelectContent = React.forwardRef(
   (
     {
@@ -6104,6 +6151,55 @@ const SelectContent = React.forwardRef(
   ) => {
     useUnlockBodyScroll();
 
+    // Use a state-backed ref so the effect re-runs when the viewport mounts.
+    // The viewport lives inside Radix's Portal and only attaches when the
+    // Select opens \u2014 a plain useRef wouldn't trigger the effect.
+    const [viewport, setViewport] = React.useState<HTMLDivElement | null>(null);
+
+    React.useEffect(() => {
+      if (!viewport || !onViewportScrollEnd) return;
+
+
+      const isAtBottom = () => {
+        const { scrollTop, scrollHeight, clientHeight } = viewport;
+        return (
+          scrollTop + clientHeight >= scrollHeight - BOTTOM_THRESHOLD_PX
+        );
+      };
+
+      const supportsScrollEnd =
+        typeof window !== "undefined" && "onscrollend" in window;
+
+      if (supportsScrollEnd) {
+        const handler = (event: Event) => {
+          if (isAtBottom()) {
+            onViewportScrollEnd(
+              event as unknown as React.UIEvent<HTMLDivElement>
+            );
+          }
+        };
+        viewport.addEventListener("scrollend", handler);
+        return () => viewport.removeEventListener("scrollend", handler);
+      }
+
+      let timeoutId: ReturnType<typeof setTimeout> | null = null;
+      const handler = (event: Event) => {
+        if (timeoutId) clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+          if (isAtBottom()) {
+            onViewportScrollEnd(
+              event as unknown as React.UIEvent<HTMLDivElement>
+            );
+          }
+        }, SCROLL_DEBOUNCE_MS);
+      };
+      viewport.addEventListener("scroll", handler, { passive: true });
+      return () => {
+        viewport.removeEventListener("scroll", handler);
+        if (timeoutId) clearTimeout(timeoutId);
+      };
+    }, [viewport, onViewportScrollEnd]);
+
     return (
       <SelectPrimitive.Portal>
         <SelectPrimitive.Content
@@ -6124,17 +6220,13 @@ const SelectContent = React.forwardRef(
         >
           <SelectScrollUpButton />
           <SelectPrimitive.Viewport
+            ref={setViewport}
             data-select-viewport=""
             className={cn(
               "p-1",
               position === "popper" &&
                 "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
             )}
-            {...((onViewportScrollEnd
-              ? { onScrollEnd: onViewportScrollEnd }
-              : {}) as React.ComponentPropsWithoutRef<
-              typeof SelectPrimitive.Viewport
-            >)}
           >
             {children}
           </SelectPrimitive.Viewport>

package/package.json

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