@geoffcox/sterling-svelte 1.0.11 → 2.0.0

package/MenuBar.svelte.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    onClose?: (value: string) => void;
+    onOpen?: (value: string) => void;
+    onSelect?: (value: string) => void;
+};
+declare const MenuBar: import("svelte").Component<Props, {
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type MenuBar = ReturnType<typeof MenuBar>;
+export default MenuBar;

package/MenuButton.svelte

@@ -0,0 +1,116 @@
+<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 = () => {
+    buttonRef?.click();
+};
+export const blur = () => {
+    buttonRef?.blur();
+};
+export const focus = (options) => {
+    buttonRef?.focus(options);
+};
+// update open based on openValues
+$effect(() => {
+    open = openValues.length > 0;
+});
+// update openValues based on open
+$effect(() => {
+    if (open) {
+        openValues = openValues.length > 0 ? openValues : ['menu-button'];
+    }
+    else {
+        openValues = openValues.length === 0 ? openValues : [];
+    }
+});
+// focus when closing
+$effect(() => {
+    if (!open && open !== prevOpen) {
+        focus();
+    }
+    prevOpen = open;
+});
+const onClick = async () => {
+    if (!open) {
+        openValues = ['menu-button'];
+        open = true;
+        await tick();
+        menuRef?.focusFirstMenuItem();
+    }
+    else {
+        open = false;
+        openValues = [];
+    }
+};
+const closeAllMenus = () => {
+    openValues = [];
+    open = false;
+};
+const onClickOutside = (event) => {
+    let element = event.target;
+    while (element) {
+        if (element.getAttribute('data-root-value') === value) {
+            return;
+        }
+        element = element.parentElement;
+    }
+    closeAllMenus?.();
+};
+// ----- Context ----- //
+setContext(MENU_ITEM_CONTEXT_KEY, {
+    depth: 1,
+    get openValues() {
+        return openValues;
+    },
+    set openValues(value) {
+        openValues = value;
+    },
+    rootValue: value,
+    closeContainingMenu: () => {
+        open = false;
+    },
+    onOpen,
+    onClose,
+    onSelect
+});
+</script>
+
+<Button
+  bind:this={buttonRef}
+  aria-controls={menuId}
+  aria-expanded={!!open}
+  aria-haspopup={!!children}
+  aria-owns={menuId}
+  class={['sterling-menu-button', _class].filter(Boolean).join(' ')}
+  data-value={value}
+  data-root-value={value}
+  {...rest}
+  onclick={onClick}
+>
+  <div
+    class="reference"
+    bind:this={reference}
+    use:clickOutside={{ onclickoutside: onClickOutside }}
+  >
+    {@render children?.()}
+  </div>
+  <Popover {reference} {open} placement={popoverPlacement}>
+    <Menu bind:this={menuRef} id={menuId} class={menuClass}>
+      {@render items?.()}
+    </Menu>
+  </Popover>
+</Button>

package/MenuButton.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type Snippet } from 'svelte';
+import type { PopoverPlacement } from './Popover.types';
+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;
+};
+declare const MenuButton: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "open">;
+type MenuButton = ReturnType<typeof MenuButton>;
+export default MenuButton;

package/{dist/MenuItem.svelte → MenuItem.svelte}

