@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/MenuBar.svelte.d.ts

@@ -1,58 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | 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;
-        close: CustomEvent<any>;
-        open: CustomEvent<any>;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+/// <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;
 };
-export type MenuBarProps = typeof __propDef.props;
-export type MenuBarEvents = typeof __propDef.events;
-export type MenuBarSlots = typeof __propDef.slots;
-export default class MenuBar extends SvelteComponent<MenuBarProps, MenuBarEvents, MenuBarSlots> {
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+declare const MenuBar: import("svelte").Component<Props, {
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type MenuBar = ReturnType<typeof MenuBar>;
+export default MenuBar;

package/dist/MenuButton.svelte

@@ -1,41 +1,20 @@
-<script>import { createEventDispatcher, setContext, tick } from 'svelte';
-import { writable } from 'svelte/store';
+<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';
-// ----- Props ----- //
-export let open = false;
-export let menuVariant = '';
-export let popoverPlacement = 'bottom-start';
-export let value;
-export let variant = '';
-// ----- State ----- //
+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 reference;
+let openValues = $state([]);
 let menuRef;
-let prevOpen = open;
-$: menuId = `${value}-menu-${instanceId}`;
-$: hasChildren = $$slots.items;
-const openValues = writable([]);
-$: {
-    open = $openValues.length > 0;
-}
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseClose = (value) => {
-    dispatch('close', { value });
-};
-const raiseOpen = (value) => {
-    dispatch('open', { value });
-};
-const raiseSelect = (value) => {
-    dispatch('select', { value });
-};
-// ----- Methods ----- //
+let menuId = $derived(`${value}-menu-${instanceId}`);
+let prevOpen = $state(open);
+let reference = $state();
 export const click = () => {
     buttonRef?.click();
 };
@@ -45,30 +24,44 @@ export const blur = () => {
 export const focus = (options) => {
     buttonRef?.focus(options);
 };
-// ----- Event Handlers ----- //
+// 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.set(['menu-button']);
+        openValues = ['menu-button'];
+        open = true;
         await tick();
         menuRef?.focusFirstMenuItem();
     }
     else {
         open = false;
-        openValues.set([]);
+        openValues = [];
     }
 };
-$: {
-    if (!open && open !== prevOpen) {
-        focus();
-    }
-    prevOpen = open;
-}
 const closeAllMenus = () => {
-    openValues.set([]);
+    openValues = [];
+    open = false;
 };
 const onClickOutside = (event) => {
-    const { detail: { mouseEvent } } = event;
-    let element = mouseEvent.target;
+    let element = event.target;
     while (element) {
         if (element.getAttribute('data-root-value') === value) {
             return;
@@ -80,66 +73,44 @@ const onClickOutside = (event) => {
 // ----- Context ----- //
 setContext(MENU_ITEM_CONTEXT_KEY, {
     depth: 1,
-    openValues,
+    get openValues() {
+        return openValues;
+    },
+    set openValues(value) {
+        openValues = value;
+    },
     rootValue: value,
     closeContainingMenu: () => {
         open = false;
     },
-    onOpen: raiseOpen,
-    onClose: raiseClose,
-    onSelect: raiseSelect
+    onOpen,
+    onClose,
+    onSelect
 });
 </script>
 
 <Button
   bind:this={buttonRef}
   aria-controls={menuId}
-  aria-expanded={open}
-  aria-haspopup={hasChildren}
+  aria-expanded={!!open}
+  aria-haspopup={!!children}
   aria-owns={menuId}
+  class={['sterling-menu-button', _class].filter(Boolean).join(' ')}
   data-value={value}
   data-root-value={value}
-  variant={`sterling-menu-button ${variant}`}
-  on:blur
-  on:click
-  on:click={onClick}
-  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
-  {...$$restProps}
+  {...rest}
+  onclick={onClick}
 >
-  <div class="reference" bind:this={reference} use:clickOutside on:click_outside={onClickOutside}>
-    <slot {open} {value} {variant} />
+  <div
+    class="reference"
+    bind:this={reference}
+    use:clickOutside={{ onclickoutside: onClickOutside }}
+  >
+    {@render children?.()}
   </div>
   <Popover {reference} {open} placement={popoverPlacement}>
-    <Menu bind:this={menuRef} id={menuId} {reference} {open} variant={menuVariant}>
-      <slot name="items" />
+    <Menu bind:this={menuRef} id={menuId} class={menuClass}>
+      {@render items?.()}
     </Menu>
   </Popover>
 </Button>

package/dist/MenuButton.svelte.d.ts

@@ -1,71 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        open?: boolean | undefined;
-        menuVariant?: string | undefined;
-        popoverPlacement?: string | 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;
-        close: CustomEvent<any>;
-        open: CustomEvent<any>;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            open: boolean;
-            value: string;
-            variant: string;
-        };
-        items: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+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;
 };
-export type MenuButtonProps = typeof __propDef.props;
-export type MenuButtonEvents = typeof __propDef.events;
-export type MenuButtonSlots = typeof __propDef.slots;
-export default class MenuButton extends SvelteComponent<MenuButtonProps, MenuButtonEvents, MenuButtonSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+declare const MenuButton: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "open">;
+type MenuButton = ReturnType<typeof MenuButton>;
+export default MenuButton;