@getmicdrop/svelte-components 5.20.2 → 5.21.0

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>

package/dist/primitives/Dropdown/Dropdown.svelte

@@ -1,179 +1,179 @@
-<script lang="ts">
-  import { onMount, onDestroy, tick, setContext } from "svelte";
-  import type { Snippet } from "svelte";
-  import { bloom } from "../../utils/transitions.js";
-
-  const defaultLabels = {
-    menu: 'Menu',
-  };
-
-  interface Props {
-    open?: boolean;
-    activeUrl?: string;
-    placement?: string;
-    class?: string;
-    /** @deprecated Use `labels.menu` instead */
-    ariaLabel?: string;
-    onclose?: () => void;
-    children?: Snippet;
-    labels?: Partial<typeof defaultLabels>;
-    [key: string]: unknown;
-  }
-
-  let {
-    open = $bindable(false),
-    activeUrl = "",
-    placement = "bottom",
-    class: className = "",
-    ariaLabel = undefined,
-    onclose,
-    children,
-    labels: userLabels = {},
-    ...restProps
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  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 ?? labels.menu}
-    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";
+
+  const defaultLabels = {
+    menu: 'Menu',
+  };
+
+  interface Props {
+    open?: boolean;
+    activeUrl?: string;
+    placement?: string;
+    class?: string;
+    /** @deprecated Use `labels.menu` instead */
+    ariaLabel?: string;
+    onclose?: () => void;
+    children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  let {
+    open = $bindable(false),
+    activeUrl = "",
+    placement = "bottom",
+    class: className = "",
+    ariaLabel = undefined,
+    onclose,
+    children,
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  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 ?? labels.menu}
+    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}