From 0ea318046a237a24584810164b53b4c1a8804dc0 Mon Sep 17 00:00:00 2001 From: Enrico Sacchetti Date: Wed, 17 Jan 2024 11:03:48 -0500 Subject: [PATCH] v1.0.0-next.1 --- CHANGELOG.md | 11 + COMPONENT_INDEX.md | 564 ++++++++++++++---------------------- CONTRIBUTING.md | 10 +- docs/src/COMPONENT_API.json | 54 ++-- package.json | 4 +- 5 files changed, 262 insertions(+), 381 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6236778e2a..27e5c320a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,17 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## [1.0.0-next.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v1.0.0-next.0...v1.0.0-next.1) (2024-01-17) + + +### ⚠ BREAKING CHANGES + +* TextInput v11 Styles (#1889) + +### Features + +* TextInput v11 Styles ([#1889](https://github.com/carbon-design-system/carbon-components-svelte/issues/1889)) ([c436dbd](https://github.com/carbon-design-system/carbon-components-svelte/commit/c436dbd76177f7553ba4206601f5ef2e416da594)), closes [#1667](https://github.com/carbon-design-system/carbon-components-svelte/issues/1667) [#1633](https://github.com/carbon-design-system/carbon-components-svelte/issues/1633) [#1621](https://github.com/carbon-design-system/carbon-components-svelte/issues/1621) [#1621](https://github.com/carbon-design-system/carbon-components-svelte/issues/1621) [#1888](https://github.com/carbon-design-system/carbon-components-svelte/issues/1888) + ## [1.0.0-next.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.8...v1.0.0-next.0) (2024-01-12) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index ff7097357b..8422cfb730 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 165 components exported from carbon-components-svelte@1.0.0-next.0. +> 165 components exported from carbon-components-svelte@1.0.0-next.1. ## Components @@ -351,18 +351,10 @@ 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 @@ -546,34 +538,26 @@ 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 @@ -672,43 +656,32 @@ 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 @@ -926,21 +899,13 @@ 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 @@ -1289,25 +1254,21 @@ 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 @@ -1874,10 +1835,9 @@ 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 @@ -1914,26 +1874,16 @@ 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 @@ -2187,21 +2137,13 @@ 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 @@ -2257,18 +2199,12 @@ 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 @@ -2423,45 +2359,43 @@ 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 @@ -2555,36 +2489,31 @@ 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 @@ -2696,16 +2625,10 @@ 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 @@ -2736,12 +2659,9 @@ 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 @@ -2754,27 +2674,24 @@ 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 @@ -4299,27 +4216,15 @@ 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 @@ -4549,11 +4454,10 @@ 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 @@ -4788,62 +4692,20 @@ 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/CONTRIBUTING.md b/CONTRIBUTING.md index 91c0d28659..49abba20a0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -171,7 +171,15 @@ The workflow is automatically triggered when pushing a tag that begins with `v` However, maintainers must perform a few things in preparation for a release. -Locally, while on `master` and the branch is clean, run `npm run release`. This command will: + + +While performing a prerelease: + +1. manually bump `package.json`'s `version` key to your target version. +2. ensure the `--first-release` flag is passed to the `standard-version` command. +3. Run `npm run release` then continue below. + +For regular releases, while on `master` and the branch is clean, run `npm run release`. This command will: - Bump the semantic version in `package.json` - Generate notes in `CHANGELOG.md` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 81ef573014..5784378254 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": "{\r sm: false,\r md: false,\r lg: false,\r xlg: false,\r max: false,\r }", + "value": "{ sm: false, md: false, lg: false, xlg: false, max: false, }", "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) => {\r try {\r await navigator.clipboard.writeText(code);\r } catch (e) {\r console.log(e);\r }\r }", + "value": "async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -1732,7 +1732,7 @@ "kind": "function", "description": "Clear the combo box programmatically", "type": "(options?: { focus?: boolean; }) => void", - "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 }", + "value": "() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = \"\"; if (options?.focus !== false) ref?.focus(); }", "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) => {\r try {\r await navigator.clipboard.writeText(text);\r } catch (e) {\r console.log(e);\r }\r }", + "value": "async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -3791,7 +3791,7 @@ "kind": "const", "description": "Programmatically clear the uploaded files", "type": "() => void", - "value": "() => {\r files = [];\r }", + "value": "() => { files = []; }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -5397,7 +5397,7 @@ { "name": "__default__", "default": true, - "fallback": "{result.text}\r\n {#if result.description}– {result.description}{/if}", + "fallback": "{result.text}\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) => {\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 }", + "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); }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -6259,8 +6259,8 @@ "name": "translationIds", "kind": "const", "description": "Default translation ids", - "type": "{\r clearAll: \"clearAll\",\r clearSelection: \"clearSelection\",\r }", - "value": "{\r clearAll: \"clearAll\",\r clearSelection: \"clearSelection\",\r }", + "type": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", + "value": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", "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": "() => {\r localStorage.removeItem(key);\r }", + "value": "() => { localStorage.removeItem(key); }", "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": "() => {\r localStorage.clear();\r }", + "value": "() => { localStorage.clear(); }", "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) =>\r item.text.toLowerCase().includes(value.trim().toLowerCase())", + "value": "(item, value) => 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) =>\r a.text.localeCompare(b.text, locale, { numeric: true })", + "value": "(a, b) => 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": "{\r increment: \"increment\",\r decrement: \"decrement\",\r }", + "value": "{ increment: \"increment\", decrement: \"decrement\", }", "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": "
\r\n {text}\r\n
", + "fallback": "
\n {text}\n
", "slot_props": "{}" } ], @@ -8360,7 +8360,7 @@ "kind": "let", "description": "Override the item text", "type": "(min: number, max: number) => string", - "value": "(min, max) =>\r `${min}–${max} item${max === 1 ? \"\" : \"s\"}`", + "value": "(min, max) => `${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) =>\r `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`", + "value": "(min, max, total) => `${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) =>\r `of ${total} page${total === 1 ? \"\" : \"s\"}`", + "value": "(current, total) => `of ${total} page${total === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -13111,7 +13111,7 @@ "kind": "let", "description": "Override the default toggle props", "type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", - "value": "{\r themes: [\"white\", \"g100\"],\r labelA: \"\",\r labelB: \"\",\r labelText: \"Dark mode\",\r hideLabel: false,\r }", + "value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -13123,7 +13123,7 @@ "kind": "let", "description": "Override the default select props", "type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", - "value": "{\r themes: themeKeys,\r labelText: \"Themes\",\r hideLabel: false,\r }", + "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -13900,7 +13900,7 @@ "kind": "let", "description": "Override the total items selected text", "type": "(totalSelected: number) => string", - "value": "(totalSelected) =>\r `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`", + "value": "(totalSelected) => `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -14617,7 +14617,7 @@ "kind": "function", "description": "Programmatically expand all nodes", "type": "() => void", - "value": "() => {\r expandedIds = [...nodeIds];\r }", + "value": "() => { expandedIds = [...nodeIds]; }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14629,7 +14629,7 @@ "kind": "function", "description": "Programmatically collapse all nodes", "type": "() => void", - "value": "() => {\r expandedIds = [];\r }", + "value": "() => { expandedIds = []; }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14641,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": "() => {\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 }", + "value": "() => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14653,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": "() => {\r expandedIds = nodes\r .filter((node) => expandedIds.includes(node.id) && !filterNode(node))\r .map((node) => node.id);\r }", + "value": "() => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14665,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": "() => {\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 }", + "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; } } }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, diff --git a/package.json b/package.json index 774bee0c78..b7962014cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-components-svelte", - "version": "1.0.0-next.0", + "version": "1.0.0-next.1", "license": "Apache-2.0", "description": "Svelte implementation of the Carbon Design System", "svelte": "./src/index.js", @@ -32,7 +32,7 @@ "build:docs": "node scripts/build-docs", "build:lib": "rollup -c", "format": "prettier --write \"./**/*.{svelte,js,md}\"", - "release": "standard-version && npm run build:docs" + "release": "standard-version --first-release && npm run build:docs" }, "dependencies": { "flatpickr": "4.6.9"