@ncino/web-components 4.0.0-preview.17 → 4.0.0-preview.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as w}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.0/node_modules/lit-element/lit-element.js";import _ from"../../../../packages/web-components/src/components/menu/base/gator/menu.gator.scss.js";import v from"../../../../packages/web-components/src/components/menu/menu.tokens.scss.js";import{customElement as y}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/custom-element.js";import{NjcMenu as x}from"../menu.js";import{handleDataTestid as u}from"../../../../utils/datatestid-utils.js";import{autoUpdate as A,computePosition as I}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.7.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{ref as g}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import"../../menu-item/gator/menu-item.gator.js";import{unsafeCSS as b}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var R=Object.getOwnPropertyDescriptor,k=(t,e,o,n)=>{for(var s=n>1?void 0:n?R(e,o):e,i=t.length-1,a;i>=0;i--)(a=t[i])&&(s=a(s)||s);return s};let l=class extends x{constructor(){super(...arguments),this._dropdownRef=g()}render(){return w`
|
|
2
2
|
<div class="gator-dropdown-trigger" @focusout=${this._topLevelFocusOut}>
|
|
3
3
|
<slot @slotchange="${this.handleTriggerSlotChange}" name="trigger"></slot>
|
|
4
|
-
<div class="gator-dropdown" ${
|
|
4
|
+
<div class="gator-dropdown" ${g(this._dropdownRef)}>
|
|
5
5
|
<ul class="gator_dropdown__list" role="menu" aria-label="${this.menuAriaLabel}" @keydown=${this.handleMenuKeydown}>
|
|
6
6
|
<slot @slotchange="${this.handleItemSlotChange}"></slot>
|
|
7
7
|
</ul>
|
|
8
8
|
</div>
|
|
9
9
|
</div>
|
|
10
|
-
`}updated(){var
|
|
10
|
+
`}updated(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector("[role=menu]");u(t,this.dataTestid,"dropdown"),this._dropdownRef.value&&Object.assign(this._dropdownRef.value.style,{display:this.open?"unset":"none"})}handleTriggerSlotChange(t){const o=t.target.assignedElements(),n='button, [role="button"]';o.forEach(s=>{var h,d,m,f,c,p;const i=s.shadowRoot??s;this._button=i.querySelector(n),this._button||(s.matches(n)?this._button=s:(this._button=i.firstElementChild,this._button||(this._button=s),this._button.role="button")),(h=this._button)!=null&&h.getAttribute("tabindex")||(d=this._button)==null||d.setAttribute("tabindex","0"),(m=this._button)==null||m.setAttribute("aria-haspopup","true"),(f=this._button)==null||f.setAttribute("aria-expanded",this.open?"true":"false"),u(this._button,this.dataTestid,"button"),(c=this._button)==null||c.addEventListener("click",()=>{var r;this.open=!this.open,this.focusFirstMenuItem(),(r=this._button)==null||r.setAttribute("aria-expanded",this.open?"true":"false"),this.assignPosition()});const a=this._button.tagName.toLowerCase()==="button";(p=this._button)==null||p.addEventListener("keydown",r=>{!a&&(r.key==="Enter"||r.key===" ")&&(this.open=!0,this.focusFirstMenuItem()),r.key==="ArrowDown"&&(this.open=!0,this.focusFirstMenuItem())})})}focusFirstMenuItem(){setTimeout(()=>{var e;(e=this.menuItems[0])==null||e.focus()})}focusTriggerButton(){requestAnimationFrame(()=>{var t;(t=this._button)==null||t.focus()})}handleItemSlotChange(t){const o=t.target.assignedElements();for(let[n,s]of o.entries()){const i=s.tagName.toLowerCase();(i==="ngc-menu-item"||i==="ngc-submenu")&&(s.addEventListener("menuitemclick",()=>{this.handleClose()}),n===0?s.setAttribute("tabindex","0"):s.setAttribute("tabindex","-1"),u(s,this.dataTestid,`menu-item-${n}`))}}handleMenuKeydown(t){var e;t.key==="ArrowDown"||t.key==="ArrowRight"?this.handleArrowDown(t):t.key==="ArrowUp"||t.key==="ArrowLeft"?this.handleArrowUp(t):t.key==="Tab"?this.handleClose():t.key==="Escape"&&(this.handleClose(),(e=this._button)==null||e.focus())}handleArrowDown(t){t.preventDefault();const e=this.menuItems;let o=this.activeMenuItemIndex+1;o>e.length-1&&(o=0),e[o].focus()}handleArrowUp(t){t.preventDefault();const e=this.menuItems;let o=this.activeMenuItemIndex-1;o<0&&(o=e.length-1),e[o].focus()}get activeMenuItemIndex(){const t=this.querySelector(":focus-within");return Array.from(this.menuItems).indexOf(t)}get menuItems(){return this.querySelectorAll("ngc-menu-item")}handleClose(){var t;this.open=!1,(t=this._button)==null||t.setAttribute("aria-expanded","false"),this.focusTriggerButton()}_topLevelFocusOut(t){t.relatedTarget||(this.open=!1)}assignPosition(){const t=this._button;!this._dropdownRef||!this._dropdownRef.value||!t||A(t,this._dropdownRef.value,async()=>{if(!this._dropdownRef||!this._dropdownRef.value||!t)return;const{x:e,y:o,placement:n}=await I(t,this._dropdownRef.value,{placement:this.placement});let s=n==="bottom"?4:-4;Object.assign(this._dropdownRef.value.style,{left:`${e}px`,top:`${o+s}px`})})}};l.styles=[b(_),b(v)];l=k([y("ngc-menu")],l);export{l as NgcMenu};
|
package/package.json
CHANGED
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ncino/web-components",
|
|
4
|
-
"version": "4.0.0-preview.
|
|
4
|
+
"version": "4.0.0-preview.17",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|