@data-slot/popover 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 +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -169,6 +169,7 @@ Placement can be set on root, content, or authored positioner (content takes pre
|
|
|
169
169
|
Popover position is computed in JavaScript and applied as `position: absolute` + inline `transform: translate3d(...)`.
|
|
170
170
|
By default, content is portaled to `document.body` while open (document coordinates). If you provide authored `popover-positioner` / `popover-portal` slots, those are reused. Otherwise a transient `popover-positioner` wrapper is generated.
|
|
171
171
|
If `portal` is disabled, positioning is applied directly to `popover-content`.
|
|
172
|
+
The positioned element (`popover-positioner`, or `popover-content` when `portal` is disabled) also receives `--transform-origin` so popup animations can originate from the trigger anchor.
|
|
172
173
|
Use `data-open`/`data-closed` and `data-side` for styling/animation.
|
|
173
174
|
This keeps `popover-content` free for transform animations.
|
|
174
175
|
Placement uses layout dimensions, so `scale`/`zoom` animations on `popover-content` do not require an extra inner wrapper for stable positioning.
|
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,_=(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:
|
|
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=a.getBoundingClientRect(),s=(0,e.computeFloatingPosition)({anchorRect:i,contentRect:(0,e.measurePopupContentRect)(o),side:x,align:S,sideOffset:C,alignOffset:w,avoidCollisions:T,collisionPadding:E}),c=(0,e.computeFloatingTransformOrigin)({side:s.side,align:s.align,anchorRect:i,popupX:s.x,popupY:s.y});t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${s.x+n.scrollX}px, ${s.y+n.scrollY}px, 0)`,t.style.setProperty(`--transform-origin`,c),t.style.willChange=`transform`,t.style.margin=`0`,o.setAttribute(`data-side`,s.side),o.setAttribute(`data-align`,s.align),t!==o&&(t.setAttribute(`data-side`,s.side),t.setAttribute(`data-align`,s.align)),o.setAttribute(`data-position`,s.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,
|
|
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,focusElement as c,getDataBool as l,getDataEnum as u,getDataNumber as d,getPart as f,getRoots as p,measurePopupContentRect as m,on as h,setAria as g}from"@data-slot/core";const _=[`top`,`right`,`bottom`,`left`],v=[`start`,`center`,`end`];function y(p,y={}){let b=f(p,`popover-trigger`),x=f(p,`popover-content`),S=f(p,`popover-close`),C=f(p,`popover-positioner`),w=C&&x&&C.contains(x)?C:null,T=f(p,`popover-portal`),E=T&&w&&T.contains(w)?T:null;if(!b||!x)throw Error(`Popover requires trigger and content slots`);let D=y.defaultOpen??l(p,`defaultOpen`)??!1,ee=y.onOpenChange,te=y.closeOnClickOutside??l(p,`closeOnClickOutside`)??!0,ne=y.closeOnEscape??l(p,`closeOnEscape`)??!0,O=y.portal??l(x,`portal`)??l(p,`portal`)??!0,k=(e,t)=>u(x,e,t)??(w?u(w,e,t):void 0)??u(p,e,t),A=e=>d(x,e)??(w?d(w,e):void 0)??d(p,e),j=e=>l(x,e)??(w?l(w,e):void 0)??l(p,e),M=y.position??k(`position`,_),N=y.side??k(`side`,_)??M??`bottom`,P=y.align??k(`align`,v)??`center`,F=y.sideOffset??A(`sideOffset`)??4,I=y.alignOffset??A(`alignOffset`)??0,L=y.avoidCollisions??j(`avoidCollisions`)??!0,R=y.collisionPadding??A(`collisionPadding`)??8,z=D,B=[],V=r({content:x,root:p,enabled:O,wrapperSlot:w?void 0:`popover-positioner`,container:w??void 0,mountTarget:w?E??w:void 0}),H=!1,U=null,W=!1,G=()=>{W&&=(x.removeAttribute(`tabindex`),!1)},K=()=>{let e=x.querySelector(`[autofocus]`);if(e)return e.focus();let t=x.querySelector(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`);if(t)return t.focus();x.getAttribute(`tabindex`)||(x.setAttribute(`tabindex`,`-1`),W=!0),x.focus()},q=s(x,`popover-content`);b.setAttribute(`aria-haspopup`,`dialog`),b.setAttribute(`aria-controls`,q),x.setAttribute(`data-side`,N),x.setAttribute(`data-align`,P),x.setAttribute(`data-position`,N);let J=()=>{let n=V.container,r=p.ownerDocument.defaultView??window,i=b.getBoundingClientRect(),a=e({anchorRect:i,contentRect:m(x),side:N,align:P,sideOffset:F,alignOffset:I,avoidCollisions:L,collisionPadding:R}),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`,x.setAttribute(`data-side`,a.side),x.setAttribute(`data-align`,a.align),n!==x&&(n.setAttribute(`data-side`,a.side),n.setAttribute(`data-align`,a.align)),x.setAttribute(`data-position`,a.side)},Y=e=>{let t=V.container;p.setAttribute(`data-state`,e),x.setAttribute(`data-state`,e),t!==x&&t.setAttribute(`data-state`,e),e===`open`?(p.setAttribute(`data-open`,``),x.setAttribute(`data-open`,``),t!==x&&t.setAttribute(`data-open`,``),p.removeAttribute(`data-closed`),x.removeAttribute(`data-closed`),t!==x&&t.removeAttribute(`data-closed`)):(p.setAttribute(`data-closed`,``),x.setAttribute(`data-closed`,``),t!==x&&t.setAttribute(`data-closed`,``),p.removeAttribute(`data-open`),x.removeAttribute(`data-open`),t!==x&&t.removeAttribute(`data-open`))},X=()=>{requestAnimationFrame(()=>{U&&U.isConnected?c(U):c(b),U=null})},Z=a({element:x,onExitComplete:()=>{H||(V.restore(),x.hidden=!0,G(),X())}}),Q=i({observedElements:[b,x],isActive:()=>z,ancestorScroll:!1,onUpdate:J}),$=e=>{z!==e&&(e&&(U=document.activeElement),z=e,g(b,`expanded`,z),e?(V.mount(),x.hidden=!1,Y(`open`),Z.enter(),J(),Q.start(),Q.update(),requestAnimationFrame(K)):(Y(`closed`),Z.exit(),Q.stop()),o(p,`popover:change`,{open:z}),ee?.(z))};return g(b,`expanded`,z),Y(z?`open`:`closed`),x.hidden=!z,D&&(V.mount(),Z.enter(),x.hidden=!1,J(),Q.start(),Q.update(),requestAnimationFrame(K)),B.push(h(b,`click`,()=>$(!z))),S&&B.push(h(S,`click`,()=>$(!1))),B.push(n({root:p,isOpen:()=>z,onDismiss:()=>$(!1),closeOnClickOutside:te,closeOnEscape:ne})),B.push(h(p,`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 b=new WeakSet;function x(e=document){let t=[];for(let n of p(e,`popover`))b.has(n)||(b.add(n),t.push(y(n)));return t}export{x as create,y 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.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
|
}
|