@data-slot/dialog 0.2.43 → 0.2.45
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
CHANGED
|
@@ -156,6 +156,14 @@ Use `data-state` attributes for CSS styling:
|
|
|
156
156
|
}
|
|
157
157
|
```
|
|
158
158
|
|
|
159
|
+
Stacking is intentionally not hardcoded in JavaScript. Configure `z-index` in your CSS.
|
|
160
|
+
When multiple dialogs are open, `data-stack-index` and CSS variables are exposed on
|
|
161
|
+
`dialog-overlay` and `dialog-content`:
|
|
162
|
+
- `data-stack-index`
|
|
163
|
+
- `--dialog-stack-index`
|
|
164
|
+
- `--dialog-overlay-stack-index` (overlay)
|
|
165
|
+
- `--dialog-content-stack-index` (content)
|
|
166
|
+
|
|
159
167
|
With Tailwind:
|
|
160
168
|
|
|
161
169
|
```html
|
|
@@ -235,4 +243,3 @@ Use `{ open: boolean }` instead.
|
|
|
235
243
|
## License
|
|
236
244
|
|
|
237
245
|
MIT
|
|
238
|
-
|
|
@@ -30,7 +30,7 @@ interface DialogController {
|
|
|
30
30
|
_closeOnEscape?: boolean;
|
|
31
31
|
/** Internal: content element for focus trap */
|
|
32
32
|
_content?: HTMLElement;
|
|
33
|
-
/** Internal: overlay element for
|
|
33
|
+
/** Internal: overlay element for stack metadata */
|
|
34
34
|
_overlay?: HTMLElement;
|
|
35
35
|
}
|
|
36
36
|
/**
|
|
@@ -30,7 +30,7 @@ interface DialogController {
|
|
|
30
30
|
_closeOnEscape?: boolean;
|
|
31
31
|
/** Internal: content element for focus trap */
|
|
32
32
|
_content?: HTMLElement;
|
|
33
|
-
/** Internal: overlay element for
|
|
33
|
+
/** Internal: overlay element for stack metadata */
|
|
34
34
|
_overlay?: HTMLElement;
|
|
35
35
|
}
|
|
36
36
|
/**
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,n=[];let r=null;function i(){n.forEach((e,t)=>{let n=
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,n=[];let r=null;function i(){n.forEach((e,t)=>{let n=String(t);e._overlay&&(e._overlay.setAttribute(`data-stack-index`,n),e._overlay.style.setProperty(`--dialog-stack-index`,n),e._overlay.style.setProperty(`--dialog-overlay-stack-index`,n)),e._content&&(e._content.setAttribute(`data-stack-index`,n),e._content.style.setProperty(`--dialog-stack-index`,n),e._content.style.setProperty(`--dialog-content-stack-index`,n))})}function a(){if(r)return;let t=(0,e.on)(document,`keydown`,e=>{if(n.length===0)return;let t=n[n.length-1];if(!(!t||!t.isOpen)){if(e.key===`Escape`&&t._closeOnEscape){e.preventDefault(),t.close();return}e.key===`Tab`&&t._handleKeydown&&t._handleKeydown(e)}});r=()=>{t(),r=null}}function o(){n.length===0&&r&&r()}function s(r,s={}){let c=s.defaultOpen??(0,e.getDataBool)(r,`defaultOpen`)??!1,l=s.onOpenChange,u=s.closeOnClickOutside??(0,e.getDataBool)(r,`closeOnClickOutside`)??!0,d=s.closeOnEscape??(0,e.getDataBool)(r,`closeOnEscape`)??!0,f=s.lockScroll??(0,e.getDataBool)(r,`lockScroll`)??!0,p=s.alertDialog??(0,e.getDataBool)(r,`alertDialog`)??!1,m=(0,e.getPart)(r,`dialog-trigger`),h=(0,e.getPart)(r,`dialog-portal`),g=(0,e.getPart)(r,`dialog-overlay`),_=(0,e.getPart)(r,`dialog-content`),v=(0,e.getPart)(r,`dialog-title`),y=(0,e.getPart)(r,`dialog-description`);if(!_)throw Error(`Dialog requires dialog-content slot`);if(!g)throw Error(`Dialog requires dialog-overlay slot`);let b=!1,x=null,S=[],C=h?(0,e.createPortalLifecycle)({content:h,root:r}):null,w=!1;(0,e.ensureId)(_,`dialog-content`),_.setAttribute(`role`,p?`alertdialog`:`dialog`),(0,e.setAria)(_,`modal`,!0),(0,e.linkLabelledBy)(_,v,y),g.setAttribute(`role`,`presentation`),g.setAttribute(`aria-hidden`,`true`),g.tabIndex=-1,m&&(m.setAttribute(`aria-haspopup`,`dialog`),m.setAttribute(`aria-controls`,_.id),(0,e.setAria)(m,`expanded`,!1));let T=!1,E=()=>{_.hasAttribute(`tabindex`)||(_.tabIndex=-1,T=!0)},D=()=>{T&&=(_.removeAttribute(`tabindex`),!1)},O=()=>{let e=_.querySelector(`[autofocus]`);if(e)return e.focus();let n=_.querySelector(t);if(n)return n.focus();E(),_.focus()},k=()=>{C?.mount()},A=e=>{r.setAttribute(`data-state`,e),h&&h.setAttribute(`data-state`,e),g.setAttribute(`data-state`,e),_.setAttribute(`data-state`,e)},j=()=>{g.removeAttribute(`data-stack-index`),_.removeAttribute(`data-stack-index`),g.style.removeProperty(`--dialog-stack-index`),g.style.removeProperty(`--dialog-overlay-stack-index`),_.style.removeProperty(`--dialog-stack-index`),_.style.removeProperty(`--dialog-content-stack-index`)},M=(t,s=!1)=>{if(!(b===t&&!s)){if(t)k(),x=document.activeElement,n.push(P),a(),i(),f&&!w&&((0,e.lockScroll)(),w=!0);else{let t=n.indexOf(P);t!==-1&&n.splice(t,1),o(),j(),i(),w&&=((0,e.unlockScroll)(),!1),D();let r=x;x=null,requestAnimationFrame(()=>{r&&document.contains(r)&&typeof r.focus==`function`?r.focus():m&&document.contains(m)&&m.focus()})}b=t,_.hidden=!b,g.hidden=!b,m&&(0,e.setAria)(m,`expanded`,b),A(b?`open`:`closed`),(0,e.emit)(r,`dialog:change`,{open:b}),l?.(b),t&&requestAnimationFrame(O)}},N=e=>{if(e.key!==`Tab`)return;let n=_.querySelectorAll(t);if(n.length===0){e.preventDefault(),E(),_.focus();return}let r=n[0],i=n[n.length-1],a=document.activeElement;if(!_.contains(a)){e.preventDefault(),r.focus();return}if(r===i){e.preventDefault();return}e.shiftKey?a===r&&(e.preventDefault(),i.focus()):a===i&&(e.preventDefault(),r.focus())};c?(k(),_.hidden=!1,g.hidden=!1,A(`open`),b=!0,m&&(0,e.setAria)(m,`expanded`,!0)):(_.hidden=!0,g.hidden=!0,A(`closed`)),m&&S.push((0,e.on)(m,`click`,()=>M(!b))),S.push((0,e.on)(_,`click`,e=>{let t=e.target;if(!t)return;let n=t.closest?.(`[data-slot="dialog-close"]`);n&&_.contains(n)&&M(!1)})),u&&S.push((0,e.on)(g,`pointerdown`,e=>{e.target===g&&b&&M(!1)}));let P={open:()=>M(!0),close:()=>M(!1),toggle:()=>M(!b),get isOpen(){return b},destroy:()=>{if(b)M(!1,!0);else{let e=n.indexOf(P);e!==-1&&(n.splice(e,1),i(),o())}D(),S.forEach(e=>e()),S.length=0,C?.cleanup()},_handleKeydown:N,_closeOnEscape:d,_content:_,_overlay:g};return S.push((0,e.on)(r,`dialog:set`,e=>{let t=e.detail,n;t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`&&M(n)})),c&&(x=document.activeElement,n.push(P),a(),i(),f&&!w&&((0,e.lockScroll)(),w=!0),(0,e.emit)(r,`dialog:change`,{open:!0}),l?.(!0),requestAnimationFrame(O)),P}const c=new WeakSet;function l(t=document){let n=[];for(let r of(0,e.getRoots)(t,`dialog`))c.has(r)||(c.add(r),n.push(s(r)));return n}exports.create=l,exports.createDialog=s;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createPortalLifecycle as e,emit as t,ensureId as n,getDataBool as r,getPart as i,getRoots as a,linkLabelledBy as o,lockScroll as s,on as c,setAria as l,unlockScroll as u}from"@data-slot/core";const d=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,f=[];let p=null;function m(){f.forEach((e,t)=>{let n=
|
|
1
|
+
import{createPortalLifecycle as e,emit as t,ensureId as n,getDataBool as r,getPart as i,getRoots as a,linkLabelledBy as o,lockScroll as s,on as c,setAria as l,unlockScroll as u}from"@data-slot/core";const d=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,f=[];let p=null;function m(){f.forEach((e,t)=>{let n=String(t);e._overlay&&(e._overlay.setAttribute(`data-stack-index`,n),e._overlay.style.setProperty(`--dialog-stack-index`,n),e._overlay.style.setProperty(`--dialog-overlay-stack-index`,n)),e._content&&(e._content.setAttribute(`data-stack-index`,n),e._content.style.setProperty(`--dialog-stack-index`,n),e._content.style.setProperty(`--dialog-content-stack-index`,n))})}function h(){if(p)return;let e=c(document,`keydown`,e=>{if(f.length===0)return;let t=f[f.length-1];if(!(!t||!t.isOpen)){if(e.key===`Escape`&&t._closeOnEscape){e.preventDefault(),t.close();return}e.key===`Tab`&&t._handleKeydown&&t._handleKeydown(e)}});p=()=>{e(),p=null}}function g(){f.length===0&&p&&p()}function _(a,p={}){let _=p.defaultOpen??r(a,`defaultOpen`)??!1,v=p.onOpenChange,y=p.closeOnClickOutside??r(a,`closeOnClickOutside`)??!0,b=p.closeOnEscape??r(a,`closeOnEscape`)??!0,x=p.lockScroll??r(a,`lockScroll`)??!0,S=p.alertDialog??r(a,`alertDialog`)??!1,C=i(a,`dialog-trigger`),w=i(a,`dialog-portal`),T=i(a,`dialog-overlay`),E=i(a,`dialog-content`),D=i(a,`dialog-title`),O=i(a,`dialog-description`);if(!E)throw Error(`Dialog requires dialog-content slot`);if(!T)throw Error(`Dialog requires dialog-overlay slot`);let k=!1,A=null,j=[],M=w?e({content:w,root:a}):null,N=!1;n(E,`dialog-content`),E.setAttribute(`role`,S?`alertdialog`:`dialog`),l(E,`modal`,!0),o(E,D,O),T.setAttribute(`role`,`presentation`),T.setAttribute(`aria-hidden`,`true`),T.tabIndex=-1,C&&(C.setAttribute(`aria-haspopup`,`dialog`),C.setAttribute(`aria-controls`,E.id),l(C,`expanded`,!1));let P=!1,F=()=>{E.hasAttribute(`tabindex`)||(E.tabIndex=-1,P=!0)},I=()=>{P&&=(E.removeAttribute(`tabindex`),!1)},L=()=>{let e=E.querySelector(`[autofocus]`);if(e)return e.focus();let t=E.querySelector(d);if(t)return t.focus();F(),E.focus()},R=()=>{M?.mount()},z=e=>{a.setAttribute(`data-state`,e),w&&w.setAttribute(`data-state`,e),T.setAttribute(`data-state`,e),E.setAttribute(`data-state`,e)},B=()=>{T.removeAttribute(`data-stack-index`),E.removeAttribute(`data-stack-index`),T.style.removeProperty(`--dialog-stack-index`),T.style.removeProperty(`--dialog-overlay-stack-index`),E.style.removeProperty(`--dialog-stack-index`),E.style.removeProperty(`--dialog-content-stack-index`)},V=(e,n=!1)=>{if(!(k===e&&!n)){if(e)R(),A=document.activeElement,f.push(U),h(),m(),x&&!N&&(s(),N=!0);else{let e=f.indexOf(U);e!==-1&&f.splice(e,1),g(),B(),m(),N&&=(u(),!1),I();let t=A;A=null,requestAnimationFrame(()=>{t&&document.contains(t)&&typeof t.focus==`function`?t.focus():C&&document.contains(C)&&C.focus()})}k=e,E.hidden=!k,T.hidden=!k,C&&l(C,`expanded`,k),z(k?`open`:`closed`),t(a,`dialog:change`,{open:k}),v?.(k),e&&requestAnimationFrame(L)}},H=e=>{if(e.key!==`Tab`)return;let t=E.querySelectorAll(d);if(t.length===0){e.preventDefault(),F(),E.focus();return}let n=t[0],r=t[t.length-1],i=document.activeElement;if(!E.contains(i)){e.preventDefault(),n.focus();return}if(n===r){e.preventDefault();return}e.shiftKey?i===n&&(e.preventDefault(),r.focus()):i===r&&(e.preventDefault(),n.focus())};_?(R(),E.hidden=!1,T.hidden=!1,z(`open`),k=!0,C&&l(C,`expanded`,!0)):(E.hidden=!0,T.hidden=!0,z(`closed`)),C&&j.push(c(C,`click`,()=>V(!k))),j.push(c(E,`click`,e=>{let t=e.target;if(!t)return;let n=t.closest?.(`[data-slot="dialog-close"]`);n&&E.contains(n)&&V(!1)})),y&&j.push(c(T,`pointerdown`,e=>{e.target===T&&k&&V(!1)}));let U={open:()=>V(!0),close:()=>V(!1),toggle:()=>V(!k),get isOpen(){return k},destroy:()=>{if(k)V(!1,!0);else{let e=f.indexOf(U);e!==-1&&(f.splice(e,1),m(),g())}I(),j.forEach(e=>e()),j.length=0,M?.cleanup()},_handleKeydown:H,_closeOnEscape:b,_content:E,_overlay:T};return j.push(c(a,`dialog: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)})),_&&(A=document.activeElement,f.push(U),h(),m(),x&&!N&&(s(),N=!0),t(a,`dialog:change`,{open:!0}),v?.(!0),requestAnimationFrame(L)),U}const v=new WeakSet;function y(e=document){let t=[];for(let n of a(e,`dialog`))v.has(n)||(v.add(n),t.push(_(n)));return t}export{y as create,_ as createDialog};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@data-slot/dialog",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.45",
|
|
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.45"
|
|
43
43
|
}
|
|
44
44
|
}
|