UNPKG

@loke/ui

Version:
8 lines (4 loc) 7.99 kB
var __create=Object.create;var{getPrototypeOf:__getProtoOf,defineProperty:__defProp,getOwnPropertyNames:__getOwnPropNames,getOwnPropertyDescriptor:__getOwnPropDesc}=Object,__hasOwnProp=Object.prototype.hasOwnProperty;function __accessProp(key){return this[key]}var __toESMCache_node,__toESMCache_esm,__toESM=(mod,isNodeMode,target)=>{var canCache=mod!=null&&typeof mod==="object";if(canCache){var cache=isNodeMode?__toESMCache_node??=new WeakMap:__toESMCache_esm??=new WeakMap,cached=cache.get(mod);if(cached)return cached}target=mod!=null?__create(__getProtoOf(mod)):{};let to=isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target;for(let key of __getOwnPropNames(mod))if(!__hasOwnProp.call(to,key))__defProp(to,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(canCache)cache.set(mod,to);return to},__toCommonJS=(from)=>{var entry=(__moduleCache??=new WeakMap).get(from),desc;if(entry)return entry;if(entry=__defProp({},"__esModule",{value:!0}),from&&typeof from==="object"||typeof from==="function"){for(var key of __getOwnPropNames(from))if(!__hasOwnProp.call(entry,key))__defProp(entry,key,{get:__accessProp.bind(from,key),enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return __moduleCache.set(from,entry),entry},__moduleCache;var __returnValue=(v)=>v;function __exportSetter(name,newValue){this[name]=__returnValue.bind(null,newValue)}var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0,configurable:!0,set:__exportSetter.bind(all,name)})};var exports_alert_dialog={};__export(exports_alert_dialog,{createAlertDialogScope:()=>createAlertDialogScope,Trigger:()=>Trigger2,Title:()=>Title2,Root:()=>Root2,Portal:()=>Portal2,Overlay:()=>Overlay2,Description:()=>Description2,Content:()=>Content2,Cancel:()=>Cancel,AlertDialogTrigger:()=>AlertDialogTrigger,AlertDialogTitle:()=>AlertDialogTitle,AlertDialogPortal:()=>AlertDialogPortal,AlertDialogOverlay:()=>AlertDialogOverlay,AlertDialogDescription:()=>AlertDialogDescription,AlertDialogContent:()=>AlertDialogContent,AlertDialogCancel:()=>AlertDialogCancel,AlertDialogAction:()=>AlertDialogAction,AlertDialog:()=>AlertDialog,Action:()=>Action});module.exports=__toCommonJS(exports_alert_dialog);var import_compose_events=require("@loke/ui/compose-events"),import_compose_refs=require("@loke/ui/compose-refs"),import_context=require("@loke/ui/context"),DialogPrimitive=__toESM(require("@loke/ui/dialog")),import_dialog=require("@loke/ui/dialog"),import_slot=require("@loke/ui/slot"),import_react=require("react"),jsx_runtime=require("react/jsx-runtime"),ROOT_NAME="AlertDialog",[createAlertDialogContext,createAlertDialogScope]=import_context.createContextScope(ROOT_NAME,[import_dialog.createDialogScope]),useDialogScope=import_dialog.createDialogScope(),AlertDialog=(props)=>{let{__scopeAlertDialog,...alertDialogProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx_runtime.jsx(DialogPrimitive.Root,{...dialogScope,...alertDialogProps,modal:!0})};AlertDialog.displayName=ROOT_NAME;var TRIGGER_NAME="AlertDialogTrigger",AlertDialogTrigger=import_react.forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...triggerProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx_runtime.jsx(DialogPrimitive.Trigger,{...dialogScope,...triggerProps,ref:forwardedRef})});AlertDialogTrigger.displayName=TRIGGER_NAME;var PORTAL_NAME="AlertDialogPortal",AlertDialogPortal=(props)=>{let{__scopeAlertDialog,...portalProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx_runtime.jsx(DialogPrimitive.Portal,{...dialogScope,...portalProps})};AlertDialogPortal.displayName=PORTAL_NAME;var OVERLAY_NAME="AlertDialogOverlay",AlertDialogOverlay=import_react.forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...overlayProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx_runtime.jsx(DialogPrimitive.Overlay,{...dialogScope,...overlayProps,ref:forwardedRef})});AlertDialogOverlay.displayName=OVERLAY_NAME;var CONTENT_NAME="AlertDialogContent",[AlertDialogContentProvider,useAlertDialogContentContext]=createAlertDialogContext(CONTENT_NAME),Slottable=import_slot.createSlottable("AlertDialogContent"),AlertDialogContent=import_react.forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,children,...contentProps}=props,dialogScope=useDialogScope(__scopeAlertDialog),contentRef=import_react.useRef(null),composedRefs=import_compose_refs.useComposedRefs(forwardedRef,contentRef),cancelRef=import_react.useRef(null);return jsx_runtime.jsx(DialogPrimitive.WarningProvider,{contentName:CONTENT_NAME,docsSlug:"alert-dialog",titleName:TITLE_NAME,children:jsx_runtime.jsx(AlertDialogContentProvider,{cancelRef,scope:__scopeAlertDialog,children:jsx_runtime.jsxs(DialogPrimitive.Content,{role:"alertdialog",...dialogScope,...contentProps,onInteractOutside:(event)=>event.preventDefault(),onOpenAutoFocus:import_compose_events.composeEventHandlers(contentProps.onOpenAutoFocus,(event)=>{event.preventDefault(),cancelRef.current?.focus({preventScroll:!0})}),onPointerDownOutside:(event)=>event.preventDefault(),ref:composedRefs,children:[jsx_runtime.jsx(Slottable,{children}),process.env.NODE_ENV==="development"&&jsx_runtime.jsx(DescriptionWarning,{contentRef})]})})})});AlertDialogContent.displayName=CONTENT_NAME;var TITLE_NAME="AlertDialogTitle",AlertDialogTitle=import_react.forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...titleProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx_runtime.jsx(DialogPrimitive.Title,{...dialogScope,...titleProps,ref:forwardedRef})});AlertDialogTitle.displayName=TITLE_NAME;var DESCRIPTION_NAME="AlertDialogDescription",AlertDialogDescription=import_react.forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...descriptionProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx_runtime.jsx(DialogPrimitive.Description,{...dialogScope,...descriptionProps,ref:forwardedRef})});AlertDialogDescription.displayName=DESCRIPTION_NAME;var ACTION_NAME="AlertDialogAction",AlertDialogAction=import_react.forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...actionProps}=props,dialogScope=useDialogScope(__scopeAlertDialog);return jsx_runtime.jsx(DialogPrimitive.Close,{...dialogScope,...actionProps,ref:forwardedRef})});AlertDialogAction.displayName=ACTION_NAME;var CANCEL_NAME="AlertDialogCancel",AlertDialogCancel=import_react.forwardRef((props,forwardedRef)=>{let{__scopeAlertDialog,...cancelProps}=props,{cancelRef}=useAlertDialogContentContext(CANCEL_NAME,__scopeAlertDialog),dialogScope=useDialogScope(__scopeAlertDialog),ref=import_compose_refs.useComposedRefs(forwardedRef,cancelRef);return jsx_runtime.jsx(DialogPrimitive.Close,{...dialogScope,...cancelProps,ref})});AlertDialogCancel.displayName=CANCEL_NAME;var DescriptionWarning=({contentRef})=>{let MESSAGE=`\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users. You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog. Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@loke/ui/visually-hidden\` primitive as a wrapper around your description component. For more information, see https://design.loke.global/docs/components/alert-dialog`;return import_react.useEffect(()=>{if(!document.getElementById(contentRef.current?.getAttribute("aria-describedby")??""))console.warn(MESSAGE)},[MESSAGE,contentRef]),null},Root2=AlertDialog,Trigger2=AlertDialogTrigger,Portal2=AlertDialogPortal,Overlay2=AlertDialogOverlay,Content2=AlertDialogContent,Action=AlertDialogAction,Cancel=AlertDialogCancel,Title2=AlertDialogTitle,Description2=AlertDialogDescription;