diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 036a2a74ae..ff7097357b 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -351,10 +351,18 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- | -| sizes | No | let | Yes | Record | { sm: false, md: false, lg: false, xlg: false, max: false, } | Carbon grid sizes as an object | -| size | No | let | Yes | BreakpointSize | undefined | Determine the current Carbon grid breakpoint size | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------- | ----------- | +| sizes | No | let | Yes | Record | { | + + sm: false, + md: false, + lg: false, + xlg: false, + max: false, + +} | Carbon grid sizes as an object | +| size | No | let | Yes | BreakpointSize | undefined | Determine the current Carbon grid breakpoint size | ### Slots @@ -538,26 +546,34 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | -| showMoreLess | No | let | Yes | boolean | false | Set to `true` to enable the show more/less button | -| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | -| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | -| code | No | let | No | string | undefined | Set the code snippet text.
Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).

NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | -| copy | No | let | No | (code: string) => void | async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.

Provide a custom function to override this behavior. | -| hideCopyButton | No | let | No | boolean | false | Set to `true` to hide the copy button | -| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant.
Only applies to the "single", "multi" types | -| wrapText | No | let | No | boolean | false | Set to `true` to wrap the text.

NOTE: this prop only works with the `type="multi"` variant | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | -| copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon | -| copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button | -| feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | -| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | -| showLessText | No | let | No | string | "Show less" | Specify the show less text.

NOTE: this prop only works with the `type="multi"` variant | -| showMoreText | No | let | No | string | "Show more" | Specify the show more text

NOTE: this prop only works with the `type="multi"` variant | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | +| showMoreLess | No | let | Yes | boolean | false | Set to `true` to enable the show more/less button | +| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | +| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | +| code | No | let | No | string | undefined | Set the code snippet text.
Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).

NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | +| copy | No | let | No | (code: string) => void | async (code) => { | + + try { + await navigator.clipboard.writeText(code); + } catch (e) { + console.log(e); + } + +} | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.

Provide a custom function to override this behavior. | +| hideCopyButton | No | let | No | boolean | false | Set to `true` to hide the copy button | +| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant.
Only applies to the "single", "multi" types | +| wrapText | No | let | No | boolean | false | Set to `true` to wrap the text.

NOTE: this prop only works with the `type="multi"` variant | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon | +| copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button | +| feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | +| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| showLessText | No | let | No | string | "Show less" | Specify the show less text.

NOTE: this prop only works with the `type="multi"` variant | +| showMoreText | No | let | No | string | "Show more" | Specify the show more text

