@geoffcox/sterling-svelte 2.0.1 → 2.0.3

package/dist/ListItem.svelte

@@ -1,37 +1,52 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { getContext } from 'svelte';
-import { LIST_CONTEXT_KEY } from './List.constants';
-let { children, class: _class, disabled, value, ...rest } = $props();
-const listContext = getContext(LIST_CONTEXT_KEY);
-let selected = $state(listContext.selectedValue === value);
-// Using $derived would be preferred, but this helps avoid
-// updates to every list item when selectedValue changes.
-$effect(() => {
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { LIST_CONTEXT_KEY } from './List.constants';
+  import type { ListContext } from './List.types';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    value?: string;
+  };
+
+  let { children, class: _class, disabled, value, ...rest }: Props = $props();
+
+  const listContext = getContext<ListContext>(LIST_CONTEXT_KEY);
+
+  let selected = $state(listContext.selectedValue === value);
+
+  // Using $derived would be preferred, but this helps avoid
+  // updates to every list item when selectedValue changes.
+  $effect(() => {
     if (listContext.selectedValue === value && !selected) {
-        selected = true;
+      selected = true;
+    } else if (listContext.selectedValue !== value && selected) {
+      selected = false;
     }
-    else if (listContext.selectedValue !== value && selected) {
-        selected = false;
-    }
-});
-let itemRef;
-export const click = () => {
+  });
+
+  let itemRef: HTMLDivElement;
+
+  export const click = () => {
     itemRef?.click();
-};
-export const blur = () => {
+  };
+
+  export const blur = () => {
     itemRef?.blur();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     itemRef?.focus(options);
-};
+  };
 </script>
 
 <!-- svelte-ignore a11y_role_supports_aria_props -->
 <div
   aria-selected={selected}
   bind:this={itemRef}
-  class={['sterling-list-item', _class].filter(Boolean).join(' ')}
+  class={['sterling-list-item', _class]}
   class:disabled={disabled || listContext.disabled}
   class:horizontal={listContext.horizontal}
   class:item-disabled={disabled}

package/dist/ListItem.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean | null;

package/dist/Menu.svelte

@@ -1,72 +1,94 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { getContext } from 'svelte';
-import { slide } from 'svelte/transition';
-import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
-import { isElementEnabledMenuItem, isElementMenuItem } from './MenuItem.utils';
-import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
-let { children, class: _class, ...rest } = $props();
-let menuRef;
-let menuItemsRef;
-const noSlide = (node, params) => {
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { slide, type SlideParams, type TransitionConfig } from 'svelte/transition';
+  import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+  import type { MenuItemContext } from './MenuItem.types';
+  import { isElementEnabledMenuItem, isElementMenuItem } from './MenuItem.utils';
+  import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+
+  type Props = HTMLAttributes<HTMLDivElement>;
+
+  let { children, class: _class, ...rest }: Props = $props();
+
+  let menuRef: HTMLDivElement;
+  let menuItemsRef: HTMLDivElement;
+
+  const noSlide = (node: Element, params?: SlideParams): TransitionConfig => {
     return { delay: 0, duration: 0 };
-};
-let slideMotion = $derived(!$prefersReducedMotion ? slide : noSlide);
-const { rootValue = undefined } = getContext(MENU_ITEM_CONTEXT_KEY);
-const isElementInThisMenu = (candidate) => {
+  };
+
+  let slideMotion = $derived(!$prefersReducedMotion ? slide : noSlide);
+
+  const { rootValue = undefined } = getContext<MenuItemContext>(MENU_ITEM_CONTEXT_KEY);
+
+  const isElementInThisMenu = (candidate: Element) => {
     return candidate && candidate.closest('[role="menu"]') === menuRef;
-};
-//#region focus
-export const focus = (options) => {
+  };
+
+  //#region focus
+  export const focus = (options?: FocusOptions) => {
     menuRef?.focus(options);
-};
-export const blur = () => {
+  };
+
+  export const blur = () => {
     menuRef?.blur();
-};
-export const focusFirstMenuItem = () => {
-    let candidate = menuItemsRef?.firstElementChild;
+  };
+
+  export const focusFirstMenuItem = () => {
+    let candidate: Element | undefined | null = menuItemsRef?.firstElementChild;
     while (candidate && !isElementEnabledMenuItem(candidate)) {
-        candidate = candidate.nextElementSibling;
+      candidate = candidate.nextElementSibling;
     }
-    candidate?.focus({ preventScroll: true });
+
+    (candidate as HTMLElement)?.focus({ preventScroll: true });
     return !!candidate;
-};
-export const focusPreviousMenuItem = () => {
+  };
+
+  export const focusPreviousMenuItem = () => {
     let candidate = document.activeElement;
+
     if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
-        candidate = menuItemsRef?.previousElementSibling;
-        while (candidate && !isElementEnabledMenuItem(candidate)) {
-            candidate = candidate.previousElementSibling;
-        }
-        candidate?.focus();
+      candidate = menuItemsRef?.previousElementSibling;
+      while (candidate && !isElementEnabledMenuItem(candidate)) {
+        candidate = candidate.previousElementSibling;
+      }
+      (candidate as HTMLElement)?.focus();
     }
     return !!candidate;
-};
-export const focusNextMenuItem = () => {
+  };
+
+  export const focusNextMenuItem = () => {
     let candidate = document.activeElement;
+
     if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
-        candidate = menuItemsRef?.nextElementSibling;
-        while (candidate && !isElementEnabledMenuItem(candidate)) {
-            candidate = candidate.nextElementSibling;
-        }
-        candidate?.focus();
+      candidate = menuItemsRef?.nextElementSibling;
+      while (candidate && !isElementEnabledMenuItem(candidate)) {
+        candidate = candidate.nextElementSibling;
+      }
+      (candidate as HTMLElement)?.focus();
     }
     return !!candidate;
