@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.
@@ -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
- var _drawerRef_current;
1583
- if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
1603
+ if (!isOpen) {
1584
1604
  return;
1585
1605
  }
1586
- const activeElement = document.activeElement;
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
- modal
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);
@@ -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
- var _drawerRef_current;
1563
- if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
1583
+ if (!isOpen) {
1564
1584
  return;
1565
1585
  }
1566
- const activeElement = document.activeElement;
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
- modal
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);
@@ -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 || !modal || autoFocus || typeof document === "undefined") {
28138
- return;
28139
- }
28140
- const activeElement = document.activeElement;
28141
- if (!activeElement || activeElement === document.body) {
28154
+ if (!isOpen) {
28142
28155
  return;
28143
28156
  }
28144
- const activeElementNode = activeElement;
28145
- if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
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
- runtime.cleanupTriggerElement = () => {
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 releaseHiddenFocusBeforeOpen(options) {
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 || typeof activeElement.blur !== "function") {
29225
+ if (!activeElement || activeElement === document.body) {
29191
29226
  return;
29192
29227
  }
29193
- activeElement.blur();
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) {
@@ -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 || !modal || autoFocus || typeof document === "undefined") {
28138
- return;
28139
- }
28140
- const activeElement = document.activeElement;
28141
- if (!activeElement || activeElement === document.body) {
28154
+ if (!isOpen) {
28142
28155
  return;
28143
28156
  }
28144
- const activeElementNode = activeElement;
28145
- if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
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
- runtime.cleanupTriggerElement = () => {
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 releaseHiddenFocusBeforeOpen(options) {
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 || typeof activeElement.blur !== "function") {
29225
+ if (!activeElement || activeElement === document.body) {
29191
29226
  return;
29192
29227
  }
29193
- activeElement.blur();
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) {
@@ -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 || !modal || autoFocus || typeof document === "undefined") {
28112
- return;
28113
- }
28114
- const activeElement = document.activeElement;
28115
- if (!activeElement || activeElement === document.body) {
28128
+ if (!isOpen) {
28116
28129
  return;
28117
28130
  }
28118
- const activeElementNode = activeElement;
28119
- if (drawerRef.current?.contains(activeElementNode) || activeElementNode.closest?.("[data-drawer]")) {
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
- runtime.cleanupTriggerElement = () => {
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 releaseHiddenFocusBeforeOpen(options) {
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 || typeof activeElement.blur !== "function") {
29199
+ if (!activeElement || activeElement === document.body) {
29165
29200
  return;
29166
29201
  }
29167
- activeElement.blur();
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) {