node_modules ignore

This commit is contained in:
2025-05-08 23:43:47 +02:00
parent e19d52f172
commit 4574544c9f
65041 changed files with 10593536 additions and 0 deletions

View File

@@ -0,0 +1,13 @@
# `react-alert-dialog`
## Installation
```sh
$ yarn add @radix-ui/react-alert-dialog
# or
$ npm install @radix-ui/react-alert-dialog
```
## Usage
View docs [here](https://radix-ui.com/primitives/docs/components/alert-dialog).

View File

@@ -0,0 +1,50 @@
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import * as Radix from "@radix-ui/react-primitive";
export const createAlertDialogScope: import("@radix-ui/react-context").CreateScope;
type DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
export interface AlertDialogProps extends Omit<DialogProps, 'modal'> {
}
export const AlertDialog: React.FC<AlertDialogProps>;
type DialogTriggerProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
export interface AlertDialogTriggerProps extends DialogTriggerProps {
}
export const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
type DialogPortalProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
export interface AlertDialogPortalProps extends DialogPortalProps {
}
export const AlertDialogPortal: React.FC<AlertDialogPortalProps>;
type DialogOverlayProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
export interface AlertDialogOverlayProps extends DialogOverlayProps {
}
export const AlertDialogOverlay: React.ForwardRefExoticComponent<AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
type DialogContentProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
export interface AlertDialogContentProps extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {
}
export const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
type DialogTitleProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
export interface AlertDialogTitleProps extends DialogTitleProps {
}
export const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
type DialogDescriptionProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
export interface AlertDialogDescriptionProps extends DialogDescriptionProps {
}
export const AlertDialogDescription: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
type DialogCloseProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
export interface AlertDialogActionProps extends DialogCloseProps {
}
export const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
export interface AlertDialogCancelProps extends DialogCloseProps {
}
export const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
export const Root: React.FC<AlertDialogProps>;
export const Trigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
export const Portal: React.FC<AlertDialogPortalProps>;
export const Overlay: React.ForwardRefExoticComponent<AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
export const Content: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
export const Action: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
export const Cancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
export const Title: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
export const Description: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1,50 @@
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import * as Radix from "@radix-ui/react-primitive";
export const createAlertDialogScope: import("@radix-ui/react-context").CreateScope;
type DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
export interface AlertDialogProps extends Omit<DialogProps, 'modal'> {
}
export const AlertDialog: React.FC<AlertDialogProps>;
type DialogTriggerProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
export interface AlertDialogTriggerProps extends DialogTriggerProps {
}
export const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
type DialogPortalProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
export interface AlertDialogPortalProps extends DialogPortalProps {
}
export const AlertDialogPortal: React.FC<AlertDialogPortalProps>;
type DialogOverlayProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
export interface AlertDialogOverlayProps extends DialogOverlayProps {
}
export const AlertDialogOverlay: React.ForwardRefExoticComponent<AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
type DialogContentProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
export interface AlertDialogContentProps extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {
}
export const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
type DialogTitleProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
export interface AlertDialogTitleProps extends DialogTitleProps {
}
export const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
type DialogDescriptionProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
export interface AlertDialogDescriptionProps extends DialogDescriptionProps {
}
export const AlertDialogDescription: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
type DialogCloseProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
export interface AlertDialogActionProps extends DialogCloseProps {
}
export const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
export interface AlertDialogCancelProps extends DialogCloseProps {
}
export const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
export const Root: React.FC<AlertDialogProps>;
export const Trigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
export const Portal: React.FC<AlertDialogPortalProps>;
export const Overlay: React.ForwardRefExoticComponent<AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
export const Content: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
export const Action: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
export const Cancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
export const Title: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
export const Description: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"mappings":";;;AAkBA,OAAA,6FAEE,CAAC;AAGH,mBAAmB,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,IAAI,CAAC,CAAC;AAC/E,iCAA2B,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;CAAG;AAEhE,OAAA,MAAM,aAAa,MAAM,EAAE,CAAC,gBAAgB,CAI3C,CAAC;AAUF,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,OAAO,CAAC,CAAC;AACzF,wCAAkC,SAAQ,kBAAkB;CAAG;AAE/D,OAAA,MAAM,qHAML,CAAC;AAUF,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,MAAM,CAAC,CAAC;AACvF,uCAAiC,SAAQ,iBAAiB;CAAG;AAE7D,OAAA,MAAM,mBAAmB,MAAM,EAAE,CAAC,sBAAsB,CAMvD,CAAC;AAWF,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,OAAO,CAAC,CAAC;AACzF,wCAAkC,SAAQ,kBAAkB;CAAG;AAE/D,OAAA,MAAM,kHAML,CAAC;AAkBF,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,OAAO,CAAC,CAAC;AACzF,wCACE,SAAQ,IAAI,CAAC,kBAAkB,EAAE,sBAAsB,GAAG,mBAAmB,CAAC;CAAG;AAEnF,OAAA,MAAM,kHA0CL,CAAC;AAWF,wBAAwB,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,KAAK,CAAC,CAAC;AACrF,sCAAgC,SAAQ,gBAAgB;CAAG;AAE3D,OAAA,MAAM,kHAML,CAAC;AAWF,8BAA8B,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,WAAW,CAAC,CAAC;AACjG,4CAAsC,SAAQ,sBAAsB;CAAG;AAEvE,OAAA,MAAM,gIAOJ,CAAC;AAWH,wBAAwB,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,KAAK,CAAC,CAAC;AACrF,uCAAiC,SAAQ,gBAAgB;CAAG;AAE5D,OAAA,MAAM,mHAML,CAAC;AAWF,uCAAiC,SAAQ,gBAAgB;CAAG;AAE5D,OAAA,MAAM,mHAQL,CAAC;AA6BF,OAAA,MAAM,gCAAkB,CAAC;AACzB,OAAA,MAAM,0GAA4B,CAAC;AACnC,OAAA,MAAM,wCAA0B,CAAC;AACjC,OAAA,MAAM,uGAA4B,CAAC;AACnC,OAAA,MAAM,uGAA4B,CAAC;AACnC,OAAA,MAAM,wGAA0B,CAAC;AACjC,OAAA,MAAM,wGAA0B,CAAC;AACjC,OAAA,MAAM,uGAAwB,CAAC;AAC/B,OAAA,MAAM,qHAAoC,CAAC","sources":["packages/react/alert-dialog/src/packages/react/alert-dialog/src/AlertDialog.tsx","packages/react/alert-dialog/src/packages/react/alert-dialog/src/index.ts","packages/react/alert-dialog/src/index.ts"],"sourcesContent":[null,null,"export {\n createAlertDialogScope,\n //\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogContent,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogTitle,\n AlertDialogDescription,\n //\n Root,\n Trigger,\n Portal,\n Overlay,\n Content,\n Action,\n Cancel,\n Title,\n Description,\n} from './AlertDialog';\nexport type {\n AlertDialogProps,\n AlertDialogTriggerProps,\n AlertDialogPortalProps,\n AlertDialogOverlayProps,\n AlertDialogContentProps,\n AlertDialogActionProps,\n AlertDialogCancelProps,\n AlertDialogTitleProps,\n AlertDialogDescriptionProps,\n} from './AlertDialog';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

View File

@@ -0,0 +1,218 @@
var $hLIh8$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
var $hLIh8$react = require("react");
var $hLIh8$radixuireactcontext = require("@radix-ui/react-context");
var $hLIh8$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
var $hLIh8$radixuireactdialog = require("@radix-ui/react-dialog");
var $hLIh8$radixuiprimitive = require("@radix-ui/primitive");
var $hLIh8$radixuireactslot = require("@radix-ui/react-slot");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "createAlertDialogScope", () => $8c7baeec26a63e97$export$b8891880751c2c5b);
$parcel$export(module.exports, "AlertDialog", () => $8c7baeec26a63e97$export$de466dd8317b0b75);
$parcel$export(module.exports, "AlertDialogTrigger", () => $8c7baeec26a63e97$export$6edd7a623ef0f40b);
$parcel$export(module.exports, "AlertDialogPortal", () => $8c7baeec26a63e97$export$660f2bfdb986706c);
$parcel$export(module.exports, "AlertDialogOverlay", () => $8c7baeec26a63e97$export$a707a4895ce23256);
$parcel$export(module.exports, "AlertDialogContent", () => $8c7baeec26a63e97$export$94e6af45f0af4efd);
$parcel$export(module.exports, "AlertDialogAction", () => $8c7baeec26a63e97$export$b454f818c58ee85d);
$parcel$export(module.exports, "AlertDialogCancel", () => $8c7baeec26a63e97$export$2f67a923571aaea0);
$parcel$export(module.exports, "AlertDialogTitle", () => $8c7baeec26a63e97$export$225e0da62d314b7);
$parcel$export(module.exports, "AlertDialogDescription", () => $8c7baeec26a63e97$export$a23b55cde55ad9a5);
$parcel$export(module.exports, "Root", () => $8c7baeec26a63e97$export$be92b6f5f03c0fe9);
$parcel$export(module.exports, "Trigger", () => $8c7baeec26a63e97$export$41fb9f06171c75f4);
$parcel$export(module.exports, "Portal", () => $8c7baeec26a63e97$export$602eac185826482c);
$parcel$export(module.exports, "Overlay", () => $8c7baeec26a63e97$export$c6fdb837b070b4ff);
$parcel$export(module.exports, "Content", () => $8c7baeec26a63e97$export$7c6e2c02157bb7d2);
$parcel$export(module.exports, "Action", () => $8c7baeec26a63e97$export$e19cd5f9376f8cee);
$parcel$export(module.exports, "Cancel", () => $8c7baeec26a63e97$export$848c9b7ead0df967);
$parcel$export(module.exports, "Title", () => $8c7baeec26a63e97$export$f99233281efd08a0);
$parcel$export(module.exports, "Description", () => $8c7baeec26a63e97$export$393edc798c47379d);
/* -------------------------------------------------------------------------------------------------
* AlertDialog
* -----------------------------------------------------------------------------------------------*/ const $8c7baeec26a63e97$var$ROOT_NAME = 'AlertDialog';
const [$8c7baeec26a63e97$var$createAlertDialogContext, $8c7baeec26a63e97$export$b8891880751c2c5b] = $hLIh8$radixuireactcontext.createContextScope($8c7baeec26a63e97$var$ROOT_NAME, [
$hLIh8$radixuireactdialog.createDialogScope
]);
const $8c7baeec26a63e97$var$useDialogScope = $hLIh8$radixuireactdialog.createDialogScope();
const $8c7baeec26a63e97$export$de466dd8317b0b75 = (props)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...alertDialogProps } = props;
const dialogScope = $8c7baeec26a63e97$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactdialog.Root, ($parcel$interopDefault($hLIh8$babelruntimehelpersextends))({}, dialogScope, alertDialogProps, {
modal: true
}));
};
/*#__PURE__*/ Object.assign($8c7baeec26a63e97$export$de466dd8317b0b75, {
displayName: $8c7baeec26a63e97$var$ROOT_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogTrigger
* -----------------------------------------------------------------------------------------------*/ const $8c7baeec26a63e97$var$TRIGGER_NAME = 'AlertDialogTrigger';
const $8c7baeec26a63e97$export$6edd7a623ef0f40b = /*#__PURE__*/ $hLIh8$react.forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...triggerProps } = props;
const dialogScope = $8c7baeec26a63e97$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactdialog.Trigger, ($parcel$interopDefault($hLIh8$babelruntimehelpersextends))({}, dialogScope, triggerProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($8c7baeec26a63e97$export$6edd7a623ef0f40b, {
displayName: $8c7baeec26a63e97$var$TRIGGER_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogPortal
* -----------------------------------------------------------------------------------------------*/ const $8c7baeec26a63e97$var$PORTAL_NAME = 'AlertDialogPortal';
const $8c7baeec26a63e97$export$660f2bfdb986706c = (props)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...portalProps } = props;
const dialogScope = $8c7baeec26a63e97$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactdialog.Portal, ($parcel$interopDefault($hLIh8$babelruntimehelpersextends))({}, dialogScope, portalProps));
};
/*#__PURE__*/ Object.assign($8c7baeec26a63e97$export$660f2bfdb986706c, {
displayName: $8c7baeec26a63e97$var$PORTAL_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogOverlay
* -----------------------------------------------------------------------------------------------*/ const $8c7baeec26a63e97$var$OVERLAY_NAME = 'AlertDialogOverlay';
const $8c7baeec26a63e97$export$a707a4895ce23256 = /*#__PURE__*/ $hLIh8$react.forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...overlayProps } = props;
const dialogScope = $8c7baeec26a63e97$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactdialog.Overlay, ($parcel$interopDefault($hLIh8$babelruntimehelpersextends))({}, dialogScope, overlayProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($8c7baeec26a63e97$export$a707a4895ce23256, {
displayName: $8c7baeec26a63e97$var$OVERLAY_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogContent
* -----------------------------------------------------------------------------------------------*/ const $8c7baeec26a63e97$var$CONTENT_NAME = 'AlertDialogContent';
const [$8c7baeec26a63e97$var$AlertDialogContentProvider, $8c7baeec26a63e97$var$useAlertDialogContentContext] = $8c7baeec26a63e97$var$createAlertDialogContext($8c7baeec26a63e97$var$CONTENT_NAME);
const $8c7baeec26a63e97$export$94e6af45f0af4efd = /*#__PURE__*/ $hLIh8$react.forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , children: children , ...contentProps } = props;
const dialogScope = $8c7baeec26a63e97$var$useDialogScope(__scopeAlertDialog);
const contentRef = $hLIh8$react.useRef(null);
const composedRefs = $hLIh8$radixuireactcomposerefs.useComposedRefs(forwardedRef, contentRef);
const cancelRef = $hLIh8$react.useRef(null);
return /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactdialog.WarningProvider, {
contentName: $8c7baeec26a63e97$var$CONTENT_NAME,
titleName: $8c7baeec26a63e97$var$TITLE_NAME,
docsSlug: "alert-dialog"
}, /*#__PURE__*/ $hLIh8$react.createElement($8c7baeec26a63e97$var$AlertDialogContentProvider, {
scope: __scopeAlertDialog,
cancelRef: cancelRef
}, /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactdialog.Content, ($parcel$interopDefault($hLIh8$babelruntimehelpersextends))({
role: "alertdialog"
}, dialogScope, contentProps, {
ref: composedRefs,
onOpenAutoFocus: $hLIh8$radixuiprimitive.composeEventHandlers(contentProps.onOpenAutoFocus, (event)=>{
var _cancelRef$current;
event.preventDefault();
(_cancelRef$current = cancelRef.current) === null || _cancelRef$current === void 0 || _cancelRef$current.focus({
preventScroll: true
});
}),
onPointerDownOutside: (event)=>event.preventDefault()
,
onInteractOutside: (event)=>event.preventDefault()
}), /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactslot.Slottable, null, children), false)));
});
/*#__PURE__*/ Object.assign($8c7baeec26a63e97$export$94e6af45f0af4efd, {
displayName: $8c7baeec26a63e97$var$CONTENT_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogTitle
* -----------------------------------------------------------------------------------------------*/ const $8c7baeec26a63e97$var$TITLE_NAME = 'AlertDialogTitle';
const $8c7baeec26a63e97$export$225e0da62d314b7 = /*#__PURE__*/ $hLIh8$react.forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...titleProps } = props;
const dialogScope = $8c7baeec26a63e97$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactdialog.Title, ($parcel$interopDefault($hLIh8$babelruntimehelpersextends))({}, dialogScope, titleProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($8c7baeec26a63e97$export$225e0da62d314b7, {
displayName: $8c7baeec26a63e97$var$TITLE_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogDescription
* -----------------------------------------------------------------------------------------------*/ const $8c7baeec26a63e97$var$DESCRIPTION_NAME = 'AlertDialogDescription';
const $8c7baeec26a63e97$export$a23b55cde55ad9a5 = /*#__PURE__*/ $hLIh8$react.forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...descriptionProps } = props;
const dialogScope = $8c7baeec26a63e97$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactdialog.Description, ($parcel$interopDefault($hLIh8$babelruntimehelpersextends))({}, dialogScope, descriptionProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($8c7baeec26a63e97$export$a23b55cde55ad9a5, {
displayName: $8c7baeec26a63e97$var$DESCRIPTION_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogAction
* -----------------------------------------------------------------------------------------------*/ const $8c7baeec26a63e97$var$ACTION_NAME = 'AlertDialogAction';
const $8c7baeec26a63e97$export$b454f818c58ee85d = /*#__PURE__*/ $hLIh8$react.forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...actionProps } = props;
const dialogScope = $8c7baeec26a63e97$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactdialog.Close, ($parcel$interopDefault($hLIh8$babelruntimehelpersextends))({}, dialogScope, actionProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($8c7baeec26a63e97$export$b454f818c58ee85d, {
displayName: $8c7baeec26a63e97$var$ACTION_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogCancel
* -----------------------------------------------------------------------------------------------*/ const $8c7baeec26a63e97$var$CANCEL_NAME = 'AlertDialogCancel';
const $8c7baeec26a63e97$export$2f67a923571aaea0 = /*#__PURE__*/ $hLIh8$react.forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...cancelProps } = props;
const { cancelRef: cancelRef } = $8c7baeec26a63e97$var$useAlertDialogContentContext($8c7baeec26a63e97$var$CANCEL_NAME, __scopeAlertDialog);
const dialogScope = $8c7baeec26a63e97$var$useDialogScope(__scopeAlertDialog);
const ref = $hLIh8$radixuireactcomposerefs.useComposedRefs(forwardedRef, cancelRef);
return /*#__PURE__*/ $hLIh8$react.createElement($hLIh8$radixuireactdialog.Close, ($parcel$interopDefault($hLIh8$babelruntimehelpersextends))({}, dialogScope, cancelProps, {
ref: ref
}));
});
/*#__PURE__*/ Object.assign($8c7baeec26a63e97$export$2f67a923571aaea0, {
displayName: $8c7baeec26a63e97$var$CANCEL_NAME
});
/* ---------------------------------------------------------------------------------------------- */ const $8c7baeec26a63e97$var$DescriptionWarning = ({ contentRef: contentRef })=>{
const MESSAGE = `\`${$8c7baeec26a63e97$var$CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
You can add a description to the \`${$8c7baeec26a63e97$var$CONTENT_NAME}\` by passing a \`${$8c7baeec26a63e97$var$DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${$8c7baeec26a63e97$var$CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
$hLIh8$react.useEffect(()=>{
var _contentRef$current;
const hasDescription = document.getElementById((_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.getAttribute('aria-describedby'));
if (!hasDescription) console.warn(MESSAGE);
}, [
MESSAGE,
contentRef
]);
return null;
};
const $8c7baeec26a63e97$export$be92b6f5f03c0fe9 = $8c7baeec26a63e97$export$de466dd8317b0b75;
const $8c7baeec26a63e97$export$41fb9f06171c75f4 = $8c7baeec26a63e97$export$6edd7a623ef0f40b;
const $8c7baeec26a63e97$export$602eac185826482c = $8c7baeec26a63e97$export$660f2bfdb986706c;
const $8c7baeec26a63e97$export$c6fdb837b070b4ff = $8c7baeec26a63e97$export$a707a4895ce23256;
const $8c7baeec26a63e97$export$7c6e2c02157bb7d2 = $8c7baeec26a63e97$export$94e6af45f0af4efd;
const $8c7baeec26a63e97$export$e19cd5f9376f8cee = $8c7baeec26a63e97$export$b454f818c58ee85d;
const $8c7baeec26a63e97$export$848c9b7ead0df967 = $8c7baeec26a63e97$export$2f67a923571aaea0;
const $8c7baeec26a63e97$export$f99233281efd08a0 = $8c7baeec26a63e97$export$225e0da62d314b7;
const $8c7baeec26a63e97$export$393edc798c47379d = $8c7baeec26a63e97$export$a23b55cde55ad9a5;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,193 @@
import $4k4D0$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
import {createElement as $4k4D0$createElement, forwardRef as $4k4D0$forwardRef, useRef as $4k4D0$useRef, useEffect as $4k4D0$useEffect} from "react";
import {createContextScope as $4k4D0$createContextScope} from "@radix-ui/react-context";
import {useComposedRefs as $4k4D0$useComposedRefs} from "@radix-ui/react-compose-refs";
import {createDialogScope as $4k4D0$createDialogScope, Root as $4k4D0$Root, Trigger as $4k4D0$Trigger, Portal as $4k4D0$Portal, Overlay as $4k4D0$Overlay, WarningProvider as $4k4D0$WarningProvider, Content as $4k4D0$Content, Title as $4k4D0$Title, Description as $4k4D0$Description, Close as $4k4D0$Close} from "@radix-ui/react-dialog";
import {composeEventHandlers as $4k4D0$composeEventHandlers} from "@radix-ui/primitive";
import {Slottable as $4k4D0$Slottable} from "@radix-ui/react-slot";
/* -------------------------------------------------------------------------------------------------
* AlertDialog
* -----------------------------------------------------------------------------------------------*/ const $905f4ae918aab1aa$var$ROOT_NAME = 'AlertDialog';
const [$905f4ae918aab1aa$var$createAlertDialogContext, $905f4ae918aab1aa$export$b8891880751c2c5b] = $4k4D0$createContextScope($905f4ae918aab1aa$var$ROOT_NAME, [
$4k4D0$createDialogScope
]);
const $905f4ae918aab1aa$var$useDialogScope = $4k4D0$createDialogScope();
const $905f4ae918aab1aa$export$de466dd8317b0b75 = (props)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...alertDialogProps } = props;
const dialogScope = $905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $4k4D0$createElement($4k4D0$Root, $4k4D0$babelruntimehelpersesmextends({}, dialogScope, alertDialogProps, {
modal: true
}));
};
/*#__PURE__*/ Object.assign($905f4ae918aab1aa$export$de466dd8317b0b75, {
displayName: $905f4ae918aab1aa$var$ROOT_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogTrigger
* -----------------------------------------------------------------------------------------------*/ const $905f4ae918aab1aa$var$TRIGGER_NAME = 'AlertDialogTrigger';
const $905f4ae918aab1aa$export$6edd7a623ef0f40b = /*#__PURE__*/ $4k4D0$forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...triggerProps } = props;
const dialogScope = $905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $4k4D0$createElement($4k4D0$Trigger, $4k4D0$babelruntimehelpersesmextends({}, dialogScope, triggerProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($905f4ae918aab1aa$export$6edd7a623ef0f40b, {
displayName: $905f4ae918aab1aa$var$TRIGGER_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogPortal
* -----------------------------------------------------------------------------------------------*/ const $905f4ae918aab1aa$var$PORTAL_NAME = 'AlertDialogPortal';
const $905f4ae918aab1aa$export$660f2bfdb986706c = (props)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...portalProps } = props;
const dialogScope = $905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $4k4D0$createElement($4k4D0$Portal, $4k4D0$babelruntimehelpersesmextends({}, dialogScope, portalProps));
};
/*#__PURE__*/ Object.assign($905f4ae918aab1aa$export$660f2bfdb986706c, {
displayName: $905f4ae918aab1aa$var$PORTAL_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogOverlay
* -----------------------------------------------------------------------------------------------*/ const $905f4ae918aab1aa$var$OVERLAY_NAME = 'AlertDialogOverlay';
const $905f4ae918aab1aa$export$a707a4895ce23256 = /*#__PURE__*/ $4k4D0$forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...overlayProps } = props;
const dialogScope = $905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $4k4D0$createElement($4k4D0$Overlay, $4k4D0$babelruntimehelpersesmextends({}, dialogScope, overlayProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($905f4ae918aab1aa$export$a707a4895ce23256, {
displayName: $905f4ae918aab1aa$var$OVERLAY_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogContent
* -----------------------------------------------------------------------------------------------*/ const $905f4ae918aab1aa$var$CONTENT_NAME = 'AlertDialogContent';
const [$905f4ae918aab1aa$var$AlertDialogContentProvider, $905f4ae918aab1aa$var$useAlertDialogContentContext] = $905f4ae918aab1aa$var$createAlertDialogContext($905f4ae918aab1aa$var$CONTENT_NAME);
const $905f4ae918aab1aa$export$94e6af45f0af4efd = /*#__PURE__*/ $4k4D0$forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , children: children , ...contentProps } = props;
const dialogScope = $905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);
const contentRef = $4k4D0$useRef(null);
const composedRefs = $4k4D0$useComposedRefs(forwardedRef, contentRef);
const cancelRef = $4k4D0$useRef(null);
return /*#__PURE__*/ $4k4D0$createElement($4k4D0$WarningProvider, {
contentName: $905f4ae918aab1aa$var$CONTENT_NAME,
titleName: $905f4ae918aab1aa$var$TITLE_NAME,
docsSlug: "alert-dialog"
}, /*#__PURE__*/ $4k4D0$createElement($905f4ae918aab1aa$var$AlertDialogContentProvider, {
scope: __scopeAlertDialog,
cancelRef: cancelRef
}, /*#__PURE__*/ $4k4D0$createElement($4k4D0$Content, $4k4D0$babelruntimehelpersesmextends({
role: "alertdialog"
}, dialogScope, contentProps, {
ref: composedRefs,
onOpenAutoFocus: $4k4D0$composeEventHandlers(contentProps.onOpenAutoFocus, (event)=>{
var _cancelRef$current;
event.preventDefault();
(_cancelRef$current = cancelRef.current) === null || _cancelRef$current === void 0 || _cancelRef$current.focus({
preventScroll: true
});
}),
onPointerDownOutside: (event)=>event.preventDefault()
,
onInteractOutside: (event)=>event.preventDefault()
}), /*#__PURE__*/ $4k4D0$createElement($4k4D0$Slottable, null, children), false)));
});
/*#__PURE__*/ Object.assign($905f4ae918aab1aa$export$94e6af45f0af4efd, {
displayName: $905f4ae918aab1aa$var$CONTENT_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogTitle
* -----------------------------------------------------------------------------------------------*/ const $905f4ae918aab1aa$var$TITLE_NAME = 'AlertDialogTitle';
const $905f4ae918aab1aa$export$225e0da62d314b7 = /*#__PURE__*/ $4k4D0$forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...titleProps } = props;
const dialogScope = $905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $4k4D0$createElement($4k4D0$Title, $4k4D0$babelruntimehelpersesmextends({}, dialogScope, titleProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($905f4ae918aab1aa$export$225e0da62d314b7, {
displayName: $905f4ae918aab1aa$var$TITLE_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogDescription
* -----------------------------------------------------------------------------------------------*/ const $905f4ae918aab1aa$var$DESCRIPTION_NAME = 'AlertDialogDescription';
const $905f4ae918aab1aa$export$a23b55cde55ad9a5 = /*#__PURE__*/ $4k4D0$forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...descriptionProps } = props;
const dialogScope = $905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $4k4D0$createElement($4k4D0$Description, $4k4D0$babelruntimehelpersesmextends({}, dialogScope, descriptionProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($905f4ae918aab1aa$export$a23b55cde55ad9a5, {
displayName: $905f4ae918aab1aa$var$DESCRIPTION_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogAction
* -----------------------------------------------------------------------------------------------*/ const $905f4ae918aab1aa$var$ACTION_NAME = 'AlertDialogAction';
const $905f4ae918aab1aa$export$b454f818c58ee85d = /*#__PURE__*/ $4k4D0$forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...actionProps } = props;
const dialogScope = $905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);
return /*#__PURE__*/ $4k4D0$createElement($4k4D0$Close, $4k4D0$babelruntimehelpersesmextends({}, dialogScope, actionProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($905f4ae918aab1aa$export$b454f818c58ee85d, {
displayName: $905f4ae918aab1aa$var$ACTION_NAME
});
/* -------------------------------------------------------------------------------------------------
* AlertDialogCancel
* -----------------------------------------------------------------------------------------------*/ const $905f4ae918aab1aa$var$CANCEL_NAME = 'AlertDialogCancel';
const $905f4ae918aab1aa$export$2f67a923571aaea0 = /*#__PURE__*/ $4k4D0$forwardRef((props, forwardedRef)=>{
const { __scopeAlertDialog: __scopeAlertDialog , ...cancelProps } = props;
const { cancelRef: cancelRef } = $905f4ae918aab1aa$var$useAlertDialogContentContext($905f4ae918aab1aa$var$CANCEL_NAME, __scopeAlertDialog);
const dialogScope = $905f4ae918aab1aa$var$useDialogScope(__scopeAlertDialog);
const ref = $4k4D0$useComposedRefs(forwardedRef, cancelRef);
return /*#__PURE__*/ $4k4D0$createElement($4k4D0$Close, $4k4D0$babelruntimehelpersesmextends({}, dialogScope, cancelProps, {
ref: ref
}));
});
/*#__PURE__*/ Object.assign($905f4ae918aab1aa$export$2f67a923571aaea0, {
displayName: $905f4ae918aab1aa$var$CANCEL_NAME
});
/* ---------------------------------------------------------------------------------------------- */ const $905f4ae918aab1aa$var$DescriptionWarning = ({ contentRef: contentRef })=>{
const MESSAGE = `\`${$905f4ae918aab1aa$var$CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
You can add a description to the \`${$905f4ae918aab1aa$var$CONTENT_NAME}\` by passing a \`${$905f4ae918aab1aa$var$DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${$905f4ae918aab1aa$var$CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
$4k4D0$useEffect(()=>{
var _contentRef$current;
const hasDescription = document.getElementById((_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.getAttribute('aria-describedby'));
if (!hasDescription) console.warn(MESSAGE);
}, [
MESSAGE,
contentRef
]);
return null;
};
const $905f4ae918aab1aa$export$be92b6f5f03c0fe9 = $905f4ae918aab1aa$export$de466dd8317b0b75;
const $905f4ae918aab1aa$export$41fb9f06171c75f4 = $905f4ae918aab1aa$export$6edd7a623ef0f40b;
const $905f4ae918aab1aa$export$602eac185826482c = $905f4ae918aab1aa$export$660f2bfdb986706c;
const $905f4ae918aab1aa$export$c6fdb837b070b4ff = $905f4ae918aab1aa$export$a707a4895ce23256;
const $905f4ae918aab1aa$export$7c6e2c02157bb7d2 = $905f4ae918aab1aa$export$94e6af45f0af4efd;
const $905f4ae918aab1aa$export$e19cd5f9376f8cee = $905f4ae918aab1aa$export$b454f818c58ee85d;
const $905f4ae918aab1aa$export$848c9b7ead0df967 = $905f4ae918aab1aa$export$2f67a923571aaea0;
const $905f4ae918aab1aa$export$f99233281efd08a0 = $905f4ae918aab1aa$export$225e0da62d314b7;
const $905f4ae918aab1aa$export$393edc798c47379d = $905f4ae918aab1aa$export$a23b55cde55ad9a5;
export {$905f4ae918aab1aa$export$b8891880751c2c5b as createAlertDialogScope, $905f4ae918aab1aa$export$de466dd8317b0b75 as AlertDialog, $905f4ae918aab1aa$export$6edd7a623ef0f40b as AlertDialogTrigger, $905f4ae918aab1aa$export$660f2bfdb986706c as AlertDialogPortal, $905f4ae918aab1aa$export$a707a4895ce23256 as AlertDialogOverlay, $905f4ae918aab1aa$export$94e6af45f0af4efd as AlertDialogContent, $905f4ae918aab1aa$export$b454f818c58ee85d as AlertDialogAction, $905f4ae918aab1aa$export$2f67a923571aaea0 as AlertDialogCancel, $905f4ae918aab1aa$export$225e0da62d314b7 as AlertDialogTitle, $905f4ae918aab1aa$export$a23b55cde55ad9a5 as AlertDialogDescription, $905f4ae918aab1aa$export$be92b6f5f03c0fe9 as Root, $905f4ae918aab1aa$export$41fb9f06171c75f4 as Trigger, $905f4ae918aab1aa$export$602eac185826482c as Portal, $905f4ae918aab1aa$export$c6fdb837b070b4ff as Overlay, $905f4ae918aab1aa$export$7c6e2c02157bb7d2 as Content, $905f4ae918aab1aa$export$e19cd5f9376f8cee as Action, $905f4ae918aab1aa$export$848c9b7ead0df967 as Cancel, $905f4ae918aab1aa$export$f99233281efd08a0 as Title, $905f4ae918aab1aa$export$393edc798c47379d as Description};
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,61 @@
{
"name": "@radix-ui/react-alert-dialog",
"version": "1.0.5",
"license": "MIT",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
},
"source": "./src/index.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"src",
"dist"
],
"sideEffects": false,
"scripts": {
"clean": "rm -rf dist",
"version": "yarn version"
},
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-dialog": "1.0.5",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-slot": "1.0.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}

View File

@@ -0,0 +1,353 @@
import * as React from 'react';
import { css } from '../../../../stitches.config';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
export default { title: 'Components/AlertDialog' };
export const Styled = () => (
<AlertDialog.Root>
<AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={overlayClass()} />
<AlertDialog.Content className={contentClass()}>
<AlertDialog.Title className={titleClass()}>Are you sure?</AlertDialog.Title>
<AlertDialog.Description className={descriptionClass()}>
This will do a very dangerous thing. Thar be dragons!
</AlertDialog.Description>
<AlertDialog.Action className={actionClass()}>yolo, do it</AlertDialog.Action>
<AlertDialog.Cancel className={cancelClass()}>maybe not</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
);
export const Controlled = () => {
const [open, setOpen] = React.useState(false);
const [housePurchased, setHousePurchased] = React.useState(false);
return (
<div>
<div>
<img src="https://i.ibb.co/K54hsKt/house.jpg" alt="a large white house with a red roof" />
</div>
<AlertDialog.Root open={open} onOpenChange={setOpen}>
<AlertDialog.Trigger
onClick={(e) => {
if (housePurchased) {
e.preventDefault();
setHousePurchased(false);
}
}}
>
{housePurchased ? 'You bought the house! Sell it!' : 'Buy this house'}
</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={overlayClass()} />
<AlertDialog.Content className={contentClass()}>
<AlertDialog.Title>Are you sure?</AlertDialog.Title>
<AlertDialog.Description>
Houses are very expensive and it looks like you only have 20 in the bank. Maybe
consult with a financial advisor?
</AlertDialog.Description>
<AlertDialog.Action className={actionClass()} onClick={() => setHousePurchased(true)}>
buy it anyway
</AlertDialog.Action>
<AlertDialog.Cancel className={cancelClass()}>
good point, I'll reconsider
</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
</div>
);
};
export const Chromatic = () => (
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
height: '100vh',
}}
>
<div>
<h1>Uncontrolled</h1>
<h2>Closed</h2>
<AlertDialog.Root>
<AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={overlayClass()} />
<AlertDialog.Content className={chromaticContentClass()}>
<AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
<AlertDialog.Description className={descriptionClass()}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
<h2>Open</h2>
<AlertDialog.Root defaultOpen>
<AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay
className={overlayClass()}
style={{ left: 0, bottom: '50%', width: '25%' }}
/>
<AlertDialog.Content
className={chromaticContentClass()}
style={{ top: '25%', left: '12%' }}
>
<AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
<AlertDialog.Description className={descriptionClass()}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
</div>
<div>
<h1>Uncontrolled with reordered parts</h1>
<h2>Closed</h2>
<AlertDialog.Root>
<AlertDialog.Portal>
<AlertDialog.Overlay className={overlayClass()} />
<AlertDialog.Content className={chromaticContentClass()}>
<AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
<AlertDialog.Description className={descriptionClass()}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
<AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
</AlertDialog.Root>
<h2>Open</h2>
<AlertDialog.Root defaultOpen>
<AlertDialog.Portal>
<AlertDialog.Overlay
className={overlayClass()}
style={{ left: '25%', bottom: '50%', width: '25%' }}
/>
<AlertDialog.Content
className={chromaticContentClass()}
style={{ top: '25%', left: '37%' }}
>
<AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
<AlertDialog.Description className={descriptionClass()}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
<AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
</AlertDialog.Root>
</div>
<div>
<h1>Controlled</h1>
<h2>Closed</h2>
<AlertDialog.Root open={false}>
<AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={overlayClass()} />
<AlertDialog.Content className={chromaticContentClass()}>
<AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
<AlertDialog.Description className={descriptionClass()}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
<h2>Open</h2>
<AlertDialog.Root open>
<AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay
className={overlayClass()}
style={{ left: '50%', bottom: '50%', width: '25%' }}
/>
<AlertDialog.Content
className={chromaticContentClass()}
style={{ top: '25%', left: '62%' }}
>
<AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
<AlertDialog.Description className={descriptionClass()}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
</div>
<div>
<h1>Controlled with reordered parts</h1>
<h2>Closed</h2>
<AlertDialog.Root open={false}>
<AlertDialog.Portal>
<AlertDialog.Overlay className={overlayClass()} />
<AlertDialog.Content className={chromaticContentClass()}>
<AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
<AlertDialog.Description className={descriptionClass()}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
<AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
</AlertDialog.Root>
<h2>Open</h2>
<AlertDialog.Root open>
<AlertDialog.Portal>
<AlertDialog.Overlay
className={overlayClass()}
style={{ left: '75%', bottom: '50%', width: '25%' }}
/>
<AlertDialog.Content
className={chromaticContentClass()}
style={{ top: '25%', left: '88%' }}
>
<AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
<AlertDialog.Description className={descriptionClass()}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
<AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
</AlertDialog.Root>
</div>
<div>
<h1>State attributes</h1>
<h2>Closed</h2>
<AlertDialog.Root>
<AlertDialog.Trigger className={triggerAttrClass()}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={overlayAttrClass()} />
<AlertDialog.Content className={contentAttrClass()}>
<AlertDialog.Title className={titleAttrClass()}>Title</AlertDialog.Title>
<AlertDialog.Description className={descriptionAttrClass()}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={actionAttrClass()}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={cancelAttrClass()}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
<h2>Open</h2>
<AlertDialog.Root defaultOpen>
<AlertDialog.Trigger className={triggerAttrClass()}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={overlayAttrClass()} style={{ top: '50%' }} />
<AlertDialog.Content className={contentAttrClass()} style={{ top: '75%' }}>
<AlertDialog.Title className={titleAttrClass()}>Title</AlertDialog.Title>
<AlertDialog.Description className={descriptionAttrClass()}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={actionAttrClass()}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={cancelAttrClass()}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
</div>
</div>
);
Chromatic.parameters = { chromatic: { disable: false } };
const triggerClass = css({});
const RECOMMENDED_CSS__ALERT_DIALOG__OVERLAY: any = {
// ensures overlay is positionned correctly
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
};
const overlayClass = css({
...RECOMMENDED_CSS__ALERT_DIALOG__OVERLAY,
backgroundColor: 'black',
opacity: 0.2,
});
const RECOMMENDED_CSS__ALERT_DIALOG__CONTENT: any = {
// ensures good default position for content
position: 'fixed',
top: 0,
left: 0,
};
const contentClass = css({
...RECOMMENDED_CSS__ALERT_DIALOG__CONTENT,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
background: 'white',
minWidth: 300,
minHeight: 150,
padding: 50,
borderRadius: 10,
backgroundColor: 'white',
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.12)',
});
const cancelClass = css({
appearance: 'none',
padding: 10,
border: 'none',
background: '$grey100',
});
const actionClass = css({
appearance: 'none',
padding: 10,
border: 'none',
backgroundColor: '$red',
color: '$white',
});
const titleClass = css({});
const descriptionClass = css({});
const chromaticContentClass = css(contentClass, {
padding: 10,
minWidth: 'auto',
minHeight: 'auto',
});
const styles = {
backgroundColor: 'rgba(0, 0, 255, 0.3)',
border: '2px solid blue',
padding: 10,
'&[data-state="closed"]': { borderColor: 'red' },
'&[data-state="open"]': { borderColor: 'green' },
};
const triggerAttrClass = css(styles);
const overlayAttrClass = css(overlayClass, styles);
const contentAttrClass = css(chromaticContentClass, styles);
const cancelAttrClass = css(styles);
const actionAttrClass = css(styles);
const titleAttrClass = css(styles);
const descriptionAttrClass = css(styles);

View File

@@ -0,0 +1,61 @@
import React from 'react';
import { axe } from 'jest-axe';
import { RenderResult } from '@testing-library/react';
import { render, fireEvent } from '@testing-library/react';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
const OPEN_TEXT = 'Open';
const CANCEL_TEXT = 'Cancel';
const ACTION_TEXT = 'Do it';
const TITLE_TEXT = 'Warning';
const DESC_TEXT = 'This is a warning';
const OVERLAY_TEST_ID = 'test-overlay';
const DialogTest = (props: React.ComponentProps<typeof AlertDialog.Root>) => (
<AlertDialog.Root {...props}>
<AlertDialog.Trigger>{OPEN_TEXT}</AlertDialog.Trigger>
<AlertDialog.Overlay data-testid={OVERLAY_TEST_ID} />
<AlertDialog.Content>
<AlertDialog.Title>{TITLE_TEXT}</AlertDialog.Title>
<AlertDialog.Description>{DESC_TEXT}</AlertDialog.Description>
<AlertDialog.Cancel>{CANCEL_TEXT}</AlertDialog.Cancel>
<AlertDialog.Action>{ACTION_TEXT}</AlertDialog.Action>
</AlertDialog.Content>
</AlertDialog.Root>
);
describe('given a default Dialog', () => {
let rendered: RenderResult;
let title: HTMLElement;
let trigger: HTMLElement;
let cancelButton: HTMLElement;
beforeEach(() => {
rendered = render(<DialogTest />);
trigger = rendered.getByText(OPEN_TEXT);
});
it('should have no accessibility violations in default state', async () => {
expect(await axe(rendered.container)).toHaveNoViolations();
});
describe('after clicking the trigger', () => {
beforeEach(() => {
fireEvent.click(trigger);
title = rendered.getByText(TITLE_TEXT);
cancelButton = rendered.getByText(CANCEL_TEXT);
});
it('should open the content', () => {
expect(title).toBeVisible();
});
it('should have no accessibility violations when open', async () => {
expect(await axe(rendered.container)).toHaveNoViolations();
});
it('should focus the cancel button', () => {
expect(cancelButton).toHaveFocus();
});
});
});

View File

@@ -0,0 +1,307 @@
import * as React from 'react';
import { createContextScope } from '@radix-ui/react-context';
import { useComposedRefs } from '@radix-ui/react-compose-refs';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { createDialogScope } from '@radix-ui/react-dialog';
import { composeEventHandlers } from '@radix-ui/primitive';
import { Slottable } from '@radix-ui/react-slot';
import type * as Radix from '@radix-ui/react-primitive';
import type { Scope } from '@radix-ui/react-context';
/* -------------------------------------------------------------------------------------------------
* AlertDialog
* -----------------------------------------------------------------------------------------------*/
const ROOT_NAME = 'AlertDialog';
type ScopedProps<P> = P & { __scopeAlertDialog?: Scope };
const [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [
createDialogScope,
]);
const useDialogScope = createDialogScope();
type DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
interface AlertDialogProps extends Omit<DialogProps, 'modal'> {}
const AlertDialog: React.FC<AlertDialogProps> = (props: ScopedProps<AlertDialogProps>) => {
const { __scopeAlertDialog, ...alertDialogProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return <DialogPrimitive.Root {...dialogScope} {...alertDialogProps} modal={true} />;
};
AlertDialog.displayName = ROOT_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogTrigger
* -----------------------------------------------------------------------------------------------*/
const TRIGGER_NAME = 'AlertDialogTrigger';
type AlertDialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;
type DialogTriggerProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
interface AlertDialogTriggerProps extends DialogTriggerProps {}
const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(
(props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {
const { __scopeAlertDialog, ...triggerProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return <DialogPrimitive.Trigger {...dialogScope} {...triggerProps} ref={forwardedRef} />;
}
);
AlertDialogTrigger.displayName = TRIGGER_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogPortal
* -----------------------------------------------------------------------------------------------*/
const PORTAL_NAME = 'AlertDialogPortal';
type DialogPortalProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
interface AlertDialogPortalProps extends DialogPortalProps {}
const AlertDialogPortal: React.FC<AlertDialogPortalProps> = (
props: ScopedProps<AlertDialogPortalProps>
) => {
const { __scopeAlertDialog, ...portalProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return <DialogPrimitive.Portal {...dialogScope} {...portalProps} />;
};
AlertDialogPortal.displayName = PORTAL_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogOverlay
* -----------------------------------------------------------------------------------------------*/
const OVERLAY_NAME = 'AlertDialogOverlay';
type AlertDialogOverlayElement = React.ElementRef<typeof DialogPrimitive.Overlay>;
type DialogOverlayProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
interface AlertDialogOverlayProps extends DialogOverlayProps {}
const AlertDialogOverlay = React.forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(
(props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {
const { __scopeAlertDialog, ...overlayProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return <DialogPrimitive.Overlay {...dialogScope} {...overlayProps} ref={forwardedRef} />;
}
);
AlertDialogOverlay.displayName = OVERLAY_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogContent
* -----------------------------------------------------------------------------------------------*/
const CONTENT_NAME = 'AlertDialogContent';
type AlertDialogContentContextValue = {
cancelRef: React.MutableRefObject<AlertDialogCancelElement | null>;
};
const [AlertDialogContentProvider, useAlertDialogContentContext] =
createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME);
type AlertDialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
type DialogContentProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
interface AlertDialogContentProps
extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}
const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
(props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {
const { __scopeAlertDialog, children, ...contentProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
const contentRef = React.useRef<AlertDialogContentElement>(null);
const composedRefs = useComposedRefs(forwardedRef, contentRef);
const cancelRef = React.useRef<AlertDialogCancelElement | null>(null);
return (
<DialogPrimitive.WarningProvider
contentName={CONTENT_NAME}
titleName={TITLE_NAME}
docsSlug="alert-dialog"
>
<AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>
<DialogPrimitive.Content
role="alertdialog"
{...dialogScope}
{...contentProps}
ref={composedRefs}
onOpenAutoFocus={composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {
event.preventDefault();
cancelRef.current?.focus({ preventScroll: true });
})}
onPointerDownOutside={(event) => event.preventDefault()}
onInteractOutside={(event) => event.preventDefault()}
>
{/**
* We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`
* around everything, otherwise the `DescriptionWarning` would be rendered straight away.
* This is because we want the accessibility checks to run only once the content is actually
* open and that behaviour is already encapsulated in `DialogContent`.
*/}
<Slottable>{children}</Slottable>
{process.env.NODE_ENV === 'development' && (
<DescriptionWarning contentRef={contentRef} />
)}
</DialogPrimitive.Content>
</AlertDialogContentProvider>
</DialogPrimitive.WarningProvider>
);
}
);
AlertDialogContent.displayName = CONTENT_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogTitle
* -----------------------------------------------------------------------------------------------*/
const TITLE_NAME = 'AlertDialogTitle';
type AlertDialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;
type DialogTitleProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
interface AlertDialogTitleProps extends DialogTitleProps {}
const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
(props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {
const { __scopeAlertDialog, ...titleProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return <DialogPrimitive.Title {...dialogScope} {...titleProps} ref={forwardedRef} />;
}
);
AlertDialogTitle.displayName = TITLE_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogDescription
* -----------------------------------------------------------------------------------------------*/
const DESCRIPTION_NAME = 'AlertDialogDescription';
type AlertDialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;
type DialogDescriptionProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
interface AlertDialogDescriptionProps extends DialogDescriptionProps {}
const AlertDialogDescription = React.forwardRef<
AlertDialogDescriptionElement,
AlertDialogDescriptionProps
>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {
const { __scopeAlertDialog, ...descriptionProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return <DialogPrimitive.Description {...dialogScope} {...descriptionProps} ref={forwardedRef} />;
});
AlertDialogDescription.displayName = DESCRIPTION_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogAction
* -----------------------------------------------------------------------------------------------*/
const ACTION_NAME = 'AlertDialogAction';
type AlertDialogActionElement = React.ElementRef<typeof DialogPrimitive.Close>;
type DialogCloseProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
interface AlertDialogActionProps extends DialogCloseProps {}
const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(
(props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {
const { __scopeAlertDialog, ...actionProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return <DialogPrimitive.Close {...dialogScope} {...actionProps} ref={forwardedRef} />;
}
);
AlertDialogAction.displayName = ACTION_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogCancel
* -----------------------------------------------------------------------------------------------*/
const CANCEL_NAME = 'AlertDialogCancel';
type AlertDialogCancelElement = React.ElementRef<typeof DialogPrimitive.Close>;
interface AlertDialogCancelProps extends DialogCloseProps {}
const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(
(props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {
const { __scopeAlertDialog, ...cancelProps } = props;
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
const dialogScope = useDialogScope(__scopeAlertDialog);
const ref = useComposedRefs(forwardedRef, cancelRef);
return <DialogPrimitive.Close {...dialogScope} {...cancelProps} ref={ref} />;
}
);
AlertDialogCancel.displayName = CANCEL_NAME;
/* ---------------------------------------------------------------------------------------------- */
type DescriptionWarningProps = {
contentRef: React.RefObject<AlertDialogContentElement>;
};
const DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {
const MESSAGE = `\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
React.useEffect(() => {
const hasDescription = document.getElementById(
contentRef.current?.getAttribute('aria-describedby')!
);
if (!hasDescription) console.warn(MESSAGE);
}, [MESSAGE, contentRef]);
return null;
};
const Root = AlertDialog;
const Trigger = AlertDialogTrigger;
const Portal = AlertDialogPortal;
const Overlay = AlertDialogOverlay;
const Content = AlertDialogContent;
const Action = AlertDialogAction;
const Cancel = AlertDialogCancel;
const Title = AlertDialogTitle;
const Description = AlertDialogDescription;
export {
createAlertDialogScope,
//
AlertDialog,
AlertDialogTrigger,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogContent,
AlertDialogAction,
AlertDialogCancel,
AlertDialogTitle,
AlertDialogDescription,
//
Root,
Trigger,
Portal,
Overlay,
Content,
Action,
Cancel,
Title,
Description,
};
export type {
AlertDialogProps,
AlertDialogTriggerProps,
AlertDialogPortalProps,
AlertDialogOverlayProps,
AlertDialogContentProps,
AlertDialogActionProps,
AlertDialogCancelProps,
AlertDialogTitleProps,
AlertDialogDescriptionProps,
};

View File

@@ -0,0 +1,34 @@
export {
createAlertDialogScope,
//
AlertDialog,
AlertDialogTrigger,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogContent,
AlertDialogAction,
AlertDialogCancel,
AlertDialogTitle,
AlertDialogDescription,
//
Root,
Trigger,
Portal,
Overlay,
Content,
Action,
Cancel,
Title,
Description,
} from './AlertDialog';
export type {
AlertDialogProps,
AlertDialogTriggerProps,
AlertDialogPortalProps,
AlertDialogOverlayProps,
AlertDialogContentProps,
AlertDialogActionProps,
AlertDialogCancelProps,
AlertDialogTitleProps,
AlertDialogDescriptionProps,
} from './AlertDialog';