componente · @solu30/ui-kit/data-display
DebouncedSearchInput
El componente, montado
Cargando el componente del paquete instalado…
Cargando el chunk del paquete instalado…
De dónde se importa
import { DebouncedSearchInput } from '@solu30/ui-kit/data-display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| value | sí | string | External (debounced) value — used as initial + to sync on programmatic clears. |
| onDebouncedChange | sí | (next: string) => void | — |
| delay | opcional | number | Delay in ms (default 300). |
| placeholder | opcional | string | — |
| className | opcional | string | — |
| autoFocus | opcional | boolean | — |
| shortcutHint | opcional | string | F-key shortcut hint shown on the right (e.g. "F1"). |
| inputRef | opcional | React.RefObject<HTMLInputElement | null> | Optional ref forwarded to the underlying input. |
| isGlobalSearchTarget | opcional | boolean | When true (default), adds `data-search-input` and `aria-keyshortcuts="F1"` so the global useFocusSearch hook can locate this input. Set to false to opt out (e.g. secondary search inputs on the same page). |
| fullWidth | opcional | boolean | Passthrough to `TextInput`. Default `true` (unchanged). `className` lands on the `<input>`, NOT on the wrapper `TextInput` mounts — so a consumer passing `className="w-64"` shrinks the input while the wrapper stays `w-full`, leaving dead space between the input and the edge of its cell that the consumer has no way to remove. Measured in Luigi (`/rrhh/franquicias`, 2026-07-25): input at 256 px inside a 516 px wrapper. Pass `false` to let the component size to its content. NOT a fix for toolbars wrapping to extra rows — that was the initial hypothesis and the measurement refuted it: with `fullWidth={false}` the wrapper dropped to 256 px and the toolbar stayed at 3 rows, because its children add up to 1084 px in 516 px of width. That wrap is legitimate. |