From e3ab471018b9ac94ff9de2284284dc61ba69c881 Mon Sep 17 00:00:00 2001
From: Keehun let
| Yes | null | MultiSelectItemId
| null
| Id of the highlighted ListBoxMenuItem |
-| selectionRef | No | let
| Yes | null | HTMLDivElement
| null
| Obtain a reference to the selection element |
-| fieldRef | No | let
| Yes | null | HTMLDivElement
| null
| Obtain a reference to the field box element |
-| multiSelectRef | No | let
| Yes | null | HTMLDivElement
| null
| Obtain a reference to the outer div element |
-| inputRef | No | let
| Yes | null | HTMLInputElement
| null
| Obtain a reference to the input HTML element |
-| open | No | let
| Yes | boolean
| false
| Set to `true` to open the dropdown |
-| value | No | let
| Yes | string
| ""
| Specify the multiselect value |
-| selectedIds | No | let
| Yes | ReadonlyArray
| []
| Set the selected ids |
-| items | No | let
| Yes | ReadonlyArray
| []
| Set the multiselect items |
-| itemToString | No | let
| No | (item: MultiSelectItem) => any
| (item) => item.text || item.id
| Override the display of a multiselect item |
-| itemToInput | No | let
| No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }
| (item) => {}
| Override the item name, title, labelText passed to the checkbox input |
-| size | No | let
| No | "sm" | "lg" | "xl"
| undefined
| Set the size of the combobox |
-| type | No | let
| No | "default" | "inline"
| "default"
| Specify the type of multiselect |
-| direction | No | let
| No | "bottom" | "top"
| "bottom"
| Specify the direction of the multiselect dropdown menu |
-| selectionFeedback | No | let
| No | "top" | "fixed" | "top-after-reopen"
| "top-after-reopen"
| Specify the selection feedback after selecting items |
-| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the dropdown |
-| filterable | No | let
| No | boolean
| false
| Set to `true` to filter items |
-| filterItem | No | let
| No | (item: MultiSelectItem, value: string) => string
| (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())
| Override the filtering logic
The default filtering is an exact string comparison |
-| light | No | let
| No | boolean
| false
| Set to `true` to enable the light variant |
-| locale | No | let
| No | string
| "en"
| Specify the locale |
-| placeholder | No | let
| No | string
| ""
| Specify the placeholder text |
-| sortItem | No | let
| No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)
| (a, b) => a.text.localeCompare(b.text, locale, { numeric: true })
| Override the sorting logic
The default sorting compare the item text value |
-| translateWithId | No | let
| No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string
| undefined
| Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open |
-| translateWithIdSelection | No | let
| No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string
| undefined
| Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" and "Clear all items" if more than one item is selected |
-| titleText | No | let
| No | string
| ""
| Specify the title text |
-| useTitleInItem | No | let
| No | boolean
| false
| Set to `true` to pass the item to `itemToString` in the checkbox |
-| invalid | No | let
| No | boolean
| false
| Set to `true` to indicate an invalid state |
-| invalidText | No | let
| No | string
| ""
| Specify the invalid state text |
-| warn | No | let
| No | boolean
| false
| Set to `true` to indicate an warning state |
-| warnText | No | let
| No | string
| ""
| Specify the warning state text |
-| helperText | No | let
| No | string
| ""
| Specify the helper text |
-| label | No | let
| No | string
| ""
| Specify the list box label |
-| hideLabel | No | let
| No | boolean
| false
| Set to `true` to visually hide the label text |
-| id | No | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the list box component |
-| name | No | let
| No | string
| undefined
| Specify a name attribute for the select |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| highlightedId | No | let
| Yes | null | MultiSelectItemId
| null
| Id of the highlighted ListBoxMenuItem |
+| selectionRef | No | let
| Yes | null | HTMLDivElement
| null
| Obtain a reference to the selection element |
+| fieldRef | No | let
| Yes | null | HTMLDivElement
| null
| Obtain a reference to the field box element |
+| multiSelectRef | No | let
| Yes | null | HTMLDivElement
| null
| Obtain a reference to the outer div element |
+| inputRef | No | let
| Yes | null | HTMLInputElement
| null
| Obtain a reference to the input HTML element |
+| open | No | let
| Yes | boolean
| false
| Set to `true` to open the dropdown |
+| value | No | let
| Yes | string
| ""
| Specify the multiselect value |
+| selectedIds | No | let
| Yes | ReadonlyArray
| []
| Set the selected ids |
+| items | No | let
| Yes | ReadonlyArray
| []
| Set the multiselect items |
+| itemToString | No | let
| No | (item: MultiSelectItem) => any
| (item) => item.text || item.id
| Override the display of a multiselect item |
+| itemToInput | No | let
| No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }
| (item) => {}
| Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
+| size | No | let
| No | "sm" | "lg" | "xl"
| undefined
| Set the size of the combobox |
+| type | No | let
| No | "default" | "inline"
| "default"
| Specify the type of multiselect |
+| direction | No | let
| No | "bottom" | "top"
| "bottom"
| Specify the direction of the multiselect dropdown menu |
+| selectionFeedback | No | let
| No | "top" | "fixed" | "top-after-reopen"
| "top-after-reopen"
| Specify the selection feedback after selecting items |
+| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the dropdown |
+| filterable | No | let
| No | boolean
| false
| Set to `true` to filter items |
+| filterItem | No | let
| No | (item: MultiSelectItem, value: string) => string
| (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())
| Override the filtering logic
The default filtering is an exact string comparison |
+| light | No | let
| No | boolean
| false
| Set to `true` to enable the light variant |
+| locale | No | let
| No | string
| "en"
| Specify the locale |
+| placeholder | No | let
| No | string
| ""
| Specify the placeholder text |
+| sortItem | No | let
| No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)
| (a, b) => a.text.localeCompare(b.text, locale, { numeric: true })
| Override the sorting logic
The default sorting compare the item text value |
+| translateWithId | No | let
| No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string
| undefined
| Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open |
+| translateWithIdSelection | No | let
| No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string
| undefined
| Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" and "Clear all items" if more than one item is selected |
+| titleText | No | let
| No | string
| ""
| Specify the title text |
+| useTitleInItem | No | let
| No | boolean
| false
| Set to `true` to pass the item to `itemToString` in the checkbox |
+| invalid | No | let
| No | boolean
| false
| Set to `true` to indicate an invalid state |
+| invalidText | No | let
| No | string
| ""
| Specify the invalid state text |
+| warn | No | let
| No | boolean
| false
| Set to `true` to indicate an warning state |
+| warnText | No | let
| No | string
| ""
| Specify the warning state text |
+| helperText | No | let
| No | string
| ""
| Specify the helper text |
+| label | No | let
| No | string
| ""
| Specify the list box label |
+| hideLabel | No | let
| No | boolean
| false
| Set to `true` to visually hide the label text |
+| id | No | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the list box component |
+| name | No | let
| No | string
| undefined
| Specify a name attribute for the select |
### Slots
diff --git a/docs/package.json b/docs/package.json
index 3feede51..961d91a1 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -22,7 +22,7 @@
"prism-svelte": "^0.4.7",
"prismjs": "^1.28.0",
"remark-slug": "^6.0.0",
- "svelte": "^4.2.0",
+ "svelte": "^3",
"vite": "^3.0.9"
},
"routify": {
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index cf5a3652..c7102e90 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -7006,8 +7006,8 @@
{
"name": "itemToInput",
"kind": "let",
- "description": "Override the item name, title, labelText passed to the checkbox input",
- "type": "(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }",
+ "description": "Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs.",
+ "type": "(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }",
"value": "(item) => {}",
"isFunction": true,
"isFunctionDeclaration": false,
diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx
index 35387f64..563fee26 100644
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/docs/src/pages/components/MultiSelect.svx
@@ -11,7 +11,12 @@
## Default
-By default, items will be ordered alphabetically based on the `item.text` value. To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering).
+By default, items will be ordered alphabetically based on the `item.text` value.
+To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering).
+
+MultiSelect provides interactivity for a list of checkbox inputs. Those
+checkboxes will remain rendered in the DOM and are submittable within forms.
+Checkbox attributes can be adjusted via the `itemToInput` prop.
let
| No | "default" | "field" | "small" | "lg" | "xl"
| "default"
| Specify the size of button |
| expressive | No | let
| No | boolean
| false
| Set to `true` to use Carbon's expressive typesetting |
| isSelected | No | let
| No | boolean
| false
| Set to `true` to enable the selected state for an icon-only, ghost button |
-| icon | No | let
| No | typeof import("svelte").SvelteComponent
| undefined
| Specify the icon to render |
+| icon | No | let
| No | typeof import("svelte").SvelteComponent
| undefined
| Specify the icon to renderlet
| No | string
| undefined
| Specify the ARIA label for the button icon |
| tooltipAlignment | No | let
| No | "start" | "center" | "end"
| "center"
| Set the alignment of the tooltip relative to the icon.let
| No | "top" | "right" | "bottom" | "left"
| "bottom"
| Set the position of the tooltip relative to the icon |
@@ -395,6 +395,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
| -- | Yes | { props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }
| -- |
+| icon | No | -- | -- |
### Events
@@ -1666,15 +1667,13 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let
| Yes | null | HTMLButtonElement
| null
| Obtain a reference to the HTML button element |
+| ref | No | let
| Yes | HTMLButtonElement
| null
| Obtain a reference to the HTML button element |
| isActive | No | let
| No | boolean
| false
| Set to `true` to use the active variant |
| icon | No | let
| No | typeof import("svelte").SvelteComponent
| undefined
| Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------------------- |
-| -- | Yes | -- | <svelte:component this="{icon}" size="{20}" />
|
+None.
### Events
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 89844c68..9680d6ba 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -500,7 +500,7 @@
{
"name": "icon",
"kind": "let",
- "description": "Specify the icon to render",
+ "description": "Specify the icon to render\nAlternatively, use the named slot \"icon\" (e.g., `