carbon-components-svelte 0.90.3 → 0.91.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.90.3",
+  "version": "0.91.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;
 
@@ -89,7 +97,7 @@
 
   /**
    * Determine if an item should be filtered given the current combobox value
-   * @type {(item: ComboBoxItem, value: string) => boolean}
+   * @type {(item: Item, value: string) => boolean}
    */
   export let shouldFilterItem = () => true;
 
@@ -144,7 +152,7 @@
 
   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;
@@ -197,15 +205,7 @@
     } 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 +217,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;
       }
     }
   });

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
    */
 
   /**

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;
 

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
    */
 
   /**

package/src/MultiSelect/MultiSelect.svelte

@@ -1,29 +1,38 @@
 <script>
   /**
+   * @generics {Item extends MultiSelectItem = MultiSelectItem} Item
+   * @template {MultiSelectItem} Item
    * @typedef {any} MultiSelectItemId
    * @typedef {string} MultiSelectItemText
-   * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; disabled?: boolean; }} MultiSelectItem
-   * @event {{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select
+   * @typedef {object} MultiSelectItem
+   * @property {MultiSelectItemId} id
+   * @property {MultiSelectItemText} text
+   * @property {boolean} [disabled] - Whether the item is disabled
+   * @event select
+   * @type {object}
+   * @property {MultiSelectItemId[]} selectedIds
+   * @property {Item[]} selected
+   * @property {Item[]} unselected
    * @event {null} clear
    * @event {FocusEvent | CustomEvent<FocusEvent>} blur
-   * @slot {{ item: MultiSelectItem; index: number }}
+   * @slot {{ item: Item; index: number }}
    */
 
   /**
    * Set the multiselect items
-   * @type {ReadonlyArray<MultiSelectItem>}
+   * @type {ReadonlyArray<Item>}
    */
   export let items = [];
 
   /**
    * Override the display of a multiselect item
-   * @type {(item: MultiSelectItem) => any}
+   * @type {(item: Item) => any}
    */
   export let itemToString = (item) => item.text || item.id;
 
   /**
    * Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs.
-   * @type {(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }}
+   * @type {(item: Item) => { name?: string; labelText?: any; title?: string; value?: string }}
    */
   export let itemToInput = (_item) => {};
 
@@ -69,7 +78,7 @@
   /**
    * Override the filtering logic
    * The default filtering is an exact string comparison
-   * @type {(item: MultiSelectItem, value: string) => boolean}
+   * @type {(item: Item, value: string) => boolean}
    */
   export let filterItem = (item, value) =>
     item.text.toLowerCase().includes(value.trim().toLowerCase());
@@ -89,7 +98,7 @@
   /**
    * Override the sorting logic
    * The default sorting compare the item text value
-   * @type {((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)}
+   * @type {((a: Item, b: Item) => Item) | (() => void)}
    */
   export let sortItem = (a, b) =>
     a.text.localeCompare(b.text, locale, { numeric: true });

package/src/Notification/InlineNotification.svelte

@@ -1,6 +1,7 @@
 <script>
   /**
-   * @event {{ timeout: boolean }} close
+   * @event close
+   * @property {boolean} timeout
    */
 
   /**

package/src/Notification/ToastNotification.svelte

@@ -1,6 +1,7 @@
 <script>
   /**
-   * @event {{ timeout: boolean }} close
+   * @event close
+   * @property {boolean} timeout
    */
 
   /**

package/src/NumberInput/NumberInput.svelte

@@ -161,7 +161,7 @@
 
   $: incrementLabel = translateWithId("increment");
   $: decrementLabel = translateWithId("decrement");
-  $: error =
+  $: hasError =
     (invalid && !readonly) ||
     (!allowEmpty && value == null) ||
     value > max ||
@@ -230,7 +230,7 @@
   on:mouseleave
 >
   <div
-    data-invalid={error || undefined}
+    data-invalid={hasError || undefined}
     class:bx--number={true}
     class:bx--number--helpertext={true}
     class:bx--number--readonly={readonly}
@@ -261,8 +261,8 @@
           type="text"
           inputmode="decimal"
           aria-describedby={errorId}
-          data-invalid={error || undefined}
-          aria-invalid={error || undefined}
+          data-invalid={hasError || undefined}
+          aria-invalid={hasError || undefined}
           aria-label={label ? undefined : ariaLabel}
           {disabled}
           {id}
@@ -284,8 +284,8 @@
           type="number"
           pattern="[0-9]*"
           aria-describedby={errorId}
-          data-invalid={error || undefined}
-          aria-invalid={error || undefined}
+          data-invalid={hasError || undefined}
+          aria-invalid={hasError || undefined}
           aria-label={label ? undefined : ariaLabel}
           {disabled}
           {id}
@@ -353,7 +353,7 @@
         </div>
       {/if}
     </div>
-    {#if !error && !warn && helperText}
+    {#if !hasError && !warn && helperText}
       <div
         class:bx--form__helper-text={true}
         class:bx--form__helper-text--disabled={disabled}
@@ -361,12 +361,12 @@
         {helperText}
       </div>
     {/if}
-    {#if error}
+    {#if hasError}
       <div id={errorId} class:bx--form-requirement={true}>
         {invalidText}
       </div>
     {/if}
-    {#if !error && warn}
+    {#if !hasError && warn}
       <div id={errorId} class:bx--form-requirement={true}>{warnText}</div>
     {/if}
   </div>

package/src/OverflowMenu/OverflowMenu.svelte

@@ -1,6 +1,8 @@
 <script>
   /**
-   * @event {null | { index: number; text: string; }} close
+   * @event close
+   * @property {number} [index]
+   * @property {string} [text]
    */
 
   /**
@@ -32,7 +34,6 @@
 
   /**
    * Specify the icon to render.
-   * Defaults to `<OverflowMenuVertical />`
    * @type {any}
    */
   export let icon = OverflowMenuVertical;