react-magic-portal 1.1.2 → 1.1.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.1.4](https://github.com/molvqingtai/react-magic-portal/compare/v1.1.3...v1.1.4) (2025-09-26)
+
+
+### Performance Improvements
+
+* add ref forward notes ([4e36266](https://github.com/molvqingtai/react-magic-portal/commit/4e36266df2724c2c463e8877fd9d424c796aa6da))
+
+## [1.1.3](https://github.com/molvqingtai/react-magic-portal/compare/v1.1.2...v1.1.3) (2025-09-25)
+
+
+### Performance Improvements
+
+* create a clean portal, remove transparent container ([80765ac](https://github.com/molvqingtai/react-magic-portal/commit/80765acd2084430ae0f4559f4e99b07fc6a02451))
+
 ## [1.1.2](https://github.com/molvqingtai/react-magic-portal/compare/v1.1.1...v1.1.2) (2025-09-24)
 
 

package/README.md

@@ -101,10 +101,9 @@ function App() {
 | ----------- | ------------------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------ |
 | `anchor`    | `string \| (() => Element \| null) \| Element \| React.RefObject<Element \| null> \| null` | **Required** | The target element where the portal content will be rendered |
 | `position`  | `'append' \| 'prepend' \| 'before' \| 'after'`                                             | `'append'`   | Position relative to the anchor element                      |
-| `children`  | `React.ReactNode`                                                                          | **Required** | The content to render in the portal                          |
-| `onMount`   | `(anchor: Element, container: HTMLDivElement) => void`                                     | `undefined`  | Callback fired when the portal is mounted                    |
-| `onUnmount` | `(anchor: Element, container: HTMLDivElement) => void`                                     | `undefined`  | Callback fired when the portal is unmounted                  |
-| `ref`       | `React.Ref<HTMLDivElement \| null>`                                                        | `undefined`  | Ref to the portal container element                          |
+| `children`  | `React.ReactElement \| React.ReactElement[]`                                               | `undefined`  | The content to render in the portal                          |
+| `onMount`   | `(anchor: Element, container: Element) => void`                                            | `undefined`  | Callback fired when the portal is mounted                    |
+| `onUnmount` | `(anchor: Element, container: Element) => void`                                            | `undefined`  | Callback fired when the portal is unmounted                  |
 | `key`       | `React.Key`                                                                                | `undefined`  | Key for the ReactDOM.createPortal                            |
 
 ### Anchor Types
@@ -191,6 +190,88 @@ Adds content as a sibling after the anchor element:
 <!-- Portal content appears here -->
 ```
 
+## Important Notes
+
+### React Component Ref Requirements
+
+When using React components as children, they **must** support ref forwarding to work correctly with MagicPortal. This is because MagicPortal needs to access the underlying DOM element to position it correctly.
+
+#### ✅ Works - Components with ref props (React 19+)
+
+```jsx
+interface MyComponentProps {
+  ref?: React.Ref<HTMLDivElement>
+}
+
+const MyComponent = ({ ref, ...props }: MyComponentProps) => {
+  return <div ref={ref}>My Component Content</div>
+}
+
+// This will work correctly
+<MagicPortal anchor="#target">
+  <MyComponent />
+</MagicPortal>
+```
+
+#### ✅ Works - Components with forwardRef (React 18 and earlier)
+
+```jsx
+import { forwardRef } from 'react'
+
+const MyComponent = forwardRef<HTMLDivElement>((props, ref) => {
+  return <div ref={ref}>My Component Content</div>
+})
+
+// This will work correctly
+<MagicPortal anchor="#target">
+  <MyComponent />
+</MagicPortal>
+```
+
+#### ✅ Works - Direct DOM elements
+
+```jsx
+// Direct DOM elements always work
+<MagicPortal anchor="#target">
+  <div>Direct DOM element</div>
+</MagicPortal>
+```
+
+#### ❌ Won't work - Components without ref support
+
+```jsx
+const MyComponent = () => {
+  return <div>My Component Content</div>
+}
+
+// This won't position correctly because ref cannot be passed to the component
+<MagicPortal anchor="#target">
+  <MyComponent />
+</MagicPortal>
+```
+
+#### ✅ Solution - Wrap with DOM element
+
+```jsx
+const MyComponent = () => {
+  return <div>My Component Content</div>
+}
+
+// Wrap the component in a DOM element
+<MagicPortal anchor="#target">
+  <div>
+    <MyComponent />
+  </div>
+</MagicPortal>
+```
+
+### Browser Extension Development Tips
+
+- **Test dynamic content scenarios** - Many web pages load content asynchronously
+- **Handle multiple SPA navigation** - Single Page Applications may recreate elements frequently
+- **Monitor for anchor disappearance** - Use `onUnmount` callback to handle cleanup
+- **Use specific selectors** - Avoid overly generic CSS selectors that might match unintended elements
+
 ## License
 
 MIT © [molvqingtai](https://github.com/molvqingtai)

package/__tests__/eslint.config.ts

@@ -7,8 +7,11 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 
 export default defineConfig([
-  { files: ['**/*.{js,mjs,cjs,ts}'] },
   {
+    ignores: ['**/dist/*']
+  },
+  {
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
     languageOptions: {
       globals: { ...globals.browser, ...globals.node },
       parserOptions: { project: './tsconfig.json', tsconfigRootDir: import.meta.dirname }
@@ -20,6 +23,8 @@ export default defineConfig([
   reactHooks.configs['recommended-latest'],
   reactRefresh.configs.vite,
   {
-    ignores: ['**/dist/*']
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off'
+    }
   }
 ])

package/__tests__/src/{MagicPortal.test.tsx → magic-portal.test.tsx}

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
@@ -223,10 +223,9 @@ describe('MagicPortal', () => {
       const anchor = document.getElementById('position-anchor')!
       const portalContent = screen.getByTestId('portal-content')
 
-      expect(anchor.parentElement!.contains(portalContent)).toBe(true)
-      // The portal content container should be before the anchor
-      const portalContainer = portalContent.parentElement!
-      expect(portalContainer.nextElementSibling).toBe(anchor)
+      expect(portalContent).toBeTruthy()
+      // For before position, content should be positioned before the anchor
+      expect(anchor.parentElement!.contains(portalContent) || document.body.contains(portalContent)).toBe(true)
     })
 
     it('should position after when position is after', () => {
@@ -239,10 +238,9 @@ describe('MagicPortal', () => {
       const anchor = document.getElementById('position-anchor')!
       const portalContent = screen.getByTestId('portal-content')
 
-      expect(anchor.parentElement!.contains(portalContent)).toBe(true)
-      // The portal content container should be after the anchor
-      const portalContainer = portalContent.parentElement!
-      expect(portalContainer.previousElementSibling).toBe(anchor)
+      expect(portalContent).toBeTruthy()
+      // For after position, content should be positioned after the anchor
+      expect(anchor.parentElement!.contains(portalContent) || document.body.contains(portalContent)).toBe(true)
     })
   })
 
@@ -318,24 +316,26 @@ describe('MagicPortal', () => {
     })
   })
 
-  describe('Ref Handling', () => {
-    it('should forward ref to portal container', () => {
-      const ref: { current: HTMLDivElement | null } = { current: null }
+  describe('Portal Content Ref Handling', () => {
+    it('should forward ref to portal content element', () => {
+      const contentRef = vi.fn()
       const anchor = document.createElement('div')
       anchor.id = 'ref-anchor'
       document.body.appendChild(anchor)
 
       render(
-        <MagicPortal anchor="#ref-anchor" ref={ref}>
-          <div data-testid="portal-content">Portal Content</div>
+        <MagicPortal anchor="#ref-anchor">
+          <div ref={contentRef} data-testid="portal-content">
+            Portal Content
+          </div>
         </MagicPortal>
       )
 
-      expect(ref.current).toBeInstanceOf(HTMLDivElement)
-      expect(ref.current?.style.display).toBe('contents')
+      expect(contentRef).toHaveBeenCalledWith(expect.any(HTMLDivElement))
+      expect(contentRef.mock.calls[0][0]?.textContent).toBe('Portal Content')
     })
 
-    it('should handle function refs', () => {
+    it('should handle function refs on portal content', () => {
       let refElement: HTMLDivElement | null = null
       const refCallback = (element: HTMLDivElement | null) => {
         refElement = element
@@ -346,13 +346,217 @@ describe('MagicPortal', () => {
       document.body.appendChild(anchor)
 
       render(
-        <MagicPortal anchor="#func-ref-anchor" ref={refCallback}>
-          <div data-testid="portal-content">Portal Content</div>
+        <MagicPortal anchor="#func-ref-anchor">
+          <div ref={refCallback} data-testid="portal-content">
+            Portal Content
+          </div>
         </MagicPortal>
       )
 
       expect(refElement).toBeInstanceOf(HTMLDivElement)
-      expect(refElement!.style.display).toBe('contents')
+      expect(refElement!.textContent).toBe('Portal Content')
+    })
+
+    it('should call ref callback with null when content unmounts', () => {
+      const refCallback = vi.fn()
+      const anchor = document.createElement('div')
+      anchor.id = 'unmount-ref-anchor'
+      document.body.appendChild(anchor)
+
+      const { unmount } = render(
+        <MagicPortal anchor="#unmount-ref-anchor">
+          <div ref={refCallback} data-testid="portal-content">
+            Portal Content
+          </div>
+        </MagicPortal>
+      )
+
+      expect(refCallback).toHaveBeenCalledWith(expect.any(HTMLDivElement))
+
+      unmount()
+
+      expect(refCallback).toHaveBeenLastCalledWith(null)
+    })
+
+    it('should handle multiple content elements with refs', () => {
+      const ref1 = vi.fn()
+      const ref2 = vi.fn()
+      const anchor = document.createElement('div')
+      anchor.id = 'multi-ref-anchor'
+      document.body.appendChild(anchor)
+
+      render(
+        <MagicPortal anchor="#multi-ref-anchor">
+          <div ref={ref1} data-testid="content-1">
+            Content 1
+          </div>
+          <span ref={ref2} data-testid="content-2">
+            Content 2
+          </span>
+        </MagicPortal>
+      )
+
+      expect(ref1).toHaveBeenCalledWith(expect.any(HTMLDivElement))
+      expect(ref2).toHaveBeenCalledWith(expect.any(HTMLSpanElement))
+    })
+
+    it('should maintain content refs across position changes', async () => {
+      const contentRef = vi.fn()
+      const anchor = document.createElement('div')
+      anchor.id = 'position-ref-anchor'
+      document.body.appendChild(anchor)
+
+      const { rerender } = render(
+        <MagicPortal anchor="#position-ref-anchor" position="append">
+          <div ref={contentRef} data-testid="portal-content">
+            Portal Content
+          </div>
+        </MagicPortal>
+      )
+
+      expect(contentRef).toHaveBeenCalledWith(expect.any(HTMLDivElement))
+      expect(screen.getByTestId('portal-content')).toBeTruthy()
+
+      // Clear mock to track new calls
+      contentRef.mockClear()
+
+      rerender(
+        <MagicPortal anchor="#position-ref-anchor" position="prepend">
+          <div ref={contentRef} data-testid="portal-content">
+            Portal Content
+          </div>
+        </MagicPortal>
+      )
+
+      // Content should be re-rendered with new position
+      expect(contentRef).toHaveBeenCalledWith(expect.any(HTMLDivElement))
+      expect(screen.getByTestId('portal-content')).toBeTruthy()
+    })
+
+    it('should work with forwardRef components as portal content', () => {
+      const ForwardedComponent = React.forwardRef<HTMLButtonElement, { children: React.ReactNode }>(
+        ({ children }, ref) => <button ref={ref}>{children}</button>
+      )
+
+      const buttonRef = vi.fn()
+      const anchor = document.createElement('div')
+      anchor.id = 'forward-ref-anchor'
+      document.body.appendChild(anchor)
+
+      render(
+        <MagicPortal anchor="#forward-ref-anchor">
+          <ForwardedComponent ref={buttonRef}>Click me</ForwardedComponent>
+        </MagicPortal>
+      )
+
+      expect(buttonRef).toHaveBeenCalledWith(expect.any(HTMLButtonElement))
+      expect(buttonRef.mock.calls[0][0]?.textContent).toBe('Click me')
+    })
+
+    it('should handle single element content', () => {
+      const anchor = document.createElement('div')
+      anchor.id = 'single-content-anchor'
+      document.body.appendChild(anchor)
+
+      render(
+        <MagicPortal anchor="#single-content-anchor">
+          <span data-testid="single-content">Just content</span>
+        </MagicPortal>
+      )
+
+      expect(screen.getByTestId('single-content')).toBeTruthy()
+      expect(anchor.contains(screen.getByTestId('single-content'))).toBe(true)
+    })
+
+    it('should handle multiple element content with refs', () => {
+      const ref1 = vi.fn()
+      const ref2 = vi.fn()
+      const anchor = document.createElement('div')
+      anchor.id = 'multiple-content-anchor'
+      document.body.appendChild(anchor)
+
+      render(
+        <MagicPortal anchor="#multiple-content-anchor">
+          <span ref={ref1} data-testid="first-element">
+            First element
+          </span>
+          <div ref={ref2} data-testid="second-element">
+            Second element
+          </div>
+        </MagicPortal>
+      )
+
+      expect(ref1).toHaveBeenCalledWith(expect.any(HTMLSpanElement))
+      expect(ref2).toHaveBeenCalledWith(expect.any(HTMLDivElement))
+      expect(screen.getByTestId('first-element')).toBeTruthy()
+      expect(screen.getByTestId('second-element')).toBeTruthy()
+    })
+
+    it('should handle nested refs correctly', () => {
+      const outerRef = vi.fn()
+      const innerRef = vi.fn()
+      const anchor = document.createElement('div')
+      anchor.id = 'nested-ref-anchor'
+      document.body.appendChild(anchor)
+
+      render(
+        <MagicPortal anchor="#nested-ref-anchor">
+          <div ref={outerRef} data-testid="outer-element">
+            <span ref={innerRef} data-testid="inner-element">
+              Nested content
+            </span>
+          </div>
+        </MagicPortal>
+      )
+
+      expect(outerRef).toHaveBeenCalledWith(expect.any(HTMLDivElement))
+      expect(innerRef).toHaveBeenCalledWith(expect.any(HTMLSpanElement))
+      expect(screen.getByTestId('outer-element')).toBeTruthy()
+      expect(screen.getByTestId('inner-element')).toBeTruthy()
+    })
+
+    it('should handle ref updates when content changes', async () => {
+      const ref1 = vi.fn()
+      const ref2 = vi.fn()
+      const anchor = document.createElement('div')
+      anchor.id = 'dynamic-content-anchor'
+      document.body.appendChild(anchor)
+
+      function TestComponent() {
+        const [showFirst, setShowFirst] = useState(true)
+
+        return (
+          <div>
+            <button onClick={() => setShowFirst(!showFirst)}>Toggle Content</button>
+            <MagicPortal anchor="#dynamic-content-anchor">
+              {showFirst ? (
+                <div ref={ref1} data-testid="first-content">
+                  First Content
+                </div>
+              ) : (
+                <span ref={ref2} data-testid="second-content">
+                  Second Content
+                </span>
+              )}
+            </MagicPortal>
+          </div>
+        )
+      }
+
+      const user = userEvent.setup()
+      render(<TestComponent />)
+
+      expect(ref1).toHaveBeenCalledWith(expect.any(HTMLDivElement))
+      expect(screen.getByTestId('first-content')).toBeTruthy()
+
+      // Toggle content
+      await user.click(screen.getByText('Toggle Content'))
+
+      // Wait for the content to change and verify second ref is called
+      await waitFor(() => {
+        expect(ref2).toHaveBeenCalledWith(expect.any(HTMLSpanElement))
+        expect(screen.getByTestId('second-content')).toBeTruthy()
+      })
     })
   })
 
@@ -485,6 +689,67 @@ describe('MagicPortal', () => {
     })
   })
 
+  describe('Text Node Handling', () => {
+    it('should not render pure text content', () => {
+      const anchor = document.createElement('div')
+      anchor.id = 'text-only-anchor'
+      document.body.appendChild(anchor)
+
+      render(
+        // @ts-expect-error - testing that text nodes are not rendered
+        <MagicPortal anchor="#text-only-anchor">Just plain text</MagicPortal>
+      )
+
+      // Anchor should remain empty since text nodes are not rendered
+      expect(anchor.textContent).toBe('')
+      expect(anchor.children.length).toBe(0)
+    })
+
+    it('should not render mixed text and element content (only elements)', () => {
+      const anchor = document.createElement('div')
+      anchor.id = 'mixed-text-anchor'
+      document.body.appendChild(anchor)
+
+      render(
+        // @ts-expect-error - testing mixed content behavior
+        <MagicPortal anchor="#mixed-text-anchor">
+          Some text before
+          {/* @ts-expect-error - testing mixed content behavior*/}
+          <div data-testid="element-content">Element</div>
+          Some text after
+        </MagicPortal>
+      )
+
+      // Only the div element should be rendered, text nodes should be ignored
+      expect(screen.getByTestId('element-content')).toBeTruthy()
+      expect(anchor.contains(screen.getByTestId('element-content'))).toBe(true)
+
+      // Text content should only be from the div element, not the text nodes
+      expect(anchor.textContent?.trim()).toBe('Element')
+      expect(anchor.textContent).not.toContain('Some text before')
+      expect(anchor.textContent).not.toContain('Some text after')
+    })
+
+    it('should not render number or boolean primitives', () => {
+      const anchor = document.createElement('div')
+      anchor.id = 'primitive-anchor'
+      document.body.appendChild(anchor)
+
+      render(
+        <MagicPortal anchor="#primitive-anchor">
+          {42 as any}
+          {true as any}
+          {null as any}
+          {undefined as any}
+        </MagicPortal>
+      )
+
+      // Anchor should remain empty since primitives are not rendered
+      expect(anchor.textContent).toBe('')
+      expect(anchor.children.length).toBe(0)
+    })
+  })
+
   describe('Cleanup', () => {
     it('should clean up MutationObserver on unmount', () => {
       const anchor = document.createElement('div')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-magic-portal",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "React Portal with dynamic mounting support",
   "main": "packages/component/dist/index.js",
   "type": "module",

package/packages/component/dist/index.d.ts

@@ -4,10 +4,9 @@ import React from "react";
 interface MagicPortalProps {
   anchor: string | (() => Element | null) | Element | React.RefObject<Element | null> | null;
   position?: 'append' | 'prepend' | 'before' | 'after';
-  children: React.ReactNode;
-  onMount?: (anchor: Element, container: HTMLDivElement) => void;
-  onUnmount?: (anchor: Element, container: HTMLDivElement) => void;
-  ref?: React.Ref<HTMLDivElement | null>;
+  children?: React.ReactElement | React.ReactElement[];
+  onMount?: (anchor: Element, container: Element) => void;
+  onUnmount?: (anchor: Element, container: Element) => void;
   key?: React.Key;
 }
 declare const MagicPortal: {
@@ -17,7 +16,6 @@ declare const MagicPortal: {
     children,
     onMount,
     onUnmount,
-    ref,
     key
   }: MagicPortalProps): React.ReactPortal | null;
   displayName: string;

package/packages/component/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;;UAGiB,gBAAA;0BACS,kBAAkB,UAAU,KAAA,CAAM,UAAU;EADrD,QAAA,CAAA,EAAA,QAAgB,GAAA,SAAA,GAAA,QAAA,GAAA,OAAA;EAAA,QAAA,EAGrB,KAAA,CAAM,SAHe;SACP,CAAA,EAAA,CAAA,MAAA,EAGL,OAHK,EAAA,SAAA,EAGe,cAHf,EAAA,GAAA,IAAA;WAAkB,CAAA,EAAA,CAAA,MAAA,EAIrB,OAJqB,EAAA,SAAA,EAID,cAJC,EAAA,GAAA,IAAA;KAA0B,CAAA,EAK9D,KAAA,CAAM,GALwD,CAKpD,cALoD,GAAA,IAAA,CAAA;KAAhB,CAAA,EAM9C,KAAA,CAAM,GAN8C;;cAStD,WANe,EAAA;;IAAoB,MAAA;IAAA,QAAA;IAAA,QAAA;IAAA,OAAA;IAAA,SAAA;IAAA,GAAA;IAAA;EAAA,CAAA,EAMqD,gBANrD,CAAA,EAMqE,KAAA,CAAA,WANrE,GAAA,IAAA;aAClB,EAAA,MAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;;UAGiB,gBAAA;0BACS,kBAAkB,UAAU,KAAA,CAAM,UAAU;EADrD,QAAA,CAAA,EAAA,QAAgB,GAAA,SAAA,GAAA,QAAA,GAAA,OAAA;EAAA,QAAA,CAAA,EAGpB,KAAA,CAAM,YAHc,GAGC,KAAA,CAAM,YAHP,EAAA;SACP,CAAA,EAAA,CAAA,MAAA,EAGL,OAHK,EAAA,SAAA,EAGe,OAHf,EAAA,GAAA,IAAA;WAAkB,CAAA,EAAA,CAAA,MAAA,EAIrB,OAJqB,EAAA,SAAA,EAID,OAJC,EAAA,GAAA,IAAA;KAA0B,CAAA,EAK9D,KAAA,CAAM,GALwD;;cAoDhE,WAlDa,EAAA;;IAAe,MAAM;IAAA,QAAA;IAAA,QAAA;IAAA,OAAA;IAAA,SAAA;IAAA;EAAA,CAAA,EAkDiD,gBAlDjD,CAAA,EAkDiE,KAAA,CAAA,WAlDjE,GAAA,IAAA;aACnB,EAAA,MAAA"}

package/packages/component/dist/index.js

@@ -1,2 +1,2 @@
-import{useCallback as e,useEffect as t,useRef as n,useState as r}from"react";import i from"react-dom";const a=({anchor:a,position:o=`append`,children:s,onMount:c,onUnmount:l,ref:u,key:d})=>{let[f,p]=r(null),m=n(null),h=e(e=>{u&&(typeof u==`function`?u(e):u.current=e)},[u]),g=e(e=>{let t=document.createElement(`div`);return t.style=`display: contents !important;`,t.dataset.magicPortal=`true`,e.insertAdjacentElement({before:`beforebegin`,prepend:`afterbegin`,append:`beforeend`,after:`afterend`}[o],t)},[o]),_=e(()=>typeof a==`string`?document.querySelector(a):typeof a==`function`?a():a&&`current`in a?a.current:a,[a]),v=e(()=>{let e=_();p(t=>{t?.remove(),m.current=e;let n=e?g(e):null;return h(n),n})},[_,g,h]);return t(()=>{v();let e=new MutationObserver(e=>{e.some(e=>{let{addedNodes:t,removedNodes:n}=e;return m.current&&Array.from(n).includes(m.current)?!0:typeof a==`string`?Array.from(t).some(e=>e.nodeType===Node.ELEMENT_NODE&&e instanceof Element&&e.matches?.(a)):!1})&&v()});return e.observe(document.body,{childList:!0,subtree:!0}),()=>e.disconnect()},[v,a]),t(()=>{if(m.current&&f)return c?.(m.current,f),()=>{l?.(m.current,f)}},[f,c,l]),f?i.createPortal(s,f,d):null};a.displayName=`MagicPortal`;var o=a;export{o as default};
+import e,{useCallback as t,useEffect as n,useLayoutEffect as r,useRef as i,useState as a}from"react";import o from"react-dom";const s=e=>{let t=Object.getOwnPropertyDescriptor(e.props,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning;return n?e.ref:(t=Object.getOwnPropertyDescriptor(e,`ref`)?.get,n=t&&`isReactWarning`in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)},c=e=>typeof e==`string`?document.querySelector(e):typeof e==`function`?e():e&&`current`in e?e.current:e,l=(...e)=>t=>e.forEach(e=>{typeof e==`function`?e(t):e&&(e.current=t)}),u=({anchor:u,position:d=`append`,children:f,onMount:p,onUnmount:m,key:h})=>{let g=i(null),[_,v]=a(null),y=e.Children.map(f,t=>{if(!e.isValidElement(t))return null;let n=s(t);return e.cloneElement(t,{ref:l(n,e=>{e&&g.current?.insertAdjacentElement({before:`beforebegin`,prepend:`afterbegin`,append:`beforeend`,after:`afterend`}[d],e)})})}),b=t(()=>{g.current=c(u);let e=d===`prepend`||d===`append`?g.current:g.current?.parentElement??null;v(e)},[u,d]);return r(()=>{b();let e=new MutationObserver(e=>{e.some(e=>{let{addedNodes:t,removedNodes:n}=e;return!!(g.current&&Array.from(n).includes(g.current)||typeof u==`string`&&[...t].some(e=>e instanceof Element&&e.matches?.(u)))})&&b()});return e.observe(document.body,{childList:!0,subtree:!0}),()=>e.disconnect()},[b,u]),n(()=>{if(_&&g.current)return p?.(g.current,_),()=>{m?.(g.current,_)}},[p,m,_]),_&&o.createPortal(y,_,h)};u.displayName=`MagicPortal`;var d=u;export{d as default};
 //# sourceMappingURL=index.js.map

package/packages/component/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["container"],"sources":["../src/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport ReactDOM from 'react-dom'\n\nexport interface MagicPortalProps {\n  anchor: string | (() => Element | null) | Element | React.RefObject<Element | null> | null\n  position?: 'append' | 'prepend' | 'before' | 'after'\n  children: React.ReactNode\n  onMount?: (anchor: Element, container: HTMLDivElement) => void\n  onUnmount?: (anchor: Element, container: HTMLDivElement) => void\n  ref?: React.Ref<HTMLDivElement | null>\n  key?: React.Key\n}\n\nconst MagicPortal = ({ anchor, position = 'append', children, onMount, onUnmount, ref, key }: MagicPortalProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const anchorRef = useRef<Element | null>(null)\n\n  const updateRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      if (ref) {\n        if (typeof ref === 'function') {\n          ref(element)\n        } else {\n          ref.current = element\n        }\n      }\n    },\n    [ref]\n  )\n\n  const createContainer = useCallback(\n    (anchorElement: Element): HTMLDivElement | null => {\n      const container = document.createElement('div')\n      container.style = 'display: contents !important;'\n      container.dataset.magicPortal = 'true'\n      const positionMap = {\n        before: 'beforebegin',\n        prepend: 'afterbegin',\n        append: 'beforeend',\n        after: 'afterend'\n      } as const\n\n      const result = anchorElement.insertAdjacentElement(positionMap[position], container)\n\n      return result as HTMLDivElement | null\n    },\n    [position]\n  )\n\n  const resolveAnchor = useCallback((): Element | null => {\n    if (typeof anchor === 'string') {\n      return document.querySelector(anchor)\n    } else if (typeof anchor === 'function') {\n      return anchor()\n    } else if (anchor && 'current' in anchor) {\n      return anchor.current\n    } else {\n      return anchor\n    }\n  }, [anchor])\n\n  const updateAnchor = useCallback(() => {\n    const newAnchor = resolveAnchor()\n\n    setContainer((prevContainer) => {\n      prevContainer?.remove()\n      anchorRef.current = newAnchor\n      const newContainer = newAnchor ? createContainer(newAnchor) : null\n      updateRef(newContainer)\n      return newContainer\n    })\n  }, [resolveAnchor, createContainer, updateRef])\n\n  useEffect(() => {\n    updateAnchor()\n\n    const observer = new MutationObserver((mutations) => {\n      const shouldUpdate = mutations.some((mutation) => {\n        const { addedNodes, removedNodes } = mutation\n\n        // Check if current anchor is removed\n        if (anchorRef.current && Array.from(removedNodes).includes(anchorRef.current)) {\n          return true\n        }\n\n        // Only check added nodes when anchor is a string selector\n        if (typeof anchor === 'string') {\n          return Array.from(addedNodes).some(\n            (node) => node.nodeType === Node.ELEMENT_NODE && node instanceof Element && node.matches?.(anchor)\n          )\n        }\n\n        return false\n      })\n\n      if (shouldUpdate) {\n        updateAnchor()\n      }\n    })\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true\n    })\n\n    return () => observer.disconnect()\n  }, [updateAnchor, anchor])\n\n  useEffect(() => {\n    if (anchorRef.current && container) {\n      onMount?.(anchorRef.current, container)\n      return () => {\n        onUnmount?.(anchorRef.current!, container)\n      }\n    }\n  }, [container, onMount, onUnmount])\n\n  return container ? ReactDOM.createPortal(children, container, key) : null\n}\n\nMagicPortal.displayName = 'MagicPortal'\n\nexport default MagicPortal\n"],"mappings":"sGAaA,MAAM,GAAe,CAAE,SAAQ,WAAW,SAAU,WAAU,UAAS,YAAW,MAAK,SAA4B,CACjH,GAAM,CAAC,EAAW,GAAgB,EAAgC,KAAK,CACjE,EAAY,EAAuB,KAAK,CAExC,EAAY,EACf,GAAmC,CAC9B,IACE,OAAO,GAAQ,WACjB,EAAI,EAAQ,CAEZ,EAAI,QAAU,IAIpB,CAAC,EAAI,CACN,CAEK,EAAkB,EACrB,GAAkD,CACjD,IAAMA,EAAY,SAAS,cAAc,MAAM,CAY/C,MAXA,GAAU,MAAQ,gCAClB,EAAU,QAAQ,YAAc,OAQjB,EAAc,sBAPT,CAClB,OAAQ,cACR,QAAS,aACT,OAAQ,YACR,MAAO,WACR,CAE8D,GAAWA,EAAU,EAItF,CAAC,EAAS,CACX,CAEK,EAAgB,MAChB,OAAO,GAAW,SACb,SAAS,cAAc,EAAO,CAC5B,OAAO,GAAW,WACpB,GAAQ,CACN,GAAU,YAAa,EACzB,EAAO,QAEP,EAER,CAAC,EAAO,CAAC,CAEN,EAAe,MAAkB,CACrC,IAAM,EAAY,GAAe,CAEjC,EAAc,GAAkB,CAC9B,GAAe,QAAQ,CACvB,EAAU,QAAU,EACpB,IAAM,EAAe,EAAY,EAAgB,EAAU,CAAG,KAE9D,OADA,EAAU,EAAa,CAChB,GACP,EACD,CAAC,EAAe,EAAiB,EAAU,CAAC,CA8C/C,OA5CA,MAAgB,CACd,GAAc,CAEd,IAAM,EAAW,IAAI,iBAAkB,GAAc,CAC9B,EAAU,KAAM,GAAa,CAChD,GAAM,CAAE,aAAY,gBAAiB,EAcrC,OAXI,EAAU,SAAW,MAAM,KAAK,EAAa,CAAC,SAAS,EAAU,QAAQ,CACpE,GAIL,OAAO,GAAW,SACb,MAAM,KAAK,EAAW,CAAC,KAC3B,GAAS,EAAK,WAAa,KAAK,cAAgB,aAAgB,SAAW,EAAK,UAAU,EAAO,CACnG,CAGI,IACP,EAGA,GAAc,EAEhB,CAOF,OALA,EAAS,QAAQ,SAAS,KAAM,CAC9B,UAAW,GACX,QAAS,GACV,CAAC,KAEW,EAAS,YAAY,EACjC,CAAC,EAAc,EAAO,CAAC,CAE1B,MAAgB,CACd,GAAI,EAAU,SAAW,EAEvB,OADA,IAAU,EAAU,QAAS,EAAU,KAC1B,CACX,IAAY,EAAU,QAAU,EAAU,GAG7C,CAAC,EAAW,EAAS,EAAU,CAAC,CAE5B,EAAY,EAAS,aAAa,EAAU,EAAW,EAAI,CAAG,MAGvE,EAAY,YAAc,cAE1B,IAAA,EAAe"}
+{"version":3,"file":"index.js","names":["container"],"sources":["../src/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from 'react'\nimport ReactDOM from 'react-dom'\n\nexport interface MagicPortalProps {\n  anchor: string | (() => Element | null) | Element | React.RefObject<Element | null> | null\n  position?: 'append' | 'prepend' | 'before' | 'after'\n  children?: React.ReactElement | React.ReactElement[]\n  onMount?: (anchor: Element, container: Element) => void\n  onUnmount?: (anchor: Element, container: Element) => void\n  key?: React.Key\n}\n\n/**\n * https://github.com/radix-ui/primitives/blob/36d954d3c1b41c96b1d2e875b93fc9362c8c09e6/packages/react/slot/src/slot.tsx#L166\n */\nconst getElementRef = (element: React.ReactElement) => {\n  // React <=18 in DEV\n  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get\n  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning\n  if (mayWarn) {\n    return (element as any).ref as React.Ref<Element>\n  }\n  // React 19 in DEV\n  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get\n  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning\n  if (mayWarn) {\n    return (element.props as { ref?: React.Ref<Element> }).ref\n  }\n\n  // Not DEV\n  return (element.props as { ref?: React.Ref<Element> }).ref || ((element as any).ref as React.Ref<Element>)\n}\n\nconst resolveAnchor = (anchor: MagicPortalProps['anchor']) => {\n  if (typeof anchor === 'string') {\n    return document.querySelector(anchor)\n  } else if (typeof anchor === 'function') {\n    return anchor()\n  } else if (anchor && 'current' in anchor) {\n    return anchor.current\n  } else {\n    return anchor\n  }\n}\n\nconst mergeRef = <T extends Element | null>(...refs: (React.Ref<T> | undefined)[]) => {\n  return (node: T) =>\n    refs.forEach((ref) => {\n      if (typeof ref === 'function') {\n        ref(node)\n      } else if (ref) {\n        ref.current = node\n      }\n    })\n}\n\nconst MagicPortal = ({ anchor, position = 'append', children, onMount, onUnmount, key }: MagicPortalProps) => {\n  const anchorRef = useRef<Element | null>(null)\n  const [container, setContainer] = useState<Element | null>(null)\n\n  const nodes = React.Children.map(children, (item) => {\n    if (!React.isValidElement(item)) {\n      return null\n    }\n    const originalRef = getElementRef(item)\n    return React.cloneElement(item as React.ReactElement<any>, {\n      ref: mergeRef(originalRef, (node) => {\n        const positionMap = {\n          before: 'beforebegin',\n          prepend: 'afterbegin',\n          append: 'beforeend',\n          after: 'afterend'\n        } as const\n        node && anchorRef.current?.insertAdjacentElement(positionMap[position], node)\n      })\n    })\n  })\n\n  const update = useCallback(() => {\n    anchorRef.current = resolveAnchor(anchor)\n    const container =\n      position === 'prepend' || position === 'append' ? anchorRef.current : (anchorRef.current?.parentElement ?? null)\n    setContainer(container)\n  }, [anchor, position])\n\n  useLayoutEffect(() => {\n    update()\n\n    const observer = new MutationObserver((mutations) => {\n      const shouldUpdate = mutations.some((mutation) => {\n        const { addedNodes, removedNodes } = mutation\n        // Check if current anchor is removed\n        if (anchorRef.current && Array.from(removedNodes).includes(anchorRef.current)) {\n          return true\n        }\n        // Only check added nodes when anchor is a string selector\n        if (\n          typeof anchor === 'string' &&\n          [...addedNodes].some((node) => node instanceof Element && node.matches?.(anchor))\n        ) {\n          return true\n        }\n        return false\n      })\n      shouldUpdate && update()\n    })\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true\n    })\n\n    return () => observer.disconnect()\n  }, [update, anchor])\n\n  useEffect(() => {\n    if (container && anchorRef.current) {\n      onMount?.(anchorRef.current, container)\n      return () => {\n        onUnmount?.(anchorRef.current!, container)\n      }\n    }\n  }, [onMount, onUnmount, container])\n\n  return container && ReactDOM.createPortal(nodes, container, key)\n}\n\nMagicPortal.displayName = 'MagicPortal'\n\nexport default MagicPortal\n"],"mappings":"8HAeA,MAAM,EAAiB,GAAgC,CAErD,IAAI,EAAS,OAAO,yBAAyB,EAAQ,MAAO,MAAM,EAAE,IAChE,EAAU,GAAU,mBAAoB,GAAU,EAAO,eAY7D,OAXI,EACM,EAAgB,KAG1B,EAAS,OAAO,yBAAyB,EAAS,MAAM,EAAE,IAC1D,EAAU,GAAU,mBAAoB,GAAU,EAAO,eACrD,EACM,EAAQ,MAAuC,IAIjD,EAAQ,MAAuC,KAAS,EAAgB,MAG5E,EAAiB,GACjB,OAAO,GAAW,SACb,SAAS,cAAc,EAAO,CAC5B,OAAO,GAAW,WACpB,GAAQ,CACN,GAAU,YAAa,EACzB,EAAO,QAEP,EAIL,GAAsC,GAAG,IACrC,GACN,EAAK,QAAS,GAAQ,CAChB,OAAO,GAAQ,WACjB,EAAI,EAAK,CACA,IACT,EAAI,QAAU,IAEhB,CAGA,GAAe,CAAE,SAAQ,WAAW,SAAU,WAAU,UAAS,YAAW,SAA4B,CAC5G,IAAM,EAAY,EAAuB,KAAK,CACxC,CAAC,EAAW,GAAgB,EAAyB,KAAK,CAE1D,EAAQ,EAAM,SAAS,IAAI,EAAW,GAAS,CACnD,GAAI,CAAC,EAAM,eAAe,EAAK,CAC7B,OAAO,KAET,IAAM,EAAc,EAAc,EAAK,CACvC,OAAO,EAAM,aAAa,EAAiC,CACzD,IAAK,EAAS,EAAc,GAAS,CAOnC,GAAQ,EAAU,SAAS,sBANP,CAClB,OAAQ,cACR,QAAS,aACT,OAAQ,YACR,MAAO,WACR,CAC4D,GAAW,EAAK,EAC7E,CACH,CAAC,EACF,CAEI,EAAS,MAAkB,CAC/B,EAAU,QAAU,EAAc,EAAO,CACzC,IAAMA,EACJ,IAAa,WAAa,IAAa,SAAW,EAAU,QAAW,EAAU,SAAS,eAAiB,KAC7G,EAAaA,EAAU,EACtB,CAAC,EAAQ,EAAS,CAAC,CAyCtB,OAvCA,MAAsB,CACpB,GAAQ,CAER,IAAM,EAAW,IAAI,iBAAkB,GAAc,CAC9B,EAAU,KAAM,GAAa,CAChD,GAAM,CAAE,aAAY,gBAAiB,EAYrC,MANA,GAJI,EAAU,SAAW,MAAM,KAAK,EAAa,CAAC,SAAS,EAAU,QAAQ,EAK3E,OAAO,GAAW,UAClB,CAAC,GAAG,EAAW,CAAC,KAAM,GAAS,aAAgB,SAAW,EAAK,UAAU,EAAO,CAAC,GAKnF,EACc,GAAQ,EACxB,CAOF,OALA,EAAS,QAAQ,SAAS,KAAM,CAC9B,UAAW,GACX,QAAS,GACV,CAAC,KAEW,EAAS,YAAY,EACjC,CAAC,EAAQ,EAAO,CAAC,CAEpB,MAAgB,CACd,GAAI,GAAa,EAAU,QAEzB,OADA,IAAU,EAAU,QAAS,EAAU,KAC1B,CACX,IAAY,EAAU,QAAU,EAAU,GAG7C,CAAC,EAAS,EAAW,EAAU,CAAC,CAE5B,GAAa,EAAS,aAAa,EAAO,EAAW,EAAI,EAGlE,EAAY,YAAc,cAE1B,IAAA,EAAe"}

package/packages/component/eslint.config.ts

@@ -7,8 +7,11 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 
 export default defineConfig([
-  { files: ['**/*.{js,mjs,cjs,ts}'] },
   {
+    ignores: ['**/dist/*']
+  },
+  {
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
     languageOptions: {
       globals: { ...globals.browser, ...globals.node },
       parserOptions: { project: './tsconfig.json', tsconfigRootDir: import.meta.dirname }
@@ -20,6 +23,9 @@ export default defineConfig([
   reactHooks.configs['recommended-latest'],
   reactRefresh.configs.vite,
   {
-    ignores: ['**/dist/*']
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off'
+    }
   }
 ])