feat(component): add OverflowMenu

Closes #22

src/components/OverflowMenu/OverflowMenu.Story.svelte

@@ -0,0 +1,72 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import OverflowMenu from './OverflowMenu.svelte';
+  import OverflowMenuItem from './OverflowMenuItem.svelte';
+
+  let primaryFocus = true;
+</script>
+
+<Layout>
+  <div style="padding-left: 6rem">
+    {#if story === 'links'}
+      <OverflowMenu
+        {...$$props.menu}
+        on:close={({ detail }) => {
+          console.log('close', detail);
+        }}>
+        <OverflowMenuItem
+          {...$$props.menuItem}
+          href="https://ibm.com"
+          text="Option 1"
+          bind:primaryFocus />
+        <OverflowMenuItem
+          {...$$props.menuItem}
+          href="https://ibm.com"
+          text="Option 2 is an example of a really long string and how we recommend handling this"
+          requireTitle />
+        <OverflowMenuItem {...$$props.menuItem} href="https://ibm.com" text="Option 3" disabled />
+        <OverflowMenuItem {...$$props.menuItem} href="https://ibm.com" text="Option 4" />
+        <OverflowMenuItem
+          {...$$props.menuItem}
+          href="https://ibm.com"
+          text="Danger option"
+          danger />
+      </OverflowMenu>
+    {:else if story === 'trigger'}
+      <OverflowMenu
+        {...$$props.menu}
+        on:close={({ detail }) => {
+          console.log('close', detail);
+        }}
+        style="width: auto">
+        <div slot="menu" style="padding: 0 1rem">Menu</div>
+        <OverflowMenuItem {...$$props.menuItem} text="Option 1" bind:primaryFocus />
+        <OverflowMenuItem
+          {...$$props.menuItem}
+          text="Option 2 is an example of a really long string and how we recommend handling this"
+          requireTitle />
+        <OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
+        <OverflowMenuItem {...$$props.menuItem} text="Option 4" />
+        <OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
+      </OverflowMenu>
+    {:else}
+      <OverflowMenu
+        {...$$props.menu}
+        on:close={({ detail }) => {
+          console.log('close', detail);
+        }}>
+        <OverflowMenuItem {...$$props.menuItem} text="Option 1" bind:primaryFocus />
+        <OverflowMenuItem
+          {...$$props.menuItem}
+          text="Option 2 is an example of a really long string and how we recommend handling this"
+          requireTitle />
+        <OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
+        <OverflowMenuItem {...$$props.menuItem} text="Option 4" />
+        <OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
+      </OverflowMenu>
+    {/if}
+
+  </div>
+</Layout>

src/components/OverflowMenu/OverflowMenu.stories.js

@@ -0,0 +1,62 @@
+import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import Component from './OverflowMenu.Story.svelte';
+
+export default { title: 'OverflowMenu', decorators: [withKnobs] };
+
+const directions = {
+  'Bottom of the trigger button (bottom)': 'bottom',
+  'Top of the trigger button (top)': 'top'
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    menu: {
+      direction: select('Menu direction (direction)', directions, 'bottom'),
+      ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
+      iconDescription: text('Icon description (iconDescription)', ''),
+      flipped: boolean('Flipped (flipped)', false),
+      light: boolean('Light (light)', false)
+    },
+    menuItem: {
+      disabled: boolean('Disabled (disabled)', false),
+      requireTitle: boolean('Use hover over text for menu item (requireTitle)', false)
+    }
+  }
+});
+
+export const WithLinks = () => ({
+  Component,
+  props: {
+    story: 'links',
+    menu: {
+      direction: select('Menu direction (direction)', directions, 'bottom'),
+      ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
+      iconDescription: text('Icon description (iconDescription)', ''),
+      flipped: boolean('Flipped (flipped)', false),
+      light: boolean('Light (light)', false)
+    },
+    menuItem: {
+      disabled: boolean('Disabled (disabled)', false),
+      requireTitle: boolean('Use hover over text for menu item (requireTitle)', false)
+    }
+  }
+});
+
+export const CustomTrigger = () => ({
+  Component,
+  props: {
+    story: 'trigger',
+    menu: {
+      direction: select('Menu direction (direction)', directions, 'bottom'),
+      ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
+      iconDescription: text('Icon description (iconDescription)', ''),
+      flipped: boolean('Flipped (flipped)', false),
+      light: boolean('Light (light)', false)
+    },
+    menuItem: {
+      disabled: boolean('Disabled (disabled)', false),
+      requireTitle: boolean('Use hover over text for menu item (requireTitle)', false)
+    }
+  }
+});

