myoperator-mcp 0.2.150 → 0.2.152

package/dist/index.js

@@ -1416,6 +1416,18 @@ export interface CreatableMultiSelectProps
   maxItems?: number
   /** Max character length per item when typing/creating (default: unlimited) */
   maxLengthPerItem?: number
+  /**
+   * When set, the text input is transformed (e.g. strip invalid characters).
+   * If the raw value differs from the sanitized value, \`onInvalidCharacters\` is called.
+   */
+  sanitizeInput?: (raw: string) => string
+  /** Fired when \`sanitizeInput\` removed one or more characters from the raw input. */
+  onInvalidCharacters?: () => void
+  /**
+   * When \`sanitizeInput\` is set, fired on input change if the raw value is already valid.
+   * Use to clear validation errors when the user corrects input.
+   */
+  onValidInput?: () => void
 }
 
 const CreatableMultiSelect = React.forwardRef(
@@ -1431,6 +1443,9 @@ const CreatableMultiSelect = React.forwardRef(
       helperText,
       maxItems,
       maxLengthPerItem,
+      sanitizeInput,
+      onInvalidCharacters,
+      onValidInput,
       ...props
     }: CreatableMultiSelectProps,
     ref: React.Ref<HTMLDivElement>
@@ -1445,7 +1460,8 @@ const CreatableMultiSelect = React.forwardRef(
 
     const addValue = React.useCallback(
       (val: string) => {
-        const trimmed = val.trim()
+        const afterSanitize = sanitizeInput ? sanitizeInput(val) : val
+        const trimmed = afterSanitize.trim()
         if (!trimmed || value.includes(trimmed)) return
         if (maxItems != null && value.length >= maxItems) return
         const toAdd =
@@ -1457,7 +1473,7 @@ const CreatableMultiSelect = React.forwardRef(
           setInputValue("")
         }
       },
-      [value, onValueChange, maxItems, maxLengthPerItem]
+      [value, onValueChange, maxItems, maxLengthPerItem, sanitizeInput]
     )
 
     const removeValue = React.useCallback(
@@ -1558,9 +1574,16 @@ const CreatableMultiSelect = React.forwardRef(
             type="text"
             value={inputValue}
             onChange={(e) => {
-              const v = e.target.value
+              const raw = e.target.value
+              const sanitized = sanitizeInput ? sanitizeInput(raw) : raw
+              if (sanitizeInput) {
+                if (raw !== sanitized) onInvalidCharacters?.()
+                else onValidInput?.()
+              }
               setInputValue(
-                maxLengthPerItem != null ? v.slice(0, maxLengthPerItem) : v
+                maxLengthPerItem != null
+                  ? sanitized.slice(0, maxLengthPerItem)
+                  : sanitized
               )
               if (!isOpen) setIsOpen(true)
             }}
@@ -1687,6 +1710,23 @@ export interface CreatableSelectProps
   disabled?: boolean
   /** Max character length for the value (enforced when open and when creating) */
   maxLength?: number
+  /**
+   * When set, combobox input is transformed (e.g. strip invalid characters).
+   * If the raw value differs from the sanitized value, \`onInvalidCharacters\` is called.
+   */
+  sanitizeInput?: (raw: string) => string
+  /**
+   * Applied after \`sanitizeInput\` on the combobox value (e.g. collapse spaces).
+   * Does not affect invalid-character detection, which compares \`raw\` to \`sanitizeInput(raw)\` only.
+   */
+  normalizeComboboxInput?: (sanitized: string) => string
+  /** Fired when \`sanitizeInput\` removed one or more characters from the raw input. */
+  onInvalidCharacters?: () => void
+  /**
+   * When \`sanitizeInput\` is set, fired on input change if the raw value is already valid
+   * (nothing was stripped). Use to clear validation errors when the user corrects input.
+   */
+  onValidInput?: () => void
 }
 
 const CreatableSelect = React.forwardRef(
@@ -1701,6 +1741,10 @@ const CreatableSelect = React.forwardRef(
       creatableHint,
       disabled = false,
       maxLength,
+      sanitizeInput,
+      normalizeComboboxInput,
+      onInvalidCharacters,
+      onValidInput,
       ...props
     }: CreatableSelectProps,
     ref: React.Ref<HTMLDivElement>
@@ -1749,14 +1793,24 @@ const CreatableSelect = React.forwardRef(
     )
 
     const handleCreate = React.useCallback(() => {
-      const trimmed = search.trim()
+      const afterSanitize = sanitizeInput ? sanitizeInput(search) : search
+      const normalized = normalizeComboboxInput
+        ? normalizeComboboxInput(afterSanitize)
+        : afterSanitize
+      const trimmed = normalized.trim()
       if (trimmed) {
         const value = maxLength != null ? trimmed.slice(0, maxLength) : trimmed
         onValueChange?.(value)
         setOpen(false)
         setSearch("")
       }
-    }, [search, onValueChange, maxLength])
+    }, [
+      search,
+      onValueChange,
+      maxLength,
+      sanitizeInput,
+      normalizeComboboxInput,
+    ])
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
       if (e.key === "Escape") {
@@ -1845,8 +1899,18 @@ const CreatableSelect = React.forwardRef(
               type="text"
               value={search}
               onChange={(e) => {
-                const v = e.target.value
-                setSearch(maxLength != null ? v.slice(0, maxLength) : v)
+                const raw = e.target.value
+                const sanitized = sanitizeInput ? sanitizeInput(raw) : raw
+                if (sanitizeInput) {
+                  if (raw !== sanitized) onInvalidCharacters?.()
+                  else onValidInput?.()
+                }
+                const next = normalizeComboboxInput
+                  ? normalizeComboboxInput(sanitized)
+                  : sanitized
+                setSearch(
+                  maxLength != null ? next.slice(0, maxLength) : next
+                )
               }}
               maxLength={maxLength}
               onKeyDown={handleKeyDown}
@@ -3603,7 +3667,7 @@ const PageHeader = React.forwardRef(
           {/* Content Section: Title + Description */}
           <div className="flex-1 min-w-0">
             <div className="flex h-auto items-center gap-2 sm:min-h-10">
-              <h1 className="m-0 text-lg font-semibold leading-none text-semantic-text-primary truncate">
+              <h1 className="m-0 text-lg font-semibold leading-tight text-semantic-text-primary truncate">
                 {title}
               </h1>
               {badge && (

package/package.json

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