@radix-ui/react-alert-dialog 0.1.2-rc.1 → 0.1.2-rc.10

package/dist/index.d.ts

@@ -10,6 +10,10 @@ type DialogTriggerProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.
 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 {
 }
@@ -35,6 +39,7 @@ 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>>;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":"A;A;A;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;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,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"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}
+{"mappings":"A;A;A;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"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -1,2 +1,2 @@
-var e,t=require("@radix-ui/react-slot").Slottable,r=require("@radix-ui/primitive").composeEventHandlers,o=require("@radix-ui/react-dialog"),l=u({},o),n=o.createDialogScope,c=require("@radix-ui/react-compose-refs").useComposedRefs,a=require("@radix-ui/react-context").createContextScope,s=u({},require("react")),i=(e=require("@babel/runtime/helpers/extends"))&&e.__esModule?e.default:e;function u(e,t){return Object.keys(t).forEach((function(r){"default"!==r&&"__esModule"!==r&&Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),e}const[p,f]=a("AlertDialog",[n]);exports.createAlertDialogScope=f;const g=n(),d=e=>{const{__scopeAlertDialog:t,...r}=e,o=g(t);/*#__PURE__*/return s.createElement(l.Root,i({},o,r,{modal:!0}))};exports.AlertDialog=d;const D=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,n=g(r);/*#__PURE__*/return s.createElement(l.Trigger,i({},n,o,{ref:t}))}));exports.AlertDialogTrigger=D;const A=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,n=g(r);/*#__PURE__*/return s.createElement(l.Overlay,i({},n,o,{ref:t}))}));exports.AlertDialogOverlay=A;const[x,m]=p("AlertDialogContent"),_=/*#__PURE__*/s.forwardRef(((e,o)=>{const{__scopeAlertDialog:n,children:a,...u}=e,p=g(n),f=s.useRef(null),d=c(o,f),D=s.useRef(null);/*#__PURE__*/return s.createElement(l.LabelWarningProvider,{contentName:"AlertDialogContent",titleName:R,docsSlug:"alert-dialog"},/*#__PURE__*/s.createElement(x,{scope:n,cancelRef:D},/*#__PURE__*/s.createElement(l.Content,i({role:"alertdialog"},p,u,{ref:d,onOpenAutoFocus:r(u.onOpenAutoFocus,(e=>{var t;e.preventDefault(),null===(t=D.current)||void 0===t||t.focus({preventScroll:!0})})),onPointerDownOutside:e=>e.preventDefault(),onInteractOutside:e=>e.preventDefault()}),/*#__PURE__*/s.createElement(t,null,a),!1)))}));exports.AlertDialogContent=_;const R="AlertDialogTitle",v=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,n=g(r);/*#__PURE__*/return s.createElement(l.Title,i({},n,o,{ref:t}))}));exports.AlertDialogTitle=v;const E=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,n=g(r);/*#__PURE__*/return s.createElement(l.Description,i({},n,o,{ref:t}))}));exports.AlertDialogDescription=E;const C=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,n=g(r);/*#__PURE__*/return s.createElement(l.Close,i({},n,o,{ref:t}))}));exports.AlertDialogAction=C;const O=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,{cancelRef:n}=m("AlertDialogCancel",r),a=g(r),u=c(t,n);/*#__PURE__*/return s.createElement(l.Close,i({},a,o,{ref:u}))}));exports.AlertDialogCancel=O;const w=d;exports.Root=w;const b=D;exports.Trigger=b;const q=A;exports.Overlay=q;const T=_;exports.Content=T;const S=C;exports.Action=S;const y=O;exports.Cancel=y;const h=v;exports.Title=h;const P=E;exports.Description=P;
+var e,t=require("@radix-ui/react-slot").Slottable,r=require("@radix-ui/primitive").composeEventHandlers,o=require("@radix-ui/react-dialog"),l=u({},o),n=o.createDialogScope,a=require("@radix-ui/react-compose-refs").useComposedRefs,c=require("@radix-ui/react-context").createContextScope,s=u({},require("react")),i=(e=require("@babel/runtime/helpers/extends"))&&e.__esModule?e.default:e;function u(e,t){return Object.keys(t).forEach((function(r){"default"!==r&&"__esModule"!==r&&Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),e}const[p,f]=c("AlertDialog",[n]);exports.createAlertDialogScope=f;const g=n(),D=e=>{const{__scopeAlertDialog:t,...r}=e,o=g(t);/*#__PURE__*/return s.createElement(l.Root,i({},o,r,{modal:!0}))};exports.AlertDialog=D;const d=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,n=g(r);/*#__PURE__*/return s.createElement(l.Trigger,i({},n,o,{ref:t}))}));exports.AlertDialogTrigger=d;const A=e=>{const{__scopeAlertDialog:t,...r}=e,o=g(t);/*#__PURE__*/return s.createElement(l.Portal,i({},o,r))};exports.AlertDialogPortal=A;const x=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,n=g(r);/*#__PURE__*/return s.createElement(l.Overlay,i({},n,o,{ref:t}))}));exports.AlertDialogOverlay=x;const[_,m]=p("AlertDialogContent"),E=/*#__PURE__*/s.forwardRef(((e,o)=>{const{__scopeAlertDialog:n,children:c,...u}=e,p=g(n),f=s.useRef(null),D=a(o,f),d=s.useRef(null);/*#__PURE__*/return s.createElement(l.LabelWarningProvider,{contentName:"AlertDialogContent",titleName:R,docsSlug:"alert-dialog"},/*#__PURE__*/s.createElement(_,{scope:n,cancelRef:d},/*#__PURE__*/s.createElement(l.Content,i({role:"alertdialog"},p,u,{ref:D,onOpenAutoFocus:r(u.onOpenAutoFocus,(e=>{var t;e.preventDefault(),null===(t=d.current)||void 0===t||t.focus({preventScroll:!0})})),onPointerDownOutside:e=>e.preventDefault(),onInteractOutside:e=>e.preventDefault()}),/*#__PURE__*/s.createElement(t,null,c),!1)))}));exports.AlertDialogContent=E;const R="AlertDialogTitle",v=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,n=g(r);/*#__PURE__*/return s.createElement(l.Title,i({},n,o,{ref:t}))}));exports.AlertDialogTitle=v;const C=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,n=g(r);/*#__PURE__*/return s.createElement(l.Description,i({},n,o,{ref:t}))}));exports.AlertDialogDescription=C;const O=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,n=g(r);/*#__PURE__*/return s.createElement(l.Close,i({},n,o,{ref:t}))}));exports.AlertDialogAction=O;const w=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeAlertDialog:r,...o}=e,{cancelRef:n}=m("AlertDialogCancel",r),c=g(r),u=a(t,n);/*#__PURE__*/return s.createElement(l.Close,i({},c,o,{ref:u}))}));exports.AlertDialogCancel=w;const b=D;exports.Root=b;const q=d;exports.Trigger=q;const T=A;exports.Portal=T;const P=x;exports.Overlay=P;const S=E;exports.Content=S;const y=O;exports.Action=y;const h=w;exports.Cancel=h;const j=v;exports.Title=j;const F=C;exports.Description=F;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/alert-dialog/src/AlertDialog.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n  return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n  Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n  Object.keys(source).forEach(function(key) {\n    if (key === 'default' || key === '__esModule') {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function get() {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n}\n\nfunction $parcel$missingModule(name) {\n  var err = new Error(\"Cannot find module '\" + name + \"'\");\n  err.code = 'MODULE_NOT_FOUND';\n  throw err;\n}\n\nvar $parcel$global =\n  typeof globalThis !== 'undefined'\n    ? globalThis\n    : typeof self !== 'undefined'\n    ? self\n    : typeof window !== 'undefined'\n    ? window\n    : typeof global !== 'undefined'\n    ? global\n    : {};\n","import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { createDialogScope } from '@radix-ui/react-dialog';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Slottable } from '@radix-ui/react-slot';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_NAME = 'AlertDialog';\n\ntype ScopedProps<P> = P & { __scopeAlertDialog?: Scope };\nconst [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [\n  createDialogScope,\n]);\nconst useDialogScope = createDialogScope();\n\ntype DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\ninterface AlertDialogProps extends Omit<DialogProps, 'modal'> {}\n\nconst AlertDialog: React.FC<AlertDialogProps> = (props: ScopedProps<AlertDialogProps>) => {\n  const { __scopeAlertDialog, ...alertDialogProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Root {...dialogScope} {...alertDialogProps} modal={true} />;\n};\n\nAlertDialog.displayName = ROOT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTrigger\n * -----------------------------------------------------------------------------------------------*/\nconst TRIGGER_NAME = 'AlertDialogTrigger';\n\ntype AlertDialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;\ntype DialogTriggerProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\ninterface AlertDialogTriggerProps extends DialogTriggerProps {}\n\nconst AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(\n  (props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...triggerProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Trigger {...dialogScope} {...triggerProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'AlertDialogOverlay';\n\ntype AlertDialogOverlayElement = React.ElementRef<typeof DialogPrimitive.Overlay>;\ntype DialogOverlayProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;\ninterface AlertDialogOverlayProps extends DialogOverlayProps {}\n\nconst AlertDialogOverlay = React.forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(\n  (props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...overlayProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Overlay {...dialogScope} {...overlayProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogOverlay.displayName = OVERLAY_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AlertDialogContent';\n\ntype AlertDialogContentContextValue = {\n  cancelRef: React.MutableRefObject<AlertDialogCancelElement | null>;\n};\n\nconst [AlertDialogContentProvider, useAlertDialogContentContext] =\n  createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME);\n\ntype AlertDialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;\ntype DialogContentProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\ninterface AlertDialogContentProps\n  extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}\n\nconst AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(\n  (props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {\n    const { __scopeAlertDialog, children, ...contentProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    const contentRef = React.useRef<AlertDialogContentElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, contentRef);\n    const cancelRef = React.useRef<AlertDialogCancelElement | null>(null);\n\n    return (\n      <DialogPrimitive.LabelWarningProvider\n        contentName={CONTENT_NAME}\n        titleName={TITLE_NAME}\n        docsSlug=\"alert-dialog\"\n      >\n        <AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>\n          <DialogPrimitive.Content\n            role=\"alertdialog\"\n            {...dialogScope}\n            {...contentProps}\n            ref={composedRefs}\n            onOpenAutoFocus={composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {\n              event.preventDefault();\n              cancelRef.current?.focus({ preventScroll: true });\n            })}\n            onPointerDownOutside={(event) => event.preventDefault()}\n            onInteractOutside={(event) => event.preventDefault()}\n          >\n            {/**\n             * We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`\n             * around everything, otherwise the `DescriptionWarning` would be rendered straight away.\n             * This is because we want the accessibility checks to run only once the content is actually\n             * open and that behaviour is already encapsulated in `DialogContent`.\n             */}\n            <Slottable>{children}</Slottable>\n            {process.env.NODE_ENV === 'development' && (\n              <DescriptionWarning contentRef={contentRef} />\n            )}\n          </DialogPrimitive.Content>\n        </AlertDialogContentProvider>\n      </DialogPrimitive.LabelWarningProvider>\n    );\n  }\n);\n\nAlertDialogContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'AlertDialogTitle';\n\ntype AlertDialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;\ntype DialogTitleProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\ninterface AlertDialogTitleProps extends DialogTitleProps {}\n\nconst AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(\n  (props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...titleProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Title {...dialogScope} {...titleProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'AlertDialogDescription';\n\ntype AlertDialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;\ntype DialogDescriptionProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;\ninterface AlertDialogDescriptionProps extends DialogDescriptionProps {}\n\nconst AlertDialogDescription = React.forwardRef<\n  AlertDialogDescriptionElement,\n  AlertDialogDescriptionProps\n>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {\n  const { __scopeAlertDialog, ...descriptionProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Description {...dialogScope} {...descriptionProps} ref={forwardedRef} />;\n});\n\nAlertDialogDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'AlertDialogAction';\n\ntype AlertDialogActionElement = React.ElementRef<typeof DialogPrimitive.Close>;\ntype DialogCloseProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\ninterface AlertDialogActionProps extends DialogCloseProps {}\n\nconst AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(\n  (props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...actionProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Close {...dialogScope} {...actionProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogAction.displayName = ACTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogCancel\n * -----------------------------------------------------------------------------------------------*/\n\nconst CANCEL_NAME = 'AlertDialogCancel';\n\ntype AlertDialogCancelElement = React.ElementRef<typeof DialogPrimitive.Close>;\ninterface AlertDialogCancelProps extends DialogCloseProps {}\n\nconst AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(\n  (props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...cancelProps } = props;\n    const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    const ref = useComposedRefs(forwardedRef, cancelRef);\n    return <DialogPrimitive.Close {...dialogScope} {...cancelProps} ref={ref} />;\n  }\n);\n\nAlertDialogCancel.displayName = CANCEL_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype DescriptionWarningProps = {\n  contentRef: React.RefObject<AlertDialogContentElement>;\n};\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {\n  const MESSAGE = `\\`${CONTENT_NAME}\\` requires a description for the component to be accessible for screen reader users.\n\nYou 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.\n\nAlternatively, 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.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;\n\n  React.useEffect(() => {\n    const hasDescription = document.getElementById(\n      contentRef.current?.getAttribute('aria-describedby')!\n    );\n    if (!hasDescription) console.warn(MESSAGE);\n  }, [MESSAGE, contentRef]);\n\n  return null;\n};\n\nconst Root = AlertDialog;\nconst Trigger = AlertDialogTrigger;\nconst Overlay = AlertDialogOverlay;\nconst Content = AlertDialogContent;\nconst Action = AlertDialogAction;\nconst Cancel = AlertDialogCancel;\nconst Title = AlertDialogTitle;\nconst Description = AlertDialogDescription;\n\nexport {\n  createAlertDialogScope,\n  //\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogOverlay,\n  AlertDialogContent,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  //\n  Root,\n  Trigger,\n  Overlay,\n  Content,\n  Action,\n  Cancel,\n  Title,\n  Description,\n};\nexport type {\n  AlertDialogProps,\n  AlertDialogTriggerProps,\n  AlertDialogOverlayProps,\n  AlertDialogContentProps,\n  AlertDialogActionProps,\n  AlertDialogCancelProps,\n  AlertDialogTitleProps,\n  AlertDialogDescriptionProps,\n};\n"],"names":["a","__esModule","default","$parcel$exportWildcard","dest","source","Object","keys","forEach","key","defineProperty","enumerable","get","createAlertDialogContext","createAlertDialogScope","createContextScope","createDialogScope","useDialogScope","AlertDialog","props","__scopeAlertDialog","alertDialogProps","dialogScope","_react","createElement","_radixUiReactDialog","Root","_babelRuntimeHelpersExtends","modal","AlertDialogTrigger","React","forwardRef","forwardedRef","triggerProps","Trigger","ref","AlertDialogOverlay","overlayProps","Overlay","AlertDialogContentProvider","useAlertDialogContentContext","AlertDialogContent","children","contentProps","contentRef","useRef","composedRefs","useComposedRefs","cancelRef","LabelWarningProvider","contentName","titleName","TITLE_NAME","docsSlug","$ce6149552ca6be39fd0092c861815af$var$AlertDialogContentProvider","scope","Content","role","onOpenAutoFocus","composeEventHandlers","event","_cancelRef$current","preventDefault","current","focus","preventScroll","onPointerDownOutside","onInteractOutside","Slottable","AlertDialogTitle","titleProps","Title","AlertDialogDescription","descriptionProps","Description","AlertDialogAction","actionProps","Close","AlertDialogCancel","cancelProps","Action","Cancel"],"version":3,"file":"index.js.map"}
+{"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/alert-dialog/src/AlertDialog.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n  return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n  Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n  Object.keys(source).forEach(function(key) {\n    if (key === 'default' || key === '__esModule') {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function get() {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n}\n\nfunction $parcel$missingModule(name) {\n  var err = new Error(\"Cannot find module '\" + name + \"'\");\n  err.code = 'MODULE_NOT_FOUND';\n  throw err;\n}\n\nvar $parcel$global =\n  typeof globalThis !== 'undefined'\n    ? globalThis\n    : typeof self !== 'undefined'\n    ? self\n    : typeof window !== 'undefined'\n    ? window\n    : typeof global !== 'undefined'\n    ? global\n    : {};\n","import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { createDialogScope } from '@radix-ui/react-dialog';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Slottable } from '@radix-ui/react-slot';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_NAME = 'AlertDialog';\n\ntype ScopedProps<P> = P & { __scopeAlertDialog?: Scope };\nconst [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [\n  createDialogScope,\n]);\nconst useDialogScope = createDialogScope();\n\ntype DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\ninterface AlertDialogProps extends Omit<DialogProps, 'modal'> {}\n\nconst AlertDialog: React.FC<AlertDialogProps> = (props: ScopedProps<AlertDialogProps>) => {\n  const { __scopeAlertDialog, ...alertDialogProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Root {...dialogScope} {...alertDialogProps} modal={true} />;\n};\n\nAlertDialog.displayName = ROOT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTrigger\n * -----------------------------------------------------------------------------------------------*/\nconst TRIGGER_NAME = 'AlertDialogTrigger';\n\ntype AlertDialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;\ntype DialogTriggerProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\ninterface AlertDialogTriggerProps extends DialogTriggerProps {}\n\nconst AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(\n  (props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...triggerProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Trigger {...dialogScope} {...triggerProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'AlertDialogPortal';\n\ntype DialogPortalProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;\ninterface AlertDialogPortalProps extends DialogPortalProps {}\n\nconst AlertDialogPortal: React.FC<AlertDialogPortalProps> = (\n  props: ScopedProps<AlertDialogPortalProps>\n) => {\n  const { __scopeAlertDialog, ...portalProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Portal {...dialogScope} {...portalProps} />;\n};\n\nAlertDialogPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'AlertDialogOverlay';\n\ntype AlertDialogOverlayElement = React.ElementRef<typeof DialogPrimitive.Overlay>;\ntype DialogOverlayProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;\ninterface AlertDialogOverlayProps extends DialogOverlayProps {}\n\nconst AlertDialogOverlay = React.forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(\n  (props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...overlayProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Overlay {...dialogScope} {...overlayProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogOverlay.displayName = OVERLAY_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AlertDialogContent';\n\ntype AlertDialogContentContextValue = {\n  cancelRef: React.MutableRefObject<AlertDialogCancelElement | null>;\n};\n\nconst [AlertDialogContentProvider, useAlertDialogContentContext] =\n  createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME);\n\ntype AlertDialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;\ntype DialogContentProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\ninterface AlertDialogContentProps\n  extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}\n\nconst AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(\n  (props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {\n    const { __scopeAlertDialog, children, ...contentProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    const contentRef = React.useRef<AlertDialogContentElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, contentRef);\n    const cancelRef = React.useRef<AlertDialogCancelElement | null>(null);\n\n    return (\n      <DialogPrimitive.LabelWarningProvider\n        contentName={CONTENT_NAME}\n        titleName={TITLE_NAME}\n        docsSlug=\"alert-dialog\"\n      >\n        <AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>\n          <DialogPrimitive.Content\n            role=\"alertdialog\"\n            {...dialogScope}\n            {...contentProps}\n            ref={composedRefs}\n            onOpenAutoFocus={composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {\n              event.preventDefault();\n              cancelRef.current?.focus({ preventScroll: true });\n            })}\n            onPointerDownOutside={(event) => event.preventDefault()}\n            onInteractOutside={(event) => event.preventDefault()}\n          >\n            {/**\n             * We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`\n             * around everything, otherwise the `DescriptionWarning` would be rendered straight away.\n             * This is because we want the accessibility checks to run only once the content is actually\n             * open and that behaviour is already encapsulated in `DialogContent`.\n             */}\n            <Slottable>{children}</Slottable>\n            {process.env.NODE_ENV === 'development' && (\n              <DescriptionWarning contentRef={contentRef} />\n            )}\n          </DialogPrimitive.Content>\n        </AlertDialogContentProvider>\n      </DialogPrimitive.LabelWarningProvider>\n    );\n  }\n);\n\nAlertDialogContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'AlertDialogTitle';\n\ntype AlertDialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;\ntype DialogTitleProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\ninterface AlertDialogTitleProps extends DialogTitleProps {}\n\nconst AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(\n  (props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...titleProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Title {...dialogScope} {...titleProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'AlertDialogDescription';\n\ntype AlertDialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;\ntype DialogDescriptionProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;\ninterface AlertDialogDescriptionProps extends DialogDescriptionProps {}\n\nconst AlertDialogDescription = React.forwardRef<\n  AlertDialogDescriptionElement,\n  AlertDialogDescriptionProps\n>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {\n  const { __scopeAlertDialog, ...descriptionProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Description {...dialogScope} {...descriptionProps} ref={forwardedRef} />;\n});\n\nAlertDialogDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'AlertDialogAction';\n\ntype AlertDialogActionElement = React.ElementRef<typeof DialogPrimitive.Close>;\ntype DialogCloseProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\ninterface AlertDialogActionProps extends DialogCloseProps {}\n\nconst AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(\n  (props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...actionProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Close {...dialogScope} {...actionProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogAction.displayName = ACTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogCancel\n * -----------------------------------------------------------------------------------------------*/\n\nconst CANCEL_NAME = 'AlertDialogCancel';\n\ntype AlertDialogCancelElement = React.ElementRef<typeof DialogPrimitive.Close>;\ninterface AlertDialogCancelProps extends DialogCloseProps {}\n\nconst AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(\n  (props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...cancelProps } = props;\n    const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    const ref = useComposedRefs(forwardedRef, cancelRef);\n    return <DialogPrimitive.Close {...dialogScope} {...cancelProps} ref={ref} />;\n  }\n);\n\nAlertDialogCancel.displayName = CANCEL_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype DescriptionWarningProps = {\n  contentRef: React.RefObject<AlertDialogContentElement>;\n};\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {\n  const MESSAGE = `\\`${CONTENT_NAME}\\` requires a description for the component to be accessible for screen reader users.\n\nYou 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.\n\nAlternatively, 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.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;\n\n  React.useEffect(() => {\n    const hasDescription = document.getElementById(\n      contentRef.current?.getAttribute('aria-describedby')!\n    );\n    if (!hasDescription) console.warn(MESSAGE);\n  }, [MESSAGE, contentRef]);\n\n  return null;\n};\n\nconst Root = AlertDialog;\nconst Trigger = AlertDialogTrigger;\nconst Portal = AlertDialogPortal;\nconst Overlay = AlertDialogOverlay;\nconst Content = AlertDialogContent;\nconst Action = AlertDialogAction;\nconst Cancel = AlertDialogCancel;\nconst Title = AlertDialogTitle;\nconst Description = AlertDialogDescription;\n\nexport {\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};\nexport type {\n  AlertDialogProps,\n  AlertDialogTriggerProps,\n  AlertDialogPortalProps,\n  AlertDialogOverlayProps,\n  AlertDialogContentProps,\n  AlertDialogActionProps,\n  AlertDialogCancelProps,\n  AlertDialogTitleProps,\n  AlertDialogDescriptionProps,\n};\n"],"names":["a","__esModule","default","$parcel$exportWildcard","dest","source","Object","keys","forEach","key","defineProperty","enumerable","get","createAlertDialogContext","createAlertDialogScope","createContextScope","createDialogScope","useDialogScope","AlertDialog","props","__scopeAlertDialog","alertDialogProps","dialogScope","_react","createElement","_radixUiReactDialog","Root","_babelRuntimeHelpersExtends","modal","AlertDialogTrigger","React","forwardRef","forwardedRef","triggerProps","Trigger","ref","AlertDialogPortal","portalProps","Portal","AlertDialogOverlay","overlayProps","Overlay","AlertDialogContentProvider","useAlertDialogContentContext","AlertDialogContent","children","contentProps","contentRef","useRef","composedRefs","useComposedRefs","cancelRef","LabelWarningProvider","contentName","titleName","TITLE_NAME","docsSlug","$ce6149552ca6be39fd0092c861815af$var$AlertDialogContentProvider","scope","Content","role","onOpenAutoFocus","composeEventHandlers","event","_cancelRef$current","preventDefault","current","focus","preventScroll","onPointerDownOutside","onInteractOutside","Slottable","AlertDialogTitle","titleProps","Title","AlertDialogDescription","descriptionProps","Description","AlertDialogAction","actionProps","Close","AlertDialogCancel","cancelProps","Action","Cancel"],"version":3,"file":"index.js.map"}

package/dist/index.module.js

@@ -1,2 +1,2 @@
-import{Slottable as e}from"@radix-ui/react-slot";import{composeEventHandlers as t}from"@radix-ui/primitive";import*as r from"@radix-ui/react-dialog";import{createDialogScope as o}from"@radix-ui/react-dialog";import{useComposedRefs as l}from"@radix-ui/react-compose-refs";import{createContextScope as n}from"@radix-ui/react-context";import*as a from"react";import i from"@babel/runtime/helpers/esm/extends";const[c,s]=n("AlertDialog",[o]);export{s as createAlertDialogScope};const p=o();export const AlertDialog=e=>{const{__scopeAlertDialog:t,...o}=e,l=p(t);/*#__PURE__*/return a.createElement(r.Root,i({},l,o,{modal:!0}))};/*#__PURE__*/export const AlertDialogTrigger=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...l}=e,n=p(o);/*#__PURE__*/return a.createElement(r.Trigger,i({},n,l,{ref:t}))}));/*#__PURE__*/export const AlertDialogOverlay=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...l}=e,n=p(o);/*#__PURE__*/return a.createElement(r.Overlay,i({},n,l,{ref:t}))}));/*#__PURE__*/const[g,f]=c("AlertDialogContent");export const AlertDialogContent=/*#__PURE__*/a.forwardRef(((o,n)=>{const{__scopeAlertDialog:c,children:s,...f}=o,m=p(c),A=a.useRef(null),u=l(n,A),d=a.useRef(null);/*#__PURE__*/return a.createElement(r.LabelWarningProvider,{contentName:"AlertDialogContent",titleName:D,docsSlug:"alert-dialog"},/*#__PURE__*/a.createElement(g,{scope:c,cancelRef:d},/*#__PURE__*/a.createElement(r.Content,i({role:"alertdialog"},m,f,{ref:u,onOpenAutoFocus:t(f.onOpenAutoFocus,(e=>{var t;e.preventDefault(),null===(t=d.current)||void 0===t||t.focus({preventScroll:!0})})),onPointerDownOutside:e=>e.preventDefault(),onInteractOutside:e=>e.preventDefault()}),/*#__PURE__*/a.createElement(e,null,s),!1)))}));/*#__PURE__*/const D="AlertDialogTitle";export const AlertDialogTitle=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...l}=e,n=p(o);/*#__PURE__*/return a.createElement(r.Title,i({},n,l,{ref:t}))}));/*#__PURE__*/export const AlertDialogDescription=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...l}=e,n=p(o);/*#__PURE__*/return a.createElement(r.Description,i({},n,l,{ref:t}))}));/*#__PURE__*/export const AlertDialogAction=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...l}=e,n=p(o);/*#__PURE__*/return a.createElement(r.Close,i({},n,l,{ref:t}))}));/*#__PURE__*/export const AlertDialogCancel=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...n}=e,{cancelRef:c}=f("AlertDialogCancel",o),s=p(o),g=l(t,c);/*#__PURE__*/return a.createElement(r.Close,i({},s,n,{ref:g}))}));/*#__PURE__*/export const Root=AlertDialog;export const Trigger=AlertDialogTrigger;export const Overlay=AlertDialogOverlay;export const Content=AlertDialogContent;export const Action=AlertDialogAction;export const Cancel=AlertDialogCancel;export const Title=AlertDialogTitle;export const Description=AlertDialogDescription;
+import{Slottable as e}from"@radix-ui/react-slot";import{composeEventHandlers as t}from"@radix-ui/primitive";import*as r from"@radix-ui/react-dialog";import{createDialogScope as o}from"@radix-ui/react-dialog";import{useComposedRefs as l}from"@radix-ui/react-compose-refs";import{createContextScope as n}from"@radix-ui/react-context";import*as a from"react";import i from"@babel/runtime/helpers/esm/extends";const[c,s]=n("AlertDialog",[o]);export{s as createAlertDialogScope};const p=o();export const AlertDialog=e=>{const{__scopeAlertDialog:t,...o}=e,l=p(t);/*#__PURE__*/return a.createElement(r.Root,i({},l,o,{modal:!0}))};/*#__PURE__*/export const AlertDialogTrigger=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...l}=e,n=p(o);/*#__PURE__*/return a.createElement(r.Trigger,i({},n,l,{ref:t}))}));/*#__PURE__*/export const AlertDialogPortal=e=>{const{__scopeAlertDialog:t,...o}=e,l=p(t);/*#__PURE__*/return a.createElement(r.Portal,i({},l,o))};/*#__PURE__*/export const AlertDialogOverlay=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...l}=e,n=p(o);/*#__PURE__*/return a.createElement(r.Overlay,i({},n,l,{ref:t}))}));/*#__PURE__*/const[g,D]=c("AlertDialogContent");export const AlertDialogContent=/*#__PURE__*/a.forwardRef(((o,n)=>{const{__scopeAlertDialog:c,children:s,...D}=o,A=p(c),m=a.useRef(null),u=l(n,m),x=a.useRef(null);/*#__PURE__*/return a.createElement(r.LabelWarningProvider,{contentName:"AlertDialogContent",titleName:f,docsSlug:"alert-dialog"},/*#__PURE__*/a.createElement(g,{scope:c,cancelRef:x},/*#__PURE__*/a.createElement(r.Content,i({role:"alertdialog"},A,D,{ref:u,onOpenAutoFocus:t(D.onOpenAutoFocus,(e=>{var t;e.preventDefault(),null===(t=x.current)||void 0===t||t.focus({preventScroll:!0})})),onPointerDownOutside:e=>e.preventDefault(),onInteractOutside:e=>e.preventDefault()}),/*#__PURE__*/a.createElement(e,null,s),!1)))}));/*#__PURE__*/const f="AlertDialogTitle";export const AlertDialogTitle=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...l}=e,n=p(o);/*#__PURE__*/return a.createElement(r.Title,i({},n,l,{ref:t}))}));/*#__PURE__*/export const AlertDialogDescription=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...l}=e,n=p(o);/*#__PURE__*/return a.createElement(r.Description,i({},n,l,{ref:t}))}));/*#__PURE__*/export const AlertDialogAction=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...l}=e,n=p(o);/*#__PURE__*/return a.createElement(r.Close,i({},n,l,{ref:t}))}));/*#__PURE__*/export const AlertDialogCancel=/*#__PURE__*/a.forwardRef(((e,t)=>{const{__scopeAlertDialog:o,...n}=e,{cancelRef:c}=D("AlertDialogCancel",o),s=p(o),g=l(t,c);/*#__PURE__*/return a.createElement(r.Close,i({},s,n,{ref:g}))}));/*#__PURE__*/export const Root=AlertDialog;export const Trigger=AlertDialogTrigger;export const Portal=AlertDialogPortal;export const Overlay=AlertDialogOverlay;export const Content=AlertDialogContent;export const Action=AlertDialogAction;export const Cancel=AlertDialogCancel;export const Title=AlertDialogTitle;export const Description=AlertDialogDescription;
 //# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["./packages/react/alert-dialog/src/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { createDialogScope } from '@radix-ui/react-dialog';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Slottable } from '@radix-ui/react-slot';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_NAME = 'AlertDialog';\n\ntype ScopedProps<P> = P & { __scopeAlertDialog?: Scope };\nconst [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [\n  createDialogScope,\n]);\nconst useDialogScope = createDialogScope();\n\ntype DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\ninterface AlertDialogProps extends Omit<DialogProps, 'modal'> {}\n\nconst AlertDialog: React.FC<AlertDialogProps> = (props: ScopedProps<AlertDialogProps>) => {\n  const { __scopeAlertDialog, ...alertDialogProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Root {...dialogScope} {...alertDialogProps} modal={true} />;\n};\n\nAlertDialog.displayName = ROOT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTrigger\n * -----------------------------------------------------------------------------------------------*/\nconst TRIGGER_NAME = 'AlertDialogTrigger';\n\ntype AlertDialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;\ntype DialogTriggerProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\ninterface AlertDialogTriggerProps extends DialogTriggerProps {}\n\nconst AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(\n  (props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...triggerProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Trigger {...dialogScope} {...triggerProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'AlertDialogOverlay';\n\ntype AlertDialogOverlayElement = React.ElementRef<typeof DialogPrimitive.Overlay>;\ntype DialogOverlayProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;\ninterface AlertDialogOverlayProps extends DialogOverlayProps {}\n\nconst AlertDialogOverlay = React.forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(\n  (props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...overlayProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Overlay {...dialogScope} {...overlayProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogOverlay.displayName = OVERLAY_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AlertDialogContent';\n\ntype AlertDialogContentContextValue = {\n  cancelRef: React.MutableRefObject<AlertDialogCancelElement | null>;\n};\n\nconst [AlertDialogContentProvider, useAlertDialogContentContext] =\n  createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME);\n\ntype AlertDialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;\ntype DialogContentProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\ninterface AlertDialogContentProps\n  extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}\n\nconst AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(\n  (props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {\n    const { __scopeAlertDialog, children, ...contentProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    const contentRef = React.useRef<AlertDialogContentElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, contentRef);\n    const cancelRef = React.useRef<AlertDialogCancelElement | null>(null);\n\n    return (\n      <DialogPrimitive.LabelWarningProvider\n        contentName={CONTENT_NAME}\n        titleName={TITLE_NAME}\n        docsSlug=\"alert-dialog\"\n      >\n        <AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>\n          <DialogPrimitive.Content\n            role=\"alertdialog\"\n            {...dialogScope}\n            {...contentProps}\n            ref={composedRefs}\n            onOpenAutoFocus={composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {\n              event.preventDefault();\n              cancelRef.current?.focus({ preventScroll: true });\n            })}\n            onPointerDownOutside={(event) => event.preventDefault()}\n            onInteractOutside={(event) => event.preventDefault()}\n          >\n            {/**\n             * We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`\n             * around everything, otherwise the `DescriptionWarning` would be rendered straight away.\n             * This is because we want the accessibility checks to run only once the content is actually\n             * open and that behaviour is already encapsulated in `DialogContent`.\n             */}\n            <Slottable>{children}</Slottable>\n            {process.env.NODE_ENV === 'development' && (\n              <DescriptionWarning contentRef={contentRef} />\n            )}\n          </DialogPrimitive.Content>\n        </AlertDialogContentProvider>\n      </DialogPrimitive.LabelWarningProvider>\n    );\n  }\n);\n\nAlertDialogContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'AlertDialogTitle';\n\ntype AlertDialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;\ntype DialogTitleProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\ninterface AlertDialogTitleProps extends DialogTitleProps {}\n\nconst AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(\n  (props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...titleProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Title {...dialogScope} {...titleProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'AlertDialogDescription';\n\ntype AlertDialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;\ntype DialogDescriptionProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;\ninterface AlertDialogDescriptionProps extends DialogDescriptionProps {}\n\nconst AlertDialogDescription = React.forwardRef<\n  AlertDialogDescriptionElement,\n  AlertDialogDescriptionProps\n>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {\n  const { __scopeAlertDialog, ...descriptionProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Description {...dialogScope} {...descriptionProps} ref={forwardedRef} />;\n});\n\nAlertDialogDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'AlertDialogAction';\n\ntype AlertDialogActionElement = React.ElementRef<typeof DialogPrimitive.Close>;\ntype DialogCloseProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\ninterface AlertDialogActionProps extends DialogCloseProps {}\n\nconst AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(\n  (props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...actionProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Close {...dialogScope} {...actionProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogAction.displayName = ACTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogCancel\n * -----------------------------------------------------------------------------------------------*/\n\nconst CANCEL_NAME = 'AlertDialogCancel';\n\ntype AlertDialogCancelElement = React.ElementRef<typeof DialogPrimitive.Close>;\ninterface AlertDialogCancelProps extends DialogCloseProps {}\n\nconst AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(\n  (props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...cancelProps } = props;\n    const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    const ref = useComposedRefs(forwardedRef, cancelRef);\n    return <DialogPrimitive.Close {...dialogScope} {...cancelProps} ref={ref} />;\n  }\n);\n\nAlertDialogCancel.displayName = CANCEL_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype DescriptionWarningProps = {\n  contentRef: React.RefObject<AlertDialogContentElement>;\n};\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {\n  const MESSAGE = `\\`${CONTENT_NAME}\\` requires a description for the component to be accessible for screen reader users.\n\nYou 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.\n\nAlternatively, 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.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;\n\n  React.useEffect(() => {\n    const hasDescription = document.getElementById(\n      contentRef.current?.getAttribute('aria-describedby')!\n    );\n    if (!hasDescription) console.warn(MESSAGE);\n  }, [MESSAGE, contentRef]);\n\n  return null;\n};\n\nconst Root = AlertDialog;\nconst Trigger = AlertDialogTrigger;\nconst Overlay = AlertDialogOverlay;\nconst Content = AlertDialogContent;\nconst Action = AlertDialogAction;\nconst Cancel = AlertDialogCancel;\nconst Title = AlertDialogTitle;\nconst Description = AlertDialogDescription;\n\nexport {\n  createAlertDialogScope,\n  //\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogOverlay,\n  AlertDialogContent,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  //\n  Root,\n  Trigger,\n  Overlay,\n  Content,\n  Action,\n  Cancel,\n  Title,\n  Description,\n};\nexport type {\n  AlertDialogProps,\n  AlertDialogTriggerProps,\n  AlertDialogOverlayProps,\n  AlertDialogContentProps,\n  AlertDialogActionProps,\n  AlertDialogCancelProps,\n  AlertDialogTitleProps,\n  AlertDialogDescriptionProps,\n};\n"],"names":["createAlertDialogContext","createAlertDialogScope","createContextScope","createDialogScope","useDialogScope","AlertDialog","props","__scopeAlertDialog","alertDialogProps","dialogScope","_react","createElement","_radixUiReactDialog","Root","_babelRuntimeHelpersEsmExtends","modal","AlertDialogTrigger","React","forwardRef","forwardedRef","triggerProps","Trigger","ref","AlertDialogOverlay","overlayProps","Overlay","AlertDialogContentProvider","useAlertDialogContentContext","AlertDialogContent","children","contentProps","contentRef","useRef","composedRefs","useComposedRefs","cancelRef","LabelWarningProvider","contentName","titleName","TITLE_NAME","docsSlug","$ef785a422a78f23629aa4850fe3fc$var$AlertDialogContentProvider","scope","Content","role","onOpenAutoFocus","composeEventHandlers","event","_cancelRef$current","preventDefault","current","focus","preventScroll","onPointerDownOutside","onInteractOutside","Slottable","AlertDialogTitle","titleProps","Title","AlertDialogDescription","descriptionProps","Description","AlertDialogAction","actionProps","Close","AlertDialogCancel","cancelProps","Action","Cancel"],"version":3,"file":"index.module.js.map"}
