carbon-components-svelte 0.90.1 → 0.90.3

package/package.json

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

package/src/Accordion/Accordion.svelte

@@ -23,6 +23,9 @@
   import { writable } from "svelte/store";
   import AccordionSkeleton from "./AccordionSkeleton.svelte";
 
+  /**
+   * @type {import("svelte/store").Writable<boolean>}
+   */
   const disableItems = writable(disabled);
 
   $: disableItems.set(disabled);

package/src/Accordion/AccordionItem.svelte

@@ -14,7 +14,7 @@
   /** Specify the ARIA label for the accordion item chevron icon */
   export let iconDescription = "Expand/Collapse";
 
-  import { onMount, getContext } from "svelte";
+  import { getContext, onMount } from "svelte";
   import ChevronRight from "../icons/ChevronRight.svelte";
 
   let initialDisabled = disabled;

package/src/Breadcrumb/BreadcrumbItem.svelte

@@ -1,6 +1,6 @@
 <script>
   /**
-   * @slot {{props?: { ["aria-current"]?: string; class: "bx--link"; }}}
+   * @slot {{props?: { "aria-current"?: string; class: "bx--link"; }}}
    */
 
   /**
@@ -12,9 +12,8 @@
   /** Set to `true` if the breadcrumb item represents the current page */
   export let isCurrentPage = false;
 
-  import Link from "../Link/Link.svelte";
-
   import { setContext } from "svelte";
+  import Link from "../Link/Link.svelte";
 
   setContext("BreadcrumbItem", {});
 </script>

package/src/Breakpoint/Breakpoint.svelte

@@ -33,13 +33,13 @@
 
   $: size = $observer;
   $: sizes = {
-    sm: size == "sm",
-    md: size == "md",
-    lg: size == "lg",
-    xlg: size == "xlg",
-    max: size == "max",
+    sm: size === "sm",
+    md: size === "md",
+    lg: size === "lg",
+    xlg: size === "xlg",
+    max: size === "max",
   };
-  $: if (size != undefined)
+  $: if (size !== undefined)
     // svelte-ignore reactive_declaration_non_reactive_property
     dispatch("change", { size, breakpointValue: breakpoints[size] });
 </script>

package/src/Breakpoint/breakpointObserver.d.ts

@@ -1,5 +1,5 @@
 import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
-import type { BreakpointSize, BreakpointValue } from "./breakpoints";
+import type { BreakpointSize } from "./breakpoints";
 
 /**
  * Creates a readable store that returns the current breakpoint size.

package/src/Breakpoint/breakpointObserver.js

@@ -29,7 +29,7 @@ export function breakpointObserver() {
       matchers.map(([size, queryList]) => [queryList.media, size]),
     );
 
-    const size = matchers.find(([size, queryList]) => queryList.matches)[0];
+    const size = matchers.find(([_size, queryList]) => queryList.matches)[0];
     store.set(size);
 
     /** @type {(e: MediaQueryListEvent) => void} */
@@ -38,14 +38,14 @@ export function breakpointObserver() {
       if (matches) store.set(size);
     }
 
-    matchers.forEach(([size, queryList]) =>
-      queryList.addEventListener("change", handleChange),
-    );
+    matchers.forEach(([_size, queryList]) => {
+      queryList.addEventListener("change", handleChange);
+    });
 
     return () => {
-      matchers.forEach(([size, queryList]) =>
-        queryList.removeEventListener("change", handleChange),
-      );
+      matchers.forEach(([_size, queryList]) => {
+        queryList.removeEventListener("change", handleChange);
+      });
     };
   });
 
@@ -75,7 +75,7 @@ export function breakpointObserver() {
 }
 
 function checkSizeValid(size) {
-  if (size in breakpoints == false)
+  if (size in breakpoints === false)
     throw new Error(`"${size}" is not a valid breakpoint size.`);
 }
 

package/src/Button/Button.svelte

