@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/DropdownMenu.stories-CPFPB_iw.js

@@ -0,0 +1,1613 @@
+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"./Icon-CfZyHxyH.js";import{n as ee,t as o}from"./Button-DnVrHohm.js";import{n as te,t as ne}from"./OnboardingTour-DGI3bTQy.js";import{n as re,t as ie}from"./Avatar-LEDcSb51.js";import{n as ae,t as oe}from"./IconButton-CUt4Aks_.js";import{n as se,t as ce}from"./CountryFlag-DMEPQuIc.js";import{n as le,t as ue}from"./Dialog-DCPUOQU4.js";import{n as de,t as fe}from"./Divider-BsdKe9ia.js";import{a as pe,c as s,i as c,l,n as me,o as he,r as u,s as d,t as f,u as ge}from"./DropdownMenu-BUteP_4e.js";import{n as _e,t as ve}from"./TokyoUIMessages-z4JOaU4E.js";import{n as ye,t as p}from"./TokyoUIEmojiFrowning-DEhH_o6k.js";import{i as be,n as xe,r as Se,t as Ce}from"./TokyoUISettings-D5pBmcYk.js";var m,h,g,_,v,y,we,b,Te,Ee,x,S,De,Oe,C,ke,w,Ae,je,Me,Ne,Pe,Fe,Ie,T,E,D,O,k,Le,A,j,M,N,P,F,I,L,R,z,Re,ze,Be,Ve,He,Ue,B,V,We,Ge,Ke,qe,Je,Ye,Xe,Ze,H,U,Qe,W,G,K,$e,q,J,Y,X,Z,et,Q,$,tt;t((()=>{m=e(n(),1),ge(),ee(),i(),be(),_e(),se(),re(),ye(),xe(),le(),de(),ae(),te(),h=r(),{fn:g,expect:_,userEvent:v,waitFor:y,within:we}=__STORYBOOK_MODULE_TEST__,b={onOpenChange:g(),items:{transferBalance:g(),addExtraHours:g(),currency:g(),language:g()}},Te={title:`Components/DropdownMenu`,component:f,subcomponents:{DropdownMenuItem:c,DropdownMenuGroup:u,DropdownSubmenu:l,DropdownMenuRadioGroup:pe,DropdownMenuRadioItem:he,DropdownMenuCheckboxItem:me,DropdownMenuSelect:d,DropdownMenuSelectOption:s},parameters:{preventIframeFromScrollingParent:!0,layout:`fullscreen`,docs:{story:{inline:!1,height:400,autoplay:!1}}},decorators:[(e,t)=>(0,h.jsx)(`div`,{style:{height:t.parameters.containerHeight||`100%`,padding:24,display:`flex`,justifyContent:`center`,alignItems:`center`},children:(0,h.jsx)(e,{})})],args:{onOpenChange:b.onOpenChange,trigger:(0,h.jsx)(o,{children:`Settings`}),children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours})]})}},Ee={tags:[`!autodocs`,`!dev`],args:{defaultOpen:!0}},x=_.anything(),S={play:async({canvas:e,step:t,args:n})=>{await t(`Initially closed`,async()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!0,x)}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!1,x)}),await t(`Open dropdown again`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Transfer balance"`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Transfer balance`})),_(b.items.transferBalance).toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(b.onOpenChange).toHaveBeenLastCalledWith(!1,x)})}},De={tags:[`!autodocs`],args:{defaultOpen:!0},play:async({canvas:e,step:t})=>{await t(`Initially open`,async()=>{await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(b.onOpenChange).toHaveBeenLastCalledWith(!1,x)})}},C={decorators:[(e,t)=>{let[n,r]=(0,m.useState)(!!t.args.open);Oe=r;let i=(e,n)=>{r(e),t.args.onOpenChange?.(e,n)};return(0,h.jsx)(e,{args:{...t.args,open:n,onOpenChange:i}})}],args:{open:!1},play:async({canvas:e,step:t,args:n})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!0,x)}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!1,x)}),await t(`Open dropdown via open prop`,async()=>{b.onOpenChange.mockClear(),Oe(!0),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()}),_(n.onOpenChange).not.toHaveBeenCalled()}),await t(`Close dropdown via open prop`,async()=>{b.onOpenChange.mockClear(),Oe(!1),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).not.toHaveBeenCalled()})}},ke={...C,tags:[`!autodocs`],args:{...C.args,open:!0},play:async({canvas:e,step:t,args:n})=>{await t(`Initially open`,async()=>{await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!1,x)})}},w={parameters:{containerHeight:`500px`},args:{side:`top`,align:`start`,defaultOpen:!0}},Ae={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-end`,defaultOpen:!0}},je={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-start`,defaultOpen:!0}},Me={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`left`,defaultOpen:!0}},Ne={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`right`,defaultOpen:!0}},Pe={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`top`,defaultOpen:!0}},Fe={tags:[`!autodocs`],args:{align:`start`,defaultOpen:!0}},Ie={tags:[`!autodocs`],args:{align:`end`,defaultOpen:!0}},T={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours,disabled:!0})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Add extra hours"`,async()=>{b.onOpenChange.mockClear();let t=e.getByRole(`menuitem`,{name:`Add extra hours`});_(t).toHaveAttribute(`aria-disabled`,`true`),await v.click(t),_(b.items.addExtraHours).not.toHaveBeenCalled(),_(b.onOpenChange).not.toHaveBeenCalled(),_(e.queryByRole(`menu`)).toBeVisible()})}},E={args:{trigger:(0,h.jsx)(o,{children:`Language`}),children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Español`,description:`Spanish`}),(0,h.jsx)(c,{label:`Українська`,description:`Ukrainian`})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Language`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Verify items a11y names and descriptions`,async()=>{let t=e.getByRole(`menuitem`,{name:`Español`});_(t).toHaveAccessibleName(`Español`),_(t).toHaveAccessibleDescription(`Spanish`);let n=e.getByRole(`menuitem`,{name:`Українська`});_(n).toHaveAccessibleName(`Українська`),_(n).toHaveAccessibleDescription(`Ukrainian`)})}},D={args:{defaultOpen:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(u,{label:`Region`,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]}),(0,h.jsxs)(u,{label:`Subscription`,children:[(0,h.jsx)(c,{label:`Transfer balance`}),(0,h.jsx)(c,{label:`Add extra hours`})]})]})}},O={args:{defaultOpen:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`User profile`}),(0,h.jsx)(c,{label:`Payments & subscriptions`}),(0,h.jsx)(fe,{}),(0,h.jsx)(c,{label:`Logout`})]})}},k={parameters:{docs:{story:{height:600}}},args:{defaultOpen:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(u,{label:`Icons`,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{svg:Se,size:`24`}),label:`Reschedule`}),(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{svg:ve,size:`24`}),label:`Message tutor`})]}),(0,h.jsxs)(u,{label:`Flags`,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ce,{code:`es`,alt:``,size:`medium`}),label:`Spain`}),(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ce,{code:`ua`,alt:``,size:`medium`}),label:`Ukraine`})]}),(0,h.jsxs)(u,{label:`Avatars`,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ie,{size:`24`}),label:`Kobe B.`}),(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ie,{size:`24`}),label:`Jenny R.`})]})]})}},Le=(0,m.forwardRef)(function({to:e,...t},n){return(0,h.jsx)(`a`,{href:e,...t,ref:n})}),Le.displayName=`Link`,A={findATutor:g(e=>{e.preventDefault()}),becomeATutor:g(e=>{e.preventDefault()}),myLessons:g(e=>{e.preventDefault()}),referAFriend:g(e=>{e.preventDefault()})},j={args:{trigger:(0,h.jsx)(o,{children:`Links`}),children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Find a Tutor`,onClick:A.findATutor,as:(0,h.jsx)(`a`,{href:`/en/online/english-tutors`})}),(0,h.jsx)(c,{label:`Become a Tutor`,onClick:A.becomeATutor,as:(0,h.jsx)(`a`,{href:`/en/teach`}),disabled:!0}),(0,h.jsx)(c,{label:`My Lessons`,onClick:A.myLessons,as:(0,h.jsx)(Le,{to:`/en/lessons`})}),(0,h.jsx)(c,{label:`Refer a Friend`,onClick:A.referAFriend,as:(0,h.jsx)(Le,{to:`/en/referral`}),disabled:!0})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Links`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Assert links are rendered correctly`,async()=>{let t=e.getByRole(`menuitem`,{name:`Find a Tutor`});_(t.tagName).toBe(`A`),_(t).toHaveAttribute(`href`,`/en/online/english-tutors`);let n=e.getByRole(`menuitem`,{name:`Become a Tutor`});_(n.tagName).toBe(`A`),_(n).toHaveAttribute(`href`,`/en/teach`),_(n).toHaveAttribute(`aria-disabled`,`true`);let r=e.getByRole(`menuitem`,{name:`My Lessons`});_(r.tagName).toBe(`A`),_(r).toHaveAttribute(`href`,`/en/lessons`);let i=e.getByRole(`menuitem`,{name:`Refer a Friend`});_(i.tagName).toBe(`A`),_(i).toHaveAttribute(`href`,`/en/referral`),_(i).toHaveAttribute(`aria-disabled`,`true`)}),await t(`Click on "Find a Tutor"`,async()=>{let t=e.getByRole(`menuitem`,{name:`Find a Tutor`});await v.click(t),_(A.findATutor).toHaveBeenCalled()}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Links`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Become a Tutor"`,async()=>{let t=e.getByRole(`menuitem`,{name:`Become a Tutor`});await y(()=>v.click(t)),_(A.becomeATutor).not.toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "My Lessons"`,async()=>{let t=e.getByRole(`menuitem`,{name:`My Lessons`});await v.click(t),_(A.myLessons).toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()})}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Links`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Refer a Friend"`,async()=>{let t=e.getByRole(`menuitem`,{name:`Refer a Friend`});await v.click(t),_(A.referAFriend).not.toHaveBeenCalled()})}},M={dayOfTheWeek:g(),timeOfTheDay:g(),frequency:g()},N={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(u,{label:`Day of the week`,children:(0,h.jsx)(pe,{defaultValue:`mon`,onValueChange:M.dayOfTheWeek,items:[{label:`Monday`,value:`mon`},{label:`Tuesday`,value:`tue`},{label:`Wednesday`,value:`wed`},{label:`Thursday`,value:`thu`},{label:`Friday`,value:`fri`},{label:`Saturday`,value:`sat`,disabled:!0},{label:`Sunday`,value:`sun`,disabled:!0}]})}),(0,h.jsx)(u,{label:`Time of the day`,children:(0,h.jsxs)(pe,{onValueChange:M.timeOfTheDay,children:[(0,h.jsx)(he,{label:`Morning`,value:`morning`}),(0,h.jsx)(he,{label:`Afternoon`,value:`afternoon`})]})}),(0,h.jsx)(u,{label:`Frequency`,children:(0,h.jsxs)(pe,{value:`once`,onValueChange:M.frequency,disabled:!0,children:[(0,h.jsx)(he,{label:`Once`,value:`once`}),(0,h.jsx)(he,{label:`Weekly`,value:`weekly`})]})})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitemradio`,{name:`Monday`}),r=e.getByRole(`menuitemradio`,{name:`Tuesday`}),i=e.getByRole(`menuitemradio`,{name:`Saturday`});await t(`Day of the week: default value is selected`,async()=>{_(n).toHaveAttribute(`aria-checked`,`true`)}),await t(`Click on "Tuesday"`,async()=>{await v.click(r),_(M.dayOfTheWeek).toHaveBeenCalledWith(`tue`),await y(()=>{_(n).toHaveAttribute(`aria-checked`,`false`),_(r).toHaveAttribute(`aria-checked`,`true`)})}),await t(`Click on "Saturday"`,async()=>{M.dayOfTheWeek.mockClear(),await v.click(i),_(M.dayOfTheWeek).not.toHaveBeenCalled(),await y(()=>{_(r).toHaveAttribute(`aria-checked`,`true`)})});let a=e.getByRole(`menuitemradio`,{name:`Morning`}),ee=e.getByRole(`menuitemradio`,{name:`Afternoon`});await t(`Time of the day: none is selected`,async()=>{_(a).toHaveAttribute(`aria-checked`,`false`),_(ee).toHaveAttribute(`aria-checked`,`false`)}),await t(`Click on "Morning"`,async()=>{await v.click(a),_(M.timeOfTheDay).toHaveBeenCalledWith(`morning`),await y(()=>{_(a).toHaveAttribute(`aria-checked`,`true`)})});let o=e.getByRole(`menuitemradio`,{name:`Once`}),te=e.getByRole(`menuitemradio`,{name:`Weekly`});await t(`Frequency: everything is disabled, once is selected`,async()=>{_(o).toHaveAttribute(`aria-disabled`,`true`),_(te).toHaveAttribute(`aria-disabled`,`true`),_(o).toHaveAttribute(`aria-checked`,`true`),_(te).toHaveAttribute(`aria-checked`,`false`)}),await t(`Click on "Weekly"`,async()=>{await v.click(te),_(M.frequency).not.toHaveBeenCalled(),await y(()=>{_(o).toHaveAttribute(`aria-checked`,`true`)})})}},P={email:g(),sms:g(),push:g(),alerts:g()},F={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(me,{label:`Email notifications`,onCheckedChange:P.email,defaultChecked:!0}),(0,h.jsx)(me,{label:`SMS notifications`,onCheckedChange:P.sms}),(0,h.jsx)(me,{label:`Push notifications`,onCheckedChange:P.push,disabled:!0}),(0,h.jsx)(me,{label:`System alerts (required)`,onCheckedChange:P.alerts,disabled:!0,checked:!0})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitemcheckbox`,{name:`Email notifications`}),r=e.getByRole(`menuitemcheckbox`,{name:`SMS notifications`}),i=e.getByRole(`menuitemcheckbox`,{name:`Push notifications`}),a=e.getByRole(`menuitemcheckbox`,{name:`System alerts (required)`});await t(`Email notifications is checked by default`,async()=>{_(n).toHaveAttribute(`aria-checked`,`true`)}),await t(`Uncheck "Email notifications"`,async()=>{await v.click(n),_(P.email).toHaveBeenCalledWith(!1,x),await y(()=>{_(n).toHaveAttribute(`aria-checked`,`false`)})}),await t(`"SMS notifications" is not checked`,async()=>{_(r).toHaveAttribute(`aria-checked`,`false`)}),await t(`Check "SMS notifications"`,async()=>{await v.click(r),_(P.sms).toHaveBeenCalledWith(!0,x),await y(()=>{_(r).toHaveAttribute(`aria-checked`,`true`)})}),await t(`"Push notifications" is disabled and not checked`,async()=>{_(i).toHaveAttribute(`aria-disabled`,`true`),_(i).toHaveAttribute(`aria-checked`,`false`)}),await t(`Click on "Push notifications"`,async()=>{await v.click(i),_(P.push).not.toHaveBeenCalled(),await y(()=>{_(i).toHaveAttribute(`aria-checked`,`false`)})}),await t(`"System alerts (required)" is disabled and checked`,async()=>{_(a).toHaveAttribute(`aria-disabled`,`true`),_(a).toHaveAttribute(`aria-checked`,`true`)}),await t(`Click on "System alerts (required)"`,async()=>{await v.click(a),_(P.alerts).not.toHaveBeenCalled(),await y(()=>{_(a).toHaveAttribute(`aria-checked`,`true`)})})}},I={dayOfTheWeek:g(),timeOfTheDay:g(),frequency:g()},L=e=>{let[t,n]=(0,m.useState)(`mon`),[r,i]=(0,m.useState)(),a=e=>{n(e),I.dayOfTheWeek(e)},ee=e=>{i(e),I.timeOfTheDay(e)};return(0,h.jsxs)(f,{...e,children:[(0,h.jsx)(d,{label:`Day of the week`,value:t,onValueChange:a,items:[{label:`Monday`,value:`mon`},{label:`Tuesday`,value:`tue`},{label:`Wednesday`,value:`wed`},{label:`Thursday`,value:`thu`},{label:`Friday`,value:`fri`},{label:`Saturday`,value:`sat`,disabled:!0},{label:`Sunday`,value:`sun`,disabled:!0}]}),(0,h.jsxs)(d,{label:`Time of the day`,defaultValue:r,onValueChange:ee,children:[(0,h.jsx)(s,{value:`morning`,label:`Morning`}),(0,h.jsx)(s,{value:`afternoon`,label:`Afternoon`})]}),(0,h.jsxs)(d,{label:`Frequency`,onValueChange:I.frequency,disabled:!0,children:[(0,h.jsx)(s,{label:`Once`,value:`once`}),(0,h.jsx)(s,{label:`Weekly`,value:`weekly`})]})]})},L.play=async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitem`,{name:/^Day of the week/});await t(`Day of the week: default value is selected`,async()=>{_(n).toHaveAccessibleName(/Selected: Monday$/)}),await t(`Open day of the week submenu`,async()=>{await v.hover(n),await y(()=>{_(e.queryByRole(`menu`,{name:/^Day of the week/})).toBeVisible()})}),await t(`Click on "Tuesday"`,async()=>{await v.click(e.getByRole(`menuitemradio`,{name:`Tuesday`})),_(I.dayOfTheWeek).toHaveBeenCalledWith(`tue`),await y(()=>{_(e.queryByRole(`menu`,{name:/^Day of the week/,hidden:!0})).not.toBeVisible(),_(n).toHaveAccessibleName(/Selected: Tuesday$/)})});let r=e.getByRole(`menuitem`,{name:/^Time of the day/});await t(`Time of the day: nothing is selected`,async()=>{_(r).toHaveAccessibleName(`Time of the day`)}),await t(`Open time of the day submenu`,async()=>{r.focus(),await v.keyboard(` `),await y(()=>{_(e.queryByRole(`menu`,{name:/^Time of the day/})).toBeVisible()})}),await t(`Click on "Morning"`,async()=>{await v.click(e.getByRole(`menuitemradio`,{name:`Morning`})),_(I.timeOfTheDay).toHaveBeenCalledWith(`morning`),await y(()=>{_(e.queryByRole(`menu`,{name:/^Time of the day/,hidden:!0})).not.toBeVisible(),_(r).toHaveAccessibleName(/Selected: Morning$/)})}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Frequency is disabled`,async()=>{let t=e.getByRole(`menuitem`,{name:`Frequency`});_(t).toHaveAttribute(`aria-disabled`,`true`),await v.click(t,{pointerEventsCheck:0}),_(I.frequency).not.toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`,{name:`Frequency`,hidden:!0})).not.toBeVisible()})})},R={render:function({align:e,side:t,...n}){return(0,h.jsx)(f,{...n,defaultOpen:!0,children:(0,h.jsxs)(d,{label:`Time of the day`,side:t,align:e,defaultOpen:!0,children:[(0,h.jsx)(s,{value:`morning`,label:`Morning`}),(0,h.jsx)(s,{value:`afternoon`,label:`Afternoon`})]})})},parameters:{containerHeight:`500px`},args:{side:`top`,align:`start`}},z={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-end`}},Re={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-start`,defaultOpen:!0}},ze={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`left`,defaultOpen:!0}},Be={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`right`,defaultOpen:!0}},Ve={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`top`,defaultOpen:!0}},He={render:R.render,tags:[`!autodocs`],args:{align:`start`,defaultOpen:!0}},Ue={render:R.render,tags:[`!autodocs`],args:{align:`end`,defaultOpen:!0}},B={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(l,{label:`Region`,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]}),(0,h.jsxs)(l,{label:`Subscription`,children:[(0,h.jsx)(c,{label:`Transfer balance`}),(0,h.jsx)(c,{label:`Add extra hours`})]}),(0,h.jsxs)(l,{label:`Integrations`,disabled:!0,children:[(0,h.jsx)(c,{label:`Connect calendar`}),(0,h.jsx)(c,{label:`Slack integration`}),(0,h.jsx)(c,{label:`Email sync`})]})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitem`,{name:`Region`});await t(`Region submenu opens on hover`,async()=>{await v.hover(n),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).toBeVisible()})}),await t(`Region submenu closes on hover out`,async()=>{await v.unhover(n),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).not.toBeInTheDocument()})}),await t(`Integrations submenu is disabled`,async()=>{let t=e.getByRole(`menuitem`,{name:`Integrations`});_(t).toHaveAttribute(`aria-disabled`,`true`),await v.click(t),await y(()=>{_(e.queryByRole(`menu`,{name:`Integrations`})).not.toBeInTheDocument()})})}},V={render:function({align:e,side:t,...n}){return(0,h.jsx)(f,{...n,defaultOpen:!0,children:(0,h.jsxs)(l,{label:`Region`,side:t,align:e,defaultOpen:!0,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]})})},parameters:{containerHeight:`500px`},args:{side:`top`,align:`start`}},We={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-end`}},Ge={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-start`,defaultOpen:!0}},Ke={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`left`,defaultOpen:!0}},qe={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`right`,defaultOpen:!0}},Je={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`top`,defaultOpen:!0}},Ye={render:V.render,tags:[`!autodocs`],args:{align:`start`,defaultOpen:!0}},Xe={render:V.render,tags:[`!autodocs`],args:{align:`end`,defaultOpen:!0}},{Provider:Ze,Step:H}=ne(),Ze.displayName=`Tour.Provider`,H.displayName=`Tour.Step`,U={parameters:{docs:{source:{type:`dynamic`}}},decorators:[e=>{let[t,n]=(0,m.useState)(0);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(e,{},t),(0,h.jsx)(`div`,{style:{position:`fixed`,left:0,bottom:0,margin:8},children:(0,h.jsx)(o,{variant:`ghost`,size:`small`,onClick:()=>n(t+1),children:`Reset story`})})]})}],render:function(){let[e,t]=(0,m.useState)(!1),[n,r]=(0,m.useState)(!1),[i,a]=(0,m.useState)(!1),ee=e=>{switch(e){case 1:t(!0);return;case 3:r(!0);return;case 5:a(!0);return}},o=()=>{t(!1),r(!1),a(!1)};return(0,h.jsx)(Ze,{totalSteps:6,onStepChange:ee,onComplete:o,onClose:o,children:(0,h.jsx)(H,{step:0,title:`New settings menu`,text:`All settings are now in one place.`,children:(0,h.jsxs)(f,{open:e,onOpenChange:t,trigger:(0,h.jsx)(oe,{svg:Ce,variant:`ghost`,assistiveText:`Settings`}),children:[(0,h.jsx)(H,{step:1,title:`Transfer balance`,text:`You can now transfer your balance to another tutor.`,side:`right`,children:(0,h.jsx)(c,{label:`Transfer balance`})}),(0,h.jsx)(c,{label:`Add extra hours`}),(0,h.jsx)(H,{step:2,title:`Region`,text:`Region settings are grouped together.`,side:`top`,children:(0,h.jsxs)(l,{label:`Region`,keepMounted:!0,open:n,onOpenChange:r,children:[(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(H,{step:3,title:`Time zone`,text:`You can now select your time zone.`,side:`right`,children:(0,h.jsx)(c,{label:`Time zone`})})]})}),(0,h.jsx)(H,{step:4,title:`Currency`,text:`Currency settings moved here.`,side:`right`,children:(0,h.jsxs)(d,{open:i,onOpenChange:a,defaultValue:`USD`,label:`Currency`,children:[(0,h.jsx)(s,{value:`USD`,label:`US Dollar`}),(0,h.jsx)(s,{value:`EUR`,label:`Euro`}),(0,h.jsx)(H,{step:5,title:`New currency!`,text:`Pay and receive payments in british pounds.`,children:(0,h.jsx)(s,{value:`GBP`,label:`British Pound`})})]})})]})})})},play:async({canvas:e,step:t})=>{await t(`Tour tooltip should be visible`,async()=>{await y(()=>{_(e.getByRole(`dialog`,{name:`New settings menu`})).toBeVisible()})}),await t(`Click Next to advance to second step`,async()=>{await v.click(e.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Transfer balance`})).toBeVisible(),_(e.getByRole(`menu`)).toBeVisible()})}),await t(`Click Next to advance to third step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Transfer balance`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Region`})).toBeVisible()})}),await t(`Click Next to advance to fourth step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Region`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Time zone`})).toBeVisible(),_(e.getByRole(`menu`,{name:`Region`})).toBeVisible()})}),await t(`Click Next to advance to fifth step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Time zone`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Currency`})).toBeVisible()})}),await t(`Click Next to advance to the last step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Currency`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`New currency!`})).toBeVisible(),_(e.getByRole(`menu`,{name:/Currency/})).toBeVisible()})}),await v.click(e.getByRole(`button`,{name:`Reset story`}))}},Qe=e=>{if(!e)return!1;let{top:t,left:n,bottom:r,right:i}=e.getBoundingClientRect();return!(t>=window.innerHeight||r<=0||n>=window.innerWidth||i<=0)},W={args:{keepMounted:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`}),(0,h.jsx)(c,{label:`Add extra hours`}),(0,h.jsxs)(l,{label:`Region`,keepMounted:!0,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]})]})},play:async({canvas:e,step:t})=>{let n=await e.findByRole(`menu`,{name:`Settings`,hidden:!0}),r=await e.findByRole(`menu`,{name:`Region`,hidden:!0});await t(`Menus are mounted, but not visible`,async()=>{_(n).toBeInTheDocument(),_(n).not.toBeVisible(),_(r).toBeInTheDocument(),_(r).not.toBeVisible()}),await t(`Open the menu`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(n).toBeVisible()})}),await t(`Submenu is visible`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Region`})),await y(()=>{_(r).toBeVisible()})}),await t(`Close the submenu.`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(r).not.toBeVisible()}),_(r).toBeInTheDocument()}),await t(`Close the menu.`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(n).not.toBeVisible()}),_(n).toBeInTheDocument()})}},G={args:B.args,globals:{viewport:{value:`narrow-l`,isRotated:!1}},parameters:{layout:`centered`},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Region"`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Region`})),await y(async()=>{_(Qe(e.queryByRole(`menu`,{name:`Settings`})),`Main menu should be hidden`).toBe(!1),_(Qe(e.queryByRole(`menu`,{name:`Region`})),`Submenu should be visible`).toBe(!0)})}),await t(`Tap away to return to main menu`,async()=>{let t=e.getByRole(`menu`,{name:`Region`}).closest(`[data-base-ui-portal]`).querySelector(`[data-backdrop]`);await v.click(t),await y(async()=>{_(Qe(e.queryByRole(`menu`,{name:`Region`})),`Submenu should be hidden`).toBe(!1),_(Qe(e.queryByRole(`menu`,{name:`Settings`})),`Main menu should be visible`).toBe(!0)})}),await t(`Tap away to close menu`,async()=>{await v.click(document.querySelector(`[data-backdrop]`)),await y(async()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()})})}},K={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours,disabled:!0}),(0,h.jsxs)(l,{label:`Region`,children:[(0,h.jsx)(c,{label:`Currency`,onClick:b.items.currency}),(0,h.jsx)(c,{label:`Language`,onClick:b.items.language}),(0,h.jsx)(c,{label:`Time zone`})]})]})},play:async({canvas:e,step:t})=>{let n=e.getByRole(`button`,{name:`Settings`});await t(`Focus on the trigger element`,async()=>{n.focus()}),await t(`Open the menu via Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()})}),await t(`Close the menu via Escape key. Trigger should be focused`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument(),_(n).toHaveFocus()})}),await t(`Open the menu via Space key. First item should be focused`,async()=>{await v.keyboard(` `),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()})}),await t(`Select the first item via Enter key. Menu should be closed and trigger should be focused`,async()=>{await v.keyboard(`{Enter}`),_(b.items.transferBalance).toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument(),_(n).toHaveFocus()})}),await t(`Open the menu via Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()})}),await t(`Navigate through the menu using Arrow keys`,async()=>{await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Add extra hours`})).toHaveFocus()}),await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()}),await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()}),await v.keyboard(`{ArrowUp}`),await v.keyboard(`{ArrowUp}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Add extra hours`})).toHaveFocus()})}),await t(`Enter key does nothing for disabled item`,async()=>{await v.keyboard(`{Enter}`),_(b.items.addExtraHours).not.toHaveBeenCalled()}),await t(`Space key does nothing for disabled item`,async()=>{await v.keyboard(` `),_(b.items.addExtraHours).not.toHaveBeenCalled()}),await t(`Navigate to submenu trigger using Arrow down key`,async()=>{await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open the submenu via Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Navigate back to main menu using Arrow left key. Submenu trigger should be focused`,async()=>{await v.keyboard(`{ArrowLeft}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open submenu using Arrow right key. First item should be focused`,async()=>{await v.keyboard(`{ArrowRight}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Navigate back to main menu using Escape key. Submenu trigger should be focused`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open submenu using Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Close the menu via Tab key. Trigger should be focused`,async()=>{await v.keyboard(`{Tab}`),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument(),_(n).toHaveFocus()})})}},$e={...K,globals:G.globals,parameters:G.parameters,tags:[`!autodocs`]},q={args:{defaultOpen:!0,children:(0,h.jsx)(h.Fragment,{children:Array.from({length:100}).map((e,t)=>(0,h.jsx)(c,{label:`Item ${t+1}`},t))})}},J=Array.from({length:5}).map(()=>`I won't use long labels for menu items.`).join(` `),Y={args:{defaultOpen:!0,children:(0,h.jsxs)(u,{label:J,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J}),(0,h.jsx)(l,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,children:(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J})}),(0,h.jsx)(d,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,defaultValue:`1`,children:(0,h.jsx)(s,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,value:`1`})}),(0,h.jsx)(me,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J}),(0,h.jsx)(pe,{defaultValue:`1`,children:(0,h.jsx)(he,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,value:`1`})})]})}},X={args:B.args,render:function(e){let[t,n]=(0,m.useState)(!1);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(o,{onClick:()=>n(!0),children:`Open dialog`}),(0,h.jsx)(ue,{open:t,onClose:()=>n(!1),title:`Dialog`,description:void 0,children:(0,h.jsx)(f,{...e})})]})},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{await v.click(e.getByRole(`button`,{name:`Open dialog`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Dialog`})).toBeVisible()})}),await t(`Open dropdown with mouse`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).toBeVisible()})}),await t(`Open Region submenu with mouse`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Region`})),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).toBeVisible()})}),await t(`Click on Currency item`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Currency`})),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).not.toBeInTheDocument()})}),await t(`Open dropdown with keyboard`,async()=>{e.getByRole(`button`,{name:`Settings`}).focus(),await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open Region submenu with keyboard`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Navigate to Language item with keyboard`,async()=>{await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Language`})).toHaveFocus()})}),await t(`Select Language item with keyboard`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).not.toBeInTheDocument()})}),await t(`Close dialog`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(e.queryByRole(`dialog`,{name:`Dialog`})).not.toBeInTheDocument()})})}},Z={render:function(e){let[t,n]=(0,m.useState)(!1);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(f,{...e,children:(0,h.jsx)(c,{label:`Open dialog`,onClick:()=>n(!0)})}),(0,h.jsx)(ue,{title:`Dialog`,description:void 0,open:t,onClose:()=>n(!1),children:`Dialog content`})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.getByRole(`menu`)).toBeVisible()})}),await t(`Open dialog`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Open dialog`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Dialog`})).toBeVisible()})}),await t(`Close dialog`,async()=>{await v.keyboard(`{Escape}`)})}},et=()=>{let[e,t]=(0,m.useState)(!1);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Open dialog`,onClick:()=>t(!0)}),(0,h.jsx)(ue,{title:`Dialog`,description:void 0,open:e,onClose:()=>t(!1),children:`Dialog content`})]})},Q={args:{keepMounted:!0,children:(0,h.jsx)(et,{})},play:Z.play},$={render:()=>(0,h.jsx)(f,{open:!0,trigger:(0,h.jsx)((0,m.forwardRef)((e,t)=>(0,h.jsx)(`button`,{...e,ref:t,children:`Button`})),{}),children:(0,h.jsxs)(pe,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours})]})})},Ee.parameters={...Ee.parameters,docs:{...Ee.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs', '!dev'],
+  args: {
+    defaultOpen: true
+  }
+}`,...Ee.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  play: async ({
+    canvas,
+    step,
+    args
+  }) => {
+    await step('Initially closed', async () => {
+      expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+    });
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+      expect(args.onOpenChange).toHaveBeenLastCalledWith(true, BaseUiEventDetails);
+    });
+    await step('Click outside to close the menu', async () => {
+      await userEvent.click(document.body);
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+      });
+      expect(args.onOpenChange).toHaveBeenLastCalledWith(false, BaseUiEventDetails);
+    });
+    await step('Open dropdown again', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Click on "Transfer balance"', async () => {
+      await userEvent.click(canvas.getByRole('menuitem', {
+        name: 'Transfer balance'
+      }));
+      expect(callbacks.items.transferBalance).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+      });
+      expect(callbacks.onOpenChange).toHaveBeenLastCalledWith(false, BaseUiEventDetails);
+    });
+  }
+}`,...S.parameters?.docs?.source},description:{story:"Dropdown menu is uncontrolled by default, managing its own open/closed state internally.\nUse the `defaultOpen` prop to set the initial open state.",...S.parameters?.docs?.description}}},De.parameters={...De.parameters,docs:{...De.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    defaultOpen: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Initially open', async () => {
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Click outside to close the menu', async () => {
+      await userEvent.click(document.body);
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+      });
+      expect(callbacks.onOpenChange).toHaveBeenLastCalledWith(false, BaseUiEventDetails);
+    });
+  }
+}`,...De.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  decorators: [(Story, ctx) => {
+    const [open, setOpen] = useState(!!ctx.args.open);
+    setOpenFromPlayFunction = setOpen;
+    const handleOpenChange: DropdownMenuProps['onOpenChange'] = (open, details) => {
+      setOpen(open);
+      ctx.args.onOpenChange?.(open, details);
+    };
+    return <Story args={{
+      ...ctx.args,
+      open,
+      onOpenChange: handleOpenChange
+    }} />;
+  }],
+  args: {
+    open: false
+  },
+  play: async ({
+    canvas,
+    step,
+    args
+  }) => {
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+      expect(args.onOpenChange).toHaveBeenLastCalledWith(true, BaseUiEventDetails);
+    });
+    await step('Click outside to close the menu', async () => {
+      await userEvent.click(document.body);
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+      });
+      expect(args.onOpenChange).toHaveBeenLastCalledWith(false, BaseUiEventDetails);
+    });
+    await step('Open dropdown via open prop', async () => {
+      callbacks.onOpenChange.mockClear();
+      setOpenFromPlayFunction(true);
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+      expect(args.onOpenChange).not.toHaveBeenCalled();
+    });
+    await step('Close dropdown via open prop', async () => {
+      callbacks.onOpenChange.mockClear();
+      setOpenFromPlayFunction(false);
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+      });
+      expect(args.onOpenChange).not.toHaveBeenCalled();
+    });
+  }
+}`,...C.parameters?.docs?.source},description:{story:"Use the `open` prop along with `onOpenChange` to make the dropdown menu controlled.\nThis gives you full control over the menu's open/closed state, useful for complex\ninteractions or when you need to coordinate the menu state with other UI elements.",...C.parameters?.docs?.description}}},ke.parameters={...ke.parameters,docs:{...ke.parameters?.docs,source:{originalSource:`{
+  ...Controlled,
+  tags: ['!autodocs'],
+  args: {
+    ...Controlled.args,
+    open: true
+  },
+  play: async ({
+    canvas,
+    step,
+    args
+  }) => {
+    await step('Initially open', async () => {
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Click outside to close the menu', async () => {
+      await userEvent.click(document.body);
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+      });
+      expect(args.onOpenChange).toHaveBeenLastCalledWith(false, BaseUiEventDetails);
+    });
+  }
+}`,...ke.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    containerHeight: '500px'
+  },
+  args: {
+    side: 'top',
+    align: 'start',
+    defaultOpen: true
+  }
+}`,...w.parameters?.docs?.source},description:{story:"Use the `side` and `align` props to control where the menu appears relative to the trigger.\nThe `side` prop determines which side of the trigger the menu opens on,\nwhile `align` controls alignment along that side.\nThe menu might automatically reposition to avoid viewport collisions.",...w.parameters?.docs?.description}}},Ae.parameters={...Ae.parameters,docs:{...Ae.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'inline-end',
+    defaultOpen: true
+  }
+}`,...Ae.parameters?.docs?.source}}},je.parameters={...je.parameters,docs:{...je.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'inline-start',
+    defaultOpen: true
+  }
+}`,...je.parameters?.docs?.source}}},Me.parameters={...Me.parameters,docs:{...Me.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'left',
+    defaultOpen: true
+  }
+}`,...Me.parameters?.docs?.source}}},Ne.parameters={...Ne.parameters,docs:{...Ne.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'right',
+    defaultOpen: true
+  }
+}`,...Ne.parameters?.docs?.source}}},Pe.parameters={...Pe.parameters,docs:{...Pe.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'top',
+    defaultOpen: true
+  }
+}`,...Pe.parameters?.docs?.source}}},Fe.parameters={...Fe.parameters,docs:{...Fe.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    align: 'start',
+    defaultOpen: true
+  }
+}`,...Fe.parameters?.docs?.source}}},Ie.parameters={...Ie.parameters,docs:{...Ie.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    align: 'end',
+    defaultOpen: true
+  }
+}`,...Ie.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: <>
+                <DropdownMenuItem label="Transfer balance" onClick={callbacks.items.transferBalance} />
+                <DropdownMenuItem label="Add extra hours" onClick={callbacks.items.addExtraHours} disabled />
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Click on "Add extra hours"', async () => {
+      callbacks.onOpenChange.mockClear();
+      const addExtraHours = canvas.getByRole('menuitem', {
+        name: 'Add extra hours'
+      });
+      expect(addExtraHours).toHaveAttribute('aria-disabled', 'true');
+      await userEvent.click(addExtraHours);
+      expect(callbacks.items.addExtraHours).not.toHaveBeenCalled();
+      expect(callbacks.onOpenChange).not.toHaveBeenCalled();
+      expect(canvas.queryByRole('menu')).toBeVisible();
+    });
+  }
+}`,...T.parameters?.docs?.source},description:{story:`Menu items can be disabled to prevent user interaction. Disabled items are visually
+distinguished and cannot be clicked or selected, useful for showing unavailable options
+or actions that require certain conditions to be met.`,...T.parameters?.docs?.description}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  args: {
+    trigger: <Button>Language</Button>,
+    children: <>
+                <DropdownMenuItem label="Español" description="Spanish" />
+                <DropdownMenuItem label="Українська" description="Ukrainian" />
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Language'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Verify items a11y names and descriptions', async () => {
+      const spanishItem = canvas.getByRole('menuitem', {
+        name: 'Español'
+      });
+      expect(spanishItem).toHaveAccessibleName('Español');
+      expect(spanishItem).toHaveAccessibleDescription('Spanish');
+      const ukrainianItem = canvas.getByRole('menuitem', {
+        name: 'Українська'
+      });
+      expect(ukrainianItem).toHaveAccessibleName('Українська');
+      expect(ukrainianItem).toHaveAccessibleDescription('Ukrainian');
+    });
+  }
+}`,...E.parameters?.docs?.source},description:{story:`Menu items can display additional context below the label using the \`description\` prop.
+This is particularly useful for language selectors, settings options, or any scenario
+where extra information helps users make informed choices.`,...E.parameters?.docs?.description}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  args: {
+    defaultOpen: true,
+    children: <>
+                <DropdownMenuGroup label="Region">
+                    <DropdownMenuItem label="Currency" />
+                    <DropdownMenuItem label="Language" />
+                    <DropdownMenuItem label="Time zone" />
+                </DropdownMenuGroup>
+                <DropdownMenuGroup label="Subscription">
+                    <DropdownMenuItem label="Transfer balance" />
+                    <DropdownMenuItem label="Add extra hours" />
+                </DropdownMenuGroup>
+            </>
+  }
+}`,...D.parameters?.docs?.source},description:{story:`Organize related menu items into logical sections using \`DropdownMenuGroup\`. Groups have
+a label and visually separate different categories of actions or options. This improves
+scannability and helps users quickly find what they're looking for in longer menus.`,...D.parameters?.docs?.description}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
+  args: {
+    defaultOpen: true,
+    children: <>
+                <DropdownMenuItem label="User profile" />
+                <DropdownMenuItem label="Payments & subscriptions" />
+                <Divider />
+                <DropdownMenuItem label="Logout" />
+            </>
+  }
+}`,...O.parameters?.docs?.source},description:{story:`In some cases, you might want to separate outstanding items without creating a labeled group.
+Use dividers to create subtle visual separation, particularly useful for isolating destructive
+or important actions (like logout or delete) from regular options. Dividers provide a lightweight
+way to organize menus when explicit group labels would be unnecessary or too verbose.`,...O.parameters?.docs?.description}}},k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      story: {
+        height: 600
+      }
+    }
+  },
+  args: {
+    defaultOpen: true,
+    children: <>
+                <DropdownMenuGroup label="Icons">
+                    <DropdownMenuItem leadingElement={<Icon svg={RescheduleSvg} size="24" />} label="Reschedule" />
+                    <DropdownMenuItem leadingElement={<Icon svg={MessageSvg} size="24" />} label="Message tutor" />
+                </DropdownMenuGroup>
+                <DropdownMenuGroup label="Flags">
+                    <DropdownMenuItem leadingElement={<CountryFlag code="es" alt="" size="medium" />} label="Spain" />
+                    <DropdownMenuItem leadingElement={<CountryFlag code="ua" alt="" size="medium" />} label="Ukraine" />
+                </DropdownMenuGroup>
+                <DropdownMenuGroup label="Avatars">
+                    <DropdownMenuItem leadingElement={<Avatar size="24" />} label="Kobe B." />
+                    <DropdownMenuItem leadingElement={<Avatar size="24" />} label="Jenny R." />
+                </DropdownMenuGroup>
+            </>
+  }
+}`,...k.parameters?.docs?.source},description:{story:`Enhance menu items with visual context using the \`leadingElement\` prop. You can add icons
+to indicate actions, flags to represent countries or languages, or avatars to show users.
+Leading elements help users quickly identify and distinguish between different menu options.`,...k.parameters?.docs?.description}}},j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
+  args: {
+    trigger: <Button>Links</Button>,
+    children: <>
+                <DropdownMenuItem label="Find a Tutor" onClick={linksCallbacks.findATutor} as={<a href="/en/online/english-tutors" />} />
+                <DropdownMenuItem label="Become a Tutor" onClick={linksCallbacks.becomeATutor} as={<a href="/en/teach" />} disabled />
+                <DropdownMenuItem label="My Lessons" onClick={linksCallbacks.myLessons} as={<Link to="/en/lessons" />} />
+                <DropdownMenuItem label="Refer a Friend" onClick={linksCallbacks.referAFriend} as={<Link to="/en/referral" />} disabled />
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Links'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Assert links are rendered correctly', async () => {
+      const findATutor = canvas.getByRole('menuitem', {
+        name: 'Find a Tutor'
+      });
+      expect(findATutor.tagName).toBe('A');
+      expect(findATutor).toHaveAttribute('href', '/en/online/english-tutors');
+      const becomeATutor = canvas.getByRole('menuitem', {
+        name: 'Become a Tutor'
+      });
+      expect(becomeATutor.tagName).toBe('A');
+      expect(becomeATutor).toHaveAttribute('href', '/en/teach');
+      expect(becomeATutor).toHaveAttribute('aria-disabled', 'true');
+      const myLessons = canvas.getByRole('menuitem', {
+        name: 'My Lessons'
+      });
+      expect(myLessons.tagName).toBe('A');
+      expect(myLessons).toHaveAttribute('href', '/en/lessons');
+      const referAFriend = canvas.getByRole('menuitem', {
+        name: 'Refer a Friend'
+      });
+      expect(referAFriend.tagName).toBe('A');
+      expect(referAFriend).toHaveAttribute('href', '/en/referral');
+      expect(referAFriend).toHaveAttribute('aria-disabled', 'true');
+    });
+    await step('Click on "Find a Tutor"', async () => {
+      const findATutor = canvas.getByRole('menuitem', {
+        name: 'Find a Tutor'
+      });
+      await userEvent.click(findATutor);
+      expect(linksCallbacks.findATutor).toHaveBeenCalled();
+    });
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Links'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Click on "Become a Tutor"', async () => {
+      const becomeATutor = canvas.getByRole('menuitem', {
+        name: 'Become a Tutor'
+      });
+      await waitFor(() => userEvent.click(becomeATutor));
+      expect(linksCallbacks.becomeATutor).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Click on "My Lessons"', async () => {
+      const myLessons = canvas.getByRole('menuitem', {
+        name: 'My Lessons'
+      });
+      await userEvent.click(myLessons);
+      expect(linksCallbacks.myLessons).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+      });
+    });
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Links'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Click on "Refer a Friend"', async () => {
+      const referAFriend = canvas.getByRole('menuitem', {
+        name: 'Refer a Friend'
+      });
+      await userEvent.click(referAFriend);
+      expect(linksCallbacks.referAFriend).not.toHaveBeenCalled();
+    });
+  }
+}`,...j.parameters?.docs?.source},description:{story:"You can use the `as` prop to render a custom element for the menu item.\nYou can use that to render anchors or custom link components (e.g. Next.js or React Router Link)",...j.parameters?.docs?.description}}},N.parameters={...N.parameters,docs:{...N.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: <>
+                <DropdownMenuGroup label="Day of the week">
+                    <DropdownMenuRadioGroup defaultValue="mon" onValueChange={radioCallbacks.dayOfTheWeek} items={[{
+          label: 'Monday',
+          value: 'mon'
+        }, {
+          label: 'Tuesday',
+          value: 'tue'
+        }, {
+          label: 'Wednesday',
+          value: 'wed'
+        }, {
+          label: 'Thursday',
+          value: 'thu'
+        }, {
+          label: 'Friday',
+          value: 'fri'
+        }, {
+          label: 'Saturday',
+          value: 'sat',
+          disabled: true
+        }, {
+          label: 'Sunday',
+          value: 'sun',
+          disabled: true
+        }]} />
+                </DropdownMenuGroup>
+                <DropdownMenuGroup label="Time of the day">
+                    <DropdownMenuRadioGroup onValueChange={radioCallbacks.timeOfTheDay}>
+                        <DropdownMenuRadioItem label="Morning" value="morning" />
+                        <DropdownMenuRadioItem label="Afternoon" value="afternoon" />
+                    </DropdownMenuRadioGroup>
+                </DropdownMenuGroup>
+                <DropdownMenuGroup label="Frequency">
+                    <DropdownMenuRadioGroup value="once" onValueChange={radioCallbacks.frequency} disabled>
+                        <DropdownMenuRadioItem label="Once" value="once" />
+                        <DropdownMenuRadioItem label="Weekly" value="weekly" />
+                    </DropdownMenuRadioGroup>
+                </DropdownMenuGroup>
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    const monday = canvas.getByRole('menuitemradio', {
+      name: 'Monday'
+    });
+    const tuesday = canvas.getByRole('menuitemradio', {
+      name: 'Tuesday'
+    });
+    const saturday = canvas.getByRole('menuitemradio', {
+      name: 'Saturday'
+    });
+    await step('Day of the week: default value is selected', async () => {
+      expect(monday).toHaveAttribute('aria-checked', 'true');
+    });
+    await step('Click on "Tuesday"', async () => {
+      await userEvent.click(tuesday);
+      expect(radioCallbacks.dayOfTheWeek).toHaveBeenCalledWith('tue');
+      await waitFor(() => {
+        expect(monday).toHaveAttribute('aria-checked', 'false');
+        expect(tuesday).toHaveAttribute('aria-checked', 'true');
+      });
+    });
+    await step('Click on "Saturday"', async () => {
+      radioCallbacks.dayOfTheWeek.mockClear();
+      await userEvent.click(saturday);
+      expect(radioCallbacks.dayOfTheWeek).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(tuesday).toHaveAttribute('aria-checked', 'true');
+      });
+    });
+    const morning = canvas.getByRole('menuitemradio', {
+      name: 'Morning'
+    });
+    const afternoon = canvas.getByRole('menuitemradio', {
+      name: 'Afternoon'
+    });
+    await step('Time of the day: none is selected', async () => {
+      expect(morning).toHaveAttribute('aria-checked', 'false');
+      expect(afternoon).toHaveAttribute('aria-checked', 'false');
+    });
+    await step('Click on "Morning"', async () => {
+      await userEvent.click(morning);
+      expect(radioCallbacks.timeOfTheDay).toHaveBeenCalledWith('morning');
+      await waitFor(() => {
+        expect(morning).toHaveAttribute('aria-checked', 'true');
+      });
+    });
+    const once = canvas.getByRole('menuitemradio', {
+      name: 'Once'
+    });
+    const weekly = canvas.getByRole('menuitemradio', {
+      name: 'Weekly'
+    });
+    await step('Frequency: everything is disabled, once is selected', async () => {
+      expect(once).toHaveAttribute('aria-disabled', 'true');
+      expect(weekly).toHaveAttribute('aria-disabled', 'true');
+      expect(once).toHaveAttribute('aria-checked', 'true');
+      expect(weekly).toHaveAttribute('aria-checked', 'false');
+    });
+    await step('Click on "Weekly"', async () => {
+      await userEvent.click(weekly);
+      expect(radioCallbacks.frequency).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(once).toHaveAttribute('aria-checked', 'true');
+      });
+    });
+  }
+}`,...N.parameters?.docs?.source},description:{story:"Radio groups allow users to select a single option from a list of mutually exclusive options.\nUse `DropdownMenuRadioGroup` with `DropdownMenuRadioItem` components to create radio groups.\nMultiple independent radio groups can coexist in the same dropdown menu.\n\nYou can define radio group options either with type-safe `items` prop or by\npassing `DropdownMenuRadioItem` as children if you need more flexibility.",...N.parameters?.docs?.description}}},F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: <>
+                <DropdownMenuCheckboxItem label="Email notifications" onCheckedChange={checkboxCallbacks.email} defaultChecked />
+                <DropdownMenuCheckboxItem label="SMS notifications" onCheckedChange={checkboxCallbacks.sms} />
+                <DropdownMenuCheckboxItem label="Push notifications" onCheckedChange={checkboxCallbacks.push} disabled />
+                <DropdownMenuCheckboxItem label="System alerts (required)" onCheckedChange={checkboxCallbacks.alerts} disabled checked />
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    const emailNotifications = canvas.getByRole('menuitemcheckbox', {
+      name: 'Email notifications'
+    });
+    const smsNotifications = canvas.getByRole('menuitemcheckbox', {
+      name: 'SMS notifications'
+    });
+    const pushNotifications = canvas.getByRole('menuitemcheckbox', {
+      name: 'Push notifications'
+    });
+    const systemAlerts = canvas.getByRole('menuitemcheckbox', {
+      name: 'System alerts (required)'
+    });
+    await step('Email notifications is checked by default', async () => {
+      expect(emailNotifications).toHaveAttribute('aria-checked', 'true');
+    });
+    await step('Uncheck "Email notifications"', async () => {
+      await userEvent.click(emailNotifications);
+      expect(checkboxCallbacks.email).toHaveBeenCalledWith(false, BaseUiEventDetails);
+      await waitFor(() => {
+        expect(emailNotifications).toHaveAttribute('aria-checked', 'false');
+      });
+    });
+    await step('"SMS notifications" is not checked', async () => {
+      expect(smsNotifications).toHaveAttribute('aria-checked', 'false');
+    });
+    await step('Check "SMS notifications"', async () => {
+      await userEvent.click(smsNotifications);
+      expect(checkboxCallbacks.sms).toHaveBeenCalledWith(true, BaseUiEventDetails);
+      await waitFor(() => {
+        expect(smsNotifications).toHaveAttribute('aria-checked', 'true');
+      });
+    });
+    await step('"Push notifications" is disabled and not checked', async () => {
+      expect(pushNotifications).toHaveAttribute('aria-disabled', 'true');
+      expect(pushNotifications).toHaveAttribute('aria-checked', 'false');
+    });
+    await step('Click on "Push notifications"', async () => {
+      await userEvent.click(pushNotifications);
+      expect(checkboxCallbacks.push).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(pushNotifications).toHaveAttribute('aria-checked', 'false');
+      });
+    });
+    await step('"System alerts (required)" is disabled and checked', async () => {
+      expect(systemAlerts).toHaveAttribute('aria-disabled', 'true');
+      expect(systemAlerts).toHaveAttribute('aria-checked', 'true');
+    });
+    await step('Click on "System alerts (required)"', async () => {
+      await userEvent.click(systemAlerts);
+      expect(checkboxCallbacks.alerts).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(systemAlerts).toHaveAttribute('aria-checked', 'true');
+      });
+    });
+  }
+}`,...F.parameters?.docs?.source},description:{story:`Checkbox items allow users to select multiple independent options from a list.
+Use \`DropdownMenuCheckboxItem\` to add checkboxes to the menu. Each checkbox maintains
+its own state and can be checked or unchecked independently of others.`,...F.parameters?.docs?.description}}},L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`args => {
+  const [dayOfTheWeek, setDayOfTheWeek] = useState('mon');
+  const [timeOfTheDay, setTimeOfTheDay] = useState<string | undefined>();
+  const handleDayOfTheWeekChange = (value: string) => {
+    setDayOfTheWeek(value);
+    selectCallbacks.dayOfTheWeek(value);
+  };
+  const handleTimeOfTheDayChange = (value: string) => {
+    setTimeOfTheDay(value);
+    selectCallbacks.timeOfTheDay(value);
+  };
+  return <DropdownMenu {...args}>
+            <DropdownMenuSelect label="Day of the week" value={dayOfTheWeek} onValueChange={handleDayOfTheWeekChange} items={[{
+      label: 'Monday',
+      value: 'mon'
+    }, {
+      label: 'Tuesday',
+      value: 'tue'
+    }, {
+      label: 'Wednesday',
+      value: 'wed'
+    }, {
+      label: 'Thursday',
+      value: 'thu'
+    }, {
+      label: 'Friday',
+      value: 'fri'
+    }, {
+      label: 'Saturday',
+      value: 'sat',
+      disabled: true
+    }, {
+      label: 'Sunday',
+      value: 'sun',
+      disabled: true
+    }]} />
+            <DropdownMenuSelect label="Time of the day" defaultValue={timeOfTheDay} onValueChange={handleTimeOfTheDayChange}>
+                <DropdownMenuSelectOption value="morning" label="Morning" />
+                <DropdownMenuSelectOption value="afternoon" label="Afternoon" />
+            </DropdownMenuSelect>
+            <DropdownMenuSelect label="Frequency" onValueChange={selectCallbacks.frequency} disabled>
+                <DropdownMenuSelectOption label="Once" value="once" />
+                <DropdownMenuSelectOption label="Weekly" value="weekly" />
+            </DropdownMenuSelect>
+        </DropdownMenu>;
+}`,...L.parameters?.docs?.source},description:{story:"Select items provide a nested menu for choosing from a list of options, similar to a dropdown within a dropdown.\nUse `DropdownMenuSelect` with `DropdownMenuSelectOption` components to create select menus.\nThe selected value is displayed in the trigger label, and hovering over it opens a submenu with all available options.\n\nYou can define select options either with type-safe `items` prop or by\npassing `DropdownMenuSelectOption` as children if you need more flexibility.",...L.parameters?.docs?.description}}},R.parameters={...R.parameters,docs:{...R.parameters?.docs,source:{originalSource:`{
+  render: function Render({
+    align,
+    side,
+    ...rest
+  }) {
+    return <DropdownMenu {...rest} defaultOpen>
+                <DropdownMenuSelect label="Time of the day" side={side} align={align} defaultOpen>
+                    <DropdownMenuSelectOption value="morning" label="Morning" />
+                    <DropdownMenuSelectOption value="afternoon" label="Afternoon" />
+                </DropdownMenuSelect>
+            </DropdownMenu>;
+  },
+  parameters: {
+    containerHeight: '500px'
+  },
+  args: {
+    side: 'top',
+    align: 'start'
+  }
+}`,...R.parameters?.docs?.source},description:{story:"Similar to DropdownMenu, DropdownMenuSelect position can be controlled with `side` and `align` props.",...R.parameters?.docs?.description}}},z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
+  render: ControllingSelectPosition.render,
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'inline-end'
+  }
+}`,...z.parameters?.docs?.source}}},Re.parameters={...Re.parameters,docs:{...Re.parameters?.docs,source:{originalSource:`{
+  render: ControllingSelectPosition.render,
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'inline-start',
+    defaultOpen: true
+  }
+}`,...Re.parameters?.docs?.source}}},ze.parameters={...ze.parameters,docs:{...ze.parameters?.docs,source:{originalSource:`{
+  render: ControllingSelectPosition.render,
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'left',
+    defaultOpen: true
+  }
+}`,...ze.parameters?.docs?.source}}},Be.parameters={...Be.parameters,docs:{...Be.parameters?.docs,source:{originalSource:`{
+  render: ControllingSelectPosition.render,
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'right',
+    defaultOpen: true
+  }
+}`,...Be.parameters?.docs?.source}}},Ve.parameters={...Ve.parameters,docs:{...Ve.parameters?.docs,source:{originalSource:`{
+  render: ControllingSelectPosition.render,
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'top',
+    defaultOpen: true
+  }
+}`,...Ve.parameters?.docs?.source}}},He.parameters={...He.parameters,docs:{...He.parameters?.docs,source:{originalSource:`{
+  render: ControllingSelectPosition.render,
+  tags: ['!autodocs'],
+  args: {
+    align: 'start',
+    defaultOpen: true
+  }
+}`,...He.parameters?.docs?.source}}},Ue.parameters={...Ue.parameters,docs:{...Ue.parameters?.docs,source:{originalSource:`{
+  render: ControllingSelectPosition.render,
+  tags: ['!autodocs'],
+  args: {
+    align: 'end',
+    defaultOpen: true
+  }
+}`,...Ue.parameters?.docs?.source}}},B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: <>
+                <DropdownSubmenu label="Region">
+                    <DropdownMenuItem label="Currency" />
+                    <DropdownMenuItem label="Language" />
+                    <DropdownMenuItem label="Time zone" />
+                </DropdownSubmenu>
+                <DropdownSubmenu label="Subscription">
+                    <DropdownMenuItem label="Transfer balance" />
+                    <DropdownMenuItem label="Add extra hours" />
+                </DropdownSubmenu>
+                <DropdownSubmenu label="Integrations" disabled>
+                    <DropdownMenuItem label="Connect calendar" />
+                    <DropdownMenuItem label="Slack integration" />
+                    <DropdownMenuItem label="Email sync" />
+                </DropdownSubmenu>
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    const region = canvas.getByRole('menuitem', {
+      name: 'Region'
+    });
+    await step('Region submenu opens on hover', async () => {
+      await userEvent.hover(region);
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu', {
+          name: 'Region'
+        })).toBeVisible();
+      });
+    });
+    await step('Region submenu closes on hover out', async () => {
+      await userEvent.unhover(region);
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu', {
+          name: 'Region'
+        })).not.toBeInTheDocument();
+      });
+    });
+    await step('Integrations submenu is disabled', async () => {
+      const integrations = canvas.getByRole('menuitem', {
+        name: 'Integrations'
+      });
+      expect(integrations).toHaveAttribute('aria-disabled', 'true');
+      await userEvent.click(integrations);
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu', {
+          name: 'Integrations'
+        })).not.toBeInTheDocument();
+      });
+    });
+  }
+}`,...B.parameters?.docs?.source},description:{story:`Create nested menu structures using \`DropdownSubmenu\` to organize complex navigation hierarchies.
+Submenus appear when hovering over or clicking their parent item, and can contain any menu items,
+including additional submenus for deeper nesting. This pattern is ideal for settings menus or
+complex action lists where options naturally group into categories.`,...B.parameters?.docs?.description}}},V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
+  render: function Render({
+    align,
+    side,
+    ...rest
+  }) {
+    return <DropdownMenu {...rest} defaultOpen>
+                <DropdownSubmenu label="Region" side={side} align={align} defaultOpen>
+                    <DropdownMenuItem label="Currency" />
+                    <DropdownMenuItem label="Language" />
+                    <DropdownMenuItem label="Time zone" />
+                </DropdownSubmenu>
+            </DropdownMenu>;
+  },
+  parameters: {
+    containerHeight: '500px'
+  },
+  args: {
+    side: 'top',
+    align: 'start'
+  }
+}`,...V.parameters?.docs?.source},description:{story:"Similar to DropdownMenu, DropdownSubmenu position can be controlled with `side` and `align` props.",...V.parameters?.docs?.description}}},We.parameters={...We.parameters,docs:{...We.parameters?.docs,source:{originalSource:`{
+  render: ControllingSubmenuPosition.render,
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'inline-end'
+  }
+}`,...We.parameters?.docs?.source}}},Ge.parameters={...Ge.parameters,docs:{...Ge.parameters?.docs,source:{originalSource:`{
+  render: ControllingSubmenuPosition.render,
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'inline-start',
+    defaultOpen: true
+  }
+}`,...Ge.parameters?.docs?.source}}},Ke.parameters={...Ke.parameters,docs:{...Ke.parameters?.docs,source:{originalSource:`{
+  render: ControllingSubmenuPosition.render,
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'left',
+    defaultOpen: true
+  }
+}`,...Ke.parameters?.docs?.source}}},qe.parameters={...qe.parameters,docs:{...qe.parameters?.docs,source:{originalSource:`{
+  render: ControllingSubmenuPosition.render,
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'right',
+    defaultOpen: true
+  }
+}`,...qe.parameters?.docs?.source}}},Je.parameters={...Je.parameters,docs:{...Je.parameters?.docs,source:{originalSource:`{
+  render: ControllingSubmenuPosition.render,
+  parameters: {
+    containerHeight: '500px'
+  },
+  tags: ['!autodocs'],
+  args: {
+    side: 'top',
+    defaultOpen: true
+  }
+}`,...Je.parameters?.docs?.source}}},Ye.parameters={...Ye.parameters,docs:{...Ye.parameters?.docs,source:{originalSource:`{
+  render: ControllingSubmenuPosition.render,
+  tags: ['!autodocs'],
+  args: {
+    align: 'start',
+    defaultOpen: true
+  }
+}`,...Ye.parameters?.docs?.source}}},Xe.parameters={...Xe.parameters,docs:{...Xe.parameters?.docs,source:{originalSource:`{
+  render: ControllingSubmenuPosition.render,
+  tags: ['!autodocs'],
+  args: {
+    align: 'end',
+    defaultOpen: true
+  }
+}`,...Xe.parameters?.docs?.source}}},U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      source: {
+        type: 'dynamic'
+      }
+    }
+  },
+  decorators: [Story => {
+    const [counter, setCounter] = useState(0);
+    const reset = () => setCounter(counter + 1);
+    return <>
+                    <Story key={counter} />
+                    <div style={{
+        position: 'fixed',
+        left: 0,
+        bottom: 0,
+        margin: 8
+      }}>
+                        <Button variant="ghost" size="small" onClick={reset}>
+                            Reset story
+                        </Button>
+                    </div>
+                </>;
+  }],
+  render: function Render() {
+    const [open, setOpen] = useState(false);
+    const [submenuOpen, setSubmenuOpen] = useState(false);
+    const [selectOpen, setSelectOpen] = useState(false);
+    const handleStepChange = (currentStep: number) => {
+      switch (currentStep) {
+        case 1:
+          setOpen(true);
+          return;
+        case 3:
+          setSubmenuOpen(true);
+          return;
+        case 5:
+          setSelectOpen(true);
+          return;
+      }
+    };
+    const handleTourComplete = () => {
+      setOpen(false);
+      setSubmenuOpen(false);
+      setSelectOpen(false);
+    };
+    return <Provider totalSteps={6} onStepChange={handleStepChange} onComplete={handleTourComplete} onClose={handleTourComplete}>
+                <Step step={0} title="New settings menu" text="All settings are now in one place.">
+                    <DropdownMenu open={open} onOpenChange={setOpen} trigger={<IconButton svg={SettingsSvg} variant="ghost" assistiveText="Settings" />}>
+                        <Step step={1} title="Transfer balance" text="You can now transfer your balance to another tutor." side="right">
+                            <DropdownMenuItem label="Transfer balance" />
+                        </Step>
+                        <DropdownMenuItem label="Add extra hours" />
+                        <Step step={2} title="Region" text="Region settings are grouped together." side="top">
+                            <DropdownSubmenu label="Region" keepMounted open={submenuOpen} onOpenChange={setSubmenuOpen}>
+                                <DropdownMenuItem label="Language" />
+                                <Step step={3} title="Time zone" text="You can now select your time zone." side="right">
+                                    <DropdownMenuItem label="Time zone" />
+                                </Step>
+                            </DropdownSubmenu>
+                        </Step>
+                        <Step step={4} title="Currency" text="Currency settings moved here." side="right">
+                            <DropdownMenuSelect open={selectOpen} onOpenChange={setSelectOpen} defaultValue="USD" label="Currency">
+                                <DropdownMenuSelectOption value="USD" label="US Dollar" />
+                                <DropdownMenuSelectOption value="EUR" label="Euro" />
+                                <Step step={5} title="New currency!" text="Pay and receive payments in british pounds.">
+                                    <DropdownMenuSelectOption value="GBP" label="British Pound" />
+                                </Step>
+                            </DropdownMenuSelect>
+                        </Step>
+                    </DropdownMenu>
+                </Step>
+            </Provider>;
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Tour tooltip should be visible', async () => {
+      await waitFor(() => {
+        expect(canvas.getByRole('dialog', {
+          name: 'New settings menu'
+        })).toBeVisible();
+      });
+    });
+    await step('Click Next to advance to second step', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Next'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByRole('dialog', {
+          name: 'Transfer balance'
+        })).toBeVisible();
+        expect(canvas.getByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Click Next to advance to third step', async () => {
+      const tourStep = within(canvas.getByRole('dialog', {
+        name: 'Transfer balance'
+      }));
+      await userEvent.click(tourStep.getByRole('button', {
+        name: 'Next'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByRole('dialog', {
+          name: 'Region'
+        })).toBeVisible();
+      });
+    });
+    await step('Click Next to advance to fourth step', async () => {
+      const tourStep = within(canvas.getByRole('dialog', {
+        name: 'Region'
+      }));
+      await userEvent.click(tourStep.getByRole('button', {
+        name: 'Next'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByRole('dialog', {
+          name: 'Time zone'
+        })).toBeVisible();
+        expect(canvas.getByRole('menu', {
+          name: 'Region'
+        })).toBeVisible();
+      });
+    });
+    await step('Click Next to advance to fifth step', async () => {
+      const tourStep = within(canvas.getByRole('dialog', {
+        name: 'Time zone'
+      }));
+      await userEvent.click(tourStep.getByRole('button', {
+        name: 'Next'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByRole('dialog', {
+          name: 'Currency'
+        })).toBeVisible();
+      });
+    });
+    await step('Click Next to advance to the last step', async () => {
+      const tourStep = within(canvas.getByRole('dialog', {
+        name: 'Currency'
+      }));
+      await userEvent.click(tourStep.getByRole('button', {
+        name: 'Next'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByRole('dialog', {
+          name: 'New currency!'
+        })).toBeVisible();
+        expect(canvas.getByRole('menu', {
+          name: /Currency/
+        })).toBeVisible();
+      });
+    });
+
+    // Reset story to initial state
+    await userEvent.click(canvas.getByRole('button', {
+      name: 'Reset story'
+    }));
+  }
+}`,...U.parameters?.docs?.source},description:{story:`Submenu and select open state also can be controlled.
+This is useful for creating coordinated onboarding tours.`,...U.parameters?.docs?.description}}},W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{
+  args: {
+    keepMounted: true,
+    children: <>
+                <DropdownMenuItem label="Transfer balance" />
+                <DropdownMenuItem label="Add extra hours" />
+                <DropdownSubmenu label="Region" keepMounted>
+                    <DropdownMenuItem label="Currency" />
+                    <DropdownMenuItem label="Language" />
+                    <DropdownMenuItem label="Time zone" />
+                </DropdownSubmenu>
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const menu = await canvas.findByRole('menu', {
+      name: 'Settings',
+      hidden: true
+    });
+    const submenu = await canvas.findByRole('menu', {
+      name: 'Region',
+      hidden: true
+    });
+    await step('Menus are mounted, but not visible', async () => {
+      expect(menu).toBeInTheDocument();
+      expect(menu).not.toBeVisible();
+      expect(submenu).toBeInTheDocument();
+      expect(submenu).not.toBeVisible();
+    });
+    await step('Open the menu', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(menu).toBeVisible();
+      });
+    });
+    await step('Submenu is visible', async () => {
+      await userEvent.click(canvas.getByRole('menuitem', {
+        name: 'Region'
+      }));
+      await waitFor(() => {
+        expect(submenu).toBeVisible();
+      });
+    });
+    await step('Close the submenu.', async () => {
+      await userEvent.keyboard('{Escape}');
+      await waitFor(() => {
+        expect(submenu).not.toBeVisible();
+      });
+      expect(submenu).toBeInTheDocument();
+    });
+    await step('Close the menu.', async () => {
+      await userEvent.keyboard('{Escape}');
+      await waitFor(() => {
+        expect(menu).not.toBeVisible();
+      });
+      expect(menu).toBeInTheDocument();
+    });
+  }
+}`,...W.parameters?.docs?.source},description:{story:`Use the \`keepMounted\` prop to keep the menu in the DOM when closed, hidden with CSS instead of
+unmounted. This is useful for preserving state, enabling exit animations, or improving performance
+when the menu opens and closes frequently. Both the main menu and submenus can be kept mounted independently.`,...W.parameters?.docs?.description}}},G.parameters={...G.parameters,docs:{...G.parameters?.docs,source:{originalSource:`{
+  args: Submenus.args,
+  globals: {
+    viewport: {
+      value: 'narrow-l',
+      isRotated: false
+    }
+  },
+  parameters: {
+    layout: 'centered'
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Click on "Region"', async () => {
+      await userEvent.click(canvas.getByRole('menuitem', {
+        name: 'Region'
+      }));
+      await waitFor(async () => {
+        expect(isInViewport(canvas.queryByRole('menu', {
+          name: 'Settings'
+        })), 'Main menu should be hidden').toBe(false);
+        expect(isInViewport(canvas.queryByRole('menu', {
+          name: 'Region'
+        })), 'Submenu should be visible').toBe(true);
+      });
+    });
+    await step('Tap away to return to main menu', async () => {
+      /**
+       * userEvent.click(document.body) sadly performs click on actual body,
+       * so menu loses focus and closes. In real life, it's impossible because
+       * of the backdrop, so here we're clicking on the backdrop directly.
+       */
+      const backdrop = canvas.getByRole('menu', {
+        name: 'Region'
+      }).closest('[data-base-ui-portal]')!.querySelector('[data-backdrop]')!;
+      await userEvent.click(backdrop);
+      await waitFor(async () => {
+        expect(isInViewport(canvas.queryByRole('menu', {
+          name: 'Region'
+        })), 'Submenu should be hidden').toBe(false);
+        expect(isInViewport(canvas.queryByRole('menu', {
+          name: 'Settings'
+        })), 'Main menu should be visible').toBe(true);
+      });
+    });
+    await step('Tap away to close menu', async () => {
+      /**
+       * userEvent.click(document.body) sadly performs click on actual body,
+       * so menu loses focus and closes. In real life, it's impossible because
+       * of the backdrop, so here we're clicking on the backdrop directly.
+       */
+      await userEvent.click(document.querySelector('[data-backdrop]')!);
+      await waitFor(async () => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+      });
+    });
+  }
+}`,...G.parameters?.docs?.source},description:{story:`On mobile devices, the menu will be rendered as a bottom sheet instead of a dropdown.`,...G.parameters?.docs?.description}}},K.parameters={...K.parameters,docs:{...K.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: <>
+                <DropdownMenuItem label="Transfer balance" onClick={callbacks.items.transferBalance} />
+                <DropdownMenuItem label="Add extra hours" onClick={callbacks.items.addExtraHours} disabled />
+                <DropdownSubmenu label="Region">
+                    <DropdownMenuItem label="Currency" onClick={callbacks.items.currency} />
+                    <DropdownMenuItem label="Language" onClick={callbacks.items.language} />
+                    <DropdownMenuItem label="Time zone" />
+                </DropdownSubmenu>
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const trigger = canvas.getByRole('button', {
+      name: 'Settings'
+    });
+    await step('Focus on the trigger element', async () => {
+      trigger.focus();
+    });
+    await step('Open the menu via Enter key. First item should be focused', async () => {
+      await userEvent.keyboard('{Enter}');
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+        expect(canvas.getByRole('menuitem', {
+          name: 'Transfer balance'
+        })).toHaveFocus();
+      });
+    });
+    await step('Close the menu via Escape key. Trigger should be focused', async () => {
+      await userEvent.keyboard('{Escape}');
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+        expect(trigger).toHaveFocus();
+      });
+    });
+    await step('Open the menu via Space key. First item should be focused', async () => {
+      await userEvent.keyboard(' ');
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+        expect(canvas.getByRole('menuitem', {
+          name: 'Transfer balance'
+        })).toHaveFocus();
+      });
+    });
+    await step('Select the first item via Enter key. Menu should be closed and trigger should be focused', async () => {
+      await userEvent.keyboard('{Enter}');
+      expect(callbacks.items.transferBalance).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+        expect(trigger).toHaveFocus();
+      });
+    });
+    await step('Open the menu via Enter key. First item should be focused', async () => {
+      await userEvent.keyboard('{Enter}');
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).toBeVisible();
+        expect(canvas.getByRole('menuitem', {
+          name: 'Transfer balance'
+        })).toHaveFocus();
+      });
+    });
+    await step('Navigate through the menu using Arrow keys', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Add extra hours'
+        })).toHaveFocus();
+      });
+      await userEvent.keyboard('{ArrowDown}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Region'
+        })).toHaveFocus();
+      });
+      await userEvent.keyboard('{ArrowDown}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Transfer balance'
+        })).toHaveFocus();
+      });
+      await userEvent.keyboard('{ArrowUp}');
+      await userEvent.keyboard('{ArrowUp}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Add extra hours'
+        })).toHaveFocus();
+      });
+    });
+    await step('Enter key does nothing for disabled item', async () => {
+      await userEvent.keyboard('{Enter}');
+      expect(callbacks.items.addExtraHours).not.toHaveBeenCalled();
+    });
+    await step('Space key does nothing for disabled item', async () => {
+      await userEvent.keyboard(' ');
+      expect(callbacks.items.addExtraHours).not.toHaveBeenCalled();
+    });
+    await step('Navigate to submenu trigger using Arrow down key', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Region'
+        })).toHaveFocus();
+      });
+    });
+    await step('Open the submenu via Enter key. First item should be focused', async () => {
+      await userEvent.keyboard('{Enter}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Currency'
+        })).toHaveFocus();
+      });
+    });
+    await step('Navigate back to main menu using Arrow left key. Submenu trigger should be focused', async () => {
+      await userEvent.keyboard('{ArrowLeft}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Region'
+        })).toHaveFocus();
+      });
+    });
+    await step('Open submenu using Arrow right key. First item should be focused', async () => {
+      await userEvent.keyboard('{ArrowRight}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Currency'
+        })).toHaveFocus();
+      });
+    });
+    await step('Navigate back to main menu using Escape key. Submenu trigger should be focused', async () => {
+      await userEvent.keyboard('{Escape}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Region'
+        })).toHaveFocus();
+      });
+    });
+    await step('Open submenu using Enter key. First item should be focused', async () => {
+      await userEvent.keyboard('{Enter}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Currency'
+        })).toHaveFocus();
+      });
+    });
+    await step('Close the menu via Tab key. Trigger should be focused', async () => {
+      await userEvent.keyboard('{Tab}');
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu')).not.toBeInTheDocument();
+        expect(trigger).toHaveFocus();
+      });
+    });
+  }
+}`,...K.parameters?.docs?.source},description:{story:`The DropdownMenu component implements comprehensive keyboard navigation following the
+[WAI-ARIA Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) and accessibility
+best practices. This ensures users who rely on keyboard navigation or assistive technologies
+can efficiently interact with menus.
+
+#### Opening and Closing the Menu
+
+- **Enter** or **Space**: Opens the menu and moves focus to the first menu item
+- **Escape**: Closes the menu and returns focus to the trigger button
+- **Tab**: Closes the menu and moves focus to the next focusable element
+
+#### Navigating Menu Items
+
+- **Arrow Down**: Moves focus to the next menu item, wrapping to the first item when reaching the end
+- **Arrow Up**: Moves focus to the previous menu item, wrapping to the last item when at the beginning
+- Disabled items are included in keyboard navigation but cannot be activated
+
+#### Activating Menu Items
+
+- **Enter** or **Space**: Activates the focused menu item, closes the menu, and returns focus to the trigger
+- Disabled items will not respond to activation keys
+
+#### Working with Submenus
+
+- **Enter** or **Arrow Right**: Opens a submenu and moves focus to its first item
+- **Arrow Left** or **Escape**: Closes the submenu and returns focus to the submenu trigger
+- Submenus maintain the same navigation patterns as the main menu`,...K.parameters?.docs?.description}}},$e.parameters={...$e.parameters,docs:{...$e.parameters?.docs,source:{originalSource:`{
+  ...KeyboardNavigation,
+  globals: OnMobile.globals,
+  parameters: OnMobile.parameters,
+  tags: ['!autodocs']
+}`,...$e.parameters?.docs?.source}}},q.parameters={...q.parameters,docs:{...q.parameters?.docs,source:{originalSource:`{
+  args: {
+    defaultOpen: true,
+    children: <>
+                {Array.from({
+        length: 100
+      }).map((_, index) => <DropdownMenuItem key={index} label={\`Item \${index + 1}\`} />)}
+            </>
+  }
+}`,...q.parameters?.docs?.source},description:{story:`When the menu has a lot of items, it will be rendered as a scrollable container.`,...q.parameters?.docs?.description}}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
+  args: {
+    defaultOpen: true,
+    children: <DropdownMenuGroup label={longText}>
+                <DropdownMenuItem leadingElement={<Icon size="24" svg={TokyoUIEmojiFrowning} />} label={longText} description={longText} />
+                <DropdownSubmenu leadingElement={<Icon size="24" svg={TokyoUIEmojiFrowning} />} label={longText} description={longText}>
+                    <DropdownMenuItem leadingElement={<Icon size="24" svg={TokyoUIEmojiFrowning} />} label={longText} description={longText} />
+                </DropdownSubmenu>
+                <DropdownMenuSelect leadingElement={<Icon size="24" svg={TokyoUIEmojiFrowning} />} label={longText} description={longText} defaultValue="1">
+                    <DropdownMenuSelectOption leadingElement={<Icon size="24" svg={TokyoUIEmojiFrowning} />} label={longText} description={longText} value="1" />
+                </DropdownMenuSelect>
+                <DropdownMenuCheckboxItem leadingElement={<Icon size="24" svg={TokyoUIEmojiFrowning} />} label={longText} description={longText} />
+                <DropdownMenuRadioGroup defaultValue="1">
+                    <DropdownMenuRadioItem leadingElement={<Icon size="24" svg={TokyoUIEmojiFrowning} />} label={longText} description={longText} value="1" />
+                </DropdownMenuRadioGroup>
+            </DropdownMenuGroup>
+  }
+}`,...Y.parameters?.docs?.source},description:{story:`Please don't use long labels and descriptions for menu items.`,...Y.parameters?.docs?.description}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
+  args: Submenus.args,
+  render: function StoryRender(args) {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    return <>
+                <Button onClick={() => setDialogOpen(true)}>Open dialog</Button>
+                <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} title="Dialog" description={undefined}>
+                    <DropdownMenu {...args} />
+                </Dialog>
+            </>;
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dialog', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Open dialog'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByRole('dialog', {
+          name: 'Dialog'
+        })).toBeVisible();
+      });
+    });
+    await step('Open dropdown with mouse', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu', {
+          name: 'Settings'
+        })).toBeVisible();
+      });
+    });
+    await step('Open Region submenu with mouse', async () => {
+      await userEvent.click(canvas.getByRole('menuitem', {
+        name: 'Region'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu', {
+          name: 'Region'
+        })).toBeVisible();
+      });
+    });
+    await step('Click on Currency item', async () => {
+      await userEvent.click(canvas.getByRole('menuitem', {
+        name: 'Currency'
+      }));
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu', {
+          name: 'Settings'
+        })).not.toBeInTheDocument();
+      });
+    });
+    await step('Open dropdown with keyboard', async () => {
+      const trigger = canvas.getByRole('button', {
+        name: 'Settings'
+      });
+      trigger.focus();
+      await userEvent.keyboard('{Enter}');
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu', {
+          name: 'Settings'
+        })).toBeVisible();
+        expect(canvas.getByRole('menuitem', {
+          name: 'Region'
+        })).toHaveFocus();
+      });
+    });
+    await step('Open Region submenu with keyboard', async () => {
+      await userEvent.keyboard('{Enter}');
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu', {
+          name: 'Region'
+        })).toBeVisible();
+        expect(canvas.getByRole('menuitem', {
+          name: 'Currency'
+        })).toHaveFocus();
+      });
+    });
+    await step('Navigate to Language item with keyboard', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      await waitFor(() => {
+        expect(canvas.getByRole('menuitem', {
+          name: 'Language'
+        })).toHaveFocus();
+      });
+    });
+    await step('Select Language item with keyboard', async () => {
+      await userEvent.keyboard('{Enter}');
+      await waitFor(() => {
+        expect(canvas.queryByRole('menu', {
+          name: 'Settings'
+        })).not.toBeInTheDocument();
+      });
+    });
+    await step('Close dialog', async () => {
+      await userEvent.keyboard('{Escape}');
+      await waitFor(() => {
+        expect(canvas.queryByRole('dialog', {
+          name: 'Dialog'
+        })).not.toBeInTheDocument();
+      });
+    });
+  }
+}`,...X.parameters?.docs?.source},description:{story:`Dropdown menu can be used inside a dialog or other popups.`,...X.parameters?.docs?.description}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
+  render: function WithItemOpeningDialog(args) {
+    const [open, setOpen] = useState(false);
+    return <>
+                <DropdownMenu {...args}>
+                    <DropdownMenuItem label="Open dialog" onClick={() => setOpen(true)} />
+                </DropdownMenu>
+                <Dialog title="Dialog" description={undefined} open={open} onClose={() => setOpen(false)}>
+                    Dialog content
+                </Dialog>
+            </>;
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dropdown', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Settings'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByRole('menu')).toBeVisible();
+      });
+    });
+    await step('Open dialog', async () => {
+      await userEvent.click(canvas.getByRole('menuitem', {
+        name: 'Open dialog'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByRole('dialog', {
+          name: 'Dialog'
+        })).toBeVisible();
+      });
+    });
+    await step('Close dialog', async () => {
+      await userEvent.keyboard('{Escape}');
+    });
+  }
+}`,...Z.parameters?.docs?.source},description:{story:`Dropdown menu items can also open external dialogs.`,...Z.parameters?.docs?.description}}},Q.parameters={...Q.parameters,docs:{...Q.parameters?.docs,source:{originalSource:`{
+  args: {
+    keepMounted: true,
+    children: <CustomDropdownMenuItemWithDialog />
+  },
+  play: ItemOpeningDialog.play
+}`,...Q.parameters?.docs?.source},description:{story:`In some cases you might want to wrap DropdownMenuItem with a custom component, which might have a dialog inside:
+
+\`\`\`tsx
+const CustomDropdownMenuItemWithDialog = () => {
+    const [open, setOpen] = useState(false);
+    return (
+        <>
+            <DropdownMenuItem label="Open dialog" onClick={() => setOpen(true)} />
+            <Dialog title="Dialog" open={open} onClose={() => setOpen(false)}>
+                Dialog content
+            </Dialog>
+        </>
+    );
+};
+\`\`\`
+
+In this case you need to use the \`keepMounted\` prop to prevent dialog from closing when menu unmounts.`,...Q.parameters?.docs?.description}}},$.parameters={...$.parameters,docs:{...$.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const CustomButton = forwardRef<HTMLButtonElement, Record<string, unknown>>((props, ref) => {
+      return <button {...props} ref={ref}>
+                        Button
+                    </button>;
+    });
+    return <DropdownMenu open={true} trigger={<CustomButton />}>
+                <DropdownMenuRadioGroup>
+                    <DropdownMenuItem label="Transfer balance" onClick={callbacks.items.transferBalance} />
+                    <DropdownMenuItem label="Add extra hours" onClick={callbacks.items.addExtraHours} />
+                </DropdownMenuRadioGroup>
+            </DropdownMenu>;
+  }
+}`,...$.parameters?.docs?.source},description:{story:`Custom DropDownMenu triggers must forward the ref and props to the underlying DOM node to ensure proper dropdown positioning.
+
+\`\`\`tsx
+const CustomButton = forwardRef<HTMLButtonElement, {}>(
+    (props, ref) => {
+        return <button {...props} ref={ref} />;
+    },
+);
+
+<DropdownMenu open={true} trigger={<CustomButton />}>
+  ...
+</DropdownMenu>
+\`\`\``,...$.parameters?.docs?.description}}},tt=`Default.Uncontrolled.UncontrolledDefaultOpen.Controlled.ControlledDefaultOpen.ControllingPosition.SideInlineEnd.SideInlineStart.SideLeft.SideRight.SideTop.AlignStart.AlignEnd.DisabledItems.Description.Groups.Dividers.LeadingElements.Links.RadioGroups.CheckboxItems.SelectItems.ControllingSelectPosition.SelectSideInlineEnd.SelectSideInlineStart.SelectSideLeft.SelectSideRight.SelectSideTop.SelectAlignStart.SelectAlignEnd.Submenus.ControllingSubmenuPosition.SubmenuSideInlineEnd.SubmenuSideInlineStart.SubmenuSideLeft.SubmenuSideRight.SubmenuSideTop.SubmenuAlignStart.SubmenuAlignEnd.ControlledSubmenusAndSelects.KeepMounted.OnMobile.KeyboardNavigation.KeyboardNavigationOnMobile.Scroll.LongLabels.InsideDialog.ItemOpeningDialog.DialogInsideCustomItemComponent.CustomChildComponent`.split(`.`)}))();export{Ie as AlignEnd,Fe as AlignStart,F as CheckboxItems,C as Controlled,ke as ControlledDefaultOpen,U as ControlledSubmenusAndSelects,w as ControllingPosition,R as ControllingSelectPosition,V as ControllingSubmenuPosition,$ as CustomChildComponent,Ee as Default,E as Description,Q as DialogInsideCustomItemComponent,T as DisabledItems,O as Dividers,D as Groups,X as InsideDialog,Z as ItemOpeningDialog,W as KeepMounted,K as KeyboardNavigation,$e as KeyboardNavigationOnMobile,k as LeadingElements,j as Links,Y as LongLabels,G as OnMobile,N as RadioGroups,q as Scroll,Ue as SelectAlignEnd,He as SelectAlignStart,L as SelectItems,z as SelectSideInlineEnd,Re as SelectSideInlineStart,ze as SelectSideLeft,Be as SelectSideRight,Ve as SelectSideTop,Ae as SideInlineEnd,je as SideInlineStart,Me as SideLeft,Ne as SideRight,Pe as SideTop,Xe as SubmenuAlignEnd,Ye as SubmenuAlignStart,We as SubmenuSideInlineEnd,Ge as SubmenuSideInlineStart,Ke as SubmenuSideLeft,qe as SubmenuSideRight,Je as SubmenuSideTop,B as Submenus,S as Uncontrolled,De as UncontrolledDefaultOpen,tt as __namedExportsOrder,Te as default};