@visitwonders/assembly 0.13.0 → 0.15.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.
|
@@ -7,7 +7,8 @@ export type DrawerPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
7
7
|
interface DrawerContext {
|
|
8
8
|
isOpen: boolean;
|
|
9
9
|
titleId: string;
|
|
10
|
-
closeDrawer: () => void
|
|
10
|
+
closeDrawer: () => Promise<void>;
|
|
11
|
+
requestDismiss: () => void;
|
|
11
12
|
}
|
|
12
13
|
export interface DrawerSignature {
|
|
13
14
|
Element: HTMLDivElement;
|
|
@@ -24,6 +25,15 @@ export interface DrawerSignature {
|
|
|
24
25
|
* animation finishes.
|
|
25
26
|
*/
|
|
26
27
|
onCloseAnimationEnd?: () => void;
|
|
28
|
+
/**
|
|
29
|
+
* Fires when the user attempts to close via Escape, backdrop click, or
|
|
30
|
+
* the header close button. When set, the drawer does not auto-close —
|
|
31
|
+
* the consumer is handed `close` (the yielded promise-returning
|
|
32
|
+
* function) and is responsible for invoking it. `preventClose` takes
|
|
33
|
+
* precedence and suppresses this callback; `closeOnEscape` /
|
|
34
|
+
* `closeOnBackdropClick` still gate per-trigger.
|
|
35
|
+
*/
|
|
36
|
+
onDismiss?: (close: () => Promise<void>) => unknown;
|
|
27
37
|
/** Which side the drawer appears from */
|
|
28
38
|
side?: DrawerSide;
|
|
29
39
|
/** Drawer size */
|
|
@@ -51,7 +61,15 @@ export interface DrawerSignature {
|
|
|
51
61
|
Footer: WithBoundArgs<typeof DrawerFooter, 'ctx'>;
|
|
52
62
|
Close: WithBoundArgs<typeof DrawerClose, 'ctx'>;
|
|
53
63
|
isOpen: boolean;
|
|
54
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Closes the drawer and returns a promise that resolves once the
|
|
66
|
+
* close animation has ended. Resolves immediately if the drawer is
|
|
67
|
+
* already closed (and no exit animation is in flight). If the
|
|
68
|
+
* drawer is re-opened before the close animation finishes, the
|
|
69
|
+
* pending promise still resolves (no rejection) so consumer-
|
|
70
|
+
* sequenced work can continue.
|
|
71
|
+
*/
|
|
72
|
+
close: () => Promise<void>;
|
|
55
73
|
}
|
|
56
74
|
];
|
|
57
75
|
};
|
|
@@ -111,6 +129,7 @@ export default class Drawer extends Component<DrawerSignature> {
|
|
|
111
129
|
private previousVisible;
|
|
112
130
|
private contentElement;
|
|
113
131
|
private previousActiveElement;
|
|
132
|
+
private pendingCloseResolvers;
|
|
114
133
|
titleId: string;
|
|
115
134
|
get isOpenInternal(): boolean;
|
|
116
135
|
set isOpenInternal(value: boolean);
|
|
@@ -126,8 +145,10 @@ export default class Drawer extends Component<DrawerSignature> {
|
|
|
126
145
|
get shouldRender(): boolean;
|
|
127
146
|
get dataState(): 'open' | 'closed';
|
|
128
147
|
setOpen: (value: boolean) => void;
|
|
129
|
-
closeDrawer: () => void
|
|
148
|
+
closeDrawer: () => Promise<void>;
|
|
149
|
+
private drainCloseResolvers;
|
|
130
150
|
handleBackdropClose: () => void;
|
|
151
|
+
requestDismiss: () => void;
|
|
131
152
|
trackVisibility: import("ember-modifier").FunctionBasedModifier<{
|
|
132
153
|
Args: {
|
|
133
154
|
Positional: unknown[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/overlay/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAK1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAYrD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC7D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtE,UAAU,aAAa;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/overlay/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAK1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAYrD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC7D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtE,UAAU,aAAa;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,4BAA4B;QAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;QAEf,wCAAwC;QACxC,WAAW,CAAC,EAAE,OAAO,CAAC;QAEtB,uCAAuC;QACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QAEvC;;;;WAIG;QACH,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;QAEjC;;;;;;;WAOG;QACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC;QAEpD,yCAAyC;QACzC,IAAI,CAAC,EAAE,UAAU,CAAC;QAElB,kBAAkB;QAClB,IAAI,CAAC,EAAE,UAAU,CAAC;QAElB,2CAA2C;QAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;QAExB,uCAAuC;QACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;QAE/B,iCAAiC;QACjC,aAAa,CAAC,EAAE,OAAO,CAAC;QAExB,4DAA4D;QAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;QAEvB,2CAA2C;QAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;QAEtB;;kCAE0B;QAC1B,SAAS,CAAC,EAAE,WAAW,CAAC;KACzB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE,MAAM,EAAE,aAAa,CAAC,OAAO,YAAY,EAAE,KAAK,CAAC,CAAC;gBAClD,IAAI,EAAE,aAAa,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,CAAC;gBAC9C,MAAM,EAAE,aAAa,CAAC,OAAO,YAAY,EAAE,KAAK,CAAC,CAAC;gBAClD,KAAK,EAAE,aAAa,CAAC,OAAO,WAAW,EAAE,KAAK,CAAC,CAAC;gBAChD,MAAM,EAAE,OAAO,CAAC;gBAChB;;;;;;;mBAOG;gBACH,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;aAC5B;SACF,CAAC;KACH,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,GAAG,EAAE,aAAa,CAAC;QACnB,6CAA6C;QAC7C,oBAAoB,CAAC,EAAE,OAAO,CAAC;KAChC,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,CAAC;KACb,CAAC;CACH;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,GAAG,EAAE,aAAa,CAAC;KACpB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,CAAC;KACb,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,GAAG,EAAE,aAAa,CAAC;KACpB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,CAAC;KACb,CAAC;CACH;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE;QACJ,GAAG,EAAE,aAAa,CAAC;KACpB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,CAAC;KACb,CAAC;CACH;AAyBD,cAAM,YAAa,SAAQ,SAAS,CAAC,qBAAqB,CAAC;IACzD,IAAI,GAAG,IAAI,aAAa,CAEvB;IAED,IAAI,oBAAoB,IAAI,OAAO,CAElC;IAED,WAAW,UAAW,UAAU,KAAG,IAAI,CAGrC;CAqDH;AAED,QAAA,MAAM,UAAU,EAAE,GAAG,CAAC,mBAAmB,CAWvC,CAAC;AAEH,QAAA,MAAM,YAAY,EAAE,GAAG,CAAC,qBAAqB,CAW3C,CAAC;AAEH,cAAM,WAAY,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IACvD,IAAI,GAAG,IAAI,aAAa,CAEvB;IAED,WAAW,UAAW,UAAU,KAAG,IAAI,CAGrC;CAgBH;AAMD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,SAAS,CAAC,eAAe,CAAC;IACnD,OAAO,CAAC,eAAe,CAAkC;IACzD,OAAO,CAAC,mBAAmB,CAAS;IAE7C,OAAO,CAAC,eAAe,CAAkC;IACzD,OAAO,CAAC,cAAc,CAA4B;IAClD,OAAO,CAAC,qBAAqB,CAA4B;IACzD,OAAO,CAAC,qBAAqB,CAAyB;IAEtD,OAAO,SAAgC;IAMvC,IAAI,cAAc,IAAI,OAAO,CAK5B;IAED,IAAI,cAAc,CAAC,KAAK,EAAE,OAAO,EAEhC;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,IAAI,IAAI,UAAU,CAErB;IAED,IAAI,IAAI,IAAI,UAAU,CAErB;IAED,IAAI,OAAO,IAAI,aAAa,CAE3B;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,oBAAoB,IAAI,OAAO,CAGlC;IAED,IAAI,aAAa,IAAI,OAAO,CAG3B;IAED,IAAI,YAAY,IAAI,WAAW,GAAG,MAAM,CAEvC;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,IAAI,SAAS,IAAI,MAAM,GAAG,QAAQ,CAEjC;IAMD,OAAO,UAAW,OAAO,KAAG,IAAI,CAK9B;IAEF,WAAW,QAAO,OAAO,CAAC,IAAI,CAAC,CAU7B;IAEF,OAAO,CAAC,mBAAmB;IAS3B,mBAAmB,QAAO,IAAI,CAI5B;IAEF,cAAc,QAAO,IAAI,CASvB;IAMF,eAAe;;;;yBAIO,OAAO;;;;OAiB3B;IAEF,WAAW;;;;;;OA+FR;IAEH,kBAAkB,UAAW,cAAc,KAAG,IAAI,CAUhD;IAMF,IAAI,OAAO,IAAI,aAAa,CAO3B;CAoEF;AAED,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC"}
|
package/dist/overlay/drawer.js
CHANGED
|
@@ -34,7 +34,7 @@ class DrawerHeader extends Component {
|
|
|
34
34
|
}
|
|
35
35
|
handleClose = event => {
|
|
36
36
|
event.preventDefault();
|
|
37
|
-
this.ctx.
|
|
37
|
+
this.ctx.requestDismiss();
|
|
38
38
|
};
|
|
39
39
|
static {
|
|
40
40
|
setComponentTemplate(precompileTemplate("<div class=\"drawer-header_e20b0b74f\" data-test-drawer-header ...attributes>\n <div id={{this.ctx.titleId}} class=\"drawer-title_e20b0b74f\">\n {{yield}}\n </div>\n {{#if this.isCloseButtonVisible}}\n <button type=\"button\" class=\"drawer-header-close_e20b0b74f\" aria-label=\"Close\" {{on \"click\" this.handleClose}} data-test-drawer-header-close>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M12 4L4 12M4 4L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n {{/if}}\n</div>", {
|
|
@@ -57,7 +57,7 @@ class DrawerClose extends Component {
|
|
|
57
57
|
}
|
|
58
58
|
handleClick = event => {
|
|
59
59
|
event.preventDefault();
|
|
60
|
-
this.ctx.closeDrawer();
|
|
60
|
+
void this.ctx.closeDrawer();
|
|
61
61
|
};
|
|
62
62
|
static {
|
|
63
63
|
setComponentTemplate(precompileTemplate("<button type=\"button\" class=\"drawer-close\" {{on \"click\" this.handleClick}} data-test-drawer-close ...attributes>\n {{yield}}\n</button>", {
|
|
@@ -87,6 +87,7 @@ class Drawer extends Component {
|
|
|
87
87
|
previousVisible = undefined;
|
|
88
88
|
contentElement = null;
|
|
89
89
|
previousActiveElement = null;
|
|
90
|
+
pendingCloseResolvers = [];
|
|
90
91
|
titleId = `drawer-title-${uniqueId()}`;
|
|
91
92
|
// ============================================================================
|
|
92
93
|
// Getters
|
|
@@ -145,13 +146,36 @@ class Drawer extends Component {
|
|
|
145
146
|
this.args.onOpenChange?.(value);
|
|
146
147
|
};
|
|
147
148
|
closeDrawer = () => {
|
|
149
|
+
if (!this.isOpen && !this.exitAnimationActive) {
|
|
150
|
+
return Promise.resolve();
|
|
151
|
+
}
|
|
152
|
+
const promise = new Promise(resolve => {
|
|
153
|
+
this.pendingCloseResolvers.push(resolve);
|
|
154
|
+
});
|
|
148
155
|
this.setOpen(false);
|
|
156
|
+
return promise;
|
|
149
157
|
};
|
|
158
|
+
drainCloseResolvers() {
|
|
159
|
+
if (this.pendingCloseResolvers.length === 0) return;
|
|
160
|
+
const resolvers = this.pendingCloseResolvers;
|
|
161
|
+
this.pendingCloseResolvers = [];
|
|
162
|
+
for (const resolve of resolvers) {
|
|
163
|
+
resolve();
|
|
164
|
+
}
|
|
165
|
+
}
|
|
150
166
|
handleBackdropClose = () => {
|
|
151
167
|
if (this.closeOnBackdropClick) {
|
|
152
|
-
this.
|
|
168
|
+
this.requestDismiss();
|
|
153
169
|
}
|
|
154
170
|
};
|
|
171
|
+
requestDismiss = () => {
|
|
172
|
+
if (this.args.preventClose) return;
|
|
173
|
+
if (this.args.onDismiss) {
|
|
174
|
+
this.args.onDismiss(this.closeDrawer);
|
|
175
|
+
return;
|
|
176
|
+
}
|
|
177
|
+
void this.closeDrawer();
|
|
178
|
+
};
|
|
155
179
|
// ============================================================================
|
|
156
180
|
// Modifiers
|
|
157
181
|
// ============================================================================
|
|
@@ -161,6 +185,12 @@ class Drawer extends Component {
|
|
|
161
185
|
if (wasVisible === true && named.visible === false) {
|
|
162
186
|
this.exitAnimationActive = true;
|
|
163
187
|
} else if (named.visible) {
|
|
188
|
+
// Re-opened before the close animation finished: the pending
|
|
189
|
+
// `animationend` for the close will never fire, so drain any
|
|
190
|
+
// awaiters now rather than leaving them hanging.
|
|
191
|
+
if (wasVisible === false) {
|
|
192
|
+
this.drainCloseResolvers();
|
|
193
|
+
}
|
|
164
194
|
this.exitAnimationActive = false;
|
|
165
195
|
}
|
|
166
196
|
});
|
|
@@ -192,7 +222,7 @@ class Drawer extends Component {
|
|
|
192
222
|
if (event.key === 'Escape' && this.closeOnEscape) {
|
|
193
223
|
event.preventDefault();
|
|
194
224
|
event.stopPropagation();
|
|
195
|
-
this.
|
|
225
|
+
this.requestDismiss();
|
|
196
226
|
return;
|
|
197
227
|
}
|
|
198
228
|
// Focus trap (only when blanket is shown)
|
|
@@ -249,6 +279,7 @@ class Drawer extends Component {
|
|
|
249
279
|
if (!this.isOpen) {
|
|
250
280
|
this.exitAnimationActive = false;
|
|
251
281
|
this.args.onCloseAnimationEnd?.();
|
|
282
|
+
this.drainCloseResolvers();
|
|
252
283
|
}
|
|
253
284
|
};
|
|
254
285
|
// ============================================================================
|
|
@@ -258,7 +289,8 @@ class Drawer extends Component {
|
|
|
258
289
|
return {
|
|
259
290
|
isOpen: this.isOpen,
|
|
260
291
|
titleId: this.titleId,
|
|
261
|
-
closeDrawer: this.closeDrawer
|
|
292
|
+
closeDrawer: this.closeDrawer,
|
|
293
|
+
requestDismiss: this.requestDismiss
|
|
262
294
|
};
|
|
263
295
|
}
|
|
264
296
|
// ============================================================================
|