myoperator-mcp 0.2.364 → 0.2.365

package/dist/index.js

@@ -710,6 +710,7 @@ const badgeVariants = cva(
       variant: {
         // Status-based variants (existing)
         active: "bg-semantic-success-surface text-semantic-success-primary",
+        information: "bg-semantic-info-surface text-semantic-info-text",
         warning: "bg-semantic-warning-surface text-semantic-warning-primary",
         failed: "bg-semantic-error-surface text-semantic-error-primary",
         disabled: "bg-semantic-bg-ui text-semantic-text-muted",
@@ -740,6 +741,7 @@ const badgeVariants = cva(
  * @example
  * \`\`\`tsx
  * <Badge variant="active">Active</Badge>
+ * <Badge variant="information">Coming Soon</Badge>
  * <Badge variant="warning">Warning</Badge>
  * <Badge variant="failed">Failed</Badge>
  * <Badge variant="disabled">Disabled</Badge>
@@ -8670,6 +8672,7 @@ export { SearchFilter, searchFilterVariants };
 import { Loader2, Search } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import { Input } from "./input";
 import {
   Select,
   SelectContent,
@@ -8728,6 +8731,12 @@ export interface SelectFieldProps {
   searchable?: boolean;
   /** Search placeholder text */
   searchPlaceholder?: string;
+  /**
+   * Render a divider (top border) above each option group and display the
+   * group labels in uppercase with letter-spacing \u2014 matches the Figma
+   * "routing" dropdown style. Only affects grouped options.
+   */
+  separateGroups?: boolean;
   /**
    * Controlled search value. When provided, internal search state is
    * ignored and the consumer owns the value \u2014 typically used to drive
@@ -8849,6 +8858,7 @@ const SelectField = React.forwardRef(
       options,
       searchable,
       searchPlaceholder = "Search...",
+      separateGroups,
       searchValue,
       onSearchChange,
       wrapperClassName,
@@ -8869,6 +8879,17 @@ const SelectField = React.forwardRef(
     const isSearchControlled = searchValue !== undefined;
     const effectiveSearchQuery = isSearchControlled ? searchValue : searchQuery;
 
+    // Track the current selection ourselves so we always know which option is
+    // selected \u2014 even in uncontrolled mode. This lets us keep the selected
+    // option mounted while the search filter hides everything else (see the
+    // filter below), which prevents Radix from blanking the trigger value and
+    // stealing focus off the search input when the selected item unmounts.
+    const isValueControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(
+      defaultValue ?? ""
+    );
+    const selectedValue = isValueControlled ? value : uncontrolledValue;
+
     // Combined value change handler that also fires onSelect with full option object.
     // When interceptValue returns false, onValueChange is skipped (only onSelect fires).
     const handleValueChange = React.useCallback(
@@ -8877,6 +8898,9 @@ const SelectField = React.forwardRef(
 
         if (!intercepted) {
           onValueChange?.(newValue);
+          if (!isValueControlled) {
+            setUncontrolledValue(newValue);
+          }
         }
 
         if (onSelect) {
@@ -8886,7 +8910,7 @@ const SelectField = React.forwardRef(
           }
         }
       },
-      [onValueChange, onSelect, interceptValue, options]
+      [onValueChange, onSelect, interceptValue, options, isValueControlled]
     );
 
     // Support re-selection: fire onSelect when clicking the already-selected
@@ -8895,11 +8919,11 @@ const SelectField = React.forwardRef(
     // no-op.
     const handleItemClick = React.useCallback(
       (option: SelectOption) => {
-        if (option.value === value) {
+        if (option.value === selectedValue) {
           handleValueChange(option.value);
         }
       },
-      [value, handleValueChange]
+      [selectedValue, handleValueChange]
     );
 
     // Derive state from props
@@ -8914,46 +8938,55 @@ const SelectField = React.forwardRef(
     // Determine aria-describedby
     const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined;
 
-    // Group options by group property
+    // Group options by group property.
+    //
+    // When client-side filtering is active, non-matching options are hidden
+    // (rendered with \`display:none\`) rather than removed from the tree. The
+    // one exception we *must* keep mounted is the currently-selected option:
+    // if Radix's selected item unmounts, the trigger loses its displayed value
+    // and focus is pulled off the search input. \`matchCount\` tracks how many
+    // options are actually visible so the "no results" / footer states stay
+    // accurate.
     const groupedOptions = React.useMemo(() => {
-      const groups: Record<string, SelectOption[]> = {};
-      const ungrouped: SelectOption[] = [];
+      const groups: Record<string, (SelectOption & { hidden?: boolean })[]> =
+        {};
+      const ungrouped: (SelectOption & { hidden?: boolean })[] = [];
+      let matchCount = 0;
+
+      const filtering =
+        !!searchable && !isSearchControlled && !!searchQuery;
+      const query = searchQuery.toLowerCase();
 
       options.forEach((option) => {
-        // 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())
-        ) {
+        const isMatch =
+          !filtering || option.label.toLowerCase().includes(query);
+        const isSelected = option.value === selectedValue && !!selectedValue;
+
+        // Drop only options that neither match the query nor are selected.
+        if (!isMatch && !isSelected) {
           return;
         }
 
+        if (isMatch) matchCount++;
+        const entry = { ...option, hidden: !isMatch };
+
         if (option.group) {
           if (!groups[option.group]) {
             groups[option.group] = [];
           }
-          groups[option.group].push(option);
+          groups[option.group].push(entry);
         } else {
-          ungrouped.push(option);
+          ungrouped.push(entry);
         }
       });
 
-      return { groups, ungrouped };
-    }, [options, searchable, isSearchControlled, searchQuery]);
+      return { groups, ungrouped, matchCount };
+    }, [options, searchable, isSearchControlled, searchQuery, selectedValue]);
 
     const hasGroups = Object.keys(groupedOptions.groups).length > 0;
 
-    // Count rendered options for the "End of list" footer (only show when at least one is visible).
-    const totalRendered =
-      groupedOptions.ungrouped.length +
-      Object.values(groupedOptions.groups).reduce(
-        (sum, items) => sum + items.length,
-        0
-      );
+    // Number of *visible* options \u2014 drives the empty-state and footer rows.
+    const totalRendered = groupedOptions.matchCount;
     const showEndOfList = hasMore === false && totalRendered > 0 && !loadingMore;
 
     // Handle search input change
@@ -9009,7 +9042,14 @@ const SelectField = React.forwardRef(
             ref={ref}
             id={selectId}
             state={derivedState}
-            className={cn(loading && "pr-10", triggerClassName)}
+            className={cn(
+              loading && "pr-10",
+              // Figma "routing" style uses a darker (text-muted) placeholder
+              // instead of the default lighter placeholder token.
+              separateGroups &&
+                "[&>span[data-placeholder]]:text-semantic-text-muted",
+              triggerClassName
+            )}
             aria-invalid={!!error}
             aria-describedby={ariaDescribedBy}
           >
@@ -9024,28 +9064,45 @@ const SelectField = React.forwardRef(
             className={contentClassName}
           >
             {/* Search input */}
-            {searchable && (
-              <div className="flex items-center gap-2 px-3 pb-1.5 border-b border-solid border-semantic-border-layout">
-                <Search className="size-4 text-semantic-text-muted shrink-0" />
-                <input
-                  type="text"
-                  placeholder={searchPlaceholder}
-                  value={effectiveSearchQuery}
-                  onChange={handleSearchChange}
-                  className="w-full h-[42px] text-base text-semantic-text-primary bg-transparent placeholder:text-semantic-text-placeholder focus:outline-none"
-                  // Prevent closing dropdown when clicking input
-                  onClick={(e) => e.stopPropagation()}
-                  onKeyDown={(e) => e.stopPropagation()}
-                />
-              </div>
-            )}
+            {searchable &&
+              (separateGroups ? (
+                // Figma "routing" style \u2014 a bordered, rounded search box that
+                // reuses the shared Input component (no leading icon).
+                <div className="px-1 pb-1.5">
+                  <Input
+                    type="text"
+                    placeholder={searchPlaceholder}
+                    value={effectiveSearchQuery}
+                    onChange={handleSearchChange}
+                    // Prevent closing dropdown when clicking input
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => e.stopPropagation()}
+                  />
+                </div>
+              ) : (
+                <div className="flex items-center gap-2 px-3 pb-1.5 border-b border-solid border-semantic-border-layout">
+                  <Search className="size-4 text-semantic-text-muted shrink-0" />
+                  <input
+                    type="text"
+                    placeholder={searchPlaceholder}
+                    value={effectiveSearchQuery}
+                    onChange={handleSearchChange}
+                    className="w-full h-[42px] text-base text-semantic-text-primary bg-transparent placeholder:text-semantic-text-placeholder focus:outline-none"
+                    // Prevent closing dropdown when clicking input
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => e.stopPropagation()}
+                  />
+                </div>
+              ))}
 
-            {/* Ungrouped options */}
+            {/* Ungrouped options. Non-matching options stay mounted but hidden
+                (only the selected option is ever kept while filtering). */}
             {groupedOptions.ungrouped.map((option) => (
               <SelectItem
                 key={option.value}
                 value={option.value}
                 disabled={option.disabled}
+                className={cn(option.hidden && "hidden")}
                 onPointerUp={() => handleItemClick(option)}
               >
                 {option.label}
@@ -9055,32 +9112,44 @@ const SelectField = React.forwardRef(
             {/* Grouped options */}
             {hasGroups &&
               Object.entries(groupedOptions.groups).map(
-                ([groupName, groupOptions]) => (
-                  <SelectGroup key={groupName}>
-                    <SelectLabel>{groupName}</SelectLabel>
-                    {groupOptions.map((option) => (
-                      <SelectItem
-                        key={option.value}
-                        value={option.value}
-                        disabled={option.disabled}
-                        onPointerUp={() => handleItemClick(option)}
-                      >
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                )
+                ([groupName, groupOptions]) => {
+                  // Hide the group label when every option in it is filtered
+                  // out (i.e. only a hidden selected item remains).
+                  const hasVisible = groupOptions.some((o) => !o.hidden);
+                  return (
+                    <SelectGroup key={groupName}>
+                      {hasVisible && (
+                        <SelectLabel
+                          className={cn(
+                            separateGroups &&
+                              "mt-1 border-t border-solid border-semantic-border-layout pt-2.5 uppercase tracking-[0.5px]"
+                          )}
+                        >
+                          {groupName}
+                        </SelectLabel>
+                      )}
+                      {groupOptions.map((option) => (
+                        <SelectItem
+                          key={option.value}
+                          value={option.value}
+                          disabled={option.disabled}
+                          className={cn(option.hidden && "hidden")}
+                          onPointerUp={() => handleItemClick(option)}
+                        >
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  );
+                }
               )}
 
-            {/* No results message */}
-            {searchable &&
-              effectiveSearchQuery &&
-              groupedOptions.ungrouped.length === 0 &&
-              Object.keys(groupedOptions.groups).length === 0 && (
-                <div className="py-6 text-center text-sm text-semantic-text-muted">
-                  No results found
-                </div>
-              )}
+            {/* No results message \u2014 based on the count of *visible* options. */}
+            {searchable && effectiveSearchQuery && totalRendered === 0 && (
+              <div className="py-6 text-center text-sm text-semantic-text-muted">
+                No results found
+              </div>
+            )}
 
             {/* Loading-more row (lazy-load) */}
             {loadingMore && (

package/package.json

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