@visitwonders/assembly 0.13.0 → 0.14.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,7 @@ 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
11
|
}
|
|
12
12
|
export interface DrawerSignature {
|
|
13
13
|
Element: HTMLDivElement;
|
|
@@ -51,7 +51,15 @@ export interface DrawerSignature {
|
|
|
51
51
|
Footer: WithBoundArgs<typeof DrawerFooter, 'ctx'>;
|
|
52
52
|
Close: WithBoundArgs<typeof DrawerClose, 'ctx'>;
|
|
53
53
|
isOpen: boolean;
|
|
54
|
-
|
|
54
|
+
/**
|
|
55
|
+
* Closes the drawer and returns a promise that resolves once the
|
|
56
|
+
* close animation has ended. Resolves immediately if the drawer is
|
|
57
|
+
* already closed (and no exit animation is in flight). If the
|
|
58
|
+
* drawer is re-opened before the close animation finishes, the
|
|
59
|
+
* pending promise still resolves (no rejection) so consumer-
|
|
60
|
+
* sequenced work can continue.
|
|
61
|
+
*/
|
|
62
|
+
close: () => Promise<void>;
|
|
55
63
|
}
|
|
56
64
|
];
|
|
57
65
|
};
|
|
@@ -111,6 +119,7 @@ export default class Drawer extends Component<DrawerSignature> {
|
|
|
111
119
|
private previousVisible;
|
|
112
120
|
private contentElement;
|
|
113
121
|
private previousActiveElement;
|
|
122
|
+
private pendingCloseResolvers;
|
|
114
123
|
titleId: string;
|
|
115
124
|
get isOpenInternal(): boolean;
|
|
116
125
|
set isOpenInternal(value: boolean);
|
|
@@ -126,7 +135,8 @@ export default class Drawer extends Component<DrawerSignature> {
|
|
|
126
135
|
get shouldRender(): boolean;
|
|
127
136
|
get dataState(): 'open' | 'closed';
|
|
128
137
|
setOpen: (value: boolean) => void;
|
|
129
|
-
closeDrawer: () => void
|
|
138
|
+
closeDrawer: () => Promise<void>;
|
|
139
|
+
private drainCloseResolvers;
|
|
130
140
|
handleBackdropClose: () => void;
|
|
131
141
|
trackVisibility: import("ember-modifier").FunctionBasedModifier<{
|
|
132
142
|
Args: {
|
|
@@ -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":"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"}
|
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.closeDrawer();
|
|
37
|
+
void this.ctx.closeDrawer();
|
|
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,11 +146,26 @@ 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.closeDrawer();
|
|
168
|
+
void this.closeDrawer();
|
|
153
169
|
}
|
|
154
170
|
};
|
|
155
171
|
// ============================================================================
|
|
@@ -161,6 +177,12 @@ class Drawer extends Component {
|
|
|
161
177
|
if (wasVisible === true && named.visible === false) {
|
|
162
178
|
this.exitAnimationActive = true;
|
|
163
179
|
} else if (named.visible) {
|
|
180
|
+
// Re-opened before the close animation finished: the pending
|
|
181
|
+
// `animationend` for the close will never fire, so drain any
|
|
182
|
+
// awaiters now rather than leaving them hanging.
|
|
183
|
+
if (wasVisible === false) {
|
|
184
|
+
this.drainCloseResolvers();
|
|
185
|
+
}
|
|
164
186
|
this.exitAnimationActive = false;
|
|
165
187
|
}
|
|
166
188
|
});
|
|
@@ -192,7 +214,7 @@ class Drawer extends Component {
|
|
|
192
214
|
if (event.key === 'Escape' && this.closeOnEscape) {
|
|
193
215
|
event.preventDefault();
|
|
194
216
|
event.stopPropagation();
|
|
195
|
-
this.closeDrawer();
|
|
217
|
+
void this.closeDrawer();
|
|
196
218
|
return;
|
|
197
219
|
}
|
|
198
220
|
// Focus trap (only when blanket is shown)
|
|
@@ -249,6 +271,7 @@ class Drawer extends Component {
|
|
|
249
271
|
if (!this.isOpen) {
|
|
250
272
|
this.exitAnimationActive = false;
|
|
251
273
|
this.args.onCloseAnimationEnd?.();
|
|
274
|
+
this.drainCloseResolvers();
|
|
252
275
|
}
|
|
253
276
|
};
|
|
254
277
|
// ============================================================================
|