@ncino/web-components 13.12.1 → 13.12.2

package/dist/components/menu/base/gator/menu.gator.js

@@ -1,10 +1,15 @@
-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/tokens/primitive.tokens.css.js";import w from"../../../../packages/styles/dist/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`
-            <div class="gator-dropdown-trigger" @focusout=${this._topLevelFocusOut}>
+import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as p}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 c}from"../../../../utils/decorators/custom-element-decorator.js";import{autoUpdate as m,computePosition as f}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{ref as l}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 w from"../../../../packages/styles/dist/tokens/primitive.tokens.css.js";import _ from"../../../../packages/styles/dist/tokens/semantic.tokens.css.js";import b from"../../../../packages/web-components/src/components/menu/base/gator/menu.gator.scss.js";import"../../menu-item/gator/menu-item.gator.js";import{unsafeCSS as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var v=Object.getOwnPropertyDescriptor,A=(t,e,n,i)=>{for(var o=i>1?void 0:i?v(e,n):e,s=t.length-1,r;s>=0;s--)(r=t[s])&&(o=r(o)||o);return o};let h=class extends g{constructor(){super(...arguments),this._dropdownRef=l(),this._wasOpenAtPointerDown=!1,this._handlePopoverToggle=t=>{const e=t.newState==="open";this.open=e,this._button?.setAttribute("aria-expanded",e?"true":"false"),e?this.assignPosition():(this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=void 0,this._dropdownRef.value?.removeAttribute("data-positioned"))}}render(){return p`
+            <div class="gator-dropdown-trigger">
                 <slot @slotchange="${this.handleTriggerSlotChange}" name="trigger"></slot>
-                <div class="gator-dropdown" ${d(this._dropdownRef)}>
+                <div
+                    class="gator-dropdown"
+                    popover="auto"
+                    ${l(this._dropdownRef)}
+                    @toggle=${this._handlePopoverToggle}
+                >
                     <ul class="gator_dropdown__list" role="menu" aria-label="${this.menuAriaLabel}" @keydown=${this.handleMenuKeydown}>
                         <slot @slotchange="${this.handleItemSlotChange}"></slot>
                     </ul>
                 </div>
             </div>
-        `}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};
+        `}updated(){const t=this.shadowRoot?.querySelector("[role=menu]");u(t,this.dataTestid,"dropdown");const e=this._dropdownRef.value;if(!e)return;const n=e.matches(":popover-open");this.open&&!n?e.showPopover():!this.open&&n&&e.hidePopover()}disconnectedCallback(){super.disconnectedCallback(),this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=void 0}_openPopover(){const t=this._dropdownRef.value;!t||t.matches(":popover-open")||(t.showPopover(),this.focusFirstMenuItem())}handleTriggerSlotChange(t){const n=t.target.assignedElements(),i='button, [role="button"]';n.forEach(o=>{const s=o.shadowRoot??o;this._button=s.querySelector(i),this._button||(o.matches(i)?this._button=o:(this._button=s.firstElementChild,this._button||(this._button=o),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("pointerdown",()=>{this._wasOpenAtPointerDown=!!this._dropdownRef.value?.matches(":popover-open")}),this._button?.addEventListener("click",()=>{this._wasOpenAtPointerDown||this._openPopover()});const r=this._button.tagName.toLowerCase()==="button";this._button?.addEventListener("keydown",a=>{(a.key==="ArrowDown"||!r&&(a.key==="Enter"||a.key===" "))&&this._openPopover()})})}focusFirstMenuItem(){setTimeout(()=>{this.menuItems[0]?.focus()})}focusTriggerButton(){requestAnimationFrame(()=>{this._button?.focus()})}handleItemSlotChange(t){const n=t.target.assignedElements();for(let[i,o]of n.entries()){const s=o.tagName.toLowerCase();(s==="ngc-menu-item"||s==="ngc-submenu")&&(o.addEventListener("menuitemclick",()=>{this.handleClose()}),i===0?o.setAttribute("tabindex","0"):o.setAttribute("tabindex","-1"),u(o,this.dataTestid,`menu-item-${i}`))}}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 e=this.menuItems;let n=this.activeMenuItemIndex+1;n>e.length-1&&(n=0),e[n].focus()}handleArrowUp(t){t.preventDefault();const e=this.menuItems;let n=this.activeMenuItemIndex-1;n<0&&(n=e.length-1),e[n].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._dropdownRef.value?.matches(":popover-open")&&this._dropdownRef.value.hidePopover(),this.focusTriggerButton()}assignPosition(){const t=this._button,e=this._dropdownRef.value;!e||!t||(this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=m(t,e,async()=>{const{x:n,y:i,placement:o}=await f(t,e,{placement:this.placement,strategy:"fixed"}),s=4,r=o.startsWith("bottom")?s:o.startsWith("top")?-s:0;Object.assign(e.style,{left:`${n}px`,top:`${i+r}px`}),e.setAttribute("data-positioned","")}))}};h.styles=[d(b),d(w),d(_)];h=A([c("ngc-menu")],h);export{h as NgcMenu};

package/dist/packages/web-components/src/components/menu/base/gator/menu.gator.scss.js

@@ -1 +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};
+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;height:max-content;padding:var(--spacing-5) 0;border:none;border-radius:var(--border-radius-medium);box-shadow:var(--shadow-3-dropdown);background-color:var(--ngc-menu-dropdown-background-color, var(--color-surface-primary));position:fixed;inset:0 auto auto 0;margin:0;opacity:0}.gator-dropdown[data-positioned]{opacity:1}ul{padding:0;margin:0;list-style-type:none}";export{o as default};

package/dist/types/components/menu/base/gator/menu.gator.d.ts

@@ -4,8 +4,13 @@ export declare class NgcMenu extends NjcMenu {
     static styles: import('lit').CSSResult[];
     private _button;
     private _dropdownRef;
+    private _cleanupAutoUpdate;
     render(): import('lit').TemplateResult<1>;
     updated(): void;
+    disconnectedCallback(): void;
+    private _wasOpenAtPointerDown;
+    private _handlePopoverToggle;
+    private _openPopover;
     handleTriggerSlotChange(e: Event): void;
     focusFirstMenuItem(): void;
     focusTriggerButton(): void;
@@ -16,6 +21,5 @@ export declare class NgcMenu extends NjcMenu {
     get activeMenuItemIndex(): number;
     get menuItems(): NodeListOf<NgcMenuItem>;
     handleClose(): void;
-    private _topLevelFocusOut;
     assignPosition(): void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "13.12.1",
+  "version": "13.12.2",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -100,10 +100,10 @@
     "vite-plugin-static-copy": "^3.3.0",
     "vitest": "^4.1.0",
     "yaml-eslint-parser": "^2.0.0",
-    "@ncino/styles": "13.12.1"
+    "@ncino/styles": "13.12.2"
   },
   "peerDependencies": {
-    "@ncino/styles": "13.12.1"
+    "@ncino/styles": "13.12.2"
   },
   "bugs": {
     "url": "https://github.com/ncino/force-sdk-web-components/issues"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ncino/web-components",
-  "version": "13.12.0",
+  "version": "13.12.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {