import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{t as i}from"./Button-DqcfuOFN.js";import{t as a}from"./AlertDialog-Ch0EK-Yl.js";import{r as o}from"./AlertBannerAction-BKNUkKu8.js";import{t as s}from"./Dialog-B7WqtEle.js";var c,l,u,d,f,p,m,h,g;t((()=>{c=e(n(),1),o(),l=r(),{userEvent:u,expect:d,within:f,waitFor:p}=__STORYBOOK_MODULE_TEST__,m={title:`Guides/Composing Dialogs`,parameters:{preventIframeFromScrollingParent:!0,layout:`fullscreen`,docs:{story:{inline:!1,height:400},description:{component:`Dialogs are interactable in the same exact order they are shown, regardless of which are
dismissable or not.`}}}},h={render:function(){let[e,t]=(0,c.useState)(!1),[n,r]=(0,c.useState)(!1),[o,u]=(0,c.useState)(!1),[d,f]=(0,c.useState)(!1);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i,{onClick:()=>{t(!0),setTimeout(()=>r(!0),100),setTimeout(()=>u(!0),200),setTimeout(()=>f(!0),300)},children:`Open the nested dialogs`}),(0,l.jsx)(s,{open:e,onClose:()=>t(!1),title:`Dialog 1`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-1`},children:`Lorem ipsum`}),(0,l.jsxs)(a,{open:n,title:`Dialog 2`,description:void 0,dataset:{testid:`dialog-2`},children:[`Lorem ipsum`,(0,l.jsx)(a.Cancel,{variant:`tertiary`,onClick:()=>r(!1),children:`Close dialog 2`})]}),(0,l.jsx)(s,{open:o,onClose:()=>u(!1),title:`Dialog 3`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-3`},children:`Lorem ipsum`}),(0,l.jsxs)(a,{open:d,title:`Dialog 4`,description:void 0,dataset:{testid:`dialog-4`},children:[`Lorem ipsum`,(0,l.jsx)(a.Cancel,{variant:`tertiary`,onClick:()=>f(!1),children:`Close dialog 4`})]})]})},async play({canvasElement:e,step:t}){let n=f(e);await t(`Show the dialogs`,async()=>{let e=n.getByRole(`button`,{name:/Open the nested dialogs/});await u.click(e)}),await t(`Wait for all the dialogs to be rendered`,async()=>{d(await n.findByText(`Dialog 1`)).toBeInTheDocument(),d(await n.findByText(`Dialog 2`)).toBeInTheDocument(),d(await n.findByText(`Dialog 3`)).toBeInTheDocument(),d(await n.findByText(`Dialog 4`)).toBeInTheDocument()}),await t(`Close dialog 4`,async()=>{let e=n.getByRole(`button`,{name:/Close dialog 4/});await u.click(e),await p(async()=>{await d(await n.queryByText(/Dialog 4/i)).not.toBeInTheDocument()})}),await t(`Close dialog 3`,async()=>{let e=n.getByTestId(`dialog-3`).querySelector(`button`);if(!e)throw Error(`Dialog 3 close button not found`);await u.click(e),await p(async()=>{await d(await n.queryByText(/Dialog 3/i)).not.toBeInTheDocument()})}),await t(`Close dialog 2`,async()=>{let e=n.getByRole(`button`,{name:/Close dialog 2/});await u.click(e),await p(async()=>{await d(await n.queryByText(/Dialog 2/i)).not.toBeInTheDocument()})}),await t(`Close dialog 1`,async()=>{let e=n.getByTestId(`dialog-1`).querySelector(`button`);if(!e)throw Error(`Dialog 1 close button not found`);await u.click(e),await p(async()=>{await d(await n.queryByText(/Dialog 1/i)).not.toBeInTheDocument()})}),await t(`Show the dialogs`,async()=>{let e=n.getByRole(`button`,{name:/Open the nested dialogs/});await u.click(e)})}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
  render: function Story() {
    const [openDialog1, setOpenDialog1] = useState(false);
    const [openDialog2, setOpenDialog2] = useState(false);
    const [openDialog3, setOpenDialog3] = useState(false);
    const [openDialog4, setOpenDialog4] = useState(false);
    return <>
                <Button onClick={() => {
        setOpenDialog1(true);
        setTimeout(() => setOpenDialog2(true), 100);
        setTimeout(() => setOpenDialog3(true), 200);
        setTimeout(() => setOpenDialog4(true), 300);
      }}>
                    Open the nested dialogs
                </Button>
                <Dialog open={openDialog1} onClose={() => setOpenDialog1(false)} title={\`Dialog 1\`} description={undefined} leadingElement={undefined} dataset={{
        testid: \`dialog-1\`
      }}>
                    Lorem ipsum
                </Dialog>
                <AlertDialog open={openDialog2} title={\`Dialog 2\`} description={undefined} dataset={{
        testid: \`dialog-2\`
      }}>
                    Lorem ipsum
                    <AlertDialog.Cancel variant="tertiary" onClick={() => setOpenDialog2(false)}>
                        Close dialog 2
                    </AlertDialog.Cancel>
                </AlertDialog>
                <Dialog open={openDialog3} onClose={() => setOpenDialog3(false)} title={\`Dialog 3\`} description={undefined} leadingElement={undefined} dataset={{
        testid: \`dialog-3\`
      }}>
                    Lorem ipsum
                </Dialog>
                <AlertDialog open={openDialog4} title={\`Dialog 4\`} description={undefined} dataset={{
        testid: \`dialog-4\`
      }}>
                    Lorem ipsum
                    <AlertDialog.Cancel variant="tertiary" onClick={() => setOpenDialog4(false)}>
                        Close dialog 4
                    </AlertDialog.Cancel>
                </AlertDialog>
            </>;
  },
  async play({
    canvasElement,
    step
  }) {
    const canvas = within(canvasElement);
    await step('Show the dialogs', async () => {
      const openDialogsButton = canvas.getByRole('button', {
        name: /Open the nested dialogs/
      });
      await userEvent.click(openDialogsButton);
    });
    await step('Wait for all the dialogs to be rendered', async () => {
      const dialog1 = await canvas.findByText('Dialog 1');
      expect(dialog1).toBeInTheDocument();
      const dialog2 = await canvas.findByText('Dialog 2');
      expect(dialog2).toBeInTheDocument();
      const dialog3 = await canvas.findByText('Dialog 3');
      expect(dialog3).toBeInTheDocument();
      const dialog4 = await canvas.findByText('Dialog 4');
      expect(dialog4).toBeInTheDocument();
    });
    await step('Close dialog 4', async () => {
      const closeButton = canvas.getByRole('button', {
        name: /Close dialog 4/
      });
      await userEvent.click(closeButton);
      await waitFor(async () => {
        const dialog = await canvas.queryByText(/Dialog 4/i);
        await expect(dialog).not.toBeInTheDocument();
      });
    });
    await step('Close dialog 3', async () => {
      const closeButton = canvas.getByTestId('dialog-3').querySelector('button');
      if (!closeButton) throw new Error('Dialog 3 close button not found');
      await userEvent.click(closeButton);
      await waitFor(async () => {
        const dialog = await canvas.queryByText(/Dialog 3/i);
        await expect(dialog).not.toBeInTheDocument();
      });
    });
    await step('Close dialog 2', async () => {
      const closeButton = canvas.getByRole('button', {
        name: /Close dialog 2/
      });
      await userEvent.click(closeButton);
      await waitFor(async () => {
        const dialog = await canvas.queryByText(/Dialog 2/i);
        await expect(dialog).not.toBeInTheDocument();
      });
    });
    await step('Close dialog 1', async () => {
      const closeButton = canvas.getByTestId('dialog-1').querySelector('button');
      if (!closeButton) throw new Error('Dialog 1 close button not found');
      await userEvent.click(closeButton);
      await waitFor(async () => {
        const dialog = await canvas.queryByText(/Dialog 1/i);
        await expect(dialog).not.toBeInTheDocument();
      });
    });
    await step('Show the dialogs', async () => {
      const openDialogsButton = canvas.getByRole('button', {
        name: /Open the nested dialogs/
      });
      await userEvent.click(openDialogsButton);
    });
  }
}`,...h.parameters?.docs?.source}}},g=[`StackedDialogs`]}))();export{h as StackedDialogs,g as __namedExportsOrder,m as default};