@geoffcox/sterling-svelte 2.0.0 → 2.0.2

package/MenuBar.svelte

@@ -1,113 +0,0 @@
-<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(() => {
-    prevOpenValue = openValues[0];
-});
-// 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;
-    }
-});
-export const blur = () => {
-    menuBarRef?.blur();
-};
-export const focus = (options) => {
-    menuBarRef?.focus(options);
-};
-const getOpenMenuBarItem = () => {
-    const value = openValues[0];
-    if (value) {
-        return menuBarRef.querySelector(`[data-value="${value}"]`);
-    }
-    return null;
-};
-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;
-        }
-    }
-    if (!candidate) {
-        candidate = menuBarRef.lastElementChild;
-        candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
-    }
-    candidate?.click();
-    return !!candidate;
-};
-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;
-        }
-    }
-    if (!candidate) {
-        candidate = menuBarRef.firstElementChild;
-        candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
-    }
-    candidate?.click();
-    return !!candidate;
-};
-const closeAllMenus = () => {
-    openValues = [];
-};
-const onClickOutside = (event) => {
-    let element = event.target;
-    while (element) {
-        if (element.getAttribute('data-root-value') === rootValue) {
-            return;
-        }
-        element = element.parentElement;
-    }
-    closeAllMenus?.();
-};
-let menuBarContext = { openPreviousMenuBarItem, openNextMenuBarItem };
-setContext(MENU_BAR_CONTEXT_KEY, menuBarContext);
-let menuItemContext = {
-    isMenuBarItem: true,
-    depth: 0,
-    get openValues() {
-        return openValues;
-    },
-    set openValues(value) {
-        openValues = value;
-    },
-    rootValue,
-    onClose,
-    onOpen,
-    onSelect
-};
-setContext(MENU_ITEM_CONTEXT_KEY, menuItemContext);
-</script>
-
-<div
-  bind:this={menuBarRef}
-  class={['sterling-menu-bar', _class].filter(Boolean).join(' ')}
-  role="menubar"
-  tabindex="-1"
-  {...rest}
-  use:clickOutside={{ onclickoutside: onClickOutside }}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</div>

package/MenuBar.svelte.d.ts

@@ -1,13 +0,0 @@
-/// <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/MenuBar.types.d.ts

@@ -1,4 +0,0 @@
-export type MenuBarContext = {
-    openPreviousMenuBarItem?: () => void;
-    openNextMenuBarItem?: () => void;
-};

package/MenuBar.types.js

@@ -1 +0,0 @@
-export {};

package/MenuButton.svelte

@@ -1,116 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-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/MenuItem.constants.d.ts

@@ -1,2 +0,0 @@
-export declare const MENU_ITEM_CONTEXT_KEY = "sterlingMenuItem";
-export declare const MENU_ITEM_ROLES: readonly ["menuitem", "menuitemcheckbox", "menuitemradio"];

package/MenuItem.constants.js

@@ -1,2 +0,0 @@
-export const MENU_ITEM_CONTEXT_KEY = 'sterlingMenuItem';
-export const MENU_ITEM_ROLES = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];

package/MenuItem.svelte

