@softize/opus 8.8.0 → 8.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "8.8.0",
+  "version": "8.8.2",
   "description": "End-to-end action protocol for TypeScript. Single package with subpath exports (core + adapters).",
   "license": "MIT",
   "type": "module",

package/src/ui/components/primitives/select.tsx

@@ -305,13 +305,27 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
    * onde não existe seleção persistente pra exibir.
    */
   const triggerText = selectedOption?.label ?? ''
-  /** `triggerLabel` pode ser JSX (a barra do composer mostra a chave curta), e `value` de
-   *  input só aceita texto — então ele vai num `<span>` por cima, com o input `sr-only`
-   *  guardando o `id` e o rótulo textual pro leitor de tela. */
-  const customTrigger = !props.multiple && selectedOption?.triggerLabel !== undefined
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover
+      open={open}
+      onOpenChange={(v) => {
+        // Fechar devolve o foco pro gatilho, e o gatilho abre AO RECEBER FOCO — sem
+        // guarda, o seletor reabre sozinho ("abre, fecha e abre de novo").
+        //
+        // A guarda vale UM FRAME, não até ser consumida. Fechar clicando noutro lugar da
+        // página não devolve o foco pra cá, então uma trava que espera esse retorno ficaria
+        // armada pra sempre e engoliria a PRÓXIMA abertura por teclado — trocando um
+        // defeito visível por um que só aparece pra quem navega por Tab.
+        if (!v) {
+          closingRef.current = true
+          requestAnimationFrame(() => {
+            closingRef.current = false
+          })
+        }
+        setOpen(v)
+      }}
+    >
       <div ref={rootRef} data-slot="select" className={cn(ghost ? 'min-w-0' : 'min-w-40', className)}>
         <CommandPrimitive data-slot="select-command" shouldFilter={canSearch && onSearch === undefined} className="overflow-visible">
           <PopoverAnchor asChild>
@@ -361,13 +375,16 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                     </span>
                   )
                 })}
-              {/* Input somente-leitura em vez de `<span>`: ele carrega o `id`, e é o que
-                  faz o `htmlFor` do Label achar um campo (clicar no rótulo foca e abre).
-                  Um `<div>` não é rotulável, e um `<button>` não pode conter os botões de
-                  remover chip do modo múltiplo. */}
-              {customTrigger && (
-                <span data-slot="select-trigger-label" className="min-w-0 truncate text-sm">
-                  {selectedOption?.triggerLabel}
+              {/* O rótulo é SEMPRE um `<span>`. Quando ele morava no `value` de um input,
+                  o texto rolava pro fim ao ganhar foco (o browser leva o cursor pro final)
+                  e o começo do título sumia — num campo estreito, a pessoa via o meio de
+                  uma frase. `<span>` trunca com reticências, que é o certo. */}
+              {/* No MÚLTIPLO os chips ocupam o lugar do rótulo — mas quando não há nenhum,
+                  o gatilho ficaria em branco (o input que carregava o placeholder virou
+                  invisível). Campo mudo é pior que campo vazio: não diz nem o que é. */}
+              {(!props.multiple || selectedValues.length === 0) && (
+                <span data-slot="select-trigger-label" className={cn('min-w-0 flex-1 truncate text-left text-sm', selectedOption === undefined && 'text-muted-foreground')}>
+                  {props.multiple ? placeholder : (selectedOption?.triggerLabel ?? selectedOption?.label ?? placeholder)}
                 </span>
               )}
               <input
@@ -404,10 +421,7 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                   }
                 }}
                 placeholder={props.multiple && selectedValues.length > 0 ? '' : placeholder}
-                className={cn(
-                  'min-w-0 flex-1 cursor-pointer bg-transparent text-sm caret-transparent outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed',
-                  customTrigger && 'sr-only',
-                )}
+                className="sr-only"
               />
               {clearable === true && selectedValues.length > 0 && disabled !== true && (
                 <button
@@ -461,11 +475,16 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
               'pointer-events-auto overflow-hidden p-0',
               ghost ? 'w-auto min-w-56 max-w-80' : 'w-(--radix-popover-trigger-width) min-w-40',
             )}
-            // Com busca, o foco VAI pra caixa dentro da lista: abrir e já poder digitar é
-            // o ponto do padrão. Sem busca, segura o foco no gatilho (nada pra digitar).
-            onOpenAutoFocus={(e) => {
-              if (!canSearch) e.preventDefault()
-            }}
+            /*
+             * O foco ao abrir é SEMPRE nosso — o Radix nunca mexe.
+             *
+             * Deixá-lo agir com busca parecia certo (ele focaria o primeiro elemento
+             * focável, que é a caixa), mas ele roda DEPOIS do nosso efeito e movia o foco
+             * pro contêiner do conteúdo: a busca ganhava o cursor e o perdia em seguida,
+             * que é exatamente o "ganha foco e some" relatado. Com dois donos do foco, o
+             * último a escrever vence — e quem é o último depende da ordem de montagem.
+             */
+            onOpenAutoFocus={(e) => e.preventDefault()}
             onCloseAutoFocus={(e) => e.preventDefault()}
             onInteractOutside={(e) => {
               const target = e.target as HTMLElement