diff options
| author | Ronan Kearns <[email protected]> | 2026-01-21 10:25:34 -0500 |
|---|---|---|
| committer | GitHub <[email protected]> | 2026-01-21 09:25:34 -0600 |
| commit | 6ac8c85b3441ddd5522d37e3e28cabc604d34d70 (patch) | |
| tree | 25ebc49f540b68ef8f3478a24e55f9925706f16a /packages/ui/src | |
| parent | 19f68382fd3501d1abc3ca9c49aee61f2c01fdb4 (diff) | |
| download | opencode-6ac8c85b3441ddd5522d37e3e28cabc604d34d70.tar.gz opencode-6ac8c85b3441ddd5522d37e3e28cabc604d34d70.zip | |
feat(app): model tooltip metadata in chooser (per Figma request) (#9707)
Diffstat (limited to 'packages/ui/src')
| -rw-r--r-- | packages/ui/src/components/list.tsx | 69 |
1 files changed, 37 insertions, 32 deletions
diff --git a/packages/ui/src/components/list.tsx b/packages/ui/src/components/list.tsx index fc9fa5405..6d7ad1da6 100644 --- a/packages/ui/src/components/list.tsx +++ b/packages/ui/src/components/list.tsx @@ -24,6 +24,7 @@ export interface ListProps<T> extends FilteredListProps<T> { activeIcon?: IconProps["name"] filter?: string search?: ListSearchProps | boolean + itemWrapper?: (item: T, node: JSX.Element) => JSX.Element } export interface ListRef { @@ -245,39 +246,43 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void }) </Show> <div data-slot="list-items"> <For each={group.items}> - {(item, i) => ( - <button - data-slot="list-item" - data-key={props.key(item)} - data-active={props.key(item) === active()} - data-selected={item === props.current} - onClick={() => handleSelect(item, i())} - type="button" - onMouseMove={(event) => { - if (!moved(event)) return - setStore("mouseActive", true) - setActive(props.key(item)) - }} - onMouseLeave={() => { - if (!store.mouseActive) return - setActive(null) - }} - > - {props.children(item)} - <Show when={item === props.current}> - <span data-slot="list-item-selected-icon"> - <Icon name="check-small" /> - </span> - </Show> - <Show when={props.activeIcon}> - {(icon) => ( - <span data-slot="list-item-active-icon"> - <Icon name={icon()} /> + {(item, i) => { + const node = ( + <button + data-slot="list-item" + data-key={props.key(item)} + data-active={props.key(item) === active()} + data-selected={item === props.current} + onClick={() => handleSelect(item, i())} + type="button" + onMouseMove={(event) => { + if (!moved(event)) return + setStore("mouseActive", true) + setActive(props.key(item)) + }} + onMouseLeave={() => { + if (!store.mouseActive) return + setActive(null) + }} + > + {props.children(item)} + <Show when={item === props.current}> + <span data-slot="list-item-selected-icon"> + <Icon name="check-small" /> </span> - )} - </Show> - </button> - )} + </Show> + <Show when={props.activeIcon}> + {(icon) => ( + <span data-slot="list-item-active-icon"> + <Icon name={icon()} /> + </span> + )} + </Show> + </button> + ) + if (props.itemWrapper) return props.itemWrapper(item, node) + return node + }} </For> </div> </div> |