@data-slot/tooltip 0.2.92 → 0.2.93
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 +2 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -179,6 +179,7 @@ The component sets these attributes automatically:
|
|
|
179
179
|
|
|
180
180
|
Position is computed in JavaScript and applied to the positioner as `position: absolute` + `transform: translate3d(...)`.
|
|
181
181
|
By default, content is portaled to `document.body` while open.
|
|
182
|
+
The positioned element (`tooltip-positioner`, or `tooltip-content` when `portal` is disabled) gets `--transform-origin`, which `tooltip-content` can use for transform animations via CSS inheritance.
|
|
182
183
|
Use `data-open` / `data-closed`, `data-side`, and `data-align` for styling and animations.
|
|
183
184
|
Placement uses layout dimensions, so `scale`/`zoom` animations on `tooltip-content` remain stable without adding an extra wrapper.
|
|
184
185
|
|
|
@@ -192,7 +193,7 @@ The visibility transition trick keeps the tooltip visible during fade-out, then
|
|
|
192
193
|
opacity: 0;
|
|
193
194
|
visibility: hidden;
|
|
194
195
|
pointer-events: none;
|
|
195
|
-
transform-origin: center;
|
|
196
|
+
transform-origin: var(--transform-origin, center);
|
|
196
197
|
transition: opacity 0.15s ease, visibility 0s linear 0.15s;
|
|
197
198
|
}
|
|
198
199
|
|
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`],r=[`start`,`center`,`end`];function i(i,a={}){let o=(0,e.getPart)(i,`tooltip-trigger`),s=(0,e.getPart)(i,`tooltip-content`),c=(0,e.getPart)(i,`tooltip-positioner`),l=c&&s&&c.contains(s)?c:null,u=(0,e.getPart)(i,`tooltip-portal`),d=u&&l&&u.contains(l)?u:null;if(!o||!s)throw Error(`Tooltip requires trigger and content slots`);let f=a.delay??(0,e.getDataNumber)(i,`delay`)??300,p=a.skipDelayDuration??(0,e.getDataNumber)(i,`skipDelayDuration`)??300,m=a.onOpenChange,h=a.portal??(0,e.getDataBool)(s,`portal`)??(0,e.getDataBool)(i,`portal`)??!0,g=(t,n)=>(0,e.getDataEnum)(s,t,n)??(l?(0,e.getDataEnum)(l,t,n):void 0)??(0,e.getDataEnum)(i,t,n),_=t=>(0,e.getDataNumber)(s,t)??(l?(0,e.getDataNumber)(l,t):void 0)??(0,e.getDataNumber)(i,t),v=t=>(0,e.getDataBool)(s,t)??(l?(0,e.getDataBool)(l,t):void 0)??(0,e.getDataBool)(i,t),y=a.side??g(`side`,n)??`top`,b=a.align??g(`align`,r)??`center`,x=a.sideOffset??_(`sideOffset`)??4,S=a.alignOffset??_(`alignOffset`)??0,C=a.avoidCollisions??v(`avoidCollisions`)??!0,w=a.collisionPadding??_(`collisionPadding`)??8,T=!1,E=!1,D=!1,O=!1,k=null,A=[],j=(0,e.createPortalLifecycle)({content:s,root:i,enabled:h,wrapperSlot:l?void 0:`tooltip-positioner`,container:l??void 0,mountTarget:l?d??l:void 0}),M=(0,e.ensureId)(s,`tooltip-content`);s.setAttribute(`role`,`tooltip`),s.setAttribute(`data-side`,y),s.setAttribute(`data-align`,b);let N=e=>{let t=j.container;if(i.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e),t!==s&&t.setAttribute(`data-state`,e),e===`open`){i.setAttribute(`data-open`,``),s.setAttribute(`data-open`,``),t!==s&&t.setAttribute(`data-open`,``),E?(i.setAttribute(`data-instant`,``),s.setAttribute(`data-instant`,``),t!==s&&t.setAttribute(`data-instant`,``)):(i.removeAttribute(`data-instant`),s.removeAttribute(`data-instant`),t!==s&&t.removeAttribute(`data-instant`)),i.removeAttribute(`data-closed`),s.removeAttribute(`data-closed`),t!==s&&t.removeAttribute(`data-closed`);return}i.setAttribute(`data-closed`,``),s.setAttribute(`data-closed`,``),t!==s&&t.setAttribute(`data-closed`,``),i.removeAttribute(`data-instant`),s.removeAttribute(`data-instant`),t!==s&&t.removeAttribute(`data-instant`),i.removeAttribute(`data-open`),s.removeAttribute(`data-open`),t!==s&&t.removeAttribute(`data-open`)},P=()=>{let t=j.container,n=i.ownerDocument.defaultView??window,r=(0,e.computeFloatingPosition)({anchorRect:
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`),t=0;const n=[`top`,`right`,`bottom`,`left`],r=[`start`,`center`,`end`];function i(i,a={}){let o=(0,e.getPart)(i,`tooltip-trigger`),s=(0,e.getPart)(i,`tooltip-content`),c=(0,e.getPart)(i,`tooltip-positioner`),l=c&&s&&c.contains(s)?c:null,u=(0,e.getPart)(i,`tooltip-portal`),d=u&&l&&u.contains(l)?u:null;if(!o||!s)throw Error(`Tooltip requires trigger and content slots`);let f=a.delay??(0,e.getDataNumber)(i,`delay`)??300,p=a.skipDelayDuration??(0,e.getDataNumber)(i,`skipDelayDuration`)??300,m=a.onOpenChange,h=a.portal??(0,e.getDataBool)(s,`portal`)??(0,e.getDataBool)(i,`portal`)??!0,g=(t,n)=>(0,e.getDataEnum)(s,t,n)??(l?(0,e.getDataEnum)(l,t,n):void 0)??(0,e.getDataEnum)(i,t,n),_=t=>(0,e.getDataNumber)(s,t)??(l?(0,e.getDataNumber)(l,t):void 0)??(0,e.getDataNumber)(i,t),v=t=>(0,e.getDataBool)(s,t)??(l?(0,e.getDataBool)(l,t):void 0)??(0,e.getDataBool)(i,t),y=a.side??g(`side`,n)??`top`,b=a.align??g(`align`,r)??`center`,x=a.sideOffset??_(`sideOffset`)??4,S=a.alignOffset??_(`alignOffset`)??0,C=a.avoidCollisions??v(`avoidCollisions`)??!0,w=a.collisionPadding??_(`collisionPadding`)??8,T=!1,E=!1,D=!1,O=!1,k=null,A=[],j=(0,e.createPortalLifecycle)({content:s,root:i,enabled:h,wrapperSlot:l?void 0:`tooltip-positioner`,container:l??void 0,mountTarget:l?d??l:void 0}),M=(0,e.ensureId)(s,`tooltip-content`);s.setAttribute(`role`,`tooltip`),s.setAttribute(`data-side`,y),s.setAttribute(`data-align`,b);let N=e=>{let t=j.container;if(i.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e),t!==s&&t.setAttribute(`data-state`,e),e===`open`){i.setAttribute(`data-open`,``),s.setAttribute(`data-open`,``),t!==s&&t.setAttribute(`data-open`,``),E?(i.setAttribute(`data-instant`,``),s.setAttribute(`data-instant`,``),t!==s&&t.setAttribute(`data-instant`,``)):(i.removeAttribute(`data-instant`),s.removeAttribute(`data-instant`),t!==s&&t.removeAttribute(`data-instant`)),i.removeAttribute(`data-closed`),s.removeAttribute(`data-closed`),t!==s&&t.removeAttribute(`data-closed`);return}i.setAttribute(`data-closed`,``),s.setAttribute(`data-closed`,``),t!==s&&t.setAttribute(`data-closed`,``),i.removeAttribute(`data-instant`),s.removeAttribute(`data-instant`),t!==s&&t.removeAttribute(`data-instant`),i.removeAttribute(`data-open`),s.removeAttribute(`data-open`),t!==s&&t.removeAttribute(`data-open`)},P=()=>{let t=j.container,n=i.ownerDocument.defaultView??window,r=o.getBoundingClientRect(),a=(0,e.computeFloatingPosition)({anchorRect:r,contentRect:(0,e.measurePopupContentRect)(s),side:y,align:b,sideOffset:x,alignOffset:S,avoidCollisions:C,collisionPadding:w}),c=(0,e.computeFloatingTransformOrigin)({side:a.side,align:a.align,anchorRect:r,popupX:a.x,popupY:a.y});t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${a.x+n.scrollX}px, ${a.y+n.scrollY}px, 0)`,t.style.setProperty(`--transform-origin`,c),t.style.willChange=`transform`,t.style.margin=`0`,s.setAttribute(`data-side`,a.side),s.setAttribute(`data-align`,a.align),t!==s&&(t.setAttribute(`data-side`,a.side),t.setAttribute(`data-align`,a.align))},F=(0,e.createPresenceLifecycle)({element:s,onExitComplete:()=>{O||(j.restore(),s.hidden=!0)}}),I=(0,e.createPositionSync)({observedElements:[o,s],isActive:()=>T,ancestorScroll:!1,onUpdate:P}),L=()=>o.hasAttribute(`disabled`)||o.getAttribute(`aria-disabled`)===`true`,R=(n,r,a=!1)=>{T!==n&&(!n&&T&&p>0&&(t=Date.now()+p),E=n?a:!1,T=n,T?(o.setAttribute(`aria-describedby`,M),s.setAttribute(`aria-hidden`,`false`),j.mount(),s.hidden=!1,N(`open`),F.enter(),P(),I.start(),I.update()):(N(`closed`),o.removeAttribute(`aria-describedby`),s.setAttribute(`aria-hidden`,`true`),F.exit(),I.stop()),(0,e.emit)(i,`tooltip:change`,{open:T,trigger:o,content:s,reason:r}),m?.(T))},z=e=>{if(k&&=(clearTimeout(k),null),Date.now()<t){R(!0,e,!0);return}k=setTimeout(()=>{R(!0,e),k=null},f)},B=e=>{k&&=(clearTimeout(k),null),R(!1,e)};return s.hidden=!0,s.setAttribute(`aria-hidden`,`true`),N(`closed`),A.push((0,e.on)(o,`pointerenter`,e=>{e.pointerType!==`touch`&&(L()||z(`pointer`))}),(0,e.on)(o,`pointerleave`,e=>{if(e.pointerType===`touch`||D)return;let t=e.relatedTarget;t&&s.contains(t)||B(`pointer`)}),(0,e.on)(o,`focus`,()=>{D=!0,!L()&&z(`focus`)}),(0,e.on)(o,`blur`,()=>{D=!1,B(`blur`)})),A.push((0,e.on)(s,`pointerleave`,e=>{if(e.pointerType===`touch`||D)return;let t=e.relatedTarget;t&&o.contains(t)||B(`pointer`)})),A.push((0,e.on)(i,`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(L())return;k&&=(clearTimeout(k),null),R(!0,`api`)}else B(`api`)})),A.push((0,e.createDismissLayer)({root:i,isOpen:()=>T,onDismiss:()=>B(`escape`),closeOnClickOutside:!1,closeOnEscape:!0,preventEscapeDefault:!1})),{show:()=>{L()||(k&&=(clearTimeout(k),null),R(!0,`api`))},hide:()=>B(`api`),get isOpen(){return T},destroy:()=>{O=!0,k&&clearTimeout(k),I.stop(),F.cleanup(),j.cleanup(),A.forEach(e=>e()),A.length=0}}}const a=new WeakSet;function o(t=document){let n=[];for(let r of(0,e.getRoots)(t,`tooltip`))a.has(r)||(a.add(r),n.push(i(r)));return n}exports.create=o,exports.createTooltip=i;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{computeFloatingPosition as e,
|
|
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`],_=[`start`,`center`,`end`];function v(f,v={}){let y=d(f,`tooltip-trigger`),b=d(f,`tooltip-content`),x=d(f,`tooltip-positioner`),S=x&&b&&x.contains(b)?x:null,C=d(f,`tooltip-portal`),w=C&&S&&C.contains(S)?C:null;if(!y||!b)throw Error(`Tooltip requires trigger and content slots`);let T=v.delay??u(f,`delay`)??300,E=v.skipDelayDuration??u(f,`skipDelayDuration`)??300,D=v.onOpenChange,O=v.portal??c(b,`portal`)??c(f,`portal`)??!0,k=(e,t)=>l(b,e,t)??(S?l(S,e,t):void 0)??l(f,e,t),A=e=>u(b,e)??(S?u(S,e):void 0)??u(f,e),j=e=>c(b,e)??(S?c(S,e):void 0)??c(f,e),M=v.side??k(`side`,g)??`top`,N=v.align??k(`align`,_)??`center`,P=v.sideOffset??A(`sideOffset`)??4,F=v.alignOffset??A(`alignOffset`)??0,I=v.avoidCollisions??j(`avoidCollisions`)??!0,L=v.collisionPadding??A(`collisionPadding`)??8,R=!1,z=!1,B=!1,V=!1,H=null,U=[],W=r({content:b,root:f,enabled:O,wrapperSlot:S?void 0:`tooltip-positioner`,container:S??void 0,mountTarget:S?w??S:void 0}),G=s(b,`tooltip-content`);b.setAttribute(`role`,`tooltip`),b.setAttribute(`data-side`,M),b.setAttribute(`data-align`,N);let K=e=>{let t=W.container;if(f.setAttribute(`data-state`,e),b.setAttribute(`data-state`,e),t!==b&&t.setAttribute(`data-state`,e),e===`open`){f.setAttribute(`data-open`,``),b.setAttribute(`data-open`,``),t!==b&&t.setAttribute(`data-open`,``),z?(f.setAttribute(`data-instant`,``),b.setAttribute(`data-instant`,``),t!==b&&t.setAttribute(`data-instant`,``)):(f.removeAttribute(`data-instant`),b.removeAttribute(`data-instant`),t!==b&&t.removeAttribute(`data-instant`)),f.removeAttribute(`data-closed`),b.removeAttribute(`data-closed`),t!==b&&t.removeAttribute(`data-closed`);return}f.setAttribute(`data-closed`,``),b.setAttribute(`data-closed`,``),t!==b&&t.setAttribute(`data-closed`,``),f.removeAttribute(`data-instant`),b.removeAttribute(`data-instant`),t!==b&&t.removeAttribute(`data-instant`),f.removeAttribute(`data-open`),b.removeAttribute(`data-open`),t!==b&&t.removeAttribute(`data-open`)},q=()=>{let n=W.container,r=f.ownerDocument.defaultView??window,i=y.getBoundingClientRect(),a=e({anchorRect:i,contentRect:p(b),side:M,align:N,sideOffset:P,alignOffset:F,avoidCollisions:I,collisionPadding:L}),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`,b.setAttribute(`data-side`,a.side),b.setAttribute(`data-align`,a.align),n!==b&&(n.setAttribute(`data-side`,a.side),n.setAttribute(`data-align`,a.align))},J=a({element:b,onExitComplete:()=>{V||(W.restore(),b.hidden=!0)}}),Y=i({observedElements:[y,b],isActive:()=>R,ancestorScroll:!1,onUpdate:q}),X=()=>y.hasAttribute(`disabled`)||y.getAttribute(`aria-disabled`)===`true`,Z=(e,t,n=!1)=>{R!==e&&(!e&&R&&E>0&&(h=Date.now()+E),z=e?n:!1,R=e,R?(y.setAttribute(`aria-describedby`,G),b.setAttribute(`aria-hidden`,`false`),W.mount(),b.hidden=!1,K(`open`),J.enter(),q(),Y.start(),Y.update()):(K(`closed`),y.removeAttribute(`aria-describedby`),b.setAttribute(`aria-hidden`,`true`),J.exit(),Y.stop()),o(f,`tooltip:change`,{open:R,trigger:y,content:b,reason:t}),D?.(R))},Q=e=>{if(H&&=(clearTimeout(H),null),Date.now()<h){Z(!0,e,!0);return}H=setTimeout(()=>{Z(!0,e),H=null},T)},$=e=>{H&&=(clearTimeout(H),null),Z(!1,e)};return b.hidden=!0,b.setAttribute(`aria-hidden`,`true`),K(`closed`),U.push(m(y,`pointerenter`,e=>{e.pointerType!==`touch`&&(X()||Q(`pointer`))}),m(y,`pointerleave`,e=>{if(e.pointerType===`touch`||B)return;let t=e.relatedTarget;t&&b.contains(t)||$(`pointer`)}),m(y,`focus`,()=>{B=!0,!X()&&Q(`focus`)}),m(y,`blur`,()=>{B=!1,$(`blur`)})),U.push(m(b,`pointerleave`,e=>{if(e.pointerType===`touch`||B)return;let t=e.relatedTarget;t&&y.contains(t)||$(`pointer`)})),U.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(X())return;H&&=(clearTimeout(H),null),Z(!0,`api`)}else $(`api`)})),U.push(n({root:f,isOpen:()=>R,onDismiss:()=>$(`escape`),closeOnClickOutside:!1,closeOnEscape:!0,preventEscapeDefault:!1})),{show:()=>{X()||(H&&=(clearTimeout(H),null),Z(!0,`api`))},hide:()=>$(`api`),get isOpen(){return R},destroy:()=>{V=!0,H&&clearTimeout(H),Y.stop(),J.cleanup(),W.cleanup(),U.forEach(e=>e()),U.length=0}}}const y=new WeakSet;function b(e=document){let t=[];for(let n of f(e,`tooltip`))y.has(n)||(y.add(n),t.push(v(n)));return t}export{b as create,v 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.93",
|
|
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.93"
|
|
42
42
|
}
|
|
43
43
|
}
|