Events – Tsunami

Conventions

Every event is named tsunami:<thing> and fires on the component's element. All of them bubble, so you can listen once on document and read event.target to see which component sent it. The data is in event.detail.

document.addEventListener("tsunami:tagschange", (e) => {
  console.log(e.target, e.detail.value); // the tag input, ["design", "billing"]
});

Form controls also send the browser's own input and change, so a plain form keeps working.

Cancelable events

Three events fire before the change and can be stopped with event.preventDefault(): tsunami:chipremove, tsunami:sort and tsunami:closetab. Every other event fires after the change and cannot be cancelled.

document.addEventListener("tsunami:closetab", (e) => {
  if (hasUnsavedWork(e.detail.panel)) e.preventDefault(); // keep the tab
});

All events

Sorted by component. Each name links to the page that explains the component.

Component	Event	Fires on	Detail	When
Autocomplete	`tsunami:autocomplete`	the input	`{ value, item }`	The user picks a suggestion.
Button	`tsunami:pressedchange`	the [data-pressed] group	`{ button, pressed }`	A toggle button in the group is clicked. `pressed` is the new state; in a single group it is always `true`.
Chart	`tsunami:chartready`	the chart element	`{ chart }`	The Chart.js chart is created.
Code editor	`tsunami:codeeditorready`	the editor box	`{ editor }`	The Monaco editor has started.
Copy button	`tsunami:copy`	the button	`{ text }`	The text was copied.
Editor	`tsunami:editorready`	the editor element	`{ editor }`	The TinyMCE editor has started.
Filter bar	`tsunami:chipremove`	the chip	`{ value, label }`	The user removes a chip. Cancelable: `preventDefault()` keeps the chip.
Filter bar	`tsunami:filterchange`	the bar	`{ values }`	The chips changed. `values` lists the `data-value` of each chip left.
Journey	`tsunami:pick`	the clicked button	`{ step, value }`	The user picks an option in a step. `step` is the zero-based index.
OTP input	`tsunami:otpcomplete`	the OTP wrapper	`{ value }`	Every box is filled.
Phone input	`tsunami:phonechange`	the wrapper	`{ country, dial, number, value }`	The country or the number changed.
Save bar	`tsunami:dirty`	the form	`{ form, bars }`	The form went from saved to changed.
Save bar	`tsunami:clean`	the form	`{ form, bars }`	The form went back to its saved values.
Select	`tsunami:select:open`	the select wrapper	none	The list opens.
Select	`tsunami:select:close`	the select wrapper	none	The list closes.
Select	`tsunami:select:change`	the select wrapper	`{ value, selected }`	The choice changed. `selected` is an array of `{ value, label }`.
Sortable	`tsunami:reorder`	the list	`{ item, id, oldIndex, newIndex }`	A row was dragged to a new place.
Stepper	`tsunami:stepchange`	the stepper	`{ index, step, panel }`	The current step changed.
Stepper	`tsunami:stepcomplete`	the stepper	`{ index }`	Next was used on the last step and its panel is valid.
Table	`tsunami:sort`	the table	`{ column, direction, header }`	A sort is about to run. Cancelable: `preventDefault()` stops it.
Table	`tsunami:select`	the table	`{ rows, count }`	The checked rows changed.
Table	`tsunami:tablechange`	the table	`{ page, pageSize, total, filtered, sort, hidden }`	The page, filter, sort, page size or hidden columns changed.
Tabs	`tsunami:closetab`	the tab	`{ tab, panel }`	The user closes a tab. Cancelable: `preventDefault()` keeps it.
Tag input	`tsunami:tagschange`	the tag input	`{ value }`	A tag was added or removed. `value` is an array of strings.
Theme switcher	`tsunami:themechange`	`document`	`{ theme, choice }`	The theme changed. `theme` is `light` or `dark`; `choice` may also be `system`.
Time picker	`tsunami:timechange`	the time picker	`{ value }`	The time changed.
Toast	`tsunami:toast`	the toast	`{}`	A toast was shown.
Toast	`tsunami:toastclose`	the toast	`{ reason }`	A toast starts to close. `reason` is `timeout`, `close`, `action` or `api`.

TypeScript

Each release has dist/tsunami.d.ts. Include it in your tsconfig.json (or add /// <reference path="tsunami.d.ts" />) and addEventListener("tsunami:toastclose", ...) gives detail its type, and window.tsunami is typed too.