@proef/common-ui 2.2.6 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +6 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/legacy/components/charts/Charts.js +52 -192
- package/dist/esm/legacy/components/charts/Charts.js.map +1 -1
- package/dist/esm/legacy/components/molecules/DataTable/DataTable.js +81 -24
- package/dist/esm/legacy/components/molecules/DataTable/DataTable.js.map +1 -1
- package/dist/esm/legacy/components/organisms/GanttChart/GanttChart.js +7 -4
- package/dist/esm/legacy/components/organisms/GanttChart/GanttChart.js.map +1 -1
- package/dist/esm/v1/components/data/Charts/Charts.js +301 -0
- package/dist/esm/v1/components/data/Charts/Charts.js.map +1 -0
- package/dist/esm/v1/components/overlays/Dialog/Dialog.js +4 -1
- package/dist/esm/v1/components/overlays/Dialog/Dialog.js.map +1 -1
- package/dist/esm/v1/components/tables/Table/ColumnFilter.js +3 -1
- package/dist/esm/v1/components/tables/Table/ColumnFilter.js.map +1 -1
- package/dist/esm/v1/primitives/forms/SelectInput/SelectInput.js +3 -1
- package/dist/esm/v1/primitives/forms/SelectInput/SelectInput.js.map +1 -1
- package/dist/style.components.css +1 -1
- package/dist/style.css +1 -1
- package/dist/style.layered.css +1 -1
- package/dist/theme.css +28 -0
- package/dist/types/legacy/components/charts/Charts.d.ts +14 -11
- package/dist/types/legacy/components/molecules/DataTable/DataTable.d.ts +3 -0
- package/dist/types/legacy/components/organisms/GanttChart/GanttChart.d.ts +15 -1
- package/dist/types/legacy/exports/organisms.d.ts +1 -1
- package/dist/types/v1/components/data/Charts/Charts.d.ts +103 -0
- package/dist/types/v1/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnFilter.js","sources":["../../../../../../src/v1/components/tables/Table/ColumnFilter.tsx"],"sourcesContent":["import React, { useEffect, useId, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon, ListIcon, SlidersIcon } from '../../../foundations/icons/icons'\r\nimport type { TableLabels } from './labels'\r\n\r\n/** Onde o popup abre e quanto pode crescer. */\r\nconst ALTURA = 420\r\nconst LARGURA = 320\r\n\r\n/**\r\n * O filtro de uma coluna: ordenar, procurar, escolher valores, aplicar.\r\n *\r\n * Vive fora do `Table` de propósito. Lá dentro era uma função declarada no\r\n * corpo do componente, logo uma função NOVA a cada render — e o React\r\n * desmontava e remontava o popup a cada tecla escrita e a cada opção marcada.\r\n * Era isso que devolvia a lista de valores ao topo a meio de uma escolha.\r\n *\r\n * Nada se aplica até ao \"Aplicar\". Com a aplicação imediata, cada visto refazia\r\n * a tabela por baixo: mudava-lhe o tamanho e o conteúdo enquanto se escolhia, e\r\n * a lista de onde se estava a escolher encolhia à medida que se escolhia.\r\n *\r\n * `position: fixed` no `<body>`: como filho da célula, o `overflow` da tabela\r\n * cortava-o — e era por isso que a caixa da tabela tinha de perder o tecto de\r\n * altura enquanto um filtro estivesse aberto, o que empurrava a página inteira.\r\n */\r\nexport function ColumnFilter({\r\n labels: L, label, canSort, tipo, valores, seleccionados, intervalo, numero, ordenadaPor, aCarregar, ancora,\r\n onOrdenar, onAplicar, onAplicarDatas, onAplicarNumeros, onLimpar, onFechar,\r\n}: {\r\n labels: TableLabels\r\n label?: string\r\n canSort?: boolean\r\n /** `texto` = lista de valores; `data` = De/Até; `numero` = Mín/Máx, ou a lista (botão no topo). */\r\n tipo: 'texto' | 'data' | 'numero'\r\n /** Valores distintos da coluna, já contados com os outros filtros activos. */\r\n valores: string[]\r\n /** O que está aplicado neste momento — o ponto de partida do rascunho. */\r\n seleccionados: Set<string>\r\n intervalo: { from?: string; to?: string }\r\n /** Intervalo numérico aplicado, quando `tipo` é `numero`. */\r\n numero?: { min?: string; max?: string }\r\n ordenadaPor: 'asc' | 'desc' | null\r\n aCarregar: boolean\r\n /** Rect do botão que abriu isto. */\r\n ancora: DOMRect\r\n onOrdenar?: (dir: 'asc' | 'desc') => void\r\n onAplicar: (vals: Set<string>) => void\r\n onAplicarDatas?: (de: string, ate: string) => void\r\n onAplicarNumeros?: (min: string, max: string) => void\r\n onLimpar: () => void\r\n onFechar: () => void\r\n}) {\r\n const caixa = useRef<HTMLDivElement>(null)\r\n const idMin = useId()\r\n const [busca, setBusca] = useState('')\r\n /** O que está escolhido AGORA, sem ter saído daqui. Só o \"Aplicar\" o leva lá fora. */\r\n const [rascunho, setRascunho] = useState<Set<string>>(() => new Set(seleccionados))\r\n const [de, setDe] = useState(intervalo.from ?? '')\r\n const [ate, setAte] = useState(intervalo.to ?? '')\r\n const [min, setMin] = useState(numero?.min ?? '')\r\n const [max, setMax] = useState(numero?.max ?? '')\r\n /* Numa coluna de números, Mín/Máx ou a lista de valores. Abre na lista, salvo\r\n se já houver Mín/Máx aplicado: quem filtrou por intervalo e volta a abrir\r\n quer ver o intervalo. */\r\n const [modoLista, setModoLista] = useState(tipo === 'numero' && !numero?.min && !numero?.max)\r\n const lista = tipo === 'texto' || (tipo === 'numero' && modoLista)\r\n\r\n const visiveis = useMemo(() => {\r\n const achados = valores.filter(v => v.toLowerCase().includes(busca.toLowerCase()))\r\n // Por valor e não por texto: \"10\" antes de \"2\" numa lista de números é ruído.\r\n if (tipo !== 'numero') return achados\r\n return [...achados].sort((a, b) => {\r\n const na = Number(a), nb = Number(b)\r\n const va = a !== '—' && Number.isFinite(na), vb = b !== '—' && Number.isFinite(nb)\r\n if (va && vb) return na - nb\r\n return va ? -1 : vb ? 1 : a.localeCompare(b)\r\n })\r\n }, [valores, busca, tipo])\r\n const todosVisiveis = visiveis.length > 0 && visiveis.every(v => rascunho.has(v))\r\n const algunsVisiveis = visiveis.some(v => rascunho.has(v)) && !todosVisiveis\r\n\r\n /**\r\n * Marca ou desmarca os valores À VISTA — os que a pesquisa deixou passar.\r\n *\r\n * Com pesquisa activa, \"tudo\" é o que está no ecrã: escolher de uma vez os\r\n * valores que começam por \"Norte\" é o gesto que isto serve, e mexer nos\r\n * outros quarenta por baixo era o contrário do que se pediu.\r\n */\r\n const alternarTodos = () => setRascunho(prev => {\r\n const n = new Set(prev)\r\n if (todosVisiveis) for (const v of visiveis) n.delete(v)\r\n else for (const v of visiveis) n.add(v)\r\n return n\r\n })\r\n\r\n const alternar = (v: string) => setRascunho(prev => {\r\n const n = new Set(prev)\r\n if (n.has(v)) n.delete(v)\r\n else n.add(v)\r\n return n\r\n })\r\n\r\n const mesmoConjunto = (a: Set<string>, b: Set<string>) =>\r\n a.size === b.size && [...a].every(v => b.has(v))\r\n const sujo = tipo === 'data'\r\n ? de !== (intervalo.from ?? '') || ate !== (intervalo.to ?? '')\r\n : tipo === 'numero' && !modoLista\r\n ? min !== (numero?.min ?? '') || max !== (numero?.max ?? '')\r\n : !mesmoConjunto(rascunho, seleccionados)\r\n const temFiltro = seleccionados.size > 0 || !!intervalo.from || !!intervalo.to || !!numero?.min || !!numero?.max\r\n\r\n useEffect(() => {\r\n const fora = (e: MouseEvent) => {\r\n if (caixa.current && !caixa.current.contains(e.target as Node)) onFechar()\r\n }\r\n const tecla = (e: KeyboardEvent) => { if (e.key === 'Escape') onFechar() }\r\n /*\r\n Rolar FORA fecha; rolar DENTRO da lista não.\r\n A caixa está presa a coordenadas do ecrã, logo tem de fechar quando a\r\n página se move por baixo dela — mas a própria lista rola (podem ser\r\n dezenas de valores), e o `capture` também apanha esse.\r\n */\r\n const aoRolar = (e: Event) => {\r\n if (caixa.current && e.target instanceof Node && caixa.current.contains(e.target)) return\r\n onFechar()\r\n }\r\n document.addEventListener('mousedown', fora)\r\n document.addEventListener('keydown', tecla)\r\n window.addEventListener('scroll', aoRolar, true)\r\n window.addEventListener('resize', onFechar)\r\n return () => {\r\n document.removeEventListener('mousedown', fora)\r\n document.removeEventListener('keydown', tecla)\r\n window.removeEventListener('scroll', aoRolar, true)\r\n window.removeEventListener('resize', onFechar)\r\n }\r\n }, [onFechar])\r\n\r\n /* Troca Mín/Máx ↔ lista. Vai na linha que já existe (a do \"Mínimo\", ou a da\r\n pesquisa) e não numa só para ele: uma linha inteira para um botão pequeno\r\n era espaço vazio à esquerda. */\r\n const botaoModo = tipo === 'numero' && (\r\n <button\r\n type=\"button\"\r\n onClick={e => { e.preventDefault(); setModoLista(m => !m) }}\r\n title={modoLista ? L.showRange : L.showList}\r\n className=\"inline-flex items-center gap-1 text-[9px] font-black uppercase tracking-widest text-slate-400 hover:text-proef-blue flex-shrink-0 whitespace-nowrap\"\r\n >\r\n {modoLista ? <SlidersIcon size={10} /> : <ListIcon size={10} />}\r\n {modoLista ? L.showRange : L.showList}\r\n </button>\r\n )\r\n\r\n // Abre para cima quando não há espaço por baixo — nas colunas da direita e\r\n // com a janela baixa, o que ficava de fora eram os botões de aplicar.\r\n const paraCima = window.innerHeight - ancora.bottom < ALTURA && ancora.top > ALTURA\r\n\r\n return createPortal(\r\n <div\r\n ref={caixa}\r\n style={{\r\n position: 'fixed',\r\n left: Math.max(4, Math.min(ancora.left, window.innerWidth - LARGURA - 4)),\r\n ...(paraCima ? { bottom: window.innerHeight - ancora.top + 2 } : { top: ancora.bottom + 2 }),\r\n width: LARGURA,\r\n maxHeight: ALTURA,\r\n }}\r\n className=\"v1-reset z-[250] flex flex-col overflow-hidden rounded-lg bg-white border border-slate-200 shadow-lg\"\r\n >\r\n {label && (\r\n <div className=\"px-3 pt-2.5 pb-2 border-b border-slate-100 flex-shrink-0\">\r\n <span className=\"text-[9px] font-black uppercase tracking-widest text-proef-blue\">{label}</span>\r\n </div>\r\n )}\r\n {aCarregar && (\r\n <div className=\"px-3 py-1.5 bg-amber-50 border-b border-amber-100 flex items-center gap-1.5 text-micro text-amber-700 flex-shrink-0\">\r\n <span aria-hidden className=\"inline-block h-2.5 w-2.5 animate-spin rounded-full border-2 border-current border-t-transparent \" />\r\n {L.loadingOptions}\r\n </div>\r\n )}\r\n {canSort && onOrdenar && (\r\n <div className=\"border-b border-slate-100 p-1.5 space-y-0.5 flex-shrink-0\">\r\n <button\r\n onClick={() => onOrdenar('asc')}\r\n className={`w-full flex items-center gap-2 rounded-md px-2.5 py-1.5 text-caption font-semibold text-left hover:bg-slate-50 transition-colors ${ordenadaPor === 'asc' ? 'text-proef-blue bg-slate-50' : 'text-slate-600'}`}\r\n >\r\n <ChevronUpIcon size={11} /> {tipo === 'data' ? L.sortDateAsc : tipo === 'numero' ? L.sortNumAsc : L.sortAsc}\r\n </button>\r\n <button\r\n onClick={() => onOrdenar('desc')}\r\n className={`w-full flex items-center gap-2 rounded-md px-2.5 py-1.5 text-caption font-semibold text-left hover:bg-slate-50 transition-colors ${ordenadaPor === 'desc' ? 'text-proef-blue bg-slate-50' : 'text-slate-600'}`}\r\n >\r\n <ChevronDownIcon size={11} /> {tipo === 'data' ? L.sortDateDesc : tipo === 'numero' ? L.sortNumDesc : L.sortDesc}\r\n </button>\r\n </div>\r\n )}\r\n\r\n {tipo === 'data' ? (\r\n <div className=\"p-3 space-y-2\">\r\n <label className=\"block\">\r\n <span className=\"text-[9px] font-black uppercase tracking-widest text-slate-400\">{L.dateFrom}</span>\r\n <input\r\n type=\"date\" value={de} onChange={e => setDe(e.target.value)}\r\n onKeyDown={e => { if (e.key === 'Enter') onAplicarDatas?.(de, ate) }}\r\n className=\"w-full mt-0.5 rounded-md bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue\"\r\n />\r\n </label>\r\n <label className=\"block\">\r\n <span className=\"text-[9px] font-black uppercase tracking-widest text-slate-400\">{L.dateTo}</span>\r\n <input\r\n type=\"date\" value={ate} onChange={e => setAte(e.target.value)}\r\n onKeyDown={e => { if (e.key === 'Enter') onAplicarDatas?.(de, ate) }}\r\n className=\"w-full mt-0.5 rounded-md bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue\"\r\n />\r\n </label>\r\n </div>\r\n ) : !lista ? (\r\n /* Mín/Máx em vez da lista: numa coluna de dinheiro ou de contagem há\r\n tantos valores distintos quantas as linhas, e ninguém procura \"10.04\".\r\n Vazio de um dos lados vale \"sem limite desse lado\". */\r\n <div className=\"p-3 space-y-2\">\r\n {/* O botão da lista fica FORA da etiqueta: dentro dela, era o botão\r\n (e não a caixa) que recebia o nome \"Mínimo\", e a caixa ficava sem\r\n nome nenhum para os leitores de ecrã. */}\r\n <div>\r\n <span className=\"flex items-center justify-between\">\r\n <label htmlFor={idMin} className=\"text-[9px] font-black uppercase tracking-widest text-slate-400\">{L.min}</label>\r\n {botaoModo}\r\n </span>\r\n <input\r\n id={idMin}\r\n type=\"number\" value={min} onChange={e => setMin(e.target.value)}\r\n onKeyDown={e => { if (e.key === 'Enter') onAplicarNumeros?.(min, max) }}\r\n className=\"w-full mt-0.5 rounded-md bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue\"\r\n />\r\n </div>\r\n <label className=\"block\">\r\n <span className=\"text-[9px] font-black uppercase tracking-widest text-slate-400\">{L.max}</span>\r\n <input\r\n type=\"number\" value={max} onChange={e => setMax(e.target.value)}\r\n onKeyDown={e => { if (e.key === 'Enter') onAplicarNumeros?.(min, max) }}\r\n className=\"w-full mt-0.5 rounded-md bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue\"\r\n />\r\n </label>\r\n </div>\r\n ) : (\r\n <>\r\n <div className=\"p-1.5 flex-shrink-0 flex items-center gap-2\">\r\n <input\r\n autoFocus type=\"text\" value={busca} onChange={e => setBusca(e.target.value)} placeholder={L.search}\r\n className=\"flex-1 min-w-0 rounded-md bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue\"\r\n />\r\n {botaoModo && <span className=\"pr-1.5\">{botaoModo}</span>}\r\n </div>\r\n {/* \"Tudo\" à cabeça da lista, como no Excel: marcar tudo e tirar o que\r\n não se quer é mais rápido do que marcar quarenta à mão. */}\r\n {visiveis.length > 0 && (\r\n <button\r\n onClick={alternarTodos}\r\n className=\"flex items-center gap-2 px-3 py-1.5 border-y border-slate-100 hover:bg-slate-50 text-left flex-shrink-0\"\r\n >\r\n <div className={`w-3.5 h-3.5 flex items-center justify-center rounded-sm border flex-shrink-0 transition-colors ${\r\n todosVisiveis ? 'bg-primary border-primary'\r\n : algunsVisiveis ? 'bg-primary/30 border-primary'\r\n : 'border-slate-300'\r\n }`}>\r\n {todosVisiveis && <CheckIcon size={9} strokeWidth={3} className=\"text-white\" />}\r\n </div>\r\n <span className=\"text-caption font-semibold text-slate-600\">\r\n {busca ? L.selectAllFound(visiveis.length) : L.selectAll}\r\n </span>\r\n </button>\r\n )}\r\n <div className=\"flex-1 overflow-y-auto p-1.5 space-y-0.5 min-h-0\">\r\n {visiveis.length === 0\r\n ? <p className=\"text-caption text-slate-400 text-center py-3\">{L.noResults}</p>\r\n : visiveis.map(v => {\r\n const escolhido = rascunho.has(v)\r\n return (\r\n <button key={v} onClick={() => alternar(v)} className=\"w-full flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-slate-50 text-left\">\r\n <div className={`w-3.5 h-3.5 flex items-center justify-center rounded-sm border flex-shrink-0 transition-colors ${escolhido ? 'bg-primary border-primary' : 'border-slate-300'}`}>\r\n {escolhido && <CheckIcon size={9} strokeWidth={3} className=\"text-white\" />}\r\n </div>\r\n <span className=\"text-xs text-slate-700 whitespace-normal break-words leading-snug\">{v}</span>\r\n </button>\r\n )\r\n })}\r\n </div>\r\n </>\r\n )}\r\n\r\n {/* Aplicar/Cancelar fora da zona que rola, sempre à vista: são eles que\r\n dizem que ainda não aconteceu nada. */}\r\n <div className=\"flex items-center gap-1.5 p-1.5 border-t border-slate-100 flex-shrink-0 bg-white\">\r\n <button\r\n onClick={() => {\r\n if (tipo === 'data') onAplicarDatas?.(de, ate)\r\n else if (tipo === 'numero' && !modoLista) onAplicarNumeros?.(min, max)\r\n else onAplicar(rascunho)\r\n }}\r\n disabled={!sujo}\r\n className=\"flex-1 text-micro font-black uppercase tracking-wider text-white bg-primary hover:bg-primary/90 rounded-md py-1.5 disabled:opacity-30\"\r\n >\r\n {L.apply}\r\n </button>\r\n <button\r\n onClick={onFechar}\r\n className=\"text-micro font-black uppercase tracking-wider text-slate-500 hover:text-slate-700 rounded-md px-2 py-1.5\"\r\n >\r\n {L.cancel}\r\n </button>\r\n {temFiltro && (\r\n <button\r\n onClick={onLimpar}\r\n className=\"text-micro font-black uppercase tracking-wider text-red-400 hover:text-red-500 rounded-md px-2 py-1.5\"\r\n >\r\n {L.clearFilter}\r\n </button>\r\n )}\r\n </div>\r\n </div>,\r\n document.body,\r\n )\r\n}\r\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ColumnFilter.js","sources":["../../../../../../src/v1/components/tables/Table/ColumnFilter.tsx"],"sourcesContent":["import React, { useEffect, useId, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon, ListIcon, SlidersIcon } from '../../../foundations/icons/icons'\r\nimport type { TableLabels } from './labels'\r\nimport { useDialogContainer } from '../../overlays/Dialog/Dialog'\r\n\r\n/** Onde o popup abre e quanto pode crescer. */\r\nconst ALTURA = 420\r\nconst LARGURA = 320\r\n\r\n/**\r\n * O filtro de uma coluna: ordenar, procurar, escolher valores, aplicar.\r\n *\r\n * Vive fora do `Table` de propósito. Lá dentro era uma função declarada no\r\n * corpo do componente, logo uma função NOVA a cada render — e o React\r\n * desmontava e remontava o popup a cada tecla escrita e a cada opção marcada.\r\n * Era isso que devolvia a lista de valores ao topo a meio de uma escolha.\r\n *\r\n * Nada se aplica até ao \"Aplicar\". Com a aplicação imediata, cada visto refazia\r\n * a tabela por baixo: mudava-lhe o tamanho e o conteúdo enquanto se escolhia, e\r\n * a lista de onde se estava a escolher encolhia à medida que se escolhia.\r\n *\r\n * `position: fixed` no `<body>`: como filho da célula, o `overflow` da tabela\r\n * cortava-o — e era por isso que a caixa da tabela tinha de perder o tecto de\r\n * altura enquanto um filtro estivesse aberto, o que empurrava a página inteira.\r\n */\r\nexport function ColumnFilter({\r\n labels: L, label, canSort, tipo, valores, seleccionados, intervalo, numero, ordenadaPor, aCarregar, ancora,\r\n onOrdenar, onAplicar, onAplicarDatas, onAplicarNumeros, onLimpar, onFechar,\r\n}: {\r\n labels: TableLabels\r\n label?: string\r\n canSort?: boolean\r\n /** `texto` = lista de valores; `data` = De/Até; `numero` = Mín/Máx, ou a lista (botão no topo). */\r\n tipo: 'texto' | 'data' | 'numero'\r\n /** Valores distintos da coluna, já contados com os outros filtros activos. */\r\n valores: string[]\r\n /** O que está aplicado neste momento — o ponto de partida do rascunho. */\r\n seleccionados: Set<string>\r\n intervalo: { from?: string; to?: string }\r\n /** Intervalo numérico aplicado, quando `tipo` é `numero`. */\r\n numero?: { min?: string; max?: string }\r\n ordenadaPor: 'asc' | 'desc' | null\r\n aCarregar: boolean\r\n /** Rect do botão que abriu isto. */\r\n ancora: DOMRect\r\n onOrdenar?: (dir: 'asc' | 'desc') => void\r\n onAplicar: (vals: Set<string>) => void\r\n onAplicarDatas?: (de: string, ate: string) => void\r\n onAplicarNumeros?: (min: string, max: string) => void\r\n onLimpar: () => void\r\n onFechar: () => void\r\n}) {\r\n const caixa = useRef<HTMLDivElement>(null)\r\n // Numa tabela dentro de um Dialog, o filtro abre na janela (o resto da página está inert).\r\n const dialogContainer = useDialogContainer()\r\n const idMin = useId()\r\n const [busca, setBusca] = useState('')\r\n /** O que está escolhido AGORA, sem ter saído daqui. Só o \"Aplicar\" o leva lá fora. */\r\n const [rascunho, setRascunho] = useState<Set<string>>(() => new Set(seleccionados))\r\n const [de, setDe] = useState(intervalo.from ?? '')\r\n const [ate, setAte] = useState(intervalo.to ?? '')\r\n const [min, setMin] = useState(numero?.min ?? '')\r\n const [max, setMax] = useState(numero?.max ?? '')\r\n /* Numa coluna de números, Mín/Máx ou a lista de valores. Abre na lista, salvo\r\n se já houver Mín/Máx aplicado: quem filtrou por intervalo e volta a abrir\r\n quer ver o intervalo. */\r\n const [modoLista, setModoLista] = useState(tipo === 'numero' && !numero?.min && !numero?.max)\r\n const lista = tipo === 'texto' || (tipo === 'numero' && modoLista)\r\n\r\n const visiveis = useMemo(() => {\r\n const achados = valores.filter(v => v.toLowerCase().includes(busca.toLowerCase()))\r\n // Por valor e não por texto: \"10\" antes de \"2\" numa lista de números é ruído.\r\n if (tipo !== 'numero') return achados\r\n return [...achados].sort((a, b) => {\r\n const na = Number(a), nb = Number(b)\r\n const va = a !== '—' && Number.isFinite(na), vb = b !== '—' && Number.isFinite(nb)\r\n if (va && vb) return na - nb\r\n return va ? -1 : vb ? 1 : a.localeCompare(b)\r\n })\r\n }, [valores, busca, tipo])\r\n const todosVisiveis = visiveis.length > 0 && visiveis.every(v => rascunho.has(v))\r\n const algunsVisiveis = visiveis.some(v => rascunho.has(v)) && !todosVisiveis\r\n\r\n /**\r\n * Marca ou desmarca os valores À VISTA — os que a pesquisa deixou passar.\r\n *\r\n * Com pesquisa activa, \"tudo\" é o que está no ecrã: escolher de uma vez os\r\n * valores que começam por \"Norte\" é o gesto que isto serve, e mexer nos\r\n * outros quarenta por baixo era o contrário do que se pediu.\r\n */\r\n const alternarTodos = () => setRascunho(prev => {\r\n const n = new Set(prev)\r\n if (todosVisiveis) for (const v of visiveis) n.delete(v)\r\n else for (const v of visiveis) n.add(v)\r\n return n\r\n })\r\n\r\n const alternar = (v: string) => setRascunho(prev => {\r\n const n = new Set(prev)\r\n if (n.has(v)) n.delete(v)\r\n else n.add(v)\r\n return n\r\n })\r\n\r\n const mesmoConjunto = (a: Set<string>, b: Set<string>) =>\r\n a.size === b.size && [...a].every(v => b.has(v))\r\n const sujo = tipo === 'data'\r\n ? de !== (intervalo.from ?? '') || ate !== (intervalo.to ?? '')\r\n : tipo === 'numero' && !modoLista\r\n ? min !== (numero?.min ?? '') || max !== (numero?.max ?? '')\r\n : !mesmoConjunto(rascunho, seleccionados)\r\n const temFiltro = seleccionados.size > 0 || !!intervalo.from || !!intervalo.to || !!numero?.min || !!numero?.max\r\n\r\n useEffect(() => {\r\n const fora = (e: MouseEvent) => {\r\n if (caixa.current && !caixa.current.contains(e.target as Node)) onFechar()\r\n }\r\n const tecla = (e: KeyboardEvent) => { if (e.key === 'Escape') onFechar() }\r\n /*\r\n Rolar FORA fecha; rolar DENTRO da lista não.\r\n A caixa está presa a coordenadas do ecrã, logo tem de fechar quando a\r\n página se move por baixo dela — mas a própria lista rola (podem ser\r\n dezenas de valores), e o `capture` também apanha esse.\r\n */\r\n const aoRolar = (e: Event) => {\r\n if (caixa.current && e.target instanceof Node && caixa.current.contains(e.target)) return\r\n onFechar()\r\n }\r\n document.addEventListener('mousedown', fora)\r\n document.addEventListener('keydown', tecla)\r\n window.addEventListener('scroll', aoRolar, true)\r\n window.addEventListener('resize', onFechar)\r\n return () => {\r\n document.removeEventListener('mousedown', fora)\r\n document.removeEventListener('keydown', tecla)\r\n window.removeEventListener('scroll', aoRolar, true)\r\n window.removeEventListener('resize', onFechar)\r\n }\r\n }, [onFechar])\r\n\r\n /* Troca Mín/Máx ↔ lista. Vai na linha que já existe (a do \"Mínimo\", ou a da\r\n pesquisa) e não numa só para ele: uma linha inteira para um botão pequeno\r\n era espaço vazio à esquerda. */\r\n const botaoModo = tipo === 'numero' && (\r\n <button\r\n type=\"button\"\r\n onClick={e => { e.preventDefault(); setModoLista(m => !m) }}\r\n title={modoLista ? L.showRange : L.showList}\r\n className=\"inline-flex items-center gap-1 text-[9px] font-black uppercase tracking-widest text-slate-400 hover:text-proef-blue flex-shrink-0 whitespace-nowrap\"\r\n >\r\n {modoLista ? <SlidersIcon size={10} /> : <ListIcon size={10} />}\r\n {modoLista ? L.showRange : L.showList}\r\n </button>\r\n )\r\n\r\n // Abre para cima quando não há espaço por baixo — nas colunas da direita e\r\n // com a janela baixa, o que ficava de fora eram os botões de aplicar.\r\n const paraCima = window.innerHeight - ancora.bottom < ALTURA && ancora.top > ALTURA\r\n\r\n return createPortal(\r\n <div\r\n ref={caixa}\r\n style={{\r\n position: 'fixed',\r\n left: Math.max(4, Math.min(ancora.left, window.innerWidth - LARGURA - 4)),\r\n ...(paraCima ? { bottom: window.innerHeight - ancora.top + 2 } : { top: ancora.bottom + 2 }),\r\n width: LARGURA,\r\n maxHeight: ALTURA,\r\n }}\r\n className=\"v1-reset z-[250] flex flex-col overflow-hidden rounded-lg bg-white border border-slate-200 shadow-lg\"\r\n >\r\n {label && (\r\n <div className=\"px-3 pt-2.5 pb-2 border-b border-slate-100 flex-shrink-0\">\r\n <span className=\"text-[9px] font-black uppercase tracking-widest text-proef-blue\">{label}</span>\r\n </div>\r\n )}\r\n {aCarregar && (\r\n <div className=\"px-3 py-1.5 bg-amber-50 border-b border-amber-100 flex items-center gap-1.5 text-micro text-amber-700 flex-shrink-0\">\r\n <span aria-hidden className=\"inline-block h-2.5 w-2.5 animate-spin rounded-full border-2 border-current border-t-transparent \" />\r\n {L.loadingOptions}\r\n </div>\r\n )}\r\n {canSort && onOrdenar && (\r\n <div className=\"border-b border-slate-100 p-1.5 space-y-0.5 flex-shrink-0\">\r\n <button\r\n onClick={() => onOrdenar('asc')}\r\n className={`w-full flex items-center gap-2 rounded-md px-2.5 py-1.5 text-caption font-semibold text-left hover:bg-slate-50 transition-colors ${ordenadaPor === 'asc' ? 'text-proef-blue bg-slate-50' : 'text-slate-600'}`}\r\n >\r\n <ChevronUpIcon size={11} /> {tipo === 'data' ? L.sortDateAsc : tipo === 'numero' ? L.sortNumAsc : L.sortAsc}\r\n </button>\r\n <button\r\n onClick={() => onOrdenar('desc')}\r\n className={`w-full flex items-center gap-2 rounded-md px-2.5 py-1.5 text-caption font-semibold text-left hover:bg-slate-50 transition-colors ${ordenadaPor === 'desc' ? 'text-proef-blue bg-slate-50' : 'text-slate-600'}`}\r\n >\r\n <ChevronDownIcon size={11} /> {tipo === 'data' ? L.sortDateDesc : tipo === 'numero' ? L.sortNumDesc : L.sortDesc}\r\n </button>\r\n </div>\r\n )}\r\n\r\n {tipo === 'data' ? (\r\n <div className=\"p-3 space-y-2\">\r\n <label className=\"block\">\r\n <span className=\"text-[9px] font-black uppercase tracking-widest text-slate-400\">{L.dateFrom}</span>\r\n <input\r\n type=\"date\" value={de} onChange={e => setDe(e.target.value)}\r\n onKeyDown={e => { if (e.key === 'Enter') onAplicarDatas?.(de, ate) }}\r\n className=\"w-full mt-0.5 rounded-md bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue\"\r\n />\r\n </label>\r\n <label className=\"block\">\r\n <span className=\"text-[9px] font-black uppercase tracking-widest text-slate-400\">{L.dateTo}</span>\r\n <input\r\n type=\"date\" value={ate} onChange={e => setAte(e.target.value)}\r\n onKeyDown={e => { if (e.key === 'Enter') onAplicarDatas?.(de, ate) }}\r\n className=\"w-full mt-0.5 rounded-md bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue\"\r\n />\r\n </label>\r\n </div>\r\n ) : !lista ? (\r\n /* Mín/Máx em vez da lista: numa coluna de dinheiro ou de contagem há\r\n tantos valores distintos quantas as linhas, e ninguém procura \"10.04\".\r\n Vazio de um dos lados vale \"sem limite desse lado\". */\r\n <div className=\"p-3 space-y-2\">\r\n {/* O botão da lista fica FORA da etiqueta: dentro dela, era o botão\r\n (e não a caixa) que recebia o nome \"Mínimo\", e a caixa ficava sem\r\n nome nenhum para os leitores de ecrã. */}\r\n <div>\r\n <span className=\"flex items-center justify-between\">\r\n <label htmlFor={idMin} className=\"text-[9px] font-black uppercase tracking-widest text-slate-400\">{L.min}</label>\r\n {botaoModo}\r\n </span>\r\n <input\r\n id={idMin}\r\n type=\"number\" value={min} onChange={e => setMin(e.target.value)}\r\n onKeyDown={e => { if (e.key === 'Enter') onAplicarNumeros?.(min, max) }}\r\n className=\"w-full mt-0.5 rounded-md bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue\"\r\n />\r\n </div>\r\n <label className=\"block\">\r\n <span className=\"text-[9px] font-black uppercase tracking-widest text-slate-400\">{L.max}</span>\r\n <input\r\n type=\"number\" value={max} onChange={e => setMax(e.target.value)}\r\n onKeyDown={e => { if (e.key === 'Enter') onAplicarNumeros?.(min, max) }}\r\n className=\"w-full mt-0.5 rounded-md bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue\"\r\n />\r\n </label>\r\n </div>\r\n ) : (\r\n <>\r\n <div className=\"p-1.5 flex-shrink-0 flex items-center gap-2\">\r\n <input\r\n autoFocus type=\"text\" value={busca} onChange={e => setBusca(e.target.value)} placeholder={L.search}\r\n className=\"flex-1 min-w-0 rounded-md bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue\"\r\n />\r\n {botaoModo && <span className=\"pr-1.5\">{botaoModo}</span>}\r\n </div>\r\n {/* \"Tudo\" à cabeça da lista, como no Excel: marcar tudo e tirar o que\r\n não se quer é mais rápido do que marcar quarenta à mão. */}\r\n {visiveis.length > 0 && (\r\n <button\r\n onClick={alternarTodos}\r\n className=\"flex items-center gap-2 px-3 py-1.5 border-y border-slate-100 hover:bg-slate-50 text-left flex-shrink-0\"\r\n >\r\n <div className={`w-3.5 h-3.5 flex items-center justify-center rounded-sm border flex-shrink-0 transition-colors ${\r\n todosVisiveis ? 'bg-primary border-primary'\r\n : algunsVisiveis ? 'bg-primary/30 border-primary'\r\n : 'border-slate-300'\r\n }`}>\r\n {todosVisiveis && <CheckIcon size={9} strokeWidth={3} className=\"text-white\" />}\r\n </div>\r\n <span className=\"text-caption font-semibold text-slate-600\">\r\n {busca ? L.selectAllFound(visiveis.length) : L.selectAll}\r\n </span>\r\n </button>\r\n )}\r\n <div className=\"flex-1 overflow-y-auto p-1.5 space-y-0.5 min-h-0\">\r\n {visiveis.length === 0\r\n ? <p className=\"text-caption text-slate-400 text-center py-3\">{L.noResults}</p>\r\n : visiveis.map(v => {\r\n const escolhido = rascunho.has(v)\r\n return (\r\n <button key={v} onClick={() => alternar(v)} className=\"w-full flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-slate-50 text-left\">\r\n <div className={`w-3.5 h-3.5 flex items-center justify-center rounded-sm border flex-shrink-0 transition-colors ${escolhido ? 'bg-primary border-primary' : 'border-slate-300'}`}>\r\n {escolhido && <CheckIcon size={9} strokeWidth={3} className=\"text-white\" />}\r\n </div>\r\n <span className=\"text-xs text-slate-700 whitespace-normal break-words leading-snug\">{v}</span>\r\n </button>\r\n )\r\n })}\r\n </div>\r\n </>\r\n )}\r\n\r\n {/* Aplicar/Cancelar fora da zona que rola, sempre à vista: são eles que\r\n dizem que ainda não aconteceu nada. */}\r\n <div className=\"flex items-center gap-1.5 p-1.5 border-t border-slate-100 flex-shrink-0 bg-white\">\r\n <button\r\n onClick={() => {\r\n if (tipo === 'data') onAplicarDatas?.(de, ate)\r\n else if (tipo === 'numero' && !modoLista) onAplicarNumeros?.(min, max)\r\n else onAplicar(rascunho)\r\n }}\r\n disabled={!sujo}\r\n className=\"flex-1 text-micro font-black uppercase tracking-wider text-white bg-primary hover:bg-primary/90 rounded-md py-1.5 disabled:opacity-30\"\r\n >\r\n {L.apply}\r\n </button>\r\n <button\r\n onClick={onFechar}\r\n className=\"text-micro font-black uppercase tracking-wider text-slate-500 hover:text-slate-700 rounded-md px-2 py-1.5\"\r\n >\r\n {L.cancel}\r\n </button>\r\n {temFiltro && (\r\n <button\r\n onClick={onLimpar}\r\n className=\"text-micro font-black uppercase tracking-wider text-red-400 hover:text-red-500 rounded-md px-2 py-1.5\"\r\n >\r\n {L.clearFilter}\r\n </button>\r\n )}\r\n </div>\r\n </div>,\r\n dialogContainer ?? document.body,\r\n )\r\n}\r\n"],"names":[],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ import { createPortal } from "react-dom";
|
|
|
4
4
|
import { ChevronDownIcon } from "../../../foundations/icons/icons.js";
|
|
5
5
|
import { useField, fieldBoxClasses } from "../field.js";
|
|
6
6
|
import { useFloatingPanel, PANEL_CLASS, itemClass } from "../../../capabilities/overlay/useFloatingPanel.js";
|
|
7
|
+
import { useDialogContainer } from "../../../components/overlays/Dialog/Dialog.js";
|
|
7
8
|
const DEFAULT_SELECT_LABELS = {
|
|
8
9
|
search: "Search…",
|
|
9
10
|
searchIn: "Search in {label}",
|
|
@@ -49,6 +50,7 @@ const SelectInput = forwardRef(function SelectInput2({
|
|
|
49
50
|
const L = { ...DEFAULT_SELECT_LABELS, ...labels };
|
|
50
51
|
const field = useField();
|
|
51
52
|
const p = useFloatingPanel("left");
|
|
53
|
+
const dialogContainer = useDialogContainer();
|
|
52
54
|
useImperativeHandle(ref, () => p.triggerRef.current);
|
|
53
55
|
const [own, setOwn] = useState(defaultValue);
|
|
54
56
|
const value = controlled ?? own;
|
|
@@ -195,7 +197,7 @@ const SelectInput = forwardRef(function SelectInput2({
|
|
|
195
197
|
})
|
|
196
198
|
] })
|
|
197
199
|
] }),
|
|
198
|
-
document.body
|
|
200
|
+
dialogContainer ?? document.body
|
|
199
201
|
)
|
|
200
202
|
] });
|
|
201
203
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInput.js","sources":["../../../../../../src/v1/primitives/forms/SelectInput/SelectInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { ChevronDownIcon } from '../../../foundations/icons/icons'\r\nimport { fieldBoxClasses, useField } from '../field'\r\nimport { PANEL_CLASS, itemClass, useFloatingPanel } from '../../../capabilities/overlay/useFloatingPanel'\r\n\r\nexport interface SelectOption {\r\n value: string\r\n label: string\r\n /** Texto pequeno por baixo do rótulo, na lista. */\r\n description?: string\r\n disabled?: boolean\r\n}\r\n\r\nexport interface SelectInputLabels {\r\n /** Texto da caixa de pesquisa. */\r\n search: string\r\n /** Nome da caixa de pesquisa para leitores de ecrã; \"{label}\" é o nome do campo. */\r\n searchIn: string\r\n noResults: string\r\n}\r\n\r\nexport const DEFAULT_SELECT_LABELS: SelectInputLabels = {\r\n search: 'Search…',\r\n searchIn: 'Search in {label}',\r\n noResults: 'No results',\r\n}\r\n\r\nexport interface SelectInputProps {\r\n /** A opção escolhida (controlado). `''` = nenhuma. */\r\n value?: string\r\n defaultValue?: string\r\n /** As opções: texto simples (valor = rótulo) ou `{ value, label, description }`. */\r\n options?: readonly (string | SelectOption)[]\r\n /** Em alternativa a `options`: `<option>` como num `<select>` (compatível com o uso antigo). */\r\n children?: React.ReactNode\r\n /** Recebe o valor escolhido. */\r\n onValueChange?: (value: string) => void\r\n /** Como no `<select>`: `e.target.value` é o valor escolhido. */\r\n onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void\r\n /** Texto do botão sem nada escolhido; com `placeholderOption`, também a primeira opção (vazia). */\r\n placeholder?: string\r\n /** O `placeholder` é também uma opção (vazia) na lista. Por omissão sim, como no `<select>`. */\r\n placeholderOption?: boolean\r\n /** Primeira opção vazia para desfazer a escolha (ex: \"Todas\"). */\r\n emptyOption?: string\r\n /** Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 opções. */\r\n searchable?: boolean\r\n disabled?: boolean\r\n required?: boolean\r\n /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */\r\n invalid?: boolean\r\n id?: string\r\n /** Nome no formulário (vai num campo escondido). */\r\n name?: string\r\n 'aria-label'?: string\r\n 'aria-labelledby'?: string\r\n /** `field` (por omissão): campo. `pill`: etiqueta arredondada (ex: o estado numa linha de tabela). A lista é a mesma. */\r\n variant?: 'field' | 'pill'\r\n /** Cores da etiqueta (`pill`), normalmente conforme o valor escolhido; pode trazer contorno (ex: `border border-dashed`). */\r\n pillClassName?: string\r\n /** 38px em vez da altura dos controlos (para alinhar com campos de formulários mais altos). */\r\n tall?: boolean\r\n labels?: Partial<SelectInputLabels>\r\n /** Classes da caixa à volta (ex: a largura). */\r\n className?: string\r\n}\r\n\r\nconst Check = () => (\r\n <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n <path d=\"M20 6 9 17l-5-5\" />\r\n </svg>\r\n)\r\n\r\n/** As `<option>` dos filhos como opções (aceita também `<optgroup>`, achatado). */\r\nfunction optionsFromChildren(children: React.ReactNode): SelectOption[] {\r\n const out: SelectOption[] = []\r\n React.Children.forEach(children, (child) => {\r\n if (!React.isValidElement(child)) return\r\n const props = child.props as { value?: unknown; children?: React.ReactNode; disabled?: boolean }\r\n if (child.type === 'optgroup') return out.push(...optionsFromChildren(props.children))\r\n if (child.type !== 'option') return\r\n const text = React.Children.toArray(props.children).join('')\r\n out.push({ value: props.value !== undefined ? String(props.value) : text, label: text, disabled: props.disabled })\r\n })\r\n return out\r\n}\r\n\r\n/**\r\n * Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o\r\n * tema nem o aspeto dos portais). A opção escolhida tem ✓; com muitas opções há pesquisa.\r\n *\r\n * Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha; sem pesquisa, uma letra salta para a opção.\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à etiqueta\r\n * automaticamente. Clicar não chega a uma linha clicável por baixo (ex: numa tabela).\r\n *\r\n * Usa-se como um `<select>`: `<option>` como filhos e `onChange` com `e.target.value`; `placeholder`\r\n * acrescenta uma primeira opção vazia.\r\n */\r\nconst SelectInput = forwardRef<HTMLButtonElement, SelectInputProps>(function SelectInput(\r\n {\r\n value: controlled,\r\n defaultValue = '',\r\n options,\r\n children,\r\n onValueChange,\r\n onChange,\r\n placeholder,\r\n placeholderOption = true,\r\n emptyOption,\r\n searchable,\r\n disabled = false,\r\n required,\r\n invalid,\r\n id,\r\n name,\r\n 'aria-label': ariaLabel,\r\n 'aria-labelledby': ariaLabelledBy,\r\n variant = 'field',\r\n pillClassName = 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',\r\n tall = false,\r\n labels,\r\n className = '',\r\n },\r\n ref,\r\n) {\r\n const L = { ...DEFAULT_SELECT_LABELS, ...labels }\r\n const field = useField()\r\n const p = useFloatingPanel('left')\r\n useImperativeHandle(ref, () => p.triggerRef.current as HTMLButtonElement)\r\n\r\n const [own, setOwn] = useState(defaultValue)\r\n const value = controlled ?? own\r\n\r\n const list = useMemo<SelectOption[]>(() => {\r\n const base = options ? options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o)) : optionsFromChildren(children)\r\n const empty = emptyOption ?? (placeholder !== undefined && placeholderOption ? placeholder : undefined)\r\n return empty !== undefined && !base.some((o) => o.value === '') ? [{ value: '', label: empty }, ...base] : base\r\n }, [options, children, emptyOption, placeholder, placeholderOption])\r\n\r\n const [query, setQuery] = useState('')\r\n const withSearch = searchable ?? list.length > 10\r\n const visible = useMemo(() => {\r\n const q = query.trim().toLowerCase()\r\n return q ? list.filter((o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)) : list\r\n }, [list, query])\r\n const [active, setActive] = useState(0)\r\n const searchRef = useRef<HTMLInputElement>(null)\r\n const chosen = list.find((o) => o.value === value)\r\n\r\n // Ao abrir: limpa a pesquisa e põe o teclado na opção escolhida.\r\n useEffect(() => {\r\n if (!p.open) return\r\n setQuery('')\r\n setActive(Math.max(0, list.findIndex((o) => o.value === value)))\r\n if (withSearch) setTimeout(() => searchRef.current?.focus(), 0)\r\n }, [p.open]) // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n // O item ativo fica sempre à vista ao navegar com o teclado.\r\n useEffect(() => {\r\n if (p.open) p.panelRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`)?.scrollIntoView?.({ block: 'nearest' })\r\n }, [active, p.open, p.panelRef])\r\n\r\n const choose = (o: SelectOption) => {\r\n if (o.disabled) return\r\n p.close()\r\n p.triggerRef.current?.focus()\r\n if (o.value === value) return\r\n if (controlled === undefined) setOwn(o.value)\r\n onValueChange?.(o.value)\r\n if (onChange) {\r\n const target = { value: o.value, name } as HTMLSelectElement\r\n onChange({ target, currentTarget: target } as React.ChangeEvent<HTMLSelectElement>)\r\n }\r\n }\r\n\r\n const keys = (e: React.KeyboardEvent) => {\r\n if (!p.open) {\r\n if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\r\n e.preventDefault()\r\n p.setOpen(true)\r\n }\r\n return\r\n }\r\n if (e.key === 'Escape') {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n p.close()\r\n p.triggerRef.current?.focus()\r\n } else if (e.key === 'ArrowDown') {\r\n e.preventDefault()\r\n setActive((i) => Math.min(visible.length - 1, i + 1))\r\n } else if (e.key === 'ArrowUp') {\r\n e.preventDefault()\r\n setActive((i) => Math.max(0, i - 1))\r\n } else if (e.key === 'Home') {\r\n e.preventDefault()\r\n setActive(0)\r\n } else if (e.key === 'End') {\r\n e.preventDefault()\r\n setActive(visible.length - 1)\r\n } else if (e.key === 'Enter') {\r\n e.preventDefault()\r\n const o = visible[active]\r\n if (o) choose(o)\r\n } else if (e.key === 'Tab') {\r\n p.close()\r\n } else if (!withSearch && e.key.length === 1) {\r\n // Sem pesquisa: a letra salta para a primeira opção que começa por ela.\r\n const i = visible.findIndex((o) => o.label.toLowerCase().startsWith(e.key.toLowerCase()))\r\n if (i >= 0) setActive(i)\r\n }\r\n }\r\n\r\n const pill = variant === 'pill'\r\n const showsPlaceholder = !chosen || (chosen.value === '' && placeholder !== undefined && emptyOption === undefined)\r\n\r\n return (\r\n <div className={`relative min-w-0 ${className}`} onKeyDown={keys}>\r\n <button\r\n ref={p.triggerRef}\r\n id={id ?? field.id}\r\n type=\"button\"\r\n disabled={disabled}\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={p.open}\r\n aria-label={ariaLabel}\r\n aria-labelledby={ariaLabelledBy}\r\n aria-invalid={invalid || undefined}\r\n aria-required={(required ?? field.required) || undefined}\r\n onClick={(e) => {\r\n // Dentro de uma linha clicável (tabelas), abrir a lista não abre a linha.\r\n e.stopPropagation()\r\n p.setOpen((o) => !o)\r\n }}\r\n className={\r\n pill\r\n ? `inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${pillClassName}`\r\n : `flex w-full min-w-0 cursor-pointer appearance-none items-center justify-between gap-2 text-left ${tall ? 'h-[38px]' : 'h-control'} ${fieldBoxClasses}`\r\n }\r\n >\r\n <span className={`truncate ${showsPlaceholder && !pill ? 'text-muted-foreground/70' : ''}`}>\r\n {showsPlaceholder ? (placeholder ?? chosen?.label ?? '') : chosen?.label}\r\n </span>\r\n <ChevronDownIcon size={14} className={`shrink-0 ${pill ? 'opacity-60' : 'text-muted-foreground'}`} />\r\n </button>\r\n {name && <input type=\"hidden\" name={name} value={value} />}\r\n {p.open &&\r\n createPortal(\r\n <div ref={p.panelRef} style={p.style} className={PANEL_CLASS} onClick={(e) => e.stopPropagation()} onKeyDown={keys}>\r\n {withSearch && (\r\n <div className=\"px-2 pt-0.5 pb-1\">\r\n <input\r\n ref={searchRef}\r\n type=\"search\"\r\n value={query}\r\n onChange={(e) => {\r\n setQuery(e.target.value)\r\n setActive(0)\r\n }}\r\n placeholder={L.search}\r\n aria-label={L.searchIn.replace('{label}', ariaLabel ?? '')}\r\n className=\"h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100\"\r\n />\r\n </div>\r\n )}\r\n <ul role=\"listbox\" aria-label={ariaLabel}>\r\n {visible.length === 0 && <li className=\"px-3 py-2 text-slate-400\">{L.noResults}</li>}\r\n {visible.map((o, i) => {\r\n const selected = o.value === value\r\n return (\r\n <li\r\n key={o.value || '__empty'}\r\n role=\"option\"\r\n aria-selected={selected}\r\n aria-disabled={o.disabled || undefined}\r\n data-index={i}\r\n onMouseEnter={() => setActive(i)}\r\n onClick={() => choose(o)}\r\n className={`${itemClass(i === active)} ${o.disabled ? 'cursor-not-allowed opacity-50' : ''}`}\r\n >\r\n <span className=\"min-w-0 flex-1\">\r\n <span className={`block truncate ${selected ? 'font-semibold' : ''} ${o.value === '' ? 'text-slate-500 dark:text-slate-400' : ''}`}>{o.label}</span>\r\n {o.description && <span className=\"block truncate text-[11px] text-slate-500 dark:text-slate-400\">{o.description}</span>}\r\n </span>\r\n <span className=\"w-4 shrink-0\">{selected && <Check />}</span>\r\n </li>\r\n )\r\n })}\r\n </ul>\r\n </div>,\r\n document.body,\r\n )}\r\n </div>\r\n )\r\n})\r\n\r\nexport default SelectInput\r\nexport { SelectInput }\r\n"],"names":["SelectInput"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectInput.js","sources":["../../../../../../src/v1/primitives/forms/SelectInput/SelectInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { ChevronDownIcon } from '../../../foundations/icons/icons'\r\nimport { fieldBoxClasses, useField } from '../field'\r\nimport { PANEL_CLASS, itemClass, useFloatingPanel } from '../../../capabilities/overlay/useFloatingPanel'\r\nimport { useDialogContainer } from '../../../components/overlays/Dialog/Dialog'\r\n\r\nexport interface SelectOption {\r\n value: string\r\n label: string\r\n /** Texto pequeno por baixo do rótulo, na lista. */\r\n description?: string\r\n disabled?: boolean\r\n}\r\n\r\nexport interface SelectInputLabels {\r\n /** Texto da caixa de pesquisa. */\r\n search: string\r\n /** Nome da caixa de pesquisa para leitores de ecrã; \"{label}\" é o nome do campo. */\r\n searchIn: string\r\n noResults: string\r\n}\r\n\r\nexport const DEFAULT_SELECT_LABELS: SelectInputLabels = {\r\n search: 'Search…',\r\n searchIn: 'Search in {label}',\r\n noResults: 'No results',\r\n}\r\n\r\nexport interface SelectInputProps {\r\n /** A opção escolhida (controlado). `''` = nenhuma. */\r\n value?: string\r\n defaultValue?: string\r\n /** As opções: texto simples (valor = rótulo) ou `{ value, label, description }`. */\r\n options?: readonly (string | SelectOption)[]\r\n /** Em alternativa a `options`: `<option>` como num `<select>` (compatível com o uso antigo). */\r\n children?: React.ReactNode\r\n /** Recebe o valor escolhido. */\r\n onValueChange?: (value: string) => void\r\n /** Como no `<select>`: `e.target.value` é o valor escolhido. */\r\n onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void\r\n /** Texto do botão sem nada escolhido; com `placeholderOption`, também a primeira opção (vazia). */\r\n placeholder?: string\r\n /** O `placeholder` é também uma opção (vazia) na lista. Por omissão sim, como no `<select>`. */\r\n placeholderOption?: boolean\r\n /** Primeira opção vazia para desfazer a escolha (ex: \"Todas\"). */\r\n emptyOption?: string\r\n /** Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 opções. */\r\n searchable?: boolean\r\n disabled?: boolean\r\n required?: boolean\r\n /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */\r\n invalid?: boolean\r\n id?: string\r\n /** Nome no formulário (vai num campo escondido). */\r\n name?: string\r\n 'aria-label'?: string\r\n 'aria-labelledby'?: string\r\n /** `field` (por omissão): campo. `pill`: etiqueta arredondada (ex: o estado numa linha de tabela). A lista é a mesma. */\r\n variant?: 'field' | 'pill'\r\n /** Cores da etiqueta (`pill`), normalmente conforme o valor escolhido; pode trazer contorno (ex: `border border-dashed`). */\r\n pillClassName?: string\r\n /** 38px em vez da altura dos controlos (para alinhar com campos de formulários mais altos). */\r\n tall?: boolean\r\n labels?: Partial<SelectInputLabels>\r\n /** Classes da caixa à volta (ex: a largura). */\r\n className?: string\r\n}\r\n\r\nconst Check = () => (\r\n <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n <path d=\"M20 6 9 17l-5-5\" />\r\n </svg>\r\n)\r\n\r\n/** As `<option>` dos filhos como opções (aceita também `<optgroup>`, achatado). */\r\nfunction optionsFromChildren(children: React.ReactNode): SelectOption[] {\r\n const out: SelectOption[] = []\r\n React.Children.forEach(children, (child) => {\r\n if (!React.isValidElement(child)) return\r\n const props = child.props as { value?: unknown; children?: React.ReactNode; disabled?: boolean }\r\n if (child.type === 'optgroup') return out.push(...optionsFromChildren(props.children))\r\n if (child.type !== 'option') return\r\n const text = React.Children.toArray(props.children).join('')\r\n out.push({ value: props.value !== undefined ? String(props.value) : text, label: text, disabled: props.disabled })\r\n })\r\n return out\r\n}\r\n\r\n/**\r\n * Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o\r\n * tema nem o aspeto dos portais). A opção escolhida tem ✓; com muitas opções há pesquisa.\r\n *\r\n * Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha; sem pesquisa, uma letra salta para a opção.\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à etiqueta\r\n * automaticamente. Clicar não chega a uma linha clicável por baixo (ex: numa tabela).\r\n *\r\n * Usa-se como um `<select>`: `<option>` como filhos e `onChange` com `e.target.value`; `placeholder`\r\n * acrescenta uma primeira opção vazia.\r\n */\r\nconst SelectInput = forwardRef<HTMLButtonElement, SelectInputProps>(function SelectInput(\r\n {\r\n value: controlled,\r\n defaultValue = '',\r\n options,\r\n children,\r\n onValueChange,\r\n onChange,\r\n placeholder,\r\n placeholderOption = true,\r\n emptyOption,\r\n searchable,\r\n disabled = false,\r\n required,\r\n invalid,\r\n id,\r\n name,\r\n 'aria-label': ariaLabel,\r\n 'aria-labelledby': ariaLabelledBy,\r\n variant = 'field',\r\n pillClassName = 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',\r\n tall = false,\r\n labels,\r\n className = '',\r\n },\r\n ref,\r\n) {\r\n const L = { ...DEFAULT_SELECT_LABELS, ...labels }\r\n const field = useField()\r\n const p = useFloatingPanel('left')\r\n // Dentro de um Dialog a lista abre na janela: no body ficava por baixo dela (z-200)\r\n // e o resto da página está inert — a lista abria mas não se via nem se clicava.\r\n const dialogContainer = useDialogContainer()\r\n useImperativeHandle(ref, () => p.triggerRef.current as HTMLButtonElement)\r\n\r\n const [own, setOwn] = useState(defaultValue)\r\n const value = controlled ?? own\r\n\r\n const list = useMemo<SelectOption[]>(() => {\r\n const base = options ? options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o)) : optionsFromChildren(children)\r\n const empty = emptyOption ?? (placeholder !== undefined && placeholderOption ? placeholder : undefined)\r\n return empty !== undefined && !base.some((o) => o.value === '') ? [{ value: '', label: empty }, ...base] : base\r\n }, [options, children, emptyOption, placeholder, placeholderOption])\r\n\r\n const [query, setQuery] = useState('')\r\n const withSearch = searchable ?? list.length > 10\r\n const visible = useMemo(() => {\r\n const q = query.trim().toLowerCase()\r\n return q ? list.filter((o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)) : list\r\n }, [list, query])\r\n const [active, setActive] = useState(0)\r\n const searchRef = useRef<HTMLInputElement>(null)\r\n const chosen = list.find((o) => o.value === value)\r\n\r\n // Ao abrir: limpa a pesquisa e põe o teclado na opção escolhida.\r\n useEffect(() => {\r\n if (!p.open) return\r\n setQuery('')\r\n setActive(Math.max(0, list.findIndex((o) => o.value === value)))\r\n if (withSearch) setTimeout(() => searchRef.current?.focus(), 0)\r\n }, [p.open]) // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n // O item ativo fica sempre à vista ao navegar com o teclado.\r\n useEffect(() => {\r\n if (p.open) p.panelRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`)?.scrollIntoView?.({ block: 'nearest' })\r\n }, [active, p.open, p.panelRef])\r\n\r\n const choose = (o: SelectOption) => {\r\n if (o.disabled) return\r\n p.close()\r\n p.triggerRef.current?.focus()\r\n if (o.value === value) return\r\n if (controlled === undefined) setOwn(o.value)\r\n onValueChange?.(o.value)\r\n if (onChange) {\r\n const target = { value: o.value, name } as HTMLSelectElement\r\n onChange({ target, currentTarget: target } as React.ChangeEvent<HTMLSelectElement>)\r\n }\r\n }\r\n\r\n const keys = (e: React.KeyboardEvent) => {\r\n if (!p.open) {\r\n if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\r\n e.preventDefault()\r\n p.setOpen(true)\r\n }\r\n return\r\n }\r\n if (e.key === 'Escape') {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n p.close()\r\n p.triggerRef.current?.focus()\r\n } else if (e.key === 'ArrowDown') {\r\n e.preventDefault()\r\n setActive((i) => Math.min(visible.length - 1, i + 1))\r\n } else if (e.key === 'ArrowUp') {\r\n e.preventDefault()\r\n setActive((i) => Math.max(0, i - 1))\r\n } else if (e.key === 'Home') {\r\n e.preventDefault()\r\n setActive(0)\r\n } else if (e.key === 'End') {\r\n e.preventDefault()\r\n setActive(visible.length - 1)\r\n } else if (e.key === 'Enter') {\r\n e.preventDefault()\r\n const o = visible[active]\r\n if (o) choose(o)\r\n } else if (e.key === 'Tab') {\r\n p.close()\r\n } else if (!withSearch && e.key.length === 1) {\r\n // Sem pesquisa: a letra salta para a primeira opção que começa por ela.\r\n const i = visible.findIndex((o) => o.label.toLowerCase().startsWith(e.key.toLowerCase()))\r\n if (i >= 0) setActive(i)\r\n }\r\n }\r\n\r\n const pill = variant === 'pill'\r\n const showsPlaceholder = !chosen || (chosen.value === '' && placeholder !== undefined && emptyOption === undefined)\r\n\r\n return (\r\n <div className={`relative min-w-0 ${className}`} onKeyDown={keys}>\r\n <button\r\n ref={p.triggerRef}\r\n id={id ?? field.id}\r\n type=\"button\"\r\n disabled={disabled}\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={p.open}\r\n aria-label={ariaLabel}\r\n aria-labelledby={ariaLabelledBy}\r\n aria-invalid={invalid || undefined}\r\n aria-required={(required ?? field.required) || undefined}\r\n onClick={(e) => {\r\n // Dentro de uma linha clicável (tabelas), abrir a lista não abre a linha.\r\n e.stopPropagation()\r\n p.setOpen((o) => !o)\r\n }}\r\n className={\r\n pill\r\n ? `inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${pillClassName}`\r\n : `flex w-full min-w-0 cursor-pointer appearance-none items-center justify-between gap-2 text-left ${tall ? 'h-[38px]' : 'h-control'} ${fieldBoxClasses}`\r\n }\r\n >\r\n <span className={`truncate ${showsPlaceholder && !pill ? 'text-muted-foreground/70' : ''}`}>\r\n {showsPlaceholder ? (placeholder ?? chosen?.label ?? '') : chosen?.label}\r\n </span>\r\n <ChevronDownIcon size={14} className={`shrink-0 ${pill ? 'opacity-60' : 'text-muted-foreground'}`} />\r\n </button>\r\n {name && <input type=\"hidden\" name={name} value={value} />}\r\n {p.open &&\r\n createPortal(\r\n <div ref={p.panelRef} style={p.style} className={PANEL_CLASS} onClick={(e) => e.stopPropagation()} onKeyDown={keys}>\r\n {withSearch && (\r\n <div className=\"px-2 pt-0.5 pb-1\">\r\n <input\r\n ref={searchRef}\r\n type=\"search\"\r\n value={query}\r\n onChange={(e) => {\r\n setQuery(e.target.value)\r\n setActive(0)\r\n }}\r\n placeholder={L.search}\r\n aria-label={L.searchIn.replace('{label}', ariaLabel ?? '')}\r\n className=\"h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100\"\r\n />\r\n </div>\r\n )}\r\n <ul role=\"listbox\" aria-label={ariaLabel}>\r\n {visible.length === 0 && <li className=\"px-3 py-2 text-slate-400\">{L.noResults}</li>}\r\n {visible.map((o, i) => {\r\n const selected = o.value === value\r\n return (\r\n <li\r\n key={o.value || '__empty'}\r\n role=\"option\"\r\n aria-selected={selected}\r\n aria-disabled={o.disabled || undefined}\r\n data-index={i}\r\n onMouseEnter={() => setActive(i)}\r\n onClick={() => choose(o)}\r\n className={`${itemClass(i === active)} ${o.disabled ? 'cursor-not-allowed opacity-50' : ''}`}\r\n >\r\n <span className=\"min-w-0 flex-1\">\r\n <span className={`block truncate ${selected ? 'font-semibold' : ''} ${o.value === '' ? 'text-slate-500 dark:text-slate-400' : ''}`}>{o.label}</span>\r\n {o.description && <span className=\"block truncate text-[11px] text-slate-500 dark:text-slate-400\">{o.description}</span>}\r\n </span>\r\n <span className=\"w-4 shrink-0\">{selected && <Check />}</span>\r\n </li>\r\n )\r\n })}\r\n </ul>\r\n </div>,\r\n dialogContainer ?? document.body,\r\n )}\r\n </div>\r\n )\r\n})\r\n\r\nexport default SelectInput\r\nexport { SelectInput }\r\n"],"names":["SelectInput"],"mappings":"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"}
|