@data-slot/hover-card 0.2.91 → 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 +11 -3
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -124,7 +124,14 @@ Use controller `setOpen(open)` or the `hover-card:set` event to apply state.
|
|
|
124
124
|
|
|
125
125
|
## Data Attributes
|
|
126
126
|
|
|
127
|
-
Options can be set via data attributes
|
|
127
|
+
Options can be set via data attributes. JS options take precedence.
|
|
128
|
+
|
|
129
|
+
Placement attributes (`data-side`, `data-align`, `data-side-offset`, `data-align-offset`, `data-avoid-collisions`, `data-collision-padding`) resolve in this order:
|
|
130
|
+
|
|
131
|
+
1. JavaScript option
|
|
132
|
+
2. `hover-card-content`
|
|
133
|
+
3. `hover-card-positioner`
|
|
134
|
+
4. `hover-card` root (fallback)
|
|
128
135
|
|
|
129
136
|
| Attribute | Type | Default | Description |
|
|
130
137
|
|-----------|------|---------|-------------|
|
|
@@ -132,8 +139,8 @@ Options can be set via data attributes on root/content. JS options take preceden
|
|
|
132
139
|
| `data-delay` | number | `700` | Open delay (ms) |
|
|
133
140
|
| `data-skip-delay-duration` | number | `300` | Warm-up window to skip open delay (ms) |
|
|
134
141
|
| `data-close-delay` | number | `300` | Close delay (ms) |
|
|
135
|
-
| `data-side` | string | `"bottom"` | Preferred side
|
|
136
|
-
| `data-align` | string | `"center"` | Preferred align
|
|
142
|
+
| `data-side` | string | `"bottom"` | Preferred side |
|
|
143
|
+
| `data-align` | string | `"center"` | Preferred align |
|
|
137
144
|
| `data-side-offset` | number | `4` | Distance from trigger (px) |
|
|
138
145
|
| `data-align-offset` | number | `0` | Align offset (px) |
|
|
139
146
|
| `data-avoid-collisions` | boolean | `true` | Collision handling |
|
|
@@ -179,6 +186,7 @@ root.dispatchEvent(new CustomEvent("hover-card:set", { detail: { value: true } }
|
|
|
179
186
|
|
|
180
187
|
Position is computed in JavaScript and applied as `position: absolute` + `transform: translate3d(...)`.
|
|
181
188
|
By default, content is portaled to `document.body` while open.
|
|
189
|
+
The positioned element (`hover-card-positioner`, or `hover-card-content` when `portal` is disabled) receives `--transform-origin`, so animations can scale from the trigger anchor.
|
|
182
190
|
Use `data-open` / `data-closed`, `data-side`, and `data-align` for animation/styling.
|
|
183
191
|
Placement uses layout dimensions, so `scale`/`zoom` animations on `hover-card-content` stay aligned without requiring an extra inner wrapper.
|
|
184
192
|
|
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
|
|
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 ee=a.open!==void 0,f=a.defaultOpen??(0,e.getDataBool)(i,`defaultOpen`)??!1,p=a.delay??(0,e.getDataNumber)(i,`delay`)??700,m=a.skipDelayDuration??(0,e.getDataNumber)(i,`skipDelayDuration`)??300,h=a.closeDelay??(0,e.getDataNumber)(i,`closeDelay`)??300,g=a.onOpenChange,_=a.closeOnClickOutside??(0,e.getDataBool)(i,`closeOnClickOutside`)??!0,v=a.closeOnEscape??(0,e.getDataBool)(i,`closeOnEscape`)??!0,y=a.portal??(0,e.getDataBool)(s,`portal`)??(0,e.getDataBool)(i,`portal`)??!0,b=(t,n)=>(0,e.getDataEnum)(s,t,n)??(l?(0,e.getDataEnum)(l,t,n):void 0)??(0,e.getDataEnum)(i,t,n),x=t=>(0,e.getDataNumber)(s,t)??(l?(0,e.getDataNumber)(l,t):void 0)??(0,e.getDataNumber)(i,t),te=t=>(0,e.getDataBool)(s,t)??(l?(0,e.getDataBool)(l,t):void 0)??(0,e.getDataBool)(i,t),S=a.side??b(`side`,t)??`bottom`,C=a.align??b(`align`,n)??`center`,w=a.sideOffset??x(`sideOffset`)??4,T=a.alignOffset??x(`alignOffset`)??0,ne=a.avoidCollisions??te(`avoidCollisions`)??!0,E=a.collisionPadding??x(`collisionPadding`)??8,D=a.open??f,O=!1,k=!1,A=!1,j=!1,M=!1,N=null,P=null,F=-1/0,I=-1/0,L=[],R=(0,e.createPortalLifecycle)({content:s,root:i,enabled:y,wrapperSlot:l?void 0:`hover-card-positioner`,container:l??void 0,mountTarget:l?d??l:void 0}),z=(0,e.ensureId)(s,`hover-card-content`);o.setAttribute(`aria-haspopup`,`dialog`),o.setAttribute(`aria-controls`,z),s.setAttribute(`data-side`,S),s.setAttribute(`data-align`,C);let B=()=>o.hasAttribute(`disabled`)||o.getAttribute(`aria-disabled`)===`true`,V=()=>{N&&=(clearTimeout(N),null)},H=()=>{P&&=(clearTimeout(P),null)},U=()=>{V(),H()},W=(t,n)=>{(0,e.emit)(i,`hover-card:change`,{open:t,reason:n,trigger:o,content:s}),g?.(t)},G=()=>{let t=R.container,n=i.ownerDocument.defaultView??window,r=o.getBoundingClientRect(),a=(0,e.computeFloatingPosition)({anchorRect:r,contentRect:(0,e.measurePopupContentRect)(s),side:S,align:C,sideOffset:w,alignOffset:T,avoidCollisions:ne,collisionPadding:E}),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))},K=e=>{let t=R.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`,``),O?(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`)},q=(0,e.createPresenceLifecycle)({element:s,onExitComplete:()=>{k||(R.restore(),s.hidden=!0)}}),J=(0,e.createPositionSync)({observedElements:[o,s],isActive:()=>D,ancestorScroll:!1,onUpdate:G}),Y=(t,n,i=!1)=>{D!==t&&(!t&&D&&m>0&&(r=Date.now()+m),O=t?i:!1,D=t,(0,e.setAria)(o,`expanded`,D),t?(R.mount(),s.hidden=!1,K(`open`),q.enter(),G(),J.start(),J.update()):(K(`closed`),q.exit(),J.stop()),W(D,n))},X=(e,t,n=!1)=>{if(D!==e){if(ee){W(e,t);return}Y(e,t,n)}},Z=(e,t,n=!1)=>{Y(e,t,n)},Q=e=>{if(H(),V(),m>0&&Date.now()<r){X(!0,e,!0);return}if(p<=0){X(!0,e);return}N=setTimeout(()=>{N=null,X(!0,e)},p)},re=e=>{if(V(),H(),h<=0){X(!1,e);return}P=setTimeout(()=>{P=null,X(!1,e)},h)},$=e=>{A||j||M||re(e)};return(0,e.setAria)(o,`expanded`,D),K(D?`open`:`closed`),s.hidden=!D,D&&(R.mount(),q.enter(),s.hidden=!1,G(),J.start(),J.update()),L.push((0,e.on)(i.ownerDocument,`keydown`,e=>{e.key===`Tab`&&(F=Date.now())},{capture:!0}),(0,e.on)(i.ownerDocument,`pointerdown`,()=>{F=-1/0,I=-1/0},{capture:!0}),(0,e.on)(i.ownerDocument,`pointermove`,e=>{e.pointerType!==`touch`&&(I=Date.now())},{capture:!0}),(0,e.on)(o,`pointerenter`,e=>{e.pointerType!==`touch`&&(A=!0,!B()&&(Date.now()-I>250||Q(`pointer`)))}),(0,e.on)(o,`pointermove`,e=>{e.pointerType!==`touch`&&(!A||B()||D||N||Q(`pointer`))}),(0,e.on)(o,`pointerleave`,e=>{if(e.pointerType===`touch`)return;A=!1;let t=e.relatedTarget;t&&s.contains(t)||$(`pointer`)})),L.push((0,e.on)(s,`pointerenter`,e=>{e.pointerType!==`touch`&&(j=!0,H())}),(0,e.on)(s,`pointerleave`,e=>{if(e.pointerType===`touch`)return;j=!1;let t=e.relatedTarget;t&&o.contains(t)||$(`pointer`)})),L.push((0,e.on)(o,`focusin`,()=>{B()||Date.now()-F>750||(M=!0,Q(`focus`))}),(0,e.on)(o,`focusout`,e=>{let t=e.relatedTarget;t&&(o.contains(t)||s.contains(t))||(M=!1,$(`blur`))}),(0,e.on)(s,`focusin`,()=>{M=!0,H()}),(0,e.on)(s,`focusout`,e=>{let t=e.relatedTarget;t&&(o.contains(t)||s.contains(t))||(M=!1,$(`blur`))})),L.push((0,e.createDismissLayer)({root:i,isOpen:()=>D,onDismiss:()=>X(!1,`dismiss`),closeOnClickOutside:_,closeOnEscape:v})),L.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`&&Z(n,`api`)})),{open:()=>{B()||(U(),X(!0,`api`))},close:()=>{U(),X(!1,`api`)},toggle:()=>{U(),!(!D&&B())&&X(!D,`api`)},setOpen:e=>{U(),Z(e,`api`)},get isOpen(){return D},destroy:()=>{k=!0,U(),J.stop(),q.cleanup(),R.cleanup(),L.forEach(e=>e()),L.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,
|
|
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 ee,getDataBool as s,getDataEnum as c,getDataNumber as l,getPart as u,getRoots as d,measurePopupContentRect as te,on as f,setAria as p}from"@data-slot/core";const ne=[`top`,`right`,`bottom`,`left`],re=[`start`,`center`,`end`];let m=0;function h(d,h={}){let g=u(d,`hover-card-trigger`),_=u(d,`hover-card-content`),v=u(d,`hover-card-positioner`),y=v&&_&&v.contains(_)?v:null,b=u(d,`hover-card-portal`),ie=b&&y&&b.contains(y)?b:null;if(!g||!_)throw Error(`Hover-card requires trigger and content slots`);let ae=h.open!==void 0,oe=h.defaultOpen??s(d,`defaultOpen`)??!1,x=h.delay??l(d,`delay`)??700,S=h.skipDelayDuration??l(d,`skipDelayDuration`)??300,C=h.closeDelay??l(d,`closeDelay`)??300,se=h.onOpenChange,ce=h.closeOnClickOutside??s(d,`closeOnClickOutside`)??!0,le=h.closeOnEscape??s(d,`closeOnEscape`)??!0,ue=h.portal??s(_,`portal`)??s(d,`portal`)??!0,w=(e,t)=>c(_,e,t)??(y?c(y,e,t):void 0)??c(d,e,t),T=e=>l(_,e)??(y?l(y,e):void 0)??l(d,e),de=e=>s(_,e)??(y?s(y,e):void 0)??s(d,e),E=h.side??w(`side`,ne)??`bottom`,D=h.align??w(`align`,re)??`center`,fe=h.sideOffset??T(`sideOffset`)??4,pe=h.alignOffset??T(`alignOffset`)??0,me=h.avoidCollisions??de(`avoidCollisions`)??!0,he=h.collisionPadding??T(`collisionPadding`)??8,O=h.open??oe,k=!1,A=!1,j=!1,M=!1,N=!1,P=null,F=null,I=-1/0,L=-1/0,R=[],z=r({content:_,root:d,enabled:ue,wrapperSlot:y?void 0:`hover-card-positioner`,container:y??void 0,mountTarget:y?ie??y:void 0}),ge=ee(_,`hover-card-content`);g.setAttribute(`aria-haspopup`,`dialog`),g.setAttribute(`aria-controls`,ge),_.setAttribute(`data-side`,E),_.setAttribute(`data-align`,D);let B=()=>g.hasAttribute(`disabled`)||g.getAttribute(`aria-disabled`)===`true`,V=()=>{P&&=(clearTimeout(P),null)},H=()=>{F&&=(clearTimeout(F),null)},U=()=>{V(),H()},W=(e,t)=>{o(d,`hover-card:change`,{open:e,reason:t,trigger:g,content:_}),se?.(e)},G=()=>{let n=z.container,r=d.ownerDocument.defaultView??window,i=g.getBoundingClientRect(),a=e({anchorRect:i,contentRect:te(_),side:E,align:D,sideOffset:fe,alignOffset:pe,avoidCollisions:me,collisionPadding:he}),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`,_.setAttribute(`data-side`,a.side),_.setAttribute(`data-align`,a.align),n!==_&&(n.setAttribute(`data-side`,a.side),n.setAttribute(`data-align`,a.align))},K=e=>{let t=z.container;if(d.setAttribute(`data-state`,e),_.setAttribute(`data-state`,e),t!==_&&t.setAttribute(`data-state`,e),e===`open`){d.setAttribute(`data-open`,``),_.setAttribute(`data-open`,``),t!==_&&t.setAttribute(`data-open`,``),k?(d.setAttribute(`data-instant`,``),_.setAttribute(`data-instant`,``),t!==_&&t.setAttribute(`data-instant`,``)):(d.removeAttribute(`data-instant`),_.removeAttribute(`data-instant`),t!==_&&t.removeAttribute(`data-instant`)),d.removeAttribute(`data-closed`),_.removeAttribute(`data-closed`),t!==_&&t.removeAttribute(`data-closed`);return}d.setAttribute(`data-closed`,``),_.setAttribute(`data-closed`,``),t!==_&&t.setAttribute(`data-closed`,``),d.removeAttribute(`data-instant`),_.removeAttribute(`data-instant`),t!==_&&t.removeAttribute(`data-instant`),d.removeAttribute(`data-open`),_.removeAttribute(`data-open`),t!==_&&t.removeAttribute(`data-open`)},q=a({element:_,onExitComplete:()=>{A||(z.restore(),_.hidden=!0)}}),J=i({observedElements:[g,_],isActive:()=>O,ancestorScroll:!1,onUpdate:G}),Y=(e,t,n=!1)=>{O!==e&&(!e&&O&&S>0&&(m=Date.now()+S),k=e?n:!1,O=e,p(g,`expanded`,O),e?(z.mount(),_.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(ae){W(e,t);return}Y(e,t,n)}},Z=(e,t,n=!1)=>{Y(e,t,n)},Q=e=>{if(H(),V(),S>0&&Date.now()<m){X(!0,e,!0);return}if(x<=0){X(!0,e);return}P=setTimeout(()=>{P=null,X(!0,e)},x)},_e=e=>{if(V(),H(),C<=0){X(!1,e);return}F=setTimeout(()=>{F=null,X(!1,e)},C)},$=e=>{j||M||N||_e(e)};return p(g,`expanded`,O),K(O?`open`:`closed`),_.hidden=!O,O&&(z.mount(),q.enter(),_.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(g,`pointerenter`,e=>{e.pointerType!==`touch`&&(j=!0,!B()&&(Date.now()-L>250||Q(`pointer`)))}),f(g,`pointermove`,e=>{e.pointerType!==`touch`&&(!j||B()||O||P||Q(`pointer`))}),f(g,`pointerleave`,e=>{if(e.pointerType===`touch`)return;j=!1;let t=e.relatedTarget;t&&_.contains(t)||$(`pointer`)})),R.push(f(_,`pointerenter`,e=>{e.pointerType!==`touch`&&(M=!0,H())}),f(_,`pointerleave`,e=>{if(e.pointerType===`touch`)return;M=!1;let t=e.relatedTarget;t&&g.contains(t)||$(`pointer`)})),R.push(f(g,`focusin`,()=>{B()||Date.now()-I>750||(N=!0,Q(`focus`))}),f(g,`focusout`,e=>{let t=e.relatedTarget;t&&(g.contains(t)||_.contains(t))||(N=!1,$(`blur`))}),f(_,`focusin`,()=>{N=!0,H()}),f(_,`focusout`,e=>{let t=e.relatedTarget;t&&(g.contains(t)||_.contains(t))||(N=!1,$(`blur`))})),R.push(n({root:d,isOpen:()=>O,onDismiss:()=>X(!1,`dismiss`),closeOnClickOutside:ce,closeOnEscape:le})),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 g=new WeakSet;function _(e=document){let t=[];for(let n of d(e,`hover-card`))g.has(n)||(g.add(n),t.push(h(n)));return t}export{_ as create,h 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.93",
|
|
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.93"
|
|
43
43
|
}
|
|
44
44
|
}
|