@geoffcox/sterling-svelte 0.0.31 → 1.0.0

package/MenuItem.svelte

@@ -1,253 +1,297 @@
-<script>import {
-  getContext,
-  afterUpdate,
-  createEventDispatcher,
-  onMount,
-  setContext,
-  tick
-} from "svelte";
-import { writable } from "svelte/store";
-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 MenuItemDisplay from "./MenuItemDisplay.svelte";
-import Popover from "./Popover.svelte";
-import { usingKeyboard } from "./stores/usingKeyboard";
+<script>import { getContext, afterUpdate, createEventDispatcher, onMount, setContext, tick } from 'svelte';
+import { writable } from 'svelte/store';
+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 MenuItemDisplay from './MenuItemDisplay.svelte';
+import Popover from './Popover.svelte';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+// ----- Props ----- //
+/**
+ * When true, the menu item is checked.
+ * Use with role='menuitemcheckbox' or role='menuitemradio'.
+ */
 export let checked = false;
-export let colorful = false;
-export let composed = false;
+/** When true, the menu item is disabled. */
 export let disabled = false;
-export let role = "menuitem";
-export let text = void 0;
+/** The role of the menu item. */
+export let role = 'menuitem';
+/** The text of the menu item. Not used when the item slot is filled.*/
+export let text = undefined;
+/** The value uniquely identifying this menu item within the menu hierarchy. */
 export let value;
