@geoffcox/sterling-svelte 2.0.1 → 2.0.2

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

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

package/dist/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;

package/dist/MenuItem.utils.js

@@ -1,36 +0,0 @@
-export const focusPreviousChild = (children, currentValue) => {
-    const index = children?.findIndex((menuItem) => menuItem.value === currentValue);
-    if (index !== -1) {
-        const focusIndex = index === 0 ? children.length - 1 : index - 1;
-        children[focusIndex].focus();
-    }
-};
-export const focusNextChild = (children, currentValue) => {
-    const index = children?.findIndex((menuItem) => menuItem.value === currentValue);
-    if (index !== -1) {
-        const focusIndex = (index + 1) % children.length;
-        children[focusIndex].focus();
-    }
-};
-export const focusFirstChild = (children) => {
-    children?.[0]?.focus();
-};
-export const focusLastChild = (children) => {
-    children?.[children.length - 1]?.focus();
-};
-export const isElementMenuItem = (candidate) => {
-    if (!candidate)
-        return false;
-    const dataValue = candidate?.getAttribute('data-value');
-    const role = candidate?.getAttribute('role');
-    return ((role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio') &&
-        dataValue !== null &&
-        dataValue !== undefined);
-};
-export const isElementEnabledMenuItem = (candidate) => {
-    if (!isElementMenuItem(candidate)) {
-        return false;
-    }
-    const disabled = candidate?.getAttribute('disabled');
-    return disabled === null || disabled === 'false';
-};

package/dist/MenuSeparator.svelte

@@ -1,11 +0,0 @@
-<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/dist/MenuSeparator.svelte.d.ts

@@ -1,6 +0,0 @@
-/// <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;

package/dist/Popover.constants.d.ts

@@ -1 +0,0 @@
-export declare const POPOVER_PLACEMENTS: string[];

package/dist/Popover.constants.js

@@ -1,14 +0,0 @@
-export const POPOVER_PLACEMENTS = [
-    'top-start',
-    'top',
-    'top-end',
-    'right-start',
-    'right',
-    'right-end',
-    'bottom-end',
-    'bottom',
-    'bottom-start',
-    'left-end',
-    'left',
-    'left-start'
-];

package/dist/Popover.svelte

@@ -1,121 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { getContext, onMount, tick } from 'svelte';
-import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
-import { portal } from './actions/portal';
-import { STERLING_PORTAL_HOST_ID, STERLING_PORTAL_CONTEXT_ID } from './Portal.constants';
-let { children, conditionalRender = $bindable(true), crossAxisOffset = $bindable(0), mainAxisOffset = $bindable(0), open = $bindable(false), placement = $bindable('top-start'), portalHost, reference, class: _class, ...rest } = $props();
-let popupRef = $state(undefined);
-let popupPosition = $state({ x: 0, y: 0 });
-let floatingUIPlacement = $derived(placement);
-let bodyHeight = $state(0);
-let resizeObserver = undefined;
-const { portalHost: contextPortalHost } = getContext(STERLING_PORTAL_CONTEXT_ID) || {
-    portalHost: undefined
-};
-// ----- Portal Host ----- //
-const ensurePortalHost = async () => {
-    await tick();
-    // use the host set from context, usually set from a Dialog
-    let host = $contextPortalHost;
-    // use or create the sterling portal host
-    if (!host && globalThis?.document) {
-        host = globalThis.document.querySelector(`#${STERLING_PORTAL_HOST_ID}`);
-        // fallback to creating the sterling portal host
-        if (!host) {
-            host = globalThis.document.createElement('div');
-            host.id = STERLING_PORTAL_HOST_ID;
-            host.style.overflow = 'visible';
-            globalThis.document.body.append(host);
-        }
-    }
-    portalHost = host;
-};
-// ----- Position ----- //
-let middleware = $derived([
-    offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
-    flip()
-]);
-const computePopoverPosition = async () => {
-    if (reference && popupRef) {
-        popupPosition = await computePosition(reference, popupRef, {
-            placement: floatingUIPlacement,
-            middleware
-        });
-    }
-    else {
-        popupPosition = { x: 0, y: 0 };
-    }
-};
-// whenever a positioned element is portaled it needs resubscription to auto-update
-let cleanupAutoUpdate = () => { };
-const autoUpdatePopoverPosition = () => {
-    cleanupAutoUpdate();
-    if (reference && popupRef) {
-        cleanupAutoUpdate = autoUpdate(reference, popupRef, computePopoverPosition);
-    }
-};
-$effect(() => {
-    autoUpdatePopoverPosition();
-    return () => {
-        cleanupAutoUpdate();
-        cleanupAutoUpdate = () => { };
-    };
-});
-$effect(() => {
-    bodyHeight;
-    computePopoverPosition();
-});
-// ----- EventHandlers ----- //
-$effect(() => {
-    ensurePortalHost();
-    resizeObserver = new ResizeObserver((entries) => {
-        bodyHeight = entries[0].target.clientHeight;
-    });
-    // start observing a DOM node
-    resizeObserver.observe(document.body);
-    return () => {
-        resizeObserver?.unobserve(document.body);
-        resizeObserver?.disconnect();
-        resizeObserver = undefined;
-    };
-});
-const onKeydown = (event) => {
-    if (event.key === 'Escape') {
-        open = false;
-    }
-    rest.onkeydown?.(event);
-};
-//TODO: Is this necessary?
-ensurePortalHost();
-</script>
-
-{#if open || !conditionalRender}
-  <div use:portal={{ target: portalHost }} class="sterling-popover-portal">
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      bind:this={popupRef}
-      class={['sterling-popover', _class].filter(Boolean).join(' ')}
-      class:open
-      class:top={popupPosition.placement === 'top'}
-      class:top-start={popupPosition.placement === 'top-start'}
-      class:top-end={popupPosition.placement === 'top-end'}
-      class:right={popupPosition.placement === 'right'}
-      class:right-start={popupPosition.placement === 'right-start'}
-      class:right-end={popupPosition.placement === 'right-end'}
-      class:bottom={popupPosition.placement === 'bottom'}
-      class:bottom-start={popupPosition.placement === 'bottom-start'}
-      class:bottom-end={popupPosition.placement === 'bottom-end'}
-      class:left={popupPosition.placement === 'left'}
-      class:left-start={popupPosition.placement === 'left-start'}
-      class:left-end={popupPosition.placement === 'left-end'}
-      {...rest}
-      onkeydown={onKeydown}
-      style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-    >
-      {#if children}
-        {@render children()}
-      {/if}
-    </div>
-  </div>
-{/if}

package/dist/Popover.svelte.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="svelte" />
-import type { PopoverPlacement } from './Popover.types';
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    conditionalRender?: boolean;
-    crossAxisOffset?: number;
-    mainAxisOffset?: number;
-    open?: boolean | null;
-    placement?: PopoverPlacement;
-    portalHost?: HTMLElement;
-    reference?: HTMLElement;
-};
-declare const Popover: import("svelte").Component<Props, {}, "conditionalRender" | "crossAxisOffset" | "mainAxisOffset" | "open" | "placement">;
-type Popover = ReturnType<typeof Popover>;
-export default Popover;

package/dist/Popover.types.d.ts

@@ -1,4 +0,0 @@
-import type { POPOVER_PLACEMENTS } from './Popover.constants';
-type PopoverPlacementTuple = typeof POPOVER_PLACEMENTS;
-export type PopoverPlacement = PopoverPlacementTuple[number];
-export {};

package/dist/Popover.types.js

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

package/dist/Portal.constants.d.ts

@@ -1,2 +0,0 @@
-export declare const STERLING_PORTAL_HOST_ID = "SterlingPortalHost";
-export declare const STERLING_PORTAL_CONTEXT_ID = "SterlingPortalContext";

package/dist/Portal.constants.js

@@ -1,2 +0,0 @@
-export const STERLING_PORTAL_HOST_ID = 'SterlingPortalHost';
-export const STERLING_PORTAL_CONTEXT_ID = 'SterlingPortalContext';

package/dist/Portal.types.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="svelte" />
-import type { Readable } from 'svelte/store';
-export type PortalContext = {
-    /** The portal host for usePortal */
-    portalHost: Readable<HTMLElement | undefined>;
-};

package/dist/Portal.types.js

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

package/dist/Progress.constants.d.ts

@@ -1 +0,0 @@
-export declare const PROGRESS_ORIENTATIONS: string[];

package/dist/Progress.constants.js

@@ -1 +0,0 @@
-export const PROGRESS_ORIENTATIONS = ['horizontal', 'vertical'];