@@ -3,6 +3,7 @@
    * @extends {"./ButtonSkeleton.svelte"} ButtonSkeletonProps
    * @restProps {button | a | div}
    * @slot {{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }}
+   * @slot {{ style: undefined | string; }} icon
    */
 
   /**

package/src/Button/index.js

@@ -1,3 +1,3 @@
 export { default as Button } from "./Button.svelte";
-export { default as ButtonSkeleton } from "./ButtonSkeleton.svelte";
 export { default as ButtonSet } from "./ButtonSet.svelte";
+export { default as ButtonSkeleton } from "./ButtonSkeleton.svelte";

package/src/CodeSnippet/CodeSnippet.svelte

@@ -104,10 +104,10 @@
   /** Obtain a reference to the pre HTML element */
   export let ref = null;
 
-  import { createEventDispatcher, tick, onMount } from "svelte";
-  import ChevronDown from "../icons/ChevronDown.svelte";
+  import { createEventDispatcher, onMount, tick } from "svelte";
   import Button from "../Button/Button.svelte";
   import CopyButton from "../CopyButton/CopyButton.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";
   import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
 
   const dispatch = createEventDispatcher();

package/src/ComboBox/ComboBox.svelte

@@ -125,10 +125,10 @@
    */
   export let listRef = null;
 
-  import { createEventDispatcher, afterUpdate, tick } from "svelte";
+  import { afterUpdate, createEventDispatcher, tick } from "svelte";
   import Checkmark from "../icons/Checkmark.svelte";
-  import WarningFilled from "../icons/WarningFilled.svelte";
   import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
   import ListBox from "../ListBox/ListBox.svelte";
   import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
   import ListBoxMenuIcon from "../ListBox/ListBoxMenuIcon.svelte";

package/src/ComposedModal/ComposedModal.svelte

@@ -32,11 +32,11 @@
   export let ref = null;
 
   import {
+    afterUpdate,
     createEventDispatcher,
-    tick,
-    setContext,
     onMount,
-    afterUpdate,
+    setContext,
+    tick,
   } from "svelte";
   import { writable } from "svelte/store";
   import { trackModal } from "../Modal/modalStore";
@@ -59,20 +59,40 @@
     }
   }
 
+  /**
+   * @type {() => void}
+   */
+  const closeModal = () => {
+    close("close-button");
+  };
+
+  /**
+   * @type {() => void}
+   */
+  const submit = () => {
+    dispatch("submit");
+    dispatch("click:button--primary");
+  };
+
+  /**
+   * @type {(ref: HTMLButtonElement) => void}
+   */
+  const declareRef = (ref) => {
+    buttonRef = ref;
+  };
+
+  /**
+   * @type {(value: string | undefined) => void}
+   */
+  const updateLabel = (value) => {
+    label.set(value);
+  };
+
   setContext("ComposedModal", {
-    closeModal: () => {
-      close("close-button");
-    },
-    submit: () => {
-      dispatch("submit");
-      dispatch("click:button--primary");
-    },
-    declareRef: (ref) => {
-      buttonRef = ref;
-    },
-    updateLabel: (value) => {
-      label.set(value);
-    },
+    closeModal,
+    submit,
+    declareRef,
+    updateLabel,
   });
 
   function focus(element) {

package/src/ComposedModal/ModalFooter.svelte

@@ -40,7 +40,7 @@
   /** Set to `true` to use the danger variant */
   export let danger = false;
 
-  import { getContext, createEventDispatcher } from "svelte";
+  import { createEventDispatcher, getContext } from "svelte";
   import Button from "../Button/Button.svelte";
 
   const dispatch = createEventDispatcher();

package/src/ComposedModal/index.js

@@ -1,4 +1,4 @@
 export { default as ComposedModal } from "./ComposedModal.svelte";
-export { default as ModalHeader } from "./ModalHeader.svelte";
 export { default as ModalBody } from "./ModalBody.svelte";
 export { default as ModalFooter } from "./ModalFooter.svelte";
+export { default as ModalHeader } from "./ModalHeader.svelte";

package/src/ContentSwitcher/ContentSwitcher.svelte

@@ -16,6 +16,9 @@
   import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
+  /**
+   * @type {import("svelte/store").Writable<string | null>}
+   */
   const currentId = writable(null);
 
   $: currentIndex = -1;
@@ -25,29 +28,44 @@
     currentId.set(switches[currentIndex].id);
   }
 
