@samline/drawer 2.0.0 → 2.0.1
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-BC8MrVsa.mjs → components-client-CZSt5H60.mjs} +45 -15
- package/dist/{svelte/components-client-BHUFVfXB.js → browser/components-client-DXeaMmfk.js} +45 -15
- package/dist/browser/index.cjs +41 -13
- package/dist/browser/index.js +41 -13
- package/dist/browser/index.mjs +41 -13
- package/dist/{svelte/components-client-BC8MrVsa.mjs → components-client-CZSt5H60.mjs} +45 -15
- package/dist/{browser/components-client-BHUFVfXB.js → components-client-DXeaMmfk.js} +45 -15
- package/dist/index.js +41 -13
- package/dist/index.mjs +41 -13
- package/dist/react/index.js +45 -15
- package/dist/react/index.mjs +45 -15
- package/dist/{components-client-BC8MrVsa.mjs → svelte/components-client-CZSt5H60.mjs} +45 -15
- package/dist/{vue/components-client-BHUFVfXB.js → svelte/components-client-DXeaMmfk.js} +45 -15
- package/dist/svelte/index.js +41 -13
- package/dist/svelte/index.mjs +41 -13
- package/dist/{components-client-BHUFVfXB.js → vue/components-client-DXeaMmfk.js} +45 -15
- package/dist/vue/{components-client-rq_o2zwK.mjs → components-client-DZfql3-W.mjs} +45 -15
- package/dist/vue/index.js +41 -13
- package/dist/vue/index.mjs +41 -13
- package/package.json +1 -1
|
@@ -1311,6 +1311,30 @@ function getNextHandleState({ isDragging, preventCycle, shouldCancelInteraction,
|
|
|
1311
1311
|
};
|
|
1312
1312
|
}
|
|
1313
1313
|
|
|
1314
|
+
function isElementLike(target) {
|
|
1315
|
+
const element = target;
|
|
1316
|
+
return Boolean(element && typeof element.getAttribute === 'function' && typeof element.hasAttribute === 'function' && typeof element.closest === 'function');
|
|
1317
|
+
}
|
|
1318
|
+
function getDragTargetMetadata(target) {
|
|
1319
|
+
var _ref;
|
|
1320
|
+
const targetElement = isElementLike(target) ? target : null;
|
|
1321
|
+
const ancestors = [];
|
|
1322
|
+
let element = targetElement;
|
|
1323
|
+
while(element){
|
|
1324
|
+
ancestors.push({
|
|
1325
|
+
scrollHeight: element.scrollHeight,
|
|
1326
|
+
clientHeight: element.clientHeight,
|
|
1327
|
+
scrollTop: element.scrollTop,
|
|
1328
|
+
role: element.getAttribute('role')
|
|
1329
|
+
});
|
|
1330
|
+
element = element.parentElement;
|
|
1331
|
+
}
|
|
1332
|
+
return {
|
|
1333
|
+
targetTagName: (_ref = targetElement == null ? void 0 : targetElement.tagName) != null ? _ref : '',
|
|
1334
|
+
hasNoDragAttribute: (targetElement == null ? void 0 : targetElement.hasAttribute('data-drawer-no-drag')) || Boolean(targetElement == null ? void 0 : targetElement.closest('[data-drawer-no-drag]')),
|
|
1335
|
+
ancestors
|
|
1336
|
+
};
|
|
1337
|
+
}
|
|
1314
1338
|
function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeSinceOpenMs, swipeAmount, hasHighlightedText, timeSinceLastPreventedMs, scrollLockTimeout, isDraggingInDirection, ancestors }) {
|
|
1315
1339
|
if (targetTagName === 'SELECT' || hasNoDragAttribute) {
|
|
1316
1340
|
return {
|
|
@@ -1473,6 +1497,24 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1473
1497
|
noBodyStyles,
|
|
1474
1498
|
autoFocus
|
|
1475
1499
|
});
|
|
1500
|
+
React__default.useEffect(()=>{
|
|
1501
|
+
var _drawerRef_current;
|
|
1502
|
+
if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
|
|
1503
|
+
return;
|
|
1504
|
+
}
|
|
1505
|
+
const activeElement = document.activeElement;
|
|
1506
|
+
if (!(activeElement instanceof HTMLElement)) {
|
|
1507
|
+
return;
|
|
1508
|
+
}
|
|
1509
|
+
if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
|
|
1510
|
+
return;
|
|
1511
|
+
}
|
|
1512
|
+
activeElement.blur();
|
|
1513
|
+
}, [
|
|
1514
|
+
autoFocus,
|
|
1515
|
+
isOpen,
|
|
1516
|
+
modal
|
|
1517
|
+
]);
|
|
1476
1518
|
function getScale() {
|
|
1477
1519
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
1478
1520
|
}
|
|
@@ -1496,24 +1538,12 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1496
1538
|
}
|
|
1497
1539
|
function shouldDrag(el, isDraggingInDirection) {
|
|
1498
1540
|
var _window_getSelection;
|
|
1499
|
-
let element = el;
|
|
1500
1541
|
const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
|
|
1501
1542
|
const date = new Date();
|
|
1502
|
-
const ancestors =
|
|
1503
|
-
// Keep climbing up the DOM tree as long as there's a parent
|
|
1504
|
-
while(element){
|
|
1505
|
-
ancestors.push({
|
|
1506
|
-
scrollHeight: element.scrollHeight,
|
|
1507
|
-
clientHeight: element.clientHeight,
|
|
1508
|
-
scrollTop: element.scrollTop,
|
|
1509
|
-
role: element.getAttribute('role')
|
|
1510
|
-
});
|
|
1511
|
-
// Move up to the parent element
|
|
1512
|
-
element = element.parentNode;
|
|
1513
|
-
}
|
|
1543
|
+
const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
|
|
1514
1544
|
const result = getDragPermission({
|
|
1515
|
-
targetTagName
|
|
1516
|
-
hasNoDragAttribute
|
|
1545
|
+
targetTagName,
|
|
1546
|
+
hasNoDragAttribute,
|
|
1517
1547
|
direction,
|
|
1518
1548
|
timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
|
|
1519
1549
|
swipeAmount,
|
|
@@ -1331,6 +1331,30 @@ function getNextHandleState({ isDragging, preventCycle, shouldCancelInteraction,
|
|
|
1331
1331
|
};
|
|
1332
1332
|
}
|
|
1333
1333
|
|
|
1334
|
+
function isElementLike(target) {
|
|
1335
|
+
const element = target;
|
|
1336
|
+
return Boolean(element && typeof element.getAttribute === 'function' && typeof element.hasAttribute === 'function' && typeof element.closest === 'function');
|
|
1337
|
+
}
|
|
1338
|
+
function getDragTargetMetadata(target) {
|
|
1339
|
+
var _ref;
|
|
1340
|
+
const targetElement = isElementLike(target) ? target : null;
|
|
1341
|
+
const ancestors = [];
|
|
1342
|
+
let element = targetElement;
|
|
1343
|
+
while(element){
|
|
1344
|
+
ancestors.push({
|
|
1345
|
+
scrollHeight: element.scrollHeight,
|
|
1346
|
+
clientHeight: element.clientHeight,
|
|
1347
|
+
scrollTop: element.scrollTop,
|
|
1348
|
+
role: element.getAttribute('role')
|
|
1349
|
+
});
|
|
1350
|
+
element = element.parentElement;
|
|
1351
|
+
}
|
|
1352
|
+
return {
|
|
1353
|
+
targetTagName: (_ref = targetElement == null ? void 0 : targetElement.tagName) != null ? _ref : '',
|
|
1354
|
+
hasNoDragAttribute: (targetElement == null ? void 0 : targetElement.hasAttribute('data-drawer-no-drag')) || Boolean(targetElement == null ? void 0 : targetElement.closest('[data-drawer-no-drag]')),
|
|
1355
|
+
ancestors
|
|
1356
|
+
};
|
|
1357
|
+
}
|
|
1334
1358
|
function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeSinceOpenMs, swipeAmount, hasHighlightedText, timeSinceLastPreventedMs, scrollLockTimeout, isDraggingInDirection, ancestors }) {
|
|
1335
1359
|
if (targetTagName === 'SELECT' || hasNoDragAttribute) {
|
|
1336
1360
|
return {
|
|
@@ -1493,6 +1517,24 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1493
1517
|
noBodyStyles,
|
|
1494
1518
|
autoFocus
|
|
1495
1519
|
});
|
|
1520
|
+
React__namespace.default.useEffect(()=>{
|
|
1521
|
+
var _drawerRef_current;
|
|
1522
|
+
if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
|
|
1523
|
+
return;
|
|
1524
|
+
}
|
|
1525
|
+
const activeElement = document.activeElement;
|
|
1526
|
+
if (!(activeElement instanceof HTMLElement)) {
|
|
1527
|
+
return;
|
|
1528
|
+
}
|
|
1529
|
+
if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
|
|
1530
|
+
return;
|
|
1531
|
+
}
|
|
1532
|
+
activeElement.blur();
|
|
1533
|
+
}, [
|
|
1534
|
+
autoFocus,
|
|
1535
|
+
isOpen,
|
|
1536
|
+
modal
|
|
1537
|
+
]);
|
|
1496
1538
|
function getScale() {
|
|
1497
1539
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
1498
1540
|
}
|
|
@@ -1516,24 +1558,12 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1516
1558
|
}
|
|
1517
1559
|
function shouldDrag(el, isDraggingInDirection) {
|
|
1518
1560
|
var _window_getSelection;
|
|
1519
|
-
let element = el;
|
|
1520
1561
|
const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
|
|
1521
1562
|
const date = new Date();
|
|
1522
|
-
const ancestors =
|
|
1523
|
-
// Keep climbing up the DOM tree as long as there's a parent
|
|
1524
|
-
while(element){
|
|
1525
|
-
ancestors.push({
|
|
1526
|
-
scrollHeight: element.scrollHeight,
|
|
1527
|
-
clientHeight: element.clientHeight,
|
|
1528
|
-
scrollTop: element.scrollTop,
|
|
1529
|
-
role: element.getAttribute('role')
|
|
1530
|
-
});
|
|
1531
|
-
// Move up to the parent element
|
|
1532
|
-
element = element.parentNode;
|
|
1533
|
-
}
|
|
1563
|
+
const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
|
|
1534
1564
|
const result = getDragPermission({
|
|
1535
|
-
targetTagName
|
|
1536
|
-
hasNoDragAttribute
|
|
1565
|
+
targetTagName,
|
|
1566
|
+
hasNoDragAttribute,
|
|
1537
1567
|
direction,
|
|
1538
1568
|
timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
|
|
1539
1569
|
swipeAmount,
|
package/dist/browser/index.cjs
CHANGED
|
@@ -27869,6 +27869,31 @@ function getNextHandleState({
|
|
|
27869
27869
|
}
|
|
27870
27870
|
|
|
27871
27871
|
// src/runtime/drag-policy.ts
|
|
27872
|
+
function isElementLike(target) {
|
|
27873
|
+
const element = target;
|
|
27874
|
+
return Boolean(
|
|
27875
|
+
element && typeof element.getAttribute === "function" && typeof element.hasAttribute === "function" && typeof element.closest === "function"
|
|
27876
|
+
);
|
|
27877
|
+
}
|
|
27878
|
+
function getDragTargetMetadata(target) {
|
|
27879
|
+
const targetElement = isElementLike(target) ? target : null;
|
|
27880
|
+
const ancestors = [];
|
|
27881
|
+
let element = targetElement;
|
|
27882
|
+
while (element) {
|
|
27883
|
+
ancestors.push({
|
|
27884
|
+
scrollHeight: element.scrollHeight,
|
|
27885
|
+
clientHeight: element.clientHeight,
|
|
27886
|
+
scrollTop: element.scrollTop,
|
|
27887
|
+
role: element.getAttribute("role")
|
|
27888
|
+
});
|
|
27889
|
+
element = element.parentElement;
|
|
27890
|
+
}
|
|
27891
|
+
return {
|
|
27892
|
+
targetTagName: targetElement?.tagName ?? "",
|
|
27893
|
+
hasNoDragAttribute: targetElement?.hasAttribute("data-drawer-no-drag") || Boolean(targetElement?.closest("[data-drawer-no-drag]")),
|
|
27894
|
+
ancestors
|
|
27895
|
+
};
|
|
27896
|
+
}
|
|
27872
27897
|
function getDragPermission({
|
|
27873
27898
|
targetTagName,
|
|
27874
27899
|
hasNoDragAttribute,
|
|
@@ -28049,6 +28074,19 @@ function Root2({
|
|
|
28049
28074
|
noBodyStyles,
|
|
28050
28075
|
autoFocus
|
|
28051
28076
|
});
|
|
28077
|
+
import_react9.default.useEffect(() => {
|
|
28078
|
+
if (!isOpen || !modal || autoFocus || typeof document === "undefined") {
|
|
28079
|
+
return;
|
|
28080
|
+
}
|
|
28081
|
+
const activeElement = document.activeElement;
|
|
28082
|
+
if (!(activeElement instanceof HTMLElement)) {
|
|
28083
|
+
return;
|
|
28084
|
+
}
|
|
28085
|
+
if (drawerRef.current?.contains(activeElement) || activeElement.closest("[data-drawer]")) {
|
|
28086
|
+
return;
|
|
28087
|
+
}
|
|
28088
|
+
activeElement.blur();
|
|
28089
|
+
}, [autoFocus, isOpen, modal]);
|
|
28052
28090
|
function getScale() {
|
|
28053
28091
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
28054
28092
|
}
|
|
@@ -28066,22 +28104,12 @@ function Root2({
|
|
|
28066
28104
|
pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
|
|
28067
28105
|
}
|
|
28068
28106
|
function shouldDrag(el, isDraggingInDirection) {
|
|
28069
|
-
let element = el;
|
|
28070
28107
|
const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
|
|
28071
28108
|
const date = /* @__PURE__ */ new Date();
|
|
28072
|
-
const ancestors =
|
|
28073
|
-
while (element) {
|
|
28074
|
-
ancestors.push({
|
|
28075
|
-
scrollHeight: element.scrollHeight,
|
|
28076
|
-
clientHeight: element.clientHeight,
|
|
28077
|
-
scrollTop: element.scrollTop,
|
|
28078
|
-
role: element.getAttribute("role")
|
|
28079
|
-
});
|
|
28080
|
-
element = element.parentNode;
|
|
28081
|
-
}
|
|
28109
|
+
const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
|
|
28082
28110
|
const result = getDragPermission({
|
|
28083
|
-
targetTagName
|
|
28084
|
-
hasNoDragAttribute
|
|
28111
|
+
targetTagName,
|
|
28112
|
+
hasNoDragAttribute,
|
|
28085
28113
|
direction,
|
|
28086
28114
|
timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
|
|
28087
28115
|
swipeAmount,
|
package/dist/browser/index.js
CHANGED
|
@@ -27869,6 +27869,31 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
27869
27869
|
}
|
|
27870
27870
|
|
|
27871
27871
|
// src/runtime/drag-policy.ts
|
|
27872
|
+
function isElementLike(target) {
|
|
27873
|
+
const element = target;
|
|
27874
|
+
return Boolean(
|
|
27875
|
+
element && typeof element.getAttribute === "function" && typeof element.hasAttribute === "function" && typeof element.closest === "function"
|
|
27876
|
+
);
|
|
27877
|
+
}
|
|
27878
|
+
function getDragTargetMetadata(target) {
|
|
27879
|
+
const targetElement = isElementLike(target) ? target : null;
|
|
27880
|
+
const ancestors = [];
|
|
27881
|
+
let element = targetElement;
|
|
27882
|
+
while (element) {
|
|
27883
|
+
ancestors.push({
|
|
27884
|
+
scrollHeight: element.scrollHeight,
|
|
27885
|
+
clientHeight: element.clientHeight,
|
|
27886
|
+
scrollTop: element.scrollTop,
|
|
27887
|
+
role: element.getAttribute("role")
|
|
27888
|
+
});
|
|
27889
|
+
element = element.parentElement;
|
|
27890
|
+
}
|
|
27891
|
+
return {
|
|
27892
|
+
targetTagName: targetElement?.tagName ?? "",
|
|
27893
|
+
hasNoDragAttribute: targetElement?.hasAttribute("data-drawer-no-drag") || Boolean(targetElement?.closest("[data-drawer-no-drag]")),
|
|
27894
|
+
ancestors
|
|
27895
|
+
};
|
|
27896
|
+
}
|
|
27872
27897
|
function getDragPermission({
|
|
27873
27898
|
targetTagName,
|
|
27874
27899
|
hasNoDragAttribute,
|
|
@@ -28049,6 +28074,19 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
28049
28074
|
noBodyStyles,
|
|
28050
28075
|
autoFocus
|
|
28051
28076
|
});
|
|
28077
|
+
import_react9.default.useEffect(() => {
|
|
28078
|
+
if (!isOpen || !modal || autoFocus || typeof document === "undefined") {
|
|
28079
|
+
return;
|
|
28080
|
+
}
|
|
28081
|
+
const activeElement = document.activeElement;
|
|
28082
|
+
if (!(activeElement instanceof HTMLElement)) {
|
|
28083
|
+
return;
|
|
28084
|
+
}
|
|
28085
|
+
if (drawerRef.current?.contains(activeElement) || activeElement.closest("[data-drawer]")) {
|
|
28086
|
+
return;
|
|
28087
|
+
}
|
|
28088
|
+
activeElement.blur();
|
|
28089
|
+
}, [autoFocus, isOpen, modal]);
|
|
28052
28090
|
function getScale() {
|
|
28053
28091
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
28054
28092
|
}
|
|
@@ -28066,22 +28104,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
28066
28104
|
pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
|
|
28067
28105
|
}
|
|
28068
28106
|
function shouldDrag(el, isDraggingInDirection) {
|
|
28069
|
-
let element = el;
|
|
28070
28107
|
const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
|
|
28071
28108
|
const date = /* @__PURE__ */ new Date();
|
|
28072
|
-
const ancestors =
|
|
28073
|
-
while (element) {
|
|
28074
|
-
ancestors.push({
|
|
28075
|
-
scrollHeight: element.scrollHeight,
|
|
28076
|
-
clientHeight: element.clientHeight,
|
|
28077
|
-
scrollTop: element.scrollTop,
|
|
28078
|
-
role: element.getAttribute("role")
|
|
28079
|
-
});
|
|
28080
|
-
element = element.parentNode;
|
|
28081
|
-
}
|
|
28109
|
+
const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
|
|
28082
28110
|
const result = getDragPermission({
|
|
28083
|
-
targetTagName
|
|
28084
|
-
hasNoDragAttribute
|
|
28111
|
+
targetTagName,
|
|
28112
|
+
hasNoDragAttribute,
|
|
28085
28113
|
direction,
|
|
28086
28114
|
timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
|
|
28087
28115
|
swipeAmount,
|
package/dist/browser/index.mjs
CHANGED
|
@@ -27843,6 +27843,31 @@ function getNextHandleState({
|
|
|
27843
27843
|
}
|
|
27844
27844
|
|
|
27845
27845
|
// src/runtime/drag-policy.ts
|
|
27846
|
+
function isElementLike(target) {
|
|
27847
|
+
const element = target;
|
|
27848
|
+
return Boolean(
|
|
27849
|
+
element && typeof element.getAttribute === "function" && typeof element.hasAttribute === "function" && typeof element.closest === "function"
|
|
27850
|
+
);
|
|
27851
|
+
}
|
|
27852
|
+
function getDragTargetMetadata(target) {
|
|
27853
|
+
const targetElement = isElementLike(target) ? target : null;
|
|
27854
|
+
const ancestors = [];
|
|
27855
|
+
let element = targetElement;
|
|
27856
|
+
while (element) {
|
|
27857
|
+
ancestors.push({
|
|
27858
|
+
scrollHeight: element.scrollHeight,
|
|
27859
|
+
clientHeight: element.clientHeight,
|
|
27860
|
+
scrollTop: element.scrollTop,
|
|
27861
|
+
role: element.getAttribute("role")
|
|
27862
|
+
});
|
|
27863
|
+
element = element.parentElement;
|
|
27864
|
+
}
|
|
27865
|
+
return {
|
|
27866
|
+
targetTagName: targetElement?.tagName ?? "",
|
|
27867
|
+
hasNoDragAttribute: targetElement?.hasAttribute("data-drawer-no-drag") || Boolean(targetElement?.closest("[data-drawer-no-drag]")),
|
|
27868
|
+
ancestors
|
|
27869
|
+
};
|
|
27870
|
+
}
|
|
27846
27871
|
function getDragPermission({
|
|
27847
27872
|
targetTagName,
|
|
27848
27873
|
hasNoDragAttribute,
|
|
@@ -28023,6 +28048,19 @@ function Root2({
|
|
|
28023
28048
|
noBodyStyles,
|
|
28024
28049
|
autoFocus
|
|
28025
28050
|
});
|
|
28051
|
+
import_react9.default.useEffect(() => {
|
|
28052
|
+
if (!isOpen || !modal || autoFocus || typeof document === "undefined") {
|
|
28053
|
+
return;
|
|
28054
|
+
}
|
|
28055
|
+
const activeElement = document.activeElement;
|
|
28056
|
+
if (!(activeElement instanceof HTMLElement)) {
|
|
28057
|
+
return;
|
|
28058
|
+
}
|
|
28059
|
+
if (drawerRef.current?.contains(activeElement) || activeElement.closest("[data-drawer]")) {
|
|
28060
|
+
return;
|
|
28061
|
+
}
|
|
28062
|
+
activeElement.blur();
|
|
28063
|
+
}, [autoFocus, isOpen, modal]);
|
|
28026
28064
|
function getScale() {
|
|
28027
28065
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
28028
28066
|
}
|
|
@@ -28040,22 +28078,12 @@ function Root2({
|
|
|
28040
28078
|
pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
|
|
28041
28079
|
}
|
|
28042
28080
|
function shouldDrag(el, isDraggingInDirection) {
|
|
28043
|
-
let element = el;
|
|
28044
28081
|
const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
|
|
28045
28082
|
const date = /* @__PURE__ */ new Date();
|
|
28046
|
-
const ancestors =
|
|
28047
|
-
while (element) {
|
|
28048
|
-
ancestors.push({
|
|
28049
|
-
scrollHeight: element.scrollHeight,
|
|
28050
|
-
clientHeight: element.clientHeight,
|
|
28051
|
-
scrollTop: element.scrollTop,
|
|
28052
|
-
role: element.getAttribute("role")
|
|
28053
|
-
});
|
|
28054
|
-
element = element.parentNode;
|
|
28055
|
-
}
|
|
28083
|
+
const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
|
|
28056
28084
|
const result = getDragPermission({
|
|
28057
|
-
targetTagName
|
|
28058
|
-
hasNoDragAttribute
|
|
28085
|
+
targetTagName,
|
|
28086
|
+
hasNoDragAttribute,
|
|
28059
28087
|
direction,
|
|
28060
28088
|
timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
|
|
28061
28089
|
swipeAmount,
|
|
@@ -1311,6 +1311,30 @@ function getNextHandleState({ isDragging, preventCycle, shouldCancelInteraction,
|
|
|
1311
1311
|
};
|
|
1312
1312
|
}
|
|
1313
1313
|
|
|
1314
|
+
function isElementLike(target) {
|
|
1315
|
+
const element = target;
|
|
1316
|
+
return Boolean(element && typeof element.getAttribute === 'function' && typeof element.hasAttribute === 'function' && typeof element.closest === 'function');
|
|
1317
|
+
}
|
|
1318
|
+
function getDragTargetMetadata(target) {
|
|
1319
|
+
var _ref;
|
|
1320
|
+
const targetElement = isElementLike(target) ? target : null;
|
|
1321
|
+
const ancestors = [];
|
|
1322
|
+
let element = targetElement;
|
|
1323
|
+
while(element){
|
|
1324
|
+
ancestors.push({
|
|
1325
|
+
scrollHeight: element.scrollHeight,
|
|
1326
|
+
clientHeight: element.clientHeight,
|
|
1327
|
+
scrollTop: element.scrollTop,
|
|
1328
|
+
role: element.getAttribute('role')
|
|
1329
|
+
});
|
|
1330
|
+
element = element.parentElement;
|
|
1331
|
+
}
|
|
1332
|
+
return {
|
|
1333
|
+
targetTagName: (_ref = targetElement == null ? void 0 : targetElement.tagName) != null ? _ref : '',
|
|
1334
|
+
hasNoDragAttribute: (targetElement == null ? void 0 : targetElement.hasAttribute('data-drawer-no-drag')) || Boolean(targetElement == null ? void 0 : targetElement.closest('[data-drawer-no-drag]')),
|
|
1335
|
+
ancestors
|
|
1336
|
+
};
|
|
1337
|
+
}
|
|
1314
1338
|
function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeSinceOpenMs, swipeAmount, hasHighlightedText, timeSinceLastPreventedMs, scrollLockTimeout, isDraggingInDirection, ancestors }) {
|
|
1315
1339
|
if (targetTagName === 'SELECT' || hasNoDragAttribute) {
|
|
1316
1340
|
return {
|
|
@@ -1473,6 +1497,24 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1473
1497
|
noBodyStyles,
|
|
1474
1498
|
autoFocus
|
|
1475
1499
|
});
|
|
1500
|
+
React__default.useEffect(()=>{
|
|
1501
|
+
var _drawerRef_current;
|
|
1502
|
+
if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
|
|
1503
|
+
return;
|
|
1504
|
+
}
|
|
1505
|
+
const activeElement = document.activeElement;
|
|
1506
|
+
if (!(activeElement instanceof HTMLElement)) {
|
|
1507
|
+
return;
|
|
1508
|
+
}
|
|
1509
|
+
if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
|
|
1510
|
+
return;
|
|
1511
|
+
}
|
|
1512
|
+
activeElement.blur();
|
|
1513
|
+
}, [
|
|
1514
|
+
autoFocus,
|
|
1515
|
+
isOpen,
|
|
1516
|
+
modal
|
|
1517
|
+
]);
|
|
1476
1518
|
function getScale() {
|
|
1477
1519
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
1478
1520
|
}
|
|
@@ -1496,24 +1538,12 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1496
1538
|
}
|
|
1497
1539
|
function shouldDrag(el, isDraggingInDirection) {
|
|
1498
1540
|
var _window_getSelection;
|
|
1499
|
-
let element = el;
|
|
1500
1541
|
const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
|
|
1501
1542
|
const date = new Date();
|
|
1502
|
-
const ancestors =
|
|
1503
|
-
// Keep climbing up the DOM tree as long as there's a parent
|
|
1504
|
-
while(element){
|
|
1505
|
-
ancestors.push({
|
|
1506
|
-
scrollHeight: element.scrollHeight,
|
|
1507
|
-
clientHeight: element.clientHeight,
|
|
1508
|
-
scrollTop: element.scrollTop,
|
|
1509
|
-
role: element.getAttribute('role')
|
|
1510
|
-
});
|
|
1511
|
-
// Move up to the parent element
|
|
1512
|
-
element = element.parentNode;
|
|
1513
|
-
}
|
|
1543
|
+
const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
|
|
1514
1544
|
const result = getDragPermission({
|
|
1515
|
-
targetTagName
|
|
1516
|
-
hasNoDragAttribute
|
|
1545
|
+
targetTagName,
|
|
1546
|
+
hasNoDragAttribute,
|
|
1517
1547
|
direction,
|
|
1518
1548
|
timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
|
|
1519
1549
|
swipeAmount,
|
|
@@ -1331,6 +1331,30 @@ function getNextHandleState({ isDragging, preventCycle, shouldCancelInteraction,
|
|
|
1331
1331
|
};
|
|
1332
1332
|
}
|
|
1333
1333
|
|
|
1334
|
+
function isElementLike(target) {
|
|
1335
|
+
const element = target;
|
|
1336
|
+
return Boolean(element && typeof element.getAttribute === 'function' && typeof element.hasAttribute === 'function' && typeof element.closest === 'function');
|
|
1337
|
+
}
|
|
1338
|
+
function getDragTargetMetadata(target) {
|
|
1339
|
+
var _ref;
|
|
1340
|
+
const targetElement = isElementLike(target) ? target : null;
|
|
1341
|
+
const ancestors = [];
|
|
1342
|
+
let element = targetElement;
|
|
1343
|
+
while(element){
|
|
1344
|
+
ancestors.push({
|
|
1345
|
+
scrollHeight: element.scrollHeight,
|
|
1346
|
+
clientHeight: element.clientHeight,
|
|
1347
|
+
scrollTop: element.scrollTop,
|
|
1348
|
+
role: element.getAttribute('role')
|
|
1349
|
+
});
|
|
1350
|
+
element = element.parentElement;
|
|
1351
|
+
}
|
|
1352
|
+
return {
|
|
1353
|
+
targetTagName: (_ref = targetElement == null ? void 0 : targetElement.tagName) != null ? _ref : '',
|
|
1354
|
+
hasNoDragAttribute: (targetElement == null ? void 0 : targetElement.hasAttribute('data-drawer-no-drag')) || Boolean(targetElement == null ? void 0 : targetElement.closest('[data-drawer-no-drag]')),
|
|
1355
|
+
ancestors
|
|
1356
|
+
};
|
|
1357
|
+
}
|
|
1334
1358
|
function getDragPermission({ targetTagName, hasNoDragAttribute, direction, timeSinceOpenMs, swipeAmount, hasHighlightedText, timeSinceLastPreventedMs, scrollLockTimeout, isDraggingInDirection, ancestors }) {
|
|
1335
1359
|
if (targetTagName === 'SELECT' || hasNoDragAttribute) {
|
|
1336
1360
|
return {
|
|
@@ -1493,6 +1517,24 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1493
1517
|
noBodyStyles,
|
|
1494
1518
|
autoFocus
|
|
1495
1519
|
});
|
|
1520
|
+
React__namespace.default.useEffect(()=>{
|
|
1521
|
+
var _drawerRef_current;
|
|
1522
|
+
if (!isOpen || !modal || autoFocus || typeof document === 'undefined') {
|
|
1523
|
+
return;
|
|
1524
|
+
}
|
|
1525
|
+
const activeElement = document.activeElement;
|
|
1526
|
+
if (!(activeElement instanceof HTMLElement)) {
|
|
1527
|
+
return;
|
|
1528
|
+
}
|
|
1529
|
+
if (((_drawerRef_current = drawerRef.current) == null ? void 0 : _drawerRef_current.contains(activeElement)) || activeElement.closest('[data-drawer]')) {
|
|
1530
|
+
return;
|
|
1531
|
+
}
|
|
1532
|
+
activeElement.blur();
|
|
1533
|
+
}, [
|
|
1534
|
+
autoFocus,
|
|
1535
|
+
isOpen,
|
|
1536
|
+
modal
|
|
1537
|
+
]);
|
|
1496
1538
|
function getScale() {
|
|
1497
1539
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
1498
1540
|
}
|
|
@@ -1516,24 +1558,12 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
|
|
|
1516
1558
|
}
|
|
1517
1559
|
function shouldDrag(el, isDraggingInDirection) {
|
|
1518
1560
|
var _window_getSelection;
|
|
1519
|
-
let element = el;
|
|
1520
1561
|
const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
|
|
1521
1562
|
const date = new Date();
|
|
1522
|
-
const ancestors =
|
|
1523
|
-
// Keep climbing up the DOM tree as long as there's a parent
|
|
1524
|
-
while(element){
|
|
1525
|
-
ancestors.push({
|
|
1526
|
-
scrollHeight: element.scrollHeight,
|
|
1527
|
-
clientHeight: element.clientHeight,
|
|
1528
|
-
scrollTop: element.scrollTop,
|
|
1529
|
-
role: element.getAttribute('role')
|
|
1530
|
-
});
|
|
1531
|
-
// Move up to the parent element
|
|
1532
|
-
element = element.parentNode;
|
|
1533
|
-
}
|
|
1563
|
+
const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
|
|
1534
1564
|
const result = getDragPermission({
|
|
1535
|
-
targetTagName
|
|
1536
|
-
hasNoDragAttribute
|
|
1565
|
+
targetTagName,
|
|
1566
|
+
hasNoDragAttribute,
|
|
1537
1567
|
direction,
|
|
1538
1568
|
timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
|
|
1539
1569
|
swipeAmount,
|
package/dist/index.js
CHANGED
|
@@ -27868,6 +27868,31 @@ function getNextHandleState({
|
|
|
27868
27868
|
}
|
|
27869
27869
|
|
|
27870
27870
|
// src/runtime/drag-policy.ts
|
|
27871
|
+
function isElementLike(target) {
|
|
27872
|
+
const element = target;
|
|
27873
|
+
return Boolean(
|
|
27874
|
+
element && typeof element.getAttribute === "function" && typeof element.hasAttribute === "function" && typeof element.closest === "function"
|
|
27875
|
+
);
|
|
27876
|
+
}
|
|
27877
|
+
function getDragTargetMetadata(target) {
|
|
27878
|
+
const targetElement = isElementLike(target) ? target : null;
|
|
27879
|
+
const ancestors = [];
|
|
27880
|
+
let element = targetElement;
|
|
27881
|
+
while (element) {
|
|
27882
|
+
ancestors.push({
|
|
27883
|
+
scrollHeight: element.scrollHeight,
|
|
27884
|
+
clientHeight: element.clientHeight,
|
|
27885
|
+
scrollTop: element.scrollTop,
|
|
27886
|
+
role: element.getAttribute("role")
|
|
27887
|
+
});
|
|
27888
|
+
element = element.parentElement;
|
|
27889
|
+
}
|
|
27890
|
+
return {
|
|
27891
|
+
targetTagName: targetElement?.tagName ?? "",
|
|
27892
|
+
hasNoDragAttribute: targetElement?.hasAttribute("data-drawer-no-drag") || Boolean(targetElement?.closest("[data-drawer-no-drag]")),
|
|
27893
|
+
ancestors
|
|
27894
|
+
};
|
|
27895
|
+
}
|
|
27871
27896
|
function getDragPermission({
|
|
27872
27897
|
targetTagName,
|
|
27873
27898
|
hasNoDragAttribute,
|
|
@@ -28048,6 +28073,19 @@ function Root2({
|
|
|
28048
28073
|
noBodyStyles,
|
|
28049
28074
|
autoFocus
|
|
28050
28075
|
});
|
|
28076
|
+
import_react9.default.useEffect(() => {
|
|
28077
|
+
if (!isOpen || !modal || autoFocus || typeof document === "undefined") {
|
|
28078
|
+
return;
|
|
28079
|
+
}
|
|
28080
|
+
const activeElement = document.activeElement;
|
|
28081
|
+
if (!(activeElement instanceof HTMLElement)) {
|
|
28082
|
+
return;
|
|
28083
|
+
}
|
|
28084
|
+
if (drawerRef.current?.contains(activeElement) || activeElement.closest("[data-drawer]")) {
|
|
28085
|
+
return;
|
|
28086
|
+
}
|
|
28087
|
+
activeElement.blur();
|
|
28088
|
+
}, [autoFocus, isOpen, modal]);
|
|
28051
28089
|
function getScale() {
|
|
28052
28090
|
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
|
|
28053
28091
|
}
|
|
@@ -28065,22 +28103,12 @@ function Root2({
|
|
|
28065
28103
|
pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
|
|
28066
28104
|
}
|
|
28067
28105
|
function shouldDrag(el, isDraggingInDirection) {
|
|
28068
|
-
let element = el;
|
|
28069
28106
|
const swipeAmount = drawerRef.current ? getTranslate(drawerRef.current, direction) : null;
|
|
28070
28107
|
const date = /* @__PURE__ */ new Date();
|
|
28071
|
-
const ancestors =
|
|
28072
|
-
while (element) {
|
|
28073
|
-
ancestors.push({
|
|
28074
|
-
scrollHeight: element.scrollHeight,
|
|
28075
|
-
clientHeight: element.clientHeight,
|
|
28076
|
-
scrollTop: element.scrollTop,
|
|
28077
|
-
role: element.getAttribute("role")
|
|
28078
|
-
});
|
|
28079
|
-
element = element.parentNode;
|
|
28080
|
-
}
|
|
28108
|
+
const { targetTagName, hasNoDragAttribute, ancestors } = getDragTargetMetadata(el);
|
|
28081
28109
|
const result = getDragPermission({
|
|
28082
|
-
targetTagName
|
|
28083
|
-
hasNoDragAttribute
|
|
28110
|
+
targetTagName,
|
|
28111
|
+
hasNoDragAttribute,
|
|
28084
28112
|
direction,
|
|
28085
28113
|
timeSinceOpenMs: openTime.current ? date.getTime() - openTime.current.getTime() : null,
|
|
28086
28114
|
swipeAmount,
|