@geoffcox/sterling-svelte 1.0.12 → 2.0.0

package/{dist/MenuBar.svelte → 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>

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;