src/components/OverflowMenu/OverflowMenu.svelte

@@ -0,0 +1,167 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let open = false;
+  export let direction = 'bottom';
+  export let flipped = false;
+  export let tabindex = '0';
+  export let id = Math.random();
+  export let iconDescription = 'Open and close list of options';
+  export let iconClass = undefined;
+  export let icon = OverflowMenuVertical16;
+  export let light = false;
+  export let menuOptionsClass = undefined;
+  export let style = undefined;
+
+  import { createEventDispatcher, setContext, afterUpdate } from 'svelte';
+  import { writable, derived } from 'svelte/store';
+  import OverflowMenuVertical16 from 'carbon-icons-svelte/lib/OverflowMenuVertical16';
+  import { cx } from '../../lib';
+  import { formatStyle } from './formatStyle';
+
+  const dispatch = createEventDispatcher();
+
+  let items = writable([]);
+  let currentId = writable(undefined);
+  let focusedId = writable(undefined);
+  let currentIndex = writable(-1);
+
+  let buttonRef = undefined;
+  let buttonWidth = undefined;
+  let menuRef = undefined;
+
+  setContext('OverflowMenu', {
+    focusedId,
+    add: ({ id, text, primaryFocus }) => {
+      items.update(_ => {
+        if (primaryFocus) {
+          currentIndex.set(_.length);
+        }
+
+        return [..._, { id, text, primaryFocus, index: _.length }];
+      });
+    },
+    update: id => {
+      currentId.set(id);
+    },
+    change: direction => {
+      // TODO: skip disabled
+      let index = $currentIndex + direction;
+
+      if (index < 0) {
+        index = $items.length - 1;
+      } else if (index >= $items.length) {
+        index = 0;
+      }
+
+      currentIndex.set(index);
+    }
+  });
+
+  afterUpdate(() => {
+    if ($currentId) {
+      const { index, text } = $items.filter(_ => _.id === $currentId)[0];
+      dispatch('close', { index, text });
+      open = false;
+    }
+
+    if (open) {
+      const { width, height } = buttonRef.getBoundingClientRect();
+
+      buttonWidth = width;
+
+      if ($currentIndex < 0) {
+        menuRef.focus();
+      }
+
+      if (flipped) {
+        menuRef.style.left = 'auto';
+        menuRef.style.right = 0;
+      }
+
+      if (direction === 'top') {
+        menuRef.style.top = 'auto';
+        menuRef.style.bottom = height + 'px';
+      }
+    }
+
+    if (!open) {
+      buttonRef.focus();
+      items.set([]);
+      currentId.set(undefined);
+    }
+  });
+
+  $: ariaLabel = $$props['aria-label'] || 'menu';
+  $: if ($items[$currentIndex]) {
+    focusedId.set($items[$currentIndex].id);
+  }
+  $: dynamicPseudoWidth = `.bx--overflow-menu-options.bx--overflow-menu-options:after {
+      width: ${buttonWidth ? buttonWidth + 'px' : '2rem'};
+    }`;
+  $: styles = formatStyle(dynamicPseudoWidth);
+</script>
+
+<svelte:head>
+  {@html styles}
+</svelte:head>
+
+<!-- TODO: extract utility component -->
+<svelte:body
+  on:click={({ target }) => {
+    if (buttonRef && buttonRef.contains(target)) {
+      return;
+    }
+    if (menuRef && !menuRef.contains(target)) {
+      open = false;
+    }
+  }} />
+
+<button
+  bind:this={buttonRef}
+  aria-haspopup
+  aria-expanded={open}
+  aria-label={ariaLabel}
+  class={cx('--overflow-menu', open && '--overflow-menu--open', light && '--overflow-menu--light', className)}
+  on:click
+  on:click={({ target }) => {
+    if (!(menuRef && menuRef.contains(target))) {
+      open = !open;
+    }
+  }}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keydown
+  on:keydown={event => {
+    if (open) {
+      if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(event.key)) {
+        event.preventDefault();
+      } else if (event.key === 'Escape') {
+        event.stopPropagation();
+        open = false;
+      }
+    }
+  }}
+  {id}
+  {tabindex}
+  {style}>
+  <slot name="menu">
+    <svelte:component
+      this={icon}
+      class={cx('--overflow-menu__icon', iconClass)}
+      aria-label={iconDescription}
+      title={iconDescription} />
+  </slot>
+  {#if open}
+    <ul
+      bind:this={menuRef}
+      role="menu"
+      tabindex="-1"
+      aria-label={ariaLabel}
+      data-floating-menu-direction={direction}
+      class={cx('--overflow-menu-options', flipped && '--overflow-menu--flip', open && '--overflow-menu-options--open', light && '--overflow-menu-options--light', menuOptionsClass)}>
+      <slot />
+    </ul>
+  {/if}
+</button>

src/components/OverflowMenu/OverflowMenuItem.svelte

@@ -0,0 +1,85 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let text = 'Provide text';
+  export let href = '';
+  export let hasDivider = false;
+  export let danger = false;
+  export let disabled = false;
+  export let primaryFocus = false;
+  export let requireTitle = true;
+  export let style = undefined;
+
+  import { getContext, afterUpdate } from 'svelte';
+  import { cx } from '../../lib';
+
+  const id = Math.random();
+  const { focusedId, add, update, change } = getContext('OverflowMenu');
+
+  let buttonRef = undefined;
+
+  add({ id, text, primaryFocus });
+
+  afterUpdate(() => {
+    if (primaryFocus) {
+      buttonRef.focus();
+    }
+  });
+
+  $: primaryFocus = $focusedId === id;
+  $: buttonProps = {
+    tabindex: '-1',
+    title: requireTitle ? text : undefined,
+    class: cx('--overflow-menu-options__btn'),
+    disabled: href ? undefined : disabled,
+    href: href ? href : undefined
+  };
+</script>
+
+<li
+  role="menuitem"
+  class={cx('--overflow-menu-options__option', hasDivider && '--overflow-menu--divider', danger && '--overflow-menu-options__option--danger', disabled && '--overflow-menu-options__option--disabled', className)}
+  {style}>
+  {#if href}
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <a
+      bind:this={buttonRef}
+      {...buttonProps}
+      on:click
+      on:click={() => {
+        update(id);
+      }}
+      on:keydown
+      on:keydown={({ key }) => {
+        if (key === 'ArrowDown') {
+          change(1);
+        } else if (key === 'ArrowUp') {
+          change(-1);
+        }
+      }}>
+      <slot>
+        <div class={cx('--overflow-menu-options__option-content')}>{text}</div>
+      </slot>
+    </a>
+  {:else}
+    <button
+      bind:this={buttonRef}
+      {...buttonProps}
+      on:click
+      on:click={() => {
+        update(id);
+      }}
+      on:keydown
+      on:keydown={({ key }) => {
+        if (key === 'ArrowDown') {
+          change(1);
+        } else if (key === 'ArrowUp') {
+          change(-1);
+        }
+      }}>
+      <slot>
+        <div class={cx('--overflow-menu-options__option-content')}>{text}</div>
+      </slot>
+    </button>
+  {/if}
+</li>

src/components/OverflowMenu/formatStyle.js

@@ -0,0 +1,7 @@
+// TODO: extract utility
+// TODO: refactor params to present nicer API
+function formatStyle(style) {
+  return ['<style>', style, '</style>'].join('');
+}
+
+export { formatStyle };

src/components/OverflowMenu/index.js

@@ -0,0 +1,4 @@
+import OverflowMenu from './OverflowMenu.svelte';
+
+export default OverflowMenu;
+export { default as OverflowMenuItem } from './OverflowMenuItem.svelte';

src/index.js

@@ -33,6 +33,7 @@ import {
   NotificationTextDetails
 } from './components/Notification';
 import OrderedList from './components/OrderedList';
+import OverflowMenu, { OverflowMenuItem } from './components/OverflowMenu';
 import Pagination, { PaginationSkeleton } from './components/Pagination';
 import ProgressIndicator, {
   ProgressIndicatorSkeleton,
@@ -117,6 +118,8 @@ export {
   NotificationIcon,
   NotificationTextDetails,
   OrderedList,
+  OverflowMenu,
+  OverflowMenuItem,
   Pagination,
   PaginationSkeleton,
   PasswordInput,

src/internal/ui/Layout.svelte

@@ -3,6 +3,7 @@
     padding: 3em;
     display: flex;
     flex-direction: column;
+    min-height: 100vh;
   }
 </style>