carbon-components-svelte 0.91.0 → 0.92.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.91.0",
+  "version": "0.92.0",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "type": "module",

package/src/ComboBox/ComboBox.svelte

@@ -52,7 +52,7 @@
   export let disabled = false;
 
   /** Specify the title text of the combobox */
-  export let titleText = "";
+  export let labelText = "";
 
   /** Set to `true` to visually hide the label text */
   export let hideLabel = false;
@@ -95,8 +95,12 @@
    */
   export let clearFilterOnOpen = false;
 
+  /** Set to `true` to enable autocomplete with typeahead */
+  export let typeahead = false;
+
   /**
-   * Determine if an item should be filtered given the current combobox value
+   * Determine if an item should be filtered given the current combobox value.
+   * Will be ignored if `typeahead` is enabled.
    * @type {(item: Item, value: string) => boolean}
    */
   export let shouldFilterItem = () => true;
@@ -149,6 +153,25 @@
   let prevSelectedId = null;
   let highlightedIndex = -1;
   let valueBeforeOpen = "";
+  let prevInputLength = 0;
+
+  /**
+   * @param {Item} item
+   * @param {string} inputValue
+   * @returns {boolean}
+   */
+  function autocompleteCustomFilter(item, inputValue) {
+    if (inputValue.length === 0) {
+      return true;
+    }
+
+    const lowercaseItem = item.text.toLowerCase();
+    const lowercaseInput = inputValue.toLowerCase();
+
+    return lowercaseItem.startsWith(lowercaseInput);
+  }
+
+  $: filterFn = typeahead ? autocompleteCustomFilter : shouldFilterItem;
 
   function change(dir) {
     let index = highlightedIndex + dir;
@@ -201,7 +224,7 @@
         value = "";
       }
 
