@dialpad/dialtone/dist/vue3/lib/popover/popover.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./popover-constants.cjs"),a=require("../../common/utils/index.cjs"),f=require("../../common/mixins/modal.cjs"),u=require("./tippy-utils.cjs"),m=require("./popover-header-footer.cjs"),v=require("../../shared/sr_only_close_button.cjs"),n=require("vue"),y=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),E=require("../lazy-show/lazy-show.cjs"),g={compatConfig:{MODE:3},name:"DtPopover",components:{SrOnlyCloseButton:v.default,DtLazyShow:E.default,PopoverHeaderFooter:m.default},mixins:[f.default],props:{open:{type:Boolean,default:null},openOnContext:{type:Boolean,default:!1},elementType:{type:String,default:"div"},transition:{type:String,default:"fade"},role:{type:String,default:"dialog",validator:e=>d.POPOVER_ROLES.includes(e)},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null},padding:{type:String,default:"large",validator:e=>Object.keys(d.POPOVER_PADDING_CLASSES).some(t=>t===e)},contentClass:{type:[String,Array,Object],default:""},contentWidth:{type:String,default:"",validator:e=>d.POPOVER_CONTENT_WIDTHS.includes(e)},contentAppear:{type:Boolean,default:null},contentTabindex:{type:Number||null,default:-1},externalAnchor:{type:String,default:""},id:{type:String,default(){return a.getUniqueString()}},offset:{type:Array,default:()=>[0,4]},hideOnClick:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"bottom-end"},tether:{type:Boolean,default:!0},sticky:{type:[Boolean,String],default:!1,validator:e=>d.POPOVER_STICKY_VALUES.includes(e)},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},showCloseButton:{type:Boolean,default:!1},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:e=>d.POPOVER_INITIAL_FOCUS_STRINGS.includes(e)||e instanceof HTMLElement||e.startsWith("#")},openWithArrowKeys:{type:Boolean,default:!1},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>d.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement}},emits:["keydown","update:open","opened","mouseenter-popover","mouseleave-popover","mouseenter-popover-anchor","mouseleave-popover-anchor"],data(){return{POPOVER_PADDING_CLASSES:d.POPOVER_PADDING_CLASSES,POPOVER_HEADER_FOOTER_PADDING_CLASSES:d.POPOVER_HEADER_FOOTER_PADDING_CLASSES,intersectionObserver:null,isOutsideViewport:!1,isOpen:!1,toAppear:!1,anchorEl:null,popoverContentEl:null,hasSlotContent:a.hasSlotContent}},computed:{popoverListeners(){return{keydown:e=>{this.onKeydown(e)},"after-leave":()=>{this.onLeaveTransitionComplete()},"after-enter":()=>{this.onEnterTransitionComplete()}}},calculatedMaxHeight(){return this.isOutsideViewport&&this.modal?"calc(100vh - var(--dt-space-300))":this.maxHeight},labelledBy(){return this.ariaLabelledby||!this.ariaLabel&&a.getUniqueString("DtPopover__anchor")}},watch:{$props:{immediate:!0,deep:!0,handler(){this.validateProps()}},modal(e){var t;(t=this.tip)==null||t.setProps({zIndex:e?650:this.calculateAnchorZindex()})},offset(e){var t;(t=this.tip)==null||t.setProps({offset:e})},sticky(e){var t;(t=this.tip)==null||t.setProps({sticky:e})},fallbackPlacements(){var e;(e=this.tip)==null||e.setProps({popperOptions:this.popperOptions()})},tether(){var e;(e=this.tip)==null||e.setProps({popperOptions:this.popperOptions()})},placement(e){var t;(t=this.tip)==null||t.setProps({placement:e})},open:{handler:function(e){e!==null&&(this.isOpen=e),e===!0&&(this.toAppear=!0)},immediate:!0},contentAppear:{handler:function(e){e!==null&&(this.toAppear=e)}},isOpen(e,t){e?(this.initTippyInstance(),this.tip.show()):!e&&t!==e&&(this.removeEventListeners(),this.tip.hide())}},mounted(){var t;a.warnIfUnmounted(a.returnFirstEl(this.$el),this.$options.name);const e=this.externalAnchor?this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`):null;this.anchorEl=e??this.$refs.anchor.children[0],this.popoverContentEl=a.returnFirstEl((t=this.$refs.content)==null?void 0:t.$el),this.isOpen&&(this.initTippyInstance(),this.tip.show()),this.intersectionObserver=new IntersectionObserver(this.hasIntersectedViewport),this.intersectionObserver.observe(this.popoverContentEl)},beforeUnmount(){var e,t;(e=this.tip)==null||e.destroy(),(t=this.intersectionObserver)==null||t.disconnect(),this.removeReferences(),this.removeEventListeners()},methods:{hasIntersectedViewport(e){var i;const t=(i=e==null?void 0:e[0])==null?void 0:i.target;if(!t)return;const o=a.isOutOfViewPort(t);this.isOutsideViewport=o.bottom||o.top},popperOptions(){return u.getPopperOptions({fallbackPlacements:this.fallbackPlacements,tether:this.tether,hasHideModifierEnabled:!0})},validateProps(){this.modal&&this.initialFocusElement==="none"&&console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement')},calculateAnchorZindex(){var e;return a.returnFirstEl(this.$el).getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')||(e=this.anchorEl)!=null&&e.closest(".d-zi-drawer")?650:300},defaultToggleOpen(e){var t,o,i;if(!this.openOnContext&&(this.open===null||this.open===void 0)){if(!((t=this.anchorEl)!=null&&t.contains(e.target))&&!((o=this.anchorEl)!=null&&o.isEqualNode(e.target))||(i=this.anchorEl)!=null&&i.disabled)return;this.toggleOpen()}},async onContext(e){this.openOnContext&&(e.preventDefault(),this.isOpen=!0,await this.$nextTick(),this.tip.setProps({placement:"right-start",getReferenceClientRect:()=>({width:0,height:0,top:e.clientY,bottom:e.clientY,left:e.clientX,right:e.clientX})}))},toggleOpen(){this.isOpen=!this.isOpen},onArrowKeyPress(e){var t;this.open===null&&(this.openWithArrowKeys&&((t=this.anchorEl)!=null&&t.contains(e.target))&&(this.isOpen||(this.isOpen=!0)),this.$emit("keydown",e))},addEventListeners(){window.addEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.addEventListener("resize",this.onResize)},removeEventListeners(){window.removeEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.removeEventListener("resize",this.onResize)},closePopover(){this.isOpen=!1},preventScrolling(){var e,t;if(this.modal){const o=(e=this.anchorEl)==null?void 0:e.closest("body, .tippy-box");if(!o)return;((t=o.tagName)==null?void 0:t.toLowerCase())==="body"?(a.disableRootScrolling(this.anchorEl.getRootNode().host),this.tip.setProps({offset:this.offset})):o.classList.add("d-zi-popover")}},enableScrolling(){var t,o;const e=(t=this.anchorEl)==null?void 0:t.closest("body, .tippy-box");e&&(((o=e.tagName)==null?void 0:o.toLowerCase())==="body"?(a.enableRootScrolling(this.anchorEl.getRootNode().host),this.tip.setProps({offset:this.offset})):e.classList.remove("d-zi-popover"))},removeReferences(){this.anchorEl=null,this.popoverContentEl=null,this.tip=null},async onShow(){this.contentWidth==="anchor"&&await this.setPopoverContentAnchorWidth(),this.contentWidth===null&&(this.popoverContentEl.style.width="auto"),this.addEventListeners()},async onLeaveTransitionComplete(){var e;this.modal&&(await this.focusFirstElement(this.$refs.anchor),await this.$nextTick(),this.enableScrolling()),(e=this.tip)==null||e.unmount(),this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},async onEnterTransitionComplete(){this.focusInitialElement(),await this.$nextTick(),this.preventScrolling(),this.$emit("opened",!0,this.$refs.popover__content),this.open!==null&&this.$emit("update:open",!0)},focusInitialElement(){var e,t;this.initialFocusElement==="dialog"&&((t=a.returnFirstEl((e=this.$refs.content)==null?void 0:e.$el))==null||t.focus()),this.initialFocusElement.startsWith("#")&&this.focusInitialElementById(),this.initialFocusElement==="first"&&this.focusFirstElementIfNeeded(this.$refs.popover__content),this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},focusInitialElementById(){var t,o,i;const e=(o=a.returnFirstEl((t=this.$refs.content)==null?void 0:t.$el))==null?void 0:o.querySelector(this.initialFocusElement);e?e.focus():console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'),e?e.focus():a.returnFirstEl((i=this.$refs.content)==null?void 0:i.$el).focus()},onResize(){this.closePopover()},onClickOutside(){var t;if(!this.hideOnClick)return;((t=this.popoverContentEl)==null?void 0:t.querySelector(".d-popover__anchor--opened"))||this.closePopover()},onKeydown(e){e.key==="Tab"&&this.modal&&this.focusTrappedTabPress(e,this.popoverContentEl),e.key==="Escape"&&this.closePopover(),this.$emit("keydown",e)},async setPopoverContentAnchorWidth(){var e;await this.$nextTick(),this.popoverContentEl.style.width=`${(e=this.anchorEl)==null?void 0:e.clientWidth}px`},focusFirstElementIfNeeded(e){var o,i;this._getFocusableElements(e,!0).length!==0?this.focusFirstElement(e):this.showCloseButton?(o=this.$refs.popover__header)==null||o.focusCloseButton():a.returnFirstEl((i=this.$refs.content)==null?void 0:i.$el).focus()},getReferenceClientRect(e){var p,h;const t=(p=this.anchorEl)==null?void 0:p.getBoundingClientRect();if(this.appendTo!=="root"||e)return t;const o=(h=this.anchorEl)==null?void 0:h.ownerDocument,i=(o==null?void 0:o.defaultView)||(o==null?void 0:o.parentWindow),l=i==null?void 0:i.frameElement;if(!l)return t;const s=l.getBoundingClientRect();return{width:t==null?void 0:t.width,height:t==null?void 0:t.height,top:(s==null?void 0:s.top)+(t==null?void 0:t.top),left:(s==null?void 0:s.left)+(t==null?void 0:t.left),right:(s==null?void 0:s.right)+(t==null?void 0:t.right),bottom:(s==null?void 0:s.bottom)+(t==null?void 0:t.bottom)}},initTippyInstance(){var o,i;let e=null,t=!1;switch(this.appendTo){case"body":e=(i=(o=this.anchorEl)==null?void 0:o.getRootNode())==null?void 0:i.querySelector("body");break;case"root":try{e=window.parent.document.body}catch(l){console.error("Could not attach the popover to iframe parent window: ",l),e="parent",t=!0}break;default:e=this.appendTo;break}this.tip=u.createTippyPopover(this.anchorEl,{popperOptions:this.popperOptions(),contentElement:this.popoverContentEl,placement:this.placement,offset:this.offset,sticky:this.sticky,appendTo:e,interactive:!0,trigger:"manual",getReferenceClientRect:()=>this.getReferenceClientRect(t),hideOnClick:!1,zIndex:this.modal?650:this.calculateAnchorZindex(),onClickOutside:this.onClickOutside,onShow:this.onShow})},onMouseEnter(){this.$emit("mouseenter-popover")},onMouseLeave(){this.$emit("mouseleave-popover")},onMouseEnterAnchor(){this.$emit("mouseenter-popover-anchor")},onMouseLeaveAnchor(){this.$emit("mouseleave-popover-anchor")}}},C=["id","data-qa","tabindex"],O=["data-qa"];function w(e,t,o,i,l,s){const p=n.resolveComponent("popover-header-footer"),h=n.resolveComponent("sr-only-close-button"),c=n.resolveComponent("dt-lazy-show");return n.openBlock(),n.createElementBlock("div",null,[o.modal&&l.isOpen?(n.openBlock(),n.createBlock(n.Teleport,{key:0,to:"body"},[n.createElementVNode("div",{class:"d-modal--transparent",onClick:t[0]||(t[0]=n.withModifiers(()=>{},["prevent","stop"]))})])):n.createCommentVNode("",!0),(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.elementType),{ref:"popover",class:n.normalizeClass(["d-popover",{"d-popover__anchor--opened":l.isOpen}]),"data-qa":"dt-popover-container"},{default:n.withCtx(()=>[n.createElementVNode("div",{id:!o.ariaLabelledby&&s.labelledBy,ref:"anchor","data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-anchor`:"dt-popover-anchor",tabindex:o.openOnContext?0:void 0,onClickCapture:t[1]||(t[1]=(...r)=>s.defaultToggleOpen&&s.defaultToggleOpen(...r)),onContextmenu:t[2]||(t[2]=(...r)=>s.onContext&&s.onContext(...r)),onKeydown:[t[3]||(t[3]=n.withKeys(n.withModifiers((...r)=>s.onArrowKeyPress&&s.onArrowKeyPress(...r),["prevent"]),["up"])),t[4]||(t[4]=n.withKeys(n.withModifiers((...r)=>s.onArrowKeyPress&&s.onArrowKeyPress(...r),["prevent"]),["down"])),t[6]||(t[6]=n.withKeys(r=>e.$emit("keydown",r),["enter"])),t[7]||(t[7]=n.withKeys(r=>e.$emit("keydown",r),["space"]))],onKeydownCapture:t[5]||(t[5]=n.withKeys((...r)=>s.closePopover&&s.closePopover(...r),["escape"])),onMouseenter:t[8]||(t[8]=(...r)=>s.onMouseEnter&&s.onMouseEnter(...r)),onMouseleave:t[9]||(t[9]=(...r)=>s.onMouseLeave&&s.onMouseLeave(...r))},[n.renderSlot(e.$slots,"anchor",{attrs:{"aria-expanded":l.isOpen.toString(),"aria-controls":o.id,"aria-haspopup":o.role}})],40,C),n.createVNode(c,n.mergeProps({id:o.id,ref:"content",role:o.role,"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}__dialog`:"dt-popover","aria-hidden":`${!l.isOpen}`,"aria-labelledby":s.labelledBy,"aria-label":o.ariaLabel,"aria-modal":`${!o.modal}`,transition:o.transition,show:l.isOpen,appear:l.toAppear,class:["d-popover__dialog",{"d-popover__dialog--modal":o.modal},o.dialogClass],style:{"max-height":s.calculatedMaxHeight,"max-width":o.maxWidth},css:e.$attrs.css,tabindex:o.contentTabindex},n.toHandlers(s.popoverListeners),{onMouseenter:s.onMouseEnterAnchor,onMouseleave:s.onMouseLeaveAnchor}),{default:n.withCtx(()=>[l.hasSlotContent(e.$slots.headerContent)||o.showCloseButton?(n.openBlock(),n.createBlock(p,{key:0,ref:"popover__header",class:n.normalizeClass(l.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),"content-class":o.headerClass,type:"header","show-close-button":o.showCloseButton,onClose:s.closePopover},{content:n.withCtx(()=>[n.renderSlot(e.$slots,"headerContent",{close:s.closePopover})]),_:3},8,["class","content-class","show-close-button","onClose"])):n.createCommentVNode("",!0),n.createElementVNode("div",{ref:"popover__content","data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-content`:"dt-popover-content",class:n.normalizeClass(["d-popover__content",l.POPOVER_PADDING_CLASSES[o.padding],o.contentClass])},[n.renderSlot(e.$slots,"content",{close:s.closePopover})],10,O),l.hasSlotContent(e.$slots.footerContent)?(n.openBlock(),n.createBlock(p,{key:1,ref:"popover__footer",type:"footer",class:n.normalizeClass(l.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),"content-class":o.footerClass},{content:n.withCtx(()=>[n.renderSlot(e.$slots,"footerContent",{close:s.closePopover})]),_:3},8,["class","content-class"])):n.createCommentVNode("",!0),o.showCloseButton?n.createCommentVNode("",!0):(n.openBlock(),n.createBlock(h,{key:2,onClose:s.closePopover},null,8,["onClose"]))]),_:3},16,["id","role","data-qa","aria-hidden","aria-labelledby","aria-label","aria-modal","transition","show","appear","class","style","css","tabindex","onMouseenter","onMouseleave"])]),_:3},8,["class"]))])}const b=y._(g,[["render",w]]);exports.default=b;
//# sourceMappingURL=popover.cjs.map