@geoffcox/sterling-svelte 0.0.14 → 0.0.16

package/containers/MenuItem.svelte

@@ -0,0 +1,350 @@
+<script>import { createKeyborg } from "keyborg";
+import { v4 as uuid } from "uuid";
+import { getContext, onMount, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { clickOutside } from "../clickOutside";
+import { afterUpdate, createEventDispatcher } from "svelte/internal";
+import MenuItemDisplay from "./MenuItemDisplay.svelte";
+import { menuBarContextKey, menuItemContextKey } from "./Menus.constants";
+import Menu from "./Menu.svelte";
+import {
+  focusFirstChild,
+  focusLastChild,
+  focusNextChild,
+  focusPreviousChild
+} from "./Menus.utils";
+export let checked = false;
+export let composed = false;
+export let disabled = false;
+export let open = false;
+export let menuItemId;
+export let role = "menuitem";
+export let text = void 0;
+const {
+  rootMenuItemId = menuItemId,
+  depth = 0,
+  register = void 0,
+  unregister = void 0,
+  closeMenu = void 0,
+  focusPrevious = void 0,
+  focusNext = void 0,
+  onOpen = void 0,
+  onClose = void 0,
+  onSelect = void 0
+} = getContext(menuItemContextKey) || {};
+console.log({
+  rootMenuItemId,
+  depth,
+  register,
+  unregister,
+  closeMenu,
+  focusPrevious,
+  focusNext,
+  onOpen,
+  onClose,
+  onSelect
+});
+const { openPreviousMenu = void 0, openNextMenu = void 0 } = getContext(menuBarContextKey) || {};
+const instanceId = uuid();
+$:
+  displayId = `${menuItemId}-display-${instanceId}`;
+$:
+  menuId = `${menuItemId}-menu-${instanceId}`;
+let menuItemRef;
+const children = writable([]);
+let mounted = false;
+let prevOpen = open;
+$:
+  hasChildren = $$slots.default;
+const dispatch = createEventDispatcher();
+const raiseClose = (menuItemId2) => {
+  dispatch("close", { menuItemId: menuItemId2 });
+  onClose?.(menuItemId2);
+};
+const raiseOpen = (menuItemId2) => {
+  dispatch("open", { menuItemId: menuItemId2 });
+  onOpen?.(menuItemId2);
+};
+$: {
+  if (hasChildren && open !== prevOpen) {
+    open ? raiseOpen(menuItemId) : raiseClose(menuItemId);
+  }
+  prevOpen = open;
+}
+const raiseSelect = (menuItemId2) => {
+  dispatch("select", { menuItemId: menuItemId2 });
+  onSelect?.(menuItemId2);
+};
+let keyborg = createKeyborg(window);
+let usingKeyboard = keyborg.isNavigatingWithKeyboard();
+const keyborgHandler = (value) => {
+  usingKeyboard = value;
+};
+const autoFocusFirstChild = (open2, insideMenu) => {
+  if (open2 && insideMenu) {
+    setTimeout(() => focusFirstChild($children), 10);
+  }
+};
+$:
+  autoFocusFirstChild(open, depth > 0);
+onMount(() => {
+  mounted = true;
+  keyborg.subscribe(keyborgHandler);
+  const menuItemSelf = {
+    id: menuItemId,
+    open: () => {
+      open = true;
+    },
+    close: () => {
+      open = false;
+    },
+    focus: () => {
+      menuItemRef?.focus();
+    }
+  };
+  register?.(menuItemSelf);
+  return () => {
+    keyborg.unsubscribe(keyborgHandler);
+    unregister?.(menuItemSelf);
+  };
+});
+afterUpdate(() => {
+  prevOpen = open;
+});
+const onKeyDown = (event) => {
+  if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
+    switch (event.key) {
+      case "ArrowDown":
+        if (depth === 0 && hasChildren) {
+          open = true;
+          setTimeout(() => focusFirstChild($children), 10);
+          event.preventDefault();
+          return false;
+        } else if (depth > 0) {
+          focusNext?.(menuItemId);
+          event.preventDefault();
+          return false;
+        }
+        break;
+      case "ArrowLeft":
+        if (depth < 2) {
+          open = false;
+          closeMenu?.(true);
+          openPreviousMenu?.(rootMenuItemId);
+        } else {
+          closeMenu?.();
+        }
+        event.preventDefault();
+        return false;
+      case "ArrowRight":
+        if (depth > 0 && hasChildren) {
+          open = true;
+          setTimeout(focusFirstChild, 10);
+        } else {
+          open = false;
+          closeMenu?.(true);
+          openNextMenu?.(rootMenuItemId);
+        }
+        event.preventDefault();
+        return false;
+      case "ArrowUp":
+        if (depth === 0 && hasChildren) {
+          open = true;
+          setTimeout(() => focusLastChild($children), 10);
+          event.preventDefault();
+          return false;
+        } else if (depth > 0) {
+          focusPrevious?.(menuItemId);
+          event.preventDefault();
+          return false;
+        }
+      case "Escape":
+        open = false;
+        closeMenu?.(true);
+        event.preventDefault();
+        return false;
+    }
+  }
+};
+const onMouseEnter = (event) => {
+  setTimeout(() => {
+    menuItemRef?.focus();
+  }, 10);
+};
+const onMenuItemClick = (event) => {
+  if (!disabled) {
+    if (hasChildren) {
+      open = !open;
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    } else {
+      raiseSelect(menuItemId);
+      closeMenu?.(true);
+    }
+  }
+};
+const onClickOutside = (event) => {
+  const {
+    detail: { mouseEvent }
+  } = event;
+  let element = mouseEvent.target;
+  while (element) {
+    if (element.getAttribute("data-root-menu-item-id") === rootMenuItemId) {
+      return;
+    }
+    element = element.parentElement;
+  }
+  closeMenu?.(true);
+};
+setContext(menuItemContextKey, {
+  rootMenuItemId,
+  depth: depth + 1,
+  register: (menuItem) => {
+    children.set([...$children, menuItem]);
+  },
+  unregister: (menuItem) => {
+    children.set($children.filter((x) => x.id !== menuItem.id));
+  },
+  closeMenu: (recursive) => {
+    open = false;
+    if (recursive) {
+      closeMenu?.(recursive);
+    }
+    if (!recursive || depth === 0) {
+      menuItemRef?.focus();
+    }
+  },
+  focusPrevious: (fromMenuItemId) => focusPreviousChild($children, fromMenuItemId),
+  focusNext: (fromMenuItemId) => focusNextChild($children, fromMenuItemId),
+  onOpen: raiseOpen,
+  onClose: raiseClose,
+  onSelect: raiseSelect
+});
+</script>
+
+<button
+  aria-controls={menuId}
+  aria-disabled={disabled}
+  aria-expanded={open}
+  aria-haspopup={hasChildren}
+  aria-owns={menuId}
+  bind:this={menuItemRef}
+  class="sterling-menu-item"
+  class:composed
+  class:disabled
+  class:using-keyboard={usingKeyboard}
+  data-menu-item-id={menuItemId}
+  data-root-menu-item-id={rootMenuItemId}
+  {role}
+  tabindex={0}
+  type="button"
+  use:clickOutside
+  on:blur
+  on:click
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:pointercancel
+  on:pointerdown
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointerover
+  on:pointerout
+  on:pointerup
+  on:wheel
+  on:click={onMenuItemClick}
+  on:click_outside={onClickOutside}
+  on:keydown={onKeyDown}
+  on:mouseenter={onMouseEnter}
+  {...$$restProps}
+>
+  <div class="item" id={displayId}>
+    <slot name="item" {checked} {disabled} {hasChildren} {depth} {menuItemId} {open} {role} {text}>
+      <MenuItemDisplay {checked} hasChildren={depth > 0 && hasChildren} menuItemRole={role}
+        >{text}</MenuItemDisplay
+      >
+    </slot>
+  </div>
+  {#if menuItemRef && open && $$slots.default}
+    <Menu id={menuId} {open} reference={menuItemRef}>
+      <slot />
+    </Menu>
+  {/if}
+</button>
+
+<style>
+  .sterling-menu-item {
+    background-color: transparent;
+    border-color: transparent;
+    border-radius: var(--Button__border-radius);
+    border-style: none;
+    border-width: 0;
+    box-sizing: border-box;
+    color: var(--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(--Button__background-color--hover);
+    color: var(--Button__color--hover);
+  }
+
+  .sterling-menu-item:focus {
+    outline: none;
+  }
+
+  .sterling-menu-item.using-keyboard:focus {
+    border-color: var(--Button__border-color--focus);
+    outline-color: var(--Common__outline-color);
+    outline-offset: var(--Common__outline-offset);
+    outline-style: var(--Common__outline-style);
+    outline-width: var(--Common__outline-width);
+  }
+
+  .sterling-menu-item:focus {
+    background-color: var(--Input__background-color--selected);
+  }
+
+  .sterling-menu-item.disabled {
+    color: var(--Input__color--disabled);
+  }
+
+  .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/containers/MenuItem.svelte.d.ts

@@ -0,0 +1,61 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        checked?: boolean | undefined;
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
+        open?: boolean | undefined;
+        menuItemId: string;
+        role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
+        text?: string | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        item: {
+            checked: boolean;
+            disabled: boolean;
+            hasChildren: boolean;
+            depth: number;
+            menuItemId: string;
+            open: boolean;
+            role: "menuitem" | "menuitemcheckbox" | "menuitemradio";
+            text: string | undefined;
+        };
+        default: {};
+    };
+};
+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> {
+}
+export {};