NOTE: this prop only works with the `type="multi"` variant | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | ### Slots @@ -656,32 +672,43 @@ export interface ComboBoxItem { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| listRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | -| ref | 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 combobox menu dropdown | -| value | No | let | Yes | string | "" | Specify the selected combobox value | -| selectedId | No | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id | -| items | No | let | No | ReadonlyArray | [] | Set the combobox items | -| itemToString | No | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | -| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | -| size | No | let | No | "sm" | "lg" | undefined | Set the size of the combobox | -| disabled | No | let | No | boolean | false | Set to `true` to disable the combobox | -| titleText | No | let | No | string | "" | Specify the title text of the combobox | -| placeholder | No | let | No | string | "" | Specify the placeholder text | -| helperText | No | let | No | string | "" | Specify the helper text | -| invalidText | No | let | No | string | "" | Specify the invalid state text | -| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | -| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | No | let | No | string | "" | Specify the warning state text | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| shouldFilterItem | No | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox 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: "clearSelection") => string | undefined | 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. | -| 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 input | -| clear | No | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| listRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | +| ref | 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 combobox menu dropdown | +| value | No | let | Yes | string | "" | Specify the selected combobox value | +| selectedId | No | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id | +| items | No | let | No | ReadonlyArray | [] | Set the combobox items | +| itemToString | No | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | +| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | +| size | No | let | No | "sm" | "lg" | undefined | Set the size of the combobox | +| disabled | No | let | No | boolean | false | Set to `true` to disable the combobox | +| titleText | No | let | No | string | "" | Specify the title text of the combobox | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| helperText | No | let | No | string | "" | Specify the helper text | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| shouldFilterItem | No | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox 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: "clearSelection") => string | undefined | 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. | +| 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 input | +| clear | No | function | No | (options?: { focus?: boolean; }) => void | () => { | + + prevSelectedId = null; + highlightedIndex = -1; + highlightedId = undefined; + selectedId = undefined; + selectedItem = undefined; + open = false; + value = ""; + if (options?.focus !== false) ref?.focus(); + +} | Clear the combo box programmatically | ### Slots @@ -899,13 +926,21 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -| feedback | No | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | -| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | -| iconDescription | No | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | -| text | Yes | let | No | string | undefined | Specify the text to copy | -| copy | No | let | No | (text: string) => void | async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ----------------------------------- | -------------------------------- | ------------------------------------------------------ | +| feedback | No | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | +| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| iconDescription | No | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | +| text | Yes | let | No | string | undefined | Specify the text to copy | +| copy | No | let | No | (text: string) => void | async (text) => { | + + try { + await navigator.clipboard.writeText(text); + } catch (e) { + console.log(e); + } + +} | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | ### Slots @@ -1254,21 +1289,25 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files | -| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | -| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader | -| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types | -| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files | -| clearFiles | No | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files | -| labelTitle | No | let | No | string | "" | Specify the label title.
Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) | -| labelDescription | No | let | No | string | "" | Specify the label description.
Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) | -| kind | No | let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button | -| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button | -| buttonLabel | No | let | No | string | "" | Specify the button label | -| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | -| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :----------------- | :------- | -------------------------------------------------------- | ------------------------ | ------------------------------------------ | +| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files | +| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader | +| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types | +| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files | +| clearFiles | No | const | No | () => void | () => { | + + files = []; + +} | Programmatically clear the uploaded files | +| labelTitle | No | let | No | string | "" | Specify the label title.
Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) | +| labelDescription | No | let | No | string | "" | Specify the label description.
Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) | +| kind | No | let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button | +| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button | +| buttonLabel | No | let | No | string | "" | Specify the button label | +| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | +| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input | ### Slots @@ -1835,9 +1874,10 @@ export interface HeaderSearchResult { ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ | -| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span>– {result.description}</span>{/if} | +| Slot name | Default | Props | Fallback | +| :----------------------------------------------------------------------------------------- | :------ | :---------------------------------------------------------- | :------------------ | +| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text} | +|
{#if result.description}<span>– {result.description}</span>{/if} | ### Events @@ -1874,16 +1914,26 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -| error | No | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | -| loaded | No | let | Yes | boolean | false | Set to `true` when the image is loaded | -| loading | No | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | -| src | No | let | No | string | "" | Specify the image source | -| alt | No | let | No | string | "" | Specify the image alt text | -| ratio | No | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper | -| fadeIn | No | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | -| loadImage | No | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| error | No | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | +| loaded | No | let | Yes | boolean | false | Set to `true` when the image is loaded | +| loading | No | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | +| src | No | let | No | string | "" | Specify the image source | +| alt | No | let | No | string | "" | Specify the image alt text | +| ratio | No | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper | +| fadeIn | No | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | +| loadImage | No | const | No | (url?: string) => void | (url) => { | + + if (image != null) image = null; + loaded = false; + error = false; + image = new Image(); + image.src = url || src; + image.onload = () => (loaded = true); + image.onerror = () => (error = true); + +} | Method invoked to load the image provided a `src` value | ### Slots @@ -2137,13 +2187,21 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------ | -| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| selectionCount | No | let | No | number | undefined | Specify the number of selected items | -| disabled | No | let | No | boolean | false | Set to `true` to disable the list box selection | -| translationIds | No | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids | -| translateWithId | No | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------- | :------- | :----------------- | :------- | --------------------------------------- | ---------------------- | ------------------------------------------------ | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| selectionCount | No | let | No | number | undefined | Specify the number of selected items | +| disabled | No | let | No | boolean | false | Set to `true` to disable the list box selection | +| translationIds | No | const | No | { | + + clearAll: "clearAll", + clearSelection: "clearSelection", + +} | { +clearAll: "clearAll", +clearSelection: "clearSelection", +} | Default translation ids | +| translateWithId | No | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | ### Slots @@ -2199,12 +2257,18 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :-------------------- | :------- | ----------------------- | ---------------------------------------------------- | --------------------------------------------------------------- | -| value | No | let | Yes | any | "" | Provide a value to persist | -| key | No | let | No | string | "local-storage-key" | Specify the local storage key | -| clearItem | No | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage | -| clearAll | No | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :-------------------- | :------- | ----------------------- | -------------------------------- | ----------------------------- | +| value | No | let | Yes | any | "" | Provide a value to persist | +| key | No | let | No | string | "local-storage-key" | Specify the local storage key | +| clearItem | No | function | No | () => void | () => { | + + localStorage.removeItem(key); + +} | Remove the persisted key value from the browser's local storage | +| clearAll | No | function | No | () => void | () => { +localStorage.clear(); +} | Clear all key values from the browser's local storage | ### Slots @@ -2359,43 +2423,45 @@ export interface MultiSelectItem { ### Props -| 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" | 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" | 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 @@ -2489,31 +2555,36 @@ export type NumberInputTranslationId = "increment" | "decrement"; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | No | let | Yes | null | number | null | Specify the input value.
Use `null` to denote "no value" | -| size | No | let | No | "sm" | "lg" | undefined | Set the size of the input | -| step | No | let | No | number | 1 | Specify the step increment | -| max | No | let | No | number | undefined | Specify the maximum value | -| min | No | let | No | number | undefined | Specify the minimum value | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| readonly | No | let | No | boolean | false | Set to `true` for the input to be read-only | -| allowEmpty | No | let | No | boolean | false | Set to `true` to allow for an empty value | -| disabled | No | let | No | boolean | false | Set to `true` to disable the input | -| hideSteppers | No | let | No | boolean | false | Set to `true` to hide the input stepper buttons | -| iconDescription | No | let | No | string | "" | Specify the ARIA label for the increment icons | -| 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 label text | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| translateWithId | No | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | -| translationIds | No | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | No | let | No | string | undefined | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | No | let | Yes | null | number | null | Specify the input value.
Use `null` to denote "no value" | +| size | No | let | No | "sm" | "lg" | undefined | Set the size of the input | +| step | No | let | No | number | 1 | Specify the step increment | +| max | No | let | No | number | undefined | Specify the maximum value | +| min | No | let | No | number | undefined | Specify the minimum value | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| readonly | No | let | No | boolean | false | Set to `true` for the input to be read-only | +| allowEmpty | No | let | No | boolean | false | Set to `true` to allow for an empty value | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| hideSteppers | No | let | No | boolean | false | Set to `true` to hide the input stepper buttons | +| iconDescription | No | let | No | string | "" | Specify the ARIA label for the increment icons | +| 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 label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | No | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| translationIds | No | const | No | { increment: "increment"; decrement: "decrement" } | { | + + increment: "increment", + decrement: "decrement", + +} | Default translation ids | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | undefined | Specify a name attribute for the input | ### Slots @@ -2625,10 +2696,16 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| -- | Yes | -- | -- | -| menu | No | -- | <svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu\_\_icon {iconClass}"
/> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------------- | +| -- | Yes | -- | -- | +| menu | No | -- | <svelte:component | + +
this="{icon}" +
aria-label="{iconDescription}" +
title="{iconDescription}" +
class="bx--overflow-menu\_\_icon {iconClass}" +
/> | ### Events @@ -2659,9 +2736,12 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ | -| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}">
{text}
</div> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :--------------------------------------------------------------------------- | +| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}"> | + +
{text} +
</div> | ### Events @@ -2674,24 +2754,27 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ | -| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page | -| page | No | let | Yes | number | 1 | Specify the current page index | -| totalItems | No | let | No | number | 0 | Specify the total number of items | -| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination | -| forwardText | No | let | No | string | "Next page" | Specify the forward button text | -| backwardText | No | let | No | string | "Previous page" | Specify the backward button text | -| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text | -| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text | -| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text | -| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input | -| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input | -| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes | -| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown | -| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text | -| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------------------------------------------------------- | :--------------------------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | +| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page | +| page | No | let | Yes | number | 1 | Specify the current page index | +| totalItems | No | let | No | number | 0 | Specify the total number of items | +| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination | +| forwardText | No | let | No | string | "Next page" | Specify the forward button text | +| backwardText | No | let | No | string | "Previous page" | Specify the backward button text | +| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text | +| itemText | No | let | No | (min: number, max: number) => string | (min, max) => | +| \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text | +| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => | +| \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text | +| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input | +| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input | +| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes | +| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown | +| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text | +| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => | +| \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -4132,56 +4215,65 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | No | let | Yes | null | number | string | "" | Specify the input value.

