@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/react/index.js
CHANGED
|
@@ -2613,7 +2613,7 @@ function openAncestorChain(parentId) {
|
|
|
2613
2613
|
openAncestorChain(nextParentId);
|
|
2614
2614
|
}
|
|
2615
2615
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
2616
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
2616
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
2617
2617
|
parentRuntime.controller.setOpen(true);
|
|
2618
2618
|
notifyOpenStateChange(parentRuntime, true);
|
|
2619
2619
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -2628,18 +2628,36 @@ function cleanupRuntimeTrigger(runtime) {
|
|
|
2628
2628
|
}
|
|
2629
2629
|
function bindTriggerElement(runtime) {
|
|
2630
2630
|
cleanupRuntimeTrigger(runtime);
|
|
2631
|
+
const drawerElement = getRuntimeDrawerElement(runtime);
|
|
2632
|
+
const builtInTriggerElement = getRuntimeTriggerElement(runtime);
|
|
2633
|
+
const cleanups = [];
|
|
2634
|
+
if (builtInTriggerElement) {
|
|
2635
|
+
const handleBuiltInTriggerClick = ()=>{
|
|
2636
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
2637
|
+
};
|
|
2638
|
+
builtInTriggerElement.addEventListener('click', handleBuiltInTriggerClick);
|
|
2639
|
+
cleanups.push(()=>{
|
|
2640
|
+
builtInTriggerElement.removeEventListener('click', handleBuiltInTriggerClick);
|
|
2641
|
+
});
|
|
2642
|
+
}
|
|
2631
2643
|
if (!runtime.options.triggerElement) {
|
|
2644
|
+
runtime.cleanupTriggerElement = cleanups.length ? ()=>{
|
|
2645
|
+
cleanups.forEach((cleanup)=>cleanup());
|
|
2646
|
+
} : null;
|
|
2632
2647
|
return;
|
|
2633
2648
|
}
|
|
2634
2649
|
const triggerElement = runtime.options.triggerElement;
|
|
2635
2650
|
const handleClick = ()=>{
|
|
2636
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
2651
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
2637
2652
|
runtime.controller.setOpen(true);
|
|
2638
2653
|
renderVanillaDrawer(runtime.id);
|
|
2639
2654
|
};
|
|
2640
2655
|
triggerElement.addEventListener('click', handleClick);
|
|
2641
|
-
|
|
2656
|
+
cleanups.push(()=>{
|
|
2642
2657
|
triggerElement.removeEventListener('click', handleClick);
|
|
2658
|
+
});
|
|
2659
|
+
runtime.cleanupTriggerElement = ()=>{
|
|
2660
|
+
cleanups.forEach((cleanup)=>cleanup());
|
|
2643
2661
|
};
|
|
2644
2662
|
}
|
|
2645
2663
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -2669,15 +2687,32 @@ function notifyOpenStateChange(runtime, open) {
|
|
|
2669
2687
|
function canUseDOM() {
|
|
2670
2688
|
return typeof window !== 'undefined' && typeof document !== 'undefined';
|
|
2671
2689
|
}
|
|
2672
|
-
function
|
|
2690
|
+
function isElementInsideDrawer(element) {
|
|
2691
|
+
let currentElement = element;
|
|
2692
|
+
while(currentElement){
|
|
2693
|
+
if (currentElement instanceof HTMLElement && currentElement.hasAttribute('data-drawer')) {
|
|
2694
|
+
return true;
|
|
2695
|
+
}
|
|
2696
|
+
currentElement = currentElement.parentElement;
|
|
2697
|
+
}
|
|
2698
|
+
return false;
|
|
2699
|
+
}
|
|
2700
|
+
function releaseHiddenFocusBeforeOpen(options, drawerElement) {
|
|
2673
2701
|
if (!canUseDOM() || options.modal === false || options.autoFocus) {
|
|
2674
2702
|
return;
|
|
2675
2703
|
}
|
|
2676
2704
|
const activeElement = document.activeElement;
|
|
2677
|
-
if (!activeElement || activeElement === document.body
|
|
2705
|
+
if (!activeElement || activeElement === document.body) {
|
|
2706
|
+
return;
|
|
2707
|
+
}
|
|
2708
|
+
const activeElementNode = activeElement;
|
|
2709
|
+
if ((drawerElement == null ? void 0 : drawerElement.contains(activeElementNode)) || isElementInsideDrawer(activeElementNode)) {
|
|
2710
|
+
return;
|
|
2711
|
+
}
|
|
2712
|
+
if (typeof activeElementNode.blur !== 'function') {
|
|
2678
2713
|
return;
|
|
2679
2714
|
}
|
|
2680
|
-
|
|
2715
|
+
activeElementNode.blur();
|
|
2681
2716
|
}
|
|
2682
2717
|
function getRuntimeDrawerElement(runtime) {
|
|
2683
2718
|
if (!runtime.element) {
|
|
@@ -2685,6 +2720,12 @@ function getRuntimeDrawerElement(runtime) {
|
|
|
2685
2720
|
}
|
|
2686
2721
|
return runtime.element.querySelector('[data-drawer]');
|
|
2687
2722
|
}
|
|
2723
|
+
function getRuntimeTriggerElement(runtime) {
|
|
2724
|
+
if (!runtime.element) {
|
|
2725
|
+
return null;
|
|
2726
|
+
}
|
|
2727
|
+
return runtime.element.querySelector('[data-drawer-vanilla-trigger]');
|
|
2728
|
+
}
|
|
2688
2729
|
function getViewportSizeForDirection(direction) {
|
|
2689
2730
|
if (!canUseDOM()) {
|
|
2690
2731
|
return 0;
|
|
@@ -2730,7 +2771,7 @@ function renderVanillaDrawer(id) {
|
|
|
2730
2771
|
onOpenChange: (open)=>{
|
|
2731
2772
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
2732
2773
|
if (open) {
|
|
2733
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
2774
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
2734
2775
|
}
|
|
2735
2776
|
runtime.controller.setOpen(open);
|
|
2736
2777
|
if (previousOpen !== open) {
|
|
@@ -2785,7 +2826,7 @@ function buildVanillaController(id) {
|
|
|
2785
2826
|
}).getSnapshot();
|
|
2786
2827
|
}
|
|
2787
2828
|
if (open) {
|
|
2788
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
2829
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
2789
2830
|
}
|
|
2790
2831
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
2791
2832
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -2881,7 +2922,7 @@ function createDrawer(options = {}) {
|
|
|
2881
2922
|
}
|
|
2882
2923
|
}
|
|
2883
2924
|
if (nextOptions.open && !previousOpen) {
|
|
2884
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
2925
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
2885
2926
|
}
|
|
2886
2927
|
renderVanillaDrawer(id);
|
|
2887
2928
|
if (nextOptions.parentId && nextOptions.open) {
|
package/dist/react/index.mjs
CHANGED
|
@@ -2591,7 +2591,7 @@ function openAncestorChain(parentId) {
|
|
|
2591
2591
|
openAncestorChain(nextParentId);
|
|
2592
2592
|
}
|
|
2593
2593
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
2594
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
2594
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
2595
2595
|
parentRuntime.controller.setOpen(true);
|
|
2596
2596
|
notifyOpenStateChange(parentRuntime, true);
|
|
2597
2597
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -2606,18 +2606,36 @@ function cleanupRuntimeTrigger(runtime) {
|
|
|
2606
2606
|
}
|
|
2607
2607
|
function bindTriggerElement(runtime) {
|
|
2608
2608
|
cleanupRuntimeTrigger(runtime);
|
|
2609
|
+
const drawerElement = getRuntimeDrawerElement(runtime);
|
|
2610
|
+
const builtInTriggerElement = getRuntimeTriggerElement(runtime);
|
|
2611
|
+
const cleanups = [];
|
|
2612
|
+
if (builtInTriggerElement) {
|
|
2613
|
+
const handleBuiltInTriggerClick = ()=>{
|
|
2614
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
2615
|
+
};
|
|
2616
|
+
builtInTriggerElement.addEventListener('click', handleBuiltInTriggerClick);
|
|
2617
|
+
cleanups.push(()=>{
|
|
2618
|
+
builtInTriggerElement.removeEventListener('click', handleBuiltInTriggerClick);
|
|
2619
|
+
});
|
|
2620
|
+
}
|
|
2609
2621
|
if (!runtime.options.triggerElement) {
|
|
2622
|
+
runtime.cleanupTriggerElement = cleanups.length ? ()=>{
|
|
2623
|
+
cleanups.forEach((cleanup)=>cleanup());
|
|
2624
|
+
} : null;
|
|
2610
2625
|
return;
|
|
2611
2626
|
}
|
|
2612
2627
|
const triggerElement = runtime.options.triggerElement;
|
|
2613
2628
|
const handleClick = ()=>{
|
|
2614
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
2629
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
2615
2630
|
runtime.controller.setOpen(true);
|
|
2616
2631
|
renderVanillaDrawer(runtime.id);
|
|
2617
2632
|
};
|
|
2618
2633
|
triggerElement.addEventListener('click', handleClick);
|
|
2619
|
-
|
|
2634
|
+
cleanups.push(()=>{
|
|
2620
2635
|
triggerElement.removeEventListener('click', handleClick);
|
|
2636
|
+
});
|
|
2637
|
+
runtime.cleanupTriggerElement = ()=>{
|
|
2638
|
+
cleanups.forEach((cleanup)=>cleanup());
|
|
2621
2639
|
};
|
|
2622
2640
|
}
|
|
2623
2641
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -2647,15 +2665,32 @@ function notifyOpenStateChange(runtime, open) {
|
|
|
2647
2665
|
function canUseDOM() {
|
|
2648
2666
|
return typeof window !== 'undefined' && typeof document !== 'undefined';
|
|
2649
2667
|
}
|
|
2650
|
-
function
|
|
2668
|
+
function isElementInsideDrawer(element) {
|
|
2669
|
+
let currentElement = element;
|
|
2670
|
+
while(currentElement){
|
|
2671
|
+
if (currentElement instanceof HTMLElement && currentElement.hasAttribute('data-drawer')) {
|
|
2672
|
+
return true;
|
|
2673
|
+
}
|
|
2674
|
+
currentElement = currentElement.parentElement;
|
|
2675
|
+
}
|
|
2676
|
+
return false;
|
|
2677
|
+
}
|
|
2678
|
+
function releaseHiddenFocusBeforeOpen(options, drawerElement) {
|
|
2651
2679
|
if (!canUseDOM() || options.modal === false || options.autoFocus) {
|
|
2652
2680
|
return;
|
|
2653
2681
|
}
|
|
2654
2682
|
const activeElement = document.activeElement;
|
|
2655
|
-
if (!activeElement || activeElement === document.body
|
|
2683
|
+
if (!activeElement || activeElement === document.body) {
|
|
2684
|
+
return;
|
|
2685
|
+
}
|
|
2686
|
+
const activeElementNode = activeElement;
|
|
2687
|
+
if ((drawerElement == null ? void 0 : drawerElement.contains(activeElementNode)) || isElementInsideDrawer(activeElementNode)) {
|
|
2688
|
+
return;
|
|
2689
|
+
}
|
|
2690
|
+
if (typeof activeElementNode.blur !== 'function') {
|
|
2656
2691
|
return;
|
|
2657
2692
|
}
|
|
2658
|
-
|
|
2693
|
+
activeElementNode.blur();
|
|
2659
2694
|
}
|
|
2660
2695
|
function getRuntimeDrawerElement(runtime) {
|
|
2661
2696
|
if (!runtime.element) {
|
|
@@ -2663,6 +2698,12 @@ function getRuntimeDrawerElement(runtime) {
|
|
|
2663
2698
|
}
|
|
2664
2699
|
return runtime.element.querySelector('[data-drawer]');
|
|
2665
2700
|
}
|
|
2701
|
+
function getRuntimeTriggerElement(runtime) {
|
|
2702
|
+
if (!runtime.element) {
|
|
2703
|
+
return null;
|
|
2704
|
+
}
|
|
2705
|
+
return runtime.element.querySelector('[data-drawer-vanilla-trigger]');
|
|
2706
|
+
}
|
|
2666
2707
|
function getViewportSizeForDirection(direction) {
|
|
2667
2708
|
if (!canUseDOM()) {
|
|
2668
2709
|
return 0;
|
|
@@ -2708,7 +2749,7 @@ function renderVanillaDrawer(id) {
|
|
|
2708
2749
|
onOpenChange: (open)=>{
|
|
2709
2750
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
2710
2751
|
if (open) {
|
|
2711
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
2752
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
2712
2753
|
}
|
|
2713
2754
|
runtime.controller.setOpen(open);
|
|
2714
2755
|
if (previousOpen !== open) {
|
|
@@ -2763,7 +2804,7 @@ function buildVanillaController(id) {
|
|
|
2763
2804
|
}).getSnapshot();
|
|
2764
2805
|
}
|
|
2765
2806
|
if (open) {
|
|
2766
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
2807
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
2767
2808
|
}
|
|
2768
2809
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
2769
2810
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -2859,7 +2900,7 @@ function createDrawer(options = {}) {
|
|
|
2859
2900
|
}
|
|
2860
2901
|
}
|
|
2861
2902
|
if (nextOptions.open && !previousOpen) {
|
|
2862
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
2903
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
2863
2904
|
}
|
|
2864
2905
|
renderVanillaDrawer(id);
|
|
2865
2906
|
if (nextOptions.parentId && nextOptions.open) {
|
package/dist/svelte/index.js
CHANGED
|
@@ -29135,7 +29135,7 @@ function openAncestorChain(parentId) {
|
|
|
29135
29135
|
openAncestorChain(nextParentId);
|
|
29136
29136
|
}
|
|
29137
29137
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
29138
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
29138
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
29139
29139
|
parentRuntime.controller.setOpen(true);
|
|
29140
29140
|
notifyOpenStateChange(parentRuntime, true);
|
|
29141
29141
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -29150,18 +29150,36 @@ function cleanupRuntimeTrigger(runtime) {
|
|
|
29150
29150
|
}
|
|
29151
29151
|
function bindTriggerElement(runtime) {
|
|
29152
29152
|
cleanupRuntimeTrigger(runtime);
|
|
29153
|
+
const drawerElement = getRuntimeDrawerElement(runtime);
|
|
29154
|
+
const builtInTriggerElement = getRuntimeTriggerElement(runtime);
|
|
29155
|
+
const cleanups = [];
|
|
29156
|
+
if (builtInTriggerElement) {
|
|
29157
|
+
const handleBuiltInTriggerClick = () => {
|
|
29158
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29159
|
+
};
|
|
29160
|
+
builtInTriggerElement.addEventListener("click", handleBuiltInTriggerClick);
|
|
29161
|
+
cleanups.push(() => {
|
|
29162
|
+
builtInTriggerElement.removeEventListener("click", handleBuiltInTriggerClick);
|
|
29163
|
+
});
|
|
29164
|
+
}
|
|
29153
29165
|
if (!runtime.options.triggerElement) {
|
|
29166
|
+
runtime.cleanupTriggerElement = cleanups.length ? () => {
|
|
29167
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29168
|
+
} : null;
|
|
29154
29169
|
return;
|
|
29155
29170
|
}
|
|
29156
29171
|
const triggerElement = runtime.options.triggerElement;
|
|
29157
29172
|
const handleClick = () => {
|
|
29158
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29173
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29159
29174
|
runtime.controller.setOpen(true);
|
|
29160
29175
|
renderVanillaDrawer(runtime.id);
|
|
29161
29176
|
};
|
|
29162
29177
|
triggerElement.addEventListener("click", handleClick);
|
|
29163
|
-
|
|
29178
|
+
cleanups.push(() => {
|
|
29164
29179
|
triggerElement.removeEventListener("click", handleClick);
|
|
29180
|
+
});
|
|
29181
|
+
runtime.cleanupTriggerElement = () => {
|
|
29182
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29165
29183
|
};
|
|
29166
29184
|
}
|
|
29167
29185
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -29191,15 +29209,32 @@ function notifyOpenStateChange(runtime, open) {
|
|
|
29191
29209
|
function canUseDOM3() {
|
|
29192
29210
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
29193
29211
|
}
|
|
29194
|
-
function
|
|
29212
|
+
function isElementInsideDrawer(element) {
|
|
29213
|
+
let currentElement = element;
|
|
29214
|
+
while (currentElement) {
|
|
29215
|
+
if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-drawer")) {
|
|
29216
|
+
return true;
|
|
29217
|
+
}
|
|
29218
|
+
currentElement = currentElement.parentElement;
|
|
29219
|
+
}
|
|
29220
|
+
return false;
|
|
29221
|
+
}
|
|
29222
|
+
function releaseHiddenFocusBeforeOpen(options, drawerElement) {
|
|
29195
29223
|
if (!canUseDOM3() || options.modal === false || options.autoFocus) {
|
|
29196
29224
|
return;
|
|
29197
29225
|
}
|
|
29198
29226
|
const activeElement = document.activeElement;
|
|
29199
|
-
if (!activeElement || activeElement === document.body
|
|
29227
|
+
if (!activeElement || activeElement === document.body) {
|
|
29228
|
+
return;
|
|
29229
|
+
}
|
|
29230
|
+
const activeElementNode = activeElement;
|
|
29231
|
+
if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
|
|
29232
|
+
return;
|
|
29233
|
+
}
|
|
29234
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
29200
29235
|
return;
|
|
29201
29236
|
}
|
|
29202
|
-
|
|
29237
|
+
activeElementNode.blur();
|
|
29203
29238
|
}
|
|
29204
29239
|
function getRuntimeDrawerElement(runtime) {
|
|
29205
29240
|
if (!runtime.element) {
|
|
@@ -29207,6 +29242,12 @@ function getRuntimeDrawerElement(runtime) {
|
|
|
29207
29242
|
}
|
|
29208
29243
|
return runtime.element.querySelector("[data-drawer]");
|
|
29209
29244
|
}
|
|
29245
|
+
function getRuntimeTriggerElement(runtime) {
|
|
29246
|
+
if (!runtime.element) {
|
|
29247
|
+
return null;
|
|
29248
|
+
}
|
|
29249
|
+
return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
|
|
29250
|
+
}
|
|
29210
29251
|
function getViewportSizeForDirection(direction) {
|
|
29211
29252
|
if (!canUseDOM3()) {
|
|
29212
29253
|
return 0;
|
|
@@ -29255,7 +29296,7 @@ function renderVanillaDrawer(id) {
|
|
|
29255
29296
|
onOpenChange: (open) => {
|
|
29256
29297
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29257
29298
|
if (open) {
|
|
29258
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29299
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29259
29300
|
}
|
|
29260
29301
|
runtime.controller.setOpen(open);
|
|
29261
29302
|
if (previousOpen !== open) {
|
|
@@ -29304,7 +29345,7 @@ function buildVanillaController(id) {
|
|
|
29304
29345
|
return createDrawer({ id, open }).getSnapshot();
|
|
29305
29346
|
}
|
|
29306
29347
|
if (open) {
|
|
29307
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29348
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29308
29349
|
}
|
|
29309
29350
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29310
29351
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -29377,7 +29418,7 @@ function createDrawer(options = {}) {
|
|
|
29377
29418
|
}
|
|
29378
29419
|
}
|
|
29379
29420
|
if (nextOptions.open && !previousOpen) {
|
|
29380
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
29421
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
29381
29422
|
}
|
|
29382
29423
|
renderVanillaDrawer(id);
|
|
29383
29424
|
if (nextOptions.parentId && nextOptions.open) {
|
package/dist/svelte/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/vue/index.js
CHANGED
|
@@ -29135,7 +29135,7 @@ function openAncestorChain(parentId) {
|
|
|
29135
29135
|
openAncestorChain(nextParentId);
|
|
29136
29136
|
}
|
|
29137
29137
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
29138
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
29138
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
29139
29139
|
parentRuntime.controller.setOpen(true);
|
|
29140
29140
|
notifyOpenStateChange(parentRuntime, true);
|
|
29141
29141
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -29150,18 +29150,36 @@ function cleanupRuntimeTrigger(runtime) {
|
|
|
29150
29150
|
}
|
|
29151
29151
|
function bindTriggerElement(runtime) {
|
|
29152
29152
|
cleanupRuntimeTrigger(runtime);
|
|
29153
|
+
const drawerElement = getRuntimeDrawerElement(runtime);
|
|
29154
|
+
const builtInTriggerElement = getRuntimeTriggerElement(runtime);
|
|
29155
|
+
const cleanups = [];
|
|
29156
|
+
if (builtInTriggerElement) {
|
|
29157
|
+
const handleBuiltInTriggerClick = () => {
|
|
29158
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29159
|
+
};
|
|
29160
|
+
builtInTriggerElement.addEventListener("click", handleBuiltInTriggerClick);
|
|
29161
|
+
cleanups.push(() => {
|
|
29162
|
+
builtInTriggerElement.removeEventListener("click", handleBuiltInTriggerClick);
|
|
29163
|
+
});
|
|
29164
|
+
}
|
|
29153
29165
|
if (!runtime.options.triggerElement) {
|
|
29166
|
+
runtime.cleanupTriggerElement = cleanups.length ? () => {
|
|
29167
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29168
|
+
} : null;
|
|
29154
29169
|
return;
|
|
29155
29170
|
}
|
|
29156
29171
|
const triggerElement = runtime.options.triggerElement;
|
|
29157
29172
|
const handleClick = () => {
|
|
29158
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29173
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29159
29174
|
runtime.controller.setOpen(true);
|
|
29160
29175
|
renderVanillaDrawer(runtime.id);
|
|
29161
29176
|
};
|
|
29162
29177
|
triggerElement.addEventListener("click", handleClick);
|
|
29163
|
-
|
|
29178
|
+
cleanups.push(() => {
|
|
29164
29179
|
triggerElement.removeEventListener("click", handleClick);
|
|
29180
|
+
});
|
|
29181
|
+
runtime.cleanupTriggerElement = () => {
|
|
29182
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29165
29183
|
};
|
|
29166
29184
|
}
|
|
29167
29185
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -29191,15 +29209,32 @@ function notifyOpenStateChange(runtime, open) {
|
|
|
29191
29209
|
function canUseDOM3() {
|
|
29192
29210
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
29193
29211
|
}
|
|
29194
|
-
function
|
|
29212
|
+
function isElementInsideDrawer(element) {
|
|
29213
|
+
let currentElement = element;
|
|
29214
|
+
while (currentElement) {
|
|
29215
|
+
if (currentElement instanceof HTMLElement && currentElement.hasAttribute("data-drawer")) {
|
|
29216
|
+
return true;
|
|
29217
|
+
}
|
|
29218
|
+
currentElement = currentElement.parentElement;
|
|
29219
|
+
}
|
|
29220
|
+
return false;
|
|
29221
|
+
}
|
|
29222
|
+
function releaseHiddenFocusBeforeOpen(options, drawerElement) {
|
|
29195
29223
|
if (!canUseDOM3() || options.modal === false || options.autoFocus) {
|
|
29196
29224
|
return;
|
|
29197
29225
|
}
|
|
29198
29226
|
const activeElement = document.activeElement;
|
|
29199
|
-
if (!activeElement || activeElement === document.body
|
|
29227
|
+
if (!activeElement || activeElement === document.body) {
|
|
29228
|
+
return;
|
|
29229
|
+
}
|
|
29230
|
+
const activeElementNode = activeElement;
|
|
29231
|
+
if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
|
|
29232
|
+
return;
|
|
29233
|
+
}
|
|
29234
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
29200
29235
|
return;
|
|
29201
29236
|
}
|
|
29202
|
-
|
|
29237
|
+
activeElementNode.blur();
|
|
29203
29238
|
}
|
|
29204
29239
|
function getRuntimeDrawerElement(runtime) {
|
|
29205
29240
|
if (!runtime.element) {
|
|
@@ -29207,6 +29242,12 @@ function getRuntimeDrawerElement(runtime) {
|
|
|
29207
29242
|
}
|
|
29208
29243
|
return runtime.element.querySelector("[data-drawer]");
|
|
29209
29244
|
}
|
|
29245
|
+
function getRuntimeTriggerElement(runtime) {
|
|
29246
|
+
if (!runtime.element) {
|
|
29247
|
+
return null;
|
|
29248
|
+
}
|
|
29249
|
+
return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
|
|
29250
|
+
}
|
|
29210
29251
|
function getViewportSizeForDirection(direction) {
|
|
29211
29252
|
if (!canUseDOM3()) {
|
|
29212
29253
|
return 0;
|
|
@@ -29255,7 +29296,7 @@ function renderVanillaDrawer(id) {
|
|
|
29255
29296
|
onOpenChange: (open) => {
|
|
29256
29297
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29257
29298
|
if (open) {
|
|
29258
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29299
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29259
29300
|
}
|
|
29260
29301
|
runtime.controller.setOpen(open);
|
|
29261
29302
|
if (previousOpen !== open) {
|
|
@@ -29304,7 +29345,7 @@ function buildVanillaController(id) {
|
|
|
29304
29345
|
return createDrawer({ id, open }).getSnapshot();
|
|
29305
29346
|
}
|
|
29306
29347
|
if (open) {
|
|
29307
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29348
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29308
29349
|
}
|
|
29309
29350
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29310
29351
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -29377,7 +29418,7 @@ function createDrawer(options = {}) {
|
|
|
29377
29418
|
}
|
|
29378
29419
|
}
|
|
29379
29420
|
if (nextOptions.open && !previousOpen) {
|
|
29380
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
29421
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
29381
29422
|
}
|
|
29382
29423
|
renderVanillaDrawer(id);
|
|
29383
29424
|
if (nextOptions.parentId && nextOptions.open) {
|