From f349b505f94b593d5b7f952b2d590f7aa3bbe47d Mon Sep 17 00:00:00 2001 From: Samuel Janda Date: Sat, 9 Mar 2024 18:28:20 +1100 Subject: [PATCH] Initial pass at Layer (new component) #1892 --- COMPONENT_INDEX.md | 586 ++++++++++++++++++---------- docs/src/COMPONENT_API.json | 113 ++++-- docs/src/pages/components/Layer.svx | 16 + src/Layer/Layer.svelte | 45 +++ src/Layer/index.js | 1 + src/index.js | 1 + tests/Layer.test.svelte | 13 + types/Layer/Layer.svelte.d.ts | 33 ++ types/index.d.ts | 1 + 9 files changed, 568 insertions(+), 241 deletions(-) create mode 100644 docs/src/pages/components/Layer.svx create mode 100644 src/Layer/Layer.svelte create mode 100644 src/Layer/index.js create mode 100644 tests/Layer.test.svelte create mode 100644 types/Layer/Layer.svelte.d.ts diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 036a2a74ae..ec5265b08b 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. +> 166 components exported from carbon-components-svelte@1.0.0-next.0. ## Components @@ -66,6 +66,7 @@ - [`ImageLoader`](#imageloader) - [`InlineLoading`](#inlineloading) - [`InlineNotification`](#inlinenotification) +- [`Layer`](#layer) - [`Link`](#link) - [`ListBox`](#listbox) - [`ListBoxField`](#listboxfield) @@ -351,10 +352,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 +547,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 +673,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 +927,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 +1290,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 +1875,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 +1915,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 @@ -1959,6 +2010,27 @@ None. | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | +## `Layer` + +### Props + +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | ------------------------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------ | +| level | No | let | Yes | 0 | 1 | 2 | undefined | Specify the layer level and override any existing levels based on hierarchy. | +| as | No | let | No | typeof import("svelte").SvelteComponent | "div" | Specify the HTML element to render. If none is specified, a `div` is rendered. | +| layerProps | No | let | No | import('svelte/elements').HTMLElementAttributes | {} | Specify the Layer HTML element props | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the Layer component | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +None. + ## `Link` ### Props @@ -2137,13 +2209,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 +2279,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 +2445,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 +2577,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 +2718,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 +2758,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 +2776,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 @@ -4206,15 +4311,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 +4561,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 +4800,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/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index a86fb2a074..bede7424e7 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1,5 +1,5 @@ { - "total": 165, + "total": 166, "components": [ { "moduleName": "Accordion", @@ -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, @@ -5754,6 +5754,63 @@ "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, + { + "moduleName": "Layer", + "filePath": "src/Layer/Layer.svelte", + "props": [ + { + "name": "level", + "kind": "let", + "description": "Specify the layer level and override any existing levels based on hierarchy.", + "type": "0 | 1 | 2 ", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": true + }, + { + "name": "as", + "kind": "let", + "description": "Specify the HTML element to render. If none is specified, a `div` is rendered.", + "type": "typeof import(\"svelte\").SvelteComponent", + "value": "\"div\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "layerProps", + "kind": "let", + "description": "Specify the Layer HTML element props", + "type": "import('svelte/elements').HTMLElementAttributes", + "value": "{}", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the Layer component", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + } + ], + "moduleExports": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, { "moduleName": "Link", "filePath": "src/Link/Link.svelte", @@ -6259,8 +6316,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 +6468,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 +6480,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 +7176,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 +7236,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 +7867,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 +8188,7 @@ { "name": "menu", "default": false, - "fallback": "", + "fallback": "", "slot_props": "{}" } ], @@ -8268,7 +8325,7 @@ { "name": "__default__", "default": true, - "fallback": "
\n {text}\n
", + "fallback": "
\r\n {text}\r\n
", "slot_props": "{}" } ], @@ -8360,7 +8417,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 +8429,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 +8513,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, @@ -13041,7 +13098,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 +13110,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 +13887,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 +14604,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 +14616,7 @@ "kind": "function", "description": "Programmatically collapse all nodes", "type": "() => void", - "value": "() => { expandedIds = []; }", + "value": "() => {\r expandedIds = [];\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14571,7 +14628,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 +14640,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 +14652,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/Layer.svx b/docs/src/pages/components/Layer.svx new file mode 100644 index 0000000000..f4cd6493b4 --- /dev/null +++ b/docs/src/pages/components/Layer.svx @@ -0,0 +1,16 @@ + + +## Default + + +

First layer

+ +

Second layer

+ +

Third layer

+ + + \ No newline at end of file diff --git a/src/Layer/Layer.svelte b/src/Layer/Layer.svelte new file mode 100644 index 0000000000..07132060db --- /dev/null +++ b/src/Layer/Layer.svelte @@ -0,0 +1,45 @@ + + + + + diff --git a/src/Layer/index.js b/src/Layer/index.js new file mode 100644 index 0000000000..da3ecb27f8 --- /dev/null +++ b/src/Layer/index.js @@ -0,0 +1 @@ +export { default as Layer } from "./Layer.svelte"; diff --git a/src/index.js b/src/index.js index aa378cb15e..6763f0cc43 100644 --- a/src/index.js +++ b/src/index.js @@ -58,6 +58,7 @@ export { FormLabel } from "./FormLabel"; export { Grid, Row, Column } from "./Grid"; export { ImageLoader } from "./ImageLoader"; export { InlineLoading } from "./InlineLoading"; +export { Layer } from "./Layer"; export { Link, OutboundLink } from "./Link"; export { ListBox, diff --git a/tests/Layer.test.svelte b/tests/Layer.test.svelte new file mode 100644 index 0000000000..d5f7feba46 --- /dev/null +++ b/tests/Layer.test.svelte @@ -0,0 +1,13 @@ + + + +

First layer

+ +

Second layer

+ +

Third layer

+ + + diff --git a/types/Layer/Layer.svelte.d.ts b/types/Layer/Layer.svelte.d.ts new file mode 100644 index 0000000000..90081477f5 --- /dev/null +++ b/types/Layer/Layer.svelte.d.ts @@ -0,0 +1,33 @@ +import type { SvelteComponentTyped } from "svelte"; + +export interface LayerProps { + /** + * Specify the layer level and override any existing levels based on hierarchy. + * @default undefined + */ + level?: 0 | 1 | 2; + + /** + * Specify the HTML element to render. If none is specified, a `div` is rendered. + * @default "div" + */ + as?: typeof import("svelte").SvelteComponent; + + /** + * Specify the Layer HTML element props + * @default {} + */ + layerProps?: import("svelte/elements").HTMLElementAttributes; + + /** + * Set an id for the Layer component + * @default "ccs-" + Math.random().toString(36) + */ + id?: string; +} + +export default class Layer extends SvelteComponentTyped< + LayerProps, + Record, + { default: {} } +> {} diff --git a/types/index.d.ts b/types/index.d.ts index 0d31321d84..dcb0e56c93 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -64,6 +64,7 @@ export { default as Row } from "./Grid/Row.svelte"; export { default as Column } from "./Grid/Column.svelte"; export { default as ImageLoader } from "./ImageLoader/ImageLoader.svelte"; export { default as InlineLoading } from "./InlineLoading/InlineLoading.svelte"; +export { default as Layer } from "./Layer/Layer.svelte"; export { default as Link } from "./Link/Link.svelte"; export { default as OutboundLink } from "./Link/OutboundLink.svelte"; export { default as ListBox } from "./ListBox/ListBox.svelte";