npm - @radix-ui/react-alert-dialog - Versions diffs - 0.1.1-rc.8 → 0.1.2-rc.10 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.d.ts +6 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +1 -1
package/dist/index.js.map +1 -1
package/dist/index.module.js +1 -1
package/dist/index.module.js.map +1 -1
package/package.json +6 -5
package/src/AlertDialog.stories.tsx +150 -107
package/src/AlertDialog.tsx +78 -20

package/dist/index.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as Radix from "@radix-ui/react-primitive";
+export const createAlertDialogScope: import("@radix-ui/react-context").CreateScope;
 type DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 export interface AlertDialogProps extends Omit<DialogProps, 'modal'> {
 }
@@ -9,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 {
 }
@@ -34,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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"A;A;A;~~AAeA~~,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,~~CAE3C~~,CAAC;AAUF,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,OAAO,CAAC,CAAC;AACzF,wCAAkC,SAAQ,kBAAkB;CAAG;AAE/D,OAAA,MAAM,~~qHAEL~~,CAAC;AAWF,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,OAAO,CAAC,CAAC;AACzF,wCAAkC,SAAQ,kBAAkB;CAAG;AAE/D,OAAA,MAAM,~~kHAEL~~,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,~~kHAyCL~~,CAAC;AAWF,wBAAwB,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,KAAK,CAAC,CAAC;AACrF,sCAAgC,SAAQ,gBAAgB;CAAG;AAE3D,OAAA,MAAM,~~kHAEL~~,CAAC;AAWF,8BAA8B,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,WAAW,CAAC,CAAC;AACjG,4CAAsC,SAAQ,sBAAsB;CAAG;AAEvE,OAAA,MAAM,~~gIAGmF~~,CAAC;~~AAW1F~~,wBAAwB,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,KAAK,CAAC,CAAC;AACrF,uCAAiC,SAAQ,gBAAgB;CAAG;AAE5D,OAAA,MAAM,~~mHAEL~~,CAAC;AAWF,uCAAiC,SAAQ,gBAAgB;CAAG;AAE5D,OAAA,MAAM,~~mHAML~~,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"}
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;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 CHANGED Viewed

