Skip to content

fix(openAsync): resolve promise when closed externally #215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
p-iknow wants to merge 7 commits into
base: main
Choose a base branch
from
Open

fix(openAsync): resolve promise when closed externally #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f6bc0e0
feat(openAsync): add onDismiss option for external close handling
Jan 23, 2026
c65cd50
fix(openAsync): prevent memory leak and handle unmount events
Jan 23, 2026
a07ce24
refactor(openAsync): rename onDismiss to defaultValue
Jan 23, 2026
fc168e3
fix: ensure defaultValue type matches generic type T
Jan 23, 2026
523ce4a
fix(examples): move external close buttons inside modal
Jan 23, 2026
82eb4dd
chore(examples): sync demo.tsx across React versions
Jan 23, 2026
3a80a8e
docs: add JSDoc comments for openAsync and subscribeEvent
Jan 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 199 additions & 3 deletions examples/react-16/framer-motion/src/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,18 @@ import { Modal } from './components/modal.tsx';

export function Demo() {
return (
<div>
<div style={{ padding: 20, fontFamily: 'system-ui, sans-serif' }}>
<h1>overlay-kit Examples</h1>
<hr style={{ margin: '20px 0' }} />
<DemoWithState />
<hr style={{ margin: '20px 0' }} />
<DemoWithEsOverlay />
<hr style={{ margin: '20px 0' }} />
<DemoOpenAsyncBasic />
<hr style={{ margin: '20px 0' }} />
<DemoOpenAsyncWithDefaultValue />
<hr style={{ margin: '20px 0' }} />
<DemoExternalClose />
</div>
);
}
Expand All @@ -16,7 +25,7 @@ function DemoWithState() {

return (
<div>
<p>Demo with useState</p>
<h2>1. Demo with useState</h2>
<button onClick={() => setIsOpen(true)}>open modal</button>
<Modal isOpen={isOpen}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
Expand All @@ -31,7 +40,7 @@ function DemoWithState() {
function DemoWithEsOverlay() {
return (
<div>
<p>Demo with overlay-kit</p>
<h2>2. Demo with overlay.open</h2>
<button
onClick={() => {
overlay.open(({ isOpen, close, unmount }) => {
Expand All @@ -53,3 +62,190 @@ function DemoWithEsOverlay() {
</div>
);
}

function DemoOpenAsyncBasic() {
const [result, setResult] = useState<string>('(no result yet)');

return (
<div>
<h2>3. Demo with overlay.openAsync (basic)</h2>
<p>
Result: <strong>{result}</strong>
</p>
<button
onClick={async () => {
setResult('(waiting...)');
const value = await overlay.openAsync<boolean>(({ isOpen, close, unmount }) => {
return (
<Modal isOpen={isOpen} onExit={unmount}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 10,
}}
>
<p>Do you confirm?</p>
<div style={{ display: 'flex', gap: 10 }}>
<button onClick={() => close(true)}>Confirm (true)</button>
<button onClick={() => close(false)}>Cancel (false)</button>
</div>
</div>
</Modal>
);
});
setResult(String(value));
}}
>
open confirm dialog
</button>
</div>
);
}

function DemoOpenAsyncWithDefaultValue() {
const [result, setResult] = useState<string>('(no result yet)');
const overlayId = 'defaultvalue-demo-overlay';

return (
<div>
<h2>4. Demo with overlay.openAsync + defaultValue option</h2>
<p style={{ fontSize: 14, color: '#666', marginBottom: 10 }}>
With <code>defaultValue</code>, the Promise resolves even when closed externally.
<br />
<code>defaultValue: false</code> → external close resolves with <code>false</code>
</p>
<p>
Result: <strong>{result}</strong>
</p>
<button
onClick={async () => {
setResult('(waiting...)');
const value = await overlay.openAsync<boolean>(
({ isOpen, close, unmount }) => {
return (
<Modal isOpen={isOpen} onExit={unmount}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 10,
}}
>
<p>Do you confirm?</p>
<div style={{ display: 'flex', gap: 10 }}>
<button onClick={() => close(true)}>Confirm (true)</button>
<button onClick={() => close(false)}>Cancel (false)</button>
</div>
<hr style={{ width: '100%', margin: '10px 0' }} />
<p style={{ fontSize: 12, color: '#666' }}>External close (uses overlay.close):</p>
<div style={{ display: 'flex', gap: 10 }}>
<button
onClick={() => overlay.close(overlayId)}
style={{
backgroundColor: '#ff6b6b',
color: 'white',
border: 'none',
padding: '8px 16px',
borderRadius: 4,
}}
>
overlay.close() → false
</button>
<button
onClick={() => overlay.closeAll()}
style={{
backgroundColor: '#ffa94d',
color: 'white',
border: 'none',
padding: '8px 16px',
borderRadius: 4,
}}
>
overlay.closeAll() → false
</button>
</div>
</div>
</Modal>
);
},
{ overlayId, defaultValue: false }
);
setResult(String(value));
}}
>
open dialog
</button>
</div>
);
}

function DemoExternalClose() {
const [result, setResult] = useState<string>('(no result yet)');
const [status, setStatus] = useState<'idle' | 'waiting'>('idle');
const overlayId = 'external-close-demo-overlay';

return (
<div>
<h2>5. Demo: External Close WITHOUT defaultValue (Promise stays pending)</h2>
<p style={{ fontSize: 14, color: '#666', marginBottom: 10 }}>
Without <code>defaultValue</code>, the Promise never resolves when closed externally.
</p>
<p>
Result: <strong>{result}</strong>
</p>
<p>
Status: <strong style={{ color: status === 'waiting' ? 'orange' : 'green' }}>{status}</strong>
</p>
<button
onClick={async () => {
setResult('(no result yet)');
setStatus('waiting');
const value = await overlay.openAsync<boolean>(
({ isOpen, close, unmount }) => {
return (
<Modal isOpen={isOpen} onExit={unmount}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 10,
}}
>
<p>Without defaultValue, external close keeps Promise pending</p>
<button onClick={() => close(true)}>close(true) - resolves</button>
<hr style={{ width: '100%', margin: '10px 0' }} />
<p style={{ fontSize: 12, color: '#666' }}>External close (Promise stays pending!):</p>
<button
onClick={() => overlay.close(overlayId)}
style={{
backgroundColor: '#ff6b6b',
color: 'white',
border: 'none',
padding: '8px 16px',
borderRadius: 4,
}}
>
overlay.close() - NO resolve
</button>
</div>
</Modal>
);
},
{ overlayId }
);
setResult(String(value));
setStatus('idle');
}}
>
open dialog
</button>
</div>
);
}
Loading
Loading