Replace Modal.isOpen with controlled boolean

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "publishConfig": {
     "access": "public"
   },

packages/core/src/lib/__tests__/modal.spec.ts

@@ -1,63 +1,81 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
+import type { ComponentProps } from 'svelte';
 import Modal from '../modal.svelte';
-import { writable, get } from 'svelte/store';
 
 describe('Modal', () => {
-  let isOpen = writable(true);
+  const onClose = vi.fn();
 
-  beforeEach(() => {
-    isOpen = writable(true);
+  const renderSubject = (props: ComponentProps<Modal>) => {
+    const { component } = render(Modal, props);
+    component.$on('close', onClose);
+  };
+
+  it('should be visible if open is true ', () => {
+    renderSubject({ isOpen: true });
+
+    const modal = screen.queryByRole('dialog');
+
+    expect(modal).toBeInTheDocument();
+    expect(modal).toHaveAttribute('aria-modal', 'true');
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('should not be visible if open is false', () => {
+    renderSubject({ isOpen: false });
+
+    const modal = screen.queryByRole('dialog');
+
+    expect(modal).not.toBeInTheDocument();
+    expect(onClose).not.toHaveBeenCalled();
   });
 
   it('should close modal when close icon button is clicked', async () => {
-    render(Modal, { isOpen });
     const user = userEvent.setup();
+    renderSubject({ isOpen: true });
 
     const modal = screen.getByRole('dialog');
     const closeButton = within(modal).getByRole('button', { name: /close/iu });
 
     await user.click(closeButton);
-
-    expect(get(isOpen)).toBe(false);
+    expect(onClose).toHaveBeenCalledOnce();
   });
 
   it('should close modal when clicked outside the modal', async () => {
-    render(Modal, { isOpen });
     const user = userEvent.setup();
+    renderSubject({ isOpen: true });
 
     const modal = screen.getByRole('dialog');
     await user.click(modal.parentElement!);
 
-    expect(get(isOpen)).toBe(false);
+    expect(onClose).toHaveBeenCalledOnce();
   });
 
-  it('if open is true, modal should be visible', () => {
-    render(Modal, { isOpen });
-    const modal = screen.queryByRole('dialog');
-    expect(modal).toBeInTheDocument();
-    expect(modal).toHaveAttribute('aria-modal', 'true');
-  });
+  it('should close modal when escape key is pressed', async () => {
+    const user = userEvent.setup();
+    renderSubject({ isOpen: true });
 
-  it('if open is false, modal should not be visible', () => {
-    isOpen.set(false);
-    render(Modal, { isOpen });
-    const modal = screen.queryByRole('dialog');
-    expect(modal).not.toBeInTheDocument();
+    await user.keyboard('{Escape}');
+
+    expect(onClose).toHaveBeenCalledOnce();
   });
 
-  it('should close modal when escape key is pressed', async () => {
-    render(Modal, { isOpen });
+  it('should not emit close events on escape if the modal is closed', async () => {
     const user = userEvent.setup();
+    renderSubject({ isOpen: false });
+
     await user.keyboard('{Escape}');
-    expect(get(isOpen)).toBe(false);
+
+    expect(onClose).not.toHaveBeenCalled();
   });
 
   it('should focus on heading element on mount', () => {
-    render(Modal, { isOpen });
+    render(Modal, { isOpen: true });
+
     const modal = screen.getByRole('dialog');
     const heading = within(modal).getByRole('heading');
+
     expect(heading).toHaveFocus();
   });
 });

packages/core/src/lib/modal.svelte

@@ -4,50 +4,62 @@
 Creates a modal overlay.
 
 ```svelte
-    <div>
-      <Button on:click={handleOpenModal}>Open Modal</Button>
-      <Modal open={modalOpen} on:close={handleCloseModal}>
-        <span slot="title">This is the modal demo</span>
-        <span slot="message">Are you sure you want to print a statement to the console?</span>
-        <Button
-          slot="primary"
-          on:click={() => console.log('statement')}
-        >
-          Print
-        </Button>
-        <Button slot="secondary" variant="dark" on:click={handleCloseModal}>
-          Cancel
-        </Button>
-      </Modal>
-    </div>
+<script lang="ts">
+  let isOpen = false
+  const handleOpen = () => (isOpen = true)
+  const handleClose = () => (isOpen = false)
+</script>
+
+<div>
+  <Button on:click={handleOpen}>
+    Open Modal
+  </Button>
+  <Modal {isOpen} on:close={handleClose}>
+    <svelte:fragment slot="title">
+      This is the modal demo
+    </svelte:fragment>
+    <svelte:fragment slot="message">
+      Are you sure you want to print a statement to the console?
+    </svelte:fragment>
+    <Button
+      slot="primary"
+      on:click={() => console.log('statement')}
+    >
+      Print
+    </Button>
+    <Button
+      slot="secondary"
+      variant="dark"
+      on:click={handleClose}
+    >
+      Cancel
+    </Button>
+  </Modal>
+</div>
 ```
 -->
 <svelte:options immutable />
 
 <script lang="ts">
 import cx from 'classnames';
+import { createEventDispatcher } from 'svelte';
 import IconButton from './button/icon-button.svelte';
 import { clickOutside } from '$lib';
-import type { Writable } from 'svelte/store';
 
 /** Whether the modal is open. */
-export let isOpen: Writable<boolean>;
+export let isOpen: boolean;
 
-$: if (typeof document !== 'undefined') {
-  document.body.classList.toggle('overflow-hidden', $isOpen);
-}
+/** The variant of the modal. */
+export let variant: 'small' | '' = '';
 
 let headingElement: HTMLElement | undefined;
 
-$: headingElement?.focus();
-
-/** The variant of the modal. */
-export let variant: 'small' | '' = '';
+const dispatch = createEventDispatcher<{
+  close: undefined;
+}>();
 
 const handleCloseModal = () => {
-  if ($isOpen) {
-    isOpen.set(false);
-  }
+  dispatch('close');
 };
 
 const handleEscapePress = (event: KeyboardEvent) => {
@@ -56,11 +68,17 @@ const handleEscapePress = (event: KeyboardEvent) => {
     handleCloseModal();
   }
 };
+
+$: if (typeof document !== 'undefined') {
+  document.body.classList.toggle('overflow-hidden', isOpen);
+}
+
+$: headingElement?.focus();
 </script>
 
-<svelte:window on:keydown={handleEscapePress} />
+<svelte:window on:keydown={isOpen ? handleEscapePress : undefined} />
 
-{#if $isOpen}
+{#if isOpen}
   <div
     class="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-40"
     role="dialog"