@getmicdrop/svelte-components 5.4.2 → 5.5.0

package/dist/primitives/Input/Select.spec.js

@@ -1,218 +1,218 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Select from "./Select.svelte";
-
-const sampleItems = [
-  { name: "Option 1", value: "opt1" },
-  { name: "Option 2", value: "opt2" },
-  { name: "Option 3", value: "opt3" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(Select, {
-    props: {
-      items: sampleItems,
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("Select Component Tests", () => {
-  test("Renders select with label", () => {
-    setupTest({
-      label: "Test Label",
-      id: "test-select",
-    });
-    expect(screen.getByText("Test Label")).toBeInTheDocument();
-  });
-
-  test("Shows placeholder when no value selected", () => {
-    setupTest({
-      placeholder: "Select an option",
-    });
-    expect(screen.getByText("Select an option")).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();
-  });
-
-  test("Selects item on click", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 2"));
-
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Closes dropdown after selection", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 1"));
-
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Shows selected value", () => {
-    setupTest({
-      value: "opt2",
-    });
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-  });
-
-  test("Dispatches change event on selection", async () => {
-    const { user, component } = setupTest();
-    const changeSpy = vi.fn();
-    component.$on("change", changeSpy);
-
-    const trigger = screen.getByRole("button");
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 3"));
-
-    expect(changeSpy).toHaveBeenCalled();
-    expect(changeSpy.mock.calls[0][0].detail).toEqual({
-      value: "opt3",
-      item: { name: "Option 3", value: "opt3" },
-    });
-  });
-
-  test("Shows required indicator when required", () => {
-    setupTest({
-      label: "Required Field",
-      required: true,
-    });
-    expect(screen.getByText("*")).toBeInTheDocument();
-  });
-
-  test("Displays error state", () => {
-    setupTest({
-      error: "This field is required",
-    });
-    expect(screen.getByText("This field is required")).toBeInTheDocument();
-  });
-
-  test("Disables select when disabled prop is true", 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("Navigates options with keyboard", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard("{Enter}");
-
-    // Second option should be selected (started at 0, moved down twice)
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-  });
-
-  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("Opens dropdown with Enter key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    trigger.focus();
-    await user.keyboard("{Enter}");
-
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-  });
-
-  test("Opens dropdown with Space key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    trigger.focus();
-    await user.keyboard(" ");
-
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-  });
-
-  test("Applies animate focus class by default", () => {
-    setupTest();
-    const trigger = screen.getByRole("button");
-    expect(trigger).toHaveClass("select-animate-focus");
-  });
-
-  test("Does not apply animate focus when disabled", () => {
-    setupTest({
-      animateFocus: false,
-    });
-    const trigger = screen.getByRole("button");
-    expect(trigger).not.toHaveClass("select-animate-focus");
-  });
-
-  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 by clicking on body
-    await user.click(document.body);
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Shows checkmark for selected option", async () => {
-    const { user } = setupTest({
-      value: "opt1",
-    });
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    // The selected option should have a checkmark SVG
-    const options = screen.getAllByRole("option");
-    const selectedOption = options.find(opt => opt.getAttribute("aria-selected") === "true");
-    expect(selectedOption).toBeInTheDocument();
-    expect(selectedOption.querySelector("svg")).toBeInTheDocument();
-  });
-
-  test("Sets aria-expanded correctly", 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");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Select from "./Select.svelte";
+
+const sampleItems = [
+  { name: "Option 1", value: "opt1" },
+  { name: "Option 2", value: "opt2" },
+  { name: "Option 3", value: "opt3" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(Select, {
+    props: {
+      items: sampleItems,
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("Select Component Tests", () => {
+  test("Renders select with label", () => {
+    setupTest({
+      label: "Test Label",
+      id: "test-select",
+    });
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+  });
+
+  test("Shows placeholder when no value selected", () => {
+    setupTest({
+      placeholder: "Select an option",
+    });
+    expect(screen.getByText("Select an option")).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();
+  });
+
+  test("Selects item on click", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 2"));
+
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Closes dropdown after selection", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 1"));
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Shows selected value", () => {
+    setupTest({
+      value: "opt2",
+    });
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+  });
+
+  test("Dispatches change event on selection", async () => {
+    const { user, component } = setupTest();
+    const changeSpy = vi.fn();
+    component.$on("change", changeSpy);
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 3"));
+
+    expect(changeSpy).toHaveBeenCalled();
+    expect(changeSpy.mock.calls[0][0].detail).toEqual({
+      value: "opt3",
+      item: { name: "Option 3", value: "opt3" },
+    });
+  });
+
+  test("Shows required indicator when required", () => {
+    setupTest({
+      label: "Required Field",
+      required: true,
+    });
+    expect(screen.getByText("*")).toBeInTheDocument();
+  });
+
+  test("Displays error state", () => {
+    setupTest({
+      error: "This field is required",
+    });
+    expect(screen.getByText("This field is required")).toBeInTheDocument();
+  });
+
+  test("Disables select when disabled prop is true", 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("Navigates options with keyboard", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+
+    // Second option should be selected (started at 0, moved down twice)
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+  });
+
+  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("Opens dropdown with Enter key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  test("Opens dropdown with Space key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard(" ");
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  test("Applies animate focus class by default", () => {
+    setupTest();
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("select-animate-focus");
+  });
+
+  test("Does not apply animate focus when disabled", () => {
+    setupTest({
+      animateFocus: false,
+    });
+    const trigger = screen.getByRole("button");
+    expect(trigger).not.toHaveClass("select-animate-focus");
+  });
+
+  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 by clicking on body
+    await user.click(document.body);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Shows checkmark for selected option", async () => {
+    const { user } = setupTest({
+      value: "opt1",
+    });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    // The selected option should have a checkmark SVG
+    const options = screen.getAllByRole("option");
+    const selectedOption = options.find(opt => opt.getAttribute("aria-selected") === "true");
+    expect(selectedOption).toBeInTheDocument();
+    expect(selectedOption.querySelector("svg")).toBeInTheDocument();
+  });
+
+  test("Sets aria-expanded correctly", 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");
+  });
+});

package/dist/primitives/Input/Select.stories.svelte

@@ -1,112 +1,112 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Select from './Select.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Select',
-    component: Select,
-    tags: ['autodocs'],
-    argTypes: {
-      label: { control: 'text' },
-      disabled: { control: 'boolean' },
-      required: { control: 'boolean' },
-      errorText: { control: 'text' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Native select dropdown component.',
-        },
-      },
-    },
-  });
-
-  let value = $state('');
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Country">
-        <option value="">Select a country</option>
-        <option value="us">United States</option>
-        <option value="uk">United Kingdom</option>
-        <option value="ca">Canada</option>
-        <option value="au">Australia</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Value">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Size" bind:value={value}>
-        <option value="">Choose size</option>
-        <option value="sm">Small</option>
-        <option value="md">Medium</option>
-        <option value="lg">Large</option>
-      </Select>
-      <p class="text-sm text-gray-500 mt-2">Selected: {value || 'none'}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Error">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Category" errorText="Please select a category">
-        <option value="">Select category</option>
-        <option value="comedy">Comedy</option>
-        <option value="music">Music</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Disabled">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Disabled Select" disabled>
-        <option value="">Cannot select</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Required">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Required Field" required>
-        <option value="">Choose an option</option>
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All States">
-  {#snippet template()}
-    <div class="grid grid-cols-2 gap-6 max-w-xl">
-      <Select label="Default">
-        <option value="">Select option</option>
-        <option value="1">Option 1</option>
-      </Select>
-
-      <Select label="With Error" errorText="This field is required">
-        <option value="">Select option</option>
-        <option value="1">Option 1</option>
-      </Select>
-
-      <Select label="Disabled" disabled>
-        <option value="">Cannot select</option>
-      </Select>
-
-      <Select label="Required" required>
-        <option value="">Select option</option>
-        <option value="1">Option 1</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Select from './Select.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Select',
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      disabled: { control: 'boolean' },
+      required: { control: 'boolean' },
+      errorText: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Native select dropdown component.',
+        },
+      },
+    },
+  });
+
+  let value = $state('');
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Country">
+        <option value="">Select a country</option>
+        <option value="us">United States</option>
+        <option value="uk">United Kingdom</option>
+        <option value="ca">Canada</option>
+        <option value="au">Australia</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Value">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Size" bind:value={value}>
+        <option value="">Choose size</option>
+        <option value="sm">Small</option>
+        <option value="md">Medium</option>
+        <option value="lg">Large</option>
+      </Select>
+      <p class="text-sm text-gray-500 mt-2">Selected: {value || 'none'}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Error">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Category" errorText="Please select a category">
+        <option value="">Select category</option>
+        <option value="comedy">Comedy</option>
+        <option value="music">Music</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Disabled Select" disabled>
+        <option value="">Cannot select</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Required">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Required Field" required>
+        <option value="">Choose an option</option>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All States">
+  {#snippet template()}
+    <div class="grid grid-cols-2 gap-6 max-w-xl">
+      <Select label="Default">
+        <option value="">Select option</option>
+        <option value="1">Option 1</option>
+      </Select>
+
+      <Select label="With Error" errorText="This field is required">
+        <option value="">Select option</option>
+        <option value="1">Option 1</option>
+      </Select>
+
+      <Select label="Disabled" disabled>
+        <option value="">Cannot select</option>
+      </Select>
+
+      <Select label="Required" required>
+        <option value="">Select option</option>
+        <option value="1">Option 1</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>