@getmicdrop/svelte-components 5.21.0 → 5.21.1

package/dist/primitives/BottomSheet/BottomSheet.spec.js

@@ -1,238 +1,238 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, fireEvent, cleanup } from '@testing-library/svelte';
-import BottomSheet from './BottomSheet.svelte';
-import BottomSheetWrapper from './BottomSheetWrapper.test.svelte';
-import BottomSheetWithActions from './BottomSheetWithActions.test.svelte';
-
-describe('BottomSheet Component', () => {
-  beforeEach(() => {
-    // Reset body overflow
-    document.body.style.overflow = '';
-  });
-
-  afterEach(() => {
-    document.body.style.overflow = '';
-    cleanup();
-  });
-
-  it('does not render when open is false', () => {
-    const { container } = render(BottomSheet, { props: { open: false } });
-    const backdrop = container.querySelector('.fixed.inset-0');
-    expect(backdrop).toBeFalsy();
-  });
-
-  it('renders when open is true', () => {
-    const { container } = render(BottomSheet, { props: { open: true } });
-    const backdrop = container.querySelector('.fixed.inset-0');
-    expect(backdrop).toBeTruthy();
-  });
-
-  it('renders title when provided', () => {
-    const { getByText } = render(BottomSheet, {
-      props: { open: true, title: 'Test Title' },
-    });
-    expect(getByText('Test Title')).toBeTruthy();
-  });
-
-  it('does not render title when not provided', () => {
-    const { container } = render(BottomSheet, { props: { open: true } });
-    const title = container.querySelector('h3');
-    expect(title).toBeFalsy();
-  });
-
-  it('locks body scroll when open', async () => {
-    render(BottomSheet, { props: { open: true } });
-    // Wait for reactive update
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(document.body.style.overflow).toBe('hidden');
-  });
-
-  it('unlocks body scroll when closed', async () => {
-    const { rerender } = render(BottomSheetWrapper, { props: { open: true } });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(document.body.style.overflow).toBe('hidden');
-
-    await rerender({ open: false });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-
-    expect(document.body.style.overflow).toBe('');
-  });
-
-  it('dispatches close event on backdrop click', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    const { container } = render(BottomSheet, {
-      props: { open: true, onclose }
-    });
-    const backdrop = container.querySelector('.fixed.inset-0');
-
-    await fireEvent.click(backdrop);
-    expect(closeCalled).toBe(true);
-  });
-
-  it('does not dispatch close when clicking sheet content', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    const { container } = render(BottomSheet, {
-      props: { open: true, onclose }
-    });
-    const sheet = container.querySelector('.bg-white, .dark\\:bg-gray-800');
-
-    await fireEvent.click(sheet);
-    expect(closeCalled).toBe(false);
-  });
-
-  it('dispatches close event on Escape key', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    render(BottomSheet, { props: { open: true, onclose } });
-
-    await fireEvent.keyDown(window, { key: 'Escape' });
-    expect(closeCalled).toBe(true);
-  });
-
-  it('does not dispatch close on Escape when not open', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    render(BottomSheet, { props: { open: false, onclose } });
-
-    await fireEvent.keyDown(window, { key: 'Escape' });
-    expect(closeCalled).toBe(false);
-  });
-
-  it('has handle bar element', () => {
-    const { container } = render(BottomSheet, { props: { open: true } });
-    // The handle is the gray bar with rounded corners
-    const handle = container.querySelector('.w-10.h-1.bg-gray-300');
-    expect(handle).toBeTruthy();
-  });
-
-  it('has content area for slot content', () => {
-    const { container } = render(BottomSheet, { props: { open: true } });
-    // The content area has overflow-y-auto class
-    const content = container.querySelector('.overflow-y-auto');
-    expect(content).toBeTruthy();
-  });
-
-  it('cleans up body overflow on destroy', () => {
-    document.body.style.overflow = 'hidden';
-    const { unmount } = render(BottomSheet, { props: { open: true } });
-
-    unmount();
-
-    expect(document.body.style.overflow).toBe('');
-  });
-
-  it('renders actions slot when provided', () => {
-    const { container } = render(BottomSheetWithActions, { props: { open: true } });
-    // The actions area should contain our buttons
-    const saveBtn = container.querySelector('button');
-    expect(saveBtn).toBeTruthy();
-    // Check both action buttons are rendered
-    const buttons = container.querySelectorAll('button');
-    const buttonTexts = Array.from(buttons).map(b => b.textContent);
-    expect(buttonTexts).toContain('Save');
-    expect(buttonTexts).toContain('Cancel');
-  });
-
-  it('does not render actions area when no actions snippet is provided', () => {
-    const { container } = render(BottomSheet, { props: { open: true } });
-    // The actions footer area should not exist if no actions snippet
-    const actionsArea = container.querySelector('.border-t.border-gray-200');
-    expect(actionsArea).toBeFalsy();
-  });
-
-  it('applies alwaysSheet class when alwaysSheet is true', () => {
-    const { container } = render(BottomSheet, {
-      props: { open: true, alwaysSheet: true }
-    });
-    const backdrop = container.querySelector('.fixed.inset-0');
-    // When alwaysSheet is true, backdrop should NOT have md:items-center
-    expect(backdrop.classList.contains('md:items-center')).toBe(false);
-  });
-
-  it('applies responsive classes when alwaysSheet is false', () => {
-    const { container } = render(BottomSheet, {
-      props: { open: true, alwaysSheet: false }
-    });
-    const backdrop = container.querySelector('.fixed.inset-0');
-    // When alwaysSheet is false, backdrop should have md:items-center
-    expect(backdrop.classList.contains('md:items-center')).toBe(true);
-  });
-
-  it('does not close on backdrop click when target is not currentTarget', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    const { container } = render(BottomSheet, {
-      props: { open: true, onclose }
-    });
-    // Click the inner sheet panel (not the backdrop itself)
-    const sheetPanel = container.querySelector('.bg-white');
-    await fireEvent.click(sheetPanel);
-    expect(closeCalled).toBe(false);
-  });
-
-  it('does not call onclose on Escape when key is not Escape', async () => {
-    let closeCalled = false;
-    const onclose = () => {
-      closeCalled = true;
-    };
-
-    render(BottomSheet, { props: { open: true, onclose } });
-
-    await fireEvent.keyDown(window, { key: 'Enter' });
-    expect(closeCalled).toBe(false);
-  });
-
-  it('handles open toggling from true to false via effect', async () => {
-    const { rerender } = render(BottomSheetWithActions, { props: { open: true } });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(document.body.style.overflow).toBe('hidden');
-
-    await rerender({ open: false });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(document.body.style.overflow).toBe('');
-  });
-
-  it('does not close when clicking on the handle bar inside the sheet', async () => {
-    let closeCalled = false;
-    const onclose = () => { closeCalled = true; };
-
-    const { container } = render(BottomSheet, {
-      props: { open: true, onclose }
-    });
-    // Click the handle bar (a child of the backdrop)
-    const handleBar = container.querySelector('.w-10.h-1.bg-gray-300');
-    await fireEvent.click(handleBar);
-    expect(closeCalled).toBe(false);
-  });
-
-  it('restores body overflow when initially rendered as closed', async () => {
-    // Render initially closed - the $effect should set overflow to ''
-    render(BottomSheet, { props: { open: false } });
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    expect(document.body.style.overflow).toBe('');
-  });
-
-  it('cleans up overflow on destroy when document is available', () => {
-    document.body.style.overflow = 'hidden';
-    const { unmount } = render(BottomSheetWithActions, { props: { open: true } });
-    unmount();
-    expect(document.body.style.overflow).toBe('');
-  });
-});
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent, cleanup } from '@testing-library/svelte';
+import BottomSheet from './BottomSheet.svelte';
+import BottomSheetWrapper from './BottomSheetWrapper.test.svelte';
+import BottomSheetWithActions from './BottomSheetWithActions.test.svelte';
+
+describe('BottomSheet Component', () => {
+  beforeEach(() => {
+    // Reset body overflow
+    document.body.style.overflow = '';
+  });
+
+  afterEach(() => {
+    document.body.style.overflow = '';
+    cleanup();
+  });
+
+  it('does not render when open is false', () => {
+    const { container } = render(BottomSheet, { props: { open: false } });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    expect(backdrop).toBeFalsy();
+  });
+
+  it('renders when open is true', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    expect(backdrop).toBeTruthy();
+  });
+
+  it('renders title when provided', () => {
+    const { getByText } = render(BottomSheet, {
+      props: { open: true, title: 'Test Title' },
+    });
+    expect(getByText('Test Title')).toBeTruthy();
+  });
+
+  it('does not render title when not provided', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
+    const title = container.querySelector('h3');
+    expect(title).toBeFalsy();
+  });
+
+  it('locks body scroll when open', async () => {
+    render(BottomSheet, { props: { open: true } });
+    // Wait for reactive update
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('unlocks body scroll when closed', async () => {
+    const { rerender } = render(BottomSheetWrapper, { props: { open: true } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+
+    await rerender({ open: false });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('dispatches close event on backdrop click', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { open: true, onclose }
+    });
+    const backdrop = container.querySelector('.fixed.inset-0');
+
+    await fireEvent.click(backdrop);
+    expect(closeCalled).toBe(true);
+  });
+
+  it('does not dispatch close when clicking sheet content', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { open: true, onclose }
+    });
+    const sheet = container.querySelector('.bg-card, .dark\\:bg-bg-secondary');
+
+    await fireEvent.click(sheet);
+    expect(closeCalled).toBe(false);
+  });
+
+  it('dispatches close event on Escape key', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    render(BottomSheet, { props: { open: true, onclose } });
+
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closeCalled).toBe(true);
+  });
+
+  it('does not dispatch close on Escape when not open', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    render(BottomSheet, { props: { open: false, onclose } });
+
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closeCalled).toBe(false);
+  });
+
+  it('has handle bar element', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
+    // The handle is the gray bar with rounded corners
+    const handle = container.querySelector('.w-10.h-1.bg-bg-quaternary');
+    expect(handle).toBeTruthy();
+  });
+
+  it('has content area for slot content', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
+    // The content area has overflow-y-auto class
+    const content = container.querySelector('.overflow-y-auto');
+    expect(content).toBeTruthy();
+  });
+
+  it('cleans up body overflow on destroy', () => {
+    document.body.style.overflow = 'hidden';
+    const { unmount } = render(BottomSheet, { props: { open: true } });
+
+    unmount();
+
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('renders actions slot when provided', () => {
+    const { container } = render(BottomSheetWithActions, { props: { open: true } });
+    // The actions area should contain our buttons
+    const saveBtn = container.querySelector('button');
+    expect(saveBtn).toBeTruthy();
+    // Check both action buttons are rendered
+    const buttons = container.querySelectorAll('button');
+    const buttonTexts = Array.from(buttons).map(b => b.textContent);
+    expect(buttonTexts).toContain('Save');
+    expect(buttonTexts).toContain('Cancel');
+  });
+
+  it('does not render actions area when no actions snippet is provided', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
+    // The actions footer area should not exist if no actions snippet
+    const actionsArea = container.querySelector('.border-t.border-border');
+    expect(actionsArea).toBeFalsy();
+  });
+
+  it('applies alwaysSheet class when alwaysSheet is true', () => {
+    const { container } = render(BottomSheet, {
+      props: { open: true, alwaysSheet: true }
+    });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    // When alwaysSheet is true, backdrop should NOT have md:items-center
+    expect(backdrop.classList.contains('md:items-center')).toBe(false);
+  });
+
+  it('applies responsive classes when alwaysSheet is false', () => {
+    const { container } = render(BottomSheet, {
+      props: { open: true, alwaysSheet: false }
+    });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    // When alwaysSheet is false, backdrop should have md:items-center
+    expect(backdrop.classList.contains('md:items-center')).toBe(true);
+  });
+
+  it('does not close on backdrop click when target is not currentTarget', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { open: true, onclose }
+    });
+    // Click the inner sheet panel (not the backdrop itself)
+    const sheetPanel = container.querySelector('.bg-card');
+    await fireEvent.click(sheetPanel);
+    expect(closeCalled).toBe(false);
+  });
+
+  it('does not call onclose on Escape when key is not Escape', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    render(BottomSheet, { props: { open: true, onclose } });
+
+    await fireEvent.keyDown(window, { key: 'Enter' });
+    expect(closeCalled).toBe(false);
+  });
+
+  it('handles open toggling from true to false via effect', async () => {
+    const { rerender } = render(BottomSheetWithActions, { props: { open: true } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+
+    await rerender({ open: false });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('does not close when clicking on the handle bar inside the sheet', async () => {
+    let closeCalled = false;
+    const onclose = () => { closeCalled = true; };
+
+    const { container } = render(BottomSheet, {
+      props: { open: true, onclose }
+    });
+    // Click the handle bar (a child of the backdrop)
+    const handleBar = container.querySelector('.w-10.h-1.bg-bg-quaternary');
+    await fireEvent.click(handleBar);
+    expect(closeCalled).toBe(false);
+  });
+
+  it('restores body overflow when initially rendered as closed', async () => {
+    // Render initially closed - the $effect should set overflow to ''
+    render(BottomSheet, { props: { open: false } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('cleans up overflow on destroy when document is available', () => {
+    document.body.style.overflow = 'hidden';
+    const { unmount } = render(BottomSheetWithActions, { props: { open: true } });
+    unmount();
+    expect(document.body.style.overflow).toBe('');
+  });
+});

package/dist/primitives/BottomSheet/BottomSheet.stories.svelte

@@ -1,83 +1,83 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import BottomSheet from './BottomSheet.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/BottomSheet',
-    component: BottomSheet,
-    tags: ['autodocs'],
-    argTypes: {
-      show: {
-        control: 'boolean',
-        description: 'Controls visibility of the bottom sheet',
-      },
-      title: {
-        control: 'text',
-        description: 'Optional title displayed at the top',
-      },
-    },
-  });
-</script>
-
-<script>
-  import Button from '../Button/Button.svelte';
-
-  let showBasic = $state(false);
-  let showWithActions = $state(false);
-  let showWithTitle = $state(false);
-</script>
-
-
-<Story
-  name="Default"
-  args={{
-    title: '',
-  }}
-/>
-
-<Story name="With Title">
-  <Button onclick={() => (showWithTitle = true)}>Open With Title</Button>
-  <BottomSheet
-    show={showWithTitle}
-    title="Bottom Sheet Title"
-    onclose={() => (showWithTitle = false)}
-  >
-    <p>This bottom sheet has a title at the top.</p>
-    <p>The title helps provide context for the sheet's purpose.</p>
-  </BottomSheet>
-</Story>
-
-<Story name="With Actions">
-  <Button onclick={() => (showWithActions = true)}>Open With Actions</Button>
-  <BottomSheet
-    show={showWithActions}
-    title="Confirm Action"
-    onclose={() => (showWithActions = false)}
-  >
-    <p>Are you sure you want to proceed with this action?</p>
-    {#snippet actions()}
-      <Button variant="alternative" onclick={() => (showWithActions = false)}>
-        Cancel
-      </Button>
-      <Button variant="default" onclick={() => (showWithActions = false)}>
-        Confirm
-      </Button>
-    {/snippet}
-  </BottomSheet>
-</Story>
-
-<Story name="Long Content">
-  <Button onclick={() => showBasic = true}>Open With Long Content</Button>
-  <BottomSheet
-    show={showBasic}
-    title="Privacy Policy"
-    onclose={() => (showBasic = false)}
-  >
-    <div>
-      {#each Array(20) as _, i}
-        <p>This is paragraph {i + 1} of the long content. The sheet is scrollable when content exceeds the viewport.</p>
-      {/each}
-    </div>
-  </BottomSheet>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import BottomSheet from './BottomSheet.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/BottomSheet',
+    component: BottomSheet,
+    tags: ['autodocs'],
+    argTypes: {
+      show: {
+        control: 'boolean',
+        description: 'Controls visibility of the bottom sheet',
+      },
+      title: {
+        control: 'text',
+        description: 'Optional title displayed at the top',
+      },
+    },
+  });
+</script>
+
+<script>
+  import Button from '../Button/Button.svelte';
+
+  let showBasic = $state(false);
+  let showWithActions = $state(false);
+  let showWithTitle = $state(false);
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    title: '',
+  }}
+/>
+
+<Story name="With Title">
+  <Button onclick={() => (showWithTitle = true)}>Open With Title</Button>
+  <BottomSheet
+    show={showWithTitle}
+    title="Bottom Sheet Title"
+    onclose={() => (showWithTitle = false)}
+  >
+    <p>This bottom sheet has a title at the top.</p>
+    <p>The title helps provide context for the sheet's purpose.</p>
+  </BottomSheet>
+</Story>
+
+<Story name="With Actions">
+  <Button onclick={() => (showWithActions = true)}>Open With Actions</Button>
+  <BottomSheet
+    show={showWithActions}
+    title="Confirm Action"
+    onclose={() => (showWithActions = false)}
+  >
+    <p>Are you sure you want to proceed with this action?</p>
+    {#snippet actions()}
+      <Button variant="alternative" onclick={() => (showWithActions = false)}>
+        Cancel
+      </Button>
+      <Button variant="default" onclick={() => (showWithActions = false)}>
+        Confirm
+      </Button>
+    {/snippet}
+  </BottomSheet>
+</Story>
+
+<Story name="Long Content">
+  <Button onclick={() => showBasic = true}>Open With Long Content</Button>
+  <BottomSheet
+    show={showBasic}
+    title="Privacy Policy"
+    onclose={() => (showBasic = false)}
+  >
+    <div>
+      {#each Array(20) as _, i}
+        <p>This is paragraph {i + 1} of the long content. The sheet is scrollable when content exceeds the viewport.</p>
+      {/each}
+    </div>
+  </BottomSheet>
+</Story>