@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/MenuButton.svelte

@@ -1,87 +1,95 @@
-<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 { idGenerator } from "./idGenerator";
-import Popover from "./Popover.svelte";
-import { clickOutside } from "./actions/clickOutside";
+<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 { idGenerator } from './idGenerator';
+import Popover from './Popover.svelte';
+import { clickOutside } from './actions/clickOutside';
+// ----- Props ----- //
+/** When true, the menu is open. */
 export let open = false;
+/** The value uniquely identifying this menu button as the root of the menu hierarchy. */
 export let value;
-const instanceId = idGenerator.nextId("MenuButton");
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
+const instanceId = idGenerator.nextId('MenuButton');
 let buttonRef;
 let reference;
 let menuRef;
 let prevOpen = open;
-$:
-  menuId = `${value}-menu-${instanceId}`;
-$:
-  hasChildren = $$slots.items;
+$: menuId = `${value}-menu-${instanceId}`;
+$: hasChildren = $$slots.items;
 const openValues = writable([]);
 $: {
-  open = $openValues.length > 0;
+    open = $openValues.length > 0;
 }
+// ----- Events ----- //
 const dispatch = createEventDispatcher();
-const raiseClose = (value2) => {
-  dispatch("close", { value: value2 });
+const raiseClose = (value) => {
+    dispatch('close', { value });
 };
-const raiseOpen = (value2) => {
-  dispatch("open", { value: value2 });
+const raiseOpen = (value) => {
+    dispatch('open', { value });
 };
-const raiseSelect = (value2) => {
-  dispatch("select", { value: value2 });
+const raiseSelect = (value) => {
+    dispatch('select', { value });
 };
+// ----- Methods ----- //
 export const click = () => {
-  buttonRef?.click();
+    buttonRef?.click();
 };
 export const blur = () => {
-  buttonRef?.blur();
+    buttonRef?.blur();
 };
 export const focus = (options) => {
-  buttonRef?.focus(options);
+    buttonRef?.focus(options);
 };
+// ----- Event Handlers ----- //
 const onClick = async () => {
-  if (!open) {
-    openValues.set(["menu-button"]);
-    await tick();
-    menuRef?.focusFirstMenuItem();
-  } else {
-    open = false;
-    openValues.set([]);
-  }
+    if (!open) {
+        openValues.set(['menu-button']);
+        await tick();
+        menuRef?.focusFirstMenuItem();
+    }
+    else {
+        open = false;
+        openValues.set([]);
+    }
 };
 $: {
-  if (!open && open !== prevOpen) {
-    focus();
-  }
-  prevOpen = open;
+    if (!open && open !== prevOpen) {
+        focus();
+    }
+    prevOpen = open;
 }
+// ----- Event Handlers ----- //
 const closeAllMenus = () => {
-  openValues.set([]);
+    openValues.set([]);
 };
 const onClickOutside = (event) => {
-  const {
-    detail: { mouseEvent }
-  } = event;
-  let element = mouseEvent.target;
-  while (element) {
-    if (element.getAttribute("data-root-value") === value) {
-      return;
+    const { detail: { mouseEvent } } = event;
+    let element = mouseEvent.target;
+    while (element) {
+        if (element.getAttribute('data-root-value') === value) {
+            return;
+        }
+        element = element.parentElement;
     }
-    element = element.parentElement;
-  }
-  closeAllMenus?.();
+    closeAllMenus?.();
 };
+// ----- Set Context ----- //
 setContext(MENU_ITEM_CONTEXT_KEY, {
-  depth: 1,
-  openValues,
-  rootValue: value,
-  closeContainingMenu: () => {
-    open = false;
-  },
-  onOpen: raiseOpen,
-  onClose: raiseClose,
-  onSelect: raiseSelect
+    depth: 1,
+    openValues,
+    rootValue: value,
+    closeContainingMenu: () => {
+        open = false;
+    },
+    onOpen: raiseOpen,
+    onClose: raiseClose,
+    onSelect: raiseSelect
 });
 </script>
 
@@ -97,6 +105,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   aria-owns={menuId}
   data-value={value}
   data-root-value={value}
+  variant={`sterling-menu-button ${variant}`}
   on:blur
   on:click
   on:click={onClick}
@@ -132,27 +141,11 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   {...$$restProps}
 >
   <div class="reference" bind:this={reference} use:clickOutside on:click_outside={onClickOutside}>
-    <slot shape={$$restProps.shape} variant={$$restProps.variant} />
+    <slot {open} {value} {variant} />
   </div>
-  <Popover {reference} placement="bottom-start" {open}>
+  <Popover {reference} {open}>
     <Menu bind:this={menuRef} id={menuId} {reference} {open}>
-      <slot name="items" />
+      <slot name="items" {variant} />
     </Menu>
   </Popover>
 </Button>
-
-<style>
-  .reference {
-    align-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: center;
-    justify-items: center;
-    column-gap: 0.25em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>

package/MenuButton.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         open?: boolean | undefined;
         value: string;
+        variant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -48,10 +49,13 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            shape: any;
-            variant: any;
+            open: boolean;
+            value: string;
+            variant: string;
+        };
+        items: {
+            variant: string;
         };
-        items: {};
     };
 };
 export type MenuButtonProps = typeof __propDef.props;