+{"mappings":"sZAeA,MAGOA,EAA0BC,GAA0BC,EAHzC,cAGuE,CACvFC,wCAEF,MAAMC,EAAiBD,WAKvB,MAAME,YAA2CC,IAC/C,MAAMC,mBAAEA,KAAuBC,GAAqBF,EAC9CG,EAAcL,EAAeG,gBACnC,OAAOG,EAAAC,cAACC,EAAgBC,KAAjBC,EAAA,GAA0BL,EAAiBD,EAA3C,CAA6DO,OAAO,0BAc7E,MAAMC,gCAAqBC,EAAMC,YAC/B,CAACZ,EAA6Ca,KAC5C,MAAMZ,mBAAEA,KAAuBa,GAAiBd,EAC1CG,EAAcL,EAAeG,gBACnC,OAAOG,EAAAC,cAACC,EAAgBS,QAAjBP,EAAA,GAA6BL,EAAiBW,EAA9C,CAA4DE,IAAKH,4BAe5E,MAAMI,kBACJjB,IAEA,MAAMC,mBAAEA,KAAuBiB,GAAgBlB,EACzCG,EAAcL,EAAeG,gBACnC,OAAOG,EAAAC,cAACC,EAAgBa,OAAjBX,EAAA,GAA4BL,EAAiBe,yBAetD,MAAME,gCAAqBT,EAAMC,YAC/B,CAACZ,EAA6Ca,KAC5C,MAAMZ,mBAAEA,KAAuBoB,GAAiBrB,EAC1CG,EAAcL,EAAeG,gBACnC,OAAOG,EAAAC,cAACC,EAAgBgB,QAAjBd,EAAA,GAA6BL,EAAiBkB,EAA9C,CAA4DL,IAAKH,qBAU5E,MAMOU,EAA4BC,GACjC9B,EAPmB,6BAcrB,MAAM+B,gCAAqBd,EAAMC,YAC/B,CAACZ,EAA6Ca,KAC5C,MAAMZ,mBAAEA,EAAFyB,SAAsBA,KAAaC,GAAiB3B,EACpDG,EAAcL,EAAeG,GAC7B2B,EAAajB,EAAMkB,OAAkC,MACrDC,EAAeC,EAAgBlB,EAAce,GAC7CI,EAAYrB,EAAMkB,OAAwC,mBAEhE,OACEzB,EAAAC,cAACC,EAAgB2B,qBAAjB,CACEC,YAxBa,qBAyBbC,UAAWC,EACXC,SAAS,6BAETjC,EAAAC,cAACiC,EAAD,CAA4BC,MAAOtC,EAAoB+B,UAAWA,gBAChE5B,EAAAC,cAACC,EAAgBkC,QAAjBhC,EAAA,CACEiC,KAAK,eACDtC,EACAwB,EAHN,CAIEX,IAAKc,EACLY,gBAAiBC,EAAqBhB,EAAae,iBAAkBE,IAAU,IAAAC,EAC7ED,EAAME,iBACN,QAAAD,EAAAb,EAAUe,eAAV,IAAAF,GAAAA,EAAmBG,MAAM,CAAEC,eAAe,OAE5CC,qBAAuBN,GAAUA,EAAME,iBACvCK,kBAAoBP,GAAUA,EAAME,gCAQpC1C,EAAAC,cAAC+C,EAAD,KAAY1B,IACX,qBAgBb,MAAMU,EAAa,0BAMnB,MAAMiB,8BAAmB1C,EAAMC,YAC7B,CAACZ,EAA2Ca,KAC1C,MAAMZ,mBAAEA,KAAuBqD,GAAetD,EACxCG,EAAcL,EAAeG,gBACnC,OAAOG,EAAAC,cAACC,EAAgBiD,MAAjB/C,EAAA,GAA2BL,EAAiBmD,EAA5C,CAAwDtC,IAAKH,4BAgBxE,MAAM2C,oCAAyB7C,EAAMC,YAGnC,CAACZ,EAAiDa,KAClD,MAAMZ,mBAAEA,KAAuBwD,GAAqBzD,EAC9CG,EAAcL,EAAeG,gBACnC,OAAOG,EAAAC,cAACC,EAAgBoD,YAAjBlD,EAAA,GAAiCL,EAAiBsD,EAAlD,CAAoEzC,IAAKH,4BAelF,MAAM8C,+BAAoBhD,EAAMC,YAC9B,CAACZ,EAA4Ca,KAC3C,MAAMZ,mBAAEA,KAAuB2D,GAAgB5D,EACzCG,EAAcL,EAAeG,gBACnC,OAAOG,EAAAC,cAACC,EAAgBuD,MAAjBrD,EAAA,GAA2BL,EAAiByD,EAA5C,CAAyD5C,IAAKH,4BAezE,MAAMiD,+BAAoBnD,EAAMC,YAC9B,CAACZ,EAA4Ca,KAC3C,MAAMZ,mBAAEA,KAAuB8D,GAAgB/D,GACzCgC,UAAEA,GAAcR,EARN,oBAQgDvB,GAC1DE,EAAcL,EAAeG,GAC7Be,EAAMe,EAAgBlB,EAAcmB,gBAC1C,OAAO5B,EAAAC,cAACC,EAAgBuD,MAAjBrD,EAAA,GAA2BL,EAAiB4D,EAA5C,CAAyD/C,IAAKA,4BA+BzE,MAAMT,KAAOR,mBACb,MAAMgB,QAAUL,0BAChB,MAAMS,OAASF,yBACf,MAAMK,QAAUF,0BAChB,MAAMoB,QAAUf,0BAChB,MAAMuC,OAASL,yBACf,MAAMM,OAASH,yBACf,MAAMP,MAAQF,wBACd,MAAMK,YAAcF","sources":["./packages/react/alert-dialog/src/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { createDialogScope } from '@radix-ui/react-dialog';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Slottable } from '@radix-ui/react-slot';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_NAME = 'AlertDialog';\n\ntype ScopedProps<P> = P & { __scopeAlertDialog?: Scope };\nconst [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [\n  createDialogScope,\n]);\nconst useDialogScope = createDialogScope();\n\ntype DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\ninterface AlertDialogProps extends Omit<DialogProps, 'modal'> {}\n\nconst AlertDialog: React.FC<AlertDialogProps> = (props: ScopedProps<AlertDialogProps>) => {\n  const { __scopeAlertDialog, ...alertDialogProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Root {...dialogScope} {...alertDialogProps} modal={true} />;\n};\n\nAlertDialog.displayName = ROOT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTrigger\n * -----------------------------------------------------------------------------------------------*/\nconst TRIGGER_NAME = 'AlertDialogTrigger';\n\ntype AlertDialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;\ntype DialogTriggerProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\ninterface AlertDialogTriggerProps extends DialogTriggerProps {}\n\nconst AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(\n  (props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...triggerProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Trigger {...dialogScope} {...triggerProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'AlertDialogPortal';\n\ntype DialogPortalProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;\ninterface AlertDialogPortalProps extends DialogPortalProps {}\n\nconst AlertDialogPortal: React.FC<AlertDialogPortalProps> = (\n  props: ScopedProps<AlertDialogPortalProps>\n) => {\n  const { __scopeAlertDialog, ...portalProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Portal {...dialogScope} {...portalProps} />;\n};\n\nAlertDialogPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'AlertDialogOverlay';\n\ntype AlertDialogOverlayElement = React.ElementRef<typeof DialogPrimitive.Overlay>;\ntype DialogOverlayProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;\ninterface AlertDialogOverlayProps extends DialogOverlayProps {}\n\nconst AlertDialogOverlay = React.forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(\n  (props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...overlayProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Overlay {...dialogScope} {...overlayProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogOverlay.displayName = OVERLAY_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AlertDialogContent';\n\ntype AlertDialogContentContextValue = {\n  cancelRef: React.MutableRefObject<AlertDialogCancelElement | null>;\n};\n\nconst [AlertDialogContentProvider, useAlertDialogContentContext] =\n  createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME);\n\ntype AlertDialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;\ntype DialogContentProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\ninterface AlertDialogContentProps\n  extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}\n\nconst AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(\n  (props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {\n    const { __scopeAlertDialog, children, ...contentProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    const contentRef = React.useRef<AlertDialogContentElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, contentRef);\n    const cancelRef = React.useRef<AlertDialogCancelElement | null>(null);\n\n    return (\n      <DialogPrimitive.LabelWarningProvider\n        contentName={CONTENT_NAME}\n        titleName={TITLE_NAME}\n        docsSlug=\"alert-dialog\"\n      >\n        <AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>\n          <DialogPrimitive.Content\n            role=\"alertdialog\"\n            {...dialogScope}\n            {...contentProps}\n            ref={composedRefs}\n            onOpenAutoFocus={composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {\n              event.preventDefault();\n              cancelRef.current?.focus({ preventScroll: true });\n            })}\n            onPointerDownOutside={(event) => event.preventDefault()}\n            onInteractOutside={(event) => event.preventDefault()}\n          >\n            {/**\n             * We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`\n             * around everything, otherwise the `DescriptionWarning` would be rendered straight away.\n             * This is because we want the accessibility checks to run only once the content is actually\n             * open and that behaviour is already encapsulated in `DialogContent`.\n             */}\n            <Slottable>{children}</Slottable>\n            {process.env.NODE_ENV === 'development' && (\n              <DescriptionWarning contentRef={contentRef} />\n            )}\n          </DialogPrimitive.Content>\n        </AlertDialogContentProvider>\n      </DialogPrimitive.LabelWarningProvider>\n    );\n  }\n);\n\nAlertDialogContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'AlertDialogTitle';\n\ntype AlertDialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;\ntype DialogTitleProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\ninterface AlertDialogTitleProps extends DialogTitleProps {}\n\nconst AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(\n  (props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...titleProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Title {...dialogScope} {...titleProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'AlertDialogDescription';\n\ntype AlertDialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;\ntype DialogDescriptionProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;\ninterface AlertDialogDescriptionProps extends DialogDescriptionProps {}\n\nconst AlertDialogDescription = React.forwardRef<\n  AlertDialogDescriptionElement,\n  AlertDialogDescriptionProps\n>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {\n  const { __scopeAlertDialog, ...descriptionProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Description {...dialogScope} {...descriptionProps} ref={forwardedRef} />;\n});\n\nAlertDialogDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'AlertDialogAction';\n\ntype AlertDialogActionElement = React.ElementRef<typeof DialogPrimitive.Close>;\ntype DialogCloseProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\ninterface AlertDialogActionProps extends DialogCloseProps {}\n\nconst AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(\n  (props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...actionProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Close {...dialogScope} {...actionProps} ref={forwardedRef} />;\n  }\n);\n\nAlertDialogAction.displayName = ACTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogCancel\n * -----------------------------------------------------------------------------------------------*/\n\nconst CANCEL_NAME = 'AlertDialogCancel';\n\ntype AlertDialogCancelElement = React.ElementRef<typeof DialogPrimitive.Close>;\ninterface AlertDialogCancelProps extends DialogCloseProps {}\n\nconst AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(\n  (props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...cancelProps } = props;\n    const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    const ref = useComposedRefs(forwardedRef, cancelRef);\n    return <DialogPrimitive.Close {...dialogScope} {...cancelProps} ref={ref} />;\n  }\n);\n\nAlertDialogCancel.displayName = CANCEL_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype DescriptionWarningProps = {\n  contentRef: React.RefObject<AlertDialogContentElement>;\n};\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {\n  const MESSAGE = `\\`${CONTENT_NAME}\\` requires a description for the component to be accessible for screen reader users.\n\nYou 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.\n\nAlternatively, 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.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;\n\n  React.useEffect(() => {\n    const hasDescription = document.getElementById(\n      contentRef.current?.getAttribute('aria-describedby')!\n    );\n    if (!hasDescription) console.warn(MESSAGE);\n  }, [MESSAGE, contentRef]);\n\n  return null;\n};\n\nconst Root = AlertDialog;\nconst Trigger = AlertDialogTrigger;\nconst Portal = AlertDialogPortal;\nconst Overlay = AlertDialogOverlay;\nconst Content = AlertDialogContent;\nconst Action = AlertDialogAction;\nconst Cancel = AlertDialogCancel;\nconst Title = AlertDialogTitle;\nconst Description = AlertDialogDescription;\n\nexport {\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};\nexport type {\n  AlertDialogProps,\n  AlertDialogTriggerProps,\n  AlertDialogPortalProps,\n  AlertDialogOverlayProps,\n  AlertDialogContentProps,\n  AlertDialogActionProps,\n  AlertDialogCancelProps,\n  AlertDialogTitleProps,\n  AlertDialogDescriptionProps,\n};\n"],"names":["createAlertDialogContext","createAlertDialogScope","createContextScope","createDialogScope","useDialogScope","AlertDialog","props","__scopeAlertDialog","alertDialogProps","dialogScope","_react","createElement","_radixUiReactDialog","Root","_babelRuntimeHelpersEsmExtends","modal","AlertDialogTrigger","React","forwardRef","forwardedRef","triggerProps","Trigger","ref","AlertDialogPortal","portalProps","Portal","AlertDialogOverlay","overlayProps","Overlay","AlertDialogContentProvider","useAlertDialogContentContext","AlertDialogContent","children","contentProps","contentRef","useRef","composedRefs","useComposedRefs","cancelRef","LabelWarningProvider","contentName","titleName","TITLE_NAME","docsSlug","$ef785a422a78f23629aa4850fe3fc$var$AlertDialogContentProvider","scope","Content","role","onOpenAutoFocus","composeEventHandlers","event","_cancelRef$current","preventDefault","current","focus","preventScroll","onPointerDownOutside","onInteractOutside","Slottable","AlertDialogTitle","titleProps","Title","AlertDialogDescription","descriptionProps","Description","AlertDialogAction","actionProps","Close","AlertDialogCancel","cancelProps","Action","Cancel"],"version":3,"file":"index.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ui/react-alert-dialog",
-  "version": "0.1.2-rc.1",
+  "version": "0.1.2-rc.10",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -20,7 +20,7 @@
     "@radix-ui/primitive": "0.1.0",
     "@radix-ui/react-compose-refs": "0.1.0",
     "@radix-ui/react-context": "0.1.1",
-    "@radix-ui/react-dialog": "0.1.1",
+    "@radix-ui/react-dialog": "0.1.2-rc.9",
     "@radix-ui/react-primitive": "0.1.1",
     "@radix-ui/react-slot": "0.1.1"
   },

