@getmicdrop/svelte-components 5.17.0 → 5.17.3

package/dist/primitives/Dropdown/Dropdown.svelte

@@ -1,170 +1,170 @@
-<script lang="ts">
-  import { onMount, onDestroy, tick, setContext } from "svelte";
-  import type { Snippet } from "svelte";
-  import { bloom } from "../../utils/transitions.js";
-
-  interface Props {
-    open?: boolean;
-    activeUrl?: string;
-    placement?: string;
-    class?: string;
-    ariaLabel?: string;
-    onclose?: () => void;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    open = $bindable(false),
-    activeUrl = "",
-    placement = "bottom",
-    class: className = "",
-    ariaLabel = "Menu",
-    onclose,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  let dropdownRef: HTMLUListElement | null = $state(null);
-  let containerRef: HTMLDivElement | null = $state(null);
-  let focusedIndex = $state(-1);
-  let menuItems: HTMLElement[] = $state([]);
-
-  async function updateMenuItems() {
-    await tick();
-    if (dropdownRef) {
-      menuItems = Array.from(dropdownRef.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])'));
-    }
-  }
-
-  function focusItem(index: number) {
-    if (menuItems.length === 0) return;
-    if (index < 0) index = menuItems.length - 1;
-    if (index >= menuItems.length) index = 0;
-    focusedIndex = index;
-    menuItems[focusedIndex]?.focus();
-  }
-
-  function getTriggerElement(): Element | null {
-    const parent = containerRef?.parentElement;
-    if (parent) {
-      const siblings = Array.from(parent.children);
-      const containerIndex = containerRef ? siblings.indexOf(containerRef) : -1;
-      if (containerIndex > 0) {
-        return siblings[containerIndex - 1];
-      }
-    }
-    return null;
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    if (!open) return;
-
-    if (dropdownRef && dropdownRef.contains(event.target as Node)) {
-      return;
-    }
-
-    const trigger = getTriggerElement();
-    if (trigger && trigger.contains(event.target as Node)) {
-      return;
-    }
-
-    open = false;
-    onclose?.();
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (!open) return;
-
-    const trigger = getTriggerElement();
-    if (!dropdownRef?.contains(event.target as Node) && !trigger?.contains(event.target as Node)) {
-      return;
-    }
-
-    switch (event.key) {
-      case "Escape":
-        open = false;
-        (trigger as HTMLElement | null)?.focus();
-        event.preventDefault();
-        onclose?.();
-        break;
-      case "ArrowDown":
-        focusItem(focusedIndex + 1);
-        event.preventDefault();
-        break;
-      case "ArrowUp":
-        focusItem(focusedIndex - 1);
-        event.preventDefault();
-        break;
-      case "Home":
-        focusItem(0);
-        event.preventDefault();
-        break;
-      case "End":
-        focusItem(menuItems.length - 1);
-        event.preventDefault();
-        break;
-      case "Tab":
-        open = false;
-        onclose?.();
-        break;
-    }
-  }
-
-  $effect(() => {
-    if (open) {
-      focusedIndex = -1;
-      updateMenuItems();
-    }
-  });
-
-  onMount(() => {
-    document.addEventListener("mousedown", handleClickOutside, true);
-    document.addEventListener("keydown", handleKeydown);
-  });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.removeEventListener("mousedown", handleClickOutside, true);
-      document.removeEventListener("keydown", handleKeydown);
-    }
-  });
-
-  setContext("dropdown", {
-    get activeUrl() { return activeUrl; },
-    close: () => {
-      open = false;
-      onclose?.();
-    }
-  });
-
-  const placementClasses: Record<string, string> = {
-    bottom: "top-full left-0 mt-1",
-    top: "bottom-full left-0 mb-1",
-    left: "right-full top-0 mr-1",
-    right: "left-full top-0 ml-1"
-  };
-
-  // Map placement to transform origin for bloom animation
-  const placementOrigins: Record<string, string> = {
-    bottom: "top left",
-    top: "bottom left",
-    left: "top right",
-    right: "top left"
-  };
-</script>
-
-{#if open}
-  <div
-    bind:this={containerRef}
-    class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {className}"
-    role="menu"
-    aria-label={ariaLabel}
-    transition:bloom={{ origin: placementOrigins[placement] || "top left" }}
-    {...restProps}
-  >
-    <ul bind:this={dropdownRef} class="py-2 text-sm text-gray-700 dark:text-gray-200">
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </ul>
-  </div>
-{/if}
+<script lang="ts">
+  import { onMount, onDestroy, tick, setContext } from "svelte";
+  import type { Snippet } from "svelte";
+  import { bloom } from "../../utils/transitions.js";
+
+  interface Props {
+    open?: boolean;
+    activeUrl?: string;
+    placement?: string;
+    class?: string;
+    ariaLabel?: string;
+    onclose?: () => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    open = $bindable(false),
+    activeUrl = "",
+    placement = "bottom",
+    class: className = "",
+    ariaLabel = "Menu",
+    onclose,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  let dropdownRef: HTMLUListElement | null = $state(null);
+  let containerRef: HTMLDivElement | null = $state(null);
+  let focusedIndex = $state(-1);
+  let menuItems: HTMLElement[] = $state([]);
+
+  async function updateMenuItems() {
+    await tick();
+    if (dropdownRef) {
+      menuItems = Array.from(dropdownRef.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])'));
+    }
+  }
+
+  function focusItem(index: number) {
+    if (menuItems.length === 0) return;
+    if (index < 0) index = menuItems.length - 1;
+    if (index >= menuItems.length) index = 0;
+    focusedIndex = index;
+    menuItems[focusedIndex]?.focus();
+  }
+
+  function getTriggerElement(): Element | null {
+    const parent = containerRef?.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children);
+      const containerIndex = containerRef ? siblings.indexOf(containerRef) : -1;
+      if (containerIndex > 0) {
+        return siblings[containerIndex - 1];
+      }
+    }
+    return null;
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (!open) return;
+
+    if (dropdownRef && dropdownRef.contains(event.target as Node)) {
+      return;
+    }
+
+    const trigger = getTriggerElement();
+    if (trigger && trigger.contains(event.target as Node)) {
+      return;
+    }
+
+    open = false;
+    onclose?.();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!open) return;
+
+    const trigger = getTriggerElement();
+    if (!dropdownRef?.contains(event.target as Node) && !trigger?.contains(event.target as Node)) {
+      return;
+    }
+
+    switch (event.key) {
+      case "Escape":
+        open = false;
+        (trigger as HTMLElement | null)?.focus();
+        event.preventDefault();
+        onclose?.();
+        break;
+      case "ArrowDown":
+        focusItem(focusedIndex + 1);
+        event.preventDefault();
+        break;
+      case "ArrowUp":
+        focusItem(focusedIndex - 1);
+        event.preventDefault();
+        break;
+      case "Home":
+        focusItem(0);
+        event.preventDefault();
+        break;
+      case "End":
+        focusItem(menuItems.length - 1);
+        event.preventDefault();
+        break;
+      case "Tab":
+        open = false;
+        onclose?.();
+        break;
+    }
+  }
+
+  $effect(() => {
+    if (open) {
+      focusedIndex = -1;
+      updateMenuItems();
+    }
+  });
+
+  onMount(() => {
+    document.addEventListener("mousedown", handleClickOutside, true);
+    document.addEventListener("keydown", handleKeydown);
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("mousedown", handleClickOutside, true);
+      document.removeEventListener("keydown", handleKeydown);
+    }
+  });
+
+  setContext("dropdown", {
+    get activeUrl() { return activeUrl; },
+    close: () => {
+      open = false;
+      onclose?.();
+    }
+  });
+
+  const placementClasses: Record<string, string> = {
+    bottom: "top-full left-0 mt-1",
+    top: "bottom-full left-0 mb-1",
+    left: "right-full top-0 mr-1",
+    right: "left-full top-0 ml-1"
+  };
+
+  // Map placement to transform origin for bloom animation
+  const placementOrigins: Record<string, string> = {
+    bottom: "top left",
+    top: "bottom left",
+    left: "top right",
+    right: "top left"
+  };
+</script>
+
+{#if open}
+  <div
+    bind:this={containerRef}
+    class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {className}"
+    role="menu"
+    aria-label={ariaLabel}
+    transition:bloom={{ origin: placementOrigins[placement] || "top left" }}
+    {...restProps}
+  >
+    <ul bind:this={dropdownRef} class="py-2 text-sm text-gray-700 dark:text-gray-200">
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </ul>
+  </div>
+{/if}

package/dist/primitives/Dropdown/DropdownDivider.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DropdownDivider.spec.d.ts.map

package/dist/primitives/Dropdown/DropdownDivider.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownDivider.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/DropdownDivider.spec.js"],"names":[],"mappings":""}

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

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import DropdownDivider from './DropdownDivider.svelte';
+
+describe('DropdownDivider', () => {
+  test('renders a list item', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('li')).toBeInTheDocument();
+  });
+
+  test('has role="separator"', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('[role="separator"]')).toBeInTheDocument();
+  });
+
+  test('has aria-hidden="true"', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('[aria-hidden="true"]')).toBeInTheDocument();
+  });
+
+  test('has border styling', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('[class*="border"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(DropdownDivider, { props: { class: 'my-divider' } });
+    expect(container.querySelector('.my-divider')).toBeInTheDocument();
+  });
+});

