function HZ(){return r.jsxs(et,{title:"Dialogs",lead:"Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.",module:"@rmwc/dialog",styles:["@material/dialog/dist/mdc.dialog.css","@material/button/dist/mdc.button.css","@material/ripple/dist/mdc.ripple.css"],docsLink:"https://material.io/develop/web/components/dialogs/",examples:FZ,children:[r.jsx(fe,{children:"Standard Usage"}),r.jsx(j,{children:function(){const[t,n]=q.useState(!1);return r.jsxs(r.Fragment,{children:[r.jsxs(vm,{open:t,onClose:a=>{console.log(a.detail.action),n(!1)},onClosed:a=>console.log(a.detail.action),children:[r.jsx(xm,{children:"Dialog Title"}),r.jsx(km,{children:"This is a standard dialog."}),r.jsxs(wm,{children:[r.jsx(pc,{action:"close",children:"Cancel"}),r.jsx(pc,{action:"accept",isDefaultAction:!0,children:"Sweet!"})]})]}),r.jsx(ye,{raised:!0,onClick:()=>n(!0),children:"Open standard Dialog"})]})}}),r.jsx(fe,{children:"Simplified Usage"}),r.jsx(ce,{children:"Material Dialogs are a complex component. RMWC contains an additional `SimpleDialog` component for ease of use that internally contains the default structure already built out. Illustrated below is both the standard and simple dialog usage."}),r.jsx(j,{children:function(){const[t,n]=q.useState(!1);return r.jsxs(r.Fragment,{children:[r.jsx(Mu,{title:"This is a simple dialog",body:"You can pass the body prop or children.",open:t,onClose:a=>{console.log(a.detail.action),n(!1)}}),r.jsx(ye,{raised:!0,onClick:()=>n(!0),children:"Open Simple Dialog"})]})}}),r.jsx(fe,{children:"Usage with DialogQueue"}),r.jsx(ce,{children:"Some dialog interactions are complex, but a lot of the time you just need a simple alert or confirm dialog. `DialogQueue` allows you to open dialogs from anywhere in your app and emulates the browsers built in `alert`, `confirm` and `prompt` dialogs. If you've used the `SnackbarQueue`, the `DialogQueue` is very similar."}),r.jsx(ce,{children:"Setup is nice and easy, create a queue object you can pass around in your code base, pass the queues `dialogs` to the `DialogQueue`component, and then use the `alert`, `prompt` or `confirm` api to open dialogs."}),r.jsx(j,{codeOnly:!0,children:`
        // Create a file that exports your queue
        // myQueue.js
        import { createDialogQueue } from '@rmwc/dialog';

        export const queue = createDialogQueue();
      `}),r.jsx(j,{codeOnly:!0,children:`
        // Somewhere at the top level of your app
        // Render the DialogQueue
        import React from 'react';
        import { queue } from './myQueue';

        export default function App() {
          return (
            <div>
              ...
              <DialogQueue
                dialogs={queue.dialogs}
                // You can also pass default options to pass to your dialogs
                // ie, prevent all dialogs from dismissing from a click on the background scrim
                preventOutsideDismiss
              />
            </div>
          )
        }
        
      `}),r.jsx(ce,{children:"The `alert`, `confirm`, and `prompt` functions were designed to mimic the the built-in browser methods with a couple of small difference. First, they all return a promise. The promise will always resolve successfully with the response indicating the appropriate action. `alert` the response will be `accept` for clicking the ok button, or `close`. `confirm` will resolve `true` or `false`, and `prompt` will resolve with the value entered into the input, or `null` if the closed the dialog. Second, all methods the methods accept any valid prop for `SimpleDialog`."}),r.jsx(j,{codeOnly:!0,children:`
        // Somewhere else in your app
        // Could be a view, your redux store, anywhere you want...
        import { queue } from './myQueue';

        queue.alert({
          title: 'Hi there',
          body: 'Whats going on?'
        });

        queue.confirm({
          title: <b>Are you positive?</b>,
          body: 'You have selected pizza instead icecream!',
          acceptLabel: 'CONFIRM'
        });

        queue.prompt({
          title: 'Whats your name?',
          body: 'Anything will do',
          acceptLabel: 'Submit',
          cancelLabel: 'Skip',
          // For prompts only, you can pass props to the input
          inputProps: {
            outlined: true
          }
        });
      `}),r.jsx(j,{label:"Inline Example",children:()=>{const{dialogs:e,alert:t,confirm:n,prompt:a}=JL();function s(){const[i,o]=q.useState("____________"),l=()=>t({title:"Hello!"}).then(d=>o(d)),u=()=>n({}).then(d=>o(d)),p=()=>a({inputProps:{outlined:!0}}).then(d=>o(d));return r.jsxs("div",{children:[r.jsx(ye,{label:"Alert",onClick:l}),r.jsx(ye,{label:"Confirm",onClick:u}),r.jsx(ye,{label:"Prompt",onClick:p}),r.jsx(ye,{label:"In Sequence",onClick:()=>{l(),u(),p()}}),r.jsxs("p",{children:["Response: ",r.jsx("b",{children:String(i)})]}),r.jsx(ZL,{dialogs:e})]})}return r.jsx(s,{})}}),r.jsx(fe,{children:"Rendering through Portals"}),r.jsx(ce,{children:"Occasionally, you may find your dialog being cut off from being inside a container that is styled to be `overflow:hidden`. RMWC provides a `renderToPortal` prop that lets you use React's portal functionality to render the menu dropdown in a different container."}),r.jsx(ce,{children:"You can specify any element or selector you want, but the simplest method is to pass `true` and use RMWC's built in `Portal` component."}),r.jsx(j,{codeOnly:!0,children:`
          // Somewhere at the top level of your app
          // Render the RMWC Portal
          // You only have to do this once
          import React from 'react';
          import { Portal } from '@rmwc/base';

          export default function App() {
            return (
              <div>
                ...
                <Portal />
              </div>
            )
          }
        `}),r.jsx(ce,{children:"Now you can use the `renderToPortal` prop. Below is a contrived example of a dialog being cut off due to `overflow: hidden`."}),r.jsx(j,{children:function(){const[t,n]=q.useState(!0),[a,s]=q.useState(!1);return r.jsxs("div",{id:"dialog-portal-example",style:{transform:"translateZ(0)",height:"20rem",overflow:"hidden"},children:[r.jsx(Mu,{title:`This is a ${t?"working!":"broken :/"}`,renderToPortal:t,body:"Use `renderToPortal` to get around `overflow:hidden` and layout issues.",open:a,onClose:i=>{console.log(i.detail.action),s(!1)}}),r.jsx(ye,{raised:!0,onClick:()=>{n(!1),s(!0)},children:"Open Broken :/"}),r.jsx(ye,{raised:!0,onClick:()=>{n(!0),s(!0)},children:"Open in Portal"})]})}}),r.jsx(nt,{src:UZ,components:[{displayName:"Dialog",component:vm},{displayName:"DialogTitle",component:xm},{displayName:"DialogContent",component:km},{displayName:"DialogActions",component:wm},{displayName:"DialogButton",component:pc},{displayName:"SimpleDialog",component:Mu}]})]})}
Wrapping a button in TouchTargetWrapper will automatically set its \`touch\` prop to true.