@ncino/web-components 10.0.4 → 10.1.0
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,4 +1,4 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as m}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{customElement as f}from"../../../../utils/decorators/custom-element-decorator.js";import{autoUpdate as c,computePosition as p}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{ref as d}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{handleDataTestid as u}from"../../../../utils/datatestid-utils.js";import{NjcMenu as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as m}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{customElement as f}from"../../../../utils/decorators/custom-element-decorator.js";import{autoUpdate as c,computePosition as p}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{ref as d}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{handleDataTestid as u}from"../../../../utils/datatestid-utils.js";import{NjcMenu as g}from"../menu.js";import b from"../../../../packages/styles/dist/gator/tokens/primitive.tokens.css.js";import w from"../../../../packages/styles/dist/gator/tokens/semantic.tokens.css.js";import _ from"../../../../packages/web-components/src/components/menu/base/gator/menu.gator.scss.js";import"../../menu-item/gator/menu-item.gator.js";import{unsafeCSS as l}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var v=Object.getOwnPropertyDescriptor,y=(t,o,s,n)=>{for(var e=n>1?void 0:n?v(o,s):o,i=t.length-1,r;i>=0;i--)(r=t[i])&&(e=r(e)||e);return e};let h=class extends g{constructor(){super(...arguments),this._dropdownRef=d()}render(){return m`
|
|
2
2
|
<div class="gator-dropdown-trigger" @focusout=${this._topLevelFocusOut}>
|
|
3
3
|
<slot @slotchange="${this.handleTriggerSlotChange}" name="trigger"></slot>
|
|
4
4
|
<div class="gator-dropdown" ${d(this._dropdownRef)}>
|
|
@@ -7,4 +7,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
7
7
|
</ul>
|
|
8
8
|
</div>
|
|
9
9
|
</div>
|
|
10
|
-
`}updated(){const t=this.shadowRoot?.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
|
|
10
|
+
`}updated(){const t=this.shadowRoot?.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 s=t.target.assignedElements(),n='button, [role="button"]';s.forEach(e=>{const i=e.shadowRoot??e;this._button=i.querySelector(n),this._button||(e.matches(n)?this._button=e:(this._button=i.firstElementChild,this._button||(this._button=e),this._button.role="button")),this._button?.getAttribute("tabindex")||this._button?.setAttribute("tabindex","0"),this._button?.setAttribute("aria-haspopup","true"),this._button?.setAttribute("aria-expanded",this.open?"true":"false"),u(this._button,this.dataTestid,"button"),this._button?.addEventListener("click",()=>{this.open=!this.open,this.focusFirstMenuItem(),this._button?.setAttribute("aria-expanded",this.open?"true":"false"),this.assignPosition()});const r=this._button.tagName.toLowerCase()==="button";this._button?.addEventListener("keydown",a=>{!r&&(a.key==="Enter"||a.key===" ")&&(this.open=!0,this.focusFirstMenuItem()),a.key==="ArrowDown"&&(this.open=!0,this.focusFirstMenuItem())})})}focusFirstMenuItem(){setTimeout(()=>{this.menuItems[0]?.focus()})}focusTriggerButton(){requestAnimationFrame(()=>{this._button?.focus()})}handleItemSlotChange(t){const s=t.target.assignedElements();for(let[n,e]of s.entries()){const i=e.tagName.toLowerCase();(i==="ngc-menu-item"||i==="ngc-submenu")&&(e.addEventListener("menuitemclick",()=>{this.handleClose()}),n===0?e.setAttribute("tabindex","0"):e.setAttribute("tabindex","-1"),u(e,this.dataTestid,`menu-item-${n}`))}}handleMenuKeydown(t){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(),this._button?.focus())}handleArrowDown(t){t.preventDefault();const o=this.menuItems;let s=this.activeMenuItemIndex+1;s>o.length-1&&(s=0),o[s].focus()}handleArrowUp(t){t.preventDefault();const o=this.menuItems;let s=this.activeMenuItemIndex-1;s<0&&(s=o.length-1),o[s].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(){this.open=!1,this._button?.setAttribute("aria-expanded","false"),this.focusTriggerButton()}_topLevelFocusOut(t){t.relatedTarget||(this.open=!1)}assignPosition(){const t=this._button;!this._dropdownRef||!this._dropdownRef.value||!t||c(t,this._dropdownRef.value,async()=>{if(!this._dropdownRef||!this._dropdownRef.value||!t)return;const{x:o,y:s,placement:n}=await p(t,this._dropdownRef.value,{placement:this.placement}),e=4,i=n.startsWith("bottom")?e:n.startsWith("top")?-e:0;Object.assign(this._dropdownRef.value.style,{left:`${o}px`,top:`${s+i}px`})})}};h.styles=[l(_),l(b),l(w)];h=y([f("ngc-menu")],h);export{h as NgcMenu};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const o=".gator-dropdown{max-width:var(--ngc-menu-dropdown-max-width, 16rem);padding:var(--spacing-5) 0;border-radius:var(--border-radius-medium);box-shadow:var(--shadow-3-dropdown);position:absolute;
|
|
1
|
+
const o=".gator-dropdown-trigger{position:relative;display:inline-block}.gator-dropdown{max-width:var(--ngc-menu-dropdown-max-width, 16rem);min-width:var(--ngc-menu-dropdown-min-width, 10rem);width:max-content;padding:var(--spacing-5) 0;border-radius:var(--border-radius-medium);box-shadow:var(--shadow-3-dropdown);position:absolute;background-color:var(--ngc-menu-dropdown-background-color, var(--color-surface-primary));display:none;z-index:9999}ul{padding:0;margin:0;list-style-type:none}";export{o as default};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "10.0
|
|
4
|
+
"version": "10.1.0",
|
|
5
5
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
"vite-plugin-static-copy": "^3.3.0",
|
|
101
101
|
"vitest": "^4.1.0",
|
|
102
102
|
"yaml-eslint-parser": "^2.0.0",
|
|
103
|
-
"@ncino/styles": "10.0
|
|
103
|
+
"@ncino/styles": "10.1.0"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
106
|
"@ncino/styles": ">=8.0.0-preview.0"
|
package/web-types.json
CHANGED