@wikimedia/codex/dist/sandbox/assets/Popover-BN9HEI-a.js

Codex Design System for Wikimedia

import{a as We,u as De}from"./floating-ui.vue-VTEv9orc.js";import{aZ as ne,af as ae,ag as ie,d as ze,C as Ne,c as i,a2 as qe,ae as Ue,a0 as Ke,t as j,r as c,a_ as Xe,B as g,a6 as Ye,aW as Ze,_ as Ge,a as ee,f as E,o as r,b as m,g as l,j as oe,w as P,n as x,e as L,D as Je,h as I,s as R,q as te,E as Qe,T as eo,H as oo}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CWG_HZgx.js";import{C as to,u as no,b as ao,d as io,e as so}from"./TypeaheadSearch.vue_vue_type_style_index_0_lang-guaG63gZ.js";import{o as ro,f as lo,s as uo,a as co}from"./floating-ui.dom-CMj0Z5yx.js";const k={mobileMax:639,tabletMin:640,desktopMin:1120,desktopWideMin:1680};function po(){const e=ne({mobile:!1,tablet:!1,desktop:!1,"desktop-wide":!1});function n(){if(typeof window!="object")return;const u=window.innerWidth;e.mobile=u<=k.mobileMax,e.tablet=u>=k.tabletMin&&u<k.desktopMin,e.desktop=u>=k.desktopMin&&u<k.desktopWideMin,e["desktop-wide"]=u>=k.desktopWideMin}return ae(()=>{n(),window.addEventListener("resize",n)}),ie(()=>{window.removeEventListener("resize",n)}),e}const fo=ze({name:"CdxPopover",components:{CdxButton:to,CdxIcon:Ne},inheritAttrs:!1,props:{anchor:{type:Object,default:null},open:{type:Boolean,default:!1},title:{type:String,default:""},icon:{type:[String,Object],default:""},useCloseButton:{type:Boolean,default:!1},closeButtonLabel:{type:String,default:"Close"},primaryAction:{type:Object,default:null},defaultAction:{type:Object,default:null},stackedActions:{type:Boolean,default:!1},renderInPlace:{type:Boolean,default:!1},placement:{type:String,default:"bottom"},useBottomSheet:{type:Boolean,default:!1},hideBackdrop:{type:Boolean,default:!1}},emits:["update:open","primary","default"],setup(e,{emit:n}){const u=po(),t=i(()=>e.useBottomSheet&&u.mobile),W=qe("CdxTeleportTarget",void 0),D=i(()=>{var o;return(o=Ue(W))!=null?o:"body"}),T=Ke(j(e,"closeButtonLabel"),"cdx-popover-close-button-label","Close"),C=i(()=>t.value?"cdx-popover-bottom-sheet":"cdx-popover-floating"),s=i(()=>!!e.title||!!e.icon||e.useCloseButton),se=i(()=>!!e.primaryAction||!!e.defaultAction),$=c(!1),re=i(()=>({"cdx-popover__footer__actions--vertical":e.stackedActions})),le=i(()=>({"cdx-popover__backdrop--bottom-sheet":t.value,"cdx-popover__backdrop--no-backdrop":t.value&&e.hideBackdrop})),de=i(()=>({"cdx-popover--bottom-sheet":t.value,"cdx-popover--dividers":t.value&&$.value})),ue=j(e,"placement"),d=c(),z=c(),N=c(),w=c(),V=j(e,"anchor"),ce=16,pe=192,fe=200,ve=512,me=Math.sqrt(16**2+16**2)/2+4,we=i(()=>t.value?[]:[ro(me),lo(),uo({padding:ce,apply({availableWidth:o,availableHeight:a,elements:p}){const v=Math.min(ve,o);Object.assign(p.floating.style,{maxWidth:"".concat(Math.max(pe,v),"px"),maxHeight:"".concat(Math.max(fe,a),"px")})}}),We({element:N})]),{floatingStyles:ye,middlewareData:q,placement:he,x:be,y:ge}=De(V,d,{whileElementsMounted:co,placement:ue,middleware:we}),f=ne({left:"0",top:"0",right:"0",bottom:"0",transform:"none"}),U=i(()=>Xe[he.value]);g([be,ge],()=>{if(t.value||!q.value.arrow)return;const{x:o,y:a}=q.value.arrow;f.left=o?"".concat(o,"px"):"",f.top=a?"".concat(a,"px"):"",f.right="",f.bottom="",f[U.value]="".concat(-16/2-1,"px");const p={top:"rotate( 45deg )",right:"rotate( 135deg )",bottom:"rotate( 225deg )",left:"rotate( 315deg )"};f.transform=p[U.value]});const A=c(0),F=c(0),H=c(0);function ke(){A.value=window.innerHeight,F.value=0,H.value=0}function K(o,a){A.value=o,F.value=a}let y=0;function X(){y!==0&&(cancelAnimationFrame(y),y=0)}function h(){y===0&&(y=requestAnimationFrame(()=>{if(y=0,!window.visualViewport){K(window.innerHeight,0);return}K(window.visualViewport.height,window.visualViewport.offsetTop)}))}function Ce(){window.visualViewport&&(window.visualViewport.addEventListener("resize",h),window.visualViewport.addEventListener("scroll",h))}function Y(){window.visualViewport&&(window.visualViewport.removeEventListener("resize",h),window.visualViewport.removeEventListener("scroll",h))}const Be=i(()=>{if(!t.value)return{};const o=A.value>0?A.value:H.value||window.innerHeight,a=F.value,v=(H.value||window.innerHeight)-o-a,S=v>100?Math.max(0,v):0;return S<=0?{}:{paddingBottom:"".concat(S,"px")}}),Se=no(w),Ee=i(()=>{var o;return(o=Se.value.height)!=null?o:0});g(Ee,()=>{!t.value||!w.value||($.value=w.value.clientHeight<w.value.scrollHeight)}),g(t,()=>{t.value||($.value=!1)});const Le=i(()=>t.value?Be.value:ye.value),Te=i(()=>e.open&&t.value);ao(Te);let Z=!1;function M(){n("update:open",!1)}function Ve(o){t.value&&o.stopPropagation()}function Ae(o){t.value&&(Z=o.target===z.value)}function He(){!t.value||!Z||M()}function B(o){o.key==="Escape"&&M()}function b(o){if(t.value)return;const a=so(V.value);o.target!==document.documentElement&&d.value&&!d.value.contains(o.target)&&!(a!=null&&a.contains(o.target))&&M()}const G=c(null);g(V,()=>{G.value=V.value},{immediate:!0});const{focusTrapStart:Me,focusTrapEnd:Pe,focusHolder:$e,focusFirst:Fe,focusLast:Oe,activateFocusTrap:J,deactivateFocusTrap:O}=io({containerRef:d,bodyRef:w,anchorRef:G,preventScroll:!0});function _e(){document.removeEventListener("keydown",B),document.removeEventListener("mousedown",b),document.removeEventListener("focusin",b),O()}async function je(){document.addEventListener("keydown",B),document.addEventListener("mousedown",b),document.addEventListener("focusin",b),await J()}function xe(){var o,a,p,v,S;(o=d.value)==null||o.style.removeProperty("max-width"),(a=d.value)==null||a.style.removeProperty("max-height"),(p=d.value)==null||p.style.removeProperty("left"),(v=d.value)==null||v.style.removeProperty("top"),(S=d.value)==null||S.style.removeProperty("position")}async function Ie(){xe(),document.addEventListener("keydown",B),h(),Ce(),await J()}function Re(){document.removeEventListener("keydown",B),Y(),X(),ke(),O()}function Q(o){o?Re():_e()}async function _(o){o?(H.value=document.documentElement.clientHeight,await Ie()):await je()}return g(()=>e.open,async o=>{if(o){await _(t.value);return}Q(t.value)}),g(t,async(o,a)=>{!e.open||o===a||(Q(a),await _(o))}),ae(async()=>{e.open&&await _(t.value),t.value&&h(),await Ye(),e.anchor===null&&console.warn('[CdxPopover]: The "anchor" prop must be provided to position the popover in floating mode.')}),ie(()=>{document.removeEventListener("keydown",B),document.removeEventListener("mousedown",b),document.removeEventListener("focusin",b),Y(),X(),O()}),{computedTarget:D,translatedCloseButtonLabel:T,showHeader:s,showFooter:se,footerActionsClasses:re,close:M,cdxIconClose:Ze,transitionName:C,backdropClassObject:le,panelClassObject:de,panelInlineStyles:Le,backdrop:z,panel:d,arrowRef:N,arrowStyles:f,focusTrapStart:Me,focusTrapEnd:Pe,focusHolder:$e,bodyEl:w,focusFirst:Fe,focusLast:Oe,isBottomSheet:t,onBackdropMouseDown:Ae,onBackdropClick:He,onPanelClick:Ve}}}),vo=["role","aria-modal"],mo={ref:"focusHolder",class:"cdx-popover-focus-trap",tabindex:"-1"},wo={key:0,class:"cdx-popover__header"},yo={key:1,class:"cdx-popover__header__title"},ho={class:"cdx-popover__header__button-wrapper"},bo={key:1,class:"cdx-popover__footer"};function go(e,n,u,t,W,D){const T=ee("cdx-icon"),C=ee("cdx-button");return r(),E(oo,{to:e.computedTarget,disabled:e.renderInPlace},[e.open?(r(),m("div",{key:0,ref:"focusTrapStart",tabindex:"0",onFocus:n[0]||(n[0]=(...s)=>e.focusLast&&e.focusLast(...s))},null,544)):l("v-if",!0),oe(eo,{name:e.transitionName,appear:""},{default:P(()=>[e.open?(r(),m("div",{key:0,ref:"backdrop",class:x(["cdx-popover__backdrop",e.backdropClassObject]),onMousedown:n[4]||(n[4]=(...s)=>e.onBackdropMouseDown&&e.onBackdropMouseDown(...s)),onClick:n[5]||(n[5]=(...s)=>e.onBackdropClick&&e.onBackdropClick(...s))},[L("div",Je({ref:"panel",class:["cdx-popover",e.panelClassObject],style:e.panelInlineStyles,role:e.isBottomSheet?"dialog":void 0,"aria-modal":e.isBottomSheet?"true":void 0},e.$attrs,{onClick:n[3]||(n[3]=(...s)=>e.onPanelClick&&e.onPanelClick(...s))}),[L("div",mo,null,512),e.showHeader||e.$slots.header?(r(),m("header",wo,[I(e.$slots,"header",{},()=>[e.icon?(r(),E(T,{key:0,class:"cdx-popover__header__icon",icon:e.icon},null,8,["icon"])):l("v-if",!0),e.title?(r(),m("div",yo,R(e.title),1)):l("v-if",!0),L("div",ho,[e.useCloseButton?(r(),E(C,{key:0,class:"cdx-popover__header__close-button",weight:"quiet",type:"button","aria-label":e.translatedCloseButtonLabel,onClick:e.close},{default:P(()=>[oe(T,{icon:e.cdxIconClose},null,8,["icon"])]),_:1},8,["aria-label","onClick"])):l("v-if",!0)])])])):l("v-if",!0),L("div",{ref:"bodyEl",class:x(["cdx-popover__body",{"cdx-popover__body--no-footer":!e.showFooter&&!e.$slots.footer}])},[I(e.$slots,"default")],2),e.showFooter||e.$slots.footer?(r(),m("footer",bo,[I(e.$slots,"footer",{},()=>[L("div",{class:x(["cdx-popover__footer__actions",e.footerActionsClasses])},[e.primaryAction?(r(),E(C,{key:0,class:"cdx-popover__footer__primary-action",weight:"primary",action:e.primaryAction.actionType,disabled:e.primaryAction.disabled,onClick:n[1]||(n[1]=s=>e.$emit("primary"))},{default:P(()=>[te(R(e.primaryAction.label),1)]),_:1},8,["action","disabled"])):l("v-if",!0),e.defaultAction?(r(),E(C,{key:1,class:"cdx-popover__footer__default-action",disabled:e.defaultAction.disabled,onClick:n[2]||(n[2]=s=>e.$emit("default"))},{default:P(()=>[te(R(e.defaultAction.label),1)]),_:1},8,["disabled"])):l("v-if",!0)],2)])])):l("v-if",!0),e.isBottomSheet?l("v-if",!0):(r(),m("div",{key:2,ref:"arrowRef",class:"cdx-popover__arrow",style:Qe(e.arrowStyles)},null,4))],16,vo)],34)):l("v-if",!0)]),_:3},8,["name"]),e.open?(r(),m("div",{key:1,ref:"focusTrapEnd",tabindex:"0",onFocus:n[6]||(n[6]=(...s)=>e.focusFirst&&e.focusFirst(...s))},null,544)):l("v-if",!0)],8,["to","disabled"])}const Ho=Ge(fo,[["render",go]]);export{Ho as C};