@beweco/aurora-ui 1.0.0-beta.124 → 1.0.0-beta.125
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/assets/css/styles.css +1 -1
- package/dist/index.cjs.js +202 -8
- package/dist/index.esm.js +202 -8
- package/dist/types/components/autocomplete/AutoComplete.d.ts +3 -2
- package/dist/types/components/autocomplete/AutoComplete.d.ts.map +1 -1
- package/dist/types/components/autocomplete/AutoComplete.types.d.ts +44 -0
- package/dist/types/components/autocomplete/AutoComplete.types.d.ts.map +1 -1
- package/dist/types/components/autocomplete/index.d.ts +1 -1
- package/dist/types/components/autocomplete/index.d.ts.map +1 -1
- package/dist/types/components/select/Select.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -2010,6 +2010,10 @@ function withCollectionItemIds(children) {
|
|
|
2010
2010
|
return Object.keys(patch).length > 0 ? $8WNJc$react.cloneElement(element, patch) : element;
|
|
2011
2011
|
}
|
|
2012
2012
|
|
|
2013
|
+
/** Traducciones por defecto en español (mismo literal que la ✕ de la fachada `Input`). */
|
|
2014
|
+
const DEFAULT_TRANSLATIONS$e = {
|
|
2015
|
+
clearButtonAriaLabel: "Limpiar",
|
|
2016
|
+
};
|
|
2013
2017
|
/**
|
|
2014
2018
|
* Clases del wrapper del icono: lo mete DENTRO del recuadro del campo.
|
|
2015
2019
|
*
|
|
@@ -2218,6 +2222,74 @@ const ICON_INSET_CLASS = {
|
|
|
2218
2222
|
* contra 364).
|
|
2219
2223
|
*/
|
|
2220
2224
|
const ICON_UNDERLINED_INSET_CLASS = "pe-1";
|
|
2225
|
+
/*
|
|
2226
|
+
* TECH-2459 · ronda 2 — La ✕ de limpiar, que v2 traía de fábrica y la migración perdió.
|
|
2227
|
+
*
|
|
2228
|
+
* ## Qué hacía v2 (medido en el paquete, no deducido)
|
|
2229
|
+
*
|
|
2230
|
+
* El `Autocomplete` de v2 pintaba DOS botones redondos de 32px al final del campo, dentro del
|
|
2231
|
+
* borde: primero la ✕ y después el chevron (`dist/chunk-RXKUWVQZ.mjs`, el `endContent` del
|
|
2232
|
+
* `Input`: `[endContent || <Button {...getClearButtonProps()}>{clearIcon}</Button>,
|
|
2233
|
+
* selectorIcon && <Button {...getSelectorButtonProps()}>]`). Ambos con
|
|
2234
|
+
* `size="sm" variant="light" radius="full" isIconOnly` (defaults documentados en
|
|
2235
|
+
* `dist/use-autocomplete.d.ts:72-80`) y glifo de 16px (`clearButton: "text-medium"` en el `tv`
|
|
2236
|
+
* del tema, `@heroui/theme@2.4.15/dist/components/autocomplete.js`).
|
|
2237
|
+
*
|
|
2238
|
+
* De ahí sale la única medida que este fichero necesita: el hueco entre los DOS glifos era de
|
|
2239
|
+
* 16px (dos botones de 32px pegados, cada uno con 8px de aire alrededor de su glifo de 16px). La
|
|
2240
|
+
* posición absoluta del chevron ya la fijó la migración (`.combo-box__trigger` → `pe-2`), así que
|
|
2241
|
+
* lo que se conserva aquí es ese hueco relativo, no una coordenada.
|
|
2242
|
+
*
|
|
2243
|
+
* La ✕ va en FLUJO y sus vecinos son `absolute`, así que la fórmula tiene que descontar el relleno
|
|
2244
|
+
* lateral del campo: un `absolute end-0` se posiciona desde el canto interior del borde (ignora el
|
|
2245
|
+
* `px-*`), mientras que la ✕ arranca DESPUÉS de ese relleno.
|
|
2246
|
+
*
|
|
2247
|
+
* me = sangría del extremo + 16 (hueco v2) + 16 (glifo del extremo) − relleno lateral del campo
|
|
2248
|
+
*
|
|
2249
|
+
* | | sangría | relleno | me |
|
|
2250
|
+
* | chevron, sm | 8 | 8 | me-8 |
|
|
2251
|
+
* | chevron, md/lg | 8 | 12 | me-7 |
|
|
2252
|
+
* | chevron, underlined | 8 | 4 | me-9 |
|
|
2253
|
+
* | icono (cualquiera) | 8/12/4 | 8/12/4 | me-8 | ← la sangría del icono ES el relleno
|
|
2254
|
+
*
|
|
2255
|
+
* Verificado en el navegador, no calculado: con el ajuste, el canto izquierdo del glifo del extremo
|
|
2256
|
+
* y el derecho del glifo de la ✕ quedan a 16px en los cinco campos de la story `Clearable` (antes,
|
|
2257
|
+
* con `me-10`/`me-11`, salían a 28px porque la fórmula se había olvidado del relleno y del borde).
|
|
2258
|
+
*
|
|
2259
|
+
* ## Dos desviaciones DELIBERADAS de v2, las dos por precedente de la fachada `Input`
|
|
2260
|
+
*
|
|
2261
|
+
* 1 · **v2 solo la mostraba al pasar el ratón** en pantallas ≥640px. El `tv` del tema lo dice
|
|
2262
|
+
* literal: `clearButton: ["opacity-0", …, "data-[visible=true]:opacity-100",
|
|
2263
|
+
* "sm:data-[visible=true]:opacity-0",
|
|
2264
|
+
* "sm:group-data-[hover=true]:data-[visible=true]:opacity-100"]` — o sea visible con valor en
|
|
2265
|
+
* móvil, y en escritorio solo con el puntero encima del campo. Aquí se muestra siempre que
|
|
2266
|
+
* haya algo que limpiar, como ya hace `Input.tsx` (`showClear`), porque un botón que solo
|
|
2267
|
+
* aparece al pasar el ratón es indescubrible con teclado y fue exactamente lo que QA reportó
|
|
2268
|
+
* como "desaparecida".
|
|
2269
|
+
* 2 · **v2 la tenía siempre en el DOM** (invisible, `excludeFromTabOrder`, reservando su hueco);
|
|
2270
|
+
* aquí se monta solo cuando hay valor. Consecuencia: el hueco que se lleva la ✕ (44px medidos:
|
|
2271
|
+
* la zona de texto acaba a 58px del borde con ✕ y a 14px sin ella) aparece con el valor en vez
|
|
2272
|
+
* de estar reservado siempre, y la ✕ SÍ es alcanzable con teclado (con nombre accesible
|
|
2273
|
+
* traducido, que v2 no tenía: no hay un solo `aria-label` en todo `chunk-NJJHRP6D.mjs`).
|
|
2274
|
+
*/
|
|
2275
|
+
const CLEAR_GAP_WITH_ICON_CLASS = "me-8";
|
|
2276
|
+
const CLEAR_GAP_WITH_TRIGGER_CLASS = {
|
|
2277
|
+
sm: "me-8",
|
|
2278
|
+
md: "me-7",
|
|
2279
|
+
lg: "me-7",
|
|
2280
|
+
};
|
|
2281
|
+
const CLEAR_GAP_WITH_TRIGGER_UNDERLINED_CLASS = "me-9";
|
|
2282
|
+
/**
|
|
2283
|
+
* `.close-button` de v3 es un botón CON caja: `h-6 w-6 rounded-xl p-1` + `bg-default text-muted`
|
|
2284
|
+
* (`close-button.css` y su variante `--default`), y su `& svg` lleva `-mx-0.5 my-0.5`. En v2 la ✕
|
|
2285
|
+
* de este componente no pintaba fondo ni caja —el glifo ERA el botón, `text-default-500` en el
|
|
2286
|
+
* `tv`— así que se neutraliza con utilidades (capa `utilities` > `components`), igual que hace
|
|
2287
|
+
* `Chip.tsx` con su propia ✕. Se deja vivo el `scale(0.93)` al pulsar de v3.
|
|
2288
|
+
*
|
|
2289
|
+
* ⚠️ `h-4 w-4 p-0` deja el glifo de 16px ocupando la caja entera; el `[&_svg]:m-0` quita los
|
|
2290
|
+
* márgenes negativos de v3 para que el centro del glifo coincida con el centro de la caja.
|
|
2291
|
+
*/
|
|
2292
|
+
const CLEAR_BUTTON_CLASS = "h-4 w-4 min-h-0 shrink-0 rounded-full bg-transparent p-0 text-default-500 hover:bg-transparent [&_svg]:m-0";
|
|
2221
2293
|
const DEFAULT_ICON = (jsxRuntime.jsx(IconComponent, { icon: "solar:magnifer-outline", className: "text-default-400 pointer-events-none shrink-0", size: "sm", "aria-hidden": true }));
|
|
2222
2294
|
/**
|
|
2223
2295
|
* AuraAutocomplete genérico reutilizable, migrado al `ComboBox` compound de HeroUI v3 (el
|
|
@@ -2232,14 +2304,57 @@ const DEFAULT_ICON = (jsxRuntime.jsx(IconComponent, { icon: "solar:magnifer-outl
|
|
|
2232
2304
|
* si algún consumidor necesita leer la selección fuera de eso, debe migrar sus items a `id`
|
|
2233
2305
|
* explícito (tarea de la fase de adopción en apps).
|
|
2234
2306
|
*
|
|
2235
|
-
* `variant`/`size
|
|
2236
|
-
*
|
|
2237
|
-
|
|
2238
|
-
|
|
2307
|
+
* `variant`/`size` de v2 se reimplementan con clases (`ComboBox` no tiene variantes ni tamaños en
|
|
2308
|
+
* v3) y `radius` se acepta y se descarta; `isClearable` (default `true`, como en v2) repone la ✕
|
|
2309
|
+
* de limpiar, que v3 no trae en esta pieza.
|
|
2310
|
+
*/
|
|
2311
|
+
const AuraAutocomplete = ({ label, id, icon, placeholder, className, children, variant = "bordered", size = "md", isDisabled,
|
|
2312
|
+
// `isClearable` y los cuatro de abajo se desestructuran (en vez de viajar en `...props`)
|
|
2313
|
+
// porque la ✕ necesita LEER el valor para decidir si se muestra y LLAMAR a los callbacks para
|
|
2314
|
+
// limpiarlo. Se reenvían tal cual al `ComboBox`, así que para el consumidor no cambia nada:
|
|
2315
|
+
// pasar `undefined` es indistinguible de no pasarlos (react-aria decide controlado/no
|
|
2316
|
+
// controlado con `!== undefined`).
|
|
2317
|
+
isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelectionChange, translations, radius: _radius, ...props }) => {
|
|
2239
2318
|
const generatedId = $8WNJc$react.useId();
|
|
2240
2319
|
const autoId = id || generatedId;
|
|
2241
2320
|
const resolvedIcon = icon === undefined ? DEFAULT_ICON : icon;
|
|
2242
|
-
|
|
2321
|
+
const t = { ...DEFAULT_TRANSLATIONS$e, ...translations };
|
|
2322
|
+
/** El `<input>` real, para devolverle el foco tras limpiar (ver `handleClear`). */
|
|
2323
|
+
const inputRef = $8WNJc$react.useRef(null);
|
|
2324
|
+
// `data-visible` de v2, traducido a montar/no montar: `!!state.selectedItem ||
|
|
2325
|
+
// state.inputValue?.length > 0` (`chunk-NJJHRP6D.mjs:273`), y apagado por `isDisabled`/
|
|
2326
|
+
// `isReadOnly` como en el cálculo de `isClearable` del hook (línea 20 del mismo fichero).
|
|
2327
|
+
const hasSelection = selectedKey != null;
|
|
2328
|
+
const hasText = typeof inputValue === "string" && inputValue.length > 0;
|
|
2329
|
+
const showClear = isClearable && !isDisabled && !isReadOnly && (hasSelection || hasText);
|
|
2330
|
+
/**
|
|
2331
|
+
* Lo mismo que hacía v2 al pulsar la ✕ (`getClearButtonProps().onPress`): borra la selección
|
|
2332
|
+
* —solo si había una, igual que su `if (state.selectedItem)`—, vacía el texto y devuelve el
|
|
2333
|
+
* foco al campo.
|
|
2334
|
+
*
|
|
2335
|
+
* ⚠️ El foco NO es un extra: la ✕ se desmonta en el mismo commit (ya no hay nada que limpiar),
|
|
2336
|
+
* así que sin esto el foco se iría al `<body>` y el campo quedaría inservible sin volver a
|
|
2337
|
+
* pulsarlo. v2 lo resolvía al revés (`onPressStart: inputRef.focus()` + `preventFocusOnPress`),
|
|
2338
|
+
* porque su botón no desaparecía.
|
|
2339
|
+
*
|
|
2340
|
+
* Los dos callbacks son los mismos que disparaba v2: allí `state.setSelectedKey(null)` y
|
|
2341
|
+
* `state.setInputValue("")` llamaban a `onSelectionChange`/`onInputChange` del consumidor. Y
|
|
2342
|
+
* hay que llamar a los DOS: con `inputValue` y `selectedKey` controlados, react-aria
|
|
2343
|
+
* deliberadamente no sincroniza uno con otro —"it's the user's responsibility to update
|
|
2344
|
+
* inputValue in onSelectionChange", `react-stately/dist/private/combobox/useComboBoxState.js`
|
|
2345
|
+
* líneas 207-214—, así que vaciar solo el texto dejaría la selección viva y al revés.
|
|
2346
|
+
* Lo único que no se replica es su `state.open()` (reabrir la lista): eso vive en el estado
|
|
2347
|
+
* interno de react-aria, fuera del alcance de la fachada — aunque al devolver el foco, el
|
|
2348
|
+
* `menuTrigger="focus"` por defecto del `ComboBox` de v3 la reabre de todos modos.
|
|
2349
|
+
*/
|
|
2350
|
+
const handleClear = () => {
|
|
2351
|
+
if (hasSelection) {
|
|
2352
|
+
onSelectionChange?.(null);
|
|
2353
|
+
}
|
|
2354
|
+
onInputChange?.("");
|
|
2355
|
+
inputRef.current?.focus();
|
|
2356
|
+
};
|
|
2357
|
+
return (jsxRuntime.jsxs(react.ComboBox, { id: autoId, isDisabled: isDisabled, isReadOnly: isReadOnly, inputValue: inputValue, selectedKey: selectedKey, onInputChange: onInputChange, onSelectionChange: onSelectionChange, className: [FIELD_STACK_CLASS$2, className].filter(Boolean).join(" "), ...props, children: [label && jsxRuntime.jsx(react.Label, { className: LABEL_CLASS$3, children: label }), jsxRuntime.jsxs(react.ComboBox.InputGroup, { className: [
|
|
2243
2358
|
SIZE_CLASS$3[size],
|
|
2244
2359
|
PADDING_CLASS$1[size],
|
|
2245
2360
|
variant === "underlined" ? UNDERLINED_INNER_CLASS[size] : "",
|
|
@@ -2247,13 +2362,54 @@ const AuraAutocomplete = ({ label, id, icon, placeholder, className, children, v
|
|
|
2247
2362
|
VARIANT_CLASS$2[variant],
|
|
2248
2363
|
]
|
|
2249
2364
|
.filter(Boolean)
|
|
2250
|
-
.join(" "), children: [jsxRuntime.jsx(react.Input, { placeholder: placeholder, className: [
|
|
2365
|
+
.join(" "), children: [jsxRuntime.jsx(react.Input, { ref: inputRef, placeholder: placeholder, className: [
|
|
2251
2366
|
INPUT_CLASS$1,
|
|
2252
2367
|
TEXT_CLASS[size],
|
|
2253
2368
|
resolvedIcon != null ? INPUT_WITH_ICON_CLASSNAME : "",
|
|
2254
2369
|
]
|
|
2255
2370
|
.filter(Boolean)
|
|
2256
|
-
.join(" ") }),
|
|
2371
|
+
.join(" ") }), showClear && (jsxRuntime.jsx(react.CloseButton
|
|
2372
|
+
/*
|
|
2373
|
+
* ⚠️ `slot={null}` no es cosmético: sin él, este botón se come el
|
|
2374
|
+
* `ButtonContext` que react-aria publica para el disparador del ComboBox, y
|
|
2375
|
+
* salía con los atributos del chevron. Medido en el DOM antes de ponerlo:
|
|
2376
|
+
*
|
|
2377
|
+
* id="react-aria…_r_1_" ← EL MISMO id que el chevron (HTML inválido)
|
|
2378
|
+
* aria-haspopup="listbox" aria-expanded="false"
|
|
2379
|
+
* aria-labelledby="…_r_1_ …_r_6_" ← y esto PISA al `aria-label`, así que
|
|
2380
|
+
* el nombre accesible no era "Limpiar"
|
|
2381
|
+
* sino la etiqueta del campo
|
|
2382
|
+
* tabindex="-1" ← heredado del `excludeFromTabOrder` del chevron
|
|
2383
|
+
*
|
|
2384
|
+
* `slot={null}` es la vía documentada de react-aria para NO consumir el
|
|
2385
|
+
* contexto (`useContextProps` lo salta). Con él el botón queda limpio: solo
|
|
2386
|
+
* su `aria-label` traducido, y alcanzable con teclado como la ✕ de `Input`.
|
|
2387
|
+
*/
|
|
2388
|
+
, {
|
|
2389
|
+
/*
|
|
2390
|
+
* ⚠️ `slot={null}` no es cosmético: sin él, este botón se come el
|
|
2391
|
+
* `ButtonContext` que react-aria publica para el disparador del ComboBox, y
|
|
2392
|
+
* salía con los atributos del chevron. Medido en el DOM antes de ponerlo:
|
|
2393
|
+
*
|
|
2394
|
+
* id="react-aria…_r_1_" ← EL MISMO id que el chevron (HTML inválido)
|
|
2395
|
+
* aria-haspopup="listbox" aria-expanded="false"
|
|
2396
|
+
* aria-labelledby="…_r_1_ …_r_6_" ← y esto PISA al `aria-label`, así que
|
|
2397
|
+
* el nombre accesible no era "Limpiar"
|
|
2398
|
+
* sino la etiqueta del campo
|
|
2399
|
+
* tabindex="-1" ← heredado del `excludeFromTabOrder` del chevron
|
|
2400
|
+
*
|
|
2401
|
+
* `slot={null}` es la vía documentada de react-aria para NO consumir el
|
|
2402
|
+
* contexto (`useContextProps` lo salta). Con él el botón queda limpio: solo
|
|
2403
|
+
* su `aria-label` traducido, y alcanzable con teclado como la ✕ de `Input`.
|
|
2404
|
+
*/
|
|
2405
|
+
slot: null, "aria-label": t.clearButtonAriaLabel, className: [
|
|
2406
|
+
CLEAR_BUTTON_CLASS,
|
|
2407
|
+
resolvedIcon != null
|
|
2408
|
+
? CLEAR_GAP_WITH_ICON_CLASS
|
|
2409
|
+
: variant === "underlined"
|
|
2410
|
+
? CLEAR_GAP_WITH_TRIGGER_UNDERLINED_CLASS
|
|
2411
|
+
: CLEAR_GAP_WITH_TRIGGER_CLASS[size],
|
|
2412
|
+
].join(" "), onPress: handleClear })), resolvedIcon != null && (jsxRuntime.jsx("span", { className: [
|
|
2257
2413
|
ICON_WRAPPER_CLASSNAME,
|
|
2258
2414
|
variant === "underlined"
|
|
2259
2415
|
? `${ICON_UNDERLINED_INSET_CLASS} ${UNDERLINED_INNER_CLASS[size]}`
|
|
@@ -8579,7 +8735,45 @@ const Select = ({ children, label, description, errorMessage, id, name,
|
|
|
8579
8735
|
// `lg` que había aquí venía del `argTypes.defaultValue.summary` de la story, que YA estaba mal
|
|
8580
8736
|
// en v2. Con "lg" todos los campos de las 4 apps que no pasan `size` salían 8px más altos, con
|
|
8581
8737
|
// 2px más de padding lateral y el texto a 16px en vez de 14.
|
|
8582
|
-
size = "md", variant = "bordered", radius = "md",
|
|
8738
|
+
size = "md", variant = "bordered", radius = "md",
|
|
8739
|
+
// Campo vacío = SIN texto, como en v2 (TECH-2459 · F5 · hallazgo backoffice 10-sep: «un Select
|
|
8740
|
+
// sin `placeholder` muestra "Select an item", en inglés»).
|
|
8741
|
+
//
|
|
8742
|
+
// ⚠️ La cadena NO es de HeroUI: la pone **react-aria-components**, y por eso no se arregla
|
|
8743
|
+
// tocando la pieza de v3. `SelectValue` resuelve su contenido así
|
|
8744
|
+
// (`react-aria-components/dist/private/Select.mjs:274`):
|
|
8745
|
+
//
|
|
8746
|
+
// defaultChildren: defaultChildren ?? placeholder ?? stringFormatter.format('selectPlaceholder')
|
|
8747
|
+
//
|
|
8748
|
+
// donde `defaultChildren` es la etiqueta de lo seleccionado (`undefined` si no hay nada) y
|
|
8749
|
+
// `placeholder` sale del propio `props` de la raíz, que react-aria publica en su `SelectContext`
|
|
8750
|
+
// (`Select.mjs:137`). El tercer término es una cadena **traducida** del paquete
|
|
8751
|
+
// (`dist/private/intl/en-US.js` → "Select an item"; `es-ES.js` → "Seleccionar un artículo"), así
|
|
8752
|
+
// que lo que se ve depende del locale efectivo de react-aria —hoy el del navegador—, no de una
|
|
8753
|
+
// constante de HeroUI.
|
|
8754
|
+
//
|
|
8755
|
+
// v2 no pintaba nada en ese hueco: su `Select` no tenía fallback de placeholder (la sesión de
|
|
8756
|
+
// backoffice lo contrastó además sobre los bundles publicados — la cadena aparece 1 vez en el
|
|
8757
|
+
// chunk de v3 y 0 en el v2 que sirve QA). Un campo con texto por
|
|
8758
|
+
// defecto es una decisión de diseño que ninguna app ha pedido, y se repara aquí y no app por app
|
|
8759
|
+
// porque el alcance es grande: **93 aperturas `<Select>` sin prop `placeholder`** en los repos
|
|
8760
|
+
// que consumen la fachada (52 en beweossmbs, 38 en backoffice-beweos, 3 en beweanalytics; 0 en
|
|
8761
|
+
// beweosagency y loginos — medido el 14-sep-2026 recorriendo la etiqueta de apertura, no por
|
|
8762
|
+
// grep de línea, que cuenta `<SelectItem` de rebote). Es un **suelo**, no un techo: un
|
|
8763
|
+
// `placeholder={variable}` que en ejecución vale `undefined` cae en el mismo fallback y ese
|
|
8764
|
+
// recuento lo da por cubierto.
|
|
8765
|
+
//
|
|
8766
|
+
// Se neutraliza con **cadena vacía**, no con `undefined`: los dos `??` de arriba solo caen al
|
|
8767
|
+
// siguiente término con `null`/`undefined`, y `""` no lo es, así que corta la cadena antes del
|
|
8768
|
+
// `stringFormatter`. Medido con `renderToStaticMarkup` (ver `Select.test.tsx`): el único cambio
|
|
8769
|
+
// en todo el markup es que el `<span data-slot="select-value">` se queda sin texto — no aparece
|
|
8770
|
+
// ningún atributo `placeholder` en el DOM ni cambia el `<select>` nativo oculto. El nombre
|
|
8771
|
+
// accesible del trigger tampoco se pierde: es `aria-labelledby="<valor> <label>"`, así que con el
|
|
8772
|
+
// valor vacío queda el texto del `<Label>`, igual que en v2.
|
|
8773
|
+
//
|
|
8774
|
+
// Por eso este componente sigue sin `SelectTranslations`: la corrección consiste precisamente en
|
|
8775
|
+
// que la librería no aporte NINGÚN texto propio, no en traducir el que había.
|
|
8776
|
+
placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, isInvalid = false, isRequired = false, isDisabled = false,
|
|
8583
8777
|
// `fullWidth` por defecto a `true`: HeroUI v2 lo traía en sus `defaultVariants`
|
|
8584
8778
|
// (verificado en el paquete v2 compilado, `dist/components/input.js`:
|
|
8585
8779
|
// `defaultVariants: { variant:"flat", color:"default", size:"md", fullWidth:true, … }`, con
|
package/dist/index.esm.js
CHANGED
|
@@ -2010,6 +2010,10 @@ function withCollectionItemIds(children) {
|
|
|
2010
2010
|
return Object.keys(patch).length > 0 ? cloneElement(element, patch) : element;
|
|
2011
2011
|
}
|
|
2012
2012
|
|
|
2013
|
+
/** Traducciones por defecto en español (mismo literal que la ✕ de la fachada `Input`). */
|
|
2014
|
+
const DEFAULT_TRANSLATIONS$e = {
|
|
2015
|
+
clearButtonAriaLabel: "Limpiar",
|
|
2016
|
+
};
|
|
2013
2017
|
/**
|
|
2014
2018
|
* Clases del wrapper del icono: lo mete DENTRO del recuadro del campo.
|
|
2015
2019
|
*
|
|
@@ -2218,6 +2222,74 @@ const ICON_INSET_CLASS = {
|
|
|
2218
2222
|
* contra 364).
|
|
2219
2223
|
*/
|
|
2220
2224
|
const ICON_UNDERLINED_INSET_CLASS = "pe-1";
|
|
2225
|
+
/*
|
|
2226
|
+
* TECH-2459 · ronda 2 — La ✕ de limpiar, que v2 traía de fábrica y la migración perdió.
|
|
2227
|
+
*
|
|
2228
|
+
* ## Qué hacía v2 (medido en el paquete, no deducido)
|
|
2229
|
+
*
|
|
2230
|
+
* El `Autocomplete` de v2 pintaba DOS botones redondos de 32px al final del campo, dentro del
|
|
2231
|
+
* borde: primero la ✕ y después el chevron (`dist/chunk-RXKUWVQZ.mjs`, el `endContent` del
|
|
2232
|
+
* `Input`: `[endContent || <Button {...getClearButtonProps()}>{clearIcon}</Button>,
|
|
2233
|
+
* selectorIcon && <Button {...getSelectorButtonProps()}>]`). Ambos con
|
|
2234
|
+
* `size="sm" variant="light" radius="full" isIconOnly` (defaults documentados en
|
|
2235
|
+
* `dist/use-autocomplete.d.ts:72-80`) y glifo de 16px (`clearButton: "text-medium"` en el `tv`
|
|
2236
|
+
* del tema, `@heroui/theme@2.4.15/dist/components/autocomplete.js`).
|
|
2237
|
+
*
|
|
2238
|
+
* De ahí sale la única medida que este fichero necesita: el hueco entre los DOS glifos era de
|
|
2239
|
+
* 16px (dos botones de 32px pegados, cada uno con 8px de aire alrededor de su glifo de 16px). La
|
|
2240
|
+
* posición absoluta del chevron ya la fijó la migración (`.combo-box__trigger` → `pe-2`), así que
|
|
2241
|
+
* lo que se conserva aquí es ese hueco relativo, no una coordenada.
|
|
2242
|
+
*
|
|
2243
|
+
* La ✕ va en FLUJO y sus vecinos son `absolute`, así que la fórmula tiene que descontar el relleno
|
|
2244
|
+
* lateral del campo: un `absolute end-0` se posiciona desde el canto interior del borde (ignora el
|
|
2245
|
+
* `px-*`), mientras que la ✕ arranca DESPUÉS de ese relleno.
|
|
2246
|
+
*
|
|
2247
|
+
* me = sangría del extremo + 16 (hueco v2) + 16 (glifo del extremo) − relleno lateral del campo
|
|
2248
|
+
*
|
|
2249
|
+
* | | sangría | relleno | me |
|
|
2250
|
+
* | chevron, sm | 8 | 8 | me-8 |
|
|
2251
|
+
* | chevron, md/lg | 8 | 12 | me-7 |
|
|
2252
|
+
* | chevron, underlined | 8 | 4 | me-9 |
|
|
2253
|
+
* | icono (cualquiera) | 8/12/4 | 8/12/4 | me-8 | ← la sangría del icono ES el relleno
|
|
2254
|
+
*
|
|
2255
|
+
* Verificado en el navegador, no calculado: con el ajuste, el canto izquierdo del glifo del extremo
|
|
2256
|
+
* y el derecho del glifo de la ✕ quedan a 16px en los cinco campos de la story `Clearable` (antes,
|
|
2257
|
+
* con `me-10`/`me-11`, salían a 28px porque la fórmula se había olvidado del relleno y del borde).
|
|
2258
|
+
*
|
|
2259
|
+
* ## Dos desviaciones DELIBERADAS de v2, las dos por precedente de la fachada `Input`
|
|
2260
|
+
*
|
|
2261
|
+
* 1 · **v2 solo la mostraba al pasar el ratón** en pantallas ≥640px. El `tv` del tema lo dice
|
|
2262
|
+
* literal: `clearButton: ["opacity-0", …, "data-[visible=true]:opacity-100",
|
|
2263
|
+
* "sm:data-[visible=true]:opacity-0",
|
|
2264
|
+
* "sm:group-data-[hover=true]:data-[visible=true]:opacity-100"]` — o sea visible con valor en
|
|
2265
|
+
* móvil, y en escritorio solo con el puntero encima del campo. Aquí se muestra siempre que
|
|
2266
|
+
* haya algo que limpiar, como ya hace `Input.tsx` (`showClear`), porque un botón que solo
|
|
2267
|
+
* aparece al pasar el ratón es indescubrible con teclado y fue exactamente lo que QA reportó
|
|
2268
|
+
* como "desaparecida".
|
|
2269
|
+
* 2 · **v2 la tenía siempre en el DOM** (invisible, `excludeFromTabOrder`, reservando su hueco);
|
|
2270
|
+
* aquí se monta solo cuando hay valor. Consecuencia: el hueco que se lleva la ✕ (44px medidos:
|
|
2271
|
+
* la zona de texto acaba a 58px del borde con ✕ y a 14px sin ella) aparece con el valor en vez
|
|
2272
|
+
* de estar reservado siempre, y la ✕ SÍ es alcanzable con teclado (con nombre accesible
|
|
2273
|
+
* traducido, que v2 no tenía: no hay un solo `aria-label` en todo `chunk-NJJHRP6D.mjs`).
|
|
2274
|
+
*/
|
|
2275
|
+
const CLEAR_GAP_WITH_ICON_CLASS = "me-8";
|
|
2276
|
+
const CLEAR_GAP_WITH_TRIGGER_CLASS = {
|
|
2277
|
+
sm: "me-8",
|
|
2278
|
+
md: "me-7",
|
|
2279
|
+
lg: "me-7",
|
|
2280
|
+
};
|
|
2281
|
+
const CLEAR_GAP_WITH_TRIGGER_UNDERLINED_CLASS = "me-9";
|
|
2282
|
+
/**
|
|
2283
|
+
* `.close-button` de v3 es un botón CON caja: `h-6 w-6 rounded-xl p-1` + `bg-default text-muted`
|
|
2284
|
+
* (`close-button.css` y su variante `--default`), y su `& svg` lleva `-mx-0.5 my-0.5`. En v2 la ✕
|
|
2285
|
+
* de este componente no pintaba fondo ni caja —el glifo ERA el botón, `text-default-500` en el
|
|
2286
|
+
* `tv`— así que se neutraliza con utilidades (capa `utilities` > `components`), igual que hace
|
|
2287
|
+
* `Chip.tsx` con su propia ✕. Se deja vivo el `scale(0.93)` al pulsar de v3.
|
|
2288
|
+
*
|
|
2289
|
+
* ⚠️ `h-4 w-4 p-0` deja el glifo de 16px ocupando la caja entera; el `[&_svg]:m-0` quita los
|
|
2290
|
+
* márgenes negativos de v3 para que el centro del glifo coincida con el centro de la caja.
|
|
2291
|
+
*/
|
|
2292
|
+
const CLEAR_BUTTON_CLASS = "h-4 w-4 min-h-0 shrink-0 rounded-full bg-transparent p-0 text-default-500 hover:bg-transparent [&_svg]:m-0";
|
|
2221
2293
|
const DEFAULT_ICON = (jsx(IconComponent, { icon: "solar:magnifer-outline", className: "text-default-400 pointer-events-none shrink-0", size: "sm", "aria-hidden": true }));
|
|
2222
2294
|
/**
|
|
2223
2295
|
* AuraAutocomplete genérico reutilizable, migrado al `ComboBox` compound de HeroUI v3 (el
|
|
@@ -2232,14 +2304,57 @@ const DEFAULT_ICON = (jsx(IconComponent, { icon: "solar:magnifer-outline", class
|
|
|
2232
2304
|
* si algún consumidor necesita leer la selección fuera de eso, debe migrar sus items a `id`
|
|
2233
2305
|
* explícito (tarea de la fase de adopción en apps).
|
|
2234
2306
|
*
|
|
2235
|
-
* `variant`/`size
|
|
2236
|
-
*
|
|
2237
|
-
|
|
2238
|
-
|
|
2307
|
+
* `variant`/`size` de v2 se reimplementan con clases (`ComboBox` no tiene variantes ni tamaños en
|
|
2308
|
+
* v3) y `radius` se acepta y se descarta; `isClearable` (default `true`, como en v2) repone la ✕
|
|
2309
|
+
* de limpiar, que v3 no trae en esta pieza.
|
|
2310
|
+
*/
|
|
2311
|
+
const AuraAutocomplete = ({ label, id, icon, placeholder, className, children, variant = "bordered", size = "md", isDisabled,
|
|
2312
|
+
// `isClearable` y los cuatro de abajo se desestructuran (en vez de viajar en `...props`)
|
|
2313
|
+
// porque la ✕ necesita LEER el valor para decidir si se muestra y LLAMAR a los callbacks para
|
|
2314
|
+
// limpiarlo. Se reenvían tal cual al `ComboBox`, así que para el consumidor no cambia nada:
|
|
2315
|
+
// pasar `undefined` es indistinguible de no pasarlos (react-aria decide controlado/no
|
|
2316
|
+
// controlado con `!== undefined`).
|
|
2317
|
+
isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelectionChange, translations, radius: _radius, ...props }) => {
|
|
2239
2318
|
const generatedId = useId();
|
|
2240
2319
|
const autoId = id || generatedId;
|
|
2241
2320
|
const resolvedIcon = icon === undefined ? DEFAULT_ICON : icon;
|
|
2242
|
-
|
|
2321
|
+
const t = { ...DEFAULT_TRANSLATIONS$e, ...translations };
|
|
2322
|
+
/** El `<input>` real, para devolverle el foco tras limpiar (ver `handleClear`). */
|
|
2323
|
+
const inputRef = useRef(null);
|
|
2324
|
+
// `data-visible` de v2, traducido a montar/no montar: `!!state.selectedItem ||
|
|
2325
|
+
// state.inputValue?.length > 0` (`chunk-NJJHRP6D.mjs:273`), y apagado por `isDisabled`/
|
|
2326
|
+
// `isReadOnly` como en el cálculo de `isClearable` del hook (línea 20 del mismo fichero).
|
|
2327
|
+
const hasSelection = selectedKey != null;
|
|
2328
|
+
const hasText = typeof inputValue === "string" && inputValue.length > 0;
|
|
2329
|
+
const showClear = isClearable && !isDisabled && !isReadOnly && (hasSelection || hasText);
|
|
2330
|
+
/**
|
|
2331
|
+
* Lo mismo que hacía v2 al pulsar la ✕ (`getClearButtonProps().onPress`): borra la selección
|
|
2332
|
+
* —solo si había una, igual que su `if (state.selectedItem)`—, vacía el texto y devuelve el
|
|
2333
|
+
* foco al campo.
|
|
2334
|
+
*
|
|
2335
|
+
* ⚠️ El foco NO es un extra: la ✕ se desmonta en el mismo commit (ya no hay nada que limpiar),
|
|
2336
|
+
* así que sin esto el foco se iría al `<body>` y el campo quedaría inservible sin volver a
|
|
2337
|
+
* pulsarlo. v2 lo resolvía al revés (`onPressStart: inputRef.focus()` + `preventFocusOnPress`),
|
|
2338
|
+
* porque su botón no desaparecía.
|
|
2339
|
+
*
|
|
2340
|
+
* Los dos callbacks son los mismos que disparaba v2: allí `state.setSelectedKey(null)` y
|
|
2341
|
+
* `state.setInputValue("")` llamaban a `onSelectionChange`/`onInputChange` del consumidor. Y
|
|
2342
|
+
* hay que llamar a los DOS: con `inputValue` y `selectedKey` controlados, react-aria
|
|
2343
|
+
* deliberadamente no sincroniza uno con otro —"it's the user's responsibility to update
|
|
2344
|
+
* inputValue in onSelectionChange", `react-stately/dist/private/combobox/useComboBoxState.js`
|
|
2345
|
+
* líneas 207-214—, así que vaciar solo el texto dejaría la selección viva y al revés.
|
|
2346
|
+
* Lo único que no se replica es su `state.open()` (reabrir la lista): eso vive en el estado
|
|
2347
|
+
* interno de react-aria, fuera del alcance de la fachada — aunque al devolver el foco, el
|
|
2348
|
+
* `menuTrigger="focus"` por defecto del `ComboBox` de v3 la reabre de todos modos.
|
|
2349
|
+
*/
|
|
2350
|
+
const handleClear = () => {
|
|
2351
|
+
if (hasSelection) {
|
|
2352
|
+
onSelectionChange?.(null);
|
|
2353
|
+
}
|
|
2354
|
+
onInputChange?.("");
|
|
2355
|
+
inputRef.current?.focus();
|
|
2356
|
+
};
|
|
2357
|
+
return (jsxs(ComboBox, { id: autoId, isDisabled: isDisabled, isReadOnly: isReadOnly, inputValue: inputValue, selectedKey: selectedKey, onInputChange: onInputChange, onSelectionChange: onSelectionChange, className: [FIELD_STACK_CLASS$2, className].filter(Boolean).join(" "), ...props, children: [label && jsx(Label, { className: LABEL_CLASS$3, children: label }), jsxs(ComboBox.InputGroup, { className: [
|
|
2243
2358
|
SIZE_CLASS$3[size],
|
|
2244
2359
|
PADDING_CLASS$1[size],
|
|
2245
2360
|
variant === "underlined" ? UNDERLINED_INNER_CLASS[size] : "",
|
|
@@ -2247,13 +2362,54 @@ const AuraAutocomplete = ({ label, id, icon, placeholder, className, children, v
|
|
|
2247
2362
|
VARIANT_CLASS$2[variant],
|
|
2248
2363
|
]
|
|
2249
2364
|
.filter(Boolean)
|
|
2250
|
-
.join(" "), children: [jsx(Input$1, { placeholder: placeholder, className: [
|
|
2365
|
+
.join(" "), children: [jsx(Input$1, { ref: inputRef, placeholder: placeholder, className: [
|
|
2251
2366
|
INPUT_CLASS$1,
|
|
2252
2367
|
TEXT_CLASS[size],
|
|
2253
2368
|
resolvedIcon != null ? INPUT_WITH_ICON_CLASSNAME : "",
|
|
2254
2369
|
]
|
|
2255
2370
|
.filter(Boolean)
|
|
2256
|
-
.join(" ") }),
|
|
2371
|
+
.join(" ") }), showClear && (jsx(CloseButton
|
|
2372
|
+
/*
|
|
2373
|
+
* ⚠️ `slot={null}` no es cosmético: sin él, este botón se come el
|
|
2374
|
+
* `ButtonContext` que react-aria publica para el disparador del ComboBox, y
|
|
2375
|
+
* salía con los atributos del chevron. Medido en el DOM antes de ponerlo:
|
|
2376
|
+
*
|
|
2377
|
+
* id="react-aria…_r_1_" ← EL MISMO id que el chevron (HTML inválido)
|
|
2378
|
+
* aria-haspopup="listbox" aria-expanded="false"
|
|
2379
|
+
* aria-labelledby="…_r_1_ …_r_6_" ← y esto PISA al `aria-label`, así que
|
|
2380
|
+
* el nombre accesible no era "Limpiar"
|
|
2381
|
+
* sino la etiqueta del campo
|
|
2382
|
+
* tabindex="-1" ← heredado del `excludeFromTabOrder` del chevron
|
|
2383
|
+
*
|
|
2384
|
+
* `slot={null}` es la vía documentada de react-aria para NO consumir el
|
|
2385
|
+
* contexto (`useContextProps` lo salta). Con él el botón queda limpio: solo
|
|
2386
|
+
* su `aria-label` traducido, y alcanzable con teclado como la ✕ de `Input`.
|
|
2387
|
+
*/
|
|
2388
|
+
, {
|
|
2389
|
+
/*
|
|
2390
|
+
* ⚠️ `slot={null}` no es cosmético: sin él, este botón se come el
|
|
2391
|
+
* `ButtonContext` que react-aria publica para el disparador del ComboBox, y
|
|
2392
|
+
* salía con los atributos del chevron. Medido en el DOM antes de ponerlo:
|
|
2393
|
+
*
|
|
2394
|
+
* id="react-aria…_r_1_" ← EL MISMO id que el chevron (HTML inválido)
|
|
2395
|
+
* aria-haspopup="listbox" aria-expanded="false"
|
|
2396
|
+
* aria-labelledby="…_r_1_ …_r_6_" ← y esto PISA al `aria-label`, así que
|
|
2397
|
+
* el nombre accesible no era "Limpiar"
|
|
2398
|
+
* sino la etiqueta del campo
|
|
2399
|
+
* tabindex="-1" ← heredado del `excludeFromTabOrder` del chevron
|
|
2400
|
+
*
|
|
2401
|
+
* `slot={null}` es la vía documentada de react-aria para NO consumir el
|
|
2402
|
+
* contexto (`useContextProps` lo salta). Con él el botón queda limpio: solo
|
|
2403
|
+
* su `aria-label` traducido, y alcanzable con teclado como la ✕ de `Input`.
|
|
2404
|
+
*/
|
|
2405
|
+
slot: null, "aria-label": t.clearButtonAriaLabel, className: [
|
|
2406
|
+
CLEAR_BUTTON_CLASS,
|
|
2407
|
+
resolvedIcon != null
|
|
2408
|
+
? CLEAR_GAP_WITH_ICON_CLASS
|
|
2409
|
+
: variant === "underlined"
|
|
2410
|
+
? CLEAR_GAP_WITH_TRIGGER_UNDERLINED_CLASS
|
|
2411
|
+
: CLEAR_GAP_WITH_TRIGGER_CLASS[size],
|
|
2412
|
+
].join(" "), onPress: handleClear })), resolvedIcon != null && (jsx("span", { className: [
|
|
2257
2413
|
ICON_WRAPPER_CLASSNAME,
|
|
2258
2414
|
variant === "underlined"
|
|
2259
2415
|
? `${ICON_UNDERLINED_INSET_CLASS} ${UNDERLINED_INNER_CLASS[size]}`
|
|
@@ -8579,7 +8735,45 @@ const Select = ({ children, label, description, errorMessage, id, name,
|
|
|
8579
8735
|
// `lg` que había aquí venía del `argTypes.defaultValue.summary` de la story, que YA estaba mal
|
|
8580
8736
|
// en v2. Con "lg" todos los campos de las 4 apps que no pasan `size` salían 8px más altos, con
|
|
8581
8737
|
// 2px más de padding lateral y el texto a 16px en vez de 14.
|
|
8582
|
-
size = "md", variant = "bordered", radius = "md",
|
|
8738
|
+
size = "md", variant = "bordered", radius = "md",
|
|
8739
|
+
// Campo vacío = SIN texto, como en v2 (TECH-2459 · F5 · hallazgo backoffice 10-sep: «un Select
|
|
8740
|
+
// sin `placeholder` muestra "Select an item", en inglés»).
|
|
8741
|
+
//
|
|
8742
|
+
// ⚠️ La cadena NO es de HeroUI: la pone **react-aria-components**, y por eso no se arregla
|
|
8743
|
+
// tocando la pieza de v3. `SelectValue` resuelve su contenido así
|
|
8744
|
+
// (`react-aria-components/dist/private/Select.mjs:274`):
|
|
8745
|
+
//
|
|
8746
|
+
// defaultChildren: defaultChildren ?? placeholder ?? stringFormatter.format('selectPlaceholder')
|
|
8747
|
+
//
|
|
8748
|
+
// donde `defaultChildren` es la etiqueta de lo seleccionado (`undefined` si no hay nada) y
|
|
8749
|
+
// `placeholder` sale del propio `props` de la raíz, que react-aria publica en su `SelectContext`
|
|
8750
|
+
// (`Select.mjs:137`). El tercer término es una cadena **traducida** del paquete
|
|
8751
|
+
// (`dist/private/intl/en-US.js` → "Select an item"; `es-ES.js` → "Seleccionar un artículo"), así
|
|
8752
|
+
// que lo que se ve depende del locale efectivo de react-aria —hoy el del navegador—, no de una
|
|
8753
|
+
// constante de HeroUI.
|
|
8754
|
+
//
|
|
8755
|
+
// v2 no pintaba nada en ese hueco: su `Select` no tenía fallback de placeholder (la sesión de
|
|
8756
|
+
// backoffice lo contrastó además sobre los bundles publicados — la cadena aparece 1 vez en el
|
|
8757
|
+
// chunk de v3 y 0 en el v2 que sirve QA). Un campo con texto por
|
|
8758
|
+
// defecto es una decisión de diseño que ninguna app ha pedido, y se repara aquí y no app por app
|
|
8759
|
+
// porque el alcance es grande: **93 aperturas `<Select>` sin prop `placeholder`** en los repos
|
|
8760
|
+
// que consumen la fachada (52 en beweossmbs, 38 en backoffice-beweos, 3 en beweanalytics; 0 en
|
|
8761
|
+
// beweosagency y loginos — medido el 14-sep-2026 recorriendo la etiqueta de apertura, no por
|
|
8762
|
+
// grep de línea, que cuenta `<SelectItem` de rebote). Es un **suelo**, no un techo: un
|
|
8763
|
+
// `placeholder={variable}` que en ejecución vale `undefined` cae en el mismo fallback y ese
|
|
8764
|
+
// recuento lo da por cubierto.
|
|
8765
|
+
//
|
|
8766
|
+
// Se neutraliza con **cadena vacía**, no con `undefined`: los dos `??` de arriba solo caen al
|
|
8767
|
+
// siguiente término con `null`/`undefined`, y `""` no lo es, así que corta la cadena antes del
|
|
8768
|
+
// `stringFormatter`. Medido con `renderToStaticMarkup` (ver `Select.test.tsx`): el único cambio
|
|
8769
|
+
// en todo el markup es que el `<span data-slot="select-value">` se queda sin texto — no aparece
|
|
8770
|
+
// ningún atributo `placeholder` en el DOM ni cambia el `<select>` nativo oculto. El nombre
|
|
8771
|
+
// accesible del trigger tampoco se pierde: es `aria-labelledby="<valor> <label>"`, así que con el
|
|
8772
|
+
// valor vacío queda el texto del `<Label>`, igual que en v2.
|
|
8773
|
+
//
|
|
8774
|
+
// Por eso este componente sigue sin `SelectTranslations`: la corrección consiste precisamente en
|
|
8775
|
+
// que la librería no aporte NINGÚN texto propio, no en traducir el que había.
|
|
8776
|
+
placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, isInvalid = false, isRequired = false, isDisabled = false,
|
|
8583
8777
|
// `fullWidth` por defecto a `true`: HeroUI v2 lo traía en sus `defaultVariants`
|
|
8584
8778
|
// (verificado en el paquete v2 compilado, `dist/components/input.js`:
|
|
8585
8779
|
// `defaultVariants: { variant:"flat", color:"default", size:"md", fullWidth:true, … }`, con
|
|
@@ -13,8 +13,9 @@ import type { AuraAutocompleteProps } from "./AutoComplete.types";
|
|
|
13
13
|
* si algún consumidor necesita leer la selección fuera de eso, debe migrar sus items a `id`
|
|
14
14
|
* explícito (tarea de la fase de adopción en apps).
|
|
15
15
|
*
|
|
16
|
-
* `variant`/`size
|
|
17
|
-
*
|
|
16
|
+
* `variant`/`size` de v2 se reimplementan con clases (`ComboBox` no tiene variantes ni tamaños en
|
|
17
|
+
* v3) y `radius` se acepta y se descarta; `isClearable` (default `true`, como en v2) repone la ✕
|
|
18
|
+
* de limpiar, que v3 no trae en esta pieza.
|
|
18
19
|
*/
|
|
19
20
|
export declare const AuraAutocomplete: React.FC<AuraAutocompleteProps>;
|
|
20
21
|
//# sourceMappingURL=AutoComplete.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACX,qBAAqB,
|
|
1
|
+
{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACX,qBAAqB,EAIrB,MAAM,sBAAsB,CAAC;AAuT9B;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA8N5D,CAAC"}
|
|
@@ -12,6 +12,20 @@ import type React from "react";
|
|
|
12
12
|
* para las apps consumidoras; `variant`/`size`/`radius` se aceptan pero ya no tienen equivalente
|
|
13
13
|
* de estilo en v3 (ComboBox no tiene variantes, solo Tailwind) — ver nota de cada prop.
|
|
14
14
|
*/
|
|
15
|
+
/**
|
|
16
|
+
* Traducciones de `AuraAutocomplete`. Hoy solo el nombre accesible del botón de limpiar: es el
|
|
17
|
+
* único texto que la fachada escribe por su cuenta (el resto —`label`, `placeholder`, las
|
|
18
|
+
* etiquetas de las opciones— los pone el consumidor).
|
|
19
|
+
*
|
|
20
|
+
* ⚠️ No es opcional en la práctica: `CloseButton` de v3 se pone `aria-label="Close"` a sí mismo
|
|
21
|
+
* (`node_modules/@heroui/react/dist/components/close-button/close-button.js:22`, antes del
|
|
22
|
+
* `...rest`, o sea que se puede pisar pero si no se pisa se queda). Sin esta traducción el lector
|
|
23
|
+
* de pantalla anunciaría el botón en inglés dentro de una app en español.
|
|
24
|
+
*/
|
|
25
|
+
export type AuraAutocompleteTranslations = {
|
|
26
|
+
/** `aria-label` del botón de limpiar (`isClearable`). Default: "Limpiar". */
|
|
27
|
+
clearButtonAriaLabel?: string;
|
|
28
|
+
};
|
|
15
29
|
/** Variantes visuales de v2 del campo. */
|
|
16
30
|
export type AutocompleteVariant = "flat" | "bordered" | "faded" | "underlined";
|
|
17
31
|
/** Tamaños de v2 del campo (32 / 40 / 48px de alto). */
|
|
@@ -39,6 +53,36 @@ export type AuraAutocompleteProps<T extends object = object, M extends "single"
|
|
|
39
53
|
* en v3, así que la fachada los reimplementa con clases — igual que `Input` y `Select`.
|
|
40
54
|
*/
|
|
41
55
|
size?: AutocompleteSize;
|
|
56
|
+
/**
|
|
57
|
+
* Muestra el botón de limpiar (✕) dentro del campo, delante del chevron, cuando hay algo que
|
|
58
|
+
* limpiar. `false` lo oculta siempre.
|
|
59
|
+
*
|
|
60
|
+
* @default true
|
|
61
|
+
*
|
|
62
|
+
* Es el default de v2, medido en `@heroui/autocomplete@2.3.32`, no deducido: el `tv` del tema
|
|
63
|
+
* declara `defaultVariants: { isClearable: true }`
|
|
64
|
+
* (`@heroui/theme@2.4.15/dist/components/autocomplete.js`), y el hook solo lo apaga si el
|
|
65
|
+
* consumidor pasa `disableClearable`, `isDisabled` o `isReadOnly`
|
|
66
|
+
* (`dist/chunk-NJJHRP6D.mjs:20`). La migración a v3 lo perdió porque el `ComboBox` de v3 no
|
|
67
|
+
* tiene botón de limpiar propio (solo `Autocomplete`, que es otra pieza: ver
|
|
68
|
+
* `AutocompleteClearButton` en `@heroui/react/dist/components/autocomplete/autocomplete.d.ts`).
|
|
69
|
+
*
|
|
70
|
+
* ⚠️ Solo funciona en modo **controlado** —igual que en la fachada `Input`—: la fachada limpia
|
|
71
|
+
* llamando a `onInputChange("")`/`onSelectionChange(null)`, así que necesita ver el valor por
|
|
72
|
+
* `inputValue`/`selectedKey`. Sin ellos no hay ✕ (el estado vive dentro de react-aria y la
|
|
73
|
+
* fachada no lo alcanza sin importar `react-aria-components`, que no es dependencia de este
|
|
74
|
+
* paquete). Los 14 consumidores actuales de las 4 apps son controlados.
|
|
75
|
+
*/
|
|
76
|
+
isClearable?: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* Traducciones i18n de la fachada. Si no se pasa, usa los valores por defecto en español.
|
|
79
|
+
*
|
|
80
|
+
* @example
|
|
81
|
+
* ```tsx
|
|
82
|
+
* <AuraAutocomplete translations={{ clearButtonAriaLabel: "Clear" }} />
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
85
|
+
translations?: AuraAutocompleteTranslations;
|
|
42
86
|
/**
|
|
43
87
|
* @deprecated Sin equivalente en HeroUI v3. Se acepta por compatibilidad v2; no tiene efecto.
|
|
44
88
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutoComplete.types.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/AutoComplete.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;GAWG;AACH,0CAA0C;AAC1C,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,CAAC;AAE/E,wDAAwD;AACxD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,qBAAqB,CAChC,CAAC,SAAS,MAAM,GAAG,MAAM,EACzB,CAAC,SAAS,QAAQ,GAAG,UAAU,GAAG,QAAQ,IACvC,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAC9B,sFAAsF;IACtF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CAC9C,CAAC"}
|
|
1
|
+
{"version":3,"file":"AutoComplete.types.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/AutoComplete.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;GAWG;AACH;;;;;;;;;GASG;AACH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,6EAA6E;IAC7E,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,0CAA0C;AAC1C,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,CAAC;AAE/E,wDAAwD;AACxD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,qBAAqB,CAChC,CAAC,SAAS,MAAM,GAAG,MAAM,EACzB,CAAC,SAAS,QAAQ,GAAG,UAAU,GAAG,QAAQ,IACvC,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAC9B,sFAAsF;IACtF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,4BAA4B,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CAC9C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EACX,qBAAqB,EACrB,4BAA4B,GAC5B,MAAM,sBAAsB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EACX,WAAW,EAIX,MAAM,gBAAgB,CAAC;AA0SxB;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EACX,WAAW,EAIX,MAAM,gBAAgB,CAAC;AA0SxB;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+QxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -68,7 +68,7 @@ export { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, type ModalPro
|
|
|
68
68
|
export { Alert, type AlertClassNames, type AlertColor, type AlertProps, type AlertRadius, type AlertStatus, type AlertTranslations, type AlertVariant, } from "./components/alert";
|
|
69
69
|
export { Checkbox, type CheckboxClassNames, type CheckboxColor, type CheckboxIconProps, type CheckboxProps, type CheckboxRadius, type CheckboxSize, } from "./components/checkbox";
|
|
70
70
|
export { Switch, type SwitchColor, type SwitchProps, type SwitchSize, } from "./components/switch";
|
|
71
|
-
export { AuraAutocomplete, AuraAutocomplete as Autocomplete, type AuraAutocompleteProps, } from "./components/autocomplete";
|
|
71
|
+
export { AuraAutocomplete, AuraAutocomplete as Autocomplete, type AuraAutocompleteProps, type AuraAutocompleteTranslations, } from "./components/autocomplete";
|
|
72
72
|
export { Button, type ButtonProps } from "./components/button";
|
|
73
73
|
export { Card, type CardProps } from "./components/card";
|
|
74
74
|
export { Input, type InputProps } from "./components/input";
|