mirror of
https://github.com/langgenius/dify.git
synced 2026-04-26 18:27:15 +08:00
7f67e1a2fc
Signed-off-by: yyh <yuanyouhuilyz@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
// z-index strategy (relies on root `isolation: isolate` in layout.tsx):
|
|
// All overlay primitives (Tooltip / Popover / Dropdown / Select / Dialog) — z-50
|
|
// Overlays share the same z-index; DOM order handles stacking when multiple are open.
|
|
// This ensures overlays inside a Dialog (e.g. a Tooltip on a dialog button) render
|
|
// above the dialog backdrop instead of being clipped by it.
|
|
// Toast — z-[99], always on top (defined in toast component)
|
|
|
|
import { Dialog as BaseDialog } from '@base-ui/react/dialog'
|
|
import * as React from 'react'
|
|
import { cn } from '@/utils/classnames'
|
|
|
|
export const Dialog = BaseDialog.Root
|
|
export const DialogTrigger = BaseDialog.Trigger
|
|
export const DialogTitle = BaseDialog.Title
|
|
export const DialogDescription = BaseDialog.Description
|
|
export const DialogClose = BaseDialog.Close
|
|
|
|
type DialogContentProps = {
|
|
children: React.ReactNode
|
|
className?: string
|
|
overlayClassName?: string
|
|
closable?: boolean
|
|
}
|
|
|
|
export function DialogContent({
|
|
children,
|
|
className,
|
|
overlayClassName,
|
|
closable = false,
|
|
}: DialogContentProps) {
|
|
return (
|
|
<BaseDialog.Portal>
|
|
<BaseDialog.Backdrop
|
|
className={cn(
|
|
'fixed inset-0 z-50 bg-background-overlay',
|
|
'transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 motion-reduce:transition-none',
|
|
overlayClassName,
|
|
)}
|
|
/>
|
|
<BaseDialog.Popup
|
|
className={cn(
|
|
'fixed left-1/2 top-1/2 z-50 max-h-[80dvh] w-[480px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl',
|
|
'transition-[transform,scale,opacity] duration-150 data-[ending-style]:scale-95 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 motion-reduce:transition-none',
|
|
className,
|
|
)}
|
|
>
|
|
{closable && (
|
|
<BaseDialog.Close aria-label="Close" className="absolute right-6 top-6 z-10 flex h-5 w-5 cursor-pointer items-center justify-center rounded-2xl hover:bg-state-base-hover">
|
|
<span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
|
|
</BaseDialog.Close>
|
|
)}
|
|
{children}
|
|
</BaseDialog.Popup>
|
|
</BaseDialog.Portal>
|
|
)
|
|
}
|