package/containers/MenuItemDisplay.svelte

@@ -0,0 +1,97 @@
+<script>export let checked = false;
+export let hasChildren = false;
+export let menuItemRole = "menuitem";
+</script>
+
+<div class="menu-item-display">
+  <div
+    class="check"
+    class:checkmark={menuItemRole === 'menuitemcheckbox'}
+    class:bullet={menuItemRole === 'menuitemradio'}
+    class:checked
+  />
+  <div class="content">
+    <slot />
+  </div>
+  {#if $$slots.shortcut}
+    <div class="shortcut">
+      <slot name="shortcut" />
+    </div>
+  {:else}
+    <div class="chevron" class:has-children={hasChildren} />
+  {/if}
+</div>
+
+<style>
+  .menu-item-display {
+    align-items: center;
+    justify-items: flex-start;
+    display: grid;
+    grid-template-columns: 1em 1fr 1em;
+    column-gap: 0.5em;
+    padding: 0.25em;
+  }
+
+  .check {
+    box-sizing: border-box;
+    pointer-events: none;
+    width: 20px;
+    height: 20px;
+    position: relative;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .check.checkmark.checked::after {
+    border-color: currentColor;
+    border-style: solid;
+    border-width: 0 0.2em 0.2em 0;
+    box-sizing: border-box;
+    content: '';
+    height: 0.8em;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    transform-origin: center;
+    transition: border-color 250ms;
+    width: 0.4em;
+  }
+
+  .check.bullet.checked::after {
+    background-color: currentColor;
+    border-radius: 10000px;
+    content: '';
+    height: 0.5em;
+    left: 45%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: background-color 250ms;
+    width: 0.5em;
+  }
+
+  .content {
+    padding-top: 0.25em;
+  }
+
+  .chevron {
+    position: relative;
+    border: none;
+    background: none;
+    height: 1em;
+    width: 1em;
+    transform-origin: 50% 50%;
+  }
+
+  .chevron.has-children::after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    border-right: 3px solid currentColor;
+    border-top: 3px solid currentColor;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+</style>

package/containers/MenuItemDisplay.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        checked?: boolean | undefined;
+        hasChildren?: boolean | undefined;
+        menuItemRole?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        shortcut: {};
+    };
+};
+export type MenuItemDisplayProps = typeof __propDef.props;
+export type MenuItemDisplayEvents = typeof __propDef.events;
+export type MenuItemDisplaySlots = typeof __propDef.slots;
+export default class MenuItemDisplay extends SvelteComponentTyped<MenuItemDisplayProps, MenuItemDisplayEvents, MenuItemDisplaySlots> {
+}
+export {};