package/src/AlertDialog.stories.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   AlertDialog,
   AlertDialogTrigger,
+  AlertDialogPortal,
   AlertDialogOverlay,
   AlertDialogContent,
   AlertDialogTitle,
@@ -16,15 +17,17 @@ export default { title: 'Components/AlertDialog' };
 export const Styled = () => (
   <AlertDialog>
     <AlertDialogTrigger className={triggerClass}>delete everything</AlertDialogTrigger>
-    <AlertDialogOverlay className={overlayClass} />
-    <AlertDialogContent className={contentClass}>
-      <AlertDialogTitle className={titleClass}>Are you sure?</AlertDialogTitle>
-      <AlertDialogDescription className={descriptionClass}>
-        This will do a very dangerous thing. Thar be dragons!
-      </AlertDialogDescription>
-      <AlertDialogAction className={actionClass}>yolo, do it</AlertDialogAction>
-      <AlertDialogCancel className={cancelClass}>maybe not</AlertDialogCancel>
-    </AlertDialogContent>
+    <AlertDialogPortal>
+      <AlertDialogOverlay className={overlayClass} />
+      <AlertDialogContent className={contentClass}>
+        <AlertDialogTitle className={titleClass}>Are you sure?</AlertDialogTitle>
+        <AlertDialogDescription className={descriptionClass}>
+          This will do a very dangerous thing. Thar be dragons!
+        </AlertDialogDescription>
+        <AlertDialogAction className={actionClass}>yolo, do it</AlertDialogAction>
+        <AlertDialogCancel className={cancelClass}>maybe not</AlertDialogCancel>
+      </AlertDialogContent>
+    </AlertDialogPortal>
   </AlertDialog>
 );
 
