@getmicdrop/svelte-components 5.9.6 → 5.10.1

package/dist/primitives/Drawer/Drawer.svelte

@@ -1,236 +1,236 @@
-<script lang="ts">
-  import { onDestroy } from "svelte";
-  import { fly, fade } from "svelte/transition";
-  import { typography } from "../../tokens/typography";
-  import type { Snippet } from "svelte";
-
-  interface Props {
-    show?: boolean;
-    hidden?: boolean;
-    title?: string;
-    placement?: string;
-    width?: string;
-    backdrop?: boolean;
-    closeOnBackdropClick?: boolean;
-    closeOnEscape?: boolean;
-    id?: string;
-    edge?: boolean;
-    edgeOffset?: number;
-    onclose?: () => void;
-    onopen?: () => void;
-    header?: Snippet;
-    children?: Snippet;
-    actions?: Snippet;
-    class?: string;
-    [key: string]: unknown;
-  }
-
-  let {
-    show = $bindable(false),
-    hidden = $bindable(true),
-    title = "",
-    placement = "left",
-    width = "md",
-    backdrop = true,
-    closeOnBackdropClick = true,
-    closeOnEscape = true,
-    id = "",
-    edge = false,
-    edgeOffset = 60,
-    onclose,
-    onopen,
-    header,
-    children,
-    actions,
-    class: className = "",
-    ...restProps
-  }: Props = $props();
-
-  let isVisible = $derived(show || !hidden);
-  let drawerElement: HTMLElement | null = $state(null);
-  let previouslyFocusedElement: Element | null = $state(null);
-
-  const widthClasses: Record<string, string> = {
-    sm: "w-64",
-    md: "w-80",
-    lg: "w-96",
-    xl: "w-[28rem]",
-    full: "w-full"
-  };
-
-  let widthClass = $derived(widthClasses[width] || widthClasses.md);
-
-  // Compute fly transition direction based on placement
-  let flyParams = $derived.by(() => {
-    const distance = 400;
-    switch (placement) {
-      case 'left': return { x: -distance, duration: 300 };
-      case 'right': return { x: distance, duration: 300 };
-      case 'top': return { y: -distance, duration: 300 };
-      case 'bottom': return { y: distance, duration: 300 };
-      default: return { x: -distance, duration: 300 };
-    }
-  });
-
-  // Placement classes (without transform - we use Svelte transitions now)
-  let placementClasses = $derived.by(() => {
-    switch (placement) {
-      case 'left':
-        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
-      case 'right':
-        return `top-0 right-0 h-screen ${widthClass} max-w-full border-l border-gray-200 dark:border-gray-700`;
-      case 'top':
-        return `top-0 left-0 right-0 w-full border-b border-gray-200 dark:border-gray-700`;
-      case 'bottom':
-        return `bottom-0 left-0 right-0 w-full border-t border-gray-200 dark:border-gray-700`;
-      default:
-        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
-    }
-  });
-
-  function close() {
-    hidden = true;
-    show = false;
-    onclose?.();
-  }
-
-  function handleBackdropClick(e: MouseEvent) {
-    if (closeOnBackdropClick && e.target === e.currentTarget) {
-      close();
-    }
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (!isVisible) return;
-
-    if (closeOnEscape && e.key === "Escape") {
-      e.preventDefault();
-      close();
-    }
-
-    // Focus trap - keep Tab within drawer
-    if (e.key === "Tab" && drawerElement) {
-      const focusableElements = drawerElement.querySelectorAll<HTMLElement>(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      const firstElement = focusableElements[0];
-      const lastElement = focusableElements[focusableElements.length - 1];
-
-      if (e.shiftKey && document.activeElement === firstElement) {
-        e.preventDefault();
-        lastElement?.focus();
-      } else if (!e.shiftKey && document.activeElement === lastElement) {
-        e.preventDefault();
-        firstElement?.focus();
-      }
-    }
-  }
-
-  function handleEdgeClick() {
-    if (edge && placement === "bottom") {
-      hidden = false;
-      show = true;
-      onopen?.();
-    }
-  }
-
-  // Lock body scroll when drawer is open
-  $effect(() => {
-    if (typeof document !== "undefined") {
-      if (isVisible) {
-        document.body.style.overflow = "hidden";
-        // Store previously focused element and focus drawer
-        previouslyFocusedElement = document.activeElement;
-        // Use setTimeout to ensure drawer is rendered before focusing
-        setTimeout(() => drawerElement?.focus(), 0);
-      } else {
-        document.body.style.overflow = "";
-        // Restore focus when closing
-        if (previouslyFocusedElement && previouslyFocusedElement instanceof HTMLElement) {
-          previouslyFocusedElement.focus();
-        }
-      }
-    }
-  });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.body.style.overflow = "";
-    }
-  });
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<!-- Edge trigger for bottom placement -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-{#if edge && placement === "bottom" && !isVisible}
-  <div
-    class="fixed bottom-0 left-0 right-0 z-40 flex justify-center w-full p-4 cursor-pointer bg-white border-t border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
-    style="bottom: {edgeOffset}px"
-    onclick={handleEdgeClick}
-  >
-    <span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"></span>
-  </div>
-{/if}
-
-<!-- Only render when visible - no transform issues with portals! -->
-{#if isVisible}
-  <!-- Backdrop -->
-  {#if backdrop}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="fixed inset-0 z-30 bg-gray-900/50 dark:bg-gray-900/80"
-      onclick={handleBackdropClick}
-      transition:fade={{ duration: 200 }}
-      role="presentation"
-    ></div>
-  {/if}
-
-  <!-- Drawer panel - proper dialog with focus trap -->
-  <aside
-    bind:this={drawerElement}
-    {id}
-    class="
-      fixed z-40 flex flex-col bg-white dark:bg-gray-800
-      {placementClasses}
-      {className}
-    "
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby={title ? `${id}-label` : undefined}
-    tabindex="-1"
-    transition:fly={flyParams}
-    {...restProps}
-  >
-    <!-- Header (sticky) -->
-    {#if title || header}
-      <header class="shrink-0 p-4 border-b border-gray-200 dark:border-gray-700">
-        {#if header}
-          {@render header()}
-        {:else}
-          <h5
-            id={id ? `${id}-label` : undefined}
-            class={typography.h3}
-          >
-            {title}
-          </h5>
-        {/if}
-      </header>
-    {/if}
-
-    <!-- Content (single scrollable area) -->
-    <div class="flex-1 overflow-y-auto overscroll-contain">
-      {#if children}{@render children()}{/if}
-    </div>
-
-    <!-- Actions (sticky footer) -->
-    {#if actions}
-      <footer class="shrink-0 p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-3">
-        {@render actions()}
-      </footer>
-    {/if}
-  </aside>
-{/if}
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import { fly, fade } from "svelte/transition";
+  import { typography } from "../../tokens/typography";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    show?: boolean;
+    hidden?: boolean;
+    title?: string;
+    placement?: string;
+    width?: string;
+    backdrop?: boolean;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    id?: string;
+    edge?: boolean;
+    edgeOffset?: number;
+    onclose?: () => void;
+    onopen?: () => void;
+    header?: Snippet;
+    children?: Snippet;
+    actions?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    show = $bindable(false),
+    hidden = $bindable(true),
+    title = "",
+    placement = "left",
+    width = "md",
+    backdrop = true,
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    id = "",
+    edge = false,
+    edgeOffset = 60,
+    onclose,
+    onopen,
+    header,
+    children,
+    actions,
+    class: className = "",
+    ...restProps
+  }: Props = $props();
+
+  let isVisible = $derived(show || !hidden);
+  let drawerElement: HTMLElement | null = $state(null);
+  let previouslyFocusedElement: Element | null = $state(null);
+
+  const widthClasses: Record<string, string> = {
+    sm: "w-64",
+    md: "w-80",
+    lg: "w-96",
+    xl: "w-[28rem]",
+    full: "w-full"
+  };
+
+  let widthClass = $derived(widthClasses[width] || widthClasses.md);
+
+  // Compute fly transition direction based on placement
+  let flyParams = $derived.by(() => {
+    const distance = 400;
+    switch (placement) {
+      case 'left': return { x: -distance, duration: 300 };
+      case 'right': return { x: distance, duration: 300 };
+      case 'top': return { y: -distance, duration: 300 };
+      case 'bottom': return { y: distance, duration: 300 };
+      default: return { x: -distance, duration: 300 };
+    }
+  });
+
+  // Placement classes (without transform - we use Svelte transitions now)
+  let placementClasses = $derived.by(() => {
+    switch (placement) {
+      case 'left':
+        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
+      case 'right':
+        return `top-0 right-0 h-screen ${widthClass} max-w-full border-l border-gray-200 dark:border-gray-700`;
+      case 'top':
+        return `top-0 left-0 right-0 w-full border-b border-gray-200 dark:border-gray-700`;
+      case 'bottom':
+        return `bottom-0 left-0 right-0 w-full border-t border-gray-200 dark:border-gray-700`;
+      default:
+        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
+    }
+  });
+
+  function close() {
+    hidden = true;
+    show = false;
+    onclose?.();
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!isVisible) return;
+
+    if (closeOnEscape && e.key === "Escape") {
+      e.preventDefault();
+      close();
+    }
+
+    // Focus trap - keep Tab within drawer
+    if (e.key === "Tab" && drawerElement) {
+      const focusableElements = drawerElement.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement?.focus();
+      } else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement?.focus();
+      }
+    }
+  }
+
+  function handleEdgeClick() {
+    if (edge && placement === "bottom") {
+      hidden = false;
+      show = true;
+      onopen?.();
+    }
+  }
+
+  // Lock body scroll when drawer is open
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      if (isVisible) {
+        document.body.style.overflow = "hidden";
+        // Store previously focused element and focus drawer
+        previouslyFocusedElement = document.activeElement;
+        // Use setTimeout to ensure drawer is rendered before focusing
+        setTimeout(() => drawerElement?.focus(), 0);
+      } else {
+        document.body.style.overflow = "";
+        // Restore focus when closing
+        if (previouslyFocusedElement && previouslyFocusedElement instanceof HTMLElement) {
+          previouslyFocusedElement.focus();
+        }
+      }
+    }
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- Edge trigger for bottom placement -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+{#if edge && placement === "bottom" && !isVisible}
+  <div
+    class="fixed bottom-0 left-0 right-0 z-40 flex justify-center w-full p-4 cursor-pointer bg-white border-t border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
+    style="bottom: {edgeOffset}px"
+    onclick={handleEdgeClick}
+  >
+    <span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"></span>
+  </div>
+{/if}
+
+<!-- Only render when visible - no transform issues with portals! -->
+{#if isVisible}
+  <!-- Backdrop -->
+  {#if backdrop}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="fixed inset-0 z-30 bg-gray-900/50 dark:bg-gray-900/80"
+      onclick={handleBackdropClick}
+      transition:fade={{ duration: 200 }}
+      role="presentation"
+    ></div>
+  {/if}
+
+  <!-- Drawer panel - proper dialog with focus trap -->
+  <aside
+    bind:this={drawerElement}
+    {id}
+    class="
+      fixed z-40 flex flex-col bg-white dark:bg-gray-800
+      {placementClasses}
+      {className}
+    "
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={title ? `${id}-label` : undefined}
+    tabindex="-1"
+    transition:fly={flyParams}
+    {...restProps}
+  >
+    <!-- Header (sticky) -->
+    {#if title || header}
+      <header class="shrink-0 p-4 border-b border-gray-200 dark:border-gray-700">
+        {#if header}
+          {@render header()}
+        {:else}
+          <h5
+            id={id ? `${id}-label` : undefined}
+            class={typography.h3}
+          >
+            {title}
+          </h5>
+        {/if}
+      </header>
+    {/if}
+
+    <!-- Content (single scrollable area) -->
+    <div class="flex-1 overflow-y-auto overscroll-contain">
+      {#if children}{@render children()}{/if}
+    </div>
+
+    <!-- Actions (sticky footer) -->
+    {#if actions}
+      <footer class="shrink-0 p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-3">
+        {@render actions()}
+      </footer>
+    {/if}
+  </aside>
+{/if}