All components (244)

Recent searches

Fields · RecentSearchList

What it is and when to use it

What is shown under an empty search box: the recent searches to repeat them with one click, remove or delete them, and the scopes in which you can search.

When to use it

Under the search box of an application, when nothing has been typed yet.
useRecentSearches(key) saves the latest searches in the browser (8 by default), without repeating them, and shares them between the components with the same key. On the server the list is empty.
scopes are the scopes (#pedidos 1042); parseScopedQuery separates the scope from the text when searching.
For the command palette, the recent ones are passed as one more group of CommandPalette.

When not to

Suggestions while typing: SearchField with its options.

Keyboard: each search and each scope are buttons; the cross removes one.

Accessibility: each section is a named region and each cross says what it removes.

Fine appearance: each search carries a clock in front and is cut with an ellipsis if it does not fit.

What it looks like

Recent searches

Search only in

You haven't chosen any yet.

<RecentSearchList
  items={busquedas}
  onSelect={buscar}
  onRemove={olvidar}
  onClear={vaciar}
  scopes={alcances}
  onScope={cambiarAlcance}
/>

Props

Import it with import { RecentSearchList } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`items`required	`readonly string[]`	The searches, from the most recent to the oldest: what `useRecentSearches` gives.
`onSelect`required	`(query: string) => void`	Repeat a search.
`className`	`string`	Merged with the library classes; it does not replace them.
`onClear`	`() => void`	Delete them all. Without it the button does not appear.
`onRemove`	`(query: string) => void`	Remove one. Without it the cross does not appear.
`onScope`	`(scope: SearchScope) => void`	Start a search in a scope: usually, write `#key ` in the search box.
`scopes`	`readonly SearchScope[]`	The scopes the search box accepts (`#pedidos`): they appear as shortcuts to start a search in one.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: