@getmicdrop/svelte-components 5.12.0 → 5.14.0

package/dist/recipes/inputs/SelectDropdown.spec.js

@@ -1,518 +0,0 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi, beforeEach } from "vitest";
-import SelectDropdown from "./SelectDropdown.svelte";
-
-// Mock transitions to be instant for testing
-vi.mock('../../utils/transitions.js', () => ({
-  bloom: () => ({ duration: 0, delay: 0, css: () => '' }),
-  safeSlide: () => ({ duration: 0, delay: 0, css: () => '' }),
-}));
-
-const sampleOptions = [
-  { label: "Option 1", value: "opt1" },
-  { label: "Option 2", value: "opt2" },
-  { label: "Option 3", value: "opt3" },
-  { label: "Option 4", value: "opt4" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component, container } = render(SelectDropdown, {
-    props: {
-      options: sampleOptions,
-      ...args,
-    },
-  });
-  return { user, component, container };
-}
-
-describe("SelectDropdown Component Tests", () => {
-  beforeEach(() => {
-    // Clear any existing event listeners
-    document.body.innerHTML = "";
-  });
-
-  test("Renders with default placeholder", () => {
-    setupTest();
-    expect(screen.getByRole("button", { name: /select/i })).toBeInTheDocument();
-    expect(screen.getByText("Select")).toBeInTheDocument();
-  });
-
-  test("Renders with custom placeholder", () => {
-    setupTest({ placeholder: "Choose an option" });
-    expect(screen.getByText("Choose an option")).toBeInTheDocument();
-  });
-
-  test("Shows selected option label", () => {
-    setupTest({ selected: sampleOptions[0] });
-    expect(screen.getByText("Option 1")).toBeInTheDocument();
-  });
-
-  test("Opens dropdown on click", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-    expect(screen.getByText("Option 1")).toBeInTheDocument();
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-    expect(screen.getByText("Option 3")).toBeInTheDocument();
-    expect(screen.getByText("Option 4")).toBeInTheDocument();
-  });
-
-  test("Displays all options in dropdown", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    const options = screen.getAllByRole("option");
-    expect(options).toHaveLength(4);
-  });
-
-  test("Selects option on click", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    const option2 = screen.getByRole("option", { name: "Option 2" });
-    await user.click(option2);
-
-    // Should show selected option in trigger
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-  });
-
-  test("Closes dropdown after selection", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    const option1 = screen.getByRole("option", { name: "Option 1" });
-    await user.click(option1);
-
-    // Dropdown should be closed
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Calls onselect callback when option is selected", async () => {
-    const onSelectSpy = vi.fn();
-    const { user } = setupTest({ onselect: onSelectSpy });
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    const option2 = screen.getByRole("option", { name: "Option 2" });
-    await user.click(option2);
-
-    expect(onSelectSpy).toHaveBeenCalledWith(sampleOptions[1]);
-  });
-
-  test("Does not open dropdown when disabled", async () => {
-    const { user } = setupTest({ disabled: true });
-    const trigger = screen.getByRole("button");
-
-    expect(trigger).toBeDisabled();
-    await user.click(trigger);
-
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Applies disabled styles when disabled", () => {
-    setupTest({ disabled: true });
-    const trigger = screen.getByRole("button");
-
-    expect(trigger).toHaveClass("opacity-50");
-    expect(trigger).toHaveClass("cursor-not-allowed");
-  });
-
-  test("Applies custom className", () => {
-    const { container } = setupTest({ class: "custom-class" });
-    const dropdown = container.querySelector(".relative");
-
-    expect(dropdown).toHaveClass("custom-class");
-  });
-
-  test("Closes dropdown on Escape key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-
-    await user.keyboard("{Escape}");
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Navigates options with ArrowDown key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
-
-    const options = screen.getAllByRole("option");
-    await user.keyboard("{ArrowDown}");
-
-    // First option should receive focus
-    expect(options[0]).toHaveFocus();
-
-    await user.keyboard("{ArrowDown}");
-    // Second option should receive focus
-    expect(options[1]).toHaveFocus();
-  });
-
-  test("Navigates options with ArrowUp key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
-
-    const options = screen.getAllByRole("option");
-    await user.keyboard("{ArrowUp}");
-
-    // Should wrap to last option
-    expect(options[3]).toHaveFocus();
-
-    await user.keyboard("{ArrowUp}");
-    // Should move to third option
-    expect(options[2]).toHaveFocus();
-  });
-
-  test("Navigates to first option with Home key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
-
-    const options = screen.getAllByRole("option");
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard("{Home}");
-
-    expect(options[0]).toHaveFocus();
-  });
-
-  test("Navigates to last option with End key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
-
-    const options = screen.getAllByRole("option");
-    await user.keyboard("{End}");
-
-    expect(options[3]).toHaveFocus();
-  });
-
-  test("Closes dropdown on Tab key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-
-    await user.keyboard("{Tab}");
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Returns focus to trigger after Escape", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await user.keyboard("{Escape}");
-
-    expect(trigger).toHaveFocus();
-  });
-
-  test("Returns focus to trigger after selection", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    const option1 = screen.getByRole("option", { name: "Option 1" });
-    await user.click(option1);
-
-    await waitFor(() => expect(trigger).toHaveFocus());
-  });
-
-  test("Closes dropdown when clicking outside", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-
-    // Click outside the dropdown
-    await user.click(document.body);
-
-    await waitFor(() => {
-      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-    });
-  });
-
-  test("Does not close dropdown when clicking inside container", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-
-    // Click on the trigger again
-    await user.click(trigger);
-
-    // Should toggle closed
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Highlights selected option in dropdown", async () => {
-    const { user } = setupTest({ selected: sampleOptions[1] });
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    const selectedOption = screen.getByRole("option", { name: "Option 2" });
-    expect(selectedOption).toHaveAttribute("aria-selected", "true");
-    expect(selectedOption).toHaveClass("bg-blue-50");
-  });
-
-  test("Toggles dropdown on successive clicks", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    // Open
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-
-    // Close
-    await user.click(trigger);
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-
-    // Open again
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-  });
-
-  test("Sets aria-haspopup attribute on trigger", () => {
-    setupTest();
-    const trigger = screen.getByRole("button");
-
-    expect(trigger).toHaveAttribute("aria-haspopup", "listbox");
-  });
-
-  test("Sets aria-expanded based on dropdown state", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-  });
-
-  test("Rotates chevron icon when dropdown is open", async () => {
-    const { user, container } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    const chevron = container.querySelector("svg");
-    expect(chevron).not.toHaveClass("rotate-180");
-
-    await user.click(trigger);
-    expect(chevron).toHaveClass("rotate-180");
-  });
-
-  test("Handles empty options array", () => {
-    setupTest({ options: [] });
-    expect(screen.getByRole("button")).toBeInTheDocument();
-  });
-
-  test("Updates displayed value when selected prop changes", async () => {
-    const { container } = render(SelectDropdown, {
-      props: {
-        options: sampleOptions,
-        selected: sampleOptions[0],
-      },
-    });
-
-    expect(screen.getByText("Option 1")).toBeInTheDocument();
-
-    // Re-render with new selected prop (Svelte 5 compatible approach)
-    container.innerHTML = "";
-    render(SelectDropdown, {
-      props: {
-        options: sampleOptions,
-        selected: sampleOptions[2],
-      },
-      target: container,
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText("Option 3")).toBeInTheDocument();
-    });
-  });
-
-  test("Shows all options even when one is selected", async () => {
-    const { user } = setupTest({ selected: sampleOptions[0] });
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    const options = screen.getAllByRole("option");
-    expect(options).toHaveLength(4);
-  });
-
-  test("Does not interfere with keyboard events outside dropdown", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    // Don't open dropdown
-    await user.keyboard("{ArrowDown}");
-
-    // Dropdown should not open
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Wraps focus correctly with ArrowDown", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
-
-    const options = screen.getAllByRole("option");
-
-    // Navigate to last item
-    await user.keyboard("{End}");
-    expect(options[3]).toHaveFocus();
-
-    // Press ArrowDown - should wrap to first
-    await user.keyboard("{ArrowDown}");
-    expect(options[0]).toHaveFocus();
-  });
-
-  test("Wraps focus correctly with ArrowUp", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
-
-    const options = screen.getAllByRole("option");
-
-    // First option
-    await user.keyboard("{Home}");
-    expect(options[0]).toHaveFocus();
-
-    // Press ArrowUp - should wrap to last
-    await user.keyboard("{ArrowUp}");
-    expect(options[3]).toHaveFocus();
-  });
-
-  test("Applies correct styling classes to dropdown menu", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    const menu = screen.getByRole("listbox");
-    expect(menu).toHaveClass("absolute");
-    expect(menu).toHaveClass("z-10");
-    expect(menu).toHaveClass("rounded-lg");
-    expect(menu).toHaveClass("shadow-lg");
-  });
-
-  test("Truncates long selected option labels", () => {
-    setupTest({
-      selected: { label: "Very long option name that should be truncated", value: "long" },
-    });
-    const span = screen.getByText("Very long option name that should be truncated");
-    expect(span).toHaveClass("truncate");
-  });
-
-  test("Allows null selected value", () => {
-    setupTest({ selected: null });
-    expect(screen.getByText("Select")).toBeInTheDocument();
-  });
-
-  test("Handles option selection with Enter key", async () => {
-    const onSelectSpy = vi.fn();
-    const { user } = setupTest({ onselect: onSelectSpy });
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
-
-    await user.keyboard("{ArrowDown}");
-    const options = screen.getAllByRole("option");
-
-    // Simulate Enter key on focused option
-    await fireEvent.click(options[0]);
-
-    expect(onSelectSpy).toHaveBeenCalledWith(sampleOptions[0]);
-  });
-
-  test("Maintains dropdown position with max-height scroll", async () => {
-    const manyOptions = Array.from({ length: 20 }, (_, i) => ({
-      label: `Option ${i + 1}`,
-      value: `opt${i + 1}`,
-    }));
-
-    const { user } = setupTest({ options: manyOptions });
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    const menu = screen.getByRole("listbox");
-    expect(menu).toHaveClass("max-h-60");
-    expect(menu).toHaveClass("overflow-y-auto");
-  });
-
-  test("Initializes focusedIndex to -1 when opening dropdown", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    // No option should be focused initially
-    const options = screen.getAllByRole("option");
-    options.forEach(option => {
-      expect(option).not.toHaveFocus();
-    });
-  });
-
-  test("Opens and closes dropdown instances independently", async () => {
-    const { user: user1 } = setupTest({ placeholder: "Dropdown 1" });
-    const { user: user2 } = setupTest({ placeholder: "Dropdown 2" });
-
-    const trigger1 = screen.getByRole("button", { name: "Dropdown 1" });
-    const trigger2 = screen.getByRole("button", { name: "Dropdown 2" });
-
-    // Open first dropdown
-    await user1.click(trigger1);
-    expect(screen.getAllByRole("listbox")).toHaveLength(1);
-
-    // Opening second dropdown closes first (click-outside behavior)
-    await user2.click(trigger2);
-
-    // Should have exactly one listbox open (the second one)
-    const listboxes = screen.getAllByRole("listbox");
-    expect(listboxes).toHaveLength(1);
-  });
-
-  test("Maintains proper z-index for dropdown overlay", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    const menu = screen.getByRole("listbox");
-    expect(menu).toHaveClass("z-10");
-  });
-});