-};
-export const focusLastMenuItem = () => {
-    let candidate = menuItemsRef?.lastElementChild;
+  };
+
+  export const focusLastMenuItem = () => {
+    let candidate: Element | undefined | null = menuItemsRef?.lastElementChild;
     while (candidate && !isElementEnabledMenuItem(candidate)) {
-        candidate = candidate.previousElementSibling;
+      candidate = candidate.previousElementSibling;
     }
-    candidate?.focus({ preventScroll: true });
+
+    (candidate as HTMLElement)?.focus({ preventScroll: true });
     return !!candidate;
-};
-//#endregion
+  };
+
+  //#endregion
 </script>
 
 <div
   bind:this={menuRef}
-  class={['sterling-menu', _class].filter(Boolean).join(' ')}
+  class={['sterling-menu', _class]}
   role="menu"
   class:open
   data-root-value={rootValue}

package/dist/Menu.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = HTMLAttributes<HTMLDivElement>;
 declare const Menu: import("svelte").Component<Props, {

package/dist/MenuBar.svelte

@@ -1,113 +1,144 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { setContext } from 'svelte';
-import { clickOutside } from './actions/clickOutside';
-import { idGenerator } from './idGenerator';
-import { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
-import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
-import { isElementEnabledMenuItem } from './MenuItem.utils';
-let { class: _class, children, onClose, onOpen, onSelect, ...rest } = $props();
-const rootValue = idGenerator.nextId('MenuBar');
-let openValues = $state([]);
-let prevOpenValue = $state();
-let menuBarRef;
-$effect(() => {
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { clickOutside } from './actions/clickOutside';
+  import { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
+  import type { MenuBarContext } from './MenuBar.types';
+  import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+  import type { MenuItemContext } from './MenuItem.types';
+  import { isElementEnabledMenuItem } from './MenuItem.utils';
+
+  const uuid = $props.id();
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    onClose?: (value: string) => void;
+    onOpen?: (value: string) => void;
+    onSelect?: (value: string) => void;
+  };
+
+  let { class: _class, children, onClose, onOpen, onSelect, ...rest }: Props = $props();
+
+  const rootValue = `MenuBar-${uuid}`;
+  let openValues: string[] = $state([]);
+  let prevOpenValue: string | undefined = $state();
+
+  let menuBarRef: HTMLDivElement;
+
+  $effect(() => {
     prevOpenValue = openValues[0];
-});
-// Restore focus to the last open menu bar item when it closes
-$effect(() => {
+  });
+
+  // Restore focus to the last open menu bar item when it closes
+  $effect(() => {
     if (openValues.length === 0 && prevOpenValue !== undefined) {
-        const candidate = menuBarRef.querySelector(`[data-value="${prevOpenValue}"]`);
-        candidate?.focus();
-        prevOpenValue = undefined;
+      const candidate = menuBarRef.querySelector(`[data-value="${prevOpenValue}"]`);
+      (candidate as HTMLElement)?.focus();
+      prevOpenValue = undefined;
     }
-});
-export const blur = () => {
+  });
+
+  export const blur = () => {
     menuBarRef?.blur();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     menuBarRef?.focus(options);
-};
-const getOpenMenuBarItem = () => {
+  };
+
+  const getOpenMenuBarItem = () => {
     const value = openValues[0];
     if (value) {
-        return menuBarRef.querySelector(`[data-value="${value}"]`);
+      return menuBarRef.querySelector(`[data-value="${value}"]`);
     }
     return null;
-};
-const openPreviousMenuBarItem = () => {
+  };
+
+  const openPreviousMenuBarItem = () => {
     const openItem = getOpenMenuBarItem() || menuBarRef.firstElementChild;
     let candidate = openItem?.previousElementSibling || menuBarRef.lastElementChild;
+
     while (candidate && !isElementEnabledMenuItem(candidate)) {
-        candidate = candidate.previousElementSibling || menuBarRef.lastElementChild;
-        if (candidate === openItem) {
-            return false;
-        }
+      candidate = candidate.previousElementSibling || menuBarRef.lastElementChild;
+      if (candidate === openItem) {
+        return false;
+      }
     }
+
     if (!candidate) {
-        candidate = menuBarRef.lastElementChild;
-        candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
+      candidate = menuBarRef.lastElementChild;
+      candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
     }
-    candidate?.click();
+
+    (candidate as HTMLElement)?.click();
     return !!candidate;
-};
-const openNextMenuBarItem = () => {
+  };
+
+  const openNextMenuBarItem = () => {
     const openItem = getOpenMenuBarItem() || menuBarRef.lastElementChild;
     let candidate = openItem?.nextElementSibling || menuBarRef.firstElementChild;
+
     while (candidate && !isElementEnabledMenuItem(candidate)) {
-        candidate = candidate.nextElementSibling || menuBarRef.firstElementChild;
-        if (candidate === openItem) {
-            return false;
-        }
+      candidate = candidate.nextElementSibling || menuBarRef.firstElementChild;
+      if (candidate === openItem) {
+        return false;
+      }
     }
+
     if (!candidate) {
-        candidate = menuBarRef.firstElementChild;
-        candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
+      candidate = menuBarRef.firstElementChild;
+      candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
     }
-    candidate?.click();
+
+    (candidate as HTMLElement)?.click();
     return !!candidate;
-};
-const closeAllMenus = () => {
+  };
+
+  const closeAllMenus = () => {
     openValues = [];
-};
-const onClickOutside = (event) => {
-    let element = event.target;
+  };
+
+  const onClickOutside = (event: MouseEvent) => {
+    let element: HTMLElement | null = event.target as HTMLElement;
     while (element) {
-        if (element.getAttribute('data-root-value') === rootValue) {
-            return;
-        }
-        element = element.parentElement;
+      if (element.getAttribute('data-root-value') === rootValue) {
+        return;
+      }
+      element = element.parentElement;
     }
     closeAllMenus?.();
-};
-let menuBarContext = { openPreviousMenuBarItem, openNextMenuBarItem };
-setContext(MENU_BAR_CONTEXT_KEY, menuBarContext);
-let menuItemContext = {
+  };
+
+  let menuBarContext: MenuBarContext = { openPreviousMenuBarItem, openNextMenuBarItem };
+
+  setContext<MenuBarContext>(MENU_BAR_CONTEXT_KEY, menuBarContext);
+
+  let menuItemContext: MenuItemContext = {
     isMenuBarItem: true,
     depth: 0,
     get openValues() {
-        return openValues;
+      return openValues;
     },
-    set openValues(value) {
-        openValues = value;
+    set openValues(value: string[]) {
+      openValues = value;
     },
     rootValue,
     onClose,
     onOpen,
     onSelect
-};
-setContext(MENU_ITEM_CONTEXT_KEY, menuItemContext);
+  };
+
+  setContext<MenuItemContext>(MENU_ITEM_CONTEXT_KEY, menuItemContext);
 </script>
 
 <div
   bind:this={menuBarRef}
-  class={['sterling-menu-bar', _class].filter(Boolean).join(' ')}
+  class={['sterling-menu-bar', _class]}
   role="menubar"
   tabindex="-1"
   {...rest}
   use:clickOutside={{ onclickoutside: onClickOutside }}
 >
-  {#if children}
-    {@render children()}
-  {/if}
+  {@render children?.()}
 </div>

package/dist/MenuBar.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = HTMLAttributes<HTMLDivElement> & {
     onClose?: (value: string) => void;

package/dist/MenuButton.svelte

@@ -1,92 +1,132 @@
 <svelte:options runes={true} />
 
-<script lang="ts">import { setContext, tick } from 'svelte';
-import Button from './Button.svelte';
-import Menu from './Menu.svelte';
-import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
-import { idGenerator } from './idGenerator';
-import Popover from './Popover.svelte';
-import { clickOutside } from './actions/clickOutside';
-let { children, class: _class, items, menuClass, open = $bindable(false), onClose, onOpen, onSelect, popoverPlacement = 'bottom-start', value, ...rest } = $props();
-const instanceId = idGenerator.nextId('MenuButton');
-let buttonRef;
-let openValues = $state([]);
-let menuRef;
-let menuId = $derived(`${value}-menu-${instanceId}`);
-let prevOpen = $state(open);
-let reference = $state();
-export const click = () => {
+<script lang="ts">
+  import { setContext, tick, type Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { clickOutside } from './actions/clickOutside';
+  import Button from './Button.svelte';
+  import Menu from './Menu.svelte';
+  import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+  import type { MenuItemContext } from './MenuItem.types';
+  import Popover from './Popover.svelte';
+  import type { PopoverPlacement } from './Popover.types';
+
+  const uuid = $props.id();
+
+  type Props = HTMLButtonAttributes & {
+    items: Snippet;
+    menuClass?: string;
+    onOpen?: (value: string) => void;
+    onClose?: (value: string) => void;
+    onSelect?: (value: string) => void;
+    open?: boolean | null | undefined;
+    popoverPlacement?: PopoverPlacement;
+    value?: string;
+  };
+
+  let {
+    children,
+    class: _class,
+    items,
+    menuClass,
+    open = $bindable(false),
+    onClose,
+    onOpen,
+    onSelect,
+    popoverPlacement = 'bottom-start',
+    value,
+    ...rest
+  }: Props = $props();
+
+  const instanceId = `MenuButton-${uuid}`;
+
+  let buttonRef: Button;
+  let openValues: string[] = $state([]);
+  let menuRef: Menu;
+  let menuId = $derived(`${value}-menu-${instanceId}`);
+  let prevOpen = $state(open);
+  let reference: HTMLDivElement | undefined = $state();
+
+  export const click = () => {
     buttonRef?.click();
-};
-export const blur = () => {
+  };
+
+  export const blur = () => {
     buttonRef?.blur();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     buttonRef?.focus(options);
-};
-// update open based on openValues
-$effect(() => {
+  };
+
+  // update open based on openValues
+  $effect(() => {
     open = openValues.length > 0;
-});
-// update openValues based on open
-$effect(() => {
+  });
+
+  // update openValues based on open
+  $effect(() => {
     if (open) {
-        openValues = openValues.length > 0 ? openValues : ['menu-button'];
-    }
-    else {
-        openValues = openValues.length === 0 ? openValues : [];
+      openValues = openValues.length > 0 ? openValues : ['menu-button'];
+    } else {
+      openValues = openValues.length === 0 ? openValues : [];
     }
-});
-// focus when closing
-$effect(() => {
+  });
+
+  // focus when closing
+  $effect(() => {
     if (!open && open !== prevOpen) {
-        focus();
+      focus();
     }
     prevOpen = open;
-});
-const onClick = async () => {
+  });
+
+  const onClick = async () => {
     if (!open) {
-        openValues = ['menu-button'];
-        open = true;
-        await tick();
-        menuRef?.focusFirstMenuItem();
+      openValues = ['menu-button'];
+      open = true;
+      await tick();
+      menuRef?.focusFirstMenuItem();
+    } else {
+      open = false;
+      openValues = [];
     }
-    else {
-        open = false;
-        openValues = [];
-    }
-};
-const closeAllMenus = () => {
+  };
+
+  const closeAllMenus = () => {
     openValues = [];
     open = false;
-};
-const onClickOutside = (event) => {
-    let element = event.target;
+  };
+
+  const onClickOutside = (event: MouseEvent) => {
+    let element: HTMLElement | null = event.target as HTMLElement;
     while (element) {
-        if (element.getAttribute('data-root-value') === value) {
-            return;
-        }
-        element = element.parentElement;
+      if (element.getAttribute('data-root-value') === value) {
+        return;
+      }
+      element = element.parentElement;
     }
     closeAllMenus?.();
-};
-// ----- Context ----- //
-setContext(MENU_ITEM_CONTEXT_KEY, {
+  };
+
+  // ----- Context ----- //
+
+  setContext<MenuItemContext>(MENU_ITEM_CONTEXT_KEY, {
     depth: 1,
     get openValues() {
-        return openValues;
+      return openValues;
     },
-    set openValues(value) {
-        openValues = value;
+    set openValues(value: string[]) {
+      openValues = value;
     },
     rootValue: value,
     closeContainingMenu: () => {
-        open = false;
+      open = false;
     },
     onOpen,
     onClose,
     onSelect
-});
+  });
 </script>
 
 <Button
@@ -95,7 +135,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   aria-expanded={!!open}
   aria-haspopup={!!children}
   aria-owns={menuId}
-  class={['sterling-menu-button', _class].filter(Boolean).join(' ')}
+  class={['sterling-menu-button', _class]}
   data-value={value}
   data-root-value={value}
   {...rest}

package/dist/MenuButton.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLButtonAttributes } from 'svelte/elements';
 import { type Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { PopoverPlacement } from './Popover.types';
 type Props = HTMLButtonAttributes & {
     items: Snippet;