@ncino/web-components 13.9.0 → 13.9.1

package/dist/components/tooltip/tooltip.js

@@ -1 +1 @@
-import{property as l}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{createRef as u}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{KEY_CONSTANTS as m}from"../../consts/key-constants.js";import{generateRandomId as y}from"../../utils/string-utils.js";import{TestableLitElement as _}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{handleDataTestid as c}from"../../utils/datatestid-utils.js";import{getFirstFocusableElement as v}from"../../utils/accessibility-utils.js";var b=Object.defineProperty,n=(d,e,o,i)=>{for(var t=void 0,s=d.length-1,r;s>=0;s--)(r=d[s])&&(t=r(e,o,t)||t);return t&&b(e,o,t),t};class a extends _{constructor(){super(...arguments),this.referenceId="",this.placement="top-end",this.xOffset=0,this.yOffset=0,this.isLabel=!1,this._tooltipRef=u(),this._forceOpen=!1,this._mousedInsideTooltip=!1,this.tooltipId=y()}firstUpdated(){if(this._tooltipRef.value&&(this._tooltipRef.value.style.visibility="hidden",this._tooltipRef.value.style.opacity="0"),!this.referenceId)return;const e=this.referenceElement,o=this._tooltipRef.value;if(e&&o){c(e,this.dataTestid,"trigger"),c(o,this.dataTestid,"tooltip");let i;e.shadowRoot?.delegatesFocus?i=v(e):i=e,i&&(this.isLabel?i.ariaLabelledByElements=[...i.ariaLabelledByElements||[],this]:i.ariaDescribedByElements=[...i.ariaDescribedByElements||[],this]),e.addEventListener("mouseenter",()=>this.showTooltip()),e.addEventListener("mouseleave",t=>this._handleMouseLeave(t,e,o)),e.addEventListener("focusin",()=>this.showTooltip()),e.addEventListener("focusout",()=>this.hideTooltip()),o.addEventListener("mouseenter",()=>this.showTooltip()),o.addEventListener("mouseleave",t=>{if(this._mousedInsideTooltip){this.hideTooltip();return}this._handleMouseLeave(t,e,o)}),document.addEventListener("keydown",t=>{t.key===m.ESCAPE&&(this._forceOpen=!1,this.hideTooltip())})}}get referenceElement(){let e=this.parentElement?.querySelector(`#${this.referenceId}`);return e||(e=document.getElementById(this.referenceId)),e||(e=document.querySelector(`[data-id="${this.referenceId}"]`)?.shadowRoot?.querySelector(`#${this.referenceId}`)),e||(e=this.getRootNode().querySelector?.(`#${this.referenceId}`)),e}_handleMouseLeave(e,o,i){const t=o.getBoundingClientRect(),s=i.getBoundingClientRect(),r=this._isMouseInside(e,t,-5),f=this._isMouseInside(e,s,25);!r&&!f&&this.hideTooltip(),f&&(this._mousedInsideTooltip=!0)}_isMouseInside(e,o,i=0){const{left:t,right:s,top:r,bottom:f}=o,h=e.clientX,p=e.clientY;return h>=t-i&&h<=s+i&&p>=r-i&&p<=f+i}toggleTooltip(){this._forceOpen=!this._forceOpen,this._forceOpen?this.showTooltip():this.hideTooltip()}disconnectedCallback(){this._cleanup&&this._cleanup(),super.disconnectedCallback()}showTooltip(){this.assignPosition(),this._tooltipRef.value&&(this._tooltipRef.value.style.visibility="visible",this._tooltipRef.value.style.opacity="1")}hideTooltip(){this._forceOpen||this._tooltipRef.value&&(this._tooltipRef.value.style.visibility="hidden",this._tooltipRef.value.style.opacity="0")}assignPosition(){}}n([l({attribute:"reference-id"})],a.prototype,"referenceId");n([l()],a.prototype,"placement");n([l({type:Number,attribute:"x-offset"})],a.prototype,"xOffset");n([l({type:Number,attribute:"y-offset"})],a.prototype,"yOffset");n([l({type:Boolean,attribute:"is-label"})],a.prototype,"isLabel");export{a as NjcTooltip};
+import{property as o}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{createRef as c}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{KEY_CONSTANTS as f}from"../../consts/key-constants.js";import{generateRandomId as u}from"../../utils/string-utils.js";import{TestableLitElement as p}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{handleDataTestid as h}from"../../utils/datatestid-utils.js";import{getFirstFocusableElement as _}from"../../utils/accessibility-utils.js";var m=Object.defineProperty,n=(a,e,t,s)=>{for(var i=void 0,r=a.length-1,d;r>=0;r--)(d=a[r])&&(i=d(e,t,i)||i);return i&&m(e,t,i),i};const v=100;class l extends p{constructor(){super(...arguments),this.referenceId="",this.placement="top-end",this.xOffset=0,this.yOffset=0,this.isLabel=!1,this._tooltipRef=c(),this._forceOpen=!1,this._initialized=!1,this._boundReferenceElement=null,this.elementListeners=new WeakMap,this.tooltipId=u()}firstUpdated(){this.hideTooltip(),this._tryInitialize()}updated(e){super.updated(e),(e.has("referenceId")||e.has("isLabel"))&&this._teardown(),this._initialized||this._tryInitialize()}get referenceElement(){if(!this.referenceId)return null;let e=this.parentElement?.querySelector(`#${this.referenceId}`);return e||(e=document.getElementById(this.referenceId)),e||(e=document.querySelector(`[data-id="${this.referenceId}"]`)?.shadowRoot?.querySelector(`#${this.referenceId}`)),e||(e=this.getRootNode().querySelector?.(`#${this.referenceId}`)),!e&&this.previousElementSibling&&this.previousElementSibling.id===this.referenceId&&(e=this.previousElementSibling),e}_tryInitialize(){if(this._initialized||!this.referenceId)return;const e=this.referenceElement,t=this._tooltipRef.value;!e||!t||(h(e,this.dataTestid,"trigger"),h(t,this.dataTestid,"tooltip"),this._updateAriaAssociation(e,!0),this._addInteractionEvents(e,t),this._initialized=!0,this._boundReferenceElement=e)}_teardown(){if(!this._initialized)return;this._clearScheduledHide();const e=this._boundReferenceElement,t=this._tooltipRef.value;e&&(this._updateAriaAssociation(e,!1),this.removeAllTrackedEventListeners(e)),t&&this.removeAllTrackedEventListeners(t),this.removeAllTrackedEventListeners(document),this._initialized=!1,this._boundReferenceElement=null}_getAriaTargetElement(e){return e.shadowRoot?.delegatesFocus?_(e):e}_updateAriaAssociation(e,t){const s=this._getAriaTargetElement(e);if(!s)return;if(this.isLabel){const r=s.ariaLabelledByElements??[];s.ariaLabelledByElements=t?[...r,this]:r.filter(d=>d!==this);return}const i=s.ariaDescribedByElements??[];s.ariaDescribedByElements=t?[...i,this]:i.filter(r=>r!==this)}_addInteractionEvents(e,t){const s=()=>{this._clearScheduledHide(),this.showTooltip()};this.addTrackedEventListener(e,"mouseenter",s),this.addTrackedEventListener(e,"mouseleave",()=>this._scheduleHide()),this.addTrackedEventListener(e,"focusin",()=>this.showTooltip()),this.addTrackedEventListener(e,"focusout",()=>this.hideTooltip()),this.addTrackedEventListener(t,"mouseenter",s),this.addTrackedEventListener(t,"mouseleave",()=>this._scheduleHide()),this.addTrackedEventListener(document,"keydown",i=>{i instanceof KeyboardEvent&&i.key===f.ESCAPE&&(this._forceOpen=!1,this.hideTooltip())})}_scheduleHide(){this._clearScheduledHide(),this._hideTimeoutId=setTimeout(()=>this.hideTooltip(),v)}_clearScheduledHide(){this._hideTimeoutId!==void 0&&(clearTimeout(this._hideTimeoutId),this._hideTimeoutId=void 0)}addTrackedEventListener(e,t,s,i={}){this.elementListeners.has(e)||this.elementListeners.set(e,[]),this.elementListeners.get(e).push({eventType:t,listener:s,options:i}),e.addEventListener(t,s,i)}removeAllTrackedEventListeners(e){if(!this.elementListeners.has(e))return;const t=this.elementListeners.get(e);for(const{eventType:s,listener:i,options:r}of t)e.removeEventListener(s,i,r);this.elementListeners.delete(e)}toggleTooltip(){this._forceOpen=!this._forceOpen,this._forceOpen?this.showTooltip():this.hideTooltip()}disconnectedCallback(){this._teardown(),this._cleanup&&this._cleanup(),super.disconnectedCallback()}showTooltip(){this.assignPosition(),this._tooltipRef.value&&(this._tooltipRef.value.style.visibility="visible",this._tooltipRef.value.style.opacity="1")}hideTooltip(){this._forceOpen||(this._clearScheduledHide(),this._tooltipRef.value&&(this._tooltipRef.value.style.visibility="hidden",this._tooltipRef.value.style.opacity="0"))}assignPosition(){}}n([o({attribute:"reference-id"})],l.prototype,"referenceId");n([o()],l.prototype,"placement");n([o({type:Number,attribute:"x-offset"})],l.prototype,"xOffset");n([o({type:Number,attribute:"y-offset"})],l.prototype,"yOffset");n([o({type:Boolean,attribute:"is-label"})],l.prototype,"isLabel");export{l as NjcTooltip};

