carbon-components-svelte 0.90.3 → 0.92.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.90.3",
+  "version": "0.92.0",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "type": "module",
@@ -30,8 +30,7 @@
     "css/*.css"
   ],
   "scripts": {
-    "postinstall": "ibmtelemetry --config=telemetry.yml",
-    "prepare": "lefthook install"
+    "postinstall": "ibmtelemetry --config=telemetry.yml"
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.5.0",

package/src/Breakpoint/Breakpoint.svelte

@@ -2,7 +2,10 @@
   /**
    * @typedef {"sm" | "md" | "lg" | "xlg" | "max"} BreakpointSize
    * @typedef {320 | 672 | 1056 | 1312 | 1584} BreakpointValue
-   * @event {{ size: BreakpointSize; breakpointValue: BreakpointValue; }} change
+   * @event change
+   * @type {object}
+   * @property {BreakpointSize} size
+   * @property {BreakpointValue} breakpointValue
    * @slot {{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; }}
    */
 

package/src/Breakpoint/breakpointObserver.js

@@ -38,14 +38,14 @@ export function breakpointObserver() {
       if (matches) store.set(size);
     }
 
-    matchers.forEach(([_size, queryList]) => {
+    for (const [_size, queryList] of matchers) {
       queryList.addEventListener("change", handleChange);
-    });
+    }
 
     return () => {
-      matchers.forEach(([_size, queryList]) => {
+      for (const [_size, queryList] of matchers) {
         queryList.removeEventListener("change", handleChange);
-      });
+      }
     };
   });
 

package/src/Breakpoint/breakpoints.d.ts

@@ -2,7 +2,7 @@
  * Pixel sizes of Carbon grid breakpoints.
  * @type {Record<BreakpointSize, BreakpointValue>}
  */
-export const breakpoints: Record<BreakpointSize, BreakpointValue>;
+export declare const breakpoints: Record<BreakpointSize, BreakpointValue>;
 
 export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
 

package/src/ComboBox/ComboBox.svelte

@@ -1,21 +1,29 @@
 <script>
   /**
+   * @generics {Item extends ComboBoxItem = ComboBoxItem} Item
+   * @template {ComboBoxItem} Item
    * @typedef {any} ComboBoxItemId
-   * @typedef {{ id: ComboBoxItemId; text: string; disabled?: boolean; }} ComboBoxItem
-   * @event {{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }} select
+   * @typedef {object} ComboBoxItem
+   * @property {ComboBoxItemId} id
+   * @property {string} text
+   * @property {boolean} [disabled] - Whether the item is disabled
+   * @event select
+   * @type {object}
+   * @property {ComboBoxItemId} selectedId
+   * @property {Item} selectedItem
    * @event {KeyboardEvent | MouseEvent} clear
-   * @slot {{ item: ComboBoxItem; index: number }}
+   * @slot {{ item: Item; index: number }}
    */
 
   /**
    * Set the combobox items
-   * @type {ReadonlyArray<ComboBoxItem>}
+   * @type {ReadonlyArray<Item>}
    */
   export let items = [];
 
   /**
    * Override the display of a combobox item
-   * @type {(item: ComboBoxItem) => string}
+   * @type {(item: Item) => string}
    */
   export let itemToString = (item) => item.text || item.id;
 
@@ -44,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;
@@ -87,9 +95,13 @@
    */
   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
-   * @type {(item: ComboBoxItem, value: string) => boolean}
+   * 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;
 
@@ -141,10 +153,29 @@
   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;
-    let _items = !filteredItems?.length ? items : filteredItems;
+    let _items = filteredItems?.length ? filteredItems : items;
     if (_items.length === 0) return;
     if (index < 0) {
       index = _items.length - 1;
@@ -193,19 +224,11 @@
         value = "";
       }
 
-      filteredItems = items.filter((item) => shouldFilterItem(item, value));
+      filteredItems = items.filter((item) => filterFn(item, value));
     } else {
       highlightedIndex = -1;
       filteredItems = [];
-      if (!selectedItem) {
-        selectedId = undefined;
-        // Only reset value if the input is not focused and allowCustomValue is false
-        if (!ref.contains(document.activeElement) && !allowCustomValue) {
-          value = "";
-        }
-        highlightedIndex = -1;
-        highlightedId = undefined;
-      } else {
+      if (selectedItem) {
         // Only set value if the input is not focused
         if (!ref.contains(document.activeElement)) {
           // Restore the value if clearFilterOnOpen was used and no new selection was made
@@ -217,6 +240,14 @@
           }
           valueBeforeOpen = "";
         }
+      } else {
+        selectedId = undefined;
+        // Only reset value if the input is not focused and allowCustomValue is false
+        if (!ref.contains(document.activeElement) && !allowCustomValue) {
+          value = "";
+        }
+        highlightedIndex = -1;
+        highlightedId = undefined;
       }
     }
   });
