mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(types): strongly type translateWithId parameters (#1284)

Browse source
This commit is contained in:
metonym 2022-05-04 07:31:51 -07:00 • committed by GitHub
commit 0c39506dcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 112 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

14
COMPONENT_INDEX.md
View file

@ -650,7 +650,7 @@ export interface ComboBoxItem {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------- | :-------------------- | :------- | :---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| :------------------- | :-------------------- | :------- | :---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| listRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
@ -670,9 +670,9 @@ export interface ComboBoxItem {
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| shouldFilterItem | <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 |
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
| translateWithIdMenu | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids for the menu |
| translateWithIdInput | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids for the input |
| translateWithId | <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 |
| translateWithIdMenu | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the menu label based on the open state.<br />Defaults to "Open menu" and "Close menu" |
| translateWithIdInput | <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" |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
| clear | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically |
@ -2328,7 +2328,7 @@ export interface MultiSelectItem {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
| :------------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
| highlightedId | <code>let</code> | Yes | <code>null &#124; MultiSelectItemId</code> | <code>null</code> | Id of the highlighted ListBoxMenuItem |
| selectionRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
| fieldRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
@ -2351,9 +2351,9 @@ export interface MultiSelectItem {
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| sortItem | <code>let</code> | No | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) &#124; (() => void)</code> | <code>(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })</code> | Override the sorting logic<br />The default sorting compare the item text value |
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
| translateWithId | <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 |
| translateWithIdMenu | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids for the menu |
| translateWithIdInput | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids for the input |
| translateWithIdInput | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" and "Clear all items" |
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| useTitleInItem | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |

18
docs/src/COMPONENT_API.json
View file

@ -1555,8 +1555,8 @@
{
"name": "translateWithId",
"kind": "let",
"description": "Override the default translation ids",
"type": "(id: any) => string",
"description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open",
"type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
@ -1565,7 +1565,7 @@
{
"name": "translateWithIdMenu",
"kind": "let",
"description": "Override the default translation ids for the menu",
"description": "Override the menu label based on the open state.\nDefaults to \"Open menu\" and \"Close menu\"",
"type": "(id: any) => string",
"isFunction": false,
"isFunctionDeclaration": false,
@ -1575,8 +1575,8 @@
{
"name": "translateWithIdInput",
"kind": "let",
"description": "Override the default translation ids for the input",
"type": "(id: any) => string",
"description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\"",
"type": "(id: \"clearSelection\") => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
@ -6603,8 +6603,8 @@
{
"name": "translateWithId",
"kind": "let",
"description": "Override the default translation ids",
"type": "(id: any) => string",
"description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open",
"type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
@ -6623,8 +6623,8 @@
{
"name": "translateWithIdInput",
"kind": "let",
"description": "Override the default translation ids for the input",
"type": "(id: any) => string",
"description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\" and \"Clear all items\"",
"type": "(id: import(\"../ListBox/ListBoxSelection.svelte\").ListBoxSelectionTranslationId) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,

13
src/ComboBox/ComboBox.svelte
View file

@ -76,20 +76,23 @@
export let shouldFilterItem = () => true;
/**
* Override the default translation ids
* @type {(id: any) => string}
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @type {(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string}
*/
export let translateWithId = undefined;
/**
* Override the default translation ids for the menu
* Override the menu label based on the open state.
* Defaults to "Open menu" and "Close menu"
* @type {(id: any) => string}
*/
export let translateWithIdMenu = undefined;
/**
* Override the default translation ids for the input
* @type {(id: any) => string}
* Override the label of the clear button when the input has a selection.
* Defaults to "Clear selected item" since a combo box can only have on selection.
* @type {(id: "clearSelection") => string}
*/
export let translateWithIdInput = undefined;

10
src/MultiSelect/MultiSelect.svelte
View file

@ -95,8 +95,9 @@
a.text.localeCompare(b.text, locale, { numeric: true });
/**
* Override the default translation ids
* @type {(id: any) => string}
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @type {(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string}
*/
export let translateWithId = undefined;
@ -107,8 +108,9 @@
export let translateWithIdMenu = undefined;
/**
* Override the default translation ids for the input
* @type {(id: any) => string}
* Override the label of the clear button when the input has a selection.
* Defaults to "Clear selected item" and "Clear all items"
* @type {(id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string}
*/
export let translateWithIdInput = undefined;

2
tests/ComboBox.test.svelte
View file

@ -24,12 +24,14 @@
console.log(e.detail.selectedId);
}}"
translateWithId="{(id) => {
console.log(id); // "open" | "close"
return id;
}}"
translateWithIdMenu="{(id) => {
return id;
}}"
translateWithIdInput="{(id) => {
console.log(id); // "clearSelection"
return id;
}}"
let:item

2
tests/MultiSelect.test.svelte
View file

@ -21,12 +21,14 @@
e.detail; // number | FocusEvent
}}"
translateWithId="{(id) => {
console.log(id); // "open" | "close"
return id;
}}"
translateWithIdMenu="{(id) => {
return id;
}}"
translateWithIdInput="{(id) => {
console.log(id); // "clearAll" | "clearSelection"
return id;
}}"
let:item

15
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -113,22 +113,27 @@ export interface ComboBoxProps
shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
/**
* Override the default translation ids
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @default undefined
*/
translateWithId?: (id: any) => string;
translateWithId?: (
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
) => string;
/**
* Override the default translation ids for the menu
* Override the menu label based on the open state.
* Defaults to "Open menu" and "Close menu"
* @default undefined
*/
translateWithIdMenu?: (id: any) => string;
/**
* Override the default translation ids for the input
* Override the label of the clear button when the input has a selection.
* Defaults to "Clear selected item"
* @default undefined
*/
translateWithIdInput?: (id: any) => string;
translateWithIdInput?: (id: "clearSelection") => string;
/**
* Set an id for the list box component

14
types/MultiSelect/MultiSelect.svelte.d.ts vendored
View file

@ -123,10 +123,13 @@ export interface MultiSelectProps
| (() => void);
/**
* Override the default translation ids
* Override the chevron icon label based on the open state.
* Defaults to "Open menu" when closed and "Close menu" when open
* @default undefined
*/
translateWithId?: (id: any) => string;
translateWithId?: (
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
) => string;
/**
* Override the default translation ids for the menu
@ -135,10 +138,13 @@ export interface MultiSelectProps
translateWithIdMenu?: (id: any) => string;
/**
* Override the default translation ids for the input
* Override the label of the clear button when the input has a selection.
* Defaults to "Clear selected item" and "Clear all items"
* @default undefined
*/
translateWithIdInput?: (id: any) => string;
translateWithIdInput?: (
id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId
) => string;
/**
* Specify the title text