Complex Selector @astryx-svelte/core v0.3.0 · ComplexSelector
Usage
Use ComplexSelector when a selection needs richer custom content than a Selector option row. It is intentionally one component: ComplexSelector owns the field, trigger, popover, focus restore, and changeAction flow, while the content render prop owns the selector-specific accessible structure.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Compose the dialog content from the appropriate accessible structure for the job: RadioList for a simple choice, Calendar/date inputs for date picking, TreeList or a searchable list for hierarchy, or a custom grid when two-dimensional arrow navigation is useful. |
| Do | Use the provided onChange helper from children; it already calls both onChange and changeAction and updates optimistic busy state. |
| Do | Call close() from custom content when a selection should dismiss the popup. Keep it open for multi-step content or freeform entry flows. |
| Do | Use Astryx focus hooks for custom content: useGridFocus for two-dimensional grids, useTreeFocus through TreeList for hierarchies, and useListFocus for custom linear collections. |
| Do | Evaluate custom content against WCAG 2.2: keyboard operation, focus visible/not obscured, names and roles, labels/instructions, target size, and contrast/non-text contrast are especially relevant for selector popovers. |
| Don't | Do not rebuild trigger ARIA, popover focus management, or changeAction handling in product code. |
| Don't | Do not use ComplexSelector for a plain single-column text list; use Selector instead. |