@data-slot/popover 0.2.90 → 0.2.92
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 +10 -2
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -125,7 +125,14 @@ const popover = createPopover(element, {
|
|
|
125
125
|
|
|
126
126
|
### Data Attributes
|
|
127
127
|
|
|
128
|
-
Options can also be set via data attributes
|
|
128
|
+
Options can also be set via data attributes. JS options take precedence over data attributes.
|
|
129
|
+
|
|
130
|
+
Placement attributes (`data-side`, `data-align`, `data-side-offset`, `data-align-offset`, `data-avoid-collisions`, `data-collision-padding`) resolve in this order:
|
|
131
|
+
|
|
132
|
+
1. JavaScript option
|
|
133
|
+
2. `popover-content`
|
|
134
|
+
3. `popover-positioner`
|
|
135
|
+
4. `popover` root (fallback)
|
|
129
136
|
|
|
130
137
|
| Attribute | Type | Default | Description |
|
|
131
138
|
|-----------|------|---------|-------------|
|
|
@@ -142,7 +149,7 @@ Options can also be set via data attributes on the root element. JS options take
|
|
|
142
149
|
|
|
143
150
|
Boolean attributes: present or `"true"` = true, `"false"` = false, absent = default.
|
|
144
151
|
|
|
145
|
-
Placement can be set on root or
|
|
152
|
+
Placement can be set on root, content, or authored positioner (content takes precedence):
|
|
146
153
|
|
|
147
154
|
```html
|
|
148
155
|
<div data-slot="popover-content" data-side="top" data-align="end">
|
|
@@ -164,6 +171,7 @@ By default, content is portaled to `document.body` while open (document coordina
|
|
|
164
171
|
If `portal` is disabled, positioning is applied directly to `popover-content`.
|
|
165
172
|
Use `data-open`/`data-closed` and `data-side` for styling/animation.
|
|
166
173
|
This keeps `popover-content` free for transform animations.
|
|
174
|
+
Placement uses layout dimensions, so `scale`/`zoom` animations on `popover-content` do not require an extra inner wrapper for stable positioning.
|
|
167
175
|
|
|
168
176
|
```css
|
|
169
177
|
[data-slot="popover-content"] {
|
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`];function r(r,i={}){let a=(0,e.getPart)(r,`popover-trigger`),o=(0,e.getPart)(r,`popover-content`),s=(0,e.getPart)(r,`popover-close`),c=(0,e.getPart)(r,`popover-positioner`),l=c&&o&&c.contains(o)?c:null,u=(0,e.getPart)(r,`popover-portal`),d=u&&l&&u.contains(l)?u:null;if(!a||!o)throw Error(`Popover requires trigger and content slots`);let f=i.defaultOpen??(0,e.getDataBool)(r,`defaultOpen`)??!1,p=i.onOpenChange,m=i.closeOnClickOutside??(0,e.getDataBool)(r,`closeOnClickOutside`)??!0,h=i.closeOnEscape??(0,e.getDataBool)(r,`closeOnEscape`)??!0,g=i.portal??(0,e.getDataBool)(o,`portal`)??(0,e.getDataBool)(r,`portal`)??!0,_=
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`right`,`bottom`,`left`],n=[`start`,`center`,`end`];function r(r,i={}){let a=(0,e.getPart)(r,`popover-trigger`),o=(0,e.getPart)(r,`popover-content`),s=(0,e.getPart)(r,`popover-close`),c=(0,e.getPart)(r,`popover-positioner`),l=c&&o&&c.contains(o)?c:null,u=(0,e.getPart)(r,`popover-portal`),d=u&&l&&u.contains(l)?u:null;if(!a||!o)throw Error(`Popover requires trigger and content slots`);let f=i.defaultOpen??(0,e.getDataBool)(r,`defaultOpen`)??!1,p=i.onOpenChange,m=i.closeOnClickOutside??(0,e.getDataBool)(r,`closeOnClickOutside`)??!0,h=i.closeOnEscape??(0,e.getDataBool)(r,`closeOnEscape`)??!0,g=i.portal??(0,e.getDataBool)(o,`portal`)??(0,e.getDataBool)(r,`portal`)??!0,_=(t,n)=>(0,e.getDataEnum)(o,t,n)??(l?(0,e.getDataEnum)(l,t,n):void 0)??(0,e.getDataEnum)(r,t,n),v=t=>(0,e.getDataNumber)(o,t)??(l?(0,e.getDataNumber)(l,t):void 0)??(0,e.getDataNumber)(r,t),y=t=>(0,e.getDataBool)(o,t)??(l?(0,e.getDataBool)(l,t):void 0)??(0,e.getDataBool)(r,t),b=i.position??_(`position`,t),x=i.side??_(`side`,t)??b??`bottom`,S=i.align??_(`align`,n)??`center`,C=i.sideOffset??v(`sideOffset`)??4,w=i.alignOffset??v(`alignOffset`)??0,T=i.avoidCollisions??y(`avoidCollisions`)??!0,E=i.collisionPadding??v(`collisionPadding`)??8,D=f,O=[],k=(0,e.createPortalLifecycle)({content:o,root:r,enabled:g,wrapperSlot:l?void 0:`popover-positioner`,container:l??void 0,mountTarget:l?d??l:void 0}),A=!1,j=null,M=!1,N=()=>{M&&=(o.removeAttribute(`tabindex`),!1)},P=()=>{let e=o.querySelector(`[autofocus]`);if(e)return e.focus();let t=o.querySelector(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`);if(t)return t.focus();o.getAttribute(`tabindex`)||(o.setAttribute(`tabindex`,`-1`),M=!0),o.focus()},F=(0,e.ensureId)(o,`popover-content`);a.setAttribute(`aria-haspopup`,`dialog`),a.setAttribute(`aria-controls`,F),o.setAttribute(`data-side`,x),o.setAttribute(`data-align`,S),o.setAttribute(`data-position`,x);let I=()=>{let t=k.container,n=r.ownerDocument.defaultView??window,i=(0,e.computeFloatingPosition)({anchorRect:a.getBoundingClientRect(),contentRect:(0,e.measurePopupContentRect)(o),side:x,align:S,sideOffset:C,alignOffset:w,avoidCollisions:T,collisionPadding:E});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.willChange=`transform`,t.style.margin=`0`,o.setAttribute(`data-side`,i.side),o.setAttribute(`data-align`,i.align),t!==o&&(t.setAttribute(`data-side`,i.side),t.setAttribute(`data-align`,i.align)),o.setAttribute(`data-position`,i.side)},L=e=>{let t=k.container;r.setAttribute(`data-state`,e),o.setAttribute(`data-state`,e),t!==o&&t.setAttribute(`data-state`,e),e===`open`?(r.setAttribute(`data-open`,``),o.setAttribute(`data-open`,``),t!==o&&t.setAttribute(`data-open`,``),r.removeAttribute(`data-closed`),o.removeAttribute(`data-closed`),t!==o&&t.removeAttribute(`data-closed`)):(r.setAttribute(`data-closed`,``),o.setAttribute(`data-closed`,``),t!==o&&t.setAttribute(`data-closed`,``),r.removeAttribute(`data-open`),o.removeAttribute(`data-open`),t!==o&&t.removeAttribute(`data-open`))},R=()=>{requestAnimationFrame(()=>{j&&j.isConnected?(0,e.focusElement)(j):(0,e.focusElement)(a),j=null})},z=(0,e.createPresenceLifecycle)({element:o,onExitComplete:()=>{A||(k.restore(),o.hidden=!0,N(),R())}}),B=(0,e.createPositionSync)({observedElements:[a,o],isActive:()=>D,ancestorScroll:!1,onUpdate:I}),V=t=>{D!==t&&(t&&(j=document.activeElement),D=t,(0,e.setAria)(a,`expanded`,D),t?(k.mount(),o.hidden=!1,L(`open`),z.enter(),I(),B.start(),B.update(),requestAnimationFrame(P)):(L(`closed`),z.exit(),B.stop()),(0,e.emit)(r,`popover:change`,{open:D}),p?.(D))};return(0,e.setAria)(a,`expanded`,D),L(D?`open`:`closed`),o.hidden=!D,f&&(k.mount(),z.enter(),o.hidden=!1,I(),B.start(),B.update(),requestAnimationFrame(P)),O.push((0,e.on)(a,`click`,()=>V(!D))),s&&O.push((0,e.on)(s,`click`,()=>V(!1))),O.push((0,e.createDismissLayer)({root:r,isOpen:()=>D,onDismiss:()=>V(!1),closeOnClickOutside:m,closeOnEscape:h})),O.push((0,e.on)(r,`popover:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&V(n)})),{open:()=>V(!0),close:()=>V(!1),toggle:()=>V(!D),get isOpen(){return D},destroy:()=>{A=!0,B.stop(),z.cleanup(),k.cleanup(),O.forEach(e=>e()),O.length=0,N()}}}const i=new WeakSet;function a(t=document){let n=[];for(let a of(0,e.getRoots)(t,`popover`))i.has(a)||(i.add(a),n.push(r(a)));return n}exports.create=a,exports.createPopover=r;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{computeFloatingPosition as e,createDismissLayer as t,createPortalLifecycle as n,createPositionSync as r,createPresenceLifecycle as i,emit as a,ensureId as o,focusElement as s,getDataBool as c,getDataEnum as l,getDataNumber as u,getPart as d,getRoots as f,
|
|
1
|
+
import{computeFloatingPosition as e,createDismissLayer as t,createPortalLifecycle as n,createPositionSync as r,createPresenceLifecycle as i,emit as a,ensureId as o,focusElement as s,getDataBool as c,getDataEnum as l,getDataNumber as u,getPart as d,getRoots as f,measurePopupContentRect as p,on as m,setAria as h}from"@data-slot/core";const g=[`top`,`right`,`bottom`,`left`],_=[`start`,`center`,`end`];function v(f,v={}){let y=d(f,`popover-trigger`),b=d(f,`popover-content`),x=d(f,`popover-close`),S=d(f,`popover-positioner`),C=S&&b&&S.contains(b)?S:null,w=d(f,`popover-portal`),T=w&&C&&w.contains(C)?w:null;if(!y||!b)throw Error(`Popover requires trigger and content slots`);let E=v.defaultOpen??c(f,`defaultOpen`)??!1,D=v.onOpenChange,O=v.closeOnClickOutside??c(f,`closeOnClickOutside`)??!0,k=v.closeOnEscape??c(f,`closeOnEscape`)??!0,A=v.portal??c(b,`portal`)??c(f,`portal`)??!0,j=(e,t)=>l(b,e,t)??(C?l(C,e,t):void 0)??l(f,e,t),M=e=>u(b,e)??(C?u(C,e):void 0)??u(f,e),N=e=>c(b,e)??(C?c(C,e):void 0)??c(f,e),P=v.position??j(`position`,g),F=v.side??j(`side`,g)??P??`bottom`,I=v.align??j(`align`,_)??`center`,ee=v.sideOffset??M(`sideOffset`)??4,te=v.alignOffset??M(`alignOffset`)??0,L=v.avoidCollisions??N(`avoidCollisions`)??!0,R=v.collisionPadding??M(`collisionPadding`)??8,z=E,B=[],V=n({content:b,root:f,enabled:A,wrapperSlot:C?void 0:`popover-positioner`,container:C??void 0,mountTarget:C?T??C:void 0}),H=!1,U=null,W=!1,G=()=>{W&&=(b.removeAttribute(`tabindex`),!1)},K=()=>{let e=b.querySelector(`[autofocus]`);if(e)return e.focus();let t=b.querySelector(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`);if(t)return t.focus();b.getAttribute(`tabindex`)||(b.setAttribute(`tabindex`,`-1`),W=!0),b.focus()},q=o(b,`popover-content`);y.setAttribute(`aria-haspopup`,`dialog`),y.setAttribute(`aria-controls`,q),b.setAttribute(`data-side`,F),b.setAttribute(`data-align`,I),b.setAttribute(`data-position`,F);let J=()=>{let t=V.container,n=f.ownerDocument.defaultView??window,r=e({anchorRect:y.getBoundingClientRect(),contentRect:p(b),side:F,align:I,sideOffset:ee,alignOffset:te,avoidCollisions:L,collisionPadding:R});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`,b.setAttribute(`data-side`,r.side),b.setAttribute(`data-align`,r.align),t!==b&&(t.setAttribute(`data-side`,r.side),t.setAttribute(`data-align`,r.align)),b.setAttribute(`data-position`,r.side)},Y=e=>{let t=V.container;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`,``),f.removeAttribute(`data-closed`),b.removeAttribute(`data-closed`),t!==b&&t.removeAttribute(`data-closed`)):(f.setAttribute(`data-closed`,``),b.setAttribute(`data-closed`,``),t!==b&&t.setAttribute(`data-closed`,``),f.removeAttribute(`data-open`),b.removeAttribute(`data-open`),t!==b&&t.removeAttribute(`data-open`))},X=()=>{requestAnimationFrame(()=>{U&&U.isConnected?s(U):s(y),U=null})},Z=i({element:b,onExitComplete:()=>{H||(V.restore(),b.hidden=!0,G(),X())}}),Q=r({observedElements:[y,b],isActive:()=>z,ancestorScroll:!1,onUpdate:J}),$=e=>{z!==e&&(e&&(U=document.activeElement),z=e,h(y,`expanded`,z),e?(V.mount(),b.hidden=!1,Y(`open`),Z.enter(),J(),Q.start(),Q.update(),requestAnimationFrame(K)):(Y(`closed`),Z.exit(),Q.stop()),a(f,`popover:change`,{open:z}),D?.(z))};return h(y,`expanded`,z),Y(z?`open`:`closed`),b.hidden=!z,E&&(V.mount(),Z.enter(),b.hidden=!1,J(),Q.start(),Q.update(),requestAnimationFrame(K)),B.push(m(y,`click`,()=>$(!z))),x&&B.push(m(x,`click`,()=>$(!1))),B.push(t({root:f,isOpen:()=>z,onDismiss:()=>$(!1),closeOnClickOutside:O,closeOnEscape:k})),B.push(m(f,`popover:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&$(n)})),{open:()=>$(!0),close:()=>$(!1),toggle:()=>$(!z),get isOpen(){return z},destroy:()=>{H=!0,Q.stop(),Z.cleanup(),V.cleanup(),B.forEach(e=>e()),B.length=0,G()}}}const y=new WeakSet;function b(e=document){let t=[];for(let n of f(e,`popover`))y.has(n)||(y.add(n),t.push(v(n)));return t}export{b as create,v as createPopover};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@data-slot/popover",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.92",
|
|
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.92"
|
|
42
42
|
}
|
|
43
43
|
}
|