@getmicdrop/svelte-components 5.17.0 → 5.17.3

package/dist/primitives/Dropdown/Dropdown.spec.js

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
 import { expect, describe, test, vi, beforeEach, afterEach } from 'vitest';
 import Dropdown from './Dropdown.svelte';
 
@@ -351,6 +352,121 @@ describe('Dropdown Context', () => {
   });
 });
 
+describe('Dropdown Placement', () => {
+  test('renders with top placement', () => {
+    const { container } = render(Dropdown, { props: { open: true, placement: 'top' } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+  });
+
+  test('renders with left placement', () => {
+    const { container } = render(Dropdown, { props: { open: true, placement: 'left' } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+  });
+
+  test('renders with right placement', () => {
+    const { container } = render(Dropdown, { props: { open: true, placement: 'right' } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+  });
+
+  test('falls back to default origin for unknown placement', () => {
+    const { container } = render(Dropdown, { props: { open: true, placement: 'invalid-placement' } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+  });
+});
+
+describe('Dropdown Children Rendering', () => {
+  test('renders children snippet when provided', () => {
+    const { container } = render(Dropdown, {
+      props: {
+        open: true,
+        children: createRawSnippet(() => ({
+          render: () => `<li role="menuitem">Item 1</li>`
+        }))
+      }
+    });
+    const item = container.querySelector('[role="menuitem"]');
+    expect(item).toBeInTheDocument();
+    expect(item.textContent).toBe('Item 1');
+  });
+
+  test('renders empty list when no children provided', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toBeInTheDocument();
+    expect(ul.children.length).toBe(0);
+  });
+});
+
+describe('Dropdown Trigger Element Detection', () => {
+  let cleanup;
+
+  afterEach(() => {
+    if (cleanup) {
+      cleanup();
+    }
+  });
+
+  test('clicking on trigger sibling does not close dropdown', async () => {
+    const onclose = vi.fn();
+
+    // Create a wrapper with a trigger button followed by the dropdown
+    const wrapper = document.createElement('div');
+    const triggerBtn = document.createElement('button');
+    triggerBtn.textContent = 'Toggle';
+    wrapper.appendChild(triggerBtn);
+    document.body.appendChild(wrapper);
+
+    const result = render(Dropdown, {
+      props: { open: true, onclose },
+      target: wrapper
+    });
+    cleanup = () => {
+      result.unmount();
+      document.body.removeChild(wrapper);
+    };
+
+    // Click on the trigger button (sibling before the dropdown container)
+    const clickEvent = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(clickEvent, 'target', { value: triggerBtn, enumerable: true });
+    document.dispatchEvent(clickEvent);
+
+    // Should not close since click was on the trigger element
+    expect(onclose).not.toHaveBeenCalled();
+  });
+
+  test('Escape returns focus to trigger element', async () => {
+    const onclose = vi.fn();
+
+    // Create wrapper with trigger sibling before dropdown
+    const wrapper = document.createElement('div');
+    const triggerBtn = document.createElement('button');
+    triggerBtn.textContent = 'Toggle';
+    wrapper.appendChild(triggerBtn);
+    document.body.appendChild(wrapper);
+
+    const result = render(Dropdown, {
+      props: { open: true, onclose },
+      target: wrapper
+    });
+    cleanup = () => {
+      result.unmount();
+      document.body.removeChild(wrapper);
+    };
+
+    const focusSpy = vi.spyOn(triggerBtn, 'focus');
+    const ul = result.container.querySelector('ul');
+
+    // Dispatch Escape from within the dropdown
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    document.dispatchEvent(event);
+
+    expect(onclose).toHaveBeenCalled();
+    expect(focusSpy).toHaveBeenCalled();
+    focusSpy.mockRestore();
+  });
+});
+
 describe('Dropdown Lifecycle', () => {
   test('cleans up event listeners on destroy', () => {
     const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');

package/dist/primitives/Dropdown/Dropdown.stories.svelte

@@ -1,137 +1,137 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Dropdown from './Dropdown.svelte';
-  import DropdownItem from './DropdownItem.svelte';
-  import Button from '../Button/Button.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Dropdown',
-    component: Dropdown,
-    tags: ['autodocs'],
-    parameters: {
-      docs: {
-        description: {
-          component: 'Dropdown menu component for actions and navigation.',
-        },
-      },
-    },
-  });
-
-  let open1 = $state(false);
-  let open2 = $state(false);
-  let open3 = $state(false);
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="relative inline-block">
-      <Button onclick={() => open1 = !open1}>
-        Options ▼
-      </Button>
-      {#if open1}
-        <Dropdown class="absolute mt-1 z-10">
-          <DropdownItem onclick={() => { console.log('Edit'); open1 = false; }}>Edit</DropdownItem>
-          <DropdownItem onclick={() => { console.log('Duplicate'); open1 = false; }}>Duplicate</DropdownItem>
-          <DropdownItem onclick={() => { console.log('Archive'); open1 = false; }}>Archive</DropdownItem>
-        </Dropdown>
-      {/if}
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Dividers">
-  {#snippet template()}
-    <div class="relative inline-block">
-      <Button onclick={() => open2 = !open2}>
-        Actions ▼
-      </Button>
-      {#if open2}
-        <Dropdown class="absolute mt-1 z-10">
-          <DropdownItem onclick={() => open2 = false}>View Details</DropdownItem>
-          <DropdownItem onclick={() => open2 = false}>Edit</DropdownItem>
-          <div class="border-t my-1"></div>
-          <DropdownItem onclick={() => open2 = false}>Share</DropdownItem>
-          <DropdownItem onclick={() => open2 = false}>Export</DropdownItem>
-          <div class="border-t my-1"></div>
-          <DropdownItem onclick={() => open2 = false} class="text-red-600">Delete</DropdownItem>
-        </Dropdown>
-      {/if}
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Right Aligned">
-  {#snippet template()}
-    <div class="flex justify-end">
-      <div class="relative inline-block">
-        <Button onclick={() => open3 = !open3}>
-          Menu ▼
-        </Button>
-        {#if open3}
-          <Dropdown class="absolute mt-1 right-0 z-10">
-            <DropdownItem onclick={() => open3 = false}>Profile</DropdownItem>
-            <DropdownItem onclick={() => open3 = false}>Settings</DropdownItem>
-            <DropdownItem onclick={() => open3 = false}>Help</DropdownItem>
-            <div class="border-t my-1"></div>
-            <DropdownItem onclick={() => open3 = false}>Sign Out</DropdownItem>
-          </Dropdown>
-        {/if}
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Icons">
-  {#snippet template()}
-    <div class="relative inline-block">
-      <Button onclick={() => open1 = !open1}>
-        User Menu ▼
-      </Button>
-      {#if open1}
-        <Dropdown class="absolute mt-1 z-10 min-w-[180px]">
-          <DropdownItem onclick={() => open1 = false}>
-            <span class="mr-2">👤</span> Profile
-          </DropdownItem>
-          <DropdownItem onclick={() => open1 = false}>
-            <span class="mr-2">⚙️</span> Settings
-          </DropdownItem>
-          <DropdownItem onclick={() => open1 = false}>
-            <span class="mr-2">📊</span> Analytics
-          </DropdownItem>
-          <div class="border-t my-1"></div>
-          <DropdownItem onclick={() => open1 = false}>
-            <span class="mr-2">🚪</span> Sign Out
-          </DropdownItem>
-        </Dropdown>
-      {/if}
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="In Card Context">
-  {#snippet template()}
-    <div class="border rounded-lg p-4 max-w-sm">
-      <div class="flex justify-between items-center mb-4">
-        <h3 class="font-medium">Card Title</h3>
-        <div class="relative">
-          <button
-            class="p-1 hover:bg-gray-100 rounded"
-            onclick={() => open1 = !open1}
-          >
-            ⋮
-          </button>
-          {#if open1}
-            <Dropdown class="absolute mt-1 right-0 z-10">
-              <DropdownItem onclick={() => open1 = false}>Edit</DropdownItem>
-              <DropdownItem onclick={() => open1 = false}>Share</DropdownItem>
-              <DropdownItem onclick={() => open1 = false} class="text-red-600">Delete</DropdownItem>
-            </Dropdown>
-          {/if}
-        </div>
-      </div>
-      <p class="text-gray-600 text-sm">
-        This is a card with a dropdown menu in the header for common actions.
-      </p>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Dropdown from './Dropdown.svelte';
+  import DropdownItem from './DropdownItem.svelte';
+  import Button from '../Button/Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Dropdown menu component for actions and navigation.',
+        },
+      },
+    },
+  });
+
+  let open1 = $state(false);
+  let open2 = $state(false);
+  let open3 = $state(false);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open1 = !open1}>
+        Options ▼
+      </Button>
+      {#if open1}
+        <Dropdown class="absolute mt-1 z-10">
+          <DropdownItem onclick={() => { console.log('Edit'); open1 = false; }}>Edit</DropdownItem>
+          <DropdownItem onclick={() => { console.log('Duplicate'); open1 = false; }}>Duplicate</DropdownItem>
+          <DropdownItem onclick={() => { console.log('Archive'); open1 = false; }}>Archive</DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Dividers">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open2 = !open2}>
+        Actions ▼
+      </Button>
+      {#if open2}
+        <Dropdown class="absolute mt-1 z-10">
+          <DropdownItem onclick={() => open2 = false}>View Details</DropdownItem>
+          <DropdownItem onclick={() => open2 = false}>Edit</DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open2 = false}>Share</DropdownItem>
+          <DropdownItem onclick={() => open2 = false}>Export</DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open2 = false} class="text-red-600">Delete</DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Right Aligned">
+  {#snippet template()}
+    <div class="flex justify-end">
+      <div class="relative inline-block">
+        <Button onclick={() => open3 = !open3}>
+          Menu ▼
+        </Button>
+        {#if open3}
+          <Dropdown class="absolute mt-1 right-0 z-10">
+            <DropdownItem onclick={() => open3 = false}>Profile</DropdownItem>
+            <DropdownItem onclick={() => open3 = false}>Settings</DropdownItem>
+            <DropdownItem onclick={() => open3 = false}>Help</DropdownItem>
+            <div class="border-t my-1"></div>
+            <DropdownItem onclick={() => open3 = false}>Sign Out</DropdownItem>
+          </Dropdown>
+        {/if}
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Icons">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open1 = !open1}>
+        User Menu ▼
+      </Button>
+      {#if open1}
+        <Dropdown class="absolute mt-1 z-10 min-w-[180px]">
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">👤</span> Profile
+          </DropdownItem>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">⚙️</span> Settings
+          </DropdownItem>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">📊</span> Analytics
+          </DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">🚪</span> Sign Out
+          </DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="In Card Context">
+  {#snippet template()}
+    <div class="border rounded-lg p-4 max-w-sm">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="font-medium">Card Title</h3>
+        <div class="relative">
+          <button
+            class="p-1 hover:bg-gray-100 rounded"
+            onclick={() => open1 = !open1}
+          >
+            ⋮
+          </button>
+          {#if open1}
+            <Dropdown class="absolute mt-1 right-0 z-10">
+              <DropdownItem onclick={() => open1 = false}>Edit</DropdownItem>
+              <DropdownItem onclick={() => open1 = false}>Share</DropdownItem>
+              <DropdownItem onclick={() => open1 = false} class="text-red-600">Delete</DropdownItem>
+            </Dropdown>
+          {/if}
+        </div>
+      </div>
+      <p class="text-gray-600 text-sm">
+        This is a card with a dropdown menu in the header for common actions.
+      </p>
+    </div>
+  {/snippet}
+</Story>