fetch upstream

src/components/Dropdown/Dropdown.Skeleton.svelte

@@ -0,0 +1,20 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let inline = false;
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+</script>
+
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--skeleton', '--dropdown-v2', '--list-box', '--form-item', inline && '--list-box--inline', className)}
+  {style}>
+  <div role="button" class={cx('--list-box__field')}>
+    <span class={cx('--list-box__label')} />
+  </div>
+</div>

src/components/Dropdown/Dropdown.Story.svelte

@@ -0,0 +1,49 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Button from '../Button';
+  import Dropdown from './Dropdown.svelte';
+  import DropdownSkeleton from './Dropdown.Skeleton.svelte';
+
+  let items = [
+    { id: 'option-0', text: 'Option 1' },
+    { id: 'option-1', text: 'Option 2' },
+    { id: 'option-2', text: 'Option 3' },
+    { id: 'option-3', text: 'Option 4' }
+  ];
+
+  let selectedIndex = -1;
+</script>
+
+<Layout>
+
+  {#if story === 'skeleton'}
+    <div style="width: 300px">
+      <DropdownSkeleton />
+      &nbsp;
+      <DropdownSkeleton inline />
+    </div>
+  {:else}
+    <p>Currently, this component does not support items as slots.</p>
+    <p>
+      <code>items</code>
+      must be an array of objects; mandatory fields are `id` and `text`.
+    </p>
+    <pre style="margin-top: 1rem;">
+      <code>{'items = Array<{ id: string; text: string; }>'}</code>
+    </pre>
+    <div style="margin-top: 2rem; margin-bottom: 2rem;">
+      <Button
+        size="small"
+        on:click={() => {
+          selectedIndex = selectedIndex > -1 ? -1 : 1;
+        }}>
+        {selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
+      </Button>
+    </div>
+    <div style="width: 300px">
+      <Dropdown {...$$props} bind:selectedIndex {items} />
+    </div>
+  {/if}
+</Layout>

src/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,34 @@
+import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import Component from './Dropdown.Story.svelte';
+
+export default { title: 'Dropdown', decorators: [withKnobs] };
+
+const types = {
+  'Default (default)': 'default',
+  'Inline (inline)': 'inline'
+};
+
+const sizes = {
+  'Extra large size (xl)': 'xl',
+  'Regular size (lg)': '',
+  'Small size (sm)': 'sm'
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
+    type: select('Dropdown type (type)', types, 'default'),
+    size: select('Field size (size)', sizes, '') || undefined,
+    label: text('Label (label)', 'Dropdown menu options'),
+    'aria-label': text('Aria Label (aria-label)', 'Dropdown'),
+    disabled: boolean('Disabled (disabled)', false),
+    light: boolean('Light variant (light)', false),
+    titleText: text('Title (titleText)', 'This is not a dropdown title.'),
+    helperText: text('Helper text (helperText)', 'This is not some helper text.'),
+    invalid: boolean('Show form validation UI (invalid)', false),
+    invalidText: text('Form validation UI content (invalidText)', 'A valid value is required')
+  }
+});
+
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

src/components/Dropdown/Dropdown.svelte