package/containers/MenuSeparator.svelte

@@ -0,0 +1,42 @@
+<!--
+@component
+A styled line to visually separate menu items in a menu.
+  -->
+<div
+  class="sterling-menu-item-separator"
+  role="separator"
+  on:blur
+  on:click
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:pointercancel
+  on:pointerdown
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointerover
+  on:pointerout
+  on:pointerup
+  on:wheel
+  {...$$restProps}
+/>
+
+<style>
+  .sterling-menu-item-separator {
+    height: var(--Common__border-width);
+    background-color: var(--Common__border-color);
+    margin: 0.1em 0;
+  }
+</style>

package/containers/MenuSeparator.svelte.d.ts

@@ -0,0 +1,76 @@
+/** @typedef {typeof __propDef.props}  MenuSeparatorProps */
+/** @typedef {typeof __propDef.events}  MenuSeparatorEvents */
+/** @typedef {typeof __propDef.slots}  MenuSeparatorSlots */
+/** A styled line to visually separate menu items in a menu. */
+export default class MenuSeparator extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    blur: FocusEvent;
+    click: MouseEvent;
+    dblclick: MouseEvent;
+    focus: FocusEvent;
+    focusin: FocusEvent;
+    focusout: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mousedown: MouseEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mousemove: MouseEvent;
+    mouseover: MouseEvent;
+    mouseout: MouseEvent;
+    mouseup: MouseEvent;
+    pointercancel: PointerEvent;
+    pointerdown: PointerEvent;
+    pointerenter: PointerEvent;
+    pointerleave: PointerEvent;
+    pointermove: PointerEvent;
+    pointerover: PointerEvent;
+    pointerout: PointerEvent;
+    pointerup: PointerEvent;
+    wheel: WheelEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MenuSeparatorProps = typeof __propDef.props;
+export type MenuSeparatorEvents = typeof __propDef.events;
+export type MenuSeparatorSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/containers/Menus.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const menuBarContextKey = "sterlingMenuBar";
+export declare const menuItemContextKey = "sterlingMenuItem";