`value` will be set to `null` if type="number"
and the value is empty. | -| size | No | let | No | "sm" | "lg" | undefined | Set the size of the input | -| placeholder | No | let | No | string | "" | Specify the placeholder text | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | No | let | No | boolean | false | Set to `true` to disable the input | -| helperText | No | let | No | string | "" | Specify the helper text | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | No | let | No | string | undefined | Specify a name attribute for the input | -| labelText | No | let | No | string | "" | Specify the label text | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| 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 | -| required | No | let | No | boolean | false | Set to `true` to mark the field as required | -| inline | No | let | No | boolean | false | Set to `true` to use the inline variant | -| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | No | let | Yes | null | number | string | "" | Specify the input value
`value` will be set to `null` if `typeof value === "number"` and `value` is empty | +| size | No | let | No | "sm" | "md" | "lg" | "md" | Set the size of the input | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant
For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release
@deprecated | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| helperText | No | let | No | string | "" | Specify the helper text | +| counter | No | let | No | boolean | false | Set to `true` to enable display the character counter. Requires `maxCount` to be set. | +| maxCount | No | let | No | number | undefined | Specify the maximum number of characters/words allowed
This is needed in order for `counter` to display | +| 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 | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | undefined | Specify a name attribute for the input | +| inline | No | let | No | boolean | false | Set to `true` to use the inline variant | +| required | No | let | No | boolean | false | Set to `true` to mark the field as required | +| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant | +| labelAttributes | No | let | No | import('svelte/elements').HTMLLabelAttributes | {} | Set HTML attributes on the `label` element | +| inputAttributes | No | let | No | import('svelte/elements').HTMLInputAttributes | {} | Set HTML attributes on the `input` element | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | +| Slot name | Default | Props | Fallback | +| :---------- | :------ | :---- | :------------------------- | +| helperText | No | -- | {helperText} | +| invalidText | No | -- | {invalidText} | +| labelText | No | -- | {labelText} | +| warnText | No | -- | {warnText} | ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------------------------------- | -| change | dispatched | null | number | string | -| input | dispatched | null | number | string | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | -| paste | forwarded | -- | +| Event name | Type | Detail | +| :----------- | :-------- | :----- | +| click | forwarded | -- | +| pointerup | forwarded | -- | +| pointerover | forwarded | -- | +| pointerenter | forwarded | -- | +| pointerleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| keydown | forwarded | -- | +| keyup | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| paste | forwarded | -- | ## `TextInputSkeleton` ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ | -| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------ | ---------------------------------------------------------- | +| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text | +| divAttributes | No | let | No | import('svelte/elements').HTMLDivAttributes | {} | Specify the div HTML attributes for the skeleton container | ### Slots @@ -4189,12 +4281,13 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | +| Event name | Type | Detail | +| :----------- | :-------- | :----- | +| click | forwarded | -- | +| pointerup | forwarded | -- | +| pointerover | forwarded | -- | +| pointerenter | forwarded | -- | +| pointerleave | forwarded | -- | ## `Theme` @@ -4206,15 +4299,27 @@ export type CarbonTheme = "white" | "g10" | "g90" | "g100"; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | -| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | -| persist | No | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | -| persistKey | No | let | No | string | "theme" | Specify the local storage key | -| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme | -| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props | -| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | +| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | +| persist | No | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | +| persistKey | No | let | No | string | "theme" | Specify the local storage key | +| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme | +| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { | + + themes: ["white", "g100"], + labelA: "", + labelB: "", + labelText: "Dark mode", + hideLabel: false, + +} | Override the default toggle props | +| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { +themes: themeKeys, +labelText: "Themes", +hideLabel: false, +} | Override the default select props | ### Slots @@ -4444,10 +4549,11 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- | -| active | No | let | Yes | undefined | boolean | undefined | Use a boolean to show or hide the toolbar | -| formatTotalSelected | No | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------------------------------------------------------------- | :------------------------------------- | :--------------- | :------- | ---------------------------------------------- | ------------------------ | ----------------------------------------- | +| active | No | let | Yes | undefined | boolean | undefined | Use a boolean to show or hide the toolbar | +| formatTotalSelected | No | let | No | (totalSelected: number) => string | (totalSelected) => | +| \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text | ### Slots @@ -4682,20 +4788,62 @@ export interface TreeNode { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded | -| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected | -| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | -| children | No | let | No | Array | [] | Provide an array of children nodes to render | -| size | No | let | No | "xs" | "sm" | "sm" | Specify the TreeView size | -| labelText | No | let | No | string | "" | Specify the label text | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes | -| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes | -| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); } | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | -| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | -| showNode | No | function | No | (id: TreeNodeId) => void | () => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); // Break out of the loop if the node is found. break; } } } | Programmatically show a node by `id`.
The matching node will be expanded, selected, and focused | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :-------------------- | :------- | -------------------------------------- | ------------------ | --------------------------------------------------------------- | +| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded | +| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected | +| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | +| children | No | let | No | Array | [] | Provide an array of children nodes to render | +| size | No | let | No | "xs" | "sm" | "sm" | Specify the TreeView size | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| expandAll | No | function | No | () => void | () => { | + + expandedIds = [...nodeIds]; + +} | Programmatically expand all nodes | +| collapseAll | No | function | No | () => void | () => { +expandedIds = []; +} | Programmatically collapse all nodes | +| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { +expandedIds = nodes +.filter( +(node) => +filterNode(node) || +node.children?.some((child) => filterNode(child) && child.children) +) +.map((node) => node.id); +} | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | +| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { +expandedIds = nodes +.filter((node) => expandedIds.includes(node.id) && !filterNode(node)) +.map((node) => node.id); +} | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | +| showNode | No | function | No | (id: TreeNodeId) => void | () => { +for (const child of children) { +const nodes = findNodeById(child, id); + + if (nodes) { + const ids = nodes.map((node) => node.id); + const nodeIds = new Set(ids); + + expandNodes((node) => nodeIds.has(node.id)); + + const lastId = ids[ids.length - 1]; + + activeId = lastId; + selectedIds = [lastId]; + + tick().then(() => { + ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); + }); + + // Break out of the loop if the node is found. + break; + } + } + +} | Programmatically show a node by `id`.
The matching node will be expanded, selected, and focused | ### Slots diff --git a/docs/package-lock.json b/docs/package-lock.json index 5e5a5a1293..1a9b52b104 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -25,7 +25,7 @@ } }, "..": { - "version": "0.82.7", + "version": "1.0.0-next.0", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -39,17 +39,17 @@ "autoprefixer": "^10.4.8", "carbon-icons-svelte": "^12.1.0", "postcss": "^8.4.16", - "prettier": "^3.1.1", - "prettier-plugin-svelte": "^3.1.2", + "prettier": "^2.8.8", + "prettier-plugin-svelte": "^2.10.1", "rollup": "^2.78.1", "rollup-plugin-svelte": "^7.1.0", "rollup-plugin-terser": "^7.0.2", "sass": "^1.49.11", "standard-version": "^9.5.0", - "sveld": "^0.19.0", + "sveld": "^0.19.1", "svelte": "^4.2.0", "svelte-check": "^3.4.6", - "typescript": "^4.7.4" + "typescript": "^5.3.3" } }, "node_modules/@ampproject/remapping": { diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index a86fb2a074..81ef573014 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -409,7 +409,7 @@ "kind": "let", "description": "Carbon grid sizes as an object", "type": "Record", - "value": "{ sm: false, md: false, lg: false, xlg: false, max: false, }", + "value": "{\r sm: false,\r md: false,\r lg: false,\r xlg: false,\r max: false,\r }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -1041,7 +1041,7 @@ "kind": "let", "description": "By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.\n\nProvide a custom function to override this behavior.", "type": "(code: string) => void", - "value": "async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }", + "value": "async (code) => {\r try {\r await navigator.clipboard.writeText(code);\r } catch (e) {\r console.log(e);\r }\r }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -1732,7 +1732,7 @@ "kind": "function", "description": "Clear the combo box programmatically", "type": "(options?: { focus?: boolean; }) => void", - "value": "() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = \"\"; if (options?.focus !== false) ref?.focus(); }", + "value": "() => {\r prevSelectedId = null;\r highlightedIndex = -1;\r highlightedId = undefined;\r selectedId = undefined;\r selectedItem = undefined;\r open = false;\r value = \"\";\r if (options?.focus !== false) ref?.focus();\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -2322,7 +2322,7 @@ "kind": "let", "description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text", "type": "(text: string) => void", - "value": "async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }", + "value": "async (text) => {\r try {\r await navigator.clipboard.writeText(text);\r } catch (e) {\r console.log(e);\r }\r }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -3791,7 +3791,7 @@ "kind": "const", "description": "Programmatically clear the uploaded files", "type": "() => void", - "value": "() => { files = []; }", + "value": "() => {\r files = [];\r }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -5397,7 +5397,7 @@ { "name": "__default__", "default": true, - "fallback": "{result.text}\n {#if result.description}– {result.description}{/if}", + "fallback": "{result.text}\r\n {#if result.description}– {result.description}{/if}", "slot_props": "{ result: HeaderSearchResult; index: number }" } ], @@ -5527,7 +5527,7 @@ "kind": "const", "description": "Method invoked to load the image provided a `src` value", "type": "(url?: string) => void", - "value": "(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }", + "value": "(url) => {\r if (image != null) image = null;\r loaded = false;\r error = false;\r image = new Image();\r image.src = url || src;\r image.onload = () => (loaded = true);\r image.onerror = () => (error = true);\r }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -6259,8 +6259,8 @@ "name": "translationIds", "kind": "const", "description": "Default translation ids", - "type": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", - "value": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", + "type": "{\r clearAll: \"clearAll\",\r clearSelection: \"clearSelection\",\r }", + "value": "{\r clearAll: \"clearAll\",\r clearSelection: \"clearSelection\",\r }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -6411,7 +6411,7 @@ "kind": "function", "description": "Remove the persisted key value from the browser's local storage", "type": "() => void", - "value": "() => { localStorage.removeItem(key); }", + "value": "() => {\r localStorage.removeItem(key);\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -6423,7 +6423,7 @@ "kind": "function", "description": "Clear all key values from the browser's local storage", "type": "() => void", - "value": "() => { localStorage.clear(); }", + "value": "() => {\r localStorage.clear();\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -7119,7 +7119,7 @@ "kind": "let", "description": "Override the filtering logic\nThe default filtering is an exact string comparison", "type": "(item: MultiSelectItem, value: string) => string", - "value": "(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())", + "value": "(item, value) =>\r item.text.toLowerCase().includes(value.trim().toLowerCase())", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -7179,7 +7179,7 @@ "kind": "let", "description": "Override the sorting logic\nThe default sorting compare the item text value", "type": "((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)", - "value": "(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })", + "value": "(a, b) =>\r a.text.localeCompare(b.text, locale, { numeric: true })", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -7810,7 +7810,7 @@ "kind": "const", "description": "Default translation ids", "type": "{ increment: \"increment\"; decrement: \"decrement\" }", - "value": "{ increment: \"increment\", decrement: \"decrement\", }", + "value": "{\r increment: \"increment\",\r decrement: \"decrement\",\r }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -8131,7 +8131,7 @@ { "name": "menu", "default": false, - "fallback": "", + "fallback": "", "slot_props": "{}" } ], @@ -8268,7 +8268,7 @@ { "name": "__default__", "default": true, - "fallback": "
\n {text}\n
", + "fallback": "
\r\n {text}\r\n
", "slot_props": "{}" } ], @@ -8360,7 +8360,7 @@ "kind": "let", "description": "Override the item text", "type": "(min: number, max: number) => string", - "value": "(min, max) => `${min}–${max} item${max === 1 ? \"\" : \"s\"}`", + "value": "(min, max) =>\r `${min}–${max} item${max === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -8372,7 +8372,7 @@ "kind": "let", "description": "Override the item range text", "type": "(min: number, max: number, total: number) => string", - "value": "(min, max, total) => `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`", + "value": "(min, max, total) =>\r `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -8456,7 +8456,7 @@ "kind": "let", "description": "Override the page range text", "type": "(current: number, total: number) => string", - "value": "(current, total) => `of ${total} page${total === 1 ? \"\" : \"s\"}`", + "value": "(current, total) =>\r `of ${total} page${total === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -12698,28 +12698,41 @@ "filePath": "src/TextInput/TextInput.svelte", "props": [ { - "name": "size", + "name": "value", "kind": "let", - "description": "Set the size of the input", - "type": "\"sm\" | \"lg\"", + "description": "Specify the input value\n`value` will be set to `null` if `typeof value === \"number\"` and `value` is empty", + "type": "null | number | string", + "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, "constant": false, - "reactive": false + "reactive": true }, { - "name": "value", + "name": "ref", "kind": "let", - "description": "Specify the input value.\n\n`value` will be set to `null` if type=\"number\"\nand the value is empty.", - "type": "null | number | string", - "value": "\"\"", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, "constant": false, "reactive": true }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the input", + "type": "\"sm\" | \"md\" | \"lg\"", + "value": "\"md\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "placeholder", "kind": "let", @@ -12735,7 +12748,7 @@ { "name": "light", "kind": "let", - "description": "Set to `true` to enable the light variant", + "description": "Set to `true` to enable the light variant\nFor use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color\nThe light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release\n@deprecated ", "type": "boolean", "value": "false", "isFunction": false, @@ -12757,9 +12770,9 @@ "reactive": false }, { - "name": "helperText", + "name": "labelText", "kind": "let", - "description": "Specify the helper text", + "description": "Specify the label text", "type": "string", "value": "\"\"", "isFunction": false, @@ -12769,11 +12782,11 @@ "reactive": false }, { - "name": "id", + "name": "hideLabel", "kind": "let", - "description": "Set an id for the input element", - "type": "string", - "value": "\"ccs-\" + Math.random().toString(36)", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12781,10 +12794,11 @@ "reactive": false }, { - "name": "name", + "name": "helperText", "kind": "let", - "description": "Specify a name attribute for the input", + "description": "Specify the helper text", "type": "string", + "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12792,11 +12806,11 @@ "reactive": false }, { - "name": "labelText", + "name": "counter", "kind": "let", - "description": "Specify the label text", - "type": "string", - "value": "\"\"", + "description": "Set to `true` to enable display the character counter. Requires `maxCount` to be set.", + "type": "boolean", + "value": "false", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12804,11 +12818,10 @@ "reactive": false }, { - "name": "hideLabel", + "name": "maxCount", "kind": "let", - "description": "Set to `true` to visually hide the label text", - "type": "boolean", - "value": "false", + "description": "Specify the maximum number of characters/words allowed\nThis is needed in order for `counter` to display", + "type": "number", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12864,23 +12877,22 @@ "reactive": false }, { - "name": "ref", + "name": "id", "kind": "let", - "description": "Obtain a reference to the input HTML element", - "type": "null | HTMLInputElement", - "value": "null", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, "constant": false, - "reactive": true + "reactive": false }, { - "name": "required", + "name": "name", "kind": "let", - "description": "Set to `true` to mark the field as required", - "type": "boolean", - "value": "false", + "description": "Specify a name attribute for the input", + "type": "string", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12899,6 +12911,18 @@ "constant": false, "reactive": false }, + { + "name": "required", + "kind": "let", + "description": "Set to `true` to mark the field as required", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "readonly", "kind": "let", @@ -12910,40 +12934,74 @@ "isRequired": false, "constant": false, "reactive": false + }, + { + "name": "labelAttributes", + "kind": "let", + "description": "Set HTML attributes on the `label` element", + "type": "import('svelte/elements').HTMLLabelAttributes", + "value": "{}", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "inputAttributes", + "kind": "let", + "description": "Set HTML attributes on the `input` element", + "type": "import('svelte/elements').HTMLInputAttributes", + "value": "{}", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false } ], "moduleExports": [], "slots": [ + { + "name": "helperText", + "default": false, + "fallback": "{helperText}", + "slot_props": "{}" + }, + { + "name": "invalidText", + "default": false, + "fallback": "{invalidText}", + "slot_props": "{}" + }, { "name": "labelText", "default": false, "fallback": "{labelText}", "slot_props": "{}" + }, + { + "name": "warnText", + "default": false, + "fallback": "{warnText}", + "slot_props": "{}" } ], "events": [ - { - "type": "dispatched", - "name": "change", - "detail": "null | number | string" - }, - { - "type": "dispatched", - "name": "input", - "detail": "null | number | string" - }, { "type": "forwarded", "name": "click", "element": "div" }, - { "type": "forwarded", "name": "mouseover", "element": "div" }, - { "type": "forwarded", "name": "mouseenter", "element": "div" }, - { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "pointerup", "element": "div" }, + { "type": "forwarded", "name": "pointerover", "element": "div" }, + { "type": "forwarded", "name": "pointerenter", "element": "div" }, + { "type": "forwarded", "name": "pointerleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "input", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "paste", "element": "input" } ], - "typedefs": [], - "rest_props": { "type": "Element", "name": "input" } + "typedefs": [] }, { "moduleName": "TextInputSkeleton", @@ -12960,18 +13018,30 @@ "isRequired": false, "constant": false, "reactive": false + }, + { + "name": "divAttributes", + "kind": "let", + "description": "Specify the div HTML attributes for the skeleton container", + "type": "import('svelte/elements').HTMLDivAttributes", + "value": "{}", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false } ], "moduleExports": [], "slots": [], "events": [ { "type": "forwarded", "name": "click", "element": "div" }, - { "type": "forwarded", "name": "mouseover", "element": "div" }, - { "type": "forwarded", "name": "mouseenter", "element": "div" }, - { "type": "forwarded", "name": "mouseleave", "element": "div" } + { "type": "forwarded", "name": "pointerup", "element": "div" }, + { "type": "forwarded", "name": "pointerover", "element": "div" }, + { "type": "forwarded", "name": "pointerenter", "element": "div" }, + { "type": "forwarded", "name": "pointerleave", "element": "div" } ], - "typedefs": [], - "rest_props": { "type": "Element", "name": "div" } + "typedefs": [] }, { "moduleName": "Theme", @@ -13041,7 +13111,7 @@ "kind": "let", "description": "Override the default toggle props", "type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", - "value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }", + "value": "{\r themes: [\"white\", \"g100\"],\r labelA: \"\",\r labelB: \"\",\r labelText: \"Dark mode\",\r hideLabel: false,\r }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -13053,7 +13123,7 @@ "kind": "let", "description": "Override the default select props", "type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", - "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", + "value": "{\r themes: themeKeys,\r labelText: \"Themes\",\r hideLabel: false,\r }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -13830,7 +13900,7 @@ "kind": "let", "description": "Override the total items selected text", "type": "(totalSelected: number) => string", - "value": "(totalSelected) => `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`", + "value": "(totalSelected) =>\r `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -14547,7 +14617,7 @@ "kind": "function", "description": "Programmatically expand all nodes", "type": "() => void", - "value": "() => { expandedIds = [...nodeIds]; }", + "value": "() => {\r expandedIds = [...nodeIds];\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14559,7 +14629,7 @@ "kind": "function", "description": "Programmatically collapse all nodes", "type": "() => void", - "value": "() => { expandedIds = []; }", + "value": "() => {\r expandedIds = [];\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14571,7 +14641,7 @@ "kind": "function", "description": "Programmatically expand a subset of nodes.\nExpands all nodes if no argument is provided", "type": "(filterId?: (node: TreeNode) => boolean) => void", - "value": "() => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); }", + "value": "() => {\r expandedIds = nodes\r .filter(\r (node) =>\r filterNode(node) ||\r node.children?.some((child) => filterNode(child) && child.children)\r )\r .map((node) => node.id);\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14583,7 +14653,7 @@ "kind": "function", "description": "Programmatically collapse a subset of nodes.\nCollapses all nodes if no argument is provided", "type": "(filterId?: (node: TreeNode) => boolean) => void", - "value": "() => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }", + "value": "() => {\r expandedIds = nodes\r .filter((node) => expandedIds.includes(node.id) && !filterNode(node))\r .map((node) => node.id);\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14595,7 +14665,7 @@ "kind": "function", "description": "Programmatically show a node by `id`.\nThe matching node will be expanded, selected, and focused", "type": "(id: TreeNodeId) => void", - "value": "() => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(`[id=\"${lastId}\"]`)?.focus(); }); // Break out of the loop if the node is found. break; } } }", + "value": "() => {\r for (const child of children) {\r const nodes = findNodeById(child, id);\r \r if (nodes) {\r const ids = nodes.map((node) => node.id);\r const nodeIds = new Set(ids);\r \r expandNodes((node) => nodeIds.has(node.id));\r \r const lastId = ids[ids.length - 1];\r \r activeId = lastId;\r selectedIds = [lastId];\r \r tick().then(() => {\r ref?.querySelector(`[id=\"${lastId}\"]`)?.focus();\r });\r \r // Break out of the loop if the node is found.\r break;\r }\r }\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, diff --git a/docs/src/pages/components/TextInput.svx b/docs/src/pages/components/TextInput.svx index e624a22543..4ceb521ddd 100644 --- a/docs/src/pages/components/TextInput.svx +++ b/docs/src/pages/components/TextInput.svx @@ -9,47 +9,51 @@ components: ["TextInput", "TextInputSkeleton"] ## Default - + ## With helper text - + ## Hidden label - + ## Light variant - + ## Inline variant - + ## Read-only variant - + ## Large size - + ## Small size - + + +## Character Counter + + ## Invalid state - + ## Warning state - + ## Disabled state - + ## Skeleton diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte index fb574ef45a..51e3294f02 100644 --- a/src/TextInput/TextInput.svelte +++ b/src/TextInput/TextInput.svelte @@ -1,50 +1,51 @@
{#if !hideLabel} diff --git a/tests/TextInput.test.svelte b/tests/TextInput.test.svelte index e9f7763977..082b60e263 100644 --- a/tests/TextInput.test.svelte +++ b/tests/TextInput.test.svelte @@ -5,13 +5,13 @@ + + diff --git a/types/TextInput/TextInput.svelte.d.ts b/types/TextInput/TextInput.svelte.d.ts index e42bfaf625..9cbb422d22 100644 --- a/types/TextInput/TextInput.svelte.d.ts +++ b/types/TextInput/TextInput.svelte.d.ts @@ -1,23 +1,24 @@ import type { SvelteComponentTyped } from "svelte"; -import type { SvelteHTMLElements } from "svelte/elements"; -type RestProps = SvelteHTMLElements["input"]; +export interface TextInputProps { + /** + * Specify the input value + * `value` will be set to `null` if `typeof value === "number"` and `value` is empty + * @default "" + */ + value?: null | number | string; -export interface TextInputProps extends RestProps { /** - * Set the size of the input - * @default undefined + * Obtain a reference to the input HTML element + * @default null */ - size?: "sm" | "lg"; + ref?: null | HTMLInputElement; /** - * Specify the input value. - * - * `value` will be set to `null` if type="number" - * and the value is empty. - * @default "" + * Set the size of the input + * @default "md" */ - value?: null | number | string; + size?: "sm" | "md" | "lg"; /** * Specify the placeholder text @@ -27,6 +28,9 @@ export interface TextInputProps extends RestProps { /** * Set to `true` to enable the light variant + * For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color + * The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release + * @deprecated * @default false */ light?: boolean; @@ -38,34 +42,35 @@ export interface TextInputProps extends RestProps { disabled?: boolean; /** - * Specify the helper text + * Specify the label text * @default "" */ - helperText?: string; + labelText?: string; /** - * Set an id for the input element - * @default "ccs-" + Math.random().toString(36) + * Set to `true` to visually hide the label text + * @default false */ - id?: string; + hideLabel?: boolean; /** - * Specify a name attribute for the input - * @default undefined + * Specify the helper text + * @default "" */ - name?: string; + helperText?: string; /** - * Specify the label text - * @default "" + * Set to `true` to enable display the character counter. Requires `maxCount` to be set. + * @default false */ - labelText?: string; + counter?: boolean; /** - * Set to `true` to visually hide the label text - * @default false + * Specify the maximum number of characters/words allowed + * This is needed in order for `counter` to display + * @default undefined */ - hideLabel?: boolean; + maxCount?: number; /** * Set to `true` to indicate an invalid state @@ -92,16 +97,16 @@ export interface TextInputProps extends RestProps { warnText?: string; /** - * Obtain a reference to the input HTML element - * @default null + * Set an id for the input element + * @default "ccs-" + Math.random().toString(36) */ - ref?: null | HTMLInputElement; + id?: string; /** - * Set to `true` to mark the field as required - * @default false + * Specify a name attribute for the input + * @default undefined */ - required?: boolean; + name?: string; /** * Set to `true` to use the inline variant @@ -109,29 +114,46 @@ export interface TextInputProps extends RestProps { */ inline?: boolean; + /** + * Set to `true` to mark the field as required + * @default false + */ + required?: boolean; + /** * Set to `true` to use the read-only variant * @default false */ readonly?: boolean; - [key: `data-${string}`]: any; + /** + * Set HTML attributes on the `label` element + * @default {} + */ + labelAttributes?: import("svelte/elements").HTMLLabelAttributes; + + /** + * Set HTML attributes on the `input` element + * @default {} + */ + inputAttributes?: import("svelte/elements").HTMLInputAttributes; } export default class TextInput extends SvelteComponentTyped< TextInputProps, { - change: CustomEvent; - input: CustomEvent; click: WindowEventMap["click"]; - mouseover: WindowEventMap["mouseover"]; - mouseenter: WindowEventMap["mouseenter"]; - mouseleave: WindowEventMap["mouseleave"]; + pointerup: WindowEventMap["pointerup"]; + pointerover: WindowEventMap["pointerover"]; + pointerenter: WindowEventMap["pointerenter"]; + pointerleave: WindowEventMap["pointerleave"]; + change: WindowEventMap["change"]; + input: WindowEventMap["input"]; keydown: WindowEventMap["keydown"]; keyup: WindowEventMap["keyup"]; focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; paste: DocumentAndElementEventHandlersEventMap["paste"]; }, - { labelText: {} } + { helperText: {}; invalidText: {}; labelText: {}; warnText: {} } > {} diff --git a/types/TextInput/TextInputSkeleton.svelte.d.ts b/types/TextInput/TextInputSkeleton.svelte.d.ts index c72914826e..8bf7099685 100644 --- a/types/TextInput/TextInputSkeleton.svelte.d.ts +++ b/types/TextInput/TextInputSkeleton.svelte.d.ts @@ -1,25 +1,27 @@ import type { SvelteComponentTyped } from "svelte"; -import type { SvelteHTMLElements } from "svelte/elements"; -type RestProps = SvelteHTMLElements["div"]; - -export interface TextInputSkeletonProps extends RestProps { +export interface TextInputSkeletonProps { /** * Set to `true` to hide the label text * @default false */ hideLabel?: boolean; - [key: `data-${string}`]: any; + /** + * Specify the div HTML attributes for the skeleton container + * @default {} + */ + divAttributes?: import("svelte/elements").HTMLDivAttributes; } export default class TextInputSkeleton extends SvelteComponentTyped< TextInputSkeletonProps, { click: WindowEventMap["click"]; - mouseover: WindowEventMap["mouseover"]; - mouseenter: WindowEventMap["mouseenter"]; - mouseleave: WindowEventMap["mouseleave"]; + pointerup: WindowEventMap["pointerup"]; + pointerover: WindowEventMap["pointerover"]; + pointerenter: WindowEventMap["pointerenter"]; + pointerleave: WindowEventMap["pointerleave"]; }, {} > {}