@geoffcox/sterling-svelte 0.0.24 → 0.0.26

package/Dropdown.svelte

@@ -1,5 +1,5 @@
-<script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
-import { createEventDispatcher, onMount, tick } from "svelte";
+<script>import { createEventDispatcher } from "svelte";
+import Popup from "./Popover.svelte";
 import { clickOutside } from "./actions/clickOutside";
 import { idGenerator } from "./idGenerator";
 const popupId = idGenerator.nextId("Dropdown-popup");
@@ -8,11 +8,7 @@ export let disabled = false;
 export let open = false;
 export let stayOpenOnClickAway = false;
 let dropdownRef;
-let popupRef;
-let popupPosition = {
-  x: void 0,
-  y: void 0
-};
+let popupContentRef;
 const dispatch = createEventDispatcher();
 const raiseOpen = (open2) => {
   dispatch("open", { open: open2 });
@@ -29,29 +25,11 @@ export const blur = () => {
 export const focus = (options) => {
   dropdownRef?.focus(options);
 };
-let mounted = false;
-onMount(() => {
-  mounted = true;
-  const cleanup = autoUpdate(dropdownRef, popupRef, async () => {
-    const { x, y } = await computePosition(dropdownRef, popupRef, {
-      placement: "bottom-end",
-      middleware: [offset({ mainAxis: 2 }), flip(), shift({ padding: 0 })]
-    });
-    if (open) {
-      popupPosition = { x, y };
-    }
-  });
-  return cleanup;
-});
 const onClick = (event) => {
-  if (!disabled && mounted) {
-    const targetNode = event.target;
-    const withinPopup = popupRef?.contains(targetNode);
-    if (!withinPopup) {
-      open = !open;
-      event.preventDefault();
-      event.stopPropagation();
-    }
+  if (!disabled) {
+    open = !open;
+    event.preventDefault();
+    event.stopPropagation();
   }
 };
 const onKeydown = (event) => {
@@ -81,7 +59,7 @@ const onClickOutside = (event) => {
   class:disabled
   role="combobox"
   tabindex="0"
-  use:clickOutside
+  use:clickOutside={{ ignoreOthers: [popupContentRef] }}
   on:blur
   on:click
   on:click={onClick}
@@ -120,15 +98,11 @@ const onClickOutside = (event) => {
     </div>
   </slot>
 
-  <div
-    bind:this={popupRef}
-    class="popup"
-    class:open={open && !disabled}
-    id={popupId}
-    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-  >
-    <slot {composed} {disabled} {open} />
-  </div>
+  <Popup reference={dropdownRef} open={!disabled && open}>
+    <div class="popup-content" bind:this={popupContentRef}>
+      <slot {composed} {disabled} {open} />
+    </div>
+  </Popup>
 </div>
 
 <style>
@@ -266,6 +240,19 @@ const onClickOutside = (event) => {
     grid-template-rows: 1fr;
   }
 
+  .popup-content {
+    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;
+  }
+
   @media (prefers-reduced-motion) {
     .sterling-dropdown,
     .sterling-dropdown::after {

package/Field.svelte

@@ -1,6 +1,5 @@
-<script>import { createKeyborg } from "keyborg";
-import { onMount } from "svelte";
-import Tooltip from "./Tooltip.svelte";
+<script>import Tooltip from "./Tooltip.svelte";
+import { usingKeyboard } from "./stores/usingKeyboard";
 export let forwardClick = false;
 let htmlFor = void 0;
 export { htmlFor as for };
@@ -62,11 +61,6 @@ $: {
     });
   }
 }
-let keyborg = createKeyborg(window);
-let usingKeyboard = keyborg.isNavigatingWithKeyboard();
-const keyborgHandler = (value) => {
-  usingKeyboard = value;
-};
 export const click = () => {
   fieldRef?.click();
 };
@@ -76,12 +70,6 @@ export const blur = () => {
 export const focus = (options) => {
   fieldRef?.focus(options);
 };
-onMount(() => {
-  keyborg.subscribe(keyborgHandler);
-  return () => {
-    keyborg.unsubscribe(keyborgHandler);
-  };
-});
 const onClick = () => {
   if (forwardClick) {
     targetRef?.click();
@@ -94,7 +82,7 @@ const onClick = () => {
   aria-disabled={targetDisabled}
   class="sterling-field"
   class:disabled={targetDisabled}
-  class:using-keyboard={usingKeyboard}
+  class:using-keyboard={$usingKeyboard}
   for={htmlFor}
   on:blur
   on:click

package/List.svelte

@@ -1,7 +1,7 @@
-<script>import { createKeyborg } from "keyborg";
-import { createEventDispatcher, onMount, setContext } from "svelte";
+<script>import { createEventDispatcher, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { LIST_CONTEXT_KEY } from "./List.constants";
+import { usingKeyboard } from "./stores/usingKeyboard";
 export let composed = false;
 export let disabled = false;
 export let horizontal = false;
@@ -43,11 +43,6 @@ export const scrollToSelectedItem = () => {
   const element = getSelectedItemElement();
   element?.scrollIntoView({ block: "nearest", inline: "nearest" });
 };
-let keyborg = createKeyborg(window);
-let usingKeyboard = keyborg.isNavigatingWithKeyboard();
-const keyborgHandler = (value) => {
-  usingKeyboard = value;
-};
 const isElementListItem = (candidate) => {
   return candidate && candidate.getAttribute("data-value") !== null && candidate.getAttribute("data-value") !== void 0 && candidate.getAttribute("role") === "listitem";
 };
@@ -113,12 +108,6 @@ export const selectLastItem = () => {
   }
   return false;
 };
-onMount(() => {
-  keyborg.subscribe(keyborgHandler);
-  return () => {
-    keyborg.unsubscribe(keyborgHandler);
-  };
-});
 const onClick = (event) => {
   if (!disabled) {
     let candidate = event.target;
@@ -197,7 +186,7 @@ A list of items where a single item can be selected.
   class:composed
   class:disabled
   class:horizontal
-  class:using-keyboard={usingKeyboard}
+  class:using-keyboard={$usingKeyboard}
   role="list"
   tabindex={0}
   on:blur
@@ -296,7 +285,6 @@ A list of items where a single item can be selected.
     position: relative;
     flex-direction: column;
     flex-wrap: nowrap;
-    width: fit-content;
   }
 
   .sterling-list.horizontal .container {

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
+  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;
     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;
-  }
 </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
@@ -95,6 +138,8 @@ setContext(MENU_BAR_CONTEXT_KEY, {
   on:wheel
   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;
 };