@neo4j-ndl/react 4.16.8 → 4.16.9

package/skills/ndl-react/components/modal.md

@@ -0,0 +1,27 @@
+# Modal
+
+Import: `import { Modal } from '@neo4j-ndl/react'`
+
+## Props
+
+### Modal
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | ✅ |  | Content to render inside the Modal. |
+| `container` | `Element` |  |  | The container where the modal will be rendered. |
+| `isOpen` | `boolean` | ✅ |  | Whether the Modal is open. |
+| `onClose` | `((e: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>, reason?: ModalCloseReason) => void)` |  |  | Callback function called when the modal is closed. |
+| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
+| `rootProps` | `HtmlAttributes<"div">` |  |  | Forwards the props to the modal container's wrapper - use with caution |
+| `size` | `'large' \| 'medium' \| 'small' \| 'unset'` |  | `medium` | Sets the size(max-width) of the Modal, use 'unset' for custom sizing. |
+
+Where `Element` is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
+
+Where `HtmlAttributes<"div">` is a type that includes all standard HTML div element attributes plus any custom data attributes (like data-testid or data-value) that follow the data-* pattern.
+
+## Accessibility
+
+## Implementation guidelines
+
+The Modal component follows WAI-ARIA dialog pattern guidelines. Includes features such as focus trapping, keyboard navigation support, and proper ARIA roles for enhanced accessibility.