@@ -1,342 +0,0 @@
-<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 Popover from './Popover.svelte';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-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');
-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();
-};
-export const click = () => {
-    menuItemRef?.click();
-};
-export const focus = (options) => {
-    menuItemRef?.focus(options);
-};
-//#endregion
-//#region events
-const raiseClose = (value) => {
-    onClose?.(value);
-    menuItemContext.onClose?.(value);
-};
-const raiseOpen = (value) => {
-    onOpen?.(value);
-    menuItemContext.onOpen?.(value);
-};
-const raiseSelect = (value) => {
-    onSelect?.(value);
-    menuItemContext.onSelect?.(value);
-};
-$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)) {
-        candidate = candidate.previousElementSibling || menuItemRef?.parentElement?.lastElementChild;
-        if (candidate === menuItemRef) {
-            return false;
-        }
-    }
-    candidate?.focus();
-    return !!candidate;
-};
-const focusNextMenuItem = () => {
-    let candidate = menuItemRef?.nextElementSibling || menuItemRef?.parentElement?.firstElementChild;
-    while (candidate && !isElementEnabledMenuItem(candidate)) {
-        candidate = candidate.nextElementSibling || menuItemRef?.parentElement?.firstElementChild;
-        if (candidate === menuItemRef) {
-            return false;
-        }
-    }
-    candidate?.focus();
-    return !!candidate;
-};
-//#endregion
-//#region open/close
-// opens the menu for this menu item
-const openMenu = () => {
-    if (!menuItemContext.openValues.includes(value)) {
-        // slice to depth to close any sibling menus that are open
-        menuItemContext.openValues = [
-            ...menuItemContext.openValues.slice(0, menuItemContext.depth),
-            value
-        ];
-    }
-};
-// closes the menu for this menu item
-const closeMenu = async () => {
-    const index = menuItemContext.openValues.indexOf(value);
-    if (index !== -1) {
-        menuItemContext.openValues = [...menuItemContext.openValues.slice(0, index)];
-        await tick();
-        menuItemRef?.focus();
-    }
-};
-const closeAllMenus = () => {
-    menuItemContext.openValues = [];
-};
-//#endregion
-//#region event handlers
-const onKeyDown = async (event) => {
-    if (!disabled && !event.altKey && !event.ctrlKey && !event.shiftKey) {
-        switch (event.key) {
-            case 'ArrowDown':
-                // 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 (menuItemContext.isMenuBarItem && children) {
-                    openMenu();
-                    setTimeout(async () => {
-                        await tick();
-                        menuRef?.focusFirstMenuItem();
-                    }, 10);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                if (!menuItemContext.isMenuBarItem) {
-                    // ARIA menuitem:
-                    // Moves focus to the next item, optionally wrapping from the last to the first.
-                    focusNextMenuItem();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-            case 'ArrowLeft':
-                // ARIA menubar/menuitem:
-                // Moves focus to the previous item, optionally wrapping from the first to the last.
-                if (menuItemContext.isMenuBarItem) {
-                    focusPreviousMenuItem();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                // 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 (menuItemContext.depth && menuItemContext.depth > 1) {
-                    menuItemContext.closeContainingMenu?.();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                // ARIA menubar/menuitem:
-                // When focus is in a submenu of an item in a menubar,
-                // closes the submenu,
-                // moves focus to the previous item in the menubar,
-                // and,
-                // 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.
-                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 (menuItemContext.isMenuBarItem) {
-                    focusNextMenuItem();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                // 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 (children) {
-                    openMenu();
-                    setTimeout(async () => {
-                        await tick();
-                        menuRef?.focusFirstMenuItem();
-                    }, 10);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                // ARIA menubar/menuitem:
-                // When focus is in a menu and on an item that does not have a submenu,
-                // closes the submenu and any parent menus,
-                // moves focus to the next item in the menubar,
-                // and,
-                // 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 (menuBarContext.openNextMenuBarItem) {
-                    menuBarContext.openNextMenuBarItem();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-            case 'ArrowUp':
-                // 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 (menuItemContext.isMenuBarItem && children) {
-                    openMenu();
-                    setTimeout(async () => {
-                        await tick();
-                        menuRef?.focusLastMenuItem();
-                    }, 10);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                // ARIA menuitem:
-                // Moves focus to the previous item, optionally wrapping from the first to the last.
-                if (!menuItemContext.isMenuBarItem) {
-                    focusPreviousMenuItem();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return false;
-                }
-                break;
-            case 'Escape':
-                // 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;
-                closeAllMenus();
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-        }
-    }
-    rest.onkeydown?.(event);
-};
-const onMouseEnter = (event) => {
-    menuItemRef?.focus();
-    rest.onmouseenter?.(event);
-};
-const onClick = (event) => {
-    if (!disabled) {
-        if (children) {
-            if (!menuItemContext.openValues.includes(value)) {
-                openMenu();
-                if ($usingKeyboard) {
-                    setTimeout(async () => {
-                        await tick();
-                        menuRef?.focusFirstMenuItem();
-                    }, 10);
-                }
-            }
-            else {
-                closeMenu();
-            }
-            event.preventDefault();
-            event.stopPropagation();
-            return false;
-        }
-        else {
-            raiseSelect(value);
-            closeAllMenus();
-            event.preventDefault();
-            event.stopPropagation();
-            return false;
-        }
-    }
-    rest.onclick?.(event);
-};
-//#endregion
-//#region set context
-let menuItemChildContext = {
-    isMenuBarItem: false,
-    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={!!children}
-  aria-owns={menuId}
-  class={['sterling-menu-item', _class].filter(Boolean).join(' ')}
-  class:using-keyboard={usingKeyboard}
-  data-value={value}
-  data-root-value={menuItemContext.rootValue}
-  {disabled}
-  {role}
-  tabindex={0}
-  type="button"
-  {...rest}
-  onclick={onClick}
-  onkeydown={onKeyDown}
-  onmouseenter={onMouseEnter}
->
-  <div class="item" id={displayId}>
-    {#if item}
-      {@render item()}
-    {:else}
-      {@render renderDefaultItem()}
-    {/if}
-  </div>
-  {#if menuItemRef && open && children}
-    <Popover
-      reference={menuItemRef}
-      placement={menuItemContext.isMenuBarItem ? 'bottom-start' : 'right-start'}
-      {open}
-    >
-      <Menu bind:this={menuRef} id={menuId} class={menuClass}>
-        {@render children()}
-      </Menu>
-    </Popover>
-  {/if}
-</button>

package/MenuItem.svelte.d.ts

@@ -1,22 +0,0 @@
-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/MenuItem.types.d.ts

@@ -1,20 +0,0 @@
-import type { MENU_ITEM_ROLES } from './MenuItem.constants';
-type MenuItemRoleTuple = typeof MENU_ITEM_ROLES;
-export type MenuItemRole = MenuItemRoleTuple[number];
-export type MenuItemRegistration = {
-    value: string;
-    open: () => void;
-    close: () => void;
-    focus: () => void;
-};
-export type MenuItemContext = {
-    isMenuBarItem?: boolean;
-    openValues: string[];
-    rootValue?: string;
-    depth?: number;
-    closeContainingMenu?: () => void;
-    onOpen?: (value: string) => void;
-    onClose?: (value: string) => void;
-    onSelect?: (value: string) => void;
-};
-export {};

package/MenuItem.types.js

@@ -1 +0,0 @@
-export {};

package/MenuItem.utils.d.ts

@@ -1,7 +0,0 @@
-import type { MenuItemRegistration } from './MenuItem.types';
-export declare const focusPreviousChild: (children: MenuItemRegistration[], currentValue: string) => void;
-export declare const focusNextChild: (children: MenuItemRegistration[], currentValue: string) => void;
-export declare const focusFirstChild: (children: MenuItemRegistration[]) => void;
-export declare const focusLastChild: (children: MenuItemRegistration[]) => void;
-export declare const isElementMenuItem: (candidate: Element | null | undefined) => boolean;
-export declare const isElementEnabledMenuItem: (candidate: Element | null | undefined) => boolean;