-const {
-  isMenuBarItem,
-  openValues = writable([]),
-  rootValue = value,
-  depth = 0,
-  closeContainingMenu = void 0,
-  onOpen = void 0,
-  onClose = void 0,
-  onSelect = void 0
-} = getContext(MENU_ITEM_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}`;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- Get Context ----- //
+const { isMenuBarItem, openValues = writable([]), rootValue = value, depth = 0, closeContainingMenu = undefined, onOpen = undefined, onClose = undefined, onSelect = undefined } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
+const { openPreviousMenuBarItem = undefined, openNextMenuBarItem = undefined } = getContext(MENU_BAR_CONTEXT_KEY) || {};
+// ----- State ----- //
+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;
+$: hasChildren = $$slots.default;
+// ----- Methods ----- //
 export const blur = () => {
-  menuItemRef?.blur();
+    menuItemRef?.blur();
 };
 export const click = () => {
-  menuItemRef?.click();
+    menuItemRef?.click();
 };
 export const focus = (options) => {
-  menuItemRef?.focus(options);
+    menuItemRef?.focus(options);
 };
+// ----- Events ----- //
 const dispatch = createEventDispatcher();
-const raiseClose = (value2) => {
-  dispatch("close", { value: value2 });
-  onClose?.(value2);
+const raiseClose = (value) => {
+    dispatch('close', { value });
+    onClose?.(value);
 };
-const raiseOpen = (value2) => {
-  dispatch("open", { value: value2 });
-  onOpen?.(value2);
+const raiseOpen = (value) => {
+    dispatch('open', { value });
+    onOpen?.(value);
 };
 $: {
-  if (hasChildren && open !== prevOpen) {
-    open ? raiseOpen(value) : raiseClose(value);
-  }
-  prevOpen = open;
+    if (hasChildren && open !== prevOpen) {
+        open ? raiseOpen(value) : raiseClose(value);
+    }
+    prevOpen = open;
 }
-const raiseSelect = (value2) => {
-  dispatch("select", { value: value2 });
-  onSelect?.(value2);
+// dispatches the event and bubbles it up the context
+// so that container components can subscribe to select
+// events for children.
+const raiseSelect = (value) => {
+    dispatch('select', { value });
+    onSelect?.(value);
 };
+// ----- 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;
+    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;
+    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;
+    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;
+    candidate?.focus();
+    return !!candidate;
 };
+// ----- Open/Close ----- //
+// opens the menu for this menu item
 const openMenu = () => {
-  if (!$openValues.includes(value)) {
-    openValues.set([...$openValues.slice(0, depth), value]);
-  }
+    if (!$openValues.includes(value)) {
+        // slice to depth to close any sibling menus that are open
+        openValues.set([...$openValues.slice(0, depth), value]);
+    }
 };
+// closes the menu for this menu item
 const closeMenu = async () => {
-  const index = $openValues.indexOf(value);
-  if (index !== -1) {
-    openValues.set([...$openValues.slice(0, index)]);
-    await tick();
-    menuItemRef?.focus();
-  }
+    const index = $openValues.indexOf(value);
+    if (index !== -1) {
+        openValues.set([...$openValues.slice(0, index)]);
+        await tick();
+        menuItemRef?.focus();
+    }
 };
 const closeAllMenus = () => {
-  openValues.set([]);
+    openValues.set([]);
 };
+// ----- Event Handlers ----- //
 onMount(() => {
-  mounted = true;
+    mounted = true;
 });
 afterUpdate(() => {
-  prevOpen = open;
+    prevOpen = open;
 });
 const onKeyDown = async (event) => {
-  if (!disabled && !event.altKey && !event.ctrlKey && !event.shiftKey) {
-    switch (event.key) {
-      case "ArrowDown":
-        if (isMenuBarItem && hasChildren) {
-          openMenu();
-          setTimeout(async () => {
-            await tick();
-            menuRef?.focusFirstMenuItem();
-          }, 10);
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        if (!isMenuBarItem) {
-          focusNextMenuItem();
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        break;
-      case "ArrowLeft":
-        if (isMenuBarItem) {
-          focusPreviousMenuItem();
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        if (depth > 1) {
-          closeContainingMenu?.();
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
+    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 (isMenuBarItem && hasChildren) {
+                    openMenu();
+                    setTimeout(async () => {
+                        await tick();
+                        menuRef?.focusFirstMenuItem();
+                    }, 10);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return false;
+                }
+                if (!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 (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 (depth > 1) {
+                    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.
+                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 (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 (hasChildren) {
+                    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 (openNextMenuBarItem) {
+                    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 (isMenuBarItem && hasChildren) {
+                    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 (!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;
         }
-        openPreviousMenuBarItem?.();
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      case "ArrowRight":
-        if (isMenuBarItem) {
-          focusNextMenuItem();
-          event.preventDefault();
-          event.stopPropagation();
-          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 (isMenuBarItem && hasChildren) {
-          openMenu();
-          setTimeout(async () => {
-            await tick();
-            menuRef?.focusLastMenuItem();
-          }, 10);
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        if (!isMenuBarItem) {
-          focusPreviousMenuItem();
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        break;
-      case "Escape":
-        open = false;
-        closeAllMenus();
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
     }
-  }
 };
 const onMouseEnter = (event) => {
-  menuItemRef?.focus();
+    menuItemRef?.focus();
 };
 const onClick = (event) => {
-  if (!disabled) {
-    if (hasChildren) {
-      if (!$openValues.includes(value)) {
-        openMenu();
-        if ($usingKeyboard) {
-          setTimeout(async () => {
-            await tick();
-            menuRef?.focusFirstMenuItem();
-          }, 10);
+    if (!disabled) {
+        if (hasChildren) {
+            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);
+            closeAllMenus();
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
         }
-      } else {
-        closeMenu();
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      return false;
-    } else {
-      raiseSelect(value);
-      closeAllMenus();
-      event.preventDefault();
-      event.stopPropagation();
-      return false;
     }
-  }
 };
+// ----- Set Context ----- //
 setContext(MENU_ITEM_CONTEXT_KEY, {
-  isMenuBarItem: false,
-  openValues,
-  rootValue,
-  depth: depth + 1,
-  closeContainingMenu: () => {
-    closeMenu();
-  },
-  onOpen: raiseOpen,
-  onClose: raiseClose,
-  onSelect: raiseSelect
+    isMenuBarItem: false,
+    openValues,
+    rootValue,
+    depth: depth + 1,
+    closeContainingMenu: () => {
+        closeMenu();
+    },
+    onOpen: raiseOpen,
+    onClose: raiseClose,
+    onSelect: raiseSelect
 });
 </script>
 
@@ -258,9 +302,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   aria-haspopup={hasChildren}
   aria-owns={menuId}
   bind:this={menuItemRef}
-  class="sterling-menu-item"
-  class:colorful
-  class:composed
+  class={`sterling-menu-item ${variant}`}
   class:using-keyboard={usingKeyboard}
   data-value={value}
   data-root-value={rootValue}
@@ -316,9 +358,15 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
       {role}
       {text}
       {value}
+      {variant}
     >
-      <MenuItemDisplay {checked} {disabled} {hasChildren} {isMenuBarItem} menuItemRole={role}
-        >{text}</MenuItemDisplay
+      <MenuItemDisplay
+        {checked}
+        {disabled}
+        {hasChildren}
+        {isMenuBarItem}
+        menuItemRole={role}
+        {variant}>{text}</MenuItemDisplay
       >
     </slot>
   </div>
@@ -334,83 +382,3 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
     </Popover>
   {/if}
 </button>
-
-<style>
-  .sterling-menu-item {
-    background-color: transparent;
-    border-color: transparent;
-    border-radius: var(--stsv-button__border-radius);
-    border-style: none;
-    border-width: 0;
-    box-sizing: border-box;
-    color: var(--stsv-common__color);
-    cursor: pointer;
-    font: inherit;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    outline: none;
-    overflow: hidden;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    white-space: nowrap;
-    user-select: none;
-  }
-
-  .sterling-menu-item:hover {
-    background-color: var(--stsv-button__background-color--hover);
-    color: var(--stsv-button__color--hover);
-  }
-
-  .sterling-menu-item:focus {
-    outline: none;
-  }
-
-  .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);
-  }
-
-  .sterling-menu-item:focus {
-    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,
-  .sterling-menu-item.composed:focus,
-  .sterling-menu-item.composed:hover {
-    border-width: 0;
-    border-color: transparent;
-    outline: none;
-    background-color: transparent;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-menu-item {
-      transition: none;
-    }
-  }
-</style>

package/MenuItem.svelte.d.ts

@@ -3,12 +3,11 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
-        colorful?: boolean | undefined;
-        composed?: boolean | undefined;
         disabled?: boolean | undefined;
         role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
         text?: string | undefined;
         value: string;
+        variant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -62,6 +61,7 @@ declare const __propDef: {
             role: "menuitem" | "menuitemcheckbox" | "menuitemradio";
             text: string | undefined;
             value: string;
+            variant: string;
         };
         default: {
             depth: number;