FileMaster

Edit File: dropdown.js

import{h}from"@stencil/core";import{autoUpdate,computePosition,flip,offset,shift,size}from"@floating-ui/dom";import{speak}from"@wordpress/a11y";import{__}from"@wordpress/i18n";let itemIndex=0,arrowFlag="";export class ScDropdown{constructor(){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(__("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(__("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"}))))}static get is(){return"sc-dropdown"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["dropdown.scss"]}}static get styleUrls(){return{$:["dropdown.css"]}}static get properties(){return{clickEl:{type:"unknown",mutable:!1,complexType:{original:"HTMLElement",resolved:"HTMLElement",references:{HTMLElement:{location:"global",id:"global::HTMLElement"}}},required:!1,optional:!0,docs:{tags:[],text:""}},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 dropdown is open. You can use this in lieu of the show/hide methods."},attribute:"open",reflect:!0,defaultValue:"false"},position:{type:"string",mutable:!1,complexType:{original:"'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'",resolved:'"bottom-left" | "bottom-right" | "top-left" | "top-right"',references:{}},required:!1,optional:!1,docs:{tags:[],text:"The placement of the dropdown panel"},attribute:"position",reflect:!1},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 dropdown."},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:"10"},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"},closeOnSelect:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Determines whether the dropdown should hide when a menu item is selected"},attribute:"close-on-select",reflect:!0,defaultValue:"true"}}}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 dropdown 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 dropdown 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"}]}static get listeners(){return[{name:"keydown",method:"handleKeyDown",target:void 0,capture:!1,passive:!1}]}}

Back