Skip to content

feat(combo-box): support TypeScript generics #2271

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
+159 −46
Draft

feat(combo-box): support TypeScript generics #2271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5ec4d7
feat(combo-box): support TypeScript generics
metonym Oct 19, 2025
532bfbd
test(combo-box): demonstrate generics with custom property in slot
metonym Oct 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions COMPONENT_INDEX.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -667,8 +667,8 @@ export interface ComboBoxItem {
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
| selectedId | No | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
| items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items |
| itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item |
| items | No | <code>let</code> | No | <code>ReadonlyArray<Item></code> | <code>[]</code> | Set the combobox items |
| itemToString | No | <code>let</code> | No | <code>(item: Item) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
Expand All @@ -682,7 +682,7 @@ export interface ComboBoxItem {
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| allowCustomValue | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow custom values that are not in the items list.<br />By default, user-entered text is cleared when the combobox loses focus without selecting an item.<br />When enabled, custom text is preserved. |
| shouldFilterItem | No | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value |
| shouldFilterItem | No | <code>let</code> | No | <code>(item: Item, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value |
| translateWithId | No | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open |
| translateWithIdSelection | No | <code>let</code> | No | <code>(id: "clearSelection") => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" since a combo box can only have on selection. |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
Expand All @@ -691,24 +691,24 @@ export interface ComboBoxItem {

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- |
| -- | Yes | <code>{ item: ComboBoxItem; index: number } </code> | <code>{itemToString(item)}</code> |
| titleText | No | -- | <code>{titleText}</code> |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------ | :-------------------------------- |
| -- | Yes | <code>{ item: Item; index: number } </code> | <code>{itemToString(item)}</code> |
| titleText | No | -- | <code>{titleText}</code> |

### Events

| Event name | Type | Detail |
| :--------- | :--------- | :---------------------------------------------------------------------- |
| select | dispatched | <code>{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }</code> |
| clear | dispatched | <code>KeyboardEvent &#124; MouseEvent</code> |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
| scroll | forwarded | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------------------------------------- |
| select | dispatched | <code>{ selectedId: ComboBoxItemId; selectedItem: Item }</code> |
| clear | dispatched | <code>KeyboardEvent &#124; MouseEvent</code> |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
| scroll | forwarded | -- |

## `ComposedModal`

Expand Down
15 changes: 9 additions & 6 deletions docs/src/COMPONENT_API.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1785,7 +1785,7 @@
"name": "items",
"kind": "let",
"description": "Set the combobox items",
"type": "ReadonlyArray<ComboBoxItem>",
"type": "ReadonlyArray<Item>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
Expand All @@ -1797,7 +1797,7 @@
"name": "itemToString",
"kind": "let",
"description": "Override the display of a combobox item",
"type": "(item: ComboBoxItem) => string",
"type": "(item: Item) => string",
"value": "(item) => item.text || item.id",
"isFunction": true,
"isFunctionDeclaration": false,
Expand Down Expand Up @@ -1999,7 +1999,7 @@
"name": "shouldFilterItem",
"kind": "let",
"description": "Determine if an item should be filtered given the current combobox value",
"type": "(item: ComboBoxItem, value: string) => boolean",
"type": "(item: Item, value: string) => boolean",
"value": "() => true",
"isFunction": true,
"isFunctionDeclaration": false,
Expand Down Expand Up @@ -2095,7 +2095,7 @@
"name": "__default__",
"default": true,
"fallback": "{itemToString(item)}",
"slot_props": "{\n item: ComboBoxItem;\n index: number;\n}"
"slot_props": "{\n item: Item;\n index: number;\n}"
},
{
"name": "titleText",
Expand All @@ -2108,7 +2108,7 @@
{
"type": "dispatched",
"name": "select",
"detail": "{\n selectedId: ComboBoxItemId;\n selectedItem: ComboBoxItem;\n}"
"detail": "{\n selectedId: ComboBoxItemId;\n selectedItem: Item;\n}"
},
{
"type": "dispatched",
Expand Down Expand Up @@ -2163,7 +2163,10 @@
"ts": "interface ComboBoxItem {\n id: ComboBoxItemId;\n text: string;\n disabled?: boolean;\n}\n"
}
],
"generics": null,
"generics": [
"Item",
"Item extends ComboBoxItem = ComboBoxItem"
],
"rest_props": {
"type": "Element",
"name": "input"
Expand Down
12 changes: 7 additions & 5 deletions src/ComboBox/ComboBox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
<script>
/**
* @generics {Item extends ComboBoxItem = ComboBoxItem} Item
* @template {ComboBoxItem} Item
* @typedef {any} ComboBoxItemId
* @typedef {{ id: ComboBoxItemId; text: string; disabled?: boolean; }} ComboBoxItem
* @event {{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }} select
* @event {{ selectedId: ComboBoxItemId; selectedItem: Item }} select
* @event {KeyboardEvent | MouseEvent} clear
* @slot {{ item: ComboBoxItem; index: number }}
* @slot {{ item: Item; index: number }}
*/

/**
* Set the combobox items
* @type {ReadonlyArray<ComboBoxItem>}
* @type {ReadonlyArray<Item>}
*/
export let items = [];

/**
* Override the display of a combobox item
* @type {(item: ComboBoxItem) => string}
* @type {(item: Item) => string}
*/
export let itemToString = (item) => item.text || item.id;

Expand Down Expand Up @@ -82,7 +84,7 @@

/**
* Determine if an item should be filtered given the current combobox value
* @type {(item: ComboBoxItem, value: string) => boolean}
* @type {(item: Item, value: string) => boolean}
*/
export let shouldFilterItem = () => true;

Expand Down
13 changes: 8 additions & 5 deletions tests/ComboBox/ComboBox.test.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
import { ComboBox } from "carbon-components-svelte";
import type { ComponentProps } from "svelte";

export let items: ComponentProps<ComboBox>["items"] = [
{ id: "0", text: "Slack" },
{ id: "1", text: "Email" },
{ id: "2", text: "Fax" },
export let items = [
{ id: "0", text: "Slack", price: 100 },
{ id: "1", text: "Email", price: 200 },
{ id: "2", text: "Fax", price: 300 },
];
export let selectedId: ComponentProps<ComboBox>["selectedId"] = undefined;
export let value = "";
Expand Down Expand Up @@ -57,4 +57,7 @@
value = "";
selectedId = undefined;
}}
/>
let:item
>
<span>Item {item.price}</span>
</ComboBox>
Loading
Loading