package/dist/primitives/Dropdown/DropdownDivider.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-  interface Props {
-    class?: string;
-  }
-
-  let { class: className = '' }: Props = $props();
-</script>
-
-<li class="my-1 border-t border-gray-200 dark:border-gray-600 {className}" role="separator" aria-hidden="true"></li>
+<script lang="ts">
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+</script>
+
+<li class="my-1 border-t border-gray-200 dark:border-gray-600 {className}" role="separator" aria-hidden="true"></li>

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

@@ -1,7 +1,8 @@
-import { render, screen } from '@testing-library/svelte';
+import { render, screen, fireEvent } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { expect, describe, test, vi } from 'vitest';
 import DropdownItem from './DropdownItem.svelte';
+import DropdownItemTestWrapper from './DropdownItemTestWrapper.svelte';
 
 describe('DropdownItem Component', () => {
   test('renders as button by default (no href)', () => {
@@ -180,3 +181,156 @@ describe('DropdownItem Button Type', () => {
     expect(button).toHaveAttribute('type', 'button');
   });
 });
+
+describe('DropdownItem Disabled Click on Link (line 32)', () => {
+  test('preventDefault is called when clicking a disabled link item', async () => {
+    const user = userEvent.setup();
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { href: '/test', disabled: true, onclick, label: 'Disabled Link' }
+    });
+
+    const anchor = container.querySelector('a');
+    expect(anchor).toBeInTheDocument();
+    // Click the disabled link - handleClick should call preventDefault and return early
+    await user.click(anchor);
+    expect(onclick).not.toHaveBeenCalled();
+  });
+
+  test('preventDefault is called via fireEvent on disabled link', async () => {
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { href: '/somewhere', disabled: true, label: 'Disabled' }
+    });
+
+    const anchor = container.querySelector('a');
+    const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+    const spy = vi.spyOn(clickEvent, 'preventDefault');
+    anchor.dispatchEvent(clickEvent);
+    expect(spy).toHaveBeenCalled();
+  });
+});
+
+describe('DropdownItem Context Close (line 37)', () => {
+  test('calls context.close() when non-link item is clicked with context', async () => {
+    const user = userEvent.setup();
+    const closeFn = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: {
+        withContext: true,
+        contextClose: closeFn,
+        label: 'Close Item'
+      }
+    });
+
+    const button = container.querySelector('button');
+    await user.click(button);
+    expect(closeFn).toHaveBeenCalled();
+  });
+
+  test('does not call context.close() when item has href', async () => {
+    const user = userEvent.setup();
+    const closeFn = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: {
+        href: '/test',
+        withContext: true,
+        contextClose: closeFn,
+        label: 'Link Item'
+      }
+    });
+
+    const anchor = container.querySelector('a');
+    await user.click(anchor);
+    // context.close() should NOT be called for link items (href is truthy)
+    expect(closeFn).not.toHaveBeenCalled();
+  });
+});
+
+describe('DropdownItem Keydown Handling (lines 41-44)', () => {
+  test('Enter key triggers handleClick on button item', async () => {
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { onclick, label: 'Keyboard Item' }
+    });
+
+    const button = container.querySelector('button');
+    await fireEvent.keyDown(button, { key: 'Enter' });
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('Space key triggers handleClick on button item', async () => {
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { onclick, label: 'Keyboard Item' }
+    });
+
+    const button = container.querySelector('button');
+    await fireEvent.keyDown(button, { key: ' ' });
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('Enter key triggers handleClick on link item', async () => {
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { href: '/test', onclick, label: 'Keyboard Link' }
+    });
+
+    const anchor = container.querySelector('a');
+    await fireEvent.keyDown(anchor, { key: 'Enter' });
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('other keys do not trigger handleClick', async () => {
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { onclick, label: 'Keyboard Item' }
+    });
+
+    const button = container.querySelector('button');
+    await fireEvent.keyDown(button, { key: 'Tab' });
+    expect(onclick).not.toHaveBeenCalled();
+  });
+
+  test('Enter key on disabled item calls preventDefault', async () => {
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { disabled: true, onclick, label: 'Disabled' }
+    });
+
+    const button = container.querySelector('button');
+    await fireEvent.keyDown(button, { key: 'Enter' });
+    expect(onclick).not.toHaveBeenCalled();
+  });
+});
+
+describe('DropdownItem Active URL Styling', () => {
+  test('applies active classes when activeUrl matches href', () => {
+    const { container } = render(DropdownItemTestWrapper, {
+      props: {
+        href: '/dashboard',
+        withContext: true,
+        contextActiveUrl: '/dashboard',
+        label: 'Dashboard'
+      }
+    });
+
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveClass('bg-blue-50');
+    expect(anchor).toHaveClass('text-blue-700');
+  });
+
+  test('applies default classes when activeUrl does not match href', () => {
+    const { container } = render(DropdownItemTestWrapper, {
+      props: {
+        href: '/settings',
+        withContext: true,
+        contextActiveUrl: '/dashboard',
+        label: 'Settings'
+      }
+    });
+
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveClass('text-gray-700');
+    expect(anchor).not.toHaveClass('bg-blue-50');
+  });
+});