Tipos de eventos

gluBox exporta tipos dedicados para los callbacks de cada componente. Podés usarlos para tipar handlers, pasarlos como props a funciones auxiliares o documentar contratos en tu app sin repetir firmas.

Importación

import type {
  SelectOnChangeHandler,
  SelectChangeValue,
  PopupOnCloseHandler,
  ToastShowHandler,
} from 'glubox';

Utilidades genéricas

Si un evento no tiene alias propio (por ejemplo onKeyDown en Button), derivá el tipo desde las props:

import type {
  ButtonProps,
  OptionalEventHandler,
  EventHandlerPayload,
  RequiredEventHandler,
} from 'glubox';

type OnKeyDown = OptionalEventHandler<ButtonProps, 'onKeyDown'>;
type ClosePopup = RequiredEventHandler<PopupProps, 'onClose'>;
type SelectValue = EventHandlerPayload<SelectProps, 'onChange'>; // string

Utilidad	Uso
RequiredEventHandler<Props, 'onClose'>	Callback obligatorio en props
OptionalEventHandler<Props, 'onChange'>	Callback opcional
EventHandlerPayload<Props, 'onChange'>	Primer argumento del handler

Por componente

Button

Tipo	Signatura
ButtonOnClickHandler	(event: MouseEvent<HTMLButtonElement>) => void

const handleClick: ButtonOnClickHandler = (event) => {
  event.preventDefault();
};

Select

Tipo	Signatura
SelectOnChangeHandler	(value: string) => void
SelectChangeValue	string

TextBox

Tipo	Signatura
TextBoxOnChangeHandler	(event: ChangeEvent<HTMLInputElement>) => void
TextBoxOnFocusHandler	(event: FocusEvent<HTMLInputElement>) => void
TextBoxOnBlurHandler	(event: FocusEvent<HTMLInputElement>) => void

TextArea

Tipo	Signatura
TextAreaOnChangeHandler	(event: ChangeEvent<HTMLTextAreaElement>) => void
TextAreaOnFocusHandler	(event: FocusEvent<HTMLTextAreaElement>) => void
TextAreaOnBlurHandler	(event: FocusEvent<HTMLTextAreaElement>) => void

DataGrid

Tipo	Signatura
DataGridOnRowSelectHandler<T>	(row: T) => void
DataGridOnSelectionChangeHandler<T>	(selectedRows: T[]) => void
DataGridOnPageChangeHandler	(page: number) => void
DataGridOnPageSizeChangeHandler	(pageSize: number) => void

DateBox

Tipo	Signatura
DateBoxOnChangeHandler	(event: ChangeEvent<HTMLInputElement>) => void

RangeDateBox

Tipo	Signatura
RangeDateBoxOnChangeHandler	(range: DateRange) => void
RangeDateBoxChangeEvent	{ start: string; end: string }

OptionGroup

Tipo	Signatura
OptionGroupOnChangeHandler	(value: string) => void
OptionGroupChangeValue	string

CheckButton

Tipo	Signatura
CheckButtonOnChangeHandler	(checked: boolean) => void
CheckButtonChangeValue	boolean

Sidebar

Tipo	Signatura
SidebarOnCollapsedChangeHandler	(collapsed: boolean) => void
SidebarOnNavigateHandler	(path: string) => void

Popup

Tipo	Signatura
PopupOnCloseHandler	() => void
PopupActionOnClickHandler	() => void

const handleClose: PopupOnCloseHandler = () => setOpen(false);

Toast

Tipo	Signatura
ToastShowHandler	(options: ShowToastOptions) => string
ToastDismissHandler	(id: string) => void
ToastDismissAllHandler	() => void
ToastOnCloseHandler	() => void

const { show } = useToast();

const notify: ToastShowHandler = (options) => show(options);

Demo interactivo

En la app demo, cada componente documenta sus tipos de eventos en:

• API → Events — tabla con columna «Tipo exportado» + ejemplo de importación
• API → Types — referencia completa de handlers exportados

Siguiente paso

• Formularios
• Botones y selección
• Overlays (Popup / Toast)
• Instalación y TypeScript