@data-slot/tooltip 0.2.93 → 0.2.94
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.
- package/README.md +4 -3
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -165,10 +165,10 @@ The component sets these attributes automatically:
|
|
|
165
165
|
|---------|-----------|--------|
|
|
166
166
|
| Root | `data-state` | `"open"` \| `"closed"` |
|
|
167
167
|
| Root | `data-open` / `data-closed` | Present when matching state |
|
|
168
|
-
| Root | `data-instant` | Present for warm-up opens
|
|
168
|
+
| Root | `data-instant` | Present for warm-up opens and warm-handoff instant closes |
|
|
169
169
|
| Content | `data-state` | `"open"` \| `"closed"` |
|
|
170
170
|
| Content | `data-open` / `data-closed` | Present when matching state |
|
|
171
|
-
| Content | `data-instant` | Present for warm-up opens
|
|
171
|
+
| Content | `data-instant` | Present for warm-up opens and warm-handoff instant closes |
|
|
172
172
|
| Content | `data-side` | `"top"` \| `"right"` \| `"bottom"` \| `"left"` |
|
|
173
173
|
| Content | `data-align` | `"start"` \| `"center"` \| `"end"` |
|
|
174
174
|
| Content | `role` | `"tooltip"` |
|
|
@@ -243,7 +243,8 @@ When a user closes one tooltip and quickly hovers another, the second tooltip sh
|
|
|
243
243
|
|
|
244
244
|
- Controlled by `skipDelayDuration` option
|
|
245
245
|
- Set to `0` to disable this behavior
|
|
246
|
-
- Warm-up adds `data-instant` on
|
|
246
|
+
- Warm-up adds `data-instant` on instant open/close cycles so CSS can disable transitions
|
|
247
|
+
- During warm handoff to another tooltip trigger, the stale tooltip closes with `data-instant` so exit animation can be skipped
|
|
247
248
|
- Warm window is set only when a tooltip actually closes (not when a pending open is cancelled)
|
|
248
249
|
|
|
249
250
|
## Accessibility
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`),t=0;const n=[`top`,`right`,`bottom`,`left`],
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`),t=0;const n=new Set,r=new Set,i=(e,t)=>{if(!e)return!1;for(let r of n)if(r!==t&&r.contains(e))return!0;return!1},a=(e,t)=>{for(let n of r)n(e,t)},o=[`top`,`right`,`bottom`,`left`],s=[`start`,`center`,`end`];function c(c,l={}){let u=(0,e.getPart)(c,`tooltip-trigger`),d=(0,e.getPart)(c,`tooltip-content`),f=(0,e.getPart)(c,`tooltip-positioner`),p=f&&d&&f.contains(d)?f:null,m=(0,e.getPart)(c,`tooltip-portal`),h=m&&p&&m.contains(p)?m:null;if(!u||!d)throw Error(`Tooltip requires trigger and content slots`);let g=l.delay??(0,e.getDataNumber)(c,`delay`)??300,_=l.skipDelayDuration??(0,e.getDataNumber)(c,`skipDelayDuration`)??300,v=l.onOpenChange,y=l.portal??(0,e.getDataBool)(d,`portal`)??(0,e.getDataBool)(c,`portal`)??!0,b=(t,n)=>(0,e.getDataEnum)(d,t,n)??(p?(0,e.getDataEnum)(p,t,n):void 0)??(0,e.getDataEnum)(c,t,n),x=t=>(0,e.getDataNumber)(d,t)??(p?(0,e.getDataNumber)(p,t):void 0)??(0,e.getDataNumber)(c,t),S=t=>(0,e.getDataBool)(d,t)??(p?(0,e.getDataBool)(p,t):void 0)??(0,e.getDataBool)(c,t),C=l.side??b(`side`,o)??`top`,w=l.align??b(`align`,s)??`center`,T=l.sideOffset??x(`sideOffset`)??4,E=l.alignOffset??x(`alignOffset`)??0,D=l.avoidCollisions??S(`avoidCollisions`)??!0,O=l.collisionPadding??x(`collisionPadding`)??8,k=!1,A=!1,j=!1,M=!1,N=null,P=[],F=(0,e.createPortalLifecycle)({content:d,root:c,enabled:y,wrapperSlot:p?void 0:`tooltip-positioner`,container:p??void 0,mountTarget:p?h??p:void 0}),I=(0,e.ensureId)(d,`tooltip-content`);d.setAttribute(`role`,`tooltip`),d.setAttribute(`data-side`,C),d.setAttribute(`data-align`,w);let L=e=>{let t=F.container;if(c.setAttribute(`data-state`,e),d.setAttribute(`data-state`,e),t!==d&&t.setAttribute(`data-state`,e),e===`open`){c.setAttribute(`data-open`,``),d.setAttribute(`data-open`,``),t!==d&&t.setAttribute(`data-open`,``),A?(c.setAttribute(`data-instant`,``),d.setAttribute(`data-instant`,``),t!==d&&t.setAttribute(`data-instant`,``)):(c.removeAttribute(`data-instant`),d.removeAttribute(`data-instant`),t!==d&&t.removeAttribute(`data-instant`)),c.removeAttribute(`data-closed`),d.removeAttribute(`data-closed`),t!==d&&t.removeAttribute(`data-closed`);return}c.setAttribute(`data-closed`,``),d.setAttribute(`data-closed`,``),t!==d&&t.setAttribute(`data-closed`,``),A?(c.setAttribute(`data-instant`,``),d.setAttribute(`data-instant`,``),t!==d&&t.setAttribute(`data-instant`,``)):(c.removeAttribute(`data-instant`),d.removeAttribute(`data-instant`),t!==d&&t.removeAttribute(`data-instant`)),c.removeAttribute(`data-open`),d.removeAttribute(`data-open`),t!==d&&t.removeAttribute(`data-open`)},R=()=>{let t=F.container,n=c.ownerDocument.defaultView??window,r=u.getBoundingClientRect(),i=(0,e.computeFloatingPosition)({anchorRect:r,contentRect:(0,e.measurePopupContentRect)(d),side:C,align:w,sideOffset:T,alignOffset:E,avoidCollisions:D,collisionPadding:O}),a=(0,e.computeFloatingTransformOrigin)({side:i.side,align:i.align,anchorRect:r,popupX:i.x,popupY:i.y});t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${i.x+n.scrollX}px, ${i.y+n.scrollY}px, 0)`,t.style.setProperty(`--transform-origin`,a),t.style.willChange=`transform`,t.style.margin=`0`,d.setAttribute(`data-side`,i.side),d.setAttribute(`data-align`,i.align),t!==d&&(t.setAttribute(`data-side`,i.side),t.setAttribute(`data-align`,i.align))},z=(0,e.createPresenceLifecycle)({element:d,onExitComplete:()=>{M||(F.restore(),d.hidden=!0)}}),B=(0,e.createPositionSync)({observedElements:[u,d],isActive:()=>k,ancestorScroll:!1,onUpdate:R}),V=()=>u.hasAttribute(`disabled`)||u.getAttribute(`aria-disabled`)===`true`,H=(n,r,i=!1)=>{k!==n&&(!n&&k&&_>0&&(t=Date.now()+_),A=i,k=n,k?(u.setAttribute(`aria-describedby`,I),d.setAttribute(`aria-hidden`,`false`),F.mount(),d.hidden=!1,L(`open`),z.enter(),R(),B.start(),B.update()):(L(`closed`),u.removeAttribute(`aria-describedby`),d.setAttribute(`aria-hidden`,`true`),z.exit(),B.stop()),(0,e.emit)(c,`tooltip:change`,{open:k,trigger:u,content:d,reason:r}),v?.(k))},U=e=>{if(N&&=(clearTimeout(N),null),Date.now()<t){H(!0,e,!0);return}N=setTimeout(()=>{H(!0,e),N=null},g)},W=(e,t=!1)=>{N&&=(clearTimeout(N),null),H(!1,e,t)},G=(e,t)=>{e===u||!k||(j=!1,W(t,!0))};return n.add(u),r.add(G),P.push(()=>{r.delete(G),n.delete(u)}),d.hidden=!0,d.setAttribute(`aria-hidden`,`true`),L(`closed`),P.push((0,e.on)(u,`pointerenter`,e=>{e.pointerType!==`touch`&&(V()||(a(u,`pointer`),U(`pointer`)))}),(0,e.on)(u,`pointerleave`,e=>{if(e.pointerType===`touch`||j)return;let t=e.relatedTarget;if(!(t&&d.contains(t))){if(i(t,u)){W(`pointer`,!0);return}W(`pointer`)}}),(0,e.on)(u,`focus`,()=>{j=!0,!V()&&(a(u,`focus`),U(`focus`))}),(0,e.on)(u,`blur`,e=>{j=!1;let t=e.relatedTarget;if(i(t,u)){W(`blur`,!0);return}W(`blur`)})),P.push((0,e.on)(d,`pointerleave`,e=>{if(e.pointerType===`touch`||j)return;let t=e.relatedTarget;if(!(t&&u.contains(t))){if(i(t,u)){W(`pointer`,!0);return}W(`pointer`)}})),P.push((0,e.on)(c,`tooltip:set`,e=>{let t=e.detail,n;if(t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`)if(n){if(V())return;N&&=(clearTimeout(N),null),H(!0,`api`)}else W(`api`)})),P.push((0,e.createDismissLayer)({root:c,isOpen:()=>k,onDismiss:()=>W(`escape`),closeOnClickOutside:!1,closeOnEscape:!0,preventEscapeDefault:!1})),{show:()=>{V()||(N&&=(clearTimeout(N),null),H(!0,`api`))},hide:()=>W(`api`),get isOpen(){return k},destroy:()=>{M=!0,N&&clearTimeout(N),B.stop(),z.cleanup(),F.cleanup(),P.forEach(e=>e()),P.length=0}}}const l=new WeakSet;function u(t=document){let n=[];for(let r of(0,e.getRoots)(t,`tooltip`))l.has(r)||(l.add(r),n.push(c(r)));return n}exports.create=u,exports.createTooltip=c;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{computeFloatingPosition as e,computeFloatingTransformOrigin as t,createDismissLayer as n,createPortalLifecycle as r,createPositionSync as i,createPresenceLifecycle as a,emit as o,ensureId as s,getDataBool as c,getDataEnum as l,getDataNumber as u,getPart as d,getRoots as f,measurePopupContentRect as p,on as m}from"@data-slot/core";let h=0;const g=[`top`,`right`,`bottom`,`left`],
|
|
1
|
+
import{computeFloatingPosition as e,computeFloatingTransformOrigin as t,createDismissLayer as n,createPortalLifecycle as r,createPositionSync as i,createPresenceLifecycle as a,emit as o,ensureId as s,getDataBool as c,getDataEnum as l,getDataNumber as u,getPart as d,getRoots as f,measurePopupContentRect as p,on as m}from"@data-slot/core";let h=0;const g=new Set,_=new Set,v=(e,t)=>{if(!e)return!1;for(let n of g)if(n!==t&&n.contains(e))return!0;return!1},y=(e,t)=>{for(let n of _)n(e,t)},ee=[`top`,`right`,`bottom`,`left`],b=[`start`,`center`,`end`];function x(f,x={}){let S=d(f,`tooltip-trigger`),C=d(f,`tooltip-content`),w=d(f,`tooltip-positioner`),T=w&&C&&w.contains(C)?w:null,E=d(f,`tooltip-portal`),D=E&&T&&E.contains(T)?E:null;if(!S||!C)throw Error(`Tooltip requires trigger and content slots`);let te=x.delay??u(f,`delay`)??300,O=x.skipDelayDuration??u(f,`skipDelayDuration`)??300,ne=x.onOpenChange,re=x.portal??c(C,`portal`)??c(f,`portal`)??!0,k=(e,t)=>l(C,e,t)??(T?l(T,e,t):void 0)??l(f,e,t),A=e=>u(C,e)??(T?u(T,e):void 0)??u(f,e),j=e=>c(C,e)??(T?c(T,e):void 0)??c(f,e),M=x.side??k(`side`,ee)??`top`,N=x.align??k(`align`,b)??`center`,P=x.sideOffset??A(`sideOffset`)??4,F=x.alignOffset??A(`alignOffset`)??0,I=x.avoidCollisions??j(`avoidCollisions`)??!0,ie=x.collisionPadding??A(`collisionPadding`)??8,L=!1,R=!1,z=!1,B=!1,V=null,H=[],U=r({content:C,root:f,enabled:re,wrapperSlot:T?void 0:`tooltip-positioner`,container:T??void 0,mountTarget:T?D??T:void 0}),W=s(C,`tooltip-content`);C.setAttribute(`role`,`tooltip`),C.setAttribute(`data-side`,M),C.setAttribute(`data-align`,N);let G=e=>{let t=U.container;if(f.setAttribute(`data-state`,e),C.setAttribute(`data-state`,e),t!==C&&t.setAttribute(`data-state`,e),e===`open`){f.setAttribute(`data-open`,``),C.setAttribute(`data-open`,``),t!==C&&t.setAttribute(`data-open`,``),R?(f.setAttribute(`data-instant`,``),C.setAttribute(`data-instant`,``),t!==C&&t.setAttribute(`data-instant`,``)):(f.removeAttribute(`data-instant`),C.removeAttribute(`data-instant`),t!==C&&t.removeAttribute(`data-instant`)),f.removeAttribute(`data-closed`),C.removeAttribute(`data-closed`),t!==C&&t.removeAttribute(`data-closed`);return}f.setAttribute(`data-closed`,``),C.setAttribute(`data-closed`,``),t!==C&&t.setAttribute(`data-closed`,``),R?(f.setAttribute(`data-instant`,``),C.setAttribute(`data-instant`,``),t!==C&&t.setAttribute(`data-instant`,``)):(f.removeAttribute(`data-instant`),C.removeAttribute(`data-instant`),t!==C&&t.removeAttribute(`data-instant`)),f.removeAttribute(`data-open`),C.removeAttribute(`data-open`),t!==C&&t.removeAttribute(`data-open`)},K=()=>{let n=U.container,r=f.ownerDocument.defaultView??window,i=S.getBoundingClientRect(),a=e({anchorRect:i,contentRect:p(C),side:M,align:N,sideOffset:P,alignOffset:F,avoidCollisions:I,collisionPadding:ie}),o=t({side:a.side,align:a.align,anchorRect:i,popupX:a.x,popupY:a.y});n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${a.x+r.scrollX}px, ${a.y+r.scrollY}px, 0)`,n.style.setProperty(`--transform-origin`,o),n.style.willChange=`transform`,n.style.margin=`0`,C.setAttribute(`data-side`,a.side),C.setAttribute(`data-align`,a.align),n!==C&&(n.setAttribute(`data-side`,a.side),n.setAttribute(`data-align`,a.align))},q=a({element:C,onExitComplete:()=>{B||(U.restore(),C.hidden=!0)}}),J=i({observedElements:[S,C],isActive:()=>L,ancestorScroll:!1,onUpdate:K}),Y=()=>S.hasAttribute(`disabled`)||S.getAttribute(`aria-disabled`)===`true`,X=(e,t,n=!1)=>{L!==e&&(!e&&L&&O>0&&(h=Date.now()+O),R=n,L=e,L?(S.setAttribute(`aria-describedby`,W),C.setAttribute(`aria-hidden`,`false`),U.mount(),C.hidden=!1,G(`open`),q.enter(),K(),J.start(),J.update()):(G(`closed`),S.removeAttribute(`aria-describedby`),C.setAttribute(`aria-hidden`,`true`),q.exit(),J.stop()),o(f,`tooltip:change`,{open:L,trigger:S,content:C,reason:t}),ne?.(L))},Z=e=>{if(V&&=(clearTimeout(V),null),Date.now()<h){X(!0,e,!0);return}V=setTimeout(()=>{X(!0,e),V=null},te)},Q=(e,t=!1)=>{V&&=(clearTimeout(V),null),X(!1,e,t)},$=(e,t)=>{e===S||!L||(z=!1,Q(t,!0))};return g.add(S),_.add($),H.push(()=>{_.delete($),g.delete(S)}),C.hidden=!0,C.setAttribute(`aria-hidden`,`true`),G(`closed`),H.push(m(S,`pointerenter`,e=>{e.pointerType!==`touch`&&(Y()||(y(S,`pointer`),Z(`pointer`)))}),m(S,`pointerleave`,e=>{if(e.pointerType===`touch`||z)return;let t=e.relatedTarget;if(!(t&&C.contains(t))){if(v(t,S)){Q(`pointer`,!0);return}Q(`pointer`)}}),m(S,`focus`,()=>{z=!0,!Y()&&(y(S,`focus`),Z(`focus`))}),m(S,`blur`,e=>{z=!1;let t=e.relatedTarget;if(v(t,S)){Q(`blur`,!0);return}Q(`blur`)})),H.push(m(C,`pointerleave`,e=>{if(e.pointerType===`touch`||z)return;let t=e.relatedTarget;if(!(t&&S.contains(t))){if(v(t,S)){Q(`pointer`,!0);return}Q(`pointer`)}})),H.push(m(f,`tooltip:set`,e=>{let t=e.detail,n;if(t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`)if(n){if(Y())return;V&&=(clearTimeout(V),null),X(!0,`api`)}else Q(`api`)})),H.push(n({root:f,isOpen:()=>L,onDismiss:()=>Q(`escape`),closeOnClickOutside:!1,closeOnEscape:!0,preventEscapeDefault:!1})),{show:()=>{Y()||(V&&=(clearTimeout(V),null),X(!0,`api`))},hide:()=>Q(`api`),get isOpen(){return L},destroy:()=>{B=!0,V&&clearTimeout(V),J.stop(),q.cleanup(),U.cleanup(),H.forEach(e=>e()),H.length=0}}}const S=new WeakSet;function C(e=document){let t=[];for(let n of f(e,`tooltip`))S.has(n)||(S.add(n),t.push(x(n)));return t}export{C as create,x as createTooltip};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@data-slot/tooltip",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.94",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -38,6 +38,6 @@
|
|
|
38
38
|
],
|
|
39
39
|
"license": "MIT",
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@data-slot/core": "0.2.
|
|
41
|
+
"@data-slot/core": "0.2.94"
|
|
42
42
|
}
|
|
43
43
|
}
|