-      filteredItems = items.filter((item) => shouldFilterItem(item, value));
+      filteredItems = items.filter((item) => filterFn(item, value));
     } else {
       highlightedIndex = -1;
       filteredItems = [];
@@ -251,7 +274,25 @@
   $: menuId = `menu-${id}`;
   $: comboId = `combo-${id}`;
   $: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : 0;
-  $: filteredItems = items.filter((item) => shouldFilterItem(item, value));
+  $: filteredItems = items.filter((item) => filterFn(item, value));
+
+  $: if (typeahead) {
+    const showNewSuggestion =
+      value.length > prevInputLength && filteredItems.length > 0;
+
+    prevInputLength = value.length;
+
+    if (ref && showNewSuggestion) {
+      const suggestion = itemToString(filteredItems[0]).slice(value.length);
+      const selectionStart = value.length;
+      const selectionEnd = selectionStart + suggestion.length;
+
+      tick().then(() => {
+        ref.value = value + suggestion;
+        ref.setSelectionRange(selectionStart, selectionEnd);
+      });
+    }
+  }
 </script>
 
 <svelte:window
@@ -263,15 +304,15 @@
 />
 
 <div class:bx--list-box__wrapper={true}>
-  {#if titleText || $$slots.titleText}
+  {#if labelText || $$slots.labelText}
     <label
       for={id}
       class:bx--label={true}
       class:bx--label--disabled={disabled}
       class:bx--visually-hidden={hideLabel}
     >
-      <slot name="titleText">
-        {titleText}
+      <slot name="labelText">
+        {labelText}
       </slot>
     </label>
   {/if}

package/src/ComposedModal/ComposedModal.svelte

@@ -140,6 +140,7 @@
   class:bx--modal={true}
   class:is-visible={open}
   class:bx--modal--danger={danger}
+  inert={open ? undefined : true}
   {...$$restProps}
   on:keydown
   on:keydown={(e) => {

package/src/Dropdown/Dropdown.svelte

@@ -61,7 +61,7 @@
   export let disabled = false;
 
   /** Specify the title text */
-  export let titleText = "";
+  export let labelText = "";
 
   /** Set to `true` to indicate an invalid state */
   export let invalid = false;
@@ -177,14 +177,14 @@
   class:bx--dropdown__wrapper--inline--invalid={inline && invalid}
   {...$$restProps}
 >
-  {#if titleText}
+  {#if labelText}
     <label
       for={id}
       class:bx--label={true}
       class:bx--label--disabled={disabled}
       class:bx--visually-hidden={hideLabel}
     >
-      {titleText}
+      {labelText}
     </label>
   {/if}
   <ListBox
@@ -193,10 +193,10 @@
     {size}
     {name}
     aria-label={$$props["aria-label"]}
-    class="bx--dropdown 
-      {direction === 'top' && 'bx--list-box--up'} 
-      {invalid && 'bx--dropdown--invalid'} 
-      {!invalid && warn && 'bx--dropdown--warning'} 
+    class="bx--dropdown
+      {direction === 'top' && 'bx--list-box--up'}
+      {invalid && 'bx--dropdown--invalid'}
+      {!invalid && warn && 'bx--dropdown--warning'}
       {open && 'bx--dropdown--open'}
       {size === 'sm' && 'bx--dropdown--sm'}
       {size === 'xl' && 'bx--dropdown--xl'}

package/src/Modal/Modal.svelte

@@ -162,6 +162,7 @@
   class:bx--modal-tall={!passiveModal}
   class:is-visible={open}
   class:bx--modal--danger={danger}
+  inert={open ? undefined : true}
   {...$$restProps}
   on:keydown
   on:keydown={(e) => {

package/src/MultiSelect/MultiSelect.svelte

@@ -117,8 +117,8 @@
    */
   export let translateWithIdSelection = undefined;
 
-  /** Specify the title text */
-  export let titleText = "";
+  /** Specify the label text */
+  export let labelText = "";
 
   /** Set to `true` to pass the item to `itemToString` in the checkbox */
   export let useTitleInItem = false;
@@ -325,15 +325,15 @@
   class:bx--list-box__wrapper--inline={inline}
   class:bx--multi-select__wrapper--inline--invalid={inline && invalid}
 >
-  {#if titleText || $$slots.titleText}
+  {#if labelText || $$slots.labelText}
     <label
       for={id}
       class:bx--label={true}
       class:bx--label--disabled={disabled}
       class:bx--visually-hidden={hideLabel}
     >
-      <slot name="titleText">
-        {titleText}
+      <slot name="labelText">
+        {labelText}
       </slot>
     </label>
   {/if}

package/src/NumberInput/NumberInput.svelte

@@ -74,7 +74,7 @@
   export let helperText = "";
 
   /** Specify the label text */
-  export let label = "";
+  export let labelText = "";
 
   /** Set to `true` to visually hide the label text */
   export let hideLabel = false;
@@ -240,14 +240,14 @@
     class:bx--number--sm={size === "sm"}
     class:bx--number--xl={size === "xl"}
   >
-    {#if $$slots.label || label}
+    {#if $$slots.labelText || labelText}
       <label
         for={id}
         class:bx--label={true}
         class:bx--label--disabled={disabled}
         class:bx--visually-hidden={hideLabel}
       >
-        <slot name="label">{label}</slot>
+        <slot name="labelText">{labelText}</slot>
       </label>
     {/if}
     <div
@@ -263,7 +263,7 @@
           aria-describedby={errorId}
           data-invalid={hasError || undefined}
           aria-invalid={hasError || undefined}
-          aria-label={label ? undefined : ariaLabel}
+          aria-label={labelText ? undefined : ariaLabel}
           {disabled}
           {id}
           {name}
@@ -286,7 +286,7 @@
           aria-describedby={errorId}
           data-invalid={hasError || undefined}
           aria-invalid={hasError || undefined}
-          aria-label={label ? undefined : ariaLabel}
+          aria-label={labelText ? undefined : ariaLabel}
           {disabled}
           {id}
           {name}

package/types/ComboBox/ComboBox.svelte.d.ts

@@ -57,7 +57,7 @@ type $Props<Item> = {
    * Specify the title text of the combobox
    * @default ""
    */
-  titleText?: string;
+  labelText?: string;
 
   /**
    * Set to `true` to visually hide the label text
@@ -130,7 +130,14 @@ type $Props<Item> = {
   clearFilterOnOpen?: boolean;
 
   /**
-   * Determine if an item should be filtered given the current combobox value
+   * Set to `true` to enable autocomplete with typeahead
+   * @default false
+   */
+  typeahead?: boolean;
+
+  /**
+   * Determine if an item should be filtered given the current combobox value.
+   * Will be ignored if `typeahead` is enabled.
    */
   shouldFilterItem?: (item: Item, value: string) => boolean;
 
@@ -195,7 +202,7 @@ export default class ComboBox<
     paste: WindowEventMap["paste"];
     scroll: WindowEventMap["scroll"];
   },
-  { default: { item: Item; index: number }; titleText: Record<string, never> }
+  { default: { item: Item; index: number }; labelText: Record<string, never> }
 > {
   /**
    * Clear the combo box programmatically

package/types/Dropdown/Dropdown.svelte.d.ts

@@ -71,7 +71,7 @@ type $Props<Item> = {
    * Specify the title text
    * @default ""
    */
-  titleText?: string;
+  labelText?: string;
 
   /**
    * Set to `true` to indicate an invalid state

package/types/MultiSelect/MultiSelect.svelte.d.ts

@@ -144,10 +144,10 @@ type $Props<Item> = {
   ) => string;
 
   /**
-   * Specify the title text
+   * Specify the label text
    * @default ""
    */
-  titleText?: string;
+  labelText?: string;
 
   /**
    * Set to `true` to pass the item to `itemToString` in the checkbox
@@ -263,5 +263,5 @@ export default class MultiSelect<
     focus: WindowEventMap["focus"];
     paste: WindowEventMap["paste"];
   },
-  { default: { item: Item; index: number }; titleText: Record<string, never> }
+  { default: { item: Item; index: number }; labelText: Record<string, never> }
 > {}

package/types/NumberInput/NumberInput.svelte.d.ts

@@ -114,7 +114,7 @@ type $Props = {
    * Specify the label text
    * @default ""
    */
-  label?: string;
+  labelText?: string;
 
   /**
    * Set to `true` to visually hide the label text
@@ -165,7 +165,7 @@ export default class NumberInput extends SvelteComponentTyped<
     blur: WindowEventMap["blur"];
     paste: WindowEventMap["paste"];
   },
-  { label: Record<string, never> }
+  { labelText: Record<string, never> }
 > {
   /**
    * Default translation ids