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

breaking(types): type arrays as read-only (#1335)

Browse source 
Closes #1259

* breaking(types): type arrays as read-only

* Run "yarn build:docs"

* test: assert read-only arrays
This commit is contained in:
metonym 2022-06-05 13:25:43 -07:00 • committed by GitHub
commit 260bf4e040
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 257 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

164
COMPONENT_INDEX.md
View file

@ -453,7 +453,7 @@ None.
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| title | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the title attribute for the label element |
| group | No | <code>let</code> | Yes | <code>any[]</code> | <code>undefined</code> | Specify the bound group |
| group | No | <code>let</code> | Yes | <code>ReadonlyArray<any></code> | <code>undefined</code> | Specify the bound group |
| checked | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is checked |
| value | No | <code>let</code> | No | <code>any</code> | <code>""</code> | Specify the value of the checkbox |
| indeterminate | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is indeterminate |
@ -659,7 +659,7 @@ export interface ComboBoxItem {
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
| selectedId | No | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
| items | No | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
| items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items |
| itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
@ -780,13 +780,13 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the unordered list HTML element |
| y | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the vertical offset of the menu position |
| x | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the horizontal offset of the menu position |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |
| target | No | <code>let</code> | No | <code>null &#124; HTMLElement &#124; HTMLElement[]</code> | <code>null</code> | Specify an element or list of elements to trigger the context menu.<br />If no element is specified, the context menu applies to the entire window |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the unordered list HTML element |
| y | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the vertical offset of the menu position |
| x | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the horizontal offset of the menu position |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |
| target | No | <code>let</code> | No | <code>null &#124; ReadonlyArray<null &#124; HTMLElement></code> | <code>null</code> | Specify an element or list of elements to trigger the context menu.<br />If no element is specified, the context menu applies to the entire window |
### Slots
@ -821,10 +821,10 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | --------------------- | --------------- | ---------------------- |
| selectedIds | No | <code>let</code> | Yes | <code>string[]</code> | <code>[]</code> | -- |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | ---------------------------------- | --------------- | ---------------------- |
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<string></code> | <code>[]</code> | -- |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
### Slots
@ -963,22 +963,22 @@ export interface DataTableCell {
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
| selectedRowIds | No | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be selected |
| selectedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be selected |
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
| expandedRowIds | No | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be expanded |
| expandedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded |
| expandable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
| headers | No | <code>let</code> | No | <code>DataTableHeader[]</code> | <code>[]</code> | Specify the data table headers |
| rows | No | <code>let</code> | No | <code>DataTableRow[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader></code> | <code>[]</code> | Specify the data table headers |
| rows | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRow></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table |
| title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
| description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
| nonExpandableRowIds | No | <code>let</code> | No | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
| nonExpandableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
| radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
| batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
| nonSelectableRowIds | No | <code>let</code> | No | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the ids of rows that should not be selectable |
| nonSelectableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids of rows that should not be selectable |
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| pageSize | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page |
@ -1012,15 +1012,15 @@ export interface DataTableCell {
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------- |
| columns | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
| rows | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table |
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows |
| showHeader | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header |
| headers | No | <code>let</code> | No | <code>string[] &#124; Partial<DataTableHeader>[]</code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array |
| showToolbar | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
| columns | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
| rows | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table |
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows |
| showHeader | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header |
| headers | No | <code>let</code> | No | <code>ReadonlyArray<string &#124; Partial<DataTableHeader>></code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array |
| showToolbar | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar |
### Slots
@ -1154,7 +1154,7 @@ export interface DropdownItem {
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| selectedId | Yes | <code>let</code> | Yes | <code>DropdownItemId</code> | <code>undefined</code> | Specify the selected item id |
| items | No | <code>let</code> | No | <code>DropdownItem[]</code> | <code>[]</code> | Set the dropdown items |
| items | No | <code>let</code> | No | <code>ReadonlyArray<DropdownItem></code> | <code>[]</code> | Set the dropdown items |
| itemToString | No | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item |
| type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
@ -1247,10 +1247,10 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------- |
| files | No | <code>let</code> | Yes | <code>File[]</code> | <code>[]</code> | Obtain a reference to the uploaded files |
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader |
| accept | No | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types |
| accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files |
| labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description |
@ -1266,16 +1266,16 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :------------------ |
| add | dispatched | <code>File[]</code> |
| remove | dispatched | <code>File[]</code> |
| change | dispatched | <code>File[]</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :------------------------------- |
| add | dispatched | <code>ReadonlyArray<File></code> |
| remove | dispatched | <code>ReadonlyArray<File></code> |
| change | dispatched | <code>ReadonlyArray<File></code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
## `FileUploaderButton`
@ -1285,8 +1285,8 @@ None.
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| labelText | No | <code>let</code> | Yes | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| files | No | <code>let</code> | Yes | <code>File[]</code> | <code>[]</code> | Obtain a reference to the uploaded files |
| accept | No | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types |
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| disableLabelChanges | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable label changes |
@ -1304,29 +1304,29 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :------------------ |
| change | dispatched | <code>File[]</code> |
| keydown | forwarded | -- |
| click | forwarded | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :------------------------------- |
| change | dispatched | <code>ReadonlyArray<File></code> |
| keydown | forwarded | -- |
| click | forwarded | -- |
## `FileUploaderDropContainer`
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| files | No | <code>let</code> | Yes | <code>File[]</code> | <code>[]</code> | Obtain a reference to the uploaded files |
| accept | No | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types |
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| validateFiles | No | <code>let</code> | No | <code>(files: File[]) => File[]</code> | <code>(files) => files</code> | Override the default behavior of validating uploaded files<br />The default behavior does not validate files |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| role | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `role` attribute of the drop container |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify `tabindex` attribute |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| validateFiles | No | <code>let</code> | No | <code>(files: ReadonlyArray<File>) => ReadonlyArray<File></code> | <code>(files) => files</code> | Override the default behavior of validating uploaded files.<br />By default, files are not validated |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| role | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `role` attribute of the drop container |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify `tabindex` attribute |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
### Slots
@ -1336,15 +1336,15 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :------------------ |
| add | dispatched | <code>File[]</code> |
| change | dispatched | <code>File[]</code> |
| dragover | forwarded | -- |
| dragleave | forwarded | -- |
| drop | forwarded | -- |
| keydown | forwarded | -- |
| click | forwarded | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :------------------------------- |
| add | dispatched | <code>ReadonlyArray<File></code> |
| change | dispatched | <code>ReadonlyArray<File></code> |
| dragover | forwarded | -- |
| dragleave | forwarded | -- |
| drop | forwarded | -- |
| keydown | forwarded | -- |
| click | forwarded | -- |
## `FileUploaderItem`
@ -1805,13 +1805,13 @@ export interface HeaderSearchResult {
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------ | -------------------------------------------------- |
| selectedResultIndex | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected result index |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| active | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to activate and focus the search bar |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the search input value |
| results | No | <code>let</code> | No | <code>HeaderSearchResult[]</code> | <code>[]</code> | Render a list of search results |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | ------------------ | -------------------------------------------------- |
| selectedResultIndex | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected result index |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| active | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to activate and focus the search bar |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the search input value |
| results | No | <code>let</code> | No | <code>ReadonlyArray<HeaderSearchResult></code> | <code>[]</code> | Render a list of search results |
### Slots
@ -2348,8 +2348,8 @@ export interface MultiSelectItem {
| inputRef | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
| selectedIds | No | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
| items | No | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items |
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItemId></code> | <code>[]</code> | Set the selected ids |
| items | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItem></code> | <code>[]</code> | Set the multiselect items |
| itemToString | No | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a multiselect item |
| itemToInput | No | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code> | <code>(item) => {}</code> | Override the item name, title, labelText passed to the checkbox input |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
@ -2664,7 +2664,7 @@ None.
| itemRangeText | No | <code>let</code> | No | <code>(min: number, max: number, total: number) => string</code> | <code>(min, max, total) => \`${min}–${max} of ${total} items\`</code> | Override the item range text |
| pageInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page input |
| pageSizeInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page size input |
| pageSizes | No | <code>let</code> | No | <code>number[]</code> | <code>[10]</code> | Specify the available page sizes |
| pageSizes | No | <code>let</code> | No | <code>ReadonlyArray<number></code> | <code>[10]</code> | Specify the available page sizes |
| pagesUnknown | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the number of pages is unknown |
| pageText | No | <code>let</code> | No | <code>(page: number) => string</code> | <code>(page) => \`page ${page}\`</code> | Override the page text |
| pageRangeText | No | <code>let</code> | No | <code>(current: number, total: number) => string</code> | <code>(current, total) => \`of ${total} page${total === 1 ? "" : "s"}\`</code> | Override the page range text |
@ -4648,8 +4648,8 @@ export interface TreeNode {
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| expandedIds | No | <code>let</code> | Yes | <code>TreeNodeId[]</code> | <code>[]</code> | Set the node ids to be expanded |
| selectedIds | No | <code>let</code> | Yes | <code>TreeNodeId[]</code> | <code>[]</code> | Set the node ids to be selected |
| expandedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be expanded |
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected |
| activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
| children | No | <code>let</code> | No | <code>Array<TreeNode & { children?: TreeNode[] }></code> | <code>[]</code> | Provide an array of children nodes to render |
| size | No | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size |

88
docs/src/COMPONENT_API.json
View file

@ -754,7 +754,7 @@
"name": "group",
"kind": "let",
"description": "Specify the bound group",
"type": "any[]",
"type": "ReadonlyArray<any>",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -1460,7 +1460,7 @@
"name": "items",
"kind": "let",
"description": "Set the combobox items",
"type": "ComboBoxItem[]",
"type": "ReadonlyArray<ComboBoxItem>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -1961,7 +1961,7 @@
"name": "target",
"kind": "let",
"description": "Specify an element or list of elements to trigger the context menu.\nIf no element is specified, the context menu applies to the entire window",
"type": "null | HTMLElement | HTMLElement[]",
"type": "null | ReadonlyArray<null | HTMLElement>",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2045,7 +2045,7 @@
{
"name": "selectedIds",
"kind": "let",
"type": "string[]",
"type": "ReadonlyArray<string>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2342,7 +2342,7 @@
"name": "headers",
"kind": "let",
"description": "Specify the data table headers",
"type": "DataTableHeader[]",
"type": "ReadonlyArray<DataTableHeader>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2354,7 +2354,7 @@
"name": "rows",
"kind": "let",
"description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids",
"type": "DataTableRow[]",
"type": "ReadonlyArray<DataTableRow>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2449,7 +2449,7 @@
"name": "expandedRowIds",
"kind": "let",
"description": "Specify the row ids to be expanded",
"type": "DataTableRowId[]",
"type": "ReadonlyArray<DataTableRowId>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2461,7 +2461,7 @@
"name": "nonExpandableRowIds",
"kind": "let",
"description": "Specify the ids for rows that should not be expandable",
"type": "DataTableRowId[]",
"type": "ReadonlyArray<DataTableRowId>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2509,7 +2509,7 @@
"name": "selectedRowIds",
"kind": "let",
"description": "Specify the row ids to be selected",
"type": "DataTableRowId[]",
"type": "ReadonlyArray<DataTableRowId>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2521,7 +2521,7 @@
"name": "nonSelectableRowIds",
"kind": "let",
"description": "Specify the ids of rows that should not be selectable",
"type": "DataTableRowId[]",
"type": "ReadonlyArray<DataTableRowId>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -2760,7 +2760,7 @@
"name": "headers",
"kind": "let",
"description": "Set the column headers\nSupersedes `columns` if value is a non-empty array",
"type": "string[] | Partial<DataTableHeader>[]",
"type": "ReadonlyArray<string | Partial<DataTableHeader>>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -3223,7 +3223,7 @@
"name": "items",
"kind": "let",
"description": "Set the dropdown items",
"type": "DropdownItem[]",
"type": "ReadonlyArray<DropdownItem>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -3714,7 +3714,7 @@
"name": "accept",
"kind": "let",
"description": "Specify the accepted file types",
"type": "string[]",
"type": "ReadonlyArray<string>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -3726,7 +3726,7 @@
"name": "files",
"kind": "let",
"description": "Obtain a reference to the uploaded files",
"type": "File[]",
"type": "ReadonlyArray<File>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -3834,9 +3834,21 @@
"moduleExports": [],
"slots": [],
"events": [
{ "type": "dispatched", "name": "add", "detail": "File[]" },
{ "type": "dispatched", "name": "remove", "detail": "File[]" },
{ "type": "dispatched", "name": "change", "detail": "File[]" },
{
"type": "dispatched",
"name": "add",
"detail": "ReadonlyArray<File>"
},
{
"type": "dispatched",
"name": "remove",
"detail": "ReadonlyArray<File>"
},
{
"type": "dispatched",
"name": "change",
"detail": "ReadonlyArray<File>"
},
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
@ -3854,7 +3866,7 @@
"name": "accept",
"kind": "let",
"description": "Specify the accepted file types",
"type": "string[]",
"type": "ReadonlyArray<string>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -3866,7 +3878,7 @@
"name": "files",
"kind": "let",
"description": "Obtain a reference to the uploaded files",
"type": "File[]",
"type": "ReadonlyArray<File>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4005,7 +4017,11 @@
}
],
"events": [
{ "type": "dispatched", "name": "change", "detail": "File[]" },
{
"type": "dispatched",
"name": "change",
"detail": "ReadonlyArray<File>"
},
{ "type": "forwarded", "name": "keydown", "element": "label" },
{ "type": "forwarded", "name": "click", "element": "input" }
],
@ -4020,7 +4036,7 @@
"name": "accept",
"kind": "let",
"description": "Specify the accepted file types",
"type": "string[]",
"type": "ReadonlyArray<string>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4032,7 +4048,7 @@
"name": "files",
"kind": "let",
"description": "Obtain a reference to the uploaded files",
"type": "File[]",
"type": "ReadonlyArray<File>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4055,8 +4071,8 @@
{
"name": "validateFiles",
"kind": "let",
"description": "Override the default behavior of validating uploaded files\nThe default behavior does not validate files",
"type": "(files: File[]) => File[]",
"description": "Override the default behavior of validating uploaded files.\nBy default, files are not validated",
"type": "(files: ReadonlyArray<File>) => ReadonlyArray<File>",
"value": "(files) => files",
"isFunction": true,
"isFunctionDeclaration": false,
@ -4159,8 +4175,16 @@
}
],
"events": [
{ "type": "dispatched", "name": "add", "detail": "File[]" },
{ "type": "dispatched", "name": "change", "detail": "File[]" },
{
"type": "dispatched",
"name": "add",
"detail": "ReadonlyArray<File>"
},
{
"type": "dispatched",
"name": "change",
"detail": "ReadonlyArray<File>"
},
{ "type": "forwarded", "name": "dragover", "element": "div" },
{ "type": "forwarded", "name": "dragleave", "element": "div" },
{ "type": "forwarded", "name": "drop", "element": "div" },
@ -5245,7 +5269,7 @@
"name": "results",
"kind": "let",
"description": "Render a list of search results",
"type": "HeaderSearchResult[]",
"type": "ReadonlyArray<HeaderSearchResult>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -6861,7 +6885,7 @@
"name": "items",
"kind": "let",
"description": "Set the multiselect items",
"type": "MultiSelectItem[]",
"type": "ReadonlyArray<MultiSelectItem>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -6897,7 +6921,7 @@
"name": "selectedIds",
"kind": "let",
"description": "Set the selected ids",
"type": "MultiSelectItemId[]",
"type": "ReadonlyArray<MultiSelectItemId>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -8283,7 +8307,7 @@
"name": "pageSizes",
"kind": "let",
"description": "Specify the available page sizes",
"type": "number[]",
"type": "ReadonlyArray<number>",
"value": "[10]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -14210,7 +14234,7 @@
"name": "selectedIds",
"kind": "let",
"description": "Set the node ids to be selected",
"type": "TreeNodeId[]",
"type": "ReadonlyArray<TreeNodeId>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
@ -14222,7 +14246,7 @@
"name": "expandedIds",
"kind": "let",
"description": "Set the node ids to be expanded",
"type": "TreeNodeId[]",
"type": "ReadonlyArray<TreeNodeId>",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,

2
src/Checkbox/Checkbox.svelte
View file

@ -14,7 +14,7 @@
/**
* Specify the bound group
* @type {any[]}
* @type {ReadonlyArray<any>}
*/
export let group = undefined;

2
src/ComboBox/ComboBox.svelte
View file

@ -8,7 +8,7 @@
/**
* Set the combobox items
* @type {ComboBoxItem[]}
* @type {ReadonlyArray<ComboBoxItem>}
*/
export let items = [];

2
src/ContextMenu/ContextMenu.svelte
View file

@ -6,7 +6,7 @@
/**
* Specify an element or list of elements to trigger the context menu.
* If no element is specified, the context menu applies to the entire window
* @type {null | HTMLElement | HTMLElement[]}
* @type {null | ReadonlyArray<null | HTMLElement>}
*/
export let target = null;

2
src/ContextMenu/ContextMenuGroup.svelte
View file

@ -1,5 +1,5 @@
<script>
/** @type {string[]} */
/** @type {ReadonlyArray<string>} */
export let selectedIds = [];
/** Specify the label text */

12
src/DataTable/DataTable.svelte
View file

@ -24,14 +24,14 @@
/**
* Specify the data table headers
* @type {DataTableHeader[]}
* @type {ReadonlyArray<DataTableHeader>}
*/
export let headers = [];
/**
* Specify the rows the data table should render
* keys defined in `headers` are used for the row ids
* @type {DataTableRow[]}
* @type {ReadonlyArray<DataTableRow>}
*/
export let rows = [];
@ -66,13 +66,13 @@
/**
* Specify the row ids to be expanded
* @type {DataTableRowId[]}
* @type {ReadonlyArray<DataTableRowId>}
*/
export let expandedRowIds = [];
/**
* Specify the ids for rows that should not be expandable
* @type {DataTableRowId[]}
* @type {ReadonlyArray<DataTableRowId>}
*/
export let nonExpandableRowIds = [];
@ -90,13 +90,13 @@
/**
* Specify the row ids to be selected
* @type {DataTableRowId[]}
* @type {ReadonlyArray<DataTableRowId>}
*/
export let selectedRowIds = [];
/**
* Specify the ids of rows that should not be selectable
* @type {DataTableRowId[]}
* @type {ReadonlyArray<DataTableRowId>}
*/
export let nonSelectableRowIds = [];

2
src/DataTable/DataTableSkeleton.svelte
View file

@ -25,7 +25,7 @@
/**
* Set the column headers
* Supersedes `columns` if value is a non-empty array
* @type {string[] | Partial<DataTableHeader>[]}
* @type {ReadonlyArray<string | Partial<DataTableHeader>>}
*/
export let headers = [];

2
src/Dropdown/Dropdown.svelte
View file

@ -9,7 +9,7 @@
/**
* Set the dropdown items
* @type {DropdownItem[]}
* @type {ReadonlyArray<DropdownItem>}
*/
export let items = [];

10
src/FileUploader/FileUploader.svelte
View file

@ -1,8 +1,8 @@
<script>
/**
* @event {File[]} add
* @event {File[]} remove
* @event {File[]} change
* @event {ReadonlyArray<File>} add
* @event {ReadonlyArray<File>} remove
* @event {ReadonlyArray<File>} change
*/
/**
@ -16,13 +16,13 @@
/**
* Specify the accepted file types
* @type {string[]}
* @type {ReadonlyArray<string>}
*/
export let accept = [];
/**
* Obtain a reference to the uploaded files
* @type {File[]}
* @type {ReadonlyArray<File>}
*/
export let files = [];

6
src/FileUploader/FileUploaderButton.svelte
View file

@ -1,17 +1,17 @@
<script>
/**
* @event {File[]} change
* @event {ReadonlyArray<File>} change
*/
/**
* Specify the accepted file types
* @type {string[]}
* @type {ReadonlyArray<string>}
*/
export let accept = [];
/**
* Obtain a reference to the uploaded files
* @type {File[]}
* @type {ReadonlyArray<File>}
*/
export let files = [];

14
src/FileUploader/FileUploaderDropContainer.svelte
View file

@ -1,18 +1,18 @@
<script>
/**
* @event {File[]} add
* @event {File[]} change
* @event {ReadonlyArray<File>} add
* @event {ReadonlyArray<File>} change
*/
/**
* Specify the accepted file types
* @type {string[]}
* @type {ReadonlyArray<string>}
*/
export let accept = [];
/**
* Obtain a reference to the uploaded files
* @type {File[]}
* @type {ReadonlyArray<File>}
*/
export let files = [];
@ -20,9 +20,9 @@
export let multiple = false;
/**
* Override the default behavior of validating uploaded files
* The default behavior does not validate files
* @type {(files: File[]) => File[]}
* Override the default behavior of validating uploaded files.
* By default, files are not validated
* @type {(files: ReadonlyArray<File>) => ReadonlyArray<File>}
*/
export let validateFiles = (files) => files;

4
src/MultiSelect/MultiSelect.svelte
View file

@ -11,7 +11,7 @@
/**
* Set the multiselect items
* @type {MultiSelectItem[]}
* @type {ReadonlyArray<MultiSelectItem>}
*/
export let items = [];
@ -29,7 +29,7 @@
/**
* Set the selected ids
* @type {MultiSelectItemId[]}
* @type {ReadonlyArray<MultiSelectItemId>}
*/
export let selectedIds = [];

2
src/Pagination/Pagination.svelte
View file

@ -47,7 +47,7 @@
/**
* Specify the available page sizes
* @type {number[]}
* @type {ReadonlyArray<number>}
*/
export let pageSizes = [10];

4
src/TreeView/TreeView.svelte
View file

@ -22,13 +22,13 @@
/**
* Set the node ids to be selected
* @type {TreeNodeId[]}
* @type {ReadonlyArray<TreeNodeId>}
*/
export let selectedIds = [];
/**
* Set the node ids to be expanded
* @type {TreeNodeId[]}
* @type {ReadonlyArray<TreeNodeId>}
*/
export let expandedIds = [];

2
src/UIShell/HeaderSearch.svelte
View file

@ -19,7 +19,7 @@
/**
* Render a list of search results
* @type {HeaderSearchResult[]}
* @type {ReadonlyArray<HeaderSearchResult>}
*/
export let results = [];

7
tests/ContextMenu.test.svelte
View file

@ -9,13 +9,16 @@
import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let ref: HTMLElement;
let selectedId = "0";
let selectedIds = [];
$: console.log("selectedId", selectedId);
</script>
<ContextMenu open on:open="{(e) => console.log(e.detail)}">
<div bind:this="{ref}"></div>
<ContextMenu target="{null}" open on:open="{(e) => console.log(e.detail)}">
<ContextMenuOption
kind="danger"
indented
@ -42,7 +45,7 @@
</ContextMenuGroup>
</ContextMenu>
<ContextMenu on:open on:close>
<ContextMenu target="{[null, ref]}" on:open on:close>
<ContextMenuOption indented labelText="Open" />
<ContextMenuDivider />
<ContextMenuRadioGroup bind:selectedId labelText="Radio group">

41
tests/Dropdown.test.svelte
View file

@ -1,16 +1,41 @@
<script lang="ts">
import { Dropdown, DropdownSkeleton } from "../types";
import type { DropdownProps } from "../types/Dropdown/Dropdown.svelte";
let items: DropdownProps["items"] = [
{ id: 0, text: "Slack" },
{ id: "1", text: "Email" },
{ id: "2", text: "Fax" },
] as const;
let itemsWithoutConst = [...items];
type FieldId = typeof items[number]["id"]; // 'foo' | 'bar' | 'baz'
export const fieldId: FieldId = "bar";
// @ts-expect-error
$: items[0] = { id: "0", text: "Slack" };
$: {
// @ts-expect-error
items[0] = { id: "0", text: "Slack" };
}
$: {
items = [...items, { id: "3", text: "Email" }];
items = items.map((item, index) => {
if (index === 0) {
return { id: "0", text: "Slack" };
}
return item;
});
}
</script>
<Dropdown
direction="top"
titleText="Contact"
selectedId="0"
items="{[
{ id: 0, text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax', disabled: true },
]}"
items="{items}"
on:select="{(e) => {
console.log(e.detail.selectedId);
}}"
@ -31,11 +56,7 @@
}}"
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
items="{itemsWithoutConst}"
/>
<Dropdown

8
tests/FileUploader.test.svelte
View file

@ -6,8 +6,15 @@
FileUploaderItem,
FileUploaderSkeleton,
} from "../types";
import type { FileUploaderProps } from "../types/FileUploader/FileUploader.svelte";
let fileUploader: FileUploader;
let files: FileUploaderProps["files"] = [];
$: {
// @ts-expect-error
files[0] = null;
}
$: fileUploader?.clearFiles();
</script>
@ -27,6 +34,7 @@
labelDescription="Only JPEG files are accepted."
accept="{['.jpg', '.jpeg']}"
status="complete"
bind:files
on:add="{(e) => {
console.log(e.detail); // File[]
}}"

9
tests/MultiSelect.test.svelte
View file

@ -1,5 +1,13 @@
<script lang="ts">
import { MultiSelect } from "../types";
import type { MultiSelectProps } from "../types/MultiSelect/MultiSelect.svelte";
let selectedIds: MultiSelectProps["selectedIds"] = [0];
$: {
// @ts-expect-error
selectedIds[0] = [0];
}
</script>
<MultiSelect
@ -7,6 +15,7 @@
titleText="Contact"
label="Select contact methods..."
hideLabel
bind:selectedIds
items="{[
{ id: 0, text: 'Slack' },
{ id: '1', text: 'Email' },

2
types/Checkbox/Checkbox.svelte.d.ts vendored
View file

@ -18,7 +18,7 @@ export interface CheckboxProps {
* Specify the bound group
* @default undefined
*/
group?: any[];
group?: ReadonlyArray<any>;
/**
* Specify whether the checkbox is indeterminate

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

@ -15,7 +15,7 @@ export interface ComboBoxProps
* Set the combobox items
* @default []
*/
items?: ComboBoxItem[];
items?: ReadonlyArray<ComboBoxItem>;
/**
* Override the display of a combobox item

2
types/ContextMenu/ContextMenu.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface ContextMenuProps
* If no element is specified, the context menu applies to the entire window
* @default null
*/
target?: null | HTMLElement | HTMLElement[];
target?: null | ReadonlyArray<null | HTMLElement>;
/**
* Set to `true` to open the menu

2
types/ContextMenu/ContextMenuGroup.svelte.d.ts vendored
View file

@ -5,7 +5,7 @@ export interface ContextMenuGroupProps {
/**
* @default []
*/
selectedIds?: string[];
selectedIds?: ReadonlyArray<string>;
/**
* Specify the label text

12
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -46,14 +46,14 @@ export interface DataTableProps
* Specify the data table headers
* @default []
*/
headers?: DataTableHeader[];
headers?: ReadonlyArray<DataTableHeader>;
/**
* Specify the rows the data table should render
* keys defined in `headers` are used for the row ids
* @default []
*/
rows?: DataTableRow[];
rows?: ReadonlyArray<DataTableRow>;
/**
* Set the size of the data table
@ -102,13 +102,13 @@ export interface DataTableProps
* Specify the row ids to be expanded
* @default []
*/
expandedRowIds?: DataTableRowId[];
expandedRowIds?: ReadonlyArray<DataTableRowId>;
/**
* Specify the ids for rows that should not be expandable
* @default []
*/
nonExpandableRowIds?: DataTableRowId[];
nonExpandableRowIds?: ReadonlyArray<DataTableRowId>;
/**
* Set to `true` for the radio selection variant
@ -133,13 +133,13 @@ export interface DataTableProps
* Specify the row ids to be selected
* @default []
*/
selectedRowIds?: DataTableRowId[];
selectedRowIds?: ReadonlyArray<DataTableRowId>;
/**
* Specify the ids of rows that should not be selectable
* @default []
*/
nonSelectableRowIds?: DataTableRowId[];
nonSelectableRowIds?: ReadonlyArray<DataTableRowId>;
/**
* Set to `true` to enable a sticky header

2
types/DataTable/DataTableSkeleton.svelte.d.ts vendored
View file

@ -41,7 +41,7 @@ export interface DataTableSkeletonProps
* Supersedes `columns` if value is a non-empty array
* @default []
*/
headers?: string[] | Partial<DataTableHeader>[];
headers?: ReadonlyArray<string | Partial<DataTableHeader>>;
/**
* Set to `false` to hide the toolbar

2
types/Dropdown/Dropdown.svelte.d.ts vendored
View file

@ -17,7 +17,7 @@ export interface DropdownProps
* Set the dropdown items
* @default []
*/
items?: DropdownItem[];
items?: ReadonlyArray<DropdownItem>;
/**
* Override the display of a dropdown item

10
types/FileUploader/FileUploader.svelte.d.ts vendored
View file

@ -19,13 +19,13 @@ export interface FileUploaderProps
* Specify the accepted file types
* @default []
*/
accept?: string[];
accept?: ReadonlyArray<string>;
/**
* Obtain a reference to the uploaded files
* @default []
*/
files?: File[];
files?: ReadonlyArray<File>;
/**
* Set to `true` to allow multiple files
@ -73,9 +73,9 @@ export interface FileUploaderProps
export default class FileUploader extends SvelteComponentTyped<
FileUploaderProps,
{
add: CustomEvent<File[]>;
remove: CustomEvent<File[]>;
change: CustomEvent<File[]>;
add: CustomEvent<ReadonlyArray<File>>;
remove: CustomEvent<ReadonlyArray<File>>;
change: CustomEvent<ReadonlyArray<File>>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];

6
types/FileUploader/FileUploaderButton.svelte.d.ts vendored
View file

@ -7,13 +7,13 @@ export interface FileUploaderButtonProps
* Specify the accepted file types
* @default []
*/
accept?: string[];
accept?: ReadonlyArray<string>;
/**
* Obtain a reference to the uploaded files
* @default []
*/
files?: File[];
files?: ReadonlyArray<File>;
/**
* Set to `true` to allow multiple files
@ -79,7 +79,7 @@ export interface FileUploaderButtonProps
export default class FileUploaderButton extends SvelteComponentTyped<
FileUploaderButtonProps,
{
change: CustomEvent<File[]>;
change: CustomEvent<ReadonlyArray<File>>;
keydown: WindowEventMap["keydown"];
click: WindowEventMap["click"];
},

14
types/FileUploader/FileUploaderDropContainer.svelte.d.ts vendored
View file

@ -7,13 +7,13 @@ export interface FileUploaderDropContainerProps
* Specify the accepted file types
* @default []
*/
accept?: string[];
accept?: ReadonlyArray<string>;
/**
* Obtain a reference to the uploaded files
* @default []
*/
files?: File[];
files?: ReadonlyArray<File>;
/**
* Set to `true` to allow multiple files
@ -22,11 +22,11 @@ export interface FileUploaderDropContainerProps
multiple?: boolean;
/**
* Override the default behavior of validating uploaded files
* The default behavior does not validate files
* Override the default behavior of validating uploaded files.
* By default, files are not validated
* @default (files) => files
*/
validateFiles?: (files: File[]) => File[];
validateFiles?: (files: ReadonlyArray<File>) => ReadonlyArray<File>;
/**
* Specify the label text
@ -74,8 +74,8 @@ export interface FileUploaderDropContainerProps
export default class FileUploaderDropContainer extends SvelteComponentTyped<
FileUploaderDropContainerProps,
{
add: CustomEvent<File[]>;
change: CustomEvent<File[]>;
add: CustomEvent<ReadonlyArray<File>>;
change: CustomEvent<ReadonlyArray<File>>;
dragover: WindowEventMap["dragover"];
dragleave: WindowEventMap["dragleave"];
drop: WindowEventMap["drop"];

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

@ -17,7 +17,7 @@ export interface MultiSelectProps
* Set the multiselect items
* @default []
*/
items?: MultiSelectItem[];
items?: ReadonlyArray<MultiSelectItem>;
/**
* Override the display of a multiselect item
@ -39,7 +39,7 @@ export interface MultiSelectProps
* Set the selected ids
* @default []
*/
selectedIds?: MultiSelectItemId[];
selectedIds?: ReadonlyArray<MultiSelectItemId>;
/**
* Specify the multiselect value

2
types/Pagination/Pagination.svelte.d.ts vendored
View file

@ -73,7 +73,7 @@ export interface PaginationProps
* Specify the available page sizes
* @default [10]
*/
pageSizes?: number[];
pageSizes?: ReadonlyArray<number>;
/**
* Set to `true` if the number of pages is unknown

4
types/TreeView/TreeView.svelte.d.ts vendored
View file

@ -30,13 +30,13 @@ export interface TreeViewProps
* Set the node ids to be selected
* @default []
*/
selectedIds?: TreeNodeId[];
selectedIds?: ReadonlyArray<TreeNodeId>;
/**
* Set the node ids to be expanded
* @default []
*/
expandedIds?: TreeNodeId[];
expandedIds?: ReadonlyArray<TreeNodeId>;
/**
* Specify the TreeView size

2
types/UIShell/HeaderSearch.svelte.d.ts vendored
View file

@ -31,7 +31,7 @@ export interface HeaderSearchProps
* Render a list of search results
* @default []
*/
results?: HeaderSearchResult[];
results?: ReadonlyArray<HeaderSearchResult>;
/**
* Specify the selected result index