@geoffcox/sterling-svelte 0.0.25 → 0.0.27

package/ListItem.svelte

@@ -1,16 +1,18 @@
 <script>import { getContext } from "svelte";
 import { LIST_CONTEXT_KEY } from "./List.constants";
-import { readable } from "svelte/store";
+import { readable, writable } from "svelte/store";
 export let disabled = false;
 export let value;
 const {
+  colorful,
   disabled: listDisabled,
   selectedValue,
   horizontal
 } = getContext(LIST_CONTEXT_KEY) || {
+  colorful: readable(false),
   disabled: readable(false),
-  selectedValue: void 0,
-  horizontal: false
+  selectedValue: writable(void 0),
+  horizontal: readable(false)
 };
 let itemRef;
 $:
@@ -30,6 +32,7 @@ export const focus = (options) => {
   aria-selected={selected}
   bind:this={itemRef}
   class="sterling-list-item"
+  class:colorful={$colorful}
   class:disabled={disabled || $listDisabled}
   class:item-disabled={disabled && !$listDisabled}
   class:selected
@@ -65,7 +68,7 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <slot {disabled} {horizontal} {selected} {value}>{value}</slot>
@@ -75,7 +78,7 @@ export const focus = (options) => {
   .sterling-list-item {
     background-color: transparent;
     box-sizing: border-box;
-    color: var(--stsv-Input__color);
+    color: var(--stsv-common__color);
     cursor: pointer;
     margin: 0;
     padding: 0.5em;
@@ -87,13 +90,23 @@ export const focus = (options) => {
   }
 
   .sterling-list-item:not(.disabled):not(.selected):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-list-item.selected {
-    background-color: var(--stsv-Input__background-color--selected);
-    color: var(--stsv-Input__color--selected);
+    background-color: var(--stsv-button__background-color--active);
+    color: var(--stsv-button__color--active);
+  }
+
+  .sterling-list-item.colorful:not(.disabled):not(.selected):hover {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  .sterling-list-item.colorful.selected {
+    background-color: var(--stsv-button--colorful__background-color--active);
+    color: var(--stsv-button--colorful__color--active);
   }
 
   .sterling-list-item.disabled {
@@ -102,7 +115,13 @@ export const focus = (options) => {
   }
 
   .sterling-list-item::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/ListItem.svelte.d.ts

@@ -46,7 +46,7 @@ declare const __propDef: {
     slots: {
         default: {
             disabled: boolean;
-            horizontal: import("svelte/store").Readable<boolean>;
+            horizontal: import("svelte/store").Readable<boolean> | undefined;
             selected: boolean;
             value: string;
         };

package/Menu.svelte

@@ -1,155 +1,126 @@
-<script>import { getContext, onMount } from "svelte";
-import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
-import { portal } from "./actions/portal";
+<script>import { getContext } from "svelte";
+import { slide } from "svelte/transition";
 import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
-export let reference;
-export let open = false;
+import { isElementEnabledMenuItem, isElementMenuItem } from "./MenuItem.utils";
+import { prefersReducedMotion } from "./stores/prefersReducedMotion";
 let menuRef;
-let menuPosition = { x: 0, y: 0 };
-const { rootValue, depth = 0 } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
+let menuItemsRef;
+const slidNoOp = (node, params) => {
+  return { delay: 0, duration: 0 };
+};
+$:
+  slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
+const { rootValue } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
 export const blur = () => {
   menuRef?.blur();
 };
 export const focus = (options) => {
   menuRef?.focus(options);
 };
-const ensurePortalHost = () => {
-  let host = document.querySelector("#SterlingMenuPortal");
-  if (!host) {
-    host = document.createElement("div");
-    host.id = "SterlingMenuPortal";
-    host.style.overflow = "visible";
-    document.body.append(host);
+const isElementInThisMenu = (candidate) => {
+  return candidate && candidate.closest('[role="menu"]') === menuRef;
+};
+export const focusFirstMenuItem = () => {
+  let candidate = menuItemsRef?.firstElementChild;
+  while (candidate && !isElementEnabledMenuItem(candidate)) {
+    candidate = candidate.nextElementSibling;
   }
-  return host;
+  candidate?.focus({ preventScroll: true });
+  return !!candidate;
 };
-const portalTarget = ensurePortalHost();
-let bodyHeight = 0;
-const resizeObserver = new ResizeObserver((entries) => {
-  bodyHeight = entries[0].target.clientHeight;
-});
-const menuPlacement = depth > 1 ? "right-start" : "bottom-start";
-const middleware = [
-  offset({ mainAxis: -2 }),
-  flip(),
-  shift({ padding: 0, mainAxis: true, crossAxis: true })
-];
-const computeMenuPosition = async () => {
-  if (reference && menuRef) {
-    menuPosition = await computePosition(reference, menuRef, {
-      placement: menuPlacement,
-      middleware
-    });
-  } else {
-    menuPosition = { x: 0, y: 0 };
+export const focusPreviousMenuItem = () => {
+  let candidate = document.activeElement;
+  if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
+    candidate = menuItemsRef?.previousElementSibling;
+    while (candidate && !isElementEnabledMenuItem(candidate)) {
+      candidate = candidate.previousElementSibling;
+    }
+    candidate?.focus();
   }
+  return !!candidate;
 };
-let cleanupAutoUpdate = () => {
+export const focusNextMenuItem = () => {
+  let candidate = document.activeElement;
+  if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
+    candidate = menuItemsRef?.nextElementSibling;
+    while (candidate && !isElementEnabledMenuItem(candidate)) {
+      candidate = candidate.nextElementSibling;
+    }
+    candidate?.focus();
+  }
+  return !!candidate;
 };
-const autoUpdateMenuPosition = () => {
-  cleanupAutoUpdate();
-  if (reference && menuRef) {
-    cleanupAutoUpdate = autoUpdate(reference, menuRef, computeMenuPosition);
+export const focusLastMenuItem = () => {
+  let candidate = menuItemsRef?.lastElementChild;
+  while (candidate && !isElementEnabledMenuItem(candidate)) {
+    candidate = candidate.previousElementSibling;
   }
+  candidate?.focus({ preventScroll: true });
+  return !!candidate;
 };
-$:
-  menuRef, reference, autoUpdateMenuPosition();
-$:
-  open, bodyHeight, computeMenuPosition();
-onMount(() => {
-  resizeObserver.observe(document.body);
-  return () => {
-    resizeObserver.unobserve(document.body);
-  };
-});
 </script>
 
-{#if open}
-  <div
-    use:portal={{ target: portalTarget }}
-    class="sterling-menu-portal"
-    data-root-value={rootValue}
-  >
-    <div
-      bind:this={menuRef}
-      class="sterling-menu"
-      role="menu"
-      class:open
-      on:blur
-      on:click
-      on:copy
-      on:cut
-      on:dblclick
-      on:dragend
-      on:dragenter
-      on:dragleave
-      on:dragover
-      on:dragstart
-      on:drop
-      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:scroll
-      on:wheel
-      on:paste
-      {...$$restProps}
-      style="left:{menuPosition.x}px; top:{menuPosition.y}px"
-    >
-      <div class="sterling-menu-content">
-        <slot />
-      </div>
-    </div>
+<div
+  bind:this={menuRef}
+  class="sterling-menu"
+  role="menu"
+  class:open
+  data-root-value={rootValue}
+  in:slideMotion={{ duration: 300 }}
+  out:slideMotion={{ duration: 100 }}
+  on:blur
+  on:click
+  on:copy
+  on:cut
+  on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
+  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:scroll
+  on:wheel|passive
+  on:paste
+  {...$$restProps}
+>
+  <div bind:this={menuItemsRef} class="menu-items">
+    <slot />
   </div>
-{/if}
+</div>
 
 <style>
-  .sterling-menu-portal {
-    position: relative;
-    overflow: visible;
-    background: rgba(255, 0, 0, 0.1);
-  }
-
   .sterling-menu {
-    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;
+    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-sizing: border-box;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
     height: fit-content;
-    left: 0;
-    max-height: calc(50vh);
-    overflow: auto;
-    overscroll-behavior: contain;
     padding: 0.25em;
-    position: absolute;
-    top: 0;
-    width: max-content;
-    z-index: 1;
   }
 
-  .sterling-menu-content {
+  .menu-items {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
-    row-gap: calc(2 * var(--stsv-Common__outline-width));
-  }
-
-  .sterling-menu.open {
-    display: grid;
+    row-gap: calc(2 * var(--stsv-common__outline-width));
   }
 </style>

package/Menu.svelte.d.ts

@@ -2,10 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        reference: HTMLElement;
-        open?: boolean | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
+        focusFirstMenuItem?: (() => boolean) | undefined;
+        focusPreviousMenuItem?: (() => boolean) | undefined;
+        focusNextMenuItem?: (() => boolean) | undefined;
+        focusLastMenuItem?: (() => boolean) | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -48,5 +50,9 @@ export type MenuSlots = typeof __propDef.slots;
 export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
+    get focusFirstMenuItem(): () => boolean;
+    get focusPreviousMenuItem(): () => boolean;
+    get focusNextMenuItem(): () => boolean;
+    get focusLastMenuItem(): () => boolean;
 }
 export {};

package/MenuBar.svelte

@@ -2,7 +2,25 @@
 import { MENU_BAR_CONTEXT_KEY } from "./MenuBar.constants";
 import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
 import { writable } from "svelte/store";
+import { isElementEnabledMenuItem } from "./MenuItem.utils";
+import { idGenerator } from "./idGenerator";
+import { clickOutside } from "./actions/clickOutside";
+const openValues = writable([]);
+const rootValue = idGenerator.nextId("MenuBar");
 let menuBarRef;
+let prevOpenValue = void 0;
+$: {
+  if ($openValues.length > 0) {
+    prevOpenValue = $openValues[0];
+  }
+}
+$: {
+  if ($openValues.length === 0 && prevOpenValue !== void 0) {
+    const candidate = menuBarRef.querySelector(`[data-value="${prevOpenValue}"]`);
+    candidate?.focus();
+    prevOpenValue = void 0;
+  }
+}
 const dispatch = createEventDispatcher();
 const raiseClose = (value) => {
   dispatch("close", { value });
@@ -19,48 +37,73 @@ export const blur = () => {
 export const focus = (options) => {
   menuBarRef?.focus(options);
 };
-const children = writable([]);
-const openPreviousChild = (currentValue) => {
-  const index = $children?.findIndex((menuItem) => menuItem.value === currentValue);
-  if (index !== -1) {
-    const focusIndex = index === 0 ? $children.length - 1 : index - 1;
-    $children[focusIndex].focus();
-    $children[focusIndex].open();
+const getOpenMenuBarItem = () => {
+  const value = $openValues[0];
+  if (value) {
+    return menuBarRef.querySelector(`[data-value="${value}"]`);
   }
+  return null;
 };
-const openNextChild = (currentValue) => {
-  const index = $children?.findIndex((menuItem) => menuItem.value === currentValue);
-  if (index !== -1) {
-    const focusIndex = (index + 1) % $children.length;
-    $children[focusIndex].focus();
-    $children[focusIndex].open();
+const openPreviousMenuBarItem = () => {
+  const openItem = getOpenMenuBarItem() || menuBarRef.firstElementChild;
+  let candidate = openItem?.previousElementSibling || menuBarRef.lastElementChild;
+  while (candidate && !isElementEnabledMenuItem(candidate)) {
+    candidate = candidate.previousElementSibling || menuBarRef.lastElementChild;
+    if (candidate === openItem) {
+      return false;
+    }
+  }
+  if (!candidate) {
+    candidate = menuBarRef.lastElementChild;
+    candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
   }
+  candidate?.click();
+  return !!candidate;
 };
-const focusChild = (value) => {
-  const focusIndex = $children?.findIndex((menuItem) => menuItem.value === value);
-  if (focusIndex !== -1) {
-    $children[focusIndex].focus();
+const openNextMenuBarItem = () => {
+  const openItem = getOpenMenuBarItem() || menuBarRef.lastElementChild;
+  let candidate = openItem?.nextElementSibling || menuBarRef.firstElementChild;
+  while (candidate && !isElementEnabledMenuItem(candidate)) {
+    candidate = candidate.nextElementSibling || menuBarRef.firstElementChild;
+    if (candidate === openItem) {
+      return false;
+    }
   }
+  if (!candidate) {
+    candidate = menuBarRef.firstElementChild;
+    candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
+  }
+  candidate?.click();
+  return !!candidate;
+};
+const closeAllMenus = () => {
+  openValues.set([]);
 };
+const onClickOutside = (event) => {
+  const {
+    detail: { mouseEvent }
+  } = event;
+  let element = mouseEvent.target;
+  while (element) {
+    if (element.getAttribute("data-root-value") === rootValue) {
+      return;
+    }
+    element = element.parentElement;
+  }
+  closeAllMenus?.();
+};
+setContext(MENU_BAR_CONTEXT_KEY, {
+  openPreviousMenuBarItem,
+  openNextMenuBarItem
+});
 setContext(MENU_ITEM_CONTEXT_KEY, {
-  register: (menuItem) => {
-    children.set([...$children, menuItem]);
-  },
-  unregister: (menuItem) => {
-    children.set($children.filter((x) => x.value !== menuItem.value));
-  },
-  closeMenu: (recursive) => {
-  },
-  focusPrevious: openPreviousChild,
-  focusNext: openNextChild,
+  isMenuBarItem: true,
+  openValues,
+  rootValue,
   onClose: raiseClose,
   onOpen: raiseOpen,
   onSelect: raiseSelect
 });
-setContext(MENU_BAR_CONTEXT_KEY, {
-  openPreviousMenu: openPreviousChild,
-  openNextMenu: openNextChild
-});
 </script>
 
 <div
@@ -92,9 +135,11 @@ setContext(MENU_BAR_CONTEXT_KEY, {
   on:mouseout
   on:mouseup
   on:scroll
-  on:wheel
+  on:wheel|passive
   on:paste
   {...$$restProps}
+  use:clickOutside
+  on:click_outside={onClickOutside}
 >
   <slot />
 </div>

package/MenuBar.types.d.ts

@@ -1,4 +1,4 @@
 export type MenuBarContext = {
-    openPreviousMenu?: (currentValue: string) => void;
-    openNextMenu?: (currentValue: string) => void;
+    openPreviousMenuBarItem?: () => void;
+    openNextMenuBarItem?: () => void;
 };

package/MenuButton.svelte

@@ -1,10 +1,11 @@
-<script>import { createEventDispatcher, getContext, setContext } from "svelte";
+<script>import { createEventDispatcher, setContext, tick } from "svelte";
 import { writable } from "svelte/store";
 import Button from "./Button.svelte";
 import Menu from "./Menu.svelte";
 import { MENU_ITEM_CONTEXT_KEY } from "./MenuItem.constants";
-import { focusFirstChild, focusNextChild, focusPreviousChild } from "./MenuItem.utils";
 import { idGenerator } from "./idGenerator";
+import Popover from "./Popover.svelte";
+import { clickOutside } from "./actions/clickOutside";
 export let open = false;
 export let shape = "rounded";
 export let value;
@@ -12,12 +13,16 @@ export let variant = "regular";
 const instanceId = idGenerator.nextId("MenuButton");
 let buttonRef;
 let reference;
+let menuRef;
 let prevOpen = open;
 $:
   menuId = `${value}-menu-${instanceId}`;
 $:
   hasChildren = $$slots.items;
-const children = writable([]);
+const openValues = writable([]);
+$: {
+  open = $openValues.length > 0;
+}
 const dispatch = createEventDispatcher();
 const raiseClose = (value2) => {
   dispatch("close", { value: value2 });
@@ -28,10 +33,23 @@ const raiseOpen = (value2) => {
 const raiseSelect = (value2) => {
   dispatch("select", { value: value2 });
 };
-const onClick = () => {
-  open = !open;
-  if (open) {
-    setTimeout(() => focusFirstChild($children), 10);
+export const click = () => {
+  buttonRef?.click();
+};
+export const blur = () => {
+  buttonRef?.blur();
+};
+export const focus = (options) => {
+  buttonRef?.focus(options);
+};
+const onClick = async () => {
+  if (!open) {
+    openValues.set(["menu-button"]);
+    await tick();
+    menuRef?.focusFirstMenuItem();
+  } else {
+    open = false;
+    openValues.set([]);
   }
 };
 $: {
@@ -40,29 +58,29 @@ $: {
   }
   prevOpen = open;
 }
-export const click = () => {
-  buttonRef?.click();
-};
-export const blur = () => {
-  buttonRef?.blur();
+const closeAllMenus = () => {
+  openValues.set([]);
 };
-export const focus = (options) => {
-  buttonRef?.focus(options);
+const onClickOutside = (event) => {
+  const {
+    detail: { mouseEvent }
+  } = event;
+  let element = mouseEvent.target;
+  while (element) {
+    if (element.getAttribute("data-root-value") === value) {
+      return;
+    }
+    element = element.parentElement;
+  }
+  closeAllMenus?.();
 };
 setContext(MENU_ITEM_CONTEXT_KEY, {
-  rootValue: value,
   depth: 1,
-  register: (menuItem) => {
-    children.set([...$children, menuItem]);
-  },
-  unregister: (menuItem) => {
-    children.set($children.filter((x) => x.value !== menuItem.value));
-  },
-  closeMenu: (recursive) => {
+  openValues,
+  rootValue: value,
+  closeContainingMenu: () => {
     open = false;
   },
-  focusPrevious: (currentValue) => focusPreviousChild($children, currentValue),
-  focusNext: (currentValue) => focusNextChild($children, currentValue),
   onOpen: raiseOpen,
   onClose: raiseClose,
   onSelect: raiseSelect
@@ -117,12 +135,14 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   on:wheel
   {...$$restProps}
 >
-  <div class="reference" bind:this={reference}>
+  <div class="reference" bind:this={reference} use:clickOutside on:click_outside={onClickOutside}>
     <slot {shape} {variant} />
   </div>
-  <Menu id={menuId} {reference} {open}>
-    <slot name="items" />
-  </Menu>
+  <Popover {reference} placement="bottom-start" {open}>
+    <Menu bind:this={menuRef} id={menuId} {reference} {open}>
+      <slot name="items" />
+    </Menu>
+  </Popover>
 </Button>
 
 <style>

package/MenuItem.constants.d.ts

@@ -1 +1,2 @@
 export declare const MENU_ITEM_CONTEXT_KEY = "sterlingMenuItem";
+export declare const MENU_ITEM_ROLES: readonly ["menuitem", "menuitemcheckbox", "menuitemradio"];

package/MenuItem.constants.js

@@ -1 +1,2 @@
 export const MENU_ITEM_CONTEXT_KEY = 'sterlingMenuItem';
+export const MENU_ITEM_ROLES = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];