@getmicdrop/svelte-components 1.0.2 → 1.0.4

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

@@ -0,0 +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");
+  });
+});

package/dist/components/Input/Select.svelte

@@ -0,0 +1,385 @@
+<script>
+  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  // Props matching old Flowbite wrapper for drop-in replacement
+  export let value = "";
+  export let items = []; // Array of { name: string, value: any }
+  export let placeholder = "Select an option";
+  export let label = "";
+  export let required = false;
+  export let disabled = false;
+  export let error = "";
+  export let name = "";
+  export let id = "";
+  export let animateFocus = true; // Enable focus animation effect (auto-disabled when disabled)
+
+  $: shouldAnimate = animateFocus && !disabled;
+
+  let isOpen = false;
+  let triggerElement;
+  let dropdownElement;
+  let focusedIndex = -1;
+
+  $: selectedItem = items.find((item) => item.value === value);
+  $: displayText = selectedItem ? selectedItem.name : placeholder;
+
+  function toggle() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      focusedIndex = items.findIndex((item) => item.value === value);
+    }
+  }
+
+  function close() {
+    isOpen = false;
+    focusedIndex = -1;
+  }
+
+  function selectItem(item) {
+    value = item.value;
+    dispatch("change", { value: item.value, item });
+    close();
+    triggerElement?.focus();
+  }
+
+  function handleKeydown(event) {
+    if (disabled) return;
+
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          selectItem(items[focusedIndex]);
+        } else {
+          toggle();
+        }
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (!isOpen) {
+          isOpen = true;
+          focusedIndex = 0;
+        } else {
+          focusedIndex = Math.min(focusedIndex + 1, items.length - 1);
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (isOpen) {
+          focusedIndex = Math.max(focusedIndex - 1, 0);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  }
+
+  function handleClickOutside(event) {
+    if (
+      triggerElement &&
+      !triggerElement.contains(event.target) &&
+      dropdownElement &&
+      !dropdownElement.contains(event.target)
+    ) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside);
+  });
+
+  onDestroy(() => {
+    document.removeEventListener("click", handleClickOutside);
+  });
+</script>
+
+<div class="select-wrapper">
+  {#if label}
+    <div class="select-label-row">
+      <label for={id || name} class="select-label">
+        {label}{#if required}<span class="select-required">*</span>{/if}
+      </label>
+    </div>
+  {/if}
+
+  <div class="select-container">
+    <button
+      type="button"
+      bind:this={triggerElement}
+      {id}
+      {name}
+      class="select-trigger"
+      class:select-error={error}
+      class:select-disabled={disabled}
+      class:select-open={isOpen}
+      class:select-placeholder={!selectedItem}
+      class:select-animate-focus={shouldAnimate}
+      {disabled}
+      aria-haspopup="listbox"
+      aria-expanded={isOpen}
+      aria-labelledby={label ? `${id || name}-label` : undefined}
+      on:click={toggle}
+      on:keydown={handleKeydown}
+    >
+      <span class="select-value">{displayText}</span>
+      <svg
+        class="select-chevron"
+        class:select-chevron-open={isOpen}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+        />
+      </svg>
+    </button>
+
+    {#if isOpen}
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <ul
+        bind:this={dropdownElement}
+        class="select-dropdown"
+        role="listbox"
+        tabindex="-1"
+        aria-activedescendant={focusedIndex >= 0
+          ? `${id || name}-option-${focusedIndex}`
+          : undefined}
+      >
+        {#each items as item, index}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <li
+            id="{id || name}-option-{index}"
+            class="select-option"
+            class:select-option-selected={item.value === value}
+            class:select-option-focused={index === focusedIndex}
+            role="option"
+            aria-selected={item.value === value}
+            on:click={() => selectItem(item)}
+            on:mouseenter={() => (focusedIndex = index)}
+          >
+            <span class="select-option-text">{item.name}</span>
+            {#if item.value === value}
+              <svg
+                class="select-check"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M4.5 12.75l6 6 9-13.5"
+                />
+              </svg>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+
+  {#if error}
+    <p class="select-error-text">{error}</p>
+  {/if}
+</div>
+
+<style>
+  /* Use same CSS variables as Input for consistency */
+  .select-wrapper {
+    --select-bg: #f9fafb;
+    --select-text: #0d1526;
+    --select-text-placeholder: #6b7280;
+    --select-border: #e5e7eb;
+    --select-border-error: #ff6666;
+    --select-focus-ring: #3b82f6;
+    --select-dropdown-bg: #ffffff;
+    --select-option-hover: #f3f4f6;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .select-label-row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .select-label {
+    color: var(--select-text-primary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .select-required {
+    color: var(--select-border-error);
+    font-weight: 500;
+    font-size: 0.875rem;
+    margin-left: 0.125rem;
+  }
+
+  .select-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 40px;
+    padding: 0.25rem 0.625rem;
+    background-color: var(--select-bg);
+    color: var(--select-text);
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    border: 1px solid var(--select-border);
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    text-align: left;
+  }
+
+  @media (min-width: 640px) {
+    .select-trigger {
+      padding: 0.25rem 0.75rem;
+    }
+  }
+
+  .select-trigger:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--select-focus-ring);
+    border-color: var(--select-focus-ring);
+  }
+
+  .select-trigger:hover:not(:focus):not(.select-disabled) {
+    border-color: var(--select-focus-ring);
+  }
+
+  .select-trigger.select-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .select-trigger.select-error {
+    border-color: var(--select-border-error);
+  }
+
+  .select-trigger.select-placeholder {
+    color: var(--select-text-placeholder);
+  }
+
+  /* Animate focus effect */
+  .select-animate-focus {
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease;
+  }
+
+  .select-animate-focus:focus {
+    transform: scale(1.01);
+  }
+
+  .select-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .select-chevron {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--select-text-placeholder);
+    transition: transform 0.2s ease;
+  }
+
+  .select-chevron-open {
+    transform: rotate(180deg);
+  }
+
+  .select-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    z-index: 50;
+    background-color: var(--select-dropdown-bg);
+    border: 1px solid var(--select-border);
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    max-height: 240px;
+    overflow-y: auto;
+    list-style: none;
+    margin: 0;
+    padding: 0.25rem 0;
+  }
+
+  .select-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--select-text);
+    transition: background-color 0.1s ease;
+  }
+
+  .select-option:hover,
+  .select-option-focused {
+    background-color: var(--select-option-hover);
+  }
+
+  .select-option-selected {
+    font-weight: 600;
+  }
+
+  .select-option-text {
+    flex: 1;
+  }
+
+  .select-check {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--select-focus-ring);
+  }
+
+  .select-error-text {
+    margin-top: 0.25rem;
+    color: var(--select-border-error);
+    font-size: 0.875rem;
+  }
+
+  /* Dark mode overrides */
+  :global(.dark) .select-wrapper {
+    --select-bg: #111827;
+    --select-text: #f7f7f8;
+    --select-text-placeholder: #9ca3af;
+    --select-border: #374151;
+    --select-dropdown-bg: #111827;
+    --select-option-hover: #374151;
+  }
+</style>

