"use client"; import { Combination_default, DismissableLayer, FocusScope, Portal, hideOthers, useFocusGuards, useId } from "./chunk-W3FPET4J.js"; import { composeEventHandlers, createContext2, createContextScope, useControllableState, useLayoutEffect2 } from "./chunk-3CC64B4R.js"; import { Primitive } from "./chunk-4FJT6N3H.js"; import "./chunk-OL2EO3PE.js"; import { Slot, useComposedRefs } from "./chunk-N2W4B4AT.js"; import { require_jsx_runtime } from "./chunk-BNJCGGFL.js"; import { require_react } from "./chunk-2WIBB5DE.js"; import { __toESM } from "./chunk-DC5AMYBS.js"; // node_modules/@radix-ui/react-dialog/dist/index.mjs var React3 = __toESM(require_react(), 1); // node_modules/@radix-ui/react-presence/dist/index.mjs var React2 = __toESM(require_react(), 1); var React = __toESM(require_react(), 1); function useStateMachine(initialState, machine) { return React.useReducer((state, event) => { const nextState = machine[state][event]; return nextState ?? state; }, initialState); } var Presence = (props) => { const { present, children } = props; const presence = usePresence(present); const child = typeof children === "function" ? children({ present: presence.isPresent }) : React2.Children.only(children); const ref = useComposedRefs(presence.ref, getElementRef(child)); const forceMount = typeof children === "function"; return forceMount || presence.isPresent ? React2.cloneElement(child, { ref }) : null; }; Presence.displayName = "Presence"; function usePresence(present) { const [node, setNode] = React2.useState(); const stylesRef = React2.useRef({}); const prevPresentRef = React2.useRef(present); const prevAnimationNameRef = React2.useRef("none"); const initialState = present ? "mounted" : "unmounted"; const [state, send] = useStateMachine(initialState, { mounted: { UNMOUNT: "unmounted", ANIMATION_OUT: "unmountSuspended" }, unmountSuspended: { MOUNT: "mounted", ANIMATION_END: "unmounted" }, unmounted: { MOUNT: "mounted" } }); React2.useEffect(() => { const currentAnimationName = getAnimationName(stylesRef.current); prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none"; }, [state]); useLayoutEffect2(() => { const styles = stylesRef.current; const wasPresent = prevPresentRef.current; const hasPresentChanged = wasPresent !== present; if (hasPresentChanged) { const prevAnimationName = prevAnimationNameRef.current; const currentAnimationName = getAnimationName(styles); if (present) { send("MOUNT"); } else if (currentAnimationName === "none" || (styles == null ? void 0 : styles.display) === "none") { send("UNMOUNT"); } else { const isAnimating = prevAnimationName !== currentAnimationName; if (wasPresent && isAnimating) { send("ANIMATION_OUT"); } else { send("UNMOUNT"); } } prevPresentRef.current = present; } }, [present, send]); useLayoutEffect2(() => { if (node) { let timeoutId; const ownerWindow = node.ownerDocument.defaultView ?? window; const handleAnimationEnd = (event) => { const currentAnimationName = getAnimationName(stylesRef.current); const isCurrentAnimation = currentAnimationName.includes(event.animationName); if (event.target === node && isCurrentAnimation) { send("ANIMATION_END"); if (!prevPresentRef.current) { const currentFillMode = node.style.animationFillMode; node.style.animationFillMode = "forwards"; timeoutId = ownerWindow.setTimeout(() => { if (node.style.animationFillMode === "forwards") { node.style.animationFillMode = currentFillMode; } }); } } }; const handleAnimationStart = (event) => { if (event.target === node) { prevAnimationNameRef.current = getAnimationName(stylesRef.current); } }; node.addEventListener("animationstart", handleAnimationStart); node.addEventListener("animationcancel", handleAnimationEnd); node.addEventListener("animationend", handleAnimationEnd); return () => { ownerWindow.clearTimeout(timeoutId); node.removeEventListener("animationstart", handleAnimationStart); node.removeEventListener("animationcancel", handleAnimationEnd); node.removeEventListener("animationend", handleAnimationEnd); }; } else { send("ANIMATION_END"); } }, [node, send]); return { isPresent: ["mounted", "unmountSuspended"].includes(state), ref: React2.useCallback((node2) => { if (node2) stylesRef.current = getComputedStyle(node2); setNode(node2); }, []) }; } function getAnimationName(styles) { return (styles == null ? void 0 : styles.animationName) || "none"; } function getElementRef(element) { var _a, _b; let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get; let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning; if (mayWarn) { return element.ref; } getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get; mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning; if (mayWarn) { return element.props.ref; } return element.props.ref || element.ref; } // node_modules/@radix-ui/react-dialog/dist/index.mjs var import_jsx_runtime = __toESM(require_jsx_runtime(), 1); var DIALOG_NAME = "Dialog"; var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME); var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME); var Dialog = (props) => { const { __scopeDialog, children, open: openProp, defaultOpen, onOpenChange, modal = true } = props; const triggerRef = React3.useRef(null); const contentRef = React3.useRef(null); const [open = false, setOpen] = useControllableState({ prop: openProp, defaultProp: defaultOpen, onChange: onOpenChange }); return (0, import_jsx_runtime.jsx)( DialogProvider, { scope: __scopeDialog, triggerRef, contentRef, contentId: useId(), titleId: useId(), descriptionId: useId(), open, onOpenChange: setOpen, onOpenToggle: React3.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]), modal, children } ); }; Dialog.displayName = DIALOG_NAME; var TRIGGER_NAME = "DialogTrigger"; var DialogTrigger = React3.forwardRef( (props, forwardedRef) => { const { __scopeDialog, ...triggerProps } = props; const context = useDialogContext(TRIGGER_NAME, __scopeDialog); const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef); return (0, import_jsx_runtime.jsx)( Primitive.button, { type: "button", "aria-haspopup": "dialog", "aria-expanded": context.open, "aria-controls": context.contentId, "data-state": getState(context.open), ...triggerProps, ref: composedTriggerRef, onClick: composeEventHandlers(props.onClick, context.onOpenToggle) } ); } ); DialogTrigger.displayName = TRIGGER_NAME; var PORTAL_NAME = "DialogPortal"; var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, { forceMount: void 0 }); var DialogPortal = (props) => { const { __scopeDialog, forceMount, children, container } = props; const context = useDialogContext(PORTAL_NAME, __scopeDialog); return (0, import_jsx_runtime.jsx)(PortalProvider, { scope: __scopeDialog, forceMount, children: React3.Children.map(children, (child) => (0, import_jsx_runtime.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime.jsx)(Portal, { asChild: true, container, children: child }) })) }); }; DialogPortal.displayName = PORTAL_NAME; var OVERLAY_NAME = "DialogOverlay"; var DialogOverlay = React3.forwardRef( (props, forwardedRef) => { const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog); const { forceMount = portalContext.forceMount, ...overlayProps } = props; const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog); return context.modal ? (0, import_jsx_runtime.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime.jsx)(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null; } ); DialogOverlay.displayName = OVERLAY_NAME; var DialogOverlayImpl = React3.forwardRef( (props, forwardedRef) => { const { __scopeDialog, ...overlayProps } = props; const context = useDialogContext(OVERLAY_NAME, __scopeDialog); return ( // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll` // ie. when `Overlay` and `Content` are siblings (0, import_jsx_runtime.jsx)(Combination_default, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: (0, import_jsx_runtime.jsx)( Primitive.div, { "data-state": getState(context.open), ...overlayProps, ref: forwardedRef, style: { pointerEvents: "auto", ...overlayProps.style } } ) }) ); } ); var CONTENT_NAME = "DialogContent"; var DialogContent = React3.forwardRef( (props, forwardedRef) => { const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog); const { forceMount = portalContext.forceMount, ...contentProps } = props; const context = useDialogContext(CONTENT_NAME, props.__scopeDialog); return (0, import_jsx_runtime.jsx)(Presence, { present: forceMount || context.open, children: context.modal ? (0, import_jsx_runtime.jsx)(DialogContentModal, { ...contentProps, ref: forwardedRef }) : (0, import_jsx_runtime.jsx)(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) }); } ); DialogContent.displayName = CONTENT_NAME; var DialogContentModal = React3.forwardRef( (props, forwardedRef) => { const context = useDialogContext(CONTENT_NAME, props.__scopeDialog); const contentRef = React3.useRef(null); const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef); React3.useEffect(() => { const content = contentRef.current; if (content) return hideOthers(content); }, []); return (0, import_jsx_runtime.jsx)( DialogContentImpl, { ...props, ref: composedRefs, trapFocus: context.open, disableOutsidePointerEvents: true, onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => { var _a; event.preventDefault(); (_a = context.triggerRef.current) == null ? void 0 : _a.focus(); }), onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => { const originalEvent = event.detail.originalEvent; const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true; const isRightClick = originalEvent.button === 2 || ctrlLeftClick; if (isRightClick) event.preventDefault(); }), onFocusOutside: composeEventHandlers( props.onFocusOutside, (event) => event.preventDefault() ) } ); } ); var DialogContentNonModal = React3.forwardRef( (props, forwardedRef) => { const context = useDialogContext(CONTENT_NAME, props.__scopeDialog); const hasInteractedOutsideRef = React3.useRef(false); const hasPointerDownOutsideRef = React3.useRef(false); return (0, import_jsx_runtime.jsx)( DialogContentImpl, { ...props, ref: forwardedRef, trapFocus: false, disableOutsidePointerEvents: false, onCloseAutoFocus: (event) => { var _a, _b; (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event); if (!event.defaultPrevented) { if (!hasInteractedOutsideRef.current) (_b = context.triggerRef.current) == null ? void 0 : _b.focus(); event.preventDefault(); } hasInteractedOutsideRef.current = false; hasPointerDownOutsideRef.current = false; }, onInteractOutside: (event) => { var _a, _b; (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event); if (!event.defaultPrevented) { hasInteractedOutsideRef.current = true; if (event.detail.originalEvent.type === "pointerdown") { hasPointerDownOutsideRef.current = true; } } const target = event.target; const targetIsTrigger = (_b = context.triggerRef.current) == null ? void 0 : _b.contains(target); if (targetIsTrigger) event.preventDefault(); if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) { event.preventDefault(); } } } ); } ); var DialogContentImpl = React3.forwardRef( (props, forwardedRef) => { const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props; const context = useDialogContext(CONTENT_NAME, __scopeDialog); const contentRef = React3.useRef(null); const composedRefs = useComposedRefs(forwardedRef, contentRef); useFocusGuards(); return (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ (0, import_jsx_runtime.jsx)( FocusScope, { asChild: true, loop: true, trapped: trapFocus, onMountAutoFocus: onOpenAutoFocus, onUnmountAutoFocus: onCloseAutoFocus, children: (0, import_jsx_runtime.jsx)( DismissableLayer, { role: "dialog", id: context.contentId, "aria-describedby": context.descriptionId, "aria-labelledby": context.titleId, "data-state": getState(context.open), ...contentProps, ref: composedRefs, onDismiss: () => context.onOpenChange(false) } ) } ), (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ (0, import_jsx_runtime.jsx)(TitleWarning, { titleId: context.titleId }), (0, import_jsx_runtime.jsx)(DescriptionWarning, { contentRef, descriptionId: context.descriptionId }) ] }) ] }); } ); var TITLE_NAME = "DialogTitle"; var DialogTitle = React3.forwardRef( (props, forwardedRef) => { const { __scopeDialog, ...titleProps } = props; const context = useDialogContext(TITLE_NAME, __scopeDialog); return (0, import_jsx_runtime.jsx)(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef }); } ); DialogTitle.displayName = TITLE_NAME; var DESCRIPTION_NAME = "DialogDescription"; var DialogDescription = React3.forwardRef( (props, forwardedRef) => { const { __scopeDialog, ...descriptionProps } = props; const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog); return (0, import_jsx_runtime.jsx)(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef }); } ); DialogDescription.displayName = DESCRIPTION_NAME; var CLOSE_NAME = "DialogClose"; var DialogClose = React3.forwardRef( (props, forwardedRef) => { const { __scopeDialog, ...closeProps } = props; const context = useDialogContext(CLOSE_NAME, __scopeDialog); return (0, import_jsx_runtime.jsx)( Primitive.button, { type: "button", ...closeProps, ref: forwardedRef, onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false)) } ); } ); DialogClose.displayName = CLOSE_NAME; function getState(open) { return open ? "open" : "closed"; } var TITLE_WARNING_NAME = "DialogTitleWarning"; var [WarningProvider, useWarningContext] = createContext2(TITLE_WARNING_NAME, { contentName: CONTENT_NAME, titleName: TITLE_NAME, docsSlug: "dialog" }); var TitleWarning = ({ titleId }) => { const titleWarningContext = useWarningContext(TITLE_WARNING_NAME); const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users. If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component. For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`; React3.useEffect(() => { if (titleId) { const hasTitle = document.getElementById(titleId); if (!hasTitle) console.error(MESSAGE); } }, [MESSAGE, titleId]); return null; }; var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning"; var DescriptionWarning = ({ contentRef, descriptionId }) => { const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME); const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`; React3.useEffect(() => { var _a; const describedById = (_a = contentRef.current) == null ? void 0 : _a.getAttribute("aria-describedby"); if (descriptionId && describedById) { const hasDescription = document.getElementById(descriptionId); if (!hasDescription) console.warn(MESSAGE); } }, [MESSAGE, contentRef, descriptionId]); return null; }; var Root = Dialog; var Trigger = DialogTrigger; var Portal2 = DialogPortal; var Overlay = DialogOverlay; var Content = DialogContent; var Title = DialogTitle; var Description = DialogDescription; var Close = DialogClose; export { Close, Content, Description, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Overlay, Portal2 as Portal, Root, Title, Trigger, WarningProvider, createDialogScope }; //# sourceMappingURL=@radix-ui_react-dialog.js.map