first commit

This commit is contained in:
2026-06-24 09:48:54 +02:00
commit 41e62ddcad
33739 changed files with 4266226 additions and 0 deletions
+99
View File
@@ -0,0 +1,99 @@
import * as _radix_ui_react_context from '@radix-ui/react-context';
import { Scope } from '@radix-ui/react-context';
import * as React from 'react';
import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
import { FocusScope } from '@radix-ui/react-focus-scope';
import { Portal } from '@radix-ui/react-portal';
import { Primitive } from '@radix-ui/react-primitive';
type ScopedProps<P> = P & {
__scopeDialog?: Scope;
};
declare const createDialogScope: _radix_ui_react_context.CreateScope;
interface DialogProps {
children?: React.ReactNode;
open?: boolean;
defaultOpen?: boolean;
onOpenChange?(open: boolean): void;
modal?: boolean;
}
declare const Dialog: React.FC<DialogProps>;
type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
interface DialogTriggerProps extends PrimitiveButtonProps {
}
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
type PortalProps = React.ComponentPropsWithoutRef<typeof Portal>;
interface DialogPortalProps {
children?: React.ReactNode;
/**
* Specify a container element to portal the content into.
*/
container?: PortalProps['container'];
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const DialogPortal: React.FC<DialogPortalProps>;
interface DialogOverlayProps extends DialogOverlayImplProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
interface DialogOverlayImplProps extends PrimitiveDivProps {
}
interface DialogContentProps extends DialogContentTypeProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
interface DialogContentTypeProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
}
type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;
type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
interface DialogContentImplProps extends Omit<DismissableLayerProps, 'onDismiss'> {
/**
* When `true`, focus cannot escape the `Content` via keyboard,
* pointer, or a programmatic focus.
* @defaultValue false
*/
trapFocus?: FocusScopeProps['trapped'];
/**
* Event handler called when auto-focusing on open.
* Can be prevented.
*/
onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
/**
* Event handler called when auto-focusing on close.
* Can be prevented.
*/
onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
}
type PrimitiveHeading2Props = React.ComponentPropsWithoutRef<typeof Primitive.h2>;
interface DialogTitleProps extends PrimitiveHeading2Props {
}
declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
type PrimitiveParagraphProps = React.ComponentPropsWithoutRef<typeof Primitive.p>;
interface DialogDescriptionProps extends PrimitiveParagraphProps {
}
declare const DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
interface DialogCloseProps extends PrimitiveButtonProps {
}
declare const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
/** @deprecated Noop component to avoid breaking changes. */
declare const WarningProvider: React.FC<ScopedProps<{
children?: React.ReactNode;
contentName: string;
titleName: string;
docsSlug: 'dialog';
}>>;
export { DialogClose as Close, DialogContent as Content, DialogDescription as Description, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DialogOverlay as Overlay, DialogPortal as Portal, Dialog as Root, DialogTitle as Title, DialogTrigger as Trigger, WarningProvider, createDialogScope };
+99
View File
@@ -0,0 +1,99 @@
import * as _radix_ui_react_context from '@radix-ui/react-context';
import { Scope } from '@radix-ui/react-context';
import * as React from 'react';
import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
import { FocusScope } from '@radix-ui/react-focus-scope';
import { Portal } from '@radix-ui/react-portal';
import { Primitive } from '@radix-ui/react-primitive';
type ScopedProps<P> = P & {
__scopeDialog?: Scope;
};
declare const createDialogScope: _radix_ui_react_context.CreateScope;
interface DialogProps {
children?: React.ReactNode;
open?: boolean;
defaultOpen?: boolean;
onOpenChange?(open: boolean): void;
modal?: boolean;
}
declare const Dialog: React.FC<DialogProps>;
type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
interface DialogTriggerProps extends PrimitiveButtonProps {
}
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
type PortalProps = React.ComponentPropsWithoutRef<typeof Portal>;
interface DialogPortalProps {
children?: React.ReactNode;
/**
* Specify a container element to portal the content into.
*/
container?: PortalProps['container'];
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const DialogPortal: React.FC<DialogPortalProps>;
interface DialogOverlayProps extends DialogOverlayImplProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
interface DialogOverlayImplProps extends PrimitiveDivProps {
}
interface DialogContentProps extends DialogContentTypeProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with React animation libraries.
*/
forceMount?: true;
}
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
interface DialogContentTypeProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
}
type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;
type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
interface DialogContentImplProps extends Omit<DismissableLayerProps, 'onDismiss'> {
/**
* When `true`, focus cannot escape the `Content` via keyboard,
* pointer, or a programmatic focus.
* @defaultValue false
*/
trapFocus?: FocusScopeProps['trapped'];
/**
* Event handler called when auto-focusing on open.
* Can be prevented.
*/
onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
/**
* Event handler called when auto-focusing on close.
* Can be prevented.
*/
onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
}
type PrimitiveHeading2Props = React.ComponentPropsWithoutRef<typeof Primitive.h2>;
interface DialogTitleProps extends PrimitiveHeading2Props {
}
declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
type PrimitiveParagraphProps = React.ComponentPropsWithoutRef<typeof Primitive.p>;
interface DialogDescriptionProps extends PrimitiveParagraphProps {
}
declare const DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
interface DialogCloseProps extends PrimitiveButtonProps {
}
declare const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
/** @deprecated Noop component to avoid breaking changes. */
declare const WarningProvider: React.FC<ScopedProps<{
children?: React.ReactNode;
contentName: string;
titleName: string;
docsSlug: 'dialog';
}>>;
export { DialogClose as Close, DialogContent as Content, DialogDescription as Description, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DialogOverlay as Overlay, DialogPortal as Portal, Dialog as Root, DialogTitle as Title, DialogTrigger as Trigger, WarningProvider, createDialogScope };
+330
View File
@@ -0,0 +1,330 @@
"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
Close: () => DialogClose,
Content: () => DialogContent,
Description: () => DialogDescription,
Dialog: () => Dialog,
DialogClose: () => DialogClose,
DialogContent: () => DialogContent,
DialogDescription: () => DialogDescription,
DialogOverlay: () => DialogOverlay,
DialogPortal: () => DialogPortal,
DialogTitle: () => DialogTitle,
DialogTrigger: () => DialogTrigger,
Overlay: () => DialogOverlay,
Portal: () => DialogPortal,
Root: () => Dialog,
Title: () => DialogTitle,
Trigger: () => DialogTrigger,
WarningProvider: () => WarningProvider,
createDialogScope: () => createDialogScope
});
module.exports = __toCommonJS(index_exports);
// src/dialog.tsx
var React = __toESM(require("react"));
var import_primitive = require("@radix-ui/primitive");
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
var import_react_context = require("@radix-ui/react-context");
var import_react_id = require("@radix-ui/react-id");
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
var import_react_focus_scope = require("@radix-ui/react-focus-scope");
var import_react_portal = require("@radix-ui/react-portal");
var import_react_presence = require("@radix-ui/react-presence");
var import_react_primitive = require("@radix-ui/react-primitive");
var import_react_focus_guards = require("@radix-ui/react-focus-guards");
var import_react_remove_scroll = require("react-remove-scroll");
var import_aria_hidden = require("aria-hidden");
var import_react_slot = require("@radix-ui/react-slot");
var import_jsx_runtime = require("react/jsx-runtime");
var DIALOG_NAME = "Dialog";
var [createDialogContext, createDialogScope] = (0, import_react_context.createContextScope)(DIALOG_NAME);
var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
var Dialog = (props) => {
const {
__scopeDialog,
children,
open: openProp,
defaultOpen,
onOpenChange,
modal = true
} = props;
const triggerRef = React.useRef(null);
const contentRef = React.useRef(null);
const [open, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
prop: openProp,
defaultProp: defaultOpen ?? false,
onChange: onOpenChange,
caller: DIALOG_NAME
});
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DialogProvider,
{
scope: __scopeDialog,
triggerRef,
contentRef,
contentId: (0, import_react_id.useId)(),
titleId: (0, import_react_id.useId)(),
descriptionId: (0, import_react_id.useId)(),
open,
onOpenChange: setOpen,
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
modal,
children
}
);
};
Dialog.displayName = DIALOG_NAME;
var TRIGGER_NAME = "DialogTrigger";
var DialogTrigger = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...triggerProps } = props;
const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
const composedTriggerRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": context.open,
"aria-controls": context.open ? context.contentId : void 0,
"data-state": getState(context.open),
...triggerProps,
ref: composedTriggerRef,
onClick: (0, import_primitive.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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { asChild: true, container, children: child }) })) });
};
DialogPortal.displayName = PORTAL_NAME;
var OVERLAY_NAME = "DialogOverlay";
var DialogOverlay = React.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 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
}
);
DialogOverlay.displayName = OVERLAY_NAME;
var Slot = (0, import_react_slot.createSlot)("DialogOverlay.RemoveScroll");
var DialogOverlayImpl = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...overlayProps } = props;
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
const registerDismissableSurface = (0, import_react_dismissable_layer.useDismissableLayerSurface)();
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, registerDismissableSurface);
return (
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
// ie. when `Overlay` and `Content` are siblings
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_remove_scroll.RemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.div,
{
"data-state": getState(context.open),
...overlayProps,
ref: composedRefs,
style: { pointerEvents: "auto", ...overlayProps.style }
}
) })
);
}
);
var CONTENT_NAME = "DialogContent";
var DialogContent = React.forwardRef(
(props, forwardedRef) => {
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
const { forceMount = portalContext.forceMount, ...contentProps } = props;
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
}
);
DialogContent.displayName = CONTENT_NAME;
var DialogContentModal = React.forwardRef(
(props, forwardedRef) => {
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
const contentRef = React.useRef(null);
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
React.useEffect(() => {
const content = contentRef.current;
if (content) return (0, import_aria_hidden.hideOthers)(content);
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DialogContentImpl,
{
...props,
ref: composedRefs,
trapFocus: context.open,
disableOutsidePointerEvents: context.open,
onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
event.preventDefault();
context.triggerRef.current?.focus();
}),
onPointerDownOutside: (0, import_primitive.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: (0, import_primitive.composeEventHandlers)(
props.onFocusOutside,
(event) => event.preventDefault()
)
}
);
}
);
var DialogContentNonModal = React.forwardRef(
(props, forwardedRef) => {
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
const hasInteractedOutsideRef = React.useRef(false);
const hasPointerDownOutsideRef = React.useRef(false);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DialogContentImpl,
{
...props,
ref: forwardedRef,
trapFocus: false,
disableOutsidePointerEvents: false,
onCloseAutoFocus: (event) => {
props.onCloseAutoFocus?.(event);
if (!event.defaultPrevented) {
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
event.preventDefault();
}
hasInteractedOutsideRef.current = false;
hasPointerDownOutsideRef.current = false;
},
onInteractOutside: (event) => {
props.onInteractOutside?.(event);
if (!event.defaultPrevented) {
hasInteractedOutsideRef.current = true;
if (event.detail.originalEvent.type === "pointerdown") {
hasPointerDownOutsideRef.current = true;
}
}
const target = event.target;
const targetIsTrigger = context.triggerRef.current?.contains(target);
if (targetIsTrigger) event.preventDefault();
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
event.preventDefault();
}
}
}
);
}
);
var DialogContentImpl = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
(0, import_react_focus_guards.useFocusGuards)();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_focus_scope.FocusScope,
{
asChild: true,
loop: true,
trapped: trapFocus,
onMountAutoFocus: onOpenAutoFocus,
onUnmountAutoFocus: onCloseAutoFocus,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_dismissable_layer.DismissableLayer,
{
role: "dialog",
id: context.contentId,
"aria-describedby": context.descriptionId,
"aria-labelledby": context.titleId,
"data-state": getState(context.open),
...contentProps,
ref: forwardedRef,
deferPointerDownOutside: true,
onDismiss: () => context.onOpenChange(false)
}
)
}
) });
}
);
var TITLE_NAME = "DialogTitle";
var DialogTitle = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...titleProps } = props;
const context = useDialogContext(TITLE_NAME, __scopeDialog);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
}
);
DialogTitle.displayName = TITLE_NAME;
var DESCRIPTION_NAME = "DialogDescription";
var DialogDescription = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...descriptionProps } = props;
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
}
);
DialogDescription.displayName = DESCRIPTION_NAME;
var CLOSE_NAME = "DialogClose";
var DialogClose = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...closeProps } = props;
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.button,
{
type: "button",
...closeProps,
ref: forwardedRef,
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => context.onOpenChange(false))
}
);
}
);
DialogClose.displayName = CLOSE_NAME;
var WarningProvider = (props) => {
return props.children;
};
function getState(open) {
return open ? "open" : "closed";
}
//# sourceMappingURL=index.js.map
File diff suppressed because one or more lines are too long
+298
View File
@@ -0,0 +1,298 @@
"use client";
// src/dialog.tsx
import * as React from "react";
import { composeEventHandlers } from "@radix-ui/primitive";
import { useComposedRefs } from "@radix-ui/react-compose-refs";
import { createContextScope } from "@radix-ui/react-context";
import { useId } from "@radix-ui/react-id";
import { useControllableState } from "@radix-ui/react-use-controllable-state";
import { DismissableLayer, useDismissableLayerSurface } from "@radix-ui/react-dismissable-layer";
import { FocusScope } from "@radix-ui/react-focus-scope";
import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
import { Presence } from "@radix-ui/react-presence";
import { Primitive } from "@radix-ui/react-primitive";
import { useFocusGuards } from "@radix-ui/react-focus-guards";
import { RemoveScroll } from "react-remove-scroll";
import { hideOthers } from "aria-hidden";
import { createSlot } from "@radix-ui/react-slot";
import { Fragment, jsx } from "react/jsx-runtime";
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 = React.useRef(null);
const contentRef = React.useRef(null);
const [open, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen ?? false,
onChange: onOpenChange,
caller: DIALOG_NAME
});
return /* @__PURE__ */ jsx(
DialogProvider,
{
scope: __scopeDialog,
triggerRef,
contentRef,
contentId: useId(),
titleId: useId(),
descriptionId: useId(),
open,
onOpenChange: setOpen,
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
modal,
children
}
);
};
Dialog.displayName = DIALOG_NAME;
var TRIGGER_NAME = "DialogTrigger";
var DialogTrigger = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...triggerProps } = props;
const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
return /* @__PURE__ */ jsx(
Primitive.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": context.open,
"aria-controls": context.open ? context.contentId : void 0,
"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 /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(PortalPrimitive, { asChild: true, container, children: child }) })) });
};
DialogPortal.displayName = PORTAL_NAME;
var OVERLAY_NAME = "DialogOverlay";
var DialogOverlay = React.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 ? /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
}
);
DialogOverlay.displayName = OVERLAY_NAME;
var Slot = createSlot("DialogOverlay.RemoveScroll");
var DialogOverlayImpl = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...overlayProps } = props;
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
const registerDismissableSurface = useDismissableLayerSurface();
const composedRefs = useComposedRefs(forwardedRef, registerDismissableSurface);
return (
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
// ie. when `Overlay` and `Content` are siblings
/* @__PURE__ */ jsx(RemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx(
Primitive.div,
{
"data-state": getState(context.open),
...overlayProps,
ref: composedRefs,
style: { pointerEvents: "auto", ...overlayProps.style }
}
) })
);
}
);
var CONTENT_NAME = "DialogContent";
var DialogContent = React.forwardRef(
(props, forwardedRef) => {
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
const { forceMount = portalContext.forceMount, ...contentProps } = props;
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
}
);
DialogContent.displayName = CONTENT_NAME;
var DialogContentModal = React.forwardRef(
(props, forwardedRef) => {
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
const contentRef = React.useRef(null);
const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
React.useEffect(() => {
const content = contentRef.current;
if (content) return hideOthers(content);
}, []);
return /* @__PURE__ */ jsx(
DialogContentImpl,
{
...props,
ref: composedRefs,
trapFocus: context.open,
disableOutsidePointerEvents: context.open,
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
event.preventDefault();
context.triggerRef.current?.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 = React.forwardRef(
(props, forwardedRef) => {
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
const hasInteractedOutsideRef = React.useRef(false);
const hasPointerDownOutsideRef = React.useRef(false);
return /* @__PURE__ */ jsx(
DialogContentImpl,
{
...props,
ref: forwardedRef,
trapFocus: false,
disableOutsidePointerEvents: false,
onCloseAutoFocus: (event) => {
props.onCloseAutoFocus?.(event);
if (!event.defaultPrevented) {
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
event.preventDefault();
}
hasInteractedOutsideRef.current = false;
hasPointerDownOutsideRef.current = false;
},
onInteractOutside: (event) => {
props.onInteractOutside?.(event);
if (!event.defaultPrevented) {
hasInteractedOutsideRef.current = true;
if (event.detail.originalEvent.type === "pointerdown") {
hasPointerDownOutsideRef.current = true;
}
}
const target = event.target;
const targetIsTrigger = context.triggerRef.current?.contains(target);
if (targetIsTrigger) event.preventDefault();
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
event.preventDefault();
}
}
}
);
}
);
var DialogContentImpl = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
useFocusGuards();
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
FocusScope,
{
asChild: true,
loop: true,
trapped: trapFocus,
onMountAutoFocus: onOpenAutoFocus,
onUnmountAutoFocus: onCloseAutoFocus,
children: /* @__PURE__ */ jsx(
DismissableLayer,
{
role: "dialog",
id: context.contentId,
"aria-describedby": context.descriptionId,
"aria-labelledby": context.titleId,
"data-state": getState(context.open),
...contentProps,
ref: forwardedRef,
deferPointerDownOutside: true,
onDismiss: () => context.onOpenChange(false)
}
)
}
) });
}
);
var TITLE_NAME = "DialogTitle";
var DialogTitle = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...titleProps } = props;
const context = useDialogContext(TITLE_NAME, __scopeDialog);
return /* @__PURE__ */ jsx(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
}
);
DialogTitle.displayName = TITLE_NAME;
var DESCRIPTION_NAME = "DialogDescription";
var DialogDescription = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...descriptionProps } = props;
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
return /* @__PURE__ */ jsx(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
}
);
DialogDescription.displayName = DESCRIPTION_NAME;
var CLOSE_NAME = "DialogClose";
var DialogClose = React.forwardRef(
(props, forwardedRef) => {
const { __scopeDialog, ...closeProps } = props;
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
return /* @__PURE__ */ jsx(
Primitive.button,
{
type: "button",
...closeProps,
ref: forwardedRef,
onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
}
);
}
);
DialogClose.displayName = CLOSE_NAME;
var WarningProvider = (props) => {
return props.children;
};
function getState(open) {
return open ? "open" : "closed";
}
export {
DialogClose as Close,
DialogContent as Content,
DialogDescription as Description,
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
DialogOverlay as Overlay,
DialogPortal as Portal,
Dialog as Root,
DialogTitle as Title,
DialogTrigger as Trigger,
WarningProvider,
createDialogScope
};
//# sourceMappingURL=index.mjs.map
File diff suppressed because one or more lines are too long