myoperator-mcp 0.2.372 → 0.2.373

package/dist/index.js

@@ -5987,6 +5987,11 @@ export function flattenMultiSelectOptions(
   return (input as MultiSelectOption[]).map(normalizeMultiSelectOption);
 }
 
+/** Menu never renders narrower than this, even off a tiny trigger. */
+const MENU_MIN_WIDTH = 180;
+/** Floor for the flip/shrink height so the list is never collapsed to nothing. */
+const MENU_MIN_HEIGHT = 120;
+
 /**
  * MultiSelect trigger variants matching TextField styling
  */
@@ -6068,6 +6073,19 @@ export interface MultiSelectProps extends VariantProps<
   showClearAll?: boolean;
   /** Vertical rule before the chevron (Figma-style trigger) */
   showSeparatorBeforeChevron?: boolean;
+  /**
+   * Element the dropdown is portaled into. Defaults to \`document.body\` so the
+   * menu escapes \`overflow\` and \`transform\` ancestors (a Radix DialogContent is
+   * both, and a transformed ancestor would clip a \`position: fixed\` menu).
+   */
+  menuContainer?: HTMLElement | null;
+  /**
+   * Truncate long labels in the dropdown list to a single line with an ellipsis
+   * instead of wrapping them. Selected chips in the trigger always truncate \u2014
+   * this only controls the option rows.
+   * @default false for \`simple\`, true for \`detailed\` (single-line row design)
+   */
+  truncateOptionText?: boolean;
 }
 
 /**
@@ -6114,6 +6132,8 @@ const MultiSelect = React.forwardRef(
       optionVariant = "simple",
       separateSelectedWithDivider = false,
       showClearAll = true,
+      menuContainer,
+      truncateOptionText,
       showSeparatorBeforeChevron = false,
       closeOnEscape = false,
     }: MultiSelectProps,
@@ -6127,9 +6147,25 @@ const MultiSelect = React.forwardRef(
     // Search query
     const [searchQuery, setSearchQuery] = React.useState("");
 
+    // \`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.
+    const truncateOptions =
+      truncateOptionText ?? optionVariant === "detailed";
+
     // Container ref for click outside detection
     const containerRef = React.useRef<HTMLDivElement | null>(null);
 
+    /** Where the dropdown gets portaled; body unless the caller overrides. */
+    const [portalTarget, setPortalTarget] = React.useState<HTMLElement | null>(
+      null
+    );
+
+    React.useEffect(() => {
+      if (!isOpen || typeof document === "undefined") return;
+      setPortalTarget(menuContainer ?? document.body);
+    }, [isOpen, menuContainer]);
+
+
     const { refs, floatingStyles, isPositioned } = useFloating({
       open: isOpen,
       placement: "bottom-start",
@@ -6140,8 +6176,19 @@ const MultiSelect = React.forwardRef(
         shift({ padding: 8 }),
         size({
           padding: 8,
-          apply({ rects, elements }) {
-            elements.floating.style.width = \`\${rects.reference.width}px\`;
+          apply({ rects, elements, availableHeight, availableWidth }) {
+            // Match the trigger, but never render an unreadably narrow menu on a
+            // small trigger, and never spill past the viewport on a small screen.
+            const width = Math.min(
+              Math.max(rects.reference.width, MENU_MIN_WIDTH),
+              availableWidth
+            );
+            elements.floating.style.width = \`\${width}px\`;
+            // Let the option list shrink instead of overflowing a short viewport.
+            elements.floating.style.setProperty(
+              "--multi-select-available-height",
+              \`\${Math.max(availableHeight, MENU_MIN_HEIGHT)}px\`
+            );
           },
         }),
       ],
@@ -6163,6 +6210,57 @@ const MultiSelect = React.forwardRef(
       [refs]
     );
 
+    /**
+     * Radix Dialog / Drawer wrap their content in \`react-remove-scroll\`, which
+     * listens for \`wheel\` / \`touchmove\` on \`document\` (bubble phase) and calls
+     * \`preventDefault()\` for anything outside the locked subtree \u2014 our
+     * body-portaled menu counts as outside, so its list would not scroll.
+     * Stopping propagation at the menu keeps that document listener from ever
+     * seeing the event, leaving the browser's native scrolling intact.
+     * Clicks are handled separately: the dialog sets \`pointer-events: none\` on
+     * \`<body>\`, which the menu overrides with \`pointer-events: auto\`.
+     */
+    React.useEffect(() => {
+      const node = refs.floating.current;
+      if (!isOpen || !node) return;
+
+      const stop = (event: Event) => event.stopPropagation();
+      node.addEventListener("wheel", stop, { passive: false });
+      node.addEventListener("touchmove", stop, { passive: false });
+
+      /**
+       * The dialog also traps focus. Radix \`FocusScope\` registers TWO bubble
+       * listeners on \`document\` and either one is enough to make the search
+       * input untypable:
+       *   - \`focusin\`  \u2014 target outside the dialog, so focus is pulled back.
+       *   - \`focusout\` \u2014 fired on the element focus is LEAVING (inside the
+       *     dialog) with \`relatedTarget\` = our input; since that is outside, it
+       *     restores the previously focused element.
+       * The \`focusout\` one never travels through the menu, so a listener on the
+       * menu node cannot see it. Intercepting in the CAPTURE phase on
+       * \`document\` does: capture at \`document\` runs before the bubble listeners
+       * on the same node, so stopping propagation there means FocusScope never
+       * runs \u2014 but only for focus events that involve the menu. Every other
+       * focus event in the app is untouched.
+       */
+      const stopMenuFocusEvent = (event: Event) => {
+        const { target, relatedTarget } = event as FocusEvent;
+        const touchesMenu =
+          (target instanceof Node && node.contains(target)) ||
+          (relatedTarget instanceof Node && node.contains(relatedTarget));
+        if (touchesMenu) event.stopPropagation();
+      };
+      document.addEventListener("focusin", stopMenuFocusEvent, true);
+      document.addEventListener("focusout", stopMenuFocusEvent, true);
+
+      return () => {
+        node.removeEventListener("wheel", stop);
+        node.removeEventListener("touchmove", stop);
+        document.removeEventListener("focusin", stopMenuFocusEvent, true);
+        document.removeEventListener("focusout", stopMenuFocusEvent, true);
+      };
+    }, [isOpen, portalTarget, refs.floating]);
+
     const flatOptions = React.useMemo(
       () => flattenMultiSelectOptions(options),
       [options]
@@ -6344,14 +6442,14 @@ const MultiSelect = React.forwardRef(
     return (
       <div
         ref={containerRef}
-        className={cn("flex flex-col gap-1", wrapperClassName)}
+        className={cn("flex min-w-0 flex-col gap-1", wrapperClassName)}
       >
         {/* Label */}
         {label && (
           <label
             htmlFor={selectId}
             className={cn(
-              "text-sm font-semibold text-semantic-text-secondary",
+              "break-words text-sm font-semibold text-semantic-text-secondary",
               labelClassName
             )}
           >
@@ -6387,7 +6485,7 @@ const MultiSelect = React.forwardRef(
               triggerClassName
             )}
           >
-          <div className="flex-1 flex flex-wrap gap-1">
+          <div className="min-w-0 flex-1 flex flex-wrap gap-1">
             {selectedValues.length === 0 ? (
               <span className="text-base text-semantic-text-placeholder">
                 {placeholder}
@@ -6396,9 +6494,14 @@ const MultiSelect = React.forwardRef(
               selectedLabels.map((label, index) => (
                 <span
                   key={selectedValues[index]}
-                  className="inline-flex items-center gap-1 bg-semantic-bg-ui text-semantic-text-primary text-sm px-2 py-0.5 rounded"
+                  className="inline-flex min-w-0 max-w-full items-center gap-1 bg-semantic-bg-ui text-semantic-text-primary text-sm px-2 py-0.5 rounded"
                 >
-                  {label}
+                  <span
+                    className="min-w-0 truncate"
+                    title={typeof label === "string" ? label : undefined}
+                  >
+                    {label}
+                  </span>
                   <span
                     role="button"
                     tabIndex={0}
@@ -6412,7 +6515,7 @@ const MultiSelect = React.forwardRef(
                         );
                       }
                     }}
-                    className="cursor-pointer hover:text-semantic-error-primary focus:outline-none"
+                    className="shrink-0 cursor-pointer hover:text-semantic-error-primary focus:outline-none"
                     aria-label={\`Remove \${label}\`}
                   >
                     <X className="size-3" />
@@ -6471,14 +6574,14 @@ const MultiSelect = React.forwardRef(
                     className="size-3.5 shrink-0 text-semantic-error-primary"
                     aria-hidden
                   />
-                  <span className="text-sm text-semantic-error-primary">
+                  <span className="min-w-0 break-words text-sm text-semantic-error-primary">
                     {error}
                   </span>
                 </div>
               ) : helperText ? (
                 <span
                   id={helperId}
-                  className="text-sm text-semantic-text-muted"
+                  className="min-w-0 break-words text-sm text-semantic-text-muted"
                 >
                   {helperText}
                 </span>
@@ -6487,7 +6590,7 @@ const MultiSelect = React.forwardRef(
           )}
 
           {isOpen &&
-            typeof document !== "undefined" &&
+            portalTarget &&
             createPortal(
               <TooltipProvider delayDuration={200}>
                 <div
@@ -6499,6 +6602,9 @@ const MultiSelect = React.forwardRef(
                   style={{
                     ...floatingStyles,
                     zIndex: 10050,
+                    // Radix Dialog sets \`pointer-events: none\` on <body> while
+                    // open; without this the menu swallows nothing and clicks die.
+                    pointerEvents: "auto",
                     visibility: isPositioned ? undefined : "hidden",
                   }}
                   onMouseDown={(e) => e.stopPropagation()}
@@ -6518,7 +6624,13 @@ const MultiSelect = React.forwardRef(
               )}
 
               {/* Options */}
-              <div className="max-h-60 overflow-auto p-1">
+              <div
+                className="overflow-auto overscroll-contain p-1"
+                style={{
+                  maxHeight:
+                    "min(15rem, var(--multi-select-available-height, 15rem))",
+                }}
+              >
                 {filteredOptions.length === 0 ? (
                   <div className="py-6 text-center text-sm text-semantic-text-muted">
                     No results found
@@ -6583,7 +6695,19 @@ const MultiSelect = React.forwardRef(
                             <Check className="size-4 text-semantic-primary" />
                           )}
                         </span>
-                        <span className="min-w-0 flex-1 whitespace-normal break-words text-left">
+                        <span
+                          title={
+                            truncateOptions && typeof option.label === "string"
+                              ? option.label
+                              : undefined
+                          }
+                          className={cn(
+                            "min-w-0 flex-1 text-left",
+                            truncateOptions
+                              ? "truncate"
+                              : "whitespace-normal break-words"
+                          )}
+                        >
                           {option.label}
                         </span>
                       </button>
@@ -6615,7 +6739,19 @@ const MultiSelect = React.forwardRef(
                           aria-hidden
                           tabIndex={-1}
                         />
-                        <span className="min-w-0 flex-1 truncate text-left">
+                        <span
+                          title={
+                            typeof option.label === "string"
+                              ? option.label
+                              : undefined
+                          }
+                          className={cn(
+                            "min-w-0 flex-1 text-left",
+                            truncateOptions
+                              ? "truncate"
+                              : "whitespace-normal break-words"
+                          )}
+                        >
                           {option.label}
                         </span>
                         {secondaryLine ? (
@@ -6667,7 +6803,7 @@ const MultiSelect = React.forwardRef(
               ) : null}
                 </div>
               </TooltipProvider>,
-              document.body
+              portalTarget
             )}
         </div>
 

package/package.json

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