package/dist/components/Input/Select.svelte.d.ts

@@ -0,0 +1,48 @@
+/** @typedef {typeof __propDef.props}  SelectProps */
+/** @typedef {typeof __propDef.events}  SelectEvents */
+/** @typedef {typeof __propDef.slots}  SelectSlots */
+export default class Select extends SvelteComponent<{
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    label?: string | undefined;
+    name?: string | undefined;
+    required?: boolean | undefined;
+    placeholder?: string | undefined;
+    id?: string | undefined;
+    value?: string | undefined;
+    animateFocus?: boolean | undefined;
+    items?: any[] | undefined;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        error?: string | undefined;
+        disabled?: boolean | undefined;
+        label?: string | undefined;
+        name?: string | undefined;
+        required?: boolean | undefined;
+        placeholder?: string | undefined;
+        id?: string | undefined;
+        value?: string | undefined;
+        animateFocus?: boolean | undefined;
+        items?: any[] | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Select.svelte.d.ts.map

package/dist/components/Input/Select.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Select.svelte.js"],"names":[],"mappings":"AA6JA,qDAAqD;AACrD,uDAAuD;AACvD,qDAAqD;AAErD;;;;;;;;;;;;;;;;CACC;0BALa,OAAO,SAAS,CAAC,KAAK;2BACtB,OAAO,SAAS,CAAC,MAAM;0BACvB,OAAO,SAAS,CAAC,KAAK;gCA/JJ,QAAQ;AA4JxC;;;;;;;;;;;;;;;;;;;;;EAAkL"}