@geoffcox/sterling-svelte 2.0.1 → 2.0.2

package/dist/Menu.svelte

@@ -1,83 +0,0 @@
-<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';
-let { children, class: _class, ...rest } = $props();
-let menuRef;
-let menuItemsRef;
-const noSlide = (node, params) => {
-    return { delay: 0, duration: 0 };
-};
-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);
-};
-export const blur = () => {
-    menuRef?.blur();
-};
-export const focusFirstMenuItem = () => {
-    let candidate = menuItemsRef?.firstElementChild;
-    while (candidate && !isElementEnabledMenuItem(candidate)) {
-        candidate = candidate.nextElementSibling;
-    }
-    candidate?.focus({ preventScroll: true });
-    return !!candidate;
-};
-export const focusPreviousMenuItem = () => {
-    let candidate = document.activeElement;
-    if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
-        candidate = menuItemsRef?.previousElementSibling;
-        while (candidate && !isElementEnabledMenuItem(candidate)) {
-            candidate = candidate.previousElementSibling;
-        }
-        candidate?.focus();
-    }
-    return !!candidate;
-};
-export const focusNextMenuItem = () => {
-    let candidate = document.activeElement;
-    if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
-        candidate = menuItemsRef?.nextElementSibling;
-        while (candidate && !isElementEnabledMenuItem(candidate)) {
-            candidate = candidate.nextElementSibling;
-        }
-        candidate?.focus();
-    }
-    return !!candidate;
-};
-export const focusLastMenuItem = () => {
-    let candidate = menuItemsRef?.lastElementChild;
-    while (candidate && !isElementEnabledMenuItem(candidate)) {
-        candidate = candidate.previousElementSibling;
-    }
-    candidate?.focus({ preventScroll: true });
-    return !!candidate;
-};
-//#endregion
-</script>
-
-<div
-  bind:this={menuRef}
-  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 }}
-  {...rest}
->
-  <div bind:this={menuItemsRef} class="menu-items">
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
-</div>

package/dist/Menu.svelte.d.ts

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

@@ -1 +0,0 @@
-export declare const MENU_BAR_CONTEXT_KEY = "sterlingMenuBar";

package/dist/MenuBar.constants.js

@@ -1 +0,0 @@
-export const MENU_BAR_CONTEXT_KEY = 'sterlingMenuBar';

package/dist/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/dist/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/dist/MenuBar.types.d.ts

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

package/dist/MenuBar.types.js

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

package/dist/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/dist/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/dist/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/dist/MenuItem.constants.js

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