@@ -1,46 +1,24 @@
-<script>import { getContext, afterUpdate, createEventDispatcher, onMount, setContext, tick } from 'svelte';
-import { writable } from 'svelte/store';
+<svelte:options runes={true} />
+
+<script lang="ts">import { getContext, setContext, tick } from 'svelte';
 import { idGenerator } from './idGenerator';
 import Menu from './Menu.svelte';
 import { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
 import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
 import { isElementEnabledMenuItem } from './MenuItem.utils';
-import MenuItemDisplay from './MenuItemDisplay.svelte';
 import Popover from './Popover.svelte';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-/**
- * When true, the menu item is checked.
- * Use with role='menuitemcheckbox' or role='menuitemradio'.
- */
-export let checked = false;
-/** When true, the menu item is disabled. */
-export let disabled = false;
-/** The role of the menu item. */
-export let role = 'menuitem';
-/** The text of the menu item. Not used when the item slot is filled.*/
-export let text = undefined;
-/** The value uniquely identifying this menu item within the menu hierarchy. */
-export let value;
-/** Additional class names to apply. */
-export let variant = '';
-/** Additional class names to apply to the sub Menu*/
-export let menuVariant = '';
-// ----- Get Context ----- //
-const { isMenuBarItem, openValues = writable([]), rootValue = value, depth = 0, closeContainingMenu = undefined, onOpen = undefined, onClose = undefined, onSelect = undefined } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
-const { openPreviousMenuBarItem = undefined, openNextMenuBarItem = undefined } = getContext(MENU_BAR_CONTEXT_KEY) || {};
-// ----- State ----- //
+let { checked, children, class: _class, disabled, item, menuClass, onClose, onOpen, onSelect, role = 'menuitem', text, shortcut, value, ...rest } = $props();
+const menuItemContext = getContext(MENU_ITEM_CONTEXT_KEY) || {};
+const menuBarContext = getContext(MENU_BAR_CONTEXT_KEY) || {};
 const instanceId = idGenerator.nextId('MenuItem');
-$: displayId = `${value}-display-${instanceId}`;
-$: open = $openValues.includes(value);
-$: menuId = `${value}-menu-${instanceId}`;
-let menuItemRef;
-let menuRef;
-const children = writable([]);
-let mounted = false;
-let prevOpen = open;
-$: hasChildren = $$slots.default;
-// ----- Methods ----- //
+let displayId = $derived(`${value}-display-${instanceId}`);
+let open = $derived(menuItemContext.openValues?.includes(value));
+let prevOpen = $state(menuItemContext.openValues?.includes(value));
+let menuId = $derived(`${value}-menu-${instanceId}`);
+let menuItemRef = $state();
+let menuRef = $state();
+//#region methods
 export const blur = () => {
     menuItemRef?.blur();
 };
@@ -50,30 +28,28 @@ export const click = () => {
 export const focus = (options) => {
     menuItemRef?.focus(options);
 };
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
+//#endregion
+//#region events
 const raiseClose = (value) => {
-    dispatch('close', { value });
     onClose?.(value);
+    menuItemContext.onClose?.(value);
 };
 const raiseOpen = (value) => {
-    dispatch('open', { value });
     onOpen?.(value);
+    menuItemContext.onOpen?.(value);
 };
-$: {
-    if (hasChildren && open !== prevOpen) {
-        open ? raiseOpen(value) : raiseClose(value);
-    }
-    prevOpen = open;
-}
-// dispatches the event and bubbles it up the context
-// so that container components can subscribe to select
-// events for children.
 const raiseSelect = (value) => {
-    dispatch('select', { value });
     onSelect?.(value);
+    menuItemContext.onSelect?.(value);
 };
-// ----- Focus ----- //
+$effect(() => {
+    if (open !== prevOpen) {
+        open ? raiseOpen(value) : raiseClose(value);
+    }
+    prevOpen = open;
+});
+//#endregion
+//#region focus
 const focusPreviousMenuItem = () => {
     let candidate = menuItemRef?.previousElementSibling || menuItemRef?.parentElement?.lastElementChild;
     while (candidate && !isElementEnabledMenuItem(candidate)) {
@@ -96,33 +72,32 @@ const focusNextMenuItem = () => {
     candidate?.focus();
     return !!candidate;
 };
-// ----- Open/Close ----- //
+//#endregion
+//#region open/close
 // opens the menu for this menu item
 const openMenu = () => {
-    if (!$openValues.includes(value)) {
+    if (!menuItemContext.openValues.includes(value)) {
         // slice to depth to close any sibling menus that are open
-        openValues.set([...$openValues.slice(0, depth), value]);
+        menuItemContext.openValues = [
+            ...menuItemContext.openValues.slice(0, menuItemContext.depth),
+            value
+        ];
     }
 };
 // closes the menu for this menu item
 const closeMenu = async () => {
-    const index = $openValues.indexOf(value);
+    const index = menuItemContext.openValues.indexOf(value);
     if (index !== -1) {
-        openValues.set([...$openValues.slice(0, index)]);
+        menuItemContext.openValues = [...menuItemContext.openValues.slice(0, index)];
         await tick();
         menuItemRef?.focus();
     }
 };
 const closeAllMenus = () => {
-    openValues.set([]);
+    menuItemContext.openValues = [];
 };
-// ----- Event Handlers ----- //
-onMount(() => {
-    mounted = true;
-});
-afterUpdate(() => {
-    prevOpen = open;
-});
+//#endregion
+//#region event handlers
 const onKeyDown = async (event) => {
     if (!disabled && !event.altKey && !event.ctrlKey && !event.shiftKey) {
         switch (event.key) {
@@ -130,7 +105,7 @@ const onKeyDown = async (event) => {
                 // ARIA menubar/menuitem:
                 // If the currently focused menuitem has a submenu,
                 // opens the submenu and places focus on the first item in the submenu.
-                if (isMenuBarItem && hasChildren) {
+                if (menuItemContext.isMenuBarItem && children) {
                     openMenu();
                     setTimeout(async () => {
                         await tick();
@@ -140,7 +115,7 @@ const onKeyDown = async (event) => {
                     event.stopPropagation();
                     return false;
                 }
-                if (!isMenuBarItem) {
+                if (!menuItemContext.isMenuBarItem) {
                     // ARIA menuitem:
                     // Moves focus to the next item, optionally wrapping from the last to the first.
                     focusNextMenuItem();
@@ -152,7 +127,7 @@ const onKeyDown = async (event) => {
             case 'ArrowLeft':
                 // ARIA menubar/menuitem:
                 // Moves focus to the previous item, optionally wrapping from the first to the last.
-                if (isMenuBarItem) {
+                if (menuItemContext.isMenuBarItem) {
                     focusPreviousMenuItem();
                     event.preventDefault();
                     event.stopPropagation();
@@ -161,8 +136,8 @@ const onKeyDown = async (event) => {
                 // ARIA menuitem:
                 // When focus is in a submenu of an item in a menu,
                 // closes the submenu and returns focus to the parent menuitem.
-                if (depth > 1) {
-                    closeContainingMenu?.();
+                if (menuItemContext.depth && menuItemContext.depth > 1) {
+                    menuItemContext.closeContainingMenu?.();
                     event.preventDefault();
                     event.stopPropagation();
                     return false;
@@ -175,14 +150,14 @@ const onKeyDown = async (event) => {
                 // if focus is now on a menuitem with a submenu,
                 // either opens the submenu of that menuitem without moving focus into the submenu,
                 // or opens the submenu of that menuitem and places focus on the first item in the submenu.
-                openPreviousMenuBarItem?.();
+                menuBarContext.openPreviousMenuBarItem?.();
                 event.preventDefault();
                 event.stopPropagation();
                 return false;
             case 'ArrowRight':
                 // ARIA menubar:
                 // Moves focus to the next item, optionally wrapping from the last to the first.
-                if (isMenuBarItem) {
+                if (menuItemContext.isMenuBarItem) {
                     focusNextMenuItem();
                     event.preventDefault();
                     event.stopPropagation();
@@ -191,7 +166,7 @@ const onKeyDown = async (event) => {
                 // ARIA menuitem:
                 // When focus is in a menu and on a menuitem that has a submenu,
                 // opens the submenu and places focus on its first item
-                if (hasChildren) {
+                if (children) {
                     openMenu();
                     setTimeout(async () => {
                         await tick();
@@ -209,8 +184,8 @@ const onKeyDown = async (event) => {
                 // if focus is now on a menuitem with a submenu,
                 // either opens the submenu of that menuitem without moving focus into the submenu,
                 // or opens the submenu of that menuitem and places focus on the first item in the submenu.
-                if (openNextMenuBarItem) {
-                    openNextMenuBarItem();
+                if (menuBarContext.openNextMenuBarItem) {
+                    menuBarContext.openNextMenuBarItem();
                     event.preventDefault();
                     event.stopPropagation();
                     return false;
@@ -220,7 +195,7 @@ const onKeyDown = async (event) => {
                 // ARIA menubar/menuitem:
                 // If the currently focused menuitem has a submenu,
                 // opens the submenu and places focus on the last item in the submenu.
-                if (isMenuBarItem && hasChildren) {
+                if (menuItemContext.isMenuBarItem && children) {
                     openMenu();
                     setTimeout(async () => {
                         await tick();
@@ -232,7 +207,7 @@ const onKeyDown = async (event) => {
                 }
                 // ARIA menuitem:
                 // Moves focus to the previous item, optionally wrapping from the first to the last.
-                if (!isMenuBarItem) {
+                if (!menuItemContext.isMenuBarItem) {
                     focusPreviousMenuItem();
                     event.preventDefault();
                     event.stopPropagation();
@@ -243,21 +218,23 @@ const onKeyDown = async (event) => {
                 // ARIA menuitem:
                 // Close the menu that contains focus and return focus to the element or context,
                 // e.g., menu button or parent menuitem, from which the menu was opened.
-                open = false;
+                // open = false;
                 closeAllMenus();
                 event.preventDefault();
                 event.stopPropagation();
                 return false;
         }
     }
+    rest.onkeydown?.(event);
 };
 const onMouseEnter = (event) => {
     menuItemRef?.focus();
+    rest.onmouseenter?.(event);
 };
 const onClick = (event) => {
     if (!disabled) {
-        if (hasChildren) {
-            if (!$openValues.includes(value)) {
+        if (children) {
+            if (!menuItemContext.openValues.includes(value)) {
                 openMenu();
                 if ($usingKeyboard) {
                     setTimeout(async () => {
@@ -281,105 +258,84 @@ const onClick = (event) => {
             return false;
         }
     }
+    rest.onclick?.(event);
 };
-// ----- Set Context ----- //
-setContext(MENU_ITEM_CONTEXT_KEY, {
+//#endregion
+//#region set context
+let menuItemChildContext = {
     isMenuBarItem: false,
-    openValues,
-    rootValue,
-    depth: depth + 1,
-    closeContainingMenu: () => {
-        closeMenu();
+    get openValues() {
+        return menuItemContext.openValues;
     },
+    set openValues(value) {
+        menuItemContext.openValues = value;
+    },
+    rootValue: menuItemContext.rootValue || value,
+    depth: menuItemContext.depth ? menuItemContext.depth + 1 : 1,
+    closeContainingMenu: closeMenu,
     onOpen: raiseOpen,
     onClose: raiseClose,
     onSelect: raiseSelect
-});
+};
+setContext(MENU_ITEM_CONTEXT_KEY, menuItemChildContext);
+//#endregion
 </script>
 
+{#snippet renderDefaultItem()}
+  <div class="sterling-menu-item-display" class:disabled>
+    <div
+      class="check"
+      class:checkmark={role === 'menuitemcheckbox'}
+      class:bullet={role === 'menuitemradio'}
+      class:checked
+    ></div>
+    <div class="content">
+      {text}
+    </div>
+    {#if shortcut}
+      <div class="shortcut">
+        {shortcut}
+      </div>
+    {/if}
+    <div class="chevron" class:has-children={!menuItemContext.isMenuBarItem && !!children}></div>
+  </div>
+{/snippet}
+
 <button
+  bind:this={menuItemRef}
   aria-controls={menuId}
   aria-disabled={disabled}
   aria-expanded={open}
-  aria-haspopup={hasChildren}
+  aria-haspopup={!!children}
   aria-owns={menuId}
-  bind:this={menuItemRef}
-  class={`sterling-menu-item ${variant}`}
+  class={['sterling-menu-item', _class].filter(Boolean).join(' ')}
   class:using-keyboard={usingKeyboard}
   data-value={value}
-  data-root-value={rootValue}
+  data-root-value={menuItemContext.rootValue}
   {disabled}
   {role}
   tabindex={0}
   type="button"
-  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
-  on:click={onClick}
-  on:keydown={onKeyDown}
-  on:mouseenter={onMouseEnter}
-  {...$$restProps}
+  {...rest}
+  onclick={onClick}
+  onkeydown={onKeyDown}
+  onmouseenter={onMouseEnter}
 >
   <div class="item" id={displayId}>
-    <slot
-      name="item"
-      {checked}
-      {depth}
-      {disabled}
-      {hasChildren}
-      {isMenuBarItem}
-      {open}
-      {role}
-      {text}
-      {value}
-      {variant}
-    >
-      <MenuItemDisplay
-        {checked}
-        {disabled}
-        {hasChildren}
-        {isMenuBarItem}
-        menuItemRole={role}
-        {variant}>{text}</MenuItemDisplay
-      >
-    </slot>
+    {#if item}
+      {@render item()}
+    {:else}
+      {@render renderDefaultItem()}
+    {/if}
   </div>
-  {#if menuItemRef && open && hasChildren}
+  {#if menuItemRef && open && children}
     <Popover
       reference={menuItemRef}
-      placement={isMenuBarItem ? 'bottom-start' : 'right-start'}
+      placement={menuItemContext.isMenuBarItem ? 'bottom-start' : 'right-start'}
       {open}
     >
-      <Menu bind:this={menuRef} id={menuId} variant={menuVariant}>
-        <slot {depth} {disabled} />
+      <Menu bind:this={menuRef} id={menuId} class={menuClass}>
+        {@render children()}
       </Menu>
     </Popover>
   {/if}

package/MenuItem.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { MenuItemRole } from './MenuItem.types';
+import { type Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = HTMLButtonAttributes & {
+    checked?: boolean | null;
+    item?: Snippet;
+    menuClass?: string;
+    onClose?: (value: string) => void;
+    onOpen?: (value: string) => void;
+    onSelect?: (value: string) => void;
+    role?: MenuItemRole;
+    shortcut?: string;
+    text?: string;
+    value: string;
+};
+declare const MenuItem: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/{dist/MenuItem.types.d.ts → MenuItem.types.d.ts}

@@ -1,5 +1,3 @@
-/// <reference types="svelte" />
-import type { Writable } from 'svelte/store';
 import type { MENU_ITEM_ROLES } from './MenuItem.constants';
 type MenuItemRoleTuple = typeof MENU_ITEM_ROLES;
 export type MenuItemRole = MenuItemRoleTuple[number];
@@ -10,14 +8,8 @@ export type MenuItemRegistration = {
     focus: () => void;
 };
 export type MenuItemContext = {
-    /**
-     * If the menu item is a top-level item in a menu bar
-     */
     isMenuBarItem?: boolean;
-    /**
-     * The menu item values for the chain of open menus.
-     */
-    openValues: Writable<string[]>;
+    openValues: string[];
     rootValue?: string;
     depth?: number;
     closeContainingMenu?: () => void;

package/MenuSeparator.svelte

@@ -0,0 +1,11 @@
+<svelte:options runes={true} />
+
+<script lang="ts">let { class: _class, ...rest } = $props();
+export {};
+</script>
+
+<div
+  class={['sterling-menu-separator', _class].filter(Boolean).join(' ')}
+  role="separator"
+  {...rest}
+></div>

package/MenuSeparator.svelte.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement>;
+declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;