myoperator-mcp 0.2.260 → 0.2.261

package/dist/index.js

@@ -1492,6 +1492,11 @@ export interface CreatableMultiSelectProps
    * Set to false to match Figma (counter lives only in the field flow / not under the control).
    */
   showPerItemCharacterCounter?: boolean
+  /**
+   * Closed trigger: show removable chips (default) or a single comma-separated summary line (Figma Tone).
+   * While open, the trigger always shows the summary line; selected chips with remove controls appear in the panel.
+   */
+  triggerDisplay?: "chips" | "summary"
   /**
    * When set, the text input is transformed (e.g. strip invalid characters).
    * If the raw value differs from the sanitized value, \`onInvalidCharacters\` is called.
@@ -1537,6 +1542,7 @@ const CreatableMultiSelect = React.forwardRef(
       maxItems,
       maxLengthPerItem,
       showPerItemCharacterCounter = true,
+      triggerDisplay = "chips",
       sanitizeInput,
       onInvalidCharacters,
       onValidInput,
@@ -1637,13 +1643,10 @@ const CreatableMultiSelect = React.forwardRef(
       !value.includes(draftForCreate) &&
       (maxItems == null || value.length < maxItems)
 
-    const hasHintCopy = Boolean(createHintText) || maxItems != null
+    const panelInputPlaceholder = createHintText ?? placeholder
 
-    const showHintsSection = hasHintCopy || canShowEnterAffordance
-
-    const inputPlaceholder = isOpen
-      ? selectedSummary || placeholder
-      : ""
+    const summaryTriggerLabel =
+      value.length === 0 ? placeholder : selectedSummary
 
     return (
       <div
@@ -1652,48 +1655,33 @@ const CreatableMultiSelect = React.forwardRef(
         {...props}
       >
         <div className="relative w-full">
-          {isOpen ? (
+          {isOpen && (
             <div
               className={cn(
                 creatableSelectTriggerVariants({ state: derivedState }),
-                "cursor-text"
+                "flex h-auto min-h-[42px] cursor-text items-start gap-2 py-2 text-left"
               )}
-              onClick={() => inputRef.current?.focus()}
+              onClick={() => !disabled && inputRef.current?.focus()}
+              aria-hidden="true"
             >
-              <input
-                ref={inputRef}
-                type="text"
-                value={inputValue}
-                onChange={(e) => {
-                  const raw = e.target.value
-                  const sanitized = sanitizeInput ? sanitizeInput(raw) : raw
-                  if (sanitizeInput) {
-                    if (raw !== sanitized) onInvalidCharacters?.()
-                    else onValidInput?.()
-                  }
-                  setInputValue(
-                    maxLengthPerItem != null
-                      ? sanitized.slice(0, maxLengthPerItem)
-                      : sanitized
-                  )
-                }}
-                maxLength={maxLengthPerItem}
-                onKeyDown={handleKeyDown}
-                disabled={disabled}
-                placeholder={inputPlaceholder}
-                className="flex-1 min-w-0 bg-transparent outline-none text-base text-semantic-text-primary placeholder:text-semantic-text-muted"
-                role="combobox"
-                aria-expanded={isOpen}
-                aria-controls={listboxId}
-                aria-haspopup="listbox"
-                aria-autocomplete="list"
-              />
+              <span
+                className={cn(
+                  "line-clamp-2 min-w-0 flex-1 text-base",
+                  value.length === 0
+                    ? "text-semantic-text-muted"
+                    : "text-semantic-text-primary"
+                )}
+              >
+                {summaryTriggerLabel}
+              </span>
               <ChevronRight
-                className="size-5 text-semantic-text-muted shrink-0 opacity-70"
+                className="mt-1 size-5 shrink-0 self-start text-semantic-text-muted opacity-70"
                 aria-hidden
               />
             </div>
-          ) : (
+          )}
+
+          {!isOpen && (
             <div
               role="combobox"
               tabIndex={disabled ? -1 : 0}
@@ -1717,12 +1705,23 @@ const CreatableMultiSelect = React.forwardRef(
               }}
               className={cn(
                 creatableSelectTriggerVariants({ state: derivedState }),
-                "flex min-h-[42px] cursor-pointer items-center gap-2 py-1 text-left outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-semantic-bg-primary",
+                "flex h-auto min-h-[42px] cursor-pointer items-start gap-2 py-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-semantic-bg-primary",
                 disabled && "pointer-events-none cursor-not-allowed"
               )}
             >
-              <div className="flex min-h-0 min-w-0 flex-1 flex-wrap items-center gap-1.5">
-                {value.length === 0 ? (
+              <div className="flex min-h-0 min-w-0 flex-1 flex-wrap content-start items-center gap-1.5">
+                {triggerDisplay === "summary" ? (
+                  <span
+                    className={cn(
+                      "line-clamp-2 flex-1 text-base",
+                      value.length === 0
+                        ? "text-semantic-text-muted"
+                        : "text-semantic-text-primary"
+                    )}
+                  >
+                    {summaryTriggerLabel}
+                  </span>
+                ) : value.length === 0 ? (
                   <span
                     className={cn(
                       "line-clamp-2 flex-1 text-base",
@@ -1766,52 +1765,128 @@ const CreatableMultiSelect = React.forwardRef(
                 )}
               </div>
               <ChevronRight
-                className="size-5 shrink-0 text-semantic-text-muted opacity-70"
+                className="mt-1 size-5 shrink-0 self-start text-semantic-text-muted opacity-70"
                 aria-hidden
               />
             </div>
           )}
 
-          {/* Dropdown panel */}
+          {/* Dropdown panel: input + limits + presets (Figma: summary row stays above; type-to-create lives here) */}
           {isOpen && (
             <div
-              id={listboxId}
-              role="listbox"
-              className="absolute left-0 top-full z-[9999] mt-1 flex w-full flex-col gap-2.5 overflow-hidden rounded border border-solid border-semantic-border-layout bg-semantic-bg-primary px-4 pb-4 pt-0 shadow-sm animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200"
+              className="absolute left-0 top-full z-[9999] mt-1 flex w-full flex-col overflow-hidden rounded border border-solid border-semantic-border-layout bg-semantic-bg-primary shadow-sm animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200"
             >
-              {showHintsSection && (
-                <div className="-mx-4 flex shrink-0 flex-col border-b border-solid border-semantic-border-layout">
-                  <div className={creatableToneHintRowClassName}>
-                    {createHintText ? (
-                      <span className="text-sm text-semantic-text-muted">
-                        {createHintText}
-                      </span>
-                    ) : (
-                      <span className="min-w-0 flex-1" />
+              <div className="-mx-0 flex shrink-0 flex-col border-b border-solid border-semantic-border-layout">
+                <div className={creatableToneHintRowClassName}>
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={inputValue}
+                    onChange={(e) => {
+                      const raw = e.target.value
+                      const sanitized = sanitizeInput ? sanitizeInput(raw) : raw
+                      if (sanitizeInput) {
+                        if (raw !== sanitized) onInvalidCharacters?.()
+                        else onValidInput?.()
+                      }
+                      setInputValue(
+                        maxLengthPerItem != null
+                          ? sanitized.slice(0, maxLengthPerItem)
+                          : sanitized
+                      )
+                    }}
+                    maxLength={maxLengthPerItem}
+                    onKeyDown={handleKeyDown}
+                    disabled={disabled}
+                    placeholder={panelInputPlaceholder}
+                    className="min-w-0 flex-1 bg-transparent text-base text-semantic-text-primary outline-none placeholder:text-semantic-text-muted"
+                    role="combobox"
+                    aria-expanded={isOpen}
+                    aria-controls={listboxId}
+                    aria-haspopup="listbox"
+                    aria-autocomplete="list"
+                  />
+                  <button
+                    type="button"
+                    disabled={disabled || !canShowEnterAffordance}
+                    onMouseDown={(e) => {
+                      e.preventDefault()
+                    }}
+                    onClick={() => {
+                      if (draftForCreate) addValue(inputValue)
+                    }}
+                    className={cn(
+                      creatableEnterHintKbdClassName,
+                      "shrink-0 enabled:cursor-pointer enabled:hover:bg-semantic-bg-hover disabled:opacity-50"
                     )}
-                    <kbd className={creatableEnterHintKbdClassName}>
-                      Enter \u21B5
-                    </kbd>
-                  </div>
-                  {maxItems != null ? (
-                    <div className="border-t border-solid border-semantic-border-layout bg-semantic-bg-ui px-4 py-2 text-left text-sm text-semantic-text-muted">
-                      Max selections allowed: {maxItems}
-                    </div>
-                  ) : null}
+                  >
+                    Enter \u21B5
+                  </button>
                 </div>
-              )}
+              </div>
 
-              {filteredPresets.length > 0 && (
-                <div className="flex flex-wrap gap-1.5">
+              <div className="flex flex-col gap-2.5 px-4 pb-4 pt-0">
+                {maxItems != null ? (
+                  <p className="m-0 py-1 text-sm text-semantic-text-muted">
+                    Max selections allowed: {maxItems}
+                  </p>
+                ) : null}
+
+                {value.length > 0 ? (
+                  <div
+                    className="flex flex-wrap gap-1.5 border-b border-solid border-semantic-border-layout pb-2.5"
+                    aria-label="Selected values"
+                  >
+                    {value.map((val) => (
+                      <span
+                        key={val}
+                        className="inline-flex max-w-full items-center gap-0.5 rounded bg-semantic-bg-ui py-1 pl-2 pr-0.5 text-sm text-semantic-text-primary"
+                      >
+                        <span className="min-w-0 truncate">
+                          {labelForValue(val, options)}
+                        </span>
+                        <button
+                          type="button"
+                          data-chip-remove
+                          disabled={disabled}
+                          aria-label={\`Remove \${labelForValue(val, options)}\`}
+                          className={cn(
+                            "inline-flex size-6 shrink-0 items-center justify-center rounded text-semantic-text-muted transition-colors",
+                            !disabled &&
+                              "hover:bg-semantic-bg-hover hover:text-semantic-text-primary"
+                          )}
+                          onMouseDown={(e) => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                          }}
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            if (!disabled) removeValue(val)
+                          }}
+                        >
+                          <X className="size-3.5" strokeWidth={2} aria-hidden />
+                        </button>
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+
+                <div
+                  id={listboxId}
+                  role="listbox"
+                  className="flex flex-wrap gap-1.5"
+                >
                   {filteredPresets.map((option) => (
                     <button
                       key={option.value}
                       type="button"
+                      role="option"
+                      aria-selected={false}
                       onMouseDown={(e) => {
                         e.preventDefault()
                         addValue(option.value)
                       }}
-                      className="inline-flex items-center gap-2.5 whitespace-nowrap rounded border-0 bg-semantic-bg-ui px-2 py-1 text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
+                      className="inline-flex items-center gap-2.5 whitespace-nowrap rounded border-0 bg-semantic-bg-ui px-2 py-1 text-left text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
                     >
                       <Plus
                         className="size-2.5 shrink-0 text-semantic-text-muted"
@@ -1822,7 +1897,7 @@ const CreatableMultiSelect = React.forwardRef(
                     </button>
                   ))}
                 </div>
-              )}
+              </div>
             </div>
           )}
         </div>

package/package.json

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