@preply/ds-docs 9.1.0 → 10.0.0

package/dist/assets/Dialog.stories-N8LTxdNu.js

@@ -0,0 +1,324 @@
+import{j as e,r as f}from"./iframe-DjYTJz7A.js";import{D as H}from"./Dialog-DaLOtRn0.js";import{s as q,D as Ne,a as ze}from"./DialogCloseButton-CDDeMFIL.js";import{B as r}from"./Button-DS2bg8PO.js";import{A as Me}from"./Avatar-Dlo9b83e.js";import{F as He}from"./TokyoUIInfo-BoGHBgEW.js";import{N as Ae}from"./NumberField-FWK2ErPL.js";import{I as Fe}from"./Icon-kphbe0CE.js";import{O as A}from"./OnboardingTooltip-DdKwzkB-.js";import{S as j,u as Ue}from"./Steps-CBqiqb-6.js";import{b as We,a as b}from"./DialogActions-_9FMsJ9P.js";import{w as P}from"./componentNames-hc9KR2nX.js";import{C as B}from"./Checkbox-Cmmcg7FL.js";import"./preload-helper-Dp1pzeXC.js";import"./useOpenInteractionType-B976GY1b.js";import"./index-CUvrBGJo.js";import"./TokyoUIClose-DoJfpCh8.js";import"./IconButton-D4lbFOKH.js";import"./render-icon-DZ6hllTG.js";import"./ButtonBase-sV1YoG7h.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BG27lVzS.js";import"./useMergeRefs-CL5DIjXV.js";import"./useHostname-By9vNKnQ.js";import"./index-CC6DAVyL.js";import"./shared-strings-ZccoNgto.js";import"./constants-5om8Ptru.js";import"./FormControl-DgD7Nr_L.js";import"./message-DiUVdAQd.js";import"./Input-Cp2OkxN8.js";import"./InputContainer-BlXlJbfJ.js";import"./text-accent-C5-m5mrW.js";import"./Text-C8DrHLQF.js";import"./text-centered-D70wah8Y.js";import"./Heading-BPJGe0Bg.js";import"./index-DOwxXd3L.js";import"./ProgressSteps-DCVAFT7X.js";const O=j,h=j.Step,_=j.Next,N=j.Previous;function z({primaryButton:n,nextButton:t=e.jsx(_,{}),previousButton:a=e.jsx(N,{})}){const{currentStep:i,totalSteps:m}=Ue(),x=i===1,S=i===m;return e.jsx(We,{children:e.jsxs("div",{className:q.stepControls,"data-preply-ds-component":P.DialogSteps,children:[!x&&e.jsx("div",{className:q.previous,"data-preply-ds-component":P.DialogStepsPreviousContainer,children:a}),e.jsx("div",{className:q.next,"data-preply-ds-component":P.DialogStepsNextContainer,children:S?n:t})]})})}try{z.displayName="DialogStepsActions",z.__docgenInfo={description:"Wrapper around the Steps actions for usage in Dialog.",displayName:"DialogStepsActions",props:{primaryButton:{defaultValue:null,description:`Primary action button.
+
+This button will be displayed on the last step.
+@example <DialogStepsActions
+ primaryButton={<Button size="medium" variant="primary" onClick={() => {}}>Finish</Button>}
+/>`,name:"primaryButton",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},nextButton:{defaultValue:{value:"<DialogStepsNext />"},description:`Next step button.
+
+This button will be used on all steps except the last one. When not provided, a default button will be used.
+@example <DialogStepsActions
+ nextButton={<DialogStepsNext onClick={() => {}}>Next</DialogStepsNext>}
+/>`,name:"nextButton",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},previousButton:{defaultValue:{value:"<DialogStepsPrevious />"},description:`Previous step button.
+
+This button will be used on all steps except the first one. When not provided, a default button will be used.
+@example <DialogStepsActions
+ previousButton={<DialogStepsPrevious onClick={() => {}}>Previous</DialogStepsPrevious>}
+/>`,name:"previousButton",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}}}}}catch{}try{O.displayName="DialogSteps",O.__docgenInfo={description:"",displayName:"DialogSteps",props:{"aria-label":{defaultValue:null,description:`A description of the step flow and its content for screen readers.
+@example 'Onboarding Steps', 'Checkout Steps', 'Survey Steps', etc.`,name:"aria-label",required:!0,type:{name:"string"}},initialStep:{defaultValue:{value:"1"},description:"The initial step to start at (from `1` to `children.length`).",name:"initialStep",required:!1,type:{name:"enum",value:[{value:"number"}]}},onStepChange:{defaultValue:null,description:`Optional callback to control navigation between steps.
+
+This is triggered either by using the \`Steps.Previous\` and \`Steps.Next\`
+components, or by calling \`goToPreviousStep\`, \`goToNextStep\`, or
+\`goToStep\` from the \`StepsContext\`.
+
+Can be used to:
+- Skip/redirect steps conditionally
+- Perform async process (e.g. validation) on step changes, marking the
+  element as busy/loading
+@param currentStep The current step (1-based)
+@param nextStep The next, incoming step
+@returns Promise that resolves to:
+- \`undefined\`: proceed with default navigation
+- \`number\`: override the destination step
+@example Add async validation
+const handleStepChange = async (current, next) => {
+await validateStep(current);
+return next;
+};
+@example Skip a step
+const handleStepChange = async (current, next) => {
+if (next === 2) return 3; // Skip step 2
+return next;
+};`,name:"onStepChange",required:!1,type:{name:"enum",value:[{value:"(currentStep: number, nextStep: number) => number | Promise<number | undefined> | undefined"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}try{h.displayName="DialogStep",h.__docgenInfo={description:"",displayName:"DialogStep",props:{title:{defaultValue:null,description:"Main heading for the step.",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:"Optional description text displayed below the title.",name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideHeader:{defaultValue:null,description:"If true, hides the step title and description.",name:"hideHeader",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},children:{defaultValue:null,description:"Step content.",name:"children",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}}}}}catch{}try{_.displayName="DialogStepsNext",_.__docgenInfo={description:"",displayName:"DialogStepsNext",props:{href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"ai"'},{value:'"critical"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"inverted"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"newFeature"'}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},as:{defaultValue:null,description:`Custom element to render the button.
+
+Allows rendering the button using a different React element or component.
+This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
+@example // Render as a react router link component
+import { Link } from 'react-router-dom';
+
+<ButtonBase as={<Link to="/home" />} />`,name:"as",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:"ResponsiveProp<ButtonSize>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
+@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
+
+<Button leadingSvgIcon={TokyoUITag}>Button</Button>
+or
+<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"leadingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},trailingSvgIcon:{defaultValue:null,description:`The trailing SVG icon.
+@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
+
+<Button trailingSvgIcon={TokyoUITag}>Button</Button>
+or
+<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"trailingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLAnchorElement | HTMLButtonElement | null) => void"},{value:"RefObject<HTMLAnchorElement | HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}try{N.displayName="DialogStepsPrevious",N.__docgenInfo={description:"",displayName:"DialogStepsPrevious",props:{href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"ai"'},{value:'"critical"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"inverted"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"newFeature"'}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},as:{defaultValue:null,description:`Custom element to render the button.
+
+Allows rendering the button using a different React element or component.
+This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
+@example // Render as a react router link component
+import { Link } from 'react-router-dom';
+
+<ButtonBase as={<Link to="/home" />} />`,name:"as",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:"ResponsiveProp<ButtonSize>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
+@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
+
+<Button leadingSvgIcon={TokyoUITag}>Button</Button>
+or
+<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"leadingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},trailingSvgIcon:{defaultValue:null,description:`The trailing SVG icon.
+@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
+
+<Button trailingSvgIcon={TokyoUITag}>Button</Button>
+or
+<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"trailingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLAnchorElement | HTMLButtonElement | null) => void"},{value:"RefObject<HTMLAnchorElement | HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const{action:l}=__STORYBOOK_MODULE_ACTIONS__,{expect:o,fn:M,userEvent:s,waitFor:d,within:F}=__STORYBOOK_MODULE_TEST__,u=()=>e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}});let _e=()=>{};const Le=(n,t)=>{const[a,i]=f.useState(t.args.open);_e=()=>i(!1);const m=()=>{var x,S;i(!1),(S=(x=t.args).onClose)==null||S.call(x)};return e.jsxs(e.Fragment,{children:[e.jsx(r,{dataset:{testid:"trigger"},onClick:()=>i(!0),children:"Open"}),e.jsx(n,{args:{...t.args,open:a,onClose:m}})]})},R={title:"Components/Dialog",component:H,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[Le],args:{open:!1,onClose:M(),children:e.jsx(u,{}),dataset:{testid:"dialog"}},play:async({canvas:n,step:t})=>{await t("Open dialog",async()=>{const a=n.getByTestId("trigger");return await s.click(a),d(()=>{o(n.getByTestId("dialog")).toBeVisible()})})}},w={args:{title:"Dialog title",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx(b,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:()=>{l("Primary button clicked"),_e()},children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},Ge=()=>{const[n,t]=f.useState(1);return e.jsxs(e.Fragment,{children:[e.jsx(Ae,{label:"Child count",value:n,onChange:a=>t(parseInt(a.target.value)),required:!0}),e.jsx("br",{}),Array.from({length:n},(a,i)=>e.jsx(u,{},i))]})},T={args:{title:"Height Responsiveness",description:"Change the number of children to see the Dialog style respond to the height change",children:e.jsxs(e.Fragment,{children:[e.jsx(Ge,{}),e.jsx(b,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},k={args:{title:"Height Respects Component Outlines",description:"Height respect, by leaving space for , components' outline created through the dedicated outline tokens.",children:e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[e.jsx(B,{checked:!0,dsInternalSimulation:"focus"}),e.jsx(B,{checked:!0,dsInternalSimulation:"focus"})]}),e.jsx(u,{}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[e.jsx(B,{checked:!0,dsInternalSimulation:"focus"}),e.jsx(B,{checked:!0,dsInternalSimulation:"focus"})]}),e.jsx(b,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},C={parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-s":{viewport:"medium-s"},"medium-l":{viewport:"medium-l"}}}},args:{title:"Mobile Full Height",mobileFullHeight:!0}},D={args:{title:"Dialog Title",description:"This is the dialog description.",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx(b,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"})})]})}},I={args:{title:"Dialog Title",description:"This is the dialog description.",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx(b,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},p=()=>e.jsxs(Ne,{open:!0,dataset:{testid:"dialog"},children:[e.jsx(ze,{}),e.jsx(e.Fragment,{children:e.jsxs(O,{"aria-label":"Onboarding Steps",children:[e.jsx(h,{title:"Profile",description:"Tell us more about yourself",children:e.jsx(u,{})}),e.jsx(h,{title:"Subject",description:"What do you want to learn?",children:e.jsx(u,{})}),e.jsx(h,{title:"Availability",description:"When are you available?",children:e.jsx(u,{})}),e.jsx(z,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"})})]})})]});p.play=async n=>{const{canvas:t,step:a}=n;await a("Dialog should be visible",async()=>{await d(()=>{o(t.getByTestId("dialog")).toBeVisible()})}),await a("Initially, only next button is present",async()=>{o(t.queryByRole("button",{name:"Next"})).toBeVisible(),o(t.queryByRole("button",{name:"Previous"})).not.toBeInTheDocument(),o(t.queryByRole("button",{name:"Primary"})).not.toBeInTheDocument()}),await a("Navigate to the next step. Previous/Next buttons are visible",async()=>{await s.click(t.getByRole("button",{name:"Next"})),o(t.queryByRole("button",{name:"Previous"})).toBeVisible(),o(t.queryByRole("button",{name:"Next"})).toBeVisible(),o(t.queryByRole("button",{name:"Primary"})).not.toBeInTheDocument()}),await a("Navigate to the last step. Previous/Primary buttons are visible",async()=>{await s.click(t.getByRole("button",{name:"Next"})),o(t.queryByRole("button",{name:"Previous"})).toBeVisible(),o(t.queryByRole("button",{name:"Primary"})).toBeVisible(),o(t.queryByRole("button",{name:"Next"})).not.toBeInTheDocument()})};const v={args:{leadingElement:e.jsx(Fe,{size:"32",svg:He}),title:"Information Dialog"}},y={args:{leadingElement:e.jsx(Me,{size:"48",alt:"User"}),title:"User Profile",description:"This dialog shows a user profile with an avatar in the title"}},c=n=>(f.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")}),[]),e.jsx("div",{style:{position:"relative",zIndex:99},children:e.jsx(H,{...n,title:"ZIndex Override"})}));c.parameters={docs:{source:{type:"code"}}};c.play=async({canvas:n,step:t})=>{await t("Open alert",async()=>(await s.click(n.getByTestId("trigger")),d(()=>{const a=n.getByTestId("dialog");o(a).toBeVisible()}))),await t("Check content's computed z-index",async()=>{const a=n.getByTestId("dialog"),i=getComputedStyle(a);o(i.zIndex).toBe("77")}),await t("Check overlay's computed z-index",async()=>{const a=n.getByTestId("dialog-overlay");if(!a)throw new Error("The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.");const i=getComputedStyle(a);o(i.zIndex).toBe("88")})};const E={uncontrolled:M(l("uncontrolled")),controlled:M(l("controlled"))},Ke=()=>{const[n,t]=f.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(A,{dataset:{testid:"uncontrolled-tooltip"},actionOnClick:E.uncontrolled,title:"Uncontrolled",text:"text",children:e.jsx(r,{children:"Uncontrolled"})}),e.jsx(A,{dataset:{testid:"controlled-tooltip"},actionOnClick:E.controlled,title:"Controlled",text:"text",disabled:!n,onClose:()=>t(!1),children:e.jsx(r,{onClick:()=>t(!0),children:"Open tooltip"})})]})},V={tags:["!autodocs"],args:{children:e.jsx(Ke,{})},play:async n=>{var m;await((m=R.play)==null?void 0:m.call(R,n));const{canvas:t,step:a}=n,i=t.getByTestId("uncontrolled-tooltip");await a("Uncontrolled tooltip should be visible",async()=>{await d(()=>{o(i).toBeVisible()})}),await a("Click on uncontrolled tooltip action",async()=>{await s.click(F(i).getByTestId("action")),o(E.uncontrolled).toHaveBeenCalledOnce()}),await a("Open controlled tooltip",async()=>{await s.click(t.getByRole("button",{name:"Open tooltip"})),await d(()=>{o(t.getByTestId("controlled-tooltip")).toBeVisible()})}),await a("Click on controlled tooltip action",async()=>{await s.click(F(t.getByTestId("controlled-tooltip")).getByTestId("action")),o(E.controlled).toHaveBeenCalledOnce()})}},U=({number:n,children:t})=>{const[a,i]=f.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(r,{onClick:()=>i(!0),dataset:{testid:`trigger-${n}`},children:"Open"}),e.jsx(H,{open:a,onClose:()=>i(!1),title:`Dialog ${n}`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-${n}`},children:t})]})},g={parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-s":{viewport:"medium-s"},"medium-l":{viewport:"medium-l"}}}},args:{title:"Dialog 1",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx("br",{}),e.jsx(U,{number:2,children:e.jsx(U,{number:3})})]})},play:async({canvas:n,step:t})=>{await t("Open dialog",async()=>{const a=n.getByTestId("trigger");return await s.click(a),d(()=>{o(n.getByTestId("dialog")).toBeVisible()})}),await t("Open dialog 2",async()=>{const a=n.getByTestId("trigger-2");return await s.click(a),d(()=>{o(n.getByTestId("dialog-2")).toBeVisible()})}),await t("Open dialog 3",async()=>{const a=n.getByTestId("trigger-3");return await s.click(a),d(()=>{o(n.getByTestId("dialog-3")).toBeVisible()})})}};var W,L,G;w.parameters={...w.parameters,docs:{...(W=w.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog title',
+    children: <>
+                <DummyContent />
+                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={() => {
+        action('Primary button clicked');
+        closeDialog();
+      }}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(G=(L=w.parameters)==null?void 0:L.docs)==null?void 0:G.source}}};var K,J,X;T.parameters={...T.parameters,docs:{...(K=T.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  args: {
+    title: 'Height Responsiveness',
+    description: 'Change the number of children to see the Dialog style respond to the height change',
+    children: <>
+                <DynamicChildren />
+                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(X=(J=T.parameters)==null?void 0:J.docs)==null?void 0:X.source}}};var Z,$,Y;k.parameters={...k.parameters,docs:{...(Z=k.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  args: {
+    title: \`Height Respects Component Outlines\`,
+    description: \`Height respect, by leaving space for , components' outline created through the dedicated outline tokens.\`,
+    children: <>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between'
+      }}>
+                    <Checkbox checked dsInternalSimulation="focus" />
+                    <Checkbox checked dsInternalSimulation="focus" />
+                </div>
+                <DummyContent />
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between'
+      }}>
+                    <Checkbox checked dsInternalSimulation="focus" />
+                    <Checkbox checked dsInternalSimulation="focus" />
+                </div>
+                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(Y=($=k.parameters)==null?void 0:$.docs)==null?void 0:Y.source}}};var Q,ee,te;C.parameters={...C.parameters,docs:{...(Q=C.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      modes: {
+        'narrow-l': {
+          viewport: 'narrow-l'
+        },
+        'medium-s': {
+          viewport: 'medium-s'
+        },
+        'medium-l': {
+          viewport: 'medium-l'
+        }
+      }
+    }
+  },
+  args: {
+    title: 'Mobile Full Height',
+    mobileFullHeight: true
+  }
+}`,...(te=(ee=C.parameters)==null?void 0:ee.docs)==null?void 0:te.source}}};var ne,ae,oe;D.parameters={...D.parameters,docs:{...(ne=D.parameters)==null?void 0:ne.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog Title',
+    description: 'This is the dialog description.',
+    children: <>
+                <DummyContent />
+                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} />
+            </>
+  }
+}`,...(oe=(ae=D.parameters)==null?void 0:ae.docs)==null?void 0:oe.source}}};var ie,re,le;I.parameters={...I.parameters,docs:{...(ie=I.parameters)==null?void 0:ie.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog Title',
+    description: 'This is the dialog description.',
+    children: <>
+                <DummyContent />
+                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(le=(re=I.parameters)==null?void 0:re.docs)==null?void 0:le.source}}};var se,ue,de,ce,me;p.parameters={...p.parameters,docs:{...(se=p.parameters)==null?void 0:se.docs,source:{originalSource:`() => {
+  return <DialogRoot open={true} dataset={{
+    testid: \`dialog\`
+  }}>
+            <DialogCloseButton />
+
+            <>
+                <DialogSteps aria-label="Onboarding Steps">
+                    <DialogStep title="Profile" description="Tell us more about yourself">
+                        <DummyContent />
+                    </DialogStep>
+                    <DialogStep title="Subject" description="What do you want to learn?">
+                        <DummyContent />
+                    </DialogStep>
+                    <DialogStep title="Availability" description="When are you available?">
+                        <DummyContent />
+                    </DialogStep>
+                    <DialogStepsActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                                Primary
+                            </Button>} />
+                </DialogSteps>
+            </>
+        </DialogRoot>;
+}`,...(de=(ue=p.parameters)==null?void 0:ue.docs)==null?void 0:de.source},description:{story:`The Dialog component can be used with the Steps component to create multi-step flows. This
+demonstrates how to use DialogRoot to build custom dialogs (in this case, a header-free dialog).`,...(me=(ce=p.parameters)==null?void 0:ce.docs)==null?void 0:me.description}}};var pe,ve,ye,ge,he;v.parameters={...v.parameters,docs:{...(pe=v.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+  args: {
+    leadingElement: <Icon size="32" svg={InfoIcon} />,
+    title: 'Information Dialog'
+  }
+}`,...(ye=(ve=v.parameters)==null?void 0:ve.docs)==null?void 0:ye.source},description:{story:"A dialog with an Icon component in the title. This demonstrates how to use React elements in the title.",...(he=(ge=v.parameters)==null?void 0:ge.docs)==null?void 0:he.description}}};var fe,be,xe,Se,Be;y.parameters={...y.parameters,docs:{...(fe=y.parameters)==null?void 0:fe.docs,source:{originalSource:`{
+  args: {
+    leadingElement: <Avatar size="48" alt="User" />,
+    title: 'User Profile',
+    description: 'This dialog shows a user profile with an avatar in the title'
+  }
+}`,...(xe=(be=y.parameters)==null?void 0:be.docs)==null?void 0:xe.source},description:{story:"A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title.",...(Be=(Se=y.parameters)==null?void 0:Se.docs)==null?void 0:Be.description}}};var we,Te,ke,Ce,De;c.parameters={...c.parameters,docs:{...(we=c.parameters)==null?void 0:we.docs,source:{originalSource:`args => {
+  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
+  }}>
+            <Dialog {...args} title="ZIndex Override" />
+        </div>;
+}`,...(ke=(Te=c.parameters)==null?void 0:Te.docs)==null?void 0:ke.source},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.`,...(De=(Ce=c.parameters)==null?void 0:Ce.docs)==null?void 0:De.description}}};var Ie,Ve,Ee;V.parameters={...V.parameters,docs:{...(Ie=V.parameters)==null?void 0:Ie.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    children: <ContentWithOnboardingTooltip />
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step
+    } = ctx;
+    const uncontrolledTooltip = canvas.getByTestId('uncontrolled-tooltip');
+    await step('Uncontrolled tooltip should be visible', async () => {
+      await waitFor(() => {
+        expect(uncontrolledTooltip).toBeVisible();
+      });
+    });
+    await step('Click on uncontrolled tooltip action', async () => {
+      await userEvent.click(within(uncontrolledTooltip).getByTestId('action'));
+      expect(onboardingTooltipCallbacks.uncontrolled).toHaveBeenCalledOnce();
+    });
+    await step('Open controlled tooltip', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Open tooltip'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByTestId('controlled-tooltip')).toBeVisible();
+      });
+    });
+    await step('Click on controlled tooltip action', async () => {
+      await userEvent.click(within(canvas.getByTestId('controlled-tooltip')).getByTestId('action'));
+      expect(onboardingTooltipCallbacks.controlled).toHaveBeenCalledOnce();
+    });
+  }
+}`,...(Ee=(Ve=V.parameters)==null?void 0:Ve.docs)==null?void 0:Ee.source}}};var je,qe,Pe,Re,Oe;g.parameters={...g.parameters,docs:{...(je=g.parameters)==null?void 0:je.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      modes: {
+        'narrow-l': {
+          viewport: 'narrow-l'
+        },
+        'medium-s': {
+          viewport: 'medium-s'
+        },
+        'medium-l': {
+          viewport: 'medium-l'
+        }
+      }
+    }
+  },
+  args: {
+    title: 'Dialog 1',
+    children: <>
+                <DummyContent />
+                <br />
+                <NestedDialogsLayer number={2}>
+                    <NestedDialogsLayer number={3} />
+                </NestedDialogsLayer>
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dialog', async () => {
+      const triggerButton = canvas.getByTestId('trigger');
+      await userEvent.click(triggerButton);
+      return waitFor(() => {
+        expect(canvas.getByTestId('dialog')).toBeVisible();
+      });
+    });
+    await step('Open dialog 2', async () => {
+      const triggerButton = canvas.getByTestId('trigger-2');
+      await userEvent.click(triggerButton);
+      return waitFor(() => {
+        expect(canvas.getByTestId('dialog-2')).toBeVisible();
+      });
+    });
+    await step('Open dialog 3', async () => {
+      const triggerButton = canvas.getByTestId('trigger-3');
+      await userEvent.click(triggerButton);
+      return waitFor(() => {
+        expect(canvas.getByTestId('dialog-3')).toBeVisible();
+      });
+    });
+  }
+}`,...(Pe=(qe=g.parameters)==null?void 0:qe.docs)==null?void 0:Pe.source},description:{story:`Each nested \`Dialog\` will be opened in a new stacking context, meaning that
+they will maintain their own focus, keyboard navigation, and light dismiss
+behavior without affecting the parent dialog
+
+They will each also have their own backdrop overlay.`,...(Oe=(Re=g.parameters)==null?void 0:Re.docs)==null?void 0:Oe.description}}};const jt=["Default","HeightResponsiveness","HeightRespectsComponentOutlines","MobileFullHeight","WithPrimaryAction","WithSecondaryAction","WithSteps","WithIcon","WithAvatar","WithZIndexOverride","WithOnboardingTooltipInside","NestedDialogs"];export{w as Default,k as HeightRespectsComponentOutlines,T as HeightResponsiveness,C as MobileFullHeight,g as NestedDialogs,y as WithAvatar,v as WithIcon,V as WithOnboardingTooltipInside,D as WithPrimaryAction,I as WithSecondaryAction,p as WithSteps,c as WithZIndexOverride,jt as __namedExportsOrder,R as default};

