github carbon-design-system/carbon-components-svelte v0.99.0
on GitHub

11 hours ago

Virtualization support for ComboBox, Dropdown, and MultiSelect

A long-requested feature set is virtualized lists.

Virtualization is a technique that renders only the items currently visible in the viewport, improving performance for large lists. A common use case is to support in-memory typeahead and filtering. Rendering and updating hundreds or thousands of items is expensive, leading to a laggy UI.

By default, ComboBox, Dropdown, and MultiSelect components will automatically virtualize lists with more than 100 items.

Set virtualize to true to explicitly enable it for lists with fewer than 100 items. Alternatively, configure a threshold for which virtualization should be enabled. Set virtualize to false to opt out altogether. Overscan and item heights can be customized.

See examples in the docs:

In the example below, 10,000 items are provided to the combobox, but only 11 items (8 visible items + 3 overscan items) are rendered in the DOM.

combo-box-virtualization.mov

Improved generics support for DataTable, Dropdown, ComboBox, MultiSelect, and TreeView

The id property is now generic, inferred by the item type passed to the component. Previously, a dedicated type alias was used to type the id, and was not generic.

Better generics for ComboBox

Implicit grouping for RadioButton

Previously, RadioButton required a parent RadioButtonGroup. However, in some scenarios, this is undesirable since RadioButtonGroup wraps its children with additional markup.

Now, multiple standalone RadioButton components sharing the same name attribute automatically form a group and synchronize their checked state.

Read the docs for more. 

<script>
  import { RadioButton, Stack } from "carbon-components-svelte";

  const options = [
    { value: "option1", label: "Option 1" },
    { value: "option2", label: "Option 2" },
    { value: "option3", label: "Option 3" },
  ];

  let checked = options.map(() => false);

  $: selected = options.find((_, i) => checked[i]);
</script>

<Stack gap={3}>
  <Stack orientation="horizontal">
    {#each options as option, i}
      <RadioButton
        bind:checked={checked[i]}
        value={option.value}
        labelText={option.label}
        name="implicit-group"
      />
    {/each}
  </Stack>

  <span>
    Selected:
    <strong>{selected?.label ?? "None"}</strong>
  </span>
</Stack>

Documentation for LLMs

One-click copy as Markdown

What's Changed

⚠ BREAKING CHANGES

  • header: rename slot "skip-to-content" to "skipToContent" for Svelte 5 support (#2546) by @metonym
  • data-table: rename slot "cell-header" to "cellHeader" for Svelte 5 support (#2546) by @metonym

Features

Bug Fixes

Full Changelog: v0.98.8...v0.99.0

Check out latest releases or
releases around carbon-design-system/carbon-components-svelte v0.99.0

Don't miss a new carbon-components-svelte release

NewReleases is sending notifications on new releases.

Get notifications