@samline/drawer 2.0.6 → 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/{components-client-CJuQ5vtW.js → components-client-B8ZDZqhE.js} +25 -16
- package/dist/{svelte/components-client-tfLTRxPH.mjs → browser/components-client-LPOAyYIW.mjs} +25 -16
- package/dist/browser/index.cjs +71 -23
- package/dist/browser/index.js +71 -23
- package/dist/browser/index.mjs +71 -23
- package/dist/{svelte/components-client-CJuQ5vtW.js → components-client-B8ZDZqhE.js} +25 -16
- package/dist/{browser/components-client-tfLTRxPH.mjs → components-client-LPOAyYIW.mjs} +25 -16
- package/dist/index.js +71 -23
- package/dist/index.mjs +71 -23
- package/dist/react/index.js +75 -25
- package/dist/react/index.mjs +75 -25
- package/dist/{components-client-CJuQ5vtW.js → svelte/components-client-B8ZDZqhE.js} +25 -16
- package/dist/{components-client-tfLTRxPH.mjs → svelte/components-client-LPOAyYIW.mjs} +25 -16
- package/dist/svelte/index.js +71 -23
- package/dist/svelte/index.mjs +71 -23
- package/dist/vue/{components-client-CJuQ5vtW.js → components-client-B8ZDZqhE.js} +25 -16
- package/dist/vue/{components-client-DSM2G8ef.mjs → components-client-BlpMZJqu.mjs} +25 -16
- package/dist/vue/index.js +71 -23
- package/dist/vue/index.mjs +71 -23
- package/package.json +1 -1
|
@@ -1528,6 +1528,27 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1528
1528
|
const drawerHeightRef = React__namespace.default.useRef(((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0);
|
|
1529
1529
|
const drawerWidthRef = React__namespace.default.useRef(((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0);
|
|
1530
1530
|
const initialDrawerHeight = React__namespace.default.useRef(0);
|
|
1531
|
+
const releaseHiddenFocusBeforeOpen = React__namespace.default.useCallback(()=>{
|
|
1532
|
+
var _drawerRef_current;
|
|
1533
|
+
if (!modal || autoFocus || typeof document === 'undefined') {
|
|
1534
|
+
return;
|
|
1535
|
+
}
|
|
1536
|
+
const activeElement = document.activeElement;
|
|
1537
|
+
if (!activeElement || activeElement === document.body) {
|
|
1538
|
+
return;
|
|
1539
|
+
}
|
|
1540
|
+
const activeElementNode = activeElement;
|
|
1541
|
+
if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
|
|
1542
|
+
return;
|
|
1543
|
+
}
|
|
1544
|
+
if (typeof activeElementNode.blur !== 'function') {
|
|
1545
|
+
return;
|
|
1546
|
+
}
|
|
1547
|
+
activeElementNode.blur();
|
|
1548
|
+
}, [
|
|
1549
|
+
autoFocus,
|
|
1550
|
+
modal
|
|
1551
|
+
]);
|
|
1531
1552
|
const onSnapPointChange = React__namespace.default.useCallback((activeSnapPointIndex)=>{
|
|
1532
1553
|
// Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
|
|
1533
1554
|
if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date();
|
|
@@ -1579,26 +1600,13 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1579
1600
|
autoFocus
|
|
1580
1601
|
});
|
|
1581
1602
|
useSafeLayoutEffect(()=>{
|
|
1582
|
-
|
|
1583
|
-
if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
|
|
1603
|
+
if (!isOpen) {
|
|
1584
1604
|
return;
|
|
1585
1605
|
}
|
|
1586
|
-
|
|
1587
|
-
if (!activeElement || activeElement === document.body) {
|
|
1588
|
-
return;
|
|
1589
|
-
}
|
|
1590
|
-
const activeElementNode = activeElement;
|
|
1591
|
-
if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
|
|
1592
|
-
return;
|
|
1593
|
-
}
|
|
1594
|
-
if (typeof activeElementNode.blur !== 'function') {
|
|
1595
|
-
return;
|
|
1596
|
-
}
|
|
1597
|
-
activeElementNode.blur();
|
|
1606
|
+
releaseHiddenFocusBeforeOpen();
|
|
1598
1607
|
}, [
|
|
1599
|
-
autoFocus,
|
|
1600
1608
|
isOpen,
|
|
1601
|
-
|
|
1609
|
+
releaseHiddenFocusBeforeOpen
|
|
1602
1610
|
]);
|
|
1603
1611
|
function getScale() {
|
|
1604
1612
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
@@ -2007,6 +2015,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
2007
2015
|
onOpenChange: (open)=>{
|
|
2008
2016
|
if (!dismissible && !open) return;
|
|
2009
2017
|
if (open) {
|
|
2018
|
+
releaseHiddenFocusBeforeOpen();
|
|
2010
2019
|
setHasBeenOpened(true);
|
|
2011
2020
|
} else {
|
|
2012
2021
|
closeDrawer(true);
|
package/dist/{svelte/components-client-tfLTRxPH.mjs → browser/components-client-LPOAyYIW.mjs}
RENAMED
|
@@ -1508,6 +1508,27 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1508
1508
|
const drawerHeightRef = React__default.useRef(((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.getBoundingClientRect().height) || 0);
|
|
1509
1509
|
const drawerWidthRef = React__default.useRef(((_drawerRef_current1 = drawerRef.current) == null ? void 0 : _drawerRef_current1.getBoundingClientRect().width) || 0);
|
|
1510
1510
|
const initialDrawerHeight = React__default.useRef(0);
|
|
1511
|
+
const releaseHiddenFocusBeforeOpen = React__default.useCallback(()=>{
|
|
1512
|
+
var _drawerRef_current;
|
|
1513
|
+
if (!modal || autoFocus || typeof document === 'undefined') {
|
|
1514
|
+
return;
|
|
1515
|
+
}
|
|
1516
|
+
const activeElement = document.activeElement;
|
|
1517
|
+
if (!activeElement || activeElement === document.body) {
|
|
1518
|
+
return;
|
|
1519
|
+
}
|
|
1520
|
+
const activeElementNode = activeElement;
|
|
1521
|
+
if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
|
|
1522
|
+
return;
|
|
1523
|
+
}
|
|
1524
|
+
if (typeof activeElementNode.blur !== 'function') {
|
|
1525
|
+
return;
|
|
1526
|
+
}
|
|
1527
|
+
activeElementNode.blur();
|
|
1528
|
+
}, [
|
|
1529
|
+
autoFocus,
|
|
1530
|
+
modal
|
|
1531
|
+
]);
|
|
1511
1532
|
const onSnapPointChange = React__default.useCallback((activeSnapPointIndex)=>{
|
|
1512
1533
|
// Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
|
|
1513
1534
|
if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date();
|
|
@@ -1559,26 +1580,13 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1559
1580
|
autoFocus
|
|
1560
1581
|
});
|
|
1561
1582
|
useSafeLayoutEffect(()=>{
|
|
1562
|
-
|
|
1563
|
-
if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
|
|
1583
|
+
if (!isOpen) {
|
|
1564
1584
|
return;
|
|
1565
1585
|
}
|
|
1566
|
-
|
|
1567
|
-
if (!activeElement || activeElement === document.body) {
|
|
1568
|
-
return;
|
|
1569
|
-
}
|
|
1570
|
-
const activeElementNode = activeElement;
|
|
1571
|
-
if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElementNode)) || (activeElementNode.closest == null ? void 0 : activeElementNode.closest.call(activeElementNode, '[data-drawer]'))) {
|
|
1572
|
-
return;
|
|
1573
|
-
}
|
|
1574
|
-
if (typeof activeElementNode.blur !== 'function') {
|
|
1575
|
-
return;
|
|
1576
|
-
}
|
|
1577
|
-
activeElementNode.blur();
|
|
1586
|
+
releaseHiddenFocusBeforeOpen();
|
|
1578
1587
|
}, [
|
|
1579
|
-
autoFocus,
|
|
1580
1588
|
isOpen,
|
|
1581
|
-
|
|
1589
|
+
releaseHiddenFocusBeforeOpen
|
|
1582
1590
|
]);
|
|
1583
1591
|
function getScale() {
|
|
1584
1592
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
@@ -1987,6 +1995,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1987
1995
|
onOpenChange: (open)=>{
|
|
1988
1996
|
if (!dismissible && !open) return;
|
|
1989
1997
|
if (open) {
|
|
1998
|
+
releaseHiddenFocusBeforeOpen();
|
|
1990
1999
|
setHasBeenOpened(true);
|
|
1991
2000
|
} else {
|
|
1992
2001
|
closeDrawer(true);
|
package/dist/browser/index.cjs
CHANGED
|
@@ -28075,6 +28075,23 @@ function Root2({
|
|
|
28075
28075
|
const drawerHeightRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
|
|
28076
28076
|
const drawerWidthRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
|
|
28077
28077
|
const initialDrawerHeight = import_react9.default.useRef(0);
|
|
28078
|
+
const releaseHiddenFocusBeforeOpen2 = import_react9.default.useCallback(() => {
|
|
28079
|
+
if (!modal || autoFocus || typeof document === "undefined") {
|
|
28080
|
+
return;
|
|
28081
|
+
}
|
|
28082
|
+
const activeElement = document.activeElement;
|
|
28083
|
+
if (!activeElement || activeElement === document.body) {
|
|
28084
|
+
return;
|
|
28085
|
+
}
|
|
28086
|
+
const activeElementNode = activeElement;
|
|
28087
|
+
if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
|
|
28088
|
+
return;
|
|
28089
|
+
}
|
|
28090
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
28091
|
+
return;
|
|
28092
|
+
}
|
|
28093
|
+
activeElementNode.blur();
|
|
28094
|
+
}, [autoFocus, modal]);
|
|
28078
28095
|
const onSnapPointChange = import_react9.default.useCallback((activeSnapPointIndex2) => {
|
|
28079
28096
|
if (snapPoints && activeSnapPointIndex2 === snapPointsOffset.length - 1) openTime.current = /* @__PURE__ */ new Date();
|
|
28080
28097
|
}, []);
|
|
@@ -28134,22 +28151,11 @@ function Root2({
|
|
|
28134
28151
|
autoFocus
|
|
28135
28152
|
});
|
|
28136
28153
|
useSafeLayoutEffect(() => {
|
|
28137
|
-
if (!isOpen
|
|
28138
|
-
return;
|
|
28139
|
-
}
|
|
28140
|
-
const activeElement = document.activeElement;
|
|
28141
|
-
if (!activeElement || activeElement === document.body) {
|
|
28154
|
+
if (!isOpen) {
|
|
28142
28155
|
return;
|
|
28143
28156
|
}
|
|
28144
|
-
|
|
28145
|
-
|
|
28146
|
-
return;
|
|
28147
|
-
}
|
|
28148
|
-
if (typeof activeElementNode.blur !== "function") {
|
|
28149
|
-
return;
|
|
28150
|
-
}
|
|
28151
|
-
activeElementNode.blur();
|
|
28152
|
-
}, [autoFocus, isOpen, modal]);
|
|
28157
|
+
releaseHiddenFocusBeforeOpen2();
|
|
28158
|
+
}, [isOpen, releaseHiddenFocusBeforeOpen2]);
|
|
28153
28159
|
function getScale() {
|
|
28154
28160
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
28155
28161
|
}
|
|
@@ -28533,6 +28539,7 @@ function Root2({
|
|
|
28533
28539
|
onOpenChange: (open) => {
|
|
28534
28540
|
if (!dismissible && !open) return;
|
|
28535
28541
|
if (open) {
|
|
28542
|
+
releaseHiddenFocusBeforeOpen2();
|
|
28536
28543
|
setHasBeenOpened(true);
|
|
28537
28544
|
} else {
|
|
28538
28545
|
closeDrawer2(true);
|
|
@@ -29126,7 +29133,7 @@ function openAncestorChain(parentId) {
|
|
|
29126
29133
|
openAncestorChain(nextParentId);
|
|
29127
29134
|
}
|
|
29128
29135
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
29129
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
29136
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
29130
29137
|
parentRuntime.controller.setOpen(true);
|
|
29131
29138
|
notifyOpenStateChange(parentRuntime, true);
|
|
29132
29139
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -29141,18 +29148,36 @@ function cleanupRuntimeTrigger(runtime) {
|
|
|
29141
29148
|
}
|
|
29142
29149
|
function bindTriggerElement(runtime) {
|
|
29143
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
|
+
}
|
|
29144
29163
|
if (!runtime.options.triggerElement) {
|
|
29164
|
+
runtime.cleanupTriggerElement = cleanups.length ? () => {
|
|
29165
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29166
|
+
} : null;
|
|
29145
29167
|
return;
|
|
29146
29168
|
}
|
|
29147
29169
|
const triggerElement = runtime.options.triggerElement;
|
|
29148
29170
|
const handleClick = () => {
|
|
29149
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29171
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29150
29172
|
runtime.controller.setOpen(true);
|
|
29151
29173
|
renderVanillaDrawer(runtime.id);
|
|
29152
29174
|
};
|
|
29153
29175
|
triggerElement.addEventListener("click", handleClick);
|
|
29154
|
-
|
|
29176
|
+
cleanups.push(() => {
|
|
29155
29177
|
triggerElement.removeEventListener("click", handleClick);
|
|
29178
|
+
});
|
|
29179
|
+
runtime.cleanupTriggerElement = () => {
|
|
29180
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29156
29181
|
};
|
|
29157
29182
|
}
|
|
29158
29183
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -29182,15 +29207,32 @@ function notifyOpenStateChange(runtime, open) {
|
|
|
29182
29207
|
function canUseDOM3() {
|
|
29183
29208
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
29184
29209
|
}
|
|
29185
|
-
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) {
|
|
29186
29221
|
if (!canUseDOM3() || options.modal === false || options.autoFocus) {
|
|
29187
29222
|
return;
|
|
29188
29223
|
}
|
|
29189
29224
|
const activeElement = document.activeElement;
|
|
29190
|
-
if (!activeElement || activeElement === document.body
|
|
29225
|
+
if (!activeElement || activeElement === document.body) {
|
|
29191
29226
|
return;
|
|
29192
29227
|
}
|
|
29193
|
-
activeElement
|
|
29228
|
+
const activeElementNode = activeElement;
|
|
29229
|
+
if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
|
|
29230
|
+
return;
|
|
29231
|
+
}
|
|
29232
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
29233
|
+
return;
|
|
29234
|
+
}
|
|
29235
|
+
activeElementNode.blur();
|
|
29194
29236
|
}
|
|
29195
29237
|
function getRuntimeDrawerElement(runtime) {
|
|
29196
29238
|
if (!runtime.element) {
|
|
@@ -29198,6 +29240,12 @@ function getRuntimeDrawerElement(runtime) {
|
|
|
29198
29240
|
}
|
|
29199
29241
|
return runtime.element.querySelector("[data-drawer]");
|
|
29200
29242
|
}
|
|
29243
|
+
function getRuntimeTriggerElement(runtime) {
|
|
29244
|
+
if (!runtime.element) {
|
|
29245
|
+
return null;
|
|
29246
|
+
}
|
|
29247
|
+
return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
|
|
29248
|
+
}
|
|
29201
29249
|
function getViewportSizeForDirection(direction) {
|
|
29202
29250
|
if (!canUseDOM3()) {
|
|
29203
29251
|
return 0;
|
|
@@ -29246,7 +29294,7 @@ function renderVanillaDrawer(id) {
|
|
|
29246
29294
|
onOpenChange: (open) => {
|
|
29247
29295
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29248
29296
|
if (open) {
|
|
29249
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29297
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29250
29298
|
}
|
|
29251
29299
|
runtime.controller.setOpen(open);
|
|
29252
29300
|
if (previousOpen !== open) {
|
|
@@ -29295,7 +29343,7 @@ function buildVanillaController(id) {
|
|
|
29295
29343
|
return createDrawer({ id, open }).getSnapshot();
|
|
29296
29344
|
}
|
|
29297
29345
|
if (open) {
|
|
29298
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29346
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29299
29347
|
}
|
|
29300
29348
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29301
29349
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -29368,7 +29416,7 @@ function createDrawer(options = {}) {
|
|
|
29368
29416
|
}
|
|
29369
29417
|
}
|
|
29370
29418
|
if (nextOptions.open && !previousOpen) {
|
|
29371
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
29419
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
29372
29420
|
}
|
|
29373
29421
|
renderVanillaDrawer(id);
|
|
29374
29422
|
if (nextOptions.parentId && nextOptions.open) {
|
package/dist/browser/index.js
CHANGED
|
@@ -28075,6 +28075,23 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
28075
28075
|
const drawerHeightRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
|
|
28076
28076
|
const drawerWidthRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
|
|
28077
28077
|
const initialDrawerHeight = import_react9.default.useRef(0);
|
|
28078
|
+
const releaseHiddenFocusBeforeOpen2 = import_react9.default.useCallback(() => {
|
|
28079
|
+
if (!modal || autoFocus || typeof document === "undefined") {
|
|
28080
|
+
return;
|
|
28081
|
+
}
|
|
28082
|
+
const activeElement = document.activeElement;
|
|
28083
|
+
if (!activeElement || activeElement === document.body) {
|
|
28084
|
+
return;
|
|
28085
|
+
}
|
|
28086
|
+
const activeElementNode = activeElement;
|
|
28087
|
+
if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
|
|
28088
|
+
return;
|
|
28089
|
+
}
|
|
28090
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
28091
|
+
return;
|
|
28092
|
+
}
|
|
28093
|
+
activeElementNode.blur();
|
|
28094
|
+
}, [autoFocus, modal]);
|
|
28078
28095
|
const onSnapPointChange = import_react9.default.useCallback((activeSnapPointIndex2) => {
|
|
28079
28096
|
if (snapPoints && activeSnapPointIndex2 === snapPointsOffset.length - 1) openTime.current = /* @__PURE__ */ new Date();
|
|
28080
28097
|
}, []);
|
|
@@ -28134,22 +28151,11 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
28134
28151
|
autoFocus
|
|
28135
28152
|
});
|
|
28136
28153
|
useSafeLayoutEffect(() => {
|
|
28137
|
-
if (!isOpen
|
|
28138
|
-
return;
|
|
28139
|
-
}
|
|
28140
|
-
const activeElement = document.activeElement;
|
|
28141
|
-
if (!activeElement || activeElement === document.body) {
|
|
28154
|
+
if (!isOpen) {
|
|
28142
28155
|
return;
|
|
28143
28156
|
}
|
|
28144
|
-
|
|
28145
|
-
|
|
28146
|
-
return;
|
|
28147
|
-
}
|
|
28148
|
-
if (typeof activeElementNode.blur !== "function") {
|
|
28149
|
-
return;
|
|
28150
|
-
}
|
|
28151
|
-
activeElementNode.blur();
|
|
28152
|
-
}, [autoFocus, isOpen, modal]);
|
|
28157
|
+
releaseHiddenFocusBeforeOpen2();
|
|
28158
|
+
}, [isOpen, releaseHiddenFocusBeforeOpen2]);
|
|
28153
28159
|
function getScale() {
|
|
28154
28160
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
28155
28161
|
}
|
|
@@ -28533,6 +28539,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
28533
28539
|
onOpenChange: (open) => {
|
|
28534
28540
|
if (!dismissible && !open) return;
|
|
28535
28541
|
if (open) {
|
|
28542
|
+
releaseHiddenFocusBeforeOpen2();
|
|
28536
28543
|
setHasBeenOpened(true);
|
|
28537
28544
|
} else {
|
|
28538
28545
|
closeDrawer2(true);
|
|
@@ -29126,7 +29133,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29126
29133
|
openAncestorChain(nextParentId);
|
|
29127
29134
|
}
|
|
29128
29135
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
29129
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
29136
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
29130
29137
|
parentRuntime.controller.setOpen(true);
|
|
29131
29138
|
notifyOpenStateChange(parentRuntime, true);
|
|
29132
29139
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -29141,18 +29148,36 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29141
29148
|
}
|
|
29142
29149
|
function bindTriggerElement(runtime) {
|
|
29143
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
|
+
}
|
|
29144
29163
|
if (!runtime.options.triggerElement) {
|
|
29164
|
+
runtime.cleanupTriggerElement = cleanups.length ? () => {
|
|
29165
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29166
|
+
} : null;
|
|
29145
29167
|
return;
|
|
29146
29168
|
}
|
|
29147
29169
|
const triggerElement = runtime.options.triggerElement;
|
|
29148
29170
|
const handleClick = () => {
|
|
29149
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29171
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29150
29172
|
runtime.controller.setOpen(true);
|
|
29151
29173
|
renderVanillaDrawer(runtime.id);
|
|
29152
29174
|
};
|
|
29153
29175
|
triggerElement.addEventListener("click", handleClick);
|
|
29154
|
-
|
|
29176
|
+
cleanups.push(() => {
|
|
29155
29177
|
triggerElement.removeEventListener("click", handleClick);
|
|
29178
|
+
});
|
|
29179
|
+
runtime.cleanupTriggerElement = () => {
|
|
29180
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29156
29181
|
};
|
|
29157
29182
|
}
|
|
29158
29183
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -29182,15 +29207,32 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29182
29207
|
function canUseDOM3() {
|
|
29183
29208
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
29184
29209
|
}
|
|
29185
|
-
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) {
|
|
29186
29221
|
if (!canUseDOM3() || options.modal === false || options.autoFocus) {
|
|
29187
29222
|
return;
|
|
29188
29223
|
}
|
|
29189
29224
|
const activeElement = document.activeElement;
|
|
29190
|
-
if (!activeElement || activeElement === document.body
|
|
29225
|
+
if (!activeElement || activeElement === document.body) {
|
|
29191
29226
|
return;
|
|
29192
29227
|
}
|
|
29193
|
-
activeElement
|
|
29228
|
+
const activeElementNode = activeElement;
|
|
29229
|
+
if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
|
|
29230
|
+
return;
|
|
29231
|
+
}
|
|
29232
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
29233
|
+
return;
|
|
29234
|
+
}
|
|
29235
|
+
activeElementNode.blur();
|
|
29194
29236
|
}
|
|
29195
29237
|
function getRuntimeDrawerElement(runtime) {
|
|
29196
29238
|
if (!runtime.element) {
|
|
@@ -29198,6 +29240,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29198
29240
|
}
|
|
29199
29241
|
return runtime.element.querySelector("[data-drawer]");
|
|
29200
29242
|
}
|
|
29243
|
+
function getRuntimeTriggerElement(runtime) {
|
|
29244
|
+
if (!runtime.element) {
|
|
29245
|
+
return null;
|
|
29246
|
+
}
|
|
29247
|
+
return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
|
|
29248
|
+
}
|
|
29201
29249
|
function getViewportSizeForDirection(direction) {
|
|
29202
29250
|
if (!canUseDOM3()) {
|
|
29203
29251
|
return 0;
|
|
@@ -29246,7 +29294,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29246
29294
|
onOpenChange: (open) => {
|
|
29247
29295
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29248
29296
|
if (open) {
|
|
29249
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29297
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29250
29298
|
}
|
|
29251
29299
|
runtime.controller.setOpen(open);
|
|
29252
29300
|
if (previousOpen !== open) {
|
|
@@ -29295,7 +29343,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29295
29343
|
return createDrawer({ id, open }).getSnapshot();
|
|
29296
29344
|
}
|
|
29297
29345
|
if (open) {
|
|
29298
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29346
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29299
29347
|
}
|
|
29300
29348
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29301
29349
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -29368,7 +29416,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
29368
29416
|
}
|
|
29369
29417
|
}
|
|
29370
29418
|
if (nextOptions.open && !previousOpen) {
|
|
29371
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
29419
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
29372
29420
|
}
|
|
29373
29421
|
renderVanillaDrawer(id);
|
|
29374
29422
|
if (nextOptions.parentId && nextOptions.open) {
|
package/dist/browser/index.mjs
CHANGED
|
@@ -28049,6 +28049,23 @@ function Root2({
|
|
|
28049
28049
|
const drawerHeightRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
|
|
28050
28050
|
const drawerWidthRef = import_react9.default.useRef(drawerRef.current?.getBoundingClientRect().width || 0);
|
|
28051
28051
|
const initialDrawerHeight = import_react9.default.useRef(0);
|
|
28052
|
+
const releaseHiddenFocusBeforeOpen2 = import_react9.default.useCallback(() => {
|
|
28053
|
+
if (!modal || autoFocus || typeof document === "undefined") {
|
|
28054
|
+
return;
|
|
28055
|
+
}
|
|
28056
|
+
const activeElement = document.activeElement;
|
|
28057
|
+
if (!activeElement || activeElement === document.body) {
|
|
28058
|
+
return;
|
|
28059
|
+
}
|
|
28060
|
+
const activeElementNode = activeElement;
|
|
28061
|
+
if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
|
|
28062
|
+
return;
|
|
28063
|
+
}
|
|
28064
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
28065
|
+
return;
|
|
28066
|
+
}
|
|
28067
|
+
activeElementNode.blur();
|
|
28068
|
+
}, [autoFocus, modal]);
|
|
28052
28069
|
const onSnapPointChange = import_react9.default.useCallback((activeSnapPointIndex2) => {
|
|
28053
28070
|
if (snapPoints && activeSnapPointIndex2 === snapPointsOffset.length - 1) openTime.current = /* @__PURE__ */ new Date();
|
|
28054
28071
|
}, []);
|
|
@@ -28108,22 +28125,11 @@ function Root2({
|
|
|
28108
28125
|
autoFocus
|
|
28109
28126
|
});
|
|
28110
28127
|
useSafeLayoutEffect(() => {
|
|
28111
|
-
if (!isOpen
|
|
28112
|
-
return;
|
|
28113
|
-
}
|
|
28114
|
-
const activeElement = document.activeElement;
|
|
28115
|
-
if (!activeElement || activeElement === document.body) {
|
|
28128
|
+
if (!isOpen) {
|
|
28116
28129
|
return;
|
|
28117
28130
|
}
|
|
28118
|
-
|
|
28119
|
-
|
|
28120
|
-
return;
|
|
28121
|
-
}
|
|
28122
|
-
if (typeof activeElementNode.blur !== "function") {
|
|
28123
|
-
return;
|
|
28124
|
-
}
|
|
28125
|
-
activeElementNode.blur();
|
|
28126
|
-
}, [autoFocus, isOpen, modal]);
|
|
28131
|
+
releaseHiddenFocusBeforeOpen2();
|
|
28132
|
+
}, [isOpen, releaseHiddenFocusBeforeOpen2]);
|
|
28127
28133
|
function getScale() {
|
|
28128
28134
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
28129
28135
|
}
|
|
@@ -28507,6 +28513,7 @@ function Root2({
|
|
|
28507
28513
|
onOpenChange: (open) => {
|
|
28508
28514
|
if (!dismissible && !open) return;
|
|
28509
28515
|
if (open) {
|
|
28516
|
+
releaseHiddenFocusBeforeOpen2();
|
|
28510
28517
|
setHasBeenOpened(true);
|
|
28511
28518
|
} else {
|
|
28512
28519
|
closeDrawer2(true);
|
|
@@ -29100,7 +29107,7 @@ function openAncestorChain(parentId) {
|
|
|
29100
29107
|
openAncestorChain(nextParentId);
|
|
29101
29108
|
}
|
|
29102
29109
|
if (!parentRuntime.controller.getSnapshot().state.isOpen) {
|
|
29103
|
-
releaseHiddenFocusBeforeOpen(parentRuntime.options);
|
|
29110
|
+
releaseHiddenFocusBeforeOpen(parentRuntime.options, getRuntimeDrawerElement(parentRuntime));
|
|
29104
29111
|
parentRuntime.controller.setOpen(true);
|
|
29105
29112
|
notifyOpenStateChange(parentRuntime, true);
|
|
29106
29113
|
renderVanillaDrawer(parentRuntime.id);
|
|
@@ -29115,18 +29122,36 @@ function cleanupRuntimeTrigger(runtime) {
|
|
|
29115
29122
|
}
|
|
29116
29123
|
function bindTriggerElement(runtime) {
|
|
29117
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
|
+
}
|
|
29118
29137
|
if (!runtime.options.triggerElement) {
|
|
29138
|
+
runtime.cleanupTriggerElement = cleanups.length ? () => {
|
|
29139
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29140
|
+
} : null;
|
|
29119
29141
|
return;
|
|
29120
29142
|
}
|
|
29121
29143
|
const triggerElement = runtime.options.triggerElement;
|
|
29122
29144
|
const handleClick = () => {
|
|
29123
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29145
|
+
releaseHiddenFocusBeforeOpen(runtime.options, drawerElement);
|
|
29124
29146
|
runtime.controller.setOpen(true);
|
|
29125
29147
|
renderVanillaDrawer(runtime.id);
|
|
29126
29148
|
};
|
|
29127
29149
|
triggerElement.addEventListener("click", handleClick);
|
|
29128
|
-
|
|
29150
|
+
cleanups.push(() => {
|
|
29129
29151
|
triggerElement.removeEventListener("click", handleClick);
|
|
29152
|
+
});
|
|
29153
|
+
runtime.cleanupTriggerElement = () => {
|
|
29154
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
29130
29155
|
};
|
|
29131
29156
|
}
|
|
29132
29157
|
function notifyOpenStateChange(runtime, open) {
|
|
@@ -29156,15 +29181,32 @@ function notifyOpenStateChange(runtime, open) {
|
|
|
29156
29181
|
function canUseDOM3() {
|
|
29157
29182
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
29158
29183
|
}
|
|
29159
|
-
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) {
|
|
29160
29195
|
if (!canUseDOM3() || options.modal === false || options.autoFocus) {
|
|
29161
29196
|
return;
|
|
29162
29197
|
}
|
|
29163
29198
|
const activeElement = document.activeElement;
|
|
29164
|
-
if (!activeElement || activeElement === document.body
|
|
29199
|
+
if (!activeElement || activeElement === document.body) {
|
|
29165
29200
|
return;
|
|
29166
29201
|
}
|
|
29167
|
-
activeElement
|
|
29202
|
+
const activeElementNode = activeElement;
|
|
29203
|
+
if (drawerElement?.contains(activeElementNode) || isElementInsideDrawer(activeElementNode)) {
|
|
29204
|
+
return;
|
|
29205
|
+
}
|
|
29206
|
+
if (typeof activeElementNode.blur !== "function") {
|
|
29207
|
+
return;
|
|
29208
|
+
}
|
|
29209
|
+
activeElementNode.blur();
|
|
29168
29210
|
}
|
|
29169
29211
|
function getRuntimeDrawerElement(runtime) {
|
|
29170
29212
|
if (!runtime.element) {
|
|
@@ -29172,6 +29214,12 @@ function getRuntimeDrawerElement(runtime) {
|
|
|
29172
29214
|
}
|
|
29173
29215
|
return runtime.element.querySelector("[data-drawer]");
|
|
29174
29216
|
}
|
|
29217
|
+
function getRuntimeTriggerElement(runtime) {
|
|
29218
|
+
if (!runtime.element) {
|
|
29219
|
+
return null;
|
|
29220
|
+
}
|
|
29221
|
+
return runtime.element.querySelector("[data-drawer-vanilla-trigger]");
|
|
29222
|
+
}
|
|
29175
29223
|
function getViewportSizeForDirection(direction) {
|
|
29176
29224
|
if (!canUseDOM3()) {
|
|
29177
29225
|
return 0;
|
|
@@ -29220,7 +29268,7 @@ function renderVanillaDrawer(id) {
|
|
|
29220
29268
|
onOpenChange: (open) => {
|
|
29221
29269
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29222
29270
|
if (open) {
|
|
29223
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29271
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29224
29272
|
}
|
|
29225
29273
|
runtime.controller.setOpen(open);
|
|
29226
29274
|
if (previousOpen !== open) {
|
|
@@ -29269,7 +29317,7 @@ function buildVanillaController(id) {
|
|
|
29269
29317
|
return createDrawer({ id, open }).getSnapshot();
|
|
29270
29318
|
}
|
|
29271
29319
|
if (open) {
|
|
29272
|
-
releaseHiddenFocusBeforeOpen(runtime.options);
|
|
29320
|
+
releaseHiddenFocusBeforeOpen(runtime.options, getRuntimeDrawerElement(runtime));
|
|
29273
29321
|
}
|
|
29274
29322
|
const previousOpen = runtime.controller.getSnapshot().state.isOpen;
|
|
29275
29323
|
const snapshot = runtime.controller.setOpen(open);
|
|
@@ -29342,7 +29390,7 @@ function createDrawer(options = {}) {
|
|
|
29342
29390
|
}
|
|
29343
29391
|
}
|
|
29344
29392
|
if (nextOptions.open && !previousOpen) {
|
|
29345
|
-
releaseHiddenFocusBeforeOpen(nextOptions);
|
|
29393
|
+
releaseHiddenFocusBeforeOpen(nextOptions, existing ? getRuntimeDrawerElement(existing) : null);
|
|
29346
29394
|
}
|
|
29347
29395
|
renderVanillaDrawer(id);
|
|
29348
29396
|
if (nextOptions.parentId && nextOptions.open) {
|