@geoffcox/sterling-svelte 0.0.25 → 0.0.26

package/MenuItem.svelte

@@ -1,50 +1,60 @@
-<script>import { createKeyborg } from "keyborg";
-import { getContext, onMount, setContext } from "svelte";
+<script>import {
+  getContext,
+  afterUpdate,
+  createEventDispatcher,
+  onMount,
+  setContext,
+  tick
+} from "svelte";
 import { writable } from "svelte/store";
-import { clickOutside } from "./actions/clickOutside";
-import { afterUpdate, createEventDispatcher } from "svelte/internal";
-import MenuItemDisplay from "./MenuItemDisplay.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 Menu from "./Menu.svelte";
-import {
-  focusFirstChild,
-  focusLastChild,
-  focusNextChild,
-  focusPreviousChild
-} from "./MenuItem.utils";
-import { idGenerator } from "./idGenerator";
+import { isElementEnabledMenuItem } from "./MenuItem.utils";
+import MenuItemDisplay from "./MenuItemDisplay.svelte";
+import Popover from "./Popover.svelte";
+import { usingKeyboard } from "./stores/usingKeyboard";
 export let checked = false;
 export let composed = false;
 export let disabled = false;
-export let open = false;
 export let value;
 export let role = "menuitem";
 export let text = void 0;
 const {
+  isMenuBarItem,
+  openValues = writable([]),
   rootValue = value,
   depth = 0,
-  register = void 0,
-  unregister = void 0,
-  closeMenu = void 0,
-  focusPrevious = void 0,
-  focusNext = void 0,
+  closeContainingMenu = void 0,
   onOpen = void 0,
   onClose = void 0,
   onSelect = void 0
 } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
-const { openPreviousMenu = void 0, openNextMenu = void 0 } = getContext(MENU_BAR_CONTEXT_KEY) || {};
+const { openPreviousMenuBarItem = void 0, openNextMenuBarItem = void 0 } = getContext(MENU_BAR_CONTEXT_KEY) || {};
 const instanceId = idGenerator.nextId("MenuItem");
 $:
   displayId = `${value}-display-${instanceId}`;
+$:
+  open = $openValues.includes(value);
 $:
   menuId = `${value}-menu-${instanceId}`;
 let menuItemRef;
+let menuRef;
 const children = writable([]);
 let mounted = false;
 let prevOpen = open;
 $:
   hasChildren = $$slots.default;
