@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/List.svelte.d.ts

@@ -1,75 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        horizontal?: boolean | undefined;
-        selectedValue?: string | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        scrollToSelectedItem?: (() => void) | undefined;
-        selectFirstItem?: (() => boolean) | undefined;
-        selectPreviousItem?: (() => boolean) | undefined;
-        selectNextItem?: (() => boolean) | undefined;
-        selectLastItem?: (() => boolean) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        scroll: Event;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            horizontal: boolean;
-            selectedValue: string | undefined;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    horizontal?: boolean | null;
+    selectedValue?: string;
+    onSelect?: (value?: string) => void;
 };
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
-/** A list of items where a single item can be selected. */
-export default class List extends SvelteComponent<ListProps, ListEvents, ListSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get scrollToSelectedItem(): () => void;
-    get selectFirstItem(): () => boolean;
-    get selectPreviousItem(): () => boolean;
-    get selectNextItem(): () => boolean;
-    get selectLastItem(): () => boolean;
-}
-export {};
+declare const List: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+    scrollToSelectedItem: () => void;
+    selectFirstItem: () => boolean;
+    selectPreviousItem: () => boolean;
+    selectNextItem: () => boolean;
+    selectLastItem: () => boolean;
+}, "selectedValue">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/List.types.d.ts

@@ -1,13 +1,5 @@
-/// <reference types="svelte" />
-import type { Readable, Writable } from 'svelte/store';
-/**
- * The context for a List and its descendants.
- */
 export type ListContext = {
-    /** When true, the list and its items are disabled. */
-    disabled?: Readable<boolean>;
-    /** The value of the currently selected item. */
-    selectedValue?: Writable<string | undefined>;
-    /** When true, the list is laid out horizontally. */
-    horizontal?: Readable<boolean>;
+    disabled?: boolean | null | undefined;
+    selectedValue?: string;
+    horizontal?: boolean | null | undefined;
 };

package/dist/ListItem.svelte

@@ -1,23 +1,21 @@
-<script>import { getContext } from 'svelte';
-import { readable, writable } from 'svelte/store';
+<svelte:options runes={true} />
+
+<script lang="ts">import { getContext } from 'svelte';
 import { LIST_CONTEXT_KEY } from './List.constants';
-// ----- Props ----- //
-/** When true the item is disabled.  The item is also disabled if the parent list is disabled. */
-export let disabled = false;
-/** The value uniquely identifying this item within the list. */
-export let value;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- GetContext ----- //
-const { disabled: listDisabled, selectedValue, horizontal } = getContext(LIST_CONTEXT_KEY) || {
-    disabled: readable(false),
-    selectedValue: writable(undefined),
-    horizontal: readable(false)
-};
-// ----- State ----- //
+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(() => {
+    if (listContext.selectedValue === value && !selected) {
+        selected = true;
+    }
+    else if (listContext.selectedValue !== value && selected) {
+        selected = false;
+    }
+});
 let itemRef;
-$: selected = $selectedValue === value;
-// ----- Methods ----- //
 export const click = () => {
     itemRef?.click();
 };
@@ -29,50 +27,23 @@ export const focus = (options) => {
 };
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<!-- svelte-ignore a11y-role-supports-aria-props -->
+<!-- svelte-ignore a11y_role_supports_aria_props -->
 <div
   aria-selected={selected}
   bind:this={itemRef}
-  class={`sterling-list-item ${variant}`}
-  class:disabled={disabled || $listDisabled}
+  class={['sterling-list-item', _class].filter(Boolean).join(' ')}
+  class:disabled={disabled || listContext.disabled}
+  class:horizontal={listContext.horizontal}
   class:item-disabled={disabled}
-  class:list-disabled={$listDisabled}
+  class:list-disabled={listContext.disabled}
   class:selected
   data-value={value}
   role="listitem"
-  on:blur
-  on:click
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel|passive
-  {...$$restProps}
+  {...rest}
 >
