mentionize 0.0.5 → 0.0.6

package/README.md

@@ -1,8 +1,9 @@
 ![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)
 
-<p align="center">
-    <img src="./.github/assets/logo.png" width="700"/>
-</p>
+<div align="center">
+  <img src="./.github/assets/logo.png" width="300" alt="Mentionize Logo" />
+</div>
+
 <h1 align="center">
     Mentionize
 </h1>
@@ -95,6 +96,7 @@ Defines how a trigger character activates suggestions and how mentions are seria
 | `dropdownWidth?` | `number` | Dropdown width in pixels (default: 250) |
 | `loadingContent?` | `ReactNode` | Content shown while loading async results (default: `"Loading..."`) |
 | `renderDropdown?` | `(props: DropdownRenderProps) => ReactNode` | Full custom dropdown rendering |
+| `dropdownPositionStrategy?` | `"fixed" \| "absolute"` | Positioning strategy for the dropdown (default: `"fixed"`). Use `"absolute"` inside CSS-transformed ancestors such as modals — see [Modals & CSS Transforms](#modals--css-transforms). |
 | `aria-label?` | `string` | Accessible label for the textarea |
 | `aria-describedby?` | `string` | ID of an element describing the textarea |
 
@@ -127,6 +129,27 @@ const trigger: MentionTrigger<User> = {
 };
 ```
 
+## Modals & CSS Transforms
+
+Browsers create a new containing block for `position: fixed` elements when any ancestor has a CSS `transform` applied. This is a known browser behaviour that affects many libraries — the canonical example is a modal centred with `transform: translate(-50%, -50%)`, which causes any `position: fixed` child (including the suggestion dropdown) to be positioned relative to the modal rather than the viewport, placing it far off-screen.
+
+Use `dropdownPositionStrategy="absolute"` to switch the dropdown to `position: absolute`, anchoring it to the `position: relative` container that `MentionInput` already renders internally:
+
+```tsx
+<Dialog>
+  <DialogContent> {/* has transform: translate(-50%, -50%) */}
+    <MentionInput
+      dropdownPositionStrategy="absolute"
+      triggers={[userTrigger]}
+      value={value}
+      onChange={setValue}
+    />
+  </DialogContent>
+</Dialog>
+```
+
+The default is `"fixed"`, so all existing usage outside of transformed ancestors is unaffected.
+
 ## Cache Seeding via `parseMatch`
 
 By default the engine only recognizes mentions whose items are already cached (from `options`, `onSearch` results, or previous selections). When a mention is injected externally — for example by a `/` command picker or when loading initial content containing mentions for items that haven't been searched yet — the cache may not contain the underlying item, so the mention won't be highlighted or serialized.

package/dist/cjs/MentionDropdown.d.ts

@@ -12,6 +12,8 @@ interface MentionDropdownProps {
     position: CaretPosition;
     width: number;
     className?: string;
+    positionStrategy?: "fixed" | "absolute";
+    containerEl?: HTMLElement | null;
 }
 export declare const MentionDropdown: React.FC<MentionDropdownProps>;
 export {};