+export const blur = () => {
+  menuItemRef?.blur();
+};
+export const click = () => {
+  menuItemRef?.click();
+};
+export const focus = (options) => {
+  menuItemRef?.focus(options);
+};
 const dispatch = createEventDispatcher();
 const raiseClose = (value2) => {
   dispatch("close", { value: value2 });
@@ -64,157 +74,176 @@ const raiseSelect = (value2) => {
   dispatch("select", { value: value2 });
   onSelect?.(value2);
 };
-let keyborg = createKeyborg(window);
-let usingKeyboard = keyborg.isNavigatingWithKeyboard();
-const keyborgHandler = (value2) => {
-  usingKeyboard = value2;
+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 autoFocusFirstChild = (open2, insideMenu) => {
-  if (open2 && insideMenu) {
-    setTimeout(() => focusFirstChild($children), 10);
+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;
 };
-$:
-  autoFocusFirstChild(open, depth > 0);
-export const click = () => {
-  menuItemRef?.click();
+const openMenu = () => {
+  if (!$openValues.includes(value)) {
+    openValues.set([...$openValues.slice(0, depth), value]);
+  }
 };
-export const blur = () => {
-  menuItemRef?.blur();
+const closeMenu = async () => {
+  const index = $openValues.indexOf(value);
+  if (index !== -1) {
+    openValues.set([...$openValues.slice(0, index)]);
+    await tick();
+    menuItemRef?.focus();
+  }
 };
-export const focus = (options) => {
-  menuItemRef?.focus(options);
+const closeAllMenus = () => {
+  openValues.set([]);
 };
 onMount(() => {
   mounted = true;
-  keyborg.subscribe(keyborgHandler);
-  const menuItemSelf = {
-    value,
-    open: () => {
-      open = true;
-    },
-    close: () => {
-      open = false;
-    },
-    focus: () => {
-      menuItemRef?.focus();
-    }
-  };
-  register?.(menuItemSelf);
-  return () => {
-    keyborg.unsubscribe(keyborgHandler);
-    unregister?.(menuItemSelf);
-  };
 });
 afterUpdate(() => {
   prevOpen = open;
 });
-const onKeyDown = (event) => {
+const onKeyDown = async (event) => {
   if (!disabled && !event.altKey && !event.ctrlKey && !event.shiftKey) {
     switch (event.key) {
       case "ArrowDown":
-        if (depth === 0 && hasChildren) {
-          open = true;
-          setTimeout(() => focusFirstChild($children), 10);
+        if (isMenuBarItem && hasChildren) {
+          openMenu();
+          setTimeout(async () => {
+            await tick();
+            menuRef?.focusFirstMenuItem();
+          }, 10);
           event.preventDefault();
+          event.stopPropagation();
           return false;
-        } else if (depth > 0) {
-          focusNext?.(value);
+        }
+        if (!isMenuBarItem) {
+          focusNextMenuItem();
           event.preventDefault();
+          event.stopPropagation();
           return false;
         }
         break;
       case "ArrowLeft":
-        if (depth < 2) {
-          open = false;
-          closeMenu?.(true);
-          openPreviousMenu?.(rootValue);
-        } else {
-          closeMenu?.();
+        if (isMenuBarItem) {
+          focusPreviousMenuItem();
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        if (depth > 1) {
+          closeContainingMenu?.();
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
         }
+        openPreviousMenuBarItem?.();
         event.preventDefault();
+        event.stopPropagation();
         return false;
       case "ArrowRight":
-        if (depth > 0 && hasChildren) {
-          open = true;
-          setTimeout(focusFirstChild, 10);
-        } else {
-          open = false;
-          closeMenu?.(true);
-          openNextMenu?.(rootValue);
+        if (isMenuBarItem) {
+          focusNextMenuItem();
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
         }
-        event.preventDefault();
-        return false;
+        if (hasChildren) {
+          openMenu();
+          setTimeout(async () => {
+            await tick();
+            menuRef?.focusFirstMenuItem();
+          }, 10);
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        if (openNextMenuBarItem) {
+          openNextMenuBarItem();
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+        break;
       case "ArrowUp":
-        if (depth === 0 && hasChildren) {
-          open = true;
-          setTimeout(() => focusLastChild($children), 10);
+        if (isMenuBarItem && hasChildren) {
+          openMenu();
+          setTimeout(async () => {
+            await tick();
+            menuRef?.focusLastMenuItem();
+          }, 10);
           event.preventDefault();
+          event.stopPropagation();
           return false;
-        } else if (depth > 0) {
-          focusPrevious?.(value);
+        }
+        if (!isMenuBarItem) {
+          focusPreviousMenuItem();
           event.preventDefault();
+          event.stopPropagation();
           return false;
         }
+        break;
       case "Escape":
         open = false;
-        closeMenu?.(true);
+        closeAllMenus();
         event.preventDefault();
+        event.stopPropagation();
         return false;
     }
   }
 };
 const onMouseEnter = (event) => {
-  setTimeout(() => {
-    menuItemRef?.focus();
-  }, 10);
+  menuItemRef?.focus();
 };
-const onMenuItemClick = (event) => {
+const onClick = (event) => {
   if (!disabled) {
     if (hasChildren) {
-      open = !open;
+      if (!$openValues.includes(value)) {
+        openMenu();
+        if ($usingKeyboard) {
+          setTimeout(async () => {
+            await tick();
+            menuRef?.focusFirstMenuItem();
+          }, 10);
+        }
+      } else {
+        closeMenu();
+      }
       event.preventDefault();
       event.stopPropagation();
       return false;
     } else {
       raiseSelect(value);
-      closeMenu?.(true);
-    }
-  }
-};
-const onClickOutside = (event) => {
-  const {
-    detail: { mouseEvent }
-  } = event;
-  let element = mouseEvent.target;
-  while (element) {
-    if (element.getAttribute("data-root-value") === rootValue) {
-      return;
+      closeAllMenus();
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
     }
-    element = element.parentElement;
   }
-  closeMenu?.(true);
 };
 setContext(MENU_ITEM_CONTEXT_KEY, {
+  isMenuBarItem: false,
+  openValues,
   rootValue,
   depth: depth + 1,
-  register: (menuItem) => {
-    children.set([...$children, menuItem]);
-  },
-  unregister: (menuItem) => {
-    children.set($children.filter((x) => x.value !== menuItem.value));
-  },
-  closeMenu: (recursive) => {
-    open = false;
-    if (recursive) {
-      closeMenu?.(recursive);
-    }
-    if (!recursive || depth === 0) {
-      menuItemRef?.focus();
-    }
+  closeContainingMenu: () => {
+    closeMenu();
   },
-  focusPrevious: (currentValue) => focusPreviousChild($children, currentValue),
-  focusNext: (currentValue) => focusNextChild($children, currentValue),
   onOpen: raiseOpen,
   onClose: raiseClose,
   onSelect: raiseSelect
@@ -230,14 +259,13 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   bind:this={menuItemRef}
   class="sterling-menu-item"
   class:composed
-  class:disabled
   class:using-keyboard={usingKeyboard}
   data-value={value}
   data-root-value={rootValue}
+  {disabled}
   {role}
   tabindex={0}
   type="button"
-  use:clickOutside
   on:blur
   on:click
   on:dblclick
@@ -269,26 +297,39 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   on:pointerout
   on:pointerup
   on:wheel
-  on:click={onMenuItemClick}
-  on:click_outside={onClickOutside}
+  on:click={onClick}
   on:keydown={onKeyDown}
   on:mouseenter={onMouseEnter}
   {...$$restProps}
 >
   <div class="item" id={displayId}>
-    <slot name="item" {checked} {depth} {disabled} {hasChildren} {open} {role} {text} {value}>
-      <MenuItemDisplay
-        {checked}
-        {disabled}
-        hasChildren={depth > 0 && hasChildren}
-        menuItemRole={role}>{text}</MenuItemDisplay
+    <slot
+      name="item"
+      {checked}
+      {depth}
+      {disabled}
+      {hasChildren}
+      {isMenuBarItem}
+      {open}
+      {role}
+      {text}
+      {value}
+    >
+      <MenuItemDisplay {checked} {disabled} {hasChildren} {isMenuBarItem} menuItemRole={role}
+        >{text}</MenuItemDisplay
       >
     </slot>
   </div>
   {#if menuItemRef && open && hasChildren}
-    <Menu id={menuId} {open} reference={menuItemRef}>
-      <slot {depth} {disabled} />
-    </Menu>
+    <Popover
+      reference={menuItemRef}
+      placement={isMenuBarItem ? 'bottom-start' : 'right-start'}
+      {open}
+    >
+      <Menu bind:this={menuRef} id={menuId}>
+        <slot {depth} {disabled} />
+      </Menu>
+    </Popover>
   {/if}
 </button>
 

package/MenuItem.svelte.d.ts

@@ -5,12 +5,11 @@ declare const __propDef: {
         checked?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
-        open?: boolean | undefined;
         value: string;
         role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
         text?: string | undefined;
-        click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
+        click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
@@ -45,6 +44,9 @@ declare const __propDef: {
         pointerout: PointerEvent;
         pointerup: PointerEvent;
         wheel: WheelEvent;
+        close: CustomEvent<any>;
+        open: CustomEvent<any>;
+        select: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -54,6 +56,7 @@ declare const __propDef: {
             depth: number;
             disabled: boolean;
             hasChildren: boolean;
+            isMenuBarItem: boolean | undefined;
             open: boolean;
             role: "menuitem" | "menuitemcheckbox" | "menuitemradio";
             text: string | undefined;
@@ -69,8 +72,8 @@ export type MenuItemProps = typeof __propDef.props;
 export type MenuItemEvents = typeof __propDef.events;
 export type MenuItemSlots = typeof __propDef.slots;
 export default class MenuItem extends SvelteComponentTyped<MenuItemProps, MenuItemEvents, MenuItemSlots> {
-    get click(): () => void;
     get blur(): () => void;
+    get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/MenuItem.types.d.ts

@@ -1,3 +1,7 @@
+import type { Writable } from 'svelte/store';
+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;
@@ -5,14 +9,19 @@ export type MenuItemRegistration = {
     focus: () => void;
 };
 export type MenuItemContext = {
+    /**
+     * If the menu item is a top-elvel item in a menu bar
+     */
+    isMenuBarItem?: boolean;
+    /**
+     * The menu item values for the chain of open menus.
+     */
+    openValues: Writable<string[]>;
     rootValue?: string;
     depth?: number;
-    register?: (menuItem: MenuItemRegistration) => void;
-    unregister?: (menuItem: MenuItemRegistration) => void;
-    focusPrevious?: (currentValue: string) => void;
-    focusNext?: (currentValue: string) => void;
-    closeMenu?: (recursive?: boolean) => void;
+    closeContainingMenu?: () => void;
     onOpen?: (value: string) => void;
     onClose?: (value: string) => void;
     onSelect?: (value: string) => void;
 };
+export {};

package/MenuItem.utils.d.ts

@@ -3,3 +3,5 @@ export declare const focusPreviousChild: (children: MenuItemRegistration[], curr
 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/MenuItem.utils.js

@@ -18,3 +18,19 @@ export const focusFirstChild = (children) => {
 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/MenuItemDisplay.svelte

@@ -1,6 +1,7 @@
 <script>export let checked = false;
 export let disabled = false;
 export let hasChildren = false;
+export let isMenuBarItem = false;
 export let menuItemRole = "menuitem";
 </script>
 
@@ -19,7 +20,7 @@ export let menuItemRole = "menuitem";
       <slot name="shortcut" />
     </div>
   {:else}
-    <div class="chevron" class:has-children={hasChildren} />
+    <div class="chevron" class:has-children={!isMenuBarItem && hasChildren} />
   {/if}
 </div>
 

package/MenuItemDisplay.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         hasChildren?: boolean | undefined;
+        isMenuBarItem?: boolean | undefined;
         menuItemRole?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
     };
     events: {

package/Popover.svelte

@@ -1,5 +1,5 @@
 <script>import { onMount } from "svelte";
-import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
 import { portal } from "./actions/portal";
 export let placement = "bottom-start";
 export let open = false;
@@ -25,11 +25,7 @@ let bodyHeight = 0;
 const resizeObserver = new ResizeObserver((entries) => {
   bodyHeight = entries[0].target.clientHeight;
 });
-const middleware = [
-  offset({ mainAxis: -2 }),
-  flip(),
-  shift({ padding: 0, mainAxis: true, crossAxis: true })
-];
+const middleware = [offset({ mainAxis: -2 }), flip()];
 const computePopupPosition = async () => {
   if (reference && popupRef) {
     popupPosition = await computePosition(reference, popupRef, {
@@ -108,11 +104,6 @@ onMount(() => {
   }
 
   .sterling-popover {
-    background-color: var(--stsv-Common__background-color);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
-    border-style: var(--stsv-Common__border-style);
-    border-width: var(--stsv-Common__border-width);
     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
     box-sizing: border-box;
     display: none;
@@ -120,9 +111,7 @@ onMount(() => {
     grid-template-rows: 1fr;
     height: fit-content;
     left: 0;
-    max-height: calc(50vh);
-    overflow: auto;
-    overscroll-behavior: contain;
+    overflow: hidden;
     position: absolute;
     top: 0;
     width: max-content;

package/Select.svelte

@@ -200,18 +200,20 @@ const onListSelect = (event) => {
     </slot>
   </div>
   <Popup reference={selectRef} bind:open id={popupId}>
-    <List
-      bind:this={listRef}
-      composed
-      {disabled}
-      selectedValue={pendingSelectedValue}
-      on:click={onListClick}
-      on:keydown={onListKeydown}
-      on:select={onListSelect}
-      tabIndex={open ? 0 : -1}
-    >
-      <slot />
-    </List>
+    <div class="popup-content">
+      <List
+        bind:this={listRef}
+        composed
+        {disabled}
+        selectedValue={pendingSelectedValue}
+        on:click={onListClick}
+        on:keydown={onListKeydown}
+        on:select={onListSelect}
+        tabIndex={open ? 0 : -1}
+      >
+        <slot />
+      </List>
+    </div>
   </Popup>
 </div>
 
@@ -327,7 +329,17 @@ const onListSelect = (event) => {
   }
 
   .popup-content {
-    max-height: 15em;
+    background-color: var(--stsv-Common__background-color);
+    border-color: var(--stsv-Common__border-color);
+    border-radius: var(--stsv-Common__border-radius);
+    border-style: var(--stsv-Common__border-style);
+    border-width: var(--stsv-Common__border-width);
+    padding: 0.25em;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    overflow: hidden;
+    max-height: 20em;
   }
 
   @media (prefers-reduced-motion) {

package/Tab.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from "svelte";
 import { TAB_LIST_CONTEXT_KEY } from "./TabList.constants";
+import { usingKeyboard } from "./stores/usingKeyboard";
 export let disabled = false;
 export let selected = false;
 export let text = void 0;
@@ -8,7 +9,6 @@ let tabRef;
 const {
   disabled: tabListDisabled,
   selectedValue,
-  usingKeyboard,
   vertical
 } = getContext(TAB_LIST_CONTEXT_KEY);
 $: