FileMaster

Edit File: sc-popover.js

import{h}from"@stencil/core";import{autoUpdate,computePosition,flip,offset,shift,size}from"@floating-ui/dom";import{__}from"@wordpress/i18n";import{speak}from"@wordpress/a11y";export class ScPopover{constructor(){this.boundHandleOutsideClick=e=>this.handleOutsideClick(e),this.boundHandleKeyDown=e=>this.handleKeyDown(e),this.boundHandleFocusOut=e=>this.handleFocusOut(e),this.disabled=void 0,this.open=!1,this.placement="bottom-start",this.distance=0,this.skidding=0,this.hoist=!1,this.isVisible=void 0}handleOpenChange(){this.open?this.show():this.hide()}handleOutsideClick(e){e.composedPath().some((e=>e===this.el))||(this.open=!1)}handleKeyDown(e){"Escape"===e.key&&(e.stopPropagation(),this.hide())}handleTriggerKeyDown(e){if("Enter"===e.key||" "===e.key){if(e.preventDefault(),this.disabled)return;this.open?this.hide():this.show()}}handleFocusOut(e){const t=e.relatedTarget;t&&!this.el.contains(t)&&(this.open=!1)}startPositioner(){this.stopPositioner(),this.updatePositioner(),this.positionerCleanup=autoUpdate(this.trigger,this.positioner,this.updatePositioner.bind(this))}updatePositioner(){this.open&&this.trigger&&this.positioner&&computePosition(this.trigger,this.positioner,{placement:this.placement,middleware:[offset({mainAxis:this.distance,crossAxis:this.skidding}),flip(),shift(),size({apply:({availableWidth:e,availableHeight:t})=>{Object.assign(this.panel.style,{maxWidth:`${e}px`,maxHeight:`${t}px`})},padding:8})],strategy:this.hoist?"fixed":"absolute"}).then((({x:e,y:t,placement:o})=>{this.positioner.setAttribute("data-placement",o),Object.assign(this.positioner.style,{position:this.hoist?"fixed":"absolute",left:`${e}px`,top:`${t}px`,right:"auto"})}))}stopPositioner(){var e;this.positionerCleanup&&(this.positionerCleanup(),this.positionerCleanup=void 0,null===(e=this.positioner)||void 0===e||e.removeAttribute("data-placement"))}show(){speak(__("Popover opened. Press Escape to close.","surecart"),"assertive"),this.scShow.emit(),this.isVisible||(this.isVisible=!0,this.open=!0,this.startPositioner(),document.addEventListener("keydown",this.boundHandleKeyDown),this.el.addEventListener("focusout",this.boundHandleFocusOut),this.panel.focus())}hide(){var e;if(speak(__("Popover closed.","surecart"),"assertive"),this.scHide.emit(),!this.isVisible)return;this.stopPositioner(),document.removeEventListener("keydown",this.boundHandleKeyDown),this.el.removeEventListener("focusout",this.boundHandleFocusOut),this.isVisible=!1,this.open=!1;const t=this.el.shadowRoot.querySelector('slot[name="trigger"]').assignedElements({flatten:!0})[0];null===(e=null==t?void 0:t.focus)||void 0===e||e.call(t)}componentWillLoad(){document.addEventListener("mousedown",this.boundHandleOutsideClick)}disconnectedCallback(){document.removeEventListener("mousedown",this.boundHandleOutsideClick),document.removeEventListener("keydown",this.boundHandleKeyDown),this.el.removeEventListener("focusout",this.boundHandleFocusOut)}handleHide(){this.open=!1,this.trigger.focus()}render(){return h("div",{key:"4476ca548c15fe56a44eae155f62ef71aeddace7",part:"base",class:{popover:!0,"popover--open":this.open,"popover--disabled":this.disabled}},h("span",{key:"6a9808307b807e7447d6c3462ab996327107fef1",part:"trigger",class:"popover__trigger",ref:e=>this.trigger=e,onClick:()=>{this.disabled||(this.open?this.hide():setTimeout((()=>{this.show()}),0))},onKeyDown:e=>this.handleTriggerKeyDown(e),tabindex:"0",role:"button","aria-expanded":this.open?"true":"false","aria-haspopup":"dialog","aria-label":__("Press Enter to open popover","surecart")},h("slot",{key:"db33d95a8adcea45e00440c5b57e25ad1f3cc4bd",name:"trigger"})),h("div",{key:"a0784e3aad7390b51f77ae8d681cfeaab28cefff",class:"popover__positioner",ref:e=>this.positioner=e},h("div",{key:"558c5a05a654f5f606087dfe7349a2b707d4bc57",part:"panel",class:"popover__panel",role:"dialog","aria-modal":"false",tabindex:"-1",ref:e=>this.panel=e},h("div",{key:"1156def1e343a3e85b914ea3e8f60e14b8b14bcb",class:"popover__header"},h("slot",{key:"3734de42a6f231ee4217867bdf3a7c477a1e2f90",name:"title"}),h("button",{key:"de0de0b7e33fdbe2d34fe9120f7acecdb5c66762",type:"button",class:"popover__header-close-button",onClick:()=>this.handleHide(),onKeyDown:e=>"Enter"===e.key&&this.handleHide(),"aria-label":__("Close","surecart")},h("sc-icon",{key:"d2143106c34526da7989fc52aca6c38a3f82d7fe",class:"popover__header-close-icon",name:"x"}))),h("slot",{key:"756a9284b3a5598e3545ecfaa4d356e6bbb158d5",name:"content"}),h("div",{key:"d870a248537c405adbf15cb30bb71810b615bc15",class:"popover__footer"},h("slot",{key:"8a8ad84cb03161e43e1869243dcf9761fd7e31ae",name:"footer"})))))}static get is(){return"sc-popover"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["sc-popover.scss"]}}static get styleUrls(){return{$:["sc-popover.css"]}}static get properties(){return{disabled:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Is this disabled."},attribute:"disabled",reflect:!1},open:{type:"boolean",mutable:!0,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!0,docs:{tags:[],text:"Indicates whether or not the popover is open. You can use this in lieu of the show/hide methods."},attribute:"open",reflect:!0,defaultValue:"false"},placement:{type:"string",mutable:!1,complexType:{original:"| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",resolved:'"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"',references:{}},required:!1,optional:!1,docs:{tags:[],text:"The placement of the popover."},attribute:"placement",reflect:!0,defaultValue:"'bottom-start'"},distance:{type:"number",mutable:!1,complexType:{original:"number",resolved:"number",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The distance in pixels from which to offset the panel away from its trigger."},attribute:"distance",reflect:!1,defaultValue:"0"},skidding:{type:"number",mutable:!1,complexType:{original:"number",resolved:"number",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The distance in pixels from which to offset the panel along its trigger."},attribute:"skidding",reflect:!1,defaultValue:"0"},hoist:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."},attribute:"hoist",reflect:!1,defaultValue:"false"}}}static get states(){return{isVisible:{}}}static get events(){return[{method:"scShow",name:"scShow",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Emitted when the popover opens. Calling `event.preventDefault()` will prevent it from being opened."},complexType:{original:"void",resolved:"void",references:{}}},{method:"scHide",name:"scHide",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Emitted when the popover closes. Calling `event.preventDefault()` will prevent it from being closed."},complexType:{original:"void",resolved:"void",references:{}}}]}static get elementRef(){return"el"}static get watchers(){return[{propName:"open",methodName:"handleOpenChange"}]}}

Back