@geoffcox/sterling-svelte 0.0.15 → 0.0.16

package/@types/clickOutside.d.ts

@@ -1,5 +1,11 @@
 declare namespace svelte.JSX {
-	interface DOMAttributes<T> {
-		onclick_outside?: (e: CustomEvent) => void;
-	}
+  type ClickOutsideEventDetail = {
+    mouseEvent: MouseEvent;
+  };
+
+  type ClickOutsideEvent = CustomEvent<ClickOutsideEventDetail>;
+
+  interface DOMAttributes<T> {
+    onclick_outside?: (e: ClickOutsideEvent) => void;
+  }
 }

package/buttons/MenuButton.svelte

@@ -0,0 +1,102 @@
+<script>import { v4 as uuid } from "uuid";
+import { createEventDispatcher, getContext, setContext } from "svelte";
+import { writable } from "svelte/store";
+import Button from "./Button.svelte";
+import Menu from "../containers/Menu.svelte";
+import { menuItemContextKey } from "../containers/Menus.constants";
+import { focusFirstChild, focusNextChild, focusPreviousChild } from "../containers/Menus.utils";
+export let menuItemId;
+export let open = false;
+export let shape = "rounded";
+export let variant = "regular";
+const instanceId = uuid();
+let reference;
+$:
+  menuId = `${menuItemId}-menu-${instanceId}`;
+$:
+  hasChildren = $$slots.items;
+const children = writable([]);
+const dispatch = createEventDispatcher();
+const raiseClose = (menuItemId2) => {
+  dispatch("close", { menuItemId: menuItemId2 });
+};
+const raiseOpen = (menuItemId2) => {
+  dispatch("open", { menuItemId: menuItemId2 });
+};
+const raiseSelect = (menuItemId2) => {
+  dispatch("select", { menuItemId: menuItemId2 });
+};
+const onClick = () => {
+  open = !open;
+  if (open) {
+    setTimeout(() => focusFirstChild($children), 10);
+  }
+};
+setContext(menuItemContextKey, {
+  rootMenuItemId: menuItemId,
+  depth: 1,
+  register: (menuItem) => {
+    children.set([...$children, menuItem]);
+  },
+  unregister: (menuItem) => {
+    children.set($children.filter((x) => x.id !== menuItem.id));
+  },
+  closeMenu: (recursive) => {
+    open = false;
+  },
+  focusPrevious: (fromMenuItemId) => focusPreviousChild($children, fromMenuItemId),
+  focusNext: (fromMenuItemId) => focusNextChild($children, fromMenuItemId),
+  onOpen: raiseOpen,
+  onClose: raiseClose,
+  onSelect: raiseSelect
+});
+</script>
+
+<!--
+      @component
+      A Button that displays a context menu when clicked.
+  -->
+<Button
+  aria-controls={menuId}
+  aria-expanded={open}
+  aria-haspopup={hasChildren}
+  aria-owns={menuId}
+  data-menu-item-id={menuItemId}
+  data-root-menu-item-id={menuItemId}
+  {variant}
+  {shape}
+  on:blur
+  on:click
+  on:click={onClick}
+  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}
+>
+  <div bind:this={reference}>
+    <slot />
+    <Menu id={menuId} {reference} {open}>
+      <slot name="items" />
+    </Menu>
+  </div>
+</Button>

package/buttons/MenuButton.svelte.d.ts

@@ -0,0 +1,54 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ButtonShape, ButtonVariant } from './Button.types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        menuItemId: string;
+        open?: boolean | undefined;
+        shape?: ButtonShape | undefined;
+        variant?: ButtonVariant | 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;
+        close: CustomEvent<any>;
+        open: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        items: {};
+    };
+};
+export type MenuButtonProps = typeof __propDef.props;
+export type MenuButtonEvents = typeof __propDef.events;
+export type MenuButtonSlots = typeof __propDef.slots;
+/** A Button that displays a context menu when clicked. */
+export default class MenuButton extends SvelteComponentTyped<MenuButtonProps, MenuButtonEvents, MenuButtonSlots> {
+}
+export {};

package/clickOutside.js