package/containers/Menus.constants.js

@@ -0,0 +1,2 @@
+export const menuBarContextKey = 'sterlingMenuBar';
+export const menuItemContextKey = 'sterlingMenuItem';

package/containers/Menus.types.d.ts

@@ -0,0 +1,22 @@
+export type MenuItemRegistration = {
+    id: string;
+    open: () => void;
+    close: () => void;
+    focus: () => void;
+};
+export type MenuBarContext = {
+    openPreviousMenu?: (fromMenuItemId: string) => void;
+    openNextMenu?: (fromMenuItemId: string) => void;
+};
+export type MenuItemContext = {
+    rootMenuItemId?: string;
+    depth?: number;
+    register?: (menuItem: MenuItemRegistration) => void;
+    unregister?: (menuItem: MenuItemRegistration) => void;
+    focusPrevious?: (fromMenuItemId: string) => void;
+    focusNext?: (fromMenuItemId: string) => void;
+    closeMenu?: (recursive?: boolean) => void;
+    onOpen?: (menuItemId: string) => void;
+    onClose?: (menuItemId: string) => void;
+    onSelect?: (menuItemId: string) => void;
+};

package/containers/Menus.types.js

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

package/containers/Menus.utils.d.ts

@@ -0,0 +1,5 @@
+import type { MenuItemRegistration } from './Menus.types';
+export declare const focusPreviousChild: (children: MenuItemRegistration[], fromMenuItemId: string) => void;
+export declare const focusNextChild: (children: MenuItemRegistration[], fromMenuItemId: string) => void;
+export declare const focusFirstChild: (children: MenuItemRegistration[]) => void;
+export declare const focusLastChild: (children: MenuItemRegistration[]) => void;

package/containers/Menus.utils.js

@@ -0,0 +1,20 @@
+export const focusPreviousChild = (children, fromMenuItemId) => {
+    const index = children?.findIndex((menuItem) => menuItem.id === fromMenuItemId);
+    if (index !== -1) {
+        const focusIndex = index === 0 ? children.length - 1 : index - 1;
+        children[focusIndex].focus();
+    }
+};
+export const focusNextChild = (children, fromMenuItemId) => {
+    const index = children?.findIndex((menuItem) => menuItem.id === fromMenuItemId);
+    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();
+};