package/dist/recipes/inputs/SelectDropdown.svelte

@@ -1,171 +0,0 @@
-<script lang="ts">
-  import { tick } from "svelte";
-  import { ChevronDownOutline } from "../../primitives/Icons";
-  import { bloom } from "../../utils/transitions.js";
-
-  interface SelectOption {
-    label: string;
-    value: string;
-  }
-
-  interface Props {
-    options?: SelectOption[];
-    selected?: SelectOption | null;
-    placeholder?: string;
-    class?: string;
-    disabled?: boolean;
-    onselect?: (option: SelectOption) => void;
-  }
-
-  let {
-    options = [],
-    selected = $bindable(null),
-    placeholder = "Select",
-    class: className = "",
-    disabled = false,
-    onselect,
-  }: Props = $props();
-
-  let isOpen = $state(false);
-  let triggerRef = $state<HTMLButtonElement>();
-  let menuRef = $state<HTMLDivElement>();
-  let containerRef = $state<HTMLDivElement>();
-  let focusedIndex = $state(-1);
-  let optionElements = $state<HTMLElement[]>([]);
-
-  async function toggleDropdown() {
-    if (disabled) return;
-    isOpen = !isOpen;
-    if (isOpen) {
-      focusedIndex = -1;
-      await tick();
-      updateOptionElements();
-    }
-  }
-
-  function updateOptionElements() {
-    if (menuRef) {
-      optionElements = Array.from(menuRef.querySelectorAll('[role="option"]'));
-    }
-  }
-
-  function focusOption(index: number) {
-    if (optionElements.length === 0) return;
-    if (index < 0) index = optionElements.length - 1;
-    if (index >= optionElements.length) index = 0;
-    focusedIndex = index;
-    optionElements[focusedIndex]?.focus();
-  }
-
-  function selectOption(option: SelectOption) {
-    selected = option;
-    onselect?.(option);
-    isOpen = false;
-    triggerRef?.focus();
-  }
-
-  // CRITICAL FIX: Click-outside detection using mousedown for reliable detection
-  function handleClickOutside(event: MouseEvent) {
-    if (!isOpen) return;
-
-    // Check if click is inside the container (trigger or menu)
-    if (containerRef && containerRef.contains(event.target as Node)) {
-      return;
-    }
-
-    // Click was outside - close the dropdown
-    isOpen = false;
-  }
-
-  function handleKeyDown(event: KeyboardEvent) {
-    if (!isOpen) return;
-
-    // Only handle if event originated from within this dropdown
-    if (!menuRef?.contains(event.target as Node) && !triggerRef?.contains(event.target as Node)) {
-      return;
-    }
-
-    switch (event.key) {
-      case "Escape":
-        isOpen = false;
-        triggerRef?.focus();
-        event.preventDefault();
-        break;
-      case "ArrowDown":
-        focusOption(focusedIndex + 1);
-        event.preventDefault();
-        break;
-      case "ArrowUp":
-        focusOption(focusedIndex - 1);
-        event.preventDefault();
-        break;
-      case "Home":
-        focusOption(0);
-        event.preventDefault();
-        break;
-      case "End":
-        focusOption(optionElements.length - 1);
-        event.preventDefault();
-        break;
-      case "Tab":
-        isOpen = false;
-        break;
-    }
-  }
-
-  $effect(() => {
-    if (typeof window !== "undefined") {
-      // Use mousedown for click-outside to capture before click completes
-      document.addEventListener("mousedown", handleClickOutside, true);
-      document.addEventListener("keydown", handleKeyDown);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside, true);
-        document.removeEventListener("keydown", handleKeyDown);
-      };
-    }
-  });
-</script>
-
-<div bind:this={containerRef} class="relative inline-block text-left {className}">
-  <button
-    bind:this={triggerRef}
-    type="button"
-    class="inline-flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-hidden focus:ring-blue-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-blue-800 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    onclick={toggleDropdown}
-    aria-haspopup="listbox"
-    aria-expanded={isOpen}
-    aria-label={placeholder}
-    {disabled}
-  >
-    <span class="truncate">
-      {selected?.label || placeholder}
-    </span>
-    <ChevronDownOutline class="w-4 h-4 ml-2 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-  </button>
-
-  {#if isOpen}
-    <div
-      bind:this={menuRef}
-      class="absolute z-10 mt-1 w-full bg-white divide-y divide-gray-100 rounded-lg shadow-lg dark:bg-gray-700 dark:divide-gray-600 max-h-60 overflow-y-auto"
-      role="listbox"
-      aria-label={placeholder}
-      transition:bloom={{ origin: "top left" }}
-    >
-      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-        {#each options as option}
-          <li>
-            <button
-              type="button"
-              class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white {selected?.value === option.value ? 'bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white' : ''}"
-              onclick={() => selectOption(option)}
-              role="option"
-              aria-selected={selected?.value === option.value}
-            >
-              {option.label}
-            </button>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  {/if}
-</div>

package/dist/recipes/inputs/SelectDropdown.svelte.d.ts

@@ -1,16 +0,0 @@
-interface SelectOption {
-    label: string;
-    value: string;
-}
-interface Props {
-    options?: SelectOption[];
-    selected?: SelectOption | null;
-    placeholder?: string;
-    class?: string;
-    disabled?: boolean;
-    onselect?: (option: SelectOption) => void;
-}
-declare const SelectDropdown: import("svelte").Component<Props, {}, "selected">;
-type SelectDropdown = ReturnType<typeof SelectDropdown>;
-export default SelectDropdown;
-//# sourceMappingURL=SelectDropdown.svelte.d.ts.map

package/dist/recipes/inputs/SelectDropdown.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/SelectDropdown.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C;AA8IH,QAAA,MAAM,cAAc,mDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}