FileMaster

Edit File: dropdown.js

import{proxyCustomElement,HTMLElement,createEvent,h}from"@stencil/core/internal/client";import{a as autoUpdate,c as computePosition,o as offset,f as flip,s as shift,b as size}from"./floating-ui.dom.esm.js";import{s as speak}from"./index2.js";const dropdownCss=":host{display:inline-block;--panel-height:75vh;--panel-width:11rem}.dropdown{position:relative}.dropdown.dropdown--open .dropdown__positioner{visibility:visible;opacity:1;transform:scale(1)}.dropdown__trigger{display:block;cursor:pointer;border-width:0;outline:none;background-color:unset}.dropdown--disabled,.dropdown--disabled .dropdown__trigger{cursor:not-allowed}.dropdown__positioner{position:absolute;right:0;width:100%;z-index:var(--sc-z-index-dropdown);opacity:0;visibility:hidden;transform:scale(0.9);min-width:var(--panel-width)}.dropdown__panel{transform-origin:top left;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);max-height:var(--panel-height);font-family:var(--sc-font-sans);font-size:var(--sc-font-size-medium);font-weight:var(--sc-font-weight-normal);color:var(--color);background-color:var(--sc-panel-background-color);border:solid 1px var(--sc-panel-border-color);border-radius:var(--sc-border-radius-medium);box-shadow:var(--sc-shadow-large);overflow:auto;overscroll-behavior:none;transition:var(--sc-transition-fast) opacity, var(--sc-transition-fast) transform;z-index:5}",ScDropdownStyle0=dropdownCss;let itemIndex=0,arrowFlag="";const ScDropdown=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.scShow=createEvent(this,"scShow",7),this.scHide=createEvent(this,"scHide",7),this.clickEl=void 0,this.disabled=void 0,this.open=!1,this.position=void 0,this.placement="bottom-start",this.distance=10,this.skidding=0,this.hoist=!1,this.closeOnSelect=!0,this.isVisible=void 0}handleOpenChange(){this.open?this.show():this.hide()}handleOutsideClick(e){e.composedPath().some((e=>e===this.el))||(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:i})=>{this.positioner.setAttribute("data-placement",i),Object.assign(this.positioner.style,{position:this.hoist?"fixed":"absolute",left:`${e}px`,top:`${t}px`,right:"auto"})}))}stopPositioner(){this.positionerCleanup&&(this.positionerCleanup(),this.positionerCleanup=void 0,this.positioner.removeAttribute("data-placement"))}show(){speak(wp.i18n.__("Menu Selection Dropdown opened. Press Up/Down arrow to toggle between menu items.","surecart"),"assertive"),this.scShow.emit(),this.isVisible||(this.isVisible=!0,this.open=!0,this.startPositioner(),this.panel.focus())}hide(){speak(wp.i18n.__("Menu Selection Dropdown closed.","surecart"),"assertive"),this.scHide.emit(),this.isVisible&&(this.stopPositioner(),this.isVisible=!1,this.open=!1,this.el.shadowRoot.querySelector('slot[name="trigger"]').assignedElements({flatten:!0})[0].focus())}handleClick(e){this.closeOnSelect&&e.composedPath().some((e=>e.classList&&e.classList.contains("menu-item")))&&(this.open=!1)}componentWillLoad(){document.addEventListener("mousedown",(e=>this.handleOutsideClick(e)))}getMenu(){return this.el.shadowRoot.querySelector("slot").assignedNodes().find((e=>"sc-menu"===e.nodeName))}getItems(){return[...this.el.querySelectorAll("sc-menu-item")]}handleHide(){this.open=!1,itemIndex=0,this.trigger.focus()}handleKeyDown(e){const t=this.getItems();if("Tab"!==e.key){if(["ArrowDown","ArrowUp"].includes(e.key)){if(e.preventDefault(),e.stopImmediatePropagation(),this.open||(this.open=!0),"ArrowDown"===e.key)return"up"==arrowFlag&&(itemIndex+=2),itemIndex>t.length-1&&(itemIndex=0),t[itemIndex].setFocus(),arrowFlag="down",void itemIndex++;if("ArrowUp"===e.key)return"down"==arrowFlag&&(itemIndex-=2),itemIndex<0&&(itemIndex=t.length-1),t[itemIndex].setFocus(),arrowFlag="up",void itemIndex--}"Escape"!==e.key?("Enter"===e.key&&(this.open?this.handleHide():(e.stopImmediatePropagation(),e.preventDefault(),this.open=!0)),!e.ctrlKey&&e.metaKey):this.open&&this.handleHide()}else this.open&&this.handleHide()}render(){return h("div",{key:"3dea7e493e11ac1318d9b7b19cf7553748d93684",part:"base",class:{dropdown:!0,"dropdown--open":this.open,"dropdown--disabled":this.disabled}},h("span",{key:"abed75deab77bfeb4f3f41d5459cf70510287840",part:"trigger",class:"dropdown__trigger",ref:e=>this.trigger=e,onClick:()=>{this.disabled||(this.open?this.hide():setTimeout((()=>{this.show()}),0))},"aria-expanded":this.open?"true":"false","aria-haspopup":"true"},h("slot",{key:"356c58e3c99c410156dc8b05dc0518ae58d7a7bc",name:"trigger"})),h("div",{key:"946e5ee224af74ce9fa9419bb1ba68ac13553599",class:"dropdown__positioner",ref:e=>this.positioner=e},h("div",{key:"0672633f41fb3a3cf964f0e60f4cce2b6566f9c0",part:"panel",class:{dropdown__panel:!0,"position--top-left":"top-left"===this.position,"position--top-right":"top-right"===this.position,"position--bottom-left":"bottom-left"===this.position,"position--bottom-right":"bottom-right"===this.position},"aria-orientation":"vertical",tabindex:"-1",onClick:e=>this.handleClick(e),ref:e=>this.panel=e},h("slot",{key:"8d11701d9361dfe1eb42d8889aea056c37230922"}))))}get el(){return this}static get watchers(){return{open:["handleOpenChange"]}}static get style(){return ScDropdownStyle0}},[1,"sc-dropdown",{clickEl:[16],disabled:[4],open:[1540],position:[1],placement:[513],distance:[2],skidding:[2],hoist:[4],closeOnSelect:[516,"close-on-select"],isVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:["handleOpenChange"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-dropdown"].forEach((e=>{"sc-dropdown"===e&&(customElements.get(e)||customElements.define(e,ScDropdown))}))}export{ScDropdown as S,defineCustomElement as d};

Back