-  <slot {disabled} {horizontal} {selected} {value} {variant}>{value}</slot>
+  {#if children}
+    {@render children()}
+  {:else}
+    {value}
+  {/if}
 </div>

package/dist/ListItem.svelte.d.ts

@@ -1,67 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        value: string;
-        variant?: string | undefined;
-        click?: (() => void) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        pointercancel: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            horizontal: import("svelte/store").Readable<boolean> | undefined;
-            selected: boolean;
-            value: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    value?: string;
 };
-export type ListItemProps = typeof __propDef.props;
-export type ListItemEvents = typeof __propDef.events;
-export type ListItemSlots = typeof __propDef.slots;
-export default class ListItem extends SvelteComponent<ListItemProps, ListItemEvents, ListItemSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+declare const ListItem: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/Menu.svelte

@@ -1,30 +1,27 @@
-<script>import { getContext } from 'svelte';
+<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';
-// ----- Props ----- //
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+let { children, class: _class, ...rest } = $props();
 let menuRef;
 let menuItemsRef;
-// ----- Media Queries ----- //
-const slidNoOp = (node, params) => {
+const noSlide = (node, params) => {
     return { delay: 0, duration: 0 };
 };
-$: slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
-// ----- Get Context ----- //
-const { rootValue } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
-// ----- Methods ----- //
-export const blur = () => {
-    menuRef?.blur();
+let slideMotion = $derived(!$prefersReducedMotion ? slide : noSlide);
+const { rootValue = undefined } = getContext(MENU_ITEM_CONTEXT_KEY);
+const isElementInThisMenu = (candidate) => {
+    return candidate && candidate.closest('[role="menu"]') === menuRef;
 };
+//#region focus
 export const focus = (options) => {
     menuRef?.focus(options);
 };
-const isElementInThisMenu = (candidate) => {
-    return candidate && candidate.closest('[role="menu"]') === menuRef;
+export const blur = () => {
+    menuRef?.blur();
 };
 export const focusFirstMenuItem = () => {
     let candidate = menuItemsRef?.firstElementChild;
@@ -64,47 +61,23 @@ export const focusLastMenuItem = () => {
     candidate?.focus({ preventScroll: true });
     return !!candidate;
 };
+//#endregion
 </script>
 
 <div
   bind:this={menuRef}
-  class={`sterling-menu ${variant}`}
+  class={['sterling-menu', _class].filter(Boolean).join(' ')}
   role="menu"
   class:open
   data-root-value={rootValue}
   tabindex="-1"
   in:slideMotion|global={{ duration: 300 }}
   out:slideMotion|global={{ duration: 100 }}
-  on:blur
-  on:click
-  on:copy
-  on:cut
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:scroll
-  on:wheel|passive
-  on:paste
-  {...$$restProps}
+  {...rest}
 >
   <div bind:this={menuItemsRef} class="menu-items">
-    <slot {variant} />
+    {#if children}
+      {@render children()}
+    {/if}
   </div>
 </div>

package/dist/Menu.svelte.d.ts

@@ -1,63 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        focusFirstMenuItem?: (() => boolean) | undefined;
-        focusPreviousMenuItem?: (() => boolean) | undefined;
-        focusNextMenuItem?: (() => boolean) | undefined;
-        focusLastMenuItem?: (() => boolean) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        scroll: Event;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type MenuProps = typeof __propDef.props;
-export type MenuEvents = typeof __propDef.events;
-export type MenuSlots = typeof __propDef.slots;
-export default class Menu extends SvelteComponent<MenuProps, MenuEvents, MenuSlots> {
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get focusFirstMenuItem(): () => boolean;
-    get focusPreviousMenuItem(): () => boolean;
-    get focusNextMenuItem(): () => boolean;
-    get focusLastMenuItem(): () => boolean;
-}
-export {};
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement>;
+declare const Menu: import("svelte").Component<Props, {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    focusFirstMenuItem: () => boolean;
+    focusPreviousMenuItem: () => boolean;
+    focusNextMenuItem: () => boolean;
+    focusLastMenuItem: () => boolean;
+}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/MenuBar.svelte

@@ -1,53 +1,35 @@
-<script>import { createEventDispatcher, setContext } from 'svelte';
-import { writable } from 'svelte/store';
+<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';
-// ----- Props ----- //
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-const openValues = writable([]);
+let { class: _class, children, onClose, onOpen, onSelect, ...rest } = $props();
 const rootValue = idGenerator.nextId('MenuBar');
+let openValues = $state([]);
+let prevOpenValue = $state();
 let menuBarRef;
-let prevOpenValue = undefined;
-// Remember the last open value
-$: {
-    if ($openValues.length > 0) {
-        prevOpenValue = $openValues[0];
-    }
-}
+$effect(() => {
+    prevOpenValue = openValues[0];
+});
 // Restore focus to the last open menu bar item when it closes
-$: {
-    if ($openValues.length === 0 && prevOpenValue !== undefined) {
+$effect(() => {
+    if (openValues.length === 0 && prevOpenValue !== undefined) {
         const candidate = menuBarRef.querySelector(`[data-value="${prevOpenValue}"]`);
         candidate?.focus();
         prevOpenValue = undefined;
     }
-}
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseClose = (value) => {
-    dispatch('close', { value });
-};
-const raiseOpen = (value) => {
-    dispatch('open', { value });
-};
-const raiseSelect = (value) => {
-    dispatch('select', { value });
-};
-// ----- Methods ----- //
+});
 export const blur = () => {
     menuBarRef?.blur();
 };
 export const focus = (options) => {
     menuBarRef?.focus(options);
 };
-// ----- Open/Close ----- //
 const getOpenMenuBarItem = () => {
-    const value = $openValues[0];
+    const value = openValues[0];
     if (value) {
         return menuBarRef.querySelector(`[data-value="${value}"]`);
     }
@@ -86,12 +68,10 @@ const openNextMenuBarItem = () => {
     return !!candidate;
 };
 const closeAllMenus = () => {
-    openValues.set([]);
+    openValues = [];
 };
-// ----- Event Handlers ----- //
 const onClickOutside = (event) => {
-    const { detail: { mouseEvent } } = event;
-    let element = mouseEvent.target;
+    let element = event.target;
     while (element) {
         if (element.getAttribute('data-root-value') === rootValue) {
             return;
@@ -100,56 +80,34 @@ const onClickOutside = (event) => {
     }
     closeAllMenus?.();
 };
-// ----- Set Context ----- //
-setContext(MENU_BAR_CONTEXT_KEY, {
-    openPreviousMenuBarItem,
-    openNextMenuBarItem
-});
-setContext(MENU_ITEM_CONTEXT_KEY, {
+let menuBarContext = { openPreviousMenuBarItem, openNextMenuBarItem };
+setContext(MENU_BAR_CONTEXT_KEY, menuBarContext);
+let menuItemContext = {
     isMenuBarItem: true,
-    openValues,
+    depth: 0,
+    get openValues() {
+        return openValues;
+    },
+    set openValues(value) {
+        openValues = value;
+    },
     rootValue,
-    onClose: raiseClose,
-    onOpen: raiseOpen,
-    onSelect: raiseSelect
-});
+    onClose,
+    onOpen,
+    onSelect
+};
+setContext(MENU_ITEM_CONTEXT_KEY, menuItemContext);
 </script>
 
 <div
   bind:this={menuBarRef}
-  class={`sterling-menu-bar ${variant}`}
+  class={['sterling-menu-bar', _class].filter(Boolean).join(' ')}
   role="menubar"
   tabindex="-1"
-  on:blur
-  on:click
-  on:copy
-  on:cut
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:scroll
-  on:wheel|passive
-  on:paste
-  {...$$restProps}
-  use:clickOutside
-  on:click_outside={onClickOutside}
+  {...rest}
+  use:clickOutside={{ onclickoutside: onClickOutside }}
 >
-  <slot {variant} />
+  {#if children}
+    {@render children()}
+  {/if}
 </div>