@@ -2,7 +2,9 @@ export const clickOutside = (node) => {
     const handleClick = (event) => {
         const targetNode = event?.target;
         if (targetNode && !node.contains(targetNode)) {
-            node.dispatchEvent(new CustomEvent('click_outside'));
+            node.dispatchEvent(new CustomEvent('click_outside', {
+                detail: { mouseEvent: event }
+            }));
         }
     };
     document.addEventListener('click', handleClick, true);

package/containers/List.svelte

@@ -122,7 +122,6 @@ A list of items where a single item can be selected.
     on:focus
     on:focusin
     on:focusout
-    on:keydown={onKeydown}
     on:keydown
     on:keypress
     on:keyup
@@ -136,6 +135,7 @@ A list of items where a single item can be selected.
     on:scroll
     on:wheel
     on:paste
+    on:keydown={onKeydown}
     {...$$restProps}
   >
     {#each items as item, index (item)}

package/containers/Menu.svelte

@@ -0,0 +1,100 @@
+<script>import { getContext } from "svelte";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { portal } from "../portal";
+import { menuItemContextKey } from "./Menus.constants";
+export let reference;
+export let open = false;
+let menuRef;
+let menuPosition = { x: 0, y: 0 };
+const { rootMenuItemId, depth = 0 } = getContext(menuItemContextKey) || {};
+const ensurePortalHost = () => {
+  let host = document.querySelector("#SterlingMenuPortal");
+  if (!host) {
+    host = document.createElement("div");
+    host.id = "SterlingMenuPortal";
+    host.style.overflow = "visible";
+    document.body.append(host);
+  }
+  return host;
+};
+const portalTarget = ensurePortalHost();
+const menuPlacement = depth > 1 ? "right-start" : "bottom-start";
+const middleware = [offset({ mainAxis: -2 }), flip(), shift({ padding: 0 })];
+const computeMenuPosition = async () => {
+  if (reference && menuRef) {
+    menuPosition = await computePosition(reference, menuRef, {
+      placement: menuPlacement,
+      middleware
+    });
+  } else {
+    menuPosition = { x: 0, y: 0 };
+  }
+};
+let cleanupAutoUpdate = () => {
+};
+const autoUpdateMenuPosition = () => {
+  cleanupAutoUpdate();
+  if (reference && menuRef) {
+    cleanupAutoUpdate = autoUpdate(reference, menuRef, computeMenuPosition);
+  }
+};
+$:
+  open, reference, menuRef, autoUpdateMenuPosition();
+</script>
+
+{#if open}
+  <div class="portal" data-root-menu-id={rootMenuItemId} use:portal={{ target: portalTarget }}>
+    <div
+      bind:this={menuRef}
+      class="menu"
+      class:open
+      {...$$restProps}
+      style="left:{menuPosition.x}px; top:{menuPosition.y}px"
+    >
+      {#if $$slots.default}
+        <!-- TODO: Remove this extra children div.  Probably not needed -->
+        <div class="children" role="menu">
+          <slot />
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .portal {
+    position: relative;
+    overflow: visible;
+  }
+
+  .menu {
+    background-color: var(--Common__background-color);
+    border-color: var(--Common__border-color);
+    border-radius: var(--Common__border-radius);
+    border-style: var(--Common__border-style);
+    border-width: var(--Common__border-width);
+    box-sizing: border-box;
+    position: absolute;
+    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
+    overflow: hidden;
+    width: max-content;
+    height: fit-content;
+    z-index: 1;
+    top: 0;
+    left: 0;
+  }
+
+  .menu.open {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+
+  .children {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    row-gap: calc(2 * var(--Common__outline-width));
+    padding: 0.25em;
+  }
+</style>

package/containers/Menu.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        reference: HTMLElement;
+        open?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};

package/containers/MenuBar.svelte

@@ -0,0 +1,97 @@
+<script>import { createEventDispatcher, setContext } from "svelte";
+import { menuBarContextKey, menuItemContextKey } from "./Menus.constants";
+import { writable } from "svelte/store";
+const dispatch = createEventDispatcher();
+const raiseClose = (menuItemId) => {
+  dispatch("close", { menuItemId });
+};
+const raiseOpen = (menuItemId) => {
+  dispatch("open", { menuItemId });
+};
+const raiseSelect = (menuItemId) => {
+  dispatch("select", { menuItemId });
+};
+const children = writable([]);
+const openPreviousChild = (fromMenuItemId) => {
+  const index = $children?.findIndex((menuItem) => menuItem.id === fromMenuItemId);
+  if (index !== -1) {
+    const focusIndex = index === 0 ? $children.length - 1 : index - 1;
+    $children[focusIndex].focus();
+    $children[focusIndex].open();
+  }
+};
+const openNextChild = (fromMenuItemId) => {
+  const index = $children?.findIndex((menuItem) => menuItem.id === fromMenuItemId);
+  if (index !== -1) {
+    const focusIndex = (index + 1) % $children.length;
+    $children[focusIndex].focus();
+    $children[focusIndex].open();
+  }
+};
+const focusChild = (menuItemId) => {
+  const focusIndex = $children?.findIndex((menuItem) => menuItem.id === menuItemId);
+  if (focusIndex !== -1) {
+    $children[focusIndex].focus();
+  }
+};
+setContext(menuItemContextKey, {
+  register: (menuItem) => {
+    children.set([...$children, menuItem]);
+  },
+  unregister: (menuItem) => {
+    children.set($children.filter((x) => x.id !== menuItem.id));
+  },
+  closeMenu: (recursive) => {
+  },
+  focusPrevious: openPreviousChild,
+  focusNext: openNextChild,
+  onClose: raiseClose,
+  onOpen: raiseOpen,
+  onSelect: raiseSelect
+});
+setContext(menuBarContextKey, {
+  openPreviousMenu: openPreviousChild,
+  openNextMenu: openNextChild
+});
+</script>
+
+<div
+  class="sterling-menu-bar"
+  role="menubar"
+  on:blur
+  on:click
+  on:copy
+  on:cut
+  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:scroll
+  on:wheel
+  on:paste
+  {...$$restProps}
+>
+  <slot />
+</div>
+
+<style>
+  .sterling-menu-bar {
+    background-color: transparent;
+    align-items: center;
+    align-content: stretch;
+    display: flex;
+    gap: 1em;
+    justify-content: flex-start;
+    justify-items: flex-start;
+  }
+</style>

package/containers/MenuBar.svelte.d.ts

@@ -0,0 +1,43 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        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;
+        scroll: Event;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+        close: CustomEvent<any>;
+        open: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MenuBarProps = typeof __propDef.props;
+export type MenuBarEvents = typeof __propDef.events;
+export type MenuBarSlots = typeof __propDef.slots;
+export default class MenuBar extends SvelteComponentTyped<MenuBarProps, MenuBarEvents, MenuBarSlots> {
+}
+export {};