package/dist/types/components/tooltip/tooltip.d.ts

@@ -1,4 +1,5 @@
 import { Placement } from '@floating-ui/dom';
+import { PropertyValues } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
 import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element.ts';
 export declare class NjcTooltip extends TestableLitElement {
@@ -10,12 +11,23 @@ export declare class NjcTooltip extends TestableLitElement {
     _tooltipRef: Ref<HTMLElement>;
     _cleanup: (() => void) | undefined;
     private _forceOpen;
-    private _mousedInsideTooltip;
+    private _hideTimeoutId;
+    private _initialized;
+    private _boundReferenceElement;
+    private elementListeners;
     tooltipId: string;
     firstUpdated(): void;
-    get referenceElement(): HTMLElement;
-    _handleMouseLeave(e: MouseEvent, referenceElement: HTMLElement, tooltipElement: HTMLElement): void;
-    _isMouseInside(e: MouseEvent, rect: DOMRect, padding?: number): boolean;
+    updated(changedProperties: PropertyValues): void;
+    get referenceElement(): HTMLElement | null;
+    private _tryInitialize;
+    private _teardown;
+    private _getAriaTargetElement;
+    private _updateAriaAssociation;
+    private _addInteractionEvents;
+    private _scheduleHide;
+    private _clearScheduledHide;
+    addTrackedEventListener(element: HTMLElement | Document, eventType: string, listener: EventListener, options?: AddEventListenerOptions): void;
+    removeAllTrackedEventListeners(element: HTMLElement | Document): void;
     toggleTooltip(): void;
     disconnectedCallback(): void;
     showTooltip(): void;

package/dist/types/utils/vitest-utils.d.ts

@@ -13,6 +13,8 @@ export declare function getNamedSlotTextContent(element: HTMLElement | null, nam
 export declare function getSlottedElements(element: HTMLElement | null, elementFilter?: string | null): Element[] | undefined;
 export declare function getNamedSlottedElements(element: HTMLElement | null, name: string): Element[] | undefined;
 export declare function flushPromises(time?: number): Promise<unknown>;
+/** Wait past tooltip hover-dismiss delay (100ms) for visibility assertions. */
+export declare function waitForTooltipHide(): Promise<unknown>;
 /**
  * For components whose Lit `title` is heading text (not the HTML tooltip): the host must
  * not keep a `title` attribute, while `HTMLElement#title` reflects the Lit property value.

package/dist/utils/storybook-utils.js

@@ -1 +1 @@
-import{camelToKebab as s}from"./string-utils.js";const a=new Set(["defaultSlot"]);function i(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;")}function f(t,e){const n=new RegExp(`<${e}\\b`,"g");return[...t.matchAll(n)].length}function l(t){const e=Object.entries(t).sort(([o],[r])=>o==="dataTestid"?-1:r==="dataTestid"?1:o.localeCompare(r)),n=[];for(const[o,r]of e){if(a.has(o)||r==null||r===!1)continue;if(o==="dataTestid"){n.push(`data-testid="${i(String(r))}"`);continue}const u=s(o);if(typeof r=="boolean"&&r){n.push(u);continue}typeof r!="boolean"&&n.push(`${u}="${i(String(r))}"`)}return n.length?` ${n.join(" ")}`:""}function c(t,e){const n=l(e),o=typeof e.defaultSlot=="string"?i(e.defaultSlot):"";return`<${t}${n}>${o}</${t}>`}function $(t,e,n){if(!e)return t;const o=f(t,e);if(o>1)return c(e,n);if(o===0)return t;const r=l(n);return r.trim()?t.replace(new RegExp(`<${e}\\b`),`<${e}${r}`):t}function b(t){const e=[];if(!t)return e;for(let n=1;n<=t;n++)e.push({label:`Option ${n}`,value:`${n}`});return e}export{c as buildMinimalComponentSnippet,$ as convertArgsForStorybookCodeExample,b as generateOptions};
+import{camelToKebab as s}from"./string-utils.js";const a=new Set(["defaultSlot"]);function i(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;")}function f(t,e){const n=new RegExp(`<${e}\\b`,"g");return[...t.matchAll(n)].length}function l(t){const e=Object.entries(t).sort(([o],[r])=>o==="dataTestid"?-1:r==="dataTestid"?1:o.localeCompare(r)),n=[];for(const[o,r]of e){if(a.has(o)||r==null||r===!1)continue;if(o==="dataTestid"){n.push(`data-testid="${i(String(r))}"`);continue}const u=s(o);if(typeof r=="boolean"&&r){n.push(u);continue}typeof r!="boolean"&&n.push(`${u}="${i(String(r))}"`)}return n.length?` ${n.join(" ")}`:""}function c(t,e){const n=l(e),o=typeof e.defaultSlot=="string"?i(e.defaultSlot):"";return`<${t}${n}>${o}</${t}>`}function $(t,e,n){if(!e)return t;const o=f(t,e);if(o>1)return c(e,n);if(o===0)return t;const r=l(n);return r.trim()?t.replace(new RegExp(`<${e}\\b[^>]*>`),`<${e}${r}>`):t}function b(t){const e=[];if(!t)return e;for(let n=1;n<=t;n++)e.push({label:`Option ${n}`,value:`${n}`});return e}export{c as buildMinimalComponentSnippet,$ as convertArgsForStorybookCodeExample,b as generateOptions};

package/dist/utils/vitest-utils.js

@@ -1 +1 @@
-import{g as r}from"../node_modules/.pnpm/vitest@4.1.1_@types_node@25.5.0_@vitest_browser-playwright@4.1.1_@vitest_ui@4.1.0_jsdom_6987228cf79758f3d05c697357fc8c5a/node_modules/vitest/dist/chunks/test.CBQUpOM3.js";async function u(e){document.body.innerHTML=e,await new Promise(t=>setTimeout(t,0))}function a(e){return document.body.querySelector(e)}function c(e,t){return e?.querySelector(t)}function d(e,t){return e?.querySelectorAll(t)}function i(e){return document.body.querySelectorAll(e)}function m(e,t){return e?.shadowRoot?.querySelectorAll(t)}function f(e,t){return e?.shadowRoot?.querySelector(t)}function g(e,t){return e?.shadowRoot?.querySelector(`[data-testid="${t}"]`)}function E(e,t){return e?.shadowRoot?.querySelector(t)}function S(e,t){return e?.shadowRoot?.querySelectorAll(t)}function y(e){const t=e?.shadowRoot?.querySelectorAll("slot"),n=Array.from(t).find(l=>l.name==="")?.assignedNodes({flatten:!0}).filter(l=>l.textContent?.trim()!=="");return n&&n.length>0?n[0].textContent:null}function h(e,t){const o=e?.shadowRoot?.querySelector(`slot[name="${t}"]`);return(o?.assignedNodes().length?o?.assignedNodes({flatten:!0})[0]:o?.assignedElements({flatten:!0})[0])?.textContent}function w(e,t=null){let n=e?.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0});return t&&(n=n?.filter(l=>l.tagName.toLowerCase()===t)),n}function R(e,t){return e?.shadowRoot?.querySelector(`slot[name=${t}]`)?.assignedElements({flatten:!0})}function T(e=0){return new Promise(t=>setTimeout(t,e))}function q(e,t){r(e).toBeTruthy();const o=e;r(o.getAttribute("title")).toBeNull(),r(o.title).toBe(t)}function x(e){const t=/<!--\?lit\$[^\$]*\$-->/g;return e.replace(t,"").replace(/\s+/g," ").trim()}export{u as addTestableElement,x as cleanInnerHTML,q as expectLitHeadingTitle,T as flushPromises,a as getElement,c as getElementInsideElement,i as getElements,d as getElementsInsideElement,h as getNamedSlotTextContent,R as getNamedSlottedElements,E as getShadowRootElement,g as getShadowRootElementByDataTestId,S as getShadowRootElements,f as getShadowRootHTMLElement,m as getShadowRootHTMLElements,y as getSlotTextContent,w as getSlottedElements};
+import{g as r}from"../node_modules/.pnpm/vitest@4.1.1_@types_node@25.5.0_@vitest_browser-playwright@4.1.1_@vitest_ui@4.1.0_jsdom_6987228cf79758f3d05c697357fc8c5a/node_modules/vitest/dist/chunks/test.CBQUpOM3.js";async function a(t){document.body.innerHTML=t,await new Promise(e=>setTimeout(e,0))}function i(t){return document.body.querySelector(t)}function c(t,e){return t?.querySelector(e)}function d(t,e){return t?.querySelectorAll(e)}function m(t){return document.body.querySelectorAll(t)}function f(t,e){return t?.shadowRoot?.querySelectorAll(e)}function g(t,e){return t?.shadowRoot?.querySelector(e)}function E(t,e){return t?.shadowRoot?.querySelector(`[data-testid="${e}"]`)}function S(t,e){return t?.shadowRoot?.querySelector(e)}function y(t,e){return t?.shadowRoot?.querySelectorAll(e)}function h(t){const e=t?.shadowRoot?.querySelectorAll("slot"),n=Array.from(e).find(l=>l.name==="")?.assignedNodes({flatten:!0}).filter(l=>l.textContent?.trim()!=="");return n&&n.length>0?n[0].textContent:null}function w(t,e){const o=t?.shadowRoot?.querySelector(`slot[name="${e}"]`);return(o?.assignedNodes().length?o?.assignedNodes({flatten:!0})[0]:o?.assignedElements({flatten:!0})[0])?.textContent}function R(t,e=null){let n=t?.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0});return e&&(n=n?.filter(l=>l.tagName.toLowerCase()===e)),n}function T(t,e){return t?.shadowRoot?.querySelector(`slot[name=${e}]`)?.assignedElements({flatten:!0})}function s(t=0){return new Promise(e=>setTimeout(e,t))}function q(){return s(150)}function x(t,e){r(t).toBeTruthy();const o=t;r(o.getAttribute("title")).toBeNull(),r(o.title).toBe(e)}function N(t){const e=/<!--\?lit\$[^\$]*\$-->/g;return t.replace(e,"").replace(/\s+/g," ").trim()}export{a as addTestableElement,N as cleanInnerHTML,x as expectLitHeadingTitle,s as flushPromises,i as getElement,c as getElementInsideElement,m as getElements,d as getElementsInsideElement,w as getNamedSlotTextContent,T as getNamedSlottedElements,S as getShadowRootElement,E as getShadowRootElementByDataTestId,y as getShadowRootElements,g as getShadowRootHTMLElement,f as getShadowRootHTMLElements,h as getSlotTextContent,R as getSlottedElements,q as waitForTooltipHide};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "13.9.0",
+  "version": "13.9.1",
   "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.9.0"
+    "@ncino/styles": "13.9.1"
   },
   "peerDependencies": {
-    "@ncino/styles": "13.9.0"
+    "@ncino/styles": "13.9.1"
   },
   "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.8.1",
+  "version": "13.9.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {