@softize/opus 8.7.0 → 8.8.0

package/package.json

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

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

@@ -2,6 +2,7 @@ import * as React from "react"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { DropdownMenu as MenuPrimitive } from "radix-ui"
 
+import { useDismissOnIframeFocus } from "../../lib/dismiss-on-iframe.ts"
 import { cn } from '../../lib/cn.ts'
 
 function Menu({
@@ -34,9 +35,13 @@ function MenuContent({
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.Content>) {
+  // Mesma razão do Popover: clique dentro de iframe não chega aqui fora.
+  const ref = React.useRef<HTMLDivElement>(null)
+  useDismissOnIframeFocus(ref)
   return (
     <MenuPrimitive.Portal>
       <MenuPrimitive.Content
+        ref={ref}
         data-slot="menu-content"
         sideOffset={sideOffset}
         className={cn(

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

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Popover as PopoverPrimitive } from "radix-ui"
 
+import { useDismissOnIframeFocus } from "../../lib/dismiss-on-iframe.ts"
 import { cn } from '../../lib/cn.ts'
 
 function Popover({
@@ -21,9 +22,14 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  // Clique dentro de um iframe não chega no documento de fora — sem isto, o popover fica
+  // pendurado sobre o conteúdo. Na cabine, o preview É um iframe.
+  const ref = React.useRef<HTMLDivElement>(null)
+  useDismissOnIframeFocus(ref)
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
+        ref={ref}
         data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}

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

@@ -217,9 +217,24 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
   const inputRef = React.useRef<HTMLInputElement>(null)
   /** Fechando por Esc: o foco volta pro gatilho, e focar abre. Marca pra ignorar UM foco. */
   const closingRef = React.useRef(false)
+  const searchRef = React.useRef<HTMLInputElement>(null)
 
   const selectedOption = options.find((o) => o.value === singleValue)
 
+  /**
+   * Abrir com busca FOCA a caixa — abrir e já poder digitar é o ponto do padrão.
+   *
+   * Explícito e não pelo `autoFocus`: aqui dependeria de o Radix (que move o foco ao
+   * abrir o popover) e o cmdk concordarem sobre quem manda, e o resultado varia com a
+   * ordem de montagem. `requestAnimationFrame` porque o conteúdo do popover entra no DOM
+   * depois deste efeito.
+   */
+  React.useEffect(() => {
+    if (!open || !canSearch) return
+    const r = requestAnimationFrame(() => searchRef.current?.focus())
+    return () => cancelAnimationFrame(r)
+  }, [open, canSearch])
+
   /**
    * O termo de busca zera ao FECHAR.
    *
@@ -467,8 +482,8 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
               <div data-slot="select-search-row" className="flex items-center gap-2 border-b px-3">
                 <SearchIcon className="size-4 shrink-0 opacity-50" aria-hidden="true" />
                 <CommandPrimitive.Input
+                  ref={searchRef}
                   data-slot="select-search"
-                  autoFocus
                   value={query}
                   onValueChange={setQuery}
                   placeholder={searchPlaceholder ?? 'Buscar…'}

package/src/ui/lib/dismiss-on-iframe.ts

@@ -0,0 +1,36 @@
+import * as React from 'react'
+
+/**
+ * Fecha a camada flutuante quando o clique cai DENTRO de um iframe.
+ *
+ * O navegador entrega o clique ao documento do iframe, e o documento de fora nunca fica
+ * sabendo. Como toda dispensa por "clique fora" escuta eventos do documento de fora, o
+ * popover/menu simplesmente NÃO fecha — fica pendurado sobre o conteúdo, e a pessoa
+ * precisa achar um pedaço de página livre pra clicar.
+ *
+ * Não é caso de borda pra nós: a cabine embute o preview num iframe, então metade da tela
+ * é justamente a área onde clicar não fecha nada.
+ *
+ * O sinal utilizável é o `blur` da JANELA somado a "quem está com o foco agora é um
+ * iframe". Trocar de aba ou de aplicativo também dispara `blur`, mas ali o elemento ativo
+ * não é iframe — e fechar o menu de quem só foi ver outra janela seria pior que o defeito.
+ *
+ * A dispensa sai como um Escape sintético em vez de uma chamada direta: quem renderiza o
+ * conteúdo (Popover, Menu) não tem acesso ao estado de aberto — ele é de quem usa. Escape
+ * é o canal que a própria biblioteca já escuta pra dispensar, então funciona sem obrigar
+ * cada call site a passar um `onClose`.
+ */
+export function useDismissOnIframeFocus(ref: React.RefObject<HTMLElement | null>): void {
+  React.useEffect(() => {
+    const onBlur = (): void => {
+      // `requestAnimationFrame`: no instante do `blur` o `activeElement` ainda pode ser o
+      // anterior; o navegador atualiza no tick seguinte.
+      requestAnimationFrame(() => {
+        if (document.activeElement?.tagName !== 'IFRAME') return
+        ref.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      })
+    }
+    window.addEventListener('blur', onBlur)
+    return () => window.removeEventListener('blur', onBlur)
+  }, [ref])
+}