@react-native/debugger-frontend/dist/third-party/front_end/ui/components/menus/menus.js

Debugger frontend for React Native based on Chrome DevTools

import*as e from"../../../core/platform/platform.js";import*as t from"../helpers/helpers.js";import*as s from"../render_coordinator/render_coordinator.js";import*as o from"../../lit/lit.js";import*as n from"../../visual_logging/visual_logging.js";import"../dialogs/dialogs.js";var r={cssText:`:host{border-radius:3px;width:fit-content;display:flex;align-items:center;background-color:var(--override-menu-background-color,var(--sys-color-cdt-base-container))}:host([has-open-dialog]){background-color:var(--override-menu-active-background-color,var(--sys-color-neutral-container))}#container{list-style-type:none;margin-top:var(--sys-size-4);padding:0;width:fit-content;display:block}#container:focus{outline:none}@keyframes slideIn{from{transform:var(--translate-dialog);opacity:0%}to{transform:none;opacity:100%}}\n/*# sourceURL=${import.meta.resolve("./menu.css")} */\n`},i={cssText:`.menu-group-label{font-size:12px;line-height:16px;position:relative;color:var(--sys-color-token-subtle);display:block}\n/*# sourceURL=${import.meta.resolve("./menuGroup.css")} */\n`},l={cssText:`.menu-item{padding:var(--sys-size-3) 0 var(--sys-size-3) var(--sys-size-9);font-size:12px;line-height:16px;position:relative;display:block;color:var(--sys-color-on-surface)}.menu-item:focus{outline:none}:host(.no-checkmark) .menu-item{padding-left:0}:host(:not(:first-child)) .menu-item{border-top:var(--override-divider-line)}:host-context(devtools-menu-group) .menu-item{padding:var(--sys-size-3) 0 var(--sys-size-3) var(--sys-size-9)}.is-selected-item::before{content:"";position:absolute;left:var(--sys-size-2);top:50%;transform:translateY(-50%);display:inline-block;mask-repeat:no-repeat;mask-position:center;width:calc(var(--menu-checkmark-width) - 10px);height:var(--menu-checkmark-height);mask-image:var(--selected-item-check);background:var(--sys-color-token-subtle)}.is-disabled-item{opacity:60%}:host(:hover:not(.prevents-close)) .menu-item::after,\n:host(:focus-visible:not(.prevents-close)) .menu-item::after{content:"";height:100%;width:calc(100% + 2* var(--sys-size-8));border-radius:inherit;position:absolute;top:0;left:calc(-1 * var(--sys-size-8));background-color:var(--sys-color-state-hover-on-subtle)}:host(:focus){outline:none}\n/*# sourceURL=${import.meta.resolve("./menuItem.css")} */\n`};const d=new CSSStyleSheet;d.replaceSync(r.cssText);const a=new CSSStyleSheet;a.replaceSync(i.cssText);const h=new CSSStyleSheet;h.replaceSync(l.cssText);const{html:c}=o,u=new URL("../../../Images/checkmark.svg",import.meta.url).toString();class p extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=this.#s.bind(this);#o=null;#n=!1;#r={origin:null,open:!1,position:"auto",showDivider:!1,showSelectedItem:!0,horizontalAlignment:"auto",getConnectorCustomXPosition:null};get origin(){return this.#r.origin}set origin(e){this.#r.origin=e,t.ScheduledRender.scheduleRender(this,this.#t)}get open(){return this.#r.open}set open(e){e!==this.open&&(this.#r.open=e,this.toggleAttribute("has-open-dialog",this.open),this.#i().setDialogVisible(this.open),t.ScheduledRender.scheduleRender(this,this.#t))}get position(){return this.#r.position}set position(e){this.#r.position=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showDivider(){return this.#r.showDivider}set showDivider(e){this.#r.showDivider=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showSelectedItem(){return this.#r.showSelectedItem}set showSelectedItem(e){this.#r.showSelectedItem=e,t.ScheduledRender.scheduleRender(this,this.#t)}get horizontalAlignment(){return this.#r.horizontalAlignment}set horizontalAlignment(e){this.#r.horizontalAlignment=e,t.ScheduledRender.scheduleRender(this,this.#t)}get getConnectorCustomXPosition(){return this.#r.getConnectorCustomXPosition}set getConnectorCustomXPosition(e){this.#r.getConnectorCustomXPosition=e,t.ScheduledRender.scheduleRender(this,this.#t)}connectedCallback(){this.#e.adoptedStyleSheets=[d],s.write((()=>{this.style.setProperty("--selected-item-check",`url(${u})`),this.style.setProperty("--menu-checkmark-width",this.#r.showSelectedItem?"26px":"0px"),this.style.setProperty("--menu-checkmark-height",this.#r.showSelectedItem?"12px":"0px");const e=this.showDivider?"1px var(--divider-line) solid":"none";this.style.setProperty("--override-divider-line",e)}))}#i(){if(!this.#o)throw new Error("Dialog not found");return this.#o}async#l(){await s.write((()=>{this.setAttribute("has-open-dialog","has-open-dialog");const e=this.#e.querySelector("#container");e instanceof HTMLElement&&e.focus()}))}#d(){this.#a().focus()}#a(){const e=this.#e.querySelector("slot"),t=e?.assignedElements();let s=t[0];if(s instanceof HTMLSlotElement&&(s=s?.assignedElements()[0]),s instanceof g){const e=s.shadowRoot?.querySelector("slot");s=e?.assignedElements()[0]}if(s instanceof HTMLElement)return s;throw new Error("First item not found")}#h(e){const t=e.composedPath();if(e.stopPropagation(),t.find((e=>e instanceof HTMLInputElement)))return;const s=e.composedPath().find((e=>e instanceof m));s instanceof m&&(s.disabled||this.#c(s))}#u(t){const s=t.key;t.stopImmediatePropagation();let o=t.target;const n=t.composedPath(),r="ArrowDown"===s||"ArrowRight"===s;return!this.#n&&r?(this.#d(),void(this.#n=!0)):this.#n||"ArrowUp"!==s?void((o instanceof m||(o=n.find((e=>e instanceof m)),o instanceof m))&&(e.KeyboardUtilities.keyIsArrowKey(s)?this.#p(s,o):"Home"===s?this.#m(o):"End"===s?this.#g():"Enter"===s||"Space"===t.code?this.#c(o):"Escape"===s&&(t.preventDefault(),this.#w()))):(this.#g(),void(this.#n=!0))}#c(e){""!==e.value&&(this.dispatchEvent(new w(e.value)),e.preventMenuCloseOnSelection||this.#w())}#p(e,t){let s=t;"ArrowDown"===e?(s=t.nextElementSibling,null===s&&t.parentElement instanceof g&&(s=this.#b(t))):"ArrowUp"===e&&(s=t.previousElementSibling,null===s&&t.parentElement instanceof g&&(s=this.#v(t))),s instanceof m&&s.focus()}#b(e){const t=e.parentElement;if(!(t instanceof g))return null;const s=t.nextElementSibling;if(s instanceof m)return s;if(!(s instanceof g))return null;for(const e of s.children)if(e instanceof m)return e;return null}#v(e){const t=e.parentElement;if(!(t instanceof g))return null;const s=t.previousElementSibling;return s instanceof m?s:s instanceof g&&s.lastElementChild instanceof m?s.lastElementChild:null}#m(e){let t=e;for(e.parentElement instanceof g&&(t=e.parentElement);t?.previousElementSibling;)t=t?.previousElementSibling;if(t instanceof m)t.focus();else for(const e of t.children)if(e instanceof m)return void e.focus()}#g(){const e=this.#a();let t=e;for(e.parentElement instanceof g&&(t=e.parentElement);t?.nextElementSibling;)t=t?.nextElementSibling;t instanceof m?t.focus():t instanceof g&&t.lastElementChild instanceof m&&t.lastElementChild.focus()}#w(e){e&&e.stopImmediatePropagation(),this.dispatchEvent(new b),this.#i().setDialogVisible(!1),this.#n=!1}async#s(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("Menu render was not scheduled");o.render(c`
      <devtools-dialog
        @clickoutsidedialog=${this.#w}
        @forceddialogclose=${this.#w}
        .position=${this.position}
        .origin=${this.origin}
        .dialogShownCallback=${this.#l.bind(this)}
        .horizontalAlignment=${this.horizontalAlignment}
        .getConnectorCustomXPosition=${this.getConnectorCustomXPosition}
        on-render=${t.Directives.nodeRenderedCallback((e=>{this.#o=e}))}
        >
        <span id="container" role="menu" tabIndex="0" @keydown=${this.#u} jslog=${n.menu().track({resize:!0,keydown:"Escape"})}>
          <slot @click=${this.#h}>
          </slot>
        </span>
      </devtools-dialog>
    `,this.#e,{host:this})}}class m extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=this.#s.bind(this);connectedCallback(){this.#e.adoptedStyleSheets=[h],this.tabIndex=0,this.setAttribute("role","menuitem")}#r={value:"",preventMenuCloseOnSelection:!1,selected:!1,disabled:!1};get preventMenuCloseOnSelection(){return this.#r.preventMenuCloseOnSelection}set preventMenuCloseOnSelection(e){this.#r.preventMenuCloseOnSelection=e,t.ScheduledRender.scheduleRender(this,this.#t)}get value(){return this.#r.value}set value(e){this.#r.value=e,t.ScheduledRender.scheduleRender(this,this.#t)}get selected(){return this.#r.selected}set selected(e){this.#r.selected=e,t.ScheduledRender.scheduleRender(this,this.#t)}get disabled(){return this.#r.disabled}set disabled(e){this.#r.disabled=e,t.ScheduledRender.scheduleRender(this,this.#t)}async#s(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("MenuItem render was not scheduled");o.render(c`
      <span class=${o.Directives.classMap({"menu-item":!0,"is-selected-item":this.selected,"is-disabled-item":this.disabled,"prevents-close":this.preventMenuCloseOnSelection})}
      >
        <slot></slot>
      </span>
    `,this.#e,{host:this})}}class g extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=this.#s.bind(this);connectedCallback(){this.#e.adoptedStyleSheets=[a]}#r={name:null};get name(){return this.#r.name}set name(e){this.#r.name=e,t.ScheduledRender.scheduleRender(this,this.#t)}async#s(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("MenuGroup render was not scheduled");o.render(c`
      <span class="menu-group">
        <span class="menu-group-label">${this.name}</span>
        <slot></slot>
      </span>
    `,this.#e,{host:this})}}customElements.define("devtools-menu",p),customElements.define("devtools-menu-item",m),customElements.define("devtools-menu-group",g);class w extends Event{itemValue;static eventName="menuitemselected";constructor(e){super(w.eventName,{bubbles:!0,composed:!0}),this.itemValue=e}}class b extends Event{static eventName="menucloserequest";constructor(){super(b.eventName,{bubbles:!0,composed:!0})}}var v=Object.freeze({__proto__:null,Menu:p,MenuCloseRequest:b,MenuGroup:g,MenuItem:m,MenuItemSelectedEvent:w}),S={cssText:`:host{border:1px solid var(--sys-color-neutral-outline);border-radius:var(--sys-shape-corner-extra-small);width:fit-content;display:flex;align-items:center;background-color:var(--sys-color-cdt-base-container)}:host([has-open-dialog]){outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring);background:linear-gradient(var(--sys-color-state-hover-on-subtle),var(--sys-color-state-hover-on-subtle)),linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle),var(--sys-color-state-ripple-neutral-on-subtle))}button{background:none}#side-button{border:1px solid var(--sys-color-neutral-outline);border-radius:3px 0 0 3px;border-right:none;height:100%;position:relative;padding:var(--override-select-button-padding)}button:disabled{pointer-events:none}@keyframes slideIn{from{transform:var(--translate-dialog);opacity:0%}to{transform:none;opacity:100%}}\n/*# sourceURL=${import.meta.resolve("./selectMenu.css")} */\n`},f={cssText:`:host{height:var(--sys-size-9);width:100%;display:block}.show{display:block;font-size:12px;color:var(--sys-color-on-surface);height:100%;width:100%;border:none;border-radius:var(--sys-shape-corner-extra-small);padding:0 var(--sys-size-4) 0 var(--sys-size-5);&:hover{background-color:var(--sys-color-state-hover-on-subtle)}&:active{background-color:var(--sys-color-state-ripple-neutral-on-subtle)}&:hover:active{background:linear-gradient(var(--sys-color-state-hover-on-subtle),var(--sys-color-state-hover-on-subtle)),linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle),var(--sys-color-state-ripple-neutral-on-subtle))}&:focus-visible{outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring);outline-offset:-1px}}#button-label-wrapper{display:flex;justify-content:space-between;align-items:center}#label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:fit-content;height:100%}#label[witharrow].single-arrow{padding:0}#label[witharrow]{padding:0 10px 0 0;text-align:left}.single-arrow + span#arrow{margin:0}#arrow{mask-image:var(--deploy-menu-arrow);-webkit-mask-position-y:center;margin-left:5px;width:14px;flex-shrink:0;height:14px;display:inline-block;mask-repeat:no-repeat;background-color:var(--sys-color-on-surface-subtle)}.single-arrow{border-radius:0 3px 3px 0;border:var(--sys-size-1) solid var(--sys-color-neutral-outline);height:100%;aspect-ratio:1/1;padding:0;display:flex;justify-content:center;align-items:center}button{background:none}button[disabled]{color:var(--sys-color-state-disabled);background-color:var(--sys-color-state-disabled-container);#arrow{background-color:var(--sys-color-state-disabled)}}\n/*# sourceURL=${import.meta.resolve("./selectMenuButton.css")} */\n`};const y=new CSSStyleSheet;y.replaceSync(S.cssText);const k=new CSSStyleSheet;k.replaceSync(f.cssText);const{html:x}=o,R=new URL("../../../Images/triangle-down.svg",import.meta.url).toString();class E extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=this.#s.bind(this);#S=null;#f=!1;#r={buttonTitle:"",position:"bottom",horizontalAlignment:"auto",showArrow:!1,sideButton:!1,showDivider:!1,disabled:!1,showSelectedItem:!0,jslogContext:""};get buttonTitle(){return this.#r.buttonTitle}set buttonTitle(e){this.#r.buttonTitle=e,t.ScheduledRender.scheduleRender(this,this.#t)}get position(){return this.#r.position}set position(e){this.#r.position=e,t.ScheduledRender.scheduleRender(this,this.#t)}get horizontalAlignment(){return this.#r.horizontalAlignment}set horizontalAlignment(e){this.#r.horizontalAlignment=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showArrow(){return this.#r.showArrow}set showArrow(e){this.#r.showArrow=e,t.ScheduledRender.scheduleRender(this,this.#t)}get sideButton(){return this.#r.sideButton}set sideButton(e){this.#r.sideButton=e,t.ScheduledRender.scheduleRender(this,this.#t)}get disabled(){return this.#r.disabled}set disabled(e){this.#r.disabled=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showDivider(){return this.#r.showDivider}set showDivider(e){this.#r.showDivider=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showSelectedItem(){return this.#r.showSelectedItem}set showSelectedItem(e){this.#r.showSelectedItem=e,t.ScheduledRender.scheduleRender(this,this.#t)}get jslogContext(){return this.#r.jslogContext}set jslogContext(e){this.#r.jslogContext=e,t.ScheduledRender.scheduleRender(this,this.#t)}connectedCallback(){this.#e.adoptedStyleSheets=[y]}#y(){if(!this.#S&&(this.#S=this.#e.querySelector("devtools-select-menu-button"),!this.#S))throw new Error("Arrow not found");return this.#S}#k(){this.#f=!0,this.setAttribute("has-open-dialog","has-open-dialog"),t.ScheduledRender.scheduleRender(this,this.#t)}click(){this.#y().click()}#x(){this.dispatchEvent(new I)}#R(){return this.buttonTitle instanceof Function?this.buttonTitle():this.buttonTitle}#E(){const e=this.#R();return this.sideButton?x`
      <button id="side-button" @click=${this.#x} ?disabled=${this.disabled}>
        ${e}
      </button>
      <devtools-select-menu-button
        @click=${this.#k}
        @selectmenubuttontrigger=${this.#k}
        .singleArrow=${!0}
        .open=${this.#f}
        .showArrow=${!0}
        .arrowDirection=${this.position}
        .disabled=${this.disabled}>
      </devtools-select-menu-button>
    `:x`
          <devtools-select-menu-button
            @selectmenubuttontrigger=${this.#k}
            .open=${this.#f} .showArrow=${this.showArrow}
            .arrowDirection=${this.position}
            .disabled=${this.disabled}
            .jslogContext=${this.jslogContext}>
              ${e}
            </devtools-select-menu-button>
        `}#C(e){e&&e.stopImmediatePropagation(),s.write((()=>{this.removeAttribute("has-open-dialog")})),this.#f=!1,t.ScheduledRender.scheduleRender(this,this.#t)}#B(e){this.dispatchEvent(new B(e.itemValue))}async#s(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("SelectMenu render was not scheduled");o.render(x`
      <devtools-menu
        @menucloserequest=${this.#C}
        @menuitemselected=${this.#B}
        .position=${this.position}
        .origin=${this}
        .showDivider=${this.showDivider}
        .showSelectedItem=${this.showSelectedItem}
        .open=${this.#f}
        .getConnectorCustomXPosition=${null}
      >
      <slot>
      </slot>
      </devtools-menu>
      ${this.#E()}
    `,this.#e,{host:this})}}class C extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=this.#s.bind(this);#I=null;connectedCallback(){this.#e.adoptedStyleSheets=[k],this.style.setProperty("--deploy-menu-arrow",`url(${R})`),s.write((()=>{switch(this.arrowDirection){case"auto":case"top":this.style.setProperty("--arrow-angle","180deg");break;case"bottom":this.style.setProperty("--arrow-angle","0deg");break;default:e.assertNever(this.arrowDirection,`Unknown position type: ${this.arrowDirection}`)}}))}#r={showArrow:!1,arrowDirection:"bottom",disabled:!1,singleArrow:!1,jslogContext:""};get showArrow(){return this.#r.showArrow}set showArrow(e){this.#r.showArrow=e,t.ScheduledRender.scheduleRender(this,this.#t)}get arrowDirection(){return this.#r.arrowDirection}set arrowDirection(e){this.#r.arrowDirection=e,t.ScheduledRender.scheduleRender(this,this.#t)}get disabled(){return this.#r.disabled}set disabled(e){this.#r.disabled=e,t.ScheduledRender.scheduleRender(this,this.#t)}set open(e){s.write((()=>{this.#D()?.setAttribute("aria-expanded",String(e))}))}set singleArrow(e){this.#r.singleArrow=e,t.ScheduledRender.scheduleRender(this,this.#t)}get jslogContext(){return this.#r.jslogContext}set jslogContext(e){this.#r.jslogContext=e,t.ScheduledRender.scheduleRender(this,this.#t)}click(){this.#D()?.click()}#D(){return this.#I||(this.#I=this.#e.querySelector("button")),this.#I}#$(t){const s=t.key,o="bottom"===this.arrowDirection&&"ArrowDown"===s,n="top"===this.arrowDirection&&"ArrowUp"===s,r=s===e.KeyboardUtilities.ENTER_KEY,i="Space"===t.code;(o||n||r||i)&&(this.dispatchEvent(new D),t.preventDefault())}#A(){this.dispatchEvent(new D)}async#s(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("SelectMenuItem render was not scheduled");const e=this.#r.showArrow?x`<span id="arrow"></span>`:o.nothing,s={"single-arrow":this.#r.singleArrow},r=x`
      <span id="button-label-wrapper">
        <span id="label" ?witharrow=${this.showArrow} class=${o.Directives.classMap(s)}><slot></slot></span>
        ${e}
      </span>
      `;o.render(x`
      <button aria-haspopup="true" aria-expanded="false" class="show" @keydown=${this.#$} @click=${this.#A} ?disabled=${this.disabled} jslog=${n.dropDown(this.jslogContext)}>${r}</button>
    `,this.#e,{host:this})}}customElements.define("devtools-select-menu",E),customElements.define("devtools-select-menu-button",C);class B extends Event{itemValue;static eventName="selectmenuselected";constructor(e){super(B.eventName,{bubbles:!0,composed:!0}),this.itemValue=e}}class I extends Event{static eventName="selectmenusidebuttonclick";constructor(){super(I.eventName,{bubbles:!0,composed:!0})}}class D extends Event{static eventName="selectmenubuttontrigger";constructor(){super(D.eventName,{bubbles:!0,composed:!0})}}var $=Object.freeze({__proto__:null,SelectMenu:E,SelectMenuButton:C,SelectMenuButtonTriggerEvent:D,SelectMenuGroup:g,SelectMenuItemSelectedEvent:B,SelectMenuSideButtonClickEvent:I});export{v as Menu,$ as SelectMenu};