package/dist/assets/{Dialog.test.stories-DngMxsX4.js → Dialog.test.stories-tViVBTuF.js}

@@ -1,28 +1,28 @@
-import{j as c,r as Q}from"./iframe-CpMEswOF.js";import{D as X}from"./index-9rU-ZrVj.js";import{B as Z}from"./Button-KCBOR544.js";import"./preload-helper-Dp1pzeXC.js";import"./Steps-GOg1wsKY.js";import"./index-DT-MbRPK.js";import"./Heading-Bie8QWaf.js";import"./text-accent-DZ_ihUdH.js";import"./text-centered-DiwR-QSx.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-hc9KR2nX.js";import"./ProgressSteps-Dq6mpMpu.js";import"./Text-cq49jjad.js";import"./message-CTdBLxyt.js";import"./DialogTitle-DJPc1ITB.js";import"./TokyoUIClose-C1pVTvLz.js";import"./IconButton-DVKNd7ZK.js";import"./render-icon-c7okze1K.js";import"./ButtonBase-D1x6yeKi.js";import"./Spinner-lj2QA4al.js";import"./useMergeRefs-DkQLsYW4.js";import"./useHostname-BVhrcDgi.js";import"./index-CC6DAVyL.js";import"./shared-strings-BChji30Y.js";import"./useOpenInteractionType-BBP_TXgz.js";import"./DialogActions-DTUDyqFX.js";import"./Dialog-Bmg2gpCM.js";const{expect:r,fn:$,userEvent:p,waitFor:d}=__STORYBOOK_MODULE_TEST__,ee=()=>c.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),te=(e,t)=>{const[o,n]=Q.useState(t.args.open),s=()=>{var i,T;n(!1),(T=(i=t.args).onClose)==null||T.call(i)};return c.jsxs(c.Fragment,{children:[c.jsx(Z,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),c.jsx(e,{args:{...t.args,open:o,onClose:s}})]})},a={title:"Components/Dialog/Tests",component:X,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[te],args:{open:!1,onClose:$(),children:c.jsx(ee,{}),dataset:{testid:"dialog"}},play:async({canvas:e,step:t})=>{await t("Open dialog",async()=>{const o=e.getByTestId("trigger");return await p.click(o),d(()=>{r(e.getByTestId("dialog")).toBeVisible()})})}},g={tags:["!autodocs"],args:{size:"xs",title:"Extra Small Dialog"}},u={tags:["!autodocs"],args:{size:"sm",title:"Small Dialog"}},m={tags:["!autodocs"],args:{size:"md",title:"Medium Dialog"}},y={tags:["!autodocs"],args:{size:"lg",title:"Large Dialog"}},l={tags:["!autodocs"],args:{size:{_:"lg","wide-s":"xs"},title:"Width Responsiveness",description:"Change the window width to see the Dialog width respond to it"}},w={tags:["!autodocs"],args:{title:"Test Close Overlay"},play:async e=>{var s;await((s=a.play)==null?void 0:s.call(a,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog by clicking overlay",async()=>{const i=t.getByTestId("dialog-overlay");return await p.click(i),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))})}},C={tags:["!autodocs"],args:{title:"Test Close Focus"},play:async e=>{var s;await((s=a.play)==null?void 0:s.call(a,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog by pressing space",async()=>(await p.keyboard("{Enter}"),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))))}},v={tags:["!autodocs"],args:{title:"Test Close Keyboard"},play:async e=>{var s;await((s=a.play)==null?void 0:s.call(a,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog using escape key",async()=>(await p.keyboard("{Escape}"),d(()=>{r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()})))}},B={tags:["!autodocs"],args:{title:"Test Close Button"},play:async e=>{var s;await((s=a.play)==null?void 0:s.call(a,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog using close button",async()=>{const i=await t.findByLabelText("Close");return await p.click(i),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))})}};var x,h,D;g.parameters={...g.parameters,docs:{...(x=g.parameters)==null?void 0:x.docs,source:{originalSource:`{
+import{j as c,r as Q}from"./iframe-DjYTJz7A.js";import{B as X}from"./Button-DS2bg8PO.js";import{D as Z}from"./Dialog-DaLOtRn0.js";import"./preload-helper-Dp1pzeXC.js";import"./render-icon-DZ6hllTG.js";import"./ButtonBase-sV1YoG7h.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BG27lVzS.js";import"./useMergeRefs-CL5DIjXV.js";import"./useHostname-By9vNKnQ.js";import"./index-CC6DAVyL.js";import"./componentNames-hc9KR2nX.js";import"./DialogCloseButton-CDDeMFIL.js";import"./useOpenInteractionType-B976GY1b.js";import"./index-CUvrBGJo.js";import"./TokyoUIClose-DoJfpCh8.js";import"./IconButton-D4lbFOKH.js";import"./shared-strings-ZccoNgto.js";const{expect:r,fn:$,userEvent:d,waitFor:g}=__STORYBOOK_MODULE_TEST__,ee=()=>c.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),se=(e,s)=>{const[o,n]=Q.useState(s.args.open),a=()=>{var i,T;n(!1),(T=(i=s.args).onClose)==null||T.call(i)};return c.jsxs(c.Fragment,{children:[c.jsx(X,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),c.jsx(e,{args:{...s.args,open:o,onClose:a}})]})},t={title:"Components/Dialog/Tests",component:Z,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[se],args:{open:!1,onClose:$(),children:c.jsx(ee,{}),dataset:{testid:"dialog"}},play:async({canvas:e,step:s})=>{await s("Open dialog",async()=>{const o=e.getByTestId("trigger");return await d.click(o),g(()=>{r(e.getByTestId("dialog")).toBeVisible()})})}},p={tags:["!autodocs"],args:{size:"xs",title:"Extra Small Dialog"}},u={tags:["!autodocs"],args:{size:"sm",title:"Small Dialog"}},y={tags:["!autodocs"],args:{size:"md",title:"Medium Dialog"}},m={tags:["!autodocs"],args:{size:"lg",title:"Large Dialog"}},l={tags:["!autodocs"],args:{size:{_:"lg","wide-s":"xs"},title:"Width Responsiveness",description:"Change the window width to see the Dialog width respond to it"}},w={tags:["!autodocs"],args:{title:"Test Close Overlay"},play:async e=>{var a;await((a=t.play)==null?void 0:a.call(t,e));const{canvas:s,step:o,args:n}=e;await o("Close dialog by clicking overlay",async()=>{const i=s.getByTestId("dialog-overlay");return await d.click(i),g(async()=>(await r(s.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))})}},C={tags:["!autodocs"],args:{title:"Test Close Focus"},play:async e=>{var a;await((a=t.play)==null?void 0:a.call(t,e));const{canvas:s,step:o,args:n}=e;await o("Close dialog by pressing space",async()=>(await d.keyboard("{Enter}"),g(async()=>(await r(s.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))))}},v={tags:["!autodocs"],args:{title:"Test Close Keyboard"},play:async e=>{var a;await((a=t.play)==null?void 0:a.call(t,e));const{canvas:s,step:o,args:n}=e;await o("Close dialog using escape key",async()=>(await d.keyboard("{Escape}"),g(()=>{r(s.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()})))}},B={tags:["!autodocs"],args:{title:"Test Close Button"},play:async e=>{var a;await((a=t.play)==null?void 0:a.call(t,e));const{canvas:s,step:o,args:n}=e;await o("Close dialog using close button",async()=>{const i=await s.findByLabelText("Close");return await d.click(i),g(async()=>(await r(s.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))})}};var x,h,D;p.parameters={...p.parameters,docs:{...(x=p.parameters)==null?void 0:x.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   args: {
     size: 'xs',
     title: 'Extra Small Dialog'
   }
-}`,...(D=(h=g.parameters)==null?void 0:h.docs)==null?void 0:D.source}}};var b,I,S;u.parameters={...u.parameters,docs:{...(b=u.parameters)==null?void 0:b.docs,source:{originalSource:`{
+}`,...(D=(h=p.parameters)==null?void 0:h.docs)==null?void 0:D.source}}};var b,I,S;u.parameters={...u.parameters,docs:{...(b=u.parameters)==null?void 0:b.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   args: {
     size: 'sm',
     title: 'Small Dialog'
   }
-}`,...(S=(I=u.parameters)==null?void 0:I.docs)==null?void 0:S.source}}};var O,f,E;m.parameters={...m.parameters,docs:{...(O=m.parameters)==null?void 0:O.docs,source:{originalSource:`{
+}`,...(S=(I=u.parameters)==null?void 0:I.docs)==null?void 0:S.source}}};var O,f,E;y.parameters={...y.parameters,docs:{...(O=y.parameters)==null?void 0:O.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   args: {
     size: 'md',
     title: 'Medium Dialog'
   }
-}`,...(E=(f=m.parameters)==null?void 0:f.docs)==null?void 0:E.source}}};var k,z,F;y.parameters={...y.parameters,docs:{...(k=y.parameters)==null?void 0:k.docs,source:{originalSource:`{
+}`,...(E=(f=y.parameters)==null?void 0:f.docs)==null?void 0:E.source}}};var k,z,F;m.parameters={...m.parameters,docs:{...(k=m.parameters)==null?void 0:k.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   args: {
     size: 'lg',
     title: 'Large Dialog'
   }
-}`,...(F=(z=y.parameters)==null?void 0:z.docs)==null?void 0:F.source}}};var _,j,q,H,L;l.parameters={...l.parameters,docs:{...(_=l.parameters)==null?void 0:_.docs,source:{originalSource:`{
+}`,...(F=(z=m.parameters)==null?void 0:z.docs)==null?void 0:F.source}}};var _,j,q,H,L;l.parameters={...l.parameters,docs:{...(_=l.parameters)==null?void 0:_.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   args: {
     size: {
@@ -124,4 +124,4 @@ Use an object with breakpoints as keys to specify different sizes at different v
       });
     });
   }
-}`,...(N=(J=B.parameters)==null?void 0:J.docs)==null?void 0:N.source}}};const Ee=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","TestCloseOverlay","TestCloseFocus","TestCloseKeyboard","TestCloseButton"];export{g as ExtraSmall,y as Large,m as Medium,u as Small,B as TestCloseButton,C as TestCloseFocus,v as TestCloseKeyboard,w as TestCloseOverlay,l as WidthResponsiveness,Ee as __namedExportsOrder,a as default};
+}`,...(N=(J=B.parameters)==null?void 0:J.docs)==null?void 0:N.source}}};const Te=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","TestCloseOverlay","TestCloseFocus","TestCloseKeyboard","TestCloseButton"];export{p as ExtraSmall,m as Large,y as Medium,u as Small,B as TestCloseButton,C as TestCloseFocus,v as TestCloseKeyboard,w as TestCloseOverlay,l as WidthResponsiveness,Te as __namedExportsOrder,t as default};