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{n as i,t as a}from"./Button-DqcfuOFN.js";import{n as o,t as s}from"./AlertDialog-Ch0EK-Yl.js";var c,l,u,d,f,p,m,h,g,_,v,y,b;t((()=>{c=e(n(),1),o(),i(),l=r(),{expect:u,userEvent:d,waitFor:f}=__STORYBOOK_MODULE_TEST__,{action:p}=__STORYBOOK_MODULE_ACTIONS__,m={title:`Components/AlertDialog`,component:s,parameters:{preventIframeFromScrollingParent:!0,docs:{description:{component:`A modal alert dialog for confirming destructive or important actions.`},story:{inline:!1,height:300}}},play:async({canvas:e,step:t})=>{await t(`Open alert`,async()=>(await d.click(e.getByTestId(`alert-trigger`)),f(()=>{u(e.getByTestId(`alert-dialog`)).toBeVisible()})))}},h={parameters:{docs:{description:{story:"Uncontrolled alert using the `Trigger`, `Cancel`, and `Action` subcomponents."}}},args:{title:`Confirm`,description:`This action cannot be undone.`,dataset:{testid:`alert-dialog`}},render:function(e){return(0,l.jsxs)(s,{...e,children:[(0,l.jsx)(s.Trigger,{children:(0,l.jsx)(a,{dataset:{testid:`alert-trigger`},children:`Action`})}),(0,l.jsx)(s.Cancel,{variant:`tertiary`,onClick:p(`cancel`),children:`Cancel`}),(0,l.jsx)(s.Action,{onClick:p(`confirm`),children:`Confirm`})]})}},g={parameters:{docs:{description:{story:`Uncontrolled alert using the \`Trigger\`, and two \`Action\` subcomponents.

The two actions are styled differently to suggest a preferred action to the one the user has requested.

For example, in this case, the user is prompted to reschedule instead of canceling.`}}},args:{title:`Cancel Lesson`,description:`Your balance will not be refunded. Would you like to reschedule instead?`,dataset:{testid:`alert-dialog`}},render:function(e){return(0,l.jsxs)(s,{...e,children:[(0,l.jsx)(s.Trigger,{children:(0,l.jsx)(a,{variant:`critical`,dataset:{testid:`alert-trigger`},children:`Cancel Lesson`})}),(0,l.jsx)(s.Action,{variant:`ghost`,onClick:p(`cancel`),children:`Cancel lesson`}),(0,l.jsx)(s.Action,{variant:`secondary`,onClick:p(`reschedule`),children:`Reschedule`})]})}},_={parameters:{docs:{description:{story:"Fully controlled using custom `Buttons`."}}},args:{title:`Delete Account`,description:`This action cannot be undone.`,dataset:{testid:`alert-dialog`}},render:function(e){let[t,n]=(0,c.useState)(!1),r=()=>{n(!1),p(`account deleted`)()},i=()=>{n(!1),p(`deletion canceled`)()};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a,{onClick:()=>n(!0),dataset:{testid:`alert-trigger`},children:`Action`}),(0,l.jsxs)(s,{...e,open:t,children:[(0,l.jsx)(s.Cancel,{variant:`tertiary`,onClick:i,children:`Cancel`}),(0,l.jsx)(s.Action,{variant:`critical`,onClick:r,children:`Delete`})]})]})}},v={parameters:{docs:{description:{story:"Fully controlled using a single custom `Button`."}}},args:{title:`Payment failed`,description:`The page will refresh. Please try again.`,dataset:{testid:`alert-dialog`}},render:function(e){let[t,n]=(0,c.useState)(!1);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a,{onClick:()=>n(!0),dataset:{testid:`alert-trigger`},children:`Action`}),(0,l.jsx)(s,{...e,open:t,children:(0,l.jsx)(s.Action,{onClick:()=>{n(!1),p(`page refreshed`)()},children:`Refresh`})})]})}},y={parameters:{docs:{description:{story:`
The Dialog component provides CSS property escape hatches for controlling the z-index of both the overlay and content:

- \`--ds-dialog-overlay-z-index-override\`: Controls the overlay's z-index
- \`--ds-dialog-content-z-index-override\`: Controls the content's z-index

These should only be used when necessary, as proper stacking context isolation is preferred.

In the following example, the stacking order of the dialog trigger, overlay, and content are
reveresed using the above CSS properties.

Note: This is done using a \`useEffect\` just for the sake of the story. In a real-world scenario, this should ideally be done in a global stylesheet or a theme provider.
                `}}},args:{title:`Delete Account`,description:`This action cannot be undone.`,dataset:{testid:`alert-dialog`}},render:function(e){let[t,n]=(0,c.useState)(!1);return(0,c.useEffect)(()=>(document.body.style.setProperty(`--ds-dialog-overlay-z-index-override`,`88`),document.body.style.setProperty(`--ds-dialog-content-z-index-override`,`77`),()=>{document.body.style.removeProperty(`--ds-dialog-overlay-z-index-override`),document.body.style.removeProperty(`--ds-dialog-content-z-index-override`)}),[]),(0,l.jsxs)(`div`,{style:{position:`relative`,zIndex:99},children:[(0,l.jsx)(a,{dataset:{testid:`alert-trigger`},onClick:()=>n(!0),children:`Open`}),(0,l.jsxs)(s,{...e,open:t,children:[(0,l.jsx)(s.Cancel,{variant:`tertiary`,onClick:()=>n(!1),children:`Cancel`}),(0,l.jsx)(s.Action,{variant:`critical`,onClick:()=>n(!1),children:`Delete`})]})]})},play:async({canvas:e,step:t})=>{await t(`Open alert`,async()=>(await d.click(e.getByTestId(`alert-trigger`)),f(()=>{u(e.getByTestId(`alert-dialog`)).toBeVisible()}))),await t(`Check content's computed z-index`,async()=>{let t=e.getByTestId(`alert-dialog`);u(getComputedStyle(t).zIndex).toBe(`77`)}),await t(`Check overlay's computed z-index`,async()=>{let e=document.querySelectorAll(`[class^="overlay__"]`);if(!e)throw Error(`The overlay happened to be in the page, but it isn't anymore. Please update the selector or check if the overlay is properly rendered.`);if(e.length>1)throw Error(`There overlay happened to be unique, but it isn't anymore. Please update the selector or check why multiple overlays are rendered.`);let t=e[0];u(getComputedStyle(t).zIndex).toBe(`88`)})}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: \`Uncontrolled alert using the \\\`Trigger\\\`, \\\`Cancel\\\`, and \\\`Action\\\` subcomponents.\`
      }
    }
  },
  args: {
    title: 'Confirm',
    description: 'This action cannot be undone.',
    dataset: {
      testid: 'alert-dialog'
    }
  },
  render: function Story(props) {
    return <AlertDialog {...props}>
                <AlertDialog.Trigger>
                    <Button dataset={{
          testid: 'alert-trigger'
        }}>Action</Button>
                </AlertDialog.Trigger>
                <AlertDialog.Cancel variant="tertiary" onClick={action('cancel')}>
                    Cancel
                </AlertDialog.Cancel>
                <AlertDialog.Action onClick={action('confirm')}>Confirm</AlertDialog.Action>
            </AlertDialog>;
  }
}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: \`Uncontrolled alert using the \\\`Trigger\\\`, and two \\\`Action\\\` subcomponents.

The two actions are styled differently to suggest a preferred action to the one the user has requested.

For example, in this case, the user is prompted to reschedule instead of canceling.\`
      }
    }
  },
  args: {
    title: 'Cancel Lesson',
    description: 'Your balance will not be refunded. Would you like to reschedule instead?',
    dataset: {
      testid: 'alert-dialog'
    }
  },
  render: function Story(props) {
    return <AlertDialog {...props}>
                <AlertDialog.Trigger>
                    <Button variant="critical" dataset={{
          testid: 'alert-trigger'
        }}>
                        Cancel Lesson
                    </Button>
                </AlertDialog.Trigger>
                <AlertDialog.Action variant="ghost" onClick={action('cancel')}>
                    Cancel lesson
                </AlertDialog.Action>
                <AlertDialog.Action variant="secondary" onClick={action('reschedule')}>
                    Reschedule
                </AlertDialog.Action>
            </AlertDialog>;
  }
}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: 'Fully controlled using custom \`Buttons\`.'
      }
    }
  },
  args: {
    title: 'Delete Account',
    description: 'This action cannot be undone.',
    dataset: {
      testid: 'alert-dialog'
    }
  },
  render: function Story(props) {
    const [open, setOpen] = useState(false);
    const handleConfirm = () => {
      setOpen(false);
      action('account deleted')();
    };
    const handleCancel = () => {
      setOpen(false);
      action('deletion canceled')();
    };
    return <>
                <Button onClick={() => setOpen(true)} dataset={{
        testid: 'alert-trigger'
      }}>
                    Action
                </Button>
                <AlertDialog {...props} open={open}>
                    <AlertDialog.Cancel variant="tertiary" onClick={handleCancel}>
                        Cancel
                    </AlertDialog.Cancel>
                    <AlertDialog.Action variant="critical" onClick={handleConfirm}>
                        Delete
                    </AlertDialog.Action>
                </AlertDialog>
            </>;
  }
}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: 'Fully controlled using a single custom \`Button\`.'
      }
    }
  },
  args: {
    title: 'Payment failed',
    description: 'The page will refresh. Please try again.',
    dataset: {
      testid: 'alert-dialog'
    }
  },
  render: function Story(props) {
    const [open, setOpen] = useState(false);
    return <>
                <Button onClick={() => setOpen(true)} dataset={{
        testid: 'alert-trigger'
      }}>
                    Action
                </Button>
                <AlertDialog {...props} open={open}>
                    <AlertDialog.Action onClick={() => {
          setOpen(false);
          action('page refreshed')();
        }}>
                        Refresh
                    </AlertDialog.Action>
                </AlertDialog>
            </>;
  }
}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: \`
The Dialog component provides CSS property escape hatches for controlling the z-index of both the overlay and content:

- \\\`--ds-dialog-overlay-z-index-override\\\`: Controls the overlay's z-index
- \\\`--ds-dialog-content-z-index-override\\\`: Controls the content's z-index

These should only be used when necessary, as proper stacking context isolation is preferred.

In the following example, the stacking order of the dialog trigger, overlay, and content are
reveresed using the above CSS properties.

Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In a real-world scenario, this should ideally be done in a global stylesheet or a theme provider.
                \`
      }
    }
  },
  args: {
    title: 'Delete Account',
    description: 'This action cannot be undone.',
    dataset: {
      testid: 'alert-dialog'
    }
  },
  render: function Story(props) {
    const [open, setOpen] = useState(false);
    useEffect(() => {
      document.body.style.setProperty('--ds-dialog-overlay-z-index-override', '88');
      document.body.style.setProperty('--ds-dialog-content-z-index-override', '77');
      return () => {
        document.body.style.removeProperty('--ds-dialog-overlay-z-index-override');
        document.body.style.removeProperty('--ds-dialog-content-z-index-override');
      };
    }, []);
    return <div style={{
      position: 'relative',
      zIndex: 99
    }}>
                <Button dataset={{
        testid: 'alert-trigger'
      }} onClick={() => setOpen(true)}>
                    Open
                </Button>
                <AlertDialog {...props} open={open}>
                    <AlertDialog.Cancel variant="tertiary" onClick={() => setOpen(false)}>
                        Cancel
                    </AlertDialog.Cancel>
                    <AlertDialog.Action variant="critical" onClick={() => setOpen(false)}>
                        Delete
                    </AlertDialog.Action>
                </AlertDialog>
            </div>;
  },
  play: async ({
    canvas,
    step
  }) => {
    await step('Open alert', async () => {
      await userEvent.click(canvas.getByTestId('alert-trigger'));
      return waitFor(() => {
        const alert = canvas.getByTestId('alert-dialog');
        expect(alert).toBeVisible();
      });
    });
    await step(\`Check content's computed z-index\`, async () => {
      const alert = canvas.getByTestId('alert-dialog');
      const styles = getComputedStyle(alert);
      expect(styles.zIndex).toBe('77');
    });
    await step(\`Check overlay's computed z-index\`, async () => {
      const overlays = document.querySelectorAll('[class^="overlay__"]');
      if (!overlays) throw new Error(\`The overlay happened to be in the page, but it isn't anymore. Please update the selector or check if the overlay is properly rendered.\`);
      if (overlays.length > 1) throw new Error(\`There overlay happened to be unique, but it isn't anymore. Please update the selector or check why multiple overlays are rendered.\`);
      const overlay = overlays[0];
      const styles = getComputedStyle(overlay);
      expect(styles.zIndex).toBe('88');
    });
  }
}`,...y.parameters?.docs?.source}}},b=[`Uncontrolled`,`UncontrolledWithSuggestionAction`,`Controlled`,`ControlledWithSingleButton`,`WithZIndexOverride`]}))();export{_ as Controlled,v as ControlledWithSingleButton,h as Uncontrolled,g as UncontrolledWithSuggestionAction,y as WithZIndexOverride,b as __namedExportsOrder,m as default};