@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/ListItem.svelte.d.ts

@@ -0,0 +1,51 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        disabled?: boolean | undefined;
+        value: string;
+    };
+    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: {
+        default: {
+            disabled: boolean;
+            horizontal: import("svelte/store").Readable<boolean>;
+            selected: boolean;
+            value: string;
+        };
+    };
+};
+export type ListItemProps = typeof __propDef.props;
+export type ListItemEvents = typeof __propDef.events;
+export type ListItemSlots = typeof __propDef.slots;
+export default class ListItem extends SvelteComponentTyped<ListItemProps, ListItemEvents, ListItemSlots> {
+}
+export {};

package/{containers/Menu.svelte → Menu.svelte}

@@ -1,12 +1,12 @@
-<script>import { getContext } from "svelte";
+<script>import { getContext, onMount } from "svelte";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
-import { portal } from "../portal";
+import { portal } from "./actions/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 { rootValue, depth = 0 } = getContext(menuItemContextKey) || {};
 const ensurePortalHost = () => {
   let host = document.querySelector("#SterlingMenuPortal");
   if (!host) {
@@ -18,8 +18,16 @@ const ensurePortalHost = () => {
   return host;
 };
 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 })];
+const middleware = [
+  offset({ mainAxis: -2 }),
+  flip(),
+  shift({ padding: 0, mainAxis: true, crossAxis: true })
+];
 const computeMenuPosition = async () => {
   if (reference && menuRef) {
     menuPosition = await computePosition(reference, menuRef, {
@@ -39,40 +47,49 @@ const autoUpdateMenuPosition = () => {
   }
 };
 $:
-  open, reference, menuRef, autoUpdateMenuPosition();
+  menuRef, reference, autoUpdateMenuPosition();
+$:
+  open, bodyHeight, computeMenuPosition();
+onMount(() => {
+  resizeObserver.observe(document.body);
+  return () => {
+    resizeObserver.unobserve(document.body);
+  };
+});
 </script>
 
 {#if open}
-  <div class="portal" data-root-menu-id={rootMenuItemId} use:portal={{ target: portalTarget }}>
+  <div
+    class="sterling-menu-portal"
+    data-root-value={rootValue}
+    use:portal={{ target: portalTarget }}
+  >
     <div
       bind:this={menuRef}
-      class="menu"
+      class="sterling-menu"
+      role="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}
+      <slot />
     </div>
   </div>
 {/if}
 
 <style>
-  .portal {
+  .sterling-menu-portal {
     position: relative;
     overflow: visible;
+    background: rgba(255, 0, 0, 0.1);
   }
 
-  .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);
+  .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-sizing: border-box;
     position: absolute;
     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
@@ -82,19 +99,17 @@ $:
     z-index: 1;
     top: 0;
     left: 0;
-  }
 
-  .menu.open {
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+    grid-template-rows: auto;
+    row-gap: calc(2 * var(--stsv-Common__outline-width));
+    padding: 0.25em;
   }
 
-  .children {
+  .sterling-menu.open {
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    row-gap: calc(2 * var(--Common__outline-width));
-    padding: 0.25em;
+    grid-template-rows: 1fr;
   }
 </style>

package/{containers/MenuBar.svelte → MenuBar.svelte}

@@ -2,34 +2,34 @@
 import { menuBarContextKey, menuItemContextKey } from "./Menus.constants";
 import { writable } from "svelte/store";
 const dispatch = createEventDispatcher();
-const raiseClose = (menuItemId) => {
-  dispatch("close", { menuItemId });
+const raiseClose = (value) => {
+  dispatch("close", { value });
 };
-const raiseOpen = (menuItemId) => {
-  dispatch("open", { menuItemId });
+const raiseOpen = (value) => {
+  dispatch("open", { value });
 };
-const raiseSelect = (menuItemId) => {
-  dispatch("select", { menuItemId });
+const raiseSelect = (value) => {
+  dispatch("select", { value });
 };
 const children = writable([]);
-const openPreviousChild = (fromMenuItemId) => {
-  const index = $children?.findIndex((menuItem) => menuItem.id === fromMenuItemId);
+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 openNextChild = (fromMenuItemId) => {
-  const index = $children?.findIndex((menuItem) => menuItem.id === fromMenuItemId);
+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 focusChild = (menuItemId) => {
-  const focusIndex = $children?.findIndex((menuItem) => menuItem.id === menuItemId);
+const focusChild = (value) => {
+  const focusIndex = $children?.findIndex((menuItem) => menuItem.value === value);
   if (focusIndex !== -1) {
     $children[focusIndex].focus();
   }
@@ -39,7 +39,7 @@ setContext(menuItemContextKey, {
     children.set([...$children, menuItem]);
   },
   unregister: (menuItem) => {
-    children.set($children.filter((x) => x.id !== menuItem.id));
+    children.set($children.filter((x) => x.value !== menuItem.value));
   },
   closeMenu: (recursive) => {
   },

package/{buttons/MenuButton.svelte → MenuButton.svelte}

@@ -2,29 +2,29 @@
 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;
+import Menu from "./Menu.svelte";
+import { menuItemContextKey } from "./Menus.constants";
+import { focusFirstChild, focusNextChild, focusPreviousChild } from "./Menus.utils";
 export let open = false;
 export let shape = "rounded";
+export let value;
 export let variant = "regular";
 const instanceId = uuid();
 let reference;
 $:
-  menuId = `${menuItemId}-menu-${instanceId}`;
+  menuId = `${value}-menu-${instanceId}`;
 $:
   hasChildren = $$slots.items;
 const children = writable([]);
 const dispatch = createEventDispatcher();
-const raiseClose = (menuItemId2) => {
-  dispatch("close", { menuItemId: menuItemId2 });
+const raiseClose = (value2) => {
+  dispatch("close", { value: value2 });
 };
-const raiseOpen = (menuItemId2) => {
-  dispatch("open", { menuItemId: menuItemId2 });
+const raiseOpen = (value2) => {
+  dispatch("open", { value: value2 });
 };
-const raiseSelect = (menuItemId2) => {
-  dispatch("select", { menuItemId: menuItemId2 });
+const raiseSelect = (value2) => {
+  dispatch("select", { value: value2 });
 };
 const onClick = () => {
   open = !open;
@@ -33,19 +33,19 @@ const onClick = () => {
   }
 };
 setContext(menuItemContextKey, {
-  rootMenuItemId: menuItemId,
+  rootValue: value,
   depth: 1,
   register: (menuItem) => {
     children.set([...$children, menuItem]);
   },
   unregister: (menuItem) => {
-    children.set($children.filter((x) => x.id !== menuItem.id));
+    children.set($children.filter((x) => x.value !== menuItem.value));
   },
   closeMenu: (recursive) => {
     open = false;
   },
-  focusPrevious: (fromMenuItemId) => focusPreviousChild($children, fromMenuItemId),
-  focusNext: (fromMenuItemId) => focusNextChild($children, fromMenuItemId),
+  focusPrevious: (currentValue) => focusPreviousChild($children, currentValue),
+  focusNext: (currentValue) => focusNextChild($children, currentValue),
   onOpen: raiseOpen,
   onClose: raiseClose,
   onSelect: raiseSelect
@@ -61,8 +61,8 @@ setContext(menuItemContextKey, {
   aria-expanded={open}
   aria-haspopup={hasChildren}
   aria-owns={menuId}
-  data-menu-item-id={menuItemId}
-  data-root-menu-item-id={menuItemId}
+  data-value={value}
+  data-root-value={value}
   {variant}
   {shape}
   on:blur

package/{buttons/MenuButton.svelte.d.ts → MenuButton.svelte.d.ts}

@@ -3,9 +3,9 @@ import type { ButtonShape, ButtonVariant } from './Button.types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        menuItemId: string;
         open?: boolean | undefined;
         shape?: ButtonShape | undefined;
+        value: string;
         variant?: ButtonVariant | undefined;
     };
     events: {

package/{containers/MenuItem.svelte → MenuItem.svelte}

@@ -2,7 +2,7 @@
 import { v4 as uuid } from "uuid";
 import { getContext, onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
-import { clickOutside } from "../clickOutside";
+import { clickOutside } from "./actions/clickOutside";
 import { afterUpdate, createEventDispatcher } from "svelte/internal";
 import MenuItemDisplay from "./MenuItemDisplay.svelte";
 import { menuBarContextKey, menuItemContextKey } from "./Menus.constants";
@@ -17,11 +17,11 @@ export let checked = false;
 export let composed = false;
 export let disabled = false;
 export let open = false;
-export let menuItemId;
+export let value;
 export let role = "menuitem";
 export let text = void 0;
 const {
-  rootMenuItemId = menuItemId,
+  rootValue = value,
   depth = 0,
   register = void 0,
   unregister = void 0,
@@ -32,24 +32,12 @@ const {
   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}`;
+  displayId = `${value}-display-${instanceId}`;
 $:
-  menuId = `${menuItemId}-menu-${instanceId}`;
+  menuId = `${value}-menu-${instanceId}`;
 let menuItemRef;
 const children = writable([]);
 let mounted = false;
@@ -57,28 +45,28 @@ let prevOpen = open;
 $:
   hasChildren = $$slots.default;
 const dispatch = createEventDispatcher();
-const raiseClose = (menuItemId2) => {
-  dispatch("close", { menuItemId: menuItemId2 });
-  onClose?.(menuItemId2);
+const raiseClose = (value2) => {
+  dispatch("close", { value: value2 });
+  onClose?.(value2);
 };
-const raiseOpen = (menuItemId2) => {
-  dispatch("open", { menuItemId: menuItemId2 });
-  onOpen?.(menuItemId2);
+const raiseOpen = (value2) => {
+  dispatch("open", { value: value2 });
+  onOpen?.(value2);
 };
 $: {
   if (hasChildren && open !== prevOpen) {
-    open ? raiseOpen(menuItemId) : raiseClose(menuItemId);
+    open ? raiseOpen(value) : raiseClose(value);
   }
   prevOpen = open;
 }
-const raiseSelect = (menuItemId2) => {
-  dispatch("select", { menuItemId: menuItemId2 });
-  onSelect?.(menuItemId2);
+const raiseSelect = (value2) => {
+  dispatch("select", { value: value2 });
+  onSelect?.(value2);
 };
 let keyborg = createKeyborg(window);
 let usingKeyboard = keyborg.isNavigatingWithKeyboard();
-const keyborgHandler = (value) => {
-  usingKeyboard = value;
+const keyborgHandler = (value2) => {
+  usingKeyboard = value2;
 };
 const autoFocusFirstChild = (open2, insideMenu) => {
   if (open2 && insideMenu) {
@@ -91,7 +79,7 @@ onMount(() => {
   mounted = true;
   keyborg.subscribe(keyborgHandler);
   const menuItemSelf = {
-    id: menuItemId,
+    value,
     open: () => {
       open = true;
     },
@@ -121,7 +109,7 @@ const onKeyDown = (event) => {
           event.preventDefault();
           return false;
         } else if (depth > 0) {
-          focusNext?.(menuItemId);
+          focusNext?.(value);
           event.preventDefault();
           return false;
         }
@@ -130,7 +118,7 @@ const onKeyDown = (event) => {
         if (depth < 2) {
           open = false;
           closeMenu?.(true);
-          openPreviousMenu?.(rootMenuItemId);
+          openPreviousMenu?.(rootValue);
         } else {
           closeMenu?.();
         }
@@ -143,7 +131,7 @@ const onKeyDown = (event) => {
         } else {
           open = false;
           closeMenu?.(true);
-          openNextMenu?.(rootMenuItemId);
+          openNextMenu?.(rootValue);
         }
         event.preventDefault();
         return false;
@@ -154,7 +142,7 @@ const onKeyDown = (event) => {
           event.preventDefault();
           return false;
         } else if (depth > 0) {
-          focusPrevious?.(menuItemId);
+          focusPrevious?.(value);
           event.preventDefault();
           return false;
         }
@@ -179,7 +167,7 @@ const onMenuItemClick = (event) => {
       event.stopPropagation();
       return false;
     } else {
-      raiseSelect(menuItemId);
+      raiseSelect(value);
       closeMenu?.(true);
     }
   }
@@ -190,7 +178,7 @@ const onClickOutside = (event) => {
   } = event;
   let element = mouseEvent.target;
   while (element) {
-    if (element.getAttribute("data-root-menu-item-id") === rootMenuItemId) {
+    if (element.getAttribute("data-root-value") === rootValue) {
       return;
     }
     element = element.parentElement;
@@ -198,13 +186,13 @@ const onClickOutside = (event) => {
   closeMenu?.(true);
 };
 setContext(menuItemContextKey, {
-  rootMenuItemId,
+  rootValue,
   depth: depth + 1,
   register: (menuItem) => {
     children.set([...$children, menuItem]);
   },
   unregister: (menuItem) => {
-    children.set($children.filter((x) => x.id !== menuItem.id));
+    children.set($children.filter((x) => x.value !== menuItem.value));
   },
   closeMenu: (recursive) => {
     open = false;
@@ -215,8 +203,8 @@ setContext(menuItemContextKey, {
       menuItemRef?.focus();
     }
   },
-  focusPrevious: (fromMenuItemId) => focusPreviousChild($children, fromMenuItemId),
-  focusNext: (fromMenuItemId) => focusNextChild($children, fromMenuItemId),
+  focusPrevious: (currentValue) => focusPreviousChild($children, currentValue),
+  focusNext: (currentValue) => focusNextChild($children, currentValue),
   onOpen: raiseOpen,
   onClose: raiseClose,
   onSelect: raiseSelect
@@ -234,8 +222,8 @@ setContext(menuItemContextKey, {
   class:composed
   class:disabled
   class:using-keyboard={usingKeyboard}
-  data-menu-item-id={menuItemId}
-  data-root-menu-item-id={rootMenuItemId}
+  data-value={value}
+  data-root-value={rootValue}
   {role}
   tabindex={0}
   type="button"
@@ -272,7 +260,7 @@ setContext(menuItemContextKey, {
   {...$$restProps}
 >
   <div class="item" id={displayId}>
-    <slot name="item" {checked} {disabled} {hasChildren} {depth} {menuItemId} {open} {role} {text}>
+    <slot name="item" {checked} {disabled} {hasChildren} {depth} {value} {open} {role} {text}>
       <MenuItemDisplay {checked} hasChildren={depth > 0 && hasChildren} menuItemRole={role}
         >{text}</MenuItemDisplay
       >
@@ -289,11 +277,11 @@ setContext(menuItemContextKey, {
   .sterling-menu-item {
     background-color: transparent;
     border-color: transparent;
-    border-radius: var(--Button__border-radius);
+    border-radius: var(--stsv-Button__border-radius);
     border-style: none;
     border-width: 0;
     box-sizing: border-box;
-    color: var(--Common__color);
+    color: var(--stsv-Common__color);
     cursor: pointer;
     font: inherit;
     margin: 0;
@@ -309,8 +297,8 @@ setContext(menuItemContextKey, {
   }
 
   .sterling-menu-item:hover {
-    background-color: var(--Button__background-color--hover);
-    color: var(--Button__color--hover);
+    background-color: var(--stsv-Button__background-color--hover);
+    color: var(--stsv-Button__color--hover);
   }
 
   .sterling-menu-item:focus {
@@ -318,19 +306,19 @@ setContext(menuItemContextKey, {
   }
 
   .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);
+    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(--Input__background-color--selected);
+    background-color: var(--stsv-Input__background-color--selected);
   }
 
   .sterling-menu-item.disabled {
-    color: var(--Input__color--disabled);
+    color: var(--stsv-Common__color--disabled);
   }
 
   .sterling-menu-item.composed,

package/{containers/MenuItem.svelte.d.ts → MenuItem.svelte.d.ts}

@@ -6,7 +6,7 @@ declare const __propDef: {
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         open?: boolean | undefined;
-        menuItemId: string;
+        value: string;
         role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
         text?: string | undefined;
     };
@@ -45,7 +45,7 @@ declare const __propDef: {
             disabled: boolean;
             hasChildren: boolean;
             depth: number;
-            menuItemId: string;
+            value: string;
             open: boolean;
             role: "menuitem" | "menuitemcheckbox" | "menuitemradio";
             text: string | undefined;

package/{containers/MenuSeparator.svelte → MenuSeparator.svelte}

@@ -35,8 +35,8 @@ A styled line to visually separate menu items in a menu.
 
 <style>
   .sterling-menu-item-separator {
-    height: var(--Common__border-width);
-    background-color: var(--Common__border-color);
+    height: var(--stsv-Common__border-width);
+    background-color: var(--stsv-Common__border-color);
     margin: 0.1em 0;
   }
 </style>

package/Menus.types.d.ts

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

package/{containers/Menus.utils.d.ts → Menus.utils.d.ts}

@@ -1,5 +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 focusPreviousChild: (children: MenuItemRegistration[], currentValue: string) => void;
+export declare const focusNextChild: (children: MenuItemRegistration[], currentValue: string) => void;
 export declare const focusFirstChild: (children: MenuItemRegistration[]) => void;
 export declare const focusLastChild: (children: MenuItemRegistration[]) => void;

package/{containers/Menus.utils.js → Menus.utils.js}

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