myoperator-mcp 0.2.309 → 0.2.310

package/dist/index.js

@@ -4167,6 +4167,15 @@ Input.displayName = "Input";
 export { Input, inputVariants };
 `,
   "multi-select": `import * as React from "react";
+import { createPortal } from "react-dom";
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  size,
+  useFloating,
+} from "@floating-ui/react-dom";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Check, ChevronDown, CircleAlert, Loader2, X } from "lucide-react";
 
@@ -4285,10 +4294,8 @@ const multiSelectTriggerVariants = cva(
   {
     variants: {
       state: {
-        default:
-          "border border-solid border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
-        error:
-          "border border-solid border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+        default: "border border-solid border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+        error: "border border-solid border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
     },
     defaultVariants: {
@@ -4420,7 +4427,40 @@ const MultiSelect = React.forwardRef(
     const [searchQuery, setSearchQuery] = React.useState("");
 
     // Container ref for click outside detection
-    const containerRef = React.useRef<HTMLDivElement>(null);
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+    const { refs, floatingStyles, isPositioned } = useFloating({
+      open: isOpen,
+      placement: "bottom-start",
+      strategy: "fixed",
+      middleware: [
+        offset(4),
+        flip({ padding: 8 }),
+        shift({ padding: 8 }),
+        size({
+          padding: 8,
+          apply({ rects, elements }) {
+            elements.floating.style.width = \`\${rects.reference.width}px\`;
+          },
+        }),
+      ],
+      whileElementsMounted: (reference, floating, update) =>
+        autoUpdate(reference, floating, update, { animationFrame: true }),
+    });
+
+    const setAnchorRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        refs.setReference(node);
+      },
+      [refs]
+    );
+
+    const setDropdownRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        refs.setFloating(node);
+      },
+      [refs]
+    );
 
     const flatOptions = React.useMemo(
       () => flattenMultiSelectOptions(options),
@@ -4561,22 +4601,31 @@ const MultiSelect = React.forwardRef(
       onValueChange?.([]);
     };
 
-    // Close dropdown when clicking outside
+    // Close dropdown when clicking outside (defer so opening click does not close immediately)
     React.useEffect(() => {
+      if (!isOpen) return;
+
       const handleClickOutside = (event: MouseEvent) => {
+        const target = event.target as Node;
         if (
-          containerRef.current &&
-          !containerRef.current.contains(event.target as Node)
+          containerRef.current?.contains(target) ||
+          refs.floating.current?.contains(target)
         ) {
-          setIsOpen(false);
-          setSearchQuery("");
+          return;
         }
+        setIsOpen(false);
+        setSearchQuery("");
       };
 
-      document.addEventListener("mousedown", handleClickOutside);
-      return () =>
+      const timeoutId = window.setTimeout(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+      }, 0);
+
+      return () => {
+        window.clearTimeout(timeoutId);
         document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
+      };
+    }, [isOpen, refs.floating]);
 
     // Handle keyboard navigation
     const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -4612,9 +4661,11 @@ const MultiSelect = React.forwardRef(
           </label>
         )}
 
-        {/* Trigger + helper/error + listbox share one positioning context so the
-            menu opens directly under the field (and under helper text when present). */}
-        <div className="relative w-full min-w-0 flex flex-col gap-1">
+        {/* Anchor for floating menu (portaled to body to escape overflow:hidden scroll areas). */}
+        <div
+          ref={setAnchorRef}
+          className="relative w-full min-w-0 flex flex-col gap-1"
+        >
           {/* Trigger */}
           <button
             ref={ref}
@@ -4734,18 +4785,23 @@ const MultiSelect = React.forwardRef(
             </div>
           )}
 
-          {/* Dropdown */}
-          {isOpen && (
-            <TooltipProvider delayDuration={200}>
-              <div
-                id={listboxId}
-                className={cn(
-                  "absolute left-0 right-0 z-[100] mt-1 w-full rounded bg-semantic-bg-primary border border-solid border-semantic-border-layout shadow-md",
-                  "top-full"
-                )}
-                role="listbox"
-                aria-multiselectable="true"
-              >
+          {isOpen &&
+            typeof document !== "undefined" &&
+            createPortal(
+              <TooltipProvider delayDuration={200}>
+                <div
+                  ref={setDropdownRef}
+                  id={listboxId}
+                  role="listbox"
+                  aria-multiselectable="true"
+                  className="rounded bg-semantic-bg-primary border border-solid border-semantic-border-layout shadow-md"
+                  style={{
+                    ...floatingStyles,
+                    zIndex: 10050,
+                    visibility: isPositioned ? undefined : "hidden",
+                  }}
+                  onMouseDown={(e) => e.stopPropagation()}
+                >
               {/* Search input */}
               {searchable && (
                 <div className="p-2 border-b border-solid border-semantic-border-layout">
@@ -4773,7 +4829,7 @@ const MultiSelect = React.forwardRef(
                         <div
                           key={\`divider-\${itemIndex}\`}
                           role="separator"
-                          className="my-1 h-px bg-semantic-border-layout"
+                          className="my-1 h-px bg-[var(--semantic-border-layout,#E9EAEB)]"
                         />
                       );
                     }
@@ -4823,7 +4879,7 @@ const MultiSelect = React.forwardRef(
                       >
                         <span className="absolute right-2 flex size-4 items-center justify-center">
                           {isSelected && (
-                            <Check className="size-4 text-semantic-brand" />
+                            <Check className="size-4 text-semantic-primary" />
                           )}
                         </span>
                         <span className="min-w-0 flex-1 whitespace-normal break-words text-left">
@@ -4882,7 +4938,7 @@ const MultiSelect = React.forwardRef(
                           </TooltipTrigger>
                           <TooltipContent
                             side="top"
-                            className="max-w-xs bg-semantic-primary text-semantic-text-inverted border-semantic-primary"
+                            className="max-w-xs bg-semantic-primary text-semantic-text-inverted border-semantic-primary border-solid"
                           >
                             {overlayCopy}
                           </TooltipContent>
@@ -4908,9 +4964,10 @@ const MultiSelect = React.forwardRef(
                   {selectedValues.length} / {maxSelections} selected
                 </div>
               ) : null}
-              </div>
-            </TooltipProvider>
-          )}
+                </div>
+              </TooltipProvider>,
+              document.body
+            )}
         </div>
 
         {/* Hidden input for form submission */}

package/package.json

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