-  setContext("ContentSwitcher", {
-    currentId,
-    add: ({ id, text, selected }) => {
-      if (selected) {
-        selectedIndex = switches.length;
-      }
+  /**
+   * @type {(data: { id: string; text: string; selected: boolean }) => void}
+   */
+  const add = ({ id, text, selected }) => {
+    if (selected) {
+      selectedIndex = switches.length;
+    }
 
-      switches = [...switches, { id, text, selected }];
-    },
-    update: (id) => {
-      selectedIndex = switches.map(({ id }) => id).indexOf(id);
-    },
-    change: (direction) => {
-      let index = currentIndex + direction;
+    switches = [...switches, { id, text, selected }];
+  };
 
-      if (index < 0) {
-        index = switches.length - 1;
-      } else if (index >= switches.length) {
-        index = 0;
-      }
+  /**
+   * @type {(id: string) => void}
+   */
+  const update = (id) => {
+    selectedIndex = switches.map(({ id }) => id).indexOf(id);
+  };
 
-      selectedIndex = index;
-    },
+  /**
+   * @type {(direction: number) => void}
+   */
+  const change = (direction) => {
+    let index = currentIndex + direction;
+
+    if (index < 0) {
+      index = switches.length - 1;
+    } else if (index >= switches.length) {
+      index = 0;
+    }
+
+    selectedIndex = index;
+  };
+
+  setContext("ContentSwitcher", {
+    currentId,
+    add,
+    update,
+    change,
   });
 
   afterUpdate(() => {

package/src/ContextMenu/ContextMenu.svelte

@@ -26,18 +26,27 @@
   export let ref = null;
 
   import {
-    onMount,
-    setContext,
-    getContext,
     afterUpdate,
     createEventDispatcher,
+    getContext,
+    onMount,
+    setContext,
   } from "svelte";
   import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
+  /**
+   * @type {import("svelte/store").Writable<[number, number]>}
+   */
   const position = writable([x, y]);
+  /**
+   * @type {import("svelte/store").Writable<number>}
+   */
   const currentIndex = writable(-1);
   const hasPopup = writable(false);
+  /**
+   * @type {import("svelte/store").Writable<number>}
+   */
   const menuOffsetX = writable(0);
   const ctx = getContext("ContextMenu");
 
@@ -48,6 +57,9 @@
   let focusIndex = -1;
   let openDetail = null;
 
+  /**
+   * @type {() => void}
+   */
   function close() {
     open = false;
     x = 0;
@@ -86,7 +98,9 @@
 
   $: if (target != null) {
     if (Array.isArray(target)) {
-      target.forEach((node) => node?.addEventListener("contextmenu", openMenu));
+      target.forEach((node) => {
+        node?.addEventListener("contextmenu", openMenu);
+      });
     } else {
       target.addEventListener("contextmenu", openMenu);
     }
@@ -96,9 +110,9 @@
     return () => {
       if (target != null) {
         if (Array.isArray(target)) {
-          target.forEach((node) =>
-            node?.removeEventListener("contextmenu", openMenu),
-          );
+          target.forEach((node) => {
+            node?.removeEventListener("contextmenu", openMenu);
+          });
         } else {
           target.removeEventListener("contextmenu", openMenu);
         }
@@ -106,14 +120,19 @@
     };
   });
 
+  /**
+   * @type {(popup: boolean) => void}
+   */
+  const setPopup = (popup) => {
+    hasPopup.set(popup);
+  };
+
   setContext("ContextMenu", {
     menuOffsetX,
     currentIndex,
     position,
     close,
-    setPopup: (popup) => {
-      hasPopup.set(popup);
-    },
+    setPopup,
   });
 
   afterUpdate(() => {

package/src/ContextMenu/ContextMenuGroup.svelte

@@ -8,22 +8,35 @@
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
 
+  /**
+   * @type {import("svelte/store").Writable<ReadonlyArray<string>>}
+   */
   const currentIds = writable([]);
 
+  /**
+   * @type {(data: { id: string }) => void}
+   */
+  const addOption = ({ id }) => {
+    if (!selectedIds.includes(id)) {
+      selectedIds = [...selectedIds, id];
+    }
+  };
+
+  /**
+   * @type {(data: { id: string }) => void}
+   */
+  const toggleOption = ({ id }) => {
+    if (!selectedIds.includes(id)) {
+      selectedIds = [...selectedIds, id];
+    } else {
+      selectedIds = selectedIds.filter((_) => _ !== id);
+    }
+  };
+
   setContext("ContextMenuGroup", {
     currentIds,
-    addOption: ({ id }) => {
-      if (!selectedIds.includes(id)) {
-        selectedIds = [...selectedIds, id];
-      }
-    },
-    toggleOption: ({ id }) => {
-      if (!selectedIds.includes(id)) {
-        selectedIds = [...selectedIds, id];
-      } else {
-        selectedIds = selectedIds.filter((_) => _ !== id);
-      }
-    },
+    addOption,
+    toggleOption,
   });
 
   $: currentIds.set(selectedIds);

package/src/ContextMenu/ContextMenuOption.svelte

@@ -48,10 +48,10 @@
   /** Obtain a reference to the list item HTML element */
   export let ref = null;
 
-  import { onMount, getContext, createEventDispatcher, tick } from "svelte";
-  import ContextMenu from "./ContextMenu.svelte";
-  import Checkmark from "../icons/Checkmark.svelte";
+  import { createEventDispatcher, getContext, onMount, tick } from "svelte";
   import CaretRight from "../icons/CaretRight.svelte";
+  import Checkmark from "../icons/Checkmark.svelte";
+  import ContextMenu from "./ContextMenu.svelte";
 
   const dispatch = createEventDispatcher();
   const ctx = getContext("ContextMenu");
@@ -156,9 +156,9 @@
     if (disabled) return ctx.close();
     if (subOptions) return;
 
-    if (!!ctxGroup) {
+    if (ctxGroup) {
       ctxGroup.toggleOption({ id });
-    } else if (!!ctxRadioGroup) {
+    } else if (ctxRadioGroup) {
       if (opts.fromKeyboard) {
         ctxRadioGroup.setOption({ id: opts.id });
       } else {

package/src/ContextMenu/ContextMenuRadioGroup.svelte

@@ -8,20 +8,36 @@
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
 
+  /**
+   * @type {import("svelte/store").Writable<string>}
+   */
   const currentId = writable("");
+  /**
+   * @type {import("svelte/store").Writable<ReadonlyArray<string>>}
+   */
   const radioIds = writable([]);
 
+  /**
+   * @type {(data: { id: string }) => void}
+   */
+  const addOption = ({ id }) => {
+    if (!$radioIds.includes(id)) {
+      radioIds.update((_) => [..._, id]);
+    }
+  };
+
+  /**
+   * @type {(data: { id: string }) => void}
+   */
+  const setOption = ({ id }) => {
+    selectedId = id;
+  };
+
   setContext("ContextMenuRadioGroup", {
     currentId,
     radioIds,
-    addOption: ({ id }) => {
-      if (!$radioIds.includes(id)) {
-        radioIds.update((_) => [..._, id]);
-      }
-    },
-    setOption: ({ id }) => {
-      selectedId = id;
-    },
+    addOption,
+    setOption,
   });
 
   $: currentId.set(selectedId);