@@ -48,18 +51,22 @@ export const Controlled = () => {
         >
           {housePurchased ? 'You bought the house! Sell it!' : 'Buy this house'}
         </AlertDialogTrigger>
-        <AlertDialogOverlay className={overlayClass} />
-        <AlertDialogContent className={contentClass}>
-          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            Houses are very expensive and it looks like you only have €20 in the bank. Maybe consult
-            with a financial advisor?
-          </AlertDialogDescription>
-          <AlertDialogAction className={actionClass} onClick={() => setHousePurchased(true)}>
-            buy it anyway
-          </AlertDialogAction>
-          <AlertDialogCancel className={cancelClass}>good point, I'll reconsider</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay className={overlayClass} />
+          <AlertDialogContent className={contentClass}>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Houses are very expensive and it looks like you only have €20 in the bank. Maybe
+              consult with a financial advisor?
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionClass} onClick={() => setHousePurchased(true)}>
+              buy it anyway
+            </AlertDialogAction>
+            <AlertDialogCancel className={cancelClass}>
+              good point, I'll reconsider
+            </AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
       </AlertDialog>
     </div>
   );
@@ -79,28 +86,36 @@ export const Chromatic = () => (
       <h2>Closed</h2>
       <AlertDialog>
         <AlertDialogTrigger className={triggerClass}>delete everything</AlertDialogTrigger>
-        <AlertDialogOverlay className={overlayClass} />
-        <AlertDialogContent className={chromaticContentClass}>
-          <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
-          <AlertDialogDescription className={descriptionClass}>Description</AlertDialogDescription>
-          <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
-          <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay className={overlayClass} />
+          <AlertDialogContent className={chromaticContentClass}>
+            <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
+            <AlertDialogDescription className={descriptionClass}>
+              Description
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
+            <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
       </AlertDialog>
 
       <h2>Open</h2>
       <AlertDialog defaultOpen>
         <AlertDialogTrigger className={triggerClass}>delete everything</AlertDialogTrigger>
-        <AlertDialogOverlay
-          className={overlayClass}
-          style={{ left: 0, bottom: '50%', width: '25%' }}
-        />
-        <AlertDialogContent className={chromaticContentClass} style={{ top: '25%', left: '12%' }}>
-          <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
-          <AlertDialogDescription className={descriptionClass}>Description</AlertDialogDescription>
-          <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
-          <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay
+            className={overlayClass}
+            style={{ left: 0, bottom: '50%', width: '25%' }}
+          />
+          <AlertDialogContent className={chromaticContentClass} style={{ top: '25%', left: '12%' }}>
+            <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
+            <AlertDialogDescription className={descriptionClass}>
+              Description
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
+            <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
       </AlertDialog>
     </div>
 
@@ -108,28 +123,36 @@ export const Chromatic = () => (
       <h1>Uncontrolled with reordered parts</h1>
       <h2>Closed</h2>
       <AlertDialog>
-        <AlertDialogOverlay className={overlayClass} />
-        <AlertDialogContent className={chromaticContentClass}>
-          <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
-          <AlertDialogDescription className={descriptionClass}>Description</AlertDialogDescription>
-          <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
-          <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay className={overlayClass} />
+          <AlertDialogContent className={chromaticContentClass}>
+            <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
+            <AlertDialogDescription className={descriptionClass}>
+              Description
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
+            <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
         <AlertDialogTrigger className={triggerClass}>delete everything</AlertDialogTrigger>
       </AlertDialog>
 
       <h2>Open</h2>
       <AlertDialog defaultOpen>
-        <AlertDialogOverlay
-          className={overlayClass}
-          style={{ left: '25%', bottom: '50%', width: '25%' }}
-        />
-        <AlertDialogContent className={chromaticContentClass} style={{ top: '25%', left: '37%' }}>
-          <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
-          <AlertDialogDescription className={descriptionClass}>Description</AlertDialogDescription>
-          <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
-          <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay
+            className={overlayClass}
+            style={{ left: '25%', bottom: '50%', width: '25%' }}
+          />
+          <AlertDialogContent className={chromaticContentClass} style={{ top: '25%', left: '37%' }}>
+            <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
+            <AlertDialogDescription className={descriptionClass}>
+              Description
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
+            <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
         <AlertDialogTrigger className={triggerClass}>delete everything</AlertDialogTrigger>
       </AlertDialog>
     </div>
@@ -139,28 +162,36 @@ export const Chromatic = () => (
       <h2>Closed</h2>
       <AlertDialog open={false}>
         <AlertDialogTrigger className={triggerClass}>delete everything</AlertDialogTrigger>
-        <AlertDialogOverlay className={overlayClass} />
-        <AlertDialogContent className={chromaticContentClass}>
-          <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
-          <AlertDialogDescription className={descriptionClass}>Description</AlertDialogDescription>
-          <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
-          <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay className={overlayClass} />
+          <AlertDialogContent className={chromaticContentClass}>
+            <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
+            <AlertDialogDescription className={descriptionClass}>
+              Description
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
+            <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
       </AlertDialog>
 
       <h2>Open</h2>
       <AlertDialog open>
         <AlertDialogTrigger className={triggerClass}>delete everything</AlertDialogTrigger>
-        <AlertDialogOverlay
-          className={overlayClass}
-          style={{ left: '50%', bottom: '50%', width: '25%' }}
-        />
-        <AlertDialogContent className={chromaticContentClass} style={{ top: '25%', left: '62%' }}>
-          <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
-          <AlertDialogDescription className={descriptionClass}>Description</AlertDialogDescription>
-          <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
-          <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay
+            className={overlayClass}
+            style={{ left: '50%', bottom: '50%', width: '25%' }}
+          />
+          <AlertDialogContent className={chromaticContentClass} style={{ top: '25%', left: '62%' }}>
+            <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
+            <AlertDialogDescription className={descriptionClass}>
+              Description
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
+            <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
       </AlertDialog>
     </div>
 
@@ -168,28 +199,36 @@ export const Chromatic = () => (
       <h1>Controlled with reordered parts</h1>
       <h2>Closed</h2>
       <AlertDialog open={false}>
-        <AlertDialogOverlay className={overlayClass} />
-        <AlertDialogContent className={chromaticContentClass}>
-          <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
-          <AlertDialogDescription className={descriptionClass}>Description</AlertDialogDescription>
-          <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
-          <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay className={overlayClass} />
+          <AlertDialogContent className={chromaticContentClass}>
+            <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
+            <AlertDialogDescription className={descriptionClass}>
+              Description
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
+            <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
         <AlertDialogTrigger className={triggerClass}>delete everything</AlertDialogTrigger>
       </AlertDialog>
 
       <h2>Open</h2>
       <AlertDialog open>
-        <AlertDialogOverlay
-          className={overlayClass}
-          style={{ left: '75%', bottom: '50%', width: '25%' }}
-        />
-        <AlertDialogContent className={chromaticContentClass} style={{ top: '25%', left: '88%' }}>
-          <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
-          <AlertDialogDescription className={descriptionClass}>Description</AlertDialogDescription>
-          <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
-          <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay
+            className={overlayClass}
+            style={{ left: '75%', bottom: '50%', width: '25%' }}
+          />
+          <AlertDialogContent className={chromaticContentClass} style={{ top: '25%', left: '88%' }}>
+            <AlertDialogTitle className={titleClass}>Title</AlertDialogTitle>
+            <AlertDialogDescription className={descriptionClass}>
+              Description
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionClass}>Confirm</AlertDialogAction>
+            <AlertDialogCancel className={cancelClass}>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
         <AlertDialogTrigger className={triggerClass}>delete everything</AlertDialogTrigger>
       </AlertDialog>
     </div>
@@ -199,29 +238,33 @@ export const Chromatic = () => (
       <h2>Closed</h2>
       <AlertDialog>
         <AlertDialogTrigger className={triggerAttrClass}>delete everything</AlertDialogTrigger>
-        <AlertDialogOverlay className={overlayAttrClass} />
-        <AlertDialogContent className={contentAttrClass}>
-          <AlertDialogTitle className={titleAttrClass}>Title</AlertDialogTitle>
-          <AlertDialogDescription className={descriptionAttrClass}>
-            Description
-          </AlertDialogDescription>
-          <AlertDialogAction className={actionAttrClass}>Confirm</AlertDialogAction>
-          <AlertDialogCancel className={cancelAttrClass}>Cancel</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay className={overlayAttrClass} />
+          <AlertDialogContent className={contentAttrClass}>
+            <AlertDialogTitle className={titleAttrClass}>Title</AlertDialogTitle>
+            <AlertDialogDescription className={descriptionAttrClass}>
+              Description
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionAttrClass}>Confirm</AlertDialogAction>
+            <AlertDialogCancel className={cancelAttrClass}>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
       </AlertDialog>
 
       <h2>Open</h2>
       <AlertDialog defaultOpen>
         <AlertDialogTrigger className={triggerAttrClass}>delete everything</AlertDialogTrigger>
-        <AlertDialogOverlay className={overlayAttrClass} style={{ top: '50%' }} />
-        <AlertDialogContent className={contentAttrClass} style={{ top: '75%' }}>
-          <AlertDialogTitle className={titleAttrClass}>Title</AlertDialogTitle>
-          <AlertDialogDescription className={descriptionAttrClass}>
-            Description
-          </AlertDialogDescription>
-          <AlertDialogAction className={actionAttrClass}>Confirm</AlertDialogAction>
-          <AlertDialogCancel className={cancelAttrClass}>Cancel</AlertDialogCancel>
-        </AlertDialogContent>
+        <AlertDialogPortal>
+          <AlertDialogOverlay className={overlayAttrClass} style={{ top: '50%' }} />
+          <AlertDialogContent className={contentAttrClass} style={{ top: '75%' }}>
+            <AlertDialogTitle className={titleAttrClass}>Title</AlertDialogTitle>
+            <AlertDialogDescription className={descriptionAttrClass}>
+              Description
+            </AlertDialogDescription>
+            <AlertDialogAction className={actionAttrClass}>Confirm</AlertDialogAction>
+            <AlertDialogCancel className={cancelAttrClass}>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialogPortal>
       </AlertDialog>
     </div>
   </div>

package/src/AlertDialog.tsx

@@ -51,6 +51,25 @@ const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDial
 
 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
  * -----------------------------------------------------------------------------------------------*/
@@ -244,6 +263,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
 
 const Root = AlertDialog;
 const Trigger = AlertDialogTrigger;
+const Portal = AlertDialogPortal;
 const Overlay = AlertDialogOverlay;
 const Content = AlertDialogContent;
 const Action = AlertDialogAction;
@@ -256,6 +276,7 @@ export {
   //
   AlertDialog,
   AlertDialogTrigger,
+  AlertDialogPortal,
   AlertDialogOverlay,
   AlertDialogContent,
   AlertDialogAction,
@@ -265,6 +286,7 @@ export {
   //
   Root,
   Trigger,
+  Portal,
   Overlay,
   Content,
   Action,
@@ -275,6 +297,7 @@ export {
 export type {
   AlertDialogProps,
   AlertDialogTriggerProps,
+  AlertDialogPortalProps,
   AlertDialogOverlayProps,
   AlertDialogContentProps,
   AlertDialogActionProps,