From 1b81452181ad23f474a5937554815f1c6ab0c1b2 Mon Sep 17 00:00:00 2001 From: nugthan Date: Tue, 23 Dec 2025 17:42:57 -0800 Subject: [PATCH 1/4] add global append --- src/lib/components/modal/modal.module.scss | 4 ++++ src/lib/components/modal/modal.tsx | 12 +++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/lib/components/modal/modal.module.scss b/src/lib/components/modal/modal.module.scss index 5c39867..ae10e37 100644 --- a/src/lib/components/modal/modal.module.scss +++ b/src/lib/components/modal/modal.module.scss @@ -2,6 +2,10 @@ position: fixed; } +.ModalAppend { + z-index: 9999; +} + .ModalAbsolute { position: absolute; } diff --git a/src/lib/components/modal/modal.tsx b/src/lib/components/modal/modal.tsx index 1d978c5..ac1a055 100644 --- a/src/lib/components/modal/modal.tsx +++ b/src/lib/components/modal/modal.tsx @@ -11,16 +11,22 @@ export interface ModalProps extends ModalInnerProps { * The modal will be appended to the passed element instead of being rendered in place * @defaultValue defaults inPlace **/ - renderTo: HTMLElement + renderTo?: HTMLElement + append?: boolean } -export function Modal({ renderTo, className, ...props }: ModalProps) { - const classes = classnames([styles.ModalFixed, className]) +export function Modal({ renderTo, append, className, ...props }: ModalProps) { + const classes = classnames([styles.ModalFixed, className, append && styles.ModalAppend]) const modalContent = if (renderTo) { return ReactDOM.createPortal(modalContent, renderTo) + } else if (append) { + // get the document body and append the modal there + const document = globalThis.document + + return ReactDOM.createPortal(modalContent, document.body) } return modalContent From 2e1a8bd027c8a379d4af492b6574db365e5fd4cb Mon Sep 17 00:00:00 2001 From: nugthan Date: Tue, 23 Dec 2025 18:08:50 -0800 Subject: [PATCH 2/4] rename to appendToBody --- src/lib/components/modal/modal.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/lib/components/modal/modal.tsx b/src/lib/components/modal/modal.tsx index ac1a055..3782450 100644 --- a/src/lib/components/modal/modal.tsx +++ b/src/lib/components/modal/modal.tsx @@ -12,17 +12,21 @@ export interface ModalProps extends ModalInnerProps { * @defaultValue defaults inPlace **/ renderTo?: HTMLElement - append?: boolean + appendToBody?: boolean } -export function Modal({ renderTo, append, className, ...props }: ModalProps) { - const classes = classnames([styles.ModalFixed, className, append && styles.ModalAppend]) +export function Modal({ renderTo, appendToBody, className, ...props }: ModalProps) { + const classes = classnames([ + styles.ModalFixed, + className, + appendToBody && styles.ModalAppend, + ]) const modalContent = if (renderTo) { return ReactDOM.createPortal(modalContent, renderTo) - } else if (append) { + } else if (appendToBody) { // get the document body and append the modal there const document = globalThis.document From dffa3303a3c0326476d2604f1c81ee5f7abcdc0e Mon Sep 17 00:00:00 2001 From: nugthan Date: Tue, 23 Dec 2025 18:17:50 -0800 Subject: [PATCH 3/4] make props either-or --- src/lib/components/modal/modal.tsx | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/lib/components/modal/modal.tsx b/src/lib/components/modal/modal.tsx index 3782450..12fe058 100644 --- a/src/lib/components/modal/modal.tsx +++ b/src/lib/components/modal/modal.tsx @@ -6,14 +6,24 @@ import type { ModalInnerProps } from "../modal-inner" import { classnames } from "../../../utils/classnames" import styles from "./modal.module.scss" -export interface ModalProps extends ModalInnerProps { - /** - * The modal will be appended to the passed element instead of being rendered in place - * @defaultValue defaults inPlace - **/ - renderTo?: HTMLElement - appendToBody?: boolean -} +export type ModalProps = ModalInnerProps & + ( + | { + /** + * The modal will be appended to the passed element instead of being rendered in place + * @defaultValue defaults inPlace + **/ + renderTo?: HTMLElement + appendToBody?: never + } + | { + /** + * Append modal to document.body + **/ + appendToBody?: boolean + renderTo?: never + } + ) export function Modal({ renderTo, appendToBody, className, ...props }: ModalProps) { const classes = classnames([ From 377accc5f029b97ed7f8b42e68e8fcd52c18d9d3 Mon Sep 17 00:00:00 2001 From: nugthan Date: Tue, 23 Dec 2025 18:22:58 -0800 Subject: [PATCH 4/4] switch to allow body in renderTo --- src/lib/components/modal/modal.tsx | 35 ++++++++++-------------------- 1 file changed, 12 insertions(+), 23 deletions(-) diff --git a/src/lib/components/modal/modal.tsx b/src/lib/components/modal/modal.tsx index 12fe058..a557443 100644 --- a/src/lib/components/modal/modal.tsx +++ b/src/lib/components/modal/modal.tsx @@ -6,26 +6,17 @@ import type { ModalInnerProps } from "../modal-inner" import { classnames } from "../../../utils/classnames" import styles from "./modal.module.scss" -export type ModalProps = ModalInnerProps & - ( - | { - /** - * The modal will be appended to the passed element instead of being rendered in place - * @defaultValue defaults inPlace - **/ - renderTo?: HTMLElement - appendToBody?: never - } - | { - /** - * Append modal to document.body - **/ - appendToBody?: boolean - renderTo?: never - } - ) +export interface ModalProps extends ModalInnerProps { + /** + * The modal will be appended to the passed element instead of being rendered in place + * @defaultValue defaults inPlace + **/ + renderTo?: HTMLElement | "body" +} + +export function Modal({ renderTo, className, ...props }: ModalProps) { + const appendToBody = renderTo === "body" -export function Modal({ renderTo, appendToBody, className, ...props }: ModalProps) { const classes = classnames([ styles.ModalFixed, className, @@ -34,13 +25,11 @@ export function Modal({ renderTo, appendToBody, className, ...props }: ModalProp const modalContent = - if (renderTo) { + if (renderTo && renderTo instanceof HTMLElement) { return ReactDOM.createPortal(modalContent, renderTo) } else if (appendToBody) { - // get the document body and append the modal there const document = globalThis.document - - return ReactDOM.createPortal(modalContent, document.body) + return ReactDOM.createPortal(modalContent, document) } return modalContent