myoperator-mcp 0.2.376 → 0.2.378

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()}
                   />
@@ -8489,6 +8518,49 @@ function PaginationEllipsis({
 }
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
+export interface PaginationInfoProps extends React.ComponentProps<"p"> {
+  /** Current page (1-based) */
+  currentPage: number;
+  /** Number of items shown per page */
+  pageSize: number;
+  /** Total number of items across all pages */
+  totalItems: number;
+  /** Leading label before the range (default: "Showing") */
+  label?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+function PaginationInfo({
+  currentPage,
+  pageSize,
+  totalItems,
+  label = "Showing",
+  className,
+  ...props
+}: PaginationInfoProps) {
+  const startItem = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+
+  return (
+    <p
+      data-slot="pagination-info"
+      aria-live="polite"
+      className={cn(
+        "m-0 text-sm text-semantic-text-muted whitespace-nowrap",
+        className
+      )}
+      {...props}
+    >
+      {label}{" "}
+      <span className="font-medium text-semantic-text-primary">
+        {startItem}\u2013{endItem} of {totalItems}
+      </span>
+    </p>
+  );
+}
+PaginationInfo.displayName = "PaginationInfo";
+
 export interface PaginationWidgetProps {
   /** Current page (1-based) */
   currentPage: number;
@@ -8498,7 +8570,13 @@ export interface PaginationWidgetProps {
   onPageChange: (page: number) => void;
   /** Number of pages shown on each side of current page (default: 1) */
   siblingCount?: number;
-  /** Additional CSS classes */
+  /** Total number of items \u2014 required to render the "Showing X-Y of Z" summary */
+  totalItems?: number;
+  /** Items per page \u2014 required to render the "Showing X-Y of Z" summary */
+  pageSize?: number;
+  /** Horizontal placement of the page controls (default: "center", or "end" when the summary is shown) */
+  align?: "start" | "center" | "end";
+  /** Additional CSS classes for the outer wrapper */
   className?: string;
 }
 
@@ -8540,17 +8618,35 @@ function usePaginationRange(
   return pages;
 }
 
+const paginationAlignClasses = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+} as const;
+
 function PaginationWidget({
   currentPage,
   totalPages,
   onPageChange,
   siblingCount = 1,
+  totalItems,
+  pageSize,
+  align,
   className,
 }: PaginationWidgetProps) {
   const pages = usePaginationRange(currentPage, totalPages, siblingCount);
+  const showInfo = totalItems !== undefined && pageSize !== undefined;
+  const resolvedAlign = align ?? (showInfo ? "end" : "center");
 
-  return (
-    <Pagination className={className}>
+  const controls = (
+    <Pagination
+      className={cn(
+        "mx-0 w-auto",
+        paginationAlignClasses[resolvedAlign],
+        !showInfo && "w-full",
+        !showInfo && className
+      )}
+    >
       <PaginationContent>
         <PaginationItem>
           <PaginationPrevious
@@ -8595,6 +8691,25 @@ function PaginationWidget({
       </PaginationContent>
     </Pagination>
   );
+
+  if (!showInfo) return controls;
+
+  return (
+    <div
+      data-slot="pagination-widget"
+      className={cn(
+        "flex w-full flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between",
+        className
+      )}
+    >
+      <PaginationInfo
+        currentPage={currentPage}
+        pageSize={pageSize}
+        totalItems={totalItems}
+      />
+      {controls}
+    </div>
+  );
 }
 PaginationWidget.displayName = "PaginationWidget";
 
@@ -8606,6 +8721,7 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
+  PaginationInfo,
   PaginationWidget,
 };
 `,
@@ -9580,11 +9696,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 +9800,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.378",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",