@abstraks-dev/ui-library 2.2.1 → 2.4.0

package/README.md

@@ -18,6 +18,8 @@ import {
 	Header,
 	Hero,
 	Alert,
+	Modal,
+	Prompt,
 } from '@abstraks-dev/ui-library';
 import '@abstraks-dev/ui-library/dist/styles/main.css';
 
@@ -179,6 +181,103 @@ Alert messages with different types.
 <Alert type="info" message="New features available!" />
 ```
 
+#### Modal
+
+Accessible modal dialog component with portal rendering.
+
+```jsx
+import { useState } from 'react';
+import { Modal, Button } from '@abstraks-dev/ui-library';
+
+function MyComponent() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<>
+			<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+			<Modal
+				isOpen={isOpen}
+				onClose={() => setIsOpen(false)}
+				title='Confirm Action'
+				size='md'
+				footer={
+					<>
+						<Button variant='ghost' onClick={() => setIsOpen(false)}>
+							Cancel
+						</Button>
+						<Button variant='primary' onClick={handleConfirm}>
+							Confirm
+						</Button>
+					</>
+				}
+			>
+				<p>Are you sure you want to proceed with this action?</p>
+			</Modal>
+		</>
+	);
+}
+```
+
+Available sizes: `sm`, `md`, `lg`, `xl`, `full`
+
+Props:
+
+- `isOpen` - Controls modal visibility
+- `onClose` - Callback when modal requests to close
+- `title` - Modal title
+- `children` - Modal body content
+- `footer` - Custom footer content (typically buttons)
+- `size` - Modal width size (default: `md`)
+- `closeOnBackdropClick` - Allow closing by clicking backdrop (default: `true`)
+- `closeOnEscape` - Allow closing with Escape key (default: `true`)
+- `showCloseButton` - Show X close button in header (default: `true`)
+- `preventBodyScroll` - Lock body scroll when open (default: `true`)
+
+#### Prompt
+
+Lightweight confirmation dialog for user actions like deletes or destructive operations.
+
+```jsx
+import { useState } from 'react';
+import { Prompt, Button } from '@abstraks-dev/ui-library';
+
+function MyComponent() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const handleDelete = () => {
+		// Perform delete action
+		console.log('Item deleted');
+		setIsOpen(false);
+	};
+
+	return (
+		<>
+			<Button variant='error' onClick={() => setIsOpen(true)}>
+				Delete Item
+			</Button>
+			<Prompt
+				message='Are you sure you want to delete this item? This action cannot be undone.'
+				open={isOpen}
+				onConfirm={handleDelete}
+				onCancel={() => setIsOpen(false)}
+				confirmText='Delete'
+				cancelText='Cancel'
+			/>
+		</>
+	);
+}
+```
+
+Props:
+
+- `message` **(required)** - The confirmation message to display
+- `open` - Controls prompt visibility (default: `false`)
+- `onConfirm` - Callback when user clicks confirm button
+- `onCancel` - Callback when user clicks cancel button
+- `confirmText` - Text for confirm button (default: `'Yes'`)
+- `cancelText` - Text for cancel button (default: `'Cancel'`)
+- `showCancel` - Whether to show cancel button (default: `true`)
+
 #### Error
 
 Error message component.

package/dist/__tests__/Footer.test.js

@@ -35,7 +35,7 @@ describe('Footer', () => {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
       hasAuth: false
     }));
-    expect(_react2.screen.getByText(/© 2025 Abstraks. All rights reserved./)).toBeInTheDocument();
+    expect(_react2.screen.getByText(/© 2026 Abstraks. All rights reserved./)).toBeInTheDocument();
   });
   it('renders auth menu when hasAuth is true on mobile', () => {
     // Mock mobile screen size so auth menu shows
@@ -110,7 +110,7 @@ describe('Footer', () => {
       hasAuth: true,
       authMenu: /*#__PURE__*/_react.default.createElement("li", null, "Menu")
     }));
-    expect(_react2.screen.queryByText(/© 2025 Abstraks. All rights reserved./)).not.toBeInTheDocument();
+    expect(_react2.screen.queryByText(/© 2026 Abstraks. All rights reserved./)).not.toBeInTheDocument();
   });
   it('renders with copyright when hasAuth is true but navigation props are provided', () => {
     // Mock desktop screen size to test desktop behavior with navigation props
@@ -122,7 +122,7 @@ describe('Footer', () => {
       authMenu: /*#__PURE__*/_react.default.createElement("li", null, "Menu"),
       navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "Nav One")
     }));
-    expect(_react2.screen.queryByText(/© 2025 Abstraks. All rights reserved./)).toBeInTheDocument();
+    expect(_react2.screen.queryByText(/© 2026 Abstraks. All rights reserved./)).toBeInTheDocument();
   });
   it('renders with custom className', () => {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {

package/dist/__tests__/Modal.test.js

@@ -0,0 +1,480 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Modal = require("../components/Modal");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+// Mock createPortal to render in the same container for testing
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: node => node
+}));
+describe('Modal Component', () => {
+  // Helper function to set up tests
+  const defaultProps = {
+    isOpen: true,
+    onClose: jest.fn(),
+    title: 'Test Modal',
+    children: /*#__PURE__*/_react.default.createElement("p", null, "Modal content")
+  };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  afterEach(() => {
+    // Clean up body styles
+    document.body.style.overflow = '';
+    document.body.style.paddingRight = '';
+  });
+  describe('Rendering', () => {
+    test('renders modal when isOpen is true', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, defaultProps));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Test Modal')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Modal content')).toBeInTheDocument();
+    });
+    test('does not render when isOpen is false', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: false
+      })));
+      expect(_react2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    test('renders with custom className', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        className: "custom-modal"
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveClass('modal', 'custom-modal');
+    });
+    test('renders without title', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        title: undefined
+      })));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      expect(_react2.screen.queryByText('Test Modal')).not.toBeInTheDocument();
+    });
+    test('renders with footer content', () => {
+      const footer = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", null, "Cancel"), /*#__PURE__*/_react.default.createElement("button", null, "Confirm"));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        footer: footer
+      })));
+      expect(_react2.screen.getByText('Cancel')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Confirm')).toBeInTheDocument();
+    });
+    test('renders with custom header content', () => {
+      const headerContent = /*#__PURE__*/_react.default.createElement("div", null, "Custom Header");
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        headerContent: headerContent
+      })));
+      expect(_react2.screen.getByText('Custom Header')).toBeInTheDocument();
+    });
+    test('renders close button by default', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, defaultProps));
+      const closeButton = _react2.screen.getByLabelText('Close modal');
+      expect(closeButton).toBeInTheDocument();
+    });
+    test('does not render close button when showCloseButton is false', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        showCloseButton: false
+      })));
+      expect(_react2.screen.queryByLabelText('Close modal')).not.toBeInTheDocument();
+    });
+  });
+  describe('Size Variants', () => {
+    test('applies default medium size class', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, defaultProps));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveClass('modal--md');
+    });
+    test('applies small size class', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        size: "sm"
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveClass('modal--sm');
+    });
+    test('applies large size class', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        size: "lg"
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveClass('modal--lg');
+    });
+    test('applies extra large size class', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        size: "xl"
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveClass('modal--xl');
+    });
+    test('applies full size class', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        size: "full"
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveClass('modal--full');
+    });
+    test('applies centered class by default', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, defaultProps));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveClass('modal--centered');
+    });
+    test('does not apply centered class when centered is false', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        centered: false
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).not.toHaveClass('modal--centered');
+    });
+  });
+  describe('Accessibility', () => {
+    test('has correct ARIA attributes', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, defaultProps));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveAttribute('aria-modal', 'true');
+      expect(modal).toHaveAttribute('aria-label', 'Test Modal');
+    });
+    test('uses aria-labelledby when title is provided', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, defaultProps));
+      const modal = _react2.screen.getByRole('dialog');
+      const titleId = modal.getAttribute('aria-labelledby');
+      expect(titleId).toBeTruthy();
+      const title = document.getElementById(titleId);
+      expect(title).toHaveTextContent('Test Modal');
+    });
+    test('uses custom aria-label when provided', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        "aria-label": "Custom label"
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveAttribute('aria-label', 'Custom label');
+    });
+    test('uses custom aria-describedby when provided', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        "aria-describedby": "custom-description"
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveAttribute('aria-describedby', 'custom-description');
+    });
+    test('supports custom role', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        role: "alertdialog"
+      })));
+      expect(_react2.screen.getByRole('alertdialog')).toBeInTheDocument();
+    });
+  });
+  describe('Close Behavior', () => {
+    test('calls onClose when close button is clicked', async () => {
+      const onClose = jest.fn();
+      const user = _userEvent.default.setup();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        onClose: onClose
+      })));
+      const closeButton = _react2.screen.getByLabelText('Close modal');
+      await user.click(closeButton);
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    test('calls onClose when Escape key is pressed', () => {
+      const onClose = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        onClose: onClose
+      })));
+      _react2.fireEvent.keyDown(document, {
+        key: 'Escape'
+      });
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    test('does not call onClose on Escape when closeOnEscape is false', () => {
+      const onClose = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        onClose: onClose,
+        closeOnEscape: false
+      })));
+      _react2.fireEvent.keyDown(document, {
+        key: 'Escape'
+      });
+      expect(onClose).not.toHaveBeenCalled();
+    });
+    test('calls onClose when backdrop is clicked', async () => {
+      const onClose = jest.fn();
+      const user = _userEvent.default.setup();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        onClose: onClose
+      })));
+      const overlay = _react2.screen.getByRole('dialog').parentElement;
+      await user.click(overlay);
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    test('does not call onClose when backdrop is clicked and closeOnBackdropClick is false', async () => {
+      const onClose = jest.fn();
+      const user = _userEvent.default.setup();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        onClose: onClose,
+        closeOnBackdropClick: false
+      })));
+      const overlay = _react2.screen.getByRole('dialog').parentElement;
+      await user.click(overlay);
+      expect(onClose).not.toHaveBeenCalled();
+    });
+    test('does not call onClose when modal content is clicked', async () => {
+      const onClose = jest.fn();
+      const user = _userEvent.default.setup();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        onClose: onClose
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      await user.click(modal);
+      expect(onClose).not.toHaveBeenCalled();
+    });
+    test('handles missing onClose gracefully', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        onClose: undefined
+      })));
+      expect(() => {
+        _react2.fireEvent.keyDown(document, {
+          key: 'Escape'
+        });
+      }).not.toThrow();
+    });
+  });
+  describe('Body Scroll Lock', () => {
+    test('locks body scroll when modal opens with preventBodyScroll true', () => {
+      const {
+        rerender
+      } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: false,
+        preventBodyScroll: true
+      })));
+      expect(document.body.style.overflow).not.toBe('hidden');
+      rerender(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: true,
+        preventBodyScroll: true
+      })));
+      expect(document.body.style.overflow).toBe('hidden');
+    });
+    test('restores body scroll when modal closes', () => {
+      const originalOverflow = document.body.style.overflow;
+      const {
+        rerender
+      } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: true,
+        preventBodyScroll: true
+      })));
+      expect(document.body.style.overflow).toBe('hidden');
+      rerender(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: false,
+        preventBodyScroll: true
+      })));
+      expect(document.body.style.overflow).toBe(originalOverflow);
+    });
+    test('does not lock body scroll when preventBodyScroll is false', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: true,
+        preventBodyScroll: false
+      })));
+      expect(document.body.style.overflow).not.toBe('hidden');
+    });
+  });
+  describe('Focus Management', () => {
+    test('stores and restores focus when modal closes', async () => {
+      const button = document.createElement('button');
+      document.body.appendChild(button);
+      button.focus();
+      expect(document.activeElement).toBe(button);
+      const {
+        rerender
+      } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: true
+      })));
+      rerender(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: false
+      })));
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(button);
+      });
+      document.body.removeChild(button);
+    });
+  });
+  describe('Keyboard Events', () => {
+    test('ignores non-Escape key presses', () => {
+      const onClose = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        onClose: onClose
+      })));
+      _react2.fireEvent.keyDown(document, {
+        key: 'Enter'
+      });
+      _react2.fireEvent.keyDown(document, {
+        key: 'Tab'
+      });
+      _react2.fireEvent.keyDown(document, {
+        key: 'Space'
+      });
+      expect(onClose).not.toHaveBeenCalled();
+    });
+    test('only closes when modal is open', () => {
+      const onClose = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: false,
+        onClose: onClose
+      })));
+      _react2.fireEvent.keyDown(document, {
+        key: 'Escape'
+      });
+      expect(onClose).not.toHaveBeenCalled();
+    });
+  });
+  describe('Custom Props', () => {
+    test('passes through additional props to modal element', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        "data-testid": "custom-modal",
+        "data-custom": "test-value"
+      })));
+      const modal = _react2.screen.getByTestId('custom-modal');
+      expect(modal).toHaveAttribute('data-custom', 'test-value');
+    });
+    test('uses custom component name', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        componentName: "custom-modal"
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveClass('custom-modal');
+    });
+    test('uses custom id', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        id: "custom-id"
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toHaveAttribute('id', 'custom-id');
+    });
+  });
+  describe('Header Variations', () => {
+    test('renders header with title and close button', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, defaultProps));
+      expect(_react2.screen.getByText('Test Modal')).toBeInTheDocument();
+      expect(_react2.screen.getByLabelText('Close modal')).toBeInTheDocument();
+    });
+    test('renders header with only close button when no title', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        title: undefined
+      })));
+      expect(_react2.screen.getByLabelText('Close modal')).toBeInTheDocument();
+      expect(_react2.screen.getByRole('dialog').querySelector('.modal__header')).toBeInTheDocument();
+    });
+    test('renders custom header content', () => {
+      const headerContent = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", null, "Custom Title"), /*#__PURE__*/_react.default.createElement("p", null, "Subtitle"));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        headerContent: headerContent,
+        title: undefined
+      })));
+      expect(_react2.screen.getByText('Custom Title')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Subtitle')).toBeInTheDocument();
+    });
+    test('does not render header section when no title, headerContent, or showCloseButton', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        title: undefined,
+        headerContent: undefined,
+        showCloseButton: false
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal.querySelector('.modal__header')).not.toBeInTheDocument();
+    });
+  });
+  describe('Footer Variations', () => {
+    test('renders footer when provided', () => {
+      const footer = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", null, "Cancel"), /*#__PURE__*/_react.default.createElement("button", null, "Submit"));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        footer: footer
+      })));
+      const modalFooter = _react2.screen.getByRole('dialog').querySelector('.modal__footer');
+      expect(modalFooter).toBeInTheDocument();
+      expect(_react2.screen.getByText('Cancel')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Submit')).toBeInTheDocument();
+    });
+    test('does not render footer when not provided', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        footer: undefined
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal.querySelector('.modal__footer')).not.toBeInTheDocument();
+    });
+  });
+  describe('Content Rendering', () => {
+    test('renders simple text children', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, defaultProps, "Simple text content"));
+      expect(_react2.screen.getByText('Simple text content')).toBeInTheDocument();
+    });
+    test('renders complex nested children', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, defaultProps, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Paragraph 1"), /*#__PURE__*/_react.default.createElement("p", null, "Paragraph 2"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Item 1"), /*#__PURE__*/_react.default.createElement("li", null, "Item 2")))));
+      expect(_react2.screen.getByText('Paragraph 1')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Paragraph 2')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Item 1')).toBeInTheDocument();
+      expect(_react2.screen.getByText('Item 2')).toBeInTheDocument();
+    });
+  });
+  describe('Event Handling', () => {
+    test('prevents event propagation on Escape key', () => {
+      const onClose = jest.fn();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        onClose: onClose
+      })));
+      const event = new KeyboardEvent('keydown', {
+        key: 'Escape',
+        bubbles: true,
+        cancelable: true
+      });
+      document.dispatchEvent(event);
+      expect(event.defaultPrevented).toBe(true);
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    test('backdrop click only triggers on overlay, not children', async () => {
+      const onClose = jest.fn();
+      const user = _userEvent.default.setup();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        onClose: onClose
+      })));
+
+      // Click on modal content
+      const modalBody = _react2.screen.getByText('Modal content');
+      await user.click(modalBody);
+      expect(onClose).not.toHaveBeenCalled();
+
+      // Click on overlay (parent of modal)
+      const overlay = _react2.screen.getByRole('dialog').parentElement;
+      await user.click(overlay);
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe('Edge Cases', () => {
+    test('handles rapid open/close toggles', () => {
+      const {
+        rerender
+      } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: true
+      })));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+      rerender(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: false
+      })));
+      expect(_react2.screen.queryByRole('dialog')).not.toBeInTheDocument();
+      rerender(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        isOpen: true
+      })));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+    });
+    test('handles null children gracefully', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        children: null
+      })));
+      const modal = _react2.screen.getByRole('dialog');
+      expect(modal).toBeInTheDocument();
+    });
+    test('handles undefined title gracefully', () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({}, defaultProps, {
+        title: undefined
+      })));
+      expect(_react2.screen.getByRole('dialog')).toBeInTheDocument();
+    });
+  });
+});