@geoffcox/sterling-svelte 0.0.25 → 0.0.27

package/MenuItem.svelte

@@ -1,50 +1,61 @@
-<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 colorful = 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 +75,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
@@ -229,15 +259,15 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   aria-owns={menuId}
   bind:this={menuItemRef}
   class="sterling-menu-item"
+  class:colorful
   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
@@ -268,27 +298,40 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
-  on:click={onMenuItemClick}
-  on:click_outside={onClickOutside}
+  on:wheel|passive
+  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>
 
@@ -296,11 +339,11 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   .sterling-menu-item {
     background-color: transparent;
     border-color: transparent;
-    border-radius: var(--stsv-Button__border-radius);
+    border-radius: var(--stsv-button__border-radius);
     border-style: none;
     border-width: 0;
     box-sizing: border-box;
-    color: var(--stsv-Common__color);
+    color: var(--stsv-common__color);
     cursor: pointer;
     font: inherit;
     margin: 0;
@@ -316,8 +359,8 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   }
 
   .sterling-menu-item:hover {
-    background-color: var(--stsv-Button__background-color--hover);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--hover);
+    color: var(--stsv-button__color--hover);
   }
 
   .sterling-menu-item:focus {
@@ -325,15 +368,35 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   }
 
   .sterling-menu-item.using-keyboard:focus {
-    border-color: var(--stsv-Button__border-color--focus);
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    border-color: var(--stsv-button__border-color--focus);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
   }
 
   .sterling-menu-item:focus {
-    background-color: var(--stsv-Input__background-color--selected);
+    background-color: var(--stsv-input__background-color--selected);
+  }
+
+  /** ----- colorful ----- */
+
+  .sterling-menu-item.colorful {
+    color: var(--stsv-common--colorful__color);
+  }
+
+  .sterling-menu-item.colorful:hover {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  .sterling-menu-item.colorful.using-keyboard:focus {
+    border-color: var(--stsv-button--colorful__border-color--focus);
+  }
+
+  .sterling-menu-item.colorful:focus {
+    background-color: var(--stsv-button--colorful__background-color--focus);
+    color: var(--stsv-button--colorful__color--focus);
   }
 
   .sterling-menu-item.composed,

package/MenuItem.svelte.d.ts

@@ -3,14 +3,14 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
+        colorful?: 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 +45,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 +57,7 @@ declare const __propDef: {
             depth: number;
             disabled: boolean;
             hasChildren: boolean;
+            isMenuBarItem: boolean | undefined;
             open: boolean;
             role: "menuitem" | "menuitemcheckbox" | "menuitemradio";
             text: string | undefined;
@@ -69,8 +73,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>
 
@@ -102,7 +103,13 @@ export let menuItemRole = "menuitem";
   }
 
   .sterling-menu-item-display::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      45deg,
+      var(--stsv-common__background-color1--disabled),
+      var(--stsv-common__background-color1--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 6px
+    );
     bottom: 0;
     content: '';
     left: 0;

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/MenuSeparator.svelte

@@ -35,14 +35,14 @@ A styled line to visually separate menu items in a menu.
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 />
 
 <style>
   .sterling-menu-item-separator {
-    height: var(--stsv-Common__border-width);
-    background-color: var(--stsv-Common__border-color);
+    height: var(--stsv-common__border-width);
+    background-color: var(--stsv-common__border-color);
     margin: 0.1em 0;
   }
 </style>