@@ -243,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
@@ -255,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

@@ -1,7 +1,9 @@
 <script>
   /**
-   * @event {{ trigger: "escape-key" | "outside-click" | "close-button" }} close
-   * @event {{ open: boolean; }} transitionend
+   * @event close
+   * @property {"escape-key" | "outside-click" | "close-button"} trigger
+   * @event transitionend
+   * @property {boolean} open
    */
 
   /**
@@ -138,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/ComposedModal/ModalFooter.svelte

@@ -1,6 +1,7 @@
 <script>
   /**
-   * @event {{ text: string; }} click:button--secondary
+   * @event click:button--secondary
+   * @property {string} text
    */
 
   /** Specify the primary button text */

package/src/ContextMenu/ContextMenu.svelte

@@ -98,9 +98,9 @@
 
   $: if (target != null) {
     if (Array.isArray(target)) {
-      target.forEach((node) => {
+      for (const node of target) {
         node?.addEventListener("contextmenu", openMenu);
-      });
+      }
     } else {
       target.addEventListener("contextmenu", openMenu);
     }
@@ -110,9 +110,9 @@
     return () => {
       if (target != null) {
         if (Array.isArray(target)) {
-          target.forEach((node) => {
+          for (const node of target) {
             node?.removeEventListener("contextmenu", openMenu);
-          });
+          }
         } else {
           target.removeEventListener("contextmenu", openMenu);
         }
@@ -153,7 +153,7 @@
     if (!$hasPopup && options[focusIndex]) options[focusIndex].focus();
   });
 
-  $: level = !ctx ? 1 : 2;
+  $: level = ctx ? 2 : 1;
   $: currentIndex.set(focusIndex);
 </script>
 

package/src/ContextMenu/ContextMenuGroup.svelte

@@ -26,10 +26,10 @@
    * @type {(data: { id: string }) => void}
    */
   const toggleOption = ({ id }) => {
-    if (!selectedIds.includes(id)) {
-      selectedIds = [...selectedIds, id];
-    } else {
+    if (selectedIds.includes(id)) {
       selectedIds = selectedIds.filter((_) => _ !== id);
+    } else {
+      selectedIds = [...selectedIds, id];
     }
   };
 

package/src/DataTable/DataTable.svelte

@@ -4,45 +4,64 @@
    * @template {DataTableRow} Row
    * @typedef {import('./DataTableTypes.d.ts').PropertyPath<Row>} DataTableKey<Row=DataTableRow>
    * @typedef {any} DataTableValue
-   * @typedef {{
-   *    key: DataTableKey<Row> | (string & {});
-   *    empty: boolean;
-   *    display?: (item: DataTableValue, row: Row) => DataTableValue;
-   *    sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
-   *    columnMenu?: boolean;
-   *    width?: string;
-   *    minWidth?: string;
-   * }} DataTableEmptyHeader<Row=DataTableRow>
-   * @typedef {{
-   *    key: DataTableKey<Row>;
-   *    value: DataTableValue;
-   *    display?: (item: DataTableValue, row: Row) => DataTableValue;
-   *    sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
-   *    columnMenu?: boolean;
-   *    width?: string;
-   *    minWidth?: string;
-   * }} DataTableNonEmptyHeader<Row=DataTableRow>
+   * @typedef {object} DataTableEmptyHeader<Row=DataTableRow>
+   * @property {DataTableKey<Row> | (string & {})} key
+   * @property {boolean} empty - Whether the header is empty
+   * @property {(item: DataTableValue, row: Row) => DataTableValue} [display]
+   * @property {false | ((a: DataTableValue, b: DataTableValue) => number)} [sort]
+   * @property {boolean} [columnMenu] - Whether the column menu is enabled
+   * @property {string} [width]
+   * @property {string} [minWidth]
+   * @typedef {object} DataTableNonEmptyHeader<Row=DataTableRow>
+   * @property {DataTableKey<Row>} key
+   * @property {DataTableValue} value
+   * @property {(item: DataTableValue, row: Row) => DataTableValue} [display]
+   * @property {false | ((a: DataTableValue, b: DataTableValue) => number)} [sort]
+   * @property {boolean} [columnMenu] - Whether the column menu is enabled
+   * @property {string} [width]
+   * @property {string} [minWidth]
    * @typedef {DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>} DataTableHeader<Row=DataTableRow>
    * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
    * @typedef {any} DataTableRowId
-   * @typedef {{
-   *    key: DataTableKey<Row> | (string & {});
-   *    value: DataTableValue;
-   *    display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
-   * }} DataTableCell<Row=DataTableRow>
+   * @typedef {object} DataTableCell<Row=DataTableRow>
+   * @property {DataTableKey<Row> | (string & {})} key
+   * @property {DataTableValue} value
+   * @property {(item: DataTableValue, row: DataTableRow) => DataTableValue} [display]
    * @slot {{ row: Row; rowSelected: boolean; }} expanded-row
    * @slot {{ header: DataTableNonEmptyHeader; }} cell-header
    * @slot {{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; rowSelected: boolean; rowExpanded: boolean; }} cell
-   * @event {{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }} click
-   * @event {{ expanded: boolean; }} click:header--expand
-   * @event {{ header: DataTableHeader<Row>; sortDirection?: "ascending" | "descending" | "none"; target: EventTarget; currentTarget: EventTarget; }} click:header
-   * @event {{ indeterminate: boolean; selected: boolean; }} click:header--select
-   * @event {{ row: Row; target: EventTarget; currentTarget: EventTarget; }} click:row
+   * @event click
+   * @type {object}
+   * @property {DataTableHeader<Row>} [header]
+   * @property {Row} [row]
+   * @property {DataTableCell<Row>} [cell]
+   * @event click:header--expand
+   * @type {object}
+   * @property {boolean} expanded
+   * @event click:header
+   * @type {object}
+   * @property {DataTableHeader<Row>} header
+   * @property {"ascending" | "descending" | "none"} [sortDirection]
+   * @event click:header--select
+   * @type {object}
+   * @property {boolean} indeterminate
+   * @property {boolean} selected
+   * @event click:row
+   * @type {object}
+   * @property {Row} row
    * @event {Row} mouseenter:row
    * @event {Row} mouseleave:row
-   * @event {{ expanded: boolean; row: Row; }} click:row--expand
-   * @event {{ selected: boolean; row: Row; }} click:row--select
-   * @event {{ cell: DataTableCell<Row>; target: EventTarget; currentTarget: EventTarget; }} click:cell
+   * @event click:row--expand
+   * @type {object}
+   * @property {boolean} expanded
+   * @property {Row} row
+   * @event click:row--select
+   * @type {object}
+   * @property {boolean} selected
+   * @property {Row} row
+   * @event click:cell
+   * @type {object}
+   * @property {DataTableCell<Row>} cell
    * @restProps {div}
    */
 
@@ -169,6 +188,8 @@
   import TableHeader from "./TableHeader.svelte";
   import TableRow from "./TableRow.svelte";
 
+  const PATH_SPLIT_REGEX = /[.[\]'"]/;
+
   const sortDirectionMap = {
     none: "ascending",
     ascending: "descending",
@@ -198,7 +219,7 @@
   const resolvePath = (object, path) => {
     if (path in object) return object[path];
     return path
-      .split(/[.[\]'"]/)
+      .split(PATH_SPLIT_REGEX)
       .filter((p) => p)
       .reduce((o, p) => (o && typeof o === "object" ? o[p] : o), object);
   };

package/src/DatePicker/DatePicker.svelte

@@ -207,9 +207,9 @@
       calendar.set("maxDate", maxDate);
       calendar.set("locale", locale);
       calendar.set("dateFormat", dateFormat);
-      Object.entries(flatpickrProps).forEach(([_option, value]) => {
+      for (const [_option, value] of Object.entries(flatpickrProps)) {
         calendar.set(options, value);
-      });
+      }
       return;
     }
 

package/src/DatePicker/createCalendar.js

@@ -17,19 +17,19 @@ function updateClasses(instance) {
     .classList.add("bx--date-picker__month");
 
   weekdayContainer.classList.add("bx--date-picker__weekdays");
-  weekdayContainer.querySelectorAll(".flatpickr-weekday").forEach((node) => {
+  for (const node of weekdayContainer.querySelectorAll(".flatpickr-weekday")) {
     node.classList.add("bx--date-picker__weekday");
-  });
+  }
 
   daysContainer.classList.add("bx--date-picker__days");
-  days.querySelectorAll(".flatpickr-day").forEach((node) => {
+  for (const node of days.querySelectorAll(".flatpickr-day")) {
     node.classList.add("bx--date-picker__day");
     if (node.classList.contains("today") && selectedDates.length > 0) {
       node.classList.add("no-border");
     } else if (node.classList.contains("today") && selectedDates.length === 0) {
       node.classList.remove("no-border");
     }
-  });
+  }
 }
 
 function updateMonthNode(instance) {
@@ -51,11 +51,12 @@ async function createCalendar({ options, base, input, dispatch }) {
   let locale = options.locale;
 
   if (options.locale === "en" && l10n && l10n.en) {
-    l10n.en.weekdays.shorthand.forEach((_, index) => {
+    for (let index = 0; index < l10n.en.weekdays.shorthand.length; index++) {
+      const _ = l10n.en.weekdays.shorthand[index];
       const shorthand = _.slice(0, 2);
       l10n.en.weekdays.shorthand[index] =
         shorthand === "Th" ? "Th" : shorthand.charAt(0);
-    });
+    }
 
     locale = l10n.en;
   }

package/src/Dropdown/Dropdown.svelte

@@ -1,21 +1,29 @@
 <script>
   /**
+   * @generics {Item extends DropdownItem = DropdownItem} Item
+   * @template {DropdownItem} Item
    * @typedef {any} DropdownItemId
    * @typedef {string} DropdownItemText
-   * @typedef {{ id: DropdownItemId; text: DropdownItemText; disabled?: boolean; }} DropdownItem
-   * @event {{ selectedId: DropdownItemId, selectedItem: DropdownItem }} select
-   * @slot {{ item: DropdownItem; index: number; }}
+   * @typedef {object} DropdownItem
+   * @property {DropdownItemId} id
+   * @property {DropdownItemText} text
+   * @property {boolean} [disabled] - Whether the item is disabled
+   * @event select
+   * @type {object}
+   * @property {DropdownItemId} selectedId
+   * @property {Item} selectedItem
+   * @slot {{ item: Item; index: number; }}
    */
 
   /**
    * Set the dropdown items
-   * @type {ReadonlyArray<DropdownItem>}
+   * @type {ReadonlyArray<Item>}
    */
   export let items = [];
 
   /**
    * Override the display of a dropdown item
-   * @type {(item: DropdownItem) => string}
+   * @type {(item: Item) => string}
    */
   export let itemToString = (item) => item.text || item.id;
 
@@ -53,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;
@@ -169,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
@@ -185,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/FileUploader/FileUploaderButton.svelte

@@ -69,9 +69,9 @@
     // Sync input files with component files array.
     try {
       const dt = new DataTransfer();
-      files.forEach((file) => {
+      for (const file of files) {
         dt.items.add(file);
-      });
+      }
       ref.files = dt.files;
     } catch {
       // Fail open if DataTransfer API is not supported.

package/src/Grid/Column.svelte

@@ -1,7 +1,9 @@
 <script>
   /**
    * @typedef {boolean | number} ColumnSize
-   * @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor
+   * @typedef ColumnSizeDescriptor
+   * @property {ColumnSize} [span]
+   * @property {number} offset
    * @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
    * @restProps {div}
    * @slot {{props: { class: string; [key: string]: any; }}}

package/src/LocalStorage/LocalStorage.svelte

@@ -1,7 +1,9 @@
 <script>
   /**
    * @event {null} save
-   * @event {{ prevValue: any; value: any; }} update
+   * @event update
+   * @property {any} prevValue
+   * @property {any} value
    */
 
   /**

package/src/Modal/Modal.svelte

@@ -1,8 +1,14 @@
 <script>
   /**
-   * @event {{ trigger: "escape-key" | "outside-click" | "close-button" }} close
-   * @event {{ open: boolean; }} transitionend
-   * @event {{ text: string; }} click:button--secondary
+   * @event close
+   * @type {object}
+   * @property {"escape-key" | "outside-click" | "close-button"} trigger
+   * @event transitionend
+   * @type {object}
+   * @property {boolean} open
+   * @event click:button--secondary
+   * @type {object}
+   * @property {string} text
    */
 
   /**
@@ -156,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) => {