@data-slot/dialog 0.2.166 → 1.0.0
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 +99 -84
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -13,6 +13,7 @@ npm install @data-slot/dialog
|
|
|
13
13
|
```html
|
|
14
14
|
<div data-slot="dialog">
|
|
15
15
|
<button data-slot="dialog-trigger">Open Dialog</button>
|
|
16
|
+
<div data-slot="dialog-overlay" hidden></div>
|
|
16
17
|
<div data-slot="dialog-content" hidden>
|
|
17
18
|
<h2 data-slot="dialog-title">Dialog Title</h2>
|
|
18
19
|
<p data-slot="dialog-description">Dialog description text.</p>
|
|
@@ -29,7 +30,9 @@ npm install @data-slot/dialog
|
|
|
29
30
|
|
|
30
31
|
## API
|
|
31
32
|
|
|
32
|
-
###
|
|
33
|
+
### Initialization
|
|
34
|
+
|
|
35
|
+
#### `create(scope?)`
|
|
33
36
|
|
|
34
37
|
Auto-discover and bind all dialog instances in a scope (defaults to `document`).
|
|
35
38
|
|
|
@@ -39,7 +42,7 @@ import { create } from "@data-slot/dialog";
|
|
|
39
42
|
const controllers = create(); // Returns DialogController[]
|
|
40
43
|
```
|
|
41
44
|
|
|
42
|
-
|
|
45
|
+
#### `createDialog(root, options?)`
|
|
43
46
|
|
|
44
47
|
Create a controller for a specific element.
|
|
45
48
|
|
|
@@ -55,16 +58,32 @@ const dialog = createDialog(element, {
|
|
|
55
58
|
});
|
|
56
59
|
```
|
|
57
60
|
|
|
58
|
-
###
|
|
61
|
+
### Slots
|
|
59
62
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
#### Runtime Slots
|
|
64
|
+
|
|
65
|
+
- `dialog` - Root element that manages the open state and receives dialog events.
|
|
66
|
+
- `dialog-trigger` - Optional button that toggles the dialog.
|
|
67
|
+
- `dialog-portal` - Optional wrapper moved to `document.body` while the dialog is open.
|
|
68
|
+
- `dialog-overlay` - Required backdrop; clicking it dismisses the dialog when outside-click dismissal is enabled.
|
|
69
|
+
- `dialog-content` - Required modal panel with dialog semantics and focus management.
|
|
70
|
+
- `dialog-title` - Optional title used for the panel's `aria-labelledby`.
|
|
71
|
+
- `dialog-description` - Optional description used for the panel's `aria-describedby`.
|
|
72
|
+
- `dialog-close` - Optional button that closes the dialog; multiple close buttons are supported.
|
|
73
|
+
|
|
74
|
+
#### Markup
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<div data-slot="dialog">
|
|
78
|
+
<button data-slot="dialog-trigger">Open</button>
|
|
79
|
+
<div data-slot="dialog-overlay" hidden></div>
|
|
80
|
+
<div data-slot="dialog-content" role="dialog">
|
|
81
|
+
<h2 data-slot="dialog-title">Title</h2>
|
|
82
|
+
<p data-slot="dialog-description">Description</p>
|
|
83
|
+
<button data-slot="dialog-close">Close</button>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
```
|
|
68
87
|
|
|
69
88
|
### Data Attributes
|
|
70
89
|
|
|
@@ -92,6 +111,17 @@ Boolean attributes: present or `"true"` = true, `"false"` = false, absent = defa
|
|
|
92
111
|
</div>
|
|
93
112
|
```
|
|
94
113
|
|
|
114
|
+
### Options
|
|
115
|
+
|
|
116
|
+
| Option | Type | Default | Description |
|
|
117
|
+
|--------|------|---------|-------------|
|
|
118
|
+
| `defaultOpen` | `boolean` | `false` | Initial open state |
|
|
119
|
+
| `closeOnClickOutside` | `boolean` | `true` | Close when clicking outside content |
|
|
120
|
+
| `closeOnEscape` | `boolean` | `true` | Close when pressing Escape |
|
|
121
|
+
| `lockScroll` | `boolean` | `true` | Lock body scroll when open |
|
|
122
|
+
| `alertDialog` | `boolean` | `false` | Use alertdialog role for confirmations |
|
|
123
|
+
| `onOpenChange` | `(open: boolean) => void` | `undefined` | Callback when open state changes |
|
|
124
|
+
|
|
95
125
|
### Controller
|
|
96
126
|
|
|
97
127
|
| Method/Property | Description |
|
|
@@ -102,31 +132,61 @@ Boolean attributes: present or `"true"` = true, `"false"` = false, absent = defa
|
|
|
102
132
|
| `isOpen` | Current open state (readonly `boolean`) |
|
|
103
133
|
| `destroy()` | Cleanup all event listeners |
|
|
104
134
|
|
|
105
|
-
|
|
135
|
+
#### Controller Destruction
|
|
106
136
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
137
|
+
`destroy()` permanently disposes the controller and hides any open surface without
|
|
138
|
+
emitting an additional change event. Repeated destruction is safe; methods on the
|
|
139
|
+
old controller become no-ops. Create a new controller on the same root to rebind it.
|
|
140
|
+
|
|
141
|
+
Destruction restores prior focus, falling back to a surviving trigger if the prior
|
|
142
|
+
target was removed. Destroying an unopened modal does not move focus.
|
|
143
|
+
|
|
144
|
+
### Events
|
|
145
|
+
|
|
146
|
+
#### Outbound Events
|
|
147
|
+
|
|
148
|
+
Listen for changes via custom events:
|
|
149
|
+
|
|
150
|
+
```javascript
|
|
151
|
+
element.addEventListener("dialog:change", (e) => {
|
|
152
|
+
console.log("Dialog open:", e.detail.open);
|
|
153
|
+
});
|
|
116
154
|
```
|
|
117
155
|
|
|
118
|
-
|
|
156
|
+
#### Inbound Events
|
|
119
157
|
|
|
120
|
-
|
|
158
|
+
Control the dialog via events:
|
|
121
159
|
|
|
122
|
-
|
|
160
|
+
| Event | Detail | Description |
|
|
161
|
+
|-------|--------|-------------|
|
|
162
|
+
| `dialog:set` | `{ open: boolean }` | Set open state programmatically |
|
|
123
163
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
164
|
+
```javascript
|
|
165
|
+
// Open the dialog
|
|
166
|
+
element.dispatchEvent(
|
|
167
|
+
new CustomEvent("dialog:set", { detail: { open: true } })
|
|
168
|
+
);
|
|
169
|
+
|
|
170
|
+
// Close the dialog
|
|
171
|
+
element.dispatchEvent(
|
|
172
|
+
new CustomEvent("dialog:set", { detail: { open: false } })
|
|
173
|
+
);
|
|
174
|
+
```
|
|
128
175
|
|
|
129
|
-
|
|
176
|
+
##### Deprecated Shapes
|
|
177
|
+
|
|
178
|
+
The following shape is deprecated and will be removed in v1.0:
|
|
179
|
+
|
|
180
|
+
```javascript
|
|
181
|
+
// Deprecated: { value: boolean }
|
|
182
|
+
element.dispatchEvent(
|
|
183
|
+
new CustomEvent("dialog:set", { detail: { value: true } })
|
|
184
|
+
);
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
Use `{ open: boolean }` instead.
|
|
188
|
+
|
|
189
|
+
### Styling
|
|
130
190
|
|
|
131
191
|
Dialog exposes both `data-state="open|closed"` and popup-style animation hooks:
|
|
132
192
|
|
|
@@ -192,13 +252,21 @@ With Tailwind:
|
|
|
192
252
|
></div>
|
|
193
253
|
<div
|
|
194
254
|
data-slot="dialog-content"
|
|
195
|
-
class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
|
|
255
|
+
class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 opacity-0 scale-95 transition-all duration-200 data-[open]:opacity-100 data-[open]:scale-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
|
|
196
256
|
>
|
|
197
257
|
<!-- Dialog content -->
|
|
198
258
|
</div>
|
|
199
259
|
```
|
|
200
260
|
|
|
201
|
-
|
|
261
|
+
### Keyboard Navigation
|
|
262
|
+
|
|
263
|
+
| Key | Action |
|
|
264
|
+
|-----|--------|
|
|
265
|
+
| `Escape` | Close dialog |
|
|
266
|
+
| `Tab` | Cycle focus within dialog |
|
|
267
|
+
| `Shift+Tab` | Cycle focus backwards |
|
|
268
|
+
|
|
269
|
+
### Accessibility
|
|
202
270
|
|
|
203
271
|
The component automatically handles:
|
|
204
272
|
|
|
@@ -211,59 +279,6 @@ The component automatically handles:
|
|
|
211
279
|
- Focus trap within dialog
|
|
212
280
|
- Focus restoration on close
|
|
213
281
|
|
|
214
|
-
## Keyboard Navigation
|
|
215
|
-
|
|
216
|
-
| Key | Action |
|
|
217
|
-
|-----|--------|
|
|
218
|
-
| `Escape` | Close dialog |
|
|
219
|
-
| `Tab` | Cycle focus within dialog |
|
|
220
|
-
| `Shift+Tab` | Cycle focus backwards |
|
|
221
|
-
|
|
222
|
-
## Events
|
|
223
|
-
|
|
224
|
-
### Outbound Events
|
|
225
|
-
|
|
226
|
-
Listen for changes via custom events:
|
|
227
|
-
|
|
228
|
-
```javascript
|
|
229
|
-
element.addEventListener("dialog:change", (e) => {
|
|
230
|
-
console.log("Dialog open:", e.detail.open);
|
|
231
|
-
});
|
|
232
|
-
```
|
|
233
|
-
|
|
234
|
-
### Inbound Events
|
|
235
|
-
|
|
236
|
-
Control the dialog via events:
|
|
237
|
-
|
|
238
|
-
| Event | Detail | Description |
|
|
239
|
-
|-------|--------|-------------|
|
|
240
|
-
| `dialog:set` | `{ open: boolean }` | Set open state programmatically |
|
|
241
|
-
|
|
242
|
-
```javascript
|
|
243
|
-
// Open the dialog
|
|
244
|
-
element.dispatchEvent(
|
|
245
|
-
new CustomEvent("dialog:set", { detail: { open: true } })
|
|
246
|
-
);
|
|
247
|
-
|
|
248
|
-
// Close the dialog
|
|
249
|
-
element.dispatchEvent(
|
|
250
|
-
new CustomEvent("dialog:set", { detail: { open: false } })
|
|
251
|
-
);
|
|
252
|
-
```
|
|
253
|
-
|
|
254
|
-
#### Deprecated Shapes
|
|
255
|
-
|
|
256
|
-
The following shape is deprecated and will be removed in v1.0:
|
|
257
|
-
|
|
258
|
-
```javascript
|
|
259
|
-
// Deprecated: { value: boolean }
|
|
260
|
-
element.dispatchEvent(
|
|
261
|
-
new CustomEvent("dialog:set", { detail: { value: true } })
|
|
262
|
-
);
|
|
263
|
-
```
|
|
264
|
-
|
|
265
|
-
Use `{ open: boolean }` instead.
|
|
266
|
-
|
|
267
282
|
## License
|
|
268
283
|
|
|
269
284
|
MIT
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=`@data-slot/dialog
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=`@data-slot/dialog`;function n(n,r={}){let i=(0,e.reuseRootBinding)(n,t,`[@data-slot/dialog] createDialog() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(i)return i;let a=r.defaultOpen??(0,e.getDataBool)(n,`defaultOpen`)??!1,o=r.onOpenChange,s=r.closeOnClickOutside??(0,e.getDataBool)(n,`closeOnClickOutside`)??!0,c=r.closeOnEscape??(0,e.getDataBool)(n,`closeOnEscape`)??!0,l=r.lockScroll??(0,e.getDataBool)(n,`lockScroll`)??!0,u=r.alertDialog??(0,e.getDataBool)(n,`alertDialog`)??!1,d=(0,e.getPart)(n,`dialog-trigger`),f=(0,e.getPart)(n,`dialog-portal`),p=(0,e.getPart)(n,`dialog-overlay`),m=(0,e.getPart)(n,`dialog-content`),h=(0,e.getPart)(n,`dialog-title`),g=(0,e.getPart)(n,`dialog-description`);if(!m)throw Error(`Dialog requires dialog-content slot`);if(!p)throw Error(`Dialog requires dialog-overlay slot`);let _=!1,v=(0,e.createTerminalLifecycle)(),y=null,b=[],x=f?(0,e.createPortalLifecycle)({content:f,root:n}):null,S=!1,C=()=>{v.trackFinalRaf(()=>{y&&(document.contains(y)?(0,e.focusElement)(y):d&&document.contains(d)&&(0,e.focusElement)(d)),y=null})};(0,e.ensureId)(m,`dialog-content`),m.setAttribute(`role`,u?`alertdialog`:`dialog`),(0,e.setAria)(m,`modal`,!0),(0,e.linkLabelledBy)(m,h,g),p.setAttribute(`role`,`presentation`),p.setAttribute(`aria-hidden`,`true`),p.tabIndex=-1,d&&(d.setAttribute(`aria-haspopup`,`dialog`),d.setAttribute(`aria-controls`,m.id),(0,e.setAria)(d,`expanded`,!1));let w=!1,T=()=>{m.hasAttribute(`tabindex`)||(m.tabIndex=-1,w=!0)},E=()=>{w&&=(m.removeAttribute(`tabindex`),!1)},D=()=>{let t=(0,e.getAutofocusOrFirstFocusable)(m);if(t)return t.focus();T(),m.focus()},O=()=>{x?.mount()},k=()=>{v.trackRaf(()=>{y&&document.contains(y)&&typeof y.focus==`function`?(0,e.focusElement)(y):d&&document.contains(d)&&(0,e.focusElement)(d),y=null})},A=e=>{if(n.setAttribute(`data-state`,e),f&&f.setAttribute(`data-state`,e),p.setAttribute(`data-state`,e),m.setAttribute(`data-state`,e),e===`open`){n.setAttribute(`data-open`,``),f?.setAttribute(`data-open`,``),p.setAttribute(`data-open`,``),m.setAttribute(`data-open`,``),n.removeAttribute(`data-closed`),f?.removeAttribute(`data-closed`),p.removeAttribute(`data-closed`),m.removeAttribute(`data-closed`);return}n.setAttribute(`data-closed`,``),f?.setAttribute(`data-closed`,``),p.setAttribute(`data-closed`,``),m.setAttribute(`data-closed`,``),n.removeAttribute(`data-open`),f?.removeAttribute(`data-open`),p.removeAttribute(`data-open`),m.removeAttribute(`data-open`)},j=0,M=0,N=0,P=0,F=(e,t)=>{v.isDestroyed||_||t!==j||(e.hidden=!0,M=Math.max(0,M-1),M===0&&(E(),k()))},I=(0,e.createPresenceLifecycle)({element:p,onExitComplete:()=>F(p,N)}),L=(0,e.createPresenceLifecycle)({element:m,onExitComplete:()=>F(m,P)}),R=(t,r=!1)=>{v.isDestroyed||_===t&&!r||(t?(j+=1,M=0,O(),y=document.activeElement,B.open(),l&&!S&&((0,e.lockScroll)(),S=!0)):(j+=1,M=2,N=j,P=j,B.close(),S&&=((0,e.unlockScroll)(),!1)),_=t,d&&(0,e.setAria)(d,`expanded`,_),t?(p.hidden=!1,m.hidden=!1,A(`open`),I.enter(),L.enter()):(A(`closed`),I.exit(),L.exit()),(0,e.emit)(n,`dialog:change`,{open:_}),o?.(_),t&&v.trackRaf(()=>D()))},z=t=>{if(t.key!==`Tab`)return;let n=(0,e.getTabbables)(m);if(n.length===0){t.preventDefault(),T(),m.focus();return}let r=n[0],i=n[n.length-1],a=m.ownerDocument.activeElement;if(!n.includes(a)){t.preventDefault(),(t.shiftKey?i:r).focus();return}if(r===i){t.preventDefault();return}t.shiftKey?a===r&&(t.preventDefault(),i.focus()):a===i&&(t.preventDefault(),r.focus())},B=(0,e.createModalStackItem)({content:m,overlay:p,onTabKeydown:z,cssVarPrefix:`dialog`});m.hidden=!0,p.hidden=!0,A(`closed`),d&&b.push((0,e.on)(d,`click`,()=>R(!_))),b.push((0,e.on)(m,`click`,e=>{let t=e.target;if(!t)return;let n=t.closest?.(`[data-slot="dialog-close"]`);n&&m.contains(n)&&R(!1)})),s&&b.push((0,e.on)(p,`click`,e=>{e.button===0&&e.target===p&&_&&R(!1)})),b.push((0,e.createDismissLayer)({root:n,isOpen:()=>_,onDismiss:()=>R(!1),closeOnClickOutside:!1,closeOnEscape:c}));let V={open:()=>{v.isDestroyed||R(!0)},close:()=>{v.isDestroyed||R(!1)},toggle:()=>{v.isDestroyed||R(!_)},get isOpen(){return _},destroy:()=>{v.destroy()},_handleKeydown:z,_content:m,_overlay:p};return(0,e.registerModalTerminalResources)(v,{cleanups:b,modalStack:B,presence:[I,L],portal:x,beforeDestroy:C,reset:()=>{j+=1,M=0,_=!1,A(`closed`),p.hidden=!0,m.hidden=!0,d&&(0,e.setAria)(d,`expanded`,!1)},releaseScrollLock:()=>{S&&=((0,e.unlockScroll)(),!1)},cleanup:E,unbind:()=>(0,e.clearRootBinding)(n,t,V)}),b.push((0,e.onRoot)(n,`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`&&R(n)})),(0,e.setRootBinding)(n,t,V),a&&R(!0),V}function r(r=document){let i=[];for(let a of(0,e.getRoots)(r,`dialog`))(0,e.hasRootBinding)(a,t)||i.push(n(a));return i}exports.create=r,exports.createDialog=n;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{clearRootBinding as e,createDismissLayer as t,createModalStackItem as n,createPortalLifecycle as r,createPresenceLifecycle as i,emit as
|
|
1
|
+
import{clearRootBinding as e,createDismissLayer as t,createModalStackItem as n,createPortalLifecycle as r,createPresenceLifecycle as i,createTerminalLifecycle as ee,emit as te,ensureId as ne,focusElement as a,getAutofocusOrFirstFocusable as o,getDataBool as s,getPart as c,getRoots as l,getTabbables as u,hasRootBinding as d,linkLabelledBy as f,lockScroll as p,on as m,onRoot as re,registerModalTerminalResources as ie,reuseRootBinding as ae,setAria as h,setRootBinding as oe,unlockScroll as g}from"@data-slot/core";const _=`@data-slot/dialog`;function v(l,d={}){let v=ae(l,_,`[@data-slot/dialog] createDialog() called more than once for the same root. Returning the existing controller. Destroy it before rebinding with new options.`);if(v)return v;let y=d.defaultOpen??s(l,`defaultOpen`)??!1,b=d.onOpenChange,x=d.closeOnClickOutside??s(l,`closeOnClickOutside`)??!0,S=d.closeOnEscape??s(l,`closeOnEscape`)??!0,C=d.lockScroll??s(l,`lockScroll`)??!0,w=d.alertDialog??s(l,`alertDialog`)??!1,T=c(l,`dialog-trigger`),E=c(l,`dialog-portal`),D=c(l,`dialog-overlay`),O=c(l,`dialog-content`),se=c(l,`dialog-title`),ce=c(l,`dialog-description`);if(!O)throw Error(`Dialog requires dialog-content slot`);if(!D)throw Error(`Dialog requires dialog-overlay slot`);let k=!1,A=ee(),j=null,M=[],N=E?r({content:E,root:l}):null,P=!1,F=()=>{A.trackFinalRaf(()=>{j&&(document.contains(j)?a(j):T&&document.contains(T)&&a(T)),j=null})};ne(O,`dialog-content`),O.setAttribute(`role`,w?`alertdialog`:`dialog`),h(O,`modal`,!0),f(O,se,ce),D.setAttribute(`role`,`presentation`),D.setAttribute(`aria-hidden`,`true`),D.tabIndex=-1,T&&(T.setAttribute(`aria-haspopup`,`dialog`),T.setAttribute(`aria-controls`,O.id),h(T,`expanded`,!1));let I=!1,L=()=>{O.hasAttribute(`tabindex`)||(O.tabIndex=-1,I=!0)},R=()=>{I&&=(O.removeAttribute(`tabindex`),!1)},z=()=>{let e=o(O);if(e)return e.focus();L(),O.focus()},B=()=>{N?.mount()},V=()=>{A.trackRaf(()=>{j&&document.contains(j)&&typeof j.focus==`function`?a(j):T&&document.contains(T)&&a(T),j=null})},H=e=>{if(l.setAttribute(`data-state`,e),E&&E.setAttribute(`data-state`,e),D.setAttribute(`data-state`,e),O.setAttribute(`data-state`,e),e===`open`){l.setAttribute(`data-open`,``),E?.setAttribute(`data-open`,``),D.setAttribute(`data-open`,``),O.setAttribute(`data-open`,``),l.removeAttribute(`data-closed`),E?.removeAttribute(`data-closed`),D.removeAttribute(`data-closed`),O.removeAttribute(`data-closed`);return}l.setAttribute(`data-closed`,``),E?.setAttribute(`data-closed`,``),D.setAttribute(`data-closed`,``),O.setAttribute(`data-closed`,``),l.removeAttribute(`data-open`),E?.removeAttribute(`data-open`),D.removeAttribute(`data-open`),O.removeAttribute(`data-open`)},U=0,W=0,G=0,K=0,q=(e,t)=>{A.isDestroyed||k||t!==U||(e.hidden=!0,W=Math.max(0,W-1),W===0&&(R(),V()))},J=i({element:D,onExitComplete:()=>q(D,G)}),Y=i({element:O,onExitComplete:()=>q(O,K)}),X=(e,t=!1)=>{A.isDestroyed||k===e&&!t||(e?(U+=1,W=0,B(),j=document.activeElement,Q.open(),C&&!P&&(p(),P=!0)):(U+=1,W=2,G=U,K=U,Q.close(),P&&=(g(),!1)),k=e,T&&h(T,`expanded`,k),e?(D.hidden=!1,O.hidden=!1,H(`open`),J.enter(),Y.enter()):(H(`closed`),J.exit(),Y.exit()),te(l,`dialog:change`,{open:k}),b?.(k),e&&A.trackRaf(()=>z()))},Z=e=>{if(e.key!==`Tab`)return;let t=u(O);if(t.length===0){e.preventDefault(),L(),O.focus();return}let n=t[0],r=t[t.length-1],i=O.ownerDocument.activeElement;if(!t.includes(i)){e.preventDefault(),(e.shiftKey?r:n).focus();return}if(n===r){e.preventDefault();return}e.shiftKey?i===n&&(e.preventDefault(),r.focus()):i===r&&(e.preventDefault(),n.focus())},Q=n({content:O,overlay:D,onTabKeydown:Z,cssVarPrefix:`dialog`});O.hidden=!0,D.hidden=!0,H(`closed`),T&&M.push(m(T,`click`,()=>X(!k))),M.push(m(O,`click`,e=>{let t=e.target;if(!t)return;let n=t.closest?.(`[data-slot="dialog-close"]`);n&&O.contains(n)&&X(!1)})),x&&M.push(m(D,`click`,e=>{e.button===0&&e.target===D&&k&&X(!1)})),M.push(t({root:l,isOpen:()=>k,onDismiss:()=>X(!1),closeOnClickOutside:!1,closeOnEscape:S}));let $={open:()=>{A.isDestroyed||X(!0)},close:()=>{A.isDestroyed||X(!1)},toggle:()=>{A.isDestroyed||X(!k)},get isOpen(){return k},destroy:()=>{A.destroy()},_handleKeydown:Z,_content:O,_overlay:D};return ie(A,{cleanups:M,modalStack:Q,presence:[J,Y],portal:N,beforeDestroy:F,reset:()=>{U+=1,W=0,k=!1,H(`closed`),D.hidden=!0,O.hidden=!0,T&&h(T,`expanded`,!1)},releaseScrollLock:()=>{P&&=(g(),!1)},cleanup:R,unbind:()=>e(l,_,$)}),M.push(re(l,`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`&&X(n)})),oe(l,_,$),y&&X(!0),$}function y(e=document){let t=[];for(let n of l(e,`dialog`))d(n,_)||t.push(v(n));return t}export{y as create,v as createDialog};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@data-slot/dialog",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -35,6 +35,6 @@
|
|
|
35
35
|
],
|
|
36
36
|
"license": "MIT",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@data-slot/core": "0.
|
|
38
|
+
"@data-slot/core": "1.0.0"
|
|
39
39
|
}
|
|
40
40
|
}
|