@data-slot/hover-card 0.2.89 → 0.2.90
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 +6 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -211,6 +211,11 @@ Use `data-open` / `data-closed`, `data-side`, and `data-align` for animation/sty
|
|
|
211
211
|
pointer-events: none;
|
|
212
212
|
animation: hover-card-out 120ms ease-in forwards;
|
|
213
213
|
}
|
|
214
|
+
|
|
215
|
+
[data-slot="hover-card-content"][data-instant] {
|
|
216
|
+
transition: none;
|
|
217
|
+
animation: none;
|
|
218
|
+
}
|
|
214
219
|
```
|
|
215
220
|
|
|
216
221
|
## Warm-up Behavior
|
|
@@ -220,6 +225,7 @@ When one hover-card closes, another hovered shortly after can open immediately (
|
|
|
220
225
|
- Controlled by `skipDelayDuration` / `data-skip-delay-duration`
|
|
221
226
|
- Set to `0` to disable warm-up behavior
|
|
222
227
|
- Warm-up applies across hover-card instances
|
|
228
|
+
- Warm-up opens add `data-instant` (root/content/positioner) for that open cycle, so CSS can disable animations
|
|
223
229
|
|
|
224
230
|
## Accessibility
|
|
225
231
|
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`right`,`bottom`,`left`],n=[`start`,`center`,`end`];let r=0;function i(i,a={}){let o=(0,e.getPart)(i,`hover-card-trigger`),s=(0,e.getPart)(i,`hover-card-content`),c=(0,e.getPart)(i,`hover-card-positioner`),l=c&&s&&c.contains(s)?c:null,u=(0,e.getPart)(i,`hover-card-portal`),d=u&&l&&u.contains(l)?u:null;if(!o||!s)throw Error(`Hover-card requires trigger and content slots`);let f=a.open!==void 0,p=a.defaultOpen??(0,e.getDataBool)(i,`defaultOpen`)??!1,m=a.delay??(0,e.getDataNumber)(i,`delay`)??700,h=a.skipDelayDuration??(0,e.getDataNumber)(i,`skipDelayDuration`)??300,g=a.closeDelay??(0,e.getDataNumber)(i,`closeDelay`)??300,_=a.onOpenChange,v=a.closeOnClickOutside??(0,e.getDataBool)(i,`closeOnClickOutside`)??!0,y=a.closeOnEscape??(0,e.getDataBool)(i,`closeOnEscape`)??!0,b=a.portal??(0,e.getDataBool)(s,`portal`)??(0,e.getDataBool)(i,`portal`)??!0,x=a.side??(0,e.getDataEnum)(s,`side`,t)??(0,e.getDataEnum)(i,`side`,t)??`bottom`,S=a.align??(0,e.getDataEnum)(s,`align`,n)??(0,e.getDataEnum)(i,`align`,n)??`center`,C=a.sideOffset??(0,e.getDataNumber)(s,`sideOffset`)??(0,e.getDataNumber)(i,`sideOffset`)??4,
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`right`,`bottom`,`left`],n=[`start`,`center`,`end`];let r=0;function i(i,a={}){let o=(0,e.getPart)(i,`hover-card-trigger`),s=(0,e.getPart)(i,`hover-card-content`),c=(0,e.getPart)(i,`hover-card-positioner`),l=c&&s&&c.contains(s)?c:null,u=(0,e.getPart)(i,`hover-card-portal`),d=u&&l&&u.contains(l)?u:null;if(!o||!s)throw Error(`Hover-card requires trigger and content slots`);let f=a.open!==void 0,p=a.defaultOpen??(0,e.getDataBool)(i,`defaultOpen`)??!1,m=a.delay??(0,e.getDataNumber)(i,`delay`)??700,h=a.skipDelayDuration??(0,e.getDataNumber)(i,`skipDelayDuration`)??300,g=a.closeDelay??(0,e.getDataNumber)(i,`closeDelay`)??300,_=a.onOpenChange,v=a.closeOnClickOutside??(0,e.getDataBool)(i,`closeOnClickOutside`)??!0,y=a.closeOnEscape??(0,e.getDataBool)(i,`closeOnEscape`)??!0,b=a.portal??(0,e.getDataBool)(s,`portal`)??(0,e.getDataBool)(i,`portal`)??!0,x=a.side??(0,e.getDataEnum)(s,`side`,t)??(0,e.getDataEnum)(i,`side`,t)??`bottom`,S=a.align??(0,e.getDataEnum)(s,`align`,n)??(0,e.getDataEnum)(i,`align`,n)??`center`,C=a.sideOffset??(0,e.getDataNumber)(s,`sideOffset`)??(0,e.getDataNumber)(i,`sideOffset`)??4,ee=a.alignOffset??(0,e.getDataNumber)(s,`alignOffset`)??(0,e.getDataNumber)(i,`alignOffset`)??0,w=a.avoidCollisions??(0,e.getDataBool)(s,`avoidCollisions`)??(0,e.getDataBool)(i,`avoidCollisions`)??!0,T=a.collisionPadding??(0,e.getDataNumber)(s,`collisionPadding`)??(0,e.getDataNumber)(i,`collisionPadding`)??8,E=a.open??p,D=!1,O=!1,k=!1,A=!1,j=!1,M=null,N=null,P=-1/0,F=-1/0,I=[],L=(0,e.createPortalLifecycle)({content:s,root:i,enabled:b,wrapperSlot:l?void 0:`hover-card-positioner`,container:l??void 0,mountTarget:l?d??l:void 0}),R=(0,e.ensureId)(s,`hover-card-content`);o.setAttribute(`aria-haspopup`,`dialog`),o.setAttribute(`aria-controls`,R),s.setAttribute(`data-side`,x),s.setAttribute(`data-align`,S);let z=()=>o.hasAttribute(`disabled`)||o.getAttribute(`aria-disabled`)===`true`,B=()=>{M&&=(clearTimeout(M),null)},V=()=>{N&&=(clearTimeout(N),null)},H=()=>{B(),V()},U=(t,n)=>{(0,e.emit)(i,`hover-card:change`,{open:t,reason:n,trigger:o,content:s}),_?.(t)},W=()=>{let t=L.container,n=i.ownerDocument.defaultView??window,r=(0,e.computeFloatingPosition)({anchorRect:o.getBoundingClientRect(),contentRect:s.getBoundingClientRect(),side:x,align:S,sideOffset:C,alignOffset:ee,avoidCollisions:w,collisionPadding:T});t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${r.x+n.scrollX}px, ${r.y+n.scrollY}px, 0)`,t.style.willChange=`transform`,t.style.margin=`0`,s.setAttribute(`data-side`,r.side),s.setAttribute(`data-align`,r.align),t!==s&&(t.setAttribute(`data-side`,r.side),t.setAttribute(`data-align`,r.align))},G=e=>{let t=L.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`,``),D?(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`)},K=(0,e.createPresenceLifecycle)({element:s,onExitComplete:()=>{O||(L.restore(),s.hidden=!0)}}),q=(0,e.createPositionSync)({observedElements:[o,s],isActive:()=>E,ancestorScroll:!1,onUpdate:W}),J=(t,n,i=!1)=>{E!==t&&(!t&&E&&h>0&&(r=Date.now()+h),D=t?i:!1,E=t,(0,e.setAria)(o,`expanded`,E),t?(L.mount(),s.hidden=!1,G(`open`),K.enter(),W(),q.start(),q.update()):(G(`closed`),K.exit(),q.stop()),U(E,n))},Y=(e,t,n=!1)=>{if(E!==e){if(f){U(e,t);return}J(e,t,n)}},X=(e,t,n=!1)=>{J(e,t,n)},Z=e=>{if(V(),B(),h>0&&Date.now()<r){Y(!0,e,!0);return}if(m<=0){Y(!0,e);return}M=setTimeout(()=>{M=null,Y(!0,e)},m)},Q=e=>{if(B(),V(),g<=0){Y(!1,e);return}N=setTimeout(()=>{N=null,Y(!1,e)},g)},$=e=>{k||A||j||Q(e)};return(0,e.setAria)(o,`expanded`,E),G(E?`open`:`closed`),s.hidden=!E,E&&(L.mount(),K.enter(),s.hidden=!1,W(),q.start(),q.update()),I.push((0,e.on)(i.ownerDocument,`keydown`,e=>{e.key===`Tab`&&(P=Date.now())},{capture:!0}),(0,e.on)(i.ownerDocument,`pointerdown`,()=>{P=-1/0,F=-1/0},{capture:!0}),(0,e.on)(i.ownerDocument,`pointermove`,e=>{e.pointerType!==`touch`&&(F=Date.now())},{capture:!0}),(0,e.on)(o,`pointerenter`,e=>{e.pointerType!==`touch`&&(k=!0,!z()&&(Date.now()-F>250||Z(`pointer`)))}),(0,e.on)(o,`pointermove`,e=>{e.pointerType!==`touch`&&(!k||z()||E||M||Z(`pointer`))}),(0,e.on)(o,`pointerleave`,e=>{if(e.pointerType===`touch`)return;k=!1;let t=e.relatedTarget;t&&s.contains(t)||$(`pointer`)})),I.push((0,e.on)(s,`pointerenter`,e=>{e.pointerType!==`touch`&&(A=!0,V())}),(0,e.on)(s,`pointerleave`,e=>{if(e.pointerType===`touch`)return;A=!1;let t=e.relatedTarget;t&&o.contains(t)||$(`pointer`)})),I.push((0,e.on)(o,`focusin`,()=>{z()||Date.now()-P>750||(j=!0,Z(`focus`))}),(0,e.on)(o,`focusout`,e=>{let t=e.relatedTarget;t&&(o.contains(t)||s.contains(t))||(j=!1,$(`blur`))}),(0,e.on)(s,`focusin`,()=>{j=!0,V()}),(0,e.on)(s,`focusout`,e=>{let t=e.relatedTarget;t&&(o.contains(t)||s.contains(t))||(j=!1,$(`blur`))})),I.push((0,e.createDismissLayer)({root:i,isOpen:()=>E,onDismiss:()=>Y(!1,`dismiss`),closeOnClickOutside:v,closeOnEscape:y})),I.push((0,e.on)(i,`hover-card:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&X(n,`api`)})),{open:()=>{z()||(H(),Y(!0,`api`))},close:()=>{H(),Y(!1,`api`)},toggle:()=>{H(),!(!E&&z())&&Y(!E,`api`)},setOpen:e=>{H(),X(e,`api`)},get isOpen(){return E},destroy:()=>{O=!0,H(),q.stop(),K.cleanup(),L.cleanup(),I.forEach(e=>e()),I.length=0}}}const a=new WeakSet;function o(t=document){let n=[];for(let r of(0,e.getRoots)(t,`hover-card`))a.has(r)||(a.add(r),n.push(i(r)));return n}exports.create=o,exports.createHoverCard=i;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{computeFloatingPosition as e,createDismissLayer as t,createPortalLifecycle as n,createPositionSync as r,createPresenceLifecycle as
|
|
1
|
+
import{computeFloatingPosition as e,createDismissLayer as t,createPortalLifecycle as n,createPositionSync as r,createPresenceLifecycle as i,emit as a,ensureId as o,getDataBool as s,getDataEnum as c,getDataNumber as l,getPart as u,getRoots as d,on as f,setAria as p}from"@data-slot/core";const m=[`top`,`right`,`bottom`,`left`],h=[`start`,`center`,`end`];let g=0;function _(d,_={}){let v=u(d,`hover-card-trigger`),y=u(d,`hover-card-content`),b=u(d,`hover-card-positioner`),x=b&&y&&b.contains(y)?b:null,S=u(d,`hover-card-portal`),ee=S&&x&&S.contains(x)?S:null;if(!v||!y)throw Error(`Hover-card requires trigger and content slots`);let te=_.open!==void 0,ne=_.defaultOpen??s(d,`defaultOpen`)??!1,C=_.delay??l(d,`delay`)??700,w=_.skipDelayDuration??l(d,`skipDelayDuration`)??300,T=_.closeDelay??l(d,`closeDelay`)??300,re=_.onOpenChange,ie=_.closeOnClickOutside??s(d,`closeOnClickOutside`)??!0,ae=_.closeOnEscape??s(d,`closeOnEscape`)??!0,oe=_.portal??s(y,`portal`)??s(d,`portal`)??!0,E=_.side??c(y,`side`,m)??c(d,`side`,m)??`bottom`,D=_.align??c(y,`align`,h)??c(d,`align`,h)??`center`,se=_.sideOffset??l(y,`sideOffset`)??l(d,`sideOffset`)??4,ce=_.alignOffset??l(y,`alignOffset`)??l(d,`alignOffset`)??0,le=_.avoidCollisions??s(y,`avoidCollisions`)??s(d,`avoidCollisions`)??!0,ue=_.collisionPadding??l(y,`collisionPadding`)??l(d,`collisionPadding`)??8,O=_.open??ne,k=!1,A=!1,j=!1,M=!1,N=!1,P=null,F=null,I=-1/0,L=-1/0,R=[],z=n({content:y,root:d,enabled:oe,wrapperSlot:x?void 0:`hover-card-positioner`,container:x??void 0,mountTarget:x?ee??x:void 0}),de=o(y,`hover-card-content`);v.setAttribute(`aria-haspopup`,`dialog`),v.setAttribute(`aria-controls`,de),y.setAttribute(`data-side`,E),y.setAttribute(`data-align`,D);let B=()=>v.hasAttribute(`disabled`)||v.getAttribute(`aria-disabled`)===`true`,V=()=>{P&&=(clearTimeout(P),null)},H=()=>{F&&=(clearTimeout(F),null)},U=()=>{V(),H()},W=(e,t)=>{a(d,`hover-card:change`,{open:e,reason:t,trigger:v,content:y}),re?.(e)},G=()=>{let t=z.container,n=d.ownerDocument.defaultView??window,r=e({anchorRect:v.getBoundingClientRect(),contentRect:y.getBoundingClientRect(),side:E,align:D,sideOffset:se,alignOffset:ce,avoidCollisions:le,collisionPadding:ue});t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${r.x+n.scrollX}px, ${r.y+n.scrollY}px, 0)`,t.style.willChange=`transform`,t.style.margin=`0`,y.setAttribute(`data-side`,r.side),y.setAttribute(`data-align`,r.align),t!==y&&(t.setAttribute(`data-side`,r.side),t.setAttribute(`data-align`,r.align))},K=e=>{let t=z.container;if(d.setAttribute(`data-state`,e),y.setAttribute(`data-state`,e),t!==y&&t.setAttribute(`data-state`,e),e===`open`){d.setAttribute(`data-open`,``),y.setAttribute(`data-open`,``),t!==y&&t.setAttribute(`data-open`,``),k?(d.setAttribute(`data-instant`,``),y.setAttribute(`data-instant`,``),t!==y&&t.setAttribute(`data-instant`,``)):(d.removeAttribute(`data-instant`),y.removeAttribute(`data-instant`),t!==y&&t.removeAttribute(`data-instant`)),d.removeAttribute(`data-closed`),y.removeAttribute(`data-closed`),t!==y&&t.removeAttribute(`data-closed`);return}d.setAttribute(`data-closed`,``),y.setAttribute(`data-closed`,``),t!==y&&t.setAttribute(`data-closed`,``),d.removeAttribute(`data-instant`),y.removeAttribute(`data-instant`),t!==y&&t.removeAttribute(`data-instant`),d.removeAttribute(`data-open`),y.removeAttribute(`data-open`),t!==y&&t.removeAttribute(`data-open`)},q=i({element:y,onExitComplete:()=>{A||(z.restore(),y.hidden=!0)}}),J=r({observedElements:[v,y],isActive:()=>O,ancestorScroll:!1,onUpdate:G}),Y=(e,t,n=!1)=>{O!==e&&(!e&&O&&w>0&&(g=Date.now()+w),k=e?n:!1,O=e,p(v,`expanded`,O),e?(z.mount(),y.hidden=!1,K(`open`),q.enter(),G(),J.start(),J.update()):(K(`closed`),q.exit(),J.stop()),W(O,t))},X=(e,t,n=!1)=>{if(O!==e){if(te){W(e,t);return}Y(e,t,n)}},Z=(e,t,n=!1)=>{Y(e,t,n)},Q=e=>{if(H(),V(),w>0&&Date.now()<g){X(!0,e,!0);return}if(C<=0){X(!0,e);return}P=setTimeout(()=>{P=null,X(!0,e)},C)},fe=e=>{if(V(),H(),T<=0){X(!1,e);return}F=setTimeout(()=>{F=null,X(!1,e)},T)},$=e=>{j||M||N||fe(e)};return p(v,`expanded`,O),K(O?`open`:`closed`),y.hidden=!O,O&&(z.mount(),q.enter(),y.hidden=!1,G(),J.start(),J.update()),R.push(f(d.ownerDocument,`keydown`,e=>{e.key===`Tab`&&(I=Date.now())},{capture:!0}),f(d.ownerDocument,`pointerdown`,()=>{I=-1/0,L=-1/0},{capture:!0}),f(d.ownerDocument,`pointermove`,e=>{e.pointerType!==`touch`&&(L=Date.now())},{capture:!0}),f(v,`pointerenter`,e=>{e.pointerType!==`touch`&&(j=!0,!B()&&(Date.now()-L>250||Q(`pointer`)))}),f(v,`pointermove`,e=>{e.pointerType!==`touch`&&(!j||B()||O||P||Q(`pointer`))}),f(v,`pointerleave`,e=>{if(e.pointerType===`touch`)return;j=!1;let t=e.relatedTarget;t&&y.contains(t)||$(`pointer`)})),R.push(f(y,`pointerenter`,e=>{e.pointerType!==`touch`&&(M=!0,H())}),f(y,`pointerleave`,e=>{if(e.pointerType===`touch`)return;M=!1;let t=e.relatedTarget;t&&v.contains(t)||$(`pointer`)})),R.push(f(v,`focusin`,()=>{B()||Date.now()-I>750||(N=!0,Q(`focus`))}),f(v,`focusout`,e=>{let t=e.relatedTarget;t&&(v.contains(t)||y.contains(t))||(N=!1,$(`blur`))}),f(y,`focusin`,()=>{N=!0,H()}),f(y,`focusout`,e=>{let t=e.relatedTarget;t&&(v.contains(t)||y.contains(t))||(N=!1,$(`blur`))})),R.push(t({root:d,isOpen:()=>O,onDismiss:()=>X(!1,`dismiss`),closeOnClickOutside:ie,closeOnEscape:ae})),R.push(f(d,`hover-card:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&Z(n,`api`)})),{open:()=>{B()||(U(),X(!0,`api`))},close:()=>{U(),X(!1,`api`)},toggle:()=>{U(),!(!O&&B())&&X(!O,`api`)},setOpen:e=>{U(),Z(e,`api`)},get isOpen(){return O},destroy:()=>{A=!0,U(),J.stop(),q.cleanup(),z.cleanup(),R.forEach(e=>e()),R.length=0}}}const v=new WeakSet;function y(e=document){let t=[];for(let n of d(e,`hover-card`))v.has(n)||(v.add(n),t.push(_(n)));return t}export{y as create,_ as createHoverCard};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@data-slot/hover-card",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.90",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -39,6 +39,6 @@
|
|
|
39
39
|
],
|
|
40
40
|
"license": "MIT",
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@data-slot/core": "0.2.
|
|
42
|
+
"@data-slot/core": "0.2.90"
|
|
43
43
|
}
|
|
44
44
|
}
|