@arcgis/core/widgets/FeatureTable/Grid/support/ButtonMenu.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
*/
import{_ as e}from"../../../../chunks/tslib.es6.js";import{renderingSanitizer as t}from"../../../../core/sanitizerUtils.js";import{property as o}from"../../../../core/accessorSupport/decorators/property.js";import"../../../../core/has.js";import"../../../../core/Logger.js";import"../../../../core/RandomLCG.js";import{subclass as n}from"../../../../core/accessorSupport/decorators/subclass.js";import s from"../../../Widget.js";import i from"./ButtonMenuViewModel.js";import{loadCalciteComponents as r}from"../../../support/componentsUtils.js";import{globalCss as l}from"../../../support/globalCss.js";import{storeNode as a,isActivationKey as d}from"../../../support/widgetUtils.js";import{tsx as c}from"../../../support/jsxFactory.js";const p="esri-button-menu",m={base:p,content:`${p}__content`,itemWrapper:`${p}__item-wrapper`,icon:`${p}__icon`,item:`${p}__item`,itemLabel:`${p}__item-label`,itemLabelContent:`${p}__item-label-content`,selectableMenuItem:`${p}__item--selectable`,selectedMenuItem:`${p}__item--selected`,checkbox:`${p}__checkbox`,embeddedContentWrapper:`${p}__embedded-content-wrapper`,button:`${p}__button`,buttonSelected:`${p}__button--selected`};let u=class extends s{constructor(e,t){super(e,t),this._popover=null,this.disabled=!1,this.viewModel=new i}loadDependencies(){return r({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),popover:()=>import("@esri/calcite-components/dist/components/calcite-popover")})}destroy(){this._popover=null}get items(){return this.viewModel.items}set items(e){this.viewModel.items=e}get open(){return this.viewModel.open}set open(e){this.viewModel.open=e}render(){const{open:e}=this,t=`${this.id}-button`;return c("div",{class:this.classes(m.base,l.widget),key:"menu"},c("calcite-button",{appearance:"transparent",bind:this,class:this.classes(m.button,e&&m.buttonSelected),disabled:this.disabled,iconStart:e?"x":"ellipsis",id:t,kind:"neutral",label:this.label||"button",onclick:()=>this._toggleOpen(e),tabIndex:0}),c("calcite-popover",{afterCreate:a,afterUpdate:()=>this._popover?.reposition(),autoClose:!0,bind:this,"data-node-ref":"_popover",label:this.label||"menu",open:e,overlayPositioning:"fixed",pointerDisabled:!0,referenceElement:t,onCalcitePopoverClose:this._onPopoverClose},this._renderMenuContent()))}_onPopoverClose(){this.open=!1}_renderMenuContent(){const{id:e,open:t}=this;return c("div",{afterCreate:this._afterMenuContentNodeCreate,bind:this,class:m.content,hidden:!t,key:"esri-button-menu-content"},c("ul",{"aria-labelledby":`${e}-button`,bind:this,class:m.itemWrapper,id:`${e}-menu`,role:"menu"},this.items?.length?this._renderItems():null))}_renderItems(){return this.items?.map(((e,t)=>this._renderItem(e,t)))}_renderItem(e,o,n){const s=null!=n?`${this.id}-menu-item-${o}-${n}`:`${this.id}-menu-item-${o}`,i=`${s}-label`,r=this.classes(m.item,e.selectionEnabled?m.selectableMenuItem:null,e.selectionEnabled&&e.selected?m.selectedMenuItem:null);return c("li",{afterCreate:this._afterMenuItemCreate,bind:this,class:r,"data-item-index":o,"data-item-subIndex":n,for:s,key:s,onclick:t=>this._handleMenuItemInteraction(t,e),onkeydown:t=>this._handleMenuItemKeydown(t,e),role:"menuitem",tabIndex:this.disabled?-1:0},c("input",{checked:e.selected,class:m.checkbox,disabled:!0,id:s,name:s,tabIndex:-1,type:"checkbox"}),c("label",{class:m.itemLabel,for:s,id:i},c("span",{"aria-hidden":"true",class:m.icon}),c("span",{class:m.itemLabelContent},t.sanitize(e.label))),c("ul",{"aria-labelledby":i,class:m.embeddedContentWrapper,id:`${this.id}-submenu`,role:"menu"},e?.items?.map(((e,t)=>this._renderItem(e,o,t)))))}_handleMenuItemInteraction(e,t){t.selected=!t.selected,t.open=!(!t.selected||!t.items),t.autoCloseMenu&&this.set("open",!1),t.clickFunction&&t.clickFunction({event:e,item:t}),e.stopPropagation()}_handleMenuItemKeydown(e,t){const{key:o}=e;d(o)&&this._handleMenuItemInteraction(e,t),"Escape"===o&&(this.open=!1,e.preventDefault(),e.stopPropagation())}_afterMenuContentNodeCreate(e){e.focus()}_toggleOpen(e){this.open=!e}_afterMenuItemCreate(e){0===e["data-item-index"]&&e.focus()}};e([o()],u.prototype,"disabled",void 0),e([o()],u.prototype,"items",null),e([o()],u.prototype,"open",null),e([o()],u.prototype,"viewModel",void 0),u=e([n("esri.widgets.FeatureTable.Grid.support.ButtonMenu")],u);const b=u;export{b as default};