@samline/drawer 2.0.7 → 2.0.8
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/dist/browser/index.cjs +50 -9
- package/dist/browser/index.js +50 -9
- package/dist/browser/index.mjs +50 -9
- package/dist/index.js +50 -9
- package/dist/index.mjs +50 -9
- package/dist/react/index.js +50 -9
- package/dist/react/index.mjs +50 -9
- package/dist/svelte/index.js +50 -9
- package/dist/svelte/index.mjs +50 -9
- package/dist/vue/index.js +50 -9
- package/dist/vue/index.mjs +50 -9
- package/package.json +1 -1
package/dist/browser/index.cjs
CHANGED
|
@@ -29133,7 +29133,7 @@ function openAncestorChain(parentId) {
|
|
|
29133
29133
|
openAncestorChain(nextParentId);
|
|
29134
29134
|
}
|
|
29135
29135
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
29136
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
29136
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
29137
29137
|
parentRuntime.controller.setOpen(true);
|
|
29138
29138
|
notifyOpenStateChange(parentRuntime, true);
|
|
29139
29139
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -29148,18 +29148,36 @@ function cleanupRuntimeTrigger(runtime) {
|
|
|
29148
29148
|
}
|
|
29149
29149
|
function bindTriggerElement(runtime) {
|
|
29150
29150
|
cleanupRuntimeTrigger(runtime);
|
|
29151
|
+
const drawerElement = getRuntimeDrawerElement(runtime);
|
|
29152
|
+
const builtInTriggerElement = getRuntimeTriggerElement(runtime);
|
|
29153
|
+
const cleanups = [];
|
|
29154
|
+
if (builtInTriggerElement) {
|
|
29155
|
+
const handleBuiltInTriggerClick = () => {
|
|
29156
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29157
|
+
};
|
|
29158
|
+
builtInTriggerElement.addEventListener("click", handleBuiltInTriggerClick);
|
|
29159
|
+
cleanups.push(() => {
|
|
29160
|
+
builtInTriggerElement.removeEventListener("click", handleBuiltInTriggerClick);
|
|
29161
|
+
});
|
|
29162
|
+
}
|
|
29151
29163
|
if (!runtime.options.triggerElement) {
|
|
29164
|
+
runtime.cleanupTriggerElement = cleanups.length ? () => {
|
|
29165
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29166
|
+
} : null;
|
|
29152
29167
|
return;
|
|
29153
29168
|
}
|
|
29154
29169
|
const triggerElement = runtime.options.triggerElement;
|
|
29155
29170
|
const handleClick = () => {
|
|
29156
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29171
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29157
29172
|
runtime.controller.setOpen(true);
|
|
29158
29173
|
renderVanillaDrawer(runtime.id);
|
|
29159
29174
|
};
|
|
29160
29175
|
triggerElement.addEventListener("click", handleClick);
|
|
29161
|
-
|
|
29176
|
+
cleanups.push(() => {
|
|
29162
29177
|
triggerElement.removeEventListener("click", handleClick);
|
|
29178
|
+
});
|
|
29179
|
+
runtime.cleanupTriggerElement = () => {
|
|
29180
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29163
29181
|
};
|
|
29164
29182
|
}
|
|
29165
29183
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -29189,15 +29207,32 @@ function notifyOpenStateChange(runtime, open) {
|
|
|
29189
29207
|
function canUseDOM3() {
|
|
29190
29208
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
29191
29209
|
}
|
|
29192
|
-
function
|
|
29210
|
+
function isElementInsideDrawer(element) {
|
|
29211
|
+
let currentElement = element;
|
|
29212
|
+
while (currentElement) {
|
|
29213
|
+
if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-drawer")) {
|
|
29214
|
+
return true;
|
|
29215
|
+
}
|
|
29216
|
+
currentElement = currentElement.parentElement;
|
|
29217
|
+
}
|
|
29218
|
+
return false;
|
|
29219
|
+
}
|
|
29220
|
+
function releaseHiddenFocusBeforeOpen(options, drawerElement) {
|
|
29193
29221
|
if (!canUseDOM3() || options.modal === false || options.autoFocus) {
|
|
29194
29222
|
return;
|
|
29195
29223
|
}
|
|
29196
29224
|
const activeElement = document.activeElement;
|
|
29197
|
-
if (!activeElement || activeElement === document.body
|
|
29225
|
+
if (!activeElement || activeElement === document.body) {
|
|
29226
|
+
return;
|
|
29227
|
+
}
|
|
29228
|
+
const activeElementNode = activeElement;
|
|
29229
|
+
if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
|
|
29230
|
+
return;
|
|
29231
|
+
}
|
|
29232
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
29198
29233
|
return;
|
|
29199
29234
|
}
|
|
29200
|
-
|
|
29235
|
+
activeElementNode.blur();
|
|
29201
29236
|
}
|
|
29202
29237
|
function getRuntimeDrawerElement(runtime) {
|
|
29203
29238
|
if (!runtime.element) {
|
|
@@ -29205,6 +29240,12 @@ function getRuntimeDrawerElement(runtime) {
|
|
|
29205
29240
|
}
|
|
29206
29241
|
return runtime.element.querySelector("[data-drawer]");
|
|
29207
29242
|
}
|
|
29243
|
+
function getRuntimeTriggerElement(runtime) {
|
|
29244
|
+
if (!runtime.element) {
|
|
29245
|
+
return null;
|
|
29246
|
+
}
|
|
29247
|
+
return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
|
|
29248
|
+
}
|
|
29208
29249
|
function getViewportSizeForDirection(direction) {
|
|
29209
29250
|
if (!canUseDOM3()) {
|
|
29210
29251
|
return 0;
|
|
@@ -29253,7 +29294,7 @@ function renderVanillaDrawer(id) {
|
|
|
29253
29294
|
onOpenChange: (open) => {
|
|
29254
29295
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29255
29296
|
if (open) {
|
|
29256
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29297
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29257
29298
|
}
|
|
29258
29299
|
runtime.controller.setOpen(open);
|
|
29259
29300
|
if (previousOpen !== open) {
|
|
@@ -29302,7 +29343,7 @@ function buildVanillaController(id) {
|
|
|
29302
29343
|
return createDrawer({ id, open }).getSnapshot();
|
|
29303
29344
|
}
|
|
29304
29345
|
if (open) {
|
|
29305
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29346
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29306
29347
|
}
|
|
29307
29348
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29308
29349
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -29375,7 +29416,7 @@ function createDrawer(options = {}) {
|
|
|
29375
29416
|
}
|
|
29376
29417
|
}
|
|
29377
29418
|
if (nextOptions.open && !previousOpen) {
|
|
29378
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
29419
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
29379
29420
|
}
|
|
29380
29421
|
renderVanillaDrawer(id);
|
|
29381
29422
|
if (nextOptions.parentId && nextOptions.open) {
|
package/dist/browser/index.js
CHANGED
|
@@ -29133,7 +29133,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29133
29133
|
openAncestorChain(nextParentId);
|
|
29134
29134
|
}
|
|
29135
29135
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
29136
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
29136
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
29137
29137
|
parentRuntime.controller.setOpen(true);
|
|
29138
29138
|
notifyOpenStateChange(parentRuntime, true);
|
|
29139
29139
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -29148,18 +29148,36 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29148
29148
|
}
|
|
29149
29149
|
function bindTriggerElement(runtime) {
|
|
29150
29150
|
cleanupRuntimeTrigger(runtime);
|
|
29151
|
+
const drawerElement = getRuntimeDrawerElement(runtime);
|
|
29152
|
+
const builtInTriggerElement = getRuntimeTriggerElement(runtime);
|
|
29153
|
+
const cleanups = [];
|
|
29154
|
+
if (builtInTriggerElement) {
|
|
29155
|
+
const handleBuiltInTriggerClick = () => {
|
|
29156
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29157
|
+
};
|
|
29158
|
+
builtInTriggerElement.addEventListener("click", handleBuiltInTriggerClick);
|
|
29159
|
+
cleanups.push(() => {
|
|
29160
|
+
builtInTriggerElement.removeEventListener("click", handleBuiltInTriggerClick);
|
|
29161
|
+
});
|
|
29162
|
+
}
|
|
29151
29163
|
if (!runtime.options.triggerElement) {
|
|
29164
|
+
runtime.cleanupTriggerElement = cleanups.length ? () => {
|
|
29165
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29166
|
+
} : null;
|
|
29152
29167
|
return;
|
|
29153
29168
|
}
|
|
29154
29169
|
const triggerElement = runtime.options.triggerElement;
|
|
29155
29170
|
const handleClick = () => {
|
|
29156
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29171
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29157
29172
|
runtime.controller.setOpen(true);
|
|
29158
29173
|
renderVanillaDrawer(runtime.id);
|
|
29159
29174
|
};
|
|
29160
29175
|
triggerElement.addEventListener("click", handleClick);
|
|
29161
|
-
|
|
29176
|
+
cleanups.push(() => {
|
|
29162
29177
|
triggerElement.removeEventListener("click", handleClick);
|
|
29178
|
+
});
|
|
29179
|
+
runtime.cleanupTriggerElement = () => {
|
|
29180
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29163
29181
|
};
|
|
29164
29182
|
}
|
|
29165
29183
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -29189,15 +29207,32 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29189
29207
|
function canUseDOM3() {
|
|
29190
29208
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
29191
29209
|
}
|
|
29192
|
-
function
|
|
29210
|
+
function isElementInsideDrawer(element) {
|
|
29211
|
+
let currentElement = element;
|
|
29212
|
+
while (currentElement) {
|
|
29213
|
+
if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-drawer")) {
|
|
29214
|
+
return true;
|
|
29215
|
+
}
|
|
29216
|
+
currentElement = currentElement.parentElement;
|
|
29217
|
+
}
|
|
29218
|
+
return false;
|
|
29219
|
+
}
|
|
29220
|
+
function releaseHiddenFocusBeforeOpen(options, drawerElement) {
|
|
29193
29221
|
if (!canUseDOM3() || options.modal === false || options.autoFocus) {
|
|
29194
29222
|
return;
|
|
29195
29223
|
}
|
|
29196
29224
|
const activeElement = document.activeElement;
|
|
29197
|
-
if (!activeElement || activeElement === document.body
|
|
29225
|
+
if (!activeElement || activeElement === document.body) {
|
|
29226
|
+
return;
|
|
29227
|
+
}
|
|
29228
|
+
const activeElementNode = activeElement;
|
|
29229
|
+
if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
|
|
29230
|
+
return;
|
|
29231
|
+
}
|
|
29232
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
29198
29233
|
return;
|
|
29199
29234
|
}
|
|
29200
|
-
|
|
29235
|
+
activeElementNode.blur();
|
|
29201
29236
|
}
|
|
29202
29237
|
function getRuntimeDrawerElement(runtime) {
|
|
29203
29238
|
if (!runtime.element) {
|
|
@@ -29205,6 +29240,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29205
29240
|
}
|
|
29206
29241
|
return runtime.element.querySelector("[data-drawer]");
|
|
29207
29242
|
}
|
|
29243
|
+
function getRuntimeTriggerElement(runtime) {
|
|
29244
|
+
if (!runtime.element) {
|
|
29245
|
+
return null;
|
|
29246
|
+
}
|
|
29247
|
+
return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
|
|
29248
|
+
}
|
|
29208
29249
|
function getViewportSizeForDirection(direction) {
|
|
29209
29250
|
if (!canUseDOM3()) {
|
|
29210
29251
|
return 0;
|
|
@@ -29253,7 +29294,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29253
29294
|
onOpenChange: (open) => {
|
|
29254
29295
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29255
29296
|
if (open) {
|
|
29256
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29297
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29257
29298
|
}
|
|
29258
29299
|
runtime.controller.setOpen(open);
|
|
29259
29300
|
if (previousOpen !== open) {
|
|
@@ -29302,7 +29343,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29302
29343
|
return createDrawer({ id, open }).getSnapshot();
|
|
29303
29344
|
}
|
|
29304
29345
|
if (open) {
|
|
29305
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29346
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29306
29347
|
}
|
|
29307
29348
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29308
29349
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -29375,7 +29416,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29375
29416
|
}
|
|
29376
29417
|
}
|
|
29377
29418
|
if (nextOptions.open && !previousOpen) {
|
|
29378
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
29419
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
29379
29420
|
}
|
|
29380
29421
|
renderVanillaDrawer(id);
|
|
29381
29422
|
if (nextOptions.parentId && nextOptions.open) {
|
package/dist/browser/index.mjs
CHANGED
|
@@ -29107,7 +29107,7 @@ function openAncestorChain(parentId) {
|
|
|
29107
29107
|
openAncestorChain(nextParentId);
|
|
29108
29108
|
}
|
|
29109
29109
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
29110
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
29110
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
29111
29111
|
parentRuntime.controller.setOpen(true);
|
|
29112
29112
|
notifyOpenStateChange(parentRuntime, true);
|
|
29113
29113
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -29122,18 +29122,36 @@ function cleanupRuntimeTrigger(runtime) {
|
|
|
29122
29122
|
}
|
|
29123
29123
|
function bindTriggerElement(runtime) {
|
|
29124
29124
|
cleanupRuntimeTrigger(runtime);
|
|
29125
|
+
const drawerElement = getRuntimeDrawerElement(runtime);
|
|
29126
|
+
const builtInTriggerElement = getRuntimeTriggerElement(runtime);
|
|
29127
|
+
const cleanups = [];
|
|
29128
|
+
if (builtInTriggerElement) {
|
|
29129
|
+
const handleBuiltInTriggerClick = () => {
|
|
29130
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29131
|
+
};
|
|
29132
|
+
builtInTriggerElement.addEventListener("click", handleBuiltInTriggerClick);
|
|
29133
|
+
cleanups.push(() => {
|
|
29134
|
+
builtInTriggerElement.removeEventListener("click", handleBuiltInTriggerClick);
|
|
29135
|
+
});
|
|
29136
|
+
}
|
|
29125
29137
|
if (!runtime.options.triggerElement) {
|
|
29138
|
+
runtime.cleanupTriggerElement = cleanups.length ? () => {
|
|
29139
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29140
|
+
} : null;
|
|
29126
29141
|
return;
|
|
29127
29142
|
}
|
|
29128
29143
|
const triggerElement = runtime.options.triggerElement;
|
|
29129
29144
|
const handleClick = () => {
|
|
29130
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29145
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29131
29146
|
runtime.controller.setOpen(true);
|
|
29132
29147
|
renderVanillaDrawer(runtime.id);
|
|
29133
29148
|
};
|
|
29134
29149
|
triggerElement.addEventListener("click", handleClick);
|
|
29135
|
-
|
|
29150
|
+
cleanups.push(() => {
|
|
29136
29151
|
triggerElement.removeEventListener("click", handleClick);
|
|
29152
|
+
});
|
|
29153
|
+
runtime.cleanupTriggerElement = () => {
|
|
29154
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29137
29155
|
};
|
|
29138
29156
|
}
|
|
29139
29157
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -29163,15 +29181,32 @@ function notifyOpenStateChange(runtime, open) {
|
|
|
29163
29181
|
function canUseDOM3() {
|
|
29164
29182
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
29165
29183
|
}
|
|
29166
|
-
function
|
|
29184
|
+
function isElementInsideDrawer(element) {
|
|
29185
|
+
let currentElement = element;
|
|
29186
|
+
while (currentElement) {
|
|
29187
|
+
if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-drawer")) {
|
|
29188
|
+
return true;
|
|
29189
|
+
}
|
|
29190
|
+
currentElement = currentElement.parentElement;
|
|
29191
|
+
}
|
|
29192
|
+
return false;
|
|
29193
|
+
}
|
|
29194
|
+
function releaseHiddenFocusBeforeOpen(options, drawerElement) {
|
|
29167
29195
|
if (!canUseDOM3() || options.modal === false || options.autoFocus) {
|
|
29168
29196
|
return;
|
|
29169
29197
|
}
|
|
29170
29198
|
const activeElement = document.activeElement;
|
|
29171
|
-
if (!activeElement || activeElement === document.body
|
|
29199
|
+
if (!activeElement || activeElement === document.body) {
|
|
29200
|
+
return;
|
|
29201
|
+
}
|
|
29202
|
+
const activeElementNode = activeElement;
|
|
29203
|
+
if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
|
|
29204
|
+
return;
|
|
29205
|
+
}
|
|
29206
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
29172
29207
|
return;
|
|
29173
29208
|
}
|
|
29174
|
-
|
|
29209
|
+
activeElementNode.blur();
|
|
29175
29210
|
}
|
|
29176
29211
|
function getRuntimeDrawerElement(runtime) {
|
|
29177
29212
|
if (!runtime.element) {
|
|
@@ -29179,6 +29214,12 @@ function getRuntimeDrawerElement(runtime) {
|
|
|
29179
29214
|
}
|
|
29180
29215
|
return runtime.element.querySelector("[data-drawer]");
|
|
29181
29216
|
}
|
|
29217
|
+
function getRuntimeTriggerElement(runtime) {
|
|
29218
|
+
if (!runtime.element) {
|
|
29219
|
+
return null;
|
|
29220
|
+
}
|
|
29221
|
+
return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
|
|
29222
|
+
}
|
|
29182
29223
|
function getViewportSizeForDirection(direction) {
|
|
29183
29224
|
if (!canUseDOM3()) {
|
|
29184
29225
|
return 0;
|
|
@@ -29227,7 +29268,7 @@ function renderVanillaDrawer(id) {
|
|
|
29227
29268
|
onOpenChange: (open) => {
|
|
29228
29269
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29229
29270
|
if (open) {
|
|
29230
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29271
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29231
29272
|
}
|
|
29232
29273
|
runtime.controller.setOpen(open);
|
|
29233
29274
|
if (previousOpen !== open) {
|
|
@@ -29276,7 +29317,7 @@ function buildVanillaController(id) {
|
|
|
29276
29317
|
return createDrawer({ id, open }).getSnapshot();
|
|
29277
29318
|
}
|
|
29278
29319
|
if (open) {
|
|
29279
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29320
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29280
29321
|
}
|
|
29281
29322
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29282
29323
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -29349,7 +29390,7 @@ function createDrawer(options = {}) {
|
|
|
29349
29390
|
}
|
|
29350
29391
|
}
|
|
29351
29392
|
if (nextOptions.open && !previousOpen) {
|
|
29352
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
29393
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
29353
29394
|
}
|
|
29354
29395
|
renderVanillaDrawer(id);
|
|
29355
29396
|
if (nextOptions.parentId && nextOptions.open) {
|
package/dist/index.js
CHANGED
|
@@ -29132,7 +29132,7 @@ function openAncestorChain(parentId) {
|
|
|
29132
29132
|
openAncestorChain(nextParentId);
|
|
29133
29133
|
}
|
|
29134
29134
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
29135
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
29135
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
29136
29136
|
parentRuntime.controller.setOpen(true);
|
|
29137
29137
|
notifyOpenStateChange(parentRuntime, true);
|
|
29138
29138
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -29147,18 +29147,36 @@ function cleanupRuntimeTrigger(runtime) {
|
|
|
29147
29147
|
}
|
|
29148
29148
|
function bindTriggerElement(runtime) {
|
|
29149
29149
|
cleanupRuntimeTrigger(runtime);
|
|
29150
|
+
const drawerElement = getRuntimeDrawerElement(runtime);
|
|
29151
|
+
const builtInTriggerElement = getRuntimeTriggerElement(runtime);
|
|
29152
|
+
const cleanups = [];
|
|
29153
|
+
if (builtInTriggerElement) {
|
|
29154
|
+
const handleBuiltInTriggerClick = () => {
|
|
29155
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29156
|
+
};
|
|
29157
|
+
builtInTriggerElement.addEventListener("click", handleBuiltInTriggerClick);
|
|
29158
|
+
cleanups.push(() => {
|
|
29159
|
+
builtInTriggerElement.removeEventListener("click", handleBuiltInTriggerClick);
|
|
29160
|
+
});
|
|
29161
|
+
}
|
|
29150
29162
|
if (!runtime.options.triggerElement) {
|
|
29163
|
+
runtime.cleanupTriggerElement = cleanups.length ? () => {
|
|
29164
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29165
|
+
} : null;
|
|
29151
29166
|
return;
|
|
29152
29167
|
}
|
|
29153
29168
|
const triggerElement = runtime.options.triggerElement;
|
|
29154
29169
|
const handleClick = () => {
|
|
29155
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29170
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29156
29171
|
runtime.controller.setOpen(true);
|
|
29157
29172
|
renderVanillaDrawer(runtime.id);
|
|
29158
29173
|
};
|
|
29159
29174
|
triggerElement.addEventListener("click", handleClick);
|
|
29160
|
-
|
|
29175
|
+
cleanups.push(() => {
|
|
29161
29176
|
triggerElement.removeEventListener("click", handleClick);
|
|
29177
|
+
});
|
|
29178
|
+
runtime.cleanupTriggerElement = () => {
|
|
29179
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29162
29180
|
};
|
|
29163
29181
|
}
|
|
29164
29182
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -29188,15 +29206,32 @@ function notifyOpenStateChange(runtime, open) {
|
|
|
29188
29206
|
function canUseDOM3() {
|
|
29189
29207
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
29190
29208
|
}
|
|
29191
|
-
function
|
|
29209
|
+
function isElementInsideDrawer(element) {
|
|
29210
|
+
let currentElement = element;
|
|
29211
|
+
while (currentElement) {
|
|
29212
|
+
if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-drawer")) {
|
|
29213
|
+
return true;
|
|
29214
|
+
}
|
|
29215
|
+
currentElement = currentElement.parentElement;
|
|
29216
|
+
}
|
|
29217
|
+
return false;
|
|
29218
|
+
}
|
|
29219
|
+
function releaseHiddenFocusBeforeOpen(options, drawerElement) {
|
|
29192
29220
|
if (!canUseDOM3() || options.modal === false || options.autoFocus) {
|
|
29193
29221
|
return;
|
|
29194
29222
|
}
|
|
29195
29223
|
const activeElement = document.activeElement;
|
|
29196
|
-
if (!activeElement || activeElement === document.body
|
|
29224
|
+
if (!activeElement || activeElement === document.body) {
|
|
29225
|
+
return;
|
|
29226
|
+
}
|
|
29227
|
+
const activeElementNode = activeElement;
|
|
29228
|
+
if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
|
|
29229
|
+
return;
|
|
29230
|
+
}
|
|
29231
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
29197
29232
|
return;
|
|
29198
29233
|
}
|
|
29199
|
-
|
|
29234
|
+
activeElementNode.blur();
|
|
29200
29235
|
}
|
|
29201
29236
|
function getRuntimeDrawerElement(runtime) {
|
|
29202
29237
|
if (!runtime.element) {
|
|
@@ -29204,6 +29239,12 @@ function getRuntimeDrawerElement(runtime) {
|
|
|
29204
29239
|
}
|
|
29205
29240
|
return runtime.element.querySelector("[data-drawer]");
|
|
29206
29241
|
}
|
|
29242
|
+
function getRuntimeTriggerElement(runtime) {
|
|
29243
|
+
if (!runtime.element) {
|
|
29244
|
+
return null;
|
|
29245
|
+
}
|
|
29246
|
+
return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
|
|
29247
|
+
}
|
|
29207
29248
|
function getViewportSizeForDirection(direction) {
|
|
29208
29249
|
if (!canUseDOM3()) {
|
|
29209
29250
|
return 0;
|
|
@@ -29252,7 +29293,7 @@ function renderVanillaDrawer(id) {
|
|
|
29252
29293
|
onOpenChange: (open) => {
|
|
29253
29294
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29254
29295
|
if (open) {
|
|
29255
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29296
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29256
29297
|
}
|
|
29257
29298
|
runtime.controller.setOpen(open);
|
|
29258
29299
|
if (previousOpen !== open) {
|
|
@@ -29301,7 +29342,7 @@ function buildVanillaController(id) {
|
|
|
29301
29342
|
return createDrawer({ id, open }).getSnapshot();
|
|
29302
29343
|
}
|
|
29303
29344
|
if (open) {
|
|
29304
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29345
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29305
29346
|
}
|
|
29306
29347
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29307
29348
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -29374,7 +29415,7 @@ function createDrawer(options = {}) {
|
|
|
29374
29415
|
}
|
|
29375
29416
|
}
|
|
29376
29417
|
if (nextOptions.open && !previousOpen) {
|
|
29377
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
29418
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
29378
29419
|
}
|
|
29379
29420
|
renderVanillaDrawer(id);
|
|
29380
29421
|
if (nextOptions.parentId && nextOptions.open) {
|
package/dist/index.mjs
CHANGED
|
@@ -29107,7 +29107,7 @@ function openAncestorChain(parentId) {
|
|
|
29107
29107
|
openAncestorChain(nextParentId);
|
|
29108
29108
|
}
|
|
29109
29109
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
29110
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
29110
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
29111
29111
|
parentRuntime.controller.setOpen(true);
|
|
29112
29112
|
notifyOpenStateChange(parentRuntime, true);
|
|
29113
29113
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -29122,18 +29122,36 @@ function cleanupRuntimeTrigger(runtime) {
|
|
|
29122
29122
|
}
|
|
29123
29123
|
function bindTriggerElement(runtime) {
|
|
29124
29124
|
cleanupRuntimeTrigger(runtime);
|
|
29125
|
+
const drawerElement = getRuntimeDrawerElement(runtime);
|
|
29126
|
+
const builtInTriggerElement = getRuntimeTriggerElement(runtime);
|
|
29127
|
+
const cleanups = [];
|
|
29128
|
+
if (builtInTriggerElement) {
|
|
29129
|
+
const handleBuiltInTriggerClick = () => {
|
|
29130
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29131
|
+
};
|
|
29132
|
+
builtInTriggerElement.addEventListener("click", handleBuiltInTriggerClick);
|
|
29133
|
+
cleanups.push(() => {
|
|
29134
|
+
builtInTriggerElement.removeEventListener("click", handleBuiltInTriggerClick);
|
|
29135
|
+
});
|
|
29136
|
+
}
|
|
29125
29137
|
if (!runtime.options.triggerElement) {
|
|
29138
|
+
runtime.cleanupTriggerElement = cleanups.length ? () => {
|
|
29139
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29140
|
+
} : null;
|
|
29126
29141
|
return;
|
|
29127
29142
|
}
|
|
29128
29143
|
const triggerElement = runtime.options.triggerElement;
|
|
29129
29144
|
const handleClick = () => {
|
|
29130
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29145
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29131
29146
|
runtime.controller.setOpen(true);
|
|
29132
29147
|
renderVanillaDrawer(runtime.id);
|
|
29133
29148
|
};
|
|
29134
29149
|
triggerElement.addEventListener("click", handleClick);
|
|
29135
|
-
|
|
29150
|
+
cleanups.push(() => {
|
|
29136
29151
|
triggerElement.removeEventListener("click", handleClick);
|
|
29152
|
+
});
|
|
29153
|
+
runtime.cleanupTriggerElement = () => {
|
|
29154
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29137
29155
|
};
|
|
29138
29156
|
}
|
|
29139
29157
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -29163,15 +29181,32 @@ function notifyOpenStateChange(runtime, open) {
|
|
|
29163
29181
|
function canUseDOM3() {
|
|
29164
29182
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
29165
29183
|
}
|
|
29166
|
-
function
|
|
29184
|
+
function isElementInsideDrawer(element) {
|
|
29185
|
+
let currentElement = element;
|
|
29186
|
+
while (currentElement) {
|
|
29187
|
+
if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-drawer")) {
|
|
29188
|
+
return true;
|
|
29189
|
+
}
|
|
29190
|
+
currentElement = currentElement.parentElement;
|
|
29191
|
+
}
|
|
29192
|
+
return false;
|
|
29193
|
+
}
|
|
29194
|
+
function releaseHiddenFocusBeforeOpen(options, drawerElement) {
|
|
29167
29195
|
if (!canUseDOM3() || options.modal === false || options.autoFocus) {
|
|
29168
29196
|
return;
|
|
29169
29197
|
}
|
|
29170
29198
|
const activeElement = document.activeElement;
|
|
29171
|
-
if (!activeElement || activeElement === document.body
|
|
29199
|
+
if (!activeElement || activeElement === document.body) {
|
|
29200
|
+
return;
|
|
29201
|
+
}
|
|
29202
|
+
const activeElementNode = activeElement;
|
|
29203
|
+
if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
|
|
29204
|
+
return;
|
|
29205
|
+
}
|
|
29206
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
29172
29207
|
return;
|
|
29173
29208
|
}
|
|
29174
|
-
|
|
29209
|
+
activeElementNode.blur();
|
|
29175
29210
|
}
|
|
29176
29211
|
function getRuntimeDrawerElement(runtime) {
|
|
29177
29212
|
if (!runtime.element) {
|
|
@@ -29179,6 +29214,12 @@ function getRuntimeDrawerElement(runtime) {
|
|
|
29179
29214
|
}
|
|
29180
29215
|
return runtime.element.querySelector("[data-drawer]");
|
|
29181
29216
|
}
|
|
29217
|
+
function getRuntimeTriggerElement(runtime) {
|
|
29218
|
+
if (!runtime.element) {
|
|
29219
|
+
return null;
|
|
29220
|
+
}
|
|
29221
|
+
return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
|
|
29222
|
+
}
|
|
29182
29223
|
function getViewportSizeForDirection(direction) {
|
|
29183
29224
|
if (!canUseDOM3()) {
|
|
29184
29225
|
return 0;
|
|
@@ -29227,7 +29268,7 @@ function renderVanillaDrawer(id) {
|
|
|
29227
29268
|
onOpenChange: (open) => {
|
|
29228
29269
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29229
29270
|
if (open) {
|
|
29230
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29271
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29231
29272
|
}
|
|
29232
29273
|
runtime.controller.setOpen(open);
|
|
29233
29274
|
if (previousOpen !== open) {
|
|
@@ -29276,7 +29317,7 @@ function buildVanillaController(id) {
|
|
|
29276
29317
|
return createDrawer({ id, open }).getSnapshot();
|
|
29277
29318
|
}
|
|
29278
29319
|
if (open) {
|
|
29279
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29320
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29280
29321
|
}
|
|
29281
29322
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29282
29323
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -29349,7 +29390,7 @@ function createDrawer(options = {}) {
|
|
|
29349
29390
|
}
|
|
29350
29391
|
}
|
|
29351
29392
|
if (nextOptions.open && !previousOpen) {
|
|
29352
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
29393
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
29353
29394
|
}
|
|
29354
29395
|
renderVanillaDrawer(id);
|
|
29355
29396
|
if (nextOptions.parentId && nextOptions.open) {
|