@@ -1,2 +1,2 @@
-var e,t=require("@radix-ui/react-slot").Slottable,r=require("@radix-ui/primitive").composeEventHandlers,o=i({},require("@radix-ui/react-dialog")),n=require("@radix-ui/react-compose-refs").useComposedRefs,l=require("@radix-ui/react-context").createContext,a=i({},require("react")),c=(e=require("@babel/runtime/helpers/extends"))&&e.__esModule?e.default:e;function i(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 s=e=>/*#__PURE__*/a.createElement(o.Root,c({},e,{modal:!0}));exports.AlertDialog=s;const u=/*#__PURE__*/a.forwardRef(((e,t)=>/*#__PURE__*/a.createElement(o.Trigger,c({},e,{ref:t}))));exports.AlertDialogTrigger=u;const f=/*#__PURE__*/a.forwardRef(((e,t)=>/*#__PURE__*/a.createElement(o.Overlay,c({},e,{ref:t}))));exports.AlertDialogOverlay=f;const[p,d]=l("AlertDialogContent"),g=/*#__PURE__*/a.forwardRef(((e,l)=>{const{children:i,...s}=e,u=a.useRef(null),f=n(l,u),d=a.useRef(null);/*#__PURE__*/return a.createElement(o.LabelWarningProvider,{value:a.useMemo((()=>({contentName:"AlertDialogContent",titleName:x,docsSlug:"alert-dialog"})),[])},/*#__PURE__*/a.createElement(p,{cancelRef:d},/*#__PURE__*/a.createElement(o.Content,c({role:"alertdialog"},s,{ref:f,onOpenAutoFocus:r(s.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(t,null,i),!1)))}));exports.AlertDialogContent=g;const x="AlertDialogTitle",m=/*#__PURE__*/a.forwardRef(((e,t)=>/*#__PURE__*/a.createElement(o.Title,c({},e,{ref:t}))));exports.AlertDialogTitle=m;const D=/*#__PURE__*/a.forwardRef(((e,t)=>/*#__PURE__*/a.createElement(o.Description,c({},e,{ref:t}))));exports.AlertDialogDescription=D;const A=/*#__PURE__*/a.forwardRef(((e,t)=>/*#__PURE__*/a.createElement(o.Close,c({},e,{ref:t}))));exports.AlertDialogAction=A;const v=/*#__PURE__*/a.forwardRef(((e,t)=>{const{cancelRef:r}=d("AlertDialogCancel"),l=n(t,r);/*#__PURE__*/return a.createElement(o.Close,c({},e,{ref:l}))}));exports.AlertDialogCancel=v;const R=s;exports.Root=R;const E=u;exports.Trigger=E;const C=f;exports.Overlay=C;const O=g;exports.Content=O;const w=A;exports.Action=w;const b=v;exports.Cancel=b;const q=m;exports.Title=q;const T=D;exports.Description=T;
+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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"IAAgCA,uRAAAA,8CAClBA,EAAEC,WAAaD,EAAEE,QAAUF,EAWzC,SAASG,EAAuBC,EAAMC,GAcpC,OAbAC,OAAOC,KAAKF,GAAQG,SAAQ,SAASC,GACvB,YAARA,GAA6B,eAARA,GAIzBH,OAAOI,eAAeN,EAAMK,EAAK,CAC/BE,YAAY,EACZC,IAAK,WACH,OAAOP,EAAOI,SAKbL,ECbT,MAKMS,EAA2CC,gBAC/CC,EAAAC,cAACC,EAAgBC,KAAjBC,EAAA,GAA0BL,EAA1B,CAAiCM,OAAO,2BAQ1C,MAMMC,eAAqBC,EAAMC,YAC/B,CAACT,EAAOU,iBAAiBT,EAAAC,cAACC,EAAgBQ,QAAjBN,EAAA,GAA6BL,EAA7B,CAAoCY,IAAKF,oCASpE,MAMMG,eAAqBL,EAAMC,YAC/B,CAACT,EAAOU,iBAAiBT,EAAAC,cAACC,EAAgBW,QAAjBT,EAAA,GAA6BL,EAA7B,CAAoCY,IAAKF,oCASpE,MAMOK,EAA4BC,GACjCC,EAPmB,sBAcfC,eAAqBV,EAAMC,YAC/B,CAACT,EAAOU,KACN,MAAMS,SAAEA,KAAaC,GAAiBpB,EAChCqB,EAAab,EAAMc,OAAkC,MACrDC,EAAeC,EAAgBd,EAAcW,GAC7CI,EAAYjB,EAAMc,OAAwC,mBAEhE,OACErB,EAAAC,cAACC,EAAgBuB,qBAAjB,CACEC,MAAOnB,EAAMoB,SACX,KAAA,CAASC,YAxBE,qBAwByBC,UAAWC,EAAYC,SAAU,kBACrE,kBAGF/B,EAAAC,cAAC+B,EAAD,CAA4BR,UAAWA,gBACrCxB,EAAAC,cAACC,EAAgB+B,QAAjB7B,EAAA,CACE8B,KAAK,eACDf,EAFN,CAGER,IAAKW,EACLa,gBAAiBC,EAAqBjB,EAAagB,iBAAkBE,IAAU,IAAAC,EAC7ED,EAAME,iBACN,QAAAD,EAAAd,EAAUgB,eAAV,IAAAF,GAAAA,EAAmBG,MAAM,CAAEC,eAAe,OAE5CC,qBAAuBN,GAAUA,EAAME,iBACvCK,kBAAoBP,GAAUA,EAAME,gCAQpCvC,EAAAC,cAAC4C,EAAD,KAAY3B,IACX,qCAgBb,MAAMY,EAAa,mBAMbgB,eAAmBvC,EAAMC,YAC7B,CAACT,EAAOU,iBAAiBT,EAAAC,cAACC,EAAgB6C,MAAjB3C,EAAA,GAA2BL,EAA3B,CAAkCY,IAAKF,kCASlE,MAMMuC,eAAyBzC,EAAMC,YAGnC,CAACT,EAAOU,iBAAiBT,EAAAC,cAACC,EAAgB+C,YAAjB7C,EAAA,GAAiCL,EAAjC,CAAwCY,IAAKF,wCAQxE,MAMMyC,eAAoB3C,EAAMC,YAC9B,CAACT,EAAOU,iBAAiBT,EAAAC,cAACC,EAAgBiD,MAAjB/C,EAAA,GAA2BL,EAA3B,CAAkCY,IAAKF,mCASlE,MAKM2C,eAAoB7C,EAAMC,YAC9B,CAACT,EAAOU,KACN,MAAMe,UAAEA,GAAcT,EAPN,qBAQVJ,EAAMY,EAAgBd,EAAce,gBAC1C,OAAOxB,EAAAC,cAACC,EAAgBiD,MAAjB/C,EAAA,GAA2BL,EAA3B,CAAkCY,IAAKA,oCAYlD,MAmBMR,EAAOL,iBACb,MAAMY,EAAUJ,oBAChB,MAAMO,EAAUD,oBAChB,MAAMqB,EAAUhB,oBAChB,MAAMoC,EAASH,mBACf,MAAMI,EAASF,mBACf,MAAML,EAAQD,kBACd,MAAMG,EAAcD","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 { createContext } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as DialogPrimitive 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';\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialog\n * -----------------------------------------------------------------------------------------------/\n\nconst ROOT_NAME = 'AlertDialog';\n\ntype DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\ninterface AlertDialogProps extends Omit<DialogProps, 'modal'> {}\n\nconst AlertDialog: React.FC<AlertDialogProps> = (props) => (\n <DialogPrimitive.Root {...props} 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, forwardedRef) => <DialogPrimitive.Trigger {...props} ref={forwardedRef} />\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, forwardedRef) => <DialogPrimitive.Overlay {...props} ref={forwardedRef} />\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 createContext<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, forwardedRef) => {\n const { children, ...contentProps } = props;\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 value={React.useMemo(\n () => ({ contentName: CONTENT_NAME, titleName: TITLE_NAME, docsSlug: 'alert-dialog' }),\n []\n )}\n >\n <AlertDialogContentProvider cancelRef={cancelRef}>\n <DialogPrimitive.Content\n role=\"alertdialog\"\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, forwardedRef) => <DialogPrimitive.Title {...props} ref={forwardedRef} />\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, forwardedRef) => <DialogPrimitive.Description {...props} ref={forwardedRef} />);\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, forwardedRef) => <DialogPrimitive.Close {...props} ref={forwardedRef} />\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, forwardedRef) => {\n const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME);\n const ref = useComposedRefs(forwardedRef, cancelRef);\n return <DialogPrimitive.Close {...props} 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 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","AlertDialog","props","_react","createElement","_radixUiReactDialog","Root","_babelRuntimeHelpersExtends","modal","AlertDialogTrigger","React","forwardRef","forwardedRef","Trigger","ref","AlertDialogOverlay","Overlay","AlertDialogContentProvider","useAlertDialogContentContext","createContext","AlertDialogContent","children","contentProps","contentRef","useRef","composedRefs","useComposedRefs","cancelRef","LabelWarningProvider","value","useMemo","contentName","titleName","TITLE_NAME","docsSlug","$ce6149552ca6be39fd0092c861815af$var$AlertDialogContentProvider","Content","role","onOpenAutoFocus","composeEventHandlers","event","_cancelRef$current","preventDefault","current","focus","preventScroll","onPointerDownOutside","onInteractOutside","Slottable","AlertDialogTitle","Title","AlertDialogDescription","Description","AlertDialogAction","Close","AlertDialogCancel","Action","Cancel"],"version":3,"file":"index.js.map"}
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 * 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 CHANGED Viewed

@@ -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{useComposedRefs as o}from"@radix-ui/react-compose-refs";import{createContext as l}from"@radix-ui/react-context";import*as n from"react";import a from"@babel/runtime/helpers/esm/extends";export const AlertDialog=e=>/*#__PURE__*/n.createElement(r.Root,a({},e,{modal:!0}))/*#__PURE__*/;export const AlertDialogTrigger=/*#__PURE__*/n.forwardRef(((e,t)=>/*#__PURE__*/n.createElement(r.Trigger,a({},e,{ref:t}))));/*#__PURE__*/export const AlertDialogOverlay=/*#__PURE__*/n.forwardRef(((e,t)=>/*#__PURE__*/n.createElement(r.Overlay,a({},e,{ref:t}))));/*#__PURE__*/const[i,c]=l("AlertDialogContent");export const AlertDialogContent=/*#__PURE__*/n.forwardRef(((l,c)=>{const{children:f,...p}=l,g=n.useRef(null),m=o(c,g),u=n.useRef(null);/*#__PURE__*/return n.createElement(r.LabelWarningProvider,{value:n.useMemo((()=>({contentName:"AlertDialogContent",titleName:s,docsSlug:"alert-dialog"})),[])},/*#__PURE__*/n.createElement(i,{cancelRef:u},/*#__PURE__*/n.createElement(r.Content,a({role:"alertdialog"},p,{ref:m,onOpenAutoFocus:t(p.onOpenAutoFocus,(e=>{var t;e.preventDefault(),null===(t=u.current)||void 0===t||t.focus({preventScroll:!0})})),onPointerDownOutside:e=>e.preventDefault(),onInteractOutside:e=>e.preventDefault()}),/*#__PURE__*/n.createElement(e,null,f),!1)))}));/*#__PURE__*/const s="AlertDialogTitle";export const AlertDialogTitle=/*#__PURE__*/n.forwardRef(((e,t)=>/*#__PURE__*/n.createElement(r.Title,a({},e,{ref:t}))));/*#__PURE__*/export const AlertDialogDescription=/*#__PURE__*/n.forwardRef(((e,t)=>/*#__PURE__*/n.createElement(r.Description,a({},e,{ref:t}))));/*#__PURE__*/export const AlertDialogAction=/*#__PURE__*/n.forwardRef(((e,t)=>/*#__PURE__*/n.createElement(r.Close,a({},e,{ref:t}))));/*#__PURE__*/export const AlertDialogCancel=/*#__PURE__*/n.forwardRef(((e,t)=>{const{cancelRef:l}=c("AlertDialogCancel"),i=o(t,l);/*#__PURE__*/return n.createElement(r.Close,a({},e,{ref:i}))}));/*#__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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"6VAkBA,MAAMA,YAA2CC,gBAC/CC,EAAAC,cAACC,EAAgBC,KAAjBC,EAAA,GAA0BL,EAA1B,CAAiCM,OAAO,yBAc1C,MAAMC,gCAAqBC,EAAMC,YAC/B,CAACT,EAAOU,iBAAiBT,EAAAC,cAACC,EAAgBQ,QAAjBN,EAAA,GAA6BL,EAA7B,CAAoCY,IAAKF,2BAepE,MAAMG,gCAAqBL,EAAMC,YAC/B,CAACT,EAAOU,iBAAiBT,EAAAC,cAACC,EAAgBW,QAAjBT,EAAA,GAA6BL,EAA7B,CAAoCY,IAAKF,oBASpE,MAMOK,EAA4BC,GACjCC,EAPmB,6BAcrB,MAAMC,gCAAqBV,EAAMC,YAC/B,CAACT,EAAOU,KACN,MAAMS,SAAEA,KAAaC,GAAiBpB,EAChCqB,EAAab,EAAMc,OAAkC,MACrDC,EAAeC,EAAgBd,EAAcW,GAC7CI,EAAYjB,EAAMc,OAAwC,mBAEhE,OACErB,EAAAC,cAACC,EAAgBuB,qBAAjB,CACEC,MAAOnB,EAAMoB,SACX,KAAA,CAASC,YAxBE,qBAwByBC,UAAWC,EAAYC,SAAU,kBACrE,kBAGF/B,EAAAC,cAAC+B,EAAD,CAA4BR,UAAWA,gBACrCxB,EAAAC,cAACC,EAAgB+B,QAAjB7B,EAAA,CACE8B,KAAK,eACDf,EAFN,CAGER,IAAKW,EACLa,gBAAiBC,EAAqBjB,EAAagB,iBAAkBE,IAAU,IAAAC,EAC7ED,EAAME,iBACN,QAAAD,EAAAd,EAAUgB,eAAV,IAAAF,GAAAA,EAAmBG,MAAM,CAAEC,eAAe,OAE5CC,qBAAuBN,GAAUA,EAAME,iBACvCK,kBAAoBP,GAAUA,EAAME,gCAQpCvC,EAAAC,cAAC4C,EAAD,KAAY3B,IACX,qBAgBb,MAAMY,EAAa,0BAMnB,MAAMgB,8BAAmBvC,EAAMC,YAC7B,CAACT,EAAOU,iBAAiBT,EAAAC,cAACC,EAAgB6C,MAAjB3C,EAAA,GAA2BL,EAA3B,CAAkCY,IAAKF,2BAelE,MAAMuC,oCAAyBzC,EAAMC,YAGnC,CAACT,EAAOU,iBAAiBT,EAAAC,cAACC,EAAgB+C,YAAjB7C,EAAA,GAAiCL,EAAjC,CAAwCY,IAAKF,2BAcxE,MAAMyC,+BAAoB3C,EAAMC,YAC9B,CAACT,EAAOU,iBAAiBT,EAAAC,cAACC,EAAgBiD,MAAjB/C,EAAA,GAA2BL,EAA3B,CAAkCY,IAAKF,2BAclE,MAAM2C,+BAAoB7C,EAAMC,YAC9B,CAACT,EAAOU,KACN,MAAMe,UAAEA,GAAcT,EAPN,qBAQVJ,EAAMY,EAAgBd,EAAce,gBAC1C,OAAOxB,EAAAC,cAACC,EAAgBiD,MAAjB/C,EAAA,GAA2BL,EAA3B,CAAkCY,IAAKA,4BA+BlD,MAAMR,KAAOL,mBACb,MAAMY,QAAUJ,0BAChB,MAAMO,QAAUD,0BAChB,MAAMqB,QAAUhB,0BAChB,MAAMoC,OAASH,yBACf,MAAMI,OAASF,yBACf,MAAML,MAAQD,wBACd,MAAMG,YAAcD","sources":["./packages/react/alert-dialog/src/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createContext } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as DialogPrimitive 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';\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialog\n * -----------------------------------------------------------------------------------------------/\n\nconst ROOT_NAME = 'AlertDialog';\n\ntype DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\ninterface AlertDialogProps extends Omit<DialogProps, 'modal'> {}\n\nconst AlertDialog: React.FC<AlertDialogProps> = (props) => (\n <DialogPrimitive.Root {...props} 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, forwardedRef) => <DialogPrimitive.Trigger {...props} ref={forwardedRef} />\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, forwardedRef) => <DialogPrimitive.Overlay {...props} ref={forwardedRef} />\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 createContext<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, forwardedRef) => {\n const { children, ...contentProps } = props;\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 value={React.useMemo(\n () => ({ contentName: CONTENT_NAME, titleName: TITLE_NAME, docsSlug: 'alert-dialog' }),\n []\n )}\n >\n <AlertDialogContentProvider cancelRef={cancelRef}>\n <DialogPrimitive.Content\n role=\"alertdialog\"\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, forwardedRef) => <DialogPrimitive.Title {...props} ref={forwardedRef} />\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, forwardedRef) => <DialogPrimitive.Description {...props} ref={forwardedRef} />);\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, forwardedRef) => <DialogPrimitive.Close {...props} ref={forwardedRef} />\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, forwardedRef) => {\n const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME);\n const ref = useComposedRefs(forwardedRef, cancelRef);\n return <DialogPrimitive.Close {...props} 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 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":["AlertDialog","props","_react","createElement","_radixUiReactDialog","Root","_babelRuntimeHelpersEsmExtends","modal","AlertDialogTrigger","React","forwardRef","forwardedRef","Trigger","ref","AlertDialogOverlay","Overlay","AlertDialogContentProvider","useAlertDialogContentContext","createContext","AlertDialogContent","children","contentProps","contentRef","useRef","composedRefs","useComposedRefs","cancelRef","LabelWarningProvider","value","useMemo","contentName","titleName","TITLE_NAME","docsSlug","$ef785a422a78f23629aa4850fe3fc$var$AlertDialogContentProvider","Content","role","onOpenAutoFocus","composeEventHandlers","event","_cancelRef$current","preventDefault","current","focus","preventScroll","onPointerDownOutside","onInteractOutside","Slottable","AlertDialogTitle","Title","AlertDialogDescription","Description","AlertDialogAction","Close","AlertDialogCancel","Action","Cancel"],"version":3,"file":"index.module.js.map"}
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 * 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ui/react-alert-dialog",
-  "version": "0.1.1-rc.8",
+  "version": "0.1.2-rc.10",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -19,9 +19,10 @@
     "@babel/runtime": "^7.13.10",
     "@radix-ui/primitive": "0.1.0",
     "@radix-ui/react-compose-refs": "0.1.0",
-    "@radix-ui/react-context": "0.1.0",
-    "@radix-ui/react-dialog": "0.1.1-rc.7",
-    "@radix-ui/react-slot": "0.1.1-rc.3"
+    "@radix-ui/react-context": "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"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -35,5 +36,5 @@
   "bugs": {
     "url": "https://github.com/radix-ui/primitives/issues"
   },
-  "stableVersion": "0.1.0"
+  "stableVersion": "0.1.1"
 }

package/src/AlertDialog.stories.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { createContext } from '@radix-ui/react-context';
+import { createContextScope } from '@radix-ui/react-context';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { createDialogScope } from '@radix-ui/react-dialog';
 import { composeEventHandlers } from '@radix-ui/primitive';
 import { Slottable } from '@radix-ui/react-slot';
 import type * as Radix from '@radix-ui/react-primitive';
+import type { Scope } from '@radix-ui/react-context';
 /* -------------------------------------------------------------------------------------------------
  * AlertDialog
@@ -13,12 +15,20 @@ import type * as Radix from '@radix-ui/react-primitive';
 const ROOT_NAME = 'AlertDialog';
+type ScopedProps<P> = P & { __scopeAlertDialog?: Scope };
+const [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [
+  createDialogScope,
+]);
+const useDialogScope = createDialogScope();
 type DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 interface AlertDialogProps extends Omit<DialogProps, 'modal'> {}
-const AlertDialog: React.FC<AlertDialogProps> = (props) => (
-  <DialogPrimitive.Root {...props} modal={true} />
-);
+const AlertDialog: React.FC<AlertDialogProps> = (props: ScopedProps<AlertDialogProps>) => {
+  const { __scopeAlertDialog, ...alertDialogProps } = props;
+  const dialogScope = useDialogScope(__scopeAlertDialog);
+  return <DialogPrimitive.Root {...dialogScope} {...alertDialogProps} modal={true} />;
+};
 AlertDialog.displayName = ROOT_NAME;
@@ -32,11 +42,34 @@ type DialogTriggerProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.
 interface AlertDialogTriggerProps extends DialogTriggerProps {}
 const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(
-  (props, forwardedRef) => <DialogPrimitive.Trigger {...props} ref={forwardedRef} />
+  (props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {
+    const { __scopeAlertDialog, ...triggerProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return <DialogPrimitive.Trigger {...dialogScope} {...triggerProps} ref={forwardedRef} />;
+  }
 );
 AlertDialogTrigger.displayName = TRIGGER_NAME;
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialogPortal
+ * -----------------------------------------------------------------------------------------------*/
+const PORTAL_NAME = 'AlertDialogPortal';
+type DialogPortalProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
+interface AlertDialogPortalProps extends DialogPortalProps {}
+const AlertDialogPortal: React.FC<AlertDialogPortalProps> = (
+  props: ScopedProps<AlertDialogPortalProps>
+) => {
+  const { __scopeAlertDialog, ...portalProps } = props;
+  const dialogScope = useDialogScope(__scopeAlertDialog);
+  return <DialogPrimitive.Portal {...dialogScope} {...portalProps} />;
+};
+AlertDialogPortal.displayName = PORTAL_NAME;
 /* -------------------------------------------------------------------------------------------------
  * AlertDialogOverlay
  * -----------------------------------------------------------------------------------------------*/
@@ -48,7 +81,11 @@ type DialogOverlayProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.
 interface AlertDialogOverlayProps extends DialogOverlayProps {}
 const AlertDialogOverlay = React.forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(
-  (props, forwardedRef) => <DialogPrimitive.Overlay {...props} ref={forwardedRef} />
+  (props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {
+    const { __scopeAlertDialog, ...overlayProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return <DialogPrimitive.Overlay {...dialogScope} {...overlayProps} ref={forwardedRef} />;
+  }
 );
 AlertDialogOverlay.displayName = OVERLAY_NAME;
@@ -64,7 +101,7 @@ type AlertDialogContentContextValue = {
 };
 const [AlertDialogContentProvider, useAlertDialogContentContext] =
-  createContext<AlertDialogContentContextValue>(CONTENT_NAME);
+  createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME);
 type AlertDialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 type DialogContentProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
@@ -72,22 +109,23 @@ interface AlertDialogContentProps
   extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}
 const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
-  (props, forwardedRef) => {
-    const { children, ...contentProps } = props;
+  (props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {
+    const { __scopeAlertDialog, children, ...contentProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
     const contentRef = React.useRef<AlertDialogContentElement>(null);
     const composedRefs = useComposedRefs(forwardedRef, contentRef);
     const cancelRef = React.useRef<AlertDialogCancelElement | null>(null);
     return (
       <DialogPrimitive.LabelWarningProvider
-        value={React.useMemo(
-          () => ({ contentName: CONTENT_NAME, titleName: TITLE_NAME, docsSlug: 'alert-dialog' }),
-          []
-        )}
+        contentName={CONTENT_NAME}
+        titleName={TITLE_NAME}
+        docsSlug="alert-dialog"
       >
-        <AlertDialogContentProvider cancelRef={cancelRef}>
+        <AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>
           <DialogPrimitive.Content
             role="alertdialog"
+            {...dialogScope}
             {...contentProps}
             ref={composedRefs}
             onOpenAutoFocus={composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {
@@ -127,7 +165,11 @@ type DialogTitleProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Ti
 interface AlertDialogTitleProps extends DialogTitleProps {}
 const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
-  (props, forwardedRef) => <DialogPrimitive.Title {...props} ref={forwardedRef} />
+  (props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {
+    const { __scopeAlertDialog, ...titleProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return <DialogPrimitive.Title {...dialogScope} {...titleProps} ref={forwardedRef} />;
+  }
 );
 AlertDialogTitle.displayName = TITLE_NAME;
@@ -145,7 +187,11 @@ interface AlertDialogDescriptionProps extends DialogDescriptionProps {}
 const AlertDialogDescription = React.forwardRef<
   AlertDialogDescriptionElement,
   AlertDialogDescriptionProps
->((props, forwardedRef) => <DialogPrimitive.Description {...props} ref={forwardedRef} />);
+>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {
+  const { __scopeAlertDialog, ...descriptionProps } = props;
+  const dialogScope = useDialogScope(__scopeAlertDialog);
+  return <DialogPrimitive.Description {...dialogScope} {...descriptionProps} ref={forwardedRef} />;
+});
 AlertDialogDescription.displayName = DESCRIPTION_NAME;
@@ -160,7 +206,11 @@ type DialogCloseProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Cl
 interface AlertDialogActionProps extends DialogCloseProps {}
 const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(
-  (props, forwardedRef) => <DialogPrimitive.Close {...props} ref={forwardedRef} />
+  (props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {
+    const { __scopeAlertDialog, ...actionProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return <DialogPrimitive.Close {...dialogScope} {...actionProps} ref={forwardedRef} />;
+  }
 );
 AlertDialogAction.displayName = ACTION_NAME;
@@ -175,10 +225,12 @@ type AlertDialogCancelElement = React.ElementRef<typeof DialogPrimitive.Close>;
 interface AlertDialogCancelProps extends DialogCloseProps {}
 const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(
-  (props, forwardedRef) => {
-    const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME);
+  (props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {
+    const { __scopeAlertDialog, ...cancelProps } = props;
+    const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
+    const dialogScope = useDialogScope(__scopeAlertDialog);
     const ref = useComposedRefs(forwardedRef, cancelRef);
-    return <DialogPrimitive.Close {...props} ref={ref} />;
+    return <DialogPrimitive.Close {...dialogScope} {...cancelProps} ref={ref} />;
   }
 );
@@ -211,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;
@@ -219,8 +272,11 @@ const Title = AlertDialogTitle;
 const Description = AlertDialogDescription;
 export {
+  createAlertDialogScope,
+  //
   AlertDialog,
   AlertDialogTrigger,
+  AlertDialogPortal,
   AlertDialogOverlay,
   AlertDialogContent,
   AlertDialogAction,
@@ -230,6 +286,7 @@ export {
   //
   Root,
   Trigger,
+  Portal,
   Overlay,
   Content,
   Action,
@@ -240,6 +297,7 @@ export {
 export type {
   AlertDialogProps,
   AlertDialogTriggerProps,
+  AlertDialogPortalProps,
   AlertDialogOverlayProps,
   AlertDialogContentProps,
   AlertDialogActionProps,