@@ -0,0 +1,144 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let disabled = false;
+  export let helperText = '';
+  export let id = Math.random();
+  export let inline = false;
+  export let invalid = false;
+  export let invalidText = '';
+  export let items = [];
+  export let itemToString = item => item.text || item.id;
+  export let label = undefined;
+  export let light = false;
+  export let open = false;
+  export let selectedIndex = -1;
+  export let size = undefined;
+  export let style = undefined;
+  export let titleText = '';
+  export let translateWithId = undefined;
+  export let type = 'default';
+
+  import { setContext } from 'svelte';
+  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
+  import { cx } from '../../lib';
+  import ListBox, { ListBoxField, ListBoxMenu, ListBoxMenuIcon, ListBoxMenuItem } from '../ListBox';
+
+  let selectedId = undefined;
+  let fieldRef = undefined;
+  let highlightedIndex = -1;
+
+  setContext('Dropdown', {
+    declareRef: ({ ref }) => {
+      fieldRef = ref;
+    }
+  });
+
+  function change(direction) {
+    let index = highlightedIndex + direction;
+
+    if (index < 0) {
+      index = items.length - 1;
+    } else if (index >= items.length) {
+      index = 0;
+    }
+
+    highlightedIndex = index;
+  }
+
+  $: inline = type === 'inline';
+  $: selectedItem = items[selectedIndex];
+  $: if (!open) {
+    highlightedIndex = -1;
+  }
+</script>
+
+<svelte:body
+  on:click={({ target }) => {
+    if (open && fieldRef && !fieldRef.contains(target)) {
+      open = false;
+    }
+  }} />
+
+<div
+  class={cx('--dropdown__wrapper', '--list-box__wrapper', inline && '--dropdown__wrapper--inline', inline && '--list-box__wrapper--inline', inline && invalid && '--dropdown__wrapper--inline--invalid', inline && invalid && '--list-box__wrapper--inline--invalid', className)}
+  {style}>
+  {#if titleText}
+    <label for={id} class={cx('--label', disabled && '--label--disabled')}>{titleText}</label>
+  {/if}
+  {#if !inline && helperText}
+    <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
+      {helperText}
+    </div>
+  {/if}
+  <ListBox
+    {type}
+    {size}
+    {id}
+    aria-label={$$props['aria-label']}
+    class={cx('--dropdown', invalid && '--dropdown--invalid', open && '--dropdown--open', inline && '--dropdown--inline', disabled && '--dropdown--disabled', light && '--dropdown--light')}
+    on:click={({ target }) => {
+      open = fieldRef.contains(target) ? !open : false;
+    }}
+    {disabled}
+    {open}
+    {invalid}
+    {invalidText}
+    {light}>
+    {#if invalid}
+      <WarningFilled16 class={cx('--list-box__invalid-icon')} />
+    {/if}
+    <ListBoxField
+      tabindex="0"
+      role="button"
+      aria-expanded={open}
+      on:keydown={({ key }) => {
+        if (key === 'Enter') {
+          open = !open;
+          if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
+            selectedIndex = highlightedIndex;
+            open = false;
+          }
+        } else if (key === 'Tab') {
+          open = false;
+          fieldRef.blur();
+        } else if (key === 'ArrowDown') {
+          change(1);
+        } else if (key === 'ArrowUp') {
+          change(-1);
+        }
+      }}
+      on:blur={({ relatedTarget }) => {
+        if (relatedTarget) {
+          fieldRef.focus();
+        }
+      }}
+      {disabled}
+      {translateWithId}
+      {id}>
+      <span class={cx('--list-box__label')}>
+        {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
+      </span>
+      <ListBoxMenuIcon {open} {translateWithId} />
+    </ListBoxField>
+    {#if open}
+      <ListBoxMenu aria-labelledby={id} {id}>
+        {#each items as item, i (item.id || i)}
+          <ListBoxMenuItem
+            id={item.id}
+            active={selectedIndex === i || selectedId === item.id}
+            highlighted={highlightedIndex === i || selectedIndex === i}
+            on:click={() => {
+              selectedId = item.id;
+              selectedIndex = i;
+            }}
+            on:mouseenter={() => {
+              highlightedIndex = i;
+            }}>
+            {itemToString(item)}
+          </ListBoxMenuItem>
+        {/each}
+      </ListBoxMenu>
+    {/if}
+  </ListBox>
+</div>

src/components/Dropdown/index.js

@@ -0,0 +1,4 @@
+import Dropdown from './Dropdown.svelte';
+
+export default Dropdown;
+export { default as DropdownSkeleton } from './Dropdown.Skeleton.svelte';